/* ============================================================================
   Why builder sites are slow — THE WAIT.  why-builder-sites-are-slow.html only.

   Signature (MOTION-CHARTER §3): a stopwatch rail, 0 to 10 seconds, holds at
   the top of its section while the reader scrolls. Scroll is the waiting time:
   the hand moves along the rail as a pure function of scroll, and each bounce
   figure below lights up as the hand passes its second. Stop and the clock
   stops. Without JS, or under reduced motion, the hand sits at 10 s and every
   figure is lit. js/fx-slow.js writes --t (0 → 1) and toggles .is-lit.

   This is the long, cited read of the site, so the body text sets a readable
   measure and the sources are real links.
   ========================================================================== */

/* ---------------------------------------------------------------- hero ---- */
.sl-hero{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:center; }
.sl-hero .t-display{ font-size:clamp(2.3rem,4.4vw,4rem); max-width:16ch; }
.sl-hero figure{ margin:0; }
.sl-hero .tilt-plate{ border-radius:16px; overflow:hidden; }
.sl-hero .tilt-plate > img{ aspect-ratio:4/5; object-fit:cover; width:100%; }
.sl-meta{ margin-top:24px; font-size:13.5px; color:#a8c4d5; letter-spacing:.01em; }

/* ---------------------------------------------------------------- prose --- */
.sl-prose{ max-width:68ch; }
.sl-prose p{ font-size:var(--t-copy); line-height:1.7; margin:0 0 18px; color:var(--text); }
.sl-prose p.lead{ font-size:var(--t-lead); }
.sec--dark .sl-prose p{ color:#d6e8f2; }
.sl-prose a, .sl-cite a, .sl-src a{ color:var(--primary); text-underline-offset:3px; }
.sec--dark .sl-prose a, .sec--dark .sl-cite a{ color:var(--accent); }
sup.sl-ref{ font-size:.7em; line-height:0; margin-left:1px; }
sup.sl-ref a{ text-decoration:none; font-weight:700; }

.sl-two{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:start; }
.sl-two figure{ margin:0; position:sticky; top:110px; }
.sl-two .tilt-plate{ border-radius:16px; overflow:hidden; }
.sl-two .tilt-plate > img{ aspect-ratio:4/5; object-fit:cover; width:100%; }

.sl-quote{
  margin:30px 0 8px; padding:22px 24px; border-left:3px solid var(--primary);
  background:rgba(var(--primary-rgb),.05); border-radius:0 12px 12px 0;
}
.sl-quote p{ margin:0; font-size:17px; line-height:1.6; font-style:italic; color:var(--text); }
.sl-quote footer{ margin-top:10px; font-size:13.5px; color:var(--text-muted); }
.sec--dark .sl-quote{ border-left-color:var(--accent); background:rgba(var(--accent-rgb),.06); }
.sec--dark .sl-quote p{ color:#eaf4fa; }
.sec--dark .sl-quote footer{ color:#a8c4d5; }
.sl-cite{ font-size:13.5px; color:var(--text-muted); margin-top:14px; }
.sec--dark .sl-cite{ color:#a8c4d5; }

/* ------------------------------------------------------ three-up points --- */
.sl-three{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin-top:40px; }
.sl-three > div{ padding-top:20px; border-top:1px solid rgba(var(--accent-rgb),.2); }
.sl-three h3{ font-family:var(--font-display); font-size:1.2rem; margin:0 0 10px; color:#fff; }
.sl-three p{ margin:0; font-size:15.5px; line-height:1.6; color:#c4dbe7; }
.sl-big{ display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; margin-top:44px; max-width:780px; }
.sl-big .n{ font:800 clamp(2.6rem,5.4vw,4rem)/1 var(--font-display); color:var(--accent); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.sl-big p{ margin:0; color:#d6e8f2; font-size:16px; line-height:1.55; }

/* ------------------------------------------------------- THE WAIT -------- */
.sl-wait{ --t:1; }
.sl-stage{ position:relative; margin-top:36px; }
.sl-clock{
  position:sticky; top:84px; z-index:2; padding:18px 20px 16px; border-radius:16px;
  background:rgba(255,255,255,.94); border:1px solid var(--border);
  box-shadow:0 18px 40px -26px rgba(var(--dark-rgb),.45);
  backdrop-filter:blur(6px);
}
.sl-clock-h{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px; }
.sl-clock-h span{ font-size:13px; color:var(--text-muted); }
.sl-clock-h b{ font:800 20px/1 var(--font-display); color:var(--primary); font-variant-numeric:tabular-nums; }
.sl-rail{ position:relative; height:12px; border-radius:6px; background:var(--bg-alt); }
.sl-fill{ position:absolute; left:0; top:0; bottom:0; width:calc(var(--t) * 100%); border-radius:6px;
  background:linear-gradient(90deg, var(--accent-mid), var(--primary) 40%, #b0413e); }
.sl-hand{ position:absolute; top:-6px; width:4px; height:24px; margin-left:-2px; left:calc(var(--t) * 100%); border-radius:2px; background:var(--dark); }
.sl-good{ position:absolute; top:-4px; bottom:-4px; left:0; width:25%; border-right:2px dashed var(--primary); pointer-events:none; }
.sl-ticks{ position:relative; height:18px; margin-top:8px; font-size:11.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.sl-ticks i{ position:absolute; font-style:normal; white-space:nowrap; transform:translateX(-50%); }
.sl-ticks i:first-child{ transform:none; }
.sl-ticks i:last-child{ transform:translateX(-100%); }
.sl-legend{ margin:6px 0 0; font-size:12.5px; color:var(--text-muted); }
.sl-legend b{ color:var(--primary); }

.sl-rows{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:18px; }
.sl-row{
  display:grid; grid-template-columns:minmax(0,170px) minmax(0,1fr) auto; gap:18px; align-items:center;
  padding:22px 22px; border-radius:14px; border:1px solid var(--border); background:#fff;
  opacity:.38;
}
.sl-row.is-lit{ opacity:1; border-color:rgba(var(--primary-rgb),.35); }
.sl-row .when{ font:700 15px/1.3 var(--font-display); color:var(--text); }
.sl-row .bar{ position:relative; height:14px; border-radius:7px; background:var(--bg-alt); overflow:hidden; }
.sl-row .bar i{ position:absolute; left:0; top:0; bottom:0; width:var(--w); border-radius:7px; background:linear-gradient(90deg, var(--primary), #b0413e); }
.sl-row .pct{ font:800 clamp(1.5rem,2.6vw,2rem)/1 var(--font-display); color:var(--primary); font-variant-numeric:tabular-nums; min-width:4.2ch; text-align:right; }
.sl-row .pct small{ display:block; font:500 11.5px/1.2 var(--font-body); color:var(--text-muted); margin-top:4px; }
.js .sl-row{ transition:none; }

.sl-callout{ margin-top:30px; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center;
  padding:24px; border-radius:16px; background:var(--dark); color:#d6e8f2; }
.sl-callout .n{ font:800 clamp(2.8rem,6vw,4.4rem)/1 var(--font-display); color:var(--accent); letter-spacing:-.02em; }
.sl-callout p{ margin:0; font-size:16.5px; line-height:1.55; }
.sl-callout a{ color:var(--accent); }

/* ------------------------------------------------------ Core Web Vitals --- */
.sl-vitals{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:38px; }
.sl-vital{ padding:24px 22px; background:#fff; border:1px solid var(--border); border-radius:14px; }
.sl-vital .k{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.sl-vital h3{ font-family:var(--font-display); font-size:1.2rem; margin:8px 0 8px; }
.sl-vital .v{ font:800 clamp(1.9rem,3.2vw,2.5rem)/1 var(--font-display); color:var(--primary); margin:4px 0 10px; letter-spacing:-.01em; }
.sl-vital p{ margin:0; font-size:15px; line-height:1.55; color:var(--text-muted); }

/* --------------------------------------------------------------- sources -- */
.sl-src{ margin:26px 0 0; padding-left:22px; max-width:80ch; }
.sl-src li{ margin:0 0 14px; font-size:15px; line-height:1.55; color:var(--text-muted); }
.sl-src li b{ color:var(--text); }
.sl-src a{ overflow-wrap:anywhere; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width:900px){
  .sl-hero, .sl-two{ grid-template-columns:1fr; gap:36px; }
  .sl-hero .tilt-plate > img, .sl-two .tilt-plate > img{ aspect-ratio:4/3; }
  .sl-two figure{ position:static; }
  .sl-three, .sl-vitals{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .sl-clock{ top:68px; padding:14px 14px 12px; }
  .sl-row{ grid-template-columns:1fr auto; padding:18px 16px; gap:10px 14px; }
  .sl-row .bar{ grid-column:1 / -1; grid-row:2; }
  .sl-big, .sl-callout{ grid-template-columns:1fr; gap:10px; }
}