/* ==========================================================================
   BASE: reset + global rules
   Ground rules only. Layout and component-specific styling live elsewhere.
   ========================================================================== */

   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

   html { scroll-behavior: smooth; }
   @media (prefers-reduced-motion: reduce) {
     html { scroll-behavior: auto; }
   }
   
   body {
     background: var(--bg);
     color: var(--navy);
     font-family: var(--font-mono);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     overflow-x: hidden;
   }
   
   img, video, canvas { display: block; max-width: 100%; }
   
   h1, h2, h3 { font-weight: 700; line-height: 1.15; letter-spacing: 0.02em; }
   
   p { max-width: 60ch; }
   
   a { color: inherit; }
   
   button {
     font-family: inherit;
     cursor: pointer;
   }
   
   /* Visible, deliberate focus states, not a browser default outline removed
      for looks, then never replaced. Orange matches the game's own "this is
      the active/yours" color (the player), so it's not an arbitrary choice. */
   :focus-visible {
     outline: 3px solid var(--orange);
     outline-offset: 3px;
   }
   
   .visually-hidden {
     position: absolute;
     width: 1px; height: 1px;
     overflow: hidden;
     clip: rect(0 0 0 0);
     white-space: nowrap;
   }
   
   /* Scroll reveal: paired with scroll-story.js. One consistent motion reused
      everywhere: content settles in rather than appearing all at once. */
   [data-reveal] {
     opacity: 0;
     transform: translateY(18px);
     transition: opacity var(--duration-fade) ease, transform var(--duration-fade) ease;
   }
   [data-reveal].is-visible {
     opacity: 1;
     transform: translateY(0);
   }
   @media (prefers-reduced-motion: reduce) {
     [data-reveal] { opacity: 1; transform: none; transition: none; }
   }
   
   /* Utility: content sits within the shared measure, sections control their
      own vertical rhythm. */
   .container {
     width: 100%;
     max-width: var(--max-width);
     margin-inline: auto;
     padding-inline: var(--space-3);
   }
   
   @media (min-width: 768px) {
     .container { padding-inline: var(--space-4); }
   }