/* ---------------------------------------------------------------------------
   Section bands (2026-09-23). Rise-style separation without <hr>s.
   DEFAULT (Jeff): bands=tonal + edge=blob + motif=ai. Every alternative below is kept;
   see design/SECTION-BANDS.md. Three independent switches (remembered in this browser):
     ?bands=tonal | chapter | off      base style
     ?edge=wave | swoop | blob | tilt | none      shape of the band's top/bottom edge
     ?motif=dots | bubbles | rings | mesh | ai | none   decorative texture inside the band
   Rule for all styles: reading sections stay plain; "do" sections (labs,
   questions, projects) and the hub's statement block get a full-width band.
   Bands are decorative only: text keeps the page's own colors and contrast.
   --------------------------------------------------------------------------- */

/* Full-bleed: .site-main spans the window (and clips sideways overflow there);
   its padding keeps the content column exactly where it was. */
:root[data-bands] { --gutter: max(1.25rem, calc((100vw - var(--page-max)) / 2 + 1.25rem)); }
@media (max-width: 720px) { :root[data-bands] { --gutter: 1rem; } }
:root[data-bands] .site-main { max-width: none; padding-inline: var(--gutter); }

:root[data-bands] { --band-tint: var(--accent-iris); --band-tint2: var(--m1); }
:root[data-bands] body[data-module] { --band-tint: var(--mod, var(--accent-iris)); --band-tint2: var(--mod-next, var(--m1)); }
:root[data-bands] body[data-module="m4"] { --band-tint2: var(--m35); }

/* Band colors: a whisper of the module color over the page background */
:root[data-bands] {
  --band-bg: color-mix(in srgb, var(--band-tint) 7%, var(--bg-raised));
  --band-edge: color-mix(in srgb, var(--band-tint) 16%, var(--border-subtle));
  --band-feature: color-mix(in srgb, var(--band-tint) 12%, var(--bg-raised));
  --motif-a: 16%;   /* motif ink strength, as % of the tint (textures never sit under text, see below) */
}
:root[data-bands][data-mode="light"] {
  --band-bg: color-mix(in srgb, var(--band-tint) 5%, #EEF1F6);
  --band-edge: color-mix(in srgb, var(--band-tint) 14%, var(--border-subtle));
  --band-feature: color-mix(in srgb, var(--band-tint) 9%, #EEF1F6);
  --motif-a: 14%;
}

/* ---------- Base band (tonal) ---------- */
:root[data-bands]:not([data-bands="chapter"]) .band:is([data-kind="do"], [data-kind="feature"]) {
  position: relative;
  isolation: isolate;
  padding-block: 2.25rem 2.5rem;
  margin-block: 2.5rem;
}
:root[data-bands] .band[data-kind="feature"] { --band-bg: var(--band-feature); }
:root[data-bands]:not([data-bands="chapter"]) .band:is([data-kind="do"], [data-kind="feature"])::before,
:root[data-bands]:not([data-bands="chapter"]) .band:is([data-kind="do"], [data-kind="feature"])::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0;
  left: calc(-1 * var(--gutter));
  width: 100vw;              /* exactly the window, so % positions below are window-relative */
  pointer-events: none;
}
:root[data-bands]:not([data-bands="chapter"]) .band::before { mask: var(--edge-mask, none); }

/* Textures stay OUT of the reading column (WCAG 1.4.3 holds no matter what sits under the text):
   visible only in the margins beside it. Layers: column ∩ texture fade ∩ edge shape. */
:root[data-bands] { --text-col: var(--content-max); --edge-mask: linear-gradient(#000 0 0); }
:root[data-bands] body[data-module="hub"] .band { --text-col: calc(100vw - 2 * var(--gutter)); }
:root[data-bands] body[data-module="hub"] .band[data-kind="feature"] { --text-col: 44rem; }
:root[data-motif] body[data-module="hub"] .big-questions > :is(ul, ol) { max-width: 42rem; }
:root[data-bands]:not([data-bands="chapter"]) .band::after {
  mask:
    linear-gradient(90deg, #000 0, rgba(0,0,0,.75) calc(var(--gutter) * .35), rgba(0,0,0,.35) calc(var(--gutter) * .65),
      transparent calc(var(--gutter) - 0.25rem),
      transparent calc(var(--gutter) + var(--text-col) + 0.75rem), #000 calc(var(--gutter) + var(--text-col) + 9rem)),
    var(--fade-mask, linear-gradient(#000 0 0)),
    var(--edge-mask);
  mask-composite: intersect, intersect, add, add, add;
}
@media (max-width: 860px) { :root[data-bands] .band::after { display: none; } }  /* no room beside the text */
:root[data-bands]:not([data-bands="chapter"]) .band:is([data-kind="do"], [data-kind="feature"])::before {
  background: var(--band-bg);
  border-block: 1px solid var(--band-edge);
}
:root[data-bands] .band > h2:first-child,
:root[data-bands] .band > .section-label:first-child { margin-top: 0; }

/* Cards and panels inside a band sit on the raised surface so they lift off it */
:root[data-bands] .band .lab-panel,
:root[data-bands] .band .module-card { background: var(--bg-raised); }

/* ---------- Edge shapes (masks: top edge / solid middle / bottom edge) ---------- */
:root[data-edge]:not([data-edge="none"]):not([data-bands="chapter"]) .band:is([data-kind="do"], [data-kind="feature"]) {
  padding-block: 6.25rem 5.25rem;   /* text starts below the deepest point of the edge curve and its rim light */
  margin-block: 0.25rem;
}
:root[data-edge]:not([data-edge="none"]) .band::before { border-block: 0 !important; }

/* Feathered edges: each shape is blurred (SVG feGaussianBlur) so the band fades into the page
   over ~30px instead of ending on a hard line. Same in light and dark mode. */
:root[data-edge="wave"] {
  --edge-h: 108px;
  --edge-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 108' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-300' y='-400' width='1800' height='1000'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3Cg filter='url(%23f)' transform='translate(0 30)'%3E%3Cpath d='M0 48V40C300 0 900 0 1200 40V48Z'/%3E%3Crect x='-200' y='48' width='1600' height='400'/%3E%3Crect x='-200' y='40' width='200' height='400'/%3E%3Crect x='1200' y='40' width='200' height='400'/%3E%3C/g%3E%3C/svg%3E") top / 100% 108px no-repeat,
    linear-gradient(#000 0 0) center / 100% calc(100% - 214px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 108' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-300' y='-400' width='1800' height='1000'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3Cg filter='url(%23f)' transform='translate(0 30)'%3E%3Cpath d='M0 0V8C300 48 900 48 1200 8V0Z'/%3E%3Crect x='-200' y='-400' width='1600' height='400'/%3E%3Crect x='-200' y='-400' width='200' height='408'/%3E%3Crect x='1200' y='-400' width='200' height='408'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% 108px no-repeat;
}
:root[data-edge="swoop"] {
  --edge-h: 120px;
  --edge-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-300' y='-400' width='1800' height='1000'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3Cg filter='url(%23f)' transform='translate(0 30)'%3E%3Cpath d='M0 60V44C240 66 620 -6 1200 6V60Z'/%3E%3Crect x='-200' y='60' width='1600' height='400'/%3E%3Crect x='-200' y='44' width='200' height='400'/%3E%3Crect x='1200' y='6' width='200' height='400'/%3E%3C/g%3E%3C/svg%3E") top / 100% 120px no-repeat,
    linear-gradient(#000 0 0) center / 100% calc(100% - 238px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-300' y='-400' width='1800' height='1000'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3Cg filter='url(%23f)' transform='translate(0 30)'%3E%3Cpath d='M0 0V50C520 68 900 -6 1200 30V0Z'/%3E%3Crect x='-200' y='-400' width='1600' height='400'/%3E%3Crect x='-200' y='-400' width='200' height='450'/%3E%3Crect x='1200' y='-400' width='200' height='430'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% 120px no-repeat;
}
:root[data-edge="blob"] {
  --edge-h: 120px;
  --edge-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-300' y='-400' width='1800' height='1000'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3Cg filter='url(%23f)' transform='translate(0 30)'%3E%3Cpath d='M0 60V36C90 14 190 46 330 32S560 4 700 20S930 54 1045 26S1165 8 1200 20V60Z'/%3E%3Crect x='-200' y='60' width='1600' height='400'/%3E%3Crect x='-200' y='36' width='200' height='400'/%3E%3Crect x='1200' y='20' width='200' height='400'/%3E%3C/g%3E%3C/svg%3E") top / 100% 120px no-repeat,
    linear-gradient(#000 0 0) center / 100% calc(100% - 238px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-300' y='-400' width='1800' height='1000'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3Cg filter='url(%23f)' transform='translate(0 30)'%3E%3Cpath d='M0 0V22C120 48 260 30 400 42S650 60 780 36S1010 18 1110 40S1180 46 1200 34V0Z'/%3E%3Crect x='-200' y='-400' width='1600' height='400'/%3E%3Crect x='-200' y='-400' width='200' height='422'/%3E%3Crect x='1200' y='-400' width='200' height='434'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% 120px no-repeat;
}
:root[data-edge="tilt"] {
  --edge-h: 108px;
  --edge-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 108' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-300' y='-400' width='1800' height='1000'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3Cg filter='url(%23f)' transform='translate(0 30)'%3E%3Cpath d='M0 48V44L1200 0V48Z'/%3E%3Crect x='-200' y='48' width='1600' height='400'/%3E%3Crect x='-200' y='44' width='200' height='400'/%3E%3Crect x='1200' y='0' width='200' height='400'/%3E%3C/g%3E%3C/svg%3E") top / 100% 108px no-repeat,
    linear-gradient(#000 0 0) center / 100% calc(100% - 214px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 108' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-300' y='-400' width='1800' height='1000'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3Cg filter='url(%23f)' transform='translate(0 30)'%3E%3Cpath d='M0 0V48L1200 4V0Z'/%3E%3Crect x='-200' y='-400' width='1600' height='400'/%3E%3Crect x='-200' y='-400' width='200' height='448'/%3E%3Crect x='1200' y='-400' width='200' height='404'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% 108px no-repeat;
}

/* ---------- Textures (on ::after, above the band color, below the content) ---------- */
:root[data-bands] {
  --ink: color-mix(in srgb, var(--band-tint) var(--motif-a), transparent);
  --ink2: color-mix(in srgb, var(--band-tint2) var(--motif-a), transparent);
}

/* Dots: fine grid fading in from the top-right */
:root[data-motif="dots"] .band::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--band-tint) 38%, transparent) 1.2px, transparent 1.7px) 0 0 / 16px 16px;
  --fade-mask: radial-gradient(ellipse 55% 95% at 100% 0%, #000 0%, rgba(0,0,0,.5) 45%, transparent 80%);
}
/* Bubbles: a few soft circles of different sizes, mostly toward the right edge */
:root[data-motif="bubbles"] .band::after {
  background:
    radial-gradient(circle 150px at 96% 88%, var(--ink) 97%, transparent 100%),
    radial-gradient(circle 64px at 86% 22%, var(--ink2) 96%, transparent 100%),
    radial-gradient(circle 26px at 79% 64%, var(--ink) 94%, transparent 100%),
    radial-gradient(circle 11px at 91% 48%, var(--ink2) 90%, transparent 100%),
    radial-gradient(circle 90px at 2% 6%, var(--ink2) 97%, transparent 100%),
    radial-gradient(circle 16px at 8% 78%, var(--ink) 92%, transparent 100%);
}
/* Rings: concentric orbit lines radiating from the right edge */
:root[data-motif="rings"] .band::after {
  background:
    repeating-radial-gradient(circle at 100% 50%, transparent 0 34px, color-mix(in srgb, var(--band-tint) 30%, transparent) 34px 35.5px),
    radial-gradient(circle 70px at 100% 50%, var(--ink) 97%, transparent 100%);
  --fade-mask: radial-gradient(circle 420px at 100% 50%, #000 30%, transparent 100%);
}
/* Mesh: soft aurora glow blending this module's color into the next one */
:root:is([data-motif="mesh"], [data-motif="ai"]) .band::after {
  --m-a: calc(var(--motif-a) * 2);      /* right side: two colors, overlapping */
  --m-l: calc(var(--motif-a) * 1.4);    /* left side: softer, since the margin is narrower */
  --mesh-bg:
    radial-gradient(in oklab ellipse 42% 100% at 86% 0%, color-mix(in srgb, var(--band-tint2) calc(var(--m-a) * 1), transparent) 0%, color-mix(in srgb, var(--band-tint2) calc(var(--m-a) * 0.78), transparent) 18%, color-mix(in srgb, var(--band-tint2) calc(var(--m-a) * 0.55), transparent) 34%, color-mix(in srgb, var(--band-tint2) calc(var(--m-a) * 0.34), transparent) 50%, color-mix(in srgb, var(--band-tint2) calc(var(--m-a) * 0.18), transparent) 64%, color-mix(in srgb, var(--band-tint2) calc(var(--m-a) * 0.07), transparent) 77%, transparent 88%),
    radial-gradient(in oklab ellipse 34% 90% at 100% 100%, color-mix(in srgb, var(--band-tint) calc(var(--m-a) * 1), transparent) 0%, color-mix(in srgb, var(--band-tint) calc(var(--m-a) * 0.78), transparent) 18%, color-mix(in srgb, var(--band-tint) calc(var(--m-a) * 0.55), transparent) 34%, color-mix(in srgb, var(--band-tint) calc(var(--m-a) * 0.34), transparent) 50%, color-mix(in srgb, var(--band-tint) calc(var(--m-a) * 0.18), transparent) 64%, color-mix(in srgb, var(--band-tint) calc(var(--m-a) * 0.07), transparent) 77%, transparent 88%),
    radial-gradient(in oklab ellipse 26% 90% at 0% 0%, color-mix(in srgb, var(--band-tint2) calc(var(--m-l) * 1), transparent) 0%, color-mix(in srgb, var(--band-tint2) calc(var(--m-l) * 0.78), transparent) 18%, color-mix(in srgb, var(--band-tint2) calc(var(--m-l) * 0.55), transparent) 34%, color-mix(in srgb, var(--band-tint2) calc(var(--m-l) * 0.34), transparent) 50%, color-mix(in srgb, var(--band-tint2) calc(var(--m-l) * 0.18), transparent) 64%, color-mix(in srgb, var(--band-tint2) calc(var(--m-l) * 0.07), transparent) 77%, transparent 88%),
    radial-gradient(in oklab ellipse 30% 100% at 0% 100%, color-mix(in srgb, var(--band-tint) calc(var(--m-l) * 1), transparent) 0%, color-mix(in srgb, var(--band-tint) calc(var(--m-l) * 0.78), transparent) 18%, color-mix(in srgb, var(--band-tint) calc(var(--m-l) * 0.55), transparent) 34%, color-mix(in srgb, var(--band-tint) calc(var(--m-l) * 0.34), transparent) 50%, color-mix(in srgb, var(--band-tint) calc(var(--m-l) * 0.18), transparent) 64%, color-mix(in srgb, var(--band-tint) calc(var(--m-l) * 0.07), transparent) 77%, transparent 88%);
}
:root[data-motif="mesh"] .band::after { background: var(--mesh-bg); }

/* ---------- AI glow texture: mesh glow + soft iridescent rim light (with a one-time shine) + signal ribbons ---------- */
:root[data-bands] {
  --rim-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' x2='1200' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%232DD4BF'/%3E%3Cstop offset='.33' stop-color='%2338BDF8'/%3E%3Cstop offset='.66' stop-color='%23A78BFA'/%3E%3Cstop offset='1' stop-color='%23F472B6'/%3E%3C/linearGradient%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='-300' y='-400' width='1800' height='1000'%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(0 34)' fill='none' stroke='url(%23g)'%3E%3Cpath d='M-100 36H0C90 14 190 46 330 32S560 4 700 20S930 54 1045 26S1165 8 1200 20H1300' stroke-width='12' stroke-opacity='0.2' filter='url(%23b)' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-100 36H0C90 14 190 46 330 32S560 4 700 20S930 54 1045 26S1165 8 1200 20H1300' stroke-width='1' stroke-opacity='0.3' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --rim-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' x2='1200' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%232DD4BF'/%3E%3Cstop offset='.33' stop-color='%2338BDF8'/%3E%3Cstop offset='.66' stop-color='%23A78BFA'/%3E%3Cstop offset='1' stop-color='%23F472B6'/%3E%3C/linearGradient%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='-300' y='-400' width='1800' height='1000'%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(0 26)' fill='none' stroke='url(%23g)'%3E%3Cpath d='M-100 22H0C120 48 260 30 400 42S650 60 780 36S1010 18 1110 40S1180 46 1200 34H1300' stroke-width='12' stroke-opacity='0.2' filter='url(%23b)' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-100 22H0C120 48 260 30 400 42S650 60 780 36S1010 18 1110 40S1180 46 1200 34H1300' stroke-width='1' stroke-opacity='0.3' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --rim-top-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' x2='1200' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%232DD4BF'/%3E%3Cstop offset='.33' stop-color='%2338BDF8'/%3E%3Cstop offset='.66' stop-color='%23A78BFA'/%3E%3Cstop offset='1' stop-color='%23F472B6'/%3E%3C/linearGradient%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='-300' y='-400' width='1800' height='1000'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(0 34)' fill='none' stroke='url(%23g)'%3E%3Cpath d='M-100 36H0C90 14 190 46 330 32S560 4 700 20S930 54 1045 26S1165 8 1200 20H1300' stroke-width='12' stroke-opacity='0.55' filter='url(%23b)' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-100 36H0C90 14 190 46 330 32S560 4 700 20S930 54 1045 26S1165 8 1200 20H1300' stroke-width='1' stroke-opacity='0.75' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --rim-bot-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' x2='1200' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%232DD4BF'/%3E%3Cstop offset='.33' stop-color='%2338BDF8'/%3E%3Cstop offset='.66' stop-color='%23A78BFA'/%3E%3Cstop offset='1' stop-color='%23F472B6'/%3E%3C/linearGradient%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='-300' y='-400' width='1800' height='1000'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(0 26)' fill='none' stroke='url(%23g)'%3E%3Cpath d='M-100 22H0C120 48 260 30 400 42S650 60 780 36S1010 18 1110 40S1180 46 1200 34H1300' stroke-width='12' stroke-opacity='0.55' filter='url(%23b)' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-100 22H0C120 48 260 30 400 42S650 60 780 36S1010 18 1110 40S1180 46 1200 34H1300' stroke-width='1' stroke-opacity='0.75' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --sig-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 220'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%230F766E'/%3E%3Cstop offset='0.35' stop-color='%230369A1'/%3E%3Cstop offset='0.7' stop-color='%236D28D9'/%3E%3Cstop offset='1' stop-color='%23BE185D'/%3E%3C/linearGradient%3E%3ClinearGradient id='fa' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23fff'/%3E%3Cstop offset='.8' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='360' height='220' fill='url(%23fa)'/%3E%3C/mask%3E%3C/defs%3E%3Cg%3E%3Cg fill='none' stroke='url(%23s)' stroke-width='1.2' stroke-linecap='round' mask='url(%23m)'%3E%3Cpath d='M0 120C60 60 120 60 180 110S300 170 360 90' stroke-opacity='0.380'/%3E%3Cpath d='M0 132C60 82 130 72 180 118S300 162 360 104' stroke-opacity='0.323'/%3E%3Cpath d='M0 144C70 102 140 86 180 126S290 154 360 118' stroke-opacity='0.266'/%3E%3Cpath d='M0 156C80 122 150 100 180 134S280 146 360 132' stroke-opacity='0.209'/%3E%3Cpath d='M0 168C90 142 160 114 180 142S270 138 360 146' stroke-opacity='0.152'/%3E%3C/g%3E%3Cg fill='url(%23s)'%3E%3Cpath d='M292 39Q292 52 305 52Q292 52 292 65Q292 52 279 52Q292 52 292 39Z' fill-opacity='0.50'/%3E%3Cpath d='M326 76Q326 82 332 82Q326 82 326 88Q326 82 320 82Q326 82 326 76Z' fill-opacity='0.38'/%3E%3Cpath d='M252 29Q252 34 257 34Q252 34 252 39Q252 34 247 34Q252 34 252 29Z' fill-opacity='0.38'/%3E%3Cpath d='M58 63Q58 70 65 70Q58 70 58 77Q58 70 51 70Q58 70 58 63Z' fill-opacity='0.50'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --sig-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 220'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%230F766E'/%3E%3Cstop offset='0.35' stop-color='%230369A1'/%3E%3Cstop offset='0.7' stop-color='%236D28D9'/%3E%3Cstop offset='1' stop-color='%23BE185D'/%3E%3C/linearGradient%3E%3ClinearGradient id='fa' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23fff'/%3E%3Cstop offset='.8' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='360' height='220' fill='url(%23fa)'/%3E%3C/mask%3E%3C/defs%3E%3Cg transform='translate(360 0) scale(-1 1)'%3E%3Cg fill='none' stroke='url(%23s)' stroke-width='1.2' stroke-linecap='round' mask='url(%23m)'%3E%3Cpath d='M0 120C60 60 120 60 180 110S300 170 360 90' stroke-opacity='0.380'/%3E%3Cpath d='M0 132C60 82 130 72 180 118S300 162 360 104' stroke-opacity='0.323'/%3E%3Cpath d='M0 144C70 102 140 86 180 126S290 154 360 118' stroke-opacity='0.266'/%3E%3Cpath d='M0 156C80 122 150 100 180 134S280 146 360 132' stroke-opacity='0.209'/%3E%3Cpath d='M0 168C90 142 160 114 180 142S270 138 360 146' stroke-opacity='0.152'/%3E%3C/g%3E%3Cg fill='url(%23s)'%3E%3Cpath d='M292 39Q292 52 305 52Q292 52 292 65Q292 52 279 52Q292 52 292 39Z' fill-opacity='0.50'/%3E%3Cpath d='M326 76Q326 82 332 82Q326 82 326 88Q326 82 320 82Q326 82 326 76Z' fill-opacity='0.38'/%3E%3Cpath d='M252 29Q252 34 257 34Q252 34 252 39Q252 34 247 34Q252 34 252 29Z' fill-opacity='0.38'/%3E%3Cpath d='M58 63Q58 70 65 70Q58 70 58 77Q58 70 51 70Q58 70 58 63Z' fill-opacity='0.50'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
:root[data-bands]:not([data-mode="light"]) {
  --rim-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' x2='1200' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%232DD4BF'/%3E%3Cstop offset='.33' stop-color='%2338BDF8'/%3E%3Cstop offset='.66' stop-color='%23A78BFA'/%3E%3Cstop offset='1' stop-color='%23F472B6'/%3E%3C/linearGradient%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='-300' y='-400' width='1800' height='1000'%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(0 34)' fill='none' stroke='url(%23g)'%3E%3Cpath d='M-100 36H0C90 14 190 46 330 32S560 4 700 20S930 54 1045 26S1165 8 1200 20H1300' stroke-width='12' stroke-opacity='0.26' filter='url(%23b)' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-100 36H0C90 14 190 46 330 32S560 4 700 20S930 54 1045 26S1165 8 1200 20H1300' stroke-width='1' stroke-opacity='0.36' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --rim-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' x2='1200' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%232DD4BF'/%3E%3Cstop offset='.33' stop-color='%2338BDF8'/%3E%3Cstop offset='.66' stop-color='%23A78BFA'/%3E%3Cstop offset='1' stop-color='%23F472B6'/%3E%3C/linearGradient%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='-300' y='-400' width='1800' height='1000'%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(0 26)' fill='none' stroke='url(%23g)'%3E%3Cpath d='M-100 22H0C120 48 260 30 400 42S650 60 780 36S1010 18 1110 40S1180 46 1200 34H1300' stroke-width='12' stroke-opacity='0.26' filter='url(%23b)' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-100 22H0C120 48 260 30 400 42S650 60 780 36S1010 18 1110 40S1180 46 1200 34H1300' stroke-width='1' stroke-opacity='0.36' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --rim-top-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' x2='1200' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%232DD4BF'/%3E%3Cstop offset='.33' stop-color='%2338BDF8'/%3E%3Cstop offset='.66' stop-color='%23A78BFA'/%3E%3Cstop offset='1' stop-color='%23F472B6'/%3E%3C/linearGradient%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='-300' y='-400' width='1800' height='1000'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(0 34)' fill='none' stroke='url(%23g)'%3E%3Cpath d='M-100 36H0C90 14 190 46 330 32S560 4 700 20S930 54 1045 26S1165 8 1200 20H1300' stroke-width='12' stroke-opacity='0.65' filter='url(%23b)' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-100 36H0C90 14 190 46 330 32S560 4 700 20S930 54 1045 26S1165 8 1200 20H1300' stroke-width='1' stroke-opacity='0.85' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --rim-bot-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' x2='1200' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%232DD4BF'/%3E%3Cstop offset='.33' stop-color='%2338BDF8'/%3E%3Cstop offset='.66' stop-color='%23A78BFA'/%3E%3Cstop offset='1' stop-color='%23F472B6'/%3E%3C/linearGradient%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='-300' y='-400' width='1800' height='1000'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(0 26)' fill='none' stroke='url(%23g)'%3E%3Cpath d='M-100 22H0C120 48 260 30 400 42S650 60 780 36S1010 18 1110 40S1180 46 1200 34H1300' stroke-width='12' stroke-opacity='0.65' filter='url(%23b)' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-100 22H0C120 48 260 30 400 42S650 60 780 36S1010 18 1110 40S1180 46 1200 34H1300' stroke-width='1' stroke-opacity='0.85' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --sig-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 220'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%232DD4BF'/%3E%3Cstop offset='0.35' stop-color='%2338BDF8'/%3E%3Cstop offset='0.7' stop-color='%23A78BFA'/%3E%3Cstop offset='1' stop-color='%23F472B6'/%3E%3C/linearGradient%3E%3ClinearGradient id='fa' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23fff'/%3E%3Cstop offset='.8' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='360' height='220' fill='url(%23fa)'/%3E%3C/mask%3E%3C/defs%3E%3Cg%3E%3Cg fill='none' stroke='url(%23s)' stroke-width='1.2' stroke-linecap='round' mask='url(%23m)'%3E%3Cpath d='M0 120C60 60 120 60 180 110S300 170 360 90' stroke-opacity='0.420'/%3E%3Cpath d='M0 132C60 82 130 72 180 118S300 162 360 104' stroke-opacity='0.357'/%3E%3Cpath d='M0 144C70 102 140 86 180 126S290 154 360 118' stroke-opacity='0.294'/%3E%3Cpath d='M0 156C80 122 150 100 180 134S280 146 360 132' stroke-opacity='0.231'/%3E%3Cpath d='M0 168C90 142 160 114 180 142S270 138 360 146' stroke-opacity='0.168'/%3E%3C/g%3E%3Cg fill='url(%23s)'%3E%3Cpath d='M292 39Q292 52 305 52Q292 52 292 65Q292 52 279 52Q292 52 292 39Z' fill-opacity='0.60'/%3E%3Cpath d='M326 76Q326 82 332 82Q326 82 326 88Q326 82 320 82Q326 82 326 76Z' fill-opacity='0.45'/%3E%3Cpath d='M252 29Q252 34 257 34Q252 34 252 39Q252 34 247 34Q252 34 252 29Z' fill-opacity='0.45'/%3E%3Cpath d='M58 63Q58 70 65 70Q58 70 58 77Q58 70 51 70Q58 70 58 63Z' fill-opacity='0.60'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --sig-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 220'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%232DD4BF'/%3E%3Cstop offset='0.35' stop-color='%2338BDF8'/%3E%3Cstop offset='0.7' stop-color='%23A78BFA'/%3E%3Cstop offset='1' stop-color='%23F472B6'/%3E%3C/linearGradient%3E%3ClinearGradient id='fa' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23fff'/%3E%3Cstop offset='.8' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='360' height='220' fill='url(%23fa)'/%3E%3C/mask%3E%3C/defs%3E%3Cg transform='translate(360 0) scale(-1 1)'%3E%3Cg fill='none' stroke='url(%23s)' stroke-width='1.2' stroke-linecap='round' mask='url(%23m)'%3E%3Cpath d='M0 120C60 60 120 60 180 110S300 170 360 90' stroke-opacity='0.420'/%3E%3Cpath d='M0 132C60 82 130 72 180 118S300 162 360 104' stroke-opacity='0.357'/%3E%3Cpath d='M0 144C70 102 140 86 180 126S290 154 360 118' stroke-opacity='0.294'/%3E%3Cpath d='M0 156C80 122 150 100 180 134S280 146 360 132' stroke-opacity='0.231'/%3E%3Cpath d='M0 168C90 142 160 114 180 142S270 138 360 146' stroke-opacity='0.168'/%3E%3C/g%3E%3Cg fill='url(%23s)'%3E%3Cpath d='M292 39Q292 52 305 52Q292 52 292 65Q292 52 279 52Q292 52 292 39Z' fill-opacity='0.60'/%3E%3Cpath d='M326 76Q326 82 332 82Q326 82 326 88Q326 82 320 82Q326 82 326 76Z' fill-opacity='0.45'/%3E%3Cpath d='M252 29Q252 34 257 34Q252 34 252 39Q252 34 247 34Q252 34 252 29Z' fill-opacity='0.45'/%3E%3Cpath d='M58 63Q58 70 65 70Q58 70 58 77Q58 70 51 70Q58 70 58 63Z' fill-opacity='0.60'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* Rim light rides just inside the (feathered) blob edge, so it glows rather than outlines */
:root[data-edge="blob"][data-motif="ai"]:not([data-bands="chapter"]) .band:is([data-kind="do"], [data-kind="feature"])::before {
  background:
    var(--rim-top) top / 100% var(--edge-h) no-repeat,
    var(--rim-bot) bottom / 100% var(--edge-h) no-repeat,
    var(--band-bg);
}
/* Narrow screens: the curve would cross the text column, so the rim light switches off */
@media (max-width: 860px) {
  :root[data-edge="blob"][data-motif="ai"]:not([data-bands="chapter"]) .band:is([data-kind="do"], [data-kind="feature"])::before { background: var(--band-bg); }
}
/* Shine: a brighter copy of the rim, revealed through a soft moving window.
   Plays once (4s, under WCAG 2.2.2's 5s) each time a band scrolls into view; off with reduced motion. */
.band__shine { display: none; }
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
  :root[data-edge="blob"][data-motif="ai"]:not([data-bands="chapter"]) .band__shine {
    display: block;
    position: absolute; z-index: -1;
    top: 0; bottom: 0; left: calc(-1 * var(--gutter)); width: 100vw;
    pointer-events: none;
    background:
      var(--rim-top-lit) top / 100% var(--edge-h) no-repeat,
      var(--rim-bot-lit) bottom / 100% var(--edge-h) no-repeat;
    mask: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent) no-repeat;
    mask-size: 34vw 100%;
    mask-position: -40vw 0;
  }
  :root[data-edge="blob"][data-motif="ai"] .band.is-lit .band__shine { animation: band-shine 4s cubic-bezier(.45, .05, .35, 1) 1 both; }
}
@keyframes band-shine {
  from { mask-position: -40vw 0; }
  to   { mask-position: 106vw 0; }
}
:root[data-motif="ai"] .band::after {
  background:
    var(--sig-a) right max(2vw, 1rem) top 50% / 340px 208px no-repeat,
    var(--sig-b) left max(1vw, 0.5rem) bottom 16% / 200px 122px no-repeat,
    var(--mesh-bg);
}

/* Textures never appear on plain reading sections or in the chapter style */
:root[data-bands="chapter"] .band::after,
.band[data-kind="read"]::after { display: none; }

/* ---------- Chapter: no fills; a Rise-style divider opens each section ---------- */
:root[data-bands="chapter"] .lesson-content { counter-reset: chapter; }
:root[data-bands="chapter"] .band { counter-increment: chapter; margin-top: 3.5rem; }
:root[data-bands="chapter"] .band > h2:first-child,
:root[data-bands="chapter"] .band > .section-label:first-child { position: relative; padding-top: 1.75rem; }
:root[data-bands="chapter"] .band > h2:first-child::before,
:root[data-bands="chapter"] .band > .section-label:first-child::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--band-tint), color-mix(in srgb, var(--band-tint) 25%, transparent) 40%, transparent);
}
:root[data-bands="chapter"] .lesson-content .band > h2:first-child::after {
  content: counter(chapter, decimal-leading-zero) / "";
  position: absolute;
  top: -0.8rem; left: 0;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font: 700 0.75rem/1.4 var(--font-mono);
  color: var(--band-tint);
  background: var(--bg-base);
  border: 1px solid color-mix(in srgb, var(--band-tint) 45%, var(--border-subtle));
}
:root[data-bands="chapter"] .lesson-content .band > h2:first-child { padding-top: 1.9rem; }
:root[data-bands="chapter"] .band[data-kind="do"] > h2:first-child::before,
:root[data-bands="chapter"] .band[data-kind="feature"] > .section-label:first-child::before { height: 4px; }

/* ---------- Design picker (shown only with ?picker) ---------- */
.band-picker {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: end;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem 0.75rem; border-radius: 12px;
  background: var(--bg-raised); border: 1px solid var(--border-strong);
  box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: 0.8rem;
}
.band-picker__title { width: 100%; margin: 0; font-weight: 700; color: var(--text-primary); }
.band-picker label { display: grid; gap: 0.15rem; color: var(--text-secondary); font-weight: 600; }
.band-picker select { font: inherit; padding: 0.2rem 0.4rem; border-radius: 6px; border: 1px solid var(--border-input); background: var(--bg-input); color: var(--text-primary); }
.band-picker button { font: inherit; background: none; border: 0; color: var(--text-secondary); text-decoration: underline; cursor: pointer; padding: 0.2rem; }

@media (max-width: 720px) {
  :root[data-bands]:not([data-bands="chapter"]) .band:is([data-kind="do"], [data-kind="feature"]) { padding-block: 1.75rem 2rem; }
  :root[data-edge]:not([data-edge="none"]):not([data-bands="chapter"]) .band:is([data-kind="do"], [data-kind="feature"]) { padding-block: 4.25rem 4.5rem; }
}
@media print {
  :root[data-bands] .band::before, :root[data-bands] .band::after { display: none; }
  .band-picker { display: none; }
}

/* Hub hero glow: spans the whole window and fades out completely inside it (no hard left edge) */
:root[data-bands][data-theme] .hero::before {
  inset: auto;
  top: -3rem; height: 26rem;
  left: calc(-1 * var(--gutter)); width: 100vw;
  background: radial-gradient(in oklab ellipse 42rem 12rem at calc(var(--gutter) + 16rem) 50%,
    var(--hero-glow) 0%,
    color-mix(in srgb, var(--hero-glow) 70%, transparent) 25%,
    color-mix(in srgb, var(--hero-glow) 38%, transparent) 50%,
    color-mix(in srgb, var(--hero-glow) 12%, transparent) 75%,
    transparent 100%);
}