/* =========================================================
   Outskrts Media — The Screening
   Poster language: charcoal paper panel, notched frame,
   condensed heavy display + wide micro-grotesk + camera mono.
   ========================================================= */

:root{
  --bg:#050505;
  --panel:#303030;
  --panel-deep:#1f1f1e;
  --ink:#eeebe4;
  --ink-dim:#b4afa5;
  --ink-faint:#7d796f;
  --rec:#d0543c;
  --line:rgba(238,235,228,.38);
  --line-soft:rgba(238,235,228,.14);
  --sans:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --gutter:clamp(16px, 3vw, 48px);
  --ease:cubic-bezier(.2,.7,.2,1);

  /* paper: embossed fibres (lit noise) + fine tooth + soft mottling */
  --paper-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.5 1' numOctaves='2' seed='12' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='1.8' intercept='-.633'/><feFuncG type='linear' slope='1.8' intercept='-.633'/><feFuncB type='linear' slope='1.8' intercept='-.633'/><feFuncA type='linear' slope='0' intercept='1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --paper-tooth:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* notched frame — measured from the reference poster.
     x is % of frame width; tab depths are in cqw (poster width) so the
     notches keep their shape however tall the frame grows. */
  --notch:polygon(
    0% 0%, 4.7% 4.5cqw, 10.2% 4.5cqw, 12.3% 2.6cqw, 18.4% 2.6cqw, 21.4% 5.7cqw,
    78.6% 5.7cqw, 81.6% 2.6cqw, 87.7% 2.6cqw, 89.8% 4.5cqw, 95.3% 4.5cqw, 100% 0%,
    100% calc(100% - 1.2cqw), 96% calc(100% - 3.35cqw), 89% calc(100% - 3.35cqw), 87.2% calc(100% - 1.2cqw),
    79.8% calc(100% - 1.2cqw), 77.6% calc(100% - 3.35cqw), 53.4% calc(100% - 3.35cqw), 50% 100%,
    46.6% calc(100% - 3.35cqw), 22.4% calc(100% - 3.35cqw), 20.2% calc(100% - 1.2cqw),
    12.8% calc(100% - 1.2cqw), 11% calc(100% - 3.35cqw), 4% calc(100% - 3.35cqw), 0% calc(100% - 1.2cqw)
  );
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-stretch:125%;
  -webkit-font-smoothing:antialiased;
  padding:var(--gutter) var(--gutter) 0;
  overflow-x:hidden;
}
img,svg{display:block;}
button,input,textarea{font:inherit;color:inherit;}
[hidden]{display:none !important;}
::selection{background:var(--ink);color:var(--panel);}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px;}

.micro{
  font-size:clamp(8px, .95cqw, 11px);
  font-weight:500;
  letter-spacing:.14em;
  line-height:1.15;
  text-transform:uppercase;
  color:var(--ink);
}
.display{
  font-family:var(--sans);
  font-weight:800;
  font-stretch:62%;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.92;
  color:var(--ink);
}
.mono{
  font-family:var(--mono);
  font-size:clamp(8px, .9cqw, 11.5px);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.rec-dot{
  display:inline-block; width:.62em; height:.62em; border-radius:50%;
  background:var(--rec); flex:0 0 auto;
  animation:rec 1.6s steps(1, end) infinite;
}
.ticker .rec-dot{width:clamp(9px, 1.15cqw, 14px); height:clamp(9px, 1.15cqw, 14px);}
@keyframes rec{0%{opacity:1;}50%{opacity:.25;}}

/* paper — matched to the reference poster: neutral #303030 sheet,
   very fine low-contrast grain with a slight horizontal fibre. */
.paper{position:absolute; inset:0; pointer-events:none; overflow:hidden;}
.paper::before{
  content:""; position:absolute; inset:0;
  background-image:var(--paper-grain);
  background-size:300px 300px;
  mix-blend-mode:overlay;
  opacity:.34;
}

/* =========================================================
   POSTER
   ========================================================= */
.poster{
  --screen:calc(100vh - 2 * var(--gutter));
  position:relative;
  width:min(1400px, 100%, calc(var(--screen) * 1.2));
  min-height:var(--screen);
  display:flex; flex-direction:column;
  margin:0 auto;
  background:var(--panel);
  container-type:inline-size;
  isolation:isolate;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9);
}
@supports (height:100svh){ .poster{--screen:calc(100svh - 2 * var(--gutter));} }

/* ---- header ---- */
.p-head{position:relative; z-index:3; padding:2.1cqw 2.6cqw 0;}
.ticker{
  display:flex; align-items:center; justify-content:space-between;
  gap:1cqw;
}
.cam{width:clamp(24px,4.2cqw,50px); height:auto; aspect-ratio:40/26; color:var(--ink);}
.cam.flip{transform:scaleX(-1);}
.title-row{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 21%;
  margin-top:.6cqw;
}
.title-row .yr:first-child{justify-self:start;}
.title-row .yr:last-child{justify-self:end;}
.logo{line-height:0;}
.logo img{
  height:clamp(34px, 5.4cqw, 66px); width:auto;
  margin-bottom:-1.2cqw; /* settles into the centre tab */
}

/* ---- notched media frame ---- */
.media{
  position:relative; z-index:2;
  width:100%;
  flex:1 1 auto;
  min-height:42cqw;
  margin-top:.2cqw;
  touch-action:pan-y;
}
.media-clip{
  position:absolute; inset:0;
  clip-path:var(--notch);
  background:#0c0c0b;
  overflow:hidden;
  overflow:clip; /* hidden still allows focus to scroll it sideways */
}

/* carousel track */
.track{
  position:absolute; inset:0;
  display:flex;
  transition:transform 1s var(--ease);
}
.slide{position:relative; flex:0 0 100%; height:100%; overflow:hidden;}

.scene{position:absolute; inset:0; width:100%; height:100%; transition:filter .8s ease;}
.scene-tint{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 52%, rgba(10,10,9,.34), rgba(10,10,9,0) 70%);
  transition:opacity .6s ease;
}

/* player sits in the frame's safe band so the notches never crop the video */
.player{
  position:absolute; left:0; right:0; top:5.7cqw; bottom:3.35cqw; z-index:3;
  background:#000;
}
.player video,.player iframe{width:100%; height:100%; border:0; display:block; object-fit:contain; background:#000;}
.player:focus{outline:none;}
.player.idle{cursor:none;}
.player video{cursor:pointer;}

/* themed video controls */
.vc{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:clamp(8px, 1.2cqw, 16px);
  padding:clamp(18px, 3cqw, 40px) clamp(10px, 1.6cqw, 22px) clamp(8px, 1.1cqw, 14px);
  background:linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,0));
  color:#fff;
  transition:opacity .35s ease;
}
.player.idle .vc{opacity:0; pointer-events:none;}
.vc-btn{
  flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center;
  background:none; border:0; color:#fff; cursor:pointer; opacity:.85; transition:opacity .2s;
}
.vc-btn:hover,.vc-btn:focus-visible{opacity:1;}
.vc-btn svg{width:20px; height:20px;}
.vc-play .i-play,.player.is-paused .vc-play .i-pause{display:none;}
.player.is-paused .vc-play .i-play{display:block;}
.vc-mute .i-muted,.player.is-muted .vc-mute .i-vol{display:none;}
.player.is-muted .vc-mute .i-muted{display:block;}
.vc-fs .i-fs-exit{display:none;}
.vc-close{margin-left:clamp(0px, .6cqw, 8px); border-left:1px solid rgba(255,255,255,.25); padding-left:10px; width:42px;}
.vc-time{flex:0 0 auto; color:rgba(255,255,255,.85); font-size:11px; letter-spacing:.04em;}
.vc-time i{font-style:normal; opacity:.5; margin:0 .45em;}

.vc-range{
  --p:0%;
  -webkit-appearance:none; appearance:none;
  height:18px; background:transparent; cursor:pointer; margin:0;
}
.vc-scrub{flex:1 1 auto; min-width:60px;}
.vc-vol{flex:0 0 clamp(56px, 7cqw, 90px);}
.vc-range::-webkit-slider-runnable-track{
  height:2px;
  background:linear-gradient(90deg, var(--ink) var(--p), rgba(255,255,255,.28) var(--p));
}
.vc-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:11px; height:11px; margin-top:-4.5px; border-radius:50%;
  background:var(--ink); border:0; transition:transform .15s;
}
.vc-range:hover::-webkit-slider-thumb,.vc-range:focus-visible::-webkit-slider-thumb{transform:scale(1.3);}
.vc-range::-moz-range-track{height:2px; background:rgba(255,255,255,.28);}
.vc-range::-moz-range-progress{height:2px; background:var(--ink);}
.vc-range::-moz-range-thumb{width:11px; height:11px; border-radius:50%; background:var(--ink); border:0;}
.vc-range:focus-visible{outline:none;}

.slide.playing .vsl-ui,.slide.playing .work-ui,.slide.playing .scene-tint{opacity:0; pointer-events:none;}
.slide.playing .scene{filter:brightness(.25);}
.media.playing .osd{opacity:0;}
.media.playing .car-btn{opacity:.35;}
.media.playing .car-btn:hover,.media.playing .car-btn:focus-visible{opacity:1;}

.vsl-ui{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(6px, 1.1cqw, 14px);
  text-align:center;
  transition:opacity .5s ease;
}
.play{
  width:clamp(52px, 7.6cqw, 96px); aspect-ratio:1;
  border:1px solid rgba(255,255,255,.75); border-radius:50%;
  background:rgba(20,20,18,.18);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:grid; place-items:center;
  cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease), border-color .3s;
  position:relative;
}
.play::after{ /* slow breathing ring */
  content:""; position:absolute; inset:-9px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  animation:breathe 3.4s ease-in-out infinite;
}
.play svg{width:28%; margin-left:8%;}
.play svg path{fill:#fff; transition:fill .3s;}
.play:hover{background:var(--ink); border-color:var(--ink); transform:scale(1.04);}
.play:hover svg path{fill:var(--panel);}
.vsl-title{font-size:clamp(30px, 5.6cqw, 72px); color:#fff; text-shadow:0 2px 28px rgba(0,0,0,.35);}
.vsl-sub{color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.5);}
.vsl-hint{min-height:1.2em; color:#fff; opacity:0; transition:opacity .4s;}
.vsl-hint.show{opacity:.85;}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.6;}50%{transform:scale(1.12);opacity:0;}}

/* portfolio slides */
.work-bg{position:absolute; inset:-40px; background-size:cover; background-position:center; filter:blur(28px) brightness(.55);}
.work-media{position:absolute; left:0; top:5.7cqw; width:100%; height:calc(100% - 9.05cqw); object-fit:contain;}
.work-ph{ /* placeholder still until real work is added */
  position:absolute; inset:0;
  background:
    radial-gradient(14% 22% at var(--a,30%) 38%, rgba(255,236,205,.55), transparent 70%),
    radial-gradient(9% 14% at var(--b,62%) 30%, rgba(255,226,186,.4), transparent 70%),
    radial-gradient(18% 26% at var(--c,78%) 60%, rgba(214,190,150,.32), transparent 70%),
    radial-gradient(70% 60% at 50% 45%, var(--glow,#6d604c), transparent 75%),
    linear-gradient(180deg, #1d1b18, #0d0c0b);
}
.work-ph::after{ /* film grain */
  content:""; position:absolute; inset:0; background-image:var(--paper-tooth); background-size:180px; opacity:.12; mix-blend-mode:overlay;
}
.work-shade{position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0) 45%), linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 40%);}
.work-ui{
  position:absolute; left:17%; right:17%; bottom:8.5cqw; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:clamp(6px, .9cqw, 12px);
  transition:opacity .5s ease;
}
.work-ui .mono{color:rgba(255,255,255,.75);}
.work-title{font-size:clamp(22px, 4.2cqw, 60px); color:#fff;}
.work-client{color:#fff;}
.work-ui .play{width:clamp(40px, 4.6cqw, 58px); margin-top:clamp(4px, .8cqw, 10px);}
.work-ui .play::after{inset:-6px;}

/* carousel arrows — semi-transparent, label underneath */
.car-btn{
  position:absolute; z-index:5; top:50%;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:clamp(6px, .9cqw, 12px);
  background:none; border:0; cursor:pointer; color:#fff;
  opacity:.82; transition:opacity .3s;
  width:clamp(70px, 12cqw, 150px);
}
.car-btn.next{left:91.5%;}
.car-btn.prev{left:8.5%;}
.car-btn.prev .car-ring svg{transform:scaleX(-1);}
.car-ring{
  width:clamp(40px, 5.4cqw, 68px); height:clamp(40px, 5.4cqw, 68px); border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  background:rgba(18,18,16,.28);
  border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.car-ring svg{width:clamp(16px, 2.2cqw, 28px); height:clamp(16px, 2.2cqw, 28px); color:#fff;}
.car-label{color:#fff; text-align:center; white-space:normal; line-height:1.35; text-shadow:0 1px 10px rgba(0,0,0,.6);}
.car-btn:hover,.car-btn:focus-visible{opacity:1;}
.car-btn:hover .car-ring{background:rgba(18,18,16,.5); border-color:#fff;}
.car-btn.next:hover .car-ring{transform:translateX(4px);}
.car-btn.prev:hover .car-ring{transform:translateX(-4px);}
.car-btn:focus-visible{outline:none;}
.car-btn:focus-visible .car-ring{outline:1px solid #fff; outline-offset:4px;}
.car-btn.nudge .car-ring{animation:nudge 2.6s ease-in-out 1.2s 3;}
@keyframes nudge{0%,100%{transform:translateX(0);}40%{transform:translateX(7px);}60%{transform:translateX(0);}}

/* camera viewfinder overlay */
.osd{
  position:absolute; left:3.2%; right:3.2%; top:7.8cqw; bottom:6.2cqw; z-index:4; pointer-events:none;
  color:rgba(255,255,255,.88);
  transition:opacity .5s;
}
.vf{position:absolute; width:2.4cqw; height:2.4cqw; min-width:12px; min-height:12px; border-color:rgba(255,255,255,.7); border-style:solid; border-width:0;}
.vf.tl{left:0; top:0; border-left-width:1px; border-top-width:1px;}
.vf.tr{right:0; top:0; border-right-width:1px; border-top-width:1px;}
.vf.bl{left:0; bottom:0; border-left-width:1px; border-bottom-width:1px;}
.vf.br{right:0; bottom:0; border-right-width:1px; border-bottom-width:1px;}
.osd .mono{position:absolute; text-shadow:0 1px 6px rgba(0,0,0,.5); white-space:nowrap;}
.osd-tl{left:1.5cqw; top:1.1cqw; display:flex; align-items:center; gap:.6em;}
.osd-tl b{font-weight:500; margin-left:.4em;}
.osd-tr{right:1.5cqw; top:1.1cqw;}
.osd-bl{left:1.5cqw; bottom:1.1cqw;}
.osd-br{right:1.5cqw; bottom:1.1cqw;}

/* ornaments riding on the panel tabs */
.orn{position:absolute; z-index:3; color:var(--ink); pointer-events:none;}
.orn.reticle{width:3.4cqw; height:3.4cqw; top:.4cqw;}
.orn.reticle.l{left:7.2%; transform:translateX(-50%);}
.orn.reticle.r{left:92.8%; transform:translateX(-50%);}
.orn.ring{
  left:var(--x); top:-.35cqw; transform:translateX(-50%);
  width:1.15cqw; height:1.15cqw; min-width:5px; min-height:5px;
  border:1px solid var(--ink); border-radius:50%;
}
.orn.arrow-top{left:var(--x); top:3.5cqw; width:1.3cqw; height:1.3cqw; min-width:6px; min-height:6px; transform:translateX(-50%);}
.orn.reel{width:2.4cqw; height:1.3cqw; bottom:2.15cqw; transform:translate(-50%,50%);}
.orn.reel.l{left:8.1%;}
.orn.reel.r{left:91.9%;}
.barcode{display:block; color:var(--ink);}
.barcode svg{width:100%; height:100%;}
.orn.barcode{bottom:2.2cqw; height:1.1cqw; transform:translateY(50%);}
.bc-l{left:27%; width:14.6%;}
.bc-r{left:58.4%; width:14.6%;}

/* ---- lower panel ---- */
.p-foot{
  position:relative; z-index:3;
  aspect-ratio:610/172;
  flex:0 0 auto;
}
.pf{position:absolute; transform:translate(-50%,-50%);}
.pf.micro{white-space:nowrap;}
.ruler{
  position:absolute; top:8%; bottom:14%; width:1.5cqw;
  background:
    repeating-linear-gradient(180deg, var(--ink) 0 1px, transparent 1px 1.25cqw) right/100% 100% no-repeat,
    repeating-linear-gradient(180deg, var(--ink) 0 1px, transparent 1px .625cqw) right/50% 100% no-repeat;
  opacity:.75;
}
.ruler.l{left:1.6%;}
.ruler.r{right:1.6%; transform:scaleX(-1);}

.arrow-down{left:50%; top:4.5%; width:1.3cqw; height:1.3cqw; transform:translate(-50%,-50%) rotate(180deg); color:var(--ink);}
.arrow-up{left:50%; top:19%; width:1.3cqw; height:1.3cqw; color:var(--ink);}
.series{top:12%; text-align:center;}
.series.l{left:8.4%;} .series.r{left:91.6%;}

/* Close / Full screen under the frame while a video plays */
.play-ctl{
  display:none; top:12%;
  align-items:center; gap:8px;
  background:none; border:1px solid var(--line-soft); padding:8px 12px;
  cursor:pointer; color:var(--ink); white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s;
}
.play-ctl svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round;}
.play-ctl:hover{background:var(--ink); color:var(--panel); border-color:var(--ink);}
.play-ctl.l{left:12%;} .play-ctl.r{left:88%;}
.poster.playing .play-ctl{display:flex;}
.poster.playing .series{visibility:hidden;}

/* ---- cinema: the playing video fills the page ----
   Every ancestor that would trap a fixed element (container query, transform, clip-path) is released. */
html.cinema-lock,html.cinema-lock body{overflow:hidden;}
.poster.cinema{z-index:1000; container-type:normal;}
.poster.cinema .media{z-index:20;}
.poster.cinema .media-clip{clip-path:none;}
.poster.cinema .track{transform:none !important; transition:none; right:auto; width:100%; left:calc(var(--i, 0) * -100%);}
.poster.cinema .slide.playing .player{
  position:fixed; inset:0; z-index:1000;
  padding-top:56px; background:#000;
}
.cin-bar{display:none;}
.poster.cinema .cin-bar{
  display:flex; position:absolute; top:0; left:0; right:0; height:56px; z-index:3;
  align-items:center; justify-content:space-between; gap:16px;
  padding:0 clamp(12px, 2vw, 24px);
  border-bottom:1px solid rgba(255,255,255,.12);
  color:#fff;
}
.cin-title{color:rgba(255,255,255,.8); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cin-actions{display:flex; align-items:center; gap:10px; flex:0 0 auto;}
.cin-exit{background:none; border:1px solid rgba(255,255,255,.3); color:#fff; padding:9px 14px; cursor:pointer; font-size:10px; transition:background .2s, color .2s;}
.cin-exit:hover{background:#fff; color:#000;}
.cin-close{width:36px; height:36px; display:grid; place-items:center; background:none; border:0; color:#fff; cursor:pointer; opacity:.85;}
.cin-close:hover{opacity:1;}
.cin-close svg{width:20px; height:20px;}
.poster.cinema .vc{padding:48px 28px 20px;}
.poster.cinema .vc-fs .i-fs{display:none;}
.poster.cinema .vc-fs .i-fs-exit{display:block;}
.poster.cinema .vc-time{font-size:12px;}
.arrow-side{top:44%; width:1.3cqw; height:1.3cqw; color:var(--ink);}
.arrow-side.l{left:9.7%;} .arrow-side.r{left:90.3%;}
.aperture{top:44%; width:3.6cqw; height:3.6cqw; color:var(--ink);}
.aperture.l{left:18.6%;} .aperture.r{left:81.4%;}

/* Book a Call — a real button: solid, chamfered, with viewfinder corners */
.cta{left:50%; top:44%;}
.cta::before{ /* viewfinder corner marks around the button */
  --c:var(--ink); --l:clamp(10px, 1.4cqw, 18px);
  content:""; position:absolute; inset:calc(-1 * clamp(8px, 1.1cqw, 14px)); pointer-events:none;
  background:
    linear-gradient(var(--c),var(--c)) top left / var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) top left / 1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) top right / var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) top right / 1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left / var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left / 1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right / var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right / 1px var(--l) no-repeat;
  animation:frame-pulse 2.8s ease-in-out infinite;
}
@keyframes frame-pulse{0%,100%{opacity:.35; transform:scale(1);}50%{opacity:1; transform:scale(1.03);}}
.cta-btn{
  --cut:clamp(8px, 1.1cqw, 16px);
  display:inline-flex; align-items:center; gap:.4em;
  padding:.32em .62em .32em .72em;
  font-size:clamp(28px, 5.2cqw, 70px);
  background:var(--ink); color:var(--panel);
  text-decoration:none; white-space:nowrap;
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition:background .25s, transform .25s var(--ease);
}
.cta-btn .display{font-size:1em; line-height:1; color:inherit;}
.cta-arrow{width:.6em; height:.6em; flex:0 0 auto; color:inherit; transition:transform .3s var(--ease);}
.cta-btn:hover,.cta-btn:focus-visible{background:#fff;}
.cta-btn:hover .cta-arrow,.cta-btn:focus-visible .cta-arrow{transform:translateX(.18em);}
.cta-btn:active{transform:scale(.97);}
.cta-btn:focus-visible{outline:none;}
.cta:focus-within::before{opacity:1; animation:none;}

/* Scroll for more info */
.scroll-hint{
  left:50%; top:76%;
  display:inline-flex; align-items:center; gap:.7em;
  color:var(--ink-dim); text-decoration:none;
  transition:color .2s;
}
.scroll-hint:hover{color:var(--ink);}
.scroll-hint svg{width:9px; height:9px; transform:rotate(180deg); animation:hint-bob 1.8s ease-in-out infinite;}
@keyframes hint-bob{0%,100%{transform:rotate(180deg) translateY(0);}50%{transform:rotate(180deg) translateY(-4px);}}
.poster.playing .scroll-hint{visibility:hidden;}

.baseline{
  left:50%; top:92%; width:66%;
  display:flex; align-items:center; justify-content:space-between;
}
.baseline .arrow-b{width:1.3cqw; height:1.3cqw; min-width:6px; min-height:6px; color:var(--ink);}
.bc-c{width:22%; height:1.15cqw; min-height:7px;}

/* =========================================================
   SHEETS (system + booking)
   ========================================================= */
.sheet{
  position:relative;
  max-width:1180px;
  margin:var(--gutter) auto 0;
  background:var(--panel);
  container-type:inline-size;
  isolation:isolate;
  padding:clamp(28px, 5cqw, 64px) clamp(18px, 4cqw, 52px) clamp(28px, 5cqw, 60px);
}
.sheet::before{ /* inset hairline, poster-print style */
  content:""; position:absolute; inset:8px; border:1px solid var(--line-soft); pointer-events:none; z-index:1;
}
.sheet > *:not(.paper){position:relative; z-index:2;}
.sheet .micro{font-size:clamp(8.5px, .95cqw, 11px);}

.sheet-head{text-align:center; margin-bottom:clamp(24px, 4cqw, 48px);}
.sheet-head > span.micro{display:block; color:var(--ink-dim);}
.sheet-head h2{font-size:clamp(40px, 7.2cqw, 88px); margin-top:.3em;}
.arrow-row{display:flex; justify-content:center; gap:clamp(40px, 9cqw, 110px); margin-top:16px;}
.arrow-row svg{width:9px; height:9px; color:var(--ink);}

/* the system */
.steps{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-soft);}
.step{
  padding:clamp(20px,3cqw,36px) clamp(14px,2.4cqw,30px) clamp(22px,3cqw,34px);
  border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:14px;
}
.step:last-child{border-right:0;}
.step-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.step-no{font-size:clamp(54px, 7cqw, 86px); line-height:.8; color:transparent; -webkit-text-stroke:1px var(--ink);}
.step-tag{color:var(--ink-dim); padding-top:4px;}
.step h3{font-size:clamp(26px, 3cqw, 38px); margin-top:6px;}
.step p{font-size:14px; font-stretch:100%; line-height:1.6; color:var(--ink-dim); max-width:34ch;}

.stats{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.stat{display:flex; align-items:baseline; gap:14px; padding:18px clamp(14px,2.4cqw,30px); border-right:1px solid var(--line-soft);}
.stat:last-child{border-right:0;}
.stat .display{font-size:clamp(28px, 3.4cqw, 42px); white-space:nowrap;}
.stat .micro{color:var(--ink-dim);}

/* booking */
.progress{list-style:none; display:flex; justify-content:center; gap:clamp(14px,3cqw,40px); margin-top:18px;}
.progress li{color:var(--ink-faint); transition:color .3s; position:relative; padding-bottom:6px;}
.progress li::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); transform:scaleX(0); transition:transform .4s var(--ease);}
.progress li.on{color:var(--ink);}
.progress li.on::after{transform:scaleX(1);}

.book-grid{
  display:grid;
  grid-template-columns:1.25fr .85fr 1fr;
  gap:clamp(14px, 2cqw, 24px);
  align-items:stretch;
}
.pane{border:1px solid var(--line-soft); background:rgba(0,0,0,.12); display:flex; flex-direction:column; min-width:0;}
.pane-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--line-soft); min-height:54px;
}
.pane-foot{display:flex; justify-content:space-between; gap:10px; padding:10px 14px; border-top:1px solid var(--line-soft); color:var(--ink-faint);}
.cal-title{font-size:12px; letter-spacing:.24em; text-transform:uppercase; font-weight:600;}
.nav-btn{
  background:transparent; border:1px solid var(--line-soft);
  width:32px; height:32px; cursor:pointer; font-size:18px; line-height:1;
  transition:background .2s, color .2s, border-color .2s;
}
.nav-btn:hover:not(:disabled){background:var(--ink); color:var(--panel); border-color:var(--ink);}
.nav-btn:disabled{opacity:.25; cursor:not-allowed;}
.nav-btn.wide{width:auto; height:auto; padding:13px 22px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; font-weight:600;}

.cal-week,.cal-days{display:grid; grid-template-columns:repeat(7,minmax(0,1fr));}
.cal-week span{
  padding:10px 0; text-align:center; font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); border-bottom:1px solid var(--line-soft);
}
.cal-days{flex:1; grid-auto-rows:minmax(44px,1fr);}
.day{
  display:grid; place-items:center;
  background:transparent; border:0;
  border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:12px;
  color:var(--ink-dim);
  cursor:pointer; transition:background .18s, color .18s;
  position:relative;
}
.day:nth-child(7n){border-right:0;}
.day:hover:not(:disabled){background:rgba(238,235,228,.08); color:var(--ink);}
.day:disabled{color:var(--ink-faint); opacity:.35; cursor:default;}
.day.empty{visibility:hidden;}
.day.today::after{content:""; position:absolute; bottom:18%; width:4px; height:4px; border-radius:50%; background:var(--rec);}
.day.selected{background:var(--ink); color:var(--panel); font-weight:600;}

.slot-list{padding:12px; display:grid; grid-template-columns:1fr 1fr; align-content:start; gap:6px; flex:1;}
.slot-group{grid-column:1 / -1; color:var(--ink-faint); padding:8px 2px 2px;}
.slot-group:first-child{padding-top:0;}
.slot-list > .slot-empty{grid-column:1 / -1; min-height:300px;}
.slot{
  border:1px solid var(--line-soft); background:transparent;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:10px 6px; cursor:pointer; text-align:center; color:var(--ink-dim); white-space:nowrap;
  transition:background .18s, color .18s, border-color .18s;
}
.slot:hover{border-color:var(--line); color:var(--ink);}
.slot[aria-pressed="true"]{background:var(--ink); color:var(--panel); border-color:var(--ink); font-weight:600;}
.slot-empty{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  border:1px dashed var(--line-soft); padding:22px 12px; text-align:center; color:var(--ink-faint); min-height:200px;
}
.slot-empty .display{font-size:28px; color:var(--ink-dim);}

/* locked steps: date → hours → details */
:root{--lock:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><rect x='5' y='11' width='14' height='9' rx='1'/><path d='M8 11V8a4 4 0 0 1 8 0v3'/></svg>");}
.lock-tag{display:inline-flex; align-items:center; gap:6px; color:var(--ink-faint);}
.lock-tag::before,.lock-ico{content:""; display:inline-block; background:currentColor; -webkit-mask:var(--lock) center/contain no-repeat; mask:var(--lock) center/contain no-repeat;}
.lock-tag::before{width:11px; height:11px;}
.lock-ico{width:26px; height:26px; color:var(--ink-faint);}
.pane.slots.locked .pane-head > .micro:first-child,.details.locked .pane-head > .micro:first-child{color:var(--ink-faint);}

.details fieldset{border:0; padding:14px; display:flex; flex-direction:column; gap:12px; flex:1; transition:opacity .3s;}
.details fieldset:disabled{opacity:.35;}
.field{display:flex; flex-direction:column; gap:6px;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.field .micro{color:var(--ink-dim);}
.field input,.field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:8px 0; font-size:15px; font-stretch:100%;
  border-radius:0; resize:vertical; transition:border-color .2s;
}
.field input:focus,.field textarea:focus{outline:none; border-bottom-color:var(--ink);}
.field input[aria-invalid="true"]{border-bottom-color:#d79a86;}
.confirm{
  margin-top:auto; padding:16px; border:1px solid var(--ink); background:transparent;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; font-weight:600;
  cursor:pointer; transition:background .2s, color .2s;
}
.confirm:hover:not(:disabled){background:var(--ink); color:var(--panel);}
.confirm:disabled{cursor:not-allowed;}
.form-note{padding:0 14px 14px; text-align:center; color:var(--ink-faint); min-height:1.2em;}

.confirmed{
  text-align:center; padding:clamp(24px,5cqw,56px) 16px; border:1px solid var(--line-soft);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.confirmed:focus{outline:none;}
.confirmed .display{font-size:clamp(44px, 7.4cqw, 90px);}
.confirmed-copy{font-size:14px; font-stretch:100%; line-height:1.6; color:var(--ink-dim); max-width:44ch;}
.reticle-lg{width:40px; height:40px; color:var(--ink);}

/* footer strip */
.footstrip{
  max-width:1180px; margin:0 auto; padding:22px 4px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  container-type:inline-size;
}
.footstrip .cam{width:34px; color:var(--ink-faint);}
.footstrip .micro{color:var(--ink-faint); text-align:center; font-size:9px;}

/* toast */
.toast{
  position:fixed; left:50%; bottom:24px; z-index:50;
  transform:translate(-50%, 16px);
  background:var(--panel-deep); border:1px solid var(--line);
  padding:14px 24px; font-size:10px; max-width:calc(100vw - 32px); text-align:center; white-space:normal;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s var(--ease);
}
.toast.show{opacity:1; transform:translate(-50%,0);}

/* entrance */
.reveal{opacity:0; transform:translateY(14px); transition:opacity 1s var(--ease), transform 1s var(--ease);}
.reveal.in{opacity:1; transform:none;}

/* scene motion */
.scene .birds{animation:drift 26s ease-in-out infinite alternate;}
.scene .bird{animation:flap 1.1s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:center;}
.scene .glint{animation:glint 2.8s ease-in-out infinite;}
@keyframes drift{from{transform:translate(0,0);}to{transform:translate(-60px,-24px);}}
@keyframes flap{from{transform:scaleY(1);}to{transform:scaleY(.45);}}
@keyframes glint{0%,100%{opacity:.15;}50%{opacity:1;}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .book-grid{grid-template-columns:1.2fr 1fr;}
  .details{grid-column:1 / -1;}
  .details fieldset{display:grid; grid-template-columns:1fr 1fr; column-gap:18px;}
  .details .field:nth-of-type(4),.details .confirm{grid-column:1 / -1;}
  .stats{grid-template-columns:1fr;}
  .stat{border-right:0; border-bottom:1px solid var(--line-soft);}
  .stat:last-child{border-bottom:0;}
}

@media (max-width:720px){
  body{padding:12px 12px 0;}
  .t-hide{display:none;}
  .title-row{padding:0 6%;}
  .logo img{margin-bottom:0;}
  .poster{--screen:calc(100vh - 24px);}
  @supports (height:100svh){ .poster{--screen:calc(100svh - 24px);} }
  .media{min-height:70cqw;}
  .osd-bl,.osd-br{display:none;}
  .osd{top:8.5cqw;}
  .vsl-ui{padding:0 22%;}
  .vsl-sub{display:none;}
  .car-btn{width:70px;}
  .car-btn.next{left:89%;} .car-btn.prev{left:11%;}
  .car-label{font-size:7.5px; letter-spacing:.1em;}
  .work-ui{left:6.5%; right:8%; bottom:8cqw;}
  .work-title{font-size:clamp(22px, 7cqw, 34px);}
  .vc{gap:6px; padding:16px 8px 6px;}
  .vc-vol{display:none;}
  .vc-btn{width:28px; height:28px;}
  .vc-time{font-size:9px;}
  .vc-close{width:34px; padding-left:6px;}

  /* lower panel becomes a flowing grid instead of a fixed poster layout */
  .p-foot{
    aspect-ratio:auto;
    display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; column-gap:8px;
    row-gap:14px; padding:22px 14px 16px;
  }
  .pf{position:static; transform:none;}
  .ruler,.arrow-side,.arrow-down{display:none;}
  .series.l{grid-area:1/1; justify-self:start;} .series.r{grid-area:1/3; justify-self:end;}
  .play-ctl.l{grid-area:1/1; justify-self:start;} .play-ctl.r{grid-area:1/3; justify-self:end;}
  .poster.playing .series{display:none;}
  .play-ctl{padding:7px 9px;}
  .arrow-up{grid-area:1/2; justify-self:center; width:8px; height:8px;}
  .aperture{width:24px; height:24px;}
  .aperture.l{grid-area:2/1; justify-self:start;} .aperture.r{grid-area:2/3; justify-self:end;}
  .cta{grid-area:2/2; justify-self:center; position:relative; left:auto; top:auto; margin:10px 0;}
  .scroll-hint{left:auto; top:auto;}
  .cta-btn{font-size:clamp(24px, 8.4cqw, 44px);}
  .scroll-hint{grid-area:3/1/4/4; justify-self:center;}
  .baseline{grid-area:4/1/5/4; width:78%; justify-self:center; margin-top:4px;}
  .bc-c{width:30%;}

  .steps{grid-template-columns:1fr;}
  .step{border-right:0; border-bottom:1px solid var(--line-soft);}
  .step:last-child{border-bottom:0;}

  .book-grid{grid-template-columns:1fr;}
  .details fieldset{display:flex;}
  .slot-list{display:grid; grid-template-columns:1fr 1fr;}
  .slot-empty{grid-column:1 / -1; min-height:120px;}
  .footstrip .cam{display:none;}
  .footstrip{justify-content:center;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important; transition:none !important;}
  .reveal{opacity:1; transform:none;}
}