/* ============================================================
   Music page components
   ============================================================ */

.page-head {
  padding-block: clamp(var(--s-9), 14vw, 12rem) clamp(var(--s-7), 8vw, var(--s-9));
}

.page-head h1 {
  margin-top: var(--s-4);
}

.page-head p {
  max-width: var(--measure);
  margin-top: var(--s-5);
  color: var(--ink-2);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--step--1);
  color: var(--ink-2);
  text-decoration: none;
}

.back-link:hover {
  color: var(--ink);
}

/* ---- Timeline ---------------------------------------------- */

.timeline {
  display: flex;
  flex-direction: column;
}

.tl {
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-6);
  border-top: 1px solid var(--rule);
}

@media (min-width: 720px) {
  .tl {
    grid-template-columns: 7rem 1fr auto;
    align-items: start;
    gap: var(--s-5);
  }
}

.tl__year {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.tl__title {
  font-size: var(--step-1);
  font-family: var(--font-display);
  font-weight: 600;
}

.tl__result {
  margin-top: var(--s-2);
  font-size: var(--step-0);
}

.tl__note {
  max-width: var(--measure);
  margin-top: var(--s-2);
  font-size: var(--step--1);
  color: var(--ink-2);
}

.tl__logo {
  height: 2rem;
  width: auto;
  object-fit: contain;
  opacity: 0.8;
}

/* Sanctioned accent use 5 of 5: one highlighted result. The
   Kawai entry is the single strongest thing on this page, so it
   gets the page's one accent-fill and nothing else does. */
.tl__flag {
  display: inline-block;
  padding: 0.1rem var(--s-3);
  border-radius: var(--r-full);
  background: var(--accent-fill);
  color: var(--on-accent-fill);
  font-size: var(--step--1);
  font-weight: 600;
}

/* ---- Certificate slot --------------------------------------
   Renders as a labelled placeholder until the photo lands, so
   the entry looks finished either way. */

.cert {
  margin-top: var(--s-4);
  max-width: 20rem;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px dashed var(--rule);
  border-radius: var(--r-md);
  font-size: var(--step--1);
  color: var(--ink-2);
  overflow: hidden;
}

.cert:has(img) {
  border-style: solid;
  padding: 0;
}

.cert img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cert:has(img) span {
  display: none;
}

/* ---- Instruments -------------------------------------------- */

.instrument h3 {
  font-size: var(--step-1);
}

.instrument__level {
  margin-top: var(--s-2);
  font-size: var(--step--1);
  color: var(--ink-2);
}

.instrument p {
  margin-top: var(--s-3);
  font-size: var(--step--1);
  color: var(--ink-2);
}

/* ---- Gallery ------------------------------------------------ */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--s-3);
}

.gallery button {
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface);
  transition: transform var(--t-mid) var(--ease);
}

.gallery button:hover {
  transform: scale(1.015);
}

.gallery img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* ---- Lightbox ----------------------------------------------- */

/* A <dialog> is display:none until opened, courtesy of the UA
   stylesheet. Setting display on the base rule overrides that and
   leaves the close button floating over the nav on page load, so
   the display switch belongs on [open] only. */
.lightbox[open] {
  display: grid;
  place-items: center;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  padding: var(--gutter);
  border: 0;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(8px);
}

.lightbox::backdrop {
  background: transparent;
}

.lightbox img {
  max-width: min(100%, 60rem);
  max-height: 85vh;
  width: auto;
  border-radius: var(--r-md);
  object-fit: contain;
}

.lightbox__close {
  position: absolute;
  inset-block-start: var(--gutter);
  inset-inline-end: var(--gutter);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--ink);
}

/* ---- Logo treatment -----------------------------------------
   The Trinity mark is near-black artwork on transparency, so in
   dark mode it all but disappears. Invert it there; the Kawai
   mark is red and reads fine in both themes, so it is left
   alone rather than blanket-filtering every logo. */

@media (prefers-color-scheme: dark) {
  .logo--invert {
    filter: invert(1) grayscale(1) brightness(1.7);
  }
}