/* ============================================================
   Slide view: one screen at a time. Builds on style.css.
   ============================================================ */
body.deck { overflow: hidden; height: 100vh; height: 100dvh; }
body.deck::before { z-index: 60; }

.slide {
  position: fixed; inset: 0; display: none; overflow: hidden;
  padding: clamp(28px, 5vh, 64px) clamp(16px, 5vw, 80px) clamp(56px, 8vh, 84px);
  background: var(--paper);
}
.slide.active { display: flex; align-items: center; justify-content: center; animation: slideIn .4s ease; }
body.reduced .slide.active { animation: none; }
@keyframes slideIn { from { opacity: 0; transform: translateX(12px); } }
.slide-inner { width: min(1200px, 100%); max-height: 100%; }
.slide.center .slide-inner { text-align: center; }
.notes { display: none; }

/* Builds */
[data-build] { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
[data-build].built { opacity: 1; transform: none; }
body.reduced [data-build] { transition: none; }

/* Type scale for the room */
.slide .section-title { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.slide .part-title { font-size: clamp(3rem, 9vw, 7rem); }
.slide .part-sub { font-size: clamp(1.15rem, 2vw, 1.6rem); max-width: 40ch; }
.slide .obs-head h3 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
.slide p, .slide li { font-size: clamp(1.05rem, 1.6vw, 1.35rem); }
.slide .fine { font-size: .95rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* Title slide */
.title-slide { padding: 0; }
.title-slide::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/hero-island.jpg") center 35% / cover no-repeat;
}
.title-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 15%, color-mix(in srgb, var(--paper) 80%, transparent) 50%, var(--paper) 88%);
}
.title-slide .slide-inner { position: relative; z-index: 1; align-self: flex-end; padding: 0 clamp(16px, 6vw, 96px) 10vh; width: 100%; max-width: 1300px; }
.title-slide .search-pill { max-width: 40rem; }

/* Definition and imagine */
.slide .dict { margin: 0 auto; max-width: 820px; }
.slide .dict-word { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.slide .imagine p { font-size: clamp(1.6rem, 3.6vw, 2.8rem); margin: 0 0 4vh; }
.slide .doug { grid-template-columns: minmax(0, 360px) 1fr; }
.slide .call-line { font-size: clamp(2rem, 4.4vw, 3.4rem); margin: 0 auto 3rem; }
.slide .scope-note { margin: 0 auto; text-align: left; }
.slide .doug blockquote { font-size: clamp(1.2rem, 2vw, 1.6rem); }
.arrival { max-width: 900px; margin: 0 auto; }
.arrival p { font: 400 clamp(1.4rem, 3vw, 2.3rem)/1.3 var(--f-display); margin: 0 0 3.5vh; text-align: left; }

/* Full-bleed image slides */
.slide.bleed { padding: 0; }
.bleed-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.bleed-img.dim { filter: brightness(.55); }
.bleed .slide-inner { position: static; width: 100%; max-height: none; height: 100%; }
.bleed-card {
  position: absolute; right: clamp(16px, 5vw, 80px); top: 50%; transform: translateY(-50%);
  width: min(560px, calc(100% - 32px)); margin: 0; padding: 1.6rem 1.8rem;
  background: color-mix(in srgb, #f6eedc 94%, transparent); color: #1d2c46; border-radius: 4px;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,.5);
  font: 400 clamp(1.3rem, 2.4vw, 1.9rem)/1.35 var(--f-display) !important;
}
.bleed-card strong { color: #b2462a; font-weight: 600; }
.close-card { position: relative; z-index: 1; height: 100%; display: grid; align-content: center; justify-items: center; text-align: center; color: #f6eedc; padding: 4vh clamp(16px, 6vw, 80px) 10vh; overflow: auto; }
.close-card > * { text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.close-card .acts { background: rgba(18,26,39,.72); border-radius: 8px; padding: 1.2rem 1.6rem; text-shadow: none; }
.close-card .part-title { font-size: clamp(2rem, 5vw, 4rem); max-width: 20ch; margin: 0 0 1rem; }
.close-card .lede-sm { color: #ece2c9; margin-bottom: 2rem; }
.close-card .acts { text-align: left; margin: 0; }
.close-card .acts h3 { color: #f6eedc; }
.close-card ul.ticks li::before { color: #93b277; }

/* Dividers */
.divider .part-sub { margin: 0 auto 2rem; }
.divider .opt-grid { text-align: left; max-width: 1000px; margin: 0 auto; }

/* Components that need more room on a slide */
.slide .flood-panel, .slide .loops, .slide .social, .slide .haystack, .slide .terms, .slide .messengers { margin: 0; }
.slide #floodCanvas { height: clamp(200px, 34vh, 360px); }
.slide .hay-grid { max-height: 42vh; }
.slide .terms-stage { height: clamp(280px, 46vh, 460px); }
.slide .cards { margin: 1rem 0 0; }
.slide .card, .slide .card-inner { min-height: clamp(360px, 52vh, 460px); }
.slide .obs-head { margin-bottom: 1.2rem; }
.slide .clipping { margin: 0; }
.slide .mono-crop { margin: 0; }
.slide .nutrition-wrap { margin: 0; }
.slide .ingest svg { max-height: 56vh; }
.slide .map { margin: 1rem auto 0; max-width: min(1100px, 130vh); }
.map-slide .section-title { text-align: center; }

/* Tool slides */
.tool-slide-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.tool-slide-head .tool-num { width: 3rem; height: 3rem; font-size: 1.4rem; flex: none; }
.tool-slide-head .tool-title { font: 600 clamp(1.8rem, 3.6vw, 2.8rem)/1.1 var(--f-display); margin: 0; }
.tool-slide-head .cont { font-weight: 400; font-size: .6em; color: var(--muted); }
.tool-slide-head .tool-analog { margin: .2rem 0 0; font: 400 .95rem var(--f-mono); color: var(--muted); }
.tool-slide .tool-content { padding: 0; display: block; }
.tool-slide .tool-content > * + * { margin-top: 1rem; }
.tool-slide .tool-content::after { content: ""; display: block; clear: both; }
.tool-slide .tool-content > p { max-width: 70ch; }
.tool-slide .vault { float: right; width: min(34%, 360px); margin: 0 0 1rem 2rem; }

/* Closing slide */
.final-links .big-url { font: 600 clamp(1.1rem, 2.2vw, 1.6rem) var(--f-mono); color: var(--rust); word-break: break-all; }
.slide .signup { margin: 0; max-width: none; }

/* ---------- Chrome ---------- */
.deck-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--rust); width: 0; z-index: 70; transition: width .3s ease; }
.deck-ui {
  position: fixed; right: 14px; bottom: 12px; z-index: 70; display: flex; align-items: center; gap: .4rem;
  background: color-mix(in srgb, var(--card) 85%, transparent); border: 1px solid var(--line); border-radius: 999px; padding: .2rem .35rem;
  opacity: .55; transition: opacity .2s;
}
.deck-ui:hover, .deck-ui:focus-within { opacity: 1; }
.deck-btn { border: 0; background: transparent; color: var(--ink); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font: 600 1.1rem var(--f-mono); }
.deck-btn:hover { background: var(--ink); color: var(--paper); }
.deck-count { font-size: .8rem; color: var(--ink-soft); min-width: 4.5em; text-align: center; }
.deck-notes {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; max-height: 30vh; overflow: auto;
  background: var(--card); border-top: 2px solid var(--rust); padding: .8rem clamp(16px, 5vw, 80px) 3.2rem; font-size: 1.05rem;
}
.deck-notes .note { margin: 0 0 .3rem; }
.deck-notes:not([hidden]) ~ * {}
.deck-help {
  position: fixed; right: 14px; bottom: 60px; z-index: 75; width: min(340px, calc(100% - 28px));
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 1rem 1.2rem;
}
.deck-help h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.deck-help dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0 0 .6rem; font-size: .9rem; }
.deck-help dt { font: 600 .82rem var(--f-mono); }
.deck-help dd { margin: 0; color: var(--ink-soft); }

/* Phones: scroll within a slide instead of shrinking it */
@media (max-width: 700px) {
  .slide { overflow-y: auto; align-items: flex-start; }
  .slide.active { display: block; }
  .slide.center .slide-inner, .divider .slide-inner { padding-top: 12vh; }
  .title-slide.active, .bleed.active { display: flex; }
  .bleed-card { top: auto; bottom: 70px; transform: none; }
  .tool-slide .vault { float: none; width: 100%; margin: 0 0 1rem; }
  .slide .doug { grid-template-columns: 1fr; }
}