@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:wght@600&display=swap");
/* White — the site's theme from 2026-10-01. Clean, minimal, no blue.

   The Glacier design system is built on semantic tokens (surfaces, text,
   lines, actions, gradients), so the whole site turns by remapping them
   here, loaded after glacier.css on every page. Components are untouched.
   The raw ramps (--abyss-*, --frost-*) are left alone on purpose: a few
   things are meant to stay dark (device mockups, the record).

   Palette: paper white, a near-white wash for alternate sections, ink
   near-black, greys for body/muted text, hairlines at 8–16% ink. The only
   colour left is the live dot and the chrome's own spectral fringe. */
:root{
  --paper:#FFFFFF;
  --wash:#F6F6F4;
  --wash-2:#EEEEEB;
  --ink:#0E0E0F;

  /* surfaces */
  --surface-abyss:var(--paper);
  --surface-deep:var(--paper);
  --surface-raised:var(--wash);
  --surface-light:var(--wash);
  --surface-card:rgba(14,14,15,.025);
  --surface-card-light:rgba(255,255,255,.86);
  --surface-glass:rgba(255,255,255,.62);
  --surface-scrim:rgba(255,255,255,.72);

  /* text */
  --text-primary:var(--ink);
  --text-body:rgba(14,14,15,.70);
  --text-muted:rgba(14,14,15,.50);
  --text-faint:rgba(14,14,15,.40);
  --text-on-light:var(--ink);
  --text-body-on-light:rgba(14,14,15,.70);
  --text-muted-on-light:rgba(14,14,15,.48);
  --text-accent:rgba(14,14,15,.55);
  --text-inverse:var(--paper);

  /* lines */
  --line-hairline:rgba(14,14,15,.08);
  --line-strong:rgba(14,14,15,.16);
  --line-light:rgba(14,14,15,.10);
  --focus-ring:rgba(14,14,15,.45);

  /* actions: ink buttons on paper */
  --action-fill:var(--ink);
  --action-fill-hover:#2A2A2C;
  --action-ink:var(--paper);
  --action-ghost-hover:rgba(14,14,15,.05);
  --action-accent:var(--ink);
  --action-accent-hover:#2A2A2C;

  /* atmospheres: flat paper, no gradients, no light shafts, no flare */
  --grad-abyss:var(--paper);
  --grad-surface:var(--wash);
  --grad-rime:var(--wash);
  --grad-shaft:none;
  --grad-flare:none;
  --grad-protect:linear-gradient(0deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.55) 38%,transparent 100%);
  --grain-opacity:.025;
  --grain-opacity-strong:.04;

  color-scheme:light;
}
html,body{background:var(--paper);color:var(--text-primary)}
::selection{background:rgba(14,14,15,.12)}

/* The portrait illustration is cobalt blue and stays that way — on the
   About page and on the music widget's record label (2026-10-01). Only an
   explicit .gx-portrait-mono opt-in still renders it in monochrome. */
.gx-portrait-mono img,.gx-portrait-mono{filter:grayscale(1) contrast(1.05)}

/* ── No fades over images (2026-10-01) ───────────────────────────────────
   Every white or black fade laid over a picture is gone: photographs end
   at their own edge, logos sit on plain plates, the brand ring has no dark
   floor and no fading edges, the bottle stage has no vignette. */
:root{--grad-protect:none}
.gx-bleed img{-webkit-mask-image:none !important;mask-image:none !important}
.gx-3d-poster{-webkit-mask-image:none;mask-image:none}
.gx-ring-stage{-webkit-mask-image:none;mask-image:none}
.gx-ring-reflect{display:none}
.gx-bottle-stage::after{background:none !important}
.gx-bottle-pool{display:none}
/* Brand ring plates: clean white cards, hairline, soft neutral shadow — no
   blue tint, no frosted haze. */
.gx-ring-card{background:var(--paper);border:1px solid var(--line-hairline);
  box-shadow:0 1px 0 rgba(14,14,15,.02),0 14px 34px rgba(14,14,15,.08);-webkit-backdrop-filter:none;backdrop-filter:none}
.gx-ring-tile{background:var(--paper);box-shadow:none}
/* Overlay captions on photos no longer have a scrim: a light lift keeps
   them legible on any picture. */
.gx-bleed-text,.gx-plate-overlay{text-shadow:0 1px 12px rgba(255,255,255,.6)}

/* ── No blue anywhere, including the raw ramps (2026-10-01) ─────────────
   The design system reaches past the semantic tokens in a few places: the
   status dot (--signal-teal), active pills (--frost-050), hover text
   (--frost-200/300, --whiteout), accent tags (--glacier-*). The ramps are
   remapped to neutral greys, with sky blue kept as the single accent for
   link hovers, the live status and selected states. */
:root{
  --abyss-900:#0B0B0C;--abyss-800:#121213;--abyss-700:#1C1C1E;--abyss-600:#2A2A2C;--abyss-500:#3A3A3C;
  --glacier-500:#2A2A2C;--glacier-400:#3A3A3C;--glacier-300:#5A5A5C;--glacier-200:#8A8A8C;
  --frost-300:rgba(14,14,15,.55);--frost-200:rgba(14,14,15,.75);--frost-100:#F2F2F0;
  --frost-050:var(--sky-100);    /* selected/active pills: a light sky fill */
  --whiteout:#FFFFFF;
  /* Sky blue — the one accent: link hovers, live status, selected states. */
  --sky:#0EA5E9;--sky-600:#0284C7;--sky-100:#E0F2FE;
  --signal-teal:var(--sky);    /* the "open for work" dot */
  --signal-live:var(--sky);
  --focus-ring:rgba(14,165,233,.55);
}
/* Link hovers turn sky blue. */
.gx-ftlink:hover{color:var(--sky-600) !important;text-decoration-color:currentColor}
.gx-mail:hover,.gx-faq summary:hover{color:var(--sky-600)}
.gx-arrow{color:var(--sky-600)}
.gx-mnav-item.is-active .gx-mnav-go{color:var(--sky-600)}
/* Focus rings and the last hard-coded blues/teals. */
.gx-mail:focus-visible,.gx-doc:focus-visible,.gx-embed-cta:focus-visible,.gx-mnav-toggle:focus-visible,.gx-audio-btn:focus-visible,.gx-ring-stage:focus-visible{box-shadow:0 0 0 3px rgba(14,165,233,.3) !important}
.gx-check-ok .gx-check-mark{background:var(--sky-100);color:var(--sky-600)}
/* The design system's "accent" tag paints its colours inline. */
[style*="rgba(46,119,171"]{background:var(--sky-100) !important;color:var(--sky-600) !important;border-color:rgba(14,165,233,.35) !important}

/* ── Mobile menu: frosted white glass, ink text (2026-10-02) ───────────
   The bar and the sheet were the abyss theme's dark glass; on paper they
   read as a dark smear with unreadable text. */
@media (max-width:767px){
  .gx-mnav{background:rgba(255,255,255,.72);border-color:rgba(14,14,15,.08);
    -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 30px -12px rgba(14,14,15,.18)}
  .gx-mnav-toggle{background:rgba(14,14,15,.05);border-color:rgba(14,14,15,.08)}
  .gx-mnav-bars i{background:var(--ink)}
  .gx-mnav-sheet{background:rgba(250,250,248,.66);
    -webkit-backdrop-filter:blur(30px) saturate(1.7);backdrop-filter:blur(30px) saturate(1.7)}
  .gx-mnav-list{border-top-color:rgba(14,14,15,.1)}
  .gx-mnav-item{color:var(--ink);border-bottom-color:rgba(14,14,15,.1)}
  .gx-mnav-item:hover,.gx-mnav-item.is-active{color:var(--ink)}
  .gx-mnav-item.is-active .gx-mnav-idx{color:var(--sky-600)}
  .gx-mnav-idx{color:rgba(14,14,15,.45)}
  .gx-mnav-go{color:rgba(14,14,15,.45)}
  .gx-mnav-meta{color:rgba(14,14,15,.6)}
  .gx-mnav-cta{background:var(--ink);color:var(--paper)}
}

/* Nav wordmark: STANG in Sofia Sans Condensed, spaced caps (2026-10-02). */
.gx-brand{font-family:"Sofia Sans Condensed","Archivo Narrow",sans-serif;font-weight:600;font-size:23px;line-height:1;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);display:inline-block;transform:translateY(1px)}
@media (max-width:767px){.gx-brand{font-size:21px}}