/* ═══════════════════════════════════════════════════════════════════════════
   EDITORIAL SCALE — the pass that separates a template from a magazine
   ───────────────────────────────────────────────────────────────────────────
   The site read as dashboard UI, and the causes were structural rather than
   decorative:

     1. every group of content sat in a bordered, filled box
     2. headings ran ~40px against 16px body — not enough contrast to feel
        composed, just enough to look like documentation
     3. nothing ever broke the container, so the page had no edge-to-edge moment
     4. six cards, a stat row and a logo row on one screen

   The fix is scale and subtraction. Boxes go. Display type roughly doubles.
   Media runs full-bleed. Whitespace roughly doubles. The gold drops to a
   hairline, because a thick gold rule is a badge and a hairline is a detail.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --leaf-1: #F4DF86;
  --leaf-2: #BF984B;
  --leaf: linear-gradient(96deg, var(--leaf-1) 0%, var(--leaf-2) 100%);
  --paper: #FFFFFF; --paper-2: #F4F6F7; --paper-ink: #0B0D11;
  --paper-ink2: #444C58; --paper-line: #E8EBEE;

  /* Editorial scale: the display end roughly doubles, the label end shrinks.
     The RATIO between them is what reads as designed. */
  --t-display: clamp(46px, 9.5vw, 168px);
  --t-huge:    clamp(34px, 6.4vw, 104px);
  --t-big:     clamp(27px, 3.9vw, 62px);
  --t-label:   clamp(9.5px, .72vw, 11.5px);

  --air: clamp(72px, 13vw, 220px);   /* section rhythm, roughly doubled */
}

/* ── grounds ───────────────────────────────────────────────────────────── */
.band { position: relative; isolation: isolate; padding-block: var(--air); }
.band + .band { border-top: 1px solid var(--line); }
.band--paper {
  --bg: var(--paper); --bg-raised: var(--paper); --bg-sunk: var(--paper-2);
  --ink: var(--paper-ink); --ink-2: var(--paper-ink2); --ink-3: #6B7482; --ink-4: #9AA2AE;
  --line: var(--paper-line); --line-2: #DDE1E6; --line-strong: #B4BCC5;
  --gold-ink: #8A6608;
  background: var(--paper); color: var(--ink);
}
.band--leaf {
  --ink: #16120A; --ink-2: #3A3018; --ink-3: #574722; --ink-4: #6E5C2E;
  --line: rgba(22,18,10,.18); --line-2: rgba(22,18,10,.28); --line-strong: rgba(22,18,10,.42);
  --gold-ink: #16120A;
  background: var(--leaf); color: var(--ink);
}

/* ── labels shrink, headings grow ──────────────────────────────────────── */
.eyebrow {
  font-size: var(--t-label); letter-spacing: .3em; color: var(--ink-4);
  gap: var(--s-4);
}
.eyebrow::before { width: 18px; height: 1px; background: var(--gold); }

.band__title {
  font-size: var(--t-huge);
  font-weight: 800; letter-spacing: -.042em; line-height: .94;
  max-width: 16ch; text-wrap: balance;
}
.band__title em { font-style: normal; color: var(--gold-ink); }
.band__head { gap: var(--s-5); margin-bottom: clamp(var(--s-7), 6vw, 110px); }
.band__lede { font-size: clamp(17px, 1.5vw, 22px); color: var(--ink-3); max-width: 46ch; }

/* ── NO BOXES ──────────────────────────────────────────────────────────────
   The single biggest tell. A card is an image with a caption under it, not a
   panel with a border and a fill. */
.card-x__link {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  display: grid; gap: var(--s-4); height: 100%;
  transition: transform 700ms var(--ease-out);
}
.card-x__link::before { content: none; }
.card-x__link:hover { transform: none; box-shadow: none; }
.card-x__shot { border-radius: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.card-x__shot img { filter: saturate(.94); transition: transform 1.2s var(--ease-out), filter .6s var(--ease-io); }
.card-x__link:hover .card-x__shot img { transform: scale(1.05); filter: saturate(1.06); }
.card-x__body { padding: 0; gap: var(--s-2); }
.card-x__cat {
  font-size: var(--t-label); letter-spacing: .26em; color: var(--ink-4);
}
.card-x__title {
  font-size: clamp(21px, 2.1vw, 33px); font-weight: 700; letter-spacing: -.028em;
  line-height: 1.04; color: var(--ink);
  transition: color var(--dur-2) var(--ease-io);
}
.card-x__link:hover .card-x__title { color: var(--gold-ink); }
.card-x__note { font-size: 15px; color: var(--ink-3); max-width: 42ch; }

/* Two-up, not three. Fewer and larger. */
.cards { grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 72px) clamp(24px, 3vw, 56px); }
.card-x { grid-column: auto !important; }
.card-x:nth-child(1) .card-x__shot { aspect-ratio: 4 / 3; }
@media (max-width: 720px) { .cards { grid-template-columns: 1fr; } }

/* ── full bleed ────────────────────────────────────────────────────────────
   The about band's image breaks the container entirely. One edge-to-edge
   moment per page is what stops a layout feeling boxed in. */
.about-band {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s-6), 5vw, 96px); align-items: center;
}
.about-band__figure { border: 0; border-radius: 0; overflow: hidden; }
.about-band__figure img { aspect-ratio: 4 / 5; }
.about-band__copy { max-width: 42ch; }
.about-band__copy p { font-size: 17px; line-height: 1.75; }

/* ── stats: no grid lines, just scale ──────────────────────────────────── */
.hl__stats { background: none; border: 0; gap: clamp(24px, 4vw, 80px); }
.hl__cell { background: none; padding: 0; }
.hl__cell::after { content: none; }
.hl__n {
  font-size: var(--t-big); font-weight: 800; letter-spacing: -.05em; color: var(--ink);
  background: none; -webkit-text-fill-color: currentColor;
}
.hl__n span { color: var(--gold-ink); -webkit-text-fill-color: currentColor; font-size: .34em; }
.hl__l { font-size: var(--t-label); letter-spacing: .22em; color: var(--ink-4); }
.hl { gap: clamp(var(--s-7), 6vw, 110px); }
.hl__names { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-3); max-width: 62ch; }
.hl__names b { color: var(--ink); font-weight: 500; }

/* ── journal rows: bigger, quieter ─────────────────────────────────────── */
.posts > li { border-top: 1px solid var(--line); }
.posts a { padding-block: clamp(24px, 3vw, 52px); grid-template-columns: 9rem minmax(0,1fr) auto; }
.posts a:hover { background: none; }
.posts__title { font-size: clamp(22px, 2.4vw, 38px); font-weight: 700; letter-spacing: -.03em; }
.posts__date { font-size: var(--t-label); letter-spacing: .22em; color: var(--ink-4); }
.posts__desc { font-size: 15px; color: var(--ink-3); max-width: 52ch; }
.posts__go { font-size: var(--t-label); letter-spacing: .2em; }

/* ── press bar: hairline, not a slab ───────────────────────────────────── */
.pressbar { background: none; border-bottom: 1px solid var(--line); }
.pressbar span, .pressbar img { color: var(--ink-4); opacity: 1; filter: none; }
.pressbar img { filter: grayscale(1) brightness(2.4); opacity: .5; }
.pressbar__in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  padding-block: var(--s-5); gap: clamp(20px, 3.4vw, 56px);
}
.pressbar__label { font-size: var(--t-label); letter-spacing: .3em; }

/* ── buttons: rules, not pills ─────────────────────────────────────────── */
.btn {
  background: none; border: 0; border-bottom: 1px solid currentColor;
  border-radius: 0; padding: 0 0 6px; color: var(--ink);
  font-size: var(--t-label); letter-spacing: .24em;
  background-image: none !important;
  box-shadow: none !important;
}
.btn:hover { color: var(--gold-ink); background: none; }
.btn--ghost { border-bottom-color: currentColor; }

/* ── paths / hero ──────────────────────────────────────────────────────── */
.path { background: none; border-bottom: 1px solid var(--line); border-radius: 0;
        color: var(--ink); font-size: var(--t-label); letter-spacing: .22em; padding: var(--s-5) 0; }
.path:hover { transform: none; box-shadow: none; color: var(--gold-ink); }
.paths { gap: 0 clamp(28px, 4vw, 72px); }

.hero__mark { font-size: var(--t-display); letter-spacing: -.05em; }
.hero__line { font-size: clamp(17px, 1.7vw, 26px); font-weight: 400; }
.hero__sub { font-size: 15px; max-width: 44ch; }
.hero__tally { font-size: var(--t-label); letter-spacing: .3em; }
.hero::after { content: none; }