/* ========================================================================
   Logiator — Apple HIG-aligned design tokens
   - Semantic color names (label/separator/system-background)
   - Exact iOS/macOS hex values
   - Layered background system (light: white→F2F2F7; dark: 000→1C1C1E→2C2C2E→3A3A3C)
   - 8pt spacing grid
   - SF Pro Display/Text via system stack
   - WCAG AA contrast, focus-visible, dynamic type, reduced motion respected
   ======================================================================== */

:root,
:root[data-theme="light"] {
  /* ---------- Backgrounds (layered) ---------- */
  --system-background:            #ffffff;
  --secondary-system-background:  #f2f2f7;
  --tertiary-system-background:   #ffffff;
  --system-grouped-background:           #f2f2f7;
  --secondary-system-grouped-background: #ffffff;
  --tertiary-system-grouped-background:  #f2f2f7;

  /* ---------- Labels (text on backgrounds) ---------- */
  /* Apple uses rgba with #3C3C43 base so they blend on tinted surfaces */
  --label:            rgba(0, 0, 0, 1);
  --secondary-label:  rgba(60, 60, 67, 0.60);
  --tertiary-label:   rgba(60, 60, 67, 0.30);
  --quaternary-label: rgba(60, 60, 67, 0.18);
  --placeholder-text: rgba(60, 60, 67, 0.30);

  /* ---------- Fills (translucent grays for buttons/highlights) ---------- */
  --fill:              rgba(120, 120, 128, 0.20);
  --secondary-fill:    rgba(120, 120, 128, 0.16);
  --tertiary-fill:     rgba(118, 118, 128, 0.12);
  --quaternary-fill:   rgba(116, 116, 128, 0.08);

  /* ---------- Separators ---------- */
  --separator:         rgba(60, 60, 67, 0.29);  /* hairlines */
  --opaque-separator:  #c6c6c8;

  /* ---------- System colors (light variants) ---------- */
  --system-blue:    #007aff;
  --system-green:   #34c759;
  --system-indigo:  #5856d6;
  --system-orange:  #ff9500;
  --system-pink:    #ff2d55;
  --system-purple:  #af52de;
  --system-red:     #ff3b30;
  --system-teal:    #30b0c7;
  --system-yellow:  #ffcc00;
  --system-brown:   #a2845e;
  --system-mint:    #00c7be;
  --system-cyan:    #32ade6;

  /* Subtle tinted variants (8% bg fills behind icons) */
  --system-blue-soft:    rgba(0, 122, 255, 0.10);
  --system-green-soft:   rgba(52, 199, 89, 0.12);
  --system-orange-soft:  rgba(255, 149, 0, 0.12);
  --system-purple-soft:  rgba(175, 82, 222, 0.12);
  --system-red-soft:     rgba(255, 59, 48, 0.10);

  /* ---------- Brand atmosphere: flowing, all-color identity ---------- */
  --brand-flow-gradient:
    linear-gradient(
      100deg,
      rgba(0, 122, 255, 0) 0%,
      rgba(0, 122, 255, 0.52) 13%,
      rgba(48, 176, 199, 0.46) 26%,
      rgba(52, 199, 89, 0.42) 39%,
      rgba(255, 204, 0, 0.38) 52%,
      rgba(255, 149, 0, 0.42) 65%,
      rgba(255, 45, 85, 0.46) 78%,
      rgba(175, 82, 222, 0.50) 91%,
      rgba(175, 82, 222, 0) 100%
    );
  --brand-flow-opacity: 0.42;
  --brand-flow-blur: 30px;

  /* ---------- Link ---------- */
  --link: var(--system-blue);

  /* ---------- App-specific tokens ---------- */
  --accent: var(--system-blue);
  --film:        #c97f00;             /* amber, light-mode safe */
  --film-soft:   rgba(201, 127, 0, 0.12);
  --game:        #006e3a;             /* deep emerald */
  --game-soft:   rgba(0, 110, 58, 0.12);
  --music:       #6e22d9;             /* violet */
  --music-soft:  rgba(110, 34, 217, 0.12);

  /* Page chrome — overlay glass on top of system background */
  --bg:                var(--secondary-system-background);
  --surface:           var(--secondary-system-grouped-background);
  --surface-2:         var(--secondary-system-background);
  --surface-3:         #e5e5ea;

  /* Borders (legacy alias) */
  --border:        var(--separator);
  --border-soft:   rgba(60, 60, 67, 0.18);
  --border-strong: var(--opaque-separator);

  /* Text aliases (legacy) */
  --text:           var(--label);
  --text-secondary: var(--secondary-label);
  --text-muted:     var(--tertiary-label);

  /* Materials (glass) */
  --material-thin:      rgba(255, 255, 255, 0.72);
  --material-regular:   rgba(255, 255, 255, 0.82);
  --material-thick:     rgba(255, 255, 255, 0.92);
  --glass:              var(--material-regular);

  /* Shadows — Apple uses very soft drop shadows */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg:  0 18px 50px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-xl:  0 40px 100px rgba(0, 0, 0, 0.18);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --system-background:            #000000;
  --secondary-system-background:  #1c1c1e;
  --tertiary-system-background:   #2c2c2e;
  --system-grouped-background:           #000000;
  --secondary-system-grouped-background: #1c1c1e;
  --tertiary-system-grouped-background:  #2c2c2e;

  --label:            #ffffff;
  --secondary-label:  rgba(235, 235, 245, 0.60);
  --tertiary-label:   rgba(235, 235, 245, 0.30);
  --quaternary-label: rgba(235, 235, 245, 0.18);
  --placeholder-text: rgba(235, 235, 245, 0.30);

  --fill:              rgba(120, 120, 128, 0.36);
  --secondary-fill:    rgba(120, 120, 128, 0.32);
  --tertiary-fill:     rgba(118, 118, 128, 0.24);
  --quaternary-fill:   rgba(118, 118, 128, 0.18);

  --separator:         rgba(84, 84, 88, 0.60);
  --opaque-separator:  #38383a;

  --system-blue:    #0a84ff;
  --system-green:   #30d158;
  --system-indigo:  #5e5ce6;
  --system-orange:  #ff9f0a;
  --system-pink:    #ff375f;
  --system-purple:  #bf5af2;
  --system-red:     #ff453a;
  --system-teal:    #40c8e0;
  --system-yellow:  #ffd60a;
  --system-brown:   #ac8e68;
  --system-mint:    #66d4cf;
  --system-cyan:    #64d2ff;

  --system-blue-soft:    rgba(10, 132, 255, 0.16);
  --system-green-soft:   rgba(48, 209, 88, 0.18);
  --system-orange-soft:  rgba(255, 159, 10, 0.18);
  --system-purple-soft:  rgba(191, 90, 242, 0.18);
  --system-red-soft:     rgba(255, 69, 58, 0.18);

  --brand-flow-gradient:
    linear-gradient(
      100deg,
      rgba(10, 132, 255, 0) 0%,
      rgba(10, 132, 255, 0.68) 13%,
      rgba(64, 200, 224, 0.58) 26%,
      rgba(48, 209, 88, 0.50) 39%,
      rgba(255, 214, 10, 0.46) 52%,
      rgba(255, 159, 10, 0.52) 65%,
      rgba(255, 55, 95, 0.58) 78%,
      rgba(191, 90, 242, 0.66) 91%,
      rgba(191, 90, 242, 0) 100%
    );
  --brand-flow-opacity: 0.58;
  --brand-flow-blur: 34px;

  --film:        #ffb648;
  --film-soft:   rgba(255, 182, 72, 0.16);
  --game:        #30d158;
  --game-soft:   rgba(48, 209, 88, 0.16);
  --music:       #bf5af2;
  --music-soft:  rgba(191, 90, 242, 0.16);

  --bg:                var(--system-background);
  --surface:           var(--secondary-system-background);
  --surface-2:         var(--tertiary-system-background);
  --surface-3:         #3a3a3c;

  --border:        var(--separator);
  --border-soft:   rgba(84, 84, 88, 0.36);
  --border-strong: var(--opaque-separator);

  --text:           var(--label);
  --text-secondary: var(--secondary-label);
  --text-muted:     var(--tertiary-label);

  --material-thin:    rgba(28, 28, 30, 0.66);
  --material-regular: rgba(28, 28, 30, 0.78);
  --material-thick:   rgba(28, 28, 30, 0.92);
  --glass:            var(--material-regular);

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:  0 4px 18px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-lg:  0 24px 60px rgba(0, 0, 0, 0.65), 0 6px 14px rgba(0, 0, 0, 0.35);
  --shadow-xl:  0 48px 120px rgba(0, 0, 0, 0.75);

  color-scheme: dark;
}

/* Auto-follow system if user hasn't chosen */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --system-background:            #000000;
    --secondary-system-background:  #1c1c1e;
    --tertiary-system-background:   #2c2c2e;
    --system-grouped-background:           #000000;
    --secondary-system-grouped-background: #1c1c1e;
    --tertiary-system-grouped-background:  #2c2c2e;

    --label:            #ffffff;
    --secondary-label:  rgba(235, 235, 245, 0.60);
    --tertiary-label:   rgba(235, 235, 245, 0.30);
    --quaternary-label: rgba(235, 235, 245, 0.18);

    --fill:           rgba(120, 120, 128, 0.36);
    --secondary-fill: rgba(120, 120, 128, 0.32);
    --tertiary-fill:  rgba(118, 118, 128, 0.24);

    --separator:        rgba(84, 84, 88, 0.60);
    --opaque-separator: #38383a;

    --system-blue: #0a84ff;
    --bg:        var(--system-background);
    --surface:   var(--secondary-system-background);
    --surface-2: var(--tertiary-system-background);
    --surface-3: #3a3a3c;
    --border: var(--separator);
    --border-soft: rgba(84, 84, 88, 0.36);
    --border-strong: var(--opaque-separator);
    --text: var(--label);
    --text-secondary: var(--secondary-label);
    --text-muted: var(--tertiary-label);

    --film: #ffb648; --film-soft: rgba(255, 182, 72, 0.16);
    --game: #30d158; --game-soft: rgba(48, 209, 88, 0.16);
    --music: #bf5af2; --music-soft: rgba(191, 90, 242, 0.16);

    --brand-flow-gradient:
      linear-gradient(
        100deg,
        rgba(10, 132, 255, 0) 0%,
        rgba(10, 132, 255, 0.68) 13%,
        rgba(64, 200, 224, 0.58) 26%,
        rgba(48, 209, 88, 0.50) 39%,
        rgba(255, 214, 10, 0.46) 52%,
        rgba(255, 159, 10, 0.52) 65%,
        rgba(255, 55, 95, 0.58) 78%,
        rgba(191, 90, 242, 0.66) 91%,
        rgba(191, 90, 242, 0) 100%
      );
    --brand-flow-opacity: 0.58;
    --brand-flow-blur: 34px;

    --material-thin:    rgba(28, 28, 30, 0.66);
    --material-regular: rgba(28, 28, 30, 0.78);
    --material-thick:   rgba(28, 28, 30, 0.92);
    --glass: var(--material-regular);

    color-scheme: dark;
  }
}

/* High-contrast preference — strengthen borders, deepen text */
@media (prefers-contrast: more) {
  :root {
    --separator:       rgba(60, 60, 67, 0.6);
    --opaque-separator: #8e8e93;
    --secondary-label: rgba(60, 60, 67, 0.85);
  }
  :root[data-theme="dark"] {
    --separator: rgba(235, 235, 245, 0.5);
    --opaque-separator: #aeaeb2;
    --secondary-label: rgba(235, 235, 245, 0.85);
  }
}

/* ========================================================================
   Per-category cover aspect ratio system.
   Any element with [data-category="X"] propagates --card-aspect to its
   descendants, so a single CSS variable governs poster proportions.
   ======================================================================== */
[data-category="film"]  { --card-aspect: 2 / 3; }   /* movie poster */
[data-category="game"]  { --card-aspect: 3 / 4; }   /* IGDB box art */
[data-category="music"] { --card-aspect: 1 / 1; }   /* album cover */

:root {
  /* ---------- Type system (Apple) ----------
     Sizes are in rem assuming 16px root. Apple uses pt; web ≈ px = pt.
     Numbers below match HIG semantic styles. */
  --t-large-title:   2.125rem;  /* 34px */
  --t-title-1:       1.75rem;   /* 28px */
  --t-title-2:       1.375rem;  /* 22px */
  --t-title-3:       1.25rem;   /* 20px */
  --t-headline:      1.0625rem; /* 17px, semibold */
  --t-body:          1.0625rem; /* 17px */
  --t-callout:       1rem;      /* 16px */
  --t-subheadline:   0.9375rem; /* 15px */
  --t-footnote:      0.8125rem; /* 13px */
  --t-caption-1:     0.75rem;   /* 12px */
  --t-caption-2:     0.6875rem; /* 11px */

  /* Line heights */
  --lh-large-title:  1.21;
  --lh-title-1:      1.21;
  --lh-title-2:      1.27;
  --lh-title-3:      1.25;
  --lh-headline:     1.29;
  --lh-body:         1.41;  /* longer reading length */
  --lh-callout:      1.31;
  --lh-subheadline:  1.33;
  --lh-footnote:     1.38;
  --lh-caption:      1.33;

  /* Tracking — Apple uses negative tracking on large display */
  --tr-display: -0.022em;
  --tr-large:   -0.025em;
  --tr-headline: -0.01em;
  --tr-body:     -0.005em;

  /* Display sizes for hero/landing (beyond standard scale) */
  --t-d-1:  2.5rem;    /* 40 */
  --t-d-2:  3rem;      /* 48 */
  --t-d-3:  3.75rem;   /* 60 */
  --t-d-4:  5rem;      /* 80 */

  /* Legacy numeric scale aliases for older inline styles (landing etc.) */
  --t-1:  var(--t-caption-2);
  --t-2:  var(--t-footnote);
  --t-3:  var(--t-callout);
  --t-4:  var(--t-body);
  --t-5:  var(--t-title-3);
  --t-6:  var(--t-title-2);
  --t-7:  var(--t-title-1);
  --t-8:  var(--t-d-1);
  --t-9:  var(--t-large-title);
  --t-10: var(--t-d-2);
  --t-11: var(--t-d-3);

  /* Legacy aliases */
  --brand-on: var(--system-background);
  --brand: var(--label);
  --brand-soft: var(--secondary-fill);
  --accent-hover: var(--system-blue);
  --accent-soft: var(--system-blue-soft);
  --success: var(--system-green);
  --warning: var(--system-orange);
  --error:   var(--system-red);

  /* Font stacks */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                  "SF Pro Text", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* ---------- Spacing — strict 8pt grid ---------- */
  --sp-0:  0;
  --sp-1:  4px;   /* half-step for tight icon gaps */
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* Radius — iOS uses these widely */
  --r-xs:    6px;
  --r-sm:    8px;
  --r-md:    10px;   /* iOS standard control */
  --r-lg:    14px;   /* iOS standard card */
  --r-xl:    18px;   /* large card / sheet */
  --r-2xl:   24px;   /* hero card */
  --r-3xl:   36px;
  --r-full:  980px;

  /* Motion */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.5, 1.4, 0.4, 1);
  --t-fast:  150ms;
  --t-base:  250ms;
  --t-slow:  400ms;

  /* Layout */
  --container:       1080px;
  --container-wide:  1320px;
  --container-narrow: 720px;
  --edge-margin-compact: 16px;
  --edge-margin-regular: 20px;
  --header-h: 52px;
  --bottom-nav-h: 60px;
  --side-nav-w: 78px;

  /* Touch target */
  --hit: 44px;
}

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

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html, body {
  background: var(--bg);
  color: var(--label);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  min-height: 100vh;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Brand atmosphere — a single fixed band of colour that bleeds from the very
   top of the viewport (behind the translucent header, so no dark strip remains
   when scrolled) and fades downward. The hues drift slowly left→right.

   Performance: it's ONE element with a horizontal gradient that's twice as
   wide as needed; the animation only translates it (transform), so the blurred
   layer is rasterised once and merely composited as it slides — no per-frame
   repaint. translateX(-50%) lands on an identical frame, so the loop is seamless. */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: clamp(320px, 42vw, 560px);
  pointer-events: none;
  z-index: 0;
  opacity: var(--brand-flow-opacity);
  /* One full rainbow cycle over each 50% half, so translateX(-50%) lands on an
     identical frame — a seamless, endless left→right drift. */
  background: linear-gradient(
    90deg,
    rgba(10, 132, 255, 0.85) 0%,
    rgba(64, 200, 224, 0.70) 8.333%,
    rgba(48, 209, 88, 0.65)  16.667%,
    rgba(255, 214, 10, 0.62) 25%,
    rgba(255, 55, 95, 0.72)  33.333%,
    rgba(191, 90, 242, 0.80) 41.667%,
    rgba(10, 132, 255, 0.85) 50%,
    rgba(64, 200, 224, 0.70) 58.333%,
    rgba(48, 209, 88, 0.65)  66.667%,
    rgba(255, 214, 10, 0.62) 75%,
    rgba(255, 55, 95, 0.72)  83.333%,
    rgba(191, 90, 242, 0.80) 91.667%,
    rgba(10, 132, 255, 0.85) 100%
  );
  filter: blur(var(--brand-flow-blur)) saturate(125%);
  -webkit-filter: blur(var(--brand-flow-blur)) saturate(125%);
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.82) 32%,
    rgba(0, 0, 0, 0.36) 66%,
    rgba(0, 0, 0, 0) 100%
  );
          mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.82) 32%,
    rgba(0, 0, 0, 0.36) 66%,
    rgba(0, 0, 0, 0) 100%
  );
  animation: brand-flow-drift 40s linear infinite;
  will-change: transform;
}

main {
  position: relative;
  z-index: 1;
}

@keyframes brand-flow-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* No more ambient orbs — the flowing band above is the only atmosphere. */
.light-leak,
.light-leak__blob { display: none !important; }

/* When OS dark active and user hasn't chosen, body bg follows */
:root:not([data-theme]) body,
:root[data-theme="light"] body { background: var(--bg); }

img, svg, video { display: block; max-width: 100%; }

a {
  color: var(--link);
  text-decoration: none;
  transition: opacity var(--t-fast) var(--ease-out);
}
a:hover { opacity: 0.7; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: var(--t-body);
  color: inherit;
}

/* ---------- Typography classes ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--label);
}

h1 {
  font-size: var(--t-large-title);
  line-height: var(--lh-large-title);
  letter-spacing: var(--tr-large);
  font-weight: 700;
}
h2 {
  font-size: var(--t-title-1);
  line-height: var(--lh-title-1);
  letter-spacing: var(--tr-large);
}
h3 {
  font-size: var(--t-title-2);
  line-height: var(--lh-title-2);
  letter-spacing: var(--tr-headline);
}
h4 {
  font-size: var(--t-title-3);
  line-height: var(--lh-title-3);
  letter-spacing: var(--tr-headline);
}

p {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--label);
}

.t-large-title { font: 700 var(--t-large-title)/var(--lh-large-title) var(--font-display); letter-spacing: var(--tr-large); }
.t-title-1     { font: 600 var(--t-title-1)/var(--lh-title-1) var(--font-display); letter-spacing: var(--tr-large); }
.t-title-2     { font: 600 var(--t-title-2)/var(--lh-title-2) var(--font-display); letter-spacing: var(--tr-headline); }
.t-title-3     { font: 600 var(--t-title-3)/var(--lh-title-3) var(--font-display); letter-spacing: var(--tr-headline); }
.t-headline    { font: 600 var(--t-headline)/var(--lh-headline) var(--font-text); letter-spacing: var(--tr-headline); }
.t-body        { font: 400 var(--t-body)/var(--lh-body) var(--font-text); }
.t-callout     { font: 400 var(--t-callout)/var(--lh-callout) var(--font-text); }
.t-subheadline { font: 400 var(--t-subheadline)/var(--lh-subheadline) var(--font-text); }
.t-footnote    { font: 400 var(--t-footnote)/var(--lh-footnote) var(--font-text); }
.t-caption     { font: 400 var(--t-caption-1)/var(--lh-caption) var(--font-text); }

::selection {
  background: var(--system-blue-soft);
  color: var(--label);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--tertiary-fill);
  border-radius: var(--r-full);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--fill); }

/* ---------- Focus visible (Apple-style ring) ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--system-blue);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible, button:focus-visible {
  outline-offset: 3px;
}

/* ---------- Skip link (a11y) ---------- */
.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--label);
  color: var(--system-background);
  padding: 10px 16px;
  border-radius: var(--r-md);
  margin: var(--sp-2);
  font-weight: 600;
  transform: translateY(-200%);
  z-index: 1000;
  transition: transform var(--t-fast) var(--ease-out);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--system-blue);
  outline-offset: 2px;
  color: var(--system-background);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--edge-margin-regular);
}
.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--edge-margin-regular);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--edge-margin-regular);
}

.page {
  flex: 1;
  padding: var(--sp-6) 0 var(--sp-9);
}

@media (max-width: 720px) {
  body::before {
    left: -36vw;
    width: 172vw;
    height: 220px;
    filter: blur(28px) saturate(170%);
    -webkit-filter: blur(28px) saturate(170%);
  }

  .container, .container-wide, .container-narrow { padding: 0 var(--edge-margin-compact); }
  .page { padding: var(--sp-5) 0 calc(var(--bottom-nav-h) + var(--sp-7)); }
}

/* ---------- Utilities ---------- */
.hidden { display: none !important; }
.text-muted     { color: var(--tertiary-label); }
.text-secondary { color: var(--secondary-label); }
.text-center    { text-align: center; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.w-full { width: 100%; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
    transform: none;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Soft page-load fade — every navigation feels less harsh ---------- */
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
main { animation: page-fade-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Mobile-friendly tap behaviour (no flashy blue overlay) */
* { -webkit-tap-highlight-color: transparent; }

/* Smooth scroll for in-page anchors */
html { scroll-behavior: smooth; }

/* Universal soft transitions on interactive elements */
a, button, .btn, input, textarea, select {
  transition-property: background-color, color, border-color, box-shadow, transform, opacity;
  transition-duration: var(--t-fast);
  transition-timing-function: var(--ease-out);
}