/* ── Self-hosted webfonts ────────────────────────────────────────────────
   Inter and Source Serif 4, variable, served from assets/fonts/. Replaces the
   Google Fonts CDN <link> tags that previously sent every visitor's IP to a
   third party before any consent could be obtained. (Domain names are spelled
   out nowhere here so a "no third-party host" grep over the tree stays clean.)
   Subsets: latin, latin-ext (French oe ligature), greek (Attica centre names on
   the map pages). cyrillic / greek-ext / vietnamese are not used by any page —
   verified by character audit, not assumed. Both families are SIL OFL 1.1;
   licences ship alongside the files. unicode-range values are Google's own,
   copied verbatim so subset switching behaves exactly as before.
   ──────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-serif-4-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* Metric-matched fallbacks — see build note in the playbook. Sized so the
   fallback occupies exactly the space the webfont will, so the swap does not
   move the page. Ratios measured from rendered text, metrics read from the
   shipped woff2 files. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 106.11%;
  ascent-override: 91.30%;
  descent-override: 22.73%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Source Serif 4 Fallback';
  src: local('Georgia'), local('Times New Roman'), local('Liberation Serif');
  size-adjust: 90.81%;
  ascent-override: 114.08%;
  descent-override: 36.89%;
  line-gap-override: 0%;
}

/* ============================================================
   EUROSTROKES — shared stylesheet
   One file for the whole site. Edit here, every page updates.
   ============================================================ */

:root {
  --navy: #0A2540;
  --navy-deep: #061830;
  --ink: #1A2733;
  --grey-600: #4B5563;
  --grey-500: #6B7280;
  --grey-300: #D1D5DB;
  --grey-100: #F3F4F6;
  --grey-50: #F8FAFC;
  --accent: #0295A2;
  --accent-deep: #017783;
  --accent-soft: #E2F3F4;
  --clay: #B65F48;
  --clay-soft: #F5E8E2;
  --paper: #F6F7F4;
  --gold: #B8945A;
  --white: #FFFFFF;
  --radius: 12px;
  --radius-lg: 22px;
  --max: 1220px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink); line-height: 1.55; font-size: 17px;
  background: var(--white); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif; color: var(--navy); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1rem; }
h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
h4 { font-size: 0.95rem; font-family: 'Inter', 'Inter Fallback', sans-serif; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); font-weight: 600; margin-bottom: 0.8rem; }
p { color: var(--grey-600); margin-bottom: 1rem; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--accent); }
.container { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
.section { padding: 84px 0; }

/* NAV */
nav.topbar { border-bottom: 1px solid var(--grey-100); background: var(--white); position: sticky; top: 0; z-index: 50; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; max-width: var(--max); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 34px; width: auto; display: block; }
.brand .wordmark { font-family: 'Source Serif 4', 'Source Serif 4 Fallback', serif; font-size: 1.3rem; font-weight: 600; color: var(--navy); letter-spacing: 0.01em; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { font-size: 0.95rem; color: var(--grey-600); font-weight: 500; }
.nav-links a:hover { color: var(--navy); }
.nav-links a.active { color: var(--navy); }
.nav-cta { background: var(--navy); color: var(--white) !important; padding: 9px 17px; border-radius: var(--radius); font-size: 0.9rem; font-weight: 500; }
.nav-cta:hover { background: var(--accent); color: var(--white) !important; }

/* HERO (home) */
.hero { background: linear-gradient(180deg, #FAFBFC 0%, #FFFFFF 100%); padding: 92px 0 68px; border-bottom: 1px solid var(--grey-100); }
.hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: center; }
.hero-tag { display: inline-block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 20px; }
.hero h1 { margin-bottom: 22px; }
.hero .lede { font-size: 1.14rem; color: var(--grey-600); margin-bottom: 30px; max-width: 560px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 13px 23px; border-radius: var(--radius); font-weight: 500; font-size: 0.97rem; transition: all 0.18s; border: 1.5px solid transparent; cursor: pointer; }
.btn-primary { background: var(--navy); color: var(--white) !important; }
.btn-primary:hover { background: var(--accent); }
.btn-ghost { border-color: var(--grey-300); color: var(--navy) !important; }
.btn-ghost:hover { border-color: var(--navy); background: var(--navy); color: var(--white) !important; }
.hero-card { background: var(--white); border: 1px solid var(--grey-100); border-radius: 10px; padding: 30px; box-shadow: 0 1px 3px rgba(10,37,64,0.04), 0 12px 36px rgba(10,37,64,0.06); }
.hero-card h4 { color: var(--grey-500); }
.hero-card .principal { font-family: 'Source Serif 4', 'Source Serif 4 Fallback', serif; font-size: 1.4rem; color: var(--navy); margin-bottom: 4px; font-weight: 600; }
.hero-card .role { color: var(--grey-600); font-size: 0.95rem; margin-bottom: 16px; }
.hero-card ul { list-style: none; }
.hero-card li { font-size: 0.9rem; color: var(--grey-600); padding: 9px 0; border-top: 1px solid var(--grey-100); display: flex; align-items: baseline; gap: 10px; }
.hero-card li::before { content: ""; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; flex-shrink: 0; transform: translateY(-2px); }

/* TRUST BAR */
.trust { background: var(--navy); color: var(--white); padding: 26px 0; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
.trust-item .num { font-family: 'Source Serif 4', 'Source Serif 4 Fallback', serif; font-size: 1.9rem; font-weight: 600; color: var(--white); display: block; }
.trust-item .label { font-size: 0.78rem; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.08em; }

/* AWARD BAND */
.award { background: var(--grey-50); border-bottom: 1px solid var(--grey-100); padding: 60px 0; }
.award-grid { display: grid; grid-template-columns: 200px 1fr; gap: 44px; align-items: center; max-width: 960px; margin: 0 auto; }
.award-medal { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto; background: radial-gradient(circle at 35% 30%, #d8b877, var(--gold) 55%, #8c6b39); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(184,148,90,0.35); border: 4px solid #e7d2a6; }
.award-medal span { font-family: 'Source Serif 4', 'Source Serif 4 Fallback', serif; color: #fff; font-size: 2.2rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.award-body h2 { font-size: 1.5rem; margin-bottom: 8px; }
.award-body .who { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); font-weight: 600; margin-bottom: 12px; }
.award-body p { font-size: 1rem; margin-bottom: 16px; }

/* SECTION HEAD */
.head { max-width: 760px; margin-bottom: 46px; }

/* PROJECTS */
.projects { background: var(--white); }
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.proj-card { border: 1px solid var(--grey-100); padding: 28px; border-radius: 10px; transition: all 0.2s; display: flex; flex-direction: column; background: var(--white); color: inherit; }
.proj-card:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(10,37,64,0.08); }
.proj-card h4 { color: var(--accent); margin-bottom: 10px; }
.proj-card h3 { font-family: 'Source Serif 4', 'Source Serif 4 Fallback', serif; margin-bottom: 10px; font-size: 1.15rem; color: var(--navy); }
.proj-card p { font-size: 0.93rem; margin: 0; }
.proj-card .status { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--grey-100); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey-500); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.proj-card .status .arrow { color: var(--accent); font-weight: 700; opacity: 0; transform: translateX(-4px); transition: all 0.2s; }
.proj-card:hover .status .arrow { opacity: 1; transform: translateX(0); }

/* LIVETEXTBOOK TEASER */
.lt { background: var(--navy); color: var(--white); padding: 76px 0; position: relative; overflow: hidden; }
.lt::before { content: ""; position: absolute; top: 0; right: -10%; width: 50%; height: 100%; background: radial-gradient(circle at 60% 50%, rgba(180,58,46,0.15), transparent 60%); pointer-events: none; }
.lt-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; position: relative; }
.lt h4 { color: var(--gold); }
.lt h2 { color: var(--white); }
.lt p { color: rgba(255,255,255,0.78); font-size: 1.04rem; }
.lt .btn-ghost { border-color: rgba(255,255,255,0.3); color: var(--white) !important; }
.lt .btn-ghost:hover { background: var(--white); color: var(--navy) !important; border-color: var(--white); }
.lt-vis { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 26px; font-family: 'JetBrains Mono', 'SF Mono', monospace; font-size: 0.78rem; color: rgba(255,255,255,0.85); }
.lt-vis .row { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.lt-vis .row:last-child { border: none; }
.lt-vis .k { color: var(--gold); }
.lt-vis .label-row { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; color: rgba(255,255,255,0.5); margin-bottom: 12px; }
.lt-vis .conf { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.72rem; color: rgba(255,255,255,0.55); font-family: 'Inter', 'Inter Fallback', sans-serif; }

/* ABOUT */
.about { background: var(--grey-50); }
.about-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: start; }
.about-portrait { background: var(--white); border-radius: 10px; padding: 30px; border: 1px solid var(--grey-100); text-align: center; }
.portrait-circle { width: 124px; height: 124px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--accent)); margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; color: var(--white); font-family: 'Source Serif 4', 'Source Serif 4 Fallback', serif; font-size: 2.3rem; font-weight: 600; }
.portrait-name { font-family: 'Source Serif 4', 'Source Serif 4 Fallback', serif; font-size: 1.25rem; color: var(--navy); font-weight: 600; }
.portrait-title { color: var(--grey-600); font-size: 0.9rem; margin-top: 6px; }
.about-body p { font-size: 1.02rem; }
.about-body p + p { margin-top: 14px; }

/* CONTACT */
.contact { background: var(--navy); color: var(--white); padding: 72px 0; text-align: center; }
.contact h2 { color: var(--white); margin-bottom: 14px; }
.contact p { color: rgba(255,255,255,0.78); margin-bottom: 28px; font-size: 1.04rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.contact .btn-primary { background: var(--accent); }
.contact .btn-primary:hover { background: var(--white); color: var(--navy) !important; }

/* FOOTER */
footer { background: var(--navy-deep); color: rgba(255,255,255,0.7); padding: 48px 0 26px; font-size: 0.92rem; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px; margin-bottom: 30px; }
.foot-grid h5 { color: var(--white); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; font-weight: 600; font-family: 'Inter', 'Inter Fallback', sans-serif; }
.foot-grid a { display: block; color: rgba(255,255,255,0.6); margin-bottom: 8px; font-size: 0.9rem; }
.foot-grid a:hover { color: var(--white); }
.foot-brand p { color: rgba(255,255,255,0.55); font-size: 0.88rem; margin-top: 8px; max-width: 360px; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 18px; font-size: 0.8rem; color: rgba(255,255,255,0.5); }

/* ============================================================
   INNER PAGES (project / about / contact sub-pages)
   ============================================================ */

/* Language switcher — fixed top-right corner */
.lang-switch { position: fixed; top: 8px; right: 10px; z-index: 200; display: flex; background: var(--white); border: 1px solid var(--grey-300); border-radius: 999px; overflow: hidden; box-shadow: 0 2px 10px rgba(10,37,64,0.14); font-size: 0.72rem; font-weight: 700; }
.lang-switch a { padding: 4px 11px; color: var(--grey-500); letter-spacing: 0.04em; line-height: 1.4; }
.lang-switch a.active { background: var(--navy); color: #fff; }
.lang-switch a:hover:not(.active) { color: var(--navy); }
@media (max-width: 560px) { .lang-switch { top: 6px; right: 6px; font-size: 0.68rem; } .lang-switch a { padding: 3px 9px; } }

/* Draft banner — shown across every page while the site is in review */
.draft-banner { background: var(--accent-soft); color: #7a261d; text-align: center; font-size: 0.82rem; padding: 8px 16px; border-bottom: 1px solid #e9cabf; }
.draft-banner strong { color: #5e1c15; }

/* Inner page hero */
.page-hero { background: linear-gradient(180deg, #FAFBFC 0%, #FFFFFF 100%); border-bottom: 1px solid var(--grey-100); padding: 56px 0 48px; }
.breadcrumb { font-size: 0.85rem; color: var(--grey-500); margin-bottom: 18px; }
.breadcrumb a { color: var(--grey-500); }
.breadcrumb a:hover { color: var(--accent); }
.page-hero .kicker { display: inline-block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 14px; }
.page-hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 18px; max-width: 820px; }
.page-hero .lede { font-size: 1.12rem; color: var(--grey-600); max-width: 720px; }

/* Status pill */
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--grey-300); color: var(--grey-600); background: var(--white); margin-bottom: 16px; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grey-500); }
.pill.ongoing::before { background: #2e7d52; }
.pill.dev::before { background: var(--gold); }
.pill.building::before { background: var(--accent); }
.pill.open::before { background: #2563eb; }

/* Work-in-progress notice */
.wip { background: #FFF8E6; border: 1px solid #F0DFAE; border-radius: var(--radius); padding: 16px 18px; font-size: 0.92rem; color: #6b5618; margin: 0 0 8px; display: flex; gap: 12px; align-items: flex-start; }
.wip .ico { flex-shrink: 0; font-size: 1.05rem; line-height: 1.3; }

/* Prose content + two-column body */
.content { padding: 64px 0; }
.content-grid { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
.prose { max-width: 760px; }
.prose h2 { margin-top: 8px; }
.prose h3 { color: var(--navy); margin-top: 30px; }
.prose p { font-size: 1.03rem; }
.prose ul { margin: 0 0 1rem 1.1rem; }
.prose li { color: var(--grey-600); margin-bottom: 0.5rem; font-size: 1.02rem; }
.prose .lead { font-size: 1.12rem; color: var(--ink); }

/* Side panel (status / facts) */
.side { position: sticky; top: 92px; }
.side-card { border: 1px solid var(--grey-100); border-radius: 10px; padding: 24px; background: var(--grey-50); margin-bottom: 18px; }
.side-card h5 { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey-500); margin-bottom: 14px; font-family: 'Inter', 'Inter Fallback', sans-serif; font-weight: 600; }
.side-card dl { display: grid; grid-template-columns: 1fr; gap: 12px; }
.side-card .row { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--grey-100); padding-top: 10px; }
.side-card .row:first-child { border-top: none; padding-top: 0; }
.side-card dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey-500); }
.side-card dd { font-size: 0.92rem; color: var(--ink); font-weight: 500; }

/* Status checklist (current progress vs next) */
.track { list-style: none; margin: 14px 0 0; }
.track li { position: relative; padding: 8px 0 8px 26px; font-size: 0.95rem; color: var(--grey-600); border-top: 1px solid var(--grey-100); }
.track li:first-child { border-top: none; }
.track li::before { position: absolute; left: 0; top: 8px; font-size: 0.9rem; }
.track li.done::before { content: "✓"; color: #2e7d52; font-weight: 700; }
.track li.now::before { content: "▶"; color: var(--accent); font-size: 0.7rem; top: 11px; }
.track li.next::before { content: "○"; color: var(--grey-300); }

/* Generic card grid for inner pages */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 8px 0; }
.cards .card { border: 1px solid var(--grey-100); border-radius: 10px; padding: 22px; background: var(--white); }
.cards .card h3 { font-size: 1.05rem; }
.cards .card p { font-size: 0.94rem; margin: 0; }

/* Publication list */
.pubs { list-style: none; margin: 8px 0 0; }
.pubs li { border-top: 1px solid var(--grey-100); padding: 16px 0; font-size: 0.97rem; color: var(--grey-600); }
.pubs li:first-child { border-top: none; }
.pubs .area { display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 600; margin-bottom: 4px; }
.pubs .ptitle { color: var(--ink); font-weight: 500; }
.pubs .doi { color: var(--accent); font-weight: 600; font-size: 0.84rem; white-space: nowrap; }

/* CTA strip */
.cta-strip { background: var(--grey-50); border-top: 1px solid var(--grey-100); padding: 48px 0; text-align: center; }
.cta-strip h3 { font-size: 1.4rem; margin-bottom: 10px; }
.cta-strip p { max-width: 560px; margin: 0 auto 22px; }

/* FIGURES / DIAGRAMS */
.figure { margin: 26px 0; }
.figure img, .figure svg { width: 100%; height: auto; display: block; border: 1px solid var(--grey-100); border-radius: 10px; background: var(--white); }
.figure figcaption { font-size: 0.82rem; color: var(--grey-500); margin-top: 10px; text-align: center; }
.figure-plain img, .figure-plain svg { border: none; }

/* Real photos (drop-in) */
.award-photo { width: 200px; height: 200px; border-radius: 10px; object-fit: cover; object-position: 50% 28%; display: block; margin: 0 auto; box-shadow: 0 10px 30px rgba(10,37,64,0.18); }
.portrait-photo { width: 124px; height: 124px; border-radius: 50%; object-fit: cover; margin: 0 auto 20px; display: block; }
.about-hero-photo { width: 100%; border-radius: 10px; object-fit: cover; display: block; margin-bottom: 18px; }

/* LinkedIn button + inline link */
.btn-linkedin { display: inline-flex; align-items: center; gap: 9px; }
.btn-linkedin svg { width: 17px; height: 17px; }
.nav-links a.li-link { display: inline-flex; align-items: center; gap: 6px; }
.nav-links a.li-link svg { width: 15px; height: 15px; }
.foot-social { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.6); margin-top: 6px; }
.foot-social:hover { color: var(--white); }
.foot-social svg { width: 16px; height: 16px; }

/* INDUSTRY band (home) */
.industry { background: var(--grey-50); border-top: 1px solid var(--grey-100); border-bottom: 1px solid var(--grey-100); padding: 56px 0; }
.industry-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 44px; align-items: center; }
.industry h4 { color: var(--accent); }
.industry h2 { font-size: 1.6rem; margin-bottom: 10px; }
.industry p { font-size: 1.02rem; margin-bottom: 0; }
.industry .industry-cta { text-align: right; }
@media (max-width: 760px) { .industry-inner { grid-template-columns: 1fr; gap: 22px; } .industry .industry-cta { text-align: left; } }

/* INSIGHTS / LinkedIn feed page */
.feed { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }
.post-card { border: 1px solid var(--grey-100); border-radius: 10px; padding: 22px 24px; background: var(--white); transition: all 0.18s; display: block; color: inherit; }
.post-card:hover { border-color: var(--navy); box-shadow: 0 8px 24px rgba(10,37,64,0.07); }
.post-card .meta { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey-500); font-weight: 600; margin-bottom: 8px; display: flex; gap: 10px; align-items: center; }
.post-card .meta .tag { color: var(--accent); }
.post-card h3 { font-size: 1.08rem; margin-bottom: 6px; }
.post-card p { font-size: 0.95rem; margin: 0; }
.post-card .more { display: inline-block; margin-top: 12px; font-size: 0.85rem; color: var(--accent); font-weight: 600; }

/* FULL PUBLICATION RECORD — publications.html */
.prose-wide { max-width: 900px; margin: 0 auto; }
.pub-group { font-size: 1.05rem; margin-top: 44px; padding-bottom: 12px; border-bottom: 2px solid var(--grey-100); display: flex; align-items: baseline; gap: 10px; }
.pub-count { font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; color: var(--grey-500); background: var(--grey-50); border: 1px solid var(--grey-100); border-radius: 999px; padding: 3px 9px; }
.pub-groupnote { font-size: 0.88rem; color: var(--grey-500); margin: 10px 0 0; }
.pub-full { list-style: none; margin: 4px 0 0; }
.pub-item { border-top: 1px solid var(--grey-100); padding: 22px 0; }
.pub-item:first-child { border-top: none; }
.pub-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 7px; }
.pub-year { font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif; font-size: 0.95rem; font-weight: 600; color: var(--accent-deep); }
.pub-journal { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-500); }
.pub-tag { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-600); background: var(--grey-50); border: 1px solid var(--grey-100); border-radius: 999px; padding: 2px 8px; }
.pub-tag.oa { color: #2b764b; border-color: rgba(46,125,82,.28); background: rgba(46,125,82,.07); }
.pub-title { font-size: 1.02rem; color: var(--navy); font-weight: 600; line-height: 1.4; margin-bottom: 5px; }
.pub-authors { font-size: 0.86rem; color: var(--grey-600); margin-bottom: 8px !important; }
.pub-authors strong { color: var(--navy); font-weight: 700; }
.pub-abstract { margin: 8px 0 10px; border-left: 2px solid var(--grey-100); padding-left: 14px; }
.pub-abstract summary { cursor: pointer; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-deep); list-style-position: outside; }
.pub-abstract summary:hover { color: var(--navy); }
.pub-abstract[open] summary { margin-bottom: 8px; }
.ab-body p { font-size: 0.9rem; line-height: 1.62; color: var(--grey-600); margin-bottom: 9px; }
.ab-body p:last-child { margin-bottom: 0; }
.ab-lab { display: block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--grey-500); margin-bottom: 2px; }
.pub-noabs { font-size: 0.85rem; color: var(--grey-500); font-style: italic; margin: 6px 0 8px !important; }
.pub-links { display: flex; gap: 16px; margin: 0 !important; }
.pub-links a { font-size: 0.8rem; font-weight: 600; color: var(--accent-deep); white-space: nowrap; }
.pub-source { font-size: 0.84rem; color: var(--grey-500); margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--grey-100); }
.pub-source code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: var(--grey-50); padding: 1px 5px; border-radius: 4px; }
@media (max-width: 560px) { .pub-head { gap: 6px; } .pub-links { flex-wrap: wrap; gap: 12px; } }

/* PRESENTATIONS — themed blurb entries (WO-8) */
.talk-theme { margin-top: 40px; }
.talk-theme > h3 { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); padding-bottom: 12px; border-bottom: 2px solid var(--grey-100); margin-bottom: 0; }
.talk-list { list-style: none; margin: 4px 0 0; }
.talk-entry { border-top: 1px solid var(--grey-100); padding: 30px 0; }
.talk-entry:first-child { border-top: none; padding-top: 12px; }
.talk-entry h4 { font-size: 1.14rem; color: var(--navy); margin-bottom: 5px; line-height: 1.38; }
.talk-entry .t-gloss { font-size: 0.85rem; color: var(--grey-500); font-style: italic; margin: 0 0 6px; }
.talk-entry .venue { display: block; font-size: 0.81rem; color: var(--grey-500); margin: 0 0 14px; }
.talk-entry .venue::before { content: ""; display: inline-block; width: 14px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: 9px; }
.talk-entry p { font-size: 0.97rem; margin-bottom: 0; }
.talk-quote { margin: 18px 0 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif; font-size: 1.04rem; line-height: 1.52; color: var(--navy); }
.talk-quote .attrib { display: block; margin-top: 9px; font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey-500); font-weight: 600; font-style: normal; }

/* TALKS / academic page */
.talks { list-style: none; margin: 8px 0 0; }
.talks li { border-top: 1px solid var(--grey-100); padding: 18px 0; display: grid; grid-template-columns: 88px 1fr auto; gap: 18px; align-items: start; }
.talks li:first-child { border-top: none; }
.talks .yr { font-family: 'Source Serif 4', 'Source Serif 4 Fallback', serif; font-size: 1.05rem; color: var(--accent); font-weight: 600; }
.talks .t-title { font-size: 1rem; color: var(--navy); font-weight: 600; }
.talks .t-meta { font-size: 0.88rem; color: var(--grey-500); margin-top: 3px; }
.talks .t-link a { font-size: 0.82rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
@media (max-width: 560px) { .talks li { grid-template-columns: 1fr; gap: 4px; } }

/* RESPONSIVE */
@media (max-width: 900px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 0.85rem; }
  .hero-grid, .lt-grid, .about-grid { grid-template-columns: 1fr; gap: 34px; }
  .proj-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 56px 0; }
  .hero { padding: 54px 0; }
  .content-grid { grid-template-columns: 1fr; gap: 36px; }
  .side { position: static; }
  .cards { grid-template-columns: 1fr; }
  .award-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
}
@media (max-width: 560px) {
  .nav-links a:not(.nav-cta) { display: none; }
}

/* ============================================================
   V2 PREVIEW — human networks visual system
   Isolated preview only. The source site stylesheet is unchanged.
   ============================================================ */

body {
  background: #fbfcfc;
  background-image:
    radial-gradient(circle at 8% 6%, rgba(2,149,162,.045), transparent 28rem),
    radial-gradient(circle at 92% 20%, rgba(182,95,72,.035), transparent 25rem);
}

::selection { background: var(--accent-soft); color: var(--navy); }
a, .btn, summary { transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid rgba(2,149,162,.38); outline-offset: 4px; border-radius: 6px; }

.container { padding-left: clamp(20px, 4vw, 42px); padding-right: clamp(20px, 4vw, 42px); }
.section { padding: clamp(68px, 8vw, 108px) 0; }
h1, h2, h3, h4 { text-wrap: balance; }
h1 { letter-spacing: -.035em; }
p { text-wrap: pretty; }

.draft-banner {
  background: linear-gradient(90deg, #e5f4f4, #f7eee9);
  color: #315560;
  border-bottom-color: rgba(2,149,162,.18);
  font-size: .75rem;
  letter-spacing: .025em;
}
.draft-banner strong { color: var(--navy); }

nav.topbar {
  background: rgba(255,255,255,.94);
  border-bottom-color: rgba(10,37,64,.08);
  box-shadow: 0 8px 30px rgba(10,37,64,.035);
  backdrop-filter: blur(18px);
}
.nav-inner { min-height: 74px; padding-top: 14px; padding-bottom: 14px; }
.brand img { height: 38px; }
.nav-links { gap: clamp(14px, 1.8vw, 28px); }
.nav-links a { position: relative; color: #3f5565; font-size: .89rem; }
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px;
  background: var(--accent); transition: right .18s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-cta { background: var(--accent); padding: 10px 18px; border-radius: 999px; box-shadow: 0 7px 18px rgba(2,149,162,.18); }
.nav-cta:hover { background: var(--accent-deep); transform: translateY(-1px); }

.nav-mobile { display: none; position: relative; }
.mobile-panel[hidden] { display: none; }
.mobile-panel {
  position: absolute; right: 0; top: calc(100% + 12px); width: min(82vw, 320px); padding: 14px;
  border: 1px solid rgba(10,37,64,.1); border-radius: 16px; background: #fff;
  box-shadow: 0 22px 60px rgba(10,37,64,.17); display: grid; gap: 4px;
}
.mobile-panel a { padding: 11px 13px; border-radius: 10px; color: #3f5565; font-size: .92rem; font-weight: 600; }
.mobile-panel a:hover, .mobile-panel a.active { color: var(--navy); background: var(--accent-soft); }
.mobile-panel .nav-cta { color: #fff; text-align: center; margin-top: 5px; }

.lang-switch { top: 96px; right: 14px; border-color: rgba(10,37,64,.12); box-shadow: 0 8px 30px rgba(10,37,64,.1); }
.lang-switch a.active { background: var(--accent); }

.hero {
  padding: clamp(72px, 9vw, 116px) 0 clamp(68px, 7vw, 94px);
  background:
    linear-gradient(120deg, rgba(255,255,255,.98), rgba(245,250,249,.92)),
    radial-gradient(circle at 85% 20%, rgba(2,149,162,.14), transparent 32rem);
}
.hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: clamp(42px, 7vw, 92px); }
.hero-tag { color: var(--accent-deep); background: var(--accent-soft); border-radius: 999px; padding: 7px 12px; letter-spacing: .12em; }
.hero h1 { font-size: clamp(2.75rem, 5.7vw, 5.25rem); max-width: 790px; }
.hero .lede { max-width: 690px; font-size: clamp(1.05rem, 1.45vw, 1.25rem); line-height: 1.65; }
.btn { border-radius: 999px; padding: 13px 22px; font-weight: 650; }
.btn-primary { background: var(--accent); box-shadow: 0 10px 24px rgba(2,149,162,.2); }
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-2px); }
.btn-ghost { border-color: rgba(10,37,64,.2); background: rgba(255,255,255,.65); }

.hero-visual { position: relative; min-height: 470px; }
.hero-photo {
  position: absolute; inset: 0 0 44px 54px; width: calc(100% - 54px); height: calc(100% - 44px);
  border-radius: 26px; object-fit: cover; object-position: 55% 50%; box-shadow: 0 30px 75px rgba(10,37,64,.2);
}
.hero-network-card {
  position: absolute; left: 0; bottom: 0; width: min(75%, 360px); background: rgba(255,255,255,.96);
  border: 1px solid rgba(10,37,64,.08); border-radius: 18px; padding: 20px;
  box-shadow: 0 20px 60px rgba(10,37,64,.17); backdrop-filter: blur(12px);
}
.hero-network-card img { width: 100%; height: auto; display: block; }
.hero-network-card p { margin: 10px 0 0; font-size: .8rem; color: #536b78; }

.proof-ribbon { background: var(--navy); color: #fff; padding: 0; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-item { padding: 27px clamp(16px, 3vw, 34px); border-right: 1px solid rgba(255,255,255,.1); }
.proof-item:last-child { border-right: 0; }
.proof-item strong { display: block; color: #fff; font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif; font-size: clamp(1.35rem, 2.2vw, 2rem); }
.proof-item span { color: rgba(255,255,255,.66); font-size: .77rem; text-transform: uppercase; letter-spacing: .075em; }

.section-kicker { color: var(--accent-deep); font-size: .76rem; font-weight: 750; text-transform: uppercase; letter-spacing: .14em; }
.section-intro { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(28px, 7vw, 90px); margin-bottom: 46px; align-items: end; }
.section-intro h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); }
.section-intro p { margin: 0; font-size: 1.05rem; }

.pathway-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.pathway-card {
  position: relative; overflow: hidden; min-height: 330px; padding: clamp(28px, 4vw, 46px); border-radius: var(--radius-lg);
  border: 1px solid rgba(10,37,64,.08); background: #fff; box-shadow: 0 16px 50px rgba(10,37,64,.07);
}
.pathway-card::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; right: -90px; bottom: -110px; background: var(--accent-soft); }
.pathway-card.clay::after { background: var(--clay-soft); }
.pathway-card .pathway-num { font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif; color: var(--accent); font-size: 3.2rem; line-height: 1; }
.pathway-card.clay .pathway-num { color: var(--clay); }
.pathway-card h3 { font-size: clamp(1.6rem, 2.5vw, 2.25rem); margin: 18px 0 12px; }
.pathway-card p { max-width: 520px; }
.pathway-card .btn { margin-top: 12px; position: relative; z-index: 1; }

.network-proof { background: var(--paper); }
.network-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 7vw, 82px); align-items: center; }
.network-proof-visual { padding: 26px; border-radius: 24px; background: #fff; border: 1px solid rgba(10,37,64,.08); box-shadow: 0 20px 60px rgba(10,37,64,.08); }
.network-proof-visual img { width: 100%; display: block; }
.network-statline { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 26px 0; }
.network-statline div { padding: 14px; background: #fff; border-left: 3px solid var(--accent); }
.network-statline strong { display: block; color: var(--navy); font-family: 'Source Serif 4', 'Source Serif 4 Fallback', serif; font-size: 1.45rem; }
.network-statline span { font-size: .73rem; color: var(--grey-500); text-transform: uppercase; }

.human-band { background: var(--navy); color: #fff; }
.human-grid { display: grid; grid-template-columns: .95fr 1.05fr; min-height: 560px; }
.human-grid img { width: 100%; height: 100%; object-fit: cover; }
.human-copy { padding: clamp(44px, 7vw, 92px); align-self: center; }
.human-copy h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.4rem); }
.human-copy p { color: rgba(255,255,255,.72); max-width: 600px; }
.human-copy .section-kicker { color: #79d4d9; }

.page-hero {
  position: relative; overflow: hidden; padding: clamp(58px, 7vw, 88px) 0 clamp(50px, 6vw, 76px);
  background: linear-gradient(120deg, #f4f9f8, #fff 62%, #f9f1ed);
}
.page-hero::after {
  content: ""; position: absolute; width: 320px; height: 320px; right: 5vw; top: -190px; border: 1px solid rgba(2,149,162,.2); border-radius: 50%; box-shadow: 0 0 0 50px rgba(2,149,162,.04), 0 0 0 100px rgba(2,149,162,.025);
}
.page-hero .kicker { color: var(--accent-deep); }
.page-hero h1 { font-size: clamp(2.3rem, 5vw, 4.35rem); max-width: 900px; }
.pill { border-color: rgba(2,149,162,.25); background: rgba(255,255,255,.8); }
.pill.building::before { background: var(--clay); }
.breadcrumb { color: #607581; }

.content { padding: clamp(62px, 8vw, 100px) 0; }
.content-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(44px, 7vw, 86px); }
.prose h2 { margin-top: 48px; position: relative; }
.prose h2:first-of-type { margin-top: 16px; }
.prose h2::before { content: ""; display: block; width: 42px; height: 3px; background: var(--accent); margin-bottom: 16px; border-radius: 99px; }
.prose .lead { font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif; font-size: clamp(1.24rem, 2vw, 1.55rem); line-height: 1.55; color: var(--navy); }
.side-card { border-color: rgba(10,37,64,.08); background: #f7faf9; border-radius: 16px; box-shadow: 0 12px 35px rgba(10,37,64,.045); }
.cards { gap: 20px; }
.cards .card { border-color: rgba(10,37,64,.08); border-radius: 16px; padding: 26px; box-shadow: 0 10px 30px rgba(10,37,64,.035); }
.figure img, .figure svg { border-radius: 18px; border-color: rgba(10,37,64,.08); padding: 8px; }
.wip { border-color: rgba(182,95,72,.24); background: var(--clay-soft); color: #6a463c; border-radius: 12px; }
.cta-strip { background: linear-gradient(120deg, var(--accent-soft), #fff 55%, var(--clay-soft)); padding: 64px 0; }
.cta-strip h3 { font-size: clamp(1.65rem, 3vw, 2.3rem); }

.award { background: var(--paper); }
.award-photo { width: 230px; height: 230px; border-radius: 22px; }
.about-portrait { border-radius: 22px; }
.portrait-photo { width: 150px; height: 150px; box-shadow: 0 12px 35px rgba(10,37,64,.18); }
.proj-card { border-radius: 18px; padding: 30px; }
.proj-card h4, h4, .pubs .area, .post-card .meta .tag { color: var(--accent-deep); }
.proj-card:hover, .post-card:hover { border-color: var(--accent); }
.proj-card .status .arrow, .pubs .doi, .post-card .more { color: var(--accent-deep); }
.talk-entry .venue::before, .talk-quote { border-color: var(--accent-deep); }
.talk-entry .venue::before { background: var(--accent-deep); }
.talk-theme > h3 { color: var(--accent-deep); }
.pub-year, .pub-links a, .pub-abstract summary { color: var(--accent-deep); }
.talk-entry h4 { color: var(--navy); }

.lt { background: linear-gradient(135deg, var(--navy-deep), var(--navy) 62%, #073f50); }
.lt::before { background: radial-gradient(circle at 60% 50%, rgba(2,149,162,.28), transparent 60%); }
.lt h4, .lt-vis .k { color: #78d7dc; }
.contact .btn-primary { background: var(--accent); }
.contact .btn-primary:hover { background: #fff; }
footer { background: #061b2a; padding-top: 58px; }

.photo-wide { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; box-shadow: 0 18px 55px rgba(10,37,64,.14); }
.visual-note { font-size: .78rem; color: var(--grey-500); margin-top: 10px; }
.cycle-legend { list-style: none !important; margin: 16px 0 34px !important; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cycle-legend li { margin: 0 !important; padding: 12px 9px !important; border-top: 2px solid var(--accent); background: var(--accent-soft); text-align: center; border-radius: 8px; font-size: .78rem !important; color: var(--navy) !important; }
.cycle-legend li:last-child { border-color: var(--clay); background: var(--clay-soft); }
.contact-routes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin: 28px 0; }
.contact-route { padding: 30px; border: 1px solid rgba(10,37,64,.08); border-radius: 18px; background: #fff; box-shadow: 0 14px 40px rgba(10,37,64,.055); }
.contact-route .route-label { display: inline-block; margin-bottom: 14px; color: var(--accent-deep); font-size: .74rem; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; }
.contact-route h3 { font-size: 1.4rem; }
.contact-route.clay .route-label { color: var(--clay); }
.feature-visual { margin: 34px 0 44px; padding: 22px; border-radius: 22px; background: var(--paper); border: 1px solid rgba(10,37,64,.07); }
.feature-visual img { width: 100%; display: block; border-radius: 14px; }
.near-list { min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); }
.near-list h3, .near-row, .near-row .nr-name { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

@media (max-width: 980px) {
  .nav-desktop { display: none; }
  .nav-inner { flex-wrap: wrap; }
  .nav-mobile { display: block; width: 100%; }
  .mobile-panel, .mobile-panel[hidden] {
    position: static; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    margin-top: 10px; padding: 10px 0 0; border: 0; border-top: 1px solid rgba(10,37,64,.08);
    border-radius: 0; box-shadow: none; background: transparent;
  }
  .mobile-panel a { padding: 9px 10px; text-align: center; }
  .mobile-panel .nav-cta { margin-top: 0; }
  .hero-grid, .network-proof-grid, .human-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 440px; max-width: 680px; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-item:nth-child(2) { border-right: 0; }
  .proof-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); }
  .section-intro { grid-template-columns: 1fr; gap: 16px; }
  .human-grid img { max-height: 560px; }
  .content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav-inner { min-height: 66px; }
  .mobile-panel, .mobile-panel[hidden] { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .brand img { height: 31px; }
  .lang-switch { top: 84px; }
  .hero h1 { font-size: clamp(2.55rem, 13vw, 3.8rem); }
  .hero-visual { min-height: 365px; }
  .hero-photo { inset: 0 0 42px 30px; width: calc(100% - 30px); height: calc(100% - 42px); }
  .hero-network-card { width: 82%; padding: 14px; }
  .pathway-grid { grid-template-columns: 1fr; }
  .pathway-card { min-height: 0; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .proof-item { padding: 21px 16px; }
  .proof-item strong { font-size: 1.3rem; }
  .network-statline { grid-template-columns: 1fr; }
  .human-copy { padding: 44px 24px 54px; }
  .cycle-legend { grid-template-columns: 1fr 1fr; }
  .contact-routes { grid-template-columns: 1fr; }
  .near-row { flex-wrap: wrap; }
  .near-row .nr-status { margin-left: auto; }
  .near-row .nr-dist { display: none; }
  .page-hero::after { right: -180px; }
  .foot-grid { grid-template-columns: 1fr; }
  .nav-links a:not(.nav-cta) { display: initial; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   COLLABORATE (homepage hook · page · per-project blocks)
   ============================================================ */

/* Homepage hook strip */
.collab-hook { background: linear-gradient(100deg, var(--accent-soft) 0%, #ffffff 62%); border-top: 3px solid var(--accent); border-bottom: 1px solid var(--grey-100); padding: 32px 0; }
.collab-hook-grid { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.collab-hook-title { font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif; color: var(--navy); font-size: 1.28rem; font-weight: 600; line-height: 1.3; margin-bottom: 5px; }
.collab-hook-sub { color: var(--grey-600); font-size: .98rem; margin-bottom: 0; max-width: 700px; }
.collab-hook .btn { flex-shrink: 0; }

/* Collaborate page — doors and asks */
.collab-door { margin-bottom: 64px; }
.collab-door:last-of-type { margin-bottom: 40px; }
.door-head { display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--grey-100); padding-bottom: 14px; margin-bottom: 30px; }
.door-num { font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif; font-size: .95rem; font-weight: 600; color: var(--accent-deep); text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; }
.door-head h2 { margin-bottom: 0; }
.ask-card { border: 1px solid var(--grey-100); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--grey-50); padding: 34px 38px; margin-bottom: 26px; }
.collab-door.clay .ask-card { border-left-color: var(--clay); }
.ask-card h3 { font-size: 1.35rem; margin-bottom: 14px; }
.ask-index { display: block; font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--grey-500); margin-bottom: 8px; }
.ask-question { font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif; font-style: italic; font-size: 1.28rem; color: var(--navy); line-height: 1.35; border-top: 1px solid var(--grey-100); padding-top: 18px; margin: 22px 0 20px; }
.ask-question .q-label { display: block; font-family: 'Inter', 'Inter Fallback', sans-serif; font-style: normal; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-deep); margin-bottom: 6px; }
.ask-note { font-size: .88rem; color: var(--grey-500); margin-bottom: 1rem; }
.collab-notes { border-top: 1px solid var(--grey-100); padding-top: 26px; }
.collab-notes p { font-size: .88rem; color: var(--grey-500); max-width: 760px; }

/* Per-project "What this needs now" block (pre-footer) */
.needs-now { padding: 0 0 84px; }
.needs-now-card { border: 1px solid rgba(2,149,162,.25); border-top: 4px solid var(--accent); border-radius: var(--radius-lg); background: linear-gradient(165deg, #ffffff 55%, var(--accent-soft) 140%); padding: 44px 48px; box-shadow: 0 14px 40px rgba(10,37,64,.06); }
.needs-now-head { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.needs-now-stage { font-size: .78rem; font-weight: 600; color: var(--grey-500); text-transform: uppercase; letter-spacing: .06em; }
.needs-now-question { font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif; font-style: italic; font-size: clamp(1.35rem, 2.6vw, 1.8rem); color: var(--navy); font-weight: 600; line-height: 1.3; margin-bottom: 12px; }
.needs-now-ask { max-width: 680px; margin-bottom: 24px; }

@media (max-width: 760px) {
  .ask-card { padding: 26px 22px; }
  .needs-now-card { padding: 30px 24px; }
  .door-head { flex-direction: column; gap: 4px; }
}

/* ── Photographic bands (EUROSTROKES_DesignGraphicsSpec_v2.0 §2) ────────── */
.photo-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.photo-band img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(10,37,64,.55), rgba(10,37,64,.15));
}
/* .scrim-left is the base gradient, named explicitly so the markup states its intent. */
.photo-band.scrim-left::after  { background: linear-gradient(to right,  rgba(10,37,64,.55), rgba(10,37,64,.15)); }
.photo-band.scrim-right::after { background: linear-gradient(to left,  rgba(10,37,64,.55), rgba(10,37,64,.15)); }
.photo-band.scrim-top::after   { background: linear-gradient(to bottom, rgba(10,37,64,.55), rgba(10,37,64,.10)); }
.photo-band.scrim-bottom::after{ background: linear-gradient(to top,   rgba(10,37,64,.55), rgba(10,37,64,.10)); }
.photo-band .band-copy { position: relative; z-index: 1; }

.photo-wash { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.photo-wash img { display: block; width: 100%; height: auto; }
.photo-wash::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(10,37,64,.28); mix-blend-mode: multiply;
}

.photo-divider { margin: 0; }
.photo-divider .photo-wash { height: clamp(180px, 22vw, 280px); }
.photo-divider .photo-wash img { height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: no-preference) { /* no animation used; hook kept intentionally empty */ }
@media (max-width: 760px) { .photo-divider .photo-wash { height: 150px; } }

/* Placement wrappers — layout only, no new colour or token.
   §2 gives the treatment; these give the slots somewhere to sit. */

/* Page-title band: between a page hero and the page content. Held inside the
   container so the radius above reads as designed and the band stays narrower
   than the headline it follows. */
.photo-strip { padding: clamp(26px, 4vw, 40px) 0 0; }
.photo-strip .photo-band { height: clamp(150px, 20vw, 280px); }

/* Section divider band, held to the same measure as everything else on the page. */
.photo-divider { padding: clamp(26px, 4vw, 44px) 0; }

/* Portrait card set beside an existing diagram. The diagram keeps the row lead;
   the photograph is the narrower column and never exceeds 420px. */
.figure-with-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 290px); gap: clamp(18px, 3vw, 32px); align-items: start; margin: 26px 0; }
.figure-with-photo .figure { margin: 0; }
.figure-with-photo .photo-portrait { max-width: 420px; }
@media (max-width: 900px) {
  .figure-with-photo { grid-template-columns: 1fr; gap: 22px; }
  .figure-with-photo .photo-portrait { max-width: 340px; margin: 0 auto; }
}

/* The §6.3 escalation (a heavier scrim for a band that still pulls the eye at
   1440px) lived here until the research master was regenerated and no slot
   needed it. Kept out as dead code; the four rules are recorded in the build
   playbook entry for 2026-08-11 if a future asset ever calls for them. */

/* A band must not butt against the dark blocks it can sit next to. */
.photo-strip + .proof-ribbon { margin-top: clamp(26px, 4vw, 40px); }
.photo-strip + footer { margin-top: clamp(30px, 5vw, 56px); }

/* Images now carry intrinsic width/height attributes so they reserve their box
   before load (CLS). Where CSS sizes one axis only, the other must stay auto,
   or the attribute width would be used verbatim. */
.foot-brand img { width: auto; }