/* Stellar blog: index and posts. Built on /_home/rework.css: same tokens, type, nav and footer.
   Inter at 400-500, near-black and greys, hairlines. Green only as a hint: the underline under one headline phrase
   and the small "Back to all posts" arrows. */

/* current page in the nav (Blog sits in the Resources menu) */
html{scroll-padding-top:96px;scroll-behavior:smooth}
.dd-item[aria-current=page]{background:var(--soft)}
.mm-sub a[aria-current=page]{color:var(--ink)}

/* small plain grey label: no square, no colour */
.kicker{font:500 14px/1.2 var(--font);color:var(--muted);letter-spacing:0}

/* green hint: the theme-aware underline under one word */
.gsw{white-space:nowrap;padding-bottom:.1em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C42 5.5 98 3.2 197 5.6' fill='none' stroke='%2313863f' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom/100% .2em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* the phrase wraps, so the swash is drawn per line; the stroke is the --green token of each theme */
html.dark .gsw{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C42 5.5 98 3.2 197 5.6' fill='none' stroke='%233fb26b' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}

/* ================= index ================= */
.ph{padding:104px 0 88px;text-align:center}
.ph h1{max-width:1100px;margin:18px auto 0;font:400 clamp(40px,4.8vw,66px)/1.08 var(--font);letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.ph .lead{max-width:680px;margin:26px auto 0;font-size:19px}

.sec.tight{padding-top:0}
.ruled{padding-top:56px;border-top:1px solid var(--line)}
.posts-head{display:grid;grid-template-columns:1fr auto;gap:24px 64px;align-items:end}
.posts-head .h2{margin-top:12px}
.posts-sub{max-width:420px;font:400 16px/1.6 var(--font);color:var(--muted);text-align:right}

.cards{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px}

/* ================= blog search & filter controls (swarm R30 owner standard) ================= */
.blog-controls{margin:32px 0 0;display:flex;flex-direction:column;gap:18px}
.blog-find{display:flex;align-items:center;gap:10px;max-width:540px;height:44px;padding:0 8px 0 16px;cursor:text;border-radius:var(--radius-m);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-rest);background:var(--sheet);transition:box-shadow var(--dur-1) var(--ease)}
.blog-find:hover{box-shadow:inset 0 0 0 1px var(--sheet-edge),var(--shadow-rest)}
.blog-find:focus-within{box-shadow:inset 0 0 0 1.5px var(--green),var(--shadow-rest)}
.blog-find svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round}
.blog-find input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:400 15px/1 var(--font);color:var(--ink)}
.blog-find input::placeholder{color:var(--muted)}
.blog-find input:focus-visible{outline:0!important}
.blog-find input::-webkit-search-cancel-button{display:none}
.blog-find-x{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:0;background:none;border-radius:var(--radius-s);cursor:pointer;color:var(--muted);padding:0;transition:color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.blog-find-x[hidden]{display:none}
.blog-find-x svg{width:14px;height:14px;stroke-width:2}
.blog-find-x:hover{color:var(--ink);background:var(--soft-2)}
.blog-find-x:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.blog-find-kbd{padding:2px 7px;font:500 12px/1.2 var(--font);border-radius:var(--radius-s);background:var(--soft-2);color:var(--muted);user-select:none;pointer-events:none}
.blog-find:focus-within .blog-find-kbd,.blog-find.has-q .blog-find-kbd{display:none}
@media (hover:none) and (pointer:coarse){.blog-find-kbd{display:none}.blog-find-x{width:40px;height:40px;margin-right:-8px}}

.blog-filter-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.blog-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.blog-tag-pill{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--sheet);color:var(--muted);font:500 14px/1.2 var(--font);cursor:pointer;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.blog-tag-pill:hover{color:var(--ink);border-color:var(--muted)}
.blog-tag-pill:active{transform:translateY(1px)}
.blog-tag-pill.is-active{background:var(--ink);color:var(--btn-text,#fff);border-color:var(--ink)}
.blog-tag-pill .tag-count{font-size:12px;padding:2px 7px;border-radius:999px;background:var(--soft-2);color:var(--muted);font-variant-numeric:tabular-nums}
.blog-tag-pill.is-active .tag-count{background:rgba(255,255,255,.22);color:var(--btn-text,#fff)}
html.dark .blog-tag-pill.is-active .tag-count{background:rgba(18,22,20,.14);color:var(--btn-text,#fff)}
.blog-tag-pill:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.blog-filter-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.blog-clear-all{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;background:var(--sheet);color:var(--muted);font:500 14px/1.2 var(--font);cursor:pointer;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.blog-clear-all[hidden]{display:none}
.blog-clear-all:hover{color:var(--ink);border-color:var(--muted);background:var(--soft)}
.blog-clear-all:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.blog-clear-all:active{transform:translateY(1px)}
.blog-status{font:400 14px/1.4 var(--font);color:var(--muted);font-variant-numeric:tabular-nums;margin:0}

.blog-hl{background:#d4f0dc;color:#121614;border-radius:2px;padding:0 2px}
html.dark .blog-hl{background:#234932;color:#eef1ef}

.blog-none{margin:40px 0 0;padding:44px 24px;text-align:center;border:1px dashed var(--rule-dash);border-radius:var(--radius-l);background:var(--sheet);box-shadow:var(--shadow-rest)}
.blog-none p{margin:0;font:400 16px/1.5 var(--font);color:var(--text)}
.blog-none .blog-try{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.blog-none .blog-sug{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--line-2);border-radius:999px;padding:0 16px;background:var(--paper);color:var(--ink);font:500 13.5px/1.2 var(--font);cursor:pointer;transition:background-color var(--dur-1) var(--ease)}
.blog-none .blog-sug:hover{background:var(--soft-2)}
.blog-none .blog-sug:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.blog-none .blog-sug:active{transform:translateY(1px)}
.blog-none .blog-clear{margin-top:20px}
.blog-none .blog-clear:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ================= card layout with metadata pill and caption ================= */
.pc-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:400 13.5px/1.4 var(--font);color:var(--muted);font-variant-numeric:tabular-nums}
.blog-date{color:var(--muted)}
.blog-read-time{color:var(--muted)}
.blog-author-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 9px;border-radius:999px;background:var(--soft-2);color:var(--ink);font:500 13px/1.3 var(--font)}
.blog-author-pill svg{color:var(--muted)}
/* swarm R50: the author pill wrapped under the date on some cards and stayed inline on others (long names), so titles
   in the same grid row started at different heights. The pill now always takes its own line under date and read time */
.pc-meta-row{row-gap:5px}   /* R57: was 3px, the pill sat on the date line. The ::before break counts as a row, so 5px gives a 10px gap */
.pc-meta-row::before{content:"";order:1;flex-basis:100%;height:0}
.pc-meta-row .blog-author-pill{order:2}
.blog-card-title{margin-top:10px;font:500 22px/1.3 var(--font);letter-spacing:-.02em;color:var(--ink)}
.blog-card-desc{margin-top:10px;font:400 15px/1.6 var(--font);color:var(--text)}
.pc{display:block;color:inherit;height:100%}
.pc article{height:100%;display:flex;flex-direction:column}
.pc-img{aspect-ratio:3/2;border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--line);background:var(--sheet);box-shadow:var(--shadow-rest);transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.pc-img img{display:block;width:100%;height:100%;object-fit:cover}
.pc:hover .pc-img{box-shadow:none}
.pc-t{padding-top:22px;display:flex;flex-direction:column;flex:1}
.pc time{font:400 14px/1.3 var(--font);color:var(--muted);font-variant-numeric:tabular-nums}
.pc h3{margin-top:10px;font:500 22px/1.3 var(--font);letter-spacing:-.02em;color:var(--ink);text-wrap:wrap}
.pc:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.pc-t>p{margin-top:12px;font:400 15.5px/1.65 var(--font);color:var(--text)}
.pc-t>p.tags{margin-top:auto;padding-top:18px;min-height:59px;font:400 13.5px/1.5 var(--font);color:var(--muted)}
.tags{font:400 13.5px/1.5 var(--font);color:var(--muted)}
.tags .sep{color:var(--muted)}
.pc:focus-visible{outline:2px solid var(--green);outline-offset:6px;border-radius:var(--radius-l)}

/* ================= post ================= */
.measure{max-width:784px}            /* 720 px of text plus the wrap padding */
.bp-head{padding:44px 0 0}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 15px/1.3 var(--font);color:var(--ink)}
.back svg{width:16px;height:16px;flex:none;color:var(--muted);transform:scaleX(-1);transition:translate var(--dur-1) var(--ease)}
.back:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.back:hover svg{translate:-3px 0}
.bp-head .kicker{margin-top:36px}
.bp-head h1{margin-top:14px;font:400 clamp(36px,4.4vw,56px)/1.08 var(--font);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.dek{max-width:760px;margin-top:22px;font:400 20px/1.55 var(--font);letter-spacing:-.01em;color:var(--text)}
.bp-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-top:36px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.meta-l{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font:400 14.5px/1.5 var(--font);color:var(--muted);font-variant-numeric:tabular-nums}
.meta-l .by{color:var(--ink);font-weight:500}
.meta-l .sep{color:var(--muted)}
.bp-meta .tags{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px}

.bp-fig{max-width:784px;margin:48px auto 0}       /* one column: header, cover and body share the same edges */
.bp-fig img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-l);border:1px solid var(--line);background:var(--sheet);box-shadow:var(--shadow-rest)}

.prose{margin-top:56px;font:400 18px/1.75 var(--font);color:var(--text);overflow-wrap:break-word}
.prose p{margin:0}
.prose p+p,.prose h2+p{margin-top:22px}
.prose h2{margin-top:56px;padding-top:40px;border-top:1px solid var(--line);font:500 28px/1.25 var(--font);letter-spacing:-.025em;color:var(--ink)}
.prose strong{font-weight:600;color:var(--ink)}
.prose em{font-style:italic}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--muted);overflow-wrap:anywhere}
.prose a:hover{text-decoration-color:currentColor}
.prose .katex{font-size:1.08em;color:var(--ink)}
.prose>p:first-child{font-size:20px;line-height:1.7;color:var(--ink)}
.bp-end{margin:72px 0 0;padding:28px 0 112px;border-top:1px solid var(--line)}   /* round 10: bottom space as padding, so the white article reaches the footer (a margin escaped and showed a paper strip) */
.bp a:focus-visible{outline:2px solid var(--green);outline-offset:5px;border-radius:var(--radius-0)}

/* post table of contents (nav.toc-nav) with scroll-spy active marker */
.bp-body.has-toc{max-width:1280px;display:grid;grid-template-columns:1fr minmax(0,720px) 1fr;column-gap:48px;align-items:start}
.bp-body.has-toc .toc-nav{grid-column:1;grid-row:1;justify-self:end;width:100%;max-width:220px;position:sticky;top:96px;margin-top:56px;padding-right:8px}
.bp-body.has-toc .prose{grid-column:2;grid-row:1;min-width:0}
.bp-body.has-toc .bp-end{grid-column:2;grid-row:2}
.toc-nav-h{margin:0;padding-bottom:10px;font:500 13.5px/1.3 var(--font);color:var(--ink)}
.toc-nav ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc-nav a{display:flex;align-items:center;min-height:44px;margin-left:-1px;padding:8px 12px 8px 14px;border-left:2px solid transparent;border-radius:0 var(--radius-s) var(--radius-s) 0;font:400 13.5px/1.4 var(--font);color:var(--muted);text-decoration:none;transition:color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.toc-nav a:hover{color:var(--ink);background:var(--soft)}
.toc-nav a:active{transform:translateY(1px)}
.toc-nav a.is-active,.toc-nav a[aria-current="true"]{color:var(--ink);font-weight:500;border-left-color:var(--green);background:var(--soft)}

/* defensive responsive layout if form.newsletter-form is rendered */
form.newsletter-form{display:flex;align-items:stretch;gap:10px;max-width:480px}
form.newsletter-form input{flex:1;min-width:0;min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--radius-m);background:var(--sheet);color:var(--ink);font:400 15px/1.2 var(--font)}
form.newsletter-form button{min-height:44px;flex-shrink:0}

@media (max-width:1239px){
  .bp-body.has-toc{max-width:784px;display:block}
  .bp-body.has-toc .toc-nav{position:static;max-width:none;margin:40px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-l);background:var(--sheet);box-shadow:var(--shadow-rest)}
  .bp-body.has-toc .toc-nav a{min-height:44px;display:flex;align-items:center;font-size:14.5px}
  .bp-body.has-toc .prose{margin-top:36px}
}
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .blog-find-x{width:44px;height:44px;margin-right:-6px}
  .blog-tag-pill{min-height:44px;padding:0 14px}
  .blog-none .blog-sug{min-height:44px;padding:0 16px;display:inline-flex;align-items:center}
}
@media (max-width:720px){
  .ph{padding:56px 0}
  .ph h1{font-size:clamp(34px,9.6vw,44px);line-height:1.1}
  .ph .lead{font-size:17px;line-height:1.65;margin-top:22px}
  .ruled{padding-top:40px}
  .posts-head{grid-template-columns:1fr}
  .posts-sub{text-align:left}
  .blog-controls{margin-top:24px}
  .blog-find{max-width:none}
  .blog-tag-pill{min-height:44px;padding:0 14px}
  form.newsletter-form{flex-direction:column;max-width:none}
  form.newsletter-form button{width:100%;justify-content:center}
  .cards{grid-template-columns:1fr;gap:48px;margin-top:36px}
  .pc h3{font-size:21px}
  .pc-t>p.tags{min-height:0}

  .bp-head{padding-top:20px}
  .bp-head .kicker{margin-top:24px}
  .bp-head h1{font-size:clamp(30px,8.4vw,38px);line-height:1.12}
  .dek{font-size:18px}
  .bp-meta{margin-top:28px}
  .bp-meta .tags{flex-basis:100%;gap:4px 12px}
  .bp-fig{margin-top:32px}
  .bp-fig img{border-radius:var(--radius-l);aspect-ratio:3/2}
  .prose{margin-top:40px;font-size:17px;line-height:1.72}
  .prose>p:first-child{font-size:17px;line-height:1.72}   /* R21: the opening paragraph runs 15+ lines on phones (AIME post), so it keeps the body size and is set apart by ink colour only */
  .prose h2{margin-top:44px;padding-top:32px;font-size:23px}
  .prose .katex{font-size:1.04em}
  .bp-end{margin:56px 0 0;padding-bottom:80px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pc-img,.pc-img img,.back svg,.toc-nav a{transition:none}
  .pc:hover .pc-img,.back:hover svg{transform:none}
  .back:hover svg{transform:scaleX(-1);translate:none}
  .blog-tag-pill:active,.blog-clear-all:active,.blog-none .blog-sug:active,.toc-nav a:active{transform:none}
}

/* prop-calc-misc 2026-10-22 (today's home page system). The marketing shell bands the sections (paper hero with the
   faint grid, then white). No rule between bands, so the posts head loses its top hairline. Each post is a white sheet
   that pops out (16px corners, layered shadow, lifts 2px on hover), its cover image an inner 10px picture. */
.posts .ruled{padding-top:0;border-top:0}
.pc{border-radius:var(--radius-l)}
.pc article{padding:10px 10px 0;border:1px solid var(--sheet-edge);border-radius:var(--radius-l);background:var(--sheet);box-shadow:var(--shadow-raised);transition:translate var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.pc:hover article{translate:0 var(--lift);box-shadow:var(--shadow-float)}
.pc-img{border-radius:var(--radius-m);border:0;box-shadow:none;transition:none}
.pc-t{padding:20px 12px 18px}
.pc:focus-visible{outline-offset:4px}
@media (prefers-reduced-motion:reduce){.pc article{transition:none}.pc:hover article{translate:none}}

/* prop-audit 2026-10-23: a post reads like the legal pages. The head is a paper band with the faint grid
   (.sx-band--paper .sx-grid-bg in the markup), the cover and the text read on the white band below it. */
.bp{background:var(--band-white)}
.bp-head.sx-band{padding-block:44px 56px}
.bp-head .bp-meta{border-bottom:0;padding-bottom:0}
@media (max-width:720px){.bp-head.sx-band{padding-block:20px 40px}}
/* round 9: on tablets (2 columns) an odd last post spans both columns as one wide sheet, cover left and text right,
   so the list never ends on a lone card beside an empty gap */
@media (min-width:721px) and (max-width:1024px){
  .cards>li:last-child:nth-child(odd){grid-column:1/-1}
  .cards>li:last-child:nth-child(odd) article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:10px}
  .cards>li:last-child:nth-child(odd) .pc-img{aspect-ratio:auto;min-height:100%}
  .cards>li:last-child:nth-child(odd) .pc-t{padding:12px 14px 8px}
}