:root {
  --press-black: #090806;
  --carbon-blue: #152238;
  --newsprint: #E8DDC7;
  --soot: #4B4640;
  --copper: #5E8C61;
  --algae: #9DBB63;
  --ember: #C5462D;
  --diamond: #D8F4FF;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--newsprint);
  background:
    radial-gradient(circle at 82% 14%, rgba(216, 244, 255, .08), transparent 18rem),
    radial-gradient(circle at 10% 82%, rgba(94, 140, 97, .17), transparent 26rem),
    linear-gradient(115deg, var(--press-black) 0%, var(--carbon-blue) 52%, var(--press-black) 100%);
  font-family: "Newsreader", serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(232, 221, 199, .12) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(9, 8, 6, .55) 1px, transparent 2px);
  background-size: 19px 19px, 7px 7px;
  mix-blend-mode: overlay;
  opacity: .35;
  z-index: 4;
}

.grain, .press-shadow, .ash-field { position: fixed; inset: 0; pointer-events: none; }
.grain {
  z-index: 5;
  opacity: .22;
  background:
    repeating-linear-gradient(88deg, transparent 0 2px, rgba(232, 221, 199, .05) 2px 3px),
    repeating-linear-gradient(0deg, rgba(9, 8, 6, .2) 0 1px, transparent 1px 4px);
}
.press-shadow {
  z-index: 6;
  background: linear-gradient(100deg, transparent 0%, rgba(9, 8, 6, .78) 42%, transparent 58%);
  transform: translateX(-130%);
  animation: cylinderSweep 9s cubic-bezier(.45,0,.25,1) infinite;
  mix-blend-mode: multiply;
}
.ash-field { z-index: 3; overflow: hidden; }
.ash {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--newsprint);
  opacity: .2;
  transform: translate3d(var(--x), var(--y), 0);
}

.proof-trail {
  position: fixed;
  z-index: 20;
  right: 2.2rem;
  top: 20vh;
  display: grid;
  gap: 1.2rem;
  transform: rotate(-12deg);
}
.trail-dot {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--newsprint);
  text-decoration: none;
  font-family: "Archivo Narrow", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.trail-dot span {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--soot);
  border: 1px solid rgba(232, 221, 199, .3);
  box-shadow: 0 0 0 .28rem rgba(9, 8, 6, .45), inset 0 0 1rem rgba(9, 8, 6, .75);
}
.trail-dot em { opacity: 0; font-style: normal; transform: translateX(.5rem); transition: .35s ease; }
.trail-dot:hover em, .trail-dot.is-active em { opacity: 1; transform: translateX(0); }
.trail-dot.is-active span { background: var(--ember); color: var(--press-black); }

.night-edition, .scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.night-edition {
  grid-template-columns: 40vw 1fr;
  padding: 6vw;
}
.masthead-wrap {
  position: absolute;
  left: -7vw;
  top: 2vh;
  bottom: 0;
  width: 48vw;
  display: flex;
  align-items: center;
}
.masthead {
  position: relative;
  margin: 0;
  font-family: "Libre Bodoni", serif;
  font-size: clamp(7rem, 18vw, 18rem);
  line-height: .72;
  letter-spacing: -.095em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: rgba(232, 221, 199, .1);
  filter: contrast(1.2);
}
.masthead::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--newsprint);
  clip-path: inset(0 100% 0 0);
  animation: inkRoll 4.8s cubic-bezier(.62,0,.22,1) forwards;
  text-shadow: 6px -4px 0 rgba(21, 34, 56, .72), -3px 2px 0 rgba(197, 70, 45, .15);
}
.edition-kicker {
  position: absolute;
  left: 18vw;
  bottom: 7vh;
  margin: 0;
  font-family: "Archivo Narrow", sans-serif;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--algae);
}
.lead-slab {
  grid-column: 2;
  width: min(48rem, 62vw);
  padding: 3rem;
  color: var(--press-black);
  background: linear-gradient(105deg, rgba(232, 221, 199, .95), rgba(232, 221, 199, .72));
  box-shadow: 1rem 1.2rem 0 rgba(21, 34, 56, .9), -1.2rem -.8rem 0 rgba(75, 70, 64, .45);
  clip-path: polygon(0 4%, 97% 0, 100% 90%, 4% 100%);
  transform: rotate(-2.5deg);
}
h2 {
  margin: .2em 0;
  font-family: "Libre Bodoni", serif;
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 8.8rem);
  line-height: .78;
  letter-spacing: -.055em;
}
.lead-slab p, .fragment { font-size: clamp(1.1rem, 1.7vw, 1.55rem); line-height: 1.42; }
.wire-label, .scene-code {
  font-family: "Archivo Narrow", sans-serif;
  text-transform: uppercase;
  letter-spacing: .17em;
  font-weight: 700;
}
.scene-code { color: var(--diamond); font-family: "Fragment Mono", monospace; font-size: .78rem; }
button {
  cursor: pointer;
  border: 0;
  font-family: "Archivo Narrow", sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.proof-tab, .stamp-button {
  background: var(--ember);
  color: var(--newsprint);
  padding: .9rem 1.1rem;
  box-shadow: .35rem .35rem 0 var(--press-black);
}
.rotary-cylinder {
  position: absolute;
  right: -18rem;
  top: 10vh;
  width: 42rem;
  height: 42rem;
  border-radius: 50%;
  border: 2px solid rgba(232, 221, 199, .14);
  background: radial-gradient(circle, transparent 42%, rgba(232, 221, 199, .1) 43% 44%, transparent 45%), repeating-conic-gradient(from 20deg, rgba(232, 221, 199, .12) 0 4deg, transparent 4deg 15deg);
  animation: rotatePress 26s linear infinite;
}

.scene { padding: 8vw 10vw; }
.broadsheet, .wire-copy, .final-proof {
  position: relative;
  max-width: 58rem;
  padding: clamp(2rem, 5vw, 4.8rem);
  background: var(--newsprint);
  color: var(--press-black);
  box-shadow: 1.4rem 1rem 0 rgba(21, 34, 56, .8), -1rem .5rem 0 rgba(75, 70, 64, .55);
}
.carbon-copy { transition: transform .45s ease, box-shadow .45s ease; transform: rotate(var(--copy-rotate, -4deg)); }
.carbon-copy:hover, .carbon-copy.is-shifted { transform: rotate(calc(var(--copy-rotate, -4deg) + 4deg)) translate(.6rem, -.4rem); box-shadow: 2rem 1.3rem 0 rgba(21, 34, 56, .9), -1.4rem .8rem 0 rgba(197, 70, 45, .25); }
.crop-marks::before, .crop-marks::after {
  content: "";
  position: absolute;
  width: 4rem;
  height: 4rem;
  border-color: var(--ember);
  border-style: solid;
}
.crop-marks::before { left: 1rem; top: 1rem; border-width: 2px 0 0 2px; }
.crop-marks::after { right: 1rem; bottom: 1rem; border-width: 0 2px 2px 0; }
.lead-plate { background: radial-gradient(circle at 20% 70%, rgba(75, 70, 64, .5), transparent 30rem); }
.plate-sheet { --copy-rotate: -8deg; }
.plate-glyphs { display: flex; gap: .8rem; font-family: "Libre Bodoni", serif; font-size: clamp(4rem, 11vw, 11rem); line-height: .8; opacity: .16; transform: scaleX(-1); }
.curved-band {
  position: absolute;
  top: 9vh;
  left: -8vw;
  width: 112vw;
  padding: .75rem;
  border-block: 1px solid rgba(232, 221, 199, .35);
  font-family: "Archivo Narrow", sans-serif;
  color: var(--newsprint);
  text-align: center;
  letter-spacing: .35em;
  transform: rotate(-8deg) skewX(-12deg);
}
.margin-note, .vertical-rule {
  position: absolute;
  font-family: "Archivo Narrow", sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--algae);
  writing-mode: vertical-rl;
}
.margin-note { left: 7vw; bottom: 12vh; }

.soot-desk { background: radial-gradient(circle at 35% 45%, rgba(75, 70, 64, .6), transparent 23rem); }
.fingerprint {
  position: absolute;
  left: 8vw;
  top: 17vh;
  width: 18rem;
  height: 24rem;
  border-radius: 48%;
  opacity: .28;
  background: repeating-radial-gradient(ellipse at center, transparent 0 10px, var(--newsprint) 11px 13px, transparent 14px 24px);
  transform: rotate(-24deg);
}
.soot-sheet { --copy-rotate: 7deg; }
.correction-mark {
  color: var(--newsprint);
  background: var(--ember);
  border-radius: 50%;
  width: 5.4rem;
  height: 5.4rem;
  transform: rotate(-15deg);
}
.revised-line { font-family: "Fragment Mono", monospace; text-decoration: line-through; text-decoration-color: var(--ember); }
.ticker-strip {
  position: absolute;
  left: -5vw;
  bottom: 10vh;
  width: 115vw;
  padding: .7rem;
  font-family: "Archivo Narrow", sans-serif;
  letter-spacing: .22em;
  white-space: nowrap;
  color: var(--press-black);
  background: var(--newsprint);
  transform: rotate(4deg);
  animation: paperFeed 18s linear infinite;
}

.atmospheric-wire { background: linear-gradient(140deg, var(--carbon-blue), var(--press-black)); }
.wire-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.wire-lines path { fill: none; stroke: var(--diamond); stroke-width: 1.4; stroke-dasharray: 12 18; animation: wirePulse 8s linear infinite; }
.wire-copy { background: rgba(9, 8, 6, .72); color: var(--newsprint); border: 1px solid rgba(216, 244, 255, .2); box-shadow: none; backdrop-filter: blur(3px); }
.headline-ribbons { position: absolute; right: -6vw; top: 17vh; display: grid; gap: 1rem; transform: rotate(11deg); }
.headline-ribbons span { display: block; padding: .7rem 1rem; font-family: "Archivo Narrow", sans-serif; background: var(--carbon-blue); border: 1px solid rgba(216, 244, 255, .4); color: var(--diamond); letter-spacing: .16em; }

.biochar-dispatch { background: radial-gradient(circle at 60% 45%, rgba(157, 187, 99, .25), transparent 24rem), var(--press-black); }
.bio-sheet { --copy-rotate: -3deg; overflow: hidden; }
.bio-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--bloom-x, 32%) var(--bloom-y, 54%), rgba(157, 187, 99, .55), transparent 24%), radial-gradient(circle at 76% 22%, rgba(94, 140, 97, .35), transparent 17%);
  mix-blend-mode: multiply;
}
.ink-lineage { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 2rem; font-family: "Fragment Mono", monospace; font-size: .78rem; }
.ink-lineage b { width: 2.2rem; height: 1px; background: var(--copper); }
.algae-bloom { position: absolute; width: 28rem; height: 28rem; border-radius: 50%; background: radial-gradient(circle, rgba(157, 187, 99, .42), transparent 65%); filter: blur(10px); right: 4vw; bottom: 8vh; }
.vertical-rule { right: 8vw; top: 16vh; color: var(--copper); }

.diamond-correction { background: radial-gradient(circle at 50% 45%, rgba(216, 244, 255, .13), transparent 21rem), linear-gradient(180deg, var(--press-black), var(--carbon-blue)); }
.final-proof { color: var(--newsprint); background: linear-gradient(135deg, rgba(9, 8, 6, .85), rgba(21, 34, 56, .86)); border: 1px solid rgba(216, 244, 255, .28); box-shadow: 0 0 4rem rgba(216, 244, 255, .12); }
.final-proof h2 span { color: var(--ember); }
.fracture-field { position: absolute; inset: 0; }
.fracture-field i { position: absolute; width: 0; height: 0; border-style: solid; filter: drop-shadow(0 0 1rem var(--diamond)); opacity: .75; }
.fracture-field i:nth-child(1) { left: 18%; top: 25%; border-width: 0 42px 88px 18px; border-color: transparent transparent var(--diamond) transparent; }
.fracture-field i:nth-child(2) { left: 72%; top: 18%; border-width: 70px 20px 0 55px; border-color: rgba(216,244,255,.75) transparent transparent transparent; }
.fracture-field i:nth-child(3) { left: 62%; top: 72%; border-width: 0 26px 64px 50px; border-color: transparent transparent rgba(216,244,255,.5) transparent; }
.fracture-field i:nth-child(4) { left: 10%; top: 68%; border-width: 48px 62px 0 15px; border-color: rgba(232,221,199,.45) transparent transparent transparent; }
.fracture-field i:nth-child(5) { left: 86%; top: 54%; border-width: 0 16px 52px 38px; border-color: transparent transparent rgba(216,244,255,.55) transparent; }
.fracture-field i:nth-child(6) { left: 39%; top: 10%; border-width: 37px 70px 0 18px; border-color: rgba(216,244,255,.35) transparent transparent transparent; }
.stamp-target { font-family: "Fragment Mono", monospace; color: var(--diamond); }
.stamp-target.is-stamped { color: var(--ember); transform: rotate(-2deg); animation: stampImpact .34s ease; }

.folded-edition {
  position: relative;
  min-height: 46vh;
  padding: 7vw 10vw;
  color: var(--press-black);
  background: linear-gradient(160deg, var(--newsprint), #d7c8ab);
  clip-path: polygon(0 8%, 100% 0, 94% 100%, 4% 88%);
}
.registration-mark { font-family: "Libre Bodoni", serif; font-size: clamp(3rem, 9vw, 9rem); letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 1px var(--press-black); }
.folded-edition p { max-width: 52rem; font-size: 1.45rem; }
.folded-edition small { font-family: "Fragment Mono", monospace; color: var(--ember); }

@keyframes inkRoll { 0% { clip-path: inset(0 100% 0 0); filter: blur(5px); } 64% { filter: blur(0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes cylinderSweep { 0%, 58% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes rotatePress { to { transform: rotate(360deg); } }
@keyframes paperFeed { to { background-position: 100% 0; transform: rotate(4deg) translateX(-8vw); } }
@keyframes wirePulse { to { stroke-dashoffset: -180; } }
@keyframes stampImpact { 0% { transform: scale(1.4) rotate(-8deg); filter: blur(2px); } 100% { transform: scale(1) rotate(-2deg); } }

@media (max-width: 820px) {
  .proof-trail { right: .75rem; top: auto; bottom: 1rem; grid-auto-flow: column; transform: none; gap: .4rem; }
  .trail-dot em { display: none; }
  .night-edition { grid-template-columns: 1fr; padding: 7rem 1.2rem 4rem; }
  .masthead-wrap { position: relative; left: auto; top: auto; width: 100%; height: 18rem; }
  .masthead { writing-mode: horizontal-tb; transform: none; font-size: 27vw; }
  .edition-kicker { left: 1rem; bottom: 0; }
  .lead-slab { grid-column: 1; width: 100%; }
  .scene { padding: 7rem 1.2rem; }
  .broadsheet, .wire-copy, .final-proof { padding: 2rem; }
  h2 { font-size: clamp(2.8rem, 17vw, 5.8rem); }
  .headline-ribbons, .margin-note, .vertical-rule { display: none; }
}