/* /2028. Loaded after who-its-for.css, whose role-jumps and band rules this
   page reuses. Rebuilt in clay in site rebuild PR E (26 Oct 2026): the live
   six-beat 2028 night scene in the hero, the clay agent rail in #network,
   and clay icons on #changes, #path and #never. */
.o30-hero { padding-top: clamp(18px, 2.5vw, 32px); padding-bottom: clamp(28px, 3.5vw, 48px); }
.o30-hero-head { max-width: 960px; }
.o30-title { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.06; }
.o30-statement { font: 500 var(--kf-fs-h3)/1.25 var(--kf-serif); margin: 12px 0 0; max-width: 760px; color: var(--kf-sienna-text); text-wrap: balance; }
.o30-hero .kf-lede { margin-top: 10px; }
.o30-hero-actions { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#night, #network, #changes, #path, #never { scroll-margin-top: calc(var(--site-header-h) + 16px); }

/* Hero visual: the six-beat 2028 night animation (studio project night-2028).
   Wide layout (1600 by 730) above 640 px, so at 1440 by 900 the cast stands
   whole above the fold (overall fix PR row A15); compact layout (600 by 1930, six beats since the film lineup PR)
   on a phone. Reduced motion holds the live scene at its last frame: the
   six cards are the page's own words over the clay, nothing baked into
   pixels (#193 round 1, row R1). The still under it is only the no-script
   picture, rendered from that same last frame. */
.o30-night-fig { margin: clamp(20px, 2.8vw, 32px) 0 0; }
.o30-night-stage { position: relative; width: 100%; aspect-ratio: 1600 / 730; border-radius: 26px; overflow: hidden; background: radial-gradient(130% 120% at 30% 0%, #fbf6ea 0%, #f1e7d4 60%, #e9dcc4 100%); border: 1px solid var(--kf-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 18px 40px -24px rgba(80, 52, 24, 0.16); }
@media (max-width: 640px) {
  .o30-night-stage { aspect-ratio: 600 / 1930; border-radius: 22px; }
}
.o30-night-stage .stage-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.o30-night-poster { display: block; width: 100%; height: 100%; }
.o30-night-stage[data-ready] .o30-night-poster { display: none; }
.o30-night-poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; }
.night-clock-track { position: absolute; background: rgba(60, 44, 24, 0.16); border-radius: 3px; pointer-events: none; }
.night-clock-fill { position: absolute; background: linear-gradient(90deg, rgba(184, 85, 46, 0.72), rgba(247, 178, 90, 0.9)); border-radius: 3px; pointer-events: none; }
.o30-night-stage.is-compact .night-clock-fill { background: linear-gradient(180deg, rgba(184, 85, 46, 0.72), rgba(247, 178, 90, 0.9)); }
.night-node { position: absolute; width: 14px; height: 14px; margin-left: -7px; margin-top: -7px; border-radius: 50%; background: var(--kf-sienna); box-shadow: 0 0 0 5px rgba(184, 85, 46, 0.18), 0 0 14px rgba(247, 178, 90, 0.75); pointer-events: none; }
.night-actor { position: absolute; pointer-events: none; filter: drop-shadow(0 12px 16px rgba(60, 40, 20, 0.18)); }
.night-card { position: absolute; box-sizing: border-box; padding: 16px 18px; background: #fbf6ec; border: 1px solid rgba(60, 44, 24, 0.16); border-radius: 20px; box-shadow: 0 12px 28px -14px rgba(80, 52, 24, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8); color: var(--kf-ink); }
.night-card-eyebrow { font: 600 20px/1.25 var(--kf-mono); color: var(--kf-sienna-text); letter-spacing: 0.02em; margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.night-card-title { font: 600 24px/1.22 var(--kf-sans); color: var(--kf-ink); margin: 0 0 6px; }
.night-card-sub { font: 400 19px/1.34 var(--kf-sans); color: var(--kf-muted); margin: 0; }
/* Six cards across the wide scene (film lineup PR, 31 Oct 2026): one size
   smaller, so the longest card stays inside the stage. */
.o30-night-stage:not(.is-compact) .night-card { padding: 14px 16px; }
.o30-night-stage:not(.is-compact) .night-card-eyebrow { font-size: 18px; }
.o30-night-stage:not(.is-compact) .night-card-title { font-size: 22px; }
.o30-night-stage:not(.is-compact) .night-card-sub { font-size: 18px; }
.night-big { position: absolute; box-sizing: border-box; padding: 18px 28px; background: linear-gradient(160deg, #2a1a10 0%, #3b2416 55%, #4a2c1a 100%); border: 1px solid rgba(247, 178, 90, 0.35); border-radius: 24px; box-shadow: 0 16px 34px -16px rgba(34, 20, 10, 0.38); text-align: center; color: #fff7ea; font: 500 38px/1.18 var(--kf-serif); }
.o30-night-stage.is-compact .night-big { font-size: 32px; padding: 16px 20px; }

/* The night and the cast: tables on a laptop; on a phone each row stacks as a
   card. The explicit ARIA table roles in the markup keep the row and column
   relationship for screen readers after display: block drops the native
   table semantics. */
.o30-table-wrap { margin-top: 22px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: 22px; padding: clamp(6px, 1.2vw, 12px) clamp(12px, 2vw, 22px); }
.more-body .o30-table-wrap { margin-top: 8px; }
.o30-cast-note { margin: 0 0 16px; }
.o30-table { width: 100%; border-collapse: collapse; font-size: var(--kf-fs-body); line-height: 1.45; }
.o30-table th, .o30-table td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; }
.o30-table thead th { font: 600 var(--kf-fs-label) var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-sienna-text); border-bottom: 1px solid var(--kf-line); }
.o30-table tbody tr + tr > * { border-top: 1px solid var(--kf-line); }
.o30-night tbody th { width: 9em; white-space: nowrap; font: 500 var(--kf-fs-small)/1.75 var(--kf-mono); color: var(--kf-sienna-text); font-variant-numeric: tabular-nums; }
.o30-cast { font-size: var(--kf-fs-small); }
.o30-cast tbody th { width: 19%; font: 600 var(--kf-fs-body)/1.35 var(--kf-sans); }
.o30-cast td:last-child { width: 36%; }
@media (max-width: 860px) {
  .o30-table-wrap { background: none; border: 0; padding: 0; }
  .o30-table, .o30-table tbody, .o30-table tr, .o30-table th, .o30-table td { display: block; width: auto; }
  .o30-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .o30-table tbody { display: grid; gap: 10px; }
  .o30-table tbody tr { padding: 14px 16px; background: var(--kf-panel-solid); border: 1px solid var(--kf-line); border-radius: 16px; }
  .o30-table tbody tr + tr > * { border-top: 0; }
  .o30-table tbody th { width: auto; padding: 0 0 6px; }
  .o30-table td { padding: 4px 0 0; }
  .o30-cast td:last-child { width: auto; }
  .o30-table td[data-label]::before { content: attr(data-label); display: block; font: 600 var(--kf-fs-label) var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-sienna-text); margin-bottom: 2px; }
}

/* The agent network rail in clay: wide three-column rail on a laptop, tall
   stacked rail on a tablet or phone (<= 960 px), the shared agent registry above. */
.o30-net { margin: clamp(24px, 3.5vw, 40px) 0 0; }
.o30-rail-stage { padding: clamp(14px, 2.2vw, 26px); background: radial-gradient(130% 120% at 30% 0%, #fbf6ea 0%, #f1e7d4 60%, #e9dcc4 100%); border: 1px solid var(--kf-line); border-radius: 26px; display: grid; gap: 16px; }
.o30-net figcaption { margin: 14px 0 0; font-size: var(--kf-fs-small); color: var(--kf-muted); max-width: 780px; }
.rail-zone { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--kf-panel-solid); border: 1px solid var(--kf-line); border-radius: 20px; }
.rail-registry { border-color: rgba(154, 68, 36, 0.34); background: linear-gradient(180deg, #fdfaf2 0%, #f5ebdc 100%); }
.rail-zone-copy { min-width: 0; }
.rail-zone-kicker, .rail-col-kicker { margin: 0 0 2px; font: 600 var(--kf-fs-label)/1.3 var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-sienna-text); }
.rail-zone-title, .rail-col-title { margin: 0; font: 600 var(--kf-fs-body)/1.28 var(--kf-sans); color: var(--kf-ink); }
.rail-zone-sub { margin: 3px 0 0; font-size: var(--kf-fs-small); color: var(--kf-muted); }
.rail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 960px) {
  .rail-grid { grid-template-columns: minmax(0, 1fr); }
}
.rail-col { padding: 16px; background: rgba(255, 252, 245, 0.74); border: 1px solid var(--kf-line); border-radius: 22px; display: flex; flex-direction: column; gap: 12px; }
.rail-col.rail-brand { background: rgba(184, 85, 46, 0.09); border: 1.5px solid var(--kf-sienna); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); }
.rail-col-head { padding-bottom: 6px; border-bottom: 1px solid rgba(60, 44, 24, 0.12); }
.rail-nodes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rail-node { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--kf-panel-solid); border: 1.5px solid rgba(60, 44, 24, 0.24); border-radius: 16px; }
.rail-node.is-record { border-style: dashed; border-color: var(--kf-steel); }
.rail-node.is-agent { background: var(--kf-charcoal); border-color: var(--kf-charcoal); color: #f6f1e6; }
.rail-node-copy { min-width: 0; display: grid; gap: 2px; }
.rail-node-copy strong { font: 600 var(--kf-fs-small)/1.25 var(--kf-sans); color: inherit; }
.rail-node-copy span { font-size: 0.84rem; line-height: 1.3; color: var(--kf-muted); }
.rail-node.is-agent .rail-node-copy span { color: #dfd3c0; }
/* How each outside agent reaches the brand (film lineup PR, site fix 4): a
   badge on every node, keyed in the caption. */
.rail-node-copy .rail-badge, .rail-key .rail-badge { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 10px 3px 8px; border-radius: 999px; font: 600 0.78rem/1.3 var(--kf-sans); white-space: nowrap; }
.rail-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rail-badge.is-via { background: rgba(43, 36, 30, 0.9); color: #f6f1e6; }
.rail-badge.is-via::before { background: #f0b060; }
.rail-badge.is-record { background: transparent; color: var(--kf-ink); border: 1.5px dashed var(--kf-steel); }
.rail-badge.is-record::before { background: var(--kf-steel); }
.rail-key { line-height: 2; }
.rail-key .rail-badge { margin: 0 4px 0 0; vertical-align: middle; }
.rail-icon { height: 68px; width: auto; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(60, 40, 20, 0.14)); }
#rail-sara-agent { height: 72px; }
.rail-agentk { width: 88px; height: 88px; flex: 0 0 88px; display: inline-flex; align-items: center; justify-content: center; }
.o30-keep { font: 500 var(--kf-fs-h3)/1.3 var(--kf-serif); color: var(--kf-ink); border-left: 3px solid var(--kf-sienna); padding-left: 14px; max-width: 820px; margin: clamp(28px, 4vw, 40px) 0 0; }

/* What changes: five clay-iconed cards. */
.o30-changes { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .o30-changes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .o30-changes { grid-template-columns: minmax(0, 1fr); } }
.o30-changes li { padding: 20px; background: var(--kf-panel-solid); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); }
.o30-card-fig { margin: 0 0 12px; display: flex; align-items: center; min-height: 72px; }
.o30-card-icon { height: 68px; width: auto; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(60, 40, 20, 0.14)); }
#change-icon-5 { height: 84px; }
.o30-changes h3 { font: 600 var(--kf-fs-title)/1.25 var(--kf-sans); margin: 0 0 8px; }
.o30-changes p { margin: 0; font-size: var(--kf-fs-small); }

/* The road: five clay-iconed steps from now to after 2028; the last row in the band's dark clay. */
.o30-path { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; max-width: 920px; }
.o30-path li { position: relative; display: flex; align-items: flex-start; gap: 18px; padding: 18px 22px 20px 54px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: 20px; }
.o30-path li::before { content: ""; position: absolute; left: 20px; top: 26px; width: 14px; height: 14px; border-radius: 50%; background: var(--kf-sienna); box-shadow: 0 0 0 4px rgba(184, 85, 46, 0.16); }
.o30-path li::after { content: ""; position: absolute; left: 26px; top: 46px; bottom: -16px; width: 2px; background: rgba(184, 85, 46, 0.35); }
.o30-path li:last-child::after { display: none; }
.o30-path li.is-now::before { background: var(--kf-green); box-shadow: 0 0 0 4px rgba(46, 92, 71, 0.18); }
.o30-path-fig { flex: 0 0 68px; display: flex; align-items: center; justify-content: center; }
.o30-path-icon { height: 68px; width: auto; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(60, 40, 20, 0.16)); }
.o30-path-body { min-width: 0; flex: 1; }
.o30-path .when { margin: 0; font: 600 var(--kf-fs-label)/1.4 var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-sienna-text); }
.o30-path li.is-now .when { color: var(--kf-green); }
.o30-path h3 { font: 500 var(--kf-fs-h3)/1.2 var(--kf-serif); margin: 6px 0 8px; }
.o30-path p:not(.when) { margin: 0; max-width: 70ch; font-size: var(--kf-fs-body); }
.o30-path li.is-after { background: linear-gradient(160deg, #2a1a10 0%, #3b2416 55%, #4a2c1a 100%); border-color: transparent; color: #f8eedc; }
.o30-path li.is-after::before { background: #f7b25a; box-shadow: 0 0 0 4px rgba(247, 178, 90, 0.25); }
.o30-path li.is-after .when { color: #f0b98f; }
.o30-path li.is-after h3 { color: #fff7ea; }
.o30-path li.is-after p:not(.when) { color: #e9dcc6; }
/* The last row is one sentence: "After 2028, people set the terms. Agents handle the routine." */
.o30-path li.is-after p.road-line { margin-top: 6px; font: 500 var(--kf-fs-h3)/1.3 var(--kf-serif); color: #fff7ea; max-width: 34em; text-wrap: balance; }
@media (max-width: 520px) {
  .o30-path li { padding-left: 44px; gap: 12px; }
  .o30-path li::before { left: 14px; }
  .o30-path li::after { left: 20px; }
}

/* What we never do: eight clay-iconed refusals, two columns on desktop, one on phone. */
.o30-never { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; max-width: 1080px; }
@media (max-width: 760px) { .o30-never { grid-template-columns: minmax(0, 1fr); } }
.o30-never li { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-top: 1px solid var(--kf-line); }
.o30-never-icon { width: 64px; height: 64px; flex: 0 0 64px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(60, 40, 20, 0.14)); }
.o30-never-body { min-width: 0; flex: 1; }
.o30-never h3 { font: 600 var(--kf-fs-body)/1.35 var(--kf-sans); margin: 0 0 4px; }
.o30-never p { margin: 0; font-size: var(--kf-fs-small); color: var(--kf-muted); }

/* The kingmaker close. */
.o30-close-title { max-width: 980px; text-wrap: balance; }
.o30-close .o30-statement { font-size: var(--kf-fs-h2); max-width: 980px; text-wrap: balance; }
.band .kf-h2 + p { margin-top: 10px; }

/* The night's film (promise film PR, 31 Oct 2026): Who holds the promise under
   "Three shirts by Friday.", its poster with Play beside the title, line and
   running time; one column at 860 px and below. The player is site.js's. */
.night-film { margin: clamp(20px, 3vw, 32px) 0 clamp(18px, 2.6vw, 28px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(18px, 3vw, 40px); align-items: center; }
.night-film-copy .short-title { font: 500 var(--kf-fs-h3)/1.2 var(--kf-serif); margin: 0 0 8px; }
.night-film-copy .short-line { font-size: var(--kf-fs-body); color: var(--kf-ink); margin: 0 0 8px; max-width: 34em; }
.night-film-copy .film-meta { margin: 0; }
@media (max-width: 860px) { .night-film { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .night-film .film-box.is-short .film-play span.pill { padding: 8px; }
  .night-film .film-play .pill-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}