/* ── Teachers' Day · CINEMA ────────────────────────────────────────────────
   The page is the ticket. One button takes you to the seat list; the
   invitation is printed on the ticket's reverse.
   Nothing scrolls: every screen sizes itself to the viewport.
   ────────────────────────────────────────────────────────────────────────── */

@font-face{font-family:'Anton';src:url('../fonts/anton-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/ebgaramond-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/ebgaramond-italic-latin.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}

:root{
  --base:#000000;          /* film base                     */
  --edge:#131110;          /* the rail, one step off black  */
  --stock:#EFE3CB;         /* ticket card stock             */
  --stock-2:#E4D5B8;       /* stub, one shade down the roll */
  --ink:#E24A3F;           /* vintage ticket red            */
  --ink-deep:#9E2B22;
  --ink-black:#241C16;     /* press black, warm             */
  --cream:#F4EDDF;
  --cream-dim:#A29A8E;
  --spent:#8E887E;         /* a torn, used stub             */

  --display:'Anton','Haettenschweiler','Arial Narrow',sans-serif;
  --text:'EB Garamond',Georgia,'Times New Roman',serif;

  --gutter:clamp(12px,4.2vw,22px);
  --advance:520ms;
  --ease:cubic-bezier(.72,0,.18,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--base);color:var(--cream);
  font-family:var(--text);line-height:1.55;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* ── The strip ───────────────────────────────────────────────────────────── */
.strip{
  position:fixed;inset:0;width:min(100%,31rem);margin-inline:auto;
  background:var(--base);overflow:hidden;
  box-shadow:0 0 0 1px rgba(244,237,223,.07);
}
/* ── The gate: one frame at a time passes through it ─────────────────────── */
.gate{position:absolute;inset:0;overflow:hidden}
.frame{
  position:absolute;inset:0;display:flex;flex-direction:column;
  padding:var(--gutter);background:var(--base);
}
.frame[hidden]{display:none}
.frame.is-out-up{animation:advance-out var(--advance) var(--ease) both}
.frame.is-in-up{animation:advance-in  var(--advance) var(--ease) both}
.frame.is-out-down{animation:advance-out var(--advance) var(--ease) both reverse}
.frame.is-in-down{animation:advance-in  var(--advance) var(--ease) both reverse}
@keyframes advance-out{from{transform:none}          to{transform:translateX(-26%);opacity:0}}
@keyframes advance-in {from{transform:translateX(100%)} to{transform:none}}

/* ── The ticket ──────────────────────────────────────────────────────────── */
.ticket{
  flex:1;min-height:0;display:flex;flex-direction:column;position:relative;
  background:var(--stock);color:var(--ink-black);
  background-image:
    linear-gradient(103deg,rgba(255,255,255,.55),transparent 40%),
    radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.4),transparent 62%);
  box-shadow:0 10px 26px rgba(0,0,0,.7);
}
.ticket::before,.ticket::after{        /* torn off the roll, top and bottom */
  content:'';position:absolute;left:0;right:0;height:12px;z-index:2;
  background-image:radial-gradient(circle at center,var(--base) 0 5px,transparent 5.6px);
  background-size:13px 12px;background-repeat:repeat-x;
}
.ticket::before{top:-6px}
.ticket::after{bottom:-6px}

.ticket__main{
  flex:1;min-height:0;display:flex;flex-direction:column;
  padding:clamp(.85rem,3.2vh,1.5rem) clamp(.9rem,4vw,1.6rem);
}
.ticket__main::before{                 /* printed rule, inset from the die-cut */
  content:'';position:absolute;inset:6px;border:1px dashed rgba(226,74,63,.4);
  pointer-events:none;
}

.furniture{
  display:flex;align-items:center;gap:.6rem;flex:0 0 auto;
  font-family:var(--display);font-size:.6rem;letter-spacing:.22em;color:var(--ink);
}
.furniture .rule{flex:1;height:0;border-top:1px dotted rgba(158,43,34,.5)}
.furniture .serial{color:var(--ink-black);opacity:.55}
.feature{flex:0 0 auto;margin:.5rem 0 0;font-family:var(--display);
  font-size:min(2.9vw,1.45vh);letter-spacing:.3em;color:rgba(36,28,22,.4)}

/* the one bold thing */
.callsheet{margin:auto 0;padding:clamp(.4rem,1.6vh,1rem) 0}
.callsheet span{
  display:block;font-family:var(--display);color:var(--ink);white-space:nowrap;
  font-size:min(20.5vw,10.2vh);line-height:.83;
  text-shadow:2px 2px 0 rgba(158,43,34,.34);   /* letterpress misregistration */
}
.callsheet span:nth-child(2){letter-spacing:-.03em}

.billing{flex:0 0 auto;padding-top:clamp(.4rem,1.4vh,.8rem);border-top:2px solid var(--ink)}
.billing h1{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:min(7.6vw,3.6vh);line-height:1.02;color:var(--ink-black);
}
.billing p{margin:.2rem 0 0;font-size:min(3.9vw,1.9vh);font-style:italic;
  color:rgba(36,28,22,.72)}
.billing em{font-style:normal;font-family:var(--display);letter-spacing:.11em;
  font-size:.88em;color:var(--ink-deep)}

.band{
  flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:clamp(.5rem,1.7vh,1rem);border:2px solid var(--ink);
}
.band > div{padding:clamp(.3rem,1vh,.55rem) .35rem;text-align:center;
  border-left:1px solid rgba(226,74,63,.5)}
.band > div:first-child{border-left:0}
.band dt{font-family:var(--display);font-size:min(2.7vw,1.35vh);letter-spacing:.24em;color:var(--ink)}
.band dd{margin:.1rem 0 0;font-family:var(--display);line-height:1.08;
  font-size:min(5vw,2.5vh);color:var(--ink-black)}
.band .theme dd{color:var(--ink);letter-spacing:.04em}

.details{
  flex:0 0 auto;display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;
  align-items:baseline;margin-top:clamp(.45rem,1.5vh,.9rem);
}
.details dt{font-family:var(--display);font-size:min(2.7vw,1.35vh);letter-spacing:.22em;
  color:var(--ink)}
.details dd{margin:0;font-size:min(3.7vw,1.85vh);line-height:1.3;color:var(--ink-black)}

/* perforation + stub */
.ticket__stub{
  position:relative;flex:0 0 auto;background:var(--stock-2);
  padding:clamp(.5rem,1.9vh,.9rem) clamp(.9rem,4vw,1.6rem);
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
}
.ticket__stub::before{
  content:'';position:absolute;left:0;right:0;top:-6px;height:12px;
  background-image:radial-gradient(circle at center,var(--base) 0 2.2px,transparent 2.7px);
  background-size:10px 12px;background-repeat:repeat-x;
}
.notch{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--base);z-index:2}
.notch--a{left:-10px;top:-10px}
.notch--b{right:-10px;top:-10px}
.stub__admit{font-family:var(--display);font-size:min(4.6vw,2.3vh);letter-spacing:.13em;
  color:var(--ink);line-height:1.05}
.stub__admit small{display:block;font-family:var(--text);font-style:italic;letter-spacing:0;
  font-size:min(3.1vw,1.55vh);color:rgba(36,28,22,.55)}
.stub__seat{display:flex;gap:.9rem;margin:0}
.stub__seat dt{font-family:var(--display);font-size:min(2.5vw,1.25vh);letter-spacing:.2em;
  color:var(--ink);text-align:center}
.stub__seat dd{margin:.05rem 0 0;font-family:var(--display);font-size:min(4.4vw,2.2vh);
  color:var(--ink-black);text-align:center}

/* ── Advance control ─────────────────────────────────────────────────────── */
.actions{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;
  gap:clamp(.35rem,1.2vh,.6rem);margin-top:clamp(.6rem,2vh,1.1rem)}
.aside{
  align-self:center;padding:.25rem .2rem;
  font-family:var(--display);font-size:min(2.9vw,1.45vh);letter-spacing:.24em;
  color:var(--cream-dim);border-bottom:1px solid rgba(226,74,63,.45);
}
.aside:hover,.aside:focus-visible{color:var(--ink)}
.actions{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;
  gap:clamp(.3rem,1.1vh,.55rem);margin-top:clamp(.6rem,2vh,1.1rem)}
.actions .advance{margin-top:0}
.advance{
  flex:0 0 auto;margin-top:clamp(.6rem,2vh,1.1rem);width:100%;
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  background:var(--ink);color:var(--stock);
  padding:clamp(.6rem,2vh,.95rem) 1rem;
  font-family:var(--display);font-size:min(4vw,2vh);letter-spacing:.22em;
  transition:background 140ms linear;
}
.advance:hover,.advance:focus-visible{background:var(--ink-deep)}
.advance--quiet{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--ink);
}
.advance--quiet:hover,.advance--quiet:focus-visible{background:rgba(226,74,63,.14)}

.advance svg{flex:0 0 auto}

.rewind{
  flex:0 0 auto;align-self:flex-start;margin-bottom:clamp(.5rem,1.6vh,.9rem);
  display:flex;align-items:center;gap:.45rem;
  font-family:var(--display);font-size:.62rem;letter-spacing:.26em;color:var(--cream-dim);
}
.rewind:hover,.rewind:focus-visible{color:var(--ink)}

/* ── Frame 2 · the invitation ────────────────────────────────────────────── */
.letter{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;position:relative;
  background:var(--stock);color:var(--ink-black);
  padding:clamp(.9rem,3vh,1.7rem) clamp(1rem,5vw,2rem);
  box-shadow:0 10px 26px rgba(0,0,0,.7);
}
.letter::before{content:'';position:absolute;inset:7px;border:1px solid rgba(226,74,63,.35);
  pointer-events:none}
.letter > *{max-width:30rem}

.l-mark{color:var(--ink);width:min(13vw,6.4vh);height:auto;
  margin-bottom:clamp(.3rem,1.4vh,.8rem)}

.l-lede,.l-body,.l-sign{margin:0;font-size:min(4.4vw,2.1vh);line-height:1.4}
.l-joiner{margin:0;font-style:italic;font-size:min(3.3vw,1.6vh);line-height:1.35;
  color:rgba(36,28,22,.52)}
.l-school{
  margin:.05rem 0 .1rem;font-family:var(--display);font-size:min(4.4vw,2.15vh);
  letter-spacing:.11em;line-height:1.2;color:var(--ink-black);
}
.l-headline{
  margin:.15rem 0;font-family:var(--display);font-size:min(6.9vw,3.35vh);
  letter-spacing:.02em;line-height:1.06;color:var(--ink-black);
}
.l-theme{
  margin:.1rem 0;display:flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--display);font-size:min(8.8vw,4.3vh);letter-spacing:.16em;
  line-height:1;color:var(--ink);text-shadow:1.5px 1.5px 0 rgba(158,43,34,.3);
}
.l-theme svg{width:.95em;height:auto;flex:0 0 auto;opacity:.9}
.l-note{
  margin:.6rem 0 .1rem;font-style:italic;font-size:min(3.7vw,1.8vh);line-height:1.45;
  color:rgba(36,28,22,.66);max-width:26rem;
}
.l-rsvp{margin:.3rem 0 .1rem;font-family:var(--display);font-size:min(3.2vw,1.55vh);
  letter-spacing:.34em;color:var(--ink)}
.l-sign{color:rgba(36,28,22,.8)}

/* the gaps that carry an invitation's rhythm */
.l-lede{margin-top:.2rem}
.l-body + .l-joiner,.l-school + .l-body{margin-top:.5rem}
.l-headline + .l-joiner,.l-theme + .l-joiner{margin-top:.45rem}

/* ── Frame 3 · the cast board ────────────────────────────────────────────── */
.board{flex:1;min-height:0;display:flex;flex-direction:column;gap:clamp(.5rem,1.6vh,.9rem)}
.board__head{flex:0 0 auto}
.board__head h2{margin:0;font-family:var(--display);font-weight:400;color:var(--cream);
  font-size:min(7vw,3.4vh);line-height:1}
.board__head p{margin:.25rem 0 0;font-size:min(3.6vw,1.8vh);font-style:italic;
  color:var(--cream-dim)}
.board__reel{
  display:flex;align-items:center;gap:.6rem;margin-top:clamp(.4rem,1.4vh,.8rem);
  font-family:var(--display);font-size:.6rem;letter-spacing:.24em;color:var(--ink);
}
.board__reel .rule{flex:1;height:0;border-top:1px dotted rgba(158,43,34,.45)}
.board__reel .tally{color:var(--cream-dim);letter-spacing:.18em}

.stubs{
  flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,1fr);
  /* one fixed row height for every reel, so a short last reel doesn't stretch */
  grid-auto-rows:var(--stub-h,64px);align-content:start;
  gap:clamp(6px,1.4vh,10px);
  transition:transform 340ms var(--ease),opacity 340ms var(--ease);
}
.stubs.is-turning{opacity:0}
.stubs.is-turning-fwd{transform:translateX(-6%)}
.stubs.is-turning-back{transform:translateX(6%)}

.stub{
  position:relative;overflow:hidden;display:block;width:100%;height:100%;
  text-align:left;isolation:isolate;
  transition:transform 220ms var(--ease);
}
.stub__face{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:.1rem;padding:.4rem .5rem .4rem 13px;
  background:var(--stock);color:var(--ink-black);
  transition:filter 420ms ease;
}
.stub__face::before{                   /* the stub's own perforated edge */
  content:'';position:absolute;left:5px;top:0;bottom:0;width:2px;
  background-image:radial-gradient(circle at center,rgba(36,28,22,.42) 0 1px,transparent 1.4px);
  background-size:2px 7px;
}
.stub__name{font-family:var(--display);line-height:1.02;color:var(--ink-black);
  font-size:min(3.6vw,1.85vh);letter-spacing:.01em;
  overflow-wrap:anywhere;hyphens:auto}
.stub__role{font-size:min(2.9vw,1.45vh);font-style:italic;line-height:1.15;
  color:var(--ink);overflow-wrap:anywhere}
.stub__no{position:absolute;right:5px;bottom:3px;font-family:var(--display);
  font-size:min(2.3vw,1.15vh);letter-spacing:.12em;color:rgba(36,28,22,.34)}

.stub__stamp{
  position:absolute;left:52%;top:52%;z-index:3;white-space:nowrap;
  font-family:var(--display);letter-spacing:.13em;font-size:min(3.2vw,1.6vh);
  color:var(--ink-deep);border:1.5px solid var(--ink-deep);
  padding:.16em .36em .12em;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) rotate(-13deg) scale(1.7);
}
.stub.is-claimed{transform:rotate(-1.1deg)}
.stub.is-claimed .stub__face{filter:grayscale(.92) contrast(.9) brightness(.93)}
.stub.is-claimed .stub__name{color:var(--spent)}
.stub.is-claimed .stub__role{color:var(--spent)}
.stub.is-claimed .stub__stamp{animation:stamp 380ms cubic-bezier(.2,1.5,.4,1) both}
@keyframes stamp{
  from{opacity:0;transform:translate(-50%,-50%) rotate(-13deg) scale(1.7)}
  60%{opacity:.92;transform:translate(-50%,-50%) rotate(-13deg) scale(.94)}
  to{opacity:.92;transform:translate(-50%,-50%) rotate(-13deg) scale(1)}
}
.stub.is-tearing{animation:tear 300ms var(--ease)}
@keyframes tear{
  0%{transform:none}
  35%{transform:translate(3px,-3px) rotate(2.2deg)}
  70%{transform:translate(-2px,2px) rotate(-2deg)}
  100%{transform:rotate(-1.1deg)}
}
.stub[disabled]{cursor:default}

.reels{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:.7rem}
.reels button{
  display:flex;align-items:center;gap:.45rem;padding:.55rem .9rem;
  border:1px solid rgba(226,74,63,.5);color:var(--ink);
  font-family:var(--display);font-size:.62rem;letter-spacing:.24em;
}
.reels button:disabled{opacity:.25;cursor:default}
.reels button:not(:disabled):hover{background:rgba(226,74,63,.14)}
.reels .dots{display:flex;gap:6px}
.reels .dots i{width:6px;height:6px;border-radius:50%;background:rgba(244,237,223,.24)}
.reels .dots i.on{background:var(--ink)}

.toast{
  position:absolute;left:0;right:0;bottom:0;z-index:9;
  background:var(--ink);color:var(--stock);text-align:center;
  font-family:var(--display);font-size:.66rem;letter-spacing:.2em;
  margin:0;padding:.7rem .8rem;transform:translateY(105%);transition:transform 260ms var(--ease);
}
.toast.is-up{transform:none}

:where(button):focus-visible{outline:2px solid var(--ink);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important}
}

.actions .advance{margin-top:0}

/* ── Iris ─────────────────────────────────────────────────────────────────
   Tearing a stub closes the picture down onto it, silent-film style, and
   opens again on the ticket you now hold. */
.frame.is-iris-out{animation:iris-out 640ms cubic-bezier(.5,0,.85,.35) both}
.frame.is-iris-in {animation:iris-in  640ms cubic-bezier(.15,.72,.35,1) both}
@keyframes iris-out{
  from{clip-path:circle(var(--ir,150%) at var(--ix,50%) var(--iy,50%))}
  to  {clip-path:circle(0px             at var(--ix,50%) var(--iy,50%))}
}
@keyframes iris-in{
  from{clip-path:circle(0px             at 50% 44%)}
  to  {clip-path:circle(var(--ir,150%)  at 50% 44%)}
}

/* ── The stub you now hold ────────────────────────────────────────────────── */
.pass{
  flex:1;min-height:0;display:flex;flex-direction:column;position:relative;
  background:var(--stock);color:var(--ink-black);
  padding:clamp(.9rem,3.2vh,1.6rem) clamp(1rem,4.5vw,1.8rem);
  background-image:
    linear-gradient(103deg,rgba(255,255,255,.55),transparent 40%),
    radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.4),transparent 62%);
  box-shadow:0 10px 26px rgba(0,0,0,.7);
  rotate:-.7deg;
}
.pass::before{content:'';position:absolute;inset:6px;border:1px dashed rgba(226,74,63,.4);
  pointer-events:none}
.pass::after{                          /* torn from the board along this edge */
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:12px;
  background-image:radial-gradient(circle at center,var(--base) 0 5px,transparent 5.6px);
  background-size:13px 12px;background-repeat:repeat-x;
}
.pass__reel{position:absolute;right:clamp(.8rem,4vw,1.6rem);top:clamp(2.6rem,9vh,4rem);
  width:min(22vw,11vh);height:auto;color:var(--ink);opacity:.16}

.pass__stamp{
  align-self:flex-start;margin:clamp(1.1rem,5vh,2.2rem) 0 0;
  font-family:var(--display);letter-spacing:.16em;font-size:min(7.5vw,3.7vh);
  color:var(--ink-deep);border:2px solid var(--ink-deep);padding:.1em .3em .06em;
  rotate:-4deg;
  animation:land 460ms cubic-bezier(.2,1.5,.4,1) 420ms both;
}
@keyframes land{
  from{opacity:0;scale:1.9} 65%{opacity:.95;scale:.95} to{opacity:.95;scale:1}
}
.pass__name{
  margin:clamp(.7rem,2.4vh,1.2rem) 0 0;font-family:var(--display);font-weight:400;
  font-size:min(12.5vw,6.1vh);line-height:.96;color:var(--ink-black);
  overflow-wrap:anywhere;
}
.pass__seat{display:flex;gap:1.4rem;margin:clamp(.5rem,1.8vh,.9rem) 0 0}
.pass__seat dt{font-family:var(--display);font-size:min(2.5vw,1.25vh);letter-spacing:.22em;
  color:var(--ink)}
.pass__seat dd{margin:.08rem 0 0;font-family:var(--display);font-size:min(5vw,2.5vh);
  color:var(--ink-black)}
.pass__code{margin:auto 0 0;height:min(13vh,104px);opacity:.82}
.pass__code-no{margin:.4rem 0 auto;font-family:var(--display);
  font-size:min(2.8vw,1.4vh);letter-spacing:.42em;color:rgba(36,28,22,.5)}
.pass .band{margin-top:0}
.pass__venue{margin:clamp(.5rem,1.8vh,.9rem) 0 0;font-size:min(3.9vw,1.95vh);
  color:var(--ink-black)}
.pass__note{margin:.25rem 0 0;font-size:min(3.4vw,1.7vh);font-style:italic;
  color:rgba(36,28,22,.6)}
.pass__sign{flex:0 0 auto;margin:clamp(.6rem,2vh,1.1rem) 0 0;text-align:center;
  font-family:var(--display);letter-spacing:.2em;font-size:min(3.4vw,1.7vh);
  color:var(--cream-dim)}

/* ── House curtain ────────────────────────────────────────────────────────
   Parts once on the first open of a visit, then leaves the DOM. */
.curtain{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.curtain__panel{
  position:absolute;top:0;bottom:0;width:50.6%;background-color:#8E241C;
  /* two fold periods that don't divide into each other, so the drape reads
     irregular rather than corrugated */
  background-image:
    linear-gradient(180deg,rgba(0,0,0,.38),transparent 24%,transparent 72%,rgba(0,0,0,.45)),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.46) 0, rgba(255,255,255,.05) 13px, rgba(0,0,0,.44) 29px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.22) 0, rgba(255,255,255,.07) 23px, rgba(0,0,0,.2) 47px);
  box-shadow:inset 0 0 70px rgba(0,0,0,.5);
}
.curtain__panel--l{left:0;  animation:part-left  1.15s cubic-bezier(.65,0,.35,1) .35s both}
.curtain__panel--r{right:0; animation:part-right 1.15s cubic-bezier(.65,0,.35,1) .35s both}
/* the leading edge of each panel catches the light, the outer edge falls into shadow */
.curtain__panel--l{box-shadow:inset 22px 0 60px rgba(0,0,0,.55), inset -14px 0 26px rgba(0,0,0,.4)}
.curtain__panel--r{box-shadow:inset -22px 0 60px rgba(0,0,0,.55), inset 14px 0 26px rgba(0,0,0,.4)}
@keyframes part-left {from{transform:none} to{transform:translateX(-101%)}}
@keyframes part-right{from{transform:none} to{transform:translateX(101%)}}