/* StoneMagnet blog. Matches the live landing page system: bone/paper/granite + electric
   blue #2f5eea, Bricolage Grotesque display, IBM Plex Sans body, IBM Plex Mono labels.
   The landing page keeps its styles inline; the blog shares this file because seven pages
   would otherwise carry seven copies. nginx revalidates .css hourly (see nginx.conf), so
   an edit here is live one hour after deploy at the latest. */

:root{
  --ink:#1c1b19;
  --bone:#f3efe7;
  --paper:#fbf8f2;
  --granite:#161514;
  --granite2:#211f1c;
  --acc:#2f5eea;
  --acc-deep:color-mix(in oklab,var(--acc),#000 22%);
  --acc-soft:color-mix(in oklab,var(--acc),#fff 88%);
  --line:#e3ddce;
  --muted:#726b5e;
  --disp:'Bricolage Grotesque',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --maxw:1120px;
  --readw:720px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bone);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  line-height:1.6;font-size:17px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--acc);color:#fff}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- nav (mirrors the landing page) ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(243,239,231,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:13px 24px;display:flex;
  align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;
  font-size:19px;letter-spacing:-.01em}
.logo i{width:12px;height:12px;background:var(--acc);border-radius:2px;
  box-shadow:0 0 0 3px var(--acc-soft);font-style:normal}
.logo b{color:var(--acc-deep);font-weight:700}
.navr{display:flex;align-items:center;gap:22px}
.navlink{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--muted);
  text-transform:uppercase;transition:color .2s}
.navlink:hover{color:var(--ink)}
.navcta{display:inline-flex;align-items:center;font-family:var(--mono);font-weight:500;
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--acc);
  color:#fff;padding:11px 18px;border-radius:6px;transition:background .2s}
.navcta:hover{background:var(--acc-deep)}
@media (max-width:620px){.navlink{display:none}.navcta{padding:10px 15px}}

/* ---------- shared shells ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.read{max-width:var(--readw);margin:0 auto;padding:0 24px}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc-deep);font-weight:500}

/* ---------- article header ---------- */
.ahead{background:var(--granite);color:var(--bone);position:relative;overflow:hidden}
.ahead::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 1px 1px,rgba(243,239,231,.10) 1px,transparent 0) 0 0/26px 26px;
  opacity:.55;pointer-events:none}
.ahead::after{content:"";position:absolute;top:-30%;right:-14%;width:64%;height:140%;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--acc),transparent 74%),transparent);
  pointer-events:none}
.ahead-in{position:relative;max-width:var(--readw);margin:0 auto;
  padding:clamp(34px,5vw,52px) 24px clamp(38px,5vw,56px)}
.ahead .kicker{color:color-mix(in oklab,var(--acc),#fff 34%)}
.ahead h1{font-family:var(--disp);font-weight:800;font-size:clamp(31px,5.4vw,52px);
  line-height:1.03;letter-spacing:-.022em;margin:15px 0 0;text-wrap:balance}
.dek{font-size:clamp(17px,2.1vw,19.5px);color:rgba(243,239,231,.76);margin-top:18px;
  line-height:1.55;text-wrap:pretty}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(243,239,231,.56)}
.meta span:not(:last-child)::after{content:"·";margin-left:10px}

/* ---------- prose ---------- */
.prose{padding:clamp(36px,5vw,54px) 0 20px}
.prose > *{max-width:var(--readw);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.prose p{margin-bottom:22px;text-wrap:pretty}
.prose h2{font-family:var(--disp);font-weight:700;font-size:clamp(25px,3.5vw,33px);
  line-height:1.12;letter-spacing:-.015em;margin:52px 0 16px;text-wrap:balance}
.prose h3{font-family:var(--disp);font-weight:600;font-size:clamp(19px,2.4vw,22px);
  line-height:1.2;letter-spacing:-.008em;margin:36px 0 12px}
.prose ul,.prose ol{margin:0 auto 24px;padding-left:48px}
.prose li{margin-bottom:9px;text-wrap:pretty}
.prose li::marker{color:var(--acc-deep)}
.prose a:not(.btn){color:var(--acc-deep);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2.5px}
.prose a:not(.btn):hover{background:var(--acc-soft)}
.prose strong{font-weight:600}
.prose hr{border:0;border-top:1px solid var(--line);margin:44px auto}

/* answer-first block: the 40-60 words an AI engine lifts verbatim */
.answer{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:10px;padding:22px 26px;margin-bottom:30px;font-size:18.5px;line-height:1.58}
.answer .lbl{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--acc-deep);margin-bottom:9px}
.answer p:last-child{margin-bottom:0}

/* stat cards */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
  margin:34px auto 38px;max-width:var(--readw)}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:20px 18px}
.stat b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(28px,4vw,36px);
  line-height:1;letter-spacing:-.02em}
.stat span{display:block;font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.4}
.stat.hi b{color:var(--acc-deep)}

/* callouts */
.note{border-radius:10px;padding:20px 24px;margin:0 auto 30px;font-size:16px;line-height:1.55}
.note p:last-child{margin-bottom:0}
.note p{margin-bottom:12px}
.note .lbl{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:8px;font-weight:500}
.note.warn{background:#fdf3e7;border:1px solid #e8d3b0}
.note.warn .lbl{color:#a2620c}
.note.info{background:var(--acc-soft);border:1px solid color-mix(in oklab,var(--acc),transparent 74%)}
.note.info .lbl{color:var(--acc-deep)}

/* pull quote */
.pull{font-family:var(--disp);font-weight:600;font-size:clamp(21px,3vw,27px);line-height:1.25;
  letter-spacing:-.015em;border-left:3px solid var(--acc);padding-left:26px;margin:40px auto;
  text-wrap:balance}
.pull cite{display:block;font-family:var(--mono);font-size:12px;font-style:normal;
  font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:14px}

/* tables */
.tbl{max-width:var(--readw);margin:0 auto 32px;padding:0 24px}
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:500;background:var(--bone);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td strong{font-weight:600}
.yes{color:#1f7a4d;font-weight:600}
.no{color:#9a3412}

/* figures: wider than the reading column. Must out-specify `.prose > *`
   (0,1,0) above, which would otherwise clamp them to --readw. */
figure,.prose > figure{max-width:920px;margin:40px auto;padding:0 24px}
figure img,figure svg{width:100%;border-radius:12px;border:1px solid var(--line);
  background:var(--paper);box-shadow:0 26px 54px -34px rgba(0,0,0,.34)}
figure svg{display:block}
figcaption{font-size:13.5px;color:var(--muted);margin-top:12px;line-height:1.5;text-wrap:pretty}
figcaption b{color:var(--ink);font-weight:600}

/* ---------- index / cards ---------- */
.ihead{background:var(--granite);color:var(--bone);position:relative;overflow:hidden}
.ihead::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 1px 1px,rgba(243,239,231,.10) 1px,transparent 0) 0 0/26px 26px;
  opacity:.55;pointer-events:none}
.ihead::after{content:"";position:absolute;top:-30%;right:-10%;width:58%;height:140%;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--acc),transparent 72%),transparent);
  pointer-events:none}
.ihead-in{position:relative;max-width:var(--maxw);margin:0 auto;
  padding:clamp(44px,6vw,72px) 24px clamp(48px,6vw,76px)}
.ihead h1{font-family:var(--disp);font-weight:800;font-size:clamp(36px,6.4vw,64px);line-height:1;
  letter-spacing:-.025em;margin:16px 0 0;max-width:16ch;text-wrap:balance}
.ihead .dek{max-width:56ch}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px;
  padding:clamp(38px,5vw,56px) 0}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 20px 44px -26px rgba(0,0,0,.34);
  border-color:color-mix(in oklab,var(--acc),transparent 50%)}
.card-img{position:relative;aspect-ratio:16/9;background:var(--granite2);overflow:hidden}
.card-img img,.card-img svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border:0;border-radius:0;box-shadow:none}
.card-b{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.card h2{font-family:var(--disp);font-weight:700;font-size:20px;line-height:1.18;
  letter-spacing:-.012em;margin:10px 0 0;text-wrap:balance}
.card p{font-size:14.5px;color:var(--muted);line-height:1.5;margin-top:10px;flex:1;text-wrap:pretty}
.card .rd{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--acc-deep);margin-top:16px}
.card .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}

/* ---------- cta band ---------- */
.band{background:var(--granite);color:var(--bone);margin-top:clamp(48px,6vw,72px);
  position:relative;overflow:hidden}
.band::after{content:"";position:absolute;top:-40%;left:-8%;width:52%;height:180%;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--acc),transparent 76%),transparent);
  pointer-events:none}
.band-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(44px,6vw,66px) 24px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;align-items:center}
.band h2{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3.8vw,38px);line-height:1.06;
  letter-spacing:-.018em;max-width:18ch;text-wrap:balance}
.band p{color:rgba(243,239,231,.72);margin-top:14px;font-size:16px;max-width:44ch;text-wrap:pretty}
.btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-weight:500;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;background:var(--acc);color:#fff;
  padding:17px 28px;border-radius:7px;transition:background .22s,transform .22s;
  box-shadow:0 12px 34px -12px color-mix(in oklab,var(--acc),transparent 20%)}
.btn:hover{background:var(--acc-deep);transform:translateY(-2px)}

/* ---------- footer ---------- */
.foot{background:var(--granite2);color:rgba(243,239,231,.62);font-size:14px}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:34px 24px;display:flex;flex-wrap:wrap;
  gap:18px;align-items:center;justify-content:space-between}
.foot a{color:rgba(243,239,231,.82);text-decoration:underline;text-underline-offset:2px}
.foot a:hover{color:#fff}
.foot-links{display:flex;flex-wrap:wrap;gap:20px;font-family:var(--mono);font-size:12px;
  letter-spacing:.04em;text-transform:uppercase}
.foot-links a{text-decoration:none}

/* prev/next between posts */
.morelinks{max-width:var(--readw);margin:44px auto 0;padding:0 24px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.morelinks a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:18px 20px;transition:border-color .18s,transform .18s}
.morelinks a:hover{border-color:color-mix(in oklab,var(--acc),transparent 50%);transform:translateY(-2px)}
.morelinks .tag{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.morelinks b{font-family:var(--disp);font-weight:600;font-size:16px;line-height:1.25;
  letter-spacing:-.008em}

/* faq */
.faq{max-width:var(--readw);margin:0 auto;padding:0 24px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-family:var(--disp);font-weight:600;font-size:17.5px;
  line-height:1.3;list-style:none;display:flex;justify-content:space-between;gap:18px;
  align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--acc-deep);font-size:19px;
  line-height:1;transition:transform .2s ease;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;font-size:16px;color:var(--muted);line-height:1.6;text-wrap:pretty}
.faq details p a{color:var(--acc-deep);text-decoration:underline;text-underline-offset:2.5px}