/* RETRO magazine pages: the review page (templates/site/review.html) and the news spread (news.html), built on
   site.css's tokens so Gece and Gündüz both work through data-theme on <html>. Zine furniture from the 1988–1994
   magazines (see data/mockups/NOTES.md): section tabs, the künye, ruled columns with a drop cap, captioned picture
   strips, the three-box score strip with seven-segment digits, the HABERLER running head and the numbered shorts.
   Accent text uses --acc-ink (AA on the page in both editions); the raw rainbow only fills rules, bars and LEDs. */

/* ---------- accents: one rainbow stripe per review ---------- */
.rv, .spread-wrap {
  --acc: var(--r3); --acc-ink: var(--r3); --tab-bg: var(--r3); --tab-ink: #0f1012; --band-ink: #0f1012;
  --tab-shadow: rgba(230, 227, 220, .85);
  --led: var(--r3); --led-off: #1d1e22; --screen: var(--night); --screen-ring: 0 0 0 1px var(--line-soft); --screen-ink: var(--ash);
  --page-pad: var(--gutter);
}
.acc-r1 { --acc: var(--r1); --acc-ink: #e05a4e; --tab-bg: #b0302a; --tab-ink: #fff; --band-ink: #fff; --led: #e05a4e; }
.acc-r2 { --acc: var(--r2); --acc-ink: #e8893a; --tab-bg: var(--r2); --tab-ink: #0f1012; --band-ink: #0f1012; --led: #e8893a; }
.acc-r3 { --acc: var(--r3); --acc-ink: var(--r3); --tab-bg: var(--r3); --tab-ink: #0f1012; --band-ink: #0f1012; --led: var(--r3); }
.acc-r4 { --acc: var(--r4); --acc-ink: #6bb866; --tab-bg: #2f6b2c; --tab-ink: #fff; --band-ink: #0f1012; --led: #6bb866; }
.acc-r5 { --acc: var(--r5); --acc-ink: #6fa3d8; --tab-bg: #235a8f; --tab-ink: #fff; --band-ink: #fff; --led: #6fa3d8; }
:root[data-theme="light"] .rv, :root[data-theme="light"] .spread-wrap {
  --tab-shadow: #1d1650;
  /* in the day edition the score sits on the C64 start-up screen: white digits, dark blue glass, light blue border */
  --led: #fff; --led-off: #43369a; --screen: #352879; --screen-ring: 0 0 0 7px #6c5eb5; --screen-ink: #d6d1f5;
}
:root[data-theme="light"] .acc-r1 { --acc-ink: #a3271c; }
:root[data-theme="light"] .acc-r2 { --acc-ink: #9a4a0c; --tab-ink: #1d1650; --band-ink: #1d1650; }
:root[data-theme="light"] .acc-r3 { --acc-ink: var(--ink-hi); --tab-ink: #1d1650; --band-ink: #1d1650; }
:root[data-theme="light"] .acc-r4 { --acc-ink: #2f6b2c; --band-ink: #1d1650; }
:root[data-theme="light"] .acc-r5 { --acc-ink: #235a8f; }

body.review, body.news { overflow-x: clip; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rv img, .spread-wrap img { height: auto; }
svg.defs { position: absolute; width: 0; height: 0; }
/* our own drawn art where a review has no picture: fog, one warm light, grain (as on the covers) */
.rv .fog {
  display: block; width: 100%; height: 100%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.2'/></svg>"),
    radial-gradient(circle at 50% 58%, rgba(232, 185, 35, .45) 0, rgba(232, 185, 35, .1) 12%, rgba(232, 185, 35, 0) 36%),
    linear-gradient(180deg, var(--bg) 0%, var(--fog-mid) 52%, var(--bg) 100%);
}

/* ---------- the review page ---------- */
.rv { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.runhead {
  display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap;
  padding: 30px 0 14px; border-bottom: 1px solid var(--line);
}
.runhead-r { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.runhead-r .kick { color: var(--ink-soft); }
.tab {
  display: inline-block; margin: 0 5px 5px 0; padding: 7px 14px 6px; background: var(--tab-bg); color: var(--tab-ink);
  font-family: var(--ui); font-weight: 900; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; line-height: 1.2;
  box-shadow: 5px 5px 0 var(--tab-shadow);
}
.rv h1 { margin: 0; color: var(--ink-hi); overflow-wrap: break-word; }
.rv h1 .pre, .rv h1 .name { display: block; }
.rv .dek { margin: 0 0 16px; max-width: 34ch; font-style: italic; font-size: 22px; line-height: 1.38; color: var(--ink-soft); text-wrap: pretty; }
.rv .byline { margin: 0 0 24px; }
.rv .kick.rain { color: var(--ink-soft); }
.capt { margin: 9px 0 0; font-family: var(--ui); font-size: 14px; line-height: 1.42; color: var(--ink-soft); }
.capt b, .pcap b { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 1px; color: var(--acc-ink); margin-right: 6px; }
.credit { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .3px; color: var(--ash); }
.credit a { color: inherit; }
.credit a:hover { color: var(--ink); }
.fig-lead { margin: 0; min-width: 0; }

/* künye: the info box */
.kunye { margin: 0; padding: 16px 18px 18px; background: var(--panel); border-top: 4px solid var(--acc); }
.kunye > .kick { margin: 0 0 12px; color: var(--ink-soft); }
.kunye dl { display: grid; grid-template-columns: minmax(78px, max-content) minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.kunye dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); padding-top: 3px; }
.kunye dd { margin: 0; font-family: var(--ui); font-size: 15px; line-height: 1.4; color: var(--ink-hi); overflow-wrap: anywhere; }
.kunye dd small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
.unv {
  display: inline-block; margin-left: 4px; padding: 0 5px; border: 1px solid currentColor; color: var(--ink-soft);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; vertical-align: 2px;
}

/* body copy: zine columns, indented paragraphs, a drop cap */
.copy { margin-top: 44px; color: var(--ink-body); font-size: 17.5px; line-height: 1.62; overflow-wrap: break-word; }
.copy > p { margin: 0; text-indent: 1.4em; text-wrap: pretty; hyphens: auto; }
.copy > p:first-of-type, .copy > :not(p) + p { text-indent: 0; }
.copy > p:first-of-type::first-letter {
  font-family: var(--display); font-weight: 800; float: left; font-size: 4.3em; line-height: .8; margin: .07em .09em 0 0;
  color: var(--acc-ink);
}
.copy > h2, .copy > h3 { font-family: var(--display); font-weight: 800; font-size: 23px; line-height: 1.15; color: var(--ink-hi); margin: 1.2em 0 .45em; break-after: avoid; }
.copy > h3 { font-size: 20px; }
.copy strong { color: var(--ink-hi); font-weight: 600; }
.copy > blockquote:not(.pull) { margin: 1em 0; padding-left: 14px; border-left: 3px solid var(--acc); font-style: italic; color: var(--ink-hi); }
.copy > blockquote:not(.pull) p { margin: 0 0 .5em; }
.copy > ul, .copy > ol { margin: .6em 0; padding-left: 1.3em; }
.copy > hr { border: 0; height: 4px; width: 60px; margin: 1.4em 0; background: var(--rainbow); transform: skewX(-18deg); }
.copy code { font-family: var(--mono); font-size: .84em; background: var(--code-bg); padding: 1px 5px; }
.copy pre { background: var(--panel); padding: 14px 16px; overflow-x: auto; font-size: 14px; }
.cols { columns: 3 15.5em; column-gap: 40px; column-rule: 1px solid var(--line); }
.cols-2 { columns: 2 17em; column-gap: 44px; column-rule: 1px solid var(--line); }
.cols > *, .cols-2 > * { break-inside: avoid-column; }
.cols > p, .cols-2 > p { break-inside: auto; orphans: 3; widows: 3; }
.span { column-span: all; }
.orn { display: flex; align-items: center; gap: 14px; margin: 1em 0; color: var(--acc-ink); font-size: 14px; }
.orn::before, .orn::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .6; }
.inline-fig { margin: 1.2em 0; }
.inline-fig .ph { background: var(--night); }
.inline-fig img { display: block; width: 100%; }

/* pull quote: breaks across the column grid like the zines' picture blocks */
.pull {
  margin: 34px 0; padding: 20px 0 22px; border-top: 4px solid var(--acc); border-bottom: 1px solid var(--line);
  font-family: var(--display); font-style: italic; font-weight: 800; font-size: clamp(27px, 4vw, 46px); line-height: 1.1;
  letter-spacing: -.3px; color: var(--ink-hi); text-wrap: balance;
}
.pull p { margin: 0; text-indent: 0; }
.pull footer { margin-top: 12px; font-family: var(--mono); font-style: normal; font-weight: 400; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); }

/* picture strip with numbered captions; a picture is never cropped (it sits whole in its frame) */
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 40px 0; }
.strip.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.strip.n1 { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.strip figure { margin: 0; min-width: 0; }
.strip .ph { aspect-ratio: 16 / 10; background: var(--night); }
.strip img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* the score strip: maker box, score box, machine box */
.scorestrip { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; margin: 52px 0 0; align-items: stretch; }
.scorestrip.n2 { grid-template-columns: minmax(0, 1fr) auto; }
.scorestrip.n2 .puan { order: 2; }
.scorestrip.n1 { grid-template-columns: auto; justify-content: start; }
.sbox { min-width: 0; padding: 14px 18px 16px; border: 2px solid var(--ink-hi); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.sbox .kick { color: var(--ink-soft); }
.sbox .big {
  margin: 0; font-family: var(--ui); font-weight: 900; font-stretch: 78%; font-size: 30px; line-height: 1; letter-spacing: .3px;
  text-transform: uppercase; color: var(--ink-hi); overflow-wrap: anywhere;
}
.sbox .big.long { font-size: 20px; line-height: 1.1; }
.sbox .small { margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--ink-soft); }
.sbox.puan { border: 0; background: var(--screen); box-shadow: var(--screen-ring); padding: 14px 22px 18px; }
.sbox.puan .kick { color: var(--screen-ink); }
.seg { display: flex; align-items: flex-end; gap: 9px; color: var(--led); }
.seg svg { display: block; height: 86px; width: auto; transform: skewX(-7deg); overflow: visible; }
.seg .on { fill: currentColor; filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 45%, transparent)); }
.seg .off { fill: var(--led-off); }
.seg .of { margin-left: 4px; font-family: var(--mono); font-size: 13px; letter-spacing: 1px; color: var(--screen-ink); }
/* the rainbow bar counts in fifths: each stripe is twenty points */
.ledbar { position: relative; height: 7px; background: var(--rainbow); transform: skewX(-18deg); }
.ledbar::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: calc(100% - var(--p)); background: var(--led-off); }

.rv .disclosure, .rv .sources { max-width: var(--measure); }
.rv .sources { margin-top: 36px; }
.rv .folio, .spread .folio {
  display: flex; justify-content: space-between; gap: 16px; margin: 40px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--display); font-style: italic; font-weight: 600; font-size: 14px; color: var(--ink-soft);
}
.folio b { font-family: var(--ui); font-style: italic; font-weight: 900; letter-spacing: -.5px; color: var(--ink-hi); }
.folio .pno { display: none; }

/* ======================================================================================================== */
/* gothic: the lead picture in a pointed arch, whole in the straight-sided part, the head filled with a dark
   blurred copy of the same picture; red caps; three ruled columns; arch-topped strip */
.cv-open { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 34px; }
.cv-open > .leaf { min-width: 0; }
.cv-open > .leaf:first-child { padding-right: 48px; border-right: 1px solid var(--line); }
.cv-open > .leaf:last-child { padding-left: 48px; display: flex; flex-direction: column; justify-content: flex-end; }
.arch-wrap { position: relative; padding: 14px; }
.arch-wrap > svg.outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.outline path { fill: none; stroke: var(--line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.arch { position: relative; overflow: hidden; aspect-ratio: 80 / 69; clip-path: url(#ogive-lead); background: var(--night); }
.arch .blur, .strip.arches .ph .blur {
  position: absolute; inset: -30px; background-position: center 30%; background-size: cover;
  filter: blur(14px) brightness(.58) saturate(.9);
}
/* 65.2% is the straight-sided part of the arch (the head is the top 34.8%) */
.arch img { position: absolute; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 65.2%; object-fit: contain; border-top: 1px solid var(--acc); }
.th-gothic .fig-lead .capt { margin: 12px 14px 0; }
.rv .cv-title {
  margin: 14px 0 18px; font-family: var(--display); font-weight: 900; font-variation-settings: "opsz" 144;
  font-size: clamp(38px, 6vw, 92px); line-height: .86; letter-spacing: -.02em; text-transform: uppercase;
  overflow-wrap: normal; hyphens: none;
}
.cv-title .pre {
  margin-bottom: .22em; font-size: .3em; font-style: italic; font-weight: 800; letter-spacing: .12em;
  text-transform: none; color: var(--acc-ink);
}
.th-gothic.no-lead .cv-open { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.strip.arches .ph { position: relative; overflow: hidden; aspect-ratio: 4 / 3; clip-path: url(#ogive-strip); }
.strip.arches .ph img { position: absolute; left: 0; right: 0; bottom: 0; height: 75%; border-top: 1px solid var(--acc); }
.strip.arches figure { padding-top: 8px; border-top: 1px solid var(--line); }

/* ======================================================================================================== */
/* comic: key art cut by three claw marks that run on through a slanted title band, subhead tabs, a panel grid */
.wv-hero { position: relative; margin-top: 28px; container-type: inline-size; }
.wv-lead { aspect-ratio: 21 / 9; overflow: hidden; background: var(--night); }
.wv-lead img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.wv-band {
  position: relative; margin-top: -4cqi; padding: 3.4cqi 3cqi 2.4cqi; background: var(--acc); color: var(--band-ink);
  clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%);
}
.no-lead .wv-band { margin-top: 0; padding-top: 6cqi; }
.rv .wv-title { font-family: var(--ui); font-style: italic; font-weight: 900; line-height: .8; letter-spacing: -.045em; text-transform: uppercase; color: inherit; }
.wv-title .pre { font-size: clamp(14px, 2.4cqi, 30px); letter-spacing: .02em; margin: 0 0 .25em .1em; }
.wv-title .name { font-size: clamp(30px, 9cqi, 140px); padding-right: .06em; line-height: .86; text-wrap: balance; }
.claws { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.claws path { fill: var(--bg); }
.th-comic .wv-hero + .capt { margin-top: 10px; }
.wv-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; margin-top: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.wv-intro .dek { max-width: 40ch; font-size: 24px; margin: 10px 0 0; }
.wv-intro .byline { text-align: right; margin: 0; }
.wv-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 48px; margin-top: 36px; align-items: start; }
.th-comic.no-kunye .wv-grid { grid-template-columns: minmax(0, 1fr); }
.wv-grid aside { position: sticky; top: 24px; }
.wv-grid .copy { margin-top: 0; }
.th-comic .copy > h2 {
  display: table; margin: 1.3em 0 .55em; padding: 5px 11px 4px; background: var(--acc); color: var(--band-ink);
  font-family: var(--ui); font-style: italic; font-weight: 900; font-size: 19px; letter-spacing: .3px; text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--tab-shadow);
}
.th-comic .copy > h2:first-child { margin-top: 0; }
.th-comic .pull { border-top-width: 6px; transform: skewX(-4deg); font-family: var(--ui); font-style: italic; font-weight: 900; font-size: clamp(26px, 3.6vw, 42px); letter-spacing: -.02em; line-height: 1.04; }
.th-comic .pull footer { transform: skewX(4deg); }
.panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 40px 0; }
.panels .wide { grid-column: 1 / -1; }
.panel { position: relative; margin: 0; border: 3px solid var(--ink-hi); background: var(--night); display: flex; flex-direction: column; }
.panel img { display: block; width: 100%; }
.pcap {
  margin: auto 0 0; padding: 6px 10px 7px; background: var(--acc); color: var(--band-ink); border-top: 3px solid var(--ink-hi);
  font-family: var(--ui); font-weight: 600; font-size: 13.5px; line-height: 1.3;
}
.pcap b { color: inherit; }
.pcap .credit { display: block; margin-top: 2px; color: inherit; opacity: 1; }
/* on the accent fill the credit keeps the caption's ink when hovered; the underline thickens instead */
.pcap .credit a:hover { color: inherit; text-decoration-thickness: 2px; }
.th-comic .scorestrip .sbox:not(.puan) { border-width: 3px; }

/* ======================================================================================================== */
/* casefile: a Victorian case file: double-ruled frame, the subject in an oval cameo lit like fog art, ornament
   rules, an index-card künye, evidence prints with string tags */
.sb-open {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; margin-top: 34px;
  padding: 44px; border: 1px solid var(--line-soft); outline: 1px solid var(--line); outline-offset: 7px;
}
.cameo-wrap {
  position: relative; padding: 7%;
  background: radial-gradient(closest-side, rgba(232, 185, 35, .34), rgba(232, 185, 35, .09) 62%, transparent 100%);
}
.cameo { aspect-ratio: 4 / 5; border-radius: 50%; overflow: hidden; background: var(--night); box-shadow: 0 0 0 1px var(--acc), 0 0 0 9px var(--bg), 0 0 0 10px var(--line-soft); }
.cameo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.th-casefile .fig-lead .capt { text-align: center; }
.th-casefile .kick.rain { color: var(--acc-ink); }
.rv .sb-title { margin: 12px 0 18px; font-family: var(--display); text-wrap: balance; }
.sb-title .pre { font-style: italic; font-weight: 600; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; color: var(--ink-soft); margin-bottom: 10px; }
.sb-title .name { font-weight: 800; font-size: clamp(40px, 5.6vw, 76px); line-height: .98; letter-spacing: -.01em; }
.kunye.card { background-color: var(--panel); border-top: 0; outline: 1px solid var(--line-soft); outline-offset: -6px; padding: 20px 22px; }
.kunye.card > .kick { color: var(--acc-ink); border-bottom: 2px solid var(--acc); padding-bottom: 6px; }
.kunye.card dd { font-family: var(--serif); font-size: 16.5px; }
.kunye.card dt, .kunye.card dd { padding-bottom: 7px; border-bottom: 1px dotted var(--line-soft); }
.th-casefile .copy > p:first-of-type::first-letter { font-style: italic; }
.evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin: 44px 0; }
.evidence.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.evidence.n1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.evidence figure { margin: 0; padding: 10px 10px 14px; background: var(--panel); box-shadow: 0 12px 26px var(--shadow), 0 0 0 1px var(--line); }
.evidence figure:nth-child(2) { transform: translateY(14px); }
.evidence .ph { aspect-ratio: 16 / 9; overflow: hidden; background: var(--night); }
.evidence img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tag {
  display: inline-block; margin: 12px 0 2px; padding: 2px 8px 2px 18px; position: relative; border: 1px solid var(--acc-ink); border-radius: 2px 10px 10px 2px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--acc-ink);
}
.tag::before { content: ""; position: absolute; left: 6px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; border: 1px solid currentColor; }
.evidence figcaption { margin: 4px 0 0; font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.4; color: var(--ink-soft); }
.evidence figcaption .credit { font-style: normal; }
.th-casefile .pull { text-align: center; border-top: 0; border-bottom: 0; padding: 8px 0; font-weight: 600; }
.th-casefile .pull::before, .th-casefile .pull::after { content: "✦"; display: block; font-size: 16px; font-style: normal; color: var(--acc-ink); margin: 6px 0; }

/* ======================================================================================================== */
/* fanzine: a photocopied metal fanzine page: typewriter caps, numbered run-in heads, dashed boxes in a side
   column, a grain over the paper and a hand-drawn page number */
.th-fanzine {
  --zine-paper: var(--panel);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='x'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 .55'/></feComponentTransfer></filter><rect width='220' height='220' filter='url(%23x)' opacity='.12'/></svg>"),
    var(--bg);
  counter-reset: fz;
}
.fz-open { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 36px 48px; margin-top: 34px; align-items: start; }
.th-fanzine.no-kunye .fz-open { grid-template-columns: minmax(0, 1fr); }
.fz-main { min-width: 0; }
.rv .fz-title {
  margin: 16px 0 20px; padding-bottom: 16px; border-bottom: 3px solid var(--ink-hi);
  font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: -.01em;
}
.fz-title .pre {
  display: inline !important; font-family: var(--ui); font-weight: 900; font-stretch: 72%; font-size: clamp(34px, 6vw, 84px); line-height: .9;
  letter-spacing: .01em; color: var(--ink-hi);
}
.fz-title .pre::before { content: "01. "; color: var(--acc-ink); }
.fz-title .pre::after { content: " – "; color: var(--ink-soft); }
.fz-title .name {
  display: inline !important; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: none;
  font-size: clamp(30px, 5vw, 68px); line-height: 1; color: var(--ink-hi);
}
.th-fanzine .fz-title:not(:has(.pre)) .name::before { content: "01. "; font-family: var(--ui); font-style: normal; font-weight: 900; color: var(--acc-ink); }
.th-fanzine .dek { max-width: 46ch; font-family: var(--mono); font-style: normal; font-size: 16px; line-height: 1.6; }
.fz-lead { margin-top: 8px; padding: 12px; border: 2px dashed var(--ink-soft); }
.fz-lead .ph, .fz-pics .ph { background: var(--night); }
.fz-lead img, .fz-pics img { display: block; width: 100%; max-height: 640px; object-fit: contain; }
.kunye.dashed { background: transparent; border: 2px dashed var(--ink-soft); padding: 16px 16px 18px; }
.kunye.dashed > .kick { color: var(--ink-hi); font-weight: 500; }
.kunye.dashed dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
.kunye.dashed dt { color: var(--acc-ink); }
.kunye.dashed dd { font-family: var(--mono); font-size: 13.5px; line-height: 1.5; margin-bottom: 10px; }
.th-fanzine .copy { font-size: 17px; }
.th-fanzine .cols-2 { column-rule: 1px dashed var(--line-soft); }
.th-fanzine .copy > h2, .th-fanzine .copy > h3 {
  counter-increment: fz; font-family: var(--mono); font-weight: 500; font-size: 17px; letter-spacing: .5px; text-transform: uppercase;
  border-bottom: 1px dashed var(--ink-soft); padding-bottom: 4px;
}
.th-fanzine .copy > h2::before, .th-fanzine .copy > h3::before { content: counter(fz) ". "; color: var(--acc-ink); }
.th-fanzine .copy > p:first-of-type::first-letter { font-family: var(--ui); font-weight: 900; font-stretch: 72%; }
.fz-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 36px 0; }
.fz-pics.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fz-pics.n1 { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.fz-pics figure { margin: 0; padding: 10px; border: 2px dashed var(--ink-soft); min-width: 0; }
.fz-pics .capt b { font-family: var(--mono); }
.th-fanzine .pull {
  border: 2px dashed var(--acc); padding: 18px 22px; font-family: var(--mono); font-style: normal; font-weight: 500;
  font-size: clamp(20px, 2.6vw, 30px); line-height: 1.3; letter-spacing: -.01em;
}
.th-fanzine .folio .pno {
  display: inline-grid; place-items: center; min-width: 44px; height: 40px; padding: 0 6px; border: 2px solid var(--ink-hi);
  border-radius: 52% 46% 55% 43% / 48% 56% 44% 52%; transform: rotate(-6deg);
  font-family: var(--display); font-style: italic; font-weight: 800; font-size: 19px; color: var(--ink-hi);
}

/* ======================================================================================================== */
/* zine: the shared magazine page without a motif: a giant title across the top, the lead picture beside the deck
   and the künye, three ruled columns */
.zn-open { margin-top: 34px; }
.rv .zn-title {
  margin: 12px 0 26px; padding-bottom: 18px; border-bottom: 4px solid var(--acc);
  font-family: var(--display); font-weight: 900; font-variation-settings: "opsz" 144; font-size: clamp(40px, 7vw, 104px);
  line-height: .9; letter-spacing: -.02em; text-wrap: balance; hyphens: auto;
}
.zn-title .pre { font-size: .32em; font-style: italic; font-weight: 800; letter-spacing: .02em; color: var(--acc-ink); margin-bottom: .2em; }
.zn-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px 48px; align-items: start; }
.no-lead .zn-grid { grid-template-columns: minmax(0, 1fr); }
.no-lead .zn-side { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 48px; }
.no-lead.no-kunye .zn-side { display: block; }
.zn-lead .ph { background: var(--night); border-top: 4px solid var(--acc); }
.zn-lead img { display: block; width: 100%; max-height: 640px; object-fit: contain; }
.zn-side { min-width: 0; }
.zn-side .dek { max-width: none; }

/* ======================================================================================================== */
/* the news spread: two facing pages, a running head with rainbow rules, the beats as a tab block, one lead
   story, mid items with thumbnails, numbered shorts */
.spread-wrap { max-width: 1400px; margin: 0 auto; padding: 28px var(--gutter) 0; }
.spread-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 20px; }
.spread-bar .kick { color: var(--ink-soft); }
.spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 26px; }
.spread.single { grid-template-columns: minmax(0, 900px); justify-content: center; }
.pg { min-width: 0; display: flex; flex-direction: column; padding: 30px 36px 22px; background: var(--panel); box-shadow: 0 18px 40px var(--shadow), var(--ring); }
.pg.l { background-image: linear-gradient(270deg, rgba(0, 0, 0, .22), transparent 44px); }
.pg.r { background-image: linear-gradient(90deg, rgba(0, 0, 0, .22), transparent 44px); }
:root[data-theme="light"] .pg.l { background-image: linear-gradient(270deg, rgba(53, 40, 121, .14), transparent 44px); }
:root[data-theme="light"] .pg.r { background-image: linear-gradient(90deg, rgba(53, 40, 121, .14), transparent 44px); }
.pg > .grow { flex: 1; }
.rh { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; }
.rh .t { font-family: var(--ui); font-weight: 900; font-stretch: 72%; font-size: clamp(44px, 5.4vw, 74px); line-height: .85; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-hi); margin: 0; }
.rh .m { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.rh .lines { flex: 1; min-width: 40px; height: 30px; background: linear-gradient(180deg,
  var(--r1) 0 2px, transparent 2px 7px, var(--r2) 7px 9px, transparent 9px 14px, var(--r3) 14px 16px, transparent 16px 21px,
  var(--r4) 21px 23px, transparent 23px 28px, var(--r5) 28px 30px); }
.secs { display: flex; gap: 14px; align-items: stretch; margin: 0 0 10px; }
.secs .badge { width: 34px; height: auto; gap: 3px; }
.sec-tabs { margin: 0; padding: 8px 14px; background: var(--night); color: var(--ink-hi); font-family: var(--ui); font-weight: 900; font-style: italic; font-size: 15px; line-height: 1.3; letter-spacing: .3px; text-transform: uppercase; }
.sec-tabs span { display: block; }
.sec-tabs .c-games { color: #e8893a; } .sec-tabs .c-hardware { color: #6bb866; } .sec-tabs .c-metal { color: #e05a4e; }
.sec-tabs .c-tech { color: #6fa3d8; } .sec-tabs .c-science { color: var(--r3); }
:root[data-theme="light"] .sec-tabs { background: #352879; }
:root[data-theme="light"] .sec-tabs span { color: #fff; }
.sec-note { margin: 0 0 24px; font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: .3px; color: var(--ink-soft); max-width: 52ch; }

.nk { margin: 0 0 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft); }
.nk::before { content: ""; display: inline-block; width: 16px; height: 3px; margin: 0 9px 3px 0; vertical-align: middle; background: var(--acc); }
.c-games { --acc: var(--r2); } .c-hardware { --acc: var(--r4); } .c-metal { --acc: var(--r1); } .c-tech { --acc: var(--r5); } .c-science { --acc: var(--r3); }
.ntext { color: var(--ink-body); font-size: 16px; line-height: 1.55; }
.ntext p { margin: 0 0 .7em; text-wrap: pretty; hyphens: auto; }
.more { font-family: var(--ui); font-size: 13px; font-weight: 600; white-space: nowrap; }
.spread h2 a, .spread h3 a, .kisa li > b a { color: inherit; text-decoration: none; }
.spread h2 a:hover, .spread h3 a:hover, .kisa li > b a:hover { color: var(--hl); }
.spread .disclosure { margin: 6px 0 0; font-size: 14.5px; }
.spread .credit { display: block; margin-top: 3px; }
.lead-n { padding-bottom: 22px; border-bottom: 3px double var(--line-soft); }
.lead-n h2 { margin: 2px 0 16px; font-family: var(--display); font-weight: 800; font-size: clamp(32px, 3.9vw, 54px); line-height: .98; letter-spacing: -.01em; color: var(--ink-hi); text-wrap: balance; }
.lead-n .pic { margin: 0 0 16px; }
.lead-n .pic img { display: block; width: 100%; max-height: 560px; object-fit: contain; background: var(--night); }
.lead-n .ntext { columns: 2 14em; column-gap: 28px; column-rule: 1px solid var(--line); }
.lead-n .ntext > p:first-child::first-letter { font-family: var(--display); font-weight: 800; float: left; font-size: 3.4em; line-height: .8; margin: .06em .08em 0 0; color: var(--ink-hi); }
.lead-n .byline { margin-top: 10px; }
.mids { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 26px; align-content: start; }
.mid { padding: 18px 0 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.mid h3 { margin: 0 0 9px; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.1; color: var(--ink-hi); text-wrap: balance; }
.mid .thumb { float: right; width: 38%; margin: 4px 0 8px 14px; }
.mid .thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--night); }
.mid .thumb .credit { font-size: 9.5px; }
.pg.r .mid .thumb { float: none; width: 100%; margin: 0 0 10px; }
.pg.r .mid .thumb img { aspect-ratio: 16 / 9; }
.mid.top { grid-column: 1 / -1; }
.mid.top .thumb { width: 44%; }
.mid.top .thumb img { aspect-ratio: 16 / 10; }
.mid.top h3 { font-size: 30px; }
.kisa { margin-top: 24px; padding: 16px 18px 6px; border: 2px solid var(--ink-hi); position: relative; }
.kisa > h3 {
  position: absolute; top: -13px; left: 14px; margin: 0; padding: 0 8px; background: var(--panel);
  font-family: var(--ui); font-weight: 900; font-style: italic; font-size: 17px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-hi);
}
.kisa ol { list-style: none; margin: 0; padding: 0; columns: 2 12.5em; column-gap: 26px; column-rule: 1px solid var(--line); counter-reset: k; }
.kisa li { break-inside: avoid; padding: 6px 0 12px; counter-increment: k; font-family: var(--serif); font-size: 15px; line-height: 1.48; color: var(--ink-body); }
.kisa li > b:first-child { font-family: var(--ui); font-weight: 800; font-size: 15px; color: var(--ink-hi); }
.kisa li > b:first-child::before { content: counter(k) ". "; color: var(--ink-soft); }
.kisa .rumour { font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.spread .pg.r .folio { flex-direction: row-reverse; }
.spread .folio { margin-top: 18px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .wv-grid { grid-template-columns: minmax(0, 1fr); }
  .wv-grid aside { position: static; max-width: 560px; }
  .spread { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pg.l, .pg.r, :root[data-theme="light"] .pg.l, :root[data-theme="light"] .pg.r { background-image: none; }
}
@media (max-width: 860px) {
  .cv-open, .th-gothic.no-lead .cv-open, .sb-open, .zn-grid, .fz-open, .no-lead .zn-side { grid-template-columns: minmax(0, 1fr); }
  .cv-open > .leaf:first-child { padding-right: 0; border-right: 0; }
  .cv-open > .leaf:last-child { padding-left: 0; padding-top: 18px; }
  .arch-wrap { max-width: 460px; margin: 0 auto; }
  .cv-title { font-size: clamp(38px, 11vw, 92px); }
  .sb-open { padding: 28px 22px; }
  .cameo-wrap { max-width: 360px; margin: 0 auto; }
  .wv-intro { grid-template-columns: minmax(0, 1fr); }
  .wv-intro .byline { text-align: left; }
  .scorestrip, .scorestrip.n2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .scorestrip .puan { grid-column: 1 / -1; order: -1 !important; }
}
@media (max-width: 720px) {
  .rv, .spread-wrap { --gutter: 16px; }
  .runhead { padding-top: 20px; }
  .copy { font-size: 17px; margin-top: 32px; }
  .strip, .strip.n2, .evidence, .evidence.n2, .fz-pics, .fz-pics.n2 { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .evidence figure:nth-child(2) { transform: none; }
  .strip.arches.n3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .strip.arches.n3 figure:first-child { grid-column: 1 / -1; }
  .rv .dek, .wv-intro .dek { font-size: 19px; }
  .panels { gap: 8px; }
  .pg { padding: 22px 16px 18px; margin: 0 -16px; box-shadow: none; }
  .spread-wrap { padding-top: 16px; }
  .mids { grid-template-columns: minmax(0, 1fr); }
  .mid.top .thumb, .mid .thumb { width: 40%; }
  .lead-n .ntext { columns: auto; }
  .kisa ol { columns: auto; }
  .rh .m { white-space: normal; }
  .sbox .big { font-size: 24px; }
  .sbox .big.long { font-size: 18px; }
  .seg svg { height: 70px; }
  .fz-lead { padding: 8px; }
}
@media (max-width: 420px) {
  .scorestrip, .scorestrip.n2 { grid-template-columns: minmax(0, 1fr); }
  .kunye dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .kunye dd { margin-bottom: 8px; }
  .sec-tabs { font-size: 13px; }
  .panels { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rv *, .spread-wrap * { transition: none !important; animation: none !important; }
}