/* ═══════════════════════════════════════════════════════════════════════
   groundwork — shared design system
   built to Brand Guidelines v2.0 (July 2026)

   colour   Forest #232B1C · Paper Cream #F1EBE5 · Ink #1C1E1C · Stone #C1B8AF
            Clay #C4A882 · Moss #3F4F34 · Fog #E2DCD4 · Bone #FAF7F3
   type     Libre Caslon Display/Text (display) · Jost (Brandon Text stand-in)
   logo     placed as supplied artwork, never reset in a typeface

   Load-bearing rules, encoded here:
   · Paper Cream dominates (~58%). A light brand with dark punctuation.
   · Clay is a background, almost never a text colour. Paper Cream on Clay
     is 1.92:1 and is Tier D. Ink on Clay is 7.41:1 and is the only pairing used.
   · Colour is not emphasis. Labels differ by case and tracking, not hue.
   · Left-aligned always. Centred type is for the tagline under the mark.
   · No gradients, drop shadows, icons, or rounded cards.
   · Caslon never below 15pt. Body leading never below 1.55.
   ═══════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --forest:#232B1C;
  --cream:#F1EBE5;
  --ink:#1C1E1C;
  --stone:#C1B8AF;
  --clay:#C4A882;
  --moss:#3F4F34;
  --fog:#E2DCD4;
  --bone:#FAF7F3;

  --rule:rgba(28,30,28,0.14);
  --rule-soft:rgba(28,30,28,0.08);
  --rule-dk:rgba(241,235,229,0.18);

  --max-width:1440px;
  --gutter:24px;
  --bar-h:34px;
  --hdr-h:76px;
  --rhythm:74px;

  /* guidelines ban rounded cards. set to 999px if you ever want goop's pills. */
  --radius:0px;

  --serif:'Libre Caslon Display','Adobe Caslon Pro',Georgia,serif;
  --serif-text:'Libre Caslon Text','Adobe Caslon Pro',Georgia,serif;
  --sans:'Brandon Text','Jost','Poppins',system-ui,sans-serif;
}
@media(min-width:1024px){:root{--gutter:56px;--rhythm:96px;--hdr-h:84px}}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px}

/* ── display type ─────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--serif);font-weight:400;text-transform:lowercase}
.d-xl{font-size:clamp(40px,7vw,88px);line-height:1.02;letter-spacing:-0.015em}
.d-l {font-size:clamp(30px,4.4vw,54px);line-height:1.08;letter-spacing:-0.01em}
.d-m {font-size:clamp(24px,3vw,38px);line-height:1.12}
.d-s {font-size:20px;line-height:1.15}          /* never below 15pt / 20px */
em{font-family:var(--serif-text);font-style:italic}

/* ── ui type ──────────────────────────────────────────────────────────── */
.label{
  font-family:var(--sans);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.18em;line-height:1.3;
  color:var(--forest);
}
p{font-size:16px;line-height:1.6;max-width:68ch}   /* 60–75 characters */
.sm{font-size:14px;line-height:1.6}

/* ── layout ───────────────────────────────────────────────────────────── */
/* margin-left/right only. `margin:0 auto` here would beat `section{margin-top}`
   on specificity and silently flatten the whole page rhythm. */
.wrap{max-width:var(--max-width);margin-inline:auto;padding:0 var(--gutter)}
.narrow{max-width:1080px;margin-inline:auto;padding:0 var(--gutter)}
.column{max-width:720px;margin-inline:auto;padding:0 var(--gutter)}
section{margin-top:var(--rhythm)}
.field-block{padding:var(--rhythm) 0;margin-top:var(--rhythm)}

/* ── announcement bar ─────────────────────────────────────────────────── */
.bar{
  height:var(--bar-h);background:var(--ink);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:0.16em;
  padding:0 16px;text-align:center;
}

/* ── header ───────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;background:var(--cream);border-bottom:1px solid var(--rule-soft)}
.hdr-in{display:flex;align-items:center;gap:36px;height:var(--hdr-h)}
/* the logo is placed artwork. it is never set in a typeface. */
.hdr .lockup{width:124px;flex-shrink:0}          /* min full lockup is 110px */
.hdr nav{display:flex;gap:26px}
.hdr nav a,.hdr .util a{font-size:14px;color:var(--ink);padding:3px 0;border-bottom:1px solid transparent}
.hdr nav a:hover,.hdr .util a:hover,.hdr nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.hdr .util{display:flex;gap:26px;margin-left:auto;align-items:center}
@media(max-width:980px){.hdr nav{display:none}.hdr .util .hide-sm{display:none}}

/* ── fields (full-bleed colour blocks) ────────────────────────────────── */
.on-forest{background:var(--forest);color:var(--cream)}
.on-forest h1,.on-forest h2,.on-forest h3,.on-forest .label{color:var(--cream)}
.on-ink{background:var(--ink);color:var(--cream)}
.on-ink h2,.on-ink h3,.on-ink .label{color:var(--cream)}
/* Ink on Clay is 7.41:1. Paper Cream on Clay is 1.92:1 and must never appear. */
.on-clay{background:var(--clay);color:var(--ink)}
.on-clay h2,.on-clay h3,.on-clay .label{color:var(--ink)}
.on-bone{background:var(--bone)}
.on-fog{background:var(--fog)}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-block;font-family:var(--sans);font-size:14px;font-weight:500;
  text-transform:lowercase;letter-spacing:0.01em;
  padding:14px 30px;border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;transition:background .18s,color .18s,border-color .18s;
}
/* Clay is the one colour allowed to say "look here". Ink on Clay, 7.41:1. */
.btn-clay{background:var(--clay);color:var(--ink);border-color:var(--clay)}
.btn-clay:hover{background:#CDB490;border-color:#CDB490}
.btn-cream{background:var(--cream);color:var(--forest);border-color:var(--cream)}
.btn-cream:hover{background:var(--bone);border-color:var(--bone)}
.btn-out-cream{background:transparent;color:var(--cream);border-color:rgba(241,235,229,.5)}
.btn-out-cream:hover{border-color:var(--cream)}
.btn-out-ink{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-out-ink:hover{background:var(--ink);color:var(--cream)}

/* ── ratios ───────────────────────────────────────────────────────────── */
.r-45{aspect-ratio:4/5}
.r-34{aspect-ratio:3/4}
.r-43{aspect-ratio:4/3}
.r-169{aspect-ratio:16/9}
/* sources are 2:3 portrait, so every slot crops. cover + a sensible focal point.
   NB: never put a ratio class on a <figure> that wraps another ratio-carrying
   element. Two nested aspect-ratios create a circular width/height dependency
   that collapses it to about 40px. */
figure.r-45,figure.r-34,figure.r-43,figure.r-169{overflow:hidden}
figure.r-45>img,figure.r-34>img,figure.r-43>img,
figure.r-43>img,figure.r-169>img{height:100%;object-fit:cover;object-position:center}

/* ── section heads ────────────────────────────────────────────────────── */
.shead{margin-bottom:32px}
.shead .label{margin-bottom:12px}
.shead-link{
  display:inline-block;margin-top:14px;font-size:14px;
  border-bottom:1px solid currentColor;padding-bottom:2px;
}

/* ── editorial grid ───────────────────────────────────────────────────── */
.grid{display:grid;gap:32px 24px}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1024px){.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.g-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g-4,.g-3,.g-2{grid-template-columns:1fr}}

.card figure{margin-bottom:16px}
.card .label{margin-bottom:8px}
.card h3{margin-bottom:10px}
.card p{font-size:14px;line-height:1.6}
.card .go{display:inline-block;margin-top:12px;font-size:13px;border-bottom:1px solid currentColor;padding-bottom:2px}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{background:var(--forest);color:var(--cream);margin-top:0;padding:60px 0 34px}
.ft{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}
@media(max-width:860px){.ft{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.ft{grid-template-columns:1fr}}
.ft .label{color:var(--cream);opacity:.72;margin-bottom:16px}
.ft a,.ft p{display:block;font-size:14px;line-height:1.95;max-width:none}
.ft a:hover{opacity:.75}
.ft .lockup{width:196px;margin-bottom:18px}
.ft-base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  margin-top:48px;padding-top:22px;border-top:1px solid var(--rule-dk);
  font-size:11px;text-transform:uppercase;letter-spacing:0.16em;opacity:.62;
}
.signoff{width:min(420px,62%);margin:52px auto 0;opacity:.32}

/* ═══════════════════════════════════════════════════════════════════════
   JOURNAL
   ═══════════════════════════════════════════════════════════════════════ */

/* ── listing: featured lead ───────────────────────────────────────────── */
.lead{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
@media(max-width:900px){.lead{grid-template-columns:1fr;gap:28px}}
.lead .label{margin-bottom:14px}
.lead h2{margin-bottom:18px}
.lead p{font-size:17px;line-height:1.65}
.lead .go{display:inline-block;margin-top:22px;font-size:14px;border-bottom:1px solid currentColor;padding-bottom:3px}

/* ── listing: subsequent posts ────────────────────────────────────────── */
.post-meta{
  font-family:var(--sans);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.18em;color:var(--forest);
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
}
.post-meta .dot{opacity:.45}

.empty{
  border-top:1px solid var(--rule);padding-top:28px;margin-top:8px;
}
.empty p{font-size:15px;opacity:.75}

/* ── article ──────────────────────────────────────────────────────────── */
.article-head{padding-top:56px}
.article-head .label{margin-bottom:16px}
.article-head h1{max-width:20ch}
.article-head .dek{
  font-family:var(--serif-text);font-size:clamp(19px,2.1vw,24px);
  line-height:1.45;margin-top:22px;max-width:52ch;color:var(--ink);opacity:.86;
}
.byline{
  margin-top:28px;padding-top:18px;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.18em;
  display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
}
.byline .dot{opacity:.45}

.article-hero{margin-top:44px}
.article-hero figcaption{
  font-family:var(--sans);font-size:13px;line-height:1.55;
  margin-top:12px;opacity:.7;max-width:68ch;
}

/* body */
.article{margin-top:52px}
.article > * + *{margin-top:26px}
.article p{font-size:17px;line-height:1.72;max-width:68ch}
.article h2{
  font-size:clamp(26px,3vw,34px);line-height:1.15;
  margin-top:52px;max-width:26ch;
}
.article h2 + p{margin-top:18px}
.article h3{font-size:21px;line-height:1.2;margin-top:38px}
.article h3 + p{margin-top:14px}
.article strong{font-weight:500}
.article a:not(.btn){border-bottom:1px solid rgba(28,30,28,.35)}
.article a:not(.btn):hover{border-bottom-color:var(--ink)}
.article ul,.article ol{max-width:68ch;padding-left:1.25em}
.article li{font-size:17px;line-height:1.72;margin-top:12px}
.article li::marker{color:var(--moss)}

/* pull quote — Caslon, one per screen at most.
   Needs the .article prefix: bare `.pull` loses to `.article p` on
   specificity and silently renders at body size. */
.article .pull{
  font-family:var(--serif);font-size:clamp(24px,3.2vw,34px);
  line-height:1.2;text-transform:lowercase;
  margin:52px 0;padding-left:24px;border-left:2px solid var(--clay);
  max-width:24ch;
}

/* an inset fact box, Fog fill. structure from space and fills, not from lines. */
.inset{
  background:var(--fog);padding:30px 28px;margin:44px 0;max-width:68ch;
}
.inset .label{margin-bottom:12px}
.inset p{font-size:16px;line-height:1.65;max-width:none}
.inset p + p{margin-top:14px}

/* sources */
.sources{margin-top:64px;padding-top:26px;border-top:1px solid var(--ink)}
.sources .label{margin-bottom:18px}
.sources ol{list-style:none;padding:0;max-width:68ch;counter-reset:src}
/* NB: do NOT make the <li> a grid. Every inline child (<em>, <a>) would become
   its own grid item and stack onto a new row, blowing each citation up to ~4
   rows. Absolute-positioned marker keeps the text flowing as one paragraph. */
.sources li{
  position:relative;
  font-size:14px;line-height:1.6;padding:14px 0 14px 34px;
  border-bottom:1px solid var(--rule-soft);margin:0;
}
.sources li::before{
  counter-increment:src;content:counter(src);
  position:absolute;left:0;top:17px;
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:0.14em;
  color:var(--moss);
}
.sources li:last-child{border-bottom:none}
.sources a{border-bottom:1px solid rgba(28,30,28,.35);word-break:break-word}

/* end-of-article call to action */
.endnote{margin-top:64px;padding:36px 32px;background:var(--bone);border:1px solid var(--rule-soft)}
.endnote .label{margin-bottom:14px}
.endnote h3{margin-bottom:12px;font-size:26px}
.endnote p{font-size:16px;max-width:56ch}
.endnote .btn{margin-top:22px}