/* Paulius Šaparnis – site styles. One visual language: lit glass blocks on a night facade. */
@font-face{font-family:Manrope;src:url('../assets/manrope.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:Manrope;src:url('../assets/manrope-latin-ext.woff2') format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--bg:#080c0f;--panel:#0d1319;--ink:#edf1ee;--ink2:#c9d3d0;--muted:#9ca7ac;--line:#d7e1e51e;--line2:rgba(215,225,229,.2);--mint:#d1e9dc;--cyan:#a8e6ef;--violet:#cbb1ef;--yellow:#f3d268;--gut:5vw;--top:96px;color-scheme:dark;font-family:Manrope,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;scrollbar-gutter:stable}
html.menu-open{overflow:hidden}
body{margin:0;background:var(--bg);word-spacing:.08em;-webkit-text-size-adjust:100%}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
p{line-height:1.6}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;word-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img,video,canvas{display:block;max-width:100%}
picture{display:contents}
img{height:auto}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
::selection{background:var(--mint);color:#102017}
[hidden]{display:none!important}
b{font-weight:500;color:var(--ink)}
.nw{white-space:nowrap}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;top:-200px;left:16px;z-index:99;padding:12px 16px;background:var(--mint);color:#0f1b16;font-weight:600;border-radius:4px}
.skip:focus{top:16px}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:6px;background:var(--mint);color:#0f1b16;font-size:15px;font-weight:600;white-space:nowrap}
.btn:hover{background:#f0fff7;color:#0f1b16}
.btn-quiet{background:transparent;color:var(--ink);border:1px solid rgba(209,233,220,.45)}
.btn-quiet:hover{background:var(--mint);color:#0f1b16;border-color:var(--mint)}
.btn.is-called{animation:called 1.3s ease-out 1}
@keyframes called{0%{box-shadow:0 0 0 0 rgba(209,233,220,.75)}70%{box-shadow:0 0 0 18px rgba(209,233,220,0)}100%{box-shadow:0 0 0 0 rgba(209,233,220,0)}}
.link,.link-btn,.text a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(209,233,220,.42);text-decoration-thickness:1px;text-underline-offset:5px}
.link,.link-btn{display:inline-block;padding:10px 0;font-size:15px}
.link:hover,.link-btn:hover,.text a:hover{text-decoration-color:var(--mint);color:#fff}
/* a link inside a sentence, a caption or a heading: underlined, otherwise like the words around it */
.tl{color:inherit;text-decoration:underline;text-decoration-color:rgba(209,233,220,.42);text-decoration-thickness:1px;text-underline-offset:4px}
.tl:hover{text-decoration-color:var(--mint);color:#fff}
.cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 26px;margin-top:24px}

/* the menu button, the home mark */
.home-mark{position:absolute;top:26px;left:var(--gut);z-index:40;padding:12px 0;font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.menu-open .home-mark{visibility:hidden}
.menu-btn{position:fixed;top:max(24px,env(safe-area-inset-top));right:max(var(--gut),env(safe-area-inset-right));z-index:61;display:flex;align-items:center;gap:12px;height:48px;padding:0 16px 0 14px;border:1px solid rgba(237,241,238,.14);border-radius:4px;background:rgba(13,19,25,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 18px rgba(0,0,0,.35);font-size:14px;font-weight:600;color:var(--ink)}
.menu-icon{display:block;width:24px;height:24px;flex:0 0 auto}
.menu-icon rect{fill:#1a2630;transition:fill .12s}
.menu-icon rect.on{fill:var(--mint)}
.menu-btn:hover .menu-icon rect.on,.menu-btn:focus-visible .menu-icon rect.on{fill:var(--cyan)}
.menu-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;box-shadow:0 0 0 7px rgba(8,12,15,.9)}

/* the menu */
.menu{position:fixed;inset:0;z-index:55;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);opacity:0;transition:opacity .12s linear}
.menu:not(.is-open){pointer-events:none}
.menu.is-open{opacity:1}
.menu-canvas{position:absolute;inset:0;display:block}
.menu-home{position:absolute;top:26px;left:var(--gut);z-index:2;padding:12px 0;font-size:15px;font-weight:600}
.menu-nav{position:absolute;inset:0;pointer-events:none}
.menu-nav a{pointer-events:auto}
.menu.has-canvas .menu-nav a{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:4px}
.menu.has-canvas .menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.menu.has-canvas .menu-sub{position:absolute;left:var(--sx);top:var(--sy);white-space:nowrap}
.menu-sub{font-size:15px;line-height:22px;color:var(--muted);transition:color .15s}
.menu-nav a:hover .menu-sub,.menu-nav a:focus-visible .menu-sub{color:var(--ink)}
.menu-nav a[aria-current="page"] .menu-sub:after{content:'  You are here';content:'  You are here' / '';color:var(--violet);font-size:13px}
/* over the lit words "You are here" takes the place of the line, in the house colour */
.menu.has-canvas .menu-nav a[aria-current="page"] .menu-sub{visibility:hidden}
.menu.has-canvas .menu-nav a[aria-current="page"] .menu-sub:after{content:'You are here';content:'You are here' / '';visibility:visible;position:absolute;left:0;top:0;font-size:15px}
.menu-nav a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.menu.has-canvas .menu-nav a:focus-visible{outline-offset:-3px}
.menu:not(.has-canvas) .menu-canvas{display:none}
.menu:not(.has-canvas) .menu-nav{position:relative;inset:auto;display:grid;gap:16px;padding:96px var(--gut) 28px;pointer-events:auto}
.menu:not(.has-canvas) .menu-sub{display:block;margin-top:2px}
.menu:not(.has-canvas) .menu-foot{position:relative;inset:auto;padding:0 var(--gut) 26px}
.menu:not(.has-canvas) .menu-nav a[aria-current] .menu-label{color:var(--violet)}
.menu:not(.has-canvas) .menu-label{display:block;font-size:clamp(30px,6vw,56px);font-weight:600;line-height:1.05}
.menu-foot{position:absolute;left:var(--gut);right:var(--gut);bottom:26px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;font-size:14px;color:var(--muted)}
.menu-foot a{padding:8px 0;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(209,233,220,.4);text-underline-offset:5px}
.menu-foot .menu-3d{color:var(--cyan)}
.menu-foot a[aria-current]{color:var(--violet)}
.menu-foot .menu-next{flex-basis:100%}
@media (hover:none){.menu-esc{display:none}}
@media (max-height:700px){.menu.has-canvas .menu-next{display:none}}

/* hero: the playable facade */
.play-hero{position:relative;display:flex;flex-direction:column;min-height:clamp(640px,100svh,1000px);background:var(--bg)}
.facade{position:relative;flex:1 1 auto;min-height:320px;overflow:hidden;background:#080c0f;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none}
.facade>canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.facade:focus-visible{outline:2px solid var(--mint);outline-offset:-2px}
.fx-sign{position:absolute;top:var(--top);right:var(--gut);display:flex;align-items:center;gap:16px;padding:12px 20px 12px 12px;background:rgba(13,19,25,.92);border:1px solid var(--line);border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.fx-sign canvas{border-radius:2px}
.fx-sign-title{font-size:14px;line-height:20px;font-weight:600}
.fx-sign-sub{font-size:13px;line-height:20px;color:var(--muted)}
/* the home page's sign is drawn large enough to scan from a chair. It waits for the game to set its words and its code, so it appears once, at its final size; in the corner its words keep to a narrow column beside the code */
.play-hero:not(.pitch-hero) .fx-sign:not(.is-set){visibility:hidden}
.play-hero:not(.pitch-hero) .fx-sign>div{max-width:200px}
.play-hero:not(.pitch-hero) .fx-sign-title{text-wrap:balance}
/* words on the glass, here and on pitch pages (.pitch-line): light ink with a dark halo, set above the name and never between the name and the paddle */
.fx-say,.pitch-line{text-shadow:0 0 2px #080c0f,0 0 10px #080c0f}
/* the home page's three lines and its two ways past the game belong to a phone's first screen (see max-width:640px); on a wider screen the plaque says it under the wall */
.fx-say,.fx-next{display:none}
/* an arrow of five blocks after the words: what they lead to is further down the page */
.down:after,.fx-read:after{content:'';flex:0 0 auto;width:3px;height:3px;margin:6px 8px 0;background:currentColor;box-shadow:-4px -4px 0 currentColor,4px -4px 0 currentColor,-8px -8px 0 currentColor,8px -8px 0 currentColor}
/* forced colours drop the shadows the arrow is made of: the link stands as plain words */
@media (forced-colors:active){.down:after{display:none}}
/* a plate over the wall, which waits behind it: the hand-back after twelve blocks, the prize, a pitch page's offer. The wall is dimmed, not blurred; the card rises from its foot in four steps, as blocks move; a plate taller than the wall scrolls inside itself */
.fx-ask{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:16px;overflow-y:auto;background:rgba(8,12,15,.92);-webkit-user-select:text;user-select:text}
.fx-ask-card{display:grid;grid-template-columns:auto minmax(0,1fr);width:min(700px,100%);border:1px solid rgba(209,233,220,.35);border-radius:4px;background:#0c1318;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:plate-in .16s steps(4)}
.fx-ask-count{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:28px 32px;border-right:1px solid var(--line);background:rgba(209,233,220,.04);font-size:13px;line-height:18px;color:var(--cyan);white-space:nowrap}
.fx-ask-body{padding:28px 32px 24px}
.fx-ask-title{font-size:clamp(22px,1.9vw,26px);line-height:1.2;font-weight:500;letter-spacing:-.02em;text-wrap:balance}
.fx-ask-sub{margin-top:8px;max-width:40ch;font-size:15px;line-height:1.6;color:var(--muted)}
.fx-ask-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px 26px;margin-top:20px}
@keyframes plate-in{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
/* the hand-back (.has-media, which scopes every rule here so no other plate changes): the film of the real wall on the left, one sentence and one question on the right. The words give the card its height and the film fills its cell */
.fx-ask-card.has-media{grid-template-columns:minmax(0,5fr) minmax(0,6fr);width:min(880px,100%);max-height:100%}
.fx-ask-media{position:relative;min-height:0;border-right:1px solid var(--line)}
.fx-ask-media .loop-media{position:absolute;inset:0;margin:0;border:0;border-radius:3px 0 0 3px;aspect-ratio:auto}
/* cut to a narrower frame the film keeps the lit windows and the crowd under them */
.fx-ask-media video{object-position:50% 60%}
/* the film's name stands in its lower left corner and stops short of the Play/Pause button in the right one: on a narrow film it takes two lines */
.fx-ask-media .tag{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 96px);background:rgba(10,16,20,.72);white-space:normal}
.has-media .fx-ask-body{padding:22px 28px}
.fx-ask-you{font-size:13px;line-height:18px;color:var(--cyan);font-variant-numeric:tabular-nums}
.has-media .fx-ask-title{margin-top:6px}
.has-media .fx-ask-sub{max-width:none}
.has-media .fx-ask-actions .link-btn{min-height:44px}
/* a plate covers the words on the wall (a phone, a short window). Its ground lets the wall show through faintly, and a faint sentence behind the plate's own reads as a misprint: while a plate is open the words step out */
.play-hero:not(.say-off) .facade:has(.fx-ask:not([hidden]))~.fx-say{visibility:hidden}
.fx-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;min-height:52px;padding:8px var(--gut);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0a0f13}
.fx-left{display:flex;align-items:center;gap:22px;min-width:0;flex:1 1 0}
.fx-status{display:flex;align-items:center;gap:8px;flex:0 0 auto;font-size:13px;line-height:20px;color:var(--violet);white-space:nowrap}
.fx-status:before{content:'';width:7px;height:7px;border-radius:1px;background:currentColor;box-shadow:0 0 10px currentColor}
.play-hero.is-playing .fx-status{color:var(--cyan)}
.fx-msg{position:relative;min-width:0;flex:1 1 auto}
.fx-hint{font-size:13px;line-height:20px;color:var(--muted);transition:opacity .25s}
.fx-hint.is-hidden{opacity:0}
.fx-score{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:13px;color:var(--cyan);font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;transition:opacity .25s}
.play-hero.is-playing .fx-score:not(:empty){opacity:1}
.fx-controls{display:flex;gap:8px;margin-left:auto}
.fx-btn{height:36px;padding:0 12px;border:1px solid rgba(215,225,229,.4);border-radius:6px;font-size:12px;color:var(--ink2);white-space:nowrap}
.fx-btn:hover{border-color:rgba(209,233,220,.6);color:#fff}
.fx-btn[aria-pressed="true"]{background:rgba(209,233,220,.12);border-color:rgba(209,233,220,.5);color:var(--ink)}
/* tilt: the button carries a miniature of the control, a phone with a paddle under it. The phone leans and the paddle slides: by itself, twice, as a demonstration, and with the real phone once tilt is on */
/* yellow, the installation's own, appears once in the interface: on this button, as the invitation; once tilt is on it turns the player's cyan */
.fx-tilt{display:inline-flex;align-items:center;gap:8px;border-color:rgba(243,210,104,.7);background-color:rgba(243,210,104,.06);color:var(--ink)}
.fx-tilt:hover{border-color:var(--yellow)}
.fx-tilt:active{background-color:rgba(243,210,104,.16)}
.tilt-icon{flex:0 0 auto;width:16px;height:20px;overflow:visible;color:var(--yellow)}
.tilt-phone{transform-origin:12px 20px;transform:rotate(calc(var(--tv,0)*24deg))}
.tilt-pad{transform:translateX(calc(var(--tv,0)*7px))}
.tilt-off{display:none}
.fx-tilt[aria-pressed="true"]{background-color:rgba(168,230,239,.09);border-color:rgba(168,230,239,.55)}
.fx-tilt[aria-pressed="true"] .tilt-icon{color:var(--cyan)}
.fx-tilt[aria-pressed="true"] .tilt-arcs{opacity:0}
.fx-tilt[aria-pressed="false"]{animation:tilt-lit 6s ease-out 1.2s 2}
.fx-tilt[aria-pressed="false"] .tilt-phone{animation:tilt-lean 6s ease-in-out 1.2s 2}
.fx-tilt[aria-pressed="false"] .tilt-pad{animation:tilt-slide 6s ease-in-out 1.2s 2}
.play-hero.has-played .fx-tilt,.play-hero.has-played .tilt-phone,.play-hero.has-played .tilt-pad{animation:none}
@keyframes tilt-lit{0%,30%,100%{border-color:rgba(243,210,104,.7);box-shadow:0 0 0 rgba(243,210,104,0)}4%{border-color:var(--yellow);box-shadow:0 0 18px rgba(243,210,104,.4)}}
@keyframes tilt-lean{0%,34%,100%{transform:rotate(0)}9%{transform:rotate(-16deg)}23%{transform:rotate(16deg)}}
@keyframes tilt-slide{0%,34%,100%{transform:translateX(0)}9%{transform:translateX(-6px)}23%{transform:translateX(6px)}}
/* a message in the hint line takes the place of the score for as long as it shows */
.play-hero.is-playing .fx-hint:not(.is-hidden)+.fx-score{opacity:0}
.plaque{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding:26px var(--gut) 34px}
.plaque-main{grid-column:1/8}
.plaque-side{grid-column:8/13;padding-bottom:6px}
.role{font-size:16px;line-height:24px;font-weight:500;color:var(--muted)}
.role-sm{display:none}
.promise{margin-top:10px;max-width:21ch;font-size:clamp(34px,3.5vw,56px);line-height:1.04;font-weight:500;letter-spacing:-.03em;text-wrap:balance}
.stamp{min-height:22px;margin-top:12px;font-size:14px;line-height:22px;color:var(--cyan);font-variant-numeric:tabular-nums}
.sub{max-width:46ch;font-size:17px;line-height:27px;color:var(--muted)}
.creds{margin-top:12px;max-width:46ch;font-size:14px;line-height:22px;color:var(--ink2)}

/* inner page head: the title lit on a strip of facade */
.page-head{position:relative}
.band{position:relative;height:250px;background:#080c0f;overflow:hidden}
.band canvas{position:absolute;inset:0;display:block}
.page-head h1{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
html:not(.js) .page-head h1{position:static!important;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal;padding:120px var(--gut) 0;font-size:clamp(36px,11vw,56px);line-height:1.05;font-weight:500}
html:not(.js) .band,html:not(.js) .menu-btn,html:not(.js) .facade,html:not(.js) .fx-bar,html:not(.js) .loop-toggle,html:not(.js) .js-only{display:none}
html:not(.js) .play-hero{min-height:0;padding-top:72px}
/* the game script did not start (html.no-game, set by site.js): the wall steps aside as it does without JavaScript, and the plaque says what is sold */
html.no-game .facade,html.no-game .fx-bar,html:not(.js) .fx-say,html:not(.js) .fx-next,html.no-game .fx-say,html.no-game .fx-next{display:none}
html.no-game .play-hero{min-height:0;padding-top:72px}
/* numbers, charts and small drawings are made of blocks by a script; without it they step aside and the numbers stand as plain numbers */
html:not(.js) canvas.glyph,html:not(.js) canvas.units,html:not(.js) canvas[data-num]{display:none}
html:not(.js) .format h3{margin-top:0}
html:not(.js) .facts noscript{display:contents}
html:not(.js) .fact .vh{position:static!important;display:block;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;font-size:40px;line-height:1.1;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
/* without JavaScript a film's own tag has no source, and a browser draws an empty player over it: it steps aside for the one inside <noscript>, which has the source and the browser's controls. The link laid over a film on the home page steps aside as well, or it would take every click meant for those controls; the link in words under the film stays */
html:not(.js) .loop-media video[data-src],html:not(.js) .loop-media .media-link{display:none}
.intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding:28px var(--gut) 60px;border-bottom:1px solid var(--line)}
.intro-main{grid-column:1/9}
.intro-side{grid-column:9/13;padding-bottom:4px}
.meta{font-size:15px;line-height:22px;color:var(--muted)}
.lede{margin-top:10px;max-width:24ch;font-size:clamp(28px,3vw,46px);line-height:1.12;font-weight:450;letter-spacing:-.025em;text-wrap:balance}
.intro-side p{font-size:16px;line-height:1.7;color:var(--muted)}
.intro-side .cta-row{margin-top:18px}
/* the stops of a long page, as plain links in the flow under the intro: a row that wraps and never follows the scroll. Each link is led by the dim block of the form's chips, which lights for the one the visitor is on */
.onpage{display:flex;flex-wrap:wrap;gap:0 30px;padding:8px var(--gut);border-bottom:1px solid var(--line)}
.onpage a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;line-height:20px;color:var(--ink2)}
.onpage a:before{content:'';flex:0 0 auto;width:8px;height:8px;border-radius:1px;background:#2a3b47}
.onpage a:hover,.onpage a:focus-visible{color:#fff}
.onpage a:hover:before,.onpage a:focus-visible:before{background:var(--cyan);box-shadow:0 0 8px rgba(168,230,239,.7)}
.onpage+.sec{border-top:0}
/* a heading takes the focus when a link jumps to it, so a keyboard and a screen reader go on from there; it is not a control and gets no ring. It lands clear of the Menu button, with its section's rule at the top of the screen; a terms box lands whole */
.onpage~.sec [tabindex="-1"]{scroll-margin-top:64px}
.onpage~.sec [tabindex="-1"]:focus{outline:0}
.onpage~.sec .terms [tabindex="-1"]{scroll-margin-top:96px}

/* sections */
.sec{padding:88px var(--gut);border-top:1px solid var(--line)}
.intro+.sec,.sec:first-child{border-top:0}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;margin-bottom:44px}
.sec-head h2{grid-column:1/8;font-size:clamp(34px,3.6vw,56px);font-weight:450;line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.sec-head>p,.sec-head>a{grid-column:9/13;max-width:44ch;font-size:16px;line-height:1.7;color:var(--muted)}
.sec-head>a{justify-self:start;align-self:end}
.sec-head p .link{display:inline;padding:0}
.text p{max-width:62ch;font-size:17px;line-height:1.75;color:var(--ink2)}
.text p+p{margin-top:14px}

/* footage */
.loop-media{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:2px;background:#05070a}
.loop-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.loop-media.wide{aspect-ratio:21/9}
.loop-toggle{position:absolute;right:12px;bottom:12px;min-width:48px;height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.24);border-radius:6px;background:rgba(10,16,20,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:12px;color:#e8efec}
.loop-toggle:hover{background:var(--mint);color:#0f1b16;border-color:var(--mint)}
.caption{margin-top:12px;font-size:13px;line-height:20px;color:var(--muted)}

/* two works side by side */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.pair-item h3{margin-top:18px;font-size:24px;font-weight:500;letter-spacing:-.02em}
.pair-item h3 a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--mint)}
.pair-item .place{margin-top:4px;font-size:13px;color:var(--muted)}
.pair-item .proof{margin-top:10px;font-size:15px;line-height:1.65;color:var(--ink2);max-width:46ch}
/* the way into the work: a visible link under the text, and the footage itself (the Play/Pause button stays on top) */
.pair-item .go{display:inline-block;margin-top:12px;font-size:15px;text-decoration:underline;text-decoration-color:rgba(209,233,220,.45);text-underline-offset:5px}
.pair-item .go:hover{text-decoration-color:var(--mint);color:#fff}
.loop-media .media-link{position:absolute;inset:0}
/* a film in a 4:3 frame beside one in 16:9: the columns are cut 3 to 4, so the two frames are the same height and the words under them start on one line */
.pair.mixed,.formats.two{grid-template-columns:minmax(0,3fr) minmax(0,4fr)}
/* how visitors play: the one photo of a phone as the paddle, and the three steps beside it */
.how{display:grid;grid-template-columns:220px minmax(0,1fr);gap:0 32px;align-items:center;margin-top:40px}
/* the words are centred against the photo itself, not the photo with its caption: the caption gets the row under it */
@supports (grid-template-rows:subgrid){.how .photo{display:grid;grid-row:span 2;grid-template-rows:subgrid}}
.how h3{font-size:24px;font-weight:500;letter-spacing:-.02em}
.how p{margin-top:10px;max-width:46ch;font-size:15px;line-height:1.65;color:var(--ink2)}
/* the price, in a line of its own that leads on; the rule above it runs the full width, the words keep a readable measure */
.pair-terms{margin-top:32px;padding:20px max(0px,100% - 76ch) 0 0;border-top:1px solid var(--line);font-size:16px;line-height:26px;color:var(--ink2)}
.pair-terms .link{display:block;width:fit-content;font-size:inherit}

/* message wall: a strip of facade people write to, from the page or from their phones */
/* the message wall: a small version of the screen that ran at concerts. Cards, the newest on top, over a slow glow */
.wall{margin-top:44px}
.wall>.h3{margin-bottom:14px}
.wall-what{margin-top:36px}
.wall-what .fact{margin-top:6px}
.wall-stage{position:relative;height:380px;overflow:hidden;border:1px solid var(--line);border-radius:2px;background:radial-gradient(60% 80% at 12% 0%,rgba(168,230,239,.13),transparent 70%),radial-gradient(55% 70% at 92% 100%,rgba(196,170,255,.14),transparent 70%),#07090c}
.wall-feed{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:18px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.wall-card{flex:none;padding:10px 16px 12px;border:1px solid var(--line);border-left:5px solid hsl(var(--hue,156),80%,66%);border-radius:6px;background:rgba(255,255,255,.045)}
.wall-card-name{font-size:12px;line-height:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#f3d268}
.wall-card-text{font-size:22px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:#fff;overflow-wrap:anywhere}
.wall-card.is-new{animation:wall-in .32s cubic-bezier(.2,.9,.3,1.2)}
@keyframes wall-in{from{opacity:0;transform:translateY(-14px) scale(.98)}}
.wall-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:17px;color:var(--muted)}
.wall-logo,.wall-winner{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;width:100%;padding:24px;text-align:center;background:rgba(7,9,12,.94)}
.wall-logo[hidden],.wall-winner[hidden]{display:none}
.wall-logo p{padding:18px 34px;border:2px solid var(--mint);border-radius:6px;font-size:34px;line-height:1.1;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);animation:wall-pulse 2.4s ease-in-out infinite}
@keyframes wall-pulse{50%{transform:scale(1.04);opacity:.86}}
.wall-winner{cursor:pointer;color:inherit;font:inherit}
.wall-winner-title{font-size:14px;line-height:20px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#f3d268}
.wall-winner-name{font-size:44px;line-height:1.1;font-weight:700;letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere}
.wall-winner-text{max-width:32ch;font-size:18px;line-height:1.4;color:var(--ink2)}
.wall-winner.is-out .wall-winner-name{color:#f3d268;animation:wall-pop .5s cubic-bezier(.18,1.5,.4,1)}
@keyframes wall-pop{from{transform:scale(.6);opacity:0}}
.wall-modes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--muted)}
.chip-btn{min-height:36px;padding:0 14px;border:1px solid var(--line2);border-radius:18px;font-size:14px;color:var(--ink2)}
.chip-btn:hover:not(:disabled){border-color:var(--mint);color:#fff}
.chip-btn[aria-pressed="true"]{border-color:var(--mint);background:rgba(209,233,220,.12);color:#fff}
.chip-btn:disabled{opacity:.45}
@media (prefers-reduced-motion:reduce){.wall-card.is-new,.wall-logo p,.wall-winner.is-out .wall-winner-name{animation:none}}
.wall-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:16px}
.wall-foot>div{flex:1;max-width:640px}
.wall-form .wall-name{flex:0 1 170px}
.wall-form{display:flex;gap:10px}
.wall-form input{flex:1;min-width:0;min-height:48px;padding:0 14px;border:1px solid rgba(255,255,255,.36);border-radius:6px;background:#0c1517;font-size:16px;color:var(--ink)}
.wall-form input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (max-width:340px){.wall-form{gap:8px}.wall-form input{padding:0 10px}} /* on the narrowest phones the whole placeholder still shows */
.wall-sign{position:static;box-shadow:none}
.wall-sign[hidden]{display:none}
/* where the code can appear its height is kept free from the start, so the page does not grow under a jump to a heading below */
@media (hover:hover) and (min-width:1100px){.wall-foot{min-height:137px}}
/* the wall hands back too: once the visitor's own line is on it, the count gives way to the concert's figure and the way on. The link takes a row of its own, and the 450 beside it goes white for one step (not at all with reduced motion) */
.wall-ask{display:block;width:fit-content;line-height:24px}
.wall-fact.is-told canvas{animation:told .24s step-end}
@keyframes told{from{filter:grayscale(1) brightness(1.3)}}

/* formats: small block diagrams */
.formats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line2)}
.format{padding:26px 22px 28px 0}
.format+.format{padding-left:22px;border-left:1px solid var(--line)}
.format h3{margin-top:18px;font-size:19px;font-weight:500;letter-spacing:-.01em}
.format p{margin-top:6px;font-size:14px;line-height:1.6;color:var(--muted)}
.formats.four{grid-template-columns:repeat(4,minmax(0,1fr))}
/* the drawing has its box before the script draws it, so nothing moves when it does */
canvas.glyph{width:63px;height:63px}
/* two surfaces that are not on film yet: what there is to say stands in the item itself, a number, an answer and a way to try it.
   The two stand on the columns of the two films under them (.pair.mixed) */
.formats.two .format{padding-bottom:36px}
/* the films' gutter is 28px, so their second column starts 16px past the line between these two: 1px of line, 15px of padding */
.formats.two .format+.format{padding-left:15px}
.formats.two .format p{max-width:52ch}
.format .fact{margin-top:18px}
.format .fact+p{margin-top:14px}
.format .go{display:inline-block;margin-top:2px;padding:12px 0;font-size:15px;line-height:20px;text-decoration:underline;text-decoration-color:rgba(209,233,220,.45);text-underline-offset:5px}
.format .go:hover{text-decoration-color:var(--mint);color:#fff}
/* said only while the wall has a code that plays it (a wide screen with a mouse, and the relay answering) */
.js-room{display:none}
html.has-room .js-room{display:block;margin-top:14px}
.js-room .go{display:block;width:fit-content;color:var(--ink)}
.formats+.pair{margin-top:44px}
/* on the home page the films come first; the surfaces that have no film yet stand under them as a quieter row with its own label */
.formats-note{display:flex;align-items:baseline;gap:14px;margin-top:64px;font-size:19px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.formats-note span{padding:2px 8px;border:1px solid var(--line2);border-radius:4px;font-size:12px;line-height:18px;font-weight:400;letter-spacing:.02em;color:var(--muted)}
.formats-note+.formats{margin-top:16px}
.formats-note+.formats .format h3{margin-top:14px}
/* LED screens in photographs: the whole scene and the stage side by side at one height; big TVs beside them, still without a picture */
.pair+.pair.rev{margin-top:56px;padding-top:44px;border-top:1px solid var(--line)}
/* screens as one item: the two photographs on the left, the words beside them */
.pair+.screens{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr);gap:28px 40px;align-items:start;margin-top:56px;padding-top:44px;border-top:1px solid var(--line)}
.screens-text h3{margin-top:0}
.screens-text .js-room{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.screens-text .js-room .go{display:block;width:fit-content;margin-top:4px}
.pair.mixed.rev{grid-template-columns:minmax(0,4fr) minmax(0,3fr)}
.ledpair{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:8px}
.ledpair-shot{display:block;overflow:hidden;border:1px solid var(--line);border-radius:2px;background:#05070a;aspect-ratio:1100/928}
.ledpair-shot img{display:block;width:100%;height:100%;object-fit:cover}
.ledpair-shot:first-child{aspect-ratio:16/9}
.pair-item .fact{margin-top:18px}
.pair-item .fact p{font-size:14px;line-height:1.6;color:var(--muted)}
.pair-item .fact+.proof{margin-top:14px}
.pair-plain .glyph{display:block}
.pair-plain h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.tag-quiet{padding:2px 8px;border:1px solid var(--line2);border-radius:4px;font-size:12px;line-height:18px;font-weight:400;letter-spacing:.02em;color:var(--muted)}
.pair-plain .proof .go{display:block;width:fit-content}

/* where should it play: six situations, all open. Each is a plate, not a link; its three blocks light for the one the visitor is on */
.where{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.where-item{--h:clamp(20px,1.7vw,24px);display:grid;grid-template-columns:6px minmax(0,1fr);grid-template-rows:auto 1fr auto auto;column-gap:14px;padding:clamp(24px,2.1vw,30px);border:1px solid var(--line2);border-radius:4px;background:linear-gradient(180deg,rgba(13,19,25,.7),rgba(13,19,25,0));scroll-margin-top:56px}
/* the four parts of the plates in one row of the grid share their lines: headings, texts, terms and links start level */
@supports (grid-template-rows:subgrid){.where-item{grid-row:span 4;grid-template-rows:subgrid;row-gap:0}}
.where-item>*{grid-column:1/-1}
.where-item .where-pad{grid-area:1/1;display:grid;gap:2px;align-self:start;margin-top:calc((var(--h)*1.25 - 22px)/2)}
.where-pad i{width:6px;height:6px;background:#2a3b47}
.where-item:hover .where-pad i,.where-item:focus-within .where-pad i,.where-item:target .where-pad i{background:var(--cyan);box-shadow:0 0 8px rgba(168,230,239,.7)}
.where-item h3{grid-area:1/2;font-size:var(--h);line-height:1.25;font-weight:500;letter-spacing:-.02em}
.where-item p{grid-row:2;margin-top:10px;font-size:15px;line-height:25px;color:var(--muted)}
.where-item .where-terms{grid-row:3;margin-top:14px;line-height:24px;color:var(--ink)}
/* the last plate has no terms: its text takes their row too */
.where-item>p:not(.where-terms):nth-last-child(2){grid-row:2/4}
.where-links{grid-row:4;display:flex;flex-wrap:wrap;gap:0 24px;margin:8px 0 -10px}
.where-links .go{display:inline-flex;align-items:center;min-height:44px;font-size:15px;line-height:20px;color:var(--ink2);text-decoration:underline;text-decoration-color:rgba(209,233,220,.45);text-underline-offset:5px}
.where-links .where-go{font-weight:600;color:var(--ink)}
.where-links .go:hover{text-decoration-color:var(--mint);color:#fff}
/* the question takes the focus when a link jumps to it, so a screen reader reads on from there; it is not a control and gets no ring */
#h-where:focus{outline:0}
/* a visitor who picks nothing loses nothing: the direct ways stand under the list */
.where-direct{display:flex;flex-wrap:wrap;align-items:center;gap:0 28px;margin-top:36px;font-size:16px;line-height:26px;color:var(--muted)}
.where-direct a{display:inline-flex;align-items:center;min-height:44px;font-size:20px;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(209,233,220,.42);text-underline-offset:6px}
.where-direct a:hover{text-decoration-color:var(--mint);color:#fff}
.where-direct .copy-btn{width:44px;height:44px}
.where-note{flex-basis:100%;margin-top:6px;font-size:15px;line-height:24px}

/* facts in block numerals */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.fact canvas{height:auto}
.fact p{margin-top:12px;font-size:15px;line-height:1.5;color:var(--muted)}

/* steps and lists */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:step}
.steps li{position:relative;padding-top:24px;border-top:1px solid var(--line2);counter-increment:step}
.steps li:before{content:counter(step);position:absolute;top:24px;right:0;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.steps h3{margin-top:20px;font-size:22px;font-weight:500;letter-spacing:-.02em}
.steps p{max-width:36ch;margin-top:8px;font-size:15px;line-height:1.7;color:var(--muted)}
.ticks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.ticks li{font-size:15px;line-height:1.7;color:var(--muted)}
.ticks strong{display:block;margin-bottom:4px;font-weight:500;color:var(--ink)}
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:28px}
.split>.l{grid-column:1/7}
.split>.r{grid-column:8/13}
.plain li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.6;color:var(--ink2)}
.plain li:before{content:'';position:absolute;left:0;top:21px;width:8px;height:8px;border-radius:1px;background:var(--mint)}
.plain li:first-child{border-top:1px solid var(--line)}
.numbered{counter-reset:n}
.numbered li{position:relative;padding:14px 0 14px 44px;border-bottom:1px solid var(--line);counter-increment:n;font-size:16px;line-height:1.6;color:var(--ink2)}
.numbered li:first-child{border-top:1px solid var(--line)}
.numbered li:before{content:counter(n);position:absolute;left:0;top:14px;display:grid;place-items:center;width:26px;height:26px;border:1px solid rgba(209,233,220,.45);border-radius:4px;font-size:12px;color:var(--mint)}
.numbered strong{font-weight:500;color:var(--ink)}
.terms{padding:30px;border:1px solid rgba(209,233,220,.35);border-radius:4px;background:rgba(209,233,220,.04)}
.terms h3{font-size:22px;font-weight:500;letter-spacing:-.02em}
.terms .price{margin-top:12px;font-size:clamp(24px,2.2vw,32px);line-height:1.2;font-weight:450;letter-spacing:-.02em}
.terms p{margin-top:12px;font-size:15px;line-height:1.7;color:var(--muted)}
.terms .numbered{margin-top:20px}
/* under the terms, one quiet line that crosses to the other page's terms. Its link is as tall as a thumb without moving the lines */
.terms-cross{margin-top:14px;font-size:14px;line-height:22px;color:var(--muted)}
.terms-cross a{padding:13px 0}
.h3{font-size:20px;font-weight:500;letter-spacing:-.01em;margin-bottom:16px}
h2.h3{font-size:clamp(22px,1.8vw,28px);letter-spacing:-.02em;margin-bottom:18px}

/* faq */
.faq-list{border-top:1px solid rgba(255,255,255,.15)}
.faq-list details{border-bottom:1px solid rgba(255,255,255,.15)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;list-style:none;cursor:pointer;font-size:19px;font-weight:450}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{font-size:26px;font-weight:300;line-height:1;color:#a9c4b7;transition:transform .25s}
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list details p{max-width:62ch;padding:0 30px 24px 0;font-size:16px;line-height:1.75;color:var(--muted)}

/* work index */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:2px;filter:brightness(.88);transition:filter .3s}
.card:hover img{filter:brightness(1)}
.card h3{margin-top:18px;font-size:26px;font-weight:500;letter-spacing:-.02em}
.card .place{margin-top:4px;font-size:13px;color:var(--muted)}
.card p.line{margin-top:10px;max-width:48ch;font-size:15px;line-height:1.65;color:var(--ink2)}
.card .go{display:inline-block;margin-top:12px;font-size:15px;text-decoration:underline;text-decoration-color:rgba(209,233,220,.45);text-underline-offset:5px}
.index{margin-top:56px;border-top:1px solid var(--line2)}
.index li{display:grid;grid-template-columns:136px minmax(0,3fr) minmax(0,5fr) 116px;column-gap:28px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line)}
.index .thumb,.index .thumb-glyph{width:136px;aspect-ratio:4/3;border:1px solid var(--line);border-radius:2px;background:#0a0f13}
.index .thumb{height:auto;object-fit:cover}
.index .thumb-glyph{display:grid;place-items:center}
.index .desc a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(209,233,220,.42);text-underline-offset:4px}
.index h3{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:22px;font-weight:500;letter-spacing:-.02em}
.index .place{margin-top:6px;font-size:13px;line-height:20px;color:var(--muted)}
.index .desc{max-width:56ch;font-size:16px;line-height:1.7;color:var(--ink2)}
.index .desc canvas{margin-top:18px}
.tagcell{justify-self:end}
.tag{padding:3px 8px;border-radius:4px;background:rgba(209,233,220,.1);font-size:12px;font-weight:600;letter-spacing:0;color:var(--mint);white-space:nowrap}
.tag.hot{background:var(--cyan);color:#0f1b16}

/* case pages */
.case-media{padding:0 var(--gut)}
.case-media>*{max-width:calc(72svh * 16 / 9);margin-left:auto;margin-right:auto}
.video-box{max-width:960px}
.video-box video{width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line);border-radius:2px}
.teaser{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:center}
.teaser img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:2px}
.next{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.next a.nx{display:flex;align-items:center;gap:22px}
.next a.nx img{width:180px;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:2px}
.next a.nx span{font-size:13px;color:var(--muted)}
.next a.nx strong{display:block;font-size:26px;font-weight:500;letter-spacing:-.02em}

/* about */
.credits li{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1.3fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5}
.credits li:first-child{border-top:1px solid var(--line2)}
.credits .y{color:var(--muted);font-variant-numeric:tabular-nums}
.credits .p{color:var(--muted)}

/* contact */
.brief{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:start}
.brief form{display:grid;gap:28px}
.brief label,.brief fieldset,.brief .field{display:grid;align-content:start;gap:8px;font-size:15px;line-height:22px;color:var(--ink)}
.brief fieldset{margin:0;padding:0;border:0;min-width:0}
.brief legend{padding:0;margin-bottom:10px;font-size:15px;line-height:22px;color:var(--ink)}
.brief .hint{margin-top:-2px;font-size:14px;line-height:21px;color:var(--muted)}
.brief .hint:empty{display:none}
/* one box for every control: the same height, the same inset, the same states */
.brief input:not([type=checkbox]):not([type=radio]),.brief select,.brief textarea{display:block;width:100%;min-width:0;height:52px;min-height:52px;margin:0;padding:0 16px;border:1px solid rgba(215,225,229,.4);border-radius:6px;background:#0c1517;font-size:16px;line-height:24px;color:var(--ink);transition:border-color .12s,box-shadow .12s}
.brief input:not([type=checkbox]):not([type=radio]):hover,.brief select:hover,.brief textarea:hover{border-color:rgba(209,233,220,.7)}
.brief ::placeholder{color:#7f8b90;opacity:1}
.brief textarea{height:auto;min-height:140px;padding:13px 16px;resize:vertical}
.brief input:-webkit-autofill,.brief input:-webkit-autofill:hover,.brief input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:inset 0 0 0 100px #101c20;caret-color:var(--ink)}
.brief select{-webkit-appearance:none;appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23c9d3d0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px;cursor:pointer}
.brief select:has(option[value=""]:checked){color:#7f8b90}
.brief select option{color:var(--ink);background:#0d1319}
.brief .opt{font-size:13px;font-weight:400;color:var(--muted)}
.brief .opt:empty{display:none}
.brief-main{min-width:0}
/* the top of the contact page: less air before the first question, the direct ways in on the first line */
.intro-contact{padding-bottom:34px;border-bottom:0}
.sec-contact{padding-top:0;border-top:0}
.reach{display:flex;flex-wrap:wrap;gap:0 22px}
/* two ways in: each a plate with a block that lights when it is the chosen one */
.pick{grid-template-columns:1fr 1fr;gap:12px}
.pick label{position:relative;display:block;cursor:pointer}
.pick input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pick label>span{position:relative;display:grid;align-content:start;gap:4px;height:100%;padding:16px 18px 17px 48px;border:1px solid rgba(215,225,229,.4);border-radius:6px;background:#0c1517;transition:border-color .12s,background .12s}
.pick label>span:before{content:'';position:absolute;left:18px;top:20px;width:14px;height:14px;border:1px solid rgba(215,225,229,.6);border-radius:2px;transition:background .12s,box-shadow .12s}
.pick b{font-size:17px;line-height:22px;font-weight:600;color:var(--ink)}
.pick small{font-size:14px;line-height:1.45;color:var(--muted)}
.pick label:hover>span{border-color:rgba(209,233,220,.7)}
.pick input:checked+span{border-color:var(--mint);background:rgba(209,233,220,.07)}
.pick input:checked+span:before{border-color:var(--mint);background:var(--mint);box-shadow:0 0 12px rgba(209,233,220,.55)}
.pick input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:2px}
.meet{display:grid;gap:20px}
html:not(.js) .meet{display:none}
/* the place and the date open the project side; without JavaScript there are no sides and they are plain fields */
html:not(.js) .brief .row2[hidden]{display:grid!important}
.slots{display:grid;gap:18px}
.slot{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end;gap:8px 12px}
.slot label{font-size:14px;color:var(--ink2)}
.slot-says{grid-column:1/-1;font-size:14px;line-height:21px;color:var(--ink2)}
.slot-says[data-hint]{color:var(--muted)}
.slot-says:empty{display:none}
.slot-drop{grid-column:1/-1;justify-self:start;min-height:44px;padding:0}
.meet .link-btn{min-height:44px}
/* who is writing comes last, two by two */
.brief .who{gap:16px}
.brief .who legend{margin-bottom:14px;font-size:17px;line-height:24px;font-weight:500}
.brief .link-btn{justify-self:start}
.more{border:1px solid var(--line2);border-radius:6px}
.more summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 16px;font-size:15px;color:var(--ink);cursor:pointer;list-style:none}
.more-note{flex:1 1 100%;margin:-2px 0 0 32px;font-size:13px;line-height:19px;color:var(--muted)}
.more-note:empty{display:none}
.more summary::-webkit-details-marker{display:none}
.more summary:before{content:'+';display:grid;place-items:center;width:22px;height:22px;border:1px solid rgba(209,233,220,.45);border-radius:4px;font-size:15px;line-height:1;color:var(--mint)}
.more[open] summary:before{content:'−'}
.more summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
.more-body{display:grid;gap:20px;padding:6px 16px 18px}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.send{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px}
.send .btn{min-width:190px;min-height:52px;font-size:16px}
.send .btn[aria-busy="true"]{opacity:.75;cursor:progress}
.fine{max-width:42ch;font-size:13px;line-height:1.5;color:var(--muted)}
.send-fail{padding:16px 18px;border:1px solid rgba(255,194,184,.7);border-radius:6px;background:rgba(255,194,184,.05)}
.send-fail p{font-size:15px;line-height:1.6;color:var(--ink2)}
.send-fail strong{font-weight:600;color:#ffd9d2}
.send-fail .link-btn{padding:10px 0}
.sent{padding:34px 30px 30px;border:1px solid rgba(209,233,220,.35);border-radius:4px;background:rgba(209,233,220,.04);outline:none}
.sent canvas{margin-bottom:24px}
.sent h2{font-size:clamp(26px,2.6vw,36px);line-height:1.12;font-weight:500;letter-spacing:-.02em}
.sent p{margin-top:10px;max-width:46ch;font-size:17px;line-height:1.6;color:var(--ink2)}
.sent p+p{margin-top:8px}
.sent b{font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.brief input:focus-visible,.brief select:focus-visible,.brief textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-color:var(--cyan)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;display:block;cursor:pointer}
.chips input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chips span{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 14px;border:1px solid rgba(215,225,229,.4);border-radius:6px;font-size:15px;line-height:20px;color:var(--ink2);transition:border-color .12s,background-color .12s,color .12s}
.chips span:before{content:'';flex:0 0 auto;width:8px;height:8px;border-radius:1px;background:#2a3b47;transition:background-color .12s,box-shadow .12s}
.chips label:hover span{border-color:rgba(209,233,220,.7);color:var(--ink)}
.chips input:checked+span{background:rgba(209,233,220,.1);border-color:var(--mint);color:var(--ink)}
.chips input:checked+span:before{background:var(--mint);box-shadow:0 0 10px rgba(209,233,220,.8)}
@media (forced-colors:active){.chips input:checked+span,.pick input:checked+span{outline:3px solid Highlight;outline-offset:-3px}}
.chips input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:2px}
#form-result{font-size:15px;line-height:1.6;color:var(--mint)}
#form-result:empty{display:none}
.fallback textarea{min-height:170px;font-size:14px}
.side-card{padding:26px;border:1px solid var(--line2);border-radius:4px}
.side-card .meta:not(:first-child){margin-top:24px;color:var(--muted)}
.side-card .mail{display:block;margin-top:8px;font-size:22px;letter-spacing:-.01em;text-decoration:underline;text-decoration-color:rgba(209,233,220,.42);text-underline-offset:6px}
.side-card p{margin-top:14px;font-size:15px;line-height:1.7;color:var(--muted)}
.side-card .links{display:flex;gap:22px;margin-top:10px}
.side-card .side-time{margin-top:8px;font-size:14px;font-variant-numeric:tabular-nums}
/* copy: two blocks, one over the other, beside the line they copy; a tick for a moment once it is done */
.with-copy{display:inline-flex;align-items:center;gap:14px}
.side-card .with-copy{display:flex;margin-top:8px;color:var(--ink)}
.side-card .with-copy .mail{margin-top:0}
.copy-btn{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border:1px solid rgba(215,225,229,.4);border-radius:6px;color:var(--ink2);transition:border-color .12s,color .12s}
.copy-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.copy-btn .ok{display:none}
.copy-btn:hover{border-color:rgba(209,233,220,.7);color:#fff}
.copy-btn.is-done{border-color:var(--mint);color:var(--mint)}
.copy-btn.is-done .c{display:none}
.copy-btn.is-done .ok{display:block}
.copy-btn.is-done:after,.copy-btn.is-off:after{content:'Copied';position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);padding:6px 9px;border:1px solid rgba(209,233,220,.35);border-radius:4px;background:#101c20;font-size:13px;line-height:1;font-weight:400;color:var(--mint);white-space:nowrap}
.copy-btn.is-off:after{content:'Select it and copy';border-color:rgba(255,194,184,.6);color:#ffc2b8}

/* footer */
.foot{padding:96px var(--gut) 28px;border-top:1px solid var(--line)}
.foot-cta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;margin-bottom:80px}
.foot-cta h2{grid-column:1/8;max-width:11ch;font-size:clamp(46px,6vw,96px);font-weight:450;line-height:.98;letter-spacing:-.04em}
.foot-cta>div{grid-column:8/13}
.foot-cta p{max-width:44ch;font-size:17px;line-height:1.7;color:var(--muted)}
.foot-mail{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;margin-top:18px;font-size:20px}
.foot-mail a{text-decoration:underline;text-decoration-color:rgba(209,233,220,.42);text-underline-offset:6px}
.foot-dev{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;padding:26px 0;border-top:1px solid var(--line);color:var(--ink2)}
.foot-dev-q{font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.foot-dev-a{font-size:15px}
.foot-dev u{color:var(--mint);text-decoration-color:rgba(209,233,220,.42);text-underline-offset:6px}
.foot-dev:hover u{color:#fff;text-decoration-color:#fff}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 26px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.foot-nav a{padding:10px 0;font-size:15px;color:var(--ink2)}
.foot-nav a:hover{color:#fff}
.foot-nav a[aria-current="page"]{color:var(--violet);text-decoration:underline;text-underline-offset:6px}
.foot-line{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 24px;padding-top:14px;font-size:13px;color:var(--muted)}
.foot-line span:last-child{display:flex;flex-wrap:wrap;gap:0 22px}
.foot-line a{padding:8px 0;text-decoration:underline;text-decoration-color:rgba(209,233,220,.3);text-underline-offset:5px}

/* photographs of the works */
.photo img{width:100%;height:auto;object-fit:cover;border:1px solid var(--line);border-radius:2px;background:#05070a}
.photo.wide img{aspect-ratio:16/9}
.photo.tall img{aspect-ratio:4/5}
.photo figcaption{margin-top:10px;font-size:13px;line-height:20px;color:var(--muted)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.visit{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px;align-items:start}
.steps.stack{grid-template-columns:1fr;gap:0}
.steps.stack li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:24px;padding:22px 0}
.steps.stack li:last-child{border-bottom:1px solid var(--line2)}
.steps.stack .glyph{grid-row:1/3}
.steps.stack h3{margin-top:0}
.steps.stack li:before{top:22px}
.proof-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
.proof-row .ticks{grid-template-columns:1fr;gap:22px;margin-top:0}
.caption .inline{display:inline-block;min-height:24px;padding:2px 0;line-height:20px;font-size:inherit;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(209,233,220,.5);text-underline-offset:4px}
.caption .inline:hover{color:#fff;text-decoration-color:var(--mint)}
.loop-media.is-full video{object-fit:contain;background:#000}
.field-error{display:flex;gap:9px;font-size:14px;line-height:21px;color:#ffc2b8}
.field-error:before{content:'';flex:0 0 auto;width:8px;height:8px;margin-top:7px;border-radius:1px;background:currentColor}
.brief .prize,.brief .noted{padding:14px 16px;border:1px solid rgba(209,233,220,.35);border-radius:4px;background:rgba(209,233,220,.04);font-size:15px;line-height:1.6;color:var(--mint)}
.brief input[aria-invalid="true"],.brief textarea[aria-invalid="true"],.brief select[aria-invalid="true"]{border-color:#ffc2b8;box-shadow:inset 0 0 0 1px #ffc2b8}
.webmail{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px}
.note{margin-top:12px;font-size:13px;line-height:20px;color:var(--muted)}
.mt{margin-top:28px}
.photo.small{max-width:300px}

/* photo sets: a six-column grid, items span a third, a half or the full width */
.shots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:36px 16px}
.shots>figure{grid-column:span 2;min-width:0}
.shots>.s3{grid-column:span 3}
.shots>.s6{grid-column:1/-1}
.shots img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:2px;background:#05070a}
.shots>.s6 img{aspect-ratio:2/1}
.shots>.tall img{aspect-ratio:4/5}
.shots figcaption{margin-top:10px;max-width:60ch;font-size:13px;line-height:20px;color:var(--muted)}
a.zoom{display:block;cursor:zoom-in;border-radius:2px}
a.zoom img{transition:filter .25s}
a.zoom:hover img{filter:brightness(1.12)}
.pic{position:relative;display:block}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.three h3{font-size:22px}
.loop-media.tall{aspect-ratio:9/16}
.loop-media.r43{aspect-ratio:4/3}
.case-media>.r43{max-width:calc(72svh * 4 / 3)}
/* a tall photo and a portrait video side by side, the same height */
.case-pair{display:grid;grid-template-columns:minmax(0,1.176fr) minmax(0,1fr);gap:16px;align-items:start;max-width:calc(76svh * 1.224 + 16px);margin:0 auto}
.case-pair .photo img{aspect-ratio:1985/3000}
.case-pair .loop-media{margin:0}
/* a square photo, a tall photo and a portrait video in one row, the same height */
.case-pair.trio{grid-template-columns:minmax(0,1fr) minmax(0,.662fr) minmax(0,.5625fr);max-width:calc(76svh * 2.224 + 32px)}
.case-pair .photo.sq img{aspect-ratio:1/1}
.facts.stack{grid-template-columns:1fr;gap:26px}
.credit-line{max-width:72ch;font-size:14px;line-height:1.7;color:var(--muted)}
.credit-line+.credit-line{margin-top:8px}
.text .credit-line{margin-top:24px;font-size:14px;line-height:1.7;color:var(--muted)}
.text .credit-line+.credit-line{margin-top:8px}
.text h3.h3{margin:40px 0 0}
.text h3.h3+.credit-line{margin-top:12px}
.shots.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.shots.four>figure{grid-column:span 1}
.sec-head+.index{margin-top:0}
img.knob{object-position:50% 30%}
.next .case-media>.r43+.caption{max-width:calc(72svh * 4 / 3)}
.format p a{text-decoration:underline;text-decoration-color:rgba(209,233,220,.42);text-underline-offset:4px}
.format p a:hover{color:#fff;text-decoration-color:var(--mint)}
.credits a{text-decoration:underline;text-decoration-color:rgba(209,233,220,.42);text-underline-offset:4px}
.credits a:hover{color:#fff;text-decoration-color:var(--mint)}

/* the photo viewer */
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;padding:0;border:0;background:#05070a;color:var(--ink);overflow:hidden}
.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lb::backdrop{background:#05070a}
.lb-stage,.lb-img{touch-action:pan-y pinch-zoom}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:max(14px,env(safe-area-inset-top)) var(--gut) 12px}
.lb-count{font-size:13px;line-height:20px;color:var(--muted);font-variant-numeric:tabular-nums}
.lb-close,.lb-prev,.lb-next{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid rgba(237,241,238,.22);border-radius:4px;background:rgba(13,19,25,.86);font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--mint);border-color:var(--mint);color:#0f1b16}
.lb-stage{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;min-height:0;padding:0 var(--gut)}
/* the image box fills the stage and the photo is fitted inside it, so a large file replacing the small one does not jump */
.lb-img{width:100%;height:100%;object-fit:contain}
.lb-bottom{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 20px;padding:14px var(--gut) max(18px,env(safe-area-inset-bottom))}
.lb-cap{justify-self:center;max-width:72ch;font-size:14px;line-height:1.6;text-align:center;color:var(--ink2)}
.lb-prev{grid-column:1}
.lb-cap{grid-column:2}
.lb-next{grid-column:3}

/* 3D page */
.play-sec{padding:40px var(--gut) 72px;border-top:1px solid var(--line)}
.play-sec .project{padding:0}
.jump{display:flex;gap:10px;flex-wrap:wrap}

/* optional page cross-fade in browsers that support it */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s;animation-timing-function:steps(4)}
.menu-btn{view-transition-name:menu-btn}

/* where the wall shows no code, nothing is said about one: the sentence under Big TVs goes with the sign */
@media (hover:none),(max-width:1099px){.fx-sign,html.has-room .js-room{display:none}}
/* a large window: the home page's sign leaves the corner for the middle of the free wall right of the court (the game says where the court ends), placed by its insets so it can never leave that wall */
@media (hover:hover) and (min-width:1280px) and (min-height:740px){
  .play-hero:not(.pitch-hero) .fx-sign{top:50%;left:calc(var(--court-right,60%) + 24px);right:var(--gut);margin-inline:auto;width:fit-content;max-width:560px;transform:translateY(-50%);gap:22px;padding:18px 26px 18px 18px}
  .play-hero:not(.pitch-hero) .fx-sign>div{max-width:30ch}
  .play-hero:not(.pitch-hero) .fx-sign-title{font-size:22px;line-height:28px}
  .play-hero:not(.pitch-hero) .fx-sign-sub{margin-top:6px;font-size:15px;line-height:22px}
}
/* between a tablet and a large window the home page's plaque gives its side one column more: the two actions stay on one row, and the wall above keeps its height */
@media (min-width:1024px) and (max-width:1279px){
  .play-hero:not(.pitch-hero) .plaque-main{grid-column:1/7}
  .play-hero:not(.pitch-hero) .plaque-side{grid-column:7/13}
}
/* between a phone and a small laptop the bar under the home page's wall keeps one row, as on pitch pages (css/pitch.css): who is playing makes way for the invitation and the goal, which took two lines beside it */
@media (min-width:641px) and (max-width:899px){.play-hero:not(.pitch-hero) .fx-status{display:none}}
/* just wider than a phone, with the tilt button in the bar, the line still has no room: there the bar is set as tightly as a phone's */
@media (min-width:641px) and (max-width:699px){
  .play-hero:not(.pitch-hero) .fx-bar:has(.fx-tilt:not([hidden])){column-gap:12px}
  .play-hero:not(.pitch-hero) .fx-bar:has(.fx-tilt:not([hidden])) .fx-hint{font-size:12px}
  .play-hero:not(.pitch-hero) .fx-bar:has(.fx-tilt:not([hidden])) .fx-controls{gap:6px}
  .play-hero:not(.pitch-hero) .fx-bar:has(.fx-tilt:not([hidden])) .fx-btn{padding:0 10px}
}
/* a short or zoomed window wider than a phone: the name stands at the top of the wall and the first sentence has the free band above it, clear of the Menu button */
@media (min-width:641px) and (max-width:1023px) and (max-height:620px){
  .fx-say{display:block;position:absolute;z-index:1;top:26px;left:var(--gut);right:calc(var(--gut) + 190px);font-size:15px;line-height:21px;font-weight:500;color:var(--ink);pointer-events:none}
  .fx-say-for,.fx-say-cue{display:none}
}
/* the hand-back in a window just wider than a phone (a phone held sideways): the words' column is narrow and the wall can be as low as 320px. The card is set tighter, so the two actions stay on one row and it fits without scrolling */
@media (min-width:641px) and (max-width:900px){
  .has-media .fx-ask-body{padding:18px 20px}
  .has-media .fx-ask-sub{line-height:22px}
  .has-media .fx-ask-actions{gap:6px 12px;margin-top:16px}
  .has-media .fx-ask-actions .btn{padding:0 12px}
}
/* there the wall is low unless the window is very tall, and the Menu button reaches into the card's corner: the card stands on the foot of the wall and its words start a little lower, so the title clears the button */
@media (min-width:641px) and (max-width:900px) and (max-height:880px){
  .fx-ask-card.has-media{align-self:end}
  .has-media .fx-ask-body{padding-top:22px;padding-bottom:14px}
}
@media(max-width:1100px){
  .sec-head,.intro,.split,.foot-cta{grid-template-columns:1fr;row-gap:18px}
  .sec-head h2,.sec-head>p,.sec-head>a,.intro-main,.intro-side,.split>.l,.split>.r,.foot-cta h2,.foot-cta>div{grid-column:1/-1}
  .formats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .format:nth-child(4){border-left:0;padding-left:0}
  .ticks{grid-template-columns:1fr}
  .brief{grid-template-columns:1fr}
}
@media(max-width:1023px){
  .where{grid-template-columns:repeat(2,minmax(0,1fr))}
  .visit,.proof-row{grid-template-columns:1fr;gap:28px}
  .visit .photo{max-width:420px}
  .plaque{grid-template-columns:1fr;row-gap:20px}
  .plaque-main,.plaque-side{grid-column:1/-1}
  .teaser{grid-template-columns:1fr}
}
@media(max-width:760px){
  .pair,.pair.mixed,.cards,.steps{grid-template-columns:1fr}
  .how{grid-template-columns:140px minmax(0,1fr);gap:0 20px}
  /* beside a narrow photo the words run longer than it: the photo and its caption stay together, centred as one */
  .how .photo{display:block;grid-row:auto}
  .formats,.formats.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .format,.format+.format{padding:22px 14px 22px 0;border-left:0}
  .format:nth-child(even){padding-left:14px;border-left:1px solid var(--line)}
  .formats.two{grid-template-columns:1fr}
  .formats.two .format{padding:24px 0 28px;border-left:0}
  .formats.two .format+.format{padding-left:0;border-top:1px solid var(--line)}
  .index li{grid-template-columns:96px minmax(0,1fr);column-gap:18px;row-gap:12px}
  .index .thumb,.index .thumb-glyph{width:96px}
  .index .desc,.index .tagcell{grid-column:2/3}
  .facts{grid-template-columns:1fr;gap:26px}
  .credits li{grid-template-columns:64px 1fr;gap:6px 16px}
  .credits .p{grid-column:2/3}
  .row2{grid-template-columns:1fr}
  .cards.three{grid-template-columns:1fr}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
  .shots>figure,.shots>.s3{grid-column:span 1}
  .shots>.s6{grid-column:1/-1}
  .shots.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .shots>figure:not(.tall){grid-column:1/-1}
  .pick{grid-template-columns:1fr}
  .send .btn{width:100%}
  .sent{padding:26px 22px 24px}
  .case-pair{grid-template-columns:1fr;max-width:none}
}
@media(max-width:760px){
  /* an odd number of tall photos: the first one goes full width, the rest pair up */
  .shots>.tall:first-child:nth-last-child(odd){grid-column:1/-1}
  /* the trio on a narrow screen: the square photo on top, the tall photo and the video below it;
     the video takes the full width once it is switched to the version with sound */
  .case-pair.trio{grid-template-columns:minmax(0,1.176fr) minmax(0,1fr);max-width:calc(76svh * 1.224 + 16px)}
  .case-pair.trio>.sq,.case-pair.trio>div:has(.is-full){grid-column:1/-1}
  .wall-foot{flex-direction:column;gap:22px}
  .wall-foot>div,.wall-foot>.wall-fact{flex:none;width:100%;max-width:none}
  .wall-stage{height:340px}
  .wall-feed{padding:12px}
  .wall-card-text{font-size:18px}
  .wall-form{flex-wrap:wrap}
  .wall-form .wall-name{flex:1 1 100%;min-height:44px}
  .wall-winner-name{font-size:32px}
}
@media(max-height:480px){
  .lb-top{padding-top:8px;padding-bottom:6px}
  .lb-bottom{padding-top:6px;padding-bottom:8px}
  .lb-cap{font-size:13px;line-height:1.4}
}
@media(max-width:640px){
  :root{--gut:6vw;--top:72px}
  .menu-btn{top:max(12px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));gap:10px;padding:0 14px 0 12px}
  .home-mark{top:12px;left:16px}
  .menu-home{top:12px;left:16px}
  .play-hero{min-height:0}
  /* the first screen of a phone is the wall, the bar under it and the one line that says whose wall it is; the headline comes with the first scroll */
  .facade{flex:0 0 auto;height:calc(100svh - 144px);min-height:440px;max-height:780px}
  /* the home page's first screen is the wall with its three lines, the bar (88px) and the row of two links (48px); on a tall phone the wall stops and the plaque shows under the row */
  .play-hero:not(.pitch-hero) .facade{height:calc(100svh - 136px);min-height:420px;max-height:640px}
  .fx-status{display:none}
  .fx-bar{min-height:58px}
  /* on a touch screen the bar has its two-row height from the start, so the row under it does not move when the tilt button arrives */
  @media(pointer:coarse){.play-hero:not(.pitch-hero) .fx-bar{min-height:88px}}
  /* what is sold, for whom, and the goal: three lines on the still glass above the name. A touch goes through them to the wall. The game lowers the name to make room; where it cannot (enlarged text, a very short screen) it sets .say-off and the lines stand under the bar instead */
  .fx-say{display:block;font-size:16px;line-height:23px;font-weight:500;color:var(--ink)}
  .fx-say span{display:block}
  .fx-say-for{margin-top:4px;font-size:14px;line-height:20px;font-weight:400;color:var(--ink2)}
  .fx-say-cue{margin-top:6px;font-size:14px;line-height:20px;font-weight:500;color:var(--cyan)}
  .play-hero:not(.say-off) .fx-say{position:absolute;z-index:1;top:72px;left:var(--gut);right:var(--gut);pointer-events:none}
  /* under the bar they keep their distance by margins, not padding: the game reads the height of the lines themselves, the same on the wall and off it */
  .play-hero.say-off .fx-say{margin:14px var(--gut) 4px;text-shadow:none}
  /* two ways past the game, in one row under the bar: the film of the real wall, and the six situations with their prices */
  .fx-next{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 12px;min-height:48px;padding:0 var(--gut);border-bottom:1px solid var(--line);background:#0a0f13}
  /* each link is the full height of the row and a little wider than its words (the ring of a keyboard's focus then clears them); it lies over the row's rule, so the row stays 48px */
  .fx-next a{display:inline-flex;align-items:center;gap:8px;height:48px;margin:0 -6px -1px;padding:0 6px;font-size:14px;color:var(--ink);white-space:nowrap;text-decoration:underline;text-decoration-color:rgba(209,233,220,.42);text-decoration-thickness:1px;text-underline-offset:5px;outline-offset:-2px}
  .fx-next a:hover{text-decoration-color:var(--mint);color:#fff}
  /* under 390px the two links fill the row and their arrows are left out */
  @media(max-width:389px){.fx-next a:after{display:none}}
  /* a phone at 150% page zoom is narrower than the bar's three buttons, the plaque's button and the address with its copy button: sound and pause go under the tilt button, the button's words take two lines, the address is set smaller */
  @media(max-width:300px){
    .play-hero:not(.pitch-hero) .fx-controls{flex-wrap:wrap}
    .play-hero:not(.pitch-hero) .fx-tilt{flex-basis:100%}
    #hero-cta,.cta-row .btn{padding-top:10px;padding-bottom:10px;line-height:20px;text-align:center;white-space:normal}
    .where-direct a{font-size:16px}
  }
  @media(max-width:340px){
    .fx-say{font-size:15px;line-height:21px}
    .fx-say-cue{font-size:13px;line-height:19px}
    .play-hero:not(.say-off) .fx-say-for{display:none}
    .fx-next a{font-size:13px}
    .play-hero:not(.pitch-hero) .fx-score{font-size:12px}
  }
  /* the home page's count can be a sentence (after 'Keep playing': what a longer game is for). It keeps to the width the bar gives it and breaks there rather than run under the buttons; on the narrowest phones it is set a size smaller and stays on one line */
  .play-hero:not(.pitch-hero) .fx-score{right:0;line-height:17px;white-space:normal}
  .intro-contact{padding-bottom:24px}
  .brief form{gap:26px}
  /* on narrow phones the address and its copy button still fit their card: at its full size the card pushed the form past the gutter, and at 320 px the page slid sideways */
  @media(max-width:380px){.side-card{padding:22px 18px}.side-card .mail{font-size:19px}.side-card .with-copy{gap:10px}}
  .fx-hint{font-size:12px}
  .fx-controls{gap:6px}
  .fx-btn{height:40px;padding:0 10px}
  /* a phone that can tilt: the bar is a small console under the paddle. One line of invitation, and under it the way to play by tilting, beside sound and pause */
  .fx-bar:has(.fx-tilt:not([hidden])){row-gap:6px;padding-top:8px;padding-bottom:10px}
  .fx-bar:has(.fx-tilt:not([hidden])) .fx-left,.fx-bar:has(.fx-tilt:not([hidden])) .fx-controls{flex:1 0 100%;margin-left:0}
  .fx-bar:has(.fx-tilt:not([hidden])) .fx-hint{font-size:13px;line-height:18px;white-space:normal}
  .fx-bar:has(.fx-tilt:not([hidden])) .fx-btn{height:44px}
  .fx-tilt{flex:1 1 auto;min-width:0;gap:10px;padding:0 12px 0 14px;font-size:14px;font-weight:600}
  .tilt-icon{width:24px;height:30px}
  .fx-tilt[aria-pressed="true"] .tilt-off{display:block;margin-left:auto;font-size:12px;font-weight:500;color:var(--muted)}
  @media(max-width:340px){.fx-tilt[aria-pressed="true"] .tilt-off{display:none}}
  .fx-ask{place-items:stretch;padding:0}
  .fx-ask-card{grid-template-columns:minmax(0,1fr);align-content:center;width:auto;padding:12px var(--gut);border:0;border-radius:0;background:none;box-shadow:none}
  .fx-ask-count{flex-direction:row;align-items:flex-end;justify-content:flex-start;gap:14px;padding:0 0 22px;border:0;background:none;font-size:14px}
  .fx-ask-count canvas{width:auto!important;height:56px!important}
  .fx-ask-body{padding:0}
  .fx-ask-title{font-size:28px;line-height:1.15}
  .fx-ask-sub{margin-top:12px;font-size:17px}
  .fx-ask-actions{gap:8px 22px;margin-top:24px}
  .fx-ask-actions .btn{min-height:52px;padding:0 22px;font-size:16px}
  /* the hand-back on a phone: a column as tall as the wall, the film on top and edge to edge (16:9 where the wall has the room). The film gives way before any text does, down to 96px; with enlarged text the plate scrolls */
  .fx-ask-card.has-media{display:flex;flex-direction:column;width:auto;max-height:none;padding:0}
  .has-media .fx-ask-media{flex:1 1 auto;min-height:96px;max-height:56.25vw;border-right:0}
  .has-media .loop-media{border-radius:0}
  .has-media .fx-ask-body{flex:none;padding:16px var(--gut)}
  .has-media .fx-ask-title{margin-top:4px;font-size:22px;line-height:26px}
  .has-media .fx-ask-sub{margin-top:8px;font-size:15px;line-height:22px}
  /* the question is a button as wide as the column (52px, the height every plate's button has on a phone); 'Keep playing' is centred under it, and its focus ring is drawn inside its box so it does not lie over the button */
  .has-media .fx-ask-actions{flex-direction:column;align-items:stretch;gap:0;margin-top:14px}
  .has-media .fx-ask-actions .link-btn{padding:0;text-align:center;outline-offset:-2px}
  @media(max-width:340px){
    .has-media .fx-ask-title{font-size:19px;line-height:23px}
    .has-media .fx-ask-sub{font-size:14px;line-height:20px}
    .has-media .fx-ask-actions .btn{min-height:48px}
  }
  .plaque{padding:22px var(--gut) 36px}
  .role{font-size:min(14px,3.75vw);line-height:21px}
  .role-lg{display:none}
  .role-sm{display:inline}
  .promise{max-width:13ch;font-size:34px}
  .sub{font-size:16px;line-height:25px}
  .creds{font-size:13px;line-height:20px}
  .stamp{margin-top:8px}
  .stamp:empty{min-height:0;margin:0}
  .cta-row{margin-top:16px}
  .sec{padding:52px var(--gut)}
  .photo.small{max-width:230px}
  .visit .photo{max-width:250px}
  .sec-head{margin-bottom:30px}
  .sec-head h2{font-size:34px}
  .intro{padding:22px var(--gut) 48px}
  .onpage{gap:0 24px;padding:6px var(--gut)}
  /* a phone's Menu button stands higher and its sections begin closer to their rule */
  .onpage~.sec [tabindex="-1"]{scroll-margin-top:44px}
  .onpage~.sec .terms [tabindex="-1"]{scroll-margin-top:76px}
  .lede{font-size:28px}
  .loop-media{margin:0 -2vw}
  .case-media{padding:0}
  .case-media .loop-media{margin:0}
  .case-media .caption{padding:0 var(--gut)}
  .how h3{font-size:20px}
  .formats+.pair{margin-top:32px}
  .formats-note{margin-top:44px}
  .pair+.pair.rev{margin-top:36px;padding-top:32px}
  .pair+.screens{grid-template-columns:1fr;gap:18px;margin-top:36px;padding-top:32px}
  .pair.mixed.rev{grid-template-columns:1fr}
  .ledpair{grid-template-columns:1fr;margin:0 -2vw}
  .where{grid-template-columns:1fr}
  .where-direct{margin-top:28px}
  /* a jump to the question lands it at the top of the screen, where the Menu button stands in the right corner: its first line stops short of the button */
  #h-where:before{content:'';float:right;width:calc(124px - var(--gut));height:30px}
  .terms{padding:22px}
  .next a.nx img{width:120px}
  .foot{padding:64px var(--gut) 24px}
  .foot-cta{margin-bottom:48px}
  .foot-cta h2{font-size:40px}
  .lb-stage{padding:0}
  .lb-bottom{grid-template-columns:1fr 1fr}
  .lb-cap{grid-column:1/-1;grid-row:1}
  .lb-prev{grid-column:1;grid-row:2;justify-self:start}
  .lb-next{grid-column:2;grid-row:2;justify-self:end}
}
@media(prefers-reduced-motion:reduce){
  .fx-ask-card{animation:none}
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important;animation:none!important}
  @view-transition{navigation:none}
}