/* Togarashi — togarashi.io
   Colours, type and spacing are the app's own design tokens, unchanged. */

@font-face{font-family:'Bricolage Grotesque';src:url('fonts/BricolageGrotesque-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('fonts/BricolageGrotesque-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/HankenGrotesk-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/HankenGrotesk-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/HankenGrotesk-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --canvas:#faf8f4; --surface:#fff; --surface-alt:#f1ede5;
  --surface-inverse:#14201c; --on-inverse:#f2f5f0;
  --line:#e6e1d7; --line-soft:#f1ede5; --line-strong:#6f6558;
  --ink:#1a1310; --ink-soft:#4e463c; --ink-faint:#756b5f;
  --chili:#d43519; --chili-tint:#fff1ec; --chili-deep:#8a230d; --on-chili:#fff;
  --sansho:#437d26; --sansho-tint:#eff6e5; --sansho-deep:#2c5417;
  --chinpi:#e8811a; --chinpi-tint:#fff2e0; --chinpi-deep:#8f4a05;
  --shoga:#dfa828; --shoga-tint:#fff6de; --shoga-deep:#86600a;
  --ai:#1f5f93; --ai-tint:#e7f0f7; --ai-deep:#123f63;
  --shiso:#7b3a86; --shiso-tint:#f6ebf8; --shiso-deep:#54235c;
  --ume:#b5295c; --ume-tint:#fde9f0; --ume-deep:#7d1a3e;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-full:999px;
  --pad:24px; --max:1080px;
  --display:'Bricolage Grotesque',Georgia,serif;
  --ui:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--ui);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--chili-deep);text-underline-offset:3px}
a:hover{color:var(--chili)}
:focus-visible{outline:2.5px solid var(--line-strong);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-faint);margin:0 0 8px}
h1,h2,h3{font-family:var(--display);font-weight:800;margin:0;letter-spacing:-.04em;line-height:1.05}
h1{font-size:clamp(38px,7vw,68px)}
h2{font-size:clamp(26px,4vw,38px);letter-spacing:-.03em}
h3{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
p{margin:0 0 16px}
.lede{font-size:clamp(17px,2.2vw,20px);line-height:1.55;color:var(--ink-soft);max-width:44ch}

/* ── header ─────────────────────────────────────────────────────────────── */
.site-head{border-bottom:1.5px solid var(--line);background:var(--canvas);position:sticky;top:0;z-index:20}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:28px;height:28px}
.brand b{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.05em}
.nav{display:flex;gap:22px;align-items:center;font-size:14px;font-weight:600}
.nav a{color:var(--ink-soft);text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--chili-deep)}

/* ── hero ───────────────────────────────────────────────────────────────── */




.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;
  border:0;border-radius:var(--r-md);font-family:var(--ui);font-size:15px;font-weight:700;
  text-decoration:none;cursor:pointer;background:var(--chili);color:var(--on-chili);
  box-shadow:0 4px 0 var(--chili-deep);transition:transform .06s ease,box-shadow .06s ease}
.btn:hover{color:var(--on-chili)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--chili-deep)}
.btn--ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn--ghost:hover{color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:active{transform:translateY(1px);box-shadow:none}
.note{font-size:13px;color:var(--ink-faint);margin:12px 0 0}

/* ── flecks: the brand motif ────────────────────────────────────────────── */





/* ── sections ───────────────────────────────────────────────────────────── */
section{padding:clamp(40px,6vw,72px) 0}













/* ── prose pages ────────────────────────────────────────────────────────── */
.prose{max-width:70ch;padding-bottom:64px}
.prose h2{margin:40px 0 12px;font-size:23px}
.prose h3{margin:26px 0 8px;font-size:17px}
.prose p,.prose li{color:var(--ink-soft);font-size:15.5px}
.prose ul{padding-left:20px;margin:0 0 16px}
.prose li{margin-bottom:7px}
.prose strong{color:var(--ink)}
.draft{background:var(--shoga-tint);border:1.5px solid var(--shoga);border-radius:var(--r-md);
  padding:16px 18px;margin:0 0 28px}
.draft p{margin:0;color:var(--shoga-deep);font-size:14.5px}
.draft b{color:var(--shoga-deep);font-weight:700}
.page-head{padding:clamp(36px,5vw,56px) 0 0}
.updated{font-size:13px;color:var(--ink-faint);margin-top:10px}
.placeholder{background:var(--surface-alt);border-radius:4px;padding:1px 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;color:var(--ink)}

/* ── footer ─────────────────────────────────────────────────────────────── */






@media (max-width:760px){
  :root{--pad:18px}
  .hero .wrap,.meet{grid-template-columns:1fr}
  .hero-art{order:-1}
  .meet img{margin:0}
  .site-head .wrap{height:60px}
  .nav{gap:16px;font-size:13.5px}
}

/* ── single-page beta layout ─────────────────────────────────────────────── */
body.single{display:flex;flex-direction:column;min-height:100vh}
.solo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(40px,8vh,80px) var(--pad) clamp(32px,6vh,56px);max-width:640px}
.solo-art{width:min(190px,42vw);margin:0 auto clamp(20px,4vh,34px)}
.solo h1{font-size:clamp(34px,7vw,56px);margin-bottom:16px}
.solo .lede{max-width:40ch;margin:0 auto}

.signup{display:flex;gap:10px;width:100%;max-width:440px;margin:30px auto 0}
.signup input{flex:1;min-width:0;height:52px;padding:0 16px;font-family:var(--ui);font-size:16px;
  color:var(--ink);background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-md);-webkit-appearance:none}
.signup input::placeholder{color:var(--ink-faint)}
.signup input:focus{outline:none;border-color:var(--line-strong);box-shadow:0 0 0 3px var(--chili-tint)}
.signup .btn{flex:0 0 auto}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.solo .note{margin-top:16px}

.solo-foot{border-top:1.5px solid var(--line);padding:22px 0;background:var(--surface)}
.solo-foot .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;align-items:center;
  font-size:13px;color:var(--ink-faint)}
.solo-foot a{color:var(--ink-faint);text-decoration:none}
.solo-foot a:hover{color:var(--chili-deep);text-decoration:underline}

@media (max-width:560px){
  .signup{flex-direction:column}
  .signup .btn{width:100%}
}