/* ==========================================================================
   MESOPOTAMIA — V3 "DEPTH"
   Loaded after main.css. Everything here is an override layer, so deleting
   this one file returns the site exactly to how it was.
   1. Tokens  2. Grain & light  3. Header  4. Type  5. Buttons  6. Media
   7. Hero    8. Sections      9. Cards  10. Footer 11. Motion 12. Reduced
   ========================================================================== */

/* ---------- 1. TOKENS — the whole "dim" fix starts here ---------- */
:root{
  /* grounds: warmer paper, a true near-black, one deep clay-black between them */
  --warm-white:#F4EFE6;
  --obsidian:#0E1113;
  --obsidian-2:#161A1D;
  --umber:#1C1613;              /* warm black for alternate dark bands */

  --bg:#F4EFE6;
  --bg-alt:#EAE3D6;
  --bg-card:#FFFFFF;            /* crisp white cards on paper = instant lift */

  /* ink: darker than before so text reads black, not grey */
  --ink:#14181A;
  --ink-soft:#4A4841;
  --ink-mute:#6A665C;

  /* clay: kept as the brand colour, with a deeper value for hovers */
  --clay:#A75F33;
  --clay-deep:#7C4222;
  --clay-glow:#C97A45;
  --sand:#D6C6AA;
  --brass:#C8A97A;              /* hairline "metal" on dark grounds only */
  --olive:#60674F;   /* exact brand olive — AA on every ground used */

  --accent:#8A4A26;             /* clay darkened for small text, AA on paper */
  --accent-line:var(--clay);

  --rule:rgba(20,24,26,.16);
  --rule-soft:rgba(20,24,26,.08);

  /* elevation — warm shadows, never neutral grey */
  --sh-1:0 1px 2px rgba(28,22,19,.05), 0 2px 8px rgba(28,22,19,.05);
  --sh-2:0 2px 6px rgba(28,22,19,.06), 0 12px 32px rgba(28,22,19,.09);
  --sh-3:0 4px 12px rgba(28,22,19,.08), 0 26px 64px rgba(28,22,19,.14);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,.84,.34,1);
  --ease-expo:cubic-bezier(.19,1,.22,1);

  --sec-y:clamp(60px,9vw,126px);
  --gut:clamp(22px,5vw,72px);
}
.section--dark,.ftr{
  --ink:#F4EFE6;
  --ink-soft:rgba(244,239,230,.80);
  --ink-mute:rgba(244,239,230,.60);
  --rule:rgba(244,239,230,.15);
  --rule-soft:rgba(244,239,230,.08);
  --accent:var(--sand);
  --bg-card:rgba(255,255,255,.045);
}
.section--dark{background:var(--obsidian)}
.section--alt{background:var(--bg-alt)}
body{background:var(--bg);color:var(--ink)}

/* ---------- 2. GRAIN & LIGHT — what makes it read expensive ---------- */
/* one fixed grain sheet over the whole page, very low opacity */
body::after{
  content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
@media print{ body::after{display:none} }

/* a very soft warm light from the top of every paper section */
.section{position:relative}

/* ---------- 3. HEADER ---------- */
.hdr{height:var(--header-h);transition:background .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease)}
.hdr::before{
  background:linear-gradient(180deg,rgba(14,17,19,.72) 0%,rgba(14,17,19,.38) 55%,rgba(14,17,19,0) 100%);
}
.hdr.is-solid{background:rgba(244,239,230,.86);backdrop-filter:saturate(170%) blur(18px);
  border-bottom-color:var(--rule-soft);box-shadow:0 1px 0 rgba(20,24,26,.05),0 10px 30px -18px rgba(28,22,19,.35)}
body.page-light .hdr{background:rgba(244,239,230,.86);backdrop-filter:saturate(170%) blur(18px);border-bottom-color:var(--rule-soft)}
.nav__a{font-size:.7rem;letter-spacing:.2em}
.nav__a::after{height:1.5px;background:var(--clay)}
.nav__a[aria-current="page"]{color:var(--clay)}
.hdr.is-solid .nav__a:hover,body.page-light .nav__a:hover{color:var(--clay)}
/* header logo never gets lost on a bright photo */
.hdr:not(.is-solid) .hdr__logo img{filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}

/* ---------- 4. TYPE ---------- */
.d1{letter-spacing:-.022em;font-weight:400}
.d2{letter-spacing:-.016em}
.d3{letter-spacing:-.01em}
.eyebrow{letter-spacing:.3em;font-size:.6563rem;color:var(--accent);
  display:flex;align-items:center;align-self:start;justify-self:start;
  gap:.9em;margin-bottom:1.3em;width:fit-content}
.eyebrow::before{content:"";width:clamp(18px,3vw,34px);height:1px;background:var(--accent-line);flex:none;opacity:.9}
.section--dark .eyebrow,.hero .eyebrow{color:var(--sand)}
.section--dark .eyebrow::before,.hero .eyebrow::before{background:var(--brass)}
.lede{color:var(--ink-soft);font-weight:400}
.prose p{color:var(--ink-soft)}
.quote{color:var(--ink)}
/* clay drop-cap flourish on the first paragraph of a prose block */
.prose--lead>p:first-child{font-size:1.08em;color:var(--ink)}

/* ---------- 5. BUTTONS ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  padding:1.15em 2.3em;min-height:52px;letter-spacing:.2em;font-size:.75rem;
  background:var(--obsidian);border-color:var(--obsidian);color:var(--warm-white);
  transition:color .45s var(--ease),border-color .45s var(--ease),transform .35s var(--ease),box-shadow .45s var(--ease);
  box-shadow:var(--sh-1);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--clay);
  transform:translateY(101%);transition:transform .55s var(--ease-expo);
}
.btn:hover{border-color:var(--clay);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:hover::before{transform:translateY(0)}
.btn--line,.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule);box-shadow:none}
.btn--line:hover,.btn--ghost:hover{color:#fff;border-color:var(--clay)}
.hero .btn--line{color:var(--warm-white);border-color:rgba(244,239,230,.45);backdrop-filter:blur(3px)}
.section--dark .btn{background:var(--warm-white);color:var(--obsidian);border-color:var(--warm-white)}
.section--dark .btn:hover{color:#fff;border-color:var(--clay)}
.ctapair{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,4vw,38px)}
.ctapair .btn{flex:1 1 auto;min-width:0}
@media (min-width:600px){ .ctapair .btn{flex:0 0 auto} }

/* ---------- 6. MEDIA ---------- */
.media{background:var(--obsidian-2);border-radius:2px}
.media img{transition:transform 1.4s var(--ease-expo),filter 1.4s var(--ease)}
/* a hairline + inner shadow gives every photo a printed edge */
.media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(20,24,26,.10), inset 0 -70px 90px -70px rgba(14,17,19,.55);
}
.section--dark .media::after{box-shadow:inset 0 0 0 1px rgba(244,239,230,.10), inset 0 -70px 90px -70px rgba(0,0,0,.6)}
.card:hover .media img,a:hover>.media img{transform:scale(1.055)}
figure figcaption,.cap{color:var(--ink-mute)}

/* ---------- 7. HERO ---------- */
.hero{min-height:86svh;padding-bottom:clamp(44px,8vw,96px)}
.hero--tall{min-height:100svh}
@media (min-width:1080px){ .hero{min-height:80svh} .hero--tall{min-height:100svh} }
.hero__bg{overflow:hidden}
.hero__bg .media::after{display:none}
.hero__bg img{transform:scale(1.08);will-change:transform}
/* the gradient stack: dark at top for the header, dark at the bottom for the words */
.hero::after{
  background:
    linear-gradient(180deg,rgba(14,17,19,.56) 0%,rgba(14,17,19,.05) 30%,rgba(14,17,19,.16) 56%,rgba(14,17,19,.80) 100%),
    linear-gradient(90deg,rgba(14,17,19,.58) 0%,rgba(14,17,19,.10) 50%,rgba(14,17,19,0) 82%),
    radial-gradient(130% 100% at 50% 42%,rgba(0,0,0,0) 46%,rgba(0,0,0,.26) 100%);
}
.hero .wrap{position:relative;z-index:1}
.hero .d1{text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero .lede{color:rgba(244,239,230,.92);max-width:38ch}
.hero .lede--wide{max-width:56ch}
.hero__foot{border-top-color:rgba(244,239,230,.24)}
.hero__foot span{color:rgba(244,239,230,.86)}
.hero__scroll{position:absolute;right:var(--gut);bottom:clamp(20px,3vw,34px);
  font-family:var(--f-disp);font-size:.625rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(244,239,230,.62);writing-mode:vertical-rl;display:none}
@media (min-width:900px){ .hero__scroll{display:block} }
.hero__scroll::after{content:"";display:block;width:1px;height:46px;margin:12px auto 0;
  background:linear-gradient(180deg,rgba(244,239,230,.7),rgba(244,239,230,0));
  animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* the trust grid under the homepage headline */
.trust{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:rgba(244,239,230,.18);border:1px solid rgba(244,239,230,.18)}
.trust>div{background:rgba(14,17,19,.42);backdrop-filter:blur(8px);padding:14px 16px}
.trust b{display:block;font-family:var(--f-disp);font-size:clamp(1rem,2.6vw,1.35rem);
  font-weight:500;color:var(--warm-white);line-height:1.1}
.trust span{display:block;margin-top:.25em;font-family:var(--f-disp);font-size:.625rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
@media (min-width:860px){ .trust{grid-template-columns:repeat(4,1fr);max-width:840px} }

/* inner-page hero: shorter than home, same treatment */
.hero--page{min-height:62svh}
@media (min-width:1080px){ .hero--page{min-height:58svh} }
.hero--page .d1{font-size:clamp(2.1rem,7vw,4.6rem)}
.phead{display:none}

/* ---------- 8. SECTIONS ---------- */
/* a dark band should feel like a different room, not a colour swap */
.section--dark{position:relative;overflow:hidden}
.section--dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 15% 0%,rgba(167,95,51,.18) 0%,rgba(167,95,51,0) 60%),
             radial-gradient(70% 60% at 100% 100%,rgba(90,99,73,.16) 0%,rgba(90,99,73,0) 62%);
}
.section--dark>*{position:relative;z-index:1}

/* the number band on the homepage */
.proof,.stats{background:var(--rule-soft);box-shadow:var(--sh-1)}
.proof>div,.stat{background:var(--bg-card);padding:clamp(24px,3.4vw,40px) clamp(18px,2.6vw,32px);
  transition:background .5s var(--ease),transform .5s var(--ease)}
.proof>div:hover,.stat:hover{transform:translateY(-3px)}
.proof b,.stat b{color:var(--ink);font-weight:400}
.proof b::after,.stat b::after{content:"";display:block;width:26px;height:2px;background:var(--clay);margin-top:.42em}
.section--dark .stat,.section--dark .proof>div{background:var(--obsidian-2)}
.section--dark .proof b,.section--dark .stat b{color:var(--warm-white)}

.hr{background:var(--rule-soft)}
.notice{border-left-width:3px;border-left-color:var(--clay);background:var(--bg-card);box-shadow:var(--sh-1)}
.spec dd{color:var(--ink)}
.tag{border-color:var(--rule);color:var(--ink-soft);background:var(--bg-card)}

/* ---------- 9. CARDS, ROWS, CHIPS ---------- */
.card .media{margin-bottom:1.25rem;box-shadow:var(--sh-1);transition:box-shadow .6s var(--ease)}
.card:hover .media{box-shadow:var(--sh-3)}
.card__t{transition:color .35s var(--ease)}
.card:hover .card__t{color:var(--clay)}
.card__m span{color:var(--ink-mute);letter-spacing:.18em}
.row{border-bottom-color:var(--rule-soft);transition:padding-left .5s var(--ease-expo),background .5s var(--ease)}
.row:hover{padding-left:1rem;background:linear-gradient(90deg,rgba(167,95,51,.07),rgba(167,95,51,0) 60%)}
.row:hover .row__t{color:var(--clay)}
.chip{border-color:var(--rule);transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.chip:hover{border-color:var(--clay);color:var(--clay)}
.chip[aria-pressed="true"]{background:var(--obsidian);border-color:var(--obsidian);color:var(--warm-white)}
.viewtog{border-color:var(--rule)}
.viewtog button[aria-pressed="true"]{background:var(--obsidian);color:var(--warm-white)}
.pn a{background:var(--bg-card)}
.pn a:hover{background:var(--bg-alt)}
.plist li{border-bottom-color:var(--rule-soft)}
.plist .n{color:var(--clay)}

/* ---------- 10. FOOTER ---------- */
.ftr{background:var(--umber);position:relative;overflow:hidden}
.ftr::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 70% at 10% 0%,rgba(167,95,51,.16),rgba(167,95,51,0) 60%)}
.ftr>*{position:relative;z-index:1}
.ftr h4{color:var(--brass);letter-spacing:.24em}
.ftr a:hover{color:var(--clay-glow)}

/* ---------- 11. MOTION (CSS side; GSAP does the rest) ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.js .rv.is-in{opacity:1;transform:none}
/* headline lines rise out of a mask */
.js .tl{display:block;overflow:hidden}
.js .tl>span{display:block;transform:translateY(104%);transition:transform 1.15s var(--ease-expo)}
.js .tl.is-in>span,.js .is-in .tl>span{transform:none}
.js .tl:nth-child(2)>span{transition-delay:.09s}
.js .tl:nth-child(3)>span{transition-delay:.18s}
/* image clip reveal */
.js .cr picture{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--ease-expo)}
.js .cr.is-in picture{clip-path:inset(0 0 0 0)}

/* ---------- 12. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .tl>span,.js .cr picture{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .hero__bg img{transform:none}
  .hero__scroll::after{animation:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- 13. PAGE CURTAIN + hero breadcrumb ---------- */
.curtain{position:fixed;inset:0;z-index:1500;background:var(--obsidian);pointer-events:none;
  transform:translateY(-100%)}
.hero__crumb{margin-bottom:1.3rem}
.hero__crumb span{font-family:var(--f-disp);font-size:.6563rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(244,239,230,.78)}
.hero__crumb a{color:var(--sand)}
.hero__crumb a:hover{color:var(--clay-glow)}
.hero .d2{font-size:clamp(1.9rem,5.6vw,3.6rem);color:var(--warm-white)}
.hero--page .lede{max-width:56ch}
.no-motion .curtain{display:none}

/* ---------- 14. when GSAP drives the headline, CSS must let go ---------- */
.gsap-on .tl>span{transition:none}

/* ---------- 15. hero CTA must read on a photograph ---------- */
.hero .btn{background:var(--warm-white);color:var(--obsidian);border-color:var(--warm-white);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.6)}
.hero .btn:hover{color:#fff;border-color:var(--clay)}
.hero .btn--line,.hero .btn--ghost{background:rgba(20,24,26,.28);color:var(--warm-white);
  border-color:rgba(244,239,230,.5);backdrop-filter:blur(6px)}
.hero .btn--line:hover,.hero .btn--ghost:hover{color:#fff;border-color:var(--clay)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:clamp(24px,4vw,38px)}

/* ---------- 16. full-bleed breathing band ---------- */
.band{margin:0;padding:0;background:var(--obsidian)}
.band .media{width:100%;border-radius:0}
.band .media::after{box-shadow:inset 0 0 0 0 transparent,
  inset 0 90px 110px -90px rgba(14,17,19,.55), inset 0 -90px 110px -90px rgba(14,17,19,.55)}
.section--tight{padding-block:clamp(36px,5.5vw,72px)}

/* ==========================================================================
   17. HOMEPAGE HERO — several photographs, crossfading
   ========================================================================== */
.hero__bg--show{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hslide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)}
.hslide.is-on{opacity:1}
.hslide picture,.hslide img{display:block;width:100%;height:100%}
.hslide img{object-fit:cover;transform:scale(1.06);transition:transform 9s linear}
.hslide.is-on img{transform:scale(1.14)}
.no-motion .hslide{transition:none}
.no-motion .hslide img{transform:none;transition:none}
.no-motion .hslide:not(.is-on){display:none}

/* the little progress bars */
.hdots{position:absolute;left:var(--gut);bottom:clamp(16px,2.4vw,26px);z-index:2;
  display:flex;gap:8px;align-items:center}
.hdots button{width:30px;height:40px;padding:19px 0;box-sizing:content-box;background:none;border:0;cursor:pointer;
  display:flex;align-items:center}
.hdots i{display:block;width:100%;height:2px;background:rgba(244,239,230,.32);position:relative;overflow:hidden}
.hdots i::after{content:"";position:absolute;inset:0;background:var(--sand);transform:scaleX(0);transform-origin:left}
.hdots button[aria-current="true"] i::after{animation:hbar 6s linear forwards}
@keyframes hbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.no-motion .hdots button[aria-current="true"] i::after{animation:none;transform:scaleX(1)}
@media (max-width:640px){ .hdots{bottom:10px} .hdots button{width:22px;height:40px;padding:19px 0} }

/* ==========================================================================
   18. MOBILE MENU — a panel worth opening
   ========================================================================== */
.drawer{background:var(--umber);padding:0;display:block;overflow-y:auto;overscroll-behavior:contain}
.drawer::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 100% 0%,rgba(167,95,51,.22),rgba(167,95,51,0) 62%),
             radial-gradient(70% 50% at 0% 100%,rgba(90,99,73,.20),rgba(90,99,73,0) 60%)}
.drawer__in{position:relative;z-index:1;min-height:100%;
  padding:calc(var(--header-h) + 22px) var(--gut) 34px;display:flex;flex-direction:column}
.drawer__eb{color:var(--brass)!important;margin-bottom:18px}
.drawer__eb::before{background:var(--brass)}

.drawer__nav{border-top:1px solid rgba(244,239,230,.13)}
.drawer__nav li{border-bottom:1px solid rgba(244,239,230,.13);
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease-out),transform .6s var(--ease-out);
  transition-delay:calc(var(--i) * 45ms)}
body.menu-open .drawer__nav li{opacity:1;transform:none}
.drawer__nav a{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:0 14px;padding:15px 0;color:var(--warm-white);position:relative}
.dn__n{font-family:var(--f-disp);font-size:.625rem;letter-spacing:.2em;color:var(--brass);
  align-self:center;min-width:22px}
.dn__t{font-family:var(--f-disp);font-size:clamp(1.55rem,7.4vw,2.1rem);line-height:1.05;font-weight:400;
  transition:color .35s var(--ease),transform .5s var(--ease)}
.dn__t em{display:block;font-style:normal;font-family:var(--f-body);
  font-size:.75rem;letter-spacing:.04em;color:rgba(244,239,230,.52);margin-top:.35em;line-height:1.3}
.dn__img{display:block;width:74px;height:50px;overflow:hidden;border-radius:2px;
  opacity:.72;filter:saturate(.85);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.dn__img img{width:100%;height:100%;object-fit:cover}
.dn__go{font-size:1.05rem;color:var(--brass);opacity:.55;transition:transform .45s var(--ease),opacity .35s}
.drawer__nav a:hover .dn__t,.drawer__nav a:active .dn__t{color:var(--clay-glow)}
.drawer__nav a:hover .dn__img{opacity:1;transform:scale(1.05)}
.drawer__nav a:hover .dn__go{transform:translateX(5px);opacity:1}
@media (max-width:380px){ .dn__img{width:58px;height:40px} }

.drawer__foot{margin-top:auto;padding-top:26px;display:block;
  opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out) .30s,transform .7s var(--ease-out) .30s}
body.menu-open .drawer__foot{opacity:1;transform:none}
.drawer__cta{width:100%;background:var(--warm-white);color:var(--obsidian);border-color:var(--warm-white);margin-bottom:18px}
.drawer__rows{display:grid;gap:1px;background:rgba(244,239,230,.13);border:1px solid rgba(244,239,230,.13)}
.drawer__rows a{background:var(--umber);display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:13px 14px;color:rgba(244,239,230,.92);font-size:.9375rem;min-height:50px}
.drawer__rows a span{font-family:var(--f-disp);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass)}
.drawer__rows a:hover{color:var(--clay-glow)}
.drawer__addr{margin-top:16px;color:rgba(244,239,230,.5)!important}
@media (min-width:1080px){ .drawer{display:none} }

/* the burger itself */
.burger{border:1px solid transparent;transition:border-color .4s var(--ease),background .4s var(--ease)}
body.menu-open .burger{border-color:rgba(244,239,230,.3);color:var(--warm-white)}
.hdr.is-solid .burger,body.page-light .burger{color:var(--ink)}
body.menu-open .hdr.is-solid .burger,body.menu-open.page-light .burger{color:var(--warm-white)}
body.menu-open .hdr{background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important}
body.menu-open .hdr .logo-light{display:block}
body.menu-open .hdr .logo-dark{display:none}

/* 18b — beat main.css's generic .drawer__nav a span rule */
.drawer .drawer__nav a .dn__n{font-family:var(--f-disp);font-size:.625rem;letter-spacing:.2em;
  color:var(--brass);text-transform:none}
.drawer .drawer__nav a .dn__t{font-family:var(--f-disp);font-size:clamp(1.6rem,7.6vw,2.15rem);
  line-height:1.04;font-weight:400;letter-spacing:-.01em;color:var(--warm-white);text-transform:none}
.drawer .drawer__nav a .dn__t em{font-family:var(--f-body);font-size:.75rem;letter-spacing:.03em;
  color:rgba(244,239,230,.55);text-transform:none;font-weight:400}
.drawer .drawer__nav a .dn__go{font-family:var(--f-body);font-size:1.05rem;letter-spacing:0;color:var(--brass)}
.drawer .drawer__nav a .dn__img{width:74px;height:50px}
.drawer .btn.drawer__cta{background:var(--warm-white);color:var(--obsidian);border-color:var(--warm-white)}
.drawer .btn.drawer__cta:hover{color:#fff;border-color:var(--clay)}

/* ==========================================================================
   19. DIAGRAMS — a readable version for phones
   ========================================================================== */
.fplain{display:none}
@media (max-width:860px){
  .fig .fig__scroll,.fig .fig__hint{display:none!important}
  .fplain{display:block;margin-top:2px}
  .fig{padding:0!important;background:none!important;border:0!important}
}
.fplain--two{display:grid;gap:12px}
.fp__box{background:var(--bg-card);border:1px solid var(--rule-soft);border-radius:4px;
  padding:16px 16px 18px;box-shadow:var(--sh-1);position:relative}
.section--dark .fp__box{background:var(--obsidian-2);border-color:rgba(244,239,230,.12)}
.fp__box+.fp__box{margin-top:0}
.fp__box h4{font-family:var(--f-disp);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .95em;display:flex;align-items:center;gap:.6em}
.fp__box h4::before{content:"";width:16px;height:1px;background:var(--accent-line);flex:none}
.fp__box--bad h4{color:var(--accent)}
.fp__box--bad h4::before{background:var(--accent)}
.fp__box--good h4{color:var(--olive)}
.fp__box--good h4::before{background:var(--olive)}
.section--dark .fp__box--good h4{color:var(--olive-light)}
.section--dark .fp__box--good h4::before{background:var(--olive-light)}
.section--dark .fp__box--bad h4{color:var(--clay-light)}
.section--dark .fp__box--bad h4::before{background:var(--clay-light)}
.fp__box ol{counter-reset:fp;display:grid;gap:.72rem}
.fp__box ol li{counter-increment:fp;display:grid;grid-template-columns:22px 1fr;gap:.7em;
  font-size:.9375rem;line-height:1.5;color:var(--ink-soft)}
.fp__box ol li::before{content:counter(fp,decimal-leading-zero);font-family:var(--f-disp);
  font-size:.625rem;letter-spacing:.1em;color:var(--ink-mute);padding-top:.35em}
.fp__box ol li b{color:var(--ink);font-weight:600}
.fp__facts{display:grid;gap:.85rem}
.fp__facts li{display:grid;gap:.15rem;padding-bottom:.85rem;border-bottom:1px solid var(--rule-soft)}
.fp__facts li:last-child{padding-bottom:0;border-bottom:0}
.fp__facts b{font-family:var(--f-disp);font-size:.9375rem;font-weight:600;color:var(--ink)}
.fp__facts span{font-size:.9063rem;line-height:1.5;color:var(--ink-soft)}
.fp__note{margin-top:.9rem;font-size:.8438rem;line-height:1.5;color:var(--ink-mute);
  border-left:2px solid var(--accent-line);padding-left:.8em}

/* ==========================================================================
   20. DESKTOP RHYTHM — no more dead columns
   ========================================================================== */
.plist{max-width:1180px;margin-inline:auto}
@media (min-width:800px){
  .plist li{grid-template-columns:48px minmax(140px,210px) minmax(0,1fr);gap:1.6rem;align-items:baseline}
  .plist p{max-width:62ch}
}
.journey{max-width:1280px;margin-inline:auto}
@media (min-width:1000px){
  .journey__aside{position:sticky;top:calc(var(--header-h) + 30px);align-self:start}
}
/* a section whose only left column is a label should not leave a canyon */
@media (min-width:900px){
  .split{grid-template-columns:minmax(150px,17%) minmax(0,1fr);gap:clamp(20px,3vw,48px)}
  .split>div{max-width:1040px}
}
.kicker{max-width:var(--maxw)}

/* ==========================================================================
   21. GALLERY
   ========================================================================== */
.gbar{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;
  padding-bottom:1.3rem;border-bottom:1px solid var(--rule-soft);margin-bottom:clamp(20px,3vw,34px)}
.gchips{display:flex;flex-wrap:wrap;gap:8px}
.gchips .chip{min-height:40px;padding:.5em .95em;font-size:.6875rem}
.ggrid{display:grid;gap:clamp(10px,1.4vw,18px);grid-template-columns:1fr}
@media (min-width:640px){ .ggrid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .ggrid{grid-template-columns:repeat(3,1fr)} }
.gtile{display:block;padding:0;border:0;background:none;cursor:zoom-in;text-align:left;position:relative}
.gtile .media{display:block;box-shadow:var(--sh-1);transition:box-shadow .6s var(--ease)}
.gtile:hover .media{box-shadow:var(--sh-3)}
.gtile img{transition:transform 1.2s var(--ease-expo)}
.gtile:hover img{transform:scale(1.06)}
.gtile__cap{display:block;margin-top:.7rem;font-size:.8438rem;line-height:1.45;color:var(--ink-mute)}
.gtile:hover .gtile__cap{color:var(--ink-soft)}
.gtile[hidden]{display:none}

/* lightbox */
.lbox{position:fixed;inset:0;z-index:1200;background:rgba(10,12,14,.96);
  display:flex;align-items:center;justify-content:center;padding:clamp(14px,4vw,56px)}
.lbox[hidden]{display:none}
.lbox figure{margin:0;max-width:min(1280px,94vw);text-align:center}
.lbox img{max-width:100%;max-height:78svh;width:auto;height:auto;object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lbox figcaption{margin-top:1rem;color:rgba(244,239,230,.74);font-size:.875rem}
.lbox__x{position:absolute;top:14px;right:16px;width:48px;height:48px;font-size:1.8rem;line-height:1;
  background:none;border:0;color:rgba(244,239,230,.8);cursor:pointer}
.lbox__x:hover{color:#fff}
.lbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  background:rgba(244,239,230,.10);border:1px solid rgba(244,239,230,.2);color:var(--warm-white);
  cursor:pointer;font-size:1.1rem;transition:background .3s var(--ease)}
.lbox__nav:hover{background:rgba(244,239,230,.22)}
.lbox__prev{left:clamp(8px,2vw,28px)}
.lbox__next{right:clamp(8px,2vw,28px)}
@media (max-width:640px){ .lbox__nav{top:auto;bottom:16px;transform:none;width:46px;height:46px} }
body.lbox-open{overflow:hidden}