@charset "UTF-8";

/* ========================
   Variables
   ======================== */
:root {
    --red: #e10600;
    --bg: #15151e;
    --surface: #1e1e2e;
    --card-bg: #252535;
    --border: rgba(255, 255, 255, 0.08);
    --white: #ffffff;
    --off-white: #ccccdd;
    --gray: #888899;
    --header-h: 70px;
    --stripe-h: 4px;
    --offset: calc(var(--stripe-h) + var(--header-h));
    --font: 'Titillium Web', sans-serif;
    --ease: 0.3s ease;
}

/* ========================
   Reset / Base
   ======================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg);
    color: var(--white);
    font-family: var(--font);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
}

/* ========================
   Top stripe
   ======================== */
.top-stripe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--stripe-h);
    background-color: var(--red);
    z-index: 1000;
}

/* ========================
   Header
   ======================== */
#header {
    position: fixed;
    top: var(--stripe-h);
    left: 0;
    width: 100%;
    height: var(--header-h);
    background-color: rgba(21, 21, 30, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    z-index: 999;
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo img {
    height: 48px;
    opacity: 0.9;
    transition: opacity var(--ease);
}

.header-logo:hover img {
    opacity: 1;
}

#header nav ul {
    display: flex;
    gap: 40px;
}

#header nav a {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--off-white);
    transition: color var(--ease);
    position: relative;
    padding-bottom: 4px;
}

#header nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--red);
    transition: width var(--ease);
}

#header nav a:hover {
    color: var(--white);
}

#header nav a:hover::after {
    width: 100%;
}

/* ========================
   Hero
   ======================== */

/* ========================
   Section common
   ======================== */
section {
    padding: 100px 0;
    scroll-margin-top: var(--offset);
}

#profile{
    padding-bottom: 140px;
}

.section-header {
    max-width: 1400px;
    margin: 0 auto 56px;
    padding: 0 40px;
}

.section-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 10px;
}

.section-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--white);
    position: relative;
    padding-bottom: 20px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 56px;
    height: 3px;
    background-color: var(--red);
}

/* ========================
   Driver Card (F1 Blue Area)
   ======================== */
#top {
    position: relative;
    overflow: hidden;
    background: linear-gradient(110deg, #003fa3 0%, #0055cc 30%, #0077ee 60%, #0093ff 100%);
    min-height: 600px;
    scroll-margin-top: var(--offset);
}

/* Grid texture overlay */
#top::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    z-index: 0;
}

/* --- 右半分：写真背景 --- */
.dc-photo-bg {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.dc-photo-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* 写真の左端をブルー背景にフェード */
.dc-photo-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #0055cc 0%, rgba(0,85,204,0.4) 35%, transparent 70%);
    z-index: 2;
    pointer-events: none;
}

/* --- 左半分：F1コンテンツエリア --- */
/* md:mr-[50%] flex-grow flex flex-col gap-px-32 justify-between items-center */
.dc-content-area {
    position: relative;
    z-index: 2;
    width: 50%;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding: 40px 0;
}

/* --- レーシングライン --- */
/* w-[36px] h-[90px] md:h-[120px] lg:h-[144px] overflow-hidden */
.dc-rl-wrap {
    width: 36px;
    height: 90px;
    overflow: hidden;
    flex-shrink: 0;
}

.dc-rl-svg {
    display: block;
    width: 36px;
    height: 90px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .dc-rl-wrap,
    .dc-rl-svg { height: 120px; }
}

@media (min-width: 1024px) {
    .dc-rl-wrap,
    .dc-rl-svg { height: 144px; }
}

/* --- 中央：名前＋メタ情報 --- */
/* grow flex flex-col justify-end md:justify-around gap-px-16 */
.dc-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    color: white;
    text-align: center;
}

@media (min-width: 768px) {
    .dc-info { justify-content: space-around; }
}

/* flex flex-col gap-px-12 items-center */
.dc-names-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

/* flex flex-col items-center */
.dc-name-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* F1: ファーストネームは cursive/italic */
.dc-firstname {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.4rem, 4vw, 2.8rem);
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    line-height: 1;
    margin-bottom: -0.25em;
}

/* F1: ラストネームは極太大文字 */
.dc-lastname {
    font-family: var(--font);
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    line-height: 0.85;
}

/* flex gap-px-12 items-center */
.dc-meta-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* flex gap-px-8 items-center */
.dc-meta-grp {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dc-meta-grp svg {
    border-radius: 2px;
    flex-shrink: 0;
}

.dc-meta-bar span,
.dc-meta-grp span {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* Divider-module_transparent__WrXCp Divider-module_sm__y2x8g */
.dc-meta-divider {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.3);
    flex-shrink: 0;
}

.dc-email {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #fff;
    text-align: center;
}

.dc-email-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/* --- CTAボタン (Button-module_stroke) --- */
.dc-cta {
    display: flex;
    justify-content: center;
}

.dc-btn {
    display: inline-flex;
    align-items: center;
    border: 2px solid rgba(255,255,255,0.9);
    color: #fff;
    padding: 8px 20px;
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--ease), color var(--ease);
}

.dc-btn:hover {
    background: rgba(255,255,255,0.95);
    color: #0055cc;
}

.dc-btn-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
    #top { min-height: 500px; }

    .dc-content-area {
        width: 100%;
        min-height: 500px;
    }

    .dc-photo-bg {
        width: 100%;
    }

    .dc-photo-bg::after {
        background: linear-gradient(
            to bottom,
            rgba(0,55,160,0.2) 0%,
            rgba(0,55,160,0.85) 60%,
            #003fa3 100%
        );
    }
}

/* ========================
   Profile
   ======================== */
#profile {
    background-color: var(--surface);
    padding-bottom: 0;
}

/* ========================
   Research Block
   ======================== */
.research-block {
    background-color: var(--bg);
    padding: 100px 0;
}

.research-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    gap: 64px;
    align-items: center;
}

.research-visual {
    flex: 0 0 40%;
    position: relative;
    border: 1px solid var(--border);
    overflow: hidden;
}

.research-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(225, 6, 0, 0.2);
    pointer-events: none;
}

.research-visual img {
    width: 100%;
    display: block;
    filter: brightness(0.9);
    transition: transform 0.5s ease;
}

.research-visual:hover img {
    transform: scale(1.03);
}

.research-info {
    flex: 1;
}

.research-theme {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.45;
    margin-bottom: 20px;
}

.research-desc {
    font-size: 0.95rem;
    color: var(--gray);
    line-height: 1.85;
    margin-bottom: 32px;
}

.research-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.keyword {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 14px;
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--off-white);
    transition: border-color var(--ease), color var(--ease);
}

.keyword:hover {
    border-color: var(--red);
    color: var(--white);
}

/* ========================
   Footer
   ======================== */
#footer {
    background-color: #ffffff;
    border-top: 1px solid rgba(0,0,0,0.08);
    position: relative;
}

.footer-accent{
    display: flex;
    flex-direction: column;
    gap: 4px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
}
.footer-accent span{
    display: block;
    height: 4px;
    width: 100%;
    background: var(--red);
}

.section-accent{
    height: 12px;
    width: 100%;
    background: var(--red);
}
.section-accent-group{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 32px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.footer-gh-link{
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: #16161d;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}
.footer-gh-link:hover{ color: var(--red); }
.footer-gh-icon{
    width: 100%;
    height: 100%;
}

.footer-inner p {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #74747f;
    text-align: right;
}

/* ========================
   Publications
   ======================== */
.publications-block {
    background-color: var(--surface);
    padding: 100px 0;
}

.pub-list {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pub-item {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    background-color: var(--card-bg);
    padding: 28px 32px;
    border-left: 3px solid transparent;
    transition: border-color var(--ease), transform var(--ease);
}

.pub-item:hover {
    border-left-color: var(--red);
    transform: translateX(4px);
}

.pub-year {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--red);
    min-width: 48px;
    padding-top: 4px;
    flex-shrink: 0;
    line-height: 1.3;
}

.pub-month {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gray);
}

.pub-detail {
    flex: 1;
}

.pub-venue {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 6px;
}

/* 略称は主役（赤で強調）、正式名称は控えめに併記 */
.pub-venue abbr {
    color: var(--red);
    text-decoration: none;
    cursor: help;
}

.venue-full {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--gray);
    margin-left: 8px;
}

.pub-title {
    font-size: 0.95rem;
    color: var(--off-white);
    line-height: 1.6;
}

.pub-authors {
    font-size: 0.82rem;
    color: var(--gray);
    line-height: 1.6;
    margin-top: 8px;
}

.pub-format {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border: 1px solid var(--red);
    color: var(--red);
}

.pub-placeholder {
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gray);
    text-align: center;
    padding: 60px 0;
}

/* ========================
   Responsive
   ======================== */
@media (max-width: 960px) {
    .research-content {
        flex-direction: column;
        padding: 0 24px;
    }

    .research-visual {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .header-inner {
        padding: 0 20px;
    }

    #header nav ul {
        gap: 18px;
    }

    #header nav a {
        font-size: 0.7rem;
    }

    .section-header,
    .pub-list {
        padding: 0 20px;
    }

    .pub-item {
        flex-direction: column;
        gap: 12px;
    }

    section {
        padding: 70px 0;
    }
}


/* ========================
   image adjustments
   (photos/logos)
   ======================== */
.header-logo{
    display: flex; align-items: center; gap: 10px;
}
.header-logo-text{
    color: var(--white);
    font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em;
    margin-left: 10px;
}

/* 画像の実寸比で表示（下端が切れないように aspect-ratio 固定はしない） */

/* ========================
   Light zone (Profile 以下は白背景)
   ======================== */
.light-zone{
    --bg: #ffffff;
    --surface: #ffffff;
    --card-bg: #f4f4f6;
    --border: rgba(0,0,0,0.08);
    --white: #16161d;
    --off-white: #33333d;
    --gray: #74747f;
    background-color: #ffffff;
    color: #16161d;
}

/* ========================
   Profile photo panel
   ======================== */
.profile-panel{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
    margin-bottom: 40px;
}
.profile-photo{
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 3/4;
    background: var(--surface);
    border: 1px solid var(--border);
    width: 280px;
    max-width: 100%;
    margin: 0 auto;
    justify-self: center;
}
.profile-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-fields{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding-right: 60px;
}
.profile-field{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.profile-field:last-child{
    border-bottom: none;
    padding-bottom: 0;
}
.pf-label{
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--gray);
}
.pf-value{
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
}

@media (max-width: 700px){
    .profile-panel{ grid-template-columns: 1fr; }
    .profile-photo{ aspect-ratio: 4/3; }
}

#publications{ scroll-margin-top: var(--header-h); }