@font-face {
  font-family: "Oswald";
  src: url("../assets/fonts/oswald.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Black";
  src: url("../assets/fonts/archivo-black.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../assets/fonts/caslon.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../assets/fonts/caslon-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../assets/fonts/caslon-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Special Elite";
  src: url("../assets/fonts/special-elite.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f3ead7;
  --paper-2: #e7dcc3;
  --paper-3: #ddd0b4;
  --ink: #14110e;
  --ink-soft: #3c352c;
  --red: #e3242b;
  --red-deep: #b71c22;
  --teal: #0e7c7b;
  --pink: #c7427c;
  --tape: #f3d34a;
  --rule: #1a1714;
  --desk: #3e3428;
  --desk-2: #2a231c;
  --shadow: 6px 10px 0 #14110e;
  --display: "Oswald", "Arial Narrow", sans-serif;
  --scream: "Archivo Black", "Oswald", Impact, sans-serif;
  --serif: "Libre Caslon Text", "Times New Roman", serif;
  --type: "Special Elite", "Courier New", ui-monospace, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #5a4a38, transparent 55%),
    var(--desk-2);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* ---------- Intro / paper sheet ---------- */
.desk {
  min-height: 100svh;
  padding: 28px 16px 60px;
}
.sheet {
  max-width: 1160px;
  margin: 0 auto;
  background-color: var(--paper);
  background-image: url("../assets/img/ui/newsprint.jpg");
  background-size: 400px 400px;
  color: var(--ink);
  box-shadow:
    0 0 0 1px #00000022,
    0 1px 0 #fff8,
    0 30px 60px #00000080,
    0 4px 0 #1a140e;
  position: relative;
  transform-origin: 50% 8%;
  transition: transform 0.75s cubic-bezier(0.2, 0.85, 0.2, 1), opacity 0.55s ease;
}
html.is-intro .sheet {
  transform: rotate(-7deg) scale(0.9) translateY(28px);
  opacity: 0;
}
html.is-intro.is-ready .sheet,
html:not(.is-intro) .sheet {
  transform: none;
  opacity: 1;
}
.skip-intro {
  position: fixed;
  z-index: 80;
  top: 14px;
  right: 14px;
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--tape);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 8px 12px;
  cursor: pointer;
  display: none;
}
html.is-intro .skip-intro { display: inline-block; }

/* ---------- Ticker ---------- */
.ticker {
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 4px solid var(--red);
  font-family: var(--type);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
}
.ticker-label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0 14px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 12px;
}
.ticker-track {
  display: flex;
  width: max-content;
  gap: 0;
  padding: 9px 0 9px 140px;
  animation: ticker 36s linear infinite;
}
.ticker-track span { padding: 0 2.2em; white-space: nowrap; }
.ticker-track span::before {
  content: "✦";
  color: var(--tape);
  margin-right: 2.2em;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker:hover .ticker-track { animation-play-state: paused; }

/* ---------- Masthead ---------- */
.masthead {
  padding: 22px 32px 16px;
  text-align: center;
  container-type: inline-size;
  container-name: mast;
}
.mast-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: end;
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mast-top .left { text-align: left; }
.mast-top .right { text-align: right; }
.mast-top b { color: var(--ink); font-weight: 400; }
.masthead h1 {
  font-family: var(--scream);
  font-weight: 400;
  font-size: clamp(2.4rem, 14cqi, 6.4rem);
  letter-spacing: -0.03em;
  line-height: 0.82;
  text-transform: uppercase;
  margin: 8px 0 6px;
}
.masthead h1 span { color: var(--red); }
.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  margin: 0 0 12px;
  color: var(--ink-soft);
}
.mast-rule {
  border: 0;
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  height: 8px;
  background: transparent;
  margin: 0;
}
.mast-rule.thin {
  height: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 0;
  margin: 8px 0 0;
}

/* ---------- Shared chrome ---------- */
.inner { padding: 0 32px 36px; }
.sec {
  padding-top: 28px;
  scroll-margin-top: 16px;
  container-type: inline-size;
  container-name: sec;
}
.sec-kicker {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--red);
  margin: 0 0 4px;
}
.sec h2 {
  font-family: var(--scream);
  font-weight: 400;
  font-size: clamp(2rem, 10cqi, 4.4rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.sec-lead {
  font-style: italic;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 18px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
  padding: 11px 18px;
  border: 3px solid var(--ink);
  cursor: pointer;
  background: var(--tape);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn.ghost {
  background: var(--paper);
  color: var(--ink);
}
.btn.danger {
  background: var(--red-deep);
  color: #fff;
  border-color: var(--ink);
}
.btn.soon,
.btn[aria-disabled="true"] {
  background: var(--paper-3);
  color: var(--ink-soft);
  cursor: default;
  pointer-events: none;
  box-shadow: none;
  border-style: dashed;
}

.ca {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: #fffdf6;
  border: 2px dashed var(--ink);
  padding: 10px 12px;
  font-family: var(--type);
  font-size: 14px;
  cursor: pointer;
}
.ca span {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--red);
}
.ca code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ca em { font-style: normal; color: var(--teal); }

.stamp {
  display: inline-block;
  font-family: var(--type);
  color: var(--red);
  border: 3px solid var(--red);
  padding: 6px 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  transform: rotate(-7deg);
  mix-blend-mode: multiply;
  background: transparent;
  box-shadow: 2px 2px 0 #e3242b44;
}

/* ---------- Police tape ---------- */
.tape {
  overflow: hidden;
  background: var(--tape);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 13px;
  white-space: nowrap;
  transform: rotate(-1.2deg) scale(1.02);
  margin: 22px -8px;
  box-shadow: 0 6px 0 #0003;
}
.tape b {
  display: inline-block;
  padding: 7px 0;
  animation: ticker 28s linear infinite;
}
.tape b span { padding: 0 1.6em; }

/* ---------- Front page ---------- */
.kicker-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
  color: #fff;
  background: var(--red);
  padding: 6px 10px;
  margin-bottom: 14px;
}
.kicker-bar i { font-style: normal; color: var(--tape); }

.front {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: start;
  container-type: inline-size;
  container-name: front;
}
.scream {
  font-family: var(--scream);
  font-weight: 400;
  font-size: clamp(2.6rem, 15cqi, 6.2rem);
  line-height: 0.84;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.scream em {
  font-style: normal;
  color: var(--red);
  display: block;
}
.deck {
  font-size: 20px;
  font-style: italic;
  margin: 0 0 16px;
  color: var(--ink-soft);
  max-width: 40ch;
}
.front-copy p.body {
  font-size: 16.5px;
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 46ch;
}

.front-art {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.clipping {
  background: #f7f1e3;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 8px 8px 0;
  --tilt: -1.2deg;
  transform: rotate(var(--tilt));
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  position: relative;
}
.clipping:nth-child(even) { --tilt: 1.4deg; }
.clipping.is-in,
.clipping {
  /* default visible; JS adds .is-waiting then reveals */
}
.clipping.is-waiting {
  opacity: 0;
  transform: translateY(28px) rotate(calc(var(--tilt) - 4deg));
}
.clipping.is-in {
  opacity: 1;
  transform: rotate(var(--tilt));
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease, box-shadow 0.28s ease;
}
.clipping:hover {
  transform: translateY(-8px) rotate(0deg);
  box-shadow: 10px 16px 0 var(--ink);
  z-index: 2;
}
.clipping .frame {
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--ink);
}
.clipping .frame img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* never crop; keep full heads */
  object-position: center;
}
.halftone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(#14110e 0.7px, transparent 1.1px) 0 0 / 4px 4px;
  mix-blend-mode: multiply;
  opacity: 0.22;
  pointer-events: none;
}
.caption {
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 4px 10px;
  margin: 0;
}
.caption b { color: var(--red); }

.brief {
  margin-top: 18px;
  padding: 14px 16px 16px;
  background: #fffdf6;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--teal);
  position: relative;
}
.brief h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
  margin: 0 0 6px;
}
.brief h3 span { color: var(--teal); }
.brief .brief-stamp {
  position: absolute;
  right: 10px;
  top: -12px;
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.days-box {
  margin-top: 16px;
  border: 3px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.days-box i {
  font-style: normal;
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tape);
}
.days-box b {
  font-family: var(--scream);
  font-size: clamp(2rem, 8cqi, 3.2rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.days-box em { font-style: normal; font-family: var(--type); font-size: 12px; color: var(--paper-3); }

/* ---------- Wanted ---------- */
.wanted-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 18px;
  margin-top: 8px;
}
.wanted-grid.leads { margin-bottom: 8px; }
.wanted-grid.cast { grid-template-columns: repeat(4, 1fr); }
.poster {
  --tilt: -1deg;
  padding-bottom: 10px;
}
.poster:nth-child(2n) { --tilt: 1.15deg; }
.poster:nth-child(3n) { --tilt: -1.8deg; }
.wanted-banner {
  background: var(--red);
  color: #fff;
  font-family: var(--scream);
  text-align: center;
  letter-spacing: 0.12em;
  font-size: 22px;
  padding: 6px 8px 4px;
  margin: -8px -8px 8px;
  border-bottom: 2px solid var(--ink);
}
.poster h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 22px;
  margin: 0 4px;
  line-height: 1;
}
.poster .aka {
  font-family: var(--type);
  font-size: 11px;
  color: var(--red);
  margin: 4px 4px 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.poster p {
  font-size: 14px;
  margin: 8px 4px 6px;
  color: var(--ink-soft);
}

/* ---------- Financial pages ---------- */
.finance {
  background: #f6f0e0;
  border: 2px solid var(--ink);
  padding: 6px 0 0;
  box-shadow: 5px 5px 0 var(--ink);
}
.finance-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--type);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.finance-head b { color: var(--pink); }
table.quotes {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
table.quotes th,
table.quotes td {
  border-bottom: 1px solid #0003;
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
}
table.quotes th {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--ink-soft);
  width: 28%;
}
table.quotes td { font-family: var(--type); font-size: 15px; }
table.quotes tr:last-child td,
table.quotes tr:last-child th { border-bottom: 0; }
table.quotes .num { font-size: 20px; }
.note {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 14px;
  padding: 10px 14px 14px;
  margin: 0;
  border-top: 1px dashed var(--ink);
}

/* ---------- Police report ---------- */
.report {
  background: #f4ecce;
  border: 2px solid var(--ink);
  padding: 22px 22px 10px;
  box-shadow: 4px 4px 0 var(--ink);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 31px,
    #c9b89655 31px 32px
  );
}
.report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  font-family: var(--type);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}
.report-meta b { color: var(--red); }
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 4px;
}
.steps li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dotted #0005;
  counter-increment: step;
}
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--scream);
  font-size: 32px;
  line-height: 1;
  color: var(--red);
}
.steps h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 16px;
  margin: 0 0 4px;
}
.steps p { margin: 0; font-size: 16px; }

/* ---------- Letters ---------- */
.letters {
  display: grid;
  gap: 14px;
}
.letter {
  border-bottom: 1px solid #0003;
  padding: 0 0 12px;
  background: transparent;
}
.letter:last-child { border-bottom: 0; }
.letter summary {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  padding: 8px 0;
  font-size: 18px;
}
.letter summary::-webkit-details-marker { display: none; }
.letter summary::before {
  content: "Dear Editor — ";
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pink);
  font-size: 16px;
}
.letter p { margin: 0 0 6px; }
.letter .signoff {
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Classifieds / footer ---------- */
.classifieds {
  background: var(--paper-2);
  border-top: 4px solid var(--ink);
  padding: 22px 32px 36px;
  container-type: inline-size;
}
.classifieds h2 { margin-bottom: 14px; }
.ads {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 18px;
  column-rule: 1px solid #0004;
}
.ad {
  font-size: 14px;
  line-height: 1.45;
}
.ad h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--red);
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
}
.ad p { margin: 0 0 8px; }
.ad a { color: var(--teal); font-weight: 700; }
.legal, .safety {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 16px 0 0;
}
.safety {
  border: 1px solid var(--ink);
  padding: 10px 12px;
  background: #fffdf6;
}
.safety b {
  font-family: var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  font-size: 12px;
  display: block;
  margin-bottom: 4px;
}
.colophon {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Responsive: art before copy on phones/tablets ---------- */
@media (max-width: 1080px) {
  .wanted-grid.cast { grid-template-columns: repeat(2, 1fr); }
  .ads { grid-template-columns: repeat(2, 1fr); column-rule: none; }
}
@media (max-width: 820px) {
  .desk { padding: 0 0 40px; }
  .sheet { box-shadow: none; }
  .masthead, .inner, .classifieds { padding-left: 16px; padding-right: 16px; }
  .front {
    display: flex;
    flex-direction: column;
  }
  .front-art { order: -1; margin-bottom: 8px; }
  .wanted-grid.leads { grid-template-columns: 1fr; }
  .scream { font-size: clamp(2.4rem, 18cqi, 3.6rem); }
  .mast-top { grid-template-columns: 1fr; text-align: left; gap: 4px; }
  .mast-top .right, .mast-top .left { text-align: left; }
}
@media (max-width: 520px) {
  .front-art,
  .wanted-grid.cast { grid-template-columns: 1fr; }
  .ads { grid-template-columns: 1fr; }
  .steps li { grid-template-columns: 48px 1fr; }
  .brief .brief-stamp { position: static; display: inline-block; margin: 8px 0; }
}

@media (max-height: 430px) and (max-width: 900px) {
  .desk { padding: 0; }
  .masthead { padding-top: 12px; padding-bottom: 8px; }
  .masthead h1 { font-size: clamp(1.35rem, 6vw, 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sheet, .clipping, .btn, .ticker-track, .tape b {
    animation: none !important;
    transition: none !important;
  }
  html.is-intro .sheet,
  html.is-intro.is-ready .sheet {
    transform: none;
    opacity: 1;
  }
  html.is-intro .skip-intro { display: none; }
  .clipping.is-waiting { opacity: 1; transform: none; }
  .clipping:hover { transform: none; }
}

/* ===== Masthead flag / ears / folio (HTML structure) ===== */
.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "earL flag earR"
    "date date date"
    "folio folio folio";
  gap: 8px 20px;
  align-items: center;
  padding: 18px 32px 0;
}
.ear { grid-area: auto; }
.ear.left { grid-area: earL; text-align: left; }
.ear.right { grid-area: earR; text-align: right; }
.ear {
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.ear b { display: block; color: var(--ink); font-weight: 400; }
.ear i { font-style: normal; color: var(--teal); }
.flag {
  grid-area: flag;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.flag img {
  width: 96px;
  height: 96px;
  border: 2px solid var(--ink);
  background: #000;
  flex: none;
}
.paper-kicker {
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 2px;
}
.motto {
  font-family: var(--display);
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 4px 0 0;
  color: var(--ink);
}
.masthead h1 {
  margin: 0;
  text-align: left;
  font-size: clamp(1.55rem, 5.4cqi, 2.9rem);
  line-height: 0.88;
}
.masthead h1 span {
  display: block;
  color: var(--red);
  font-size: 1.55em;
  letter-spacing: -0.04em;
}
.dateline {
  grid-area: date;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 8px 0;
  margin-top: 6px;
}
.dateline .red { color: var(--red); }
.folio {
  grid-area: folio;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  padding: 8px 0 16px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  border-bottom: 2px solid var(--ink);
}
.folio a { text-decoration: none; }
.folio a:hover { color: var(--red); }

/* ===== Front spread ===== */
.front {
  padding: 22px 32px 10px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-areas:
    "copy art"
    "brief art";
  gap: 18px 28px;
  align-items: start;
  container-type: inline-size;
  container-name: front;
}
.front-copy { grid-area: copy; }
.front-art { grid-area: art; }
.front-brief { grid-area: brief; display: grid; gap: 14px; }
.kicker {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
  color: #fff;
  background: var(--red);
  display: inline-block;
  padding: 4px 8px;
  margin: 0 0 10px;
}

.clipping .halftone,
.halftone {
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--ink);
}
.clipping .halftone img,
.halftone img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
figcaption, .poster-body { padding: 8px 6px 10px; }
figcaption b, .poster-body h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  font-size: 15px;
  margin: 0;
}
figcaption i {
  font-style: italic;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-soft);
  display: block;
  margin-top: 2px;
  text-transform: none;
  letter-spacing: 0;
}

.brief, .days, .dossier, .table-wrap, .letter, .poster, .photo {
  /* already a clipping */
}
.brief-label, .table-flag, .dossier-meta {
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 6px;
}
.brief { position: relative; padding: 14px 16px 18px; overflow: hidden; }
.brief h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 20px;
  margin: 0 0 8px;
  line-height: 1.15;
}
.brief p { margin: 0 0 10px; font-size: 15px; }
.brief-actions, .steps + .brief-actions, .dossier .brief-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.brief .stamp {
  position: absolute;
  right: 10px;
  bottom: 14px;
  z-index: 1;
  pointer-events: none;
}
.days {
  padding: 14px 16px;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.days .brief-label { color: var(--tape); }
.days-label {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 13px;
  margin: 0 0 4px;
  color: var(--tape);
}
.days-count {
  font-family: var(--scream);
  font-size: clamp(2rem, 8cqi, 3.4rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.days-count span {
  display: inline-block;
  margin-right: 10px;
}
.days-count i {
  font-style: normal;
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--paper-3);
  margin-left: 2px;
}
.days-note { font-family: var(--type); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; margin: 8px 0 0; color: var(--paper-3); }

/* Wanted */
.wanted, .financials, .report, .letters { padding: 10px 32px 28px; }
.sec-head { margin-bottom: 16px; }
.posters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.posters.featured { grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
.wanted-banner {
  background: var(--red);
  color: #fff;
  font-family: var(--scream);
  text-align: center;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 8px 5px;
  margin: -8px -8px 8px;
  border-bottom: 2px solid var(--ink);
}
.wanted-banner.slim { font-size: 13px; letter-spacing: 0.12em; padding: 5px 6px; }
.aka {
  font-family: var(--type);
  font-size: 11px;
  color: var(--red);
  margin: 4px 0 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.poster-body p { font-size: 14px; margin: 8px 0 0; color: var(--ink-soft); }
.poster-body h3 { font-size: 20px; }

.rule-double {
  height: 8px;
  margin: 8px 32px;
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* Financial table */
.table-wrap { padding: 0 0 24px; position: relative; overflow: hidden; background: #f6f0e0; }
.table-flag { padding: 10px 16px 0; }
table.stock { width: 100%; border-collapse: collapse; }
table.stock th, table.stock td {
  padding: 12px 16px;
  border-bottom: 1px solid #0003;
  text-align: left;
  vertical-align: middle;
}
table.stock thead th {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 12px;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 0;
}
table.stock tbody th {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
  width: 28%;
  color: var(--ink-soft);
}
table.stock td { font-family: var(--type); font-size: 15px; }
table.stock a { color: var(--teal); font-weight: 700; }
table.stock tr:last-child th,
table.stock tr:last-child td { border-bottom: 0; }
.ca.inline { border-width: 1px; padding: 8px 10px; background: #fffdf6; }
.table-stamp { position: absolute; right: 18px; bottom: 14px; pointer-events: none; }

/* Dossier / police report */
.dossier {
  padding: 18px 20px 20px;
  background: #f4ecce;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, #c9b89655 31px 32px);
}
.dossier-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dotted #0005;
}
.steps li:last-child { border-bottom: 0; }
.steps li > b {
  font-family: var(--scream);
  font-size: 28px;
  line-height: 1;
  color: var(--red);
  font-weight: 400;
}
.steps h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 16px;
  margin: 0 0 4px;
}
.steps p { margin: 0; }

/* Letters */
.letter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.letter { padding: 16px 18px 18px; background: #fffdf6; }
.letter h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 18px;
  margin: 0 0 8px;
  line-height: 1.15;
}
.letter p { margin: 0; font-size: 15.5px; }
.letter i { color: var(--pink); }

/* Classifieds extras */
.classifieds { padding-top: 24px; }
.classifieds .sec-head { padding: 0; }
.ad .soon {
  font-family: var(--type);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ad ul { margin: 0; padding-left: 18px; }
.ad li { margin: 0 0 4px; }

@media (max-width: 1080px) {
  .posters { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .masthead, .front, .wanted, .financials, .report, .letters, .classifieds, .rule-double {
    padding-left: 16px;
    padding-right: 16px;
  }
  .masthead {
    grid-template-columns: 1fr;
    grid-template-areas:
      "flag"
      "earL"
      "earR"
      "date"
      "folio";
    text-align: left;
  }
  .ear.left, .ear.right { text-align: left; }
  .flag { width: 100%; }
  .masthead h1 { font-size: clamp(1.45rem, 7.5vw, 2.2rem); }
  .folio { justify-content: flex-start; }
  .front {
    display: flex;
    flex-direction: column;
    padding-top: 16px;
  }
  .front-art { order: -1; }
  .posters.featured { grid-template-columns: 1fr; }
  .letter-grid { grid-template-columns: 1fr; }
  .brief .stamp { position: static; display: inline-block; margin-top: 10px; transform: rotate(-4deg); }
  .table-stamp { position: static; display: inline-block; margin: 8px 16px 0; }
}
@media (max-width: 520px) {
  .front-art,
  .posters { grid-template-columns: 1fr; }
  .flag { flex-wrap: wrap; }
}

/* ===== Conflict cleanup: HTML uses section.report / .letters, not the old wrappers ===== */
section.report,
section.letters {
  background: none;
  background-image: none;
  border: 0;
  box-shadow: none;
  display: block;
  padding: 10px 32px 28px;
}
.steps li::before { content: none !important; display: none !important; }
.sec-head h2 {
  font-family: var(--scream);
  font-weight: 400;
  font-size: clamp(2rem, 10cqi, 4.4rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.wanted, .financials, .report, .letters, .classifieds, .front, #front, #wanted, #financials, #report, #letters, #classifieds {
  scroll-margin-top: 16px;
}
.wanted, .financials, section.report, section.letters, .classifieds {
  container-type: inline-size;
}

/* tape already uses b > span; keep a second copy for the loop */
.tape b { white-space: nowrap; }

@media (max-width: 820px) {
  section.report,
  section.letters {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tape b, .tape span { animation: none !important; }
}

/* Long contract address wrapping so tables never overflow */
.ca.inline {
  max-width: 100%;
  flex-wrap: wrap;
}
.ca.inline code {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.table-wrap, .dossier, .brief, .ad, .letter {
  max-width: 100%;
}
table.stock { table-layout: auto; }
@media (max-width: 820px) {
  table.stock tbody th { width: auto; display: block; padding-bottom: 0; border-bottom: 0; }
  table.stock tbody td { display: block; padding-top: 4px; }
  table.stock tbody th, table.stock tbody td { width: 100%; }
  .letter p code, .ad code {
    overflow-wrap: anywhere;
    word-break: break-all;
  }
}

/* ===== Overflow + hero photo size fixes ===== */
html, body { overflow-x: clip; }
.sheet { overflow-x: clip; }
.front-copy, .front-art, .front-brief, .clipping, .posters, .letter-grid { min-width: 0; }
.scream { overflow-wrap: anywhere; }

/* Stack the two lead stills so they stay large and uncropped */
.front-art {
  grid-template-columns: 1fr;
}

/* Tape stays inside the sheet; no negative margins or scale */
.tape {
  transform: none;
  margin: 18px 0;
  width: 100%;
  max-width: 100%;
}

/* Phones, tablets, and short landscape: art before copy, no side overflow from tilts */
@media (max-width: 900px) {
  .desk { padding: 0 0 40px; }
  .sheet { box-shadow: none; }
  .masthead, .front, .wanted, .financials, section.report, section.letters, .classifieds, .rule-double, .inner {
    padding-left: 16px;
    padding-right: 16px;
  }
  .masthead {
    grid-template-columns: 1fr;
    grid-template-areas:
      "flag"
      "earL"
      "earR"
      "date"
      "folio";
    text-align: left;
  }
  .ear.left, .ear.right { text-align: left; }
  .flag { width: 100%; }
  .masthead h1 { font-size: clamp(1.45rem, 7.5vw, 2.2rem); }
  .folio { justify-content: flex-start; }
  .front {
    display: flex;
    flex-direction: column;
    padding-top: 16px;
  }
  .front-art { order: -1; margin-bottom: 8px; }
  .posters.featured { grid-template-columns: 1fr; }
  .letter-grid { grid-template-columns: 1fr; }
  .scream { font-size: clamp(2.4rem, 18cqi, 3.6rem); }
  .clipping { --tilt: 0.6deg; }
  .clipping:nth-child(even) { --tilt: -0.6deg; }
  .brief .stamp { position: static; display: inline-block; margin-top: 10px; transform: rotate(-4deg); }
  .table-stamp { position: static; display: inline-block; margin: 8px 16px 0; }
  table.stock tbody th { width: auto; display: block; padding-bottom: 0; border-bottom: 0; }
  table.stock tbody td { display: block; padding-top: 4px; }
  table.stock tbody th, table.stock tbody td { width: 100%; }
  .letter p code, .ad code {
    overflow-wrap: anywhere;
    word-break: break-all;
  }
}

@media (max-height: 430px) and (max-width: 900px) {
  .front-art { order: -1; }
}

/* Slightly tighter scream so the third headline line fits a 800px desktop hero */
.scream { font-size: clamp(2.6rem, 13cqi, 5.4rem); }
.front-art .clipping { width: 100%; }

/* Short landscape phones: compact masthead so the lead still is on the first screen */
@media (max-height: 430px) and (max-width: 900px) {
  .ear, .paper-kicker, .motto { display: none; }
  .flag img { width: 48px; height: 48px; }
  .masthead { padding-top: 6px; padding-bottom: 0; gap: 2px 12px; }
  .masthead h1 { font-size: clamp(1.35rem, 6vw, 2rem); margin: 0; }
  .dateline { padding: 4px 0; margin-top: 0; }
  .folio { padding: 4px 0 8px; }
  .ticker-track { padding-top: 6px; padding-bottom: 6px; }
  .desk { padding: 0; }
}

/* Short landscape: fit the full lead still (no cropped head) in the first screen */
@media (max-height: 430px) and (max-width: 900px) {
  .front-art .clipping .halftone {
    width: auto;
    max-width: 100%;
    max-height: calc(100svh - 12.5rem);
    aspect-ratio: 16 / 9;
    margin-inline: auto;
  }
  .front-art .clipping figcaption { padding-top: 4px; padding-bottom: 6px; }
}

@media (max-height: 430px) and (max-width: 900px) {
  .front-art .clipping {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
  .front-art .clipping .halftone {
    width: min(100%, calc((100svh - 12.5rem) * 16 / 9));
    max-height: calc(100svh - 12.5rem);
    aspect-ratio: 16 / 9;
    margin-inline: auto;
  }
}
@media (max-height: 430px) and (max-width: 900px) {
  .front-art { justify-items: center; }
  .front-art .clipping { justify-self: center; }
}

/* Flex column fronts must stretch; leftover align-items:start from the desktop grid shrinks art */
@media (max-width: 900px) {
  .front {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .front-art { width: 100%; }
}