/* Marek Baláž 10.2 — Vesmír. A black sky; figures made of small points stand beside the text and fall apart
   into stars between sections. Big condensed capitals, the first line only outlined. Kodex family palette and fonts. */

@font-face{font-family:'Big Shoulders';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/big-shoulders-latin-ext.woff2) format('woff2');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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Big Shoulders';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/big-shoulders-latin.woff2) format('woff2');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:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/public-sans-latin-ext.woff2) format('woff2');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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/public-sans-latin.woff2) format('woff2');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}

:root{
 --night:#050608;--panel:#0C1013;--line:#232B30;
 --ink:#F1F2EF;--muted:#A9B3AE;--faint:#5E6763;
 --green:#3DDC84;--blue:#85BCEB;--lead:#3DDC84;
 --r:6px;--b-h:44px;--pad:20px;--backdrop:rgba(0,0,0,.72);--t2:32px;
 --display:'Big Shoulders','Arial Narrow',sans-serif;
 --text:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
 color-scheme:dark;
}
@media(min-width:768px){:root{--pad:40px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--night);color:var(--ink);font:17px/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,figure,blockquote,dl,dd,ol{margin:0}
ol{padding:0;list-style:none}
h1,h2{font-family:var(--display);font-weight:800;letter-spacing:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--green);color:var(--night)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:50;padding:10px 14px;background:var(--ink);color:var(--night);border-radius:var(--r)}
.skip:focus{left:8px}

/* Space: a faint haze, and the particle canvas behind everything. */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(70vmax 55vmax at 0% 0%,rgba(133,188,235,.11),transparent 70%),radial-gradient(60vmax 45vmax at 100% 100%,rgba(61,220,132,.06),transparent 70%)}
#cosmos{position:fixed;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,.marquee,.bigname,.foot{position:relative;z-index:1}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--b-h);padding:0 22px;border:1px solid rgba(241,242,239,.28);border-radius:999px;background:none;color:var(--ink);font:700 16px/1 var(--text);text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--night)}
.btn.primary:hover{background:#fff}
.btn.cta{min-height:54px;padding:0 30px;background:var(--green);border-color:var(--green);color:var(--night)}
.btn.cta:hover{background:#5BE69A;border-color:#5BE69A}
.arr{width:18px;height:18px;transition:transform .2s}
.btn:hover .arr{transform:translate(2px,-2px)}
.textbtn{padding:0;border:0;background:none;color:var(--ink);font-family:var(--text);font-size:inherit;font-weight:600;line-height:inherit;text-decoration:underline;text-decoration-color:var(--faint);text-decoration-thickness:1px;text-underline-offset:5px;cursor:pointer}
.textbtn:hover{text-decoration-color:var(--green)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:var(--r);background:none;color:var(--ink);cursor:pointer}
.icon-btn svg,.menu-btn svg{width:20px;height:20px}
.logo{display:inline-flex;align-items:center;gap:12px;font:800 19px/1 var(--text);text-decoration:none;white-space:nowrap}
.logo-mark{width:36px;height:auto;color:var(--ink)}

/* Header */
.top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 clamp(20px,5vw,88px);border-bottom:1px solid transparent;transition:background .35s,border-color .35s}
.top.solid{background:rgba(5,6,8,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.progress{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left}
.menu-btn{display:none}
#nav{display:flex;gap:32px}
#nav a{font-size:15px;font-weight:600;color:var(--muted);text-decoration:none;transition:color .2s}
#nav a:hover,#nav a[aria-current]{color:var(--ink)}
#nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:6px}

/* Scenes: one screen each, text on one side, the particle figure on the other. */
.scene{display:flex;align-items:center;min-height:100vh;min-height:100svh;padding:104px clamp(20px,5vw,88px) 72px}
.scene-in{width:min(48vw,680px)}
.scene[data-side=left] .scene-in{margin-left:auto}
.scene.wide .scene-in{width:100%;max-width:1240px;margin:0 auto}
.title{font-size:clamp(64px,7.4vw,136px);line-height:.88;text-transform:uppercase}
.title.mid{font-size:clamp(52px,5.8vw,104px)}
.title .ln{display:block}
.outline{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.kicker{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:22px;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero-clock::before,.live::before{content:'';display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--green);vertical-align:1px}
.blue .live::before{background:var(--blue)}
.sub{max-width:30em;margin-top:26px;font-size:19px;line-height:1.5;color:var(--muted)}
.sub b{color:var(--ink);font-weight:700}
.claim{margin-top:20px;font:800 clamp(24px,2.2vw,34px)/1.1 var(--display);text-transform:uppercase;color:var(--green)}
.blue .claim{color:var(--blue)}
.scroll-cue{display:inline-flex;align-items:center;gap:14px;margin-top:44px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.scroll-cue i{position:relative;display:block;width:56px;height:1px;background:rgba(241,242,239,.2);overflow:hidden}
.scroll-cue i::after{content:'';position:absolute;inset:0;background:var(--ink);transform:translateX(-100%);animation:cue 2.4s cubic-bezier(.6,0,.2,1) infinite}
@keyframes cue{50%{transform:none}100%{transform:translateX(100%)}}

/* The one sentence in the middle of empty space. */
.statement{justify-content:center;text-align:center}
.statement h2{max-width:19em;font-size:clamp(30px,3.9vw,66px);line-height:1.06;text-transform:uppercase;text-wrap:balance}

/* About */
.avatar{width:84px;height:84px;margin-bottom:26px;border-radius:50%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.05);border:1px solid rgba(241,242,239,.3)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:40px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.stats li{padding-top:16px}
.stats b{display:block;font:800 clamp(52px,4.8vw,80px)/.9 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:var(--muted)}

/* Facts */
.facts{margin-top:28px;max-width:520px;border-top:1px solid var(--line)}
.facts>div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:13px;font-weight:600;color:var(--muted);padding-top:2px}
.facts dd{font-size:15px}
.project .btn{margin-top:28px}

/* Running band: filled and outlined words take turns. */
.marquee{overflow:hidden;padding:6vh 0}
.track{display:flex;width:max-content;animation:slide 36s linear infinite}
.track span{padding-right:.42em;font:800 clamp(72px,11vw,190px)/1 var(--display);text-transform:uppercase;white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}

/* Columns under the practice headline */
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:48px}
.cols h3{padding-bottom:12px;border-bottom:1px solid var(--line);font:700 19px/1.3 var(--text)}
.cols ul{margin:14px 0 0;padding:0;list-style:none}
.cols li{padding:5px 0;font-size:15px;font-weight:600;color:var(--muted)}
.ruler-note{margin-top:56px;font-size:15px;color:var(--muted)}

/* Contact */
.mail{display:inline-block;margin-top:32px;padding-bottom:6px;border-bottom:2px solid var(--line);font:800 clamp(30px,3.6vw,60px)/1 var(--display);text-decoration:none;overflow-wrap:anywhere;transition:border-color .2s}
.mail:hover{border-bottom-color:var(--green)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:32px}
.bigname{overflow:hidden}
.bigname span{display:block;padding:2.4vw 0 0 1.6vw;margin-bottom:-.1em;font:800 19.6vw/.82 var(--display);text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(241,242,239,.55)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:20px clamp(20px,5vw,88px) 28px;border-top:1px solid var(--line);background:var(--night);font-size:14px;color:var(--faint)}

/* Opening: the counter runs to 100, then the particles gather. Only with JS and motion. */
.loader{display:none;position:fixed;inset:0;z-index:60;align-items:center;justify-content:center;gap:14px;background:var(--night);font:600 13px/1 var(--text);letter-spacing:.3em;text-transform:uppercase;color:var(--ink);transition:opacity .7s ease,visibility 0s linear .7s;animation:lift .6s 5s forwards}
.fx .loader{display:flex}
@keyframes lift{to{opacity:0;visibility:hidden}}
.loader b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--green)}
.loader.done{opacity:0;visibility:hidden}

/* A ring that trails the pointer. */
.cursor{position:fixed;left:0;top:0;z-index:70;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(241,242,239,.6);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .3s,width .25s,height .25s,margin .25s,background .25s}
.cursor.on{opacity:1}
.cursor.hot{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(241,242,239,.1)}

/* Motion, only when app.js turned it on (class fx on <html>). Words rise out of a mask; the rest comes out of a blur. */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .04em .06em;margin:-.04em -.04em -.06em}
.w>i{display:inline-block;font-style:normal}
.fx .split .w>i{transform:translateY(108%);transition:transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--d,0)*1s)}
.fx .seen .split .w>i,.fx .seen.split .w>i{transform:none}
.fx .rise{opacity:0;transform:translateY(26px);filter:blur(8px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,1,.3,1),filter 1s ease;transition-delay:calc(var(--d,0)*1s)}
.fx .seen .rise,.fx .seen.rise{opacity:1;transform:none;filter:none}

/* Career ruler: one tick per year, one row per role. */
.ruler{--lab:150px;position:relative;display:grid;grid-template-columns:var(--lab) repeat(15,minmax(0,1fr));grid-template-rows:repeat(5,44px) 32px;margin-top:36px}
.ruler-grid{grid-column:2/-1;grid-row:1/-1;display:grid;grid-template-columns:repeat(15,1fr)}
.ruler-grid i{border-left:1px solid var(--line)}
.ruler-grid i:last-child{border-right:1px solid var(--line)}
.lane{grid-column:1;align-self:center;padding-right:16px;font-size:15px;font-weight:600;line-height:1.25}
.l1{grid-row:1}.l2{grid-row:2}.l3{grid-row:3}.l4{grid-row:4}.l5{grid-row:5;color:var(--lead)}
.bar{align-self:center;height:8px;margin:0 3px;border-radius:2px;background:var(--ink)}
.b-xerox{grid-row:1;grid-column:2/8}
.b-eset1{grid-row:2;grid-column:8/11}
.b-eset2{grid-row:3;grid-column:10/15}
.b-thein{grid-row:4;grid-column:14/16}
.b-own{grid-row:5;grid-column:16/17;background:var(--lead)}
.yr{grid-row:6;align-self:end;padding-left:4px;font-size:12px;font-weight:600;color:var(--muted)}
.yr.minor{visibility:hidden}
.y1{grid-column:2}.y2{grid-column:3}.y3{grid-column:4}.y4{grid-column:5}.y5{grid-column:6}.y6{grid-column:7}.y7{grid-column:8}.y8{grid-column:9}.y9{grid-column:10}.y10{grid-column:11}.y11{grid-column:12}.y12{grid-column:13}.y13{grid-column:14}.y14{grid-column:15}.y15{grid-column:16;color:var(--lead)}
.ruler::after{content:'';grid-column:1/-1;grid-row:5;border-bottom:1px solid var(--line);align-self:end}

.ledger-foot{margin-top:20px;font-size:15px;color:var(--muted)}
.ledger-foot .textbtn{color:var(--muted)}

.ruler-hint{display:none}
.js-ruler .ruler-hint{display:inline}
.ruler-track{grid-column:2/-1;grid-row:1/6;position:relative;z-index:2;cursor:crosshair;touch-action:pan-y;border-radius:2px}
.ruler-track:focus-visible{outline-offset:4px}
.guide{position:absolute;top:-6px;bottom:0;width:0;border-left:1px solid var(--lead);opacity:0;transform:translateX(-.5px);pointer-events:none}
.ruler.scrub .guide{opacity:1}
.guide-year{position:absolute;top:-22px;left:0;transform:translateX(-50%);padding:1px 6px;border-radius:4px;background:var(--lead);color:var(--night);font:800 14px/1.3 var(--display);white-space:nowrap}
.bar{transition:opacity .15s}
.ruler.scrub .bar{opacity:.25}
.ruler.scrub .bar.on{opacity:1}
.ruler.scrub .lane{color:var(--faint)}
.ruler.scrub .lane.on{color:var(--ink)}
.ruler-read{min-height:1.6em;margin-top:16px;font-size:17px;font-weight:600}
.ruler-read b{font:800 22px/1 var(--display);color:var(--lead);margin-right:10px}
.draw .bar{transform:scaleX(0);transform-origin:left}
.draw.in-view .bar{transform:scaleX(1);transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .15s}
.draw.in-view .b-eset1{transition-delay:.12s}.draw.in-view .b-eset2{transition-delay:.24s}.draw.in-view .b-thein{transition-delay:.36s}.draw.in-view .b-own{transition-delay:.5s}


/* Dialog */
dialog{width:min(560px,calc(100% - 2*var(--pad)));max-height:90dvh;padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink)}
dialog::backdrop{background:var(--backdrop)}
dialog h2{font-size:var(--t2);line-height:1.1;padding-right:48px}
.close{position:absolute;top:16px;right:16px}
.dialog-note{margin-top:10px;font-size:15px;color:var(--muted)}
fieldset{margin:20px 0 0;padding:0;border:0}
legend{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.choice{display:flex;align-items:center;gap:10px;min-height:40px;font-size:16px;cursor:pointer}
.choice input{width:18px;height:18px;accent-color:var(--ink)}
.field{display:block;margin-top:16px;font-size:13px;font-weight:600;color:var(--muted)}
.field input,.field textarea{display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--night);color:var(--ink);font:400 16px/1.5 var(--text);resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline-offset:1px}
.field textarea::placeholder{color:var(--faint)}
#brief-form .btn{margin-top:20px}
.dialog-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:16px}


/* Tablet and phone: the figure floats in the upper part of the screen, the text sits below it. */
@media(max-width:1023px){
 .menu-btn{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;padding:0;border:1px solid var(--line);border-radius:var(--r);background:none;color:var(--ink);cursor:pointer}
 #nav{display:none;gap:0;position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:4px var(--pad) 12px;background:var(--night);border-bottom:1px solid var(--line)}
 .top.open #nav{display:flex}
 .top.open{background:var(--night);border-bottom-color:var(--line)}
 #nav a{padding:13px 0;font-size:17px;color:var(--ink);border-bottom:1px solid var(--line)}
 #nav a:last-child{border-bottom:0}
 .scene{align-items:flex-end;padding:96px var(--pad) 56px}
 .scene.statement{align-items:center}
 .scene-in,.scene[data-side=left] .scene-in{width:100%;max-width:640px;margin-left:0}
 .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
 .title{font-size:clamp(50px,15vw,84px);line-height:.9}
 .title.mid{font-size:clamp(44px,12.6vw,72px)}
 .outline{-webkit-text-stroke-width:1.2px}
 .sub{font-size:17px;margin-top:20px}
 .kicker{font-size:12px;gap:6px 16px;margin-bottom:16px}
 .statement h2{font-size:clamp(28px,8.2vw,40px)}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px}
 .facts>div{grid-template-columns:96px 1fr}
 .scroll-cue{margin-top:28px}
 .ruler{--lab:96px;grid-template-rows:repeat(5,48px) 28px}
 .lane{font-size:13px;padding-right:10px}
 .yr{padding-left:2px;font-size:11px}
 .actions .btn{flex:1 1 auto}
 .cols{gap:24px 20px;margin-top:32px}
 .marquee{padding:3vh 0}
}
@media(prefers-reduced-motion:reduce){
 .track,.scroll-cue i::after{animation:none}
 .draw .bar{transform:none!important;transition:none!important}
}

/* 9.1 Světlo: glow, deeper haze, bigger headings */
body::before{background:radial-gradient(80vmax 60vmax at 0% 0%,rgba(133,188,235,.16),transparent 68%),radial-gradient(70vmax 55vmax at 100% 100%,rgba(61,220,132,.12),transparent 68%),radial-gradient(50vmax 36vmax at 62% 38%,rgba(120,90,220,.06),transparent 70%)}
.title{font-size:clamp(68px,8.6vw,160px);line-height:.86}
.outline{-webkit-text-stroke:1.5px var(--ink);filter:drop-shadow(0 0 14px rgba(133,188,235,.35))}
.claim{text-shadow:0 0 26px currentColor}
.btn.cta{box-shadow:0 0 0 1px rgba(61,220,132,.4),0 0 44px rgba(61,220,132,.45)}
.stats b{text-shadow:0 0 30px rgba(241,242,239,.25)}
.top .progress{box-shadow:0 0 14px var(--green)}

/* 9.2: a large portrait beside the text, and a red project. */
:root{--red:#FF5440}
.about .scene-in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(32px,5.5vw,96px);align-items:center}
.portrait{position:relative}
.portrait img{width:100%;max-height:78vh;aspect-ratio:3/4;object-fit:cover;object-position:50% 38%;border-radius:var(--r);box-shadow:0 0 0 1px rgba(241,242,239,.14),0 30px 90px rgba(0,0,0,.6),0 0 120px rgba(133,188,235,.12)}
.portrait::after{content:'';position:absolute;inset:0;border-radius:var(--r);background:linear-gradient(180deg,transparent 62%,rgba(5,6,8,.72));pointer-events:none}
.about .sub+.sub{margin-top:14px}
.red .live::before{background:var(--red)}
.red .claim{color:var(--red)}
@media(max-width:1023px){
 .about .scene-in{grid-template-columns:1fr;gap:28px}
 .portrait img{max-height:none;aspect-ratio:4/5}
}

/* 9.4: the portrait has no frame; its edges dissolve into the space behind it. On phones the hero text steps back so the whole mark shows above it. */
.portrait::after{content:none}
.portrait img{border-radius:0;box-shadow:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 66%,transparent),radial-gradient(64% 60% at 50% 44%,#000 45%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 66%,transparent),radial-gradient(64% 60% at 50% 44%,#000 45%,transparent);mask-composite:intersect}
@media(max-width:767px){
 .hero .title{font-size:clamp(36px,11vw,60px)}
 .hero .sub{font-size:15px;margin-top:16px}
 .hero .kicker{margin-bottom:12px}
 .hero .scroll-cue{margin-top:20px}
}

/* 9.5: a live preview of each product under its figure, a way to write straight from the hero. */
.project{position:relative}
.shot{display:block;margin-top:24px;border:1px solid rgba(241,242,239,.16);border-radius:10px;overflow:hidden;background:var(--panel);text-decoration:none;box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 80px color-mix(in srgb,var(--glow,var(--green)) 16%,transparent);transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .25s}
.shot:hover{border-color:rgba(241,242,239,.4)}
.shot img{width:100%;height:auto}
.shot-bar{display:flex;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line)}
.shot-bar i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.blue{--glow:var(--blue)}.red{--glow:var(--red)}
.hero-actions{margin-top:28px}
.hero .scroll-cue{margin-top:28px}
@media(min-width:1024px){
 .shot{position:absolute;bottom:7vh;width:min(31vw,58vh);margin:0}
 .scene[data-side=right] .shot{right:calc(25vw - min(15.5vw,29vh))}
 .scene[data-side=left] .shot{left:calc(25vw - min(15.5vw,29vh))}
 .fx .seen .shot:hover{transform:translateY(-6px)}
}
@media(max-width:767px){
 .hero-actions{margin-top:18px;gap:10px}
 .hero-actions .btn{min-height:40px;padding:0 18px;font-size:15px;flex:0 1 auto}
 .hero .scroll-cue{display:none}
}
@media(max-height:960px){.hero .scroll-cue{display:none}}

/* 9.6: the haze and the progress line take the colour of the project on screen; a write button follows on phones; project figures get their own room there. */
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background-color:var(--green);opacity:0;-webkit-mask-image:radial-gradient(75vmax 60vmax at 70% 55%,#000,transparent 72%);mask-image:radial-gradient(75vmax 60vmax at 70% 55%,#000,transparent 72%);transition:opacity 1.1s ease,background-color 1.1s ease}
[data-tone] body::after{opacity:.13}
[data-tone=blue] body::after{background-color:var(--blue)}
[data-tone=red] body::after{background-color:var(--red);opacity:.16}
.top .progress{color:var(--green);background:currentColor;box-shadow:0 0 14px currentColor;transition:color 1.1s ease}
[data-tone=blue] .top .progress{color:var(--blue)}
[data-tone=red] .top .progress{color:var(--red)}
.fab{display:none}
@media(max-width:1023px){
 .project{padding-top:calc(84px + 33vh)}
 .fab{display:inline-flex;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:25;min-height:46px;padding:0 22px;font-size:15px;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s,transform .3s,visibility 0s linear .3s}
 .fab-on .fab{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s}
}
@media(prefers-reduced-motion:reduce){body::after,.top .progress,.fab{transition:none}}

/* 9.7: music switch in the header, scene dots on wide screens, a smaller write button, readable footer. */
.snd{display:inline-flex;align-items:center;gap:10px;height:40px;margin-left:auto;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted);font:600 13px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color .2s,border-color .2s}
.snd[hidden]{display:none}
.snd:hover{color:var(--ink);border-color:rgba(241,242,239,.4)}
.snd[aria-pressed=true]{color:var(--ink);border-color:rgba(241,242,239,.4)}
.snd-bars{display:flex;align-items:center;gap:3px;height:16px}
.snd-bars i{display:block;width:2px;height:16px;border-radius:1px;background:currentColor;transform:scaleY(.2);transition:transform .3s}
.snd[aria-pressed=true] .snd-bars i{background:var(--green);animation:bars 1.1s ease-in-out infinite alternate}
.snd[aria-pressed=true] .snd-bars i:nth-child(2){animation-duration:.8s;animation-delay:-.4s}
.snd[aria-pressed=true] .snd-bars i:nth-child(3){animation-duration:1.3s;animation-delay:-.7s}
.snd[aria-pressed=true] .snd-bars i:nth-child(4){animation-duration:.9s;animation-delay:-.2s}
.snd.wait .snd-bars{opacity:.5}
@keyframes bars{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.snd+.menu-btn{margin-left:10px}
.dots{display:none}
.foot{color:#8B9591}
.foot a{text-underline-offset:3px;text-decoration-color:var(--faint)}
@media(min-width:1024px){
 .snd{order:3;margin-left:28px}
 #nav{margin-left:auto}
 .dots{display:flex;flex-direction:column;position:fixed;right:14px;top:50%;z-index:20;transform:translateY(-50%)}
 .dots a{position:relative;display:block;width:24px;height:24px}
 .dots a::before{content:'';position:absolute;left:9px;top:9px;width:6px;height:6px;border-radius:50%;background:rgba(241,242,239,.3);transition:transform .25s,background .25s}
 .dots a:hover::before{background:var(--ink)}
 .dots a[aria-current]::before{background:var(--ink);transform:scale(1.7)}
 .dots a::after{content:attr(data-label);position:absolute;right:28px;top:50%;transform:translateY(-50%);padding:5px 10px;border-radius:999px;background:rgba(12,16,19,.92);border:1px solid var(--line);font:600 12px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .2s}
 .dots a:hover::after,.dots a:focus-visible::after{opacity:1}
}
@media(max-width:1023px){
 .snd-word{display:none}
 .snd{height:44px;padding:0 14px;border-radius:var(--r)}
 .fab{min-height:42px;padding:0 18px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.snd[aria-pressed=true] .snd-bars i{animation:none;transform:scaleY(.7)}}

/* 10.1: the not-found page. */
.lost{flex-direction:column}
.lost .scene-in{width:100%;max-width:760px}
.lost .actions,.lost .kicker{justify-content:center}
.lost .btn{flex:0 0 auto;width:auto}