/* surr — getsurr.com. self-hosted type only; nothing on this page calls another host on load. */
@font-face{font-family:'surr-display';src:url(fonts/ArchivoExpanded.woff2) format('woff2');font-weight:800;font-display:block}
@font-face{font-family:'surr-head';src:url(fonts/ArchivoSemiExpandedBold.woff2) format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'surr-text';src:url(fonts/ArchivoRegular.woff2) format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'surr-text';src:url(fonts/ArchivoMedium.woff2) format('woff2');font-weight:500;font-display:block}
@font-face{font-family:'surr-text';src:url(fonts/ArchivoBold.woff2) format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'surr-mono';src:url(fonts/FragmentMono-Regular.woff2) format('woff2');font-weight:400;font-display:block}

:root{--bg:#050505;--ink:#E8E8E8;--grey:#7A7A7A;--grey2:#BBBBBB;--line:#1e1e1e;--red:#DE0A26;
  --sans:'surr-text',system-ui,-apple-system,sans-serif;--head:'surr-head','surr-text',system-ui,sans-serif;
  --display:'surr-display','surr-text',system-ui,sans-serif;--mono:'surr-mono',ui-monospace,Menlo,monospace;
  --vh:1vh;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg)}
body{color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;text-align:inherit;-webkit-tap-highlight-color:transparent}
a{color:inherit;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:1px solid var(--grey2);outline-offset:2px}
p{margin:0}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--grey2)}
.big{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.95}
h3{margin:0;font-family:var(--head);font-weight:700;font-size:21px;line-height:1.15;letter-spacing:-.02em}
.k{font-family:var(--mono);font-size:10px;color:var(--grey);letter-spacing:.04em;margin-bottom:8px;display:block}
.body{color:var(--grey2);font-size:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the forms' bot trap: off-screen, unreachable, never read aloud (aria-hidden) — not .sr, which screen readers read */
.hp{position:absolute;left:-10000px;top:0;width:1px;height:1px;overflow:hidden}
[hidden]{display:none!important}

/* which version: the desk on a wide, tall-enough screen held sideways (or any screen with a mouse); the snap everywhere else —
   phones, a phone on its side, an iPad held upright (owner, 2026-10-09). site.js uses the same query (deskMQ). */
.desk{display:none}
.snap-wrap{display:block}
@media (min-width:721px) and (min-height:501px) and (orientation:landscape),(min-width:721px) and (min-height:501px) and (pointer:fine){.desk{display:block}.snap-wrap{display:none}}

/* ————— desktop ————— */
body.is-desk{overflow:hidden}
.desk{position:fixed;inset:0;overflow:hidden}
.site{position:absolute;inset:0;--cell:calc(100% / 5.1)}

.band{position:absolute;left:0;right:0;top:33%;height:34%;display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cell{position:relative;border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .45s;z-index:2;outline-offset:-3px}
.cell:last-child{border-right:0}
.band.hot .cell:not(.hot):not(.open){opacity:.35}
.cell .sym{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .35s}
.cell .word{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(28px,4.2vw,54px);opacity:0;transition:opacity .35s;pointer-events:none;text-align:center}
.cell.symbolic.hot .sym{opacity:0}.cell.symbolic.hot .word{opacity:1}
.cell.open.symbolic .word{opacity:1}.cell.open.symbolic .sym{opacity:0}
/* nights keeps its room under the word, in colour */
.cell.nights.hot .sym,.cell.nights.open .sym{opacity:.4}
.cell.nights.hot .photo,.cell.nights.open .photo{filter:none}
.cell.open.map .word,.cell.open.map .sym{opacity:0}
.cell.open{z-index:6;filter:none;opacity:1}.cell.open.map{z-index:2}
.cell.surr .sym{font-size:clamp(28px,4.2vw,54px)}
.fill{width:100%;height:100%;object-fit:cover;display:block}
.ring{width:100%;height:100%;object-fit:contain;transform:scale(1.15)}
.photo{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.1) brightness(.8);transition:filter .6s}
.photo.curtain{filter:grayscale(1) brightness(.75)}

.door{position:absolute;left:24px;bottom:20px;z-index:20;font-family:var(--mono);font-size:11px;color:var(--grey2);display:flex;gap:18px}
.door a,.dl a{text-decoration:none}
.door b,.dl b{color:var(--ink);font-weight:400}
.door a:hover b{text-decoration:underline;text-underline-offset:3px}
.foot{position:absolute;right:24px;bottom:20px;z-index:20;font-family:var(--mono);font-size:10px;color:var(--grey);display:flex;gap:14px}
.foot a{text-decoration:none}.foot a:hover{color:var(--ink)}

/* veil + branches */
.veil{position:absolute;inset:0;z-index:5;background:rgba(5,5,5,.8);opacity:0;pointer-events:none;transition:opacity .5s}
.site.has-open .veil{opacity:1;pointer-events:auto}
.branch{position:absolute;z-index:10;display:none;background:var(--bg);border:1px solid var(--line)}
.branch.on{display:flex;-webkit-animation:in .5s cubic-bezier(.2,.8,.2,1);animation:in .5s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:0}}
.x{position:absolute;right:10px;top:8px;z-index:12;font-family:var(--mono);font-size:11px;color:var(--grey2);padding:6px 8px}
.x:hover{color:var(--ink)}
.br-map .x{background:rgba(5,5,5,.8);right:8px;top:8px}

.scrollwrap{position:relative;min-height:0;display:flex;flex-direction:column}
.scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.scroll::-webkit-scrollbar{display:none}
.scrollwrap .fade{position:absolute;left:0;right:0;bottom:0;height:33%;background:linear-gradient(rgba(5,5,5,0),var(--bg) 85%);pointer-events:none;transition:opacity .3s}
.scrollwrap .more{position:absolute;right:0;bottom:4px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--grey2);pointer-events:none;transition:opacity .3s}
.scrollwrap.end .fade,.scrollwrap.end .more{opacity:0}

.acc{border-top:1px solid var(--line);margin-top:12px}
.acc summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:11px;color:var(--ink);padding:10px 0}
.acc summary::-webkit-details-marker{display:none}
.acc ol{margin:0 0 12px;padding:0;list-style:none;color:var(--grey2);font-size:13px;display:grid;gap:8px}
.acc ol li{display:grid;grid-template-columns:24px 1fr;gap:8px}
.acc ol b{font-family:var(--mono);font-weight:400;font-size:10px;color:var(--grey);padding-top:3px}
.acc .lead{margin:0 0 10px;font-size:13px}
.acc .steps li{align-items:start}
.acc .steps li>span{display:flex;gap:10px;align-items:flex-start}
.pic{flex:none;width:22px;height:22px;margin-top:-2px}
.acc a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--grey)}
.acc a.tf{display:inline-block;margin:0 0 12px;font-family:var(--mono);font-size:11px;color:var(--ink);text-decoration:none}
.inlink{background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--grey);cursor:pointer;font:inherit}

/* surr: the column attached to cell one */
.br-surr{left:21.57%;width:26%;top:6%;bottom:6%;flex-direction:column;padding:26px 22px;border-left:0;gap:18px}
.br-surr .mid{flex:1;min-height:0}
.br-surr .slogan{font-size:clamp(22px,2.7vw,36px)}
.br-surr .dl{font-family:var(--mono);font-size:11px;color:var(--grey2);line-height:1.6}
/* mood rings: above the band, on the button's lines */
.br-rings{left:calc(var(--cell) * 1.1);right:var(--cell);top:2%;bottom:67%;flex-direction:row;padding:0;border-bottom:0}
.br-rings .aura{flex:0 0 calc(100vw / 5.1 - 1px);min-width:0;height:100%;border-right:1px solid var(--line)}
.br-rings .txt{flex:1 1 58%;min-width:0;min-height:0;padding:14px 18px 12px}
.br-rings .txt h3{font-size:19px;padding-right:56px}
.br-rings .txt .body{margin-top:8px;font-size:13px;line-height:1.45}
.aura{display:block;width:100%;background:var(--bg)}
/* map: the cross */
.br-map{left:calc(var(--cell) * 1.1);width:calc(var(--cell) * 3);top:0;bottom:0;border:0;background:none;pointer-events:none}
.br-map .v,.br-map .arm{pointer-events:auto}
.br-map .v{position:absolute;left:calc(100% / 3);width:calc(100% / 3);top:8%;bottom:8%;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.br-map .h{position:absolute;left:0;right:0;top:33%;height:34%;display:grid;grid-template-columns:1fr 1fr 1fr}
.br-map .arm{background:var(--bg);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.br-map .arm.l .big{font-size:clamp(18px,2.3vw,32px);overflow-wrap:break-word}
.br-map .arm.r .body{font-size:12px;line-height:1.4}
.br-map .arm.r svg{width:16px;height:16px;margin-bottom:8px}
.credit{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:var(--mono);font-size:8px;color:var(--grey);letter-spacing:.04em;z-index:2}
.look{position:absolute;inset:0;overflow:hidden}
.look .lean{position:absolute;inset:0;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.look img{width:118%;height:118%;object-fit:cover;display:block;-webkit-animation:look 19.5s ease-in-out infinite alternate;animation:look 19.5s ease-in-out infinite alternate}
@keyframes look{from{transform:translate(-9%,-6%)}to{transform:translate(-6%,-12%)}}
/* nights: text box on the right, between the band and the door line */
.br-nights{right:5%;top:67%;width:42%;height:23%;border-top:0;flex-direction:column;justify-content:flex-start;gap:10px;padding:18px 22px}
.br-nights .body{font-size:15px;padding-right:56px}
.ev{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;line-height:1.3}
.ev span,.ev a{white-space:nowrap}
.ev svg{width:15px;height:15px;margin-right:2px}
.ev a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--grey)}
.offer{white-space:nowrap}
/* the list: sized to its content, pops out to the left of cell five, centred on the band */
.br-list{left:calc(var(--cell) * 2.1);right:var(--cell);min-height:34%;justify-content:center;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);flex-direction:column;border-right:0;padding:22px 24px 24px}
.br-list h3{padding-right:56px}
.br-list .body{margin-top:6px}
form.list{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:14px;align-items:flex-end}
form.list input{background:none;border:0;border-bottom:1px solid #333;border-radius:0;color:var(--ink);font-family:var(--mono);font-size:12px;padding:6px 0;flex:1 1 30%;min-width:120px;-webkit-appearance:none;appearance:none}
form.list input::placeholder{color:var(--grey)}
form.list input[name=link]{flex-basis:100%}
/* the phone question: two small toggles under the city, neither lit until tapped */
form.list .phone{flex-basis:100%;display:flex;gap:8px}
form.list .phone button{font-family:var(--mono);font-size:11px;padding:5px 11px;border:1px solid #333;border-radius:999px;color:var(--grey)}
form.list .phone button[aria-pressed=true]{border-color:var(--ink);color:var(--ink)}
.go{font-family:var(--mono);font-size:11px;padding:7px 12px;border:1px solid var(--grey2);border-radius:999px;white-space:nowrap}
.go:disabled{opacity:.6;cursor:default}
.err{flex-basis:100%;font-family:var(--mono);font-size:11px;color:var(--grey2)}
.done{margin-top:14px;color:var(--ink);font-size:14px}
form.ask{margin:0 0 12px}
form.ask .cap{display:flex;align-items:center;gap:12px;border:1px solid #333;border-radius:999px;padding:6px 6px 6px 16px}
form.ask .cap:focus-within{border-color:var(--grey2)}
form.ask input{flex:1;min-width:0;background:none;border:0;border-radius:0;color:var(--ink);font-family:var(--mono);font-size:16px;padding:4px 0;-webkit-appearance:none;appearance:none}
form.ask input::placeholder{color:var(--grey)}
form.ask input:focus-visible{outline:none}
form.ask .dot{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
form.ask .dot:disabled{opacity:.6;cursor:default}
form.ask .err{margin:8px 0 0 16px}
.beta .done{margin:0 0 12px}

/* the radio: "the chip" (brief getsurr-site-radio-chip; sizes, easing and timings from the mockup
   sap-business/inspo/website-radio-chip-2026-10-21.html). a black capsule: the light, the display window with the mix's own wave,
   the time, play/pause, fold. on the desk it pops out of the nights tile and can be dragged; on the phone it sits under the header.
   SoundCloud's player does the sound, hidden in the window (.sc); --mood is the mix's mood colour (site.js, from RADIO_MOOD). */
.chip{--lcd:#0d1012;--lcd-ink:#d9dde0;--lcd-dim:#3a4047;position:absolute;z-index:25;display:flex;align-items:center;gap:8px;height:38px;padding:0 8px 0 10px;background:#0a0a0a;border:1px solid var(--line);border-radius:999px;
  font-family:var(--mono);font-size:10px;line-height:1;color:var(--grey2);font-variant-numeric:tabular-nums;cursor:grab;
  box-shadow:inset 0 1px 0 #181818, 0 6px 24px rgba(0,0,0,.6);
  transition:left .6s cubic-bezier(.2,.8,.2,1),top .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s,width .35s cubic-bezier(.2,.8,.2,1)}
.chip.dragging{transition:none;cursor:grabbing}
.chip.hidden-chip{opacity:0;transform:scale(.2);pointer-events:none}
.chip:hover{border-color:#333}
.chip:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.chip .led{width:5px;height:5px;border-radius:50%;border:1px solid var(--mood,var(--grey));background:none;flex:none;box-sizing:border-box;transition:transform .12s}
.chip canvas{display:block;height:22px;width:150px;flex:none;background:var(--lcd);border:1px solid #171b1e;border-radius:2px;
  background-image:radial-gradient(rgba(255,255,255,.035) .6px,transparent .7px);background-size:3px 3px}
.chip canvas{cursor:pointer;touch-action:none}
.chip .t{white-space:nowrap;color:var(--grey2);min-width:34px;text-align:right}
.chip button{all:unset;cursor:pointer;color:var(--ink);font-family:var(--mono);white-space:nowrap}
.chip button:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.chip .pp{width:22px;height:22px;border-radius:50%;border:1px solid #2a2a2a;display:flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box}
.chip .pp:hover{border-color:var(--grey2)}
.chip .tri{width:0;height:0;border-left:6px solid var(--ink);border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:1px}
.chip .pz{display:none;gap:2px}.chip .pz i{display:block;width:2px;height:8px;background:var(--ink)}
.chip.on .tri{display:none}.chip.on .pz{display:flex}
.chip .fold{color:var(--grey);font-size:11px;padding:0 2px}
/* the label scrolls through the display window while it plays (stands still when paused); it sits over the window, last in the
   tab order (play, fold, mobilegirl). two copies so the loop has no seam; the second is hidden from screen readers. */
.chip .name{display:none;position:absolute;left:24px;top:50%;width:148px;height:20px;margin-top:-10px;line-height:20px;overflow:hidden;white-space:nowrap;color:var(--grey2);pointer-events:none;text-shadow:0 0 2px var(--lcd),0 0 4px var(--lcd)}
.chip.on .name,.chip.mid .name{display:block}
.chip .run{display:inline-flex;-webkit-animation:chipname 14s linear infinite;animation:chipname 14s linear infinite}
.chip .run>span{padding:0 4em 0 6px}
.chip:not(.on) .run,.chip .name:hover .run{-webkit-animation-play-state:paused;animation-play-state:paused}
.chip .name a{pointer-events:auto;color:var(--lcd-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--lcd-dim)}
@keyframes chipname{to{transform:translateX(-50%)}}
@keyframes chipload{50%{opacity:.25}}
@media (prefers-reduced-motion:no-preference){.chip.loading .led{-webkit-animation:chipload 1.4s ease-in-out infinite;animation:chipload 1.4s ease-in-out infinite}}
/* SoundCloud's player: 1 px tall and invisible over the window; when a hidden start does not take (some iPhones), its own strip
   shows in the window for one more tap (.strip). never display:none — the iframe would stop or reload. */
.chip .sc{position:absolute;left:24px;top:50%;width:148px;height:20px;margin-top:-10px;pointer-events:none}
.chip .sc iframe{display:block;width:100%;height:1px;border:0;opacity:0}
.chip.strip .sc{pointer-events:auto}
.chip.strip .sc iframe{height:20px;opacity:1;background:var(--lcd)}
.chip.strip .name{display:none}
/* folded: only the light and the live meter remain */
.chip.folded{padding:0 10px;gap:7px;cursor:pointer}
.chip.folded canvas,.chip.folded .t,.chip.folded .pp,.chip.folded .fold,.chip.folded .name{display:none}
.chip.folded .sc{visibility:hidden}
.chip .vu{display:none;align-items:flex-end;gap:2px;height:12px}
.chip.folded .vu{display:flex}
.chip .vu i{width:2px;height:2px;background:var(--lcd-dim);display:block;transition:height .08s}
.chip.on .vu i{background:var(--mood,var(--ink))}
/* desk: resting top right, draggable (pointer events, touch too) */
.site .chip{right:24px;top:20px;touch-action:none;-webkit-user-select:none;user-select:none}
/* phone: under the header, top right, not draggable (the page snaps) */
.snap-wrap .chip{position:fixed;z-index:9;right:12px;top:calc(46px + env(safe-area-inset-top));height:34px;cursor:default}
.snap-wrap .chip.folded{cursor:pointer}
.snap-wrap .chip canvas{width:110px;height:20px}
.snap-wrap .chip .name,.snap-wrap .chip .sc{width:108px;height:18px;margin-top:-9px;line-height:18px}
.snap-wrap .chip.strip .sc iframe{height:18px}

/* the splash (only at the door) */
.splash{position:absolute;inset:0;z-index:30;cursor:pointer}
.splash .layer{position:absolute;inset:0;will-change:transform;background:radial-gradient(ellipse at 50% 42%,#1d1d21 0,#0b0b0d 60%,#050506 100%);transition:transform 1.1s cubic-bezier(.7,0,.2,1) .55s,opacity 1.1s .55s}
.splash .layer.a{-webkit-clip-path:polygon(0 0,100% 0,0 100%);clip-path:polygon(0 0,100% 0,0 100%)}
.splash .layer.b{-webkit-clip-path:polygon(100% 0,100% 100%,0 100%);clip-path:polygon(100% 0,100% 100%,0 100%)}
.splash.cut .layer.a{transform:translate(-9%,-9%);opacity:0}
.splash.cut .layer.b{transform:translate(9%,9%);opacity:0}
.splash.cut{pointer-events:none}
.splash .pair{position:absolute;width:44%;height:22vw;will-change:transform;transition:transform .7s cubic-bezier(.3,0,.2,1)}
.splash .s1{left:4%;bottom:8%;transform:rotate(-32deg)}
.splash .s2{right:6%;top:6%;transform:rotate(148deg)}
.splash.cut .s1{transform:rotate(-30deg) translate(7%,-6%)}
.splash.cut .s2{transform:rotate(146deg) translate(7%,-6%)}
.splash .cum{position:absolute;right:9%;top:46%;height:12px;width:auto;transition:opacity .4s}
.splash.cut .cum{opacity:0}
.s-body{fill:url(#latex2);stroke:#000;stroke-width:1}
.s-bow{fill:none;stroke:url(#latex2);stroke-width:16}
.s-hi{fill:none;stroke:url(#hi);stroke-width:2.8}
.s-spec{fill:#fff;opacity:.55;filter:url(#soft)}
.s-refl{fill:url(#refl);opacity:.5;mix-blend-mode:screen}
.s-rim{fill:none;stroke:#c8c8d0;stroke-width:1}
.s-screw{fill:url(#latex2);stroke:#0a0a0a}
/* each scissor is five stacked layers (index.html). the shadows are the old drop-shadow(0 20px 24px rgba(0,0,0,.9)) taken apart —
   a black outline 20px down, blur(12px), at .9 — so the graphics card blurs them and nothing is repainted while they move;
   and the second blade turns as its own layer round the screw — mirrored, so the screw sits at 142,100 and the turn runs the other way */
.sc>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sc>svg.sh{top:20px;bottom:-20px;opacity:.9;filter:blur(12px);will-change:transform}
.sc .bl{transform-origin:35.5% 50%;will-change:transform;transition:transform .7s cubic-bezier(.3,0,.2,1)}
/* the blade's opening, at rest and cut (the angles are written out, not a shared variable: changing one makes Safari repaint every layer) */
.splash .bl{transform:rotate(14deg)}.splash.cut .bl{transform:rotate(24deg)}
.ssplash .bl{transform:rotate(12deg)}.ssplash.cut .bl{transform:rotate(30deg)}
.sc use{transform:scaleX(-1);transform-box:view-box;transform-origin:50% 50%}

/* ————— phone: snap ————— */
.snap{position:fixed;inset:0;height:calc(var(--vh) * 100);overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:y mandatory;scrollbar-width:none;background:var(--bg)}
.snap::-webkit-scrollbar{display:none}
.snap.open{overflow-y:auto}
.snap > section{height:calc(var(--vh) * 100);scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;position:relative;overflow:hidden;border-top:1px solid var(--line)}
.ssplash{background:radial-gradient(ellipse at 50% 40%,#1d1d21 0,#0b0b0d 60%,#050506 100%);align-items:center;justify-content:center;cursor:pointer;border-top:0!important}
.ssplash .one{position:relative;display:block;width:78%;height:39vw;transform:rotate(-38deg);will-change:transform;transition:transform .7s cubic-bezier(.3,0,.2,1),opacity .5s .4s}
.ssplash .cum{position:absolute;right:12%;bottom:22%;height:12px;width:auto;transition:opacity .4s}
.ssplash.cut .one{transform:rotate(-40deg) translate(14%,0);opacity:0}
.ssplash.cut .cum{opacity:0}
.s0{border-top:0!important}
.s0.arrive{-webkit-animation:arrive .6s cubic-bezier(.2,.8,.2,1);animation:arrive .6s cubic-bezier(.2,.8,.2,1)}
@keyframes arrive{from{opacity:0;transform:translateY(24px)}}
.land{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.land .big{font-size:56px}
.down{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(86px + env(safe-area-inset-bottom));padding:12px 20px!important;font-size:18px}
.sec .bg{position:relative;height:44%;flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center}
.sec .bg > img,.sec .bg > canvas{width:100%;height:100%;object-fit:cover;display:block}
.sec .bg .mark{font-size:64px}
.sec .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(5,5,5,0) 35%,var(--bg) 100%);pointer-events:none}
.sec .bg .credit{left:auto;right:12px;bottom:6px;text-align:right;z-index:3}
.sec .word{position:absolute;left:20px;right:20px;bottom:56%;font-size:32px;z-index:2;line-height:1}
.sec.surr .word{font-size:28px}
.sec .scrollwrap{flex:1;min-height:0;margin-bottom:calc(46px + env(safe-area-inset-bottom))}
.sec .scrollwrap .more{right:20px;bottom:6px}
.sec .scroll{padding:8px 20px 28px;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(12px);transition:opacity .6s .1s,transform .6s .1s}
.sec.in .scroll{opacity:1;transform:none}
.sec .scroll .k{margin-bottom:0}
.sec .body{font-size:14px}
.sec .acc{margin-top:0}
.sec .row{display:flex;gap:14px;align-items:flex-start}
.sec .row svg{flex:none;width:16px;height:16px;margin-top:3px}
.sec .row .body{font-size:13px}
.sec .mapline{font-size:24px}
.sec form.list input{flex-basis:100%;font-size:16px}
.sec form.list{margin-top:4px}
.sec form.list .phone button{font-size:12px;padding:8px 14px}
/* the footer on the phone: under the list form, the last thing on the last screen */
.sfoot{margin-top:28px;font-family:var(--mono);font-size:10px;color:var(--grey);display:flex;flex-wrap:wrap;gap:8px 14px}
.sfoot a{text-decoration:none}
.snapdoor{position:fixed;left:0;right:0;bottom:0;z-index:8;background:var(--bg);border-top:1px solid var(--line);padding:12px 20px calc(12px + env(safe-area-inset-bottom));font-family:var(--mono);font-size:11px;color:var(--grey2);display:flex;justify-content:space-between;gap:12px}
.snapdoor a{white-space:nowrap;text-decoration:none}
.snapdoor b{color:var(--ink);font-weight:400}
.menu{position:fixed;top:0;left:0;right:0;z-index:9;height:calc(40px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 20px 0;background:var(--bg);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:stretch;font-size:10px;letter-spacing:.03em;transform:translateY(-100%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.menu.down{transform:none}
.menu button{font-size:10px;color:var(--grey);padding:0 2px;border-bottom:1px solid transparent;display:flex;align-items:center}
.menu button.on{color:var(--ink);border-bottom-color:var(--ink)}
.sec .word{cursor:pointer}
@media (prefers-reduced-motion:reduce){.menu{transform:none;opacity:0;pointer-events:none;transition:opacity .2s}.menu.down{opacity:1;pointer-events:auto}}
.ticks{position:fixed;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:9;opacity:0;transition:opacity .3s;pointer-events:none}
.ticks.on{opacity:1}
.ticks i{width:3px;height:12px;border-radius:2px;background:#2a2a2a;transition:background .3s}
.ticks i.on{background:var(--ink)}
.snap-wrap.pre .snapdoor{opacity:0;pointer-events:none}
.snapdoor{transition:opacity .4s}

/* ————— the drive's fuse (the band's fifth tile, the phone's drive screen, the drive page) — path and timing from the a3 mockup ————— */
.fuse{display:block;width:100%;height:auto}
.fuse .cord{stroke:#8a8a8a;stroke-width:2;fill:none;stroke-dasharray:1 1;-webkit-animation:burn 14s linear infinite;animation:burn 14s linear infinite}
.fuse .cord.dark{stroke:#262626;-webkit-animation:none;animation:none;stroke-dasharray:none}
.fuse .mover{offset-path:path("M 4 34 C 50 4, 100 12, 130 28 S 210 50, 250 22 S 320 6, 376 26");offset-rotate:0deg;-webkit-animation:travel 14s linear infinite;animation:travel 14s linear infinite}
.fuse .spark{fill:var(--red)}
.fuse .glow{fill:var(--red);opacity:.35;-webkit-animation:flick .25s steps(2) infinite alternate;animation:flick .25s steps(2) infinite alternate}
@keyframes burn{from{stroke-dashoffset:0}to{stroke-dashoffset:-1}}
@keyframes travel{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes flick{to{transform:scale(1.25)}}
.cell.fusecell .fuse{width:82%}
.sec.drive .bg .fuse{width:84%}
.sec.drive .go{align-self:flex-start;text-decoration:none;color:var(--ink)}

/* the snap on a short, wide screen (a phone on its side) or a tall tablet (an iPad upright): the picture beside the words
   (owner, 2026-10-09: sideways option a, iPad option c). the picture fills the left, the big word at its foot; the words scroll on the right. */
@media (max-width:720px) and (orientation:landscape),(orientation:landscape) and (max-height:500px),(min-width:721px) and (orientation:portrait) and (pointer:coarse){
  .snap>section.sec{flex-direction:row}
  .sec .bg{height:auto;width:42%;align-self:stretch}
  .sec .bg::after{background:linear-gradient(90deg,rgba(5,5,5,0) 55%,var(--bg) 100%)}
  .sec .word{left:20px;right:auto;width:calc(42% - 30px);bottom:72px;font-size:26px}
  .sec .bg .mark{font-size:48px}
  .sec .scrollwrap{margin-top:44px}
}
/* a phone on its side: the splash scissors sized to the short screen, same shape (2 : 1) */
@media (max-width:720px) and (orientation:landscape),(orientation:landscape) and (max-height:500px){.ssplash .one{width:min(78%,120vh);height:min(39vw,60vh)}}
@media (min-width:721px) and (orientation:portrait) and (pointer:coarse){
  .sec .word{font-size:40px}
  .sec .bg .mark{font-size:80px}
  .sec .scroll{padding:8px 28px 28px}
  .sec .body{font-size:16px}
}

/* ————— plain pages: deal, press, support, 404 ————— */
.plain{max-width:40rem;margin:0 auto;padding:max(28px,calc(env(safe-area-inset-top) + 16px)) 20px 48px;min-height:100%;display:flex;flex-direction:column}
.plain header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:48px}
.plain header a{text-decoration:none}
.plain header .big{font-size:18px}
/* the way out (seen): a close word at the top right, after the tagline */
.plain header .mono{margin-left:auto}
.plain header .x{position:static;margin-left:22px;padding:6px 0;color:var(--ink)}
.plain h1{margin:0 0 24px;font-family:var(--display);font-weight:800;font-size:36px;letter-spacing:-.03em;line-height:1}
.plain main{flex:1}
.plain main p{color:var(--grey2);margin:0 0 14px;max-width:34rem}
.plain main section{margin:0 0 22px}
.plain main section p{margin:0}
.plain main a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--grey)}
.plain ol{margin:0 0 24px;padding:0;list-style:none;display:grid;gap:12px;color:var(--grey2)}
.plain ol li{display:grid;grid-template-columns:28px 1fr;gap:8px}
.plain ol b{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--grey);padding-top:3px}
.plain footer{margin-top:48px;font-family:var(--mono);font-size:10px;color:var(--grey);display:flex;flex-wrap:wrap;gap:8px 14px}
.plain footer a{text-decoration:none}.plain footer a:hover,.plain footer a[aria-current]{color:var(--ink)}

/* ————— "seen, not tracked" as a sheet over the one page (site.js opens it from the map text's link).
   on the phone it rises from the bottom, with a grab bar and a swipe down to dismiss; on the desk it sits in the middle.
   its words are set in the plain page's type; the page of its own at /seen/ is the same words from the same place. ————— */
.sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:rgba(5,5,5,.8);opacity:0;transition:opacity .35s}
.sheet[hidden]{display:none}
.sheet.in{opacity:1}
.sheet .pane{position:relative;width:100%;max-width:40rem;max-height:calc(100% - 40px);display:flex;flex-direction:column;box-sizing:border-box;background:var(--bg);border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;transform:translateY(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);touch-action:pan-y}
.sheet.in .pane{transform:none}
.sheet .pane::before{content:"";position:absolute;left:50%;top:10px;width:36px;height:3px;margin-left:-18px;border-radius:2px;background:#2a2a2a}
.sheet .x{color:var(--ink)}
.sheet .words{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:40px 20px calc(28px + env(safe-area-inset-bottom))}
.sheet h1{margin:0 0 24px;font-family:var(--display);font-weight:800;font-size:36px;letter-spacing:-.03em;line-height:1}
.sheet section{margin:0 0 22px}
.sheet section:last-child{margin-bottom:0}
.sheet section p{color:var(--grey2);margin:0;max-width:34rem}
@media (min-width:721px) and (min-height:501px) and (orientation:landscape),(min-width:721px) and (min-height:501px) and (pointer:fine){
  .sheet{align-items:center}
  .sheet .pane{max-height:calc(100% - 96px);border-bottom:1px solid var(--line);border-radius:14px;transform:translateY(24px)}
  .sheet.in .pane{transform:none}
  .sheet .pane::before{display:none}
  .sheet .words{padding:40px 28px 32px}
}
/* legal texts (privacy, imprint): the generator's own headings and lists, in the plain page's type */
.legal{color:var(--grey2);font-size:14px;overflow-wrap:anywhere}
.legal h1{margin:0 0 20px;font-family:var(--head);font-weight:700;font-size:22px;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.legal h2{margin:36px 0 12px;font-family:var(--head);font-weight:700;font-size:17px;line-height:1.25;color:var(--ink)}
.legal h3{margin:24px 0 8px;font-family:var(--head);font-weight:700;font-size:15px;color:var(--ink)}
.legal ul{margin:0 0 14px;padding-left:18px;display:grid;gap:6px}
.legal strong{color:var(--ink);font-weight:500}
.legal p{margin:0 0 12px}

/* pictures arrive with a fade (site.js adds .ok once one has loaded) */
.cell .sym img,.sec .bg > img,.look img{opacity:0;transition:opacity .4s,filter .6s}
.cell .sym img.ok,.sec .bg > img.ok,.look img.ok{opacity:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{-webkit-animation:none!important;animation:none!important;transition:none!important;scroll-behavior:auto!important}
  /* the radio chip only fades in and out (no travel, no growing); its label stands still and the light does not breathe (site.js) */
  .chip{transition:opacity .2s!important}
  .chip.hidden-chip{transform:none}
}