/* ── Timeless type family (timeless.co), variable WOFF2s as shipped.
   Licensed under the Timeless Free Font License 1.2: see licenses/ in the repo. ── */

@font-face {
  font-family: 'Timeless Sans';
  src: url('/fonts/TimelessSansVF.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Timeless Serif';
  src: url('/fonts/TimelessSerifVF.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  /* block, not swap: the preloaded hero face would otherwise flash in a fallback
     serif and jump in width as it loads */
  font-display: block;
}

/* ── Paper Mono, variable WOFF2 as shipped. SIL Open Font License: licenses/PaperMono-OFL.txt ── */

@font-face {
  font-family: 'Paper Mono';
  src: url('/fonts/PaperMono-VF.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* Both variable fonts have a STYL axis that picks a cut:
   Timeless Sans  0 = Grotesk, 100 = Sans
   Timeless Serif 0 = Serif (display), 100 = Text
   font-variation-settings inherits, so anything using another cut sets its own. */
:root {
  font-family: var(--font-sans);
  font-variation-settings: 'STYL' 100;
  line-height: 1.5;
  color: var(--fg);
}

* {
  box-sizing: border-box;
}

/* The page color goes on html too: iOS 26 Safari uses the root background as the
   fallback color behind its translucent toolbars, and falls back to plain white or
   black when html has none. */
html,
body {
  background: var(--bg);
}

body {
  margin: 0;
}

/* Selected text is lit in the accent, like a Braun indicator. */
::selection {
  background: var(--accent);
  color: var(--on-accent);
}

/* Visitors who ask for less motion get a still page: entrances, marquees and hover
   transitions finish instantly. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 600px) {
  html {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
  }

  body {
    min-height: 100%;
    min-height: 100dvh;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ── App shell ── */

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

@media (max-width: 600px) {
  .app {
    min-height: 100%;
    height: 100%;
    overflow: hidden;
    flex: 1;
  }
}

/* ── iPhone Safari (iOS 26 Liquid Glass) ──
   Safari decides what shows behind its translucent bottom toolbar itself. With the
   document locked (overflow: hidden at 100dvh) it paints a solid bar, and it shows real
   page pixels there only when the page is scrolled (not at scrollY 0) and content
   extends below the visible area. So on iPhones: the document is unlocked, the app
   starts --ios-runway down and main.js scrolls to it on load (they cancel out
   visually), and the light band bleeds --ios-bleed below the viewport (player.css).
   -webkit-touch-callout is only supported by iOS Safari, which scopes all of this to it;
   other phones keep the locked layout above. Needs checking on a real device. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 600px) {
    :root {
      --ios-runway: 48px;
      --ios-bleed: 140px;
    }

    html,
    body {
      height: auto;
      overflow: visible;
    }

    html {
      overscroll-behavior: none;
    }

    body {
      min-height: calc(100dvh + var(--ios-runway));
    }

    .app {
      height: auto;
      overflow: visible;
      margin-top: var(--ios-runway);
    }

    /* .app > .header beats the phone .header rules in header.css. */
    .app > .header {
      height: auto;
      max-height: none;
      min-height: 100dvh;
      overflow-x: clip;
      overflow-y: visible;
    }
  }
}