/* Dead Circuit, issue 01. Ported from the Tailwind build: the tokens below
   replace @theme, and this reset stands in for Tailwind's preflight. */
*, ::before, ::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: inherit; }
img, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; background: transparent; border-radius: 0; }
button { cursor: default; }
s { text-decoration: line-through; }
/* `hidden` must win over component display rules (.wallet-list is a grid),
   or the crypto wallets show before anyone asks to pay with crypto. */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }


:root {
  --color-ink: #16140f;
  --color-paper: #f6f0e6;
  --color-hazard: #ff3d1f;
  --color-volt: #d6f25a;
  --color-mute: #8a8175;
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
}

  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  html,
  body {
    margin: 0;
    background: var(--color-ink);
    color: var(--color-paper);
    font-family: var(--font-serif);
  }

  #app,
  body {
    min-height: 100%;
  }


.only-mobile {
  display: block;
}

.only-desk {
  display: none;
}

@media (min-width: 960px) {
  .only-mobile {
    display: none;
  }

  .only-desk {
    display: flex;
  }
}

.kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-hazard);
}

.kicker-paper {
  color: var(--color-paper);
}

.kicker-volt {
  color: var(--color-volt);
}

.sheet {
  position: relative;
  width: 1100px;
  height: 680px;
  overflow: hidden;
  break-after: page;
  page-break-after: always;
  color: var(--color-ink);
  background: var(--color-paper);
}

.sheet h2,
.sheet h3,
.sheet p,
.sheet blockquote,
.sheet ul,
.sheet ol,
.sheet figure {
  margin: 0;
}

.sheet button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: inherit;
}

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

.tone-hazard {
  background: var(--color-hazard);
  color: var(--color-ink);
}

.tone-volt {
  background: var(--color-volt);
  color: var(--color-ink);
}

.folio {
  position: absolute;
  z-index: 3;
  inset-inline-start: 32px;
  inset-inline-end: 32px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mute);
}

.folio-light {
  color: #c8c0b4;
}

.cover-photo,
.minute-photo img,
.pattern-side img,
.spread-shelter figure img,
.spread-move figure img,
.spread-bots figure img,
.spread-end aside img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cover-photo {
  position: absolute;
  inset: 0;
  object-position: 62% center;
}

.cover-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgb(22 20 15 / 0.94) 0%,
    rgb(22 20 15 / 0.78) 36%,
    rgb(22 20 15 / 0.12) 68%
  );
}

.cover-copy {
  position: absolute;
  z-index: 1;
  inset-inline-start: 40px;
  top: 36px;
  width: 560px;
}

.cover-title {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 92px;
  line-height: 0.84;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-paper);
}

.cover-title em {
  font-style: normal;
  color: var(--color-volt);
}

.cover-deck {
  margin: 22px 0 0;
  max-width: 420px;
  font-size: 22px;
  line-height: 1.35;
  color: var(--color-paper);
}

.cover-stamp {
  position: absolute;
  z-index: 1;
  top: 36px;
  inset-inline-end: 36px;
  width: 92px;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-hazard);
  color: var(--color-ink);
  font-family: var(--font-display);
  text-transform: uppercase;
}

.cover-stamp span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.cover-stamp strong {
  font-size: 36px;
  line-height: 1;
}

.cover-bar {
  position: absolute;
  z-index: 1;
  inset-inline-start: 40px;
  bottom: 32px;
  margin: 0;
  padding: 8px 12px;
  background: var(--color-volt);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.spread-letter {
  display: grid;
  grid-template-columns: 440px 1fr;
}

.letter-index {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 32px 28px 48px;
}

.index-title {
  margin: 8px 0 10px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.toc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.toc li + li {
  border-top: 1px solid rgb(246 240 230 / 0.16);
}

.toc button,
.toc-static {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
  text-align: start;
}

.toc button:hover strong,
.toc button:focus-visible strong {
  color: var(--color-volt);
}

.toc-n {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-hazard);
}

.toc strong,
.toc em {
  display: block;
}

.toc strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.toc em {
  font-style: normal;
  font-size: 13px;
  color: #c8c0b4;
}

.letter-body {
  padding: 36px 40px 52px 36px;
}

.letter-body h2 {
  margin: 8px 0 14px;
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.letter-body p {
  font-size: 18px;
  line-height: 1.35;
  max-width: 36rem;
}

.letter-body p + p {
  margin-top: 12px;
}

.letter-sign {
  font-style: italic;
  color: var(--color-hazard);
}

.spread-head {
  padding: 28px 32px 0;
}

.spread-head h2 {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 48px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.spread-head.light h2 {
  color: var(--color-paper);
}

.dek {
  max-width: 640px;
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.35;
}

.minute-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 22px 32px 0;
}

.minute-grid span {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  color: var(--color-volt);
}

.minute-grid h3 {
  margin: 6px 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
}

.minute-grid p {
  font-size: 15px;
  line-height: 1.35;
  color: #e7e0d4;
}

.minute-photo {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 36px;
  height: 168px;
}

.minute-photo figcaption {
  position: absolute;
  inset-inline-start: 16px;
  bottom: 12px;
  padding: 6px 8px;
  background: var(--color-volt);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spread-pattern {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
}

.pattern-quote {
  padding: 36px 32px 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pattern-quote blockquote {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 58px;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.pattern-side {
  display: grid;
  grid-template-rows: 250px 1fr;
  background: var(--color-ink);
  color: var(--color-paper);
}

.pattern-side img {
  object-position: 70% center;
}

.pattern-side ul {
  list-style: none;
  margin: 0;
  padding: 16px 22px 40px;
  display: grid;
  gap: 10px;
}

.pattern-side strong,
.pattern-side span {
  display: block;
}

.pattern-side strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-volt);
}

.pattern-side span {
  font-size: 15px;
  line-height: 1.3;
}

.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 16px 32px 0;
}

.spec-grid section {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 12px 12px 14px;
  min-height: 168px;
}

.spec-grid strong {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-volt);
}

.spec-grid h3 {
  margin: 4px 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-hazard);
}

.spec-grid p {
  font-size: 14px;
  line-height: 1.3;
}

.source-line {
  position: absolute;
  inset-inline-start: 32px;
  inset-inline-end: 32px;
  bottom: 36px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-mute);
}

.source-line-light {
  color: #c8bfb2;
}

.tone-hazard .kicker {
  color: var(--color-ink);
}

.spread-steps .spread-head {
  padding-bottom: 0;
}

.spread-steps .spread-head h2 {
  font-size: 34px;
}

.spread-steps .dek {
  font-size: 15px;
  line-height: 1.3;
  max-width: 920px;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 28px 0;
}

.step-grid section {
  padding: 8px 10px 10px;
  background: rgb(22 20 15 / 0.06);
}

.tone-ink .step-grid section {
  background: rgb(246 240 230 / 0.08);
}

.step-grid span {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  color: var(--color-hazard);
}

.tone-ink .step-grid span {
  color: var(--color-volt);
}

.tone-hazard .step-grid span {
  color: var(--color-ink);
}

.step-grid h3 {
  margin: 3px 0 4px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
}

.step-grid p {
  font-size: 12.5px;
  line-height: 1.28;
}

.spread-contents {
  padding: 26px 32px 48px;
}

.spread-contents h2 {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.contents-grid {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 32px;
}

.contents-grid button,
.contents-grid .toc-static {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  width: 100%;
  align-items: start;
  padding: 4px 0;
  text-align: start;
}

.contents-grid strong {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.1;
}

.contents-grid em {
  display: block;
  font-style: normal;
  font-size: 12px;
  line-height: 1.25;
  color: var(--color-mute);
}

.contents-grid .toc-n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  color: var(--color-hazard);
}

.spread-arms .spread-head h2 {
  font-size: 40px;
}

.arm-list {
  display: grid;
  gap: 6px;
  padding: 8px 32px 0;
}

.arm-list section {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 12px;
  align-items: start;
}

.arm-list h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-volt);
}

.arm-list p,
.arms-foot {
  font-size: 14px;
  line-height: 1.3;
  color: #e7e0d4;
}

.arms-foot {
  margin: 10px 32px 0;
  padding-top: 8px;
  border-top: 2px solid var(--color-hazard);
  color: var(--color-paper);
}

.hunger-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px 32px 48px;
}

.hunger-list section {
  background: var(--color-paper);
  padding: 16px 18px 18px;
  min-height: 148px;
}

.hunger-list h3 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.hunger-list p {
  margin-top: 6px;
  font-size: 18px;
  line-height: 1.35;
}

.spread-shelter {
  display: grid;
  grid-template-columns: 480px 1fr;
}

.spread-shelter figure {
  position: relative;
  height: 680px;
}

.spread-shelter figcaption {
  position: absolute;
  inset-inline-start: 16px;
  bottom: 48px;
  max-width: 240px;
  padding: 8px 10px;
  background: var(--color-hazard);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
}

.shelter-copy {
  padding: 32px 32px 52px 28px;
}

.shelter-copy h2 {
  margin: 8px 0 14px;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.shelter-copy ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}

.shelter-copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-hazard);
}

.shelter-copy span,
.shelter-foot {
  font-size: 16px;
  line-height: 1.3;
}

.shelter-foot {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 2px solid var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.spread-move {
  display: grid;
  grid-template-columns: 460px 1fr;
}

.spread-move figure {
  height: 680px;
}

.move-copy {
  padding: 32px 32px 52px 28px;
}

.move-copy h2 {
  margin: 8px 0 16px;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-paper);
}

.move-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.move-split section {
  padding: 12px;
  background: var(--color-paper);
  color: var(--color-ink);
}

.move-split h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
}

.move-split p,
.move-copy li {
  font-size: 15px;
  line-height: 1.35;
}

.move-copy ul {
  margin-top: 14px;
  padding-inline-start: 18px;
  color: var(--color-paper);
  display: grid;
  gap: 6px;
}

.spread-people .spread-head {
  padding-bottom: 8px;
}

.people-list {
  list-style: none;
  margin: 8px 32px 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
}

.people-list li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 8px;
  align-items: start;
}

.people-list li span {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--color-hazard);
  line-height: 1;
}

.people-list h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
}

.people-list p {
  font-size: 16px;
  line-height: 1.3;
}

.people-pull {
  position: absolute;
  inset-inline-start: 32px;
  inset-inline-end: 32px;
  bottom: 40px;
  padding: 12px 14px;
  background: var(--color-ink);
  color: var(--color-volt);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.spread-bots {
  display: grid;
  grid-template-columns: 360px 1fr;
}

.spread-bots figure {
  height: 680px;
}

.bots-copy {
  padding: 24px 24px 48px 22px;
}

.bots-copy h2 {
  margin: 4px 0 12px;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-paper);
}

.bot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bot-grid section {
  padding: 10px 12px 12px;
  background: var(--color-paper);
  color: var(--color-ink);
  min-height: 132px;
}

.bot-grid section:nth-child(2),
.bot-grid section:nth-child(3) {
  background: var(--color-volt);
}

.bot-grid p {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-hazard);
}

.bot-grid h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  margin: 4px 0;
}

.bot-grid span {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.3;
}

.bots-rule {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--color-paper);
}

.spread-end {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
}

.end-list {
  padding: 28px 28px 48px 32px;
}

.end-list h2 {
  margin: 4px 0 12px;
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.end-list ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

.end-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 6px;
  align-items: start;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.15;
  text-transform: uppercase;
}

.end-list li span {
  color: var(--color-hazard);
  font-size: 22px;
}

.spread-end aside {
  margin: 24px 24px 48px 0;
  background: var(--color-ink);
  color: var(--color-paper);
  display: flex;
  flex-direction: column;
}

.spread-end aside img {
  height: 210px;
}

.spread-end aside h3,
.spread-end aside p {
  padding: 0 18px;
}

.spread-end aside h3 {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--color-volt);
}

.spread-end aside p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.35;
}

.end-mark {
  margin-top: auto;
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-hazard);
}

.studio {
  height: 100dvh;
  flex-direction: column;
  background:
    radial-gradient(circle at 20% 0%, rgb(214 242 90 / 0.08), transparent 32%),
    var(--color-ink);
}

.studio-bar,
.zine-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 8px 16px;
}

.wordmark,
.zine-bar p,
.studio-page {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wordmark span,
.zine-bar span,
.studio-page {
  color: var(--color-volt);
  font-weight: 800;
}

.studio-page {
  letter-spacing: 0.12em;
  font-size: 13px;
}

.studio-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.studio-actions button,
.pdf-link,
.zine-bar a {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.studio-actions button {
  width: 44px;
}

.studio-actions button:disabled {
  opacity: 0.35;
}

.pdf-link,
.zine-bar a {
  padding: 0 14px;
  background: var(--color-hazard);
}

.pdf-link svg,
.zine-bar svg,
.studio-actions svg {
  width: 18px;
  height: 18px;
}

.save-hint {
  position: fixed;
  z-index: 8;
  inset-inline-start: 12px;
  inset-inline-end: 12px;
  top: 64px;
  margin: 0;
  padding: 12px 14px;
  background: var(--color-volt);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stage {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 8px 16px 0;
}

.fit-box {
  width: calc(1100px * var(--fit));
  height: calc(680px * var(--fit));
}

.fit-page {
  width: 1100px;
  height: 680px;
  transform: scale(var(--fit));
  transform-origin: top left;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px 14px;
}

.dots button {
  width: 44px;
  height: 10px;
  border: 0;
  background: rgb(246 240 230 / 0.28);
}

.dots button.is-on {
  background: var(--color-volt);
}

.sheet {
  animation: rise 220ms ease;
}

@keyframes rise {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet {
    animation: none;
  }
}

.zine {
  background: var(--color-paper);
  color: var(--color-ink);
  padding-bottom: 48px;
}

.zine-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-ink);
  color: var(--color-paper);
}

.zine h2 {
  margin: 8px 0 12px;
  font-family: var(--font-display);
  font-weight: 900;
  /* Long single words (DESINTERESSANTE) must fit a 360px phone. */
  font-size: min(40px, 9.6vw);
  hyphens: auto;
  overflow-wrap: break-word;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.zine h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
}

.zine p,
.zine li {
  font-size: 17px;
  line-height: 1.45;
}

.zine-cover {
  position: relative;
  min-height: 78vh;
  color: var(--color-paper);
  background: var(--color-ink);
}

.zine-cover img,
.zine-photo img,
.zine-ink img,
.zine-end img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.zine-cover img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-position: center 30%;
}

.zine-cover div {
  position: relative;
  z-index: 1;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 20px 28px;
  background: linear-gradient(180deg, rgb(22 20 15 / 0.05) 20%, rgb(22 20 15 / 0.92) 78%);
}

.zine-cover p,
.zine-cover span {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.zine-cover h1 {
  margin: 8px 0;
  font-family: var(--font-display);
  font-weight: 900;
  /* 52px on a normal phone, smaller on narrow ones so long words fit. */
  font-size: min(52px, 13.5vw);
  overflow-wrap: break-word;
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.zine-cover em {
  font-style: normal;
  color: var(--color-volt);
}

.zine-letter,
.zine-quote,
.zine-people,
.zine-photo div,
.zine-ink,
.zine-steps,
.zine-hazard,
.zine-end {
  padding: 28px 20px;
}

.zine-ink,
.zine-end {
  background: var(--color-ink);
  color: var(--color-paper);
}

.zine-ink ol,
.zine-people ol,
.zine-end ol,
.zine-steps ol,
.zine-quote ul,
.zine-hazard ul,
.zine-photo ul,
.zine-bots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.zine-ink ol li,
.zine-people ol li,
.zine-end ol li,
.zine-steps ol li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 8px;
}

.zine-ink ol span,
.zine-people ol span,
.zine-end ol span,
.zine-steps ol span {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--color-hazard);
}

.zine-ink img {
  margin: 8px 0 18px;
  height: 220px;
}

.zine-quote {
  background: var(--color-volt);
}

.zine-quote blockquote {
  margin: 8px 0 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.zine-quote strong {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
}

.zine-hazard {
  background: var(--color-hazard);
}

.zine-hazard li {
  background: var(--color-paper);
  padding: 14px;
}

.zine-photo {
  padding: 0;
}

.zine-photo img {
  height: 260px;
}

.zine-bots h3 span {
  display: block;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-serif);
  font-size: 16px;
}

.zine-end img {
  height: 200px;
  margin: -28px -20px 16px;
  width: calc(100% + 40px);
  max-width: none;
}

.zine .end-mark {
  margin: 18px 0 0;
  padding: 0;
}

.print-root {
  background: var(--color-paper);
}

@page {
  size: 1100px 680px;
  margin: 0;
}

@media print {
  body * {
    visibility: hidden;
  }

  #print-root,
  #print-root * {
    visibility: visible;
  }

  #print-root {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
  }

  .sheet {
    animation: none;
  }
}

.store {
  min-height: 100dvh;
  background: var(--color-ink);
  color: var(--color-paper);
  padding-bottom: 84px;
}

.store-bar,
.store-bar-end,
.zine-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.store-bar {
  justify-content: space-between;
  padding: 12px 20px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-ink);
}

.store-bar p,
.store-deadline,
.store-dock p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.store-bar span {
  color: var(--color-volt);
}

.store-deadline {
  color: var(--color-volt);
  font-size: 12px;
}

.store-hero,
.store-paper,
.store-volt,
.store-end,
.thanks {
  padding: 28px 20px 36px;
}

.store-hero {
  display: grid;
  gap: 20px;
}

.store-hero img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.store h1,
.store-paper h2,
.store-volt h2,
.store-end h2 {
  margin: 8px 0 12px;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.92;
  text-transform: uppercase;
}

.store h1,
.store-end h2 {
  font-size: 44px;
}

.store-paper h2,
.store-volt h2 {
  font-size: 36px;
}

.store-deck,
.store-end p,
.store-note {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.4;
  max-width: 38rem;
}

.store-note {
  color: var(--color-volt);
}

.clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
  max-width: 440px;
}

.clock div {
  background: rgb(246 240 230 / 0.08);
  padding: 10px 8px 8px;
}

.store-volt .clock div {
  background: rgb(22 20 15 / 0.12);
}

.clock strong,
.clock span {
  display: block;
}

.clock strong {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.clock span {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.buy-row {
  display: grid;
  gap: 8px;
  max-width: 520px;
}

.buy,
.buy-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  background: var(--color-hazard);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.buy:disabled {
  opacity: 0.45;
}

.buy-volt,
.buy-mini,
.zine-bar a.buy-mini,
.studio-actions a.buy-mini {
  background: var(--color-volt);
  color: var(--color-ink);
}

.store-sample {
  display: inline-block;
  margin-top: 14px;
  color: var(--color-volt);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.price-lock {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
}

.price-lock s,
.price-lock strong,
.price-lock span {
  font-family: var(--font-display);
}

.price-lock s {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-paper);
}

.price-lock strong {
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  color: var(--color-volt);
}

.price-lock span,
.thanks p {
  font-size: 16px;
  line-height: 1.4;
}

.store-volt .price-lock s,
.store-volt .price-lock strong,
.store-end .price-lock strong {
  color: var(--color-ink);
}

.store-sample-second {
  margin-inline-start: 16px;
}

.wallet-list button {
  min-height: 44px;
  width: fit-content;
  border: 0;
  background: var(--color-volt);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wallet-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.wallet-list li {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  background: rgb(246 240 230 / 0.08);
}

.wallet-list strong {
  font-family: var(--font-display);
  letter-spacing: 0.08em;
}

.wallet-list span {
  word-break: break-all;
  font-size: 14px;
}

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

.store-paper ol {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.store-paper li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
}

.store-paper li span,
.store-paper strong,
.store-paper em {
  display: block;
}

.store-paper li span,
.store-paper strong {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
}

.store-paper li span {
  color: var(--color-hazard);
}

.store-paper em {
  font-style: normal;
  color: var(--color-mute);
}

.store-volt {
  background: var(--color-volt);
  color: var(--color-ink);
}

.store-volt .kicker {
  color: var(--color-ink);
}

.store-end {
  background: var(--color-hazard);
  color: var(--color-ink);
}

.store-end p {
  color: var(--color-ink);
}

.store-dock {
  position: fixed;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-ink);
  color: var(--color-paper);
}

.thanks {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 100dvh;
}

.store-gate {
  display: inline-block;
  margin-top: 18px;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.gate {
  min-height: 100dvh;
  background: var(--color-ink);
  color: var(--color-paper);
  display: flex;
  flex-direction: column;
}

.gate-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgb(246 240 230 / 0.12);
}

.gate-bar p,
.gate-bar a,
.gate-form label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gate-bar span,
.gate-form label,
.gate-in {
  color: var(--color-volt);
}

.gate-bar a {
  color: var(--color-paper);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.gate-scroll {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.gate-out,
.gate-in {
  margin: 0 0 10px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
}

.gate-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gate-form input {
  flex: 1;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}

.gate-form input:focus {
  outline: none;
}

.gate-prize {
  margin-top: 8px;
}


@media (max-width: 959px) {
  .store-bar .buy {
    display: none;
  }

  .store-sample,
  .store-sample-second {
    display: block;
    margin-inline-start: 0;
  }
}

@media (min-width: 960px) {
  .store {
    padding-bottom: 0;
  }

  .store-hero {
    grid-template-columns: 0.8fr 1.2fr;
    align-items: start;
    gap: 36px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 32px 40px;
  }

  .store-hero img {
    height: 460px;
  }

  .store h1 {
    font-size: 64px;
  }

  .store-paper,
  .store-volt,
  .store-end {
    padding: 48px 32px;
  }

  .store-paper ol {
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
    max-width: 980px;
  }

  .buy-row {
    grid-template-columns: 1.3fr 0.9fr;
  }

  .store-dock {
    display: none;
  }
}


/* Claiming the file: the thanks page's crypto form and status line. */
.thanks {
  max-width: 560px;
  margin: 0 auto;
}

.thanks [data-tone="ok"] { color: var(--color-volt); }
.thanks [data-tone="wait"] { color: var(--color-paper); }
.thanks [data-tone="bad"] { color: var(--color-hazard); }

.claim-form {
  display: grid;
  gap: 8px;
  margin: 12px 0 4px;
}

.claim-form[hidden],
.thanks [hidden] {
  display: none;
}

.claim-form label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-mute);
}

.claim-form select,
.claim-form input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-mute);
  background: #221f18;
  color: var(--color-paper);
  font-size: 16px;
}

.claim-form input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.claim-form select:focus,
.claim-form input:focus {
  outline: 2px solid var(--color-volt);
  outline-offset: 1px;
}

.claim-form .buy {
  margin-top: 8px;
}

.claim-help a {
  color: var(--color-volt);
  text-decoration: underline;
}

/* ------------------------------------------------------------ languages */

.lang-picker select {
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid rgb(246 240 230 / 0.3);
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.lang-picker select:focus-visible {
  outline: 2px solid var(--color-volt);
  outline-offset: 1px;
}

.gate-bar-end,
.thanks-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* The spread is scaled from its top-left corner, so its frame stays
   left-to-right; the page inside follows the language. */
.fit-box { direction: ltr; }
[dir="rtl"] .fit-page { direction: rtl; }

/* Arrows point the way the page turns. */
[dir="rtl"] .studio-actions button svg { transform: scaleX(-1); }

/* Japanese, Chinese and Arabic: Archivo and Newsreader keep the Latin
   letters and digits; everything else falls through to the reader's own
   system fonts, so nothing extra is downloaded. */
:root:lang(ja) {
  --font-display: "Archivo", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --font-serif: "Newsreader", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
}

:root:lang(zh) {
  --font-display: "Archivo", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;
  --font-serif: "Newsreader", "Songti SC", "STSong", "SimSun", "Noto Serif SC", "Noto Serif CJK SC", serif;
}

:root:lang(ar) {
  --font-display: "Archivo", "Geeza Pro", "Noto Kufi Arabic", "Noto Sans Arabic", "Segoe UI", "Tahoma", sans-serif;
  --font-serif: "Newsreader", "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif;
}

/* CJK has no italics, and faux-slanted characters look broken. */
:lang(ja) em, :lang(zh) em,
:lang(ja) i, :lang(zh) i { font-style: normal; }

/* Tracking breaks Arabic's joined letters apart. */
:lang(ar) * { letter-spacing: 0 !important; }

/* CJK and Arabic glyphs sit taller; give dense headlines a little air. */
:lang(ja) h1, :lang(ja) h2, :lang(zh) h1, :lang(zh) h2,
:lang(ar) h1, :lang(ar) h2 { line-height: 1.15; }

/* Narrow phones: the zine bar keeps the PDF icon and drops its label. */
@media (max-width: 419px) {
  .zine-bar .pdf-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .zine-bar .pdf-link { padding-inline: 10px; }
  .zine-bar .lang-picker select { max-width: 92px; padding: 0 4px; }
  .zine-actions { gap: 8px; }
}

@media (max-width: 359px) {
  .zine-bar { padding-inline: 10px; gap: 8px; }
  .zine-bar .lang-picker select { max-width: 72px; }
  .zine-actions { gap: 6px; }
}

/* Storefront preview of the issue: the editor's letter and four spreads,
   so visitors meet the guide before any payment details. */
.store-preview {
  padding: 28px 20px 36px;
  border-top: 1px solid rgb(246 240 230 / 0.12);
}

.store-preview h2 {
  margin: 8px 0 12px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: min(36px, 9.6vw);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  hyphens: auto;
  overflow-wrap: break-word;
}

.store-preview-lede {
  max-width: 62ch;
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.5;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0;
}

.preview-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #221f18;
}

.preview-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.preview-card span {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 28px 10px 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--color-paper);
  background: linear-gradient(transparent, rgb(22 20 15 / 0.92));
}

.preview-card:hover img,
.preview-card:focus-visible img {
  transform: scale(1.04);
}

.store-preview-cta {
  display: inline-flex;
}

@media (min-width: 960px) {
  .store-preview {
    padding: 56px max(20px, calc((100% - 1100px) / 2));
  }

  .preview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .store-preview h2 {
    font-size: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preview-card img { transition: none; }
}

/* ================================================================ */
/* Second edition: dispatches, drawings, worksheets, cards, sources  */
/* and the preview lock.                                             */
/* ================================================================ */

.contents-also {
  position: absolute;
  inset-inline: 32px;
  bottom: 40px;
  padding-top: 8px;
  border-top: 2px solid var(--color-hazard);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- Dispatch: first-person fiction between chapters ---------------- */

.spread-dispatch {
  display: grid;
  grid-template-columns: 400px 1fr;
}

.dispatch-photo {
  position: relative;
  margin: 0;
  height: 680px;
  overflow: hidden;
}

.dispatch-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A tint instead of a CSS filter: filters make Chromium store the photo
   uncompressed in the PDF (megabytes per dispatch). */
.dispatch-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(22 20 15 / 0.28);
  pointer-events: none;
}

.dispatch-photo figcaption { z-index: 1; }

.dispatch-photo figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  gap: 2px;
  padding: 60px 24px 44px;
  background: linear-gradient(transparent, rgb(22 20 15 / 0.92));
  font-family: var(--font-display);
  text-transform: uppercase;
}

.dispatch-photo figcaption span {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--color-volt);
}

.dispatch-photo figcaption strong {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.dispatch-copy {
  padding: 40px 48px 60px 44px;
}

.dispatch-copy h2 {
  margin: 8px 0 20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.dispatch-copy p:not(.kicker):not(.dispatch-sign) {
  margin: 0 0 12px;
  font-size: 16.5px;
  line-height: 1.5;
  color: #e7e0d4;
}

.dispatch-copy p:not(.kicker):not(.dispatch-sign):first-of-type::first-letter {
  float: inline-start;
  margin: 4px 8px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 52px;
  line-height: 0.8;
  color: var(--color-volt);
}

.dispatch-sign {
  margin-top: 14px;
  font-style: italic;
  font-size: 16px;
  color: var(--color-volt);
}

/* ---- Drawings -------------------------------------------------------- */

.drawing .metal { fill: none; stroke: currentColor; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.drawing .fill-soft { fill: rgb(22 20 15 / 0.08); }
.tone-ink .drawing .fill-soft { fill: rgb(246 240 230 / 0.07); }
.drawing .fill-pot { fill: rgb(22 20 15 / 0.18); }
.tone-ink .drawing .fill-pot { fill: rgb(246 240 230 / 0.16); }
.drawing .ground { stroke: currentColor; stroke-width: 3; }
.drawing .hatch { stroke: currentColor; stroke-width: 1.5; opacity: 0.5; }
.drawing .fire { fill: var(--color-volt); stroke: var(--color-ink); stroke-width: 1.5; }
.drawing .air { fill: none; stroke: var(--color-ink); stroke-width: 2.5; stroke-dasharray: 7 6; }
.drawing .air-head { fill: var(--color-ink); }
.drawing .liner { fill: none; stroke: var(--color-volt); stroke-width: 2.5; stroke-dasharray: 9 7; }
.drawing .foil { fill: none; stroke: var(--color-volt); stroke-width: 3; }
.drawing .device { fill: rgb(246 240 230 / 0.12); stroke: currentColor; stroke-width: 2.5; }
.drawing .device-line { fill: none; stroke: currentColor; stroke-width: 2.5; }
.drawing .cable { fill: none; stroke: currentColor; stroke-width: 3; stroke-dasharray: 4 5; opacity: 0.7; }
.drawing .no { stroke: var(--color-hazard); stroke-width: 5; stroke-linecap: round; }
.drawing .pin circle { fill: var(--color-ink); stroke: var(--color-paper); stroke-width: 2; }
.tone-ink .drawing .pin circle { fill: var(--color-volt); stroke: var(--color-ink); }
.drawing .pin text {
  fill: var(--color-paper);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  text-anchor: middle;
}
.tone-ink .drawing .pin text { fill: var(--color-ink); }

.spread-drawing {
  display: grid;
  grid-template-columns: 470px 1fr;
  align-items: center;
}

/* Drawings are geometry, not text: never mirror them. */
.drawing-wrap {
  direction: ltr;
  padding: 36px 8px 40px 36px;
}

.drawing-wrap svg {
  width: 100%;
  height: auto;
  max-height: 560px;
}

.drawing-copy {
  align-self: start;
  padding: 36px 40px 60px 12px;
}

.drawing-copy h2 {
  margin: 6px 0 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 34px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.drawing-copy .dek {
  font-size: 15px;
}

.legend {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.legend li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 15px;
  line-height: 1.3;
}

.legend span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
}

.tone-ink .legend span {
  background: var(--color-volt);
  color: var(--color-ink);
}

.box-test {
  margin-top: 14px;
  padding: 10px 14px;
  border: 2px solid var(--color-volt);
}

.box-test h3 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-volt);
}

.box-test ol {
  margin: 6px 0 0;
  padding-inline-start: 18px;
  font-size: 14px;
  line-height: 1.35;
}

.diagram-foot {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

/* ---- Water diagram: four stations + dose table ------------------------ */

.stages {
  list-style: none;
  margin: 0;
  padding: 16px 32px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  counter-reset: stage;
}

.stages li {
  position: relative;
  padding: 12px 12px 12px;
  background: rgb(22 20 15 / 0.06);
}

.stages li:not(:last-child)::after {
  content: "→";
  position: absolute;
  inset-inline-end: -12px;
  top: 30px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  color: var(--color-hazard);
}

[dir="rtl"] .stages li:not(:last-child)::after { content: "←"; }

.stages .glyph {
  width: 52px;
  height: 52px;
}

.glyph .metal { fill: none; stroke: var(--color-ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.glyph .water { fill: none; stroke: #2a7de1; stroke-width: 3; stroke-linecap: round; }
.glyph .silt { stroke: #8a6a3c; stroke-width: 3; stroke-linecap: round; }
.glyph .fire { fill: var(--color-hazard); }

.stage-n {
  position: absolute;
  inset-inline-end: 12px;
  top: 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  color: var(--color-hazard);
}

.stages h3 {
  margin: 6px 0 4px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stages p {
  font-size: 13px;
  line-height: 1.3;
}

.dose {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  align-items: start;
  padding: 16px 32px 0;
}

.dose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.dose caption {
  padding-bottom: 6px;
  text-align: start;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-hazard);
}

.dose th,
.dose td {
  padding: 6px 10px;
  border-bottom: 1px solid rgb(22 20 15 / 0.18);
  text-align: start;
}

.dose thead th {
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dose tbody th {
  font-weight: 700;
}

.dose td {
  font-family: var(--font-display);
  font-weight: 800;
}

.dose .diagram-foot {
  margin: 22px 0 0;
  padding: 12px 14px;
  background: var(--color-hazard);
  color: var(--color-ink);
}

/* ---- Worksheets -------------------------------------------------------- */

.ws-grid {
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 28px;
  padding: 14px 32px 0;
}

.ws-fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}

.ws-fields li {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 62px;
}

.ws-fields strong {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ws-fields em {
  font-size: 12px;
  color: var(--color-mute);
}

.ws-line {
  align-self: end;
  border-bottom: 1.5px solid var(--color-ink);
  height: 24px;
}

.ws-bag {
  padding: 14px 16px;
  border: 2px solid var(--color-ink);
}

.ws-bag h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ws-bag ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
}

.ws-bag li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ws-box {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-ink);
}

.ws-table {
  width: calc(100% - 64px);
  margin: 16px 32px 0;
  border-collapse: collapse;
  font-size: 14px;
}

.ws-table th,
.ws-table td {
  height: 34px;
  padding: 0 12px;
  border: 1.5px solid var(--color-ink);
  text-align: start;
}

.ws-table thead th {
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ws-example td {
  color: var(--color-mute);
  font-style: italic;
}

.ws-total th {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  text-align: end;
}

.ws-notes {
  margin: 14px 32px 0;
  padding-inline-start: 18px;
  display: grid;
  gap: 4px;
  font-size: 14px;
  line-height: 1.35;
}

/* ---- Pocket cards ------------------------------------------------------ */

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 16px 32px 0;
}

.pocket-card {
  position: relative;
  min-height: 200px;
  padding: 16px 18px 26px;
  border: 2px dashed var(--color-ink);
  background: #fffaf1;
}

.scissors {
  position: absolute;
  top: -13px;
  inset-inline-start: 14px;
  padding: 0 4px;
  background: var(--color-paper);
  font-size: 18px;
  line-height: 1;
}

.pocket-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-hazard);
}

.pocket-card ul {
  margin: 8px 0 0;
  padding-inline-start: 18px;
  display: grid;
  gap: 5px;
  font-size: 14px;
  line-height: 1.3;
}

.pocket-card footer {
  position: absolute;
  inset-inline-end: 14px;
  bottom: 8px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mute);
}

/* ---- Sources ----------------------------------------------------------- */

.source-list {
  margin: 0;
  padding: 16px 32px 0 56px;
  columns: 2;
  column-gap: 36px;
  font-size: 13px;
  line-height: 1.3;
}

.source-list li {
  break-inside: avoid;
  margin-bottom: 10px;
}

.source-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
}

.source-list span {
  color: #4b453c;
}

.sources-note {
  position: absolute;
  inset-inline: 32px;
  bottom: 40px;
  padding: 10px 14px;
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: 13px;
  line-height: 1.35;
}

/* ---- Preview lock ------------------------------------------------------ */

.spread-locked {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 32px;
  padding: 44px 40px;
  background:
    radial-gradient(60% 70% at 15% 30%, rgb(214 242 90 / 0.12), transparent 70%),
    var(--color-ink);
}

.locked-copy h2 {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 44px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.locked-copy .dek {
  margin-bottom: 24px;
  color: #e7e0d4;
}

.locked-list h3,
.zine-locked h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-volt);
}

.locked-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 22px;
}

.locked-items li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid rgb(246 240 230 / 0.12);
}

.locked-items .toc-n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  color: var(--color-volt);
}

.locked-items strong {
  display: block;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
}

.locked-items em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.25;
  color: #b8b0a2;
}

/* Mobile zine: the dispatch and the lock. */

.zine-dispatch,
.zine-locked {
  padding: 28px 20px 32px;
  background: var(--color-ink);
  color: var(--color-paper);
}

.zine-dispatch img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 18px;
}

.zine-dispatch h2,
.zine-locked h2 {
  margin: 8px 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: min(34px, 8.6vw);
  line-height: 0.95;
  text-transform: uppercase;
  hyphens: auto;
  overflow-wrap: break-word;
}

.zine-dispatch p:not(.kicker):not(.dispatch-sign) {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.55;
}

.zine-locked {
  border-top: 4px solid var(--color-volt);
}

.zine-locked > p:not(.kicker) {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.45;
}

.zine-locked .buy {
  display: inline-flex;
  margin-bottom: 26px;
}

.zine-locked .locked-items {
  grid-template-columns: 1fr;
}

/* The reset strips list markers; these lists need theirs back. */
.box-test ol,
.source-list { list-style: decimal; }
.pocket-card ul,
.ws-notes { list-style: disc; }
.box-test ol li::marker,
.source-list li::marker { font-family: var(--font-display); font-weight: 900; color: var(--color-hazard); }
.tone-ink .box-test ol li::marker { color: var(--color-volt); }

/* Folios stay legible on the red pages. */
.tone-hazard .folio { color: var(--color-ink); }

/* The sources page has room: read comfortably. */
.source-list { padding-top: 22px; font-size: 15px; line-height: 1.35; }
.source-list strong { font-size: 15px; }
.source-list li { margin-bottom: 16px; }

/* ------------------------------------------------ unofficial / untested */
.disclaimer {
  margin: 0 0 16px;
  padding: 12px 14px;
  max-width: 38rem;
  border: 2px solid var(--color-hazard);
  border-inline-start-width: 6px;
  background: rgba(255, 61, 31, 0.08);
  font-family: var(--font-display);
}

.disclaimer-kicker {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-hazard);
}

.disclaimer strong {
  display: block;
  font-size: 17px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.disclaimer p:last-child {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.4;
}

.disclaimer-line {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.75;
}

/* The letter page: same box, sized to the spread. */
.letter-body .letter-disclaimer {
  margin-top: 18px;
  padding: 10px 12px;
}

.letter-body .letter-disclaimer p:last-child {
  max-width: none;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.35;
}

.letter-body .letter-disclaimer strong {
  font-size: 15px;
}

/* One quiet line along the foot of the cover, under the volt bar. */
.cover-fine {
  position: absolute;
  z-index: 1;
  inset-inline: 40px;
  bottom: 10px;
  margin: 0;
  font-size: 10.5px;
  color: var(--color-paper);
  opacity: 0.8;
}

.zine-disclaimer {
  margin: 16px;
}

.store-end-fine {
  max-width: 38rem;
  margin-inline: auto;
}

.store-end .store-end-fine {
  margin-top: 16px;
  font-size: 13px;
}

.letter-body .letter-disclaimer .disclaimer-kicker {
  font-size: 11px;
  line-height: 1.3;
}