/* ============================================================
   kaethia.com — page-level layout.
   Shared tokens and voices live in base.css (from _shared/).
   ============================================================ */

/* ---------- hero: the name is the headline ------------------ */
/* The page belongs to the artist, not to one record, so her name
   carries the hero. It is set in mono because that is where
   humanari names live on these sites — the trailing underscore
   is a monospace artifact, and here it is the lit character. */
.hero { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem); }
.wordmark {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(2.3rem, .2rem + 8.6vw, 6.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.wordmark__mark { color: var(--gold); }
.hero__tagline { margin-top: 1.6rem; max-width: 30rem; }

/* A wide band rather than a portrait crop: the name above it is
   doing the work a big face used to do. */
.hero__portrait {
  width: 100%;
  aspect-ratio: 16 / 8;
  max-height: min(62vh, 32rem);
  object-fit: cover;
  /* The source is mirrored (see README) so she faces into the page. */
  object-position: 46% 34%;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

/* ---------- latest release ---------------------------------- */
/* One record, stated the way a sleeve states it: title, format,
   album, label. Distribution is administration, not art. */
.release {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.release__cover { width: 100%; aspect-ratio: 1; border-radius: 2px; }
.release__side > * + * { margin-top: 1rem; }
.release__title { text-decoration: none; display: inline-block; }
.release__title:hover { color: var(--gold-hi); }
.release__meta { color: var(--ash); line-height: 1.7; }
.release__meta strong { font-weight: 400; color: var(--paper); }
.release__cta { margin-top: 1.8rem !important; }

/* ---------- the catalogue ----------------------------------- */
.tracks { border-top: var(--rule); }
.tracks li { border-bottom: var(--rule); }
.tracks a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .4rem 1.75rem;
  align-items: baseline;
  padding-block: 1.35rem;
  text-decoration: none;
  transition: color 200ms ease;
}
.tracks a:hover { color: var(--gold-hi); }
.track__name { font-size: 1.2rem; }
.track__meta {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ash);
}
.tracks a:hover .track__meta { color: var(--gold); }

/* ---------- song page --------------------------------------- */
.song {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.song__cover { width: 100%; aspect-ratio: 1; border-radius: 2px; }
.song__side > * + * { margin-top: 1.1rem; }

/* Lyrics are the one place on these sites where the line breaks
   are the author's, so they are preserved rather than reflowed. */
.lyrics {
  white-space: pre-line;
  max-width: 34rem;
  font-size: 1.1rem;
  line-height: 1.85;
}
.lyrics__pending {
  border: 1px dashed rgba(233, 180, 107, .4);
  padding: 1.4rem 1.6rem;
  color: var(--ash);
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.8;
  letter-spacing: .04em;
  max-width: 34rem;
}

.credits {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 2rem;
  margin: 0;
  align-items: baseline;
  max-width: 34rem;
}
.credits dt {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ash);
  padding-top: .65em;
}
.credits dd { margin: 0; padding-block: .45em; font-size: 1.05rem; }
.credits dd + dt, .credits dt + dd { border-top: var(--rule); }
.credits dt:first-of-type, .credits dt:first-of-type + dd { border-top: 0; }

/* ---------- radio player ------------------------------------ */
/* Third-party embed: its interior is not ours to style, so it is
   given a fixed height and left alone rather than fought with.

   `color-scheme: dark` is load-bearing. The embedded document
   paints no background of its own, so the browser fills the
   frame's canvas from the colour scheme in force — and in Safari
   and Firefox that means a white rectangle behind the player.
   Declaring dark here makes that canvas dark instead. Chromium
   happens not to show the white box, so it will not warn you. */
.radio__player {
  display: block;
  width: 100%;
  max-width: 44rem;
  height: 150px;
  min-height: 150px;
  border: 0;
  background: transparent;
  color-scheme: dark;
}

/* ---------- the underscore, stated near the end -------------- */
/* The setup is the wordmark at the top of the page; this is the
   payoff. Same gold, same one character. */
.mark-note { max-width: 40rem; }
.mark-note__line {
  font-size: clamp(1.35rem, .9rem + 1.9vw, 2.1rem);
  line-height: 1.3;
  font-variation-settings: 'opsz' 30;
}
.mark-note__mark { font-family: var(--mono); color: var(--gold); }
.mark-note__link { margin-top: 1.6rem; display: inline-block; }

/* ---------- bio -------------------------------------------- */
.bio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.bio__text > * + * { margin-top: 1.15em; }
.bio__voice { margin-top: 2.2rem; }
.bio__portrait {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 32%;
  /* Dissolves into the room like the hero does. The sleeve is
     allowed a hard edge because a record cover has one; a face
     does not. */
  mask-image: linear-gradient(to bottom, #000 52%, transparent 100%);
}

/* ---------- where to find her ------------------------------- */
/* Not cards. Each row is an address, and the marker on the left
   says whether it is live or still coming — the only job this
   list has to do. */
.places { border-top: var(--rule); }
.places li { border-bottom: var(--rule); }
.places a, .places .place__inert {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: .4rem 1.75rem;
  align-items: baseline;
  padding-block: 1.5rem;
  text-decoration: none;
  transition: color 200ms ease;
}
.places a:hover { color: var(--gold-hi); }
.place__what { font-size: 1.15rem; }
.place__where {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--ash);
}
.places a:hover .place__where { color: var(--gold); }
.place__inert { color: var(--ash); }

/* ---------- hub (index) ------------------------------------- */
.hub {
  min-height: min(78vh, 40rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hub__title { max-width: 16ch; }
.hub__blurb { margin-top: 1.8rem; max-width: 32rem; }

/* Two doors. Kept as a plain pair of large links so the page
   does exactly one thing: send you through one of them. */
.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  background: rgba(244, 238, 229, .12);
  border-block: var(--rule);
}
.door {
  display: block;
  text-decoration: none;
  background: var(--night);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2rem);
  transition: background 240ms ease;
}
.door:hover { background: var(--night-2); }
.door__name { margin-top: .7rem; }
.door:hover .door__name { color: var(--gold-hi); }
.door__blurb { margin-top: .7rem; font-size: .95rem; color: var(--ash); }

/* ---------- small screens ----------------------------------- */
@media (max-width: 56rem) {
  .hero__portrait { aspect-ratio: 4 / 3; object-position: 44% 32%; }
  .release, .bio { grid-template-columns: minmax(0, 1fr); }
  .release__cover { max-width: 20rem; }
  .bio__portrait { max-width: 20rem; }
  .tracks a { grid-template-columns: minmax(0, 1fr); }
  .song { grid-template-columns: minmax(0, 1fr); }
  .song__cover { max-width: 20rem; }
  .places a, .places .place__inert { grid-template-columns: minmax(0, 1fr); }
}