/* =========================================================
   Andre Cavalcante — Modern Fingerstyle Guitar
   Cinematic dark theme. ~13kb / ~4kb gz.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --bg:        #111415;          /* dark neutral with subtle blue */
  --bg-2:      #0a0d0e20;
  --bg-deep:   #0a0d0e;          /* slightly deeper */
  --line:      rgba(196, 160, 74, .18);
  --line-soft: rgba(255,255,255,.07);
  --text:      #ede7d8;          /* cream */
  --text-soft: #b6ad9b;
  --muted:     #8a8478;
  --gold:      #c4a04a;          /* antique brass */
  --gold-soft: #b59348;
  --gold-deep: #8a6e34;

  /* subtle film-grain noise for textured backgrounds (~500 bytes inline svg) */
  --noise: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --container: 1280px;
  --pad-x: clamp(20px, 4.5vw, 56px);

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Quick fade-out + subtle blur before internal navigation (page appears instantly on load) */
body {
  transition: opacity .28s ease-out, filter .28s ease-out;
}
body.is-leaving {
  opacity: 0;
  filter: blur(8px);
}
body {
  margin: 0;
  background:
    var(--noise),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--gold); }

h1,h2,h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1.08;
  margin: 0 0 .35em;
}
p { margin: 0 0 1em; }
em { font-style: italic; color: var(--gold); font-weight: 500; }

/* ---------- Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.centered { text-align: center; }
.centered-block { margin-inline: auto; }
.muted { color: var(--text-soft); }
.small { font-size: .92rem; }
.gold { color: var(--gold); }
.gold-soft { color: var(--gold-soft); }

.caps-sub {
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 1.1rem;
}
.caps-spaced { letter-spacing: .28em; text-transform: uppercase; }
.caps-tiny {
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 2.4rem;
}
.serif-italic { font-family: var(--serif); font-style: italic; font-size: 1.05rem; }

.display {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.08;
  margin: 0 0 1rem;
}
.serif-display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  letter-spacing: -.005em;
}

.rule-short {
  display: block;
  width: 80px;
  height: 1px;
  background: var(--gold);
  opacity: .6;
  margin: 1.2rem auto 1.6rem;
}
.rule-inline {
  display: inline-block;
  width: 36px; height: 1px;
  background: var(--gold);
  opacity: .65;
  vertical-align: middle;
  margin-left: .8rem;
  transform: translateY(-2px);
}

/* ---------- Buttons ----------
   Cinematic premium feel: slightly larger sizing, subtle gold glow on hover,
   gentle lift, and a soft inner light layer that grows on interaction.
   Keeps the minimalist line aesthetic — luxury hides in the micro-details.
*/
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55em;
  font-family: var(--sans);
  font-weight: 400;
  font-size: .74rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  padding: 1em 2.4em;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color .35s var(--ease),
    color .35s var(--ease),
    border-color .35s var(--ease),
    transform .25s var(--ease),
    box-shadow .5s var(--ease),
    letter-spacing .35s var(--ease);
}
/* Subtle inner light wash that grows on hover — gives every button a
   gentle cinematic glow without ever feeling generic or salesy. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 80% 120% at 50% 110%,
              rgba(196,160,74,.22) 0%,
              rgba(196,160,74,.05) 45%,
              transparent 75%);
  opacity: 0;
  transition: opacity .55s var(--ease);
}
.btn:hover::before { opacity: 1; }

.btn-outline {
  border: .5px solid rgba(255,255,255,.45);
  color: var(--text);
}
.btn-outline:hover {
  border-color: var(--gold); color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35),
              0 0 22px rgba(196,160,74,.16);
}
.btn-bordered {
  border: .5px solid var(--gold);
  color: var(--gold);
  padding: 1.15em 2.6em;
  background: transparent;
  box-shadow: 0 0 0 rgba(196,160,74,0);
}
.btn-bordered:hover {
  background: var(--gold);
  color: var(--bg-deep);
  border-color: var(--gold);
  transform: translateY(-1px);
  letter-spacing: .32em;
  box-shadow: 0 12px 34px rgba(196,160,74,.28),
              0 0 28px rgba(196,160,74,.22);
}
.btn-gold-filled {
  background: var(--gold);
  color: var(--bg-deep);
  border: .5px solid var(--gold);
  padding: 1.2em 2.7em;
  font-weight: 500;
  box-shadow: 0 8px 26px rgba(196,160,74,.22),
              0 0 0 rgba(196,160,74,0);
}
.btn-gold-filled:hover {
  background: #d6b25b;
  border-color: #d6b25b;
  color: var(--bg-deep);
  transform: translateY(-2px);
  letter-spacing: .32em;
  box-shadow: 0 14px 38px rgba(196,160,74,.34),
              0 0 28px rgba(196,160,74,.26);
}
.btn-gold-filled svg { stroke: currentColor; }
.btn-pill {
  border: .5px solid rgba(255,255,255,.5);
  border-radius: 999px;
  padding: .8em 2em;
  letter-spacing: .04em;
  font-size: .9rem;
  text-transform: none;
  font-family: var(--serif);
}
.btn-pill:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(17,20,21,.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 0;
  padding: .8rem var(--pad-x);
  transition: background-color .35s var(--ease), backdrop-filter .35s var(--ease);
}
/* Homepage: transparent at top, becomes solid after scroll */
[data-page="home"] .site-header {
  background: linear-gradient(180deg, rgba(17,20,21,.55) 0%, rgba(17,20,21,0) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-page="home"] .site-header.is-scrolled {
  background: rgba(17,20,21,.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
/* Header layout: logo LEFT — nav CENTER — social RIGHT.
   Flexbox + `order` keeps HTML source order intact (a11y) but renders
   in the desired visual order. The middle item (.primary-nav) takes
   flex:1 so it absorbs all spare horizontal space and uses its own
   justify-content:center to keep the menu visually centred on the page.
   Brand and social shrink to content and align center vertically. */
.header-inner {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.5rem;
  max-width: 1500px;
  margin: 0 auto;
}
.header-inner > .brand {
  order: 1;
  flex: 0 0 auto;
}
.header-inner > .primary-nav {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-inner > .social-strip {
  order: 3;
  flex: 0 0 auto;
}
/* Defensive — make sure no inherited rule (margin, transform, line-height)
   pushes any of the three header pillars off the shared baseline. */
.header-inner > * {
  align-self: center;
  margin-top: 0;
  margin-bottom: 0;
}

.brand {
  display: grid; place-items: center;
  opacity: .85;
  transition: opacity .25s var(--ease), transform .35s var(--ease);
}
.brand-mark {
  display: block;
  width: 34px; height: 34px;
  object-fit: contain;
}
.brand:hover {
  opacity: 1;
  transform: scale(1.06);
}

.primary-nav { display: flex; align-items: center; }
.nav-list {
  display: flex; gap: 1.95rem;
  margin: 0; padding: 0; list-style: none;
}
.nav-list a {
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text);
  position: relative;
  padding: .35rem 0;
  transition: color .3s var(--ease);
}
.nav-list a:hover { color: var(--gold); }
.nav-list a.is-active {
  color: var(--text);
}
.nav-list a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
}

.social-strip {
  justify-self: end;
  display: flex; gap: 1.1rem;
  margin: 0; padding: 0; list-style: none;
}
.social-strip a {
  display: grid; place-items: center;
  color: var(--text);
  opacity: .85;
  transition: color .25s var(--ease), opacity .25s var(--ease);
}
.social-strip svg { width: 17px; height: 17px; }
.social-strip a:hover { color: var(--gold); opacity: 1; }

/* mobile menu toggle */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  position: relative;
  z-index: 60;
}
.nav-toggle-bar {
  position: absolute; left: 9px; right: 9px; height: 1.5px;
  background: var(--text); border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease), top .25s var(--ease);
}
.nav-toggle-bar:nth-child(1) { top: 14px; }
.nav-toggle-bar:nth-child(2) { top: 19px; }
.nav-toggle-bar:nth-child(3) { top: 24px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  /* explicit single-column track so the content fills full width and
     can be anchored left via margin-left:0 on .hero-content */
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: start; /* defeats the critical-inline 'center' */
  justify-items: start;
  isolation: isolate;
  overflow: hidden;
  padding: 0 var(--pad-x);
}
.hero-media {
  position: absolute; inset: 0; z-index: -1;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  animation: kenburns 24s ease-out forwards;
}
@keyframes kenburns {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
/* Vignette overlay disabled — the photo's own light/shadow now reads through
   unaltered. Element kept in DOM in case we want to bring back a softer
   gradient later. */
.hero-vignette {
  position: absolute; inset: 0;
  background: transparent;
}
/* Hero content sits in the LEFT third of the section. A scaling left
   margin pulls the block inward from the safe-area edge so the title
   doesn't hug the very edge of the viewport — meio termo between
   "all-the-way-left" and "centered". */
.hero-content {
  max-width: 720px;
  width: min(720px, 100%);
  margin-left: clamp(56px, 13vw, 290px);
  margin-right: auto;
  padding-top: 0;          /* true vertical centering — no offset from top */
  position: relative;
  text-align: left;
  justify-self: start;
}
@media (max-width: 600px) {
  .hero-content { margin-left: 0; } /* on small screens, hug the safe-area edge */
}
.hero-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.4vw, 4.8rem);
  line-height: .98;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 1.4rem;
  /* text-shadow removed — the cinematic vignette now does the heavy lifting */
  display: flex; flex-direction: column;
}
/* Elegant entrance: letters spread out and rise — no blur */
.hero-name span {
  animation: heroNameIn 1.6s cubic-bezier(.2,.7,.15,1) both;
  display: inline-block;
  transform-origin: left center;
}
.hero-name span:first-child  { animation-delay: .3s; }
.hero-name span:last-child   { animation-delay: .65s; }
.hero-tag {
  animation: heroTagIn 1.2s cubic-bezier(.2,.7,.15,1) 1.3s both;
}
.hero-tag-rule {
  animation: heroRuleExpand 1.2s cubic-bezier(.2,.7,.15,1) 1.7s both;
  transform-origin: left center;
}
@keyframes heroNameIn {
  0% {
    opacity: 0;
    letter-spacing: -.18em;
    transform: translateY(30px);
  }
  60% {
    opacity: .8;
  }
  100% {
    opacity: 1;
    letter-spacing: .01em;
    transform: translateY(0);
  }
}
@keyframes heroTagIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroRuleExpand {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: .8; }
}
/* Both lines left-aligned: A of ANDRÉ aligns with C of CAVALCANTE */
.hero-name span:first-child,
.hero-name span:last-child { transform: none; }

.hero-tag {
  position: relative;
  display: inline-flex; flex-direction: column;
  gap: .55rem;
  margin: 0;
  padding-bottom: 1.6rem;
}
.hero-tag-1, .hero-tag-2 {
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .44em;
  text-transform: uppercase;
  line-height: 1.45;
}
.hero-tag-1 { color: var(--text); }
.hero-tag-2 { color: var(--gold); }
.hero-tag-rule {
  position: absolute;
  left: 0; bottom: 0;
  width: 260px; height: 1px;
  background: var(--gold);
  opacity: .85;
}

/* Hero CTA pair — primary conversion buttons rendered with the cinematic
   gold glow language from .btn. Sits below the headline; introduced after
   the line-rule animation so it doesn't compete with the entrance. */
.hero-actions {
  display: flex; flex-wrap: wrap;
  gap: 1rem 1.4rem;
  align-items: center;
  margin: 2.2rem 0 0;
  animation: heroTagIn 1.1s cubic-bezier(.2,.7,.15,1) 2s both;
}
/* Both hero CTAs share identical metrics — same padding, same font,
   same minimum width — so they read as a balanced cinematic pair
   regardless of text length. */
.hero-actions .btn,
.hero-actions .btn-bordered,
.hero-actions .btn-gold-filled {
  font-size: .72rem;
  letter-spacing: .3em;
  padding: 1.15em 2.4em;
  min-width: 240px;
}
@media (max-width: 560px) {
  .hero-actions { gap: .8rem; }
  .hero-actions .btn,
  .hero-actions .btn-bordered,
  .hero-actions .btn-gold-filled {
    width: 100%;
    min-width: 0;
  }
}

/* ---------- Featured Playlist Strip ---------- */
.featured-strip {
  margin: 1.6rem auto 0;
  max-width: 1080px;
}
.featured-strip-head {
  display: flex; align-items: center; gap: 1rem;
  margin: 0 0 .9rem;
}
.strip-eyebrow {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .58rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.strip-rule {
  flex: 0 0 60px;
  height: 1px;
  background: var(--gold);
  opacity: .55;
}
.strip-viewport {
  position: relative;
}
.strip-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px 12px;
  scrollbar-width: none;
  /* Reserve space for the playlist thumbnails (cards 180×101 + padding)
     so the layout doesn't jump when the JS-rendered strip replaces the
     "Loading playlist…" placeholder. */
  min-height: 119px;
}
.strip-track::-webkit-scrollbar { display: none; }
.strip-card {
  flex: 0 0 180px;
  position: relative;
  scroll-snap-align: start;
  aspect-ratio: 16 / 9;
  border: .5px solid rgba(196, 160, 74, .25);
  background: rgba(10, 13, 14, .55);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  outline: 0;
  transition:
    border-color .35s var(--ease),
    transform .35s var(--ease),
    box-shadow .45s var(--ease);
}
.strip-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: opacity .35s var(--ease), transform .8s var(--ease);
}
.strip-card:hover,
.strip-card:focus-visible {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(196,160,74,.3);
}
.strip-card:hover img,
.strip-card:focus-visible img {
  opacity: 1;
  transform: scale(1.06);
}
.strip-card.is-active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 8px 24px rgba(196,160,74,.18);
}
.strip-card.is-active img { opacity: 1; }
.strip-card-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(17,20,21,0) 45%, rgba(17,20,21,.65) 100%);
  pointer-events: none;
}
.strip-card-overlay svg {
  width: 36px; height: 36px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.65));
  opacity: .9;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.strip-card:hover .strip-card-overlay svg,
.strip-card:focus-visible .strip-card-overlay svg {
  opacity: 1;
  transform: scale(1.12);
}
.strip-card-num {
  position: absolute;
  top: 6px; left: 8px;
  font-family: var(--serif);
  font-size: .78rem;
  font-style: italic;
  letter-spacing: .12em;
  color: var(--gold);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  z-index: 2;
  pointer-events: none;
}
.strip-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 56px;
  pointer-events: none;
  z-index: 3;
}
.strip-fade-l {
  left: 0;
  background: linear-gradient(90deg, rgba(17,20,21,.85), rgba(17,20,21,0));
}
.strip-fade-r {
  right: 0;
  background: linear-gradient(270deg, rgba(17,20,21,.85), rgba(17,20,21,0));
}
.strip-loading,
.strip-empty {
  flex: 1 1 auto;
  text-align: center;
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 2.4rem 0;
}

/* keep hidden YT loader on-page but fully invisible (off-screen breaks some browsers' iframe init) */
#ytPlaylistLoader {
  position: fixed;
  right: 0; bottom: 0;
  width: 1px; height: 1px;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  overflow: hidden;
}
#ytPlaylistLoader iframe { width: 1px; height: 1px; border: 0; }

/* ---------- Sections ---------- */
.section {
  padding: clamp(64px, 9vh, 110px) 0;
  position: relative;
}

/* Global Impact */
.section-impact {
  background: var(--bg-deep);
  text-align: center;
}
.section-impact .display { margin-bottom: 1.4rem; }
.stats {
  list-style: none; margin: 3.5rem 0 3rem; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
}
.stat {
  background: var(--bg-deep);
  position: relative;
  overflow: hidden;
}
.stat-link {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.6rem 1rem;
  gap: 1.1rem;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition: transform .4s var(--ease), background-color .4s var(--ease);
  position: relative;
}
.stat-link::after {
  /* sliding gold underline that grows on hover */
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width .45s var(--ease);
}
.stat-link:hover {
  background: rgba(196,160,74,.04);
  transform: translateY(-6px);
}
.stat-link:hover::after { width: 60%; }
.stat-link:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: -3px;
}

.stat-icon {
  color: var(--text);
  opacity: .85;
  width: 28px; height: 28px;
  transition: color .35s var(--ease), opacity .35s var(--ease), transform .45s var(--ease);
}
.stat-link:hover .stat-icon {
  color: var(--gold);
  opacity: 1;
  transform: scale(1.1) translateY(-2px);
}

.stat-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  color: var(--gold);
  line-height: 1;
  letter-spacing: -.005em;
  transition: color .3s var(--ease), text-shadow .35s var(--ease);
}
.stat-link:hover .stat-num {
  color: #e8c168;
  text-shadow: 0 0 24px rgba(196,160,74,.3);
}

.stat-rule {
  display: block; width: 60px; height: 1px;
  background: var(--gold); opacity: .55;
  transition: width .4s var(--ease), opacity .35s var(--ease);
}
.stat-link:hover .stat-rule {
  width: 100px;
  opacity: 1;
}

.stat-label {
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-align: center;
  line-height: 1.7;
  transition: color .3s var(--ease);
}
.stat-link:hover .stat-label { color: var(--text); }
.impact-foot {
  margin-top: 3rem;
  display: flex; flex-direction: column; align-items: center;
}

/* Featured */
.section-featured {
  background: var(--bg);
  text-align: center;
}
.featured-eyebrow { letter-spacing: .42em; font-size: 1rem; margin-bottom: .6rem; }
.video-frame {
  margin: 3rem auto;
  max-width: 1100px;
  aspect-ratio: 16/9;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 100px -30px rgba(0,0,0,.7);
  background: #000;
  position: relative;
}
.yt-facade {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0; border: 0; cursor: pointer;
  background: #000;
}
.yt-facade img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease), filter .3s var(--ease);
}
.yt-facade:hover img { transform: scale(1.02); filter: brightness(.85); }
.play-btn {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.play-btn svg { transition: transform .3s var(--ease); filter: drop-shadow(0 6px 20px rgba(0,0,0,.5)); }
.yt-facade:hover .play-btn svg { transform: scale(1.08); }
.featured-title { margin-top: 4rem; }

/* Story — 2-column: text LEFT, photo RIGHT (matches original Wix) */
.section-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(20px, 3vh, 40px) 0;  /* very subtle — minimal vertical breathing */
}
.story-media { position: absolute; inset: 0; z-index: -1; }
.story-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 70% center;
  filter: contrast(1.05) saturate(1.05);
}
.story-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(17,20,21,.95) 0%, rgba(17,20,21,.85) 25%, rgba(17,20,21,.4) 55%, rgba(17,20,21,.05) 80%, rgba(17,20,21,0) 100%);
}
.story-content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 3rem;
}
.story-text {
  max-width: 540px;
}
.story-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
  font-weight: 400;
  margin: 1rem 0 2rem;
  letter-spacing: -.005em;
}
.story-body {
  color: var(--text-soft);
  font-size: .85rem;
  line-height: 1.9;
  margin-bottom: 2.4rem;
  max-width: 48ch;
}
.story-body p { margin-bottom: 1.4rem; }
.story-closer {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.25;
  margin-top: 2rem;
}

/* Masterclass */
.section-masterclass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(80px, 11vh, 130px) 0;
}
.mc-media { position: absolute; inset: 0; z-index: -1; }
.mc-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 80% center;
  filter: brightness(1) contrast(1.02);
}
.mc-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,13,14,.95) 0%, rgba(10,13,14,.85) 25%, rgba(10,13,14,.4) 55%, rgba(10,13,14,.05) 85%, rgba(10,13,14,0) 100%),
    linear-gradient(180deg, rgba(10,13,14,.15) 0%, rgba(10,13,14,.25) 100%);
}
.mc-content { max-width: 700px; }
.mc-title { font-size: clamp(2rem, 3.8vw, 3.2rem); margin-bottom: 1.4rem; letter-spacing: .015em; }
.mc-body {
  color: var(--text-soft);
  font-size: .9rem;
  line-height: 1.9;
  margin: 1.4rem 0 2rem;
}
.mc-pillars {
  list-style: none; padding: 0;
  margin: 1.8rem 0 2.4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  max-width: 480px;
}
.mc-pillars li {
  display: flex; flex-direction: column; gap: .6rem;
  align-items: flex-start;
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-soft);
  line-height: 1.7;
}
.mc-pillars svg { width: 18px; height: 18px; }
.mc-pillars svg { color: var(--gold); }
.mc-quote {
  margin-top: 4rem;
  font-family: var(--serif);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  max-width: 700px;
  margin-left: auto; margin-right: auto;
}
.mc-quote em { font-style: italic; letter-spacing: .12em; }

/* Live shows preview */
.section-shows {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(0px, .5vh, 8px) 0 clamp(40px, 6vh, 72px); /* title sits right under the header */
  min-height: 100svh;
}
.section-shows .shows-content > .caps-sub.centered.reveal { margin-bottom: .6rem; }
.section-shows .serif-display { margin-bottom: .35rem; }
.shows-media {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden;
  background: var(--bg-deep);
}
.shows-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  transform: translateY(clamp(30px, 5vh, 70px));   /* less aggressive push-down so figure sits higher on screen */
  filter: brightness(1) contrast(1.05);
}
.shows-overlay {
  position: absolute; inset: 0;
  background:
    /* soft edge vignette — gentle transition into bg so image feels native */
    radial-gradient(ellipse 110% 95% at 50% 55%,
      rgba(17,20,21,0) 25%,
      rgba(17,20,21,.15) 50%,
      rgba(17,20,21,.45) 75%,
      rgba(17,20,21,.85) 92%,
      var(--bg-deep) 100%),
    /* soft top darkening — gradual fall-off, no hard line */
    linear-gradient(180deg,
      var(--bg-deep) 0%,
      rgba(17,20,21,.92) 4%,
      rgba(17,20,21,.6) 10%,
      rgba(17,20,21,.25) 18%,
      rgba(17,20,21,0) 28%),
    /* soft bottom darkening */
    linear-gradient(180deg,
      transparent 60%,
      rgba(17,20,21,.2) 75%,
      rgba(17,20,21,.55) 88%,
      rgba(17,20,21,.9) 96%,
      var(--bg-deep) 100%);
}
.shows-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: -.2rem 0 0;
  line-height: 1.9;
}

.shows-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* keep a generous gap so the stage figure breathes between columns,
     but pull the outer edges of the grid in toward the page center */
  gap: clamp(7rem, 16vw, 11rem);
  max-width: 1080px;           /* was 1400 — columns now sit closer to center */
  margin: clamp(48px, 7vh, 90px) auto 0;
}
.shows-col {
  list-style: none; margin: 0; padding: 0;
}
.shows-col li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  align-items: center;
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--line);
  transition:
    background-color .4s var(--ease),
    border-color .4s var(--ease),
    padding-left .4s var(--ease),
    padding-right .4s var(--ease);
}
/* Cinematic hover — gold marker appears on the outside edge, soft gold
   tint background sweeps across the row, the city name brightens to gold. */
.shows-col li::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  box-shadow: 0 0 0 4px rgba(196,160,74,.15);
}
.shows-col:not(.shows-col-right) li::before {
  left: -.2rem;
  transform: translateY(-50%) translateX(-8px);
}
.shows-col-right li::before {
  right: -.2rem;
  transform: translateY(-50%) translateX(8px);
}
.shows-col li:hover {
  background: linear-gradient(90deg,
    rgba(196,160,74,.07) 0%,
    rgba(196,160,74,.02) 60%,
    rgba(196,160,74,0) 100%);
  border-color: rgba(196,160,74,.3);
}
.shows-col-right li:hover {
  background: linear-gradient(270deg,
    rgba(196,160,74,.07) 0%,
    rgba(196,160,74,.02) 60%,
    rgba(196,160,74,0) 100%);
}
.shows-col:not(.shows-col-right) li:hover { padding-left: 1.4rem; }
.shows-col-right li:hover { padding-right: 1.4rem; }
.shows-col li:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.shows-col li strong {
  transition: color .35s var(--ease), letter-spacing .35s var(--ease);
}
.shows-col li:hover strong {
  color: var(--gold);
  letter-spacing: .2em;
}
.shows-col li span {
  transition: color .35s var(--ease);
}
.shows-col li:hover span { color: var(--text); }
.shows-col li time {
  transition: letter-spacing .35s var(--ease);
}
.shows-col li:hover time { letter-spacing: .32em; }
.shows-col-right li {
  grid-template-columns: 1fr auto;
  text-align: right;
}
.shows-col li time {
  font-family: var(--sans);
  font-size: .75rem;
  letter-spacing: .28em;
  color: var(--gold);
  white-space: nowrap;
}
.shows-col li strong {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: .2rem;
}
.shows-col li span {
  display: block;
  color: var(--text-soft);
  font-size: .76rem;
  font-style: italic;
}
.shows-col li time {
  font-size: .68rem;
}

/* Join — full-bleed photo on right, text on left */
.section-join {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(70px, 10vh, 120px) 0;
  background: var(--bg-deep);
}
.join-media { position: absolute; inset: 0; z-index: -1; }
.join-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 65% center;
  filter: contrast(1.05);
}
.join-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,13,14,.97) 0%, rgba(10,13,14,.92) 25%, rgba(10,13,14,.5) 55%, rgba(10,13,14,.05) 80%, rgba(10,13,14,0) 92%, rgba(10,13,14,.5) 100%),
    linear-gradient(180deg, rgba(10,13,14,0) 0%, rgba(10,13,14,0) 80%, rgba(10,13,14,.6) 100%);
}
.join-content {
  position: relative;
}
.join-copy {
  max-width: 540px;
}
.join-title { font-family: var(--serif); font-size: clamp(2rem, 3.6vw, 3rem); text-transform: none; letter-spacing: -.005em; font-weight: 500; line-height: 1.1; }
.join-sub { color: var(--text-soft); margin: .5rem 0 2rem; max-width: 36ch; font-size: .9rem; }
.join-form {
  border-top: 1px solid var(--line);
  padding-top: 2.4rem;
  margin-top: 2rem;
}
.join-label {
  display: block;
  font-size: .92rem;
  font-family: var(--serif);
  margin-bottom: .6rem;
}
.req { color: var(--gold); }
.join-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.25);
  padding-bottom: .4rem;
  margin-bottom: 1.6rem;
}
.join-row input[type="email"] {
  flex: 1 1 220px;
  background: transparent;
  color: var(--text);
  border: 0;
  padding: .8em 0;
  font: inherit;
  outline: none;
}
.join-check {
  display: flex; align-items: center; gap: .8rem;
  font-size: .92rem;
  color: var(--text-soft);
  cursor: pointer;
  margin: 1rem 0 1.5rem;
}
.join-check input { accent-color: var(--gold); width: 16px; height: 16px; }
.form-status { min-height: 1.4em; font-size: .9rem; color: var(--text-soft); }
.form-status.is-success { color: var(--gold); }
.form-status.is-error { color: #ff8b75; }
.join-foot {
  margin-top: 2.4rem;
  text-align: center;
  font-size: .58rem;
  letter-spacing: .3em;
}
.join-email {
  text-align: center;
  margin-top: .6rem;
  font-size: .82rem;
}
.join-email a { font-family: var(--serif); }
.join-media img {
  width: 100%;
  height: 100%;
  max-height: 720px;
  object-fit: cover;
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 1.4rem var(--pad-x);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-deep);
  text-align: center;
}
.footer-line {
  font-family: var(--serif);
  font-size: 1rem;
  margin: 0;
  color: var(--text-soft);
  letter-spacing: .03em;
}
.footer-line em { color: var(--gold); }

/* =========================================================
   COLLECTION PAGE — luxury editorial layout
   ========================================================= */
.collection-page {
  position: relative;
  background:
    var(--noise),
    var(--bg);
}

/* Hero */
.col-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(90px, 12vh, 130px) var(--pad-x) clamp(36px, 5vh, 60px);
  min-height: clamp(420px, 60vh, 580px);
  display: flex; align-items: center;
}
.col-hero-bg {
  position: absolute; inset: 0; z-index: -2;
  /* Single uninterrupted dark base — no layered radials that can show edges */
  background: var(--bg-deep);
}
.col-hero-vignette {
  position: absolute; inset: 0;
  /* Cinematic ambient lives HERE, where it can fade naturally into the dark
     without ever hitting a container edge. Two ultra-soft pools of light:
     a gold one centered on the iPads (right), a cool one anchoring the text (left). */
  background:
    radial-gradient(ellipse 55% 60% at 72% 50%,
      rgba(196,160,74,.10) 0%,
      rgba(196,160,74,.05) 30%,
      rgba(196,160,74,.02) 55%,
      transparent 80%),
    radial-gradient(ellipse 60% 80% at 18% 60%,
      rgba(50,70,100,.08) 0%,
      rgba(50,70,100,.03) 45%,
      transparent 75%),
    /* gentle corner falloff — barely there */
    radial-gradient(ellipse 130% 110% at 50% 50%,
      transparent 70%,
      rgba(10,13,14,.4) 100%);
}
.col-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
.col-hero-copy {
  max-width: 520px;
}
.col-hero-title {
  font-size: clamp(2rem, 4vw, 3.4rem);
  text-transform: none;
  letter-spacing: -.005em;
  font-weight: 500;
  margin: .2rem 0 .9rem;
  line-height: 1.05;
}
.col-hero-title em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.col-hero-sub {
  color: var(--text-soft);
  font-size: .92rem;
  line-height: 1.65;
  margin: 0 0 1.6rem;
  max-width: 42ch;
}

/* Hero feature bullets — premium clarity row */
.col-hero-features {
  list-style: none; padding: 0; margin: 0 0 2rem;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: .55rem 1.8rem;
  justify-content: start;
}
.col-hero-features li {
  display: flex; align-items: center; gap: .65rem;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--text-soft);
  text-transform: none;
  font-family: var(--sans);
  font-weight: 400;
}
.col-hero-features li::before {
  content: "✓";
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(196,160,74,.6);
  background:
    radial-gradient(circle at 50% 50%, rgba(196,160,74,.22) 0%, rgba(196,160,74,0) 70%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  color: var(--gold);
  font-weight: 500;
  flex-shrink: 0;
  line-height: 1;
}

/* Hero dual CTA */
.col-hero-actions {
  display: flex; flex-wrap: wrap;
  gap: 1rem 1.2rem;
  align-items: center;
  margin: 0;
}
.col-hero-actions .btn-bordered { padding: 1.05em 2.2em; }
.col-hero-actions .btn-link {
  display: inline-flex; align-items: center; gap: .8em;
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text);
  padding: .9em 0;
  position: relative;
  transition: color .3s var(--ease);
}
.col-hero-actions .btn-link::after {
  content: "→";
  font-size: .9rem;
  letter-spacing: 0;
  transition: transform .3s var(--ease);
}
.col-hero-actions .btn-link:hover { color: var(--gold); }
.col-hero-actions .btn-link:hover::after { transform: translateX(5px); }

/* Hero stack — three iPad MasterTab mockups floating in space.
   PNGs already include the iPad bezel; we just stage and light them.
   No background, no glow element here — ambient lighting lives in .col-hero-vignette
   so it blends seamlessly with the entire hero, never clipped by this container. */
.col-hero-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 5/4;
  perspective: 1600px;
  perspective-origin: 50% 60%;
}
/* Legacy glow node — disabled. Light now comes from the hero's ambient layer. */
.col-hero-glow { display: none; }
.col-hero-ipad {
  position: absolute;
  width: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 36px 64px rgba(0,0,0,.78))
    drop-shadow(0 14px 26px rgba(0,0,0,.55));
  transition: transform 1.1s var(--ease), filter .9s var(--ease), opacity .9s var(--ease);
  will-change: transform;
}
/* Backward-compat: any .col-hero-box markup still gets staged sensibly */
.col-hero-box { display: none; }

/* Center iPad — large, front, slight downward tilt.
   translateY pushes the iPad DOWN so its bottom edge sits
   on the same floor line as the two TAB boxes flanking it. */
.col-hero-ipad-1 {
  left: 50%; top: 50%;
  width: 78%;
  z-index: 3;
  transform: translate(-50%, -50%) translateY(18%) translateZ(0) rotateY(0deg) rotateX(2deg);
}
/* Left iPad — recessed, angled to face slightly inward */
.col-hero-ipad-2 {
  left: 50%; top: 50%;
  width: 60%;
  z-index: 2;
  opacity: .72;
  transform: translate(-50%, -50%) translateX(-46%) translateY(-8%) translateZ(-120px) rotateY(18deg) rotateX(2deg);
  filter:
    drop-shadow(0 30px 50px rgba(0,0,0,.7))
    drop-shadow(0 10px 18px rgba(0,0,0,.5));
}
/* Right iPad — mirror */
.col-hero-ipad-3 {
  left: 50%; top: 50%;
  width: 60%;
  z-index: 2;
  opacity: .72;
  transform: translate(-50%, -50%) translateX(46%) translateY(-8%) translateZ(-120px) rotateY(-18deg) rotateX(2deg);
  filter:
    drop-shadow(0 30px 50px rgba(0,0,0,.7))
    drop-shadow(0 10px 18px rgba(0,0,0,.5));
}
/* Cinematic hover — the trio breathes outward, center lifts and gains a soft gold glow.
   Hover keeps the floor-rest position (translateY 18%) and lifts a few px from there,
   so the iPad still feels grounded but reacts to the cursor. */
.col-hero-stack:hover .col-hero-ipad-1 {
  transform: translate(-50%, -50%) translateY(18%) translateZ(60px) translateY(-8px) rotateX(0deg);
  filter:
    drop-shadow(0 50px 90px rgba(0,0,0,.85))
    drop-shadow(0 18px 30px rgba(0,0,0,.6))
    drop-shadow(0 0 44px rgba(196,160,74,.3));
}
.col-hero-stack:hover .col-hero-ipad-2 {
  transform: translate(-50%, -50%) translateX(-54%) translateY(-12%) translateZ(-100px) rotateY(22deg);
  opacity: .82;
}
.col-hero-stack:hover .col-hero-ipad-3 {
  transform: translate(-50%, -50%) translateX(54%) translateY(-12%) translateZ(-100px) rotateY(-22deg);
  opacity: .82;
}

/* Intro — horizontal, takes minimal vertical space so products are visible immediately */
.section-col-intro {
  padding: clamp(20px, 3vh, 36px) 0 clamp(14px, 2vh, 24px);
  text-align: center;
}
.col-intro-eyebrow {
  font-size: .72rem;
  letter-spacing: .26em;
  margin: 0 0 .35rem;
}
.col-intro-sub {
  font-size: .8rem;
  line-height: 1.5;
  max-width: 60ch;
  margin: 0 auto;
  font-style: italic;
  color: var(--text-soft);
  font-family: var(--serif);
}

/* =========================================================
   Tablature Grid — minimal art gallery (Section 3)
   ========================================================= */
.section-col-grid {
  padding: clamp(80px, 11vh, 130px) 0 clamp(80px, 10vh, 130px);
  border-top: 1px solid var(--line-soft);
}
.col-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(48px, 6vh, 72px) clamp(20px, 2.5vw, 36px);
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

.col-card { position: relative; }

.col-card-link {
  display: flex; flex-direction: column;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  transition: transform .55s var(--ease);
}
.col-card-link:hover { transform: translateY(-4px); }

/* Numeração "Nº 01" removida — fica oculta caso markup antigo permaneça */
.col-card-num { display: none; }

/* Artwork — transparent vertical (3:4) covers floating on a soft gold halo.
   No frame, no clipping — the drop-shadow follows the artwork's silhouette. */
.col-card-art {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  display: grid; place-items: center;
  margin-bottom: 1.4rem;
  isolation: isolate;
  /* the halo sits behind the art via ::before */
}
.col-card-art::before {
  /* Halo ambiente ultra-suave — quase imperceptível em repouso */
  content: "";
  position: absolute;
  inset: -10% -12%;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 45% at 50% 55%,
      rgba(196,160,74,.16) 0%,
      rgba(196,160,74,.05) 40%,
      transparent 75%);
  opacity: .4;
  filter: blur(14px);
  transition: opacity .9s var(--ease), transform 1s var(--ease);
  pointer-events: none;
}
.col-card-link:hover .col-card-art::before {
  opacity: .9;
  transform: scale(1.15);
}
.col-card-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 1s var(--ease), filter .9s var(--ease);
  filter:
    drop-shadow(0 16px 24px rgba(0,0,0,.58))
    drop-shadow(0 5px 10px rgba(0,0,0,.42));
}
.col-card-link:hover .col-card-art img {
  transform: scale(1.035) translateY(-4px);
  filter:
    drop-shadow(0 26px 38px rgba(0,0,0,.7))
    drop-shadow(0 8px 16px rgba(0,0,0,.5))
    drop-shadow(0 0 24px rgba(196,160,74,.18));
}
/* The legacy overlay element is no longer used — keep it inert so old markup stays safe */
.col-card-glow { display: none; }

/* Meta block — collectible editorial: more breathing, micro-rule between caption & price */
.col-card-meta {
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center;
  gap: .45rem;
  margin-top: 1.4rem;
}
.col-card-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: .015em;
  line-height: 1.25;
  color: var(--text);
  margin: 0;
  transition: color .35s var(--ease);
}
.col-card-link:hover .col-card-title { color: var(--gold); }
.col-card-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.4;
}
/* Micro editorial rule between caption and price — tiny gold dash, like a museum tag */
.col-card-price {
  position: relative;
  font-family: var(--serif);
  font-size: .88rem;
  color: var(--gold-soft);
  margin: .55rem 0 .25rem;
  letter-spacing: .015em;
  line-height: 1;
  font-feature-settings: "tnum";
  transition: color .35s var(--ease);
}
.col-card-price::before {
  content: "";
  position: absolute;
  top: -.55rem; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 1px;
  background: var(--gold);
  opacity: .35;
  transition: width .45s var(--ease), opacity .45s var(--ease);
}
.col-card-link:hover .col-card-price { color: var(--gold); }
.col-card-link:hover .col-card-price::before { width: 28px; opacity: .7; }
.col-card-cta {
  display: inline-flex; align-items: center; gap: .55em;
  margin-top: .15rem;
  font-size: .5rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-family: var(--sans);
  transition: color .35s var(--ease), letter-spacing .4s var(--ease);
}
.col-card-cta::after {
  content: "→";
  letter-spacing: 0;
  transition: transform .35s var(--ease);
}
.col-card-link:hover .col-card-cta { color: var(--gold); }
.col-card-link:hover .col-card-cta::after { transform: translateX(5px); }

/* =========================================================
   Collection card refinements — TAB label + clickable actions
   The tag replaces "Signature Arrangement"; actions replace
   the single "View Product" CTA. Same composition, more agency.
   ----- DESIGN NOTES -----
   • No hairline rules ("—" or "|") — separators removed for flow.
   • "TAB" reads as a real label, not body text — big, gold, indexed.
   • Buttons are real buttons, not text links — clear affordance,
     gold accent on the primary action, restrained on the secondary.
   ========================================================= */
.col-card-tag {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .92rem;            /* was .56rem — now reads as a real label */
  letter-spacing: .52em;
  text-indent: .52em;            /* visually centers despite trailing tracking */
  text-transform: uppercase;
  color: var(--gold);
  margin: .2rem 0 .55rem;
  padding: 0;
  transition: color .35s var(--ease), letter-spacing .35s var(--ease);
}
.col-card-link:hover .col-card-tag {
  letter-spacing: .58em;
  text-indent: .58em;
}

/* Hairline rule above price removed — keep the price clean */
.col-card-price::before { content: none; display: none; }

/* Title link — preserve the heading typography while making
   the title clickable on its own. */
.col-card-title a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}
.col-card-title a:hover { color: var(--gold); }

/* Dual action row — real buttons, no separator hairline. */
.col-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.1rem;
  justify-content: center;
  align-items: stretch;
}
.col-card-actions-sep { display: none !important; } /* legacy markup safety */

.col-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85em 1.35em;
  background: transparent;
  border: .5px solid var(--line);
  border-radius: 1px;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background .35s var(--ease),
    border-color .35s var(--ease),
    color .35s var(--ease),
    transform .35s var(--ease);
}
.col-card-action:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}

/* Add-to-Cart — primary action, gold accent so it reads as desirable */
.col-card-action--add {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(196,160,74,.05);
}
.col-card-action--add:hover {
  background: var(--gold);
  color: var(--bg-deep);
  border-color: var(--gold);
}

/* On smaller cards, let the buttons stack rather than truncate */
@media (max-width: 760px) {
  .col-card-actions { gap: .5rem; }
  .col-card-action { padding: .8em 1.1em; font-size: .55rem; }
}
@media (max-width: 520px) {
  .col-card-actions { flex-direction: column; align-items: stretch; }
  .col-card-action { padding: .85em 1em; }
}

/* =========================================================
   Hero — floating TAB boxes (replaces left/right iPads)
   The center iPad remains the focal point; these are
   atmospheric, secondary, intentionally recessed.
   ========================================================= */
.col-hero-tabbox {
  position: absolute;
  left: 50%; top: 50%;
  width: auto;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  filter:
    drop-shadow(0 28px 50px rgba(0,0,0,.7))
    drop-shadow(0 12px 22px rgba(0,0,0,.45));
  transition: transform 1.1s var(--ease), opacity .9s var(--ease), filter .9s var(--ease);
  will-change: transform;
}
.col-hero-tabbox--left {
  /* Vertical TAB boxes (3:4) flanking the central iPad.
     - width 44% = 10% larger than 40%
     - translateY NEGATIVE so they sit higher on the canvas,
       which makes the BOTTOM edge of each TAB box rest on
       the same floor line as the iPad below it. Boxes are
       taller than iPad in stack proportion, so their tops
       naturally rise above the iPad — that's the desired
       "standing on the table" look. */
  width: 44%;
  opacity: .62;
  transform:
    translate(-50%, -50%)
    translateX(-62%) translateY(-6%) translateZ(-90px)
    rotateY(18deg) rotateX(2deg);
}
.col-hero-tabbox--right {
  width: 44%;
  opacity: .62;
  transform:
    translate(-50%, -50%)
    translateX(62%) translateY(-6%) translateZ(-90px)
    rotateY(-18deg) rotateX(2deg);
}
.col-hero-stack:hover .col-hero-tabbox--left {
  /* On hover: boxes lift gently off the table — translateY
     goes more negative (further up) — but the ground-rest
     relationship still reads since the lift is small. */
  transform:
    translate(-50%, -50%)
    translateX(-70%) translateY(-10%) translateZ(-70px)
    rotateY(22deg) rotateX(2deg);
  opacity: .78;
  filter:
    drop-shadow(0 40px 70px rgba(0,0,0,.82))
    drop-shadow(0 16px 28px rgba(0,0,0,.55))
    drop-shadow(0 0 32px rgba(196,160,74,.2));
}
.col-hero-stack:hover .col-hero-tabbox--right {
  transform:
    translate(-50%, -50%)
    translateX(70%) translateY(-10%) translateZ(-70px)
    rotateY(-22deg) rotateX(2deg);
  opacity: .78;
  filter:
    drop-shadow(0 40px 70px rgba(0,0,0,.82))
    drop-shadow(0 16px 28px rgba(0,0,0,.55))
    drop-shadow(0 0 32px rgba(196,160,74,.2));
}

/* =========================================================
   MasterTab branding — slight lift to make the wordmark
   feel iconic without ever shouting.
   ========================================================= */
.mt-brand {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: .26em; /* tighter than the eyebrow → reads as a wordmark */
  color: var(--gold);
}

/* Eyebrow now has a visual mark before it — museum-tag rule */
.mt-eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--gold);
  opacity: .55;
  display: inline-block;
}
/* On mirrored cards, place the rule on the right of the text */
.mt-card:nth-child(even) .mt-eyebrow {
  flex-direction: row-reverse;
}

/* =========================================================
   Product detail page — Buy Now + Add to Cart pair
   ========================================================= */
.prod-buy-actions {
  display: flex; flex-wrap: wrap;
  gap: .9rem 1.6rem;
  align-items: center;
  margin-top: .6rem;
}
.prod-buy-actions .btn-bordered { padding: .95em 2.1em; }

.btn-link-cart {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: color .3s var(--ease);
}
.btn-link-cart::after {
  content: "→";
  letter-spacing: 0;
  transition: transform .3s var(--ease);
}
.btn-link-cart:hover { color: var(--gold); }
.btn-link-cart:hover::after { transform: translateX(4px); }

/* =========================================================
   MasterTab actions — make span-CTAs work as <button>
   without altering the cinematic feel.
   ========================================================= */
.mt-actions button.mt-cta-primary {
  font-family: var(--sans);
  cursor: pointer;
}
.mt-actions button.mt-cta-link {
  font-family: var(--sans);
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}
/* When hovering ONLY the primary button (not the whole card),
   keep the gold-fill behavior for direct affordance. */
.mt-cta-primary:hover {
  background: var(--gold);
  color: var(--bg-deep);
}
.mt-cta-primary:hover::after { transform: translateX(4px); }
.mt-cta-link:hover { color: var(--text); }
.mt-cta-link:hover::after { transform: translateX(4px); }

/* Features */
.section-col-features {
  padding: clamp(60px, 9vh, 110px) 0 clamp(80px, 11vh, 130px);
  border-top: 1px solid var(--line-soft);
  background:
    var(--noise),
    var(--bg-deep);
}
.col-features {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3.5vw, 48px);
  max-width: 1280px;
  margin: 0 auto;
}
.col-feature {
  text-align: center;
  padding: 0 .5rem;
}
.col-feature-icon {
  color: var(--gold);
  margin: 0 auto 1.4rem;
  display: block;
  opacity: .9;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.col-feature:hover .col-feature-icon {
  opacity: 1;
  transform: translateY(-3px) scale(1.06);
}
.col-feature-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: .01em;
  margin: 0 0 .6rem;
  color: var(--text);
}
.col-feature-desc {
  font-size: .82rem;
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 26ch;
  margin: 0 auto;
}

/* Collection responsive */
@media (max-width: 980px) {
  .col-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .col-hero-stack { aspect-ratio: 16/10; max-width: 540px; margin: 0 auto; }
  .col-hero-features { justify-content: center; }
  .col-hero-actions { justify-content: flex-start; }
  .col-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(40px, 5vh, 56px) clamp(20px, 3vw, 32px);
    max-width: 880px;
  }
  .col-features { grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }
}
@media (max-width: 760px) {
  .col-hero-features { grid-template-columns: 1fr; gap: .5rem; }
  .col-hero-actions { flex-direction: column; align-items: stretch; }
  .col-hero-actions .btn-bordered { width: 100%; }
  .col-hero-actions .btn-link { justify-content: center; }
  .col-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 620px;
    gap: 44px 28px;
  }
}
@media (max-width: 520px) {
  .col-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 380px;
    gap: 44px 24px;
  }
  .col-card-title { font-size: 1rem; }
  .col-card-caption { font-size: .7rem; }
  .col-features { grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================================
   SECTION HEADING — used by Tablatures and MasterTabs sections
   ========================================================= */
.col-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vh, 70px);
  padding-inline: var(--pad-x);
}
.col-section-eyebrow {
  font-size: .68rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 1rem;
  display: inline-flex; align-items: center; gap: 1.2rem;
}
.col-section-eyebrow::before,
.col-section-eyebrow::after {
  content: "";
  width: 32px; height: 1px;
  background: var(--gold);
  opacity: .55;
}
.col-section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  letter-spacing: -.005em;
  line-height: 1.1;
  margin: 0 0 1rem;
  color: var(--text);
}
.col-section-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.col-section-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(.95rem, 1.3vw, 1.1rem);
  color: var(--text-soft);
  line-height: 1.5;
  margin: 0;
  max-width: 50ch;
  margin-inline: auto;
}

/* =========================================================
   MASTERTABS — video lesson presentation, MasterClass-inspired
   ========================================================= */
.section-mastertabs {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(80px, 11vh, 130px) 0 clamp(80px, 11vh, 130px);
  background: var(--bg-deep);
  border-top: 1px solid var(--line-soft);
}
.section-mastertabs::before {
  /* cinematic backdrop glow */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(196,160,74,.07) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(40,55,80,.10) 0%, transparent 70%);
  pointer-events: none;
}

/* MasterTabs — full-width horizontal cinematic cards (streaming platform feel).
   Each card alternates: iPad on left/info on right, then mirror on the next. */
.mt-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: clamp(80px, 12vh, 140px);
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: var(--pad-x);
}
.mt-card {
  position: relative;
  isolation: isolate;
}
.mt-card-link {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  text-decoration: none;
  color: inherit;
}
/* Mirror every other card */
.mt-card:nth-child(even) .mt-visual { order: 2; }
.mt-card:nth-child(even) .mt-info   { order: 1; text-align: right; }
.mt-card:nth-child(even) .mt-features { justify-content: flex-end; }
.mt-card:nth-child(even) .mt-actions  { justify-content: flex-end; }

/* iPad PNG visual — floating with cinematic shadow + ambient halo */
.mt-visual {
  position: relative;
  display: grid; place-items: center;
  isolation: isolate;
}
.mt-visual::before {
  /* atmospheric halo — wide soft cinematic glow behind iPad */
  content: "";
  position: absolute;
  inset: -10% -15%;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 45% at 50% 50%,
      rgba(196,160,74,.14) 0%,
      rgba(196,160,74,.05) 35%,
      rgba(60,80,120,.04) 60%,
      transparent 80%);
  filter: blur(28px);
  opacity: .75;
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  pointer-events: none;
}
.mt-card-link:hover .mt-visual::before {
  opacity: 1;
  transform: scale(1.12);
}
.mt-ipad {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 38px 64px rgba(0,0,0,.75))
    drop-shadow(0 16px 28px rgba(0,0,0,.5))
    drop-shadow(0 4px 8px rgba(0,0,0,.4));
  transition: transform 1s var(--ease), filter 1s var(--ease);
  will-change: transform;
}
.mt-card-link:hover .mt-ipad {
  transform: translateY(-8px) scale(1.012);
  filter:
    drop-shadow(0 52px 90px rgba(0,0,0,.82))
    drop-shadow(0 20px 36px rgba(0,0,0,.58))
    drop-shadow(0 0 42px rgba(196,160,74,.18));
}
/* Mirrored variant — flips the iPad horizontally for compositional balance.
   The flip is appended LAST so it survives the hover transform chain. */
.mt-ipad.mt-ipad--mirrored { transform: scaleX(-1); }
.mt-card-link:hover .mt-ipad.mt-ipad--mirrored {
  transform: translateY(-8px) scale(1.012) scaleX(-1);
}

/* Screen-content overlay — sits on top of a mirrored iPad and shows ONLY the
   screen rectangle of the un-flipped image, so any baked-in text (titles,
   timecode, etc.) reads correctly. Bezel underneath stays mirrored. */
.mt-ipad-screen-fix {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  /* clip to the screen area only (rough iPad bezel proportions) */
  clip-path: inset(7.5% 8.5% 8% 8.5% round 14px);
  -webkit-clip-path: inset(7.5% 8.5% 8% 8.5% round 14px);
  z-index: 1;
  pointer-events: none;
  /* match the same drop-shadow filter so highlights/contrast align with the bezel */
  filter:
    drop-shadow(0 38px 64px rgba(0,0,0,.75))
    drop-shadow(0 16px 28px rgba(0,0,0,.5))
    drop-shadow(0 4px 8px rgba(0,0,0,.4));
  transition: transform 1s var(--ease), filter 1s var(--ease);
}
/* Mirror the hover lift so it tracks with the bezel underneath */
.mt-card-link:hover .mt-ipad-screen-fix {
  transform: translateY(-8px) scale(1.012);
  filter:
    drop-shadow(0 52px 90px rgba(0,0,0,.82))
    drop-shadow(0 20px 36px rgba(0,0,0,.58))
    drop-shadow(0 0 42px rgba(196,160,74,.18));
}

/* Play button hidden — the iPad PNGs already include a baked-in play icon,
   so the CSS overlay was redundant. Kept the rules below for easy revert. */
.mt-play { display: none; }
.mt-play--legacy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid; place-items: center;
  pointer-events: none;
}
.mt-play-btn {
  position: relative;
  width: clamp(74px, 7vw, 100px);
  height: clamp(74px, 7vw, 100px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.06) 0%, rgba(17,20,21,.5) 70%);
  border: .5px solid rgba(255,255,255,.45);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  display: grid; place-items: center;
  transition:
    transform .55s var(--ease),
    background .45s var(--ease),
    border-color .45s var(--ease),
    box-shadow .55s var(--ease);
  box-shadow:
    /* outer ring at distance — subtle museum-spotlight framing */
    0 0 0 1px rgba(255,255,255,.08),
    0 0 0 8px rgba(255,255,255,.04),
    /* depth shadow */
    0 12px 36px rgba(0,0,0,.55),
    /* very soft inner gold halo */
    inset 0 0 24px rgba(196,160,74,.08);
}
.mt-play-btn::after {
  content: "";
  width: 0; height: 0;
  border-left: clamp(18px, 1.8vw, 24px) solid var(--text);
  border-top: clamp(12px, 1.2vw, 16px) solid transparent;
  border-bottom: clamp(12px, 1.2vw, 16px) solid transparent;
  margin-left: clamp(5px, .5vw, 7px);
  transition: border-left-color .45s var(--ease), transform .55s var(--ease);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.mt-card-link:hover .mt-play-btn {
  transform: scale(1.06);
  background: radial-gradient(circle at 50% 35%, rgba(232,193,104,1) 0%, var(--gold) 80%);
  border-color: var(--gold);
  box-shadow:
    0 0 0 1px rgba(196,160,74,.25),
    0 0 0 10px rgba(196,160,74,.08),
    0 16px 44px rgba(0,0,0,.5),
    0 0 36px rgba(196,160,74,.35);
}
.mt-card-link:hover .mt-play-btn::after {
  border-left-color: var(--bg-deep);
  transform: scale(1.05);
}

/* Info column */
.mt-info { text-align: left; }
.mt-eyebrow {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 .9rem;
  display: inline-flex; align-items: center; gap: .8rem;
}
.mt-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3rem);
  letter-spacing: -.01em;
  line-height: 1.05;
  margin: 0 0 .6rem;
  color: var(--text);
  transition: color .35s var(--ease);
}
.mt-card-link:hover .mt-title { color: var(--gold); }
.mt-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(.95rem, 1.3vw, 1.1rem);
  color: var(--text-soft);
  margin: 0 0 1.6rem;
  line-height: 1.45;
  max-width: 38ch;
}
.mt-card:nth-child(even) .mt-sub { margin-left: auto; }

.mt-desc {
  color: var(--text-soft);
  font-size: .88rem;
  line-height: 1.85;
  margin: 0 0 2rem;
  max-width: 42ch;
}
.mt-card:nth-child(even) .mt-desc { margin-left: auto; }

/* Feature icons row */
.mt-features {
  list-style: none; padding: 0; margin: 0 0 1.8rem;
  display: flex; flex-wrap: wrap;
  gap: .7rem 1.5rem;
  max-width: 480px;
}
.mt-features li {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.mt-features svg {
  width: 14px; height: 14px;
  color: var(--gold);
  flex-shrink: 0;
}

/* Dual CTA row */
.mt-actions {
  display: flex; flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: center;
}
.mt-cta-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  padding: 1em 2em;
  border: .5px solid var(--gold);
  font-size: .6rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--sans);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.mt-cta-primary::after {
  content: "→";
  letter-spacing: 0;
  transition: transform .3s var(--ease);
}
.mt-card-link:hover .mt-cta-primary {
  background: var(--gold);
  color: var(--bg-deep);
}
.mt-card-link:hover .mt-cta-primary::after { transform: translateX(4px); }
.mt-cta-link {
  display: inline-flex; align-items: center; gap: .7em;
  font-size: .6rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: color .3s var(--ease);
}
.mt-cta-link::after {
  content: "→";
  letter-spacing: 0;
  transition: transform .3s var(--ease);
}
.mt-card-link:hover .mt-cta-link { color: var(--text); }
.mt-card-link:hover .mt-cta-link::after { transform: translateX(4px); }

/* =========================================================
   PREMIUM EXPERIENCE STRIP — cinematic horizontal manifesto
   ========================================================= */
.section-premium-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(80px, 12vh, 140px) var(--pad-x);
  text-align: center;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(196,160,74,.10) 0%, transparent 65%),
    var(--bg-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-premium-strip::before {
  /* film grain layer */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--noise);
  opacity: .6;
  pointer-events: none;
  z-index: -1;
}
.premium-strip-rule {
  display: block;
  width: 80px; height: 1px;
  background: var(--gold);
  opacity: .6;
  margin: 0 auto 2rem;
}
.premium-strip-quote {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.3;
  letter-spacing: -.005em;
  max-width: 26ch;
  margin: 0 auto;
  color: var(--text);
}
.premium-strip-quote em {
  font-style: italic;
  color: var(--gold);
  font-weight: 500;
}
.premium-strip-sub {
  font-size: .68rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 2rem 0 0;
}

/* MasterTabs responsive — vertical stack with iPad on top */
@media (max-width: 900px) {
  .mt-list { gap: clamp(64px, 9vh, 90px); }
  .mt-card-link {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }
  .mt-card:nth-child(even) .mt-visual { order: 0; }
  .mt-card:nth-child(even) .mt-info { order: 0; text-align: center; }
  .mt-card:nth-child(even) .mt-features,
  .mt-card:nth-child(even) .mt-actions { justify-content: center; }
  .mt-info { text-align: center; }
  .mt-eyebrow { justify-content: center; }
  .mt-features { justify-content: center; max-width: none; }
  .mt-actions { justify-content: center; }
  .mt-sub, .mt-desc { margin-inline: auto; }
  .mt-card:nth-child(even) .mt-sub,
  .mt-card:nth-child(even) .mt-desc { margin-inline: auto; }
}

/* =========================================================
   PRODUCT PAGE — luxury detail experience
   ========================================================= */
.product-page {
  position: relative;
  background:
    var(--noise),
    var(--bg);
  padding-top: 64px;  /* clear fixed header */
}

/* Back link bar */
.prod-back-bar {
  padding: clamp(10px, 1.5vh, 18px) var(--pad-x) 0;
  max-width: 1280px;
  margin: 0 auto;
}
.prod-back {
  display: inline-flex; align-items: center; gap: .8em;
  font-size: .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.prod-back::before {
  content: "←";
  font-size: .9rem;
  letter-spacing: 0;
  transition: transform .3s var(--ease);
}
.prod-back:hover { color: var(--gold); }
.prod-back:hover::before { transform: translateX(-4px); }

/* Hero — cover left, info right (sized to fit above-the-fold on desktop) */
.prod-hero {
  padding: clamp(14px, 2vh, 22px) var(--pad-x) clamp(20px, 3vh, 36px);
  max-width: 1280px;
  margin: 0 auto;
}
.prod-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
/* Cover — vertical 3:4 transparent artwork. No frame, drop-shadow follows alpha. */
.prod-cover {
  position: relative;
  aspect-ratio: 3/4;
  max-height: calc(100vh - 160px);
  width: 100%;
  display: grid; place-items: center;
  isolation: isolate;
  margin-inline: auto;
}
.prod-cover::before {
  /* halo dourado mais presente — luz de palco atrás da arte */
  content: "";
  position: absolute;
  inset: -6% -10%;
  z-index: -1;
  background:
    radial-gradient(ellipse 65% 60% at 50% 55%,
      rgba(196,160,74,.36) 0%,
      rgba(196,160,74,.16) 38%,
      rgba(196,160,74,.05) 65%,
      transparent 80%);
  filter: blur(8px);
  pointer-events: none;
}
.prod-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 44px 80px rgba(0,0,0,.85))
    drop-shadow(0 16px 32px rgba(0,0,0,.6))
    drop-shadow(0 4px 10px rgba(0,0,0,.5))
    drop-shadow(0 0 40px rgba(196,160,74,.18));
}

.prod-info {
  padding-top: clamp(4px, 1vh, 14px);
}
.prod-eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: .58rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 .85rem;
}
.prod-eyebrow::after {
  content: "";
  width: 50px; height: 1px;
  background: var(--gold);
  opacity: .6;
}
.prod-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.85rem, 3.6vw, 2.8rem);
  letter-spacing: .02em;
  line-height: 1.05;
  margin: 0 0 .55rem;
  color: var(--text);
  text-transform: uppercase;
}
.prod-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(.92rem, 1.15vw, 1.05rem);
  line-height: 1.4;
  color: var(--gold-soft);
  margin: 0 0 .8rem;
  max-width: 38ch;
}
.prod-desc {
  color: var(--text-soft);
  font-size: .82rem;
  line-height: 1.65;
  max-width: 48ch;
  margin: 0 0 1.1rem;
}

/* Specs */
.prod-specs {
  list-style: none; padding: 0; margin: 0 0 2.4rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.prod-specs li {
  padding: 1rem .2rem;
  border-bottom: 1px solid var(--line-soft);
}
.prod-specs li:nth-child(odd) {
  border-right: 1px solid var(--line-soft);
  padding-right: 1rem;
}
.prod-specs li:nth-child(even) {
  padding-left: 1rem;
}
.prod-specs li:nth-last-child(-n+2) { border-bottom: 0; }
.prod-specs span {
  display: block;
  font-size: .58rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: .35rem;
}
.prod-specs strong {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--text);
  letter-spacing: .005em;
}

/* Price + CTA */
.prod-buy-block {
  display: flex; align-items: center; gap: 1.6rem;
  flex-wrap: wrap;
  margin: 0 0 2rem;
}
.prod-price {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2rem;
  color: var(--gold);
  margin: 0;
  line-height: 1;
}
.prod-price small {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: .3rem;
}
.prod-buy-block .btn {
  flex: 1 1 200px;
}

/* Includes list (legacy — kept in case used elsewhere) */
.prod-includes {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem 1.4rem;
}
.prod-includes li {
  font-size: .76rem;
  color: var(--text-soft);
  display: flex; align-items: center; gap: .7rem;
  letter-spacing: .02em;
}
.prod-includes li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(196,160,74,.15);
}

/* ---------- Sheet music preview card ---------- */
.prod-tab-preview {
  margin: 0 0 1rem;
  padding: 8px 6px;
  background: linear-gradient(180deg, #efe7d4 0%, #e8dec7 100%);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 14px 28px rgba(0,0,0,.5),
    0 4px 10px rgba(0,0,0,.32),
    0 0 0 1px rgba(196,160,74,.18);
}
.prod-tab-preview img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ---------- Includes bar (icons row + buy card) ---------- */
.prod-includes-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: 1.4rem;
  align-items: center;
  margin: 0;
  padding-top: .85rem;
  border-top: 1px solid var(--line-soft);
}
.prod-includes-icons {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
}
.prod-includes-icons li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .35rem;
}
.ic-tile {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: .5px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(196,160,74,.04);
  flex-shrink: 0;
}
.ic-tile svg { width: 16px; height: 16px; }
.ic-label {
  font-size: .52rem;
  letter-spacing: .1em;
  line-height: 1.4;
  color: var(--text-soft);
  text-transform: none;
}

/* Buy card on the right */
.prod-buy-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .55rem;
}
.prod-buy-card .prod-price {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.55rem;
  color: var(--gold);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: .35rem;
  flex-wrap: wrap;
}
.prod-buy-card .prod-price small {
  display: inline-block;
  font-style: normal;
  font-family: var(--sans);
  font-size: .52rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-right: .55rem; /* ensures clear gap between "FROM" and "$14.90" */
}
.prod-price-cur {
  font-style: normal;
  font-family: var(--sans);
  font-size: .55em;
  color: var(--text-soft);
  letter-spacing: .14em;
  margin-left: .45rem; /* clear gap between "$14.90" and "USD" */
}
.prod-buy-card .prod-buy-actions {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.prod-buy-card .btn { width: 100%; }
.prod-buy-card .btn-gold-filled {
  font-size: .62rem;
  letter-spacing: .24em;
  padding: .85em 1.6em;
}
.prod-buy-card .btn-bordered {
  padding: .7em 1.6em;
  font-size: .56rem;
  letter-spacing: .3em;
}
.prod-secure {
  margin: 0;
  font-size: .52rem;
  letter-spacing: .12em;
  color: var(--gold-soft);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  opacity: .9;
}

/* =========================================================
   MASTERTAB PAGE — video lesson product page
   Reuses .product-page / .prod-* classes from tab page;
   only overrides what's specific to the MasterTab layout.
   ========================================================= */

/* Cover override — iPad mockup is landscape (~4:3), not portrait 3:4 */
.mtp-cover {
  aspect-ratio: auto;
  max-height: calc(100vh - 180px);
}
.mtp-cover img {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 200px);
  object-fit: contain;
  filter:
    drop-shadow(0 36px 60px rgba(0,0,0,.7))
    drop-shadow(0 14px 22px rgba(0,0,0,.5))
    drop-shadow(0 0 30px rgba(196,160,74,.12));
}
/* Hide the gold halo that lives behind tab covers — iPads have their own light */
.mtp-cover::before { display: none; }

/* MasterTab brand wordmark inside the eyebrow */
.mtp-brand {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: .01em;
  color: var(--gold);
  font-size: 1.15em;
}

/* Video preview card — same wrapper as the sheet music preview, but houses
   the YouTube facade (thumb + play button overlay). */
.mtp-video-preview {
  background: #000;
  padding: 0;
  margin: 0 0 1rem;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 14px 28px rgba(0,0,0,.55),
    0 4px 10px rgba(0,0,0,.32),
    0 0 0 1px rgba(196,160,74,.16);
}
.mtp-video-preview .prod-video-frame {
  aspect-ratio: 16/9;
  border-radius: 8px;
}
.mtp-video-preview img {
  /* override .prod-tab-preview img — no multiply/contain here */
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
  display: block;
}
.mtp-video-preview img.is-fallback {
  object-fit: contain;
  background: var(--bg-deep);
}
.mtp-video-preview figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: .6em .9em;
  margin: 0;
  font-size: .52rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
  text-align: center;
  pointer-events: none;
}

/* Cross-sell card — link to the simple Signature Tablature */
.mtp-cross-sell {
  padding: clamp(40px, 5vh, 70px) var(--pad-x);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-deep);
}
.mtp-cross-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px) clamp(24px, 3vw, 40px);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(196,160,74,.04) 0%, rgba(0,0,0,.18) 100%);
  color: var(--text);
  text-decoration: none;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.mtp-cross-card:hover {
  border-color: rgba(196,160,74,.4);
  transform: translateY(-2px);
}
.mtp-cross-text { display: flex; flex-direction: column; gap: .35rem; }
.mtp-cross-eyebrow {
  margin: 0;
  font-size: .58rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.mtp-cross-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--text);
  letter-spacing: .005em;
}
.mtp-cross-sub {
  margin: .15rem 0 0;
  color: var(--text-soft);
  font-size: .82rem;
  line-height: 1.55;
}
.mtp-cross-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8em 1.6em;
  border: .5px solid var(--gold);
  color: var(--gold);
  font-size: .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  border-radius: 2px;
  white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.mtp-cross-card:hover .mtp-cross-cta {
  background: var(--gold);
  color: var(--bg-deep);
}

/* MasterTab page responsive */
@media (max-width: 900px) {
  .mtp-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .mtp-ipad img { max-height: 42vh; }
  .mtp-cross-card { grid-template-columns: 1fr; gap: 1.2rem; text-align: center; }
  .mtp-cross-text { align-items: center; }
  .mtp-cross-cta { justify-self: center; }
}

/* ---------- Video section (card layout) ---------- */
.prod-video {
  padding: clamp(50px, 7vh, 90px) var(--pad-x);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-deep);
}
.prod-video-card {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.012) 0%, rgba(0,0,0,.18) 100%);
}
.prod-video-text { text-align: left; }
.prod-video-eyebrow {
  font-size: .58rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 1rem;
}
.prod-video-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--text);
  text-align: left;
  letter-spacing: -.005em;
}
.prod-video-sub {
  color: var(--text-soft);
  font-size: .9rem;
  line-height: 1.7;
  margin: 0;
  max-width: 36ch;
}
.prod-video-player {
  position: relative;
}
.prod-video-frame {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 22px 48px rgba(0,0,0,.55),
    0 4px 10px rgba(0,0,0,.35);
}
.prod-video-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.85) saturate(1.05);
  transition: filter .35s var(--ease), transform .8s var(--ease);
}
.prod-video-thumb.is-fallback {
  object-fit: contain;
  background: var(--bg-deep);
  filter: brightness(.95);
}
.prod-video-frame:hover .prod-video-thumb { filter: brightness(.7) saturate(1.05); transform: scale(1.02); }
.prod-video-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: transparent;
  border: 0; padding: 0;
  cursor: pointer;
  color: rgba(255,255,255,.95);
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.prod-video-play svg { filter: drop-shadow(0 4px 18px rgba(0,0,0,.6)); }
.prod-video-play:hover { color: var(--gold); transform: scale(1.05); }
.prod-video iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

/* Story section — long-form */
.prod-story {
  padding: clamp(70px, 10vh, 130px) 0;
  border-top: 1px solid var(--line-soft);
}
.prod-story-inner {
  max-width: 680px;
  margin: 0 auto;
  padding-inline: var(--pad-x);
  text-align: left;
}
.prod-story-eyebrow {
  font-size: .62rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-soft);
  text-align: center;
  margin: 0 0 1rem;
}
.prod-story-heading {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  text-align: center;
  margin: 0 0 2.4rem;
  color: var(--text);
  letter-spacing: -.005em;
}
.prod-story-body {
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.95;
  margin-bottom: 1.4rem;
  font-family: var(--serif);
  font-weight: 400;
}
.prod-story-body:first-letter {
  font-family: var(--serif);
  font-style: italic;
  font-size: 3.2rem;
  line-height: 1;
  float: left;
  margin: .15em .15em -.05em 0;
  color: var(--gold);
  font-weight: 500;
}

/* Prev / next */
.prod-nav {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-deep);
  padding: clamp(36px, 5vh, 60px) var(--pad-x);
}
.prod-nav-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
}
.prod-nav-prev, .prod-nav-next {
  display: inline-flex; align-items: center; gap: .9em;
  font-size: .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.prod-nav-prev { justify-self: start; }
.prod-nav-next { justify-self: end; }
.prod-nav-all {
  font-family: var(--serif);
  font-style: italic;
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--text-soft);
  transition: color .3s var(--ease);
}
.prod-nav-prev::before { content: "←"; transition: transform .3s var(--ease); }
.prod-nav-next::after  { content: "→"; transition: transform .3s var(--ease); }
.prod-nav-prev:hover, .prod-nav-next:hover, .prod-nav-all:hover { color: var(--gold); }
.prod-nav-prev:hover::before { transform: translateX(-4px); }
.prod-nav-next:hover::after  { transform: translateX(4px); }

/* Product page responsive */
@media (max-width: 900px) {
  .prod-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .prod-cover { max-width: 480px; margin: 0 auto; }
  .prod-info { padding-top: 0; }
  .prod-includes { grid-template-columns: 1fr; }
  .prod-includes-bar { grid-template-columns: 1fr; gap: 1.6rem; }
  .prod-buy-card { align-items: stretch; }
  .prod-video-card { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .prod-video-text { text-align: center; }
  .prod-video-title, .prod-video-sub { text-align: center; }
  .prod-video-sub { margin-left: auto; margin-right: auto; }
  .prod-nav-inner { grid-template-columns: 1fr; gap: 1.2rem; text-align: center; }
  .prod-nav-prev, .prod-nav-next, .prod-nav-all { justify-self: center; }
}
@media (max-width: 600px) {
  .prod-buy-block { flex-direction: column; align-items: flex-start; }
  .prod-buy-block .btn { width: 100%; flex: 1 1 100%; }
  .prod-includes-icons { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .ic-tile { width: 40px; height: 40px; }
  .ic-tile svg { width: 18px; height: 18px; }
  .prod-specs { grid-template-columns: 1fr; }
  .prod-specs li:nth-child(odd) { border-right: 0; padding-right: 0; }
  .prod-specs li:nth-child(even) { padding-left: 0; }
  .prod-specs li { border-bottom: 1px solid var(--line-soft); }
  .prod-specs li:last-child { border-bottom: 0; }
}

/* ---------- Reveal-on-scroll — cinematic, slow, with gentle blur lift ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(4px);
  transition:
    opacity 1.2s cubic-bezier(.16,.7,.2,1),
    transform 1.2s cubic-bezier(.16,.7,.2,1),
    filter 1.1s cubic-bezier(.16,.7,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ---------- Live Dates page ---------- */
.tour-page {
  position: relative;
  isolation: isolate;
  /* override the deep bg locally so the page reads as near-pure black —
     all child overlays + ::before that reference var(--bg-deep) inherit this */
  --bg-deep: #0a0d0e;
  background:
    var(--noise),
    var(--bg-deep);
}
/* Continuous photo bg — full page, photo positioned with fixed offset; rest fills with solid black */
.tour-page-bg {
  position: absolute;
  inset: 0;                    /* covers ENTIRE .tour-page now */
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-deep);  /* solid bg fills everything below+around the image */
}
.tour-page-bg img {
  /* Image is now CONFINED to the hero strip at the top of the page:
     starts just below the fixed header, ends ~55vh down. The dates
     list below sits on the solid dark page background, clean. */
  position: absolute;
  top: 64px;
  left: 0;
  width: 100%;
  height: clamp(360px, 56vh, 540px);
  object-fit: cover; object-position: center top;
  filter: brightness(1) contrast(1.08);
}
.tour-page-overlay {
  position: absolute;
  top: 64px;
  left: 0;
  width: 100%;
  height: clamp(360px, 56vh, 540px);
  background:
    /* side vignette — photo dissolves into dark on the sides */
    radial-gradient(ellipse 100% 90% at 50% 50%,
      rgba(10,13,14,0) 30%,
      rgba(10,13,14,.4) 70%,
      rgba(10,13,14,.95) 95%,
      var(--bg-deep) 100%),
    /* top fade and a clean bottom fade-out so the image dissolves
       into the dark background where the dates list begins */
    linear-gradient(180deg,
      rgba(10,13,14,.55) 0%,
      rgba(10,13,14,.15) 18%,
      rgba(10,13,14,0) 35%,
      rgba(10,13,14,0) 60%,
      rgba(10,13,14,.35) 78%,
      rgba(10,13,14,.85) 92%,
      var(--bg-deep) 100%);
}

/* ----- Live Dates page — premium redesign -----
   Editorial concert-programme styling: compact hero, refined per-row
   typography, gold marker on hover, gentle hairline rules. */
.tour-hero {
  position: relative;
  padding: clamp(36px, 5.5vh, 64px) 0 clamp(6px, 1vh, 16px);
  text-align: center;
  background: transparent;
}
.tour-hero::before {
  /* small museum-tag rule above the title */
  content: "";
  display: block;
  width: 36px; height: 1px;
  background: var(--gold);
  opacity: .55;
  margin: 0 auto .9rem;
}
.tour-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 .4rem;
}
.tour-year {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  letter-spacing: .38em;
  color: var(--gold);
  margin: 0 0 .7rem;
}
.tour-sub {
  font-size: .62rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.tour-list {
  background: transparent;
  padding: clamp(60px, 9vh, 110px) 0 clamp(40px, 6vh, 70px);
  position: relative;
}
.tour-grid {
  list-style: none; padding: 0; margin: 0;
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(3rem, 6vw, 6rem);
}
.tour-grid li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem;
  align-items: center;
  padding: .65rem 0;
  border-bottom: 1px solid var(--line);
}
.tour-grid li:nth-child(2n) {
  grid-template-columns: 1fr auto;
  text-align: right;
}
.tour-grid time {
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--gold);
  font-feature-settings: "tnum";
}
.tour-grid strong {
  display: block;
  font-weight: 500;
  font-size: .85rem;
  color: var(--text);
  margin-bottom: .1rem;
}
.tour-grid span {
  display: block;
  font-size: .58rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.tour-foot {
  text-align: center;
  padding: 2.5rem var(--pad-x) 3rem;
  background: transparent;
  position: relative;
}
.tour-foot .rule-short { margin-bottom: 1.6rem; }
.tour-foot .end {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: .42em;
  color: var(--gold);
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .mc-pillars { grid-template-columns: repeat(2, 1fr); }
  .shows-grid { grid-template-columns: 1fr; gap: 0; }
  .shows-col-right li { grid-template-columns: auto 1fr; text-align: left; }
  .shows-col-right li time { order: -1; }
  .story-content { grid-template-columns: 1fr; }
  .story-overlay {
    background: linear-gradient(180deg, rgba(17,20,21,.85) 0%, rgba(17,20,21,.6) 30%, rgba(17,20,21,.85) 100%);
  }
  .join-overlay {
    background: linear-gradient(180deg, rgba(10,13,14,.85) 0%, rgba(10,13,14,.7) 30%, rgba(10,13,14,.9) 100%);
  }
  .mc-overlay {
    background:
      linear-gradient(180deg, rgba(10,13,14,.6) 0%, rgba(10,13,14,.85) 100%),
      linear-gradient(90deg, rgba(10,13,14,.7) 0%, rgba(10,13,14,.4) 100%);
  }
  .tour-grid { grid-template-columns: 1fr; gap: 0; }
  .tour-grid li:nth-child(2n) { grid-template-columns: auto 1fr; text-align: left; }
  .tour-grid li:nth-child(2n) time { order: -1; }
}

@media (max-width: 720px) {
  .nav-toggle { display: block; justify-self: start; }
  .header-inner { grid-template-columns: auto 1fr auto; }

  /* Hero photo on mobile — source frame places André right-of-center.
     With object-fit: cover on a portrait viewport, the image height matches
     the viewport exactly (no vertical excess), so object-position Y alone
     can't shift him up. Scale via the mobile kenburns variant below to
     create vertical room, then bias Y toward 35% so we see more of the
     upper area and his head reads higher in the frame. */
  .hero-media img {
    object-position: 82% 35%;
    animation: kenburns-mobile 24s ease-out forwards;
  }
  @keyframes kenburns-mobile {
    from { transform: scale(1.20); }
    to   { transform: scale(1.14); }
  }

  /* On portrait mobile André's silhouette lands near horizontal center, so
     centering the text vertically would put the title across his torso.
     Anchor the content block to the BOTTOM of the hero instead and center
     it horizontally; a dark gradient rises from below to keep type legible
     without hiding the photo. */
  .hero {
    align-items: end;
    justify-items: center;
  }
  .hero-content {
    padding-bottom: 2.5rem;
    padding-top: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    justify-self: center;
  }
  .hero-actions { justify-content: center; }
  .hero-tag-rule { margin-left: auto; margin-right: auto; }
  .hero::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 55%;
    background: linear-gradient(
      to top,
      rgba(6,15,18,.92) 0%,
      rgba(6,15,18,.72) 35%,
      rgba(6,15,18,.30) 70%,
      rgba(6,15,18,0)   100%
    );
    z-index: 0;
    pointer-events: none;
  }

  /* Mobile nav drawer — slides down from below the header.
     Page stays visible behind it (semi-transparent backdrop + scrim).
     Items stack with subtle dividers; everything fits without scrolling. */
  .nav-list {
    position: fixed;
    top: calc(.8rem + 34px + .8rem);   /* header padding + logo + padding */
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: .25rem 1.5rem 1rem;
    background: rgba(17,20,21,.78);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid rgba(202,161,90,.18);
    box-shadow: 0 24px 50px rgba(0,0,0,.35);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform .4s var(--ease), opacity .25s var(--ease);
  }
  .nav-list.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-list li { border-top: 1px solid rgba(255,255,255,.06); }
  .nav-list li:first-child { border-top: 0; }
  .nav-list a {
    display: block;
    text-align: center;
    font-size: .78rem;
    letter-spacing: .32em;
    padding: 1rem 0;
  }
  .nav-list a.is-active::after { display: none; }
  .nav-list a.is-active { color: var(--gold); }

  /* About / story section — hidden on mobile. The cinematic-paced copy
     reads as a long scroll on a small screen; cut it entirely and let the
     hero + impact strip + featured work carry the narrative on phones. */
  .section.section-story { display: none; }

  /* Live shows — leave room for the stage photo (André on stool) to read
     between the title block and the list. The figure sits in the upper
     third of the source image, so we push the dates grid down ~46svh which
     opens a clean window where the silhouette can land untouched. */
  .section-shows .shows-grid { margin-top: 46svh; }
  /* Tour page has the image already confined to ~100vh at top with a fade
     mask, so the dates don't need as much push-down — tighten the margin
     so the list sits closer to the figure. */
  .section-shows--tour .shows-grid { margin-top: 30svh; }

  /* Show only the first 8 dates on mobile (5 in col-left, 3 in col-right) —
     the rest live on the dedicated Live Dates page via the existing CTA.
     Scoped to the homepage block; the Live Dates page (.section-shows--tour)
     keeps every show. */
  .section-shows:not(.section-shows--tour) .shows-col-right li:nth-last-child(-n+2) { display: none; }

  /* Tighten the date rows so the list stays compact and the photo above
     keeps visual weight. Smaller type, less row padding, no min-width on
     the time column so it hugs the date. */
  .section-shows .shows-col li { padding: .55rem .6rem; }
  .section-shows .shows-col li strong { font-size: .7rem; letter-spacing: .15em; }
  .section-shows .shows-col li span   { font-size: .68rem; }
  .section-shows .shows-col li time   { font-size: .6rem; letter-spacing: .22em; }

  /* Contact / Join — mobile cleanup. The desktop layout shows the form,
     a separate opt-in checkbox, a small caps strip and an email link in a
     single tight block; on a phone the redundancy reads as confusion.
     Hide the opt-in checkbox (the Subscribe button IS the opt-in), stack
     the input + button vertically full-width, center everything, and put
     a clear separator before the business-contact block. */
  .section-join { padding: 3rem 0 3.5rem; text-align: center; }
  .join-copy { max-width: none; margin: 0 auto; }
  .join-copy > .caps-sub.gold-soft { display: block; }
  .join-copy > .caps-sub.gold-soft .rule-inline { display: none; }
  .join-title { font-size: 1.9rem; line-height: 1.12; }
  .join-sub {
    max-width: 30ch;
    margin: .6rem auto 1.6rem;
    font-size: .88rem;
  }
  .join-form {
    border-top: 1px solid var(--line);
    padding-top: 1.6rem;
    margin-top: 1.2rem;
  }
  .join-label { text-align: left; }
  .join-row {
    flex-direction: column;
    align-items: stretch;
    gap: .8rem;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .join-row input[type="email"] {
    flex: 1 1 auto;
    border-bottom: 1px solid rgba(255,255,255,.25);
    padding: .65em 0;
    text-align: left;
  }
  .join-row .btn { width: 100%; }
  /* Hide the redundant opt-in — pressing Subscribe IS the opt-in */
  .join-check { display: none; }

  /* Visual divider between newsletter signup and business contact so the
     two affordances don't blur into a single confusing block. */
  .join-foot {
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
    font-size: .54rem;
    letter-spacing: .3em;
  }
  .join-email { font-size: .88rem; }

  /* Soft scrim behind the drawer so the page dims slightly but stays visible.
     Painted with the body so it covers everything below the header. */
  body::after {
    content: "";
    position: fixed; inset: 0;
    background: rgba(10,13,14,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease);
    z-index: 40;
  }
  body:has(.nav-list.is-open)::after { opacity: 1; }

  .social-strip { gap: .9rem; }
  .social-strip a svg { width: 18px; height: 18px; }

  .hero-name span:first-child,
  .hero-name span:last-child { transform: none; }
  .hero-tag-1, .hero-tag-2 { font-size: .75rem; letter-spacing: .32em; }

  .featured-strip { margin-top: 1.2rem; }
  .featured-strip-head { gap: .7rem; margin-bottom: .6rem; }
  .strip-rule { flex-basis: 36px; }
  .strip-card { flex-basis: 140px; }
  .strip-track { gap: 10px; padding-bottom: 8px; }
  .strip-fade { width: 28px; }

  .stats { grid-template-columns: 1fr 1fr; }
  .mc-pillars { grid-template-columns: 1fr 1fr; gap: 1rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .hero-media img { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   CONVERSION REFINEMENT LAYER — May 2026
   Additive styles for: Featured MasterTabs (homepage),
   "What You Receive" (product/MasterTab pages),
   refined live-dates row, and a few cinematic polish details.
   All built on the existing dark/gold language — no new tokens.
   ========================================================= */

/* ----- Featured MasterTabs (homepage conversion block) -----
   Compact two-card promo: MasterTab Experience + Signature Tablatures.
   Tight enough to fit one desktop viewport, with both product images
   forced to identical render height regardless of source aspect ratio. */
.section-featured-shop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* tighter top, generous bottom — head sits closer to where it enters the viewport */
  padding: clamp(32px, 4.5vh, 60px) 0 clamp(64px, 9vh, 110px);
  background: var(--bg-deep);
  border-top: 1px solid var(--line-soft);
}
.section-featured-shop::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(196,160,74,.06) 0%, transparent 65%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(40,55,80,.10) 0%, transparent 70%);
  pointer-events: none;
}
.featured-shop-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(32px, 4.5vh, 56px);
  padding-inline: var(--pad-x);
}
.featured-shop-head .col-section-eyebrow {
  margin-bottom: .8rem;
  font-size: .62rem;
}
.featured-shop-head .col-section-title {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  margin-bottom: .8rem;
}
.featured-shop-head .col-section-sub {
  font-size: clamp(.95rem, 1.15vw, 1.05rem);
}
.featured-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: var(--pad-x);
}
.featured-shop-card {
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column;
  text-decoration: none;
  color: inherit;
  padding: clamp(28px, 3.2vw, 42px);
  border: 1px solid var(--line-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,.012) 0%, rgba(0,0,0,.25) 100%);
  overflow: hidden;
  transition: border-color .45s var(--ease), transform .45s var(--ease), box-shadow .55s var(--ease);
}
.featured-shop-card::before {
  content: "";
  position: absolute;
  inset: -10% -8% 40% -8%;
  z-index: -1;
  background: radial-gradient(ellipse 60% 70% at 50% 50%,
              rgba(196,160,74,.14) 0%,
              rgba(196,160,74,.04) 45%,
              transparent 78%);
  filter: blur(22px);
  opacity: .55;
  transition: opacity .9s var(--ease), transform 1s var(--ease);
  pointer-events: none;
}
.featured-shop-card:hover {
  border-color: rgba(196,160,74,.4);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0,0,0,.5),
              0 0 30px rgba(196,160,74,.1);
}
.featured-shop-card:hover::before {
  opacity: 1;
  transform: scale(1.06);
}
/* Fixed-height cover — both images render at the same visual height
   regardless of source aspect ratio. Image height set DIRECTLY on the
   <img> (not the wrapper) so it never falls back to natural pixel size.
   overflow:hidden on the wrapper as a belt-and-suspenders clip. */
.featured-shop-cover {
  position: relative;
  width: 100%;
  height: clamp(220px, 28vh, 300px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 1.4rem;
}
.featured-shop-cover img {
  display: block;
  height: clamp(200px, 26vh, 280px); /* hard-set so 800x1070 and 1100x733 both shrink to the same height */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 18px 28px rgba(0,0,0,.6))
    drop-shadow(0 6px 12px rgba(0,0,0,.4));
  transition: transform 1s var(--ease), filter .9s var(--ease);
}
.featured-shop-card:hover .featured-shop-cover img {
  transform: translateY(-4px) scale(1.02);
  filter:
    drop-shadow(0 26px 40px rgba(0,0,0,.68))
    drop-shadow(0 10px 18px rgba(0,0,0,.46))
    drop-shadow(0 0 22px rgba(196,160,74,.18));
}
.featured-shop-eyebrow {
  display: inline-flex; align-items: center; gap: .9rem;
  font-size: .66rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 .8rem;
}
.featured-shop-eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--gold);
  opacity: .55;
}
.featured-shop-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  letter-spacing: -.005em;
  line-height: 1.1;
  margin: 0 0 .6rem;
  color: var(--text);
  transition: color .35s var(--ease);
}
.featured-shop-title em {
  font-style: italic; color: var(--gold); font-weight: 400;
}
.featured-shop-card:hover .featured-shop-title { color: var(--gold); }
.featured-shop-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0 0 1.3rem;
  max-width: 42ch;
}
.featured-shop-from {
  display: inline-flex; align-items: baseline; gap: .55rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--gold);
  margin: 0 0 1.3rem;
}
.featured-shop-from .from-label {
  font-style: normal;
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.featured-shop-cta {
  display: inline-flex; align-items: center; gap: .6em;
  margin-top: auto;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  transition: letter-spacing .35s var(--ease), color .3s var(--ease);
}
.featured-shop-cta::after {
  content: "→";
  letter-spacing: 0;
  transition: transform .3s var(--ease);
}
.featured-shop-card:hover .featured-shop-cta { letter-spacing: .36em; }
.featured-shop-card:hover .featured-shop-cta::after { transform: translateX(5px); }
@media (max-width: 760px) {
  .featured-shop-grid { grid-template-columns: 1fr; gap: 22px; }
  .featured-shop-cover { height: clamp(140px, 24vh, 200px); }
}

/* ----- "What You Receive" product page block -----
   Premium scannable deliverables list. Replaces nothing — sits below
   the existing buy block on product/MasterTab pages, separated by a
   hairline rule. Cinematic, restrained, easy to read. */
.prod-receive {
  margin: clamp(2.2rem, 4vh, 3rem) 0 0;
  padding: clamp(1.6rem, 3vh, 2.2rem) 0 0;
  border-top: 1px solid var(--line-soft);
}
.prod-receive-head {
  display: flex; align-items: center; gap: 1rem;
  margin: 0 0 1.4rem;
}
.prod-receive-eyebrow {
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0;
  white-space: nowrap;
}
.prod-receive-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(196,160,74,.5), rgba(196,160,74,0));
}
.prod-receive-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem 1.6rem;
}
.prod-receive-list li {
  display: flex; align-items: flex-start; gap: .8rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text);
  letter-spacing: .005em;
}
.prod-receive-list li::before {
  content: "";
  flex: 0 0 6px;
  width: 6px; height: 6px;
  margin-top: .55em;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(196,160,74,.12);
}
@media (max-width: 700px) {
  .prod-receive-list { grid-template-columns: 1fr; gap: .7rem; }
  .prod-receive-head { gap: .75rem; }
}

/* ----- Product title slight uplift for hierarchy -----
   Stronger hierarchy without redesign: title gets a touch more size,
   tagline gets a touch more breathing. */
.prod-title {
  font-size: clamp(2rem, 3.9vw, 3.1rem);
  letter-spacing: .015em;
  margin-bottom: .65rem;
}
.prod-tagline { margin-bottom: 1rem; }

/* ----- Refined live-dates row -----
   New legible format: date — city, country — venue. Single line on
   desktop, gentle stack on small screens. Single column reads as a
   premium tour itinerary instead of a 2-col DB. */
.tour-grid--refined {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 920px;
}
.tour-grid--refined li {
  grid-template-columns: minmax(112px, auto) 1fr auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: 1.05rem .25rem;
  border-bottom: 1px solid var(--line);
  transition: background-color .35s var(--ease), padding .35s var(--ease);
}
.tour-grid--refined li:hover {
  background: rgba(196,160,74,.025);
  padding-left: 1rem;
}
.tour-grid--refined li time {
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .12em;
  color: var(--gold);
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.tour-grid--refined li .tour-city {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text);
}
.tour-grid--refined li .tour-venue {
  display: block;
  text-align: right;
  font-family: var(--serif);
  font-style: italic;
  font-size: .92rem;
  color: var(--text-soft);
  letter-spacing: .015em;
  white-space: normal;
}
@media (max-width: 720px) {
  .tour-grid--refined li {
    grid-template-columns: 1fr;
    gap: .15rem;
    padding: 1rem .25rem;
  }
  .tour-grid--refined li time { font-size: .72rem; letter-spacing: .14em; }
  .tour-grid--refined li .tour-venue { text-align: left; font-size: .88rem; }
}

/* ----- Mobile nav refinement -----
   Mobile menu currently overrides font-size to 1.05rem inside .nav-list.
   Keep that — just ensure new (smaller) desktop letter-spacing doesn't
   leak into the mobile drawer. */
@media (max-width: 720px) {
  .nav-list a {
    letter-spacing: .32em;
  }
}

/* ----- Body baseline rhythm bump -----
   Tiny breathing-room upgrade — barely visible per element, makes the
   whole site feel a touch more relaxed and editorial. */
body { font-size: 15.5px; }
.section { padding: clamp(72px, 10vh, 120px) 0; }
/* Per-section overrides must come AFTER the generic .section rule so they win the cascade. */
.section.section-impact { padding: clamp(44px, 6vh, 70px) 0; }
.section.section-featured { padding: clamp(32px, 4.5vh, 60px) 0 clamp(36px, 5vh, 70px); }
.section.section-shows { padding: clamp(16px, 2.4vh, 32px) 0 clamp(40px, 6vh, 72px); }

/* ----- Live Dates page — reuses .section-shows look + continuation block -----
   The hero matches the homepage Live Shows aesthetic (stage image, title,
   first 10 dates flanking). The continuation block below flows seamlessly
   on the same dark background — no visual seam, no extra padding gap. */
/* ----- Live Dates page — SINGLE unified section -----
   The hero image is now CONFINED to the top viewport-height of the
   section using max-height on .shows-media, with a CSS mask fading it
   out at the bottom. All 30 dates flow inside this single section,
   so there's no boundary, no seam, no color delta. */
.section.section-shows.section-shows--tour {
  min-height: 0;
  padding-top: clamp(80px, 11vh, 130px);  /* clear the fixed header so TOUR 2026 doesn't get cropped */
  padding-bottom: clamp(48px, 7vh, 88px);
  background: var(--bg-deep);
  position: relative;
}
.section-shows--tour .shows-media {
  /* Image bound to the top of the section only — not the entire section
     height — so the bottom dates ALWAYS sit on solid var(--bg-deep). */
  position: absolute;
  inset: 0 0 auto 0;            /* top:0 right:0 bottom:auto left:0 */
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}
.section-shows--tour .shows-media img {
  /* Soft mask fades the image's bottom edge into transparency so it
     dissolves into the section's solid var(--bg-deep) background. */
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 70%, rgba(0,0,0,.6) 85%, transparent 100%);
  mask-image: linear-gradient(180deg, black 0%, black 70%, rgba(0,0,0,.6) 85%, transparent 100%);
}
.section-shows--tour .shows-overlay {
  /* Overlay also confined to the image area */
  position: absolute;
  inset: 0;
}
.section-shows--tour .shows-content {
  position: relative;
  z-index: 1;
}
/* Title hierarchy: huge serif TOUR 2026 with italic gold year,
   small editorial subtitle below. */
.section-shows--tour .tour-headline {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  font-weight: 500;
  letter-spacing: .04em;
  margin: 0 0 .6rem;
  line-height: 1;
  text-transform: uppercase;
}
.section-shows--tour .tour-headline em {
  font-style: italic;
  color: var(--gold);
  font-weight: 500;
  /* italic numerals render smaller than the caps of TOUR — bump the font-size
     and force lining figures so 2026 visually balances against TOUR. */
  font-size: 1.08em;
  letter-spacing: .02em;
  margin-left: .2em;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.section-shows--tour .shows-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(.92rem, 1.2vw, 1.1rem);
  letter-spacing: .04em;
  color: var(--text-soft);
  text-transform: none;
}
.tour-foot-block {
  text-align: center;
  margin-top: clamp(48px, 7vh, 80px);
  display: flex; flex-direction: column; align-items: center;
}
.tour-foot-block .rule-short {
  margin-bottom: 1.6rem;
  width: 80px;
  opacity: .6;
}
.tour-foot-block .caps-sub {
  font-size: .62rem;
  letter-spacing: .42em;
  color: var(--text-soft);
  margin-bottom: 1.2rem;
}
.tour-foot-block .end {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  letter-spacing: .35em;
  color: var(--gold);
  margin: 0;
  text-transform: uppercase;
}
.section.section-story { padding: clamp(20px, 3vh, 40px) 0; }
.section-featured-shop { padding: clamp(32px, 4.5vh, 60px) 0 clamp(64px, 9vh, 110px); }

/* =========================================================
   ROUND 2 REFINEMENTS — May 2026
   Hero rule removed (markup-side). Global Impact slimmed.
   Featured video section compacted to fit one desktop viewport.
   Live Dates rows forced onto a single line. Header restructured:
   logo LEFT — nav CENTER — social RIGHT.
   ========================================================= */

/* ----- Header — mobile fallback -----
   On small screens the nav becomes a full-screen drawer triggered by the
   hamburger; visible order in the bar becomes: toggle | brand | social. */
@media (max-width: 720px) {
  .header-inner > .primary-nav  { order: 1; flex: 0 0 auto; justify-content: flex-start; }
  /* Brand pinned to the true viewport center (header-inner is position:
     relative) so the asymmetry between the hamburger and the 3-icon social
     strip doesn't pull the logo off-center. */
  .header-inner > .brand {
    order: 2;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex: 0 0 auto;
    display: flex;
    pointer-events: auto;
  }
  .header-inner > .social-strip { order: 3; flex: 0 0 auto; margin-left: auto; }
}

/* ----- Global Impact — thinner, more discrete -----
   It should read as a credential strip, not a hero. Smaller numbers,
   tighter padding, lower visual weight, gentler hover lift. */
.section-impact {
  padding: clamp(44px, 6vh, 70px) 0;
}
.section-impact .display {
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  letter-spacing: .26em;
  margin: 0 0 .6rem;
}
.section-impact > .container > .caps-sub.centered {
  font-size: .58rem;
  letter-spacing: .3em;
  margin-bottom: 0;
  color: var(--muted);
}
.stats {
  margin: 1.8rem 0 1.4rem;
  background: var(--line-soft);
}
.stat-link {
  padding: 1.05rem .7rem;
  gap: .55rem;
}
.stat-link:hover { transform: translateY(-3px); }
.stat-icon { width: 22px; height: 22px; }
.stat-num {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: 0;
}
.stat-rule { width: 36px; }
.stat-link:hover .stat-rule { width: 64px; }
.stat-label {
  font-size: .54rem;
  letter-spacing: .26em;
  line-height: 1.55;
}
.impact-foot { margin-top: 1.4rem; }
.impact-foot .rule-short {
  width: 48px;
  margin: 0 auto .9rem;
  opacity: .5;
}
.impact-foot .caps-sub {
  font-size: .56rem;
  letter-spacing: .3em;
  margin: 0;
}

/* ----- Featured Video section — ultra-compact, one-viewport -----
   Goal: eyebrow + video + playlist strip + closing CTA all visible on
   a single 1080p desktop screen with no scroll inside the section. */
.section-featured {
  padding: clamp(32px, 4.5vh, 60px) 0 clamp(36px, 5vh, 70px);
}
.section-featured .featured-eyebrow {
  font-size: .78rem;
  letter-spacing: .38em;
  margin-bottom: .35rem;
}
.section-featured .caps-tiny {
  font-size: .55rem;
  letter-spacing: .42em;
  margin-bottom: .9rem;
}
.video-frame {
  margin: .9rem auto;
  max-width: 680px;            /* was 860 — saves ~100px height */
  box-shadow: 0 18px 56px -22px rgba(0,0,0,.65);
}
.featured-strip { margin: .7rem auto 0; max-width: 680px; }
.featured-strip-head { margin: 0 0 .45rem; }
.featured-strip .strip-eyebrow { font-size: .54rem; }
.strip-track { gap: 8px; padding: 3px 2px 6px; }
.strip-card { flex: 0 0 108px; }
.featured-title {
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
}
.section-featured .serif-italic.muted {
  font-size: .85rem;
  margin: .15rem 0 .35rem;
}
.section-featured .rule-short {
  margin: .35rem auto .5rem;
  width: 48px;
}
.section-featured > .container > .centered.reveal:last-child {
  margin-top: .1rem;
}
.section-featured .btn-bordered {
  padding: .8em 1.8em;
  font-size: .64rem;
  letter-spacing: .28em;
}

/* Side fades on the strip look cleaner when narrower */
.strip-fade { width: 30px; }

/* ----- Live Dates row — force single-line layout -----
   The older .tour-grid li:nth-child(2n) rule (date/venue swap on even
   rows) had higher specificity than our new .tour-grid--refined li,
   so even rows lost the third column. These overrides win it back. */
/* Premium concert-programme rows — replaces the old refinement.
   Three cinematic columns: gold date | city in caps | venue in italic.
   A gold marker dot appears on hover (left-aligned), and the row gets
   a soft gold halo + slides right gently — same hover language as the
   Featured Shop cards. */
.tour-grid--refined {
  max-width: 780px;
  margin: 0 auto;
}
.tour-grid--refined li,
.tour-grid--refined li:nth-child(2n) {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center;
  text-align: left;
  padding: 1.15rem 1.6rem 1.15rem 1.6rem;
  border-bottom: 1px solid var(--line-soft);
  transition:
    background-color .4s var(--ease),
    padding-left .4s var(--ease),
    border-color .4s var(--ease);
}
.tour-grid--refined li:first-child { border-top: 1px solid var(--line-soft); }
.tour-grid--refined li:nth-child(2n) time { order: 0; }
.tour-grid--refined li::before {
  /* gold marker dot — invisible at rest, animates in on hover */
  content: "";
  position: absolute;
  left: .35rem; top: 50%;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(-50%) translateX(-6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  box-shadow: 0 0 0 4px rgba(196,160,74,.15);
}
.tour-grid--refined li:hover {
  background: linear-gradient(90deg, rgba(196,160,74,.05) 0%, rgba(196,160,74,0) 80%);
  padding-left: 2.2rem;
  border-color: rgba(196,160,74,.25);
}
.tour-grid--refined li:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.tour-grid--refined li time {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--gold);
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.tour-grid--refined li .tour-city {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .88rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text);
  transition: color .35s var(--ease);
}
.tour-grid--refined li:hover .tour-city { color: var(--gold); }
.tour-grid--refined li .tour-venue {
  display: block;
  text-align: right;
  font-family: var(--serif);
  font-style: italic;
  font-size: .92rem;
  color: var(--text-soft);
  letter-spacing: .015em;
  white-space: normal;
}
.tour-grid--refined li:hover .tour-venue { color: var(--text); }

@media (max-width: 980px) {
  .tour-grid,
  .tour-grid--refined {
    grid-template-columns: 1fr;
  }
  .tour-grid--refined li,
  .tour-grid--refined li:nth-child(2n) {
    grid-template-columns: 88px 1fr auto;
    gap: 1rem;
    padding: 1rem 1rem;
  }
  .tour-grid--refined li:hover { padding-left: 1.6rem; }
}
@media (max-width: 720px) {
  .tour-grid--refined li,
  .tour-grid--refined li:nth-child(2n) {
    grid-template-columns: 1fr;
    gap: .2rem;
    padding: 1rem;
  }
  .tour-grid--refined li::before { display: none; }
  .tour-grid--refined li:hover { padding-left: 1rem; }
  .tour-grid--refined li .tour-venue { text-align: left; font-size: .88rem; }
}