/* ==========================================================================
   lamiatazi.com — Official site of Lamia Tazi
   Design system: "Precision & Presence"
   Midnight · Teal · Mineral · Ivory · Copper
   Designed and Developed by Creaa Think Designs
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Core palette */
  --midnight:      #08192a;
  --midnight-2:    #0e2438;
  --midnight-3:    #16344b;
  --midnight-4:    #1d4260;

  --teal:          #0f6b68;
  --teal-2:        #13807c;
  --teal-3:        #2f9a94;
  --teal-glow:     #63c0b8;

  --copper:        #a75f2c;   /* AA-safe for small text on light grounds and for white text on copper */
  --copper-2:      #cf8b52;
  --copper-ink:    #8e4f24;   /* copper for small text on ivory grounds */
  --copper-3:      #efc49c;   /* AA-safe accent for small text on dark grounds */

  --mineral:       #5c6b77;   /* AA-safe caption/label grey */
  --mineral-2:     #97a5af;
  --mineral-3:     #c2cbd2;

  --ivory:         #f4efe6;
  --ivory-2:       #faf7f1;
  --ivory-3:       #ece5d8;
  --paper:         #ffffff;

  --ink:           #0d1a24;
  --ink-2:         #33454f;
  --ink-3:         #5b6c77;

  --line:          #dcd8ce;
  --line-2:        #e8e4db;
  --line-dark:     rgba(255,255,255,.14);
  --line-dark-2:   rgba(255,255,255,.08);

  /* Typography */
  --f-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Metrics */
  --wrap:      1300px;
  --wrap-tight: 1080px;
  --wrap-read: 760px;
  --gutter:    clamp(18px, 4.5vw, 60px);
  --head-h:    78px;
  --r-sm:      3px;
  --r-md:      6px;

  /* Section rhythm */
  --sp-xs: clamp(28px, 4vw, 44px);
  --sp-s:  clamp(40px, 6vw, 68px);
  --sp-m:  clamp(56px, 8vw, 104px);
  --sp-l:  clamp(72px, 10vw, 140px);

  --shadow-1: 0 2px 10px rgba(8,25,42,.06), 0 12px 40px rgba(8,25,42,.07);
  --shadow-2: 0 10px 30px rgba(8,25,42,.10), 0 30px 80px rgba(8,25,42,.12);
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (max-width: 860px){ :root{ --head-h: 64px; } }

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--head-h) + 16px);
}
body{
  margin:0;
  padding-top: var(--head-h);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-2);
  background: var(--ivory-2);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 640px){ body{ font-size:16px; line-height:1.72; } }

img{ max-width:100%; display:block; }
a{ color: var(--teal); text-decoration:none; }
a:hover{ color: var(--copper); }
button{ font: inherit; }
ul,ol{ margin:0; padding:0; }
h1,h2,h3,h4,h5{ margin:0; font-weight:400; color: var(--midnight); }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }

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

:focus-visible{
  outline: 2px solid var(--copper-2);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:2000;
  background: var(--copper); color:#fff; padding:10px 18px;
  font: 500 13px/1 var(--f-sans); letter-spacing:.06em; text-transform:uppercase;
  transition: top .2s var(--ease);
}
.skip-link:focus{ top:12px; color:#fff; }

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY SYSTEM
   -------------------------------------------------------------------------- */
.d1,.d2,.d3,.d4{
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--midnight);
  text-wrap: balance;
}
.d1{ font-size: clamp(2.5rem, 6.2vw, 5.1rem); }
.d2{ font-size: clamp(2.05rem, 4.4vw, 3.5rem); line-height:1.1; }
.d3{ font-size: clamp(1.6rem, 3vw, 2.35rem); line-height:1.16; letter-spacing:-.012em; }
.d4{ font-size: clamp(1.22rem, 2vw, 1.55rem); line-height:1.26; letter-spacing:-.008em; }

.on-dark .d1, .on-dark .d2, .on-dark .d3, .on-dark .d4,
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4{ color: var(--ivory-2); }
.on-dark{ color: rgba(240,244,247,.80); }
.on-dark a{ color: var(--teal-glow); }
.on-dark a:hover{ color: var(--copper-3); }

.eyebrow{
  display:flex; align-items:center; gap:.68em;
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 1.15rem;
  line-height:1.4;
}
.eyebrow::before{
  content:""; width: 26px; height:1px; background: var(--copper); flex:none;
}
.on-dark .eyebrow{ color: var(--teal-glow); }
.on-dark .eyebrow::before{ background: var(--copper-2); }
.eyebrow.is-centered{ justify-content:center; }

.lede{
  font-size: clamp(1.06rem, 1.45vw, 1.24rem);
  line-height: 1.66;
  color: var(--ink-2);
  font-weight: 400;
}
.on-dark .lede{ color: rgba(238,243,246,.86); }

.serif-lede{
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 20;
  font-size: clamp(1.25rem, 2.1vw, 1.72rem);
  line-height: 1.45;
  letter-spacing:-.008em;
  color: var(--midnight-2);
}
.on-dark .serif-lede{ color: var(--ivory); }

.small{ font-size:.9rem; line-height:1.65; color: var(--ink-3); }
.on-dark .small{ color: rgba(226,234,239,.66); }

.mono-label{
  font-family: var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color: var(--mineral);
}
.on-dark .mono-label{ color: rgba(200,214,222,.62); }

.num{
  font-family: var(--f-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.prose p + h3, .prose p + h2{ margin-top: 2em; }
.prose h3{
  font-family: var(--f-display); font-size: clamp(1.28rem,2.1vw,1.62rem);
  line-height:1.24; letter-spacing:-.01em; margin: 0 0 .7em; color: var(--midnight);
}
.prose h4{
  font-family: var(--f-sans); font-size:1.02rem; font-weight:600; letter-spacing:.005em;
  color: var(--midnight-2); margin:0 0 .55em;
}
.prose ul{ list-style:none; margin: 0 0 1.4em; }
.prose ul li{
  position:relative; padding-left: 1.5em; margin-bottom:.6em;
}
.prose ul li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:7px; height:7px; border:1px solid var(--copper); transform: rotate(45deg);
}
.prose.on-dark ul li::before{ border-color: var(--copper-2); }
.prose blockquote{
  margin: 2em 0; padding: 0 0 0 clamp(18px,3vw,34px);
  border-left: 2px solid var(--copper);
  font-family: var(--f-display);
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 20;
  font-size: clamp(1.15rem,1.9vw,1.42rem); line-height:1.5;
  color: var(--midnight-2);
}
.prose blockquote cite{
  display:block; margin-top:.9em; font: 500 .74rem/1.5 var(--f-mono);
  letter-spacing:.16em; text-transform:uppercase; color: var(--mineral); font-style:normal;
}

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

.section{ padding-block: var(--sp-m); position:relative; }
.section-l{ padding-block: var(--sp-l); position:relative; }
.section-s{ padding-block: var(--sp-s); position:relative; }

.bg-ivory{ background: var(--ivory-2); }
.bg-ivory-deep{ background: var(--ivory); }
.bg-paper{ background: var(--paper); }
.bg-midnight{ background: var(--midnight); }
.bg-midnight-2{ background: var(--midnight-2); }
.bg-teal-deep{ background: linear-gradient(160deg, #0b2b34 0%, #0f4a4a 55%, #0d3b45 100%); }

.grid{ display:grid; gap: clamp(22px, 3.4vw, 52px); }
.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(4,minmax(0,1fr)); }
.g-12{ grid-template-columns: repeat(12,minmax(0,1fr)); }
@media (max-width: 1040px){
  .g-4{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px){
  .g-2,.g-3{ grid-template-columns: 1fr; }
  .g-12{ grid-template-columns: 1fr; }
  .g-12 > *{ grid-column: auto !important; }
}
@media (max-width: 560px){
  .g-4{ grid-template-columns: 1fr; }
}

.stack-s > * + *{ margin-top: 1rem; }
.stack-m > * + *{ margin-top: 1.6rem; }
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }

/* --------------------------------------------------------------------------
   5. TEXTURES / MOTIFS  (scientific lattice, arcs)
   -------------------------------------------------------------------------- */
.lattice{ position:relative; isolation:isolate; }
.lattice::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 30%, transparent 100%);
}
.lattice-light{ position:relative; isolation:isolate; }
.lattice-light::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(15,107,104,.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,107,104,.075) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, #000 20%, transparent 100%);
}
.dots{ position:relative; isolation:isolate; }
.dots::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image: radial-gradient(circle at 1px 1px, rgba(185,111,57,.30) 1px, transparent 0);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.arc-motif{ position:absolute; pointer-events:none; z-index:0; opacity:.5; }

.rule{ height:1px; background: var(--line); border:0; }
.rule-dark{ height:1px; background: var(--line-dark); border:0; }
.rule-node{ position:relative; height:1px; background: var(--line); }
.rule-node::after{
  content:""; position:absolute; left:0; top:-3px; width:7px; height:7px;
  background: var(--copper); transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg: var(--midnight);
  --btn-fg: #fff;
  display:inline-flex; align-items:center; gap:.75em;
  padding: 15px 30px;
  background: var(--btn-bg); color: var(--btn-fg);
  font: 500 .78rem/1 var(--f-mono);
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--btn-bg); border-radius: var(--r-sm);
  cursor:pointer; position:relative; overflow:hidden;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn svg{ flex:none; transition: transform .35s var(--ease); }
.btn:hover{ background: var(--copper); border-color: var(--copper); color:#fff; transform: translateY(-2px); }
.btn:hover svg{ transform: translateX(4px); }

.btn-teal{ --btn-bg: var(--teal); }
.btn-copper{ --btn-bg: var(--copper); }
.btn-ghost{
  background: transparent; color: var(--midnight); border-color: var(--midnight-3);
}
.btn-ghost:hover{ background: var(--midnight); border-color: var(--midnight); color:#fff; }
.on-dark .btn-ghost{ color: var(--ivory-2); border-color: rgba(255,255,255,.35); }
.on-dark .btn-ghost:hover{ background: var(--ivory-2); color: var(--midnight); border-color: var(--ivory-2); }
.on-dark .btn-light{ background: var(--ivory-2); color: var(--midnight); border-color: var(--ivory-2); }
.on-dark .btn-light:hover{ background: var(--copper-2); border-color: var(--copper-2); color: #fff; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.6em;
  font: 500 .76rem/1 var(--f-mono); letter-spacing:.15em; text-transform:uppercase;
  color: var(--teal); padding-bottom:6px;
  border-bottom:1px solid rgba(15,107,104,.32);
  transition: color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.link-arrow:hover{ color: var(--copper); border-color: var(--copper); gap:.95em; }
.on-dark .link-arrow{ color: var(--teal-glow); border-color: rgba(99,192,184,.35); }
.on-dark .link-arrow:hover{ color: var(--copper-3); border-color: var(--copper-3); }

/* --------------------------------------------------------------------------
   7. IMAGE FRAMES — portraits are NEVER cropped
   -------------------------------------------------------------------------- */
.frame{
  position:relative;
  background: var(--ivory);
  border: 1px solid var(--line);
  padding: clamp(9px, 1.1vw, 15px);
  border-radius: var(--r-md);
}
.frame img{
  width:100%; height:auto; display:block;
  border-radius: 2px;
  background: var(--ivory-3);
}
.frame::after{
  content:""; position:absolute; inset:auto -1px -1px -1px; height:2px;
  background: linear-gradient(90deg, var(--copper) 0%, var(--copper-2) 42%, transparent 100%);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.frame-dark{ background: rgba(255,255,255,.045); border-color: var(--line-dark); }
.frame-dark img{ background: var(--midnight-3); }
.frame-plain{ padding:0; border:0; background:transparent; }
.frame-plain::after{ display:none; }
.frame-plain img{ border-radius: var(--r-md); border:1px solid var(--line); }

/* offset accent plate behind a frame */
.frame-offset{ position:relative; }
.frame-offset::before{
  content:""; position:absolute; z-index:0;
  inset: 26px -26px -26px 26px;
  border:1px solid var(--copper);
  opacity:.42; border-radius: var(--r-md);
}
.frame-offset > .frame{ position:relative; z-index:1; box-shadow: var(--shadow-1); }
@media (max-width: 700px){
  .frame-offset::before{ inset: 16px -14px -14px 16px; }
}

figure{ margin:0; }
figcaption{
  margin-top:.9rem;
  font: 400 .78rem/1.55 var(--f-mono);
  letter-spacing:.05em; color: var(--mineral);
}
.on-dark figcaption{ color: rgba(196,210,219,.6); }

/* --------------------------------------------------------------------------
   8. HEADER + NAVIGATION
   -------------------------------------------------------------------------- */
.site-head{
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  height: var(--head-h);
  background: rgba(8,25,42,.94);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-head.is-scrolled{
  background: rgba(6,20,34,.985);
  box-shadow: 0 10px 34px rgba(4,14,24,.34);
}
.head-inner{
  height:100%; display:flex; align-items:center; justify-content:space-between;
  gap: 20px; max-width: var(--wrap); margin-inline:auto; padding-inline: var(--gutter);
}

/* Wordmark */
.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; flex:none; min-width:0; }
.brand:hover{ color:inherit; }
.brand-mark{
  width:38px; height:38px; flex:none; position:relative;
  border:1px solid rgba(255,255,255,.28); border-radius:2px;
  display:grid; place-items:center;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.brand:hover .brand-mark{ border-color: var(--copper-2); background: rgba(185,111,57,.14); }
.brand-mark span{
  font: 400 .95rem/1 var(--f-display); letter-spacing:.02em; color: var(--ivory-2);
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 20;
}
.brand-mark::after{
  content:""; position:absolute; right:-1px; bottom:-1px; width:9px; height:9px;
  border-right:1px solid var(--copper-2); border-bottom:1px solid var(--copper-2);
}
.brand-text{ display:flex; flex-direction:column; min-width:0; }
.brand-name{
  font-family: var(--f-display); font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 30;
  font-size: 1.16rem; line-height:1.12; letter-spacing:.012em; color: var(--ivory-2);
  white-space:nowrap;
}
.brand-role{
  font: 500 .565rem/1.4 var(--f-mono); letter-spacing:.185em; text-transform:uppercase;
  color: rgba(190,206,216,.72); white-space:nowrap; margin-top:3px;
}
@media (max-width: 400px){ .brand-role{ letter-spacing:.13em; font-size:.52rem; } .brand-name{ font-size:1.02rem; } }

/* Desktop nav */
.nav{ display:flex; align-items:center; gap: clamp(2px, .7vw, 8px); }
.nav > li{ list-style:none; position:relative; }
.nav-link{
  display:flex; align-items:center; gap:.4em;
  padding: 10px clamp(7px, .82vw, 13px);
  font: 500 .705rem/1 var(--f-mono); letter-spacing:.115em; text-transform:uppercase;
  color: rgba(216,227,234,.86);
  border-radius:2px; white-space:nowrap; background:none; border:0; cursor:pointer;
  transition: color .28s var(--ease);
}
.nav-link:hover, .nav-link:focus-visible{ color: var(--copper-3); }
.nav-link .caret{ width:7px; height:7px; flex:none; opacity:.65; transition: transform .3s var(--ease); }
.nav > li:hover .nav-link .caret, .nav > li:focus-within .nav-link .caret{ transform: rotate(180deg); }
.nav-link.is-active{ color: var(--ivory-2); }
.nav-link.is-active::after{
  content:""; position:absolute; left: clamp(7px,.82vw,13px); right: clamp(7px,.82vw,13px);
  bottom: 2px; height:1px; background: var(--copper-2);
}

/* Dropdowns */
.subnav{
  position:absolute; top: calc(100% + 12px); left:50%; transform: translate(-50%, 8px);
  min-width: 268px; padding: 10px;
  background: rgba(9,28,45,.985);
  border:1px solid rgba(255,255,255,.13);
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px rgba(3,12,20,.5);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.subnav::before{
  content:""; position:absolute; top:-12px; left:0; right:0; height:12px;
}
.nav > li:hover > .subnav,
.nav > li:focus-within > .subnav{
  opacity:1; visibility:visible; pointer-events:auto; transform: translate(-50%, 0);
}
.subnav li{ list-style:none; }
.subnav a{
  display:block; padding: 11px 14px; border-radius:3px;
  font: 400 .84rem/1.4 var(--f-sans); color: rgba(219,229,236,.88);
  border-left: 2px solid transparent;
  transition: background .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease);
}
.subnav a small{
  display:block; font: 400 .655rem/1.4 var(--f-mono); letter-spacing:.11em;
  text-transform:uppercase; color: rgba(160,180,193,.6); margin-top:3px;
}
.subnav a:hover, .subnav a:focus-visible{
  background: rgba(255,255,255,.062); color:#fff; border-left-color: var(--copper-2);
}
.subnav a.is-active{ color: var(--copper-3); border-left-color: var(--copper); background: rgba(185,111,57,.10); }

/* Header CTA */
.head-cta{
  display:inline-flex; align-items:center; gap:.55em; flex:none;
  padding: 11px 18px; border:1px solid rgba(255,255,255,.30); border-radius:3px;
  font: 500 .68rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  color: var(--ivory-2);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.head-cta:hover{ background: var(--copper); border-color: var(--copper); color:#fff; }

/* Burger */
.burger{
  display:none; width:44px; height:44px; flex:none; align-items:center; justify-content:center;
  background:transparent; border:1px solid rgba(255,255,255,.24); border-radius:3px; cursor:pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.burger:hover{ border-color: var(--copper-2); }
.burger span{ display:block; position:relative; width:19px; height:1.5px; background: var(--ivory-2); transition: background .2s; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:19px; height:1.5px; background: var(--ivory-2);
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform: rotate(-45deg); }

@media (max-width: 1180px){
  .nav, .head-cta{ display:none; }
  .burger{ display:inline-flex; }
}

/* Mobile drawer */
.drawer{
  position:fixed; inset: var(--head-h) 0 0 0; z-index:890;
  background: linear-gradient(170deg, #071527 0%, #0b2135 60%, #0a1c2c 100%);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform: translateX(100%);
  visibility:hidden;
  transition: transform .42s var(--ease), visibility .42s;
}
.drawer.is-open{ transform: translateX(0); visibility:visible; }
.drawer-inner{ padding: 26px var(--gutter) 60px; }
.drawer-list{ list-style:none; }
.drawer-list > li{ border-bottom:1px solid rgba(255,255,255,.09); }
.drawer-list > li > a,
.drawer-toggle{
  display:flex; width:100%; align-items:center; justify-content:space-between; gap:14px;
  padding: 17px 2px; background:none; border:0; text-align:left; cursor:pointer;
  font-family: var(--f-display); font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 24;
  font-size: 1.32rem; line-height:1.2; color: var(--ivory-2);
}
.drawer-list > li > a.is-active,
.drawer-toggle.is-active{ color: var(--copper-3); }
.drawer-toggle .caret{ width:11px; height:11px; opacity:.7; transition: transform .32s var(--ease); flex:none; }
.drawer-toggle[aria-expanded="true"] .caret{ transform: rotate(180deg); }
.drawer-sub{
  list-style:none; overflow:hidden; max-height:0;
  transition: max-height .42s var(--ease);
}
.drawer-sub li a{
  display:block; padding: 11px 0 11px 18px; margin-left:2px;
  border-left:1px solid rgba(255,255,255,.16);
  font: 400 .93rem/1.4 var(--f-sans); color: rgba(214,226,234,.82);
}
.drawer-sub li:last-child a{ margin-bottom: 12px; }
.drawer-sub li a.is-active{ color: var(--copper-3); border-left-color: var(--copper); }
.drawer-foot{ margin-top: 30px; }
.drawer-foot .btn{ width:100%; justify-content:center; }
.drawer-meta{
  margin-top: 24px; padding-top: 20px; border-top:1px solid rgba(255,255,255,.10);
  font: 400 .8rem/1.75 var(--f-sans); color: rgba(198,213,222,.7);
}
.drawer-meta a{ color: var(--teal-glow); }
body.no-scroll{ overflow:hidden; }

/* --------------------------------------------------------------------------
   9. PAGE HERO (interior pages)
   -------------------------------------------------------------------------- */
.page-hero{
  position:relative;
  background: linear-gradient(158deg, #061423 0%, #0c2437 48%, #0a2b34 100%);
  color: rgba(238,244,247,.82);
  padding-block: clamp(52px, 8vw, 96px) clamp(52px, 8vw, 96px);
  overflow:hidden;
}
.page-hero .wrap, .page-hero .wrap-tight{ position:relative; z-index:2; }
.page-hero::after{
  content:""; position:absolute; right:-8%; top:-30%; width: 58vw; height: 58vw; max-width:840px; max-height:840px;
  background: radial-gradient(circle, rgba(19,128,124,.30) 0%, rgba(19,128,124,0) 66%);
  pointer-events:none;
}
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55em;
  font: 400 .7rem/1.6 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  color: rgba(178,197,208,.62); margin-bottom: 1.6rem;
}
.crumbs a{ color: rgba(178,197,208,.82); }
.crumbs a:hover{ color: var(--copper-3); }
.crumbs span[aria-hidden]{ color: rgba(178,197,208,.4); }
.crumbs em{ font-style:normal; color: var(--copper-3); }

.hero-meta{
  display:flex; flex-wrap:wrap; gap: clamp(18px, 3vw, 46px);
  margin-top: clamp(30px, 4vw, 46px); padding-top: clamp(24px,3vw,34px);
  border-top:1px solid rgba(255,255,255,.13);
}
.hero-meta div{ min-width: 120px; }
.hero-meta dt{ font: 500 .66rem/1.5 var(--f-mono); letter-spacing:.19em; text-transform:uppercase; color: rgba(160,182,194,.66); }
.hero-meta dd{ margin:6px 0 0; font-size:.95rem; color: var(--ivory-2); line-height:1.5; }

/* --------------------------------------------------------------------------
   10. CARDS & MODULES
   -------------------------------------------------------------------------- */
.card{
  position:relative; background: var(--paper); border:1px solid var(--line-2);
  border-radius: var(--r-md); padding: clamp(24px, 2.6vw, 38px);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  height:100%;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-1); border-color: var(--mineral-3); }
.card h3{ font-family: var(--f-display); font-size: clamp(1.18rem,1.7vw,1.42rem); line-height:1.24; margin:0 0 .6em; letter-spacing:-.008em; }
.card p{ font-size:.965rem; line-height:1.72; }
.card .card-index{
  font: 500 .68rem/1 var(--f-mono); letter-spacing:.18em; color: var(--copper); display:block; margin-bottom:1.1rem;
}
.card-dark{ background: rgba(255,255,255,.038); border-color: var(--line-dark); }
.card-dark:hover{ border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.06); box-shadow:none; }
.card-dark h3{ color: var(--ivory-2); }
.card-dark p{ color: rgba(226,235,240,.76); }
.card-dark .card-index{ color: var(--copper-3); }

.card-flat{
  background: transparent; border:0; border-top:1px solid var(--line);
  border-radius:0; padding: clamp(22px,2.4vw,30px) 0 0;
}
.card-flat:hover{ transform:none; box-shadow:none; }
.card-flat.on-dark{ border-top-color: var(--line-dark); }

/* Stat block */
.stat{ padding: clamp(18px,2vw,26px) 0; border-top:1px solid var(--line); }
.stat .stat-fig{
  display:block; font-family: var(--f-display); font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 40;
  font-size: clamp(2.1rem, 3.6vw, 3.05rem); line-height:1; letter-spacing:-.028em; color: var(--midnight);
}
.stat .stat-label{
  display:block; margin-top:.85rem; font: 400 .855rem/1.6 var(--f-sans); color: var(--ink-3);
}
.stat .stat-src{ display:block; margin-top:.55rem; font: 400 .68rem/1.5 var(--f-mono); letter-spacing:.09em; color: var(--mineral-2); }
.on-dark .stat{ border-top-color: var(--line-dark); }
.on-dark .stat .stat-fig{ color: var(--ivory-2); }
.on-dark .stat .stat-label{ color: rgba(219,230,237,.74); }
.on-dark .stat .stat-src{ color: rgba(170,190,201,.52); }
.stat-teal .stat-fig{ color: var(--teal); }
.on-dark .stat-teal .stat-fig{ color: var(--teal-glow); }

/* Pull quote panel */
.quote-panel{
  position:relative; padding: clamp(30px,4vw,54px);
  background: var(--paper); border:1px solid var(--line-2); border-radius: var(--r-md);
}
.quote-panel::before{
  content:"“"; position:absolute; top: clamp(6px,1vw,14px); left: clamp(18px,2.4vw,30px);
  font-family: var(--f-display); font-size: 5.2rem; line-height:1; color: var(--copper); opacity:.24;
}
.quote-panel blockquote{
  margin:0; padding:0; border:0; position:relative; z-index:1;
  font-family: var(--f-display); font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 24;
  font-size: clamp(1.16rem, 2vw, 1.56rem); line-height:1.48; letter-spacing:-.01em; color: var(--midnight);
}
.quote-panel cite{
  display:block; margin-top: 1.4rem; font: 500 .715rem/1.6 var(--f-mono);
  letter-spacing:.16em; text-transform:uppercase; color: var(--mineral); font-style:normal;
}
.quote-panel.on-dark{ background: rgba(255,255,255,.045); border-color: var(--line-dark); }
.quote-panel.on-dark blockquote{ color: var(--ivory-2); }
.quote-panel.on-dark cite{ color: rgba(178,197,208,.7); }
.quote-panel.on-dark::before{ color: var(--copper-2); opacity:.4; }

/* Definition rows */
.deflist{ border-top:1px solid var(--line); }
.deflist .row{
  display:grid; grid-template-columns: minmax(140px, 250px) 1fr; gap: clamp(14px,2.6vw,44px);
  padding: clamp(18px,2.2vw,26px) 0; border-bottom:1px solid var(--line); align-items:start;
}
.deflist .row dt{
  font: 500 .715rem/1.6 var(--f-mono); letter-spacing:.17em; text-transform:uppercase; color: var(--teal);
}
.deflist .row dd{ margin:0; font-size:.985rem; line-height:1.72; color: var(--ink-2); }
.deflist.on-dark{ border-top-color: var(--line-dark); }
.deflist.on-dark .row{ border-bottom-color: var(--line-dark); }
.deflist.on-dark .row dt{ color: var(--teal-glow); }
.deflist.on-dark .row dd{ color: rgba(224,233,239,.8); }
@media (max-width: 640px){
  .deflist .row{ grid-template-columns: 1fr; gap: 8px; }
}

/* Tag pills */
.pills{ display:flex; flex-wrap:wrap; gap:9px; list-style:none; }
.pills li{
  padding: 7px 14px; border:1px solid var(--line); border-radius: 100px;
  font: 500 .69rem/1.4 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color: var(--ink-3);
  background: var(--paper);
}
.on-dark .pills li{ border-color: var(--line-dark); color: rgba(210,224,232,.78); background: rgba(255,255,255,.04); }

/* --------------------------------------------------------------------------
   11. TIMELINE / MILESTONE RAIL
   -------------------------------------------------------------------------- */
.rail{ list-style:none; position:relative; }
.rail > li{
  position:relative; padding-left: clamp(30px, 4.5vw, 62px);
  padding-bottom: clamp(30px, 4vw, 50px);
}
.rail > li::before{
  content:""; position:absolute; left: 6px; top: 14px; bottom: -6px; width:1px;
  background: linear-gradient(to bottom, var(--line) 0%, var(--line) 88%, transparent 100%);
}
.rail > li:last-child{ padding-bottom:0; }
.rail > li:last-child::before{ display:none; }
.rail > li::after{
  content:""; position:absolute; left:0; top: 10px; width:13px; height:13px;
  border:1px solid var(--copper); background: var(--ivory-2); transform: rotate(45deg);
}
.rail .rail-year{
  display:block; font: 500 .74rem/1 var(--f-mono); letter-spacing:.18em; color: var(--copper); margin-bottom:.75rem;
}
.rail h3{ font-family: var(--f-display); font-size: clamp(1.14rem,1.8vw,1.42rem); line-height:1.26; margin:0 0 .55em; }
.rail p{ font-size:.965rem; }
.rail.on-dark > li::before{ background: linear-gradient(to bottom, var(--line-dark) 0%, var(--line-dark) 88%, transparent 100%); }
.rail.on-dark > li::after{ background: var(--midnight); border-color: var(--copper-2); }
.rail.on-dark .rail-year{ color: var(--copper-3); }

/* --------------------------------------------------------------------------
   12. HOMEPAGE HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  background: linear-gradient(152deg, #05121f 0%, #0b2236 42%, #0a2c35 78%, #0c3138 100%);
  color: rgba(236,243,247,.82);
  padding-block: clamp(46px, 6vw, 86px) clamp(46px, 6vw, 78px);
}
.hero::after{
  content:""; position:absolute; left:-15%; bottom:-30%; width:70vw; height:70vw; max-width:900px; max-height:900px;
  background: radial-gradient(circle, rgba(15,107,104,.34) 0%, rgba(15,107,104,0) 66%);
  pointer-events:none; z-index:0;
}
.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr);
  gap: clamp(30px, 4.5vw, 74px); align-items:center;
}
@media (max-width: 1000px){
  .hero-grid{ grid-template-columns: 1fr; gap: 40px; }
  .hero-portrait{ max-width: 420px; margin-inline:auto; }
}
.hero h1{
  font-family: var(--f-display); font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 60;
  font-size: clamp(2.65rem, 6.4vw, 5.3rem); line-height:.99; letter-spacing:-.028em;
  color: var(--ivory-2); margin: 0 0 1.5rem;
}
.hero h1 em{
  display:block; font-style:normal; color: var(--teal-glow);
  font-size: .43em; line-height:1.22; letter-spacing:-.01em; margin-top:.85rem;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 20;
}
.hero-tags{
  display:flex; flex-wrap:wrap; gap: 8px 10px; list-style:none; margin: 0 0 1.9rem;
}
.hero-tags li{
  font: 500 .655rem/1 var(--f-mono); letter-spacing:.15em; text-transform:uppercase;
  color: rgba(206,222,231,.82); padding: 8px 13px;
  border:1px solid rgba(255,255,255,.17); border-radius:100px; background: rgba(255,255,255,.035);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap: 14px; margin-top: clamp(26px,3.4vw,38px); }
.hero-portrait{ position:relative; }
.hero-portrait .frame{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
.hero-portrait .frame img{ background: #10263a; }
.hero-portrait-tag{
  position:absolute; left: -10px; bottom: 22px; z-index:3;
  background: var(--copper); color:#fff; padding: 11px 17px; border-radius:2px;
  font: 500 .655rem/1.35 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  box-shadow: 0 12px 30px rgba(4,14,24,.4); max-width: 78%;
}
@media (max-width: 560px){ .hero-portrait-tag{ left:0; bottom:12px; font-size:.6rem; padding:9px 13px; } }

.hero-ticker{
  position:relative; z-index:2; margin-top: clamp(38px, 5vw, 68px);
  padding-top: clamp(24px,3vw,32px); border-top:1px solid rgba(255,255,255,.14);
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(16px,2.6vw,34px);
}
@media (max-width: 860px){ .hero-ticker{ grid-template-columns: repeat(2,minmax(0,1fr)); gap:24px; } }
.hero-ticker .t-fig{
  display:block; font-family: var(--f-display); font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 40;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem); line-height:1; letter-spacing:-.025em; color: var(--ivory-2);
}
.hero-ticker .t-lab{ display:block; margin-top:.6rem; font:400 .78rem/1.55 var(--f-sans); color: rgba(197,215,226,.72); }

/* --------------------------------------------------------------------------
   13. SPECIALISED HOMEPAGE MODULES
   -------------------------------------------------------------------------- */
/* Asymmetric intro */
.intro-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(24px,3vw,50px);
  align-items:start;
}
@media (max-width: 980px){ .intro-grid{ grid-template-columns:1fr; } .intro-grid > *{ grid-column:auto !important; } }

/* Editorial split with sticky column */
.sticky-col{ position: sticky; top: calc(var(--head-h) + 34px); }
@media (max-width: 980px){ .sticky-col{ position:static; } }

/* Feature strip */
.strip{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(min(230px,100%),1fr));
  border-top:1px solid var(--line);
}
.strip > div{
  padding: clamp(24px,2.8vw,36px) clamp(18px,2vw,28px);
  border-bottom:1px solid var(--line); border-right:1px solid var(--line);
}
.strip > div:last-child{ border-right:0; }
.strip h4{ font-family: var(--f-display); font-size:1.14rem; line-height:1.25; margin:0 0 .55em; color: var(--midnight); }
.strip p{ font-size:.925rem; line-height:1.7; margin:0; }
.strip.on-dark{ border-top-color: var(--line-dark); }
.strip.on-dark > div{ border-bottom-color: var(--line-dark); border-right-color: var(--line-dark); }
.strip.on-dark h4{ color: var(--ivory-2); }
.strip.on-dark p{ color: rgba(220,231,238,.74); }
@media (max-width: 700px){ .strip > div{ border-right:0; } }

/* Principle blocks — typography led */
.principles{ display:grid; gap: 0; border-top:1px solid var(--line-dark); }
.principle{
  display:grid; grid-template-columns: 64px minmax(0,1fr) minmax(0,1.35fr);
  gap: clamp(16px,3vw,44px); align-items:baseline;
  padding: clamp(26px,3.4vw,42px) 0; border-bottom:1px solid var(--line-dark);
  transition: background .4s var(--ease);
}
.principle:hover{ background: rgba(255,255,255,.028); }
.principle .p-num{ font:500 .74rem/1.6 var(--f-mono); letter-spacing:.16em; color: var(--copper-2); }
.principle h3{
  font-family: var(--f-display); font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 30;
  font-size: clamp(1.35rem, 2.5vw, 2rem); line-height:1.16; letter-spacing:-.018em; color: var(--ivory-2); margin:0;
}
.principle p{ font-size:.985rem; line-height:1.75; color: rgba(220,232,239,.74); margin:0; }
@media (max-width: 860px){
  .principle{ grid-template-columns: 1fr; gap: 14px; }
  .principle .p-num{ order:-1; }
}

/* Insight cards */
.insight-card{
  display:flex; flex-direction:column; height:100%;
  background: var(--paper); border:1px solid var(--line-2); border-radius: var(--r-md); overflow:hidden;
  transition: transform .42s var(--ease), box-shadow .42s var(--ease), border-color .42s var(--ease);
}
.insight-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: var(--mineral-3); }
.insight-card .ic-media{ background: var(--ivory-3); padding: 12px 12px 0; }
.insight-card .ic-media img{ width:100%; height:auto; border-radius:3px; }
.insight-card .ic-body{ padding: clamp(20px,2.2vw,28px); display:flex; flex-direction:column; flex:1; }
.insight-card .ic-kicker{ font:500 .665rem/1.5 var(--f-mono); letter-spacing:.17em; text-transform:uppercase; color: var(--teal); margin-bottom:.9rem; }
.insight-card h3{ font-family: var(--f-display); font-size: clamp(1.1rem,1.6vw,1.3rem); line-height:1.28; margin:0 0 .65em; letter-spacing:-.008em; }
.insight-card p{ font-size:.93rem; line-height:1.7; margin:0 0 1.4rem; }
.insight-card .link-arrow{ margin-top:auto; align-self:flex-start; }

/* Gallery grid */
.gal-grid{ display:grid; gap: clamp(12px, 1.6vw, 22px); grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){ .gal-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 520px){ .gal-grid{ grid-template-columns: 1fr; } }
.gal-item{
  position:relative; display:block; background: var(--ivory); border:1px solid var(--line);
  border-radius: var(--r-md); padding: 10px; cursor: zoom-in; overflow:hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.gal-item img{ width:100%; height:auto; border-radius:3px; transition: transform .6s var(--ease); }
.gal-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-1); border-color: var(--copper-2); }
.gal-item:hover img{ transform: scale(1.022); }
.gal-item figcaption{
  margin: 12px 4px 4px; font: 400 .755rem/1.55 var(--f-mono); letter-spacing:.04em; color: var(--mineral);
}
.gal-item.on-dark{ background: rgba(255,255,255,.05); border-color: var(--line-dark); }
.gal-item.on-dark figcaption{ color: rgba(190,206,216,.66); }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:1500; display:none;
  background: rgba(4,13,22,.955);
  padding: clamp(16px,4vw,48px);
  align-items:center; justify-content:center;
}
.lightbox.is-open{ display:flex; }
.lightbox-fig{ margin:0; max-width: min(1100px, 100%); max-height:100%; display:flex; flex-direction:column; align-items:center; }
.lightbox-fig img{
  max-width:100%; max-height: calc(100vh - 170px); width:auto; height:auto; object-fit: contain;
  border-radius: 3px; background:#0e2438;
}
.lightbox-fig figcaption{ color: rgba(214,228,236,.82); text-align:center; margin-top:16px; max-width:70ch; }
.lightbox-close, .lightbox-nav button{
  position:absolute; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  color:#fff; width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; transition: background .3s var(--ease), border-color .3s;
}
.lightbox-close:hover, .lightbox-nav button:hover{ background: var(--copper); border-color: var(--copper); }
.lightbox-close{ top: clamp(12px,2.5vw,26px); right: clamp(12px,2.5vw,26px); font-size:1.3rem; line-height:1; }
.lightbox-nav .lb-prev{ left: clamp(8px,2vw,26px); top:50%; transform: translateY(-50%); }
.lightbox-nav .lb-next{ right: clamp(8px,2vw,26px); top:50%; transform: translateY(-50%); }
.lightbox-count{
  position:absolute; bottom: clamp(12px,2.5vw,26px); left:50%; transform: translateX(-50%);
  font: 500 .72rem/1 var(--f-mono); letter-spacing:.16em; color: rgba(200,216,226,.7);
}

/* CTA band */
.cta-band{
  position:relative; overflow:hidden;
  background: linear-gradient(140deg, #071a29 0%, #0d3b45 55%, #0f4a4a 100%);
  color: rgba(236,243,247,.84);
  padding-block: clamp(56px, 8vw, 108px);
}
.cta-band::after{
  content:""; position:absolute; right:-10%; top:-40%; width:60vw; height:60vw; max-width:760px; max-height:760px;
  background: radial-gradient(circle, rgba(185,111,57,.26) 0%, rgba(185,111,57,0) 68%); pointer-events:none;
}
.cta-band .wrap{ position:relative; z-index:2; }

/* --------------------------------------------------------------------------
   14. TABLES & DATA
   -------------------------------------------------------------------------- */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
table.data{ width:100%; border-collapse:collapse; min-width: 560px; }
table.data caption{
  text-align:left; padding: 16px 20px; font:500 .7rem/1.5 var(--f-mono);
  letter-spacing:.17em; text-transform:uppercase; color: var(--teal); border-bottom:1px solid var(--line);
}
table.data th, table.data td{ padding: 14px 20px; text-align:left; border-bottom:1px solid var(--line-2); font-size:.93rem; line-height:1.6; }
table.data thead th{
  font:500 .68rem/1.5 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  color: var(--mineral); background: var(--ivory-2); border-bottom:1px solid var(--line);
}
table.data tbody tr:last-child td{ border-bottom:0; }
table.data tbody tr:hover{ background: var(--ivory-2); }
table.data td strong{ color: var(--midnight); font-weight:600; }

/* Bar meter */
.meters{ list-style:none; }
.meters li{ padding: 15px 0; border-bottom:1px solid var(--line); }
.meters li:last-child{ border-bottom:0; }
.meters .m-top{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:9px; }
.meters .m-name{ font-size:.94rem; color: var(--ink-2); }
.meters .m-val{ font: 500 .82rem/1 var(--f-mono); letter-spacing:.06em; color: var(--teal); }
.meters .m-bar{ height:5px; background: var(--line-2); border-radius:100px; overflow:hidden; }
.meters .m-fill{ display:block; height:100%; background: linear-gradient(90deg, var(--teal) 0%, var(--teal-3) 100%); border-radius:100px; }
.meters.on-dark li{ border-bottom-color: var(--line-dark); }
.meters.on-dark .m-name{ color: rgba(220,232,239,.82); }
.meters.on-dark .m-val{ color: var(--teal-glow); }
.meters.on-dark .m-bar{ background: rgba(255,255,255,.11); }
.meters.on-dark .m-fill{ background: linear-gradient(90deg, var(--teal-3) 0%, var(--copper-2) 100%); }

/* --------------------------------------------------------------------------
   15. FORMS
   -------------------------------------------------------------------------- */
.field{ display:block; margin-bottom: 20px; }
.field label{
  display:block; margin-bottom:8px;
  font:500 .69rem/1.5 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color: var(--ink-3);
}
.field input, .field textarea, .field select{
  width:100%; padding: 14px 16px; font: 400 .97rem/1.5 var(--f-sans); color: var(--ink);
  background: var(--paper); border:1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.field textarea{ min-height: 148px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,107,104,.13);
}
.field .hint{ display:block; margin-top:7px; font-size:.8rem; color: var(--mineral); }
.form-note{
  margin-top: 16px; padding: 14px 16px; border-left:2px solid var(--copper);
  background: var(--ivory); font-size:.875rem; line-height:1.7; color: var(--ink-3);
}
.form-status{ margin-top:16px; font-size:.9rem; }
.form-status[data-state="ok"]{ color: var(--teal); }
.form-status[data-state="err"]{ color: #a8442c; }

/* Contact tiles */
.contact-tile{
  display:flex; gap: 18px; align-items:flex-start;
  padding: clamp(20px,2.4vw,28px); background: var(--paper);
  border:1px solid var(--line-2); border-radius: var(--r-md);
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.contact-tile:hover{ border-color: var(--copper-2); transform: translateY(-3px); box-shadow: var(--shadow-1); }
.contact-tile .ct-ico{
  flex:none; width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:3px; color: var(--teal); background: var(--ivory-2);
}
.contact-tile .ct-lab{ font:500 .665rem/1.5 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color: var(--mineral); }
.contact-tile .ct-val{ display:block; margin-top:5px; font-size:1.04rem; line-height:1.5; color: var(--midnight); font-weight:500; word-break: break-word; }
a.contact-tile:hover .ct-val{ color: var(--copper); }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.site-foot{
  background: linear-gradient(178deg, #061523 0%, #08192a 100%);
  color: rgba(206,221,230,.72);
  padding-block: clamp(52px, 6.5vw, 84px) 0;
  position:relative;
}
.foot-top{
  display:grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);
  gap: clamp(30px, 3.6vw, 56px);
  padding-bottom: clamp(36px,4.5vw,52px); border-bottom:1px solid rgba(255,255,255,.11);
}
@media (max-width: 1040px){ .foot-top{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px){ .foot-top{ grid-template-columns: 1fr; gap:34px; } }

.foot-brand .f-name{
  font-family: var(--f-display); font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 40;
  font-size: clamp(1.6rem,2.6vw,2.05rem); line-height:1.1; letter-spacing:-.015em; color: var(--ivory-2); margin:0 0 .7rem;
}
.foot-brand .f-role{
  font:500 .665rem/1.7 var(--f-mono); letter-spacing:.17em; text-transform:uppercase; color: var(--copper-3); margin:0 0 1.2rem;
}
.foot-brand p{ font-size:.9rem; line-height:1.75; color: rgba(196,213,223,.7); max-width: 40ch; }

.foot-col h4{
  font:500 .665rem/1.5 var(--f-mono); letter-spacing:.19em; text-transform:uppercase;
  color: rgba(255,255,255,.5); margin:0 0 1.15rem;
}
.foot-col ul{ list-style:none; }
.foot-col li{ margin-bottom:.62rem; }
.foot-col a{ font-size:.9rem; color: rgba(206,221,230,.78); transition: color .25s var(--ease), padding-left .25s var(--ease); }
.foot-col a:hover{ color: var(--copper-3); padding-left:5px; }

.foot-contact .fc-item{ margin-bottom: 1.05rem; }
.foot-contact .fc-lab{ display:block; font:500 .625rem/1.5 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.44); margin-bottom:4px; }
.foot-contact .fc-val{ font-size:.965rem; color: var(--ivory-2); line-height:1.55; word-break:break-word; }
.foot-contact a.fc-val:hover{ color: var(--copper-3); }

.socials{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin-top: 1.4rem; }
.socials a{
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.20); border-radius:50%; color: rgba(219,231,239,.85);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.socials a:hover{ background: var(--copper); border-color: var(--copper); color:#fff; transform: translateY(-3px); }
.socials svg{ width:16px; height:16px; fill: currentColor; }

.foot-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 14px 26px;
  padding-block: 24px 30px;
}
.foot-bottom p{ margin:0; font-size:.82rem; line-height:1.7; color: rgba(190,208,219,.66); }
.foot-bottom a{ color: rgba(214,229,238,.85); }
.foot-bottom a:hover{ color: var(--copper-3); }
.foot-credit strong{ font-weight:500; color: var(--ivory-2); }

.foot-disclaimer{
  padding: 18px 0 30px; border-top:1px solid rgba(255,255,255,.08);
  font-size:.775rem; line-height:1.75; color: rgba(174,194,207,.56); max-width: 100ch;
}

/* --------------------------------------------------------------------------
   17. REVEAL ANIMATION
   -------------------------------------------------------------------------- */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.09s; }
.reveal[data-d="2"]{ transition-delay:.18s; }
.reveal[data-d="3"]{ transition-delay:.27s; }
.reveal[data-d="4"]{ transition-delay:.36s; }

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

/* --------------------------------------------------------------------------
   18. PASSCODE GATE (index.html)
   -------------------------------------------------------------------------- */
body.gate{
  padding-top:0; min-height:100svh; display:grid; place-items:center;
  background: radial-gradient(ellipse 120% 90% at 50% 0%, #10334a 0%, #08192a 48%, #050f1a 100%);
  color: rgba(232,240,245,.8);
}
.gate-card{
  width: min(430px, calc(100vw - 40px));
  padding: clamp(30px, 5vw, 46px);
  background: rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 90px rgba(2,9,17,.6);
}
.gate-mark{
  width:52px; height:52px; margin: 0 auto 26px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.26); border-radius:3px; position:relative;
}
.gate-mark::after{
  content:""; position:absolute; right:-1px; bottom:-1px; width:12px; height:12px;
  border-right:1px solid var(--copper-2); border-bottom:1px solid var(--copper-2);
}
.gate-mark svg{ width:20px; height:20px; stroke: var(--copper-2); }
.gate-title{
  text-align:center; font:500 .705rem/1.6 var(--f-mono); letter-spacing:.28em; text-transform:uppercase;
  color: rgba(206,222,232,.78); margin: 0 0 28px;
}
.gate-field{ position:relative; }
.gate-field input{
  width:100%; padding: 16px 52px 16px 18px;
  font: 400 1.02rem/1.4 var(--f-mono); letter-spacing:.16em; color: var(--ivory-2);
  background: rgba(3,12,21,.45); border:1px solid rgba(255,255,255,.2); border-radius:4px;
  transition: border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.gate-field input::placeholder{ color: rgba(178,198,211,.4); letter-spacing:.2em; }
.gate-field input:focus{ outline:none; border-color: var(--teal-3); box-shadow: 0 0 0 3px rgba(47,154,148,.18); }
.gate-reveal{
  position:absolute; right:8px; top:50%; transform: translateY(-50%);
  width:38px; height:38px; display:grid; place-items:center;
  background:none; border:0; color: rgba(190,210,222,.6); cursor:pointer; border-radius:3px;
}
.gate-reveal:hover{ color: var(--copper-2); }
.gate-btn{
  width:100%; margin-top: 16px; padding: 16px 20px; cursor:pointer;
  background: var(--copper); color:#fff; border:1px solid var(--copper); border-radius:4px;
  font:500 .74rem/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.gate-btn:hover{ background: #a5622f; border-color:#a5622f; transform: translateY(-2px); }
.gate-msg{
  min-height: 22px; margin-top: 16px; text-align:center;
  font:400 .78rem/1.5 var(--f-mono); letter-spacing:.09em; color: rgba(200,218,229,.55);
}
.gate-msg[data-state="err"]{ color: #e2856a; }
.gate-msg[data-state="ok"]{ color: var(--teal-glow); }
.gate-card.shake{ animation: gshake .45s var(--ease); }
@keyframes gshake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-9px); } 40%{ transform: translateX(8px); }
  60%{ transform: translateX(-5px); } 80%{ transform: translateX(4px); }
}

/* --------------------------------------------------------------------------
   19. UTILITIES
   -------------------------------------------------------------------------- */
.mt-0{ margin-top:0 !important; }
.mt-s{ margin-top: clamp(16px,2vw,24px); }
.mt-m{ margin-top: clamp(26px,3.4vw,42px); }
.mt-l{ margin-top: clamp(38px,5vw,64px); }
.mb-m{ margin-bottom: clamp(26px,3.4vw,42px); }
.mb-l{ margin-bottom: clamp(38px,5vw,64px); }
.maxw-60{ max-width: 60ch; }
.maxw-52{ max-width: 52ch; }
.maxw-70{ max-width: 70ch; }
.center .maxw-60, .center .maxw-70{ margin-inline:auto; }
.nowrap{ white-space:nowrap; }
.rel{ position:relative; z-index:2; }

.section-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap: 22px 40px; margin-bottom: clamp(30px,4vw,54px); }
.section-head .sh-copy{ max-width: 62ch; }
.section-head .sh-aside{ flex:none; }

/* Print */
@media print{
  .site-head,.drawer,.lightbox,.btn,.head-cta,.burger{ display:none !important; }
  body{ padding-top:0; background:#fff; color:#000; }
  .hero,.page-hero,.cta-band,.bg-midnight,.bg-midnight-2,.bg-teal-deep,.site-foot{ background:#fff !important; color:#000 !important; }
  .on-dark, .on-dark *{ color:#000 !important; }
}

/* --------------------------------------------------------------------------
   20. ADDENDA — filters, hidden state, misc
   -------------------------------------------------------------------------- */
[hidden]{ display:none !important; }

.bg-ivory-2{ background: var(--ivory-2); }

.filter-bar{
  display:flex; flex-wrap:wrap; gap:10px;
  padding-bottom: clamp(6px,1vw,10px);
}
.filter-btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding: 11px 18px; cursor:pointer;
  background: var(--paper); color: var(--ink-2);
  border:1px solid var(--line); border-radius:100px;
  font: 500 .7rem/1 var(--f-mono); letter-spacing:.13em; text-transform:uppercase;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.filter-btn .num{ font-size:.68rem; opacity:.55; }
.filter-btn:hover{ border-color: var(--copper-2); color: var(--midnight); transform: translateY(-2px); }
.filter-btn.is-on{
  background: var(--midnight); border-color: var(--midnight); color: var(--ivory-2);
}
.filter-btn.is-on .num{ opacity:.7; color: var(--copper-3); }

/* Anchored essay targets clear the fixed header */
[id]{ scroll-margin-top: calc(var(--head-h) + 24px); }

/* Insight cards used as full-card links keep body text colour */
a.insight-card, a.insight-card:hover{ color: var(--ink-2); }
a.insight-card h3{ color: var(--midnight); transition: color .3s var(--ease); }
a.insight-card:hover h3{ color: var(--teal); }

/* Contact tiles used as links keep neutral colour */
a.contact-tile, a.contact-tile:hover{ color: var(--ink-2); }

/* Definition-list rows used as list items */
ol.deflist, ul.deflist{ list-style:none; }
li.row{ list-style:none; }

/* Long words / URLs never overflow their container */
p, li, dd, dt, h1, h2, h3, h4, figcaption, blockquote, td, th{ overflow-wrap: break-word; }

/* Guarantee no element forces horizontal scroll */
img, svg, video, table, pre{ max-width:100%; }

/* --------------------------------------------------------------------------
   21. MASONRY GALLERY + EQUALISED CARD MEDIA
   -------------------------------------------------------------------------- */
/* Mixed-aspect photographs sit in a column flow so every image keeps its
   natural proportions — nothing is cropped, and no ragged row gaps appear. */
.gal-masonry{
  columns: 3;
  column-gap: clamp(12px, 1.6vw, 22px);
}
@media (max-width: 900px){ .gal-masonry{ columns: 2; } }
@media (max-width: 520px){ .gal-masonry{ columns: 1; } }
.gal-masonry > .gal-item{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  width: 100%;
  margin: 0 0 clamp(12px, 1.6vw, 22px);
}

/* Insight card media: fixed frame, image contained and centred, never cropped */
.insight-card .ic-media{
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  padding: 12px;
  overflow: hidden;
}
.insight-card .ic-media img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@supports not (aspect-ratio: 16 / 9){
  .insight-card .ic-media{ height: 220px; }
}

/* --------------------------------------------------------------------------
   22. TYPOGRAPHIC SAFETY — long words in narrow columns
   -------------------------------------------------------------------------- */
/* Display headings hyphenate at proper break points before they are ever
   split mid-word by the overflow-wrap fallback. */
.d1, .d2, .d3, .d4,
h1, h2, h3, h4,
.serif-lede, .stat-fig{
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Numerals and short labels must never hyphenate */
.num, .mono-label, .eyebrow, .btn, .link-arrow, .nav-link, .filter-btn{
  hyphens: none;
  -webkit-hyphens: none;
}

/* --------------------------------------------------------------------------
   23. RESPONSIVE COLLAPSE FOR INLINE-TEMPLATED GRIDS
   Editorial sections declare their own column ratios inline. Below the
   tablet breakpoint every one of them must become a single column, or the
   columns get too narrow for display type and long words break badly.
   -------------------------------------------------------------------------- */
@media (max-width: 980px){
  .grid[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }
  .grid[style*="grid-template-columns"] > *{
    grid-column: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .sticky-col{ position: static !important; }
  /* image blocks that were capped for a side column go full width */
  .frame-offset[style*="max-width"]{ max-width: 100% !important; }
}

/* Narrow phones: pull the largest display sizes back a step */
@media (max-width: 480px){
  .d1{ font-size: clamp(2.1rem, 10vw, 2.9rem); }
  .d2{ font-size: clamp(1.75rem, 8vw, 2.3rem); }
  .d3{ font-size: clamp(1.35rem, 6vw, 1.75rem); }
  .hero h1{ font-size: clamp(2.3rem, 12vw, 3.2rem); }
  .serif-lede{ font-size: clamp(1.1rem, 5vw, 1.35rem); }
  .quote-panel blockquote{ font-size: clamp(1.05rem, 4.8vw, 1.25rem); }
  .stat .stat-fig{ font-size: clamp(1.9rem, 9vw, 2.5rem); }
  .hero-ticker .t-fig{ font-size: clamp(1.5rem, 7.5vw, 2rem); }
  .foot-brand .f-name{ font-size: clamp(1.5rem, 8vw, 1.9rem); }
  .btn{ padding: 14px 22px; font-size: .72rem; letter-spacing: .1em; }
  .hero-actions .btn{ width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   24. CONTRAST CORRECTION — prose headings on dark grounds
   `.prose h3/h4` set an ink colour later in the cascade than the generic
   `.on-dark h3` rule, which left sub-headings dark-on-dark inside dark
   editorial sections. These selectors restore the intended contrast.
   -------------------------------------------------------------------------- */
.prose.on-dark h2, .prose.on-dark h3, .prose.on-dark h4,
.on-dark .prose h2, .on-dark .prose h3, .on-dark .prose h4{
  color: var(--ivory-2);
}
.prose.on-dark blockquote, .on-dark .prose blockquote{
  color: var(--ivory);
  border-left-color: var(--copper-2);
}
.prose.on-dark blockquote cite, .on-dark .prose blockquote cite{
  color: rgba(190,208,219,.7);
}
.prose.on-dark strong, .on-dark .prose strong{ color: var(--ivory-2); }
.prose.on-dark em, .on-dark .prose em{ color: var(--ivory); }
.prose.on-dark a, .on-dark .prose a{ color: var(--teal-glow); }
.prose.on-dark a:hover, .on-dark .prose a:hover{ color: var(--copper-3); }

/* Same class-order hazard for the rail and card bodies */
.rail.on-dark h3, .on-dark .rail h3{ color: var(--ivory-2); }
.rail.on-dark p, .on-dark .rail p{ color: rgba(224,233,239,.78); }

/* --------------------------------------------------------------------------
   25. SMALL-TEXT CONTRAST CORRECTIONS (WCAG AA)
   -------------------------------------------------------------------------- */
.stat .stat-src{ color: #66737e; }                 /* 4.8:1 on ivory */
.gal-item figcaption{ color: #5c6b77; }
.filter-btn{ color: #4a5a66; }
.skip-link{ background: var(--midnight); }         /* white on midnight */
table.data thead th{ color: #5c6b77; }
.field .hint{ color: #5c6b77; }

/* --------------------------------------------------------------------------
   26. SMALL-TEXT CONTRAST CORRECTIONS ON DARK GROUNDS (WCAG AA)
   -------------------------------------------------------------------------- */
.on-dark figcaption,
.frame-dark + figcaption,
.gal-item.on-dark figcaption{ color: rgba(216,228,236,.88); }

.on-dark .stat .stat-src{ color: rgba(200,216,226,.88); }
.card-dark .card-index{ color: var(--copper-3); }
.on-dark .mono-label{ color: rgba(206,220,229,.82); }

.hero-meta dt{ color: rgba(200,216,226,.88); }
.crumbs{ color: rgba(200,216,226,.80); }
.crumbs a{ color: rgba(214,228,236,.92); }
.crumbs span[aria-hidden]{ color: rgba(200,216,226,.58); }

.foot-contact .fc-lab{ color: rgba(255,255,255,.66); }
.foot-col h4{ color: rgba(255,255,255,.68); }
.foot-disclaimer{ color: rgba(200,216,226,.80); }
.foot-bottom p{ color: rgba(208,222,231,.86); }
.foot-brand p{ color: rgba(208,222,231,.84); }
.foot-col a{ color: rgba(216,229,237,.90); }
.socials a{ color: rgba(228,238,244,.92); }

.quote-panel.on-dark cite,
.prose.on-dark blockquote cite,
.on-dark .prose blockquote cite{ color: rgba(206,220,229,.84); }
.on-dark .small{ color: rgba(214,228,236,.84); }
.subnav a small{ color: rgba(186,203,214,.80); }
.drawer-meta{ color: rgba(214,228,236,.86); }
.nav-link{ color: rgba(226,235,241,.92); }
.brand-role{ color: rgba(206,222,232,.86); }
.hero-tags li{ color: rgba(220,232,239,.92); }
.lightbox-count{ color: rgba(214,228,236,.86); }

/* Final small-text corrections on the deeper ivory ground */
.stat .stat-src{ color: var(--mineral); }
.bg-ivory-deep .mono-label,
.bg-ivory .mono-label,
.bg-paper .mono-label{ color: var(--mineral); }
.chapter-figure{ color: #808b94 !important; }   /* decorative chapter numeral, AA-large */