/* Příběh písma — vizuální systém „Rubrika“
   Papír, inkoust a jediná rumělková červená. Scéna má pevný rozměr
   1920 × 1080 a škáluje se do okna/iframu (viz app.js → fitStage). */

@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-Bold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* paleta */
  --paper:      #F3EEE4;
  --paper-deep: #E8E1D3;
  --ink:        #17150F;
  --ink-soft:   #3B372E;
  --graphite:   #857D6E;
  --rule:       #D6CEBF;
  --red:        #D2402A;
  --red-deep:   #B5321F;
  --night:      #17150F;
  --night-2:    #221F18;
  --on-night:   #F3EEE4;
  --on-night-mute: #9C9383;

  /* písma */
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:  "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.22, .61, .21, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- App shell ---------- */

.app {
  position: fixed; inset: 0;
  background: var(--letterbox, var(--night));
  transition: background-color .6s var(--ease);
  outline: none;
}
.viewport { position: absolute; inset: 0; overflow: hidden; }
.stage {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 1080px;
  transform-origin: 0 0; /* translate + scale set by app.js → fitStage */
}

/* ---------- Slide base ---------- */

.slide {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease), visibility 0s linear .7s;
}
.slide.is-active {
  opacity: 1; visibility: visible;
  transition: opacity .7s var(--ease), visibility 0s;
  z-index: 2;
}
.slide.theme-night { background: var(--night); color: var(--on-night); }
.slide.theme-red   { background: var(--red);   color: var(--paper); }

/* entrance choreography — everything tagged .rv rises in */
.slide .rv {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms + 120ms);
}
.slide.is-back .rv { transform: translate3d(0, -28px, 0); }
.slide.is-active .rv { opacity: 1; transform: none; }
.slide .rv-img {
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 1s var(--ease-out), transform 1.6s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 110ms + 200ms);
}
.slide.is-active .rv-img { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .slide, .slide .rv, .slide .rv-img { transition-duration: .01ms !important; transition-delay: 0s !important; transform: none !important; }
}

/* running head + folio */
.runhead {
  position: absolute; top: 52px; left: 96px; right: 96px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--graphite);
}
.runhead .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 14px; transform: translateY(-2px); }
.folio {
  position: absolute; left: 96px; bottom: 50px;
  font-family: var(--mono); font-size: 15px; letter-spacing: .1em;
  color: var(--graphite);
}
.folio b { font-weight: 400; color: var(--ink); }
.theme-night .runhead, .theme-night .folio { color: var(--on-night-mute); }
.theme-night .folio b { color: var(--on-night); }
.theme-red .runhead, .theme-red .folio, .theme-red .folio b { color: rgba(243, 238, 228, .78); }
.theme-red .runhead .dot { background: var(--paper); }

/* ---------- Typography ---------- */

.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 16px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red);
  margin: 0 0 28px;
}
.eyebrow::before { content: ""; width: 36px; height: 1px; background: currentColor; }

.title {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--title-size, 88px);
  line-height: .98; letter-spacing: -.012em;
  margin: 0;
  text-wrap: balance;
}
.title .dates {
  display: block;
  font-family: var(--mono); font-size: 18px; letter-spacing: .14em;
  color: var(--red);
  margin-top: 22px;
}
.title .hang { font-style: italic; }

.body {
  font-size: var(--body-size, 26px);
  line-height: 1.5;
  color: var(--ink-soft);
  hyphens: none; -webkit-hyphens: none;
  text-wrap: pretty;
}
.body p { margin: 0 0 .9em; }
.body p:last-child { margin-bottom: 0; }
.theme-night .body { color: rgba(243, 238, 228, .82); }

.dropcap::first-letter {
  float: left;
  font-family: var(--serif); font-weight: 400;
  color: var(--red);
  font-size: 3.9em; line-height: .78;
  margin: .08em .08em 0 -.03em;
}
.lead {
  font-family: var(--serif); font-style: italic;
  font-size: 1.75em; line-height: 1.16;
  color: var(--ink);
  margin-bottom: .75em !important;
  text-wrap: balance;
}

/* ---------- Captions ---------- */

.cap {
  font-family: var(--sans);
  font-size: 17px; line-height: 1.42;
  color: var(--graphite);
  hyphens: none; -webkit-hyphens: none;
}
.cap span { display: block; }
.cap .cap-title { color: var(--ink); font-weight: 600; }
.cap .cap-id { font-family: var(--mono); font-size: 14px; letter-spacing: .06em; color: var(--red); margin-top: 6px; }
.cap .cap-gap { height: .7em; }
.theme-night .cap { color: var(--on-night-mute); }
.theme-night .cap .cap-title { color: var(--on-night); }

/* ---------- Figures (absolutely positioned by app.js) ---------- */

.media { position: absolute; }
.fig { position: absolute; margin: 0; }
.fig-img {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: var(--paper-deep);
  cursor: zoom-in;
  box-shadow: 0 1px 1px rgba(23, 21, 15, .06), 0 22px 44px -22px rgba(52, 40, 18, .42);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.fig-img:hover { box-shadow: 0 1px 1px rgba(23, 21, 15, .06), 0 32px 60px -24px rgba(52, 40, 18, .55); }
.fig-img:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }
.fig-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fig .cap { position: absolute; left: 0; right: 0; }
.fig-num {
  position: absolute; top: -30px; left: 0;
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--graphite);
}
.group-cap {
  position: absolute;
  column-gap: 56px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}
.group-cap .cap-title { break-after: avoid; }

/* ---------- Layout: text / figure ---------- */

.col-text { position: absolute; top: 150px; }
.col-text.center-v { display: flex; flex-direction: column; justify-content: center; }

.rule-v {
  position: absolute; top: 150px; bottom: 120px; width: 1px; background: var(--rule);
}

/* ---------- Cover ---------- */

.cover-art { position: absolute; top: 0; right: 0; bottom: 0; width: 900px; overflow: hidden; background: var(--night-2); }
.cover-art img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; display: block; filter: saturate(.92) contrast(1.02); }
.cover-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 0%, rgba(23,21,15,0) 22%), linear-gradient(0deg, rgba(23,21,15,.82) 0%, rgba(23,21,15,0) 30%); }
.cover-art .cap { position: absolute; right: 64px; bottom: 50px; text-align: right; z-index: 1; }
.cover-text { position: absolute; left: 96px; top: 150px; bottom: 120px; width: 940px; display: flex; flex-direction: column; justify-content: center; }
.cover-title { font-family: var(--serif); font-weight: 400; font-size: 250px; line-height: .84; letter-spacing: -.02em; margin: 0; }
.cover-title em { display: block; font-style: italic; color: var(--red); padding-left: .42em; }
.cover-quote {
  margin: 64px 0 0; padding-left: 28px; border-left: 1px solid var(--red);
  font-family: var(--serif); font-style: italic; font-size: 34px; line-height: 1.28;
  color: rgba(243, 238, 228, .86);
}
.cover-quote span { display: block; }
.cover-text.is-wide { width: 1000px; }
.cover-text.is-wide .eyebrow { line-height: 1.7; }
.cover-org { margin-top: 64px; font-family: var(--serif); font-style: italic; font-size: 40px; line-height: 1.2; color: rgba(243, 238, 228, .86); }
.cover-org span { display: block; }
.cover-intro { margin: 44px 0 0; max-width: 940px; padding-left: 28px; border-left: 1px solid var(--red); font-size: 24px; line-height: 1.5; color: rgba(243, 238, 228, .78); text-wrap: pretty; }
.quote-text .cover-quote { margin-top: 52px; font-size: 46px; }

/* ---------- Agenda ---------- */

.agenda-item { display: grid; grid-template-columns: 190px 1fr; column-gap: 40px; align-items: start; padding: 48px 0; border-top: 1px solid var(--rule); }
.agenda-item:first-child { border-top: 0; padding-top: 0; }
.agenda-item:last-child { padding-bottom: 0; }
.agenda-num { font-family: var(--serif); font-size: 160px; line-height: .8; letter-spacing: -.02em; color: var(--red); }
.agenda-label { font-family: var(--mono); font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); margin-bottom: 18px; }
.agenda-item p { margin: 0; font-family: var(--serif); font-size: 46px; line-height: 1.15; color: var(--ink); text-wrap: pretty; }
.cover-quote cite { display: block; margin-top: 22px; font-family: var(--mono); font-style: normal; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-night-mute); }

/* ---------- Section divider ---------- */

.section-num {
  position: absolute; right: 150px; top: 50%; margin-top: -392px; height: 784px;
  font-family: var(--serif); font-size: 980px; line-height: .8;
  color: rgba(243, 238, 228, .16);
  pointer-events: none;
}
.section-text { position: absolute; left: 96px; top: 150px; bottom: 120px; width: 1200px; display: flex; flex-direction: column; justify-content: center; }
.section-text .eyebrow { color: var(--paper); }
.section-title { font-family: var(--serif); font-weight: 400; font-size: 200px; line-height: .9; letter-spacing: -.02em; margin: 0; }
.section-sub { font-family: var(--serif); font-style: italic; font-size: 64px; line-height: 1.1; margin: 28px 0 0; color: rgba(243, 238, 228, .9); }

/* ---------- Table / chronology ---------- */

.chrono { position: absolute; left: 96px; right: 96px; top: 318px; bottom: 112px; display: flex; flex-direction: column; }
.chrono-head, .chrono-row {
  display: grid;
  grid-template-columns: 150px 270px 1fr 330px 470px;
  column-gap: 32px; align-items: baseline;
}
.chrono-head {
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite);
  padding-bottom: 14px; border-bottom: 1px solid var(--ink);
}
.chrono-body { flex: 1; display: flex; flex-direction: column; }
.chrono-row { flex: 1; border-bottom: 1px solid var(--rule); align-items: center; }
.chrono-year { font-family: var(--serif); font-size: 50px; line-height: 1; letter-spacing: -.01em; display: flex; align-items: center; gap: 16px; }
.chrono-year i { width: 11px; height: 11px; border-radius: 50%; background: var(--red); flex: none; }
.chrono-row.is-unrealised .chrono-year { color: var(--graphite); }
.chrono-row.is-unrealised .chrono-year i { background: transparent; border: 1.5px solid var(--graphite); }
.chrono-author { font-size: 22px; color: var(--ink); }
.chrono-family { font-family: var(--serif); font-style: italic; font-size: 34px; line-height: 1.05; }
.chrono-foundry { font-size: 20px; color: var(--ink-soft); }
.chrono-note { font-size: 19px; line-height: 1.35; color: var(--graphite); }
.chrono-legend { position: absolute; right: 96px; top: 250px; display: flex; gap: 32px; font-family: var(--mono); font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.chrono-legend span { display: flex; align-items: center; gap: 10px; }
.chrono-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.chrono-legend i.o { background: transparent; border: 1.5px solid var(--graphite); }

/* ---------- Closing ---------- */

.closing-text { position: absolute; left: 96px; top: 150px; bottom: 120px; width: 960px; display: flex; flex-direction: column; justify-content: center; }
.closing-thanks { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 230px; line-height: .86; letter-spacing: -.02em; margin: 0 0 72px; }
.closing-names { font-family: var(--serif); font-size: 58px; line-height: 1.12; margin: 0; }
.closing-names span { display: block; }
.closing-meta { margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(243, 238, 228, .2); font-size: 22px; line-height: 1.55; color: var(--on-night-mute); max-width: 620px; }
.closing-meta p { margin: 0; }
.closing-logo { position: absolute; right: 96px; bottom: 44px; height: 64px; filter: invert(1); opacity: .9; }
.glyph { position: absolute; right: 96px; top: 150px; width: 680px; height: 680px; }
.glyph .grid line, .glyph .grid rect, .glyph .grid circle { stroke: rgba(243, 238, 228, .14); stroke-width: 1; fill: none; }
.glyph text { font-family: var(--serif); fill: var(--red); }
.glyph .base { stroke: var(--red); stroke-width: 1; }

/* ---------- UI chrome (real pixels, outside the scaled stage) ---------- */

.ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; pointer-events: none; transition: opacity .45s var(--ease); }
.app.is-idle .ui { opacity: 0; }
.ui-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(133, 125, 110, .18); }
.ui-progress span { display: block; height: 100%; width: 0; background: var(--red); transition: width .7s var(--ease); }
.ui-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  padding: 0 clamp(10px, 2.2vw, 28px) clamp(12px, 2.4vw, 26px);
}
.ui-count {
  display: none; /* číslo slajdu nese pagina přímo ve scéně */
  pointer-events: auto;
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(23, 21, 15, .72); color: var(--on-night);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ui-count-sep { margin: 0 6px; color: var(--on-night-mute); }
.ui-actions {
  pointer-events: auto;
  display: flex; align-items: center; gap: 4px; padding: 4px;
  border-radius: 999px;
  background: rgba(23, 21, 15, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
}
.ui-divider { width: 1px; height: 20px; background: rgba(243, 238, 228, .18); margin: 0 4px; }
.ui-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 0; background: transparent; color: var(--on-night);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), opacity .2s;
}
.ui-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ui-btn:hover { background: rgba(243, 238, 228, .12); }
.ui-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.ui-btn:disabled { opacity: .3; cursor: default; background: transparent; }
.ui-btn-primary { background: var(--red); }
.ui-btn-primary:hover { background: var(--red-deep); }
.ui-btn-primary:disabled { background: var(--red); }
.ico-exit { display: none; }
.app.is-fullscreen .ico-enter { display: none; }
.app.is-fullscreen .ico-exit { display: block; }
@media (max-width: 960px), (max-height: 540px) {
  .ui-btn { width: 32px; height: 32px; }
  .ui-btn svg { width: 16px; height: 16px; }
  .ui-divider { height: 16px; }
}

/* ---------- Overview ---------- */

.overview {
  position: absolute; inset: 0; z-index: 30;
  background: var(--night);
  display: flex; flex-direction: column;
  animation: fadeIn .35s var(--ease);
}
.overview-head { display: flex; justify-content: space-between; align-items: center; padding: clamp(12px, 2.4vw, 28px) clamp(16px, 3vw, 40px) 0; }
.overview-title { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.6vw, 34px); color: var(--on-night); }
.overview-grid {
  flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 44vw), 1fr));
  gap: clamp(12px, 1.8vw, 24px);
  padding: clamp(16px, 2.4vw, 32px) clamp(16px, 3vw, 40px) clamp(24px, 4vw, 48px);
  align-content: start;
}
.thumb {
  position: relative; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  color: var(--on-night-mute);
}
.thumb-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; outline: 1px solid rgba(243, 238, 228, .1); transition: outline-color .2s, transform .3s var(--ease); }
.thumb:hover .thumb-frame { outline-color: rgba(243, 238, 228, .5); transform: translateY(-2px); }
.thumb.is-current .thumb-frame { outline: 2px solid var(--red); }
.thumb:focus-visible .thumb-frame { outline: 2px solid var(--red); }
.thumb-inner { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; pointer-events: none; }
.thumb-inner .slide { opacity: 1; visibility: visible; transition: none; }
.thumb-inner .rv, .thumb-inner .rv-img { opacity: 1; transform: none; transition: none; }
.thumb-label { display: flex; gap: 10px; margin-top: 10px; font-size: 13px; line-height: 1.3; }
.thumb-label b { font-family: var(--mono); font-weight: 400; color: var(--red); }

/* ---------- Lightbox ---------- */

.lightbox {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(17, 15, 11, .94);
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 64px);
  animation: fadeIn .3s var(--ease);
  cursor: zoom-out;
}
.lightbox-figure { margin: 0; display: flex; align-items: flex-end; gap: clamp(16px, 2.5vw, 40px); max-width: 100%; max-height: 100%; }
.lightbox-figure img {
  /* skeny jsou malé — záměrně je roztáhneme na dostupnou výšku */
  height: calc(100vh - 2 * clamp(16px, 4vw, 64px)); width: auto;
  max-width: calc(100vw - 2 * clamp(16px, 4vw, 64px) - clamp(160px, 22vw, 300px));
  object-fit: contain; background: var(--paper-deep);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); animation: zoomIn .4s var(--ease-out);
}
.lightbox .cap { flex: none; width: clamp(140px, 20vw, 280px); font-size: clamp(12px, 1.3vw, 16px); color: var(--on-night-mute); }
.lightbox .cap .cap-id { font-size: .85em; }
.lightbox .cap .cap-title { color: var(--on-night); }
.lightbox-close { position: absolute; top: clamp(10px, 2vw, 24px); right: clamp(10px, 2vw, 24px); background: rgba(243, 238, 228, .08); }
@media (max-aspect-ratio: 4/3) {
  .lightbox-figure { flex-direction: column; align-items: flex-start; }
  .lightbox-figure img { height: auto; width: 100%; max-width: 100%; max-height: 72vh; }
  .lightbox .cap { width: auto; }
}

@keyframes fadeIn { from { opacity: 0; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.96); } }

.cap-side { padding-left: 22px; border-left: 1px solid var(--red); }

/* ---------- Černá varianta ----------
   Všechny slajdy kromě titulního: černé pozadí, bílé písmo.
   Tokeny se předefinují na úrovni slajdu, takže je převezmou všechna
   pravidla výše (text, popisky, linky, tabulka). */

:root { --black: #000000; }

.slide:not([data-kind="cover"]) {
  --ink:        #FFFFFF;
  --ink-soft:   rgba(255, 255, 255, .86);
  --graphite:   #A3A3A3;
  --rule:       rgba(255, 255, 255, .18);
  --paper-deep: #141414;
  --red:        #E4513A;   /* o stupeň světlejší kvůli kontrastu na černé */
  --on-night:   #FFFFFF;
  --on-night-mute: #A3A3A3;
  background: var(--black);
  color: var(--ink);
}
.slide:not([data-kind="cover"]) .body { color: var(--ink-soft); }
.slide:not([data-kind="cover"]) .fig-img,
.slide:not([data-kind="cover"]) .fig-img:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.slide:not([data-kind="cover"]) .closing-meta { border-top-color: var(--rule); }

/* předěl kapitoly: místo červené plochy černá, červená zůstává jako akcent */
.slide.theme-red { background: var(--black); color: var(--ink); }
.theme-red .runhead, .theme-red .folio { color: var(--graphite); }
.theme-red .folio b { color: var(--ink); }
.theme-red .runhead .dot { background: var(--red); }
.theme-red .section-text .eyebrow { color: var(--red); }
.theme-red .section-num { color: var(--red); opacity: .9; }
.theme-red .section-sub { color: var(--graphite); }