/* ==========================================================================
   ARNAUD DALAIS — "The Architecture of Legacy"
   Design system · Creaa Think Designs
   --------------------------------------------------------------------------
   1. Tokens
   2. Reset & base
   3. Typography
   4. Layout primitives
   5. Structural ornament (rules, ticks, strata)
   6. Header & navigation
   7. Footer
   8. Components
   9. Page-specific compositions
  10. Motion & accessibility
  11. Responsive
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* Core palette */
  --ink:            #101A2B;   /* Midnight Indigo */
  --slate:          #25354A;   /* Deep Slate Blue */
  --copper:         #B8734C;   /* Warm Copper */
  --ivory:          #F4F0E8;   /* Soft Ivory */
  --stone:          #B8B1A5;   /* Muted Stone */

  /* Derived, contrast-safe */
  --ink-2:          #16233A;
  --slate-2:        #2E4059;
  --ivory-2:        #EBE5D9;
  --ivory-3:        #E1DACB;
  --copper-ink:     #8A4F2E;   /* copper for small text on light  (5.7:1) */
  --copper-lift:    #D08E63;   /* copper for hover on dark        */
  --stone-ink:      #66625A;   /* stone for small text on light   (5.3:1 on ivory, 4.8:1 on ivory-2) */
  --text-ink:       #1B2536;   /* body on light                   */
  --text-muted:     #4A5566;   /* secondary on light              (6.6:1) */
  --text-onink:     #EFEBE3;   /* body on dark                    */
  --text-onink-2:   #B8B1A5;   /* secondary on dark               (8.2:1) */

  /* Hairlines */
  --line-dark:      rgba(184,115,76,.34);
  --line-light:     rgba(27,37,54,.16);
  --line-onink:     rgba(184,177,165,.22);

  /* Type */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Metrics */
  --gutter: clamp(20px, 4.2vw, 76px);
  --measure: 68ch;
  --rail: 76px;              /* left architectural rail on desktop */
  --hdr: 74px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);

  /* Surface-aware roles — light surface is the default.
     Every dark surface re-declares these four in one place (§13), so no
     component ever needs a per-surface colour override again. */
  --fg-h:      var(--ink);        /* headings & emphasis */
  --fg-body:   var(--text-ink);   /* body copy          */
  --fg-muted:  var(--text-muted); /* secondary copy     */
  --fg-accent: var(--copper-ink); /* copper, small text */
  --fg-line:   var(--line-light); /* hairlines          */
}

/* ---------- 2. RESET & BASE --------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr) + 24px);
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--text-ink);
  font-family:var(--sans);
  font-size:clamp(15.5px,.42vw + 14.4px,17px);
  line-height:1.72;
  font-weight:400;
  letter-spacing:.002em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,svg,video{ max-width:100%; }
img{ height:auto; display:block; border:0; }

a{ color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible,input:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--copper);
  outline-offset:3px;
  border-radius:2px;
}

::selection{ background:var(--copper); color:#fff; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:400;
  background:var(--ink); color:var(--ivory);
  padding:14px 22px; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600;
}
.skip-link:focus{ left:12px; top:12px; }

.visually-hidden{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- 3. TYPOGRAPHY ----------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--serif);
  font-weight:380;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 96;
  line-height:1.08;
  letter-spacing:-.018em;
  margin:0 0 .5em;
  color:var(--fg-h);
  text-wrap:balance;
}

.t-hero{
  font-size:clamp(2.85rem,7.4vw,6.15rem);
  line-height:.99;
  letter-spacing:-.032em;
  font-weight:340;
}
.t-xl{ font-size:clamp(2.15rem,4.9vw,4rem);  line-height:1.04; letter-spacing:-.026em; }
.t-lg{ font-size:clamp(1.72rem,3.1vw,2.7rem); line-height:1.12; letter-spacing:-.02em; }
.t-md{ font-size:clamp(1.34rem,1.9vw,1.78rem); line-height:1.24; letter-spacing:-.012em; }
.t-sm{
  font-family:var(--sans); font-weight:600;
  font-size:clamp(1.02rem,1.1vw,1.14rem);
  line-height:1.4; letter-spacing:-.004em;
}

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.lede{
  font-size:clamp(1.13rem,1.42vw,1.42rem);
  line-height:1.6;
  color:var(--fg-muted);
  font-weight:380;
  letter-spacing:-.006em;
  max-width:56ch;
}
.prose{ max-width:var(--measure); }
.prose p + p{ margin-top:0; }
.prose > p:first-of-type::first-letter{ /* opt-in via .prose--drop */ }
.prose--drop > p:first-of-type::first-letter{
  font-family:var(--serif);
  float:left; font-size:4.05em; line-height:.78;
  padding:.06em .12em 0 0; margin-top:.04em;
  color:var(--fg-accent); font-weight:340;
}

.on-ink{ color:var(--text-onink); }
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4,.on-ink h5{ color:var(--ivory); }
.on-ink .lede{ color:var(--text-onink-2); }
.on-ink .prose{ color:var(--text-onink-2); }
.on-ink .prose strong{ color:var(--ivory); }
.on-ink .prose--drop > p:first-of-type::first-letter{ color:var(--copper); }

strong,b{ font-weight:600; color:var(--fg-h); }

/* Eyebrow / section marker — the numbering system of the site */
.marker{
  display:flex; align-items:baseline; gap:14px;
  font-family:var(--sans);
  font-size:11.5px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-accent);
  margin:0 0 22px;
}
.marker::before{
  content:""; width:34px; height:1px; flex:none;
  background:var(--copper); opacity:.75;
  transform:translateY(-4px);
}
.marker .num{
  font-family:var(--serif); font-weight:400;
  font-size:14px; letter-spacing:.06em;
  color:var(--fg-accent); opacity:.95;
}
.on-ink .marker{ color:var(--copper-lift); }
.on-ink .marker .num{ color:var(--copper-lift); }

.kicker{
  font-size:11.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-muted);
}

/* ---------- 4. LAYOUT PRIMITIVES ---------------------------------------- */
.wrap{
  width:100%;
  max-width:1560px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:1120px; }
.wrap--tight{  max-width:880px; }

.band{ position:relative; padding-block:clamp(64px,8.4vw,140px); }
.band--tall{ padding-block:clamp(84px,11vw,180px); }
.band--short{ padding-block:clamp(46px,5.2vw,84px); }

.band--ivory { background:var(--ivory); }
.band--ivory2{ background:var(--ivory-2); }
.band--ink   { background:var(--ink);  color:var(--text-onink); }
.band--slate { background:var(--slate);color:var(--text-onink); }

/* Asymmetric editorial grids — single column by default, columns added up-stack */
.g{ display:grid; gap:clamp(28px,3.4vw,58px); align-items:start; }
.g-2,.g-3,.g-4,.g-offset,.g-lead,.g-side,.g-wide{ grid-template-columns:minmax(0,1fr); }

.stack-sm > * + *{ margin-top:14px; }
.stack    > * + *{ margin-top:26px; }
.stack-lg > * + *{ margin-top:clamp(40px,4.4vw,72px); }

.sticky{ position:sticky; top:calc(var(--hdr) + 44px); }

/* ---------- 5. STRUCTURAL ORNAMENT -------------------------------------- */
/* Fine copper hairline */
.rule{ height:1px; border:0; margin:0; background:var(--fg-line); }
.rule--copper{ background:var(--line-dark); }

/* Vertical architectural rail with tick marks */
.rail{ position:relative; padding-left:clamp(22px,3.2vw,var(--rail)); }
.rail::before{
  content:""; position:absolute; left:0; top:.35em; bottom:0;
  width:1px; background:var(--fg-line);
}
.rail::after{
  content:""; position:absolute; left:-3px; top:.35em;
  width:7px; height:7px; background:var(--copper);
  transform:rotate(45deg);
}

/* Blueprint line-field — the "architecture" texture, pure CSS, no images */
.blueprint{ position:relative; overflow:hidden; isolation:isolate; }
.blueprint::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(184,177,165,.085) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  rgba(184,177,165,.055) 0 1px, transparent 1px 96px);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.15) 62%,transparent);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.15) 62%,transparent);
}
.blueprint--light::before{
  background-image:
    repeating-linear-gradient(90deg, rgba(27,37,54,.055) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  rgba(27,37,54,.04)  0 1px, transparent 1px 96px);
}
.blueprint > *{ position:relative; z-index:1; }

/* Large outlined index numeral */
.numeral{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3.4rem,7vw,6.6rem); line-height:.82;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px var(--copper);
  opacity:.72;
  display:block;
}
.numeral--solid{ color:var(--fg-accent); -webkit-text-stroke:0; opacity:1; }

/* ---------- 6. HEADER & NAVIGATION -------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:120;
  height:var(--hdr);
  display:flex; align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s var(--ease);
}
.site-header__in{
  width:100%; max-width:1560px; margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.site-header.is-solid,
.site-header.is-open{
  background:rgba(16,26,43,.94);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--line-onink);
}
body.page-light .site-header:not(.is-solid):not(.is-open){ background:transparent; }

.wordmark{
  display:flex; align-items:center; gap:12px;
  color:var(--ivory); flex:none;
}
.wordmark__glyph{
  width:26px; height:26px; flex:none; position:relative;
}
.wordmark__glyph::before,
.wordmark__glyph::after{
  content:""; position:absolute; inset:0;
  border:1px solid var(--copper);
}
.wordmark__glyph::after{
  inset:6px 6px auto auto; width:11px; height:11px;
  border-width:1px 1px 0 0; border-color:var(--copper);
  background:transparent;
}
.wordmark__text{
  font-family:var(--sans); font-weight:600;
  font-size:13px; letter-spacing:.28em; text-transform:uppercase;
  line-height:1; white-space:nowrap;
}
.wordmark__text span{ color:var(--copper); }

/* Inline desktop nav */
.nav-inline{ display:none; }
.nav-inline ul{
  display:flex; align-items:center; gap:clamp(14px,1.5vw,26px);
  list-style:none; margin:0; padding:0;
}
.nav-inline a{
  position:relative; display:block; padding:9px 0;
  font-size:12px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-onink-2);
  transition:color .3s var(--ease);
  white-space:nowrap;
}
.nav-inline a::after{
  content:""; position:absolute; left:0; right:100%; bottom:2px;
  height:1px; background:var(--copper);
  transition:right .38s var(--ease);
}
.nav-inline a:hover,.nav-inline a:focus-visible{ color:var(--ivory); }
.nav-inline a:hover::after,.nav-inline a:focus-visible::after{ right:0; }
.nav-inline a[aria-current="page"]{ color:var(--ivory); }
.nav-inline a[aria-current="page"]::after{ right:0; background:var(--copper); }

/* Menu toggle */
.nav-toggle{
  display:inline-flex; align-items:center; gap:11px;
  background:none; border:0; padding:10px 0; margin:0;
  color:var(--ivory); cursor:pointer; flex:none;
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
}
.nav-toggle__bars{ width:22px; height:10px; position:relative; flex:none; }
.nav-toggle__bars i{
  position:absolute; left:0; right:0; height:1.5px; background:currentColor;
  transition:transform .4s var(--ease-io), opacity .25s var(--ease);
}
.nav-toggle__bars i:first-child{ top:0; }
.nav-toggle__bars i:last-child { bottom:0; }
.site-header.is-open .nav-toggle__bars i:first-child{ transform:translateY(4.25px) rotate(45deg); }
.site-header.is-open .nav-toggle__bars i:last-child { transform:translateY(-4.25px) rotate(-45deg); }
.nav-toggle__label--close{ display:none; }
.site-header.is-open .nav-toggle__label--open { display:none; }
.site-header.is-open .nav-toggle__label--close{ display:inline; }

/* Full overlay index menu */
.nav-overlay{
  position:fixed; inset:0; z-index:110;
  background:var(--ink);
  padding:calc(var(--hdr) + 8px) 0 40px;
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden;
  transition:opacity .42s var(--ease), visibility .42s var(--ease);
}
.nav-overlay.is-open{ opacity:1; visibility:visible; }
.nav-overlay__in{
  width:100%; max-width:1560px; margin-inline:auto;
  padding-inline:var(--gutter);
  min-height:100%;
  display:flex; flex-direction:column; justify-content:center; gap:34px;
}
.nav-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-onink); }
.nav-list li{ border-bottom:1px solid var(--line-onink); }
.nav-list a{
  display:flex; align-items:baseline; gap:clamp(14px,2.4vw,34px);
  padding:clamp(11px,1.5vw,17px) 0;
  color:var(--text-onink-2);
  transition:color .3s var(--ease), padding-left .4s var(--ease);
}
.nav-list .n{
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.18em; color:var(--copper); flex:none; min-width:2.4em;
}
.nav-list .t{
  font-family:var(--serif); font-weight:360;
  font-size:clamp(1.5rem,3.5vw,2.5rem); line-height:1.08; letter-spacing:-.02em;
}
.nav-list a:hover,.nav-list a:focus-visible{ color:var(--ivory); padding-left:12px; }
.nav-list a[aria-current="page"]{ color:var(--ivory); }
.nav-list a[aria-current="page"] .t{ font-style:italic; }
.nav-overlay__foot{
  display:flex; flex-wrap:wrap; gap:12px 40px; align-items:center;
  color:var(--text-onink-2); font-size:12.5px; letter-spacing:.06em;
}
.nav-overlay__foot a{ border-bottom:1px solid var(--line-dark); padding-bottom:2px; }
.nav-overlay__foot a:hover{ color:var(--copper-lift); }

body.nav-locked{ overflow:hidden; }

/* ---------- 7. FOOTER --------------------------------------------------- */
.site-footer{
  background:var(--ink); color:var(--text-onink-2);
  padding-block:clamp(56px,6.4vw,96px) 0;
  border-top:1px solid var(--line-dark);
}
.footer-grid{
  display:grid; gap:clamp(34px,3.6vw,56px);
  grid-template-columns:minmax(0,1fr);
}
.footer-title{
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--copper); margin:0 0 18px;
}
.footer-nav{ list-style:none; margin:0; padding:0; columns:2; column-gap:26px; }
.footer-nav li{ break-inside:avoid; margin-bottom:9px; }
.footer-nav a{ font-size:13.5px; letter-spacing:.02em; transition:color .3s var(--ease); }
.footer-nav a:hover{ color:var(--copper-lift); }

.footer-contact{ list-style:none; margin:0; padding:0; font-size:14px; }
.footer-contact li{ margin-bottom:11px; line-height:1.5; }
.footer-contact .lbl{
  display:block; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--stone); opacity:.72; margin-bottom:3px;
}
.footer-contact a{
  color:var(--ivory);
  border-bottom:1px solid var(--line-dark); padding-bottom:2px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.footer-contact a:hover{ color:var(--copper-lift); border-bottom-color:var(--copper); }

.social{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.social a,.social span{
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--line-onink); color:var(--text-onink-2);
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.social a:hover{ border-color:var(--copper); color:var(--copper-lift); background:rgba(184,115,76,.09); }
.social span{ opacity:.42; cursor:not-allowed; }
.social svg{ width:17px; height:17px; fill:currentColor; }
.social-note{
  font-size:11.5px; line-height:1.6; color:var(--stone);
  opacity:.72; margin:14px 0 0; max-width:34ch;
}

.footer-brand__mark{
  font-family:var(--serif); font-weight:340;
  font-size:clamp(1.9rem,3.2vw,2.6rem); line-height:1.06;
  letter-spacing:-.02em; color:var(--ivory); margin:0 0 14px;
}
.footer-brand p{ font-size:13.5px; line-height:1.7; max-width:40ch; }

.footer-base{
  margin-top:clamp(40px,4.4vw,64px);
  border-top:1px solid var(--line-onink);
  padding-block:24px 28px;
  display:flex; flex-wrap:wrap; gap:10px 30px;
  align-items:center; justify-content:space-between;
  font-size:12.5px; letter-spacing:.03em;
}
.footer-base a{ color:var(--ivory); border-bottom:1px solid var(--line-dark); padding-bottom:1px; }
.footer-base a:hover{ color:var(--copper-lift); border-bottom-color:var(--copper); }

.disclaimer{
  border-top:1px solid var(--line-onink);
  padding-block:20px 30px;
  font-size:11.5px; line-height:1.75; color:var(--stone);
  opacity:.78; max-width:96ch;
}

/* ---------- 8. COMPONENTS ----------------------------------------------- */

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 26px; min-height:48px;
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  border:1px solid var(--fg-h); color:var(--fg-h);
  background:transparent; cursor:pointer;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn .arw{ width:20px; height:1px; background:currentColor; position:relative; transition:width .35s var(--ease); flex:none; }
.btn .arw::after{
  content:""; position:absolute; right:0; top:-2.5px;
  width:6px; height:6px; border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.btn:hover{ background:var(--ink); color:var(--ivory); }
.btn:hover .arw{ width:30px; }
.btn--copper{ border-color:var(--copper); color:var(--copper-ink); }
.btn--copper:hover{ background:var(--copper); border-color:var(--copper); color:#fff; }
.btn--onink{ border-color:var(--line-dark); color:var(--ivory); }
.btn--onink:hover{ background:var(--copper); border-color:var(--copper); color:#fff; }
.btn--ghost{ border-color:var(--line-light); color:var(--text-muted); }
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--ivory); }

/* Text link with copper underline reveal */
.tlink{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-accent); position:relative; padding-bottom:4px;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--copper); transform-origin:left; transform:scaleX(.34);
  transition:transform .42s var(--ease);
}
.tlink:hover::after{ transform:scaleX(1); }

/* Figures — images are never cropped; containers adapt to the image */
figure{ margin:0; }
.fig{ position:relative; }
.fig img{ width:100%; height:auto; display:block; }
.fig--framed img{ border:1px solid var(--fg-line); }

/* Copper offset frame — architectural, no cropping of the photograph */
.fig--offset{ padding:0 0 16px 16px; }
.fig--offset::before{
  content:""; position:absolute; left:0; bottom:0;
  width:min(62%,320px); height:min(62%,320px);
  border-left:1px solid var(--copper); border-bottom:1px solid var(--copper);
  opacity:.55;
}
.fig--offset img{ position:relative; }

/* Portrait plate: pads rather than crops, so heads are always intact */
.plate{
  background:var(--slate);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,1.6vw,26px);
  border:1px solid var(--line-onink);
}
.plate img{ width:100%; height:auto; max-height:74vh; object-fit:contain; }
.plate--light{ background:var(--ivory-2); border-color:var(--line-light); }

figcaption{
  margin-top:12px; font-size:12px; line-height:1.62;
  color:var(--fg-muted); letter-spacing:.02em;
  padding-left:14px; border-left:1px solid var(--copper);
}

/* Pull quote */
.pq{
  margin:0; padding:clamp(24px,2.8vw,40px) 0 0;
  border-top:1px solid var(--line-dark);
}
.pq blockquote{
  margin:0; font-family:var(--serif); font-weight:340;
  font-size:clamp(1.32rem,2.55vw,2.15rem); line-height:1.28;
  letter-spacing:-.018em; color:var(--fg-h);
  text-wrap:pretty;
}
.pq cite{
  display:block; margin-top:20px; font-style:normal;
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--fg-accent);
}
.pq .src{
  display:block; margin-top:7px; font-size:11.5px; letter-spacing:.02em;
  text-transform:none; font-weight:400; color:var(--fg-muted); opacity:.9;
}

/* Data figures */
.stats{ display:grid; gap:1px; background:var(--fg-line); border-block:1px solid var(--fg-line); }
.stat{ background:var(--ivory); padding:clamp(22px,2.4vw,34px) clamp(18px,2vw,28px); }
.band--ivory2 .stat{ background:var(--ivory-2); }
.band--ink .stat{ background:var(--ink); }
.band--slate .stat{ background:var(--slate); }
.stat__n{
  font-family:var(--serif); font-weight:340;
  font-size:clamp(2.1rem,3.7vw,3.15rem); line-height:1;
  letter-spacing:-.035em; color:var(--fg-h); display:block;
}
.stat__n em{ font-style:normal; font-size:.46em; letter-spacing:-.01em; color:var(--fg-accent); }
.stat__l{
  display:block; margin-top:12px; font-size:12px; line-height:1.55;
  letter-spacing:.055em; color:var(--fg-muted);
}
.stat__s{ display:block; margin-top:8px; font-size:11px; color:var(--fg-muted); opacity:.85; letter-spacing:.02em; }

/* Index / definition rows */
.rows{ border-top:1px solid var(--fg-line); }
.row{
  display:grid; gap:clamp(10px,2vw,40px);
  grid-template-columns:minmax(0,1fr);
  padding:clamp(22px,2.4vw,34px) 0;
  border-bottom:1px solid var(--fg-line);
}
.row__k{
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--fg-accent);
  padding-top:5px;
}
.row__v h3{ margin-bottom:.42em; }
.row__v p{ font-size:.965rem; }

/* Chronology — the timeline spine */
.chrono{ position:relative; }
.chrono::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:var(--fg-line);
}
.ev{
  position:relative; padding-left:clamp(26px,3.4vw,60px);
  padding-block:0 clamp(38px,4.4vw,68px);
}
.ev:last-child{ padding-bottom:0; }
.ev::before{
  content:""; position:absolute; left:-4px; top:12px;
  width:9px; height:9px; background:var(--copper); transform:rotate(45deg);
}
.ev__yr{
  font-family:var(--serif); font-weight:340;
  font-size:clamp(1.85rem,3.5vw,3.1rem); line-height:1;
  letter-spacing:-.03em; color:var(--fg-accent); display:block; margin-bottom:12px;
}
.ev h3{ font-size:clamp(1.18rem,1.7vw,1.52rem); margin-bottom:.5em; }
.ev p{ font-size:.965rem; max-width:64ch; }
.ev__tag{
  display:inline-block; margin-bottom:14px;
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-muted); border:1px solid var(--fg-line); padding:5px 11px;
}

/* Panels & cards (used sparingly, varied per page) */
.panel{
  border:1px solid var(--fg-line); padding:clamp(24px,2.6vw,40px);
  background:var(--ivory); position:relative;
  transition:border-color .4s var(--ease), transform .5s var(--ease);
}
.on-ink .panel,.band--ink .panel,.band--slate .panel,.phero .panel{ background:transparent; }
.panel--lift:hover{ border-color:var(--copper); transform:translateY(-4px); }
.panel__corner::after{
  content:""; position:absolute; right:-1px; top:-1px; width:26px; height:26px;
  border-top:1px solid var(--copper); border-right:1px solid var(--copper);
}

/* Article cards for Insights */
.art{ display:block; position:relative; }
.art__meta{
  display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center;
  font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-accent); margin-bottom:14px;
}
.art__meta .dot{ width:3px; height:3px; background:var(--fg-muted); border-radius:50%; }
.art__meta .rt{ color:var(--fg-muted); font-weight:500; letter-spacing:.14em; }
.art h3{ transition:color .3s var(--ease); }
.art:hover h3{ color:var(--fg-accent); }

/* Expandable long-form (Insights) */
.piece{ border-top:1px solid var(--fg-line); }
.piece__head{
  width:100%; display:grid; gap:18px 34px; align-items:start;
  grid-template-columns:minmax(0,1fr) auto;
  background:none; border:0; padding:clamp(26px,2.8vw,40px) 0;
  text-align:left; cursor:pointer; color:inherit; font:inherit;
}
.piece__sign{
  width:38px; height:38px; flex:none; position:relative;
  border:1px solid var(--fg-line); transition:border-color .35s var(--ease), transform .45s var(--ease);
  align-self:center;
}
.piece__sign::before,.piece__sign::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--fg-accent);
  transform:translate(-50%,-50%);
}
.piece__sign::before{ width:13px; height:1px; }
.piece__sign::after { width:1px; height:13px; transition:transform .4s var(--ease-io), opacity .3s var(--ease); }
.piece__head[aria-expanded="true"] .piece__sign{ border-color:var(--copper); }
.piece__head[aria-expanded="true"] .piece__sign::after{ transform:translate(-50%,-50%) scaleY(0); }
.piece__head:hover .piece__sign{ border-color:var(--copper); }
.piece__body{ display:none; padding-bottom:clamp(30px,3.4vw,52px); }
.piece__body.is-open{ display:block; }
.piece__body .prose{ max-width:70ch; }

/* Gallery — masonry via columns; images keep natural proportions */
.masonry{ columns:1; column-gap:clamp(14px,1.7vw,26px); }
.masonry .gitem{ break-inside:avoid; margin-bottom:clamp(14px,1.7vw,26px); display:block; width:100%; }
.gitem{
  position:relative; background:none; border:0; padding:0; cursor:zoom-in;
  color:inherit; font:inherit; text-align:left;
}
.gitem img{
  width:100%; height:auto; display:block;
  border:1px solid var(--fg-line);
  transition:filter .5s var(--ease), border-color .4s var(--ease);
}
.gitem:hover img{ filter:brightness(1.05) contrast(1.02); border-color:var(--copper); }
.gitem__cap{
  display:block; margin-top:10px; font-size:11.5px; line-height:1.55;
  color:var(--fg-muted); letter-spacing:.02em;
}
.gitem__i{
  position:absolute; top:10px; left:10px;
  font-size:10px; font-weight:600; letter-spacing:.16em;
  color:var(--ivory); background:rgba(16,26,43,.82);
  padding:5px 9px; opacity:0; transition:opacity .35s var(--ease);
}
.gitem:hover .gitem__i,.gitem:focus-visible .gitem__i{ opacity:1; }

/* Lightbox */
.lb{
  position:fixed; inset:0; z-index:200;
  background:rgba(16,26,43,.975);
  display:none; align-items:center; justify-content:center;
  padding:clamp(48px,6vw,80px) clamp(16px,4vw,72px);
}
.lb.is-open{ display:flex; }
.lb__fig{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; gap:16px; align-items:center; }
.lb__fig img{
  max-width:100%; max-height:76vh; width:auto; height:auto;
  object-fit:contain; border:1px solid var(--line-onink);
}
.lb__cap{
  color:var(--text-onink-2); font-size:12.5px; text-align:center;
  max-width:62ch; line-height:1.6; border:0; padding:0; margin:0;
}
.lb__btn{
  position:absolute; background:rgba(37,53,74,.85); border:1px solid var(--line-onink);
  color:var(--ivory); width:46px; height:46px; cursor:pointer;
  display:grid; place-items:center; font-size:19px; line-height:1;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.lb__btn:hover{ background:var(--copper); border-color:var(--copper); }
.lb__close{ top:clamp(12px,2vw,26px); right:clamp(12px,2vw,26px); }
.lb__prev { left:clamp(8px,1.6vw,26px);  top:50%; transform:translateY(-50%); }
.lb__next { right:clamp(8px,1.6vw,26px); top:50%; transform:translateY(-50%); }
.lb__count{
  position:absolute; bottom:clamp(12px,2vw,26px); left:50%; transform:translateX(-50%);
  font-size:11.5px; letter-spacing:.18em; color:var(--stone);
}

/* Page hero (interior pages) */
.phero{
  background:var(--ink); color:var(--text-onink);
  padding-block:calc(var(--hdr) + clamp(56px,7vw,110px)) clamp(52px,6.4vw,96px);
  position:relative; overflow:hidden;
}
.phero__grid{ display:grid; gap:clamp(28px,3.6vw,60px); grid-template-columns:minmax(0,1fr); align-items:end; }
.phero h1{ color:var(--ivory); }
.phero .lede{ color:var(--text-onink-2); max-width:60ch; }
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-onink-2); margin-bottom:26px;
}
.crumbs a{ color:var(--text-onink-2); transition:color .3s var(--ease); }
.crumbs a:hover{ color:var(--copper-lift); }
.crumbs .sep{ color:var(--copper); }
.crumbs [aria-current]{ color:var(--ivory); }

/* Contents / on-page index */
.toc{ list-style:none; margin:0; padding:0; border-top:1px solid var(--fg-line); }
.toc li{ border-bottom:1px solid var(--fg-line); }
.toc a{
  display:flex; gap:14px; align-items:baseline; padding:12px 0;
  font-size:13px; letter-spacing:.02em; color:var(--fg-muted);
  transition:color .3s var(--ease), padding-left .35s var(--ease);
}
.toc a:hover{ color:var(--fg-accent); padding-left:8px; }
.toc .n{ font-size:10.5px; font-weight:600; letter-spacing:.14em; color:var(--fg-accent); flex:none; }

/* Next-page pager */
.pager{
  display:grid; gap:1px; background:var(--line-onink);
  grid-template-columns:minmax(0,1fr);
}
.pager a{
  background:var(--ink); padding:clamp(26px,3vw,44px) clamp(22px,2.4vw,38px);
  display:flex; flex-direction:column; gap:12px;
  transition:background .4s var(--ease);
}
.pager a:hover{ background:var(--slate); }
.pager .k{ font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--copper); }
.pager .t{
  font-family:var(--serif); font-weight:340; color:var(--ivory);
  font-size:clamp(1.3rem,2.1vw,1.85rem); line-height:1.12; letter-spacing:-.018em;
}
.pager .d{ font-size:13px; color:var(--text-onink-2); line-height:1.6; max-width:44ch; }

/* Source notes */
.sources{ font-size:12.5px; line-height:1.75; color:var(--fg-muted); }
.sources ol{ margin:0; padding-left:1.3em; }
.sources li{ margin-bottom:7px; }
.sources a{ color:var(--fg-accent); border-bottom:1px solid var(--line-dark); }
.sources a:hover{ color:var(--fg-h); }

.note{
  border-left:2px solid var(--copper);
  padding:4px 0 4px 20px; margin:26px 0;
  font-size:13px; line-height:1.72; color:var(--fg-muted);
}
.note strong{ color:var(--fg-accent); font-weight:600; letter-spacing:.03em; }

/* Tag list */
.tags{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.tags li{
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--fg-line); padding:7px 13px; color:var(--fg-muted);
}

/* Contact specifics */
.cbig{
  font-family:var(--serif); font-weight:340;
  font-size:clamp(1.5rem,3.4vw,2.6rem); line-height:1.14; letter-spacing:-.024em;
  color:var(--ivory); display:inline-block; position:relative;
  padding-bottom:6px; word-break:break-word;
}
.cbig::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--copper); transform-origin:left; transform:scaleX(.28);
  transition:transform .45s var(--ease);
}
a.cbig:hover::after{ transform:scaleX(1); }
a.cbig:hover{ color:var(--copper-lift); }

/* ---------- 9. PAGE COMPOSITIONS ---------------------------------------- */

/* Home hero — asymmetric, image never cropped */
.hero{
  position:relative; background:var(--ink); color:var(--text-onink);
  padding-block:calc(var(--hdr) + clamp(44px,6vw,92px)) clamp(52px,6vw,96px);
  overflow:hidden;
}
.hero__grid{
  display:grid; gap:clamp(32px,3.4vw,54px);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
.hero__eyebrow{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
  font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--copper-lift); margin-bottom:26px;
}
.hero__eyebrow .bar{ width:44px; height:1px; background:var(--copper); }
.hero h1{ margin-bottom:.34em; }
.hero h1 em{ font-style:italic; font-weight:300; color:var(--copper-lift); }
.hero__sub{
  font-size:clamp(1.02rem,1.25vw,1.24rem); line-height:1.62;
  color:var(--text-onink-2); max-width:52ch; margin-bottom:30px;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero__figure{ position:relative; }
.hero__figure img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line-onink);
}
.hero__badge{
  margin-top:18px; display:flex; flex-wrap:wrap; gap:10px 26px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-onink-2);
}
.hero__badge span{ display:flex; align-items:center; gap:9px; }
.hero__badge span::before{ content:""; width:5px; height:5px; background:var(--copper); transform:rotate(45deg); flex:none; }

.hero__ticker{
  border-top:1px solid var(--line-onink);
  margin-top:clamp(38px,4.4vw,64px); padding-top:clamp(22px,2.4vw,32px);
  display:grid; gap:22px 34px; grid-template-columns:minmax(0,1fr);
}
.hero__ticker div{ display:flex; flex-direction:column; gap:6px; }
.hero__ticker dt{
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--copper-lift);
}
.hero__ticker dd{ margin:0; font-size:13.5px; line-height:1.55; color:var(--text-onink-2); }

/* Split feature (varied composition helper) */
.split{ display:grid; gap:clamp(28px,3.4vw,60px); grid-template-columns:minmax(0,1fr); align-items:center; }

/* Map-inspired abstract composition (Mauritius / global)
   The diagram carries pin labels that sit outside the square, so it is only
   rendered where there is room to reserve space for them. Below that width the
   same information is presented as a legible list — never clipped, never
   overflowing the viewport. */
.atlas-wrapper{ width:100%; display:flex; justify-content:center; }
.atlas-figure{ display:none; }

.atlas-list{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:var(--line-onink);
  border:1px solid var(--line-onink); width:100%; margin:0; padding:0;
  list-style:none;
}
.atlas-list li{
  background:var(--slate); padding:16px 18px;
  display:flex; align-items:center; gap:11px;
  font-size:12.5px; letter-spacing:.06em; color:var(--text-onink-2);
}
.band--ink .atlas-list li{ background:var(--ink); }
.atlas-list li::before{
  content:""; width:7px; height:7px; flex:none;
  background:var(--copper); transform:rotate(45deg);
}
.atlas-list li.is-hub{ color:var(--ivory); font-weight:600; }
.atlas-list li.is-hub::before{ box-shadow:0 0 0 4px rgba(184,115,76,.2); }

.atlas{
  position:relative; aspect-ratio:1/1; width:100%; max-width:520px;
  border:1px solid var(--line-onink);
}
.atlas::before,.atlas::after{
  content:""; position:absolute; border:1px solid var(--line-onink); border-radius:50%;
}
.atlas::before{ inset:11%; }
.atlas::after { inset:26%; border-color:var(--line-dark); }
.atlas .cross{ position:absolute; inset:0; }
.atlas .cross::before,.atlas .cross::after{
  content:""; position:absolute; background:var(--line-onink);
}
.atlas .cross::before{ left:50%; top:0; bottom:0; width:1px; }
.atlas .cross::after { top:50%; left:0; right:0; height:1px; }
.atlas .pt{
  position:absolute; width:9px; height:9px; background:var(--copper);
  transform:translate(-50%,-50%) rotate(45deg);
}
.atlas .pt::after{
  content:attr(data-l); position:absolute; left:16px; top:-4px;
  font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-onink-2);
  white-space:nowrap; transform:rotate(-45deg); transform-origin:left center;
}
.atlas .pt.is-hub{ width:13px; height:13px; box-shadow:0 0 0 6px rgba(184,115,76,.16); }
.atlas .ring{
  position:absolute; left:50%; top:50%; width:46%; height:46%;
  transform:translate(-50%,-50%) rotate(24deg);
  border:1px solid var(--line-dark); border-radius:50%; opacity:.6;
}

/* ---------- 10. MOTION & ACCESSIBILITY ---------------------------------- */
[data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .78s var(--ease), transform .78s var(--ease);
  will-change:opacity,transform;
}
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  [data-reveal]{ opacity:1!important; transform:none!important; }
}

@media (forced-colors:active){
  .rule,.rail::before,.chrono::before{ forced-color-adjust:none; background:CanvasText; }
  .btn,.panel,.gitem img{ border:1px solid ButtonText; }
}

/* ---------- 11. RESPONSIVE ---------------------------------------------- */

/* ≥ 600px — small tablets */
@media (min-width:600px){
  .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero__ticker{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pager{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ≥ 780px — tablet portrait & up */
@media (min-width:780px){
  :root{ --hdr:82px; }
  .g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g-offset,.g-lead{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g-side{ grid-template-columns:minmax(0,3.1fr) minmax(0,8fr); }
  .g-wide{ grid-template-columns:minmax(0,8fr) minmax(0,3.4fr); }
  .row{ grid-template-columns:minmax(150px,1.5fr) minmax(0,6fr); }
  .masonry{ columns:2; }
  .phero__grid{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); }
}

/* ≥ 940px — laptop */
@media (min-width:940px){
  .g-offset{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .g-lead  { grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
  .g-side  { grid-template-columns:minmax(0,3.1fr) minmax(0,8fr); }
  .g-wide  { grid-template-columns:minmax(0,8fr) minmax(0,3.4fr); }
  .g-4     { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .split   { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .stats   { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .stats--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hero__grid{ grid-template-columns:minmax(0,6.6fr) minmax(0,5fr); gap:clamp(38px,4vw,72px); }
  .hero__ticker{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .footer-grid{ grid-template-columns:minmax(0,3.1fr) minmax(0,3.1fr) minmax(0,2.6fr) minmax(0,2fr); }
  .masonry{ columns:3; }
  .split--rev > *:first-child{ order:2; }

  /* Enough width to reserve label space beside the atlas diagram */
  .atlas-figure{ display:block; width:100%; max-width:640px; padding-right:118px; }
  .atlas{ max-width:none; }
  .atlas-list{ display:none; }
}

/* ≥ 1180px — inline navigation appears */
@media (min-width:1180px){
  .nav-inline{ display:block; }
  .nav-toggle{ display:none; }
}

/* ≥ 1600px — large desktop */
@media (min-width:1600px){
  :root{ --gutter:88px; }
}

/* Mobile-only refinements */
@media (max-width:779px){
  .sticky{ position:static; }
  .prose--drop > p:first-of-type::first-letter{ font-size:3.2em; }
  .fig--offset{ padding:0 0 10px 10px; }
  .plate img{ max-height:none; }
  .atlas{ max-width:100%; }
  .piece__head{ grid-template-columns:minmax(0,1fr) auto; gap:14px 18px; }
}

@media (max-width:479px){
  :root{ --hdr:66px; }
  .wordmark__text{ font-size:11px; letter-spacing:.2em; }
  .btn{ padding:14px 20px; font-size:11px; letter-spacing:.16em; }
  .hero__cta .btn{ width:100%; justify-content:space-between; }
  .footer-nav{ columns:1; }
  .stats{ grid-template-columns:minmax(0,1fr); }
}

@media print{
  .site-header,.nav-overlay,.lb,.pager{ display:none!important; }
  body{ background:#fff; color:#000; }
}

/* ---------- 12. TIMELINE PAGE ------------------------------------------- */
.epoch{ position:relative; }
.epoch__grid{
  display:grid; gap:clamp(20px,3vw,52px);
  grid-template-columns:minmax(0,1fr); align-items:start;
}
.epoch__yr{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3.6rem,13vw,9.5rem); line-height:.84;
  letter-spacing:-.05em; color:var(--fg-accent);
  display:block; margin:0 0 6px;
}
.epoch__yr--outline{
  color:transparent; -webkit-text-stroke:1.2px var(--copper); opacity:.85;
}
.epoch__span{
  display:block; font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--fg-muted);
}
.epoch__body{ max-width:66ch; }
.epoch__body h2,.epoch__body h3{ margin-bottom:.5em; }
.epoch + .epoch{ margin-top:clamp(52px,6vw,104px); padding-top:clamp(52px,6vw,104px); border-top:1px solid var(--fg-line); }

@media (min-width:780px){
  .epoch__grid{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); }
  .epoch--flip .epoch__grid{ grid-template-columns:minmax(0,8fr) minmax(0,4fr); }
  .epoch--flip .epoch__head{ order:2; }
}


/* ---------- 13. DARK SURFACES ------------------------------------------
   Every dark region re-declares the four surface roles once. Components
   above read them, so a component dropped onto a dark band is legible by
   construction — no per-surface colour rules, and no dark-on-dark text. */
.on-ink,
.hero,
.phero,
.band--ink,
.band--slate,
.site-footer,
.nav-overlay,
.lb{
  --fg-h:      var(--ivory);
  --fg-body:   var(--text-onink);
  --fg-muted:  var(--text-onink-2);
  --fg-accent: var(--copper-lift);
  --fg-line:   var(--line-onink);
}

/* Buttons sitting on a dark surface must not paint an ink-on-ink border. */
.band--ink .btn:not([class*="--"]),
.band--slate .btn:not([class*="--"]),
.hero .btn:not([class*="--"]),
.phero .btn:not([class*="--"]){
  border-color:var(--line-dark); color:var(--ivory);
}
.band--ink .btn:not([class*="--"]):hover,
.band--slate .btn:not([class*="--"]):hover,
.hero .btn:not([class*="--"]):hover,
.phero .btn:not([class*="--"]):hover{
  background:var(--copper); border-color:var(--copper); color:#fff;
}

/* Panels keep their own ground on light surfaces only. */
.band--ivory2 .panel{ background:var(--ivory-2); }

/* Home and Contact sit at the ends of the sequence: one cell, full width. */
.pager--single{ grid-template-columns:minmax(0,1fr)!important; }

/* Compact fact list — dates paired with roles, not links. */
.facts{ margin:0; padding:0; border-top:1px solid var(--fg-line); }
.facts > div{
  display:grid; grid-template-columns:minmax(72px,auto) minmax(0,1fr);
  gap:6px 18px; padding:11px 0; border-bottom:1px solid var(--fg-line);
}
.facts dt{
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.14em; color:var(--fg-accent); padding-top:2px;
}
.facts dd{ margin:0; font-size:13.5px; line-height:1.5; color:var(--fg-body); }