/* generated by src/theme.py from src/home.html */
:root{
  --paper:#EDEFF5;      /* page ground, cool paper */
  --sheet:#F9FAFD;      /* raised paper (pad, inputs) */
  --ink:#12142E;        /* navy ink text */
  --ink-2:#4A4E72;      /* secondary text */
  --rule:#CDD1E3;       /* ruled lines, hairlines */
  --pen:#2B36E8;        /* ballpoint blue accent */
  --on-pen:#FFFFFF;
  --pen-soft:#DDE0FF;
  --hl:#FFE94D;         /* highlighter yellow */
  --on-hl:#12142E;
  --band:#12142E;       /* dark band */
  --band-fg:#EDEFF5;
  --band-2:#A6AACB;
  --band-rule:#2D3160;
  --red:#E5484D;        /* legal pad margin line */
  --receipt:#FBFBF8;    /* receipt paper: stays light in both themes */
  --receipt-ink:#12142E;
  --receipt-2:#5A5E7E;
  --receipt-rule:#D3D6E4;

  --f-display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --f-body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --f-hand:"Caveat","Bradley Hand","Segoe Print",cursive;

  --gutter:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shell:1360px;
  color-scheme:light;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/fonts/f0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/f1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/f2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/f3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/f4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/f5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/f6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/f7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");color:var(--ink);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pen);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}
::selection{background:var(--hl);color:var(--on-hl)}

.shell{max-width:var(--shell);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
@media (min-width:720px){.shell{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
@media (min-width:1100px){.shell{padding-left:max(56px,env(safe-area-inset-left,0px));padding-right:max(56px,env(safe-area-inset-right,0px))}}

.kicker{font:500 .78rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:0 0 18px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:2px;background:var(--pen);border-radius:2px}
.h2{font:700 clamp(2.1rem,5.2vw,4.6rem)/1 var(--f-display);font-variation-settings:"wdth" 86,"opsz" 96;letter-spacing:-.018em;margin:0;text-wrap:balance}
.h2 em{font-style:normal;color:var(--pen)}
.tag{display:inline-flex;align-items:center;gap:8px;font:500 .74rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--rule);border-radius:99px;color:var(--ink-2)}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pen);box-shadow:0 0 0 0 var(--pen);animation:ping 2.4s var(--ease) infinite}
.tag--hl{background:var(--hl);color:var(--on-hl);border-color:transparent}
.tag--hl::before{background:var(--on-hl);animation:none}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pen) 55%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}

/* highlighter mark — sweeps in */
.hl,mark{background:none;color:inherit;padding:0 .08em;margin:0 -.04em;
  background-image:linear-gradient(100deg,transparent .2em,var(--hl) .25em,var(--hl) calc(100% - .2em),transparent calc(100% - .05em));
  background-repeat:no-repeat;background-size:0% 78%;background-position:0 70%;color:inherit;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero .hl{color:var(--on-hl);animation:sweep .9s .95s var(--ease-out) forwards}
@keyframes sweep{to{background-size:100% 78%}}

/* ---------- buttons ---------- */
.btn{--bg:var(--pen);--fg:var(--on-pen);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 26px;border-radius:99px;border:0;background:var(--bg);color:var(--fg);
  font:600 1rem/1 var(--f-body);text-decoration:none;cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hl);transform:translateY(101%);border-radius:inherit;transition:transform .45s var(--ease-out)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:hover,.btn:focus-visible{color:var(--on-hl);box-shadow:0 10px 30px -10px color-mix(in srgb,var(--pen) 70%,transparent)}
.btn .arr{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn--sm{padding:11px 18px;font-size:.9rem}
.btn--ink{--bg:var(--on-hl);--fg:var(--hl)}
:root[data-theme="dark"] .btn--ink{--fg:var(--hl)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn--ink{--fg:var(--hl)}}
.btn--ink::before{background:var(--sheet)}
.btn--ink:hover{color:var(--ink)}
.arr{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:var(--pen);background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .4s var(--ease);padding-bottom:3px}
.link-arrow:hover{background-size:100% 2px}
.link-arrow .arr{transition:transform .35s var(--ease)}
.link-arrow:hover .arr{transform:translateX(4px)}

/* ---------- progress + nav ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;background:var(--pen);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;transition:transform .5s var(--ease)}
.nav.is-hidden{transform:translateY(-110%)}
.nav__in{max-width:var(--shell);margin:0 auto;display:flex;align-items:center;gap:20px;height:72px;
  padding-left:var(--gutter);padding-right:var(--gutter-r)}
@media (min-width:720px){.nav__in{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
@media (min-width:1100px){.nav__in{padding-left:max(56px,env(safe-area-inset-left,0px));padding-right:max(56px,env(safe-area-inset-right,0px))}}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--paper) 78%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);opacity:0;transition:opacity .3s;border-bottom:1px solid var(--rule)}
.nav.is-scrolled::before{opacity:1}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.logo__mark svg{width:30px;height:30px}
.logo__mark rect{fill:var(--pen)}
.logo__mark path{fill:none;stroke:var(--paper);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--ease)}
.logo:hover .logo__mark path{animation:tick .7s var(--ease)}
@keyframes tick{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
.logo__word{font:800 1.15rem/1 var(--f-display);letter-spacing:-.005em;font-variation-settings:"wdth" 86;white-space:nowrap}
.logo__for{font-weight:500}
@media (max-width:360px){.logo__word{font-size:1rem}}
.nav__links{display:none;gap:4px}
.nav__links a{position:relative;padding:8px 12px;border-radius:99px;text-decoration:none;font-size:.94rem;color:var(--ink-2);transition:color .25s,background .25s}
.nav__links a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.nav .btn--sm{display:none}
.nav__burger{display:inline-grid;place-items:center;gap:6px;width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);background:var(--sheet);cursor:pointer;padding:0;align-content:center}
.nav__burger i{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease)}
.nav__burger[aria-expanded="true"] i:first-child{transform:translateY(4px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:last-child{transform:translateY(-4px) rotate(-45deg)}
.drawer{display:grid;gap:2px;padding:8px var(--gutter-r) 20px var(--gutter);background:var(--paper);border-bottom:1px solid var(--rule)}
.drawer a{font:700 1.9rem/1.2 var(--f-display);font-variation-settings:"wdth" 82;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--rule)}
@media (min-width:900px){
  .nav__links{display:flex}.nav .btn--sm{display:inline-flex}.nav__burger,.drawer{display:none!important}
}


/* ---------- footer ---------- */
.foot{padding-block:70px 0;overflow:hidden}
.foot__grid{display:grid;gap:28px;padding-bottom:30px;border-bottom:1px solid var(--rule)}
.foot__about{margin:0;max-width:46ch;color:var(--ink-2)}
.foot__about strong{color:var(--ink)}
.foot__nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot__nav a{text-decoration:none;font-weight:500;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .35s var(--ease)}
.foot__nav a:hover{background-size:100% 1.5px}
.foot__small{margin:0;font-size:.82rem;color:var(--ink-2);max-width:70ch}
.foot__mark{margin:0;font:800 clamp(4.4rem,21vw,19rem)/.8 var(--f-display);font-variation-settings:"wdth" 86,"opsz" 96;letter-spacing:-.01em;text-align:center;
  color:transparent;padding-top:.1em;white-space:nowrap;user-select:none;
  background:linear-gradient(var(--pen),var(--pen)) 0 100%/100% var(--fill,0%) no-repeat,linear-gradient(var(--rule),var(--rule));-webkit-background-clip:text;background-clip:text}
@media (min-width:900px){.foot__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.foot__small{grid-column:1/-1}}

