/* ==========================================================================
   So Fractional — blog (public)

   Tokens, nav, buttons and footer mirror the hand-built marketing pages so
   the blog reads as one site rather than a bolted-on section.

   One deliberate divergence from index.html: --stone (#8d8781) is used there
   for small body copy, where it computes to ~2.8:1 against the bone
   background and fails WCAG AA. Small copy here uses --stone-text instead
   (~5.6:1). --stone is kept for decorative use, where it passes.

   Breakpoints: 344px (smallest supported handset), 768px (tablet),
   1920px (large desktop).
   ========================================================================== */

:root{
  --ink:#201d26;
  --bone:#f1efeb;
  --plaster:#e7e4de;
  --stone:#8d8781;        /* decorative only */
  --stone-text:#6b6560;   /* small copy — AA against bone and white */
  --purple:#4b21a8;
  --purple-deep:#2a1160;
  --purple-soft:#b79bf5;
  --body:#524d57;
  --line:#dcd8d0;
  --bar:12px;
  --max:1180px;
  --narrow:720px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}

body{
  background:var(--bone);
  color:var(--ink);
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  max-width:100%;
}

::selection{background:var(--purple);color:var(--bone)}
img{max-width:100%}
a{color:inherit}

h1,h2,h3,.display{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 112;
  font-weight:800;
  line-height:1.02;
  letter-spacing:-0.015em;
}

.mono{font-family:'IBM Plex Mono',monospace}

.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:var(--narrow)}
.wrap-wide{max-width:920px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--purple);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;
  font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--purple);outline-offset:2px}

.fbar{height:var(--bar);background:var(--purple);border-radius:999px;border:none}
.fbar.thin{height:4px}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,#121016 92%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid #24202b;
}
.nav-in{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;max-width:var(--max);margin:0 auto;
}
.logo-lockup{display:flex;flex-direction:row;align-items:center;line-height:1;text-decoration:none;gap:9px}
.logo-lockup .l-num{font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;letter-spacing:.02em;color:var(--bone)}
.logo-lockup .l-bar{width:2.5px;height:22px;flex:none;background:var(--purple);border-radius:99px}
.logo-lockup .l-den{font-family:'Archivo',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.19em;color:var(--bone)}
.nav-links{display:flex;gap:9px;align-items:center;list-style:none}
.nav-links a.nl{
  text-decoration:none;font-size:13px;font-weight:600;color:#c6c0cc;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border:1.5px solid #35303e;border-radius:999px;
  background:transparent;position:relative;
  transition:background .22s,border-color .22s,color .22s,transform .22s cubic-bezier(.3,1.4,.4,1);
}
.nav-links a.nl:hover,.nav-links a.nl:focus-visible{
  background:var(--purple);border-color:var(--purple);color:#fff;
  transform:translateY(-2px) rotate(-1deg);
}
.nav-links a.nl.here{background:var(--purple);border-color:var(--purple);color:#fff}
.nav-cta{
  display:inline-block;background:var(--purple);color:#fff;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;letter-spacing:.02em;
  padding:11px 22px;border-radius:999px;text-decoration:none;border:2px solid var(--purple);
  transition:background .2s,border-color .2s,transform .15s;
}
.nav-cta:hover,.nav-cta:focus-visible{background:#fff;color:var(--purple);border-color:#fff;transform:translateY(-1px)}

@media (prefers-reduced-motion:reduce){
  .nav-links a.nl{transition:none}
  .nav-links a.nl:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--ink);color:var(--bone);
  font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;letter-spacing:.02em;
  padding:13px 26px;border-radius:999px;text-decoration:none;border:2px solid var(--ink);
  transition:background .2s,color .2s,border-color .2s;
}
.btn:hover,.btn:focus-visible{background:var(--purple);border-color:var(--purple);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--ink);color:var(--bone);border-color:var(--ink)}

/* ---------- eyebrow ---------- */
.eyebrow{
  display:flex;align-items:center;gap:14px;margin-bottom:22px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--stone-text);
}
.eyebrow .frac{color:var(--purple);font-weight:600}
.eyebrow .frac a{text-decoration:none}
.eyebrow .frac a:hover{text-decoration:underline}
.eyebrow .rule{flex:0 0 44px;height:4px;background:var(--purple);border-radius:99px}

/* ---------- blog hero ---------- */
.blog-hero{padding:60px 0 40px}
.blog-hero h1{font-size:clamp(34px,6vw,72px);margin-bottom:20px}
.blog-hero-sub{color:var(--stone-text);font-size:17px;max-width:620px}

.blog-404{padding:96px 0}
.blog-404 h1{font-size:clamp(30px,5vw,56px);margin-bottom:18px}
.blog-404 p{margin-bottom:28px}

.preview-flag{
  background:var(--purple-deep);color:#fff;text-align:center;
  padding:10px 20px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
}

/* ---------- post list ---------- */
.blog-list-sec{padding:0 0 80px}
.blog-empty{color:var(--stone-text);font-size:18px;padding:40px 0 80px}

.post-list{display:flex;flex-direction:column}

/* Mobile-first: a stacked card. Two columns arrive at 768px. */
.post-card{
  display:grid;grid-template-columns:1fr;gap:20px;align-items:start;
  padding:36px 0;border-top:1px solid var(--line);
  transition:background .25s;
}
.post-card:last-child{border-bottom:1px solid var(--line)}
.post-card:hover{background:color-mix(in srgb,var(--plaster) 45%,transparent)}

.pc-media{display:block;border-radius:16px;overflow:hidden;background:var(--plaster);aspect-ratio:16/10}
.pc-media img{width:100%;height:100%;object-fit:cover;display:block}

.pc-meta{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone-text);margin-bottom:12px}
.pc-title{font-size:clamp(22px,2.6vw,32px);margin-bottom:12px;line-height:1.12}
.pc-title a{text-decoration:none}
.pc-title a:hover{color:var(--purple)}
.pc-excerpt{color:var(--body);font-size:16px;margin-bottom:16px}
.pc-more{
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.06em;
  color:var(--purple);font-weight:600;text-decoration:none;
}
.pc-more:hover{text-decoration:underline}

.pager{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:48px;flex-wrap:wrap}
.pager-pos{color:var(--stone-text);font-size:13px}

/* ---------- single post ---------- */
.post-head{padding:56px 0 0}
.post-title{font-size:clamp(28px,5.2vw,62px);margin-bottom:20px;line-height:1.06}
.post-meta{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone-text)}
.post-rule{margin:36px 0 0;width:88px}

.post-hero{margin:36px 0 8px;border-radius:20px;overflow:hidden;background:var(--plaster)}
.post-hero img{width:100%;height:auto;display:block}

.post-body{padding:36px 0 80px;font-size:17px;line-height:1.75;color:var(--ink)}

.post-body p{margin:0 0 1.35em}
.post-body h2{font-size:clamp(23px,3.4vw,36px);margin:2em 0 .6em;line-height:1.14}
.post-body h3{font-size:clamp(19px,2.4vw,26px);margin:1.8em 0 .5em;line-height:1.2}
.post-body h4{font-family:'Archivo',sans-serif;font-weight:800;font-size:18px;margin:1.6em 0 .4em}

.post-body a{color:var(--purple);text-decoration:underline;text-underline-offset:2px}
.post-body a:hover{background:var(--purple);color:#fff;text-decoration:none}

.post-body strong{font-weight:700}
.post-body em{font-style:italic}

.post-body ol{margin:0 0 1.35em;padding-left:1.5em}
.post-body ol li{margin-bottom:.5em}
.post-body ol li::marker{font-family:'IBM Plex Mono',monospace;color:var(--purple);font-weight:600}

.post-body ul{margin:0 0 1.35em;padding-left:0;list-style:none}
.post-body ul li{margin-bottom:.5em;padding-left:26px;position:relative}
.post-body ul li::before{
  content:"";position:absolute;left:0;top:.68em;width:14px;height:3.5px;
  background:var(--purple);border-radius:99px;
}

.post-body blockquote{
  margin:1.8em 0;padding:4px 0 4px 22px;border-left:4px solid var(--purple);
  color:var(--body);font-size:1.05em;
}
.post-body blockquote p:last-child{margin-bottom:0}

.post-body img{border-radius:16px;margin:1.8em 0;display:block;height:auto}
.post-body figure{margin:1.8em 0}
.post-body figcaption{
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--stone-text);
  margin-top:10px;text-align:center;
}

.post-body hr{border:none;height:4px;background:var(--purple);border-radius:99px;width:88px;margin:2.6em 0}

.post-body code{
  font-family:'IBM Plex Mono',monospace;font-size:.88em;
  background:var(--plaster);padding:2px 6px;border-radius:6px;
}
.post-body pre{
  background:var(--ink);color:var(--bone);padding:22px 24px;border-radius:16px;
  overflow-x:auto;margin:1.6em 0;font-size:14.5px;line-height:1.6;
}
.post-body pre code{background:none;padding:0;color:inherit}

/* Tables scroll inside their own box rather than widening the page. */
.post-rich table{
  border-collapse:collapse;width:100%;margin:1.8em 0;font-size:15px;
  display:block;overflow-x:auto;
}
.post-rich th,.post-rich td{
  border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top;
}
.post-rich th{
  background:var(--plaster);font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;
}
.post-rich td[align="right"],.post-rich th[align="right"]{text-align:right}
.post-rich tbody tr:nth-child(even){background:color-mix(in srgb,var(--plaster) 40%,transparent)}

/* ---------- embeds ----------
   An embed is third-party markup rendered verbatim. `all:revert` undoes this
   stylesheet's global element rules (the `*` reset, `a{color:inherit}`, the
   Archivo heading rule) inside it, so a minimally-styled snippet keeps its own
   appearance instead of silently inheriting ours. The overflow rules below
   deliberately come AFTER it: they are the one thing still imposed, because an
   embed must never be able to widen the page. */
.post-embed{margin:2em 0;max-width:100%}
.post-embed *{all:revert}
.post-embed iframe,.post-embed video,.post-embed embed,.post-embed object{
  max-width:100%;border:0;display:block;margin:0 auto;
}
.post-embed :is(img,svg){max-width:100%;height:auto}
.post-embed table{max-width:100%;display:block;overflow-x:auto}

/* ---------- closing CTA + footer ---------- */
.close{padding:88px 0;text-align:center;border-top:1px solid var(--line)}
.hero-fraction{display:flex;flex-direction:column;align-items:center;gap:0}
.hero-fraction .num{
  font-family:'Archivo',sans-serif;font-weight:800;font-variation-settings:'wdth' 116;
  font-size:clamp(44px,8vw,110px);line-height:.9;letter-spacing:.01em;
}
.hero-fraction .bar{
  width:min(52vw,420px);height:10px;background:var(--purple);
  border-radius:999px;margin:14px 0;
}
.hero-fraction .den{
  font-family:'Archivo',sans-serif;font-weight:800;font-variation-settings:'wdth' 116;
  font-size:clamp(17px,3vw,40px);letter-spacing:.16em;line-height:1;
}
.close h2{font-size:clamp(26px,4.4vw,52px);margin:40px 0 16px}
.close p{color:var(--stone-text);max-width:520px;margin:0 auto 36px;font-size:17px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

footer{border-top:1px solid var(--plaster);padding:34px 0;font-size:14px;color:var(--stone-text)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer .mono{font-size:12.5px}
footer a{color:var(--stone-text)}

/* This stylesheet is also loaded inside the isolated embed-preview iframe. */
.embed-preview-frame{background:transparent}
.embed-preview-frame .post-body{padding:0}

/* ==========================================================================
   Breakpoints — 344px / 768px / 1920px
   ========================================================================== */

/* 344px: the smallest handset supported. Nothing may overflow here. */
@media (max-width:344px){
  .wrap{padding:0 14px}
  .nav-in{padding:14px}
  .blog-hero{padding:44px 0 30px}
  .blog-hero h1{font-size:30px}
  .post-title{font-size:26px}
  .post-body{font-size:16px}
  .post-body pre{padding:16px 14px;font-size:13px}
  .post-body blockquote{padding-left:16px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{text-align:center}
  .pager{flex-direction:column;align-items:flex-start;gap:14px}
  footer .wrap{flex-direction:column;gap:10px}
}

/* Below tablet the compressed nav hides its secondary links. */
@media (max-width:767px){
  .nav-links li:not(.keep){display:none}
}

/* 768px: tablet and up — two-column cards and a roomier rhythm. */
@media (min-width:768px){
  .wrap{padding:0 32px}
  .nav-in{padding:16px 32px}
  .blog-hero{padding:88px 0 56px}
  .blog-hero-sub{font-size:19px}
  .blog-list-sec{padding:0 0 110px}
  .post-card{grid-template-columns:300px 1fr;gap:40px;padding:44px 0}
  .post-head{padding:72px 0 0}
  .post-body{padding:44px 0 100px;font-size:18px}
  .post-hero{margin:44px 0 8px}
  .close{padding:110px 0}
  .close p{font-size:18px}
}

/* 1920px: large desktop — hold the measure so text never runs long. */
@media (min-width:1920px){
  body{font-size:18px}
  .wrap{max-width:1280px}
  .wrap-narrow{max-width:760px}
  .post-body{font-size:19px;line-height:1.78}
  .blog-hero{padding:110px 0 64px}
}