/* ============================================================
   DRAWER · shared styles for the guide and comparison pages
   Tokens are the same set the landing page uses (design brief §1).
   The landing page keeps its own inline CSS — it is a one-off
   composition. Everything else shares this file, which is why it
   can be cached for a year.
   ============================================================ */

/* The same self-hosted faces the landing page inlines. Declared here too because an
   external stylesheet cannot borrow another page's @font-face — without these, every
   guide silently renders in system fonts and nobody files a bug about it. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/fraunces-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/fraunces-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/fraunces-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:600;font-display:swap;src:url(/fonts/fraunces-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/instrument-sans-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/spline-sans-mono-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212}

:root{
  --bg:#F6F4EF;
  --bg-warm:#EFEDE6;
  --panel:#FFFFFF;
  --ink:#1E241F;
  --ink-soft:#59605A;
  --ink-faint:#8B918A;
  --green:#1B5B41;
  --green-lift:#227150;
  --green-dim:#E3EFE9;
  --gold:#E8A020;
  --gold-ink:#8A6210;
  --gold-dim:#FBF0DA;
  --clay:#B3541E;
  --line:#DDD9CF;
  --line-soft:#E8E5DC;
  --mono:'Spline Sans Mono',ui-monospace,SFMono-Regular,monospace;
  --display:'Fraunces',Georgia,serif;
  --body:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --gutter:clamp(20px,5vw,48px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{
  font-family:var(--body);background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-height:1.6;overflow-x:clip;
}
img,svg{display:block;max-width:100%}
a{color:var(--green);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--green-lift)}
:focus-visible{outline:2.5px solid var(--green);outline-offset:3px;border-radius:4px}

.wrap{max-width:760px;margin-inline:auto;padding-inline:var(--gutter);width:100%}
.wrap-wide{max-width:1080px;margin-inline:auto;padding-inline:var(--gutter);width:100%}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:20;background:rgba(246,244,239,.88);
  backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line-soft);
}
.site-head .row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:14px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);
  font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--ink)}
/* Mark 1b from the logo frame, drawn inline with explicit fills and an explicit
   width/height in the markup — the previous version relied on this stylesheet for
   its stroke and size, and a cached CSS left the logo broken. The rule below is
   belt only; the markup alone renders correctly. */
.brand-glyph{width:26px;height:26px;flex:none}
.head-links{display:flex;align-items:center;gap:18px;font-size:14.5px}
/* :not(.btn) — a bare `a` selector here out-ranks .btn's color and paints the
   waitlist button's label ink-on-green (and green-on-green on hover). */
.head-links a:not(.btn){color:var(--ink-soft)}
.head-links a{text-decoration:none}
.head-links a:not(.btn):hover{color:var(--green)}
.btn{
  display:inline-block;background:var(--green);color:#F6F4EF;border-radius:12px;
  padding:12px 22px;font-weight:600;font-size:15px;text-decoration:none;
  border:1px solid var(--green);transition:background .18s ease;
}
.btn:hover{background:var(--green-lift);color:#F6F4EF}
.btn-sm{padding:9px 17px;font-size:14px;border-radius:10px}
.btn-ghost{background:transparent;color:var(--green);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--green-dim);color:var(--green)}

/* ---------- article ---------- */
main{padding-block:clamp(36px,6vw,64px) 0}
.crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:20px}
.crumbs a{color:var(--ink-faint);text-decoration:none}
.crumbs a:hover{color:var(--green)}
h1{font-family:var(--display);font-weight:800;letter-spacing:-.028em;line-height:1.08;
  font-size:clamp(31px,4.4vw,46px)}
.standfirst{font-size:clamp(17px,1.5vw,19px);color:var(--ink-soft);margin-top:20px;line-height:1.62}
h2{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.16;
  font-size:clamp(22px,2.6vw,29px);margin-top:clamp(38px,5vw,54px)}
h3{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.7vw,20px);margin-top:30px}
p{margin-top:16px}
article ul,article ol{margin-top:16px;padding-left:22px}
article li{margin-top:9px}
article li::marker{color:var(--green)}
strong{font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin-block:clamp(38px,5vw,52px)}

/* ---------- furniture ---------- */
.note{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;margin-top:26px;
}
.note.warn{background:var(--gold-dim);border-color:#EED9AE}
.note .k{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-ink);display:block;margin-bottom:8px}
.note.plain .k{color:var(--ink-faint)}
.note p:first-of-type{margin-top:0}

table{width:100%;border-collapse:collapse;margin-top:24px;font-size:15px;display:block;
  overflow-x:auto;white-space:nowrap}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600}
tbody tr:last-child td{border-bottom:0}

.faq{margin-top:14px}
.faq details{border-bottom:1px solid var(--line);padding-block:16px}
.faq summary{font-family:var(--display);font-weight:600;font-size:18px;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--green);font-family:var(--body);font-weight:400;
  font-size:22px;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq p{margin-top:12px;color:var(--ink-soft)}

/* ---------- CTA ---------- */
.cta{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:clamp(26px,4vw,38px);margin-top:clamp(44px,6vw,64px);
}
.cta h2{margin-top:0;font-size:clamp(21px,2.4vw,27px)}
.cta p{color:var(--ink-soft)}
.cta .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;align-items:center}
.cta .small{font-size:13.5px;color:var(--ink-faint);margin-top:14px}

/* ---------- related ---------- */
.related{margin-top:clamp(44px,6vw,60px)}
.related h2{font-size:clamp(19px,2vw,23px);margin-top:0}
.related ul{list-style:none;padding:0;margin-top:16px;display:grid;gap:10px}
.related a{text-decoration:none;display:block;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:15px 18px;color:var(--ink);
  font-weight:500;transition:border-color .18s ease}
.related a:hover{border-color:var(--green);color:var(--green)}
.related .m{display:block;font-weight:400;font-size:14px;color:var(--ink-soft);margin-top:4px}

/* ---------- index page ---------- */
.guide-group{margin-top:clamp(34px,4.5vw,48px)}
.guide-group > h2{margin-top:0}
.guide-group .lede{color:var(--ink-soft);margin-top:10px}
.cards{list-style:none;padding:0;margin-top:22px;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}
.cards a{display:block;height:100%;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:20px 22px;text-decoration:none;color:var(--ink);
  transition:border-color .18s ease,transform .18s ease}
.cards a:hover{border-color:var(--green);transform:translateY(-2px);color:var(--ink)}
.cards h3{font-size:18px;margin-top:0;line-height:1.25}
.cards p{font-size:14.5px;color:var(--ink-soft);margin-top:8px;line-height:1.55}

/* ---------- footer ---------- */
.site-foot{margin-top:clamp(56px,8vw,96px);border-top:1px solid var(--line);
  padding-block:36px 44px;font-size:14px;color:var(--ink-soft)}
.site-foot .row{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  justify-content:space-between}
.site-foot a{color:var(--ink-soft);text-decoration:none}
.site-foot a:hover{color:var(--green)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:18px}
.site-foot .fine{margin-top:18px;font-size:13px;color:var(--ink-faint);max-width:62ch}

@media (max-width:640px){
  .head-links .hide-sm{display:none}
  table{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .cards a:hover{transform:none}
}