/* shared by every page: fonts, tokens, header/nav, footer, and the terms/privacy + contact layouts */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;src:url(fonts/bricolage-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;src:url(fonts/bricolage-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;src:url(fonts/bricolage-latin.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:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(fonts/instrument-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(fonts/instrument-sans-latin.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}

:root{
  --ink:#121110; --surface:#1D1B19; --raised:#2A2724; --line:#3A3632;
  --cream:#F6F2EA; --body:#D8D2C8; --muted:#A8A197;
  --lime:#E8F24A; --pink:#FF6BB5;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --sans:'Instrument Sans',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;font-family:var(--sans);background:var(--ink);color:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:8px}
h1{margin:0;font-family:var(--display);font-weight:800}

.logo{font-family:var(--display);font-weight:800;display:flex;align-items:baseline;gap:3px;font-size:32px;letter-spacing:-1.3px}
.logo i{display:inline-block;border-radius:50%;background:var(--lime);width:11px;height:11px}

/* ---- header + nav ---- */
.site-header{height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-nav{display:flex;align-items:center;gap:8px}
.site-nav a{height:44px;padding:0 14px;display:flex;align-items:center;font-size:15px;font-weight:600;color:var(--muted);white-space:nowrap}
.site-nav a:hover{color:var(--cream)}
.site-nav a[aria-current=page]{font-weight:700;color:var(--cream);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px;text-underline-offset:6px}
/* first item on every page except home */
.site-nav a.back{gap:6px;padding:0 16px 0 12px;margin-right:8px;border-radius:22px;border:1.5px solid var(--line);background:var(--surface);color:var(--cream)}
.site-nav a.back:hover{border-color:var(--lime)}
.site-nav a.back svg{color:var(--lime);flex:none}
.site-nav a.back .short,.site-footer .home .short{display:none}

/* ---- footer ---- */
.site-footer{height:96px;border-top:1.5px solid var(--raised);display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px;color:var(--muted)}
.site-footer nav{display:flex;align-items:center;gap:4px}
.site-footer nav a{height:44px;padding:0 10px;display:flex;align-items:center;font-weight:600}
.site-footer nav a:hover,.site-footer nav a[aria-current=page]{color:var(--cream)}
.site-footer .home{height:44px;display:flex;align-items:center;gap:6px;font-weight:600;color:var(--cream)}

/* ---- sub pages ---- */
.sub{min-height:100svh;display:flex;flex-direction:column;max-width:1440px;margin:0 auto;padding:40px 80px 0}
.sub main{flex:1}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}

/* legal (terms, privacy) */
.legal{display:flex;gap:80px;margin-top:90px;padding-bottom:96px}
.legal-intro{width:480px;flex-shrink:0;display:flex;flex-direction:column;gap:28px;align-self:flex-start;position:sticky;top:40px}
.legal h1{font-size:96px;line-height:.9;letter-spacing:-4.4px}
.legal h1 .tag{display:inline-block;color:var(--ink);padding:0 16px 8px;border-radius:18px;transform:rotate(-3deg)}
.tag.pink{background:var(--pink)}
.tag.lime{background:var(--lime)}
.updated{font-size:15px;color:var(--muted)}
.tldr{margin-top:12px;border-radius:28px;background:var(--lime);color:var(--ink);border:2px solid var(--cream);box-shadow:6px 6px 0 var(--pink);padding:24px;display:flex;flex-direction:column;gap:14px;transform:rotate(-1.5deg)}
.tldr h2{margin:0;font:800 22px var(--display);letter-spacing:-.6px}
.tldr ul{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:8px;font-size:16px;font-weight:600;line-height:1.4}
.tldr p{margin:0;font-size:13px;font-weight:600;opacity:.75}
.legal-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:40px;padding-top:30px;counter-reset:sec}
.legal-body section{display:flex;flex-direction:column;gap:10px;scroll-margin-top:24px}
.legal-body h2{margin:0;display:flex;align-items:baseline;gap:14px;font:800 28px var(--display);letter-spacing:-.8px}
.legal-body h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);color:var(--lime)}
.legal-body p,.legal-body li{font-size:17px;line-height:1.6;color:var(--body);text-wrap:pretty}
.legal-body p{margin:0}
.legal-body ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.legal-body strong{color:var(--cream)}
.legal-body a,.inline-link{color:var(--cream);font-weight:700;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:4px}

/* contact + 404 */
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;text-align:center;padding:48px 0 96px}
.center h1{font-size:168px;line-height:.88;letter-spacing:-8px}
.center h1 .tag{display:inline-block;background:var(--lime);color:var(--ink);padding:0 24px 12px;border-radius:28px;transform:rotate(-4deg)}
@keyframes wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(3deg)}}
.center h1 .wob{animation:wobble 3.2s ease-in-out infinite}
.center .lede{margin:0;max-width:560px;font-size:22px;line-height:1.45;color:var(--body);text-wrap:pretty}
.cta{height:68px;padding:0 32px 0 28px;border-radius:34px;background:var(--lime);color:var(--ink);border:2px solid var(--cream);box-shadow:6px 6px 0 var(--pink);display:flex;align-items:center;justify-content:center;gap:12px;font:800 22px var(--display);letter-spacing:-.4px}
.cta:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--pink)}
.address{font-size:15px;color:var(--muted)}
.address a:hover{color:var(--cream)}

@media (max-width:759.98px){
  .logo{font-size:26px;letter-spacing:-1px;gap:2px}
  .logo i{width:9px;height:9px}
  .site-header{height:auto;margin-right:-10px}
  .site-nav{gap:0}
  .site-nav a{padding:0 10px;font-size:14px}
  .site-nav a[aria-current=page]{text-underline-offset:5px}
  .site-nav a.back{padding:0 12px 0 8px;margin-right:4px;gap:4px}
  .site-nav a.back .long,.site-footer .home .long{display:none}
  .site-nav a.back .short,.site-footer .home .short{display:inline}
  .site-footer{height:auto;min-height:88px;padding:16px 0 max(16px,env(safe-area-inset-bottom));flex-wrap:wrap;font-size:13px}
  .site-footer nav{margin-left:-10px;order:2;width:100%}
  .site-footer .home{margin-left:auto}

  .sub{padding:max(52px,env(safe-area-inset-top)) 24px 0}
  .eyebrow{font-size:12px;letter-spacing:1.4px}
  .legal{flex-direction:column;gap:28px;margin-top:40px;padding-bottom:64px}
  .legal-intro{width:auto;position:static;gap:14px}
  .legal h1{font-size:64px;letter-spacing:-3px}
  .legal h1 .tag{padding:0 12px 6px;border-radius:14px}
  .updated{font-size:14px}
  .tldr{margin-top:14px;border-radius:24px;box-shadow:5px 5px 0 var(--pink);padding:20px;gap:12px}
  .tldr h2{font-size:20px;letter-spacing:-.5px}
  .tldr ul{padding-left:18px;gap:6px;font-size:15px}
  .tldr p{font-size:12px}
  .legal-body{gap:32px;padding-top:8px}
  .legal-body section{gap:8px}
  .legal-body h2{font-size:23px;letter-spacing:-.6px;gap:10px}
  .legal-body p,.legal-body li{font-size:16px}

  .center{align-items:flex-start;text-align:left;gap:24px;padding:40px 0 56px}
  .center h1{font-size:96px;letter-spacing:-4.4px}
  .center h1 .tag{padding:0 16px 8px;border-radius:20px;margin-top:8px}
  .center .lede{font-size:18px}
  .cta{align-self:stretch;height:60px;border-radius:30px;box-shadow:5px 5px 0 var(--pink);font-size:20px;gap:10px}
  .address{align-self:center;font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .center h1 .wob{animation:none}
}

/* contact: "say hi." on one line on desktop, two on mobile */
.center h1 br.m{display:none}
@media (max-width:759.98px){ .center h1 br.m{display:inline} }
/* 404 headline is two words per line */
.center h1:not(:has(.wob)){font-size:clamp(64px,10vw,144px);letter-spacing:-.05em}