:root{
  /* dark (default) */
  --bg:#151210; --bg2:#1d1915; --ink:#ece2d0; --ink-soft:#8d8471;
  --amber:#e08a2b; --acrylic-top:rgba(235,150,55,.12); --acrylic-bot:rgba(190,105,25,.22); --acrylic-edge:rgba(255,208,145,.9);
  --line:rgba(236,226,208,.065); --plus:rgba(236,226,208,.30); --hair:rgba(236,226,208,.16);
  --disp:'Instrument Sans',system-ui,sans-serif; --mono:'Space Mono',ui-monospace,menlo,monospace;
  /* spine titles are set vertically at ~11px — a geometric sans stays legible there
     where a monospace does not */
  --spine:'Outfit',system-ui,sans-serif;
  /* how far a tape or a case rises on hover, and therefore how much clip-room the shelf
     above it has to reserve. One value so both rack types move alike. */
  --lift:18px;
}
:root.light{
  --bg:#e9e3d5; --bg2:#e2dbc9; --ink:#1b1712; --ink-soft:#7a6f5c;
  --line:rgba(27,23,18,.07); --plus:rgba(27,23,18,.30); --hair:rgba(27,23,18,.2);
  --acrylic-top:rgba(224,138,43,.34); --acrylic-bot:rgba(180,95,18,.5);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--disp);-webkit-font-smoothing:antialiased;overflow-x:hidden;cursor:none;transition:background .5s,color .5s}
::selection{background:var(--amber);color:#111}

/* haoqi-style grid: thin lines + a + at every intersection (fixed backdrop) */
.grid{position:fixed;inset:0;z-index:0;pointer-events:none}

/* HUD */
.hud{position:fixed;left:0;right:0;z-index:40;font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  display:flex;justify-content:space-between;align-items:center;padding:13px 20px;pointer-events:none;text-transform:uppercase}
.hud.top{top:0}
.hud.bot{bottom:0;color:var(--ink-soft)}
.hud .pill{pointer-events:auto}
.hud .sep{opacity:.4;margin:0 7px}
.btn{border:1px solid var(--hair);padding:4px 9px;border-radius:20px;background:transparent;color:inherit;font:inherit;text-transform:uppercase;cursor:none}
.btn:hover{background:var(--ink);color:var(--bg)}
.hud a{color:inherit;text-decoration:none;cursor:none}
.hud a:hover{text-decoration:underline}

/* scope cursor */
.scope{position:fixed;z-index:90;top:0;left:0;width:24px;height:24px;margin:-12px 0 0 -12px;pointer-events:none;mix-blend-mode:difference;transition:width .18s,height .18s,margin .18s}
.scope::before,.scope::after{content:"";position:absolute;background:#fff}
.scope::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px)}
.scope::after{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px)}
.scope i{position:absolute;inset:5px;border:1px solid #fff;border-radius:50%}
.scope.big{width:54px;height:54px;margin:-27px 0 0 -27px}

#stage{position:relative;z-index:2;padding-top:52px}
.store-status{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:60px 32px}

/* ---------- RACKS ---------- */
.rack{padding:16px 0 18px}
.rack-hd{display:flex;align-items:baseline;gap:16px;padding:0 32px 6px}
.rack-title{font-family:var(--disp);font-weight:700;font-size:clamp(24px,3vw,40px);letter-spacing:-.01em;margin:0;text-transform:lowercase}
.rack-count{font-family:var(--mono);font-size:11px;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.rack-tools{margin-left:auto;display:flex;align-items:center;gap:14px}
.rack-rand{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  background:transparent;border:1px solid var(--hair);border-radius:20px;padding:4px 11px;cursor:none}
.rack-rand:hover{background:var(--ink);color:var(--bg);border-color:transparent}
.rack-rand:active{transform:translateY(1px)}

/* A rack title links to its full shelf at /theme/<id>/ or /angle/<id>/ where one exists.
   Underlined only on hover: at 40px the title is the page's landmark, and a permanent
   rule under every one of them would turn the column into a list of links. */
.rack-link{color:inherit;text-decoration:none;cursor:none;border-bottom:2px solid transparent}
.rack-link:hover{border-bottom-color:var(--amber)}
.rack-all{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;cursor:none;white-space:nowrap;
  border:1px solid transparent;border-radius:20px;padding:4px 2px}
.rack-all:hover{color:var(--ink)}

.shelf-wrap{position:relative;padding-top:0}
/* top padding gives the lifted tape clip-room (overflow-x:auto forces overflow-y to clip) */
.shelf{display:flex;gap:3px;overflow-x:auto;overflow-y:visible;padding:calc(var(--lift) + 6px) 32px 26px;scrollbar-width:none;scroll-behavior:smooth}
.shelf::-webkit-scrollbar{display:none}

/* a tape spine */
.spine{position:relative;flex:0 0 44px;height:288px;border-radius:2px;overflow:hidden;background:#2a2622 center/cover no-repeat;cursor:none;z-index:1;
  box-shadow:inset -3px 0 6px rgba(0,0,0,.5),inset 3px 0 4px rgba(255,255,255,.05);
  transition:flex-basis .5s cubic-bezier(.22,.9,.24,1),transform .5s cubic-bezier(.22,.9,.24,1),box-shadow .45s ease;
  transition-delay:.02s; /* quick close */
  transform-origin:bottom center;will-change:flex-basis,transform}
.spine .band{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.34) 52%,rgba(0,0,0,.06) 100%);transition:opacity .3s}
.spine .vtitle{position:absolute;left:50%;bottom:104px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-family:var(--spine);font-weight:600;font-size:12px;letter-spacing:.015em;color:#fff;white-space:nowrap;max-height:170px;overflow:hidden;
  text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 7px rgba(0,0,0,.7);transition:opacity .25s}
.spine .vyear{position:absolute;left:0;right:0;top:10px;text-align:center;font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.72);letter-spacing:.05em;transition:opacity .25s}
.spine .face{position:absolute;inset:0;opacity:0;transition:opacity .34s ease .05s}
.spine .face .poster{position:absolute;inset:0;background-size:cover;background-position:center}

/* hover: pull the tape up & out of the shelf, face out (no ripple) */
/* --lift is shared with .fcase so a tape and a case rise by the same amount, and it sets
   the shelf's top padding: overflow-x:auto forces overflow-y to clip, so anything that
   rises further than that padding gets its top cut off. Raising the lift means raising
   the padding, which is dead space between the rack's text and its artwork. */
.spine:hover{flex-basis:198px;transform:translateY(calc(-1 * var(--lift)));z-index:20;box-shadow:0 34px 46px rgba(0,0,0,.5);transition-delay:.14s /* hover-intent: rest before opening */}
.spine:hover .band,.spine:hover .vtitle,.spine:hover .vyear{opacity:0;transition-delay:.14s}
.spine:hover .face{opacity:1;transition-delay:.24s}

/* translucent amber acrylic ledge (magazine-shelf style) */
.acrylic{position:absolute;left:20px;right:20px;bottom:24px;height:76px;z-index:10;pointer-events:none;border-radius:5px 5px 3px 3px;
  background:linear-gradient(180deg,var(--acrylic-top),var(--acrylic-bot));
  -webkit-backdrop-filter:saturate(1.35) contrast(1.03);backdrop-filter:saturate(1.35) contrast(1.03);
  box-shadow:0 22px 34px rgba(0,0,0,.30),inset 0 1.5px 0 var(--acrylic-edge),inset 0 -1px 0 rgba(255,190,120,.3),inset 0 -6px 14px rgba(120,55,0,.14)}
.acrylic::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(102deg,transparent 24%,rgba(255,255,255,.30) 33%,rgba(255,255,255,.05) 40%,transparent 55%)}
.acrylic::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;border-radius:0 0 4px 4px;background:linear-gradient(#7a3c08,#4d2404)}
.screw{position:absolute;top:50%;width:9px;height:9px;margin-top:-4px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff,#d8cbb4 60%,#9a8b6f);box-shadow:0 1px 2px rgba(0,0,0,.5)}
.screw.l{left:12px}.screw.r{right:12px}

/* ---------- ANGLE RACKS: front-facing cases, interleaved with the theme racks ---------- */
.featured-rack .rack-hd{align-items:center;gap:16px}

/* One-line explanation under every rack title. Theme text comes from the compiled wiki
   definition (taxonomy.data.js), angle text from the angle page's opening paragraph —
   both single-sourced, so a shelf can never explain itself differently to the wiki.
   No kind label: angle racks already read as different from theme racks, because they
   show front-facing cases where a theme rack shows spines.
   Two lines are reserved whether the note runs to one or two, so the artwork below
   starts at the same height on every rack and the shelves stay in register. */
.rack-note{margin:0;padding:0 32px 2px;max-width:78ch;min-height:calc(2 * 1.5em + 2px);
  font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
/* featured cases sit on the same acrylic shelf as the racks, but face front.
   padding-top matches the theme .shelf so the note-to-artwork gap is identical in both
   rack types. On the theme shelf that padding also buys clip-room for the tape's hover
   lift; here it is purely for the alignment. */
.fshelf{display:flex;gap:14px;overflow-x:auto;overflow-y:visible;padding:calc(var(--lift) + 6px) 32px 26px;scrollbar-width:none}
.fshelf::-webkit-scrollbar{display:none}
.fcase{position:relative;flex:0 0 186px;height:300px;border-radius:4px 4px 2px 2px;overflow:hidden;background:#222 center/cover;cursor:none;
  box-shadow:inset 11px 0 15px rgba(0,0,0,.32),inset 3px 0 0 rgba(255,255,255,.12),inset -2px 0 0 rgba(0,0,0,.4),0 16px 30px rgba(0,0,0,.42);
  transition:transform .34s cubic-bezier(.2,.85,.2,1),box-shadow .34s;transform-origin:bottom center}
.fcase::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.14),transparent 30%)}
.fcase:hover{transform:translateY(calc(-1 * var(--lift)));box-shadow:0 30px 46px rgba(0,0,0,.5)}

/* ---------- DIRECTORY RACK: one rack whose items are shelves, not films ----------
   Only SPOTLIGHT angles get a rack of their own films; the rest live here. The cards
   deliberately do NOT reuse .fcase: a case is merchandise sitting on the acrylic ledge,
   and these are signs pointing elsewhere. Hence no ledge, landscape artwork instead of
   portrait (the source image is a 16:9 backdrop, so cropping it to a poster shape would
   invent a composition nobody framed), and a lift on hover that is half the shelf's —
   present enough to read as interactive, restrained enough not to imitate a tape. */
.dir-rack{padding-bottom:24px}
.ashelf{display:flex;gap:16px;overflow-x:auto;overflow-y:visible;
  padding:calc(var(--lift) + 6px) 32px 20px;scrollbar-width:none}
.ashelf::-webkit-scrollbar{display:none}
.acase{flex:0 0 250px;display:flex;flex-direction:column;gap:8px;text-decoration:none;
  color:inherit;cursor:none;transition:transform .3s cubic-bezier(.2,.85,.2,1)}
.acase:hover{transform:translateY(calc(-.5 * var(--lift)))}
.acase-art{position:relative;display:block;aspect-ratio:16/9;border-radius:4px;
  overflow:hidden;background:var(--bg2) center/cover no-repeat;
  box-shadow:0 14px 26px rgba(0,0,0,.40),inset 0 0 0 1px var(--hair)}
/* The label sits on the artwork, so it needs its own floor rather than relying on
   whatever happens to be in the frame — a bright backdrop would otherwise eat it. */
.acase-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.10) 30%,rgba(0,0,0,.82) 100%)}
.acase-label{position:absolute;left:12px;right:12px;bottom:10px;z-index:1;
  font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.15;
  letter-spacing:-.01em;color:#f6efe2;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.acase:hover .acase-art{box-shadow:0 20px 34px rgba(0,0,0,.5),inset 0 0 0 2.5px var(--amber)}
.acase-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft)}
/* Clamped rather than reserved: these sit in a scrolling row where every card starts at
   the same y, so an uneven bottom edge costs nothing and a fixed height would either
   clip the long notes or pad out the short ones. */
.acase-blurb{font-size:12.5px;line-height:1.45;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acase:hover .acase-blurb{color:var(--ink)}

/* ---------- DETAILS: movie-ticket sheet ---------- */
.sheet-ov{position:fixed;inset:0;z-index:80;background:rgba(8,6,4,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .35s}
.sheet-ov.open{opacity:1;pointer-events:auto}
.ticket-sheet{position:fixed;top:0;right:0;height:100%;width:min(430px,94vw);z-index:81;overflow-y:auto;padding:22px 22px 60px;transform:translateX(106%);transition:transform .48s cubic-bezier(.2,.85,.2,1);cursor:none}
.ticket-sheet.open{transform:none}
.ticket-sheet::-webkit-scrollbar{display:none}
.ticket-close{position:sticky;top:0;float:right;z-index:3;width:34px;height:34px;border:none;background:transparent;color:#241500;font-size:20px;line-height:34px;text-align:center;cursor:none;margin-bottom:-34px;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.ticket-close:hover{opacity:.55}
.ticket{--paper:#efe7d5;--tink:#1b1712;--tsoft:#6f6350;position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.85,.2,1),height .5s ease}
.tface{position:absolute;top:0;left:0;width:100%;background:var(--paper);color:var(--tink);border-radius:12px;box-shadow:0 34px 60px rgba(0,0,0,.55);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.ticket.flipped{transform:rotateY(180deg)}
.f-back{transform:rotateY(180deg)}
.flipbtn{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tink);background:transparent;border:1px solid rgba(27,23,18,.3);border-radius:20px;padding:7px 15px;cursor:none}
.flipbtn:hover{background:var(--tink);color:var(--paper)}
.f-front .stub{display:flex;flex-direction:column;gap:13px;align-items:center}
.f-back .amberbar{border-radius:12px 12px 0 0}
.f-back .tbody{padding:18px 20px 22px}
.f-back h3{font-family:var(--disp);font-weight:700;font-size:20px;margin:0 0 4px;letter-spacing:-.01em}
.f-back .cred2{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--tsoft);margin-bottom:16px}
.sec{margin-bottom:16px}
.sec h5{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tsoft);margin:0 0 7px}
.sec p{font-size:13.5px;line-height:1.52;margin:0}
.sec ul{margin:0;padding-left:16px}
.sec li{font-size:13px;line-height:1.5;margin-bottom:4px}
.chips2{display:flex;flex-wrap:wrap;gap:6px}
.chip2{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;border:1px solid rgba(27,23,18,.28);border-radius:20px;padding:3px 9px;color:var(--tink)}
.chip2-link{-webkit-appearance:none;appearance:none;background:transparent;cursor:none;transition:border-color .15s,color .15s}
.chip2-link:hover{border-color:var(--amber);color:var(--amber)}
.ticket .amberbar{background:var(--amber);color:#241500;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:10px 52px 10px 16px;display:flex;justify-content:flex-start;border-radius:12px 12px 0 0}
.ticket .tposter{aspect-ratio:16/9;background:#111 center/cover;position:relative}
.ticket .tposter .no{position:absolute;left:14px;bottom:10px;font-family:var(--mono);font-size:10px;color:#fff;letter-spacing:.1em;text-shadow:0 1px 3px #000}
.perf{position:relative;height:0;border-top:2px dashed rgba(27,23,18,.26)}
.perf::before,.perf::after{content:"";position:absolute;top:-11px;width:22px;height:22px;border-radius:50%;background:var(--bg)}
.perf::before{left:-11px}.perf::after{right:-11px}
.ticket .tbody{padding:20px 20px 16px}
.ticket .tbody h3{font-family:var(--disp);font-weight:700;font-size:26px;line-height:1.03;margin:0 0 6px;letter-spacing:-.01em}
.ticket .tbody .cred{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--tsoft);margin-bottom:18px}
/* the director's name on the ticket, linked to their page */
.cred-link{color:var(--tink);text-decoration:none;cursor:none;border-bottom:1px solid rgba(27,23,18,.3)}
.cred-link:hover{background:var(--tink);color:var(--paper);border-bottom-color:transparent}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-bottom:18px}
.tgrid .k{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--tsoft);margin-bottom:4px}
.tgrid .v{font-family:var(--mono);font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--tink)}
.ticket .syn h5{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tsoft);margin:0 0 8px}
.ticket .syn p{font-size:14px;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ticket .stub{padding:14px 20px 20px}
.barcode{width:100%;height:46px;margin-bottom:2px;background-image:repeating-linear-gradient(90deg,#1b1712 0 2px,transparent 2px 4px,#1b1712 4px 5px,transparent 5px 9px,#1b1712 9px 12px,transparent 12px 13px,#1b1712 13px 16px,transparent 16px 20px)}

/* ---------- mobile ---------- */
@media (max-width:640px){
  /* top HUD: keep it on one line — drop the clock/hours pill and the street name,
     let the brand shrink so the SAP + THEME buttons always stay on screen */
  .hud{padding:11px 14px;gap:8px}
  .hud .pill{white-space:nowrap}
  .hud.top .pill:nth-child(2){display:none}
  .hide-sm{display:none}
  .hud.top .pill:first-child{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
  .hud.top .pill:last-child{flex:0 0 auto}
  .hud.top .sep{margin:0 4px}

  /* rack header: title + RANDOM share the top row, count drops to a second line */
  .rack-hd{flex-wrap:wrap;align-items:center;gap:6px 12px;padding:0 20px 8px}
  .rack-title{flex:1 1 auto}
  .rack-count{order:3;flex-basis:100%}
  .rack-tools{flex-shrink:0}

  /* narrower column wraps a note to three lines, so the reserved block grows to match */
  .rack-note{padding:0 20px 2px;font-size:12.5px;min-height:calc(3 * 1.5em + 2px)}
  /* --lift drives both shelves' top padding, so the gap needs no mobile override */

  /* directory cards: match the shelves' 20px gutter, and narrow enough that a second
     card peeks in at 375px — a row that shows exactly one item does not read as a row */
  .ashelf{padding-left:20px;padding-right:20px;gap:12px}
  .acase{flex-basis:210px}
  .acase-label{font-size:17px}
}

/* random button never breaks its "↻ random" onto two lines */
.rack-rand{white-space:nowrap}

/* ---------- COLOPHON ----------
   The homepage's only server-rendered prose. Everything above it is drawn by store.js,
   which left the page with 16 crawlable words. Sits at the foot of the stage, quiet enough
   not to compete with the racks but real copy at real size — hiding it would be cloaking,
   and Google discounts text it can tell you're hiding. */
.colophon{max-width:70ch;padding:16px 32px 96px;border-top:1px solid var(--line);margin:24px 32px 0;
  padding-left:0;padding-right:0}
.colophon h2{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.4vw,28px);
  letter-spacing:-.01em;text-transform:lowercase;margin:22px 0 14px}
.colophon p{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin:0 0 14px}
.colophon em{color:var(--ink);font-style:italic}
.colophon a{color:var(--ink);text-decoration:none;cursor:none;border-bottom:1px solid var(--hair)}
.colophon a:hover{border-bottom-color:var(--amber);color:var(--amber)}
.colo-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-top:20px}
.colo-links a{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  border-bottom:none;border:1px solid var(--hair);border-radius:20px;padding:5px 11px}
.colo-links a:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.colo-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);width:100%}
@media (max-width:640px){
  .colophon{margin:24px 20px 0;padding-bottom:72px}
}