:root{color-scheme:light;--paper:#f7f6f2;--ink:#21213e;--accent:#ffd400;--muted:#77777f;--button-text:#fff}
:root[data-theme="dark"]{color-scheme:dark;--paper:#21213e;--ink:#f7f6f2;--muted:#b5b4bd;--button-text:#21213e}
:root[data-theme="dark"] .footer-brand img{filter:invert(96%) sepia(8%) saturate(184%) hue-rotate(354deg) brightness(103%) contrast(94%)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper)}
body{color:var(--ink);font-family:'pragmatica-extended',Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--accent);color:var(--ink)}

/* The 3D layer sits between the paper and the type that floats over it (wordmark, tagline, controls). */
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;display:block}

main{position:relative;min-height:calc(100svh - 100px);display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:70px 5vw 140px}
.composition{min-width:0;width:100%;text-align:center}
.wordmark{position:relative;z-index:3;margin:0 0 clamp(18px,2.3vh,28px);font-size:clamp(16px,1.55vw,24px);font-weight:900;letter-spacing:.02em;line-height:1}
h1{position:relative;margin:0;font-weight:900;font-size:clamp(27px,5.5vw,97px);line-height:.80;letter-spacing:.02em;user-select:none;font-kerning:none}
.line{display:block;white-space:nowrap}
.word{display:inline-block}
.letter{display:inline-block}
.probe{display:inline-block;width:0;height:0;vertical-align:baseline}
.rotator{display:flex;align-items:center;justify-content:center;height:.89em;color:var(--accent)}
#phrase{display:block;white-space:nowrap;letter-spacing:.02em}
/* The headline still lays itself out in HTML (so it stays responsive and readable for
   assistive tech); the 3D letters are placed on top of these invisible glyphs. */
html.three h1{color:transparent}
html.three h1 .rotator{color:transparent}
/* Wordmark and tagline keep their place; only the headline drops to the optical centre. */
@media (min-width:641px){h1{top:35px}}

/* Subtle loading line where the headline will land */
.loader{position:absolute;left:50%;top:50%;width:min(160px,32vw);height:2px;transform:translate(-50%,-50%);border-radius:2px;overflow:hidden;background:color-mix(in srgb,var(--ink) 12%,transparent);transition:opacity .4s ease}
.loader i{display:block;height:100%;background:var(--ink);transform-origin:left center;transform:scaleX(0)}
.loader.done{opacity:0}
html:not(.three) .loader{display:none}

.tagline{z-index:3;font-family:'museo-sans',Arial,sans-serif;font-weight:300;font-size:clamp(16px,1.3vw,20px);letter-spacing:.01em;line-height:1.4;position:absolute;left:5%;right:5%;top:var(--tagline-y,80%);margin:0;transform:translateY(-50%);text-align:center}

footer{position:relative;z-index:3;min-height:100px;display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px;padding:24px 155px 24px 3.5vw;font-family:'museo-sans',Arial,sans-serif;font-weight:500;font-size:14px;line-height:1.5;color:var(--muted)}
footer strong{font-weight:700;color:var(--ink)}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--ink)}
footer a:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.footer-brand{display:inline-flex;align-items:center;gap:14px;white-space:nowrap}
.footer-brand img{width:40px;height:40px;display:block;flex:none}

.reset-button{position:fixed;right:3.5vw;bottom:28px;z-index:4;min-height:44px;padding:10px 28px;border:1px solid var(--ink);border-radius:6px;background:var(--ink);color:var(--button-text);font:500 13px 'museo-sans',Arial,sans-serif;cursor:pointer;transition:border-color .2s,background .2s}
@media(hover:hover) and (pointer:fine){.reset-button:hover{border-color:var(--accent);background:var(--accent);color:#21213e}}
.reset-button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

.cursor{position:fixed;left:0;top:0;width:160px;height:160px;z-index:5;pointer-events:none;opacity:0;transition:opacity 150ms;will-change:transform}
.cursor.visible{opacity:1}
.cursor img{display:block;width:100%;height:100%;animation:spin 12s linear infinite}
.cursor-face{width:100%;height:100%;transform:scale(1);transition:transform 180ms cubic-bezier(.2,.7,.3,1)}
.cursor.compact .cursor-face{transform:scale(.2)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (pointer:fine){html.custom-cursor,html.custom-cursor *{cursor:none!important}}
@media (pointer:coarse){.cursor{display:none}}

.loading .wordmark .word,.loading .tagline{opacity:0}

/* Link to the archived Webflow site, quietly under the tagline */
.legacy-link{display:table;margin:18px auto 0;padding:6px 2px;font-size:.72em;font-weight:500;letter-spacing:.02em;color:var(--muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s}
.legacy-link span{display:inline-block;transition:transform .2s}
.legacy-link:hover{color:var(--ink)}
.legacy-link:hover span{transform:translate(2px,-2px)}
.legacy-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
@media (pointer:fine){html.custom-cursor .legacy-link{cursor:none}}

.mobile-smiley{display:none}

@media (max-width:640px){
  main{min-height:calc(100svh - 140px);padding:60px 6vw 125px}
  .wordmark{font-size:15px;margin-bottom:24px}
  h1{font-size:11.7vw;line-height:.82;letter-spacing:.02em}
  .line .word,#phrase .seg{display:block}
  .line .word+.word{margin-top:.02em}
  .rotator{height:1.82em}
  #phrase{white-space:normal;letter-spacing:.02em}
  #phrase .seg+.seg{margin-top:.02em}
  footer{min-height:140px;padding:20px 6vw;gap:8px 16px;font-size:13px}
  footer .address{flex-basis:100%;order:2;padding-right:115px}
  .footer-brand{gap:8px}.footer-brand img{width:30px;height:30px}
  .reset-button{right:6vw;bottom:18px}
}
@media(max-width:640px),(pointer:coarse){
  .mobile-smiley{display:block;position:fixed;z-index:3;top:28px;left:calc(50% - 28px);width:56px;height:56px;margin:0;animation:spin 12s linear infinite}
  .composition{padding-top:76px}
  .cursor{display:none!important}
  html.custom-cursor,html.custom-cursor *{cursor:auto!important}
  main{min-height:calc(100svh - 100px);padding-top:38px;padding-bottom:140px}
  footer{min-height:100px;height:100px;padding:20px 6vw;flex-wrap:nowrap}
  footer>a,footer>.address{display:none}
  .reset-button{right:6vw;bottom:28px}
}
/* while the ball is out on the board, the smiley at the top is gone (it *is* the ball) */
.mobile-smiley{transition:scale .25s cubic-bezier(.2,.7,.3,1),opacity .25s}
.mobile-smiley.away{scale:0;opacity:0}
/* swipes push letters instead of scrolling the page */
@media(max-width:640px),(pointer:coarse){html.three main{touch-action:none}}
@media(prefers-reduced-motion:reduce){.cursor img,.mobile-smiley{animation:none}.cursor-face{transition:none}}