/*
 * Context Conference on demand: the hub (/context-conference/) and the watch
 * pages (/context-conference/<slug>/).
 *
 * CONTEXT CONFERENCE BRANDING, NOT ATLAN CORE (ruled 2026-10-26). Tokens are
 * the --c26-* set from Context26HeroPage.vue, with one deliberate change: every
 * piece of TEXT that the live page sets in the light cool/accent tones is set
 * here in a deepened mix instead, because #5F97F6 on paper is 2.9:1 and the
 * floor is WCAG AA (4.5:1 body, 3:1 large). The plates and glyphs keep the
 * light tones; they carry no text.
 *
 * A static stylesheet rather than component <style> blocks: the site's
 * per-page CSS purge drops any rule whose classes are not in the built HTML,
 * and most of the player's states (ended, copied)
 * only exist after hydration.
 */

.c26od {
  --paper: #F9F9FC;
  --ink: #252530;
  --slate: #555572;
  --hair: #E6E6F0;
  --tint: rgba(210, 212, 246, .34);
  --cool: #5F97F6;
  --cool-deep: #2F66C4;
  --warm: #FD8550;
  --warm-deep: #C74A10;
  --peri: #797DE4;
  --peri-deep: #5357B8;
  --wash: #F9E0D8;
  --cta: linear-gradient(74deg, #2F66C4 18%, #C74A10 100%);
  --strip: linear-gradient(90deg, var(--cool) 0%, var(--warm) 100%);
  --wash-2temp: linear-gradient(74deg, rgba(253,133,80,.13) 0%, rgba(210,212,246,.16) 46%, rgba(95,151,246,.13) 100%);
  --f-display: 'Funnel Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 2px 4px rgba(37,37,48,.04), 0 10px 26px rgba(37,37,48,.06);
  --shadow-up: 0 4px 8px rgba(37,37,48,.05), 0 18px 44px rgba(37,37,48,.10);
  --acc: var(--peri);
  /* the accent as TEXT: 60% accent, 40% ink, which clears 4.5:1 on white and paper for every session's stop */
  --acc-ink: color-mix(in srgb, var(--acc) 60%, var(--ink));
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
}
.c26od *, .c26od *::before, .c26od *::after { box-sizing: border-box; }
/* our sections size to their content. The dev server inlines another
   component's scoped `section { height: 90vh; min-height: 520px }` unscoped
   until its JS swaps the styles in, so locally the intro stood 810px tall and
   the stage jumped up on load (2026-10-29). Production scopes it; this keeps
   local honest too. */
.c26od section { height: auto; min-height: 0; max-height: none; }
.c26od :where(h1, h2, h3, h4, p, ol, ul, figure, blockquote) { margin: 0; padding: 0; }
.c26od :where(ol, ul) { list-style: none; }
.c26od a { color: inherit; text-decoration: none; }
.c26od button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.c26od img { display: block; max-width: 100%; }
.c26od :focus-visible { outline: 2px solid var(--cool-deep); outline-offset: 3px; border-radius: 6px; }
.c26od .od-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html:has(.c26od) { background: #F9F9FC; }
/* The layout's <main> carries an inline overflow-x:hidden, which makes it a
   scroll container and stops position:sticky (the bar, the next-step rail)
   from ever sticking. clip hides the same overflow without that side effect. */
html:has(.c26od) #main-content { overflow-x: clip !important; }

.od-wrap { width: min(1240px, calc(100% - 32px)); margin-inline: auto; }
@media (min-width: 768px) { .od-wrap { width: min(1240px, calc(100% - 48px)); } }
@media (min-width: 1536px) { .od-wrap { width: min(1340px, calc(100% - 48px)); } }

/* ---------- type ---------- */
.od-kicker { font-family: var(--f-mono); font-weight: 600; font-size: 12px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--acc-ink); }
.od-h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(26px, 2.6vw, 42px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.od-sub { font-size: clamp(15.5px, 1.1vw, 18px); line-height: 1.6; color: var(--slate); text-wrap: pretty; }
.od-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.od-head .od-sub { max-width: 40em; margin-top: 10px; }
.od-note { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }

/* ---------- group chip ---------- */
.od-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid currentColor; font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.od-chip svg { width: 10px; height: 10px; }
.od-chip--ideas { color: var(--cool-deep); }
.od-chip--product { color: var(--warm-deep); }
.od-chip--open-source { color: var(--peri-deep); }

/* ---------- buttons (the conference's own: deep two-temperature fill, AA with white) ---------- */
.c26od .od-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 8px; font-family: var(--f-body); font-weight: 600; font-size: 16px; letter-spacing: -0.005em; white-space: nowrap; transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease); }
.c26od .od-btn svg { width: 11px; height: 11px; flex: none; transition: transform 240ms var(--ease); }
.c26od .od-btn:hover svg { transform: translateX(3px); }
.c26od .od-btn:active { transform: translateY(1px); }
.c26od .od-btn--primary { color: #fff; background: var(--cta); box-shadow: 0 1px 2px rgba(37,37,48,.12), 0 8px 20px rgba(47,102,196,.20); }
.c26od .od-btn--primary:hover { box-shadow: 0 1px 2px rgba(37,37,48,.12), 0 12px 28px rgba(199,74,16,.22); }
.c26od .od-btn--ghost { color: var(--ink); background: #fff; border: 1.5px solid var(--hair); }
.c26od .od-btn--ghost:hover { border-color: var(--cool); }
.c26od .od-btn--ink { color: #fff; background: var(--ink); }
.c26od .od-btn--ink:hover { background: #3A3A48; }
.c26od .od-btn--sm { height: 38px; padding: 0 16px; font-size: 14px; border-radius: 7px; }
.c26od .od-btn--block { width: 100%; }
.c26od .od-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.c26od .od-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--acc-ink); }
.od-link svg { width: 10px; height: 10px; transition: transform 240ms var(--ease); }
.od-link:hover svg { transform: translateX(3px); }

/* ---------- nav ---------- */
.od-nav { position: sticky; top: 0; z-index: 60; background: rgba(249,249,252,.86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--hair); }
.od-nav-in { display: flex; align-items: center; gap: 16px; height: 64px; }
.od-nav-brand img { width: 76px; height: 26px; }
.od-nav-links { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.od-nav-links a { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); transition: color 180ms var(--ease); }
.c26od .od-nav .od-btn { margin-left: 8px; }
@media (max-width: 759px) {
  .od-nav-links a { display: none; }
}

/* ---------- the poster: the agenda card's plate, glyph and halftone faces ---------- */
.od-poster { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; isolation: isolate;
  background: linear-gradient(115deg, #fff 0%, #fff 34%, color-mix(in srgb, var(--acc) 12%, #fff) 100%); }
.od-poster-plate { position: absolute; top: 0; bottom: 0; left: 58%; right: -40%; transform: skewX(-18deg); transform-origin: top left; z-index: 0;
  background: linear-gradient(155deg, color-mix(in srgb, var(--acc) 88%, var(--ink)) 0%, var(--acc) 72%, color-mix(in srgb, var(--acc) 78%, #fff) 100%); }
.od-poster-glyph { position: absolute; top: 50%; right: 4%; width: 34%; aspect-ratio: 1; transform: translateY(-50%); color: #fff; z-index: 1; }
.od-poster-faces { position: absolute; left: 5%; right: 30%; bottom: 0; top: 14%; display: flex; align-items: flex-end; }
/* the portraits are transparent cut-outs from the speaker kit (2026-10-30), so
   they stand on the plate as they are; the old white-ground photos were
   multiplied in, which left a pale box wherever one crossed the plate */
.od-poster-faces img { height: 100%; width: auto; max-width: none; object-fit: cover; object-position: top center; aspect-ratio: 4 / 5; margin-right: -9%; }
.od-poster-faces[data-n="1"] img { height: 108%; margin-bottom: -6%; }
.od-poster-faces[data-n="2"] img { height: 96%; margin-right: -14%; }
.od-poster-faces[data-n="3"] img { height: 82%; margin-right: -16%; }
.od-poster-faces[data-n="4"] img, .od-poster-faces[data-n="5"] img { height: 70%; margin-right: -20%; }
.od-poster-faces[data-many] img { height: 46%; margin-right: -12%; }
.od-poster-len { position: absolute; right: 10px; bottom: 10px; z-index: 3; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 6px; background: rgba(37,37,48,.86); color: #fff; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; }
.od-poster-play { position: absolute; left: 50%; top: 50%; z-index: 3; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 8px 30px rgba(37,37,48,.22); display: grid; place-items: center; transform: scale(.86); opacity: 0; transition: transform 320ms var(--ease), opacity 220ms var(--ease); }
.od-poster-play svg { width: 20px; height: 20px; margin-left: 3px; color: var(--acc-ink); }
.od-poster--hero .od-poster-play { width: 88px; height: 88px; margin: -44px 0 0 -44px; opacity: 1; transform: none; }
.od-poster--hero .od-poster-play svg { width: 28px; height: 28px; }
.od-poster--mini { border-radius: 6px; }
.od-poster--mini .od-poster-len { display: none; }
a:hover .od-poster-play, a:focus-visible .od-poster-play, button:hover .od-poster-play { opacity: 1; transform: none; }

/* ---------- HUB ---------- */
.od-stamp { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--hair); box-shadow: 0 1px 2px rgba(37,37,48,.05); font-family: var(--f-mono); font-weight: 500; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.od-stamp i { width: 8px; height: 8px; border-radius: 50%; background: var(--strip); }

/* the notify form, shown in place of the CTAs before the recordings land */

.od-section { padding: clamp(40px, 5vw, 88px) 0; }
.od-section + .od-section { padding-top: 0; }

/* the day, replayed: the agenda timeline, now a playlist */
.od-list { display: flex; flex-direction: column; gap: 18px; }
.od-row { display: grid; grid-template-columns: 64px 22px minmax(0, 1fr); column-gap: 14px; }
.od-rail { position: relative; }
.od-rail::before { content: ''; position: absolute; left: calc(50% - .5px); top: -18px; bottom: -18px; width: 1px; background: var(--hair); }
.od-row:first-child .od-rail::before { top: 30px; }
.od-row:last-child .od-rail::before { bottom: auto; height: 30px; }
.od-rail::after { content: ''; position: absolute; left: 50%; top: 30px; width: 11px; height: 11px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px var(--paper); }
.od-card { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(18px, 2.2vw, 32px); align-items: center; padding: 14px clamp(14px, 1.6vw, 22px) 14px 14px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); transition: transform 420ms var(--ease), box-shadow 420ms var(--ease); }
.od-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
.od-card-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 6px 0; }
.od-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.od-card-title { font-family: var(--f-display); font-weight: 500; font-size: clamp(21px, 1.75vw, 29px); line-height: 1.14; letter-spacing: -0.02em; text-wrap: balance; transition: color 240ms var(--ease); }
.od-card:hover .od-card-title { color: var(--acc-ink); }
.od-card-desc { font-size: 15px; line-height: 1.55; color: var(--slate); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.od-card-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14.5px; }

.od-faces { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.od-who { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.od-who img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--tint); }

@media (max-width: 899px) {
  .od-card { grid-template-columns: minmax(0, 1fr); padding: 12px 12px 18px; }
  .od-card-body { padding: 4px 6px 0; }
}
@media (max-width: 599px) {
  /* the stamp folds into the card's meta line; the rail and dot stay */
  .od-row { grid-template-columns: 12px minmax(0, 1fr); column-gap: 10px; }
  .od-row:first-child .od-rail::before, .od-rail::after { top: 24px; }
}
@media (max-width: 599px) { .od-card-time { display: inline; font-family: var(--f-mono); font-size: 12px; color: var(--slate); } }

/* (retired 2026-10-27: the full-day band) */

/* speakers: each portrait opens the speaker's session */

/* resources */
.od-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.od-res a, .od-res div.od-res-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 196px; padding: 16px 16px 20px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); overflow: hidden; transition: transform 420ms var(--ease), box-shadow 420ms var(--ease); }
.od-res a:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
.od-res-title { font-family: var(--f-display); font-weight: 500; font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; }
.od-res-line { font-size: 14.5px; line-height: 1.5; color: var(--slate); }
.od-res .od-link { margin-top: auto; }
.od-res-art { position: relative; height: 112px; margin: -8px -8px 6px; border-radius: 10px; background: var(--wash-2temp), var(--paper); overflow: hidden; }
.od-res-art canvas { position: absolute; left: 14px; top: 8px; width: 96px; height: 96px; color: var(--peri-deep); }
.od-res-art img { position: absolute; right: 18px; top: 14px; width: 74px; transform: rotate(-5deg); border-radius: 3px; box-shadow: 0 8px 22px rgba(37,37,48,.18); }

/* closing band */
.od-close { position: relative; overflow: hidden; border-radius: 16px; padding: clamp(32px, 5vw, 72px); background: var(--wash-2temp), #fff; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.od-close .od-sub { margin-top: 12px; max-width: 36em; }

/* ---------- WATCH PAGE ---------- */
.od-crumbs { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; }
.od-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--slate); transition: color 180ms var(--ease); }
.od-back:hover { color: var(--ink); }
.od-back svg { width: 10px; height: 10px; transform: scaleX(-1); }
/* phones and tablets: the next step sits under the title, not under the transcript */
.od-next--inline { margin-top: 22px; }
@media (min-width: 1100px) { .od-next--inline { display: none; } }

/* the player */
.od-player { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--ink); box-shadow: var(--shadow); }
.od-player > .od-poster { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.od-player-start { position: absolute; inset: 0; z-index: 4; display: block; width: 100%; cursor: pointer; }
.od-player-frame { position: absolute; inset: 0; z-index: 5; }
.od-player-frame iframe { width: 100% !important; height: 100% !important; border: 0; display: block; }
.od-player-cap { position: absolute; left: 50%; top: calc(50% + 60px); transform: translateX(-50%); z-index: 4; pointer-events: none; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,.9); padding: 5px 10px; border-radius: 6px; white-space: nowrap; }
/* muted autoplay's way back to sound, over the video's top-left corner */
.c26od .od-unmute { position: absolute; left: 14px; top: 14px; z-index: 7; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--ink); font-size: 14px; font-weight: 600; box-shadow: 0 4px 16px rgba(37,37,48,.22); cursor: pointer; }
.c26od .od-unmute svg { width: 16px; height: 16px; }
.c26od .od-unmute:hover { background: #fff; }

/* overlays on the player: the end card */
.od-over { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 20px; }
.od-over--scrim { background: rgba(37,37,48,.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* the paid gate on /p/context-conference/: the same scrim and panel, over the whole page */
.od-over--page { position: fixed; z-index: 70; } /* over the sticky .od-nav (60) */
.od-over--page .od-panel:focus { outline: none; }
html.c26od-gated, html.c26od-gated body { overflow: hidden; }
.od-panel { width: min(520px, 100%); padding: clamp(20px, 2.6vw, 32px); border-radius: 14px; background: #fff; box-shadow: 0 24px 60px rgba(37,37,48,.28); text-align: left; max-height: 100%; overflow: auto; }
.od-panel .od-kicker { color: var(--cool-deep); }
.od-panel-title { margin-top: 10px; font-family: var(--f-display); font-weight: 500; font-size: clamp(22px, 2vw, 30px); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.od-panel p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--slate); }
.od-panel .od-form { margin-top: 18px; }
.od-panel-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.od-ended-next { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 10px; border-radius: 10px; border: 1px solid var(--hair); }
.od-ended-next .od-poster { width: 132px; flex: none; }
.od-ended-next b { display: block; font-size: 15px; line-height: 1.3; }
.od-ring { width: 18px; height: 18px; transform: rotate(-90deg); }
.od-ring circle { fill: none; stroke-width: 3; }
.od-ring .od-ring-bg { stroke: rgba(255,255,255,.35); }
.od-ring .od-ring-fg { stroke: #fff; stroke-dasharray: 50.27; stroke-dashoffset: var(--off, 0); transition: stroke-dashoffset 1s linear; }

/* HubSpot inside the conference skin, keyed on the static wrapper (.od-form) so the purge keeps it */
.od-form .hs-form-private, .od-form form { display: flex; flex-direction: column; gap: 10px; margin: 0 !important; }
.od-form .hs-form-field { margin: 0 !important; width: 100% !important; }
.od-form fieldset { max-width: none !important; width: 100% !important; margin: 0 !important; }
.od-form .hs-form-field > label { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; display: block; }
.od-form .hs-input:not([type='checkbox']):not([type='radio']) { width: 100% !important; height: 48px !important; padding: 0 14px !important; border-radius: 8px !important; border: 1.5px solid var(--hair) !important; background: #fff !important; font-family: var(--f-body) !important; font-size: 16px !important; color: var(--ink) !important; }
.od-form .hs-input:focus { border-color: var(--cool) !important; }
.od-form .hs-button { width: 100% !important; height: 48px !important; border: 0 !important; border-radius: 8px !important; background: var(--cta) !important; color: #fff !important; font-family: var(--f-body) !important; font-weight: 600 !important; font-size: 16px !important; cursor: pointer; padding: 0 20px !important; }
.od-form .hs-error-msgs label, .od-form .hs-error-msg { color: #B4232B !important; font-size: 13px !important; }
.od-form .legal-consent-container, .od-form .hs-richtext { font-size: 12px !important; color: var(--slate) !important; line-height: 1.5 !important; }
.od-form .submitted-message { font-weight: 600; color: var(--ink); }

/* the playlist rail beside the player */

/* title block */
.od-title { margin-top: 12px; font-family: var(--f-display); font-weight: 500; font-size: clamp(28px, 3vw, 46px); line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; }
.od-people { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 22px; }
.od-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.od-person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--tint); flex: none; }
.od-person b { display: block; font-size: 15px; font-weight: 600; }
.od-person span { display: block; font-size: 13px; color: var(--slate); max-width: 26ch; }
.od-share { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.c26od .od-share .od-btn { height: 36px; font-size: 13.5px; padding: 0 14px; }
.c26od .od-share .od-btn svg { width: 14px; height: 14px; }
.c26od .od-share .od-btn:hover svg { transform: none; }

.od-block { margin-top: clamp(32px, 3vw, 44px); padding-top: clamp(24px, 2.4vw, 32px); border-top: 1px solid var(--hair); }
.od-block-h { font-family: var(--f-display); font-weight: 500; font-size: 22px; letter-spacing: -0.015em; margin-bottom: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.od-block-h small { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); font-weight: 400; }

.od-chapters li + li { border-top: 1px solid var(--hair); }
.od-chapters li { display: flex; align-items: center; gap: 8px; border-radius: 8px; transition: background-color 180ms var(--ease); }
.od-chapters li:hover { background: #fff; }
.od-chapters li.is-on { background: color-mix(in srgb, var(--acc) 9%, #fff); }
.od-chapters button { flex: 1; min-width: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 10px; text-align: left; }
.od-chapters button:disabled { cursor: default; }
.od-chapters time { font-family: var(--f-mono); font-size: 13px; color: var(--acc-ink); font-weight: 500; }
.od-chapters span { font-size: 15px; line-height: 1.4; }
.od-empty { padding: 16px; border-radius: 10px; border: 1px dashed var(--hair); background: #fff; font-size: 14.5px; color: var(--slate); }

.od-tx { position: relative; max-height: 380px; overflow: hidden; }
.od-tx.is-open { max-height: none; }
.od-tx:not(.is-open)::after { content: ''; position: absolute; inset: auto 0 0 0; height: 120px; background: linear-gradient(180deg, rgba(249,249,252,0) 0%, var(--paper) 90%); pointer-events: none; }
.od-tx p { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 8px 0; font-size: 15.5px; line-height: 1.65; color: #3A3A4A; }
.od-tx p.is-on { color: var(--ink); }
.od-tx button { font-family: var(--f-mono); font-size: 12.5px; color: var(--acc-ink); text-align: left; align-self: start; padding-top: 3px; }
/* the speaker's name heads their turn, shown only when the speaker changes */
.od-tx strong { display: block; margin-bottom: 2px; font-weight: 600; color: var(--ink); }
.od-tx-more { margin-top: 12px; }
@media (max-width: 599px) { .od-tx p { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; } }

/* the next step: the one ask on a watch page */
.od-next { position: relative; padding: 22px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.od-next::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--acc), var(--warm)); }
.od-next-line { margin-top: 10px; font-weight: 600; font-size: 18px; line-height: 1.35; letter-spacing: -0.01em; }
.c26od .od-next .od-btn { margin-top: 18px; }

/* the bottom of a watch page: the rest of the day */
.od-more { padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--hair); }
.od-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.od-tile { display: flex; flex-direction: column; gap: 10px; }
.od-tile b { font-size: 15px; line-height: 1.35; font-weight: 600; transition: color 240ms var(--ease); }
.od-tile:hover b { color: var(--acc-ink); }
.od-tile > span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
@media (max-width: 1099px) { .od-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the ASCII field layer (the thank-you page's recipe) */
.c26-fieldlayer { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 760ms cubic-bezier(0.16, 1, 0.3, 1); }
.c26-fieldwash { position: absolute; left: 0; right: 0; top: 0; background: radial-gradient(52% 58% at 104% 88%, #F9E0D8 0%, rgba(249, 224, 216, 0) 62%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0) 100%); will-change: transform; }
.c26-fieldlayer canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform: translate3d(0, 14px, 0); transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1); }
html.c26-fieldlayer-on .c26-fieldlayer { opacity: 1; }
html.c26-fieldlayer-on .c26-fieldlayer canvas { transform: none; }
html.c26-fieldlayer-on .c26od { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .c26od *, .c26od *::before, .c26od *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .c26-fieldlayer canvas { transform: none; }
}
.od-player-frame > div { width: 100%; height: 100%; }
@media (min-width: 1100px) { .od-more--narrow-only { display: none; } }

/* =====================================================================
   AFTER LAUNCH: one line of hero, then every recording on one screen.
   Three layouts under review (2026-10-26): wall, stage, timeline.
   ===================================================================== */

/* ---------- WATCH PAGE, v2 (2026-10-26): one pinned rail ----------
   Chapters, then the rest of the day, then Go deeper, all in the right
   column. Rows are compact so the Go deeper card lands beside the player. */
.od-watch { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; padding-bottom: clamp(48px, 6vw, 88px); }
.od-watch-player { scroll-margin-top: 80px; }
.od-watch-body { margin-top: 26px; }
.od-rail2 { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 12px; }
.od-rail-card { border-radius: 14px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.od-rail-ch { padding: 0 8px 8px; }
.od-rail-ch li { position: relative; display: flex; align-items: center; }
.od-rail-ch button { flex: 1; min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 7px; text-align: left; font-size: 13.5px; line-height: 1.3; transition: background-color 160ms var(--ease); }
.od-rail-ch button:hover:not(:disabled) { background: var(--paper); }
.od-rail-ch button:disabled { cursor: default; }
.od-rail-ch button.is-on { background: color-mix(in srgb, var(--acc) 11%, #fff); box-shadow: inset 2px 0 0 var(--acc); }
.od-rail-ch time { font-family: var(--f-mono); font-size: 12px; color: var(--acc-ink); }
.od-rail-ch span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-rail-open { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: var(--acc-ink); }
.od-rail-open:hover { background: var(--paper); }
.od-rail-open svg { width: 9px; height: 9px; }
.od-rail-list { max-height: 214px; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px; scrollbar-width: thin; }
.od-rail-card.is-solo .od-rail-list { max-height: 360px; }
.od-rail-list a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; transition: background-color 160ms var(--ease); }
.od-rail-list a:hover { background: var(--paper); }
.od-rail-list .od-poster { border-radius: 4px; }
.od-rail-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.od-rail-t b { font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-rail-t span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); }
.od-next--rail { padding: 16px 16px 16px; }
.od-next--rail .od-next-row { display: flex; align-items: flex-start; gap: 12px; }
.od-next--rail .od-next-line { font-size: 15px; line-height: 1.38; margin-top: 8px; flex: 1; }
.c26od .od-next--rail .od-btn { height: 42px; margin-top: 14px; font-size: 15px; }
/* the phone chapters sit right under the title: five rows, then "Show all" */
.od-chm { margin-top: 22px; }
.od-chapters:not(.is-open) li:nth-child(n + 6) { display: none; }
.c26od .od-chm-more { margin-top: 10px; }
.od-narrow { display: none; }
@media (max-width: 1099px) {
  .od-watch { grid-template-columns: minmax(0, 1fr); }
  .od-rail2 { display: none; }
  .od-narrow { display: block; }
}

/* ---------- B. THE STAGE (light, 2026-10-26: the dark room read wrong) ----------
   One wide stage with a muted preview of the picked session, the copy on a
   paper scrim to its left, every recording in a strip beneath. */
.ods { padding: 0 0 clamp(32px, 3.6vw, 56px); }
.ods-stage { position: relative; aspect-ratio: 2.55 / 1; border-radius: 16px; overflow: hidden; isolation: isolate; background: #fff; box-shadow: var(--shadow-up); }
/* the session's accent plate, cut like the agenda cards' */
.ods-plate { position: absolute; top: 0; bottom: 0; left: 76%; right: -40%; transform: skewX(-18deg); transform-origin: top left; z-index: 0;
  background: linear-gradient(155deg, color-mix(in srgb, var(--acc) 88%, var(--ink)) 0%, var(--acc) 72%, color-mix(in srgb, var(--acc) 78%, #fff) 100%); }
.ods-bg { position: absolute; left: 0; width: 100%; height: 131.25%; top: -15.625%; border: 0; z-index: 2; opacity: 0; transition: opacity 900ms var(--ease); pointer-events: none; }
.ods-bg.is-on { opacity: 1; }
.ods-scrim { position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg, rgba(249,249,252,.97) 0%, rgba(249,249,252,.9) 30%, rgba(249,249,252,.35) 48%, rgba(249,249,252,0) 60%); }
.ods-copy { position: absolute; z-index: 4; left: clamp(20px, 3.4vw, 52px); top: 50%; transform: translateY(-50%); width: min(40%, 500px); }
.ods-meta { display: flex; gap: 14px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-ink); }
.ods-title { margin-top: 12px; font-family: var(--f-display); font-weight: 500; font-size: clamp(26px, 2.9vw, 46px); line-height: 1.05; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.ods-who { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--slate); }
.ods-actions { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.ods-strip { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ods-thumb { display: flex; flex-direction: column; gap: 12px; padding: 6px; border-radius: 10px; transition: background-color 240ms var(--ease); }
.ods-thumb:hover, .ods-thumb.is-on { background: #fff; box-shadow: var(--shadow); }
.ods-thumb .od-poster { border-radius: 6px; box-shadow: 0 0 0 2px transparent; transition: box-shadow 240ms var(--ease); }
.ods-thumb.is-on .od-poster { box-shadow: 0 0 0 2px var(--acc); }
.ods-thumb-time { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.ods-thumb-title { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1023px) {
  .ods-stage { aspect-ratio: 16 / 11; }
  .ods-scrim { background: linear-gradient(0deg, rgba(249,249,252,.98) 0%, rgba(249,249,252,.9) 36%, rgba(249,249,252,0) 62%); }
  .ods-copy { top: auto; bottom: 18px; transform: none; width: auto; right: 18px; }
  .ods-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .ods-strip li { flex: 0 0 150px; scroll-snap-align: start; }
}

/* ---------- WATCH PAGE rail: two tabs, Chapters (default) and Rest of the day ---------- */
.od-tabs { display: flex; border-bottom: 1px solid var(--hair); padding: 0 8px; }
.od-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; font-size: 14px; font-weight: 600; color: var(--slate); box-shadow: inset 0 -2px 0 transparent; transition: color 160ms var(--ease), box-shadow 160ms var(--ease); }
.od-tab:hover { color: var(--ink); }
.od-tab[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--acc); }
.od-tab span { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--paper); border: 1px solid var(--hair); font-family: var(--f-mono); font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; }
.od-tabpanel { height: 300px; overflow-y: auto; overscroll-behavior: contain; padding: 8px 8px 10px; scrollbar-width: thin; }
.od-tabpanel .od-rail-ch, .od-tabpanel .od-rail-list { padding: 0; max-height: none; overflow: visible; }

/* ---------- WATCH PAGE rail, round 3 (2026-10-26) ----------
   Chapters read at body size and weight, and the rail is cut to the player's
   height (measured into --player-h): the tab card takes what Go deeper leaves,
   and the chapter rows spread to fill it. */
.od-watch.has-h .od-rail2 { height: var(--player-h); }
.od-watch.has-h .od-rail-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.od-watch.has-h .od-tabpanel { flex: 1 1 auto; height: auto; min-height: 0; }
.od-watch.has-h .od-tabpanel .od-rail-ch { min-height: 100%; display: flex; flex-direction: column; }
.od-watch.has-h .od-tabpanel .od-rail-ch li { flex: 1 0 auto; min-height: 36px; max-height: 56px; }
.od-rail-ch button { font-size: 15px; font-weight: 500; line-height: 1.3; padding: 8px 10px; align-items: center; grid-template-columns: 52px minmax(0, 1fr); height: 100%; }
.od-rail-ch button.is-on { font-weight: 600; }
.od-rail-ch time { font-size: 13px; font-weight: 600; }
.od-rail-t b { font-size: 14px; }
.od-chapters span { font-weight: 500; }

/* Go deeper: an image slot beside the line */
.od-next-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.od-next--rail .od-next-row .od-next-line, .od-next-row .od-next-line { margin-top: 0; flex: 1; }
.od-next-img { flex: none; width: 96px; aspect-ratio: 3 / 2; height: auto; border-radius: 8px; object-fit: cover; background: var(--paper); box-shadow: 0 4px 14px rgba(37,37,48,.12); }
.od-next-img--empty { display: grid; place-items: center; border: 1.5px dashed var(--hair); box-shadow: none; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
/* round 3 fit: Go deeper never shrinks (it was being clipped), chapter names
   wrap to two lines instead of truncating, and the rail is never shorter than
   520px so eight chapters show without scrolling at laptop widths */
.od-watch { grid-template-columns: minmax(0, 1fr) 372px; }
/* the wider rail is desktop only: below 1100px the rail is hidden and the
   page is one column (without this, phones got a 0px main column) */
@media (max-width: 1099px) { .od-watch { grid-template-columns: minmax(0, 1fr); } }
.od-watch.has-h .od-rail2 { height: max(var(--player-h), 520px); }
.od-next--rail { flex: none; padding: 14px 16px; }
.od-next--rail .od-next-img { width: 84px; }
.od-next--rail .od-next-line { font-size: 14.5px; line-height: 1.35; }
.c26od .od-next--rail .od-btn { margin-top: 12px; }
.od-tab { height: 44px; }
.od-tabpanel { padding: 6px 8px 8px; }
.od-watch.has-h .od-tabpanel .od-rail-ch li { min-height: 32px; max-height: none; }
.od-rail-ch button { padding: 6px 10px; }
.od-rail-ch span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- WATCH PAGE, round 4 (2026-10-27): YouTube's order ----------
   Title alone, the actions under it, then one description box collapsed to
   two lines; opening it shows the session line, the speakers, the transcript. */
.od-watch-body .od-title { margin-top: 0; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.15; letter-spacing: -0.02em; }
.c26od .od-watch-body .od-share { margin-top: 14px; }
.od-desc { position: relative; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 5%, var(--paper)); cursor: pointer; transition: background-color 180ms var(--ease); }
.od-desc:hover:not(.is-open) { background: color-mix(in srgb, var(--ink) 8%, var(--paper)); }
.od-desc.is-open { cursor: default; }
.od-desc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; font-weight: 600; color: var(--ink); }
.od-desc-meta b { font-weight: 700; }
.od-desc-meta span { font-weight: 500; color: #3A3A4A; }
.od-desc-body { position: relative; margin-top: 6px; }
.od-desc-text { font-size: 15px; line-height: 1.6; color: #2F2F3C; max-width: 72ch; }
.od-desc:not(.is-open) .od-desc-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c26od .od-desc-more { position: absolute; right: 0; bottom: 0; padding-left: 48px; font-size: 15px; line-height: 1.6; font-weight: 700; color: var(--ink); background: linear-gradient(90deg, rgba(240,240,245,0) 0%, color-mix(in srgb, var(--ink) 5%, var(--paper)) 40%); }
.c26od .od-desc:hover .od-desc-more { background: linear-gradient(90deg, rgba(234,234,240,0) 0%, color-mix(in srgb, var(--ink) 8%, var(--paper)) 40%); }
.od-desc-sec { margin-top: 20px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.od-desc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-family: var(--f-display); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
.od-desc-h small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); font-weight: 400; }
.od-desc .od-people { margin-top: 0; }
.od-desc .od-empty { background: transparent; border-color: color-mix(in srgb, var(--ink) 14%, transparent); }
.od-desc .od-tx:not(.is-open)::after { background: linear-gradient(180deg, rgba(240,240,245,0) 0%, color-mix(in srgb, var(--ink) 5%, var(--paper)) 90%); }
.c26od .od-desc-less { margin-top: 16px; font-size: 15px; font-weight: 700; color: var(--ink); }
.od-next--inline { margin-top: 16px; }

/* Summarise with AI */
.od-ask { position: relative; }
.od-ask-spark { width: 15px !important; height: 15px !important; }
.od-ask-btn .od-ask-spark path:first-child { fill: var(--cool-deep); }
.od-ask-btn .od-ask-spark path:last-child { fill: var(--warm-deep); }
.od-ask-caret { width: 10px !important; height: 10px !important; transition: transform 200ms var(--ease) !important; }
.od-ask.is-open .od-ask-caret { transform: rotate(180deg) !important; }
.od-ask-btn:hover .od-ask-caret { transform: none; }
.od-ask-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: 260px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 2px 6px rgba(37,37,48,.08), 0 18px 44px rgba(37,37,48,.16); border: 1px solid var(--hair); }
.od-ask-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) 12px; gap: 10px; align-items: center; height: 42px; padding: 0 10px; border-radius: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); transition: background-color 160ms var(--ease); }
.od-ask-item:hover, .od-ask-item:focus-visible { background: var(--paper); }
.od-ask-mark { display: grid; place-items: center; width: 22px; height: 22px; }
.od-ask-mark svg { width: 18px; height: 18px; }
.od-ask-mark[data-tool="claude"] { color: #D97757; }
.od-ask-mark[data-tool="chatgpt"] { color: #10A37F; }
.od-ask-mark[data-tool="perplexity"] { color: #1F6F78; }
.od-ask-out { width: 11px; height: 11px; color: var(--slate); }
.od-ask-note { padding: 8px 10px 4px; border-top: 1px solid var(--hair); margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--slate); }

/* ---------- THE INTRO PANEL (2026-10-27) ----------
   What Context Conference is, in a tag, a title, two sentences and a button,
   for the visitor who never registered. Wordmark left, copy right. */
.od-intro { padding: clamp(20px, 2.4vw, 32px) 0 clamp(20px, 2.2vw, 30px); }
.od-intro-card { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); border-radius: 16px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.od-intro-mark { display: grid; place-items: center; padding: clamp(24px, 3vw, 40px); background: var(--wash-2temp), var(--paper); border-right: 1px solid var(--hair); }
.od-intro-mark img { width: min(380px, 86%); height: auto; }
.od-intro-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(22px, 2.8vw, 40px); }
.od-intro-title { font-family: var(--f-display); font-weight: 500; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; }
.od-intro-desc { font-size: 16px; line-height: 1.6; color: var(--slate); max-width: 56ch; text-wrap: pretty; }
.c26od .od-intro .od-btn { margin-top: 4px; }
@media (max-width: 899px) {
  .od-intro-card { grid-template-columns: minmax(0, 1fr); }
  .od-intro-mark { border-right: 0; border-bottom: 1px solid var(--hair); padding: 22px; }
  .od-intro-mark img { width: min(260px, 70%); }
}

/* intro, compacted (round 6): the description and the button share a row,
   so the panel stays a band rather than a second hero */
.od-intro-card { grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.42fr); }
.od-intro-mark { padding: 18px 24px; }
.od-intro-mark img { width: min(270px, 84%); }
.od-intro-copy { gap: 10px; padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 32px); }
.od-intro .od-stamp { height: 28px; font-size: 11.5px; padding: 0 12px; }
.od-intro-title { font-size: clamp(24px, 2.2vw, 32px); }
.od-intro-row { display: flex; align-items: center; gap: 16px 32px; width: 100%; }
.od-intro-desc { flex: 1; font-size: 15px; line-height: 1.55; max-width: 62ch; }
.c26od .od-intro .od-btn { margin-top: 0; flex: none; }
@media (max-width: 899px) { .od-intro-row { flex-direction: column; align-items: flex-start; } }
@media (max-width: 899px) {
  .od-intro-card { grid-template-columns: minmax(0, 1fr); }
  .od-intro-mark { padding: 18px; }
  .od-intro-mark img { width: min(220px, 64%); }
}
.od-intro .od-stamp { white-space: nowrap; }
@media (max-width: 480px) { .od-intro .od-stamp { font-size: 10.5px; letter-spacing: .08em; padding: 0 10px; gap: 8px; } }

/* the intro, flat (round 7, 2026-10-27): a normal hero on the page, not a
   floating card. Wordmark left, copy right, no plate, no border, no shadow. */
.od-intro { padding: clamp(32px, 4vw, 56px) 0 clamp(28px, 3vw, 44px); }
.od-intro-card { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: clamp(28px, 4vw, 64px); align-items: center; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.od-intro-mark { display: block; padding: 0; background: none; border: 0; }
.od-intro-mark img { width: min(300px, 100%); }
.od-intro-copy { padding: 0; }
@media (max-width: 899px) {
  .od-intro-card { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .od-intro-mark { padding: 0; border: 0; }
  .od-intro-mark img { width: min(220px, 64%); }
}
.od-intro .od-intro-mark { display: block; justify-self: start; place-items: start; text-align: left; }
.od-intro .od-intro-mark img { margin: 0; }
/* round 8: the copy block sits at the right edge (text still left-aligned),
   the wordmark holds the left; the space between them is the point */
.od-intro-card { grid-template-columns: auto minmax(0, 660px); justify-content: space-between; }
.od-intro-copy { justify-self: end; width: 100%; max-width: 660px; }
.od-intro-desc { max-width: none; }
@media (max-width: 899px) {
  .od-intro-card { grid-template-columns: minmax(0, 1fr); }
  .od-intro-copy { justify-self: start; max-width: none; }
}
/* the before-launch button sits under the description, not beside it */
.od-intro-row { flex-direction: column; align-items: flex-start; gap: 18px; }

/* the intro after launch (2026-10-29): a slim band, smaller wordmark and the
   title alone, so the stage is the first thing on screen */
.od-intro--live { padding: clamp(18px, 2vw, 28px) 0 clamp(14px, 1.6vw, 22px); }
.od-intro--live .od-intro-card { align-items: center; }
.od-intro--live .od-intro-mark img { width: min(180px, 100%); }
.od-intro--live .od-intro-copy { max-width: none; width: auto; }
@media (max-width: 899px) {
  .od-intro--live .od-intro-card { gap: 12px; }
  .od-intro--live .od-intro-mark img { width: min(150px, 50%); }
}

/* ---------- round 9 (2026-10-27) ---------- */
/* stage strip titles a touch larger */
.ods-thumb-title { font-size: 13.5px; }
/* pre-launch list: no time column, the rail and its dots carry the order */
.od-row { grid-template-columns: 22px minmax(0, 1fr); }
@media (max-width: 599px) { .od-row { grid-template-columns: 12px minmax(0, 1fr); } }
/* the description box: a light wash of the session's own colour instead of grey */
.od-desc { background: color-mix(in srgb, var(--acc) 7%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 14%, #fff); }
.od-desc:hover:not(.is-open) { background: color-mix(in srgb, var(--acc) 10%, #fff); }
.c26od .od-desc-more { background: linear-gradient(90deg, rgba(255,255,255,0) 0%, color-mix(in srgb, var(--acc) 7%, #fff) 40%); }
.c26od .od-desc:hover .od-desc-more { background: linear-gradient(90deg, rgba(255,255,255,0) 0%, color-mix(in srgb, var(--acc) 10%, #fff) 40%); }
.od-desc .od-tx:not(.is-open)::after { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, color-mix(in srgb, var(--acc) 7%, #fff) 90%); }
.od-desc-sec { border-top-color: color-mix(in srgb, var(--acc) 18%, #fff); }
/* chapters tab before a recording has chapters */
.od-rail-empty { padding: 14px 10px; font-size: 14.5px; line-height: 1.5; color: var(--slate); }
.c26od .od-rail-empty button { display: block; margin-top: 8px; font-weight: 600; color: var(--acc-ink); }

/* Rest of the day, YouTube's sidebar (round 10): bigger thumbnails with the
   length printed on them, bigger titles, no tag line */
.od-rail-list a { grid-template-columns: 136px minmax(0, 1fr); gap: 12px; align-items: start; padding: 6px; }
.od-rail-list .od-rail-thumb { border-radius: 8px; }
.od-rail-list .od-rail-thumb .od-poster-len { display: inline-flex; right: 5px; bottom: 5px; height: 19px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; letter-spacing: .04em; }
.od-rail-list .od-rail-t { padding-top: 2px; }
.od-rail-list .od-rail-t b { font-size: 15px; line-height: 1.32; letter-spacing: -0.005em; white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.od-rail-list a:hover .od-rail-t b { color: var(--acc-ink); }

/* ---------- company logos (2026-10-28) ----------
   A session shows the logos of the companies speaking in it. One base height
   (--logo-h) times each lockup's scale; on a poster the base shrinks until the
   whole row fits beside the length chip. */
.od-logos { display: inline-flex; align-items: center; gap: var(--lg, 10px); }
.od-logos img { display: block; height: calc(var(--logo-h, 18px) * var(--s, 1)); width: auto; max-width: none; }
.od-poster { container-type: inline-size; }
.od-poster-logos { position: absolute; left: 7px; bottom: 7px; z-index: 3; display: inline-flex; padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,.96); box-shadow: 0 1px 3px rgba(37,37,48,.14); }
.od-poster-logos .od-logos { --lg: 7px; --logo-h: min(var(--logo-max, 15px), calc((64cqw - 16px - (var(--n) - 1) * 7px) / var(--units))); }
.od-poster--hero .od-poster-logos { left: 14px; bottom: 14px; padding: 8px 12px; border-radius: 8px; }
.od-poster--hero .od-poster-logos .od-logos { --lg: 12px; --logo-max: 24px; }
.ods-logos { margin-top: 14px; --logo-h: 22px; --lg: 16px; flex-wrap: wrap; row-gap: 8px; }
.od-person-logo { display: block; margin-top: 6px; height: calc(15px * var(--s, 1)); width: auto; max-width: none; }
/* small thumbnails carry their logos under the title, where they get room
   to read; a chip on a 130px poster shrank four logos to nothing */
.ods-thumb-logos { --logo-h: 13px; --lg: 9px; flex-wrap: wrap; row-gap: 6px; margin-top: 2px; }
.od-rail-logos { --logo-h: 13px; --lg: 9px; flex-wrap: wrap; row-gap: 6px; margin-top: 6px; }
/* auto-advance: the current thumbnail fills a bar in the session's color while
   the stage holds it. It sits on its own track under the image, in the gap
   above the title: drawn over the photo it read as part of the picture and
   nobody saw it (2026-10-29). */
.ods-thumb-media { position: relative; display: block; }
.ods-thumb-bar { position: absolute; left: 0; right: 0; top: calc(100% + 4px); height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--acc) 18%, transparent); overflow: hidden; z-index: 4; }
.ods-thumb-bar::after { content: ''; position: absolute; inset: 0; background: var(--acc); transform-origin: left; transform: scaleX(0); animation: ods-hold var(--hold, 5s) linear forwards; }
@keyframes ods-hold { to { transform: scaleX(1); } }
/* the preview is a screen, not a backdrop (2026-10-28, after the Zoom test):
   a Zoom recording's slide text ran straight into the stage title, so the
   video sits uncropped (16:9 at full stage height) on the right and fades in
   from the left, and the title always stands on paper */
.ods-bg { top: 0; left: auto; right: 0; height: 100%; width: auto; aspect-ratio: 16 / 9; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%); mask-image: linear-gradient(90deg, transparent 0%, #000 24%); }
.ods-scrim { background: linear-gradient(90deg, rgba(249,249,252,.98) 0%, rgba(249,249,252,.95) 34%, rgba(249,249,252,0) 52%); }
@media (max-width: 1023px) {
  .ods-bg { top: 0; left: 0; right: 0; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .ods-scrim { background: linear-gradient(0deg, rgba(249,249,252,.98) 0%, rgba(249,249,252,.92) 38%, rgba(249,249,252,0) 60%); }
}
/* the preview as a framed screen: inset, rounded, never under the copy */
@media (min-width: 1024px) {
  .ods-bg { top: 50%; right: 3%; height: 80%; transform: translateY(-50%); border-radius: 10px; -webkit-mask-image: none; mask-image: none; box-shadow: 0 18px 50px rgba(37,37,48,.28); }
  .ods-copy { width: min(36%, 450px); }
}
/* the stage's speakers (2026-10-29): images only, no cards, no name tags.
   Each is a free-standing halftone cut-out rising from the stage's bottom
   edge, which hides the photo's flat cut; the sides fade where the source
   photo was cropped. They fade out when the preview takes the stage. */
@keyframes ods-rise { from { opacity: 0; transform: translateY(14px); } }
.ods-solo img, .ods-bust img { display: block; height: 100%; width: auto; max-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.ods-stage.has-video .ods-solo, .ods-stage.has-video .ods-group, .ods-stage.has-video .ods-glyph { opacity: 0; }
/* one speaker: stands large on the paper, the session's glyph on the plate
   beside them; the plate moves right so a blue figure never stands on a
   blue plate */
.ods-stage.is-solo .ods-plate { left: 84%; }
.ods-solo { position: absolute; z-index: 4; left: 39%; bottom: 0; height: 94%; margin: 0; transition: opacity 600ms var(--ease); animation: ods-rise 560ms var(--ease) both; }
.ods-glyph { position: absolute; z-index: 1; top: 50%; right: 2.5%; width: 20%; aspect-ratio: 1; transform: translateY(-50%); color: #fff; transition: opacity 600ms var(--ease); }
/* two to five: a lineup across the right of the stage, bottom-aligned,
   shoulders overlapping by --ov of a bust's width, the middle of the row in
   front (z-index set in the template). A bust is as tall as the count's cap
   or as the width allows, whichever is less: the row is --span bust widths,
   1 + (n - 1)(1 - --ov). --k (CUT_K, 1 or more) evens out head sizes between
   photos: the extra height runs off the bottom edge, so every head top stays
   on one line. */
.ods-group { --cap: 80; --ov: .2; --span: 1.8; position: absolute; z-index: 4; left: 40%; right: 4%; top: 0; bottom: 0; margin: 0; padding: 0; list-style: none; display: flex; align-items: flex-end; justify-content: center; container-type: size; transition: opacity 600ms var(--ease); }
.ods-group[data-n="3"] { --cap: 76; --ov: .28; --span: 2.44; }
.ods-group[data-n="4"] { --cap: 70; --ov: .36; --span: 2.92; }
.ods-group[data-n="5"] { --cap: 64; --ov: .42; --span: 3.32; }
.ods-bust { --bh: min(calc(var(--cap) * 1cqh), calc(100cqw / (.86 * var(--span)))); position: relative; flex: none; height: calc(var(--bh) * var(--k, 1)); margin-bottom: calc(var(--bh) * (1 - var(--k, 1))); animation: ods-rise 560ms var(--ease) both; }
.ods-bust + .ods-bust { margin-left: calc(var(--bh) * -.86 * var(--ov)); }
.ods-bust:nth-child(2) { animation-delay: 70ms; }
.ods-bust:nth-child(3) { animation-delay: 140ms; }
.ods-bust:nth-child(4) { animation-delay: 210ms; }
.ods-bust:nth-child(5) { animation-delay: 280ms; }
@media (prefers-reduced-motion: reduce) { .ods-solo, .ods-bust { animation: none; } }

/* phones and tablets: a column, so nothing overlaps: the controls, the
   speakers standing on the copy's top edge, then the logos, title and Watch
   button on white */
@media (max-width: 1023px) {
  .ods-stage { aspect-ratio: auto; display: flex; flex-direction: column; }
  .ods-scrim { display: none; }
  .ods-group { position: relative; inset: auto; height: clamp(170px, 50vw, 320px); margin: 52px 18px -18px; }
  .ods-solo { position: relative; left: auto; bottom: auto; height: clamp(170px, 50vw, 320px); margin: 52px 18px -18px; align-self: flex-start; }
  .ods-glyph { display: none; }
  .ods-copy { position: relative; inset: auto; transform: none; width: auto; margin-top: 18px; padding: 18px 18px 20px; background: #fff; }
}

/* ---------- resource cards + the resource pack page (2026-10-28) ---------- */
.od-rcard { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 196px; padding: 16px 16px 20px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); overflow: hidden; --acc: #2F66C4; transition: transform 420ms var(--ease), box-shadow 420ms var(--ease); }
a.od-rcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
.od-rcard .od-link { margin-top: auto; }
.od-rcard-soon { margin-top: auto; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.od-rcard--lg { min-height: 340px; padding: 20px 22px 24px; gap: 12px; }
.od-rcard--lg .od-res-art { height: 168px; margin: -6px -8px 8px; }
.od-rcard--lg .od-res-art canvas { width: 150px; height: 150px; left: 22px; top: 9px; }
.od-rcard--lg .od-res-art img { width: 108px; right: 28px; top: 18px; }
.od-rcard--lg .od-res-title { font-size: clamp(22px, 1.9vw, 28px); }
.od-rcard--lg .od-res-line { font-size: 16px; max-width: 46ch; }
.od-rcard--lg .od-link { font-size: 16px; }

/* ---------- Go deeper, v3 (2026-10-28): the primary step leads with its art,
   the secondary sits under the button as a quieter link ---------- */
.od-next .od-next-row { align-items: flex-start; gap: 14px; margin-top: 10px; }
.od-next-art { position: relative; flex: none; width: 84px; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: var(--wash-2temp), var(--paper); }
.od-next-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.od-next-art canvas { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; transform: translate(-50%, -50%); color: var(--peri-deep); }
.od-next-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.od-next-title { font-weight: 600; font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; }
.od-next .od-next-copy .od-next-line { margin: 0; font-size: 13.5px; font-weight: 400; line-height: 1.45; color: var(--slate); }
.c26od .od-next .od-btn { margin-top: 14px; }
.od-next-also { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--acc-ink); text-align: center; }
.od-next-also svg { width: 9px; height: 9px; flex: none; transition: transform 240ms var(--ease); }
.od-next-also:hover svg { transform: translateX(3px); }
/* the rail grows to fit eight chapters above the fuller Go deeper card */
.od-watch.has-h .od-rail2 { height: max(var(--player-h), 590px); }
/* the player's height from the first paint (2026-10-29): it is the main column
   at 16:9, and the main column is the grid minus the 372px rail and 24px gap,
   so CSS has it before the script measures it. Without this the rail sized
   itself after load and Go deeper dropped 37px. The measured value, applied
   inline by the script, still wins. */
.od-watch { container-type: inline-size; --player-h: calc((100cqw - 396px) * 9 / 16); }
.od-next--rail .od-next-copy .od-next-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the subhead is written to three lines and always shown whole (2026-10-29) */
.od-next--rail .od-next-copy .od-next-line { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
/* speakers in the opened description: photo, name, role, company lockup, bio */
.od-desc .od-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px 28px; }
.od-desc .od-person { align-items: flex-start; }
.od-desc .od-person span { max-width: none; }
.od-person-bio { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: #3A3A4A; }
/* the lockup is not an avatar: undo .od-person img's circle crop */
.od-person img.od-person-logo { width: auto; height: calc(16px * var(--s, 1)); max-width: 160px; border-radius: 0; object-fit: contain; object-position: left center; background: none; margin-top: 8px; }
.od-person-was { display: block; margin-top: 8px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.od-person-was + img.od-person-logo { margin-top: 4px; }

/* ---------- stage, round 13 (2026-10-28) ----------
   Stage: title, the speaking companies' logos (bigger), the Watch button.
   Strip: image and title only. The carousel controls sit in the stage's
   bottom-right band, under the framed preview. */
.ods-logos { --logo-h: 30px; --lg: 22px; margin-top: 18px; }
.ods-title { margin-top: 0; }
.ods-actions { margin-top: 26px; }
.ods-thumb-title { margin-top: 2px; }
/* three lines (2026-10-29), so no strip title cuts off */
.ods-thumb-title { -webkit-line-clamp: 3; line-clamp: 3; }
/* the bar fills by CSS over the hold and freezes while the carousel waits
   (2026-10-30): writing its width ten times a second kept the page's
   trackers busy on every write */
.ods-thumb-bar.is-paused::after { animation-play-state: paused; }
.ods-ctl { position: absolute; z-index: 6; right: 3%; bottom: 10px; display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 2px 10px rgba(37,37,48,.14); }
.c26od .ods-ctl-btn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--ink); transition: background-color 160ms var(--ease); }
.c26od .ods-ctl-btn:hover { background: var(--paper); }
.ods-ctl-btn svg { width: 12px; height: 12px; }
.ods-ctl-prev svg { transform: scaleX(-1); }
.ods-ctl-count { padding: 0 6px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink); min-width: 62px; text-align: center; }
@media (min-width: 1024px) { .ods-stage .ods-bg { height: 78%; top: 46%; } }
@media (max-width: 1023px) { .ods-ctl { top: 10px; bottom: auto; } }
.od-rcard--lg { min-height: 320px; }
.od-rcard--lg .od-res-title { font-size: clamp(21px, 1.6vw, 24px); }
.od-rcard--lg .od-res-line { font-size: 15px; }

/* ---------- logos, optical pass (2026-10-28) ----------
   size = base x the lockup's own scale; dy recentres the words (see LOGOS in
   c26-people.ts). On the stage the row sits ABOVE the title and the base
   shrinks to fit the copy column, so four companies stay on one line. */
.od-logos img { height: calc(var(--logo-h, 18px) * var(--s, 1)); transform: translateY(calc(var(--logo-h, 18px) * var(--s, 1) * var(--dy, 0))); }
.od-person img.od-person-logo { height: calc(16px * var(--s, 1)); transform: translateY(calc(16px * var(--s, 1) * var(--dy, 0))); }
.ods-copy { container-type: inline-size; }
.ods-logos { --lg: 20px; --logo-h: min(26px, calc((100cqw - (var(--n) - 1) * 20px) / var(--units))); flex-wrap: nowrap; margin: 0 0 18px; }
.ods-title { margin-top: 0; }
@media (max-width: 1023px) { .ods-logos { --logo-h: min(22px, calc((100cqw - (var(--n) - 1) * 20px) / var(--units))); } }

/* ---------- round 15 (2026-10-28) ---------- */
/* nav: the link hover colour must never reach the button (it turned the
   button's white label ink-on-ink, ~1.4:1) */
.od-nav-links a:not(.od-btn):hover { color: var(--ink); }
.c26od .od-nav-links a.od-btn--ink, .c26od .od-nav-links a.od-btn--ink:hover { color: #fff; }
.c26od .od-btn--ink:hover { background: #3A3A48; color: #fff; }

/* chapters, light (after the reference): title left in slate, time right,
   the current chapter on a soft tint with its title in ink and a level
   meter in place of its time, moving while the video plays */
.od-rail-ch li, .od-chapters li { display: flex; }
.od-rail-ch li + li, .od-chapters li + li { border-top: 0; }
.od-rail-ch button, .od-chapters button { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 42px; padding: 8px 14px !important; border-radius: 10px; background: none; box-shadow: none !important; color: #4F4F66; font-size: 15px; font-weight: 400; line-height: 1.35; text-align: left; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.od-rail-ch button:hover:not(:disabled), .od-chapters button:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
.od-rail-ch button.is-on, .od-chapters li.is-on button { background: color-mix(in srgb, var(--acc) 13%, #fff); color: var(--ink); font-weight: 600; }
.od-chapters li.is-on { background: none; }
.od-ch-label { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.od-rail-ch time, .od-chapters time { flex: none; font-family: var(--f-body); font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: #4F4F66; }
.od-eq { flex: none; display: inline-flex; align-items: center; gap: 2.5px; height: 18px; color: var(--acc-ink); }
.od-eq i { display: block; width: 2.5px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: center; }
.od-eq i:nth-child(1) { transform: scaleY(.55); }
.od-eq i:nth-child(2) { transform: scaleY(.9); }
.od-eq i:nth-child(3) { transform: scaleY(.7); }
.od-eq i:nth-child(4) { transform: scaleY(1); }
.od-eq.is-playing i { animation: od-eq 900ms ease-in-out infinite alternate; }
.od-eq.is-playing i:nth-child(2) { animation-delay: -300ms; }
.od-eq.is-playing i:nth-child(3) { animation-delay: -600ms; }
.od-eq.is-playing i:nth-child(4) { animation-delay: -150ms; }
@keyframes od-eq { 0% { transform: scaleY(.3); } 100% { transform: scaleY(1); } }
.od-tabpanel { padding: 8px 8px 10px; }

/* resource cards: real art, 16:9, edge to edge inside the card's padding */
.od-res-art.has-img, .od-res-art.is-repo { height: auto; aspect-ratio: 16 / 9; background: var(--paper); border: 1px solid var(--hair); }
.od-res-art.has-img img { position: static; width: 100%; height: 100%; object-fit: cover; transform: none; box-shadow: none; border-radius: 0; }
.od-rcard--lg .od-res-art.has-img, .od-rcard--lg .od-res-art.is-repo { height: auto; }
.od-rcard--lg .od-res-art.has-img img { position: static; width: 100%; right: auto; top: auto; }
.od-repo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; padding: 0 9%; background: #0D1117; color: #fff; }
.od-repo-mark { width: 30px; height: 30px; }
.od-repo-name { font-family: var(--f-mono); font-size: clamp(14px, 1.2vw, 17px); letter-spacing: -0.01em; color: #fff; }
.od-repo-name span { color: rgba(255,255,255,.62); }
.od-repo--sm { padding: 0; align-items: center; }
.od-repo--sm .od-repo-mark { width: 22px; height: 22px; }
a.od-rcard:hover .od-res-art.has-img img { transform: scale(1.03); }
.od-res-art.has-img img { transition: transform 600ms var(--ease); }
/* the session card's art takes the same images */
.od-next-art img { object-position: left center; }

.od-rcard--lg { min-height: 0; }
.od-rcard--lg .od-res-title { font-size: clamp(19px, 1.45vw, 22px); }
.od-rcard--lg .od-res-line { font-size: 14.5px; }
/* the meter is a span inside the chapter list, so the list's two-line clamp
   on spans was collapsing it to one bar */
.od-rail-ch .od-eq, .od-chapters .od-eq { display: inline-flex; overflow: visible; -webkit-line-clamp: none; }
/* eight chapters fit the rail: rows share its height, never below 36px */
.od-rail-ch button, .od-chapters button { min-height: 36px; padding: 6px 14px !important; }
.od-watch.has-h .od-tabpanel .od-rail-ch { gap: 2px; }
.od-rail-ch button.is-on, .od-rail-ch button.is-on:hover, .od-chapters li.is-on button, .od-chapters li.is-on button:hover { background: color-mix(in srgb, var(--acc) 16%, #fff); color: var(--ink); }
/* every card's art shares the 16:9 frame, the glyph tile included */
.od-rcard .od-res-art { height: auto !important; aspect-ratio: 16 / 9; margin: -8px -8px 6px; }
.od-rcard .od-res-art canvas { left: 50%; top: 50%; width: 46%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); }

/* ---------- round 17 (2026-10-28) ---------- */
/* the strip holds eight sessions now (no full day): eight columns, no gap at the end */
.ods-strip { grid-template-columns: repeat(8, minmax(0, 1fr)); }

/* resources: one sideways row, ~4.3 cards in view so the fifth peeks */
/* snap to the padding edge, so the row starts at 0 and "previous" starts disabled */

/* the resource pack: a title and a plain grid, all seven in view at once
   (ruled 2026-10-28): four across, then three */
/* all seven on one laptop screen: a step smaller, descriptions to two lines */

/* ---------- the resource pack, redesigned (2026-10-28): an exposed grid ----------
   Three columns of hairline-ruled cells, a + at every crossing, no
   numbering, generous room top and bottom. The title is its own row on
   top; under it the seven resources, the way back to the recordings, and an
   ASCII pictogram closing the last row. */
.od-rp { --rule: #DCDCE6; --plus: linear-gradient(var(--ink), var(--ink)) center / 11px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1px 11px no-repeat; }
.od-rp-main { padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 112px); }
.od-xgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.od-xcell { position: relative; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); min-width: 0; }
/* the + at each cell's top-left crossing (and the grid's outer corners) */
.od-xcell::before, .od-xcell::after { content: ''; position: absolute; z-index: 2; background: var(--ink); pointer-events: none; }
.od-xcell::before { left: -5.5px; top: -1px; width: 11px; height: 1px; }
.od-xcell::after { left: -1px; top: -5.5px; width: 1px; height: 11px; }
.od-xres { position: relative; display: flex; flex-direction: column; height: 100%; padding: clamp(44px, 4.4vw, 64px) clamp(24px, 2.6vw, 40px) clamp(48px, 5vw, 72px); transition: background-color 240ms var(--ease); }
a.od-xres:hover { background: #fff; }
.od-xres .od-res-art { margin: 0 0 28px !important; border-radius: 10px; }
.od-xres .od-kicker { font-size: 11.5px; }
.od-xres-title { margin-top: 10px; font-family: var(--f-display); font-weight: 500; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.14; letter-spacing: -0.02em; text-wrap: balance; transition: color 240ms var(--ease); }
a.od-xres:hover .od-xres-title { color: var(--cool-deep); }
.od-xres-line { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--slate); max-width: 40ch; }
.od-xres .od-link, .od-xres .od-rcard-soon { margin-top: auto; padding-top: 28px; font-size: 15px; }
.od-xres .od-link svg { width: 10px; height: 10px; }
/* the title row: one band across all three columns, the heading set low
   like a plate caption, the ASCII field running sharp behind it */
.od-xhead { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: clamp(32px, 3.4vw, 48px) clamp(24px, 2.6vw, 40px) clamp(56px, 6vw, 88px); border: 1px solid var(--rule); border-bottom: 0; }
.od-xhead::before, .od-xhead::after { content: ''; position: absolute; z-index: 2; top: -6px; width: 11px; height: 11px; background: var(--plus); pointer-events: none; }
.od-xhead::before { left: -6px; }
.od-xhead::after { right: -6px; }
/* the hub's section-heading size, not a poster's (2026-10-29: at 58px it
   outshouted the sessions above it) */
.od-xtitle { font-family: var(--f-display); font-weight: 500; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.06; letter-spacing: -0.025em; max-width: 22ch; text-wrap: balance; }
.od-xsub { margin-top: 16px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--slate); max-width: 52ch; }
/* a two-link card (the playbook and its repo) */
.od-xres .od-xlinks { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: auto; padding-top: 28px; }
.od-xres .od-xlinks .od-link { margin-top: 0; padding-top: 0; }
.od-xres .od-xlinks .od-link:hover { color: var(--cool-deep); }
/* the last cell: one of the agenda's pictograms, large, in the field's cool ink */
.od-xcell--art { display: grid; place-items: center; min-height: 280px; }
.od-xcell--art canvas { width: 64%; height: auto; aspect-ratio: 1; color: var(--peri-deep); }
.od-xcell--end .od-xres { justify-content: flex-end; }
.od-xcell--end .od-xres .od-link { margin-top: 0; padding-top: 24px; }
@media (max-width: 1023px) {
  .od-xgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .od-xcell--art { display: none; }
}
@media (max-width: 640px) {
  .od-xgrid { grid-template-columns: minmax(0, 1fr); }
}
/* every crossing gets its +: each cell draws its top-left and bottom-right
   crossings, the grid draws the two outer corners those miss (top-right,
   bottom-left). A + is one box with two gradient bars. */
.od-xgrid { position: relative; }
.od-xcell::before, .od-xcell::after, .od-xgrid::before, .od-xgrid::after { content: ''; position: absolute; z-index: 2; width: 11px; height: 11px; background: var(--plus); pointer-events: none; }
.od-xcell::before { left: -6px; top: -6px; right: auto; bottom: auto; }
.od-xcell::after { right: -6px; bottom: -6px; left: auto; top: auto; }
.od-xgrid::before { right: -6px; top: -6px; }
.od-xgrid::after { left: -6px; bottom: -6px; }
/* the art keeps the 16:9 frame whatever it holds */
.od-xres .od-res-art { height: auto !important; aspect-ratio: 16 / 9; background: var(--paper); border: 1px solid var(--hair); }
.od-xres .od-res-art canvas { left: 50%; top: 50%; width: 40%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); }

/* ---------- the card hover (picked 2026-10-28): the tilt ----------
   The art turns toward the cursor like a card in the hand, lifted a little
   toward the viewer, with a glare where the cursor is. The page sets
   --rx/--ry/--gx/--gy on the art. Fine pointers only, so a tap never leaves
   a card stuck mid-hover; no tilt for reduced motion. */
@media (hover: hover) and (pointer: fine) {
  a.od-xres:hover .od-link svg { transform: translateX(3px); }
  .od-xres { perspective: 900px; }
  .od-xres .od-res-art { transition: transform 420ms var(--ease), box-shadow 420ms var(--ease); }
  a.od-xres:hover .od-res-art { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(16px); box-shadow: 0 26px 44px -26px rgba(47, 58, 140, .5); transition-duration: 140ms, 420ms; }
  .od-xres .od-res-art::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(70% 70% at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%); transition: opacity 300ms var(--ease); }
  a.od-xres:hover .od-res-art::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  a.od-xres:hover .od-res-art { transform: none; }
}

/* ---------- the hub's resources as a grid (2026-10-28) ----------
   Every card in view, the hub's own card style; the pictogram closes the
   last row. */
.od-rgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 16px; list-style: none; }
.od-rgrid > li { display: flex; min-width: 0; }
.od-rgrid > li > .od-rcard { flex: 1; }
.od-rgrid-art { align-items: center; justify-content: center; }
.od-rgrid-art canvas { width: 62%; height: auto; aspect-ratio: 1; color: var(--peri-deep); }
@media (max-width: 1023px) { .od-rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .od-rgrid { grid-template-columns: minmax(0, 1fr); }
  .od-rgrid-art { display: none !important; }
}