/* ============================================================
   KULTURE VULTURES — stylesheet
   Display : Fraunces · Body : Newsreader · Utility : Inter
   Colour  : a pigment system. Every accent is named after a
             dye or pigment with a real global trade history.
   All text/background pairs verified ≥ 4.5:1 (WCAG AA).
   ============================================================ */

:root{
  /* neutrals */
  --ink:#17150F;  --ink-2:#453D30;  --ink-3:#5E5546;
  --bone:#EDE5D4; --bone-deep:#E3D8C1;
  --bone-2:#DCD2BE; --bone-3:#C9B9A6;

  /* pigments — each with a real history */
  --burgundy:#4E1524;    /* the brand */
  --indigo:#24406B;      /* indigo, Indigofera tinctoria */
  --cochineal:#7E1F2F;   /* cochineal, Dactylopius coccus */
  --ochre:#6E4A10;       /* yellow ochre, iron oxide */
  --verdigris:#1F4F45;   /* verdigris, copper acetate */
  --lampblack:#1B1815;   /* lampblack, soot */
  --gold:#C6A667;
  --gold-ink:#A8873F;

  --rule:rgba(23,21,15,.20);
  --rule-strong:rgba(23,21,15,.38);
  --rule-dark:rgba(237,229,212,.22);

  --display:"Fraunces",Georgia,serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
  --util:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --measure:36rem;
  --nav-h:60px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--body);font-optical-sizing:auto;
  font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  line-height:1.66;font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-loading{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

h1,h2,h3,.display{
  font-family:var(--display);font-weight:600;
  font-variation-settings:"SOFT" 0,"WONK" 0;letter-spacing:-.008em;
}

.wrap{max-width:76rem;margin-inline:auto;padding-inline:var(--gutter);position:relative}
.eyebrow{
  font-family:var(--util);font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.45;color:var(--ink-3);
}
.star{color:var(--gold-ink);font-style:normal}
.lede{font-size:clamp(1.15rem,1.05rem + .55vw,1.4rem);line-height:1.5;max-width:var(--measure)}

/* ============ 1. LOADER ============================================ */
#loader{
  position:fixed;inset:0;z-index:200;background:var(--lampblack);color:var(--bone);
  display:grid;place-items:center;
  transition:opacity .7s ease,visibility .7s ease;
}
#loader.done{opacity:0;visibility:hidden}
#loader.skip{display:none}   /* returning within a session — no flash at all */
.loader-inner{width:min(90vw,46rem);padding-inline:var(--gutter);text-align:left}
.loader-word{
  font-family:var(--body);font-weight:500;
  font-size:clamp(2rem,8vw,4.5rem);line-height:1.1;
  min-height:1.2em;margin:0;
}
.loader-gloss{
  font-family:var(--body);font-style:italic;color:var(--bone-3);
  font-size:clamp(1rem,3vw,1.35rem);margin:.5rem 0 0;min-height:1.6em;
}
.loader-bar{height:2px;background:rgba(237,229,212,.18);margin-top:2.5rem;position:relative}
.loader-bar span{position:absolute;inset:0 auto 0 0;width:0;background:var(--gold)}
.loader-meta{
  display:flex;justify-content:space-between;margin-top:.9rem;
  font-family:var(--util);font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3);
}

/* ============ 2. CURSOR + PROGRESS ================================= */
#cursor{
  position:fixed;top:0;left:0;z-index:150;pointer-events:none;
  width:26px;height:26px;margin:-13px 0 0 -13px;
  display:grid;place-items:center;color:var(--gold-ink);
  font-size:15px;mix-blend-mode:multiply;opacity:0;transition:opacity .3s
}
#cursor.on{opacity:1}
#cursor.big{transform:scale(1.9)}
@media (hover:hover) and (pointer:fine){
  html.kv-cursor,html.kv-cursor *{cursor:none!important}
}
@media (hover:none),(pointer:coarse){#cursor{display:none}}

#progress{
  position:fixed;top:0;left:0;height:2px;width:0;background:var(--gold);
  z-index:60;transition:width .1s linear;
}

/* ============ 3. NAV =============================================== */
.masthead{
  border-bottom:1px solid var(--rule);background:rgba(237,229,212,.92);
  backdrop-filter:blur(12px);position:sticky;top:0;z-index:50;
}
.masthead .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem 1.5rem;padding-block:.9rem;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex-shrink:0}
.brand img{width:26px;height:auto}
.brand span{
  font-family:var(--util);font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--burgundy);
}
.nav{display:flex;gap:clamp(.9rem,2.5vw,1.9rem);flex-wrap:wrap}
.nav a{
  font-family:var(--util);font-size:.75rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);text-decoration:none;
  padding-block:.25rem;border-bottom:2px solid transparent;transition:color .2s;
}
.nav a:hover,.nav a:focus-visible{color:var(--burgundy)}
.nav a[aria-current="page"]{color:var(--burgundy);border-bottom-color:var(--gold)}

/* ============ 4. REVEALS =========================================== */
.rv{display:block;overflow:hidden}
.rv > *{
  display:block;transform:translateY(105%);
  transition:transform .9s cubic-bezier(.22,.7,.24,1);
}
.rv.in > *{transform:none}
.fade{opacity:0;transform:translateY(16px)}
.fade.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.22,.7,.24,1)}

/* ============ 5. HERO ============================================== */
.hero{padding-block:clamp(3rem,9vw,6.5rem) clamp(2.5rem,6vw,4rem);position:relative}
.hero h1{
  color:var(--burgundy);font-size:clamp(2.6rem,9.2vw,7rem);
  line-height:1.0;margin:0;
}
.hero-rule{display:flex;align-items:center;gap:1.25rem;
  margin:clamp(1.75rem,4vw,2.75rem) 0 clamp(1.5rem,3vw,2rem)}
.hero-rule::before,.hero-rule::after{content:"";height:1px;background:var(--rule-strong);flex:1}
.hero-rule::after{flex:3}
.hero-grid{display:grid;gap:clamp(1.75rem,4vw,3.5rem)}
@media (min-width:56rem){.hero-grid{grid-template-columns:1.15fr .72fr;align-items:start}}
.hero-grid p{margin:0}
.hero-note{
  border-left:2px solid var(--gold);padding-left:1.25rem;
  font-size:1rem;line-height:1.6;color:var(--ink-2);max-width:26rem;
}
.tagline{
  margin-top:1.5rem!important;font-family:var(--util);font-size:.8rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
}

/* pigment swatch strip */
.swatches{display:flex;margin-top:clamp(2.5rem,6vw,4rem);border:1px solid var(--rule-strong);
  overflow-x:auto;scrollbar-width:none}
.swatches::-webkit-scrollbar{display:none}
.swatch{flex:1;position:relative;padding:1rem .75rem 1.1rem;min-height:6.5rem;
  display:flex;align-items:flex-end;transition:flex .5s cubic-bezier(.22,.7,.24,1)}
.swatch:hover,.swatch:focus-within{flex:1.8}
.swatch span{
  font-family:var(--util);font-size:.62rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone);line-height:1.3;
}
@media (max-width:44rem){
  .swatch{min-height:5.5rem;padding:.65rem .55rem .75rem;flex:0 0 8.5rem}
  .swatch:hover,.swatch:focus-within{flex:0 0 8.5rem}
  .swatch span{font-size:.58rem}
}

/* ============ 6. MARQUEE =========================================== */
.marquee{
  background:var(--lampblack);color:var(--bone);overflow:hidden;
  padding-block:1.1rem;border-block:1px solid var(--lampblack);
}
.marquee-track{display:flex;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{
  display:flex;align-items:center;gap:1.25rem;padding-right:2.5rem;
  font-family:var(--body);font-size:clamp(1.1rem,3vw,1.6rem);font-weight:500;white-space:nowrap;
}
.marquee-item i{font-style:normal;color:var(--gold);font-size:.7em}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ 7. HORIZONTAL SPECIMEN =============================== */
.hscroll{position:relative}
.hscroll-sticky{overflow:hidden}
.hscroll-track{display:flex}
.panel{
  background:var(--pig);color:var(--bone);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(1.5rem,4vw,3.5rem);position:relative;
}
.panel::after{ /* woven texture — plain-weave structure, not a cultural motif */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;
  background:
    repeating-linear-gradient(90deg,transparent 0 7px,rgba(237,229,212,.9) 7px 8px),
    repeating-linear-gradient(0deg,transparent 0 7px,rgba(237,229,212,.55) 7px 8px);
}
.panel > *{position:relative;z-index:1}
.panel .ghost{
  position:absolute;right:clamp(.5rem,2vw,2rem);top:clamp(2rem,6vw,4rem);
  font-family:var(--display);font-weight:700;font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:clamp(9rem,22vw,20rem);line-height:.8;color:var(--bone);
  opacity:.10;pointer-events:none;user-select:none;z-index:0;
}
.panel-no{
  font-family:var(--util);font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-3);
}
.panel .term{
  font-family:var(--body);font-weight:500;line-height:1.1;margin:0;
  font-size:clamp(2.1rem,6.5vw,4rem);
}
.panel .term[dir="rtl"]{text-align:left}
.panel .gloss{
  font-family:var(--display);font-weight:600;font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:clamp(1.3rem,3.4vw,2rem);line-height:1.2;margin:.9rem 0 0;color:var(--bone);
}
.panel .place{
  font-family:var(--util);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-3);margin:1.4rem 0 0;
}
.panel .pig{
  margin-top:.4rem;font-family:var(--util);font-size:.62rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bone-3);opacity:.75;
}

/* desktop: scroll-driven horizontal travel */
@media (min-width:56rem){
  .hscroll{height:460vh}
  .hscroll-sticky{position:sticky;top:0;height:100vh}
  .hscroll-track{height:100%;will-change:transform}
  .panel{width:56vw;flex:0 0 56vw;border-right:1px solid rgba(237,229,212,.18)}
}
/* mobile: native swipe carousel */
@media (max-width:55.999rem){
  .hscroll-track{overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hscroll-track::-webkit-scrollbar{display:none}
  .panel{flex:0 0 86vw;scroll-snap-align:center;min-height:26rem}
}
.hscroll-hint{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem var(--gutter);background:var(--lampblack);color:var(--bone-3);
  font-family:var(--util);font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}

/* ============ 8. SECTIONS ========================================== */
.section{padding-block:clamp(3rem,8vw,5.5rem)}
.section--deep{background:var(--bone-deep);border-block:1px solid var(--rule-strong)}
.section--ink{background:var(--lampblack);color:var(--bone)}
.section--ink .eyebrow{color:var(--gold)}
.section--ink p{color:var(--bone-2)}
.section--burgundy{background:var(--burgundy);color:var(--bone);position:relative;overflow:hidden}
.section--burgundy .eyebrow{color:var(--gold)}
.section--burgundy p{color:var(--bone-2)}
.section-head{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  align-items:baseline;padding-bottom:1.5rem;border-bottom:1px solid var(--rule-strong);
}
.section--ink .section-head{border-bottom-color:var(--rule-dark)}
.section-head .lead{color:var(--burgundy)}
.section--ink .section-head .lead{color:var(--gold)}
.section h2{
  font-size:clamp(1.75rem,1.25rem + 2.4vw,3rem);line-height:1.12;
  margin:clamp(1.5rem,4vw,2.25rem) 0 clamp(1.5rem,3vw,2rem);max-width:24ch;text-wrap:balance;
}
.section h2 i{font-style:italic;color:var(--burgundy)}
.section--ink h2 i{color:var(--gold)}
.section h3{font-size:clamp(1.25rem,1.1rem + 1vw,1.7rem);line-height:1.22;margin:0 0 .6rem}

.pagehead{padding-block:clamp(2.5rem,7vw,4.5rem) clamp(2rem,5vw,3rem);
  border-bottom:1px solid var(--rule-strong)}
.pagehead h1{
  font-size:clamp(2.2rem,1.5rem + 3.4vw,4.2rem);line-height:1.04;
  color:var(--burgundy);margin:1rem 0 1.5rem;max-width:18ch;text-wrap:balance;
}
.pagehead .lede{color:var(--ink-2)}

/* ============ 9. PIGMENT PILLAR CARDS ============================== */
.pigrid{display:grid;gap:2px;margin-top:clamp(2rem,4vw,3rem);background:var(--rule-strong)}
@media (min-width:38rem){.pigrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.pigrid{grid-template-columns:repeat(3,1fr)}}
.pigcard{
  background:var(--pig);color:var(--bone);padding:clamp(1.5rem,3vw,2.25rem);
  min-height:15rem;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
}
.pigcard::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;
  background:
    repeating-linear-gradient(90deg,transparent 0 7px,rgba(237,229,212,.9) 7px 8px),
    repeating-linear-gradient(0deg,transparent 0 7px,rgba(237,229,212,.55) 7px 8px);
}
.pigcard > *{position:relative;z-index:1}
.pigcard .name{
  font-family:var(--util);font-size:.75rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);
}
.pigcard .say{
  font-family:var(--display);font-weight:600;font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.85rem);line-height:1.22;margin:1.25rem 0 0;
}
.pigcard .pig{
  margin:1.5rem 0 0;font-family:var(--util);font-size:.62rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bone-3);
}

/* ============ 10. ENTRIES / ROWS / PROSE =========================== */
.entries{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.entry{border-bottom:1px solid var(--rule);padding-block:clamp(1.35rem,3vw,1.9rem);
  display:grid;grid-template-columns:1fr;gap:.45rem .5rem}
.entry .term{font-family:var(--body);font-weight:500;
  font-size:clamp(1.8rem,1.35rem + 2.2vw,2.8rem);line-height:1.15;color:var(--ink);margin:0}
.entry .term[dir="rtl"]{text-align:left}
.entry .place{font-family:var(--util);font-size:.75rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);align-self:start}
.entry .gloss{font-style:italic;font-weight:500;
  font-size:clamp(1.05rem,1rem + .35vw,1.2rem);color:var(--ink-2);margin:0}
.entry .gloss::before{content:"\21B3\00A0";font-style:normal;color:var(--gold-ink)}
@media (min-width:44rem){
  .entry{grid-template-columns:1fr auto;align-items:baseline}
  .entry .term{grid-column:1}.entry .place{grid-column:2;text-align:right}
  .entry .gloss{grid-column:1/-1}
}
.note{margin:clamp(1.75rem,4vw,2.5rem) 0 0;max-width:var(--measure);color:var(--ink-2)}
.note strong{font-weight:600;color:var(--burgundy)}

.rows{list-style:none;margin:clamp(1.75rem,4vw,2.75rem) 0 0;padding:0;
  border-top:1px solid var(--rule-strong)}
.rows li{border-bottom:1px solid var(--rule);padding-block:clamp(1.25rem,2.8vw,1.8rem);
  display:grid;gap:.5rem}
.rows .name{font-family:var(--util);font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--burgundy)}
.rows .say{font-family:var(--display);font-weight:600;
  font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:clamp(1.2rem,1.05rem + .95vw,1.65rem);line-height:1.3;margin:0}
.rows .body{margin:.4rem 0 0;color:var(--ink-2);max-width:38rem;font-size:1.02rem}
@media (min-width:44rem){.rows li{grid-template-columns:11rem 1fr;gap:.4rem 2rem;align-items:baseline}
  .rows .name{grid-row:span 2}}
.section--ink .rows{border-top-color:var(--rule-dark)}
.section--ink .rows li{border-bottom-color:var(--rule-dark)}
.section--ink .rows .name{color:var(--gold)}
.section--ink .rows .body{color:var(--bone-2)}

.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.35rem}
.prose p:last-child{margin-bottom:0}
.prose h3{margin-top:2.5rem}
.prose .q{font-style:italic;color:var(--ink)}
.section--ink .prose .q{color:var(--bone)}
.prose ul{margin:0 0 1.35rem;padding-left:1.2rem;color:var(--ink-2)}
.prose li{margin-bottom:.55rem}

/* ============ 11. CTA / FOOTER ===================================== */
.letter-mark{position:absolute;right:clamp(-3rem,-4vw,-1rem);top:50%;transform:translateY(-50%);
  width:clamp(14rem,30vw,26rem);opacity:.14;pointer-events:none;user-select:none}
@media (max-width:52rem){.letter-mark{display:none}}
.cta-row{margin-top:clamp(1.75rem,4vw,2.5rem)}
.cta{
  display:inline-flex;align-items:center;gap:.75rem;padding:1.05rem 1.85rem;
  background:var(--gold);color:#33101B;text-decoration:none;font-family:var(--util);
  font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--gold);transition:background .25s ease,color .25s ease;
}
.cta:hover,.cta:focus-visible{background:transparent;color:var(--gold)}
.cta .arw{transition:transform .25s ease}
.cta:hover .arw{transform:translateX(4px)}
.fineprint{margin:1.35rem 0 0!important;font-family:var(--util);font-size:.75rem;
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3)!important}
.textlink{font-family:var(--util);font-size:.82rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--burgundy);text-decoration:none;
  border-bottom:2px solid var(--gold);padding-bottom:.3rem;display:inline-block}
.textlink:hover,.textlink:focus-visible{border-bottom-color:var(--burgundy)}

.foot-cols{border-top:1px solid var(--rule-strong);padding-block:clamp(2.75rem,7vw,4.5rem);
  display:grid;gap:clamp(2.25rem,5vw,3.5rem)}
@media (min-width:52rem){.foot-cols{grid-template-columns:1.35fr 1fr}}
.foot-cols h2{font-size:clamp(1.5rem,1.2rem + 1.7vw,2.2rem);line-height:1.18;margin:1rem 0 .9rem;max-width:20ch}
.foot-cols .eyebrow{color:var(--burgundy)}
.foot-cols p{margin:0 0 1.5rem;max-width:34rem;color:var(--ink-2)}
.social{list-style:none;margin:1.1rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--rule-strong)}
@media (min-width:30rem){.social{grid-template-columns:repeat(4,1fr)}}
.soc{
  background:var(--pig);color:var(--bone);text-decoration:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  padding:1.5rem .75rem;min-height:7.5rem;position:relative;overflow:hidden;
  transition:filter .25s ease;
}
.soc::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;
  background:
    repeating-linear-gradient(90deg,transparent 0 7px,rgba(237,229,212,.9) 7px 8px),
    repeating-linear-gradient(0deg,transparent 0 7px,rgba(237,229,212,.55) 7px 8px);
}
.soc svg{width:26px;height:26px;position:relative;z-index:1;overflow:visible}
.soc span{
  font-family:var(--util);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;position:relative;z-index:1;
}
.soc:hover,.soc:focus-visible{filter:brightness(1.22)}
.colophon{border-top:1px solid var(--rule-strong);padding-block:2rem 2.75rem;
  display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;justify-content:space-between}
.colophon img{width:30px}

/* ============ 12. REDUCED MOTION =================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #loader{display:none}
  #cursor{display:none}
  .rv > *{transform:none!important;transition:none!important}
  .fade{opacity:1!important;transform:none!important;transition:none!important}
  .marquee-track{animation:none;width:100%}
  .swatch{transition:none}
  .cta,.cta .arw,.nav a{transition:none}
  .hscroll{height:auto!important}
  .hscroll-sticky{position:static!important;height:auto!important}
  .hscroll-track{transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory}
  .panel{flex:0 0 86vw!important;width:auto!important;min-height:24rem}
}

/* ============ 13. PROVENANCE CHIPS ================================= */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0 0 1.25rem}
.chip{
  font-family:var(--util);font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:.34rem .62rem;border:1px solid var(--rule-strong);
  color:var(--ink-3);line-height:1;
}
.chip--prov{background:var(--pig,var(--burgundy));color:var(--bone);border-color:transparent}
.section--ink .chip{border-color:var(--rule-dark);color:var(--bone-3)}

/* ============ 14. FIGURES + MANDATORY CREDITS ====================== */
/* Every image on this site must carry a credit. The CSS makes an
   uncredited figure visibly wrong so it can't ship by accident. */
figure.kv{margin:0 0 clamp(1.75rem,4vw,2.5rem)}
figure.kv img{width:100%;height:auto;background:var(--bone-deep)}
figure.kv figcaption{
  margin-top:.7rem;font-family:var(--util);font-size:.7rem;line-height:1.5;
  letter-spacing:.04em;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:.2rem .9rem;
}
figure.kv figcaption b{font-weight:600;color:var(--ink-2)}
figure.kv figcaption:empty::after{
  content:"⚠ MISSING CREDIT — do not publish";color:#7E1F2F;font-weight:600;letter-spacing:.1em;
}
/* An image whose file is not present falls back to the placeholder rather
   than showing a broken image. Nothing publishes until the file is added. */
figure.kv.missing img{display:none}
figure.kv.missing{
  border:1px dashed var(--rule-strong);background:var(--bone-deep);
  aspect-ratio:3/2;display:grid;place-items:center;padding:1.5rem;text-align:center;
}
figure.kv.missing figcaption{display:none}
figure.kv.missing::before{
  content:"Image slot \2014 verify the licence, then add the file to assets/photos/";
  font-family:var(--util);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.7;max-width:28rem;
}
figure.kv figcaption a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
figure.kv figcaption a:hover{color:var(--burgundy)}

.figslot{
  border:1px dashed var(--rule-strong);background:var(--bone-deep);
  aspect-ratio:3/2;display:grid;place-items:center;padding:1.5rem;text-align:center;
}
.figslot p{
  margin:0;font-family:var(--util);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.7;max-width:26rem;
}

/* ============ 15. STORY CARDS ====================================== */
.cards{display:grid;gap:2px;margin-top:clamp(1.75rem,4vw,2.75rem);background:var(--rule-strong)}
@media (min-width:40rem){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:66rem){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--bone);display:flex;flex-direction:column;gap:.75rem;
  padding:clamp(1.25rem,2.5vw,1.75rem);text-decoration:none;
  border-top:4px solid var(--pig,var(--burgundy));transition:background .25s ease;
}
.card:hover,.card:focus-visible{background:var(--bone-deep)}
.card .kicker{
  font-family:var(--util);font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pig,var(--burgundy));
}
.card h3{
  font-size:clamp(1.15rem,1rem + .8vw,1.5rem);line-height:1.22;margin:0;color:var(--ink);
}
.card .dek{margin:0;font-size:.98rem;line-height:1.55;color:var(--ink-2);flex:1}
.card .meta{
  font-family:var(--util);font-size:.64rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.card--soon{pointer-events:none;opacity:.62}
.card--soon h3{color:var(--ink-2)}

/* ============ 16. START HERE ======================================= */
.starthere{list-style:none;margin:clamp(1.75rem,4vw,2.5rem) 0 0;padding:0;
  border-top:1px solid var(--rule-dark)}
.starthere li{border-bottom:1px solid var(--rule-dark)}
.starthere a{
  display:grid;gap:.35rem 1.5rem;padding-block:1.15rem;text-decoration:none;
  align-items:baseline;transition:padding-left .3s cubic-bezier(.22,.7,.24,1);
}
.starthere a:hover,.starthere a:focus-visible{padding-left:.75rem}
.starthere .n{font-family:var(--util);font-size:.66rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.starthere .t{font-family:var(--display);font-weight:600;
  font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:clamp(1.15rem,1rem +1vw,1.65rem);line-height:1.25;color:var(--bone)}
@media (min-width:44rem){.starthere a{grid-template-columns:4rem 1fr}}

/* ============ 17. ARTICLE ========================================== */
.article{padding-block:clamp(2rem,5vw,3.5rem) clamp(3rem,7vw,5rem)}
.article-head{max-width:44rem}
.article h1{
  font-size:clamp(2rem,1.4rem + 3vw,3.6rem);line-height:1.06;
  color:var(--burgundy);margin:.75rem 0 1.1rem;text-wrap:balance;
}
.article .dek{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);line-height:1.45;
  color:var(--ink-2);margin:0 0 1.5rem;max-width:38rem}
.byline{
  display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;padding-block:1rem;
  border-block:1px solid var(--rule);font-family:var(--util);font-size:.72rem;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.byline b{font-weight:600;color:var(--ink-2)}
.article-body{max-width:38rem;margin-top:clamp(2rem,5vw,3rem)}
.article-body h2{
  font-size:clamp(.78rem,.75rem + .2vw,.85rem);font-family:var(--util);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--burgundy);
  margin:clamp(2.5rem,5vw,3.5rem) 0 1rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--rule-strong);max-width:none;
}
.article-body h2:first-child{margin-top:0}
.article-body h3{font-size:clamp(1.2rem,1.1rem + .7vw,1.5rem);margin:2rem 0 .6rem}
.article-body p{margin:0 0 1.35rem}
.article-body .standfirst{
  font-size:1.15rem;line-height:1.6;color:var(--ink);
  border-left:3px solid var(--gold);padding-left:1.25rem;
}
.article-body blockquote{
  margin:2rem 0;padding:0 0 0 1.25rem;border-left:3px solid var(--burgundy);
  font-family:var(--display);font-weight:600;font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:clamp(1.25rem,1.1rem + .9vw,1.7rem);line-height:1.28;color:var(--burgundy);
}
.sources{list-style:none;margin:0;padding:0}
.sources li{padding-block:.85rem;border-bottom:1px solid var(--rule);
  display:grid;gap:.2rem}
.sources .kind{font-family:var(--util);font-size:.64rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sources .ref{color:var(--ink-2);font-size:1rem;line-height:1.5}
.knowbox{border:1px solid var(--rule-strong);padding:clamp(1.25rem,3vw,1.75rem);margin:2rem 0}
.knowbox dt{font-family:var(--util);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--burgundy);margin-top:1.1rem}
.knowbox dt:first-child{margin-top:0}
.knowbox dd{margin:.35rem 0 0;color:var(--ink-2);font-size:1rem;line-height:1.55}

/* ============ 18. BIG FOOTER ======================================= */
.bigfoot{background:var(--lampblack);color:var(--bone);padding-block:clamp(2.75rem,6vw,4rem)}
.bigfoot-grid{display:grid;gap:2rem clamp(1.5rem,4vw,3rem)}
@media (min-width:40rem){.bigfoot-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:60rem){.bigfoot-grid{grid-template-columns:repeat(4,1fr)}}
.bigfoot h4{
  font-family:var(--util);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .9rem;
}
.bigfoot ul{list-style:none;margin:0;padding:0}
.bigfoot li{margin-bottom:.55rem}
.bigfoot a{color:var(--bone-2);text-decoration:none;font-size:1rem}
.bigfoot a:hover,.bigfoot a:focus-visible{color:var(--gold)}
.bigfoot .colophon{border-top-color:var(--rule-dark);margin-top:clamp(2rem,4vw,3rem)}
.bigfoot .colophon .eyebrow{color:var(--bone-3)}