/* Content strategy v3 shell. Same look as content-page-v2.html (the four-tab draft), carried
   into a Jonny-rulebook-style multi-page shape: one area, one URL, an area nav instead of tabs.
   Edit this file, then run build.mjs. Do not hand-edit the generated copies under public/. */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:clamp(16px, calc(0.5rem + 100vw / 160), 32px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--u-color-ground-paper);color:var(--u-color-ink-primary);
  font-family:var(--u-font-text);font-size:1rem;line-height:1.45;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,li{margin:0}
ul,ol{list-style:none;padding:0;margin:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:var(--u-line-edge) solid var(--u-color-signal-primary);outline-offset:2px}
a{color:inherit}
button{font:inherit}

:root{
  --bg:var(--u-color-ground-paper);
  --bg-raised:var(--u-color-ground-paper-raised);
  --flood:var(--u-color-ground-flood);
  --ink:var(--u-color-ink-primary);
  --ink-2:var(--u-color-ink-secondary);
  --ink-3:var(--u-color-ink-faint);
  --ink-inv:var(--u-color-ink-inverse);
  --ink-inv-2:var(--u-color-ink-inverse-secondary);
  --rule:var(--u-color-rule-paper);
  --rule-flood:var(--u-color-rule-flood);
  --signal:var(--u-color-signal-primary);
  --signal-ink:var(--u-color-signal-primary-ink);
  --rec:var(--u-color-signal-secondary);
  --flood-accent:var(--u-color-signal-tertiary);
  --wait:var(--u-color-person-b);
  --display:var(--u-font-display);
  --text:var(--u-font-text);
}

.i{width:1.1em;height:1.1em;flex:none;stroke:currentColor;fill:none;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}

.wrap{max-width:var(--u-measure-document);margin:0 auto;padding-inline:max(20px,3vw)}

/* masthead ---------------------------------------------------------------- */
.mast{display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem 1.5rem;
  padding-block:1.3rem 1rem;border-bottom:var(--u-line-edge) solid var(--ink)}
.wordmark-link{display:inline-flex;align-items:center;line-height:0;text-decoration:none;min-height:44px}
.wordmark{height:1.3rem;width:auto}
.mast__meta{margin-left:auto;display:flex;flex-wrap:wrap;gap:0.3rem 1.2rem;
  font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}

/* area nav, replaces the old four-tab switcher ---------------------------- */
.arean{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:var(--u-line-edge) solid var(--rule);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-padding-inline:20px}
.arean__list{display:flex;min-width:max-content}
.arean__item{all:unset;cursor:pointer;display:flex;align-items:center;gap:0.5rem;min-height:3.2rem;
  padding:0.55rem 1rem;white-space:nowrap;color:var(--ink-3);text-decoration:none;
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:0.02em;
  font-size:0.86rem;border-bottom:3px solid transparent;line-height:1.1}
.arean__n{font-family:var(--display);font-weight:900;font-size:0.84rem;color:var(--ink-3)}
.arean__item:hover{color:var(--ink)}
.arean__item[aria-current="page"]{color:var(--ink);border-bottom-color:var(--signal);background:var(--bg-raised)}
.arean__item[aria-current="page"] .arean__n{color:var(--signal)}
@media (min-width:56rem){.arean__list{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));min-width:0}
  .arean__item{justify-content:center;padding-inline:0.3rem;gap:0.35rem;font-size:0.8rem}}
@media (max-width:56rem){.arean{-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}}

/* head band ---------------------------------------------------------------- */
.band{background:var(--flood);color:var(--ink-inv);padding:1.5rem max(20px,3vw) 1.6rem;margin-top:1.3rem}
.band__eyebrow{display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;
  letter-spacing:0.14em;text-transform:uppercase;font-weight:700;color:var(--ink-inv-2);margin-bottom:0.6rem}
.band__eyebrow::before{content:"";width:0.55rem;height:0.55rem;background:var(--signal);flex:none}
.band__claim{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.8rem,4.2vw,2.9rem);line-height:1.02;max-inline-size:38ch}
.band__row{display:flex;flex-wrap:wrap;align-items:center;gap:0.9rem;margin-top:1.1rem}
.jump{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:0.5rem;min-height:2.75rem;
  padding:0.5rem 1rem;background:var(--ink-inv);color:var(--ink);font-family:var(--display);
  font-weight:800;text-transform:uppercase;letter-spacing:0.03em;font-size:1rem;
  white-space:nowrap;text-decoration:none}
@media (hover:hover){.jump:hover{background:var(--flood-accent)}}
.jump .i{width:1em;height:1em}
.jump:focus-visible{outline:var(--u-line-edge) solid var(--flood-accent);outline-offset:3px}

/* page body ---------------------------------------------------------------- */
main.wrap{padding-block:1.8rem 3.5rem;display:grid;gap:2rem}
.phead{border-bottom:2px solid var(--ink);padding-bottom:0.7rem;display:flex;gap:0.6rem;align-items:flex-start}
.phead__mark{width:0.7rem;height:0.7rem;background:var(--signal);flex:none;margin-top:0.45rem}
.phead h2{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.phead p{margin-top:0.35rem;font-size:1rem;color:var(--ink-2);max-inline-size:58ch;line-height:1.45}

.h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.1rem;
  line-height:1.1;margin-bottom:0.7rem}

/* flow (weekly video step 1) ------------------------------------------------ */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--rule-flood);border:1px solid var(--rule-flood)}
@media (min-width:40rem){.flow--six{grid-template-columns:repeat(3,1fr)}}
.flow__step{background:var(--flood);color:var(--ink-inv);padding:1rem 1.1rem 1.15rem;
  display:flex;flex-direction:column;gap:0.5rem}
.flow__top{display:flex;align-items:center;gap:0.5rem}
.flow__n{font-family:var(--display);font-weight:900;font-size:1.3rem;line-height:1;color:var(--flood-accent)}
.flow__t{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.05rem;line-height:1.1}
.flow__d{font-size:0.92rem;line-height:1.4;color:var(--ink-inv-2)}

/* two-up cards (format week, bios, sources) --------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}
.card{border:1px solid var(--rule);background:var(--bg);padding:1.05rem 1.15rem 1.15rem;
  display:flex;flex-direction:column;gap:0.55rem}
.card__top{display:flex;align-items:center;justify-content:space-between;gap:0.55rem;flex-wrap:wrap}
.card__lead{display:flex;align-items:center;gap:0.55rem}
.card__lead .i{color:var(--signal)}
.card__t{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.12rem;line-height:1.1}
.card__tag{display:inline-flex;align-items:center;gap:0.3rem;font-size:0.74rem;font-weight:800;
  text-transform:uppercase;letter-spacing:0.05em;color:var(--rec);border:1px solid var(--rec);
  padding:0.15rem 0.5rem}
.card__body{font-size:0.96rem;color:var(--ink-2);line-height:1.4}
.card__ex{font-size:0.9rem;color:var(--ink-2);line-height:1.4;border-left:2px solid var(--rule);padding-left:0.65rem}
.card__ex b{font-weight:700;color:var(--ink-3);font-size:0.76rem;text-transform:uppercase;
  letter-spacing:0.04em;display:block;margin-bottom:0.15rem}
.card__like{font-size:0.85rem;color:var(--ink-3)}
.card__btn{all:unset;cursor:pointer;margin-top:0.1rem;display:inline-flex;align-items:center;gap:0.4rem;
  min-height:2.75rem;font-weight:700;font-size:0.88rem;color:var(--ink-2);text-decoration:underline;
  text-underline-offset:2px;white-space:nowrap}
.card__btn .i{width:1em;height:1em}

/* one-line merged rule block --------------------------------------------- */
.ruleline{border:1px solid var(--rule);background:var(--bg);padding:0.9rem 1.1rem 1rem;
  display:flex;flex-direction:column;gap:0.3rem}
.ruleline .h3{margin-bottom:0.2rem}
.ruleline p{font-size:0.95rem;color:var(--ink-2);line-height:1.45}

/* tiles ---------------------------------------------------------------- */
.tileblock{background:var(--bg-raised);padding:1rem 1.1rem 1.1rem}
.tileblock .h3{margin-bottom:0.3rem}
.tileblock__lead{font-size:0.94rem;color:var(--ink-2);margin-bottom:0.8rem;line-height:1.4}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.tile{background:var(--bg);padding:0.95rem 1.1rem 1.05rem;display:flex;flex-direction:column;gap:0.25rem}
.tile__l{font-size:0.8rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.tile__v{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,5vw,3.6rem);line-height:0.95}
.tile__d{font-size:0.88rem;color:var(--ink-2);line-height:1.4}

/* sources strip (kept, unused on page 3 since the brief moved it to /sources/) */
.srcstrip{background:var(--bg-raised);padding:0.95rem 1.1rem;display:flex;flex-wrap:wrap;
  align-items:center;gap:0.9rem 1.6rem;margin-top:0.6rem}
.srcstrip__c{display:flex;align-items:baseline;gap:0.4rem}
.srcstrip__n{font-family:var(--display);font-weight:900;font-size:1.25rem;line-height:1}
.srcstrip__k{font-size:0.86rem;color:var(--ink-2)}
.srcstrip__btn{all:unset;cursor:pointer;margin-left:auto;display:inline-flex;align-items:center;gap:0.45rem;
  min-height:2.75rem;padding:0.5rem 0.95rem;background:var(--ink);color:var(--bg);font-weight:700;
  font-size:0.9rem;white-space:nowrap;text-decoration:none}
.srcstrip__btn .i{width:1em;height:1em}
@media (hover:hover){.srcstrip__btn:hover{background:var(--signal)}}

/* days (first week) ---------------------------------------------------------------- */
.days{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.day{background:var(--bg);padding:0.8rem 0.95rem;display:grid;
  grid-template-columns:5.5rem minmax(0,1fr) auto;gap:0.7rem;align-items:center}
.day__d{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:0.98rem}
.day__w{font-size:0.96rem;line-height:1.4}
.day__tag{display:inline-flex;align-items:center;gap:0.3rem;font-size:0.76rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-3);white-space:nowrap}
.day__tag .i{width:0.95em;height:0.95em}
.inlink{all:unset;cursor:pointer;color:var(--signal);font-weight:700;text-decoration:underline;
  text-underline-offset:2px}
@media (max-width:620px){.day{grid-template-columns:4rem minmax(0,1fr)}
  .day__tag{grid-column:2;margin-top:0.2rem}}

/* bios page ---------------------------------------------------------------- */
.bios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem}
@media (max-width:48rem){.bios{grid-template-columns:1fr;gap:2.4rem}}
.bios__col{display:flex;flex-direction:column;gap:1rem;min-width:0}
.bios__head{display:flex;align-items:baseline;gap:0.6rem;flex-wrap:wrap;border-bottom:1px solid var(--rule);
  padding-bottom:0.6rem}
.bios__head .i{color:var(--signal)}
.bios__chan{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.1rem;line-height:1}
.bios__handle{font-size:0.86rem;color:var(--ink-3)}
.bios__name{font-size:0.92rem;color:var(--ink-2);line-height:1.4}
.bio-card{border:1px solid var(--rule);background:var(--bg);padding:0.95rem 1.05rem 1.05rem;
  display:flex;flex-direction:column;gap:0.55rem;min-width:0}
.bio-card--rec{border-color:var(--rec);background:color-mix(in oklab,var(--rec),transparent 95%)}
.bio-card__top{display:flex;align-items:center;justify-content:space-between;gap:0.5rem}
.bio-card__badge{display:inline-flex;align-items:center;gap:0.3rem;font-size:0.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:0.05em;color:var(--rec)}
.bio-card__badge .i{width:0.95em;height:0.95em}
.prev{background:var(--bg-raised);border:1px solid var(--rule);padding:0.75rem 0.85rem;
  display:flex;flex-direction:column;gap:0.3rem;font-size:0.95rem;line-height:1.45;overflow-wrap:break-word}
.prev__bio{color:var(--ink)}
.prev__link{color:var(--rec);font-weight:700;display:flex;align-items:center;gap:0.4rem}
.prev__link .i{width:0.95em;height:0.95em}
.copybtn{all:unset;cursor:pointer;align-self:flex-start;display:inline-flex;align-items:center;gap:0.4rem;
  min-height:2.75rem;padding:0.4rem 0.85rem;border:1px solid var(--rule);font-weight:700;font-size:0.86rem}
.copybtn .i{width:1em;height:1em}
.copybtn.is-copied{border-color:var(--rec);color:var(--rec)}
@media (hover:hover){.copybtn:hover{border-color:var(--ink)}}

.refs{border-top:1px solid var(--rule);padding-top:0.6rem;display:flex;flex-direction:column;gap:0.45rem}
.refs__l{display:flex;align-items:center;gap:0.4rem;font-size:0.76rem;font-weight:800;text-transform:uppercase;
  letter-spacing:0.05em;color:var(--ink-3)}
.refs__l .i{width:0.9em;height:0.9em;color:var(--signal)}
.refs ul{display:grid;gap:0.55rem}
.refs li{display:flex;flex-direction:column;gap:0.1rem;font-size:0.9rem;line-height:1.35}
.refs a{font-weight:700;color:var(--ink);text-underline-offset:2px;overflow-wrap:break-word;min-height:1.5rem}
@media (hover:hover){.refs a:hover{color:var(--signal)}}
.refs span{font-size:0.8rem;color:var(--ink-3)}
.refs__note{font-size:0.95rem;color:var(--ink-2);line-height:1.45;max-inline-size:62ch;border-left:3px solid var(--signal);padding-left:0.8rem}
.why{display:grid;gap:0.4rem}
.why li{display:flex;gap:0.5rem;align-items:flex-start;font-size:0.92rem;color:var(--ink-2);line-height:1.4}
.why .i{color:var(--rec);margin-top:0.2em;flex:none}
.swaps{display:flex;flex-direction:column;gap:0.45rem}
.swap{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;font-size:0.92rem;line-height:1.35}
.swap s{color:var(--ink-3)}
.swap .i{width:0.95em;height:0.95em;color:var(--ink-3)}
.swap span{font-weight:700}
.story .prev{gap:0.6rem}
.story{border-left:3px solid var(--rec);padding:0.2rem 0 0.2rem 1rem;display:flex;flex-direction:column;gap:0.55rem}
.story__l{font-size:0.76rem;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-3)}
.story__why{font-size:0.92rem;color:var(--ink-2);line-height:1.4}

.chiprows{display:flex;flex-direction:column;gap:0.55rem;margin-top:0.2rem}
.chiprow{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem}
.chiprow__l{font-size:0.76rem;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;
  color:var(--ink-3);flex:0 0 auto;min-width:5.6rem}
.chip{display:inline-flex;align-items:center;gap:0.4rem;min-height:2.3rem;padding:0.32rem 0.7rem;
  border:1px solid var(--rule);font-size:0.84rem;font-weight:600}
.chip--in{border-color:var(--rec);background:color-mix(in oklab,var(--rec),transparent 92%)}
.chip--out{border-color:var(--signal);background:color-mix(in oklab,var(--signal),transparent 93%)}
.chip--in .i{color:var(--rec)}
.chip--out .i{color:var(--signal)}

/* decisions page, full-width rows, no span hacks ---------------------------- */
.decisions{display:flex;flex-direction:column;gap:1.1rem}
.decision{border:1px solid var(--rule);background:var(--bg);padding:1.1rem 1.2rem 1.25rem;
  display:flex;flex-direction:column;gap:0.65rem}
.decision:nth-child(even){background:var(--bg-raised)}
.decision__top{display:flex;align-items:center;gap:0.55rem}
.decision__top .i{color:var(--signal)}
.decision__t{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.14rem;line-height:1.1}
.decision__q{font-size:1rem;color:var(--ink-2);line-height:1.42;max-inline-size:62ch}
.decision__body{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:flex-start}
.pick{flex:1 1 280px;min-width:0;border-left:3px solid var(--rec);
  background:color-mix(in oklab,var(--rec),transparent 94%);padding:0.7rem 0.9rem 0.8rem}
.pick--plain{border-left-color:var(--ink-3);background:transparent;border:1px dashed var(--rule);
  padding:0.65rem 0.85rem 0.75rem}
.pick__badge{display:inline-flex;align-items:center;gap:0.3rem;font-size:0.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:0.05em;color:var(--rec);margin-bottom:0.25rem}
.pick__badge .i{width:0.95em;height:0.95em}
.pick__l{font-weight:700;font-size:1.02rem;line-height:1.3}
.pick__d{font-size:0.92rem;color:var(--ink-2);line-height:1.4;margin-top:0.2rem}
.orline{flex:1 1 220px;min-width:0;font-size:0.95rem;color:var(--ink-2);line-height:1.42;padding-top:0.15rem}
.orline b{color:var(--ink);font-weight:700}
.decision__by{display:block;font-size:0.8rem;color:var(--ink-3);margin-top:0.35rem}

/* questions, simple vertical list, never overflows -------------------------- */
.qs{display:flex;flex-direction:column;gap:0.65rem;margin-top:0.2rem}
.qs li{display:flex;gap:0.55rem;align-items:flex-start;font-size:0.98rem;line-height:1.4}
.qs li .i{color:var(--ink-3);margin-top:0.2em}

/* dialogs ---------------------------------------------------------------- */
dialog{border:2px solid var(--ink);background:var(--bg);color:var(--ink);padding:1.1rem 1.2rem;
  width:min(30rem,92vw);max-height:85vh;overflow-y:auto;display:none}
dialog[open]{display:grid;gap:0.85rem}
dialog::backdrop{background:rgba(25,21,18,0.6)}
.dhead{display:flex;justify-content:space-between;align-items:center;gap:0.6rem}
.dhead h3{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:1.2rem;line-height:1.1}
.dx{all:unset;cursor:pointer;display:grid;place-items:center;width:2.75rem;height:2.75rem;color:var(--ink-3);flex:none}
.dx:hover{color:var(--signal)}
dialog p{font-size:0.95rem;color:var(--ink-2);line-height:1.45}
dialog ul{display:grid;gap:0.55rem}
dialog li{display:flex;gap:0.5rem;align-items:flex-start;font-size:0.94rem;color:var(--ink-2);line-height:1.4}
dialog li .i{color:var(--signal);margin-top:0.2em}
dialog h4{font-size:0.8rem;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-3);
  margin-top:0.3rem}

/* sources page extras ------------------------------------------------------- */
.src__note{font-size:0.95rem;color:var(--ink-2);line-height:1.45;max-inline-size:60ch}
.chan__h{font-size:0.86rem;color:var(--ink-3)}
.chan__l{display:grid;gap:0.45rem}
.chan__l li{display:flex;gap:0.5rem;align-items:flex-start;font-size:0.93rem;color:var(--ink-2);line-height:1.4}
.chan__l .i{color:var(--signal);margin-top:0.2em;flex:none}
.agree{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}

/* next area link, closes every page ----------------------------------------- */
.next{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-top:0.4rem;
  padding:1.2rem max(20px,3vw) 1.3rem;background:var(--flood);color:var(--ink-inv);text-decoration:none}
.next__col{display:flex;flex-direction:column;gap:0.3rem}
.next__label{font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;color:var(--ink-inv-2)}
.next__t{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(1.5rem,3.6vw,2.2rem);line-height:1}
.next__i{width:1.6rem;height:1.6rem;color:var(--flood-accent)}
@media (hover:hover){.next:hover{background:var(--signal)}.next:hover .next__label,.next:hover .next__i{color:var(--ink-inv)}}
.next:focus-visible{outline:var(--u-line-edge) solid var(--flood-accent);outline-offset:3px}

/* footer --------------------------------------------------------------------- */
.pagefoot{padding-block:1.2rem 3rem;color:var(--ink-3);font-size:0.84rem;display:flex;flex-wrap:wrap;gap:0.3rem 1.5rem}
.pagefoot a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:2px}

.arean__item:focus-visible,.card__btn:focus-visible,.dx:focus-visible,.copybtn:focus-visible,
.srcstrip__btn:focus-visible,.inlink:focus-visible{outline:var(--u-line-edge) solid var(--signal);outline-offset:2px}

.prev__more{font-size:0.74rem;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-3);border-top:1px dashed var(--rule);padding-top:0.5rem;margin-top:0.2rem}

/* clips tabs and video overview (area 4) ----------------------------------------- */
.cl-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--u-line-edge) solid var(--rule)}
.cl-tab{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5rem;min-height:3.2rem;
  padding:0.55rem 0.5rem;color:var(--ink-2);font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:0.02em;font-size:0.86rem;line-height:1.1;border-bottom:3px solid transparent;text-align:center}
.cl-tab:hover{color:var(--ink)}
.cl-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--signal);background:var(--bg-raised)}
.cl-tabs--six{grid-template-columns:repeat(3,1fr)}
@media (min-width:48rem){.cl-tabs--six{grid-template-columns:repeat(6,1fr)}}
.cl-tab__n{font-family:var(--display);font-weight:900;font-size:0.84rem;color:var(--signal)}
.cl-panel{display:grid;gap:1.4rem;min-width:0}
.cl-panel:focus-visible{outline-offset:4px}
.cl-link{display:inline-flex;align-items:center;gap:0.4rem;min-height:2.75rem;font-weight:700;color:var(--signal);
  text-decoration:underline;text-underline-offset:2px}
.cl-link .i{width:1em;height:1em}

@media (max-width:47.99rem){
  .cl-panel--videos{margin-inline:calc(-1 * (max(20px,3vw) - 16px));padding-inline:16px}
}
.cl-panel--videos{overflow-x:clip;gap:1rem}
.cl-intro{font-size:1rem;color:var(--ink-2);max-inline-size:58ch;line-height:1.45}
.cl-how ol{display:grid;gap:0.45rem;counter-reset:clh;max-inline-size:58ch}
.cl-how li{counter-increment:clh;display:flex;gap:0.6rem;align-items:flex-start;font-size:0.96rem;color:var(--ink-2);line-height:1.4}
.cl-how li::before{content:counter(clh);font-family:var(--display);font-weight:900;color:var(--signal);flex:none;min-width:1ch}
.cl-legend{border:1px solid var(--rule);background:var(--bg)}
.cl-legend summary{cursor:pointer;min-height:2.75rem;display:flex;align-items:center;padding:0 0.9rem;
  font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:0.86rem;letter-spacing:0.02em}
.cl-legend ul{display:grid;gap:0.4rem;padding:0.2rem 0.9rem 0.9rem}
.cl-legend li{font-size:0.9rem;color:var(--ink-2);line-height:1.4}
.cl-legend b{color:var(--ink)}

.cl-filters{display:flex;gap:0.4rem;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:0.2rem;
  -webkit-overflow-scrolling:touch}
@media (max-width:56rem){.cl-filters{-webkit-mask-image:linear-gradient(to right,#000 90%,transparent);mask-image:linear-gradient(to right,#000 90%,transparent)}}
.cl-f{all:unset;cursor:pointer;box-sizing:border-box;flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;
  min-height:2.75rem;padding:0 0.9rem;border:1px solid var(--rule);border-bottom-width:1px;color:var(--ink-2);
  font-size:0.84rem;font-weight:700;white-space:nowrap}
.cl-f[aria-pressed="true"]{border-color:var(--signal);border-bottom-width:3px;background:var(--bg-raised);color:var(--ink)}
.cl-empty{display:grid;gap:0.5rem;justify-items:start;padding:1rem;border:1px dashed var(--rule)}
.cl-empty p{color:var(--ink-2);font-size:0.95rem}

.cl-grid{align-items:start;display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem;padding-bottom:1rem}
@media (min-width:48rem){.cl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cl-card{border:1px solid var(--rule);background:var(--bg);padding:0.9rem;display:grid;gap:0.8rem;align-content:start;min-width:0}
.cl-card__head{display:flex;gap:0.6rem;align-items:baseline}
.cl-card__n{font-family:var(--display);font-weight:900;color:var(--signal);font-size:1.3rem;line-height:1}
.cl-card__t{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.05rem;line-height:1.1;text-wrap:balance}
.cl-card__body{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:0.8rem;align-items:start}
.cl-card__body.is-nomain{grid-template-columns:minmax(0,1fr)}
.cl-card__body.is-novars{grid-template-columns:minmax(0,12rem)}
@media (max-width:20.5rem){.cl-card__body{grid-template-columns:minmax(0,1fr)}.cl-main{max-width:12rem}}
@media (min-width:48rem){.cl-card__body:not(.is-nomain):not(.is-novars){grid-template-columns:minmax(0,11rem) minmax(0,1fr)}}

.cl-main{position:relative}
.cl-poster{all:unset;box-sizing:border-box;display:block;position:relative;width:100%;aspect-ratio:9/16;
  background:var(--bg-raised);cursor:pointer;overflow:hidden}
.cl-poster img,.cl-var__th{width:100%;height:100%;object-fit:cover;background:var(--bg-raised);color:transparent;font-size:0}
.cl-poster img[hidden],.cl-var__th[hidden]{display:block;visibility:hidden}
.cl-poster__play{position:absolute;inset:0;margin:auto;width:2.75rem;height:2.75rem;display:grid;place-items:center;
  background:color-mix(in oklab,var(--ink),transparent 22%);color:var(--ink-inv)}
.cl-poster__meta{position:absolute;left:0;bottom:0;padding:0.2rem 0.5rem;font-size:0.84rem;font-weight:700;
  background:color-mix(in oklab,var(--ink),transparent 20%);color:var(--ink-inv)}
.cl-main.is-picked .cl-poster{outline:3px solid var(--rec);outline-offset:-3px}
.cl-pick{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;width:2.75rem;height:2.75rem;
  background:color-mix(in oklab,var(--ink),transparent 30%);border:2px solid var(--ink-inv);color:var(--ink-inv)}
.cl-main .cl-pick{position:absolute;top:0.4rem;bottom:auto;right:0.4rem}
.cl-pick[aria-pressed="true"]{background:var(--rec);border-color:var(--rec);color:var(--ink-inv)}

.cl-vars{display:grid;gap:0.4rem;align-content:start;min-width:0}
.cl-card__body.is-nomain .cl-vars{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
.cl-var{display:grid;grid-template-columns:minmax(0,1fr) 2.75rem;border:1px solid var(--rule);min-height:2.75rem;align-items:stretch;min-width:0}
.cl-var__open{all:unset;box-sizing:border-box;display:grid;grid-template-columns:1.9rem minmax(0,1fr);column-gap:0.55rem;row-gap:0;
  align-items:center;padding:0.2rem 0.5rem;cursor:pointer;min-width:0}
.cl-var__th{width:1.9rem;height:auto;aspect-ratio:9/16;grid-row:1/3}
.cl-var__open .cl-var__l{grid-column:2;grid-row:1;align-self:end;white-space:nowrap}
.cl-var__open .cl-var__s{grid-column:2;grid-row:2;align-self:start}
@media (max-width:30rem){.cl-var__th{display:none}.cl-var__open{grid-template-columns:minmax(0,1fr)}.cl-var__open .cl-var__l,.cl-var__open .cl-var__s{grid-column:1}}
.cl-var__l{font-size:0.84rem;font-weight:700;color:var(--ink);line-height:1.2}
.cl-var__s{font-size:0.84rem;color:var(--ink-2)}
.cl-pick--chip{width:auto;height:auto;border:0;border-left:1px solid var(--rule);background:transparent;color:var(--ink-2)}
.cl-var.is-picked{border-left:2px solid var(--rec);background:color-mix(in oklab,var(--rec),transparent 92%)}
.cl-var.is-picked .cl-pick--chip{border-left-color:var(--rec)}
.cl-pick--chip[aria-pressed="true"]{background:var(--rec);color:var(--ink-inv)}

.cl-bar{position:sticky;bottom:0;z-index:5;border-top:1px solid var(--flood-accent);box-shadow:0 -6px 16px color-mix(in oklab,var(--ink),transparent 80%);margin-inline:-16px;background:var(--flood);color:var(--ink-inv);
  padding:0.6rem 16px calc(0.6rem + env(safe-area-inset-bottom));display:flex;align-items:center;
  justify-content:space-between;gap:0.8rem}
@media (min-width:48rem){.cl-bar{margin-inline:0;padding-inline:1.1rem}}
.cl-bar__n{display:flex;align-items:baseline;gap:0.4rem;font-size:0.9rem;color:var(--ink-inv)}
.cl-bar__n b{font-family:var(--display);font-weight:900;font-size:1.3rem;color:var(--flood-accent)}
.cl-bar__btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:0.5rem;min-height:2.75rem;
  padding:0.5rem 1rem;background:var(--ink-inv);color:var(--ink);font-family:var(--display);font-weight:800;
  text-transform:uppercase;letter-spacing:0.03em;font-size:0.95rem;white-space:nowrap}
.cl-bar__btn:disabled{opacity:0.6;cursor:not-allowed;box-shadow:inset 0 0 0 2px var(--flood-accent)}
body:has(dialog[open]) .cl-bar{visibility:hidden}
.cl-dlg::backdrop{background:color-mix(in oklab,var(--ink),transparent 40%)}
.cl-bar{transition:transform 180ms ease-out,visibility 180ms}
.cl-bar:not(.is-on){transform:translateY(100%);visibility:hidden}
@media (prefers-reduced-motion:reduce){.cl-bar{transition:none}}
.cl-panel--videos{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom))}
.cl-legend{margin-block:0.25rem 0.75rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cl-flip{transform:scaleX(-1)}
.cl-bar__btn.is-copied{background:transparent;color:var(--flood-accent);box-shadow:inset 0 0 0 2px var(--flood-accent)}
.cl-fallback{display:grid;gap:0.4rem}
.cl-fallback p{font-size:0.9rem;color:var(--ink-2)}
.cl-fallback textarea{width:100%;font:inherit;font-size:0.88rem;padding:0.5rem;border:1px solid var(--rule);background:var(--bg);color:var(--ink)}

/* player dialog */
.cl-dlg{padding:0.7rem;gap:0.6rem;width:min(26rem,calc(100vw - 1.5rem));max-height:calc(100dvh - 1rem);margin:auto;border-width:2px;overflow:hidden;padding-bottom:calc(0.7rem + env(safe-area-inset-bottom));
  flex-direction:column}
.cl-dlg[open]{display:flex}
.cl-dlg>*{flex:none}
.cl-dlg>.cl-stage{flex:1 1 auto;min-height:0;display:flex;justify-content:center;width:100%}
.cl-dlg>.cl-stage{width:auto;max-width:100%;align-self:center}
@media (max-width:30rem){.cl-dlg>.cl-stage{width:100%}}
.cl-dlg--wide{width:min(46rem,calc(100vw - 1.5rem))}
.cl-dlg[open]{animation:cl-fade 120ms ease-out}
@keyframes cl-fade{from{opacity:0}to{opacity:1}}
:root{--cl-stage:color-mix(in oklab,var(--ink),black 30%)} /* a video stage stays near black */
.cl-stage{position:relative;background:var(--cl-stage)}
.cl-video{display:block;width:100%;aspect-ratio:var(--cl-ar,9/16);max-height:calc(100dvh - 16rem);width:auto;max-width:100%;margin-inline:auto;object-fit:contain;background:var(--cl-stage)}
.cl-dlg--wide .cl-video{width:100%}
.cl-stage__load{position:absolute;inset:0;display:none;place-items:center;background:color-mix(in oklab,var(--cl-stage),transparent 65%);pointer-events:none}
.cl-stage[data-state="loading"] .cl-stage__load{display:grid}
.cl-stage__load::before{content:"";width:1.6rem;height:1.6rem;border:3px solid var(--ink-inv);border-right-color:transparent;
  border-radius:50%;animation:cl-spin 0.9s linear infinite}
@keyframes cl-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cl-stage__load::before{border-right-color:var(--ink-inv)}}
.cl-stage__err{position:absolute;inset:0;display:grid;place-content:center;gap:0.4rem;text-align:center;padding:1rem;
  background:var(--cl-stage);color:var(--ink-inv);font-size:0.95rem}
.cl-stage__err[hidden]{display:none}
.cl-stage__err .inlink{color:var(--flood-accent)}
.cl-dlg .dhead h3{font-size:1rem}
.cl-dnav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.cl-dnav__b{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:0.4rem;min-height:2.75rem;
  font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:0.9rem;color:var(--ink)}
.cl-dnav__b:last-child{justify-self:end}
.cl-dnav__b:disabled{opacity:0.4;cursor:not-allowed}
.cl-dnav__b[data-cl-prev]{flex-direction:row}
@media (max-width:30rem){.cl-f{min-height:2.75rem}}
.cl-dnav__c{color:var(--ink-2);font-size:0.9rem}
.cl-pick--dlg{width:100%;min-height:2.9rem;display:flex;justify-content:center;align-items:center;gap:0.5rem;
  font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:0.95rem;color:var(--ink)}
.cl-pick--dlg[aria-pressed="false"]{background:var(--rec);border-color:var(--rec);color:var(--ink-inv)}

.cl-tab:focus-visible,.cl-f:focus-visible,.cl-var__open:focus-visible,.cl-pick:focus-visible,.cl-bar__btn:focus-visible,
.cl-dnav__b:focus-visible,.cl-link:focus-visible,.cl-legend summary:focus-visible{outline:var(--u-line-edge) solid var(--signal);outline-offset:2px}
.cl-poster:focus-visible{outline:var(--u-line-edge) solid var(--signal);outline-offset:-3px}
.cl-bar__btn:focus-visible{outline-color:var(--flood-accent)}

/* trial reels list (area 4, third tab) ----------------------------------------- */
.cl-tabs--three{grid-template-columns:repeat(3,1fr)}
.tr-list{border:0;padding:0;background:none}
.trs{display:grid;gap:0.8rem;list-style:none;margin:0;padding:0}
.tr{display:grid;grid-template-columns:5.5rem 1fr;gap:0.9rem;align-items:start;padding:0.8rem;border:1px solid var(--rule);background:var(--bg-raised)}
.tr__play{all:unset;cursor:pointer;position:relative;display:block;aspect-ratio:9/16;background:var(--ink);overflow:hidden}
.tr__play img{width:100%;height:100%;object-fit:cover;display:block}
.tr__play:focus-visible{outline:var(--u-line-edge) solid var(--signal);outline-offset:2px}
.tr__body{display:grid;gap:0.35rem;min-width:0}
.tr__meta{display:flex;flex-wrap:wrap;gap:0.3rem 0.8rem;font-size:0.8rem;color:var(--ink-3);font-weight:600}
.tr__state{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:0.03em;color:var(--wait)}
.tr--live .tr__state{color:var(--signal)}
.tr--fail .tr__state{color:var(--rec)}
.tr__t{font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1.15;margin:0}
.tr__cap{font-size:0.9rem;color:var(--ink-2);line-height:1.4;margin:0}
.tr__ig{display:inline-flex;align-items:center;gap:0.4rem;min-height:2.75rem;font-weight:700;color:var(--ink);text-underline-offset:3px}
.tr__ig--off{color:var(--ink-3);font-weight:600;font-size:0.85rem;min-height:auto}
.tr-note{margin-top:0.8rem;font-size:0.8rem;color:var(--ink-3)}
@media (min-width:48rem){.tr{grid-template-columns:7rem 1fr}}
.tr__cap summary{cursor:pointer;min-height:2.75rem;display:flex;align-items:center;font-weight:700;font-size:0.88rem;color:var(--ink-2)}
.tr__cap p{white-space:pre-line;font-size:0.9rem;color:var(--ink-2);line-height:1.4;margin:0 0 0.4rem}