/* TBC brand: #000/#fff, lime #EFFF42, film grey #595959, fibre #373B36, STIX Two Text. */
:root{
  --ground:#030303;--ink:#f2f2f2;--lime:#EFFF42;--grey:#595959;--fibre:#373B36;
  --dim:rgba(242,242,242,.6);--faint:rgba(242,242,242,.38);--line:rgba(255,255,255,.1);--panel:#0b0c0c;
  --serif:"STIX Two Text",Georgia,serif;--sans:Geist,-apple-system,Helvetica,Arial,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{max-width:1320px;margin:0 auto;padding-left:clamp(16px,4vw,56px);padding-right:clamp(16px,4vw,56px)}
.k{font:500 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.lime{color:var(--lime)}.grey{color:var(--grey)}
.lime-bg{background:var(--lime)}.grey-bg{background:var(--grey)}
.dim{color:var(--faint)}
h1,h2,h3{font-weight:400;margin:0}
h2{font:400 clamp(34px,5vw,68px)/1.04 var(--serif);letter-spacing:-.02em;max-width:18ch;text-wrap:balance}
section{padding-top:clamp(96px,13vw,180px)}
p{margin:0}
.rule{display:inline-block;width:28px;height:1px;background:var(--faint);vertical-align:middle;margin:0 10px}
.src{font:400 12px/1.55 var(--mono);color:var(--faint);margin-top:18px;max-width:90ch}
.note{font-size:14px;color:var(--faint);margin-top:22px;max-width:62ch}
.sw{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.x{color:var(--faint);font-weight:400}

/* top bar */
.bar{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:24px;padding:14px clamp(16px,4vw,56px);background:linear-gradient(180deg,rgba(3,3,3,.82),rgba(3,3,3,0));pointer-events:none}
.bar>*{pointer-events:auto}
.bar-mark img{height:18px;width:auto}
.bar-nav{display:flex;gap:22px;margin-left:auto}
.bar-nav a{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color .2s}
.bar-nav a:hover{color:var(--lime)}
.bar-by{display:none}
@media (max-width:640px){.bar-nav{gap:14px}.bar-nav a:nth-child(n+4){display:none}}

/* segmented control */
.seg{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);flex-wrap:wrap}
.seg button{border:0;background:none;padding:8px 14px;border-radius:999px;font:500 12px var(--mono);letter-spacing:.06em;color:var(--dim);cursor:pointer;transition:background .25s,color .25s}
.seg button[aria-checked="true"]{background:var(--ink);color:var(--ground)}
.seg button:focus-visible,.replay:focus-visible,.film-play:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
/* the bar is Justin's: Wonder logotype / name, marked as a testimonial */
.bar-mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.bar-mark img{height:15px}
.bar-sep{width:1px;height:16px;background:rgba(242,242,242,.35)}
.bar-name{font:500 13px var(--sans);letter-spacing:-.005em;white-space:nowrap}
.bar-tag{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lime);border:1px solid rgba(239,255,66,.4);border-radius:999px;padding:4px 8px 3px}
@media (max-width:640px){.bar-tag{display:none}.bar-nav a:nth-child(n+3){display:none}}
/* Justin's own mark: the site is his testimonial; Wonder only as his role */
.jh-mark{display:inline-grid;place-items:center;width:26px;height:26px;border:1px solid rgba(242,242,242,.55);border-radius:50%;font:400 11px/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.jh-mark.big{width:44px;height:44px;font-size:17px}
.bar-name{font:400 17px/1 var(--serif);letter-spacing:-.01em}
.bar-role{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
@media (max-width:900px){.bar-role{display:none}}