/* ============================================================
   bw-site.css
   One design system for every Bone Wizardry page that is not a
   deep dive. Replaces the per-page inline stylesheets.

   Before this file the four key pages shared exactly one class
   between them. Everything below is a primitive, not a page part:
   nothing here is named after pricing, tutoring, physicians or
   subjects, so a new page reuses it instead of inventing more.

   Pairs with bw-header.css. Load that first.
   ============================================================ */

:root{
  --bw-ink:oklch(97% .006 300);
  --bw-ink2:oklch(88% .012 300);
  --bw-ink3:oklch(78% .016 300);
  --bw-ink4:oklch(62% .020 300);
  --bw-bg:oklch(12.5% .014 300);
  --bw-surface:oklch(16% .016 300);
  --bw-raise:oklch(20% .018 300);
  --bw-line:oklch(100% 0 0 / .085);
  --bw-hair:oklch(100% 0 0 / .05);
  --bw-accent:oklch(80% .155 300);
  --bw-wash:oklch(80% .155 300 / .11);
  --bw-gold:oklch(84% .085 85);
  --bw-good:oklch(78% .13 155);
  --bw-e:cubic-bezier(.2,.8,.3,1);
  --bw-sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --bw-serif:'Newsreader',Georgia,serif;
  --bw-mono:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --bw-col:72rem;
  --bw-read:44rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bw-bg);color:var(--bw-ink2);
  font-family:var(--bw-sans);font-size:1rem;line-height:1.7;
  -webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto}
a{color:inherit}

/* ---------- layout ---------- */
.bw-wrap{max-width:var(--bw-col);margin:0 auto;padding:0 1.5rem}
.bw-read{max-width:var(--bw-read);margin:0 auto;padding:0 1.5rem}
.bw-band{padding:4.5rem 0}
.bw-band + .bw-band{border-top:1px solid var(--bw-hair)}
.bw-band-tight{padding:2.75rem 0}
@media(max-width:640px){
  .bw-wrap,.bw-read{padding:0 1rem}
  .bw-band{padding:3rem 0}
}

/* ---------- type ---------- */
.bw-h1{font-family:var(--bw-serif);font-weight:500;letter-spacing:-.022em;line-height:1.06;
  font-size:clamp(2.1rem,5vw,3.25rem);color:var(--bw-ink);margin:0 0 .6rem;text-wrap:balance}
.bw-h2{font-family:var(--bw-serif);font-weight:500;letter-spacing:-.015em;line-height:1.18;
  font-size:clamp(1.5rem,3vw,2rem);color:var(--bw-ink);margin:0 0 .5rem;text-wrap:balance}
.bw-h3{font-size:1.0625rem;font-weight:500;color:var(--bw-ink);margin:0 0 .35rem;letter-spacing:-.008em}
.bw-lede{font-family:var(--bw-serif);font-size:1.1rem;line-height:1.75;color:var(--bw-ink3);
  max-width:60ch;margin:0 0 1.75rem;text-wrap:pretty}
.bw-p{margin:0 0 1rem;max-width:68ch;text-wrap:pretty}
.bw-small{font-size:.82rem;line-height:1.65;color:var(--bw-ink4);max-width:70ch}
.bw-eyebrow{font-size:.8rem;color:var(--bw-accent);margin:0 0 .5rem}
.bw-rule{height:1px;background:var(--bw-hair);border:0;margin:2.5rem 0}

/* ---------- section head: a short accent tick, never a tracked-caps eyebrow ---------- */
.bw-sec{position:relative;margin-top:3.5rem}
.bw-sec::before{content:"";position:absolute;top:-1.5rem;left:0;width:2.5rem;height:1px;
  background:var(--bw-accent);opacity:.5}
.bw-sec:first-child{margin-top:0}
.bw-sec:first-child::before{display:none}

/* ---------- grid: one responsive primitive, no breakpoint soup ---------- */
.bw-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.bw-grid-2{--min:20rem}
.bw-grid-tight{gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.bw-grid[data-min="14"]{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.bw-grid[data-min="22"]{grid-template-columns:repeat(auto-fit,minmax(22rem,1fr))}

/* ---------- card: flat, hairline, one level. Never nested. ---------- */
.bw-card{background:var(--bw-surface);border:1px solid var(--bw-hair);border-radius:14px;
  padding:1.5rem;min-width:0;
  transition:border-color .16s var(--bw-e),background .16s var(--bw-e)}
a.bw-card,.bw-card[href]{text-decoration:none;display:block}
a.bw-card:hover,.bw-card[href]:hover{border-color:var(--bw-line);background:var(--bw-raise)}
.bw-card > .bw-card{border:0;background:none;padding:0}   /* kills nesting if it appears */
.bw-card-lead{border-color:oklch(80% .155 300 / .35)}
.bw-card-head{display:flex;align-items:flex-start;gap:.875rem;margin-bottom:.75rem}
.bw-card-title{font-size:1.0625rem;font-weight:500;color:var(--bw-ink);letter-spacing:-.008em}
.bw-card-sub{font-size:.85rem;color:var(--bw-ink4);margin-top:.1rem}
.bw-card-body{font-size:.9375rem;line-height:1.7;color:var(--bw-ink3)}
.bw-card-foot{margin-top:1rem;padding-top:.875rem;border-top:1px solid var(--bw-hair);
  font-size:.82rem;color:var(--bw-ink4)}

/* ---------- media object: avatar or icon beside content ---------- */
.bw-media{display:grid;grid-template-columns:3.5rem 1fr;gap:0 1.1rem;align-items:start}
.bw-media-fig{width:3.5rem;height:3.5rem;border-radius:50%;object-fit:cover;display:block;
  background:var(--bw-raise)}
.bw-media-fig[data-shape="square"]{border-radius:12px}
@media(max-width:520px){.bw-media{grid-template-columns:1fr}.bw-media-fig{margin-bottom:.75rem}}

/* ---------- index list: subject hubs, libraries, directories ---------- */
.bw-index{list-style:none;margin:0;padding:0;display:grid;gap:.125rem}
.bw-index a{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.6rem .75rem;border-radius:10px;color:var(--bw-ink3);text-decoration:none;
  transition:background .13s var(--bw-e),color .13s var(--bw-e)}
.bw-index a:hover{background:var(--bw-raise);color:var(--bw-ink)}
.bw-index .bw-count{font-size:.8rem;color:var(--bw-ink4);font-variant-numeric:tabular-nums;flex:0 0 auto}

/* ---------- definition rows: credentials, facts, specs ---------- */
.bw-rows{display:grid;gap:0;margin:0}
.bw-row{display:flex;flex-wrap:wrap;gap:.2rem .9rem;padding:.55rem 0;
  border-top:1px solid var(--bw-hair);font-size:.875rem;line-height:1.7}
.bw-row:first-child{border-top:0}
.bw-row dt,.bw-row .bw-row-k{flex:0 0 10rem;color:var(--bw-ink4);margin:0}
.bw-row dd,.bw-row .bw-row-v{flex:1 1 14rem;min-width:0;color:var(--bw-ink2);margin:0}

/* ---------- quote ---------- */
.bw-quote{margin:0;padding:0 0 0 1.1rem;border-left:1px solid var(--bw-accent);min-width:0}
.bw-quote p{font-family:var(--bw-serif);font-size:1.05rem;line-height:1.75;color:var(--bw-ink2);
  margin:0 0 .6rem;max-width:64ch;overflow-wrap:anywhere;min-width:0}
.bw-quote figcaption{font-size:.82rem;color:var(--bw-ink4);overflow-wrap:anywhere;min-width:0}

/* ---------- buttons ---------- */
.bw-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:2.75rem;padding:0 1.25rem;border-radius:10px;border:1px solid var(--bw-line);
  background:transparent;color:var(--bw-ink2);font:inherit;font-size:.9375rem;font-weight:500;
  text-decoration:none;cursor:pointer;
  transition:border-color .16s var(--bw-e),color .16s var(--bw-e),background .16s var(--bw-e)}
.bw-btn:hover{border-color:var(--bw-accent);color:var(--bw-ink)}
.bw-btn-primary{background:var(--bw-accent);border-color:var(--bw-accent);color:oklch(14% .02 300)}
.bw-btn-primary:hover{filter:brightness(1.07);border-color:var(--bw-accent)}
.bw-btn-quiet{border-color:transparent;color:var(--bw-ink4)}
.bw-btn-quiet:hover{color:var(--bw-ink);background:var(--bw-raise);border-color:transparent}
.bw-btn[disabled],.bw-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.bw-actions{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:1.5rem}

/* ---------- form ---------- */
.bw-field{display:grid;gap:.35rem;margin-bottom:1rem}
.bw-field label{font-size:.85rem;color:var(--bw-ink3)}
.bw-field input,.bw-field select,.bw-field textarea{
  min-height:2.75rem;padding:.55rem .75rem;border-radius:10px;
  border:1px solid var(--bw-line);background:var(--bw-surface);color:var(--bw-ink);
  font:inherit;font-size:1rem;width:100%;
  transition:border-color .16s var(--bw-e)}
.bw-field input:focus,.bw-field select:focus,.bw-field textarea:focus{
  outline:none;border-color:var(--bw-accent)}
.bw-field .bw-hint{font-size:.78rem;color:var(--bw-ink4)}
.bw-field[data-state="error"] input{border-color:oklch(66% .17 25)}
.bw-field[data-state="error"] .bw-hint{color:oklch(72% .15 25)}

/* ---------- badges, used sparingly and never as decoration ---------- */
.bw-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;
  padding:.14rem .5rem;border-radius:999px;background:var(--bw-wash);color:var(--bw-accent)}
.bw-badge[data-tone="gold"]{background:oklch(84% .085 85 / .13);color:var(--bw-gold)}
.bw-badge[data-tone="quiet"]{background:none;border:1px solid var(--bw-hair);color:var(--bw-ink4)}

/* ---------- disclosure, replaces per-page FAQ accordions ---------- */
.bw-disclose{border-top:1px solid var(--bw-hair)}
.bw-disclose summary{list-style:none;cursor:pointer;padding:.9rem 0;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:1rem;color:var(--bw-ink2);transition:color .14s var(--bw-e)}
.bw-disclose summary::-webkit-details-marker{display:none}
.bw-disclose summary::after{content:"";width:.5rem;height:.5rem;flex:0 0 auto;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.5;transition:transform .2s var(--bw-e)}
.bw-disclose[open] summary{color:var(--bw-ink)}
.bw-disclose[open] summary::after{transform:rotate(-135deg);opacity:1}
.bw-disclose .bw-disclose-body{padding:0 0 1.1rem;color:var(--bw-ink3);font-size:.9375rem;max-width:68ch}

/* ---------- figures, matching the page photo protocol ---------- */
.bw-fig{margin:2.25rem 0}
.bw-fig + .bw-fig{margin-top:3.25rem}
.bw-fig img{display:block;width:100%;border-radius:10px;background:var(--bw-surface);
  aspect-ratio:var(--bw-fig-ar,16/9);object-fit:cover}
.bw-fig[data-fit="contain"] img{object-fit:contain;background:none}
.bw-fig figcaption{margin-top:.6rem;font-size:.82rem;line-height:1.65;color:var(--bw-ink4);max-width:66ch}

/* ---------- state coverage ---------- */
:focus-visible{outline:2px solid var(--bw-accent);outline-offset:3px;border-radius:6px}
.bw-empty{padding:2.5rem 1rem;text-align:center;color:var(--bw-ink4);font-size:.9375rem}
.bw-skel{background:var(--bw-raise);border-radius:8px;min-height:1rem;
  animation:bw-pulse 1.4s var(--bw-e) infinite}
@keyframes bw-pulse{0%,100%{opacity:.5}50%{opacity:.85}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

.hp-quotes,.bw-grid,.hp-clues,.hp-method,.hp-tiers,.hp-subjects{min-width:0}
.hp-quotes>*{min-width:0}

/* grids must never demand more than the viewport */
.bw-grid,.hp-quotes,.hp-clues,.hp-method,.hp-tiers,.hp-subjects{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--bw-min,17rem)),1fr))}
.hp-quotes{--bw-min:20rem}
.hp-clues{--bw-min:16rem}
.hp-method{--bw-min:17rem}
.hp-tiers{--bw-min:15rem}
.hp-subjects{--bw-min:12rem}
/* footer columns wrap instead of running past the edge */
.ftr-cols{max-width:100%;min-width:0}
.ftr-col{min-width:0;flex:1 1 8rem}
.ftr-col a{overflow-wrap:anywhere}