/* ============================================
   GLOBAL THEME TOKENS
   ============================================ */

/* Base + Gold theme (default) */
:root,
[data-theme="gold"],
[data-theme="dark"] {
  /* background and surfaces */
  --color-bg-base: #0d0d0f;
  --color-bg-elevated: #1a1a1e;
  --color-bg-card: rgba(26, 26, 30, 0.7);
  --color-bg-card-solid: rgba(26, 26, 30, 0.8);
  --color-bg-overlay: rgba(10, 10, 14, 0.98);

  --color-cell-bg: #0d0d0f;
  --color-cell-border: rgba(255, 255, 255, 0.02);

  /* text — contrast targets: primary ≥15:1, secondary ≥10:1, muted ≥8:1, faint ≥7:1 */
  --color-text-primary: #f0ede8;       /* ~16.7:1 on #0d0d0f ✓ */
  --color-text-secondary: #c5c0b5;     /* ~11:1 on #0d0d0f  (was #b8b3a8 ~9.3:1) */
  --color-text-muted: #a8a8a8;         /* ~9.2:1 on #0d0d0f  (was #888888 ~5.5:1) */
  --color-text-faint: #999999;         /* ~7.5:1 on #0d0d0f  (was #858585 ~4.9:1) */

  /* accents */
  --color-accent: #f0d78c;             /* ~13.7:1 on #0d0d0f ✓ */
  --color-on-accent: #0d0d0f;          /* text on a filled accent button — light gold needs dark text */
  --color-accent-dark: #d4a83a;        /* ~9.5:1 on #0d0d0f  (was #b8922e ~6.8:1) */
  --color-accent-glow: rgba(240, 215, 140, 0.15);
  --color-crimson: #ff6b6b;            /* ~7.5:1 on #0d0d0f  (was #ff3d3d ~5.2:1) */

  /* decorative */
  --color-ghost-letter: rgba(255, 255, 255, 0.015);
  --color-ghost-edge: rgba(255, 255, 255, 0.06);
  --color-svg-stroke: rgba(255, 255, 255, 0.04);
  --color-chiseled-letter: #080808;
  --color-chiseled-shadow: rgba(255, 255, 255, 0.06);
  --color-chiseled-deep-shadow: rgba(0, 0, 0, 0.9);

  /* borders */
  --color-border-subtle: rgba(240, 215, 140, 0.08);
  --color-border-medium: rgba(240, 215, 140, 0.15);
  --color-border-strong: rgba(240, 215, 140, 0.3);

  /* misc */
  --color-nav-bg: rgba(13, 13, 15, 0.95);

  /* footer background */
  --color-ink: #050507;

  /* poems: alternating row border (home.css .poem-item:nth-child(even)) */
  --color-poem-border-mirror: rgba(240, 215, 140, 0.55);

  /* ── Legacy aliases ─────────────────────────────────────────────────────
     home.css, books.css, gallery-viewer.css and global.css use these short
     names; they map to the canonical --color-* tokens (defined in BRIDGE) so
     that theme-switching works correctly on every page.                   */
  /* (The legacy short-name aliases that used to live here — --bg-primary,
     --accent, --border, --shadow-color, … — were a DEAD duplicate: always
     overridden by the "BRIDGE" block lower in this file, which applies to
     :root AND every [data-theme] and is later in the cascade. This earlier
     copy also held STALE values. Removed 2026-06-19 (audit CSS-014); the
     aliases now live only in BRIDGE, the single source of truth.) */
}

/* Sapphire theme */
[data-theme="sapphire"] {
  --color-bg-base: #050712;
  --color-bg-elevated: #0e1021;
  --color-bg-card: rgba(14, 16, 33, 0.75);
  --color-bg-card-solid: rgba(14, 16, 33, 0.9);
  --color-bg-overlay: rgba(2, 4, 16, 0.96);

  --color-cell-bg: #050712;
  --color-cell-border: rgba(158, 196, 255, 0.06);

  --color-text-primary: #e6eeff;        /* ~17.5:1 on #050712 ✓ */
  --color-text-secondary: #b8c5e0;     /* ~11:1 on #050712   (was #a8b7d9 ~9.5:1) */
  --color-text-muted: #9aa5c2;         /* ~8:1 on #050712    (was #7a84a3 ~4.8:1) */
  --color-text-faint: #8ea0c0;         /* ~7.5:1 on #050712  (was #7589aa ~5.6:1) */

  --color-accent: #9ec2ff;             /* ~11:1 on #050712   (was #8ab4ff ~9.2:1) */
  --color-on-accent: #050712;          /* light blue accent -> dark text */
  --color-accent-dark: #6a94e0;        /* ~7.5:1 on #050712  (was #5279d8) */
  --color-accent-glow: rgba(158, 194, 255, 0.18);
  --color-crimson: #ff8899;            /* ~8:1 on #050712    (was #ff5c7a ~6.1:1) */

  --color-ghost-letter: rgba(184, 202, 255, 0.02);
  --color-ghost-edge: rgba(184, 202, 255, 0.08);
  --color-svg-stroke: rgba(138, 180, 255, 0.1);
  --color-chiseled-letter: #03040a;
  --color-chiseled-shadow: rgba(164, 196, 255, 0.14);
  --color-chiseled-deep-shadow: rgba(0, 0, 0, 0.88);

  --color-border-subtle: rgba(138, 180, 255, 0.1);
  --color-border-medium: rgba(138, 180, 255, 0.2);
  --color-border-strong: rgba(138, 180, 255, 0.36);

  --color-nav-bg: rgba(5, 7, 18, 0.96);
  --color-ink: #040510;

  --color-poem-border-mirror: rgba(138, 180, 255, 0.55);
}

/* Paper theme — Clean, warm poetic whites, high contrast text, deep red accent */
[data-theme="crimson"] {
  --color-bg-base: #fdfcfb;             /* Pure "Art Paper" white */
  --color-bg-elevated: #f7f3f0;
  --color-bg-card: rgba(255, 255, 255, 0.85);
  --color-bg-card-solid: rgba(255, 255, 255, 0.98);
  --color-bg-overlay: rgba(253, 252, 251, 0.98);

  --color-cell-bg: #fdfcfb;
  --color-cell-border: rgba(0, 0, 0, 0.04);

  --color-text-primary: #121212;        /* ~18.4:1 on #fdfcfb ✓ */
  --color-text-secondary: #2c2c2c;     /* ~13.7:1 on #fdfcfb ✓ */
  --color-text-muted: #454545;         /* ~9.7:1 on #fdfcfb  (was #555555 ~7.3:1) */
  --color-text-faint: #5e5e5e;         /* ~6.8:1 on #fdfcfb  (was #767676 ~4.5:1) */

  --color-accent: #826a1c;             /* ~5.1:1 on #fdfcfb, ~4.7:1 on #f7f3f0 (elevated) — AA */
  --color-on-accent: #ffffff;          /* dark olive accent -> white text */
  --color-accent-dark: #7a6018;        /* ~5.7:1 on #fdfcfb, ~5.3:1 on #f7f3f0 — AA */
  --color-accent-glow: rgba(138, 112, 32, 0.15);
  --color-crimson: #8a2020;            /* ~7.8:1 on #fdfcfb  (was #a02828 ~5.8:1) */

  /* Decorative letters: very subtle warm grey on paper */
  --color-ghost-letter: rgba(0, 0, 0, 0.05);
  --color-ghost-edge: rgba(0, 0, 0, 0.1);
  --color-svg-stroke: rgba(0, 0, 0, 0.08);
  --color-chiseled-letter: #e8e4df;
  --color-chiseled-shadow: rgba(0, 0, 0, 0.08);
  --color-chiseled-deep-shadow: rgba(0, 0, 0, 0.15);

  --color-border-subtle: rgba(0, 0, 0, 0.05);
  --color-border-medium: rgba(0, 0, 0, 0.1);
  --color-border-strong: rgba(0, 0, 0, 0.2);

  --color-nav-bg: rgba(253, 252, 251, 0.95);
  --color-ink: #f7f3f0;

  --color-poem-border-mirror: rgba(160, 40, 40, 0.45);
}

/* Light theme — warm ivory, dark text, gold accents */
[data-theme="light"] {
  --color-bg-base: #faf8f4;
  --color-bg-elevated: #f0ece4;
  --color-bg-card: rgba(255, 255, 255, 0.85);
  --color-bg-card-solid: rgba(255, 255, 255, 0.95);
  --color-bg-overlay: rgba(250, 248, 244, 0.98);

  --color-cell-bg: #faf8f4;
  --color-cell-border: rgba(0, 0, 0, 0.04);

  --color-text-primary: #1a1a1a;        /* ~16.2:1 on #faf8f4 ✓ */
  --color-text-secondary: #3c3732;     /* ~10.5:1 on #faf8f4 (was #4a4540 ~8.3:1) */
  --color-text-muted: #4a4540;         /* ~8.3:1 on #faf8f4  (was #5c5751 ~5.9:1) */
  --color-text-faint: #5c5650;         /* ~6.5:1 on #faf8f4  (was #706a60 ~5.1:1) */

  --color-accent: #6a5210;             /* ~8.5:1 on #faf8f4  (was #8a6b1a ~6.2:1) */
  --color-on-accent: #ffffff;          /* dark brown accent -> white text */
  --color-accent-dark: #5a4408;        /* ~9.5:1 on #faf8f4  (was #6b5010) */
  --color-accent-glow: rgba(106, 82, 16, 0.12);
  --color-crimson: #a02222;            /* ~7.3:1 on #faf8f4  (was #c42b2b ~5.5:1) */

  /* Decorative letters: increased visibility (ghost ~0.08 α); chiseled = slightly darker */
  --color-ghost-letter: rgba(0, 0, 0, 0.08);
  --color-ghost-edge: rgba(0, 0, 0, 0.15);
  --color-svg-stroke: rgba(0, 0, 0, 0.1);
  --color-chiseled-letter: #9c9182;     /* was #b8afa0 */
  --color-chiseled-shadow: rgba(0, 0, 0, 0.16);
  --color-chiseled-deep-shadow: rgba(38, 34, 28, 0.35);

  --color-border-subtle: rgba(184, 146, 46, 0.1);
  --color-border-medium: rgba(184, 146, 46, 0.2);
  --color-border-strong: rgba(184, 146, 46, 0.35);

  --color-nav-bg: rgba(250, 248, 244, 0.95);
  --color-ink: #f0ece4;

  --color-poem-border-mirror: rgba(138, 107, 26, 0.45);
}

/* Mist theme — soft grey-lilac mid-tone, muted palette */
[data-theme="mist"] {
  --color-bg-base: #2a2a32;
  --color-bg-elevated: #35353f;
  --color-bg-card: rgba(53, 53, 63, 0.75);
  --color-bg-card-solid: rgba(53, 53, 63, 0.9);
  --color-bg-overlay: rgba(36, 36, 44, 0.97);

  --color-cell-bg: #2a2a32;
  --color-cell-border: rgba(200, 190, 220, 0.06);

  --color-text-primary: #e8e4ef;        /* ~12.3:1 on #2a2a32 ✓ */
  --color-text-secondary: #c8c3d2;     /* ~10:1 on #2a2a32   (was #b5b0c0 ~7.8:1) */
  --color-text-muted: #b5b0c0;         /* ~7.8:1 on #2a2a32  (was #9e99ac ~4.6:1) */
  --color-text-faint: #aaa5b6;         /* ~6.5:1 on #2a2a32  (was #9a96a8 ~4.9:1) */

  --color-accent: #d0b5ea;             /* ~9:1 on #2a2a32    (was #c0a0e0 ~7.2:1) */
  --color-on-accent: #1a1a20;          /* light lavender accent -> dark text */
  --color-accent-dark: #b890d8;        /* ~5.4:1 on #2a2a32, ~4.6:1 on #35353f (elevated) — AA */
  --color-accent-glow: rgba(208, 181, 234, 0.15);
  --color-crimson: #f08098;            /* ~6.5:1 on #2a2a32  (was #e06080 ~4.8:1) */

  --color-ghost-letter: rgba(200, 190, 220, 0.02);
  --color-ghost-edge: rgba(200, 190, 220, 0.07);
  --color-svg-stroke: rgba(192, 160, 224, 0.08);
  --color-chiseled-letter: #202028;
  --color-chiseled-shadow: rgba(200, 190, 220, 0.12);
  --color-chiseled-deep-shadow: rgba(0, 0, 0, 0.85);

  --color-border-subtle: rgba(192, 160, 224, 0.1);
  --color-border-medium: rgba(192, 160, 224, 0.18);
  --color-border-strong: rgba(192, 160, 224, 0.32);

  --color-nav-bg: rgba(42, 42, 50, 0.96);
  --color-ink: #222228;

  --color-poem-border-mirror: rgba(192, 160, 224, 0.55);
}

/* OKLCH/LCH-enhanced palette when supported (hex/rgba above remain fallbacks) */
@supports (color: oklch(0 0 0)) {
  :root,
  [data-theme="gold"],
  [data-theme="dark"] {
    --color-bg-base: oklch(0.1600 0.0042 285.92);
    --color-bg-elevated: oklch(0.2195 0.0077 285.74);
    --color-bg-card: oklch(0.2195 0.0077 285.74 / 0.7);
    --color-bg-card-solid: oklch(0.2195 0.0077 285.74 / 0.8);
    --color-bg-overlay: oklch(0.1468 0.0086 285.29 / 0.98);
    --color-cell-bg: oklch(0.1600 0.0042 285.92);
    --color-cell-border: oklch(1.0000 0.0000 89.88 / 0.02);
    --color-text-primary: oklch(0.9470 0.0074 80.72);
    --color-text-secondary: oklch(0.8100 0.0130 85.00);  /* #c5c0b5 ~11:1 */
    --color-text-muted: oklch(0.7200 0.0000 89.88);     /* #a8a8a8 ~9.2:1 */
    --color-text-faint: oklch(0.6700 0.0000 89.88);     /* #999999 ~7.5:1 */
    --color-accent: oklch(0.8833 0.0981 91.70);
    --color-accent-dark: oklch(0.7500 0.1100 88.00);    /* #d4a83a ~9.5:1 */
    --color-accent-glow: oklch(0.8833 0.0981 91.70 / 0.15);
    --color-crimson: oklch(0.7000 0.1700 22.00);        /* #ff6b6b ~7.5:1 */
    --color-ghost-letter: oklch(1.0000 0.0000 89.88 / 0.015);
    --color-ghost-edge: oklch(1.0000 0.0000 89.88 / 0.06);
    --color-svg-stroke: oklch(1.0000 0.0000 89.88 / 0.04);
    --color-chiseled-letter: oklch(0.1344 0.0000 89.88);
    --color-chiseled-shadow: oklch(1.0000 0.0000 89.88 / 0.06);
    --color-chiseled-deep-shadow: oklch(0.0000 0.0000 0.00 / 0.9);
    --color-border-subtle: oklch(0.8833 0.0981 91.70 / 0.08);
    --color-border-medium: oklch(0.8833 0.0981 91.70 / 0.15);
    --color-border-strong: oklch(0.8833 0.0981 91.70 / 0.3);
    --color-nav-bg: oklch(0.1600 0.0042 285.92 / 0.95);
    --color-ink: oklch(0.1163 0.0062 285.40);
  }

  [data-theme="sapphire"] {
    --color-bg-base: oklch(0.1327 0.0256 272.30);
    --color-bg-elevated: oklch(0.1809 0.0349 277.21);
    --color-bg-card: oklch(0.1809 0.0349 277.21 / 0.75);
    --color-bg-card-solid: oklch(0.1809 0.0349 277.21 / 0.9);
    --color-bg-overlay: oklch(0.1126 0.0321 268.27 / 0.96);
    --color-cell-bg: oklch(0.1327 0.0256 272.30);
    --color-cell-border: oklch(0.8144 0.0934 259.03 / 0.06);
    --color-text-primary: oklch(0.9481 0.0245 265.59);
    --color-text-secondary: oklch(0.8200 0.0400 265.00);  /* #b8c5e0 ~11:1 */
    --color-text-muted: oklch(0.7100 0.0450 268.00);     /* #9aa5c2 ~8:1 */
    --color-text-faint: oklch(0.6800 0.0430 270.00);     /* #8ea0c0 ~7.5:1 */
    --color-accent: oklch(0.8100 0.1000 260.00);         /* #9ec2ff ~11:1 */
    --color-accent-dark: oklch(0.6600 0.1200 263.00);    /* #6a94e0 ~7.5:1 */
    --color-accent-glow: oklch(0.8100 0.1000 260.00 / 0.18);
    --color-crimson: oklch(0.7500 0.1500 10.00);         /* #ff8899 ~8:1 */
    --color-ghost-letter: oklch(0.8437 0.0770 270.09 / 0.02);
    --color-ghost-edge: oklch(0.8437 0.0770 270.09 / 0.08);
    --color-svg-stroke: oklch(0.7693 0.1175 261.56 / 0.1);
    --color-chiseled-letter: oklch(0.1093 0.0181 272.68);
    --color-chiseled-shadow: oklch(0.8181 0.0907 262.40 / 0.14);
    --color-chiseled-deep-shadow: oklch(0.0000 0.0000 0.00 / 0.88);
    --color-border-subtle: oklch(0.7693 0.1175 261.56 / 0.1);
    --color-border-medium: oklch(0.7693 0.1175 261.56 / 0.2);
    --color-border-strong: oklch(0.7693 0.1175 261.56 / 0.36);
    --color-nav-bg: oklch(0.1327 0.0256 272.30 / 0.96);
    --color-ink: oklch(0.1213 0.0273 275.84);
  }

  [data-theme="crimson"] {
    --color-bg-base: oklch(0.99 0.002 45);
    --color-bg-elevated: oklch(0.965 0.005 45);
    --color-bg-card: oklch(1.0 0.0 0 / 0.85);
    --color-bg-card-solid: oklch(1.0 0.0 0 / 0.98);
    --color-bg-overlay: oklch(0.99 0.002 45 / 0.98);
    --color-cell-bg: oklch(0.99 0.002 45);
    --color-cell-border: oklch(0 0 0 / 0.04);
    --color-text-primary: oklch(0.15 0.01 45);
    --color-text-secondary: oklch(0.28 0.01 45);
    --color-text-muted: oklch(0.37 0.01 45);              /* #454545 ~9.7:1 */
    --color-text-faint: oklch(0.46 0.01 45);              /* #5e5e5e ~6.8:1 */
    --color-accent: oklch(0.52 0.10 85);                  /* #826a1c ~5.1:1 on base, ~4.7:1 on elevated — AA */
    --color-accent-dark: oklch(0.50 0.10 85);             /* #7a6018 ~5.7:1 — AA */
    --color-accent-glow: oklch(0.55 0.10 85 / 0.15);
    --color-crimson: oklch(0.38 0.16 25);                 /* #8a2020 ~7.8:1 */
    --color-ghost-letter: oklch(0 0 0 / 0.05);
    --color-ghost-edge: oklch(0 0 0 / 0.1);
    --color-svg-stroke: oklch(0 0 0 / 0.08);
    --color-chiseled-letter: oklch(0.92 0.01 45);
    --color-chiseled-shadow: oklch(0 0 0 / 0.08);
    --color-chiseled-deep-shadow: oklch(0 0 0 / 0.15);
    --color-border-subtle: oklch(0 0 0 / 0.05);
    --color-border-medium: oklch(0 0 0 / 0.1);
    --color-border-strong: oklch(0 0 0 / 0.2);
    --color-nav-bg: oklch(0.99 0.002 45 / 0.95);
    --color-ink: oklch(0.965 0.005 45);
  }

  [data-theme="light"] {
    --color-bg-base: oklch(0.9796 0.0057 84.57);
    --color-bg-elevated: oklch(0.9440 0.0115 84.58);
    --color-bg-card: oklch(1.0000 0.0000 89.88 / 0.85);
    --color-bg-card-solid: oklch(1.0000 0.0000 89.88 / 0.95);
    --color-bg-overlay: oklch(0.9796 0.0057 84.57 / 0.98);
    --color-cell-bg: oklch(0.9796 0.0057 84.57);
    --color-cell-border: oklch(0.0000 0.0000 0.00 / 0.04);
    --color-text-primary: oklch(0.2178 0.0000 89.88);
    --color-text-secondary: oklch(0.3300 0.0100 67.50);   /* #3c3732 ~10.5:1 */
    --color-text-muted: oklch(0.3900 0.0107 67.51);      /* #4a4540 ~8.3:1 */
    --color-text-faint: oklch(0.4500 0.0100 80.00);      /* #5c5650 ~6.5:1 */
    --color-accent: oklch(0.4500 0.0900 86.00);          /* #6a5210 ~8.5:1 */
    --color-accent-dark: oklch(0.4000 0.0800 84.00);     /* #5a4408 ~9.5:1 */
    --color-accent-glow: oklch(0.4500 0.0900 86.00 / 0.12);
    --color-crimson: oklch(0.4800 0.1700 26.00);         /* #a02222 ~7.3:1 */
    --color-ghost-letter: oklch(0.0000 0.0000 0.00 / 0.08);
    --color-ghost-edge: oklch(0.0000 0.0000 0.00 / 0.15);
    --color-svg-stroke: oklch(0.0000 0.0000 0.00 / 0.1);
    --color-chiseled-letter: oklch(0.65 0.015 80);  /* was 0.75 */
    --color-chiseled-shadow: oklch(0.0000 0.0000 0.00 / 0.16);
    --color-chiseled-deep-shadow: oklch(0.2543 0.0125 78.05 / 0.35);
    --color-border-subtle: oklch(0.6780 0.1222 87.04 / 0.1);
    --color-border-medium: oklch(0.6780 0.1222 87.04 / 0.2);
    --color-border-strong: oklch(0.6780 0.1222 87.04 / 0.35);
    --color-nav-bg: oklch(0.9796 0.0057 84.57 / 0.95);
    --color-ink: oklch(0.9440 0.0115 84.58);
  }

  [data-theme="mist"] {
    --color-bg-base: oklch(0.2883 0.0145 285.46);
    --color-bg-elevated: oklch(0.3330 0.0175 285.41);
    --color-bg-card: oklch(0.3330 0.0175 285.41 / 0.75);
    --color-bg-card-solid: oklch(0.3330 0.0175 285.41 / 0.9);
    --color-bg-overlay: oklch(0.2638 0.0148 285.34 / 0.97);
    --color-cell-bg: oklch(0.2883 0.0145 285.46);
    --color-cell-border: oklch(0.8192 0.0429 300.65 / 0.06);
    --color-text-primary: oklch(0.9252 0.0153 302.55);
    --color-text-secondary: oklch(0.8200 0.0200 300.00);  /* #c8c3d2 ~10:1 */
    --color-text-muted: oklch(0.7663 0.0232 300.08);     /* #b5b0c0 ~7.8:1 */
    --color-text-faint: oklch(0.7300 0.0250 298.00);     /* #aaa5b6 ~6.5:1 */
    --color-accent: oklch(0.8000 0.0800 307.00);         /* #d0b5ea ~9:1 */
    --color-accent-dark: oklch(0.7200 0.0900 305.00);    /* #b890d8 ~5.4:1 on base, ~4.6:1 on elevated — AA */
    --color-accent-glow: oklch(0.8000 0.0800 307.00 / 0.15);
    --color-crimson: oklch(0.7200 0.1200 5.00);          /* #f08098 ~6.5:1 */
    --color-ghost-letter: oklch(0.8192 0.0429 300.65 / 0.02);
    --color-ghost-edge: oklch(0.8192 0.0429 300.65 / 0.07);
    --color-svg-stroke: oklch(0.7566 0.0961 307.04 / 0.08);
    --color-chiseled-letter: oklch(0.2470 0.0151 285.24);
    --color-chiseled-shadow: oklch(0.8192 0.0429 300.65 / 0.12);
    --color-chiseled-deep-shadow: oklch(0.0000 0.0000 0.00 / 0.85);
    --color-border-subtle: oklch(0.7566 0.0961 307.04 / 0.1);
    --color-border-medium: oklch(0.7566 0.0961 307.04 / 0.18);
    --color-border-strong: oklch(0.7566 0.0961 307.04 / 0.32);
    --color-nav-bg: oklch(0.2883 0.0145 285.46 / 0.96);
    --color-ink: oklch(0.2545 0.0112 285.58);
  }
}

/* Stronger decorative contrast when user requests more contrast */
@media (prefers-contrast: more) {
  [data-theme="light"] {
    --color-ghost-letter: rgba(0, 0, 0, 0.09);
    --color-ghost-edge: rgba(0, 0, 0, 0.16);
    --color-chiseled-letter: #8a8175;
    --color-chiseled-shadow: rgba(0, 0, 0, 0.18);
    --color-chiseled-deep-shadow: rgba(28, 24, 18, 0.42);
  }
}

@supports (color: oklch(0 0 0)) {
  @media (prefers-contrast: more) {
    [data-theme="light"] {
      --color-ghost-letter: oklch(0.0000 0.0000 0.00 / 0.09);
      --color-ghost-edge: oklch(0.0000 0.0000 0.00 / 0.16);
      --color-chiseled-letter: oklch(0.6077 0.0208 75.21);
      --color-chiseled-shadow: oklch(0.0000 0.0000 0.00 / 0.18);
      --color-chiseled-deep-shadow: oklch(0.2543 0.0125 78.05 / 0.42);
    }
  }
}

/* Typography, spacing, z-layers, motion shared for all themes */
:root {
  color-scheme: dark light;
  /* fonts */
  --font-serif: 'Playfair Display', "Playfair Display Fallback: Georgia", "Playfair Display Fallback: Times New Roman", "Playfair Display Fallback: Noto Serif", Georgia, "Times New Roman", "Noto Serif", serif;
  --font-body: 'Cormorant Garamond', "Cormorant Garamond Fallback: Georgia", "Cormorant Garamond Fallback: Times New Roman", "Cormorant Garamond Fallback: Noto Serif", Georgia, "Times New Roman", "Noto Serif", serif;
  --font-display: 'Montserrat', "Montserrat Fallback: Arial", "Montserrat Fallback: Roboto", Arial, Roboto, sans-serif;
  --font-heading: var(--font-serif);
  --font-poetry: var(--font-body);
  --font-mono: 'Space Mono', monospace;
  --font-script: 'Dancing Script', cursive;

  /* fluid typography using clamp() — min values kept at whole-pixel multiples
     for crisp rendering; growth rate + max raised for better readability.
     Base 16px html means: 0.875rem=14px, 1rem=16px, 1.25rem=20px, 1.5rem=24px */
  --text-xs: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);       /* 14px → 16px (was 12→13.6) */
  --text-sm: clamp(1rem, 0.92rem + 0.35vw, 1.125rem);       /* 16px → 18px (was 13.6→16) */
  --text-base: clamp(1rem, 0.9rem + 0.55vw, 1.25rem);       /* 16px → 20px (was 16→18.4) */
  --text-md: clamp(1.125rem, 1rem + 0.65vw, 1.375rem);      /* 18px → 22px (was 17.6→20.8) */
  --text-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);      /* 20px → 28px (was 19.2→25.6) */
  --text-xl: clamp(1.5rem, 1.3rem + 1.1vw, 2.25rem);        /* 24px → 36px (was 24→33.6) */
  --text-2xl: clamp(2rem, 1.6rem + 2vw, 3.25rem);           /* 32px → 52px (was 32→48) */

  /* spacing scale (fluid-ish) */
  --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.9rem);
  --space-sm: clamp(0.8rem, 0.6rem + 0.8vw, 1.3rem);
  --space-md: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
  --space-lg: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  --space-xl: clamp(3rem, 2.2rem + 3.5vw, 4.8rem);

  /* transitions */
  --transition-fast: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 1.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Permanent transition gold — used on landing/home tile-reveal waves.
     Never overridden by theme switching. Read via JS: getComputedStyle → --gold-effect */
  --gold-effect: #d4af37;

  /* letter-spacing scale */
  --ls-tight:  0.03em;   /* body text, compact labels (was 0.02em) */
  --ls-normal: 0.05em;   /* general readable text */
  --ls-wide:   0.12em;   /* nav logo, subheadings */
  --ls-wider:  0.18em;   /* nav links, spaced caps */
  --ls-ultra:  0.28em;   /* decorative all-caps display */

  /* border-radius scale */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* z-index layers — full named scale */
  --z-base:    1;       /* in-flow stacking */
  --z-raised:  10;      /* card hovers, local overlays */
  --z-sticky:  100;     /* sticky bars, scroll arrows */
  --z-modal:   1000;    /* dialogs, book modal */
  --z-drawer:  5000;    /* sidebars, off-canvas panels */
  --z-nav:     9999;    /* global navigation */
  --z-overlay: 10000;   /* fullscreen curtains, lens */
  --z-gallery: 10050;   /* gallery fullscreen viewer */
  --z-skip:    100001;  /* skip-to-content (above nav) */
  /* legacy alias kept for existing references */
  --z-content: var(--z-base);

  /* heading size tokens — define once, use everywhere */
  --h1: clamp(2.5rem, 1.8rem + 2.6vw, 4.5rem);
  --h2: clamp(1.75rem, 1.3rem + 1.8vw, 3rem);
  --h3: clamp(1.375rem, 1.1rem + 1vw, 2rem);        /* min raised from 1.25rem (20→22px) */
  --h4: clamp(1.125rem, 1rem + 0.45vw, 1.5rem);     /* min raised from 1.05rem (16.8→18px) */

  /* card padding scale */
  --card-padding-sm: 1rem;
  --card-padding-md: 1.5rem;
  --card-padding-lg: 2rem;

  /* section gap scale */
  --section-gap-sm: var(--space-lg);
  --section-gap-md: var(--space-xl);
  --section-gap-lg: clamp(4rem, 3rem + 4vw, 7rem);

  /* z-index layers (legacy single values kept for back-compat) */
  --z-nav-legacy: 100;

  /* nav bar approximate height — used by sticky sub-bars (reviews filter, etc.)
     Updated at breakpoints below to stay accurate as nav compresses */
  --nav-height: 62px;
}

/* ============================================
   RESET & BASE
   ============================================ */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;  /* fallback for Safari < 16 that doesn't support clip */
  overflow-x: clip;    /* clip: does NOT create a scroll container (hidden would break sticky) */
  touch-action: manipulation;
  max-width: 100%;     /* prevent in-app browsers (Facebook/IG) from over-sizing the layout */
}

/* Vendor-specific properties wrapped in @supports so browsers
   that don't recognise them never parse them (no console warnings) */
@supports (-webkit-text-size-adjust: 100%) {
  html { -webkit-text-size-adjust: 100%; }
}
@supports (-webkit-font-smoothing: antialiased) {
  html { -webkit-font-smoothing: antialiased; }
}
@supports (-moz-osx-font-smoothing: grayscale) {
  html { -moz-osx-font-smoothing: grayscale; }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;                      /* raised from 1.6 — Cormorant Garamond needs more air */
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  padding-top: var(--nav-height, 62px); /* push content below fixed nav */
  max-width: 100%;                      /* prevent in-app browsers (Facebook/IG) from over-sizing */
  overflow-x: clip;                     /* clip, NOT hidden — hidden creates a scroll container and breaks position:sticky */
}

/* Restore normal cursor for interactive elements so clicks feel clear */
a,
button,
[role="button"],
.menu-toggle-button,
.theme-bubble {
  cursor: pointer;
}

/* =============================================
   CONTENT LINK COLOURS — theme-aware
   Nav links are unaffected: .nav-links a and
   .submenu li a have higher specificity and
   their own colour + text-decoration: none.
   ============================================= */
a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border-medium);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:visited {
  color: var(--color-accent-dark);
  text-decoration-color: var(--color-border-subtle);
}

a:hover,
a:focus-visible {
  color: var(--color-text-primary);
  text-decoration-color: var(--color-accent);
}

/* Skip-to-content link — visible only on keyboard focus */
.skip-link {
  position: absolute;
  top: -999px;   /* fixed px beats %-of-unknown-height */
  left: 1rem;
  z-index: 100001;
  background: var(--color-bg-base);
  color: var(--color-accent);
  padding: 0.6rem 1.2rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  border: 1px solid var(--color-accent);
  border-radius: 4px;
}
.skip-link:focus {
  top: 0.5rem;
}

/* Fullscreen background particles — canonical rule, overridden per-page as needed */
.bg-particles {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Dim particles on mobile for better text readability over transparent backgrounds */
@media (max-width: 768px) {
  .bg-particles,
  .about-bg-particles {
    opacity: 0.75;
  }
}

/* ============================================
   LOADING SCREEN — cinematic intro (books + poems only)
   CWV-006: exit is PURE CSS on a fixed timeline — letters 0.1–1.0s,
   gold line to 1.8s, overlay fades itself 1.6→2.2s (overlayAutoHide).
   No window-load gating: content paints & loads beneath from 0ms and
   is revealed at a constant 2.2s worst-case on ANY connection.
   JS keeps only a safety-net (.hidden at DOMContentLoaded+2.6s) for
   ancient browsers without CSS-animation support — it fires after
   the CSS exit has already finished on every modern browser.
   ============================================ */
.loading-screen {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; /* SCROLL-031: was 100vw/100vh — fit the viewport exactly (no scrollbar overhang); longhand, not `inset` shorthand (Safari 14.0) */
  background-color: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  animation: overlayAutoHide 0.6s ease 1.6s forwards;
}
@keyframes overlayAutoHide {
  to { opacity: 0; visibility: hidden; }
}
.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Reduced motion: skip the show — static letters, overlay gone in ~0.5s */
@media (prefers-reduced-motion: reduce) {
  .loading-screen { animation-delay: 0.2s; animation-duration: 0.3s; }
  .loading-letter { animation: none; opacity: 1; transform: none; }
  .loading-line   { animation: none; width: 200px; }
}
.loading-text {
  display: flex;
  gap: 0.25rem;
}
.loading-letter {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 500;
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(20px);
  animation: letterReveal 0.5s ease forwards;
}
.loading-letter:nth-child(1) { animation-delay: 0.1s; }
.loading-letter:nth-child(2) { animation-delay: 0.15s; }
.loading-letter:nth-child(3) { animation-delay: 0.2s; }
.loading-letter:nth-child(4) { animation-delay: 0.25s; }
.loading-letter:nth-child(5) { animation-delay: 0.3s; }
.loading-letter:nth-child(6) { animation-delay: 0.35s; }
.loading-letter:nth-child(7) { animation-delay: 0.4s; }
.loading-letter:nth-child(8) { animation-delay: 0.45s; }
.loading-letter:nth-child(9) { animation-delay: 0.5s; }
@keyframes letterReveal {
  to { opacity: 1; transform: translateY(0); }
}
.loading-line {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin-top: 2rem;
  animation: lineExpand 1s ease 0.8s forwards;
}
@keyframes lineExpand {
  to { width: 200px; }
}

/* Accessibility helpers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    /* A11Y-004: detach scroll()/view() timelines — the time-based resets above do
       NOT stop scroll-driven animations (their progress is mapped from scroll, not
       the clock). Re-binding to the document timeline lets the 0.01ms duration
       collapse them. */
    animation-timeline: auto !important;
  }
  /* A11Y-004: park the home scroll-driven layers in their static resting state and
     keep faded-in content visible. Home-only selectors — inert on every other page. */
  .plane-deep,
  .plane-fore {
    animation: none !important;
  }
  .animate-on-scroll {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================
   GLOBAL PAGE WRAPPER & SECTIONS
   ============================================ */

main {
  position: relative;
  z-index: var(--z-content);
}

/* Generic page inner wrapper used on about & coming soon */
.page-inner {
  max-width: var(--container-max, 1000px);
  margin: 0 auto;
  padding-top: var(--space-xl);
}

/* Mobile: tighter side padding on page-inner */
@media (max-width: 768px) {
  .page-inner {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    padding-top: var(--space-lg);
  }
}

.page-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--color-accent);
  text-align: center;
  margin-bottom: var(--space-md);
}

.page-subtitle {
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
  font-size: var(--text-lg);
}

/* Footer shared styles */
footer {
  background: var(--color-ink);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  border-top: 1px solid var(--color-border-medium);
  /* Above .home-bg-stage (fixed, z-index: 0) on home.html — otherwise footer can paint underneath */
  position: relative;
  z-index: var(--z-content, 1);
}

.footer-content {
  max-width: 600px;
  margin: 0 auto;
}

.footer-logo {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-accent);
  letter-spacing: 0.2em;
  margin-bottom: var(--space-xs);
}

.footer-tagline {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.footer-copyright {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}


/* ============================================
   RESPONSIVE NAVIGATION + THEME SWITCHER
   ============================================ */

.site-nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
}

/* main nav bar — z-index keeps it above the mobile panel overlay */
.site-nav {
  position: relative;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.5rem, 0.6vw, 1rem); /* tighter max: prevents theme bubble overflow at ~1130px */
  padding: clamp(0.6rem, 0.4rem + 0.7vw, 1rem)
           clamp(1.2rem, 1rem + 2vw, 3rem);
  background: linear-gradient(to bottom, var(--color-nav-bg), transparent);
  /* NO backdrop-filter here (SCROLL-003): blur(12px) on a fixed bar repaints a
     viewport-wide strip every scroll frame. Apple + touch UAs already shipped
     without it (see ua-webkit-apple / touch blocks below) — desktop now matches. */
  transform: translateY(0);
  transition: transform var(--transition-slow),
              background var(--transition-fast);
}

/* logo */
.nav-logo {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 0.85rem + 0.45vw, 1.4rem); /* reduced max: prevents two-row wrap at ~1350px */
  color: var(--color-accent);
  letter-spacing: 0.12em; /* slightly tighter to save horizontal space */
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;    /* never allow "Andra Rotaru" to break onto two lines */
  flex-shrink: 0;         /* logo doesn't shrink — links and theme absorb the squeeze */
}

/* landing trigger — small gold icon next to logo */
.nav-landing-trigger {
  display: inline-block;
  margin-left: 0.35em;
  font-size: 0.7em;
  color: var(--gold, #d4af37);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  vertical-align: middle;
}
.site-nav:hover .nav-landing-trigger,
.nav-landing-trigger:focus-visible {
  opacity: 0.5;
}
.nav-landing-trigger:hover {
  opacity: 1;
  transform: scale(1.3) rotate(20deg);
}

/* nav links (desktop) */
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 0.45vw + 0.2rem, 1.4rem); /* tighter max to fit 8 items at mid-range widths */
  list-style: none;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  font-family: var(--font-serif);
  font-size: clamp(0.8rem, 0.7rem + 0.3vw, 1rem);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-primary);
  text-decoration: none;
  position: relative;
  padding: 0.3rem 0.35rem; /* explicit horizontal padding — Safari sometimes collapses flex gap */
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-fast);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-accent);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}


/* Theme switcher bubbles (desktop) */
.theme-switcher {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.theme-switcher-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
}

.theme-bubble {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* always-visible border that adapts to any theme */
  border: 1.5px solid var(--color-text-muted);
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              border-color var(--transition-fast);
}

.theme-bubble::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  display: block;
  flex-shrink: 0;
}

/* override accent color per theme bubble */
.theme-bubble[data-theme-target="gold"]::before {
  background: #f0d78c;
}
.theme-bubble[data-theme-target="sapphire"]::before {
  background: #8ab4ff;
}
.theme-bubble[data-theme-target="crimson"]::before {
  background: #a02828;
}
.theme-bubble[data-theme-target="light"]::before {
  background: #f0ece4;
  /* use box-shadow ring instead of border to avoid vertical-line rendering artifact */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.theme-bubble[data-theme-target="mist"]::before {
  background: #c0a0e0;
}

.theme-bubble.is-active {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
  border-color: var(--color-accent);
}

/* ============================================
   MOBILE NAV
   ============================================ */

/* hamburger button */
.menu-toggle-button {
  display: none;
  border: none;
  background: transparent;
  padding: 0.4rem;
  align-items: center;
  justify-content: center;
  z-index: 10005; /* ensure clickable above panel */
  position: relative;
}

.menu-toggle-button span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-primary);
  transition: transform var(--transition-fast),
              opacity var(--transition-fast);
}

.menu-toggle-button span + span {
  margin-top: 5px;
}

/* transform into X when active */
.menu-toggle-button.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle-button.is-open span:nth-child(2) {
  opacity: 0;
}
.menu-toggle-button.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Mid-range compression: 1350px — hide theme label, keep bubbles ---- */
@media (max-width: 1350px) {
  .theme-switcher-label {
    display: none; /* save ~50px: label gone, colour dots stay visible */
  }
}

/* ---- 1100px — tighter gaps, smaller bubbles, compress link text ---- */
@media (max-width: 1100px) {
  :root { --nav-height: 56px; }

  .nav-links {
    gap: clamp(0.35rem, 0.4vw, 0.7rem);
  }

  .nav-links a {
    font-size: 0.85rem;
    padding: 0.25rem 0.28rem;
    letter-spacing: 0.14em;
  }

  .theme-bubble {
    width: 15px;
    height: 15px;
  }

  .theme-bubble::before {
    width: 10px;
    height: 10px;
  }
}

/* ---- 980px — further compression to keep all items in view ---- */
@media (max-width: 980px) and (min-width: 769px) {
  /* Actual nav renders ~47–48px at this range (reduced link padding) */
  :root { --nav-height: 48px; }

  .site-nav {
    gap: clamp(0.3rem, 0.4vw, 0.5rem);
  }

  .nav-links {
    gap: clamp(0.2rem, 0.28vw, 0.4rem);
  }

  .nav-links a {
    font-size: 0.78rem;
    padding: 0.2rem 0.18rem;
    letter-spacing: 0.1em;
  }

  .theme-bubble {
    width: 13px;
    height: 13px;
  }

  .theme-bubble::before {
    width: 9px;
    height: 9px;
  }

  .theme-switcher {
    gap: 0.35rem;
  }
}

/* ---- 860px — pull theme bubbles out of flex flow, float at nav right edge ---- */
@media (max-width: 860px) and (min-width: 769px) {
  /* Nav renders ~44–46px at this range (very tight link padding) */
  :root { --nav-height: 46px; }

  /* Reserve space on the right so links don't underlap the pill */
  .site-nav {
    padding-right: 108px;
    position: relative;
  }

  /* Float the bubble group as an absolute pill at the nav's right edge */
  .theme-switcher {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    gap: 0.3rem;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--color-border-subtle);
    padding: 4px 8px;
    border-radius: 20px;
    z-index: 5;
  }

  .theme-bubble {
    width: 11px;
    height: 11px;
  }

  .theme-bubble::before {
    width: 7px;
    height: 7px;
  }

  /* Compress links to fit the remaining space */
  .nav-links {
    gap: 0.12rem;
  }

  .nav-links a {
    font-size: 0.75rem;
    padding: 0.1rem 0.15rem;
    letter-spacing: 0.07em;
  }
}

/* ---- Hamburger breakpoint ---- */
@media (max-width: 768px) {
  :root { --nav-height: 48px; }

  .nav-links {
    display: none;
  }

  .theme-switcher {
    display: none; /* desktop theme bubbles hidden; will show inside panel */
  }

  .menu-toggle-button {
    display: inline-flex;
  }

  /* Center menu items vertically & horizontally */
  .mobile-nav-links {
    flex: 1;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
  }

  .mobile-nav-links a {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 4vw, 2.2rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    text-decoration: none;
  }

  .mobile-nav-links a.active {
    color: var(--color-accent);
  }

  .mobile-nav-links a:focus-visible {
    outline-offset: 6px;
  }

  /* theme switcher inside mobile panel */
  .mobile-theme-switcher {
    padding: var(--space-md) var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .mobile-theme-switcher-label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text-muted);
  }

  .mobile-theme-bubbles {
    display: flex;
    gap: 0.7rem;
  }

  .mobile-theme-bubbles .theme-bubble {
    width: 22px;
    height: 22px;
  }

  .mobile-theme-bubbles .theme-bubble::before {
    width: 14px;
    height: 14px;
  }
}

/* ============================================
   NO-JS NAV BEHAVIOR (FALLBACK)
   ============================================ */

/* Desktop: always hide the mobile panel */
.mobile-nav-panel {
  display: none;
}

@media (max-width: 768px) {
  /*
   * MOBILE PANEL — now a direct child of <body> (not inside the
   * sticky nav wrapper), so position:fixed and z-index work reliably
   * across all browsers. The nav wrapper creates a stacking context
   * that can trap fixed children — moving the panel outside avoids this.
   */
  .mobile-nav-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;                        /* left+right instead of 100vw — safe in in-app browsers */
    height: 100vh;                    /* fallback: Safari < 15.4 */
    height: calc(var(--vh, 1vh) * 100); /* polyfill override */
    height: 100svh; /* dynamic viewport height for mobile address bar */
    z-index: 9998; /* below nav bar (9999) but above all page content */
    background: var(--color-bg-overlay, rgba(13,13,15,0.97));
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    padding-top: var(--nav-height, 48px); /* space for the nav bar above — tracks --nav-height variable */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.35s ease,
      visibility 0.35s ease;
  }

  /* When open: fade in and become interactive */
  .mobile-nav-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* No-JS fallback: panel visible only when <noscript> is active.
     Using :target trick — the <a> inside <noscript> links to #mobile-nav,
     so the panel becomes visible only for true no-JS browsers.
     Previously used html.no-js class, but that relied on an inline <script>
     to remove the class in time — which can fail due to CSP or timing. */
  .mobile-nav-panel:target {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* No-JS menu link — replaces the JS-dependent hamburger button */
  .noscript-menu-link {
    display: inline-block;
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-primary, #d4c9a8);
    text-decoration: none;
    padding: 0.4rem 0.6rem;
    position: relative;
    z-index: 10005;
  }
}


/* ============================================
   BRIDGE: Remap page-specific CSS variable names
   to the global theme tokens so theme switching
   works on books, poems, reviews, projects, portfolio
   ============================================ */
:root,
[data-theme="gold"],
[data-theme="sapphire"],
[data-theme="crimson"],
[data-theme="light"],
[data-theme="mist"] {
  /* portfolio.css / css/books.css / css/poems.css variables */
  --bg-primary: var(--color-bg-base);
  --bg-secondary: var(--color-bg-elevated);
  --bg-tertiary: var(--color-bg-elevated);
  --bg-elevated: var(--color-bg-elevated);
  --bg-card: var(--color-bg-card-solid);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --text-tertiary: var(--color-text-faint);
  --accent: var(--color-accent);
  --accent-hover: var(--color-accent);
  --accent-dim: var(--color-accent-dark);
  --accent-glow: var(--color-accent-glow);
  --border: var(--color-border-medium);
  --border-light: var(--color-border-subtle);
  --border-accent: var(--color-border-strong);
  --border-color: var(--color-border-medium);
  --shadow-color: rgba(0, 0, 0, 0.3);

  /* css/projects.css variables */
  --accent-primary: var(--color-accent);
  --accent-secondary: var(--color-accent-dark);
  --accent-2: var(--color-accent-dark);
  --accent-3: var(--color-accent-glow);

  /* font aliases used by portfolio/projects/books/reviews */
  --font-heading: var(--font-serif);
  --font-mono: 'Space Mono', 'Courier New', monospace;
  --font-poetry: 'Cormorant Garamond', Georgia, serif;

  /* layout tokens (formerly in portfolio.css, used by reviews/books/home) */
  --container-max: 1400px;
  --padding-desktop: 4rem;
  --padding-tablet: 2rem;
  --padding-mobile: 0.5rem;
}

/* Decorative / quote cells */
.quote-cell,
.decor-cell,
.ornament-cell {
	  display: inline-block;
	  margin-top: 1rem;
	  font-size: var(--text-base);
	  color: var(--color-accent);
	  letter-spacing: 0.05em;
	  justify-content: center;
	}
  /* keep as in your original if needed */

/* ============================================
   TEXT SELECTION & SCROLLBAR
   (formerly in portfolio.css — shared site-wide)
   ============================================ */
::selection {
  background-color: var(--accent);
  color: var(--bg-primary);
}

/* Firefox scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--bg-secondary);
}

/* Chrome / Safari scrollbar */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
  }
}


/* Shared floating particle — used on poems, reviews, projects, interviews.
   Defined once here; duplicate @keyframes removed from page CSS files. */
@keyframes floatParticle {
  0%, 100% { transform: translateY(0)     translateX(0);    opacity: 0.3; }
  50%      { transform: translateY(-20px) translateX(10px); opacity: 0.6; }
}

.text-accent { color: var(--accent); }


/* ============================================
   APPLE SAFARI PERFORMANCE OVERRIDES
   (.ua-webkit-apple set on <html> by UA detection
    in home.html — targets Safari on macOS + iOS,
    excludes Chrome / Android / Edge / Firefox)

   backdrop-filter: blur() on position:fixed elements
   repaints on every scroll frame. On MacBook Air /
   iPhone (integrated GPU, shared RAM) this is the
   primary cause of scroll jank. Replaced with the
   existing semi-opaque background (already 0.95 alpha)
   which looks nearly identical without the GPU cost.
   ============================================ */

/* Fixed nav bar: base .site-nav no longer sets backdrop-filter (SCROLL-003),
   so no Apple-specific nav override is needed anymore. */

/* Mobile nav panel (blur: 22px — even more expensive) */
.ua-webkit-apple .mobile-nav-panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ============================================
   TOUCH DEVICES — drop mobile-panel backdrop-filter for everyone
   The Apple override above only covers Safari on macOS/iOS;
   it misses Android (Chrome/Firefox) and Chrome/Firefox on
   iOS. (The fixed NAV bar no longer uses backdrop-filter on
   any platform — see .site-nav / SCROLL-003 — so only the
   mobile panel's blur(22px) still needs this touch override.)
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  .mobile-nav-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ============================================================
   PRINT STYLESHEET (EX-05) — site-wide baseline
   Loaded on every page that links global.css (all but coming-soon).
   Goal: ink-efficient, readable printouts — black-on-white, no
   decorative chrome, no clipped images. Page-specific print blocks
   in projects.css / interviews.css still apply and reinforce this.
   Print-only: zero effect on screen rendering.
   ============================================================ */
@media print {
  /* Black on white, drop costly/decorative paint (HTML5-BP-style reset) */
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html,
  body {
    background: #fff !important;
    font-size: 12pt;
    line-height: 1.5;
  }

  /* Hide site chrome + decoration (nav, theme picker, particles, overlays, modals, filters) */
  .skip-link,
  .site-nav-wrapper,
  .theme-switcher,
  .mobile-theme-switcher,
  .menu-toggle-button,
  .mobile-nav-panel,
  .scroll-indicator,
  .bg-particles,
  .about-bg-particles,
  .home-bg-stage,
  #landingOverlay,
  .gv-modal,
  .filter-bar,
  .mobile-filter-bar,
  .sidebar,
  noscript {
    display: none !important;
  }

  /* Keep links legible; spell out external URLs (skip in-page #anchors) */
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  /* Images never clipped; avoid awkward breaks */
  img {
    max-width: 100% !important;
  }
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  img,
  figure,
  blockquote,
  tr,
  .book-cell,
  .project-card,
  .quote-card,
  .poem-slide {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}