/* ==========================================================================
   rahullaxmanpatil.com — Design System
   Identity: "Moss · Clay · Bone" — archival-editorial, warm, research-led.
   Author: Creaa Think Designs
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Surfaces */
  --bone:        #F6F2E9;
  --bone-2:      #EDE7D9;
  --paper:       #FFFDF7;
  --sand:        #E0D6C1;
  --sand-2:      #D2C5AB;

  /* Deep */
  --moss:        #26332A;
  --moss-2:      #2F4034;
  --moss-3:      #3D5342;
  --ink:         #17150F;
  --ink-2:       #211E16;

  /* Accents */
  --clay:        #B0512E;
  --clay-2:      #C96A42;
  --clay-soft:   #E8C7B4;
  --brass:       #9E8144;
  --brass-2:     #C0A468;

  /* Text */
  --tx:          #211E16;
  --tx-2:        #4A4536;
  --tx-3:        #6E6754;
  --tx-on-dark:  #F1EDE2;
  --tx-on-dark-2:#B9C2B4;

  /* Lines */
  --rule:        rgba(33,30,22,.14);
  --rule-2:      rgba(33,30,22,.28);
  --rule-dark:   rgba(241,237,226,.16);
  --rule-dark-2: rgba(241,237,226,.32);

  /* Type */
  --f-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body:    "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Metrics */
  --shell:     1320px;
  --gutter:    clamp(1.25rem, 4.2vw, 4.5rem);
  --sec-y:     clamp(4.5rem, 9vw, 9.5rem);
  --hdr-h:     72px;

  /* Motion */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bone);
  color:var(--tx);
  font-family:var(--f-body);
  font-size:clamp(1rem,.955rem + .19vw,1.0625rem);
  line-height:1.72;
  font-weight:380;
  letter-spacing:.001em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4,h5{ margin:0; font-weight:inherit; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
hr{ border:0; border-top:1px solid var(--rule); margin:0; }
::selection{ background:var(--clay); color:var(--bone); }

/* ---------- 3. Typography ------------------------------------------------ */
.d1,.d2,.d3,.d4{
  font-family:var(--f-display);
  font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 0;
  font-weight:380;
  letter-spacing:-.022em;
  line-height:1.02;
  text-wrap:balance;
}
.d1{ font-size:clamp(2.65rem,1.35rem + 5.9vw,6.1rem); }
.d2{ font-size:clamp(2.2rem,1.28rem + 4vw,4.5rem); line-height:1.05; }
.d3{ font-size:clamp(1.75rem,1.2rem + 2.3vw,3rem); line-height:1.1; letter-spacing:-.018em; }
.d4{ font-size:clamp(1.35rem,1.1rem + 1.1vw,1.95rem); line-height:1.18; letter-spacing:-.014em;
     font-variation-settings:"opsz" 40,"SOFT" 0,"WONK" 0; font-weight:450; }
.d-it{ font-style:italic; font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 1; }

.lead{
  font-size:clamp(1.125rem,1.02rem + .48vw,1.4rem);
  line-height:1.62; color:var(--tx-2); font-weight:360; letter-spacing:-.004em;
  text-wrap:pretty;
}
.body-lg{ font-size:clamp(1.03rem,.99rem + .2vw,1.125rem); line-height:1.76; }
.small{ font-size:.925rem; line-height:1.65; color:var(--tx-3); }

.eyebrow{
  font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--clay);
  display:flex; align-items:center; gap:.7rem; margin:0 0 1.4rem;
}
.eyebrow::before{
  content:""; width:clamp(20px,3vw,44px); height:1px; background:currentColor; flex:none; opacity:.6;
}
.eyebrow--dark{ color:var(--brass-2); }
.eyebrow--plain::before{ display:none; }

.idx{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em;
  color:var(--tx-3); text-transform:uppercase;
}

.prose > * + *{ margin-top:1.15em; }
.prose p{ color:var(--tx-2); text-wrap:pretty; }
.prose strong{ font-weight:600; color:var(--tx); }
.prose em{ font-style:italic; }
.prose--dark p{ color:var(--tx-on-dark-2); }
.prose--dark strong{ color:var(--tx-on-dark); }

.dropcap::first-letter{
  font-family:var(--f-display); font-variation-settings:"opsz" 144;
  font-size:3.85em; line-height:.82; float:left;
  margin:.06em .14em 0 0; color:var(--clay); font-weight:400;
}

/* ---------- 4. Layout ---------------------------------------------------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.shell--wide{ max-width:1600px; }
.shell--narrow{ max-width:900px; }
.sec{ padding-block:var(--sec-y); position:relative; }
.sec--tight{ padding-block:clamp(3rem,6vw,6rem); }
.g{ display:grid; gap:clamp(1.5rem,3vw,3rem); }
.g-12{ grid-template-columns:repeat(12,1fr); }

.surface-moss{ background:var(--moss); color:var(--tx-on-dark); }
.surface-moss .lead{ color:var(--tx-on-dark-2); }
.surface-ink{ background:var(--ink); color:var(--tx-on-dark); }
.surface-ink .lead{ color:var(--tx-on-dark-2); }
.surface-paper{ background:var(--paper); }
.surface-sand{ background:var(--bone-2); }

/* Fine paper grain — subtle, GPU-cheap */
.grain{ position:relative; }
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(33,30,22,.05) 1px, transparent 1px);
  background-size:3px 3px;
}
.surface-moss.grain::after,.surface-ink.grain::after{
  mix-blend-mode:overlay; opacity:.25;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
}

/* Corner ticks — signature framing device */
.ticks{ position:relative; }
.ticks::before,.ticks::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
  border-color:var(--brass); opacity:.55;
}
.ticks::before{ top:0; left:0; border-top:1px solid; border-left:1px solid; }
.ticks::after{ bottom:0; right:0; border-bottom:1px solid; border-right:1px solid; }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn{
  --btn-bg:var(--moss); --btn-fg:var(--bone); --btn-bd:var(--moss);
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.95rem 1.6rem; border:1px solid var(--btn-bd); border-radius:2px;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--f-mono); font-size:.755rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--clay);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out);
}
.btn:hover::before,.btn:focus-visible::before{ transform:scaleX(1); }
.btn:hover,.btn:focus-visible{ color:#fff; border-color:var(--clay); }
.btn .ar{ transition:transform .4s var(--ease); flex:none; }
.btn:hover .ar{ transform:translateX(4px); }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--tx); --btn-bd:var(--rule-2); }
.btn--ghost-light{ --btn-bg:transparent; --btn-fg:var(--tx-on-dark); --btn-bd:var(--rule-dark-2); }
.btn--clay{ --btn-bg:var(--clay); --btn-fg:#fff; --btn-bd:var(--clay); }
.btn--clay::before{ background:var(--moss); }
.btn--clay:hover,.btn--clay:focus-visible{ border-color:var(--moss); }
.btn--bone{ --btn-bg:var(--bone); --btn-fg:var(--ink); --btn-bd:var(--bone); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* Text link with animated rule */
.tlink{
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--clay); padding-bottom:.35rem; position:relative; font-weight:500;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(.28); transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.tlink:hover::after,.tlink:focus-visible::after{ transform:scaleX(1); }
.tlink--light{ color:var(--brass-2); }
.tlink .ar{ transition:transform .4s var(--ease); }
.tlink:hover .ar{ transform:translateX(4px); }

/* Inline prose link */
.ilink{ color:var(--clay); text-decoration:none; border-bottom:1px solid rgba(176,81,46,.35); transition:border-color .3s, color .3s; }
.ilink:hover,.ilink:focus-visible{ border-color:var(--clay); color:var(--clay-2); }
.prose--dark .ilink{ color:var(--brass-2); border-bottom-color:rgba(192,164,104,.4); }
.prose--dark .ilink:hover{ color:var(--clay-soft); border-color:var(--clay-soft); }

/* ---------- 6. Plate (image device — never crops) ------------------------ */
.plate{
  position:relative; background:var(--bone-2); padding:clamp(.55rem,1.2vw,.9rem);
  border:1px solid var(--rule); border-radius:2px;
}
.plate__inner{
  position:relative; background:var(--sand); overflow:hidden;
  border:1px solid rgba(158,129,68,.35);
}
.plate img{ width:100%; height:auto; display:block; }
.plate__cap{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.75rem .25rem .1rem; font-family:var(--f-mono); font-size:.66rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tx-3);
}
.plate__cap b{ font-weight:500; color:var(--clay); }
.plate--dark{ background:rgba(255,255,255,.04); border-color:var(--rule-dark); }
.plate--dark .plate__inner{ background:var(--moss-2); border-color:rgba(192,164,104,.3); }
.plate--dark .plate__cap{ color:var(--tx-on-dark-2); }
.plate--dark .plate__cap b{ color:var(--brass-2); }
.plate--bare{ padding:0; border:none; background:none; }

/* Fixed-ratio frames use CONTAIN so no face is ever cut */
.fit{ display:grid; place-items:center; background:var(--sand); }
.fit img{ width:100%; height:100%; object-fit:contain; object-position:center; }
.fit--moss{ background:var(--moss-2); }
.fit--4x5{ aspect-ratio:4/5; }
.fit--1x1{ aspect-ratio:1/1; }
.fit--3x2{ aspect-ratio:3/2; }
.fit--16x9{ aspect-ratio:16/9; }

/* Gentle zoom on hover — scoped to wrappers that can afford it */
.zoomable img{ transition:transform 1.1s var(--ease-out); }
.zoomable:hover img{ transform:scale(1.028); }

/* ---------- 7. Section heads --------------------------------------------- */
.shead{ display:grid; gap:clamp(1.25rem,2.5vw,2.25rem); margin-bottom:clamp(2.5rem,5vw,4.5rem); }
@media (min-width:900px){
  .shead--split{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:end; gap:clamp(2rem,5vw,5rem); }
}
.shead__rule{ height:1px; background:var(--rule); margin-top:1.5rem; }
.surface-moss .shead__rule,.surface-ink .shead__rule{ background:var(--rule-dark); }

/* ---------- 8. Header / Nav ---------------------------------------------- */
.skip{
  position:fixed; left:1rem; top:-100px; z-index:200;
  background:var(--clay); color:#fff; padding:.75rem 1.15rem; border-radius:2px;
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  transition:top .25s var(--ease);
}
.skip:focus{ top:1rem; }

.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--hdr-h);
  display:flex; align-items:center;
  background:rgba(246,242,233,0); border-bottom:1px solid transparent;
  transition:background-color .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s;
}
.hdr__in{ width:100%; max-width:1600px; margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.hdr.is-solid{
  background:rgba(246,242,233,.94); border-bottom-color:var(--rule);
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
}
/* Over dark heroes */
.hdr--onDark:not(.is-solid) .mark__name,
.hdr--onDark:not(.is-solid) .mark__role,
.hdr--onDark:not(.is-solid) .nav__a,
.hdr--onDark:not(.is-solid) .burger{ color:var(--tx-on-dark); }
.hdr--onDark:not(.is-solid) .mark__glyph{ border-color:rgba(241,237,226,.4); color:var(--brass-2); }
.hdr--onDark:not(.is-solid) .burger__l{ background:var(--tx-on-dark); }

.mark{ display:flex; align-items:center; gap:.75rem; text-decoration:none; flex:none; }
.mark__glyph{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  border:1px solid var(--rule-2); border-radius:50%; color:var(--clay);
  font-family:var(--f-display); font-size:.9rem; font-variation-settings:"opsz" 40; font-weight:500;
  transition:border-color .4s var(--ease), color .4s var(--ease), transform .5s var(--ease);
}
.mark:hover .mark__glyph{ transform:rotate(-8deg); border-color:var(--clay); color:var(--clay); }
.mark__tx{ display:grid; line-height:1.1; }
.mark__name{
  font-family:var(--f-display); font-variation-settings:"opsz" 40; font-weight:500;
  font-size:1.02rem; letter-spacing:-.015em; color:var(--tx); white-space:nowrap;
}
.mark__role{
  font-family:var(--f-mono); font-size:.545rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tx-3); margin-top:.2rem; white-space:nowrap;
}

.nav{ display:none; }
@media (min-width:1240px){
  .nav{ display:flex; align-items:center; gap:clamp(.9rem,1.55vw,1.5rem); }
  .burger{ display:none !important; }
}
.nav__a{
  position:relative; text-decoration:none; color:var(--tx-2);
  font-family:var(--f-mono); font-size:.695rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; padding:.4rem 0; white-space:nowrap;
  transition:color .35s var(--ease);
}
.nav__a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--clay); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.nav__a:hover,.nav__a:focus-visible{ color:var(--clay); }
.nav__a:hover::after,.nav__a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }
.nav__a[aria-current="page"]{ color:var(--clay); }
.nav__a[aria-current="page"]::after{ transform:scaleX(1); }
.hdr--onDark:not(.is-solid) .nav__a[aria-current="page"]{ color:var(--brass-2); }
.hdr--onDark:not(.is-solid) .nav__a[aria-current="page"]::after{ background:var(--brass-2); }

.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 9px; align-items:flex-end;
  background:none; border:0; cursor:pointer; color:var(--tx);
}
.burger__l{ display:block; height:1.5px; width:24px; background:currentColor; border-radius:2px;
  transition:transform .45s var(--ease-out), width .45s var(--ease-out), opacity .3s; }
.burger__l:nth-child(2){ width:17px; }
.burger[aria-expanded="true"] .burger__l:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__l:nth-child(2){ opacity:0; width:24px; }
.burger[aria-expanded="true"] .burger__l:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); width:24px; }

/* Full-screen menu */
.menu{
  position:fixed; inset:0; z-index:99; background:var(--moss); color:var(--tx-on-dark);
  display:flex; flex-direction:column; padding-top:var(--hdr-h);
  clip-path:inset(0 0 100% 0); visibility:hidden;
  transition:clip-path .72s var(--ease-out), visibility 0s linear .72s;
  overflow-y:auto; overscroll-behavior:contain;
}
.menu.is-open{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .72s var(--ease-out), visibility 0s; }
.menu__in{ width:100%; max-width:1600px; margin-inline:auto; padding:clamp(1.75rem,5vw,3.5rem) var(--gutter) clamp(2.5rem,6vw,4rem);
  display:grid; gap:clamp(2rem,5vw,4rem); align-content:start; flex:1; }
@media (min-width:960px){ .menu__in{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:start; } }

.menu__list{ display:grid; gap:.1rem; }
.menu__item{ border-bottom:1px solid var(--rule-dark); opacity:0; transform:translateY(18px); }
.menu.is-open .menu__item{ animation:menuIn .6s var(--ease-out) forwards; }
@keyframes menuIn{ to{ opacity:1; transform:none; } }
.menu__a{
  display:flex; align-items:baseline; gap:clamp(.9rem,2vw,1.6rem); text-decoration:none;
  padding:clamp(.7rem,1.6vw,1.05rem) 0; color:var(--tx-on-dark);
  transition:color .4s var(--ease), padding-left .5s var(--ease-out);
}
.menu__a:hover,.menu__a:focus-visible{ color:var(--brass-2); padding-left:.6rem; }
.menu__n{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; color:var(--brass); flex:none; }
.menu__t{ font-family:var(--f-display); font-variation-settings:"opsz" 90; font-weight:380;
  font-size:clamp(1.6rem,1.05rem + 2.3vw,2.9rem); line-height:1.06; letter-spacing:-.022em; }
.menu__a[aria-current="page"]{ color:var(--brass-2); }

.menu__aside{ display:grid; gap:1.75rem; align-content:start; padding-top:.5rem; }
.menu__block dt{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); margin-bottom:.55rem; }
.menu__block dd{ margin:0; }
.menu__block a{ color:var(--tx-on-dark); text-decoration:none; border-bottom:1px solid transparent;
  font-size:1.02rem; transition:border-color .3s, color .3s; }
.menu__block a:hover,.menu__block a:focus-visible{ color:var(--brass-2); border-bottom-color:var(--brass-2); }
body.menu-open{ overflow:hidden; }

/* ---------- 9. HOME — Hero ----------------------------------------------- */
.hero{
  position:relative; background:var(--moss); color:var(--tx-on-dark);
  padding-top:calc(var(--hdr-h) + clamp(2.5rem,6vw,5rem));
  padding-bottom:clamp(3rem,6vw,5.5rem);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(180deg,transparent,rgba(23,21,15,.42));
  pointer-events:none;
}
/* faint contour grid */
.hero__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.13;
  background-image:linear-gradient(rgba(241,237,226,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(241,237,226,.5) 1px,transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  -webkit-mask-image:radial-gradient(120% 90% at 72% 30%,#000 15%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 72% 30%,#000 15%,transparent 78%);
}
.hero__in{ position:relative; z-index:2; display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:1040px){
  .hero__in{ grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); align-items:center; gap:clamp(3rem,6vw,6rem); }
}
.hero__name{ margin:0 0 clamp(1.25rem,2.5vw,1.9rem); }
.hero__name .ln{ display:block; overflow:hidden; }
.hero__name .ln > span{ display:block; transform:translateY(105%); animation:lineUp 1s var(--ease-out) forwards; }
.hero__name .ln:nth-child(2) > span{ animation-delay:.12s; }
.hero__name .ln:nth-child(2){ color:var(--brass-2); font-style:italic; font-variation-settings:"opsz" 144,"WONK" 1; }
@keyframes lineUp{ to{ transform:none; } }

.hero__roles{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.1rem;
  font-family:var(--f-mono); font-size:.71rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-on-dark-2); margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
.hero__roles li{ display:flex; align-items:center; gap:1.1rem; }
.hero__roles li + li::before{ content:""; width:5px; height:5px; background:var(--clay-2); transform:rotate(45deg); flex:none; }
.hero__roles li:first-child{ color:var(--brass-2); }
.hero__lead{ max-width:56ch; margin-bottom:clamp(2rem,3.5vw,2.75rem); }

.hero__visual{ position:relative; }
.hero__plate{
  position:relative; max-width:min(100%,400px); margin-inline:auto;
  background:rgba(246,242,233,.06); padding:clamp(.6rem,1.3vw,1rem);
  border:1px solid rgba(192,164,104,.34); border-radius:2px;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.hero__plate .fit{ background:#EFEAE0; }
.hero__badge{
  position:absolute; left:clamp(-.5rem,-1vw,-1.5rem); bottom:clamp(1.5rem,4vw,3rem);
  background:var(--clay); color:#fff; padding:.7rem 1rem; max-width:210px;
  font-family:var(--f-mono); font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; line-height:1.6;
  box-shadow:0 18px 40px rgba(23,21,15,.34);
}
.hero__badge b{ display:block; color:#FBE7DA; font-weight:500; }

/* Marquee strip */
.strip{
  --strip-gap:clamp(1.75rem,3.5vw,3.25rem);
  border-top:1px solid var(--rule-dark); background:var(--moss-2); color:var(--tx-on-dark-2); overflow:hidden;
}
.strip__track{
  display:flex; gap:var(--strip-gap); width:max-content;
  padding-block:.95rem; animation:slide 52s linear infinite;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.17em; text-transform:uppercase;
}
.strip:hover .strip__track{ animation-play-state:paused; }
.strip__set{ display:flex; align-items:center; gap:var(--strip-gap); }
.strip__set i{ display:flex; align-items:center; gap:var(--strip-gap); font-style:normal; white-space:nowrap; }
.strip__set i::after{ content:"◆"; color:var(--clay-2); font-size:.5rem; }
@keyframes slide{ to{ transform:translateX(calc(-50% - (var(--strip-gap) / 2))); } }

/* ---------- 10. Intro / Perspective -------------------------------------- */
.intro__grid{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); }
@media (min-width:1000px){
  .intro__grid{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(3rem,6vw,6.5rem); }
}
.dossier{ border-top:2px solid var(--ink); padding-top:1.5rem; align-self:start; }
.dossier__row{ display:grid; gap:.35rem; padding:1.05rem 0; border-bottom:1px solid var(--rule); }
@media (min-width:520px){ .dossier__row{ grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:1.25rem; align-items:baseline; } }
.dossier__k{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-3); }
.dossier__v{ font-size:.98rem; line-height:1.55; color:var(--tx); }
.dossier__v em{ font-style:normal; color:var(--clay); }

/* ---------- 11. Focus index (Areas of Focus) ----------------------------- */
.findex{ border-top:1px solid var(--rule-dark); }
.findex__item{ border-bottom:1px solid var(--rule-dark); }
.findex__btn{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:grid; gap:.35rem 1.5rem; align-items:baseline;
  padding:clamp(1.25rem,2.6vw,2rem) 0; color:inherit;
  transition:padding-left .55s var(--ease-out);
}
@media (min-width:760px){
  .findex__btn{ grid-template-columns:auto minmax(0,1fr) auto; }
}
.findex__n{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; color:var(--brass); }
.findex__t{
  font-family:var(--f-display); font-variation-settings:"opsz" 72; font-weight:380;
  font-size:clamp(1.45rem,1.05rem + 1.7vw,2.35rem); line-height:1.1; letter-spacing:-.02em;
  color:var(--tx-on-dark); transition:color .4s var(--ease);
}
.findex__sign{ font-family:var(--f-mono); font-size:1rem; color:var(--brass); transition:transform .45s var(--ease); }
.findex__item.is-open .findex__sign{ transform:rotate(45deg); }
.findex__btn:hover,.findex__btn:focus-visible{ padding-left:.7rem; }
.findex__btn:hover .findex__t,.findex__item.is-open .findex__t{ color:var(--brass-2); }
.findex__panel{ overflow:hidden; height:0; transition:height .55s var(--ease-out); }
.findex__panel-in{ padding:0 0 clamp(1.5rem,3vw,2.25rem); display:grid; gap:1.5rem; }
@media (min-width:760px){
  .findex__panel-in{ grid-template-columns:minmax(0,.18fr) minmax(0,1fr) minmax(0,.7fr); gap:clamp(1.5rem,3vw,3rem); }
  .findex__panel-in > :first-child{ grid-column:2; }
}
.findex__tags{ display:flex; flex-wrap:wrap; gap:.45rem; align-content:start; }
.tag{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  padding:.4rem .7rem; border:1px solid var(--rule-dark-2); color:var(--tx-on-dark-2); border-radius:2px;
}
.tag--light{ border-color:var(--rule-2); color:var(--tx-3); }

/* ---------- 12. Featured work (offset editorial) ------------------------- */
.feat{ display:grid; gap:clamp(3.5rem,7vw,7rem); }
.feat__item{ display:grid; gap:clamp(1.75rem,3.5vw,3rem); align-items:center; }
@media (min-width:940px){
  .feat__item{ grid-template-columns:repeat(12,1fr); gap:clamp(2rem,4vw,4rem); }
  .feat__media{ grid-column:1 / span 6; }
  .feat__body{ grid-column:8 / span 5; }
  .feat__item--flip .feat__media{ grid-column:7 / span 6; grid-row:1; }
  .feat__item--flip .feat__body{ grid-column:1 / span 5; grid-row:1; }
}
.feat__no{
  font-family:var(--f-display); font-variation-settings:"opsz" 144; font-size:clamp(3rem,7vw,5.5rem);
  line-height:.85; color:transparent; -webkit-text-stroke:1px var(--rule-2);
  margin-bottom:.75rem; display:block; font-weight:400;
}
.surface-moss .feat__no,.surface-ink .feat__no{ -webkit-text-stroke-color:rgba(192,164,104,.5); }
.meta-row{
  display:flex; flex-wrap:wrap; gap:.5rem 1.35rem; margin-top:1.5rem; padding-top:1.1rem;
  border-top:1px solid var(--rule);
  font-family:var(--f-mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-3);
}
.surface-moss .meta-row,.surface-ink .meta-row{ border-top-color:var(--rule-dark); color:var(--tx-on-dark-2); }
.meta-row b{ color:var(--clay); font-weight:500; }
.surface-moss .meta-row b,.surface-ink .meta-row b{ color:var(--brass-2); }

/* ---------- 13. Region / network diagram --------------------------------- */
.region{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
@media (min-width:1000px){ .region{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(3rem,6vw,6rem); } }
.netmap{ width:100%; height:auto; }
.netmap .nm-link{ stroke:rgba(192,164,104,.42); stroke-width:1; fill:none;
  stroke-dasharray:4 4; animation:dash 34s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-260; } }
.netmap .nm-node{ fill:var(--moss); stroke:var(--brass-2); stroke-width:1.25; }
.netmap .nm-node--in{ fill:var(--clay); stroke:var(--clay-soft); }
.netmap .nm-halo{ fill:none; stroke:rgba(192,164,104,.3); stroke-width:1; }
.netmap text{ font-family:var(--f-mono); font-size:9.4px; letter-spacing:.1em;
  fill:#DCD5C4; text-transform:uppercase; }
.netmap .nm-lab--in{ fill:#F3D8C6; }
.netmap .nm-ring{ fill:none; stroke:rgba(241,237,226,.1); stroke-width:1; }

.quote{
  font-family:var(--f-display); font-variation-settings:"opsz" 120,"WONK" 1; font-style:italic;
  font-weight:340; font-size:clamp(1.4rem,1.05rem + 1.5vw,2.15rem); line-height:1.32;
  letter-spacing:-.018em; color:var(--tx); text-wrap:pretty;
}
.surface-moss .quote,.surface-ink .quote{ color:var(--tx-on-dark); }
.quote__mark{ font-size:2.4em; line-height:0; color:var(--clay); vertical-align:-.28em; margin-right:.06em; }
.surface-moss .quote__mark,.surface-ink .quote__mark{ color:var(--brass-2); }
.quote__by{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-3); margin-top:1.5rem; display:block; }
.surface-moss .quote__by,.surface-ink .quote__by{ color:var(--tx-on-dark-2); }

/* ---------- 14. Insight cards (staggered) -------------------------------- */
.icards{ display:grid; gap:clamp(1.75rem,3vw,2.5rem); }
@media (min-width:760px){ .icards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){
  .icards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .icards--stagger > :nth-child(2){ transform:translateY(clamp(1.5rem,3vw,3rem)); }
  .icards--stagger > :nth-child(3){ transform:translateY(clamp(3rem,6vw,6rem)); }
}
.icard{
  display:flex; flex-direction:column; gap:1rem; text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--rule); border-radius:2px;
  padding:clamp(1.5rem,2.6vw,2.1rem); position:relative; overflow:hidden;
  transition:transform .55s var(--ease-out), border-color .45s var(--ease), box-shadow .55s var(--ease-out);
}
.icard::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--clay);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-out);
}
.icard:hover,.icard:focus-visible{ border-color:var(--sand-2); box-shadow:0 22px 48px -26px rgba(23,21,15,.4); }
@media (min-width:1080px){ .icard:hover,.icard:focus-visible{ transform:translateY(-6px); } }
.icards--stagger > :nth-child(2):hover{ transform:translateY(calc(clamp(1.5rem,3vw,3rem) - 6px)); }
.icards--stagger > :nth-child(3):hover{ transform:translateY(calc(clamp(3rem,6vw,6rem) - 6px)); }
.icard:hover::after,.icard:focus-visible::after{ transform:scaleX(1); }
.icard__k{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; color:var(--tx-3); }
.icard__k b{ color:var(--clay); font-weight:500; }
.icard__t{ font-family:var(--f-display); font-variation-settings:"opsz" 48; font-weight:450;
  font-size:clamp(1.22rem,1.08rem + .55vw,1.55rem); line-height:1.2; letter-spacing:-.014em; }
.icard__x{ color:var(--tx-2); font-size:.97rem; line-height:1.68; }
.icard__go{ margin-top:auto; padding-top:.6rem; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--clay);
  display:inline-flex; align-items:center; gap:.5rem; }
.icard:hover .icard__go .ar{ transform:translateX(4px); }
.icard__go .ar{ transition:transform .4s var(--ease); }

/* ---------- 15. Stat / figure rail --------------------------------------- */
.rail{ display:grid; gap:1px; background:var(--rule); border-block:1px solid var(--rule); }
@media (min-width:640px){ .rail{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .rail--4{ grid-template-columns:repeat(4,1fr); } .rail--3{ grid-template-columns:repeat(3,1fr); } }
.rail__c{ background:var(--bone); padding:clamp(1.4rem,2.6vw,2.1rem) clamp(1.1rem,2vw,1.6rem); display:grid; gap:.5rem; align-content:start; }
.surface-moss .rail,.surface-ink .rail{ background:var(--rule-dark); border-color:var(--rule-dark); }
.surface-moss .rail__c{ background:var(--moss); }
.surface-ink .rail__c{ background:var(--ink); }
.rail__n{ font-family:var(--f-display); font-variation-settings:"opsz" 90; font-weight:400;
  font-size:clamp(2rem,1.4rem + 2.2vw,3.1rem); line-height:1; letter-spacing:-.03em; color:var(--clay); }
.surface-moss .rail__n,.surface-ink .rail__n{ color:var(--brass-2); }
.rail__l{ font-family:var(--f-mono); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:var(--tx-3); }
.surface-moss .rail__l,.surface-ink .rail__l{ color:var(--tx-on-dark-2); }
.rail__d{ font-size:.93rem; line-height:1.6; color:var(--tx-2); }
.surface-moss .rail__d,.surface-ink .rail__d{ color:var(--tx-on-dark-2); }

/* ---------- 16. Notes / definition blocks -------------------------------- */
.notes{ display:grid; gap:clamp(1.5rem,3vw,2.25rem); }
@media (min-width:820px){ .notes--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.note{
  border-left:2px solid var(--clay); padding:.15rem 0 .15rem clamp(1.1rem,2vw,1.75rem);
  display:grid; gap:.7rem; align-content:start;
}
.note--brass{ border-left-color:var(--brass); }
.note--moss{ border-left-color:var(--moss-3); }
.note__t{ font-family:var(--f-display); font-variation-settings:"opsz" 40; font-weight:500;
  font-size:1.15rem; line-height:1.25; letter-spacing:-.012em; }
.note__x{ color:var(--tx-2); font-size:.97rem; line-height:1.7; }
.surface-moss .note__x,.surface-ink .note__x{ color:var(--tx-on-dark-2); }

/* Boxed panel */
.panel{
  background:var(--paper); border:1px solid var(--rule); border-radius:2px;
  padding:clamp(1.6rem,3vw,2.6rem);
}
.panel--moss{ background:var(--moss-2); border-color:var(--rule-dark); color:var(--tx-on-dark); }
.panel--sand{ background:var(--bone-2); border-color:var(--sand-2); }
.panel--clay{ background:var(--clay); border-color:var(--clay); color:#fff; }
.panel--clay .lead,.panel--clay p{ color:#FBE9DF; }

/* ---------- 17. Timeline / thread ---------------------------------------- */
.thread{ position:relative; display:grid; gap:clamp(2rem,4vw,3.25rem); padding-left:clamp(1.6rem,3vw,2.5rem); }
.thread::before{ content:""; position:absolute; left:5px; top:.55rem; bottom:.55rem; width:1px; background:var(--rule-2); }
.surface-moss .thread::before,.surface-ink .thread::before{ background:var(--rule-dark-2); }
.thread__it{ position:relative; }
.thread__it::before{
  content:""; position:absolute; left:calc(-1 * clamp(1.6rem,3vw,2.5rem) + 1px); top:.55rem;
  width:9px; height:9px; background:var(--clay); border-radius:50%;
  box-shadow:0 0 0 4px var(--bone);
}
.surface-moss .thread__it::before{ box-shadow:0 0 0 4px var(--moss); background:var(--brass-2); }
.surface-ink .thread__it::before{ box-shadow:0 0 0 4px var(--ink); background:var(--brass-2); }
.surface-sand .thread__it::before{ box-shadow:0 0 0 4px var(--bone-2); }
.thread__k{ font-family:var(--f-mono); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--clay); margin-bottom:.5rem; }
.surface-moss .thread__k,.surface-ink .thread__k{ color:var(--brass-2); }
.thread__t{ font-family:var(--f-display); font-variation-settings:"opsz" 48; font-weight:450;
  font-size:clamp(1.2rem,1.05rem + .6vw,1.6rem); line-height:1.22; letter-spacing:-.015em; margin-bottom:.6rem; }
.thread__x{ color:var(--tx-2); }
.surface-moss .thread__x,.surface-ink .thread__x{ color:var(--tx-on-dark-2); }

/* ---------- 18. Page hero (interior pages) ------------------------------- */
.phero{
  position:relative; background:var(--ink); color:var(--tx-on-dark); overflow:hidden;
  padding-top:calc(var(--hdr-h) + clamp(3rem,7vw,6rem));
  padding-bottom:clamp(3rem,7vw,6rem);
}
.phero::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(90% 120% at 82% 12%, rgba(176,81,46,.32), transparent 62%),
             radial-gradient(70% 90% at 8% 92%, rgba(62,82,64,.55), transparent 66%);
}
.phero__in{ position:relative; z-index:2; display:grid; gap:clamp(1.75rem,4vw,3rem); }
@media (min-width:1000px){
  .phero__in{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:end; gap:clamp(2.5rem,6vw,5rem); }
}
.phero__crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  font-family:var(--f-mono); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tx-on-dark-2); margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
.phero__crumb a{ color:var(--tx-on-dark-2); text-decoration:none; transition:color .3s; }
.phero__crumb a:hover{ color:var(--brass-2); }
.phero__crumb span[aria-current]{ color:var(--brass-2); }
.phero__sep{ opacity:.45; }
.phero__aside{ border-left:1px solid var(--rule-dark); padding-left:clamp(1.2rem,2.5vw,2rem); }
@media (max-width:999px){ .phero__aside{ border-left:0; border-top:1px solid var(--rule-dark); padding:1.5rem 0 0; } }

/* ---------- 19. Contact -------------------------------------------------- */
.cgrid{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:1000px){ .cgrid{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(3rem,6vw,5.5rem); } }

.ccard{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:2px; overflow:hidden; }
.ccard__row{ background:var(--paper); padding:clamp(1.25rem,2.4vw,1.8rem); display:grid; gap:.4rem; }
.ccard__k{ font-family:var(--f-mono); font-size:.63rem; letter-spacing:.17em; text-transform:uppercase; color:var(--tx-3); }
.ccard__v{ font-family:var(--f-display); font-variation-settings:"opsz" 40; font-weight:450;
  font-size:clamp(1.08rem,1rem + .5vw,1.4rem); letter-spacing:-.012em; line-height:1.3; }
.ccard__v a{ text-decoration:none; color:var(--tx); border-bottom:1px solid var(--rule-2);
  transition:color .3s, border-color .3s; word-break:break-word; }
.ccard__v a:hover,.ccard__v a:focus-visible{ color:var(--clay); border-color:var(--clay); }

.form{ display:grid; gap:1.25rem; }
@media (min-width:620px){ .form__2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; } }
.field{ display:grid; gap:.5rem; }
.field label{ font-family:var(--f-mono); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-3); }
.field label .req{ color:var(--clay); }
.field input,.field textarea,.field select{
  width:100%; font-family:var(--f-body); font-size:1rem; color:var(--tx);
  background:var(--paper); border:1px solid var(--rule-2); border-radius:2px;
  padding:.9rem 1rem; transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s;
}
.field textarea{ resize:vertical; min-height:150px; line-height:1.65; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--clay); box-shadow:0 0 0 3px rgba(176,81,46,.14); background:#fff;
}
.field input::placeholder,.field textarea::placeholder{ color:#9C9482; }
.field select{ appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E6754' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; }
.form__note{ font-size:.85rem; color:var(--tx-3); line-height:1.6; }
.form__status{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; padding:.85rem 1rem;
  border-radius:2px; display:none;
}
.form__status.is-ok{ display:block; background:rgba(62,82,64,.1); border:1px solid rgba(62,82,64,.35); color:var(--moss-2); }
.form__status.is-err{ display:block; background:rgba(176,81,46,.09); border:1px solid rgba(176,81,46,.4); color:var(--clay); }
.field.has-error input,.field.has-error textarea{ border-color:var(--clay); }
.field__err{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.06em; color:var(--clay); display:none; }
.field.has-error .field__err{ display:block; }
.hp{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* ---------- 20. CTA band ------------------------------------------------- */
.cta{ position:relative; overflow:hidden; background:var(--moss); color:var(--tx-on-dark); }
.cta::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.85;
  background:radial-gradient(80% 130% at 12% 8%, rgba(176,81,46,.3), transparent 58%),
             radial-gradient(70% 110% at 92% 96%, rgba(23,21,15,.6), transparent 62%);
}
.cta__in{ position:relative; z-index:2; display:grid; gap:clamp(2rem,4vw,3rem); }
@media (min-width:920px){ .cta__in{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:end; gap:clamp(2.5rem,5vw,5rem); } }

/* ---------- 21. Footer --------------------------------------------------- */
.ftr{ background:var(--ink); color:var(--tx-on-dark); padding-top:clamp(3.5rem,6vw,5.5rem); }
.ftr__top{ display:grid; gap:clamp(2.25rem,4.5vw,3.5rem); padding-bottom:clamp(2.5rem,5vw,4rem); }
@media (min-width:820px){ .ftr__top{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,4vw,4rem); } }
@media (min-width:1180px){ .ftr__top{ grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr) minmax(0,.85fr) minmax(0,1fr); } }
.ftr__mark{ font-family:var(--f-display); font-variation-settings:"opsz" 72; font-weight:400;
  font-size:clamp(1.6rem,1.25rem + 1.4vw,2.25rem); letter-spacing:-.022em; line-height:1.1; margin-bottom:.85rem; }
.ftr__role{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-2); line-height:1.9; margin-bottom:1.5rem; }
.ftr__x{ color:var(--tx-on-dark-2); max-width:44ch; font-size:.95rem; line-height:1.72; }
.ftr h3{ font-family:var(--f-mono); font-size:.63rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--brass); margin-bottom:1.15rem; }
.ftr__links{ display:grid; gap:.62rem; }
.ftr__links a{ text-decoration:none; color:var(--tx-on-dark-2); font-size:.94rem;
  display:inline-flex; align-items:center; gap:.5rem; transition:color .3s var(--ease), gap .35s var(--ease); }
.ftr__links a::before{ content:""; width:0; height:1px; background:var(--brass-2); transition:width .4s var(--ease-out); }
.ftr__links a:hover,.ftr__links a:focus-visible{ color:var(--tx-on-dark); }
.ftr__links a:hover::before,.ftr__links a:focus-visible::before{ width:12px; }
.ftr__c{ display:grid; gap:.9rem; }
.ftr__c a{ color:var(--tx-on-dark); text-decoration:none; font-size:1rem;
  border-bottom:1px solid rgba(241,237,226,.2); transition:color .3s, border-color .3s; word-break:break-word; }
.ftr__c a:hover,.ftr__c a:focus-visible{ color:var(--brass-2); border-color:var(--brass-2); }
.ftr__c .ftr__ck{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-3); display:block; margin-bottom:.25rem; }

.socials{ display:flex; gap:.6rem; margin-top:1.6rem; }
.socials a{
  width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--rule-dark-2); color:var(--tx-on-dark-2);
  transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.socials a:hover,.socials a:focus-visible{ background:var(--clay); border-color:var(--clay); color:#fff; transform:translateY(-3px); }
.socials svg{ width:17px; height:17px; fill:currentColor; }

.ftr__bot{
  border-top:1px solid var(--rule-dark); padding-block:1.65rem; display:flex; flex-wrap:wrap;
  gap:.85rem 1.75rem; align-items:center; justify-content:space-between;
  font-family:var(--f-mono); font-size:.65rem; letter-spacing:.11em; text-transform:uppercase; color:var(--tx-3);
}
.ftr__bot a{ color:var(--tx-on-dark-2); text-decoration:none; transition:color .3s; }
.ftr__bot a:hover,.ftr__bot a:focus-visible{ color:var(--brass-2); }
.ftr__credit b{ color:var(--brass-2); font-weight:500; }

/* ---------- 22. Reveal animations ---------------------------------------- */
[data-rv]{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }
[data-rv].rv-in{ opacity:1; transform:none; }
[data-rv="fade"]{ transform:none; }
[data-rv="left"]{ transform:translateX(-28px); }
[data-rv="right"]{ transform:translateX(28px); }
[data-rv-d="1"]{ transition-delay:.09s; }
[data-rv-d="2"]{ transition-delay:.18s; }
[data-rv-d="3"]{ transition-delay:.27s; }
[data-rv-d="4"]{ transition-delay:.36s; }
[data-rv-d="5"]{ transition-delay:.45s; }
.no-js [data-rv]{ opacity:1 !important; transform:none !important; }

/* Scroll progress hairline */
.prog{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:101; transform-origin:left;
  transform:scaleX(0); background:linear-gradient(90deg,var(--clay),var(--brass-2)); pointer-events:none; }

/* Back to top */
.totop{
  position:fixed; right:clamp(1rem,2.2vw,2rem); bottom:clamp(1rem,2.2vw,2rem); z-index:90;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--rule-2);
  background:var(--paper); color:var(--tx); display:grid; place-items:center; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s,
             background-color .35s, color .35s, border-color .35s;
  box-shadow:0 10px 30px -12px rgba(23,21,15,.35);
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.totop:hover,.totop:focus-visible{ background:var(--clay); color:#fff; border-color:var(--clay); }
.totop svg{ width:15px; height:15px; }

/* ---------- 23. Accessibility ------------------------------------------- */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--clay); outline-offset:3px; border-radius:2px;
}
.surface-moss :focus-visible,.surface-ink :focus-visible,.hero :focus-visible,
.menu :focus-visible,.ftr :focus-visible,.phero :focus-visible,.cta :focus-visible{ outline-color:var(--brass-2); }
.vh{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

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

/* ---------- 24. Print ---------------------------------------------------- */
@media print{
  .hdr,.menu,.totop,.prog,.strip,.socials{ display:none!important; }
  body{ background:#fff; color:#000; }
  .surface-moss,.surface-ink,.hero,.phero,.cta,.ftr{ background:#fff!important; color:#000!important; }
  a{ text-decoration:underline; }
}

/* ==========================================================================
   25. PAGE MODULES
   Each page carries its own composition; these are the components that make
   the layouts differ from one another rather than repeating a single grid.
   ========================================================================== */

/* ---- ABOUT --------------------------------------------------------------- */
.about-split{ display:grid; gap:clamp(2rem,4vw,3.25rem); }
@media (min-width:940px){
  .about-split{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(2.5rem,5vw,5rem); align-items:center; }
}
.about-thread-grid{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:1000px){
  .about-thread-grid{ grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr);
    gap:clamp(2.5rem,5vw,5rem); align-items:start; }
}

/* ---- RESEARCH ------------------------------------------------------------ */
.rframe{
  border-left:2px solid var(--clay); padding-left:clamp(1.25rem,3vw,2.5rem);
  max-width:78ch;
}
.rgrid{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:1040px){
  .rgrid{ grid-template-columns:minmax(0,.3fr) minmax(0,1fr); gap:clamp(3rem,6vw,6rem); align-items:start; }
  .rindex{ position:sticky; top:calc(var(--hdr-h) + 2rem); }
}
.rindex{ border-top:2px solid var(--ink); padding-top:1.25rem; }
.rindex__list{ display:grid; gap:.1rem; }
.rindex__list a{
  display:flex; gap:.85rem; align-items:baseline; text-decoration:none;
  padding:.7rem 0; border-bottom:1px solid var(--rule); color:var(--tx-2);
  font-size:.94rem; line-height:1.4; transition:color .35s var(--ease), padding-left .45s var(--ease-out);
}
.rindex__list a span{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; color:var(--brass); flex:none; }
.rindex__list a:hover,.rindex__list a:focus-visible{ color:var(--clay); padding-left:.4rem; }

.rbody{ display:grid; gap:clamp(3rem,6vw,5.5rem); }
.rtheme{ scroll-margin-top:calc(var(--hdr-h) + 2rem); max-width:76ch; }
.rtheme__n{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--clay); margin-bottom:.85rem;
}
.rtheme__h{ margin-bottom:clamp(1.1rem,2.2vw,1.6rem); }
.rtheme + .rtheme{ border-top:1px solid var(--rule); padding-top:clamp(3rem,6vw,5.5rem); }

.rquest{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:1000px){
  .rquest{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(3rem,6vw,5.5rem); align-items:start; }
}
.qlist{ display:grid; gap:clamp(1.35rem,2.5vw,1.9rem); }
.qlist li{
  display:grid; gap:.55rem 1.1rem; padding-bottom:clamp(1.35rem,2.5vw,1.9rem);
  border-bottom:1px solid var(--rule-dark);
}
@media (min-width:560px){ .qlist li{ grid-template-columns:auto minmax(0,1fr); } }
.qlist li:last-child{ border-bottom:0; padding-bottom:0; }
.qlist__n{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; color:var(--brass-2);
  padding-top:.35rem;
}
.qlist p{ color:var(--tx-on-dark-2); font-size:1.02rem; line-height:1.66; }

/* ---- YOUTH ENGAGEMENT ---------------------------------------------------- */
.yopen{ display:grid; gap:clamp(1.75rem,3.5vw,3rem); }
@media (min-width:960px){
  .yopen{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(3rem,6vw,6rem); align-items:start; }
}

.ladder{ display:grid; gap:1px; background:var(--rule-dark); border-block:1px solid var(--rule-dark); }
.ladder__r{
  position:relative; background:var(--ink); padding:clamp(1.35rem,2.6vw,2rem) 0;
  display:grid; gap:1rem; align-items:center;
}
@media (min-width:820px){
  .ladder__r{ grid-template-columns:minmax(0,.34fr) minmax(0,1fr); gap:clamp(1.75rem,4vw,3.5rem); }
}
.ladder__bar{
  display:block; height:clamp(38px,6vw,58px); width:var(--h); min-width:64px;
  background:linear-gradient(90deg, rgba(176,81,46,.85), rgba(158,129,68,.55));
  border-right:2px solid var(--brass-2); border-radius:0 2px 2px 0;
  transform-origin:left; transform:scaleX(.001);
  transition:transform 1.05s var(--ease-out);
}
.ladder.rv-in .ladder__bar{ transform:scaleX(1); }
.ladder.rv-in .ladder__r:nth-child(2) .ladder__bar{ transition-delay:.1s; }
.ladder.rv-in .ladder__r:nth-child(3) .ladder__bar{ transition-delay:.2s; }
.ladder.rv-in .ladder__r:nth-child(4) .ladder__bar{ transition-delay:.3s; }
.ladder.rv-in .ladder__r:nth-child(5) .ladder__bar{ transition-delay:.4s; }
.ladder__n{ font-family:var(--f-mono); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); margin-bottom:.4rem; }
.ladder__t{
  font-family:var(--f-display); font-variation-settings:"opsz" 48; font-weight:450;
  font-size:clamp(1.2rem,1.05rem + .7vw,1.65rem); line-height:1.2; letter-spacing:-.015em;
  color:var(--tx-on-dark); margin-bottom:.5rem;
}
.ladder__x{ color:var(--tx-on-dark-2); font-size:.98rem; line-height:1.68; max-width:62ch; }

.ypractice{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:1000px){
  .ypractice{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(3rem,6vw,5.5rem); align-items:start; }
}
.ystack{ display:grid; gap:clamp(1.5rem,3vw,2.25rem); }

.ygrid{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (min-width:700px){ .ygrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1060px){ .ygrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.ycard{
  background:var(--bone-2); padding:clamp(1.5rem,2.8vw,2.25rem);
  display:grid; gap:.7rem; align-content:start;
  transition:background-color .5s var(--ease);
}
.ycard:hover{ background:var(--paper); }
.ycard__n{
  font-family:var(--f-display); font-variation-settings:"opsz" 90; font-size:2.1rem; line-height:.9;
  color:transparent; -webkit-text-stroke:1px var(--sand-2); font-weight:400; margin-bottom:.3rem;
}
.ycard__t{
  font-family:var(--f-display); font-variation-settings:"opsz" 40; font-weight:500;
  font-size:1.14rem; line-height:1.25; letter-spacing:-.012em;
}
.ycard__x{ color:var(--tx-2); font-size:.95rem; line-height:1.7; }

.ylook{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:960px){
  .ylook{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(3rem,6vw,5.5rem); align-items:start; }
}
.checks{ display:grid; gap:1px; background:var(--rule-dark); border:1px solid var(--rule-dark); }
.checks li{
  background:var(--moss); padding:clamp(1.05rem,2vw,1.4rem) clamp(1.1rem,2vw,1.5rem);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:.9rem; align-items:start;
}
.checks li > span{ color:var(--brass-2); font-size:.9rem; line-height:1.7; }
.checks li p{ color:var(--tx-on-dark-2); font-size:.98rem; line-height:1.68; }
.checks li em{ font-style:italic; color:var(--tx-on-dark); }

/* ---- TRACK-II ------------------------------------------------------------ */
.tmatrix{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (min-width:900px){ .tmatrix{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.tmatrix__c{ background:var(--paper); padding:clamp(1.6rem,3vw,2.4rem); display:grid; gap:.85rem; align-content:start; }
.tmatrix__c--mid{ background:var(--bone-2); }
.tmatrix__c--hi{ background:var(--moss); color:var(--tx-on-dark); }
.tmatrix__k{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--clay);
}
.tmatrix__c--hi .tmatrix__k{ color:var(--brass-2); }
.tmatrix__t{
  font-family:var(--f-display); font-variation-settings:"opsz" 48; font-weight:450;
  font-size:clamp(1.2rem,1.08rem + .6vw,1.55rem); line-height:1.2; letter-spacing:-.014em;
}
.tmatrix__x{ color:var(--tx-2); font-size:.96rem; line-height:1.68; }
.tmatrix__c--hi .tmatrix__x{ color:var(--tx-on-dark-2); }
.tmatrix__dl{ margin:.5rem 0 0; display:grid; gap:.6rem; border-top:1px solid var(--rule); padding-top:1rem; }
.tmatrix__c--hi .tmatrix__dl{ border-top-color:var(--rule-dark); }
.tmatrix__dl dt{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-3); margin-bottom:.2rem;
}
.tmatrix__c--hi .tmatrix__dl dt{ color:var(--brass); }
.tmatrix__dl dd{ margin:0; font-size:.92rem; line-height:1.55; color:var(--tx-2); }
.tmatrix__c--hi .tmatrix__dl dd{ color:var(--tx-on-dark-2); }
.tnote{ max-width:76ch; margin-top:clamp(2.5rem,4.5vw,3.5rem);
  border-left:2px solid var(--brass); padding-left:clamp(1.25rem,2.5vw,2rem); }

.twhy{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:1000px){
  .twhy{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(3rem,6vw,5.5rem); align-items:start; }
}
.tlist{ display:grid; gap:.6rem; }
.tlist li{
  position:relative; padding-left:1.35rem; color:var(--tx-on-dark-2);
  font-size:.97rem; line-height:1.6;
}
.tlist li::before{
  content:""; position:absolute; left:0; top:.62em; width:5px; height:5px;
  background:var(--brass-2); transform:rotate(45deg);
}

.tsplit{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (min-width:900px){ .tsplit{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.tsplit__side{ padding:clamp(1.75rem,3.2vw,2.75rem); background:var(--paper); }
.tsplit__side--no{ background:var(--bone-2); }
.tsplit__k{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:1.5rem; padding-bottom:.85rem; border-bottom:1px solid var(--rule-2);
  display:flex; align-items:center; gap:.7rem;
}
.tsplit__side--yes .tsplit__k{ color:var(--moss-2); }
.tsplit__side--yes .tsplit__k::before{ content:"+"; color:var(--moss-3); font-size:1rem; }
.tsplit__side--no .tsplit__k{ color:var(--clay); }
.tsplit__side--no .tsplit__k::before{ content:"\2013"; color:var(--clay); font-size:1rem; }
.tsplit ul{ display:grid; gap:1.15rem; }
.tsplit li{ font-size:.98rem; line-height:1.7; color:var(--tx-2); padding-left:1.15rem; position:relative; }
.tsplit li::before{ content:""; position:absolute; left:0; top:.68em; width:5px; height:1px; background:var(--rule-2); }
.tsplit li b{ color:var(--tx); font-weight:600; }

.treg{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:1000px){
  .treg{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(3rem,6vw,5.5rem); align-items:center; }
}

/* ---- CULTURAL EXCHANGE --------------------------------------------------- */
.cxlead{ display:grid; gap:clamp(2rem,4vw,3.25rem); }
@media (min-width:1000px){
  .cxlead{ grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
}

.legs{ display:grid; gap:clamp(2rem,4vw,3rem); }
@media (min-width:820px){ .legs{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.75rem,3.5vw,3rem); align-items:start; } }
.leg{ border-top:1px solid var(--rule-dark-2); padding-top:1.35rem; }
.leg__k{ font-family:var(--f-mono); font-size:.63rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin-bottom:.6rem; }
.leg__c{
  font-family:var(--f-display); font-variation-settings:"opsz" 72; font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.05rem); letter-spacing:-.02em; line-height:1.1;
  color:var(--tx-on-dark); margin-bottom:1.35rem;
}
.leg__stops{ display:grid; gap:1.15rem; position:relative; padding-left:1.4rem; }
.leg__stops::before{
  content:""; position:absolute; left:3px; top:.5rem; bottom:.5rem; width:1px;
  background:repeating-linear-gradient(180deg, rgba(192,164,104,.55) 0 4px, transparent 4px 9px);
}
.leg__stops li{ position:relative; display:grid; gap:.25rem; }
.leg__d{ position:absolute; left:-1.4rem; top:.5rem; width:7px; height:7px; border-radius:50%;
  background:var(--clay); box-shadow:0 0 0 3px var(--ink); }
.leg__stops b{ font-weight:600; font-size:1rem; color:var(--tx-on-dark); line-height:1.35; }
.leg__stops em{ font-style:normal; font-size:.92rem; line-height:1.6; color:var(--tx-on-dark-2); }

.hang{ display:grid; gap:0; border-top:1px solid var(--rule); }
.hang__it{
  display:grid; gap:.85rem; padding:clamp(1.6rem,3vw,2.4rem) 0; border-bottom:1px solid var(--rule);
}
@media (min-width:860px){
  .hang__it{ grid-template-columns:minmax(0,.42fr) minmax(0,1fr); gap:clamp(2rem,4vw,4rem); align-items:start; }
}
.hang__t{
  font-family:var(--f-display); font-variation-settings:"opsz" 60; font-weight:400;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.9rem); line-height:1.15; letter-spacing:-.018em;
}
.hang__x{ max-width:64ch; }

.cxhuman{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:1000px){
  .cxhuman{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(3rem,6vw,5.5rem); align-items:start; }
}

/* ---- INITIATIVES --------------------------------------------------------- */
.rec__head{ margin-bottom:clamp(2.25rem,4.5vw,3.5rem); max-width:60ch; }
.rec__n{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--clay); margin-bottom:1rem;
}
.rec__body{ display:grid; gap:clamp(2.25rem,4.5vw,3.5rem); }
@media (min-width:1000px){
  .rec__body{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2.5rem,5vw,5rem); align-items:start; }
  .rec__body--flip .rec__media{ grid-column:2; grid-row:1; }
  .rec__body--flip .rec__text{ grid-column:1; grid-row:1; }
}
.rec__dl{
  margin:clamp(1.75rem,3vw,2.5rem) 0 0; display:grid; gap:0;
  border-top:1px solid var(--rule);
}
.rec__dl > div{
  display:grid; gap:.3rem; padding:.9rem 0; border-bottom:1px solid var(--rule);
}
@media (min-width:600px){
  .rec__dl > div{ grid-template-columns:minmax(0,.42fr) minmax(0,1fr); gap:1.25rem; align-items:baseline; }
}
.rec__dl dt{
  font-family:var(--f-mono); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-3);
}
.rec__dl dd{ margin:0; font-size:.98rem; line-height:1.6; color:var(--tx); }
.rec__dl--dark{ border-top-color:var(--rule-dark); }
.rec__dl--dark > div{ border-bottom-color:var(--rule-dark); }
.rec__dl--dark dt{ color:var(--brass); }
.rec__dl--dark dd{ color:var(--tx-on-dark-2); }

.rec3{ display:grid; gap:clamp(2.25rem,4.5vw,3.5rem); }
@media (min-width:960px){
  .rec3{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(2.5rem,5vw,5rem); align-items:center; }
}

.insts{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (min-width:720px){ .insts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .insts{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.inst{
  background:var(--paper); padding:clamp(1.35rem,2.6vw,2rem); display:grid; gap:.4rem; align-content:start;
  transition:background-color .5s var(--ease);
}
.inst:hover{ background:var(--bone-2); }
.inst__k{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.17em; text-transform:uppercase; color:var(--clay); }
.inst b{ font-family:var(--f-display); font-variation-settings:"opsz" 40; font-weight:500;
  font-size:1.08rem; line-height:1.28; letter-spacing:-.012em; }
.inst em{ font-style:normal; font-size:.9rem; line-height:1.6; color:var(--tx-3); }

.fmts{ display:grid; gap:clamp(1.75rem,3.2vw,2.5rem); }
@media (min-width:760px){ .fmts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1120px){ .fmts{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.fmt{ display:grid; gap:.7rem; align-content:start; border-top:1px solid var(--rule-dark); padding-top:1.35rem; }
.fmt__n{
  font-family:var(--f-display); font-variation-settings:"opsz" 90; font-weight:400; font-size:1.9rem;
  line-height:1; color:var(--brass-2);
}
.fmt__t{
  font-family:var(--f-display); font-variation-settings:"opsz" 40; font-weight:500;
  font-size:1.16rem; line-height:1.25; letter-spacing:-.012em; color:var(--tx-on-dark);
}
.fmt__x{ color:var(--tx-on-dark-2); font-size:.96rem; line-height:1.7; }

/* ---- MEDIA --------------------------------------------------------------- */
.mgrid{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:1000px){
  .mgrid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(3rem,6vw,5.5rem); align-items:start; }
}
.xcard{
  display:grid; gap:.55rem; text-decoration:none; color:var(--tx-on-dark);
  background:var(--ink); border:1px solid var(--ink); border-radius:2px;
  padding:clamp(1.75rem,3.2vw,2.5rem); position:relative; overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.xcard::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--clay);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-out);
}
.xcard:hover,.xcard:focus-visible{ transform:translateY(-4px); box-shadow:0 26px 54px -30px rgba(23,21,15,.6); }
.xcard:hover::after,.xcard:focus-visible::after{ transform:scaleX(1); }
.xcard__ico{ width:38px; height:38px; display:grid; place-items:center; margin-bottom:.85rem;
  border:1px solid var(--rule-dark-2); border-radius:50%; color:var(--brass-2); }
.xcard__ico svg{ width:16px; height:16px; }
.xcard__k{ font-family:var(--f-mono); font-size:.63rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); }
.xcard__h{ font-family:var(--f-display); font-variation-settings:"opsz" 72; font-weight:400;
  font-size:clamp(1.6rem,1.25rem + 1.4vw,2.25rem); letter-spacing:-.022em; line-height:1.1; }
.xcard__x{ color:var(--tx-on-dark-2); font-size:.96rem; line-height:1.65; max-width:40ch; }
.xcard__go{ margin-top:.9rem; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--clay-2); display:inline-flex; align-items:center; gap:.5rem; }

.press{ display:grid; gap:0; border-top:1px solid var(--rule-dark); }
.press__it{ border-bottom:1px solid var(--rule-dark); }
.press__a{
  display:grid; gap:.5rem 1.5rem; text-decoration:none; color:var(--tx-on-dark);
  padding:clamp(1.25rem,2.4vw,1.85rem) 0; align-items:baseline;
  transition:padding-left .5s var(--ease-out), color .35s var(--ease);
}
@media (min-width:900px){
  .press__a{ grid-template-columns:minmax(0,.24fr) minmax(0,1fr) minmax(0,.26fr); }
}
.press__a:hover,.press__a:focus-visible{ padding-left:.6rem; color:var(--brass-2); }
.press__src{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--clay-2); }
.press__t{
  font-family:var(--f-display); font-variation-settings:"opsz" 40; font-weight:450;
  font-size:clamp(1.02rem,.98rem + .35vw,1.2rem); line-height:1.35; letter-spacing:-.01em;
}
.press__m{
  font-family:var(--f-mono); font-size:.63rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tx-3); display:inline-flex; align-items:center; gap:.55rem;
}
@media (min-width:900px){ .press__m{ justify-content:flex-end; } }
.press__ar{ flex:none; transition:transform .4s var(--ease); }
.press__a:hover .press__ar{ transform:translate(2px,-2px); }

.mtopics{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:1000px){
  .mtopics{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(3rem,6vw,5.5rem); align-items:start; }
}
.edgrid{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:900px){
  .edgrid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(3rem,6vw,5rem); align-items:start; }
}

/* ---- CONTACT ------------------------------------------------------------- */
.fpanel{
  background:var(--paper); border:1px solid var(--rule); border-radius:2px;
  padding:clamp(1.6rem,3.2vw,2.75rem);
}
.etypes{ display:grid; gap:1px; background:var(--rule-dark); border:1px solid var(--rule-dark); }
@media (min-width:720px){ .etypes{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .etypes{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.etype{
  background:var(--ink); padding:clamp(1.5rem,2.8vw,2.15rem); display:grid; gap:.65rem; align-content:start;
  transition:background-color .5s var(--ease);
}
.etype:hover{ background:var(--ink-2); }
.etype__n{
  font-family:var(--f-display); font-variation-settings:"opsz" 90; font-size:1.9rem; line-height:.95;
  color:transparent; -webkit-text-stroke:1px rgba(192,164,104,.5); font-weight:400; margin-bottom:.25rem;
}
.etype__t{
  font-family:var(--f-display); font-variation-settings:"opsz" 40; font-weight:500;
  font-size:1.14rem; line-height:1.25; letter-spacing:-.012em; color:var(--tx-on-dark);
}
.etype__x{ color:var(--tx-on-dark-2); font-size:.95rem; line-height:1.7; }

.cnote{ display:grid; gap:clamp(1.75rem,3.5vw,3rem); margin-top:clamp(2.5rem,5vw,4rem); align-items:center; }
@media (min-width:820px){
  .cnote{ grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(2.5rem,5vw,4rem); }
  .cnote > figure{ max-width:340px; margin-left:auto; }
}

/* ---- Small-screen safety nets ------------------------------------------- */
@media (max-width:520px){
  .plate__cap{ font-size:.6rem; letter-spacing:.1em; flex-wrap:wrap; gap:.35rem; }
  .meta-row{ font-size:.6rem; gap:.4rem 1rem; }
  .hero__badge{ position:static; margin:1rem auto 0; max-width:none; text-align:center; }
  .btn{ padding:.85rem 1.25rem; font-size:.7rem; letter-spacing:.12em; }
  .dropcap::first-letter{ font-size:3.1em; }
}

/* ---- Grid overflow guards (long words / wide children in grid cells) ----- */
.hero__copy,.ladder__tx,.rec,.rec__text,.rec__media,.feat__body,.icard,.rtheme,.hang__x{ min-width:0; }

/* ==========================================================================
   26. DARK-CONTEXT TEXT COLOUR
   .hero, .phero, .cta and .menu are dark surfaces that do not carry the
   .surface-moss / .surface-ink classes, so generic text utilities used inside
   them must be re-coloured explicitly. Without this, .lead renders as dark
   brown on dark green.
   ========================================================================== */
.hero .lead,  .phero .lead,  .cta .lead,  .menu .lead,
.hero .small, .phero .small, .cta .small, .menu .small,
.surface-moss .small, .surface-ink .small{
  color:var(--tx-on-dark-2);
}
.hero .prose p,   .phero .prose p,   .cta .prose p,
.hero .body-lg,   .phero .body-lg,   .cta .body-lg{ color:var(--tx-on-dark-2); }
.hero .prose strong, .phero .prose strong, .cta .prose strong{ color:var(--tx-on-dark); }
.hero .idx, .phero .idx, .cta .idx{ color:var(--tx-on-dark-2); }
.hero .meta-row, .phero .meta-row, .cta .meta-row{ color:var(--tx-on-dark-2); border-top-color:var(--rule-dark); }
.hero .meta-row b, .phero .meta-row b, .cta .meta-row b{ color:var(--brass-2); }

/* Guard: a deliberately light panel placed inside a dark section keeps dark text. */
.surface-moss .panel--sand, .surface-ink .panel--sand,
.hero .panel--sand, .phero .panel--sand, .cta .panel--sand{ color:var(--tx); }
.surface-moss .panel--sand .small, .surface-ink .panel--sand .small,
.surface-moss .panel--sand p,      .surface-ink .panel--sand p,
.surface-moss .panel--sand .idx,   .surface-ink .panel--sand .idx{ color:var(--tx-2); }

/* ---- Hero badge: straddle the frame corner, never cover the photograph --- */
.hero__badge{
  left:clamp(-2.75rem,-3.2vw,-1rem);
  bottom:clamp(-1.5rem,-2vw,-.75rem);
}
@media (min-width:1040px){
  .hero__badge{ left:clamp(-4.5rem,-4vw,-1.5rem); }
}

/* ==========================================================================
   27. HERO VISUAL — badge must never sit over the photograph
   The plate is constrained to its own width so the badge can be positioned
   against the frame rather than against the (wider) grid column. The badge
   then sits BELOW the frame and bleeds left into the background: layered,
   but covering none of the portrait.
   ========================================================================== */
.hero__visual{ position:relative; width:min(100%,400px); margin-inline:auto; }
.hero__plate{ max-width:none; margin-inline:0; }

.hero__badge{
  position:relative; left:auto; bottom:auto; max-width:none; display:block;
  margin:.9rem 0 0 clamp(-2.25rem,-2.2vw,-.75rem);
  padding:.75rem 1.1rem .8rem clamp(1.85rem,2.2vw,2.35rem);
  box-shadow:0 16px 36px -14px rgba(23,21,15,.55);
}
@media (max-width:520px){
  .hero__badge{ margin:.85rem 0 0; padding:.75rem 1rem; text-align:left; }
}

/* ==========================================================================
   28. WCAG AA CONTRAST CORRECTIONS
   Every value below was measured against its real composited background.
   Target: 4.5:1 for body/label text, 3:1 for text >= 24px.
   ========================================================================== */

/* Clay is the accent used for small mono labels on the light surfaces
   (bone, bone-2, paper). At #B0512E it measured 4.19:1 on --bone-2 — just
   short. Darkened to #A34A29 it measures 4.77:1 there, 5.27:1 on --bone and
   5.76:1 on --paper, while white-on-clay improves to 5.88:1. */
:root{
  --clay:     #A34A29;
  --brass-dk: #7A6534;   /* brass tuned for LIGHT backgrounds (5.5:1 on paper) */
}

/* --brass measures 4.99:1 on --ink (passes) but only 3.57:1 on --moss.
   Anywhere brass sits on moss, step up to --brass-2 (6.0:1). */
.menu__n{ color:var(--brass-2); }
.tmatrix__c--hi .tmatrix__dl dt{ color:var(--brass-2); }

/* --brass on the near-white research index measured 3.64:1. */
.rindex__list a span{ color:var(--brass-dk); }

/* Footer meta line and press dates used --tx-3 on --ink (3.24:1). */
.ftr__bot{ color:var(--tx-on-dark-2); }
.ftr__c .ftr__ck{ color:var(--tx-on-dark-2); }
.press__m{ color:var(--tx-on-dark-2); }

/* Inline prose links sitting on dark surfaces (clay on ink measured 3.53:1). */
.surface-ink .ilink, .surface-moss .ilink,
.hero .ilink, .phero .ilink, .cta .ilink{
  color:var(--brass-2); border-bottom-color:rgba(192,164,104,.42);
}
.surface-ink .ilink:hover, .surface-moss .ilink:hover,
.hero .ilink:hover, .phero .ilink:hover, .cta .ilink:hover{
  color:var(--clay-soft); border-bottom-color:var(--clay-soft);
}

/* The hero plate is a dark frame, so its caption must use the dark treatment. */
.hero__plate .plate__cap{ color:var(--tx-on-dark-2); }
.hero__plate .plate__cap b{ color:var(--brass-2); }

/* Hero badge: hierarchy by weight and size, not by colour — both lines are
   pure white on clay (5.88:1) rather than a tinted second line at 3.84:1. */
.hero__badge{ color:#fff; }
.hero__badge b{ color:#fff; font-weight:600; font-size:1.06em; letter-spacing:.1em; }

/* ==========================================================================
   29. CONTACT PAGE — remove the trailing empty column
   The left column previously ran ~540px past the form. Pairing the contact
   card with the portrait puts both columns on a comparable baseline.
   ========================================================================== */
.cside{ display:grid; gap:clamp(1.5rem,2.5vw,2rem); }
@media (min-width:560px){
  .cside{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:start; }
}
@media (min-width:1000px) and (max-width:1180px){
  .cside{ grid-template-columns:minmax(0,1fr); }
}
.cside .plate{ margin:0; }

/* The enquiry-note column now carries enough copy to meet the figure. */
.cnote{ align-items:start; }
.cnote__list{ display:grid; gap:.85rem; margin-top:1.1rem; }
.cnote__list li{
  position:relative; padding-left:1.5rem; color:var(--tx-on-dark-2);
  font-size:.95rem; line-height:1.65;
}
.cnote__list li::before{
  content:counter(cn,decimal-leading-zero); counter-increment:cn;
  position:absolute; left:0; top:.1em;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; color:var(--brass-2);
}
.cnote__list{ counter-reset:cn; }

/* Definition pairs inside the Track-II matrix group label with value. */
.tmatrix__dl{ display:block; }
.tmatrix__dl dt{ margin:1rem 0 .18rem; }
.tmatrix__dl dt:first-of-type{ margin-top:0; }
.tmatrix__dl dd + dt{ margin-top:1rem; }

/* ---- Contact card inside the paired .cside layout ------------------------
   The card is ~250px wide there, so the display size used at full width
   breaks the email address mid-word. Step the value type down so every
   line — name, phone, email, handle — sets on a single line.            */
.cside .ccard__row{ padding:1rem 1.05rem; }
.cside .ccard__v{ font-size:1.02rem; line-height:1.4; }
.cside .ccard__k{ font-size:.585rem; letter-spacing:.15em; }
.cside .plate__cap{ font-size:.575rem; letter-spacing:.08em; }
.plate__cap b{ white-space:nowrap; }


/* ==========================================================================
   30. FINAL RESPONSIVE / LEGIBILITY / TOUCH PASS
   Findings from a 9-page x 14-width audit (320 -> 1920 CSS px).
   NOTE ON ORDER: base sizes are declared first, media queries after, so the
   narrow-screen overrides are not defeated by a later unconditional rule.
   ========================================================================== */

/* ---- 30.1 Minimum label size -------------------------------------------
   Mono uppercase labels measuring under ~10px were hard to read. Every one
   is raised to at least 0.63rem (10.1px). */
.mark__role{ font-size:.63rem; }                 /* was .545rem (8.7px) */
.ftr__c .ftr__ck{ font-size:.64rem; }            /* was .6rem   (9.6px) */
.tmatrix__dl dt{ font-size:.64rem; }             /* was .6rem           */
.inst__k{ font-size:.64rem; }                    /* was .6rem           */
.tag{ font-size:.64rem; }
.cnote__list li::before{ font-size:.64rem; }
.cside .ccard__k{ font-size:.645rem; letter-spacing:.13em; }  /* was .585rem (9.4px) */
.cside .plate__cap{ font-size:.64rem; letter-spacing:.07em; } /* was .575rem (9.2px) */

/* ---- 30.2 Header must never outgrow a narrow viewport -------------------
   `.hdr__in` is a flex item of the fixed bar, so its automatic min-width was
   its own max-content size — it grew past the viewport instead of letting the
   wordmark shrink. min-width:0 restores shrinking; the mark then reduces and,
   as a last resort, truncates rather than pushing the menu button off screen. */
.hdr__in{ min-width:0; }
.mark{ min-width:0; flex:0 1 auto; }
.mark__tx{ min-width:0; }
.mark__name,
.mark__role{ overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.burger{ flex:none; }

@media (max-width:600px){
  .hdr__in{ gap:.75rem; }
  .mark{ gap:.6rem; }
  .mark__name{ font-size:.95rem; }
  .mark__role{ font-size:.6rem; letter-spacing:.1em; }
}
@media (max-width:360px){
  .mark__glyph{ width:30px; height:30px; font-size:.82rem; }
  .mark__name{ font-size:.9rem; }
  .mark__role{ font-size:.6rem; letter-spacing:.05em; }
}

/* ---- 30.3 Network diagram labels ---------------------------------------
   SVG text scales with the viewBox, so a fixed 9.4px label fell to ~5.5px on
   a 320px screen. Step the in-diagram size up as the drawing scales down. */
.netmap text{ font-size:11px; }
@media (max-width:620px){ .netmap text{ font-size:14px; } }
@media (max-width:440px){ .netmap text{ font-size:18px; } }
@media (max-width:360px){ .netmap text{ font-size:20px; } }

/* ---- 30.4 Touch targets -------------------------------------------------
   Underlines drawn with border-bottom are switched to text-decoration so the
   rule stays locked to the text while the hit area is padded out. Hit areas
   grow with padding + negative margin, so nothing shifts visually. */
.ccard__v a,
.ftr__c a,
.menu__block a{
  border-bottom:0;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
}
.ccard__v a{ text-decoration-color:var(--rule-2); }
.ccard__v a:hover,.ccard__v a:focus-visible{ text-decoration-color:currentColor; }
.ftr__c a{ text-decoration-color:rgba(241,237,226,.32); }
.ftr__c a:hover,.ftr__c a:focus-visible{ text-decoration-color:currentColor; }
.menu__block a{ text-decoration-color:transparent; }
.menu__block a:hover,.menu__block a:focus-visible{ text-decoration-color:currentColor; }

@media (max-width:820px){
  .mark{ min-height:44px; }

  .phero__crumb{ gap:.55rem 0; }
  .phero__crumb a,
  .phero__crumb span[aria-current]{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; min-width:44px;
    padding-inline:.4rem; margin:-.7rem -.4rem;
  }
  .phero__crumb .phero__sep{ padding-inline:.5rem; }

  .ftr__links{ gap:.1rem; }
  .ftr__links a{ min-height:44px; align-items:center; }

  .ftr__c a,
  .ccard__v a,
  .menu__block a{
    display:inline-flex; align-items:center; min-height:44px;
    margin-block:-.65rem;
  }

  .tlink{ padding-top:1.25rem; margin-top:-1.25rem; }
  .socials a{ width:44px; height:44px; }
  .rindex__list a{ min-height:44px; align-items:center; }
}

/* ---- 30.5 Small-screen spacing polish ---------------------------------- */
@media (max-width:520px){
  .plate__cap{ font-size:.64rem; }
  .meta-row{ font-size:.64rem; }
}
@media (max-width:400px){
  .btn{ width:100%; justify-content:space-between; }
  .btn-row{ gap:.65rem; }
  .hero__roles{ font-size:.66rem; letter-spacing:.13em; }
}

/* ---- 30.6 Anchor landing ------------------------------------------------
   Safety net so ANY id targeted by a fragment clears the fixed header.
   :where() keeps specificity at 0, so component rules still win.          */
:where([id]){ scroll-margin-top:calc(var(--hdr-h) + 1.5rem); }

/* ---- 30.7 Focus-index rows keep one line on narrow screens --------------
   Below 760px the button fell back to a single column, so the +/x sign was
   pushed onto a row of its own beneath the heading. Keep the three-track
   layout at every width and just tighten the gap. */
.findex__btn{
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.3rem clamp(.7rem,3vw,1.5rem);
}