/* ============================================================================
   desk.css — shared "The Desk" design tokens + simple-page styles.
   Used by the FAQ, about and blog pages. The landing page (index.html) keeps
   its own inline CSS with the full stacking machinery; this file is the calm,
   document-like subset: white ground, pastels, the same Google Fonts, one
   marigold accent. Keep variable values in sync with index.html's :root.
   ============================================================================ */
:root{
  --white:#FFFFFF;
  --paper-shade:#F4F1E9;
  --butter:#FFF3C2;
  --sky:#D6ECFF;
  --blush:#FFE1D6;
  --mint:#DBF4E0;
  --butter-deep:#F6E39A;
  --sky-deep:#B9DDFB;
  --blush-deep:#F7C6B5;
  --mint-deep:#BFE9C8;
  --ink:#1A1B1A;
  --ink-2:#33352F;
  --muted:#5C5F56;
  --muted-2:#7A7D73;
  --hairline:#E7E3D7;
  --hairline-2:#D9D5C7;
  --gold:#FFAD1F;
  --gold-deep:#E8920A;
  --gold-ink:#5A3D00;
  --ins-bg:#E2F0DF;
  --ins-ink:#2C5A38;
  --del-bg:#FBE6DE;
  --del-ink:#9A4B36;
  --sh-sheet:0 1px 1px rgba(40,38,30,.04), 0 8px 18px rgba(40,38,30,.08), 0 26px 50px rgba(40,38,30,.07);
  --sh-card:0 1px 2px rgba(40,38,30,.05), 0 10px 26px rgba(40,38,30,.10);
  --sh-tab:0 2px 6px rgba(40,38,30,.10);
  --display:"Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:"Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --mono:"Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius:14px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{overflow-x:clip;}
body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
}
img{max-width:100%;}
a{color:var(--gold-deep); text-decoration-thickness:1.5px; text-underline-offset:3px;}
a:hover{text-decoration-thickness:2px;}
h1,h2,h3,p,li{text-wrap:pretty;}
:focus-visible{outline:2.5px solid var(--gold-deep); outline-offset:3px; border-radius:4px;}

/* the same drifting sunlight, but calmer (no animation needed on doc pages) */
.sun{
  position:fixed; inset:-30vmax; z-index:0; pointer-events:none;
  background:
    radial-gradient(60vmax 60vmax at 12% 4%, rgba(255,224,150,.26), rgba(255,224,150,0) 60%),
    radial-gradient(70vmax 70vmax at 96% 22%, rgba(214,236,255,.22), rgba(214,236,255,0) 62%),
    radial-gradient(60vmax 60vmax at 74% 100%, rgba(255,225,214,.18), rgba(255,225,214,0) 60%);
}

.wrap{position:relative; z-index:1;}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:#FFFFFF;
  border-bottom:1px solid var(--hairline);
}
.nav-inner{
  max-width:880px; margin-inline:auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.wordmark{
  font-family:var(--display); font-weight:800; font-size:21px;
  letter-spacing:-.02em; text-decoration:none; color:var(--ink);
  display:inline-flex; align-items:center; gap:1px;
}
.wordmark .ext{color:var(--gold-deep); font-weight:600;}
.wordmark .clipmark{width:13px; height:25px; margin-right:8px; flex:0 0 auto; transform:rotate(-12deg); overflow:visible;}
.nav-links{display:flex; align-items:center; gap:8px;}
.nav-links a.txt{
  font-family:var(--display); font-weight:500; font-size:14.5px;
  color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:8px;
  transition:color .18s ease, background .18s ease;
}
.nav-links a.txt:hover{color:var(--ink); background:var(--paper-shade);}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-weight:600; font-size:13.5px;
  background:var(--gold); color:var(--gold-ink);
  border:1.5px solid var(--gold-deep);
  padding:8px 15px; border-radius:999px; text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 4px 12px rgba(232,146,10,.28);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{background:#FFB838; transform:translateY(-1px);}

/* ---------- PAGE SHELL ---------- */
.page{max-width:760px; margin-inline:auto; padding:0 28px 40px;}
.page-head{padding:54px 0 12px;}
.kicker{
  font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-deep); display:block; margin-bottom:14px;
}
h1.page-title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(34px, 5vw, 52px); line-height:1.05; letter-spacing:-.025em; color:var(--ink);
}
.page-lede{
  font-family:var(--serif); font-size:20px; line-height:1.55; color:var(--ink-2);
  margin-top:20px; max-width:62ch;
}
.factsheet{
  font-family:var(--serif); font-size:17px; line-height:1.6; color:var(--ink-2);
  background:var(--butter); border:1px solid var(--butter-deep);
  border-radius:12px; padding:22px 26px; margin:30px 0; box-shadow:var(--sh-card);
}

/* ---------- PROSE ---------- */
.prose{font-family:var(--serif); color:var(--ink-2);}
.prose h2{
  font-family:var(--display); font-weight:800;
  font-size:clamp(22px,2.6vw,28px); line-height:1.18; letter-spacing:-.015em; color:var(--ink);
  margin:38px 0 10px; scroll-margin-top:90px;
}
.prose h2 a.anchor{
  color:var(--hairline-2); text-decoration:none; font-weight:400;
  margin-left:.4em; opacity:0; transition:opacity .15s ease;
}
.prose h2:hover a.anchor{opacity:1;}
.prose h3{font-family:var(--display); font-weight:700; font-size:20px; color:var(--ink); margin:26px 0 8px;}
.prose p{margin:0 0 14px; max-width:68ch;}
.prose ul,.prose ol{margin:0 0 16px; padding-left:1.4em; max-width:68ch;}
.prose li{margin:0 0 7px;}
.prose strong{font-weight:600; color:var(--ink);}
.prose em{font-style:italic;}
.prose blockquote{
  border-left:3px solid var(--gold); background:var(--paper-shade);
  margin:0 0 18px; padding:12px 18px; border-radius:0 8px 8px 0;
  font-style:italic; color:var(--ink-2); max-width:68ch;
}
.prose blockquote.image-note{
  font-family:var(--display); font-size:14px; font-style:normal;
  color:var(--muted); background:#FCFBF6;
}
.prose code{
  font-family:var(--mono); font-size:.88em;
  background:var(--paper-shade); border:1px solid var(--hairline);
  border-radius:5px; padding:1px 5px;
}
.prose pre{
  max-width:68ch; overflow:auto; margin:0 0 18px;
  background:var(--ink); color:#FFFDF6;
  border-radius:10px; padding:14px 16px;
}
.prose pre code{
  background:transparent; border:0; color:inherit; padding:0;
}
.prose img{
  display:block; width:100%; max-width:68ch;
  border:1px solid var(--hairline-2); border-radius:12px;
  box-shadow:var(--sh-card); margin:8px 0 20px;
}
.prose a{color:var(--gold-deep);}

/* comparison tables — paper-toned, legible */
.prose table{
  width:100%; border-collapse:collapse; margin:8px 0 22px;
  font-family:var(--display); font-size:15px;
}
.prose th,.prose td{
  border:1px solid var(--hairline-2); padding:10px 14px; text-align:left; vertical-align:top;
}
.prose th{background:var(--paper-shade); font-weight:700; color:var(--ink-2);}
.prose tbody tr:nth-child(even) td{background:#FCFBF6;}

/* FAQ-specific: a touch of air between answers */
.faq-q{margin-top:34px;}
.faq-q:first-of-type{margin-top:18px;}

/* ---------- PUBLIC MARKDOWN DOCS ---------- */
.docs-page{max-width:1080px;}
.docs-layout{
  display:grid; grid-template-columns:minmax(190px,260px) minmax(0,1fr);
  gap:44px; align-items:start; padding-top:22px;
}
.doc-nav{
  position:sticky; top:84px;
  font-family:var(--display); font-size:14px;
  border:1px solid var(--hairline); border-radius:12px;
  background:rgba(255,255,255,.84); box-shadow:var(--sh-card);
  padding:16px;
}
.doc-nav h2{
  font-size:12px; font-family:var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold-deep); margin:0 0 9px;
}
.doc-nav-group{margin-top:16px;}
.doc-nav-group:first-of-type{margin-top:0;}
.doc-nav-group-title{
  display:block; font-size:12px; color:var(--muted-2);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px;
}
.doc-nav a{
  display:block; color:var(--muted); text-decoration:none;
  padding:6px 8px; border-radius:7px; line-height:1.25;
}
.doc-nav a:hover{background:var(--paper-shade); color:var(--ink);}
.doc-nav a[aria-current="page"]{background:var(--butter); color:var(--gold-ink);}
.doc-shell{min-width:0;}
.doc-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--display); color:var(--muted);
  font-size:13px; margin:20px 0 0;
}
.doc-meta a{color:var(--muted); text-decoration-color:var(--hairline-2);}
.doc-status{
  font-family:var(--display); color:var(--muted);
  background:var(--paper-shade); border:1px solid var(--hairline);
  border-radius:12px; padding:18px 20px; margin-top:18px;
}
.docs-cards{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px; margin:24px 0 6px;
}
.docs-card{
  display:block; color:var(--ink-2); text-decoration:none;
  border:1px solid var(--hairline); border-radius:12px;
  background:#fff; padding:16px 18px; box-shadow:var(--sh-card);
}
.docs-card:hover{transform:translateY(-1px);}
.docs-card strong{
  display:block; font-family:var(--display); color:var(--ink);
  font-size:17px; margin-bottom:4px;
}
.docs-card span{display:block; color:var(--muted); font-size:14px; line-height:1.45;}

/* ---------- FOOTER ---------- */
.footer{padding:40px 0 56px; margin-top:24px; border-top:1px solid var(--hairline);}
.footer-inner{max-width:760px; margin-inline:auto; padding:0 28px;}
.footer .fmark{font-family:var(--display); font-weight:800; font-size:17px; color:var(--ink);}
.footer .fmark .ext{color:var(--gold-deep); font-weight:600;}
.footer .fmeta{font-family:var(--display); font-size:13.5px; color:var(--muted); margin-top:8px; line-height:1.7;}
.footer a{color:var(--muted-2); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--hairline-2);}
.footer a:hover{color:var(--ink); text-decoration-color:var(--gold);}
.md-link{margin-top:10px;}

@media (max-width:680px){
  body{font-size:17px;}
  .page,.nav-inner,.footer-inner{padding-inline:18px;}
  .nav-links a.txt{display:none;}
  .docs-layout{display:block; padding-top:8px;}
  .doc-nav{position:relative; top:auto; margin-bottom:24px;}
  .docs-cards{grid-template-columns:1fr;}
  /* wide comparison tables scroll instead of being clipped */
  .prose table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; font-size:13px;}
  .prose th,.prose td{padding:8px 10px;}
}