:root{
  --plum:#150826; --plum2:#1d0b38; --panel:#241040; --panel2:#2c1450;
  --gold:#e9b558; --gold2:#f6d488; --cream:#f7ead2; --cream2:#e8d5ae;
  --ink:#2a1408; --mari:#ffa02e; --mag:#c94f7c; --teal:#2ec4b6;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--plum);color:var(--cream);font-family:var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--gold2)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- top bar + nav (owner, Nov 1 16:52): the nav NEVER wraps —
   one line, always. Once the visitor scrolls, the bar condenses into a
   compact sticky bar and the links move behind a hamburger (☰) at the
   top right. ---------- */
.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:nowrap;
  padding:13px 20px;background:linear-gradient(180deg,#1d0b38,#180a2e);border-bottom:1px solid rgba(233,181,88,.25);
  transition:padding .25s ease}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand .mark{width:38px;height:38px;border-radius:10px;overflow:hidden;border:1px solid rgba(233,181,88,.55);flex:none;transition:width .25s ease,height .25s ease}
.brand .mark img{width:100%;height:100%;object-fit:cover}
.brand .word{font-family:var(--serif);font-size:20px;letter-spacing:.04em;color:var(--cream);line-height:1.05;white-space:nowrap}
.brand .word small{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-top:2px}
nav.mainnav{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
nav.mainnav::-webkit-scrollbar{display:none}
nav.mainnav a{color:var(--cream2);text-decoration:none;font-size:13.5px;font-weight:600;padding:8px 11px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
nav.mainnav a:hover{color:#fff;border-color:rgba(233,181,88,.35)}
nav.mainnav a[aria-current="page"]{color:#1d0b38;background:var(--gold);border-color:var(--gold)}
/* phone header (owner, Nov 1 19:32): at rest the bar is TWO lines —
   brand on top, the five links on one slim deeper-plum band below, all
   visible at once, evenly spread, never a sideways swipe. On scroll the
   compact rules below take over: band hides, hamburger + dropdown. */
@media(max-width:760px){
  .brand .word small{display:none}
  .brand .word{font-size:17px}
  .topbar{flex-wrap:wrap}
  nav.mainnav{order:3;flex:1 1 100%;overflow:visible;justify-content:space-between;gap:0;
    margin:10px -20px -13px;padding:4px 10px;background:rgba(13,5,24,.6);
    border-top:1px solid rgba(233,181,88,.22)}
  nav.mainnav a{font-size:12px;padding:10px 4px}
}
.burger{display:none;width:42px;height:42px;flex:none;border-radius:12px;border:1px solid rgba(233,181,88,.55);
  background:rgba(21,8,38,.6);color:var(--gold2);font-size:20px;line-height:1;cursor:pointer;
  align-items:center;justify-content:center;padding:0}
.topbar.compact{padding:7px 14px}
.topbar.compact .brand .mark{width:30px;height:30px}
.topbar.compact .brand .word{font-size:17px}
.topbar.compact .brand .word small{display:none}
.topbar.compact nav.mainnav{display:none}
.topbar.compact .burger{display:flex}
.mnav{position:absolute;top:calc(100% + 8px);right:12px;z-index:61;min-width:220px;
  background:linear-gradient(180deg,#2c1450,#1d0b38);border:1px solid rgba(233,181,88,.55);
  border-radius:16px;padding:8px;box-shadow:0 24px 60px rgba(0,0,0,.55);display:grid;gap:2px}
.mnav[hidden]{display:none}
.mnav a{color:var(--cream);text-decoration:none;font-size:15px;font-weight:600;padding:11px 13px;border-radius:10px}
.mnav a:hover{background:rgba(233,181,88,.12)}
.mnav a[aria-current="page"]{color:#1d0b38;background:var(--gold)}
.stripe{height:9px;background:repeating-linear-gradient(90deg,var(--plum2) 0 26px,var(--mag) 26px 52px,var(--mari) 52px 78px,var(--gold) 78px 104px)}

/* ---------- type ---------- */
.kicker{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--mari);text-align:center;font-weight:700}
h1,h2,h3{font-family:var(--serif);font-weight:600}
.sec-title{font-size:clamp(27px,5.4vw,40px);text-align:center;line-height:1.12}
.sec-sub{max-width:620px;margin:12px auto 0;text-align:center;color:var(--cream2);font-size:15.5px;line-height:1.65}
.btn{display:inline-block;background:var(--gold);color:#241203;font-weight:700;font-size:15px;
  padding:13px 26px;border-radius:999px;text-decoration:none;border:1px solid #f6d488;cursor:pointer;font-family:var(--sans)}
.btn:hover{background:var(--gold2)}
.btn.ghost{background:transparent;color:var(--gold2);border-color:rgba(233,181,88,.55)}
.btn.ghost:hover{background:rgba(233,181,88,.12)}

/* ---------- THE BACKGROUND STAGE + THE WIPE (owner, Nov 1 18:41 — the
   slider model). ONE persistent fixed stage sits behind the whole home
   page: the scenes are stacked PINNED layers that never translate or
   parallax, and their videos keep playing ("static" = pinned, never
   frozen). Scrolling drives a WIPE: site.js clips each scene to exactly
   the viewport band its own stretch occupies (clip-path: inset), so the
   outgoing scene is clipped away along a moving edge — the slim ribbon
   between booths rides that edge — revealing the next scene already
   sitting behind it. No crossfades, no swaps: only the reveal edge
   moves. Solid content simply covers the stage as it scrolls over. The
   hero is scene 0. The stage never takes touches and no scene is ever
   faded, darkened or blurred by script. ---------- */
.stage{position:fixed;inset:0;z-index:-1;background:#0d0518;pointer-events:none;overflow:hidden}
.scene{position:absolute;inset:0;pointer-events:none;clip-path:inset(0 0 100% 0)}
.scene[data-scene="0"]{clip-path:inset(0 0 0 0)}
.scene video,.scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,5,24,.42) 0%,rgba(13,5,24,0) 30%,rgba(13,5,24,0) 46%,rgba(13,5,24,.82) 100%)}
.hero-shade{background:linear-gradient(180deg,rgba(13,5,24,.30) 0%,rgba(13,5,24,0) 30%,rgba(13,5,24,.38) 62%,rgba(13,5,24,.88) 100%)}
.scene .glow{position:absolute;inset:0;background:radial-gradient(60% 42% at 50% 78%,rgba(255,160,46,.28),transparent 70%);animation:flick 3.2s ease-in-out infinite}
.hero-stretch{position:relative;height:160svh}
.hero-first{height:calc(100svh - 74px);display:flex;align-items:flex-end;justify-content:center}
.hero-overlay{position:relative;width:100%;max-width:780px;margin:0 auto;
  padding:120px 20px 56px;text-align:center}
.hero-overlay h1{font-size:clamp(34px,7vw,58px);line-height:1.08;margin-top:14px;text-shadow:0 2px 24px rgba(13,5,24,.8)}
.hero-overlay .todaychip{text-shadow:0 1px 10px rgba(13,5,24,.8)}
.rise{position:relative;z-index:6;background:var(--plum);
  border-radius:30px 30px 0 0;border-top:1px solid rgba(233,181,88,.22);
  box-shadow:0 -34px 70px rgba(0,0,0,.5)}
.intro-rest{max-width:780px;margin:0 auto;padding:40px 20px 2px;text-align:center}
.intro-rest .lede{max-width:640px;margin:0 auto;color:var(--cream);font-size:16.5px;line-height:1.7}
.intro-rest .honour{max-width:600px;margin:14px auto 0;color:#ffd9a0;font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.6}
.intro-rest .ctas{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- intro (overlaid on the hero) ---------- */
.hero-intro{position:relative;z-index:2;width:100%;max-width:780px;margin:0 auto;
  padding:180px 20px 42px;text-align:center}
.hero-intro h1{font-size:clamp(34px,7vw,58px);line-height:1.08;margin-top:14px;text-shadow:0 2px 24px rgba(13,5,24,.8)}
.hero-intro .lede{max-width:640px;margin:16px auto 0;color:var(--cream);font-size:16.5px;line-height:1.7;text-shadow:0 1px 14px rgba(13,5,24,.85)}
.hero-intro .honour{max-width:600px;margin:14px auto 0;color:#ffd9a0;font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.6;text-shadow:0 1px 14px rgba(13,5,24,.9)}
.todaychip{display:inline-block;margin-top:20px;padding:9px 18px;border:1px solid rgba(255,160,46,.6);border-radius:999px;
  color:#ffd9a0;font-size:13.5px;font-weight:600;background:rgba(21,8,38,.5)}
.hero-intro .ctas{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- day features ---------- */
.features{display:grid;gap:22px;padding:44px 20px 6px}
@media(min-width:900px){.features{grid-template-columns:1fr 1fr}}
.feature{position:relative;border:1px solid rgba(233,181,88,.28);border-radius:22px;padding:26px 22px 22px;
  background:linear-gradient(180deg,rgba(44,20,80,.65),rgba(29,11,56,.9))}
.feature.lead{border-color:var(--mari);box-shadow:0 0 0 1px rgba(255,160,46,.45),0 18px 50px rgba(0,0,0,.45)}
.feat-when{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:#ffd9a0;background:rgba(255,160,46,.14);border:1px solid rgba(255,160,46,.5);padding:6px 12px;border-radius:999px}
.feature:not(.lead) .feat-when{color:var(--cream2);background:rgba(247,234,210,.06);border-color:rgba(233,181,88,.3)}
.feature h3{font-size:clamp(23px,4.6vw,30px);margin-top:14px;line-height:1.15}
.feature .fsub{font-family:var(--serif);font-style:italic;color:var(--gold2);font-size:15.5px;margin-top:3px}
.feature p.fcopy{color:var(--cream2);font-size:14.5px;line-height:1.65;margin-top:10px}
.feature .flink{margin-top:16px;font-size:14px;font-weight:700}
.feature .flink a{text-decoration:none;border-bottom:1px solid rgba(233,181,88,.5)}

/* ---------- calendar squares (owner, Nov 1 page-assembly round): the two
   festival days presented as little calendar pages — month strip, big date
   numeral, weekday; today's square ringed. The .feat-when pill classes ride
   on the calendar tag so the date-flip script keeps one hook. ---------- */
.feat-head{display:flex;gap:16px;align-items:flex-start}
.feat-titles{min-width:0}
.feat-titles h3{margin-top:2px}
.cal{flex:none;width:104px;border-radius:12px;overflow:hidden;text-align:center;
  background:linear-gradient(180deg,#fdf6e3,#f1e2bd);color:var(--ink);
  border:1px solid #e5cf9e;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.cal-month{background:var(--mag);color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;padding:6px 2px}
.cal-num{font-family:var(--serif);font-size:50px;line-height:1.04;padding-top:3px}
.cal-day{font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#8a5a18}
.features .cal .feat-when{display:block;background:none;border:none;border-radius:0;
  color:#9a6a12;font-size:9.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;padding:1px 2px 7px}
.cal.today{box-shadow:0 0 0 3px var(--mari),0 12px 26px rgba(0,0,0,.45)}
.features .cal.today .feat-when{color:#b3540e}

/* ---------- shelves + tiles ---------- */
.shelf{padding:46px 0 6px}
.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
@media(min-width:640px){.sgrid{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(min-width:980px){.sgrid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:980px){.sgrid.three{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative;text-align:left;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid rgba(233,181,88,.28);
  border-radius:16px;padding:10px 10px 12px;cursor:pointer;font-family:var(--sans);color:var(--cream);width:100%}
.tile:hover{border-color:var(--gold)}
.tile .tim{display:block;border-radius:11px;overflow:hidden;aspect-ratio:3/4;background:#3a1c66}
.tile .tim img{width:100%;height:100%;object-fit:cover}
.tile .tnm{display:block;font-family:var(--serif);font-size:17px;margin-top:10px;line-height:1.2}
.tile .tds{display:block;color:var(--cream2);font-size:12.5px;margin-top:3px;line-height:1.4;min-height:2.6em}
.tile .tget{display:inline-block;margin-top:7px;font-size:9.5px;font-weight:800;letter-spacing:.14em;color:#ffd9a0;
  border:1px solid rgba(255,160,46,.55);padding:4px 8px;border-radius:999px}
.aisle-head{display:flex;align-items:baseline;gap:14px;margin-top:8px}
.aisle-head h3{font-size:clamp(21px,4.4vw,27px)}
.aisle-head .cnt{color:var(--mari);font-size:13px;font-weight:700;letter-spacing:.08em}
.aisle-rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(233,181,88,.5),transparent)}
.section-note{max-width:640px;margin:14px auto 0;text-align:center;color:var(--cream2);font-size:14px;line-height:1.65}

/* ---------- booths: stretches over the stage. Each booth is a tall
   TRANSPARENT stretch; its label anchors LOW (owner restructure, Nov 1
   18:40) — the card sits near the bottom of the stretch with clear space
   above it, so the scene plays unobstructed above the words. Slim ~56px
   RIBBONS ride between booths, and the stage wipe's reveal edge travels
   with them. There are no per-section backgrounds: the pinned stage,
   clipped by the wipe, does all of it. ---------- */
.booths{margin-top:0}
/* Booth stretch height: 124svh (seam round) -> 148.8svh = +20% (owner
   tuning, Nov 1 18:55) — more open scene above each bottom-anchored card. */
.booth{position:relative;height:148.8svh;display:flex;align-items:flex-end;justify-content:center;padding:40px 18px 11svh}
.booth[data-stretch="1"]{height:163.7svh}
.tail{position:relative;z-index:6;background:var(--plum)}
/* Interludes are RIBBONS now (owner, Nov 1 18:41): a ~56px band — an
   awning-striped top edge over deep plum — carrying one italic line.
   Never a slab, never a screenful: the transition stays a slider's edge. */
.interlude{position:relative;z-index:6;height:56px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--plum2),var(--plum));
  border-block:1px solid rgba(233,181,88,.3)}
.interlude .rawning{position:absolute;top:0;left:0;right:0;height:13px;
  background:repeating-linear-gradient(90deg,#b12a5e 0 26px,#f3e3c2 26px 52px)}
.interlude .rawning::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:9px;
  background:radial-gradient(circle at 13px -1px,#f3e3c2 7px,transparent 8px) 0 0/52px 9px repeat-x}
.interlude p{font-family:var(--serif);font-style:italic;color:var(--gold2);
  font-size:15px;line-height:1.3;text-align:center;padding:15px 16px 0}
.coverup{position:relative}

/* ---------- frosted LEADING EDGES (owner, Nov 1: blur ONLY at the
   boundary). Every solid layer that slides over a video carries a thin
   backdrop-blur strip riding just above its top edge: the few boundary
   pixels of the video behind it are frosted, the picture itself stays
   sharp everywhere else. The video is never blurred. ---------- */
.rise::before,.coverup::before{
  content:"";position:absolute;left:0;right:0;top:-63px;height:64px;pointer-events:none;
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  background:linear-gradient(180deg,transparent 0%,var(--edge-a,rgba(21,8,38,.45)) 55%,var(--edge,#150826) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 32%);mask-image:linear-gradient(180deg,transparent,#000 32%)}
/* D1 corner repair: the rise card's rounded corners used to leave raw
   scene wedges above the arc. Its frost cap now carries the SAME radius
   and overlaps the card's top, so the corner zones are filled with frost
   that follows the card's own rounded shape — nothing peeks around it. */
.rise::before{height:99px;border-radius:30px 30px 0 0;
  background:linear-gradient(180deg,transparent 0%,var(--edge-a,rgba(21,8,38,.45)) 38%,var(--edge,#150826) 72%,var(--edge,#150826) 100%)}
.rise{--edge:#150826;--edge-a:rgba(21,8,38,.45)}
.coverup{--edge:#1d0b38;--edge-a:rgba(29,11,56,.45)}
@keyframes flick{0%,100%{opacity:.75}42%{opacity:1}64%{opacity:.6}78%{opacity:.95}}
.awning{position:absolute;top:0;left:0;right:0;height:46px;z-index:3;
  background:repeating-linear-gradient(90deg,#b12a5e 0 36px,#f3e3c2 36px 72px);
  box-shadow:0 6px 18px rgba(0,0,0,.45)}
.awning::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:14px;
  background:radial-gradient(circle at 18px -2px,#f3e3c2 12px,transparent 13px) 0 0/72px 14px repeat-x}
.awning.alt{background:repeating-linear-gradient(90deg,#1f6f6b 0 36px,#f3e3c2 36px 72px)}
.lights{position:absolute;top:60px;left:0;right:0;height:22px;z-index:3;pointer-events:none;opacity:.95;
  background-image:radial-gradient(circle at 8px 8px,#ffe3a1 0 3.2px,rgba(255,227,161,.35) 5px,transparent 7px);
  background-size:52px 22px;background-repeat:repeat-x}
.lights::after{content:"";position:absolute;left:0;right:0;top:9px;height:22px;
  background-image:radial-gradient(circle at 8px 8px,#ffc46b 0 2.6px,rgba(255,196,107,.3) 4.4px,transparent 6px);
  background-size:52px 22px;background-position:26px 0;background-repeat:repeat-x}
.booth-label{position:relative;z-index:4;max-width:600px;width:100%;text-align:center;
  background:rgba(21,8,38,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(233,181,88,.5);border-radius:22px;padding:26px 24px 24px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.booth-eyebrow{font-size:11px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--mari)}
.booth-title{font-size:clamp(28px,6.4vw,42px);margin-top:8px;line-height:1.1}
.booth-line{color:var(--cream2);font-size:15.5px;line-height:1.65;margin:10px auto 0;max-width:460px}
.booth-label .btn{margin-top:18px}
.booth-chip{display:inline-block;margin-top:14px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#ffd9a0;border:1px dashed rgba(255,160,46,.7);padding:6px 12px;border-radius:999px}

/* ---------- host panel + favourites ---------- */
.host{display:grid;gap:0;margin-top:64px;border:1px solid rgba(233,181,88,.3);border-radius:26px;overflow:hidden;background:linear-gradient(180deg,var(--panel2),var(--plum2))}
@media(min-width:860px){.host{grid-template-columns:400px 1fr}}
.host .himg{aspect-ratio:3/4;max-height:520px;width:100%}
.host .himg img{width:100%;height:100%;object-fit:cover}
.host .hbody{padding:30px 28px;display:flex;flex-direction:column;justify-content:center}
.host h3{font-size:clamp(25px,5vw,34px);margin-top:8px}
.host p{color:var(--cream2);line-height:1.7;font-size:15.5px;margin-top:12px;max-width:520px}
.host .btn{align-self:flex-start;margin-top:20px}
.cast-band{margin-top:0;border-top:1px solid rgba(233,181,88,.25);border-bottom:1px solid rgba(233,181,88,.25);
  background:linear-gradient(180deg,#1d0b38,#150826);padding:34px 0 8px;overflow:hidden}
.cast-band h3{text-align:center;font-size:clamp(22px,4.6vw,30px)}
.cast-band .csub{text-align:center;color:var(--cream2);font-size:14px;margin-top:6px}
.cast-wrap{position:relative;margin-top:22px}
.marquee{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;cursor:grab;-webkit-overflow-scrolling:touch}
.marquee::-webkit-scrollbar{display:none}
.marquee.dragging{cursor:grabbing}
.marquee.dragging *{pointer-events:none}
.cast-track{display:flex;gap:16px;width:max-content;padding:18px 10px 26px}
.cast-card{flex:none;width:128px;text-align:center;text-decoration:none;position:relative;
  transition:transform .25s ease;transform-origin:50% 50%}
.cast-card:hover,.cast-card:focus-visible{transform:scale(1.06);z-index:3}
.cast-arrow{position:absolute;top:98px;transform:translateY(-50%);z-index:6;width:44px;height:44px;
  border-radius:50%;border:1px solid rgba(233,181,88,.6);background:rgba(21,8,38,.78);
  color:var(--gold2);font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.45);padding:0}
.cast-arrow.prev{left:8px}
.cast-arrow.next{right:8px}
.cast-arrow:hover{background:rgba(46,20,66,.94);color:#fff}
.cast-arrow:active{transform:translateY(-50%) scale(.93)}
.cast-card .cim{display:block;width:128px;height:160px;border-radius:14px;overflow:hidden;border:1px solid rgba(233,181,88,.35)}
.cast-card img{width:100%;height:100%;object-fit:cover}
.cast-card .cnm{display:block;color:var(--cream);font-family:var(--serif);font-size:15px;margin-top:8px}
.cast-card .cds{display:block;color:var(--cream2);font-size:11px;margin-top:2px;line-height:1.35}

/* ---------- shop doors ---------- */
.doors{display:grid;gap:16px;margin-top:28px}
@media(min-width:700px){.doors{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.doors{grid-template-columns:repeat(3,1fr)}}
.door{position:relative;border-radius:20px;overflow:hidden;border:1px solid rgba(233,181,88,.35);text-decoration:none;display:block;background:var(--panel)}
.door .dim{display:block;aspect-ratio:16/10;overflow:hidden}
.door .dim img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.door:hover .dim img{transform:scale(1.045)}
.door .dbody{display:block;padding:16px 18px 18px}
.door .dno{font-size:10.5px;font-weight:800;letter-spacing:.24em;color:var(--mari)}
.door h3{font-size:21px;margin-top:5px;color:var(--cream)}
.door p{color:var(--cream2);font-size:13.5px;line-height:1.55;margin-top:5px}
.door .dgo{color:var(--gold2);font-weight:700;font-size:13.5px;margin-top:10px;display:inline-block}

/* ---------- collections shelves ---------- */
.shelfcard{display:grid;border:1px solid rgba(233,181,88,.3);border-radius:24px;overflow:hidden;margin-top:26px;background:linear-gradient(180deg,var(--panel2),var(--plum2))}
@media(min-width:860px){.shelfcard{grid-template-columns:1.15fr 1fr}}
/* shelf collage (owner defect, Nov 1 19:29): the collage box takes its
   height from its OWN aspect-ratio (2 columns x 1:1.15 cells = 20/23),
   never from the images — the old per-image height:100% + aspect-ratio
   let some phone browsers collapse the tracks and the words rode up
   over the photos. Text always sits on the solid panel beneath. */
.shelfcard .thumbs{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;background:#0d0518;aspect-ratio:20/23}
.shelfcard .thumbs img{width:100%;height:100%;object-fit:cover;min-height:0}
.shelfcard .sbody{padding:28px 26px;display:flex;flex-direction:column;justify-content:center}
.shelfcard h3{font-size:clamp(24px,5vw,32px);margin-top:8px}
.shelfcard p{color:var(--cream2);line-height:1.7;font-size:15px;margin-top:10px}
.shelfcard ul{list-style:none;margin-top:14px}
.shelfcard li{margin-top:7px;font-size:14.5px}
.shelfcard li a{text-decoration:none;border-bottom:1px solid rgba(233,181,88,.45)}

/* ---------- page heads ---------- */
.pagehead{padding:48px 20px 4px;text-align:center}
.pagehead h1{font-size:clamp(32px,6.6vw,50px);margin-top:12px;line-height:1.1}
.howbox{max-width:680px;margin:26px auto 0;border:1px dashed rgba(255,160,46,.55);border-radius:18px;padding:18px 22px;
  color:var(--cream2);font-size:14.5px;line-height:1.7;text-align:center;background:rgba(255,160,46,.05)}
.howbox b{color:var(--gold2)}

/* ---------- build page ---------- */
.workbench{max-width:760px;margin:34px auto 0;text-align:center}
.workbench .wimg{border-radius:24px;overflow:hidden;border:1px solid rgba(233,181,88,.35);aspect-ratio:4/3}
.workbench .wimg img{width:100%;height:100%;object-fit:cover}
.comingchips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.comingchips span{font-size:12.5px;font-weight:700;color:var(--cream2);border:1px solid rgba(233,181,88,.4);border-radius:999px;padding:7px 13px}

/* ---------- item pages ---------- */
.crumbs{max-width:880px;margin:0 auto;padding:22px 20px 0;font-size:13px;color:var(--cream2)}
.crumbs a{color:var(--gold2);text-decoration:none}
.itemwrap{max-width:880px;margin:0 auto;padding:14px 20px 10px}
.itemhero{border-radius:24px;overflow:hidden;border:1px solid rgba(233,181,88,.4);background:#3a1c66;max-width:600px;margin:0 auto}
.itemhero img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* cast galleries: prev/next picture switcher (owner, Nov 1 18:58) */
.gallery{position:relative}
.gnav{position:absolute;top:40%;width:42px;height:42px;border-radius:50%;cursor:pointer;z-index:3;
  border:1px solid rgba(233,181,88,.6);background:rgba(21,8,38,.72);color:var(--gold2);
  font-size:25px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0 0 3px}
.gprev{left:10px}
.gnext{right:10px}
.gnav:hover{background:rgba(21,8,38,.94)}
.gcap{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;
  font-size:13.5px;color:var(--cream2);background:rgba(21,8,38,.55)}
.gcount{font-variant-numeric:tabular-nums;opacity:.8}
.itemwrap h1{font-size:clamp(30px,6vw,44px);margin-top:22px;line-height:1.12}
.itemwrap .ids{font-family:var(--serif);font-style:italic;color:var(--gold2);font-size:17px;margin-top:4px}
.itemwrap .inote{color:var(--cream2);font-size:15.5px;line-height:1.7;margin-top:12px;max-width:620px}
.itemactions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.promptbox{margin-top:26px;background:#fdf6e3;color:var(--ink);border-radius:18px;padding:22px 22px 18px;border:1px solid #e5cf9e}
.promptbox .plabel{font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#9a6a12}
.promptbox pre{white-space:pre-wrap;word-wrap:break-word;font-family:var(--sans);font-size:14.5px;line-height:1.7;margin-top:10px}
.agentline{margin-top:18px;color:var(--cream2);font-size:13.5px;line-height:1.65;border:1px dashed rgba(233,181,88,.4);border-radius:14px;padding:13px 16px}
.agentline code{color:var(--gold2);font-size:12.5px;word-break:break-all}
/* ---------- the tailor ticket = a paper CLAIM TICKET (owner, Nov 1
   18:58): the little paper slip from the tailor's counter. Pure CSS —
   layered gradients fake the paper, the dashed line + punched notches
   fake the tear-off stub, pencil-grey hand styling does the rest.
   No image assets, no new requests. ---------- */
.ticket{position:relative;margin-top:26px;border-radius:9px;padding:0 22px 20px;color:#43331f;
  border:1px solid #d9c69c;box-shadow:0 12px 28px rgba(0,0,0,.38);
  background:
   repeating-linear-gradient(0deg, rgba(122,92,40,.028) 0 3px, transparent 3px 6px),
   repeating-linear-gradient(90deg, rgba(122,92,40,.02) 0 2px, transparent 2px 7px),
   linear-gradient(165deg,#faf3e0,#f4e9cd 55%,#eedfb9)}
.ticket .tstub{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:15px 2px 11px;border-bottom:2px dashed rgba(110,88,52,.55)}
.ticket .tstub::before,.ticket .tstub::after{content:"";position:absolute;bottom:-8px;width:15px;height:15px;
  border-radius:50%;background:var(--plum)}
.ticket .tstub::before{left:-30px}
.ticket .tstub::after{right:-30px}
.ticket .plabel{margin:0;font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#8a5a13}
.ticket .tno{font-family:'Segoe Print','Bradley Hand',cursive;font-size:17px;color:#6d5b40;transform:rotate(-2deg)}
.ticket .tsub{color:#6d5b40;font-size:14px;line-height:1.65;margin-top:12px;max-width:600px}
.trow{display:flex;gap:11px;align-items:flex-start;margin-top:14px;font-size:15px;line-height:1.55;cursor:pointer;color:#43331f}
.trow input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:1px;flex:none;cursor:pointer;
  border:2px solid #5d4a2f;border-radius:4px;background:rgba(255,255,255,.35);transform:rotate(-1deg)}
.trow input:checked::after{content:"✓";display:block;margin:-8px 0 0 1px;
  font-family:'Segoe Print','Bradley Hand',cursive;font-size:22px;font-weight:700;color:#3f5a36;transform:rotate(-6deg)}
.trow .thint{opacity:.72;font-size:13.5px}
/* an unavailable line is PENCILLED THROUGH by the clerk — still on the
   ticket, struck in pencil grey, its box crossed with a pencilled X */
.trow.off{cursor:default}
.trow.off input{cursor:default;border-color:rgba(96,86,74,.65);transform:rotate(.6deg);
  background:
   linear-gradient(to top right, transparent calc(50% - 1.2px), rgba(96,86,74,.85) calc(50% - 1.2px), rgba(96,86,74,.85) calc(50% + 1.2px), transparent calc(50% + 1.2px)),
   linear-gradient(to bottom right, transparent calc(50% - 1.2px), rgba(96,86,74,.85) calc(50% - 1.2px), rgba(96,86,74,.85) calc(50% + 1.2px), transparent calc(50% + 1.2px)),
   rgba(255,255,255,.25)}
.tstrike{color:#7d7264;text-decoration:line-through;text-decoration-color:rgba(96,86,74,.8);text-decoration-thickness:2px}
.ticket .itemactions{margin-top:18px}

/* ---------- closing + footer ---------- */
.closing{text-align:center;padding:64px 20px 8px}
.closing .big{font-family:var(--serif);font-size:clamp(24px,5.4vw,36px);line-height:1.3;max-width:640px;margin:0 auto}
.closing .sig{margin-top:14px;color:var(--gold2);font-family:var(--serif);font-style:italic;font-size:16px}
footer{margin-top:0;border-top:1px solid rgba(233,181,88,.25);padding:30px 20px 44px;text-align:center;background:var(--plum)}
footer .fnote{max-width:560px;margin:0 auto;color:var(--cream2);font-size:13px;line-height:1.7}
footer nav{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
footer nav a{color:var(--gold2);text-decoration:none;font-size:13.5px;font-weight:600}

/* ---------- prompt sheet (owner's sheet rule: picture + name + Copy + Download, no text block, no scrolling) ---------- */
html.noscroll,body.noscroll{overflow:hidden}
.pback{position:fixed;inset:0;background:rgba(10,3,20,.72);z-index:90;display:none;align-items:flex-end;justify-content:center}
.pback.open{display:flex}
@media(min-width:640px){.pback{align-items:center;padding:22px}}
.ppanel{background:linear-gradient(180deg,#2c1450,#1d0b38);border:1px solid rgba(233,181,88,.55);border-radius:22px 22px 0 0;
  width:100%;max-width:430px;padding:14px 16px 18px;position:relative;overflow:hidden}
@media(min-width:640px){.ppanel{border-radius:22px}}
.ppanel .pimg{border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:#3a1c66}
.ppanel .pimg img{width:100%;height:100%;object-fit:cover}
.ppanel .pname{font-family:var(--serif);font-size:21px;margin-top:12px;line-height:1.2;padding-right:40px}
.ppanel .pfree{font-size:10px;font-weight:800;letter-spacing:.16em;color:#ffd9a0;margin-top:5px}
.ppanel .pbtns{display:grid;gap:9px;margin-top:13px}
.ppanel .pbtns .btn{text-align:center;padding:13px 10px;font-size:15px}
.ppanel .ppage{display:block;text-align:center;margin-top:11px;font-size:13.5px;font-weight:700;color:var(--gold2);text-decoration:none}
.ppanel .phint{color:var(--cream2);font-size:12px;line-height:1.5;margin-top:10px;text-align:center}
.px{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(233,181,88,.5);
  background:rgba(21,8,38,.85);color:var(--cream);font-size:17px;cursor:pointer;line-height:1;z-index:2}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  .cast-card{transition:none}
  .scene .glow{animation:none}
  html{scroll-behavior:auto}
}