: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%;display:block;text-decoration:none}
.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. */
/* Shelf collage — rebuilt by construction (owner defect, Nov 1 20:13):
   the box carries its own height in vw terms. It never sizes from
   aspect-ratio and never from the images (the grid + aspect-ratio build
   measured perfect in Chromium yet iOS Safari let the pictures' own
   size leak into the tracks, so the words landed on the photos). The
   four pictures absolutely fill their quarters — a layout no engine
   can size from content. Height = card width x 1.15 (the old 20/23
   proportion); below the 860px break the card is 100vw - 40px of .wrap
   padding. On desktop the box stretches to the card row as before. */
.shelfcard .thumbs{position:relative;height:calc((100vw - 40px)*1.15);background:#0d0518;overflow:hidden}
.shelfcard .thumbs img{position:absolute;width:calc(50% - 1.5px);height:calc(50% - 1.5px);object-fit:cover}
.shelfcard .thumbs img:nth-child(1){top:0;left:0}
.shelfcard .thumbs img:nth-child(2){top:0;left:calc(50% + 1.5px)}
.shelfcard .thumbs img:nth-child(3){top:calc(50% + 1.5px);left:0}
.shelfcard .thumbs img:nth-child(4){top:calc(50% + 1.5px);left:calc(50% + 1.5px)}
@media(min-width:860px){.shelfcard .thumbs{height:auto}}
.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}
.itemwrap .ahint{color:var(--cream2);font-size:13.5px;line-height:1.6;margin-top:10px;opacity:.85}
/* Pickup counter pages (Nov 1): one big picture, the order line, nothing
   else competing. Unlisted — reached only from a copied ticket. */
.pickup{max-width:640px;margin:0 auto;padding:34px 20px 54px;text-align:center}
.pickup .kicker{margin-bottom:6px}
.pickimg{margin:18px auto 20px;max-width:520px}
.pickimg img{width:100%;height:auto;display:block;border-radius:18px;border:1px solid #e7dcc8;background:#fbf7ec}
.orderline{font-size:17px;font-weight:600;color:#3d2440;margin:0 0 14px}
.picknote{font-size:13.5px;color:#6d5a72;margin:0}
.picknote a{font-weight:600}
.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}
/* the PRICE line (owner, Nov 1 22:52): printed like a claim stub —
   the word, a dotted leader, and the price set like a rubber stamp
   in the same green ink as the clerk's tick */
.ticket .tprice{display:flex;align-items:center;gap:10px;margin-top:20px;
  font-size:13px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#8a5a13}
.ticket .tprice .tdots{flex:1;border-bottom:3px dotted rgba(110,88,52,.55)}
.ticket .tcomp{font-size:14.5px;color:#3f5a36;border:2.5px solid rgba(63,90,54,.85);border-radius:5px;
  padding:2px 10px 3px;transform:rotate(-2.5deg);background:rgba(255,255,255,.25)}
/* the clerk's handwritten sign-off at the very bottom of the ticket —
   cursive system stack, ink plum, a touch off-level like real writing */
.ticket .thand{font-family:'Snell Roundhand','Bradley Hand','Segoe Script',cursive;
  font-size:20px;line-height:1.3;color:#55255e;transform:rotate(-1.2deg);
  transform-origin:left bottom;margin:16px 0 2px 6px}
/* the hint sits ON the paper on outfit/paint tickets — ink, not cream */
.ticket .ahint{color:#6d5b40;opacity:.9}
/* the ready line sits on the paper too (it moved inside the ticket
   with the 22:52 display) — same ink as the hint, not the page cream */
.ticket .readyline{color:#6d5b40;opacity:.9}

/* ---------- 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}

/* ---------- tiles (owner, Nov 1 21:08: a tile is a door — it links
straight to the item's own page; the pop-up sheet is retired) ---------- */

/* ---------- pickup theatre (owner, Nov 1 21:18): the ready line under
the ticket on item pages and under the order line at the counter ---------- */
.readyline{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--cream2);margin-top:10px}

/* ---------- 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}
}

/* ================= STAGING ROUND 2 (owner reviews, Nov 1 23:21 + 23:30 —
   STAGING ONLY until the owner approves on phone AND computer) =========
   Item A: desktop framing. Item B: phone feature cards show four.
   Item C: phone header fold + stripe trim. ============================ */

/* ---- Item C (all widths): the papel-picado stripe is now the sticky
   bar's own bottom trim — it lives INSIDE the header (generator) and
   stays visible in both the expanded and compact states. The bar's
   bottom padding grows by the stripe's 9px to make room for it. ---- */
.topbar{padding:13px 20px 22px}
.topbar.compact{padding:7px 14px 16px}
.stripe{position:absolute;left:0;right:0;bottom:0;height:9px;
  background:repeating-linear-gradient(90deg,var(--plum2) 0 26px,var(--mag) 26px 52px,var(--mari) 52px 78px,var(--gold) 78px 104px)}

/* ---- Item C (phone): the second line FOLDS away — pushed out by the
   rising content over ~250ms — instead of snapping to display:none,
   and the hamburger fades/scales in instead of appearing from nowhere.
   Desktop fold behaviour is untouched (base rules above). ---- */
@media(max-width:760px){
  nav.mainnav{max-height:52px;
    transition:max-height .25s ease,opacity .25s ease,transform .25s ease,
      margin-top .25s ease,margin-bottom .25s ease,
      padding-top .25s ease,padding-bottom .25s ease,border-top-color .25s ease,visibility 0s}
  .topbar.compact nav.mainnav{display:flex;max-height:0;opacity:0;visibility:hidden;
    transform:translateY(-8px);margin-top:0;margin-bottom:0;
    padding-top:0;padding-bottom:0;border-top-color:transparent;pointer-events:none;
    transition:max-height .25s ease,opacity .25s ease,transform .25s ease,
      margin-top .25s ease,margin-bottom .25s ease,
      padding-top .25s ease,padding-bottom .25s ease,border-top-color .25s ease,visibility 0s linear .25s}
  .topbar .burger{display:flex;opacity:0;visibility:hidden;transform:scale(.7);
    pointer-events:none;transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
  .topbar.compact .burger{display:flex;opacity:1;visibility:visible;transform:scale(1);
    pointer-events:auto;transition:opacity .22s ease .05s,transform .22s ease .05s,visibility 0s}
}

/* ---- Item B: per-breakpoint feature curation (the DOM carries seven
   tiles per feature; fx-lg shows on desktop only, fx-sm on phone only).
   The grid breakpoints are the features' own: 3 columns at >=980px. ---- */
@media(max-width:979px){ .features .fx-lg{display:none} }
@media(min-width:980px){ .features .fx-sm{display:none} }

/* ---- Item A (desktop): the hero's portrait tableau is shown WHOLE —
   Catrina, both angelitos' faces, Sprout's face — contained over an
   ambient backdrop (its own poster, blurred and darkened, filling the
   wide stage). Below 980px the hero is untouched: cover, as loved. ---- */
.scene .ambient{display:none}
@media(min-width:980px){
  .scene-hero .ambient{display:block;position:absolute;inset:0;
    background-size:cover;background-position:center;
    filter:blur(36px) brightness(.48) saturate(1.2);transform:scale(1.18)}
  .scene.scene-hero video{object-fit:contain}
}

/* ================= REGEN ROUND 1 — HERO MASTER (staging, Nov 2) =================
   The hero is a LANDSCAPE master now (1152x768), full-bleed cover at
   every width: the Round 2 ambient-contain treatment is retired for
   this scene. The phone is served a pre-cropped portrait clip of the
   same master (loader: data-src below 980px, data-src-wide above);
   the crop window is authored by the scene's focal point
   (data-focal="43%" on the video; JS applies it as object-position
   wherever the master itself is the cropped source). */
.scene-hero .ambient{display:none !important}
@media (min-width:980px){
  .scene.scene-hero video{object-fit:cover}
}

/* ================= ZOOMED-OUT HERO — LOOK-SEE VARIANT =================
   This build differs from the regen staging build in ONE presentation
   only: the hero scene shows its WHOLE landscape frame at EVERY width.
   The video is fitted (object-fit: contain) over its own poster as an
   ambient backdrop (blurred and darkened, filling the stage behind it),
   so nothing is ever cropped — on a portrait phone stage the fitted
   frame sits inside the stage with the ambient backdrop above and
   below. The loader serves the landscape master at all widths in this
   build (the hero tag carries no data-src-wide / data-focal). */
.scene-hero .ambient{display:block !important;position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:blur(36px) brightness(.48) saturate(1.2);transform:scale(1.18)}
.scene.scene-hero video{object-fit:contain !important}

/* ================= ZOOMED-OUT HERO v2 — PLACEMENT-CORRECTED =================
   Owner correction (Nov 2, 01:20): v1 fitted the hero frame by width
   inside the RAW stage, so the sticky menu bar covered the frame's
   top. v2 fits the frame into the VISIBLE BAND: the hero video's box
   starts at the BOTTOM of the sticky header and ends at the bottom of
   the stage, so the whole frame sits in what is actually revealed and
   the header never overlaps it. Placement only — no cropping change;
   object-fit: contain (v1 rule above) still shows the whole frame.
   Insets are the header's MEASURED resting heights (Playwright,
   390x844 and 1440x900, scrollY=0, bar not compact): the hero is
   viewed at rest, so the resting two-line phone header (134px) is the
   operative phone inset; the one-line header above 760px is 74px.
   The same overlap was measured on desktop (frame top at y=0 under a
   74px bar), so the correction applies there too. The ambient
   backdrop still fills the whole stage behind, header band included. */
/* (height is set explicitly — a replaced element with height:auto
   collapses to its intrinsic ratio and ignores bottom.) */
.scene.scene-hero video{top:74px;height:calc(100% - 74px)}
@media(max-width:760px){
  .scene.scene-hero video{top:134px;height:calc(100% - 134px)}
}