/* ==========================================================================
   FakePics.nu - Institute of Pixel Science
   1950s B-movie laboratory: neon signage, pulp posters, manila case files.
   ========================================================================== */

:root {
  --night: #15101d;
  --night-2: #1f1730;
  --night-3: #2b2040;
  --text: #f1e7d0;
  --muted: #b9ab90;
  --paper: #f4e9cf;
  --paper-2: #eadbb3;
  --paper-edge: #cdb67f;
  --ink: #1d1712;
  --ink-2: #4f4232;
  --red: #c8263a;
  --red-hi: #e23a50;
  --mustard: #f0b43c;
  --mint: #8fe3c8;
  --neon: #ff4fa8;
  --neon-soft: #ffd3ea;
  --manila: #e3c282;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
  --row: 250px;               /* Light Table row height */
  --gutter: clamp(16px, 3vw, 40px);
  --f-neon: 'Monoton', 'Bungee Shade', Impact, sans-serif;
  --f-pulp: 'Abril Fatface', 'Didot', Georgia, serif;
  --f-script: 'Yellowtail', 'Brush Script MT', cursive;
  --f-type: 'Special Elite', 'Courier New', monospace;
  --f-body: 'Courier Prime', 'Courier New', monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font: 16px/1.55 var(--f-body);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 79, 168, .16), transparent 60%),
    radial-gradient(900px 500px at 100% 30%, rgba(143, 227, 200, .07), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 120px),
    var(--night);
  background-attachment: fixed;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mustard); text-underline-offset: 3px; }
a:hover { color: var(--neon-soft); }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
code { font-family: var(--f-body); font-size: .92em; word-break: break-all; }
.sr, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--paper); color: var(--ink); padding: 8px 12px; }

/* Film grain + vignette over everything */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 89;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* --------------------------------------------------------------- ticker */
.ticker {
  background: var(--mustard); color: var(--ink); overflow: hidden; white-space: nowrap;
  font: 13px/1 var(--f-type); letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 3px solid var(--ink); padding: 7px 0;
}
.ticker-track { display: inline-flex; gap: 3rem; animation: ticker var(--ticker-dur, 100s) linear infinite; padding-left: 3rem; will-change: transform; backface-visibility: hidden; }   /* lab.js sets the duration for an even reading speed */
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track, .ticker.held .ticker-track { animation-play-state: paused; }   /* hold still while someone reads it (on a phone: tap it, lab.js) */

/* ------------------------------------------------------------ header */
.site-head { padding: 18px var(--gutter) 4px; position: relative; }
.head-inner { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "logo nav" "est console"; align-items: center; column-gap: 32px; }   /* the menu centred on the neon logo, up in the space under the ticker */
.neon { grid-area: logo; text-decoration: none; display: inline-flex; align-items: baseline; line-height: 1; }
.neon-word {
  font: clamp(2.3rem, 6vw, 4.3rem)/1 var(--f-neon); color: var(--neon-soft); letter-spacing: .02em;
  text-shadow: 0 0 4px #fff, 0 0 10px var(--neon), 0 0 22px var(--neon), 0 0 44px var(--neon), 0 0 80px rgba(255, 79, 168, .6);
  animation: flicker 7s infinite;
}
.neon-tld {
  font: clamp(1.1rem, 2.4vw, 1.7rem)/1 var(--f-neon); color: #d9fff2; margin-left: .15em;
  text-shadow: 0 0 4px #fff, 0 0 10px var(--mint), 0 0 24px var(--mint);
  animation: flicker 11s infinite 2s;
}
.neon-pg {   /* the family edition's sign: "pg." lit in mint before FakePics (Family::on()) */
  font: clamp(1.3rem, 3vw, 2.2rem)/1 var(--f-neon); color: #d9fff2; margin-right: .1em;
  text-shadow: 0 0 4px #fff, 0 0 10px var(--mint), 0 0 24px var(--mint), 0 0 44px var(--mint);
  animation: flicker 9s infinite 1s;
}
.neon:hover .neon-word { color: #fff; }
.neon-static .neon-word, .neon-static .neon-tld { animation: none; }
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .35; text-shadow: none; }
}
.est { grid-area: est; margin: 6px 0 0; font: 1.35rem/1 var(--f-script); color: var(--mustard); }
.est span { color: var(--text); }
.est em { font-style: normal; color: var(--mint); margin-left: .3em; }
.est .motto { display: block; margin-top: 6px; font: 11px/1.3 var(--f-type); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

.wings { grid-area: nav; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; }
.wing {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 118px;
  padding: 8px 14px 9px; text-decoration: none; color: #f6efe0; text-transform: uppercase;
  font: 15px/1.1 var(--f-type); letter-spacing: .1em;
  background: linear-gradient(#2a3e46, #1c2b31); border: 2px solid #9fb8b8; border-radius: 6px;
  box-shadow: inset 0 0 0 3px #1c2b31, inset 0 0 0 4px rgba(159, 184, 184, .5), 0 4px 0 #0c1417, 0 8px 18px rgba(0, 0, 0, .4);
  transition: transform .15s, background .15s;
}
.wing small { font-size: 10px; color: var(--mint); letter-spacing: .2em; }
.wing:hover { transform: translateY(-2px) rotate(-1deg); color: #fff; background: linear-gradient(#35505b, #22363e); }
.wing.on { background: linear-gradient(#7a1c2a, #56121d); border-color: #f3a8b3; box-shadow: inset 0 0 0 3px #56121d, inset 0 0 0 4px rgba(243, 168, 179, .5), 0 4px 0 #2b070d, 0 0 22px rgba(226, 58, 80, .5); }
.wing.on small { color: var(--mustard); }

/* The lever: random slide */
.lever { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--mustard); font: 12px/1.05 var(--f-type); text-transform: uppercase; letter-spacing: .1em; margin-left: 6px; }
.lever-base { width: 34px; height: 44px; position: relative; background: linear-gradient(#444, #1a1a1a); border: 2px solid #777; border-radius: 6px; }
.lever-arm { position: absolute; left: 50%; bottom: 10px; width: 5px; height: 36px; margin-left: -2.5px; background: linear-gradient(90deg, #bbb, #eee, #999); transform-origin: 50% 100%; transform: rotate(-28deg); transition: transform .35s cubic-bezier(.5, -0.6, .5, 1.6); border-radius: 3px; }
.lever-arm::before { content: ''; position: absolute; top: -9px; left: 50%; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8095, var(--red) 55%, #6d0f1c); box-shadow: 0 0 10px rgba(226, 58, 80, .7); }
.lever:hover .lever-arm, .lever.pulled .lever-arm { transform: rotate(28deg); }
.lever:hover { color: var(--neon-soft); }

/* ------------------------------------------------------------ layout */
main { max-width: 1500px; margin: 0 auto; padding: 6px var(--gutter) 30px; position: relative; }   /* (the bottom was 60 px: with the footer's margin it left a wide empty band) */   /* snug under the header (was 18 px) */
.section { margin-top: 30px; }   /* was 64, then 38: keep the pages snug */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; flex-wrap: wrap; }
.section-link { font-family: var(--f-type); }
/* home page: Shuffled / Latest, a two-position switch on the lab's control panel */
.order-switch { display: inline-flex; border: 2px solid var(--mustard); border-radius: 999px; padding: 2px; gap: 2px; margin-right: auto; align-self: center; background: rgba(0, 0, 0, .25); }
.order-switch a { font-family: var(--f-type); font-size: .85rem; padding: 3px 12px; border-radius: 999px; color: var(--mustard); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.order-switch a:hover { background: rgba(240, 180, 60, .18); }
.order-switch a.on { background: var(--mustard); color: var(--ink); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.order-switch a:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.order-switch[aria-busy] { opacity: .6; cursor: progress; }
.sign {
  margin: 0; font: clamp(1.55rem, 2.8vw, 2.15rem)/1 var(--f-pulp); color: var(--paper);
  text-shadow: 3px 3px 0 var(--red), 6px 6px 0 rgba(0, 0, 0, .35); letter-spacing: .01em;
}
.pulp { font-family: var(--f-pulp); font-weight: 400; line-height: 1.02; margin: 0; }
.typed { font-family: var(--f-type); }
.poster-kicker { margin: 0 0 8px; font: 14px/1.2 var(--f-type); letter-spacing: .22em; text-transform: uppercase; color: var(--mint); }
.poster-tag { font: 1.6rem/1.2 var(--f-script); color: var(--mustard); margin: 10px 0; }
.fine { font-size: 12px; color: var(--muted); }

.page-head { position: relative; margin: 10px 0 18px; max-width: 900px; }
.page-head h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); color: var(--paper); text-shadow: 4px 4px 0 var(--red), 8px 8px 0 rgba(0, 0, 0, .35); }
.page-head .typed { color: var(--muted); max-width: 62ch; }
.case-head { max-width: none; padding-right: 150px; }
.page-head .case-notes { color: var(--text) !important; margin-top: 12px; max-width: none; font-size: 14px; line-height: 1.55; column-width: 30em; column-gap: 36px; column-rule: 1px dashed rgba(255, 255, 255, .12); }   /* case notes: newspaper columns on wide screens, no empty right half */
.stamp-head { position: absolute; right: 10px; top: 20px; }
/* A Ladies' Auxiliary volunteer's file (/auxiliary/{no}): her membership card sits at the top right like the folder stamp */
.aux-head { max-width: none; padding-right: 290px; min-height: 380px; }
.aux-card { position: absolute; right: 6px; top: 6px; width: 250px; padding: 16px 16px 12px; background: linear-gradient(160deg, #f9dbe4, #f2c3d2); color: var(--ink); border-radius: 10px; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); transform: rotate(3deg); font: 12px/1.35 var(--f-type); text-align: center; }
.aux-card-top { margin: 0 0 8px; font: 15px/1.1 var(--f-pulp); color: #9b1d4a; letter-spacing: .02em; }
.aux-card-top small { font: 9px var(--f-type); letter-spacing: .14em; text-transform: uppercase; color: #6b3a4c; }
.aux-pin { position: absolute; top: -12px; left: -12px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 var(--f-type); letter-spacing: .1em; color: #fff; background: radial-gradient(circle at 35% 30%, #ff9fbf, #d23a73 55%, #8e1846); box-shadow: 0 0 0 3px #e8c26a, 0 3px 8px rgba(0, 0, 0, .5); transform: rotate(-12deg); }
.aux-photo { display: block; width: 120px; height: 120px; margin: 0 auto 8px; border-radius: 50%; overflow: hidden; border: 3px solid #9b1d4a; background: #fff; }
.aux-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.aux-name { margin: 0 0 6px; font: 1.15rem/1.1 var(--f-pulp); }
.aux-facts { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; margin: 0 0 8px; text-align: left; }
.aux-facts dt { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #6b3a4c; align-self: center; }
.aux-facts dd { margin: 0; }
.aux-checks { list-style: none; margin: 0 0 8px; padding: 6px 0 0; border-top: 1px dashed rgba(107, 58, 76, .5); text-align: left; }
.aux-checks b { color: #2f7d32; }
.aux-card-sig { margin: 0; font-size: 10px; color: #6b3a4c; }
.aux-card-sig i { font: 13px var(--f-script); color: #2a2a6a; }
.aux-log { margin-top: 14px; }
.aux-card dd a { color: inherit; text-decoration-color: rgba(155, 29, 74, .45); }
.aux-card dd a:hover { color: #9b1d4a; }
#release { scroll-margin-top: 20px; }
/* one-slide members: name, intro and her papers (card + Form 18-B release) on the left; her picture on the right, staying in view */
.aux-single { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head photo" "papers photo"; grid-template-rows: auto 1fr; gap: 6px 44px; align-items: start; margin: 0 0 40px; }
.aux-single > .aux-top { grid-area: head; }
.aux-top .aux-head { padding-right: 0; min-height: 0; margin-bottom: 8px; }
.aux-figure { grid-area: photo; position: sticky; top: 16px; }
.aux-figure .photo-frame img { max-height: calc(82vh - 52px); }
.aux-figure figcaption { margin-top: 14px; }
.aux-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 10px; }
.aux-actions .btn { font-size: 11px; padding: 7px 10px 6px; box-shadow: 2px 2px 0 var(--ink); }
.aux-vitals { margin: 0 0 12px; text-align: left; }   /* above her picture: rate at a glance */
.aux-vitals .vitals { margin: 0; }
/* compact Vital signs: the reading shares the hearts' line (one line once rated) */
.vitals.vitals-compact { grid-template-columns: auto auto 1fr; padding: 7px 12px; row-gap: 4px; }
.vitals-compact .vitals-foot { grid-column: 3; grid-row: 1; }
.vitals-compact .vitals-read { font-size: 12px; }
.slide-vitals { margin: 0; }   /* the slide page: on the Newer / Older row over the Darkroom Report (wide), above the report (narrow) */
.slide-vitals .vitals { margin: 0; }
/* Vital signs: one line. VITAL SIGNS ♥♥♥♥♥ ◀ CLICK A HEART TO RATE …… no pulse yet, measured against its own box (.vitals-box):
   it shortens itself to stay on one line (hint: "Click to rate", then "Rate"; label "Vitals"; the reading drops its count and
   "clear mine" becomes ✕), and only below ~330 px goes back to the stacked layout (hint under the hearts, pointing up) */
.vitals-box { container: vitals / inline-size; }
.vl-short, .vh-m, .vh-s { display: none; }
@container vitals (min-width: 330px) {
  .vitals.vitals-inline { grid-template-columns: max-content max-content minmax(0, 1fr) max-content; }   /* .vitals.… : the base .vitals rule comes later in this file */
  .vitals-inline .vitals-hint { grid-column: 3; grid-row: 1; justify-self: start; white-space: nowrap; }
  .vitals-inline .vitals-hint::before { content: '◀ '; }
  .vitals-inline .vitals-foot { grid-column: 4; grid-row: 1; flex-wrap: nowrap; white-space: nowrap; }
}
@container vitals (max-width: 329px) { .vitals-compact .vitals-foot { grid-column: 1 / -1; grid-row: auto; } }   /* stacked: the reading on its own line */
@container vitals (min-width: 330px) and (max-width: 560px) {
  .vitals-inline .vr-n { display: none; }                 /* 4.0 · yours: 4 */
  .vitals-inline .vc-l { display: none; }                 /* ✕ */
}
@container vitals (min-width: 330px) and (max-width: 500px) {
  .vitals-inline .vh-l { display: none; }
  .vitals-inline .vh-m { display: inline; }               /* ◀ Click to rate */
}
@container vitals (min-width: 330px) and (max-width: 440px) {
  .vitals-inline .vh-m { display: none; }
  .vitals-inline .vh-s { display: inline; }               /* ◀ Rate */
  .vitals-inline .vl-long { display: none; }
  .vitals-inline .vl-short { display: inline; }           /* Vitals */
  .vitals.vitals-inline { column-gap: 8px; padding-left: 9px; padding-right: 9px; }
}
.tray-btn .tl-short { display: none; }
@media (max-width: 480px) {
  .tray-btn .tl-long { display: none; }
  .tray-btn .tl-short { display: inline; }
  .aux-actions { gap: 6px; }
  .aux-actions .btn { padding: 6px 7px 5px; letter-spacing: .06em; }
}
.aux-side { grid-area: papers; display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; padding-top: 14px; }
.aux-side .aux-card { position: relative; right: auto; top: auto; flex: none; }
.aux-side .aux-release { flex: 1 1 300px; }
@media (max-width: 900px) {
  .aux-single { grid-template-columns: 1fr; grid-template-areas: "head" "photo" "papers"; }
  .aux-figure { position: static; }
  .aux-side { justify-content: center; }
}
.aux-release { position: relative; width: 100%; max-width: 360px; padding: 18px 20px 14px; background: #fff7e3; color: var(--ink); box-shadow: var(--shadow); transform: rotate(-1.2deg);
  background-image: repeating-linear-gradient(transparent 0 23px, rgba(200, 38, 58, .12) 23px 24px); border-top: 6px solid #d23a73; font: 13px/1.55 var(--f-body); }
.aux-release a { color: #8a1426; }
.aux-release-form { margin: 0 0 8px; font: 11px var(--f-type); letter-spacing: .16em; text-transform: uppercase; color: #9b1d4a; }
.aux-release-body { margin: 0 0 10px; }
.aux-release-sig { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 8px; }
.aux-release-sig dt { font: 10px/1.9 var(--f-type); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.aux-release-sig dd { margin: 0; }
.aux-release-sig .sig { font: 1.35rem/1.1 var(--f-script); color: #2a2a6a; }
.aux-release-fine { margin: 0; padding-right: 4px; font: 10px var(--f-type); color: var(--ink-2); }
.stamp-release { position: absolute; right: 10px; top: -12px; font-size: 14px; transform: rotate(-10deg); color: #2f7d32; border-color: #2f7d32; mix-blend-mode: multiply; }
/* Research: the Ladies' Auxiliary section; the Membership Register (/auxiliary) */
a.stat-tile { text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
a.stat-tile:hover { border-color: #f2a7c0; transform: translateY(-2px); }
.aux-report-intro { color: var(--muted); max-width: 70ch; margin: -4px 0 18px; }
.aux-report-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.aux-report-h { font: 1.1rem/1.2 var(--f-pulp); color: var(--paper); margin: 0 0 12px; }
.aux-report-h small { font: 12px var(--f-type); color: var(--muted); margin-left: 6px; }
.aux-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.aux-mini { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 8px 10px; background: linear-gradient(160deg, #f9dbe4, #f2c3d2); color: var(--ink); border-radius: 8px; text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); transition: transform .2s; }
.aux-mini:nth-child(odd) { transform: rotate(-1.5deg); }
.aux-mini:nth-child(even) { transform: rotate(1.2deg); }
.aux-mini:hover { transform: rotate(0) translateY(-3px); color: var(--ink); }
.aux-mini-photo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid #9b1d4a; background: #fff; margin-bottom: 4px; }
.aux-mini-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.aux-mini b { font: 11px var(--f-type); letter-spacing: .1em; color: #9b1d4a; }
.aux-mini-name { font: .95rem/1.1 var(--f-pulp); }
.aux-mini small { font: 10px var(--f-type); color: #6b3a4c; }
.aux-ledger { overflow-x: auto; background: #fff7e3; color: var(--ink); box-shadow: var(--shadow); border-left: 8px solid #d23a73; background-image: repeating-linear-gradient(transparent 0 43px, rgba(200, 38, 58, .12) 43px 44px); }
.aux-ledger table { width: 100%; border-collapse: collapse; font: 14px var(--f-body); }
.aux-ledger th { text-align: left; font: 11px var(--f-type); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); padding: 12px 12px 8px; border-bottom: 2px solid rgba(200, 38, 58, .35); }
.aux-ledger td { padding: 6px 12px; height: 32px; white-space: nowrap; }
.aux-ledger a { color: var(--ink); text-decoration-color: rgba(138, 20, 38, .4); }
.aux-ledger a:hover { color: #8a1446; }
.aux-no a { font: 13px var(--f-type); letter-spacing: .06em; color: #8a1446; }
.aux-who a { display: inline-flex; align-items: center; gap: 10px; font: 1rem var(--f-pulp); text-decoration: none; }
.aux-dot { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 2px solid #9b1d4a; background: #fff; flex: none; }
.aux-dot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.aux-pages { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 20px 0; color: var(--muted); }
@media (max-width: 800px) { .aux-report-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .aux-ledger th:nth-child(n+4), .aux-ledger td:nth-child(n+4) { display: none; } .aux-ledger td, .aux-ledger th { padding-left: 8px; padding-right: 8px; white-space: normal; } }
.model-aux-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 3px 0 1px; }
.stamp-onfile { display: inline-block; flex: none; white-space: nowrap; padding: 1px 5px; font: 700 10px/1.4 var(--f-type); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: #2f7d32 !important; border: 2px double #2f7d32; border-radius: 3px; transform: rotate(-7deg); opacity: .9; transition: transform .2s; }
.stamp-onfile:hover { transform: rotate(0) scale(1.08); opacity: 1; }
.model-aux { display: inline-block; margin: 0; padding: 1px 7px; font: 10px/1.6 var(--f-type); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; text-decoration: none; color: #8a1446 !important; background: #f7d3de; border: 1px solid #d99ab0; border-radius: 3px; }
.model-aux:hover { background: #fbe3ea; border-color: #8a1446; }
@media (max-width: 360px) { .model-aux { white-space: normal; letter-spacing: .06em; max-width: 100%; } }
.stamp-opened small { display: block; font-size: 10px; letter-spacing: .16em; margin-top: 4px; }
.stamp-opened .stamp-when { display: block; margin-top: 6px; padding-top: 5px; border-top: 1px solid currentColor; font-size: 11px; letter-spacing: .1em; white-space: nowrap; }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-block; font: 15px/1 var(--f-type); text-transform: uppercase; letter-spacing: .12em; text-decoration: none; cursor: pointer;
  padding: 13px 20px 12px; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 3px;
  box-shadow: 4px 4px 0 var(--ink); transition: transform .12s, box-shadow .12s;
}
.btn:hover { color: var(--ink); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-red { background: var(--red); color: #fff4e6; }
.btn-red:hover { background: var(--red-hi); color: #fff; }
.btn-small { font-size: 12px; padding: 9px 12px 8px; box-shadow: 3px 3px 0 var(--ink); }

/* Rubber stamps */
.stamp {
  display: inline-block; font: 15px/1.05 var(--f-type); text-transform: uppercase; letter-spacing: .12em; text-align: center;
  color: var(--red); border: 3px double var(--red); padding: 6px 10px; border-radius: 4px; transform: rotate(-9deg);
  opacity: .88; mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.65) 61%, #000 75%);
}
.stamp-red { color: var(--red-hi); border-color: var(--red-hi); mix-blend-mode: normal; background: rgba(21, 16, 29, .35); }

/* ------------------------------------------------------------ hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: start; margin-top: 4px; }   /* poster from the top (not centred on the taller photo) */
.hero-side { justify-self: center; max-width: 100%; }
.poster {
  position: relative; background: var(--paper); color: var(--ink); padding: clamp(24px, 4vw, 48px);
  box-shadow: var(--shadow); transform: rotate(-1.2deg);
  background-image:
    radial-gradient(rgba(200, 38, 58, .13) 1.2px, transparent 1.4px),
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 40%);
  background-size: 9px 9px, auto;
}
.poster::before { content: ''; position: absolute; inset: 10px; border: 2px solid var(--ink); pointer-events: none; }
.poster .poster-kicker { color: var(--red); }
.hero-title { font-size: clamp(2.6rem, 6.5vw, 5.4rem); color: var(--ink); }
.hero-title span { color: var(--red); display: inline-block; transform: skew(-6deg); text-shadow: 3px 3px 0 var(--mustard); }
.poster .poster-tag { color: var(--ink-2); }
.hero-harvest { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 10px 0 0; }
.hero-counts { list-style: none; padding: 0; margin: 22px 0; display: flex; gap: 22px; flex-wrap: wrap; }
.hero-counts li { display: flex; flex-direction: column; }
.hero-counts b { font: 2.3rem/1 var(--f-pulp); color: var(--red); }
.hero-counts span { font: 12px/1.3 var(--f-type); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 14px; }
.poster .fine { color: var(--ink-2); }
/* the home poster, compact: smaller title and counters, tighter spacing, so it stands about as tall as the photo beside it */
.hero .poster { padding: clamp(20px, 2.6vw, 34px) clamp(22px, 3vw, 40px); }
.hero .poster-kicker { font-size: 12px; margin-bottom: 4px; }
.hero .hero-title { font-size: clamp(2.2rem, 4.3vw, 3.9rem); line-height: 1; }
.hero .poster-tag { font-size: 1.25rem; line-height: 1.25; margin: 10px 0 4px; }
.hero .hero-harvest { font-size: 12px; line-height: 1.45; margin-top: 6px; }
.hero .hero-counts { margin: 14px 0 12px; gap: 10px 20px; }
.hero .hero-counts b { font-size: 1.75rem; }
.hero .hero-counts { gap: 10px 16px; }
.hero .hero-counts span { font-size: 10.5px; letter-spacing: .06em; max-width: 12em; }   /* long labels wrap to two short lines, so all four fit one row */
.hero .hero-actions { gap: 10px; margin: 4px 0 10px; }
.hero .hero-actions .btn { padding: 10px 16px; font-size: 13px; letter-spacing: .08em; }
.hero .fine { font-size: 11px; line-height: 1.4; margin: 0; }
.poster-small { max-width: 640px; margin: 40px auto; }

.featured { margin: 0; justify-self: center; max-width: 100%; }
.photo-frame {
  position: relative; display: block; background: #fbf6ea; padding: 14px 14px 16px; box-shadow: var(--shadow);
  transform: rotate(2deg); transition: transform .3s;
}
.photo-frame:hover { transform: rotate(0) scale(1.01); }
.photo-frame img { max-height: 72vh; width: auto; margin: 0 auto; filter: sepia(.08) contrast(1.03); }
.photo-frame-flat { transform: none; }
.stamp-photo { position: absolute; right: -18px; top: 26px; font-size: 16px; transform: rotate(12deg); }
.featured figcaption { text-align: center; margin-top: 14px; color: var(--muted); }

/* ------------------------------------------------------------ polaroids */
.polaroids { display: flex; gap: 26px; overflow-x: auto; padding: 22px 6px 30px; scroll-snap-type: x proximity; scrollbar-color: var(--red) var(--night-2); }
.polaroid {
  flex: 0 0 auto; position: relative; background: #fbf6ea; padding: 12px 12px 44px; box-shadow: var(--shadow);
  transform: rotate(var(--tilt, 0)); transition: transform .25s; scroll-snap-align: start; text-decoration: none;
}
.polaroid:hover { transform: rotate(0) translateY(-6px) scale(1.03); z-index: 2; }
.polaroid img { height: 230px; width: auto; max-width: 340px; object-fit: cover; }
.polaroid-caption { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font: 1.35rem/1 var(--f-script); color: #2a2a6a; }
.tape { position: absolute; top: -12px; left: 50%; width: 90px; height: 26px; margin-left: -45px; background: rgba(240, 180, 60, .55); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0,0,0,.2); }

/* ------------------------------------------------------------ folders */
.folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px 24px; }
.folder { position: relative; display: block; text-decoration: none; color: var(--ink); padding-top: 26px; }
.folder:hover, .folder:focus-visible { transform: translateY(-6px); color: var(--ink); outline: none; }   /* the lift; the swing (folder-pick, below) ends level, since a lasting tilt blurred the text */
.folder-tab {
  position: absolute; top: 0; left: 18px; background: var(--manila); padding: 6px 11px 8px; border-radius: 8px 8px 0 0;
  font: 12px/1 var(--f-type); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
}
.folder-body {
  display: flex; flex-direction: column; position: relative; background: var(--manila); padding: 16px; min-height: 250px;
  border-radius: 2px 8px 8px 8px; box-shadow: var(--shadow);
  background-image: linear-gradient(170deg, rgba(255,255,255,.25), transparent 50%);
}
.folder-photo { position: relative; display: block; background: #fbf6ea; padding: 7px; transform: rotate(-2.5deg); box-shadow: 0 4px 10px rgba(0,0,0,.3); margin-bottom: 14px; }
.folder-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 30%; }   /* 3:2, the shape an uploaded cover should be; a portrait slide is cropped a little above centre so faces stay in */
.clip-icon { position: absolute; top: -14px; right: 22px; width: 16px; height: 42px; border: 3px solid #9aa0a6; border-radius: 10px; }
/* a loose cover: prints (with their own shadows, transparent between them) lying on the folder, hanging over its edges a little */
.folder-loose { position: relative; z-index: 1; display: block; margin: -8px -24px 2px; }   /* clear of the folder tab above */
.folder-loose img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
/* an uploaded or collage cover (cropped to any shape in the collage maker) shows whole, in its own shape */
.folder-own img, .folder-loose img { aspect-ratio: auto; object-fit: fill; }
.folder-title { font: 1.5rem/1.1 var(--f-pulp); }
.folder-sub { font: 1.2rem/1.2 var(--f-script); color: var(--red); margin-top: 4px; }
.folder-meta { margin-top: auto; padding-top: 10px; font: 13px var(--f-type); color: var(--ink-2); }
/* the folder's stamp: a cream slip stamped in red, clipped to the top corner and hanging a little off the edge (above the cover picture,
   whose loose prints sit at z-index 1); drawn normally rather than multiplied, so it stays clear over dark photos and the page.
   Where it sits, its tilt and its size come from Site settings → Folder stamp (folder_stamp_css() sets the --fs-* variables). */
.stamp-folder { position: absolute; z-index: var(--fs-z, 0); right: var(--fs-right, -14px); top: var(--fs-top, -22px); font-size: var(--fs-size, 10px); letter-spacing: .06em;
  transform: rotate(var(--fs-rot, 7deg)); padding: 8px 9px 7px; color: #b3122a; border: 0; border-radius: 2px; opacity: 1; mix-blend-mode: normal;
  -webkit-mask-image: none; mask-image: none; background: linear-gradient(165deg, #f9f0da, #ecdfbf);
  /* Folder stamp → Faded (0 = fresh, 100 = old and dull): less colour, a touch darker, warmer, for the slip, its ink and what holds it */
  filter: saturate(calc(1 - var(--fs-fade, 40) * .007)) brightness(calc(1 - var(--fs-fade, 40) * .0022)) sepia(calc(var(--fs-fade, 40) * .004)) contrast(calc(1 - var(--fs-fade, 40) * .0015));
  box-shadow: inset 0 0 0 3px #f4e8cc, inset 0 0 0 4px rgba(179,18,42,.85), inset 0 0 0 6px #f2e6c9, inset 0 0 0 7px rgba(179,18,42,.85), 0 4px 10px rgba(0,0,0,.45); }
/* the fastener holding the slip (Folder stamp → Fastener: .fs-clip / .fs-tape / .fs-staple / .fs-pin / .fs-none): drawn upright, its centre at
   --fs-cx % across and --fs-cy % down the slip, turned --fs-crot and sized --fs-csize times (the default: a paper clip on the left side) */
.stamp-folder::before, .stamp-folder::after { content: ''; position: absolute; transform: rotate(var(--fs-crot, 90deg)) scale(var(--fs-csize, 1)); }
.fs-clip::before, .fs-clip::after { border: 2px solid #c3c9cf; border-radius: 7px; box-shadow: 1px 1px 1px rgba(0,0,0,.35); }
.fs-clip::before { width: 9px; height: 21px; left: calc(var(--fs-cx, -2) * 1% - 6.5px); top: calc(var(--fs-cy, 50) * 1% - 12.5px); transform-origin: 6.5px 12.5px; }
.fs-clip::after { width: 3px; height: 13px; left: calc(var(--fs-cx, -2) * 1% - 3.5px); top: calc(var(--fs-cy, 50) * 1% - 8.5px); transform-origin: 3.5px 8.5px; border-radius: 4px; border-color: #d5dadf; }
.fs-tape::before { width: 46px; height: 15px; left: calc(var(--fs-cx, -2) * 1% - 23px); top: calc(var(--fs-cy, 50) * 1% - 7.5px); transform-origin: 23px 7.5px;
  background: rgba(255,250,235,.55); box-shadow: 0 1px 2px rgba(0,0,0,.15); border-left: 1px dashed rgba(255,255,255,.45); border-right: 1px dashed rgba(255,255,255,.45); }
.fs-staple::before { width: 18px; height: 3px; left: calc(var(--fs-cx, -2) * 1% - 9px); top: calc(var(--fs-cy, 50) * 1% - 1.5px); transform-origin: 9px 1.5px;
  background: linear-gradient(#eef0f2, #8d949b); border-radius: 1px; box-shadow: 0 1px 1px rgba(0,0,0,.5); }
.fs-pin::before { width: 13px; height: 13px; left: calc(var(--fs-cx, -2) * 1% - 6.5px); top: calc(var(--fs-cy, 50) * 1% - 6.5px); transform-origin: 6.5px 6.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ff9a9a, #c4182c 55%, #6e0b16); box-shadow: 2px 3px 3px rgba(0,0,0,.45); }
.fs-tape::after, .fs-staple::after, .fs-pin::after, .fs-none::before, .fs-none::after { display: none; }
.folder-photo { z-index: 1; }   /* a framed cover, like loose prints, sits above the slip unless Folder stamp puts the slip on top (--fs-z: 3) */

/* ------------------------------------------------------------ staff badges */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 22px; }
.badge {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none;
  background: #fbf8f0; color: var(--ink); border-radius: 12px; padding: 34px 14px 26px; box-shadow: var(--shadow); overflow: hidden;
  transition: transform .2s;
}
.badge::before { content: ''; position: absolute; top: 10px; width: 36px; height: 8px; border-radius: 4px; background: var(--night); }
.badge:hover { transform: rotate(-2deg) translateY(-4px); color: var(--ink); }
.badge-top { font: 11px var(--f-type); letter-spacing: .15em; text-transform: uppercase; color: var(--red); }
.badge-photo { width: 100%; max-width: 176px; aspect-ratio: 1; height: auto; border-radius: 50%; overflow: hidden; margin: 12px 0; border: 4px solid var(--red); background: var(--paper-2); display: grid; place-items: center; }
.badge-photo img { width: 100%; height: 100%; object-fit: cover; }
.silhouette { font: 2.2rem var(--f-pulp); color: var(--red); }
.badge-name { font: 1.2rem/1.1 var(--f-pulp); }
.badge-title { font: 12px/1.35 var(--f-type); color: var(--ink-2); margin-top: 4px; }
.badge-role { margin-top: 6px; font: 10px var(--f-type); letter-spacing: .18em; text-transform: uppercase; color: #fff; background: var(--red); padding: 2px 8px; border-radius: 3px; }
.badge-arm { margin-top: 4px; font: 10px var(--f-type); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.badge-count { margin-top: 8px; font: 1.2rem var(--f-script); color: #2a2a6a; }
.badge-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 9px); opacity: .8; }

.expedition-log { list-style: none; padding: 0; margin: 14px 0 6px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; }
.expedition-log b { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; font-weight: 400; }
.staff-list { display: grid; gap: 24px; }
.field-assignments { font: 13px/1.6 var(--f-type); margin-top: 10px; }
.field-assignments small { opacity: .7; }
.staff-card { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.personnel-file { background: var(--paper); color: var(--ink); padding: 24px 28px; box-shadow: var(--shadow); background-image: repeating-linear-gradient(transparent 0 27px, rgba(80, 120, 190, .18) 27px 28px); }
.personnel-file h2 { font-size: 2rem; margin-bottom: 10px; }
.staff-head { display: grid; grid-template-columns: 220px 1fr; gap: 30px; max-width: none; align-items: center; }

/* ------------------------------------------------------------ requisition bar */
.requisition {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 22px; padding: 12px 16px;
  background: #fff7e3; color: var(--ink); box-shadow: var(--shadow); border-left: 8px solid var(--red);
  background-image: repeating-linear-gradient(transparent 0 23px, rgba(200, 38, 58, .12) 23px 24px);
}
.req-title { font: 1.4rem/1 var(--f-script); color: var(--red); }
.page-head .cs-sub { max-width: none; margin: -4px 0 6px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--mint) !important; }
#slip { scroll-margin-top: 14px; }   /* page links land just above the slip */
.requisition input[type=search], .requisition select {
  font: 15px var(--f-body); color: var(--ink); background: transparent; border: 0; border-bottom: 2px dotted var(--ink-2); padding: 6px 4px; border-radius: 0;
}
.req-search { flex: 1 1 26em; max-width: 34em; min-width: min(100%, 14em); display: flex; }   /* wide enough for the whole hint on desktops */
.requisition input[type=search] { width: 100%; }
.req-dice { margin-left: 14px; vertical-align: -2px; font-size: 1.35rem; line-height: 1; text-decoration: none; display: inline-block; transition: transform .3s ease; }   /* 🎲 Reshuffle, beside the Order box */
.req-dice:hover, .req-dice:focus-visible { transform: rotate(-25deg) scale(1.15); }
@media (prefers-reduced-motion: reduce) { .req-dice { transition: none; } }
.req-sort { display: flex; align-items: center; gap: 8px; font: 13px var(--f-type); text-transform: uppercase; letter-spacing: .08em; }
.req-count { margin-left: auto; font: 14px var(--f-type); }
.req-count b { font: 1.3rem var(--f-pulp); color: var(--red); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.chip { display: inline-flex; gap: 6px; align-items: center; max-width: 100%; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 30px; text-decoration: none; color: var(--ink); background: var(--mustard); font: 13px var(--f-type); }
.chip small { flex: none; }
.chip .chip-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* one line; a very long value ends in … (the full text is in the banner below) */
.chip small { opacity: .7; }
.chip:hover { background: var(--red); color: #fff; }
.chip-tag { background: transparent; color: inherit; border-color: currentColor; }

/* ------------------------------------------------------------ Light Table (justified rows) */
.wall { display: flex; flex-wrap: wrap; gap: 10px; }
.wall::after { content: ''; flex-grow: 999999; order: 9998; }
.tile {
  position: relative; display: block; overflow: hidden; background: var(--night-3);
  flex-grow: calc(var(--w) / var(--h) * 100);
  width: calc(var(--row) * var(--w) / var(--h));
  max-width: 100%;
  aspect-ratio: var(--w) / var(--h);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 6px 14px rgba(0,0,0,.35);
  animation: tile-in .5s both;
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, filter .5s; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.04); filter: saturate(1.15); }
.toe-tag {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: flex; flex-direction: column;
  background: #f6ecd2; color: var(--ink); padding: 6px 10px 7px 20px; font: 12px/1.25 var(--f-type);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  transform: translateY(calc(100% + 14px)) rotate(-3deg); transition: transform .25s cubic-bezier(.3, 1.4, .6, 1);
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
.toe-tag::before { content: ''; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--night); }
.toe-tag b { color: var(--red); letter-spacing: .05em; }
.toe-tag span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toe-tag i { font-style: normal; color: var(--ink-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile:hover .toe-tag, .tile:focus-visible .toe-tag { transform: translateY(0) rotate(-3deg); }
@keyframes tile-in { from { opacity: 0; transform: translateY(12px); } }
.wall-more {
  order: 9999; flex-basis: 100%; text-align: center; padding: 18px; margin-top: 12px; font: 15px var(--f-type);
  text-transform: uppercase; letter-spacing: .15em; border: 2px dashed rgba(241, 231, 208, .3); color: var(--muted); text-decoration: none;
}
.wall-more:hover { border-color: var(--mustard); color: var(--mustard); }
.wall-more.loading { opacity: .6; pointer-events: none; }

.empty-jar { text-align: center; padding: 70px 20px; border: 2px dashed rgba(241, 231, 208, .25); border-radius: 12px; }
.empty-jar .pulp { font-size: 2.4rem; color: var(--paper); }
.empty-jar .typed { color: var(--muted); }

/* ------------------------------------------------------------ slide page + lab report */
.slide-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); grid-template-areas: "nav vitals" "fig side"; gap: 14px 34px; align-items: start; }
.slide > .slide-nav { grid-area: nav; margin: 0; align-self: center; }
.slide > .slide-vitals { grid-area: vitals; align-self: center; }
.slide > .slide-figure { grid-area: fig; }
.slide > .slide-side { grid-area: side; }
.slide-figure { margin: 0; }
.slide-figure .photo-frame img { max-height: 85vh; }
/* the slide page: the picture in a 35 mm slide mount (the mount hugs the picture, so the border is even all round) */
.slide-figure { text-align: center; }
.slide-figure .photo-frame { display: inline-block; vertical-align: top; max-width: 100%; padding: 26px; border-radius: 9px;
  background: linear-gradient(160deg, #f8f4ea, #ebe4d3); box-shadow: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(0, 0, 0, .08); }
.slide-figure .photo-frame img { display: block; max-width: 100%; height: auto; max-height: calc(85vh - 52px); border-radius: 3px; outline: 1px solid rgba(40, 30, 20, .45); box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); }
.mount-text { position: absolute; left: 0; right: 0; text-align: center; font: 9px/1 var(--f-type); letter-spacing: .28em; text-transform: uppercase; color: #8f8574; pointer-events: none; white-space: nowrap; overflow: hidden; }
.mount-top { top: 9px; }
.mount-bottom { bottom: 9px; }
@media (max-width: 560px) { .mount-rf { display: none; } }   /* too long for a phone's mount (the lab report has it) */

.lab-report {
  background: var(--paper); color: var(--ink); padding: 22px 24px 18px; box-shadow: var(--shadow); position: relative;
  background-image: repeating-linear-gradient(transparent 0 25px, rgba(80, 120, 190, .16) 25px 26px), linear-gradient(90deg, transparent 38px, rgba(200, 38, 58, .35) 38px 39px, transparent 39px);
  font-size: 14.5px;
}
.lab-report a { color: #8a1426; }
.lab-report a:hover { color: var(--red-hi); }
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 12px; }
.form-no { margin: 0; font: 12px var(--f-type); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.report-case { margin: 2px 0 0; font: 2rem/1 var(--f-pulp); color: var(--red); width: 100%; }
.report-title { font-size: 1.5rem; margin: 0 0 10px; }
.report-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0 0 12px; }
.report-dl dt { font: 12px/1.9 var(--f-type); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.report-dl dd { margin: 0; line-height: 1.55; min-width: 0; }
.report-dl-tight dd { font-size: 13.5px; }
.report-dl dd small { color: var(--ink-2); font-size: 12px; }
.model-release { display: block; font: 11px/1.5 var(--f-type); letter-spacing: .04em; }
.report-sub { font: 13px var(--f-type); text-transform: uppercase; letter-spacing: .16em; margin: 16px 0 6px; color: var(--red); border-top: 1px dashed var(--ink-2); padding-top: 10px; }
.report-notes { border-left: 3px solid var(--mustard); padding-left: 10px; }
.report-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.report-foot { margin-top: 14px; font: 12.5px var(--f-type); color: var(--ink-2); }

.vitals { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 12px; margin: 12px 0 4px; padding: 10px 12px; background: #1d1712; color: #9dffb0; border-radius: 6px; font: 13px var(--f-type); box-shadow: inset 0 0 18px rgba(0, 255, 90, .15); }
.vitals-label { text-transform: uppercase; letter-spacing: .12em; color: #6de889; }
.vitals-beats { display: inline-flex; gap: 2px; }
.vitals-beats button { font-size: 22px; line-height: 1; background: none; border: 0; cursor: pointer; color: #3b5942; padding: 2px; transition: transform .15s, color .15s; }
.vitals-beats button.on, .vitals-beats:hover button { color: #ff5d7a; text-shadow: 0 0 8px rgba(255, 93, 122, .8); }
.vitals-beats button:hover ~ button { color: #3b5942; text-shadow: none; }
.vitals-beats button:hover { transform: scale(1.25); }
.vitals-beats.beat button.on { animation: beat .5s 2; }
@keyframes beat { 40% { transform: scale(1.35); } }
/* Fixed layout: label + hearts on top, the hint right under the hearts (its ▲ points at them), the reading at the bottom right */
.vitals-label { grid-column: 1; grid-row: 1; }
.vitals-beats { grid-column: 2; grid-row: 1; justify-self: start; }
.vitals-hint { grid-column: 2; grid-row: 2; justify-self: start; }
.vitals-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 10px; }
/* Until you've rated a slide: a glowing monitor hint and a slow heartbeat sweep across the hearts ([data-mine] = rated; lab.js sets it) */
.vitals-hint { font: 11px var(--f-type); letter-spacing: .08em; text-transform: uppercase; color: #c9ffd4; padding: 3px 8px; border: 1px solid rgba(157, 255, 176, .55); border-radius: 3px; text-shadow: 0 0 6px rgba(157, 255, 176, .9); box-shadow: 0 0 10px rgba(0, 255, 90, .25), inset 0 0 8px rgba(0, 255, 90, .15); animation: vitals-hint 1.6s ease-in-out infinite; }
.vitals-hint::before { content: '▲ '; }   /* points up at the hearts; the one-line layout points it left */
.vitals-hint .vh-touch { display: none; }
@media (hover: none) { .vitals-hint .vh-mouse { display: none; } .vitals-hint .vh-touch { display: inline; } }
.vitals[data-mine] .vitals-hint { display: none; }
.vitals:not([data-mine]) .vitals-beats:not(:hover) button:not(.on) { animation: vitals-sweep 2.4s ease-in-out infinite; }
.vitals:not([data-mine]) .vitals-beats button:nth-child(2) { animation-delay: .15s; }
.vitals:not([data-mine]) .vitals-beats button:nth-child(3) { animation-delay: .3s; }
.vitals:not([data-mine]) .vitals-beats button:nth-child(4) { animation-delay: .45s; }
.vitals:not([data-mine]) .vitals-beats button:nth-child(5) { animation-delay: .6s; }
@keyframes vitals-hint { 50% { box-shadow: 0 0 18px rgba(0, 255, 90, .5), inset 0 0 10px rgba(0, 255, 90, .3); color: #fff; } }
@keyframes vitals-sweep { 0%, 70%, 100% { color: #3b5942; text-shadow: none; } 20% { color: #ff8da1; text-shadow: 0 0 10px rgba(255, 93, 122, .9); } }
@media (prefers-reduced-motion: reduce) { .vitals-hint, .vitals:not([data-mine]) .vitals-beats button { animation: none !important; } }

.recipe { margin-top: 12px; }
.recipe summary { cursor: pointer; font: 13px var(--f-type); text-transform: uppercase; letter-spacing: .14em; color: var(--red); }
.recipe pre { white-space: pre-wrap; word-break: break-word; font: 13px/1.5 var(--f-body); background: rgba(255,255,255,.5); padding: 10px; border: 1px dashed var(--ink-2); max-height: 260px; overflow: auto; }

/* ------------------------------------------------------------ lightbox */
.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px minmax(320px, 400px); align-items: center; background: rgba(10, 7, 14, .96); }
.lightbox[hidden] { display: none; }
.lb-stage { margin: 0; height: 100vh; display: grid; place-items: center; padding: 58px 0 24px; position: relative; }   /* the top row (First / Last / … / Vital signs) sits above the picture */
.lb-vitals { margin: 0 0 12px; padding-right: 44px; }   /* the viewer: Vital signs above the Darkroom Report (clear of the ✕ close button) */
.lb-vitals .vitals { margin: 0; }
.lb-stage img { max-height: calc(100vh - 114px); max-width: calc(100% - 36px); width: auto; object-fit: contain; border-radius: 3px; transition: opacity .2s;
  box-shadow: 0 0 0 1px rgba(40, 30, 20, .45), 0 0 0 16px #f3eee2, 0 0 0 17px rgba(0, 0, 0, .12), 0 20px 50px rgba(0,0,0,.7); }
.lb-stage.loading img { opacity: .25; }
.lb-spinner { position: absolute; width: 54px; height: 54px; border-radius: 50%; border: 4px solid rgba(255,255,255,.15); border-top-color: var(--neon); animation: spin .8s linear infinite; display: none; }
.lb-stage.loading .lb-spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.lb-panel { height: 100vh; overflow-y: auto; padding: 18px 18px 30px 6px; }
.lb-panel .lab-report { transform: rotate(.6deg); }
.lb-nav { background: none; border: 0; color: var(--paper); font: 64px/1 var(--f-pulp); cursor: pointer; height: 100%; opacity: .6; }
.lb-nav:hover { opacity: 1; color: var(--neon-soft); text-shadow: 0 0 14px var(--neon); }
.lb-nav:disabled { visibility: hidden; }
.lb-close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--paper); background: var(--red); color: #fff; font-size: 20px; cursor: pointer; box-shadow: 3px 3px 0 #000; }
body.lb-open { overflow: hidden; }

/* ------------------------------------------------------------ research charts */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-tile { background: var(--night-2); border: 2px solid rgba(143, 227, 200, .35); border-radius: 8px; padding: 16px; box-shadow: inset 0 0 30px rgba(143, 227, 200, .06); }
.stat-tile b { display: block; font: 2.2rem/1 var(--f-pulp); color: var(--paper); }
.stat-tile span { font: 12px var(--f-type); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 26px; margin-bottom: 26px; }
.chart {
  margin: 0; background: var(--paper); color: var(--ink); padding: 18px 20px 16px; box-shadow: var(--shadow);
  background-image: linear-gradient(rgba(31, 111, 120, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 111, 120, .09) 1px, transparent 1px);
  background-size: 16px 16px;
}
.chart-wide { grid-column: 1 / -1; }
.chart figcaption h3 { margin: 0; font: 1.4rem/1.1 var(--f-pulp); }
.chart figcaption p { margin: 4px 0 0; font: 13px var(--f-type); color: var(--ink-2); }
.hbars { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.hbar > a, .hbar > span { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; gap: 10px; align-items: center; padding: 4px 6px; text-decoration: none; color: var(--ink); border-radius: 4px; }
.hbar > a:hover, .hbar > span:hover { background: rgba(29, 23, 18, .08); }
.hbar-label { font-size: 13.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 14px; }
.hbar-fill { display: block; height: 100%; width: var(--v); min-width: 3px; background: var(--red); border-radius: 0 4px 4px 0; transition: background .15s; }
.hbar > a:hover .hbar-fill { background: #8a1426; }
.hbar.is-other .hbar-fill { background: #9c8f7a; }
.hbar-val { font: 13px var(--f-type); min-width: 3ch; text-align: right; }
.cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 72px)); justify-content: start; gap: 2px; align-items: end; height: 170px; margin-top: 16px; padding-bottom: 26px; border-bottom: 1px solid var(--ink-2); position: relative; }
.col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; outline-offset: 1px; }
.col-fill { display: block; height: var(--v); min-height: 2px; background: var(--red); border-radius: 4px 4px 0 0; }
.col:hover .col-fill, .col:focus .col-fill { background: #8a1426; }
.col-label { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); font: 11px var(--f-type); white-space: nowrap; color: var(--ink-2); }
.cols-max { margin: 6px 0 0; font: 12px var(--f-type); color: var(--ink-2); }
.chart-tip { position: fixed; z-index: 95; pointer-events: none; background: var(--ink); color: var(--paper); font: 13px var(--f-type); padding: 6px 10px; border-radius: 4px; box-shadow: 0 6px 16px rgba(0,0,0,.4); transform: translate(-50%, calc(-100% - 12px)); max-width: 320px; }

/* ------------------------------------------------------------ paper documents & forms */
.paper { background: var(--paper); color: var(--ink); padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow); position: relative; }
.paper a { color: #8a1426; }
.paper-doc { margin-top: 20px; background-image: repeating-linear-gradient(transparent 0 27px, rgba(80, 120, 190, .16) 27px 28px); }
.charter { max-width: 860px; }
.charter-list li { margin-bottom: 12px; }
.signature { font: 13px var(--f-type); margin-top: 22px; }
.signature span { font: 1.8rem var(--f-script); color: #2a2a6a; margin-left: 6px; }
.form-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 16px; }
.form-stack label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font: 13px var(--f-type); text-transform: uppercase; letter-spacing: .08em; }
.form-stack input, .form-stack textarea, .form-stack select { font: 15px var(--f-body); padding: 10px; border: 2px solid var(--ink); background: #fffdf6; color: var(--ink); border-radius: 2px; text-transform: none; letter-spacing: 0; min-width: 0; max-width: 100%; }   /* a long option can't widen the form past a phone screen */
.form-error { background: var(--red); color: #fff; padding: 10px 14px; font-family: var(--f-type); }

/* ------------------------------------------------------------ admission (age gate) */
body.bare main { padding-top: 30px; padding-bottom: 18px; }
/* pages opened from the admission form before admission: the sign, a way back, and the page centered like the form */
.bare-head { text-align: center; padding: 22px var(--gutter) 0; }
.bare-head .neon-word { font-size: clamp(2rem, 5vw, 3.2rem); }
.bare-head .neon-tld { font-size: clamp(1rem, 2vw, 1.4rem); }
.bare-head p { margin: 12px 0 0; }
.bare-back { display: inline-block; padding: 6px 14px 5px; font: 12px/1.3 var(--f-type); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); text-decoration: none;
  border: 1px solid rgba(244, 233, 207, .35); border-radius: 3px; background: rgba(0, 0, 0, .25); }
.bare-back:hover, .bare-back:focus-visible { background: var(--paper); color: var(--ink); }
body.bare-doc main { max-width: 960px; padding-top: 14px; }
body.bare-doc main > .page-head, body.bare-doc main > .tl-bar, body.bare-doc main > .timeline, body.bare-doc .page-head .paper { margin-left: auto; margin-right: auto; }
body.bare-doc main > .page-head > .poster-kicker { justify-self: center; }
body.bare-doc main > .page-head:not(.ph-row) { text-align: center; }
body.bare-doc main > .page-head:not(.ph-row) .paper { text-align: left; }
.admission { display: grid; justify-items: center; gap: 20px; }
.admission-sign { text-align: center; }
.admission-sign .est { margin-top: 10px; }
/* the note for someone already admitted (Wording admission.already) */
.already-in { width: min(100%, 680px); box-sizing: border-box; padding: 14px 22px 16px; text-align: center; color: var(--text); background: rgba(240, 180, 60, .1);
  border: 1px dashed rgba(240, 180, 60, .55); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.already-in p { margin: 0; }
.already-in .already-in-title { font: 12.5px/1.4 var(--f-type); letter-spacing: .14em; text-transform: uppercase; color: var(--mustard); }
.already-in .already-in-text { max-width: none; margin: 8px auto 0; font: 14px/1.6 var(--f-body); color: var(--muted); text-wrap: balance; }
.already-in .already-in-btns { margin-top: 12px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 480px) { .already-in { padding: 12px 14px 14px; } .already-in .already-in-title { letter-spacing: .08em; } }
.clipboard { position: relative; width: min(680px, 100%); background: linear-gradient(135deg, #8a5a2b, #6b431f); padding: 46px 18px 20px; border-radius: 16px; box-shadow: var(--shadow), inset 0 0 0 2px rgba(255,255,255,.12); }
.clip { position: absolute; top: -14px; left: 50%; width: 170px; height: 50px; margin-left: -85px; border-radius: 10px 10px 16px 16px; background: linear-gradient(#e7e7e7, #9c9c9c 60%, #7a7a7a); box-shadow: 0 4px 8px rgba(0,0,0,.4); }
.clip::before { content: ''; position: absolute; left: 50%; top: 9px; width: 58px; height: 16px; margin-left: -29px; border-radius: 8px; background: #5d5d5d; box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
.clipboard .paper { background-image: repeating-linear-gradient(transparent 0 27px, rgba(80, 120, 190, .16) 27px 28px); }
.clipboard h1 { font-size: clamp(2rem, 6vw, 3rem); color: var(--ink); margin: 6px 0 12px; }
.stamp-corner { position: absolute; top: 18px; right: 18px; font-size: 18px; transform: rotate(10deg); color: var(--red); border-color: var(--red); background: none; }
.clipboard fieldset { border: 0; padding: 0; margin: 18px 0; }
.clipboard legend { font: 13px var(--f-type); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-bottom: 10px; }
.check { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 7px 0; cursor: pointer; }
.check input { position: absolute; opacity: 0; }
.check .box { width: 26px; height: 26px; border: 2px solid var(--ink); background: #fffdf6; position: relative; margin-top: 1px; }
.check input:checked + .box::after { content: '✓'; position: absolute; inset: -10px -4px 0 2px; font: 34px/1 var(--f-script); color: #1d3fa8; transform: rotate(-8deg); }
.check input:focus-visible + .box { outline: 3px solid var(--red); outline-offset: 2px; }
.admission-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 10px; }
.btn-stamp { font-size: 20px; padding: 16px 32px 14px; background: var(--red); color: #fff5ea; transform: rotate(-2deg); }
.btn-stamp:hover { background: var(--red-hi); color: #fff; transform: rotate(-2deg) translate(-2px, -2px); }
.btn-exit { font: 14px var(--f-type); color: var(--ink-2) !important; }

/* ------------------------------------------------------------ error page */
.error-page .poster { transform: rotate(-1deg); }
.error-page h1 { font-size: clamp(2.4rem, 7vw, 4rem); color: var(--red); margin-bottom: 10px; }

/* ------------------------------------------------------------ footer */
.site-foot { border-top: 3px solid var(--mustard); background: rgba(0,0,0,.3); padding: 32px var(--gutter) 16px; margin-top: 24px; }   /* the telemetry line is the last thing: little room under it */
.foot-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; gap: 6px 30px; color: var(--muted); font-size: 14px; }
.foot-inner p { margin: 0 0 8px; grid-column: 2; }
.foot-stamp { grid-row: 1 / 4; align-self: center; font: 13px/1.2 var(--f-type); text-transform: uppercase; text-align: center; letter-spacing: .1em; color: var(--mint); border: 3px double var(--mint); border-radius: 50%; width: 130px; height: 130px; display: grid; place-content: center; transform: rotate(-12deg); }
.foot-stamp b { font-size: 15px; }
.foot-fine { font-size: 12px; opacity: .8; }
/* Lab Standard Time: the ship's clock in the footer (lab_time(), ticked by lab.js). A brass-plate chronometer in the right column,
   mirroring the round stamp on the left; the whole plate links to its Lab History chapter. */
.lab-clock { grid-column: 3; grid-row: 1 / 4; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 14px 10px; border: 3px double rgba(143, 227, 200, .7); border-radius: 12px; text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s; }
.lab-clock:hover, .lab-clock:focus-visible { border-color: var(--mint); box-shadow: 0 0 18px rgba(143, 227, 200, .18); }
.lab-clock-name { font: 11px/1 var(--f-type); text-transform: uppercase; letter-spacing: .22em; color: var(--mint); white-space: nowrap; }
.lab-clock-name::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 6px var(--mint); vertical-align: 1px; animation: lab-clock-blink 2s steps(1) infinite; }
.lab-clock-face { display: inline-flex; align-items: flex-start; gap: 6px; padding: 6px 12px 4px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(143, 227, 200, .28); border-radius: 6px; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6); }
.lab-clock-unit { display: inline-flex; flex-direction: column; align-items: center; }
.lab-clock-unit b { font: 700 17px/1 var(--f-body); letter-spacing: .08em; color: var(--mint); text-shadow: 0 0 8px rgba(143, 227, 200, .55); font-variant-numeric: tabular-nums; }
.lab-clock-unit small { font: 9px/1.6 var(--f-type); text-transform: uppercase; letter-spacing: .2em; color: var(--muted); }
.lab-clock-face i { font-style: normal; color: rgba(143, 227, 200, .5); line-height: 17px; }
.lab-clock-why { font: 11px/1 var(--f-type); color: var(--mustard); letter-spacing: .04em; }
.lab-clock:hover .lab-clock-why { text-decoration: underline; }
@media (max-width: 1000px) { .lab-clock { grid-column: 2; grid-row: auto; justify-self: start; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } }
@keyframes lab-clock-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .lab-clock-name::before { animation: none; } }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1340px) and (min-width: 1101px) {
  .wing { min-width: 0; padding: 7px 11px 8px; font-size: 13.5px; letter-spacing: .08em; }
  .wings { gap: 8px; }
}

/* Desktop (1200 px up): the menu stays on one line and its buttons shrink a little as the window narrows, instead of wrapping and
   stretching the header (it used to, around 1225-1250 and 1345-1390 px). "Pull me" shows only where there's room for it. */
@media (min-width: 1200px) {
  .wings { flex-wrap: nowrap; }
  .wing { flex: 0 1 auto; min-width: 0; white-space: nowrap; font-size: clamp(12.5px, 1.02vw, 15px); padding: 8px clamp(8px, .85vw, 14px) 9px; }
}
@media (max-width: 1220px) and (min-width: 1101px) {
  .neon-word { font-size: 2.2rem; }
  .neon-word { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
}
@media (max-width: 1100px) {
  .head-inner { grid-template-columns: 1fr; grid-template-areas: "logo" "est" "nav" "console"; text-align: center; justify-items: center; }
  .head-console { justify-content: center; margin-top: 10px; }
  .wings { justify-content: center; margin-top: 10px; }
  .hero { grid-template-columns: 1fr; }
  .slide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nav" "fig" "vitals" "side"; }
  .lightbox { display: flex; flex-direction: column; overflow-y: auto; }
  .lightbox[hidden] { display: none; }
  .lb-stage, .lb-panel { flex: 0 0 auto; }
  .lb-stage { height: auto; min-height: 60vh; padding: 64px 12px 16px; }
  .lb-vitals { padding-right: 0; }
  .lb-stage img { max-height: 75vh; box-shadow: 0 0 0 6px #fbf6ea; }
  .lb-panel { height: auto; overflow: visible; padding: 16px; }
  .lb-nav { position: fixed; top: 40%; height: 80px; width: 44px; z-index: 3; background: rgba(0,0,0,.35); font-size: 44px; }
  .lb-prev { left: 0; } .lb-next { right: 0; }
}
@media (max-width: 700px) {
  :root { --row: 150px; }
  body { font-size: 15px; }
  .wing { min-width: 0; padding: 7px 10px; font-size: 12px; flex: 1 1 40%; }
  .wall { gap: 6px; }
  .case-head { padding-right: 0; }
  .stamp-head { position: static; margin-top: 10px; }
  .aux-head { padding-right: 0; min-height: 0; }
  .aux-card { position: relative; right: auto; top: auto; margin: 18px auto 6px; transform: rotate(1.5deg); }
  .staff-card, .staff-head { grid-template-columns: 1fr; }
  .staff-card .badge, .staff-head .badge { max-width: 240px; }
  .requisition { padding: 12px; }
  .req-count { margin-left: 0; width: 100%; }
  .foot-inner { grid-template-columns: 1fr; }
  .foot-inner p { grid-column: 1; }
  .lab-clock { grid-column: 1; }
  .foot-stamp { grid-row: auto; width: 110px; height: 110px; }
  .polaroid img { height: 180px; }
  .stamp-photo { right: 0; }
  .hbar > a, .hbar > span { grid-template-columns: minmax(80px, 42%) 1fr auto; }
}
/* ------------------------------------------------------------ projector effects (lab.js; off with ✨ Effects or reduced motion) */
/* thumbnails warm up under the Light Table lamp as they load (lab.js adds .develop-fx, then .developed per image) */
.develop-fx .tile img:not(.developed), .develop-fx .polaroid img:not(.developed), .develop-fx .folder-photo img:not(.developed), .develop-fx .folder-loose img:not(.developed) {
  filter: brightness(.25) sepia(.7) saturate(1.3);
}
.develop-fx .polaroid img, .develop-fx .folder-photo img, .develop-fx .folder-loose img { transition: filter .9s ease-out; }
.develop-fx .tile img { transition: transform .5s, filter .8s ease-out; }
/* opening a slide in the viewer: it drops into the gate under the warm lamp and racks into focus */
.lb-stage.settle img { animation: lb-settle .55s ease-out; }
@keyframes lb-settle { 0% { transform: translateY(-2%); filter: blur(7px) brightness(1.35) sepia(.25); } 55% { transform: translateY(.3%); filter: blur(1.5px) brightness(1.06); } 100% { transform: none; filter: none; } }
.lb-stage.loading::before { content: ''; position: absolute; inset: 24px 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 244, 214, .22) 0%, rgba(255, 236, 190, .08) 55%, transparent 80%); }
/* expedition folders: the photo sits on a strip of film, sprocket holes top and bottom */
.folder-photo { background: #16110d; padding: 16px 7px; }
.folder-photo::before, .folder-photo::after { content: ''; position: absolute; left: 6px; right: 6px; height: 6px;
  background: repeating-linear-gradient(90deg, #e9dfc6 0 7px, transparent 7px 14px); border-radius: 1px; opacity: .85; }
.folder-photo::before { top: 5px; }
.folder-photo::after { bottom: 5px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .hbar-fill, .col-fill { background: CanvasText; }
}

/* ------------------------------------------------------------ redactions */
.redacted {
  display: inline-block; background: #111; color: transparent; border-radius: 1px; line-height: 1.1;
  letter-spacing: -.1em; user-select: none; transform: rotate(-.6deg); box-shadow: 1px 1px 0 rgba(0,0,0,.25);
  font-family: var(--f-body); overflow: hidden; vertical-align: middle; max-width: 100%;
}
.stamp-mini { display: inline-block; font: 10px/1 var(--f-type); text-transform: uppercase; letter-spacing: .12em; color: var(--red); border: 2px solid var(--red); padding: 2px 5px; transform: rotate(-6deg); margin-left: 6px; vertical-align: middle; }
.report-download { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 14px 0 0; }
.report-download small { font: 11.5px var(--f-type); color: var(--ink-2); word-break: break-all; }
.lab-report .btn { color: var(--ink); }
.lab-report .btn-red, .lab-report .btn-red:hover { color: #fff4e6; }

/* ------------------------------------------------------------ staff story & quotes */
.staff-story { max-width: 900px; margin: 0 0 36px; }
.staff-story h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--red); margin: 6px 0 14px; }
.staff-story p { font-size: 1.02rem; line-height: 1.7; }
.staff-story b { color: #8a1426; }
.staff-quote { margin: 14px 0 16px; padding: 10px 16px; border-left: 4px solid var(--mustard); background: rgba(240, 180, 60, .12); font: 1.45rem/1.25 var(--f-script); color: #2a2a6a; }
.staff-quote cite { display: block; margin-top: 4px; font: 11px var(--f-type); font-style: normal; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-2); }
.page-head .staff-quote { background: rgba(244, 233, 207, .08); color: var(--mustard); }
.page-head .staff-quote cite { color: var(--muted); }
.personnel-photos { margin-top: 20px; }

/* Text on cream paper always uses dark ink (the page-head's muted color is for the dark background) */
.paper, .paper .typed, .page-head .paper .typed { color: var(--ink); }
.page-head .paper .typed { max-width: none; }
.paper .fine, .paper .form-no { color: var(--ink-2); }
.paper li::marker { color: var(--red); font-weight: 700; }

/* ------------------------------------------------------------ Lab History timeline */
.timeline { list-style: none; margin: 10px 0 40px; padding: 0 0 0 46px; position: relative; max-width: 900px; }
.timeline::before { content: ''; position: absolute; left: 17px; top: 6px; bottom: 30px; width: 4px; border-radius: 2px;
  background: repeating-linear-gradient(to bottom, var(--red) 0 14px, transparent 14px 22px); }
.tl-year span { display: inline-block; margin: 26px 0 14px -46px; font: 2.4rem/1 var(--f-pulp); color: var(--mustard); text-shadow: 3px 3px 0 rgba(0,0,0,.4); background: var(--night); padding: 0 6px; position: relative; }
.tl-entry { position: relative; margin-bottom: 22px; }
.tl-pin { position: absolute; left: -38px; top: 22px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8095, var(--red) 55%, #6d0f1c); box-shadow: 0 0 0 4px var(--night), 0 0 12px rgba(226, 58, 80, .6); }
.tl-card { transform: rotate(var(--tilt, 0)); padding: 18px 22px 16px; }
.tl-card h2 { font-size: 1.6rem; color: var(--red); margin: 2px 0 8px; }
.tl-card p { margin: 0 0 10px; line-height: 1.65; }
.tl-card b { color: #8a1426; }
.tl-date { margin: 0 !important; }
.tl-date time { display: inline-block; font: 12px var(--f-type); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--mustard); padding: 3px 10px; transform: rotate(-2deg); box-shadow: 2px 2px 0 rgba(0,0,0,.25); }
.tl-end span { display: inline-block; margin: 6px 0 0 -30px; font: 1.6rem var(--f-script); color: var(--muted); }
.page-head .typed p { margin: 0 0 8px; }
@media (max-width: 700px) { .timeline { padding-left: 34px; } .timeline::before { left: 11px; } .tl-pin { left: -31px; } .tl-year span { margin-left: -34px; font-size: 2rem; } .tl-card { padding: 14px 16px; } }
.page-head h1 + .typed, .page-head h1 + p { margin-top: 18px; }
.lb-full, .slide-figure .photo-frame { cursor: zoom-in; }
.lb-full { display: contents; }

/* full-size viewer theme: main site */
:root { --fv-bg: #0c0810; --fv-bg2: #231833; --fv-accent: #f0b43c; --fv-text: #f1e7d0; --fv-frame: #fbf6ea; --fv-close: #c8263a; --fv-font: 'Special Elite', 'Courier New', monospace; }

/* pop-up swipe: vertical movement scrolls, horizontal movement is ours */
.lb-stage { touch-action: pan-y pinch-zoom; }
.lb-stage img { user-select: none; -webkit-user-drag: none; }

/* ------------------------------------------------------------ jump bar (First / Prev / page / Next / Last) */
.pager-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; padding: 8px 12px; font: 14px var(--f-type); color: var(--muted); border: 1px dashed rgba(241, 231, 208, .22); border-radius: 6px; }
.pager-bottom { margin: 18px 0 0; }
.pager-range b { color: var(--paper); font-weight: 400; }
.pager-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pager-links a { color: var(--mustard); text-decoration: none; padding: 4px 2px; }
.pager-links a:hover { color: var(--neon-soft); text-decoration: underline; }
.pager-links .off { opacity: .35; }
.pager-jump { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.pager-jump input { width: 4.2em; font: 14px var(--f-body); padding: 3px 6px; background: var(--night-2); color: var(--paper); border: 1px solid rgba(241, 231, 208, .3); border-radius: 3px; }
.pager-jump button { font: 12px var(--f-type); text-transform: uppercase; letter-spacing: .1em; padding: 5px 9px; background: var(--paper); color: var(--ink); border: 0; border-radius: 3px; cursor: pointer; }
.page-mark { width: 0; height: 0; flex: 0 0 0; overflow: hidden; }
@media (max-width: 700px) { .pager-bar { justify-content: center; text-align: center; } .pager-range { width: 100%; } }
.lb-jumps { position: absolute; top: 12px; left: 14px; right: 470px; z-index: 2; display: flex; align-items: center; gap: 6px; }   /* up to the report panel (400 + 56 + 14) */
.lb-vitals-slot { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
.lb-vitals-slot:empty { display: none; }
.lb-vitals-slot .lb-vitals { flex: 0 1 620px; min-width: 0; margin: 0; padding: 0; }
.lb-vitals-slot .vitals { padding-top: 5px; padding-bottom: 5px; }
.lb-jump { font: 12px var(--f-type); letter-spacing: .06em; color: var(--paper); background: rgba(0,0,0,.45); border: 1px solid rgba(241, 231, 208, .35); border-radius: 4px; padding: 6px 10px; cursor: pointer; }
.lb-jump:hover { color: var(--mustard); border-color: var(--mustard); }
.lb-jump:disabled { opacity: .6; cursor: default; }
.foot-fx { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.foot-fx:disabled { text-decoration: none; opacity: .7; cursor: default; }
.lightbox.jumping { cursor: progress; }
@media (max-width: 1100px) { .lb-jumps { position: fixed; top: 12px; left: 12px; } }
.lb-count b { color: var(--mustard); font-weight: 400; }
.lb-count[hidden] { display: none; }
.lb-goto { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: 12px var(--f-type); color: var(--paper); background: rgba(0,0,0,.6); border: 1px solid var(--mustard); border-radius: 4px; padding: 3px 4px 3px 10px; }
.lb-goto[hidden] { display: none; }
.lb-goto input { width: 5.5em; font: 13px var(--f-body); padding: 3px 5px; background: var(--night); color: var(--paper); border: 1px solid rgba(241, 231, 208, .35); border-radius: 3px; }
.pager-jump-img { margin-left: auto; }
@media (max-width: 1100px) { .lb-jumps { flex-wrap: wrap; right: 64px; } }

/* performance: skip layout/paint for tiles far off-screen (their box size is already known) */
.tile { content-visibility: auto; contain-intrinsic-size: auto calc(var(--row) * var(--w) / var(--h)) var(--row); }
.cases-order { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; }
.cases-order a { color: var(--mustard); text-decoration: none; border: 1px solid transparent; border-radius: 3px; padding: 2px 8px; }
.cases-order a:hover { border-color: var(--mustard); }
.cases-order a[aria-current] { background: var(--mustard); color: #1a1220; }
.pager-per { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.pager-per button { font: 12px var(--f-type); color: var(--mustard); background: none; border: 1px solid transparent; border-radius: 3px; padding: 2px 6px; cursor: pointer; }
.pager-per button:hover { border-color: var(--mustard); }
.pager-per [data-scroll-endless] { margin-left: 8px; }
.wall-next { font-weight: 700; }
.pager-per button[aria-pressed="true"] { color: var(--ink); background: var(--mustard); }

/* report form declarations */
.attest { border: 1px dashed rgba(0, 0, 0, .35); border-radius: 4px; padding: 6px 14px 8px; margin: 6px 0 4px; }
.attest legend { font: 12px var(--f-type); letter-spacing: .12em; text-transform: uppercase; padding: 0 6px; }
.attest .check span:last-child { font-size: 14px; line-height: 1.45; }

/* Lab History: a jump in time */
.tl-gap span { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tl-gap i { font: italic 1rem/1.2 var(--f-type); color: var(--mint, #9ff0cf); letter-spacing: .08em; text-shadow: none; }

/* Lab History: order + jump bar (sticks to the top while reading) */
.tl-bar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; max-width: 900px; margin: 0 0 8px;
  padding: 9px 14px; background: rgba(20, 14, 26, .94); backdrop-filter: blur(6px); border: 1px solid rgba(233, 196, 106, .3); border-radius: 6px; font: 13px var(--f-type); }
.tl-bar a { color: var(--mustard); text-decoration: none; }
.tl-bar a:hover { text-decoration: underline; }
.tl-order { display: inline-flex; border: 1px solid rgba(233, 196, 106, .45); border-radius: 4px; overflow: hidden; }
.tl-order a { padding: 3px 10px; }
.tl-order a[aria-current] { background: var(--mustard); color: var(--ink); }
.tl-years { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.tl-latest { margin-left: auto; }
.tl-anchor { position: relative; top: -90px; display: block; height: 0; }   /* land below the sticky bar */
#latest { scroll-margin-top: 64px; }
.tl-new { display: inline-block; margin-left: 8px; padding: 1px 7px; font: 11px var(--f-type); letter-spacing: .08em; text-transform: uppercase; background: var(--red); color: #fff5ea; border-radius: 3px; }
.tl-card .typed a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.tl-top { max-width: 900px; margin: -20px 0 40px; font: 14px var(--f-type); text-align: center; }
.tl-top a { color: var(--mustard); }
@media (max-width: 600px) { .tl-bar { gap: 6px 12px; padding: 8px 10px; } .tl-latest { margin-left: 0; } }

/* Front Desk */
.muted-note { font: 14px/1.5 var(--f-type); color: var(--ink-2); margin: 10px 0 0; }
.kind-pick { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kind-pick legend { font: 13px var(--f-type); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; padding: 0; }
.form-stack .pill-radio { display: inline-flex; text-transform: none; letter-spacing: 0; cursor: pointer; }
.pill-radio input { position: absolute; opacity: 0; }
.pill-radio span { padding: 7px 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fffdf6; font: 14px var(--f-body); }
.pill-radio input:checked + span { background: var(--ink); color: #fffdf6; }
.pill-radio input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }

.vitals-clear { background: none; border: 1px solid rgba(157, 255, 176, .35); border-radius: 3px; color: #9dffb0; font: 11px var(--f-type); letter-spacing: .06em; padding: 2px 7px; cursor: pointer; }
.vitals-clear:hover { border-color: #ff5d7a; color: #ff5d7a; }
.vitals-clear[hidden] { display: none; }

/* Slide of the Moment */
.moment-bar { margin: 0 0 10px; text-align: center; }
.moment-again { display: inline-block; font: 13px var(--f-type); letter-spacing: .08em; text-transform: uppercase; color: var(--mustard); text-decoration: none;
  padding: 5px 14px; border: 1px dashed rgba(233, 196, 106, .6); border-radius: 999px; }
.moment-again:hover { color: #fff; border-color: #fff; }
#moment.loading .moment-again { opacity: .6; pointer-events: none; }
#moment.loading .photo-frame { opacity: .75; transition: opacity .2s; }
/* the stamp goes top-left so it never covers the corner tag (top-right) */
.featured .stamp-photo { right: auto; left: -18px; top: 22px; transform: rotate(-12deg); text-align: center; line-height: 1.15; }
@media (max-width: 700px) { .featured .stamp-photo { left: 4px; font-size: 13px; } }

/* active filters: say clearly that this is a subset */
.filter-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: -6px 0 16px; padding: 10px 14px;
  background: rgba(233, 196, 106, .12); border: 1px solid rgba(233, 196, 106, .5); border-left: 5px solid var(--mustard); border-radius: 4px; font: 14px/1.5 var(--f-type); color: var(--paper, #f3e6c9); }
.filter-banner b { color: var(--mustard); font-weight: 700; }
.chip { font-size: 14px; padding: 5px 12px; }
@media (max-width: 480px) { .requisition input[type=search] { padding-left: 1px; padding-right: 1px; } .requisition input[type=search]::placeholder { font-size: 13px; } }

/* ------------------------------------------------------------ maps: models' home states (US) and the expeditions (world) */
.map-frame { max-width: 980px; }
.geo-map { display: block; width: 100%; height: auto; }
.geo-map path { fill: rgba(244, 233, 207, .07); stroke: rgba(244, 233, 207, .35); stroke-width: .6; stroke-linejoin: round; transition: fill .15s; }
.geo-map path.geo-on { fill: rgba(200, 38, 58, var(--k)); stroke: rgba(244, 233, 207, .7); }
.geo-map a:hover path.geo-on, .geo-map a:focus-visible path.geo-on { fill: var(--mustard, #f0b43c); }
.geo-pin circle { fill: var(--mustard, #f0b43c); stroke: #1d1712; stroke-width: 1.5; }
.geo-pin .geo-pin-dot { fill: #1d1712; stroke: none; }
.geo-pin text { font: 700 12px var(--f-type); fill: var(--paper); paint-order: stroke; stroke: #1d1712; stroke-width: 3px; }
.geo-pin:hover circle { fill: #fff; }
.expedition-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 4px; font-size: 14px; }
.expedition-list span { opacity: .75; }
.states-legend { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font: 11px var(--f-type); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.states-legend i { width: 18px; height: 12px; border-radius: 3px; background: rgba(200, 38, 58, var(--k)); }

/* ------------------------------------------------------------ the Supply Room Report (Research) */
.supply-intro { max-width: 900px; font-size: 14px; }
.supply-room .stat-tiles { margin: 16px 0 6px; }
.supply-sub { font: 700 1rem var(--f-type); text-transform: uppercase; letter-spacing: .12em; margin: 22px 0 10px; }
.supply-sub small { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .7; margin-left: 6px; }
.supply-sources { display: flex; border-radius: 8px; overflow: hidden; min-height: 46px; font: 12px/1.25 var(--f-type); }
.supply-sources .src { min-width: 0; padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.supply-sources .src b { font-size: 1.1rem; }
.src-beds { background: #3d7d4f; color: #f4ffe9; }
.src-recycled { background: #5a4636; color: #f4e9cf; }
.src-air { background: #8a8f96; color: #16131a; }
.src-plastic { background: linear-gradient(90deg, #ff3d8b, #2f8cff); color: #fff; }
div.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.chip-card { margin: 0; background: #fbf8f0; color: var(--ink); border-radius: 6px; padding: 8px 8px 10px; box-shadow: var(--shadow); }
.chip-color { display: block; height: 64px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); margin-bottom: 8px; }
.chip-card figcaption { font: 12px/1.35 var(--f-type); display: grid; }
.chip-card figcaption b { font-size: 12px; letter-spacing: .06em; }
.chip-card small { color: var(--ink-2); margin-top: 2px; }
.chips-sealed .chip-card { opacity: .8; background: #eee6d2; }

/* ------------------------------------------------------------ Fastest Hands in the Lab (Research) */
.hands-intro { max-width: 900px; font-size: 14px; }
.hands-board { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; max-width: 980px; }
.hands-board li { display: grid; grid-template-columns: 30px minmax(0, 2.2fr) minmax(70px, 1fr) auto; gap: 10px; align-items: center;
  background: rgba(244, 233, 207, .06); border: 1px solid rgba(244, 233, 207, .12); border-radius: 8px; padding: 6px 12px; }
.hands-rank { font: 1.5rem/1 var(--f-pulp); color: var(--mustard, #f0b43c); text-align: center; }
.hands-who { display: grid; min-width: 0; }
.hands-who > a { font-weight: 700; }
.hands-who small { font: 11px/1.4 var(--f-type); opacity: .75; }
@media (min-width: 1300px) { .hands-who small { white-space: nowrap; } }   /* one line where it fits */
.hands-bar { height: 10px; background: rgba(244, 233, 207, .1); border-radius: 5px; overflow: hidden; }
.hands-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--mustard, #f0b43c)); border-radius: 5px; }
.hands-rate { font: 12px var(--f-type); white-space: nowrap; }
.hands-rate b { font: 1.1rem var(--f-pulp); color: var(--paper); }
.hands-dropped { display: block; max-width: none; margin: 0; }   /* a slim one-line note, not a tall tile */
.hands-dropped .stat-tile { display: flex; align-items: baseline; gap: 12px; padding: 8px 14px; }
.hands-dropped .stat-tile b { display: inline; font-size: 1.5rem; }
@media (max-width: 640px) { .hands-board li { grid-template-columns: 28px minmax(0, 1fr) auto; } .hands-bar { grid-column: 2 / -1; } }


/* Projector mode (public/assets/js/projector.js): a wall shown full screen like a carousel slide projector */
.btn-projector { white-space: nowrap; }
body.pj-open { overflow: hidden; }
.projector { position: fixed; inset: 0; z-index: 90; background: #050407; color: var(--text); display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
.projector[hidden] { display: none; }
.pj-screen { position: relative; display: grid; place-items: center; min-height: 0; padding: 16px; cursor: pointer; overflow: hidden; }
/* fit to screen: the picture box fills the screen and the slide is contained in it (percent max-height doesn't work reliably in a grid cell) */
.pj-screen img { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); max-width: none; object-fit: contain;
  transition: opacity .12s ease-out, filter .12s; animation: pj-flicker 6s infinite steps(1); }
/* actual size: the full-resolution file, scrolled or dragged around */
.projector.actual .pj-screen { display: block; overflow: auto; padding: 0; cursor: grab; overscroll-behavior: contain; }
.projector.actual .pj-screen img { position: static; display: block; width: auto; height: auto; max-width: none; margin: 0 auto; }
.projector.actual.dragging .pj-screen { cursor: grabbing; }
.projector.actual .pj-screen::after { display: none; }
.projector.actual .pj-paused, .projector.actual .pj-spin { position: fixed; }
.projector.actual .pj-spin { top: 45%; left: 50%; margin: -23px 0 0 -23px; }
.pj-size { white-space: nowrap; }
.pj-screen img:not([src]) { visibility: hidden; }
/* the warm hot-spot of the projector lamp, darker at the corners */
.pj-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255, 244, 214, .05) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .45) 100%); }
.pj-screen.dark img { opacity: 0; transition: opacity .06s; }
/* the empty gate: while the tray turns, the lamp shines straight through onto the screen */
.pj-screen::before { content: ''; position: absolute; inset: 16px; pointer-events: none; opacity: 0; transition: opacity .12s;
  background: radial-gradient(ellipse at center, rgba(255, 244, 214, .5) 0%, rgba(255, 236, 190, .28) 45%, rgba(255, 236, 190, .08) 80%); }
.pj-screen.dark::before { opacity: 1; }
/* the next slide drops into the gate and the projectionist racks the focus */
.pj-screen.settle img { animation: pj-settle .5s ease-out, pj-flicker 6s infinite steps(1) .5s; }
@keyframes pj-settle { 0% { transform: translateY(-2.5%); filter: blur(6px) brightness(1.25); } 55% { transform: translateY(.4%); filter: blur(1.5px) brightness(1.05); } 100% { transform: none; filter: none; } }
@keyframes pj-flicker { 0%, 100% { filter: brightness(1); } 31% { filter: brightness(.97); } 32% { filter: brightness(1); } 67% { filter: brightness(.985); } 68% { filter: brightness(1); } }
.pj-paused { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); background: rgba(10, 7, 14, .8); border: 1px solid var(--mustard); color: var(--mustard);
  font-family: var(--f-type); padding: 6px 14px; letter-spacing: .08em; z-index: 2; }
.pj-spin { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .12); border-top-color: var(--neon); animation: spin .8s linear infinite; display: none; }
.projector.loading .pj-spin { display: block; }
.pj-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(10, 7, 14, .92); border-top: 1px solid var(--night-3); font-family: var(--f-type); transition: opacity .4s; z-index: 6; }
.pj-cap { flex: 1 1 0; min-width: 0; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-cap b { color: var(--mustard); font-weight: 400; letter-spacing: .05em; }
.pj-cap span { color: var(--muted); }
.pj-cap:hover span, .pj-cap:focus span { color: var(--text); text-decoration: underline; }
.pj-count { color: var(--muted); font-size: .9em; margin-right: 6px; white-space: nowrap; }
.pj-btn { background: var(--night-2); color: var(--text); border: 1px solid var(--night-3); min-width: 40px; height: 36px; padding: 0 10px; font: inherit; cursor: pointer; border-radius: 3px; }
.pj-btn:hover, .pj-btn:focus-visible { border-color: var(--mustard); color: var(--mustard); }
.pj-play { min-width: 52px; }
.pj-close:hover { border-color: var(--red-hi); color: var(--red-hi); }
.projector.idle { cursor: none; }
.projector.idle .pj-screen { cursor: none; }
.projector.idle .pj-bar { opacity: 0; }
.projector.idle .pj-bar:focus-within { opacity: 1; }
@media (max-width: 700px) {
  .pj-screen img { inset: 0; width: 100%; height: 100%; }
  .pj-cap { flex-basis: 100%; }
  .pj-btn { min-width: 36px; padding: 0 7px; }
  .pj-bar { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .pj-screen img { animation: none; transition: none; } }

/* My Slide Tray (public/assets/js/tray.js): a ☆ on every slide, kept in the visitor's browser */
.tray-star { position: absolute; top: 8px; right: 8px; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(21, 16, 29, .72); color: var(--paper); font: 20px/1 var(--f-type); cursor: pointer; opacity: 0; transition: opacity .2s, transform .15s, background .2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.tile:hover .tray-star, .tile:focus-within .tray-star, .polaroid:hover .tray-star, .polaroid:focus-within .tray-star, .tray-star:focus-visible, .tray-star.on { opacity: 1; }
.tray-star:hover { transform: scale(1.12); background: rgba(21, 16, 29, .9); }
.tray-star.on { color: var(--mustard); }
.polaroid .tray-star { top: 18px; right: 18px; }
@media (hover: none) { .tray-star { opacity: .85; } }
.tray-star.pop, .tray-btn.pop { animation: tray-pop .35s ease-out; }
@keyframes tray-pop { 40% { transform: scale(1.35) rotate(-12deg); } }
.tray-row { margin: 10px 0 0; }
.tray-btn.on { color: var(--red); }
.head-console { grid-area: console; display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 6px; }
/* My Slide Tray: a small enamel plate like the wings, with a round carousel slide tray on it */
.tray-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 7px; text-decoration: none; white-space: nowrap;
  font: 13px/1.2 var(--f-type); letter-spacing: .1em; text-transform: uppercase; color: #f6efe0;   /* lettered like the menu wings */
  background: linear-gradient(#2a3e46, #1c2b31); border: 2px solid #9fb8b8; border-radius: 6px;
  box-shadow: inset 0 0 0 2px #1c2b31, inset 0 0 0 3px rgba(159, 184, 184, .45), 0 3px 0 #0c1417, 0 6px 14px rgba(0, 0, 0, .35);
  transition: transform .15s, background .15s, color .15s;
}
.tray-link:hover { transform: translateY(-1px) rotate(-1deg); color: #fff; background: linear-gradient(#35505b, #22363e); }
.tray-link.on { color: #fff; background: linear-gradient(#7a1c2a, #56121d); border-color: #f3a8b3; box-shadow: inset 0 0 0 2px #56121d, inset 0 0 0 3px rgba(243, 168, 179, .5), 0 3px 0 #2b070d, 0 0 22px rgba(226, 58, 80, .5); }   /* on the tray page: red, like the menu wing you're in */
.tray-reel {   /* the carousel tray from above: slots all the way round, a hub in the middle */
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle, #d9d2c0 0 3px, #3a3a3a 3.5px 6px, transparent 6.5px), repeating-conic-gradient(#1a1a1a 0 7deg, #8a8a82 7deg 15deg);
  box-shadow: 0 0 0 2px #b9b2a0, 0 1px 3px rgba(0, 0, 0, .6);
  transition: transform .6s ease;
}
.tray-link:hover .tray-reel { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .tray-link:hover .tray-reel { transform: none; } }
.tray-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font: 11px/18px var(--f-type); text-align: center; }
.tray-count[hidden] { display: none; }
.tray-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; }
.tray-bar[hidden] { display: none; }
.tray-msg { font-family: var(--f-type); color: var(--mint); }
.tray-shared-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tile.tray-leaving { transition: opacity .25s, transform .25s; opacity: 0; transform: scale(.9); }

/* Dispatches from the Field (/dispatches): one telegram per batch of new slides */
.telegrams { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; max-width: 760px; }
.telegram { background: #f3e3b3; color: var(--ink); padding: 18px 22px 20px; box-shadow: var(--shadow); border-top: 6px solid var(--mustard); transform: rotate(-.4deg); }
.telegram:nth-child(even) { transform: rotate(.5deg); }
.telegram-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; font: 12px/1.2 var(--f-type); letter-spacing: .2em; color: var(--ink-2); border-bottom: 1px solid rgba(29, 23, 18, .3); padding-bottom: 6px; }
.telegram-title { font: 1.5rem/1.15 var(--f-pulp); margin: 0 0 10px; }
.telegram-body { font: 15px/1.6 var(--f-type); letter-spacing: .06em; margin: 0 0 10px; background: repeating-linear-gradient(transparent 0 23px, rgba(29, 23, 18, .06) 23px 24px); }
.telegram-note { font-family: var(--f-type); margin: 0 0 10px; color: var(--ink-2); }

/* Seasonal touches (app/lib/Seasons.php): a tinted ticker with extra lines, and a stamp on the home poster */
.ticker-season { font-weight: bold; }
.stamp-season { position: absolute; top: -22px; right: -16px; z-index: 2; font-size: 17px; transform: rotate(8deg); background: rgba(244, 233, 207, .92); }
.stamp-season small { display: block; font-size: 10px; letter-spacing: .2em; margin-top: 3px; }
@media (max-width: 700px) { .stamp-season { position: relative; top: auto; right: auto; float: right; margin: -8px -6px 8px 10px; font-size: 13px; } }
/* Themes (app/lib/Themes.php): the layout sets --theme-* colours on <body class="themed"> */
.themed .ticker { background: var(--theme-ticker-bg, var(--mustard)); color: var(--theme-ticker-fg, var(--ink)); }
.themed .stamp-season { color: var(--theme-stamp, var(--red)); border-color: var(--theme-stamp, var(--red)); }
.themed[style*="--theme-neon"] .neon-word { --neon: var(--theme-neon); color: color-mix(in srgb, var(--theme-neon) 28%, #fff);
  text-shadow: 0 0 4px #fff, 0 0 10px var(--neon), 0 0 22px var(--neon), 0 0 44px var(--neon), 0 0 80px color-mix(in srgb, var(--neon) 60%, transparent); }
.stamp-theme { color: var(--theme-stamp, var(--red)); border-color: var(--theme-stamp, var(--red)); background: rgba(251, 248, 240, .85); mix-blend-mode: normal; }
.badge-theme { position: absolute; top: 44px; left: 6px; z-index: 2; font-size: 10px; transform: rotate(-10deg); max-width: 120px; }
/* a signed-in admin previewing themes */
.theme-preview-bar { background: #2b2040; color: var(--text); font: 13px/1.4 var(--f-type); padding: 6px var(--gutter); text-align: center; border-bottom: 2px dashed var(--mustard); }
.theme-preview-bar a, .theme-preview-bar button { color: var(--mustard); }
.theme-preview-bar button { background: none; border: 0; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
/* the falling effect sits behind the page: it never covers a slide */
.fall-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.site-head, main, .site-foot { position: relative; z-index: 1; }

/* Staff Member of the Month (app/lib/Awards.php): gold stamp on the Press Pass, the race on the Staff page */
.stamp-gold { color: #a87400; border-color: #c89200; background: rgba(255, 236, 170, .85); mix-blend-mode: normal; }
.badge-award { position: absolute; top: 150px; right: 6px; z-index: 2; font-size: 11px; line-height: 1.2; transform: rotate(-12deg); max-width: 140px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.badge-award small { display: block; font-size: 10px; letter-spacing: .15em; margin-top: 2px; }
.award-board { max-width: 760px; margin: 0 0 30px; }
.award-board h2 { font-size: 1.6rem; margin: 8px 0; }
.award-winner { font: 1.05rem/1.5 var(--f-type); background: rgba(240, 180, 60, .25); border-left: 4px solid #c89200; padding: 8px 12px; }
.race { margin: 10px 0 0; padding-left: 26px; font-family: var(--f-type); }
.race li { margin: 4px 0; }
.race li span { color: var(--ink-2); margin-left: 8px; font-size: .9em; }
.race li.lead a::after { content: ' ★ leading'; color: #a87400; font-size: .85em; }
.award-line { font-family: var(--f-type); color: var(--mustard); margin: 6px 0; }

/* Expedition contact sheet (/case/<slug>/contact-sheet): 35 mm strips on white photo paper, grease-pencil circles */
.cs-link { margin: 12px 0 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cs-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.cs-sheet { background: #f6f3ea; color: #1a1a1a; padding: clamp(14px, 3vw, 36px); box-shadow: var(--shadow); }
/* each roll laid on the paper by hand, a hair crooked (tilting the whole sheet swung its far corners past the screen's edge on a long film) */
.cs-roll { margin: 0 0 20px; padding-bottom: 20px; border-bottom: 2px dashed rgba(26, 26, 26, .22); transform: rotate(-.25deg); }   /* a cut line between rolls: each roll's caption plainly belongs to the film above it */
.cs-roll:last-of-type { border-bottom: 0; padding-bottom: 0; }
.cs-roll:nth-child(even) { transform: rotate(.2deg); }
.cs-roll-label { font: 1.3rem/1 var(--f-script); color: #2a2a6a; margin: 0 0 8px; }
.cs-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; background: #0d0b0a; padding: 18px 4px; margin: 0 0 10px; position: relative;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* sprocket holes along the top and bottom edges */
.cs-strip::before, .cs-strip::after { content: ''; position: absolute; left: 0; right: 0; height: 7px;   /* (a picture, like the folder strips': smooth when tilted) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='7'%3E%3Crect x='9' width='8' height='7' rx='1.6' fill='%23e9e4d6'/%3E%3C/svg%3E") 0 0 / 24px 7px repeat-x;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cs-strip::before { top: 5px; }
.cs-strip::after { bottom: 5px; }
.cs-frame { position: relative; display: block; padding: 0 4px; text-decoration: none; }
.cs-edge { display: block; height: 14px; overflow: hidden; white-space: nowrap; font: 9px/14px var(--f-type); letter-spacing: .08em; color: #e0a040; opacity: .85; }
.cs-edge b { font-weight: normal; margin-right: 4px; }
.cs-edge i { font-style: normal; opacity: .7; margin-left: 6px; }
.cs-window { display: block; aspect-ratio: 3 / 2; background: #050404; overflow: hidden; border-radius: 2px; }
.cs-window img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .2s; }
.cs-frame:hover .cs-window img, .cs-frame:focus-visible .cs-window img { transform: scale(1.08); }
/* (a sideways frame with keyboard focus, e.g. after the viewer closes: the same small zoom, still lying on its side) */
.cs-frame:focus-visible .cs-window.turn-r img { transform: translate(-50%, -50%) rotate(90deg) scale(1.08); }
.cs-frame:focus-visible .cs-window.turn-l img { transform: translate(-50%, -50%) rotate(-90deg) scale(1.08); }
/* 🎞 a portrait shot lies on its side on the film, filling the wide frame (Slides::filmTurn: which way is the photographer's habit);
   pointing at it turns it upright in the frame, like turning the negative in your hand. The viewer always shows it upright. */
.cs-window, .fs-frame { position: relative; }
.cs-window.turn-r, .cs-window.turn-l, .fs-frame.turn-r, .fs-frame.turn-l { container-type: size; }
.cs-window.turn-r img, .cs-window.turn-l img, .fs-frame.turn-r img, .fs-frame.turn-l img {
  position: absolute; left: 50%; top: 50%; width: 100cqh; height: 100cqw; max-width: none; object-fit: cover; transition: transform .35s ease, filter .2s; }
.cs-window.turn-r img, .fs-frame.turn-r img { transform: translate(-50%, -50%) rotate(90deg); }
.cs-window.turn-l img, .fs-frame.turn-l img { transform: translate(-50%, -50%) rotate(-90deg); }
.cs-frame:hover .cs-window:is(.turn-r, .turn-l) img, .fs-cell:hover .fs-frame:is(.turn-r, .turn-l) img { transform: translate(-50%, -50%) rotate(0deg) scale(.6667); }   /* hover only: focus came back to a frame after the viewer closed or Back, and left it standing upright */
@media (prefers-reduced-motion: reduce) { .cs-window img, .fs-frame img { transition: none; } }
.cs-frame:focus-visible { outline: 2px solid var(--mustard); outline-offset: 2px; }
.cs-circle { position: absolute; left: -2%; top: 4px; width: 104%; height: calc(100% + 2px); overflow: visible; pointer-events: none; }
.cs-circle path { stroke: #d8202f; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 .5px rgba(0, 0, 0, .4)); }
.cs-pick { position: absolute; right: 0; bottom: -6px; z-index: 2; font: 1.25rem/1 var(--f-script); color: #d8202f; transform: rotate(-8deg); background: rgba(246, 243, 234, .9); padding: 0 5px; border-radius: 3px; }
.cs-foot { text-align: center; color: #555; margin: 10px 0 0; font-size: 13px; }
@media (max-width: 700px) {
  .cs-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-edge i { display: none; }
  .cs-roll, .cs-roll:nth-child(even) { transform: none; }
}
@media print {
  .ticker, .site-head, .site-foot, .cs-actions, .cs-head .typed, .skip { display: none !important; }
  html, body, main { background: #fff !important; background-image: none !important; }
  .grain, #lightbox { display: none !important; }
  .cs-sheet { box-shadow: none; padding: 0; }
  .cs-roll, .cs-roll:nth-child(even) { transform: none; }
  .cs-roll { break-inside: avoid-page; }
  .cs-strip { break-inside: avoid; }
  .cs-head h1 { color: #000; text-shadow: none; }
}

/* Projector transitions and projectionist mishaps (projector.js) */
.pj-screen img.pj-ghost { z-index: 1; animation: none; }
.pj-screen img.pj-ghost[hidden] { display: none; }
.pj-trans, .pj-mishap { white-space: nowrap; }
.pj-mishap[aria-pressed="false"] { opacity: .65; }
/* the slide bows in the lamp's heat and pops out of focus; the projectionist hunts for the focus again */
.pj-screen.popped img[data-pic] { animation: pj-pop 1.8s ease-in-out; }
@keyframes pj-pop { 0% { filter: none; scale: 1; } 5% { filter: blur(5px); scale: 1.015; } 52% { filter: blur(5px); scale: 1.015; }
  64% { filter: blur(1px); scale: 1.004; } 74% { filter: blur(3px); scale: 1.008; } 86% { filter: blur(.5px); scale: 1; } 100% { filter: none; scale: 1; } }
/* loaded upside down (and, projected, back to front) */
.pj-screen.flipped img[data-pic] { rotate: 180deg; }
/* a jammed tray: the empty gate shudders while it grinds */
.pj-screen.jammed::before { animation: pj-shake .11s linear infinite; }
@keyframes pj-shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(2px, -1px); } 50% { transform: translate(-1px, 2px); } 75% { transform: translate(-2px, -1px); } }
/* a hair caught in the gate, slightly out of focus, trembling in the fan's draught */
.gate-hair { position: absolute; z-index: 3; width: clamp(60px, 9vw, 120px); height: auto; aspect-ratio: 2 / 1; pointer-events: none; opacity: .9;
  animation: hair-tremble 1.4s ease-in-out infinite alternate; filter: blur(.6px); }
.gate-hair svg { width: 100%; height: 100%; overflow: visible; }
.gate-hair path { fill: none; stroke: #0a0705; stroke-width: 3.6; stroke-linecap: round; }
@keyframes hair-tremble { from { transform: translate(0, 0) rotate(-2deg); } to { transform: translate(1px, -2px) rotate(3deg); } }
/* the projectionist's apology */
.pj-toast { position: absolute; left: 50%; bottom: 22px; z-index: 4; transform: translateX(-50%); max-width: min(90%, 560px); text-align: center;
  background: rgba(244, 233, 207, .94); color: var(--ink); font: 14px/1.4 var(--f-type); padding: 8px 14px; border-radius: 3px; box-shadow: 0 4px 16px rgba(0, 0, 0, .5); pointer-events: none; }
.pj-toast[hidden] { display: none; }
.pj-toast.show { animation: pj-toast 3.4s ease-in-out forwards; }
@keyframes pj-toast { 0% { opacity: 0; translate: 0 8px; } 8%, 85% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gate-hair, .pj-screen.jammed::before { animation: none; } }
.lb-stage.popped img { animation: pj-pop 1.8s ease-in-out; }
.lb-stage .gate-hair { width: clamp(70px, 9vw, 130px); }
/* the Projector's opening title slide (from today's theme): a hand-lettered card in the gate */
.pj-title { position: absolute; inset: 16px; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  background: radial-gradient(ellipse at center, #2b2040 0%, #120d18 75%); color: #f4e9cf; padding: 20px; }
.pj-title[hidden] { display: none; }
.pj-title small { font: 1.1rem/1.2 var(--f-type); letter-spacing: .25em; text-transform: uppercase; color: var(--theme-neon, var(--mustard)); }
.pj-title b { font: clamp(2.4rem, 7vw, 5.5rem)/1 var(--f-pulp); font-weight: 400; text-shadow: 3px 3px 0 var(--theme-stamp, var(--red)); }
.pj-title i { font: 1.3rem/1 var(--f-script); color: var(--muted); font-style: normal; }
.pj-title.gone { opacity: 0; transition: opacity .12s; }
/* the Ship's Log serial (ShipsLog): scheduled chapters (seen only by the admin) and the next-chapter teaser */
.tl-scheduled .tl-card { opacity: .6; outline: 2px dashed var(--mustard); }
.tl-soon { background: var(--mustard); color: var(--ink); }
.tl-next { list-style: none; text-align: center; margin: 10px 0 0; }
.tl-next p { display: inline-block; background: var(--paper); color: var(--ink); padding: 10px 16px; box-shadow: var(--shadow); }
.tl-next a { color: #8a1426; }
/* Press Passes by era and Then & Now (staff pages; Crew::looks) */
.age-line { color: var(--mustard); margin: 4px 0 10px; }
.badge-era-1957 .badge-photo img { filter: grayscale(1) sepia(.55) contrast(1.1) brightness(.95); }
.badge-era-1979 .badge-photo img { filter: sepia(.55) saturate(1.45) hue-rotate(-12deg) contrast(.82) brightness(1.1); }
.badge-era-photo.badge-era-1957 .badge-photo img, .badge-era-photo.badge-era-1979 .badge-photo img { filter: none; }
.badge-era-1957 { background: #f1e8d2; }
.badge-era-1979 { background: #f7efdd; }
.then-now-pair { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; padding: 10px 0 20px; }
.then-now-frame { margin: 0; text-align: center; }
.then-now-frame .polaroid img { height: 300px; max-width: 360px; }
.then-now-frame figcaption { margin-top: 12px; color: var(--mustard); }
/* the Lab speaks: announcements from the ship itself, in the ticker */
.ticker-lab { font-family: 'Courier New', monospace; font-weight: bold; letter-spacing: .12em; }
.tl-entry { scroll-margin-top: 80px; }
/* Lost in the wormhole: MISSING / RECOVERED stamps on Lab History chapters, the Lost & Found register, the lost drawer */
.stamp-lost { color: #b3202f; border-color: #b3202f; background: rgba(255, 245, 235, .6); mix-blend-mode: normal; }
.stamp-recovered { color: #2f7d32; border-color: #2f7d32; background: rgba(240, 255, 240, .6); mix-blend-mode: normal; }
.tl-card > .stamp-lost, .tl-card > .stamp-recovered { position: absolute; top: 14px; right: 16px; z-index: 2; font-size: 15px; transform: rotate(9deg); }
.tl-card > .stamp small { display: block; font-size: 9px; letter-spacing: .15em; margin-top: 2px; }
.tl-lost-note, .tl-found-note { font: 13px/1.4 var(--f-type); margin: 10px 0 0; padding: 6px 10px; border-left: 3px solid #b3202f; background: rgba(179, 32, 47, .06); }
.tl-found-note { border-color: #2f7d32; background: rgba(47, 125, 50, .07); }
.lost-register { margin-top: 14px; padding: 10px 14px; background: rgba(29, 23, 18, .05); border: 1px dashed rgba(29, 23, 18, .35); font-family: var(--f-type); }
.lost-register ul { margin: 6px 0 0; padding: 0; list-style: none; columns: 2 220px; }
.lost-register li { margin: 3px 0; break-inside: avoid; }
.stamp-mini-found { color: #2f7d32; border-color: #2f7d32; }
/* Filing Cabinets: a strip of negatives slips out from under each folder and links to its contact sheet */
.folder-wrap { position: relative; container: folder / inline-size; }
.folder-wrap .folder { position: relative; z-index: 2; }
/* the strip: a piece of negative film (black, sprocket holes tight along both edges, the frames between) and, on the paper under it,
   the "Film Strips" label, tilted with it as one piece */
.folder-strip { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: -4px 10px 0 18px;
  transform: rotate(-1.6deg); transform-origin: 0 0; transition: transform .45s cubic-bezier(.3, 1.35, .5, 1); }
.fs-film { position: relative; display: block; padding: 11px 3px 13px; background: #0d0b0a; box-shadow: 0 6px 14px rgba(0, 0, 0, .45); transition: box-shadow .3s ease; }
.fs-film::before, .fs-film::after { content: ''; position: absolute; left: 3px; right: 3px; height: 5px; opacity: .55;   /* sprocket holes: little rounded squares, drawn as */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='5'%3E%3Crect x='5' width='5' height='5' rx='1.2' fill='%23e9dcc0'/%3E%3C/svg%3E") 0 0 / 14px 5px repeat-x; }   /* a picture (smooth when tilted; a striped gradient came out jagged, worse at 125% / 150% screen scaling) */
.fs-film::before { top: 4px; }
.fs-film::after { bottom: 4px; }
.fs-frames { display: flex; gap: 3px; min-width: 0; }
.fs-cell { display: block; flex: 1 1 0; min-width: 0; text-decoration: none; }
.fs-edge { display: block; height: 9px; overflow: hidden; white-space: nowrap; font: 7px/9px var(--f-type); letter-spacing: .05em; color: #e0a040; opacity: .85; }   /* the edge printing, as on the Film Strips (Slides::edgeText) */
.fs-edge b { font-weight: normal; margin-right: 2px; }
.fs-edge i { font-style: normal; opacity: .7; margin-left: 3px; }
.fs-frame { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #1c1712; border: 1px solid #2a231c; }
.fs-blank .fs-frame { background: #15110e; }   /* unexposed film at the end of a short roll */
.fs-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: sepia(.25) contrast(1.05); }
.fs-caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 10px; margin: 0 2px; }
.fs-roll { font: 1rem/1.1 var(--f-script); color: #e9dcc0; opacity: .8; white-space: nowrap; }   /* "Roll 10 · frames 3–6", by hand */
.fs-label { margin-left: auto; font: 11px/1 var(--f-type); letter-spacing: .12em; text-transform: uppercase; color: var(--mustard); white-space: nowrap; text-decoration: none; }
.fs-label b { display: inline-block; transition: transform .3s ease; }
.folder-wrap:hover .folder-strip, .folder-strip:focus-within { transform: rotate(-.4deg) translateY(10px); }
.folder-wrap:hover .fs-film, .folder-strip:focus-within .fs-film { box-shadow: 0 12px 22px rgba(0, 0, 0, .5); }
.folder-strip:hover .fs-label, .folder-strip:focus-within .fs-label { color: #fff; }
.fs-cell:hover .fs-frame, .fs-cell:focus-visible .fs-frame { border-color: var(--mustard); }
.fs-cell:focus-visible { outline: none; }
.fs-cell:hover .fs-frame img, .fs-cell:focus-visible .fs-frame img { filter: none; }   /* the frame you point at, in full colour */
.fs-cell:hover .fs-edge { color: #ffd84a; opacity: 1; }
.folder-strip:hover .fs-label b { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .folder-strip, .folder-wrap:hover .folder-strip { transition: none; transform: rotate(-1.6deg); } }
@container folder (max-width: 254px) { .stamp-folder { top: 10px; right: -12px; z-index: 3; font-size: min(var(--fs-size, 10px), 10px); } }   /* too narrow to sit beside the year: just below the tab instead, on top of the cover (under it, the prints would hide it) and no bigger than 10px */
.folders-lost { margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.folder-lost .folder-tab, .folder-lost .folder-body { background: #b9b2a5; }
.folder-lost .folder-body { min-height: 0; padding-bottom: 44px; }
.folder-lost .folder-title, .folder-lost .folder-sub { color: #3b352e; }
.folder-lost .folder-meta { padding-right: 0; }
.folder-lost:hover .folder-body { background: #cfc7b8; }
.folder-lost .stamp-lost { background: rgba(255, 245, 235, .75); }

/* Staff page layout: the memo in newspaper columns across the page, personnel files two to a row, a jump strip */
.crew-jump { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -6px 0 20px; font-family: var(--f-type); font-size: 13px; }
.crew-jump span { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-right: 4px; }
.crew-jump a { background: var(--night-2); border: 1px solid var(--night-3); border-radius: 14px; padding: 4px 12px; text-decoration: none; color: var(--text); }
.crew-jump a:hover { border-color: var(--mustard); color: var(--mustard); }
.staff-card { scroll-margin-top: 20px; }
@media (min-width: 1000px) {
  .staff-story { max-width: none; }
  .staff-story .typed { column-count: 2; column-gap: 48px; column-rule: 1px dashed rgba(80, 120, 190, .3); }
  .staff-story .typed h2 { column-span: all; }
  .staff-story .typed p { break-inside: avoid; margin-top: 0; }
  .award-board { max-width: none; }
  .race { columns: 3 240px; column-gap: 32px; }
  .race li { break-inside: avoid; }
}
@media (min-width: 1250px) {
  .staff-list { grid-template-columns: 1fr 1fr; gap: 24px 28px; align-items: start; }
  .staff-list .staff-card { grid-template-columns: 190px 1fr; gap: 20px; }
  .staff-list .personnel-file { padding: 20px 22px; }
  .staff-list .personnel-file h2 { font-size: 1.7rem; }
}

/* one column (phones, tablets): the folders' stamps hang past the folder's right edge, so leave them room before the screen's edge
   (they used to push the home page ~14px wider than a phone, so it wobbled sideways) */
@media (max-width: 1099px) { .pair-home .folders-side { padding-right: 18px; } }
/* Side-by-side rows on wide screens (home: map + filing cabinets + Ship's Log; Research: map + Fastest Hands) */
@media (min-width: 1100px) {
  .pair-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 36px; align-items: start; }
  .pair-row .section-head { flex-wrap: wrap; }
  .folders-side { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  /* home: a smaller map and the newest expeditions side by side (three from 1300 px, two below) */
  .pair-home, .pair-research { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; }   /* a smaller map, a wider neighbour */
  .pair-home .folders-side { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
  .pair-home .folders-side > :nth-child(n+3) { display: none; }
}
@media (min-width: 1300px) {
  .pair-home .folders-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pair-home .folders-side > :nth-child(3) { display: block; }
}
.cabinets-more { margin: 16px 0 0; text-align: center; }
@media (min-width: 1200px) {
  .home-staff .badges { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .home-staff .badge { padding-left: 10px; padding-right: 10px; }
}
/* Home: the Ship's Log runs full width under the map + Filing Cabinets; on wide screens date + title on the left, the excerpt on the right */
.log-card-head { display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 801px) {
  .log-card-wide .log-card { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); grid-template-rows: auto auto; column-gap: 34px; row-gap: 8px; transform: rotate(-.3deg); }
  .log-card-wide .log-card-head { grid-row: 1 / 3; }
  .log-card-wide .log-card-text { grid-column: 2; }
  .log-card-wide .log-card-more { grid-column: 2; }
}
.log-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); transform: rotate(-.6deg); transition: transform .2s; }
.log-card:hover { transform: rotate(0) translateY(-3px); color: var(--ink); }
.log-card-title { font-size: 1.6rem; color: var(--red); }
.log-card-text { font-size: .95rem; line-height: 1.55; }
.log-card-more { font-family: var(--f-type); color: #8a1426; text-decoration: underline; }
.log-next { margin: 12px 0 0; color: var(--muted); }

/* Research charts as tabs on phones (lab.js adds .tabbed and the tab bar) */
.chart-tabbar { display: none; }
@media (max-width: 700px) {
  .chart-tabs.tabbed .chart-tabbar { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 12px; margin: 0 0 10px; scrollbar-width: thin; }
  .chart-tabs.tabbed .chart-tab { flex: 0 0 auto; scroll-snap-align: center; background: var(--night-2); color: var(--text); border: 1px solid var(--night-3); border-radius: 16px;
    padding: 7px 14px; font: 13px var(--f-type); cursor: pointer; white-space: nowrap; }
  .chart-tabs.tabbed .chart-tab[aria-selected="true"] { background: var(--mustard); color: var(--ink); border-color: var(--mustard); }
  .chart-tabs.tabbed .charts { margin-bottom: 0; }
  .chart-tabs.tabbed .chart:not(.chart-active) { display: none; }
  .chart-tabs.tabbed .charts:not(:has(.chart-active)) { display: none; }
}
/* a frame linked from a slide's camera log ("Roll 3 · frame 14") */
.cs-frame { scroll-margin-top: 90px; }
/* frames pointed out by a link (?mark=, and #frame-N): a ring of yellow china marker with a glow, the frame you clicked pulsing a few
   times, and the rest of the sheet dimmed (hover brings a frame back) until "Show every frame evenly" */
.cs-marked .cs-window, .cs-frame:target .cs-window { outline: 3px solid #ffd84a; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255, 216, 74, .28), 0 0 26px 4px rgba(255, 216, 74, .6); }
.cs-marked .cs-edge { color: #ffd84a; opacity: 1; }
.cs-frame:target .cs-window { animation: cs-pulse 1.1s ease-in-out 3; }
@keyframes cs-pulse { 50% { box-shadow: 0 0 0 11px rgba(255, 216, 74, .45), 0 0 44px 12px rgba(255, 216, 74, .9); } }
.cs-spot .cs-frame:not(.cs-marked) .cs-window img { opacity: .25; filter: grayscale(.8); transition: opacity .3s, filter .3s, transform .2s; }
.cs-spot .cs-frame:not(.cs-marked) .cs-circle, .cs-spot .cs-frame:not(.cs-marked) .cs-pick { opacity: .3; }
.cs-spot .cs-frame:not(.cs-marked):hover .cs-window img, .cs-spot .cs-frame:not(.cs-marked):focus-visible .cs-window img { opacity: 1; filter: none; }
/* the note: a yellow sticky note on the paper right under the marked frames (it used to float at the bottom of the screen) */
.cs-spot-note { position: relative; z-index: 2; width: fit-content; max-width: 100%; margin: -4px auto 14px; padding: 7px 12px 7px 12px; display: flex; flex-wrap: wrap; justify-content: center;
  align-items: baseline; gap: 2px 12px; background: #ffe97a; color: #2b2410; font-size: 13px; transform: rotate(-.8deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .3); }
.cs-spot-note a { color: #2b2410; font-weight: bold; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cs-frame:target .cs-window { animation: none; } }
@media print { .cs-spot-note { display: none !important; } .cs-spot .cs-frame .cs-window img { opacity: 1 !important; filter: none !important; } .cs-marked .cs-window, .cs-frame:target .cs-window { outline: none; box-shadow: none; } }
/* camera log: the sourcing line at the seed number's size; the arm number small and in one piece */
.report-dl dd.dd-fine { font-size: 11px; line-height: 1.6; }
.lb-panel .report-dl dd small.arm-no { font-size: 9.5px; }
.lb-panel { padding-left: 2px; }
.report-dl dd small.arm-no { font-size: 10.5px; white-space: nowrap; }
.dl-size { font-size: .85em; opacity: .85; white-space: nowrap; }
/* the telemetry line at the very bottom of every page */
.telemetry { margin: 10px 0 0; font: 9px/1.4 'Courier New', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mint); opacity: .7; }
.telemetry b { color: var(--mustard); font-weight: normal; }
.bare-telemetry { text-align: center; padding: 0 16px 14px; }
/* the telemetry line sits right under the copyright line */
.site-foot .foot-fine { margin-bottom: 0; }
.site-foot .telemetry { margin-top: -10px; }  /* cancels the footer grid's 6px row gap and the copyright line's spare line height */

/* Folder hover: the file is picked up (a swing and a sway that settles level, so the text ends up sharp) under a warm desk-lamp glow,
   and what's on it moves too: a framed photo slides partway out and straightens, loose prints hop and tilt as it's lifted */
.folder { transition: transform .35s ease, filter .3s ease; }
.folder-body { transition: box-shadow .3s ease, background-color .3s ease; }
/* the lift is a transition (so it eases back down on leaving); the swing is an animation of rotate/translate that ends at zero */
.folder:hover, .folder:focus-visible { animation: folder-pick .8s cubic-bezier(.3, .7, .4, 1) both;
  filter: drop-shadow(0 0 1.5px rgba(255, 196, 70, .95)) drop-shadow(0 0 18px rgba(240, 180, 60, .5)); }   /* the glow follows the whole outline, tab and all */
@keyframes folder-pick {
  0% { rotate: 0deg; translate: 0 0; }
  30% { rotate: -2.4deg; translate: 0 -5px; }
  55% { rotate: 1.2deg; translate: 0 1px; }
  78% { rotate: -.4deg; translate: 0 -1px; }
  100% { rotate: 0deg; translate: 0 0; }
}
.folder:hover .folder-body, .folder:focus-visible .folder-body { box-shadow: 0 18px 34px rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .35); }
.folder-photo { transition: transform .45s cubic-bezier(.3, 1.35, .5, 1), box-shadow .35s ease; }
.folder:hover .folder-photo, .folder:focus-visible .folder-photo { transform: translateY(-10px) rotate(0deg); box-shadow: 0 12px 20px rgba(0, 0, 0, .4); transition-delay: .12s; }
.folder-loose img { transition: transform .45s ease, filter .35s ease; }
.folder:hover .folder-loose img, .folder:focus-visible .folder-loose img { transform: translateY(-8px); animation: prints-hop .8s cubic-bezier(.3, .7, .4, 1) .08s both; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .35)); }
@keyframes prints-hop {
  0% { rotate: 0deg; translate: 0 0; }
  35% { rotate: 1.8deg; translate: 0 -6px; }
  65% { rotate: -.8deg; translate: 0 2px; }
  100% { rotate: 0deg; translate: 0 0; }
}
.folder:hover .stamp-folder, .folder:focus-visible .stamp-folder { animation: stamp-thunk .5s ease-out .35s both; }
@keyframes stamp-thunk { 0% { scale: 1; } 40% { scale: 1.12; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .folder:hover, .folder:focus-visible, .folder:hover .folder-loose img, .folder:focus-visible .folder-loose img, .folder:hover .stamp-folder { animation: none; }
  .folder:hover .folder-photo, .folder:focus-visible .folder-photo { transform: rotate(-2.5deg); }
}

/* The site's own dialogs for visitors (lab.js window.labDialog): a cream Front Desk form, like the Requisition Slip */
.lab-dialog { width: min(440px, 92vw); padding: 0; border: 0; border-radius: 3px; background: #fff7e3; color: var(--ink); box-shadow: 8px 8px 0 rgba(0, 0, 0, .45), 0 24px 60px rgba(0, 0, 0, .6);
  background-image: repeating-linear-gradient(transparent 0 23px, rgba(200, 38, 58, .12) 23px 24px); border-left: 8px solid var(--red); transform: rotate(-.6deg); }
.lab-dialog::backdrop { background: rgba(10, 7, 14, .78); }
.lab-dialog[open] { animation: lab-dialog-in .18s ease-out; }
@keyframes lab-dialog-in { from { transform: rotate(-.6deg) translateY(10px); opacity: 0; } }
.lab-dialog form { padding: 18px 22px 18px; }
.lab-dialog-kicker { margin: 0 0 6px; font: 11px var(--f-type); letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.lab-dialog-title { margin: 0 0 8px; font-size: 1.6rem; color: var(--ink); }
.lab-dialog-msg { margin: 0 0 14px; color: var(--ink) !important; line-height: 1.5; }
.lab-dialog-copy { width: 100%; box-sizing: border-box; margin: 0 0 14px; padding: 8px 10px; font: 13px var(--f-body); color: var(--ink); background: #fffdf6; border: 1px dashed var(--ink-2); border-radius: 2px; }
.lab-dialog-copy[hidden], .lab-dialog-actions [hidden] { display: none; }
.lab-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .lab-dialog[open] { animation: none; } }


/* ------------------------------------------------------------ one expedition: an open case folder
   A brass drawer label (back to the Filing Cabinets), then the manila folder: the typed cover sheet (Form 12-C) on the left,
   the case notes clipped on the right as a typed memo, folded to the cover sheet's height until "Read the whole memo". */
.case-file { max-width: none; padding-right: 0; margin: 0 0 16px; }
.cf-tabs { position: relative; display: flex; align-items: flex-end; padding-left: 22px; }
.cf-tabs .drawer-plate { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); }   /* centred on the folder, taking no room of its own */
.drawer-plate { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 0 6px; text-decoration: none; }
.dp-card {
  position: relative; display: block; padding: 5px 14px 4px; background: #f6efdc; color: var(--ink);
  font: 11px/1.1 var(--f-type); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 0 0 3px #c9a24e, 0 0 0 4px #6d4f1c, 0 3px 8px 3px rgba(0, 0, 0, .45);   /* the brass frame */
}
.dp-card::before, .dp-card::after { content: ''; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c4, #8a6424 70%); }
.dp-card::before { left: -12px; } .dp-card::after { right: -12px; }   /* rivets */
.dp-pull { display: block; width: 58px; height: 12px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #f0d38a, #a37a2c 60%, #6d4f1c); box-shadow: 0 3px 5px rgba(0, 0, 0, .5); }
.drawer-plate:hover .dp-card, .drawer-plate:focus-visible .dp-card { background: #fff8e6; }
.drawer-plate:hover .dp-pull { transform: translateY(1px); }
.cf-folder { position: relative; }
.cf-tab {
  flex: none; background: var(--manila); color: var(--ink); padding: 8px 16px 9px; border-radius: 9px 9px 0 0;
  font: 12px/1 var(--f-type); letter-spacing: .14em; text-transform: uppercase;
}
.cf-body {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 28px; align-items: start;
  background: var(--manila); color: var(--ink); padding: 16px 22px 16px; border-radius: 2px 10px 10px 10px; box-shadow: var(--shadow);
  background-image: linear-gradient(170deg, rgba(255, 255, 255, .28), transparent 45%), repeating-linear-gradient(0deg, rgba(120, 80, 20, .035) 0 2px, transparent 2px 5px);
}
.cf-body.cf-solo { grid-template-columns: minmax(0, 1fr); }
.page-head.case-file .typed { color: var(--ink); max-width: none; }
.page-head .cf-form { margin: 0 0 2px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.page-head .cf-title { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.02; color: var(--ink); text-shadow: 3px 3px 0 rgba(200, 38, 58, .45); }
.page-head .cf-sub { margin: 2px 0 10px; font-size: 1.35rem; color: var(--red); }
.cf-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; font-size: 13.5px; border-top: 1px solid rgba(29, 23, 18, .45); border-left: 1px solid rgba(29, 23, 18, .45); }
.cf-facts > div { min-width: 0; padding: 4px 8px 5px; border-right: 1px solid rgba(29, 23, 18, .45); border-bottom: 1px solid rgba(29, 23, 18, .45); }
.cf-facts dt { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.cf-facts dd { margin: 1px 0 0; }
.cf-facts .cf-wide { grid-column: span 2; }
.cf-facts .cf-all { grid-column: 1 / -1; }
.cf-facts a { color: var(--red); }
.cf-cover .cs-link { margin-top: 10px; }
.cf-cover .cs-link small { color: var(--ink-2); }
.cf-memo { position: relative; margin: 4px 4px 0 0; padding: 20px 22px 12px; background: #fbf8ef; color: var(--ink); font-size: 13px; line-height: 1.5; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); transform: rotate(.7deg); }
.page-head .cf-memo-text p { margin: 0 0 .55em; }
.cf-memo-text p:last-child { margin-bottom: 0; }
.cf-memo-text { overflow: hidden; }
.cf-memo.clipped:not(.open) .cf-memo-text { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.cf-clip { position: absolute; top: -24px; left: 28px; width: 18px; height: 52px; color: #8d949b; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.cf-more { display: block; margin: 6px 0 0; padding: 0; background: none; border: 0; color: var(--red); font: 12px var(--f-type); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.cf-more:hover { text-decoration: underline; }
.cf-cover { position: relative; }
.case-file .stamp-head { position: absolute; right: 2px; bottom: -6px; top: auto; z-index: 3; font-size: 13px; padding: 5px 9px; }   /* on the cover sheet, beside the Film Strips button */
@media (max-width: 760px) {
  .cf-body { grid-template-columns: minmax(0, 1fr); padding: 14px 14px 16px; }
  .cf-memo { transform: none; margin: 10px 0 0; }
  .cf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-facts .cf-wide { grid-column: 1 / -1; }
  .cf-tabs { padding-left: 8px; }
  .cf-tabs .drawer-plate, .cf-tab-long { display: none; }   /* a phone: just the folder tab, the stamp beside it */
  .cf-tab { font-size: 11px; padding: 7px 10px 8px; }
  .dp-card { font-size: 10px; padding: 4px 8px; letter-spacing: .14em; }
  .case-file .stamp-head { position: absolute; right: 0; bottom: -6px; top: auto; font-size: 11px; padding: 4px 7px; }
  .cf-cover .cs-link { padding-right: 128px; }
  .case-file .stamp-opened small { font-size: 8px; }
  .case-file .stamp-opened .stamp-when { font-size: 9px; margin-top: 3px; padding-top: 3px; }
}

/* The Filing Cabinets: the folders stand in an open steel drawer, a brass label and pull on its front */
.cabinet-drawer { margin: 0 0 22px; padding: 0 12px 14px; border-radius: 6px; background: linear-gradient(180deg, #4a4e53, #34373b); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .18); }
.cd-front { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 -12px 14px; padding: 12px 18px 10px; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #6b7076, #50555a 55%, #44484d); border-bottom: 3px solid #25282b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.cd-front .drawer-plate { margin: 0; }
.cd-front .cases-order { margin: 0; color: #e8e4da; }
.cd-inside { padding: 4px 6px 2px; }
@media (min-width: 761px) and (max-width: 1100px) {   /* a tablet: the header is centred above, so the drawer label moves to the right; the stamp gets its own room */
  .cf-tabs .drawer-plate { left: auto; right: 24px; transform: none; }
  .cf-cover .cs-link { padding-right: 150px; }
}

/* ------------------------------------------------------------ page heads, tightened
   The kicker is a strip of embossed label-maker tape (the office's pride and joy, 1958). Standard pages (.ph-row) put the
   title and its tape on the left and the intro beside them on a wide screen, instead of stacked with a big gap. */
.page-head { margin: 4px 0 14px; }
.page-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.02; margin: 2px 0 6px; }
.page-head > .poster-kicker, .page-head > div > .poster-kicker {
  display: inline-block; margin: 0 0 8px; padding: 5px 12px 4px; border-radius: 3px; transform: rotate(-1deg);
  font: 11.5px/1.2 var(--f-type); letter-spacing: .2em; text-transform: uppercase; color: #f3f1ea;
  background: linear-gradient(180deg, #2b2b2e, #111113 55%, #1d1d20); box-shadow: 0 2px 4px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .28);   /* pressed into the tape */
}
.ph-row { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); column-gap: 36px; align-items: end; max-width: none; }
.ph-row > .poster-kicker { grid-column: 1; grid-row: 1; justify-self: start; }
.ph-row > h1 { grid-column: 1; grid-row: 2; margin: 0; }
.page-head.ph-row > .typed { grid-column: 2; grid-row: 1 / span 2; align-self: center; max-width: 76ch; margin: 0; padding: 4px 0 4px 20px; font-size: 14px; line-height: 1.5; border-left: 2px dashed rgba(240, 180, 60, .35); }
.ph-row > .typed p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .ph-row { display: block; }
  .ph-row > h1 { margin: 0 0 6px; }
  .page-head.ph-row > .typed { padding: 0; border: 0; margin-top: 4px; }
}

/* The Film Strips: title on the left, the explanation and the way back beside it */
.cs-head { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 4px 36px; align-items: center; max-width: none; }
.cs-head h1 { margin: 0; }
.cs-head .poster-tag { margin: 4px 0 0; font-size: 1.3rem; }
.cs-head-r { padding-left: 20px; border-left: 2px dashed rgba(240, 180, 60, .35); }
.cs-head-r .typed { margin: 4px 0 8px !important; font-size: 14px; line-height: 1.5; max-width: 76ch; }
.cs-head-r .cs-actions { margin: 0; }
@media (max-width: 900px) { .cs-head { display: block; } .cs-head-r { padding: 0; border: 0; margin-top: 8px; } }
/* Home poster: the four counters on one row (the fourth used to drop to a line of its own) */
.hero .hero-counts { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 10px 12px; }
.hero .hero-counts b { font-size: clamp(1.3rem, 1.9vw, 1.75rem); white-space: nowrap; }
@media (max-width: 520px) { .hero .hero-counts { grid-template-columns: repeat(2, auto); justify-content: start; gap: 10px 26px; } }
.stamp-link { text-decoration: none; }
.stamp-link:hover .stamp-mini { filter: brightness(1.25); }

/* My Slide Tray on the Film Strips frames and the Slide of the Moment too */
.cs-frame { position: relative; }
.cs-frame .tray-star { top: 22px; right: 6px; width: 28px; height: 28px; font-size: 15px; }
.featured .photo-frame { position: relative; }
.featured .tray-star { top: 18px; right: 18px; }
.cs-frame:hover .tray-star, .cs-frame:focus-within .tray-star, .featured:hover .tray-star, .featured:focus-within .tray-star { opacity: 1; }
.pj-tray.on { color: var(--mustard); }
/* Slide page, wide screens: the picture stays in view while you read down the Darkroom Report (it's at most 85% of the screen tall) */
@media (min-width: 1101px) { .slide > .slide-figure { position: sticky; top: 12px; } }
.pj-vitals { display: inline-flex; align-items: center; margin: 0 4px; }
.pj-vitals[hidden] { display: none; }
.pj-vitals .vitals-beats button { font-size: 19px; }

/* Slide page: the frames either side of this one on the same roll, under the picture */
.roll-strip { margin: 12px auto 0; max-width: 760px; text-align: left; }
.roll-strip-label { margin: 6px 0 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.roll-strip-label a { color: var(--mustard); }
.roll-strip .cs-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 16px 4px; margin: 0; }
.roll-strip .cs-here .cs-window { outline: 3px solid #ffd84a; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255, 216, 74, .28), 0 0 20px 3px rgba(255, 216, 74, .6); }   /* this slide: yellow china marker, as on the Film Strips */
.roll-strip .cs-here .cs-edge { color: #ffd84a; opacity: 1; }
.roll-strip a.cs-frame .cs-window img { opacity: .82; transition: opacity .2s, transform .2s; }
.roll-strip a.cs-frame:hover .cs-window img { opacity: 1; }
@media (min-width: 1101px) { .slide-figure.has-strip .photo-frame img { max-height: min(calc(85vh - 52px), calc(100vh - 250px)); } }   /* picture + strip fit the screen (the picture stays in view) */
@media (max-width: 700px) { .roll-strip .rs-far { display: none; } }

/* Slide page / one-slide Membership file: the picture between quiet ‹ › buttons, the same as the full-size viewer's */
.slide-stage { display: flex; align-items: center; justify-content: center; gap: 10px; }
.slide-stage .photo-frame { min-width: 0; max-width: calc(100% - 124px); }
.stage-arrow {
  flex: none; display: grid; place-items: center; width: 52px; height: 80px; text-decoration: none; border-radius: 6px;
  font: 46px/1 var(--f-body); color: var(--text); background: rgba(0, 0, 0, .35); opacity: .7; transition: opacity .15s, color .15s;
}
.stage-arrow:hover, .stage-arrow:focus-visible { opacity: 1; color: var(--mustard); outline: none; }
.stage-none { visibility: hidden; }
@media (max-width: 700px) {   /* a phone: over the picture's edges */
  .slide-stage { position: relative; gap: 0; }
  .slide-stage .photo-frame { max-width: 100%; }
  .stage-arrow { position: absolute; top: 50%; z-index: 3; width: 40px; height: 64px; margin-top: -32px; font-size: 36px; }
  .stage-prev { left: 2px; } .stage-next { right: 2px; }
  .stage-none { display: none; }
}
/* the arrow-key hint over the film strip (keyboards only) */
.roll-strip-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.roll-strip-link { margin-left: auto; text-align: right; }
@media (max-width: 380px) { .roll-strip-title { display: none; } }   /* the smallest phones: just the link, on one line */
@media (max-width: 700px) { .roll-strip-label { font-size: 11px; letter-spacing: .04em; } }
@media (max-width: 440px) { .roll-strip-label { letter-spacing: .01em; } }   /* (the roll and frames and the link on one line) */
.roll-strip-keys { font-size: 11px; letter-spacing: .06em; color: var(--muted); opacity: .8; }
.roll-strip-keys kbd { display: inline-block; min-width: 18px; padding: 0 4px; border: 1px solid rgba(244, 233, 207, .35); border-bottom-width: 3px; border-radius: 4px; font: 12px/1.3 var(--f-type); color: var(--text); background: rgba(255, 255, 255, .04); }
@media (hover: none) { .roll-strip-keys { display: none; } }
@media (max-width: 480px) { .slide-nav .nl-long { display: none; } }
/* Home page, wide screens: the Slide of the Moment gets a fixed space as tall as the poster beside it (lab.js sets --moment-h,
   the tallest the picture may be). The frame keeps its thin border and hugs each slide: a tall one fills the space, a wide one is
   centred in it. The caption and everything below never move when the slide changes. */
.hero-side[style*="--moment-h"] .featured { display: grid; grid-template-rows: auto calc(var(--moment-h) + 30px) auto; justify-items: center; align-items: center; }
.hero-side[style*="--moment-h"] .featured .photo-frame img { max-height: var(--moment-h); max-width: 100%; width: auto; height: auto; }

/* ---- fixes from the page check (2026-09-30) */
/* Lab History: the empty jump targets before a year label take no room (they were pulling the label off the left edge) */
.tl-year > .tl-anchor { display: block; height: 0; margin: 0; padding: 0; background: none; }
/* Report form: the two "before you submit" statements sit beside their boxes, in sentence case */
.form-stack label.check { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; text-transform: none; letter-spacing: normal; font: 14px/1.45 var(--f-body); }
/* Light Table pop-up on a phone: its toolbar wraps to two rows, so the picture starts below them */
@media (max-width: 700px) { .lb-stage { padding-top: 100px; } }
/* Admission form on a phone: the ADULTS ONLY stamp smaller and tucked into the corner */
@media (max-width: 480px) { .stamp-corner { top: -12px; right: 2px; font-size: 13px; } .clipboard .form-no { padding-right: 76px; } }   /* (the form number stops short of the stamp) */
.signature span { white-space: nowrap; }
/* Footer links never split between their icon and their words */
.foot-links a, .foot-links button { white-space: nowrap; }
/* Label-maker tape, press-pass lines: balanced lines, never one word left alone */
.poster-kicker, .badge-top, .era-passes figcaption, .cf-tabs .cf-tab { text-wrap: balance; }
/* 404 page: the two buttons wrap with room between them */
.error-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* Case folder on a phone: just the Film Strips button (the stamp sits beside it) */
@media (max-width: 480px) { .cf-cover .cs-link small { display: none; } }
/* Slide page on a tablet: the Newer / Older row centred over the centred picture */
@media (max-width: 1100px) { .slide > .slide-nav { justify-content: center; } }

/* Put in My Slide Tray (slide report, pop-up viewer, Membership file): the same enamel plate as the header's My Slide Tray */
a.btn.tray-btn, button.btn.tray-btn, .btn.tray-plate {   /* .tray-plate: the tray page's own buttons (share, empty, add them all) */
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 5px; white-space: nowrap;
  font: 12px/1.2 var(--f-type); letter-spacing: .1em; text-transform: uppercase; color: #f6efe0;
  background: linear-gradient(#2a3e46, #1c2b31); border: 2px solid #9fb8b8; border-radius: 6px;
  box-shadow: inset 0 0 0 2px #1c2b31, inset 0 0 0 3px rgba(159, 184, 184, .45), 0 3px 0 #0c1417, 0 6px 12px rgba(0, 0, 0, .3);
  transition: transform .15s, background .15s, color .15s;
}
a.btn.tray-btn:hover, button.btn.tray-btn:hover, .btn.tray-plate:hover:not(:disabled) { transform: translateY(-1px) rotate(-1deg); color: #fff; background: linear-gradient(#35505b, #22363e); }
a.btn.tray-btn.on, button.btn.tray-btn.on, .btn.tray-plate:disabled { background: linear-gradient(#2f4750, #1f3037); color: #ffd76a; border-color: var(--mustard); box-shadow: inset 0 0 0 2px #1c2b31, inset 0 0 0 3px rgba(240, 180, 60, .55), 0 3px 0 #0c1417, 0 0 14px rgba(240, 180, 60, .45); }   /* in the tray: lit up gold */

/* ------------------------------------------------------------ Admission: ADMITTED stamp, the visitor pass, the Lab's doors */
.clipboard.adm-thunk { animation: adm-rattle .45s ease-out; }
@keyframes adm-rattle { 20% { transform: translate(3px, 2px) rotate(.6deg); } 45% { transform: translate(-3px, -1px) rotate(-.5deg); } 70% { transform: translate(1px, 1px); } }
.adm-stamp {
  position: absolute; left: 50%; top: 42%; z-index: 5; transform: translate(-50%, -50%) rotate(-14deg); pointer-events: none;
  font: 900 clamp(2.6rem, 9vw, 4.6rem)/1 var(--f-pulp); letter-spacing: .08em; text-transform: uppercase; color: #c8263a; text-align: center;
  border: 7px double #c8263a; border-radius: 10px; padding: 10px 24px 12px; background: rgba(255, 250, 240, .15);
  mix-blend-mode: multiply; opacity: .92; animation: adm-slam .45s cubic-bezier(.2, 1.6, .4, 1) both;
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 62%, rgba(0,0,0,.7) 63%, #000 78%);
}
.adm-stamp small { display: block; margin-top: 6px; font: 12px/1.2 var(--f-type); letter-spacing: .2em; }
@keyframes adm-slam { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(2.6); } 100% { opacity: .92; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } }
.adm-pass {
  position: fixed; left: 50%; top: 50%; z-index: 60; width: min(320px, 86vw); transform: translate(-50%, -50%) rotate(-3deg);
  padding: 18px 20px 0; color: var(--ink); background: #f7eccb; border-radius: 6px; text-align: center; font-family: var(--f-type);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(29, 23, 18, .18);
  background-image: repeating-linear-gradient(0deg, transparent 0 22px, rgba(80, 120, 190, .1) 22px 23px);
  animation: adm-print 1.4s steps(14) both;   /* comes out of the machine a line at a time */
}
@keyframes adm-print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.adm-pass p { margin: 0; }
.adm-pass .ap-top { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2); }
.adm-pass .ap-title { margin-top: 4px; font: 1.9rem/1 var(--f-pulp); color: var(--red); }
.adm-pass .ap-no { margin: 6px 0 10px; font: 1.5rem/1 var(--f-type); letter-spacing: .12em; }
.adm-pass dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 10px; text-align: left; font-size: 12.5px; }
.adm-pass dt { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding-top: 2px; }
.adm-pass dd { margin: 0; }
.adm-pass .ap-fine { font-size: 10.5px; line-height: 1.35; color: var(--ink-2); margin-bottom: 12px; }
.adm-pass .ap-stub { display: flex; justify-content: space-between; margin: 0 -20px; padding: 10px 20px 12px; border-top: 2px dashed rgba(29, 23, 18, .45); background: #efdfb2; border-radius: 0 0 6px 6px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.adm-pass .ap-stub b { color: var(--red); font-weight: 400; }
/* the Lab's frosted-glass swinging doors */
.adm-doors { position: fixed; inset: 0; z-index: 70; display: flex; perspective: 1400px; pointer-events: none; }
.adm-doors .door {
  flex: 1; display: grid; place-items: center; transition: transform .75s cubic-bezier(.5, 0, .3, 1);
  background: linear-gradient(180deg, rgba(210, 225, 232, .88), rgba(170, 190, 200, .92)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 14px solid #3b2a1a; box-shadow: inset 0 0 0 3px #b88a35, inset 0 0 40px rgba(255, 255, 255, .35);
}
.adm-doors .door span { font: clamp(2.2rem, 7vw, 5rem)/1 var(--f-pulp); letter-spacing: .12em; text-transform: uppercase; color: #b88a35; text-shadow: 0 1px 0 #fff3c4, 0 -1px 0 #5c4015; }
.adm-doors .door-l { transform-origin: left center; transform: rotateY(-96deg); justify-items: end; padding-right: 6vw; }
.adm-doors .door-r { transform-origin: right center; transform: rotateY(96deg); justify-items: start; padding-left: 6vw; }
.adm-doors.shut .door { transform: rotateY(0); }
.adm-doors.shut.opening .door-l { transform: rotateY(-96deg); }
.adm-doors.shut.opening .door-r { transform: rotateY(96deg); }
.adm-doors .door-sign { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); margin: 0; padding: 6px 16px; white-space: nowrap;
  font: 13px/1 var(--f-type); letter-spacing: .3em; text-transform: uppercase; color: #f6efdc; background: #1d1712; border: 2px solid #b88a35; border-radius: 3px;
  transition: opacity .3s; }
.adm-doors:not(.shut) .door-sign { opacity: 0; transition: none; }
.adm-doors.opening .door-sign { opacity: 0; }
.tray-shared-note .tray-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.tray-link.on .tray-count { background: var(--mustard); color: var(--ink); }
.pj-tray.on { color: #ffd76a; }
@media (min-width: 1101px) and (max-width: 1280px) { .est .motto { width: 0; min-width: 100%; } }   /* a long motto wraps under the logo instead of pushing the menu onto a second row */

/* ------------------------------------------------------------ Gus sightings (gus.js). Never explained. */
.gus svg { display: block; width: 100%; height: 100%; }
.gus.gus-gone { opacity: 0 !important; transition: opacity .2s !important; }
.gus-peek { position: fixed; z-index: 40; width: 64px; height: 146px; overflow: hidden; pointer-events: none; }
.gus-peeker { position: absolute; inset: 0; transform: translateX(-100%); transition: transform .55s cubic-bezier(.3, .7, .3, 1); pointer-events: auto; cursor: pointer; }
.gus-peeker.out { transform: translateX(-46%); }
.gus-peek-left .gus-peeker { transform: translateX(100%) scaleX(-1); }
.gus-peek-left .gus-peeker.out { transform: translateX(46%) scaleX(-1); }
.gus-sweeper { position: absolute; bottom: 6px; left: -60px; width: 40px; height: 92px; opacity: .55; cursor: pointer; z-index: 2;
  animation: gus-walk 9s linear forwards, gus-bob .6s ease-in-out infinite alternate; }
@keyframes gus-walk { to { left: calc(100% + 60px); } }
@keyframes gus-bob { to { margin-bottom: 3px; } }
.gus-lane { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.gus-lane .gus-sweeper { pointer-events: auto; }
.gus-g { color: #ff6b80; font-weight: bold; transition: opacity .3s; }
.gus-g.gus-gone { opacity: 0; }
.adm-doors .gus-shadow { position: absolute; z-index: 0; bottom: 6%; left: -15%; height: 62vh; aspect-ratio: 70 / 160; opacity: .95; filter: brightness(0); animation: gus-pass 2.2s ease-in-out forwards; pointer-events: none; }
.adm-doors:has(.gus-shadow) .door { background: linear-gradient(180deg, rgba(210, 225, 232, .74), rgba(170, 190, 200, .8)); }   /* a little thinner glass while someone walks past */
@keyframes gus-pass { to { left: 105%; } }
.gus-frame { position: absolute; right: 3%; bottom: 3%; width: 7%; aspect-ratio: 70 / 160; opacity: .6; pointer-events: none; z-index: 4; }
.gus-note { position: fixed; top: 34px; left: 50%; transform: translateX(-50%); z-index: 95; padding: 6px 14px; background: var(--mustard); color: var(--ink);
  font: bold 12px/1.2 'Courier New', monospace; letter-spacing: .12em; border: 2px solid var(--ink); box-shadow: 0 6px 16px rgba(0, 0, 0, .45); animation: gus-note 3.6s ease-in-out forwards; pointer-events: none; }
@keyframes gus-note { 0% { opacity: 0; transform: translate(-50%, -8px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.gus-caught { position: fixed; z-index: 96; width: 220px; padding: 8px 12px; text-align: center; background: #f7eccb; color: var(--ink); border: 3px double var(--red);
  font: 13px/1.25 var(--f-type); text-transform: uppercase; letter-spacing: .1em; transform: rotate(-6deg); box-shadow: 0 8px 22px rgba(0, 0, 0, .5); animation: gus-fade 4.2s ease-in-out forwards; pointer-events: none; }
@keyframes gus-fade { 0% { opacity: 0; } 8%, 85% { opacity: 1; } 100% { opacity: 0; } }
.gus-caught small { display: block; margin-top: 4px; font-size: 10.5px; letter-spacing: .06em; text-transform: none; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .gus-sweeper, .adm-doors .gus-shadow { display: none; } }
.gus-tally { margin: -6px 0 18px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: right; }
.gus-tally b { color: var(--mustard); font-weight: 400; }

/* Maps: zoom and pan (lab.js) */
.map-frame.zoomable { position: relative; }
.geo-map path { vector-effect: non-scaling-stroke; }
.map-frame.zoomable .geo-map { touch-action: pan-x pan-y; }
.map-frame.zoomed .geo-map { touch-action: none; cursor: grab; }
.map-frame.zoomed .geo-map:active { cursor: grabbing; }
.map-frame.zoomed { box-shadow: inset 0 0 0 1px rgba(240, 180, 60, .25); border-radius: 4px; }
.map-zoom { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 4px 0 0; }   /* under the map, so nothing covers it */
.map-zoom button { width: 28px; height: 26px; padding: 0; border-radius: 5px; border: 1px solid rgba(159, 184, 184, .7); background: rgba(28, 43, 49, .85); color: #f6efe0; font: 16px/1 var(--f-type); cursor: pointer; }
.map-zoom button:hover { background: #35505b; color: var(--mustard); }
.map-zoom button[hidden] { display: none; }
.map-hint { margin-right: auto; font: 11px var(--f-type); letter-spacing: .06em; color: var(--muted); transition: color .2s; }
.map-hint.flash { color: var(--mustard); }

/* ------------------------------------------------------------ "Greetings from…": a home town / home state postcard (Light Table) */
.postcard {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px 26px; align-items: center;
  margin: 0 0 18px; padding: 18px 22px; color: var(--ink); border-radius: 6px; box-shadow: var(--shadow);
  background: #f3e6c4; background-image: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .55), transparent 55%), repeating-linear-gradient(90deg, rgba(120, 80, 20, .03) 0 2px, transparent 2px 6px);
  border: 10px solid #fbf6ea; outline: 1px solid rgba(29, 23, 18, .2);
}
.pc-greet { margin: 0; font: 1.7rem/1 var(--f-script); color: var(--red); transform: rotate(-4deg); transform-origin: left; }
.pc-town { margin: 6px 0 0; font: clamp(2.4rem, 5.2vw, 4.4rem)/.92 var(--f-pulp); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere;
  color: #f0b43c; background: linear-gradient(180deg, #ffd76a 0 40%, #f08a3c 60%, #c8263a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: clamp(1px, .035em, 2px) #1d1712; filter: drop-shadow(.06em .06em 0 #1d1712); }   /* the big block letters of an old "large letter" postcard; outline and shadow scale with the letters */
.pc-front { container-type: inline-size; }
.pc-front .pc-town { white-space: nowrap; overflow-wrap: normal; font-size: min(4.4rem, calc(128cqw / var(--len, 8))); }   /* the whole name on one line, as big as fits */
.pc-state { margin: 6px 0 0; font: 1.4rem/1 var(--f-script); color: #2a4f86; }
.pc-facts { margin: 12px 0 0; font-size: 13px; line-height: 1.6; }
.pc-facts a { color: var(--red); white-space: nowrap; }
.pc-map { background: #20313a; border: 3px solid #fbf6ea; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); border-radius: 3px; padding: 6px; transform: rotate(1deg); }
.pc-map + .map-zoom { grid-column: 2; margin-top: -10px; }
.pc-map + .map-zoom .map-hint { color: var(--ink-2); }
.geo-focus path { fill: rgba(244, 233, 207, .05); stroke: rgba(244, 233, 207, .25); }
.geo-focus path.geo-hilite { fill: rgba(240, 180, 60, .32); stroke: #f6efe0; stroke-width: 1.4; }
.geo-focus .geo-pin circle { fill: var(--red); stroke: #fbf6ea; }
.geo-focus .geo-pin .geo-pin-dot { fill: #fbf6ea; }
.pc-dots .geo-pin text { display: none; }
.pc-dots .geo-pin:hover text, .pc-dots .geo-pin:focus text { display: inline; }
.pc-stamp { position: absolute; top: -6px; right: -6px; width: 62px; height: 72px; display: grid; place-content: center; text-align: center; transform: rotate(4deg);
  background: #2a4f86; color: #fbf6ea; border: 4px dotted #fbf6ea; outline: 2px solid #2a4f86; font-family: var(--f-type); }
.pc-stamp b { font: 1.4rem/1 var(--f-pulp); }
.pc-stamp small { font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.pc-postmark { position: absolute; top: 20px; right: 52px; width: 84px; height: 84px; display: grid; place-content: center; text-align: center; border-radius: 50%;
  border: 2px solid rgba(29, 23, 18, .45); color: rgba(29, 23, 18, .55); font: 9px/1.2 var(--f-type); letter-spacing: .1em; transform: rotate(-12deg); pointer-events: none;
  box-shadow: 30px 0 0 -28px rgba(29, 23, 18, .4); }
.pc-postmark small { display: block; margin-top: 3px; font-size: 7px; }
@media (max-width: 760px) {
  .postcard { grid-template-columns: minmax(0, 1fr); padding: 14px; border-width: 7px; }
  .pc-map + .map-zoom { grid-column: 1; margin-top: -6px; }
  .pc-postmark { display: none; }
  .pc-stamp { width: 50px; height: 58px; }
}

/* The postcard page: the card lying slightly askew on the desk, her slide clipped to it, the others from her town below */
.pc-nav { margin: 0 0 10px; }
.pc-desk { padding: 6px 10px 4px; }
.pc-desk .postcard { transform: rotate(-1.3deg); margin: 0 auto 6px; max-width: 1180px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 3px 8px rgba(0, 0, 0, .4); }
.postcard.pc-with-photo { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.15fr); }
@media (min-width: 1001px) { .postcard.pc-with-photo .pc-map + .map-zoom { grid-column: 3; } }
.pc-photo { position: relative; display: block; background: #fbf8ef; padding: 10px 10px 34px; transform: rotate(-3deg); box-shadow: 0 8px 18px rgba(0, 0, 0, .4); text-decoration: none; }
.pc-photo img { display: block; height: min(46vh, 380px); width: auto; max-width: min(300px, calc(100vw - 76px)); object-fit: cover; }   /* (a small phone: the tilted print stays on screen) */
.pc-photo:hover { transform: rotate(-1.5deg) scale(1.02); transition: transform .2s; }
.pc-clip { position: absolute; top: -16px; left: 50%; width: 18px; height: 44px; margin-left: -9px; border: 3px solid #8d949b; border-radius: 10px; }
.pc-caption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 1.05rem/1 var(--f-script); color: #2a2a6a; }
.pc-more { margin-top: 18px; }
.pc-pile { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.pc-mini { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px; background: #f3e6c4; border: 5px solid #fbf6ea; border-radius: 4px;
  color: var(--ink); text-decoration: none; transform: rotate(var(--tilt, 0deg)); box-shadow: 0 6px 14px rgba(0, 0, 0, .45); transition: transform .2s; }
.pc-mini:hover, .pc-mini:focus-visible { transform: rotate(0) translateY(-3px); }
.pc-mini-photo img { display: block; width: 74px; height: 92px; object-fit: cover; object-position: 50% 25%; border: 3px solid #fff; }
.pc-mini-text small { display: block; font: .9rem/1 var(--f-script); color: var(--red); }
.pc-mini-text { container-type: inline-size; min-width: 0; }
.pc-mini-text b { display: block; margin: 3px 0; font: 1.25rem/1 var(--f-pulp); font-size: min(1.25rem, calc(128cqw / var(--len, 8))); white-space: nowrap; text-transform: uppercase; color: #c8263a; }
.pc-mini-text i { font: 12px var(--f-type); font-style: normal; color: var(--ink-2); }
@media (max-width: 1000px) {
  .postcard.pc-with-photo { grid-template-columns: auto minmax(0, 1fr); }
  .pc-with-photo .pc-map { grid-column: 1 / -1; }
  .pc-with-photo .pc-map + .map-zoom { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .postcard.pc-with-photo { grid-template-columns: minmax(0, 1fr); }
  .pc-photo { justify-self: center; }
  .pc-photo img { height: 300px; }
  .pc-desk .postcard { transform: none; }
}
/* A state's postcard: three prints pinned on together */
.pc-collage { position: relative; width: 300px; height: min(48vh, 400px); }
.pc-collage .pc-print { position: absolute; padding: 8px 8px 28px; transform: rotate(calc(-6deg + var(--k) * 6deg)); left: calc(var(--k) * 46px); top: calc(var(--k) * 18px); z-index: calc(3 - var(--k)); }
.pc-collage .pc-print img { height: min(30vh, 250px); width: auto; max-width: 190px; }
.pc-collage .pc-print .pc-caption { bottom: 6px; font-size: .9rem; }
.pc-collage .pc-print:hover { z-index: 5; transform: rotate(0) scale(1.04); }
.pc-pointer { margin: -6px 0 14px; padding: 8px 14px; border-left: 3px solid var(--mustard); background: rgba(240, 180, 60, .08); font-size: 13px; }
.pc-pointer a { color: var(--mustard); }
@media (max-width: 560px) { .pc-collage { width: 260px; height: 330px; justify-self: center; } .pc-collage .pc-print img { height: 220px; max-width: 160px; } .pc-collage .pc-print { left: calc(var(--k) * 34px); } }
.tray-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 1000px) and (min-width: 561px) { .pc-with-photo .pc-map { width: min(100%, 560px); justify-self: center; } .pc-with-photo .pc-map + .map-zoom { width: min(100%, 560px); justify-self: center; } }
.aux-town a, .aux-greet { white-space: nowrap; text-decoration: none; } .aux-greet { opacity: .75; } .aux-greet:hover { opacity: 1; }

/* ------------------------------------------------------------ Inside the Lab: the cutaway (the_lab.php) */
.cutaway { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 16px 22px; align-items: start; }
.cutaway-sheet { margin: 0; padding: 14px; background: #efe3c2; border-radius: 4px; box-shadow: var(--shadow); transform: rotate(-.4deg);
  background-image: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .5), transparent 55%), repeating-linear-gradient(0deg, rgba(120, 80, 20, .03) 0 2px, transparent 2px 6px); }
.cutaway-svg { display: block; width: 100%; height: auto; }
.cw-room { cursor: pointer; outline: none; }
.cw-bg { fill: #e9e2cf; stroke: #1d1712; stroke-width: 2.5; transition: fill .15s; }
.cw-cabins .cw-bg, .cw-hold .cw-bg { fill: #e3d6b6; } .cw-classroom .cw-bg { fill: #f3dbe2; } .cw-frontdesk .cw-bg { fill: #ece0c2; }
.cw-lighttable .cw-bg { fill: #fbf3d6; } .cw-bridge .cw-bg { fill: #d6e3e7; } .cw-drive .cw-bg { fill: #c3ccd0; } .cw-supply .cw-bg { fill: #efe7d4; }
.cw-placement .cw-bg { fill: #dde8ec; } .cw-core .cw-bg { fill: #233238; } .cw-projection .cw-bg { fill: #2c2a33; } .cw-workbench .cw-bg { fill: #eadfc4; }
.cw-tanks .cw-bg { fill: #3a2426; } .cw-cabinets .cw-bg { fill: #dfe0dc; } .cw-closet .cw-bg { fill: #6b5a48; } .cw-hatch .cw-bg { fill: #cfd8db; }
.cw-room:hover .cw-bg, .cw-room:focus-visible .cw-bg, .cw-room.on .cw-bg { fill: #ffd76a; }
.cw-core:hover .cw-bg, .cw-projection:hover .cw-bg, .cw-tanks:hover .cw-bg, .cw-core.on .cw-bg, .cw-projection.on .cw-bg, .cw-tanks.on .cw-bg { fill: #5a4a20; }
.cw-room.on .cw-bg { stroke: #c8263a; stroke-width: 4; }
.cw-label { font: 700 13px var(--f-type); letter-spacing: .06em; text-transform: uppercase; fill: #1d1712; paint-order: stroke; stroke: rgba(255, 250, 235, .85); stroke-width: 3px; pointer-events: none; }
.cw-core .cw-label, .cw-projection .cw-label, .cw-tanks .cw-label, .cw-closet .cw-label { fill: #f6efe0; stroke: rgba(0, 0, 0, .6); }
.cw-no { fill: #c8263a; }
.cw-tiny { font: 9px var(--f-type); fill: #1d1712; letter-spacing: .06em; }
.cw-chalk { font: 11px var(--f-type); fill: #f4f1e6; letter-spacing: .08em; }
.cw-chalk.cw-tiny { font-size: 8.5px; fill: #f4f1e6; }
.cw-clockface { font: 700 13px var(--f-type); fill: #1d1712; }
.cw-fig { font: italic 12px var(--f-type); fill: #4f4232; }
.cw-fig1 .cw-fig { font-size: 9.5px; }
.cw-dots { stroke: #4f4232; stroke-width: 1.2; stroke-dasharray: 3 4; fill: none; }
.cw-pulse { animation: cw-pulse 2.6s ease-in-out infinite; } @keyframes cw-pulse { 50% { opacity: .45; } }
.cw-blink { animation: cw-blink 1.4s steps(1) infinite; } @keyframes cw-blink { 50% { opacity: .25; } }
.cw-spin { animation: cw-spin 6s linear infinite; } @keyframes cw-spin { to { transform: rotate(360deg); } }
.cw-arm { animation: cw-arm 1.1s ease-in-out infinite alternate; animation-delay: var(--d); transform-box: fill-box; transform-origin: top; } @keyframes cw-arm { to { transform: rotate(9deg); } }
.cw-exhaust { animation: cw-pulse 1.8s ease-in-out infinite; }
.cutaway-panel { position: sticky; top: 12px; transform: rotate(.6deg); }
.cutaway-panel .form-no { margin: 0 0 4px; }
.cw-title { margin: 0 0 8px; font: 1.6rem/1.05 var(--f-pulp); color: var(--red); }
.cutaway-panel .typed { color: var(--ink); line-height: 1.6; font-size: 14px; }
.cw-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.cw-clock b { color: var(--red); }
.cutaway-list { grid-column: 1 / -1; list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.cutaway-list button { background: rgba(244, 233, 207, .08); color: var(--text); border: 1px solid rgba(244, 233, 207, .25); border-radius: 14px; padding: 3px 11px; font: 12px var(--f-type); cursor: pointer; }
.cutaway-list button b { color: var(--mustard); font-weight: 400; margin-right: 3px; }
.cutaway-list button:hover, .cutaway-list button.on { background: var(--mustard); color: var(--ink); }
.cutaway-list button.on b, .cutaway-list button:hover b { color: var(--red); }
.cw-history-link { margin: 10px 0 0; }
@media (max-width: 1000px) { .cutaway { grid-template-columns: minmax(0, 1fr); } .cutaway-panel { position: static; transform: none; } .cutaway-sheet { transform: none; padding: 6px; } }
@media (prefers-reduced-motion: reduce) { .cw-pulse, .cw-blink, .cw-spin, .cw-arm, .cw-exhaust { animation: none; } }
@media (max-width: 700px) { .cutaway-sheet { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cutaway-svg { min-width: 760px; } .cutaway-sheet::after { content: 'swipe to look around →'; display: block; text-align: right; font: 11px var(--f-type); color: var(--ink-2); padding: 2px 6px 0; } }
/* the cutaway's margin notes: the decks not shown, the pencil note, the title block */
.cw-ghost { fill: none; stroke: #4f4232; stroke-width: 1.5; stroke-dasharray: 7 6; }
.cw-ghost2 { opacity: .5; }
.cw-note-type { font: 12px var(--f-type); letter-spacing: .18em; fill: #4f4232; }
.cw-faint { font-size: 10px; letter-spacing: .08em; opacity: .7; font-style: italic; }
.cw-stamp { fill: rgba(200, 38, 58, .06); stroke: #c8263a; stroke-width: 3; stroke-dasharray: 0; }
.cw-stamp-text { font: 700 16px var(--f-type); letter-spacing: .14em; fill: #c8263a; }
.cw-pencil text { font: 17px var(--f-script); fill: #3a3f6e; }
.cw-pencil .cw-initials { font-size: 15px; }
.cw-tb { fill: #f6efdc; stroke: #1d1712; stroke-width: 2; }
.cw-tb-lines { stroke: #1d1712; stroke-width: 1; fill: none; }
.cw-tb-head { font: 700 12px var(--f-type); letter-spacing: .16em; fill: #1d1712; }
.cw-tb-big { font: 15px var(--f-pulp); letter-spacing: .06em; fill: #c8263a; }
.cw-tb-small { font: 10.5px var(--f-type); letter-spacing: .06em; fill: #1d1712; }
.cw-fine { font-size: 12px !important; color: var(--ink-2) !important; font-style: italic; }
/* the report's 📮 postcard: a little perforated postage stamp beside Put in My Slide Tray */
.tray-row { flex-wrap: nowrap; }
.pc-stampbtn { flex: none; display: block; width: 38px; height: 44px; margin-left: 4px; transform: rotate(6deg); transition: transform .15s;
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, .45)); }
.pc-stampbtn svg { display: block; width: 100%; height: 100%; }
.pc-stampbtn text { font: 700 8px var(--f-type); fill: #fbf8ef; }
.pc-stampbtn:hover, .pc-stampbtn:focus-visible { transform: rotate(-4deg) scale(1.12); outline: none; }
.aux-actions { align-items: center; } .aux-actions .pc-stampbtn { margin-left: 2px; }
@media (min-width: 1101px) and (max-width: 1280px) { .aux-actions .tray-btn .tl-long { display: none; } .aux-actions .tray-btn .tl-short { display: inline; } }   /* the buttons and the stamp on one row */
/* the stamp, inline beside a name (the Register, the Light Table's state pointer) */
.pc-stampbtn.pc-stamp-sm { display: inline-block; width: 20px; height: 23px; margin: 0 6px 0 0; vertical-align: middle; transform: rotate(6deg); filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .4)); }
.pc-stamp-sm text { display: none; }
.aux-town .pc-stampbtn { margin-right: 7px; }
.pc-nav { align-items: center; }
.pc-front .pc-town.pc-two { white-space: normal; line-height: .95; }   /* a long two-word town on two big lines */
/* the Slide of the Moment's postcard stamp, stuck on the print's corner; the print and its stamp tilt (and straighten on hover) together */
.moment-print { transform: rotate(2deg); transition: transform .3s; }
.moment-print:hover { transform: rotate(0) scale(1.01); }
.moment-print .photo-frame, .moment-print .photo-frame:hover { transform: none; }
.moment-stamp { position: absolute; right: 8px; bottom: 6px; z-index: 3; }
.moment-stamp .pc-stampbtn { width: 44px; height: 51px; margin: 0; transform: rotate(9deg); }
.moment-stamp .pc-stampbtn:hover { transform: rotate(0) scale(1.12); }
.moment-print { position: relative; display: inline-block; max-width: 100%; }
.featured { text-align: center; }
/* the Light Table pop-up: her postcard stamp on the photo's corner */
.lb-stamp { position: absolute; z-index: 3; }
.lb-stamp[hidden] { display: none; }
.lb-stamp .pc-stampbtn { width: 44px; height: 51px; margin: 0; transform: rotate(9deg); }
.lb-stamp .pc-stampbtn:hover { transform: rotate(0) scale(1.12); }
/* the slide page: the photo's mount, with her postcard stamp stuck on its corner, hanging off the edge */
.slide-print { position: relative; display: inline-block; min-width: 0; max-width: calc(100% - 124px); vertical-align: top; }
.slide-stage .slide-print .photo-frame { max-width: 100%; }
.print-stamp { position: absolute; right: -24px; bottom: -22px; z-index: 3; }
.print-stamp .pc-stampbtn { width: 46px; height: 53px; margin: 0; transform: rotate(9deg); }
.print-stamp .pc-stampbtn:hover { transform: rotate(0) scale(1.12); }
@media (max-width: 700px) { .slide-print { max-width: 100%; } .print-stamp { right: 2px; bottom: -58px; } }   /* phones: under the print's corner, clear of the screen edge */
.slide-figure.has-strip .roll-strip { margin-top: 26px; }   /* room for the stamp hanging off the print's corner */
@media (max-width: 700px) { .slide-figure .roll-strip { margin-top: 66px; } .slide-figure:has(.print-stamp) .roll-strip { margin-top: 84px; } }   /* phones: the postcard stamp hangs under the print's corner; the film starts below it */
/* Filing Cabinets: the brass label and pull centred on the drawer front, like a real cabinet; the Order switch on the right */
.cd-front { display: grid; grid-template-columns: 1fr auto 1fr; justify-content: initial; }
.cd-front .drawer-plate { grid-column: 2; justify-self: center; }
.cd-front .cases-order { grid-column: 3; justify-self: end; }
@media (max-width: 700px) { .cd-front { grid-template-columns: 1fr; justify-items: center; } .cd-front .drawer-plate, .cd-front .cases-order { grid-column: 1; justify-self: center; } }

/* Garbled lettering: the ship's-translator stamp on a slide whose signs came out as gibberish (helpers.php garbled_stamp) */
.stamp-garbled { font-size: 13px; color: #24508f; border-color: #24508f; background: rgba(250, 246, 234, .82); mix-blend-mode: normal; transform: rotate(-7deg); max-width: 15em; }
.stamp-garbled small { display: block; font-size: 9px; letter-spacing: .14em; margin-top: 3px; padding-top: 3px; border-top: 1px solid currentColor; }
.print-garbled { position: absolute; left: -22px; bottom: 34px; z-index: 3; }   /* slide page: over the print's bottom-left corner (the corner tags are at the top, the postcard stamp at the bottom right) */
.moment-garbled { position: absolute; left: 10px; bottom: 14px; z-index: 3; font-size: 11px; }   /* home: bottom left (the Slide of the Moment stamp has the top) */
.lb-gstamp { position: absolute; z-index: 3; pointer-events: none; }
.lb-gstamp[hidden] { display: none; }
.lb-gstamp .stamp-garbled { font-size: 12px; }
.report-dl dd small.gus-pencil { display: block; margin-top: 3px; font: 1.05rem/1.2 var(--f-script); color: var(--ink-2); }   /* Gus's pencilled margin note */
@media (max-width: 700px) { .print-garbled { left: 6px; bottom: 26px; font-size: 10px; } .moment-garbled { font-size: 9px; } .lb-gstamp .stamp-garbled { font-size: 10px; } }
a.stamp-garbled { pointer-events: auto; text-decoration: none; cursor: pointer; transition: transform .2s; }   /* the stamp opens the explanation */
a.stamp-garbled:hover, a.stamp-garbled:focus-visible { transform: rotate(-3deg) scale(1.06); opacity: 1;
  color: #1b3f74; border-color: #1b3f74; background: rgba(250, 246, 234, .96); }   /* stays blue ink (the site's pink link hover was unreadable on the cream) */
.lb-gstamp a.stamp-garbled { pointer-events: auto; }
.typed p[id] { scroll-margin-top: 120px; }   /* clear of the timeline bar pinned at the top */
/* arriving from a link (the garbled-lettering stamp → #ships-translator): the paragraph is flagged like a marked-up page,
   with a mustard band, a red margin rule, a little "read this" tab and one slow pulse */
.typed p[id]:target { position: relative; margin-top: 34px; padding: 12px 14px 12px 18px; border-radius: 3px;
  background: rgba(240, 180, 60, .32); border-left: 5px solid var(--red); box-shadow: 0 0 0 3px rgba(200, 38, 58, .55), 0 6px 18px rgba(0, 0, 0, .18);
  animation: para-flag 1.6s ease-out .3s 2; }
.typed p[id]:target::before { content: '☞ The part you came for';   /* with a name in its marker: "☞ Translation errors · the part you came for" */ position: absolute; left: -5px; bottom: 100%; max-width: calc(100% + 5px); padding: 3px 10px 2px;
  font: 700 12px/1.4 var(--f-type); letter-spacing: .12em; text-transform: uppercase; color: #fff4e6; background: var(--red); border-radius: 3px 3px 0 0; }
.typed p[id][data-flag]:target::before { content: '☞ ' attr(data-flag) ' · the part you came for'; }
@keyframes para-flag { 0% { box-shadow: 0 0 0 3px rgba(200, 38, 58, .55), 0 0 0 0 rgba(240, 180, 60, .9); } 100% { box-shadow: 0 0 0 3px rgba(200, 38, 58, .55), 0 0 0 22px rgba(240, 180, 60, 0); } }
@media (prefers-reduced-motion: reduce) { .typed p[id]:target { animation: none; } }
@media (max-width: 700px) { .typed p[id] { scroll-margin-top: 170px; } .typed p[id]:target { margin-top: 52px; } .typed p[id]:target::before { font-size: 11px; letter-spacing: .06em; } }   /* a long tab wraps upward, clear of the text */

/* The Projectionist's Cue Card (keys.js): press ? anywhere */
.cue { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px; background: rgba(8, 6, 12, .62); }
.cue-card { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 22px 14px; border-radius: 4px;
  background: var(--paper) repeating-linear-gradient(transparent 0 27px, rgba(66, 112, 170, .18) 27px 28px); color: var(--ink);
  border-top: 6px solid var(--red); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); transform: rotate(-.6deg); font: 14px/1.5 var(--f-body); }
.cue-form { margin: 0 0 8px; font: 11px var(--f-type); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.cue-x { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 18px; color: var(--ink-2); cursor: pointer; }
.cue-x:hover, .cue-x:focus-visible { color: var(--red); }
.cue-sec h3 { margin: 10px 0 4px; font: 1.05rem var(--f-pulp); color: var(--red); }
.cue-sec dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 0; }
.cue-sec dt { white-space: nowrap; }
.cue-sec dd { margin: 0; }
.cue kbd { display: inline-block; min-width: 1.7em; padding: 1px 6px; text-align: center; font: 700 12px/1.5 var(--f-type); color: var(--ink);
  background: #fffaf0; border: 1px solid var(--paper-edge); border-bottom-width: 3px; border-radius: 4px; }
.cue-dots { color: var(--ink-2); }
.cue-more { margin-top: 10px; border-top: 1px dashed var(--paper-edge); padding-top: 6px; }
.cue-more summary { cursor: pointer; font: 12px var(--f-type); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.cue-sec-small h3 { font-size: .95rem; }
.cue-sec-small dl { font-size: 13px; }
.cue-foot { margin: 12px 0 0; font-size: 12px; color: var(--ink-2); }
@media (hover: none) and (pointer: coarse) { .foot-keys { display: none; } }   /* phones and tablets: no keyboard */

/* The Time Dial (_requisition.php): a brass-ringed rotary dial of the years in the story on this wall */
.time-dial { position: relative; }
.time-dial > summary { list-style: none; cursor: pointer; }
.time-dial > summary::-webkit-details-marker { display: none; }
.dial-knob.on { background: var(--red); color: #fff4e6; }
.dial-pop { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 45; width: 300px; transform: translateX(-50%); padding: 14px 16px 12px;
  background: #fff7e3; color: var(--ink); border-radius: 8px; border-top: 5px solid var(--red); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.dial-title { margin: 0 0 10px; text-align: center; font: 1.15rem var(--f-pulp); color: var(--red); }
.dial-face { position: relative; width: 240px; height: 240px; margin: 0 auto; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #2f2442 0 35%, #1a1424 70%); border: 7px solid #c9a24e;
  box-shadow: 0 0 0 2px #6d4f1c, inset 0 0 0 2px #6d4f1c, inset 0 6px 18px rgba(0, 0, 0, .6), 0 6px 14px rgba(0, 0, 0, .35); }
.dial-year { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  transform: rotate(var(--a)) translate(84px) rotate(calc(-1 * var(--a))); display: grid; place-items: center; text-decoration: none;
  background: radial-gradient(circle at 40% 35%, #fffaf0, #e9dcbc); color: var(--ink); font: 700 12px var(--f-type);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35), 0 0 0 2px #6d4f1c; transition: background .15s, color .15s; }
.dial-face.dial-many { width: 290px; height: 290px; }   /* more than 12 years: a bigger dial, smaller stops */
.time-dial:has(.dial-many) .dial-pop { width: 330px; }
.dial-many .dial-year { width: 40px; height: 40px; margin: -20px 0 0 -20px; font-size: 10px; transform: rotate(var(--a)) translate(116px) rotate(calc(-1 * var(--a))); }
.dial-many .dial-needle { width: 92px; }
.dial-year:hover, .dial-year:focus-visible { background: var(--mustard); color: var(--ink); }
.dial-year.on { background: var(--red); color: #fff4e6; }
.dial-needle { position: absolute; left: 50%; top: 50%; width: 62px; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--mustard);
  transform-origin: 0 50%; transform: rotate(var(--needle)); transition: transform .55s cubic-bezier(.3, 1.6, .5, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.dial-any { position: absolute; left: 50%; top: 50%; z-index: 1; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; text-decoration: none; padding: 6px;
  background: radial-gradient(circle at 40% 35%, #4a3a66, #2b2040); color: var(--mustard); border: 3px solid #c9a24e;
  font: 700 10.5px/1.15 var(--f-type); text-transform: uppercase; letter-spacing: .08em; }
.dial-any.on { color: #fff4e6; }
.dial-any:hover, .dial-any:focus-visible { color: #fff; border-color: var(--mustard); }
.dial-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; text-align: center; color: var(--ink-2); }
.dial-admin { margin: 8px 0 0; padding: 6px 8px; font: 12px/1.35 var(--f-body); background: rgba(240, 180, 60, .25); border-left: 3px solid var(--mustard); }
@media (prefers-reduced-motion: reduce) { .dial-needle { transition: none; } }
@media (max-width: 700px) { .dial-pop { left: 0; transform: none; max-width: calc(100vw - 32px); } }

/* The family edition (Family.php) */
.family-preview-bar { position: sticky; top: 0; z-index: 60; margin: 0; padding: 8px 16px; text-align: center; font: 14px var(--f-body);
  background: #1f3b33; color: #d8fff0; border-bottom: 2px solid #9ff0cf; }
.family-preview-bar button { margin-left: 8px; padding: 3px 10px; font: inherit; color: #1f3b33; background: #9ff0cf; border: 0; border-radius: 4px; cursor: pointer; }
.foot-family b { color: var(--mint); }
.charter-family { margin: 0 0 14px; padding: 8px 12px; font: 14px/1.45 var(--f-body); background: rgba(143, 227, 200, .25); border-left: 4px solid #2f7d5f; }
/* Visitor Admission Form: the way to the family edition (pg.fakepics.nu) */
.admission-pg { margin: 14px 0 0; padding: 10px 14px 6px; background: rgba(143, 227, 200, .28); border-left: 4px solid #2f7d5f; border-radius: 3px; }
.admission-family { margin: 0; font: 14px/1.45 var(--f-body); color: var(--ink); }
.admission-family a { color: #1f5c45; font-weight: 700; }
/* Visitor Admission Form: the lobby display, a peek at the family edition (Lobby.php): three small tilted prints, or the owner's montage */
.lobby { margin: 12px 0 4px; text-align: center; min-width: 0; }
.admission { grid-template-columns: minmax(0, 1fr); }
/* on the green panel: a dark-green marquee label with mint lettering */
.lobby-title { display: inline-block; margin-bottom: 10px; padding: 5px 14px 4px; font: 12px/1.3 var(--f-type); text-transform: uppercase; letter-spacing: .14em;
  color: #d9fff2 !important; background: #1f5c45; border-radius: 3px; box-shadow: 0 0 0 2px rgba(31, 92, 69, .25), 0 2px 6px rgba(0,0,0,.2); text-decoration: none;
  text-shadow: 0 0 6px rgba(143, 227, 200, .7); }
.lobby-title:hover, .lobby-title:focus-visible { background: #2f7d5f; color: #fff !important; }
.lobby-prints { display: flex; justify-content: center; align-items: center; gap: clamp(8px, 3vw, 22px); padding: 6px 0 10px; }
.lobby-print { display: block; flex: 0 1 auto; min-width: 0; padding: 6px 6px 18px; background: #fbf6ea; box-shadow: 0 4px 12px rgba(0,0,0,.28); transform: rotate(-4deg); transition: transform .2s; }
.lobby-print:nth-child(2) { transform: rotate(3deg) translateY(-4px); }
.lobby-print:nth-child(3) { transform: rotate(-1.5deg) translateY(2px); }
.lobby-print:hover, .lobby-print:focus-visible { transform: rotate(0) scale(1.06); z-index: 1; position: relative; }
.lobby-print img { display: block; height: 120px; width: auto; max-width: 100%; object-fit: cover; }
.lobby-montage { display: block; max-width: 420px; margin: 0 auto; transform: rotate(-1deg); }
.lobby-montage img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
@media (max-width: 560px) { .lobby-print { padding: 4px 4px 12px; } .lobby-print img { height: 84px; } }
.lobby-loose .lobby-montage img { box-shadow: none; border-radius: 0; }
/* a montage whose prints are links (Lobby::map): an invisible outline over each tilted print, lit on hover / keyboard focus */
.lobby-mapped { position: relative; }
.lobby-mapped svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lobby-desk rect { fill: transparent; }
.lobby-spot polygon { fill: transparent; stroke: transparent; stroke-width: 4; vector-effect: non-scaling-stroke; transition: fill .15s, stroke .15s; }
.lobby-spot:hover polygon, .lobby-spot:focus-visible polygon { fill: rgba(255, 255, 255, .14); stroke: #8fe3c8; }
.lobby-desk:focus-visible rect { stroke: #8fe3c8; stroke-width: 3; vector-effect: non-scaling-stroke; }
.lobby-mapped a:focus { outline: none; }
.lobby-wide .lobby-montage { max-width: 100%; transform: rotate(-.4deg); }
/* Visitor Admission Form: the census board, slides on each site (main = adults only, family = G & PG, linking to pg.fakepics.nu) */
.census { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 0; }
.census-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px 9px; border: 2px solid var(--ink); border-radius: 3px; background: #fffdf6;
  text-decoration: none; color: var(--ink) !important; box-shadow: 3px 3px 0 rgba(0,0,0,.18); text-align: center; }
.census-label { font: 11px/1.25 var(--f-type); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); }
.census-n { font: 700 clamp(1.7rem, 6vw, 2.3rem)/1 var(--f-type); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--red); }
.census-sub { font: 12px/1.2 var(--f-type); color: var(--ink-2); }
.census-family { border-color: #2f7d5f; background: rgba(143, 227, 200, .22); }
.census-family .census-n { color: #1f5c45; }
.census-family:hover, .census-family:focus-visible { background: rgba(143, 227, 200, .4); }
/* the census as movie-poster rating blocks: a big letter in a box beside the rating word, the "Rated R for…" line, then the counts */
.rating-card { --rc: var(--ink); gap: 7px; padding: 12px 12px 8px; text-decoration: none; color: var(--ink); }
.census-family.rating-card { --rc: #1f5c45; }
.rating-block { display: flex; align-items: stretch; width: 100%; max-width: 300px; min-height: 92px; border: 3px solid var(--rc); background: #fffdf6; }
.rating-letter { display: flex; align-items: center; justify-content: center; min-width: 1.15em; padding: 0 .12em; background: var(--rc); color: #fffdf6;
  font: 900 52px/1 "Arial Black", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.04em; }
.rating-text { display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 5px 8px; text-align: left; }
.rating-word { font: 900 15px/1.05 "Arial Black", "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; letter-spacing: .02em; color: var(--rc);
  padding-bottom: 4px; border-bottom: 2px solid var(--rc); text-wrap: balance; }
.rating-note { margin-top: 4px; font: 700 10.5px/1.25 "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--rc); }
.rating-why { max-width: 300px; font: italic 12px/1.35 var(--f-type); color: var(--ink-2); text-wrap: balance; }
.rating-stats { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 7px; border-top: 1px dashed color-mix(in srgb, var(--rc) 45%, transparent); width: 100%; }
.rating-stats .census-sub { text-align: left; line-height: 1.35; }
.rating-board { margin-top: auto; font: 700 9px/1.2 "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; letter-spacing: .16em; color: color-mix(in srgb, var(--rc) 70%, transparent); }
@media (max-width: 600px) {
  .census:has(.rating-card) { grid-template-columns: 1fr; }
  .rating-letter { font-size: 46px; }
}
.census-label { text-wrap: balance; }
.census-sub span { white-space: nowrap; }
@media (max-width: 480px) {
  .census { gap: 8px; }
  .census-cell { padding: 8px 4px 7px; }
  .census-label { font-size: 10px; letter-spacing: .05em; }
  .census-sub { font-size: 11px; }
}
@media (max-width: 480px) { .lobby-title { font-size: 10.5px; letter-spacing: .03em; padding: 5px 8px 4px; white-space: nowrap; } .admission-pg { padding: 10px 10px 6px; } }

/* the signed-in owner only (owner_here()): ✎ edit stamps and the Control Room pill; visitors never get these */
.admin-pill { position: fixed; left: 12px; bottom: 12px; z-index: 85; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(17, 13, 24, .92); border: 1px solid rgba(143, 227, 200, .35); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); font: 12px/1.4 var(--f-type); }
.admin-pill a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 24px; padding: 0 11px; border-radius: 999px; line-height: 1; color: var(--mint); text-decoration: none; white-space: nowrap; }
.admin-pill a svg { display: block; flex: none; }
.admin-pill a span { position: relative; top: .2em; }   /* Special Elite's capitals are 9 px tall but sit high in its line box (and it reports a 4 px cap height, so text-box trimming is off too): 0.2em down centres them */
.admin-pill .admin-pill-home svg { position: relative; top: -1px; }
.admin-pill a:hover, .admin-pill a:focus-visible { background: rgba(143, 227, 200, .15); color: #fff; }
.admin-pill .admin-pill-edit { background: var(--mustard); color: #1d1712; }
.admin-pill .admin-pill-edit:hover { background: #ffd27a; color: #1d1712; }
.admin-pill .admin-pill-home { width: 28px; padding: 0; }
.report-head { position: relative; }
.admin-edit { position: absolute; right: 0; top: 1.9em; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 9px; border-radius: 999px; font: 12px/1 var(--f-type); letter-spacing: .04em; text-decoration: none; color: #1d1712 !important; background: var(--mustard); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.admin-edit svg { display: block; flex: none; }
.admin-edit span { position: relative; top: .2em; }   /* (the same Special Elite capitals fix as the owner pill) */
.admin-edit:hover { background: #ffd27a; }
.tile-edit { position: absolute; top: 6px; left: 6px; z-index: 3; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 14px; color: #1d1712; background: var(--mustard); box-shadow: 0 2px 6px rgba(0,0,0,.5); opacity: 0; transition: opacity .15s; cursor: pointer; }
.tile:hover .tile-edit, .tile:focus-visible .tile-edit, .folder:hover .tile-edit, .folder:focus-visible .tile-edit, .badge:hover .tile-edit, .badge:focus-visible .tile-edit { opacity: 1; }
.tile-edit-right { left: auto; right: 6px; }
.owner-editable:hover > .tile-edit, .owner-editable:focus-visible > .tile-edit, .owner-editable:focus-within > .tile-edit { opacity: 1; }
@media (hover: none) { .tile-edit { opacity: .85; } }
@media print { .admin-pill, .admin-edit, .tile-edit { display: none !important; } }
.folder > .tile-edit-right { top: 0; right: 4px; width: 24px; height: 24px; font-size: 13px; }   /* beside the file tab, clear of the folder's stamp */

/* Drop-downs draw their own arrow (2026-10-02): Opera swapped the skinned arrow for a plain grey button on hover.
   The chevron is two small gradients in the text colour, so it follows every theme. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 28px; cursor: pointer;
}
select:not([multiple]):not([size]):disabled { cursor: default; opacity: .6; }