:root {
  color-scheme: light;
  --ink: #17212a;
  --ink-soft: #46545e;
  --paper: #fffdf9;
  --ivory: #f4f0e8;
  --blush: #f8eeee;
  --line: #d9d3ca;
  --carmine: #922f35;
  --carmine-dark: #702228;
  --teal: #216b68;
  --ochre: #b77b2d;
  --focus: #075fcc;
  --white: #ffffff;
  --shadow: 0 18px 50px rgb(45 41 35 / 10%);
  --step--1: clamp(.78rem, .75rem + .12vw, .88rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1: clamp(1.2rem, 1.08rem + .55vw, 1.55rem);
  --step-2: clamp(1.55rem, 1.28rem + 1.2vw, 2.4rem);
  --step-3: clamp(2.15rem, 1.6rem + 2.5vw, 4rem);
  --step-4: clamp(2.8rem, 1.75rem + 4.4vw, 6.3rem);
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: clamp(2.5rem, 6vw, 5rem);
  --space-7: clamp(4rem, 10vw, 9rem);
  --radius: .35rem;
  --content: 90rem;
  /* Compensates for the asymmetric transparent canvas in dbm-brand-mark.png. */
  --brand-mark-optical-offset: 13.25%;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { background: var(--ivory); scroll-behavior: smooth; scroll-padding-top: 9rem; }
body { margin: 0; color: var(--ink); background-color: var(--paper); background-image: url('dbm-fibre-pattern.svg'); background-position: center; background-size: 28rem 21rem; font-size: var(--step-0); line-height: 1.65; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: .08em; }
a:hover { color: var(--carmine-dark); }
h1, h2, h3, h4, p { text-wrap: pretty; }
h1, h2, h3, h4 { margin-top: 0; line-height: 1.05; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.035em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { max-width: 68ch; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; padding: .75rem 1rem; border-radius: var(--radius); background: var(--ink); color: var(--white); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.eyebrow, .chapter-number, .scale-label, .section-index, .placeholder-label { margin: 0 0 var(--space-2); color: var(--carmine); font-size: var(--step--1); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; gap: .65rem; min-height: 3.25rem; padding: .8rem 1.15rem; border: 2px solid var(--carmine); border-radius: var(--radius); background: var(--carmine); color: var(--white); font-weight: 800; line-height: 1.25; text-decoration: none; }
.button:hover { border-color: var(--carmine-dark); background: var(--carmine-dark); color: var(--white); }

/* Shared Option 1 identity and active-language-only navigation */
.site-header { position: relative; z-index: 50; border-top: 4px solid var(--carmine); border-bottom: 1px solid var(--line); background: rgb(255 253 249 / 96%); }
.header-inner { width: min(100% - 2rem, var(--content)); margin-inline: auto; padding: .75rem 0; }
.identity { display: grid; grid-template-columns: 4.75rem minmax(0, 20rem); gap: .7rem; align-items: center; color: var(--ink); text-decoration: none; }
.identity:hover { color: var(--ink); }
.identity-symbol { width: 4.75rem; aspect-ratio: 1; object-fit: contain; }
.identity-copy { min-width: 0; padding-left: .7rem; border-left: 1px solid var(--line); }
.identity-abbr { display: block; font-size: 1.5rem; font-weight: 850; letter-spacing: -.045em; line-height: 1; }
.identity-name { display: block; margin-top: .18rem; font-size: .76rem; font-weight: 750; line-height: 1.18; }
.site-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem .5rem; margin-top: .6rem; padding: .55rem 0 .1rem; border-top: 1px solid var(--line); }
.site-nav a { min-width: 0; padding: .45rem .1rem; overflow-wrap: normal; word-break: normal; hyphens: none; font-size: .76rem; font-weight: 750; line-height: 1.15; text-align: center; text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--carmine); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .5rem; }

/* Narrative landing */
.template-landing { background: radial-gradient(circle at 88% 2%, rgb(146 47 53 / 8%), transparent 28rem), var(--ivory); }
.hero { display: grid; min-height: calc(100svh - 9rem); width: min(100% - 2rem, var(--content)); margin-inline: auto; padding: var(--space-6) 0; align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { max-width: 13ch; margin-bottom: var(--space-4); }
.hero-guardrail { max-width: 54rem; color: var(--ink-soft); font-size: var(--step-1); }
.privacy-note { color: var(--ink-soft); font-size: var(--step--1); }
.hero-mark { position: relative; width: min(70vw, 28rem); aspect-ratio: 1; margin: var(--space-5) auto 0; border-radius: 50%; background: rgb(255 253 249 / 64%); }
.hero-mark img { position: absolute; z-index: 2; inset: 15%; width: 70%; }
.orbit { position: absolute; border: 1px solid var(--line); border-radius: 50%; }
.orbit-a { inset: 3%; }
.orbit-b { inset: 25%; border-color: rgb(33 107 104 / 55%); }
.story-intro { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; padding: 1rem; border-block: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); font-size: var(--step--1); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.story { display: grid; width: min(100% - 2rem, var(--content)); margin-inline: auto; padding: var(--space-7) 0; }
.scale-rail { padding: 0 0 var(--space-6); }
.scale-word { font-family: Georgia, "Times New Roman", serif; font-size: var(--step-2); line-height: 1.15; }
.scale-meter { width: 100%; height: 3px; overflow: hidden; background: var(--line); }
.scale-meter span { display: block; width: 62%; height: 100%; background: linear-gradient(90deg, var(--carmine), var(--ochre), var(--teal)); }
.chapters { display: grid; gap: var(--space-7); }
.chapter { display: grid; gap: var(--space-5); min-height: 42rem; align-content: center; padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.chapter h2 { max-width: 13ch; margin-bottom: var(--space-4); }
.chapter-copy > p:last-child { color: var(--ink-soft); font-size: var(--step-1); }
.chapter-visual { position: relative; min-height: 19rem; overflow: hidden; border: 1px solid var(--line); border-radius: 50% 50% 45% 55% / 56% 42% 58% 44%; background: var(--blush); box-shadow: var(--shadow); }
.chapter-visual span, .chapter-visual i { position: absolute; display: block; }
.visual-asset { margin: 0; border-radius: var(--radius); background: var(--ivory); }
.visual-asset picture, .visual-asset picture img { display: block; width: 100%; height: 100%; }
.visual-asset picture img { object-fit: cover; }
.visual-asset .asset-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.chapter { transition: opacity .7s ease, transform .7s ease; }
.js .chapter:not(.is-visible) { opacity: .28; transform: translateY(2.5rem); }
.js .chapter.is-visible { opacity: 1; transform: none; }
.identity-logo { display: block; width: clamp(5.5rem, 9vw, 8rem); height: auto; }
.identity { display: flex; gap: 1rem; align-items: center; }
.identity-name { max-width: 20rem; }
.language-link { border: 1px solid var(--line); border-radius: 999px; padding-inline: .7rem !important; }
.visual-organism .field { inset: 12% 23%; border: 2px solid var(--teal); border-radius: 48%; }
.node { width: 3rem; aspect-ratio: 1; border-radius: 50%; background: var(--carmine); }
.node-a { top: 25%; left: 27%; }.node-b { right: 29%; bottom: 24%; opacity: .32; }
.visual-tissue { background: radial-gradient(circle at 72% 40%, rgb(183 123 45 / 35%) 0 8%, transparent 8.5%), var(--ivory); }
.visual-tissue .field { inset: 17%; border: 2px solid var(--teal); border-radius: 45% 55% 47% 53%; }
.signal { width: .7rem; aspect-ratio: 1; border-radius: 50%; background: var(--carmine); }
.signal-a { top: 35%; left: 27%; box-shadow: 2.1rem 1.1rem 0 var(--carmine), 4.2rem 2.2rem 0 var(--carmine); }.signal-b { right: 31%; bottom: 30%; }
.local-zone { right: 16%; top: 18%; width: 27%; aspect-ratio: 1; border: 2px dashed var(--ochre); border-radius: 50%; }
.visual-route .route { inset: 52% 12% auto; height: 2px; background: var(--teal); transform: rotate(-12deg); }
.cell { width: 2rem; aspect-ratio: 1; border: 5px double var(--carmine); border-radius: 45% 55%; background: var(--paper); }
.visual-route .cell-a { left: 18%; top: 55%; }.visual-route .cell-b { left: 47%; top: 43%; }.visual-route .cell-c { right: 17%; top: 29%; opacity: .45; }
.visual-niche .organ { inset: 8%; border: 2px solid var(--ink-soft); border-radius: 50%; }.visual-niche .tissue { inset: 22%; border: 2px solid var(--teal); border-radius: 50%; }.visual-niche .niche { inset: 37%; border: 8px solid rgb(183 123 45 / 55%); border-radius: 50%; }.visual-niche .cell { inset: 47%; width: 6%; }
.visual-detect { background: linear-gradient(90deg, var(--blush) 0 49.7%, var(--line) 50%, var(--ivory) 50.3%); }
.visual-detect .before, .visual-detect .after { top: 20%; width: 20%; height: 60%; border: 2px solid var(--teal); border-radius: 48%; }.visual-detect .before { left: 15%; }.visual-detect .after { right: 15%; opacity: .45; }.visual-detect .rare-cell { right: 20%; bottom: 25%; width: .8rem; aspect-ratio: 1; border-radius: 50%; background: var(--carmine); }
.visual-dormant .niche-ring { inset: 18%; border: 10px solid rgb(33 107 104 / 25%); border-radius: 48%; }.visual-dormant .cell { inset: 42%; width: 16%; }.visual-dormant .pause { top: 1rem; right: 1.25rem; color: var(--carmine); font-weight: 900; letter-spacing: .25em; }
.visual-states { display: grid; grid-template-columns: 1fr auto 1fr; place-items: center; border-radius: var(--radius); }
.visual-states .state { position: relative; width: 7rem; aspect-ratio: 1; border: 2px solid var(--teal); border-radius: 50%; }.visual-states i { position: absolute; top: 40%; left: 40%; width: 20%; aspect-ratio: 1; border-radius: 50%; background: var(--carmine); }.visual-states .state-b i:nth-child(2) { transform: translate(100%, 90%); }.visual-states .state-b i:nth-child(3) { transform: translate(-90%, 100%); }.visual-states .arrow { position: static; color: var(--carmine); font-size: 2rem; }
.visual-lab { border-radius: var(--radius); background: var(--ink); }.visual-lab .bench { right: 12%; bottom: 20%; left: 12%; height: 2px; background: var(--paper); }.visual-lab .question { top: 12%; left: 18%; color: var(--paper); font-family: Georgia, serif; font-size: 8rem; line-height: 1; }.visual-lab .line { right: 17%; height: 2px; background: var(--ochre); }.visual-lab .line-a { top: 37%; width: 31%; }.visual-lab .line-b { top: 52%; width: 22%; }
.inline-links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: var(--space-4); font-weight: 750; }
.landing-directory { width: min(100% - 2rem, var(--content)); margin: 0 auto var(--space-7); }
.directory-grid { display: grid; border-top: 1px solid var(--line); }
.directory-grid a { display: grid; gap: .2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.directory-grid span { font-family: Georgia, serif; font-size: var(--step-2); }.directory-grid small { color: var(--ink-soft); }
.closing-cta { display: grid; gap: var(--space-5); align-items: center; padding: var(--space-6) max(1rem, calc((100vw - var(--content)) / 2)); background: var(--carmine-dark); color: var(--white); }
.closing-cta .eyebrow { color: #f2c9c9; }.closing-cta h2 { margin-bottom: 1rem; }.button-light { justify-self: start; border-color: var(--white); background: var(--white); color: var(--carmine-dark); }.button-light:hover { border-color: var(--ivory); background: var(--ivory); color: var(--carmine-dark); }

/* Formal template */
.template-formal main { width: min(100% - 2rem, var(--content)); margin-inline: auto; }
.page-intro { display: grid; padding: var(--space-7) 0 var(--space-6); }
.page-intro h1 { max-width: 13ch; margin-bottom: var(--space-4); }
.lede { color: var(--ink-soft); font-size: var(--step-1); }
.formal-lab-photo { position: relative; min-height: 18rem; margin: var(--space-5) 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ivory); }
.formal-lab-photo > img { display: block; width: 100%; height: 100%; min-height: 18rem; object-fit: cover; object-position: 62% 50%; }
.formal-lab-photo__logo { position: absolute; top: clamp(.85rem, 3vw, 1.5rem); left: clamp(.85rem, 3vw, 1.5rem); display: grid; place-items: center; box-sizing: border-box; width: clamp(5.5rem, 21%, 7.25rem); aspect-ratio: 1; border: 1px solid rgb(23 33 42 / 14%); border-radius: .35rem; background: rgb(255 255 255 / 82%); box-shadow: 0 .35rem 1.2rem rgb(23 33 42 / 16%); }
.formal-lab-photo__logo img { display: block; min-width: 0; min-height: 0; width: 85%; height: 85%; object-fit: contain; }
.formal-hero-art { position: relative; min-height: 18rem; overflow: hidden; margin-top: var(--space-5); border-radius: var(--radius); background: var(--ink); }
.formal-hero-art span { position: absolute; display: block; border: 1px solid var(--paper); border-radius: 50%; }.formal-hero-art span:nth-child(1) { inset: -20% 50% -30% -10%; }.formal-hero-art span:nth-child(2) { inset: 25% 15% -40% 40%; border-color: var(--ochre); }.formal-hero-art span:nth-child(3) { top: 18%; right: 20%; width: 2.5rem; aspect-ratio: 1; background: var(--carmine); border: 0; }
.formal-section { display: grid; gap: var(--space-5); padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.section-heading h2 { max-width: 13ch; margin-bottom: var(--space-3); }.section-heading > p:last-child { color: var(--ink-soft); }
.facts { display: grid; margin-top: var(--space-5); }.facts div { padding: 1rem 0; border-top: 1px solid var(--line); }.facts dt { color: var(--ink-soft); font-size: var(--step--1); font-weight: 750; text-transform: uppercase; }.facts dd { margin: .25rem 0 0; font-weight: 700; }
.editorial-grid { display: grid; gap: 1rem; }.editorial-card { display: flex; flex-direction: column; min-height: 24rem; padding: var(--space-4); border: 1px solid var(--line); background: var(--paper); }.editorial-card:nth-child(2) { background: var(--blush); }.editorial-card:nth-child(3) { background: var(--ivory); }.research-art { width: 100%; aspect-ratio: 32 / 21; margin: 0 0 var(--space-4); border: 1px solid rgb(23 33 42 / 8%); border-radius: calc(var(--radius) * .7); object-fit: cover; }.editorial-card a { margin-top: auto; font-weight: 750; }
.editorial-grid.four .editorial-card:nth-child(4) { background: #edf4f1; }
.publication-list a { display: grid; gap: .25rem; text-decoration: none; }
.people-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }.person-placeholder div { aspect-ratio: 4 / 5; margin-bottom: 1rem; background: radial-gradient(circle at 50% 35%, var(--paper) 0 12%, transparent 12.5%), radial-gradient(ellipse at 50% 100%, var(--teal) 0 38%, transparent 38.5%), var(--ivory); border: 1px solid var(--line); }.person-placeholder h3 { margin-bottom: .35rem; }.person-placeholder p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.publication-list { margin: 0; padding: 0; list-style: none; counter-reset: pub; }.publication-list li { display: grid; gap: .25rem; padding: 1.25rem 0 1.25rem 3rem; border-top: 1px solid var(--line); counter-increment: pub; }.publication-list li::before { grid-row: 1 / 3; margin-left: -3rem; color: var(--carmine); content: counter(pub, decimal-leading-zero); font-size: var(--step--1); font-weight: 800; }.publication-list span { font-family: Georgia, serif; font-size: var(--step-1); }.publication-list small { color: var(--ink-soft); }
.team-card, .project-card { padding: var(--space-4); border: 1px solid var(--line); background: var(--paper); }
.team-card:nth-child(2), .project-card:nth-child(2) { background: var(--blush); }.team-card:nth-child(3), .project-card:nth-child(3) { background: var(--ivory); }
.team-card h3, .project-card h3 { margin-bottom: .45rem; }.team-card p, .project-card p { margin: .5rem 0 0; }
.team-card .role, .project-card .meta, .project-card .status { color: var(--ink-soft); font-size: var(--step--1); }
.team-portrait { display: block; width: 100%; aspect-ratio: 4 / 3; margin-bottom: var(--space-4); object-fit: cover; object-position: 50% 28%; border: 1px solid var(--line); background: var(--ivory); }
.team-portrait--unavailable { display: grid; place-items: center; color: var(--teal); background: linear-gradient(145deg, var(--ivory), var(--paper)); font-family: Georgia, serif; font-size: clamp(2.5rem, 7vw, 4.5rem); }
.profile-trigger { color: inherit; font: inherit; }
.profile-trigger--portrait { padding: 0; cursor: pointer; }
.profile-trigger--portrait:hover { border-color: var(--carmine); color: var(--carmine-dark); }
.profile-trigger--name { padding: 0; border: 0; background: transparent; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; text-align: left; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .16em; cursor: pointer; }
.profile-trigger--name:hover { color: var(--carmine-dark); text-decoration-color: currentColor; }
.profile-trigger--label { margin-top: var(--space-4); padding: .25rem 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--carmine-dark); font-size: var(--step--1); font-weight: 800; cursor: pointer; }
.profile-dialog { width: min(calc(100% - 2rem), 48rem); max-height: min(calc(100dvh - 2rem), 50rem); padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: 0 24px 80px rgb(23 33 42 / 32%); }
.profile-dialog::backdrop { background: rgb(23 33 42 / 66%); backdrop-filter: blur(2px); }
.profile-dialog__inner { position: relative; padding: clamp(1.5rem, 5vw, 3.5rem); }
.profile-dialog__close { position: sticky; z-index: 1; top: 0; float: right; display: grid; place-items: center; width: 2.75rem; aspect-ratio: 1; margin: 0 0 var(--space-3) var(--space-3); border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.profile-dialog__close:hover { border-color: var(--carmine); color: var(--carmine-dark); }
.profile-dialog h2 { max-width: 12ch; margin-bottom: var(--space-3); font-size: var(--step-3); }
.profile-dialog__role { max-width: 52ch; margin: 0 0 var(--space-5); color: var(--carmine-dark); font-size: var(--step--1); font-weight: 800; }
.profile-dialog__body { clear: both; }
.profile-dialog__body p { max-width: 68ch; }
.profile-dialog__body p + p { margin-top: var(--space-4); }
.project-grid { display: grid; gap: 1rem; }.project-card { display: flex; flex-direction: column; }.project-card .project-link { margin-top: var(--space-4); font-size: var(--step--1); font-weight: 750; }.project-card .status { margin-top: auto; padding-top: var(--space-3); font-weight: 750; }
.funding-list { margin: 0; padding-left: 1.2rem; }.funding-list li + li { margin-top: .8rem; }
.split-updates { grid-template-columns: 1fr; }.split-updates .section-heading { grid-column: 1 / -1; }.updates-column { padding: var(--space-5); background: var(--ivory); }.updates-column + .updates-column { background: var(--blush); }.updates-column article { padding: var(--space-4) 0; border-block: 1px solid var(--line); }.updates-column time { color: var(--ink-soft); font-size: var(--step--1); }.updates-column h4 { margin: .5rem 0; font-family: Georgia, serif; font-size: var(--step-1); }
.contact-form { display: grid; gap: var(--space-4); max-width: 48rem; margin-top: var(--space-5); }
.contact-form fieldset { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-4); border: 1px solid var(--line); background: var(--paper); }
.contact-form legend { padding: 0 .4rem; font-family: Georgia, "Times New Roman", serif; font-size: var(--step-1); }
.contact-form label { display: block; font-weight: 750; }
.contact-form input, .contact-form select, .contact-form textarea { display: block; width: 100%; min-height: 2.9rem; margin-top: .35rem; padding: .7rem .8rem; border: 1px solid var(--ink-soft); border-radius: var(--radius); background: var(--white); color: var(--ink); font: inherit; line-height: 1.4; }
.contact-form textarea { min-height: 10rem; resize: vertical; }
.contact-attachments { display: grid; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); background: var(--paper-warm); }
.contact-attachments[hidden] { display: none; }
.contact-attachments__hint { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.contact-form input[type="checkbox"] { width: 1.2rem; min-height: 1.2rem; margin-top: .2rem; accent-color: var(--carmine); }
.contact-form .contact-consent { grid-template-columns: auto 1fr; align-items: start; font-size: var(--step--1); font-weight: 600; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.contact-form__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact-form__note { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.contact-turnstile { min-height: 65px; }
.contact-form__status { margin: 0; padding: .8rem 1rem; border-left: 4px solid var(--teal); background: #edf4f1; font-weight: 700; }
.contact-form__status[hidden] { display: none; }
.contact-form__status[data-state="error"] { border-left-color: var(--carmine); background: var(--blush); }
.contact-form .button { justify-self: start; cursor: pointer; }
.contact-form .button:disabled { cursor: wait; opacity: .65; }
.contact-hero { display: grid; gap: var(--space-5); padding: var(--space-7) 0 var(--space-6); border-bottom: 1px solid var(--line); }
.contact-hero h1 { max-width: 12ch; margin-bottom: var(--space-4); }
.contact-availability { align-self: end; padding: var(--space-5); border-top: 5px solid var(--carmine); background: var(--ivory); }
.contact-availability h2 { max-width: 17ch; margin-bottom: var(--space-3); font-size: var(--step-2); }
.contact-availability p:last-child { margin-bottom: 0; color: var(--ink-soft); }
.contact-page-grid { display: grid; gap: var(--space-5); padding: var(--space-6) 0 var(--space-7); }
.contact-details { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-5); border-top: 5px solid var(--teal); background: var(--ivory); }
.contact-details > * { margin: 0; }
.contact-details h2 { max-width: 14ch; margin-bottom: 0; font-size: var(--step-2); }
.template-contact .contact-form { max-width: none; margin-top: 0; }
.image-disclosure { width: min(100% - 2rem, 70rem); margin: var(--space-7) auto; padding: var(--space-5); border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); }.template-formal .image-disclosure { width: 100%; }.image-disclosure h2 { font-size: var(--step-2); }.image-disclosure p:last-child { color: var(--ink-soft); }

.site-footer { padding: 2.2rem 1rem; border-top: 0; background: #121a20; color: var(--white); }
.footer-inner { width: min(100%, 92rem); margin: auto; display: flex; align-items: flex-start; flex-direction: column; justify-content: space-between; gap: 1.25rem; }
.site-footer a:hover { color: #f2c9c9; }
.footer-brand { display: flex; align-items: center; gap: 1.15rem; text-decoration: none; }
.footer-brand img { width: 5.175rem; filter: brightness(0) invert(1); }
.footer-brand span { max-width: 20.7rem; padding-left: 1.15rem; border-left: 1px solid #58636a; font-size: .943rem; font-weight: 760; line-height: 1.2; }
.footer-institution { display: flex; align-items: center; gap: 1.035rem; color: #cbd2d6; }
.footer-institution img { width: clamp(5.52rem, 8.05vw, 7.475rem); max-height: 4.37rem; filter: brightness(0) invert(1); }
.footer-inner p { margin: 0; color: #aeb8be; font-size: .943rem; }
.footer-inner .footer-note { width: 100%; max-width: 55rem; margin: .5rem 0 0; color: #c5cdd2; font-size: .625rem; line-height: 1.45; }

/* 360 px baseline */
@media (min-width: 360px) {
  .header-inner, .hero, .story, .landing-directory, .template-formal main { width: min(100% - 1.5rem, var(--content)); }
  .identity { grid-template-columns: 5rem minmax(0, 21rem); }.identity-symbol { width: 5rem; }
}

/* 390 px */
@media (min-width: 390px) {
  .identity-name { font-size: .8rem; }
  .chapter-visual { min-height: 21rem; }
}

/* 430 px */
@media (min-width: 430px) {
  .header-inner, .hero, .story, .landing-directory, .template-formal main { width: min(100% - 2rem, var(--content)); }
  .identity { grid-template-columns: 5.5rem minmax(0, 23rem); }.identity-symbol { width: 5.5rem; }.identity-abbr { font-size: 1.7rem; }.identity-name { font-size: .84rem; }
  .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.directory-grid a:nth-child(odd) { padding-right: 1rem; }.directory-grid a:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--line); }
}

/* 768 px */
@media (min-width: 768px) {
  .site-header { position: sticky; top: 0; }
  .header-inner { display: flex; justify-content: space-between; gap: 2rem; align-items: center; }
  .site-nav { display: flex; justify-content: flex-end; flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; border: 0; }
  .site-nav a { flex: 0 0 auto; overflow-wrap: normal; text-align: start; }
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr); gap: var(--space-5); }
  .hero-mark { width: 100%; margin: 0; }
  .story { grid-template-columns: minmax(12rem, .36fr) minmax(0, 1fr); gap: var(--space-6); }
  .scale-rail { position: sticky; top: 11rem; align-self: start; padding: 0; }
  .chapter { grid-template-columns: minmax(18rem, .85fr) minmax(0, 1.15fr); align-items: center; }
  .chapter:nth-child(even) .chapter-visual { order: 2; }.chapter-visual { min-height: 25rem; }
  .closing-cta { grid-template-columns: 1fr auto; }.button-light { justify-self: end; }
  .page-intro { grid-template-columns: minmax(0, 1fr) minmax(20rem, .7fr); column-gap: var(--space-6); }.page-intro > .eyebrow, .page-intro h1, .page-intro .lede { grid-column: 1; }.formal-hero-art, .formal-lab-photo { grid-column: 2; grid-row: 1 / 5; margin: 0; }
  .formal-section { grid-template-columns: minmax(14rem, .36fr) minmax(0, 1fr); }
  .editorial-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }.editorial-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }.people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.split-updates { grid-template-columns: minmax(14rem, .36fr) repeat(2, minmax(0, 1fr)); }
  .contact-hero { grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .72fr); column-gap: var(--space-6); align-items: end; }
  .contact-page-grid { grid-template-columns: minmax(16rem, .68fr) minmax(0, 1.32fr); column-gap: var(--space-6); align-items: start; }
  .footer-inner { align-items: center; flex-direction: row; gap: 2rem; }
}

@media (min-width: 1024px) {
  .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-card { min-height: 18rem; }
}

/* 1366 px */
@media (min-width: 1366px) {
  .identity { grid-template-columns: 6.4rem minmax(0, 25rem); }.identity-symbol { width: 6.4rem; }.identity-copy { padding-left: 1rem; }.identity-name { font-size: 1rem; }.identity-abbr { font-size: 2rem; }
  .site-nav { gap: .35rem 1rem; }.site-nav a { font-size: .82rem; }
  .chapter { min-height: 48rem; }.chapter-visual { min-height: 31rem; }
}

/* 1440 px */
@media (min-width: 1440px) {
  .header-inner { padding-block: 1rem; }.hero { min-height: calc(100svh - 10rem); }
  .formal-hero-art, .formal-lab-photo, .formal-lab-photo > img { min-height: 28rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .scale-rail { position: static; }
}

@media print {
  .site-header { position: static; }.scale-rail { position: static; }.chapter { min-height: 0; break-inside: avoid; }.chapter-visual { min-height: 14rem; box-shadow: none; }.profile-trigger--label, .profile-dialog { display: none; }.site-footer { background: var(--white); color: var(--ink); }
}

/* V4 identity correction: approved emblem plus exact native HTML lab name. */
.identity { grid-template-columns: auto minmax(0, 23.4rem); gap: 1.105rem; }
.identity-logo { width: clamp(6.73rem, 10.47vw, 9.34rem); height: clamp(6.73rem, 10.47vw, 9.34rem); object-fit: contain; transform: translateY(var(--brand-mark-optical-offset)); }
.identity-name { position: static; display: grid; width: auto; height: auto; max-width: 23.4rem; padding-left: 1.105rem; overflow: visible; border-left: 3px solid var(--carmine); clip-path: none; color: #000; white-space: normal; font-size: clamp(.936rem, 1.43vw, 1.17rem); font-weight: 800; line-height: 1.2; text-align: left; }
.identity-name > span { display: block; white-space: nowrap; }

/* Shared landing/formal header: identity, navigation, video action and language control. */
.header-inner { display: flex; align-items: center; gap: clamp(.75rem, 1.5vw, 1.6rem); }
.site-nav { margin-left: auto; }
.site-nav a { text-decoration: none; }
.site-nav a:hover { color: var(--carmine); }
.header-video { flex: 0 0 auto; padding: .68rem .95rem; border: 1px solid var(--carmine); border-radius: 999px; color: var(--carmine); font-size: .8rem; font-weight: 800; line-height: 1.25; text-decoration: none; }
.header-video:hover { color: var(--white); background: var(--carmine); }
.language-link { display: inline-grid; flex: 0 0 auto; width: 2.4rem; aspect-ratio: 1; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); font-size: .8rem; font-weight: 800; line-height: 1; text-decoration: none; }
@media (max-width: 46rem) {
  .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem .85rem; padding: .7rem 0 .8rem; }
  .identity { grid-column: 1; grid-row: 1; grid-template-columns: auto minmax(0, 15.25rem); gap: .7rem; }
  .identity-logo { width: 4.255rem; height: 4.255rem; }
  .identity-name { max-width: 15.25rem; padding-left: .7rem; font-size: .8rem; line-height: 1.22; }
  .site-nav { display: none; }
  .header-video { grid-column: 1 / -1; grid-row: 2; justify-self: start; padding: .55rem .8rem; font-size: .72rem; }
  .language-link { grid-column: 2; grid-row: 1; width: 2.25rem; font-size: .74rem; }
}