/* =========================================================
   MARMORTEN PRODUCTION — base system
   Palette: ink / paper + a single signature: tungsten amber.
   Type:    Bricolage Grotesque (display) · Instrument Serif
            (narrative) · Geist Mono (technical / timecode)
   ========================================================= */
@font-face{font-family:'Bricolage';src:url(../assets/fonts/bricolage-latin.woff2) format('woff2');font-weight:200 800;font-stretch:75% 100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage';src:url(../assets/fonts/bricolage-latin-ext.woff2) format('woff2');font-weight:200 800;font-stretch:75% 100%;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';src:url(../assets/fonts/instrument-latin.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';src:url(../assets/fonts/instrument-latin-ext.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';src:url(../assets/fonts/instrument-italic-latin.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';src:url(../assets/fonts/instrument-italic-latin-ext.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+A720-A7FF}
@font-face{font-family:'Geist Mono';src:url(../assets/fonts/geistmono-latin.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';src:url(../assets/fonts/geistmono-latin-ext.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --f-display:'Bricolage','Helvetica Neue',Arial,sans-serif;
  --f-serif:'Instrument Serif','Iowan Old Style','Times New Roman',serif;
  --f-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(20px,4.2vw,72px);
  --hud-h:64px;
  --tl-h:46px;
  --maxw:1680px;
  --vh:100vh;
}
@supports (height:100svh){:root{--vh:100svh}}

/* Dark = "INT. NIGHT"  (also the always-dark screening scenes) */
:root,:root[data-theme="dark"],.tone-dark{
  --bg:#0b0a09; --bg-2:#131110; --bg-3:#1c1916;
  --fg:#efeae0; --fg-dim:rgba(239,234,224,.62); --fg-faint:rgba(239,234,224,.34);
  --line:rgba(239,234,224,.16); --line-strong:rgba(239,234,224,.34);
  --accent:#e2a73b; --accent-ink:#e2a73b; --on-accent:#0b0a09;
  --grain-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-op:.085;
  --scrim:11,10,9;
  color-scheme:dark;
}
/* Light = "EXT. DAY" */
:root[data-theme="light"]{
  --bg:#efeae0; --bg-2:#e6e0d3; --bg-3:#d9d2c3;
  --fg:#0e0d0b; --fg-dim:rgba(14,13,11,.66); --fg-faint:rgba(14,13,11,.38);
  --line:rgba(14,13,11,.16); --line-strong:rgba(14,13,11,.4);
  --accent:#c98a12; --accent-ink:#8a5700; --on-accent:#0b0a09;
  --grain-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-op:.13;
  --scrim:239,234,224;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto;background:var(--bg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.5 var(--f-display);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip;transition:background-color .6s var(--ease-soft),color .6s var(--ease-soft)}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
main:focus{outline:none}

.skip{position:fixed;left:16px;top:-80px;z-index:2000;background:var(--accent);color:var(--on-accent);padding:12px 18px;font:500 13px var(--f-mono);transition:top .25s}
.skip:focus{top:12px}

/* ---------- Type ---------- */
.mono{font-family:var(--f-mono);font-size:.72rem;line-height:1.5;letter-spacing:.09em;text-transform:uppercase;font-weight:450}
.dim{color:var(--fg-dim)}
.serif{font-family:var(--f-serif);font-size:clamp(1.22rem,1.05rem + .8vw,1.75rem);line-height:1.28;letter-spacing:-.005em}
.serif em,.lead em{font-style:italic}
.h2{font-family:var(--f-display);font-weight:700;font-stretch:78%;font-size:clamp(2.6rem,1.4rem + 6.4vw,7.4rem);line-height:.9;letter-spacing:-.025em;text-wrap:balance;hyphens:auto}
.h3{font-family:var(--f-display);font-weight:650;font-stretch:84%;font-size:clamp(1.7rem,1.1rem + 2.6vw,3.4rem);line-height:.98;letter-spacing:-.02em;text-wrap:balance}
.lead{margin-top:1.4rem;max-width:34ch;color:var(--fg-dim)}
.kicker{display:flex;align-items:center;gap:.7em;color:var(--fg-dim);margin-bottom:1.6rem}
.kicker::before{content:"";width:28px;height:1px;background:var(--accent)}
.sec-head{max-width:var(--maxw)}

/* ---------- Layers: grain ---------- */
.grain{position:fixed;left:-50%;top:-50%;width:200%;height:200%;z-index:800;pointer-events:none;background-image:var(--grain-img);background-size:260px 260px;opacity:var(--grain-op);animation:grain .9s steps(1) infinite;will-change:transform}
@keyframes grain{0%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}20%{transform:translate(-12%,4%)}30%{transform:translate(7%,-14%)}40%{transform:translate(-4%,14%)}50%{transform:translate(-13%,6%)}60%{transform:translate(12%,0)}70%{transform:translate(0,12%)}80%{transform:translate(3%,7%)}90%{transform:translate(-9%,9%)}100%{transform:translate(0,0)}}

/* ---------- Cursor (aperture) ---------- */
.cursor{position:fixed;left:0;top:0;z-index:2400;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
html.has-cursor .cursor.is-on{opacity:1}
.cursor__ring{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border:1px solid #fff;border-radius:50%;transition:width .45s var(--ease-out),height .45s var(--ease-out),margin .45s var(--ease-out),background-color .3s,border-width .3s}
.cursor__label{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap;opacity:0;transition:opacity .25s}
.cursor[data-state="link"] .cursor__ring{width:54px;height:54px;margin:-27px 0 0 -27px}
.cursor[data-state="text"] .cursor__ring{width:4px;height:26px;margin:-13px 0 0 -2px;border-radius:2px;background:#fff}
.cursor[data-state="view"] .cursor__ring,.cursor[data-state="play"] .cursor__ring,.cursor[data-state="drag"] .cursor__ring,.cursor[data-state="open"] .cursor__ring,.cursor[data-state="close"] .cursor__ring{width:96px;height:96px;margin:-48px 0 0 -48px;background:#fff}
.cursor[data-state="view"] .cursor__label,.cursor[data-state="play"] .cursor__label,.cursor[data-state="drag"] .cursor__label,.cursor[data-state="open"] .cursor__label,.cursor[data-state="close"] .cursor__label{opacity:1;color:#000}
.cursor[data-state="down"] .cursor__ring{width:20px;height:20px;margin:-10px 0 0 -10px}
html.has-cursor,html.has-cursor *{cursor:none!important}
html.has-cursor input,html.has-cursor textarea,html.has-cursor select{cursor:text!important}
html.has-cursor select{cursor:pointer!important}

/* ---------- HUD ---------- */
.hud{position:fixed;left:0;right:0;top:0;z-index:700;height:var(--hud-h);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--pad);color:var(--fg);background:linear-gradient(rgba(var(--scrim),.85),rgba(var(--scrim),0));transition:background .6s var(--ease-soft),color .5s,transform .7s var(--ease-out);pointer-events:none}
.hud>*{pointer-events:auto}
.hud__brand{display:flex;align-items:center;gap:10px}
.hud__lens{width:26px;height:26px;color:var(--accent);transition:transform 1.2s var(--ease-out)}
.hud__brand:hover .hud__lens{transform:rotate(60deg)}
.hud__name{font:700 15px/1 var(--f-display);font-stretch:80%;letter-spacing:.14em}
.hud__scene{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:baseline;gap:.9em;white-space:nowrap;pointer-events:none}
.hud__rec{display:flex;align-items:center;gap:6px;font:500 10px var(--f-mono);letter-spacing:.14em;color:var(--fg-dim)}
.hud__rec i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:rec 1.6s steps(1) infinite}
@keyframes rec{50%{opacity:.15}}
.hud__sc{color:var(--fg-dim)}
.hud__nm{font:650 15px/1 var(--f-display);font-stretch:80%;letter-spacing:.08em;text-transform:uppercase}
.hud__plain{font:400 13px var(--f-serif);font-style:italic;color:var(--fg-dim);letter-spacing:.01em}
.hud__sc,.hud__nm,.hud__plain{transition:opacity .35s,transform .5s var(--ease-out)}
.hud.is-swap .hud__sc,.hud.is-swap .hud__nm,.hud.is-swap .hud__plain{opacity:0;transform:translateY(-6px)}
.hud__tools{display:flex;align-items:center;gap:8px}
.hbtn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border:1px solid var(--line-strong);border-radius:2px;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;transition:background-color .3s,color .3s,border-color .3s}
.hbtn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.hbtn svg{width:9px;height:6px}
.hbtn--theme .hbtn__ico{width:11px;height:11px;border-radius:50%;border:1px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%);transition:transform .8s var(--ease-out)}
:root[data-theme="light"] .hbtn--theme .hbtn__ico{transform:rotate(180deg)}
.hbtn--snd{padding:0 11px}
.snd{display:flex;align-items:flex-end;gap:2px;height:12px}
.snd i{width:2px;height:6px;background:currentColor;transition:height .3s}
.snd i:nth-child(1){height:5px}.snd i:nth-child(2){height:10px}.snd i:nth-child(3){height:7px}.snd i:nth-child(4){height:4px}
html.snd-on .snd i{animation:eq .9s ease-in-out infinite alternate}
html.snd-on .snd i:nth-child(2){animation-delay:-.3s}html.snd-on .snd i:nth-child(3){animation-delay:-.6s}html.snd-on .snd i:nth-child(4){animation-delay:-.15s}
@keyframes eq{from{height:3px}to{height:12px}}
.hud__cta{display:inline-flex;align-items:center;height:34px;padding:0 16px;background:var(--accent);color:var(--on-accent);border-radius:2px;font:600 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;position:relative;overflow:hidden;transition:transform .4s var(--ease-out)}
.hud__cta::after{content:"";position:absolute;inset:0;background:var(--fg);transform:translateY(101%);transition:transform .45s var(--ease-out)}
.hud__cta span{position:relative;z-index:1;transition:color .3s}
.hud__cta:hover::after{transform:none}.hud__cta:hover span{color:var(--bg)}
.hbtn--menu{display:none;gap:10px}
.hbtn--menu i{width:16px;height:6px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;transition:transform .4s var(--ease-out)}
.hbtn--menu[aria-expanded="true"] i{transform:scaleY(.2)}

/* HUD adapts to the scene: screening scenes turn the top & bottom edges into letterbox bars */
body[data-tone="screen"] .hud,body[data-tone="screen"] .tl{background:#000;color:#efeae0;--fg:#efeae0;--fg-dim:rgba(239,234,224,.62);--line:rgba(239,234,224,.16);--line-strong:rgba(239,234,224,.34);--accent:#e2a73b}
body[data-tone="screen"] .hbtn:hover{background:#efeae0;color:#000;border-color:#efeae0}
body.is-cover .hud{transform:translateY(-100%)}
body.is-cover .tl{transform:translateY(100%)}

/* language dropdown */
.lang{position:relative}
.lang__list{position:absolute;right:0;top:calc(100% + 8px);min-width:180px;padding:6px;background:var(--bg-2);border:1px solid var(--line-strong);color:var(--fg);box-shadow:0 30px 60px rgba(0,0,0,.35);z-index:5}
.lang__list li{list-style:none}
.lang__opt{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 12px;font:500 13px var(--f-display);text-align:left;border-radius:2px}
.lang__opt small{font:500 10px var(--f-mono);letter-spacing:.12em;color:var(--fg-faint);text-transform:uppercase}
.lang__opt:hover,.lang__opt:focus-visible{background:var(--fg);color:var(--bg)}
.lang__opt:hover small,.lang__opt:focus-visible small{color:inherit}
.lang__opt[aria-selected="true"]{color:var(--accent-ink)}
.lang__opt[aria-selected="true"]::after{content:"●";font-size:8px;margin-left:8px}

/* ---------- Timeline (scene scrubber) ---------- */
.tl{position:fixed;left:0;right:0;bottom:0;z-index:700;height:var(--tl-h);display:flex;align-items:center;gap:24px;padding:0 var(--pad);background:linear-gradient(rgba(var(--scrim),0),rgba(var(--scrim),.85));color:var(--fg);transition:background .6s var(--ease-soft),transform .7s var(--ease-out)}
.tl__ticks{flex:1;display:grid;grid-template-columns:repeat(6,1fr);height:100%}
.tl__ticks li{display:flex}
.tl__ticks button{flex:1;display:flex;align-items:center;gap:8px;height:100%;padding:0 4px;font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);text-align:left;transition:color .3s}
.tl__ticks button b{font-weight:500;color:inherit}
.tl__ticks button span{opacity:0;transform:translateX(-4px);transition:opacity .35s,transform .45s var(--ease-out);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl__ticks button:hover{color:var(--fg)}
.tl__ticks button:hover span,.tl__ticks button[aria-current="true"] span{opacity:1;transform:none}
.tl__ticks button[aria-current="true"]{color:var(--accent-ink)}
body[data-tone="screen"] .tl__ticks button[aria-current="true"]{color:#e2a73b}
.tl__bar{position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:var(--line)}
.tl__fill{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.tl__fill::after{content:"";position:absolute;right:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tl__tc{color:var(--fg-dim);font-variant-numeric:tabular-nums;letter-spacing:.14em}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 24px;border:1px solid var(--line-strong);border-radius:2px;font:600 12px/1 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;overflow:hidden;isolation:isolate;transition:color .35s,border-color .35s,transform .5s var(--ease-out)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease-out)}
.btn:hover{color:var(--bg);border-color:var(--fg)}
.btn:hover::before{transform:scaleX(1)}
.btn--solid{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn--solid::before{background:var(--fg)}
.btn--solid:hover{color:var(--bg)}
.btn--xl{height:64px;padding:0 32px;font-size:13px}
.btn__arr{width:22px;height:9px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cpath d='M0 4.5h20M16 .5l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cpath d='M0 4.5h20M16 .5l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center/contain;transition:transform .5s var(--ease-out)}
.btn:hover .btn__arr{transform:translateX(5px)}
.linklike{font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong);transition:text-decoration-color .3s,color .3s;text-align:left}
.linklike:hover{color:var(--accent-ink);text-decoration-color:currentColor}
.linklike em{font-style:normal;color:var(--accent-ink)}

/* ---------- Reveal system (rack-focus) ---------- */
.reveal{opacity:0;transform:translateY(28px) scale(.985);filter:blur(8px);transition:opacity 1.1s var(--ease-out),transform 1.3s var(--ease-out),filter 1.1s var(--ease-out);transition-delay:var(--d,0s)}
.reveal.is-in{opacity:1;transform:none;filter:blur(0)}
.w>i,.c>i{font-style:inherit}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.split .w>i{display:inline-block;font-style:inherit;transform:translateY(108%);transition:transform 1.1s var(--ease-out) calc(var(--i) * 45ms)}
.split.is-in .w>i{transform:none}
.split .c{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.split .c>i{display:inline-block;font-style:inherit;transform:translateY(112%);transition:transform 1.2s var(--ease-out) calc(var(--i) * 40ms)}
.split.is-in .c>i{transform:none}

/* Marmorten grade: warm monochrome print by default, "develops" to colour on hover */
.graded{filter:grayscale(1) sepia(.32) contrast(1.08) brightness(.92);transition:filter .9s var(--ease-out)}
.develop:hover .graded,.develop:focus-visible .graded,.develop.is-live .graded{filter:none}

/* ---------- Socials ---------- */
.socials{display:flex;flex-wrap:wrap;gap:10px}
.socials a{display:flex;flex-direction:column;gap:2px;min-width:132px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:2px;position:relative;overflow:hidden;isolation:isolate;transition:color .35s,border-color .35s}
.socials a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);transform:translateY(101%);transition:transform .5s var(--ease-out)}
.socials a:hover{color:var(--bg);border-color:var(--fg)}
.socials a:hover::before{transform:none}
.socials b{font:600 14px var(--f-display);letter-spacing:-.01em;display:flex;justify-content:space-between;gap:10px}
.socials b::after{content:"↗";font-weight:400;transition:transform .4s var(--ease-out)}
.socials a:hover b::after{transform:translate(2px,-2px)}
.socials small{font:500 10px var(--f-mono);letter-spacing:.08em;opacity:.65;text-transform:none}

.toast{position:fixed;left:50%;bottom:calc(var(--tl-h) + 18px);transform:translate(-50%,20px);z-index:2100;padding:12px 18px;background:var(--fg);color:var(--bg);border-radius:2px;opacity:0;pointer-events:none;transition:opacity .35s,transform .5s var(--ease-out);max-width:min(92vw,520px);text-align:center}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* Lenis + scroll lock */
body.is-locked{overflow:hidden}

/* ---------- Responsive HUD ---------- */
@media (max-width:1180px){.hud__plain{display:none}.hbtn--theme .hbtn__txt{display:none}.hbtn--theme{padding:0 10px}}
@media (max-width:1000px){.hud__scene{display:none}.hbtn--menu{display:inline-flex}.hud__cta{display:none}}
@media (max-width:700px){
  :root{--hud-h:58px;--tl-h:42px}
  .hud__name{font-size:13px}
  .hbtn--snd{display:none}
  .tl{gap:12px}
  .tl__ticks{display:flex}
  .tl__ticks li{flex:0 0 auto}
  .tl__ticks li:has(button[aria-current="true"]){flex:1 1 auto;min-width:0}
  .tl__ticks button b{opacity:.7}
  .tl__ticks button span{display:none}
  .tl__ticks button[aria-current="true"] span{display:block}
  .tl__ticks button{padding:0 9px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .split .w>i,.split .c>i{transform:none;transition:none}
}

/* theme change = an iris opening from the button (View Transitions) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}
body.menu-open .hud{z-index:1700;background:none;color:var(--fg)}
body.menu-open .tl{opacity:0;pointer-events:none}