/* handEdited: keep to-astro.js from overwriting this file */
/* ==========================================================================
   Home page
   ========================================================================== */

/* --- Intro ------------------------------------------------------------- */
.s-intro { padding-top: 6.3333333333rem; padding-bottom: 2.5555555556rem; }
.s-intro .text { padding-top: 2.2222222222rem; }
.s-intro p {
  font-size: 1.889rem;
  color: var(--ink);
}
.s-intro .lead { font-family: var(--font-body-bold); }
.s-intro a { color: var(--yellow); text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 0.1666666667rem; }
@media (max-width: 543.98px) {
  .s-intro { padding-top: 2.7777777778rem; padding-bottom: 2.7777777778rem; }
  .s-intro p { font-size: 1.556rem; }
}

/* --- Rules between sections ------------------------------------------- */
.s-rule-ice .spacer, .s-rule-mint .spacer, .s-rule-yellow .spacer { height: 0.1111111111rem; }
.s-rule-ice .spacer { background: var(--ice-line); }
.s-rule-mint .spacer { background: var(--mint); }
.s-rule-yellow { padding-top: 3.3333333333rem; }
.s-rule-yellow .spacer { background: var(--yellow); }

/* --- Audio journalism -------------------------------------------------- */
.s-audio { padding-top: 0; }
.s-audio .heading {
  padding-top: 0.5555555556rem;
  padding-bottom: 2.2222222222rem;
  z-index: 2;
}
.s-audio .heading .is-content { text-shadow: 0.1111111111rem 0.0555555556rem 1.3888888889rem rgba(58,130,130,0.4); }
.s-audio .heading p {
  font-family: var(--font-display);
  font-size: 3.333rem;
  line-height: 3.333rem;
  letter-spacing: 0;
  color: var(--ice);
  text-align: left;
}
.s-audio .body p { color: var(--ink); }
@media (min-width: 992px) { .s-audio .body .is-content { max-width: calc((100% + var(--gutter)) * 5 / 6 - var(--gutter)); } } /* one column shorter than its 6-column span (~70 characters) */
.s-audio .body em { font-family: var(--font-body-italic); font-style: normal; }
.s-audio .body p:last-child { margin-bottom: 0; }

/* Awards: 4 badges on a CSS grid that shares the site gutter
   (they subdivide the section's 6-column span into four equal cells) */
.awards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.awards img { display: block; width: 100%; height: auto; }
@media (min-width: 992px) and (max-width: 1169.98px) {
  .s-audio .heading { padding-top: 0; padding-bottom: 0; }
  .s-audio .heading p { font-size: 3.889rem; line-height: 5.556rem; letter-spacing: 0.022rem; }
  .awards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .s-audio .heading { padding-top: 0; padding-bottom: 0; }
  .s-audio .heading p { font-size: 2.556rem; line-height: 5rem; }
  .awards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 544px) and (max-width: 767.98px) {
  .s-audio .heading { padding-top: 0; padding-bottom: 1.1111111111rem; }
  .s-audio .heading p { font-size: 2.556rem; line-height: 3.889rem; letter-spacing: -0.05rem; }
}
@media (max-width: 543.98px) {
  .s-audio .heading { padding-top: 0.5555555556rem; padding-bottom: 1.1111111111rem; }
  .s-audio .heading p { font-size: 2.556rem; line-height: 2.444rem; letter-spacing: -0.05rem; }
  .awards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Project table ----------------------------------------------------- */
.s-table { padding-bottom: 2.7777777778rem; }

/* --- Music + sound design --------------------------------------------- */
.s-music .heading {
  padding-top: 0.5555555556rem;
  padding-bottom: 1.6666666667rem;
  opacity: 0.94;
}
.s-music .heading .is-content { text-shadow: 0.2777777778rem 0.2777777778rem 2.7222222222rem rgba(0,255,246,0.17); }
.s-music .heading h1 {
  font-family: var(--font-display);
  font-size: 3.333rem;
  line-height: 4.056rem;
  color: var(--mint);
  text-align: left;
}
.s-music .heading .plus { font-family: var(--font-display-light); color: var(--ink); }
.s-music .blurb { padding-bottom: 1.6666666667rem; }
/* Line length: keep running text at 45-90 characters (practicaltypography.com/line-length) by
   capping paragraphs to 5 grid columns of the span they sit in. */
@media (min-width: 768px) { .s-music .blurb .is-content { max-width: calc((100% + var(--gutter)) * 5 / 8 - var(--gutter)); }   /* inside the xl-8 column */ }
@media (min-width: 768px) { .s-music .albums-intro .is-content { max-width: calc((100% + var(--gutter)) * 5 / 8 - var(--gutter)); }   /* same 5 columns as the scoring blurb above */ }
@media (min-width: 768px) { .s-design .blurb .is-content { max-width: calc((100% + var(--gutter)) * 5 / 12 - var(--gutter)); } }
.s-music .blurb p { color: var(--ink); }
 /* strut below the inline iframe */
  .s-music .heading h1 { font-size: 3.889rem; line-height: 4.333rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .s-music .heading { padding-top: 0; padding-bottom: 0; }
  .s-music .heading h1 { font-size: 2.556rem; line-height: 4.444rem; }
}
@media (min-width: 544px) and (max-width: 767.98px) {
  .s-music .heading { padding-top: 0; }
  .s-music .heading h1 { font-size: 2.556rem; line-height: 3.889rem; }
}
@media (max-width: 543.98px) {
  .s-music .heading { padding-bottom: 1.1111111111rem; }
  .s-music .heading h1 { font-size: 2.556rem; line-height: 2.444rem; }
}

/* --- Graphic design ---------------------------------------------------- */
.s-design { padding-top: 0.5555555556rem; padding-bottom: 4.4444444444rem; z-index: 0; }
.s-design .heading { padding-bottom: 1.1111111111rem; opacity: 0.94; }
.s-design .heading .is-content { text-shadow: 0.2777777778rem 0.3333333333rem 2.5rem rgba(255,211,0,0.32); }
.s-design .heading h1 {
  font-family: var(--font-display);
  font-size: 3.333rem;
  line-height: 3.333rem;
  letter-spacing: 0;
  color: var(--yellow);
  text-align: left;
}
.s-design .blurb { padding-bottom: 3.3333333333rem; }
.s-design .blurb p { color: var(--ink); }
.s-design .gallery { padding-bottom: 5.0555555556rem; }
@media (min-width: 992px) and (max-width: 1169.98px) {
  .s-design { padding-top: 0; }
  .s-design .heading { padding-bottom: 0; }
  .s-design .heading h1 { font-size: 3.889rem; line-height: 4.444rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .s-design { padding-top: 0; padding-bottom: 2.2222222222rem; }
  .s-design .heading { padding-bottom: 0; }
  .s-design .heading h1 { font-size: 2.556rem; line-height: 4.444rem; }
}
@media (min-width: 544px) and (max-width: 767.98px) {
  .s-design { padding-top: 0; }
  .s-design .heading { padding-top: 0; padding-bottom: 0.5555555556rem; }
  .s-design .heading h1 { font-size: 2.556rem; line-height: 3.889rem; }
  .s-design .blurb { padding-bottom: 1.6666666667rem; }
}
@media (max-width: 543.98px) {
  .s-design { padding-top: 0.4444444444rem; padding-bottom: 0.2222222222rem; }
  .s-design .heading { padding-bottom: 1.1111111111rem; }
  .s-design .heading h1 { font-size: 2.556rem; line-height: 2.444rem; }
  .s-design .blurb { padding-bottom: 1.6666666667rem; }
}

/* --- Bottom breathing room -------------------------------------------- */
.s-footer { padding: 0 0 2.2222222222rem; }
.s-footer .row { border-top: 0.1111111111rem solid rgba(255, 255, 255, 0.18); padding-top: 2.2222222222rem; }
.s-footer .col p { width: 100%; }
.s-footer p { margin: 0; font-family: var(--font-caption); font-size: 0.6666666667rem; line-height: 1.6; letter-spacing: 0.0555555556rem; text-transform: uppercase; color: var(--ink); }
.s-footer a { color: var(--ink); text-decoration: none; }
.s-footer a:hover { text-decoration: underline; text-underline-offset: 0.1666666667rem; }
@media (min-width: 768px) { .s-footer .links { text-align: right; } }
@media (max-width: 767.98px) { .s-footer .col + .col p { margin-top: 0.5555555556rem; } }

/* --- Design gallery: a fixed grid of equal tiles --------------------------- */
.design-grid { --gap: var(--gutter); --oc-bubble: #303030; }
.design-grid .tiles, .design-grid .covers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.design-grid .covers { margin-top: var(--gap); }
.design-grid .tile {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #262626;
}
.design-grid .tile img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.design-grid .tile.cover { aspect-ratio: 3 / 4; }
.design-grid .tile.oc-logo { background: var(--oc-bubble); }
.design-grid .tile.oc-logo img { object-fit: contain; padding: 6%; box-sizing: border-box; }
@media (max-width: 767.98px) {
  .design-grid .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .design-grid .tile.oc-logo { grid-column: span 2; aspect-ratio: 2 / 1; }
  .design-grid .tile.oc-logo img { padding: 3%; }
}

/* --- Albums and singles under the scoring samples --------------------------- */
.s-music .albums-intro { padding-top: 2.7777777778rem; padding-bottom: 1.1111111111rem; }
.s-music .albums-intro p { color: var(--ink); }
.s-music .albums-intro a { color: var(--ink); text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 0.1666666667rem; }

/* --- Albums: the story-card module again — one feature card, then three cards --------- */
.s-music .albums { padding-top: 0.5555555556rem; }
.s-music .album { min-width: 0; background: var(--surface); overflow: hidden; }
.s-music .album .sa-playlist { display: grid; grid-template-columns: minmax(0, 1fr); }
.s-music .album .sa-head { display: contents; }            /* art, body and tracks become cells of the card grid */
.s-music .album .sa-art { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.s-music .album .sa-body { display: flex; flex-direction: column; gap: 0.6666666667rem; align-items: stretch; min-width: 0; padding: 1.3333333333rem 1.3333333333rem 0; }
.s-music .album .sa-meta { display: flex; flex-direction: column; gap: 0.4444444444rem; margin: 0; align-self: stretch; }
.s-music .album .sa-album-title { font-family: var(--font-body-bold); font-size: 1.3333333333rem; line-height: 1.2; color: var(--ink); }
.s-music .album .sa-album-desc { font-family: var(--font-caption); font-size: 0.6666666667rem; line-height: 1.4; letter-spacing: 0.0333333333rem; text-transform: lowercase; color: var(--ink); margin: 0; }
.s-music .album .sa-controls { display: flex; flex-direction: row; align-items: center; gap: 0.6666666667rem; padding-top: 0.2222222222rem; }
.s-music .album .sa-transport { order: -1; gap: 0.2222222222rem; padding: 0; }
.s-music .album .sa-play { width: 2.4444444444rem; height: 2.4444444444rem; border: 0; background: var(--sa-accent, var(--yellow)); color: #000; }
.s-music .album .sa-play:hover { background: var(--ink); }
.s-music .album .sa-play svg { width: 0.8888888889rem; height: 0.8888888889rem; }
.s-music .album .sa-step { width: 1.5555555556rem; height: 1.5555555556rem; }
.s-music .album .sa-step svg { width: 0.7777777778rem; height: 0.7777777778rem; }
.s-music .album .sa-now { order: 0; flex-direction: column; gap: 0.2222222222rem; }
.s-music .album .sa-now .sa-now-title { display: none; }   /* the highlighted row in the list says what's playing */
.s-music .album .sa-progress { order: 0; flex-wrap: nowrap; gap: 0.6666666667rem; }
.s-music .album .sa-progress .sa-bar { flex: 1 1 8rem; order: 0; }
.s-music .album .sa-progress .sa-remaining { margin-left: 0; }
.s-music .album .sa-time { font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; min-width: 0; }
.s-music .album .sa-tracks { padding: 0.8888888889rem 1.3333333333rem 1.3333333333rem; }
.s-music .album .sa-tracks li:first-child { border-top: 0; }
.s-music .album .sa-track-btn { font-size: 1rem; padding: 0.6666666667rem 0; }
.s-music .album .sa-player .sa-track-btn:hover { padding-left: 0.5555555556rem; padding-right: 0.5555555556rem; }
.s-music .albums-list { display: grid; grid-template-columns: 1fr; gap: var(--gutter); }
@media (min-width: 768px) {
  /* every record: cover on the left (3 columns), titles, transport and the track list on the right */
  .s-music .album .sa-playlist { grid-template-columns: calc((100% + var(--gutter)) * 3 / 12) minmax(0, 1fr); }
  .s-music .album .sa-art { grid-column: 1; grid-row: 1 / span 2; align-self: start; aspect-ratio: 1 / 1; } /* full square cover, never cropped */
  .s-music .album .sa-body { grid-column: 2; padding: 1.7777777778rem 2rem 0 2.6666666667rem; }
  .s-music .album .sa-tracks { grid-column: 2; padding: 0.8888888889rem 2rem 1.7777777778rem 2.6666666667rem; }
  .s-music .album .sa-album-title { font-size: 1.8888888889rem; }
  /* no cover: text starts at the card's left edge */
  .s-music .album .sa-playlist:not(:has(.sa-art)) .sa-body, .s-music .album .sa-playlist:not(:has(.sa-art)) .sa-tracks { grid-column: 1 / -1; }
  .s-music .album .sa-playlist:not(:has(.sa-art)) .sa-body { padding-left: 2rem; }
  .s-music .album .sa-playlist:not(:has(.sa-art)) .sa-tracks { padding-left: 2rem; }
}
@media (max-width: 767.98px) {
  .s-music .album .sa-album-title { font-size: 1.5555555556rem; }
  /* keep the album transport and scrubber on one row (the base player stacks them on phones) */
  .s-music .album .sa-transport { width: auto; justify-content: flex-start; }
  .s-music .album .sa-now { width: auto; flex: 1 1 auto; }
  .s-music .album .sa-play { width: 2.4444444444rem; height: 2.4444444444rem; }
  .s-music .album .sa-play svg { width: 0.8888888889rem; height: 0.8888888889rem; }
}

/* --- Section accents follow each section's heading colour ------------------ */
.s-audio, .s-table, .s-stories { --accent: var(--ice); --sa-accent: var(--ice); }   /* audio journalism */
.s-music { --sa-accent: var(--mint); }    /* players: play button, progress, current track, row hover */

/* --- Highlighted stories ------------------------------------------------- */
.s-stories { padding-bottom: 3.3333333333rem; }
.s-stories .stories-label { padding-bottom: 1.6666666667rem; }
.s-stories .stories-label .is-content { padding-bottom: 0.8888888889rem; border-bottom: 0.1111111111rem solid var(--rule); } /* same rule as the project table header */
.s-stories { padding-bottom: 1.1111111111rem; }
.s-table { padding-top: 2.2222222222rem; }
.s-stories .stories-label p {
  font-family: var(--font-caption); font-size: 0.8888888889rem; line-height: 1; /* one step up the scale from the 12px table header */
  letter-spacing: 0.0555555556rem; text-transform: uppercase; color: var(--ink);
}