/* Framefable: film studio. Charcoal, warm bone, one muted amber. Cormorant Garamond + Manrope. */
:root {
  --char: #161514;
  --char-2: #1d1b19;
  --char-3: #262320;
  --char-4: #322e2a;
  --black: #0c0b0a;
  --bone: #e9e1d3;
  --bone-2: #c9c0b2;
  --bone-3: #8f877b;
  --bone-4: #5f584f;
  --amber: #b98b4e;
  --amber-2: #d2a86f;
  --amber-wash: rgba(185, 139, 78, .12);
  --line: rgba(233, 225, 211, .12);
  --line-2: rgba(233, 225, 211, .22);
  --bad: #c27a62;
  --disp: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --ui: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, .7, .1, 1);
  --w: 1240px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--char); color: var(--bone); font-family: var(--ui); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
a { color: var(--amber-2); text-underline-offset: 3px; }
code { font-family: var(--mono); font-size: .86em; }
.wrapall { word-break: break-all; overflow-wrap: anywhere; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--bone); color: var(--char); padding: 8px 12px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--amber-2); outline-offset: 3px; }
.small { font-size: 13.5px; } .dim { color: var(--bone-3); }
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 32px; }

/* ---------------- nav ---------------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; transition: background .4s var(--ease), border-color .4s; border-bottom: 1px solid transparent; }
.nav.is-solid { background: rgba(22, 21, 20, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.nav__in { display: flex; align-items: center; gap: 30px; height: 64px; padding: 0 28px; max-width: 1480px; margin: 0 auto; }
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--bone); flex: none; }
.logo__mark { width: 30px; height: 22px; }
.logo__mark rect:first-child { fill: none; stroke: var(--bone); stroke-width: 1.4; }
.lm-gate { fill: var(--amber); opacity: .85; }
.lm-holes rect { fill: var(--bone); }
.logo__word { font-family: var(--disp); font-size: 25px; font-weight: 500; letter-spacing: .02em; }
.nav__links { display: flex; gap: 26px; margin-left: auto; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.nav__links a { color: var(--bone-2); text-decoration: none; position: relative; padding: 6px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--amber); transform: scaleX(0); transition: transform .4s var(--ease); }
.nav__links a:hover { color: var(--bone); } .nav__links a:hover::after, .nav__links a.is-cur::after { transform: scaleX(1); }
.nav__right { display: flex; align-items: center; gap: 10px; flex: none; }
.nav__x { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--bone); border: 1px solid var(--line-2); }
.nav__x svg { width: 15px; height: 15px; fill: currentColor; }
.nav__menu { display: none; width: 40px; height: 38px; background: transparent; border: 1px solid var(--line-2); position: relative; cursor: pointer; }
.nav__menu span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--bone); transition: transform .3s var(--ease); }
.nav__menu span:nth-child(1) { top: 14px; } .nav__menu span:nth-child(2) { top: 22px; }
.nav__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav__menu[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* wallet */
.wb { position: relative; }
.wb-btn { font: 700 12.5px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--char); background: var(--bone); border: 1px solid var(--bone); padding: 12px 16px; cursor: pointer; white-space: nowrap; transition: background .25s, transform .15s var(--ease); }
.wb-btn:hover { background: var(--amber-2); border-color: var(--amber-2); }
.wb-btn:active { transform: scale(.97); }
.wb-btn.is-on { background: transparent; color: var(--bone); border-color: var(--line-2); font-family: var(--mono); letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 13px; }
.wb-btn.is-on::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-right: 9px; vertical-align: 1px; box-shadow: 0 0 0 3px var(--amber-wash); }
.wb-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 300; width: 280px; max-width: calc(100vw - 24px); background: var(--char-2); border: 1px solid var(--line-2); padding: 8px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); animation: drop .25s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.wb-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 10px; background: none; border: 0; border-top: 1px solid var(--line); color: var(--bone); font: 600 14px var(--ui); text-align: left; text-decoration: none; cursor: pointer; }
.wb-item:hover { background: var(--amber-wash); }
.wb-item img { width: 18px; height: 18px; }
.wb-addr { font: 12px var(--mono); color: var(--bone-2); word-break: break-all; padding: 6px 10px; }
.wb-bal { font-family: var(--disp); font-size: 22px; color: var(--amber-2); padding: 0 10px 8px; }
.wb-note { font-size: 13px; color: var(--bone-3); padding: 8px 10px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 12.5px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; padding: 15px 22px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .3s, color .3s, border-color .3s, transform .15s var(--ease); position: relative; overflow: hidden; }
.btn:active { transform: scale(.975); }
.btn--amber { background: var(--amber); color: var(--black); border-color: var(--amber); }
.btn--amber:hover { background: var(--amber-2); border-color: var(--amber-2); }
.btn--ghost { background: rgba(12, 11, 10, .25); color: var(--bone); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--bone); }
.btn--line { background: transparent; color: var(--bone); border-color: var(--line-2); }
.btn--line:hover { border-color: var(--amber); color: var(--amber-2); }
.btn--sm { padding: 11px 14px; font-size: 11.5px; }
.btn.is-busy { opacity: .6; pointer-events: none; }
.btn .copy__b, .copy .copy__b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: translateY(100%); opacity: 0; transition: transform .35s var(--ease), opacity .35s; }
.btn .copy__a, .copy .copy__a { display: block; transition: transform .35s var(--ease), opacity .35s; }
.is-done .copy__a { transform: translateY(-100%); opacity: 0; }
.is-done .copy__b { transform: none; opacity: 1; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.row--sm { margin-top: 14px; }

/* ---------------- hero ---------------- */
.hero { background: var(--black); padding-top: 64px; }
.hero__screen { position: relative; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 54px; padding: 0 28px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-3); background: var(--black); }
.bar__mid { color: var(--bone-4); }
.bar--bottom { height: 58px; }
.bar__cap { font-family: var(--disp); font-style: italic; font-size: 17px; letter-spacing: .02em; text-transform: none; font-weight: 400; color: var(--bone-2); transition: opacity .6s; }
.tc { display: flex; align-items: baseline; gap: 10px; }
.tc__k { color: var(--bone-4); }
.tc b { font-family: var(--mono); font-size: 14px; letter-spacing: .08em; color: var(--amber-2); font-weight: 500; min-width: 15ch; text-align: right; }
.hero__frame { position: relative; width: 100%; aspect-ratio: 2.39 / 1; min-height: 440px; max-height: calc(100vh - 64px - 112px); overflow: hidden; background: #0f0e0d; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__lines i { position: absolute; width: 18px; height: 18px; border-color: rgba(233, 225, 211, .35); border-style: solid; border-width: 0; }
.hero__lines i:nth-child(1) { top: 18px; left: 18px; border-top-width: 1px; border-left-width: 1px; }
.hero__lines i:nth-child(2) { top: 18px; right: 18px; border-top-width: 1px; border-right-width: 1px; }
.hero__lines i:nth-child(3) { bottom: 18px; left: 18px; border-bottom-width: 1px; border-left-width: 1px; }
.hero__lines i:nth-child(4) { bottom: 18px; right: 18px; border-bottom-width: 1px; border-right-width: 1px; }
.hero__copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 6vw 5.5vh; max-width: 980px; }
.hero__copy::before { content: ""; position: absolute; left: 0; right: -40vw; bottom: 0; height: 160%; background: linear-gradient(0deg, rgba(12, 11, 10, .78), rgba(12, 11, 10, 0)); z-index: -1; pointer-events: none; }
.eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--amber-2); margin: 0 0 14px; }
.hero__title { font-family: var(--disp); font-weight: 500; font-size: clamp(40px, 5.6vw, 84px); line-height: .98; letter-spacing: -.01em; margin: 0 0 18px; max-width: 15ch; }
.hero__sub { font-size: 17px; line-height: 1.6; color: var(--bone-2); max-width: 54ch; margin: 0 0 24px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.ca { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 6px 6px 6px 12px; border: 1px solid var(--line-2); background: rgba(12, 11, 10, .5); max-width: 100%; }
.ca__k { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; color: var(--amber-2); }
.ca code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--bone-2); }
.copy { position: relative; overflow: hidden; background: var(--bone); color: var(--char); border: 0; font: 700 11px var(--ui); letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; cursor: pointer; min-width: 74px; }

/* ---------------- sections ---------------- */
.sec { position: relative; padding: 130px 0; }
.scene { background: var(--char); }
.scene:nth-of-type(odd) { background: var(--char-2); }
.lb { position: absolute; left: 0; right: 0; height: 46px; background: var(--black); transform-origin: top; transform: scaleY(0); transition: transform 1.1s var(--ease); }
.lb--top { top: 0; } .lb--bot { bottom: 0; transform-origin: bottom; }
.scene.is-on .lb { transform: none; }
.slate { display: flex; align-items: center; gap: 18px; font-size: 11.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--bone-3); margin-bottom: 34px; }
.slate__n { color: var(--amber-2); flex: none; }
.slate__rule { flex: 1; height: 1px; background: var(--line-2); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease) .2s; min-width: 30px; }
.slate.is-in .slate__rule { transform: none; }
.slate__loc { flex: none; color: var(--bone-3); }
.h2 { font-family: var(--disp); font-weight: 500; font-size: clamp(36px, 4.4vw, 62px); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 20px; text-wrap: balance; }
.lead { font-size: 17.5px; color: var(--bone-2); max-width: 62ch; margin: 0; }
.scene__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 50px; align-items: end; margin-bottom: 54px; }
.scene__head > * { min-width: 0; }

/* programme */
.programme { background: var(--char); padding-top: 120px; }
.prog .h2 { max-width: 22ch; font-size: clamp(34px, 4.2vw, 58px); font-style: italic; font-weight: 400; }
.prog__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 60px; border-top: 1px solid var(--line-2); }
.pcol { padding: 28px 30px 0 0; min-width: 0; }
.pcol + .pcol { padding-left: 30px; border-left: 1px solid var(--line); }
.pcol__n { font-family: var(--disp); font-size: 46px; color: var(--amber); line-height: 1; }
.pcol h3 { font-family: var(--disp); font-size: 28px; font-weight: 500; margin: 12px 0 8px; }
.pcol p { color: var(--bone-2); margin: 0; }

/* forms */
.fld { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; min-width: 0; }
.fld label { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-3); }
.fld output { font-family: var(--disp); font-size: 17px; font-style: italic; letter-spacing: 0; text-transform: none; color: var(--amber-2); font-weight: 500; }
.opt { letter-spacing: .04em; text-transform: none; font-weight: 500; color: var(--bone-4); }
.fld2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
input[type="text"], textarea, select { width: 100%; min-width: 0; font: 15px var(--ui); color: var(--bone); background: var(--char); border: 1px solid var(--line-2); padding: 12px 13px; border-radius: 0; transition: border-color .25s, box-shadow .25s; }
textarea { resize: vertical; line-height: 1.5; }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--bone-2) 50%), linear-gradient(135deg, var(--bone-2) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-wash); }
input[type="range"] { width: 100%; accent-color: var(--amber); }
.scene:nth-of-type(odd) input[type="text"], .scene:nth-of-type(odd) textarea, .scene:nth-of-type(odd) select { background: var(--char); }

/* casting */
.cast { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 46px; align-items: start; }
.cast > * { min-width: 0; }
.cast__form { border-top: 1px solid var(--line-2); padding-top: 24px; }
.card { background: linear-gradient(180deg, var(--char-3), var(--char-2)); border: 1px solid var(--line-2); padding: 26px; position: relative; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.card::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line); pointer-events: none; }
.card__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.card__portrait { width: 100%; height: auto; aspect-ratio: 4 / 5; display: block; background: var(--black); border: 1px solid var(--line); }
.card__id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.card__k { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-4); margin-top: 10px; }
.card__id b { font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--amber-2); letter-spacing: .04em; }
.card__id code { font-size: 11.5px; color: var(--bone-3); line-height: 1.5; }
.swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.swatches span { aspect-ratio: 1; border: 1px solid var(--line); transform: scale(.6); opacity: 0; transition: transform .6s var(--ease), opacity .6s; }
.swatches.is-in span { transform: none; opacity: 1; }
.card__name { font-family: var(--disp); font-size: 44px; font-weight: 500; line-height: 1; margin: 24px 0 6px; }
.card__log { font-family: var(--disp); font-style: italic; font-size: 20px; color: var(--bone-2); margin: 0 0 16px; }
.card__dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; margin: 0; }
.card__dl > div { border-top: 1px solid var(--line); padding: 11px 0; min-width: 0; animation: fadeUp .6s var(--ease) both; }
.card__dl dt { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-4); }
.card__dl dd { margin: 3px 0 0; font-size: 14.5px; color: var(--bone); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }

/* board */
.boardctl { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, 1fr)) auto; gap: 16px; align-items: end; padding: 22px 0 6px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.boardctl .btn { margin-bottom: 18px; }
.strip { display: flex; gap: 0; overflow-x: auto; margin: 34px 0; padding: 22px 0; background: var(--black); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scroll-snap-type: x proximity; position: relative; scrollbar-width: thin; scrollbar-color: var(--char-4) var(--black); }
.frame { flex: none; width: 300px; padding: 0 14px; position: relative; scroll-snap-align: start; animation: fadeUp .7s var(--ease) both; }
.frame::before, .frame::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background-image: linear-gradient(90deg, transparent 0 10px, #2d2a26 10px 24px, transparent 24px 34px); background-size: 34px 10px; }
.frame::before { top: -18px; } .frame::after { bottom: -18px; }
.frame canvas { display: block; width: 100%; height: auto; aspect-ratio: 2.39 / 1; background: #121110; border: 1px solid #2d2a26; }
.frame__cap { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); }
.frame__cap b { color: var(--amber-2); }
.frame__txt { font-family: var(--disp); font-style: italic; font-size: 16px; color: var(--bone-2); margin: 4px 0 0; line-height: 1.3; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; font-feature-settings: "tnum"; }
.tbl caption { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-3); padding-bottom: 12px; }
.tbl th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-4); border-bottom: 1px solid var(--line-2); padding: 9px 12px 9px 0; }
.tbl td { border-bottom: 1px solid var(--line); padding: 11px 12px 11px 0; vertical-align: top; color: var(--bone-2); }
.tbl td:first-child { font-family: var(--mono); color: var(--amber-2); }
.tbl td.tc-cell { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.tbl td:last-child { color: var(--bone); }
.tbl tbody tr { animation: fadeUp .5s var(--ease) both; }
.shots { overflow-x: auto; }

/* reel (pinned) */
.reel { background: var(--black); position: relative; }
.reel__track { height: 320vh; }
.reel__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 30px; }
.reel__beam { position: absolute; left: 50%; top: -10%; width: 140vw; height: 120%; transform: translateX(-50%); background: radial-gradient(ellipse 40% 55% at 50% 58%, rgba(210, 168, 111, .10), transparent 70%); pointer-events: none; }
.reel__head { position: relative; width: 100%; }
.reel__head .h2 { margin-bottom: 18px; }
.reel__steps { list-style: none; padding: 0; margin: 0; display: flex; gap: 0; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.reel__steps li { padding: 10px 22px 10px 0; color: var(--bone-4); position: relative; transition: color .5s; }
.reel__steps li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.reel__steps li.is-on { color: var(--amber-2); }
.reel__film { position: relative; padding: 26px 0; background: #11100f; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.reel__film::before, .reel__film::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background-image: linear-gradient(90deg, transparent 0 12px, #2a2724 12px 30px, transparent 30px 42px); background-size: 42px 12px; }
.reel__film::before { top: 7px; } .reel__film::after { bottom: 7px; }
.reel__strip { display: flex; gap: 18px; will-change: transform; padding-left: 8vw; }
.reel__strip canvas { flex: none; width: min(38vw, 520px); height: auto; aspect-ratio: 2.39 / 1; border: 1px solid #2d2a26; background: #121110; filter: sepia(.15); }
.reel__cap { font-family: var(--disp); font-style: italic; font-size: 19px; color: var(--bone-2); margin: 0 auto; width: 100%; }

/* licence */
.lic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: start; }
.lic > * { min-width: 0; }
.q { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.q legend { float: left; padding: 0; font-family: var(--disp); font-size: 21px; line-height: 1.25; max-width: 30ch; }
.tog { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-2); flex: none; margin-left: auto; }
.tog button { position: relative; z-index: 1; background: none; border: 0; color: var(--bone-3); font: 700 11px var(--ui); letter-spacing: .16em; text-transform: uppercase; padding: 10px 16px; cursor: pointer; transition: color .3s; }
.tog button.is-on { color: var(--black); }
.tog i { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: var(--bone); transition: transform .45s var(--ease); }
.tog[data-v="0"] i { transform: translateX(100%); }
.licout { position: sticky; top: 90px; border: 1px solid var(--line-2); padding: 28px; background: var(--char); }
.licout__badge { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--line-2); padding-bottom: 16px; }
.licout__k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-4); }
.licout__badge b { font-family: var(--disp); font-size: 46px; font-weight: 500; line-height: 1; color: var(--bone); transition: opacity .3s; }
.licout__rider { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-2); border: 1px solid var(--amber); padding: 4px 8px; }
.licout__sum { font-family: var(--disp); font-size: 21px; line-height: 1.4; margin: 18px 0; color: var(--bone); }
.licout__list { list-style: none; padding: 0; margin: 0 0 18px; }
.licout__list li { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--bone-2); animation: fadeUp .4s var(--ease) both; }
.licout__list li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border: 1px solid var(--bone-3); }
.licout__list li.yes::before { background: var(--amber); border-color: var(--amber); }
.licout__att { border-top: 1px solid var(--line); padding: 12px 0; }
.licout__att code { display: block; margin-top: 4px; color: var(--bone-2); font-size: 12.5px; }

/* prompts */
.pctl { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line-2); }
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line-2); }
.seg button { position: relative; z-index: 1; background: none; border: 0; color: var(--bone-3); font: 700 11px var(--ui); letter-spacing: .14em; text-transform: uppercase; padding: 11px 14px; cursor: pointer; white-space: nowrap; transition: color .3s; }
.seg button.is-on { color: var(--black); }
.seg__ind { position: absolute; top: 0; bottom: 0; left: 0; background: var(--bone); transition: transform .45s var(--ease), width .45s var(--ease); }
.pstats { display: flex; gap: 22px; font-size: 13px; color: var(--bone-3); margin-left: auto; }
.pstats b { font-family: var(--disp); font-size: 24px; font-weight: 500; color: var(--bone); margin-right: 5px; }
.plist { list-style: none; padding: 0; margin: 0; counter-reset: p; }
.plist li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 22px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: start; animation: fadeUp .5s var(--ease) both; }
.plist__n { font-family: var(--disp); font-size: 34px; color: var(--amber); line-height: 1; }
.plist__n small { display: block; font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--bone-4); margin-top: 6px; }
.plist__p { font-size: 14.5px; line-height: 1.6; color: var(--bone); margin: 0; }
.plist__neg { font-size: 12.5px; color: var(--bone-4); margin: 6px 0 0; }

/* registry */
.scene--reg { background: var(--char-2); }
.reg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.reg > * { min-width: 0; }
.panel { border: 1px solid var(--line-2); background: var(--char); padding: 24px; display: flex; flex-direction: column; }
.panel--wide { grid-column: 1 / -1; }
.panel__h { display: flex; align-items: baseline; gap: 12px; font-family: var(--disp); font-size: 26px; font-weight: 500; margin: 0 0 16px; line-height: 1.1; }
.panel__h span { font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--amber-2); border: 1px solid var(--amber); padding: 3px 7px; }
.panel__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.panel__top .panel__h { margin: 0; }
.kv { margin: 0; font-size: 14px; }
.kv > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.kv dt, .kv .k { color: var(--bone-4); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding-top: 2px; }
.kv dd { margin: 0; min-width: 0; color: var(--bone); }
.kv--out { margin-top: 14px; }
.kv--out > div > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.ok { color: var(--amber-2); font-weight: 700; } .bad { color: var(--bad); font-weight: 700; }
.msg { font-size: 13.5px; color: var(--bone-3); margin: 12px 0 0; min-height: 1.2em; }
.msg.is-err { color: var(--bad); }
.note { display: block; font-size: 12.5px; color: var(--bone-2); background: var(--black); border: 1px solid var(--line); padding: 12px; margin: 12px 0 0; white-space: pre-wrap; }
.txbox { margin-top: 12px; border: 1px solid var(--line-2); padding: 12px; font-size: 13.5px; }
.txbox a { word-break: break-all; }
.addr { display: flex; gap: 8px; flex: 1 1 420px; max-width: 640px; min-width: 0; }
.addr input { font-family: var(--mono); font-size: 13px; }
.castlist { margin-top: 10px; }
.crow { display: grid; grid-template-columns: 170px 150px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); font-size: 14px; animation: fadeUp .5s var(--ease) both; }
.crow__t { color: var(--bone-3); font-size: 12.5px; }
.crow__id { font-family: var(--mono); color: var(--amber-2); }
.crow__h { font-family: var(--mono); font-size: 12px; color: var(--bone-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cempty { padding: 14px 0; border-top: 1px solid var(--line); color: var(--bone-3); font-size: 14px; }
.shim { display: block; height: 14px; background: linear-gradient(90deg, var(--char-3) 0%, var(--char-4) 40%, var(--char-3) 80%); background-size: 300% 100%; animation: shim 1.4s linear infinite; }
@keyframes shim { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* call sheet */
.callsheet { background: var(--char); }
.calls { list-style: none; padding: 0; margin: 50px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.call { padding: 24px 24px 0 0; min-width: 0; position: relative; }
.call + .call { padding-left: 24px; border-left: 1px solid var(--line); }
.call__t { font-family: var(--mono); font-size: 13px; color: var(--amber-2); }
.call h3 { font-family: var(--disp); font-size: 32px; font-weight: 500; margin: 8px 0; }
.call p { color: var(--bone-2); margin: 0; font-size: 15px; }

/* real + faq */
.real { background: var(--char-2); }
.real__grid, .faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; align-items: start; }
.real__grid > *, .faq__grid > * { min-width: 0; }
.real__list { list-style: none; padding: 0; margin: 0; }
.real__list li { padding: 18px 0; border-top: 1px solid var(--line); color: var(--bone-2); font-size: 16px; }
.real__list b { color: var(--bone); }
.faq { background: var(--char); }
.faq__list details { border-top: 1px solid var(--line); }
.faq__list details:last-child { border-bottom: 1px solid var(--line); }
.faq__list summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-family: var(--disp); font-size: 23px; line-height: 1.25; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 1px; background: var(--amber); }
.faq__list summary::before { content: ""; position: absolute; right: 14.5px; top: 50%; margin-top: -6.5px; width: 1px; height: 14px; background: var(--amber); transition: transform .35s var(--ease); }
.faq__list details[open] summary::before { transform: rotate(90deg) scaleY(0); }
.faq__list details p { color: var(--bone-2); margin: 0 0 20px; padding-right: 40px; animation: fadeUp .4s var(--ease); }

/* credits */
.credits { background: var(--black); padding: 0 0 46px; border-top: 1px solid var(--line); }
.credits__window { height: 420px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.credits__roll { text-align: center; padding: 420px 16px 60px; will-change: transform; }
.credits__h { font-family: var(--disp); font-size: 56px; font-weight: 500; margin: 0 0 36px; }
.credits__roll dl { margin: 0; }
.credits__roll dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; margin-bottom: 18px; }
.credits__roll dt { text-align: right; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-4); padding-top: 6px; }
.credits__roll dd { text-align: left; margin: 0; font-family: var(--disp); font-size: 22px; color: var(--bone); }
.credits__end { font-family: var(--disp); font-style: italic; font-size: 20px; color: var(--bone-3); margin-top: 46px; }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; border-top: 1px solid var(--line); padding-top: 28px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.foot__links a, .foot__links button { color: var(--bone-3); text-decoration: none; }
.foot__links a:hover, .foot__links button:hover { color: var(--amber-2); }
.foot__note { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--bone-4); }

/* review sheet */
.sheet { position: fixed; inset: 0; z-index: 400; background: rgba(8, 7, 6, .72); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .3s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.sheet__card { width: 100%; max-width: 540px; max-height: calc(100vh - 32px); overflow: auto; background: var(--char-2); border: 1px solid var(--line-2); padding: 30px; animation: fadeUp .4s var(--ease); }
.sheet__card h3 { font-family: var(--disp); font-size: 34px; font-weight: 500; margin: 0 0 16px; }

/* ---------------- motion ---------------- */
.split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.split .wi { display: inline-block; transform: translateY(110%); opacity: 0; transition: transform 1.1s var(--ease), opacity 1.1s var(--ease); transition-delay: calc(var(--i) * 85ms + 300ms); }
.is-ready .split .wi { transform: none; opacity: 1; }
.load { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.load[data-d="0"] { transition-delay: .15s; } .load[data-d="1"] { transition-delay: 1.05s; } .load[data-d="2"] { transition-delay: 1.3s; } .load[data-d="3"] { transition-delay: 1.5s; }
.is-ready .load { opacity: 1; transform: none; }
.hero__canvas { opacity: 0; transition: opacity 2.2s ease; }
.is-ready .hero__canvas { opacity: 1; }
.rv { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .split .wi, .load, .rv, .hero__canvas { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lb, .slate__rule { transform: none !important; transition: none !important; }
  .reel__track { height: auto; } .reel__stage { position: relative; height: auto; padding: 100px 0; }
  .credits__roll { padding-top: 40px; transform: none !important; } .credits__window { height: auto; -webkit-mask-image: none; mask-image: none; }
  .shim { animation: none; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 1100px) {
  .nav__links { gap: 18px; font-size: 12px; }
  .boardctl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .boardctl .fld--grow { grid-column: 1 / -1; }
  .reg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .nav { background: rgba(22, 21, 20, .94); border-bottom-color: var(--line); }
  .nav__in { padding: 0 16px; gap: 12px; height: 60px; }
  .nav__menu { display: block; }
  .nav__right { margin-left: auto; }
  .nav__links { position: fixed; top: 60px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--char-2); border-bottom: 1px solid var(--line-2); padding: 6px 16px 16px; margin: 0; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .25s, transform .3s var(--ease); }
  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
  .hero { padding-top: 60px; }
  .wrap { padding: 0 16px; }
  .bar { padding: 0 16px; height: 42px; font-size: 9.5px; letter-spacing: .16em; }
  .bar__mid { display: none; }
  .hero__frame { aspect-ratio: auto; height: 74vh; min-height: 520px; max-height: none; }
  .hero__copy { padding: 0 16px 26px; }
  .hero__title { font-size: 44px; }
  .hero__sub { font-size: 15.5px; }
  .scene__head, .cast, .lic, .real__grid, .faq__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .prog__cols, .calls { grid-template-columns: minmax(0, 1fr); }
  .pcol, .pcol + .pcol, .call, .call + .call { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .licout { position: relative; top: 0; }
  .reg { grid-template-columns: minmax(0, 1fr); }
  .sec { padding: 96px 0; }
  .lb { height: 30px; }
  .reel__strip canvas { width: 72vw; }
  .reel__track { height: 260vh; }
}
@media (max-width: 640px) {
  .logo__word { font-size: 21px; }
  .logo__mark { width: 26px; }
  .wb-btn { padding: 10px 11px; font-size: 11px; letter-spacing: .08em; }
  .wb-btn.is-on { font-size: 12px; }
  .h2 { font-size: 36px; }
  .hero__title { font-size: 38px; }
  .bar--top span:first-child { display: none; }
  .bar__cap { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .tc__k { display: none; }
  .tc b { min-width: 0; font-size: 12.5px; }
  .fld2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .card { padding: 18px; }
  .card__top { grid-template-columns: minmax(0, 1fr); }
  .card__portrait { max-width: 280px; }
  .card__dl { grid-template-columns: minmax(0, 1fr); }
  .card__name { font-size: 36px; }
  .boardctl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .boardctl .btn { grid-column: 1 / -1; }
  .frame { width: 240px; }
  .q { flex-direction: column; align-items: flex-start; }
  .q legend { font-size: 19px; }
  .tog { margin-left: 0; }
  .licout { padding: 20px; }
  .licout__badge b { font-size: 36px; }
  .seg { grid-auto-flow: row; grid-template-columns: 1fr 1fr; width: 100%; }
  .seg__ind { display: none; }
  .seg button.is-on { background: var(--bone); }
  .pstats { margin-left: 0; gap: 16px; flex-wrap: wrap; }
  .plist li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .crow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .addr { flex-basis: 100%; }
  .credits__roll dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .credits__roll dt, .credits__roll dd { text-align: center; }
  .slate { gap: 10px; font-size: 10px; letter-spacing: .16em; }
  .slate__loc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
  .tbl { font-size: 13px; }
  .shots .tbl th:nth-child(3), .shots .tbl td:nth-child(3), .shots .tbl th:nth-child(7), .shots .tbl td:nth-child(7) { display: none; }
}
.card__dl dd { overflow-wrap: anywhere; }
.hero__screen { display: flex; flex-direction: column; min-height: calc(100vh - 64px); }
.hero__screen .bar { flex: 1 0 54px; }
.hero__frame { flex: none; }
@media (max-width: 900px) { .hero__screen { min-height: calc(100vh - 60px); } .hero__screen .bar { flex: 1 0 42px; } }
@media (max-width: 900px) { .hero__copy::before { height: 125%; background: linear-gradient(0deg, rgba(12, 11, 10, .9) 30%, rgba(12, 11, 10, 0)); } }