/* Ratchet USA — a place to come back to. Local assets and system fonts only. */
:root {
  --paper: #f2eee3;
  --paper-light: #faf7ee;
  --paper-deep: #e5dfcf;
  --ink: #20291f;
  --muted: #666b5d;
  --rust: #d44b2c;
  --rust-dark: #a73520;
  --sage: #b9c2a1;
  --teal: #416e64;
  --line: #c7c7b4;
  --display: Impact, "Arial Narrow", "Franklin Gothic Condensed", sans-serif;
  --sans: "Arial", "Helvetica Neue", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono: "Courier New", monospace;
  --wide: 1420px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-wrap: break-word;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .045;
  background-image: repeating-radial-gradient(circle at 20% 40%, #20291f 0 .4px, transparent .6px 2px), repeating-linear-gradient(115deg, transparent 0 3px, #20291f 3.2px 3.5px, transparent 3.7px 6px);
  background-size: 7px 9px, 11px 13px;
}
::selection { background: var(--rust); color: var(--paper-light); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--rust-dark); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
button, input, select, textarea { border-radius: 0; }
img, svg { max-width: 100%; }
img { display: block; }
svg { display: block; }
figure { margin: 0; }
h1, h2, h3, h4, p { margin: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 5px;
}
[hidden], .hidden { display: none !important; }
.sr-only, .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -80px;
  left: 20px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper-light);
}
.skip-link:focus { top: 16px; }

.utility {
  min-height: 37px;
  padding: 9px max(32px, calc((100vw - var(--wide)) / 2));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: var(--ink);
  color: var(--paper);
  font: 700 10px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 1.4px;
}
.utility a { color: inherit; text-decoration: none; }
.utility a:hover { color: var(--sage); }
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-radius: 100%;
  background: #ced395;
  box-shadow: 0 0 0 3px #ced3951f;
  vertical-align: 1px;
}
.utility-right { display: flex; gap: 22px; align-items: center; }
.utility > span:first-child { white-space: nowrap; }
.utility > span:nth-child(2) { text-align: center; }
.utility button { flex-shrink: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; }
.utility button:hover { color: var(--sage); }
.mast {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 27px 0 24px;
  border-bottom: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  font: 64px/.85 var(--display);
  letter-spacing: -1.7px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.brand span, .brand em, .brand b { color: var(--rust); font-style: normal; font-weight: inherit; }
.brand small { font: 10px/1 var(--mono); letter-spacing: 1px; align-self: flex-start; margin-top: 3px; }
.brand:hover { color: var(--ink); }
.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 28px; }
.nav a, .nav button {
  padding: 5px 0;
  border: 0;
  background: none;
  font: 700 11px/1.3 var(--sans);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-decoration: none;
  white-space: nowrap;
}
.nav a[aria-current="page"] { color: var(--rust); }
.nav a:hover, .nav button:hover { color: var(--rust-dark); }
.nav .search-toggle { padding-left: 22px; border-left: 1px solid var(--line); }
.menu-toggle { display: none; }
body > main, .site-main { max-width: var(--wide); margin: 0 auto; }

.hero { display: grid; grid-template-columns: .88fr 1.12fr; gap: 55px; padding: 42px 0 37px; align-items: stretch; }
.hero-copy { padding: 12px 0 7px; display: flex; flex-direction: column; align-items: flex-start; }
.eyebrow, .tag, .meta, .hero-caption, .stamp, figcaption {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.eyebrow { display: block; margin-bottom: 18px; color: var(--rust-dark); font-size: 10px; font-weight: 700; line-height: 1.5; }
.eyebrow::before { content: ""; display: inline-block; width: 20px; height: 2px; margin-right: 9px; vertical-align: middle; background: currentColor; }
.hero-title { margin: 0 0 25px; max-width: 690px; font: clamp(70px, 6.1vw, 105px)/.95 var(--display); text-transform: uppercase; letter-spacing: -.9px; }
.hero-title span { display: block; }
.hero-title em { color: var(--rust); font-style: normal; }
.dek { max-width: 430px; color: #444b3f; font: 18px/1.6 var(--serif); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 27px; }
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  min-height: 43px;
  padding: 13px 19px;
  border: 1px solid var(--rust);
  background: var(--rust);
  color: var(--paper-light);
  font: 700 10px/1.35 var(--sans);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-decoration: none;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.button:hover { color: var(--paper-light); background: var(--rust-dark); border-color: var(--rust-dark); transform: translateY(-2px); }
.button.secondary { background: transparent; border-color: var(--ink); color: var(--ink); }
.button.secondary:hover { background: var(--ink); color: var(--paper-light); }
.hero-caption { margin-top: auto; padding-top: 30px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.hero-art { position: relative; min-height: 460px; overflow: hidden; border: 1px solid var(--ink); background: var(--sage); }
.hero-art::after { content: ""; position: absolute; inset: 10px; border: 1px solid #f2eee36e; pointer-events: none; }
.hero-art > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 50% 57%; filter: saturate(.79) contrast(.97); }
.stamp { position: absolute; z-index: 2; top: 23px; right: 22px; max-width: 160px; padding: 10px 14px; border: 1px solid var(--ink); background: var(--paper-light); color: var(--ink); font-size: 9px; line-height: 1.6; text-align: center; transform: rotate(3deg); box-shadow: 3px 3px 0 #20291f25; }
.stamp strong { display: block; font: 24px/1.2 var(--display); letter-spacing: .5px; }
.hero-art figcaption, .hero-art .art-caption { position: absolute; bottom: 20px; left: 23px; right: 23px; z-index: 2; color: var(--paper-light); font: 9px/1.5 var(--mono); letter-spacing: 1.3px; text-transform: uppercase; text-shadow: 0 1px 5px #000; }
.ticker { position: relative; display: flex; align-items: center; gap: 22px; overflow: hidden; padding: 12px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font: 10px/1.5 var(--mono); letter-spacing: .6px; text-transform: uppercase; }
.ticker strong, .ticker > b { align-self: stretch; display: flex; align-items: center; flex-shrink: 0; padding-right: 22px; color: var(--rust-dark); border-right: 1px solid var(--ink); font-size: 10px; }
.ticker > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker a { flex-shrink: 0; margin-left: auto; font-weight: 700; text-decoration: none; }
.ticker-track { display: flex; gap: 30px; min-width: 0; overflow: hidden; }
.ticker-track span + span::before { content: "✳"; margin-right: 30px; color: var(--rust); }

.section { padding: 45px 0; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-heading .eyebrow { margin-bottom: 5px; }
.section-heading h2 { font: 39px/1.1 var(--display); text-transform: uppercase; letter-spacing: .1px; }
.section-heading > a, .section-heading > .text-link, .text-link { font: 700 10px/1.5 var(--sans); text-transform: uppercase; letter-spacing: 1px; text-decoration: none; }
.section-heading > a { padding-bottom: 4px; white-space: nowrap; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 27px; }
.feature-card { min-width: 0; position: relative; display: flex; flex-direction: column; text-decoration: none; }
.feature-card:hover { color: var(--ink); }
.feature-card:hover h3, .feature-card:hover .text-link { color: var(--rust-dark); }
.feature-card:hover .feature-art { filter: saturate(1.05); }
.feature-card.feature-lead { grid-column: span 2; display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; padding-right: 28px; border-right: 1px solid var(--line); }
.feature-art { display: block; position: relative; min-height: 200px; overflow: hidden; background-color: var(--sage); background-size: cover; background-position: center 46%; border: 1px solid #20291f21; filter: saturate(.78); transition: filter .2s ease; }
.feature-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 36%; filter: saturate(.7); transition: transform .35s ease, filter .35s ease; }
a.feature-art:hover img { transform: scale(1.035); filter: saturate(1); }
.feature-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #20291f33, transparent 60%); pointer-events: none; }
.feature-art .tag { position: absolute; left: 14px; bottom: 13px; z-index: 1; background: var(--paper); color: var(--ink); padding: 5px 8px; font-size: 9px; }
.feature-art.story-plate { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 9px; padding: 22px 24px 41px; background: #e8dfcb; color: var(--ink); filter: none; }
.feature-art.story-plate::after { display: none; }
.story-plate .plate-rule { width: 100%; border-top: 2px solid var(--rust); }
.story-plate .plate-mark { max-width: 100%; font: 42px/1.05 var(--display); letter-spacing: .02em; overflow-wrap: anywhere; }
.story-plate .plate-note { font: 700 10px/1.45 var(--mono); letter-spacing: .08em; color: var(--rust-dark); }
.feature-art.plate-wire { background: #273d32; color: var(--paper); }
.plate-wire .plate-rule { border-color: #d6b890; }
.plate-wire .plate-note { color: #ead5b0; }
.feature-body { display: flex; flex-direction: column; align-items: flex-start; padding: 17px 0 0; }
.feature-lead .feature-body { padding: 4px 0 0; }
.tag { display: inline-block; color: var(--rust-dark); font-size: 9px; line-height: 1.5; font-weight: 700; }
.feature-body h3, .feature-body h2 { margin: 9px 0 12px; font: 29px/1.12 var(--display); text-transform: uppercase; letter-spacing: .2px; }
.feature-body h3 a, .feature-body h2 a { text-decoration: none; }
.feature-body p { font: 15px/1.6 var(--serif); color: #505749; }
.feature-body > a:last-child { margin-top: 20px; font: 700 10px/1.5 var(--sans); text-transform: uppercase; letter-spacing: 1px; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.feature-body .meta { margin-top: 16px; }
.feature-body > .eyebrow { margin-bottom: 0; color: var(--rust-dark); font: 700 9px/1.5 var(--mono); letter-spacing: 1px; }
.feature-body > .text-link { margin-top: 20px; padding-bottom: 3px; border-bottom: 1px solid var(--ink); }
.feature-card:not(.feature-lead) > .feature-art { max-height: 190px; }
.feature-card:not(.feature-lead) > .feature-art img { position: absolute; inset: 0; }
.feature-card.feature-lead > .feature-art img { position: absolute; inset: 0; }
.feature-card.text-feature { padding: 22px; border: 1px solid var(--ink); background: var(--paper-deep); }
.feature-card.text-feature h3 { font-size: 36px; }
.feature-card.text-feature .feature-body { height: 100%; padding: 0; }
.feature-card.text-feature .feature-body > a:last-child { margin-top: auto; padding-top: 25px; }
.feature-number { display: block; color: var(--rust); font: 78px/1 var(--display); }

.comic-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 23px; }
.comic-card { min-width: 0; display: block; text-decoration: none; }
.comic-card:hover { color: var(--ink); }
.comic-card:hover h3, .comic-card:hover h2, .comic-card:hover .text-link { color: var(--rust-dark); }
.comic-card > a { display: block; text-decoration: none; }
.comic-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border: 1px solid var(--ink); background: var(--paper-light); filter: saturate(.83); transition: filter .2s ease, transform .2s ease; }
.comic-card:hover img { filter: saturate(1.1); transform: translateY(-3px); }
.comic-image { position: relative; margin-bottom: 13px; }
.comic-image .tag { position: absolute; left: 10px; bottom: 10px; margin: 0; padding: 4px 7px; background: var(--paper-light); color: var(--ink); border: 1px solid #20291f4d; }
.comic-card .tag { margin-top: 13px; }
.comic-card h3, .comic-card h2 { margin: 6px 0 7px; font: 23px/1.15 var(--display); text-transform: uppercase; letter-spacing: .25px; }
.comic-card h3 a, .comic-card h2 a { text-decoration: none; }
.comic-card p:not(.meta) { margin: 8px 0; color: #505749; font: 14px/1.55 var(--serif); }
.meta { color: var(--muted); font-size: 9px; line-height: 1.7; }
.comic-card .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.comic-card .text-link { display: inline-block; margin-top: 10px; font-size: 9px; }

.district { display: grid; grid-template-columns: 1.2fr 1fr; gap: 46px; align-items: center; }
.map { position: relative; min-height: 0; aspect-ratio: 40 / 27; overflow: hidden; background-color: #d8dec7; background-image: linear-gradient(#faf7ee45 1px, transparent 1px), linear-gradient(90deg, #faf7ee45 1px, transparent 1px); background-size: 30px 30px; border: 1px solid #a7b39c; }
.map svg { width: 100%; height: auto; min-height: 0; }
.map .map-label { fill: var(--ink); font: 700 11px var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.map .map-river { fill: #91b3a7; }
.map .map-road { stroke: var(--paper-light); stroke-width: 12; fill: none; }
.map .map-road-minor { stroke: var(--paper-light); stroke-width: 6; fill: none; }
.map-pin { position: absolute; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 7px; transform: translate(-50%, -50%); max-width: 46%; padding: 7px 9px; border: 1px solid var(--ink); background: var(--paper-light); color: var(--ink); font: 700 9px/1.4 var(--mono); letter-spacing: .2px; text-transform: uppercase; text-decoration: none; box-shadow: 3px 3px 0 #20291f25; }
.map-pin > span { color: var(--rust-dark); font-weight: 700; }
.map-pin > b { font-weight: 700; }
.map-pin:hover { background: var(--rust); color: var(--paper-light); z-index: 2; }
.map-pin:hover > span { color: var(--paper-light); }
.map a:hover text { fill: var(--rust-dark); }
.map a:focus-visible { outline: 3px solid var(--rust); }
.map-legend { position: absolute; bottom: 12px; left: 14px; font: 8px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .8px; }
.map-compass { position: absolute; top: 12px; right: 14px; text-align: center; font: 12px/1.4 var(--mono); }
.map-key { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin: 15px 0 10px; font: 700 10px/1.4 var(--mono); letter-spacing: .5px; text-transform: uppercase; }
.map-key span { display: inline-flex; gap: 8px; align-items: center; }
.map-key i { display: inline-block; width: 28px; border-top: 5px solid; }
.map-key .map-key-cart { border-color: #c55c37; }
.map-key .map-key-foot { border-color: #294334; border-top-style: dotted; }
.map-key .map-key-water { border-color: #99bbb0; }
.map-reading { max-width: 780px; margin: 0 0 9px; color: #414c3e; font: 16px/1.55 var(--serif); }
.commons-detail { padding-top: 10px; }
.commons-detail-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,480px); gap: 8px 28px; align-items: end; margin-bottom: 22px; }
.commons-detail-intro .eyebrow { grid-column: 1 / -1; }
.commons-detail-intro h2 { margin: 0; font: 48px/1.05 var(--display); text-transform: uppercase; }
.commons-detail-intro > p:last-child { margin: 0 0 4px; color: #4b5748; font: 17px/1.55 var(--serif); }
.commons-inset { overflow: hidden; border: 1px solid #9cae98; background: #dce3d2; }
.commons-inset svg { display: block; width: 100%; height: auto; }
.commons-map-key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 14px 0 8px; font: 700 10px/1.4 var(--mono); letter-spacing: .5px; text-transform: uppercase; }
.commons-map-key span { display: inline-flex; align-items: center; gap: 8px; }
.commons-map-key i { display: inline-block; width: 28px; border-top: 5px solid #c55c37; }
.commons-map-key .commons-key-foot { border-color: #294334; border-top-style: dotted; }
.commons-map-key .commons-key-maintenance { border-color: #35483e; border-top-style: dashed; }
.commons-guide { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 28px; margin: 15px 0 0; padding: 0; list-style: none; }
.commons-guide li { display: flex; gap: 12px; padding: 16px 0 18px; border-top: 1px solid var(--line); }
.commons-guide li > span { color: var(--rust-dark); font: 700 12px/1.5 var(--mono); }
.commons-guide strong { font: 700 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .4px; }
.mall-reading-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.mall-reading-card { border: 1px solid var(--line); background: var(--paper-deep); }
.mall-reading-art { display: block; aspect-ratio: 3/2; overflow: hidden; background: var(--sage); }
.mall-reading-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mall-reading-copy { padding: 20px 22px 22px; }
.mall-reading-card h3 { margin: 12px 0; font: 28px/1.12 var(--display); text-transform: uppercase; }
.mall-reading-card h3 a { text-decoration: none; }
.mall-reading-card h3 a:hover { color: var(--rust-dark); }
.mall-reading-card > p:last-child { margin: 0; color: #505749; font: 15px/1.55 var(--serif); }
.commons-guide p { margin: 5px 0 0; color: #4b5748; font: 14px/1.5 var(--serif); }
.district-copy .eyebrow { margin-bottom: 12px; }
.district-copy h2, .district-copy h3 { max-width: 470px; font: 43px/1.07 var(--display); text-transform: uppercase; margin-bottom: 17px; }
.district-copy > p { max-width: 465px; color: #505749; font: 16px/1.65 var(--serif); }
.place-links { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.place-links a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 0; border-top: 1px solid var(--line); font: 700 10px/1.5 var(--sans); letter-spacing: .5px; text-transform: uppercase; text-decoration: none; }
.place-links a > span { color: var(--rust-dark); font: 10px var(--mono); }
.passport { padding: 27px 0 0; }
.passport > p:not(.eyebrow) { font: 15px/1.6 var(--serif); }
.passport [data-passport] { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 18px; }
.passport [data-passport] a { font: 700 10px/1.5 var(--mono); text-transform: uppercase; }
.lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 42px 0 48px; }
.radio-box { position: relative; overflow: hidden; padding: 30px 32px; background: var(--ink); color: var(--paper); }
.radio-box::after { content: ""; position: absolute; right: -40px; top: -30px; width: 240px; height: 240px; border: 1px solid #b9c2a126; border-radius: 50%; box-shadow: 0 0 0 25px #b9c2a10d, 0 0 0 50px #b9c2a108, 0 0 0 75px #b9c2a105; pointer-events: none; }
.radio-box .eyebrow { position: relative; z-index: 1; color: var(--sage); margin-bottom: 18px; }
.radio-box h2 { position: relative; z-index: 1; margin-bottom: 9px; font: 38px/1.1 var(--display); text-transform: uppercase; letter-spacing: .5px; }
.radio-box > p { max-width: 410px; font: 15px/1.6 var(--serif); color: #d2d6c9; }
.radio-controls { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 15px; margin-top: 25px; }
.radio-controls button { min-width: 42px; min-height: 42px; padding: 10px 15px; border: 1px solid var(--sage); color: var(--paper); background: transparent; font: 700 10px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 1px; }
.radio-controls button:hover { background: var(--sage); color: var(--ink); }
.radio-controls button[aria-pressed="true"] { background: var(--sage); color: var(--ink); }
.radio-box [data-station-panel] { margin-top: 24px; }
.radio-box > .text-link { display: inline-block; margin-top: 22px; position: relative; z-index: 1; }
.radio-readout { color: var(--sage); font: 10px/1.6 var(--mono); letter-spacing: .8px; text-transform: uppercase; }
.radio-lines { margin-top: 25px; padding-top: 18px; border-top: 1px solid #b9c2a13d; color: #d2d6c9; font: 14px/1.7 var(--serif); min-height: 64px; }
.radio-lines p + p { margin-top: 10px; }
.radio-box a { color: var(--paper); }
.noticeboard { padding: 6px 0 0 11px; }
.noticeboard > .eyebrow { margin-bottom: 19px; }
.noticeboard h2 { margin-bottom: 18px; font: 32px/1 var(--display); text-transform: uppercase; }
.notice { position: relative; margin-bottom: 12px; padding: 16px 20px 15px; border: 1px solid var(--line); background: #f8f3dd; transform: rotate(-.65deg); box-shadow: 1px 3px 0 #20291f0a; }
.notice:nth-child(odd) { transform: rotate(.55deg); background: #e5e8d7; }
.notice::before { content: ""; position: absolute; width: 32px; height: 10px; top: -5px; left: 24px; background: #cdc5a891; transform: rotate(-4deg); }
.notice h3 { font: 700 11px/1.5 var(--sans); text-transform: uppercase; letter-spacing: .8px; }
.notice > span { display: block; color: var(--rust-dark); font: 700 9px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .7px; }
.notice p { margin-top: 5px; color: #555e4c; font: 14px/1.5 var(--serif); }
.notice a { text-decoration: none; }
.notice .meta { display: block; margin-top: 8px; font-size: 8px; }

.footer { max-width: var(--wide); margin: 0 auto; padding: 29px 0 34px; border-top: 2px solid var(--ink); display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.footer-mark { display: block; font: 27px/1 var(--display); letter-spacing: .2px; text-transform: uppercase; text-decoration: none; }
.footer-mark span { display: block; margin-top: 10px; color: var(--rust-dark); font: 700 9px/1.5 var(--mono); letter-spacing: 1.2px; }
.footer p, .footer small { display: block; max-width: 420px; margin-top: 10px; color: var(--muted); font: 9px/1.7 var(--mono); letter-spacing: .3px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-top: 5px; }
.footer-links a, .footer-links button { border: 0; padding: 0; background: none; font: 700 9px/1.5 var(--sans); text-transform: uppercase; letter-spacing: 1px; text-decoration: none; }
.footer-bottom { flex-basis: 100%; display: flex; justify-content: space-between; gap: 20px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font: 9px/1.5 var(--mono); }
.footer .footer-note { margin-top: 0; text-align: right; }

/* Departments and reading rooms. */
.page-head { position: relative; padding: 49px 0 34px; border-bottom: 1px solid var(--ink); }
.page-head .eyebrow { margin-bottom: 17px; }
.page-head h1 { max-width: 1080px; margin-bottom: 19px; font: clamp(51px, 6.2vw, 90px)/.98 var(--display); letter-spacing: -.4px; text-transform: uppercase; }
.page-head > p { max-width: 700px; color: #505749; font: 18px/1.6 var(--serif); }
.page-head .meta { margin-top: 20px; font: 10px/1.7 var(--mono); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 25px; color: var(--muted); font: 9px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .7px; }
.breadcrumbs a { text-decoration: none; }
.collection-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.collection-tools label { display: block; font: 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .6px; }
.collection-tools label input { display: block; margin-top: 8px; width: 340px; max-width: 100%; }
.collection-tools input, .collection-tools select { width: min(340px, 100%); min-height: 43px; border: 1px solid var(--ink); padding: 11px 13px; background: transparent; color: var(--ink); font-size: 13px; }
.collection-tools input::placeholder { color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button, .filter-button { min-height: 35px; padding: 8px 13px; border: 1px solid var(--line); background: none; font: 700 9px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .5px; }
.filters button:hover { border-color: var(--ink); }
.filters button[aria-pressed="true"], .filters button.active, .filter-button.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.collection-count { color: var(--muted); font: 10px/1.5 var(--mono); }
.collection-tools [data-result-count] { color: var(--muted); font: 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .6px; }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 28px; padding-bottom: 50px; }
.collection-grid .comic-card img { aspect-ratio: 4 / 3; }
.collection-grid .comic-card h2, .collection-grid .comic-card h3 { font-size: 27px; }
.character-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; padding: 7px 0 40px; }
.character-card { display: grid; grid-template-columns: 57px 1fr; align-content: start; column-gap: 17px; padding: 30px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.character-card.has-portrait { grid-template-columns: 104px minmax(0, 1fr); }
.character-card:hover { color: var(--ink); }
.character-card:hover h2, .character-card:hover .text-link { color: var(--rust-dark); }
.character-card .eyebrow { margin: 0 0 7px; font-size: 8px; letter-spacing: .5px; }
.character-card .eyebrow::before { display: none; }
.character-thumbnail { grid-row: span 5; width: 104px; height: 130px; object-fit: cover; object-position: center 36%; border: 1px solid #20291f30; background: var(--sage); }
.character-initial { grid-row: span 4; display: flex; align-items: center; justify-content: center; width: 57px; height: 66px; background: var(--sage); border: 1px solid #20291f30; color: var(--ink); font: 33px/1 var(--display); }
.character-card:nth-child(3n + 2) .character-initial { background: #d6b199; }
.character-card:nth-child(3n) .character-initial { background: #a5bdb0; }
.character-card h2, .character-card h3 { font: 26px/1.05 var(--display); text-transform: uppercase; }
.character-card h2 a, .character-card h3 a { text-decoration: none; }
.character-card .role { margin-top: 7px; color: var(--rust-dark); font: 700 9px/1.5 var(--mono); letter-spacing: .6px; text-transform: uppercase; }
.character-card p:not(.role):not(.eyebrow) { margin-top: 11px; color: #505749; font: 14px/1.6 var(--serif); }
.character-card .text-link { margin-top: 13px; font-size: 9px; }
.street-cast-intro { max-width: 790px; margin: -4px 0 24px; color: #505749; font: 17px/1.7 var(--serif); }
.street-cast-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.street-cast-card { min-width: 0; padding: 25px 24px 26px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.street-cast-card:nth-child(3n + 2), .street-cast-card:nth-child(3n + 3) { padding-left: 24px; border-left: 1px solid var(--line); }
.street-cast-card:hover { color: var(--ink); background: #faf7ee66; }
.street-cast-card .eyebrow { min-height: 30px; margin-bottom: 9px; font-size: 8px; letter-spacing: .55px; }
.street-cast-card .eyebrow::before { display: none; }
.street-cast-card h2 { font: 27px/1.05 var(--display); text-transform: uppercase; }
.street-cast-card > p:not(.eyebrow):not(.street-role) { margin-top: 11px; color: #505749; font: 14px/1.6 var(--serif); }
.street-cast-card .street-role { margin-top: 8px; color: var(--rust-dark); font: 700 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .6px; }
.street-cast-card .text-link { display: inline-block; margin-top: 16px; font-size: 9px; }
.street-cast-note { max-width: 910px; }
.street-profile-list { padding-bottom: 46px; }
.street-profile { scroll-margin-top: 30px; display: grid; grid-template-columns: .82fr 1.2fr .6fr; gap: 38px; padding: 43px 0; border-bottom: 1px solid var(--ink); }
.street-profile:first-child { border-top: 1px solid var(--ink); }
.street-profile header h2 { font: 42px/1 var(--display); text-transform: uppercase; }
.street-profile .street-role { margin-top: 14px; color: var(--rust-dark); font: 700 11px/1.55 var(--mono); text-transform: uppercase; letter-spacing: .7px; }
.street-profile .street-summary { margin-top: 18px; color: #505749; font: 16px/1.6 var(--serif); }
.street-profile-body { font-size: 17px; }
.street-profile footer { align-self: start; padding: 0; border: 0; }
.street-profile footer .eyebrow { margin-bottom: 11px; font-size: 8px; }
.street-profile footer a { display: block; padding: 9px 0; border-bottom: 1px solid var(--line); font: 700 10px/1.45 var(--sans); text-transform: uppercase; letter-spacing: .7px; text-decoration: none; }
.signal-voice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.signal-voice-grid .street-cast-card:nth-child(3n + 2), .signal-voice-grid .street-cast-card:nth-child(3n + 3) { padding-left: 0; border-left: 0; }
.signal-voice-grid .street-cast-card + .street-cast-card { padding-left: 22px; border-left: 1px solid var(--line); }
.character-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 34%); align-items: center; gap: 42px; border-bottom: 1px solid var(--ink); }
.character-intro .page-head { border-bottom: 0; }
.character-hero-portrait { width: 100%; max-width: 390px; justify-self: end; }
.character-portrait-image { width: 100%; height: auto; border: 1px solid #20291f50; background: var(--sage); }
.character-hero-portrait figcaption { margin-top: 8px; color: var(--muted); font: 9px/1.5 var(--mono); text-align: right; text-transform: uppercase; letter-spacing: .5px; }
.place-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 30px 0 50px; }
.place-card { position: relative; padding: 27px 29px; border: 1px solid var(--line); background: #e5e8da; }
.place-card:nth-child(even) { background: #e9dfce; }
.place-card .eyebrow { margin-bottom: 10px; }
.place-card h2, .place-card h3 { font: 33px/1.1 var(--display); text-transform: uppercase; }
.place-card p { max-width: 570px; margin-top: 13px; color: #505749; font: 16px/1.65 var(--serif); }
.place-card a { display: inline-block; margin-top: 17px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: start; gap: 70px; padding: 40px 0 55px; }
.article-layout > main { min-width: 0; }
.article-layout .prose { max-width: 740px; margin: 0 auto; }
.story-illustration { margin: 0 0 38px; }
.prose .story-illustration img { display: block; width: 100%; height: auto; margin: 0; border: 1px solid #20291f21; }
.story-illustration figcaption { margin-top: 8px; color: var(--teal); font: 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.article-title { max-width: 1060px; margin-bottom: 20px; font: clamp(44px, 5.5vw, 76px)/1.02 var(--display); text-transform: uppercase; letter-spacing: -.4px; }
.prose { font: 19px/1.83 var(--serif); color: #323a2e; }
.prose > * + * { margin-top: 1.2em; }
.prose p { margin-bottom: 1.3em; }
.prose h2, .prose h3, .prose h4 { color: var(--ink); font-family: var(--display); text-transform: uppercase; font-weight: 400; line-height: 1.15; }
.prose h2 { margin-top: 1.8em; margin-bottom: .7em; font-size: 35px; }
.prose h3 { margin-top: 1.5em; margin-bottom: .6em; font-size: 27px; }
.prose h4 { font-size: 22px; }
.prose a { color: var(--rust-dark); }
/* Keep datelines and opening paragraphs aligned across reader types. */
.prose blockquote { margin: 30px 0; padding: 8px 0 8px 25px; border-left: 3px solid var(--rust); color: var(--teal); font-style: italic; font-size: 24px; line-height: 1.55; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { height: 1px; border: 0; background: var(--line); margin: 35px 0; }
.prose ul, .prose ol { padding-left: 26px; }
.prose li + li { margin-top: .45em; }
.prose img { height: auto; width: 100%; margin: 30px 0; }
.prose pre { white-space: pre-wrap; font: 14px/1.7 var(--mono); padding: 22px; background: var(--paper-deep); }
.prose table { width: 100%; border-collapse: collapse; font: 14px/1.6 var(--sans); }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 12px 9px; text-align: left; }
.article-aside { position: sticky; top: 30px; padding-top: 5px; }
.article-aside .eyebrow { margin-bottom: 12px; }
.article-aside h2, .article-aside h3 { font: 24px/1.1 var(--display); text-transform: uppercase; margin-bottom: 14px; }
.article-aside p { color: var(--muted); font: 14px/1.7 var(--serif); }
.article-aside > * + * { margin-top: 18px; }
.article-aside a { display: block; padding: 10px 0; border-top: 1px solid var(--line); font: 700 10px/1.5 var(--sans); letter-spacing: .5px; text-transform: uppercase; text-decoration: none; }
.article-aside ul { padding: 0; margin: 0; list-style: none; }
.article-aside .button { display: inline-flex; padding: 12px 15px; border: 1px solid var(--ink); }
.article-aside button:not(.bookmark):not(.button) { min-height: 40px; padding: 10px 13px; background: none; border: 1px solid var(--ink); font: 700 9px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .5px; }
.article-aside button:not(.bookmark):not(.button):hover { background: var(--ink); color: var(--paper); }
.bookmark { min-height: 39px; padding: 10px 14px; border: 1px solid var(--ink); background: none; font: 700 9px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .5px; }
.bookmark:hover, .bookmark[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.reading-progress { position: fixed; z-index: 150; top: 0; left: 0; width: 100%; height: 3px; pointer-events: none; }
.reading-progress i { display: block; width: 0; height: 100%; background: var(--rust); }
.comic-reader { max-width: 1040px; margin: 34px auto 55px; }
.comic-reader img { width: auto; max-width: 100%; height: auto; margin: 0 auto; object-fit: contain; border: 1px solid var(--ink); background: var(--paper-light); }
.comic-reader.expanded { max-width: none; }
.comic-reader.expanded .comic-full { display: block; max-width: 100%; overflow-x: auto; scrollbar-width: auto; }
.comic-reader.expanded img { width: max(100%, 1500px); max-width: none; height: auto; }
.comic-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.comic-controls p { color: var(--muted); font: 9px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .5px; }
.zoom-button, .comic-controls button { min-height: 36px; padding: 9px 13px; border: 1px solid var(--ink); background: none; font: 700 9px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .5px; }
.zoom-button:hover, .comic-controls button:hover { color: var(--paper); background: var(--ink); }
.comic-controls button[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.comic-controls > a { font: 700 9px/1.5 var(--mono); letter-spacing: .5px; text-transform: uppercase; text-decoration: none; }
.comic-reader figcaption { margin-top: 13px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.transcript { margin-top: 25px; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.transcript > summary { padding: 5px 0; cursor: pointer; font: 700 10px/1.5 var(--mono); letter-spacing: .8px; }
.transcript > .prose { max-width: 740px; margin: 27px auto 0; }
.prose .byline { margin-top: 35px; padding-top: 18px; border-top: 1px solid var(--line); font: 700 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 1px; }
.serial-nav { display: flex; justify-content: space-between; gap: 30px; margin: 38px 0 0; padding: 24px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.serial-nav a { max-width: 40%; text-decoration: none; font: 21px/1.2 var(--display); text-transform: uppercase; }
.serial-nav a:nth-child(2):not(:last-child) { flex-shrink: 0; align-self: center; font: 700 9px/1.5 var(--mono); letter-spacing: .7px; }
.serial-nav a:last-child { text-align: right; margin-left: auto; }
.serial-nav small { display: block; margin-bottom: 7px; color: var(--muted); font: 9px/1.5 var(--mono); letter-spacing: .8px; }
.timeline { max-width: 960px; margin: 38px auto 55px; padding-left: 32px; border-left: 1px solid var(--ink); }
.timeline-event { position: relative; padding: 0 0 34px 14px; }
.timeline-event::before { content: ""; position: absolute; width: 9px; height: 9px; border: 2px solid var(--paper); background: var(--rust); box-shadow: 0 0 0 1px var(--rust); left: -37px; top: 6px; }
.timeline-event time, .timeline-event .meta { color: var(--rust-dark); font: 700 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .8px; }
.timeline-event > span { color: var(--rust-dark); font: 700 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .8px; }
.timeline-event h2, .timeline-event h3 { margin: 9px 0 11px; font: 31px/1.15 var(--display); text-transform: uppercase; }
.timeline-event p { max-width: 690px; font: 16px/1.7 var(--serif); color: #505749; }
.timeline-event a { display: inline-block; margin-top: 12px; }
.spotlight { padding: 35px; background: var(--ink); color: var(--paper); margin: 30px 0; }
.spotlight .eyebrow { color: var(--sage); }
.spotlight h2 { max-width: 780px; font: 44px/1.1 var(--display); text-transform: uppercase; }
.spotlight p { margin-top: 15px; max-width: 650px; font: 17px/1.6 var(--serif); }
.spotlight a { color: var(--paper); }
.empty-state { grid-column: 1 / -1; padding: 50px 20px; text-align: center; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); color: var(--muted); font: 17px/1.6 var(--serif); }
.empty-state h2 { color: var(--ink); margin-bottom: 12px; font: 30px/1.1 var(--display); text-transform: uppercase; }

/* Search is a room overlay, not a departure. */
.search-dialog {
  width: min(720px, calc(100vw - 40px));
  max-height: calc(100dvh - 60px);
  padding: 30px;
  border: 2px solid var(--ink);
  background: var(--paper-light);
  color: var(--ink);
  box-shadow: 10px 10px 0 #20291f30;
}
.search-dialog::backdrop { background: #20291fc7; backdrop-filter: blur(3px); }
.search-dialog h2 { padding-right: 40px; margin-bottom: 22px; font: 39px/1.1 var(--display); text-transform: uppercase; }
.search-dialog .close, .search-dialog .search-close { position: absolute; right: 20px; top: 18px; width: 36px; height: 36px; border: 1px solid var(--ink); background: none; font-size: 24px; line-height: 1; }
.search-dialog form { margin: 0; }
.search-dialog form button { position: absolute; right: 20px; top: 18px; width: 36px; height: 36px; border: 1px solid var(--ink); background: none; font-size: 24px; line-height: 1; }
.search-dialog form button:hover { background: var(--ink); color: var(--paper-light); }
.search-dialog > label { display: block; margin: 5px 40px 24px 0; font: 30px/1.1 var(--display); text-transform: uppercase; }
.search-dialog .close:hover, .search-dialog .search-close:hover { background: var(--ink); color: var(--paper-light); }
.search-dialog input { display: block; width: 100%; padding: 14px; border: 1px solid var(--ink); background: transparent; font-size: 16px; }
.search-dialog .search-hint { margin-top: 12px; color: var(--muted); font: 10px/1.6 var(--mono); }
.search-results { margin-top: 20px; max-height: min(460px, 55dvh); overflow-y: auto; }
[data-search-results] { margin-top: 20px; max-height: min(460px, 55dvh); overflow-y: auto; font: 14px/1.6 var(--serif); }
.search-results > a, .search-result { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.search-results strong, .search-result h3 { display: block; margin: 5px 0; font: 23px/1.1 var(--display); text-transform: uppercase; }
.search-result strong { display: block; margin: 5px 0; font: 23px/1.1 var(--display); text-transform: uppercase; }
.search-result > span { color: var(--rust-dark); font: 9px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .8px; }
.search-results p { color: var(--muted); font: 13px/1.6 var(--serif); }
.search-results small, .search-results .tag { color: var(--rust-dark); font: 9px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .8px; }
.search-results mark { color: var(--ink); background: #d6dca4; }
.toast { position: fixed; z-index: 180; right: 28px; bottom: 25px; max-width: calc(100vw - 40px); padding: 15px 21px; border: 1px solid var(--sage); background: var(--ink); color: var(--paper-light); font: 11px/1.5 var(--mono); box-shadow: 4px 4px 0 #20291f2b; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
.toast.visible { opacity: 1; visibility: visible; transform: translateY(0); }

@media (min-width: 1550px) {
  .hero-art { min-height: 510px; }
}
@media (max-width: 1490px) {
  .mast, body > main, .site-main, .footer { margin-left: 40px; margin-right: 40px; }
  .utility { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 1150px) {
  .mast { gap: 25px; }
  .brand { font-size: 52px; }
  .nav { gap: 19px; }
  .nav a, .nav button { font-size: 10px; letter-spacing: .8px; }
  .hero { gap: 32px; }
  .hero-title { font-size: 76px; }
  .hero-art { min-height: 445px; }
  .dek { font-size: 17px; }
  .hero .actions { gap: 10px; }
  .hero .button { padding: 12px 14px; font-size: 9px; gap: 10px; }
  .feature-card.feature-lead { gap: 21px; padding-right: 21px; }
  .feature-body h3, .feature-body h2 { font-size: 26px; }
  .feature-grid { gap: 21px; }
  .district { gap: 30px; }
  .district-copy h2, .district-copy h3 { font-size: 37px; }
  .article-layout { gap: 40px; grid-template-columns: minmax(0, 1fr) 210px; }
  .character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .street-cast-grid, .signal-voice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .street-cast-card:nth-child(3n + 2), .street-cast-card:nth-child(3n + 3), .signal-voice-grid .street-cast-card + .street-cast-card { padding-left: 0; border-left: 0; }
  .street-cast-card:nth-child(even), .signal-voice-grid .street-cast-card:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--line); }
  .street-profile { grid-template-columns: .9fr 1.35fr; }
  .street-profile footer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 18px; border-top: 1px solid var(--line); padding-top: 18px; }
  .street-profile footer .eyebrow { width: 100%; }
}
@media (max-width: 900px) {
  .mast, body > main, .site-main, .footer { margin-left: 28px; margin-right: 28px; }
  .utility { padding-left: 28px; padding-right: 28px; font-size: 9px; letter-spacing: .8px; }
  .mast { align-items: flex-start; padding: 24px 0 20px; flex-direction: column; gap: 20px; }
  .brand { font-size: 60px; }
  .nav { width: 100%; justify-content: flex-start; gap: 25px; }
  .nav a, .nav button { font-size: 10px; }
  .character-intro { grid-template-columns: minmax(0, 1fr) minmax(220px, 33%); gap: 25px; }
  .character-card.has-portrait { grid-template-columns: 88px minmax(0, 1fr); }
  .character-thumbnail { width: 88px; height: 110px; }
  .nav .search-toggle { margin-left: auto; }
  .hero { grid-template-columns: 1fr 1fr; gap: 25px; padding-top: 30px; }
  .hero-title { font-size: clamp(52px, 7.7vw, 68px); }
  .hero-copy { padding-top: 2px; }
  .hero-art { min-height: 420px; }
  .hero .eyebrow { font-size: 9px; letter-spacing: .8px; }
  .hero .actions { gap: 10px; }
  .hero .button { width: 100%; }
  .hero-caption { font-size: 8px; padding-top: 22px; }
  .stamp { top: 18px; right: 16px; padding: 8px 11px; font-size: 8px; }
  .stamp strong { font-size: 21px; }
  .feature-grid { grid-template-columns: 1fr 1fr; gap: 25px; }
  .mall-reading-grid { grid-template-columns: 1fr; gap: 12px; }
  .feature-card.feature-lead { grid-column: auto; display: flex; padding-right: 25px; gap: 0; }
  .feature-lead .feature-body { padding-top: 17px; }
  .feature-card.feature-lead > .feature-art { height: 200px; }
  .feature-grid > .feature-card:nth-child(3) { grid-column: 1 / -1; }
  .feature-grid > .feature-card:nth-child(3):not(.text-feature) { padding-top: 22px; border-top: 1px solid var(--line); }
  .feature-grid > .feature-card:nth-child(3) .feature-body { max-width: 600px; }
  .comic-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; }
  .district { grid-template-columns: 1fr 1fr; gap: 24px; }
  .map, .map svg { min-height: 0; }
  .map-pin { min-height: 36px; min-width: 36px; justify-content: center; padding: 7px; font-size: 10px; }
  .map-pin > b { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
  .map-pin:hover > b, .map-pin:focus-visible > b { top: 100%; left: 50%; width: max-content; max-width: 140px; height: auto; margin: 7px 0 0; padding: 5px 7px; clip-path: none; overflow: visible; white-space: normal; background: var(--ink); color: var(--paper); transform: translateX(-50%); text-align: center; font-size: 9px; }
  .map-pin:focus-visible { z-index: 3; }
  .district-copy h2, .district-copy h3 { font-size: 33px; }
  .district-copy > p { font-size: 15px; }
  .place-links { grid-template-columns: 1fr; gap: 0; margin-top: 17px; }
  .radio-box { padding: 27px; }
  .radio-box h2 { font-size: 32px; }
  .noticeboard { padding-left: 0; }
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-layout { display: flex; flex-direction: column; gap: 30px; }
  .article-aside { position: static; width: 100%; border-top: 1px solid var(--ink); padding-top: 24px; }
  .article-aside > p { max-width: 500px; }
  .article-layout .prose { max-width: 720px; }
}
@media (max-width: 650px) {
  .mast, body > main, .site-main, .footer { margin-left: 20px; margin-right: 20px; }
  .utility { min-height: 32px; padding: 9px 20px; gap: 10px; font-size: 8px; letter-spacing: .4px; }
  .utility button { min-width: 44px; min-height: 24px; }
  .utility-right { gap: 10px; }
  .utility > span:nth-child(2) { display: none; }
  .utility > :last-child:not(:first-child) { font-size: 8px; }
  .utility .utility-extra { display: none; }
  .mast { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 23px 0 17px; gap: 0 12px; }
  .brand { font-size: clamp(28px, 7vw, 44px); letter-spacing: -1px; gap: 5px; }
  .menu-toggle { display: block; min-width: 61px; min-height: 44px; padding: 10px 7px; border: 1px solid var(--ink); background: transparent; font: 700 9px/1.5 var(--mono); letter-spacing: .4px; }
  .menu-toggle:hover, .menu-toggle[aria-expanded="true"] { color: var(--paper); background: var(--ink); }
  .nav { display: none; grid-column: 1 / -1; flex-wrap: wrap; gap: 0; width: 100%; margin-top: 19px; padding: 10px 0 0; border-top: 1px solid var(--line); overflow: visible; }
  .nav.open { display: grid; grid-template-columns: 1fr 1fr; }
  .nav a, .nav button { display: block; text-align: left; min-height: 42px; padding: 13px 0; font-size: 10px; letter-spacing: .7px; }
  .nav .search-toggle { margin-left: 0; padding-left: 17px; }
  .hero { grid-template-columns: 1fr; gap: 27px; padding-top: 27px; padding-bottom: 27px; }
  .hero-title { max-width: 450px; font-size: clamp(61px, 13.8vw, 83px); margin-bottom: 19px; }
  .hero-copy { padding: 0; }
  .hero .eyebrow { font-size: 9px; margin-bottom: 15px; }
  .dek { max-width: 470px; font-size: 17px; line-height: 1.6; }
  .hero .actions { gap: 11px; margin-top: 23px; width: 100%; }
  .hero .button { width: auto; min-height: 43px; font-size: 9px; padding: 13px 15px; }
  .hero-caption { padding-top: 19px; font-size: 8px; }
  .hero-art { min-height: 350px; }
  .hero-art > img { object-position: 50% 59%; }
  .hero-art::after { inset: 8px; }
  .stamp { max-width: 138px; top: 18px; right: 18px; }
  .ticker { padding: 10px 0; gap: 13px; font-size: 9px; }
  .ticker strong, .ticker > b { font-size: 9px; padding-right: 13px; }
  .ticker > a { font-size: 8px; }
  .ticker-track { gap: 22px; }
  .section { padding: 30px 0; }
  .section-heading { gap: 18px; margin-bottom: 20px; }
  .section-heading h2 { font-size: 32px; }
  .section-heading .eyebrow { font-size: 8px; margin-bottom: 6px; }
  .section-heading > a { max-width: 104px; text-align: right; white-space: normal; font-size: 8px; letter-spacing: .6px; }
  .section-heading > a::after { font-size: 12px; }
  .feature-grid { grid-template-columns: 1fr; gap: 25px; }
  .feature-card.feature-lead { display: grid; grid-template-columns: 1fr; grid-column: auto; padding-right: 0; border-right: 0; }
  .feature-card.feature-lead > .feature-art { min-height: 235px; }
  .feature-card .feature-art { min-height: 210px; }
  .feature-body h3, .feature-body h2 { font-size: 31px; }
  .feature-body p { font-size: 16px; }
  .feature-card + .feature-card { padding-top: 24px; border-top: 1px solid var(--line); }
  .feature-grid > .feature-card:nth-child(3) { grid-column: auto; }
  .feature-grid > .feature-card.text-feature { padding: 22px; border: 1px solid var(--ink); }
  .comic-strip { gap: 25px 16px; }
  .comic-card img { aspect-ratio: 1; }
  .comic-card h3, .comic-card h2 { font-size: 22px; }
  .comic-card .tag { font-size: 8px; letter-spacing: .6px; }
  .comic-card .meta { font-size: 8px; letter-spacing: .5px; }
  .comic-card p:not(.meta) { font-size: 13px; }
  .district { grid-template-columns: 1fr; gap: 25px; }
  .map, .map svg { min-height: 0; }
  .map-pin { min-height: 40px; min-width: 40px; justify-content: center; padding: 8px; font-size: 10px; }
  .map-pin > b { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
  .map-pin:hover > b, .map-pin:focus-visible > b { top: 100%; left: 50%; width: max-content; max-width: 140px; height: auto; margin: 7px 0 0; padding: 5px 7px; clip-path: none; overflow: visible; white-space: normal; background: var(--ink); color: var(--paper); transform: translateX(-50%); text-align: center; font-size: 9px; }
  .map-pin:focus-visible { z-index: 3; }
  .district-copy h2, .district-copy h3 { font-size: 37px; }
  .district-copy > p { font-size: 16px; }
  .place-links { grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .place-links a { min-height: 44px; font-size: 9px; }
  .lower-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 30px; padding-bottom: 32px; }
  .radio-box { padding: 28px 24px; }
  .radio-box h2 { font-size: 37px; }
  .noticeboard { padding: 0 5px; }
  .footer { padding: 25px 0 28px; gap: 22px; }
  .footer-mark { font-size: 27px; }
  .footer p { max-width: 330px; font-size: 9px; }
  .footer-links { gap: 12px 20px; width: 100%; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 24px; font-size: 9px; }
  .footer-bottom { flex-direction: column; gap: 8px; padding-top: 16px; }
  .footer .footer-note { text-align: left; }
  .page-head { padding-top: 33px; padding-bottom: 28px; }
  .page-head h1 { font-size: clamp(47px, 12.5vw, 69px); }
  .page-head > p { font-size: 17px; }
  .page-head .eyebrow { font-size: 9px; }
  .collection-tools { display: block; padding: 20px 0; margin-bottom: 23px; }
  .collection-tools input, .collection-tools select { width: 100%; }
  .collection-tools label input { width: 100%; }
  .collection-tools .filters { margin-top: 15px; }
  .collection-count { margin-top: 13px; }
  .collection-grid { gap: 28px 16px; padding-bottom: 35px; }
  .collection-grid .comic-card img { aspect-ratio: 1; }
  .collection-grid .comic-card h2, .collection-grid .comic-card h3 { font-size: 23px; }
  .character-grid { grid-template-columns: 1fr; padding-bottom: 25px; }
  .street-cast-grid, .signal-voice-grid { grid-template-columns: 1fr; }
  .street-cast-card, .street-cast-card:nth-child(even), .street-cast-card:nth-child(3n + 2), .street-cast-card:nth-child(3n + 3), .signal-voice-grid .street-cast-card + .street-cast-card { padding: 23px 0; border-left: 0; }
  .street-cast-card .eyebrow { min-height: 0; }
  .street-profile { display: block; padding: 34px 0; }
  .street-profile header h2 { font-size: 38px; }
  .street-profile-body { margin-top: 24px; font-size: 16px; }
  .street-profile footer { display: block; margin-top: 25px; }
  .character-card { padding: 25px 0; }
  .character-card.has-portrait { grid-template-columns: 92px minmax(0, 1fr); }
  .character-thumbnail { width: 92px; height: 115px; }
  .character-intro { grid-template-columns: 1fr; gap: 0; }
  .character-hero-portrait { width: min(100%, 340px); justify-self: start; margin: 22px 0 27px; }
  .character-card h2 { font-size: 29px; }
  .character-card p:not(.role):not(.eyebrow) { font-size: 15px; }
  .place-grid { grid-template-columns: 1fr; gap: 20px; margin: 25px 0 35px; }
  .place-card { padding: 25px; }
  .place-card h2 { font-size: 32px; }
  .article-title { font-size: 48px; }
  .article-layout { padding-top: 29px; padding-bottom: 35px; }
  .prose { font-size: 18px; line-height: 1.8; }
  .prose h2 { font-size: 31px; }
  .prose h3 { font-size: 26px; }
  .prose blockquote { font-size: 21px; padding-left: 19px; }
  .comic-reader { margin-top: 25px; margin-bottom: 35px; }
  .comic-controls { gap: 12px; }
  .serial-nav { gap: 13px; margin-top: 29px; }
  .serial-nav a { font-size: 18px; }
  .serial-nav small { font-size: 8px; }
  .timeline { margin: 30px 0 35px 5px; padding-left: 23px; }
  .timeline-event { padding-left: 7px; }
  .timeline-event::before { left: -28px; }
  .timeline-event h2 { font-size: 28px; }
  .spotlight { margin: 25px 0; padding: 25px; }
  .spotlight h2 { font-size: 34px; }
  .search-dialog { width: calc(100vw - 30px); padding: 24px 19px; max-height: calc(100dvh - 40px); }
  .search-dialog h2 { font-size: 31px; }
  .search-dialog .close, .search-dialog .search-close { right: 16px; top: 18px; }
  .search-dialog form button { right: 16px; top: 18px; }
  .search-dialog > label { font-size: 26px; }
  .toast { right: 20px; bottom: 20px; font-size: 10px; }
}
@media (max-width: 370px) {
  .mast, body > main, .site-main, .footer { margin-left: 16px; margin-right: 16px; }
  .utility { padding-left: 16px; padding-right: 16px; font-size: 7px; }
  .brand { font-size: 28px; }
  .hero-title { font-size: 58px; }
  .hero .button { padding: 12px 11px; font-size: 8px; }
  .hero-art { min-height: 310px; }
  .map-pin { min-height: 35px; min-width: 35px; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-grid .comic-card img { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button:hover, .comic-card:hover img, a.feature-art:hover img { transform: none; }
}
/* Shared reader and navigation polish. */
.back-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; font: 700 10px/1.5 var(--mono); text-transform: uppercase; text-underline-offset: 4px; }
.back-link + .page-head { padding-top: 20px; }
.reading-meta { margin-top: 18px; color: var(--muted); font: 11px/1.6 var(--mono); }
.article-layout > * { min-width: 0; }
.bookmark, .comic-controls button, .comic-controls > a, .transcript > summary { min-height: 44px; }
.comic-controls > a { display: inline-flex; align-items: center; }
.serial-nav { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: start; }
.serial-nav a { max-width: none; }
.serial-nav > :last-child { text-align: right; margin-left: 0; }
.serial-end { color: var(--muted); font: 10px/1.6 var(--mono); text-transform: uppercase; }
#saved-stories { scroll-margin-top: 24px; }
@media (max-width: 900px) {
  .commons-detail-intro { grid-template-columns: 1fr; }
  .commons-detail-intro .eyebrow { grid-column: auto; }
  .commons-guide { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 650px) {
  .commons-detail-intro h2 { font-size: 38px; overflow-wrap: normal; }
  .commons-detail-intro > p:last-child { font-size: 15px; }
  .commons-guide { grid-template-columns: 1fr; gap: 0; }
  .commons-guide li { padding: 11px 0 13px; }
  .commons-map-key { gap: 8px 14px; font-size: 9px; }
  .commons-map-key i { width: 22px; }
  .serial-nav { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
  .serial-nav .serial-all { grid-column: 1 / -1; grid-row: 2; text-align: center; padding: 12px; border: 1px solid var(--line); }
  .comic-controls { align-items: stretch; }
  .comic-controls > * { justify-content: center; text-align: center; }
  .search-dialog input { font-size: 16px; }
  .back-link { margin-top: 12px; }
}

@media print {
  body { background: white; color: black; }
  body::before, .utility, .nav, .footer, .article-aside, .actions, .bookmark, .search-dialog, .reading-progress, .toast { display: none !important; }
  .mast, body > main { margin: 0; max-width: none; }
  .mast { padding: 0 0 18px; }
  .brand { font-size: 35px; }
  .page-head { padding-top: 25px; }
  .article-layout { display: block; padding-top: 25px; }
  .prose { max-width: none !important; font-size: 12pt; line-height: 1.6; }
  .comic-reader { max-width: none; }
  a { color: inherit; }
  .serial-nav { display: none; }
}

/* Character views: publication-safe finished art, not production records. */
.character-view-gallery { margin: 54px 0 70px; padding-top: 28px; border-top: 1px solid var(--line); }
.character-view-gallery-head h2 { margin: 6px 0 24px; font: 32px/1.1 var(--display); text-transform: uppercase; }
.character-view-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.character-view-grid figure { margin: 0; min-width: 0; }
.character-view-grid a { display: block; background: #ded9ca; border: 1px solid #20291f50; }
.character-view-grid img { display: block; width: 100%; height: auto; }
.character-view-grid figcaption { margin-top: 9px; color: var(--muted); font: 9px/1.5 var(--mono); letter-spacing: .5px; text-transform: uppercase; }
@media (max-width: 620px) { .character-view-grid { grid-template-columns: 1fr; gap: 32px; } .character-view-gallery { margin-top: 38px; } }

/* One homepage dispatch: a lead and five onward choices, without repeated cards. */
.home-dispatch { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 36px; }
.home-dispatch-lead { min-width: 0; padding-right: 36px; border-right: 1px solid var(--line); }
.home-dispatch-lead .feature-card.feature-lead { display: flex; flex-direction: column; gap: 0; grid-column: auto; padding: 0; border: 0; }
.home-dispatch-lead .feature-art { min-height: 275px; }
.home-dispatch-lead .feature-body { padding-top: 20px; }
.home-dispatch-lead .feature-body h3, .home-dispatch-lead .feature-body h2 { font-size: clamp(31px,3vw,45px); }
.home-dispatch-lead .comic-card img { aspect-ratio: 16/9; }
.home-dispatch-list { min-width: 0; display: grid; grid-template-rows: repeat(5,minmax(0,1fr)); }
.home-next-link { min-width: 0; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 14px 34px 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.home-next-link:first-child { border-top: 1px solid var(--line); }
.home-next-link:hover, .trail-grid a:hover { color: var(--rust-dark); }
.home-next-link strong { font: clamp(20px,2vw,29px)/1.08 var(--display); text-transform: uppercase; }
.home-next-link > span:last-child { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); color: var(--rust); font: 24px/1 var(--display); }
.reading-trail { margin-top: 44px; }
.reading-trail .section-heading button { border: 0; border-bottom: 1px solid currentColor; padding: 0 0 4px; background: none; font: 700 10px/1.5 var(--sans); letter-spacing: 1px; }
.trail-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.trail-grid a { display: flex; flex-direction: column; min-height: 190px; padding: 20px; border: 1px solid var(--line); background: var(--paper-light); text-decoration: none; }
.trail-grid strong { margin: 12px 0; font: 26px/1.1 var(--display); text-transform: uppercase; }
.trail-grid a > span:not(.meta) { color: var(--muted); font: 14px/1.45 var(--serif); }
.trail-grid b { margin-top: auto; padding-top: 18px; font: 700 9px/1.4 var(--mono); letter-spacing: 1px; }
.place-field-note { margin-top: 45px; padding-top: 30px; border-top: 1px solid var(--line); }
.place-field-note > .eyebrow { margin-bottom: 8px; }
.place-field-note > h2 { margin-top: 0; }
.place-trail { padding-top: 20px; }
@media (max-width: 900px) { .home-dispatch { gap: 22px; } .home-dispatch-lead { padding-right: 22px; } .home-dispatch-lead .feature-art { min-height: 230px; } .trail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 650px) { .home-dispatch { grid-template-columns: 1fr; gap: 25px; } .home-dispatch-lead { padding: 0; border: 0; } .home-dispatch-lead .feature-art { min-height: 205px; } .home-next-link { min-height: 75px; } .trail-grid { grid-template-columns: 1fr; } .reading-trail .section-heading { align-items: flex-start; flex-direction: column; } }

/* Curated reading paths share the same finished-story collection. */
.story-shelves { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.story-shelves article { border:1px solid var(--line); padding:22px; background:var(--paper-light); min-width:0; }
.story-shelves h3 { font:26px/1.1 var(--display); margin:0 0 14px; }
.story-shelves p { color:var(--muted); font:16px/1.5 var(--serif); }
.story-shelves summary { cursor:pointer; font-weight:700; padding:12px 0; }
.story-shelves ol { padding-left:22px; }
.story-shelves li { margin:12px 0; }
.story-shelves a { line-height:1.5; text-underline-offset:3px; }
@media (max-width:760px) { .story-shelves { grid-template-columns:1fr; } }