/* blog pages — page-specific rules only; shared light-page theme lives in css/light.css */

/* post index cards */
.bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:56px 0 40px}
.bcard{display:flex;flex-direction:column;padding:34px;color:var(--ink)}
.bcard:hover{color:var(--ink)}
/* the card's content is wrapped in an <article>; it must inherit the flex column
   so `.bcard p{flex:1}` can bottom-align the meta rows across the row of cards */
.bcard article{display:flex;flex-direction:column;flex:1}
.bcard h2{font-family:var(--display);font-size:1.375rem;font-weight:600;margin:14px 0 10px;letter-spacing:-.015em;line-height:1.25}
.bcard p{color:var(--steel);font-size:var(--t-copy);margin:0;line-height:1.6;flex:1}
.bcard .meta{display:flex;justify-content:space-between;margin-top:22px;font-size:0.75rem;color:var(--text-2)}
.bcard .more{margin-top:14px;font-size:0.84375rem;font-weight:600;color:var(--accent)}

/* article pages */
.arthead{max-width:660px;margin:0 auto;padding:150px 24px 0}
.arthead h1{font-family:var(--display);font-weight:600;font-size:clamp(32px,4.4vw,3.25rem);line-height:1.08;letter-spacing:-.025em;margin:18px 0 0;text-wrap:balance}
.arthead .lede{font-size:clamp(1.0625rem,1.5vw,1.25rem);color:var(--steel);margin:22px 0 0;line-height:1.6;text-wrap:pretty}
.byline{display:flex;gap:18px;flex-wrap:wrap;font-size:0.75rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);margin-top:26px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.byline b{color:var(--accent);font-weight:500}
/* Headings set their own leading below; 1.7 is for reading, not for titles.
   Measure, not width: 760/16.5px counted 89 chars a line. 660/18px is ~72.
   Leading eases to 1.7 because the ratio sits on bigger type. DESIGN.md sec.6 */
.prose{max-width:660px;margin:0 auto;padding:14px 24px 40px;font-size:1.125rem;line-height:1.7;color:#212B34}
.prose h2{font-family:var(--display);font-size:1.75rem;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:44px 0 12px;line-height:1.2}
.prose h3{font-family:var(--display);font-size:1.3125rem;font-weight:600;color:var(--ink);margin:32px 0 8px;line-height:1.3}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:26px}
.prose li{margin-bottom:8px}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--accent-hover)}
.prose strong{color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:0.9375rem}
.prose th{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.prose td{padding:10px 12px;border-bottom:1px solid var(--line)}
.prose td:first-child{font-weight:600;color:var(--ink)}
.tablewrap{overflow-x:auto}
.callout{background:var(--surface-quote);border-radius:14px;padding:20px 24px;margin:0 0 22px;font-size:1.03125rem;color:var(--steel)}

@media(max-width:980px){.bloggrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.bloggrid{grid-template-columns:1fr}}
/* article measure keeps its own gutters, so it needs its own notch handling */
@supports(padding:max(0px)){
  .arthead,.prose{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
}
/* reading a spec table on a phone means horizontal scroll; make it a real
   scroll container with momentum rather than a clipped overflow */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
@media(pointer:coarse){.prose a{padding:2px 0}}

/* numbered steps in application notes — the hero's amber indexing, where order is real */
.prose h2 .stepnum{font-family:var(--mono);font-size:.62em;font-weight:500;color:var(--index);letter-spacing:.08em;margin-right:12px;vertical-align:.18em}