/* snug.menu: one stylesheet for every page.
   Thesis: a menu bar is a strip where everything has a lane. The site is built
   out of that strip: a bar across the top, hairline rules between sections,
   monospace labels sitting on those rules, and content that runs in lanes.
   System type only, on purpose: this site loads no third-party font, script or
   tracker, which is the same promise the app makes. */

:root{
  color-scheme: light dark;

  --paper:#F7F3EC;
  --paper-2:#EFE9DE;
  --card:#FFFCF6;
  --ink:#1F1911;
  --ink-2:#6A5F50;
  --line:#E3D9C7;
  --line-2:#D2C5AE;
  --honey:#E79A2B;
  --honey-2:#F3B84D;
  --honey-ink:#8A5A16;
  --espresso:#1B1410;
  --on-honey:#2A1B08;
  --on-espresso:#F3ECE0;

  --wrap:1140px;
  --gutter:24px;
  --radius:12px;

  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#14110D;
    --paper-2:#1A1611;
    --card:#1F1A14;
    --ink:#F4EDE1;
    --ink-2:#A89B87;
    --line:#2E2619;
    --line-2:#3C321F;
    --honey:#F0B24A;
    --honey-2:#F3C878;
    --honey-ink:#F5D9A4;
    --espresso:#0D0B08;
    --on-espresso:#F3ECE0;
  }
}

*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}

html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  background:var(--paper);
  color:var(--ink);
  font:17px/1.65 var(--ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit}
img,svg{max-width:100%}
strong{font-weight:640}

:focus-visible{
  outline:2px solid var(--honey-ink);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 var(--gutter)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:0 0 10px 0;
  font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

/* ---------------------------------------------------------------- the bar */

.bar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line);
}
.bar .wrap{display:flex;align-items:center;gap:16px;height:56px}
.bar-brand{display:flex;align-items:center;text-decoration:none;flex:none}
.bar-brand img{width:64px;height:auto;-webkit-user-select:none;user-select:none}
.wm-light{display:block}
.wm-dark{display:none}
@media (prefers-color-scheme:dark){.wm-light{display:none}.wm-dark{display:block}}

.bar-nav{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:15px}
.bar-nav a{color:var(--ink-2);text-decoration:none;white-space:nowrap}
.bar-nav a:hover{color:var(--ink)}
.bar-nav a[aria-current="page"]{color:var(--ink);font-weight:600}
/* The bar sheds its least load-bearing links before it ever wraps. */
@media (max-width:900px){.bar-nav .lvl3{display:none}}
@media (max-width:760px){.bar-nav .lvl2{display:none}}

/* --------------------------------------------------------------- buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 15px/1 var(--ui);
  padding:0 18px;height:42px;
  border-radius:10px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
}
.btn.btn-primary{background:var(--honey);color:var(--on-honey);border-color:color-mix(in srgb,var(--honey-ink) 40%,transparent)}
.btn.btn-primary:hover{background:var(--honey-2)}
.btn.btn-ghost{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn.btn-ghost:hover{border-color:var(--honey-ink);color:var(--honey-ink)}
.btn-lg{height:50px;padding:0 24px;font-size:16.5px;border-radius:11px}
.btn-block{width:100%}
.btn.btn-on-dark{background:var(--honey-2);color:#2A1B08;border-color:transparent}
.btn.btn-on-dark:hover{background:#F7CB77}
.btn.btn-quiet{border:1px solid rgba(243,236,224,.28);color:var(--on-espresso);background:transparent}
.btn.btn-quiet:hover{border-color:var(--honey-2);color:var(--honey-2)}

/* ----------------------------------------------------------------- chips */
/* A row of pills that wraps into balanced, centered lines. balanced-chips.js
   splits any [data-balance] container into .chip-row children.

   ⚠ Every chip rule is written against .chip itself, never as a descendant of
   the container. The script measures each chip inside a probe row appended to
   <body>: a rule like ".chips span" does not match there, so the widths come
   back as unstyled text, the script packs too many chips per line, and the row
   overflows its container. Measured at 390px before this was a class. */
.chip-row{display:flex;flex-wrap:nowrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;white-space:nowrap;
  font:500 13.5px/1 var(--mono);letter-spacing:.01em;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:999px;padding:8px 13px;
  text-decoration:none;
}
a.chip:hover{border-color:var(--honey-ink);color:var(--honey-ink)}
/* The container wraps and centers on its own, so the paint before the script
   runs is already close and nothing jumps a full row. */
.chips{--chip-gap:8px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chips .chip-row{flex:0 0 100%;justify-content:center}

/* ---------------------------------------------------------------- labels */

.eyebrow{
  font:600 12px/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--honey-ink);
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* A section opens on a hairline with its number and name sitting on it. */
.rule-head{
  display:flex;align-items:baseline;gap:14px;
  border-top:1px solid var(--line-2);
  padding-top:14px;margin-bottom:38px;
}
.rule-head .num{font:600 12px/1 var(--mono);color:var(--ink-2);letter-spacing:.08em}
.rule-head .name{font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--honey-ink)}
.rule-head .note{margin-left:auto;font-size:13.5px;color:var(--ink-2);text-align:right}

section{padding:76px 0}
/* the sticky bar must not sit on top of the thing an anchor just jumped to */
section[id],[id]{scroll-margin-top:76px}
section.band{background:var(--paper-2)}

h1,h2,h3{letter-spacing:-.025em;line-height:1.06;text-wrap:balance}
h2{font-size:clamp(28px,3.6vw,42px);font-weight:680}
h3{font-size:19px;font-weight:650;letter-spacing:-.015em;line-height:1.25}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.section-lede{max-width:56ch;margin-top:16px;color:var(--ink-2);font-size:18px}

/* ---------------------------------------------------------------- footer */

.site-footer{border-top:1px solid var(--line);padding:52px 0 60px;font-size:15px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.footer-grid h2{font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px}
.footer-grid ul{display:grid;gap:9px}
.footer-grid a{color:var(--ink-2);text-decoration:none}
.footer-grid a:hover{color:var(--ink)}
.footer-brand img{width:64px;height:auto;margin-bottom:14px}
.footer-brand p{color:var(--ink-2);font-size:14.5px;max-width:30ch}
.footer-brand a{color:var(--ink-2)}
.colophon{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  color:var(--ink-2);font-size:13.5px}
.colophon a{color:var(--ink-2);text-decoration:none}
.colophon a:hover{color:var(--ink)}

/* --------------------------------------------------- legal + text pages */

.doc{padding:56px 0 24px}
.doc h1{font-size:clamp(32px,5vw,46px);font-weight:700;margin-bottom:10px}
.doc .updated{font:500 13px/1 var(--mono);color:var(--ink-2);letter-spacing:.04em;margin-bottom:34px}
.doc h2{font-size:21px;font-weight:650;letter-spacing:-.01em;margin:38px 0 10px}
.doc p,.doc li{margin-bottom:14px;text-wrap:pretty;overflow-wrap:break-word}
.doc ul{list-style:disc;padding-left:22px}
.doc li{margin-bottom:8px}
.doc a{color:var(--honey-ink);text-underline-offset:3px}
.doc .lead{font-size:20px;line-height:1.55;color:var(--ink-2);margin-bottom:26px}
.doc code{font:14px/1.5 var(--mono);background:var(--paper-2);border:1px solid var(--line);
  border-radius:6px;padding:1px 6px;overflow-wrap:anywhere}
/* No colored stripe down one edge: emphasis is the ground and the full border. */
.callout{background:var(--paper-2);border:1px solid var(--line-2);
  border-radius:var(--radius);padding:20px 22px;margin:8px 0 18px}
.callout p:last-child{margin-bottom:0}

/* The legal pages link to each other, so none of them is a dead end. These are
   a chip row, so balanced-chips.js splits them into balanced, centered rows
   rather than letting a full line drop one orphan. */
.doc-nav{--chip-gap:8px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:34px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.doc-nav .chip-row{flex:0 0 100%;justify-content:center}
.chip.is-here{background:var(--ink);color:var(--paper);border-color:var(--ink)}
a.chip.is-here:hover{color:var(--paper)}

/* --------------------------------------------------------- utility pages */

/* checkout, thanks, find my license: one centered column, same shell. */
.utility{display:flex;flex-direction:column;min-height:100vh}
.utility main{flex:1;display:flex;align-items:center;padding:56px 0}
.panel{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:34px;max-width:560px;margin:0 auto;
}
.panel h1{font-size:26px;font-weight:680;margin-bottom:12px}
.panel p{color:var(--ink-2);margin-bottom:14px;text-wrap:pretty}
.panel p:last-child{margin-bottom:0}
.panel a{color:var(--honey-ink)}
.panel .btn{margin-top:8px}
.muted{font-size:13.5px;color:var(--ink-2)}

.field{display:flex;gap:10px;align-items:stretch;margin:6px 0 14px}
.field input{
  flex:1;min-width:0;font:16px/1 var(--ui);color:var(--ink);
  height:46px;padding:0 14px;background:var(--paper);
  border:1px solid var(--line-2);border-radius:10px;
}
.field input::placeholder{color:var(--ink-2);opacity:.75}
.field input:focus-visible{outline:2px solid var(--honey-ink);outline-offset:1px;border-color:var(--honey-ink)}
.field .btn{height:46px}
.label{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px}

.keybox{
  display:block;font:14px/1.5 var(--mono);
  background:var(--espresso);color:var(--on-espresso);
  padding:16px;border-radius:10px;word-break:break-all;margin:16px 0;
}

/* ------------------------------------------------------------ responsive */

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:640px){
  :root{--gutter:20px}
  body{font-size:16.5px}
  section{padding:56px 0}
  .bar .wrap{height:52px;gap:10px}
  .bar-brand img{width:56px}
  .bar-nav{gap:14px}
  .footer-grid{grid-template-columns:1fr}
  .panel{padding:26px 22px}
  .field{flex-direction:column}
  .field .btn{width:100%}
}