/**
 * Purceivo — landing surface
 * ───────────────────────────
 * The page argues by subtraction rather than by description.
 *
 * The hero is the product: a dense field of solicitations that resolves,
 * in front of the reader, into the three worth their afternoon. The
 * rejected ones do not vanish — they stay as ghosts. That is the whole
 * point. You are meant to see the volume you no longer have to read, and
 * the withheld ledger further down makes the same promise explicit.
 */

/* ═══════════════════════════ masthead ═══════════════════════════ */

.mast {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--hair);
}
.mast-inner {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-3) 0;
}
.mast-left { display: flex; align-items: center; gap: var(--s-3) }
.mast-mark { width: 26px; height: 26px; color: var(--oxblood); flex: 0 0 auto }
.mast-word {
  font-family: var(--font-display);
  font-weight: 500; font-variation-settings: "opsz" 24;
  font-size: var(--t-md); letter-spacing: .01em;
}
.mast-right {
  margin-left: auto; display: flex; align-items: center; gap: var(--s-5);
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
}
.mast-right a { color: var(--ink-mute); transition: color var(--d-fast) var(--ease) }
.mast-right a:hover { color: var(--ink) }
.mast-cta {
  color: var(--paper) !important; background: var(--ink);
  padding: var(--s-2) var(--s-4);
  transition: transform var(--d-base) var(--ease), background var(--d-base) var(--ease);
}
.mast-cta:hover { transform: translateY(-1px); background: var(--oxblood) }
.mast-firm {
  color: var(--ink-mute); border-left: 1px solid var(--hair);
  padding-left: var(--s-5); max-width: 24ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#nav-anon, #nav-member { display: flex; gap: var(--s-5); align-items: center }
#nav-anon[hidden], #nav-member[hidden] { display: none }

/* The masthead is translucent, so over the inverted ledger section it would
   otherwise render dark text on a dark ground. It flips with the surface
   beneath it rather than forcing an opaque bar over the whole page. */
.mast {
  transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.mast.inverted {
  background: color-mix(in oklab, var(--void) 88%, transparent);
  border-bottom-color: var(--void-hair);
}
.mast.inverted .mast-word,
.mast.inverted .mast-right a:hover { color: var(--void-ink) }
.mast.inverted .mast-mark { color: var(--brass) }
.mast.inverted .mast-right a { color: var(--void-mute) }
.mast.inverted .mast-firm { color: var(--void-mute); border-left-color: var(--void-hair) }
.mast.inverted .mast-cta { background: var(--void-ink); color: var(--void) !important }
.mast.inverted .mast-cta:hover { background: var(--brass); color: var(--void) !important }

/* ═══════════════════════════ the aperture ═══════════════════════════ */

.aperture { padding: var(--s-8) 0 var(--s-9); position: relative; overflow: hidden }

.kicker {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  padding-bottom: var(--s-4); margin-bottom: var(--s-7);
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-mute);
}
.kicker .vol { color: var(--oxblood) }
.kicker .spacer { margin-left: auto }

.aperture-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: clamp(var(--s-7), 6vw, var(--s-10));
  align-items: start;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 300; font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  font-size: var(--t-5xl); line-height: .92;
  letter-spacing: var(--track-display);
  margin: 0 0 var(--s-5);
}
.wordmark em { font-style: normal; color: var(--brass) }

.hero-lede {
  font-family: var(--font-display);
  font-weight: 300; font-variation-settings: "opsz" 144, "WONK" 1;
  font-size: clamp(52px, 7.4vw, 104px); line-height: .94;
  letter-spacing: var(--track-display);
  margin: 0 0 var(--s-5); max-width: 12ch;
}
.hero-lede em { font-style: italic; color: var(--oxblood); font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1 }

.hero-sub {
  font-size: var(--t-md); color: var(--ink-soft);
  max-width: 44ch; margin: 0 0 var(--s-6); line-height: var(--lh-body);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6) }

.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--ink); color: var(--paper);
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  transition: transform var(--d-base) var(--ease), background var(--d-base) var(--ease);
}
.btn:hover { transform: translateY(-1px); background: var(--oxblood) }
.btn .arr { transition: transform var(--d-base) var(--ease) }
.btn:hover .arr { transform: translateX(4px) }
.btn.ghost { background: none; color: var(--ink); border: 1px solid var(--hair) }
.btn.ghost:hover { background: none; border-color: var(--ink) }
.btn.light { background: var(--void-ink); color: var(--void) }
.btn.light:hover { background: #fff }

/* the specification table under the hero copy */
.spec { border-top: 1px solid var(--hair); }
.spec .row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-5); padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--hair-2);
}
.spec .row:last-child { border-bottom: 0 }
.spec dt, .spec .k {
  flex: 0 0 auto; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-mute); margin: 0;
}
.spec dd, .spec .v {
  flex: 1 1 auto; text-align: right; margin: 0;
  font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-soft);
}

/* ── the filtering field ── */

.field {
  position: relative; min-width: 0;
  border: 1px solid var(--hair);
  background: var(--card);
  padding: var(--s-5) var(--s-5) var(--s-4);
  min-height: 540px;
  display: flex; flex-direction: column;
}
.field-head {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding-bottom: var(--s-3); margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--hair-2);
}
.field-head .label { margin: 0 }
.field-count {
  margin-left: auto;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-lg); color: var(--oxblood);
  letter-spacing: -.02em;
}
.field-count .of { color: var(--ink-mute); font-size: var(--t-xs) }

.field-lines { flex: 1; display: flex; flex-direction: column; gap: 3px; overflow: hidden }

.ln {
  display: flex; align-items: center; gap: var(--s-2); min-width: 0;
  font-family: var(--font-mono); font-size: var(--t-2xs);
  line-height: 1.5; white-space: nowrap; overflow: hidden;
  color: var(--ink-soft);
  padding: 2px 0;
  /* Only opacity and transform animate — both composited, so a field of a
     hundred-odd rows resolves without touching layout. */
  transition: opacity var(--d-cinema) var(--ease-out),
              transform var(--d-cinema) var(--ease-out),
              color var(--d-cinema) var(--ease-out);
}
.ln .tick { color: var(--hair); flex: 0 0 auto }
.ln .agency { color: var(--ink); flex: 0 0 auto }
.ln .scope { color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.ln .amt { margin-left: auto; color: var(--brass); flex: 0 0 auto }

/* The resolved state: rejected rows persist as ghosts. Seeing the volume
   that was set aside is the argument; deleting it would throw the argument
   away. */
.field.resolved .ln { opacity: .11; transform: translateX(-3px) }
.field.resolved .ln.keep {
  opacity: 1; transform: none;
  color: var(--ink);
}
.field.resolved .ln.keep .tick { color: var(--oxblood) }
.field.resolved .ln.keep .scope { color: var(--ink-soft) }

.ln-why {
  max-height: 0; opacity: 0; overflow: hidden;
  font-family: var(--font-body); font-size: var(--t-sm);
  color: var(--ink-soft); line-height: 1.45;
  padding-left: var(--s-5); border-left: 2px solid var(--oxblood);
  margin-left: var(--s-2);
  transition: max-height var(--d-slow) var(--ease-out) .5s,
              opacity var(--d-slow) var(--ease-out) .5s,
              margin var(--d-slow) var(--ease-out) .5s;
}
.field.resolved .ln-why { max-height: 60px; opacity: 1; margin-block: var(--s-2) var(--s-3) }

.field-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3); padding-top: var(--s-3); margin-top: var(--s-3);
  border-top: 1px solid var(--hair-2);
  font-family: var(--font-mono); font-size: var(--t-2xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
}
.field-replay {
  color: var(--ink-mute); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--hair);
}
.field-replay:hover { color: var(--oxblood) }

/* ═══════════════════════════ section furniture ═══════════════════════════ */

.sec { padding: var(--s-9) 0 }
.sec-head { margin-bottom: var(--s-7); max-width: var(--measure) }
.sec-head .eyebrow {
  display: block; margin-bottom: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--oxblood);
}
.sec-head h2 {
  font-family: var(--font-display); font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: var(--t-3xl); line-height: var(--lh-tight);
  letter-spacing: var(--track-display); margin: 0 0 var(--s-4);
}
.sec-head h2 em { font-style: italic; color: var(--oxblood) }
.sec-head p { font-size: var(--t-md); color: var(--ink-soft); margin: 0; max-width: 56ch }

/* ═══════════════════════════ withheld ledger (inverted) ═══════════════════════════ */

.ledger {
  background: var(--void); color: var(--void-ink);
  padding: var(--s-9) 0;
  /* A dark spread in the middle of a light publication: the tonal reset
     that makes the claim land, without leaving the type system. */
}
.ledger .sec-head h2 { color: var(--void-ink) }
.ledger .sec-head h2 em { color: var(--brass) }
.ledger .sec-head .eyebrow { color: var(--brass) }
.ledger .sec-head p { color: var(--void-mute) }

.withheld-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: var(--s-6);
}
.wcard {
  border: 1px solid var(--void-hair); background: var(--void-2);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color var(--d-base) var(--ease);
}
.wcard:hover { border-color: var(--brass) }
.wcard .wtag {
  font-family: var(--font-mono); font-size: var(--t-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--void-mute);
}
.wcard h3 {
  font-family: var(--font-display); font-weight: 400;
  font-variation-settings: "opsz" 32;
  font-size: var(--t-lg); line-height: var(--lh-snug);
  margin: 0; color: var(--void-ink);
}
.wcard .wwhy {
  border-left: 2px solid var(--oxblood); padding-left: var(--s-4);
  font-size: var(--t-sm); color: var(--void-mute); line-height: 1.5;
}
.wcard .wmeta {
  margin-top: auto; padding-top: var(--s-3);
  border-top: 1px solid var(--void-hair);
  font-family: var(--font-mono); font-size: var(--t-2xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--void-mute);
}
.ledger-note {
  border-top: 1px solid var(--void-hair); padding-top: var(--s-5);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-5);
  font-size: var(--t-sm); color: var(--void-mute); line-height: 1.55;
}
.ledger-note b { color: var(--void-ink); font-weight: 600 }

/* ═══════════════════════════ the method ═══════════════════════════ */

.passes { display: grid; gap: 0; border-top: 1px solid var(--hair) }
.pass {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--s-5);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--hair-2);
  align-items: start;
}
.pass:last-child { border-bottom: 1px solid var(--hair) }
.pass .pnum {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--oxblood); padding-top: 5px;
}
.pass h3 {
  font-family: var(--font-display); font-weight: 400;
  font-variation-settings: "opsz" 40;
  font-size: var(--t-xl); line-height: var(--lh-snug);
  margin: 0; letter-spacing: -.014em;
}
.pass p { margin: 0; color: var(--ink-soft); font-size: var(--t-base); line-height: var(--lh-body) }
.pass .pfig {
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px dashed var(--hair-2);
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute);
}
.pass .pfig b { color: var(--brass); font-size: var(--t-sm) }

/* ═══════════════════════════ commitments ═══════════════════════════ */

.commits { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 }
.commit {
  padding: var(--s-6) var(--s-5) var(--s-6) 0;
  border-top: 2px solid var(--ink);
  margin-right: var(--s-5);
}
.commit .cno {
  font-family: var(--font-mono); font-size: var(--t-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-mute); display: block; margin-bottom: var(--s-3);
}
.commit h3 {
  font-family: var(--font-display); font-weight: 400;
  font-variation-settings: "opsz" 32;
  font-size: var(--t-lg); line-height: var(--lh-snug);
  margin: 0 0 var(--s-3); letter-spacing: -.01em;
}
.commit p { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.6 }

/* ═══════════════════════════ figures ═══════════════════════════ */

.figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-6);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding: var(--s-7) 0;
}
.figure .fn {
  font-family: var(--font-display); font-weight: 300;
  font-variation-settings: "opsz" 72;
  font-size: var(--t-3xl); line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.figure .fn small { font-size: .42em; color: var(--ink-mute); margin-left: 2px }
.figure .fl {
  margin-top: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink);
}
.figure .fs { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-mute); line-height: 1.5 }

/* ═══════════════════════════ closing ═══════════════════════════ */

.closing { padding: var(--s-9) 0; border-top: 1px solid var(--hair) }
.closing-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-7); align-items: end }
.closing h2 {
  font-family: var(--font-display); font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: var(--t-3xl); line-height: var(--lh-tight);
  letter-spacing: var(--track-display); margin: 0; max-width: 18ch;
}
.closing h2 em { font-style: italic; color: var(--oxblood) }
.closing .cnote { margin: var(--s-4) 0 0; color: var(--ink-mute); font-size: var(--t-sm); max-width: 46ch }

/* ═══════════════════════════ footer ═══════════════════════════ */

.foot { border-top: 1px solid var(--hair); padding: var(--s-7) 0 var(--s-6) }
.foot-grid {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s-6); margin-bottom: var(--s-7);
}
.foot-word {
  font-family: var(--font-display); font-weight: 300;
  font-variation-settings: "opsz" 72;
  font-size: var(--t-2xl); margin: 0; letter-spacing: -.02em;
}
.foot-word em { font-style: normal; color: var(--brass) }
.foot-col h4 {
  font-family: var(--font-mono); font-size: var(--t-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-mute); margin: 0 0 var(--s-3); font-weight: 400;
}
.foot-col a {
  display: block; padding: var(--s-1) 0; font-size: var(--t-sm); color: var(--ink-soft);
  transition: color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.foot-col a:hover { color: var(--oxblood); transform: translateX(3px) }
.colophon {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  padding-top: var(--s-5); border-top: 1px solid var(--hair-2);
  font-family: var(--font-mono); font-size: var(--t-2xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
}

/* ═══════════════════════════ reveal ═══════════════════════════ */

/* Sections rise a few pixels as they enter. Guarded on .js so that with
   scripting off the content is simply present rather than invisible. */
.js [data-reveal] { opacity: 0; transform: translateY(14px) }
.js [data-reveal].shown {
  opacity: 1; transform: none;
  transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out);
}

/* ═══════════════════════════ responsive ═══════════════════════════ */

@media (max-width: 1080px) {
  .aperture-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7) }
  .field { min-height: 460px }
  .pass { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
  .pass p:last-of-type, .pass .pdetail { grid-column: 2 }
  .closing-inner { grid-template-columns: minmax(0, 1fr); align-items: start }
  .foot-grid { grid-template-columns: 1fr 1fr }
}
@media (max-width: 720px) {
  .mast-inner { gap: var(--s-3) }
  .mast-cta { padding: var(--s-2) var(--s-3); white-space: nowrap }
  .mast-right a { white-space: nowrap }
  .kicker .spacer { margin-left: 0; width: 100% }
  .mast-right { gap: var(--s-4) }
  .mast-right .nav-scroll { display: none }
  .pass { grid-template-columns: minmax(0, 1fr); gap: var(--s-3) }
  .commit { border-top-width: 1px; margin-right: 0; padding-right: 0 }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5) }
  .sec { padding: var(--s-8) 0 }
}