/* The album layout (templates/album-*.html): a sleeve on the left, the text
   beside it. Each album's colours come from its own stylesheet, named by
   `css:` in the page's front matter, and are set on the variables site.css
   already draws from, so headings, links and the navigation follow them. */

:root {
  /* Quieter tones, derived from whatever --bg and --text the album sets */
  --muted: color-mix(in srgb, var(--text) 72%, var(--bg));
  --border: color-mix(in srgb, var(--text) 28%, var(--bg));
  --surface: color-mix(in srgb, var(--text) 9%, var(--bg));
}

body.album {
  max-width: 68rem;
}

.album .layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

/* --- The sleeve --- */

.sleeve {
  position: sticky;
  top: 1.5rem;
}

.sleeve .cover {
  display: block;
  margin-bottom: 1.25rem;
}

.sleeve .cover img {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1rem;
}

.tabs a {
  padding: 0.1em 0.8em;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
}

.tabs a:hover {
  border-color: var(--text);
}

.tabs a[aria-current] {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}

.tabs .icon {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.6em;
}

/* The news page's years, under the tabs: a way down a long page. Small and
   quiet, wrapping as a paragraph of numbers; filled by the template's script
   from the page's own year headings. */
.years {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em 0.9em;
  margin: 0 0 1rem;
  font-size: 0.85rem;
}

.years:empty {
  display: none;
}

.years a {
  color: var(--muted, var(--text));
  text-decoration: none;
}

.years a:hover {
  color: var(--text);
  text-decoration: underline;
}

.feather {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* --- The text --- */

.album .content {
  min-width: 0;
  max-width: 48rem;
}

.album .content > :first-child {
  margin-top: 0;
}

.album .content h1,
.album .content h2 {
  clear: both;
}

.album .content h2 {
  margin-top: 2.4em;
}

/* Photographs sit beside the words, and stack above them on a phone */
.album .content img {
  float: right;
  max-width: min(42%, 20rem);
  margin: 0.2rem 0 1rem 1.75rem;
  border-radius: var(--radius);
}

.album .content p:empty {
  display: none;
}

.album .content a {
  color: var(--text);
  text-decoration-color: var(--border);
}

.album .content a:hover {
  text-decoration-color: var(--text);
}

.album .content table {
  clear: both;
}

/* The 2006 dates table says nowrap on every cell; on a phone that drags the
   page sideways, so the cells wrap regardless. */
.album .content td[nowrap] {
  white-space: normal;
}

@media (max-width: 52rem) {
  .album .layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .sleeve {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
  }

  .sleeve .cover {
    flex: 0 0 8rem;
    margin: 0;
  }

  .tabs {
    margin: 0;
  }

  /* On a phone the sleeve is a row; the years take a row of their own under it */
  .years {
    flex-basis: 100%;
    margin: 0;
  }
}

@media (max-width: 34rem) {
  .album .content img {
    float: none;
    display: block;
    max-width: 100%;
    margin: 0 0 1rem;
  }
}

/* A song's credits: who played what, beneath the words. Quieter than the
   lyric — smaller, and the text colour eased toward the page — but in the
   same hand, one credit to a line, and free to wrap on a phone. Mixed from
   each album's own --text and --bg rather than --muted, which on
   Lookaftering's pale blue was 3.9:1; this is 5.3:1 there, 13:1 on
   Heartleap's black. */
.credits {
  margin: 1.2em 0 2em;
  color: color-mix(in srgb, var(--text) 85%, var(--bg));
  font-size: 0.85em;
  line-height: 1.55;
}