/**
 * ICEFAM.FM — "Broadcast Noir" era layer (1920s, monochrome).
 * ------------------------------------------------------------------
 * Skeleton: the Drooly design system (enormous type, one idea per
 * viewport, honest labels). Skin: prohibition-era back-room radio —
 * near-black ink, warm ivory, venetian-blind light slats, a faint
 * art-deco sunburst, EB Garamond display over Plex Mono ledger type.
 * The criminal energy is atmosphere only: shadows, passwords, a door.
 * Archetype, never a real person. Strictly SFW. Strictly monochrome:
 * every color in every stylesheet sits on the ink→ivory axis.
 *
 * Loaded LAST on every page; overrides only what the era needs.
 * Contract notes carried from hard-won bugs in this org:
 *  - never a bare `1fr`; media gates or-shaped, never pointer:coarse alone
 *  - every tappable keeps its 44px floor on BOTH axes (nothing here
 *    shrinks a target; this file adds no interactive elements)
 *  - reveal/state machines untouched — this is chrome, not wiring.
 */

:root {
  --noir-ink: #0b0a08;
  --noir-ink-2: #14120f;
  --noir-ink-3: #1c1915;
  --noir-ivory: #f5f2ea;
  --noir-ivory-dim: #cbc6ba;
  --noir-ivory-mute: #9a9487;
  --noir-line: rgba(245, 242, 234, 0.16);
  --noir-serif: "EB Garamond", "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* Re-point the shared token rails at the era. */
  --serif: var(--noir-serif);
  /* Deco is rectilinear: pills become plaques. */
  --radius-ctl: 3px;
  --radius: 3px;
}

/* ─── the room ──────────────────────────────────────────────────────
   One fixed overlay: venetian-blind slats falling across the page at a
   late-afternoon angle, plus a faint sunburst fan from the top — the
   deco gesture. Static (no motion), non-interactive, and it steps
   aside for high-contrast readers. */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      100deg,
      rgba(4, 4, 3, 0.13) 0 22px,
      rgba(4, 4, 3, 0) 22px 92px
    ),
    repeating-conic-gradient(
      from 168deg at 50% -12%,
      rgba(245, 242, 234, 0.030) 0deg 5deg,
      rgba(245, 242, 234, 0) 5deg 14deg
    );
}
@media (prefers-contrast: more) {
  html::before { display: none; }
}
@media print {
  html::before { display: none; }
}

/* ─── monochrome discipline ─────────────────────────────────────────
   Photography and marks print in silver-gelatin. Embedded video (the
   actual releases) is content, not chrome — it stays untouched. */
img {
  filter: grayscale(1);
}
/* The framed broadcast screens print monochrome too — the poster state of
   an embed is chrome, not the release itself. The YouTube link and the
   holder vault's own <video> stay untouched full-fidelity. */
.live-radio-screen iframe,
.embed-wrap iframe {
  filter: grayscale(1);
}

/* ─── type: the era gesture ─────────────────────────────────────────
   Display serif goes Garamond everywhere the system asked for serif;
   a few files name Instrument Serif literally, so the big surfaces
   are re-declared here. Body stays Space Grotesk; Plex Mono keeps
   doing ledger/typewriter duty. */
.live-radio-copy h2,
.subscribe-hero h1,
.subscribe-h2,
.wallet-shell .intro h1,
.hero-dj h1 {
  font-family: var(--noir-serif);
}
h1 em,
h2 em {
  letter-spacing: -0.01em;
}
.pull-quote {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
}

/* Ledger eyebrows: wider tracking, like a typed program sheet. */
.section-label,
.eyebrow,
.vault-kicker,
.micro-label {
  letter-spacing: 0.24em;
}

/* ─── frosted-glass masthead ────────────────────────────────────────
   The wordmark reads like gold-leaf lettering on an office-door pane,
   rendered monochrome: bright face, hairline top light, soft drop. */
.brand > span,
.brand-lockup > span,
.footer-brand > span {
  font-family: var(--noir-serif);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--noir-ivory);
  text-shadow:
    0 -1px 0 rgba(245, 242, 234, 0.28),
    0 2px 6px rgba(0, 0, 0, 0.85);
}
.brand > span em,
.brand-lockup > span em,
.footer-brand > span em {
  font-style: normal;
  color: var(--noir-ivory-dim);
}

/* ─── the ON AIR sign ───────────────────────────────────────────────
   A period marquee plaque: rectangular, double-ruled, letterspaced.
   The glow is earned — only the honest "on" state lights it. */
.live-radio-badge {
  border-radius: 3px;
  letter-spacing: 0.2em;
  box-shadow: 0 0 0 3px var(--noir-ink), 0 0 0 4px var(--noir-line);
}
.live-radio[data-radio-state="on"] .live-radio-badge {
  color: var(--noir-ivory);
  text-shadow: 0 0 14px rgba(245, 242, 234, 0.65);
  box-shadow:
    0 0 0 3px var(--noir-ink),
    0 0 0 4px rgba(245, 242, 234, 0.5),
    0 0 26px rgba(245, 242, 234, 0.22);
}

/* ─── plaques and double rules ──────────────────────────────────────
   The deco frame: a hairline ring set just off the card edge, like a
   ruled ledger box. Purely additive — layout and borders unchanged. */
.subscribe-card,
.price-card,
.access-card,
.receive-card,
.broadcast-console,
.tuner-panel,
.now-card,
.x-feed-card,
.supply-lock-card {
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(245, 242, 234, 0.07), 0 18px 50px rgba(0, 0, 0, 0.45);
}

/* Squared controls where files hard-coded their own pills. */
.button,
.header-cta,
.primary-button,
.secondary-button,
.verify-button,
.icon-button,
.btn,
.subscribe-cta,
.wallet-chip,
.verified-pill,
.format-chip,
.ecosystem-status {
  border-radius: 3px;
}

/* ─── tap-target floor: 44px on BOTH axes ───────────────────────────
   Small text links get an invisible hit area via symmetric padding and
   negative margins — layout is untouched, the tappable box clears 44px.
   (One-axis floors have shipped broken three times in this org.) */
.hero-community a,
.protocol-ledger nav a,
.post-content footer a,
.x-feed-actions a,
.supply-lock-links a,
.drooly-preview-links a,
.program-status a,
.continuity-copy > a,
.feed-policy-card footer a,
.public-relay-card footer a,
.p2p-deployment-card > a,
.release-manifest-link,
.tuner-actions .text-link,
.hero-secondary a,
.subscribe-foot a,
.subscribe-terms-aside a,
.checkout-readiness a,
.social-tile-native a,
.beta-caveat a,
.subscribe-list a,
.hermes-player .top nav a,
.hermes-player .session-line a,
.hero-actions .text-link,
.public-video-link,
.site-footer nav a,
.explorer-link,
.wallet-shell .explorer-link,
.bgb-hero p a,
.bgb-sec p a,
.bgb-tracks a,
.bgb-back,
.bgb-note a,
.bgb-dek a,
.header-back,
.card-links a,
.docs-link,
.header-link,
.founder-line a,
.network-links a,
.site-footer > a:not(.brand):not(.footer-brand),
.subscribe-back,
footer nav a {
  position: relative;
  padding: 17px 18px;
  margin: -17px -18px;
}
/* Links that sit on the viewport edge keep a narrower horizontal reach so
   the invisible hit box never creates a 2px horizontal scroll. */
.header-back,
.header-link,
.hermes-player .top nav a,
footer nav a {
  padding-inline: 10px;
  margin-inline: -10px;
}
.brand,
.brand-lockup,
.beta-rail-brand,
.launch-brand,
.network-brand,
.footer-brand {
  padding-block: 6px;
  margin-block: -6px;
}
.nav-pill,
.primary-profile-link,
.link-list a,
.profile-page footer a,
.profile-page .fine-links a,
.profile-page main span a,
.profile-page main div > a,
.identity-tabs a,
.link-list a,
.network-nodes a,
.profile-footer a,
.bureau-footer a,
.profile-page dd a,
.profile-page p a {
  position: relative;
  padding-block: 15px;
  margin-block: -15px;
}
.identity-tabs a,
.profile-footer a,
.bureau-footer a,
.link-list a,
.bureau-brand,
.profile-header nav .nav-pill {
  min-height: 44px;
  height: auto;
}
.identity-tabs a,
.profile-footer a,
.bureau-footer a,
.link-list a {
  display: inline-flex;
  align-items: center;
  padding-block: 0;
  margin-block: 0;
}
.nav-pill,
.primary-profile-link {
  padding-block: 2px;
  margin-block: -2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.skip-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.public-relay-card footer button,
[data-public-refresh] {
  min-height: 44px;
  min-width: 44px;
}
.watch-link {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─── focus: ivory, visible, everywhere ─────────────────────────────
   Zero-specificity so page-level rings win where they exist. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--noir-ivory);
  outline-offset: 3px;
}

/* ─── reduced motion / print ────────────────────────────────────────
   Nothing in this layer animates; the overlay is static by design. */
@media (prefers-reduced-motion: reduce) {
  .live-radio[data-radio-state="on"] .live-radio-badge {
    text-shadow: none;
  }
}