/* Paper Place: the park, recorded from the app, with type floating over it.
   House rule (owner): type and icons FLOAT. No plate, card, band or glow behind them; legibility comes
   from the ink colour and a soft, low-opacity shadow hugging the glyphs. A thin outline is allowed. */

:root {
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --night: #14161c;
  --ink: #fffdf6;
  --shade: 0 1px 2px rgba(8, 10, 18, 0.55), 0 2px 16px rgba(8, 10, 18, 0.32);
  --pad: max(20px, env(safe-area-inset-left));
  --pad-r: max(20px, env(safe-area-inset-right));
}
/* Dark ink for the bright looks; the shadow turns light so it still only hugs the glyphs. */
:root[data-ink="dark"] {
  --ink: #1d1a15;
  --shade: 0 1px 1px rgba(255, 252, 240, 0.55), 0 2px 16px rgba(255, 252, 240, 0.4);
}
/* Phones: the tree's crown leans in behind the type (blossom in spring rain, leaves in autumn), so the
   shadow is a little firmer. It still only hugs the glyphs. */
:root[data-orient="tall"] {
  --shade: 0 1px 2px rgba(8, 10, 18, 0.75), 0 1px 7px rgba(8, 10, 18, 0.45), 0 2px 18px rgba(8, 10, 18, 0.3);
}
:root[data-orient="tall"][data-ink="dark"] {
  --shade: 0 1px 1px rgba(255, 252, 240, 0.75), 0 1px 7px rgba(255, 252, 240, 0.5), 0 2px 18px rgba(255, 252, 240, 0.35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--night); color-scheme: dark; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  text-shadow: var(--shade);
  background: transparent;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: color 1.2s ease;
}
a { color: inherit; }
.xu {
  text-decoration: underline;
  text-decoration-thickness: 0.085em;
  text-underline-offset: 0.14em;
  text-decoration-skip-ink: none;
}
.skip {
  position: absolute; left: var(--pad); top: -60px; z-index: 20;
  padding: 8px 4px; text-decoration: underline;
}
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 6px; }

/* ── The scene: two stacked layers so one look can fade over the other. ── */
.scene {
  position: fixed; left: 0; top: 0; width: 100%;
  height: 100vh; height: 100lvh;
  z-index: 0; overflow: hidden; background: var(--night);
  pointer-events: none;
}
.scene .layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.scene .layer.front { opacity: 1; }
.scene img, .scene video, .scene .fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focus, 50% 50%);
}
.scene video { opacity: 0; transition: opacity 0.8s ease; }
.scene video.on { opacity: 1; }
.scene img:not([src]) { visibility: hidden; }
/* A very slow pan of the WHOLE frame, the way the app's own idle pan moves the park. Never layered. */
@media (prefers-reduced-motion: no-preference) and (min-aspect-ratio: 1/1) {
  .scene .layer { animation: drift 80s ease-in-out infinite alternate; }
}
@keyframes drift {
  from { transform: scale(1.06) translate3d(-1.6%, 0, 0); }
  to   { transform: scale(1.06) translate3d(1.6%, 0, 0); }
}

/* ── Top: the name and the sound switch, both floating. ── */
.top {
  position: fixed; z-index: 10; left: 0; right: 0; top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) var(--pad-r) 0 var(--pad);
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.mark {
  font-family: var(--serif); font-size: 19px; letter-spacing: 0.01em; text-decoration: none;
  opacity: 0; transition: opacity 0.6s ease;
}
.scrolled .mark { opacity: 1; }
.sound {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 2px;
  background: none; border: 0; color: inherit; font: 500 14px/1 var(--sans); letter-spacing: 0.02em;
  text-shadow: inherit; cursor: pointer;
}
.sound svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(8, 10, 18, 0.45)); }
:root[data-ink="dark"] .sound svg { filter: drop-shadow(0 1px 1px rgba(255, 252, 240, 0.6)); }
/* site.js reads the poster under each corner control and sets one of these, over the page's ink. */
.top .on-light { color: #1d1a15; text-shadow: 0 1px 1px rgba(255, 252, 240, 0.55), 0 2px 12px rgba(255, 252, 240, 0.4); }
.top .on-light svg { filter: drop-shadow(0 1px 1px rgba(255, 252, 240, 0.6)); }
.top .on-dark { color: #fffdf6; text-shadow: 0 1px 2px rgba(8, 10, 18, 0.55), 0 2px 16px rgba(8, 10, 18, 0.32); }
.top .on-dark svg { filter: drop-shadow(0 1px 2px rgba(8, 10, 18, 0.45)); }
.sound .spk { fill: currentColor; stroke: none; }
.sound .on { display: none; }
.sound[aria-pressed="true"] .on { display: inline; }
.sound[aria-pressed="true"] .off { display: none; }

/* ── The page. ── */
main { position: relative; z-index: 1; }
/* Every look keeps its sky clear and puts the bench, the sitter and the pond low, so the type lives in
   the sky: the top of each section, which scroll snapping brings to rest at the top of the screen.
   The park's tree leans in from the LEFT of the landscape cut and from the RIGHT of the phone's portrait
   one, so the type sits on the other side: right on wide screens, left on phones. */
html { scroll-snap-type: y proximity; }
section {
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: flex-start; text-align: left;
  min-height: 100vh; min-height: 100svh;
  padding: clamp(76px, 10vh, 140px) var(--pad-r) 10vh var(--pad);
  max-width: 1440px; margin: 0 auto;
  scroll-snap-align: start;
}
:root[data-orient="wide"] section { align-items: flex-end; text-align: right; }
.hero { padding-top: clamp(70px, 9vh, 120px); padding-bottom: calc(9vh + 44px); }
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 24px; }
:root[data-orient="wide"] .cta { align-items: flex-end; }
/* On a wide screen the first screen's button rests on the lawn at the bottom, centred: the sky's brightest
   band (the sun, the dawn glow) sits right where a button under the line would land. On a phone the bench
   and its sitter fill the bottom middle, so there the button stays under the line. */
:root[data-orient="wide"] .hero .cta { margin-top: auto; align-self: center; align-items: center; text-align: center; }
.hero { position: relative; }
h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(52px, 7.4vw, 104px); line-height: 0.95; letter-spacing: -0.015em;
}
h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(34px, 6vw, 64px); line-height: 1.02; letter-spacing: -0.01em;
}
.line { margin-top: 14px; max-width: 24ch; font-size: clamp(19px, 2vw, 24px); line-height: 1.35; }
.theme p { margin-top: 14px; max-width: 34ch; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; }
.store {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border: 1.5px solid currentColor; border-radius: 999px;
  font: 600 16px/1 var(--sans); letter-spacing: 0.02em; text-decoration: none;
  box-shadow: 0 1px 2px rgba(8, 10, 18, 0.35);
  transition: border-width 0.2s ease, transform 0.2s ease;
}
:root[data-ink="dark"] .store { box-shadow: 0 1px 1px rgba(255, 252, 240, 0.5); }
.store:hover { border-width: 2.5px; }
.store:active { transform: scale(0.98); }
.devices { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.down { position: absolute; left: 50%; bottom: 3vh; width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center; }
.down svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(8, 10, 18, 0.45)); }
@media (prefers-reduced-motion: no-preference) {
  .down svg { animation: nudge 2.6s ease-in-out infinite; }
}
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.end { min-height: 86vh; min-height: 86svh; }

.foot {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  padding: 0 var(--pad-r) max(28px, env(safe-area-inset-bottom)) var(--pad);
  font-size: 14px; line-height: 1.5;
}
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 8px; }
.foot nav a { display: inline-block; padding: 10px 0; text-decoration: underline; text-underline-offset: 3px; }
.foot p { opacity: 0.85; }

@media (min-width: 900px) {
  section { padding-left: max(5vw, var(--pad)); padding-right: max(5vw, var(--pad-r)); }
  .foot { padding-left: max(6vw, var(--pad)); padding-right: max(6vw, var(--pad-r)); }
  .top { padding-left: max(28px, var(--pad)); padding-right: max(28px, var(--pad-r)); }
}

/* ── The paper pages: Privacy, Terms, Support. Long reading wants paper, not a moving park. ── */
.paper {
  --ink: #1d1a15; --soft: #5a554b;
  background: #f6f2e8; color: var(--ink); text-shadow: none; color-scheme: light;
}
html:has(.paper) { background: #f6f2e8; color-scheme: light; }
.paper .bar {
  max-width: 760px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: max(18px, env(safe-area-inset-top)) var(--pad-r) 0 var(--pad);
}
.paper .bar .mark { opacity: 1; font-size: 22px; }
.paper .bar nav { display: flex; gap: 18px; font-size: 15px; }
.paper .bar nav a { padding: 10px 0; text-decoration: none; color: var(--soft); }
.paper .bar nav a:hover, .paper .bar nav a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose { max-width: 760px; margin: 0 auto; padding: 40px var(--pad-r) 40px var(--pad); font-size: 17px; line-height: 1.65; overflow-wrap: anywhere; }
.prose h1 { font-size: clamp(38px, 7vw, 56px); line-height: 1.05; margin-bottom: 18px; }
.prose h2 { font-size: 24px; line-height: 1.25; margin: 38px 0 10px; }
.prose p, .prose ul { margin: 0 0 14px; }
.prose ul { padding-left: 1.3em; }
.prose li { margin: 0 0 8px; }
.prose a { text-underline-offset: 3px; }
.prose .lede { font-size: 19px; color: var(--ink); }
.prose .updated { color: var(--soft); font-size: 15px; }
.prose .note { color: var(--soft); font-size: 15px; border-left: 2px solid #d8d0bd; padding-left: 14px; }
.prose details { border-top: 1px solid #ddd5c3; padding: 12px 0; }
.prose details:last-of-type { border-bottom: 1px solid #ddd5c3; }
.prose summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.prose details p { margin-top: 8px; }
.paper .foot { max-width: 760px; color: var(--soft); padding-top: 20px; border-top: 1px solid #ddd5c3; margin-top: 20px; }
.paper .foot nav a { color: var(--ink); }