@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@700;800&display=swap");

/* The catalogue pages use the same broadcast desk as home and history.
   Their data-heavy content keeps its hierarchy, while every surface follows
   one quiet paper, grid, accent and control system. */
:root {
  color-scheme: light;
  --paper: #f0ecdf;
  --cream: #fffdf4;
  --ink: #243031;
  --accent: #ff6420;
  --olive: #a6ad45;
  --muted-ink: rgb(36 48 49 / 0.7);
  --soft-line: rgb(36 48 49 / 0.17);
  --frame-shadow: 10px 10px 0 rgb(184 92 49 / 0.2);
  --card-shadow: 6px 6px 0 rgb(36 48 49 / 0.1);
  --mono: "DM Mono", monospace;
  --sans: "Space Grotesk", Arial, sans-serif;
  --display: "Syne", Arial, sans-serif;
}

html,
body {
  background: var(--paper);
}

body[data-page] {
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 91% 12%, rgb(166 173 69 / 0.1), transparent 22rem),
    radial-gradient(circle at 8% 22%, rgb(255 100 32 / 0.08), transparent 24rem),
    var(--paper);
  font-family: var(--sans);
}

body[data-page="genres"] { --directory-accent: var(--olive); }
body[data-page="channels"],
body[data-page="artists"] { --directory-accent: var(--accent); }

body[data-page] .site-header {
  padding-top: env(safe-area-inset-top);
  border: 0;
  background: var(--paper);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body[data-page] main,
body[data-page] .site-footer {
  width: min(calc(100% - 92px - env(safe-area-inset-left) - env(safe-area-inset-right)), 1480px);
}

body[data-page] .site-nav {
  width: calc(100% - 92px - env(safe-area-inset-left) - env(safe-area-inset-right));
}

body[data-page] .site-nav {
  min-height: 92px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  border-bottom: 1px solid var(--soft-line);
}

body[data-page] .brand,
body[data-page] .brand-text {
  min-height: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.05em;
}

body[data-page] .brand { grid-column: 1; gap: 0.65rem; }
body[data-page] .brand-mark { width: 36px; height: 36px; flex-basis: 36px; border-radius: 50%; box-shadow: none; }

body[data-page] .nav-menu {
  grid-column: 2;
  height: auto;
  gap: 0.35rem;
}

body[data-page] .nav-menu a {
  min-width: 0;
  min-height: 0;
  padding: 0.45rem 0.58rem;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--ink);
  font: 500 0.68rem/1 var(--mono);
  letter-spacing: 0.07em;
  opacity: 0.68;
  transition: border-color 180ms ease, color 180ms ease, opacity 180ms ease;
}

body[data-page] .nav-menu a::after { display: none; }

body[data-page] .nav-menu a:hover,
body[data-page] .nav-menu a:focus-visible,
body[data-page] .nav-menu a[aria-current="page"] {
  border-color: var(--accent);
  color: var(--ink);
  background: transparent;
  opacity: 1;
  outline: 0;
}

body[data-page] .nav-live {
  display: block;
  grid-column: 3;
  justify-self: end;
  color: rgb(36 48 49 / 0.64);
  font: 500 0.68rem/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body[data-page] .directory-hero {
  position: relative;
  min-height: min(510px, calc(100svh - 132px));
  max-width: none;
  display: grid;
  align-content: end;
  justify-items: start;
  margin-top: clamp(1rem, 2.4vw, 2rem);
  padding: clamp(2rem, 5vw, 4.8rem);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--directory-accent) 60%, #d8d5c5);
  border-radius: clamp(18px, 2.1vw, 34px);
  color: var(--ink);
  background:
    radial-gradient(circle at 72% 62%, color-mix(in srgb, var(--directory-accent) 12%, transparent), transparent 26%),
    linear-gradient(135deg, #fffdf4, color-mix(in srgb, var(--directory-accent) 5%, #fffdf4) 68%, #f7f3e8);
  box-shadow: var(--frame-shadow);
}

body[data-page] .directory-hero::before {
  z-index: -1;
  top: 12%;
  right: 7%;
  width: min(37vw, 500px);
  border: 1px solid color-mix(in srgb, var(--directory-accent) 65%, transparent);
  box-shadow:
    0 0 0 28px color-mix(in srgb, var(--directory-accent) 8%, transparent),
    0 0 0 56px color-mix(in srgb, var(--directory-accent) 4%, transparent);
}

body[data-page] .directory-hero::after {
  z-index: -1;
  right: -0.07em;
  bottom: 0.02em;
  color: rgb(36 48 49 / 0.055);
  font-family: var(--display);
  font-size: clamp(8rem, 22vw, 22rem);
  line-height: 0.65;
}

body[data-page] .directory-hero .eyebrow,
body[data-page] .directory-card .eyebrow {
  color: color-mix(in srgb, var(--directory-accent) 77%, var(--ink));
  font-family: var(--mono);
  letter-spacing: 0.08em;
}

body[data-page] .directory-hero h1 {
  max-width: min(11ch, 760px);
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2.8rem, 5.8vw, 5.7rem);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.09em;
  text-transform: none;
}

body[data-page] .directory-hero .lede {
  max-width: 56ch;
  margin-bottom: 0;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--directory-accent) 45%, transparent);
  color: var(--muted-ink);
  font-size: clamp(0.95rem, 1.2vw, 1.12rem);
  line-height: 1.55;
}

/* Keep the introductory composition compact on wide catalogue pages. */
@media (min-width: 901px) {
  body[data-page] .directory-hero {
    min-height: min(440px, calc(100svh - 148px));
    padding: clamp(2.8rem, 4vw, 4rem) clamp(2rem, 6vw, 5.6rem);
    justify-content: center;
  }

  body[data-page] .directory-hero > .eyebrow,
  body[data-page] .directory-hero > h1,
  body[data-page] .directory-hero > .lede {
    margin-left: 0;
  }

  body[data-page] .directory-hero h1 {
    max-width: min(10.5ch, 700px);
    font-size: clamp(3.2rem, 4.8vw, 5rem);
  }
}

body[data-page] .filters {
  position: relative;
  margin-top: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.2rem, 2.4vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--directory-accent) 38%, rgb(36 48 49 / 0.14));
  border-top: 4px solid var(--directory-accent);
  border-radius: 18px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--directory-accent) 8%, transparent), transparent 38%),
    var(--cream);
  box-shadow: var(--card-shadow);
}

body[data-page] .filters h2,
body[data-page] .directory-card h3 {
  color: var(--ink);
  font-family: var(--display);
  letter-spacing: -0.055em;
  text-transform: none;
}

body[data-page] .filters h2 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); }

body[data-page] .search-box {
  color: var(--muted-ink);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-page] .search-box input {
  border: 1px solid rgb(36 48 49 / 0.25);
  border-radius: 0;
  color: var(--ink);
  background: rgb(255 253 244 / 0.8);
  font-family: var(--sans);
}

body[data-page] .search-box input:focus {
  border-color: var(--directory-accent);
  outline: 0;
}

body[data-page] .filter-row {
  border-top: 1px solid rgb(36 48 49 / 0.13);
}

body[data-page] .filter-chip {
  border: 1px solid rgb(36 48 49 / 0.22);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page] .filter-chip:hover,
body[data-page] .filter-chip:focus-visible {
  border-color: var(--directory-accent);
  color: var(--ink);
  background: color-mix(in srgb, var(--directory-accent) 12%, transparent);
  outline: 0;
  transform: none;
}

body[data-page] .filter-chip.is-active {
  border-color: var(--directory-accent);
  color: var(--ink);
  background: color-mix(in srgb, var(--directory-accent) 30%, var(--cream));
}

body[data-page] .filter-reset,
body[data-page] .filter-reset:hover { color: color-mix(in srgb, var(--olive) 86%, var(--ink)); }

body[data-page] .directory-section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
body[data-page] .results-count { color: color-mix(in srgb, var(--olive) 80%, var(--ink)); font-family: var(--mono); letter-spacing: 0.08em; }

body[data-page] .card-grid {
  gap: clamp(1rem, 1.6vw, 1.45rem);
  counter-reset: directory-card;
}

body[data-page] .directory-card {
  min-height: 350px;
  padding: clamp(1.15rem, 1.8vw, 1.55rem);
  border: 1px solid rgb(36 48 49 / 0.2);
  border-radius: 18px;
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--directory-accent) 12%, transparent), transparent 37%),
    linear-gradient(145deg, color-mix(in srgb, var(--directory-accent) 7%, transparent), transparent 27%),
    var(--cream);
  box-shadow: var(--card-shadow);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body[data-page] .directory-card::before {
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: var(--directory-accent);
}

body[data-page] .directory-card::after {
  color: rgb(36 48 49 / 0.055);
  font-family: var(--display);
}

body[data-page] .directory-card:hover {
  border-color: var(--directory-accent);
  background:
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--directory-accent) 17%, transparent), transparent 37%),
    linear-gradient(145deg, color-mix(in srgb, var(--directory-accent) 10%, transparent), transparent 27%),
    var(--cream);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--directory-accent) 16%, rgb(36 48 49 / 0.1));
  transform: translate(-2px, -2px);
}

body[data-page] .directory-card h3 {
  max-width: 92%;
  margin: 0.68rem 0 0.55rem;
  font-size: clamp(1.65rem, 2.15vw, 2.22rem);
  line-height: 0.9;
}

body[data-page] .directory-card p,
body[data-page] .feature-list,
body[data-page] .artist-style,
body[data-page] .artist-project,
body[data-page] .artist-project strong {
  color: var(--muted-ink);
}

body[data-page] .feature-list { line-height: 1.45; }

body[data-page] .card-meta span,
body[data-page] .artist-actions a,
body[data-page] .artist-service-list a,
body[data-page] .artist-services {
  border-color: rgb(36 48 49 / 0.22);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  font-family: var(--mono);
}

body[data-page] .card-meta span {
  padding: 0.25rem 0.42rem;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
}

body[data-page] .artist-card { min-height: 385px; }
body[data-page] .artist-card::before { background: linear-gradient(90deg, var(--accent) 0 68%, var(--olive) 68% 100%); }
body[data-page] .artist-style,
body[data-page] .artist-project { border-color: rgb(36 48 49 / 0.13); }
body[data-page] .artist-style span,
body[data-page] .artist-project small,
body[data-page] .artist-link-label { color: color-mix(in srgb, var(--olive) 85%, var(--ink)); }
body[data-page] .artist-project a,
body[data-page] .text-link { color: var(--ink); font-family: var(--mono); }
body[data-page] .text-link::after,
body[data-page] .artist-project a:hover { color: var(--directory-accent); }
body[data-page] .artist-actions a:hover,
body[data-page] .artist-service-list a:hover { border-color: var(--directory-accent); color: var(--ink); background: color-mix(in srgb, var(--directory-accent) 10%, transparent); }
body[data-page] .artist-services summary { color: var(--ink); font-family: var(--mono); }
body[data-page] .artist-services[open] summary { border-bottom-color: rgb(36 48 49 / 0.13); color: var(--ink); }

body[data-page] .directory-load .button {
  border-color: var(--directory-accent);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}

body[data-page] .site-footer {
  margin-top: clamp(4rem, 8vw, 8rem);
  padding: 2rem 0 calc(2rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--soft-line);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}

body[data-page] .site-footer::before { display: none; }
body[data-page] .site-footer .brand-text,
body[data-page] .site-footer p,
body[data-page] .site-footer nav a,
body[data-page] .footer-meta { color: var(--muted-ink); }
body[data-page] .site-footer .footer-brand { padding: 0; border: 0; border-radius: 0; background: transparent; }
body[data-page] .site-footer nav { gap: 0.35rem; }
body[data-page] .site-footer nav a { margin: 0; border: 1px solid transparent; border-radius: 0; background: transparent; font-family: var(--mono); }
body[data-page] .site-footer nav a:hover,
body[data-page] .site-footer nav a[aria-current="page"] { border-color: var(--accent); color: var(--ink); background: transparent; }

@media (min-width: 681px) and (max-width: 1024px) {
  body[data-page] .site-nav { min-height: 76px; }
  body[data-page] .directory-hero { min-height: 440px; }
  body[data-page] .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  body[data-page] .site-nav,
  body[data-page] main,
  body[data-page] .site-footer { width: calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  body[data-page] .site-nav { position: relative; min-height: 72px; grid-template-columns: 1fr auto; gap: 0.75rem; }
  body[data-page] .nav-toggle { grid-column: 2; justify-self: end; display: block; width: 44px; height: 44px; border-color: rgb(36 48 49 / 0.26); color: var(--ink); }
  body[data-page] .nav-live { position: absolute; top: 50%; right: 3.1rem; width: max-content; margin: 0; color: rgb(36 48 49 / .64); font: 500 .58rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; transform: translateY(-50%); }
  body[data-page] .nav-menu { position: absolute; inset: 72px 0 auto auto; display: none; width: min(230px, calc(100vw - 32px)); gap: 0; padding: 0.45rem; border: 1px solid rgb(36 48 49 / 0.26); background: var(--paper); box-shadow: 6px 6px 0 rgb(36 48 49 / 0.15); }
  body[data-page] .nav-menu.is-open { display: grid; }
  body[data-page] .nav-menu a { display: flex; align-items: center; min-height: 44px; padding-inline: 0.75rem; border: 0; border-bottom: 1px solid rgb(36 48 49 / 0.13); }
  body[data-page] .nav-menu a:last-child { border-bottom: 0; }
  body[data-page] .nav-menu a:hover,
  body[data-page] .nav-menu a:focus-visible,
  body[data-page] .nav-menu a[aria-current="page"] { border: 1px solid var(--accent); color: var(--ink); }
  body[data-page] .directory-hero { min-height: 390px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; margin-top: 1rem; padding: 1.6rem 1.75rem; border-radius: 18px; box-shadow: 7px 7px 0 rgb(184 92 49 / 0.18); }
  body[data-page] .directory-hero > .eyebrow,
  body[data-page] .directory-hero > h1,
  body[data-page] .directory-hero > .lede { position: static; left: auto; width: auto; max-width: calc(100% - 3.5rem); }
  body[data-page] .directory-hero > h1 { width: 100%; max-width: 100%; overflow-wrap: anywhere; }
  body[data-page] .directory-hero::before { top: 20%; right: -8%; width: 78vw; }
  body[data-page] .directory-hero h1 { max-width: 10ch; font-size: clamp(2.55rem, 12vw, 4rem); letter-spacing: -0.075em; }
  body[data-page] .directory-hero .lede { max-width: 34ch; font-size: 0.92rem; }
  body[data-page] .filters { margin-top: 1.35rem; padding: 1.15rem; border-radius: 14px; }
  body[data-page] .card-grid { grid-template-columns: 1fr; }
  body[data-page] .directory-card,
  body[data-page] .artist-card { min-height: 0; border-radius: 14px; }
  body[data-page] .directory-card::before { border-radius: 14px 14px 0 0; }
  body[data-page] .site-footer { grid-template-columns: 1fr; gap: 1.1rem; margin-top: 4rem; }
  body[data-page] .site-footer nav { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page] .directory-card,
  body[data-page] .filter-chip { transition: none; }
}