/* ── before / after ─────────────────────────────────────────────────────────
   Shared "before / after" proof component. ONE source of truth, loaded by:
     • /landing/dreaded/   (dark hero page; full framing in its inline <style>)
     • /                   (home page, the "how it works" beat below the Portrait)

   Only the STRUCTURE lives here. Each page themes it by setting the --ba-*
   custom properties on (or above) the element that wraps .ba-grid, and supplies
   its own --serif / --sans. The before / after distinction is carried by border
   weight, the accent colour, text brightness AND the explicit BEFORE / AFTER
   text labels, never by colour alone.

   --ba-line        hairline: panel border, before's left edge, note divider
   --ba-accent      accent: after's left edge + after tag
   --ba-accent-line after panel border
   --ba-panel-bg    panel background
   --ba-after-bg    after panel background wash
   --ba-ink-strong  emphasised text (after body + after label)
   --ba-ink         normal text (before body, before label, notes)
   --ba-ink-soft    quiet text (before tag)
   ──────────────────────────────────────────────────────────────────────── */

.ba-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,2.6vw,22px);
}
.ba{
  padding:clamp(20px,3vw,28px);
  border:1px solid var(--ba-line, rgba(0,0,0,.18));
  border-left-width:3px;
  border-radius:3px;
  background:var(--ba-panel-bg, transparent);
}
.ba--before{ border-left-color:var(--ba-line, rgba(0,0,0,.18)); }
.ba--after{
  border-color:var(--ba-accent-line, var(--ba-accent, #b0884c));
  border-left-color:var(--ba-accent, #b0884c);
  background:var(--ba-after-bg, transparent);
}

.ba-label{
  font-family:var(--sans);
  font-size:clamp(13.5px,1.9vw,15.5px);
  font-weight:600;
  line-height:1.4;
  margin:0 0 clamp(14px,2vh,18px);
}
.ba--before .ba-label{ color:var(--ba-ink, inherit); }
.ba--after  .ba-label{ color:var(--ba-ink-strong, inherit); }
.ba-tag{
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-right:.5em;
}
.ba--before .ba-tag{ color:var(--ba-ink-soft, var(--ba-ink, inherit)); }
.ba--after  .ba-tag{ color:var(--ba-accent, #b0884c); }

.ba-body{
  font-family:var(--serif);
  font-size:clamp(15.5px,2vw,19px);
  line-height:1.5;
  margin:0;
  text-wrap:pretty;
}
.ba--before .ba-body{ color:var(--ba-ink, inherit); }
.ba--after  .ba-body{ color:var(--ba-ink-strong, inherit); }

.ba-note{
  font-family:var(--sans);
  font-size:clamp(13px,1.7vw,14.5px);
  line-height:1.55;
  color:var(--ba-ink, inherit);
  margin:clamp(14px,2vh,18px) 0 0;
  padding-top:clamp(12px,1.8vh,16px);
  border-top:1px solid var(--ba-line, rgba(0,0,0,.18));
}

/* before and after sit side by side once there is room */
@media (min-width:760px){
  .ba-grid{ grid-template-columns:1fr 1fr; }
}