/* base: the page owns its whole document */
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Layout: intro (age check → blocked → chewed hole) hands off to a tabloid you flip through, one sheet at a time, on a dark desk */
:root {
  color-scheme: dark;
  --night: #120d08;
  --burrow: #24170b;
  --gold: #f2a93b;
  --cream: #f6ead6;
  --muted-w: #b9a58a;
  --gov-bg: #e6e9ed;
  --gov-card: #ffffff;
  --gov-ink: #1b2430;
  --gov-sub: #5b6675;
  --gov-line: #cfd5dc;
  --gov-blue: #1f4fbf;
  --block-bg: #ffffff;
  --block-ink: #202124;
  --block-dim: #5f6368;
  --block-blue: #1a73e8;
  --alert: #d23b2f;
  --paper: #e9e2d2;
  --paper-2: #e4dccb;
  --ink: #1a1714;
  --ink-2: #4b443b;
  --press-red: #d4231b;
  --rule-soft: #b9b09f;
  --f-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --f-body: "Archivo", system-ui, sans-serif;
  --f-gov: "Public Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --f-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}
html, body { height: 100%; }
body { background: var(--night); color: var(--cream); font-family: var(--f-body); overflow: hidden; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.layer { position: fixed; inset: 0; }

/* ---------- Controls ---------- */
.controls {
  position: fixed; z-index: 50;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; gap: 8px; align-items: center;
}
.ctl {
  background: rgba(18, 13, 8, .72); color: var(--cream);
  border: 1px solid rgba(246, 234, 214, .25); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 600;
  backdrop-filter: blur(6px); text-decoration: none;
}
.ctl:hover { border-color: var(--gold); color: var(--gold); }
.ctl-buy { background: var(--gold); color: var(--night); border-color: var(--gold); font-weight: 800; }
.ctl-buy:hover { color: var(--night); filter: brightness(1.08); }

/* ---------- Stage 1: age check ---------- */
.age {
  z-index: 40; background: var(--gov-bg); color: var(--gov-ink);
  font-family: var(--f-gov);
  display: grid; place-items: center; overflow-y: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 64px 32px;
}
.age-card {
  width: 100%; max-width: 460px; background: var(--gov-card);
  border: 1px solid var(--gov-line); border-radius: 6px;
  padding: 32px 28px 24px; display: grid; gap: 16px;
  box-shadow: 0 1px 2px rgba(27, 36, 48, .06);
}
.age-top { display: flex; align-items: center; gap: 10px; color: var(--gov-sub); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.age-top svg { width: 18px; height: 18px; flex: none; }
.age h1 { font-size: 24px; line-height: 1.25; font-weight: 700; text-wrap: balance; }
.age p { color: var(--gov-sub); font-size: 15px; line-height: 1.55; }
.age-opts { display: grid; gap: 10px; margin-top: 4px; }
.age-opt {
  display: grid; gap: 2px; text-align: left;
  background: var(--gov-card); color: var(--gov-ink);
  border: 1.5px solid var(--gov-line); border-radius: 6px; padding: 14px 16px;
  transition: border-color .15s;
}
.age-opt:hover { border-color: var(--gov-blue); }
.age-opt strong { font-weight: 700; font-size: 15px; }
.age-opt span { color: var(--gov-sub); font-size: 13px; }
.age-opt.shake { animation: shake .4s; border-color: var(--alert); }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.age-msg { min-height: 1.55em; font-weight: 600; color: var(--alert) !important; }
.refuse-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--gov-line); padding-top: 14px; }
.age-fine { font-size: 12px !important; }
.refuse {
  background: none; border: 0; padding: 4px 0;
  color: var(--gov-sub); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.refuse:hover { color: var(--gov-ink); }
.age.glitch { animation: glitch .45s steps(2) forwards; }
/* phones: keep the card inside the screen, centred, with even spacing */
@media (max-width: 600px) {
  .age { padding-block: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-bottom, 0px)); overflow-x: hidden; }
  .age-card { box-sizing: border-box; max-width: 460px; padding: 24px 20px 18px; gap: 14px; }
  .age-card :is(h1, p) { margin: 0; }
  .age-msg:empty { display: none; }
}
@keyframes glitch {
  0% { transform: none; filter: none; }
  25% { transform: translate(-12px, 4px) skewX(8deg); filter: hue-rotate(90deg) contrast(2); }
  50% { transform: translate(14px, -6px) skewX(-12deg); filter: invert(1); clip-path: inset(20% 0 30% 0); }
  75% { transform: translate(-6px, 0) scaleY(.6); filter: contrast(3); clip-path: inset(45% 0 45% 0); }
  100% { opacity: 0; clip-path: inset(50% 0 50% 0); }
}

/* ---------- Stage 2: blocked (a plain browser-style error page) ---------- */
.block {
  z-index: 30; background: var(--block-bg); color: var(--block-ink);
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: grid; align-content: start; justify-items: center;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 12vh 0;
}
.block.slam { animation: slam .3s ease-out; }
@keyframes slam { from { opacity: 0; } }
.block-inner { width: 100%; max-width: 600px; display: grid; gap: 14px; text-align: left; }
.block-icon { width: 72px; height: 72px; margin-bottom: 18px; color: var(--block-dim); }
.block h2 { font-size: clamp(22px, 3.2vw, 28px); line-height: 1.25; font-weight: 500; color: var(--block-ink); }
.block p { color: var(--block-dim); font-size: 15px; line-height: 1.6; }
.block-details { list-style: none; display: grid; gap: 4px; padding: 0; margin: 4px 0 0; color: var(--block-dim); font-size: 14px; }
.block-details b { color: var(--block-ink); font-weight: 500; }
.block-code { color: var(--block-dim); font-size: 12px !important; letter-spacing: .02em; margin-top: 6px; }
.block-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }
.block-link { color: var(--block-blue); font-size: 14px; font-weight: 500; }
.block-btn { background: var(--block-blue); color: #fff; border: 0; border-radius: 4px; padding: 9px 22px; font: 500 14px/1 system-ui, "Segoe UI", Roboto, Arial, sans-serif; }
/* ---------- The hole ---------- */
.hole {
  z-index: 35; cursor: pointer;
  background:
    radial-gradient(circle var(--r, 100px) at var(--cx, 50%) var(--cy, 58%),
      #5a3815 0%, var(--burrow) 55%, #0a0603 100%);
}
.nigel {
  position: absolute; left: var(--cx); top: var(--cy);
  width: calc(var(--R, 120px) * 2.2);
  transform: translate(-50%, calc(-30% + var(--R, 120px) * 2));
  transition: transform .7s cubic-bezier(.2, 1.5, .45, 1);
}
.nigel.up { transform: translate(-50%, -30%); }
.nigel img { width: 100%; height: auto; display: block; }

/* the browser's own way past a warning: proceed anyway */
.enter {
  position: fixed; z-index: 45; left: 50%; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px;
  background: none; border: 0; padding: 0;
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  animation: proceed-in .35s ease-out both;
}
.enter .proceed {
  background: var(--block-blue); color: #fff;
  border-radius: 4px; padding: 10px 24px;
  font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  transition: background .15s, box-shadow .15s;
}
.enter .unsafe { color: var(--block-dim); font-size: 12px; white-space: nowrap; }
.enter:hover .proceed { background: #1765cc; box-shadow: 0 1px 3px rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15); }
.enter:focus-visible { outline: none; }
.enter:focus-visible .proceed { outline: 2px solid var(--block-blue); outline-offset: 3px; }
@keyframes proceed-in { from { opacity: 0; transform: translate(-50%, 6px); } }

.crumbs { z-index: 36; pointer-events: none; }
.crumb {
  position: absolute; width: var(--s); height: var(--s);
  background: var(--c); border-radius: 2px;
  animation: fly .9s cubic-bezier(.2, .6, .4, 1) forwards;
}
@keyframes fly {
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* ---------- Stage 3: the newspaper (two-page spread) ---------- */
.world { z-index: 10; background: #0d0a07; }

.paper { position: absolute; inset: 0; perspective: 3600px; }
.paper.landed { animation: land .8s cubic-bezier(.25, 1.15, .4, 1) both; }
/* seen through the hole: a little close and dim, then settling as you push through */
.paper.below { transform: scale(1.14); filter: brightness(.55); }
.paper.settle { transition: transform .9s cubic-bezier(.65, 0, .35, 1), filter .9s ease; }
@keyframes land {
  from { transform: translateY(-4%) scale(1.1) rotate(-2deg); opacity: 0; }
  55% { opacity: 1; }
  to { transform: none; }
}

/* wide screens: an open paper, right page turns over the spine */
.half { position: absolute; top: 0; bottom: 0; width: 50%; }
.half.left { left: 0; }
.half.right { left: 50%; }
.leaf {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 50%;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(.45, .05, .25, 1);
}
.leaf.flipped { transform: rotateY(-180deg); }

/* narrow screens: one page at a time */
.sheet {
  position: absolute; inset: 0;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.45, .05, .25, 1), visibility 0s 0s;
}
.sheet.flipped {
  transform: rotateY(-178deg); visibility: hidden; pointer-events: none;
  transition: transform 1s cubic-bezier(.45, .05, .25, 1), visibility 0s 1s;
}

/* newsprint */
.face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-color: var(--paper); color: var(--ink);
  overflow: hidden;
}
.face.back { transform: rotateY(180deg); }
.face { isolation: isolate; }
/* crumpled paper: creases and facets drawn per page, blended so ink follows the folds */
.crumple { position: absolute; inset: 0; z-index: 4; pointer-events: none; background-size: 100% 100%; mix-blend-mode: overlay; opacity: .95; }
.face.blank { background-image: linear-gradient(90deg, rgba(0, 0, 0, .2), transparent 35%), repeating-linear-gradient(0deg, transparent 0 10px, rgba(26, 23, 20, .06) 10px 12px); }
.page {
  position: absolute; inset: 0;
  overflow-y: auto; overscroll-behavior: contain;
  container-type: size;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 26px 74px;
  text-shadow: 0 0 .5px rgba(26, 23, 20, .45);
}
.page > * { position: relative; }
.page :where(h1, h2, h3, p, figure, ol, ul, dl, dd) { margin: 0; padding: 0; }
/* open paper: every page sits in one view, nothing scrolls */
.paper.wide .page { overflow: hidden; }
@container (max-height: 720px) {
  .paper.wide .barcode-row { display: none; }
  .paper.wide .inpull { display: none; }
  .paper.wide .wanted p { display: none; }
}
@container (max-height: 640px) {
  .paper.wide :is(.byline, .inside-h, .caption, .ad, .deck, .inpull, .side-pull, .peanut-ad .peanut, .howto) { display: none; }
  .paper.wide .copy p:nth-child(n+3) { display: none; }
  .paper.wide .sidebar { display: none; }
  .paper.wide .p2 { grid-template-columns: 1fr; }
}
.paper:not(.wide) .page > * { flex: none; }
/* single pages scroll: the face is the scroller and the paper texture is part of the page, so it moves with the print */
.paper:not(.wide) .face.front { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.paper:not(.wide) .page { position: relative; inset: auto; min-height: 100%; overflow: visible; container-type: inline-size; padding-bottom: 28px; }
.paper:not(.wide) .face.front::after { content: none; }
.page > .crumple { position: absolute; inset: 0; }
/* phones: brighter, cleaner paper for small-screen reading */
.paper:not(.wide) .face.front { background-color: #f7f3ea; }
.paper:not(.wide) .page > .crumple { opacity: .4; }
.paper:not(.wide) .page::after { opacity: .45; }
.paper:not(.wide) .page { --ink-2: #3b352d; }
/* texture on top of the ink so the print sits in the paper */
.face::after, .paper:not(.wide) .page::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse 80% 75% at 50% 50%, transparent 55%, rgba(140, 105, 45, .14) 88%, rgba(110, 80, 30, .26) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0035 .006' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='3.2'%3E%3CfeDistantLight azimuth='45' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .2 0 0 0 0 .12 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 900px 900px, 260px 260px;
  opacity: .95;
}
/* the spine: shadow where the pages meet */
.face.r::before, .face.l::before { content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 6; pointer-events: none; }
.face.r::before { left: 0; background: linear-gradient(90deg, rgba(40, 28, 10, .32), rgba(40, 28, 10, .1) 25%, transparent); }
.face.l::before { right: 0; background: linear-gradient(270deg, rgba(40, 28, 10, .32), rgba(40, 28, 10, .1) 25%, transparent); }

/* ---------- newspaper furniture ---------- */
.redtop {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  background: var(--press-red); color: var(--paper);
  margin: -18px -26px 0; padding: 10px 26px 8px;
}
.mast-title {
  font-family: var(--f-display); text-transform: uppercase; text-align: center;
  font-size: clamp(27.4px, min(8.6cqi, 10.15cqh), 110px); line-height: .9; letter-spacing: .01em;
  text-shadow: 1.5px 1px 0 rgba(26, 23, 20, .35);
}
.mast-title i { font-style: normal; display: inline-block; transform: skewX(-8deg); }
.ear {
  font-family: var(--f-body); font-weight: 800; font-size: clamp(8.8px, 1.366cqh, 11px); line-height: 1.25; text-transform: uppercase; letter-spacing: .04em;
  border: 2px solid var(--paper); padding: 5px 8px; max-width: 170px;
}
.ear b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(14.4px, 2.236cqh, 18px); letter-spacing: .02em; }
.ear.right { justify-self: end; text-align: right; }
.dateline, .folio {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px;
  border-bottom: 3px double var(--ink); padding: 6px 0 5px;
  font-family: var(--f-serif); font-size: clamp(10.4px, 1.615cqh, 13px); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2);
}
.folio { padding-top: 0; }
.folio .fm { font-family: var(--f-display); font-weight: 400; color: var(--press-red); font-size: clamp(17.6px, 2.732cqh, 22px); letter-spacing: .02em; }

.kicker {
  align-self: flex-start;
  background: var(--ink); color: var(--paper);
  font-family: var(--f-body); font-weight: 800; font-size: clamp(9.6px, 1.490cqh, 12px); letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 9px;
}
.hed {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(27.4px, min(8.2cqi, 9.68cqh), 112px); line-height: .88; letter-spacing: -.005em;
  text-wrap: balance;
}
.hed.sm { font-size: clamp(23.0px, min(6.6cqi, 7.79cqh), 84px); }
.hed .red { color: var(--press-red); text-shadow: .9px .3px 0 rgba(212, 35, 27, .28); }
/* worn ink: tiny specks where the press missed */
.hed, .mast-title, .pull, .num-item b, .member .size, .classified h3, .ad h3 {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -7 0 0 0 5.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -7 0 0 0 5.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  -webkit-mask-size: 180px 180px; mask-size: 180px 180px;
}
.ad { border: 1px solid var(--ink); outline: 3px solid var(--ink); outline-offset: 3px; padding: 14px 16px; text-align: center; display: grid; gap: 6px; max-width: 440px; margin: 18px 4px 0; }
.ad-label { font-family: var(--f-serif); font-style: italic; font-size: clamp(8.8px, 1.366cqh, 11px); color: var(--ink-2); }
.ad h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(21.6px, min(5.4cqi, 6.37cqh), 52px); line-height: .95; }
.ad p { font-family: var(--f-serif); font-size: clamp(11.2px, 1.739cqh, 14px); line-height: 1.4; }
.standfirst { font-family: var(--f-serif); font-weight: 700; font-size: clamp(11.5px, min(1.9cqi, 2.24cqh), 21px); line-height: 1.3; text-wrap: pretty; }
.copy { font-family: var(--f-serif); font-size: clamp(9.7px, min(1.45cqi, 1.71cqh), 15px); line-height: 1.48; text-align: justify; hyphens: auto; }
.copy p + p { margin-top: 6px; text-indent: 1.2em; }
.copy > p:first-child::first-letter { font-family: var(--f-display); float: left; font-size: 3.4em; line-height: .8; padding: 5px 6px 0 0; color: var(--press-red); }
.byline { font-family: var(--f-body); font-weight: 800; font-size: clamp(8.8px, 1.366cqh, 11px); letter-spacing: .1em; text-transform: uppercase; border-block: 1px solid var(--ink); padding: 4px 0; }
.cols { columns: 2 230px; column-gap: 22px; column-rule: 1px solid var(--rule-soft); }
.src { margin-top: auto; padding-top: 6px; font-family: var(--f-serif); font-style: italic; font-size: clamp(9.6px, 1.490cqh, 12px); color: var(--ink-2); }
.src a { color: var(--ink-2); }

/* halftone photos */
.photo { position: relative; overflow: hidden; border: 1px solid var(--ink); background: var(--paper-2); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; display: block; filter: saturate(.62) contrast(1.18) sepia(.18) brightness(1.04) blur(.3px); }
.photo::after {
  content: ""; position: absolute; inset: -50%; pointer-events: none; mix-blend-mode: multiply;
  background: radial-gradient(circle at 50% 50%, rgba(26, 23, 20, .34) 0 33%, transparent 40%) 0 0 / 3.5px 3.5px;
  transform: rotate(15deg);
  opacity: .6;
}
.caption { font-family: var(--f-serif); font-size: clamp(10.4px, 1.615cqh, 13px); line-height: 1.35; color: var(--ink-2); margin-top: 6px; }
.caption b { color: var(--ink); font-family: var(--f-body); font-weight: 800; text-transform: uppercase; font-size: clamp(8.8px, 1.366cqh, 11px); letter-spacing: .06em; }

/* front page: Nigel fills the space under the headline */
.front-grid { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.front-grid > * { min-width: 0; }
.splash { display: flex; flex-direction: column; min-height: 0; }
.splash .photo { flex: 1; min-height: 0; }
.story { display: flex; flex-direction: column; gap: 10px; padding-top: clamp(12px, 3.6cqh, 40px); }
.teaser {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; border-top: 1px solid var(--ink); color: var(--ink); text-align: left;
  font-family: var(--f-serif); font-weight: 700; font-size: clamp(11.2px, 1.739cqh, 14px); line-height: 1.25;
  padding: 7px 0;
}
.teaser b { font-family: var(--f-display); font-weight: 400; color: var(--press-red); font-size: clamp(16.8px, 2.608cqh, 21px); }
.teaser:hover { color: var(--press-red); }
.inside-h { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(14.4px, 2.236cqh, 18px); color: var(--press-red); margin-top: 4px; }
.barcode-row { display: flex; align-items: flex-end; gap: 10px; margin-top: auto; padding-top: 8px; }
.barcode { height: 40px; width: 100px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 3px, var(--ink) 3px 4px, transparent 4px 7px, var(--ink) 7px 10px, transparent 10px 11px); }
.barcode-row span { font-family: var(--f-mono); font-size: clamp(8.0px, 1.242cqh, 10px); color: var(--ink-2); line-height: 1.3; }

/* page 2 */
.numbers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; border-block: 1px solid var(--ink); padding: 10px 0; }
.num-item b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(18.7px, min(4.6cqi, 5.43cqh), 54px); line-height: 1; color: var(--press-red); }
.num-item span { font-family: var(--f-serif); font-size: clamp(10.0px, 1.552cqh, 12.5px); line-height: 1.3; display: block; margin-top: 4px; }
.dates { list-style: none; display: grid; gap: 8px; margin: 10px 0; break-inside: avoid; }
.dates li { display: grid; grid-template-columns: 90px 1fr; gap: 10px; font-family: var(--f-serif); font-size: clamp(11.2px, 1.739cqh, 14px); line-height: 1.4; border-top: 1px solid var(--rule-soft); padding-top: 7px; text-align: left; }
.dates time { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(12.8px, 1.987cqh, 16px); color: var(--press-red); line-height: 1.2; }
.factbox { border: 2px solid var(--ink); padding: 10px 12px; margin: 10px 0; break-inside: avoid; }
.factbox h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(16.0px, 2.484cqh, 20px); color: var(--press-red); margin-bottom: 6px; }
.factbox ol { list-style: none; display: grid; gap: 8px; }
.factbox li { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-family: var(--f-serif); font-size: clamp(10.8px, 1.677cqh, 13.5px); line-height: 1.4; text-align: left; }
.factbox .sec { font-family: var(--f-mono); font-weight: 600; font-size: clamp(8.8px, 1.366cqh, 11px); background: var(--ink); color: var(--paper); padding: 1px 5px; align-self: start; margin-top: 2px; }

/* page 3 */
.family { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 18px; align-items: stretch; }
.member { display: flex; flex-direction: column; gap: 8px; min-width: 0; border-top: 6px solid var(--ink); padding-top: 10px; }
.m2 { border-top-color: var(--press-red); }
.member .size { font-family: var(--f-display); text-transform: uppercase; color: var(--press-red); line-height: 1; font-size: clamp(15.8px, min(3.4cqi, 4.01cqh), 38px); }
.m2 .size { font-size: clamp(21.6px, min(5cqi, 5.90cqh), 56px); }
.member h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(13.0px, min(2.8cqi, 3.30cqh), 30px); line-height: 1; }
.member p { font-family: var(--f-serif); font-size: clamp(11.2px, 1.739cqh, 14px); line-height: 1.45; }
.member .photo { flex: 1; min-height: 0; display: grid; place-items: center; }
.member .photo .ph { font-family: var(--f-display); font-size: clamp(40.3px, min(10cqi, 11.80cqh), 120px); color: var(--rule-soft); }
.member .photo .ph-note { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-family: var(--f-mono); font-size: clamp(8.4px, 1.304cqh, 10.5px); color: var(--ink-2); }
.m1 .photo { flex: .55; }

/* page 2: a plain news article with a margin timeline */
.deck { font-family: var(--f-serif); font-weight: 600; font-style: italic; font-size: clamp(14px, 2.2cqh, 19px); line-height: 1.3; max-width: 62ch; color: var(--ink-2); text-wrap: pretty; }
.p2 { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 3.3fr 1fr; gap: 22px; }
.p2 > * { min-width: 0; }
.article { columns: 3 170px; column-gap: 18px; column-rule: 1px solid var(--rule-soft); }
.crosshead {
  font-family: var(--f-body); font-weight: 800; font-size: clamp(11px, 1.6cqh, 13px);
  text-transform: uppercase; letter-spacing: .05em; text-align: left;
  margin: 10px 0 3px !important; break-after: avoid;
}
.inpull {
  break-inside: avoid; margin: 12px 0; padding: 8px 0 9px;
  border-block: 2px solid var(--ink);
  font-family: var(--f-serif); font-style: italic; font-weight: 600; text-align: left;
  font-size: clamp(16px, 2.6cqh, 21px); line-height: 1.22;
}
.inpull cite { display: block; margin-top: 6px; font-style: normal; font-family: var(--f-body); font-weight: 800; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.sidebar { border-left: 1px solid var(--ink); padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.sidebar h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(17px, 2.6cqh, 22px); line-height: 1; border-top: 4px solid var(--ink); padding-top: 6px; }
.tl { list-style: none; display: grid; }
.tl li { padding: 6px 0 7px; border-bottom: 1px dotted var(--ink-2); font-family: var(--f-serif); font-size: clamp(12px, 1.7cqh, 13.5px); line-height: 1.35; }
.tl b { display: block; font-family: var(--f-body); font-weight: 800; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--press-red); }
.total { margin-top: auto; border-top: 4px solid var(--ink); padding-top: 6px; font-family: var(--f-serif); font-size: 13px; line-height: 1.3; }
.total b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(32px, 5.6cqh, 46px); line-height: 1; color: var(--press-red); }
@container (max-width: 600px) {
  .p2 { grid-template-columns: 1fr; }
  .sidebar { border-left: 0; padding-left: 0; }
}
/* page 3: letters page */
.p3 { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 2.1fr 1fr; gap: 22px; }
.p3 > * { min-width: 0; }
.letters {
  columns: 2 220px; column-gap: 22px; column-rule: 1px solid var(--rule-soft);
  font-family: var(--f-serif); font-size: clamp(11.5px, min(1.85cqi, 2.25cqh), 17.5px); line-height: 1.5;
  text-align: justify; hyphens: auto;
}
.letters p + p { margin-top: .55em; }
.letters .salute { font-weight: 700; }
.letters .sign { text-align: right; font-weight: 700; font-variant: small-caps; letter-spacing: .05em; margin-top: .8em; }
.letters .sign span { display: block; font-variant: normal; font-weight: 400; font-style: italic; letter-spacing: 0; font-size: .9em; }
.p3-side { border-left: 1px solid var(--ink); padding-left: 18px; display: flex; flex-direction: column; gap: 10px; }
.p3-side .photo.wide-photo { aspect-ratio: 16 / 9; }
.side-pull {
  margin: 0; padding: 10px 0; border-block: 3px solid var(--ink);
  font-family: var(--f-display); text-transform: uppercase; color: var(--press-red);
  font-size: clamp(24px, 4.6cqh, 40px); line-height: .95;
}

/* page 4: classifieds */
.cls {
  flex: 1 1 0; min-height: 0;
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto 1fr auto;
  border-top: 3px double var(--ink);
}
.cl { min-width: 0; padding: 12px 20px 12px 0; display: flex; flex-direction: column; gap: 8px; }
.cl h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(20px, 3.6cqh, 34px); line-height: .95; }
.cl p { font-family: var(--f-serif); font-size: clamp(12.5px, 1.9cqh, 15px); line-height: 1.45; }
.wanted { grid-column: 1; grid-row: 1; }
.notices { grid-column: 1; grid-row: 2; border-top: 1px solid var(--ink); }
.howto { grid-column: 1; grid-row: 3; border-top: 1px solid var(--ink); }
.legal { grid-column: 1; grid-row: 4; border-top: 1px solid var(--ink); flex-direction: row; align-items: center; gap: 16px; }
.howto ol { list-style: none; counter-reset: step; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; margin: 0; padding: 0; }
.howto li { counter-increment: step; display: grid; grid-template-columns: auto 1fr; gap: 8px; font-family: var(--f-serif); font-size: clamp(12.5px, 1.9cqh, 15px); line-height: 1.4; }
.howto li::before { content: counter(step); font-family: var(--f-display); color: var(--press-red); font-size: 1.5em; line-height: 1; }
.howto a { color: var(--ink); }
.peanut-ad {
  grid-column: 2; grid-row: 1 / 5;
  margin: 12px 0 12px 0; padding: 16px 14px;
  border: 3px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -8px;
  align-items: center; justify-content: center; text-align: center; gap: 10px;
}
.peanut-ad .ad-label { font-family: var(--f-serif); font-style: italic; font-size: 11px; color: var(--ink-2); }
.peanut-ad .peanut { width: clamp(44px, 12cqh, 96px); height: auto; color: var(--ink); }
.peanut-ad h3 { font-size: clamp(28px, 6cqh, 54px); }
.peanut-ad .ad-foot { font-family: var(--f-body); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border-top: 1px solid var(--ink); padding-top: 8px; }
.lead {
  display: flex; align-items: baseline; gap: 8px;
  color: var(--ink); text-decoration: none;
  font-family: var(--f-serif); font-size: clamp(13px, 2.1cqh, 17px);
  padding: 2px 0;
}
.lead b { font-weight: 700; }
.lead i { flex: 1; border-bottom: 2px dotted var(--ink-2); transform: translateY(-4px); }
.lead span { font-family: var(--f-display); text-transform: uppercase; font-size: 1.15em; letter-spacing: .02em; }
.lead:hover, .lead:hover span { color: var(--press-red); }
.legal .small-print { flex: 1; columns: auto; font-size: clamp(10.5px, 1.5cqh, 12px); line-height: 1.4; }
@container (max-width: 600px) {
  .p3, .cls { grid-template-columns: 1fr; }
  .p3-side { border-left: 0; padding-left: 0; }
  .cls { grid-template-rows: none; }
  .wanted, .notices, .legal, .peanut-ad { grid-column: 1; grid-row: auto; }
  .peanut-ad { margin: 12px 0; }
}
/* page 4 */
.p4-grid { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1.45fr; gap: 22px; }
.p4-grid > * { min-width: 0; }
.p4-left { display: flex; flex-direction: column; gap: 12px; }
.p4-left .photo { flex: 1; min-height: 0; }
.p4-left .photo.wide-photo { flex: none; aspect-ratio: 16 / 9; }
.p4-left .photo.wide-photo img { object-position: 50% 50%; }
.reaction { font-family: var(--f-serif); font-size: clamp(11px, min(1.45cqi, 1.71cqh), 15px); line-height: 1.48; text-align: left; }
.reaction p + p { margin-top: 6px; }
.jump {
  text-align: right; border-bottom: 1px solid var(--ink); padding-bottom: 6px;
  font-family: var(--f-body); font-weight: 800; font-size: clamp(10.5px, 1.6cqh, 12.5px);
  letter-spacing: .06em; text-transform: uppercase;
}
.jump b { color: var(--press-red); }
.jump::after { content: " ▸"; color: var(--press-red); }
.front-pull { margin: 4px 0 0; font-size: clamp(17px, 3cqh, 25px); }
.pull {
  font-family: var(--f-display); text-transform: uppercase; color: var(--press-red);
  font-size: clamp(21.6px, min(6cqi, 7.08cqh), 68px); line-height: .92;
  border-block: 4px solid var(--ink); padding: 12px 0;
}
.letter {
  background: rgba(255, 255, 255, .35); border: 1px solid var(--rule-soft); box-shadow: 4px 4px 0 var(--ink);
  padding: 16px 20px; align-self: start;
  font-family: var(--f-serif); font-size: clamp(9.7px, min(1.6cqi, 1.89cqh), 15.5px); line-height: 1.52;
}
.letter p + p { margin-top: 9px; }
.letter .sig { font-style: italic; font-weight: 600; }

/* page 5 + back page */
.next-list { list-style: none; display: grid; }
.next-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--ink); padding: 14px 0; font-family: var(--f-serif); font-size: clamp(11.5px, min(2.2cqi, 2.60cqh), 21px); }
.next-list b { font-family: var(--f-display); font-weight: 400; color: var(--press-red); font-size: clamp(14.4px, min(3cqi, 3.54cqh), 32px); }
.classified { border: 3px double var(--ink); padding: 14px 16px; display: grid; gap: 8px; }
.classified h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(18.7px, min(4.6cqi, 5.43cqh), 46px); line-height: .95; }
.classified p { font-family: var(--f-serif); font-size: clamp(12.0px, 1.863cqh, 15px); line-height: 1.45; }
.ca-row { display: flex; gap: 8px; align-items: center; border: 1px solid var(--ink); padding: 6px 6px 6px 10px; background: rgba(255, 255, 255, .35); }
.ca-row code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-mono); font-size: clamp(10.0px, 1.552cqh, 12.5px); }
.ca-row button { background: var(--ink); color: var(--paper); border: 0; padding: 9px 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(9.6px, 1.490cqh, 12px); }
.ca-row button:hover { background: var(--press-red); }
.links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.links a { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(13.0px, min(3cqi, 3.54cqh), 28px); color: var(--ink); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--ink); }
.links a:hover { color: var(--press-red); }
.small-print { font-family: var(--f-serif); font-size: clamp(9.6px, 1.490cqh, 12px); line-height: 1.45; color: var(--ink-2); columns: 2 200px; column-gap: 18px; }

/* stack inside a page when it gets narrow */
@container (max-width: 760px) {
  .ear { display: none; }
  .redtop { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: repeat(3, 1fr); }
}
@container (max-width: 600px) {
  .front-grid, .family, .p4-grid { grid-template-columns: 1fr; }
  .front-grid { flex: none; }
  .splash .photo { min-height: 0; aspect-ratio: 4 / 5; flex: none; }
  .member .photo { min-height: 0; flex: none; height: 220px; }
  .p4-left .photo { min-height: 0; aspect-ratio: 1; flex: none; }
  .copy { text-align: left; }
  .links { grid-template-columns: 1fr; }
}

/* dock */
.dock {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 8px;
  background: rgba(26, 23, 20, .92); color: var(--paper);
  border-radius: 999px; padding: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  font-family: var(--f-mono); font-size: 12px; max-width: calc(100vw - 24px);
}
.dock button, .dock a {
  background: transparent; color: var(--paper); border: 1px solid rgba(239, 233, 220, .25);
  border-radius: 999px; padding: 8px 14px; font-family: var(--f-body); font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap;
}
.dock button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.dock button:disabled { opacity: .35; cursor: default; }
.dock .dock-buy { background: var(--gold); color: var(--night); border-color: var(--gold); font-weight: 800; }
#pageno { min-width: 110px; text-align: center; white-space: nowrap; }
@media (max-width: 520px) { .dock .hide-sm { display: none; } #pageno { min-width: 64px; } .dock button, .dock a { padding: 8px 11px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .sheet.flipped { transition-delay: 0s; }
}

/* pages 3-4: the verdict */
.qa li b { color: var(--ink); font-size: 11px; letter-spacing: .03em; margin-bottom: 2px; }
.big-quote {
  margin: 4px 0 2px; padding: 10px 0 11px;
  border-block: 3px solid var(--ink);
  font-family: var(--f-serif); font-style: italic; font-weight: 600;
  font-size: clamp(17px, min(2.9cqi, 3.6cqh), 30px); line-height: 1.18; text-wrap: balance;
}
.big-quote cite { display: block; margin-top: 7px; font-style: normal; font-family: var(--f-body); font-weight: 800; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.p4 { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 3.3fr 1fr; gap: 22px; padding-top: 4px; }
.p4 > * { min-width: 0; }
.tally { display: grid; margin: 0; }
.tally div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 0 7px; border-bottom: 1px dotted var(--ink-2); }
.tally dt { font-family: var(--f-serif); font-size: clamp(12px, 1.7cqh, 13.5px); line-height: 1.3; }
.tally dd { margin: 0; font-family: var(--f-display); font-size: clamp(22px, 3.6cqh, 30px); line-height: 1; }
@container (max-width: 600px) {
  .p4 { grid-template-columns: 1fr; }
}
@container (max-height: 640px) {
  /* the verdict pages keep their full text and sidebars on short screens */
  .paper.wide .copy.keep p { display: block; }
  .paper.wide :is(.p2, .p4).keep { grid-template-columns: 3.3fr 1fr; }
  .paper.wide :is(.p2, .p4).keep .sidebar { display: flex; }
  .paper.wide .keep .tl li { padding: 3px 0 4px; font-size: 11.5px; line-height: 1.3; }
  .paper.wide .keep .total b { font-size: 30px; }
  .paper.wide .big-quote cite { display: none; }
}

/* no page dock: pages turn by click, swipe or arrow keys */
.dock { display: none !important; }