/* 2026-09-25: hero tagline → Bebas Neue (board option E · Radical Face / Druk-adjacent) */
body :is(.hero .tagline, .hero .tagline.display) {
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  font-style: normal; /* Bebas has no italic; override Playfair italic */
  letter-spacing: 0.04em;
}

:root {
  /* Champagne palette sampled from the mix-comparison disc
     (.comparison-disc in checkmark-home-interactions.css). Replaces the
     previous brassy amber; approved 2026-09-03 from the draft in
     ARCHIVE/ignored-local/paused-uncommitted-2026-09-29/DRAFTS/active/shared-or-uncertain/champagne-title-color-2026-09-03/. */
  --brand-gold: #e6cba1;
  --brand-gold-bright: #f1dab8;
  --brand-gold-deep: #7a5a33;
  --brand-gold-rgb: 230, 203, 161;
  /* Deeper champagne for type sitting on cream and other light sections,
     where the pale tones above wash out. */
  --brand-gold-on-light: #7a5a33;
  --brand-cta-fill: linear-gradient(90deg, #d7bc93 0%, #ead7b6 50%, #d2b58a 100%); /* Gradient 3 horizontal wash 2026-09-25 */
  --brand-cta-hover: linear-gradient(90deg, #e0c79f 0%, #f0e1c4 50%, #dcc49a 100%);
  --gold: var(--brand-gold);
  --gold2: var(--brand-gold);
  --red: var(--brand-gold);
  --line: rgba(var(--brand-gold-rgb), .24);
}

/* One warm-gold voice for display, label, and interactive typography. */
body :is(
  .eyebrow,
  .media-number,
  .hero h1,
  .hero .tagline,
  .hero .tagline b,
  .pagehero h1,
  .pagecta h2,
  .gallery-head h2,
  .services-copy h1,
  .services-kicker,
  .service-rate,
  .service-window-bar,
  .studio-kicker,
  .studio-cinematic h1,
  .studio-tagline,
  .studio-tagline span,
  .studio-flourish,
  .feature,
  .amount,
  .caption .studio-label,
  .contactbox b
) {
  color: var(--brand-gold);
}

.header .logo,
.header .logo span,
.header .navdrop > button,
.header .navlinks > a:hover,
.header .navlinks > a:focus-visible,
.header .navdrop > .services-link:hover,
.header .navdrop > .services-link:focus-visible,
.header .navlinks > a[aria-current="page"],
.header .navdrop > .services-link[aria-current="page"] {
  color: var(--brand-gold);
}

.header .navlinks > a[aria-current="page"],
.header .navdrop > .services-link[aria-current="page"] {
  box-shadow: inset 0 -2px var(--brand-gold);
}

.header .navdrop-menu a:hover,
.header .navdrop-menu a:focus-visible,
.header .navdrop-menu a[aria-current="page"],
.footer a:hover,
.footer a:focus-visible {
  color: var(--brand-gold-bright);
}

body[data-page="services"] {
  --service-gold: var(--brand-gold);
}

.service-detail a {
  text-decoration-color: var(--brand-gold);
}

.studio-showcase {
  --studio-gold: var(--brand-gold);
  --studio-red: var(--brand-gold);
}

.studio-info-card--action a,
.qa-list summary:hover,
.qa-list summary:focus-visible,
.price,
.textlink,
.review a {
  color: var(--brand-gold-deep);
}

.pending,
.service-note {
  border-left-color: var(--brand-gold);
}

:where(a, button, input, select, textarea):focus-visible {
  outline-color: var(--brand-gold-bright);
}

/* Metallic sheen for display headings, mapped from the disc's own stops.
   Deliberately limited to large type: at label sizes the gradient reads as
   muddy, which the 2026-09-03 draft's scale test showed.

   Targets .tagline, not .hero h1: that h1 is a visually-hidden screen-reader
   heading 1px tall, so clipping a gradient to it produced no visible sheen and
   left the real title on a flat, washed-out champagne. */
body :is(.hero .tagline, .hero .tagline.display, .pagehero .pagehero-title) {
  /* Softened 2026-09-25: horizontal Gradient-3-style wash (was steep 178deg sheen) */
  background-image: linear-gradient(90deg, #d2b58a 0%, #ead7b6 42%, #f0e1c4 55%, #d7bc93 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* The red full stop is a deliberate brand accent and must not be swallowed by
   the gradient clip above. */
body :is(.hero .tagline, .pagehero .pagehero-title) b {
  background: none;
  color: #a82e26;
  -webkit-text-fill-color: #a82e26;
}

/* On cream and other light grounds the pale champagne washes out (the eyebrow
   measured 1.08:1 against the proof panel), so label and display type there
   takes the deeper bronze from the same disc palette.

   Two deliberate exclusions:
   - .homepage-media ships in a light (.demo-reel-section) and a dark variant.
     The tones were inverted on 2026-09-03 for the section stagger, so the
     light one is now named by class rather than by exclusion.
   - .studio-label and other .caption text sit over photographs inside these
     light sections, not on the cream itself, so they keep the pale champagne. */
:is(
  .proofbox,
  .section.light,
  .section.homepage-media.demo-reel-section,
  .service-calendar,
  .calendar-info
) :is(.eyebrow, .media-number, .feature, .amount, .gallery-head h2, .contactbox b):not(.caption *) {
  color: var(--brand-gold-on-light);
}

/* The proof panel's cream is darker than the other light sections, so the
   shared on-light bronze lands at 4.35:1 there. A scoped token override lifts
   its label and link type over the 4.5:1 line without darkening the rest. */
.proofbox {
  --brand-gold-on-light: #6d5030;
  --brand-gold-deep: #6d5030;
}

/* Primary buttons all carry the header CTA's champagne ramp, so the hero's
   call to action and the header's read as the same component rather than two
   different treatments. Dark text plus the border keeps it legible on the
   cream sections as well as on black. */
.btn.primary {
  background-image: var(--brand-cta-fill);
  border: 0;
  border-radius: 2px;
  color: #17120a;
  box-shadow: none;
}

.btn.primary:hover,
.btn.primary:focus-visible {
  background-image: var(--brand-cta-hover);
  box-shadow: none;
  filter: brightness(1.03);
  transform: translateY(-1px);
}

/* Readable phone and location strip beneath the navigation. */
.contact-bar {
  border-bottom: 1px solid rgba(242, 207, 155, .16);
  background: #0c0b09;
}

.contact-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 60px;
  padding: 8px 20px;
  color: #e6cba1;
  font: 600 clamp(1.05rem, 1.3vw, 1.3rem)/1.35 "Barlow Condensed", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.contact-bar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #f1dab8;
  text-decoration: none;
  border-bottom: 1px solid rgba(241, 218, 184, .38);
}

.contact-bar a:hover,
.contact-bar a:focus-visible {
  color: #fff7df;
  border-bottom-color: #fff7df;
}

.contact-bar .sep { opacity: .5; }

@media (max-width: 700px) {
  .contact-bar .wrap {
    gap: 0;
    flex-direction: column;
    padding: 4px 16px 12px;
    font-size: 1.2rem;
    letter-spacing: .07em;
    text-align: center;
  }
  .contact-bar .where { font-size: .95rem; line-height: 1.4; }
  .contact-bar .sep { display: none; }
}

/* ---- Section rhythm -----------------------------------------------------
   Alternate light and dark down the page so sections read as distinct bands
   rather than one long dark run. Ordered: Hear the difference (light), Inside the
   work (dark), Two studios (light), Tour the rooms (dark). */

/* Full-resolution microphone artwork with the approved full-section paper overlay. */
.demo-reel-section {
  background-color: var(--paper);
  background-image:
    url("MEDIA/IMAGES/TEXTURES/vintage-paper-background.jpeg"),
    linear-gradient(rgba(243,238,230,.74),rgba(243,238,230,.68)),
    url("MEDIA/ARTWORK/microphone-diagram-background-bronze-seamless.png");
  background-size:cover,cover,80% auto;
  background-repeat:no-repeat,no-repeat,repeat;
  background-position:center,center,center;
  background-blend-mode:multiply,normal,normal;
  color:var(--ink);
  border-block:1px solid rgba(185,146,98,.28);
  box-shadow:none;
}
.demo-reel-section .homepage-media-head{
  position:relative;
  background:radial-gradient(ellipse closest-side at center,rgba(243,238,230,.12) 0%,rgba(243,238,230,.07) 40%,rgba(243,238,230,.025) 70%,rgba(243,238,230,0) 100%);
}
@media(max-width:650px){
  .demo-reel-section{background-size:cover,cover,auto 80%;background-position:center,center,30% center}
}

.demo-reel-section .homepage-media-head h2 { color: var(--ink); text-shadow: none; }
.demo-reel-section .homepage-media-head .lead { color: #696158; }

/* Hear the difference — was light, now the dark band between two light ones. */
.sound-proof { background: #0c0b09; color: #f3ece1; }
.sound-proof .eyebrow { color: #e6cba1; }
.sound-proof h2 { color: #f6eee3; }
.sound-proof .lead,
.sound-proof .audio-credit { color: #b3a99a; }

/* Tour the rooms — dark, so it does not sit light-on-light after Two studios. */
.homepage-media:not(.demo-reel-section) {
  background: #0c0b09;
  color: #f3ece1;
}

.homepage-media:not(.demo-reel-section) .homepage-media-head .eyebrow { color: #e6cba1; }
.homepage-media:not(.demo-reel-section) .homepage-media-head h2 { color: #f6eee3; }
.homepage-media:not(.demo-reel-section) figcaption h3 { color: #f6eee3; }
.homepage-media:not(.demo-reel-section) figcaption p { color: #b3a99a; }

/* ---- Sound demo console in the champagne palette ------------------------ */
:is(.demo-reel-section,.demo-player-section) .video-console {
  --console-gold: #cbab7d;
}

/* The console box stays dark against the light section, so its own type has
   to be champagne rather than the darker values a light panel would take. */
:is(.demo-reel-section,.demo-player-section) .video-console-head { color: #e6cba1; }
:is(.demo-reel-section,.demo-player-section) .video-console-mode { color: #cbab7d; }
:is(.demo-reel-section,.demo-player-section) .video-console-cues b { color: #e6cba1; }
:is(.demo-reel-section,.demo-player-section) .video-console-cues small { color: #9c8f7c; }
:is(.demo-reel-section,.demo-player-section) .volume-fader { color: #cbab7d; }
:is(.demo-reel-section,.demo-player-section) .volume-fader output { color: #f1dab8; }
:is(.demo-reel-section,.demo-player-section) .video-console-cues button { color: #e6cba1; }

/* ---- Inquiry section on the light ground --------------------------------
   It follows the now-dark "Tour the rooms." section, so it takes the light
   band in the stagger. Its form, contact card and success message were all
   written for a dark ground and need flipping to stay legible. */
.section.light#book .formbox {
  background: #fbf7f0;
  border-color: rgba(185, 146, 98, .3);
  color: #1a1713;
}

.section.light#book .field label { color: #6a6157; }

.section.light#book .field input,
.section.light#book .field select,
.section.light#book .field textarea {
  background: #fff;
  color: #1a1713;
  border-color: rgba(122, 90, 51, .34);
}

.section.light#book .field input::placeholder,
.section.light#book .field textarea::placeholder { color: #6a6157; }

.section.light#book .field input:focus-visible,
.section.light#book .field select:focus-visible,
.section.light#book .field textarea:focus-visible {
  outline: 2px solid #7a5a33;
  outline-offset: 1px;
}

.section.light#book .contactbox {
  background: #fbf7f0;
  border-color: rgba(185, 146, 98, .3);
  color: #1a1713;
}

.section.light#book .contactbox li { border-bottom-color: rgba(122, 90, 51, .22); }
.section.light#book .contactbox b { color: #7a5a33; }
.section.light#book .contactbox a { color: #1a1713; }
.section.light#book .success { color: #4a6b3f; }

/* ---- Review counter -----------------------------------------------------
   The "02 / 05" readout is working scaffolding, not something a visitor needs.
   It is hidden from sight in public but left in the accessibility tree, since
   it is the aria-live region that tells a screen-reader user which review is
   showing. It stays visible on localhost, where the editors run. */
.review-counter {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.is-edit-view .review-counter {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}