/* ═══════════════════════════════════════════════════════════
   GREEN POINT COMPUTE CO-OP · shared stylesheet
   ─ archival transmission · paper · forest ink · terminal green
   ═══════════════════════════════════════════════════════════ */

:root {
  --paper:        #efe9db;
  --paper-warm:   #f5eeda;
  --paper-cool:   #e9e2d1;
  --paper-2:      #e4dcc8;
  --paper-3:      #d8cfb8;
  --ink:          #14140f;
  --ink-soft:     #4a463c;
  --ink-fade:     #807865;
  --rule:         #bcb39e;
  --rule-hair:    #d6cdb9;
  --green:        #173a26;
  --green-mid:    #2a6a40;
  --green-bright: #3a8a56;
  --green-glow:   #5bbe7f;
  --signal:       #b73a2c;
  --amber:        #c98f2c;
  --highlight:    rgba(241, 228, 90, 0.35);

  --font-serif:   "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", "Menlo", monospace;

  --maxw:         1280px;
  --gutter:       clamp(16px, 4vw, 48px);
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  background-image:
    radial-gradient(ellipse 70% 45% at 50% -5%, rgba(255, 244, 210, 0.45), transparent 60%),
    radial-gradient(ellipse 55% 40% at 50% 105%, rgba(120, 95, 60, 0.08), transparent 60%),
    linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 40%, var(--paper-cool) 100%);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  min-height: 100vh;
  min-height: 100svh;
  font-feature-settings: "kern", "liga", "dlig", "onum", "ss01";
  position: relative;
  overflow-x: hidden;
  /* flex column so footer sits at viewport bottom when content is short */
  display: flex;
  flex-direction: column;
}
body > .sheet {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
/* push footer to bottom; .trail-end sits immediately after */
.sheet > .trail { margin-top: auto; }

/* ─── paper grain ───────────────────────────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 0.36 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* vignette & soft corner burn */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.14) 100%),
    radial-gradient(ellipse 30% 20% at 0% 0%, rgba(120, 80, 40, 0.08), transparent),
    radial-gradient(ellipse 30% 20% at 100% 100%, rgba(120, 80, 40, 0.08), transparent);
}

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

/* ─── transmission sweep (one-shot on load) ────── */
.scan-sweep {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 1px;
  pointer-events: none;
  z-index: 120;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(47, 122, 74, 0.35) 25%,
    rgba(91, 190, 127, 0.85) 50%,
    rgba(47, 122, 74, 0.35) 75%,
    transparent 100%);
  box-shadow: 0 0 18px 1px rgba(91, 190, 127, 0.35);
  opacity: 0;
  animation: sweep 2.6s cubic-bezier(0.4, 0, 0.3, 1) 0.35s forwards;
}
@keyframes sweep {
  0%   { transform: translateY(0vh);   opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scan-sweep { display: none; }
}

/* faint centerfold line (paper seam, desktop only) */
@media (min-width: 1100px) {
  body .fold {
    position: fixed;
    top: 0; bottom: 0;
    left: 50%;
    width: 1px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.035) 20%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.035) 80%, transparent);
  }
}

/* ─── flow field: WebGL shader backdrop ──────── */
#flow, #structure, #swarm {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  pointer-events: none;
  display: block;
}
#flow      { z-index: 0; }
#structure { z-index: 1; opacity: 0.82; }
#swarm     { z-index: 2; opacity: 0.78; }

/* subtle camera sway — structures breathe as if viewed from a slowly drifting vantage */
@keyframes sway {
  0%, 100% { transform: translate(-3px, -1px) rotate(-0.32deg); }
  50%      { transform: translate( 3px,  1px) rotate( 0.32deg); }
}
#structure, #swarm {
  animation: sway 88s ease-in-out infinite;
  will-change: transform;
  transform-origin: 50% 45%;
}
@media (prefers-reduced-motion: reduce) {
  #structure, #swarm { animation: none; }
}

/* radial mask: fade growth near the hero title so type always reads */
#structure, #swarm {
  -webkit-mask-image: radial-gradient(
    ellipse 32% 24% at 50% 38%,
    transparent 0%,
    rgba(0,0,0,0.35) 55%,
    black 95%
  );
          mask-image: radial-gradient(
    ellipse 32% 24% at 50% 38%,
    transparent 0%,
    rgba(0,0,0,0.35) 55%,
    black 95%
  );
}
@media (max-width: 720px) {
  #structure, #swarm {
    -webkit-mask-image: radial-gradient(
      ellipse 46% 32% at 50% 34%,
      transparent 0%,
      rgba(0,0,0,0.35) 55%,
      black 95%
    );
            mask-image: radial-gradient(
      ellipse 46% 32% at 50% 34%,
      transparent 0%,
      rgba(0,0,0,0.35) 55%,
      black 95%
    );
  }
}
.cover-page .sheet { position: relative; }
.cover-page .cover,
.cover-page .batch,
.cover-page .meta-strip,
.cover-page .trail { position: relative; z-index: 2; }

/* ─── HUD annotations (Culture-style Mind labels) ── */
.hud-layer {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.hud {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  animation: hud-in 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: 1.4s;
}
.hud .lead {
  width: 18px;
  height: 1px;
  background: var(--green-mid);
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  translate: 0 -1px;
}
.hud .tag {
  color: var(--green-mid);
  font-weight: 500;
  margin-right: 8px;
}
.hud .val { color: var(--ink); }
.hud .mute { color: var(--ink-fade); margin-left: 8px; }
.hud .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 6px rgba(91, 190, 127, 0.9);
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  translate: 0 -1px;
  animation: pulse-green 2s ease-in-out infinite;
}
.hud svg.connector {
  display: block;
  color: var(--green-mid);
  opacity: 0.8;
}
.hud .block {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
}
.hud .small {
  font-size: 8.5px;
  letter-spacing: 0.24em;
  color: var(--ink-fade);
  margin-top: 3px;
  display: block;
}

@keyframes hud-in {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 0.92; transform: translateY(0); }
}

/* positions */
.hud-a {
  top: 26%;
  right: clamp(16px, 5vw, 52px);
  width: 190px;
  text-align: right;
  animation-delay: 1.5s;
}
.hud-a .connector {
  margin-left: auto;
  margin-bottom: 6px;
}
.hud-b {
  bottom: 32%;
  left: clamp(16px, 5vw, 52px);
  width: 220px;
}
.hud-b .connector {
  margin-bottom: 6px;
}
.hud-c {
  top: 42%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  animation-delay: 1.9s;
}
.hud-c .scale-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 8.5px;
  letter-spacing: 0.24em;
  color: var(--ink-fade);
}
.hud-c .scale-bar .bar {
  width: 48px; height: 1px;
  background: var(--ink-fade);
  position: relative;
}
.hud-c .scale-bar .bar::before,
.hud-c .scale-bar .bar::after {
  content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--ink-fade);
}
.hud-c .scale-bar .bar::before { left: 0; }
.hud-c .scale-bar .bar::after { right: 0; }

@media (max-width: 900px) {
  .hud-a, .hud-b { display: none; }
  .hud-c { top: 58%; font-size: 8.5px; }
  .hud-c .scale-bar .bar { width: 36px; }
}

/* ─── shared sheet layout ──────────────────────── */
.sheet {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px var(--gutter) 48px;
  position: relative;
  z-index: 1;
}

/* ═══ META STRIP ═══════════════════════════════ */
.meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.meta-strip .issue { color: var(--ink); font-weight: 500; }
.meta-strip .sep { color: var(--ink-fade); opacity: 0.7; }

/* ─── BATCH IDENTIFIER: inverted forest-green chip, Instrument Serif ─────
   Anatomy:  [ BATCH 001 ]  — dark-green block, paper text set in the
   same display serif as "Training a Community World Model".
   One clean unit; the typeface ties the chip back to the title. */
.batch-id {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  padding: 0.3em 0.68em 0.36em;
  background: var(--green);
  color: var(--paper);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.batch-id__label {
  color: inherit;
  font-weight: 400;
}
.batch-id__num {
  color: inherit;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* ─ meta strip: compact chip at the strip's cap-height ─ */
.meta-strip .batch-id {
  font-size: 12px;
  padding: 0.28em 0.55em 0.32em;
  letter-spacing: 0.04em;
}

/* ─ dispatch kicker: prominent chip — scales with the kicker line ─ */
.dispatch-kicker .batch-id {
  font-size: clamp(17px, 1.9vw, 22px);
  padding: 0.38em 0.72em 0.44em;
  letter-spacing: 0.05em;
}
.meta-strip .status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.meta-strip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 0 0 rgba(91, 190, 127, 0.6);
  animation: pulse-green 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(183, 58, 44, 0.5); }
  50%      { opacity: 0.4; transform: scale(0.78); box-shadow: 0 0 0 6px rgba(183, 58, 44, 0); }
}

/* ═══ COVER PAGE ═══════════════════════════════ */
.cover-page .sheet {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding-bottom: 32px;
}

.cover {
  align-self: center;
  padding: clamp(48px, 10vh, 140px) 0 clamp(40px, 8vh, 80px);
  text-align: center;
  position: relative;
}

.kicker {
  font-family: var(--font-mono);
  font-size: clamp(9.5px, 1vw, 11px);
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: clamp(24px, 5vh, 48px);
}
.kicker::before, .kicker::after {
  content: "";
  display: inline-block;
  width: clamp(24px, 5vw, 56px);
  height: 1px;
  background: var(--ink-fade);
  vertical-align: middle;
  margin: 0 14px 3px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.022em;
  font-size: clamp(64px, 14.5vw, 220px);
  text-rendering: geometricPrecision;
  font-feature-settings: "kern", "liga", "dlig", "ss01", "onum";
}
.wordmark .word1 {
  display: block;
  color: var(--ink);
}
.wordmark .word2 {
  display: block;
  font-style: italic;
  color: var(--green);
  font-size: 0.74em;
  letter-spacing: -0.018em;
  margin-top: 0.02em;
}
.wordmark .word2 .stop {
  display: inline-block;
  width: 0.24em;
  height: 0.24em;
  border-radius: 50%;
  background: var(--green-bright);
  margin-left: 0.02em;
  vertical-align: baseline;
  translate: 0 -0.05em;
  animation: stop-pulse 2.4s ease-in-out infinite;
}
@keyframes stop-pulse {
  0%, 100% { transform: scale(1); opacity: 1; background: var(--green-bright); }
  50%      { transform: scale(1.25); opacity: 0.72; background: var(--green-glow); }
}
.wordmark .cursor {
  display: inline-block;
  width: 0.32em;
  height: 0.64em;
  background: var(--green);
  vertical-align: baseline;
  margin-left: 0.12em;
  translate: 0 -0.04em;
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 2.6vw, 30px);
  color: var(--ink);
  letter-spacing: 0.005em;
  margin-top: clamp(24px, 5vh, 40px);
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.3;
}
.tagline .lq, .tagline .rq { color: var(--green); }

.tagline-link {
  color: var(--green);
  text-decoration: none;
  font-style: inherit;
  border-bottom: 1px solid var(--green-mid);
  padding-bottom: 0.04em;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.tagline-link:hover { color: var(--green-bright); border-color: var(--green-bright); }
.tagline-link .arrow {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.78em;
  color: var(--green-mid);
  display: inline-block;
  transition: transform 0.2s ease-out;
  vertical-align: 0.08em;
}
.tagline-link:hover .arrow { transform: translate(2px, -2px); }

/* cover-page context paragraph (below tagline, above batch CTA) */
.cover-context {
  max-width: 58ch;
  margin: clamp(36px, 6vh, 56px) auto 0;
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.55vw, 17px);
  line-height: 1.65;
  color: var(--ink-soft);
}
.cover-context a.ilink {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-fade);
  transition: color 0.15s, text-decoration-color 0.15s;
}
.cover-context a.ilink:hover { color: var(--green-bright); text-decoration-color: var(--green-bright); }

/* secondary vision link below the batch CTA */
.cover-aside {
  margin: clamp(22px, 3.5vh, 36px) auto 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cover-aside a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.cover-aside a:hover { color: var(--green-mid); border-color: var(--green-mid); }
.cover-aside .arrow { font-family: var(--font-mono); transition: transform 0.25s; display: inline-block; }
.cover-aside a:hover .arrow { transform: translateX(3px); }

.seal-wrap {
  margin-top: clamp(32px, 7vh, 64px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.seal-wrap .ornament-rule {
  flex: 0 1 120px;
  height: 1px;
  background: var(--ink-fade);
  opacity: 0.55;
}
.seal {
  width: clamp(62px, 8vw, 88px);
  height: clamp(62px, 8vw, 88px);
  color: var(--ink);
  overflow: visible;
}
.seal .tess-inner {
  transform-origin: 40px 40px;
  transform-box: fill-box;
  animation: tess-turn 18s ease-in-out infinite;
}
.seal .tess-outer {
  transform-origin: 40px 40px;
  transform-box: fill-box;
  animation: tess-breathe 12s ease-in-out infinite;
}
@keyframes tess-turn {
  0%   { transform: rotate(0deg)   scale(1.00); }
  50%  { transform: rotate(45deg)  scale(0.82); }
  100% { transform: rotate(0deg)   scale(1.00); }
}
@keyframes tess-breathe {
  0%, 100% { transform: rotate(0deg); opacity: 1; }
  50%      { transform: rotate(-1.2deg); opacity: 0.92; }
}
@media (prefers-reduced-motion: reduce) {
  .seal .tess-inner,
  .seal .tess-outer { animation: none; }
}

/* ═══ BATCH CARD (COVER) ═══════════════════════ */
.batch {
  display: block;
  text-decoration: none;
  color: inherit;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding: clamp(24px, 4vh, 40px) clamp(8px, 2vw, 24px);
  margin: clamp(24px, 5vh, 48px) 0 clamp(24px, 5vh, 40px);
  position: relative;
  transition: background 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              padding 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  cursor: pointer;
}
.batch::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 3px;
  height: 1px;
  background: var(--ink);
  opacity: 0.35;
}
.batch::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 3px;
  height: 1px;
  background: var(--ink);
  opacity: 0.35;
}
.batch:hover {
  background: linear-gradient(180deg, rgba(243, 232, 94, 0.10), rgba(91, 190, 127, 0.05));
}

.batch-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: clamp(20px, 3vh, 32px);
}
.batch-meta .num {
  color: var(--ink);
  font-weight: 500;
  border: 1px solid var(--ink);
  padding: 3px 9px 2px;
  letter-spacing: 0.12em;
}
.batch-meta .state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.batch-meta .led {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 8px var(--green-glow);
  animation: pulse-green 2s ease-in-out infinite;
}
@keyframes pulse-green {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.88); }
}
.batch-meta .seek { color: var(--ink-soft); }
.batch-meta .date { margin-left: auto; color: var(--ink-soft); }
.batch-meta .sep { color: var(--ink-fade); opacity: 0.7; }

.batch-kicker {
  font-family: var(--font-mono);
  font-size: clamp(10.5px, 1.1vw, 12px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--green-mid);
  margin-bottom: 18px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.batch-kicker::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--green-mid);
  translate: 0 -4px;
}

.batch-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 8.2vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: clamp(22px, 3.5vh, 40px);
  max-width: 18ch;
  font-feature-settings: "kern", "liga", "dlig", "swsh", "ss01";
}
.batch-title em {
  font-style: italic;
  color: var(--green);
  position: relative;
}
.batch-title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -0.02em;
  height: 1px;
  background: var(--green-bright);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity 0.45s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.batch:hover .batch-title em::after {
  opacity: 1;
  transform: scaleX(1);
}

.batch-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.batch-foot .dek {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 40ch;
  font-style: italic;
}
.batch-foot .cta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}
.batch-foot .cta .arrow {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.batch:hover .batch-foot .cta .arrow { transform: translateX(6px); }
.batch:hover .batch-foot .cta { color: var(--green-mid); border-color: var(--green-mid); }

/* ═══ FOOTER / TRAIL (shared) ══════════════════ */
.trail {
  margin-top: auto;
  padding-top: 24px;
  border-top: 3px double var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.trail-end {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.36em;
  color: var(--ink-fade);
  text-transform: uppercase;
  padding: 22px 0 0;
}
.trail-end::before, .trail-end::after {
  content: "·  ·  ·";
  margin: 0 14px;
}

/* ═══ DISPATCH (DONATION PAGE) ═════════════════ */
.dispatch-page .sheet { padding-bottom: 120px; }

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.top-bar .brand {
  display: inline-flex;
  align-items: baseline;
  color: var(--ink);
}
.top-bar .brand-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: none;
  transition: color 0.2s;
}
.top-bar .brand-1 { color: var(--ink); }
.top-bar .brand-2 {
  font-style: italic;
  color: var(--green);
  display: inline-flex;
  align-items: baseline;
}
.top-bar .brand-stop {
  display: inline-block;
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
  background: var(--green-bright);
  margin-left: 0.06em;
  align-self: flex-end;
  margin-bottom: 0.05em;
  animation: stop-pulse 2.4s ease-in-out infinite;
}
.top-bar .brand-mark:hover .brand-1 { color: var(--green); }
.top-bar .brand-mark:hover .brand-stop { background: var(--green-glow); }
.top-bar .back {
  color: var(--ink-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color 0.15s, border-color 0.15s;
}
.top-bar .back:hover { color: var(--green-mid); border-color: var(--green-mid); }
.top-bar .back .arrow { display: inline-block; transition: transform 0.3s; }
.top-bar .back:hover .arrow { transform: translateX(-4px); }
.top-bar .mini-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
}
.top-bar .mini-meta .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 0 0 rgba(91, 190, 127, 0.6);
  animation: pulse-green 1.8s ease-in-out infinite;
}

.dispatch-masthead {
  padding: clamp(52px, 9vh, 112px) 0 clamp(44px, 7vh, 80px);
  border-bottom: 3px double var(--ink);
  position: relative;
}

.dispatch-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: clamp(18px, 3vh, 28px);
}
.dispatch-meta .num {
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 3px 9px 2px;
  letter-spacing: 0.12em;
}
.dispatch-meta .state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.dispatch-meta .led {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 8px var(--green-glow);
  animation: pulse-green 2s ease-in-out infinite;
}
.dispatch-meta .date { margin-left: auto; }

/* "Batch N°01" blink: slow alternation between dark-green highlight
   and plain-text state. Subtle sense of "happening now." */
.batch-blink {
  display: inline-block;
  padding: 0.14em 0.38em 0.16em;
  margin-right: 0.08em;
  animation: batch-blink 6.5s ease-in-out infinite;
}
@keyframes batch-blink {
  0%, 38% {
    background: var(--green);
    color: var(--paper);
  }
  55%, 92% {
    background: transparent;
    color: inherit;
  }
  100% {
    background: var(--green);
    color: var(--paper);
  }
}
@media (prefers-reduced-motion: reduce) {
  .batch-blink {
    animation: none;
    background: var(--green);
    color: var(--paper);
  }
}

.dispatch-kicker {
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: 0.02em;
  color: var(--green);
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-weight: 500;
}
.dispatch-kicker::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--green);
  translate: 0 -5px;
}
.dispatch-kicker .batch-id__num { font-size: 1.15em; }

.dispatch-byline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 19px);
  color: var(--ink-soft);
  margin-top: clamp(10px, 1.8vh, 20px);
  letter-spacing: 0.005em;
}

.dispatch-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 8.4vw, 138px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin-bottom: clamp(28px, 4vh, 44px);
  max-width: 18ch;
  font-feature-settings: "kern", "liga", "dlig", "swsh", "ss01";
}
.dispatch-title em {
  font-style: italic;
  color: var(--paper);
  background: var(--green);
  padding: 0 0.14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.dispatch-dek {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 26px);
  color: var(--ink-soft);
  max-width: 52ch;
  line-height: 1.35;
}

.fleuron {
  text-align: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--green-mid);
  margin: clamp(32px, 6vh, 64px) 0;
  letter-spacing: 0.4em;
}
.fleuron::before, .fleuron::after {
  content: "";
  display: inline-block;
  width: clamp(40px, 12vw, 140px);
  height: 1px;
  background: var(--ink-fade);
  vertical-align: middle;
  margin: 0 18px 4px;
  opacity: 0.55;
}

/* ─── main content grid ──────────────────────── */
.dispatch-body {
  margin-top: clamp(36px, 6vh, 64px);
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.dispatch-body section {
  margin-bottom: clamp(48px, 6vh, 72px);
  position: relative;
}

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.sec-num { color: var(--green-bright); font-weight: 600; letter-spacing: 0.15em; }
.sec-label { color: var(--ink); }
.sec-dek {
  margin-left: auto;
  font-style: italic;
  font-family: var(--font-serif);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-fade);
  font-size: 13px;
}

.dispatch-body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.0;
  letter-spacing: -0.012em;
  margin-bottom: 22px;
  max-width: 22ch;
}
.dispatch-body h2 em { color: var(--green); font-style: italic; }

.dispatch-body p {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.68;
  margin-bottom: 18px;
  max-width: 62ch;
}
.dispatch-body p.lede { font-size: 19px; line-height: 1.55; }

/* The research question — isolated beat after the alignment paragraph. */
.dispatch-body p.research-question {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(40px, 6vh, 72px);
  margin-bottom: clamp(40px, 6vh, 72px);
  text-align: center;
}

.dropcap::first-letter {
  font-family: var(--font-display);
  font-size: 5em;
  float: left;
  line-height: 0.82;
  margin: 8px 12px -4px 0;
  color: var(--green);
  font-style: italic;
}

.placeholder {
  background: var(--highlight);
  padding: 0 3px;
  border-bottom: 1px dashed var(--ink-fade);
  font-style: italic;
  color: var(--ink-soft);
}

a.ilink {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-fade);
  transition: color 0.15s, text-decoration-color 0.15s;
}
a.ilink:hover { color: var(--green-bright); text-decoration-color: var(--green-bright); }

blockquote.epigraph {
  border-left: 2px solid var(--green);
  padding: 4px 0 4px 20px;
  margin: 30px 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.4;
  color: var(--ink);
  max-width: 50ch;
}
blockquote.epigraph cite {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-fade);
}

/* ─── sidebar rail ──────────────────────────── */
aside.rail {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  border-left: 1px solid var(--rule);
  padding-left: 26px;
  position: sticky;
  top: 24px;
}
.rail .block { margin-bottom: 28px; }
.rail h3 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
  padding-bottom: 7px;
  border-bottom: 1px dashed var(--rule);
  display: flex;
  align-items: center;
  gap: 9px;
}
.rail h3::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--green-bright);
  display: inline-block;
}
.rail p { font-size: 11.5px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 8px; }
.rail .kv {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 3px 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.rail .kv dt {
  color: var(--ink-fade);
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  align-self: center;
}
.rail .kv dd { color: var(--ink); }
.rail ul.dispatches { list-style: none; padding: 0; margin: 0; }
.rail .dispatches li {
  padding: 9px 0;
  border-bottom: 1px dashed var(--rule);
  font-size: 11px;
  line-height: 1.5;
}
.rail .dispatches li:last-child { border-bottom: none; }
.rail .dispatches time {
  display: block;
  color: var(--ink-fade);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.rail .dispatches .title { color: var(--ink); }

.rail .tower-svg {
  display: block;
  margin: 0 auto 14px;
  width: 54px;
  height: auto;
  color: var(--green);
  opacity: 0.9;
}

/* ─── ALLOCATION · TYPOGRAPHIC TRIPTYCH ──────────
   Three editorial columns with giant italic ⅓ markers,
   hair rules in green, italic serif recipient names,
   serif descriptors. No pie chart. Specimen-card feel. */
.allocation {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(28px, 3.4vw, 52px);
  margin: clamp(36px, 5vh, 56px) 0 clamp(12px, 2vh, 20px);
  align-items: start;
}
.alloc-col {
  display: flex;
  flex-direction: column;
  padding-left: clamp(16px, 1.6vw, 24px);
  border-left: 1px solid var(--rule);
}
.alloc-col:first-child {
  padding-left: 0;
  border-left: none;
}
.alloc-frac {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(86px, 10vw, 132px);
  line-height: 0.85;
  color: var(--green);
  letter-spacing: -0.02em;
  font-feature-settings: "frac", "onum";
  margin-bottom: 14px;
}
.alloc-rule {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--green-mid);
  margin: 0 0 14px;
}
.alloc-name {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 32px);
  color: var(--ink);
  line-height: 1;
  margin-bottom: 12px;
}
.alloc-desc {
  display: block;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .allocation { grid-template-columns: 1fr; gap: 36px; }
  .alloc-col {
    border-left: none;
    padding-left: 0;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
  }
  .alloc-col:first-child { padding-top: 0; border-top: none; }
  .alloc-frac { font-size: clamp(72px, 18vw, 104px); }
}

/* ─── MASTHEAD AURA · WebGL world-model ambient ──
   Fills the empty right side of the dispatch masthead
   with a slow fBm orb and contour isolines — evokes
   a fuzzy "world" being considered, in paper+green. */
.dispatch-masthead { position: relative; overflow: hidden; }
.dispatch-masthead > *:not(.masthead-aura) { position: relative; z-index: 1; }
.masthead-aura {
  position: absolute;
  top: -8%;
  right: -4%;
  width: clamp(340px, 56%, 680px);
  height: 116%;
  pointer-events: none;
  z-index: 0;
  display: block;
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 62% 50%, black 0%, black 42%, transparent 92%);
          mask-image: radial-gradient(ellipse 58% 62% at 62% 50%, black 0%, black 42%, transparent 92%);
  opacity: 0.9;
}
@media (max-width: 900px) {
  .masthead-aura { display: none; }
}

/* ─── TREASURY METER ─────────────────────────────
   Milestone-station progress bar. Edits to data-raised
   update the bar, %, remaining, and lit stations. */
.treasury {
  border: 1.5px solid var(--ink);
  background: var(--paper);
  padding: clamp(22px, 3.2vw, 32px) clamp(22px, 3.2vw, 36px) clamp(22px, 3vw, 28px);
  margin: clamp(24px, 4vh, 36px) 0 clamp(30px, 5vh, 44px);
  box-shadow: 5px 5px 0 var(--ink);
  position: relative;
}

/* head: label + last-update line */
.treasury-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: clamp(20px, 3vh, 28px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-fade);
}
.treasury-label { color: var(--ink); font-weight: 500; }

/* hero: big raised number + small target block */
.treasury-hero {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: clamp(44px, 7vh, 68px);
}
.treasury-hero-main { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.treasury-raised {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(46px, 7.5vw, 88px);
  line-height: 0.9;
  color: var(--green);
  letter-spacing: -0.012em;
  font-feature-settings: "tnum";
}
.treasury-raised-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.treasury-hero-target { text-align: right; }
.treasury-target-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin-bottom: 4px;
}
.treasury-target-value {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 500;
  color: var(--ink);
  font-feature-settings: "tnum";
  letter-spacing: 0.01em;
}

/* track: paper channel, green fill, milestone stations */
.treasury-track {
  position: relative;
  height: 10px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 5px,
      rgba(20, 20, 15, 0.04) 5px 6px),
    var(--paper-3);
  border: 1px solid var(--ink);
  margin: 0 4px 28px;
}
/* larger variant — hero-sized bar for the simplified meter.
   Unlit minor ticks every 5% (hairline ink) + existing coarse hatching. */
.treasury-track--big {
  height: 38px;
  margin: clamp(32px, 4vh, 44px) 4px clamp(70px, 8.5vh, 86px);
  border-width: 2px;
  background:
    repeating-linear-gradient(90deg,
      rgba(20, 20, 15, 0.14) 0 1px,
      transparent 1px 5%),
    repeating-linear-gradient(90deg,
      transparent 0 5px,
      rgba(20, 20, 15, 0.04) 5px 6px),
    var(--paper-3);
}
.treasury-track--big .station .amt {
  top: -26px;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.treasury-track--big .station-end .amt {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 38px);
  color: var(--green);
  letter-spacing: 0.01em;
  top: auto; bottom: -52px;
  right: 0; left: auto; transform: none;
  line-height: 1;
}
.treasury-track--big .station-end .tick {
  background: var(--ink);
  width: 2px;
}
.treasury-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background:
    /* lit minor ticks — paper hairlines inside the filled region */
    repeating-linear-gradient(90deg,
      rgba(239, 233, 219, 0.32) 0 1px,
      transparent 1px 5%),
    /* diagonal sheen */
    repeating-linear-gradient(135deg,
      transparent 0 6px,
      rgba(255, 255, 255, 0.06) 6px 7px),
    var(--green-mid);
  width: 0;
  transition: width 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
/* ink-bleed: faint green wick trailing just past the leading edge */
.treasury-fill::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  width: 56px;
  background: linear-gradient(90deg,
    rgba(91, 190, 127, 0.34) 0%,
    rgba(91, 190, 127, 0.08) 55%,
    transparent 100%);
  filter: blur(4px);
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0;
  animation: treasury-bleed-in 0.6s ease-out 1.9s forwards;
}
@keyframes treasury-bleed-in {
  to { opacity: 1; }
}

/* stations: tick + amt (above) + lbl (below) */
.station {
  position: absolute;
  left: var(--at);
  top: -5px;
  bottom: -5px;
  width: 0;
  pointer-events: none;
}
.station .tick {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: background 0.4s, box-shadow 0.4s;
}
/* engineering cross-hairs: small perpendicular bars at top and bottom */
.station .tick::before,
.station .tick::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 7px;
  height: 1px;
  background: currentColor;
  background: inherit;
  transform: translateX(-50%);
  transition: background 0.4s, box-shadow 0.4s;
}
.station .tick::before { top: 0; }
.station .tick::after  { bottom: 0; }
.station .amt {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.4s 1.4s;
}
.station .lbl {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-fade);
  white-space: nowrap;
  transition: color 0.4s 1.4s;
}
/* right-edge station: anchor to right so $100k / Released don't overflow */
.station[data-at="100"] .amt,
.station[data-at="100"] .lbl {
  left: auto; right: 0; transform: none;
}
/* lit-up state (final resting state after fill passes) */
.station.passed .tick {
  background: var(--green-bright);
  box-shadow: 0 0 4px rgba(91, 190, 127, 0.4);
}
.station.passed .tick::before,
.station.passed .tick::after {
  background: var(--green-bright);
}
.station.passed .amt { color: var(--green); }
.station.passed .lbl { color: var(--green-mid); }

/* firing state — the moment the fill crosses a station (transient ~420ms) */
.station.firing .tick {
  background: var(--green-glow);
  box-shadow: 0 0 10px rgba(91, 190, 127, 0.95), 0 0 18px rgba(91, 190, 127, 0.5);
  transition: none;
}
.station.firing .tick::before,
.station.firing .tick::after {
  background: var(--green-glow);
  box-shadow: 0 0 4px rgba(91, 190, 127, 0.8);
}
.station.firing .amt {
  color: var(--green-glow);
  text-shadow: 0 0 6px rgba(91, 190, 127, 0.55);
  animation: station-pop 0.42s ease-out;
  transition: none;
}
@keyframes station-pop {
  0%   { transform: translateX(-50%) scale(1); }
  35%  { transform: translateX(-50%) translateY(-2px) scale(1.12); }
  100% { transform: translateX(-50%) scale(1); }
}
.station.firing[data-at="100"] .amt {
  animation: station-pop-end 0.42s ease-out;
}
@keyframes station-pop-end {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-2px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

/* foot: percent · contributors · remaining */
.treasury-foot {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.treasury-foot .sep { color: var(--ink-fade); }
.treasury-foot [data-pct],
.treasury-foot [data-contrib] { color: var(--ink); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .treasury-fill { transition: none; }
}

/* ─── CONTRIBUTE PANELS ──────────────────────── */
.panel {
  border: 1.5px solid var(--ink);
  background: var(--paper-warm);
  margin-bottom: 28px;
  position: relative;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.panel:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.panel-head .letter {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  color: var(--green-glow);
  letter-spacing: 0;
  line-height: 1;
}
.panel-head .hline {
  flex: 1;
  height: 1px;
  background: var(--paper);
  opacity: 0.25;
}
.panel-head .tag {
  background: var(--green-bright);
  color: var(--paper);
  padding: 3px 10px;
  font-size: 9.5px;
  letter-spacing: 0.22em;
}

/* ── Panel: pending / not-yet-live ── */
.panel--pending {
  position: relative;
  opacity: 0.72;
  box-shadow: 3px 3px 0 rgba(20, 20, 15, 0.35);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 9px,
      rgba(20, 20, 15, 0.055) 9px 11px),
    var(--paper-2);
  filter: grayscale(0.6);
}
.panel--pending:hover { transform: none; }
.panel--pending .panel-head { background: var(--ink-soft); color: var(--paper); }
.panel--pending .panel-head .letter { color: var(--paper); }
.panel--pending .panel-head .hline { background: rgba(239, 233, 219, 0.28); }
.panel--pending .tag--pending {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(239, 233, 219, 0.55);
  letter-spacing: 0.22em;
}
.panel--pending .panel-body { color: var(--ink-soft); }
.panel--pending .btn-primary[disabled] {
  cursor: not-allowed;
  background: transparent;
  color: var(--ink-soft);
  border: 1.5px dashed var(--ink-fade);
  pointer-events: none;
}
.panel--pending .btn-primary[disabled]::before { background: var(--ink-fade); }

.panel-body { padding: 26px 24px 26px; }

/* Small note appended inside a panel body (e.g., tax status) */
.tax-note {
  margin-top: 20px;
  padding: 12px 14px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule-hair);
  font-style: italic;
}
.tax-note strong { color: var(--ink); font-weight: 600; font-style: normal; }
.panel-body .lead {
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.5;
  margin-bottom: 20px;
  color: var(--ink-soft);
  max-width: 58ch;
}

.address-field {
  display: block;
  width: 100%;
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 14px 18px;
  margin-bottom: 14px;
  position: relative;
  cursor: copy;
  transition: background 0.18s;
  text-align: left;
  font: inherit;
  color: inherit;
}
.address-field:hover { background: #fdf9ec; }
.address-field:active { background: var(--paper-3); }
.address-field .field-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin-bottom: 6px;
}
.address-field .field-label .hint { color: var(--green-bright); font-weight: 500; }
.address-field .field-value {
  font-family: var(--font-mono);
  font-size: clamp(12.5px, 2vw, 15.5px);
  font-weight: 500;
  word-break: break-all;
  line-height: 1.45;
  color: var(--ink);
}

/* ── pending address (e.g., Zcash — not live yet) ── */
.address-field--pending {
  cursor: not-allowed;
  opacity: 0.58;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 8px,
      rgba(20, 20, 15, 0.055) 8px 10px),
    var(--paper-2);
  border-color: var(--ink-fade);
  filter: grayscale(0.45);
}
.address-field--pending:hover,
.address-field--pending:active {
  background:
    repeating-linear-gradient(135deg,
      transparent 0 8px,
      rgba(20, 20, 15, 0.055) 8px 10px),
    var(--paper-2);
}
.address-field--pending .field-label .hint { color: var(--ink-fade); }
.address-field--pending .field-value { color: var(--ink-fade); }

.address-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule);
  margin-bottom: 18px;
  background: var(--paper);
}
.address-meta > div {
  padding: 11px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  border-right: 1px solid var(--rule);
}
.address-meta > div:last-child { border-right: none; }
.address-meta .label {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin-bottom: 3px;
}

.btn-copy, .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 15px 24px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s;
}
.btn-copy::before, .btn-primary::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--green-glow);
  display: inline-block;
  flex-shrink: 0;
}
.btn-copy:hover, .btn-primary:hover {
  background: var(--green);
  border-color: var(--green);
}
.btn-copy:hover::before, .btn-primary:hover::before { background: var(--paper); }
.btn-copy:active, .btn-primary:active { transform: translateY(1px); }
.btn-copy.copied { background: var(--green-bright); border-color: var(--green-bright); }
.btn-copy.copied::before { background: var(--paper); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.btn-secondary {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--ink-fade);
  padding: 8px 4px;
}
.btn-secondary:hover { color: var(--green-bright); text-decoration-color: var(--green-bright); }

.receipt-line {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-fade);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s, transform 0.35s;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.receipt-line.show { opacity: 1; transform: translateY(0); }
.receipt-line .ok { color: var(--green-bright); font-weight: 600; }
.receipt-line .tick { color: var(--ink-fade); }

.trad-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px dashed var(--rule);
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--paper);
}
.trad-note::before {
  content: "※";
  color: var(--green-bright);
  font-size: 15px;
  margin-top: -1px;
}

/* ═══ RESPONSIVE ═══════════════════════════════ */
@media (max-width: 900px) {
  .dispatch-body { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
  aside.rail {
    border-left: none;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: 24px;
    position: static;
  }
  .address-meta { grid-template-columns: 1fr; }
  .address-meta > div {
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .address-meta > div:last-child { border-bottom: none; }
  .trail { flex-direction: column; gap: 6px; }
  .panel { box-shadow: 3px 3px 0 var(--ink); }
  .panel:hover { box-shadow: 5px 5px 0 var(--ink); }
  .sec-dek { margin-left: 0; width: 100%; }
  .batch-meta .date { margin-left: 0; }
  body .fold { display: none; }
}

/* line-break utilities — toggle between mobile and desktop */
.mobile-only { display: none; }

/* mobile-only asterism ornament above the dispatch masthead */
.masthead-mark { display: none; }

@media (max-width: 560px) {
  .desk-only   { display: none; }
  .mobile-only { display: inline; }

  /* ── SHEET: generous horizontal breathing room for long-form reading ── */
  .sheet { padding: 20px 22px 48px; }

  /* ── TOP BAR ── */
  .top-bar { font-size: 9.5px; letter-spacing: 0.16em; gap: 8px; }

  /* ── COVER PAGE META STRIP ── */
  .meta-strip { font-size: 9.5px; gap: 3px 12px; letter-spacing: 0.14em; }
  .meta-strip .status { margin-left: 0; }
  .kicker { font-size: 9.5px; letter-spacing: 0.32em; }
  .kicker::before, .kicker::after { display: none; }
  .wordmark { font-size: clamp(46px, 15vw, 92px); }
  .tagline { font-size: clamp(16px, 5.2vw, 22px); }
  .batch-title { font-size: clamp(34px, 11vw, 60px); max-width: 100%; }
  .batch-meta { font-size: 9.5px; gap: 5px 12px; letter-spacing: 0.18em; }
  .batch-meta .date { margin-left: 0; width: 100%; }
  .batch-foot { flex-direction: column; align-items: flex-start; }
  .batch-foot .cta { align-self: flex-start; }

  /* ── DISPATCH MASTHEAD: centered magazine-cover treatment on mobile ── */
  .dispatch-masthead {
    padding: clamp(44px, 7vh, 72px) 0 clamp(48px, 7vh, 72px);
    border-bottom-width: 1px;
    border-bottom-style: solid;    /* drop the heavy double-rule on mobile */
    text-align: center;
    position: relative;
  }

  /* asterism ornament above the masthead — bookend w/ the fleuron */
  .masthead-mark {
    display: block;
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1;
    color: var(--green-mid);
    margin-bottom: clamp(22px, 3.5vh, 36px);
    letter-spacing: 0.08em;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  .dispatch-meta {
    justify-content: center;
    font-size: 10px;
    gap: 4px 12px;
    letter-spacing: 0.14em;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
  }
  .dispatch-meta .date { margin-left: 0; }
  .batch-blink { padding: 0.16em 0.42em 0.18em; }

  .dispatch-title {
    font-size: clamp(55px, 16vw, 77px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 100%;
    margin-top: clamp(14px, 2vh, 22px);
    margin-bottom: clamp(24px, 3.5vh, 36px);
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .dispatch-title em { padding: 0 0.14em 0.04em; }

  .dispatch-byline {
    font-size: 15px;
    line-height: 1.45;
    margin-top: clamp(16px, 2.5vh, 24px);
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .dispatch-dek { font-size: 16px; }

  /* ── RE-ENABLE MASTHEAD AURA on mobile as a centered halo ── */
  .masthead-aura {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    width: min(112vw, 560px);
    height: min(112vw, 560px);
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 0.7;
    /* ring mask — transparent center so text stays readable,
       visible middle ring as a halo, fading at outer edges */
    -webkit-mask-image: radial-gradient(
      circle at center,
      transparent 0%,
      transparent 26%,
      rgba(0,0,0,0.85) 48%,
      rgba(0,0,0,0.85) 62%,
      transparent 92%
    );
            mask-image: radial-gradient(
      circle at center,
      transparent 0%,
      transparent 26%,
      rgba(0,0,0,0.85) 48%,
      rgba(0,0,0,0.85) 62%,
      transparent 92%
    );
  }

  /* ── ESSAY BODY: 18px serif body, 1.68 line-height — tuned for phone reading ── */
  .dispatch-body { margin-top: clamp(28px, 4vh, 40px); }
  .dispatch-body h2 { font-size: clamp(26px, 7.5vw, 38px); }
  .dispatch-body p,
  .dispatch-body p.lede {
    font-size: 18px;
    line-height: 1.68;
    letter-spacing: -0.002em;
    orphans: 2;
    widows: 2;
    hyphens: none;
  }
  .dispatch-body p { margin-bottom: 1.15em; }
  .dispatch-body p.lede { font-size: 19px; line-height: 1.6; }

  /* ── DROPCAP: DISABLED on mobile — floating dropcaps ruin narrow wrap ── */
  .dropcap::first-letter {
    font-size: inherit;
    float: none;
    line-height: inherit;
    margin: 0;
    color: inherit;
    font-style: inherit;
    font-family: inherit;
    font-weight: inherit;
  }

  /* ── SECTION HEADS ── */
  .sec-head {
    gap: 10px 14px;
    flex-wrap: wrap;
    padding-bottom: 8px;
    margin-bottom: 18px;
  }
  .sec-num { font-size: 11px; letter-spacing: 0.22em; }
  .sec-label { font-size: 12.5px; letter-spacing: 0.24em; }

  /* ── CONTRIBUTE RAILS ── */
  .btn-copy, .btn-primary { width: 100%; justify-content: center; padding: 15px 18px; }
  .btn-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn-secondary { text-align: center; }
  .panel-body { padding: 20px 16px; }
  .panel-head { padding: 10px 14px; gap: 10px; }
  .panel-head .tag { display: none; }
  .seal-wrap .ornament-rule { flex-basis: 40px; }

  /* ── TREASURY: compact on narrow mobile ── */
  .treasury { padding: 20px 16px; box-shadow: 3px 3px 0 var(--ink); }
  .treasury-hero { margin-bottom: 44px; }
  .treasury-hero-main { gap: 10px; }
  .treasury-raised-label { font-size: 9.5px; letter-spacing: 0.22em; }
  .treasury-target-label { font-size: 9px; letter-spacing: 0.22em; }
  .treasury-track { margin: 0 4px 48px; }
  .treasury-track--big { margin: clamp(26px, 3.5vh, 36px) 4px clamp(56px, 7vh, 70px); }
  .station .amt { font-size: 9.5px; top: -18px; }
  .station .lbl { display: none; }
  .treasury-track--big .station-end .amt { font-size: 22px; bottom: -38px; }
  .treasury-foot { font-size: 9.5px; letter-spacing: 0.14em; gap: 8px; }

  /* ── FLEURON + TRAIL ── */
  .fleuron { margin: clamp(36px, 6vh, 52px) 0; }
  .trail-end { font-size: 9px; letter-spacing: 0.18em; }
}

/* ═══ ENTRY ANIMATIONS ═════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(12px);
    animation: reveal 1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .reveal.d1 { animation-delay: 0.08s; }
  .reveal.d2 { animation-delay: 0.24s; }
  .reveal.d3 { animation-delay: 0.44s; }
  .reveal.d4 { animation-delay: 0.7s; }
  .reveal.d5 { animation-delay: 0.98s; }
  .reveal.d6 { animation-delay: 1.24s; }
}
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }