/* Fable layout fixes on top of deck.css (loaded after it). */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 1. No decoration that can cover content: circles, stray rules, skyline */
.slide::before, .slide::after,
.slide__media::before, .slide__media::after { display: none !important; content: none !important; }

/* 2. Pictures are never cropped */
.slide__media > img { object-fit: contain !important; object-position: center !important; }
.slide__media { align-self: center; }

/* 3. Titles break only between words */
.slide__title { overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; text-wrap: balance; }

/* 4. Full-width diagram / screenshot slides: title on top, picture below, whole */
.slide--wide {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: clamp(16px, 2vh, 28px);
}
.slide--wide .slide__text { max-inline-size: none; gap: 8px; }
.slide--wide .slide__title { font-size: clamp(48px, 5.2vw, 88px); line-height: 0.98; }
.slide--wide .slide__title br { display: none; }
.slide--wide .slide__media { position: relative; inline-size: 100%; block-size: 100%; min-block-size: 0; display: grid; place-items: center; }
.slide--wide .slide__media > svg, .slide--wide .slide__media > img { inline-size: 100%; block-size: 100%; max-block-size: 100%; }
.slide--wide .slide__foot { margin: 0; }

/* 5. Full-bleed infographics */
.slide--info { padding: 0 !important; display: grid; place-items: center; }
.slide--info .slide__media--info { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; }
.slide--info .slide__media--info img { inline-size: 100%; block-size: 100%; object-fit: contain; }

/* 6. QR live in the text column, never over a picture */
.slide__text .slide__qr { position: static !important; inset: auto !important; display: flex; gap: clamp(20px, 2vw, 36px); margin-block-start: clamp(16px, 2.5vh, 32px); }
.slide__text .qr { inline-size: clamp(130px, 9vw, 168px); gap: 8px; }
.slide__text .qr span { font-size: clamp(26px, 1.9vw, 34px); font-weight: 700; overflow-wrap: normal; }

/* 7. Joke block */
.joke { display: grid; gap: 2px; margin-block-start: clamp(12px, 2vh, 24px); padding-block-start: clamp(12px, 2vh, 20px); border-block-start: 2px solid var(--line-color); font-size: clamp(28px, 2.2vw, 40px); line-height: 1.15; }
.joke b { color: var(--accent-b); font-weight: 700; }
.joke span { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; }

/* Layout QA: one scale, fixed safe area, contained media. */
:root {
  --stage-pad: 3.5vw;
  --title-size: 6vw;
  --body-size: 2.5vw;
  --dense-size: 2vw;
}
.slide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: minmax(0, 1fr); gap: 2.5vw; }
.slide * { overflow-wrap: normal; word-break: normal; hyphens: none; }
.whole-word { white-space: nowrap; }
.slide .slide__text { justify-content: center; max-block-size: none; gap: 1.25vw; }
.slide .slide__title { max-inline-size: none; font-size: var(--title-size); line-height: 1.0; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.slide__title::after, .slide__foot::before, .slide__list li::before { display: none; content: none; }
.slide .slide__lead, .slide .slide__list, .slide .cols, .slide .tbl, .slide .grid, .slide .steps, .slide .formula,
.slide .slide__foot, .slide .byline, .slide .joke { font-size: var(--body-size); line-height: 1.25; margin: 0; max-inline-size: none; }
.slide .slide__list li, .slide .steps li { padding: 0.3em 0; }
.slide .slide__list li { border: none; }
.slide .cols li { padding: 0.3em 0; }
.slide .formula { padding: 0.4em 0; }
.slide .slide__foot { margin-block-start: 0.35em; }
.slide .byline { margin-block-start: 0.5em; }
.slide .joke { padding-block-start: 0.65em; }
.slide .slide__media { align-self: center; position: relative; inset: auto; inline-size: 100%; block-size: 100%; min-block-size: 0; }
.slide .slide__media > img, .slide .slide__media > svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-block-size: 100%; object-fit: contain !important; object-position: center !important; }
.slide--dense { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
.slide--dense:has(.tbl), .slide--dense:has(.grid) { grid-template-columns: minmax(0, 4fr) minmax(0, 1fr); }
.slide:not(:has(.slide__media)) { grid-template-columns: minmax(0, 1fr); }
.slide .tbl td, .slide .tbl th { padding-block: 0.32em; }
.slide .tbl th:first-child, .slide .tbl td:first-child { inline-size: 34%; }
.slide .grid__cell { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); padding-block: 0.38em; }
.slide .grid__head, .slide .cols__head, .slide .tbl th { font-size: 1.1em; line-height: 1.15; }
.slide .grid ul { gap: 0.15em 0.3em; }
.slide .slide__text .slide__qr { margin-block-start: 0.5vw; gap: 2vw; }
.slide .slide__text .qr { inline-size: 9vw; gap: 0.5vw; }
.slide .slide__text .qr span { font-size: 1.5vw; line-height: 1.2; }
.slide--cover, .slide--closing { display: grid; padding: var(--stage-pad); }
.slide--cover .slide__text, .slide--closing .slide__text { position: relative; inset: auto; inline-size: 100%; padding: 0; grid-column: 1; grid-row: 1; }
.slide--cover .slide__media, .slide--closing .slide__media { grid-column: 2; grid-row: 1; z-index: 2; }
.slide--wide { grid-template-rows: auto minmax(0, 1fr); row-gap: 2vw; }
.slide--wide .slide__text { gap: 1vw; }
.slide--wide .slide__media { align-self: stretch; }
.slide--info { padding: var(--stage-pad) !important; }
.slide--info .slide__media--info { position: relative; inset: auto; }
.slide__media--diagram { --d-muted: var(--fg); }
.slide__media--diagram svg text, .slide__media--diagram svg tspan { fill: var(--fg) !important; }
.slide__media--diagram svg .muted { color: var(--fg); stroke: var(--fg); }
.slide[data-theme="light"] { --accent-a: #14757d; --accent-b: #b93320; }
/* The terminal overlay gets its own area below the contained illustration. */
.slide[data-hud] .slide__media { block-size: 65%; align-self: center; }
.slide .code-hud { inline-size: 100%; inset-inline: 0; inset-block-end: -8vw; font-size: 1.75vw; }
.slide--info { grid-template-columns: minmax(0, 1fr); }

/* OWNER 17:10: the reference grid, one text scale and one portrait slot. */
.slide:not(.slide--info):not(.slide--wide):has(> .slide__media) {
  grid-template-columns: minmax(0, 1fr) 27vw;
  column-gap: 4vw;
}
.slide:not(:has(.slide__media)) {
  grid-template-columns: minmax(0, 1fr);
}
.slide:not(.slide--info):not(.slide--wide) > .slide__media {
  inline-size: 27vw;
  block-size: 36vw;
  min-block-size: 0;
  align-self: center;
  justify-self: center;
}
.slide .slide__text > * { flex-shrink: 0; }
.slide .cols { gap: 2.5vw; }
.slide .cols__col,
.slide .cols__col + .cols__col { padding-inline: 0; border: 0; }
.slide .cols li { border: 0; }
.slide .cols__head { margin-block-end: 0.5em; }
.slide .formula { border: 0; padding: 0; font-weight: 500; }
.slide .formula i { text-decoration: none; font-weight: 700; }
.slide .joke {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5vw 1vw;
  border: 0;
  padding-block-start: 1vw;
}
.slide .joke b { grid-column: 1 / -1; }
.slide .joke span { font-family: var(--text); font-size: 1em; }
.slide .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5vw; }
.slide .grid__cell { display: block; padding-block: 0; border: 0; }
.slide .grid__head { margin-block-end: 0.65em; }
.slide .grid ul { display: grid; gap: 0.4em; }
.slide .grid li { display: block; }
.slide .grid li::after { display: none; content: none; }
.slide .slide__text .slide__qr { gap: 2vw; }
.slide .slide__text .qr { inline-size: 10vw; }
.slide .slide__text .qr span { font-size: 1.5vw; line-height: 1.25; }
/* Infographics use the full canvas with their original aspect ratio. */
.slide.slide--info { padding: 0 !important; }
.slide.slide--info .slide__media--info { inline-size: 100%; block-size: 100%; }

/* The portrait remains the only visual; motion uses the separate bottom strip. */
.slide .code-hud { display: none; }

/* OWNER 17:15: portrait pictures as big as the slide allows (full content height), cover/closing included. */
.slide:not(.slide--info):not(.slide--wide):has(> .slide__media) {
  grid-template-columns: minmax(0, 1fr) 37vw;
  column-gap: 3.5vw;
}
.slide:not(.slide--info):not(.slide--wide) > .slide__media {
  inline-size: 37vw;
  block-size: 49vw;
}
.slide[data-hud]:not(.slide--info):not(.slide--wide) > .slide__media { block-size: 40vw; align-self: start; }