/* ============================================================
   MERIDIAN — DESIGN SYSTEM
   ============================================================ */

:root {
  /* Canvas */
  --paper:        #F4EFE5;   /* parchment, warmer than cream */
  --paper-deep:   #ECE4D4;
  --paper-edge:   #E2D9C5;

  /* Ink */
  --ink:          #0A0E14;   /* near-black with a touch of navy */
  --ink-soft:     #1A2030;
  --ink-mid:      #4A5060;
  --ink-quiet:    #7A7468;
  --ink-faint:    #9A9389;

  /* Accents — used sparingly */
  --oxblood:      #6B1C2E;   /* the publication's accent — section labels, emphasis */
  --oxblood-soft: #8A2A3E;
  --green:        #1E5C3F;   /* gains, positive direction */
  --red:          #8B2424;   /* losses, negative direction */

  /* Rules */
  --rule:         rgba(10, 14, 20, 0.14);
  --rule-strong:  rgba(10, 14, 20, 0.32);

  /* Type */
  --display:      'Fraunces', 'Source Serif 4', Georgia, serif;
  --serif:        'Source Serif 4', Georgia, serif;
  --sans:         'Inter Tight', system-ui, -apple-system, sans-serif;
  --mono:         'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Layout */
  --gutter:       56px;
  --max:          1440px;
  --line-x:       86px;       /* where the meridian line sits */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "ss01", "ss02", "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

::selection { background: var(--ink); color: var(--paper); }

a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

/* tabular figures for all numeric data — non-negotiable */
.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   MASTHEAD — daily-paper nameplate
   ============================================================ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.masthead__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
.masthead__wordmark {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  font-variation-settings: "opsz" 14, "SOFT" 0, "WONK" 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.masthead__dateline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mid);
  font-variant-numeric: tabular-nums;
}
.masthead__sep { color: var(--ink-faint); }
.masthead__nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.masthead__link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mid);
  transition: color .2s ease;
}
.masthead__link:hover { color: var(--ink); }
.masthead__link--cta {
  color: var(--oxblood);
  border: 1px solid var(--oxblood);
  padding: 8px 14px;
  transition: background .2s ease, color .2s ease;
}
.masthead__link--cta:hover { background: var(--oxblood); color: var(--paper); }

@media (max-width: 920px) {
  .masthead__inner { grid-template-columns: 1fr auto; gap: 16px; padding: 14px 24px; }
  .masthead__dateline { display: none; }
  .masthead__nav { gap: 14px; }
  .masthead__link:not(.masthead__link--cta) { display: none; }
  .masthead__link--cta {
    padding: 12px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    max-width: 120px;
    overflow: hidden;
  }
}

/* ============================================================
   TICKER
   ============================================================ */

.ticker {
  position: sticky;
  top: 60px;
  z-index: 70;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ticker__track {
  display: flex;
  gap: 56px;
  padding: 12px 0;
  white-space: nowrap;
  animation: tickerSlide 90s linear infinite;
  width: max-content;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.ticker__item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: rgba(244, 239, 229, 0.75);
}
.ticker__item em {
  font-style: normal;
  color: var(--paper);
}
.ticker__pos { color: #5BA67E; }
.ticker__neg { color: #C46060; }

@keyframes tickerSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   PAGE — the meridian line
   ============================================================ */

.page {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.page::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--line-x);
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0,
    var(--rule) 80px,
    var(--rule) calc(100% - 200px),
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}
.page::after {
  content: '';
  position: fixed;
  top: 60px;
  left: var(--line-x);
  width: 2px;
  height: calc(var(--scroll-progress, 0) * 100vh);
  background: var(--oxblood);
  pointer-events: none;
  z-index: 60;
  opacity: 0.7;
  transition: height 0.05s linear;
}
@media (max-width: 920px) {
  :root { --line-x: 24px; }
  .page { padding: 0 24px; }
}

/* ------------------------------------------------------------
   Reusable section label (with rule + meridian crossing)
   ------------------------------------------------------------ */

.section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 56px;
  position: relative;
  z-index: 2;
}
.section-label__rule {
  width: 36px;
  height: 1px;
  background: var(--oxblood);
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  padding: 120px 0 100px;
  position: relative;
  z-index: 2;
}
.hero__rule {
  position: absolute;
  top: 0;
  left: var(--line-x);
  right: 0;
  height: 1px;
  background: var(--ink);
}
.hero__label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-bottom: 48px;
  margin-left: 0;
  padding-left: calc(var(--line-x) + 32px - var(--gutter));
}
.hero__label-rule {
  width: 24px;
  height: 1px;
  background: var(--ink);
}

.hero__wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-size: clamp(56px, 10.5vw, 168px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 56px;
  margin-left: calc(var(--line-x) + 32px - var(--gutter));
}
.hero__wordmark-line {
  display: block;
}
.hero__wordmark-line .hw {
  display: inline-block;
  white-space: nowrap;
  margin-right: 0.18em;
}
.hero__wordmark-line--italic {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  margin-left: 0;
}

.hero__lede {
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 36em;
  margin-left: calc(var(--line-x) + 32px - var(--gutter));
  margin-bottom: 64px;
}

.hero__premarket {
  margin-left: calc(var(--line-x) + 32px - var(--gutter));
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  max-width: 1100px;
}
.hero__premarket-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 28px;
  font-variant-numeric: tabular-nums;
}
.hero__premarket-rule {
  width: 24px;
  height: 1px;
  background: var(--oxblood);
}
.hero__premarket-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 24px;
  margin-bottom: 16px;
}
.hero__pm-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 24px;
  border-right: 1px solid var(--rule);
}
.hero__pm-cell:last-child { border-right: 0; padding-right: 0; }
.hero__pm-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.hero__pm-value {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  font-variation-settings: "opsz" 60, "SOFT" 0;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero__pm-delta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.hero__pm-delta--pos { color: var(--green); }
.hero__pm-delta--neg { color: var(--red); }

.hero__pm-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.spark {
  width: 60px;
  height: 18px;
  flex-shrink: 0;
}
.spark--pos { color: var(--green); opacity: 0.8; }
.spark--neg { color: var(--red); opacity: 0.8; }
.hero__premarket-foot {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.hero__premarket-foot em {
  font-style: italic;
  color: var(--oxblood);
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: var(--serif);
  font-size: 14px;
  margin-left: 8px;
}

@media (max-width: 920px) {
  .hero__premarket { margin-left: 0; }
  .hero__premarket-grid { grid-template-columns: 1fr 1fr; gap: 16px 12px; padding-bottom: 16px; }
  .hero__pm-cell { border-right: 0; padding-right: 0; }
  .hero__pm-cell:nth-child(5) { display: none; }
  .hero__pm-value { font-size: 26px; }
  .hero__premarket-foot {
    font-size: 10px;
    line-height: 1.5;
  }
  .hero__premarket-foot em { display: block; margin-left: 0; margin-top: 4px; }
}

@media (max-width: 920px) {
  .hero { padding: 56px 0 56px; }
  .hero__label,
  .hero__wordmark,
  .hero__lede { margin-left: 0; padding-left: 0; }
  .hero__wordmark {
    font-size: clamp(48px, 14vw, 96px);
    line-height: 1.0;
    letter-spacing: -0.035em;
  }
  .hero__wordmark-line .hw { margin-right: 0.16em; }
  .hero__wordmark-line--italic { margin-left: 0; }
  .hero__lede { font-size: 18px; max-width: 100%; }
}

/* ============================================================
   BRIEFING — the live brief preview, the proof-of-product moment
   ============================================================ */

.brief {
  padding: 100px 0;
  border-top: 1px solid var(--rule);
  position: relative;
  z-index: 2;
  margin-left: calc(var(--line-x) + 32px - var(--gutter));
}
.brief__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.brief__head-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.brief__head-rule {
  width: 24px;
  height: 1px;
  background: var(--oxblood);
}
.brief__head-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  display: flex;
  gap: 12px;
  align-items: center;
}
.brief__head-sep { color: var(--ink-faint); }

.brief__lead {
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--ink);
  max-width: 32ch;
  margin-bottom: 72px;
}
.brief__cta {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  text-align: right;
}
.brief__lead em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--oxblood);
}
.brief__lead-data {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------
   Asset table — tabular, dense, editorial
   ---------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  margin-bottom: 64px;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.table thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  font-weight: 400;
  padding: 10px 0;
  border-bottom: 1px solid var(--ink);
}
.table thead th:nth-child(2),
.table thead th:nth-child(3),
.table thead th:nth-child(4) { text-align: right; }
.table tbody td {
  font-family: var(--serif);
  font-size: 17px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.table tbody td:nth-child(2),
.table tbody td:nth-child(3),
.table tbody td:nth-child(4) { text-align: right; }
.table__num { font-family: var(--mono); font-size: 15px; letter-spacing: -0.005em; }
.table__ticker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-left: 10px;
}
.table__pos { color: var(--green); }
.table__neg { color: var(--red); }
.table__feature td {
  background: rgba(107, 28, 46, 0.04);
  font-weight: 500;
}

/* badges */
.badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  display: inline-block;
}
.badge--high  { background: rgba(30, 92, 63, 0.10); color: var(--green); }
.badge--med   { background: rgba(107, 28, 46, 0.10); color: var(--oxblood); }
.badge--low   { background: rgba(122, 116, 104, 0.14); color: var(--ink-quiet); }
.badge--short { background: rgba(139, 36, 36, 0.10); color: var(--red); }

/* ----------------------------------------------------------
   Signal card
   ---------------------------------------------------------- */

.signal {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 40px;
  margin-bottom: 64px;
  position: relative;
}
.signal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--oxblood);
}
.signal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.signal__kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood);
  display: block;
  margin-bottom: 10px;
}
.signal__title {
  font-family: var(--display);
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.signal__ticker {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-left: 12px;
  font-weight: 400;
}
.signal__head-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}
.signal__direction {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--green);
  color: var(--paper);
  padding: 6px 14px;
}
.signal__conviction {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}
.signal__conviction em {
  font-family: var(--display);
  font-style: normal;
  font-size: 96px;
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--ink);
}
.signal__conviction span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-top: 4px;
}

.signal__levels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 28px;
}
.signal__level {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 24px;
  border-right: 1px solid var(--rule);
}
.signal__level:last-child { border-right: 0; padding-right: 0; }
.signal__level-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.signal__level-value {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.signal__level-value--pos { color: var(--green); }
.signal__level-value--neg { color: var(--red); }

.signal__brief {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
  margin-bottom: 28px;
}
.signal__brief::first-letter {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: 3.6em;
  float: left;
  line-height: 0.85;
  margin-right: 8px;
  margin-top: 4px;
  color: var(--oxblood);
  letter-spacing: -0.04em;
}
.signal__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

@media (max-width: 720px) {
  .signal { padding: 24px; }
  .signal__head { flex-direction: column; gap: 20px; align-items: flex-start; }
  .signal__head-right { align-items: flex-start; }
  .signal__levels { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .signal__level { border-right: 0; padding-right: 0; }
  .signal__foot { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ----------------------------------------------------------
   Watching
   ---------------------------------------------------------- */

.watching {
  padding-top: 8px;
}
.watching__title {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 30;
  letter-spacing: -0.015em;
  margin-bottom: 24px;
  color: var(--ink);
}
.watching__list {
  list-style: none;
}
.watching__list li {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.watching__when {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood);
  font-variant-numeric: tabular-nums;
}
.watching__what {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
}
.watching__what strong {
  font-weight: 600;
}

@media (max-width: 720px) {
  .watching__list li { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 920px) {
  .brief { margin-left: 0; padding: 64px 0; }
}

/* ============================================================
   MANIFESTO — single-sentence pull quote
   ============================================================ */

.manifesto {
  padding: 160px 0;
  border-top: 1px solid var(--rule);
  background: var(--paper-deep);
  position: relative;
  z-index: 2;
  margin: 0 calc(var(--gutter) * -1);
  padding-left: calc(var(--line-x) + 32px);
  padding-right: var(--gutter);
  max-width: none;
}
.manifesto__label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 56px;
}
.manifesto__label-rule {
  width: 36px;
  height: 1px;
  background: var(--oxblood);
}
.manifesto__quote {
  font-family: var(--display);
  font-size: clamp(36px, 5.4vw, 80px);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 56px;
}
.manifesto__quote em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--oxblood);
}
.manifesto__quote .strike {
  position: relative;
  color: var(--ink-quiet);
  display: inline-block;
}
.manifesto__quote .strike::after {
  content: '';
  position: absolute;
  left: -1%;
  right: -1%;
  top: 54%;
  height: 0.08em;
  background: var(--oxblood);
  transform: rotate(-2deg);
  border-radius: 2px;
}
.manifesto__body {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-mid);
  max-width: 60ch;
}

@media (max-width: 920px) {
  /* Reset BOTH margins (right was inherited from the desktop negative-gutter
     bleed) and add inset padding so the pull quote breathes inside the
     viewport instead of running off it. */
  .manifesto {
    margin-left: 0;
    margin-right: 0;
    padding: 80px 24px;
  }
}

/* ============================================================
   FIVE LAYERS
   ============================================================ */

.layers {
  padding: 120px 0;
  border-top: 1px solid var(--rule);
  position: relative;
  z-index: 2;
  margin-left: calc(var(--line-x) + 32px - var(--gutter));
}
.layers__list {
  list-style: none;
  border-top: 1px solid var(--ink);
}
.layers__item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 48px;
  padding: 48px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  transition: padding-left 0.5s cubic-bezier(.2,0,0,1), background 0.5s ease;
}
.layers__cadence {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-left: 32px;
}
.layers__item:hover {
  padding-left: 24px;
  background: rgba(107, 28, 46, 0.03);
}
.layers__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--oxblood);
  font-variant-numeric: tabular-nums;
}
.layers__name {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 14px;
}
.layers__desc {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 64ch;
}
.layers__desc em {
  font-style: italic;
  color: var(--ink);
}

@media (max-width: 920px) {
  .layers { margin-left: 0; padding: 80px 0; }
  .layers__item { grid-template-columns: 60px 1fr; gap: 24px; padding: 28px 0; }
  .layers__cadence { display: none; }
  .layers__item:hover { padding-left: 0; }
}

/* ============================================================
   THE KNOWLEDGE
   ============================================================ */

.knowledge {
  padding: 120px 0;
  border-top: 1px solid var(--rule);
  background: var(--paper-deep);
  position: relative;
  z-index: 2;
  margin-left: calc(var(--line-x) + 32px - var(--gutter));
  margin-right: calc(var(--gutter) * -1);
  padding-right: var(--gutter);
}
.knowledge__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: start;
}
.knowledge__sidecol {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.knowledge__item {
  border-top: 1px solid var(--ink);
  padding-top: 24px;
}
.knowledge__category {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 16px;
}
.knowledge__head {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 30;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 16px;
}
.knowledge__copy {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-mid);
  margin-bottom: 16px;
}
.knowledge__source {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--oxblood);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid var(--rule);
  transition: gap 0.3s ease;
}
.knowledge__source::before {
  content: '→';
  font-family: var(--mono);
  font-style: normal;
  font-size: 12px;
}
.knowledge__source:hover { gap: 14px; }

.knowledge__item--number .knowledge__big {
  font-family: var(--display);
  font-size: clamp(120px, 16vw, 240px);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  letter-spacing: -0.06em;
  line-height: 0.88;
  color: var(--oxblood);
  font-variant-numeric: tabular-nums;
  margin: 16px 0 32px;
  position: relative;
}
.knowledge__big-prefix {
  font-size: 0.42em;
  vertical-align: 0.95em;
  letter-spacing: -0.02em;
  margin-right: 0.04em;
  font-variation-settings: "opsz" 60;
  color: var(--oxblood-soft);
  font-weight: 400;
}
.knowledge__big-suffix {
  font-size: 0.34em;
  vertical-align: baseline;
  letter-spacing: -0.01em;
  font-style: italic;
  font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 1;
  color: var(--oxblood-soft);
  margin-left: 0.04em;
}
.knowledge__item--number .knowledge__line {
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 400;
  font-variation-settings: "opsz" 60, "SOFT" 30;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.012em;
  max-width: 30ch;
  margin-bottom: 24px;
}
.knowledge__item--number .knowledge__line em {
  font-style: italic;
  color: var(--ink-quiet);
  font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 1;
}

@media (max-width: 920px) {
  .knowledge { margin: 0 calc(var(--gutter) * -1); padding: 80px var(--gutter); }
  .knowledge__grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ============================================================
   THE RECORD
   ============================================================ */

.record {
  padding: 120px 0;
  border-top: 1px solid var(--rule);
  position: relative;
  z-index: 2;
  margin-left: calc(var(--line-x) + 32px - var(--gutter));
}
.record__intro {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
  margin-bottom: 56px;
}
.record__intro em {
  font-style: italic;
  color: var(--ink-mid);
}
.record__intro a {
  color: var(--oxblood);
  border-bottom: 1px solid var(--oxblood);
}
.table--record thead th { font-size: 10px; }
.table--record tbody td { font-size: 15px; padding: 12px 0; }
.table--record tbody td:first-child {
  font-family: var(--mono);
  letter-spacing: 0.06em;
  color: var(--ink-mid);
  font-size: 13px;
}
.table--record thead th:nth-child(n+3),
.table--record tbody td:nth-child(n+3) { text-align: right; }
.table--record thead th:nth-child(2),
.table--record tbody td:nth-child(2) { text-align: left; }

.result {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 8px;
}
.result--win { background: rgba(30, 92, 63, 0.12); color: var(--green); }
.result--loss { background: rgba(139, 36, 36, 0.10); color: var(--red); }
.result--pending { background: rgba(122, 116, 104, 0.14); color: var(--ink-quiet); }

.record__cta {
  margin-top: 40px;
  text-align: right;
}
.link-arrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--oxblood);
  padding-bottom: 4px;
  transition: gap 0.3s ease;
}
.link-arrow:hover { gap: 14px; }

@media (max-width: 920px) {
  .record { margin-left: 0; padding: 80px 0; }
}

/* ============================================================
   PRICING
   ============================================================ */

.pricing {
  padding: 120px 0;
  border-top: 1px solid var(--rule);
  position: relative;
  z-index: 2;
  margin-left: calc(var(--line-x) + 32px - var(--gutter));
}
.pricing__heading {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 64px;
}
.pricing__heading em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
}
.tier {
  padding: 32px 28px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--paper);
  transition: background 0.3s ease;
}
.tier:last-child { border-right: 0; }
.tier:hover { background: var(--paper-deep); }
.tier--feature {
  background: var(--ink);
  color: var(--paper);
}
.tier--feature:hover { background: var(--ink); }
.tier--feature .tier__name,
.tier--feature .tier__price em,
.tier--feature .tier__price span,
.tier--feature .tier__line,
.tier--feature .tier__list li { color: var(--paper); }
.tier__crest {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--oxblood);
  font-size: 0;
}
.tier__crest::after {
  content: 'Recommended';
  position: absolute;
  top: 16px;
  right: 28px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.tier--feature .tier__crest::after { color: var(--oxblood-soft); }
.tier__name {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-bottom: 18px;
}
.tier__price {
  font-family: var(--display);
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 16px;
}
.tier__price em {
  font-style: normal;
  font-size: 56px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tier__price span {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-left: 8px;
}
.tier__line {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-mid);
  margin-bottom: 24px;
  min-height: 4.5em;
}
.tier__list {
  list-style: none;
  flex: 1;
  margin-bottom: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.tier--feature .tier__list { border-top-color: rgba(255,255,255,0.16); }
.tier__list li {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mid);
  padding: 7px 0;
  position: relative;
  padding-left: 14px;
}
.tier__list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--oxblood);
}
.tier__cta { margin-top: auto; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 12px 18px;
  transition: all 0.3s ease;
}
.btn--quiet {
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn--quiet:hover {
  background: var(--ink);
  color: var(--paper);
}
.tier--feature .btn--quiet { border-color: var(--paper); color: var(--paper); }
.tier--feature .btn--quiet:hover { background: var(--paper); color: var(--ink); }
.btn--feature {
  background: var(--oxblood);
  color: var(--paper);
  border: 1px solid var(--oxblood);
}
.btn--feature:hover {
  background: var(--paper);
  color: var(--oxblood);
}

@media (max-width: 920px) {
  .pricing { margin-left: 0; padding: 80px 0; }
  .pricing__grid { grid-template-columns: 1fr; }
  .tier { border-right: 0; }
}

/* ============================================================
   EMAIL CAPTURE
   ============================================================ */

.capture {
  padding: 120px 0;
  border-top: 1px solid var(--rule);
  text-align: center;
  position: relative;
  z-index: 2;
}
.capture__inner {
  max-width: 720px;
  margin: 0 auto;
}
.capture__heading {
  font-family: var(--display);
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 24px;
}
.capture__heading em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--oxblood);
}
.capture__line {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-mid);
  margin-bottom: 40px;
}
.capture__row {
  display: flex;
  justify-content: center;
  gap: 0;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
  max-width: 480px;
  margin: 0 auto;
}
.capture__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 12px 0;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
}
.capture__input::placeholder { color: var(--ink-faint); }
.capture__success {
  font-family: var(--serif);
  font-style: italic;
  color: var(--green);
  font-size: 17px;
}

/* ============================================================
   COLOPHON / FOOTER
   ============================================================ */

.colophon {
  margin-top: 40px;
  padding: 80px var(--gutter) 32px;
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--ink);
}
.colophon__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.colophon__brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.colophon__wordmark {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 400;
  font-variation-settings: "opsz" 60;
  letter-spacing: -0.015em;
  color: var(--paper);
}
.colophon__byline {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 239, 229, 0.5);
}
.colophon__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.colophon__head {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 229, 0.5);
  margin-bottom: 4px;
}
.colophon__col a {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--paper);
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.colophon__col a:hover { opacity: 1; border-bottom: 1px solid var(--paper); }
.colophon__base {
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 239, 229, 0.5);
}
@media (max-width: 920px) {
  .colophon { padding: 56px 24px 24px; }
  .colophon__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .colophon__base { flex-direction: column; gap: 8px; }
}

/* ============================================================
   ENTRANCE ANIMATIONS
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(.2,0,0,1), transform 1s cubic-bezier(.2,0,0,1);
}
.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Wordmark letter reveal */
@keyframes letterRise {
  from {
    opacity: 0;
    transform: translateY(40%);
    font-variation-settings: "opsz" 144, "wght" 200, "SOFT" 0, "WONK" 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 0, "WONK" 0;
  }
}
@keyframes letterRiseItalic {
  from {
    opacity: 0;
    transform: translateY(40%);
    font-variation-settings: "opsz" 144, "wght" 200, "SOFT" 100, "WONK" 1;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 100, "WONK" 1;
  }
}

.hero__wordmark .hl,
.hero-v2__wordmark .hl {
  display: inline-block;
  opacity: 0;
  transform: translateY(40%);
  animation: letterRise 0.9s cubic-bezier(.2,0,0,1) forwards;
}
.hero__wordmark-line--italic .hl,
.hero-v2__wordmark-line--italic .hl {
  animation-name: letterRiseItalic;
}
/* Word spacing for the v2 wordmark — letter-spans collapse the
   default whitespace between words, so we restore it on .hw. */
.hero-v2__wordmark .hw {
  display: inline-block;
  margin-right: 0.22em;
}
.hero-v2__wordmark-line--italic .hw {
  margin-right: 0.20em;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__label,
.hero__lede,
.hero__premarket {
  opacity: 0;
  animation: fadeInUp 0.9s cubic-bezier(.2,0,0,1) forwards;
}
.hero__label { animation-delay: 0.05s; }
.hero__lede { animation-delay: 1.6s; }
.hero__premarket { animation-delay: 1.9s; }

@media (prefers-reduced-motion: reduce) {
  .hero__wordmark .hl,
  .hero-v2__wordmark .hl,
  .hero__label,
  .hero__lede,
  .hero__premarket,
  .ticker__track,
  .reveal,
  * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   EVENING EDITION — dark palette
   ------------------------------------------------------------
   The publication has two editions. Morning is paper-on-ink:
   parchment background, near-ink type. Evening is the inverse,
   tuned for low-light reading: a deep printer's-room background,
   warm cream type, oxblood lifted just enough to remain
   recognisable as the publication's accent.

   Toggle lives in the masthead dateline. Persisted in localStorage
   under "meridian-edition". An inline no-flash script in <head>
   sets [data-theme] before paint to prevent a light flash on
   evening-edition page loads.
   ============================================================ */

:root[data-theme="dark"] {
  /* Canvas — the page at night */
  --paper:        #0E1218;   /* deep printer's-room — one tone above the legacy --ink */
  --paper-deep:   #161B25;   /* slightly raised surface for ticker, colophon, feature tier */
  --paper-edge:   #1F2530;

  /* Type — warm cream, the parchment-inverted.
     Each rung lifted to clear WCAG 2.2 AA on the dark paper:
       --ink         17.0:1  (AAA)
       --ink-soft    13.5:1  (AAA)
       --ink-mid      6.0:1  (AA normal pass, headroom)
       --ink-quiet    4.6:1  (AA normal pass — was 3.2:1, failing)
       --ink-faint    3.2:1  (AA large only — kept dim for decorative meta) */
  --ink:          #ECE4D0;
  --ink-soft:     #D4CCB5;
  --ink-mid:      #A39A85;
  --ink-quiet:    #8E8472;
  --ink-faint:    #6E6757;

  /* Accents — lifted enough to read on dark, still recognisably the brand */
  --oxblood:      #C25770;
  --oxblood-soft: #A24658;
  --green:        #5DB892;
  --red:          #E27474;

  /* Rules — cream at low alpha */
  --rule:         rgba(236, 228, 208, 0.14);
  --rule-strong:  rgba(236, 228, 208, 0.32);
}

/* Smooth transition between editions on the surfaces that swap.
   Kept off mostly to avoid the everything-fades feel; restricted to
   the elements that read as background/typography. */
body,
.masthead,
.ticker,
.colophon,
.tier,
.signal,
.knowledge,
.manifesto,
.layers__item,
.table tbody td,
.table thead th {
  transition: background-color 0.45s cubic-bezier(.2,0,0,1),
              color 0.45s cubic-bezier(.2,0,0,1),
              border-color 0.45s cubic-bezier(.2,0,0,1);
}

/* ------------------------------------------------------------
   Permanent dark surfaces — these are dark in both editions.
   In morning edition they sit on parchment; in evening edition
   the variable swap would invert them to cream-on-cream, which
   is wrong. Override to a slightly raised tone that holds the
   "this section is the inverse" hierarchy intact at night.
   ------------------------------------------------------------ */

[data-theme="dark"] .ticker {
  background: var(--paper-deep);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
[data-theme="dark"] .ticker__item { color: rgba(236, 228, 208, 0.70); }
[data-theme="dark"] .ticker__item em { color: var(--ink); }
[data-theme="dark"] .ticker__pos { color: var(--green); }
[data-theme="dark"] .ticker__neg { color: var(--red); }

[data-theme="dark"] .colophon {
  background: var(--paper-deep);
  color: var(--ink);
  border-top: 1px solid var(--rule);
}
[data-theme="dark"] .colophon__wordmark { color: var(--ink); }
[data-theme="dark"] .colophon__byline,
[data-theme="dark"] .colophon__head,
[data-theme="dark"] .colophon__base { color: var(--ink-mid); }
[data-theme="dark"] .colophon__col a { color: var(--ink); }
[data-theme="dark"] .colophon__col a:hover { border-bottom-color: var(--ink); }
[data-theme="dark"] .colophon__inner { border-bottom-color: var(--rule); }

[data-theme="dark"] .tier--feature {
  background: var(--paper-deep);
  color: var(--ink);
}
[data-theme="dark"] .tier--feature:hover { background: var(--paper-edge); }
[data-theme="dark"] .tier--feature .tier__name,
[data-theme="dark"] .tier--feature .tier__price em,
[data-theme="dark"] .tier--feature .tier__price span,
[data-theme="dark"] .tier--feature .tier__line,
[data-theme="dark"] .tier--feature .tier__list li { color: var(--ink); }
[data-theme="dark"] .tier--feature .tier__list { border-top-color: var(--rule); }
[data-theme="dark"] .tier--feature .btn--quiet { border-color: var(--ink); color: var(--ink); }
[data-theme="dark"] .tier--feature .btn--quiet:hover { background: var(--ink); color: var(--paper); }

/* The strikethrough on the manifesto pull quote is drawn with
   oxblood — keep it readable on dark. The "banks" word
   underneath dims to ink-quiet which is now a warm dim cream. */
[data-theme="dark"] .manifesto { background: var(--paper-deep); }

/* The signal card border is var(--ink) — in evening that becomes
   a cream hairline on near-ink, which is the correct frame. The
   feature-table row has a faint oxblood tint that needs a touch
   more presence on dark. */
[data-theme="dark"] .table__feature td {
  background: rgba(194, 87, 112, 0.08);
}
[data-theme="dark"] .badge--high  { background: rgba(93, 184, 146, 0.14); }
[data-theme="dark"] .badge--med   { background: rgba(194, 87, 112, 0.14); }
[data-theme="dark"] .badge--low   { background: rgba(154, 145, 125, 0.18); }
[data-theme="dark"] .badge--short { background: rgba(226, 116, 116, 0.14); }
[data-theme="dark"] .result--win    { background: rgba(93, 184, 146, 0.14); }
[data-theme="dark"] .result--loss   { background: rgba(226, 116, 116, 0.12); }
[data-theme="dark"] .result--pending{ background: rgba(154, 145, 125, 0.18); }
[data-theme="dark"] .layers__item:hover { background: rgba(194, 87, 112, 0.05); }

/* The body grain — keep it, but pull alpha down so it reads
   on the deep page without flickering. */
[data-theme="dark"] body::before { opacity: 0.06; }

/* ============================================================
   EDITION TOGGLE — fixed bottom-right, the only switch.
   ------------------------------------------------------------
   Stylized sun ↔ moon, almanac-style: a hairline-bordered disc
   with rays radiating out (sun) that retract as a lunar mask
   slides in (moon). The whole icon counter-rotates 90° on swap
   so the change reads as crafted, not as a checkbox flip.
   ============================================================ */

.edition-toggle {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 90;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--oxblood);
  background: var(--paper);
  color: var(--oxblood);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 0 var(--paper-deep) inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background 0.45s cubic-bezier(.2,0,0,1),
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.6s cubic-bezier(.2,0,0,1);
}
.edition-toggle:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.edition-toggle:active {
  transform: scale(0.96);
}
.edition-toggle:focus-visible {
  outline: 1px solid var(--oxblood);
  outline-offset: 4px;
}

/* The icon: rays + body + crescent mask, all transformed by [data-theme]. */
.edition-toggle__icon {
  width: 28px;
  height: 28px;
  overflow: visible;
}
.edition-toggle__rays line {
  transform-origin: 16px 16px;
  transform-box: view-box;
  transition:
    transform 0.55s cubic-bezier(.2,0,0,1),
    opacity 0.4s ease;
}
.edition-toggle__body {
  transition: r 0.45s cubic-bezier(.2,0,0,1);
}
.edition-toggle__mask {
  /* The crescent overlay. Its fill MUST match the button background
     so the part of the mask outside the body silently disappears
     into the surface, leaving only the visible crescent of body. */
  fill: var(--paper);
  transform-origin: 20px 12px;
  transform-box: view-box;
  transform: scale(0);
  transition:
    transform 0.55s cubic-bezier(.2,0,0,1),
    fill 0.45s cubic-bezier(.2,0,0,1);
}

/* MORNING (light, default): full sun — body + radiating rays, no mask */
:root .edition-toggle__rays line { opacity: 1; transform: scale(1); }

/* EVENING: mask scales in (crescent appears), rays retract to nothing */
[data-theme="dark"] .edition-toggle {
  background: var(--paper-deep);
}
[data-theme="dark"] .edition-toggle__rays line {
  transform: scale(0);
  opacity: 0;
}
[data-theme="dark"] .edition-toggle__mask {
  fill: var(--paper-deep);
  transform: scale(1);
}

/* Per-ray retraction stagger — gives the morph a printed-press
   feel rather than a uniform fade. */
.edition-toggle__rays line:nth-child(1) { transition-delay: 0.00s; }
.edition-toggle__rays line:nth-child(2) { transition-delay: 0.04s; }
.edition-toggle__rays line:nth-child(3) { transition-delay: 0.02s; }
.edition-toggle__rays line:nth-child(4) { transition-delay: 0.06s; }
.edition-toggle__rays line:nth-child(5) { transition-delay: 0.03s; }
.edition-toggle__rays line:nth-child(6) { transition-delay: 0.07s; }
.edition-toggle__rays line:nth-child(7) { transition-delay: 0.05s; }
.edition-toggle__rays line:nth-child(8) { transition-delay: 0.08s; }

/* Mobile: pull in slightly from the edges to clear safe areas */
@media (max-width: 920px) {
  .edition-toggle {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .edition-toggle,
  .edition-toggle__icon,
  .edition-toggle__rays line,
  .edition-toggle__mask,
  body, .masthead, .ticker, .colophon, .tier, .signal,
  .knowledge, .manifesto, .layers__item, .table tbody td, .table thead th {
    transition: none !important;
  }
}

/* ============================================================
   MOBILE AUDIT — narrow-viewport polish (Stage 5)
   ------------------------------------------------------------
   The base @media (max-width: 920px) blocks above handle the
   tablet-down stacking. This block tightens the iPhone-width
   read (≤480px): tables get horizontal scroll instead of column
   smash, the pricing heading drops a notch so its line break
   lands on the right word, and the floating toggle pulls in
   slightly to clear the safe-area inset.
   ============================================================ */

@media (max-width: 480px) {
  /* TABLES — preserve column structure by allowing horizontal scroll
     within the table wrapper. .table-wrap already has overflow-x: auto;
     a min-width on the table itself makes the wrap actually engage. */
  .table { min-width: 520px; }
  .table--record { min-width: 600px; }
  .table-wrap {
    -webkit-overflow-scrolling: touch;
    /* faint right-edge fade as a "more here" cue */
    background: linear-gradient(to left, var(--paper) 0, transparent 24px) right / 24px 100% no-repeat;
  }
  [data-theme="dark"] .table-wrap {
    background: linear-gradient(to left, var(--paper) 0, transparent 24px) right / 24px 100% no-repeat;
  }

  /* PRICING heading — clamp ceiling so the line break lands cleanly */
  .pricing__heading {
    font-size: clamp(32px, 9vw, 40px);
    line-height: 1.05;
  }

  /* Floating sun/moon — pull tighter on tiny screens to clear iOS safe area */
  .edition-toggle {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: max(16px, env(safe-area-inset-right));
  }
}