/* ═══════════════════════════════════════════════════════════
   crumpetlab.com
   One stylesheet. Editorial, typographic, light with a dark mode.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* paper */
  --paper:#FBFAF7;
  --paper-2:#F4F2EC;
  --card:#FFFFFF;
  --ink:#16181A;
  --ink-2:#3D4247;
  --muted:#6E757C;
  --faint:#9AA1A8;
  --rule:#E4E0D8;
  --rule-soft:#EEEBE4;

  /* the one accent. toasted, because of the name. */
  --accent:#B4531F;
  --accent-2:#8F3F16;
  --accent-wash:#FBF0E7;

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --measure:68ch;
  --gut:24px;
}

@media (max-width:600px){ :root{ --gut:26px } }

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#111214;
    --paper-2:#171A1C;
    --card:#191C1E;
    --ink:#F0EDE7;
    --ink-2:#C8CCD0;
    --muted:#949BA2;
    --faint:#6B7278;
    --rule:#282C2F;
    --rule-soft:#212528;
    --accent:#E8874F;
    --accent-2:#F0A272;
    --accent-wash:#221812;
  }
}
:root[data-theme="dark"]{
  --paper:#111214; --paper-2:#171A1C; --card:#191C1E;
  --ink:#F0EDE7; --ink-2:#C8CCD0; --muted:#949BA2; --faint:#6B7278;
  --rule:#282C2F; --rule-soft:#212528;
  --accent:#E8874F; --accent-2:#F0A272; --accent-wash:#221812;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  background:var(--paper);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  font-feature-settings:'kern' 1,'liga' 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap,.wrap-wide{
  margin:0 auto;
  padding-left:calc(var(--gut) + env(safe-area-inset-left, 0px));
  padding-right:calc(var(--gut) + env(safe-area-inset-right, 0px));
}
.wrap{max-width:820px}
.wrap-wide{max-width:1040px}

/* ── type ───────────────────────────────────────────────── */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--ink);
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 32;
}

h1{font-size:clamp(2.05rem,8.4vw,4.1rem);letter-spacing:-.028em}
h2{font-size:clamp(1.55rem,3.1vw,2.1rem);margin:0 0 .5em}
h3{font-size:1.16rem;font-family:var(--sans);font-weight:650;letter-spacing:-.01em}

p{margin:0 0 1.15em;max-width:var(--measure)}
p:last-child{margin-bottom:0}

a{color:var(--accent);text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration:underline;color:var(--accent-2)}

strong,b{font-weight:640;color:var(--ink)}
em{font-style:italic}

.lede{
  font-size:clamp(1.12rem,2.1vw,1.32rem);
  line-height:1.5;
  color:var(--ink-2);
  max-width:60ch;
}

.eyebrow{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  font-family:var(--sans);
}

.dim{color:var(--muted)}
.small{font-size:.9rem}
.tnum{font-variant-numeric:tabular-nums}

ul,ol{margin:0 0 1.15em 1.1em;max-width:var(--measure)}
li{margin-bottom:.5em;padding-left:.2em}
li::marker{color:var(--faint)}

hr,.rule{border:0;border-top:1px solid var(--rule);margin:0}

/* ── header ─────────────────────────────────────────────── */

.site-head{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:sticky;top:0;z-index:40;
  backdrop-filter:saturate(1.2) blur(8px);
}
.site-head .bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;height:60px;
}
.wordmark{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:-.02em;
  color:var(--ink);
}
.wordmark:hover{text-decoration:none;color:var(--accent)}
.wordmark .dot{color:var(--accent)}
.site-nav{display:flex;gap:20px;align-items:center;font-size:.88rem}
.site-nav a{color:var(--muted);font-weight:500}
.site-nav a:hover{color:var(--ink);text-decoration:none}
.site-nav a.on{color:var(--ink)}
@media (max-width:560px){ .site-nav .hide-sm{display:none} }

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

.hero{padding-top:clamp(52px,11vw,116px);padding-bottom:clamp(36px,6vw,64px)}
.hero h1{margin:0 0 .38em;max-width:16ch}
.hero .lede{margin-bottom:1.6em}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:8px 10px;
  font-size:.83rem;color:var(--muted);
}
.pill{
  border:1px solid var(--rule);
  border-radius:100px;
  padding:5px 13px;
  background:var(--card);
  white-space:nowrap;
}

/* ── the accordion list ─────────────────────────────────── */

.acc-list{border-top:1px solid var(--rule);margin:0 0 clamp(48px,8vw,88px)}

.acc{border-bottom:1px solid var(--rule)}

.acc>summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:44px 1fr 28px;
  align-items:baseline;
  gap:0 16px;
  padding:26px 0 24px;
  transition:padding-left .22s ease;
}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary:hover{padding-left:6px}
.acc>summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}

.acc .num{
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--faint);
  letter-spacing:.06em;
  padding-top:.42em;
}
.acc .ttl{
  font-family:var(--serif);
  font-size:clamp(1.28rem,2.7vw,1.72rem);
  font-weight:600;
  letter-spacing:-.018em;
  line-height:1.2;
  color:var(--ink);
}
.acc .sub{
  display:block;
  font-family:var(--sans);
  font-size:.9rem;
  font-weight:400;
  letter-spacing:0;
  color:var(--muted);
  margin-top:.42em;
  max-width:52ch;
}
.acc>summary:hover .ttl{color:var(--accent)}

.acc .sign{
  position:relative;
  width:16px;height:16px;
  justify-self:end;
  align-self:center;
  flex:none;
}
.acc .sign::before,.acc .sign::after{
  content:'';position:absolute;background:var(--faint);
  transition:transform .3s cubic-bezier(.4,0,.2,1),background .2s;
}
.acc .sign::before{left:0;top:7.5px;width:16px;height:1.5px}
.acc .sign::after{left:7.5px;top:0;width:1.5px;height:16px}
.acc[open] .sign::after{transform:rotate(90deg)}
.acc[open] .sign::before,.acc[open] .sign::after{background:var(--accent)}
.acc>summary:hover .sign::before,.acc>summary:hover .sign::after{background:var(--accent)}

.acc-body{padding:2px 28px 34px 60px}
.acc-body h3{margin:1.7em 0 .55em}
.acc-body h3:first-child{margin-top:0}
.acc-body>*:first-child{margin-top:0}
@media (max-width:640px){
  .acc>summary{grid-template-columns:30px 1fr 22px;gap:0 10px;padding:22px 0 20px}
  .acc-body{padding:0 0 30px 40px}
}
.acc[open] .acc-body{animation:accIn .3s cubic-bezier(.2,.6,.3,1) both}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .acc[open] .acc-body{animation:none} }

/* ── key/value rows ─────────────────────────────────────── */

.kv{display:grid;grid-template-columns:168px 1fr;gap:2px 22px;margin:0 0 1.15em;max-width:var(--measure)}
.kv dt{color:var(--muted);font-size:.9rem;padding-top:.13em}
.kv dd{margin:0 0 .7em;color:var(--ink-2)}
@media (max-width:620px){
  .kv{grid-template-columns:1fr;gap:0}
  .kv dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:.5em}
  .kv dd{margin-bottom:.9em}
}

/* ── cards / callouts ───────────────────────────────────── */

.card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:10px;
  padding:26px 26px 24px;
  margin:0 0 1.3em;
}
.card h3{margin:0 0 .6em}

.note{
  border-left:3px solid var(--accent);
  background:var(--accent-wash);
  padding:18px 22px;
  border-radius:0 8px 8px 0;
  margin:0 0 1.4em;
  max-width:var(--measure);
}
.note p{margin-bottom:.6em}
.note p:last-child{margin-bottom:0}

/* the big numbers */
.figs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  border-radius:10px;
  overflow:hidden;
  margin:0 0 1.6em;
}
.fig{background:var(--card);padding:22px 20px}
.fig .n{
  font-family:var(--serif);
  font-size:clamp(1.7rem,4vw,2.3rem);
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  display:block;
  margin-bottom:.34em;
}
.fig .l{font-size:.86rem;color:var(--muted);line-height:1.42}

/* ── tables ─────────────────────────────────────────────── */

.tbl-scroll{overflow-x:auto;margin:0 0 1.5em;-webkit-overflow-scrolling:touch}
table{
  width:100%;
  border-collapse:collapse;
  font-size:.94rem;
  min-width:520px;
}
caption{
  text-align:left;
  font-size:.86rem;
  color:var(--muted);
  padding:0 0 10px;
}
th,td{
  text-align:left;
  padding:12px 16px 12px 0;
  border-bottom:1px solid var(--rule-soft);
  vertical-align:top;
}
thead th{
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--faint);
  font-weight:600;
  border-bottom:1px solid var(--rule);
  padding-bottom:9px;
}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{font-variant-numeric:tabular-nums;white-space:nowrap}
td strong{color:var(--ink)}

/* ── article ────────────────────────────────────────────── */

.article{padding:clamp(40px,7vw,72px) 0 0}
.article h1{margin-bottom:.32em}
.article h2{margin-top:2.2em}
.article h2:first-of-type{margin-top:1.6em}
.article h3{margin:2em 0 .6em}
.article>section>p:first-of-type{margin-top:0}

.byline{
  display:flex;flex-wrap:wrap;gap:6px 14px;
  align-items:center;
  font-size:.88rem;color:var(--muted);
  padding:18px 0 0;
  margin-bottom:2.4em;
  border-top:1px solid var(--rule);
}
.byline .sep{color:var(--faint)}
@media (max-width:540px){ .byline{gap:2px 0} .byline .sep{display:none} }

.crumbs{font-size:.84rem;color:var(--muted);padding:26px 0 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}

.toc{
  border:1px solid var(--rule);
  border-radius:10px;
  padding:20px 24px;
  margin:0 0 2.4em;
  background:var(--paper-2);
}
.toc .eyebrow{display:block;margin-bottom:.7em}
.toc ol{margin:0 0 0 1.1em;font-size:.94rem}
.toc li{margin-bottom:.34em}
.toc a{color:var(--ink-2)}

/* faq */
.faq{border-top:1px solid var(--rule);margin-top:1em}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:18px 30px 18px 0;
  font-weight:600;font-size:1.02rem;
  position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:4px;top:16px;
  font-size:1.2rem;color:var(--faint);font-weight:400;
}
.faq details[open] summary::after{content:'\2212';color:var(--accent)}
.faq summary:hover{color:var(--accent)}
.faq .a{padding:0 0 20px}
.faq .a p:last-child{margin-bottom:0}

/* ── next / cross links ─────────────────────────────────── */

.xlinks{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin:0 0 clamp(40px,7vw,72px);
}
.xlink{
  display:block;
  border:1px solid var(--rule);
  border-radius:10px;
  padding:22px 22px 20px;
  background:var(--card);
  color:var(--ink);
  transition:border-color .2s,transform .2s;
}
.xlink:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px)}
.xlink .eyebrow{display:block;margin-bottom:.6em}
.xlink .t{
  font-family:var(--serif);font-size:1.22rem;font-weight:600;
  letter-spacing:-.018em;line-height:1.22;display:block;margin-bottom:.4em;
}
.xlink:hover .t{color:var(--accent)}
.xlink .d{font-size:.9rem;color:var(--muted);line-height:1.45}

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

.site-foot{
  border-top:1px solid var(--rule);
  padding:40px 0 56px;
  font-size:.88rem;
  color:var(--muted);
}
.foot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:28px;
  margin-bottom:32px;
}
.foot-grid h4{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  margin-bottom:.9em;
}
.foot-grid ul{list-style:none;margin:0}
.foot-grid li{margin-bottom:.44em}
.foot-grid a{color:var(--ink-2)}
.foot-grid a:hover{color:var(--accent)}
.foot-fine{
  display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;
  border-top:1px solid var(--rule-soft);padding-top:20px;
  font-size:.82rem;color:var(--faint);
}

/* ── theme toggle ───────────────────────────────────────── */

.tt{
  border:1px solid var(--rule);
  background:var(--card);
  color:var(--muted);
  border-radius:100px;
  width:30px;height:30px;
  display:grid;place-items:center;
  cursor:pointer;
  font-size:.8rem;
  line-height:1;
  padding:0;
  flex:none;
}
.tt:hover{color:var(--accent);border-color:var(--accent)}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--accent);color:#fff;padding:10px 16px;z-index:100;border-radius:0 0 6px 0;
}
.skip:focus{left:0}

::selection{background:var(--accent);color:#fff}