/* Breaking Pen: the document pages (privacy, terms, changelog, 404). Same
   tokens and faces as the landing page, set for reading. */
:root{
  --bg:#F4F4F1; --paper:#FBFBF9; --ink:#17181A; --ink-2:#4B4D52; --mut:#7A7D83; --mut-2:#9A9CA2;
  --accent:#C4552F; --ln:rgba(23,24,26,.07); --ln-2:rgba(23,24,26,.1);
  --serif:"Cormorant Garamond","Iowan Old Style",Palatino,Georgia,serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --t-h1:clamp(36px,4.2vw,56px); --t-h2:clamp(24px,2.3vw,30px); --t-body:17px; --t-small:14.5px; --t-label:12px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
body{ font-family:var(--sans); font-size:var(--t-body); line-height:1.6; }
a{ color:inherit; text-decoration:underline; text-decoration-color:rgba(23,24,26,.3); text-underline-offset:3px; text-decoration-thickness:from-font; }
a:hover{ color:var(--accent); text-decoration-color:currentColor; }
.hdr{ position:sticky; top:0; z-index:5; height:64px; display:flex; align-items:center; background:rgba(244,244,241,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--ln); }
.wrap{ width:100%; max-width:1160px; margin:0 auto; padding:0 clamp(20px,3vw,40px); }
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ width:28px; height:28px; border-radius:8px; box-shadow:0 1px 2px rgba(23,24,26,.15); display:block; }
.brand span{ font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:-.01em; line-height:1; }
.nav{ display:flex; gap:clamp(16px,2.4vw,28px); font-size:14px; font-weight:500; color:var(--ink-2); }
.nav a{ text-decoration:none; }
.doc{ max-width:68ch; margin:0 auto; padding:clamp(48px,7vw,96px) clamp(20px,3vw,40px) clamp(64px,8vw,112px); }
.eyebrow{ margin:0 0 14px; font-size:var(--t-label); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--mut); }
h1{ margin:0; font-family:var(--serif); font-weight:500; font-size:var(--t-h1); line-height:1.05; letter-spacing:-.015em; text-wrap:balance; }
.lede{ margin:18px 0 0; color:var(--ink-2); text-wrap:pretty; }
.meta{ margin:14px 0 0; font-size:var(--t-small); color:var(--mut); }
h2{ margin:2.4em 0 .5em; font-family:var(--serif); font-weight:600; font-size:var(--t-h2); line-height:1.15; letter-spacing:-.01em; text-wrap:balance; }
h3{ margin:1.8em 0 .4em; font-size:var(--t-body); font-weight:600; }
p,li{ text-wrap:pretty; }
code{ font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.88em; background:rgba(23,24,26,.06); padding:.1em .4em; border-radius:5px; overflow-wrap:anywhere; }
p{ margin:0 0 1em; }
ul,ol{ margin:0 0 1.2em; padding-left:1.3em; }
li{ margin:.35em 0; }
li::marker{ color:var(--mut-2); }
.rel{ padding:28px 0; border-top:1px solid var(--ln-2); }
.rel:last-of-type{ border-bottom:1px solid var(--ln-2); }
.rel__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.rel__head h2{ margin:0; }
.rel time{ font-size:var(--t-small); color:var(--mut); font-variant-numeric:tabular-nums; }
.rel ul{ margin-top:14px; }
.pill{ display:inline-block; margin-left:8px; padding:2px 9px; border-radius:999px; background:rgba(196,85,47,.12); color:var(--accent); font-size:var(--t-label); font-weight:600; letter-spacing:.06em; vertical-align:middle; }
.cta{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; height:44px; padding:0 20px; border-radius:999px; background:var(--ink); color:var(--bg); font-size:15px; font-weight:500; text-decoration:none; }
.cta:hover{ background:var(--accent); color:#fff; }
.ftr{ border-top:1px solid var(--ln); padding:32px 0 40px; font-size:var(--t-small); color:var(--mut); }
.ftr__in{ display:flex; justify-content:space-between; gap:16px 28px; flex-wrap:wrap; }
.ftr a{ text-decoration:none; color:var(--ink-2); }
.ftr a:hover{ color:var(--accent); }
.ftr nav{ display:flex; gap:18px; flex-wrap:wrap; }
@media (max-width:640px){ .nav{ display:none; } }