/* Reset, base typography and page layout. */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, canvas, video { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  [hidden] { display: none !important; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  table { border-collapse: collapse; }
}

@layer base {
  html {
    background: var(--bg);
    color: var(--ink);
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--bar-h) + 3.5rem);
  }
  /* Less motion: when the system asks for it, or when the viewer pauses motion with the button in the bar. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  }
  html[data-motion="off"] { scroll-behavior: auto; }
  html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  body {
    min-height: 100svh;
    font-family: var(--font-ui);
    font-size: var(--t-base);
    line-height: 1.5;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    /* a phone held sideways has a notch: keep the content out of it (the page asks for viewport-fit=cover) */
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  }
  ::selection { background: var(--accent); color: var(--accent-ink); }

  h1, h2, h3, h4 { font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
  p, li { text-wrap: pretty; }
  a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  a:hover { color: #8adcff; }
  strong, b { font-weight: 650; }
  small { font-size: var(--t-sm); }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
  :focus:not(:focus-visible) { outline: none; }

  /* Taps answer at once (no double-tap-to-zoom wait) and flash a soft accent instead of the browser's grey box. */
  a, button, input, label, summary, [tabindex] { touch-action: manipulation; -webkit-tap-highlight-color: rgb(94 200 255 / 0.16); }

  /* The reading voice: explanatory paragraphs */
  .read {
    font-family: var(--font-read);
    font-size: var(--t-read);
    line-height: 1.62;
    max-width: var(--measure);
    color: var(--ink-2);
    font-weight: 400;
  }
  .read strong { color: var(--ink); font-weight: 600; }
  .read + .read { margin-top: 1em; }
  .small { font-size: var(--t-sm); color: var(--ink-3); }

  .sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .skip-link {
    position: fixed; left: var(--space-4); top: -4rem; z-index: 200;
    padding: 0.7rem 1rem; background: var(--accent); color: var(--accent-ink);
    border-radius: var(--r-s); font-weight: 650; text-decoration: none;
  }
  .skip-link:focus { top: var(--space-4); }
}

@layer layout {
  .wrap { width: min(var(--page), 100% - 2 * var(--gutter)); margin-inline: auto; }
  .wrap-narrow { width: min(52rem, 100% - 2 * var(--gutter)); margin-inline: auto; }

  /* ---- top bar ---- */
  .site-bar {
    position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--bar-h);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
    background: var(--bg); /* solid: nothing that scrolls underneath shows through */
    border-bottom: 1px solid var(--line);
    transition: background-color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
  }
  .wordmark {
    font-weight: 750; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--ink);
    text-decoration: none; font-stretch: 92%; white-space: nowrap;
  }
  .bar-tools .btn-quiet { white-space: nowrap; }
  .wordmark:hover { color: var(--ink); }
  .wordmark .i { color: var(--you); }
  .bar-tools { display: flex; align-items: center; gap: var(--space-3); }
  /* the restart button shows its text on a wide screen; on a phone both bar buttons keep only an icon, so the bar fits in 360px */
  #restart svg { display: none; }
  #motion[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }
  @media (max-width: 34rem) {
    #restart, #motion { padding-inline: 0.65rem; }
    #restart svg { display: block; }
    #restart span, #motion span { display: none; }
    .site-bar { gap: var(--space-2); }
    .bar-tools { gap: var(--space-1); }
    .wordmark { font-size: 1.05rem; }
  }
  /* the smallest phones (320px): tighter again */
  @media (max-width: 22.5rem) {
    .site-bar { padding-inline: max(0.75rem, env(safe-area-inset-left, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)); }
    .wordmark { font-size: 0.95rem; }
    #restart, #motion { padding-inline: 0.4rem; min-width: 2.2rem; }
    .bar-tools .seg button { padding-inline: 0.55rem; min-width: 2rem; }
  }

  main { display: block; }
  .scene { position: relative; padding-block: var(--section); }

  .site-foot {
    border-top: 1px solid var(--line);
    padding-block: var(--space-7);
    color: var(--ink-3);
    font-size: var(--t-sm);
  }
  .site-foot .wrap { display: grid; gap: var(--space-4); }
  .site-foot p { max-width: 70ch; }
  .foot-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: baseline; margin-top: var(--space-2); }
  .foot-links span { color: var(--ink-2); font-weight: 600; }
  .foot-links a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.25em; }
  .foot-links a:hover { color: var(--ink); text-decoration-color: currentColor; }
}