/* ============ Fonts (FT System Blank / Mono, wie Original) ============ */
@font-face{
  font-family:"FT System Blank";
  src:url("../fonts/ft_system_blank_regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"FT System Blank";
  src:url("../fonts/ft_system_blank_medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"FT System Blank";
  src:url("../fonts/ft_system_blank_semibold.woff2") format("woff2");
  font-weight:600 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"FT System Mono";
  src:url("../fonts/ft_system_mono_medium.woff2") format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap;
}

/* ============ Reset & Tokens ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
:root{
  --dark:#13161c;
  --dark-subtle:rgba(19,22,28,.5);
  --dark-very-subtle:rgba(19,22,28,.35);
  --darker:#06070a;
  --gray-100:#f7f7f7;
  --gray-200:#f1f1f2;
  --white:#ffffff;
  --radius:.75rem;
  --radius-lg:1rem;
  --container:104.5rem;
  --font-sans:"FT System Blank",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"FT System Mono",ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --ease-vaul:cubic-bezier(.32,.72,0,1);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.drawer-lock{overflow:hidden}
body{
  font-family:var(--font-sans);
  color:var(--dark);
  font-size:1rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;
}
body{overflow-x:clip}
/* like the original: html/body carry no background of their own (#page is the
   white surface), and the body itself turns black while a drawer is open. iOS
   paints its status-bar / home-indicator areas from the body colour, so body
   + the theme-color swap in drawers.js must always agree — a fixed backdrop
   layer instead of this leaves Safari mixing white body with black
   theme-color into grey chrome */
body.drawer-open,body.drawer-closing{background:#000}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;background:none;cursor:pointer;color:inherit}

/* page wrapper scales down when drawer opens (vaul effect) */
#page{
  background:#fff;position:relative;
  transition:transform .5s var(--ease-vaul),border-radius .5s var(--ease-vaul);
  transform-origin:center top;
}
body.drawer-open #page{
  transform:scale(.937) translate3d(0,14px,0);
  border-radius:8px;overflow:hidden;
}
/* pause heavy background animations behind an open drawer */
body.drawer-open #page .gradientfx .blob,
body.drawer-open #page .grain::after,
body.drawer-open #page .marquee-track{animation-play-state:paused}

/* ============ Layout helpers ============ */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:1rem}
@media(min-width:640px){.container{padding-inline:4rem}}
@media(min-width:768px){.container{padding-inline:2.25rem}}
.mono{font-family:var(--font-mono);font-size:.8125rem}
/* brand wordmark: live text in the site font, mirroring the logo file
   (FT System Blank semibold + outline stroke), tinted via currentColor */
.logotype{font-family:var(--font-sans);font-weight:600;letter-spacing:-.015em;-webkit-text-stroke:.05em currentColor}

/* Two-tone headline: em darkens when scrolled into view */
.lede{
  font-weight:500;
  font-size:clamp(1.35rem,2.6vw,2.1rem);
  line-height:1.22;
  letter-spacing:-.02em;
  max-width:52.25rem;
  color:var(--dark-subtle);
  white-space:pre-line;
}
.lede em{font-style:normal;color:var(--dark-subtle);transition:color .7s ease .1s}
.lede.in em{color:var(--dark)}
.lede.xl{font-size:clamp(1.6rem,3.2vw,2.6rem)}

/* ============ Grain overlay ============ */
.grain{position:relative;overflow:hidden}
.grain::after{
  content:"";position:absolute;top:-40%;left:-40%;width:180%;height:180%;
  pointer-events:none;opacity:.055;z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}20%{transform:translate(-13%,3%)}
  30%{transform:translate(6%,-10%)}40%{transform:translate(-4%,12%)}50%{transform:translate(-10%,6%)}
  60%{transform:translate(12%,0)}70%{transform:translate(0,10%)}80%{transform:translate(3%,12%)}90%{transform:translate(-8%,2%)}
}

/* ============ Animated gradient (replaces videos) ============ */
.gradientfx{position:absolute;inset:0;background:var(--darker);overflow:hidden}
.gradientfx .blob{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;opacity:.85;will-change:transform}
.gradientfx .b1{width:65vw;height:65vw;left:-15%;top:-30%;background:radial-gradient(circle at 35% 35%,#2337b0,transparent 62%);animation:drift1 16s ease-in-out infinite alternate}
.gradientfx .b2{width:55vw;height:55vw;right:-12%;top:-8%;background:radial-gradient(circle at 60% 40%,#7a2ea6,transparent 60%);animation:drift2 19s ease-in-out infinite alternate}
.gradientfx .b3{width:60vw;height:60vw;left:22%;bottom:-45%;background:radial-gradient(circle at 50% 50%,#0e5f8a,transparent 62%);animation:drift3 22s ease-in-out infinite alternate}
.gradientfx .b4{width:34vw;height:34vw;right:16%;bottom:-16%;background:radial-gradient(circle at 50% 50%,#c2452e,transparent 60%);opacity:.5;animation:drift1 14s ease-in-out infinite alternate-reverse}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(9vw,7vh) scale(1.18)}}
@keyframes drift2{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-10vw,9vh) scale(.92)}}
@keyframes drift3{from{transform:translate(0,0) scale(1)}to{transform:translate(-7vw,-9vh) scale(1.22)}}

/* ============ Floating pill nav ============ */
.nav{
  position:fixed;bottom:1.75rem;left:50%;transform:translateX(-50%);z-index:40;
  background:rgba(233,233,235,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:9999px;padding:.375rem 1.25rem .375rem .625rem;overflow:hidden;
  box-shadow:0 6px 30px rgba(0,0,0,.08);
}
.nav>div{
  margin:0 -1rem 0 -.375rem;padding:0 1rem 0 .375rem;
  mask-image:linear-gradient(to right,transparent 0%,black 1.25rem,black calc(100% - 1.25rem),transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 1.25rem,black calc(100% - 1.25rem),transparent 100%);
}
.nav ul{display:flex}
.nav a{
  display:flex;align-items:center;gap:.25rem;
  padding:.75rem .5rem;border-radius:9999px;
  font-size:.9375rem;font-weight:500;letter-spacing:-.00938rem;line-height:1.25;
  color:var(--dark-subtle);transition:color .2s;
}
.nav a::before{
  content:"";width:.625rem;height:.625rem;border-radius:50%;background:var(--dark);
  opacity:0;transform:translateY(.5rem) scale(.4);
  transition:opacity .25s var(--ease-out-quart),transform .45s cubic-bezier(.34,1.56,.64,1);
}
.nav a span{margin-top:-.125rem}
.nav a:hover{color:var(--dark)}
.nav a.active{color:var(--dark)}
.nav a.active::before{opacity:1;transform:translateY(0) scale(1)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(1.5rem);transition:opacity .7s var(--ease-out-quart),transform .7s var(--ease-out-quart)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .lede em{color:var(--dark)}
}