/* Bakerfield Unearthed — companion site.
   Packaging: the published cover's mint / hot pink / aubergine / lime.
   World: construction paper, kraft, masking tape, H-ED forms.
   Alien things are the only things that glow. Motion is stepped, like cutout
   animation shot on twos (keyframes held with steps(1, jump-end)); alien light
   is the only thing that tweens. Everything else stays quiet.

   Signature: the garage roll-door on the home page and the paper-scrap
   cut-letter headings (built by tools/build_site.py cut_letters()).

   Shared classes other page modules rely on: .section .wrap .eyebrow .label
   .lede .paper .tape .btn(.ghost .dark .small) .stamp .form .redact
   .declassified .margin-note .terminal .cursor .cut .marker .visually-hidden */

@font-face { font-family: "Anton"; src: url("../fonts/Anton-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/Literata-Variable.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/Literata-Italic-Variable.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/CourierPrime-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/CourierPrime-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("../fonts/PermanentMarker-Regular.woff2") format("woff2"); font-display: swap; }

:root {
  /* packaging */
  --mint: #E2FDDE;
  --pink: #F840C1;          /* display only: big type, buttons, offsets */
  --pink-tint: #FFC9EE;
  --aubergine: #1D0A39;     /* ink */
  --lime: #B3F35C;          /* hard offset */
  /* world */
  --paper: #F5E6CA;
  --page: #FFFAEE;
  --kraft: #C4A882;
  --kraft-light: #DCC7A0;
  --kraft-deep: #8A7A62;
  --tape: #EFE3B8;
  --report: #F7F5EF;
  --redact: #1C1C1C;
  --gov: #5E6B78;
  --hed-red: #B0301F;
  /* alien: the only glow */
  --night: #1A1A2E;
  --void: #0D0D0D;
  --zogarium: #39FF14;
  --cyan: #00FFFF;

  --ink: var(--aubergine);
  --muted: #4E3F66;
  --focus: var(--aubergine);

  --f-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --f-body: "Literata", Georgia, "Times New Roman", serif;
  --f-form: "Courier Prime", "Courier New", monospace;
  --f-marker: "Permanent Marker", "Comic Sans MS", cursive;

  --shadow: -5px 6px 0 rgba(29, 10, 57, .85);
  --shadow-soft: 3px 5px 0 rgba(29, 10, 57, .28);
  --shadow-lift: -8px 10px 0 var(--aubergine);
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 38rem;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--mint) var(--grain);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(1.02rem, .97rem + .25vw, 1.12rem);
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--pink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; background: var(--aubergine); color: var(--mint); padding: 12px 16px; z-index: 50; font-family: var(--f-form); font-weight: 700; }
.skip:focus { top: 12px; outline-color: var(--lime); }

/* ---- type ---------------------------------------------------------- */
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; margin: 0 0 .4em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5.2rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); }
h3 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.8rem); }
p { margin: 0 0 1em; }
.lede { font-size: 1.14em; line-height: 1.55; max-width: var(--measure); }
.label, .eyebrow { font-family: var(--f-form); font-weight: 700; font-size: .8rem; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { color: var(--muted); margin-bottom: .8em; }
.marker { font-family: var(--f-marker); font-weight: 400; letter-spacing: .02em; }

/* The wordmark: pink over aubergine with a hard lime offset, as published. */
.wordmark { font-family: var(--f-display); line-height: .9; text-transform: uppercase; margin: 0; letter-spacing: .005em; }
.wordmark span { display: block; text-shadow: -.06em .08em 0 var(--lime); }
.wordmark .w1 { color: var(--pink); }
.wordmark .w2 { color: var(--aubergine); }

/* ---- cut-letter headings (signature) ------------------------------- */
/* Each letter is a paper scrap with its own tilt, paper and scissor cut
   (inline --r --y --k from the builder). Words never break inside. */
h1:has(.cut), h2:has(.cut) { line-height: 1.22; }
.cut .w { display: inline-flex; white-space: nowrap; gap: .045em; margin-right: .2em; filter: drop-shadow(2px 3px 0 rgba(29, 10, 57, .34)); }
.cut .w:last-child { margin-right: 0; }
.cut i {
  font-style: normal; display: inline-block; line-height: 1;
  padding: .07em .1em .03em;
  background: var(--paper) var(--grain);
  color: var(--aubergine);
  clip-path: var(--k);
  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg));
}
.cut i.c1 { background-color: var(--pink-tint); }
.cut i.c2 { background-color: var(--lime); }
.cut i.c3 { background-color: #FFFDF7; }
.cut i.c4 { background-color: var(--kraft-light); }
.cut i.c5 { background-color: var(--aubergine); color: var(--mint); }

@keyframes cut-drop {
  0%   { opacity: 0; transform: translateY(-.42em) rotate(calc(var(--r, 0deg) * -3 - 8deg)); }
  34%  { opacity: 1; transform: translateY(.08em) rotate(calc(var(--r, 0deg) * 2 + 4deg)); }
  67%  { opacity: 1; transform: translateY(-.03em) rotate(calc(var(--r, 0deg) * -.5)); }
  100% { opacity: 1; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); }
}
/* A page's h1 is in view on arrival, so its scraps drop on load. Section
   headings further down are placed one scrap at a time as they scroll up
   into the lower half of the screen (the range ends by the time the
   heading is about a third of the way up, so every letter lands). */
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .cut i { animation: cut-drop .5s steps(1, jump-end) both; animation-delay: calc(var(--i) * 60ms + 120ms); }
  @supports (animation-timeline: view()) {
    html:not(.motion-off) h2 .cut i {
      animation-duration: auto; animation-delay: 0s;
      animation-timeline: view();
      animation-range: cover calc(var(--i) * 1.5%) cover calc(14% + var(--i) * 1.5%);
    }
  }
}

/* ---- chrome -------------------------------------------------------- */
/* header.masthead is the banner landmark: the notice bar on top, then the
   wordmark and clearance meter (.masthead-in). */
.masthead { display: block; }
.notice { background: var(--aubergine); color: var(--mint); font-family: var(--f-form); font-size: .8rem; line-height: 1.45; --focus: var(--lime); }
.notice-in { max-width: 1320px; margin: 0 auto; padding: 7px var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 24px; }
.notice p { margin: 0; }
.notice strong { color: var(--lime); font-weight: 700; margin-right: .3em; }
.notice .short { display: none; }
@media (max-width: 640px) {
  .notice .long { display: none; }
  .notice .short { display: inline; }
  .notice-in { justify-content: flex-start; gap: 0 16px; }
}

.masthead-in { max-width: 1320px; margin: 0 auto; padding: 14px var(--gutter) 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; }
.brand { text-decoration: none; display: inline-block; padding: 4px 0; }
.masthead .wordmark { font-size: clamp(1.35rem, 1rem + 1.5vw, 2.25rem); }
.clearance { display: grid; justify-items: end; gap: 5px; font-family: var(--f-form); }
.clearance .label { font-size: .7rem; letter-spacing: .12em; }
.clearance .label b { font-size: 1.15em; letter-spacing: .04em; }
.clearance .meter { display: flex; gap: 3px; }
.clearance .meter span { width: clamp(9px, 1.1vw, 14px); height: 18px; border: 2px solid var(--aubergine); background: rgba(255, 255, 255, .35); }
.clearance .meter span.on { background: var(--aubergine); box-shadow: inset 0 -5px 0 var(--lime); }

.nav { position: relative; background: var(--kraft) var(--grain); clip-path: polygon(0 8%, 3% 0, 11% 7%, 19% 1%, 30% 6%, 41% 0, 52% 5%, 63% 1%, 74% 6%, 86% 0, 94% 5%, 100% 1%, 100% 93%, 96% 100%, 85% 94%, 72% 100%, 60% 93%, 47% 100%, 35% 94%, 22% 100%, 12% 93%, 3% 100%, 0 94%); }
.nav ul { list-style: none; margin: 0 auto; max-width: 1320px; padding: 8px var(--gutter); display: flex; flex-wrap: wrap; gap: 2px 6px; }
.nav a { font-family: var(--f-form); font-weight: 700; font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; }
.nav a:hover { background: rgba(255, 255, 255, .28); }
.nav a[aria-current="page"] { background: var(--aubergine); color: var(--mint); transform: rotate(-1.5deg); box-shadow: 2px 3px 0 rgba(29, 10, 57, .35); --focus: var(--pink); }
@media (max-width: 960px) and (min-width: 641px) {
  .nav ul { gap: 2px 2px; }
  .nav a { font-size: .78rem; letter-spacing: .06em; padding: 0 8px; }
}
@media (max-width: 640px) {
  .nav ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 10px 8px; }
  .nav a { font-size: .72rem; letter-spacing: .03em; padding: 0 2px; display: flex; }
}

/* Without scripts nothing can be remembered, copied or switched, so the
   controls that would do nothing are put away (BOOT adds .js before first
   paint). Every page still reads in full. */
html:not(.js) .masthead .clearance, html:not(.js) .toggle-read, html:not(.js) [data-motion-toggle],
html:not(.js) .share .row, html:not(.js) .share .status, html:not(.js) .play-row, html:not(.js) .decoded { display: none; }
.share-nojs { margin: 0; font-family: var(--f-form); font-size: .9rem; }

main { display: block; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(40px, 5vw, 68px) 0; }
.page-top { padding-top: clamp(32px, 5vw, 64px); }

/* Section heads: cut-letter heading with its lede beside it on wide screens. */
.sec-head { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 14px clamp(24px, 4vw, 60px); align-items: end; margin-bottom: clamp(26px, 3.4vw, 44px); }
.sec-head h2 { margin: 0; }
.sec-head .lede { margin: 0; }
@media (max-width: 760px) { .sec-head { grid-template-columns: minmax(0, 1fr); } }

footer.site { background: var(--aubergine); color: var(--mint); margin-top: clamp(24px, 4vw, 56px); padding: 48px 0 60px; font-size: .95rem; --focus: var(--lime); }
footer.site a { color: var(--mint); }
/* Standalone links get a full 44 px touch target (the footer's, and the
   canonical link under the share buttons). */
footer.site a, .share-link a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 6px; vertical-align: middle; }
footer.site .label { color: var(--lime); }
footer.site p { margin: .45em 0; }.foot { display: grid; gap: 28px clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.foot .wordmark { font-size: 2.1rem; margin-bottom: .5em; }
.foot .wordmark span, body.dark .masthead .wordmark span { text-shadow: -.06em .08em 0 #3D1C6E; }
.foot .wordmark .w2 { color: var(--lime); }
@media (max-width: 860px) { .foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot { grid-template-columns: minmax(0, 1fr); } }

/* ---- paper components --------------------------------------------- */
.paper { background: var(--paper) var(--grain); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 32px); position: relative; }
.kraft { background: var(--kraft) var(--grain); }
.tape::before, .tape::after { content: ""; position: absolute; top: -13px; width: 96px; height: 28px; background: var(--tape) var(--grain); opacity: .92; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); pointer-events: none; }
.tape::before { left: 18px; transform: rotate(-6deg); }
.tape::after { right: 18px; transform: rotate(5deg); }
.torn-top { position: relative; }
.torn-top::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 20px; background: inherit; clip-path: polygon(0 100%, 0 45%, 4% 70%, 8% 30%, 13% 62%, 18% 20%, 24% 58%, 29% 35%, 35% 72%, 41% 25%, 47% 60%, 52% 30%, 58% 68%, 64% 22%, 70% 55%, 76% 32%, 82% 70%, 88% 28%, 93% 64%, 97% 40%, 100% 60%, 100% 100%); }

/* Buttons are cardboard cutouts on a pin: hover swings them on the
   bottom-left hinge in held frames. */
.btn {
  font-family: var(--f-display); font-weight: 400; font-size: 1.12rem; line-height: 1.05; letter-spacing: .05em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; text-align: center;
  padding: .72em 1.15em .66em; min-height: 48px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--pink); color: var(--aubergine); box-shadow: -4px 5px 0 var(--aubergine);
  transform-origin: 0 100%;
}
.btn:hover { animation: hinge .26s steps(1, jump-end) forwards; text-decoration: none; }
.btn:active { animation: none; transform: translate(-2px, 3px); box-shadow: -1px 2px 0 var(--aubergine); }
.btn.ghost { background: var(--paper) var(--grain); }
.btn.dark { background: var(--aubergine); color: var(--mint); box-shadow: -4px 5px 0 var(--lime); --focus: var(--aubergine); }
.btn.small { font-size: 1rem; min-height: 44px; padding: .55em .95em .5em; }
.btn[disabled] { opacity: .5; cursor: not-allowed; animation: none; }
footer.site .btn.ghost { box-shadow: -4px 5px 0 var(--lime); color: var(--aubergine); }
/* The device asks for reduced motion: the switch reads as a settled fact,
   not a button waiting to be pressed (site.js sets aria-disabled). */
footer.site .btn.ghost[aria-disabled="true"] { cursor: default; animation: none; transform: none; background: transparent; color: var(--mint); box-shadow: inset 0 0 0 2px rgba(226, 253, 222, .5); }
@keyframes hinge {
  0%   { transform: none; }
  35%  { transform: rotate(-4deg) translateY(-2px); }
  70%  { transform: rotate(-1deg); }
  100% { transform: rotate(-2deg) translateY(-1px); }
}
.cta-row { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; }

.stamp { display: inline-block; font-family: var(--f-form); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hed-red); border: 3px double var(--hed-red); padding: 4px 10px; transform: rotate(-4deg); line-height: 1.3; }

/* ---- H-ED forms ---------------------------------------------------- */
.form { background: var(--report) var(--grain); font-family: var(--f-form); color: #1d1d1d; box-shadow: var(--shadow-soft); padding: clamp(18px, 3vw, 30px); position: relative; }
.form h3 { font-family: var(--f-form); font-weight: 700; font-size: 1.05rem; letter-spacing: .12em; }
.form dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 1em; }
.form dt { font-weight: 700; text-transform: uppercase; font-size: .8rem; letter-spacing: .08em; padding-top: .2em; }
.form dd { margin: 0; overflow-wrap: anywhere; }
.redact { background: var(--redact); color: transparent; border-radius: 1px; padding: 0 .2em; user-select: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.declassified { background: rgba(179, 243, 92, .35); }
.margin-note { font-family: var(--f-marker); color: var(--hed-red); transform: rotate(-2deg); display: block; margin-top: .8em; }

/* ---- alien register (the only glow on the site) -------------------- */
.alien { background: radial-gradient(120% 70% at 50% 0%, #0F2A18, var(--void) 62%); color: #D9FFD0; --focus: var(--lime); --muted: #9FC596; }
.terminal {
  position: relative; overflow: hidden;
  font-family: var(--f-form); background: #060B06; color: var(--zogarium);
  padding: clamp(18px, 3vw, 30px); border-radius: 12px;
  box-shadow: 0 0 0 2px #17490E, 0 0 34px rgba(57, 255, 20, .2), inset 0 0 60px rgba(0, 255, 255, .06);
  text-shadow: 0 0 6px rgba(57, 255, 20, .5);
  --focus: var(--cyan);
}
.terminal::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, rgba(57, 255, 20, .12), rgba(57, 255, 20, 0) 60%); animation: glow-breathe 5s ease-in-out infinite alternate; }
.terminal::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .2) 0 1px, rgba(0, 0, 0, 0) 1px 3px); }
.terminal > * { position: relative; z-index: 1; }
.terminal p { margin: 0 0 .8em; }
.terminal a { color: var(--cyan); text-shadow: 0 0 6px rgba(0, 255, 255, .5); }
.terminal .cursor::after { content: "\258C"; animation: blink 1.1s steps(1) infinite; }
.term-bar { display: flex; align-items: center; gap: 10px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(57, 255, 20, .78); border-bottom: 1px solid rgba(57, 255, 20, .28); padding-bottom: 10px; margin: 0 0 16px !important; }
.dots { display: inline-flex; gap: 5px; flex: none; }
.dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(57, 255, 20, .55); }
.dots i:nth-child(2) { background: rgba(0, 255, 255, .55); }
.term-h { font-family: var(--f-form); font-weight: 700; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); letter-spacing: .08em; margin-bottom: .6em; }
.scramble { white-space: nowrap; overflow: hidden; color: rgba(57, 255, 20, .42); font-size: .84rem; line-height: 1.5; user-select: none; }
.term-toggle { color: var(--zogarium); }
.term-toggle .tr-sub { color: rgba(57, 255, 20, .72); }
.term-toggle input { accent-color: var(--zogarium); }
@keyframes blink { 50% { opacity: 0; } }
@keyframes glow-breathe { from { opacity: 1; } to { opacity: .5; } }
@keyframes glow-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* ---- home: hero + the garage door (signature) ---------------------- */
.hero { padding: clamp(24px, 4.5vw, 60px) 0 clamp(20px, 3vw, 40px); }
.hero-grid { max-width: 1320px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.hero-title { font-size: clamp(2.9rem, 1.1rem + 4.7vw, 5.6rem); line-height: .9; margin-bottom: .4em; }
.hero-title span { display: block; }
.hero-title .l2 { color: var(--pink); text-shadow: -.045em .055em 0 var(--lime); }
.hero-title .l3 { font-size: .56em; line-height: 1; margin-top: .22em; }
.hero-copy .lede { max-width: 34rem; }
.hero-copy .cta-row { margin-top: 1.6em; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-stage { order: -1; }
}

.hero-stage { position: relative; }
.hero-stage::before, .hero-stage::after { content: ""; position: absolute; z-index: 5; top: -14px; width: clamp(64px, 12%, 120px); height: 28px; background: var(--tape) var(--grain); opacity: .94; box-shadow: 0 1px 0 rgba(0, 0, 0, .1); pointer-events: none; }
.hero-stage::before { left: 7%; transform: rotate(-5deg); }
.hero-stage::after { right: 9%; transform: rotate(4deg); }
.garage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--night); border: 5px solid var(--aubergine); box-shadow: -12px 14px 0 var(--lime); container-type: inline-size; }
.garage .hero-art { width: 100%; height: 100%; object-fit: cover; }

/* The alien light is the one thing allowed to tween. */
.garage-glow { position: absolute; z-index: 1; left: 37%; top: 40%; width: 44%; height: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(57, 255, 20, .5), rgba(0, 255, 255, .16) 55%, rgba(0, 255, 255, 0)); mix-blend-mode: screen; opacity: 0; animation: glow-in 1.4s ease-out 2.5s forwards, garage-breathe 3.6s ease-in-out 3.9s infinite alternate; }
@keyframes glow-in { to { opacity: .62; } }
@keyframes garage-breathe { from { opacity: .62; } to { opacity: .36; } }

/* A real roll-up door, corrugated like the painted one behind it. It rattles
   on its track, then rolls up in held frames and leaves the scene. */
.door {
  position: absolute; inset: 0; z-index: 2; display: block;
  background-color: #5B331D;
  background-image:
    linear-gradient(to right, rgba(16, 5, 0, .35), rgba(16, 5, 0, 0) 5%, rgba(16, 5, 0, 0) 95%, rgba(16, 5, 0, .35)),
    linear-gradient(to bottom, rgba(255, 226, 190, .14) 0 9%, rgba(255, 226, 190, 0) 9% 74%, rgba(16, 5, 0, .42) 74% 100%),
    var(--grain);
  background-size: 100% 100%, 100% 3.4%, 220px 220px;
  animation: door-rattle .45s steps(1, jump-end) .55s 1, door-roll 1.5s steps(1, jump-end) 1.1s forwards;
}
.door::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4.5%; background: #2B160A; box-shadow: 0 -2px 0 rgba(255, 226, 190, .12); }
.door-handle { position: absolute; left: 50%; bottom: 9%; width: 11%; height: 3.4%; transform: translateX(-50%); background: #2A1409; border-radius: 4px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14); }
.door-note { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%) rotate(-3deg); white-space: nowrap; background: var(--tape) var(--grain); color: var(--aubergine); font-family: var(--f-marker); font-size: clamp(.95rem, 5.2cqi, 2.6rem); line-height: 1; padding: .38em .8em .32em; box-shadow: 1px 2px 0 rgba(0, 0, 0, .28); }
.door-head { display: none; }
@keyframes door-rattle {
  0%   { transform: none; }
  25%  { transform: translateY(-1.6%) rotate(-.35deg); }
  50%  { transform: translateY(.5%) rotate(.25deg); }
  75%  { transform: translateY(-.8%); }
  100% { transform: none; }
}
@keyframes door-roll {
  0%   { transform: translateY(0); }
  12%  { transform: translateY(-7%); }
  24%  { transform: translateY(-19%); }
  37%  { transform: translateY(-34%); }
  50%  { transform: translateY(-47%); }
  62%  { transform: translateY(-63%); }
  75%  { transform: translateY(-79%); }
  88%  { transform: translateY(-94%); }
  100% { transform: translateY(-104%); }
}
@media (prefers-reduced-motion: reduce) {
  .door { display: none; }
  .garage-glow { animation: none; opacity: .6; }
}
html.motion-off .door { display: none; }
html.motion-off .garage-glow { animation: none; opacity: .6; }

/* ---- home: the town ------------------------------------------------ */
.town-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.town-fig { margin: 0; }
.town-fig img { width: 100%; border: 5px solid var(--aubergine); box-shadow: -12px 14px 0 var(--kraft); }
.town-note { width: min(100%, 600px); justify-self: end; margin: clamp(-150px, -10vw, -40px) clamp(0px, 5vw, 56px) 0 0; transform: rotate(.8deg); z-index: 1; }
.town-note h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); line-height: 1.08; }
.town-note s { color: var(--muted); text-decoration-color: var(--hed-red); text-decoration-thickness: .09em; }
.town-note .marker { display: inline-block; color: var(--hed-red); font-size: .82em; transform: rotate(-4deg); text-transform: none; }
.town-facts { list-style: none; margin: 1.2em 0 0; padding: .9em 0 0; border-top: 2px dashed rgba(29, 10, 57, .3); display: grid; gap: 6px; font-size: .95rem; line-height: 1.45; }
.town-facts li { display: grid; grid-template-columns: 9.6rem minmax(0, 1fr); gap: 0 12px; align-items: baseline; }
.town-facts .label { color: var(--muted); font-size: .72rem; }
@media (max-width: 700px) {
  .town-note { margin: -26px 6px 0; transform: rotate(.5deg); }
  .town-facts li { grid-template-columns: minmax(0, 1fr); }
}

/* ---- home: the six (lineup, hotspots, dossiers; cast.js) ----------- */
.six-more { margin: clamp(26px, 3.4vw, 40px) 0 0; }
.lineup { position: relative; }
.lineup-hint { display: inline-block; justify-self: start; font-family: var(--f-marker); color: var(--hed-red); font-size: 1.15rem; line-height: 1.2; margin: 0 0 .7em; transform: rotate(-1.5deg); }
.lineup-fig { position: relative; margin: 0; }
.lineup-fig img { width: 100%; border: 5px solid var(--aubergine); box-shadow: -12px 14px 0 var(--pink); }

/* Without JS: every dossier is on the table. */
.dossiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 30px 24px; margin-top: 40px; }

.dossier { position: relative; }
.dossier-tab { display: inline-block; margin: 0; padding: 7px 18px 5px; background: var(--kraft) var(--grain); font-size: .7rem; clip-path: polygon(0 100%, 7% 0, 93% 0, 100% 100%); }
.dossier-sheet { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 18px 18px 14px; background: var(--report) var(--grain); border-top: 6px solid var(--kraft); box-shadow: var(--shadow); color: #1d1a24; }
/* The picture itself comes from cast.js (the copy the lineup already loaded)
   or, without scripts, from the builder's <noscript> style in the head. */
.mug { display: block; width: 84px; height: 84px; background-position: var(--bx) var(--by); background-size: var(--bs) auto; background-repeat: no-repeat; background-color: var(--paper); border: 4px solid #fff; box-shadow: 1px 2px 0 rgba(0, 0, 0, .3); transform: rotate(-3deg); }
.dossier-id h3 { font-size: 1.55rem; margin: 0 0 .15em; line-height: 1; }
.dossier-age { font-family: var(--f-form); font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; margin: 0; color: var(--muted); }
.dossier-line { grid-column: 1 / -1; margin: 12px 0 4px; font-size: 1rem; line-height: 1.5; }
.dossier-more { grid-column: 1 / -1; margin: 0; }
.dossier-more a { font-family: var(--f-form); font-weight: 700; font-size: .9rem; min-height: 44px; display: inline-flex; align-items: center; }
.dossier-close { position: absolute; top: -40px; right: 0; min-width: 44px; min-height: 40px; padding: 0 10px; border: 0; background: var(--aubergine); color: var(--mint); font-family: var(--f-form); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; --focus: var(--pink); }
.dossier-close::after { content: " \00D7"; font-size: 1.2em; }
.dossier:focus-visible { outline: none; }
.dossier:focus-visible .dossier-sheet { outline: 3px solid var(--focus); outline-offset: 3px; }

/* With cast.js: hotspots over the picture, one file at a time. */
.lineup.is-live .dossiers { display: block; margin-top: 0; }
.lineup.is-live .dossier { max-width: 560px; margin-top: 64px; transform-origin: 14% 0; animation: pop-hinge .36s steps(1, jump-end) both; }
@keyframes pop-hinge {
  0%   { opacity: 0; transform: rotate(-9deg) translate(-8px, -20px); }
  30%  { opacity: 1; transform: rotate(4deg) translate(0, 5px); }
  62%  { opacity: 1; transform: rotate(-1.5deg); }
  100% { opacity: 1; transform: none; }
}
.lineup.is-live .hotspots { position: absolute; inset: 5px; }
.suspect { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); padding: 0; margin: 0; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.suspect::before { content: ""; position: absolute; inset: 0; border: 3px dashed transparent; border-radius: 12px; }
.suspect::after { content: "Pull file"; position: absolute; left: 50%; top: 0; transform: translate(-50%, -110%) rotate(-3deg); white-space: nowrap; padding: 6px 9px 5px; background: var(--aubergine); color: var(--mint); font-family: var(--f-form); font-weight: 700; font-size: .72rem; line-height: 1; letter-spacing: .1em; text-transform: uppercase; opacity: 0; pointer-events: none; }
.suspect:hover::before, .suspect:focus-visible::before, .suspect[aria-expanded="true"]::before { border-color: var(--aubergine); background: rgba(248, 64, 193, .08); }
.suspect:hover::after, .suspect:focus-visible::after { opacity: 1; }
.suspect[aria-expanded="true"]::after { content: "File open"; background: var(--pink); color: var(--aubergine); opacity: 1; }
.suspect:focus-visible { outline: none; }
.suspect .nm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (min-width: 1000px) {
  .lineup.is-live { display: grid; grid-template-columns: minmax(0, 1fr); }
  .lineup.is-live .lineup-fig, .lineup.is-live .dossiers { grid-row: 2; grid-column: 1; }
  .lineup.is-live .dossiers { position: relative; z-index: 3; pointer-events: none; }
  .lineup.is-live .dossier { position: absolute; top: 12%; left: var(--pl, auto); right: var(--pr, auto); width: min(350px, 34%); margin: 0; pointer-events: auto; }
}
@media (max-width: 699px) {
  .lineup.is-live .hotspots { position: static; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 18px; }
  .suspect { position: relative; left: auto; top: auto; width: auto; height: auto; min-height: 44px; border-radius: 0; background: var(--paper) var(--grain); box-shadow: 1px 2px 0 rgba(29, 10, 57, .3); font-family: var(--f-form); font-weight: 700; font-size: .76rem; letter-spacing: .02em; text-transform: uppercase; }
  .suspect::before { inset: 3px; border-radius: 0; }
  .suspect::after { display: none; }
  .suspect[aria-expanded="true"] { background: var(--aubergine); color: var(--mint); }
  .suspect[aria-expanded="true"]::before { border-color: transparent; background: none; }
  .suspect:focus-visible::before { border-color: var(--pink); }
  .suspect .nm { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .lineup.is-live .dossier { margin-top: 56px; }
}

/* ---- books --------------------------------------------------------- */
.season-sub { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1; color: var(--pink); text-shadow: -.05em .06em 0 var(--aubergine); margin: 0 0 .35em; }
.shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(30px, 3.2vw, 46px) clamp(16px, 2.2vw, 30px); }

.page-top .shelf { margin-top: clamp(28px, 4vw, 48px); }
.shelf li { position: relative; }
.shelf a { display: block; text-decoration: none; color: inherit; }
.cover-slot { display: block; transform-origin: 20% 100%; }
.shelf img, .cover-blank { display: block; width: 100%; aspect-ratio: 5 / 8; object-fit: cover; background: var(--kraft); border: 2px solid var(--aubergine); box-shadow: -5px 6px 0 var(--aubergine); }
.cover-blank { display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; font-family: var(--f-display); text-transform: uppercase; background: var(--paper) var(--grain); }
.shelf a:hover .cover-slot, .shelf a:focus-visible .cover-slot { animation: lift .24s steps(1, jump-end) forwards; }
.shelf a:hover .t { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 3px; }
@keyframes lift {
  0%   { transform: none; }
  40%  { transform: translate(1px, -8px) rotate(-3.5deg); }
  100% { transform: translate(0, -6px) rotate(-1.5deg); }
}
.shelf .n { display: block; margin-top: 16px; font-family: var(--f-form); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.shelf .t { display: block; margin-top: 2px; font-family: var(--f-display); font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); line-height: 1.04; text-transform: uppercase; text-underline-offset: 3px; }
.shelf .s { display: block; margin-top: 5px; font-size: .9rem; line-height: 1.4; color: var(--muted); }
.shelf .sp { display: block; margin-top: 6px; font-family: var(--f-form); font-size: .76rem; letter-spacing: .04em; color: var(--muted); }
.read-badge { position: absolute; z-index: 2; top: 10px; right: -8px; background: var(--report); }
/* Narrower screens: a list of cards, cover beside title and tagline. */
@media (max-width: 999px) {
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(20px, 3vw, 32px); }
  .shelf a { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); column-gap: 16px; align-content: start; }
  .shelf .cover-slot { grid-row: 1 / span 5; }
  .shelf .n { margin-top: 2px; }
  .shelf .read-badge { right: auto; left: calc(40% - 50px); top: 8px; }
}
@media (max-width: 580px) {
  .shelf { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .shelf a { grid-template-columns: 112px minmax(0, 1fr); }
  .shelf .read-badge { left: 58px; }
  .shelf .t { font-size: 1.2rem; }
  /* Home page on a phone: the season is a real shelf you slide along, cover
     and title only (the books page keeps the full list). It bleeds to the
     screen edges; the page itself never scrolls sideways. */
  .shelf.shelf-home {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(42%, 200px);
    gap: 18px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter) 18px calc(var(--gutter) + 6px);
    scrollbar-width: thin; scrollbar-color: var(--aubergine) transparent;
  }
  .shelf-home li { scroll-snap-align: start; }
  .shelf-home a { display: block; }
  .shelf-home .s { display: none; }
  .shelf-home .n { margin-top: 14px; }
  .shelf-home .t { font-size: 1.08rem; }
  .shelf-home .read-badge { left: auto; right: -6px; top: 40%; font-size: .7rem; padding: 3px 8px; }
  .shelf-home a:hover .cover-slot, .shelf-home a:focus-visible .cover-slot { animation: none; }
}

/* ---- home: garage toys -------------------------------------------- */
.toys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.8vw, 36px); align-items: stretch; }
@media (max-width: 980px) { .toys { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toy-log { grid-column: 1 / -1; } }
@media (max-width: 600px) { .toys { grid-template-columns: minmax(0, 1fr); } }
.toy { position: relative; display: flex; flex-direction: column; background: var(--paper) var(--grain); box-shadow: -6px 8px 0 var(--aubergine); transform-origin: 0 100%; }
.toy-art { display: block; overflow: hidden; aspect-ratio: 16 / 10; border-bottom: 4px solid var(--aubergine); }
.toy-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.toy-art.crop-band img { transform: scale(1.1); transform-origin: 50% 0; }
.toy-body { padding: 18px 20px 20px; }
.toy .eyebrow { margin-bottom: .4em; }
.toy h3 { margin: 0 0 .35em; }
.toy h3 a { text-decoration: none; }
.toy h3 a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.toy h3 a:focus-visible { outline: none; }
.toy:focus-within { outline: 3px solid var(--focus); outline-offset: 5px; }
.toy p:last-child { margin-bottom: 0; }
.toy:hover { animation: hinge-card .26s steps(1, jump-end) forwards; }
.toy:hover h3 a { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 3px; }
@keyframes hinge-card {
  0%   { transform: none; }
  40%  { transform: rotate(-1.6deg) translateY(-4px); }
  100% { transform: rotate(-.8deg) translateY(-3px); }
}
.toy-log { justify-content: center; border-radius: 12px; padding: clamp(20px, 3vw, 30px); }
.toy.terminal { background: #060B06; }
.toy-log.terminal { box-shadow: -6px 8px 0 var(--aubergine), 0 0 30px rgba(57, 255, 20, .22); }
/* Static and unstacked, so the stretched link covers the whole card, not just
   the heading: .terminal > * would otherwise make the h3 a positioning context,
   and z-index on a flex item makes it a stacking context even when static,
   which would trap the link's ::after under the paragraphs that follow. */
.toy-log h3 { position: static; z-index: auto; font-family: var(--f-form); font-weight: 700; letter-spacing: .06em; font-size: 1.6rem; }
.toy-log .enc { color: rgba(57, 255, 20, .55); }
.toy-note { color: #BFF5B0; text-shadow: none; font-size: .95rem; }
.toy-log.terminal:focus-within { outline-color: var(--aubergine); }

/* ---- book pages ---------------------------------------------------- */
.book .section { padding: clamp(32px, 4.5vw, 56px) 0; }
.book-top { padding-top: clamp(28px, 5vw, 64px) !important; }
/* Wide: the cover holds the left column (sticky) and the head, tagline and
   details stack beside it. Phone: the cover sits beside the title like a
   catalogue card, then the tagline and details run full width. */
.book-hero {
  display: grid; column-gap: clamp(28px, 5vw, 72px); align-items: start;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "cover head" "cover tag" "cover info";
}
.book-hero .cover { grid-area: cover; position: relative; }
.book-head { grid-area: head; }
.book-hero .tagline { grid-area: tag; margin-bottom: 1em; }
.book-info { grid-area: info; }
.book-hero .cover img, .book-hero .cover .cover-blank { width: 100%; border: 2px solid var(--aubergine); box-shadow: var(--shadow-lift); }
.book-hero .cover .cover-blank { display: flex; aspect-ratio: 5 / 8; align-items: center; justify-content: center; font-family: var(--f-display); text-transform: uppercase; font-size: 2rem; background: var(--paper) var(--grain); padding: 20px; text-align: center; }
@media (min-width: 901px) { .book-hero .cover { position: sticky; top: 24px; } }
.book-title { font-size: clamp(2.5rem, 1.3rem + 4.2vw, 5rem); line-height: .92; text-shadow: -.04em .05em 0 var(--lime); margin-bottom: .35em; }
@media (max-width: 760px) {
  .book-hero {
    column-gap: 18px;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "cover head" "tag tag" "info info";
  }
  .book-hero .cover img, .book-hero .cover .cover-blank { box-shadow: -5px 7px 0 var(--aubergine); }
  .book-hero .cover .cover-blank { font-size: 1.1rem; padding: 10px; }
  .book-hero .read-badge { top: 6px; right: -6px; font-size: .72rem; }
  .book-head { align-self: end; padding-bottom: 4px; }
  .book-head .eyebrow { margin-bottom: .6em; }
  .book-head .eb-season { display: block; font-weight: 400; letter-spacing: .08em; }
  .book-head .eb-sep { display: none; }
  .book-title { font-size: clamp(1.8rem, 8.4vw, 2.7rem); line-height: .95; margin-bottom: 0; overflow-wrap: break-word; }
  .book-hero .tagline { margin-top: 26px; }
}
.tagline { font-style: italic; }
.meta-row { list-style: none; margin: 0 0 1.4em; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.meta-row li { font-family: var(--f-form); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; border: 2px solid var(--aubergine); padding: 4px 10px 3px; background: rgba(255, 255, 255, .4); }
.blurb { max-width: 36rem; }
.pending-note { color: var(--muted); font-style: italic; }
.clear-box { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; max-width: 36rem; margin: 1.6em 0 1.6em; padding: 16px 18px; background: var(--report) var(--grain); box-shadow: var(--shadow); }
.clear-box .stamp { margin: 0; }
.toggle-read { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-family: var(--f-form); line-height: 1.3; }
.toggle-read input { flex: none; width: 26px; height: 26px; margin: 0; accent-color: var(--aubergine); cursor: pointer; }
.tr-main { display: block; font-weight: 700; font-size: 1rem; }
.tr-sub { display: block; font-size: .8rem; color: var(--muted); }

/* sharing */
.share-sec { padding-top: 0 !important; }
.share { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px clamp(24px, 4vw, 48px); max-width: 1040px; margin: 0 auto; }
@media (max-width: 800px) { .share { grid-template-columns: minmax(0, 1fr); } }
.share-head h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); }
.share-head p:last-child { margin-bottom: 0; }
.share-body { display: grid; gap: 10px; align-content: start; }
.share textarea { width: 100%; min-height: 120px; font: inherit; font-size: 1rem; line-height: 1.5; padding: 12px 14px; border: 2px solid var(--aubergine); border-radius: 0; background: #FFFDF6; color: var(--ink); resize: vertical; }
.share .row { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 4px; }
.share .status { font-family: var(--f-form); font-size: .9rem; min-height: 1.5em; margin: 0; }
.share-link { margin: 0; font-family: var(--f-form); font-size: .84rem; overflow-wrap: anywhere; }
.share-link .label { margin-right: .5em; }

/* the free cold open, set as a real book page */
.coldopen-eyebrow { text-align: center; }
.bookpage {
  position: relative; max-width: 42rem; margin: 0 auto;
  padding: clamp(26px, 5vw, 60px) clamp(22px, 7vw, 80px) clamp(24px, 4vw, 40px);
  background-color: var(--page);
  background-image: linear-gradient(to right, rgba(29, 10, 57, .08), rgba(29, 10, 57, 0) 5%), var(--grain);
  box-shadow: 4px 4px 0 #EFE6D2, 8px 8px 0 #E0D2B4, -7px 10px 0 var(--aubergine);
}
.runhead { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 2.6em; padding-bottom: .6em; border-bottom: 1px solid rgba(29, 10, 57, .2); font-size: .8rem; letter-spacing: .12em; font-variant-caps: all-small-caps; color: var(--muted); }
.runhead span:last-child { text-align: right; font-style: italic; }
@media (max-width: 520px) { .runhead { justify-content: center; } .runhead span:last-child { display: none; } }
/* rem, not em: the h2's own display size would otherwise open a hole
   between the chapter title and the first line */
.chapter { text-align: center; font-size: 1rem; margin: 0 0 2.1rem; }
.chapter .label { display: block; color: var(--muted); font-size: .76rem; margin-bottom: .45rem; }
.chapter-t { display: block; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.chapter::after { content: ""; display: block; width: 44px; height: 4px; margin: .8rem auto 0; background: var(--pink); }
.prose { font-size: clamp(1.04rem, 1rem + .22vw, 1.13rem); line-height: 1.72; hyphens: auto; -webkit-hyphens: auto; font-variant-numeric: oldstyle-nums; }
.prose p { margin: 0; text-indent: 1.5em; }
.prose p.first, .prose .break + p, .prose h3 + p, .prose blockquote + p { text-indent: 0; }
@media (min-width: 640px) { .prose { text-align: justify; } }
.prose p.first::first-letter { float: left; font-family: var(--f-display); font-weight: 400; font-size: 4.3em; line-height: .8; padding: .06em .09em 0 0; color: var(--pink); text-shadow: -.035em .04em 0 var(--aubergine); }
.prose p.first::first-line { font-variant-caps: small-caps; letter-spacing: .045em; }
.prose .break { text-align: center; text-indent: 0; margin: 1.1em 0; letter-spacing: .6em; color: var(--muted); }
.prose blockquote { margin: 1em 1.5em; font-style: italic; }
.prose blockquote p { text-indent: 0; }
.prose h3 { font-size: 1.3rem; margin: 1.4em 0 .6em; text-align: center; }
.prose.pending { text-align: center; padding: .4em 0 .2em; }
.prose.pending p { text-indent: 0; }
.prose.pending p:first-child { font-style: italic; color: var(--muted); }
.prose.pending .stamp { margin-top: 1.2em; }
.folio { margin: 2.6em 0 0; text-align: center; font-size: .82rem; color: var(--muted); letter-spacing: .2em; }
.folio::before { content: "\2014\2002"; }
.folio::after { content: "\2002\2014"; }

/* the log */
.log { max-width: 46rem; margin: 0 auto; }
.log .secret p { line-height: 1.65; }
.term-msg { font-size: 1rem; }

/* prev / all / next */
.booknav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px 18px; align-items: stretch; padding-top: 4px; padding-bottom: clamp(24px, 4vw, 48px); }
.booknav a { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 12px 16px; text-decoration: none; background: var(--paper) var(--grain); box-shadow: -4px 5px 0 var(--aubergine); transform-origin: 0 100%; }
.booknav a:hover { animation: hinge-card .26s steps(1, jump-end) forwards; }
.booknav .t { font-family: var(--f-display); text-transform: uppercase; font-size: 1.15rem; line-height: 1.05; }
.booknav-next { text-align: right; }
.booknav-all { align-self: center; align-items: center; font-family: var(--f-form); font-weight: 700; font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 640px) {
  .booknav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .booknav-all { grid-column: 1 / -1; grid-row: 2; }
  .booknav .t { font-size: 1rem; }
}

/* ---- logs page (alien register) ----------------------------------- */
body.dark { background: var(--void) var(--grain); color: #D9FFD0; --focus: var(--lime); --muted: #9FC596; }
body.dark .masthead .wordmark .w2 { color: var(--lime); }
body.dark .clearance { color: var(--mint); }
body.dark .clearance .meter span { border-color: var(--mint); background: transparent; }
body.dark .clearance .meter span.on { background: var(--mint); box-shadow: inset 0 -5px 0 var(--lime); }
body.dark .nav { --focus: var(--aubergine); color: var(--aubergine); }
body.dark footer.site { margin-top: 0; border-top: 1px solid rgba(57, 255, 20, .2); }
.logs-top { padding-top: clamp(36px, 5vw, 64px); }
.glow-h { color: var(--zogarium); text-shadow: 0 0 18px rgba(57, 255, 20, .55), 0 0 2px rgba(57, 255, 20, .9); }
.decoded { color: var(--zogarium); }
.play-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 1.4em 0 0; }
.play-row .label { color: var(--muted); }
.btn.alien-btn { background: #07140A; color: var(--zogarium); box-shadow: 0 0 0 2px var(--zogarium), 0 0 18px rgba(57, 255, 20, .38); text-shadow: 0 0 6px rgba(57, 255, 20, .6); --focus: var(--cyan); }
.btn.alien-btn.is-playing { background: var(--zogarium); color: var(--void); text-shadow: none; }
.logs { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 22px; }
.logs .term-bar { font-size: .74rem; }

/* ---- about --------------------------------------------------------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 44rem) minmax(0, 300px); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: clamp(20px, 3vw, 36px); }
@media (max-width: 900px) { .about-grid { grid-template-columns: minmax(0, 1fr); } }
.about-sheet { padding: clamp(24px, 5vw, 56px) clamp(22px, 6vw, 64px); background: var(--page) var(--grain); box-shadow: var(--shadow-lift); }
.about-sheet h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); margin: 1.6em 0 .45em; }
.about-sheet p.first::first-letter { font-family: var(--f-display); font-style: normal; float: left; font-size: 3.4em; line-height: .82; padding: .05em .08em 0 0; color: var(--pink); text-shadow: -.035em .04em 0 var(--aubergine); }
/* The fact sheet: a clipped index card beside the page, straight to the point. */
.about-card { transform: rotate(1.2deg); margin-top: 28px; border-top: 6px solid var(--kraft); }
.about-card > .label { margin: 0 0 1em; color: var(--muted); }
.about-card dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
.about-card dt { font-size: .72rem; color: var(--muted); padding-top: .7em; }
.about-card dd { font-size: .95rem; line-height: 1.4; padding-bottom: .55em; border-bottom: 1px dashed rgba(29, 10, 57, .25); }
.about-card .stamp { margin: .6em 0 0; }
@media (min-width: 901px) { .about-card { position: sticky; top: 24px; } }
@media (max-width: 900px) { .about-card { max-width: 420px; transform: rotate(-.6deg); margin: 8px 6px 0; } }

/* ---- fallbacks and 404 -------------------------------------------- */
.excerpt { max-width: var(--measure); margin: 0 auto; }
.files-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); margin-top: 32px; }
.lost-mark { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin-bottom: 28px; }
.lost-mark a { text-decoration: none; }
.lost-form { max-width: 560px; }
.lost-form h1 { font-family: var(--f-display); letter-spacing: .02em; }
.lost-form .stamp { margin-bottom: 1.4em; }

/* ---- puppets: shared stepped keyframes (other pages may use them) ---- */
@keyframes wave { 0% { transform: rotate(0deg); } 50% { transform: rotate(-38deg); } 100% { transform: rotate(0deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes door-up { from { transform: translateY(0); } to { transform: translateY(-78%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .cut i { animation: none !important; }
}
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
html.motion-off .cut i { animation: none !important; }

@media print {
  .notice, .nav, .clearance, footer.site, .share-sec, .log-sec, .booknav, .door, .hotspots { display: none !important; }
  body { background: #fff; }
}