/* Blog pages. styles.css loads first and supplies the tokens (--paper, --ink, --accent)
   and the fonts. Reading happens on paper; ink is spent on the closing call to action.
   Generated markup lives in blog/build.mjs. */
.blog{ --accent-deep:#8a5a1c; --muted:#6b665c; --measure:680px; --wide:760px; }
/* The root canvas behind these pages is ink, so nothing below the footer (overscroll,
   sub-pixel gaps, short pages) ever shows paper. The paper is painted by the page itself. */
html:has(body.blog){ background:var(--ink); overscroll-behavior:none; }
body.blog{ background:var(--ink); color:var(--ink); margin:0; min-height:100vh; font-family:'Geist',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
.blog .page{ min-height:100vh; background:var(--paper); padding:0 clamp(16px,4vw,40px) 72px; display:flex; flex-direction:column; }
.blog .page > *{ width:100%; }                 /* flex children keep their max-width and auto margins, but fill the column */
.blog .page > .blog-foot{ width:auto; align-self:stretch; margin-top:auto; }
.post, .post-list{ padding-bottom:96px; }
.blog a{ color:inherit; }
.blog a:focus-visible, .blog summary:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:3px; border-radius:2px; }
@media (prefers-reduced-motion:no-preference){ .blog html, html:has(body.blog){ scroll-behavior:smooth; } }

/* top bar: breadcrumb left, one action right */
.crumbs{ max-width:var(--wide); margin:0 auto; padding:22px 0 0; display:flex; align-items:baseline; justify-content:space-between; gap:16px; font-size:14px; }
.crumbs .path{ display:flex; gap:8px; align-items:baseline; }
.crumbs .path a{ text-decoration:none; color:var(--ink); }
.crumbs .path a:hover{ text-decoration:underline; text-underline-offset:3px; }
.crumbs .path .sl{ color:var(--muted); }
.crumbs .path [aria-current]{ color:var(--muted); }
.crumbs .act{ text-decoration:none; color:var(--accent-deep); white-space:nowrap; }
.crumbs .act:hover{ text-decoration:underline; text-underline-offset:3px; }

/* index */
.blog-head{ max-width:var(--wide); margin:72px auto 0; }
.blog-head h1{ margin:0; font-family:'Geist',sans-serif; font-weight:500; letter-spacing:-.035em; font-size:clamp(34px,5.2vw,58px); line-height:1.02; text-wrap:balance; }
.blog-head h1 .i, .post-title .i, .post-list h2 .i{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; letter-spacing:0; color:var(--accent-deep); }
.blog-head p{ margin:22px 0 0; max-width:var(--measure); font-size:19px; line-height:1.55; color:var(--ink-2); }
.post-list{ max-width:var(--wide); margin:56px auto 0; border-top:1px solid var(--ink); }
.post-list > p{ padding:32px 0; color:var(--muted); }
.post-list a.entry{ display:block; padding:30px 0 32px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.post-list a.entry:last-child{ border-bottom:1px solid var(--ink); }
.post-list .when{ display:flex; gap:18px; font-size:14px; color:var(--muted); }
.post-list h2{ margin:10px 0 0; font-family:'Geist',sans-serif; font-weight:500; letter-spacing:-.03em; font-size:clamp(24px,3vw,34px); line-height:1.08; text-wrap:balance; max-width:22ch; }
.post-list .entry:hover h2{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.post-list p.ex{ margin:12px 0 0; max-width:var(--measure); font-size:16.5px; line-height:1.55; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* post header */
.post{ max-width:var(--wide); margin:64px auto 0; }
.post-kind{ font-size:14px; color:var(--muted); margin:0 0 14px; }
.post-title{ margin:0; font-family:'Geist',sans-serif; font-weight:500; letter-spacing:-.035em; font-size:clamp(34px,5vw,58px); line-height:1.02; text-wrap:balance; }
.post-deck{ margin:26px 0 0; max-width:var(--measure); font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(21px,2.3vw,26px); line-height:1.35; color:var(--ink-2); text-wrap:pretty; }
.post-line{ margin:30px 0 0; padding:16px 0 0; border-top:1px solid var(--ink); display:flex; flex-wrap:wrap; gap:6px 26px; font-size:14px; color:var(--muted); }
.post-line b{ font-weight:500; color:var(--ink); }
.post-line a{ text-decoration:none; color:var(--ink); }
.post-line a:hover{ text-decoration:underline; text-underline-offset:3px; }
.post-cover{ max-width:var(--wide); margin:40px auto 0; }
.post-cover img{ width:100%; display:block; border-radius:6px; }

/* contents (only rendered for long posts) */
.toc{ max-width:var(--measure); margin:36px 0 0; border:1px solid var(--line); border-radius:6px; padding:0 18px; }
.toc summary{ cursor:pointer; padding:12px 0; font-size:14px; font-weight:500; list-style:none; display:flex; align-items:center; gap:10px; }
.toc summary::-webkit-details-marker{ display:none; }
.toc summary::before{ content:""; width:7px; height:7px; border-right:1.5px solid var(--accent-deep); border-bottom:1.5px solid var(--accent-deep); transform:rotate(-45deg); transition:transform .15s ease; }
.toc[open] summary::before{ transform:rotate(45deg); }
.toc ol{ margin:0; padding:2px 0 14px 0; list-style:none; display:grid; gap:6px; }
.toc li a{ font-size:15px; text-decoration:none; color:var(--ink-2); }
.toc li a:hover{ color:var(--accent-deep); }

/* body */
.post-body{ max-width:var(--measure); margin:40px 0 0; font-size:18px; line-height:1.65; color:var(--ink); }
.post-body > :first-child{ margin-top:0; }
.post-body p{ margin:0 0 1.25em; }
.post-body h2{ font-family:'Geist',sans-serif; font-weight:500; letter-spacing:-.025em; font-size:27px; line-height:1.15; margin:2.1em 0 .55em; scroll-margin-top:24px; text-wrap:balance; }
.post-body h3{ font-family:'Geist',sans-serif; font-weight:600; letter-spacing:-.01em; font-size:19px; line-height:1.3; margin:1.7em 0 .45em; }
.post-body a{ color:var(--accent-deep); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.post-body ul, .post-body ol{ padding-left:1.35em; margin:0 0 1.25em; }
.post-body li{ margin:.3em 0; }
.post-body li::marker{ color:var(--muted); }
.post-body blockquote{ margin:1.5em 0; padding:2px 0 2px 20px; border-left:2px solid var(--accent-deep); color:var(--ink-2); }
.post-body blockquote p{ margin:0 0 .6em; }
.post-body code{ font-family:'JetBrains Mono',monospace; font-size:.84em; background:var(--paper-2); padding:1px 5px; border-radius:4px; }
.post-body pre{ background:var(--paper-2); border:1px solid var(--line); border-radius:6px; padding:16px 18px; overflow-x:auto; margin:0 0 1.25em; }
.post-body pre code{ background:none; padding:0; font-size:.78em; line-height:1.6; }
.post-body img{ max-width:100%; border-radius:6px; }
.post-body figure{ margin:1.6em 0; }
.post-body figcaption{ font-size:14px; color:var(--muted); margin-top:8px; }
.post-body hr{ border:0; border-top:1px solid var(--line); margin:2.4em 0; }
.post-body .tbl{ overflow-x:auto; margin:0 0 1.25em; }
.post-body table{ width:100%; border-collapse:collapse; font-size:.88em; line-height:1.45; }
.post-body th, .post-body td{ text-align:left; padding:9px 12px 9px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.post-body th{ font-weight:500; color:var(--muted); }
.post-body strong{ font-weight:600; }
.post-body sup{ line-height:0; }

/* questions */
.post-faq{ max-width:var(--measure); margin:56px 0 0; }
.post-faq h2{ font-family:'Geist',sans-serif; font-weight:500; letter-spacing:-.025em; font-size:24px; margin:0 0 6px; }
.post-faq details{ border-top:1px solid var(--line); padding:14px 0; }
.post-faq details:last-child{ border-bottom:1px solid var(--line); }
.post-faq summary{ cursor:pointer; font-size:17px; font-weight:500; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.post-faq summary::-webkit-details-marker{ display:none; }
.post-faq summary::after{ content:"+"; color:var(--accent-deep); font-weight:400; }
.post-faq details[open] summary::after{ content:"\2212"; }
.post-faq details > div{ margin-top:10px; font-size:16.5px; line-height:1.6; color:var(--ink-2); }
.post-faq details > div p{ margin:0 0 .8em; }

/* the one ink surface: next step */
.post-cta{ max-width:var(--measure); margin:64px 0 0; padding:30px 32px; background:var(--ink); color:var(--paper); border-radius:8px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.post-cta p{ margin:0; font-size:17px; line-height:1.5; max-width:40ch; }
.post-cta p b{ display:block; font-weight:500; color:var(--accent); margin-bottom:4px; }
.post-cta .go{ flex:none; display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border-radius:999px; background:var(--accent); color:var(--ink); font-weight:500; font-size:15px; text-decoration:none; }
.post-cta .go:hover{ gap:14px; }

.post-nav{ max-width:var(--measure); margin:44px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-top:20px; border-top:1px solid var(--line); }
.post-nav a{ text-decoration:none; color:var(--ink); }
.post-nav .lbl{ display:block; font-size:13px; color:var(--muted); margin-bottom:4px; }
.post-nav .t{ font-size:15.5px; font-weight:500; letter-spacing:-.01em; }
.post-nav a:hover .t{ text-decoration:underline; text-underline-offset:4px; }
.post-nav .right{ text-align:right; }

/* footer: the site returns, as the same ink band the home page ends on.
   styles.css paints every <footer> ink; this only sets the layout and bleeds it to the edges. */
.blog .page{ padding-bottom:0; }
.blog-foot{ margin:96px calc(-1 * clamp(16px,4vw,40px)) 0; padding:30px clamp(16px,4vw,40px) 28px; border-top:0; font-size:14px; }
.blog-foot .in{ max-width:var(--wide); margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:12px 24px; }
.blog-foot nav{ display:flex; flex-wrap:wrap; gap:6px 22px; }
.blog-foot a{ text-decoration:none; color:var(--paper); }
.blog-foot a:hover{ text-decoration:underline; text-underline-offset:3px; }
.blog-foot .c{ color:rgba(236,234,224,.6); }

@media (max-width:640px){
  .blog-head{ margin-top:48px; }
  .post{ margin-top:44px; }
  .post-body{ font-size:17px; }
  .post-body h2{ font-size:24px; }
  .post-nav{ grid-template-columns:1fr; }
  .post-nav .right{ text-align:left; }
  .post-cta{ padding:24px 22px; }
}

/* The one-minute skim: first section of every post, boxed so a reader can stop there. */
.post-body .skim{ margin:0 0 22px; padding:18px 22px 16px; border:1.5px solid var(--ink); border-radius:14px; background:#fff8ec; box-shadow:4px 4px 0 var(--ink); }
.post-body .skim h2{ margin:0 0 10px; padding:0; border:0; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-deep); }
.post-body .skim ul{ margin:0; padding-left:20px; }
.post-body .skim li{ margin:7px 0; font-size:16.5px; line-height:1.5; }
.post-body .skim li::marker{ color:var(--accent-deep); }
@media (max-width:560px){ .post-body .skim{ padding:14px 16px 12px; box-shadow:3px 3px 0 var(--ink); } .post-body .skim li{ font-size:15.5px; } }