/* Ponytail 5: shared look for every page (tokens, type, nav, hero, numbered sections, footer). Page-specific bits stay inline. */
/* self-hosted: no third-party request, GDPR-clean (no IP sent to Google) */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("../fonts/jetbrains-mono-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:100 800;font-display:swap;src:url("../fonts/jetbrains-mono-italic.woff2") format("woff2")}
:root{
  --bg:#070606; --ink:#efe9dd; --soft:#cfc8ba; --muted:#9a9284; --faint:#6a6358; --line:rgba(239,233,221,.1);
  --holo:linear-gradient(120deg,#7fe3f5 0%,#b49cff 50%,#ff9fd8 100%);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:#b49cff;color:var(--bg)}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{margin:0}
h2{font-family:var(--mono);font-weight:800;font-size:clamp(1.8rem,3.6vw,2.9rem);line-height:1.1;letter-spacing:-.04em}
h1 em,h2 em{font-style:italic;font-weight:400;color:var(--muted);letter-spacing:-.03em}
.holo{background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.glow{filter:drop-shadow(0 0 8px rgba(180,156,255,.45))}
.lead{color:var(--soft);max-width:58ch;margin:18px 0 0;font-size:1.05rem}
.fine{font-family:var(--mono);font-size:13px;color:var(--faint);line-height:1.8;margin-top:44px}
.fine a{color:var(--muted)}
.muted{color:var(--muted)}

/* sections: a number and a name on the left, the content on the right */
.sec{padding-top:130px}
.sec>.wrap>.in{display:grid;grid-template-columns:160px minmax(0,1fr);gap:0 56px;border-top:1px solid var(--line);padding-top:30px}
.sh{position:sticky;top:96px;align-self:start;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sh .no{display:block;font-weight:800;font-size:14px;letter-spacing:.05em;margin-bottom:4px}
@media(max-width:900px){.sec{padding-top:100px}.sec>.wrap>.in{grid-template-columns:1fr}.sh{position:static;display:flex;gap:14px;align-items:baseline;margin-bottom:22px}.sh .no{margin:0}}

/* nav: a floating pill */
.nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:2px;
  padding:6px 6px 6px 14px;border:1px solid rgba(239,233,221,.12);border-radius:999px;background:rgba(10,9,8,.55);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);white-space:nowrap}
/* the logo is just the word and a holographic cursor */
.nav .brand{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-weight:800;font-size:15px;letter-spacing:-.03em;text-decoration:none;margin:0 10px 0 4px}
.nav a.l{font-size:14px;color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:999px;transition:color .15s}
.nav a.l:hover{color:var(--ink)}
.nav a.gh{color:var(--ink);background:rgba(239,233,221,.08)}
/* the secret project: the only holographic link, on every page */
.nav a.soon,.nav a.soon:hover{font-weight:700;background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
/* small screens: the links move into a native popover behind a "menu" button (light dismiss and Esc come with it) */
.nav .links{display:contents}
.nav .menu{display:none;position:relative;flex:none;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:rgba(239,233,221,.08);cursor:pointer}
.nav .menu span{position:absolute;left:11px;width:16px;height:2px;border-radius:1px;background:var(--ink);transition:transform .2s,opacity .2s}
.nav .menu span:nth-child(1){top:13px} .nav .menu span:nth-child(2){top:18px} .nav .menu span:nth-child(3){top:23px}
.nav:has(.links:popover-open) .menu span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav:has(.links:popover-open) .menu span:nth-child(2){opacity:0}
.nav:has(.links:popover-open) .menu span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media(max-width:760px){
  .nav{padding:6px 16px 6px 6px}
  .nav .menu{display:block}
  .nav .links{display:none}
  .nav .links:popover-open{display:flex;flex-direction:column;position:fixed;inset:76px auto auto 50%;transform:translateX(-50%);width:min(300px,calc(100vw - 24px));margin:0;padding:8px;
    color:var(--ink);border:1px solid rgba(239,233,221,.12);border-radius:20px;background:rgba(14,13,12,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .nav .links:popover-open a.l{padding:13px 16px;font-size:16px;border-radius:12px}
  .nav .links:popover-open a.gh{margin-top:4px}
  .nav .links:popover-open a.soon{order:-1}
}
@supports not selector(:popover-open){@media(max-width:760px){.nav .menu{display:none}.nav .links{display:contents}.nav{flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 24px);border-radius:22px}}}

/* hero: the full screen is the film */
.hero{position:relative;height:min(100svh,880px);min-height:620px;overflow:hidden}   /* tall windows: no empty band of code above the headline */
/* the code field fills the hero */
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 0% 100%,rgba(7,6,6,.92) 0%,rgba(7,6,6,.55) 38%,rgba(7,6,6,0) 66%),linear-gradient(transparent 70%,var(--bg))}
.hero .intro{position:absolute;z-index:2;left:max(28px,calc((100vw - 1180px)/2 + 28px));bottom:clamp(56px,11vh,120px);right:28px;max-width:820px}
/* narrow screens: the text flows at the bottom and the hero always keeps a free band above it for the 5, however short the screen */
@media(max-width:900px){.hero{height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(84px + min(62vw,330px))}
  .hero .intro{position:relative;left:auto;right:auto;bottom:auto;margin:0 28px;padding-bottom:clamp(76px,11vh,120px)}}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-family:var(--mono);font-weight:800;font-size:clamp(2rem,4vw,3.6rem);line-height:1.08;letter-spacing:-.045em;margin-top:18px}
.hero h1 em{font-size:.86em}
.hero p{color:var(--soft);max-width:52ch;margin:22px 0 0;font-size:1.08rem}
.cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:30px}
.pill{display:inline-flex;align-items:center;font-size:15px;font-weight:500;text-decoration:none;padding:13px 22px;border-radius:999px;
  color:var(--ink);border:1px solid transparent;
  background-image:linear-gradient(rgba(14,13,12,.85),rgba(14,13,12,.85)),var(--holo);background-origin:border-box;background-clip:padding-box,border-box;
  transition:transform .15s,box-shadow .2s}
.pill:hover{transform:translateY(-1px);box-shadow:0 0 28px rgba(180,156,255,.25)}
.textlink{font-size:15px;color:var(--muted);text-decoration:none} .textlink:hover{color:var(--ink)}
#motion{position:absolute;z-index:3;right:24px;bottom:24px;display:flex;align-items:center;gap:9px;font:500 13px var(--sans);color:var(--ink);
  padding:9px 15px;border-radius:999px;border:1px solid rgba(239,233,221,.14);background:rgba(10,9,8,.55);backdrop-filter:blur(10px);cursor:pointer}
#motion i{font-style:normal;font-size:10px;letter-spacing:-1px}

.cur{display:inline-block;width:.6em;height:1.1em;vertical-align:-.15em;background:var(--holo);animation:blink 1s steps(1) 5}
@keyframes blink{50%{opacity:0}}

/* footer */
footer{padding:170px 0 70px}
footer .mark{font-family:var(--mono);font-weight:800;font-size:clamp(2rem,3.4vw,2.8rem);letter-spacing:-.045em;line-height:1}
footer .mark .cur{margin-left:.04em}
footer .q{margin:22px 0 0;font-family:var(--mono);font-style:italic;font-size:clamp(1.2rem,2.4vw,1.8rem);color:var(--muted)}
footer .links{display:flex;gap:24px;flex-wrap:wrap;margin-top:40px;font-size:14px;color:var(--faint)}
footer .links a{text-decoration:none} footer .links a:hover{color:var(--ink)}
/* light mode: a sun button beside the nav; pressing it brings Ponytail in from the side to say no */
.nav .sun{position:absolute;left:calc(100% + 8px);top:0;height:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:0;
  font-size:18px;line-height:1;color:var(--ink);cursor:pointer;border:1px solid rgba(239,233,221,.12);border-radius:50%;background:rgba(10,9,8,.55);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);transition:color .2s}
.nav .sun:hover{color:#ffd88a}
.nav:has(.sun){margin-left:-29px}   /* half the sun plus its gap: pill and sun together sit in the middle */
.cameo{position:fixed;right:0;bottom:16px;z-index:40;display:flex;align-items:center;gap:4px;transform:translateX(110%);transition:transform .55s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.cameo.show{transform:none;pointer-events:auto;cursor:pointer}
.cameo canvas{width:150px;height:auto;margin-right:-38px;transform:rotate(-9deg);filter:drop-shadow(0 0 12px rgba(180,156,255,.45))}
.cameo .say{position:relative;margin:0;max-width:min(300px,calc(100vw - 150px));padding:13px 16px;border-radius:16px;font:500 14px/1.45 var(--mono);color:var(--ink);
  border:1px solid transparent;background-image:linear-gradient(rgba(14,13,12,.95),rgba(14,13,12,.95)),var(--holo);background-origin:border-box;background-clip:padding-box,border-box}
.cameo .say::after{content:"";position:absolute;right:-7px;top:50%;width:12px;height:12px;background:rgb(14,13,12);border-top:1px solid #d6a8ee;border-right:1px solid #d6a8ee;transform:translateY(-50%) rotate(45deg)}

@media(prefers-reduced-motion:reduce){.cameo{transition:none}*{transition:none!important;scroll-behavior:auto!important}.cur{animation:none}}

/* text pages (legal notice, privacy, built): one calm column */
.doc{max-width:760px;margin:0 auto;padding:150px 28px 0}
.doc h1{font-family:var(--mono);font-weight:800;font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.05em;line-height:1.05;margin:16px 0 44px}
.doc h2{font-family:var(--mono);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;line-height:1.4;margin:2.4em 0 .5em}
.doc p,.doc li{color:var(--soft)}
.doc p{margin:.4em 0}
.doc ul{margin:.5em 0;padding-left:1.3em}
.doc a{color:var(--ink);text-decoration-color:rgba(239,233,221,.35);text-underline-offset:3px}
.doc a:hover{text-decoration-color:var(--ink)}
@media(max-width:760px){.doc{padding-top:120px}}
.doc .fine{margin-top:44px}
.doc ~ footer .wrap{max-width:760px}