/* ============================================================
   AAWAZ — aawaz.world
   Design system v1. Every value here traces to the Phase 0 token
   sheet. If a value is not declared in :root, it is not used.
   ============================================================ */

:root{
  /* ground — dark (the institution) */
  --ink-900:#0B0B0B;
  --ink-800:#111111;
  --ink-700:#161616;
  --line:#262626;
  --line-soft:#1B1B1B;

  /* ink — ivory */
  --ivory:#F5F1E8;
  --ivory-2:#C9C3B6;
  --ivory-3:#8A857A;

  /* archive red — rubrication */
  --red:#8B1E23;        /* rules, fills, marks. NEVER text on dark (2.2:1) */
  --red-ink:#D0585C;    /* red that carries words on dark (5.0:1) */

  /* ground — ivory (the record) */
  --paper:#F5F1E8;
  --paper-ink:#141414;
  --paper-ink-2:#3A3730;
  --paper-line:rgba(20,20,20,.14);

  /* type */
  --display:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --read:'Newsreader',Georgia,'Times New Roman',serif;
  --ui:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --rec:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* measure */
  --gut:clamp(20px,5vw,72px);
  --shell:1440px;
  --col:1180px;
  --pad:clamp(88px,12vw,176px);

  /* motion */
  --ease:cubic-bezier(.2,.6,.2,1);
  --t-ui:200ms;
  --t-move:400ms;
  --t-reveal:900ms;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:96px;
}

body{
  background:var(--ink-900);
  color:var(--ivory);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--red);color:var(--ivory)}

/* focus — visible everywhere, no exceptions */
:focus-visible{outline:2px solid var(--red-ink);outline-offset:3px}
.paper :focus-visible{outline-color:var(--red)}

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

/* ------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------ */
.wrap{max-width:var(--col);margin-inline:auto;padding-inline:var(--gut)}
.wrap--wide{max-width:var(--shell)}
.sec{padding-block:var(--pad)}
.sec--top{border-top:1px solid var(--line)}
.sec--tight{padding-block:clamp(56px,8vw,104px)}

.grid{display:grid;gap:clamp(24px,3.4vw,52px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-side{grid-template-columns:1fr 1.15fr;align-items:end}
@media(max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}.g-side{grid-template-columns:1fr;align-items:start}}
@media(max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ------------------------------------------------------------
   TYPE
   ------------------------------------------------------------ */
.d1{font-family:var(--display);font-weight:400;
  font-size:clamp(2.6rem,7vw,6rem);line-height:.99;letter-spacing:-.022em;text-wrap:balance}
.d2{font-family:var(--display);font-weight:400;
  font-size:clamp(2.05rem,4.6vw,3.7rem);line-height:1.05;letter-spacing:-.018em;text-wrap:balance}
.d3{font-family:var(--display);font-weight:400;
  font-size:clamp(1.6rem,2.9vw,2.5rem);line-height:1.1;letter-spacing:-.014em}
.d1 em,.d2 em,.d3 em{font-style:italic;color:var(--ivory-2)}

/* Bodoni's hairlines break up under 40px — anything smaller is Newsreader.
   This is a rule, not a preference. */
h4,.h4{font-family:var(--read);font-weight:400;font-size:1.35rem;line-height:1.28;letter-spacing:-.006em}

.lede{font-family:var(--read);font-weight:300;
  font-size:clamp(1.125rem,1.6vw,1.4rem);line-height:1.6;color:var(--ivory);max-width:58ch}
.body{font-family:var(--read);font-size:1.0625rem;line-height:1.75;color:var(--ivory-2);max-width:68ch}
.body + .body{margin-top:16px}
.body strong{color:var(--ivory);font-weight:500}

.eyebrow{display:block;font-family:var(--ui);font-size:.6875rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ivory-3)}
.eyebrow em{font-style:normal;color:var(--red-ink)}

/* the signature — accession line */
.rec{font-family:var(--rec);font-size:.6875rem;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ivory-3)}
a.rec{display:inline-flex;align-items:center;min-height:44px;
  transition:color var(--t-ui) var(--ease)}
a.rec:hover{color:var(--ivory)}
.rec b{color:var(--red-ink);font-weight:500}
.rec--block{display:block}

/* ------------------------------------------------------------
   MASTHEAD
   ------------------------------------------------------------ */
.mast{position:fixed;inset:0 0 auto 0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:20px var(--gut);
  border-bottom:1px solid transparent;
  transition:background var(--t-move) var(--ease),border-color var(--t-move) var(--ease),padding var(--t-move) var(--ease)}
.mast.is-solid{background:rgba(11,11,11,.92);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line);padding-block:15px}
.mast__mark{font-family:var(--display);font-size:1.15rem;letter-spacing:.22em;color:var(--ivory);
  line-height:1;display:inline-flex;align-items:center;min-height:44px;padding-right:8px}
.mast__nav{display:flex;gap:30px;align-items:center}
.mast__nav a{font-family:var(--ui);font-size:.6875rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(245,241,232,.66);transition:color var(--t-ui) var(--ease);
  padding-block:13px;position:relative;display:inline-flex;align-items:center}
.mast__nav a:hover{color:var(--ivory)}
.mast__nav a[aria-current="page"]{color:var(--ivory)}
.mast__nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--red)}
.mast__toggle{display:none;font-family:var(--rec);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ivory);padding:8px 2px;min-height:44px;align-items:center}
@media(max-width:860px){
  .mast__nav{display:none}
  .mast__toggle{display:inline-flex}
}

/* mobile menu — full-screen overlay */
.menu{position:fixed;inset:0;z-index:90;background:var(--ink-900);
  display:flex;flex-direction:column;padding:20px var(--gut) 40px;
  opacity:0;visibility:hidden;transition:opacity var(--t-move) var(--ease),visibility var(--t-move)}
.menu.is-open{opacity:1;visibility:visible}
.menu__top{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.menu__close{font-family:var(--rec);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red-ink);min-height:44px;display:inline-flex;align-items:center}
.menu__list{margin-top:14px;flex:1}
.menu__list a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  font-family:var(--display);font-size:clamp(1.9rem,8vw,2.6rem);line-height:1;letter-spacing:-.018em;
  padding:20px 0;border-bottom:1px solid var(--line-soft);
  transition:border-color var(--t-ui) var(--ease)}
.menu__list a:hover,.menu__list a:focus-visible{border-bottom-color:var(--red)}
.menu__list a .rec{font-size:.625rem}
.menu__foot{padding-top:22px;border-top:1px solid var(--line)}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink-900)}
.hero__img{position:absolute;inset:0}
.hero__img picture,.hero__img img{display:block;width:100%;height:100%}
.hero__img img{object-fit:cover;object-position:62% 40%;transform:scale(1.04);
  animation:heroSettle 3000ms var(--ease) forwards}
@keyframes heroSettle{to{transform:scale(1)}}

/* A single directional scrim. The photograph is the point — it is never
   flattened, only weighted enough under the type to hold contrast. */
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,6,6,.52) 0%,rgba(6,6,6,0) 26%,rgba(6,6,6,0) 42%,rgba(6,6,6,.78) 88%,rgba(6,6,6,.94) 100%)}
.hero__scrim::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,6,6,.62) 0%,rgba(6,6,6,.20) 42%,rgba(6,6,6,0) 68%)}

.hero__inner{position:relative;width:100%;padding-block:0 clamp(52px,9vw,104px)}
.hero__mark{display:block;font-family:var(--ui);font-size:.6875rem;font-weight:600;
  letter-spacing:.42em;text-transform:uppercase;color:var(--ivory);opacity:.82;margin-bottom:26px}
.hero .d1{max-width:14ch}
.hero__sub{margin-top:22px;font-family:var(--read);font-weight:300;
  font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.5;color:rgba(245,241,232,.88);max-width:34ch}
.hero__cta{margin-top:clamp(32px,4.5vw,48px)}

@media(max-width:700px){
  /* A 3:2 photograph cannot be cover-cropped to a 9:19 phone screen without
     losing the subject. So the phone gets its own 4:5 crop, shown whole, with
     the type block beneath it — a cinematic poster rather than a squeezed
     desktop hero. Nothing about her is cropped at any width. */
  .hero{flex-direction:column;justify-content:space-between;align-items:stretch;
    min-height:100svh;padding-bottom:clamp(26px,7vw,44px)}
  .hero__img{position:relative;inset:auto;width:100%;aspect-ratio:4/5;flex:none}
  .hero__img img{object-position:50% 50%}
  /* the fade rides on the image element so it lands exactly on its edge —
     a vw-based height left a visible seam at some widths */
  .hero__scrim{display:none}
  .hero__img::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(6,6,6,.34) 0%,rgba(6,6,6,0) 22%,
      rgba(6,6,6,0) 56%,rgba(6,6,6,.55) 84%,#0B0B0B 100%)}
  .hero__inner{padding-block:clamp(22px,5vw,34px) 0;margin-top:-14px}
  .hero__mark{margin-bottom:16px;letter-spacing:.34em}
  .hero .d1{max-width:none}
  .hero__sub{margin-top:16px;max-width:none}
  .hero__cta{width:100%;margin-top:clamp(24px,5vw,32px)}
}

/* ------------------------------------------------------------
   BUTTONS — three variants, no fourth
   ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--ui);font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:16px 30px;min-height:44px;border:1px solid var(--ivory);color:var(--ivory);
  transition:background var(--t-move) var(--ease),color var(--t-move) var(--ease),border-color var(--t-move) var(--ease)}
.btn:hover{background:var(--ivory);color:var(--ink-900)}
.btn--red{border-color:var(--red);background:var(--red);color:var(--ivory)}
.btn--red:hover{background:#A5262C;border-color:#A5262C;color:var(--ivory)}
.btn--quiet{border:0;border-bottom:1px solid var(--line);padding:14px 0;
  color:var(--ivory-2);letter-spacing:.16em;justify-content:space-between;width:100%}
.btn--quiet:hover{background:none;color:var(--ivory);border-bottom-color:var(--red)}
.paper .btn{border-color:var(--paper-ink);color:var(--paper-ink)}
.paper .btn:hover{background:var(--paper-ink);color:var(--paper)}

/* ------------------------------------------------------------
   REVEAL
   ------------------------------------------------------------ */
.rev{opacity:0;transform:translateY(20px);
  transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.rev.is-in{opacity:1;transform:none}
.rev.is-in.d1x{transition-delay:80ms}
.rev.is-in.d2x{transition-delay:160ms}
.rev.is-in.d3x{transition-delay:240ms}

/* ------------------------------------------------------------
   SECTION HEADER
   ------------------------------------------------------------ */
.head{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,72px);align-items:end;
  padding-bottom:clamp(40px,5.5vw,72px)}
.head--simple{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  flex-wrap:wrap;padding-bottom:clamp(30px,4vw,52px)}
.lnk{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-size:.75rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-3);
  padding-block:10px;min-height:44px;border-bottom:1px solid transparent;
  transition:color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease)}
.lnk:hover{color:var(--ivory);border-bottom-color:var(--red)}
.head .eyebrow{margin-bottom:22px}
@media(max-width:860px){.head{grid-template-columns:1fr;align-items:start}}

.rule{height:1px;background:var(--line);border:0}
.rule--red{background:var(--red)}

/* ------------------------------------------------------------
   WHAT WE DO
   ------------------------------------------------------------ */
.pillars{gap:clamp(22px,3vw,44px)}
.pillar{border-top:1px solid var(--line);padding-top:22px}
.pillar__n{display:block;font-family:var(--rec);font-size:.6875rem;letter-spacing:.16em;
  color:var(--red-ink);margin-bottom:16px}
.pillar h3{font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,2.2vw,1.8rem);
  line-height:1.1;letter-spacing:-.012em;margin-bottom:10px}
.pillar p{font-family:var(--read);font-size:1rem;line-height:1.55;color:var(--ivory-3);max-width:26ch}

/* ------------------------------------------------------------
   COLLECTIONS
   ------------------------------------------------------------ */
.cols{border-top:1px solid var(--line)}
.col{display:grid;grid-template-columns:auto auto 1fr auto;gap:clamp(16px,2.5vw,32px);
  align-items:baseline;padding:clamp(20px,2.6vw,28px) 0;border-bottom:1px solid var(--line);
  transition:border-color var(--t-move) var(--ease)}
.col:hover,.col:focus-visible{border-bottom-color:var(--red)}
.col__n{font-family:var(--rec);font-size:.6875rem;color:var(--red-ink);letter-spacing:.13em}
.col__t{font-family:var(--display);font-weight:500;font-size:clamp(1.35rem,2.6vw,2rem);
  line-height:1.1;letter-spacing:-.016em;color:var(--ivory)}
.col__l{font-family:var(--read);font-size:1rem;color:var(--ivory-3);justify-self:end;
  text-align:right;max-width:34ch}
.col__a{font-family:var(--ui);font-size:.9rem;color:var(--ivory-3);
  transition:transform var(--t-move) var(--ease),color var(--t-move) var(--ease)}
.col:hover .col__a{color:var(--ivory);transform:translateX(5px)}
@media(max-width:820px){
  .col{grid-template-columns:auto 1fr auto;gap:6px 16px;align-items:center}
  .col__l{grid-row:2;grid-column:2/4;justify-self:start;text-align:left;
    font-size:.92rem;line-height:1.4;max-width:none}
}

/* ------------------------------------------------------------
   PORTRAIT CARD
   ------------------------------------------------------------ */
.pc{display:block;position:relative;transition:opacity var(--t-move) var(--ease)}
.pc__fr{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink-700)}
.pc__fr img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform 1200ms var(--ease),filter 600ms var(--ease);
  filter:saturate(.94)}
.pc:hover .pc__fr img,.pc:focus-visible .pc__fr img{transform:scale(1.06);filter:saturate(1)}
.pc__cap{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  transition:border-color var(--t-move) var(--ease)}
/* mobile-first: one large portrait, then two, then three, then four */
.g-people{display:grid;gap:clamp(26px,3vw,40px) clamp(16px,2.2vw,30px);grid-template-columns:1fr}
@media(min-width:420px){.g-people{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.g-people{grid-template-columns:repeat(3,1fr)}}
.pc:hover .pc__cap{border-top-color:var(--red)}
.pc__name{font-family:var(--read);font-size:clamp(1.1rem,1.4vw,1.28rem);font-weight:400;
  line-height:1.2;color:var(--ivory);letter-spacing:0}
.pc__meta{font-family:var(--ui);font-size:.75rem;color:var(--ivory-3);margin-top:5px;letter-spacing:.02em}
.pc .rec{display:block;margin-top:10px}

/* horizontal rail */
.rail{display:flex;gap:clamp(16px,2.2vw,28px);overflow-x:auto;
  scroll-snap-type:x mandatory;padding-bottom:20px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rail > *{flex:0 0 clamp(210px,24vw,268px);scroll-snap-align:start}
.rail::-webkit-scrollbar{height:2px}
.rail::-webkit-scrollbar-track{background:var(--line-soft)}
.rail::-webkit-scrollbar-thumb{background:var(--ivory-3)}
.rail__end .pc__fr{border:1px dashed #3A3A3A;background:transparent;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}

/* ------------------------------------------------------------
   PROJECT ROWS
   ------------------------------------------------------------ */
.proj{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,44px);
  align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line);
  transition:border-color var(--t-move) var(--ease)}
.proj:first-of-type{border-top:1px solid var(--line)}
.proj:hover{border-bottom-color:var(--red)}
.proj__n{font-family:var(--rec);font-size:.6875rem;color:var(--red-ink);letter-spacing:.13em}
.proj__t{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.1;letter-spacing:-.014em}
.proj__l{font-family:var(--read);font-size:1rem;color:var(--ivory-2);margin-top:8px;max-width:52ch;line-height:1.6}
.proj__c{font-family:var(--rec);font-size:.6875rem;color:var(--ivory-3);letter-spacing:.13em;white-space:nowrap}
@media(max-width:720px){
  .proj{grid-template-columns:1fr;gap:10px}
  .proj__c{margin-top:6px}
}

/* ------------------------------------------------------------
   FACTS — compact, human, never a dashboard
   ------------------------------------------------------------ */
.ledger{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line)}
.ledger > div{background:var(--ink-900);padding:clamp(22px,2.6vw,30px) clamp(14px,2vw,24px)}
.ledger b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1;letter-spacing:-.016em;
  color:var(--ivory);font-variant-numeric:tabular-nums}
.ledger span{display:block;font-family:var(--ui);font-size:.625rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-3);margin-top:12px;line-height:1.5}
@media(max-width:700px){.ledger{grid-template-columns:1fr 1fr}}

/* ------------------------------------------------------------
   MAGAZINE
   ------------------------------------------------------------ */
.mag{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
@media(max-width:860px){.mag{grid-template-columns:1fr}}
.mag__cover{position:relative;display:block;background:var(--ink-700);border:1px solid var(--line);
  transition:border-color var(--t-move) var(--ease)}
a.mag__cover:hover{border-color:var(--ivory-3)}
.mag__cover img{width:100%;height:auto}
.mag__flag{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--rec);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ivory);border:1px solid var(--red);background:rgba(139,30,35,.20);padding:8px 14px}
.mag__flag i{width:5px;height:5px;background:var(--red-ink);display:block}

/* ------------------------------------------------------------
   SUPPORT
   ------------------------------------------------------------ */
.sup{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(16px,3vw,44px);
  padding:28px 0;border-bottom:1px solid var(--line);align-items:start;
  transition:border-color var(--t-move) var(--ease)}
.sup:first-of-type{border-top:1px solid var(--line)}
.sup:hover{border-bottom-color:var(--red)}
.sup__t{font-family:var(--display);font-size:clamp(1.3rem,2.3vw,1.9rem);line-height:1.14;letter-spacing:-.014em}
.sup__w{font-family:var(--read);font-size:1rem;line-height:1.65;color:var(--ivory-2)}
.sup__p{font-family:var(--read);font-size:.95rem;line-height:1.6;color:var(--ivory-3);margin-top:10px}
.sup__p b{font-family:var(--rec);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-ink);display:block;margin-bottom:5px;font-weight:500}
@media(max-width:720px){.sup{grid-template-columns:1fr;gap:12px}}

/* ------------------------------------------------------------
   PLATE — full-bleed field photograph
   ------------------------------------------------------------ */
.plate{margin-block:clamp(56px,8vw,120px)}
.plate picture{display:block;overflow:hidden}
.plate img{display:block;width:100%;height:clamp(420px,58vw,760px);object-fit:cover;
  transform:scale(1.06);transition:transform 2200ms var(--ease)}
.plate.is-in img{transform:scale(1)}
/* The caption sits under the plate, not over it. A scrim heavy enough to hold
   type over bright rice would have flattened the photograph, and the
   photograph is the point. */
.plate__cap{margin-top:14px}
.plate__t{font-family:var(--read);font-size:.98rem;line-height:1.5;color:var(--ivory-3)}
@media(max-width:700px){.plate img{height:clamp(440px,112vw,620px)}}

/* A vertical photograph, kept vertical. */
.closer{display:grid;grid-template-columns:1fr .82fr;gap:clamp(32px,5vw,80px);align-items:center}
@media(max-width:860px){.closer{grid-template-columns:1fr;gap:40px}}
.figt img{display:block;width:100%;height:auto;transform:scale(1.05);
  transition:transform 2000ms var(--ease)}
.figt.is-in img{transform:scale(1)}
.figt picture{display:block;overflow:hidden;background:var(--ink-700)}
.figt__cap{margin-top:14px;padding-top:11px;border-top:1px solid var(--line);
  font-family:var(--rec);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ivory-3)}

/* ------------------------------------------------------------
   CONTACT
   ------------------------------------------------------------ */
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(30px,4vw,44px)}
.contact__c{display:flex;flex-direction:column;gap:8px;background:var(--ink-900);
  padding:clamp(24px,3vw,34px);min-height:44px;transition:background var(--t-move) var(--ease)}
.contact__c:hover,.contact__c:focus-visible{background:var(--ink-800)}
.contact__k{font-family:var(--ui);font-size:.625rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ivory-3)}
.contact__v{font-family:var(--read);font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--ivory);
  line-height:1.35;word-break:break-word}
.contact__a{margin-top:auto;padding-top:16px;font-family:var(--ui);font-size:.6875rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red-ink)}
@media(max-width:820px){.contact{grid-template-columns:1fr}}

/* mobile menu — external links */
.menu__ext{display:block;font-family:var(--ui);font-size:.75rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-3);
  padding:14px 0;min-height:44px;transition:color var(--t-ui) var(--ease)}
.menu__ext:hover{color:var(--ivory)}

/* ------------------------------------------------------------
   PROFILE PAGE
   ------------------------------------------------------------ */
.prof{display:grid;grid-template-columns:.82fr 1fr;gap:clamp(30px,5vw,84px);align-items:start}
@media(max-width:900px){.prof{grid-template-columns:1fr;gap:32px}}
.prof__fr{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink-700)}
@media(min-width:901px){.prof > div:first-child{position:sticky;top:112px}}
.prof__fr img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);
  transition:transform 1600ms var(--ease)}
.prof.is-in .prof__fr img{transform:scale(1)}
.prof__name{margin-top:20px}
.prof__bio{font-family:var(--read);font-size:clamp(1.08rem,1.35vw,1.24rem);line-height:1.72;
  color:var(--ivory-2);max-width:56ch;margin-top:26px}
.meta{margin-top:32px;border-top:1px solid var(--line)}
.meta__row{display:grid;grid-template-columns:150px 1fr;gap:20px;
  padding:13px 0;border-bottom:1px solid var(--line-soft)}
.meta__k{font-family:var(--rec);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-3)}
.meta__v{font-family:var(--read);font-size:.98rem;color:var(--ivory)}
@media(max-width:520px){.meta__row{grid-template-columns:1fr;gap:3px;padding:12px 0}}

.storybox{margin-top:38px;border:1px solid var(--line);background:var(--ink-800);padding:clamp(22px,3vw,32px)}
.storybox p{font-family:var(--read);font-size:1rem;line-height:1.65;color:var(--ivory-2);
  max-width:50ch;margin:12px 0 24px}

/* ------------------------------------------------------------
   INDEX / FILTERS
   ------------------------------------------------------------ */
.field{display:flex;align-items:center;gap:16px;margin-top:clamp(28px,4vw,44px);
  border-bottom:1px solid var(--line);padding:16px 0;max-width:640px;
  transition:border-color var(--t-move) var(--ease)}
.field:focus-within{border-bottom-color:var(--red)}
.field input{flex:1;background:none;border:0;outline:none;color:var(--ivory);
  font-family:var(--read);font-size:clamp(1.1rem,1.6vw,1.35rem);min-height:32px}
.field input::placeholder{color:#4C4A46}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}
@media(max-width:760px){
  .filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);padding-bottom:4px}
  .filters::-webkit-scrollbar{display:none}
  .fl{flex:0 0 auto}
}
.fl{font-family:var(--ui);font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 16px;min-height:44px;display:inline-flex;align-items:center;
  border:1px solid var(--line);color:var(--ivory-3);
  transition:color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease),background var(--t-ui) var(--ease)}
.fl:hover{color:var(--ivory);border-color:var(--ivory-3)}
.fl[aria-pressed="true"]{color:var(--ivory);border-color:var(--red);background:rgba(139,30,35,.16)}
.count{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.index-head{padding-bottom:clamp(30px,4vw,48px)}
.empty{padding:60px 0;border-top:1px solid var(--line)}

/* ------------------------------------------------------------
   TEAM / PROCESS (About)
   ------------------------------------------------------------ */
.person{display:grid;grid-template-columns:.72fr 1fr;gap:clamp(24px,4vw,64px);
  padding-block:clamp(34px,5vw,64px);border-top:1px solid var(--line);align-items:center}
.person__img{position:relative;overflow:hidden;background:var(--ink-700)}
.person__img img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  transform:scale(1.04);transition:transform 1800ms var(--ease)}
.person.is-in .person__img img,.rev.is-in .person__img img{transform:scale(1)}
/* Alternate the portrait side so three people read as a spread rather than a
   card list — and flip the column widths with it, so every portrait is the
   same size whichever side it sits on. */
.person:nth-child(even){grid-template-columns:1fr .72fr}
.person:nth-child(even) .person__img{order:2}
@media(max-width:760px){.person:nth-child(even) .person__img{order:0}}
.person__role{font-family:var(--rec);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red-ink);line-height:1.6;margin-bottom:12px}
.person h3{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1.1;letter-spacing:-.014em;margin-bottom:16px}
.person p{font-family:var(--read);font-size:1.02rem;line-height:1.68;color:var(--ivory-2);max-width:46ch}
.focus{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 18px}
.focus span{font-family:var(--rec);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ivory-3);padding-bottom:3px;border-bottom:1px solid var(--line)}
.bg{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.bg li{list-style:none;position:relative;padding-left:20px;
  font-family:var(--read);font-size:.95rem;line-height:1.5;color:var(--ivory-2);padding-block:6px}
.bg li::before{content:"";position:absolute;left:0;top:1em;width:8px;height:1px;background:var(--red)}
@media(max-width:760px){
  .person{grid-template-columns:1fr;gap:22px;padding-block:clamp(28px,7vw,40px)}
  .person p{font-size:.98rem;line-height:1.6}
  .person__img img{aspect-ratio:4/5}
}

.steps{display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(30px,5vw,80px);
  border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line-soft)}
.step .n{font-family:var(--rec);font-size:.6875rem;color:var(--red-ink);letter-spacing:.13em;min-width:2.4em}
.step .t{font-family:var(--read);font-size:1.18rem;line-height:1.25}
.step .d{font-family:var(--read);font-size:.95rem;color:var(--ivory-3);line-height:1.55;margin-top:4px}
@media(max-width:700px){.steps{grid-template-columns:1fr}}

.charter{border-top:1px solid var(--line)}
.charter li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line-soft)}
.charter li span{font-family:var(--rec);font-size:.6875rem;color:var(--red-ink);letter-spacing:.13em}
.charter li p{font-family:var(--read);font-size:1.1rem;color:var(--ivory);line-height:1.4}

/* ------------------------------------------------------------
   NOTICE
   ------------------------------------------------------------ */
.notice{border-left:2px solid var(--red);padding:6px 0 6px 24px;max-width:64ch}
.notice p{font-family:var(--read);font-size:1rem;line-height:1.7;color:var(--ivory-2)}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.foot{border-top:1px solid var(--line);padding-block:clamp(52px,7vw,84px) 40px}
.foot__top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(28px,4vw,60px)}
@media(max-width:820px){.foot__top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot__top{grid-template-columns:1fr}}
.foot__mark{font-family:var(--display);font-size:1.5rem;letter-spacing:.2em;color:var(--ivory)}
.foot__tag{font-family:var(--read);font-size:.98rem;line-height:1.65;color:var(--ivory-3);
  max-width:34ch;margin-top:16px}
.foot-h{font-family:var(--ui);font-size:.625rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ivory-3);margin-bottom:16px}
.foot__nav{display:flex;flex-direction:column;gap:11px}
.foot__nav a,.foot__nav span{font-family:var(--read);font-size:1rem;color:var(--ivory-2);
  transition:color var(--t-ui) var(--ease)}
.foot__nav a:hover{color:var(--ivory)}
.foot__nav span{color:#55524C}
.foot__base{margin-top:clamp(44px,6vw,72px);padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ------------------------------------------------------------
   PAPER GROUND — the record (long-form reading)
   ------------------------------------------------------------ */
.paper{background:var(--paper);color:var(--paper-ink)}
.paper .d1,.paper .d2,.paper .d3{color:var(--paper-ink)}
.paper .d1 em,.paper .d2 em,.paper .d3 em{color:var(--paper-ink-2)}
.paper .eyebrow{color:#6E6A60}
.paper .eyebrow em{color:var(--red)}
.paper .rec{color:#6E6A60}
.paper .rec b{color:var(--red)}
.paper .body,.paper .sup__w{color:var(--paper-ink-2)}
.paper .lede{color:var(--paper-ink)}
.paper .rule,.paper .sup,.paper .meta,.paper .meta__row{border-color:var(--paper-line)}
.paper .notice{border-left-color:var(--red)}
.paper .notice p{color:var(--paper-ink-2)}

/* ------------------------------------------------------------
   MOTION PREFERENCES
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rev{opacity:1;transform:none}
  .hero__img img,.pc__fr img,.prof__fr img{transform:none}
}

/* print — an archive should print */
@media print{
  body{background:#fff;color:#000}
  .mast,.menu,.hero__scrim,.foot__nav,.btn{display:none}
  .rec{color:#666}
}