/* ==========================================================================
   LustLit ISSUE READER v2 — reader.css (the contract: Code/issues/SPEC-v2.md, section 3)
   Mobile first: the phone (390x844) is the base, desktop and tablet are the (min-width: 700px) layer, a phone held
   sideways is (min-width: 700px) and (max-height: 559px). Design law (Code/design-system.md):
   - dark, always; the accent is #ef4444; #c41e3a is structure, never type
   - GOLD IS RETIRED; per-woman identity colours only for her own marks (--her)
   - every number is white (.num): proportional lining figures in running text, tabular only in columns (.num-tab)
   - glows are filter: drop-shadow, NEVER box-shadow (there is no box-shadow in this file)
   - Plus Jakarta Sans for everything; --display is the DESK headline-font toggle only
   - --issue-accent is the issue's second accent, set per issue on <html> by the build
   Nothing issue-specific is typed here: build.py checks.
   ========================================================================== */

:root {
  color-scheme: dark;
  --black: #0a0a0a;
  --paper: #0f0d0e;
  --paper-2: #161314;
  --ink: #ebe6e0;
  --ink-2: rgba(235, 230, 224, .76);
  --ink-3: rgba(235, 230, 224, .58);
  --hair: rgba(255, 255, 255, .09);
  --red: #ef4444;
  --blood: #c41e3a;
  --issue-accent: #ef4444;
  --rail: #141417;
  --her: #ef4444;
  --her-rgb: 239, 68, 68;
  --fit: 1;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --display: var(--font);
  --display-weight: 800;
  --display-track: -0.035em;
  --neon-line: linear-gradient(90deg, transparent 0%, #ef4444 50%, transparent 100%);
  --glow: drop-shadow(0 0 2px rgba(239, 68, 68, 1)) drop-shadow(0 0 6px rgba(239, 68, 68, .7)) drop-shadow(0 0 14px rgba(239, 68, 68, .4));
  --glow-sm: drop-shadow(0 0 2px rgba(239, 68, 68, .9)) drop-shadow(0 0 6px rgba(239, 68, 68, .45));
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  /* set by reader.js from the real viewport; these are the no-JS fallbacks */
  --pw: min(560px, calc(100vw - 16px));
  --ph: min(780px, calc(100svh - 110px));
  --fs: 17px;
  --lh: 27px;
  --pad-o: 20px; --pad-i: 20px; --pad-t: 42px; --pad-b: 44px;
  --tbw: calc(var(--pw) - 40px);
  --tbh: calc(var(--ph) - 86px);
  /* THE PRINT TEMPLATE (reader.js section 3): the safe line inside the trim and the bleed outside it, in this page's
     pixels (0.25 in and 0.125 in of an 8.5 x 11 in page) */
  --safe: 12px;
  --bleed: 6px;
  /* chrome: phones get a thumb dock at the bottom */
  --top: 34px;
  --nav: 54px;
  --spice: 30px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --dock: calc(var(--nav) + var(--spice) + var(--safe-b));
}
@media (min-width: 700px) {
  :root { --top: 54px; --nav: 0px; --spice: 46px; }
}
@media (min-width: 700px) and (max-height: 559px) {          /* a phone held sideways: the chrome gives the page room */
  :root { --top: 40px; --spice: 34px; }
}

/* the DESK headline-font toggle (body text is always Plus Jakarta Sans; PUBLIC has no toggle) */
[data-font="playfair"] { --display: 'Playfair Display', Georgia, serif; --display-weight: 800; --display-track: -0.012em; }
[data-font="bodoni"]   { --display: 'Bodoni Moda', Didot, 'Bodoni 72', Georgia, serif; --display-weight: 800; --display-track: -0.02em; }
[data-font="dmserif"]  { --display: 'DM Serif Display', Georgia, serif; --display-weight: 400; --display-track: -0.01em; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--black); }
body {
  background: var(--black); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; }
img { display: block; max-width: 100%; -webkit-user-drag: none; user-select: none; }
/* SPEC R6: the tabular one of Plus Jakarta Sans has a foot. Proportional lining figures wherever numbers sit in a line;
   tabular only where they stack in a column (the page counter, the contents, the contact sheet). */
.num { color: #fff; font-variant-numeric: lining-nums proportional-nums; }
.num-tab { font-variant-numeric: lining-nums tabular-nums; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 13px; height: 13px; vertical-align: -2px; }
.dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; vertical-align: middle; margin: 0 .45em; }
.eyebrow { font: 700 11px/1.2 var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 100; background: var(--black); color: #fff; padding: 10px 14px; border: 1px solid var(--red); border-radius: 6px; font-weight: 700; }
.skip:focus { top: 8px; }
[data-mode="desk"] .only-public { display: none !important; }
[data-view="free"] .for-prem, [data-view="premium"] .for-free { display: none !important; }

/* proof marks: Hayden's editorial layer (DESK only; a PUBLIC build carries none) */
.proof { display: none; }
[data-proof="on"] .proof {
  display: inline-block; font: 700 9px/1.35 var(--font); letter-spacing: .08em; text-transform: uppercase;
  color: var(--red); border: 1px solid rgba(239, 68, 68, .5); border-radius: 3px; padding: 3px 6px;
  background: rgba(10, 10, 10, .88); max-width: 100%; white-space: normal;
}
[data-proof="on"] .pf-state[data-state="ok"] { color: #fff; border-color: rgba(255, 255, 255, .45); }
[data-proof="on"] .pf-state[data-state="pub"] { color: #fff; border-color: rgba(239, 68, 68, .8); }
[data-proof="on"] .pf-state[data-state="rev"] { color: #a3a3a3; border-color: rgba(255, 255, 255, .22); }

/* ============================================================ the chrome */
.bar {
  position: fixed; left: 0; right: 0; top: 0; height: var(--top); z-index: 30;
  display: flex; align-items: center; justify-content: space-between; padding: 0 14px;
  background: var(--black); border-bottom: 1px solid rgba(206, 14, 48, .26);
}
.bar-mast { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; color: #fff; }
.bm-word { display: block; line-height: 0; }
.bm-wm { display: block; height: 14px; width: auto; fill: currentColor; }
.bm-no, .bm-theme { font: 700 10px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.bm-theme { color: var(--issue-accent); }

/* phones: the controls live in a thumb dock at the foot of the screen */
.bar-r {
  position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--nav) + var(--safe-b)); padding: 0 6px var(--safe-b);
  display: flex; align-items: center; justify-content: space-between; gap: 4px; z-index: 31; background: var(--black);
}
.tb {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 0 10px;
  border-radius: 8px; font: 600 12.5px/1 var(--font); color: var(--ink-2); letter-spacing: .01em; white-space: nowrap; text-decoration: none;
}
.tb:hover { color: #fff; }
.tb[aria-expanded="true"] { color: #fff; }
.tb-contents span, .tb-login span { display: none; }
.tb-join { border: 1px solid #ef4444; color: #fff; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; min-height: 38px; }
.tb-join:hover { background: rgba(239, 68, 68, .12); }
.tb-desk span { display: none; }
.tb-guides { display: none; }                         /* DESK: the Print guides (on a phone, in the settings sheet) */
.tb-guides[aria-checked="true"] { color: #fff; outline: 1px solid rgba(239, 68, 68, .6); outline-offset: -1px; }
.sheet-sub { display: block; font: 600 11px/1.3 var(--font); color: var(--ink-3); margin-top: 3px; }
.tb-badge { font: 800 10px/1 var(--font); color: #fff; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; border: 1px solid #ef4444; }
.tb-badge:empty { display: none; }
.bar-r > .sw { display: none; }
.seg { display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 3px; gap: 2px; }
.seg-label { display: none; }
.seg .lg { display: none; }
.seg-wide .lg { display: inline; } .seg-wide .sm { display: none; }
.seg button { min-height: 36px; padding: 0 12px; border-radius: 999px; font: 700 11.5px/1 var(--font); letter-spacing: .02em; color: var(--ink-3); white-space: nowrap; }
.seg button[aria-checked="true"] { color: #fff; background: rgba(239, 68, 68, .16); outline: 1px solid rgba(239, 68, 68, .55); outline-offset: -1px; }
.menu-wrap { position: relative; }
.menu {
  position: absolute; bottom: calc(100% + 10px); right: -40px; min-width: 232px; z-index: 40;
  background: #121012; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 6px;
  display: grid; gap: 2px;
}
.menu[hidden] { display: none; }
.menu button { text-align: left; padding: 11px 12px; border-radius: 7px; font-size: 15px; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.menu button small { font: 600 10px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.menu button[aria-checked="true"] { background: rgba(239, 68, 68, .12); color: #fff; }
.menu [data-font-btn="jakarta"] { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; }
.menu [data-font-btn="playfair"], .fs-playfair { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; }
.menu [data-font-btn="bodoni"], .fs-bodoni { font-family: 'Bodoni Moda', Didot, Georgia, serif; font-weight: 800; }
.menu [data-font-btn="dmserif"], .fs-dmserif { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; }
.fs-jakarta { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; }

/* the settings sheet (a bottom sheet on phones; a side panel from 700px) */
.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(4, 3, 4, .6); display: flex; align-items: flex-end; }
.sheet[hidden] { display: none; }
.sheet-in {
  width: 100%; max-height: 88svh; overflow-y: auto; background: #121012; border-top: 1px solid rgba(206, 14, 48, .35); border-radius: 16px 16px 0 0;
  padding: 10px 18px calc(18px + var(--safe-b)); display: grid; gap: 10px; align-content: start;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-label { font: 700 10px/1 var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.seg-wide { width: 100%; }
.seg-wide button { flex: 1; min-height: 44px; font-size: 13px; }
.fontgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fontgrid button { border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; padding: 10px 4px 9px; font: 600 11px/1.2 var(--font); color: var(--ink-2); display: grid; gap: 4px; justify-items: center; }
.fontgrid button b { font-size: 26px; line-height: 1; color: #fff; }
.fontgrid button[aria-checked="true"] { border-color: rgba(239, 68, 68, .7); color: #fff; }
.sheet-row { display: flex; align-items: center; justify-content: space-between; min-height: 50px; border-top: 1px solid var(--hair); font-size: 15px; color: var(--ink); text-align: left; text-decoration: none; }
.sheet-join { color: #fff; font-weight: 700; }
.knob { width: 42px; height: 24px; border-radius: 999px; background: #2a2628; position: relative; flex: none; transition: background .2s; }
.knob::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #bbb; transition: transform .2s; }
[aria-checked="true"] > .knob { background: rgba(239, 68, 68, .55); }
[aria-checked="true"] > .knob::after { transform: translateX(18px); background: #fff; }

@media (min-width: 700px) {
  .bar { padding: 0 22px; }
  .bm-wm { height: 18px; }
  .bar-r { position: static; height: auto; padding: 0; background: none; gap: 6px; }
  .tb-contents span, .tb-login span, .tb-desk span { display: inline; }
  .tb-guides { display: inline-flex; }
  .bar-r > .sw { display: inline-flex; }
  .bar-r > .sw[aria-checked="true"] { color: #fff; }
  .bar-r > .sw[aria-checked="true"]::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red); filter: var(--glow-sm); }
  .bar-r > .sw[aria-checked="false"]::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ink-3); }
  .tb-more { display: none; }
  .seg-label { display: inline; font: 700 10px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); padding: 0 8px 0 10px; }
  .seg .lg { display: inline; } .seg .sm { display: none; }
  .menu { bottom: auto; top: calc(100% + 8px); right: 0; }
  .sheet { align-items: stretch; justify-content: flex-end; }
  .sheet-in { width: min(400px, 100vw); max-height: none; height: 100%; border-top: 0; border-left: 1px solid rgba(206, 14, 48, .35); border-radius: 0; padding-top: calc(var(--top) + 6px); }
}
@media (min-width: 700px) and (max-width: 1180px) {
  .bar-r > .sw span, .seg-label, .tb-guides span { display: none; }
  [data-mode="desk"] .bm-theme { display: none; }
}
@media (min-width: 700px) and (max-width: 960px) {
  .seg .lg { display: none; } .seg .sm { display: inline; }
  .tb-contents span, .tb-desk span { display: none; }
}
@media (min-width: 700px) and (max-height: 559px) {
  .bm-wm { height: 15px; }
  .tb, .seg button { min-height: 36px; }
}

/* ============================================================ the reader */
.reader {
  position: fixed; left: 0; right: 0; top: var(--top); bottom: var(--dock);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
@media (min-width: 700px) { .reader { bottom: calc(var(--spice) + var(--safe-b)); } }
.mode-scroll .reader, .no-js .reader { display: none; }
.stage-wrap { position: relative; }
/* a phone held sideways: the spread is as wide as the screen and the page scrolls down (SPEC R10) */
.is-tall .reader { overflow-y: auto; overflow-x: hidden; align-items: flex-start; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.is-tall .stage-wrap { margin: 6px auto 12px; }
.is-tall .turn { display: none !important; }
.stage {
  position: relative; width: calc(var(--pw) * var(--cols, 1)); height: var(--ph);
  transform: translateX(var(--off, 0px)); outline: none; touch-action: pan-y pinch-zoom;
}
.stage.bump { animation: bump .22s ease-out; }
@keyframes bump { 50% { translate: 7px 0; } }
.stage:focus-visible { outline: 2px solid rgba(239, 68, 68, .6); outline-offset: 6px; }
.book-shadow {
  position: absolute; left: -4%; right: -4%; top: 3%; bottom: -4%; pointer-events: none;
  background: radial-gradient(ellipse 52% 50% at 50% 50%, rgba(0, 0, 0, .9), transparent 72%);
}
.loading { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); pointer-events: none; }
.is-ready .loading { display: none; }
.turn { display: none; }

/* pages */
.pg {
  position: absolute; left: 0; top: 0; width: var(--pw); height: var(--ph); overflow: hidden; contain: strict;
  background: var(--grain), var(--paper); color: var(--ink); transform-origin: 0 0; user-select: text; -webkit-user-select: text;
}
.pg[hidden] { display: none; }
.until-found .pg[hidden="until-found"] { display: block; }
.pg.is-staged { visibility: hidden; }
.pg-in { position: absolute; inset: 0; }
.pg-shade { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.pg.side-left .pg-shade { background: linear-gradient(to left, rgba(0, 0, 0, .42), rgba(0, 0, 0, .12) 3.5%, transparent 9%); }
.pg.side-right .pg-shade { background: linear-gradient(to right, rgba(0, 0, 0, .46), rgba(0, 0, 0, .12) 3.5%, transparent 9%); }
.pg.side-single .pg-shade { background: linear-gradient(to right, rgba(0, 0, 0, .34), transparent 4%); }
.pg-cover.side-single .pg-shade, .pg-cover.side-right .pg-shade { background: linear-gradient(to right, rgba(0, 0, 0, .28), transparent 2.5%); }
.pg-back { background: var(--grain), #121011; }
.fold-clip { position: absolute; top: 0; width: var(--pw); height: var(--ph); overflow: hidden; pointer-events: none; z-index: 3; display: none; }
.fold-shade { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: linear-gradient(to right, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.stage.flipping .fold-clip { display: block; }
.stage.dragging, .stage.dragging * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing; }
.pg.corner-hot { cursor: grab; }

/* text pages */
.rh {
  position: absolute; left: var(--pad-o); right: var(--pad-i); top: max(var(--safe), calc(var(--pad-t) * .38)); height: 12px;
  display: flex; justify-content: space-between; gap: 10px; font: 700 9.5px/12px var(--font); letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden;
}
/* her colour as TYPE is lifted toward white so small text clears AA (4.5:1); her marks keep the pure --her. */
.rh b { color: color-mix(in oklab, var(--her) 68%, #fff); font-weight: 700; }
.side-right .rh { left: var(--pad-i); right: var(--pad-o); justify-content: flex-end; }
.side-left .rh { justify-content: flex-start; }
.tbox { /* the text box: a whole number of lines tall */
  position: absolute; top: var(--pad-t); left: var(--pad-o); width: var(--tbw); height: var(--tbh); overflow: hidden;
}
.side-right .tbox { left: var(--pad-i); }
.folio {
  position: absolute; bottom: max(var(--safe), calc(var(--pad-b) * .34)); left: var(--pad-o); right: var(--pad-i);
  display: flex; gap: .6em; align-items: baseline; justify-content: center; font: 700 9.5px/1 var(--font); letter-spacing: .2em; color: var(--ink-3);
}
.folio .fo-name { color: var(--red); }
.side-left .folio { justify-content: flex-start; }
.side-right .folio { left: var(--pad-i); right: var(--pad-o); justify-content: flex-end; }

/* the story's type: identical in the measuring box, on the page and in one-page mode */
.tbox, .measure .tbox {
  font: 400 var(--fs)/var(--lh) var(--font); color: var(--ink); text-align: justify; hyphens: auto; -webkit-hyphens: auto;
  font-kerning: normal; font-variant-ligatures: common-ligatures; overflow-wrap: break-word;
}
.tbox p { text-indent: 1.35em; }
.tbox p.first, .tbox p.after-break, .tbox p.split-tail { text-indent: 0; }
.tbox p.split-head { text-align-last: justify; }
html:not(.is-spread):not(.is-big) .tbox { text-align: left; }
html:not(.is-spread):not(.is-big) .tbox p.split-head { text-align-last: auto; }
.tbox em { font-style: italic; }
p.first::first-letter {
  font-family: var(--display); font-weight: var(--display-weight); color: var(--her); -webkit-initial-letter: 3; initial-letter: 3;
  margin-right: .12em;
}
@supports not ((initial-letter: 3) or (-webkit-initial-letter: 3)) {
  p.first::first-letter { float: left; font-size: calc(var(--lh) * 3.05); line-height: calc(var(--lh) * 2.6); margin: calc(var(--lh) * .12) .1em 0 0; }
}
.pq { position: relative; padding: calc(var(--lh) * .5) 0 calc(var(--lh) * .75); text-align: left; }
.pq::before { content: ''; display: block; width: 58px; height: 2px; background: var(--neon-line); filter: var(--glow-sm); margin-bottom: calc(var(--lh) * .5); }
.pq-text {
  font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); color: #fff;
  font-size: calc(var(--fs) * 1.5); line-height: 1.16; text-indent: 0 !important; text-align: left; hyphens: manual;
}
.pq .proof { position: absolute; right: 0; top: calc(var(--lh) * .2); }
hr.scene { border: 0; height: calc(var(--lh) * 2); position: relative; overflow: visible; }
hr.scene::after { content: ''; position: absolute; left: 50%; top: 50%; width: 64px; height: 2px; margin: -1px 0 0 -32px; background: var(--neon-line); filter: var(--glow-sm); }

/* the measuring box: same fonts, same width, laid out off screen */
.measure { position: absolute; left: -99999px; top: 0; visibility: hidden; pointer-events: none; contain: layout style; }
.measure .pg { position: relative; height: auto; contain: none; overflow: visible; }
.measure .tbox { position: relative; top: 0; left: 0; height: auto; overflow: visible; }

/* ============================================================ pagecards: every fixed page */
.pagecard {
  --fit: 1; position: relative; width: 100%; height: 100%; container-type: size; overflow: hidden;
  background: var(--grain), var(--paper); color: var(--ink);
}
.pg > .pg-in > .pagecard { position: absolute; inset: 0; }
.pagecard > .proof { position: absolute; left: 12px; bottom: 10px; z-index: 6; max-width: calc(100% - 24px); }

/* ============================================================ THE COVER
   SPEC R3 (the art, anchored at the top; the wordmark over the dark fade) and Code/issues/COVER-TEMPLATE.md (a
   golden-age newsstand cover: skyline, banner, masthead, folio row with the edition word, cover lines down one side,
   the plus line, the lead line, the burst, the counts line, the sell line). Every word comes from the issue card's
   cover block; the layout is .cv-layout-left | -right | -split and the burst .cv-burst-lower-right | -upper-right | ...
   No type ever crosses her face (about 26-44% of the height, centred). The masthead's three switches are custom
   properties (build.py writes an issue's override inline):
     --mast-fade    the layer between the art and the masthead: black .62 at the top to clear at 30% of the PAGE's
                    height, linear (Hayden's pick: "yes the dark fade is amazing"); none turns it off
     --mast-halo    a filter on the masthead, none by default; the one-line switch is
                    drop-shadow(0 0 .045em rgba(0,0,0,.85)) drop-shadow(0 0 .015em rgba(0,0,0,.6))  (em = its cap size)
     --mast-stroke  '<width> <colour>' outside the letters, none by default (reader.js turns it into --ms-w/--ms-c) */
.cover {
  --mast-fade: linear-gradient(to bottom, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, 0) 30%);
  --mast-halo: none;
  --mast-stroke: none;
  --cover-accent: var(--issue-accent);
  --cover-accent-deep: #9c2f0a;
  /* THE PRINT TEMPLATE (2026-09-30): the skyline sits on the safe line, not in the trim's reach (it was 1% from the top),
     and the masthead under it keeps its size (the band is 17% of the page, less its 3.3% top margin, below that) */
  --mast-top: max(3.3cqh, calc(var(--safe) + 1px + 1.13 * max(8px, 1.4cqw) + 1.2cqh));
  --mast-h: min(calc(88cqw / var(--wm-ar, 4.8)), 13.7cqh);
  --edge: max(5.4cqw, var(--safe));  /* the page's type margin */
  /* her face, in page terms. The art is always the page's full height (object-fit cover on a page narrower than the
     art, contain on a wider one), so the face box COVER-TEMPLATE gives (36-64% of the ART's width) lands here, however
     much of the art's sides the page crops. build.py writes --art-ar (the art's width / height) and --fx (its focus
     across, 0-1). The side column is at most 30% of the page and always stops short of her face. */
  --art-ar: .773;
  --fx: .5;
  --face-l: calc((100cqw - var(--art-ar) * 100cqh) * var(--fx) + var(--art-ar) * 36cqh);
  --face-r: calc((100cqw - var(--art-ar) * 100cqh) * var(--fx) + var(--art-ar) * 64cqh);
  --col: min(30cqw, calc(var(--face-l) - var(--edge) - 1.6cqw));
  background: #050405; color: #fff;
}
.cv-layout-right, .cv-layout-split { --col: min(30cqw, calc(100cqw - var(--face-r) - var(--edge) - 1.6cqw)); }
.cv-contain { --fx: .5; }
.cv-art { position: absolute; inset: 0; overflow: hidden; background: #0b0a0c; }
.cv-img, .cv-cut { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus-x, 50%) 0; }
.cv-contain .cv-img, .cv-contain .cv-cut { object-fit: contain; object-position: 50% 0; }
.cv-fade { position: absolute; inset: 0; background: var(--mast-fade); pointer-events: none; }
/* the scrim: dark at the foot for the sell line, and dark down the side the lines are on (the lead's side too) */
/* the side the lines are on is deepened from the page's edge, and the scrim is clear by the edge of her face box
   (--face-l / --face-r), so the deks read over busy streets without darkening her */
.cv-scrim { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(4, 3, 4, .9) 0%, rgba(4, 3, 4, .62) 9%, rgba(4, 3, 4, .2) 24%, rgba(4, 3, 4, 0) 40%),
    linear-gradient(to right, rgba(4, 3, 4, .8) 0, rgba(4, 3, 4, .64) calc(var(--face-l) * .5), rgba(4, 3, 4, .3) calc(var(--face-l) * .82),
      rgba(4, 3, 4, 0) var(--face-l)); }
.cv-layout-right .cv-scrim { background:
    linear-gradient(to top, rgba(4, 3, 4, .9) 0%, rgba(4, 3, 4, .62) 9%, rgba(4, 3, 4, .2) 24%, rgba(4, 3, 4, 0) 40%),
    linear-gradient(to left, rgba(4, 3, 4, .8) 0, rgba(4, 3, 4, .64) calc((100cqw - var(--face-r)) * .5),
      rgba(4, 3, 4, .3) calc((100cqw - var(--face-r)) * .82), rgba(4, 3, 4, 0) calc(100cqw - var(--face-r))); }
.cv-layout-split .cv-scrim { background:
    linear-gradient(to top, rgba(4, 3, 4, .9) 0%, rgba(4, 3, 4, .62) 9%, rgba(4, 3, 4, .2) 24%, rgba(4, 3, 4, 0) 40%),
    linear-gradient(to right, rgba(4, 3, 4, .5) 0%, rgba(4, 3, 4, 0) 34%, rgba(4, 3, 4, 0) 66%, rgba(4, 3, 4, .5) 100%); }
/* the top band: the skyline, the banner, the masthead, the folio row with the edition word */
.cv-skyline {
  position: absolute; left: 0; right: 0; top: max(1.05cqh, calc(var(--safe) + 1px + .13em)); z-index: 3; text-align: center; white-space: nowrap;
  font: 700 max(8px, 1.4cqw)/1 var(--font); letter-spacing: .44em; text-transform: uppercase; color: rgba(255, 255, 255, .86);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .6));
}
/* the ribbon runs off the left edge (it may bleed); its words start on the safe line. Words are measured by their
   frame, which stands .13em above the capitals in Plus Jakarta Sans (hence the .13em), and a small font's frame rounds
   to whole pixels differently from one browser to the next (hence the 1px) */
.cv-banner { position: absolute; left: 0; top: max(.55cqh, calc(var(--safe) + 1px - .72cqh + .13 * max(7.5px, 1.3cqw))); z-index: 6; pointer-events: none; }
.cv-banner span {
  display: block; padding: .72cqh 3.2cqw .72cqh max(2.2cqw, calc(var(--safe) + .8cqw)); background: var(--cover-accent-deep); color: #fff;
  font: 800 max(7.5px, 1.3cqw)/1 var(--font); letter-spacing: .22em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.3cqw) 50%, 100% 100%, 0 100%);    /* a swallowtail ribbon */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45));
}
.cv-mast {
  position: absolute; left: 50%; top: var(--mast-top); z-index: 3; transform: translateX(-50%);
  width: calc(var(--mast-h) * var(--wm-ar, 4.8)); font-size: var(--mast-h); line-height: 1;
  color: #fff; filter: var(--mast-halo);
}
.cv-wm { display: block; width: 100%; height: auto; overflow: visible; }
.cv-wm .wm-path { fill: currentColor; stroke: var(--ms-c, none); stroke-width: var(--ms-w, 0); paint-order: stroke fill; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cv-cut { z-index: 4; pointer-events: none; }
.cv-folio {
  position: absolute; left: var(--edge); right: var(--edge); top: calc(var(--mast-top) + var(--mast-h) + 1cqh); z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqw; padding-top: .9cqh;
  border-top: 1px solid rgba(255, 255, 255, .22); white-space: nowrap; filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .6));
}
.cv-date, .cv-price { font: 700 max(8px, 1.45cqw)/1 var(--font); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.cv-price { text-align: right; }
.cv-edition { font: 800 max(11px, 3.1cqw)/1 var(--font); letter-spacing: .36em; margin-right: -.36em; text-transform: uppercase; color: var(--cover-accent);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .95)) drop-shadow(0 0 7px rgba(0, 0, 0, .8)); }       /* legible on any hat band */
/* the cover lines down one side (left by default), and the plus line */
.cv-side { position: absolute; left: var(--edge); top: calc(var(--mast-top) + var(--mast-h) + 5.8cqh); width: var(--col); z-index: 5;
  display: grid; gap: 1.8cqh; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)) drop-shadow(0 2px 10px rgba(0, 0, 0, .55)); }
.cv-layout-right .cv-side, .cv-layout-split .cv-side { left: auto; right: var(--edge); text-align: right; }
.cv-more { list-style: none; display: grid; gap: 1.8cqh; }
.cv-more a, .cv-lead { text-decoration: none; color: inherit; display: grid; gap: .45cqh; }
.cv-name { display: flex; align-items: center; gap: 1.2cqw; font: 800 max(8px, 1.4cqw)/1.1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.cv-name::before { content: ''; width: 3.2cqw; height: 2px; background: var(--her); flex: none; }
.cv-layout-right .cv-more .cv-name, .cv-layout-split .cv-more .cv-name { justify-content: flex-end; }
.cv-layout-right .cv-more .cv-name::before, .cv-layout-split .cv-more .cv-name::before { order: 2; }
.cv-more .cv-title { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: 3.3cqw; line-height: .98; color: #fff; }
.cv-line { font: italic 400 max(10px, 1.75cqw)/1.3 var(--font); color: rgba(255, 255, 255, .88); }
.cv-lines-bare .cv-more .cv-line { display: none; }      /* reader.js: a page too short for every dek at 8px or more */
.cv-plus { font: italic 400 max(10px, 1.75cqw)/1.3 var(--font); color: rgba(255, 255, 255, .9); padding-top: 1.4cqh; border-top: 1px solid rgba(255, 255, 255, .2); }
.cv-plus b { font: 800 max(8px, 1.4cqw)/1 var(--font); font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: var(--cover-accent); margin-right: .6em; }
/* the lead line: the cover girl, the biggest type after the masthead */
.cv-leadbox { position: absolute; left: var(--edge); bottom: 12.6cqh; width: 52cqw; z-index: 5;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)) drop-shadow(0 3px 14px rgba(0, 0, 0, .6)); }
.cv-layout-right .cv-leadbox { left: auto; right: var(--edge); text-align: right; }
.cv-layout-right .cv-lead .cv-name { justify-content: flex-end; }
.cv-layout-right .cv-lead .cv-name::before { order: 2; }
.cv-lead .cv-name { font-size: max(9px, 1.9cqw); gap: 1.6cqw; }
.cv-lead .cv-name::before { width: 5.6cqw; height: 3px; }
.cv-lead .cv-title { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: 8.6cqw; line-height: .9; color: #fff; text-wrap: balance; hyphens: manual; }
.cv-lead .cv-dek { font: italic 400 max(11px, 2.25cqw)/1.3 var(--font); color: rgba(255, 255, 255, .92); max-width: 30ch;
  margin-top: 1.5cqh; }                                        /* air under the title's descenders (Hayden, 2026-09-30) */
.cv-layout-right .cv-lead .cv-dek { margin-left: auto; }
.cv-lines a:hover .cv-title, .cv-lead:hover .cv-title, .cv-more a:hover .cv-title { text-decoration: underline; text-decoration-color: #ef4444; text-decoration-thickness: 2px; text-underline-offset: .12em; }
/* the burst: a round, tilted sticker in the month's accent, the count white */
.cv-burst {
  position: absolute; z-index: 6; width: 18cqw; min-width: 70px; aspect-ratio: 1; border-radius: 50%; right: var(--edge); bottom: 20cqh;
  display: grid; place-content: center; justify-items: center; gap: .5cqw; text-align: center; color: #fff; transform: rotate(-12deg);
  background: radial-gradient(circle at 34% 28%, color-mix(in oklab, var(--cover-accent) 86%, #fff) 0%, var(--cover-accent) 38%, var(--cover-accent-deep) 100%);
  filter: drop-shadow(0 .9cqw 1.6cqw rgba(0, 0, 0, .55));
}
.cv-burst::before { content: ''; position: absolute; inset: 1cqw; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .6); }
.cv-burst > b { font: 800 max(26px, 8.2cqw)/.8 var(--font); letter-spacing: -.04em; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.cv-burst > span { font: 800 max(7.5px, 1.4cqw)/1.15 var(--font); letter-spacing: .14em; text-transform: uppercase; max-width: 13cqw; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.cv-burst-upper-right .cv-burst { bottom: auto; top: calc(var(--mast-top) + var(--mast-h) + 7cqh); }
.cv-burst-lower-left .cv-burst { right: auto; left: var(--edge); transform: rotate(10deg); }
.cv-burst-upper-left .cv-burst { right: auto; left: var(--edge); bottom: auto; top: calc(var(--mast-top) + var(--mast-h) + 7cqh); transform: rotate(10deg); }
/* the foot: the counts line, then the sell line and lustlit.com */
.cv-foot { position: absolute; left: var(--edge); right: var(--edge); bottom: max(2.2cqh, var(--safe)); z-index: 7; display: grid; gap: 1cqh;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .6)); }
.cv-counts { font: 800 max(8px, 1.5cqw)/1 var(--font); letter-spacing: .26em; text-transform: uppercase; color: #fff; }
.cv-sell { display: flex; justify-content: space-between; align-items: baseline; gap: 3cqw; padding-top: 1cqh; border-top: 1px solid rgba(255, 255, 255, .18);
  font: 700 max(7.5px, 1.35cqw)/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.cv-url { color: #fff; white-space: nowrap; }
.cv-layout-right .cv-counts { text-align: right; }
/* the desk's overlay (DESK only): one compact row at the bottom, clear of her face */
.cv-desk { position: absolute; right: 8px; bottom: 8cqh; z-index: 8; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: calc(100% - 16px); }
.cv-desk-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
[data-proof="on"] .cv-desk .desk { position: static; flex-direction: row; }
.cv-desk .dk-what, .cv-desk .dk-b span, .cv-desk .dk-lock span { display: none; }
.cv-desk .dk-b { min-height: 34px; min-width: 34px; padding: 0 7px; }
.cv-desk .picker { position: static; }
.cv-proof { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cv-proof:empty { display: none; }
/* a phone: the folio, the masthead, the edition, the lead line, the burst and the sell line (COVER-TEMPLATE rule 8) */
@container (max-width: 459px) {
  .cv-skyline, .cv-banner, .cv-side, .cv-counts { display: none; }
  .cover { --edge: max(5.8cqw, var(--safe)); --mast-top: max(3.3cqh, var(--safe)); }   /* no skyline above it on a phone */
  .cv-folio { grid-template-columns: 1fr auto; grid-template-rows: auto auto; row-gap: .9cqh; }
  .cv-date { font-size: max(8px, 2.3cqw); }
  .cv-price { font-size: max(8px, 2.3cqw); }
  .cv-edition { grid-column: 1 / -1; grid-row: 2; justify-self: center; font-size: max(12px, 4.4cqw); }
  .cv-leadbox { width: 64cqw; bottom: 10.4cqh; }
  .cv-lead .cv-title { font-size: 10.6cqw; }
  .cv-lead .cv-dek { font-size: max(11.5px, 3.3cqw); }
  .cv-lead .cv-name { font-size: max(9px, 2.5cqw); }
  .cv-burst { width: 23cqw; bottom: 17cqh; }
  .cv-burst > b { font-size: max(26px, 10.4cqw); }
  .cv-burst > span { font-size: max(7.5px, 2cqw); max-width: 17cqw; }
  .cv-sell { flex-direction: column; gap: .8cqh; align-items: flex-start; }
  .cv-sell .cv-deal { font-size: max(7.5px, 2cqw); }
  .cv-desk { bottom: auto; top: 47cqh; }          /* DESK: under her face, clear of the lead line */
}

/* shared pagecard furniture */
.btn-join, .btn-ghost, .btn-unfold {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: 6px; font: 700 13px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: #fff; background: transparent; border: 1px solid #ef4444; cursor: pointer; transition: background .2s, border-color .2s;
}
.btn-join:hover, .btn-unfold:hover { background: rgba(239, 68, 68, .12); }
.btn-ghost { border-color: rgba(255, 255, 255, .3); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, .6); }

/* ads (the inside front cover and the fillers) */
.ad { display: grid; place-items: center; text-align: center; background: radial-gradient(ellipse 80% 55% at 50% 38%, rgba(206, 14, 48, .22), transparent 70%), var(--grain), var(--paper); }
.ad-in { width: 84cqw; display: grid; gap: 2.4cqh; justify-items: center; }
.ad-in > div { display: grid; gap: 2.4cqh; justify-items: center; }
.ad-head { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: calc(11cqw * var(--fit)); line-height: .98; color: #fff; }
.ad-copy { font-size: calc(max(15px, 3.6cqw) * var(--fit)); color: var(--ink-2); max-width: 30ch; line-height: 1.45; }
/* SPEC R6: "$9" is the big display number and "a month" sits small under it. Their own classes: no rule for one can
   catch the other (v1's `.ad-price span` shrank the $9 itself). */
.ad-price { display: grid; justify-items: center; gap: .6cqh; margin: 0; }
.ap-amount { font-family: var(--display); font-weight: 800; font-size: calc(26cqw * var(--fit)); line-height: 1; letter-spacing: -.05em; color: #fff; }
.ap-amount .num { font-variant-numeric: lining-nums proportional-nums; }
.ap-per { font: 700 calc(max(10px, 2.6cqw) * var(--fit))/1 var(--font); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); }
.ad-small { font-size: calc(max(12px, 2.7cqw) * var(--fit)); color: var(--ink-3); max-width: 34ch; }
.ad-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* the filler: the wordmark alone (build.py render_filler) */
.fl-wm { display: block; width: 58cqw; height: auto; color: #fff; fill: currentColor; }
.fl-url { font: 700 max(9px, 1.8cqw)/1 var(--font); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); }

/* the letter */
.letter { padding: calc(var(--ph) * .07) calc(var(--pw) * .08) calc(var(--ph) * .05); display: flex; flex-direction: column; gap: calc(var(--ph) * .02); }
.lt-head { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: calc(15cqw * var(--fit)); line-height: .92; color: #fff; }
.lt-head::after { content: ''; display: block; width: 18cqw; height: 2px; margin-top: 2.2cqh; background: var(--neon-line); filter: var(--glow-sm); }
.lt-body { display: grid; gap: 1.5cqh; font-size: calc(max(14.5px, 3.75cqw) * var(--fit)); line-height: 1.55; color: var(--ink-2); max-width: 40em; }
.lt-body b { color: #fff; font-weight: 700; }
.lt-first { color: #fff; font-size: 1.08em; }
.lt-sign { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: calc(6.4cqw * var(--fit)); color: #fff; margin-top: auto; }
.lt-sign::before { content: '\2014\00a0'; color: var(--red); }
.letter .proof { position: static; align-self: flex-start; }

/* contents */
.contents { padding: calc(var(--ph) * .06) calc(var(--pw) * .07) calc(var(--ph) * .045); display: flex; flex-direction: column; gap: calc(var(--ph) * .016); }
.ct-head { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: calc(9.4cqw * var(--fit)); line-height: .95; color: #fff; }
.ct-list { list-style: none; display: grid; gap: 1.3cqh; margin-top: 1cqh; }
.ct-item > a, .ct-item.ct-soon {
  display: grid; grid-template-columns: 11cqw 1fr auto; column-gap: 3cqw; align-items: baseline; text-decoration: none;
  padding-bottom: 1.2cqh; border-bottom: 1px solid var(--hair);
}
.ct-no { grid-row: span 3; font-family: var(--display); font-weight: var(--display-weight); font-size: calc(7.6cqw * var(--fit)); line-height: .9; letter-spacing: var(--display-track); position: relative; }
.ct-no::after { content: ''; position: absolute; left: 0; bottom: -.7cqh; width: 5cqw; height: 2px; background: var(--her); }
.ct-name { grid-column: 2; font: 800 calc(max(11px, 2.7cqw) * var(--fit))/1.2 var(--font); letter-spacing: .15em; text-transform: uppercase; color: #fff; }
.ct-title { grid-column: 2; font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: calc(max(16px, 4.6cqw) * var(--fit)); line-height: 1.08; color: var(--ink); }
.ct-tease { grid-column: 2; font-size: calc(max(12.5px, 3.05cqw) * var(--fit)); line-height: 1.4; color: var(--ink-3); font-style: italic; }
.ct-pg { grid-column: 3; grid-row: 1; font: 800 calc(max(12px, 3cqw) * var(--fit))/1 var(--font); color: #fff; }
.ct-pg .num { font-variant-numeric: lining-nums tabular-nums; }
.ct-soon .ct-title { font-family: var(--font); font-weight: 600; font-size: calc(max(12px, 3cqw) * var(--fit)); letter-spacing: .02em; color: var(--ink-2); }
.ct-soon .ct-tease { color: var(--issue-accent); font-style: normal; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: calc(max(10px, 2.4cqw) * var(--fit)); }
.ct-soon { opacity: .9; }
.ct-foot { display: flex; flex-wrap: wrap; gap: .5cqh 4cqw; justify-content: space-between; font: 700 calc(max(10px, 2.3cqw) * var(--fit))/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: auto; }
.ct-foot a { text-decoration: none; color: var(--ink-2); }
.ct-foot .ct-pg { margin-left: .5em; }
.contents .proof { position: static; align-self: flex-start; }
.ct-item > a:hover .ct-title { color: #fff; }

/* the catalogue page (Peterman) */
.catalogue { padding: calc(var(--ph) * .05) calc(var(--pw) * .07) calc(var(--ph) * .04); }
.cat-in { height: 100%; display: flex; flex-direction: column; gap: 1.6cqh; }
.cat-plate { position: relative; flex: 1 1 0; min-height: 22cqh; display: flex; justify-content: center; margin: 0; }
.cat-img { height: 100%; width: auto; max-width: 100%; object-fit: contain; outline: 1px solid rgba(255, 255, 255, .14); outline-offset: 4px; }
.cat-plate figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.cat-plate figcaption .proof { position: static; }
.cat-text { display: grid; gap: 1cqh; }
.cat-name { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: calc(8.6cqw * var(--fit)); line-height: .95; color: #fff; }
.cat-name::after { content: ''; display: block; width: 12cqw; height: 2px; background: var(--her); margin-top: 1.1cqh; }
.cat-title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: calc(max(15px, 4.2cqw) * var(--fit)); color: var(--ink-2); }
[data-font="jakarta"] .cat-title { font-weight: 400; }
.cat-copy { font-size: calc(max(13.5px, 3.35cqw) * var(--fit)); line-height: 1.52; color: var(--ink); hyphens: auto; -webkit-hyphens: auto; }
.offer { display: block; margin-top: 1.1cqh; padding-top: 1cqh; border-top: 1px solid rgba(239, 68, 68, .35); color: #fff; font-weight: 600; }
.cat-spec { font: 700 calc(max(9.5px, 2.2cqw) * var(--fit))/1.2 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.catalogue .cat-text .proof { position: static; justify-self: start; }
.cat-type .cat-in { justify-content: center; gap: 2.6cqh; }
.cat-type .cat-name { font-size: calc(13cqw * var(--fit)); }
.cat-type .cat-copy { font-size: calc(max(15px, 4.2cqw) * var(--fit)); }
@container (min-aspect-ratio: 5 / 8) {
  .cat-in { display: grid; grid-template-columns: 44% 1fr; grid-template-rows: auto 1fr; column-gap: 5cqw; row-gap: 2.4cqh; }
  .cat-in > .eyebrow { grid-column: 1 / -1; }
  .cat-plate { grid-row: 2; min-height: 0; align-items: flex-start; }
  .cat-img { width: 100%; height: auto; max-height: 100%; }
  .cat-text { grid-row: 2; align-content: start; gap: 1.2cqh; }
  .cat-name { font-size: calc(7cqw * var(--fit)); }
  .cat-copy { font-size: calc(max(13px, 2.55cqw) * var(--fit)); }
  .cat-title { font-size: calc(3.4cqw * var(--fit)); }
  .cat-type .cat-in { grid-template-columns: 1fr; }
  .cat-type .cat-text { grid-column: 1 / -1; max-width: 70cqw; }
  .cat-type .cat-name { font-size: calc(10cqw * var(--fit)); }
  .cat-type .cat-copy { font-size: calc(max(14px, 3cqw) * var(--fit)); }
}

/* the opener (Playboy): full-bleed picture, the title set huge */
.opener { display: flex; flex-direction: column; }
.op-plate { position: relative; flex: 0 0 54%; display: flex; align-items: flex-end; justify-content: center; padding: 5.5cqh 6cqw 2.4cqh; }
.op-plate .plate { position: relative; flex: none; aspect-ratio: var(--ar); width: min(88cqw, calc(46cqh * var(--ar)));
  outline: 1px solid rgba(255, 255, 255, .16); outline-offset: 5px; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .5)); }
.op-type { position: relative; flex: 1; padding: 0 6.5cqw 4.5cqh; display: flex; flex-direction: column; gap: 1.1cqh; z-index: 2; }
.op-type .eyebrow { margin-top: 2cqh; }
/* her opener's picture is picture 1 of her story: its number sits under it, as a caption's does */
.op-type .op-no { margin-top: 1.2cqh; }
.pg-op-r .op-type .op-no { margin-top: 0; }
.opener .op-type .eyebrow { order: 9; margin-top: auto; padding-top: 1.2cqh; font-size: max(9px, 1.9cqw); color: var(--ink-3); }
.op-title {
  font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); color: #fff;
  font-size: calc(12cqw * var(--fit)); line-height: .9; margin-top: 1.4cqh; text-wrap: balance; hyphens: manual;
}
.op-by { display: flex; align-items: center; gap: 2.4cqw; font: 800 calc(max(11px, 2.9cqw) * var(--fit))/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.op-rule { width: 9cqw; height: 2px; background: var(--her); }
.op-dek { font-size: calc(max(13px, 3.3cqw) * var(--fit)); line-height: 1.5; color: var(--ink-2); font-style: italic; hyphens: auto; -webkit-hyphens: auto; }
.op-type-only { justify-content: center; background: radial-gradient(ellipse 90% 60% at 50% 20%, rgba(var(--her-rgb), .26), transparent 70%), var(--grain), var(--paper); }
.op-type-only .op-type { flex: 0 1 auto; justify-content: center; padding: 8cqh 8cqw; gap: 2.2cqh; }
.op-type-only .op-type .eyebrow { display: block; margin-top: 0; }
.op-type-only .op-title { margin-top: 0; font-size: calc(16cqw * var(--fit)); }
/* in a spread the opener is TWO pages: the picture alone on the left (whole, framed), the type alone on the right */
.pg-op-l .op-plate, .pg-op-r .op-type { position: absolute; inset: 0; }
.pg-op-l .op-plate { align-items: center; padding: 6cqh 7cqw; }
.pg-op-l .op-plate .plate { width: min(86cqw, calc(86cqh * var(--ar))); }
.pg-op-r .op-type { justify-content: center; padding: 8cqh 8cqw; gap: 2.2cqh; }
.pg-op-r .op-title { margin-top: 0; font-size: calc(16cqw * var(--fit)); }
.pg-op-r .op-dek { font-size: calc(max(13px, 2.9cqw) * var(--fit)); }
.pg-op-r .op-type .eyebrow { display: block; margin-top: 0; }
.op-hold { --fit: 1; position: absolute; inset: 0; container-type: size; background: var(--grain), var(--paper); }

/* Her Data Sheet */
.datasheet { padding: calc(var(--ph) * .05) calc(var(--pw) * .07) calc(var(--ph) * .04); display: flex; flex-direction: column; gap: calc(var(--ph) * .014); }
.ds-name { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: calc(9cqw * var(--fit)); line-height: .95; color: #fff; }
.ds-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2cqh; }
.ds-print { position: relative; flex: 0 1 38%; min-height: 0; align-self: center; transform: rotate(-2.2deg); display: flex; margin: 0; }
.ds-img { height: 100%; width: auto; object-fit: contain; background: #f2ede4; padding: 2.4cqw 2.4cqw 7cqw; }
.ds-clip { position: absolute; top: -3.2cqh; right: 16%; width: 4cqw; min-width: 12px; height: auto; color: #b9b3ab; transform: rotate(6deg); }
.ds-print .pf-tags { transform: rotate(2.2deg); top: auto; bottom: 8px; }      /* the tools take the top corner */
.ds-fields { display: grid; align-content: start; }
.ds-row { display: grid; grid-template-columns: 24cqw 1fr; gap: 3cqw; padding: .9cqh 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.ds-row dt { font: 800 calc(max(9.5px, 2.25cqw) * var(--fit))/1.3 var(--font); letter-spacing: .18em; text-transform: uppercase; color: color-mix(in oklab, var(--her) 68%, #fff); }
.ds-row dd { font-size: calc(max(12.5px, 3.1cqw) * var(--fit)); line-height: 1.38; color: var(--ink); }
.ds-foot { font-size: calc(max(11px, 2.6cqw) * var(--fit)); font-style: italic; color: var(--ink-3); }
.ds-next { display: flex; gap: 2cqw; align-items: baseline; font-size: calc(max(12px, 2.9cqw) * var(--fit)); }
.ds-next a { color: #fff; text-decoration: none; font-weight: 700; }
.ds-next a:hover { color: var(--red); }
.datasheet > .proof { position: static; align-self: flex-start; }
@container (min-aspect-ratio: 5 / 8) {
  .ds-body { flex-direction: row; gap: 5cqw; }
  /* the print hugs its picture (2026-09-27): a fixed 72% frame stretched the image box into a tall strip (0.47-0.53
     on the iPad) and left paper bands above and below every portrait. Now any shape prints without bands. */
  .ds-print { flex: 0 0 40%; align-self: flex-start; height: auto; max-height: 76%; margin-top: 2cqh; }
  .ds-img { width: 100%; height: auto; align-self: flex-start; }
  .ds-fields { flex: 1; }
  .ds-row { grid-template-columns: 17cqw 1fr; }
  .ds-row dt { font-size: calc(max(9px, 1.8cqw) * var(--fit)); }
  .ds-row dd { font-size: calc(max(12px, 2.45cqw) * var(--fit)); }
}

/* CONTINUED AT LUSTLIT.COM, after her data sheet (build.py render_more; Hayden, 2026-09-30: "an upsell for the rest of
   the site ... get creative"). A magazine's jump line whose page is her page on the site. Two halves: .mo-a (her line,
   "Continued at lustlit.com/<her>", her stories there) and .mo-b (she is in every issue, the next one, a QR code to
   her page). One page, or split across a spread (.mo-split, reader.js). Her colour only on her marks: the rule under
   the address, the arrow, the outline of her initial. The initial runs off the page (it may bleed: data-bleed). */
.more {
  position: relative; display: flex; flex-direction: column; gap: 3cqh; overflow: hidden;
  padding: calc(var(--ph) * .07) calc(var(--pw) * .08) calc(var(--ph) * .055);
  background: radial-gradient(ellipse 85% 55% at 18% 30%, rgba(var(--her-rgb), .2), transparent 70%), var(--grain), var(--paper);
}
.mo-monobox { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }   /* its own clip: the */
.mo-mono {                                                    /* card's fit (fitCard) never counts what runs off the page */
  position: absolute; right: -9cqw; top: -12cqh; user-select: none;
  font: 800 78cqh/.8 var(--font); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(var(--her-rgb), .26);
}
.mo-a, .mo-b { position: relative; z-index: 1; }
.mo-a { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 2.2cqh; }
.mo-kick { display: flex; align-items: center; flex-wrap: wrap; font-size: calc(max(9.5px, 2cqw) * var(--fit)); color: color-mix(in oklab, var(--her) 68%, #fff); }
.mo-name { color: #fff; }
.mo-head {
  font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); color: #fff;
  font-size: calc(8.6cqw * var(--fit)); line-height: .96; text-wrap: balance; hyphens: manual; max-width: 17ch;
}
.mo-jump { display: grid; justify-items: start; gap: 1cqh; margin-top: 1.6cqh; text-decoration: none; color: #fff; }
.mo-jk { font: 700 calc(max(9.5px, 2cqw) * var(--fit))/1 var(--font); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); }
.mo-url {
  display: inline-flex; align-items: center; padding-bottom: .14em; border-bottom: 3px solid var(--her);
  font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: calc(6.2cqw * var(--fit)); line-height: 1; white-space: nowrap;
}
.mo-host { color: var(--ink-2); }
.mo-arrow { width: .78em; height: .78em; margin-left: .16em; flex: none; fill: none; stroke: var(--her); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.mo-jump:hover .mo-arrow { transform: translateX(.1em); }
.mo-jump:hover .mo-slug { color: #fff; text-decoration: none; }
.mo-sub { font-style: italic; font-size: calc(max(13px, 3cqw) * var(--fit)); line-height: 1.45; color: var(--ink-2); max-width: 34ch; }
.mo-stories { display: grid; gap: 1cqh; margin-top: .6cqh; }
.mo-list { list-style: none; display: grid; gap: .9cqh; }
.mo-list a { font-family: var(--display); font-weight: 700; font-size: calc(max(14px, 3.4cqw) * var(--fit)); line-height: 1.15; color: #fff; text-decoration: none; }
.mo-list a:hover { text-decoration: underline; text-decoration-color: #ef4444; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.mo-b { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 5cqw; padding-top: 2.6cqh; border-top: 1px solid var(--hair); }
.mo-issue { display: grid; gap: 1.1cqh; min-width: 0; }
.mo-every { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: calc(5cqw * var(--fit)); line-height: 1.02; color: #fff; }
.mo-next { font: 700 calc(max(9px, 1.9cqw) * var(--fit))/1.45 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--issue-accent); }
.mo-nw { white-space: nowrap; }
.mo-deal { font-size: calc(max(12px, 2.7cqw) * var(--fit)); line-height: 1.4; color: var(--ink); }
.mo-qr { flex: none; display: grid; justify-items: center; gap: .9cqh; text-decoration: none; }
.qr-label { display: block; width: calc(max(84px, 21cqw) * var(--fit)); background: #fff; border-radius: 2px; }
.qr { display: block; width: 100%; height: auto; }
.mo-qrcap { font: 700 calc(max(8px, 1.55cqw) * var(--fit))/1.2 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); text-align: center; }
/* a spread: the jump alone on the left page, every issue and the code alone on the right */
.mo-split { justify-content: center; }
.mo-split .mo-head { font-size: calc(10cqw * var(--fit)); }
.mo-split .mo-b { flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5cqh; padding-top: 0; border-top: 0; }
.mo-split .mo-every { font-size: calc(9cqw * var(--fit)); }
.mo-split .mo-qr { justify-items: start; }
.mo-split .qr-label { width: calc(max(96px, 32cqw) * var(--fit)); }
.mo-split .mo-qrcap { text-align: left; }

/* arriving, next issue */
.arriving, .nextissue { padding: calc(var(--ph) * .09) calc(var(--pw) * .08); display: flex; flex-direction: column; gap: calc(var(--ph) * .026); justify-content: center; }
.ar-head, .nx-head { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: calc(10cqw * var(--fit)); line-height: .96; color: #fff; }
.ar-line { font: italic 400 calc(max(15px, 4cqw) * var(--fit))/1.4 var(--font); color: #fff; }
.ar-list { list-style: none; display: grid; gap: 2.2cqh; }
.ar-list li { display: grid; gap: .4cqh; padding-left: 4cqw; border-left: 2px solid var(--her); }
.ar-name { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: calc(6.4cqw * var(--fit)); color: #fff; line-height: 1.05; }
.ar-where { font: 700 calc(max(10px, 2.5cqw) * var(--fit))/1.2 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.ar-note, .nx-copy { font-size: calc(max(13px, 3.4cqw) * var(--fit)); color: var(--ink-2); line-height: 1.5; max-width: 36ch; }
.nx-date { font: 800 calc(max(12px, 3.6cqw) * var(--fit))/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--issue-accent); }

/* ============================================================ THE BACK COVER (SPEC R4): the most designed page */
.back { color: #fff; background: radial-gradient(ellipse 95% 55% at 50% 38%, rgba(206, 14, 48, .13), transparent 72%), var(--grain), #070607; }
.bk-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 4cqw; position: relative; z-index: 3; }
.bk-brand { display: grid; gap: 1cqh; justify-items: start; }
.bk-wm { display: block; width: 27cqw; min-width: 88px; height: auto; color: #fff; fill: currentColor; }
.bk-brand span { font: 700 max(8px, 1.5cqw)/1 var(--font); letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.bk-next { font: 700 max(9px, 1.75cqw)/1.35 var(--font); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .86); }
/* the newsstand barcode: a real Code 128 (build.py decodes it back); black bars on a white label, the human-readable
   line in white under it, the issue on its edge */
.bc { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 1.1cqw; row-gap: .7cqh; align-items: end; }
.bc-label { grid-column: 1; grid-row: 1; background: #fff; padding: 1.1cqw 1.4cqw .9cqw; width: max(25cqw, 150px); border-radius: 1px; }
.bc-bars { display: block; width: 100%; height: max(26px, 6.2cqw); }
.bc-text { grid-column: 1; grid-row: 2; font: 700 max(8px, 1.45cqw)/1 var(--font); letter-spacing: .16em; color: #fff; }
.bc-side { grid-column: 2; grid-row: 1 / span 2; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 max(7px, 1.25cqw)/1 var(--font); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
/* without back-cover art: the women's portraits as a dark contact sheet */
.back-sheet { display: flex; flex-direction: column; padding: 5.6cqh 6cqw 4.2cqh; gap: 2.2cqh; }
.bk-top .eyebrow { font-size: max(9px, 1.7cqw); }
.bk-head { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; font-size: 10.6cqw; line-height: .9; margin-top: 1.2cqh; color: #fff; }
.cs { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 2.6cqh; }
.cs-strip {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5cqw; padding: 3cqw 2cqw 2.4cqw;
  background: #0e0c0d; border-radius: 2px; transform: rotate(-.7deg); filter: drop-shadow(0 1.2cqw 1.8cqw rgba(0, 0, 0, .6));
}
.cs-strip.cs-b { transform: rotate(.55deg); margin-left: 2.4cqw; margin-right: -1cqw; }
.cs-strip::before, .cs-strip::after {
  content: ''; position: absolute; left: 1.2cqw; right: 1.2cqw; height: 1.05cqw; border-radius: 1px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 1.5cqw, transparent 1.5cqw 3.1cqw);
}
.cs-strip::before { top: .8cqw; } .cs-strip::after { bottom: .7cqw; }
.cs-frame { position: relative; margin: 0; display: grid; gap: .9cqw; }
.cs-pic { position: relative; aspect-ratio: 1245 / 1600; background: #181516; }
.cs-img { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 50%; display: block; filter: saturate(.94) contrast(1.03); }
.cs-blank { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, #1d191b, #0f0d0e); }
.cs-blank i { width: 38%; height: 2px; }
.cs-frame figcaption { display: flex; align-items: baseline; gap: .9cqw; min-width: 0; font: 700 max(6.5px, 1.3cqw)/1.1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; }
.cs-no { color: #fff; }
.cs-name { overflow: hidden; text-overflow: ellipsis; }
.cs-name::before { content: ''; display: inline-block; width: 1.6cqw; height: 2px; margin: 0 .6cqw 0 0; vertical-align: middle; background: var(--her); }
.cs-loop { position: absolute; left: -14%; top: -10%; width: 128%; height: 120%; fill: none; stroke: #ef4444; stroke-width: 2.4; stroke-linecap: round; opacity: .95; vector-effect: non-scaling-stroke; pointer-events: none; filter: drop-shadow(0 0 2px rgba(239, 68, 68, .55)); }
.cs-next .cs-pic { display: grid; place-items: center; background: #0a090a; outline: 1px dashed rgba(255, 255, 255, .24); outline-offset: -1px; }
.cs-nx { display: grid; gap: .8cqw; justify-items: center; text-align: center; padding: 1cqw; }
.cs-nx b { font: 800 max(14px, 4.2cqw)/1 var(--font); letter-spacing: -.03em; color: #fff; }
.cs-nx > span { font: 800 max(7.5px, 1.5cqw)/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.cs-nx > em { font: 700 max(6.5px, 1.2cqw)/1.2 var(--font); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.back-sheet .bk-next { margin-top: .4cqh; }
/* the grid (2026-09-30): each woman in her costume, four across, the next issue in the eighth cell; every picture whole */
.bk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2cqh 2cqw; }
.bk-grid .cs-pic { outline: 1px solid rgba(255, 255, 255, .16); outline-offset: 3px; }
.bk-grid .cs-frame figcaption { margin-top: .4cqh; }
.bk-about { margin-top: 1.6cqh; max-width: 46ch; font-size: max(11px, 2.4cqw); line-height: 1.45; color: rgba(255, 255, 255, .8); }
/* with back-cover art: full bleed, one line, the next issue */
.back-art .bk-art { position: absolute; inset: 0; }
.bk-img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus-x, 50%) 0; }
.bk-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 3, 4, .94) 0%, rgba(4, 3, 4, .72) 22%, rgba(4, 3, 4, .2) 45%, rgba(4, 3, 4, 0) 60%); pointer-events: none; }
.bk-copy { position: absolute; left: 6cqw; right: 6cqw; bottom: 16cqh; z-index: 2; display: grid; gap: 1.5cqh; }
.bk-line { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; font-size: 12cqw; line-height: .9; color: #fff; }
.bk-free { font: italic 400 max(11px, 2.3cqw)/1.35 var(--font); color: rgba(255, 255, 255, .86); }
.back-art .bk-foot { position: absolute; left: 6cqw; right: 6cqw; bottom: 4cqh; }
.bk-proof { position: absolute; left: 10px; top: 10px; z-index: 8; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

/* ============================================================ pictures
   Every picture that carries the LUSTLIT mark is shown WHOLE, on every device and in every layout (Hayden's rule: the
   mark always visible, in the same place, bottom right). The picture's box takes the image's own aspect ratio (--ar,
   from the build), so nothing is cropped and nothing is letterboxed: it sits framed on the dark page, a plate in a
   magazine, and its caption hangs BELOW it, never over its corner. Only the cover may crop. */
.plate { position: relative; margin: 0; background: #070506; --her-c: var(--her); --ar: .778; }
.plate-art { position: absolute; inset: 0; overflow: hidden; background: #0b0909; }
.plate-art img, .plate-art video { width: 100%; height: 100%; object-fit: contain; display: block; max-width: none; }
.plate-cap { position: absolute; left: 0; right: 0; top: 100%; z-index: 3; padding: 14px 2px 0; display: grid; gap: 6px; pointer-events: none; }
.plate-no { font: 700 9.5px/1 var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.plate-line { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: var(--cap-fs, 19px); line-height: 1.15; color: #fff; text-wrap: balance; }
/* a phone held sideways: the page is taller than the screen and scrolls, so a picture is sized to the first screen
   (the reader opens every spread at its top) and its mark is in view without scrolling */
.is-tall .pg-plate .pg-in { align-items: flex-start; padding-top: calc(max(10px, var(--safe)) + 2px); }
.is-tall .pg-plate .plate { width: min(100%, calc((var(--vis-h, 300px) - 14px - max(10px, var(--safe))) * var(--ar))); }
.is-tall .pg-op-l .op-plate { align-items: flex-start; padding-top: calc(max(10px, var(--safe)) + 2px); }
.is-tall .pg-op-l .op-plate .plate { width: min(86cqw, calc((var(--vis-h, 300px) - 14px - max(10px, var(--safe))) * var(--ar))); }
/* a picture's own page: the plate centred on the dark page, a thin frame, the caption under it. --foot is the room
   kept under the picture for its caption, down to the safe line: 104px or 15% of the page, grown by reader.js
   (fitPlates) for a caption that needs more, so a caption is never cut off at the page's foot */
.pg-plate { --foot: max(104px, calc(var(--ph) * .15)); --plate-top: max(var(--safe), calc(var(--ph) * .05)); }
.pg-plate .pg-in {
  display: flex; align-items: center; justify-content: center;
  padding: var(--plate-top) max(var(--safe), calc(var(--pw) * .065)) var(--foot);
  background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(var(--her-rgb), .07), transparent 70%), var(--grain), #0b0a0b;
}
.pg-plate .plate {
  flex: none; aspect-ratio: var(--ar);
  width: min(100%, calc((var(--ph) - var(--plate-top) - var(--foot)) * var(--ar)));
  outline: 1px solid rgba(255, 255, 255, .16); outline-offset: 6px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55));
}
.plate .pf-cap { display: none; }
.pf-tags { position: absolute; left: 8px; top: 8px; z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: calc(52% - 8px); pointer-events: none; }
.pf-tags .proof { position: static; }
[data-proof="on"] .plate-cap .pf-cap { display: inline-block; justify-self: start; }
.plate-frost { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; pointer-events: none; }   /* no rubbing (2026-09-30) */
.plate-gate {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; text-align: center; pointer-events: none;
}
.pg-kicker { font: 700 10px/1.3 var(--font); letter-spacing: .24em; text-transform: uppercase; color: #fff; }
.pg-offer { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: 24px; line-height: 1.06; color: #fff; max-width: 13ch; }
.plate-gate > * { filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .55)); }
.plate-gate .btn-join { pointer-events: auto; background: rgba(10, 10, 10, .72); }        /* the join, always over the picture */

/* ============================================================ the centrefold, closed */
.gatefold { position: relative; margin: 0; }
.gf-cover {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px;
  padding: 11% 11% 13% 14%; overflow: hidden;
  background: radial-gradient(ellipse 90% 60% at 70% 30%, rgba(var(--her-rgb), .34), transparent 70%), var(--grain), #0c0a0b;
}
.gf-cover::before { content: ''; position: absolute; inset: 0; background: var(--gf-wash, none) 50% 50% / contain no-repeat; opacity: .32; pointer-events: none; }
.gf-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, .5)); pointer-events: none; }
.gf-cover > * { position: relative; z-index: 1; }
.gf-cover > .staple { position: absolute; }
.gf-name { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: 44px; line-height: .95; color: #fff; }
.gf-sub { font: 700 11px/1.5 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); max-width: 30ch; }
.gf-actions { display: grid; gap: 12px; justify-items: start; margin-top: 8px; }
.gf-offer { font-size: 14px; color: var(--ink-2); max-width: 28ch; }
.btn-unfold .ico { width: 18px; height: 18px; }
.staple { position: absolute; left: 4px; width: 3px; height: 30px; border-radius: 1.5px; background: linear-gradient(to right, #5e5b59, #e4e0da 40%, #9b9793 70%, #5e5b59); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); z-index: 2; }
.staple-a { top: 31%; } .staple-b { top: 64%; }
.gatefold > .pf-tags { left: 14%; max-width: 70%; }
.pg-gf .gatefold, .pg-gf-r .gatefold { position: absolute; inset: 0; }
.pg-gf-l .plate { position: absolute; inset: 0; background: #070506; }
.gf-panel1 .plate-art { display: flex; align-items: center; }
.gf-panel1 .plate-art img { flex: none; width: 300%; height: auto; object-fit: fill; max-width: none; }

/* ============================================================ the centrefold, OPEN (SPEC R9)
   The fold swings out (desktop) or opens at once (phone); then the still itself, at full resolution: pinch, double-tap,
   wheel and trackpad pinch to zoom, drag to pan; the master arrives only past 1.5x; a drawn Play runs the moving
   loop over the still and stops back to it. The Free view keeps its blurred twin under the frost. */
.gfv { position: fixed; inset: 0; z-index: 70; background: rgba(4, 3, 4, .97); }
.gfv[hidden] { display: none; }
.gfv-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gfv-track {
  --gf-ar: 2.3333; position: relative; flex: none; aspect-ratio: var(--gf-ar);
  width: min(calc(100vw - 48px), calc((100svh - 150px) * var(--gf-ar)));
  perspective: 2600px; transform: translateX(calc(var(--gfv-shift, 0) * 1%)); transition: transform 1s cubic-bezier(.3, .7, .2, 1);
}
.gfv.ready .gfv-track { visibility: hidden; }
.gfv-panel { position: absolute; top: 0; bottom: 0; width: calc(100% / 3); overflow: hidden; background-size: 300% 100%; background-repeat: no-repeat; }
.gfv-p1 { left: 0; background-position: 0 50%; }
.gfv-p2 { left: calc(100% / 3); background-position: 50% 50%; }
.gfv-flap { position: absolute; top: 0; bottom: 0; left: calc(200% / 3); width: calc(100% / 3); transform-style: preserve-3d; transform-origin: 0 50%; transform: rotateY(-180deg); transition: transform 1.1s cubic-bezier(.3, .7, .2, 1); }
.gfv.open .gfv-flap { transform: rotateY(0deg); }
.gfv-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.gfv-front { background-size: 300% 100%; background-position: 100% 50%; }
.gfv-back { transform: rotateY(180deg); }
.gfv-back .gf-cover { padding: 12% 10% 12% 12%; }
.gfv-back .gf-name { font-size: clamp(22px, 3.2vw, 44px); }
.gfv-seam { position: absolute; top: 0; bottom: 0; width: 14px; margin-left: -7px; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .5s .9s;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .28) 45%, rgba(255, 255, 255, .06) 55%, transparent); }
.gfv-seam-1 { left: calc(100% / 3); } .gfv-seam-2 { left: calc(200% / 3); }
.gfv.open .gfv-seam { opacity: 1; }
.gfv-track > .plate-frost { z-index: 4; }
.gfv-track > .plate-gate { z-index: 5; }
.gfv .staple { left: calc(100% / 3 - 2px); z-index: 4; }
.gfv-zoom { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: zoom-in; z-index: 3; }
.gfv-zoom[hidden] { display: none; }
.gfv.zoomed .gfv-zoom { cursor: grab; }
.gfv-zoom.dragging { cursor: grabbing; }
/* no will-change: it would freeze the first raster and scale a bitmap, and the zoom must re-draw the still sharp */
.gfv-img, .gfv-video { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; }
.gfv-video { object-fit: cover; opacity: 0; transition: opacity .6s; pointer-events: none; background: transparent; }
.gfv.playing .gfv-video { opacity: 1; }
.gfv-bar {
  position: absolute; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(14, 12, 13, .84); border: 1px solid rgba(255, 255, 255, .14);
}
.gfv-bar[hidden] { display: none; }
.gfv-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px; color: #fff; font: 700 11.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.gfv-b[hidden] { display: none; }
.gfv-b:disabled { opacity: .32; cursor: default; }
.gfv-b:not(:disabled):hover { background: rgba(255, 255, 255, .08); }
.gfv-play { border: 1px solid #ef4444; padding: 0 16px 0 13px; }
.gfv-play .ico { fill: #fff; stroke: none; }
.gfv.playing .gfv-play { background: rgba(239, 68, 68, .16); }
.gfv-level { min-width: 46px; text-align: center; font: 700 12px/1 var(--font); letter-spacing: .04em; }
.gfv-close { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; z-index: 7; color: #fff; background: rgba(14, 12, 13, .7); border-radius: 50%; }
.gfv-rotate { display: none; position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); left: 60px; right: 60px; justify-content: center; align-items: center; gap: 10px; font: 700 11px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); pointer-events: none; z-index: 6; text-align: center; }
.gfv-rotate .ico { width: 26px; height: 26px; animation: turnphone 2.6s ease-in-out infinite; }
@keyframes turnphone { 0%, 30% { transform: rotate(0); } 55%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
.gfv.is-portrait .gfv-rotate { display: flex; }
/* phones: no fold animation; the image as wide as the screen */
.gfv.is-phone .gfv-track { transition: none; width: min(100vw, calc((100svh - 8px) * var(--gf-ar))); }
.gfv.is-phone .gfv-flap, .gfv.is-phone .gfv-seam { transition: none; }
@media (orientation: portrait) and (max-width: 699px) {
  .gfv.is-phone .gfv-track { width: calc(100vw - 16px); }
  /* upright and Free: the offer sits under the frosted strip, where there is room for it */
  .gfv.is-free.is-phone .gfv-track > .plate-gate { top: 100%; bottom: auto; height: auto; padding: 18px 12px 0; }
  .gfv.is-free.is-phone .gfv-track > .plate-gate > * { filter: none; }
}
.gfv.is-free .gfv-stage { overflow: visible; }

/* ============================================================ the Spice Bar (the scrubber) */
.spice-wrap {
  position: fixed; left: 0; right: 0; bottom: calc(var(--nav) + var(--safe-b)); height: var(--spice); z-index: 30;
  display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--black);
  border-top: 1px solid rgba(206, 14, 48, .22);
}
.spice { position: relative; flex: 1; height: 100%; cursor: pointer; touch-action: none; outline: none; }
.spice:focus-visible .spice-rail { outline: 2px solid var(--red); outline-offset: 5px; }
.spice-rail, .spice-heat { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.spice-rail { background: var(--rail); }
.spice-heat { filter: drop-shadow(0 0 2px rgba(239, 68, 68, .85)) drop-shadow(0 0 6px rgba(239, 68, 68, .4)); }
.spice-ticks i { position: absolute; top: 50%; width: 2px; height: 11px; margin: -13px 0 0 -1px; border-radius: 1px; background: var(--her); opacity: .95; }
.spice-node { position: absolute; top: 50%; left: 0; width: 0; height: 0; transition: left .22s cubic-bezier(.3, .7, .2, 1); }
.spice.scrubbing .spice-node { transition: none; }
.spice-core { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--ember, #6b1020); filter: drop-shadow(0 0 3px var(--ember, #6b1020)) drop-shadow(0 0 8px var(--ember, #6b1020)); }
.spice-aura { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ember, #6b1020); opacity: 0; animation: aura var(--rate, 6.5s) cubic-bezier(.2, .6, .3, .94) infinite; }
@keyframes aura { 0% { transform: scale(.35); opacity: .95; } 60% { opacity: .15; } 100% { transform: scale(1.3); opacity: 0; } }
.spice-tip {
  position: absolute; bottom: calc(100% + 4px); left: 0; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  background: #141214; border: 1px solid rgba(255, 255, 255, .12); border-radius: 6px; padding: 7px 10px;
  font: 600 11.5px/1.25 var(--font); color: var(--ink);
}
.spice-tip b { color: #fff; }
.pagecount { font: 700 10.5px/1 var(--font); letter-spacing: .08em; color: var(--ink-3); white-space: nowrap; min-width: 52px; text-align: right; }
.pc-sep { margin: 0 3px; }
.mode-scroll .pagecount { visibility: hidden; }
@media (min-width: 700px) {
  .spice-wrap { bottom: 0; padding: 0 22px var(--safe-b); height: calc(var(--spice) + var(--safe-b)); }
  .turn { display: grid; place-items: center; position: absolute; top: 50%; margin-top: -24px; width: 48px; height: 48px; border-radius: 50%; color: var(--ink-3); transition: color .2s; }
  .turn:hover { color: #fff; }
  .turn-prev { left: -64px; } .turn-next { right: -64px; }
  .turn[disabled] { opacity: .2; cursor: default; }
  .plate-line { font-size: var(--cap-fs, 21px); }
  .pg-offer { font-size: 30px; }
  .gf-name { font-size: 52px; }
}

/* ============================================================ departments: the cards (/wp-content/uploads/issues/october-2026/aee0296b5972a8d5ed3de12fe6f749dca4f92d0da01e7a1f34a7a306a013776d.json "departments")
   One designed page of drawn tarot cards. Whole on the big single page (the upright iPad Pro); on a spread the reader
   splits it into a left page (the head and the first cards) and a right page (the rest), each a 2 x 2 grid; on a
   phone, two pages of cards lying sideways (the face beside the words). Numerals are type, white; the marks and the
   face-down back are drawn (build.py CARD_MARKS, card_back_svg). */
/* the section is the size container: its own padding and gap are set in page units (cq units there would resolve
   against the viewport); everything inside it uses cq units of its content box */
.dept { padding: calc(var(--ph) * .056) calc(var(--pw) * .064) calc(var(--ph) * .05); display: flex; flex-direction: column;
  gap: calc(var(--ph) * .026); color: var(--ink); }
.oc-head { display: grid; gap: 1.2cqh; align-content: start; }
.oc-title { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track);
  font-size: max(26px, 6.4cqw); line-height: .95; color: #fff; text-wrap: balance; }
.oc-intro { font-style: italic; font-size: max(12px, 2cqw); line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.oc-head .proof { position: static; justify-self: start; }
.oc-body { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: stretch; gap: 2.2cqw; }
.oc-deck { display: contents; }
.oc-card {
  --pad: max(8px, 1.5cqw);
  flex: 0 0 calc((100% - 3 * 2.2cqw) / 4); min-width: 0; min-height: 0; display: flex; flex-direction: column; list-style: none;
  padding: var(--pad); border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px;
  outline: 1px solid rgba(255, 255, 255, .08); outline-offset: -5px;
  background: linear-gradient(180deg, #1a171b, #0f0d10); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
}
.oc-face { display: flex; flex-direction: column; align-items: center; gap: .8cqh; padding: .6cqh 0 1.1cqh;
  border-bottom: 1px solid rgba(255, 255, 255, .14); }
.oc-num { font: 800 max(10px, 1.6cqw)/1 var(--font); letter-spacing: .3em; margin-right: -.3em; color: #fff; }
.oc-mark { width: max(26px, 4.6cqw); height: auto; fill: none; stroke: var(--her); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.oc-cardname { font: 800 max(9px, 1.35cqw)/1.2 var(--font); letter-spacing: .22em; text-transform: uppercase; color: #fff; text-align: center; }
.oc-backart { width: max(30px, 5.2cqw); height: auto; }
.oc-bk-frame { fill: #0d0b0e; stroke: #ef4444; stroke-width: 1; }
.oc-bk-lattice { fill: none; stroke: rgba(239, 68, 68, .5); stroke-width: .6; }
.oc-bk-medal { fill: #0d0b0e; stroke: #ef4444; stroke-width: .9; }
.oc-bk-moon { fill: #ef4444; }
.oc-words { display: flex; flex-direction: column; gap: .8cqh; padding-top: 1.1cqh; flex: 1; min-height: 0; }
.oc-name { display: flex; align-items: center; gap: .6em; font: 800 max(9px, 1.3cqw)/1.2 var(--font); letter-spacing: .2em;
  text-transform: uppercase; color: #fff; }
.oc-name::before { content: ''; width: 1.8em; height: 2px; background: var(--her); flex: none; }
.oc-text { font-size: max(11px, 1.7cqw); line-height: 1.42; color: var(--ink-2); }
.oc-story { margin-top: auto; font: italic 700 max(11px, 1.7cqw)/1.25 var(--font); color: #fff; text-decoration: none; }
a.oc-story:hover { text-decoration: underline; text-decoration-color: #ef4444; text-decoration-thickness: 2px; text-underline-offset: .15em; }
/* a split page: a spread's left or right page, or one of two pages on a smaller single page */
.oc-split { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: calc(var(--pw) * .028); }
.oc-split .oc-body, .oc-split .oc-deck { display: contents; }
.oc-split .oc-card { flex: none; --pad: max(9px, 2.2cqw); }
.oc-split .oc-head { align-content: center; }
.oc-split .oc-title { font-size: max(24px, 7.4cqw); }
.oc-split .oc-intro { font-size: max(12px, 2.7cqw); }
.oc-split .oc-num { font-size: max(10px, 2.3cqw); }
.oc-split .oc-face { gap: 1.3cqh; padding: 1.6cqh 0 2cqh; }
.oc-split .oc-mark { width: max(34px, 9cqw); stroke-width: 1.15; }
.oc-split .oc-backart { width: max(38px, 10.5cqw); }
.oc-split .oc-cardname, .oc-split .oc-name { font-size: max(9px, 1.9cqw); }
.oc-split .oc-text, .oc-split .oc-story { font-size: max(11.5px, 2.6cqw); }
/* a phone (or a phone held sideways): the cards lie sideways, the face beside the words, one under another (reader.js
   adds .oc-narrow on a page under 460px wide; a container query cannot restyle the container itself) */
.oc-narrow { display: flex; flex-direction: column; gap: calc(var(--ph) * .016); }
.oc-narrow .oc-card { flex: 1 1 0; flex-direction: row; gap: 3cqw; padding: 1cqh 3cqw; }
.oc-narrow .oc-face { flex: 0 0 24%; border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .14); justify-content: center;
  padding: 0 3cqw 0 0; }
.oc-narrow .oc-words { padding-top: 0; justify-content: center; }
.oc-narrow .oc-story { margin-top: .4cqh; }
.oc-narrow .oc-head { align-content: start; }
.oc-narrow .oc-title { font-size: 9.6cqw; }
.oc-narrow .oc-intro { font-size: max(11.5px, 3.4cqw); }
.oc-narrow .oc-text, .oc-narrow .oc-story { font-size: max(11px, 3.2cqw); }
.oc-narrow .oc-name, .oc-narrow .oc-cardname { font-size: max(8.5px, 2.4cqw); }
.oc-narrow .oc-num { font-size: max(9px, 2.8cqw); }
.oc-narrow .oc-mark { width: max(22px, 7.6cqw); }
.oc-narrow .oc-backart { width: max(26px, 8.6cqw); }

/* ============================================================ THE PICTORIAL (a department, kind "pictorial")
   The centre feature. The opening: the kicker, the title over the neon seam, the dek, the counted offer, and a strip
   of the women and their costumes (each thumbnail whole). Then each woman's pictures, one to a page, whole like every
   picture: her header (her name in caps with her colour, her costume, her story's page) on her first; the tease faces
   the turn on a spread, and a card closes an odd count. A picture that moves carries a drawn Play (bottom left: the
   mark is bottom right). The page size vars (--pw, --ph) set the type where the page is not a container. */
.dept-pictorial { padding: calc(var(--ph) * .06) calc(var(--pw) * .075) calc(var(--ph) * .05); gap: calc(var(--ph) * .03);
  background: radial-gradient(ellipse 90% 60% at 20% 18%, rgba(239, 68, 68, .09), transparent 70%), var(--grain), #0b0a0b; }
.px-woman { display: none; }                                     /* the reader pages each woman; one page shows her */
.px-open { display: grid; gap: 1.8cqh; align-content: center; }
.px-open .eyebrow { color: var(--issue-accent); }
.px-title { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track);
  font-size: max(40px, 13cqw); line-height: .9; color: #fff; text-wrap: balance; }
.px-seam { display: block; width: 42%; height: 2px; background: var(--neon-line); filter: var(--glow-sm); }
.px-dek { font-style: italic; font-size: max(15px, 3.6cqw); line-height: 1.32; color: var(--ink); max-width: 24ch; }
.px-offer { font: 700 max(12.5px, 2.4cqw)/1.4 var(--font); color: #fff; max-width: 40ch; }
.px-open .proof { position: static; justify-self: start; }
.px-strip { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.6cqh; }
.px-in { flex: none; }
.px-strip ol { flex: 1; min-height: 0; list-style: none; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 1.2cqh; }
.px-strip li { min-height: 0; }
.px-strip a { height: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto auto 1fr; column-gap: 4cqw;
  text-decoration: none; color: inherit; }
.px-thumb { grid-row: 1 / -1; height: min(100%, 17cqh); aspect-ratio: var(--ar, .75); align-self: center; background: #0b0909;
  outline: 1px solid rgba(255, 255, 255, .16); outline-offset: 3px; overflow: hidden; }
.px-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.px-thumb-none { background: linear-gradient(160deg, rgba(var(--her-rgb, 239, 68, 68), .25), #0b0909); }
.px-sname { grid-row: 2; display: flex; align-items: center; gap: .7em; font: 800 max(10px, 2.2cqw)/1.2 var(--font); letter-spacing: .2em;
  text-transform: uppercase; color: #fff; }
.px-sname::before { content: ''; width: 1.8em; height: 2px; background: var(--her); flex: none; }
.px-scost { grid-row: 3; font-style: italic; font-size: max(12px, 2.6cqw); color: var(--ink-2); padding-left: calc(1.8em + .7em); }
.px-strip a:hover .px-sname { color: #ef4444; }
/* the opening as pages: its head alone (a spread's left page, a phone's first), its strip alone, or both (a big page) */
.px-page-head { justify-content: center; }
.px-page-head .px-title { font-size: max(44px, 16cqw); }
.px-page-strip { justify-content: flex-start; }
.px-page-both .px-open { flex: none; }
/* her pictures: her header above her first; the picture is sized to what is left, and shown whole */
.pg-px { --pxh: max(64px, calc(var(--ph) * .11)); }
.pg-px .pg-in { flex-direction: column; gap: calc(var(--ph) * .018); }
.px-her { flex: none; display: grid; justify-items: center; gap: 3px; text-align: center; max-width: calc(var(--pw) * .86); }
.px-name { display: flex; align-items: center; gap: .6em; font: 800 clamp(13px, calc(var(--ph) * .026), 24px)/1.15 var(--font);
  letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.px-name::before, .px-name::after { content: ''; width: 1.6em; height: 2px; background: var(--her); flex: none; }
.px-cost { font-style: italic; font-size: clamp(12px, calc(var(--ph) * .021), 19px); color: var(--ink-2); }
.px-story { font: 700 clamp(10.5px, calc(var(--ph) * .015), 13px)/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; }
.px-story em { font-style: italic; text-transform: none; letter-spacing: 0; color: #fff; }
.px-story .ct-pg { font: inherit; letter-spacing: inherit; color: inherit; text-transform: none; margin: 0; padding: 0; }
.px-story .ct-pg:not(:empty)::before { content: ' · p. '; }
.px-story:hover em { text-decoration: underline; text-decoration-color: #ef4444; }
.pg-px-first .plate {
  width: min(100%, calc((var(--ph) - var(--plate-top) - var(--foot) - var(--pxh) - var(--ph) * .018) * var(--ar)));
}
.is-tall .pg-px .pg-in { justify-content: flex-start; }
.is-tall .pg-px-first .plate { width: min(100%, calc((var(--vis-h, 300px) - 22px - var(--pxh)) * var(--ar))); }
/* the card that closes an odd count on a spread */
.px-card { display: none; }
.pg-px-card .px-card { display: flex; flex-direction: column; justify-content: center; gap: 2.4cqh; padding: 12% 11%;
  background: radial-gradient(ellipse 80% 60% at 40% 42%, rgba(var(--her-rgb), .16), transparent 70%), var(--grain), #0b0a0b; }
.px-card .eyebrow { color: var(--issue-accent); }
.px-cname { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track);
  font-size: max(30px, 10cqw); line-height: .95; color: #fff; }
.px-cname::after { content: ''; display: block; width: 26cqw; height: 3px; margin-top: 2.2cqh; background: var(--her); }
.px-ccost { font-style: italic; font-size: max(15px, 4cqw); color: var(--ink); }
.px-card .px-story { font-size: max(11px, 2.4cqw); }
/* a picture that moves: a drawn Play, bottom left */
.plate-play { position: absolute; left: 10px; bottom: 10px; z-index: 5; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px 0 11px; border-radius: 999px; background: rgba(10, 10, 10, .72); color: #fff;
  border: 1px solid rgba(255, 255, 255, .28); font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.plate-play .ico { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.plate-play:hover { border-color: #ef4444; }
/* one page (continuous): the pictorial runs down the page */
.mode-scroll .issue > .dept-pictorial, .no-js .dept-pictorial { height: auto; overflow: visible; container-type: inline-size; }
.mode-scroll .dept-pictorial .px-woman, .no-js .dept-pictorial .px-woman { display: grid; justify-items: center; gap: 18px; margin-top: 30px; }
.mode-scroll .dept-pictorial .plate, .no-js .dept-pictorial .plate { width: min(calc(100vw - 32px), 560px, calc((100svh - 190px) * var(--ar)));
  aspect-ratio: var(--ar); margin: 0 auto 90px; outline: 1px solid rgba(255, 255, 255, .16); outline-offset: 5px; }
.mode-scroll .dept-pictorial .px-strip ol, .no-js .dept-pictorial .px-strip ol { grid-auto-rows: 96px; }

/* ============================================================ THE PRINT TEMPLATE: the Print guides (DESK)
   reader.js section 3 holds the numbers: trim 8.5 x 11 in, bleed 0.125 in outside it, the safe line 0.25 in inside it;
   --safe and --bleed are those in this page's pixels. What a reader must see sits inside the safe line; only full-bleed
   art crosses it. The guides draw the template on every page: the safety border hatched, the safe line dashed, the
   trim (the page's edge) solid, and the bleed dashed around what is showing (a spread bleeds on its outer edges, never
   at the fold). Safety (reader.js) measures every page against it: anything that crosses is outlined, and the page
   carries a proof tag saying what and by how much. */
.pg-guides, .stage-bleed { display: none; }
[data-guides="on"] .pg-guides {
  display: block; position: absolute; inset: 0; z-index: 40; pointer-events: none;
  outline: 1px solid rgba(255, 255, 255, .72); outline-offset: -1px;
}
.gd-band {
  position: absolute; inset: 0; padding: var(--safe);
  background: repeating-linear-gradient(135deg, rgba(239, 68, 68, .36) 0 1px, transparent 1px 6px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.gd-safe { position: absolute; inset: var(--safe); border: 1px dashed #ef4444; }
.gd-lbl {
  position: absolute; left: calc(var(--safe) + 6px); top: calc(var(--safe) / 2); transform: translateY(-50%); padding: 2px 5px;
  border-radius: 3px; background: rgba(10, 10, 10, .88); font: 700 7.5px/1 var(--font); letter-spacing: .14em;
  text-transform: uppercase; color: #fff; white-space: nowrap;
}
[data-guides="on"] .stage-bleed { display: block; position: absolute; z-index: 60; pointer-events: none; border: 1px dashed rgba(255, 255, 255, .6); }
[data-proof="on"] .ll-unsafe, [data-guides="on"] .ll-unsafe { outline: 2px solid #ef4444; outline-offset: 2px; }
[data-proof="on"] .pf-safe {
  position: absolute; left: var(--safe); bottom: var(--safe); z-index: 45; max-width: calc(100% - 2 * var(--safe));
  color: #fff; background: #b91c1c; border-color: #ef4444;
}

/* ============================================================ the desk tools (DESK only, with the proof marks on) */
.desk, .picker { display: none; }
[data-proof="on"] .desk {
  position: absolute; right: 8px; top: 8px; z-index: 9; display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.dk-row { display: flex; align-items: center; gap: 3px; padding: 3px; border-radius: 9px; background: rgba(10, 10, 10, .88); border: 1px solid rgba(255, 255, 255, .14); }
.dk-what { font: 700 8.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 0 5px 0 6px; white-space: nowrap; }
.dk-b {
  display: inline-flex; align-items: center; gap: 5px; min-height: 36px; min-width: 36px; padding: 0 9px; border-radius: 7px;
  font: 700 11px/1 var(--font); color: var(--ink-2); border: 1px solid rgba(255, 255, 255, .16); background: none; white-space: nowrap;
}
.dk-b .ico { width: 16px; height: 16px; }
.dk-b:not(:disabled):hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
.dk-b[aria-pressed="true"] { color: #fff; border-color: #ef4444; background: rgba(239, 68, 68, .18); }
.dk-b:disabled { opacity: .36; }
.dk-b.is-busy { opacity: .6; }
.dk-lock { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 9px; border-radius: 7px; background: rgba(10, 10, 10, .88); border: 1px dashed rgba(239, 68, 68, .6); color: #fff; font: 700 9.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.dk-lock .ico { width: 13px; height: 13px; }
.contents > .pf-closed { position: static; align-self: flex-start; }
[data-proof="on"] .cs-frame .desk { right: 3px; top: 3px; }
.cs-frame .dk-what, .cs-frame .dk-b span, .cs-frame .dk-lock span { display: none; }
.cs-frame .dk-b { min-height: 30px; min-width: 30px; padding: 0 6px; }
.cs-frame .pf-state { position: absolute; left: 2px; bottom: 2.4cqw; }
.ds-print .desk { transform: rotate(2.2deg); max-width: calc(100% - 16px); }
.ds-print .dk-what, .ds-print .dk-b span, .ds-print .dk-lock span { display: none; }      /* compact: the print is narrow */
.ds-print .dk-row { flex-wrap: wrap; justify-content: flex-end; }
.ds-print .dk-b { min-height: 34px; min-width: 34px; padding: 0 7px; }
[data-proof="on"] .picker { display: flex; }
.picker { align-items: center; gap: 8px; padding: 6px; border-radius: 10px; background: rgba(10, 10, 10, .9); border: 1px solid rgba(255, 255, 255, .16); z-index: 9; }
.pk-label { font: 700 9px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); padding-left: 4px; }
.pk-strip { display: flex; gap: 6px; overflow-x: auto; max-width: 60vw; }
.pk-thumb { flex: none; width: 46px; height: 58px; padding: 0; border-radius: 4px; overflow: hidden; outline: 1px solid rgba(255, 255, 255, .2); outline-offset: -1px; }
.pk-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; background: #070607; }
.pk-thumb.is-current { outline: 2px solid #fff; outline-offset: -2px; }
.pk-thumb.is-trying { outline: 2px solid #ef4444; outline-offset: -2px; }

.gfv-pick { position: absolute; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 7; max-width: calc(100vw - 16px); }
.gfv-pick .pk-strip { max-width: calc(100vw - 190px); }
.gfv-pick .pk-thumb { width: 96px; height: 42px; }
.gfv-pick[hidden] { display: none !important; }
/* the desk panel, in the settings sheet */
.desk-panel { display: grid; gap: 8px; border-top: 1px solid rgba(206, 14, 48, .35); padding-top: 8px; margin-top: 4px; }
.dp-counts { font: 700 13px/1.45 var(--font); color: #fff; }
.dp-closed { font: 700 12px/1.4 var(--font); color: #fff; border: 1px dashed rgba(239, 68, 68, .6); border-radius: 8px; padding: 8px 10px; }
.dp-closed[hidden] { display: none; }
.dp-conn { font: 600 11.5px/1.4 var(--font); color: var(--ink-3); }
.dp-next { color: #fff; font-weight: 700; }
/* the note editor */
.dnote { position: fixed; left: 50%; bottom: calc(var(--dock) + 16px); transform: translateX(-50%); z-index: 90; width: min(460px, calc(100vw - 24px)); display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: #141213; border: 1px solid rgba(239, 68, 68, .5); }
.dnote[hidden] { display: none; }
.dnote-for { font: 700 10px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.dnote-text { width: 100%; min-height: 96px; resize: vertical; padding: 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2); background: #0c0b0c; color: #fff; font: 400 15px/1.45 var(--font); }
.dnote-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ============================================================ one page (continuous) */
.issue { display: none; }
.mode-scroll .issue, .no-js .issue { display: block; padding: calc(var(--top) + 20px) 0 calc(var(--dock) + 40px); }
.mode-scroll .issue > .pagecard, .mode-scroll .feature > .pagecard, .no-js .pagecard {
  width: var(--pw); height: var(--ph); margin: 0 auto 28px;
}
.mode-scroll .feature, .no-js .feature { display: block; }
.mode-scroll .story, .no-js .story {
  max-width: min(36em, calc(100vw - 36px)); margin: 16px auto 44px; font: 400 var(--fs)/1.66 var(--font); color: var(--ink);
  hyphens: auto; -webkit-hyphens: auto;
}
.mode-scroll .story p, .no-js .story p { text-indent: 1.35em; }
.mode-scroll .story p.first, .mode-scroll .story p.after-break, .no-js .story p.first { text-indent: 0; }
.mode-scroll .story .plate, .no-js .story .plate { width: min(calc(100vw - 32px), 620px, calc((100svh - 190px) * var(--ar))); aspect-ratio: var(--ar); margin: 34px 50% 110px; transform: translateX(-50%); outline: 1px solid rgba(255, 255, 255, .16); outline-offset: 5px; }
.mode-scroll .story .gatefold, .no-js .story .gatefold { width: min(100vw, 640px); aspect-ratio: 3 / 4; margin: 34px 50%; transform: translateX(-50%); }
.mode-scroll .story .pq, .no-js .story .pq { margin: 22px 0; }
.mode-scroll .previews .plate, .no-js .previews .plate { width: min(calc(100vw - 32px), 560px, calc((100svh - 190px) * var(--ar))); aspect-ratio: var(--ar); margin: 0 auto 110px; outline: 1px solid rgba(255, 255, 255, .16); outline-offset: 5px; }
.mode-scroll .ct-pg, .no-js .ct-pg { display: none; }
.no-js .bar-r, .no-js .spice-wrap { display: none; }

/* ============================================================ toast, motion */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--dock) + 16px); transform: translate(-50%, 12px); z-index: 95; pointer-events: none;
  background: #151214; border: 1px solid rgba(239, 68, 68, .45); border-radius: 999px; padding: 10px 16px;
  font: 600 13px/1.3 var(--font); color: #fff; opacity: 0; transition: opacity .25s, transform .25s; max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .spice-aura, .gfv-rotate .ico { animation: none !important; }
}

/* ============================================================ the site's plugins, on the PUBLIC page
   The server puts the site's wp_head/wp_footer on the public reader (the Age Gate, Complianz). The site holds
   Complianz's cookie banner while the Age Gate shows (on phones it covered the gate's buttons); this page does not load
   the theme's style.css, so the same rule lives here (Deploy-Logs/2026-09-26-cookie-banner-after-age-gate.md). */
html.age-gate__restricted #cmplz-cookiebanner-container, html.age-gate__restricted .cmplz-cookiebanner,
html.age-gate__restricted #cmplz-manage-consent, html.age-gate__restricted .cmplz-manage-consent { display: none !important; }