/* Shared, hand-authored partner skin. Keep these tokens aligned with
   scripts/website/cinemacc-risograph.css; decks retain their own layout rules.
   Legacy --ink means surface and --paper means text in the deck styles. */
@font-face {
  font-family: 'Cinema Anton';
  src: url('/fonts/Anton-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --riso-paper: #f2e4d3;
  --riso-ink: #202022;
  --riso-blue: #234cbd;
  --riso-coral: #ca5945;
  --ink: var(--riso-paper);
  --ink-soft: #ead8c1;
  --paper: var(--riso-ink);
  --paper-76: #383632;
  --paper-72: #383632;
  --paper-58: #514b44;
  --paper-56: #514b44;
  --paper-42: #62594f;
  --paper-40: #62594f;
  --paper-28: #62594f;
  --paper-24: #62594f;
  --line: #c9b7a1;
  --line-strong: #97836d;
  --caption: var(--riso-blue);
  --hud: #276243;
  --warn: #a43f2d;
}
body { font-family: Arial, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; }
::selection { background: var(--riso-blue); color: var(--riso-paper); }
a:focus-visible, button:focus-visible, #language-control:focus-visible {
  outline: 2px solid var(--riso-blue); outline-offset: 4px;
}
.slide { border-bottom: 1px solid var(--line); }
.slide-head { padding-bottom: 20px; border-bottom: 4px solid var(--riso-coral); }
.slide-head:empty, .slide-foot:empty { display: none; }
.slide h2, .opening-copy h1, .sheet-head h1 { font-weight: 750; }
html[lang='en'] :is(.opening-copy h1, .slide h2, .sheet-head h1) {
  font-family: 'Cinema Anton', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.12;
}
.control, #language-control, .sheet-controls button {
  display: grid; place-items: center;
  min-height: 44px; min-width: 44px; padding: 8px 14px;
  border: 1px solid var(--riso-ink); border-radius: 3px;
  background: var(--riso-paper); color: var(--riso-ink);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.control:hover, #language-control:hover, .sheet-controls button:hover {
  background: var(--riso-blue); color: var(--riso-paper);
}
.deck-controls { gap: 8px; }
.progress { height: 3px; background: var(--line); }
.progress div { background: var(--riso-coral); }
.slide-count { padding: 5px 8px; background: var(--riso-paper); border: 1px solid var(--line); }
.logo-mark { color: var(--riso-blue); }
.wechat-qr img { filter: grayscale(1) invert(1) contrast(10); mix-blend-mode: multiply; }
.logo-mark img { filter: none; opacity: 1; }

/* Put the complete opening film alongside paper typography. On phones the
   title leads, then the same uncropped frame; no text overlays the footage. */
.opening-slide {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  min-height: 100dvh;
  padding: 90px var(--gutter-x) 80px;
}
.opening-slide .slide-frame {
  grid-column: 1; grid-row: 1;
  display: block; width: 100%; min-height: 0; margin: 0; padding: 0;
}
.opening-slide .slide-head, .opening-slide .slide-foot { display: none; }
.opening-slide .slide-body { display: block; padding: 0; }
.opening-copy { gap: 22px; padding: 24px 0 0; border-top: 5px solid var(--riso-coral); }
.opening-copy h1, html[lang='zh-CN'] .opening-copy h1 {
  max-width: 100%; font-size: clamp(40px, 4.1vw, 66px); line-height: 1.18;
}
.opening-kicker { color: var(--paper-58); line-height: 1.6; }
.opening-visual {
  position: relative; z-index: 0; inset: auto;
  grid-column: 2; grid-row: 1;
  width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9; margin: 0;
  border: 1px solid var(--riso-ink); border-radius: 4px;
  background: #101011; box-shadow: 8px 10px 0 #d8c6af;
}
.opening-visual::after { display: none; }
.opening-visual :is(video, img) {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  filter: none; transform: none; animation: none;
}

/* Paper cards surround untouched photographs and real subtitle displays. */
.feedback-card-surface, .experience-panel, .device-panel, .flow-state,
.needed-state, .adjacent-stack button::after { background: #f8eedf; }
.feedback-card:hover .feedback-card-surface,
.feedback-card:focus-visible .feedback-card-surface { background: #fff7e9; }
.phone-ledger figure { background: #f8eedf; }
.experience-panel, .device-panel, .flow-state { border-color: var(--line-strong); }
.problem-figure::after, .experience-panel figure::after { display: none; }
.gap-figure::after { background: linear-gradient(0deg, #101011d9, transparent 65%); }
.foreign-caption span { color: #f2e4d3; }
.gap-figure figcaption strong { color: #f2e4d3; }
.gap-figure figcaption span { color: #f2e4d3; }
.gantt-rows i { background: #b9c7e8; border-left-color: var(--riso-blue); }
.gantt-rows article.is-live i { background: #b9d3bc; }
.adjacent-stack button:nth-child(1), .adjacent-legend > div:nth-child(1) i { background: var(--riso-blue); }
.adjacent-stack button:nth-child(2), .adjacent-legend > div:nth-child(2) i { background: var(--riso-coral); }
.adjacent-stack button:nth-child(3), .adjacent-legend > div:nth-child(3) i { background: var(--riso-ink); }
.adjacent-stack button:nth-child(4), .adjacent-legend > div:nth-child(4) i { background: #688878; }
.contact-slide::before { display: none; }
.sheet { padding-top: 90px; }
.sheet-head { border-bottom: 5px solid var(--riso-coral); }
.block-head { border-bottom: 2px solid var(--riso-coral); }
.formula { background: #ead8c1; }

@media (max-width: 900px) {
  .market-opportunity { grid-template-columns: minmax(0, 1fr); }
  .cinema-model, .adjacent-model { grid-template-columns: minmax(0, 1fr); }
  .opening-slide {
    grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 0;
    gap: 30px; padding: 88px 22px 76px;
  }
  .opening-slide .slide-frame { grid-column: 1; grid-row: 1; padding: 0; min-height: 0; }
  .opening-visual { grid-column: 1; grid-row: 2; width: 100%; max-width: none; margin: 0; aspect-ratio: 16 / 9; }
  .opening-copy { padding-top: 20px; }
  .opening-copy h1, html[lang='zh-CN'] .opening-copy h1 { font-size: clamp(36px, 8.5vw, 58px); }
  .slide-head { padding-bottom: 16px; }
  .sheet-head h1 { overflow-wrap: anywhere; }
  .sheet-controls { position: absolute; }
}
@media (max-width: 420px) {
  .opportunity-total > div { grid-template-columns: repeat(5, auto); }
  .opportunity-total strong { grid-column: 2 / -1; }
}
@media print {
  :root { --ink: #fff; --ink-soft: #f2ece4; }
  .opening-slide { padding: 40px; }
  .opening-visual { box-shadow: none; }
  .sheet { padding: 0; }
  .formula { background: #f2ece4; }
}