:root {
  --paper: #f3efe6; --ink: #1c1915; --soft: #5e584e; --sea: #143f38; --sea-ink: #f4f0e6;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); }
body { font: 18px/1.4 var(--sans); overflow: hidden; }
.home {
  position: fixed; z-index: 3; top: calc(env(safe-area-inset-top) + 18px); left: 22px;
  font-family: var(--serif); font-size: 1.4rem; color: inherit; text-decoration: none;
}
.slides { height: 100%; }
.slide {
  display: none; height: 100%; padding: calc(env(safe-area-inset-top) + 88px) 8vw calc(env(safe-area-inset-bottom) + 80px);
  flex-direction: column; justify-content: flex-end;
}
.slide.on { display: flex; }
.kicker { margin: 0 0 14px; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; font-weight: 600; color: var(--soft); }
h1 { margin: 0; max-width: 16ch; font-family: var(--serif); font-weight: 400; font-size: clamp(2.8rem, 8vw, 6.4rem); line-height: .94; letter-spacing: -.03em; }
.slide p { max-width: 36rem; font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--soft); }
.quote { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.6rem) !important; color: var(--ink) !important; margin: 8px 0; }
.go, .quiet { display: inline-flex; align-items: center; height: 48px; margin-right: 14px; text-decoration: none; }
.go { padding: 0 18px; border-radius: 999px; background: var(--sea); color: var(--sea-ink); font-weight: 600; }
.quiet { color: var(--ink); border-bottom: 1px solid rgba(28, 25, 21, .25); }
.pager { position: fixed; z-index: 3; left: 22px; right: 22px; bottom: calc(env(safe-area-inset-bottom) + 18px); display: flex; gap: 8px; }
.pager button { width: 28px; height: 4px; border: 0; border-radius: 99px; padding: 0; background: rgba(28, 25, 21, .18); }
.pager button.on { background: var(--ink); }
body.on-sea .home { color: var(--sea-ink); }
body.on-sea .pager button { background: rgba(244, 240, 230, .28); }
body.on-sea .pager button.on { background: var(--sea-ink); }
.slide:first-child { background: var(--sea); color: var(--sea-ink); }
.slide:first-child .kicker, .slide:first-child p { color: color-mix(in srgb, var(--sea-ink) 72%, transparent); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }