/* =========================================================================
   SLIM DIET — the blog's own stylesheet.
   -------------------------------------------------------------------------
   Loaded by blog/_chrome.php after site.css, which supplies everything an
   article shares with the rest of the site: tokens, type, header, footer,
   buttons and the FAQ disclosures. This file is only what an article and
   the index draw for themselves.

   bp- is an article, bi- is the index. Namespaced for the same reason the
   calculator's classes are: site.css has short names of its own, and a
   bare .num or .card here would collide.

   The blog works its ?v= out from this file on every request (sd_asset()
   in blog/_boot.php), so nothing needs stamping after an edit here.
   ========================================================================= */

/* prose sits narrower than the site's 1120px grid — a line of text wants
   about 68 characters, not 100 */
.bp-wrap{ max-width:min(820px, 100%); margin-inline:auto; padding-inline:var(--gut); }

/* ---- breadcrumb ---------------------------------------------------------- */
.bp-bread{ padding-block:clamp(16px,2.4vw,26px) 0; font-size:.86rem; color:var(--muted); }
.bp-bread ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.bp-bread li{ display:flex; align-items:center; gap:7px; min-width:0; }
.bp-bread li + li::before{ content:'›'; color:var(--input); flex:none; }
html[dir="rtl"] .bp-bread li + li::before{ content:'‹'; }
.bp-bread a{ color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; }
.bp-bread a:hover{ color:var(--navy); border-bottom-color:var(--teal); }
.bp-bread [aria-current]{ color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- article head -------------------------------------------------------- */
.bp-head{ padding-block:clamp(22px,3.2vw,36px) clamp(24px,3.4vw,38px); }
.bp-head h1{ font-size:clamp(1.95rem,4.5vw,3.05rem); text-wrap:pretty; }
.bp-dek{
  margin-top:clamp(14px,1.8vw,20px); font-size:clamp(1.02rem,1.5vw,1.16rem);
  color:var(--muted); max-width:56ch; line-height:1.55;
}
.bp-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:clamp(18px,2.4vw,26px); padding-top:16px;
  border-top:1px solid var(--border);
  font-size:.86rem; color:var(--muted);
}
.bp-meta .dot{ color:var(--input); }

/* ---- the prose ----------------------------------------------------------- */
.bp-body{ max-width:68ch; padding-bottom:clamp(30px,4vw,48px); }
.bp-body > :first-child{ margin-top:0; }
.bp-body h2{
  font-size:clamp(1.42rem,3vw,2rem);
  margin-block:clamp(38px,4.6vw,56px) .5em;
}
.bp-body h3{ margin-block:clamp(26px,3vw,34px) .45em; }
.bp-body p, .bp-body li{ font-size:1rem; }
.bp-body a{ color:var(--teal-text); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.bp-body a:hover{ color:var(--navy); }
.bp-body strong{ font-weight:600; color:var(--navy); }
.bp-body ul, .bp-body ol{ margin:0 0 1.05em; padding-inline-start:1.35em; }
.bp-body li{ margin-bottom:.45em; }
.bp-body li::marker{ color:var(--teal); }
.bp-body hr{ border:0; border-top:1px solid var(--border); margin-block:clamp(32px,4vw,44px); }
.bp-body figure{ margin:clamp(26px,3.4vw,38px) 0; }
.bp-body figure img{ border-radius:var(--r-control); width:100%; }
.bp-body figcaption{ margin-top:10px; font-size:.86rem; color:var(--muted); }

/* A number whose two ends carry meaning — a range, a ratio — reverses in an
   RTL paragraph and says the opposite of what you wrote. dir="ltr" on the
   pair isolates it (trap 13), and nowrap stops "5–30" breaking into "5–" at
   the end of one line and "30" at the start of the next. */
.bp-num{ font-variant-numeric:tabular-nums; unicode-bidi:isolate; white-space:nowrap; }

/* ---- table: scrolls rather than squashing on a phone --------------------- */
.bp-table{ margin:clamp(24px,3vw,34px) 0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.bp-table table{ width:100%; border-collapse:collapse; font-size:.94rem; min-width:31em; }
.bp-table th, .bp-table td{
  text-align:start; padding:11px 14px; border-bottom:1px solid var(--border);
  vertical-align:top;
}
.bp-table th{ font-size:.88rem; font-weight:600; color:var(--muted); white-space:nowrap; }
.bp-table tbody tr:last-child td{ border-bottom:0; }
.bp-table td b{ color:var(--navy); font-weight:600; }

/* ---- callout ------------------------------------------------------------- */
.bp-note{
  margin:clamp(24px,3vw,34px) 0; padding:clamp(16px,2.2vw,22px) clamp(18px,2.4vw,24px);
  background:var(--teal-tint); border-radius:var(--r-card-sm);
  border-inline-start:3px solid var(--teal);
}
/* a label, deliberately NOT an <h3>: a callout is not a section, and an h3
   here put a phantom entry in the document outline */
.bp-note .k{ font-size:.94rem; font-weight:600; color:var(--teal-text); margin:0 0 7px; }
.bp-note p:last-child{ margin-bottom:0; }
.bp-note p{ font-size:.96rem; }

/* ---- a strip of figures -------------------------------------------------- */
.bp-figs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--border); border:1px solid var(--border);
  border-radius:var(--r-card); overflow:hidden; margin:clamp(24px,3vw,34px) 0;
}
.bp-fig{ background:var(--card); padding:clamp(15px,2vw,19px); }
.bp-fig .v{ font-weight:700; font-size:clamp(1.35rem,3.2vw,1.7rem); line-height:1.1; color:var(--navy); }
.bp-fig .k{ margin-top:7px; font-size:.82rem; color:var(--muted); line-height:1.45; }

/* ---- contents ------------------------------------------------------------ */
.bp-toc{
  margin:clamp(26px,3.2vw,36px) 0; padding:clamp(18px,2.4vw,24px);
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-card);
}
.bp-toc h2{ font-size:.96rem; font-weight:600; color:var(--navy); margin:0 0 10px; }
.bp-toc ol{ margin:0; padding-inline-start:1.3em; }
.bp-toc li{ margin-bottom:.4em; font-size:.96rem; }
.bp-toc li::marker{ color:var(--teal); font-variant-numeric:tabular-nums; }
.bp-toc a{ color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; }
.bp-toc a:hover{ border-bottom-color:var(--teal); color:var(--navy); }

/* ---- the call to action -------------------------------------------------- */
.bp-cta{
  margin:clamp(30px,4vw,44px) 0; padding:clamp(24px,3.4vw,36px);
  background:var(--navy); color:#fff; border-radius:var(--r-card);
}
.bp-cta h3{ color:#fff; font-size:clamp(1.22rem,2.4vw,1.5rem); margin-bottom:10px; }
.bp-cta p{ color:var(--on-dark); font-size:.96rem; max-width:52ch; margin-bottom:20px; }
.bp-cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s6); }
.bp-cta-link{ color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px;
  min-height:44px; display:inline-flex; align-items:center; }
.bp-cta-link:hover{ color:#fff; }
.bp-cta .bp-ctafine{ margin:14px 0 0; font-size:.84rem; color:var(--on-dark); }
@media (max-width:519px){ .bp-cta .btn{ width:100%; } }

/* ---- FAQ: .faq comes from site.css; this is the heading above it --------- */
.bp-faq{ margin-top:clamp(34px,4.4vw,52px); }
.bp-faq h2{ font-size:clamp(1.25rem,2.4vw,1.55rem); }
.bp-faq .faq{ max-width:none; margin-top:14px; }

/* ---- related ------------------------------------------------------------- */
.bp-rel{ margin-top:clamp(34px,4.4vw,52px); padding-top:clamp(24px,3vw,32px); border-top:1px solid var(--border); }
.bp-rel h2{ font-size:clamp(1.25rem,2.4vw,1.55rem); margin-bottom:18px; }
.bp-relgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(14px,2vw,20px); }
.bp-relgrid a{
  display:block; padding:18px 20px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-card); text-decoration:none; color:inherit;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.bp-relgrid a:hover{ border-color:var(--teal); box-shadow:var(--shadow); }
.bp-relgrid b{ display:block; font-weight:600; font-size:1.06rem; color:var(--navy); line-height:1.3; }
.bp-relgrid span{ display:block; margin-top:8px; font-size:.88rem; color:var(--muted); }

/* ---- the index ----------------------------------------------------------- */
.bi-head{ padding-block:clamp(26px,3.6vw,44px) clamp(22px,3vw,34px); }
.bi-head h1{ font-size:clamp(2.1rem,5vw,3.4rem); }
.bi-head .bp-dek{ max-width:52ch; }
.bi-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:clamp(16px,2.2vw,24px); padding-bottom:var(--rhythm);
}
.bi-card{
  display:flex; flex-direction:column; gap:11px;
  padding:clamp(20px,2.6vw,27px); background:var(--card);
  border:1px solid var(--border); border-radius:var(--r-card);
  text-decoration:none; color:inherit;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.bi-card:hover{ border-color:var(--teal); box-shadow:var(--shadow); color:inherit; }
.bi-card .kick{ font-size:.88rem; font-weight:600; color:var(--teal-text); }
.bi-card h2{ font-size:clamp(1.14rem,2.1vw,1.38rem); line-height:1.28; }
.bi-card p{ font-size:.94rem; color:var(--muted); margin:0; }
.bi-card .foot{ margin-top:auto; padding-top:4px; font-size:.84rem; color:var(--muted); }

/* ---- the draft banner ----------------------------------------------------
   Loud on purpose. A draft is one merge away from being live, and the worst
   outcome is somebody reading one and believing it is published. */
.bp-draftbar{
  background:var(--navy-strong); color:#fff;
  padding:11px var(--gut); font-size:.86rem; line-height:1.5;
  display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline;
}
.bp-draftbar b{ font-weight:600; color:#9AD8E0; }
.bp-draftbar span{ color:var(--on-dark); }

/* ---- 404 ----------------------------------------------------------------- */
.bp-404{ padding-block:clamp(50px,8vw,100px); text-align:center; }
.bp-404 h1{ font-size:clamp(2.1rem,5vw,3.2rem); }
.bp-404 p{ margin:18px auto clamp(26px,3.4vw,34px); max-width:44ch; color:var(--muted); }
.bp-404 .btn-row{ justify-content:center; }

/* ---- phones -------------------------------------------------------------- */
@media (max-width:560px){
  .bp-meta{ gap:7px; font-size:.8rem; }
  .bp-relgrid{ grid-template-columns:1fr; }
}
@media print{
  .bp-cta, .bp-toc, .bp-rel, .bp-bread{ display:none !important; }
  .bp-body{ max-width:none; }
}