/* SSBD's live brand system, verified at ssbdfest.com on October 29, 2026.
   The original website asset is named RocGroteskVariable.otf; its internal
   font family is Room 205. Use the exact face, not a lookalike. */
@font-face {
  font-family: "SSBD Display";
  src: url("/assets/fonts/ssbd-display.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

html { scrollbar-color: var(--ink) var(--cream); }
h1, h2, .play-marquee, .journey-menu nav strong {
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: -.035em;
}
.serif-word, .handwritten {
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: -.025em;
}
h1, h2 { line-height: .96; }
button:focus-visible, a:focus-visible { outline-color: var(--ink); }
.primary { background: var(--turquoise); color: var(--deep-ink); }
.primary:hover { background: var(--acid); }
.pill { font-weight: 700; }
.entry h1 { font-size: clamp(76px, 10.2vw, 160px); line-height: .9; }
.entry h1 em { color: var(--coral); }
.entry-note { color: var(--ink); font-size: clamp(22px, 2.5vw, 38px); }
.entry-photo { border-color: var(--cream); box-shadow: 0 18px 40px #00505a20; }
.entry-mountains { opacity: .2; }
.ink-logo, .brand img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(24%) saturate(2548%) hue-rotate(147deg) brightness(92%) contrast(103%);
}
.site-header { color: var(--deep-ink); }
.site-header.light { color: var(--cream); }
.site-header.light .brand img { filter: none; }
.chapter-status, .sound-toggle, .motion-toggle { border-color: #00505a25; }
.progress-line { background: #00505a25; }
.sound-toggle[aria-pressed="true"] { background: var(--turquoise); color: var(--deep-ink); }
.photo { background: var(--acid); box-shadow: 0 12px 30px #00505a12; }
.clip { background: var(--ink); }

.scene-arrival, .poster-world { background: var(--coral); }
.world-sky { opacity: 1; }
.arrival-title h2 { font-size: clamp(68px, 9.8vw, 155px); line-height: .92; text-shadow: 0 2px 2px #00202435, 0 6px 24px #00202465; }
.arrival-title .serif-word { font-size: .75em; }
.arrival-title .eyebrow { color: var(--deep-ink); }
.arrival-memory .handwritten { font-size: clamp(50px, 7.7vw, 120px); }
.arrival-symbol { filter: drop-shadow(0 8px 6px #00505a30); }
.people-title { left: 24%; width: 52%; }
.people-title h2 { font-size: clamp(66px, 9.8vw, 150px); line-height: .93; }
.people-title .serif-word { color: var(--coral); font-size: 1em; }
.people-title .story-count { font-size: .78em; }
.people-caption { font-size: clamp(25px, 3.5vw, 52px); }
.scene-play { color: var(--deep-ink); }
.play-heading h2 { font-size: clamp(36px, 4.5vw, 70px); line-height: 1.03; }
.play-marquee { font-size: 21vw; line-height: 1; }
.scene-lake { background: var(--turquoise); }
.lake-title h2 { font-size: clamp(70px, 9.3vw, 150px); line-height: .96; }
.lake-background .image-shade { background: #00202445; }
.lake-note { font-size: 4.2vw; }
.scene-night, .night-panorama { background: var(--deep-ink); }
.night-background .image-shade { background: linear-gradient(180deg, #00181b5c, #0020244d); }
.night-title h2 { font-size: clamp(72px, 9.6vw, 150px); line-height: .96; }
.night-photo { background: var(--ink); }
.night-panorama span { font-size: 4.2vw; }
.scene-between { background: var(--acid); }
.between-title h2 { font-size: clamp(50px, 6.9vw, 105px); line-height: 1; }
.between-title .serif-word { font-size: .8em; color: var(--ink); }
.between-note { font-size: 3.7vw; }
.ending-content { background: #fffae8ed; }
.ending-content h2 { font-size: clamp(70px, 9.2vw, 145px); line-height: .96; }
.ending-content h2 .serif-word { color: var(--coral); }
body.reduce-motion .ending-content { background: #fffae8d9!important; }
.sound-nudge { border-color: #00505a30; }
.nudge-symbol { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; align-self: center; }

dialog::backdrop { background: #00181bd9; }
.journey-menu h2 { font-size: 58px; }
.journey-menu nav a { border-color: #00505a30; }
.journey-menu nav strong { font-size: 24px; text-transform: none; }
.lightbox { background: #00181bf7; }
.gallery-dialog h2 { font-size: 62px; line-height: 1.03; }
.gallery-item span { color: var(--ink); }
.credits-dialog h2 { font-size: 60px; line-height: 1.04; }
.film-dialog { background: var(--deep-ink); }
.film-dialog h2 { font-size: 46px; line-height: 1.05; padding: 0 30px; }
.film-dialog video { width: 100%; height: auto; max-height: 65svh; aspect-ratio: 16/9; object-fit: contain; }

@media (min-width: 1600px) {
  .entry h1 { font-size: 165px; }
}
@media (max-width: 800px) {
  .entry h1 { font-size: clamp(54px, 16.2vw, 110px); line-height: .95; }
  .entry-content { padding-left: 16px; padding-right: 16px; }
  .entry-sub { max-width: 77vw; margin-left: auto; margin-right: auto; }
  .arrival-title h2 { font-size: 15.5vw; line-height: 1; }
  .arrival-memory .handwritten { font-size: 13.5vw; }
  .people-title { left: 8%; width: 84%; top: 32%; }
  .people-title h2 { font-size: 18vw; line-height: 1; }
  .people-caption { font-size: 8vw; }
  .play-heading h2 { font-size: 8.8vw; line-height: 1.08; }
  .play-marquee { font-size: 36vw; }
  .lake-title h2 { font-size: 15vw; line-height: 1; }
  .lake-note { font-size: 10vw; }
  .night-title h2 { font-size: 16.5vw; line-height: .98; }
  .night-panorama span { font-size: 9vw; }
  .between-title h2 { font-size: 12vw; line-height: 1.03; }
  .between-note { font-size: 8vw; }
  .ending-content h2 { font-size: 18vw; line-height: 1; }
  .journey-menu h2 { font-size: 44px; }
  .journey-menu nav strong { font-size: 21px; }
  .gallery-dialog h2 { font-size: clamp(31px, 8.8vw, 48px); }
  .credits-dialog h2 { font-size: 46px; }
  .film-dialog h2 { font-size: 32px; padding: 0 35px; }
  .film-dialog video { height: auto; max-height: 60svh; }
  body.reduce-motion .people-title h2 { font-size: 13vw; }
  body.reduce-motion .lake-title h2, body.reduce-motion .night-title h2 { font-size: 13vw; }
}
@media (max-width: 380px) {
  .entry h1 { font-size: 16.2vw; }
}
@media (max-height: 680px) and (min-width: 801px) {
  .entry h1 { font-size: 100px; }
  .ending-content h2 { font-size: 82px; }
}
@media (max-height: 620px) {
  .entry h1 { font-size: min(16.2vw, 92px); }
  .ending-content h2 { font-size: min(17vw, 80px); }
}
@media (max-height: 500px) and (min-width: 600px) {
  .entry h1 { font-size: 58px; }
}