/* Stage 5 — decisive scale + fingerprint-flow hero + brand colors + logo-ready education. */

:root {
  --shell: 1320px;
  --text: #26364d;
  --text-strong: #081a36;
  --muted: #52647d;
}
html.theme-dark {
  --bg: #0a0c0f;
  --bg-soft: #101217;
  --surface: #14171c;
  --surface-2: #191c22;
  --text: #e4dfe1;
  --text-strong: #fbf8f9;
  --muted: #c5bdc1;
  --accent: #c64560;
  --accent-strong: #ec6a83;
  --accent-soft: rgba(198,69,96,.17);
  --border: #34363d;
  --border-strong: #533941;
  --hero-glow: rgba(198,69,96,.25);
}

/* The webpage can scroll: prioritise comfortable reading over fitting a mockup into one viewport. */
body { font-size:20px; line-height:1.72; }
.site-section { padding:78px 0; }
.retained-section { padding:78px 24px !important; }
.section-shell,.nav-shell,.hero-shell { width:min(calc(100% - 64px),var(--shell)); }

/* Header / language controls are real controls, not tiny utility captions. */
.nav-shell { min-height:84px; }
.brand { font-size:1.78rem; }
.desktop-nav { gap:30px; }
.desktop-nav a { font-size:1.08rem; }
.icon-button { width:50px; height:50px; border-radius:14px; font-size:1.1rem; }
.language-button { min-width:98px; width:auto; height:50px; padding:0 15px; font-size:1rem; gap:9px; }
.language-button img { width:23px; height:16px; }
.language-menu { min-width:196px; padding:7px; }
.language-menu li { font-size:1.02rem; padding:12px 13px; border-radius:9px; }
.language-menu li img { width:24px; }

/* Hero copy scale. */
#lead.hero-section { min-height:780px !important; padding:145px 0 88px !important; }
.hero-shell { grid-template-columns:minmax(0,.88fr) minmax(590px,1.12fr); gap:55px; }
.hero-copy h1 { font-size:clamp(5.2rem,7.4vw,7.8rem); margin-bottom:28px; }
.hero-tagline { font-size:clamp(1.9rem,2.45vw,2.5rem); line-height:1.25; max-width:760px; }
.hero-role { font-size:1.23rem; margin-top:13px; }
.eyebrow { font-size:.9rem; letter-spacing:.18em; }
.hero-actions { gap:13px; margin-top:31px; }
.hero-actions a { min-height:56px; padding:0 22px; font-size:1.03rem; border-radius:13px; }
.hero-actions a i { font-size:1.18rem; }
.hero-topics { font-size:1rem; margin-top:32px; gap:9px 12px; }
.hero-topics span { padding:7px 12px; }

/* Selective official-ish brand colours: the interface remains restrained, only the marks carry colour. */
.hero-actions .brand-link i,.contact-links .brand-link i { transition:filter .2s ease,transform .2s ease; }
.scholar-link i { color:#4285f4 !important; }
.orcid-link i { color:#a6ce39 !important; }
.linkedin-link i { color:#0a66c2 !important; }
.researchgate-link i { color:#00c7b7 !important; }
html:not(.theme-dark) .github-link i { color:#181717 !important; }
html.theme-dark .github-link i { color:#f5f5f5 !important; }
.brand-link:hover i { transform:scale(1.08); }

/* Stage-5 hero visual: fingerprint -> feature field -> embedding -> protected representation. */
.hero-visual-v5 { min-height:555px; position:relative; color:var(--accent); --mx:0; --my:0; isolation:isolate; }
.hero-visual-v5 .visual-glow { position:absolute; inset:3% 0 0 4%; opacity:1; background:radial-gradient(ellipse at 50% 48%,var(--hero-glow),transparent 61%); filter:blur(4px); }
.hero-visual-v5 .visual-microgrid { position:absolute; inset:3% 0 5% 3%; opacity:.23; background-image:radial-gradient(circle,var(--accent) .9px,transparent 1px); background-size:18px 18px; mask-image:linear-gradient(112deg,transparent 0,#000 15%,#000 73%,transparent 100%); }
.research-flow-v5 { position:absolute; inset:0; width:100%; height:100%; overflow:visible; transition:transform .18s ease-out; transform:translate(calc(var(--mx)*7px),calc(var(--my)*5px)); }
.flow-traces-v5 { opacity:.24; stroke-width:1.15; }
.fingerprint-v5 { stroke-width:2.05; opacity:.72; transform:translate(calc(var(--mx)*-4px),calc(var(--my)*2px)); transform-origin:190px 230px; }
.fingerprint-v5 path:nth-child(n+6) { opacity:.45; stroke-width:1.35; }
.biometric-specks-v5 { opacity:.54; }
.feature-stream-v5 { transform:translate(calc(var(--mx)*-1px),calc(var(--my)*1px)); }
.embedding-field-v5 { opacity:.82; }
.embedding-v5 { transform:translate(calc(var(--mx)*1px),calc(var(--my)*-2px)); transform-origin:440px 250px; }
.embedding-links-v5 { stroke-width:1.25; opacity:.36; }
.embedding-nodes-v5 { opacity:.9; }
.transform-stream-v5 { stroke-width:1.7; stroke-dasharray:7 8; opacity:.78; }
.protect-v5 { transform:translate(calc(var(--mx)*4px),calc(var(--my)*2px)); transform-origin:680px 275px; }
.template-grid-v5 { stroke-width:1.45; opacity:.58; }
.template-nodes-v5 { opacity:.9; }
.shield-v5 { stroke-width:2; opacity:.62; }
.shield-check-v5 { stroke-width:2.5; opacity:.92; }
.key-mark-v5 { stroke-width:2.45; opacity:.86; }
.circuit-svg-v5 { stroke-width:1.05; opacity:.2; }

.visual-stage { font-size:1rem; gap:11px; }
.visual-stage .stage-index { font-size:.88rem; }
.visual-stage > i { font-size:1.35rem; }
.visual-stage strong { font-size:1.25rem; }
.visual-stage small { font-size:.76rem; margin-top:5px; letter-spacing:.075em; }
.stage-observe { left:1%; top:8%; }
.stage-represent { left:38%; bottom:6%; }
.stage-protect { right:0; top:13%; }
.visual-sequence { font-size:.73rem; gap:10px; bottom:-2px; }
.visual-sequence i { width:39px; }

/* Major editorial scale. */
.section-heading-block h2,.section-title-row h2,.contact-section h2,
.retained-section > .heading,.retained-section > h2.heading {
  font-size:clamp(3rem,4.2vw,4.35rem) !important;
  line-height:1.06;
}
.section-kicker { font-size:.93rem; letter-spacing:.14em; }
.section-note,.retained-section > .section-subtitle { font-size:1.13rem !important; line-height:1.6; }
.section-title-row { margin-bottom:31px; }
.retained-section > .section-subtitle { max-width:980px; }

/* About: dramatically more readable while retaining three-column editorial structure. */
#about.about-section { padding:65px 0 !important; }
.about-grid { grid-template-columns:.76fr 1.52fr .85fr; gap:32px; }
.about-copy { padding-left:28px; }
.about-copy p { font-size:1.2rem !important; line-height:1.72; margin-bottom:22px; color:var(--text) !important; }
.updated-line { font-size:.98rem; }
.news-card { padding:18px 20px; border-radius:15px; align-self:start; }
.mini-heading { font-size:1.08rem; }
.news-card li { font-size:1rem; line-height:1.55; padding:12px 0; color:var(--text); }
.news-card li strong { font-size:.93rem; }
html.theme-dark .section-heading-block h2,
html.theme-dark #about .section-heading-block h2,
html.theme-dark .retained-section > .heading,
html.theme-dark .section-title-row h2,
html.theme-dark .contact-section h2 { color:var(--text-strong) !important; }
html.theme-dark .updated-line { color:#aea5a9 !important; }

/* Research cards: larger content, slightly tighter boxes. */
.research-section { padding:74px 0; }
.research-grid { gap:17px; }
.research-card { min-height:210px; padding:19px 21px 20px; border-radius:18px; }
.card-top { margin-bottom:12px; }
.card-number { font-size:1.18rem; }
.research-icon { width:59px; height:59px; border-radius:16px; font-size:1.52rem; }
.research-card h3 { font-size:1.68rem; line-height:1.23; margin-bottom:8px; }
.research-card p { font-size:1.08rem; line-height:1.53; max-width:97%; }
.topic-list { margin-top:12px; gap:7px; }
.topic-list span,.pill-row span { font-size:.91rem; padding:7px 11px; }

/* Publications / projects: much more readable, with reduced padding instead of reduced type. */
#publications .publication-grid { gap:14px; }
.pub-entry { min-height:142px; padding:18px 20px !important; }
.pub-entry:first-child { min-height:158px; padding:20px 31% 20px 22px !important; }
.pub-title { font-size:1.28rem; line-height:1.4; }
.pub-entry:first-child .pub-title { font-size:1.46rem; }
.pub-label { font-size:.9rem; }
.pub-authors { font-size:.99rem; }
.pub-meta { font-size:.96rem !important; line-height:1.5; }

#projects .row { gap:17px; }
.project { min-height:218px; grid-template-columns:150px 1fr; }
.project-image { width:150px; min-height:218px; }
.project-image img { min-height:218px; }
.project-info { padding:18px 19px !important; }
.project-info h3 { font-size:1.42rem !important; line-height:1.28; margin-bottom:10px !important; }
.project-info p { font-size:1.06rem !important; line-height:1.57; }
.project-info a { font-size:1rem; }
/* Never hide a grid cell: the previous observer could leave the first project invisible. */
.reveal-item { opacity:1 !important; transform:none !important; }

/* Teaching & Methods — compact containers but deliberately large text. */
.teaching-section,.methods-section { padding:70px 0; }
.teaching-card { padding:19px 20px; border-radius:17px; gap:17px; }
.teaching-icon,.method-icon { width:58px; height:58px; border-radius:16px; font-size:1.43rem; }
.teaching-card h3,.method-card h3 { font-size:1.5rem; }
.teaching-card p { font-size:1.08rem; line-height:1.5; }
.methods-grid { gap:15px; }
.method-card { min-height:136px; padding:17px 19px; grid-template-columns:58px 1fr; column-gap:16px; border-radius:17px; }
.method-card h3 { font-size:1.43rem; margin-bottom:2px; }
.method-note { font-size:.98rem; line-height:1.45; }
.method-card .pill-row { margin-top:10px; gap:7px; }
.method-card .pill-row span { font-size:.91rem; padding:7px 10px; }

/* Employment: larger copy and logo slots. */
#experience-timeline { width:min(100%,1120px); gap:16px; }
#experience-timeline > .experience-card { grid-template-columns:100px 1fr; gap:24px; padding:21px 23px !important; }
.employment-logo-placeholder { width:90px; height:90px; font-size:.87rem; border-radius:19px; }
#experience-timeline h3 { font-size:1.64rem !important; }
#experience-timeline h4 { font-size:1.18rem !important; }
.experience-date { font-size:1rem; margin-bottom:13px; }
#experience-timeline li { font-size:1.07rem; line-height:1.6; margin-bottom:7px; }

/* Education now mirrors the logo-ready employment language. */
#education .education-block.education-card-v5 {
  max-width:1060px; display:grid; grid-template-columns:100px 1fr; gap:24px; align-items:start;
  padding:21px 23px !important; margin-bottom:16px;
}
.education-logo-placeholder {
  width:90px; height:90px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:19px; background:var(--surface-2); color:var(--accent);
  font-size:.9rem; font-weight:800; letter-spacing:.07em; overflow:hidden;
}
.education-logo-placeholder img { width:100%; height:100%; object-fit:contain; padding:10px; }
.education-content { min-width:0; }
.education-card-v5 h3 { font-size:1.62rem !important; margin:0 0 2px !important; }
.education-card-v5 .education-date { position:static !important; float:none !important; display:block; font-size:1rem; color:var(--accent); margin:0 0 8px; }
.education-card-v5 h4 { font-size:1.18rem !important; margin:0 0 8px !important; }
.education-card-v5 p,.education-card-v5 p span { font-size:1.08rem !important; line-height:1.55; }

/* Contact and form controls deserve full reading scale as well. */
.contact-section p { font-size:1.14rem; }
.contact-links a { font-size:1.07rem; }
.contact-links a i { font-size:1.22rem; margin-right:5px; }
#contact-form input,#contact-form textarea { font-size:1.04rem !important; padding:15px 16px !important; }
#contact-form button { font-size:1.05rem !important; min-height:48px; }
.site-footer { font-size:.98rem; }
.translation-note { font-size:.88rem; }

/* Dark mode: preserve wine atmosphere while prioritising legibility. */
html.theme-dark body,html.theme-dark p,html.theme-dark li { color:#e4dfe1; }
html.theme-dark .about-copy p,html.theme-dark .project-info p,html.theme-dark #experience-timeline li,
html.theme-dark .teaching-card p,html.theme-dark .education-card-v5 p { color:#e3dde0 !important; }
html.theme-dark .section-note,html.theme-dark .section-subtitle,html.theme-dark .method-note,
html.theme-dark .pub-meta { color:#c8c0c4 !important; }
html.theme-dark .topic-list span,html.theme-dark .pill-row span { color:#e0dadd; background:#191d22; border-color:#393b42; }
html.theme-dark .news-card li { color:#e2dcdf; }
html.theme-dark .desktop-nav a,html.theme-dark .language-button,html.theme-dark .language-menu li { color:#e9e4e6; }

@media (max-width:1180px) {
  body { font-size:19px; }
  .hero-shell { grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr); }
  .desktop-nav { gap:20px; }
  .desktop-nav a { font-size:1rem; }
}
@media (max-width:960px) {
  body { font-size:18.5px; }
  .hero-shell { grid-template-columns:1fr; }
  .hero-visual-v5 { min-height:500px; max-width:800px; width:100%; margin:0 auto; }
  .about-grid { grid-template-columns:1fr; }
  .about-copy { padding-left:0; border-left:0; }
  #experience-timeline > .experience-card,#education .education-block.education-card-v5 { grid-template-columns:82px 1fr; gap:19px; }
  .employment-logo-placeholder,.education-logo-placeholder { width:74px; height:74px; border-radius:16px; }
}
@media (max-width:700px) {
  body { font-size:18px; }
  .section-shell,.nav-shell,.hero-shell { width:min(calc(100% - 32px),var(--shell)); }
  .nav-shell { min-height:72px; }
  .brand { font-size:1.48rem; }
  .icon-button { width:46px; height:46px; }
  .language-button { min-width:88px; height:46px; font-size:.94rem; }
  .hero-copy h1 { font-size:clamp(3.8rem,16vw,5.2rem); }
  .hero-tagline { font-size:1.65rem; }
  .hero-role { font-size:1.08rem; }
  .hero-visual-v5 { min-height:405px; }
  .visual-stage { transform:scale(.9) !important; transform-origin:left center; }
  .stage-represent { left:30%; }
  .research-grid,.methods-grid,.teaching-grid,#publications .publication-grid,#projects .row { grid-template-columns:1fr; }
  .pub-entry:first-child { grid-column:auto; padding:20px !important; }
  .pub-entry:first-child::after { display:none; }
  .project { grid-template-columns:112px 1fr; }
  .project-image { width:112px; }
  #experience-timeline > .experience-card,#education .education-block.education-card-v5 { grid-template-columns:1fr; padding:19px !important; }
  .employment-logo-placeholder,.education-logo-placeholder { width:66px; height:66px; }
}