@property --phone-blur {
      syntax: "<length>";
      inherits: false;
      initial-value: 0px;
    }
    @property --nav-blur {
      syntax: "<length>";
      inherits: false;
      initial-value: 18px;
    }
    @property --menu-blur {
      syntax: "<length>";
      inherits: false;
      initial-value: 0px;
    }
    @font-face {
      font-family: "Geist";
      font-style: normal;
      font-weight: 400 600;
      font-display: swap;
      src: url("/globalStyles/fonts/geist-latin-ext.woff2") format("woff2");
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: "Geist";
      font-style: normal;
      font-weight: 400 600;
      font-display: swap;
      src: url("/globalStyles/fonts/geist-latin.woff2?v=1") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: "Geist Mono";
      font-style: normal;
      font-weight: 400 500;
      font-display: swap;
      src: url("/globalStyles/fonts/geist-mono-latin-ext.woff2") format("woff2");
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: "Geist Mono";
      font-style: normal;
      font-weight: 400 500;
      font-display: swap;
      src: url("/globalStyles/fonts/geist-mono-latin.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: "Geist Fallback";
      src: local("Arial");
      size-adjust: 104%;
      ascent-override: 95%;
      descent-override: 25%;
      line-gap-override: 0%;
    }
    @font-face {
      font-family: "Geist Mono Fallback";
      src: local("Courier New");
      size-adjust: 100%;
      ascent-override: 95%;
      descent-override: 25%;
      line-gap-override: 0%;
    }
    :root {
      --bg: #050b16;
      --fg: #f4f4f4;
      --muted: #c8c8c8;
      --dim: #a3a3a3;
      --line: rgba(255, 255, 255, 0.14);
      --line-strong: rgba(255, 255, 255, 0.28);
      --blue: #66b3ff;
      --blue-2: #b0d7ff;
      --blue-line: rgba(102, 179, 255, 0.22);
      --blue-line-soft: rgba(102, 179, 255, 0.18);
      --blue-wash: rgba(102, 179, 255, 0.08);
      --star: #d7ccb8;
      --glass: rgba(5, 11, 22, 0.58);
      --glass-bar: rgba(5, 11, 22, 0.55);
      --glass-chip: rgba(3, 8, 18, 0.42);
      --type-h1: clamp(2.7rem, 5.6vw, 5.15rem);
      --type-h2: clamp(1.8rem, 3vw, 2.6rem);
      --type-h3: 18px;
      --space-1: 8px;
      --space-2: 16px;
      --space-3: 24px;
      --space-4: 40px;
      --space-5: 88px;
      --radius-pill: 999px;
      --radius-card: 22px;
      --dur: 0.6s;
      --ease: ease;
      --track-label: 0.14em;
      --max: 1240px;
      --pad: 24px;
      --nav: 68px;
      --tap-min: 44px;
      --shadow-1: 0 8px 24px rgba(0, 0, 0, .35);
      --blue-glow: rgba(102, 179, 255, .35);
      --dur-press: 100ms;
      --dur-fast: 200ms;
      color-scheme: dark;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; overscroll-behavior: none; }
    body {
      margin: 0;
      padding-top: var(--nav);
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
      overscroll-behavior: none;
      background: var(--bg);
      color: var(--fg);
      font-family: Geist, "Geist Fallback", Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 16px;
      line-height: 1.55;
      font-weight: 400;
      text-rendering: optimizeLegibility;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      height: 100lvh;
      background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.62), rgba(5, 11, 22, 0.74)),
        var(--page-photo, none) center 30% / cover no-repeat,
        #050b16;
    }
    /* 2026-09-27 (G9 speed pass, pillar-site S3): phones use the small backdrop when a page
       supplies one, falling back to the full-size photo so pages without a thumb are unchanged. */
    @media (max-width: 980px) {
      body::before {
        background:
          linear-gradient(to bottom, rgba(0, 0, 0, 0.62), rgba(5, 11, 22, 0.74)),
          var(--page-photo-sm, var(--page-photo, none)) center 30% / cover no-repeat,
          #050b16;
      }
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
    button, summary { font: inherit; color: inherit; }
    ::selection { background: #fff; color: #000; }
    :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    .skip {
      position: absolute;
      left: 12px;
      top: -40px;
      background: #fff;
      color: #000;
      padding: 8px 12px;
      z-index: 80;
      border-radius: 8px;
    }
    .skip:focus { top: 12px; }
    #content { scroll-margin-top: var(--nav); }
    h1, h2 { text-wrap: balance; }
