/* Blog article styling, scoped to .bl so it does not change the rest of the site.
   Type system and scale follow the site's reference pages: Inter for text and headings,
   Instrument Serif for italic accents, JetBrains Mono for code and data. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

.bl{
  --paper:#f6f1e4; --card:#fffaf0; --ink:#1d1a16; --muted:#5d5548; --line:#d6cbb2;
  --indigo:#2b3f8f; --indigo-soft:#e2e6f6; --red:#b8322a; --green:#1d6a48;
  --f-ui:'Inter',system-ui,sans-serif; --f-accent:'Instrument Serif',Georgia,serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  background-color:var(--paper); color:var(--ink);
  font-family:var(--f-ui); font-size:16px; line-height:1.6; font-feature-settings:"ss01","cv11";
  padding-bottom:2rem; -webkit-font-smoothing:antialiased;
}
.bl section.sec, .bl section.page-hero{background:transparent;}
.bl .page-hero{padding:3.5rem 0 1.5rem;}
.bl .page-hero h1{font-family:var(--f-ui);font-weight:600;font-size:clamp(2.5rem,6vw,4.25rem);line-height:1.02;letter-spacing:-.035em;color:var(--ink);margin:1.1rem 0 1.4rem;max-width:18ch;}
.bl .page-hero .lead{font-size:1.2rem;line-height:1.5;color:var(--muted);margin:0 0 1rem;max-width:58ch;}
.bl .mono{display:block;font-family:var(--f-mono);font-size:.78rem;font-weight:500;letter-spacing:.02em;color:var(--muted);margin-bottom:.6rem;}
.bl .crumbs{font-size:.85rem;color:var(--muted);}
.bl .crumbs a{color:var(--indigo);text-decoration:underline;text-underline-offset:3px;}
.bl h2{font-family:var(--f-ui);font-weight:600;font-size:clamp(1.75rem,4vw,2.75rem);line-height:1.1;letter-spacing:-.03em;color:var(--ink);margin:4rem 0 1.1rem;padding-top:2rem;border-top:1px solid var(--line);}
.bl h3{font-family:var(--f-ui);font-weight:600;font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin:2.4rem 0 .7rem;}
.bl h4{font-family:var(--f-mono);font-weight:500;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:1.6rem 0 .5rem;}
.bl h2 em,.bl h3 em{font-family:var(--f-accent);font-style:italic;font-weight:400;letter-spacing:0;}
.bl p{margin:0 0 1.15rem;font-size:1rem;line-height:1.65;}
.bl ul,.bl ol{margin:0 0 1.25rem;padding-left:1.4rem;font-size:1rem;line-height:1.65;}
.bl li{margin:.45rem 0;}
.bl li::marker{color:var(--muted);}
.bl strong{font-weight:600;}
.bl em{font-style:italic;}
.bl a{color:var(--indigo);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.bl code{font-family:var(--f-mono);font-size:.86em;background:var(--indigo-soft);padding:.1em .4em;border-radius:4px;}
.bl blockquote{margin:2rem 0;padding:.4rem 0 .4rem 1.4rem;border-left:2px solid var(--ink);font-family:var(--f-accent);font-style:italic;font-size:1.6rem;line-height:1.3;color:var(--ink);}
.bl .panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.4rem 1.5rem;margin:0 0 2.2rem;font-size:.98rem;line-height:1.6;box-shadow:0 1px 2px rgba(29,26,22,.04),0 8px 24px -12px rgba(29,26,22,.12);}
.bl .panel h3{margin-top:0;}
.bl details{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.9rem 1.1rem;margin:.6rem 0;}
.bl details[open]{border-color:var(--indigo);}
.bl summary{cursor:pointer;font-size:1rem;font-weight:600;line-height:1.45;}
.bl details p{margin:.7rem 0 .3rem;}
.bl table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;font-size:.92rem;line-height:1.5;margin:1.25rem 0 2rem;display:block;overflow-x:auto;}
.bl th{font-family:var(--f-mono);font-weight:500;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;text-align:left;color:var(--muted);padding:.75rem .9rem;border-bottom:1px solid var(--line);white-space:nowrap;}
.bl td{padding:.75rem .9rem;border-bottom:1px solid var(--line);vertical-align:top;}
.bl tr:last-child td{border-bottom:0;}
.bl label{font-size:.95rem;display:grid;gap:.35rem;}
.bl input[type=number]{font-family:var(--f-mono);font-size:.92rem;padding:.45rem .65rem;border:1px solid var(--line);border-radius:8px;background:#fff;width:9rem;}
.bl input[type=checkbox]{width:1.05rem;height:1.05rem;margin-right:.5rem;accent-color:var(--indigo);}
.bl [role=status]{font-weight:600;color:var(--green);}
.bl .tag{display:inline-block;font-family:var(--f-mono);font-size:.78rem;color:var(--indigo);background:var(--indigo-soft);border-radius:999px;padding:.2rem .7rem;margin-bottom:.8rem;}
.bl hr{border:0;border-top:1px solid var(--line);margin:3rem 0;}
.bl :focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:2px;}
.bl ::selection{background:var(--indigo-soft);}
@media (max-width:700px){
  .bl{font-size:15px;}
  .bl .page-hero{padding:2.25rem 0 1rem;}
  .bl .page-hero h1{font-size:2.4rem;}
  .bl h2{margin-top:3rem;padding-top:1.5rem;font-size:1.75rem;}
  .bl h3{font-size:1.25rem;}
  .bl table{font-size:.86rem;}
  .bl th,.bl td{padding:.55rem .6rem;}
}