/* Transformation case-study template — layered on article.css.
   Metadata row, framework cards, analysis paragraphs, three figure types, closer. */

/* metadata row under the dek */
.tf-meta { display: flex; flex-wrap: wrap; gap: 0.2rem clamp(1.4rem, 4vw, 3rem); margin-top: 1.7rem; padding-block: 1rem; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); font-family: var(--font-body); }
.tf-meta > div { display: flex; flex-direction: column; gap: 0.3rem; padding-block: 0.3rem; }
.tf-meta .m-lab { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-55); }
.tf-meta .m-val { font-size: 0.92rem; font-weight: 600; line-height: 1.35; color: var(--color-text); }

/* no drop cap — these pages open on a section heading */
.tf-body > p:first-of-type::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; color: inherit; }

/* framework cards — artifacts inset into the prose */
.tf-cards { display: grid; grid-template-columns: 1fr; gap: clamp(0.9rem, 2vw, 1.2rem); margin-block: clamp(1.8rem, 4vw, 2.5rem); }
.tf-cards.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .tf-cards.two { grid-template-columns: 1fr; } }
.art-body a.tf-card, .pnl a.tf-card { display: block; padding: clamp(1.15rem, 2.6vw, 1.5rem); border: 1px solid #E5E4DE; border-radius: 10px; background: #FFFFFF; color: #16160E; text-decoration: none; box-shadow: 0 1px 2px rgba(22, 22, 14, 0.05); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.art-body a.tf-card:hover, .pnl a.tf-card:hover { border-color: #C6C5BB; color: #16160E; box-shadow: 0 6px 20px rgba(22, 22, 14, 0.12); transform: translateY(-1px); }
.tf-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.85rem; }
.tf-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; color: #16160E; }
.tf-mark svg { width: 24px; height: 24px; }
.tf-pill { font-family: 'Plus Jakarta Sans', var(--font-body), system-ui, sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #16160E; background: #F7C531; border-radius: 4px; padding: 0.34rem 0.55rem; white-space: nowrap; }
.tf-card h4 { font-family: 'Plus Jakarta Sans', var(--font-body), system-ui, sans-serif; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: #16160E; margin-top: 1.5rem; }
.tf-card h4 .ext { font-size: 0.8em; color: #8A8A80; margin-left: 0.35em; transition: color 0.2s ease; }
.art-body a.tf-card:hover h4 .ext, .pnl a.tf-card:hover h4 .ext { color: #16160E; }
.tf-card p { font-family: 'Plus Jakarta Sans', var(--font-body), system-ui, sans-serif; font-size: 0.9rem; line-height: 1.55; color: #52524A; margin-top: 0.45rem; }
.tf-src { display: block; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid #EDECE6; font-family: 'Plus Jakarta Sans', var(--font-body), system-ui, sans-serif; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8A8A80; }
@media (max-width: 420px) { .tf-card-top { flex-wrap: wrap; } .tf-pill { white-space: normal; } }

/* the analytical beat after a card */
.art-body p.wah { border-left: 2px solid color-mix(in srgb, var(--color-accent) 55%, transparent); padding-left: clamp(0.85rem, 2.5vw, 1.25rem); font-size: 0.97em; color: var(--ink-70); }

/* shared figure shell */
.tf-fig { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: clamp(1.15rem, 3vw, 1.8rem); }
.tf-fig-title { font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-55); }
.tf-fig .fig-note { margin-top: 1.15rem; padding-top: 0.85rem; border-top: 1px solid var(--color-border); font-family: var(--font-body); font-size: 0.79rem; line-height: 1.5; color: var(--ink-55); }

/* fig 1 — the inversion */
.tf-bars { display: grid; gap: clamp(1.2rem, 3vw, 1.7rem); margin-top: 1.15rem; }
.tf-bargroup { display: grid; gap: 0.5rem; }
.tf-bargroup .g-lab { font-family: var(--font-body); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-70); }
.tf-bar { display: grid; grid-template-columns: minmax(90px, 32%) 1fr; align-items: center; gap: 0.8rem; }
.tf-bar .b-lab { font-family: var(--font-body); font-size: 0.81rem; line-height: 1.3; color: var(--ink-70); }
.tf-bar .b-track { height: 14px; background: color-mix(in srgb, var(--color-text) 8%, transparent); border-radius: 2px; overflow: hidden; }
.tf-bar .b-fill { display: block; height: 100%; width: 0; min-width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--color-text) 26%, transparent); transition: width 0.95s cubic-bezier(0.22, 0.9, 0.25, 1); }
.tf-bar.is-accent .b-fill { background: var(--color-accent); }
.tf-fig.in .b-fill { width: calc(var(--w) * 1%); }
@media (max-width: 430px) { .tf-bar { grid-template-columns: 1fr; gap: 0.3rem; } }

/* fig 2 — two paths */
.tf-paths { display: grid; gap: clamp(1.5rem, 4vw, 2.4rem); margin-top: 1.2rem; }
.tf-path .p-lab { font-family: var(--font-body); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-70); }
.tf-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 0.6rem; margin-top: 0.9rem; }
.tf-node { display: flex; align-items: center; position: relative; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); padding: 0.85rem 0.9rem; font-family: var(--font-body); font-size: 0.82rem; line-height: 1.35; color: var(--ink-70); }
.tf-node.pivot { border-color: color-mix(in srgb, var(--color-accent) 70%, var(--color-border)); color: var(--color-text); font-weight: 600; }
.tf-node .n-tag { position: absolute; top: -0.55rem; left: 0.7rem; padding: 0 0.35rem; background: var(--color-surface); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); }
.tf-arrow { align-self: center; color: var(--ink-55); font-size: 0.95rem; }
@media (max-width: 660px) { .tf-flow { grid-template-columns: 1fr; gap: 0.4rem; } .tf-arrow { justify-self: center; transform: rotate(90deg); } }

/* fig 3 — one person, two jobs */
.tf-day { margin-top: 1.3rem; }
.tf-person { display: grid; grid-template-columns: 1.1fr 3fr 1.1fr; }
.tf-person .fig { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.55rem; font-family: var(--font-body); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55); }
.tf-person .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-text); }
.tf-daybar { display: grid; grid-template-columns: 1.1fr 3fr 1.1fr; border: 1px solid var(--color-border); border-radius: 3px; overflow: hidden; }
.tf-daybar span { padding: 0.85rem 0.5rem; text-align: center; font-family: var(--font-body); font-size: 0.63rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.tf-daybar .seg-v { background: color-mix(in srgb, var(--color-text) 10%, transparent); color: var(--ink-70); }
.tf-daybar .seg-p { background: var(--color-accent); color: var(--color-bg); }
.tf-hours { position: relative; display: grid; grid-template-columns: 1.1fr 3fr 1.1fr; margin-top: 0.4rem; font-family: var(--font-body); font-size: 0.67rem; color: var(--ink-55); font-variant-numeric: tabular-nums; }
.tf-hours span { border-left: 1px solid var(--color-border); padding: 0.3rem 0 0 0.35rem; }
.tf-hours .last { position: absolute; right: 0; top: 0; border-left: 0; padding-left: 0; }

/* inline definition */
.tf-def { cursor: help; position: relative; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 2px; text-decoration-color: var(--color-accent); text-underline-offset: 4px; }
.tf-def:hover, .tf-def:focus-visible { text-decoration-color: var(--color-text); }
.tf-def::after { content: attr(data-def); position: absolute; left: 50%; bottom: calc(100% + 0.6rem); transform: translate(-50%, 4px); width: max-content; max-width: min(19rem, 68vw); padding: 0.6rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-text); color: var(--color-bg); font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-align: left; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 20; }
.tf-def:hover::after, .tf-def:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* two-scoreboard grid */
.tf-grid { margin-top: 1.15rem; font-family: var(--font-body); }
.tf-grid .tg-head, .tf-grid .tg-row { display: grid; grid-template-columns: minmax(112px, 1.25fr) 1fr 1fr; gap: 0.5rem; align-items: center; }
.tf-grid .tg-head { padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-border); }
.tf-grid .tg-col { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-70); text-align: center; }
.tf-grid .tg-row { padding-block: 0.55rem; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); }
.tf-grid .tg-row:last-child { border-bottom: 0; }
.tf-grid .tg-lab { font-size: 0.85rem; line-height: 1.3; color: var(--color-text); }
.tf-grid .tg-cell { text-align: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-55); padding: 0.5rem 0.4rem; border-radius: 4px; border: 1px dashed color-mix(in srgb, var(--color-text) 22%, transparent); }
.tf-grid .tg-cell.on { color: var(--color-text); border: 1px solid transparent; background: color-mix(in srgb, var(--color-text) 12%, transparent); }
.tf-grid .tg-cell.key { color: var(--color-bg); background: var(--color-accent); border-color: transparent; }
@media (max-width: 430px) { .tf-grid .tg-head, .tf-grid .tg-row { grid-template-columns: 1fr 4.2rem 4.2rem; gap: 0.35rem; } .tf-grid .tg-cell { font-size: 0.58rem; letter-spacing: 0.06em; padding: 0.45rem 0.2rem; } }

/* louder figure treatment */
.tf-fig.is-loud { background: color-mix(in srgb, var(--color-text) 7%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-text) 22%, var(--color-border)); }
.tf-fig.is-loud .tf-fig-title { color: var(--color-text); }
.tf-fig.is-loud .tf-node { border-color: color-mix(in srgb, var(--color-text) 26%, transparent); color: var(--color-text); }
.tf-fig.is-loud .tf-node.pivot { border-width: 2px; background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg)); }

/* pivot node contents + crossover */
.tf-node.pivot { flex-direction: column; align-items: stretch; gap: 0.55rem; padding-top: 1.15rem; }
.tf-node .n-item { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.83rem; line-height: 1.3; }
.tf-node .n-item em { font-style: normal; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-55); }
.tf-cross { display: flex; align-items: center; gap: 0.7rem; margin-block: -0.4rem; padding-left: 0.2rem; }
.tf-cross .x-line { flex: 0 0 34px; height: 0; border-top: 2px dotted color-mix(in srgb, var(--color-accent) 75%, transparent); }
.tf-cross .x-lab { font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }

/* closer */
.tf-closer { margin-top: clamp(2.4rem, 6vw, 3.6rem); padding-top: clamp(1.8rem, 4vw, 2.6rem); border-top: 1px solid var(--color-border); }
.tf-closer p { font-family: var(--font-display); font-size: clamp(1.55rem, 1.05rem + 2vw, 2.45rem); line-height: 1.14; letter-spacing: -0.015em; text-wrap: balance; }
.tf-closer .accent { color: var(--color-accent); }


/* ---- hero media: the client's own front door ---- */
.tf-hero-media { margin: 0 0 clamp(1.6rem, 4vw, 2.4rem); }
.tf-hero-media img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); }
.tf-hero-vid { position: relative; container-type: inline-size; aspect-ratio: 1103 / 522; border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow: hidden; background: var(--color-text); }
.tf-hero-vid video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.tf-hero-mark { position: absolute; inset: 0; margin: 0; display: grid; align-content: center; justify-items: center; padding-inline: 5%; pointer-events: none; }
.tf-hero-mark span { font-family: 'Poppins', var(--font-body); font-weight: 600; text-transform: uppercase; line-height: 1.06; letter-spacing: 0.045em; color: transparent; -webkit-text-stroke: max(1.8px, 0.46cqw) #fff; }
.tf-hero-mark.is-continuo span { font-family: continuo, 'Poppins', var(--font-body); font-weight: 400; letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 0; text-shadow: 0.022em 0.024em 0.055em rgb(0 0 0 / 0.4); }
.tf-hero-mark.is-continuo span:first-child { font-size: 14.6cqw; }
.tf-hero-mark.is-continuo span:last-child { font-size: 15.8cqw; letter-spacing: 0.02em; }
.tf-hero-mark span:first-child { font-size: 14.4cqw; }
.tf-hero-mark span:last-child { font-size: 15.4cqw; letter-spacing: 0.03em; }
@supports not (-webkit-text-stroke: 1px #fff) { .tf-hero-mark span { color: #fff; } }
.tf-hero-media figcaption { margin-top: 0.7rem; font-family: var(--font-body); font-size: 0.76rem; line-height: 1.5; color: var(--ink-55); }
.tf-hero-media figcaption a { color: var(--ink-70); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.tf-hero-media figcaption a:hover { color: var(--color-accent); }

/* ---- one person, two jobs ---- */
.tf-clock { margin-top: 1.2rem; font-family: var(--font-body); }
.tf-clock .ck-bar { display: grid; grid-template-columns: 2fr 3.5fr 3fr; height: 46px; border-radius: 6px; overflow: hidden; }
.tf-clock .ck-bar span { display: grid; place-items: center; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tf-clock .ck-v { background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface)); color: var(--color-text); }
.tf-clock .ck-p { background: var(--color-text); color: var(--color-bg); }
.tf-clock .ck-hours { display: grid; grid-template-columns: 2fr 3.5fr 3fr auto; margin-top: 0.5rem; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--ink-55); }
.tf-clock .ck-hours .last { justify-self: end; }


/* =========================================================================
   SCROLL-SNAP PANEL DECK — shared by transformation studies 01–03.
   Nothing here is study-specific. Resting state is fully revealed: if the
   JS never runs, every panel reads correctly and stays findable by Ctrl+F.
   ========================================================================= */

html.dk { scroll-snap-type: y proximity; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.dk { scroll-behavior: auto; } }
body.dk-body { overflow-x: hidden; }

/* ---- panel shell ---- */
.pnl { position: relative; min-height: 100dvh; scroll-snap-align: start; scroll-snap-stop: normal; display: grid; align-content: center; padding: clamp(4.75rem, 11vh, 8rem) clamp(1.25rem, 6vw, 5rem) clamp(3rem, 8vh, 5.5rem); }
.pnl > .in { width: 100%; max-width: 66rem; justify-self: center; display: grid; gap: clamp(0.9rem, 2.4vw, 1.6rem); justify-items: start; }
.pnl + .pnl { border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); }
.pnl-num { font-family: var(--font-body); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; color: var(--ink-55); }
.pnl-num b { color: var(--color-accent); font-weight: 700; }

/* ---- the slab: one sentence owning the screen ---- */
.slab { font-family: var(--font-display); font-size: clamp(2.125rem, min(1.1rem + 4.4vw, 7.6vh), 5rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.018em; text-wrap: balance; max-width: 26ch; margin: 0; }
.slab .accent { color: var(--color-accent); }
.slab-sub { font-family: var(--font-body); font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.12rem); line-height: 1.6; color: var(--ink-70); max-width: 46ch; text-wrap: pretty; }

/* ---- panel type scale (below slab) ---- */
.pnl h2 { font-family: var(--font-display); font-size: clamp(1.5rem, min(1.1rem + 1.5vw, 4.6vh), 2.4rem); line-height: 1.14; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.pnl .kicker { font-family: var(--font-body); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin: 0; }
.pnl .body { font-family: var(--font-display); font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.22rem); line-height: 1.7; color: var(--color-text); max-width: 54ch; margin: 0; text-wrap: pretty; }
.pnl .body.muted { font-family: var(--font-body); font-size: clamp(0.92rem, 0.88rem + 0.25vw, 1.05rem); line-height: 1.65; color: var(--ink-70); }
.pnl .note { font-family: var(--font-body); font-size: 0.78rem; line-height: 1.55; color: var(--ink-55); max-width: 52ch; margin: 0; }
.pnl .note a { color: var(--ink-70); text-decoration: underline; text-underline-offset: 2px; }
.pnl .note a:hover { color: var(--color-accent); }

/* ---- motion: entry stagger, applied only when JS confirms it is safe ---- */
.dk-anim [data-rise] { opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; transition-delay: calc(var(--i, 0) * 80ms); }
.dk-anim .pnl.is-in [data-rise] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dk-anim [data-rise] { opacity: 1; transform: none; transition: none; } }

/* ---- the split: two halves part from centre (either axis) ---- */
.splt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3.5vw, 3rem); width: 100%; }
.splt-half { display: grid; gap: 0.55rem; align-content: start; padding-top: 1.1rem; border-top: 2px solid var(--color-text); }
.splt-half:last-child { border-top-color: var(--color-accent); }
.splt-half .h-lab { font-family: var(--font-body); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-55); }
.splt-half h3 { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 1vw, 1.85rem); line-height: 1.2; margin: 0; }
.splt-half p { font-family: var(--font-body); font-size: clamp(0.9rem, 0.86rem + 0.25vw, 1.02rem); line-height: 1.6; color: var(--ink-70); margin: 0; text-wrap: pretty; }
.dk-anim .splt-half { opacity: 0; transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.dk-anim .splt-half:first-child { transform: translateX(16%); }
.dk-anim .splt-half:last-child { transform: translateX(-16%); }
.dk-anim .pnl.is-in .splt-half { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .splt { grid-template-columns: 1fr; }
  .dk-anim .splt-half:first-child { transform: translateY(12%); }
  .dk-anim .splt-half:last-child { transform: translateY(-12%); }
}
@media (prefers-reduced-motion: reduce) { .dk-anim .splt-half { opacity: 1; transform: none; transition: none; } }

/* ---- stepped build: keyboard steps, scroll skips, touch auto-runs ---- */
.dk-anim .pnl[data-steps] [data-step] { opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease-out, transform 0.45s ease-out; }
.dk-anim .pnl[data-steps] [data-step].is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dk-anim .pnl[data-steps] [data-step] { opacity: 1; transform: none; transition: none; } }
.step-hint { font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-55); }
.step-hint kbd { font-family: var(--font-body); font-size: 0.68rem; border: 1px solid var(--color-border); border-radius: 4px; padding: 0.1rem 0.35rem; }
@media (pointer: coarse) { .step-hint { display: none; } }

/* ---- progress indicator ---- */
.dk-dots { position: fixed; right: clamp(0.7rem, 1.6vw, 1.5rem); top: 50%; transform: translateY(-50%); display: grid; gap: 0.5rem; z-index: 40; }
.dk-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--color-text) 34%, transparent); background: transparent; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.dk-dots button:hover { border-color: var(--color-accent); }
.dk-dots button[aria-current="true"] { background: var(--color-accent); border-color: var(--color-accent); transform: scale(1.3); }
@media (max-width: 860px) {
  .dk-dots { right: 0; left: 0; top: 0; bottom: auto; transform: none; display: flex; gap: 1px; }
  .dk-dots button { flex: 1; width: auto; height: 3px; border-radius: 0; border: 0; background: color-mix(in srgb, var(--color-text) 16%, transparent); }
  .dk-dots button[aria-current="true"] { transform: none; }
}

/* ---- slim deck header ---- */
.dk-head { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 1rem; padding: 0.7rem clamp(1.25rem, 6vw, 5rem); background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); }
.dk-head .spacer { flex: 1; }
.dk-head .dk-crumb { font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-55); }
@media (max-width: 620px) { .dk-head .dk-crumb { display: none; } }

/* ---- cover panel ---- */
.pnl-cover .vwm { width: 100%; }
.pnl-cover .vwm-frame { aspect-ratio: auto; width: 100%; height: min(38dvh, 420px); }
/* Frame height tracks viewport height while its width tracks the column, so the
   cqw-based wordmark needs a vh ceiling too or it clips inside the frame.
   Coefficients match today's cqw result at tall viewports, so min() is a no-op there. */
.pnl-cover .vwm-mark { --vwm-size-1: min(14.6cqw, 14.7vh); --vwm-size-2: min(15.8cqw, 15.9vh); }
.pnl-cover .vwm-mark span { line-height: 1; }
.pnl-cover .slab { font-size: clamp(1.75rem, min(1rem + 3.3vw, 6.4vh), 3.75rem); }
.pnl-cover .slab-sub { max-width: 42ch; }
.pnl-cover .cover-meta { display: flex; flex-wrap: wrap; gap: 0.3rem clamp(1.2rem, 3.5vw, 2.6rem); padding-top: 0.9rem; border-top: 1px solid var(--color-border); width: 100%; font-family: var(--font-body); }
.pnl-cover .cover-meta div { display: grid; gap: 0.1rem; }
.pnl-cover .cover-meta .m-lab { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-55); }
.pnl-cover .cover-meta .m-val { font-size: 0.86rem; color: var(--ink-70); }
@media (max-width: 760px) { .pnl-cover .vwm-frame { height: 26dvh; } }

/* ---- cover: scroll cue. A travelling tick on a hairline rail — enough to say
   "there is more below" without a bouncing chevron. ---- */
.pnl-cover { overflow: hidden; }
.scroll-cue { position: absolute; left: 50%; bottom: clamp(1rem, 3.2vh, 2rem); transform: translateX(-50%); display: grid; justify-items: center; gap: 0.45rem; z-index: 2; }
.sc-lab { font-family: var(--font-body); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-55); }
/* keycap hint: the down-arrow key is the nicest way through the deck */
.sc-key { display: grid; place-items: center; }
.sc-key .kc { display: grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding-bottom: 1px; font-family: var(--font-body); font-size: 0.7rem; line-height: 1; color: var(--ink-70, var(--color-text)); background: color-mix(in srgb, var(--color-text) 6%, transparent); border: 1px solid color-mix(in srgb, var(--color-text) 26%, transparent); border-bottom-width: 2px; border-radius: 4px; }
.sc-hint { font-family: var(--font-body); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55); white-space: nowrap; }
.sc-rail { position: relative; width: 1px; height: clamp(26px, 4.6vh, 40px); background: color-mix(in srgb, var(--color-text) 22%, transparent); overflow: hidden; }
.sc-rail i { position: absolute; top: 0; left: 0; width: 1px; height: 42%; background: var(--dk-accent-run); animation: sc-fall 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes sc-fall { 0% { transform: translateY(-110%); opacity: 0 } 22% { opacity: 1 } 72% { opacity: 1 } 100% { transform: translateY(240%); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .sc-rail i { animation: none; height: 100%; opacity: 0.55 } }
@media (max-height: 520px) { .scroll-cue { display: none; } }

/* ---- register comparison (voice panel) ---- */
.regs { width: 100%; display: grid; }
.attrs { display: grid; gap: 0.5rem; width: 100%; }
.attrs li { display: flex; gap: 0.7rem; font-family: var(--font-body); font-size: clamp(0.9rem, 0.86rem + 0.25vw, 1rem); line-height: 1.5; color: var(--color-text); }
.attrs li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 0.55em; border-radius: 50%; background: var(--color-accent); }
.reg { display: grid; gap: 0; width: 100%; }
.reg-row { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr; gap: clamp(0.8rem, 2.5vw, 1.6rem); padding-block: 0.85rem; border-top: 1px solid var(--color-border); align-items: baseline; }
.reg-row:last-child { border-bottom: 1px solid var(--color-border); }
.reg-row .r-lab { font-family: var(--font-body); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55); }
.reg-row .r-txt { font-family: var(--font-display); font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.12rem); line-height: 1.55; text-wrap: pretty; }
@media (max-width: 620px) { .reg-row { grid-template-columns: 1fr; gap: 0.3rem; } }

/* ---- weekly review: who brought what ---- */
.rev { display: grid; gap: 0; width: 100%; }
.rev-row { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr; gap: clamp(0.8rem, 2.5vw, 1.6rem); padding-block: 0.8rem; border-top: 1px solid var(--color-border); align-items: baseline; }
.rev-row:last-child { border-bottom: 1px solid var(--color-border); }
.rev-row .who { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-text); }
.rev-row .what { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.55; color: var(--ink-70); text-wrap: pretty; }
@media (max-width: 620px) { .rev-row { grid-template-columns: 1fr; gap: 0.2rem; } }

/* ---- core model worksheet ---- */
.cm { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: clamp(0.9rem, 2.4vw, 1.5rem); display: grid; gap: 0.8rem; }
.cm-head { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline; justify-content: space-between; }
.cm-head .t { font-family: var(--font-body); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-55); }
.cm-head .pg { font-family: var(--font-body); font-size: 0.72rem; color: var(--ink-70); }
.cm-grid { display: grid; grid-template-columns: 0.85fr 1.3fr 0.85fr; gap: 0.7rem; }
.cm-col { display: grid; gap: 0.7rem; align-content: start; }
.cm-box { border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent); border-radius: 8px; padding: 0.7rem 0.8rem; display: grid; gap: 0.35rem; }
.cm-box.is-core { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.cm-box .lab { font-family: var(--font-body); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55); }
.cm-fill { font-family: 'Caveat', var(--font-display); font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.28rem); line-height: 1.25; color: var(--color-accent); }
.cm-fill span { display: block; }
@media (max-width: 820px) { .cm-grid { grid-template-columns: 1fr; } }

/* ---- outcome slots: direction of travel, drawn rather than counted ---- */
.out { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 2.5vw, 1.8rem); width: 100%; }
.out-slot { border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent); border-radius: var(--radius-lg); padding: clamp(0.9rem, 2.4vw, 1.4rem); display: grid; gap: 0.35rem; align-content: start; }
.out-slot .num { font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1; color: color-mix(in srgb, var(--color-accent) 60%, transparent); }
.out-slot .lab { font-family: var(--font-body); font-size: 0.82rem; line-height: 1.5; color: var(--ink-70); }
.out-slot .ask { font-family: var(--font-body); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
@media (max-width: 760px) { .out { grid-template-columns: 1fr; } }
.out-viz { display: block; width: 100%; max-width: 9rem; height: auto; margin-bottom: 0.55rem; overflow: visible; }
.out-viz .vz-f { fill: var(--dk-accent-run, var(--color-accent)); }
.out-viz .vz-dim { opacity: 0.42; }
.out-viz .vz-s { fill: none; stroke: color-mix(in srgb, var(--color-text) 30%, transparent); stroke-width: 1.5; }
.out-viz .vz-a { fill: none; stroke: var(--dk-accent-run, var(--color-accent)); stroke-linecap: round; stroke-linejoin: round; }
.out-viz .vz-o { fill: none; stroke: color-mix(in srgb, var(--color-text) 42%, transparent); stroke-width: 1.5; }
.out-viz .vz-ring { fill: none; stroke: var(--dk-accent-run, var(--color-accent)); stroke-width: 1.5; opacity: 0.5; }
.out-viz .vz-hub { fill: var(--dk-accent-run, var(--color-accent)); }
@media (max-height: 720px) { .out-viz { max-width: 7rem; margin-bottom: 0.4rem; } }

/* ---- deck cards: reuse the ConStrat cards, laid out as a row ---- */
.pnl .tf-cards { width: 100%; margin-block: 0; }
.pnl .tf-cards.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .pnl .tf-cards.two { grid-template-columns: 1fr; } }

/* ---- close panel ---- */
.dk-close { display: flex; flex-wrap: wrap; gap: 0.7rem; padding-top: 0.4rem; }
.dk-foot { font-family: var(--font-body); font-size: 0.72rem; color: var(--ink-55); display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--color-border); width: 100%; }
.dk-foot a { color: var(--ink-70); text-decoration: underline; text-underline-offset: 2px; }
.dk-foot a:hover { color: var(--color-accent); }


/* ---- short viewports: laptops in a window, phones in landscape.
   Every size above scales off width; height needs its own budget or panels
   grow past the fold and the one-idea-per-screen promise breaks. ---- */
@media (max-height: 720px) {
  .pnl { padding-block: clamp(3.6rem, 7.5vh, 4.4rem) clamp(1.4rem, 4vh, 2.4rem); }
  .pnl > .in { gap: clamp(0.5rem, 1.5vh, 0.95rem); }
  .pnl .body { font-size: 0.98rem; line-height: 1.55; }
  .pnl .body.muted { font-size: 0.88rem; }
  .pnl .note { font-size: 0.7rem; line-height: 1.45; }
  .pnl-cover .vwm-frame { height: 26dvh; }
  .pnl-cover .vwm-mark { --vwm-size-1: 10vh; --vwm-size-2: 10.8vh; }
  .pnl-cover .slab-sub { font-size: 0.9rem; line-height: 1.5; max-width: 58ch; }
  .pnl-cover .cover-meta { padding-top: 0.6rem; }
  .pnl-cover .cover-meta .m-val { font-size: 0.8rem; }
  .attrs { gap: 0.35rem; }
  .attrs li { font-size: 0.92rem; }
  .reg-row, .rev-row { padding-block: 0.5rem; }
  .reg-row .r-txt { font-size: 0.95rem; line-height: 1.45; }
  .rev-row .what { font-size: 0.84rem; line-height: 1.45; }
  .cm { padding: 0.65rem; gap: 0.45rem; }
  .cm-grid { gap: 0.45rem; }
  .cm-box { padding: 0.45rem 0.6rem; gap: 0.18rem; }
  .cm-fill { font-size: 0.9rem; line-height: 1.15; }
  .cm-head .pg { font-size: 0.66rem; }
  .tf-clock { margin-top: 0.7rem; }
  .tf-clock .ck-bar { height: 36px; }
  .tf-clock .ck-bar span { font-size: 0.66rem; }
  .out-slot { padding: 0.7rem 0.85rem; }
  .out-slot .num { font-size: 1.5rem; }
  .out-slot .lab { font-size: 0.76rem; }
  .dk-foot { padding-top: 0.7rem; font-size: 0.68rem; }
}
@media (max-height: 560px) {
  .pnl { padding-block: 3.4rem 1.1rem; }
  .pnl-cover .vwm-frame { height: 22dvh; }
  .pnl-cover .vwm-mark { --vwm-size-1: 8.5vh; --vwm-size-2: 9.2vh; }
  .cm-fill { font-size: 0.85rem; }
}

/* ---- panel background: site screenshots in illustrative browser chrome.
   Sits behind the copy, dimmed and vignetted so the slab stays legible. ---- */
.pnl-media { overflow: hidden; }
.pnl-media > .in { position: relative; z-index: 1; }
.pnl-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bg-fill > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The scrim exists to tame a background PHOTO. Panel 10 has no photo any more —
   only the convergence diagram — so the diagram is lifted above the scrim, or
   the gradient erases the panel's one graphic. (Kept absolute: the svg is
   inset-positioned to fill the panel.) */
.pnl-bg-flow > svg { z-index: 1; }
.pnl-shots .pnl-bg .brwsr, .pnl-bg.pnl-bg-shots .brwsr { opacity: 1; }
.pnl-shots .pnl-bg::after { content: ""; position: absolute; inset: 0; }

/* shared scrim for photo / map / diagram backgrounds */
.bg-scrim { position: absolute; inset: 0; pointer-events: none; }

/* user-fillable photo backgrounds */
.pnl-bg-photo .bg-fill { position: absolute; inset: 0; pointer-events: auto; opacity: 0.6; filter: saturate(0.85); }
/* Background slots carry a blank placeholder, so an unfilled deck shows only
   the slot's dashed ring — never authoring text across the argument. The whole
   panel stays a drop target; it just sits back until something lands in it. */
.pnl-bg-photo .bg-fill:has(image-slot:not([data-filled])) { opacity: 0.38; filter: none; }
.pnl-bg-photo.is-right .bg-fill { left: 40%; }
/* Panel 10 still wants its photo. While the slot is empty it shrinks to a
   bounded drop target parked clear of the copy; once filled it goes full-bleed
   like every other photo background. */
.pnl-bg-photo .bg-fill:has(#da-p10-collab:not([data-filled])) { inset: auto clamp(1.25rem, 6vw, 5rem) clamp(3.25rem, 7vh, 5.5rem) auto; width: min(34%, 21rem); height: min(30%, 12.5rem); opacity: 0.9; }
@media (max-width: 760px) { .pnl-bg-photo .bg-fill:has(#da-p10-collab:not([data-filled])) { inset: auto 1rem 1rem auto; width: min(66%, 16rem); height: 7.5rem; } }
/* Panel 10's photo reads sideways: rotate a quarter turn and swap the axes it
   is sized against (container query units, so it still covers the frame) —
   !important because the component sets width/height inline per view. */
.pnl-bg-photo .bg-fill:has(#da-p10-collab) { container-type: size; }
#da-p10-collab::part(image) { width: 100cqh !important; height: 100cqw !important; transform: translate(-50%, -50%) rotate(90deg) !important; object-fit: cover !important; }
@media (max-width: 760px) { .pnl-bg-photo.is-right .bg-fill { left: 0; } .pnl-bg-photo .bg-fill { opacity: 0.42; } }

/* real OpenStreetMap view — non-interactive, tiles dimmed, markers kept crisp */
.pnl-bg-map .lf { position: absolute; inset: 0; pointer-events: none; background: transparent; }
/* The scrim and Leaflet's panes share one stacking context. Pinned at 300 it
   sits above the tile pane (200) and below the overlay pane (400) that holds
   the markers, so the dots read at full strength wherever the map is framed —
   no dependence on where the gradient's alpha ramp happens to fall. */
.pnl-bg-map .bg-scrim { z-index: 300; }
.pnl-bg-map .leaflet-tile-pane { opacity: 0.78; }
.pnl-bg-map .leaflet-control-attribution { pointer-events: auto; background: rgb(0 0 0 / 0.5); color: rgb(255 255 255 / 0.8); font-size: 9px; padding: 1px 5px; }
.pnl-bg-map .leaflet-control-attribution a { color: rgb(255 255 255 / 0.9); }
.atl-tip { background: transparent; border: 0; box-shadow: none; padding: 0; color: #fff; opacity: 0.45; font-family: var(--font-body); font-size: 0.54rem; font-weight: 700; letter-spacing: 0.04em; text-shadow: 0 1px 3px rgb(0 0 0 / 0.7); white-space: nowrap; }
.atl-tip::before { display: none; }

/* abstract: many sources converging on one voice */
/* Standing alone rather than layered over a photo, so it no longer needs to
   duck out of the image's way. */
.pnl-bg-flow { opacity: 0.85; }
.pnl-bg-flow svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pnl-bg-flow .fl-lines path { stroke: var(--color-accent); opacity: 0.55; }
.pnl-bg-flow .fl-dots circle { fill: var(--color-text); opacity: 0.4; }
.pnl-bg-flow .fl-hub { fill: var(--color-accent); }
.pnl-bg-flow .fl-hub-ring { fill: none; stroke: var(--color-accent); stroke-width: 1.5; opacity: 0.45; }

/* panel 06: the two halves of a delegate's day, as type */
.hours { display: grid; gap: 0; width: 100%; max-width: 40rem; }
.hr-row { display: flex; align-items: baseline; gap: clamp(0.8rem, 3vw, 2rem); padding-block: 0.6rem; border-top: 1px solid var(--color-border); }
.hr-row:last-child { border-bottom: 1px solid var(--color-border); }
.hr-t { font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55); flex: 0 0 auto; min-width: 10.5rem; }
.hr-w { font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1.2vw, 1.95rem); line-height: 1; }
.hr-w.is-accent { color: var(--color-accent); }
@media (max-width: 560px) { .hr-row { flex-direction: column; gap: 0.15rem; } .hr-t { min-width: 0; } }

/* panel 08: the worksheet as a filled sheet of paper */
.form { position: relative; width: 100%; padding-block: 0.5rem 0.9rem; }
.form::before { content: ""; position: absolute; inset: 0.5rem 0 0.9rem; z-index: 0; background: #EFEADF; border-radius: 4px; transform: rotate(1.5deg) translateY(5px); box-shadow: 0 14px 34px rgb(0 0 0 / 0.32); }
.form-sheet { position: relative; z-index: 1; background: #FBF8F1; color: #1B1B14; border-radius: 4px; padding: clamp(0.85rem, 2.2vw, 1.45rem); transform: rotate(-1.15deg); box-shadow: 0 26px 56px rgb(0 0 0 / 0.45); }
.fm-head { display: flex; flex-wrap: wrap; gap: 0.45rem 1.2rem; align-items: baseline; padding-bottom: 0.6rem; border-bottom: 2px solid #1B1B14; }
.fm-title { font-family: var(--font-body); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; flex: 0 0 auto; }
.fm-field { display: flex; align-items: baseline; gap: 0.5rem; flex: 1 1 18rem; min-width: 0; }
.fm-lab { font-family: var(--font-body); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #6E6A5E; flex: 0 0 auto; }
.fm-ink { font-family: 'Caveat', var(--font-display); font-size: clamp(1.02rem, 0.94rem + 0.4vw, 1.32rem); line-height: 1.28; color: #23306E; }
.fm-field .fm-ink { flex: 1 1 auto; border-bottom: 1px solid #C9C3B4; }
.fm-grid { display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: 0.55rem 0.8rem; margin-top: 0.75rem; }
.fm-cell { display: grid; gap: 0.28rem; align-content: start; padding: 0.55rem 0.7rem; border: 1px solid #DED8C9; border-radius: 3px; }
.fm-cell:nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
.fm-cell:nth-child(2) { grid-column: 2; grid-row: 1; }
.fm-cell:nth-child(3) { grid-column: 2; grid-row: 2; }
.fm-cell:nth-child(4) { grid-column: 2; grid-row: 3; }
.fm-cell:nth-child(5) { grid-column: 3; grid-row: 1 / 4; }
.fm-cell.is-core { border-color: #E0B7B7; background: rgb(207 32 47 / 0.05); }
.fm-cell .fm-ink span { display: block; border-bottom: 1px solid #E4DFD2; padding-bottom: 0.06rem; margin-bottom: 0.2rem; }
.fm-cell .fm-ink span:last-child { margin-bottom: 0; border-bottom: 0; }
.fm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin-top: 0.7rem; padding-top: 0.55rem; border-top: 1px solid #DED8C9; font-family: var(--font-body); font-size: 0.66rem; color: #6E6A5E; }
.fm-stamp { font-size: 0.54rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); border: 1.5px solid var(--color-accent); border-radius: 3px; padding: 0.14rem 0.4rem; transform: rotate(-3deg); }
@media (max-width: 820px) { .fm-grid { grid-template-columns: 1fr; } .fm-cell:nth-child(n) { grid-column: 1; grid-row: auto; } }

/* panel 09: the same message in three registers, as speech balloons */
.blns { display: grid; gap: 0.8rem; width: 100%; max-width: 44rem; }
.bln { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 0.55rem 0.9rem 0.65rem; }
.bln::after { content: ""; position: absolute; left: 1.7rem; bottom: -7px; width: 13px; height: 13px; background: inherit; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); transform: rotate(45deg); }
.bln:nth-child(2) { margin-left: clamp(1rem, 5vw, 4rem); }
.bln:nth-child(3) { margin-left: clamp(2rem, 9vw, 7rem); }
.bln .b-lab { font-family: var(--font-body); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); }
.bln p { margin: 0.15rem 0 0; font-family: var(--font-display); font-size: clamp(0.94rem, 0.9rem + 0.26vw, 1.08rem); line-height: 1.45; text-wrap: pretty; }

/* cards: hold a readable measure instead of stretching, and read as clickable */
.pnl .tf-cards { grid-template-columns: minmax(0, 23rem); justify-content: start; }
.pnl .tf-cards.two { grid-template-columns: repeat(2, minmax(0, 23rem)); }
@media (max-width: 800px) { .pnl .tf-cards, .pnl .tf-cards.two { grid-template-columns: minmax(0, 1fr); } }
.tf-src { transition: color 0.2s ease; }
.tf-src em { font-style: normal; margin-left: 0.2em; }
.tf-src .src-arr { width: 0.78em; height: 0.78em; margin-left: 0.4em; vertical-align: -0.03em; }
a.tf-card:hover .tf-src { color: var(--color-accent); }

@media (max-height: 720px) {
  .form { padding-block: 0.35rem 0.7rem; }
  .form-sheet { padding: 0.7rem 0.8rem; }
  .fm-ink { font-size: 0.95rem; line-height: 1.16; }
  .fm-cell { padding: 0.42rem 0.55rem; }
  .fm-grid { gap: 0.4rem 0.6rem; margin-top: 0.55rem; }
  .fm-foot { margin-top: 0.5rem; padding-top: 0.4rem; font-size: 0.6rem; }
  .blns { gap: 0.55rem; }
  .bln { padding: 0.45rem 0.75rem 0.55rem; }
  .bln p { font-size: 0.9rem; line-height: 1.38; }
  .hr-row { padding-block: 0.45rem; }
}
.brwsr { position: absolute; margin: 0; width: min(48%, 640px); border-radius: 10px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent); background: color-mix(in srgb, var(--color-text) 8%, var(--color-bg)); box-shadow: 0 24px 60px rgb(0 0 0 / 0.45); }
.brwsr .bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.55rem; background: color-mix(in srgb, var(--color-text) 10%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent); }
.brwsr .dots { display: flex; gap: 4px; flex: 0 0 auto; }
.brwsr .dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--color-text) 26%, transparent); }
.brwsr .url { font-family: var(--font-body); font-size: 0.56rem; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--color-text) 60%, transparent); background: color-mix(in srgb, var(--color-text) 8%, transparent); border-radius: 999px; padding: 0.14rem 0.55rem; }
.brwsr img { display: block; width: 100%; height: auto; }
.b-meet { top: 8%; right: 3%; transform: rotate(-2.5deg); }
.b-leis { bottom: 6%; right: 20%; transform: rotate(2deg); }
@media (max-width: 900px) {
  .brwsr { width: min(62%, 420px); }
  .b-meet { top: 5%; right: -6%; }
  .b-leis { bottom: 4%; right: 14%; }
}
@media (max-height: 720px) { .brwsr { width: min(44%, 470px); } }
@media (prefers-reduced-motion: reduce) { .brwsr { transform: none; } }

/* ---- panel 13: local background film, cover-fitted and non-interactive ----
   A YouTube embed will not play from the preview's opaque origin, so this
   panel carries the same self-hosted file the opening panel uses. ---- */
.pnl-bg-vid { pointer-events: none; }
.pnl-bg-vid video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; border: 0; opacity: 0.5; pointer-events: none; }
@media (max-width: 760px) { .pnl-bg-vid video { opacity: 0.38; } }

/* panel 10: optional still behind the convergence diagram */
.pnl-bg-flow.pnl-bg-photo { opacity: 1; }
.pnl-bg-flow.pnl-bg-photo .bg-fill { opacity: 0.5; }
.pnl-bg-flow.pnl-bg-photo svg { opacity: 0.5; }

/* ---- audience icons (panel 03) ---- */
.aud-icon { display: block; width: clamp(28px, 3.4vw, 40px); height: clamp(28px, 3.4vw, 40px); color: var(--color-text); margin-bottom: 0.35rem; }
.splt-half:last-child .aud-icon { color: var(--color-accent); }
.aud-icon svg { width: 100%; height: 100%; display: block; }

/* ---- the two audiences fused on one figure (panel 06) ---- */
.dual { display: flex; align-items: center; gap: clamp(0.8rem, 2.5vw, 1.5rem); width: 100%; }
.dual svg { flex: 0 0 auto; width: clamp(74px, 8vw, 104px); height: clamp(74px, 8vw, 104px); }
.dual .d-leis { color: var(--color-text); }
.dual .d-meet { color: var(--color-accent); }
.dual .d-ring { stroke: color-mix(in srgb, var(--color-text) 30%, transparent); }
.dual .d-div { stroke: color-mix(in srgb, var(--color-text) 40%, transparent); stroke-dasharray: 3 4; }
.dual .d-cap { font-family: var(--font-body); font-size: clamp(0.84rem, 0.8rem + 0.25vw, 0.96rem); line-height: 1.5; color: var(--ink-70); max-width: 26ch; }
.dual .d-cap b { color: var(--color-text); font-weight: 700; }

/* ---- panel 09: two labelled halves ---- */
.voice { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(1rem, 3.5vw, 2.6rem); width: 100%; align-items: start; }
.v-col { display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.v-lab { font-family: var(--font-body); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-55); padding-bottom: 0.45rem; border-bottom: 1px solid var(--color-border); }
.v-col .blns { max-width: none; }
.v-col .regs .reg-row:first-child { border-top: 0; padding-top: 0.35rem; }
.v-col .bln:nth-child(2), .v-col .bln:nth-child(3) { margin-left: 0; }
.v-col .bln + .bln { margin-left: clamp(0.6rem, 2vw, 1.6rem); }
@media (max-width: 860px) { .voice { grid-template-columns: 1fr; gap: 1rem; } }

/* ---- cards: hold their measure but carry real presence on a panel ---- */
.pnl .tf-cards { grid-template-columns: minmax(0, 30rem); }
.pnl .tf-cards.two { grid-template-columns: repeat(2, minmax(0, 27rem)); }
.pnl a.tf-card { padding: clamp(1.25rem, 2.8vw, 1.85rem); border-radius: 14px; }
.pnl .tf-card h4 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); margin-top: 1rem; }
.pnl .tf-card p { font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.02rem); line-height: 1.5; margin-top: 0.6rem; }
.pnl .tf-pill { font-size: 0.64rem; }
.pnl .tf-mark { width: 32px; height: 32px; }
.pnl .tf-mark svg { width: 30px; height: 30px; }
.pnl .tf-src { font-size: 0.66rem; margin-top: 1.15rem; padding-top: 0.85rem; }
@media (max-height: 720px) {
  .pnl a.tf-card { padding: 0.9rem 1.05rem; }
  .pnl .tf-card h4 { font-size: 1.08rem; margin-top: 0.7rem; }
  .pnl .tf-card p { font-size: 0.9rem; margin-top: 0.4rem; }
  .pnl .tf-src { margin-top: 0.75rem; padding-top: 0.55rem; }
  .dual svg { width: 66px; height: 66px; }
  .v-lab { padding-bottom: 0.3rem; }
  .voice { gap: 1rem 1.6rem; }
}

/* panel 08 sits tightest of the deck on short viewports — buy it real headroom */
@media (max-height: 720px) {
  .form-sheet { padding: 0.6rem 0.7rem; }
  .fm-ink { font-size: 0.88rem; line-height: 1.12; }
  .fm-cell { padding: 0.36rem 0.5rem; }
  .fm-head { padding-bottom: 0.45rem; }
}

/* ---- ONE colour mode for the whole deck ----
   The panels used to run two independent colour systems: media panels hardcoded
   the ink palette (#16162a + cream text) while plain panels followed the site
   tokens, which default to paper. Scrolling therefore alternated dark and light,
   and every contrast fix had to be written twice. Both now derive from the same
   theme, so the deck reads as one surface and the header toggle moves all
   thirteen panels together.

   --dk-scrim-rgb is the scrim's own colour. It must match the panel base: a
   semi-transparent scrim over a mismatched base composites toward the wrong end
   and the alphas below stop meaning anything. That mismatch was the bug. */
.dk-body { --dk-scrim-rgb: 245 240 232; --dk-accent-run: #A33636; }
:root[data-theme="ink"] .dk-body { --dk-scrim-rgb: 22 22 42; --dk-accent-run: #F2D9D4; }

/* The opaque base every panel shares. Scrims are semi-transparent, so without a
   known base underneath they composite against whatever the body happens to be. */
.pnl { background: var(--color-bg); }

/* A horizontal ramp only protects left-weighted copy. Panels 03/04/06/09 run
   two-column layouts whose text reaches 76-80% of the width, out where a 100deg
   ramp has decayed to ~0.25 alpha. Hold the scrim even across the full width and
   vary it only vertically, so contrast no longer depends on where a panel's
   content happens to sit. Map markers stay crisp via the z-index:300 rule. */
.pnl-bg .bg-scrim, .pnl-bg-photo .bg-scrim, .pnl-bg-map .bg-scrim, .pnl-bg-vid .bg-scrim,
.pnl-shots .pnl-bg::after { background: linear-gradient(to bottom, rgb(var(--dk-scrim-rgb) / 0.78) 0%, rgb(var(--dk-scrim-rgb) / 0.7) 45%, rgb(var(--dk-scrim-rgb) / 0.84) 100%); }

/* Panel 08's worksheet is the deck's densest content; scale it as a unit on
   short viewports rather than chasing individual paddings. */
@media (max-height: 640px) { .pnl .form { zoom: 0.84; } }

/* Deck-only: the site's muted label tokens land at 3.5-4.4:1 at the 9-11px sizes
   these panels use. Raised at deck scope, so the article and homepage — where
   the same tokens run larger — are untouched. Derived from --color-text rather
   than a literal, so one declaration serves both themes. */
.dk-body { --ink-55: color-mix(in srgb, var(--color-text) 78%, transparent); --ink-70: color-mix(in srgb, var(--color-text) 88%, transparent); }

/* The accent red cannot clear 4.5:1 over the ink scrim at any size (measured
   1.1-3.8:1 across the panel numbers, hours labels and outcome placeholders), so
   accent-coloured runs take a light warm tint in ink and hold the red in paper. */
.pnl .kicker, .pnl .pnl-num b, .pnl .hr-w.is-accent, .pnl .out-slot .num,
.pnl .out-slot .ask, .pnl .accent, .pnl .slab .accent { color: var(--dk-accent-run); }

/* Surfaces that paint a FIXED light fill in both themes own their text colour,
   or they inherit the deck's cream ink and go cream-on-cream. Everything else
   here (.bln, .brwsr, .cm, .tf-fig) derives from --color-surface and flips on
   its own, so it needs no pin — that is the point of collapsing the two modes. */
.pnl .tf-src, .pnl .tf-card .ext { color: rgba(26, 26, 46, 0.75); }
.pnl .form-sheet { color: #1B1B14; }
/* The worksheet sheet is one of those fixed light fills, so its stamp takes the
   darkened red flat rather than the token — the token's ink value would land
   near-white on cream. */
.pnl .fm-stamp { color: #A33636; }
/* The balloon, by contrast, DOES flip with --color-surface, so its label needs
   the token: #A33636 on the paper balloon, the light tint on the ink one. */
.pnl .bln .b-lab { color: var(--dk-accent-run); }

/* ---- panel 13 outcome icons: Flaticon glyph PNGs used as alpha masks so they
   pick up the deck's accent colour in both themes instead of arriving black.
   Attribution for all three lives in the credits dialog. ---- */
.out-slot:has(.out-ico) { justify-items: center; text-align: center; }
.out-ico { display: block; width: clamp(3.4rem, 7vw, 4.75rem); aspect-ratio: 1; margin: 0 auto 0.85rem; background: var(--dk-accent-run, var(--color-accent)); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
@media (max-height: 720px) { .out-ico { width: 3rem; margin-bottom: 0.55rem; } }

/* ---- credits dialog ---- */
.dk-cred-open { font: inherit; color: var(--ink-70); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.dk-cred-open:hover { color: var(--color-accent); }
.dk-cred { width: min(44rem, calc(100vw - 2.5rem)); max-height: min(82vh, 46rem); padding: 0; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); color: var(--color-text); }
.dk-cred::backdrop { background: rgba(8, 8, 10, 0.66); }
.dk-cred .cr-in { display: grid; gap: clamp(1.1rem, 2.6vw, 1.6rem); padding: clamp(1.3rem, 3.4vw, 2.1rem); }
.dk-cred .cr-top { display: flex; align-items: start; gap: 1rem; }
.dk-cred h2 { flex: 1; font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.012em; margin: 0; }
.dk-cred .cr-x { flex: 0 0 auto; width: 2rem; height: 2rem; display: grid; place-items: center; font-family: var(--font-body); font-size: 1.15rem; line-height: 1; color: var(--ink-55); background: none; border: 1px solid var(--color-border); border-radius: 50%; cursor: pointer; }
.dk-cred .cr-x:hover { color: var(--color-text); border-color: var(--color-text); }
.dk-cred .cr-lede { font-family: var(--font-body); font-size: 0.86rem; line-height: 1.6; color: var(--ink-70); max-width: 56ch; margin: 0; text-wrap: pretty; }
.dk-cred .cr-grp { display: grid; gap: 0.5rem; }
.dk-cred .cr-grp h3 { font-family: var(--font-body); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-55); margin: 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); }
.dk-cred .cr-sub { font-family: var(--font-body); font-size: 0.78rem; line-height: 1.5; color: var(--ink-55); margin: 0; }
.dk-cred .cr-list { display: grid; gap: 0.7rem; list-style: none; margin: 0; padding: 0; }
.dk-cred .cr-list li { display: grid; gap: 0.15rem; }
.dk-cred .cr-list a { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.4; color: var(--color-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-text) 35%, transparent); text-underline-offset: 2px; }
.dk-cred .cr-list a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.dk-cred .cr-list span { font-family: var(--font-body); font-size: 0.76rem; line-height: 1.5; color: var(--ink-55); }
.dk-cred .cr-list span a { font-size: inherit; color: var(--ink-70); }