/* ==========================================================================
   AdGlow design system
   Dark cinematic frames, ivory editorial bodies, signal glow used as an
   accent and never as wallpaper. No webfonts — the CSP-free, zero-request
   system stack keeps first paint immediate.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root{
  /* Core palette */
  --ink:#070A12;
  --navy:#0A1630;
  --indigo:#121B3A;
  --violet:#8B6DFF;
  --aqua:#4CE1D4;
  --coral:#FF5E72;
  --gold:#FFBF66;
  --ivory:#F7F4EE;
  --white:#FCFBF8;
  --slate:#526077;

  /* Dark-surface roles */
  --d-bg:var(--ink);
  --d-surface:#0D1424;
  --d-raised:#141E36;
  --d-text:var(--ivory);
  --d-muted:#A3AFC4;
  --d-line:rgba(255,255,255,.11);
  --d-line-2:rgba(255,255,255,.22);

  /* Light-surface roles */
  --l-bg:var(--white);
  --l-surface:#FFFFFF;
  --l-raised:#F2EFE8;
  --l-text:#0A1226;
  --l-muted:#55617A;
  --l-line:rgba(7,10,18,.13);
  --l-line-2:rgba(7,10,18,.26);

  /* Accessible accents for light grounds (the neon versions fail contrast) */
  --violet-ink:#5B3FD4;
  --aqua-ink:#0B7C74;

  /* Type scale — fluid, 1.24 ratio at the small end */
  --step--1:clamp(.8125rem,.79rem + .11vw,.875rem);
  --step-0 :clamp(1rem,.96rem + .18vw,1.0625rem);
  --step-1 :clamp(1.1875rem,1.11rem + .35vw,1.375rem);
  --step-2 :clamp(1.4375rem,1.31rem + .6vw,1.75rem);
  --step-3 :clamp(1.75rem,1.54rem + 1.0vw,2.25rem);
  --step-4 :clamp(2.125rem,1.78rem + 1.65vw,3rem);
  --step-5 :clamp(2.5rem,1.9rem + 2.9vw,4.25rem);

  /* Space scale */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4rem;
  --s-9:6rem;   --s-10:8rem;

  --shell:76rem;
  --measure:36rem;
  --radius:14px;
  --radius-lg:20px;

  --ease:cubic-bezier(.16,.8,.3,1);
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--d-text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,h4{
  margin:0;
  font-weight:660;
  line-height:1.13;
  letter-spacing:-.028em;
  text-wrap:balance;
}
h1{font-size:var(--step-5)}
h2{font-size:var(--step-4);letter-spacing:-.024em}
h3{font-size:var(--step-2);letter-spacing:-.018em}
h4{font-size:var(--step-1);letter-spacing:-.012em}
p{margin:0;text-wrap:pretty}

a{color:inherit}
:focus-visible{outline:2px solid var(--aqua);outline-offset:3px;border-radius:3px}

/* --- Skip link ------------------------------------------------------------ */
.skip{
  position:absolute;left:var(--s-4);top:-4rem;z-index:100;
  background:var(--aqua);color:var(--ink);font-weight:640;
  padding:var(--s-3) var(--s-5);border-radius:0 0 10px 10px;
  transition:top .18s var(--ease);
}
.skip:focus{top:0}

/* --- Layout --------------------------------------------------------------- */
.shell{width:min(100% - 2.5rem,var(--shell));margin-inline:auto}
@media (max-width:30rem){.shell{width:calc(100% - 2rem)}}

.section{padding-block:clamp(3.5rem,8vw,7rem)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}

/* Alternating grounds. Every band declares BOTH bg and text so a section can
   never inherit the wrong pair. */
.band-dark{background:var(--ink);color:var(--d-text)}
.band-deep{background:linear-gradient(180deg,var(--navy),var(--ink));color:var(--d-text)}
.band-light{background:var(--white);color:var(--l-text)}
.band-ivory{background:var(--ivory);color:var(--l-text)}

.band-light .muted,.band-ivory .muted{color:var(--l-muted)}
.band-dark .muted,.band-deep .muted{color:var(--d-muted)}
.muted{color:var(--d-muted)}

.lede{font-size:var(--step-1);line-height:1.5;max-width:var(--measure)}
.eyebrow{
  display:inline-block;font-size:var(--step--1);font-weight:640;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--aqua);margin-bottom:var(--s-4);
}
.band-light .eyebrow,.band-ivory .eyebrow{color:var(--aqua-ink)}

.stack{display:flex;flex-direction:column;gap:var(--s-5)}
.stack-sm{display:flex;flex-direction:column;gap:var(--s-3)}

/* --- Header --------------------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(7,10,18,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--d-line);
}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  min-height:4.25rem}

.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ivory)}
.brand svg{width:1.6rem;height:auto;flex:none}
.brand b{font-size:1.1875rem;font-weight:700;letter-spacing:-.035em}
.brand b span{
  background:linear-gradient(96deg,var(--violet) 10%,var(--aqua) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .brand b span{color:var(--aqua)}
}

.nav{display:flex;align-items:center;gap:var(--s-2)}
.nav a{
  text-decoration:none;color:var(--d-muted);font-size:var(--step--1);font-weight:560;
  padding:.6rem .7rem;border-radius:8px;transition:color .15s var(--ease),background-color .15s var(--ease);
}
.nav a:hover{color:var(--ivory);background:rgba(255,255,255,.06)}
.nav a[aria-current="page"]{color:var(--ivory)}

/* `.nav a` (0,1,1) outranks `.btn--primary` (0,1,0), which silently repainted
   the header CTA in muted grey on its own gradient — a real contrast failure.
   Restate the button colors at matching specificity. */
.nav a.btn--primary,.nav a.btn--primary:hover{color:#070A12;background:linear-gradient(96deg,var(--violet),var(--aqua))}
.nav a.btn--ghost,.nav a.btn--ghost:hover{color:var(--ivory)}

.nav-toggle{
  display:none;align-items:center;gap:.5rem;min-height:44px;padding:.5rem .9rem;
  background:transparent;border:1px solid var(--d-line-2);border-radius:999px;
  color:var(--ivory);font-size:var(--step--1);font-weight:600;cursor:pointer;
}

@media (max-width:60rem){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;inset:100% 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--d-surface);border-bottom:1px solid var(--d-line);
    padding:var(--s-3) 1.25rem var(--s-5);
    max-height:calc(100dvh - 4.25rem);overflow-y:auto;
  }
  .nav a{padding:.85rem .5rem;border-bottom:1px solid var(--d-line);border-radius:0;font-size:var(--step-0)}
  .nav .btn{margin-top:var(--s-4);justify-content:center}
  .nav[hidden]{display:none}
}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:48px;padding:.8rem 1.5rem;border-radius:999px;
  font-size:var(--step-0);font-weight:640;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),
             background-color .18s var(--ease),border-color .18s var(--ease);
}
.btn--primary{
  background:linear-gradient(96deg,var(--violet),var(--aqua));
  color:#070A12;
  box-shadow:0 6px 26px -10px rgba(139,109,255,.9);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px -10px rgba(76,225,212,.75)}
.btn--ghost{border-color:var(--d-line-2);color:var(--ivory);background:transparent}
.btn--ghost:hover{border-color:var(--aqua);background:rgba(76,225,212,.09)}
.band-light .btn--ghost,.band-ivory .btn--ghost{border-color:var(--l-line-2);color:var(--l-text)}
.band-light .btn--ghost:hover,.band-ivory .btn--ghost:hover{border-color:var(--aqua-ink);background:rgba(11,124,116,.07)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* --- Hero ----------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--d-text);
  padding-block:clamp(4rem,11vw,8.5rem)}
/* Cinematic plate behind the gradient field. Decorative only — it carries no
   information, so it is alt="" and never the sole carrier of meaning. */
.hero__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.42;z-index:0;
  mask-image:linear-gradient(to bottom,#000 45%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 100%);
}
.hero__field{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(62rem 44rem at 12% -12%,rgba(139,109,255,.30),transparent 62%),
    radial-gradient(48rem 36rem at 92% 4%,rgba(76,225,212,.17),transparent 60%),
    radial-gradient(72rem 48rem at 50% 120%,rgba(18,27,58,.9),transparent 68%);
}
.hero__in{position:relative;z-index:1;display:grid;gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:1fr}
@media (min-width:64rem){
  .hero__in{grid-template-columns:1.05fr .95fr;align-items:center}
}
.hero h1{max-width:16ch}
.hero .lede{max-width:44ch;color:var(--d-muted)}

/* --- Cards ---------------------------------------------------------------- */
.grid{display:grid;gap:var(--s-5)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}

.card{
  background:var(--d-surface);border:1px solid var(--d-line);
  border-radius:var(--radius);padding:var(--s-5);
  display:flex;flex-direction:column;gap:var(--s-3);
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.band-light .card,.band-ivory .card{background:var(--l-surface);border-color:var(--l-line)}
a.card{text-decoration:none}
a.card:hover{border-color:var(--aqua);transform:translateY(-3px)}
.band-light a.card:hover,.band-ivory a.card:hover{border-color:var(--aqua-ink)}
.card h3{font-size:var(--step-1)}
.card__more{margin-top:auto;padding-top:var(--s-2);font-weight:640;font-size:var(--step--1);color:var(--aqua)}
.band-light .card__more,.band-ivory .card__more{color:var(--aqua-ink)}

.card__num{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--step--1);color:var(--violet);letter-spacing:.06em;
}
.band-light .card__num,.band-ivory .card__num{color:var(--violet-ink)}

/* --- Image tiles ---------------------------------------------------------- */
.card--tile{padding:0;overflow:hidden}
.card--tile .tile__media{
  position:relative;display:block;overflow:hidden;
  background:var(--ink);aspect-ratio:16/10;
}
.card--tile .tile__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.01);
  transition:transform .5s var(--ease),opacity .3s var(--ease);
}
a.card--tile:hover .tile__media img{transform:scale(1.06)}
/* Fade the artwork into the card so the tile reads as one object rather than
   a photo with a caption stuck underneath. */
.card--tile .tile__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(13,20,36,.85) 100%);
}
.band-light .card--tile .tile__media::after,
.band-ivory .card--tile .tile__media::after{
  background:linear-gradient(180deg,transparent 55%,rgba(255,255,255,.9) 100%);
}
.card--tile .tile__body{
  padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);flex:1;
  margin-top:-2.25rem;position:relative;z-index:1;
}
@media (prefers-reduced-motion:reduce){
  a.card--tile:hover .tile__media img{transform:scale(1.01)}
}

/* Wide feature banner, for pages that need one image doing real work. */
.banner{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--d-line);aspect-ratio:21/9;
}
.banner img{width:100%;height:100%;object-fit:cover}
.banner__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:var(--s-5);
  background:linear-gradient(180deg,transparent,rgba(7,10,18,.92));
  color:var(--d-text);
}
@media (max-width:40rem){.banner{aspect-ratio:3/2}}

/* --- Feature list --------------------------------------------------------- */
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-3)}
.ticks li{position:relative;padding-left:1.85rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.55em;width:.75rem;height:.75rem;
  border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--aqua));
}
.crosses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-3)}
.crosses li{position:relative;padding-left:1.85rem;color:var(--d-muted)}
.band-light .crosses li,.band-ivory .crosses li{color:var(--l-muted)}
.crosses li::before{
  content:"";position:absolute;left:.15rem;top:.62em;width:.85rem;height:2px;
  background:var(--coral);border-radius:2px;
}

/* --- Glow Index slider ---------------------------------------------------- */
.gi{display:grid;gap:var(--s-6)}
@media (min-width:56rem){.gi{grid-template-columns:minmax(0,20rem) 1fr;align-items:start}}
.gi__control{display:flex;flex-direction:column;gap:var(--s-4)}
.gi__range{width:100%;accent-color:var(--aqua);min-height:44px}
.gi__ticks{display:flex;justify-content:space-between;font-size:var(--step--1);color:var(--d-muted)}
/* This panel paints its own dark background, so it MUST paint its own text
   colour too. It sits inside a light band on the home page; without this it
   inherited near-black body text onto a near-black panel and the content was
   invisible. Same rule as the bands: whoever sets a background sets the text. */
.gi__panel{
  background:var(--d-surface);color:var(--d-text);
  border:1px solid var(--d-line);
  border-radius:var(--radius-lg);padding:clamp(1.25rem,3vw,2rem);
}
.gi__panel .muted,
.band-light .gi__panel .muted,
.band-ivory .gi__panel .muted{color:var(--d-muted)}
.gi__panel .gi__level{color:var(--aqua)}
.gi__panel h3,.gi__panel h4{color:var(--d-text)}

/* The same mistake in three more places: --d-muted is a pale grey meant for
   dark grounds. These elements sit on light bands, where it fails contrast.
   The .gi__panel rule below must stay AFTER the band rules — equal
   specificity, so source order decides, and inside the dark panel the pale
   grey is the correct choice. */
.band-light .gi__ticks,.band-ivory .gi__ticks,
.band-light .gi__label,.band-ivory .gi__label,
.band-light .funnel__btn p,.band-ivory .funnel__btn p{color:var(--l-muted)}
.gi__panel .gi__label{color:var(--d-muted)}
.gi__level{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--aqua)}
.gi__grid{display:grid;gap:var(--s-5);margin-top:var(--s-5)}
@media (min-width:40rem){.gi__grid{grid-template-columns:1fr 1fr}}
.gi__label{font-size:var(--step--1);font-weight:660;letter-spacing:.09em;
  text-transform:uppercase;color:var(--d-muted);margin-bottom:var(--s-2)}
.gi__steps{display:flex;gap:.35rem;margin-top:var(--s-3)}
.gi__step{height:5px;flex:1;border-radius:99px;background:rgba(255,255,255,.14)}
.gi__step.on{background:linear-gradient(90deg,var(--violet),var(--aqua))}

/* --- Funnel diagram ------------------------------------------------------- */
.funnel{display:grid;gap:var(--s-6)}
@media (min-width:56rem){.funnel{grid-template-columns:1.1fr .9fr;align-items:center}}
.funnel svg{width:100%;height:auto}
.funnel__stage{cursor:pointer}
.funnel__stage rect{transition:opacity .2s var(--ease)}
.funnel__stage:hover rect,.funnel__stage[aria-selected="true"] rect{opacity:1}
.funnel__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.funnel__btn{
  width:100%;text-align:left;background:transparent;border:1px solid var(--d-line);
  border-radius:12px;padding:var(--s-4);cursor:pointer;color:inherit;
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.funnel__btn:hover{border-color:var(--d-line-2)}
.funnel__btn[aria-expanded="true"]{border-color:var(--aqua);background:rgba(76,225,212,.07)}
.funnel__btn h4{margin-bottom:.15rem}
.funnel__btn p{font-size:var(--step--1);color:var(--d-muted)}

/* --- Accordion ------------------------------------------------------------ */
.acc{border-top:1px solid var(--l-line)}
.band-dark .acc,.band-deep .acc{border-color:var(--d-line)}
.acc details{border-bottom:1px solid var(--l-line)}
.band-dark .acc details,.band-deep .acc details{border-color:var(--d-line)}
.acc summary{
  cursor:pointer;list-style:none;padding:var(--s-5) 2.5rem var(--s-5) 0;
  position:relative;font-weight:640;font-size:var(--step-1);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";position:absolute;right:.5rem;top:50%;width:.7rem;height:.7rem;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease);
}
.acc details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.acc .acc__body{padding-bottom:var(--s-5);max-width:var(--measure)}

/* --- Media ---------------------------------------------------------------- */
.figure{
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--d-line);background:var(--d-surface);
}
.figure img,.figure video{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.figure--square img,.figure--square video{aspect-ratio:1/1}
.figure figcaption{padding:var(--s-3) var(--s-4);font-size:var(--step--1);color:var(--d-muted)}

.illus-note{
  display:inline-block;font-size:var(--step--1);font-weight:640;
  letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,191,102,.16);color:var(--gold);
  border:1px solid rgba(255,191,102,.4);
  padding:.25rem .6rem;border-radius:999px;
}
.band-light .illus-note,.band-ivory .illus-note{
  background:rgba(138,90,11,.10);color:#8A5A0B;border-color:rgba(138,90,11,.35);
}

/* --- Forms ---------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-size:var(--step--1);font-weight:620}
.field .hint{font-size:var(--step--1);color:var(--d-muted)}
.band-light .field .hint{color:var(--l-muted)}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:.7rem .9rem;
  background:var(--d-bg);color:var(--d-text);
  border:1px solid var(--d-line-2);border-radius:10px;
}
.band-light .field input,.band-light .field select,.band-light .field textarea{
  background:var(--l-surface);color:var(--l-text);border-color:var(--l-line-2);
}
.field textarea{min-height:8rem;resize:vertical}
.checks{display:grid;gap:var(--s-2);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.check{display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .85rem;
  border:1px solid var(--l-line);border-radius:10px;cursor:pointer}
.band-dark .check{border-color:var(--d-line)}
.check input{margin-top:.28rem;width:1.05rem;height:1.05rem;accent-color:var(--violet-ink);flex:none}

/* --- Footer --------------------------------------------------------------- */
.site-foot{background:var(--ink);color:var(--d-muted);border-top:1px solid var(--d-line);
  padding-block:var(--s-7) var(--s-6);font-size:var(--step--1)}
.foot-grid{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.foot-grid h4{font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ivory);margin-bottom:var(--s-3)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{color:var(--ivory);text-decoration:underline}
.foot-legal{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--d-line);
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);justify-content:space-between}
.site-foot a{color:var(--d-muted)}
.site-foot .foot-legal a{color:var(--ivory)}

/* --- Consent bar ---------------------------------------------------------- */
.consent{
  position:fixed;inset:auto 0 0 0;z-index:80;
  background:var(--d-raised);border-top:1px solid var(--d-line-2);
  padding:var(--s-4) 1.25rem;color:var(--d-text);
}
.consent__in{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;
  justify-content:space-between;width:min(100% - 0rem,var(--shell));margin-inline:auto}
.consent p{font-size:var(--step--1);max-width:52ch;color:var(--d-muted)}
.consent .btn{min-height:44px;padding:.6rem 1.15rem;font-size:var(--step--1)}

/* --- Motion --------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* Without JS every reveal must still be visible. */
.no-js .reveal{opacity:1;transform:none}

/* --- Utilities ------------------------------------------------------------ */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.center{text-align:center;margin-inline:auto}
.center .lede{margin-inline:auto}
.prose > * + *{margin-top:var(--s-4)}
.prose h2{margin-top:var(--s-7)}
.prose h3{margin-top:var(--s-6)}
.prose ul,.prose ol{padding-left:1.3rem;display:flex;flex-direction:column;gap:.5rem}
.prose a{color:var(--violet-ink);text-underline-offset:.18em}
.band-dark .prose a,.band-deep .prose a{color:var(--aqua)}
.divider{height:1px;background:var(--d-line);border:0;margin:0}

/* --- Hero motion ---------------------------------------------------------- */
/* The poster <img> and the JS-injected <video> occupy the same box. The video
   fades in on canplay so there is no flash of empty space if it stalls, and if
   JS never runs or motion is reduced the poster simply stays. */
.hero__media{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__media img,.hero__media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero__media video{opacity:0;transition:opacity .8s var(--ease)}
.hero__media.is-playing video{opacity:1}
.hero__media.is-playing img{opacity:0;transition:opacity .8s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .hero__media video{display:none}
  .hero__media img{opacity:.42!important}
}