/* =====================================================================
   GOLDRUSH —styles.css
   ROLE: the entire design system. A printed broadsheet that happens to be
   a web page: cream paper, ink, one gold accent, hairline rules instead of
   cards, big italic rank numerals, and Fraunces doing the talking.
   Owner: designer. Contract: PROJECT.md §2 (palette, type, texture, motion).
   No component library, no utilities framework —every rule below is
   deliberate. Breakpoints: 900 / 700 / 560. Motion is transform/opacity only.
   ===================================================================== */

/* ?€?€ 1. tokens ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
:root {
  /* print edition */
  --paper: #f2ecdf;
  --paper-2: #e8dfcc;
  --paper-3: #ded2ba;
  --ink: #14110c;
  --ink-2: #3a3428;
  --muted: #61594d;
  --line: rgba(20, 17, 12, .14);
  --line-strong: rgba(20, 17, 12, .3);
  --gold: #a87b2e;
  --gold-text: #7a5a1c; /* AA-contrast gold for text under 18px (see docs/AUDIT.md F-01) */
  --gold-2: #e0b457;
  --oxblood: #7b2d26;
  --moss: #2f4632;

  /* footer / inverse surfaces */
  --foot-bg: #14110c;
  --foot-fg: #f2ecdf;

  /* type */
  --f-display: 'Fraunces', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --f-sans: 'Outfit', system-ui, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --t-hero: clamp(2.55rem, 6.6vw, 5.1rem);
  --t-h2: clamp(1.85rem, 3.7vw, 2.95rem);
  --t-h3: clamp(1.2rem, 1.9vw, 1.5rem);
  --t-row: clamp(1.08rem, 1.72vw, 1.42rem);
  --t-body: clamp(.94rem, .35vw + .86rem, 1.02rem);
  --t-meta: 10px;

  /* spacing + chrome */
  --pad: clamp(1.05rem, 4vw, 2.75rem);
  --wrap: 1240px;
  --nav-h: 64px;
  --s1: clamp(.5rem, 1vw, .75rem);
  --s2: clamp(.85rem, 1.6vw, 1.15rem);
  --s3: clamp(1.15rem, 2.2vw, 1.6rem);
  --s4: clamp(1.6rem, 3.2vw, 2.4rem);
  --s5: clamp(2.1rem, 4.4vw, 3.4rem);
  --s6: clamp(2.8rem, 6vw, 5rem);

  /* motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --fast: .18s var(--ease);
  --med: .32s var(--ease);
  --slow: .68s var(--ease);
  color-scheme: light;
}

[data-theme="night"] {
  --paper: #12100d;
  --paper-2: #1b1813;
  --paper-3: #24201a;
  --ink: #f3ede0;
  --ink-2: #d8d0be;
  --muted: #9a9282;
  --line: rgba(243, 237, 224, .16);
  --line-strong: rgba(243, 237, 224, .34);
  --gold: #d9ae5f;
  --gold-text: #d9ae5f;
  --gold-2: #e6c377;
  --oxblood: #c4645a;
  --moss: #8fb394;
  --foot-bg: #0b0a08;
  --foot-fg: #f3ede0;
  color-scheme: dark;
}

/* ?€?€ 2. reset + base ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--line-strong) transparent;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  font-weight: 350;
  line-height: 1.58;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

h1, h2, h3, h4, p, dl, dd, dt, figure, blockquote, pre { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
strong { font-weight: 600; }
::selection { background: var(--gold-2); color: #14110c; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: .5rem; left: .5rem;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .7rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--fast);
}
.skip:focus-visible { transform: translateY(0); }

.wrap {
  width: min(100% - (var(--pad) * 2), var(--wrap));
  margin-inline: auto;
}

/* paper grain —one fixed plate over the whole page */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23g)'/></svg>");
  background-size: 220px 220px;
}
[data-theme="night"] .grain { opacity: .055; mix-blend-mode: screen; }

/* ?€?€ 3. primitives ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.kicker {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-text);
  line-height: 1.4;
}
.kicker::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--gold);
  flex: none;
}

.section__head { max-width: 74ch; margin-bottom: var(--s4); }
.section__title {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.032em;
  margin-top: .8rem;
  text-wrap: balance;
}
.section__lede {
  margin-top: 1rem;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 1.02em;
  line-height: 1.6;
}
/* a pointer, not a second paragraph: it sits under the lede in the small
   sans voice and says where the paid depth actually is */
.section__note {
  margin-top: .85rem;
  max-width: 62ch;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--muted);
}
.section__note a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}
.section__note a:hover,
.section__note a:focus-visible { border-bottom-color: var(--ink); }

/* the reject rate, in the page's own meta voice */
.section__funnel {
  margin-top: 1.15rem;
  font-family: var(--f-mono);
  font-size: 10px;
  line-height: 1.85;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 62ch;
}
.section__funnel[hidden] { display: none; }
.section__funnel b {
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.section__funnel .funnel__drop::before { content: "—"; color: var(--line-strong); }
.section__funnel .funnel__drop { display: block; opacity: .9; }

.block__label {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: .55rem;
  flex-wrap: wrap;
}
.block__hint {
  font-family: var(--f-sans);
  font-size: .74rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-style: italic;
}
.block__h {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-top: .55rem;
}
.block__sub {
  margin-top: .6rem;
  color: var(--ink-2);
  font-size: .92rem;
  line-height: 1.55;
  max-width: 48ch;
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 46px;
  padding: .72rem 1.15rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
  transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: #14110c; }
.btn:active { transform: scale(.985); }
.btn__arrow { font-size: 12px; line-height: 1; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--sm { min-height: 44px; padding: .5rem .85rem; font-size: 9.5px; }

.linkbtn {
  border: 0;
  background: none;
  padding: .55rem 0;
  min-height: 44px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
  transition: color var(--fast), text-decoration-color var(--fast);
}
.linkbtn:hover { color: var(--gold-text); text-decoration-color: var(--gold); }

/* ?€?€ 4. masthead dateline ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.topline {
  background: #14110c;
  color: #f2ecdf;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.topline__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 30px;
  padding-block: .35rem;
}
.topline__left { display: flex; align-items: center; gap: .55rem; color: #f2ecdf; }
.topline__dot {
  width: 5px; height: 5px;
  background: #e0b457;
  box-shadow: 0 0 0 3px rgba(224, 180, 87, .18);
  flex: none;
}
.topline__right { color: rgba(242, 236, 223, .66); white-space: nowrap; }
.topline__sep { margin-inline: .5rem; opacity: .38; }

/* ?€?€ 5. nav ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.nav {
  position: sticky;
  top: 0;
  z-index: 70;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
@supports (backdrop-filter: blur(6px)) {
  .nav { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px) saturate(120%); }
}
.nav__in {
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 2.4vw, 2.2rem);
  min-height: var(--nav-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  flex: none;
  padding-block: .4rem;
  min-height: 44px;
}
.brand__mark { color: var(--gold-text); flex: none; }
.brand__word {
  display: block;
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
}
.brand__sub {
  display: block;
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.8vw, 1.5rem);
  margin-left: auto;
}
.nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: .1rem;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--fast);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .55rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--med);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after,
.nav__links a:focus-visible::after { transform: scaleX(1); }

.nav__tools { display: flex; align-items: center; gap: .5rem; margin-left: .4rem; }

.edition {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0 .65rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--fast), color var(--fast);
}
.edition:hover { border-color: var(--gold); color: var(--ink); }
.edition__orb {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%);
  flex: none;
  transform: rotate(0deg);
  transition: transform .5s var(--ease);
}
.edition[aria-pressed="true"] .edition__orb { transform: rotate(180deg); }

.burger {
  display: none;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0 .55rem;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}
.burger__bars { display: grid; gap: 4px; width: 16px; }
.burger__bars i { display: block; height: 1.5px; background: var(--ink); transition: transform var(--fast); }
.burger__label {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.burger[aria-expanded="true"] .burger__bars i:first-child { transform: translateY(2.75px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars i:last-child { transform: translateY(-2.75px) rotate(-45deg); }

.nav__sheet { border-bottom: 1px solid var(--line); background: var(--paper-2); }
.nav__sheet[hidden] { display: none; }
.nav__sheet-nav { display: flex; flex-direction: column; padding-block: .25rem 1rem; }
.nav__sheet-nav a,
.nav__sheet-nav .linkbtn {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .35rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-display);
  font-size: 1.12rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.01em;
  text-align: left;
}
.nav__sheet-nav .linkbtn {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: .35rem;
  text-decoration: none;
}

.notice { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.notice[hidden] { display: none; }
.notice__in {
  position: relative;
  padding-block: 1.1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
  display: grid;
  gap: .4rem;
  max-width: 78ch;
}
.notice__kicker {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.notice__body { color: var(--ink-2); font-size: .92rem; line-height: 1.6; }
.notice__close {
  position: absolute;
  top: .4rem; right: 0;
  width: 44px; height: 44px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.notice__close:hover { color: var(--ink); }

/* ?€?€ 6. ticker ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.ticker {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.ticker__flag {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ticker__pulse {
  width: 5px; height: 5px;
  background: var(--gold-2);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.ticker__viewport { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; }
.ticker__track {
  display: flex;
  width: max-content;
  animation: tickerScroll 92s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }
@keyframes tickerScroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .48rem 1.05rem .48rem .85rem;
  border: 0;
  border-right: 1px solid var(--line);
  background: none;
  cursor: pointer;
  white-space: nowrap;
  color: var(--ink-2);
  font-family: var(--f-sans);
  font-size: .84rem;
  text-align: left;
  transition: color var(--fast), background var(--fast);
}
.ticker__item:hover { color: var(--ink); background: var(--paper-3); }
.ticker__tri {
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-bottom: 5.5px solid var(--gold);
  flex: none;
}
.ticker__rank {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--gold-text);
}
.ticker__money {
  padding-left: .5rem;
  border-left: 1px solid var(--line-strong);
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .05em;
  color: var(--moss);
}

/* ?€?€ 7. hero ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.hero { padding-block: clamp(2.2rem, 6vw, 4.6rem) clamp(2rem, 4.5vw, 3.6rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(1.8rem, 5.5vw, 4.5rem);
  align-items: start;
}
.hero__title {
  font-family: var(--f-display);
  font-size: var(--t-hero);
  font-weight: 500;
  line-height: .93;
  letter-spacing: -.038em;
  margin-top: .9rem;
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-text);
  letter-spacing: -.028em;
}
.hero__lede {
  margin-top: 1.35rem;
  max-width: 54ch;
  color: var(--ink-2);
  font-size: 1.03em;
  line-height: 1.65;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin-top: 1.7rem;
}
.hero__fineprint {
  margin-top: 1.1rem;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.8;
}

.ledger {
  position: relative;
  border-top: 2px solid var(--ink);
  padding-top: .9rem;
}
.ledger__cap {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .8rem;
}
.ledger__stats { border-top: 1px solid var(--line); }
.stat {
  display: flex;
  flex-direction: column-reverse;
  gap: .2rem;
  padding: .82rem 0;
  border-bottom: 1px solid var(--line);
}
.stat dt {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat__v {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 2.9vw, 2.35rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.stat__v--date {
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  font-style: normal;
  letter-spacing: -.01em;
}
.ledger__foot {
  margin-top: .9rem;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.stamp {
  position: absolute;
  right: 0;
  bottom: -1.1rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .4rem .6rem;
  border: 1.5px solid var(--gold);
  color: var(--gold-text);
  font-family: var(--f-mono);
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: rotate(-3.5deg);
  opacity: .8;
  pointer-events: none;
}

/* ?€?€ 8. bands + section heads ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.band { padding-block: clamp(2.6rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.band--ink { background: var(--paper-2); }
.band--ink .section__head { max-width: 78ch; }
/* ═══ 9. bands, states, the filter bar ═════════════════════════════════════ */

.band--feed { background: var(--paper-2); }
.band[hidden], .band--feed[hidden] { display: none; }

/* the honest empty box: used by the index, the feed and the letter */
.state {
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  background: var(--paper);
  padding: var(--s3);
  max-width: 76ch;
}
.state[hidden] { display: none; }
.state__kicker {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: .5rem;
}
.state__title {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-bottom: .45rem;
}
.state__body {
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: 1.62;
  max-width: 64ch;
}
.state__body + .state__body { margin-top: .7rem; }
.state__body code {
  font-family: var(--f-mono);
  font-size: .86em;
  background: var(--paper-3);
  padding: .1em .35em;
  overflow-wrap: anywhere;
}
.state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s3);
  align-items: center;
}

/* filter bar ------------------------------------------------------------- */
.toolbar {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s2);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.toolbar[hidden] { display: none; }
.toolbar__row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: end; }
.toolbar__row--top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.toolbar__row--foot {
  justify-content: space-between;
  padding-top: .1rem;
  border-top: 1px solid var(--line);
  margin-top: .1rem;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  padding: 0 .7rem;
  min-height: 44px;
}
.search:focus-within { border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }
.search__icon { color: var(--muted); flex: none; }
.search input {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--f-sans);
  font-size: .95rem;
  color: var(--ink);
  width: 100%;
  min-width: 0;
  padding: .6rem 0;
  outline: none;
}
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search__key {
  flex: none;
  font-family: var(--f-mono);
  font-size: 10px;
  line-height: 1;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: .28rem .38rem;
}
@media (hover: none) { .search__key { display: none; } }

.field { display: grid; gap: .3rem; }
.field__label {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.field select {
  appearance: none;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: .92rem;
  padding: .5rem 2rem .5rem .7rem;
  border-radius: 0;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field select:focus-visible { border-color: var(--ink); }

.chips {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: .1rem .15rem;
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 34px;
  padding: .3rem .6rem;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip__n { opacity: .62; font-variant-numeric: tabular-nums; }

.resultcount {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.resultcount b { color: var(--ink); font-weight: 500; }

/* tables ------------------------------------------------------------------ */
.tablewrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; background: transparent; }
.table caption { caption-side: top; }
.table th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .55rem .7rem .55rem 0;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
  vertical-align: bottom;
}
.table td {
  padding: .72rem .7rem .72rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
  font-size: .95rem;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table .num, .table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table th.num { text-align: right; }
.table td.num { font-family: var(--f-mono); font-size: .88rem; }

/* ═══ 10. the index: a free row is rank, line, meta and a link ═════════════ */
.list { display: block; }
.list--free { border-top: 1px solid var(--line); }
.frow {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  gap: var(--s2);
  padding-block: .95rem;
  border-bottom: 1px solid var(--line);
  align-items: start;
  position: relative;
}
.frow:hover { background: color-mix(in srgb, var(--paper-2) 55%, transparent); }
.frow__rank {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
  padding-top: .18rem;
}
.frow__body { min-width: 0; }
.frow__line {
  font-size: var(--t-row);
  line-height: 1.34;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0;
  max-width: 68ch;
}
.frow__link {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color var(--fast), color var(--fast);
}
.frow__link:hover, .frow__link:focus-visible { border-bottom-color: var(--gold); }
.frow__arrow {
  display: inline-block;
  font-size: .72em;
  color: var(--gold-text);
  transform: translate(2px, -1px);
  opacity: .9;
}
.frow__nolink { color: var(--ink); }
.frow__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .55rem;
  margin-top: .4rem;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.frow__meta > span { white-space: nowrap; }
.frow__meta > span:not(:last-child)::after {
  content: "·";
  margin-left: .55rem;
  color: var(--line-strong);
}
@media (max-width: 639px) {
  .frow { grid-template-columns: 2.1rem minmax(0, 1fr); gap: var(--s1); }
  .frow__rank { font-size: 1.1rem; }
  .frow__line { font-size: 1.02rem; }
  .frow__meta { gap: .2rem .5rem; }
  .frow__meta > span:not(:last-child)::after { content: none; }
}

/* ═══ 11. the ranked feed: the paid row, in full ═══════════════════════════ */
.feed__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s3) var(--s4);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s2);
  margin-bottom: var(--s4);
}
.feed__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: 0;
  min-width: 0;
}
.feed__stat { display: grid; gap: .15rem; min-width: 0; }
.feed__stat dt {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.feed__stat dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.35rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.feed__cta { display: grid; gap: .35rem; justify-items: start; }
.feed__fine {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 34ch;
  line-height: 1.5;
}

.feed { display: grid; gap: 0; border-top: 1px solid var(--line); }
.feed[hidden] { display: none; }

.fitem {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  gap: var(--s2) var(--s3);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.fitem__top {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  min-width: 0;
}
.fitem__rank {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.fitem__main { min-width: 0; grid-column: 2; }
.fitem__line {
  font-size: var(--t-row);
  line-height: 1.32;
  margin: 0;
  max-width: 62ch;
}
.fitem__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .6rem;
  margin-top: .35rem;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.fitem__meta > span:not(:last-child)::after { content: "·"; margin-left: .6rem; color: var(--line-strong); }

.fitem__grade {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}
.fitem__grade b {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.6rem;
  line-height: .9;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* the decomposition: parts as a hairline bar chart, money at the right */
.fitem__grid {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--s3);
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
}
.fitem__parts { display: grid; gap: .3rem; min-width: 0; }
.part {
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr) 2.2rem;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.part__k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part__bar {
  height: 3px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.part__bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  background: var(--gold);
}
.part--neg .part__bar::after { background: var(--oxblood); }
.part__v { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }

.fitem__side { display: grid; gap: .55rem; align-content: start; justify-items: start; min-width: 0; }
.fitem__money {
  font-family: var(--f-mono);
  font-size: 1.02rem;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fitem__period {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.fitem__fact {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-top: .45rem;
  width: 100%;
}
.fitem__fact b {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-text);
  flex: none;
}
.fitem__link {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-block: .55rem .2rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 34px;
  position: relative;
}
.fitem__link::after { content: "↗"; color: var(--gold-text); }
.fitem__link:hover, .fitem__link:focus-visible { color: var(--ink); border-bottom-color: var(--gold); }

/* the glass: what is behind the paywall, drawn as bars, never as fake rows */
.lockbox {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  padding: var(--s3);
  margin-top: var(--s3);
}
.lockbox[hidden] { display: none; }
.lockbox__head { max-width: 62ch; margin-bottom: var(--s2); }
.lockbox__h {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.2;
  margin: .25rem 0 .4rem;
}
.lockbox__sub { color: var(--ink-2); font-size: var(--t-body); line-height: 1.6; }
.lockrows { display: grid; gap: .3rem; margin-block: var(--s3); }
.lockrow {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 5.5rem;
  align-items: center;
  gap: .7rem;
  height: 2.15rem;
  opacity: .55;
}
.lockrow__rank {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--muted);
}
.lockrow__bar {
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--paper-3) 0 14px, transparent 14px 20px);
  border-bottom: 1px solid var(--line);
}
.lockrow__bar--short { width: 62%; }
/* the sample line under the teaser bars: "first 6 of 96 shown here" — a count the
   page keeps, not a decorative promise */
.lockbox__sample {
  margin-top: -.1rem;
  margin-bottom: .2rem;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .01em;
  color: var(--muted);
  line-height: 1.6;
}
.lockbox__sample[hidden] { display: none; }
.lockbox__cta { margin-top: var(--s2); }
.lockbox__fine {
  margin-top: .6rem;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.6;
  max-width: 52ch;
}

/* ═══ 12. the weekly letter ════════════════════════════════════════════════ */
.letter { display: grid; gap: var(--s4); }
.letter[hidden] { display: none; }
.issue {
  border-top: 2px solid var(--ink);
  padding-top: var(--s3);
}
.issue--top { border-top-color: var(--gold); }
.issue__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem var(--s2); }
.issue__count {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.issue__title {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.01em;
  margin: .3rem 0 .45rem;
  max-width: 40ch;
}
.issue__intro {
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: 1.62;
  max-width: 66ch;
  margin-bottom: var(--s2);
}
.issue__summary {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: .5rem;
  border-top: 1px solid var(--line);
  margin-top: var(--s2);
}
.picks { display: grid; gap: var(--s3); counter-reset: pick; }
.pick {
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.pick__count {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: .35rem;
}
.pick__main { min-width: 0; }
.pick__title {
  font-family: var(--f-display);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: .3rem;
}
.pick__link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
/* the arrow is the CSS one only — the markup already carries the same glyph
   for a no-CSS reader, so hide the duplicate rather than print two */
.pick__link .frow__arrow { display: none; }
.pick__link::after { content: "↗"; color: var(--gold-text); font-size: .72em; margin-left: .35rem; }
.pick__link:hover, .pick__link:focus-visible { border-bottom-color: var(--gold); }
.pick__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .55rem;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .6rem;
}
.pick__meta > span:not(:last-child)::after { content: "·"; margin-left: .55rem; color: var(--line-strong); }
.pick__body { display: grid; gap: .5rem; max-width: 68ch; }
.pick__p { font-size: .96rem; line-height: 1.6; color: var(--ink-2); }
.pick__p b {
  display: block;
  font-family: var(--f-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .18rem;
}
.pick__p--fail b { color: var(--oxblood); }
.pick__gap {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oxblood);
  border-left: 2px solid var(--oxblood);
  padding-left: .5rem;
}
.pick__foot { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .5rem var(--s2); align-items: center; }
.pick__jump {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.pick__jump:hover, .pick__jump:focus-visible { color: var(--ink); border-bottom-color: var(--gold); }

/* ═══ 13. method: sources, cadence, score, the portfolio, the ledger ═══════ */
.method__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s4);
  margin-bottom: var(--s5);
}
.method__block { min-width: 0; border-top: 1px solid var(--line); padding-top: var(--s2); }
.method__block--wide { grid-column: 1 / -1; }
.method__h {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: .2rem 0 .5rem;
}
.method__note { color: var(--ink-2); font-size: var(--t-body); line-height: 1.62; max-width: 62ch; }
.method__note + .method__note { margin-top: .55rem; }
.method__big {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.method__body { color: var(--ink-2); font-size: var(--t-body); line-height: 1.62; max-width: 66ch; }
.method__body strong { color: var(--ink); font-weight: 600; }
.method__formula {
  font-family: var(--f-mono);
  font-size: .84rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper-2);
  border-left: 2px solid var(--gold);
  padding: .6rem .8rem;
  margin-block: .5rem .6rem;
  overflow-wrap: anywhere;
}
.method__list { display: grid; gap: .3rem; margin-block: .4rem .6rem; }
.method__list li {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  border-bottom: 1px dotted var(--line-strong);
  padding-bottom: .28rem;
  font-size: .92rem;
  color: var(--ink-2);
}
.method__list li b { font-family: var(--f-mono); font-size: .82rem; color: var(--ink); font-weight: 500; }
.weights { display: flex; flex-wrap: wrap; gap: .35rem; margin-block: .3rem .6rem; }
.weight {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  border: 1px solid var(--line-strong);
  padding: .26rem .5rem;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.weight b { color: var(--gold-text); font-weight: 500; }

/* the portfolio: three products, stacked, one of them paid ---------------- */
.portfolio { border-top: 2px solid var(--ink); padding-top: var(--s3); margin-bottom: var(--s5); }
.portfolio__head { max-width: 74ch; margin-bottom: var(--s3); }
.prods { display: grid; gap: 0; }
.prod {
  display: grid;
  gap: .5rem;
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
  padding-inline: 0 0;
  border-left: 3px solid transparent;
  padding-left: var(--s2);
  transition: border-color var(--fast), background var(--fast);
}
.prod--paid { border-left-color: var(--gold); background: color-mix(in srgb, var(--paper-2) 60%, transparent); }
.prod__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem; }
.prod__n {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--gold-text);
}
.prod__name {
  font-family: var(--f-display);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0;
}
.prod__tag {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  padding: .16rem .4rem;
}
.prod--paid .prod__tag { color: var(--gold-text); border-color: var(--gold); }
.prod__line { font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); max-width: 68ch; }
.prod__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--f-mono);
  font-size: .95rem;
  color: var(--ink);
  letter-spacing: -.01em;
}
.prod__status {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.prod--paid .prod__status { color: var(--gold-text); }
.prod__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--s2) var(--s3); margin: .3rem 0 0; }
.prod__fact { min-width: 0; }
.prod__fact dt {
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .14rem;
}
.prod__fact dd { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }

/* the killed ledger: the revenue that was given up ----------------------- */
.ledger { border-top: 2px solid var(--oxblood); padding-top: var(--s3); margin-bottom: var(--s5); }
.ledger__head { max-width: 74ch; margin-bottom: var(--s3); }
.ledger__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s2);
}
.ledger__figures[hidden] { display: none; }
.ledgerfig { padding: var(--s2) var(--s2) var(--s2) 0; border-right: 1px solid var(--line); min-width: 0; }
.ledgerfig:last-of-type { border-right: 0; }
.ledgerfig__k {
  display: block;
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.ledgerfig__v {
  display: block;
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-block: .15rem .2rem;
}
.ledgerfig__s { display: block; font-size: .78rem; line-height: 1.45; color: var(--muted); max-width: 26ch; }
.ledgerfig__note {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: .6rem;
  margin-top: .2rem;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 88ch;
}
.ledgerfig__parts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: .15rem var(--s2);
  border-top: 1px solid var(--line);
  padding-top: .55rem;
  margin: .2rem 0 .4rem;
}
.ledgerfig__parts li {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--ink-2);
  padding-block: .12rem;
}
.ledgerfig__parts b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.ledgerfig__sum { border-top: 1px solid var(--line-strong); margin-top: .2rem; padding-top: .3rem; }
.ledgerfig__sum span { text-transform: uppercase; letter-spacing: .14em; font-size: 8.5px; color: var(--muted); }

.ledger__list { display: grid; gap: 0; }
.killed {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: var(--s2);
  padding-block: .7rem;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.killed__n {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--muted);
  padding-top: .18rem;
  font-variant-numeric: tabular-nums;
}
.killed__body { min-width: 0; }
.killed__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .6rem;
  font-size: .98rem;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: line-through;
  text-decoration-color: var(--oxblood);
  text-decoration-thickness: 1px;
}
.killed__money {
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: 0;
  color: var(--oxblood);
  text-decoration: none;
}
.killed__why { margin-top: .18rem; font-size: .88rem; line-height: 1.55; color: var(--ink-2); max-width: 72ch; }
.killed__revival {
  margin-top: .2rem;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 72ch;
}
.killed__revival span {
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--moss);
  margin-right: .3rem;
}

/* the cost sheet --------------------------------------------------------- */
.costsection { border-top: 1px solid var(--line); padding-top: var(--s3); }
.costsection[hidden] { display: none; }
.costsection__head { max-width: 70ch; margin-bottom: var(--s3); }
.costgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.costcol { min-width: 0; }
.costcol__k {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: .35rem;
  margin-bottom: .2rem;
}
.costcol__k span { color: var(--muted); letter-spacing: .1em; }
.table--cost td { font-size: .88rem; }
.table--cost td[data-label="Note"] { color: var(--muted); font-size: .82rem; line-height: 1.5; }
.totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  margin-block: var(--s3) var(--s2);
}
.totals[hidden] { display: none; }
.totals__cell { padding: var(--s2) var(--s2) var(--s2) 0; border-right: 1px solid var(--line); min-width: 0; }
.totals__cell:last-child { border-right: 0; }
.totals__k {
  display: block;
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.totals__v {
  display: block;
  font-family: var(--f-display);
  font-size: 1.32rem;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: .18rem;
}
.notes__list { display: grid; gap: .45rem; }
.notes__list li {
  position: relative;
  padding-left: 1rem;
  font-size: .87rem;
  line-height: 1.6;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.notes__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold-text);
}

/* ═══ 14. signup + footer ══════════════════════════════════════════════════ */
.signup { border-top: 2px solid var(--ink); background: var(--paper-2); padding-block: var(--s5); }
.signup__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--s4);
  align-items: start;
}
.signup__title {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: .35rem 0 .7rem;
}
.signup__lede { color: var(--ink-2); font-size: var(--t-body); line-height: 1.62; max-width: 52ch; }
.signup__price {
  margin-top: var(--s2);
  font-family: var(--f-mono);
  font-size: .86rem;
  line-height: 1.6;
  color: var(--gold-text);
  letter-spacing: .01em;
}
.signup__price[hidden] { display: none; }
.signup__form { display: grid; gap: .55rem; }
.signup__form input {
  appearance: none;
  min-height: 48px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 1rem;
  padding: .7rem .8rem;
  border-radius: 0;
}
.signup__form input:focus-visible { border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }
.signup__form .btn { min-height: 48px; justify-content: center; }
.signup__status {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--muted);
  min-height: 1.2em;
}
.signup__status[data-tone="ok"] { color: var(--moss); }
.signup__status[data-tone="bad"] { color: var(--oxblood); }
.signup__fine { font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.6; }
/* the disclosure is prose, not a label: 9px uppercase mono is for the fine
   print, and a sentence about where the address goes has to be readable */
.signup__disclosure {
  font-family: var(--f-sans);
  font-size: .76rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 32rem;
  margin: .15rem 0 .1rem;
}

.foot { background: var(--foot-bg); color: var(--foot-fg); padding-block: var(--s4); }
.foot__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3) var(--s4); align-items: start; }
.foot__word {
  font-family: var(--f-display);
  font-size: 1.6rem;
  letter-spacing: -.02em;
  line-height: 1;
}
.foot__tag { font-family: var(--f-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(242, 236, 223, .6); margin-top: .4rem; }
.foot__nav { display: flex; flex-wrap: wrap; gap: .3rem var(--s2); justify-content: flex-end; }
.foot__nav a {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242, 236, 223, .72);
  text-decoration: none;
  padding-block: .5rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.foot__nav a:hover, .foot__nav a:focus-visible { color: var(--foot-fg); }
.foot__legal { grid-column: 1 / -1; border-top: 1px solid rgba(242, 236, 223, .16); padding-top: var(--s2); }
.foot__legal p {
  font-size: .78rem;
  line-height: 1.6;
  color: rgba(242, 236, 223, .62);
  max-width: 92ch;
}
.foot__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .4rem var(--s2);
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242, 236, 223, .45);
}

/* ═══ 15. responsive, focus, motion ═══════════════════════════════════════ */
@media (max-width: 900px) {
  .method__grid { grid-template-columns: minmax(0, 1fr); }
  .costgrid { grid-template-columns: minmax(0, 1fr); }
  .fitem__grid { grid-template-columns: minmax(0, 1fr); }
  .signup__grid { grid-template-columns: minmax(0, 1fr); }
  .toolbar__row--top { grid-template-columns: minmax(0, 1fr) auto auto; }
}
@media (max-width: 760px) {
  .toolbar__row--top { grid-template-columns: minmax(0, 1fr); }
  .toolbar__row--top .search { grid-column: 1 / -1; }
  .field { min-width: 0; }
  .field select { width: 100%; }
  .feed__bar { align-items: start; }
  .feed__cta { justify-items: stretch; }
  .feed__cta .btn { width: 100%; }
  .fitem {
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--line);
    border-left: 2px solid var(--gold);
    padding: var(--s2);
    margin-bottom: var(--s2);
    background: var(--paper);
  }
  .fitem__main, .fitem__top, .fitem__grid, .fitem__deep { grid-column: 1; }
  .fitem__top { flex-wrap: wrap; }
  .fitem__grade { margin-left: 0; }
  .part { grid-template-columns: 5.6rem minmax(0, 1fr) 2rem; }
  .pick { grid-template-columns: minmax(0, 1fr); }
  .pick__count { padding-top: 0; }
  .foot__in { grid-template-columns: minmax(0, 1fr); }
  .foot__nav { justify-content: flex-start; }
  .lockrow { grid-template-columns: 1.6rem minmax(0, 1fr) 4rem; }
}
@media (max-width: 520px) {
  .ledgerfig { border-right: 0; border-bottom: 1px solid var(--line); padding-block: var(--s2); }
  .ledgerfig:last-of-type { border-bottom: 0; }
  .killed { grid-template-columns: 1.9rem minmax(0, 1fr); }
  .prod__facts { grid-template-columns: minmax(0, 1fr); }
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
::selection { background: var(--gold-2); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

@media print {
  .nav, .ticker, .signup__form, .edition, .burger, .foot__nav, .lockbox { display: none !important; }
  .band, .signup { break-inside: avoid; }
  body { background: #fff; color: #111; }
  .frow, .fitem, .killed, .prod, .issue { break-inside: avoid; }
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* 16. revenue — lane A (filed) and lane B (disclosed) */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ═══ revenue: lane A (filed) / lane B (disclosed) ═══════════════════════
   Two lanes that are never added together. Lane A is a receipted table, so
   it gets the table treatment plus a totals strip; lane B is quotation, so
   it gets display italics and hanging quote marks. Nothing here is a card:
   rules and numerals only. */

/* a hidden section must actually disappear, even where .band sets layout */
.band[hidden] { display: none; }

.band--rev .section__head { max-width: 80ch; }
.band--rev .section__title em { font-style: italic; color: var(--gold-text); }

.rev[hidden],
.quotes[hidden],
.rev__fn[hidden] { display: none; }

.rev__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  margin: var(--s5) 0 var(--s2);
}
.rev__switch { display: flex; flex-wrap: wrap; gap: .4rem; }
.rev__tier {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem .85rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.rev__tier b { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.rev__tier:hover { border-color: var(--ink); color: var(--ink); }
.rev__tier[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.rev__tier[aria-pressed="true"] b { color: inherit; opacity: .72; }
.rev__serial {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the header row disappears when the table stacks, so the sort control keeps a
   visible, thumb-sized home below it */
.rev__sortbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin: .2rem 0 .6rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
}
.rev__sortbar-k {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.rev__sortbtn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: 0 .8rem;
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
}
.rev__sortbtn:hover { border-color: var(--gold); color: var(--gold-text); }

/* totals strip: one tier's arithmetic, never both */
.strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.strip__cell { min-width: 0; padding: .85rem 0 .9rem; }
.strip__cell + .strip__cell { border-left: 1px solid var(--line); padding-left: var(--s2); }
.strip__k {
  display: block;
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.strip__v {
  display: block;
  margin-top: .3rem;
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 3vw, 2.05rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
}
.strip__v em { font-style: italic; color: var(--gold-text); }
.strip__s {
  display: block;
  margin-top: .2rem;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.strip__cal {
  margin: .65rem 0 0;
  max-width: 88ch;
  font-family: var(--f-mono);
  font-size: 9.5px;
  line-height: 1.65;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.rev__wrap { margin-top: var(--s3); }
.table--rev td { vertical-align: baseline; }
/* fixed numeric columns: without them the browser hands half the table to
   the company name and jams YoY into the receipt badge. Scoped above the
   stacking breakpoint — at 760 and below every cell is a block. */
@media (min-width: 761px) {
  .table--rev th:nth-child(2), .table--rev td:nth-child(2) { width: 5rem; }
  .table--rev th:nth-child(3), .table--rev td:nth-child(3) { width: 8.5rem; }
  .table--rev th:nth-child(4), .table--rev td:nth-child(4) { width: 11.5rem; }
  .table--rev th:nth-child(5), .table--rev td:nth-child(5) { width: 6.5rem; padding-right: 1.15rem; }
  .table--rev th:nth-child(6), .table--rev td:nth-child(6) { width: 8rem; text-align: right; }
}
/* fixed layout only where there is room for it: above 900 the six columns
   are a ledger, below 900 they would squeeze the company name to nothing */
@media (min-width: 901px) { .table--rev { table-layout: fixed; } }
.table--rev .rev__co { font-weight: 500; color: var(--ink); }
.table--rev .rev__tk {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--muted);
}
.rev__asof {
  display: block;
  margin-top: .18rem;
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* the value and its as-of are one cell, so the stacked card keeps them
   together instead of dropping the date into the label column */
.rev__q { display: block; }
.rev__th-tk, .rev__th-rec { width: 1%; }
.table--rev .rev__derived { color: var(--gold-text); }
.rev__yoy-up { color: var(--moss); }
.rev__yoy-down { color: var(--oxblood); }
.rev__sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--ink-2);
  cursor: pointer;
}
/* 40px of click height without opening the header row up */
.rev__sort::after { content: ""; position: absolute; inset: -12px -10px; }
.rev__sort:hover { color: var(--gold-text); }
.rev__arrows { color: var(--gold-text); font-size: 10px; }

/* receipt link: small, but a 44px target */
.rec {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  padding: .28rem .4rem;
  border: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--fast), color var(--fast);
}
.rec::after { content: ""; position: absolute; inset: -13px -10px; }
.rec { justify-self: start; }
.rec:hover, .rec:focus-visible { border-color: var(--gold); color: var(--gold-text); }
.rec__arrow { color: var(--gold-text); }


.rev__fn {
  margin: .8rem 0 0;
  max-width: 88ch;
  font-family: var(--f-mono);
  font-size: 9px;
  line-height: 1.7;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* lane B — quotes, hung on a rule */
.quotes {
  margin-top: var(--s5);
  border-top: 1px solid var(--ink);
  padding-top: var(--s2);
}
.quotes__head { max-width: 74ch; margin-bottom: var(--s2); }
.quotes__list { display: grid; }
.quote {
  display: grid;
  grid-template-columns: minmax(0, .3fr) minmax(0, 1fr);
  gap: var(--s1) var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
}
.quotes__list > li:first-child { border-top: 0; }
.quote__co {
  display: block;
  font-family: var(--f-display);
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--ink);
}
.quote__meta {
  display: block;
  margin-top: .3rem;
  font-family: var(--f-mono);
  font-size: 8.5px;
  line-height: 1.7;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* the company's own string — a run rate, a quarter, an ARR — never a number
   this page computed */
.quote__val {
  display: block;
  margin-top: .4rem;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.3;
  color: var(--gold-text);
}
.quote__text {
  margin: 0;
  max-width: 62ch;
  font-family: var(--f-display);
  font-size: clamp(1.12rem, 1.9vw, 1.44rem);
  font-style: italic;
  line-height: 1.44;
  color: var(--ink);
  hanging-punctuation: first;
}
.quote__text::before { content: "“"; color: var(--gold-text); }
.quote__text::after { content: "”"; color: var(--gold-text); }
.quote__def {
  margin: .6rem 0 0;
  max-width: 76ch;
  font-family: var(--f-mono);
  font-size: 9px;
  line-height: 1.7;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.quote__src {
  position: relative;
  display: inline-block;
  margin-top: .45rem;
  padding: .25rem 0;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-text);
}
/* 44px of tap height on a 20px-tall citation link */
.quote__src::after { content: ""; position: absolute; inset: -12px -10px; }

.rev__method {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s3) var(--s5);
  border-top: 1px solid var(--ink);
  margin-top: var(--s5);
  padding-top: var(--s2);
}
.rev__notes { margin-top: .2rem; }
/* XBRL concept names are 50-character single words; let them break rather
   than push the page 6px wide at 390 */
.rev__notes li { overflow-wrap: anywhere; }
.rev__caveat {
  margin: .7rem 0 0;
  padding-left: .95rem;
  border-left: 2px solid var(--gold);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.rev__src {
  margin: .85rem 0 0;
  font-family: var(--f-mono);
  font-size: 9px;
  line-height: 1.7;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 900px) {
  .rev__method { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .strip { grid-template-columns: minmax(0, 1fr); }
  .strip__cell + .strip__cell { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .rev__top { align-items: flex-start; }
  .rev__serial { font-size: 8.5px; }
  .rev__sortbar { display: flex; }
  .quote { grid-template-columns: minmax(0, 1fr); }
}
/* 17. components the audit found unstyled */
.brand__text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.edition__label { font-family: var(--f-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.nav__submit { flex: none; }
.hero__main { min-width: 0; }
.signup__copy { min-width: 0; }
.foot__brand { min-width: 0; }
.foot__copy { font-size: .78rem; color: rgba(242, 236, 223, .62); }

/* a quiet band divider: the letter is a different kind of thing from a ledger */
.band--letter { border-top: 2px solid var(--gold); }

/* noscript + the one-line toast used by the signup stub */
.noscript {
  display: block;
  padding: var(--s2) var(--pad);
  background: var(--oxblood);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.6;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translate(-50%, 140%);
  z-index: 60;
  max-width: min(92vw, 34rem);
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--gold);
  padding: .7rem .9rem;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  line-height: 1.6;
  transition: transform var(--med);
}
.toast.is-in { transform: translate(-50%, 0); }

/* revenue containers the block above expects */
.rev { display: grid; gap: 0; }
.rev[hidden] { display: none; }
.rev__method-col { min-width: 0; }
.quote__body { font-size: var(--t-body); line-height: 1.62; color: var(--ink); }
.quote__by { font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ticker + letter meta that the renderers emit */
.ticker__plat {
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-left: .4rem;
}
.pick__k {
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.pick__plat { color: var(--muted); }

/* the stacked card form, used by both revenue and cost tables below 760 */
@media (max-width: 760px) {
  .table--stack { border-top: 1px solid var(--line); }
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* the stacked layout sorts with #rev-sort-m; leaving the header's own button in
     the tab order puts focus on a control the reader cannot see */
  .table--stack thead .rev__sort { display: none; }
  .table--stack tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .1rem;
    padding-block: .8rem;
    border-bottom: 1px solid var(--line);
  }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  .table--stack td {
    display: grid;
    grid-template-columns: 8.2rem minmax(0, 1fr);
    gap: .4rem;
    padding: .12rem 0;
    border: 0;
    font-size: .9rem;
    text-align: left;
    align-items: baseline;
  }
  .table--stack td::before {
    content: attr(data-label);
    font-family: var(--f-mono);
    font-size: 8.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .table--stack td.num { text-align: left; }
  .table--stack td[data-label="Company"] {
    grid-template-columns: minmax(0, 1fr);
    font-family: var(--f-body, var(--f-sans));
    font-size: 1.04rem;
    line-height: 1.25;
    color: var(--ink);
    padding-bottom: .25rem;
  }
  .table--stack td[data-label="Company"]::before { content: none; }
  .table--cost td { grid-template-columns: 6.4rem minmax(0, 1fr); }
}


/* footer colophon + a hidden toast that stays hidden */
.foot__colophon { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 236, 223, .45); line-height: 1.7; }
.foot__colophon span { color: rgba(242, 236, 223, .7); }
.toast[hidden] { display: none; }

/* the score block in a feed row: number, /100, grade letter */
.fitem__grade { display: inline-flex; align-items: baseline; gap: .18rem; }
.fitem__grade b { font-size: 1.5rem; font-style: normal; color: var(--ink); }
.fitem__grade span { font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; color: var(--muted); }
.fitem__grade-letter {
  margin-left: .35rem;
  border: 1px solid var(--gold);
  color: var(--gold-text);
  padding: .1rem .28rem;
  font-size: 9px;
  letter-spacing: .14em;
}
/* the bar is an inner <i>; the width variable rides on it */
.part__bar { position: relative; }
.part__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--w, 0) * 100%); background: var(--gold); display: block; }
.part--neg .part__bar i { background: var(--oxblood); }


/* ── the weekly letter: one pick, three labelled paragraphs ──────────────
   The renderer emits count → title → platform → paragraph × 3 → foot as
   flat children, so the pick is a block and each paragraph carries its own
   label column. An inline label would run straight into the prose. */
.pick__count { display: inline-block; white-space: nowrap; margin-bottom: .4rem; }
.pick__title { max-width: 36ch; margin: 0; }
.pick__plat {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: .3rem 0 .7rem;
}
.pick__p {
  display: grid;
  grid-template-columns: 8.6rem minmax(0, 1fr);
  gap: .1rem 1.1rem;
  align-items: start;
  max-width: 82ch;
  margin: 0 0 .45rem;
  font-size: .96rem;
  line-height: 1.62;
  color: var(--ink-2);
}
.pick__k { padding-top: .3rem; }
.pick__foot { margin-top: .7rem; }
@media (max-width: 700px) {
  .pick__p { grid-template-columns: minmax(0, 1fr); gap: .08rem; }
  .pick__k { padding-top: 0; }
}


/* ── admin.html: the same paper, one form ───────────────────────────────── */
.input {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .62rem .7rem;
  min-height: 44px;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: 0;
}
.input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.admin__status p { margin: 0 0 .5rem; font-size: .95rem; line-height: 1.6; }
.admin__status a { color: inherit; border-bottom: 1px solid var(--gold); }
.admin code { font-family: var(--f-mono); font-size: .88em; background: var(--paper-2); padding: .05em .3em; }


@media (min-width: 700px) {
  .admin__card { width: min(36rem, 100%); }
  .admin__lede, .admin__fine { max-width: none; }
}


/* ── touch targets: everything tappable clears 44 px at phone width ─────── */
@media (max-width: 760px) {
  .chip { min-height: 44px; padding-block: .5rem; }
  .field input, .search input, .input { min-height: 44px; }
  .frow__link { min-height: 44px; display: inline-flex; align-items: center; }
  .pick__link, .fitem__line a, .killed__name { min-height: 44px; display: inline-flex; align-items: center; }
}


/* receipt links and jump links are text links in a line box, so give them a
   real 44 px hit area without changing where the text sits */
@media (max-width: 760px) {
  .fitem__fact, .pick__jump { min-height: 44px; display: inline-flex; align-items: center; }
}


/* ── nav collapse: the in-line link row needs ~640 px of its own, so below
   900 px it goes behind the menu button and the sheet takes over ───────── */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__submit { display: none; }
  .burger { display: inline-flex; }
  .nav__tools { margin-left: auto; }
  .nav__sheet-nav a { font-size: 1.06rem; }
}
@media (max-width: 420px) {
  .edition__label { display: none; }
  .edition { padding: 0; width: 44px; justify-content: center; }
  .burger__label { display: none; }
  .burger { padding: 0; width: 44px; justify-content: center; }
}

/* the lockbox CTA now carries the price in its own label ("UNLOCK THE DECOMPOSITION —
   $14.99/MO"). At phone width its content box is ~316px and the one-line label needs
   ~319px, so it wrapped to two lines and the button grew 46->58px. Tighten the inline
   padding on small screens: the type size, the letter-spacing and the words stay put. */
@media (max-width: 430px) {
  .lockbox__cta .btn { padding-inline: .6rem; }
}


/* ── hero at phone width: one column, the ledger card below the copy, and the
   rotated stamp goes static so it cannot land on the footnote text ───────── */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .ledger__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; }
  .stamp { position: static; align-self: flex-start; margin-top: .9rem; transform: rotate(-2deg); }
  .ledger { display: flex; flex-direction: column; }
}
@media (max-width: 760px) {
  .topline__in { flex-wrap: wrap; gap: .2rem .5rem; padding-block: .4rem; }
  .topline__left { font-size: 8.5px; letter-spacing: .16em; }
  .topline__right { white-space: normal; font-size: 8px; letter-spacing: .12em; line-height: 1.6; }
  .topline__right > * { margin-right: .4rem; }
}


/* ═══ what you'll need / what could go wrong (products.js top-level lists) ══ */
.needsection {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.needsection[hidden] { display: none; }
.needsection .costsection__head { margin-bottom: var(--s4); }

.needs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.need {
  display: grid;
  gap: .35rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
}
.need__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
}
.need__item {
  font-family: var(--f-display);
  font-size: 1.06rem;
  letter-spacing: -.012em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.need__item:hover, .need__item:focus-visible {
  border-bottom-color: var(--gold);
  color: var(--ink);
}
.need__item--plain { border-bottom: 0; }
.need__arrow { margin-left: .32rem; color: var(--gold-text); font-size: .8em; }
.need__cost {
  flex: none;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  /* prices and percentages keep their own case: "$14/yr" is not "$14/YR" */
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* the whole row is the link: 110px tall on a phone, not 24px of text.
   The cost stays outside the anchor so the link name is the item, not the price. */
.need { position: relative; }
.need__item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
}
.need__item:focus-visible { outline: none; }
.need__item:focus-visible::after {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.need__why {
  max-width: 70ch;
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.risks { list-style: none; margin: 0; padding: 0; counter-reset: risk; }
.risk {
  display: grid;
  gap: .4rem;
  padding: 1rem 0 1rem 2.4rem;
  position: relative;
  border-top: 1px solid var(--line);
}
.risk::before {
  counter-increment: risk;
  content: counter(risk, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.05rem;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--muted);
}
.risk__what {
  margin: 0;
  max-width: 74ch;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink);
}
.risk__fix {
  margin: 0;
  max-width: 74ch;
  padding-left: .85rem;
  border-left: 2px solid var(--gold);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.risk__fixk {
  display: inline-block;
  margin-right: .45rem;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--moss);
}

/* the honest disclosure: this build carries only the preview rows */
.lockbox__disc {
  max-width: 74ch;
  margin: .9rem 0 0;
  padding-left: .8rem;
  border-left: 2px solid var(--gold);
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.lockbox__disc strong, .method__disclosure strong { font-weight: 600; color: var(--ink); }
.method__disclosure {
  max-width: 78ch;
  margin: 1.1rem 0 0;
  padding-left: .85rem;
  border-left: 2px solid var(--gold);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-2);
}

@media (max-width: 700px) {
  .need__top { flex-wrap: wrap; gap: .2rem .8rem; }
  .need__cost { font-size: 10px; }
  .risk { padding-left: 1.9rem; }
  .lockbox__disc, .method__disclosure { font-size: .86rem; }
}

/* ── the paid row quotes the sentence its figure came from ──────────────
   Same voice as the Lane B quotations (.quote__text supplies the display
   italic, the hanging punctuation and the gold quote marks); this modifier
   only sizes it for the money column so the figure and its evidence read as
   one object. */
.fitem__quote {
  max-width: 44ch;
  margin: .15rem 0 .2rem;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--ink-2);
}
@media (max-width: 760px) {
  .fitem__quote { max-width: none; font-size: 1rem; }
}

/* the ledger foot is a sentence when the dataset is missing, and the stamp sits
   over the last 8rem of this row — keep the text out from under it */
.ledger__foot { max-width: calc(100% - 9.5rem); }
@media (max-width: 760px) {
  .ledger__foot { max-width: none; }
}

/* ── the plain sentence under a free title ──────────────────────────────
   The one-liner sells the idea; this explains it. It is prose, so it gets
   no letterspacing, no uppercase and no mono — just a quieter voice than
   the title it sits under, held to a readable measure. */
.frow__what {
  margin: .34rem 0 0;
  max-width: 68ch;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
@media (max-width: 639px) {
  .frow__what {
    /* the sentence is body copy, not a caption: at phone size it stays within
       a fifth of a rem of the body measure and buys the room back from the
       row's padding instead of from the type */
    font-size: .9rem;
    line-height: 1.45;
    margin-top: .28rem;
    text-wrap: pretty;
  }
  .frow { padding-block: 1rem; }
  .frow__meta { margin-top: .35rem; }
}

/* ── the paid row's analysis: forces, market, and the honest ceiling ───── */
.fitem__baseline {
  margin: .45rem 0 0;
  max-width: 54ch;
  font-family: var(--f-body);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--muted);
  font-style: italic;
}

/* The forces own the deep block alone now that market size is retired. The
   freed width is spent on the measure, not on stretching. The number is in rem,
   not ch: Outfit's zero is 0.66em wide, so a 68ch column measured 87 real
   characters. 35rem of definition text renders ~68 characters at .9rem
   (measured 8.4px per character), and the list stops there so the hairline
   rules and the last word share one straight right edge. */
.fitem__deep {
  grid-column: 2;
  margin-top: 1.3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.deep__k {
  margin: 0 0 .75rem;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.deep__caveat {
  text-transform: none;
  letter-spacing: .01em;
  font-style: italic;
  font-size: 10.5px;
  color: var(--muted);
}
.deep__caveat::before { content: "· "; }

.forces {
  margin: 0;
  max-width: calc(7.4rem + 29rem + .9rem);
}
.force {
  display: grid;
  grid-template-columns: 7.4rem minmax(0, 1fr);
  gap: .2rem .9rem;
  padding: .5rem 0;
  border-top: 1px solid var(--line);
}
.force:first-child { border-top: 0; padding-top: 0; }
.force__k {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: .18rem;
}
.force__v {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}


@media (max-width: 760px) {
  /* the paid row collapses to a single column card here, so the analysis
     follows it into column 1 — a col-2 child would create an implicit
     second track and squeeze the whole row into the first */
  .fitem__deep { grid-column: 1; }
  .force { grid-template-columns: minmax(0, 1fr); gap: .15rem; padding: .55rem 0; }
  .force__k { padding-top: 0; }
}

/* ── what the money slot says when no figure was certified ──────────────
   A dash reads as missing data; the row ships a typed basis instead, so the
   slot names what the source's figure actually was. Set in the mono voice
   because it is a label, not a number. */
.fitem__basis {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 26ch;
}