/* Audio page styles. Owned by the audio page agent. Shared classes live in ../style.css (see INNER-PAGE KIT); do not redefine them here.
   Everything below is prefixed aud-. Motion: hover/press transitions on transform + opacity only; nothing is hidden-initial here
   (the kit's .wipe/.rise do that under html.js:not(.static)). */

/* ---------- hero extras ---------- */
.page-hero .label { margin-top: clamp(14px, 2vw, 26px); }

/* ---------- section tag: outline numeral + small-caps label (same outline language as .rrow on the home page) ---------- */
.aud-tag { display: flex; align-items: baseline; gap: .9rem; }
.aud-n { font: italic 300 clamp(3.6rem, 9vw, 8rem)/.9 var(--serif); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.4px var(--mist); }

/* ---------- 01 featured: the stage ---------- */
.aud-stage { display: grid; row-gap: clamp(22px, 3.2vw, 44px); margin-top: clamp(18px, 3vw, 40px); }
.aud-title { display: grid; justify-items: start; gap: clamp(8px, 1.2vw, 16px); }
.aud-by, .aud-part { font: 600 .76rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.aud-by { color: var(--mist); }
.aud-part { color: var(--orange); }
.aud-name { display: block; padding-bottom: .2em; font: italic 400 clamp(3.7rem, 15.5vw, 13rem)/.9 var(--serif); letter-spacing: -.035em; color: var(--cream); }   /* the Q's tail hangs below the last line: pad so Death clears it */
.aud-l1, .aud-l2 { display: block; }
.aud-l2 { padding-inline-start: .42em; }
.aud-quote { max-width: 24ch; font: 300 clamp(1.45rem, 2.5vw, 2.3rem)/1.28 var(--serif); letter-spacing: -.01em; color: var(--cream); }
.aud-quote em { font-weight: 400; color: var(--orange); }

/* the play control: cream disc, orange arrow disc inside (the .mag b language), sits above the strings like the pill does */
.aud-ctl { position: relative; z-index: 10; }
.aud-play { position: relative; display: grid; place-items: center; align-content: center; gap: clamp(8px, 1.1vw, 14px); width: clamp(156px, 17vw, 236px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--deep); font: 600 .76rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; -webkit-appearance: none; appearance: none; transition: transform .5s var(--ease); }
.aud-play::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--cream); transition: opacity .5s var(--ease); }
.aud-play::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid var(--cream); opacity: 0; transform: scale(.94); transition: transform .6s var(--ease), opacity .4s ease; }
.aud-play > * { position: relative; }
.aud-play b { display: grid; place-items: center; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--orange); transition: transform .5s var(--ease), opacity .5s ease; }
.aud-play b::before { content: ""; width: 36%; aspect-ratio: 1; margin-left: 9%; background: var(--deep); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.aud-play:hover { transform: scale(1.03); }
.aud-play:hover::after { opacity: .7; transform: scale(1); }
.aud-play:hover b { transform: scale(1.08); }
.aud-play:active { transform: scale(.97); }
.aud-play:active b { transform: scale(.94); }
.aud-play.is-loaded { color: var(--cream); cursor: default; }
.aud-play.is-loaded::before { background: var(--deep); }   /* solid, so the strings stay behind the label */
.aud-play.is-loaded::after { opacity: .55; transform: scale(1); inset: 0; }
.aud-play.is-loaded b { opacity: .55; transform: none; }

/* the reserved box for the player: fixed height, so inserting the iframe moves nothing */
.aud-slot { position: relative; z-index: 10; width: 100%; height: 166px; overflow: hidden; background: var(--cobalt); }
.aud-list .aud-slot { height: 450px; background: var(--deep); }
.aud-slot::after { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 30px; height: 5px; margin-top: -2px; border-radius: 2px; background: var(--orange); }   /* the bow tip, resting on the stave */
.aud-slot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 66px; transform: translateY(-50%); background: repeating-linear-gradient(to bottom, rgba(251, 244, 232, .3) 0 1.5px, transparent 1.5px 16px); }   /* five staff lines: the empty stave before the player arrives */
.aud-frame { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.aud-more { position: relative; z-index: 10; }
.aud-open, .aud-next .arrow-link { display: inline-flex; align-items: center; min-height: 44px; }   /* 44px touch target */

/* ---------- 02 everything else ---------- */
.aud-h2 { font: 300 clamp(2.7rem, 9.4vw, 8rem)/.98 var(--serif); letter-spacing: -.03em; margin-top: clamp(14px, 2vw, 28px); }
.aud-h2 span { display: block; }
.aud-i1, .aud-i2, .aud-i3 { font-style: italic; font-weight: 400; color: var(--orange); }
.aud-i1 { color: var(--mist); font-size: .5em; line-height: 1.5; letter-spacing: 0; }
.aud-i3 { padding-inline-start: .5em; }
.aud-prose { position: relative; z-index: 10; max-width: 34ch; margin-top: clamp(20px, 3vw, 40px); font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.5; color: var(--mist); }
.aud-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 clamp(20px, 3vw, 44px); }
.aud-actions .mag-wrap { margin-top: clamp(18px, 3vw, 40px); }
.aud-actions .aud-open { margin-top: clamp(4px, 2vw, 28px); }
.aud-load { border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.mag.aud-load:hover b { transform: translateY(.14em); }
.mag.aud-load:active b { transform: scale(.92); }
.mag.aud-load.is-loaded { background: none; color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(251, 244, 232, .55); cursor: default; }
.mag.aud-load.is-loaded b { opacity: .55; transform: none; }
.aud-note { position: relative; z-index: 10; margin-top: .4rem; font-size: .92rem; line-height: 1.5; color: var(--mist); }
.aud-list .aud-slot { margin-top: clamp(28px, 4.5vw, 64px); }

/* no JS: the buttons cannot work, so they are not shown; the Open SoundCloud links stay (they are always visible) */
html:not(.js) .aud-load { display: none; }
html:not(.js) .aud-ctl { display: none; }
html:not(.js) .aud-slot { display: none; }

/* ---------- next ---------- */
.aud-next { padding-block: clamp(64px, 9vw, 130px); }
.aud-next .big { margin-top: clamp(14px, 2vw, 28px); }
.aud-next .big em { color: var(--cobalt); }
.aud-next .copy { margin-top: clamp(24px, 3.5vw, 48px); }

/* ---------- string lane + layout ---------- */
@media (min-width: 640px) {
  .aud-list .inner > :where(:not(.bow):not(.aud-slot)) { max-width: 66%; }
  .aud-more { max-width: 66%; }
}
@media (min-width: 800px) {
  .aud-stage { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); }
  .aud-name { font-size: clamp(5rem, 13.4vw, 13rem); }   /* keeps Quixote clear of the play disc */
  .aud-title { grid-column: 1 / 9; grid-row: 1; }
  .aud-quote { grid-column: 1 / 8; grid-row: 2; }
  .aud-ctl { grid-column: 9 / 13; grid-row: 1 / 3; align-self: center; justify-self: start; }   /* the disc is centred on the string lane (~72% of the width) */
  .aud-slot { grid-column: 1 / 9; grid-row: 3; }
  .aud-more { grid-column: 1 / 9; grid-row: 4; }
  .aud-list .aud-slot { width: 83.5%; margin-inline-start: auto; }
}
@media (max-width: 639px) {
  .aud-slot { margin-inline-end: calc(var(--lane) * -1); width: calc(100% + var(--lane)); }
  .aud-list .aud-slot { height: 400px; }
  .aud-n { font-size: 3.4rem; }
  .aud-h2 { font-size: clamp(2.3rem, calc((84.5vw - 40px) / 6.1), 8rem); }    /* sized to the text column (100vw minus gutters and the string lane) so the indented Kaganovsky never outgrows its reveal clip */
  .aud-name { font-size: clamp(3rem, calc((84.5vw - 40px) / 4.3), 13rem); }
  .mag.aud-load { font-size: 1.3rem; padding-inline-start: 1.7rem; }
}
@media (max-width: 359px) { .mag.aud-load { font-size: 1.1rem; padding-inline-start: 1.3rem; gap: .8rem; } }