@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Archivo:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --paper: #F7F7F4;
  --paper-well: #EFEFE9;
  --ink: #12181B;
  --ink-soft: #4B5860;
  --ink-faint: #7C8A8B;
  --blue: #3D5FDE;
  --blue-soft: #E7EAFB;
  --green: #2FA184;
  --green-soft: #E2F3EE;
  --orange: #E8952C;
  --orange-soft: #FBEDD8;
  --line: #DCDED6;
  --dark: #10151A;
  --dark-well: #1A2128;
  --on-dark: #F2F3EF;
  --on-dark-soft: #A8B4B4;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper: #10151A; --paper-well: #171E24; --ink: #ECEFEA; --ink-soft: #A9B6B6; --ink-faint: #758283;
    --blue: #7C93F2; --blue-soft: #1D2540; --green: #63C4A8; --green-soft: #14332C;
    --orange: #F2B15A; --orange-soft: #3A2A12; --line: #2A323A;
    --dark: #05080A; --dark-well: #0E1318; --on-dark: #F2F3EF; --on-dark-soft: #92A0A0;
  }
}
:root[data-theme="dark"]{
  --paper: #10151A; --paper-well: #171E24; --ink: #ECEFEA; --ink-soft: #A9B6B6; --ink-faint: #758283;
  --blue: #7C93F2; --blue-soft: #1D2540; --green: #63C4A8; --green-soft: #14332C;
  --orange: #F2B15A; --orange-soft: #3A2A12; --line: #2A323A;
  --dark: #05080A; --dark-well: #0E1318; --on-dark: #F2F3EF; --on-dark-soft: #92A0A0;
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Archivo", ui-sans-serif, system-ui, sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--blue); color:#fff; }
img{ max-width:100%; display:block; }
a{ color:var(--blue); }
.wrap{ max-width:1080px; margin:0 auto; padding:0 1.5rem; }
code{ font-family:"JetBrains Mono", ui-monospace, monospace; background:var(--paper-well); padding:0.1em 0.4em; border-radius:4px; font-size:0.9em; }
pre{ background:var(--dark-well); color:#C9D6D2; border-radius:8px; padding:1rem 1.2rem; overflow-x:auto; font-family:"JetBrains Mono",monospace; font-size:0.85rem; line-height:1.7; }
pre code{ background:none; padding:0; color:inherit; }

h1,h2,h3{ font-family:"Bricolage Grotesque", ui-sans-serif, sans-serif; font-weight:700; letter-spacing:-0.01em; text-wrap:balance; margin:0; }
.eyebrow{
  font-family:"JetBrains Mono", ui-monospace, monospace; font-size:0.72rem; letter-spacing:0.12em;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:0.55em; color:var(--blue);
}
.eyebrow::before{ content:""; width:1.3em; height:1px; background:currentColor; opacity:0.6; }

header.site{
  position:sticky; top:0; z-index:10;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:0.9rem 0; }
.brand{ display:flex; align-items:center; gap:0.6rem; text-decoration:none; color:var(--ink); }
.brand img{ width:26px; height:26px; }
.brand span{ font-family:"Bricolage Grotesque", sans-serif; font-weight:700; font-size:1.1rem; }
.nav-links{ display:flex; align-items:center; gap:1.6rem; }
.nav-links a{ color:var(--ink-soft); text-decoration:none; font-size:0.92rem; }
.btn{
  display:inline-flex; align-items:center; gap:0.5rem; background:var(--ink); color:var(--paper);
  padding:0.55rem 1.1rem; border-radius:100px; font-size:0.88rem; font-weight:600; text-decoration:none; white-space:nowrap;
}
.btn:hover{ opacity:0.88; }
@media (max-width:640px){ .nav-links a:not(.btn){ display:none; } }

.crumbs{ font-family:"JetBrains Mono",monospace; font-size:0.76rem; color:var(--ink-faint); padding:1.3rem 0 0; }
.crumbs a{ color:var(--ink-faint); }

.article-head{ padding:1.2rem 0 2rem; max-width:760px; }
.article-head .cat{ color:var(--green); }
.article-head h1{ font-size:clamp(1.8rem, 3.6vw, 2.5rem); margin-top:0.7rem; line-height:1.12; }

.answer-box{
  max-width:760px; background:var(--paper-well); border-left:3px solid var(--blue);
  border-radius:4px; padding:1.2rem 1.4rem; margin:0 0 2.4rem;
}
.answer-box .lbl{
  font-family:"JetBrains Mono",monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--blue); display:block; margin-bottom:0.5rem;
}
.answer-box p{ margin:0; font-size:1.02rem; }

article.body{ max-width:700px; padding-bottom:2rem; }
article.body h2{ font-size:1.3rem; margin:2.2rem 0 0.8rem; }
article.body h3{ font-size:1.05rem; margin:1.6rem 0 0.5rem; }
article.body p{ margin:0 0 1.1rem; color:var(--ink-soft); }
article.body strong{ color:var(--ink); font-weight:600; }
article.body ul, article.body ol{ margin:0 0 1.2rem; padding-left:1.3rem; color:var(--ink-soft); }
article.body li{ margin-bottom:0.5rem; }
article.body li::marker{ color:var(--ink-faint); }
.table-wrap{ overflow-x:auto; margin:0 0 1.4rem; }
table{ width:100%; border-collapse:collapse; font-size:0.92rem; }
th,td{ text-align:left; padding:0.6rem 0.8rem; border-bottom:1px solid var(--line); vertical-align:top; }
th{ font-family:"JetBrains Mono",monospace; font-weight:500; font-size:0.72rem; text-transform:uppercase; color:var(--ink-faint); }

.callout{ background:var(--orange-soft); border-radius:8px; padding:1rem 1.2rem; margin:0 0 1.4rem; font-size:0.94rem; }
.callout.green{ background:var(--green-soft); }

.related{ max-width:700px; border-top:1px solid var(--line); padding-top:1.6rem; margin-top:1rem; }
.related .eyebrow{ color:var(--orange); margin-bottom:0.9rem; }
.related ul{ list-style:none; padding:0; margin:0; display:grid; gap:0.6rem; }
.related a{ text-decoration:none; color:var(--ink); font-weight:500; font-size:0.96rem; }
.related a:hover{ color:var(--blue); }
.related a::after{ content:" →"; color:var(--ink-faint); }

.cta-band{
  background:var(--dark); color:var(--on-dark); margin-top:3.5rem; padding:2.6rem 0;
}
.cta-band .wrap{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.cta-band h2{ color:#fff; font-size:1.35rem; max-width:26ch; }
.cta-band p{ color:var(--on-dark-soft); margin:0.4rem 0 0; font-size:0.92rem; }
.btn.light{ background:var(--orange); color:#1a1206; }

main.article-main{ padding:0 0 1rem; }

footer{
  background:var(--dark-well); color:var(--on-dark-soft); padding:2.4rem 0; border-top:1px solid #232B32; font-size:0.85rem;
}
.foot-grid{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-start; }
.foot-brand{ display:flex; align-items:center; gap:0.6rem; }
.foot-brand img{ width:20px; height:20px; }
.foot-brand span{ font-family:"Bricolage Grotesque",sans-serif; font-weight:700; color:var(--on-dark); }
.foot-links{ display:flex; gap:1.4rem; flex-wrap:wrap; font-family:"JetBrains Mono",monospace; font-size:0.76rem; }
.foot-links a{ color:var(--on-dark-soft); }
.foot-bottom{ margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid #232B32; font-size:0.76rem; }

/* hub */
.hub-hero{ padding:3.2rem 0 2.4rem; max-width:700px; }
.hub-hero h1{ font-size:clamp(2rem,4vw,2.6rem); margin-top:0.6rem; }
.hub-hero p{ color:var(--ink-soft); font-size:1.02rem; margin-top:1rem; max-width:60ch; }
.cat-block{ margin:2.6rem 0; }
.cat-block h2{ font-size:1.1rem; font-family:"JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:0.04em; font-weight:500; color:var(--ink-faint); margin-bottom:1rem; }
.cat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.7rem 2rem; }
@media (max-width:700px){ .cat-grid{ grid-template-columns:1fr; } }
.cat-grid a{
  text-decoration:none; color:var(--ink); font-size:0.97rem; padding:0.6rem 0; border-bottom:1px solid var(--line);
  display:block;
}
.cat-grid a:hover{ color:var(--blue); }