/* ============================================================
   LÉMAN CLASSICS — catalogue, artist and information pages
   ------------------------------------------------------------
   Design frame 1920 px. styles.css sets 1rem = 100vw / 96, i.e.
   20 px at 1920, so 1 design px = 0.05rem and every measurement
   below scales with the viewport: the pages keep the XD
   proportions on any desktop width. Under 860 px styles.css
   resets 1rem to 16 px and this file switches to a stacked flow.
   Vertical positions come from XD baselines converted to box
   tops by the generator (top ≈ baseline − 0.85 × font size).
   ============================================================ */

:root {
  --pg-grey: #525252;        /* catalogue body */
  --pg-bio: #505050;         /* artist bio body */
  --pg-duo: #a3a8ab;         /* duo page body */
  --pg-ink: #3b3b3b;         /* dark text on light pages */
  --hero-h: 100vh;           /* the 1080 px artboard = one screen, whatever the aspect ratio */
}

.subpage { font-family: 'Optima', 'Optima nova', 'Segoe UI', system-ui, sans-serif; color: #fff; }
/* subpages share the home page's slide-away / slide-back header (styles.css) */
.subpage main { position: relative; text-align: left; }
.subpage main a { transition: color .25s, opacity .25s; }

/* ---------- photo backgrounds ---------- */
.hero-photo {
  position: absolute; inset: 0;
  background: var(--hero-bg) center top / cover no-repeat;
}

/* ---------- streaming / buy / discover rail ---------- */
.rail {
  position: absolute;
  left: var(--rail-x); top: var(--rail-y);
  z-index: 4;
  display: flex; flex-direction: column; align-items: flex-start;
  font-weight: 700; font-size: 1.1rem; line-height: 1.2;
  letter-spacing: .02em; text-transform: uppercase;
  text-shadow: 0 .05rem .6rem rgba(0,0,0,.45);
}
.rail-link {
  position: relative;
  display: inline-flex; align-items: center;
  white-space: nowrap;
  padding: .45rem 0;
}
.rail-link .line {
  position: absolute; right: 100%; top: 50%;
  width: 2.6rem; height: .05rem; margin-right: .9rem;
  background: currentColor; opacity: .85;
  transition: width .25s;
}
.rail-link:hover, .rail-link:focus-visible { color: #fff; font-weight: 700; }
.rail-link:hover .line { width: 3.4rem; }
.rail-stream { display: flex; flex-direction: column; align-items: flex-start; outline: none; }
.rail-sub {
  list-style: none; margin: -.2rem 0 0; padding: 0 0 .55rem 1.4rem;
  font-weight: 500; font-size: 1rem; letter-spacing: .01em;
}
.rail-sub li { line-height: 1.5rem; transition: line-height .35s ease; }
.rail-sub .more {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .35s ease, opacity .3s ease;
}
.rail-stream:hover .rail-sub .more,
.rail-stream:focus-within .rail-sub .more { max-height: 1.7rem; opacity: 1; }
.rail-stream:hover .rail-sub li,
.rail-stream:focus-within .rail-sub li { line-height: 1.7rem; }
.rail-dark { color: var(--pg-ink); text-shadow: none; }
.rail-dark .rail-link:hover { color: #000; font-weight: 700; }

/* ---------- press quotes over the hero ---------- */
.quotes {
  position: absolute; z-index: 3;
  left: var(--q-x); top: var(--q-y); width: var(--q-w);
  text-align: center;
  font-weight: 500; font-size: min(var(--q-fs, 1.1rem), 2.04vh); line-height: 1.2;
  text-shadow: 0 .05rem .6rem rgba(0,0,0,.5);
}
.quotes p { margin: 0 0 1.2em; }
.quotes .src { display: inline-block; }
.quotes .years { letter-spacing: .04em; margin-bottom: 1.2em; }
.quotes .url { font-weight: 700; margin-bottom: 2.4em; }
.quotes .url a:hover { font-weight: 700; }

/* ---------- stacked CD covers ---------- */
.covers {
  position: absolute; z-index: 3;
  left: var(--cv-x); top: var(--cv-y);
  display: flex; flex-direction: column; gap: calc(var(--cv-gap) - var(--cv-s));
}
.covers a, .single-cover { display: block; width: var(--cv-s); height: var(--cv-s); overflow: hidden; }
.covers img, .single-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.covers a:hover img, .single-cover:hover img { transform: scale(1.04); }
.single-cover { position: absolute; z-index: 3; left: var(--cv-x); top: var(--cv-y); }

/* ---------- name block (bottom-left of a hero) ----------
   XD baselines: eyebrow 872, name 968, role 1025, credit 1061 */
.name-block {
  position: absolute; z-index: 3;
  left: 4.25rem;                  /* 85 px */
  top: auto; bottom: var(--nb-b, 4vh);   /* anchored to the screen bottom so the whole block is always on the first screen */
  text-shadow: 0 .05rem .8rem rgba(0,0,0,.45);
}
.name-block .eyebrow {
  position: relative;
  display: inline-flex; align-items: center;
  font-size: min(1.2rem, 2.22vh); font-weight: 400; letter-spacing: .05em; text-transform: uppercase;
  margin: 0 0 0 4.85rem;          /* text starts at 182 px */
  line-height: 1.4;
}
.name-block .eyebrow .line { position: absolute; right: 100%; margin-right: .6rem; width: 4.25rem; height: .05rem; background: currentColor; opacity: .85; }
.name-block .name {
  font-size: min(5rem, 9.26vh); font-weight: 500; line-height: 1;
  letter-spacing: .005em; text-transform: uppercase;
  margin: .3rem 0 0;
  white-space: nowrap;
}
.name-block .role { font-size: min(1.6rem, 2.96vh); font-weight: 400; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; margin: .5rem 0 0; }
.name-block .credit { font-size: min(.8rem, 1.48vh); font-weight: 400; line-height: 1.3; margin: .45rem 0 0; opacity: .9; }
.name-block .credits { display: flex; }
.name-block .credits span { display: block; min-width: 32.6rem; }
.name-block.align-right { left: auto; right: 4.5rem; text-align: right; }
.name-block.align-right .eyebrow { margin: 0 4.85rem 0 0; flex-direction: row-reverse; }
.name-block.align-right .eyebrow .line { right: auto; left: 100%; margin: 0 0 0 .6rem; }
/* two-line duo name with the instrument after each line */
.name-block .name.multi { line-height: 1.17; margin-top: .1rem; }
.name-block .name.multi .nm-line { display: block; }
.name-block .name.multi .role { display: inline; font-size: min(1.6rem, 2.96vh); margin: 0 0 0 1.6rem; vertical-align: baseline; letter-spacing: .04em; }
/* trio members listed under the group name */
.name-block .members { margin-top: .75rem; }
.name-block .member { display: block; font-size: min(3.5rem, 6.48vh); font-weight: 500; line-height: 1.23; text-transform: uppercase; white-space: nowrap; }
.name-block .member .role { display: inline; font-size: min(1.6rem, 2.96vh); margin: 0 0 0 1.4rem; }

/* ============================================================
   CATALOGUE DETAIL PAGE
   ============================================================ */
.cat-page { background: var(--pg-grey); min-height: 100vh; }
.cat-bg {
  position: absolute; left: 0; top: 0; width: 100%; height: var(--hero-h);
  background: url('../images/pages/info-about-bg.jpg') center / cover no-repeat;
}
/* Her catalogue deck (15.9.2026, sent again 2026-09-27) is the grid: every
   position below is her slide's point value / 20 (1920 pt wide = 96rem), set
   per CD by the generator from tools/content/catalogue-deck.json. The type is
   her deck's too: Optima regular, her sizes line by line, bold only where she
   set it ("graphically quiet and easily readable"). */
.cat-frame { position: relative; z-index: 2; padding: 0 0 6rem; min-height: var(--hero-h); }
.cat-page p { margin: 0; }
.cat-hl, .cat-pl { font-size: calc(var(--fs) * 1rem); line-height: 1.187; margin-top: calc(var(--g) * 1rem) !important; white-space: nowrap; }
.cat-hl .fs, .cat-pl .fs { font-size: calc(var(--fs) * 1rem); }
.cat-top { display: grid; }
.cat-top > * { grid-area: 1 / 1; }
.cat-left {
  position: relative; z-index: 3;
  margin: var(--cv-y) 0 0 var(--cv-x); width: var(--cv-s);
  /* the programme is measured from the rails' foot, 108 pt under the cover */
  height: calc(var(--cv-s) + 5.4rem);
}
.cat-cover { width: var(--cv-s); height: var(--cv-s); overflow: hidden; }
.cat-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-head {
  /* a centred column around her head axis (x 1125 to 1195 pt) */
  margin-left: calc(2 * var(--head-cx) - 96rem); width: calc(2 * (96rem - var(--head-cx)));
  padding-top: var(--head-top);
  text-align: center; font-weight: 400;
  text-shadow: 0 .05rem .6rem rgba(0,0,0,.35);
}
.cat-prog { margin: var(--prog-gap) 0 0 var(--prog-l); width: var(--prog-w); text-align: center; font-weight: 400; text-shadow: 0 .05rem .6rem rgba(0,0,0,.35); }
/* the reviews: her lines and breaks, 20 pt on a 23 pt pitch, centred on the page */
.cat-reviews {
  margin: var(--rev-gap) 0 0 var(--rev-l); width: var(--rev-w);
  text-align: center; font-weight: 400; line-height: 1.15;
  text-shadow: 0 .05rem .6rem rgba(0,0,0,.4);
}
.cat-reviews .review { font-size: calc(var(--fs, 1) * 1rem); margin-top: calc(var(--g) * 1rem); }
.cat-reviews .rv-p { margin-top: calc(var(--g) * 1rem); }
.cat-reviews .src, .cat-reviews .rl { display: block; white-space: nowrap; }

/* the rails under the cover, as drawn: 20 pt regular in her own case, first
   line 15 pt under the cover, one every 39 pt, a 60 pt rule 20 pt in from
   the cover's edge and the text 16 pt after it */
.cat-rail.rail {
  position: absolute; left: 0; top: calc(var(--cv-s) + .75rem);
  font-weight: 400; font-size: 1rem; line-height: 1.187; letter-spacing: 0;
  text-transform: none; text-shadow: 0 .05rem .5rem rgba(0,0,0,.35);
}
.cat-rail .rail-link { padding: 0; margin-left: 4.8rem; }
.cat-rail > .rail-link, .cat-rail .rail-stream + .rail-link { margin-top: .765rem; }
.cat-rail .rail-link .line { width: 3rem; margin-right: .8rem; top: 50%; }
.cat-rail .rail-link:hover .line { width: 3rem; }
.cat-rail .rail-link:hover, .cat-rail .rail-link:focus-visible { font-weight: 400; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: .05rem; }
/* the streaming platforms pop OVER "BUY CDs" and "DISCOVER MORE" on a
   blue-grey pane, so those two never move (her 2026-09-27 email) */
.cat-rail .rail-stream { position: relative; }
.cat-rail .rail-sub {
  position: absolute; left: .4rem; top: calc(100% + .35rem); z-index: 5;
  margin: 0; padding: .7rem 1.6rem .8rem 4.4rem; min-width: 18.8rem;   /* over the stripes too, platforms aligned with the labels */
  background: rgba(96, 116, 132, .94); box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.28);
  font-size: .9rem; font-weight: 400; letter-spacing: .02em; text-shadow: none;
  opacity: 0; visibility: hidden; transform: translateY(-.3rem);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.cat-rail .rail-sub li, .cat-rail .rail-sub .more { max-height: none; opacity: 1; overflow: visible; line-height: 1.75rem; }
.cat-rail .rail-sub a { color: #fff; display: block; }
.cat-rail .rail-sub a:hover, .cat-rail .rail-sub a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.cat-rail .rail-stream:hover .rail-sub, .cat-rail .rail-stream:focus-within .rail-sub {
  opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease;
}

/* a line break that exists only on a phone (the duo's name, her slide 20) */
.ph-br { display: none; }
@media (max-width: 860px) { .ph-br { display: inline; } }

/* ============================================================
   ARTIST PAGES
   ============================================================ */
/* Every artist page, every width (her wish relayed by Kevin 2026-09-20): the
   text scrolls over the artist, who stays pinned; when the text is over there
   is one full screen of the artist alone, then the artist scrolls up with the
   page and the footer follows as a normal section (main::after is that empty
   screen). The picture is .page-photo > div, sticky inside a wrapper that is
   absolutely stretched over <main>. NOT the negative-margin trick: a sticky
   element is bounded by its MARGIN box, so `margin-bottom: -100vh` let the
   photo stay pinned one screen past the end and the footer slid over it. */
.artist-page { position: relative; }
.artist-page .page-photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.artist-page .page-photo > div {
  position: sticky; top: 0;
  height: 100vh;
  background: var(--desk-bg, var(--page-bg)) center top / cover no-repeat;
}
.artist-page::after { content: ''; display: block; height: 100vh; }
.artist-page .a-hero { position: relative; z-index: 1; height: var(--hero-h); overflow: hidden; }
.artist-page .photo-section { z-index: 1; }
.artist-page .bio { position: relative; z-index: 1; background: transparent; padding-bottom: 7rem; }
.artist-page .bio .bio-col { text-shadow: 0 .05rem .6rem rgba(0,0,0,.5); }
.bio-col {
  position: relative;
  margin-left: var(--bio-x); width: var(--bio-w); padding-top: var(--bio-y);
  text-align: center; font-size: 1rem; font-weight: 500; line-height: 1.2;
}
.bio-col p { margin: 0 0 1.2em; }
.bio-col .src { margin-bottom: 0; }
.bio-col .url { font-weight: 700; font-size: 1.1rem; line-height: 1.2; margin-bottom: .3rem; }
.bio-col .url a:hover, .bio-col .urls a:hover { font-weight: 700; }
.bio-col .urls { font-weight: 700; font-size: 1.1rem; margin-top: 2.4em; }
.copyright { margin-top: 2.4em !important; font-weight: 400; font-size: 1.1rem; }
.bio-col .numbered { list-style: none; margin: 0; padding: 0; counter-reset: para; }
.bio-col .numbered li { position: relative; margin: 0 0 3.5em; padding: 0; }
.bio-col .numbered li::before { counter-increment: para; content: counter(para) "."; position: absolute; left: -.8rem; top: 0; }
.bio-col .numbered li:last-child { margin-bottom: 1.2em; }
.bio .extra { margin: 2.85rem 0 0 53.8rem; width: var(--ex-w); text-align: center; font-size: .8rem; }
.bio .extra img { width: 100%; height: auto; display: block; }
.bio .extra figcaption { margin-top: .3rem; }

@media (min-width: 861px) { .page-julius-drake .bio-col > .url { display: none; } }
/* Joy Farrall's desktop (her slide 97) reads the biography first and the two addresses after it; the phone (slide 61) the other way round */
@media (min-width: 861px) { .page-joy-farrall .bio-col { display: flex; flex-direction: column; } .page-joy-farrall .bio-col > .url { order: 1; margin-top: .3rem; } }
/* solo layout: covers right, name bottom-left (Freire mirrored via .side-left) */
.side-left .name-block { left: auto; right: 4.25rem; text-align: right; }
.side-left .name-block .eyebrow { margin: 0 4.85rem 0 0; flex-direction: row-reverse; }
.side-left .name-block .eyebrow .line { right: auto; left: 100%; margin: 0 0 0 .6rem; }

/* duo (Mebes & Freire): quote / award / quote top-left, name spans the width */
.layout-duo .duo-top { position: absolute; z-index: 3; left: 3.65rem; top: 9.44vh; width: 43.55rem; text-shadow: 0 .05rem .6rem rgba(0,0,0,.45); }
.layout-duo .duo-quote { font-size: 1.1rem; font-weight: 500; line-height: 1.2; margin: 0; }
.layout-duo .duo-award { font-size: 1.9rem; font-weight: 400; line-height: 1.2; letter-spacing: .01em; margin: 0 0 2.2rem; text-transform: uppercase; }
.layout-duo .duo-name { left: 5.65rem; right: 4.5rem; }
.layout-duo .duo-name .eyebrow { position: absolute; right: 0; top: 0; margin: 0; flex-direction: row-reverse; }
.layout-duo .duo-name .eyebrow .line { right: auto; left: 100%; margin: 0 0 0 .6rem; }
.layout-duo .duo-name .name { margin-top: 1.8rem; letter-spacing: -.005em; }
.layout-duo .duo-name .role { text-align: right; margin-top: .5rem; }
.layout-duo .bio { background: transparent; }

/* Nicholas Daniel & Julius Drake / The Daniel Trio: full-height photo screens */
.photo-section {
  position: relative; min-height: var(--sec-h); overflow: hidden;
  background: #000; padding-bottom: 8rem;
}
.photo-section .bio-col { z-index: 2; }
.photo-section .name-block { top: auto; bottom: 1.3vh; }
.dd-name { }
.dd-name .credits { margin-top: .6rem; }
.dd-name .credits span:first-child { min-width: 32.6rem; }
.dt-name { right: 4.5rem; }
.dt-name .name { margin-top: .2rem; }
.dt-name .members { margin-top: .25rem; }
.dt-name .member { line-height: 1.34; }
.dt-name .credits { flex-direction: column; text-align: right; margin-top: .2rem; }
.dt-name .credits span { min-width: 0; }

/* The Trio Ligeti: light hero right half, white body, dark text */
/* that hero is cream, so the white nav needs a heavier shadow to hold */
.page-the-trio-ligeti .nav-links a { text-shadow: 0 .05rem .5rem rgba(0,0,0,.8), 0 0 .2rem rgba(0,0,0,.65); }
.page-the-trio-ligeti .nav-bag img { filter: drop-shadow(0 .05rem .4rem rgba(0,0,0,.75)); }
.layout-ligeti .prize {
  position: absolute; z-index: 3; right: 2.35rem; top: 9.63vh; width: 27.25rem;
  text-align: right; color: var(--pg-ink); font-size: 2.05rem; font-weight: 500; line-height: 1.1; margin: 0;
}
.layout-ligeti .ligeti-name { left: 4.5rem; }
.layout-ligeti .ligeti-name .name { margin-top: .3rem; }
.layout-ligeti .bio-light { background: #fff; color: var(--pg-ink); padding-bottom: 6rem; }
.layout-ligeti .bio-light .bio-col { margin-left: 55.3rem; width: 38.35rem; }
.member-bio { margin: 3.4rem 0 0 55.3rem; width: 38.35rem; text-align: center; font-size: 1rem; font-weight: 500; line-height: 1.2; }
.member-bio.bold p { font-weight: 700; }
.member-bio .member-name { font-size: 2rem; font-weight: 500; line-height: 1.2; text-transform: uppercase; margin: 0; letter-spacing: .01em; }
.member-bio .member-name .role { font-size: .9rem; font-weight: 400; margin-left: .6rem; }
.member-bio .url { font-size: .9rem; font-weight: 700; margin: .1rem 0 1.5em; }
.member-bio p { margin: 0 0 1.2em; }
.member-bio a { color: #3b6db3; }
.member-bio a[href="#"] { pointer-events: none; }
.member-bio .url a { color: inherit; }
.member-bio .url a:hover { font-weight: 700; }

/* ============================================================
   INFORMATION PAGES
   Each is one screen in the XD, but the blocks sit in normal flow with the
   artboard's gaps as margins: a line that wraps pushes the rest down instead
   of landing on top of it, and the page grows rather than clipping.
   Offsets below are XD baselines converted to box tops (top = baseline - .85em).
   ============================================================ */
.info-page { position: relative; min-height: 100vh; overflow: hidden; background: var(--pg-grey); }
.info-frame { position: relative; z-index: 2; padding-bottom: 8vh; text-shadow: 0 .05rem .8rem rgba(0,0,0,.45); }
.info-title { margin: 0; font-size: 5rem; font-weight: 500; line-height: 1.1; letter-spacing: .005em; }
.info-page .rail-link { display: flex; width: -moz-fit-content; width: fit-content; }

/* ---- about: map top-right, then title, copy, free delivery ---- */
.info-about .info-frame { padding-top: 33.7vh; }          /* title baseline 449 */
.info-about .about-map { position: absolute; left: 47.1rem; top: 9.82vh; width: 35.8rem; height: 20.6rem; opacity: .95; }
.info-about .info-title { margin-left: 9rem; }
.info-about .about-text {
  margin: 1.95vh 0 0 12.5rem; width: 71.5rem; max-width: calc(100% - 15rem);
  font-size: 1.35rem; font-weight: 500; line-height: 1.2;
}
.info-about .about-text p { margin: 0 0 1.2em; }
.info-about .about-free { margin-left: 12.55rem; font-size: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }

/* ---- streaming ---- */
.info-streaming .info-frame { padding-top: 24.72vh; }     /* title baseline 352 */
.info-streaming .info-title { margin-left: 8.45rem; }
.info-streaming .stream-lead {
  margin: 3.15vh 0 0 14.35rem; width: 74rem; max-width: calc(100% - 17rem);
  font-size: 1.35rem; font-weight: 400; line-height: 1.2;
}
.info-streaming .stream-try { margin-top: 6.85vh; }
.info-streaming .stream-platforms {
  position: relative; height: 1.4rem; margin: 4.26vh 0 0 14.25rem; width: 66rem; padding: 0; list-style: none;
  font-size: 1.1rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em;
}
.info-streaming .stream-platforms .line { position: absolute; right: 100%; top: .6rem; width: 2.6rem; height: .05rem; margin-right: .9rem; background: currentColor; opacity: .85; }
.info-streaming .stream-platforms li { position: absolute; left: var(--px); top: 0; white-space: nowrap; }
.info-streaming .stream-platforms a:hover { color: #fff; font-weight: 700; }
.info-streaming .stream-discover { margin: 4.26vh 0 0 14.25rem; font-size: 1.1rem; font-weight: 700; text-transform: uppercase; }
.info-streaming .stream-buy { margin: 11.85vh 0 0 14.25rem; font-size: 1.1rem; font-weight: 700; text-transform: uppercase; }
.info-streaming .stream-free { margin: .35vh 0 0 14.3rem; font-size: .9rem; font-weight: 400; letter-spacing: .02em; }

/* ---- contact ---- */
.info-contact .info-frame { padding-top: 23.06vh; }       /* title baseline 334 */
.info-contact .info-title { text-align: center; }
.info-contact .contact-org { margin: 1.2vh 0 0; text-align: center; font-size: 1.35rem; font-weight: 500; line-height: 1.2; }
.info-contact .contact-org a:hover { font-weight: 700; }
.info-contact .xd-form { margin: 2.7vh auto 0; width: 31.5rem; max-width: calc(100% - 4rem); }
.info-contact .xd-form .field { display: flex; align-items: flex-end; gap: 0; height: 3.15rem; margin: 0; font-size: 1.35rem; font-weight: 500; line-height: 1.2; }
.info-contact .xd-form .field > span { flex: 0 0 6.25rem; width: auto; font-size: inherit; letter-spacing: 0; padding-bottom: .2rem; }
.info-contact .xd-form .field input, .info-contact .xd-form .field textarea {
  flex: 1; background: transparent; border: 0; border-bottom: .1rem solid #fff; border-radius: 0;
  color: #fff; font: inherit; padding: .1rem 0 .15rem; outline: none; box-shadow: none; min-height: 0;
}
.info-contact .xd-form .field-message { flex-direction: column; align-items: stretch; height: auto; padding-top: 2.87vh; }
.info-contact .xd-form .field-message > span { flex: none; padding: 0; }
.info-contact .xd-form .field textarea { flex: none; width: 100%; height: 5rem; margin-top: 2.5vh; border: .1rem solid #fff; padding: .4rem; resize: vertical; }
.info-contact .xd-form .field-check { display: flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 500; color: #fff; margin: 1.5rem 0 0 1rem; }
.info-contact .xd-form .field-check input { width: .8rem; height: .8rem; margin: 0; accent-color: #fff; }
.info-contact .xd-form .send-btn-xd {
  display: block; margin: 1.9rem auto 0;
  background: none; border: 0; color: #fff; cursor: pointer; padding: 0;
  font: inherit; font-weight: 700; font-size: 1.1rem; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em;
}
.info-contact .xd-form .send-btn-xd .line { display: none; }
.info-contact .xd-form .send-btn-xd:hover { font-weight: 700; }
.info-contact .form-status { text-align: center; font-size: .9rem; margin: .6rem 0 0; min-height: 1.2em; }

/* ============================================================
   TABLET / PHONE  (≤ 860 px: 1rem = 16 px, stacked flow)
   ============================================================ */
@media (max-width: 860px) {
  .subpage { font-size: 16px; }

  /* rail becomes an inline row */
  .rail { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 28px; font-size: 13px; padding: 0 24px; }
  .rail-link .line { display: none; }   /* shown again where there is room for them, below (catalogue, order, home) */
  .rail-sub { padding: 0 0 4px 14px; font-size: 12px; margin: 0; }
  .rail-sub .more, .rail-stream:hover .rail-sub .more { max-height: none; opacity: 1; }
  .rail-sub li, .rail-stream:hover .rail-sub li { line-height: 20px; }

  .quotes { position: static; width: auto; padding: 22px 24px 0; font-size: 15px; }
  .covers { position: static; flex-direction: row; flex-wrap: wrap; gap: 10px; padding: 18px 24px 0; }
  .covers a { width: 96px; height: 96px; }
  .single-cover { position: static; width: 180px; height: 180px; margin: 18px 24px 0; }

  .photo-screen { display: contents; }
  /* ---- Her artists' deck on a phone ----
     The page travels over the artist's photograph: "individual sub-pages,
     scroll over fixed image with transparent white". Two mechanics matter.

     The photograph is STICKY, not fixed. A sticky element is bounded by its
     container, so the picture pins for exactly the length of <main> and stops
     at the footer; a fixed one kept painting behind the footer and showed up
     in the overscroll below it, which is the glitch on the live site.

     Each member section on the duo and trio pages pins its OWN photograph
     above the page one (her slides 38 and 41: Drake over Drake, Daniel over
     Daniel), and its heading follows the previous content directly. */
  .artist-page { position: relative; background: none; overflow: visible; }
  .artist-page .page-photo > div {
    background: var(--page-bg) var(--page-focal, 50%) 20% / cover no-repeat;
    box-shadow: inset 0 0 0 100vmax rgba(16, 21, 26, .44);
  }
  /* the hero is one screen with the name low on it (her slide 3); the press
     follows as you scroll (slide 4). flex keeps the name block's order:-1. */
  .artist-page .a-hero, .photo-section {
    position: relative;
    height: auto; min-height: 100vh;
    display: flex; flex-direction: column;
    background: none;
    padding: 62vh 0 28px;
  }
  .artist-page .a-hero .hero-photo { display: none; }
  /* a member section: its own photograph pinned behind it, its heading straight
     after the previous content. The half-screen of empty picture that used to
     sit here is what read as a hole on the Daniel pages. */
  .artist-page .photo-section { min-height: 0; padding-top: 34px; }
  .artist-page .photo-section .hero-photo {
    display: block;
    position: sticky; top: 0; inset: auto;
    order: -2;
    width: 100%; height: 100vh;
    margin-bottom: -100vh;
    z-index: 1;
    background-position: 50% 20%;
    background-size: cover;
    box-shadow: inset 0 0 0 100vmax rgba(16, 21, 26, .44);
  }
  /* covers: one small column against the right edge (her slide 5) */
  .artist-page .covers, .artist-page .single-cover {
    position: relative; left: auto; top: auto;
    display: flex; flex-direction: column; gap: 12px;
    align-self: flex-end;
    width: 38vw; max-width: 176px;     /* a third larger than the first pass */
    margin: 6px 16px 0 0;
    padding: 0;   /* the old grid's 24px side padding ate a third of the column */
  }
  .artist-page .covers a, .artist-page .single-cover { width: 100%; height: auto; }
  .artist-page .covers img, .artist-page .single-cover img { width: 100%; height: auto; }

  /* Lifted above the pinned photograph. The offsets are zeroed here on
     purpose: making a child `relative` re-arms the desktop artboard's
     `top`/`left` (the rail carries top:549px left:101px from its --rail-y/x),
     which `static` had been ignoring, and that shoved the button rail a whole
     screen down onto the member bio. */
  .artist-page .a-hero > :not(.hero-photo),
  .artist-page .photo-section > :not(.hero-photo),
  .artist-page .bio { position: relative; z-index: 2; top: auto; right: auto; bottom: auto; left: auto; }
  /* the bespoke layouts paint their own opaque panels (.layout-ligeti .a-hero is
     a flat #1d1d1d); on a phone the photograph carries through everything */
  .artist-page[class*="layout-"] .a-hero,
  .artist-page[class*="layout-"] .photo-section,
  .artist-page[class*="layout-"] .bio,
  .artist-page[class*="layout-"] .quotes,
  .artist-page[class*="layout-"] .member-bio,
  .artist-page[class*="layout-"] .bio-col,
  .artist-page[class*="layout-"] .covers { background-color: transparent; background-image: none; }
  /* The Daniel Trio's name block is right-aligned on the desktop artboard and
     keeps `right: 4.5rem` from that layout. On a phone the block is relative,
     so that offset dragged it 72 px off the left edge and clipped the two photo
     credits. Her slide 36 has it left-aligned like every other page. */
  .artist-page .name-block.dt-name, .artist-page .dt-name {
    position: static; right: auto; left: auto;
    text-align: left;
  }
  .artist-page .dt-name .credits { text-align: left; align-items: flex-start; }
  .artist-page .dt-name .eyebrow { justify-content: flex-start; flex-direction: row; }

  /* ---- Susanne Mebes & Joaquim Freire on a phone (her three duo slides) ----
     Screen 1: the press first, top left, over the photograph; the name block
     low and RIGHT-aligned. Screen 2: the two discs side by side, large. Then
     the buttons, centred on their rules, and a centred bio whose first
     paragraph is bold. The order differs from the solo pages on purpose. */
  .layout-duo .a-hero { padding-top: 96px; }
  .layout-duo .a-hero .quotes { order: 0; text-align: left; padding: 0 24px; margin-top: 0; }
  .layout-duo .a-hero .quotes .src-award { color: var(--gold, #c9a86a); font-weight: 700; }
  .layout-duo .a-hero .duo-name {
    order: 1;
    margin-top: 42vh;                 /* the photograph shows between press and name */
    text-align: right; padding: 0 24px 0 40px;
  }
  .layout-duo .duo-name .eyebrow { justify-content: flex-end; flex-direction: row; margin: 0; }
  .layout-duo .duo-name .eyebrow .line { order: -1; margin: 0 8px 0 0; }
  .layout-duo .duo-name .role { text-align: right; }
  .layout-duo .a-hero .covers {
    order: 2;
    flex-direction: row; gap: 12px;
    align-self: stretch;
    width: auto; max-width: none;
    margin: 22px 16px 0;
  }
  .layout-duo .a-hero .covers a { flex: 1 1 0; width: auto; }
  /* the buttons sit against the left, on their rules, as her slide 22 (Kevin, 2026-09-20) */
  .layout-duo .a-hero .rail {
    order: 3;
    flex-direction: column; align-items: flex-start;
    gap: 14px;
    margin: 26px 0 0; padding: 0 0 0 40px;
  }
  .layout-duo .a-hero .rail .rail-link .line { display: inline-block; width: 58px; margin-right: 6px; }
  .layout-duo .a-hero .rail .rail-link { margin-left: 64px; }   /* room for the rule, which is absolute to the left of the text */
  .layout-duo .a-hero .rail .rail-sub { text-align: left; padding-left: 73px; }
  .layout-duo .bio .bio-col > p:first-of-type { font-weight: 700; }
  .name-block, .photo-section .name-block, .layout-duo .duo-name, .dt-name, .layout-ligeti .ligeti-name {
    position: static; order: -1; padding: 18px 24px 0; text-align: left; right: auto; left: auto;
  }
  .name-block .eyebrow, .side-left .name-block .eyebrow, .name-block.align-right .eyebrow, .layout-duo .duo-name .eyebrow { position: relative; right: auto; top: auto; margin: 0 0 0 40px; flex-direction: row; font-size: 12px; }
  .dd-name .credits span:first-child { min-width: 0; }
  .name-block .eyebrow .line, .side-left .name-block .eyebrow .line, .name-block.align-right .eyebrow .line, .layout-duo .duo-name .eyebrow .line { right: 100%; left: auto; width: 28px; margin: 0 8px 0 0; }
  .name-block .name, .layout-duo .duo-name .name, .photo-section .name-block .name { font-size: clamp(30px, 9vw, 44px); margin-top: 10px !important; white-space: normal; line-height: 1.02; }
  .name-block .role, .layout-duo .duo-name .role, .photo-section .name-block .role { font-size: 15px; margin-top: 8px !important; text-align: left; }
  .name-block .name.multi .role, .name-block .member .role { font-size: 14px; margin-left: 10px; }
  .name-block .member { font-size: clamp(20px, 6vw, 28px); white-space: normal; }
  .name-block .credit { font-size: 11px; }
  .name-block .credits { flex-direction: column; text-align: left; }
  .name-block .credits span { min-width: 0; }
  .name-block h1[style] { font-size: clamp(30px, 9vw, 44px) !important; }

  .artist-page .bio { padding: 0 0 48px; }
  .bio-col, .layout-ligeti .bio-light .bio-col, .member-bio { margin: 0; width: auto; padding: 22px 24px 0; font-size: 15px; line-height: 1.45; }
  .bio-col .numbered li::before { position: static; margin-right: 6px; }
  .bio .extra { margin: 24px auto 0; width: calc(100% - 48px); font-size: 12px; }
  .photo-section .bio-col { order: 0; }
  .photo-section { padding-bottom: 32px; }

  .layout-duo .duo-top { position: static; width: auto; padding: 18px 24px 0; order: 0; }
  .layout-duo .duo-award { font-size: 20px; margin-bottom: 14px; }
  .layout-duo .duo-quote { font-size: 15px; }
  .layout-duo .duo-name .role { text-align: right; }   /* GUITARS under the name, right (her slide 20) */
  .layout-ligeti .prize { position: static; width: auto; text-align: left; padding: 18px 24px 0; font-size: 20px; color: #fff; order: 0; }
  /* ---- Susanne Mebes on a phone (main.phone-deck): her slides 3 to 8 ----
     Measured off the deck (frame 538 pt wide, so 0.725 px per pt on a 390 px
     phone). Screen 1: the name low on the photograph at 94% of the width, with
     the first press quote under it set towards the right. Then the second
     quote, then ONE row: the links bottom-left (bold headings on short rules,
     only Presto and Idagio under the streaming one) beside the five discs in a
     column at the right edge, and their bottoms aligned. Then the bio and every
     later quote in bold. No photo credit under the name: the page ends on her
     © line. The hero becomes a grid so the row can pair the rail and the
     discs; the name block keeps row 1. */
  .phone-deck .a-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    align-content: start;
    padding-top: var(--deck-top, 69vh);
  }
  .phone-deck .a-hero .name-block { grid-column: 1 / -1; grid-row: 1; padding: 0 12px; }
  .phone-deck .name-block .eyebrow { margin: 0 0 0 90px; font-size: 16px; }
  .phone-deck .name-block .eyebrow .line { width: 70px; margin: 0 8px 0 0; }
  .phone-deck .name-block .name { font-size: clamp(30px, 11.6vw, 64px); letter-spacing: 0; margin-top: 2px !important; white-space: nowrap; }
  .phone-deck .name-block .role { font-size: 22px; margin-top: 2px !important; }
  .phone-deck .name-block .credit { display: none; }
  .phone-deck .a-hero .quotes { grid-column: 1 / -1; grid-row: 2; padding: 10px 5% 0 29%; text-align: center; line-height: 1.25; }
  .phone-deck .a-hero .quotes p:last-child { margin-bottom: 0; }
  .phone-deck .a-hero .rail {
    grid-column: 1; grid-row: 3; align-self: end;
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 24px 0 0 6px; font-size: 12px; line-height: 20px;
  }
  .phone-deck .a-hero .rail .rail-link { padding: 0; margin-left: 32px; font-weight: 700; }
  .phone-deck .a-hero .rail .rail-link .line { display: block; width: 26px; height: 1px; margin-right: 6px; }
  .phone-deck .a-hero .rail > .rail-link + .rail-link { margin-top: 12px; }
  .phone-deck .a-hero .rail .rail-sub { margin: 0; padding: 0 0 22px 56px; font-size: 12px; font-weight: 400; }
  .phone-deck .a-hero .rail .rail-sub li { line-height: 19px; }
  .phone-deck .a-hero .rail .rail-sub .more { display: none; }
  .phone-deck .a-hero .covers {
    grid-column: 2; grid-row: 3; align-self: start;
    width: 34vw; max-width: 184px;
    margin: 6px 8.4vw 0 0; gap: 14px;
  }
  .phone-deck .bio .bio-col { font-weight: 700; padding: 22px 28px 0; text-align: center; line-height: 1.25; }
  /* without .phone-bold only the biography is bold; the press after it is regular */
  .phone-deck:not(.phone-bold) .bio-col .src, .phone-deck:not(.phone-bold) .bio-col .src ~ p { font-weight: 500; }
  /* ---- Joaquim Freire, the mirrored page (her slides 10 to 18) ----
     Same skeleton, discs in a column at the LEFT edge and larger (43% of the
     width), the quotes set towards the left, and the links UNDER the discs
     rather than beside them, at 16 px on a 53 px rule. */
  .phone-deck.side-left .a-hero { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto auto; }
  /* Freire: the whole block left, the rule before ABOUT THE ARTIST (her slide 10; Kevin 2026-09-20) */
  .page-joaquim-freire .phone-deck .a-hero .name-block { text-align: left; padding: 0 12px; }
  .page-joaquim-freire .phone-deck .name-block .eyebrow { flex-direction: row; margin: 0 0 0 90px; }
  .page-joaquim-freire .phone-deck .name-block .eyebrow .line { right: 100%; left: auto; margin: 0 8px 0 0; }
  .phone-deck.side-left .a-hero .quotes { padding: 10px 27% 0 5%; }
  .phone-deck.side-left .a-hero .covers {
    grid-column: 1; grid-row: 3; justify-self: start;
    width: 43vw; max-width: 230px;
    margin: 6px 0 0 7vw;
  }
  .phone-deck.side-left .a-hero .rail {
    grid-column: 1 / -1; grid-row: 4; align-self: start;
    padding: 20px 0 0 20px; font-size: 16px; line-height: 19px;
  }
  .phone-deck.side-left .a-hero .rail .rail-link { margin-left: 61px; }
  .phone-deck.side-left .a-hero .rail .rail-link .line { width: 53px; margin-right: 8px; }
  .phone-deck.side-left .a-hero .rail > .rail-link + .rail-link { margin-top: 19px; }
  .phone-deck.side-left .a-hero .rail .rail-sub { padding: 9px 0 17px 74px; font-size: 16px; }

  /* ---- The remaining artist pages, from her deck (main.phone-flow) ----
     Kevin sent each page's frames on 2026-09-19. Common mechanics: the hero
     is a column and each page orders it; the phone photograph is the deck's
     own crop (tools/mobile-photos.py) so the face is centred with focal 50%;
     only Presto and Idagio under the streaming link; text in px measured off
     her frames (pt x 390 / frame width). Pages whose text sits on a translucent
     panel (Trio Ligeti, Daniel Trio, Julius Drake) drop the page tint. */
  .phone-flow .a-hero { display: flex; flex-direction: column; align-items: stretch; padding-top: var(--deck-top, 69vh); }
  .phone-flow .a-hero .name-block { order: 1; padding: 0 12px; }
  .phone-flow .name-block .eyebrow { margin: 0 0 0 78px; font-size: 15px; }
  .phone-flow .name-block .eyebrow .line { width: 62px; margin: 0 8px 0 0; }
  .phone-flow .name-block .role { text-transform: uppercase; }
  .phone-flow .name-block .credit { display: none; }
  .phone-flow .a-hero .quotes { order: 2; text-align: center; line-height: 1.2; }
  .phone-flow .a-hero .quotes p:last-child { margin-bottom: 0; }
  .phone-flow .a-hero .covers, .phone-flow .a-hero .single-cover { order: 3; align-self: flex-start; }
  .phone-flow .a-hero .rail { order: 4; align-self: stretch; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; }
  .phone-flow .a-hero .rail .rail-link { padding: 0; font-weight: 700; }
  .phone-flow .a-hero .rail .rail-link .line { display: block; height: 1px; }
  .phone-flow .a-hero .rail .rail-sub { margin: 0; font-weight: 400; }
  .phone-flow .a-hero .rail .rail-sub .more { display: none; }
  .phone-flow .bio .bio-col, .phone-flow .member-bio { text-align: center; line-height: 1.2; font-weight: 400; }
  .phone-flow .bio .bio-col .url { font-weight: 700; }

  /* Nicholas Daniel (slides 45-50, frame 513 pt): four press lines centred on
     the first screen above the name; three discs at 61% of the width against
     the left edge; address then biography, its first two words bold. */
  .page-nicholas-daniel .phone-flow .a-hero .quotes { order: 0; padding: 0 30px; font-size: 18px; }
  .page-nicholas-daniel .phone-flow .a-hero .quotes .src { font-size: 17px; }
  .page-nicholas-daniel .phone-flow .a-hero .quotes .src { text-transform: uppercase; }
  .page-nicholas-daniel .phone-flow .a-hero .quotes p:nth-child(5) { display: none; }   /* the Gramophone line is not on her phone frame (slide 45) */
  .page-nicholas-daniel .phone-flow .a-hero .quotes p { margin: 0 0 16px; }
  .page-nicholas-daniel .phone-flow .a-hero .name-block { margin-top: 5vh; }
  .page-nicholas-daniel .phone-flow .name-block .eyebrow { font-size: 17px; margin-left: 84px; }
  .page-nicholas-daniel .phone-flow .name-block .name { font-size: clamp(30px, 11vw, 52px); margin-top: 6px !important; white-space: nowrap; }
  .page-nicholas-daniel .phone-flow .name-block .role { font-size: 23px; }
  .page-nicholas-daniel .phone-flow .a-hero .covers { width: 61vw; max-width: 300px; margin: 12px 0 0 32px; gap: 7px; }
  .page-nicholas-daniel .phone-flow .a-hero .rail { padding: 27px 0 0 41px; font-size: 17px; }
  .page-nicholas-daniel .phone-flow .a-hero .rail .rail-link { margin-left: 59px; }
  .page-nicholas-daniel .phone-flow .a-hero .rail .rail-link .line { width: 44px; margin-right: 15px; }
  .page-nicholas-daniel .phone-flow .a-hero .rail .rail-sub { padding: 2px 0 21px 75px; font-size: 17px; }
  .page-nicholas-daniel .phone-flow .a-hero .rail > .rail-link + .rail-link { margin-top: 13px; }
  .page-nicholas-daniel .phone-flow .bio .bio-col { padding: 71px 35px 0; font-size: 15px; }
  .page-nicholas-daniel .phone-flow .bio .bio-col .url { font-size: 15px; margin-bottom: 35px; }

  /* Marlos Nobre (slides 51-59, frame 583 pt): name at 72vh with his dates
     centred under it, the quote, two discs at 59% centred, the rail, then the
     ten numbered paragraphs, the copyright, then the Vevey photograph (Part 6b). */
  .page-marlos-nobre .phone-flow .name-block .name { font-size: clamp(30px, 10.8vw, 50px); margin-top: 6px !important; white-space: nowrap; }
  .page-marlos-nobre .phone-flow .name-block .role { font-size: 20px; margin-top: 4px !important; }
  .page-marlos-nobre .phone-flow .a-hero .quotes { padding: 35px 24px 0; font-size: 17px; }
  .page-marlos-nobre .phone-flow .a-hero .quotes .years { font-size: 20px; letter-spacing: .04em; margin: 0 0 56px; }
  .page-marlos-nobre .phone-flow .a-hero .quotes .src { font-size: 15px; }
  .page-marlos-nobre .phone-flow .a-hero .covers { align-self: center; width: 59vw; max-width: 300px; margin: 19px 0 0; gap: 56px; }
  .page-marlos-nobre .phone-flow .a-hero .rail { padding: 36px 0 0 36px; font-size: 15px; }
  .page-marlos-nobre .phone-flow .a-hero .rail .rail-link { margin-left: 61px; }
  .page-marlos-nobre .phone-flow .a-hero .rail .rail-link .line { width: 53px; margin-right: 8px; }
  .page-marlos-nobre .phone-flow .a-hero .rail .rail-sub { padding: 2px 0 21px 80px; font-size: 15px; }
  .page-marlos-nobre .phone-flow .a-hero .rail > .rail-link + .rail-link { margin-top: 12px; }
  .page-marlos-nobre .phone-flow .bio .bio-col { padding: 29px 20px 0; font-size: 14px; }
  .page-marlos-nobre .phone-flow .bio .bio-col .numbered li { margin: 0 0 1.2em; }
  /* the Vevey photograph stays at the end: her Part 6b email added it to the phone page */
  .page-marlos-nobre .phone-flow .bio .extra { margin-top: 30px; }

  /* Julius Drake (slides 64-68, frame 554 pt): the New York Times line alone
     at the top of the first screen, name at 77vh, two discs at 56% against the
     left edge, the rail, then his address over a dark panel of biography. */
  .page-julius-drake .phone-flow .a-hero { position: relative; }
  .page-julius-drake .phone-flow .artist-page .page-photo > div, .page-julius-drake .phone-flow .page-photo > div { box-shadow: none; }
  .page-julius-drake .phone-flow .a-hero .quotes { position: absolute; top: 18vh; left: 0; right: 0; padding: 0 30px; font-size: 17px; }
  .page-julius-drake .phone-flow .a-hero .quotes .url { display: none; }
  .page-julius-drake .phone-flow .a-hero .quotes .src { font-size: 14px; }
  .page-julius-drake .phone-flow .a-hero .name-block { padding: 0 12px 0 32px; }
  .page-julius-drake .phone-flow .name-block .eyebrow { margin-left: 66px; }
  .page-julius-drake .phone-flow .name-block .name { font-size: clamp(30px, 10vw, 48px); margin-top: 4px !important; white-space: nowrap; }
  .page-julius-drake .phone-flow .name-block .role { font-size: 22px; margin-top: 2px !important; }
  .page-julius-drake .phone-flow .a-hero .covers { width: 56vw; max-width: 280px; margin: 14px 0 0 23px; gap: 9px; }
  .page-julius-drake .phone-flow .a-hero .rail { padding: 36px 0 0 25px; font-size: 15px; }
  .page-julius-drake .phone-flow .a-hero .rail .rail-link { margin-left: 64px; }
  .page-julius-drake .phone-flow .a-hero .rail .rail-link .line { width: 45px; margin-right: 19px; }
  .page-julius-drake .phone-flow .a-hero .rail .rail-sub { padding: 2px 0 18px 71px; font-size: 15px; }
  .page-julius-drake .phone-flow .a-hero .rail > .rail-link + .rail-link { margin-top: 12px; }
  .page-julius-drake .phone-flow .bio .bio-col { position: relative; padding: 40px 42px 24px; margin: 0 28px; font-size: 14px; }
  .page-julius-drake .phone-flow .bio .bio-col .url { font-size: 14px; margin-bottom: 26px; }
  .page-julius-drake .phone-flow .bio .bio-col::before { content: ''; position: absolute; left: 0; right: 0; top: 78px; bottom: 0; background: rgba(0, 0, 0, .5); z-index: -1; }

  /* Joy Farrall (slides 60-63, frame 554 pt): her own page, name right-aligned
     with the rule after it, one disc at 56% against the right edge, the rail,
     her two addresses, the biography. */
  .page-joy-farrall .phone-flow .a-hero .name-block { text-align: right; padding: 0 10px 0 12px; }
  .page-joy-farrall .phone-flow .name-block .eyebrow { margin: 0 60px 0 0; }
  .page-joy-farrall .phone-flow .name-block .eyebrow .line { right: auto; left: 100%; margin: 0 0 0 8px; width: 52px; }
  .page-joy-farrall .phone-flow .name-block .name { font-size: clamp(30px, 10.5vw, 50px); letter-spacing: .06em; margin-top: 4px !important; white-space: nowrap; }
  .page-joy-farrall .phone-flow .name-block .role { font-size: 21px; margin-top: 4px !important; text-align: right; }
  .page-joy-farrall .phone-flow .a-hero .covers { align-self: flex-end; width: 56vw; max-width: 280px; margin: 36px 10px 0 0; }
  .page-joy-farrall .phone-flow .a-hero .rail { padding: 29px 0 0 83px; font-size: 15px; }
  .page-joy-farrall .phone-flow .a-hero .rail .rail-link { margin-left: 67px; }
  .page-joy-farrall .phone-flow .a-hero .rail .rail-link .line { width: 51px; margin-right: 16px; }
  .page-joy-farrall .phone-flow .a-hero .rail .rail-sub { padding: 2px 0 19px 81px; font-size: 15px; }
  .page-joy-farrall .phone-flow .a-hero .rail > .rail-link + .rail-link { margin-top: 13px; }
  .page-joy-farrall .phone-flow .bio .bio-col { padding: 48px 18px 0; font-size: 14px; }
  .page-joy-farrall .phone-flow .bio .bio-col .url { font-size: 14px; margin: 0 0 10px; }
  .page-joy-farrall .phone-flow .bio .bio-col .url + .url { margin-bottom: 20px; }

  /* The Trio Ligeti (slides 27-34, frame 580 pt): the Osaka prize in gold at
     the top of the first screen, the name at 88vh; then a light grey panel
     carrying name, members and rail; the disc alone on the photograph; then
     one long light panel for the introduction and the three biographies. */
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .page-photo > div { box-shadow: none; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .a-hero { position: relative; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .a-hero .prize { position: absolute; top: 104px; left: 0; right: 0; padding: 0 16px; text-align: center; color: #f4b20b; font-weight: 700; font-size: 19px; line-height: 1.2; text-transform: uppercase; margin: 0; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .a-hero .name-block { background: rgba(198, 198, 198, .5); padding: 14px 12px 0 8px; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .name-block .eyebrow { margin-left: 74px; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .name-block .eyebrow .line { width: 66px; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .name-block .name { font-size: clamp(30px, 11.3vw, 52px); margin-top: 2px !important; white-space: nowrap; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .name-block .member { font-size: clamp(22px, 8.2vw, 38px); line-height: 1.32; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .name-block .member .role { font-size: 20px; margin-left: 12px; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .a-hero .rail { background: rgba(198, 198, 198, .5); margin: 0; padding: 150px 0 12px 100px; font-size: 15px; color: #fff; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .a-hero .rail .rail-link { margin-left: 53px; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .a-hero .rail .rail-link .line { width: 45px; margin-right: 8px; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .a-hero .rail .rail-sub { padding: 2px 0 20px 63px; font-size: 15px; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .a-hero .rail > .rail-link + .rail-link { margin-top: 15px; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .a-hero .single-cover { order: 5; width: 58vw; max-width: 290px; margin: 12px 0 0 99px; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .bio-light { background: rgba(198, 198, 198, .5); color: #fff; margin: 37px 8px 0; padding: 30px 12px 20px; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .bio-light .bio-col { padding: 0; font-size: 14px; font-weight: 700; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .member-bio { padding: 24px 0 0; font-size: 14px; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .member-bio.bold p { font-weight: 400; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .member-bio .member-name { font-size: 24px; font-weight: 400; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .member-bio .member-name .role { font-size: 15px; text-transform: lowercase; margin-left: 8px; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .member-bio .url { font-size: 14px; font-weight: 700; margin: 2px 0 1.4em; }
  .page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .phone-flow .member-bio a { color: #fff; }

  /* The Daniel Trio (slides 35-44, frame 554 pt): ONE photograph for the
     whole page, Nicholas Daniel with the Drake and Farrall pictures laid over
     him, pinned behind everything (Kevin, 2026-09-19); the member sections no
     longer pin their own. Name block right-aligned with the rule after it,
     the Fanfare line left, the disc at 35% left, the rail; then each member
     as "NAME instrument" on the photograph with the text on a dark panel. */
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .page-photo > div { box-shadow: none; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .a-hero .name-block, .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .dt-name { text-align: right; padding: 0 10px 0 12px; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .dt-name .eyebrow { justify-content: flex-end; margin: 0 56px 0 0; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .dt-name .eyebrow .line { right: auto; left: 100%; margin: 0 0 0 8px; width: 48px; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .dt-name .name { font-size: clamp(30px, 11vw, 52px); margin-top: 4px !important; white-space: nowrap; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .dt-name .member { font-size: clamp(20px, 7.2vw, 34px); line-height: 1.32; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .dt-name .member .role { font-size: 21px; margin-left: 10px; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .dt-name .credits { display: flex; text-align: right; align-items: flex-end; font-size: 11px; margin-top: 8px; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .a-hero .quotes { text-align: left; padding: 50px 27px 0; font-size: 15.5px; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .a-hero .quotes .src { font-size: 14px; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .a-hero .single-cover { width: 50vw; max-width: 250px; margin: 16px 0 0 27px; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .a-hero .rail { padding: 27px 0 0 51px; font-size: 15.5px; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .a-hero .rail .rail-link { margin-left: 60px; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .a-hero .rail .rail-link .line { width: 50px; margin-right: 10px; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .a-hero .rail .rail-sub { padding: 2px 0 18px 83px; font-size: 15.5px; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .a-hero .rail > .rail-link + .rail-link { margin-top: 13px; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .photo-section .hero-photo { display: none; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .photo-section { padding: 30px 0 0; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .a-hero + .photo-section { padding-top: 90px; }   /* the hero is a section too, so :first-of-type never matched */
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .photo-section:last-of-type { padding-bottom: 40px; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .photo-section .name-block { text-align: center; padding: 0 12px; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .photo-section .name-block .eyebrow, .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .photo-section .name-block .credit { display: none; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .photo-section .name-block .name, .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .photo-section .name-block .role { display: inline; font-size: 25px !important; margin: 0 !important; white-space: nowrap; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .photo-section .name-block .role { font-size: 15.5px !important; text-transform: lowercase; margin-left: 8px !important; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .photo-section .name-block .name a { color: inherit; text-decoration: none; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .photo-section .bio-col { display: flex; flex-direction: column; background: rgba(0, 0, 0, .5); margin: 12px 26px 0; padding: 20px 14px 6px; font-size: 14px; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .photo-section .bio-col .url, .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .photo-section .bio-col .urls { font-size: 14px; font-weight: 700; line-height: 1.3; margin: 0 0 1.2em; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .a-hero + .photo-section .bio-col .url { order: 1; margin: 0; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .photo-section .bio-col .urls { order: -1; }
  .page-the-daniel-trio-nicholas-daniel-joy-farrall-julius-drake .phone-flow .photo-section .bio-col .urls a { display: block; }

  .layout-ligeti .a-hero { background: #1d1d1d; }
  .layout-ligeti .bio-light .bio-col { padding-top: 28px; }
  .member-bio .member-name { font-size: 24px; }
  .rail-dark { color: #fff; }

  /* catalogue: one column, her deck's lines kept but allowed to wrap, her
     sizes compressed (20 pt -> 15 px, 43 pt -> 25 px) and her gaps halved */
  .cat-frame { padding: 110px 0 48px; min-height: 0; }
  .cat-bg { height: 100%; }
  .cat-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(60,60,60,.25) 0%, rgba(82,82,82,.9) 55%, var(--pg-grey) 100%); }
  .cat-top { display: block; }
  .cat-left { margin: 0 auto; width: 220px; height: auto; }
  .cat-cover { width: 220px; height: 220px; }
  .cat-rail.rail { position: static; flex-direction: column; align-items: flex-start; padding: 0; margin: 16px 0 0; font-size: 14px; }
  .cat-rail .rail-link { margin-left: 44px; }
  .cat-rail > .rail-link, .cat-rail .rail-stream + .rail-link { margin-top: 10px; }
  .cat-rail .rail-link .line { display: block; width: 32px; margin-right: 10px; }   /* the stripes stay: without them phones don't read these as buttons (her email 2026-09-27) */
  .cat-rail .rail-sub { left: 6px; top: calc(100% + 4px); padding: 8px 14px 8px 38px; font-size: 13px; min-width: 220px; }
  .cat-rail .rail-sub li, .cat-rail .rail-sub .more { line-height: 26px; }
  .cat-head { margin: 26px 0 0; width: auto; padding: 0 24px; }
  .cat-prog { margin: 26px 0 0; width: auto; padding: 0 24px; }
  .cat-hl, .cat-pl { white-space: normal; font-size: calc(var(--fs) * 9px + 6px); margin-top: calc(var(--g) * 9px) !important; line-height: 1.25; }
  .cat-hl .fs, .cat-pl .fs { font-size: calc(var(--fs) * 9px + 6px); }
  .cat-reviews { margin: 30px 0 0; width: auto; padding: 0 24px; line-height: 1.4; }
  .cat-reviews .review { font-size: 15px; margin-top: 22px; }
  .cat-reviews .review:first-child { margin-top: 0; }
  .cat-reviews .rv-p { margin-top: calc(var(--g) * 9px); }
  .cat-reviews .rl { display: inline; white-space: normal; }
  .cat-reviews .src { white-space: normal; }

  /* information pages */
  .info-page { min-height: 100vh; }
  .info-frame { padding: 110px 24px 60px !important; display: flex; flex-direction: column; }
  .info-title { font-size: clamp(34px, 10vw, 52px); margin-left: 0 !important; }
  .info-about .about-map { position: static; width: min(100%, 440px); height: auto; margin: 0 0 18px auto; order: -1; }
  .info-about .about-text { width: auto; max-width: none; margin: 16px 0 0; font-size: 16px; line-height: 1.5; }
  .info-about .about-free { margin: 8px 0 0; font-size: 13px; }
  .info-about .about-free .line { display: block; position: static; flex: none; width: 30px; margin-right: 10px; }
  .info-streaming .stream-lead, .info-streaming .stream-try { width: auto; max-width: none; margin: 18px 0 0; font-size: 16px; }
  .info-streaming .stream-discover .line, .info-streaming .stream-buy .line { display: block; position: static; flex: none; width: 30px; margin-right: 10px; }   /* stripes = buttons (her email 2026-09-27) */
  .info-streaming .stream-platforms { width: auto; height: auto; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; font-size: 13px; }
  .info-streaming .stream-platforms .line { display: none; }
  .info-streaming .stream-platforms li { position: static; }
  .info-streaming .stream-discover, .info-streaming .stream-buy { margin: 14px 0 0; font-size: 13px; }
  .info-streaming .stream-buy { margin-top: 34px !important; }
  .info-streaming .stream-free { margin: 4px 0 0; font-size: 12px; }

  .info-contact .contact-org { font-size: 15px; margin-top: 12px; }
  .info-contact .xd-form { width: min(100%, 440px); max-width: none; margin: 28px auto 0; }
  .info-contact .xd-form .field { font-size: 16px; height: auto; flex-direction: column; align-items: stretch; gap: 4px; margin-bottom: 18px; }
  .info-contact .xd-form .field > span { flex: none; padding: 0; }
  .info-contact .xd-form .field textarea { height: 110px; margin-top: 6px; }
  .info-contact .xd-form .field-check { font-size: 12px; margin: 4px 0 0; }
  .info-contact .xd-form .field-check input { width: 14px; height: 14px; }
  .info-contact .xd-form .send-btn-xd { margin-top: 22px; font-size: 14px; }
}

/* ---- Every artist page on a TABLET, portrait (600-860 px). Her frames for
   Mebes and Freire (Kevin, 2026-09-20; 565 px wide, so px = frame x 1.36 at
   768): photograph untinted; screen 1 has the press in the right column and
   the name block low and RIGHT-aligned, the rule before ABOUT THE ARTIST;
   then the discs in one column at the right edge (Mebes: two columns), the
   three link lines alone at 61% of the width, the biography centred in
   regular weight, the press, the copyright, then a full screen of the artist
   (main::after) before the footer. The other pages follow the same grammar. */
@media (min-width: 600px) and (max-width: 860px) {
  /* every selector below is prefixed with the body class four times: the
     per-page phone rules carry up to six classes and this block must win */
  .subpage.subpage.subpage.subpage .artist-page .page-photo > div { box-shadow: none; }
  .subpage.subpage.subpage.subpage .artist-page .a-hero, .subpage.subpage.subpage.subpage .artist-page[class*="phone-"] .a-hero {
    display: flex; flex-direction: column; align-items: stretch;
    padding: 0 0 28px; min-height: 100vh;
  }
  .subpage.subpage.subpage.subpage .artist-page .a-hero .name-block {
    order: 1; margin-top: calc(100vh - 160px); padding: 0 1.5% 0 8px;
    text-align: right; background: none;
  }
  .subpage.subpage.subpage.subpage .artist-page .name-block .eyebrow { justify-content: flex-end; flex-direction: row; margin: 0; font-size: 15px; }
  .subpage.subpage.subpage.subpage .artist-page .name-block .eyebrow .line { right: 100%; left: auto; width: 62px; margin: 0 8px 0 0; }
  .subpage.subpage.subpage.subpage .artist-page .name-block .name, .subpage.subpage.subpage.subpage .artist-page .name-block h1[style] { font-size: 7vw !important; margin-top: 2px !important; white-space: nowrap; letter-spacing: 0; }
  .subpage.subpage.subpage.subpage .artist-page .name-block .member { font-size: 4vw; }
  .subpage.subpage.subpage.subpage .artist-page .name-block .role { font-size: 19px; margin: 6px 1.5% 0 0 !important; text-align: right; text-transform: uppercase; }
  .subpage.subpage.subpage.subpage .artist-page .name-block .credit, .subpage.subpage.subpage.subpage .artist-page .name-block .credits { display: none; }
  .subpage.subpage.subpage.subpage .artist-page .a-hero .quotes, .subpage.subpage.subpage.subpage .artist-page .a-hero .duo-top, .subpage.subpage.subpage.subpage .artist-page .a-hero .prize {
    position: absolute; top: 12vh; left: 53%; right: 3.5%;
    padding: 0; margin: 0; text-align: center; font-size: 16px; line-height: 1.2;
  }
  .subpage.subpage.subpage.subpage .artist-page .a-hero .quotes p { margin: 0 0 32px; }
  .subpage.subpage.subpage.subpage .artist-page .a-hero .quotes p:last-child, .subpage.subpage.subpage.subpage .artist-page .a-hero .quotes .url { display: block; }
  .subpage.subpage.subpage.subpage .artist-page .a-hero .quotes .years { font-size: 19px; }
  .subpage.subpage.subpage.subpage .artist-page .a-hero .prize { color: #f4b20b; font-weight: 700; text-transform: uppercase; font-size: 18px; }
  .subpage.subpage.subpage.subpage .artist-page .a-hero .covers, .subpage.subpage.subpage.subpage .artist-page .a-hero .single-cover {
    order: 2; align-self: flex-end;
    display: flex; flex-direction: column; gap: 1.2vw;
    width: 22vw; max-width: none; margin: 4vh 2% 0 0; padding: 0;
  }
  .subpage.subpage.subpage.subpage .artist-page .a-hero .covers a { width: 100%; flex: none; }
  .subpage.subpage.subpage.subpage .artist-page .a-hero .rail {
    order: 3; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start;
    gap: 0; margin: 0; padding: 3.5vh 0 0 61%; font-size: 13px; line-height: 24px; background: none;
  }
  .subpage.subpage.subpage.subpage .artist-page .a-hero .rail .rail-link { margin: 0 0 0 46px; padding: 0; font-weight: 700; }
  .subpage.subpage.subpage.subpage .artist-page .a-hero .rail .rail-link .line { display: block; width: 37px; height: 1px; margin-right: 9px; }
  .subpage.subpage.subpage.subpage .artist-page .a-hero .rail .rail-sub { display: none; }   /* her frames show the three lines alone */
  .subpage.subpage.subpage.subpage .artist-page .bio, .subpage.subpage.subpage.subpage .artist-page .bio-light { margin: 0; background: none; }
  .subpage.subpage.subpage.subpage .artist-page .bio .bio-col, .subpage.subpage.subpage.subpage .artist-page .member-bio, .subpage.subpage.subpage.subpage .artist-page .photo-section .bio-col {
    margin: 0; padding: 5vh 12% 0 14%; font-size: 15.5px; font-weight: 400; line-height: 1.25; text-align: center; background: none;
  }
  .subpage.subpage.subpage.subpage .artist-page .bio .bio-col p, .subpage.subpage.subpage.subpage .artist-page .bio .bio-col .src, .subpage.subpage.subpage.subpage .artist-page .bio .bio-col .src ~ p, .subpage.subpage.subpage.subpage .artist-page .member-bio p { font-weight: 400; }
  .subpage.subpage.subpage.subpage .artist-page .bio .bio-col .url, .subpage.subpage.subpage.subpage .artist-page .bio .bio-col .urls, .subpage.subpage.subpage.subpage .artist-page .member-bio .url { font-weight: 700; }
  .subpage.subpage.subpage.subpage .artist-page .photo-section .name-block { margin-top: 0; text-align: center; padding-top: 5vh; }
  .subpage.subpage.subpage.subpage .artist-page .photo-section .bio-col { margin: 2vh 12% 0 14%; padding: 0; }

  /* Susanne Mebes: five discs in two columns, the fifth in the right column */
  .subpage.subpage.subpage.subpage.page-susanne-mebes .artist-page .a-hero .covers {
    display: grid; grid-template-columns: repeat(2, 23vw); width: auto;
  }
  .subpage.subpage.subpage.subpage.page-susanne-mebes .artist-page .a-hero .covers a:nth-child(5) { grid-column: 2; }
  .subpage.subpage.subpage.subpage.page-susanne-mebes .artist-page .bio .bio-col { padding-left: 17%; padding-right: 10%; }
  /* Joaquim Freire: the two quotes sit lower, beside his face */
  .subpage.subpage.subpage.subpage.page-joaquim-freire .artist-page .a-hero .quotes { top: 45vh; }
  /* Marlos Nobre keeps his numbered list; Julius Drake's address under the quote */
  /* Nicholas Daniel and Marlos Nobre on a tablet (Kevin's frames, 2026-09-23,
     557 px wide so x 1.38 at 768): the name block LEFT with the rule first and
     a name at ~10vw; Nicholas shows his photo credit, keeps his press in the
     left column and stacks discs and buttons at the left; Marlos keeps his
     quote top right and his discs at the right with the buttons under them. */
  .subpage.subpage.subpage.subpage.page-nicholas-daniel .artist-page .a-hero .name-block, .subpage.subpage.subpage.subpage.page-marlos-nobre .artist-page .a-hero .name-block { text-align: left; padding: 0 0 0 21px; }
  .subpage.subpage.subpage.subpage.page-nicholas-daniel .artist-page .name-block .eyebrow, .subpage.subpage.subpage.subpage.page-marlos-nobre .artist-page .name-block .eyebrow { margin: 0 0 0 117px; font-size: 15px; }
  .subpage.subpage.subpage.subpage.page-nicholas-daniel .artist-page .name-block .eyebrow .line, .subpage.subpage.subpage.subpage.page-marlos-nobre .artist-page .name-block .eyebrow .line { width: 96px; margin: 0 12px 0 0; }
  .subpage.subpage.subpage.subpage.page-nicholas-daniel .artist-page .name-block .name, .subpage.subpage.subpage.subpage.page-marlos-nobre .artist-page .name-block .name { font-size: 9.2vw !important; line-height: 1; margin-top: 4px !important; }
  .subpage.subpage.subpage.subpage.page-nicholas-daniel .artist-page .name-block .role, .subpage.subpage.subpage.subpage.page-marlos-nobre .artist-page .name-block .role { text-align: left; margin: 4px 0 0 !important; font-size: 15px; }
  .subpage.subpage.subpage.subpage.page-nicholas-daniel .artist-page .a-hero .name-block { margin-top: calc(100vh - 185px); }
  .subpage.subpage.subpage.subpage.page-nicholas-daniel .artist-page .name-block .credit { display: block; margin-top: 6px; font: 12px/1.2 'Helvetica Neue', Arial, sans-serif; color: rgba(255,255,255,.72); }
  .subpage.subpage.subpage.subpage.page-nicholas-daniel .artist-page .a-hero .quotes { top: 50vh; left: 3%; right: 55%; font-size: 17px; }
  .subpage.subpage.subpage.subpage.page-nicholas-daniel .artist-page .a-hero .quotes p { margin: 0 0 20px; }
  .subpage.subpage.subpage.subpage.page-nicholas-daniel .artist-page .a-hero .quotes p:nth-child(5) { display: none; }   /* four quotes on her frame */
  .subpage.subpage.subpage.subpage.page-nicholas-daniel .artist-page .name-block .role { font-size: 19px; }
  .subpage.subpage.subpage.subpage.page-nicholas-daniel .artist-page .a-hero .covers { align-self: flex-start; width: 42vw; margin: 8vh 0 0 7.7%; gap: 11px; }
  .subpage.subpage.subpage.subpage.page-nicholas-daniel .artist-page .a-hero .rail { padding: 5vh 0 0 44px; font-size: 12.5px; line-height: 19px; }
  .subpage.subpage.subpage.subpage.page-nicholas-daniel .artist-page .a-hero .rail .rail-link { margin-left: 48px; }
  .subpage.subpage.subpage.subpage.page-nicholas-daniel .artist-page .a-hero .rail .rail-link .line { width: 39px; margin-right: 9px; }
  .subpage.subpage.subpage.subpage.page-nicholas-daniel .artist-page .bio .bio-col { padding: 7vh 6% 0; font-size: 16.5px; line-height: 1.3; }
  .subpage.subpage.subpage.subpage.page-nicholas-daniel .artist-page .bio .bio-col .url { font-size: 16.5px; margin-bottom: 1.6em; }

  .subpage.subpage.subpage.subpage.page-marlos-nobre .artist-page .a-hero .name-block { margin-top: 31vh; }   /* high on screen 1, her frame */
  .subpage.subpage.subpage.subpage.page-marlos-nobre .artist-page .name-block .role { font-size: 14px; letter-spacing: .03em; }
  .subpage.subpage.subpage.subpage.page-marlos-nobre .artist-page .a-hero .quotes { display: none; }   /* no quote on her tablet frames */
  .subpage.subpage.subpage.subpage.page-marlos-nobre .artist-page .a-hero .covers { width: 32vw; margin: 12vh 7% 0 0; gap: 14px; }
  .subpage.subpage.subpage.subpage.page-marlos-nobre .artist-page .a-hero .rail { padding: 6vh 0 0 58%; font-size: 13px; line-height: 23px; }
  .subpage.subpage.subpage.subpage.page-marlos-nobre .artist-page .a-hero .rail .rail-link { margin-left: 49px; }
  .subpage.subpage.subpage.subpage.page-marlos-nobre .artist-page .a-hero .rail .rail-link .line { width: 41px; margin-right: 8px; }
  .subpage.subpage.subpage.subpage.page-marlos-nobre .artist-page .bio .bio-col { padding: 7vh 5% 0; font-size: 17.5px; line-height: 1.25; }
  .subpage.subpage.subpage.subpage.page-marlos-nobre .artist-page .bio .bio-col .numbered li { margin: 0 0 1.5em; }
  /* Trio Ligeti on a tablet (Kevin's frames, 2026-09-23): the trio photo without
     the phone crop's sky strip, no grey panels; the gold prize centred at 53%,
     the name block large and low on screen 1; the disc centred at 38% with the
     buttons under it; bold introduction, then each member centred. */
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .page-photo > div { background-position: 50% 100%; }
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .a-hero .prize { top: 52vh; left: 4%; right: 4%; font-size: 29px; font-weight: 400; line-height: 1.2; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .a-hero .name-block { margin-top: calc(100vh - 330px); text-align: left; padding: 0 0 0 36px; }
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .name-block .eyebrow { margin: 0 0 0 96px; font-size: 15px; }
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .name-block .eyebrow .line { width: 84px; margin: 0 10px 0 0; }
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .name-block .name { font-size: 10.6vw !important; line-height: 1.05; }
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .name-block .members { margin-top: 4px; }
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .name-block .member { font-size: 7.4vw; line-height: 1.12; white-space: nowrap; }
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .name-block .member .role { font-size: 20px; margin-left: 12px; }
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .a-hero .single-cover { align-self: center; width: 38vw; margin: 8vh 0 0; }
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .a-hero .rail { padding: 3vh 0 0 30%; color: #fff; }
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .bio-light .bio-col { padding: 8vh 7% 0; font-size: 18px; font-weight: 700; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.75); }
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .bio-light .bio-col p { font-weight: 700; }
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .member-bio { padding: 8vh 7% 0; font-size: 17px; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.75); }
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .member-bio .member-name { font-size: 34px; font-weight: 400; color: #fff; }
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .member-bio .member-name .role { font-size: 20px; text-transform: none; }
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .member-bio .url { font-size: 17px; }
  .subpage.subpage.subpage.subpage.page-the-string-trio-ligeti-igor-keller-silvia-simionescu-diana-ligeti .artist-page .member-bio a { color: #fff; }

  /* Joy Farrall on a tablet (her frames): the disc large against the right edge,
     the buttons under it from 58%, the Britten Sinfonia address first, then a
     centred regular biography. */
  .subpage.subpage.subpage.subpage.page-joy-farrall .artist-page .a-hero .covers { width: 42vw; margin: 4vh 0 0 0; }
  .subpage.subpage.subpage.subpage.page-joy-farrall .artist-page .a-hero .rail { padding-left: 55%; }
  .subpage.subpage.subpage.subpage.page-joy-farrall .artist-page .bio .bio-col { display: flex; flex-direction: column; padding: 8vh 7% 0; font-size: 18px; line-height: 1.3; }
  .subpage.subpage.subpage.subpage.page-joy-farrall .artist-page .bio .bio-col .url { font-size: 17px; margin: 0 0 12px; }
  .subpage.subpage.subpage.subpage.page-joy-farrall .artist-page .bio .bio-col .url:nth-of-type(2) { order: -1; }
  /* Julius Drake on a tablet (Kevin's frames, 2026-09-23, 566 px wide): the New
     York Times line centred at the top, the name block low and LEFT with the
     rule first and the credit, the two discs at 33% against the left with the
     buttons under them, then his address and a centred biography on the photo. */
  .subpage.subpage.subpage.subpage.page-julius-drake .artist-page .a-hero .quotes { top: 6vh; left: 10%; right: 10%; font-size: 18px; }
  .subpage.subpage.subpage.subpage.page-julius-drake .artist-page .a-hero .quotes .url { display: none !important; }
  .subpage.subpage.subpage.subpage.page-julius-drake .artist-page .a-hero .quotes .src { font-size: 15px; display: inline-block; margin-top: 12px; }
  .subpage.subpage.subpage.subpage.page-julius-drake .artist-page .a-hero .name-block { margin-top: calc(100vh - 170px); text-align: left; padding: 0 0 0 22px; }
  .subpage.subpage.subpage.subpage.page-julius-drake .artist-page .name-block .eyebrow { margin: 0 0 0 110px; font-size: 16px; }
  .subpage.subpage.subpage.subpage.page-julius-drake .artist-page .name-block .eyebrow .line { width: 96px; margin: 0 12px 0 0; }
  .subpage.subpage.subpage.subpage.page-julius-drake .artist-page .name-block .name { font-size: 8.8vw !important; line-height: 1; margin-top: 2px !important; }
  .subpage.subpage.subpage.subpage.page-julius-drake .artist-page .name-block .role { text-align: left; font-size: 15px; font-weight: 700; margin: 10px 0 0 5px !important; }
  .subpage.subpage.subpage.subpage.page-julius-drake .artist-page .name-block .credit { display: block; margin-top: 8px; font: 14px/1.2 'Helvetica Neue', Arial, sans-serif; color: rgba(255,255,255,.7); }
  .subpage.subpage.subpage.subpage.page-julius-drake .artist-page .a-hero .covers { align-self: flex-start; width: 33vw; margin: 5vh 0 0 5.3%; gap: 12px; }
  .subpage.subpage.subpage.subpage.page-julius-drake .artist-page .a-hero .rail { padding: 3vh 0 0 50px; font-size: 13px; line-height: 30px; }
  .subpage.subpage.subpage.subpage.page-julius-drake .artist-page .a-hero .rail .rail-link { margin-left: 40px; }
  .subpage.subpage.subpage.subpage.page-julius-drake .artist-page .a-hero .rail .rail-link .line { width: 30px; margin-right: 10px; }
  .subpage.subpage.subpage.subpage.page-julius-drake .artist-page .bio .bio-col { padding: 8vh 9% 0; font-size: 17.5px; line-height: 1.25; }
  .subpage.subpage.subpage.subpage.page-julius-drake .artist-page .bio .bio-col::before { display: none; }
  .subpage.subpage.subpage.subpage.page-julius-drake .artist-page .bio .bio-col .url { font-size: 17.5px; margin-bottom: .8em; }
  .subpage.subpage.subpage.subpage.page-marlos-nobre .artist-page .bio .extra { margin: 20px auto 0; width: 88%; font-size: 15px; }
}

@media (max-width: 480px) {
  .covers a { width: 84px; height: 84px; }
  .rail { gap: 4px 20px; }
}

/* ============================================================
   SHOP: cart, checkout, confirmation  +  404
   Same language as the contact page: lake photo, Optima,
   underline fields, rule-link buttons.
   ============================================================ */
.nav-cart { position: relative; }
.cart-count {
  position: absolute; top: -.45rem; right: -.75rem;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  border-radius: 1rem; background: #fff; color: #2b3138;
  font-size: .7rem; font-weight: 700; line-height: 1.15rem; text-align: center;
}
.cart-toast {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 300;
  display: flex; align-items: center; gap: .9rem;
  width: min(24rem, calc(100vw - 3rem)); padding: .8rem .9rem;
  background: rgba(18,24,29,.92); color: #fff; backdrop-filter: blur(10px);
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,.4);
  transform: translateY(1.5rem); opacity: 0; pointer-events: none;
  transition: transform .35s ease, opacity .35s ease;
  font-family: 'Optima', 'Optima nova', 'Segoe UI', system-ui, sans-serif;
}
.cart-toast.show { transform: none; opacity: 1; pointer-events: auto; }
.cart-toast img { width: 3rem; height: 3rem; object-fit: cover; flex: none; }
.cart-toast div { flex: 1; min-width: 0; }
.cart-toast .ct-title { margin: 0; font-size: .8rem; font-weight: 500; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-toast .ct-sub { margin: .15rem 0 0; font-size: .72rem; opacity: .8; }
.cart-toast .ct-link { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; border-bottom: .05rem solid rgba(255,255,255,.6); }

.shop-page { position: relative; min-height: 100vh; overflow: hidden; background: var(--pg-grey); padding: 12rem 0 7rem; }
.shop-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,38,44,.35) 0%, rgba(30,38,44,.6) 100%); }
.shop-frame { position: relative; z-index: 2; width: min(66rem, calc(100% - 4rem)); margin: 0 auto; text-shadow: 0 .05rem .8rem rgba(0,0,0,.45); }
.shop-title { position: static; text-align: center; }
.shop-sub { text-align: center; margin: .8rem 0 0; font-size: .9rem; font-weight: 500; letter-spacing: .16em; }
.shop-cta, .shop-secondary { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.shop-secondary { font-weight: 500; opacity: .85; }
.shop-page .rail-link .line { width: 2.6rem; }

/* cart */
.cart-root { margin-top: 3rem; }
.cart-rows { border-top: .05rem solid rgba(255,255,255,.45); }
.cart-row {
  display: grid; grid-template-columns: 6.5rem 1fr auto 6rem 2rem; align-items: center; gap: 1.4rem;
  padding: 1.3rem 0; border-bottom: .05rem solid rgba(255,255,255,.45);
}
.cart-cover img { width: 6.5rem; height: 6.5rem; object-fit: cover; display: block; }
.cart-body h3 { margin: 0; font-size: 1.05rem; font-weight: 500; line-height: 1.25; }
.cart-body h3 a:hover { font-weight: 700; }
.cart-lc { margin: .3rem 0 0; font-size: .8rem; letter-spacing: .08em; opacity: .85; }
.cart-unit { margin: .3rem 0 0; font-size: .9rem; }
.cart-qty { display: inline-flex; align-items: center; border: .05rem solid rgba(255,255,255,.7); }
.cart-qty button { width: 1.8rem; height: 1.8rem; background: none; border: 0; color: #fff; font: inherit; font-size: 1.1rem; cursor: pointer; }
.cart-qty button:hover { background: rgba(255,255,255,.12); }
.cart-qty span { min-width: 1.8rem; text-align: center; font-size: .95rem; font-weight: 500; }
.cart-line { margin: 0; text-align: right; font-size: 1.05rem; font-weight: 500; }
.cart-remove { background: none; border: 0; color: #fff; font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: .7; }
.cart-remove:hover { opacity: 1; }
.cart-summary { margin: 1.6rem 0 0 auto; width: min(24rem, 100%); }
.sum-line { display: flex; justify-content: space-between; padding: .45rem 0; font-size: .95rem; }
.sum-total { border-top: .05rem solid rgba(255,255,255,.45); margin-top: .4rem; padding-top: .9rem; font-size: 1.2rem; font-weight: 700; }
.cart-summary .shop-cta { margin: 1.6rem 0 0 3.5rem; }
.cart-summary .shop-secondary { margin: .4rem 0 0 3.5rem; display: inline-flex; }
.cart-empty { text-align: center; padding: 3rem 0; font-size: 1.2rem; }
.cart-empty .rail-link { margin: 1.4rem 0 0 3.5rem; font-size: 1rem; font-weight: 700; text-transform: uppercase; }

/* checkout */
.checkout-grid { display: grid; grid-template-columns: 1fr 22rem; gap: 4rem; margin-top: 3rem; align-items: start; }
.checkout-form { max-width: none; margin: 0; }
.checkout-form fieldset { border: 0; padding: 0; margin: 0 0 2.4rem; min-width: 0; }
.checkout-form legend { font-size: 1.35rem; font-weight: 500; margin-bottom: .6rem; padding: 0; }
.checkout-form .field { display: flex; flex-direction: column; align-items: stretch; gap: .2rem; margin: 0 0 1.1rem; }
.checkout-form .field > span { width: auto; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.checkout-form .field input, .checkout-form .field select {
  background: transparent; border: 0; border-bottom: .05rem solid rgba(255,255,255,.75); border-radius: 0;
  color: #fff; font: inherit; font-size: 1.05rem; padding: .35rem 0; outline: none; box-shadow: none; width: 100%;
}
.checkout-form .field select option { color: #1c2126; }
.checkout-form .field input:focus, .checkout-form .field select:focus { border-color: #fff; }
.checkout-form .field input::placeholder { color: rgba(255,255,255,.4); }
.checkout-form .field-row { display: flex; gap: 1.4rem; }
.checkout-form .field-row .field { flex: 1; }
.checkout-form .field-row .field-short { flex: 0 0 8rem; }
.checkout-form .field-note { font-size: .82rem; opacity: .8; margin: -.2rem 0 0; }
.pay-option { display: grid; grid-template-columns: 1.2rem 1fr; column-gap: .8rem; align-items: center; padding: .7rem 0; border-top: .05rem solid rgba(255,255,255,.3); cursor: pointer; }
.pay-option:last-of-type { border-bottom: .05rem solid rgba(255,255,255,.3); }
.pay-option input { width: 1rem; height: 1rem; margin: 0; accent-color: #fff; grid-row: span 2; }
.pay-name { font-size: 1.05rem; font-weight: 500; }
.pay-hint { font-size: .8rem; opacity: .75; grid-column: 2; }
.pay-card { padding: .6rem 0 .4rem 2rem; }
.pay-card[hidden] { display: none; }
.checkout-form .field-check { display: flex; align-items: flex-start; gap: .6rem; font-size: .8rem; color: #fff; margin: 0 0 1.6rem; }
.checkout-form .field-check input { margin-top: .2rem; accent-color: #fff; }
.checkout-form .shop-cta { margin-left: 3.5rem; background: none; border: 0; color: #fff; cursor: pointer; padding: .45rem 0; font-family: inherit; }
.checkout-form .form-status { text-align: left; margin-top: .8rem; font-size: .9rem; min-height: 1.2em; }
.checkout-summary { position: sticky; top: 7rem; padding: 1.6rem 1.6rem 1.4rem; background: rgba(18,24,29,.42); backdrop-filter: blur(8px); }
.sum-title { margin: 0 0 1rem; font-size: 1.2rem; font-weight: 500; }
.sum-item { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: .05rem solid rgba(255,255,255,.2); }
.sum-item img { width: 3rem; height: 3rem; object-fit: cover; flex: none; }
.sum-item div { flex: 1; min-width: 0; }
.sum-name { margin: 0; font-size: .82rem; font-weight: 500; line-height: 1.2; }
.sum-lc { margin: .15rem 0 0; font-size: .72rem; opacity: .8; }
.sum-amount { font-size: .9rem; font-weight: 500; white-space: nowrap; }
.checkout-summary .sum-line:first-of-type { margin-top: .6rem; }
.sum-edit { display: inline-block; margin-top: .8rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; border-bottom: .05rem solid rgba(255,255,255,.6); }
.sum-empty { margin: 0 0 1rem; }

/* confirmation */
.confirmation-root { margin-top: 2rem; text-align: center; }
.conf-number { font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin: 0; }
.conf-text { max-width: 38rem; margin: 1rem auto 0; font-size: 1.05rem; line-height: 1.5; }
.conf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin: 2.5rem auto 0; max-width: 46rem; text-align: left; }
.conf-address p { margin: 0; font-size: 1rem; line-height: 1.5; }
.conf-summary { position: static; }
.confirmation-root .shop-cta { margin: 2.5rem 0 0 3.5rem; }

/* 404 */
.notfound-page { position: relative; min-height: 100vh; overflow: hidden; background: var(--pg-grey); display: flex; align-items: center; justify-content: center; padding: 8rem 2rem 6rem; }
.notfound-frame { position: relative; z-index: 2; text-align: center; text-shadow: 0 .05rem .8rem rgba(0,0,0,.45); max-width: 40rem; }
.notfound-logo { width: 12rem; margin: 0 auto 2.5rem; opacity: .95; }
.notfound-code { margin: 0; font-size: 7rem; font-weight: 400; line-height: 1; letter-spacing: .04em; }
.notfound-title { margin: 1rem 0 0; font-size: 2rem; font-weight: 400; line-height: 1.15; }
.notfound-text { margin: 1rem auto 0; max-width: 30rem; font-size: 1.05rem; line-height: 1.5; opacity: .92; }
.notfound-links { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-top: 2.2rem; }
.notfound-links .rail-link { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }

@media (max-width: 860px) {
  .cart-count { top: -4px; right: -8px; min-width: 16px; height: 16px; font-size: 10px; line-height: 16px; }
  .cart-toast { right: 12px; left: 12px; bottom: 12px; width: auto; }
  .cart-toast img { width: 44px; height: 44px; }
  .shop-page { padding: 110px 0 60px; }
  .shop-frame { width: auto; margin: 0 24px; }
  .cart-row { grid-template-columns: 72px 1fr; grid-template-rows: auto auto; gap: 8px 14px; }
  .cart-cover img { width: 72px; height: 72px; }
  .cart-qty { grid-column: 2; justify-self: start; }
  .cart-line { grid-column: 2; grid-row: 2; justify-self: end; }
  .cart-remove { grid-column: 1; grid-row: 2; justify-self: start; }
  .cart-summary { width: 100%; }
  .cart-summary .shop-cta, .cart-summary .shop-secondary, .cart-empty .rail-link, .checkout-form .shop-cta, .confirmation-root .shop-cta { margin-left: 0; }
  .shop-page .rail-link .line, .notfound-links .rail-link .line { display: none; }
  .checkout-grid { grid-template-columns: 1fr; gap: 28px; }
  .checkout-summary { position: static; order: -1; padding: 16px; }
  .checkout-form .field-row { flex-direction: column; gap: 0; }
  .checkout-form .field-row .field-short { flex: none; }
  .conf-grid { grid-template-columns: 1fr; gap: 20px; }
  .notfound-code { font-size: 84px; }
  .notfound-title { font-size: 24px; }
  .notfound-logo { width: 180px; }
}

/* ============================================================
   ORDER PAGE = "Our Collection" (XD l-man-classics-our-compact-discs)
   1920×1080 screen: title top-left, four discs per row (273 px covers
   on a 400 px pitch), rail aligned across the row. Photo pinned.
   ============================================================ */
.collection-page { position: relative; min-height: 100vh; padding: 0 0 6rem; }
.collection-page .hero-photo { position: fixed; inset: 0; z-index: 0; background-position: center center; }
.collection-head { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 0; padding-top: 20.2vh; text-shadow: 0 .05rem .8rem rgba(0,0,0,.45); }
.collection-head .info-title { position: static; margin-left: 5.8rem; }
.collection-free { position: relative; margin: 0 0 0 9.5rem; font-size: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.collection-free .line { position: absolute; right: 100%; top: 50%; width: 3.4rem; height: .05rem; margin-right: .9rem; background: currentColor; opacity: .85; }
.collection-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 13.65rem); column-gap: 6.35rem; row-gap: 4rem;
  margin: 3.9vh 0 0 8rem;
  text-shadow: 0 .05rem .6rem rgba(0,0,0,.45);
}
.disc { display: grid; grid-template-rows: 13.65rem 13.45rem auto; }
.disc-cover { display: block; width: 13.65rem; height: 13.65rem; overflow: hidden; }
.disc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.disc-cover:hover img { transform: scale(1.04); }
.disc-info { padding-top: .5rem; }
.disc-title { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.disc-title .lw { font-weight: 400; text-transform: none; }
.disc-title a:hover { font-weight: 700; }
.disc-cd { margin: 1.25em 0 0; font-size: 1.1rem; font-weight: 700; }
.disc-rail { display: flex; flex-direction: column; align-items: flex-start; margin-left: 4rem; font-size: .9rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; }
.disc-rail .rail-link { padding: .5rem 0; }
.disc-rail .rail-link .line { width: 3.4rem; margin-right: .75rem; }
.disc-rail .disc-buy { transition: transform .3s ease; }
.disc-rail .disc-buy:hover { transform: translateX(.8rem); }
.disc-rail .rail-stream { align-items: flex-start; }
.disc-rail .rail-sub { padding-left: 1.2rem; font-size: .9rem; font-weight: 500; }
.disc-rail .rail-sub li { line-height: 1.35rem; }
.disc-rail .rail-stream:hover .rail-sub .more, .disc-rail .rail-stream:focus-within .rail-sub .more { max-height: 1.6rem; }
.disc-rail .rail-stream:hover .rail-sub li, .disc-rail .rail-stream:focus-within .rail-sub li { line-height: 1.5rem; }
@media (max-width: 1240px) and (min-width: 861px) {
  .collection-grid { grid-template-columns: repeat(3, 13.65rem); column-gap: 5rem; }
}
@media (max-width: 860px) {
  .collection-page { padding: 100px 24px 60px; }
  .collection-page .hero-photo { position: absolute; }
  .collection-head { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 0; }
  .collection-head .info-title { margin: 0; font-size: clamp(34px, 10vw, 52px); }
  .collection-free { margin: 0; font-size: 13px; }
  .collection-free .line { display: none; }
  .collection-grid { grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 34px; margin: 26px 0 0; }
  .disc { grid-template-rows: auto; }
  .disc-cover { width: 100%; height: auto; aspect-ratio: 1; }
  .disc-title { font-size: 14px; }
  .disc-cd { font-size: 13px; margin-top: 10px; }
  .disc-rail { margin: 8px 0 0; font-size: 12px; }
  .disc-rail .rail-link { margin-left: 34px; }
  .disc-rail .rail-link .line { display: block; width: 26px; margin-right: 8px; }   /* her 2026-09-27 email: stripes make them buttons */
  .disc-rail .rail-sub { margin-left: 34px; }
  .disc-rail .rail-sub { padding-left: 0; font-size: 11px; }
  .disc-rail .rail-sub .more { display: none; }
}
@media (max-width: 480px) { .collection-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PINNED PHOTOS: the photo stays, the text scrolls over it.
   No solid bands under the text (Kevin, 2026-09-10). Above 860px only;
   phones keep the stacked layout since fixed backgrounds stutter there.
   ============================================================ */
@media (min-width: 861px) {
  /* one-photo pages: the photograph behind the whole page is .page-photo (sticky,
     released at the end of <main>). The hero's own copy used to be position: fixed
     here, which escapes its section and stayed glued to the viewport until the
     footer covered it; that was the "footer over the artist" Kevin saw (2026-09-20). */
  .artist-page .a-hero { overflow: visible; }
  .artist-page .a-hero .hero-photo { display: none; }
  .artist-page .page-photo > div { background-position: center 20%; }
  .artist-page .bio, .layout-duo .bio, .layout-ligeti .bio-light { background: transparent; position: relative; z-index: 1; }
  /* Mebes & Freire: the XD lays the bio on the label's grey-blue (#a3a8ab);
     as a veil over the pinned photo it keeps the couple visible and the text readable,
     fading in from the clear photo just as the artboard does. */
  .layout-duo .bio::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg,
      rgba(163,168,171,0) 0,
      rgba(163,168,171,.60) 9%,
      rgba(163,168,171,.66) 100%);
  }
  .layout-duo .bio-col { position: relative; z-index: 1; }
  .bio-col, .member-bio { text-shadow: 0 .05rem .6rem rgba(0,0,0,.55); }
  .layout-ligeti .bio-light .bio-col, .layout-ligeti .member-bio { text-shadow: 0 0 .8rem rgba(255,255,255,.9); }
  /* multi-photo pages: each screen pins its own photo, the next screen slides over it */
  .photo-section { background: transparent; overflow: visible; }
  /* One pinned screen per section: the photo AND the artist's name stay put
     while only the bio text scrolls past; the next section slides over once
     its text is finished. NB: reset the base `inset: 0` BEFORE setting top,
     or the shorthand wipes `top` back to auto and nothing sticks. */
  .photo-screen {
    position: sticky;
    inset: auto; top: 0;
    width: 100%; height: 100vh;
    margin-bottom: -100vh;          /* takes no space: the text starts at the section top */
    z-index: 0;
  }
  .photo-section .hero-photo { position: absolute; inset: 0; background-position: center 20%; }
  .photo-section .name-block { position: absolute; top: auto; bottom: var(--nb-b, 1.3vh); z-index: 3; }
  .photo-section .bio-col, .photo-section .name-block { z-index: 2; }
  /* catalogue: water pinned under the whole page */
  .cat-page { background: transparent; }
  .cat-bg { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; z-index: 0; }
  .cat-frame { position: relative; z-index: 1; }
  .cat-reviews { text-shadow: 0 .05rem .7rem rgba(0,0,0,.6); }
  /* shop, 404, info pages */
  .shop-page .hero-photo, .notfound-page .hero-photo, .info-page .hero-photo { background-attachment: fixed; background-position: center center; }
  .subpage .site-footer { position: relative; z-index: 1; }
}

/* ============================================================
   SCROLL BEHAVIOUR PER THE XD "fix position when scrolling" flags
   catalogue pages: water + navigation pinned (black→transparent scrim,
   70%, behind the nav); artist pages: photo pinned (done above);
   home: every artist-panel photo pinned, list water pinned (styles.css).
   ============================================================ */
/* The catalogue pages' pinned nav and its scrim are now how every page behaves,
   see .site-header in styles.css. */

/* ============================================================
   STREAMING PLATFORMS POP-UP
   The artist sections list two platforms; the client asked that all seven
   appear "only in a pop-up". One dialog, built by js/script.js.
   ============================================================ */
.platform-pop { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; }
.platform-pop[hidden] { display: none; }
.platform-pop-backdrop { position: absolute; inset: 0; background: rgba(10,14,18,.62); backdrop-filter: blur(6px); }
.platform-pop-panel {
  position: relative;
  width: min(26rem, calc(100vw - 3rem));
  padding: 2.6rem 2.8rem 2.2rem;
  background: rgba(18,24,29,.97);
  color: var(--cream, #f4efe6);
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.55);
  text-align: left;
}
.platform-pop-close {
  position: absolute; top: .5rem; right: .9rem;
  background: none; border: 0; cursor: pointer;
  color: rgba(244,239,230,.75);
  font-size: 1.8rem; line-height: 1;
  transition: color .3s ease;
}
.platform-pop-close:hover { color: #fff; }
.platform-pop-title {
  font-family: var(--serif-display, Optima), serif;
  font-size: 1.5rem; font-weight: 500;
  margin: 0 0 1.4rem;
}
.platform-pop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.platform-pop-list a {
  font-size: 1.1rem; font-weight: 700; letter-spacing: .02em;   /* XD: Bold 22 */
  text-transform: uppercase;
  transition: color .45s ease;
}
.platform-pop-list a:hover, .platform-pop-list a:focus-visible { color: #fff; }
.platform-pop-more {
  display: inline-block; margin-top: 1.6rem;
  font-size: .9rem; letter-spacing: .04em;
  color: rgba(244,239,230,.72);
  transition: color .45s ease;
}
.platform-pop-more:hover { color: #fff; font-weight: 700; }
body.pop-open { overflow: hidden; }

@media (max-width: 560px) {
  .platform-pop-panel { padding: 30px 26px 24px; }
  .platform-pop-title { font-size: 20px; }
  .platform-pop-list a { font-size: 15px; }
}

/* ============================================================
   LISTEN / STREAM / DOWNLOAD
   Her deck (16.9.2026) lays this page out as the heading and its lead, then
   every recording in turn: the cover on the left, its seven platform links
   stacked beside it, each with the house leading rule. Same shape on a phone.
   ============================================================ */
.info-streaming .stream-head { padding-bottom: 4vh; }
.info-streaming .stream-list {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  gap: 5rem;
  padding: 2rem 0 6rem;
}
.stream-disc {
  display: grid;
  grid-template-columns: 21.5rem 1fr;
  column-gap: 5.5rem;
  align-items: start;
  margin-left: 14.25rem;              /* the page's body axis */
  max-width: 68rem;
}
.stream-cover { display: block; width: 21.5rem; }
.stream-cover img { width: 100%; height: auto; display: block; transition: transform .45s ease; }
.stream-cover:hover img { transform: scale(1.03); }
.stream-name {
  font-size: 1.1rem; font-weight: 700; letter-spacing: .02em;
  line-height: 1.4; margin: 0 0 1.6rem;
  text-transform: uppercase;
}
.stream-name a { transition: color .45s ease; }
.stream-name a:hover { color: #fff; }
.stream-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.15rem; }
.stream-links .rail-link { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }

@media (max-width: 860px) {
  /* her streaming deck, phone frames (slides 15-17; Kevin 2026-09-20): no title,
     the cover at 44% of the width against the left with the seven platforms
     beside it on short rules, 35 px apart; the list scrolls over the pinned photo */
  .info-streaming .stream-list { gap: 40px; padding: 8px 0 40px; }
  .stream-disc {
    grid-template-columns: 44vw 1fr;
    column-gap: 12vw;
    margin-left: 0; padding-left: 18px;
    max-width: none;
  }
  .stream-cover { width: 44vw; }
  .stream-name { display: none; }
  .stream-links { gap: 15px; }
  .stream-links .rail-link { font-size: 14px; line-height: 20px; padding: 0; }
  .stream-links .rail-link .line { display: block; width: 22px; margin-right: 10px; }
}

/* ---- Tablet LANDSCAPE (861-1240 px): the member sections of the Daniel Trio
   and Daniel & Drake pages keep the desktop layout, but on a screen this short
   the biography outgrows the pinned photo screen and its text slid over the
   name block riding at the screen's foot (Kevin, 2026-09-20). Here the screen
   is not pinned: the photograph covers the section, the name block sits at the
   top and the biography follows it. */
@media (min-width: 861px) and (max-width: 1240px) {
  .photo-section .photo-screen { position: static; height: auto; margin: 0; }
  .photo-section .hero-photo { position: absolute; inset: 0; }
  .photo-section .name-block {
    position: relative; top: auto; bottom: auto; left: auto; right: auto;
    margin: 4vh 4.5rem 0 4.25rem; z-index: 3;
  }
  .photo-section .bio-col { padding-top: 3vh; }
}