/* hb (Claude, 2026-10-12): Explore's "02 / Words in motion" chapter, built on GPT's kinetic-type module
   (src/enhance/kinetic-type.js + .css, copied verbatim). It replaces the "Words that bend back" WebGL type scene.
   Text-only, so it sits on the warm light ground (hb-theme.css gives .kinetic-chapter the tokens + the bridge out).
   Layout is fixed before enhancement, per GPT's handoff: lines never sit in a clipping ancestor, and the roll
   link is an inline-flex target well over 24x24. */
.kinetic-chapter{padding-block:8px calc(var(--hb-bridge, 120px) + 64px);scroll-margin-top:100px;--kt-travel:.32em}
.kinetic-heading{display:grid;gap:14px 60px;align-items:end;padding-bottom:34px;border-bottom:1px solid #6A503A33}
.kinetic-heading .eyebrow{color:var(--hb-honey-ink,#895810)}
.kinetic-heading h2{font:400 clamp(2.5rem,7.5vw,4.6rem)/1.05 Georgia,'Times New Roman',serif;letter-spacing:-.03em;margin:18px 0 0;color:var(--hb-text,#35281B)}
.kinetic-heading h2 em{color:var(--hb-honey-ink,#895810)}
.kinetic-intro{display:grid;gap:16px;justify-items:start}
.kinetic-intro .kinetic-note{margin:0}
.kinetic-lede{max-width:34ch;color:var(--hb-soft,#6A503A);font-size:1rem;line-height:1.7;margin:0}
.kinetic-pause{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:150px;padding:11px 20px;
  border:1px solid #6A503A73;border-radius:999px;background:#FCF7EA;color:var(--hb-text,#35281B);font:inherit;font-size:.875rem;cursor:pointer}
.kinetic-pause:hover:not(:disabled){border-color:var(--hb-honey-ink,#895810)}
.kinetic-pause:disabled{color:#6f5843;background:#EFE4CC;border-color:#d8c7a5;opacity:1}
.kinetic-list{list-style:none;margin:0;padding:0}
.kinetic-row{display:grid;gap:6px 48px;padding:34px 0 30px;border-bottom:1px solid #6A503A33}
.kinetic-name{font:700 11px/1.8 Figtree,'Segoe UI',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--hb-honey-ink,#895810);margin:0}
.kinetic-line{font:400 clamp(2.1rem,6.4vw,4.4rem)/1.12 Georgia,'Times New Roman',serif;letter-spacing:-.025em;color:var(--hb-text,#35281B);margin:0;max-width:16ch}
.kinetic-line--unfurl{font-style:italic;color:var(--hb-honey-ink,#895810);--kt-duration:1150ms;--kt-stagger:48ms}
.kinetic-line--weight{--kt-weight:9px}
.kinetic-line--arrive{--kt-duration:920ms;--kt-stagger:120ms}
.kinetic-note{color:var(--hb-soft,#6A503A);font-size:.875rem;line-height:1.7;margin:4px 0 0;max-width:46ch}
.kinetic-link{display:inline-flex;align-items:center;gap:18px;min-height:56px;min-width:24px;color:var(--hb-text,#35281B);
  font:400 clamp(1.45rem,4.6vw,2.6rem)/1.3 Georgia,'Times New Roman',serif;text-decoration:underline;text-decoration-color:#89581080;
  text-decoration-thickness:1px;text-underline-offset:.22em}
.kinetic-link [data-kt]{white-space:nowrap}
.kinetic-link>span[aria-hidden]{font-family:Figtree,'Segoe UI',system-ui,sans-serif;font-size:.8em;color:var(--hb-honey-ink,#895810);text-decoration:none}
.kinetic-link:hover{color:var(--hb-honey-ink,#895810)}
.kinetic-link:focus-visible{outline:3px solid var(--hb-honey-ink,#895810);outline-offset:6px;border-radius:2px}
@media(min-width:760px){
  .kinetic-heading{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .kinetic-intro{justify-self:end;max-width:420px}
  .kinetic-row{grid-template-columns:150px minmax(0,1fr);align-items:baseline}
  .kinetic-row>.kinetic-note{grid-column:2}
}
@media(forced-colors:active){.kinetic-pause,.kinetic-link{border-color:ButtonText}}
@media print{.kinetic-pause{display:none}}

/* the liquid-metal chapter (GPT's finishing round, folded 2026-10-15): its own dark ground, never cream */
.metal-chapter{background:#17120e;color:#F3E8CE;padding-block:70px 55px;scroll-margin-top:115px}
.metal-intro,.metal-foot{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.metal-intro button{font:600 .8rem Figtree,sans-serif;min-height:44px;border:1px solid #B98A43;border-radius:99px;padding:.6rem 1rem;background:transparent;color:#F3E8CE;cursor:pointer}
.metal-intro button:focus-visible{outline:3px solid #F0A830;outline-offset:5px}
.metal-intro .eyebrow{margin:0;color:#F0A830}
.metal-chapter .metal-title{font-family:Figtree,sans-serif;font-size:clamp(4rem,16vw,12rem);font-weight:750;font-style:normal;font-variation-settings:normal;font-feature-settings:normal;line-height:1.05;letter-spacing:-.02em;margin:0;padding:.27em 0 .15em;color:#E4A52A;overflow-wrap:anywhere}
.metal-foot p{font:400 1rem/1.8 Figtree,sans-serif;margin:0;color:#E1CDB0}
#metal-ring{width:160px;height:150px;position:relative;pointer-events:none}
#metal-ring canvas{position:absolute;pointer-events:none}
@media(max-width:700px){.metal-chapter{padding-block:45px}.metal-foot{gap:.5rem}#metal-ring{width:130px;height:145px}.metal-foot p{font-size:.85rem}}
@media(forced-colors:active){#metal-ring{display:none}.metal-chapter{background:Canvas;color:CanvasText}}
@media print{#metal-ring{display:none}}