/* Partner layout and component rules. The shared Risograph skin loaded
   after this file owns screen colors, typography, and opening composition. */
:root {
  --ink: #0b0b0c;
  --ink-soft: #111113;
  --paper: #f2f2f0;
  --paper-76: color-mix(in srgb, var(--paper) 76%, transparent);
  --paper-58: color-mix(in srgb, var(--paper) 58%, transparent);
  --paper-40: color-mix(in srgb, var(--paper) 40%, transparent);
  --paper-24: color-mix(in srgb, var(--paper) 24%, transparent);
  --line: color-mix(in srgb, var(--paper) 11%, transparent);
  --line-strong: color-mix(in srgb, var(--paper) 22%, transparent);
  --caption: #e0bd6d;
  --hud: #7ce2a1;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --gutter-x: clamp(46px, 6.2vw, 112px);
  --gutter-y: clamp(40px, 5vh, 70px);
  --step: clamp(18px, 2.7vh, 38px);
  --fs-display: clamp(52px, 5.8vw, 92px);
  --fs-h2: clamp(35px, 3.45vw, 55px);
  --fs-h3: clamp(20px, 1.7vw, 28px);
  --fs-lede: clamp(16px, 1.2vw, 20px);
  --fs-body: clamp(12px, .96vw, 15px);
  --fs-label: clamp(11px, .82vw, 13px);
  --fs-mono: clamp(10px, .7vw, 12px);
}

* { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: hidden; background: var(--ink); }
body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: "Helvetica Neue", "Aptos", "Segoe UI Variable", -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, a { color: inherit; font: inherit; }
button { cursor: pointer; }
a { text-decoration: none; }

.deck {
  position: relative;
  width: 100%;
  max-width: 100vw;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  background: var(--ink);
  scrollbar-width: none;
}
.deck::-webkit-scrollbar { width: 0; height: 0; }

.deck-controls {
  position: fixed;
  z-index: 100;
  top: 22px;
  right: var(--gutter-x);
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 22px);
}
.control {
  border: 0;
  background: none;
  padding: 2px 0;
  color: var(--paper-24);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color 180ms ease;
}
.control:hover, .control:focus-visible { color: var(--paper); outline: none; }
#language-control {
  display: grid;
  min-width: 48px;
  min-height: 32px;
  place-items: center;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 66%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 8%, transparent);
  color: var(--paper-76);
  font-weight: 600;
  letter-spacing: .08em;
}
#language-control:hover, #language-control:focus-visible { border-color: color-mix(in srgb, var(--caption) 54%, transparent); color: var(--caption); }
.rail { position: fixed; z-index: 95; left: 0; top: 50%; display: flex; flex-direction: column; gap: 5px; padding: 18px 26px 18px 22px; opacity: 0; transform: translateY(-50%); transition: opacity 240ms ease; }
.rail:hover, .rail:focus-within { opacity: 1; }
.rail button { display: flex; align-items: center; width: 30px; height: 14px; border: 0; background: transparent; padding: 0; }
.rail button::before { content: ""; width: 9px; height: 1px; background: var(--paper-24); transition: width 180ms ease, background 180ms ease; }
.rail button:hover::before, .rail button.active::before { width: 26px; background: var(--paper); }
.progress { position: fixed; z-index: 100; bottom: 0; left: 0; width: 100%; height: 1px; background: color-mix(in srgb, var(--paper) 6%, transparent); }
.progress div { height: 100%; background: var(--paper-24); transition: width 420ms cubic-bezier(.2,.8,.2,1); }
.slide-count { position: fixed; z-index: 96; bottom: 20px; left: var(--gutter-x); display: flex; align-items: baseline; gap: 5px; font-family: var(--mono); color: var(--paper-24); font-size: var(--fs-mono); letter-spacing: .06em; }
.slide-count span:first-child { color: var(--paper-76); }

.slide { position: relative; width: 100%; max-width: 100vw; min-height: 100dvh; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; isolation: isolate; }
.slide-frame {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--step);
  width: min(100%, 1520px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: var(--gutter-y) var(--gutter-x) calc(var(--gutter-y) + 12px);
}
.slide-head { align-self: start; }
.slide-body { display: grid; align-self: stretch; min-height: 0; width: 100%; }
.slide-body > * { min-height: 0; }
.slide-foot { align-self: end; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; min-height: 14px; }
.logo-mark { position: absolute; z-index: 10; right: var(--gutter-x); bottom: 20px; display: flex; align-items: center; gap: 8px; color: var(--paper-24); font-size: var(--fs-label); font-weight: 600; letter-spacing: .02em; transition: color 180ms ease; }
.logo-mark img { width: 17px; height: 17px; border-radius: 4px; filter: grayscale(1); opacity: .7; }
.logo-mark:hover { color: var(--paper-58); }
.slide h2 { max-width: 24ch; margin: 0; font-size: var(--fs-h2); font-weight: 550; letter-spacing: -.032em; line-height: 1.06; text-wrap: balance; }
.slide h2 span { display: block; color: var(--caption); }
.source-link { color: var(--paper-24); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .04em; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; transition: color 180ms ease; }
.source-link:hover { color: var(--paper-76); }
.slide-source { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.sheet-link { color: var(--caption); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .04em; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--caption) 40%, transparent); text-underline-offset: 4px; transition: color 180ms ease; }
.sheet-link:hover { color: var(--paper); }
.slide-note { color: var(--paper-24); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; }
html[lang="zh-CN"] .slide h2 { max-width: 17em; font-size: clamp(31px, 3.08vw, 49px); letter-spacing: -.005em; line-height: 1.2; }
html[lang="zh-CN"] .opening-copy h1 { max-width: 13em; font-size: clamp(44px, 4.9vw, 78px); letter-spacing: 0; line-height: 1.2; }

.reveal { opacity: 0; transform: translateY(18px); }
.slide.is-visible .reveal { animation: reveal 620ms cubic-bezier(.17,.75,.22,1) forwards; }
.slide.is-visible .slide-body.reveal { animation-delay: 100ms; }
.slide.is-visible .slide-foot.reveal { animation-delay: 180ms; }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

/* Opening */
.opening-visual { position: absolute; z-index: -1; inset: 0; overflow: hidden; background: var(--ink); }
.opening-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.82) contrast(1.08) brightness(.83); transform: scale(1.02); }
.opening-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 82%, transparent) 0%, color-mix(in srgb, var(--ink) 38%, transparent) 48%, color-mix(in srgb, var(--ink) 10%, transparent) 100%), linear-gradient(0deg, var(--ink) 0%, transparent 50%); }
.opening-slide .slide-body { align-self: end; }
.opening-copy { align-self: end; display: grid; gap: clamp(14px, 2vh, 24px); padding-bottom: clamp(28px, 5vh, 64px); }
.opening-kicker { margin: 0; color: var(--paper-58); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; }
.opening-copy h1 { max-width: 17ch; margin: 0; font-size: var(--fs-display); font-weight: 550; letter-spacing: -.038em; line-height: 1.02; text-wrap: balance; }
.opening-line { display: block; }
.opening-accent { color: var(--caption); }
.opening-kicker, .opening-line { opacity: 0; transform: translateY(28px); }
.opening-slide.is-visible .opening-kicker { animation: reveal 640ms cubic-bezier(.16,1,.3,1) 180ms forwards; }
.opening-slide.is-visible .opening-line { animation: reveal 760ms cubic-bezier(.16,1,.3,1) 300ms forwards; }
.opening-slide.is-visible .opening-accent { animation-delay: 430ms; }
@media (prefers-reduced-motion: no-preference) {
  .opening-visual img { animation: opening-drift 20s ease-in-out infinite; }
}
.procurement-slide .link i, .pilot-slide .gantt-rows i { transform: scaleX(0); }
  .procurement-slide.is-visible .link i { animation: draw-line 620ms cubic-bezier(.22,.8,.28,1) forwards; }
  .procurement-slide.is-visible .route:nth-child(1) .link i { animation-delay: 240ms; }
  .procurement-slide.is-visible .route:nth-child(2) .link i { animation-delay: 340ms; }
  .procurement-slide.is-visible .route:nth-child(3) .link i { animation-delay: 440ms; }
  .procurement-slide.is-visible .route:nth-child(4) .link i { animation-delay: 540ms; }
  .pilot-slide.is-visible .gantt-rows i { animation: draw-line 560ms cubic-bezier(.22,.8,.28,1) forwards; animation-delay: calc(220ms + (var(--i) * 90ms)); }
  @keyframes draw-line { to { transform: scaleX(1); } }
  @keyframes opening-drift { 0%, 100% { transform: scale(1.02) translate3d(0,0,0); } 50% { transform: scale(1.06) translate3d(-.5%,-.25%,0); } }

/* Access gap */
.gap-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: clamp(28px, 4vw, 70px); align-items: stretch; }
.gap-figure { position: relative; overflow: hidden; margin: 0; border: 1px solid var(--line); background: #080809; }
.gap-figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) brightness(.66); transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
.gap-slide.is-visible .gap-figure img { transform: scale(1.06); }
.gap-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--ink) 72%, transparent), transparent 55%); }
.gap-figure figcaption { position: absolute; z-index: 2; left: 24px; bottom: 22px; display: grid; gap: 3px; }
.gap-figure figcaption strong { color: var(--caption); font-size: clamp(22px, 2.3vw, 36px); font-weight: 540; }
.gap-figure figcaption span { color: var(--paper-58); font-size: var(--fs-label); }
.access-ledger { display: grid; grid-template-rows: repeat(3, 1fr); border-top: 1px solid var(--line-strong); }
.access-ledger article { display: grid; grid-template-columns: clamp(82px, 8vw, 116px) 1fr; gap: clamp(14px, 1.5vw, 24px); align-items: center; min-height: 0; padding: clamp(8px, 1.1vh, 15px) 0; border-bottom: 1px solid var(--line); }
.access-ledger article > img { width: 100%; height: 100%; max-height: clamp(86px, 13vh, 130px); object-fit: contain; filter: saturate(.82) brightness(.92); transition: transform 360ms cubic-bezier(.16,1,.3,1), filter 240ms ease; }
.access-ledger article:hover > img { filter: saturate(.96) brightness(1.04); transform: translateY(-3px) scale(1.04); }
.access-ledger article > div { display: grid; gap: 8px; }
.access-ledger strong { font-size: clamp(16px, 1.28vw, 20px); font-weight: 540; line-height: 1.28; }
.access-ledger p { max-width: 42ch; margin: 0; color: var(--paper-58); font-size: var(--fs-body); line-height: 1.52; }

/* Inline citations. A source belongs on the claim, not only in the footer. */
.cite { color: var(--caption); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--caption) 38%, transparent); text-underline-offset: 3px; white-space: nowrap; transition: color 180ms ease; }
.cite svg { display: inline-block; width: .62em; height: .62em; margin-left: .28em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: baseline; opacity: .7; }
.cite:hover { color: var(--paper); text-decoration-color: var(--paper-40); }
.slide-note.is-quiet { color: var(--paper-24); text-transform: none; letter-spacing: .02em; }

/* Institutional procurement.
   The point of this slide is that the four institution types do not pay the
   same way, so it is drawn as four funding routes: two reach CinemaCC directly
   and two route through a third party. That difference is the argument. */
.procurement-body { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(16px, 2.4vh, 30px); min-height: 0; }
.evidence-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 44px); padding-bottom: clamp(12px, 1.7vh, 20px); border-bottom: 1px solid var(--line-strong); }
.evidence-bar article { display: grid; align-content: start; gap: 6px; }
.evidence-bar b { color: var(--caption); font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.evidence-bar p { margin: 0; color: var(--paper-58); font-size: var(--fs-body); line-height: 1.52; }

.route-map { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(8px, 1.1vh, 14px); min-height: 0; }
.route-legend, .route { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .82fr) minmax(0, 1fr) minmax(0, .82fr) minmax(0, .74fr) minmax(0, .98fr); gap: 0 clamp(6px, .7vw, 12px); }
.route-legend span { color: var(--paper-40); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .07em; text-transform: uppercase; }
.route-legend span:nth-child(2) { grid-column: 2 / 5; text-align: center; }
.route-legend span:nth-child(3) { grid-column: 5; text-align: center; }
.route-legend span:nth-child(4) { grid-column: 6; }
.route-rows { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); min-height: 0; border-top: 1px solid var(--line-strong); }
.route { align-items: center; min-height: 0; padding: clamp(9px, 1.3vh, 17px) 0; border-bottom: 1px solid var(--line); }
.route.is-direct .link { grid-column: 2 / 5; }
.route.is-direct .is-cc { grid-column: 5; }
.route.is-direct .is-end { grid-column: 6; }

.node { display: grid; align-content: center; gap: 3px; min-height: 0; }
.node.is-you { padding: clamp(8px, 1.1vh, 13px) clamp(11px, 1.1vw, 16px); border: 1px solid color-mix(in srgb, var(--caption) 52%, transparent); background: color-mix(in srgb, var(--caption) 7%, transparent); }
.node.is-you b { color: var(--paper); font-size: clamp(13px, 1.02vw, 16px); font-weight: 560; line-height: 1.25; }
.node.is-you em { color: var(--caption); font-size: var(--fs-label); font-style: normal; line-height: 1.3; }
.node.is-mid { justify-items: center; padding: clamp(7px, 1vh, 12px) clamp(9px, .9vw, 14px); border: 1px dashed var(--line-strong); color: var(--paper-58); font-size: var(--fs-body); text-align: center; line-height: 1.28; }
.node.is-cc { justify-items: center; padding: clamp(8px, 1.1vh, 13px) clamp(9px, .9vw, 14px); border: 1px solid color-mix(in srgb, var(--hud) 40%, transparent); background: color-mix(in srgb, var(--hud) 7%, transparent); color: var(--paper); font-size: clamp(12px, .96vw, 15px); font-weight: 560; letter-spacing: -.01em; }
.node.is-end { display: flex; align-items: center; gap: .42em; padding-left: clamp(10px, 1vw, 16px); color: var(--paper-58); font-size: var(--fs-body); line-height: 1.3; }
.node.is-end::before { content: "→"; flex: none; color: var(--paper-24); }

.link { display: grid; align-content: center; justify-items: center; gap: 5px; min-width: 0; padding: 0 clamp(4px, .5vw, 9px); }
.link span { color: var(--paper-40); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .04em; text-align: center; line-height: 1.3; }
.link i { position: relative; display: block; width: 100%; height: 1px; background: var(--line-strong); transform-origin: left center; }
.link i::after { content: ""; position: absolute; top: 50%; right: 0; width: 5px; height: 5px; border-top: 1px solid var(--caption); border-right: 1px solid var(--caption); transform: translateY(-50%) rotate(45deg); }
.route.is-routed .link i { background: color-mix(in srgb, var(--caption) 34%, transparent); }

/* Audience Access Program */
.program-body { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(12px, 1.7vh, 22px); min-height: 0; }
.program-banner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px clamp(16px, 2vw, 30px); align-items: baseline; padding-bottom: clamp(10px, 1.3vh, 16px); border-bottom: 1px solid var(--line-strong); }
.program-banner strong { color: var(--caption); font-size: clamp(16px, 1.34vw, 22px); font-weight: 560; letter-spacing: -.01em; }
.program-banner span { color: var(--paper-58); font-size: var(--fs-body); line-height: 1.45; }
.program-main { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr); gap: clamp(18px, 2.4vw, 40px); min-height: 0; }
.device-pair { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(12px, 1.5vw, 22px); min-height: 0; }
.device-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; min-height: 0; border: 1px solid var(--line); background: #0f0f11; }
.device-panel figure { position: relative; overflow: hidden; min-height: 0; margin: 0; background: #070708; }
.device-panel figure :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.84) brightness(.82); transition: transform 760ms cubic-bezier(.16,1,.3,1), filter 240ms ease; }
.phone-panel figure video { object-fit: contain; background: #050506; }
.glasses-panel figure img { object-position: center 48%; }
.device-panel:hover figure :is(img, video) { filter: saturate(.96) brightness(.92); transform: scale(1.035); }
.device-panel > div { display: grid; gap: 5px; padding: clamp(10px, 1.15vw, 16px); border-top: 1px solid var(--line); }
.device-panel > div span { color: var(--paper-40); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .06em; text-transform: uppercase; }
.device-panel > div strong { color: var(--paper); font-size: clamp(13px, 1.04vw, 16px); font-weight: 540; line-height: 1.3; }
.device-hud-caption { position: absolute; top: 66%; left: 50%; color: #9cff6b; font-family: var(--mono); font-size: clamp(8px, .75vw, 12px); font-weight: 560; letter-spacing: .06em; white-space: nowrap; text-shadow: 0 0 1px currentColor, 0 0 3px rgba(111,255,79,.24); transform: translate(-50%, -50%); opacity: .88; pointer-events: none; }
.deliverable-grid { display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); min-height: 0; border-top: 1px solid var(--line-strong); }
.deliverable-grid article { display: grid; grid-template-columns: clamp(28px, 2.6vw, 40px) minmax(0, 1fr); gap: clamp(10px, 1.2vw, 18px); align-items: center; min-height: 0; padding: clamp(6px, .85vh, 11px) 0; border-bottom: 1px solid var(--line); }
.deliverable-grid b { color: var(--caption); font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: .04em; }
.deliverable-grid p { margin: 0; color: var(--paper-76); font-size: var(--fs-body); font-weight: 500; line-height: 1.4; }
.rights-rule { align-self: end; margin: 0; padding: clamp(9px, 1.2vh, 14px) 0 0; border-top: 1px solid var(--line-strong); color: var(--paper-58); font-size: var(--fs-body); line-height: 1.5; }

/* First-stage pilot.
   Drawn as a timeline rather than listed as phases, because the useful thing
   for a procurement reader is when the three payments fall against the work. */
.pilot-body { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(14px, 2.1vh, 28px); min-height: 0; --gantt-label: clamp(150px, 15vw, 250px); }
.scope-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 30px); padding-bottom: clamp(12px, 1.7vh, 20px); border-bottom: 1px solid var(--line-strong); }
.scope-row article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px clamp(8px, .9vw, 14px); align-items: baseline; }
.scope-row b { color: var(--paper); font-size: clamp(24px, 2.3vw, 38px); font-weight: 560; letter-spacing: -.035em; line-height: 1; }
.scope-row article.is-accent b { color: var(--caption); }
.scope-row span { color: var(--paper-58); font-size: var(--fs-body); line-height: 1.3; }

.gantt { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(8px, 1.2vh, 16px); min-height: 0; margin: 0; }
.gantt-scale { display: grid; grid-template-columns: var(--gantt-label) repeat(6, minmax(0, 1fr)); padding-bottom: clamp(6px, .9vh, 11px); border-bottom: 1px solid var(--line-strong); }
.gantt-scale span { color: var(--paper-40); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .05em; }
.gantt-scale span + span { padding-left: clamp(5px, .5vw, 9px); border-left: 1px solid var(--line); }
.gantt-rows { position: relative; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); min-height: 0; }
.gantt-rows::before { content: ""; position: absolute; z-index: 0; inset: 0 0 0 var(--gantt-label); background: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100% / 6)); pointer-events: none; }
.gantt-rows article { position: relative; z-index: 1; }
.gantt-rows article { display: grid; grid-template-columns: var(--gantt-label) repeat(6, minmax(0, 1fr)); align-items: center; min-height: 0; }
.gantt-rows b { padding-right: clamp(10px, 1.1vw, 18px); color: var(--paper); font-size: clamp(12px, .98vw, 15px); font-weight: 530; line-height: 1.3; }
.gantt-rows i { grid-column: calc(var(--from) + 1) / calc(var(--to) + 1); height: clamp(20px, 3.2vh, 40px); background: linear-gradient(90deg, color-mix(in srgb, var(--caption) 62%, transparent), color-mix(in srgb, var(--caption) 30%, transparent)); border-left: 2px solid var(--caption); transform: scaleX(0); transform-origin: left center; }
.gantt-rows article.is-live i { background: linear-gradient(90deg, color-mix(in srgb, var(--hud) 55%, transparent), color-mix(in srgb, var(--hud) 24%, transparent)); border-left-color: var(--hud); }
.gantt-marks { display: grid; grid-template-columns: var(--gantt-label) repeat(6, minmax(0, 1fr)); padding-top: clamp(7px, 1vh, 12px); border-top: 1px solid var(--line-strong); }
.gantt-marks b { grid-column: calc(var(--at) + 1); display: grid; gap: 2px; padding-left: 11px; position: relative; color: var(--caption); font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: .04em; }
.gantt-marks b::before { content: ""; position: absolute; top: .34em; left: 0; width: 0; height: 0; border-left: 5px solid var(--caption); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
.gantt-marks em { color: var(--paper-58); font-family: inherit; font-size: var(--fs-label); font-style: normal; letter-spacing: 0; }

.pilot-foot { display: grid; gap: clamp(7px, 1vh, 12px); }
.acceptance-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(10px, 1.2vw, 20px); align-items: baseline; margin: 0; padding-top: clamp(10px, 1.4vh, 16px); border-top: 1px solid var(--line-strong); color: var(--paper); font-size: var(--fs-body); font-weight: 520; line-height: 1.45; }
.acceptance-line span { color: var(--hud); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .07em; text-transform: uppercase; }
.scope-note { margin: 0; color: var(--paper-58); font-size: var(--fs-body); line-height: 1.5; }

/* Credibility */
.proof-body { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(16px, 2.2vh, 30px); min-height: 0; }
.proof-metric { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 6px clamp(12px, 1.5vw, 22px); align-items: baseline; padding-bottom: clamp(12px, 1.6vh, 20px); border-bottom: 1px solid var(--line-strong); }
.user-count { color: var(--caption); font-size: clamp(46px, 5vw, 82px); font-weight: 560; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.04em; line-height: .96; }
.proof-metric > span { color: var(--paper-58); font-size: clamp(15px, 1.2vw, 20px); font-weight: 520; }
.proof-metric > b { justify-self: end; max-width: 46ch; color: var(--paper-58); font-size: var(--fs-body); font-weight: 500; line-height: 1.5; text-align: right; }
.proof-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 3.6vw, 62px); min-height: 0; }
.proof-column { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(10px, 1.4vh, 18px); min-height: 0; }
.proof-column > span { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .07em; text-transform: uppercase; }
.proof-column.is-settled > span { color: var(--hud); }
.proof-column.is-open > span { color: var(--caption); }
.proof-column ul { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); align-content: stretch; gap: 0; min-height: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.proof-column li { position: relative; display: grid; align-content: center; min-height: 0; padding: clamp(9px, 1.2vh, 15px) 0 clamp(9px, 1.2vh, 15px) 25px; border-bottom: 1px solid var(--line); color: var(--paper-76); font-size: clamp(13px, 1.02vw, 16px); font-weight: 500; line-height: 1.42; }
.proof-column li::before { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 13px; height: 13px; font-family: var(--mono); font-size: 9px; line-height: 1; transform: translateY(-50%); }
.proof-column.is-settled li::before { content: "\2713"; border: 1px solid color-mix(in srgb, var(--hud) 62%, transparent); background: color-mix(in srgb, var(--hud) 14%, transparent); color: var(--hud); }
.proof-column.is-open li::before { content: ""; border: 1px dashed color-mix(in srgb, var(--caption) 62%, transparent); }

/* Contact */
.contact-slide::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 78% 32%, color-mix(in srgb, var(--caption) 10%, transparent), transparent 28%); }

@media (max-width: 900px) {
  :root { --gutter-x: 22px; --gutter-y: 56px; --step: 22px; }
  body { overflow: auto; }
  .deck { height: 100dvh; scroll-snap-type: y proximity; }
  .slide { min-height: 100dvh; overflow: visible; }
  .slide-frame { min-height: 100dvh; padding-bottom: 66px; }
  .deck-controls { top: 14px; right: var(--gutter-x); }
  #fullscreen-control, .rail { display: none; }
  .logo-mark { right: var(--gutter-x); bottom: 18px; }
  .slide-count { left: var(--gutter-x); bottom: 18px; }
  .slide h2, html[lang="zh-CN"] .slide h2 { max-width: 100%; font-size: clamp(29px, 8.5vw, 43px); }
  .opening-copy h1, html[lang="zh-CN"] .opening-copy h1 { font-size: clamp(42px, 12vw, 66px); }
  .opening-visual img { object-position: 64% center; }
  .opening-visual::after { background: linear-gradient(0deg, var(--ink) 4%, color-mix(in srgb, var(--ink) 74%, transparent) 42%, color-mix(in srgb, var(--ink) 20%, transparent) 100%); }
  .opening-copy { padding-bottom: 10vh; }

  .gap-body,
  .program-main,
  .proof-split { grid-template-columns: 1fr; grid-template-rows: auto; gap: 22px; }
  .gap-figure { min-height: 260px; }
  .access-ledger article { padding: 14px 0; }
  .program-body,
  .procurement-body,
  .proof-body,
  .pilot-body { grid-template-rows: auto; }
  .device-pair { min-height: 300px; }
  .device-panel figure { min-height: 190px; }
  .proof-column,
  .route-map,
  .gantt { grid-template-rows: auto; }
  .proof-column ul,
  .deliverable-grid { grid-template-rows: auto; }
  .proof-column ul { gap: 0; }
  .proof-metric { grid-template-columns: auto minmax(0, 1fr); }
  .proof-metric > b { grid-column: 1 / -1; justify-self: start; max-width: 100%; text-align: left; }
  .evidence-bar { grid-template-columns: 1fr; gap: 14px; }
  /* Routes stack: the funder, the hops it takes, then who it reaches. */
  .route-legend { display: none; }
  .route-rows { grid-template-rows: auto; }
  .route, .route.is-direct .link, .route.is-direct .is-cc, .route.is-direct .is-end { grid-column: auto; }
  .route { grid-template-columns: 1fr; gap: 10px; padding: 16px 0; }
  .link { justify-items: start; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 0; }
  .link i { width: 100%; }
  .node.is-end { padding-left: 0; }
  .scope-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
  .pilot-body { --gantt-label: 100%; }
  .gantt-scale, .gantt-marks { display: none; }
  .gantt-rows { grid-template-rows: auto; gap: 12px; }
  .gantt-rows article { grid-template-columns: 1fr; gap: 5px; }
  .gantt-rows i { grid-column: 1; transform: scaleX(1); }
}

@media (max-width: 560px) {
  :root { --gutter-x: 18px; --gutter-y: 52px; }
  .slide-frame { gap: 18px; }
  .slide-foot { gap: 16px; }
  .slide-source { gap: 6px 12px; }
  .logo-mark span { display: none; }
  .opening-copy h1, html[lang="zh-CN"] .opening-copy h1 { font-size: clamp(38px, 12vw, 54px); }
  .gap-figure { min-height: 230px; }
  .access-ledger article { grid-template-columns: 86px 1fr; gap: 12px; }
  .program-body { gap: 16px; }
  .device-pair { grid-template-columns: 1fr; min-height: 0; }
  .device-panel { grid-template-rows: auto auto; }
  .device-panel figure { min-height: 220px; }
  .phone-panel figure { min-height: 0; aspect-ratio: 16 / 9; }
  .phone-panel figure video { position: absolute; inset: 0; min-height: 100%; }
  .program-banner { grid-template-columns: 1fr; }
  .program-main { gap: 18px; }
  .scope-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evidence-bar p { font-size: 13px; }
  .slide-note { max-width: 22ch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .reveal, .opening-kicker, .opening-line { opacity: 1; transform: none; }
  .procurement-slide .link i, .pilot-slide .gantt-rows i { transform: scaleX(1); }
}

@media print {
  body { overflow: visible; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .deck { height: auto; overflow: visible; }
  .deck-controls, .rail, .progress, .slide-count { display: none; }
  .slide { min-height: 100vh; break-after: page; }
  .slide-frame { min-height: 100vh; }
  .reveal, .opening-kicker, .opening-line { opacity: 1; transform: none; animation: none; }
  .procurement-slide .link i, .pilot-slide .gantt-rows i { transform: scaleX(1); animation: none; }
}


.contact-intro { margin: 0 0 24px; color: var(--paper-58); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; }
.contact-sheet { margin-top: 44px; }
.contact-sheet a { display: inline-flex; align-items: center; min-height: 44px; color: var(--caption); font-size: 18px; text-decoration: underline; text-underline-offset: 5px; }
.contact-sheet p { margin: 4px 0 0; color: var(--paper-58); font-size: 14px; line-height: 1.5; }