/* ============================================================
   THE SPOOK SHOW PRESS
   Horrorfest v3 design system.

   One press, three paper stocks. Every colour in the site comes
   from the variables in the theme blocks below, including the
   colours inside inline SVG art, which takes its fills from the
   ink classes rather than from hardcoded hex values. Adding a
   fourth stock later means adding one block here and nothing else.

   Reference mockups: mockups/j-spook-press-themed.html (index),
   k-film-page.html (film), l-voting-week.html (special edition).
   ============================================================ */

/* ---------- 1. type, self hosted ---------- */

@font-face {
  font-family: 'Rye';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/rye-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rye';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/rye-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/special-elite-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/special-elite-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. the three paper stocks ---------- */

:root,
html[data-theme='midnight'] {
  --paper: #171a1f;
  --paper-2: #1f232a;
  --ink: #e8ddc0;
  --verm: #d84a2a;
  --teal: #86a892;
  --muted: #7d8474;
  --shadow: rgba(0, 0, 0, .45);
  --grain-ink: #ffffff;
  --grain-opacity: .055;
}
html[data-theme='bone'] {
  --paper: #e9dfc8;
  --paper-2: #e0d4b8;
  --ink: #191309;
  --verm: #c73418;
  --teal: #2b6a5d;
  --muted: #8b7f63;
  --shadow: rgba(25, 19, 9, .25);
  --grain-ink: #000000;
  --grain-opacity: .05;
}
html[data-theme='oxblood'] {
  --paper: #491511;
  --paper-2: #571f18;
  --ink: #f0e4c4;
  --verm: #e2a33e;
  --teal: #9fb7a4;
  --muted: #a08573;
  --shadow: rgba(20, 4, 2, .4);
  --grain-ink: #ffffff;
  --grain-opacity: .05;
}

:root {
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --type: 'Special Elite', 'Courier New', monospace;
  --wood: 'Rye', Georgia, serif;
  --measure: 60ch;
}

/* ---------- 3. base ---------- */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--paper); }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.5;
  overflow-x: hidden;
  transition: background-color .35s, color .35s;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }

/* pressed paper grain, laid over everything */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: var(--grain-opacity);
  background-color: var(--grain-ink);
  -webkit-mask-image: var(--grain-mask);
  mask-image: var(--grain-mask);
  --grain-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

/* hand pulled edges. Applied only to small elements: headings, stamps,
   seals, rules. Never to a large scrolling container, see 7.10. */
.rough  { filter: url(#press-rough); }
.rough2 { filter: url(#press-rough-fine); }

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

/* ---------- 4. ink classes for inline SVG ---------- */

.i-paper  { fill: var(--paper); }
.i-paper2 { fill: var(--paper-2); }
.i-ink    { fill: var(--ink); }
.i-verm   { fill: var(--verm); }
.i-teal   { fill: var(--teal); }
.i-muted  { fill: var(--muted); }
.s-paper  { stroke: var(--paper); }
.s-ink    { stroke: var(--ink); }
.s-verm   { stroke: var(--verm); }
.s-teal   { stroke: var(--teal); }
.s-muted  { stroke: var(--muted); }
.f-none   { fill: none; }

/* ---------- 5. sheet ---------- */

.press {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 16px 90px;
}

/* ---------- 6. masthead and nav ---------- */

.masthead { text-align: center; padding: 30px 0 6px; position: relative; }

.misreg { position: relative; display: inline-block; transform: rotate(-1.6deg); }
.misreg .ghost {
  position: absolute; inset: 0; z-index: 0;
  color: var(--verm);
  transform: translate(4px, 3px);
}
.misreg .top { position: relative; z-index: 1; }

.mast {
  font-family: var(--wood);
  font-weight: 400;
  font-size: clamp(38px, 9vw, 92px);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.mast--compact { font-size: clamp(32px, 6.5vw, 54px); }

.mast-sub {
  font-family: var(--type);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 10px;
  transform: rotate(-.8deg);
}

.nav {
  margin: 20px auto 0;
  display: flex;
  justify-content: center;
  gap: 8px 22px;
  flex-wrap: wrap;
  font-family: var(--type);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  padding: 9px 8px;
  transform: rotate(.4deg);
}
.nav a { padding: 1px 4px; }
.nav a:hover, .nav a:focus-visible { color: var(--verm); }
.nav a[aria-current='page'] {
  background: var(--verm);
  color: var(--paper);
  transform: rotate(-2deg);
  display: inline-block;
}

.crumb {
  font-family: var(--type);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}
.crumb b { color: var(--teal); font-weight: 400; }

/* ---------- 7. section heads ---------- */

.playhead { text-align: center; margin: 54px 0 20px; }
.playhead .small {
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--verm);
}
.playhead h2, .playhead h3 {
  font-family: var(--wood);
  font-weight: 400;
  font-size: clamp(22px, 4.6vw, 36px);
  text-transform: uppercase;
  line-height: 1.05;
  margin-top: 2px;
}
.playhead .rule { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.playhead .rule::before,
.playhead .rule::after { content: ''; flex: 1; border-top: 2px solid var(--ink); }
.playhead .rule svg { width: 14px; height: 14px; flex: none; }

/* ---------- 8. the hero plate ---------- */

.hero { position: relative; margin-top: 34px; }
.hero .art { display: block; width: 100%; height: auto; transform: rotate(-.5deg); }
.hero .info {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: -64px 0 0 auto;
  transform: rotate(1deg);
}
.hero .sheet-card {
  background: var(--paper-2);
  padding: 20px 22px 18px;
  clip-path: polygon(0 4%, 3% 0, 97% 1%, 100% 6%, 99% 96%, 96% 100%, 2% 99%, 0 94%);
  box-shadow: 0 10px 24px var(--shadow);
}
.hero .meta {
  font-family: var(--type);
  font-size: 13px;
  color: var(--teal);
  letter-spacing: .06em;
  padding-right: 78px;
}
.hero .meta b { color: var(--ink); font-weight: 400; }
.hero .plot { font-size: 15.5px; margin-top: 8px; font-style: italic; }
.hero .tagline {
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--verm);
  margin-top: 12px;
}
.seal {
  position: absolute;
  right: 3%;
  top: -64px;
  z-index: 3;
  width: 118px;
  height: 118px;
  transform: rotate(9deg);
}

@media (max-width: 640px) {
  .hero .info { margin: -30px 8px 0; }
  .hero .meta { padding-right: 52px; }
  .seal { width: 92px; height: 92px; top: -46px; }
}

/* ---------- 9. stamps and tickets ---------- */

.stamps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.stamps span {
  font-family: var(--type);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 2px solid var(--teal);
  color: var(--teal);
  padding: 2px 9px;
  transform: rotate(-1.2deg);
}
.stamps span:nth-child(2n) {
  transform: rotate(1.4deg);
  border-color: var(--ink);
  color: var(--ink);
}

.tickets { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: flex-start; }
.ticket {
  display: inline-block;
  font-family: var(--type);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  padding: 8px 16px;
  background: var(--paper);
  color: var(--ink);
  transform: rotate(-.6deg);
  cursor: pointer;
  line-height: 1.2;
}
.tickets .ticket:nth-child(2n) { transform: rotate(.8deg); }
.ticket--primary { background: var(--verm); border-color: var(--ink); color: var(--paper); }
.ticket:hover, .ticket:focus-visible { background: var(--ink); color: var(--paper); }
.ticket--primary:hover { color: var(--paper); }

/* ---------- 10. handbills ---------- */

.handbills { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 16px; }
.bill {
  width: 172px;
  background: var(--paper-2);
  padding: 10px 10px 12px;
  box-shadow: 0 8px 18px var(--shadow);
  text-align: center;
}
.bill:nth-child(4n+1) { transform: rotate(-2.4deg); }
.bill:nth-child(4n+2) { transform: rotate(1.6deg) translateY(10px); }
.bill:nth-child(4n+3) { transform: rotate(-1deg); }
.bill:nth-child(4n+4) { transform: rotate(2.6deg) translateY(6px); }
.bill svg, .bill img { display: block; width: 100%; height: auto; }
.bill .t {
  font-family: var(--wood);
  font-size: 15px;
  line-height: 1.1;
  text-transform: uppercase;
  margin-top: 9px;
}
.bill .r { font-family: var(--type); font-size: 12px; color: var(--verm); margin-top: 3px; }
.bill .r i { font-style: normal; color: var(--muted); }

/* ---------- 11. torn review strips ---------- */

.strips { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin: 0 auto; }
.strip {
  background: var(--paper-2);
  padding: 18px 26px 16px;
  box-shadow: 0 8px 18px var(--shadow);
  clip-path: polygon(0 12%, 2% 2%, 6% 8%, 11% 0, 17% 7%, 24% 2%, 31% 8%, 38% 1%,
    45% 7%, 53% 2%, 60% 8%, 67% 1%, 74% 7%, 81% 2%, 88% 8%, 94% 1%, 98% 6%,
    100% 14%, 100% 88%, 98% 97%, 93% 92%, 86% 99%, 79% 93%, 71% 99%, 63% 93%,
    55% 99%, 47% 93%, 39% 99%, 31% 93%, 23% 99%, 16% 93%, 9% 99%, 3% 94%, 0 88%);
}
.strip:nth-child(odd) { transform: rotate(-.9deg); }
.strip:nth-child(even) { transform: rotate(.8deg); }
.strip .q { font-size: 17px; font-style: italic; line-height: 1.5; }
.strip .q::before {
  content: '\201C';
  font-family: var(--wood);
  font-size: 34px;
  color: var(--verm);
  margin-right: 6px;
  font-style: normal;
}
.strip .att {
  font-family: var(--type);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 8px;
  color: var(--teal);
}
.strip .att b { color: var(--verm); font-weight: 400; }
.strip .att .score { color: var(--ink); }

/* ---------- 12. playbill ---------- */

.playbill {
  max-width: 620px;
  margin: 0 auto;
  background: var(--paper-2);
  border: 3px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 4px;
  padding: 26px 24px 24px;
  text-align: center;
  transform: rotate(-.7deg);
  box-shadow: 0 12px 26px var(--shadow);
  position: relative;
}
.playbill .pre {
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--teal);
}
.playbill h3, .playbill h4 {
  font-family: var(--wood);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.02;
  font-size: clamp(28px, 6vw, 44px);
  margin: 8px 0 0;
}
.playbill .alt { display: block; color: var(--verm); font-size: .72em; }
.playbill .divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.playbill .divider::before,
.playbill .divider::after { content: ''; flex: 1; border-top: 2px solid var(--ink); }
.playbill .divider span {
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.playbill .names {
  font-size: 16px;
  line-height: 2;
  font-variant: small-caps;
  letter-spacing: .04em;
}
.playbill .names b {
  font-weight: 400;
  color: var(--verm);
  font-family: var(--type);
  font-size: 12px;
  margin-right: 6px;
}
.playbill .foot {
  font-family: var(--type);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-top: 14px;
  color: var(--teal);
}

/* ---------- 13. dotted leader rows, used by case files and cast lists ---------- */

.ledger { }
.ledger .row { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; break-inside: avoid; }
.ledger .k {
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  flex: none;
}
.ledger .who { font-variant: small-caps; font-size: 16px; }
.ledger .dots { flex: 1; border-bottom: 2px dotted var(--muted); transform: translateY(-4px); }
.ledger .v { text-align: right; }
.ledger--twocol { columns: 2; column-gap: 44px; }
@media (max-width: 640px) { .ledger--twocol { columns: 1; } }

/* ---------- 14. the paper picker ---------- */

.papers {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.papers .lbl {
  font-family: var(--type);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  writing-mode: vertical-rl;
  margin-bottom: 2px;
}
.papers button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--ink);
  box-shadow: 0 3px 8px var(--shadow);
  transform: rotate(-4deg);
  padding: 0;
}
.papers button[aria-pressed='true'] { outline: 2px solid var(--verm); outline-offset: 2px; }
.papers .sw-midnight { background: #171a1f; }
.papers .sw-bone { background: #e9dfc8; }
.papers .sw-oxblood { background: #491511; }

/* ---------- 15. colophon ---------- */

.colophon {
  margin-top: 56px;
  text-align: center;
  font-family: var(--type);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 2;
}

/* ---------- 16. utility ---------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 17. poster plates ----------
   Real poster art, pressed. The tint is a blend rather than a baked in
   filter, so the same file suits all three paper stocks and the stored
   image stays untouched. */

.plate-art { position: relative; background: var(--paper-2); overflow: hidden; }
.plate-art img { display: block; width: 100%; height: auto; filter: saturate(.5) contrast(1.08); }
.plate-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--verm);
  mix-blend-mode: color;
  opacity: .3;
  pointer-events: none;
}
.plate-art--empty {
  aspect-ratio: 2 / 3;
  display: grid;
  place-items: center;
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the feature plate sits inside the illustrated ground */
.hero-ground { position: relative; background: var(--paper-2); overflow: hidden; padding: 26px 26px 30px; }
.hero-ground .moon {
  position: absolute;
  right: -60px;
  top: -70px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: var(--verm);
}
.hero-ground .inner { position: relative; display: flex; gap: 26px; align-items: flex-start; }
.hero-ground .plate-art { flex: none; width: 190px; box-shadow: 0 10px 24px var(--shadow); }
.hero-ground .titling { padding-top: 6px; }
.hero-ground .film-title {
  font-family: var(--wood);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .95;
  font-size: clamp(30px, 5.6vw, 60px);
}
.hero-ground .film-title .ghost { color: var(--verm); position: absolute; transform: translate(4px, 4px); z-index: 0; }
.hero-ground .film-title .top { position: relative; z-index: 1; }
.hero-ground .film-sub {
  font-family: var(--type);
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 10px;
}
@media (max-width: 640px) {
  .hero-ground { padding: 18px; }
  .hero-ground .inner { flex-direction: column; align-items: center; text-align: center; }
  .hero-ground .plate-art { width: 150px; }
  .hero-ground .moon { width: 200px; height: 200px; right: -50px; top: -50px; }
}

/* ---------- 18. daggers ----------
   Ratings are five daggers in half steps. A half is drawn by inking the left
   half of the glyph rather than substituting a different character. */

.daggers { display: inline-flex; gap: .12em; font-style: normal; line-height: 1; }
.dag { position: relative; font-style: normal; color: var(--muted); opacity: .45; }
.dag.full { color: var(--verm); opacity: 1; }
.dag.half::after {
  content: '\2020';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: var(--verm);
  opacity: 1;
}

/* ---------- 19. forms ----------
   Paperwork, in keeping with the press: ruled fields on a filed card. */

.form-card {
  max-width: 440px;
  margin: 34px auto 0;
  background: var(--paper-2);
  padding: 26px 26px 22px;
  box-shadow: 0 12px 26px var(--shadow);
  transform: rotate(-.4deg);
}
.form-card h2 {
  font-family: var(--wood);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1;
}
.form-card .lede {
  font-family: var(--type);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 6px;
}
.field { margin-top: 18px; }
.field label {
  display: block;
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.field input {
  width: 100%;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--ink);
  padding: 6px 2px;
  border-radius: 0;
}
.field input:focus { outline: 0; border-bottom-color: var(--verm); }
.field .hint { font-size: 12px; font-style: italic; color: var(--muted); margin-top: 4px; }
.form-card .tickets { margin-top: 22px; }
.notice {
  border: 2px solid var(--verm);
  color: var(--verm);
  font-family: var(--type);
  font-size: 12.5px;
  padding: 8px 12px;
  margin-top: 16px;
  transform: rotate(-.5deg);
}
.notice--calm { border-color: var(--teal); color: var(--teal); }
.form-foot {
  text-align: center;
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 20px;
}
.form-foot a { color: var(--verm); }

/* ---------- 20. the film sheet ---------- */

.sheet { display: grid; grid-template-columns: 300px 1fr; gap: 30px; margin-top: 26px; align-items: start; }
@media (max-width: 700px) {
  .sheet { grid-template-columns: 1fr; }
  .sheet .platewrap { max-width: 280px; margin: 0 auto; }
}

.platewrap { position: relative; }
.mounted {
  background: var(--paper-2);
  padding: 12px;
  box-shadow: 0 12px 26px var(--shadow);
  transform: rotate(-1.2deg);
  position: relative;
}
.mounted .corner { position: absolute; width: 26px; height: 26px; background: var(--ink); z-index: 2; }
.mounted .c1 { left: -7px; top: -7px;    clip-path: polygon(0 0, 100% 0, 0 100%); }
.mounted .c2 { right: -7px; top: -7px;   clip-path: polygon(0 0, 100% 0, 100% 100%); }
.mounted .c3 { left: -7px; bottom: -7px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.mounted .c4 { right: -7px; bottom: -7px;clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.mounted figcaption {
  font-family: var(--type); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); text-align: center; padding-top: 9px;
}
.archive-stamp {
  position: absolute; right: -14px; top: -18px; z-index: 3; transform: rotate(8deg);
  font-family: var(--type); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  border: 2px solid var(--verm); color: var(--verm); padding: 3px 8px; background: var(--paper);
}

.film-head .film-title {
  font-family: var(--wood); font-weight: 400;
  font-size: clamp(32px, 6.6vw, 56px); line-height: .95; text-transform: uppercase;
}
.film-head .film-title .yr { font-size: .5em; color: var(--verm); }
.film-head .byline {
  font-family: var(--type); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal); margin-top: 8px;
}
.film-head .byline b { color: var(--ink); font-weight: 400; }
.film-head .tagline {
  font-family: var(--type); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--verm); margin-top: 10px;
}
.film-head .plot { font-size: 16px; font-style: italic; margin-top: 12px; max-width: 58ch; }

/* verdicts row: the seal, the numbers, and the member's own ballot */
.verdicts { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin-top: 20px; }
.verdicts .seal { position: static; width: 104px; height: 104px; transform: rotate(-7deg); flex: none; }
.tally { font-family: var(--type); letter-spacing: .1em; text-transform: uppercase; }
.tally .big { font-family: var(--wood); font-size: 26px; letter-spacing: 0; }
.tally .l { font-size: 10.5px; color: var(--muted); }
.tally + .tally { margin-top: 0; }

/* punch your ballot */
.punch { min-width: 210px; }
.punch .l {
  font-family: var(--type); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}
.punch-row { display: inline-flex; gap: .1em; margin: 4px 0 2px; cursor: pointer; user-select: none; }
.punch-row .dag { font-size: 34px; line-height: 1; }
.punch-row .dag .half-hit,
.punch-row .dag .full-hit { position: absolute; top: 0; height: 100%; width: 50%; z-index: 2; }
.punch-row .dag .half-hit { left: 0; }
.punch-row .dag .full-hit { right: 0; }
.punch-row .dag { position: relative; }
.punch .verdict { font-size: 13px; font-style: italic; color: var(--teal); min-height: 1.4em; }
.punch .clear {
  font-family: var(--type); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); background: none; border: 0; padding: 4px 0 0; cursor: pointer;
}
.punch .clear:hover { color: var(--verm); }
.punch[hidden] { display: none; }

/* case file */
.casefile {
  margin-top: 34px; background: var(--paper-2); padding: 20px 24px;
  box-shadow: 0 8px 18px var(--shadow); transform: rotate(.4deg);
  columns: 2; column-gap: 40px;
}
@media (max-width: 700px) { .casefile { columns: 1; } }
.casefile .row { display: flex; align-items: baseline; gap: 8px; font-size: 14px; break-inside: avoid; padding: 4px 0; }
.casefile .k {
  font-family: var(--type); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); flex: none;
}
.casefile .dots { flex: 1; border-bottom: 2px dotted var(--muted); transform: translateY(-4px); }
.casefile .v { text-align: right; }

/* registers this film appears in */
.bill-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.bill-chip {
  background: var(--paper-2); border: 2px solid var(--ink);
  outline: 1px solid var(--ink); outline-offset: 3px;
  padding: 14px 18px; text-align: center; max-width: 250px;
  box-shadow: 0 8px 18px var(--shadow);
}
.bill-chip:nth-child(3n+1) { transform: rotate(-1.4deg); }
.bill-chip:nth-child(3n+2) { transform: rotate(1deg); }
.bill-chip:nth-child(3n+3) { transform: rotate(-.6deg); }
.bill-chip .pre {
  font-family: var(--type); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--teal);
}
.bill-chip h4 {
  font-family: var(--wood); font-weight: 400; font-size: 17px;
  line-height: 1.1; text-transform: uppercase; margin-top: 4px;
}
.bill-chip .n { font-family: var(--type); font-size: 11px; color: var(--verm); margin-top: 4px; }

/* svg does not honour the hidden attribute on its own in every engine */
.seal[hidden] { display: none; }

/* The ballot sits below the scores rather than beside them, so its position
   never depends on whether a film has a seal yet. */
.punch {
  margin-top: 18px;
  max-width: 340px;
}

/* ---------- 21. the ballot ledger ---------- */

.ballot-list { max-width: 620px; margin: 0 auto; }
.ballot-list .row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 2px; border-bottom: 1px dotted var(--muted);
}
.ballot-list .who { font-variant: small-caps; font-size: 18px; }
.ballot-list .who a:hover { color: var(--verm); }
.ballot-list .dots { flex: 1; border-bottom: 2px dotted var(--muted); transform: translateY(-4px); }
.ballot-list .mark { white-space: nowrap; }
.ballot-list .mark .daggers { font-size: 19px; }
.ballot-list .when {
  font-family: var(--type); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); width: 74px; text-align: right;
}
@media (max-width: 560px) { .ballot-list .when { display: none; } }

/* the spread, drawn as inked bars */
.spread { max-width: 620px; margin: 0 auto 22px; display: flex; align-items: flex-end; gap: 4px; height: 90px; }
.spread .bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.spread .bar i { display: block; background: var(--verm); min-height: 2px; }
.spread .bar span {
  font-family: var(--type); font-size: 9px; letter-spacing: .04em;
  color: var(--muted); text-align: center; padding-top: 4px;
}
.spread .bar.none i { background: var(--muted); opacity: .3; }

/* a score that can be clicked through to its ballots */
a.score-link { border-bottom: 1px dotted var(--verm); }
a.score-link:hover { color: var(--verm); }
.seal-link { display: inline-block; }
.seal-link:hover .seal { filter: none; }

/* review strips become links */
.strip a.readmore {
  font-family: var(--type); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--verm); display: inline-block; margin-top: 6px;
}
.strip a.readmore:hover { border-bottom: 1px solid var(--verm); }

/* one review, given room */
.review-sheet { display: grid; grid-template-columns: 190px 1fr; gap: 26px; margin-top: 26px; align-items: start; }
@media (max-width: 640px) {
  .review-sheet { grid-template-columns: 1fr; }
  .review-sheet .platewrap { max-width: 190px; margin: 0 auto; }
}
.review-body { font-size: 18px; line-height: 1.65; max-width: 62ch; }
.review-body p + p { margin-top: 1em; }
.review-meta {
  font-family: var(--type); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal); margin-top: 16px;
}
.review-meta b { color: var(--verm); font-weight: 400; }

/* ---------- 22. the shelf ---------- */

.shelf-search { max-width: 620px; margin: 22px auto 0; display: flex; gap: 10px; align-items: flex-end; }
.shelf-search .field { flex: 1; margin: 0; }

.filter-bar {
  max-width: 860px; margin: 22px auto 0;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.filter-bar a, .filter-bar button {
  font-family: var(--type); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  border: 2px solid var(--muted); background: none;
  padding: 3px 10px; cursor: pointer;
}
.filter-bar a:hover { color: var(--verm); border-color: var(--verm); }
.filter-bar a.on, .filter-bar button.on {
  color: var(--paper); background: var(--verm); border-color: var(--verm);
}
.filter-bar .heading {
  font-family: var(--type); font-size: 10px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--teal);
  width: 100%; text-align: center; margin-top: 8px;
}

/* what is currently narrowing the shelf, each removable */
.applied { max-width: 860px; margin: 18px auto 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.applied .chip {
  font-family: var(--type); font-size: 12px; letter-spacing: .1em;
  border: 2px solid var(--ink); background: var(--paper-2);
  padding: 4px 10px; transform: rotate(-.6deg);
}
.applied .chip:nth-child(2n) { transform: rotate(.7deg); }
.applied .chip b { font-weight: 400; color: var(--teal); text-transform: uppercase; font-size: 10px; }
.applied .chip a { color: var(--verm); margin-left: 8px; }

.shelf-count {
  text-align: center; margin-top: 18px;
  font-family: var(--type); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}

/* the grid itself, handbills in rows rather than a scattered pile */
.shelf-grid {
  display: grid; gap: 22px 16px; margin-top: 24px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.shelf-grid .bill { width: auto; }
.shelf-grid .bill:nth-child(5n+1) { transform: rotate(-1.4deg); }
.shelf-grid .bill:nth-child(5n+2) { transform: rotate(.9deg); }
.shelf-grid .bill:nth-child(5n+3) { transform: rotate(-.5deg); }
.shelf-grid .bill:nth-child(5n+4) { transform: rotate(1.5deg); }
.shelf-grid .bill:nth-child(5n+5) { transform: rotate(-1deg); }
.shelf-grid .bill .held {
  font-family: var(--type); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); margin-top: 2px;
}

.pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 34px; }
.pager .where {
  font-family: var(--type); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}

/* attributes on the film sheet become routes into the shelf */
.stamps a { color: inherit; }
.stamps a:hover { color: var(--verm); border-color: var(--verm); }
.casefile .v a { border-bottom: 1px dotted var(--muted); }
.casefile .v a:hover { color: var(--verm); border-bottom-color: var(--verm); }
.ledger .who a:hover { color: var(--verm); }

/* ---------- 23. setting one down ---------- */

.compose { display: grid; grid-template-columns: 190px 1fr; gap: 26px; margin-top: 26px; align-items: start; }
@media (max-width: 640px) {
  .compose { grid-template-columns: 1fr; }
  .compose .platewrap { max-width: 170px; margin: 0 auto; }
}
.compose textarea {
  width: 100%;
  min-height: 260px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper-2);
  border: 0;
  padding: 18px 20px;
  resize: vertical;
  box-shadow: 0 8px 18px var(--shadow);
  /* ruled paper, drawn rather than pictured */
  background-image: repeating-linear-gradient(
    var(--paper-2) 0px, var(--paper-2) 28px, rgba(125,132,116,.28) 28px, rgba(125,132,116,.28) 29px);
  background-attachment: local;
}
.compose textarea:focus { outline: 2px solid var(--verm); outline-offset: 2px; }
.compose .count {
  font-family: var(--type); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-top: 6px;
}
.compose .rated-note {
  font-family: var(--type); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 10px;
}
.compose .rated-note a { color: var(--verm); }

/* the reviews index */
.review-roll { max-width: 780px; margin: 0 auto; }
.review-roll .strip .head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.review-roll .strip .head .film {
  font-family: var(--wood); font-size: 17px; text-transform: uppercase;
}
.review-roll .strip .head .mark { font-size: 17px; }

/* keep close, a toggle rather than a link */
.ticket[aria-pressed="true"] { background: var(--verm); border-color: var(--ink); color: var(--paper); }

/* ---------- 24. pointing someone at a film ---------- */

.recommend { display: inline-block; }
.recommend > summary {
  list-style: none; cursor: pointer;
  font-family: var(--type); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; border: 2px solid var(--ink);
  padding: 8px 16px; background: var(--paper); color: var(--ink);
  transform: rotate(.5deg); line-height: 1.2;
}
.recommend > summary::-webkit-details-marker { display: none; }
.recommend > summary:hover { background: var(--ink); color: var(--paper); }
.recommend[open] > summary { background: var(--verm); border-color: var(--ink); color: var(--paper); }
.recommend .panel {
  margin-top: 10px; background: var(--paper-2); padding: 14px 16px;
  box-shadow: 0 8px 18px var(--shadow); max-width: 320px;
}
.recommend select {
  width: 100%; font-family: var(--serif); font-size: 16px;
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); padding: 7px 8px; border-radius: 0;
}
.recommend .sent {
  font-family: var(--type); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); margin-top: 8px;
}
.rec-note {
  font-family: var(--type); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--verm); text-align: center; margin-top: 14px;
}

/* the recommend panel escapes the ticket row rather than inflating it */
.recommend { position: relative; }
.recommend .panel {
  position: absolute; z-index: 40; left: 0; top: calc(100% + 8px);
  width: 300px; max-width: 86vw;
}
@media (max-width: 560px) { .recommend .panel { position: static; width: auto; } }

.rec-filter {
  width: 100%; font-family: var(--serif); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); padding: 6px 8px;
  border-radius: 0; margin-bottom: 8px;
}
.rec-list { max-height: 216px; overflow-y: auto; border: 1px solid var(--muted); padding: 4px; }
.rec-list label {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  font-size: 15px; cursor: pointer;
}
.rec-list label:hover { background: var(--paper); }
.rec-list label.hidden { display: none; }
.rec-list input { accent-color: var(--verm); width: 15px; height: 15px; }
.rec-list .already { color: var(--muted); font-family: var(--type); font-size: 10px; letter-spacing: .1em; }
.rec-empty { font-style: italic; color: var(--muted); font-size: 14px; padding: 6px; }

/* what has been sent to you, and what you have sent */
.rec-rows { max-width: 620px; margin: 0 auto; }
.rec-rows .row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 2px; border-bottom: 1px dotted var(--muted);
}
.rec-rows .who { font-variant: small-caps; font-size: 17px; }
.rec-rows .dots { flex: 1; border-bottom: 2px dotted var(--muted); transform: translateY(-4px); }
.rec-rows .from {
  font-family: var(--type); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal); white-space: nowrap;
}
.rec-rows form { display: inline; }
.rec-rows button.drop {
  font-family: var(--type); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); background: none;
  border: 0; cursor: pointer; padding: 0 0 0 10px;
}
.rec-rows button.drop:hover { color: var(--verm); }

/* ---------- 25. registers ---------- */

.bill-roll { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 24px; }
.bill-card {
  background: var(--paper-2); border: 3px solid var(--ink);
  outline: 1px solid var(--ink); outline-offset: 4px;
  padding: 20px 22px; box-shadow: 0 10px 22px var(--shadow);
}
.bill-card:nth-child(3n+1) { transform: rotate(-.7deg); }
.bill-card:nth-child(3n+2) { transform: rotate(.6deg); }
.bill-card:nth-child(3n+3) { transform: rotate(-.3deg); }
.bill-card .pre {
  font-family: var(--type); font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--teal);
}
.bill-card h3 {
  font-family: var(--wood); font-weight: 400; text-transform: uppercase;
  font-size: 24px; line-height: 1; margin: 6px 0 0;
}
.bill-card h3 .alt { display: block; color: var(--verm); font-size: .74em; }
.bill-card .blurb { font-size: 14px; font-style: italic; color: var(--muted); margin-top: 8px; }
.bill-card .n {
  font-family: var(--type); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--verm); margin-top: 10px;
}

/* one register, its films numbered the way a playbill would */
.bill-films { max-width: 700px; margin: 0 auto; }
.bill-films .row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 2px; border-bottom: 1px dotted var(--muted);
}
.bill-films .no {
  font-family: var(--type); font-size: 12px; color: var(--verm); width: 26px; flex: none;
}
.bill-films .who { font-variant: small-caps; font-size: 18px; }
.bill-films .dots { flex: 1; border-bottom: 2px dotted var(--muted); transform: translateY(-4px); }
.bill-films .mark { font-size: 15px; white-space: nowrap; }
.bill-films .note { grid-column: 1/-1; font-style: italic; font-size: 13.5px; color: var(--muted); }
.bill-films form { display: inline; }
.bill-films button.drop {
  font-family: var(--type); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); background: none;
  border: 0; cursor: pointer; padding-left: 10px;
}
.bill-films button.drop:hover { color: var(--verm); }

/* the add-to-register panel on a film sheet */
.addto { position: relative; }
.addto > summary {
  list-style: none; cursor: pointer;
  font-family: var(--type); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; border: 2px solid var(--ink);
  padding: 8px 16px; background: var(--paper); color: var(--ink);
  transform: rotate(-.4deg); line-height: 1.2;
}
.addto > summary::-webkit-details-marker { display: none; }
.addto > summary:hover { background: var(--ink); color: var(--paper); }
.addto[open] > summary { background: var(--verm); border-color: var(--ink); color: var(--paper); }
.addto .panel {
  position: absolute; z-index: 40; left: 0; top: calc(100% + 8px);
  width: 300px; max-width: 86vw;
  background: var(--paper-2); padding: 14px 16px; box-shadow: 0 8px 18px var(--shadow);
}
@media (max-width: 560px) { .addto .panel { position: static; width: auto; } }
.addto .mine { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.addto .mine label { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.addto .mine input { accent-color: var(--verm); width: 15px; height: 15px; }
.addto .newname {
  width: 100%; font-family: var(--serif); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); padding: 6px 8px; border-radius: 0;
}
.addto .hint { font-family: var(--type); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 8px 0 4px; }

/* ---------- 26. building a bill ---------- */

.bill-workshop { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; margin-top: 26px; }
@media (max-width: 820px) { .bill-workshop { grid-template-columns: 1fr; } }
.bill-workshop .form-card { margin: 0; max-width: none; transform: none; }
.bill-workshop .preview-wrap { position: sticky; top: 20px; }
.preview-label {
  font-family: var(--type); font-size: 10px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--teal); text-align: center; margin-bottom: 10px;
}

/* the running order, with a way to shuffle it */
.order-list { margin-top: 6px; }
.order-list .row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 2px; border-bottom: 1px dotted var(--muted);
}
.order-list .no { font-family: var(--type); font-size: 12px; color: var(--verm); width: 22px; flex: none; }
.order-list .t { flex: 1; font-variant: small-caps; font-size: 16px; }
.order-list form { display: inline; }
.order-list button {
  font-family: var(--type); font-size: 13px; line-height: 1;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  padding: 3px 8px; cursor: pointer;
}
.order-list button:hover { background: var(--ink); color: var(--paper); }
.order-list button[disabled] { opacity: .25; cursor: default; }
.order-list button.drop { border: 0; background: none; color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.order-list button.drop:hover { color: var(--verm); background: none; }

/* a bill still being assembled */
.draft-note {
  max-width: 620px; margin: 18px auto 0;
  border: 2px dashed var(--teal); padding: 14px 18px;
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  align-items: center; justify-content: space-between;
}
.draft-note p { font-size: 14px; font-style: italic; color: var(--muted); margin: 0; }
.draft-note b { font-style: normal; color: var(--teal); }
.draft-note form { margin: 0; }

/* a draft, stamped rather than muttered */
.draft-mark {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--type);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--verm);
  border: 2px solid var(--verm);
  padding: 1px 7px;
  transform: rotate(-3deg);
  vertical-align: middle;
}

/* ---------- 27. asking, and what comes back ---------- */

.wheel-odds {
  text-align: center; margin-top: 16px;
  font-family: var(--type); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}
.wheel-spin { display: flex; justify-content: center; margin-top: 18px; }
.wheel-spin .ticket { font-size: 16px; padding: 12px 30px; }

.wheel-empty { text-align: center; font-style: italic; color: var(--muted); margin-top: 26px; }

/* ---------- 28. the oracle ---------- */

/* The question is the interface: each blank is a select dressed as text, so
   the sentence reads as a sentence and edits in place without a reload. */
.ask {
  max-width: 760px; margin: 24px auto 0; text-align: center;
  font-family: var(--serif); font-size: clamp(19px, 3.2vw, 28px);
  line-height: 1.8; font-style: italic;
}
.ask .lead { white-space: nowrap; }
/* A blank and the punctuation that follows it must not be split across lines,
   or the full stop ends up alone on the next one. */
.ask .slot { display: inline-block; white-space: nowrap; }
.ask .tail { margin-left: -1px; }

.ask select.blank {
  font-family: var(--serif);
  font-size: inherit;
  font-style: normal;
  line-height: inherit;
  color: var(--verm);
  background: transparent;
  border: 0;
  border-bottom: 2px dashed var(--verm);
  border-radius: 0;
  padding: 0 20px 1px 4px;
  margin: 0 2px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* the little mark that says this word can be changed */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--verm) 50%),
    linear-gradient(135deg, var(--verm) 50%, transparent 50%);
  background-position: right 8px center, right 3px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  max-width: 100%;
}
.ask select.blank:hover { border-bottom-style: solid; }
.ask select.blank:focus-visible { outline: 2px solid var(--verm); outline-offset: 3px; }
/* the dropdown itself belongs to the browser, so give it readable colours */
.ask select.blank option { background: var(--paper); color: var(--ink); font-style: normal; }

.ask-form .wheel-odds { margin-top: 14px; }
.ask-form .wheel-spin { margin-top: 14px; }
.ask-form button[disabled] { opacity: .4; cursor: default; }

.orb-stage {
  position: relative;
  --stand-w: min(220px, 54vw);
  display: flex; flex-direction: column; align-items: center;
  margin-top: 26px;
}

/* ---- the glass ----
   Five layers, outward: the picture (bulged by the displacement filter and
   magnified, which is what a lens does), the press tint, a refracting band at
   the edge, the light falling across the surface, and the rim of the glass
   itself. */

.orb {
  position: relative;
  width: min(340px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, var(--paper-2), #000 130%);
  box-shadow:
    0 26px 50px var(--shadow),
    0 0 0 1px rgba(0,0,0,.4);
  isolation: isolate;
}

/* Each lens is the whole picture at one magnification, masked to a band.
   Stacked innermost last, they read as one image bulging outward. Masks and
   transforms are supported everywhere, so nothing here can fail quietly. */
.orb .lens {
  position: absolute; inset: 0;
  /* closest-side, so 100% is the sphere's edge rather than its corner. Without
     it the bands compress into the outer third and the wide ones never fade
     inside the visible circle at all. */
  -webkit-mask: radial-gradient(circle closest-side at 50% 46%, #000 var(--solid), transparent var(--fade));
  mask: radial-gradient(circle closest-side at 50% 46%, #000 var(--solid), transparent var(--fade));
}
.orb .lens img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--s));
  transform-origin: 50% 46%;
  filter: saturate(.45) contrast(1.12);
  display: block;
}

.orb .tint {
  position: absolute; inset: 0;
  background: var(--verm);
  mix-blend-mode: color;
  opacity: .34;
  pointer-events: none;
}

/* glass is thickest at the edge, so the picture goes soft and dark there */
.orb .refract {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, transparent 62%, #000 92%);
  mask: radial-gradient(circle closest-side at 50% 50%, transparent 62%, #000 92%);
}

/* light across the surface: a broad sheen, a dark turning edge, and the
   bounce coming back up through the bottom of the sphere */
.orb .sheen {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(ellipse 44% 30% at 30% 20%, rgba(255,255,255,.42), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 60% 40% at 60% 96%, rgba(255,255,255,.16), rgba(255,255,255,0) 70%),
    radial-gradient(circle closest-side at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,.32) 82%, rgba(0,0,0,.78) 100%);
}
/* the hard specular pin, which is what actually says glass */
.orb .glint {
  position: absolute; pointer-events: none;
  left: 20%; top: 13%; width: 20%; height: 13%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 40%, rgba(255,255,255,.95), rgba(255,255,255,.15) 55%, rgba(255,255,255,0) 72%);
  transform: rotate(-22deg);
}
.orb .rim {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow:
    inset 0 0 0 2px var(--verm),
    inset 0 3px 14px rgba(255,255,255,.22),
    inset 0 -10px 26px rgba(0,0,0,.5);
}

/* nothing asked yet: mist, turning slowly */
.orb .mist {
  position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 40% 30% at 30% 40%, var(--teal), transparent 60%),
    radial-gradient(ellipse 45% 35% at 68% 62%, var(--verm), transparent 62%),
    radial-gradient(ellipse 50% 40% at 50% 30%, var(--muted), transparent 66%);
  opacity: .34;
  animation: churn 22s linear infinite;
}
@keyframes churn { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .orb .mist { animation: none; } }
.orb--full .mist { display: none; }

/* Light focused through the glass onto whatever it stands on. Taken out of
   the flow entirely: while it was a flex item it pushed the stand away and
   the ball hovered above its claw. */
.caustic {
  position: absolute;
  left: 50%; bottom: 4px;
  transform: translateX(-50%);
  width: min(200px, 48vw); height: 20px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, var(--verm), transparent 70%);
  opacity: .35;
  filter: blur(6px);
  z-index: 0;
}

.orb { z-index: 2; }

/* The stand sits behind the glass, so the collar's upper half disappears
   behind the sphere and the ball reads as settled into it. Drawn in front, the
   legs cross the glass and it reads as overlapping instead. The overlap is a
   fraction of the stand's own width, so it holds at every size. */
.orb-stand {
  position: relative;
  z-index: 1;
  width: var(--stand-w);
  margin-top: calc(var(--stand-w) * -0.17);
}
.orb-stand svg { display: block; width: 100%; height: auto; }

.orb-answer {
  text-align: center;
  margin: 18px auto 0;
  max-width: 620px;
}
.orb-answer .said {
  font-family: var(--type); font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--teal);
}
.orb-answer h3 {
  font-family: var(--wood); font-weight: 400; text-transform: uppercase;
  font-size: clamp(26px, 5vw, 42px); line-height: .95; margin-top: 6px;
}
.orb-answer h3 .yr { font-size: .5em; color: var(--verm); }
.orb-answer .line {
  font-family: var(--type); font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal); margin-top: 8px;
}
.orb-answer .plot { font-size: 15px; font-style: italic; margin-top: 10px; }
.orb-answer .tickets { justify-content: center; }

/* the glass leads to the picture it showed */
.orb-link { display: block; border: 0; }
.orb-link:hover .rim { box-shadow: inset 0 0 0 3px var(--verm), inset 0 3px 14px rgba(255,255,255,.3), inset 0 -10px 26px rgba(0,0,0,.5); }
.orb-link:focus-visible { outline: 3px solid var(--verm); outline-offset: 6px; border-radius: 50%; }

/* ---------- 29. notices printed across the page ---------- */

/* A strip runs the width of the sheet, directly beneath the masthead, the way
   a stop press line is set across a column. Two weights: something that just
   happened, and something still owed. */
.strip {
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 14px;
  margin: 0 0 18px;
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.strip a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.strip--said { border-color: var(--teal); color: var(--teal); }
.strip--wait { border-color: var(--verm); color: var(--verm); }

/* The confirmation page keeps the site's centred form measure. */
.await {
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
}
.await .plot {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 18px;
  text-align: left;
}
.await .addr {
  font-family: var(--type);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--verm);
  word-break: break-all;
}

/* ---------- 30. finding a film that is not here yet ---------- */

/* Offered only on an empty title search, so it reads as an answer to the
   question the member just asked rather than as an advertisement. */
.find-offer {
  text-align: center;
  margin: 22px auto 0;
  max-width: 520px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.find-offer a { color: var(--verm); }

.find { max-width: 720px; margin: 0 auto; }

/* The three steps, numbered, because the whole point is that a member should
   never wonder what is about to happen. */
.how {
  list-style: none;
  counter-reset: step;
  margin: 0 0 26px;
  padding: 0;
}
.how li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0 34px;
  margin-bottom: 9px;
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
}
.how li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 21px;
  height: 21px;
  border: 1.5px solid var(--verm);
  color: var(--verm);
  font-family: var(--type);
  font-size: 11px;
  line-height: 19px;
  text-align: center;
}

.allowance {
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin: 14px 0 26px;
}

.find-head {
  font-family: var(--type);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--muted);
  padding-bottom: 6px;
  margin: 30px 0 6px;
}
.find-note {
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  font-style: italic;
  margin: 0 0 14px;
}
.find-none {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  line-height: 1.6;
  margin: 26px auto;
  max-width: 460px;
}

.find-row {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--muted);
}
.find-poster img { width: 62px; display: block; border: 1px solid var(--ink); }
.find-poster .none {
  display: block;
  width: 62px;
  height: 93px;
  border: 1px dashed var(--muted);
  font-family: var(--type);
  font-size: 9px;
  color: var(--muted);
  text-align: center;
  line-height: 93px;
}
.find-body h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: normal;
  margin: 0 0 3px;
  color: var(--ink);
}
.find-body .yr { color: var(--muted); font-size: 15px; }
.find-body .plot {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.find-act form { margin: 0; }

@media (max-width: 560px) {
  .find-row { grid-template-columns: 48px 1fr; }
  .find-poster img, .find-poster .none { width: 48px; }
  .find-poster .none { height: 72px; line-height: 72px; }
  .find-act { grid-column: 2; justify-self: start; }
}

/* ---------- 31. back of house ---------- */

/* Deliberately plain. This is the only part of the site not set in the press
   style, because reading it quickly matters more than it looking like print. */
.admin { max-width: 700px; margin: 0 auto; }
.admin h3 {
  font-family: var(--type);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--muted);
  padding-bottom: 6px;
  margin: 30px 0 12px;
}
.admin-crumb {
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.admin-crumb a { color: var(--verm); }
.admin-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  padding: 12px 0;
  margin-bottom: 24px;
}
.admin-figures b { color: var(--ink); font-size: 16px; margin-right: 4px; }
.admin-figures .bad b, .admin-figures .bad { color: var(--verm); }

.admin-menu { list-style: none; margin: 0; padding: 0; }
.admin-menu li {
  padding: 14px 0;
  border-bottom: 1px solid var(--muted);
}
.admin-menu a {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--verm);
}
.admin-menu .badge {
  font-family: var(--type);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-style: normal;
  border: 1px solid var(--verm);
  color: var(--verm);
  padding: 2px 7px;
  margin-left: 9px;
}
.admin-menu .what {
  display: block;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--muted);
  margin-top: 3px;
}
.admin-none {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  text-align: center;
  margin: 30px 0;
}
.admin-form .field { margin-bottom: 20px; }
.admin-form label.tick {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
}
.admin-form label.tick input { width: auto; accent-color: var(--verm); }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--type);
  font-size: 12px;
}
.admin-table td {
  padding: 7px 4px;
  border-bottom: 1px solid var(--muted);
  color: var(--ink);
}
.admin-table td:last-child { text-align: right; color: var(--muted); }

.sugg {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--muted);
  align-items: start;
}
.sugg-poster img { width: 78px; display: block; border: 1px solid var(--ink); }
.sugg-body h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  border: 0;
  padding: 0;
  margin: 0 0 5px;
  color: var(--ink);
}
.sugg-body .yr { color: var(--muted); }
.sugg-body .meta {
  font-family: var(--type);
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 6px;
}
.sugg-body .meta a { color: var(--verm); }
.sugg-body .plot {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 6px;
}
.sugg-act { display: flex; flex-direction: column; gap: 8px; }
.sugg-act form { margin: 0; }

@media (max-width: 560px) {
  .sugg { grid-template-columns: 60px 1fr; }
  .sugg-poster img { width: 60px; }
  .sugg-act { grid-column: 2; flex-direction: row; }
}

/* Standing note at the foot of the marquee, set apart from the listing by a
   rule so it reads as instruction rather than as another entry. */
.find-standing {
  max-width: 520px;
  margin: 40px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--muted);
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  text-align: center;
}

/* The trap field on the signup form. Positioned off screen rather than
   display:none, because a script that skips hidden inputs would skip this too.
   The markup carries aria-hidden and tabindex="-1" so no screen reader
   announces it and no Tab key reaches it. */
.pw-check {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- 32. the collection, marked on a poster ---------- */

/* Only the initiated ever see these. A whole ticket means a copy is held and
   the film can be voted on. A torn one means it cannot, and doubles as the
   control that asks for a copy.

   The card carries the positioning rather than the poster, because the mark has
   to live outside the card's link and .plate-art clips its children. The 10px
   offset is .bill's own padding, which puts the mark on the poster's corner
   instead of the card's. */
.bill { position: relative; }

.tri {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  background: var(--verm);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.tri svg {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 17px;
  height: 17px;
  color: var(--paper);
}
.tri--asked { background: var(--muted); }

/* The ask. A form so it works without script; the button is the triangle. */
.tri-ask { position: absolute; top: 0; right: 0; margin: 0; }
.tri--absent {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  background: rgba(0, 0, 0, .72);
}
.tri--absent .plus { opacity: 0; transition: opacity .12s; }
.tri--absent:hover, .tri--absent:focus-visible { background: var(--verm); }
.tri--absent:hover .base, .tri--absent:focus-visible .base { opacity: 0; }
.tri--absent:hover .plus, .tri--absent:focus-visible .plus { opacity: 1; }
.tri--absent:focus-visible { outline: 2px solid var(--verm); outline-offset: 2px; }

.tri .tip {
  position: absolute;
  top: 44px;
  right: 0;
  white-space: nowrap;
  font-family: var(--type);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
  background: var(--ink);
  color: var(--paper);
  padding: 4px 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
}
.tri--absent:hover .tip, .tri--absent:focus-visible .tip { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tri--absent .plus, .tri .tip, .tri--absent .base { transition: none; }
}