/* ============================================================
   Salwa Idrissi Akhannouch — Official Site
   Design system: "Aubergine & Champagne"
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Core palette */
  --ink:        #200E1A;   /* deepest aubergine-black */
  --aubergine:  #35172B;
  --plum:       #55284A;
  --plum-soft:  #6E3A60;
  --mauve:      #9A7A92;

  --gold:       #A9834E;   /* antique gold — decoration & dark grounds */
  --gold-ink:   #7F5E30;   /* same family, AA-safe as text on light grounds */
  --gold-warm:  #C39B62;
  --gold-lt:    #DFC08A;
  --champagne:  #EFE1C9;

  --ivory:      #FCF9F5;
  --shell:      #F5EFE7;
  --stone:      #E7DED2;
  --stone-dk:   #CFC2B2;
  --charcoal:   #1B1719;
  --charcoal-2: #2A2427;

  /* Semantic */
  --bg:         var(--ivory);
  --text:       #2E2429;
  --text-soft:  #5F5158;
  --text-faint: #6F6169;
  --line:       rgba(46,36,41,.14);
  --line-soft:  rgba(46,36,41,.08);

  --on-dark:        #F6EFE6;
  --on-dark-soft:   #D5C4CE;
  --on-dark-faint:  #A98FA1;
  --line-dark:      rgba(239,225,201,.20);
  --line-dark-soft: rgba(239,225,201,.10);

  /* Type */
  --f-display: 'Bodoni Moda', 'Didot', 'Times New Roman', Georgia, serif;
  --f-ui:      'Jost', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Karla', 'Helvetica Neue', Arial, sans-serif;

  /* Metrics */
  --shell-max: 1320px;
  --shell-pad: clamp(20px, 5vw, 76px);
  --gut:       clamp(24px, 3.4vw, 54px);
  --sec-y:     clamp(64px, 9vw, 140px);
  --radius:    2px;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:clamp(16.5px,.42vw + 15.4px,18px);
  line-height:1.82;
  font-weight:400;
  letter-spacing:.002em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.012em;
  margin:0 0 .5em;
  color:var(--ink);
  text-wrap:balance;
}
h1{ font-size:clamp(2.5rem,6.2vw,5.1rem); line-height:1.02; }
h2{ font-size:clamp(2rem,4vw,3.5rem); line-height:1.06; }
h3{ font-size:clamp(1.45rem,2.3vw,2.15rem); line-height:1.16; }
h4{ font-size:clamp(1.15rem,1.35vw,1.4rem); line-height:1.28; letter-spacing:0; }
h5{ font-size:1.05rem; line-height:1.35; }
p{ margin:0 0 1.25em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--plum); color:var(--champagne); }

/* Focus visibility */
:focus-visible{
  outline:2px solid var(--gold-warm);
  outline-offset:3px;
  border-radius:1px;
}
.on-dark :focus-visible, .site-foot :focus-visible, .nav-sheet :focus-visible{
  outline-color:var(--gold-lt);
}

/* Skip link */
.skip{
  position:absolute; left:12px; top:-70px; z-index:2000;
  background:var(--ink); color:var(--champagne);
  padding:12px 20px; font-family:var(--f-ui); font-size:.85rem;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  transition:top .25s var(--ease);
}
.skip:focus{ top:12px; }

/* Gate: hide until authorised */
html.gate-pending body{ visibility:hidden; }

/* ---------- 3. Layout primitives ---------- */
.shell{
  width:100%;
  max-width:var(--shell-max);
  margin-inline:auto;
  padding-inline:var(--shell-pad);
}
.shell--wide{ max-width:1560px; }
.shell--narrow{ max-width:900px; }

.sec{ padding-block:var(--sec-y); position:relative; }
.sec--tight{ padding-block:clamp(46px,6vw,92px); }
.sec--flush-t{ padding-top:0; }
.sec--flush-b{ padding-bottom:0; }

.on-dark{ background:var(--ink); color:var(--on-dark-soft); }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark h5{ color:var(--champagne); }
.on-dark .lede{ color:var(--on-dark); }
.on-plum{ background:var(--aubergine); color:var(--on-dark-soft); }
.on-plum h1,.on-plum h2,.on-plum h3,.on-plum h4{ color:var(--champagne); }
.on-shell{ background:var(--shell); }
.on-stone{ background:var(--stone); }

/* ---------- 4. Editorial atoms ---------- */
.eyebrow{
  font-family:var(--f-ui);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-ink);
  margin:0 0 1.4em;
  display:flex; align-items:center; gap:.9em;
  line-height:1.5;
}
.eyebrow::before{
  content:""; width:clamp(24px,3vw,52px); height:1px;
  background:currentColor; opacity:.62; flex:none;
}
.eyebrow--plain::before{ display:none; }
.eyebrow--c{ justify-content:center; }
.on-dark .eyebrow,.on-plum .eyebrow{ color:var(--gold-lt); }

.lede{
  font-size:clamp(1.12rem,1.35vw,1.42rem);
  line-height:1.66;
  color:var(--text);
  font-weight:400;
  letter-spacing:-.004em;
}
.muted{ color:var(--text-soft); }
.on-dark .muted{ color:var(--on-dark-faint); }

.drop::first-letter{
  font-family:var(--f-display);
  float:left;
  font-size:4.15em;
  line-height:.78;
  padding:.06em .12em 0 0;
  color:var(--plum);
  font-weight:600;
}
.on-dark .drop::first-letter{ color:var(--gold-lt); }

.rule{ height:1px; background:var(--line); border:0; margin:0; }
.on-dark .rule{ background:var(--line-dark); }
.rule--gold{ height:1px; width:74px; background:var(--gold); border:0; margin:0 0 2rem; }

.qmark{
  font-family:var(--f-display);
  font-size:clamp(1.3rem,2.1vw,1.85rem);
  line-height:1.5;
  font-style:italic;
  letter-spacing:-.01em;
  color:var(--ink);
}
.on-dark .qmark{ color:var(--champagne); }
.attrib{
  font-family:var(--f-ui);
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-faint); margin-top:1.4em; line-height:1.7;
}
.on-dark .attrib{ color:var(--on-dark-faint); }

.num{
  font-family:var(--f-display);
  font-size:clamp(2.3rem,4vw,3.5rem);
  font-weight:600; line-height:1; color:var(--plum);
  letter-spacing:-.03em;
}
.on-dark .num,.on-plum .num{ color:var(--gold-lt); }
.num-label{
  font-family:var(--f-ui); font-size:.79rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-soft); margin-top:.85em; line-height:1.65;
}
.on-dark .num-label{ color:var(--on-dark-faint); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.85em;
  font-family:var(--f-ui); font-size:.82rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  padding:1.05em 2.1em; border:1px solid var(--ink);
  background:var(--ink); color:var(--champagne);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  cursor:pointer; line-height:1.2; border-radius:var(--radius);
}
.btn:hover{ background:var(--plum); border-color:var(--plum); color:#fff; }
.btn .ar{ transition:transform .35s var(--ease); }
.btn:hover .ar{ transform:translateX(5px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--ink); color:var(--champagne); border-color:var(--ink); }
.on-dark .btn, .on-plum .btn{ background:var(--gold-lt); border-color:var(--gold-lt); color:var(--ink); }
.on-dark .btn:hover, .on-plum .btn:hover{ background:var(--champagne); border-color:var(--champagne); color:var(--ink); }
.on-dark .btn--ghost,.on-plum .btn--ghost{ background:transparent; color:var(--champagne); border-color:var(--line-dark); }
.on-dark .btn--ghost:hover,.on-plum .btn--ghost:hover{ background:var(--champagne); color:var(--ink); border-color:var(--champagne); }

.tlink{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--f-ui); font-size:.82rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  color:var(--plum); padding-bottom:.4em;
  border-bottom:1px solid rgba(85,40,74,.3);
  transition:color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.tlink:hover{ color:var(--ink); border-color:var(--gold); gap:1.05em; }
.on-dark .tlink{ color:var(--gold-lt); border-color:rgba(223,192,138,.34); }
.on-dark .tlink:hover{ color:var(--champagne); border-color:var(--champagne); }

/* ---------- 5. Image frames (never crop the subject) ---------- */
.frame{
  position:relative;
  overflow:hidden;
  background:var(--aubergine);
  border-radius:var(--radius);
  isolation:isolate;
}
.frame__bg{
  position:absolute; inset:-10%;
  background-size:cover; background-position:center;
  filter:blur(46px) saturate(.6) brightness(.52);
  transform:scale(1.18); z-index:0;
  pointer-events:none;
}
.frame > img{
  position:relative; z-index:1;
  width:100%; height:auto; display:block;
}
/* Fixed-ratio variant: the whole image is always contained, never cropped */
.frame--ratio{ display:grid; place-items:center; }
.frame--ratio > img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
}
.r-4x5{ aspect-ratio:4/5; }
.r-3x4{ aspect-ratio:3/4; }
.r-1x1{ aspect-ratio:1/1; }
.r-4x3{ aspect-ratio:4/3; }
.r-3x2{ aspect-ratio:3/2; }
.r-16x9{ aspect-ratio:16/9; }
.r-21x9{ aspect-ratio:21/9; }

.frame--edge{ border:1px solid var(--line); }
.on-dark .frame--edge{ border-color:var(--line-dark); }
.frame--gold::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border:1px solid rgba(223,192,138,.28);
}

figure{ margin:0; }
.cap{
  font-family:var(--f-ui); font-size:.79rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--text-faint);
  margin-top:1.05em; line-height:1.7;
}
.on-dark .cap{ color:var(--on-dark-faint); }

/* ---------- 6. Header ---------- */
.site-head{
  position:sticky; top:0; z-index:900;
  background:var(--ivory);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .35s var(--ease), background .35s var(--ease);
}
.site-head.is-stuck{ box-shadow:0 10px 34px -22px rgba(32,14,26,.5); }
.head-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(14px,2vw,34px);
  min-height:clamp(70px,7.4vw,92px);
}
.brand{
  display:flex; align-items:center; gap:.8rem;
  text-decoration:none; flex:1 1 auto; min-width:0; line-height:1;
}
.brand__mark{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border:1px solid var(--gold); color:var(--plum);
  font-family:var(--f-display); font-size:.9rem; font-weight:600;
  letter-spacing:.02em; border-radius:50%;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.brand:hover .brand__mark{ background:var(--plum); color:var(--champagne); border-color:var(--plum); }
.brand__txt{ display:flex; flex-direction:column; gap:.28rem; min-width:0; }
.brand__name{
  font-family:var(--f-display); font-size:clamp(.98rem,1.1vw,1.16rem);
  font-weight:600; color:var(--ink); letter-spacing:.012em; line-height:1;
}
.brand__sub{
  font-family:var(--f-ui); font-size:.73rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold-ink); line-height:1;
}

/* Desktop nav */
.nav{ display:none; }
@media (min-width:1120px){ .nav{ display:block; } }
.nav__list{ display:flex; align-items:center; gap:clamp(4px,1.1vw,16px); list-style:none; margin:0; padding:0; }
.nav__item{ position:relative; }
.nav__link{
  display:inline-flex; align-items:center; gap:.42em;
  font-family:var(--f-ui); font-size:.79rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--text); padding:.85rem .62rem; line-height:1.2;
  position:relative; white-space:nowrap;
  transition:color .3s var(--ease);
  background:none; border:0; cursor:pointer;
}
.nav__link::after{
  content:""; position:absolute; left:.62rem; right:.62rem; bottom:.42rem;
  height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .38s var(--ease);
}
.nav__link:hover,.nav__link[aria-expanded="true"]{ color:var(--plum); }
.nav__link:hover::after,.nav__item.is-open > .nav__link::after,.nav__link.is-current::after{ transform:scaleX(1); }
.nav__link.is-current{ color:var(--plum); }
.nav__caret{ width:8px; height:8px; flex:none; transition:transform .3s var(--ease); opacity:.6; }
.nav__item.is-open .nav__caret{ transform:rotate(180deg); }

.nav__panel{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translate(-50%,8px);
  min-width:284px; background:var(--ivory);
  border:1px solid var(--line); border-top:2px solid var(--gold);
  box-shadow:0 30px 60px -30px rgba(32,14,26,.44);
  padding:.6rem; list-style:none; margin:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nav__item.is-open > .nav__panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.nav__panel a{
  display:block; padding:.82rem 1rem; text-decoration:none;
  font-family:var(--f-body); font-size:.94rem; letter-spacing:.01em;
  color:var(--text-soft); line-height:1.45;
  transition:background .25s var(--ease), color .25s var(--ease), padding-left .25s var(--ease);
}
.nav__panel a:hover,.nav__panel a.is-current{ background:var(--shell); color:var(--plum); padding-left:1.35rem; }

.head-cta{ display:none; }
@media (min-width:1320px){ .head-cta{ display:inline-flex; padding:.85em 1.6em; font-size:.78rem; } }

/* Burger */
.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:6px;
  width:46px; height:46px; padding:0 10px; flex:none;
  background:none; border:1px solid var(--line); cursor:pointer;
  border-radius:var(--radius); transition:border-color .3s var(--ease);
}
.burger:hover{ border-color:var(--gold); }
.burger span{ display:block; height:1px; background:var(--ink); transition:transform .38s var(--ease), opacity .28s var(--ease); }
.burger span:nth-child(1){ width:100%; }
.burger span:nth-child(2){ width:70%; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ width:100%; transform:translateY(-3.5px) rotate(-45deg); }
@media (min-width:1120px){ .burger{ display:none; } }

/* Mobile / overlay sheet */
.nav-sheet{
  position:fixed; inset:0; z-index:1000;
  background:var(--ink); color:var(--on-dark-soft);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s var(--ease), visibility .4s;
  overflow-y:auto; overscroll-behavior:contain;
}
.nav-sheet.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.nav-sheet__top{
  display:flex; align-items:center; justify-content:space-between;
  min-height:clamp(70px,7.4vw,92px); flex:none;
  border-bottom:1px solid var(--line-dark-soft);
}
.nav-sheet__top .brand__name{ color:var(--champagne); }
.nav-sheet__top .brand__mark{ border-color:var(--gold-lt); color:var(--gold-lt); }
.nav-sheet__close{
  width:46px; height:46px; display:grid; place-items:center;
  background:none; border:1px solid var(--line-dark); color:var(--champagne);
  cursor:pointer; border-radius:var(--radius); font-size:1.15rem; line-height:1;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.nav-sheet__close:hover{ background:var(--champagne); color:var(--ink); }
.nav-sheet__body{ padding-block:clamp(26px,5vw,54px) clamp(40px,7vw,72px); flex:1; }
.nav-sheet__grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0;
  grid-template-columns:1fr;
}
@media (min-width:760px){ .nav-sheet__grid{ grid-template-columns:1fr 1fr; column-gap:var(--gut); } }
.nav-sheet__grid li{ border-bottom:1px solid var(--line-dark-soft); }
.nav-sheet__grid a{
  display:flex; align-items:baseline; gap:1.1rem;
  padding:1.02rem .2rem; text-decoration:none;
  font-family:var(--f-display); font-size:clamp(1.3rem,3.4vw,1.85rem);
  font-weight:500; color:var(--champagne); letter-spacing:-.01em; line-height:1.2;
  transition:color .3s var(--ease), padding-left .35s var(--ease);
}
.nav-sheet__grid a:hover,.nav-sheet__grid a.is-current{ color:var(--gold-lt); padding-left:1rem; }
.nav-sheet__grid .idx{
  font-family:var(--f-ui); font-size:.73rem; letter-spacing:.2em;
  color:var(--gold); flex:none; width:2.1em; opacity:.8;
}
.nav-sheet__foot{
  margin-top:clamp(30px,5vw,56px); padding-top:clamp(24px,3.5vw,36px);
  border-top:1px solid var(--line-dark-soft);
  display:flex; flex-wrap:wrap; gap:1.1rem 2.4rem; align-items:center;
}
.nav-sheet__foot a{
  font-family:var(--f-ui); font-size:.82rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-dark-faint); text-decoration:none;
  transition:color .3s var(--ease);
}
.nav-sheet__foot a:hover{ color:var(--gold-lt); }
body.no-scroll{ overflow:hidden; }

/* ---------- 7. Page masthead (inner pages) ---------- */
.mast{
  position:relative; background:var(--ink); color:var(--on-dark-soft);
  padding-block:clamp(62px,9vw,124px) clamp(54px,7vw,100px);
  overflow:hidden;
}
.mast::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 88% 6%, rgba(85,40,74,.72), transparent 62%),
    radial-gradient(80% 70% at 4% 100%, rgba(169,131,78,.2), transparent 60%);
  pointer-events:none;
}
.mast > *{ position:relative; z-index:1; }
.mast h1{ color:var(--champagne); margin-bottom:0; }
.mast__grid{ display:grid; gap:clamp(26px,4vw,58px); align-items:end; }
@media (min-width:900px){ .mast__grid{ grid-template-columns:minmax(0,1.32fr) minmax(0,1fr); } }
.mast__intro{
  font-size:clamp(1.02rem,1.15vw,1.18rem); line-height:1.78;
  color:var(--on-dark-soft); max-width:56ch;
}
.mast__meta{ display:flex; flex-wrap:wrap; gap:.7em 1.5em; margin-top:1.9rem; }
.mast__meta span{
  font-family:var(--f-ui); font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-lt); line-height:1.7;
}
.mast__meta span + span::before{ content:"—"; margin-right:1.5em; opacity:.45; color:var(--on-dark-faint); }

/* Breadcrumb */
.crumb{ padding-block:1.15rem; border-bottom:1px solid var(--line-soft); background:var(--shell); }
.crumb ol{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center;
  gap:.5em .85em;
  font-family:var(--f-ui); font-size:.77rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-faint); line-height:1.7;
}
.crumb a{ color:var(--text-soft); text-decoration:none; transition:color .3s var(--ease); }
.crumb a:hover{ color:var(--plum); }
.crumb li + li::before{ content:"/"; margin-right:.85em; color:var(--stone-dk); }
.crumb [aria-current]{ color:var(--plum); }

/* ---------- 8. Reusable content blocks ---------- */
.prose > * + *{ margin-top:0; }
.prose h3{ margin-top:2.4em; }
.prose h3:first-child{ margin-top:0; }
.prose h4{ margin-top:2em; margin-bottom:.6em; }
.prose ul,.prose ol{ margin:0 0 1.35em; padding-left:1.35em; }
.prose li{ margin-bottom:.6em; }
.prose li::marker{ color:var(--gold-ink); }

.cols-2{ column-count:1; }
@media (min-width:900px){ .cols-2{ column-count:2; column-gap:var(--gut); } }
.cols-2 p{ break-inside:avoid-column; }

.grid{ display:grid; gap:var(--gut); }
.g-2{ grid-template-columns:1fr; }
.g-3{ grid-template-columns:1fr; }
.g-4{ grid-template-columns:1fr; }
@media (min-width:680px){ .g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:900px){ .g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1100px){ .g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.split{ display:grid; gap:var(--gut); align-items:center; }
@media (min-width:940px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(38px,5vw,86px); }
  .split--l{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); }
  .split--r{ grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); }
  .split--top{ align-items:start; }
  .split__swap{ order:-1; }
}

/* Card */
.card{
  background:var(--ivory); border:1px solid var(--line);
  padding:clamp(26px,2.7vw,40px); border-radius:var(--radius);
  display:flex; flex-direction:column; gap:.85rem;
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover{ border-color:var(--gold); transform:translateY(-4px); box-shadow:0 26px 50px -34px rgba(32,14,26,.45); }
.card h4{ margin:0; }
.card p{ margin:0; font-size:.98rem; line-height:1.76; color:var(--text-soft); }
.card__k{
  font-family:var(--f-ui); font-size:.76rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-ink); line-height:1.7;
}
.on-dark .card{ background:rgba(239,225,201,.045); border-color:var(--line-dark-soft); }
.on-dark .card:hover{ border-color:var(--gold); background:rgba(239,225,201,.075); }
.on-dark .card p{ color:var(--on-dark-faint); }

/* Stat band */
.stats{ display:grid; gap:clamp(30px,3.4vw,50px); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:900px){ .stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stat{ display:flex; flex-direction:column; }
.stats--bordered .stat{ padding-left:clamp(16px,1.8vw,26px); border-left:1px solid var(--line); }
.on-dark .stats--bordered .stat{ border-left-color:var(--line-dark); }
.stat__note{ font-size:.88rem; line-height:1.7; color:var(--text-faint); margin-top:.7em; }
.on-dark .stat__note{ color:var(--on-dark-faint); }

/* Source note */
.src{
  font-family:var(--f-ui); font-size:.8rem; letter-spacing:.09em;
  color:var(--text-faint); line-height:1.75; margin-top:1.4em;
}
.on-dark .src{ color:var(--on-dark-faint); }
.src a{ color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--stone-dk); }

/* CTA band */
.cta{ position:relative; overflow:hidden; background:var(--aubergine); }
.cta::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(90% 130% at 12% 0%, rgba(169,131,78,.28), transparent 58%),
    radial-gradient(70% 90% at 100% 100%, rgba(85,40,74,.85), transparent 62%);
}
.cta > *{ position:relative; z-index:1; }
.cta__in{ display:grid; gap:clamp(26px,3.5vw,54px); align-items:center; }
@media (min-width:900px){ .cta__in{ grid-template-columns:minmax(0,1.35fr) auto; } }
.cta h2{ margin-bottom:.35em; }
.cta p{ color:var(--on-dark-soft); max-width:52ch; margin:0; }
.cta__acts{ display:flex; flex-wrap:wrap; gap:1rem; }

/* Pagination between pages */
.pager{ border-top:1px solid var(--line); }
.pager__in{ display:grid; gap:0; }
@media (min-width:760px){ .pager__in{ grid-template-columns:1fr 1fr; } }
.pager a{
  display:flex; flex-direction:column; gap:.55rem; padding:clamp(30px,4vw,52px) 0;
  text-decoration:none; transition:background .35s var(--ease);
}
.pager a:first-child{ border-bottom:1px solid var(--line); }
@media (min-width:760px){
  .pager a:first-child{ border-bottom:0; border-right:1px solid var(--line); padding-right:var(--gut); }
  .pager a:last-child{ padding-left:var(--gut); text-align:right; align-items:flex-end; }
}
.pager__k{ font-family:var(--f-ui); font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-ink); line-height:1.7; }
.pager__t{ font-family:var(--f-display); font-size:clamp(1.25rem,2.2vw,1.75rem); font-weight:600; color:var(--ink); line-height:1.2; transition:color .3s var(--ease); }
.pager a:hover .pager__t{ color:var(--plum); }

/* ---------- 9. Footer ---------- */
.site-foot{ background:var(--ink); color:var(--on-dark-soft); }
.foot-top{ padding-block:clamp(52px,6.5vw,96px); }
.foot-grid{ display:grid; gap:clamp(34px,4vw,58px); }
@media (min-width:760px){ .foot-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .foot-grid{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr); } }
.foot-h{
  font-family:var(--f-ui); font-size:.77rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold-lt); margin:0 0 1.6rem; line-height:1.7;
}
.foot-brand__name{
  font-family:var(--f-display); font-size:clamp(1.5rem,2.2vw,2rem);
  color:var(--champagne); font-weight:600; line-height:1.15; margin:0 0 .55rem;
}
.foot-brand p{ font-size:.95rem; line-height:1.8; color:var(--on-dark-faint); max-width:38ch; }
.foot-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.72rem; }
.foot-links a{
  text-decoration:none; font-size:.95rem; color:var(--on-dark-soft); line-height:1.6;
  transition:color .3s var(--ease), padding-left .3s var(--ease);
}
.foot-links a:hover{ color:var(--gold-lt); padding-left:.4rem; }
.foot-contact{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.15rem; }
.foot-contact li{ display:flex; flex-direction:column; gap:.28rem; }
.foot-contact .k{ font-family:var(--f-ui); font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; color:var(--on-dark-faint); line-height:1.7; }
.foot-contact a,.foot-contact .v{ color:var(--champagne); text-decoration:none; font-size:1rem; line-height:1.55; word-break:break-word; transition:color .3s var(--ease); }
.foot-contact a:hover{ color:var(--gold-lt); text-decoration:underline; text-underline-offset:4px; }

.social{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }
.social__i{
  width:42px; height:42px; display:grid; place-items:center; flex:none;
  border:1px solid var(--line-dark); color:var(--on-dark-faint);
  border-radius:50%; background:none; cursor:default;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.social__i:hover{ border-color:var(--gold); color:var(--gold-lt); }
.social__i svg{ width:17px; height:17px; fill:currentColor; }
.social__note{ font-size:.82rem; line-height:1.7; color:var(--on-dark-faint); margin-top:1.1rem; max-width:34ch; }

.foot-bot{ border-top:1px solid var(--line-dark-soft); padding-block:1.9rem 2.2rem; }
.foot-bot__in{
  display:flex; flex-wrap:wrap; gap:.85rem 2rem;
  align-items:center; justify-content:space-between;
  font-size:.885rem; color:var(--on-dark-faint); line-height:1.75;
}
.foot-bot a{ color:var(--on-dark-soft); text-decoration:none; border-bottom:1px solid rgba(239,225,201,.28); transition:color .3s var(--ease), border-color .3s var(--ease); }
.foot-bot a:hover{ color:var(--gold-lt); border-color:var(--gold-lt); }

/* ---------- 10. Reveal-on-scroll ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.09s; } .rv-d2{ transition-delay:.18s; }
.rv-d3{ transition-delay:.27s; } .rv-d4{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ============================================================
   PAGE-SPECIFIC COMPOSITIONS
   ============================================================ */

/* ---- HOME: hero ---- */
.hero{ position:relative; background:var(--ink); overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(95% 80% at 78% 12%, rgba(85,40,74,.85), transparent 60%),
    radial-gradient(65% 60% at 6% 96%, rgba(169,131,78,.22), transparent 62%);
}
.hero__in{ position:relative; z-index:2; padding-block:clamp(44px,6vw,84px) clamp(46px,6vw,90px); }
.hero__grid{ display:grid; gap:clamp(34px,4.5vw,66px); align-items:center; }
@media (min-width:1000px){ .hero__grid{ grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); } }
.hero__kicker{
  font-family:var(--f-ui); font-size:.78rem; letter-spacing:.36em;
  text-transform:uppercase; color:var(--gold-lt); margin:0 0 1.7rem;
  display:flex; align-items:center; gap:1em; line-height:1.6;
}
.hero__kicker::before{ content:""; width:46px; height:1px; background:currentColor; opacity:.65; flex:none; }
.hero h1{
  color:var(--champagne); margin:0 0 1.5rem;
  font-size:clamp(2.7rem,6.6vw,5.4rem); line-height:.98; letter-spacing:-.022em;
}
.hero h1 em{ font-style:italic; color:var(--gold-lt); font-weight:400; }
.hero__lede{
  font-size:clamp(1.05rem,1.25vw,1.28rem); line-height:1.75;
  color:var(--on-dark-soft); max-width:50ch; margin:0 0 2.4rem;
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:1rem; }
.hero__strip{
  position:relative; z-index:2;
  border-top:1px solid var(--line-dark-soft);
  padding-block:clamp(26px,3vw,40px);
}
.hero__strip .stats{ gap:clamp(24px,2.6vw,44px); }

.hero__art{ position:relative; }
.hero__art .frame{ box-shadow:0 40px 90px -50px rgba(0,0,0,.85); }
.hero__badge{
  position:relative; margin-top:1.05rem; padding-top:1.05rem;
  border-top:1px solid var(--line-dark);
  display:flex; align-items:baseline; gap:.4rem 1.1rem; flex-wrap:wrap;
}
.hero__badge b{
  font-family:var(--f-display); font-size:clamp(1.3rem,1.7vw,1.6rem);
  font-weight:600; line-height:1.1; color:var(--gold-lt); flex:none;
}
.hero__badge span{
  font-family:var(--f-ui); font-size:.76rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--on-dark-faint); line-height:1.7;
}

/* ---- HOME: journey rail (horizontal narrative) ---- */
.rail{ position:relative; }
.rail__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(268px,300px);
  gap:clamp(18px,2vw,30px); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1.6rem; scrollbar-width:thin;
  scrollbar-color:var(--gold) rgba(239,225,201,.16);
}
.rail__track::-webkit-scrollbar{ height:3px; }
.rail__track::-webkit-scrollbar-track{ background:rgba(239,225,201,.16); }
.rail__track::-webkit-scrollbar-thumb{ background:var(--gold); }
.rail__card{
  scroll-snap-align:start; position:relative;
  padding-top:2.3rem; border-top:1px solid var(--line-dark);
}
.rail__card::before{
  content:""; position:absolute; top:-4px; left:0; width:8px; height:8px;
  background:var(--gold-lt); border-radius:50%;
}
.rail__yr{
  font-family:var(--f-display); font-size:clamp(2rem,3vw,2.7rem);
  font-weight:600; color:var(--gold-lt); line-height:1; letter-spacing:-.02em;
  display:block; margin-bottom:.7rem;
}
.rail__card h4{ color:var(--champagne); margin:0 0 .6rem; }
.rail__card p{ font-size:.96rem; line-height:1.78; color:var(--on-dark-faint); margin:0; }
.rail__hint{
  font-family:var(--f-ui); font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--on-dark-faint); margin-top:.4rem; line-height:1.7;
}

/* ---- HOME: gallery preview mosaic ---- */
.mosaic{ column-count:2; column-gap:clamp(12px,1.4vw,20px); }
@media (min-width:820px){ .mosaic{ column-count:3; } }
@media (min-width:1200px){ .mosaic{ column-count:5; } }
.mosaic a{ display:block; text-decoration:none; break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:clamp(12px,1.4vw,20px); }
.mosaic .frame{ transition:transform .5s var(--ease); }
.mosaic a:hover .frame{ transform:translateY(-5px); }

/* ---- ABOUT: portrait ledger ---- */
.ledger{ display:grid; gap:0; border-top:1px solid var(--line); }
.ledger__row{
  display:grid; gap:.7rem clamp(20px,3vw,48px);
  padding-block:clamp(20px,2.4vw,30px); border-bottom:1px solid var(--line);
  align-items:baseline;
}
@media (min-width:720px){ .ledger__row{ grid-template-columns:minmax(0,.42fr) minmax(0,1fr); } }
.ledger__k{
  font-family:var(--f-ui); font-size:.78rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-ink); line-height:1.75;
}
.ledger__v{ font-size:1.02rem; line-height:1.75; color:var(--text); }
.ledger__v strong{ font-weight:700; color:var(--ink); }
.on-dark .ledger,.on-dark .ledger__row{ border-color:var(--line-dark); }
.on-dark .ledger__v{ color:var(--on-dark); }
.on-dark .ledger__v strong{ color:var(--champagne); }

/* ---- BIOGRAPHY: chaptered long-form ---- */
.chapter{ display:grid; gap:clamp(26px,3.4vw,58px); }
@media (min-width:1000px){ .chapter{ grid-template-columns:minmax(0,.3fr) minmax(0,1fr); align-items:start; } }
.chapter__aside{ position:relative; }
@media (min-width:1000px){ .chapter__aside{ position:sticky; top:clamp(96px,10vw,124px); } }
.chapter__no{
  font-family:var(--f-display); font-size:clamp(3.2rem,6vw,5.4rem);
  font-weight:600; color:var(--stone-dk); line-height:.86; letter-spacing:-.04em;
  display:block; margin-bottom:.5rem;
}
.chapter__ttl{
  font-family:var(--f-ui); font-size:.79rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold-ink); line-height:1.85;
}
.chapter + .chapter{ margin-top:clamp(48px,6vw,96px); padding-top:clamp(48px,6vw,96px); border-top:1px solid var(--line); }

/* ---- JOURNEY: stepped narrative ---- */
.steps{ position:relative; display:grid; gap:0; }
.step{
  position:relative; display:grid; gap:1rem clamp(24px,3.5vw,56px);
  padding-block:clamp(34px,4.4vw,64px); border-bottom:1px solid var(--line);
}
@media (min-width:900px){
  .step{ grid-template-columns:minmax(0,.24fr) minmax(0,1fr) minmax(0,.4fr); align-items:start; }
}
.step:first-child{ border-top:1px solid var(--line); }
.step__yr{
  font-family:var(--f-display); font-size:clamp(1.9rem,3.3vw,2.9rem);
  font-weight:600; color:var(--plum); line-height:1; letter-spacing:-.025em;
}
.step__body h3{ margin-bottom:.55em; }
.step__body p{ color:var(--text-soft); }
.step__body p:last-child{ margin-bottom:0; }
.step__side{
  font-family:var(--f-ui); font-size:.86rem; letter-spacing:.06em;
  line-height:1.85; color:var(--text-faint);
  padding-top:.5rem; border-top:1px solid var(--line);
}
@media (min-width:900px){ .step__side{ border-top:0; border-left:1px solid var(--line); padding:0 0 0 clamp(18px,2vw,30px); } }
.step:nth-child(even){ background:linear-gradient(90deg, rgba(245,239,231,.75), transparent 70%); }
.step:nth-child(even) .step__yr{ color:var(--gold-ink); }

/* ---- LEADERSHIP: pillar offset grid ---- */
.pillars{ display:grid; gap:clamp(20px,2.4vw,34px); }
@media (min-width:800px){ .pillars{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1160px){ .pillars{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.pillar{
  padding:clamp(28px,3vw,44px); border:1px solid var(--line-dark-soft);
  background:linear-gradient(160deg, rgba(239,225,201,.06), rgba(239,225,201,.015));
  border-radius:var(--radius); display:flex; flex-direction:column; gap:1rem;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.pillar:hover{ border-color:var(--gold); transform:translateY(-5px); }
.pillar__n{
  font-family:var(--f-ui); font-size:.76rem; letter-spacing:.26em;
  color:var(--gold-lt); line-height:1.7;
}
.pillar h3{ color:var(--champagne); margin:0; font-size:clamp(1.28rem,1.75vw,1.62rem); }
.pillar p{ margin:0; font-size:.98rem; line-height:1.8; color:var(--on-dark-faint); }
@media (min-width:1160px){
  .pillars--offset > :nth-child(3n+2){ transform:translateY(clamp(16px,2.4vw,38px)); }
  .pillars--offset > :nth-child(3n+2):hover{ transform:translateY(calc(clamp(16px,2.4vw,38px) - 5px)); }
}

/* ---- VENTURES: division index ---- */
.divs{ display:grid; gap:0; border-top:1px solid var(--line); }
.div-row{
  display:grid; gap:.9rem clamp(22px,3vw,50px);
  padding-block:clamp(26px,3.2vw,44px); border-bottom:1px solid var(--line);
  align-items:start; position:relative;
  transition:background .4s var(--ease);
}
.div-row:hover{ background:var(--shell); }
@media (min-width:920px){ .div-row{ grid-template-columns:minmax(0,.08fr) minmax(0,.34fr) minmax(0,1fr) minmax(0,.22fr); } }
.div-row__n{ font-family:var(--f-ui); font-size:.77rem; letter-spacing:.2em; color:var(--gold-ink); line-height:2.3; }
.div-row__t h3{ margin:0 0 .3rem; font-size:clamp(1.3rem,1.9vw,1.7rem); }
.div-row__t .k{ font-family:var(--f-ui); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); line-height:1.7; }
.div-row__d p{ margin:0; color:var(--text-soft); font-size:.985rem; }
.div-row__y{ font-family:var(--f-ui); font-size:.79rem; letter-spacing:.16em; text-transform:uppercase; color:var(--plum); line-height:1.9; }
@media (min-width:920px){ .div-row__y{ text-align:right; } }

/* ---- PHILOSOPHY: tenet stack ---- */
.tenets{ display:grid; gap:clamp(28px,3.4vw,52px); counter-reset:tenet; }
@media (min-width:960px){ .tenets{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.tenet{ position:relative; padding-top:2.4rem; border-top:2px solid var(--gold); counter-increment:tenet; }
.tenet::before{
  content:counter(tenet,decimal-leading-zero);
  position:absolute; top:1rem; right:0;
  font-family:var(--f-display); font-size:clamp(3rem,5vw,4.6rem);
  font-weight:600; color:var(--stone); line-height:.8; letter-spacing:-.04em; z-index:0;
}
.on-dark .tenet::before{ color:rgba(239,225,201,.1); }
.tenet > *{ position:relative; z-index:1; }
.tenet h3{ margin-bottom:.5em; padding-right:2.6rem; }
.tenet p{ color:var(--text-soft); margin-bottom:0; }
.on-dark .tenet p{ color:var(--on-dark-faint); }
@media (min-width:960px){ .tenets--stagger > :nth-child(even){ margin-top:clamp(24px,3.4vw,58px); } }

/* ---- INNOVATION: layered panels ---- */
.panel{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--aubergine); color:var(--on-dark-soft);
  padding:clamp(30px,4vw,60px);
}
.panel::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(85% 120% at 100% 0%, rgba(169,131,78,.26), transparent 62%);
}
.panel > *{ position:relative; z-index:1; }
.panel h3{ color:var(--champagne); }
.panel p{ color:var(--on-dark-faint); }

.matrix{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:760px){ .matrix{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1120px){ .matrix--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.matrix__cell{
  background:var(--ivory); padding:clamp(26px,3vw,42px);
  display:flex; flex-direction:column; gap:.85rem;
  transition:background .4s var(--ease);
}
.matrix__cell:hover{ background:var(--shell); }
.matrix__cell h4{ margin:0; }
.matrix__cell p{ margin:0; color:var(--text-soft); font-size:.98rem; }
.matrix__cell .k{ font-family:var(--f-ui); font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-ink); line-height:1.7; }

/* ---- WOMEN IN BUSINESS: data + editorial ---- */
.databar{ display:grid; gap:clamp(24px,3vw,44px); }
@media (min-width:760px){ .databar{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.datum{ padding-top:1.5rem; border-top:2px solid var(--gold); }
.datum__n{
  font-family:var(--f-display); font-size:clamp(2.4rem,4.6vw,3.8rem);
  font-weight:600; line-height:1; letter-spacing:-.03em; color:var(--ink);
  display:block; margin-bottom:.5rem;
}
.on-dark .datum__n{ color:var(--champagne); }
.datum p{ font-size:.97rem; line-height:1.78; color:var(--text-soft); margin:0; }
.on-dark .datum p{ color:var(--on-dark-faint); }
.datum cite{
  display:block; font-family:var(--f-ui); font-style:normal; font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint);
  margin-top:.9rem; line-height:1.7;
}
.on-dark .datum cite{ color:var(--on-dark-faint); opacity:.8; }

/* ---- MILESTONES: award ledger ---- */
.awards{ display:grid; gap:0; }
.award{
  display:grid; gap:.6rem clamp(20px,3vw,50px);
  padding-block:clamp(22px,2.6vw,34px); border-bottom:1px solid var(--line-dark-soft);
  align-items:baseline;
}
@media (min-width:820px){ .award{ grid-template-columns:minmax(0,.16fr) minmax(0,1fr) minmax(0,.34fr); } }
.award:first-child{ border-top:1px solid var(--line-dark-soft); }
.award__yr{ font-family:var(--f-display); font-size:clamp(1.35rem,2vw,1.75rem); font-weight:600; color:var(--gold-lt); line-height:1.2; }
.award__t{ color:var(--champagne); font-size:1.06rem; line-height:1.6; }
.award__src{ font-family:var(--f-ui); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-faint); line-height:1.85; }
@media (min-width:820px){ .award__src{ text-align:right; } }

/* ---- INSIGHTS: article index ---- */
.posts{ display:grid; gap:0; border-top:1px solid var(--line); }
.post{
  display:grid; gap:1rem clamp(24px,3.4vw,56px);
  padding-block:clamp(30px,3.8vw,54px); border-bottom:1px solid var(--line);
  align-items:start;
}
@media (min-width:940px){ .post{ grid-template-columns:minmax(0,.26fr) minmax(0,1fr); } }
.post__meta{ display:flex; flex-direction:column; gap:.45rem; }
.post__k{ font-family:var(--f-ui); font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-ink); line-height:1.7; }
.post__read{ font-family:var(--f-ui); font-size:.79rem; letter-spacing:.1em; color:var(--text-faint); line-height:1.7; }
.post h3{ margin-bottom:.5em; }
.post__body p{ color:var(--text-soft); }
.post__body p:last-of-type{ margin-bottom:1.4em; }

/* ---- GALLERY ---- */
.gal{ column-count:1; column-gap:clamp(16px,2vw,28px); }
@media (min-width:640px){ .gal{ column-count:2; } }
@media (min-width:1080px){ .gal{ column-count:3; } }
.gal figure{ break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; display:block; margin-bottom:clamp(18px,2.2vw,30px); }
.gal .frame{ transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.gal figure:hover .frame{ transform:translateY(-6px); box-shadow:0 32px 60px -40px rgba(32,14,26,.6); }

/* ---- CONTACT ---- */
.contact-grid{ display:grid; gap:clamp(34px,4.5vw,72px); align-items:start; }
@media (min-width:980px){ .contact-grid{ grid-template-columns:minmax(0,1fr) minmax(0,.86fr); } }
.ccard{
  border:1px solid var(--line); padding:clamp(28px,3.4vw,48px);
  background:var(--ivory); border-radius:var(--radius);
}
.ccard + .ccard{ margin-top:var(--gut); }
.cinfo{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.cinfo li{ padding-block:1.35rem; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:.4rem; }
.cinfo li:first-child{ padding-top:0; }
.cinfo li:last-child{ border-bottom:0; padding-bottom:0; }
.cinfo .k{ font-family:var(--f-ui); font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-ink); line-height:1.7; }
.cinfo a,.cinfo .v{ font-size:1.14rem; color:var(--ink); text-decoration:none; line-height:1.5; word-break:break-word; transition:color .3s var(--ease); }
.cinfo a:hover{ color:var(--plum); text-decoration:underline; text-underline-offset:5px; }

.form-grid{ display:grid; gap:1.4rem; }
@media (min-width:620px){ .form-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.field{ display:flex; flex-direction:column; gap:.6rem; }
.field label{
  font-family:var(--f-ui); font-size:.78rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-soft); line-height:1.7;
}
.field input,.field textarea,.field select{
  font-family:var(--f-body); font-size:1rem; color:var(--ink);
  background:var(--ivory); border:1px solid var(--line);
  padding:.95rem 1.05rem; border-radius:var(--radius); width:100%;
  line-height:1.6; transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--gold); background:#fff; }
.field input::placeholder,.field textarea::placeholder{ color:var(--text-faint); opacity:.8; }
.form-note{ font-size:.89rem; line-height:1.75; color:var(--text-faint); }
.form-status{
  font-family:var(--f-ui); font-size:.85rem; letter-spacing:.04em;
  padding:1rem 1.15rem; border-left:2px solid var(--gold);
  background:var(--shell); color:var(--text); line-height:1.7; margin-top:1.2rem;
}
.form-status[hidden]{ display:none !important; }

/* ============================================================
   GATE (index.html)
   ============================================================ */
.gate{
  min-height:100svh; display:grid; place-items:center;
  background:var(--ink); padding:clamp(22px,5vw,60px);
  position:relative; overflow:hidden;
}
.gate::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(58% 52% at 50% 42%, rgba(85,40,74,.9), transparent 66%),
    radial-gradient(48% 44% at 84% 96%, rgba(169,131,78,.2), transparent 62%);
}
.gate::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(239,225,201,.028) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(239,225,201,.028) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(60% 60% at 50% 50%, #000, transparent 72%);
  -webkit-mask-image:radial-gradient(60% 60% at 50% 50%, #000, transparent 72%);
}
.gate__box{
  position:relative; z-index:2; width:100%; max-width:440px; text-align:center;
}
.gate__mark{
  width:70px; height:70px; margin:0 auto clamp(28px,4vw,42px);
  display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(223,192,138,.42); color:var(--gold-lt);
  position:relative;
}
.gate__mark::before{
  content:""; position:absolute; inset:-11px; border-radius:50%;
  border:1px solid rgba(223,192,138,.15);
}
.gate__mark svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.3; }
.gate__label{
  font-family:var(--f-ui); font-size:.77rem; letter-spacing:.36em;
  text-transform:uppercase; color:var(--gold-lt); margin:0 0 2.4rem; line-height:1.8;
}
.gate__form{ display:flex; flex-direction:column; gap:1.1rem; }
.gate__field{ position:relative; }
.gate__input{
  width:100%; font-family:var(--f-ui); font-size:1.05rem;
  letter-spacing:.34em; text-align:center; color:var(--champagne);
  background:rgba(239,225,201,.045); border:1px solid rgba(239,225,201,.2);
  padding:1.25rem 3.2rem 1.25rem 1.25rem; border-radius:var(--radius);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.gate__input::placeholder{ color:rgba(239,225,201,.34); letter-spacing:.3em; }
.gate__input:focus{ outline:none; border-color:var(--gold-lt); background:rgba(239,225,201,.08); }
.gate__input:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:2px; }
.gate__peek{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:44px; height:44px; display:grid; place-items:center;
  background:none; border:0; cursor:pointer; color:rgba(239,225,201,.5);
  transition:color .3s var(--ease); border-radius:var(--radius);
}
.gate__peek:hover{ color:var(--gold-lt); }
.gate__peek svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4; }
.gate__btn{
  width:100%; justify-content:center;
  background:var(--gold-lt); border:1px solid var(--gold-lt); color:var(--ink);
  font-family:var(--f-ui); font-size:.8rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  padding:1.2em 2em; cursor:pointer; border-radius:var(--radius);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.gate__btn:hover{ background:var(--champagne); border-color:var(--champagne); }
.gate__msg{
  min-height:1.5em; font-family:var(--f-ui); font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.8;
  color:#E9A0A0; margin:0;
}
.gate__msg.ok{ color:var(--gold-lt); }
.gate__box.shake{ animation:shake .42s var(--ease); }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-9px); } 40%{ transform:translateX(8px); }
  60%{ transform:translateX(-5px); } 80%{ transform:translateX(4px); }
}

/* ---------- Utilities ---------- */
.mt-0{ margin-top:0; } .mt-1{ margin-top:clamp(14px,1.6vw,22px); }
.mt-2{ margin-top:clamp(22px,2.6vw,36px); } .mt-3{ margin-top:clamp(30px,3.6vw,52px); }
.mt-4{ margin-top:clamp(40px,5vw,76px); }
.mb-2{ margin-bottom:clamp(22px,2.6vw,36px); } .mb-3{ margin-bottom:clamp(30px,3.6vw,52px); }
.tc{ text-align:center; } .mx{ margin-inline:auto; }
.maxw-60{ max-width:62ch; } .maxw-50{ max-width:52ch; } .maxw-70{ max-width:74ch; }
.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* panel numbering (innovation page) */
.panel__n{
  font-family:var(--f-ui); font-size:.76rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold-lt); line-height:1.7;
  display:block; margin-bottom:1rem;
}
.panel h3{ margin-bottom:.6em; }
.panel p{ margin-bottom:0; }

/* ---------- Narrow-screen header refinements ---------- */
@media (max-width:430px){
  .brand{ gap:.62rem; }
  .brand__mark{ width:34px; height:34px; font-size:.8rem; }
  .brand__name{ font-size:.94rem; }
  .brand__sub{ font-size:.73rem; letter-spacing:.14em; }
  .nav-sheet__top .brand__sub{ letter-spacing:.16em; }
}
@media (max-width:360px){
  .brand__sub{ display:none; }
  .nav-sheet__top .brand__sub{ display:none; }
  .brand__name{ font-size:.92rem; line-height:1.25; }
}

/* ============================================================
   DARK SURFACE CONTEXTS
   .hero, .cta and .mast paint their own dark grounds, so they
   need the same treatment as .on-dark / .on-plum.
   ============================================================ */
.hero, .cta, .mast{ color:var(--on-dark-soft); }

.hero h1,.hero h2,.hero h3,.hero h4,.hero h5,
.cta h1,.cta h2,.cta h3,.cta h4,.cta h5,
.mast h1,.mast h2,.mast h3,.mast h4,.mast h5{ color:var(--champagne); }

.hero .eyebrow,.cta .eyebrow,.mast .eyebrow{ color:var(--gold-lt); }
.hero .lede,.cta .lede,.mast .lede{ color:var(--on-dark); }
.hero .muted,.cta .muted,.mast .muted{ color:var(--on-dark-faint); }
.hero .cap,.cta .cap,.mast .cap,
.hero .src,.cta .src,.mast .src,
.hero .attrib,.cta .attrib,.mast .attrib{ color:var(--on-dark-faint); }
.hero .qmark,.cta .qmark,.mast .qmark{ color:var(--champagne); }
.hero .rule,.cta .rule,.mast .rule{ background:var(--line-dark); }
.hero .frame--edge,.cta .frame--edge,.mast .frame--edge{ border-color:var(--line-dark); }

/* Numbers and stats */
.hero .num,.cta .num,.mast .num{ color:var(--gold-lt); }
.hero .num-label,.cta .num-label,.mast .num-label{ color:var(--on-dark-faint); }
.hero .stat__note,.cta .stat__note,.mast .stat__note{ color:var(--on-dark-faint); }
.hero .stats--bordered .stat,
.cta .stats--bordered .stat,
.mast .stats--bordered .stat{ border-left-color:var(--line-dark); }

/* Buttons */
.hero .btn,.cta .btn,.mast .btn{
  background:var(--gold-lt); border-color:var(--gold-lt); color:var(--ink);
}
.hero .btn:hover,.cta .btn:hover,.mast .btn:hover{
  background:var(--champagne); border-color:var(--champagne); color:var(--ink);
}
.hero .btn--ghost,.cta .btn--ghost,.mast .btn--ghost{
  background:transparent; color:var(--champagne); border-color:rgba(239,225,201,.42);
}
.hero .btn--ghost:hover,.cta .btn--ghost:hover,.mast .btn--ghost:hover{
  background:var(--champagne); color:var(--ink); border-color:var(--champagne);
}

/* Text links */
.hero .tlink,.cta .tlink,.mast .tlink{ color:var(--gold-lt); border-color:rgba(223,192,138,.36); }
.hero .tlink:hover,.cta .tlink:hover,.mast .tlink:hover{ color:var(--champagne); border-color:var(--champagne); }

/* Cards, ledgers and data on dark grounds */
.hero .card,.cta .card,.mast .card{ background:rgba(239,225,201,.05); border-color:var(--line-dark-soft); }
.hero .card:hover,.cta .card:hover,.mast .card:hover{ border-color:var(--gold); background:rgba(239,225,201,.08); }
.hero .card p,.cta .card p,.mast .card p{ color:var(--on-dark-faint); }
.hero .ledger,.cta .ledger,.mast .ledger,
.hero .ledger__row,.cta .ledger__row,.mast .ledger__row{ border-color:var(--line-dark); }
.hero .ledger__v,.cta .ledger__v,.mast .ledger__v{ color:var(--on-dark); }
.hero .ledger__v strong,.cta .ledger__v strong,.mast .ledger__v strong{ color:var(--champagne); }
.hero .datum__n,.cta .datum__n,.mast .datum__n{ color:var(--champagne); }
.hero .datum p,.cta .datum p,.mast .datum p{ color:var(--on-dark-faint); }
.hero .datum cite,.cta .datum cite,.mast .datum cite{ color:var(--on-dark-faint); opacity:.85; }
.hero .drop::first-letter,.cta .drop::first-letter,.mast .drop::first-letter{ color:var(--gold-lt); }
.hero .tenet::before,.cta .tenet::before,.mast .tenet::before{ color:rgba(239,225,201,.1); }
.hero .prose li::marker,.cta .prose li::marker,.mast .prose li::marker{ color:var(--gold-lt); }

/* ---------- Heading-level utilities ----------
   Let semantic level and visual scale be chosen independently,
   so document hierarchy never has to skip a level. */
.h-sm{ font-size:clamp(1.45rem,2.3vw,2.15rem); line-height:1.16; letter-spacing:-.012em; }
.h-xs{ font-size:clamp(1.15rem,1.35vw,1.4rem); line-height:1.28; letter-spacing:0; }
.card h3,.matrix__cell h3,.rail__card h3{ margin:0; }
.rail__card h3{ color:var(--champagne); margin:0 0 .6rem; }
.matrix__cell h3{ margin:0; }

/* Long-form spacing for the re-levelled headings */
.prose h2{ margin-top:2.6em; margin-bottom:.5em; }
.prose h2:first-child{ margin-top:0; }
.prose h3.h-xs{ margin-top:2em; margin-bottom:.6em; }
.prose h3.h-xs:first-child{ margin-top:0; }
.chapter .prose h2.h-sm{ margin-top:0; }

/* ---------- .on-plum: complete the dark-surface treatment ---------- */
.on-plum .lede{ color:var(--on-dark); }
.on-plum .muted,.on-plum .cap,.on-plum .src,.on-plum .attrib,
.on-plum .num-label,.on-plum .stat__note{ color:var(--on-dark-faint); }
.on-plum .qmark{ color:var(--champagne); }
.on-plum .rule{ background:var(--line-dark); }
.on-plum .frame--edge{ border-color:var(--line-dark); }
.on-plum .tlink{ color:var(--gold-lt); border-color:rgba(223,192,138,.36); }
.on-plum .tlink:hover{ color:var(--champagne); border-color:var(--champagne); }
.on-plum .card{ background:rgba(239,225,201,.05); border-color:var(--line-dark-soft); }
.on-plum .card:hover{ border-color:var(--gold); background:rgba(239,225,201,.08); }
.on-plum .card p{ color:var(--on-dark-faint); }
.on-plum .ledger,.on-plum .ledger__row{ border-color:var(--line-dark); }
.on-plum .ledger__v{ color:var(--on-dark); }
.on-plum .ledger__v strong{ color:var(--champagne); }
.on-plum .datum__n{ color:var(--champagne); }
.on-plum .datum p{ color:var(--on-dark-faint); }
.on-plum .datum cite{ color:var(--on-dark-faint); opacity:.85; }
.on-plum .drop::first-letter{ color:var(--gold-lt); }
.on-plum .tenet::before{ color:rgba(239,225,201,.1); }
.on-plum .prose li::marker{ color:var(--gold-lt); }
.on-plum .stats--bordered .stat{ border-left-color:var(--line-dark); }
.on-plum .post__k,.on-plum .card__k,.on-plum .matrix__cell .k{ color:var(--gold-lt); }

/* Dark grounds keep the luminous gold for the same label elements */
.on-dark .card__k,.on-plum .card__k,.hero .card__k,.cta .card__k,.mast .card__k,
.on-dark .post__k,.on-dark .ledger__k,.on-plum .ledger__k,
.on-dark .matrix__cell .k,.on-dark .cinfo .k,
.on-dark .pager__k,.on-plum .pager__k,
.on-dark .div-row__n,.on-dark .chapter__ttl{ color:var(--gold-lt); }
.nav-sheet__top .brand__sub{ color:var(--gold-lt); }
