/* components.css — ticket-stub buttons, poster frames, modal, drift layer, credits */
.stub-btn{--c:var(--amber-hi);position:relative;display:inline-flex;align-items:center;height:48px;padding:0 28px 0 30px;cursor:pointer;border:0;background:var(--c);color:var(--ink);
  font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:.12em;transition:transform .35s var(--ease),filter .2s;
  -webkit-mask:radial-gradient(circle at 0 50%,transparent 8px,#000 8.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 8px,#000 8.5px) right/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 50%,transparent 8px,#000 8.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 8px,#000 8.5px) right/51% 100% no-repeat}
.stub-btn span{border-left:1.5px dashed rgba(28,24,20,.35);padding-left:16px;line-height:24px}
.stub-btn:hover{transform:translateY(-2px) rotate(-1deg);filter:brightness(1.06)}
.stub-btn.ghost{--c:rgba(242,235,221,.12);color:var(--paper)}
.stub-btn.ghost span{border-left-color:rgba(242,235,221,.35)}
.stub-btn.sm{height:34px;font-size:12px;padding:0 18px 0 20px}
.stub-btn.sm span{padding-left:10px}
.stub-btn.ink{--c:var(--ink);color:var(--paper)}
.stub-btn.ink span{border-left-color:rgba(242,235,221,.35)}
/* poster frame */
.pf{position:relative;background:var(--paper-3)}
/* drift background */
.drift{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.drift .d{position:absolute;top:0;left:0;will-change:transform;border-radius:3px;overflow:hidden;box-shadow:0 20px 40px -20px rgba(28,24,20,.6);
  filter:sepia(.55) saturate(.7) blur(var(--b,0px));opacity:var(--o,.12)}
.drift .d img{width:100%;height:100%;object-fit:cover}
/* modal */
.modal-back{position:fixed;inset:0;background:rgba(20,16,12,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:400;opacity:0;pointer-events:none;transition:opacity .4s}
.modal-back.open{opacity:1;pointer-events:auto}
.modal{position:fixed;left:50%;top:50%;z-index:401;width:min(860px,94vw);max-height:92vh;display:grid;grid-template-columns:260px 1fr 70px;background:var(--paper);color:var(--ink);
  border-radius:8px;overflow:hidden;box-shadow:0 60px 120px -30px rgba(0,0,0,.7);transform:translate(-50%,-44%) rotate(-1.5deg);opacity:0;pointer-events:none;transition:transform .6s var(--ease),opacity .3s}
.modal.open{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
.modal-x{position:absolute;right:82px;top:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:20px;line-height:1;z-index:2}
.modal-poster .pf{height:100%;min-height:390px}
.modal-poster .pf img{width:100%;height:100%;object-fit:cover}
.modal-body{padding:34px 34px 30px;overflow:auto}
.m-title{font-weight:900;font-size:clamp(28px,3.4vw,42px);line-height:1.1;margin-top:10px}
.m-orig{font-family:var(--display);font-style:italic;color:var(--muted);font-size:18px;margin-top:4px}
.m-meta{font-size:14px;color:var(--ink-3);margin-top:14px}
.m-stars{margin-top:14px;color:var(--amber);font-size:22px;letter-spacing:4px}
.m-stars small{font-family:var(--sans);font-size:12px;letter-spacing:0;color:var(--muted);margin-left:8px}
.m-comment{margin:18px 0 24px;font-style:italic;font-size:17px;border-left:3px solid var(--amber);padding:4px 0 4px 16px;color:var(--ink-2)}
.m-comment:empty{display:none}
.modal-stub{background:var(--ink);color:var(--paper);writing-mode:vertical-rl;display:flex;align-items:center;justify-content:space-between;padding:22px 0;font-family:var(--mono);font-size:11px;letter-spacing:.3em;
  border-left:2px dashed rgba(242,235,221,.4);position:relative;gap:18px;white-space:nowrap}
.modal-stub b{color:var(--amber-hi);font-weight:400}
@media(max-width:700px){.modal{grid-template-columns:1fr;overflow:auto}.modal-poster .pf{min-height:0;aspect-ratio:2/3;max-height:46vh;width:auto;margin:0 auto}.modal-stub{writing-mode:horizontal-tb;padding:12px 18px}.modal-x{right:12px}}
/* credits */
.credits{background:var(--ink);color:var(--paper);text-align:center;padding:22vh 24px 10vh;position:relative;overflow:hidden}
.credits .lb{height:7vh}
.the-end{font-weight:900;font-size:clamp(50px,9vw,120px);letter-spacing:.3em}
.the-end em{display:block;font-family:var(--display);font-size:.28em;letter-spacing:.6em;color:var(--amber-hi);font-weight:400;margin-top:10px}
.roll{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;max-width:520px;margin:60px auto 50px;font-size:15px}
.roll dt{text-align:right;color:#9d907a;font-family:var(--mono);font-size:12px;letter-spacing:.2em;padding-top:3px}
.roll dd{text-align:left}
.fine{font-size:12px;color:#8d8170}
.fine a{color:var(--amber-hi)}
/* modal without poster: typographic layout */
.modal.no-poster{grid-template-columns:1fr 70px;width:min(680px,94vw)}
.modal.no-poster .modal-poster{display:none}
.modal.no-poster .modal-body{min-height:400px;padding:56px 46px 40px;position:relative;overflow:hidden;border-top:6px double var(--ink)}
.m-year{display:none}
.modal.no-poster .m-year{display:block;position:absolute;right:20px;bottom:-18px;font-family:var(--display);font-size:150px;line-height:1;color:rgba(194,122,18,.12);pointer-events:none}
.modal.no-poster .m-title{font-size:clamp(34px,4.6vw,52px)}
@media(max-width:700px){.modal.no-poster{grid-template-columns:1fr}.modal.no-poster .modal-body{padding:44px 24px 28px}}