/* Serendipity v2: one screen; you travel forward through the field. */
@font-face{font-family:"IBM Plex Mono";font-weight:300;font-style:normal;font-display:swap;src:url("fonts/ibm-plex-mono-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
:root{--ground:#08080a;--ink-0:#fbfbf9;--ink-1:#e8e8e6;--ink-2:#c4c4bf;--ink-3:#9a9a96;--ink-4:#82827e;--ink-5:#5e5e5c;--amber:#c9a878;
  --line:rgba(255,255,255,.16);--sans:"Helvetica Neue",Helvetica,Arial,sans-serif;--mono:"IBM Plex Mono","Courier New",ui-monospace,monospace;--edge:max(22px,3.2vw)}
*{box-sizing:border-box}
html{background:var(--ground)}
body{margin:0;color:var(--ink-0);font-family:var(--sans);-webkit-font-smoothing:antialiased}
html.js,.js body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;scrollbar-width:none}
.js ::-webkit-scrollbar{display:none}
.js body{touch-action:none}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:400}
.label{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);display:flex;align-items:center;gap:14px}
.dash{display:inline-block;width:28px;height:1px;background:var(--amber)}
.amber{color:var(--amber)}
:focus-visible{outline:1px solid rgba(255,255,255,.3);outline-offset:6px}

#scene{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100dvh;z-index:0;overflow:hidden}
#scene canvas{display:block;width:100%!important;height:100%!important}

.frame .f{position:fixed;z-index:10;color:var(--ink-3);opacity:0;transition:opacity 1.8s ease .4s}
.ready .frame .f{opacity:1}
.tl{top:var(--edge);left:var(--edge)} .tr{top:var(--edge);right:var(--edge);font-variant-numeric:tabular-nums}
.bl{bottom:var(--edge);left:var(--edge)} .br{bottom:var(--edge);right:var(--edge);color:var(--ink-5)!important}

/* stops: text emerges from the fog */
.js .stops{position:fixed;inset:0;z-index:5;pointer-events:none}
.st{padding:16vh var(--edge)}
.js .st{position:absolute;inset:0;padding:0;opacity:0;visibility:hidden;filter:blur(14px);transform:scale(.97);
  transition:opacity 1.2s cubic-bezier(.2,.6,.2,1),filter 1.5s cubic-bezier(.2,.6,.2,1),transform 1.8s cubic-bezier(.2,.6,.2,1),visibility 0s linear 1.5s}
.js .st.on{opacity:1;visibility:visible;filter:blur(0);transform:none;transition-delay:.25s,.25s,0s,0s}
.js .st.on a{pointer-events:auto}

h1{margin:0;font-weight:400;font-size:clamp(54px,8.4vw,124px);line-height:1;letter-spacing:-.03em;color:var(--ink-0)}
.sub{margin:22px 0 0;color:var(--ink-2);font-weight:300;font-size:12px;letter-spacing:.3em}
.s0{display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--edge) 11vh!important}
.big{margin:0;font-weight:300;font-size:clamp(28px,3.6vw,52px);line-height:1.16;letter-spacing:-.018em;color:var(--ink-0);max-width:17em}
.def{margin:22px 0 34px;font-weight:300;font-size:clamp(17px,1.6vw,21px);color:var(--ink-2)}
.s1,.s2,.s3,.s4,.s5,.s6,.s7{display:flex;flex-direction:column;justify-content:center;padding:0 var(--edge) 0 max(var(--edge),10vw)!important}
.s4 .big,.s7 .big{max-width:24em}
.mono-s{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.row{margin:38px 0 0;display:flex;gap:18px;color:var(--ink-2);font-size:11px}
.row i{font-style:normal;color:var(--ink-5)}

.lines{margin-top:30px;max-width:34em}
.lines p{margin:0 0 .7em;font-weight:300;font-size:clamp(19px,1.9vw,26px);line-height:1.35;color:var(--ink-2)}
.lines .hi{margin-top:1.1em;color:var(--ink-0)}
.titles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:860px}
.titles li{display:flex;gap:16px;align-items:baseline;font-weight:300;font-size:clamp(15px,1.35vw,19px);line-height:1.3;color:var(--ink-1)}
.titles .n{font:400 10.5px/1 var(--mono);letter-spacing:.12em;color:var(--amber);flex:none;min-width:1.4ch}
.contained{margin:40px 0 0;font-weight:300;font-size:clamp(20px,2vw,28px);line-height:1.3;color:var(--ink-0)}
/* final stop: the centre of the field */
.end-mail,.end-home{position:absolute;bottom:var(--edge);color:var(--ink-2);transition:color .6s;font-size:10.5px}
.end-mail{left:var(--edge);text-transform:none;letter-spacing:.12em}
.end-home{right:var(--edge)}
.end-mail:hover,.end-home:hover,.end-mail:focus-visible,.end-home:focus-visible{color:var(--ink-0);outline:none}
.hint-drag{position:absolute;left:0;right:0;top:68%;margin:0;text-align:center;color:var(--ink-3);transition:opacity 2.4s ease}
.hint-drag.gone{opacity:0}
.final .frame .bl{opacity:0!important}

.final body{cursor:grab} .final.dragging body{cursor:grabbing}
.ticks{position:fixed;z-index:10;right:var(--edge);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;opacity:0;transition:opacity 1.8s ease .4s}
.ready .ticks{opacity:1}
.ticks button{all:unset;cursor:pointer;margin-left:auto;width:12px;height:1px;background:var(--ink-5);transition:width .6s,background .6s}
.ticks button.on{width:26px;background:var(--amber)}

@media (max-width:760px){
  :root{--edge:22px}
  .s0{padding-bottom:13vh!important}
  .s1,.s2,.s3,.s4,.s5,.s6,.s7{padding:0 var(--edge)!important}
  .row{gap:10px;font-size:10px;letter-spacing:.18em}
  .ticks{display:none}
  .titles{gap:8px;margin-top:22px}
  .titles li{font-size:14.5px;gap:12px}
  .contained{margin-top:26px;font-size:19px}
  .lines p{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .js .st{filter:none;transform:none;transition:opacity .6s ease,visibility 0s linear .6s}
  .js .st.on{transition-delay:0s}
}

.motion{all:unset;position:absolute;left:50%;top:76%;transform:translateX(-50%);padding:14px 22px;border:1px solid var(--line);color:var(--ink-1);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;pointer-events:auto}
.motion[hidden]{display:none}

.frame .snd{background:none;border:0;padding:0;margin:0;cursor:pointer;pointer-events:auto;transition:color .6s;-webkit-appearance:none;appearance:none}
.snd:hover,.snd:focus-visible{color:var(--ink-0)}
.frame .snd{color:var(--ink-2)!important;white-space:nowrap}.frame .snd:hover{color:var(--ink-0)!important}
.frame .snd{z-index:30}
.end-mail,.end-home{white-space:nowrap}
a.f.tl{color:inherit;text-decoration:none;pointer-events:auto}a.f.tl:hover{color:var(--ink-0)}
.tech{list-style:none;margin:0;padding:0}
.tech li,.mark{position:absolute;left:0;top:0;opacity:0;visibility:hidden}
.tech li{max-width:min(330px,60vw);display:flex;flex-direction:column;gap:8px}
.tech b{font-weight:400;font-size:11px;color:var(--ink-0)}
.tech span{font:300 11.5px/1.6 var(--mono);letter-spacing:.03em;color:var(--ink-3)}
.mark{font-size:10px;color:var(--ink-2);letter-spacing:.3em}
.mark.field{color:var(--ink-0);display:flex;align-items:center;gap:8px;font-size:9.5px}
.mark.field .dash{width:12px}
.nogl .tech li,.nogl .mark{position:static;opacity:1;visibility:visible;margin:0 0 18px}
.nogl .tech{position:absolute;left:max(var(--edge),10vw);top:24vh}
.nogl .mark{display:none}
@media (max-width:600px){.tech span{font-size:10.5px}}
.tech-head{position:absolute;left:max(var(--edge),10vw);top:14vh}
@media (max-width:600px){.tech-head{top:12vh}}
.tech b{display:flex;align-items:center;gap:12px}.tech .logo{height:34px;width:auto;display:block;opacity:.92}
a.f.tl{white-space:nowrap}
a.home{color:var(--ink-1);text-decoration:none;pointer-events:auto;white-space:nowrap;display:flex;align-items:center;gap:8px;padding:10px 0 10px 14px;margin:-10px 0 -10px -14px;transition:color .4s}
a.home .arr{transition:transform .4s}
a.home:hover,a.home:focus-visible{color:var(--ink-0)}a.home:hover .arr{transform:translate(2px,-2px)}
.frame .snd.tl{white-space:nowrap}
.frame .f{white-space:nowrap}
.frame a.home{color:var(--ink-1)}
.frame a.home:hover,.frame a.home:focus-visible{color:var(--ink-0)}
.end-home.end-behind{right:auto;left:50%;transform:translateX(-50%);color:var(--ink-1);display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:-10px}
.end-behind span{transition:transform .4s}.end-behind:hover span{transform:translateX(3px)}
.frame a.home{color:var(--ink-1)!important}
.frame a.home:hover,.frame a.home:focus-visible{color:var(--ink-0)!important}
.frame a.home{text-transform:none;letter-spacing:.14em}
.s3{align-items:center;padding:0 var(--edge)!important}
.s3 .titles{width:max-content;max-width:calc(100vw - 2*var(--edge))}
@media (min-width:601px){.s3 .titles li{white-space:nowrap}}
.tech li.hero{max-width:none;align-items:center;gap:22px;text-align:center}
.tech .logo-hero{width:auto;height:clamp(110px,22vh,190px);display:block}
.tech li.hero b{font-size:12px;letter-spacing:.32em;white-space:nowrap}
.titles .nm{display:inline}
.titles .ch{display:inline-block;white-space:pre;will-change:transform}
.titles .n{display:inline-block;will-change:transform}
/* centred text */
.s1,.s2,.s4,.s5,.s6,.s7{align-items:center;text-align:center;padding:0 var(--edge)!important}
.s1 .row,.s2 .row,.s4 .row,.s5 .row,.s6 .row,.s7 .row{justify-content:center}
.s1 .big,.s2 .big,.s4 .big,.s5 .big,.s6 .big,.s7 .big,.s1 .lines,.s2 .lines,.s4 .lines,.s5 .lines,.s6 .lines,.s7 .lines{margin-left:auto;margin-right:auto}
.s0 .sub{white-space:nowrap}
@media (max-width:760px){
  .end-mail{left:50%;transform:translateX(-50%);bottom:calc(var(--edge) + 40px)}
  .end-home.end-behind{bottom:calc(var(--edge) + 74px)}
}
/* loader — waits for the sound, same as the home page */
.sloader{position:fixed;inset:0;z-index:50;background:var(--ground,#08080a);transition:opacity 1.2s ease,visibility 0s linear 1.2s}
.sloader .bar{position:absolute;left:0;top:0;height:1px;width:0;background:var(--ink-2,#9a9a96);transition:width .3s ease}
.sloader .pct{position:absolute;left:var(--edge,32px);bottom:calc(var(--edge,32px) + 6px);font-weight:300;font-size:clamp(80px,13vw,180px);line-height:.8;letter-spacing:-.04em;color:var(--ink-1,#d6d6d2);font-variant-numeric:tabular-nums}
.sloader .pct::after{content:"%";font-size:.4em;letter-spacing:0;margin-left:.06em;color:var(--ink-4,#55554f)}
.snd-ready .sloader{opacity:0;visibility:hidden}
@media (prefers-reduced-motion:reduce){.sloader{transition:opacity .4s ease,visibility 0s linear .4s}}
.sloader .pct{transition:opacity 1.2s ease}
.sloader .in{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;font-family:var(--sans);font-weight:400;font-size:clamp(54px,8.4vw,124px);line-height:1;letter-spacing:-.03em;color:var(--ink-0);opacity:0;pointer-events:none}
.sloader.is-in{cursor:pointer;background:rgba(8,8,10,.8);transition:background-color 2.4s ease,opacity 1.2s ease,visibility 0s linear 1.2s}
.sloader.is-in .pct,.sloader.is-in .bar{opacity:0;transition:opacity .5s ease}
.sloader.is-in .in{animation:sp-in-flash .9s ease-out forwards}
@keyframes sp-in-flash{0%{opacity:0}18%{opacity:1;text-shadow:0 0 28px rgba(255,255,255,.55)}100%{opacity:1;text-shadow:0 0 0 rgba(255,255,255,0)}}
/* last page note — written in, hidden until a time is chosen (html.note-on or remove [hidden]) */
.end-note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(36em,calc(100% - 2 * var(--edge)));margin:0;display:flex;flex-direction:column;gap:1.1em;color:var(--ink-2);font-size:clamp(14px,1.15vw,17px);line-height:1.6;text-align:center;text-wrap:pretty;opacity:0;transition:opacity 2s ease;pointer-events:none}
.end-note p{margin:0}
.end-note[hidden]{display:flex;visibility:hidden}
.note-on .end-note{visibility:visible;opacity:1}

/* phones: no long-press select / callout / blue tap flash on the field */
html, body, canvas, #scene, .stage { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }