/* Ollam Photonics, LLC — site stylesheet
   Built on the Scion design system (Medium Rare), variables taken from Scion.fig.
   Step 1: foundation — tokens, fonts, type, nav, footer, buttons, section frames. */

/* ---------- fonts (self-hosted, SIL OFL) ---------- */
@font-face { font-family: "Aspekta"; src: url("../fonts/AspektaVF.woff2") format("woff2"); font-weight: 50 1000; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader-VF.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader-Italic-VF.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  /* Scion interface scale (verbatim) */
  --window: 1500px;
  --container: 1200px;
  --content-xs: 384px; --content-s: 480px; --content-m: 576px; --content-l: 768px; --content-xl: 960px;
  --sp-6: 6px; --sp-12: 12px; --sp-18: 18px; --sp-24: 24px; --sp-36: 36px; --sp-48: 48px; --sp-72: 72px; --sp-96: 96px; --sp-168: 168px;
  --gap-tight: 12px; --gap: 24px; --gap-loose: 48px;
  --radius: 10px; --radius-s: 5px;
  --btn-h: 48px; --btn-r: 54px;
  --nav-h: 52px;
  --wide-pad: 9px;

  /* Interface colours: Scion's structure, Ollam's ink */
  --bg: #1A1A18;            /* Ink — page background (Scion: #1E1E1E) */
  --bg-2: #121211;          /* darker band (Scion: #121212) */
  --surface: #2C2C2A;       /* Ground — cards, reversed panels */
  --white: #FFFFFF;
  --text: rgba(255,255,255,0.70);
  --heading-faded: rgba(255,255,255,0.50);
  --border: rgba(255,255,255,0.10);
  --line: rgba(255,255,255,0.15);
  --glass-dark: rgba(0,0,0,0.25);
  --glass-white: rgba(255,255,255,0.15);
  --white-faded: rgba(255,255,255,0.06);

  /* Brand panel colours — the four slots Scion uses for its organic panels.
     OLLAM MAPPING (flip these four lines to change the whole site's colour story) */
  --brand-1: #A32D2D;       /* crimson        (Scion: #6C588D purple) */
  --brand-2: #3A3A37;       /* ground tint    (Scion: #A2B79F sage)   */
  --brand-3: #BA7517;       /* gold           (Scion: #D8A373 tan)    */
  --brand-4: #7A2222;       /* deep crimson   (Scion: #E0835C orange) */
  --accent: var(--brand-3); /* gold: numerals, small marks */

  --sans: "Aspekta", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  /* type scale (px, from the file) */
  --t-13: 13px; --t-16: 16px; --t-20: 20px; --t-25: 25px; --t-32: 32px; --t-40: 40px; --t-51: 51px; --t-64: 64px;
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: var(--t-16); line-height: 1.4; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; }
a { color: var(--white); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--bg); color: var(--white); padding: .5rem 1rem; z-index: 50; }
.skip:focus { left: 1rem; }

h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { color: var(--white); font-weight: 400; }
p { color: var(--text); }
.h-display { font-size: clamp(34px, 4.3vw, var(--t-64)); line-height: 1.1; letter-spacing: -0.01em; }
.h-display-serif { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(36px, 4.6vw, var(--t-64)); line-height: 1.1; }
.h-40 { font-size: clamp(28px, 3vw, var(--t-40)); line-height: 1.15; }
.h-32 { font-size: clamp(24px, 2.4vw, var(--t-32)); line-height: 1.2; }
.h-25 { font-size: clamp(20px, 1.9vw, var(--t-25)); line-height: 1.25; }
.h-20 { font-size: var(--t-20); line-height: 1.3; }
.t-20 { font-size: var(--t-20); line-height: 1.45; }
.t-13 { font-size: var(--t-13); line-height: 1.4; }
.white { color: var(--white); }
.faded { color: var(--heading-faded); }
.measure-m { max-width: var(--content-m); } .measure-l { max-width: var(--content-l); } .measure-xl { max-width: var(--content-xl); } .measure-s { max-width: var(--content-s); }

/* section label: 4px square + 13px text, as in the file ("■ our mission") */
.label { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--t-13); line-height: 1.4; color: var(--white); text-transform: lowercase; }
.label::before { content: ""; width: 4px; height: 4px; background: var(--accent); flex: none; }
.label.plain::before { background: var(--white); }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-24); }
@media (min-width: 1260px) { .container { padding: 0; } }
.section { padding: var(--sp-96) 0; }
.section.tight { padding: var(--sp-72) 0; }
.section.loose { padding: var(--sp-168) 0; }
.section.bg-2 { background: var(--bg-2); }
@media (max-width: 760px) { .section { padding: var(--sp-72) 0; } .section.loose { padding: var(--sp-96) 0; } }

/* Wide Section: full-bleed frame with a 9px inset and rounded inner card (the hero/CTA containers) */
.wide { padding: var(--wide-pad); }
.wide-inner { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--brand-1); min-height: 480px; }
.wide-inner.tall { min-height: min(912px, 90vh); }
.wide-inner .container { position: relative; z-index: 2; }

/* organic colour panels: three blurred blobs (file: FOREGROUND_BLUR 300 on 1482px card) + grain */
.panels { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.panels svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.panels .blob { filter: blur(120px); }
.grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .22; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 200px 200px; }
.dotgrid { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .18;
  background-image: radial-gradient(rgba(255,255,255,.7) .6px, transparent .8px); background-size: 24px 24px; }

/* ---------- home hero (file: Hero A — 1482×912 card, centred serif line, glass card bottom-right) ---------- */
.wide-inner.hero { min-height: min(912px, 92vh); }
.hero-mark { position: absolute; z-index: 1; width: min(760px, 62vw); height: auto; right: -4%; top: 50%; transform: translateY(-46%); pointer-events: none; }
.hero-grid { position: relative; z-index: 2; min-height: inherit; display: grid; grid-template-rows: 1fr auto; padding-top: calc(var(--nav-h) + 48px); padding-bottom: var(--sp-48); row-gap: var(--sp-36); }
.hero-center { align-self: center; justify-self: center; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-18); max-width: 1020px; padding: var(--sp-24) 0 var(--sp-48); }
.hero-sub { max-width: 760px; }
.hero-prov { font-size: var(--t-13); line-height: 1.45; color: rgba(255,255,255,.62); max-width: 720px; }
.hero-center h1 { text-shadow: 0 2px 24px rgba(0,0,0,.18); }
.hero-motto { font-family: var(--serif); font-style: italic; font-size: var(--t-16); color: rgba(255,255,255,.78); align-self: end; grid-row: 2; grid-column: 1; }
.hero-card { grid-row: 2; grid-column: 2; justify-self: end; align-self: end; width: 400px; max-width: 100%; background: var(--glass-dark); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: var(--radius-s); padding: var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-12); }
.hero-card p { font-size: 15px; line-height: 1.45; }
.hero-grid { grid-template-columns: 1fr auto; }
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding-top: calc(var(--nav-h) + 24px); }
  .hero-center { padding: var(--sp-36) 0 var(--sp-24); }
  .hero-card { grid-column: 1; grid-row: 2; justify-self: stretch; width: auto; }
  .hero-motto { grid-row: 3; grid-column: 1; }
  .hero-mark { width: 120vw; right: -40vw; top: 38%; transform: translateY(-50%); opacity: .8; }
}

/* V5-A: interferogram hero — ink base, gold fringe field, one crimson glow, ghost mark right, statement and card left */
.wide-inner.hero-fringes { background: var(--bg); }
.fringes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-fringes .glow { position: absolute; z-index: 1; width: 900px; height: 900px; border-radius: 50%; background: var(--brand-4); filter: blur(140px); opacity: .55; right: -200px; top: -150px; pointer-events: none; }
.hero-left .hero-grid { grid-template-columns: 1fr; }
.hero-left .hero-center { justify-self: start; text-align: left; align-items: flex-start; max-width: 720px; padding-top: var(--sp-72); }
.hero-left .hero-card { grid-column: 1; justify-self: start; }
@media (max-width: 760px) { .hero-fringes .glow { width: 600px; height: 600px; right: -260px; top: -100px; } .hero-left .hero-center { padding-top: var(--sp-36); } }

/* ---------- notch nav (file: 1200×52, bg=page, bottom radii 5, 5px notch corners, backdrop blur 28) ---------- */
.nav-wrap { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: center; pointer-events: none; }
.nav { pointer-events: auto; position: relative; width: 100%; max-width: var(--container); height: var(--nav-h); background: var(--bg);
  border-radius: 0 0 var(--radius-s) var(--radius-s); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-36); padding: 0 var(--sp-24);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav::before, .nav::after { content: ""; position: absolute; top: 0; width: 5px; height: 5px; background: var(--bg); }
.nav::before { left: -5px; -webkit-mask: radial-gradient(circle at 0 100%, transparent 5px, #000 5.5px); mask: radial-gradient(circle at 0 100%, transparent 5px, #000 5.5px); }
.nav::after  { right: -5px; -webkit-mask: radial-gradient(circle at 100% 100%, transparent 5px, #000 5.5px); mask: radial-gradient(circle at 100% 100%, transparent 5px, #000 5.5px); }
@media (max-width: 1260px) { .nav::before, .nav::after { display: none; } .nav { border-radius: 0; } }
.nav .brand { display: flex; align-items: center; height: 100%; }
.nav .brand a:hover { text-decoration: none; }
/* lockup: mark + live-text wordmark, per the identity's horizontal lockup (500 weight, ~0.13em tracking) */
.lockup { display: inline-flex; align-items: center; gap: 10px; }
.lockup .mark { flex: none; }
.wordmark { font-weight: 500; font-size: 16px; letter-spacing: .13em; color: var(--white); white-space: nowrap; line-height: 1; }
.lockup.big { gap: 16px; }
.lockup.big .wordmark { font-size: 24px; }
/* footer lockup: the supplied lockup-horizontal-color geometry, verbatim; text fills set for the dark footer */
.footer-lockup { align-self: flex-start; margin-left: -15px; }
.fl-svg { width: 480px; max-width: 100%; height: auto; display: block; font-family: var(--sans); }
.fl-word { fill: var(--white); }
.fl-motto { fill: var(--text); }
.nav-links { display: flex; align-items: center; gap: var(--sp-36); list-style: none; margin: 0; padding: 0; }
.nav-links a { font-weight: 500; font-size: var(--t-16); line-height: 1.4; color: var(--white); position: relative; }
.nav-links a[aria-current="page"]::after { content: ""; display: block; height: 1px; background: var(--white); margin-top: 2px; }
.nav-cta { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; color: var(--white); white-space: nowrap; }
.nav-cta svg { width: 16px; height: 16px; }
.nav-toggle { display: none; background: none; border: 0; color: var(--white); width: 36px; height: 36px; padding: 0; cursor: pointer; margin-right: -8px; }
.nav-toggle svg { width: 22px; height: 22px; margin: 0 auto; }
@media (max-width: 860px) {
  .nav { gap: var(--sp-12); }
  .nav-toggle { display: block; }
  .nav-links { position: absolute; left: 0; right: 0; top: var(--nav-h); background: var(--bg); flex-direction: column; align-items: flex-start; gap: 0; padding: var(--sp-12) var(--sp-24) var(--sp-24); border-radius: 0 0 var(--radius-s) var(--radius-s); border-top: 1px solid var(--line); display: none; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: var(--sp-12) 0; border-bottom: 1px solid var(--border); }
  .nav-links li:last-child a { border-bottom: 0; }
  .nav.open .nav-links { display: flex; }
  .nav-cta { display: none; }
}

/* ---------- buttons (file: 48px tall, 54px pill radius, 16px/500) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-6); height: var(--btn-h); padding: 0 var(--sp-24); border-radius: var(--btn-r);
  font-family: var(--sans); font-weight: 500; font-size: var(--t-16); line-height: 1; color: var(--white); background: var(--surface); border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn:hover { text-decoration: none; filter: brightness(1.12); }
.btn.primary { background: var(--brand-1); }
.btn.accent { background: var(--brand-3); color: var(--bg); }
.btn.glass { background: var(--glass-white); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn.outline { background: transparent; border-color: var(--line); }
.btn.small { height: 36px; padding: 0 var(--sp-18); font-size: 14px; }
.btn svg { width: 16px; height: 16px; }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--sp-12); }

/* ---------- cards & lines ---------- */
.card { background: var(--white-faded); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-24); }
.card.solid { background: var(--surface); border-color: transparent; }
.hair { border: 0; border-top: 1px solid var(--line); margin: 0; }
.stack-12 > * + * { margin-top: var(--sp-12); } .stack-24 > * + * { margin-top: var(--sp-24); } .stack-36 > * + * { margin-top: var(--sp-36); } .stack-48 > * + * { margin-top: var(--sp-48); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- footer (file: 96px top pad, top row info 480 + 3 menus 190 gap 72, bottom row hairline + 13px) ---------- */
.footer { padding: var(--sp-96) 0 0; }
.footer-top { display: grid; grid-template-columns: minmax(0, 480px) repeat(3, 190px); justify-content: space-between; gap: var(--sp-48) var(--sp-72); padding-bottom: var(--sp-96); }
.footer-info { display: flex; flex-direction: column; gap: var(--sp-36); }

.footer-info address { font-style: normal; color: var(--white); line-height: 1.4; }
.footer-info .legal { font-size: var(--t-13); color: var(--text); line-height: 1.4; }
.footer-info .motto { font-family: var(--serif); font-style: italic; font-size: var(--t-20); color: var(--white); line-height: 1.2; }
.footer-menu h4 { font-size: var(--t-16); color: var(--heading-faded); margin-bottom: var(--sp-12); font-weight: 400; }
.footer-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-12); }
.footer-menu a { color: var(--white); }
.footer-bottom { border-top: 1px solid var(--line); padding: var(--sp-24) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-48); flex-wrap: wrap; font-size: var(--t-13); color: var(--white); }
.footer-bottom .ids { color: var(--text); }
.footer-bottom .ids span + span::before { content: "|"; padding: 0 .6em; color: var(--line); }
@media (max-width: 960px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-info { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- placeholders (visible until replaced) ---------- */
.ph { font-family: var(--sans); font-size: .85em; color: var(--text); border: 1px dashed var(--line); padding: 0 .35em; white-space: normal; overflow-wrap: anywhere; }
.draft-notice { font-size: var(--t-13); background: var(--brand-3); color: var(--bg); padding: .35rem var(--sp-24); text-align: center; position: relative; z-index: 20; }

/* ---------- home body (step 3) ---------- */
.num { font-size: var(--t-13); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.features .card { padding: var(--sp-36); }
.measures { list-style: none; margin-bottom: 0; padding: 0; }
.measures li a { display: flex; flex-direction: column; gap: var(--sp-12); height: 100%; padding: var(--sp-36); background: var(--white-faded); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: background .2s, border-color .2s; }
.measures li a:hover { background: rgba(255,255,255,.09); border-color: var(--line); text-decoration: none; }
.measures p { flex: 1; }
.more { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-13); color: var(--white); }
.more svg { width: 14px; height: 14px; }
.band { min-height: 0; background: var(--brand-1); }
.band-grid { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-48); padding-top: var(--sp-72); padding-bottom: var(--sp-72); flex-wrap: wrap; }
.steps-grid, .eco-grid { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: var(--sp-96); align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 48px 1fr; gap: var(--sp-24); padding: var(--sp-24) 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li .num { padding-top: 6px; }
.steps li div { display: flex; flex-direction: column; gap: var(--sp-12); }
.stat { display: flex; align-items: baseline; gap: var(--sp-18); margin-top: var(--sp-24); padding-top: var(--sp-24); border-top: 1px solid var(--line); }
.stat-num { font-family: var(--sans); font-weight: 300; font-size: 96px; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.stat-label { font-size: var(--t-16); max-width: 32ch; }
.eco-list li { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-18) 0; }
.row-between { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-24); flex-wrap: wrap; }
.pubs-cards { list-style: none; margin-bottom: 0; padding: 0; }
.pubs-cards h3 { font-weight: 400; }
.cta { min-height: 0; background: var(--brand-1); }
.cta-grid { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-24); padding-top: var(--sp-96); padding-bottom: var(--sp-96); }
.cta-grid .btn-group { justify-content: center; }
@media (max-width: 860px) { .steps-grid, .eco-grid { grid-template-columns: 1fr; gap: var(--sp-48); } .stat-num { font-size: 72px; } }

/* ---------- company (step 4) ---------- */
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: var(--sp-12) 0; border-top: 1px solid var(--line); }
ul.plain li:last-child { border-bottom: 1px solid var(--line); }
.flag { font-size: .8em; color: var(--accent); }
.wide-inner.hero-sm { min-height: 0; background: var(--brand-1); }
.hero-sm-grid { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--sp-24); padding-top: calc(var(--nav-h) + 120px); padding-bottom: var(--sp-96); }
.hero-sm-grid .label { color: var(--white); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-48); border-top: 1px solid var(--line); padding-top: var(--sp-48); }
.stat-block { display: flex; flex-direction: column; gap: var(--sp-12); }
.stat-big { font-family: var(--sans); font-weight: 300; font-size: var(--t-51); line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.spine { list-style: none; margin-bottom: 0; padding: 0; }
.spine li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-48); padding: var(--sp-48) 0; border-top: 1px solid var(--line); }
.spine li:last-child { border-bottom: 1px solid var(--line); }
.spine-head { display: flex; gap: var(--sp-24); align-items: baseline; }
.spine p { font-size: var(--t-16); }
.spine p i { display: block; margin-top: var(--sp-12); color: var(--white); font-family: var(--serif); font-style: italic; font-size: var(--t-16); }
.lead-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-96); align-items: start; }
.portrait { aspect-ratio: 4 / 5; background: var(--surface); border-bottom: 3px solid var(--brand-1); border-radius: var(--radius); overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pubs-list { list-style: none; margin-bottom: 0; padding: 0; }
.pubs-list li { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-24); padding: var(--sp-18) 0; border-top: 1px solid var(--line); }
.pubs-list li:last-child { border-bottom: 1px solid var(--line); }
.boundary-grid { display: flex; flex-direction: column; gap: var(--sp-24); max-width: var(--content-xl); border-left: 2px solid var(--brand-1); padding-left: var(--sp-36); }
.ids-table { border-collapse: collapse; width: 100%; max-width: var(--content-xl); }
.ids-table th, .ids-table td { text-align: left; vertical-align: top; padding: var(--sp-12) var(--sp-24) var(--sp-12) 0; border-top: 1px solid var(--line); }
.ids-table tr:last-child th, .ids-table tr:last-child td { border-bottom: 1px solid var(--line); }
.ids-table th { font-weight: 400; color: var(--heading-faded); width: 12rem; white-space: nowrap; }
.ids-table td { color: var(--white); }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr; gap: var(--sp-24); } .spine li { grid-template-columns: 1fr; gap: var(--sp-18); } .lead-grid { grid-template-columns: 1fr; gap: var(--sp-36); } .portrait { max-width: 260px; } .pubs-list li { grid-template-columns: 1fr; gap: 4px; } .ids-table th { width: 8rem; white-space: normal; } }

/* ---------- applications (step 5) ---------- */
.apps { list-style: none; margin: 0; padding: 0; }
.app { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-72); padding: var(--sp-48) 0; border-top: 1px solid var(--line); scroll-margin-top: var(--sp-24); }
.app:last-child { border-bottom: 1px solid var(--line); }
.app-head { display: flex; flex-direction: column; gap: var(--sp-12); }
.app-body { display: flex; flex-direction: column; gap: var(--sp-24); }
.app-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24); margin: 0; padding-top: var(--sp-18); border-top: 1px solid var(--border); }
.app-meta dt { font-size: var(--t-13); color: var(--heading-faded); margin-bottom: 4px; }
.app-meta dd { margin: 0; font-size: var(--t-13); color: var(--text); line-height: 1.5; }
@media (max-width: 860px) { .app { grid-template-columns: 1fr; gap: var(--sp-24); } .app-meta { grid-template-columns: 1fr; } }
.wide + .wide { padding-top: var(--sp-24); }

/* ---------- contact + 404 (step 6) ---------- */
.routes { list-style: none; margin-bottom: 0; padding: 0; }
.routes .card { display: flex; flex-direction: column; }
.routes .card p:not(.route-line) { flex: 1; }
.route-line { font-size: var(--t-16); color: var(--white); padding-top: var(--sp-12); border-top: 1px solid var(--border); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-96); align-items: start; }
.contact-grid address { font-style: normal; display: flex; flex-direction: column; color: var(--white); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: var(--sp-48); } }

/* ---------- step 8 trim ---------- */
.features.compact .card { padding: var(--sp-24); }
.features.compact p { font-size: 15px; line-height: 1.5; }
.measures.compact li a { padding: var(--sp-24); gap: var(--sp-12); }
.measures.compact h3 { font-size: var(--t-20); }
.app-head { gap: var(--sp-12); }
.app-body .more { align-self: flex-start; }
.eco-grid .btn { align-self: flex-start; }

/* ---------- provenance timeline ---------- */
.timeline { list-style: none; margin-bottom: 0; padding: 0; }
.tl { display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-24); padding: var(--sp-18) 0; border-top: 1px solid var(--line); position: relative; }
.tl:last-child { border-bottom: 1px solid var(--line); }
.tl-year { font-variant-numeric: tabular-nums; color: var(--heading-faded); padding-top: 2px; }
.tl-body { display: flex; flex-direction: column; gap: 4px; }
.tl-who { color: var(--white); }
.tl-what { color: var(--text); font-size: 15px; line-height: 1.5; }
.tl-where { font-size: var(--t-13); color: var(--heading-faded); font-style: italic; }
.tl.ours .tl-year { color: var(--accent); }
.tl.ours::before { content: ""; position: absolute; left: -18px; top: 26px; width: 6px; height: 6px; background: var(--accent); }
.hero-sm.hero-fringes { background: var(--bg); }
.hero-sm.hero-fringes .glow { right: -260px; top: -260px; }
@media (max-width: 860px) { .tl { grid-template-columns: 72px 1fr; gap: var(--sp-12); } .tl.ours::before { left: -12px; } }

/* ---------- timeline illustration ---------- */
.tl-wrap { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--sp-24) 0; }
.tl-svg { width: 100%; height: auto; display: block; font-family: var(--sans); }
.tl-svg .tl-tick { font-size: 12px; fill: rgba(255,255,255,.5); }
.tl-svg .tl-l { font-size: 13px; fill: #F1EFE8; }
.tl-svg .tl-l .tl-y { fill: rgba(255,255,255,.55); }
.tl-svg .tl-l.ours .tl-y { fill: #BA7517; }
.tl-svg .tl-l .tl-n { fill: #FFFFFF; }
.tl-svg .tl-l .tl-s { fill: rgba(255,255,255,.62); font-size: 12px; }
.tl-list { display: none; }
@media (max-width: 860px) { .tl-wrap { display: none; } .tl-list { display: block; } }

/* reveal-on-click address */
.reveal { cursor: pointer; }
.revealed { color: var(--white); }