/* styles/refresh.css — Light-ground refresh (Directive §2) and the new
   narrative, studio and booking components (§3, §3A, §4, §5).

   Loaded last. Everything here either re-points a hard-coded dark value from the
   earlier stylesheets at the warm light palette, or styles markup that did not
   exist before. Nothing above this file was deleted, so a rollback is a single
   <link> removal plus tokens.css.

   Player chrome and the entrance overlay deliberately stay dark — see the
   .band-dark scope in tokens.css. */

/* ═══════════════════════════════════════════════════════════
   1 — SECTION BANDS
   Warm alternation instead of a wall of black. Ivory, then cream,
   with darkness reserved for the mission band, header and footer.
══════════════════════════════════════════════════════════════ */

body { background-color: var(--color-bg); color: var(--color-text); }

#about,
#the-message,
#music,
#book-the-elder,
#support,
.studio-intro,
.studio-invite,
.narrative {
      background: var(--color-bg);
      position: relative;
    }

/* Cream bands carry the alternation. */
.band-warm,
#about,
#music {
      background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%) !important;
    }

#the-voice.band-warm {
      background: linear-gradient(180deg, var(--color-surface-2) 0%, var(--color-surface) 100%) !important;
    }

#book-the-elder {
      background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface-2) 100%) !important;
    }

/* The mission band is the one deliberately dramatic dark moment. */
#support.band-dark {
      background: linear-gradient(180deg, #1A1714 0%, #221E1A 55%, #1A1714 100%) !important;
      color: var(--color-text);
    }

#support.band-dark .section-heading,
#support.band-dark .support-heading { color: var(--color-text); }

/* Hairline seams between bands rather than hard borders. */
.narrative + .narrative,
#music + section,
.studio-intro + section { border-top: 1px solid var(--color-divider); }

/* ═══════════════════════════════════════════════════════════
   2 — LIGHT-GROUND CORRECTIONS
   Fills, borders and shadows that were authored for a dark page.
══════════════════════════════════════════════════════════════ */

/* Subtle hover fills: white-on-dark becomes warm-ink-on-light. */
.track-item:hover,
.premium-track-row:hover,
.release-track-row:hover {
      background: rgba(58,44,20,0.045);
      border-color: var(--color-gold-dim);
    }

.community-payment-methods span { border: 1px solid var(--color-border); }

/* Warm elevation. Black shadows read as soot on ivory. */
.album-art-img,
.album-art-frame,
.purchase-art-frame,
.community-photo,
.release-card,
.player-bar-art,
.release-cover {
      box-shadow: var(--shadow-md);
    }

.album-art-img.playing,
.release-card:hover {
      box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-gold-dim);
    }

.release-card {
      background: var(--color-surface);
      border-color: var(--color-border);
    }

/* Form fields on cream. */
.form-input,
.form-textarea,
select.form-input {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      color: var(--color-text);
    }

.form-input:focus,
.form-textarea:focus {
      border-color: var(--color-gold);
      background: #FFFFFF;
      outline: none;
      box-shadow: 0 0 0 3px var(--color-gold-glow);
    }

.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-text-faint); }

/* Native date control: keep the picker legible on cream. */
.form-date { color-scheme: light; min-height: 52px; }

.form-date::-webkit-calendar-picker-indicator {
      filter: none;
      opacity: 0.75;
      cursor: pointer;
    }

.form-hint {
      display: block;
      margin-top: var(--space-2);
      font-family: var(--font-body);
      font-size: 0.7rem;
      letter-spacing: 0.06em;
      color: var(--color-text-faint);
    }

/* Images no longer need a dark placeholder tint while loading. */
img { background: transparent; }

/* ═══════════════════════════════════════════════════════════
   3 — HEADER / FOOTER as dark bands
══════════════════════════════════════════════════════════════ */

.site-header {
      background: rgba(20, 18, 15, 0.94);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(212,174,82,0.18);
    }

.site-header.scrolled {
      background: rgba(16, 14, 12, 0.97);
      border-color: rgba(212,174,82,0.24);
    }

.site-footer {
      background: linear-gradient(180deg, #1A1714 0%, #14120F 100%);
      border-top: 1px solid rgba(212,174,82,0.2);
    }

.footer-tekl-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }

/* ═══════════════════════════════════════════════════════════
   4 — PHOTOGRAPH SLOTS (§3A)
══════════════════════════════════════════════════════════════ */

.section-photo { width: 100%; height: auto; display: block; border-radius: 18px; }

.image-frame {
      overflow: hidden;
      border-radius: 18px;
      background: var(--color-surface-2);
    }

.image-frame > .section-photo { object-fit: cover; }

.frame-voice > .section-photo  { aspect-ratio: 4 / 3;    object-position: 50% 32%; }
.frame-study > .section-photo  { aspect-ratio: 4 / 3;    object-position: 55% center; }
.frame-studio > .section-photo { aspect-ratio: 4 / 3.1;  object-position: 50% 38%; }
.frame-plain > .section-photo  { aspect-ratio: 3 / 2;    object-position: center; }

/* ═══════════════════════════════════════════════════════════
   5 — NARRATIVE SECTIONS (§3)
══════════════════════════════════════════════════════════════ */

.narrative { padding-block: clamp(var(--space-20), 10vw, var(--space-32)); }

.narrative-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      gap: clamp(var(--space-8), 5vw, var(--space-16));
      align-items: center;
    }

.narrative--reverse .narrative-media { grid-column: 2; grid-row: 1; }
.narrative--reverse .narrative-copy  { grid-column: 1; grid-row: 1; }

.narrative-media .image-frame { box-shadow: var(--shadow-md); }

.narrative-copy > * + * { margin-top: var(--space-5); }

.narrative-body {
      font-size: var(--text-base);
      line-height: 1.85;
      color: var(--color-text-muted);
      max-width: 56ch;
    }

.narrative-list {
      list-style: none;
      display: grid;
      gap: var(--space-3);
      padding: 0;
      margin-top: var(--space-6);
    }

.narrative-list li {
      position: relative;
      padding-left: var(--space-6);
      font-family: var(--font-body);
      font-size: var(--text-sm);
      letter-spacing: 0.04em;
      color: var(--color-text);
    }

.narrative-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.62em;
      width: 12px;
      height: 1px;
      background: var(--color-gold);
    }

.narrative-quote {
      margin-block: var(--space-8);
      padding: var(--space-6) var(--space-8);
      border-left: 2px solid var(--color-gold);
      background: var(--color-surface);
      border-radius: 0 12px 12px 0;
    }

.narrative-quote p {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-style: italic;
      font-weight: 300;
      line-height: 1.45;
      color: var(--color-text);
    }

.narrative-quote footer {
      margin-top: var(--space-3);
      font-family: var(--font-body);
      font-size: 0.7rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--color-gold);
    }

.narrative-copy .btn-gold-outline { margin-top: var(--space-8); }

.section-outro {
      margin-top: var(--space-12);
      display: flex;
      gap: var(--space-4);
      flex-wrap: wrap;
      align-items: center;
    }

/* Slots whose approved photograph is not yet supplied collapse silently
   rather than showing a broken frame. */
img[data-hide-if-missing].image-missing { display: none; }
.image-frame:has(> img.image-missing) { display: none; }

@media (max-width: 900px) {
      .narrative-grid { grid-template-columns: 1fr; gap: var(--space-8); }
      .narrative--reverse .narrative-media,
      .narrative--reverse .narrative-copy { grid-column: 1; }
      .narrative--reverse .narrative-media { grid-row: 1; }
      .narrative--reverse .narrative-copy  { grid-row: 2; }
      .narrative-body { max-width: none; }
    }

/* ═══════════════════════════════════════════════════════════
   6 — THE STUDIO PAGE (§4)
══════════════════════════════════════════════════════════════ */

body.page-studio { padding-top: 0; }

.studio-intro {
      padding-block: clamp(calc(var(--space-24) + 40px), 16vh, calc(var(--space-32) + 40px)) var(--space-16);
      background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
    }

.studio-intro-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
      gap: clamp(var(--space-8), 5vw, var(--space-16));
      align-items: center;
    }

.studio-intro-copy .section-heading { margin-bottom: var(--space-5); }
.studio-intro-copy .section-intro { margin-bottom: var(--space-5); }

.studio-intro-note {
      font-family: var(--font-body);
      font-size: 0.7rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--color-gold);
    }

.studio-invite {
      padding-block: clamp(var(--space-20), 9vw, var(--space-24));
      background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface-2) 100%);
      text-align: center;
    }

.studio-invite .gold-rule { margin-inline: auto; }
.studio-invite .section-intro { margin-inline: auto; }
.studio-invite .section-outro { justify-content: center; }

@media (max-width: 900px) {
      .studio-intro-grid { grid-template-columns: 1fr; }
      .studio-intro-copy { grid-row: 2; }
      .studio-intro-media { grid-row: 1; }
    }

/* ═══════════════════════════════════════════════════════════
   7 — BOOKING (§5, §6)
══════════════════════════════════════════════════════════════ */

.booking-status {
      margin-top: var(--space-5);
      padding: var(--space-4) var(--space-5);
      border-radius: 10px;
      font-family: var(--font-body);
      font-size: var(--text-sm);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      color: var(--color-text);
    }

.booking-status[data-tone="error"] {
      border-color: #B0644F;
      background: rgba(176,100,79,0.09);
      color: #7A3520;
    }

.booking-status[data-tone="working"] { color: var(--color-text-muted); }

.booking-fallback {
      margin-top: var(--space-4);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }

.booking-fallback a { color: var(--color-gold-light); text-decoration: underline; }

.booking-confirmation {
      margin-top: var(--space-6);
      padding: clamp(var(--space-8), 5vw, var(--space-12));
      border: 1px solid var(--color-gold-dim);
      border-radius: 18px;
      background:
        radial-gradient(120% 140% at 50% 0%, var(--color-surface) 0%, var(--color-surface-2) 100%);
      box-shadow: var(--shadow-md);
      text-align: center;
    }

.booking-seal,
.booking-confirmation-seal {
      width: 64px;
      height: 64px;
      margin: 0 auto var(--space-6);
      color: var(--color-gold);
      display: grid;
      place-items: center;
      border: 1px solid var(--color-gold-dim);
      border-radius: 50%;
      background: var(--color-surface-2);
    }

.booking-seal > svg,
.booking-confirmation-seal > svg {
      width: 30px;
      height: 30px;
      display: block;
    }

.booking-confirmation-label {
      font-family: var(--font-body);
      font-size: 0.65rem;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: var(--space-4);
    }

.booking-confirmation-title {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: 300;
      color: var(--color-text);
      margin-bottom: var(--space-4);
    }

.booking-confirmation-body {
      font-size: var(--text-base);
      line-height: 1.8;
      color: var(--color-text-muted);
      max-width: 46ch;
      margin-inline: auto;
    }

.booking-reference {
      margin-top: var(--space-6);
      font-family: var(--font-body);
      font-size: 0.68rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--color-text-faint);
    }

/* ═══════════════════════════════════════════════════════════
   8 — MOBILE NAV / MISC
══════════════════════════════════════════════════════════════ */

.mobile-nav-logo { text-align: center; margin-bottom: var(--space-4); }

.mobile-nav-wordmark {
      font-family: var(--font-body);
      font-size: 0.65rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--color-gold);
    }

.mobile-nav a { font-size: var(--text-xl); }

@media (max-width: 900px) {
      body { background: var(--color-bg); }
    }

/* ═══════════════════════════════════════════════════════════
   9 — CORRECTIONS FOUND IN VISUAL QA
══════════════════════════════════════════════════════════════ */

/* The enquiry card was authored as a dark panel, which left its eyebrow and
   title unreadable once the page went light. It is now cream on cream with a
   gold hairline. */
.booking-form-card {
      background: var(--color-surface) !important;
      border: 1px solid var(--color-gold-dim) !important;
      box-shadow: var(--shadow-md);
    }

.booking-form-eyebrow { color: var(--color-gold); }
.booking-form-title   { color: var(--color-text); }
.form-label           { color: var(--color-text-muted); }

.booking-engagement-item:hover {
      background: rgba(58,44,20,0.04);
      border-color: var(--color-gold-dim);
    }

.booking-engagement-title { color: var(--color-text); }
.booking-engagement-desc  { color: var(--color-text-muted); }

/* Submit — the one plum-weighted action on the page. */
#booking-form .btn-primary,
#booking-form button[type="submit"] {
      width: 100%;
      justify-content: center;
      background: var(--color-plum);
      border-color: var(--color-plum);
      color: #FBF7EF;
      padding-block: var(--space-4);
    }

#booking-form .btn-primary:hover,
#booking-form button[type="submit"]:hover {
      background: var(--color-plum-deep);
      border-color: var(--color-plum-deep);
      box-shadow: var(--shadow-md);
    }

#booking-form button[type="submit"]:disabled { opacity: 0.65; cursor: progress; }

/* Give the hero photograph its full share of the composition (§3A: 45–50%). */
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
.hero-photo { aspect-ratio: 4 / 3.45; object-position: 50% 26%; }

@media (max-width: 900px) {
      .hero { grid-template-columns: 1fr; }
    }

/* Filled gold actions: the ink-on-gold pairing was authored for a bright gold.
   On the deeper light-ground gold, ivory type is the legible combination. */
.btn-gold,
.release-buy,
.btn-purchase-album,
.btn-play-album,
.player-btn.play-pause,
.player-expand-btn,
.pp-play-pause {
      color: var(--color-text-inverse) !important;
      background: var(--color-gold);
      border-color: var(--color-gold);
    }

.btn-gold:hover,
.release-buy:hover:not([disabled]) {
      background: var(--color-gold-light);
      border-color: var(--color-gold-light);
      opacity: 1;
    }

.release-buy {
      border: 1px solid var(--color-gold);
      border-radius: 6px;
      font-weight: 600;
    }

/* Inside the dark mission band the original bright gold returns, so ink type is
   correct again there. */
.band-dark .btn-gold,
.band-dark .release-buy {
      color: #14120F !important;
      background: var(--color-gold);
      border-color: var(--color-gold);
    }

.release-cover-flag { background: rgba(20, 18, 16, 0.9); }

.studio-intro-note { letter-spacing: 0.12em; }

/* Mobile hero: a tighter chest-and-shoulders read, per §3A. */
@media (max-width: 560px) {
      .hero-photo {
        aspect-ratio: 4 / 4;
        object-position: 50% 20%;
        transform: scale(1.14);
        transform-origin: 50% 20%;
      }
    }

/* Confirmation panel — class names matched to the markup. */
.booking-confirmation {
      background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
      border: 1px solid var(--color-gold-dim);
      border-radius: 16px;
      padding: var(--space-8) var(--space-6);
      text-align: center;
    }

.booking-confirmation-eyebrow {
      font-family: var(--font-body);
      font-size: 0.62rem;
      letter-spacing: 0.36em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin: 0 0 var(--space-3);
    }

.booking-confirmation-title {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: 400;
      color: var(--color-text);
      margin: 0 0 var(--space-4);
    }

.booking-confirmation-body {
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: 1.7;
      color: var(--color-text-muted);
      max-width: 38ch;
      margin: 0 auto;
    }

.booking-confirmation-ref {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--color-text-faint);
      margin: var(--space-5) 0 0;
    }

.booking-confirmation-ref:empty { display: none; }

/* Mobile drawer: fully opaque so the page never reads through it. */
.mobile-nav {
      background: #131110 !important;
      z-index: 10000;
      gap: var(--space-6);
      overflow-y: auto;
      padding: var(--space-10) var(--space-5);
    }

.mobile-nav a { color: #F2EDE3; }
.mobile-nav .close-nav { color: #C7BFB2; }