/* AyP Sound — site.css Tokens, self-hosted fonts, flat layout for every section (works without JS and in the lite/still tiers), the work player, legal pages and the consent notice. All 3D / scroll-linked rules live in scenes.css. */ /* ---------- Fonts (self-hosted, OFL; no Google requests) ---------- */ @font-face{font-family:"Space Grotesk";src:url("/assets/fonts/space-grotesk-var.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap} @font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-italic-var.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap} @font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap} /* metric-matched local fallbacks keep layout shift low while the web fonts swap in */ @font-face{font-family:"SG Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");size-adjust:104%;ascent-override:94%;descent-override:28%;line-gap-override:0%} @font-face{font-family:"Fr Fallback";src:local("Georgia Italic"),local("Georgia-Italic"),local("Times New Roman Italic");font-style:italic;size-adjust:102%;ascent-override:96%;descent-override:25%;line-gap-override:0%} @font-face{font-family:"JB Fallback";src:local("Menlo"),local("Consolas"),local("Courier New");size-adjust:100%;ascent-override:102%;descent-override:30%} /* ---------- Palette (pink = default; classic = today's brand) ---------- */ :root, html[data-palette="pink"]{ --bg:#07060A; --bg-2:#0F0B12; --glass:rgba(255,236,246,.04); --line:rgba(255,228,242,.10); --text:#F6EEF3; --muted:#B39CAA; --faint:#8A7582; --label:var(--faint); --accent:#FF4FA3; --accent-rgb:255 79 163; --accent-hi:#FFC2E0; --accent-lo:#9E1257; --italic:#FFC2E0; --glow:rgba(255,79,163,.42); --card:#FF4FA3; --on-card:#16040E; --theme:#07060A; --bg-rgb:7 6 10; --bg2-rgb:15 11 18; --soft:#E2D3DC; --line-2:rgba(255,228,242,.18); } html[data-palette="classic"]{ --bg:#070B10; --bg-2:#0A111A; --glass:rgba(237,242,247,.04); --line:rgba(237,242,247,.09); --text:#EDF2F7; --muted:#91A3B4; --faint:#5F7484; --label:var(--muted); --accent:#C4D2E5; --accent-rgb:196 210 229; --accent-hi:#F4F7FB; --accent-lo:#5F7484; --italic:#D5B1B2; --glow:rgba(196,210,229,.30); --card:#EDDADB; --on-card:#070B10; --theme:#070B10; --bg-rgb:7 11 16; --bg2-rgb:10 17 26; --soft:#C9D4E0; --line-2:rgba(237,242,247,.16); } :root{ --f-sans:"Space Grotesk","SG Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --f-serif:"Fraunces","Fr Fallback",Georgia,"Times New Roman",serif; --f-mono:"JetBrains Mono","JB Fallback",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --pad:clamp(16px,4vw,48px); --maxw:1320px; --r:14px; --hdr:64px; --ease:cubic-bezier(.22,.8,.24,1); --spring:cubic-bezier(.34,1.56,.64,1); } /* ---------- Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);color-scheme:dark} body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.55 var(--f-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip} @media (max-width:767px){body{font-size:16px}} img,video,canvas,svg{display:block;max-width:100%} a{color:inherit} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} p{margin:0 0 1em} h1,h2,h3{margin:0;font-weight:500} ul,ol{margin:0;padding:0} [hidden]{display:none !important} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} .card :focus-visible{outline-color:var(--on-card);outline-offset:3px} /* the pink ring vanishes on the pink card */ ::selection{background:rgb(var(--accent-rgb) / .35);color:var(--text)} .sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--text);color:var(--bg);padding:10px 14px;border-radius:10px;font-weight:500;text-decoration:none} .skip:focus{left:12px} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .mono{font-family:var(--f-mono);font-feature-settings:"zero" 0} .label{font:500 11.5px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label);margin:0 0 18px;display:flex;align-items:center;gap:10px} .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--glow),0 0 2px var(--accent);flex:none} .pill{display:inline-flex;align-items:center;gap:10px;font:500 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label);padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--glass);margin:0 0 26px} time,.tnum{font-variant-numeric:tabular-nums} /* Headlines: the grotesk is the machine, the italic serif is the ear */ .h1{font:500 clamp(2.6rem,4.75vw,4.9rem)/.98 var(--f-sans);letter-spacing:-.035em;color:var(--text);margin:0 0 26px} .h1 .ln{display:block} .h2{font:500 clamp(2rem,4.4vw,3.8rem)/1.02 var(--f-sans);letter-spacing:-.03em;color:var(--text);margin:0 0 20px;text-wrap:balance} .h1 em,.h2 em,.statement-text em,.brand-sound,.card-sig em,.clip-verb,.insp-verb{font-family:var(--f-serif);font-style:italic;font-weight:340;letter-spacing:-.01em;color:var(--italic);text-shadow:0 0 40px var(--glow)} .h1 em,.h2 em{font-size:1.04em} .intro{font-size:clamp(17px,1.35vw,19px);color:var(--soft);max-width:62ch;margin:0 0 14px} .sub{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--soft);max-width:34em;margin:0 0 4px} .fine{font:500 11px/1.5 var(--f-mono);letter-spacing:.08em;color:var(--label);margin:14px 0 0} .h-mini{font:500 11.5px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label);margin:0 0 6px} /* ---------- Buttons + chips ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 22px;border-radius:999px;font:500 16px/1 var(--f-sans);letter-spacing:-.005em;text-decoration:none;border:1px solid transparent;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s,border-color .2s,color .2s;white-space:nowrap;-webkit-tap-highlight-color:transparent} .btn-sm{min-height:38px;padding:0 16px;font-size:14px} .btn-lg{min-height:54px;padding:0 26px;font-size:17px} .btn-block{display:flex;width:100%} .btn-accent{background:var(--card);color:var(--on-card);box-shadow:0 10px 34px -10px var(--glow),inset 0 1px 0 rgba(255,255,255,.35)} .btn-accent:hover{transform:translateY(-1px);box-shadow:0 14px 44px -10px var(--glow),inset 0 1px 0 rgba(255,255,255,.45)} .btn-ghost{background:var(--glass);border-color:var(--line-2);color:var(--text)} .btn-ghost:hover{border-color:rgb(var(--accent-rgb) / .6);color:var(--text)} .btn-dark{background:var(--on-card);color:var(--card)} .btn-dark:hover{transform:translateY(-1px);box-shadow:0 12px 30px -12px rgba(0,0,0,.6)} .chip{display:inline-flex;align-items:center;gap:6px;font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;border:1px solid var(--line-2);background:rgb(var(--bg-rgb) / .62);color:var(--text);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .chipbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);color:var(--text);font:500 11.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase} .chipbtn:hover,.chipbtn[aria-pressed="true"]{border-color:rgb(var(--accent-rgb) / .7);background:rgb(var(--accent-rgb) / .14)} /* ---------- Header ---------- */ .site-header{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap} .brand{display:inline-flex;align-items:center;min-height:44px;gap:.22em;text-decoration:none;color:var(--text);font:600 21px/1 var(--f-sans);letter-spacing:-.02em} .brand-sound{font-size:1.08em;font-weight:380} .site-header--home{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--hdr);padding:0 var(--pad);padding-top:env(safe-area-inset-top);flex-wrap:nowrap;justify-content:space-between;transition:background-color .25s,border-color .25s,-webkit-backdrop-filter .25s,backdrop-filter .25s;border-bottom:1px solid transparent} .site-header--home.is-scrolled{background:rgb(var(--bg-rgb) / .82);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:var(--line)} .nav-links{display:flex;gap:4px;list-style:none} .nav-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;font-size:15px;color:var(--muted);text-decoration:none;position:relative;border-radius:8px} .nav-links a:hover{color:var(--text)} .nav-links a.is-active{color:var(--text)} .nav-links a.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--accent);box-shadow:0 0 10px var(--glow)} .nav-right{display:flex;align-items:center;gap:14px} .clock{display:inline-flex;align-items:center;gap:7px;font:500 11.5px/1 var(--f-mono);letter-spacing:.08em;color:var(--label);padding:8px 11px;border:1px solid var(--line);border-radius:999px;white-space:nowrap} .clock-dot{width:6px;height:6px;border-radius:50%;background:var(--faint);display:inline-block} .clock.is-open .clock-dot{background:var(--accent);box-shadow:0 0 8px var(--glow)} .menu-btn{display:none;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);font-size:12px;letter-spacing:.08em;text-transform:uppercase} @media (max-width:1023px){.site-header--home .clock{display:none}.nav-links a{padding:0 9px;font-size:14px}} @media (max-width:860px){.site-header--home .nav-cta{min-height:44px}.site-header--home .nav{display:none}.menu-btn{display:inline-flex;align-items:center}.nav-right{gap:8px}.site-header--home .clock{display:none}} .menu-sheet{position:fixed;inset:0;z-index:55;background:rgb(var(--bg-rgb) / .97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:calc(var(--hdr) + 28px) var(--pad) calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:22px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .menu-sheet ul{list-style:none;display:flex;flex-direction:column;gap:4px} .menu-sheet ul a{display:block;font:500 clamp(30px,8vw,44px)/1.15 var(--f-sans);letter-spacing:-.03em;text-decoration:none;padding:6px 0} .menu-sheet .menu-clock{align-self:flex-start;margin:auto 0 0} html.menu-open{overflow:hidden} /* ---------- Hero ---------- */ .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--hdr) + clamp(28px,6vh,72px)) 0 clamp(48px,8vh,96px);overflow:hidden;isolation:isolate} .hero-bg{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;-webkit-mask:linear-gradient(180deg,#000 70%,transparent);mask:linear-gradient(180deg,#000 70%,transparent)} .hero-glow{position:absolute;inset:0;background:radial-gradient(60% 55% at 60% 45%,rgb(var(--accent-rgb) / .16),transparent 70%),radial-gradient(40% 40% at 10% 70%,rgb(var(--accent-rgb) / .07),transparent 70%)} .hero-bg .ltx-layer{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;opacity:.3;mix-blend-mode:screen;transform:scale(1.1)} html[data-palette="classic"] .hero-bg .ltx-layer.is-pink{filter:hue-rotate(-115deg) saturate(.55)} .ribbon{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none} .ribbon--hero{-webkit-mask:linear-gradient(180deg,#000 82%,transparent);mask:linear-gradient(180deg,#000 82%,transparent)} .hero-grid{max-width:1600px;display:grid;grid-template-columns:minmax(0,5.5fr) minmax(0,6.5fr);grid-template-areas:"head stage" "cta stage";column-gap:clamp(32px,4.5vw,80px);row-gap:30px;align-items:center;position:relative;z-index:1} .hero-head{grid-area:head;align-self:end} .hero-cta{grid-area:cta;align-self:start} .hero-stage{grid-area:stage;align-self:center;min-width:0} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center} @media (max-width:1023px), (max-width:1180px) and (max-aspect-ratio:4/5){ .hero{align-items:flex-start} .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "cta";row-gap:26px} .h1{font-size:clamp(2.6rem,9vw,5.2rem)} } @media (max-width:767px){ .h1{font-size:clamp(40px,11vw,48px);margin-bottom:18px} html.js .hero-head .h1{margin-bottom:50px} /* the ribbon's fan runs in this gap, under the descenders of "by ear" */ .pill{margin-bottom:18px;font-size:10.5px} .hero-actions{flex-direction:column;align-items:stretch} .hero-actions .btn{width:100%} .hero-stage{margin-inline:calc(var(--pad) * -1 + 12px)} } /* ---------- Player ---------- */ .player{position:relative;min-width:0} .pl-label{font:500 11px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--label);margin:0 0 10px;display:flex;align-items:center;gap:10px} .pl-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--glow)} .pl-frame{position:relative;border-radius:18px;padding:10px;background:linear-gradient(180deg,rgb(var(--bg2-rgb) / .94),rgb(var(--bg-rgb) / .94));border:1px solid var(--line-2);box-shadow:0 50px 120px -50px var(--glow),0 30px 60px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06)} .pl-frame::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.10),transparent 30%,transparent 70%,rgb(var(--accent-rgb) / .18));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px} .player.is-playing .pl-frame{box-shadow:0 50px 140px -40px var(--glow),0 0 0 1px rgb(var(--accent-rgb) / .35),0 30px 60px -30px rgba(0,0,0,.8)} .pl-stage{position:relative;width:100%;aspect-ratio:16/9;container-type:inline-size;border-radius:11px;overflow:hidden;background:#000;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:pointer;-webkit-tap-highlight-color:transparent} .pl-stage video,.pl-stage .pl-freeze,.pl-stage .pl-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000} .pl-stage .pl-freeze{opacity:0;pointer-events:none;transition:opacity .12s linear} .pl-stage video.is-spare{z-index:-1;pointer-events:none} .pl-screen{display:contents} .pl-stage .pl-freeze.is-on{opacity:1;transition:none} .pl-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgb(var(--accent-rgb) / .9),transparent);opacity:.75;pointer-events:none} .pl-sweep{position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent 0,var(--accent-hi) calc(var(--x,50%) - 1px),var(--accent-hi) calc(var(--x,50%) + 1px),transparent 100%);box-shadow:0 0 14px var(--accent)} .pl-sweep.go{animation:sweep .3s var(--ease)} @keyframes sweep{0%{opacity:1;clip-path:inset(0 calc(100% - var(--x,50%)) 0 var(--x,50%))}100%{opacity:0;clip-path:inset(0 0 0 0)}} .pl-chip{position:absolute;top:12px;z-index:3;pointer-events:none} .pl-chip--tag{left:12px} .pl-chip--lang{right:12px} .pl-chip--tag.is-client{background:rgb(var(--accent-rgb) / .18);border-color:rgb(var(--accent-rgb) / .55)} .pl-chip--tag.is-dim{opacity:.7} .pl-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;display:inline-flex;align-items:center;gap:14px;padding:0 24px 0 0;height:72px;border-radius:999px;border:1px solid rgb(var(--accent-rgb) / .45);background:rgb(var(--bg-rgb) / .55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--text);font:500 17px/1 var(--f-sans);box-shadow:0 20px 60px -20px var(--glow);transition:transform .25s var(--ease),background-color .2s} .pl-big .disc{width:72px;height:72px;margin:-1px 0 -1px -1px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--on-card);box-shadow:0 0 30px var(--glow)} .pl-big .disc svg{width:24px;height:24px;margin-left:3px} .pl-big:hover{transform:translate(-50%,-50%) scale(1.03)} .pl-big>span:last-child{white-space:nowrap} @container (max-width:520px){.pl-big{height:54px;gap:10px;padding-right:18px;font-size:15px}.pl-big .disc{width:54px;height:54px}.pl-big .disc svg{width:20px;height:20px}} @container (max-width:300px){.pl-big>span:last-child{display:none}.pl-big{padding:0;gap:0}} .pl-toast{position:absolute;left:12px;top:46px;z-index:3;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none} .pl-toast.is-on{opacity:1;transform:none} .pl-ring{position:absolute;inset:0;z-index:3;display:grid;place-items:center;align-content:center;gap:12px;pointer-events:none;opacity:0;transition:opacity .2s} .pl-ring.is-on{opacity:1} .pl-ring i{width:44px;height:44px;border-radius:50%;border:2px solid rgb(var(--accent-rgb) / .2);border-top-color:var(--accent);animation:spin .8s linear infinite} .pl-ring span{font:500 11px/1 var(--f-mono);letter-spacing:.08em;color:var(--text);text-transform:uppercase;background:rgb(var(--bg-rgb) / .6);padding:6px 9px;border-radius:999px} @keyframes spin{to{transform:rotate(360deg)}} .pl-jog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;font:500 clamp(28px,4vw,52px)/1 var(--f-mono);letter-spacing:-.02em;color:var(--text);text-shadow:0 0 30px var(--glow);padding:12px 18px;border-radius:14px;background:rgb(var(--bg-rgb) / .55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .15s;font-variant-numeric:tabular-nums} .pl-jog.is-on{opacity:1} .pl-overlay{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;text-align:center;background:rgb(var(--bg-rgb) / .78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .pl-overlay p{margin:0;color:var(--soft);font-size:15px} .pl-overlay .ov-flags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .pl-overlay .ov-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} .pl-inprod{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px} .pl-inprod b{font:500 clamp(18px,2vw,24px)/1.2 var(--f-sans);color:var(--text)} .pl-inprod span{font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)} .player.is-inprod .pl-stage video{opacity:.4} .player.is-inprod .pl-bar,.player.is-inprod .pl-flagrow,.player.is-inprod .pl-hint{visibility:hidden} .pl-bar{display:flex;align-items:center;gap:6px;padding:8px 2px 0;min-height:52px} .pl-btn{flex:none;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;border:0;background:transparent;color:var(--text);transition:background-color .15s} .pl-btn:hover{background:var(--glass)} .pl-btn svg{width:20px;height:20px} .pl-btn--play{background:rgb(var(--accent-rgb) / .14);color:var(--text)} .pl-btn--play:hover{background:rgb(var(--accent-rgb) / .24)} .pl-time{flex:none;font:500 12.5px/1 var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums;padding:0 6px;white-space:nowrap} .pl-time b{color:var(--text);font-weight:500} .pl-scrub{position:relative;flex:1 1 auto;min-width:80px;height:44px;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent} .pl-scrub .tr{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden;transition:height .15s,margin-top .15s} .pl-scrub .bf{position:absolute;inset:0 auto 0 0;width:var(--buf,0%);background:rgba(255,255,255,.2)} .pl-scrub .pd{position:absolute;inset:0 auto 0 0;width:var(--played,0%);background:var(--accent);box-shadow:0 0 12px var(--glow)} .pl-scrub .th{position:absolute;top:50%;left:var(--played,0%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--accent-hi);box-shadow:0 0 0 4px rgb(var(--accent-rgb) / .3),0 0 16px var(--glow);opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s} .pl-scrub:hover .tr,.pl-scrub.is-drag .tr,.pl-scrub:focus-visible .tr{height:10px;margin-top:-5px} .pl-scrub:hover .th,.pl-scrub.is-drag .th,.pl-scrub:focus-visible .th{opacity:1;transform:none} .pl-scrub:focus-visible{outline-offset:-2px;border-radius:8px} .pl-scrub .tip{position:absolute;bottom:100%;left:var(--tipx,0);transform:translateX(-50%);font:500 11px/1 var(--f-mono);padding:5px 7px;border-radius:6px;background:var(--text);color:var(--bg);opacity:0;pointer-events:none;white-space:nowrap;font-variant-numeric:tabular-nums} .pl-scrub:hover .tip{opacity:1} @media (pointer:coarse){.pl-scrub .th{opacity:1;transform:none}.pl-scrub .tip{display:none}.pl-scrub{margin-inline:10px}} /* deep link ("You were sent: …"): one flat pill, text and Play side by side (wraps cleanly on phones) */ .pl-deeppill{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;width:fit-content;max-width:100%;margin:0 0 14px;padding:6px 6px 6px 16px;border-radius:999px;border:1px solid rgb(var(--accent-rgb) / .45);background:rgb(var(--accent-rgb) / .1)} .pl-deeppill[hidden]{display:none} .pl-deeppill .mono{font-size:12px;letter-spacing:.04em;line-height:1.35;color:var(--text)} .pl-deeppill .btn{flex:none} @media (max-width:767px){.pl-deeppill{border-radius:18px;padding:8px 8px 8px 14px}.pl-deeppill .mono{flex:1 1 60%}} .pl-vol{flex:none;width:76px;accent-color:var(--accent)} .pl-copy{flex:none;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:transparent;font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .pl-copy:hover{color:var(--text);border-color:rgb(var(--accent-rgb) / .6)} @media (max-width:767px){.pl-vol,.pl-copy{display:none}.pl-time{font-size:11.5px;padding:0 2px}} @media (pointer:coarse){.pl-vol{display:none}} .pl-hint{font:500 11px/1.5 var(--f-mono);letter-spacing:.06em;color:var(--label);margin:12px 4px 0} .pl-flagrow{display:flex;align-items:center;gap:12px;padding:10px 2px 2px;min-width:0} .player--hero .pl-flags-label{display:none} .player--hero .flag{padding:0 10px} .pl-flags-label{flex:none;font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;color:var(--label)} .pl-flags{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0;padding:4px 2px 6px;scroll-snap-type:x proximity;-webkit-mask:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 18px),transparent);mask:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 18px),transparent)} .pl-flags::-webkit-scrollbar{display:none} .flag{flex:none;position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 12px;border-radius:11px;border:1px solid var(--line-2);background:rgb(var(--bg2-rgb) / .92);color:var(--text);text-decoration:none;scroll-snap-align:center;transition:transform .2s var(--ease),border-color .2s,background-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent} .flag-img{position:relative;flex:none;width:20px;height:14px;border-radius:2px;overflow:hidden;filter:saturate(.7);transition:filter .2s} .flag-img img{width:100%;height:100%;object-fit:cover} .flag-img::after{content:"";position:absolute;inset:0;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)} .flag-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1} .flag-code{font:700 13px/1 var(--f-mono);letter-spacing:.04em} .flag-orig{font:500 7.5px/1 var(--f-mono);letter-spacing:.1em;color:var(--muted);margin-top:3px} .flag-name{display:none;font:500 13px/1 var(--f-sans);color:var(--text)} .flag:hover{transform:translateY(-2px);border-color:rgb(var(--accent-rgb) / .5)} .flag:hover .flag-img{filter:none} .flag[aria-checked="true"]{border-color:var(--accent);background:rgb(var(--accent-rgb) / .18);box-shadow:0 0 18px rgb(var(--accent-rgb) / .45)} .flag[aria-checked="true"] .flag-img{filter:none} .flag.is-lift{transform:translateY(-4px)} .flag[aria-disabled="true"]{opacity:.4} @media (min-width:1024px){.flag[aria-checked="true"] .flag-name{display:inline}} /* touch tablets: the hero's seven flags must all fit (each strand of the ribbon ends on one) */ html[data-tier="touch3d"] .player--hero .flag[aria-checked="true"] .flag-name{display:none} @media (max-width:1279px){.player--hero .flag[aria-checked="true"] .flag-name{display:none}.player--hero .flag{padding:0 8px}.player--hero .pl-flags{gap:5px}} @media (min-width:768px) and (max-width:1120px){.player--hero .flag{padding:0 6px;gap:6px}.player--hero .pl-flags{gap:4px}} .pl-note{font-size:12.5px;line-height:1.5;color:var(--muted);margin:12px 4px 0;max-width:70ch} .player--hero .pl-note{margin-top:14px} /* hero >= 768 px: the picture + controls are the glass panel (it tilts, scenes.css); the flag row sits flat under it with a lane gap, so the ribbon's strands run in the gap and land on each flag (a glowing end dot per flag) */ @media (min-width:768px){ .player--hero .pl-frame{display:flex;flex-direction:column;padding:0;background:none;border:0;border-radius:0;box-shadow:none} .player--hero .pl-frame::before{display:none} .player--hero .pl-screen{display:block;position:relative;border-radius:18px;padding:10px;background:linear-gradient(180deg,rgb(var(--bg2-rgb) / .94),rgb(var(--bg-rgb) / .94));border:1px solid var(--line-2);box-shadow:0 50px 120px -50px var(--glow),0 30px 60px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06)} .player--hero.is-playing .pl-screen{box-shadow:0 50px 140px -40px var(--glow),0 0 0 1px rgb(var(--accent-rgb) / .35),0 30px 60px -30px rgba(0,0,0,.8)} .player--hero.is-playing .pl-frame{box-shadow:none} .player--hero .pl-flagrow{margin-top:38px;padding:0} .player--hero .pl-flags{padding-top:6px} .player--hero .pl-hint{order:3;margin:8px 4px 0} .hero-stage.has-ends .player--hero .flag::before{content:"";position:absolute;left:50%;top:-4px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--accent-hi);box-shadow:0 0 0 2px rgb(var(--accent-rgb) / .35),0 0 10px var(--accent);opacity:.75;transition:opacity .2s,transform .2s;pointer-events:none} .hero-stage.has-ends .player--hero .flag[aria-checked="true"]::before,.hero-stage.has-ends .player--hero .flag:hover::before{opacity:1;transform:scale(1.25)} } .pl-cap{padding:18px 4px 0;display:grid;gap:6px} .pl-cap h3{font:500 clamp(22px,2vw,28px)/1.15 var(--f-sans);letter-spacing:-.02em} .pl-cap .blurb{margin:0;color:var(--soft);max-width:64ch} .pl-cap .note{margin:0;font-size:12.5px;color:var(--muted);max-width:70ch} .pl-cap .loud{margin:6px 0 0;font:500 10.5px/1.4 var(--f-mono);letter-spacing:.1em;color:var(--label)} /* fullscreen: the wrapper (flags + controls come along) */ .pl-frame:fullscreen{display:flex;flex-direction:column;justify-content:center;padding:0;border:0;border-radius:0;background:#000} .pl-frame:-webkit-full-screen{display:flex;flex-direction:column;justify-content:center;padding:0;border:0;border-radius:0;background:#000;width:100%;height:100%} .pl-frame:fullscreen .pl-stage{flex:1;aspect-ratio:auto !important;border-radius:0} .pl-frame:-webkit-full-screen .pl-stage{flex:1;aspect-ratio:auto !important;border-radius:0} .pl-frame:fullscreen .pl-bar,.pl-frame:fullscreen .pl-flagrow,.pl-frame:fullscreen .pl-hint{position:absolute;left:0;right:0;z-index:7;padding-inline:20px;background:linear-gradient(transparent,rgba(0,0,0,.7));transition:opacity .3s} .pl-frame:-webkit-full-screen .pl-bar,.pl-frame:-webkit-full-screen .pl-flagrow{position:absolute;left:0;right:0;z-index:7;padding-inline:20px;background:linear-gradient(transparent,rgba(0,0,0,.7));transition:opacity .3s} .pl-frame:fullscreen .pl-bar{bottom:64px} .pl-frame:fullscreen .pl-flagrow{bottom:8px} .pl-frame:fullscreen .pl-hint{display:none} .pl-frame:fullscreen .pl-screen,.pl-frame:-webkit-full-screen .pl-screen{display:contents !important;transform:none !important} .pl-frame:fullscreen .flag::before,.pl-frame:-webkit-full-screen .flag::before{display:none} .pl-frame:-webkit-full-screen .pl-bar{bottom:64px} .pl-frame:-webkit-full-screen .pl-flagrow{bottom:8px} .pl-frame.is-idle .pl-bar,.pl-frame.is-idle .pl-flagrow{opacity:0} .pl-frame.is-idle{cursor:none} /* shelf (work mode) */ .work-body{display:grid;grid-template-columns:minmax(0,1fr);gap:22px} .pl-main{min-width:0} .pl-frame,.pl-flagrow{min-width:0;max-width:100%} .shelf{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:14px 2px 18px;perspective:900px} .shelf::-webkit-scrollbar{display:none} .slate{flex:none;scroll-snap-align:center;width:200px;text-align:left;border-radius:14px;padding:8px 8px 12px;background:var(--glass);border:1px solid var(--line);color:var(--text);display:flex;flex-direction:column;gap:8px;transition:transform .35s var(--ease),opacity .3s,border-color .2s,background-color .2s;-webkit-tap-highlight-color:transparent} .slate:hover{border-color:var(--line-2)} .slate[aria-current="true"]{border-color:rgb(var(--accent-rgb) / .7);background:rgb(var(--accent-rgb) / .08);box-shadow:0 18px 50px -24px var(--glow)} .slate-img{position:relative;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#000} .slate-img img{width:100%;height:100%;object-fit:cover} .slate.is-inprod .slate-img img{opacity:.4} .slate-img .inprod{position:absolute;inset:auto 6px 6px 6px;font:500 9.5px/1.3 var(--f-mono);letter-spacing:.06em;color:var(--text)} .slate-title{font:500 16px/1.2 var(--f-sans);letter-spacing:-.01em;padding:0 2px} .slate-meta{display:flex;flex-wrap:wrap;gap:5px;padding:0 2px} .slate-meta .chip{font-size:9.5px;padding:4px 7px;background:transparent} .slate-meta .chip.is-client{background:rgb(var(--accent-rgb) / .18);border-color:rgb(var(--accent-rgb) / .5)} .slate-meta .chip.is-dim{opacity:.6} .slate-codes{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.08em;color:var(--muted);padding:0 2px} .slate-aud{font:500 9.5px/1.3 var(--f-mono);letter-spacing:.08em;color:var(--label);padding:0 2px} @media (max-width:767px){.slate{width:150px}.slate-title{font-size:14px}} /* ---------- Sections (generic) ---------- */ .sec{position:relative;padding:clamp(80px,12vh,140px) 0} @media (max-width:767px){.sec{padding:64px 0}.chapters{gap:72px}} .sec-head{margin-bottom:clamp(28px,4vh,48px)} .disclosure{font-size:14px;color:var(--muted);max-width:62ch;margin:0} /* ---------- WHO: the room (flat) ---------- */ .who-head{margin-bottom:34px} .room{position:relative;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .room-floor{display:none;position:relative} .room-svg{width:100%;height:100%;overflow:visible} .room-svg .ring{fill:none;stroke:var(--line-2);stroke-width:1} .room-svg .ring-2{stroke:rgb(var(--accent-rgb) / .35);stroke-dasharray:2 6} .room-svg .axis{stroke:var(--line);stroke-width:1} .room-svg .spk circle{fill:var(--bg-2);stroke:var(--line-2);stroke-width:1.2;transition:fill .3s,stroke .3s} .room-svg .spk text,.room-svg .listener text{font:500 11px var(--f-mono);fill:var(--label);text-anchor:middle;letter-spacing:.06em} .room-svg .spk.is-lit circle{fill:var(--accent);stroke:var(--accent-hi);filter:drop-shadow(0 0 8px var(--accent))} .room-svg .spk.is-lit text{fill:var(--text)} .room-svg .listener path,.room-svg .listener circle{fill:none;stroke:var(--soft);stroke-width:1.2} .room-svg .beam{stroke:var(--accent);stroke-width:1.5;opacity:.0;transition:opacity .3s} .room.has-beam .room-svg .beam{opacity:.6} .voice-dot{position:absolute;left:var(--x);top:var(--y);width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:0;padding:0;background:var(--accent);box-shadow:0 0 0 6px rgb(var(--accent-rgb) / .22),0 0 24px var(--accent),0 0 60px var(--glow);touch-action:none;cursor:grab;z-index:3} .voice-dot:active{cursor:grabbing} .voice-dot::before{content:"";position:absolute;inset:-12px;border-radius:50%} .voice-dot.is-glide{transition:left .45s var(--ease),top .45s var(--ease)} .tiles{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px} .tile{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;padding:18px 18px 16px;border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid var(--line);text-decoration:none;color:var(--text);transition:transform .35s var(--ease),border-color .25s,background-color .25s,opacity .3s,box-shadow .3s} .tile:hover,.tile-li.is-lit .tile{border-color:rgb(var(--accent-rgb) / .55);box-shadow:0 20px 60px -30px var(--glow)} .tile-spk{position:absolute;top:14px;right:16px;font-size:11px;letter-spacing:.06em;color:var(--label);padding:4px 7px;border:1px solid var(--line);border-radius:6px} .tile-li.is-lit .tile-spk{color:var(--on-card);background:var(--accent);border-color:var(--accent)} .tile-name{font:500 21px/1.15 var(--f-sans);letter-spacing:-.02em;padding-right:44px} .tile-line{font-size:15px;line-height:1.45;color:var(--soft)} .tile-eg{font-size:13.5px;line-height:1.45;color:var(--muted)} .tile-eg .mono{font-size:10.5px;letter-spacing:.1em;color:var(--label);margin-right:4px} .tile-link{margin-top:auto;font:500 14px/1 var(--f-sans);color:var(--accent-hi)} .mini-room{display:none;position:absolute;right:14px;bottom:14px;width:32px;height:32px} .room-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:22px} .room-readout{font:500 11.5px/1 var(--f-mono);letter-spacing:.08em;color:var(--text);margin:0;padding:8px 12px;border-radius:999px;border:1px solid var(--line);display:none;white-space:pre} .room-readout b{font-weight:500;color:var(--accent-hi)} .room-caption{font:500 11px/1.5 var(--f-mono);letter-spacing:.06em;color:var(--label);margin:0;max-width:62ch} /* the caption names the drag only where there is a voice dot to drag (phones get the mini-room icons instead) */ .room-caption .rc-lite{display:none} html[data-tier="lite"] .room-caption .rc-full{display:none} html[data-tier="lite"] .room-caption .rc-lite{display:inline} html[data-tier="full"]:not(.pin) .room-caption{display:none} .room-sound{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden} .seg button{min-height:36px;padding:0 12px;border:0;background:transparent;font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .seg button[aria-pressed="true"]{background:rgb(var(--accent-rgb) / .18);color:var(--text)} .room-sound .hint{font-size:11px;color:var(--label)} /* tiers with JS: show the floor (still = top view, flat; lite = mini icons only) */ html[data-tier="still"] .room-floor{display:block;width:min(340px,80vw);aspect-ratio:1;margin:0 auto 28px} html[data-tier="still"] .room-readout{display:inline-block} html[data-tier="lite"] .mini-room{display:block} html[data-tier="lite"] .voice-dot{display:none} html[data-tier="lite"] .tile-name{padding-right:56px} @media (min-width:768px) and (max-width:1023px){html[data-tier="touch3d"] .room-floor{display:block;width:min(360px,70vw);aspect-ratio:1;margin:0 auto 28px}html[data-tier="touch3d"] .room-readout{display:inline-block}} /* ---------- FOR: the rail (flat / stacked) ---------- */ .rail .stage{position:relative} .rail-view,.rail-ticks,.rail-mini{display:none} .chapters{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);display:grid;gap:clamp(80px,12vh,140px)} .chapter{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;scroll-margin-top:calc(var(--hdr) + 16px)} @media (min-width:1024px){ .chapter{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"text panel";column-gap:clamp(36px,5vw,80px);align-items:start} .chapter>.panel{grid-area:panel;position:sticky;top:calc(var(--hdr) + 32px)} .chapter>.ch-text{grid-area:text} } .ch-text p{color:var(--soft)} .ch-text .h2{font-size:clamp(1.9rem,3.4vw,3.1rem)} .lead{font-size:clamp(18px,1.5vw,21px);color:var(--text) !important;margin-bottom:20px} .ch-block{margin:0 0 16px} .ch-block p{margin:0;max-width:60ch} .getback{list-style:none;display:grid;gap:6px} .getback li{position:relative;padding-left:20px;color:var(--soft)} .getback li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:2px;background:var(--accent);box-shadow:0 0 6px var(--glow)} .ch-agency{font-size:15px} .ch-agency b{color:var(--text);font-weight:500} .proof{margin:20px 0 4px;padding:14px 0 0;border-top:1px solid var(--line)} .proof .label{margin-bottom:10px} .proof-btns{display:flex;flex-wrap:wrap;gap:8px} .proofbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 6px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);font:500 15px/1 var(--f-sans);color:var(--text);transition:border-color .2s,background-color .2s,transform .2s var(--ease)} .proofbtn i{font-style:normal;color:var(--muted);font-size:13.5px} .proofbtn .pb-t{text-align:left;line-height:1.3;padding:6px 0} .proofbtn .pb-play{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgb(var(--accent-rgb) / .2);color:var(--accent-hi);font-size:11px} .proofbtn:hover{border-color:rgb(var(--accent-rgb) / .65);transform:translateY(-1px)} .proofbtn:hover .pb-play{background:var(--accent);color:var(--on-card)} .compare-link{display:inline-block;margin-top:12px;font-size:15px;color:var(--accent-hi)} .ch-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .reply-line{margin:12px 0 0;font-size:14px;color:var(--accent-hi) !important} .note-mono{font:500 11px/1.5 var(--f-mono);letter-spacing:.08em;color:var(--label) !important;margin:6px 0 10px} .proof-line{font-size:15px;color:var(--text) !important} .proof-cap{font-size:14px;margin:0 0 6px} .credit{font:500 10.5px/1.5 var(--f-mono);letter-spacing:.04em;color:var(--label) !important;margin:0} @media (max-width:767px){.ch-actions .btn{flex:1 1 100%}} /* phones: collapsed chapters (rail.js adds .ch-one, .ch-toggle, .ch-more) */ .ch-one,.ch-toggle{display:none} html.phone .ch-one{display:block;font-size:17px;line-height:1.45;color:var(--text) !important;margin:0 0 10px} html.phone .ch-toggle{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;margin:2px 0 6px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-hi)} html.phone .ch-toggle::after{content:"↓";margin-left:8px} html.phone .chapter:not(.is-collapsed) .ch-toggle::after{content:"↑"} html.phone .chapter.is-collapsed .ch-more{display:none} html.phone .ch-more{margin-top:8px} /* phones: the line sheet shows 3 rows (EN + JA in view, the rest scrolls sideways); the storyboard stays compact */ html.phone .linesheet .ls-row:nth-child(n+5){display:none} html.phone .linesheet .ls-row{padding:6px 8px} html.phone .story{padding:12px;gap:10px} html.phone .st-layer{padding:10px} html.phone .st-title{font-size:14.5px} html.phone .st-list{font-size:12.5px} /* ---------- Panels (glass frames for live UI) ---------- */ .panel{min-width:0} .panel-frame{position:relative;border-radius:var(--r);padding:8px;background:linear-gradient(180deg,rgb(var(--bg2-rgb) / .9),rgb(var(--bg-rgb) / .9));border:1px solid var(--line-2);box-shadow:0 40px 100px -50px var(--glow),0 24px 50px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07)} .panel-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 18%)} .panel-screen{position:relative;border-radius:9px;overflow:hidden;background:#05040A} .panel--media .panel-screen{aspect-ratio:16/9} .panel-screen>video,.panel-screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .panel-cap{font:500 10.5px/1.5 var(--f-mono);letter-spacing:.08em;color:var(--label);margin:12px 4px 0} .loop-play{position:absolute;right:10px;bottom:10px;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:rgb(var(--bg-rgb) / .7);color:var(--text);display:grid;place-items:center;font-size:12px} .float-chips{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;z-index:4} .fchip{min-height:44px;min-width:48px;padding:0 12px;border-radius:10px;border:1px solid rgb(var(--accent-rgb) / .6);background:rgb(var(--bg-rgb) / .78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;font-weight:700;letter-spacing:.06em;box-shadow:0 10px 30px -10px var(--glow)} .fchip:hover{background:var(--accent);color:var(--on-card)} .fchip-line{width:46px;height:1px;background:linear-gradient(90deg,var(--accent),var(--accent-hi),var(--accent));box-shadow:0 0 8px var(--accent)} .stem-chips{position:absolute;right:16px;top:16px;display:flex;flex-direction:column;gap:6px;z-index:4} .stem-chips span{font-size:10.5px;letter-spacing:.08em;padding:6px 9px;border-radius:7px;border:1px solid var(--line-2);background:rgb(var(--bg-rgb) / .8);color:var(--muted);transition:all .3s} .stem-chips span.is-on{color:var(--on-card);background:var(--accent);border-color:var(--accent);box-shadow:0 0 18px var(--glow)} /* DOM replica of the Honda lanes (fallback for missing loops) */ .lanes{position:absolute;inset:0;display:flex;flex-direction:column;padding:12px 14px;gap:6px;background:radial-gradient(80% 60% at 70% 0%,rgb(var(--accent-rgb) / .08),transparent),#06050A} .lanes-title{font:500 10px/1 var(--f-mono);letter-spacing:.1em;color:var(--muted);display:flex;justify-content:space-between;padding-bottom:6px;border-bottom:1px solid var(--line)} .lanes-rows{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-evenly} .lane-row{display:flex;align-items:center;gap:8px;height:14%} .lane-row img{width:16px;height:11px;border-radius:2px;flex:none} .lane-row .lc{font:600 9px/1 var(--f-mono);color:var(--muted);width:16px} .lane-row .clips-r{position:relative;flex:1;height:100%} .lane-row .clips-r i{position:absolute;top:12%;bottom:12%;border-radius:4px;background:rgb(var(--accent-rgb) / var(--a,.35));border:1px solid rgb(var(--accent-rgb) / .6)} .lane-row:first-child .clips-r i{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)} .lanes-ph{position:absolute;top:0;bottom:0;left:calc(32px + (100% - 32px) * var(--ph,0));width:2px;background:var(--accent-hi);box-shadow:0 0 12px var(--accent)} .lanes.is-anim .lanes-ph{animation:lanesph 12s linear infinite} @keyframes lanesph{from{left:32px}to{left:100%}} /* mocks */ .mock{padding:16px;font-size:13px} .linesheet{display:flex;flex-direction:column;gap:2px;overflow-x:auto} .ls-row{display:grid;grid-template-columns:72px minmax(150px,1.6fr) repeat(3,minmax(70px,1fr)) 30px;align-items:center;gap:10px;padding:8px 8px;border-radius:8px;transition:background-color .2s;min-width:520px} .ls-head{font:500 10px/1 var(--f-mono);letter-spacing:.1em;color:var(--label);padding-bottom:10px;border-bottom:1px solid var(--line);border-radius:0} .ls-row>span{position:relative;display:flex;flex-direction:column;gap:4px;font:500 11px/1.2 var(--f-mono);color:var(--muted)} .ls-row>span:first-child{color:var(--label)} .ls-row .ls-en{font:500 13px/1.25 var(--f-sans);color:var(--text)} .ls-row .bar{display:block;height:6px;border-radius:3px;width:calc(var(--w) / 1.5 * 100%);background:rgb(var(--accent-rgb) / .55);transition:width .35s var(--ease)} .ls-row .ls-en .bar{background:rgba(255,255,255,.4)} .ls-row b{font-weight:500;font-size:10px;color:var(--label)} .ls-row .fit{color:var(--accent-hi);font-size:14px;align-items:center} .ls-row:not(.ls-head):hover,.ls-row:not(.ls-head):focus-visible,.ls-row.is-lit{background:rgb(var(--accent-rgb) / .1)} .ls-row:not(.ls-head):hover .bar,.ls-row:not(.ls-head):focus-visible .bar,.ls-row.is-lit .bar{width:calc(var(--en) / 1.5 * 100%)} .mock-foot{font:500 10px/1.4 var(--f-mono);letter-spacing:.1em;color:var(--label);margin:12px 0 0} .brief{display:grid;gap:12px;padding:20px} .brief p{margin:0} .brief-head{font:500 11px/1 var(--f-mono);letter-spacing:.1em;color:var(--label)} .brief-voice{font:500 15px/1 var(--f-mono);letter-spacing:.06em;color:var(--text)} .brief-ctl{display:grid;grid-template-columns:minmax(120px,auto) 1fr 64px;align-items:center;gap:12px} .brief-ctl label{font-size:14px;color:var(--soft)} .brief-ctl output{font-size:12px;color:var(--accent-hi);text-align:right;font-variant-numeric:tabular-nums} .brief input[type=range]{width:100%;accent-color:var(--accent);min-height:32px} .brief-track{position:relative;height:58px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--line);overflow:hidden} .bt-ruler{position:absolute;inset:0 0 auto 0;height:12px;border-bottom:1px solid var(--line);background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 5%)} .bt-words{position:absolute;inset:16px 6px 8px 6px} .bt-words i{position:absolute;top:0;bottom:0;border-radius:4px;background:rgb(var(--accent-rgb) / .38);border:1px solid rgb(var(--accent-rgb) / .7);transition:left .35s var(--ease),width .35s var(--ease)} .brief-text{font-size:13.5px;color:var(--soft)} .story{position:relative;padding:18px;display:grid;gap:14px} .st-layer{border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.025);padding:14px} .st-tag{font:500 10px/1 var(--f-mono);letter-spacing:.12em;color:var(--label);margin:0 0 10px} .st-title{font:500 16px/1.3 var(--f-sans);color:var(--text);margin:0 0 8px} .st-list{list-style:none;display:grid;gap:4px;font-size:13.5px;color:var(--soft)} .st-list li,.st-title{border-radius:5px;transition:background-color .2s,color .2s;cursor:default} .st-list li.is-lit,.st-title.is-lit{background:rgb(var(--accent-rgb) / .16);color:var(--text)} .st-frames{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .st-frame{margin:0;display:grid;gap:6px} .st-frame figcaption{font-size:10px;letter-spacing:.1em;color:var(--label)} .st-frame.is-lit .sf{border-color:var(--accent);box-shadow:0 0 20px -4px var(--glow)} .sf{position:relative;aspect-ratio:16/10;border-radius:7px;border:1px solid var(--line-2);background:linear-gradient(180deg,#140d18,#09070c);overflow:hidden;transition:border-color .2s,box-shadow .2s} .sf i{position:absolute;display:block;background:rgb(var(--accent-rgb) / .55)} .sf-crane i:nth-child(1){left:30%;bottom:18%;width:5%;height:62%} .sf-crane i:nth-child(2){left:18%;top:20%;width:62%;height:5%} .sf-crane i:nth-child(3){left:72%;top:25%;width:2%;height:30%;background:var(--accent-hi)} .sf-ferry i:nth-child(1){left:0;right:0;bottom:0;height:24%;background:rgb(var(--accent-rgb) / .2)} .sf-ferry i:nth-child(2){left:22%;bottom:22%;width:56%;height:14%;border-radius:0 0 30% 30%} .sf-ferry i:nth-child(3){left:38%;bottom:36%;width:22%;height:12%;background:var(--accent-hi)} .sf-roof i:nth-child(1){left:0;right:0;bottom:0;height:34%;clip-path:polygon(0 40%,20% 0,40% 40%,60% 10%,80% 40%,100% 20%,100% 100%,0 100%)} .sf-roof i:nth-child(2){left:62%;top:16%;width:12%;height:18%;border-radius:50%;background:var(--accent-hi)} .sf-roof i:nth-child(3){left:0;right:0;top:52%;height:1px;background:rgb(var(--accent-rgb) / .4)} .st-film-screen{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000} .st-film-screen video,.st-film-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .st-sound{margin-top:10px;min-height:44px} /* lit in step with the film (hover uses .is-lit) */ .st-list li.is-on,.st-title.is-on{background:rgb(var(--accent-rgb) / .1);color:var(--text)} .st-frame.is-on .sf{border-color:rgb(var(--accent-rgb) / .8);box-shadow:0 0 16px -4px var(--glow)} /* ---------- "issue → film": the example issue as a short film, drawn in HTML/CSS (rail.js harbourFilm) ---------- */ .hf{position:absolute;inset:0;overflow:hidden;container-type:inline-size;background:radial-gradient(120% 90% at 70% 0%,#2a1024 0%,#120814 45%,#07050a 100%);font-family:var(--f-sans)} html[data-palette="classic"] .hf{background:radial-gradient(120% 90% at 70% 0%,#17263a 0%,#0c1420 45%,#05080d 100%)} .hf i,.hf b{position:absolute;display:block} .hf-sc{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .55s ease,transform 3.6s cubic-bezier(.3,.6,.3,1)} .hf.on-0 .hf-s0,.hf.on-1 .hf-s1,.hf.on-2 .hf-s2,.hf.on-3 .hf-s3{opacity:1;transform:scale(1)} /* title card */ .hf-s0{display:flex;flex-direction:column;justify-content:center;padding:0 9cqw} .hf-kick{margin:0 0 2.2cqw;font:500 2.1cqw/1 var(--f-mono);letter-spacing:.14em;color:var(--accent)} .hf-h{margin:0;font-size:5.6cqw;line-height:1.12;font-weight:500;color:var(--text);max-width:24ch} .hf-h em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--italic)} /* shared scenery */ .hf-sky{inset:0;background:linear-gradient(180deg,#1b0b1a 0%,#3a1430 52%,#5c1d44 66%,#0d070d 66.5%)} html[data-palette="classic"] .hf-sky{background:linear-gradient(180deg,#0b1522 0%,#1c2c42 52%,#33475f 66%,#070b10 66.5%)} .hf-water{left:0;right:0;bottom:0;height:34%;background:repeating-linear-gradient(180deg,rgb(var(--accent-rgb) / .14) 0 1px,transparent 1px 7px),linear-gradient(180deg,#120812,#07050a);opacity:.9} .hf.is-run .hf-water{animation:hf-ripple 3s linear infinite} @keyframes hf-ripple{to{background-position:0 14px,0 0}} /* 1 · cranes */ .hf-bridge{right:-6%;bottom:34%;width:52%;height:22%;border:.5cqw solid #2b1028;border-bottom:0;border-radius:60% 60% 0 0 / 100% 100% 0 0;opacity:.9} .hf-tower{left:30%;bottom:34%;width:2.2%;height:52%;background:#0c050b;box-shadow:0 0 0 1px rgb(var(--accent-rgb) / .15)} .hf-jib{left:17%;top:13%;width:58%;height:2.2%;background:#0c050b} .hf-cjib{left:24%;top:9%;width:13%;height:5%;background:#0c050b;clip-path:polygon(0 100%,100% 100%,60% 0)} .hf-cable{left:66%;top:15%;width:.35%;height:30%;background:rgb(var(--accent-rgb) / .55);transform-origin:50% 0} .hf-cable b{left:-250%;bottom:-6%;width:600%;height:7%;background:var(--accent-hi);border-radius:2px;box-shadow:0 0 10px var(--accent)} .hf.is-run .hf-cable{animation:hf-sway 3.2s ease-in-out infinite alternate} @keyframes hf-sway{from{transform:rotate(3deg)}to{transform:rotate(-3deg)}} .hf-boxes{left:36%;bottom:34%;width:22%;height:9%;background:linear-gradient(90deg,#3a1430 0 30%,transparent 30% 34%,#561c43 34% 64%,transparent 64% 68%,#2b1028 68%)} .hf-tag{right:6%;top:9%;font:500 2cqw/1 var(--f-mono);letter-spacing:.12em;color:var(--accent-hi);padding:.8cqw 1.2cqw;border:1px solid rgb(var(--accent-rgb) / .5);border-radius:.8cqw;background:rgb(var(--bg-rgb) / .5)} /* 2 · ferry */ .hf-sun{left:62%;top:44%;width:13%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--accent-hi),var(--accent) 60%,transparent 72%);opacity:.85} .hf-ferry{left:6%;bottom:29%;width:34%;height:15%;transition:left 3.2s linear} .hf-hull{left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,var(--accent) 0 7%,#2a1026 7%);clip-path:polygon(0 0,100% 0,93% 100%,6% 100%)} .hf-cab{left:18%;bottom:44%;width:52%;height:42%;background:#2a1026;border-radius:.6cqw .6cqw 0 0;box-shadow:0 -.3cqw 0 rgb(var(--accent-rgb) / .5)} .hf-win{left:22%;bottom:58%;width:44%;height:12%;background:repeating-linear-gradient(90deg,var(--accent-hi) 0 9%,transparent 9% 16%);filter:drop-shadow(0 0 4px var(--accent))} .hf-wake{left:0;bottom:27%;width:48%;height:2%;background:linear-gradient(90deg,transparent,rgb(var(--accent-rgb) / .5));border-radius:2px;transition:width 3.2s linear} .hf.on-2.is-run .hf-ferry{left:46%} .hf.on-2.is-run .hf-wake{width:86%} .hf-clock{right:6%;top:9%;font:500 2.4cqw/1 var(--f-mono);letter-spacing:.1em;color:var(--accent-hi);padding:.8cqw 1.2cqw;border:1px solid rgb(var(--accent-rgb) / .5);border-radius:.8cqw;background:rgb(var(--bg-rgb) / .5)} /* 3 · the roof */ .hf-moon{left:66%;top:14%;width:12%;aspect-ratio:1;border-radius:50%;background:var(--accent-hi);box-shadow:0 0 40px 6px var(--glow)} .hf-city{left:0;right:0;bottom:33%;height:26%;background:#120812;clip-path:polygon(0 60%,8% 60%,8% 30%,15% 30%,15% 55%,24% 55%,24% 18%,28% 18%,28% 50%,40% 50%,40% 36%,52% 36%,52% 62%,62% 62%,62% 24%,70% 24%,70% 58%,82% 58%,82% 40%,92% 40%,92% 64%,100% 64%,100% 100%,0 100%)} .hf-market{left:18%;bottom:33%;width:40%;height:13%;background:#1d0b1b;clip-path:polygon(0 100%,0 40%,12.5% 0,25% 40%,37.5% 0,50% 40%,62.5% 0,75% 40%,87.5% 0,100% 40%,100% 100%);box-shadow:inset 0 2px 0 rgb(var(--accent-rgb) / .6)} /* subtitle, narration meter, progress */ .hf-sub{position:absolute;left:6%;right:6%;bottom:12%;margin:0;text-align:center;font-size:3.6cqw;line-height:1.25;font-weight:500;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8)} .hf-sub span{display:inline-block;opacity:0;transform:translateY(.6cqw)} .hf-sub.on span{opacity:1;transform:none;transition:opacity .25s ease calc(.25s + var(--k) * 110ms),transform .25s ease calc(.25s + var(--k) * 110ms)} .hf-vo{position:absolute;left:3.5%;top:7%;margin:0;display:flex;align-items:center;gap:1cqw;font:500 1.8cqw/1 var(--f-mono);letter-spacing:.12em;color:var(--muted);padding:.8cqw 1.2cqw;border-radius:99px;background:rgb(var(--bg-rgb) / .55);border:1px solid var(--line-2)} .hf-bars{position:relative;display:flex;align-items:center;gap:.35cqw;height:2.4cqw} .hf-bars i{position:relative;width:.45cqw;height:30%;background:var(--accent);border-radius:1px;transition:height .2s} .hf.is-talk .hf-bars i{animation:hf-vu .7s ease-in-out infinite alternate} .hf.is-talk .hf-bars i:nth-child(2n){animation-duration:.5s}.hf.is-talk .hf-bars i:nth-child(3n){animation-duration:.9s;animation-delay:-.3s} @keyframes hf-vu{from{height:20%}to{height:100%}} .hf-prog{position:absolute;left:3.5%;right:3.5%;bottom:4.5%;margin:0;display:flex;gap:.8cqw} .hf-prog i{position:relative;flex:1;height:.45cqw;min-height:2px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden} .hf-prog b{inset:0;width:0;background:var(--accent)} .hf-prog i.is-done b{width:100%} .hf.is-run .hf-prog i.is-cur b{animation:hf-fill var(--dur,3s) linear forwards} @keyframes hf-fill{from{width:0}to{width:100%}} html[data-tier="still"] .hf *{transition:none !important;animation:none !important} html[data-tier="still"] .hf-sc{transform:none} /* ---------- COMPARE ---------- */ .compare-grid{display:grid;gap:32px} @media (min-width:1024px){.compare-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:center}} .cmp-stage{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:radial-gradient(70% 60% at 50% 40%,rgb(var(--accent-rgb) / .14),transparent),#06050a;border:1px solid var(--line-2)} .cmp-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .06s linear} .cmp-now{position:absolute;left:12px;top:12px;z-index:4} .cmp-slot{position:absolute;right:12px;top:12px;left:50%;z-index:4;padding:10px 12px;border-radius:10px;border:1px dashed rgb(var(--accent-rgb) / .6);background:rgb(var(--bg-rgb) / .7);font-size:10.5px;letter-spacing:.06em;line-height:1.5;color:var(--accent-hi)} .cmp-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;font:500 11px/1.6 var(--f-mono);letter-spacing:.08em;color:var(--muted)} .cmp-controls{display:grid;gap:10px;justify-items:start;margin-top:20px} .cmp-controls p{margin:0} .switch-wrap{display:flex;align-items:center;gap:16px} .sw-label{font:500 12px/1 var(--f-mono);letter-spacing:.1em;color:var(--muted);transition:color .2s,text-shadow .2s} .sw-label.is-on{color:var(--text);text-shadow:0 0 18px var(--accent)} .switch{position:relative;width:min(320px,48vw);height:72px;border-radius:999px;border:1px solid var(--line-2);background:linear-gradient(180deg,#040306,#120d15);box-shadow:inset 0 6px 16px rgba(0,0,0,.7),inset 0 -1px 0 rgba(255,255,255,.06);padding:0;touch-action:none} .sw-track{position:absolute;inset:8px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgb(var(--accent-rgb) / .14));opacity:.8} .sw-handle{position:absolute;top:7px;left:7px;width:calc(50% - 7px);height:56px;border-radius:999px;background:linear-gradient(180deg,#f9eef4,#d7c3cf);box-shadow:0 10px 18px -6px rgba(0,0,0,.8),0 2px 0 rgba(255,255,255,.6) inset,0 0 0 1px rgba(0,0,0,.2);transition:transform .32s var(--spring),background .2s} .switch[aria-pressed="true"] .sw-handle{transform:translateX(100%);background:linear-gradient(180deg,var(--accent-hi),var(--accent));box-shadow:0 10px 24px -6px var(--glow),0 2px 0 rgba(255,255,255,.5) inset} .switch:active .sw-handle{transform:scale(.97)} .switch[aria-pressed="true"]:active .sw-handle{transform:translateX(100%) scale(.97)} .switch:disabled{cursor:not-allowed} .cmp-side{font:500 12px/1.5 var(--f-mono);letter-spacing:.06em;color:var(--text)} .cmp-same,.cmp-keys{font:500 10.5px/1.5 var(--f-mono);letter-spacing:.06em;color:var(--label)} @media (max-width:767px){.switch-wrap{width:100%}.switch{flex:1;height:56px}.sw-handle{height:42px}.cmp-keys{display:none}} /* ---------- WORK ---------- */ .work .house{position:absolute;inset:0;pointer-events:none;background:#000;opacity:0;z-index:0;-webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)} .work .wrap{position:relative;z-index:1} .work-list{list-style:none;display:grid;gap:8px;margin-top:18px;color:var(--soft);font-size:15px} .work-list a{font:600 12px var(--f-mono);margin-left:4px} .player--work .pl-frame{padding:12px} @media (min-width:1280px){ html[data-tier="full"] .work-body{grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:start;column-gap:28px} html[data-tier="full"] .shelf{flex-direction:column;overflow:visible;padding:0;perspective:1200px;scroll-snap-type:none} html[data-tier="full"] .slate{width:100%;flex:none;flex-direction:row;align-items:center;padding:8px} html[data-tier="full"] .shelf-count{margin-bottom:10px} html[data-tier="full"] .slate-img{width:44%;flex:none} html[data-tier="full"] .slate-body{display:flex;flex-direction:column;gap:6px;min-width:0} } .slate-body{display:flex;flex-direction:column;gap:7px} html.phone .work-body .shelf-wrap{order:-1} html.phone .work-body .shelf{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)} .shelf-wrap{min-width:0} .shelf-count{font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;color:var(--label);margin:0 2px 4px} /* >= 768: one flat row that fits all five slates (no film hidden off to the side) */ @media (min-width:768px){ .work-body .slate{flex:1 1 0;width:auto;min-width:136px} .slate-meta .chip{white-space:normal;line-height:1.3;text-align:left} } html.phone .player--work .pl-frame{margin-inline:calc(var(--pad) * -1 + 8px)} html[data-tier="still"]:not(.phone) .shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));overflow:visible} html[data-tier="still"]:not(.phone) .slate{width:auto} /* ---------- STATEMENT ---------- */ .statement{min-height:70vh;display:flex;align-items:center;overflow:hidden} .statement-text{position:relative;z-index:1;text-align:center;font:500 clamp(2.3rem,5.3vw,4.6rem)/1.06 var(--f-sans);letter-spacing:-.035em;color:var(--text);margin:0 auto;max-width:18em;text-wrap:balance} .statement-text em{font-size:1.05em} .statement-text .nw{white-space:nowrap} .statement-line{position:absolute;left:-10%;right:-10%;top:50%;height:2px;background:linear-gradient(90deg,transparent,rgb(var(--accent-rgb) / .1) 20%,var(--accent) 50%,rgb(var(--accent-rgb) / .1) 80%,transparent);box-shadow:0 0 30px var(--accent),0 0 80px var(--glow);opacity:.45;transform:translateY(60px) rotate(-3deg)} /* ---------- SHOWCASE: studio aisle + DAW wall (flat) ---------- */ .showcase .stage{position:relative} .show-view,.wall-view{display:none} .show-text{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .show-counter{display:none} .stops{list-style:none;display:grid;gap:clamp(40px,7vh,72px);margin:36px 0 28px} .stop{display:grid;gap:14px} .stop-tag{font:500 11.5px/1 var(--f-mono);letter-spacing:.1em;color:var(--accent-hi);margin:0} .stop-text{margin:0;color:var(--soft);font-size:17px;max-width:46ch} .stop .panel-frame{order:-1} @media (min-width:1024px){ .stops{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px} } .footnote,.pos-line{font:500 10.5px/1.6 var(--f-mono);letter-spacing:.08em;color:var(--label);max-width:80ch;margin:0 0 10px} .pos-line{color:var(--muted)} .wall-nav{display:none;gap:8px;margin:0 0 18px} html.phone .daw .stops{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 8px;scrollbar-width:none} html.phone .daw .stop{flex:none;width:85vw;scroll-snap-align:center} .dots{display:none;justify-content:center;gap:8px;margin-top:6px} html.phone .daw .dots{display:flex} .dots i{width:6px;height:6px;border-radius:50%;background:var(--line-2)} .dots i.is-on{background:var(--accent)} .inspect-x{position:fixed;top:calc(env(safe-area-inset-top) + 14px);right:14px;z-index:90;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);background:rgb(var(--bg-rgb) / .8);font-size:20px} .inspect-scrim{position:fixed;inset:0;z-index:80;background:rgb(var(--bg-rgb) / .9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;padding:20px} .inspect-scrim .panel-frame{width:90vw;max-width:1400px} /* ---------- HOW ---------- */ .how-head{margin-bottom:36px} .lane{border-radius:var(--r);border:1px solid var(--line-2);background:linear-gradient(180deg,rgb(var(--bg2-rgb) / .9),rgb(var(--bg-rgb) / .9));overflow:hidden} .lane-head{font:500 11px/1 var(--f-mono);letter-spacing:.1em;color:var(--label);padding:14px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)} .lane-body{position:relative;padding:16px} .clips{list-style:none;display:grid;gap:12px} .clip{position:relative;padding:16px 18px;border-radius:11px;border:1px solid rgb(var(--accent-rgb) / .55);background:rgb(var(--accent-rgb) / .12);font-size:16px;line-height:1.5;color:var(--soft);overflow:hidden} .clip::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;background:repeating-linear-gradient(90deg,transparent 0 3px,rgb(var(--accent-rgb) / .25) 3px 4px);-webkit-mask:radial-gradient(120% 50% at 50% 50%,#000 30%,transparent 72%);mask:radial-gradient(120% 50% at 50% 50%,#000 30%,transparent 72%)} .clip>*{position:relative} .clip-n{font-size:12px;color:var(--label);letter-spacing:.08em} .clip-verb{font-size:1.5em;margin-right:4px} .playhead{display:none} .inspector{display:none} .how-line{margin:22px 0 0;font-size:18px;color:var(--text)} /* ---------- ABOUT ---------- */ .about-grid{display:grid;gap:36px} @media (min-width:860px){.about-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);grid-template-areas:"img text" "facts facts";align-items:center;column-gap:clamp(36px,5vw,80px)}.about-card{grid-area:img}.about-text{grid-area:text}.facts-row{grid-area:facts}} .about-card{margin:0} .about-img{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);background:radial-gradient(80% 70% at 30% 20%,rgb(var(--accent-rgb) / .18),transparent 60%),var(--bg-2);box-shadow:0 40px 100px -50px var(--glow)} .about-img img{width:100%;height:100%;object-fit:cover} .about-img .facts-big{position:absolute;inset:0;display:grid;align-content:center;gap:16px;padding:clamp(20px,4vw,40px)} .facts-big div{display:grid;gap:4px} .facts-big dt{font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;color:var(--label)} .facts-big dd{margin:0;font:500 clamp(20px,2.4vw,30px)/1.1 var(--f-sans);letter-spacing:-.02em;color:var(--text)} .about-cap{font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;color:var(--label);margin-top:12px} .about-text p{color:var(--soft);max-width:54ch} .about-text .h2+p{color:var(--text);font-size:clamp(18px,1.5vw,21px)} .facts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:1px;margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--line)} .facts-row>div{background:var(--bg);padding:16px 18px;display:grid;gap:6px} .facts-row dt{font-size:10.5px;letter-spacing:.12em;color:var(--label)} .facts-row dd{margin:0;font-size:13px;letter-spacing:.06em;color:var(--text)} /* ---------- CALL: the card ---------- */ .call{padding-bottom:clamp(80px,12vh,140px);overflow:hidden;isolation:isolate} .call .ribbon{z-index:-1} .call-bg{position:absolute;inset:0;z-index:-2;pointer-events:none} .call-bg video,.call-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.25;mix-blend-mode:screen} .card{position:relative;max-width:1100px;margin:0 auto;border-radius:28px;background:var(--card);color:var(--on-card);padding:clamp(28px,5vw,72px);box-shadow:0 60px 140px -50px var(--glow),inset 0 1px 0 rgba(255,255,255,.4);overflow:hidden} .card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(500px circle at var(--mx,70%) var(--my,0%),rgba(255,255,255,.18),transparent 60%)} .card>*{position:relative} .card-label{font:500 11.5px/1 var(--f-mono);letter-spacing:.12em;color:var(--on-card);opacity:.7;margin:0 0 22px} .card-h2{color:var(--on-card);font-size:clamp(2.1rem,4.8vw,4.4rem);max-width:15em} .card-h2 em{color:var(--on-card);text-shadow:none} .card-body{font-size:clamp(17px,1.4vw,20px);max-width:44ch;color:var(--on-card);opacity:.88} .card-sig{margin:0 0 26px} .card-sig em{font-size:34px;color:var(--on-card);text-shadow:none} .card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px} .card-mail{display:inline-flex;align-items:center;min-height:44px;color:var(--on-card);font-weight:500;text-underline-offset:.2em} .card .reply-line{color:var(--on-card) !important;opacity:.85} @media (max-width:767px){.card{border-radius:22px;margin-inline:calc(var(--pad) * -1 + 8px)}.card-actions .btn{width:100%}} /* ---------- FOOTER (home + legal pages) ---------- */ .site-footer{color:var(--muted);font-size:14px} .site-footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px} .site-footer a{color:var(--muted);text-decoration:none} .site-footer a:hover{color:var(--text)} .site-footer--home{border-top:1px solid var(--line);padding:44px var(--pad) calc(36px + env(safe-area-inset-bottom));max-width:none} .foot-grid{max-width:var(--maxw);margin:0 auto;display:grid;gap:28px} @media (min-width:860px){.foot-grid{grid-template-columns:1.2fr 1.6fr 1fr;align-items:start}} .foot-brand p{margin:8px 0 0} .foot-brand .say{font-size:13px;color:var(--label)} .site-footer--home nav ul{display:grid;grid-template-columns:repeat(2,max-content);gap:8px 32px} .foot-mail{font-size:16px;color:var(--text) !important} .palette-switch{display:none;align-items:center;gap:6px;margin-top:14px} html[data-palette-used] .palette-switch{display:flex} .palette-switch .mono{font-size:10.5px;letter-spacing:.12em;color:var(--label);margin-right:4px} .palette-switch button{min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:transparent;font-size:13px;color:var(--muted)} .palette-switch button[aria-pressed="true"]{color:var(--text);border-color:var(--accent);background:rgb(var(--accent-rgb) / .14)} .legal-id,.copy{max-width:var(--maxw);margin:22px auto 0;font-size:12.5px;line-height:1.55;color:var(--label)} .copy{margin-top:8px;max-width:var(--maxw)} /* ---------- Consent notice ---------- */ .consent{position:fixed;left:16px;bottom:16px;z-index:70;width:min(420px,calc(100vw - 32px));padding:18px 18px 16px;border-radius:16px;border:1px solid var(--line-2);background:rgb(var(--bg2-rgb) / .96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--text);box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.3);font:400 14.5px/1.5 var(--f-sans)} .consent p{margin:0 0 12px;color:var(--soft)} .consent-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px} .consent-btns button{min-height:44px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);color:var(--text);font:500 15px/1 var(--f-sans)} .consent-btns button:hover{border-color:var(--accent)} .consent a{color:var(--text);text-underline-offset:.2em;font-size:13px} .consent-foot{margin-top:10px;display:flex;justify-content:space-between;align-items:center} @media (prefers-reduced-motion:no-preference){.consent{animation:consentIn .35s var(--ease)}} @keyframes consentIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* >= 1024 px: slim full-width bar (<= 64 px), text left, Allow / No thanks right */ @media (min-width:1024px){ .consent.consent--bar{left:0;right:0;bottom:0;width:auto;max-width:none;min-height:0;display:flex;align-items:center;gap:24px;padding:10px var(--pad);border-radius:0;border-width:1px 0 0;box-shadow:0 -20px 60px -30px rgba(0,0,0,.9);font-size:13.5px} .consent--bar p{flex:1 1 auto;margin:0;line-height:1.35;max-width:none} .consent--bar a{font-size:inherit} .consent--bar .consent-btns{flex:none;display:flex;gap:8px} .consent--bar .consent-btns button{min-height:44px;padding:0 22px;font-size:14px} } @media (max-width:767px){.consent{left:0;right:0;bottom:0;width:auto;border-radius:16px 16px 0 0;padding:14px 16px calc(12px + env(safe-area-inset-bottom));max-height:150px;font-size:13.5px}.consent p{margin-bottom:10px;line-height:1.4}.consent-foot{display:none}.consent-btns button{min-height:44px}} /* ---------- Legal pages (privacy.html / terms.html) ---------- */ /* They use the home page's fixed header + footer (.site-header--home / .site-footer--home). The old plain header/footer rules below only apply if a page still carries the old markup. */ body.legal-page{background:radial-gradient(70rem 26rem at 88% -6rem,rgb(var(--accent-rgb) / .10),transparent 70%) no-repeat,var(--bg);color:var(--soft);font:400 17px/1.65 var(--f-sans)} body.legal-page .site-header:not(.site-header--home),body.legal-page .site-footer:not(.site-footer--home),body.legal-page .legal{max-width:46rem;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem} body.legal-page .site-header:not(.site-header--home){justify-content:space-between;padding-top:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)} body.legal-page .site-header:not(.site-header--home) .brand{font:600 20px/1 var(--f-sans);color:var(--text)} body.legal-page .site-header:not(.site-header--home) ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem} body.legal-page .site-header:not(.site-header--home) a:not(.brand){color:var(--muted);text-decoration:none;font-size:.92rem} body.legal-page .site-header:not(.site-header--home) a[aria-current="page"]{color:var(--text)} .site-header--home{max-width:none;margin:0} .site-footer a[aria-current="page"]{color:var(--text)} .legal a{color:var(--text);text-decoration-color:var(--accent);text-underline-offset:.2em} .legal a:hover{color:var(--accent-hi)} .legal{padding-top:2.5rem;padding-bottom:3rem} .site-header--home ~ .legal{padding-top:calc(var(--hdr) + 2.75rem)} .legal .eyebrow{font:500 11.5px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 .75rem} .legal h1{font:500 clamp(2.2rem,6vw,3.4rem)/1.05 var(--f-sans);letter-spacing:-.03em;color:var(--text);margin:0 0 .6rem} .legal h2{font:500 1.4rem/1.25 var(--f-sans);letter-spacing:-.015em;color:var(--text);margin:2.75rem 0 .75rem;scroll-margin-top:calc(var(--hdr) + 1rem)} .legal h3{font:500 1.08rem/1.3 var(--f-sans);color:var(--text);margin:1.75rem 0 .5rem} .legal p,.legal ul,.legal ol,.legal dl{margin:0 0 1rem} .legal ul,.legal ol{padding-left:1.3rem} .legal li{margin:.3rem 0} .legal .updated{color:var(--label);font:400 .85rem/1.5 var(--f-mono);margin-bottom:2rem} .legal .summary{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:1.1rem 1.3rem;margin:1.5rem 0 2rem} .legal .summary h2{margin-top:0;font-size:1.08rem} .legal .summary ul{margin:0} .legal .toc{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1rem 0;margin:0 0 1rem} .legal .toc ol{margin:0;padding-left:1.3rem;columns:2 14rem;column-gap:2rem;font-size:.95rem} .legal .toc li{margin:0 0 .3rem;break-inside:avoid} .legal .facts{display:grid;grid-template-columns:max-content 1fr;gap:.4rem 1.25rem} .legal .facts dt{color:var(--muted)} .legal .facts dd{margin:0;color:var(--text)} .legal .table-wrap{overflow-x:auto;margin:0 0 1rem;border:1px solid var(--line);border-radius:10px} .legal table{border-collapse:collapse;width:100%;font-size:.93rem} .legal th,.legal td{text-align:left;vertical-align:top;padding:.6rem .75rem;border-bottom:1px solid var(--line)} .legal tr:last-child td{border-bottom:0} .legal th{color:var(--text);font-weight:500;background:rgba(255,255,255,.02)} .legal code{font:.88em var(--f-mono);color:var(--text)} body.legal-page .site-footer:not(.site-footer--home){border-top:1px solid var(--line);padding-top:1.5rem;padding-bottom:2.5rem;color:var(--label);font-size:.88rem} body.legal-page .site-footer:not(.site-footer--home) p{margin:.75rem 0 0} @media (max-width:30rem){.legal .facts{grid-template-columns:1fr}.legal .facts dd{margin-bottom:.5rem}} /* ---------- 404 ---------- */ .nf{min-height:calc(100vh - 220px);min-height:calc(100svh - 220px);display:flex;align-items:center;position:relative;overflow:hidden;isolation:isolate;padding:calc(var(--hdr) + 40px) 0 60px} .nf .h1{margin-bottom:18px} .nf p{color:var(--soft);font-size:19px;margin-bottom:28px} /* ---------- reduced motion: instant everything ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .pl-stage .pl-freeze{transition:opacity .12s linear !important} } html[data-tier="still"] .lanes.is-anim .lanes-ph{animation:none} /* the DAW captures are dark grey: lift them a little so the UI reads */ #daw .panel-screen video,#daw .panel-screen img{filter:brightness(1.15) contrast(1.08)} /* ---------- no-JS fallback videos (index.html) ---------- The static