/* ============================================================
   audio.codyhurst.com — Hurst Sound Studios identity layer

   style.css carries the shared house design (navy + gold, the
   header, footer, buttons, cards, tables, doc layout). This file
   sits on top of it and does three things:

     1. Warms the palette toward 24k gold and a darker "control
        room" navy, so this site reads as the studio in the
        network rather than the weather app or the terminal.
     2. Adds the components the other sites have no use for:
        the click-to-load YouTube embed, release/track lists,
        the vinyl label, gear specs, and resource cards.
     3. Leaves everything in style.css alone. If a component is
        already there, it is used as-is.

   Motion is decorative everywhere it appears and is disabled
   wholesale under prefers-reduced-motion at the end of the file.
   ============================================================ */

/* 1. Palette shift ------------------------------------------------- */
:root {
  /* 24k gold rather than the muted brass the other sites use. */
  --brand-accent:        #d4af37;
  --brand-accent-strong: #b8860b;
  --gold-bright:         #f7e08f;
  --gold-deep:           #8f6a12;

  /* A gradient reused by the rim, the rules, and the headings. */
  --gold-sheen: linear-gradient(140deg, #f7e08f 0%, #e3c766 28%, #d4af37 50%, #b8860b 78%, #8f6a12 100%);

  --studio-navy:      #0b1c33;
  --studio-navy-deep: #06111f;

  --tape:      #7a5c2e;   /* warm brown, for archival material */
  --tape-bg:   #f6efe1;
}

[data-theme="dark"] {
  --brand-accent: #e8c65f;
  --tape:    #d8b878;
  --tape-bg: #241d10;
}

/* 2. Hero ----------------------------------------------------------- */
/* The house .hero is a plain band. Here it gets the control-room
   treatment: a deep navy field, a gold hairline, and a waveform
   drawn in CSS along the bottom edge. */
.hero--studio {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 140% at 25% 15%, #1a3d66 0%, var(--studio-navy) 55%, var(--studio-navy-deep) 100%);
  color: #f2f5fa;
  border-bottom: 2px solid transparent;
  border-image: var(--gold-sheen) 1;
  padding-block: clamp(3rem, 8vw, 5.5rem);
}
.hero--studio h1,
.hero--studio h2,
.hero--studio .hero__title { color: #ffffff; }
.hero--studio p { color: #cfd8e6; }
.hero--studio a:not(.btn) { color: var(--gold-bright); }
.hero--studio a:not(.btn):hover { color: #ffffff; }

.hero--studio .hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.hero__kicker--gold {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 0.75rem;
}

.hero__former {
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: #9fb0c8;
  margin-top: 1.25rem;
}
.hero__former strong { color: #d9c48a; font-weight: 600; }

/* The hero is dark in BOTH themes, so any component inside it that adapts to
   the page theme has to be pinned to the dark treatment explicitly. The house
   .btn--ghost is navy-on-transparent in light mode, which renders as navy on
   navy here — effectively invisible. Pin it to gold. */
.hero--studio .btn--ghost {
  background: transparent;
  color: var(--gold-bright);
  border-color: var(--brand-accent);
}
.hero--studio .btn--ghost:hover,
.hero--studio .btn--ghost:focus-visible {
  background: rgba(212, 175, 55, 0.16);
  color: #ffffff;
  border-color: var(--gold-bright);
}

.hero__medallion {
  width: clamp(6rem, 14vw, 9.5rem);
  height: auto;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}

/* The waveform strip along the bottom of the hero. Purely decorative, so it
   is aria-hidden in the markup and animated only when motion is welcome.

   Bar width and gap are in vw so the strip spans the full viewport at any
   size rather than clustering in the middle: 80 bars at 0.55vw with 0.7vw
   gaps comes to ~99vw, so it fills the hero edge to edge on a phone and on a
   wide desktop alike. min-width keeps the bars visible at very narrow sizes,
   where the hero's overflow:hidden trims the ends symmetrically. */
.hero__wave {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 84px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.7vw;
  opacity: 0.3;
  pointer-events: none;
}
.hero__wave span {
  flex: 0 0 0.55vw;
  min-width: 2px;
  background: var(--gold-sheen);
  border-radius: 3px 3px 0 0;
  height: var(--h, 20%);
  animation: hss-pulse 2.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  transform-origin: bottom;
}
@keyframes hss-pulse {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.42); }
}

/* 3. Section headings ------------------------------------------------ */
/* A short gold rule above a section heading — the visual join between
   the medallion's rim and the page body. */
.rule-heading {
  position: relative;
  padding-top: 1.1rem;
}
.rule-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5rem;
  height: 3px;
  border-radius: 2px;
  background: var(--gold-sheen);
}
.section--dark {
  background: linear-gradient(180deg, var(--studio-navy) 0%, var(--studio-navy-deep) 100%);
  color: #e6ecf5;
}
.section--dark h2, .section--dark h3 { color: #ffffff; }
.section--dark p, .section--dark li { color: #c3cfe0; }
.section--dark a:not(.btn) { color: var(--gold-bright); }

/* 4. Room cards (the home page index) -------------------------------- */
.rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.room {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.4rem 1.4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  overflow: hidden;
}
.room::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--gold-sheen);
  opacity: 0;
  transition: opacity var(--t);
}
.room:hover, .room:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-accent);
}
.room:hover::before, .room:focus-within::before { opacity: 1; }

.room__num {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  color: var(--brand-accent-strong);
}
[data-theme="dark"] .room__num { color: var(--brand-accent); }

.room__title { font-size: var(--step-2); margin: 0; }
/* The whole card is clickable, but only the heading link is in the tab
   order — a card with three tab stops that all go to one place is worse
   for a keyboard user, not better. */
.room__title a { text-decoration: none; }
.room__title a::after { content: ""; position: absolute; inset: 0; }
.room__title a:hover { text-decoration: underline; }
.room p { margin: 0; color: var(--text-muted); }

/* 5. YouTube click-to-load facade ------------------------------------ */
.yt { margin: 1.5rem 0 1.75rem; }

.yt__frame-host {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--studio-navy);
}
.yt__frame-host--facade {
  background:
    radial-gradient(120% 140% at 30% 20%, #1a3d66 0%, var(--studio-navy) 60%, var(--studio-navy-deep) 100%);
}
.yt__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.yt__load {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 600;
  color: #f0f4fa;
  text-align: center;
  transition: background var(--t);
}
.yt__load:hover { background: rgba(212, 175, 55, 0.08); }
.yt__load:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: -4px;
}
.yt__play {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--studio-navy), var(--studio-navy)) padding-box,
    var(--gold-sheen) border-box;
  color: var(--gold-bright);
  font-size: 1.6rem;
  padding-left: 0.28em; /* optically centre the triangle */
  transition: transform var(--t), background var(--t);
}
.yt__load:hover .yt__play { transform: scale(1.07); }
.yt__load-text { max-width: 32ch; line-height: 1.35; }

.yt__note {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin: 0.55rem 0 0;
}

/* A row of embeds, two up on a wide screen. */
.yt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.5rem;
}
.yt-grid .yt { margin: 0; }

/* 6. Release / track lists ------------------------------------------- */
.tracks {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.tracks > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  align-items: baseline;
  padding: 1rem 1.2rem;
  margin: 0;
  border-top: 1px solid var(--border);
}
.tracks > li:first-child { border-top: 0; }
.track__n {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--brand-accent-strong);
  min-width: 2.25rem;
}
[data-theme="dark"] .track__n { color: var(--brand-accent); }
.track__title { font-weight: 600; grid-column: 2; }
.track__meta {
  grid-column: 2;
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* 7. Vinyl label (Joy Coleman) --------------------------------------- */
/* A 45 rpm label rendered in CSS: concentric rings, a spindle hole,
   and the record's real catalogue data set in it. */
.vinyl {
  --size: clamp(13rem, 34vw, 19rem);
  position: relative;
  width: var(--size);
  height: var(--size);
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      #14161c 0 2px, #1b1e26 2px 4px);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.vinyl__label {
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #f4e3b8 0%, #e3c98c 55%, #cbab63 100%);
  border: 2px solid var(--gold-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* space-between, not center: the spindle hole is punched through the middle
     of the label, so the text has to sit above and below it. Centring the
     content runs the title straight under the hole. */
  justify-content: space-between;
  gap: 0.15rem;
  padding: 9% 8%;
  text-align: center;
  color: #3a2a08;
}
/* The clear band the hole occupies. The hole is 9% of the record and the
   label is 62% of it, so the hole spans ~15% of the label — this reserves
   comfortably more than that so descenders never touch it. */
.vinyl__gap {
  flex: 0 0 22%;
}
.vinyl__side {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.vinyl__title {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}
.vinyl__artist { font-size: 0.68rem; font-style: italic; }
.vinyl__cat {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  opacity: 0.8;
}
.vinyl__hole {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 9%;
  height: 9%;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--gold-deep);
}

.record-slab {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin: 2rem 0;
}
.record-slab__body { flex: 1 1 22rem; min-width: 0; }

/* A definition list of catalogue facts, set like a register entry. */
.reg {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.25rem;
  margin: 1.25rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--tape-bg);
  border-left: 3px solid var(--tape);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--step--1);
}
.reg dt { font-weight: 700; color: var(--tape); }
.reg dd { margin: 0; }
@media (max-width: 32rem) {
  .reg { grid-template-columns: 1fr; gap: 0 0; }
  .reg dd { margin-bottom: 0.6rem; }
}

/* 8. Gear specs ------------------------------------------------------ */
.gear {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 1.75rem 0;
}
.gear > li {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0;
}
.gear h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.gear p:last-child { margin-bottom: 0; }
.gear ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.gear li { margin-bottom: 0.25rem; }

/* A pill row — brands, formats, tags. */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.pills > li {
  margin: 0;
  padding: 0.3rem 0.8rem;
  font-size: var(--step--1);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-muted);
}
.pills > li strong { color: var(--text); font-weight: 600; }

/* 9. Resource cards (accessibility page) ----------------------------- */
.resources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 1.75rem 0;
}
.resource {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 0;
  transition: border-color var(--t), box-shadow var(--t);
}
.resource:hover, .resource:focus-within {
  border-color: var(--brand-accent);
  box-shadow: var(--shadow-sm);
}
.resource h3 { font-size: var(--step-1); margin: 0; }
.resource p { margin: 0; color: var(--text-muted); font-size: var(--step--1); }
.resource__host {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--brand-accent-strong);
  word-break: break-all;
}
[data-theme="dark"] .resource__host { color: var(--brand-accent); }
.resource--mine {
  border-left: 3px solid var(--brand-accent);
  background: linear-gradient(180deg, rgba(212,175,55,0.06), transparent 60%), var(--surface);
}

/* A frank verdict line — "works well", "partly", "not really". */
.verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  align-self: flex-start;
}
.verdict--good  { background: var(--success-bg); color: var(--success); }
.verdict--mixed { background: #fdf1dd; color: #8a5a00; }
.verdict--rough { background: var(--error-bg); color: var(--error); }
[data-theme="dark"] .verdict--mixed { background: #3a2c10; color: #f0c46a; }

/* 10. Archive disc index (Weatherscan) ------------------------------- */
.discs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.1rem;
  list-style: none;
  padding: 0;
  margin: 1.75rem 0;
}
.disc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.2rem 1.2rem 1.3rem;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--t), transform var(--t);
}
.disc:hover, .disc:focus-within {
  border-color: var(--brand-accent);
  transform: translateY(-2px);
}
.disc__n {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--gold-sheen) border-box;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--brand-accent-strong);
  margin-bottom: 0.35rem;
}
[data-theme="dark"] .disc__n { color: var(--brand-accent); }
.disc h3 { font-size: var(--step-1); margin: 0; }
.disc h3 a { text-decoration: none; }
.disc h3 a::after { content: ""; position: absolute; inset: 0; }
.disc h3 a:hover { text-decoration: underline; }
.disc p { margin: 0; font-size: var(--step--1); color: var(--text-muted); }

/* 11. Callout ------------------------------------------------------- */
.callout {
  padding: 1.2rem 1.35rem;
  margin: 1.75rem 0;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-alt);
}
.callout > :last-child { margin-bottom: 0; }
.callout h3 { font-size: var(--step-1); margin-top: 0; }

/* 12. Timeline (about page) ------------------------------------------ */
.timeline {
  list-style: none;
  padding: 0 0 0 1.75rem;
  margin: 1.75rem 0;
  border-left: 2px solid var(--border);
}
.timeline > li {
  position: relative;
  margin: 0 0 1.75rem;
  padding-left: 0.25rem;
}
.timeline > li::before {
  content: "";
  position: absolute;
  left: calc(-1.75rem - 0.25rem - 6px);
  top: 0.5rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold-sheen);
  box-shadow: 0 0 0 3px var(--bg);
}
.timeline__when {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--brand-accent-strong);
  letter-spacing: 0.06em;
}
[data-theme="dark"] .timeline__when { color: var(--brand-accent); }
.timeline__what { font-weight: 600; }
.timeline p { margin: 0.2rem 0 0; color: var(--text-muted); }

/* 13. Streaming links row -------------------------------------------- */
.streams {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
}
.streams > li { margin: 0; }
.streams a {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--step--1);
  transition: border-color var(--t), background var(--t);
}
.streams a:hover, .streams a:focus-visible {
  border-color: var(--brand-accent);
  background: var(--surface-alt);
  text-decoration: underline;
}

/* 14. Empty state (downloads before anything is published) ------------ */
.empty-state {
  padding: 2.25rem 1.5rem;
  text-align: center;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  margin: 1.75rem 0;
}
.empty-state h3 { color: var(--text); margin-top: 0; }
.empty-state > :last-child { margin-bottom: 0; }

/* 15. Footer grouping ------------------------------------------------- */
/* The site nav and the "part of the network" row are different kinds of link
   — one stays here, one leaves — but the house style renders them
   identically, so the only thing separating them is the heading. Make the
   network row visibly secondary. */
.site-footer__socials {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.site-footer__socials .social-links a {
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.78);
  text-decoration-color: rgba(255, 255, 255, 0.35);
}
.site-footer__socials .social-links a:hover,
.site-footer__socials .social-links a:focus-visible {
  color: var(--gold-bright);
  text-decoration-color: currentColor;
}

/* 16. Motion preferences --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__wave span { animation: none; }
  .room, .disc, .yt__play, .resource {
    transition: none;
  }
  .room:hover, .disc:hover, .disc:focus-within,
  .room:focus-within, .yt__load:hover .yt__play {
    transform: none;
  }
}