:root {
  /* IBM Plex Mono used sparingly for ledger amounts. Interactions are material economic artifacts—stamps. */
  --newsprint: #F3E7C8;
  --ink: #17130E;
  --ledger: #56745A;
  --stamp: #B13A2E;
  --brass: #C5953D;
  --chalk: #355C7D;
  --umber: #5A3B24;
  --pink: #E7B6A6;
  --display: "Libre Baskerville", Georgia, serif;
  --body: "Newsreader", Georgia, serif;
  --mono: "IBM Plex Mono", monospace;
  --hand: "Patrick Hand", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--newsprint);
  font-family: var(--body);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .36;
  background:
    radial-gradient(circle at 20% 30%, rgba(90,59,36,.13) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 61%, rgba(23,19,14,.12) 0 1px, transparent 1.4px),
    linear-gradient(90deg, rgba(255,255,255,.08), rgba(23,19,14,.05));
  background-size: 19px 23px, 31px 29px, 100% 100%;
  mix-blend-mode: multiply;
}

.press-shadow {
  position: fixed;
  inset: -20vh 0 auto 0;
  height: 32vh;
  background: linear-gradient(180deg, transparent, rgba(23,19,14,.36), transparent);
  z-index: 45;
  transform: translateY(-40vh);
  pointer-events: none;
  animation: pressRoll 2.6s ease-out forwards;
}

@keyframes pressRoll { to { transform: translateY(118vh); opacity: 0; } }

.clipped-tabs {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  gap: 7px;
  filter: drop-shadow(0 6px 0 rgba(90,59,36,.15));
}
.clipped-tabs a {
  color: var(--ink);
  background: var(--pink);
  border: 1px solid var(--umber);
  padding: 9px 13px;
  font: 600 11px/1 var(--mono);
  text-decoration: none;
  text-transform: uppercase;
  clip-path: polygon(0 0, 92% 0, 100% 100%, 8% 100%);
  transition: transform .25s ease, background .25s ease;
}
.clipped-tabs a.active, .clipped-tabs a:hover { background: var(--brass); transform: translateY(5px) rotate(-1deg); }

.receipt-spine {
  position: fixed;
  right: 20px;
  top: 78px;
  bottom: 24px;
  width: 172px;
  z-index: 35;
  background: repeating-linear-gradient(0deg, #fff2d2 0 18px, #ead8af 19px 20px);
  border: 1px dashed var(--umber);
  box-shadow: 10px 10px 0 rgba(90,59,36,.18);
  transform-origin: top center;
  transition: transform .45s ease, filter .45s ease;
}
.receipt-spine.buckle { transform: rotate(2.5deg) translateX(-4px); filter: sepia(.35); }
.receipt-cap, .receipt-total { padding: 12px; background: var(--ink); color: var(--newsprint); font: 600 12px/1 var(--mono); text-align: center; letter-spacing: .12em; }
.receipt-spine ol { margin: 0; padding: 14px 14px 14px 28px; font: 500 10px/1.45 var(--mono); }
.receipt-spine li { margin: 0 0 14px; }
.receipt-spine span { color: var(--stamp); font-weight: 600; }
.receipt-total { position: absolute; bottom: 0; width: 100%; background: var(--stamp); }

.broadsheet {
  width: min(1420px, calc(100vw - 36px));
  margin: 0 auto;
  background: linear-gradient(180deg, #F3E7C8 0%, #F3E7C8 31%, #E7B6A6 52%, #5A3B24 75%, #17130E 100%);
  box-shadow: 0 0 0 1px rgba(90,59,36,.45), 0 35px 80px rgba(23,19,14,.36);
}

.scene {
  min-height: 100vh;
  position: relative;
  padding: 104px 230px 78px 72px;
  overflow: hidden;
  border-bottom: 2px solid rgba(90,59,36,.4);
}
.scene:before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(90,59,36,.32);
  pointer-events: none;
}

.edition-line { font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .18em; border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); padding: 10px 0; }
.misprint-title {
  font: 700 clamp(54px, 11vw, 168px)/.9 var(--display);
  letter-spacing: -.08em;
  margin: 42px 0 26px;
  color: var(--ink);
}
.misprint-title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(36px) rotate(-2deg);
  text-shadow: 3px 0 var(--stamp), -2px 2px var(--chalk);
  animation: inkSet .75s ease forwards;
}
.misprint-title span:nth-child(2n) { text-shadow: -3px 0 var(--brass), 2px 2px var(--stamp); }
@keyframes inkSet { to { opacity: 1; transform: translateY(0) rotate(0); } }
.masthead-grid { display: grid; grid-template-columns: 1.1fr .7fr .7fr; gap: 28px; align-items: end; }
.lead-copy { font-size: clamp(22px, 3vw, 42px); line-height: 1.05; margin: 0; max-width: 720px; }
.halftone-sun { width: 230px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--brass) 0 38%, transparent 39%), repeating-radial-gradient(circle, rgba(177,58,46,.72) 0 3px, transparent 3px 9px); border: 2px solid var(--umber); }
.notice-board { background: var(--ledger); color: var(--newsprint); padding: 22px; transform: rotate(3deg); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--brass); }
.notice-board strong { font: 700 30px/1 var(--display); }
.notice-board p { margin: 9px 0 0; font: 20px/1.1 var(--hand); }
.time-string { position: absolute; left: 70px; right: 230px; bottom: 52px; height: 2px; background: var(--stamp); }
.time-string i { position: absolute; top: -7px; width: 16px; height: 16px; background: var(--brass); border: 2px solid var(--ink); border-radius: 50%; }
.time-string i:nth-child(1){left:0}.time-string i:nth-child(2){left:25%}.time-string i:nth-child(3){left:50%}.time-string i:nth-child(4){left:75%}.time-string i:nth-child(5){right:0}

h2 { font: 700 clamp(43px, 7vw, 104px)/.86 var(--display); letter-spacing: -.055em; margin: 0 0 24px; }
p { font-size: clamp(19px, 1.45vw, 25px); line-height: 1.32; }
.scene-kicker { font: 600 12px/1 var(--mono); color: var(--stamp); text-transform: uppercase; letter-spacing: .16em; margin-bottom: 18px; }

.annotation-rail { position: absolute; left: 36px; top: 180px; width: 132px; font-family: var(--mono); transform: rotate(-3deg); border-left: 4px solid var(--ledger); padding-left: 12px; }
.annotation-rail b { font-size: 13px; }
.annotation-rail p, .formula { font: 16px/1.1 var(--hand); }
.story-column { max-width: 650px; margin-left: 150px; }
.price-tag { position: absolute; right: 295px; top: 180px; width: 124px; height: 156px; background: var(--brass); border: 2px solid var(--umber); color: var(--ink); font: 700 34px/1 var(--mono); transform-origin: 50% -40px; box-shadow: 8px 8px 0 rgba(90,59,36,.22); cursor: pointer; }
.price-tag:before { content: ""; position: absolute; top: -45px; left: 50%; height: 50px; border-left: 2px solid var(--umber); }
.price-tag small { font-family: var(--hand); font-size: 22px; }
.swing-tag { animation: swing 4s ease-in-out infinite; }
@keyframes swing { 0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)} }
.coin-row { position: absolute; left: 260px; bottom: 95px; display: flex; gap: 18px; }
.coin-row span { width: 74px; height: 74px; border-radius: 50%; border: 2px solid var(--umber); background: radial-gradient(circle at 38% 32%, #F3E7C8, var(--brass) 45%, #8b6427); box-shadow: 10px 8px 0 rgba(197,149,61,.22); }
.curve-svg { position: absolute; right: 245px; bottom: 72px; width: 420px; max-width: 34vw; }
.axis, .chalk-axis { fill: none; stroke: var(--umber); stroke-width: 3; opacity: .7; }
.draw-path { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.4s ease; }
.draw-path.drawn { stroke-dashoffset: 0; }
.demand { stroke: var(--stamp); }.supply { stroke: var(--ledger); }
svg text { font: 19px var(--hand); fill: var(--chalk); }

.noon { background: rgba(197,149,61,.13); }
.coupon-strip { position: absolute; left: 54px; top: 128px; display: flex; flex-direction: column; z-index: 2; }
.coupon { width: 160px; padding: 20px 10px; background: var(--pink); border: 2px dashed var(--stamp); font: 600 16px/1 var(--mono); cursor: grab; transition: transform .25s ease; }
.coupon.separate { transform: translateX(26px) rotate(-3deg); }
.market-column { margin-left: 170px; max-width: 810px; }
.chalkboard { background: var(--chalk); border: 12px solid var(--umber); padding: 14px; box-shadow: 12px 12px 0 rgba(23,19,14,.2); color: var(--newsprint); }
.chalkboard svg { width: 100%; display: block; }
.chalk-axis { stroke: rgba(243,231,200,.72); }
.chalkboard .demand, .chalkboard .supply { stroke: #F3E7C8; filter: drop-shadow(0 0 2px rgba(243,231,200,.8)); }
.chalkboard text { fill: #F3E7C8; font-size: 35px; }
.chalk-note { margin: 0; font: 22px/1 var(--hand); }
.paddles { position: absolute; right: 280px; top: 190px; display: flex; gap: 10px; }
.paddles span { display: grid; place-items: center; width: 72px; height: 92px; border-radius: 45% 45% 10px 10px; background: var(--umber); color: var(--newsprint); font: 700 24px var(--mono); transform: rotate(var(--r, -6deg)); }
.paddles span:nth-child(2){--r:4deg}.paddles span:nth-child(3){--r:11deg}
.price-stamps { position: absolute; right: 245px; bottom: 98px; display: grid; gap: 9px; }
.price-stamps b { color: var(--stamp); border: 4px solid var(--stamp); padding: 8px 18px; font: 700 24px/1 var(--mono); transform: rotate(-8deg); opacity: .82; }

.afternoon { background: linear-gradient(135deg, rgba(243,231,200,.8), rgba(90,59,36,.5)); }
.scarcity-band { position: absolute; inset: 45% -8% auto -8%; background: var(--stamp); color: var(--newsprint); font: 700 28px/1 var(--mono); padding: 18px; transform: rotate(-14deg); letter-spacing: .2em; white-space: nowrap; }
.shortage-copy { max-width: 650px; position: relative; z-index: 2; }
.shelf { position: absolute; right: 250px; top: 160px; width: 430px; min-height: 300px; border-bottom: 18px solid var(--umber); display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; align-items: end; }
.crate { min-height: 150px; background: var(--ledger); color: var(--newsprint); display: grid; place-items: center; font: 24px var(--hand); border: 2px solid var(--ink); }
.crate.ghost { opacity: .18; background: transparent; color: var(--ink); border-style: dashed; }
.crate.torn { clip-path: polygon(0 0,100% 8%,92% 100%,18% 88%,0 100%); background: var(--pink); color: var(--stamp); }
.tear-window { position: absolute; right: 320px; bottom: 90px; width: 300px; height: 170px; background: var(--newsprint); clip-path: polygon(0 12%,18% 0,31% 14%,52% 3%,66% 18%,88% 0,100% 13%,91% 100%,70% 91%,50% 100%,30% 88%,9% 100%); display: grid; place-items: center; color: var(--stamp); font: 38px var(--hand); box-shadow: inset 0 0 25px rgba(90,59,36,.35); }
.hand-note { position: absolute; left: 55%; bottom: 38%; font: 31px/1 var(--hand); color: var(--chalk); transform: rotate(7deg); }

.evening { background: linear-gradient(180deg, #5A3B24, #17130E); color: var(--newsprint); }
.evening:before, .night:before { border-color: rgba(243,231,200,.25); }
.externality-copy { max-width: 640px; position: relative; z-index: 3; }
.stamp-button, .return-tab { background: transparent; color: var(--pink); border: 3px solid var(--stamp); padding: 14px 20px; font: 700 14px var(--mono); text-decoration: none; cursor: pointer; box-shadow: 6px 6px 0 rgba(177,58,46,.28); }
.city-map { position: absolute; right: 205px; bottom: 62px; width: min(650px, 48vw); height: 300px; }
.city-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.roof { position: absolute; bottom: 0; width: 90px; height: 88px; background: var(--chalk); border: 2px solid var(--newsprint); clip-path: polygon(50% 0,100% 38%,100% 100%,0 100%,0 38%); }
.r1{left:4%;height:72px}.r2{left:23%;height:112px;background:var(--ledger)}.r3{left:47%;height:86px;background:var(--brass)}.r4{left:72%;height:124px;background:var(--pink)}
.trade-string { fill: none; stroke: var(--brass); stroke-width: 3; stroke-dasharray: 7 8; }
.smoke { fill: rgba(177,58,46,.33); stroke: var(--pink); stroke-width: 3; }
.external-stamp { position: absolute; right: 440px; top: 185px; color: var(--stamp); border: 8px solid var(--stamp); font: 700 46px/.86 var(--mono); padding: 18px; transform: rotate(-17deg) scale(0); opacity: 0; z-index: 5; transition: transform .38s cubic-bezier(.3,1.8,.4,1), opacity .2s ease; }
.external-stamp.landed { transform: rotate(-17deg) scale(1); opacity: .9; }
.stain { position: absolute; right: 155px; bottom: 35px; width: 520px; height: 320px; background: radial-gradient(circle, rgba(177,58,46,.45), rgba(177,58,46,.18) 45%, transparent 72%); filter: blur(18px); opacity: .25; transition: opacity .5s ease, transform .5s ease; }
.stain.spread { opacity: .8; transform: scale(1.18); }

.night { background: #17130E; color: var(--newsprint); }
.settlement-copy { max-width: 760px; }
blockquote { font: 700 clamp(28px,4vw,58px)/1.05 var(--display); color: var(--brass); margin: 34px 0; }
.balance-sheet { width: min(560px, 42vw); background: rgba(243,231,200,.92); color: var(--ink); border: 2px solid var(--brass); padding: 22px; font-family: var(--mono); box-shadow: 12px 12px 0 rgba(197,149,61,.18); }
.balance-sheet div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--umber); padding: 13px 0; }
.lanterns span { position: absolute; width: 28px; height: 42px; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 50% 35%, #F3E7C8, #C5953D 60%, transparent 70%); animation: float 4s ease-in-out infinite; }
.lanterns span:nth-child(1){right:22%;top:18%;}.lanterns span:nth-child(2){right:36%;top:34%;animation-delay:.7s}.lanterns span:nth-child(3){right:15%;top:48%;animation-delay:1.4s}.lanterns span:nth-child(4){left:38%;bottom:18%;animation-delay:.3s}.lanterns span:nth-child(5){right:48%;top:15%;animation-delay:1s}
@keyframes float { 50% { transform: translateY(-22px) rotate(4deg); } }
.return-tab { display: inline-block; margin-top: 30px; }

.note-pop { position: fixed; left: 0; top: 0; z-index: 60; max-width: 285px; background: var(--ink); color: var(--newsprint); border: 2px solid var(--brass); padding: 13px; font: 17px/1.15 var(--hand); pointer-events: none; opacity: 0; transform: translate(-50%,-120%) rotate(-2deg); transition: opacity .2s ease; }
.note-pop.show { opacity: 1; }

@media (max-width: 900px) {
  .clipped-tabs { left: 8px; right: 8px; transform: none; overflow-x: auto; justify-content: flex-start; }
  .receipt-spine { display: none; }
  .broadsheet { width: 100%; }
  .scene { padding: 100px 24px 64px; }
  .masthead-grid { grid-template-columns: 1fr; }
  .story-column, .market-column { margin-left: 0; }
  .annotation-rail, .price-tag, .curve-svg, .paddles, .price-stamps, .shelf, .tear-window, .hand-note, .city-map, .external-stamp { position: relative; inset: auto; right: auto; top: auto; left: auto; bottom: auto; margin: 24px 0; max-width: 100%; }
  .coupon-strip { position: relative; left: auto; top: auto; flex-direction: row; flex-wrap: wrap; margin-bottom: 24px; }
  .scarcity-band { position: relative; inset: auto; transform: rotate(-4deg); margin: 18px -24px; }
  .balance-sheet { width: 100%; }
}