/* ============================================================
   Elizabeth Sanchez Music — Design System
   Palette & type derived from the artist's brand kit
   ============================================================ */

:root {
  /* Color tokens */
  --ivory: #FAF6EF;
  --white: #FFFFFF;
  --ink: #1E2430;
  --ink-soft: #3A4252;
  --turquoise: #43B8D4;
  --teal: #17708A;       /* AA-safe accent on ivory */
  --gold: #C9A14B;
  --gold-soft: #E5D3AC;
  --blush: #E8B4B8;
  --line: rgba(30, 36, 48, 0.12);

  /* Type */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Great Vibes", cursive;

  /* Rhythm */
  --section-pad: clamp(3.5rem, 9vw, 8rem);
  --content-w: 1140px;
  --radius: 14px;
  --shadow: 0 18px 50px -18px rgba(30, 36, 48, 0.35);
  --transition: 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--turquoise); }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--ivory); padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }

.container { max-width: var(--content-w); margin: 0 auto; padding: 0 1.5rem; }

/* ---------- Typography helpers ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; }
.overline {
  display: inline-block;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 0.9rem;
}
.overline::after {
  content: ""; display: inline-block; width: 2.2rem; height: 1px;
  background: var(--gold); margin-left: 0.8rem; vertical-align: middle;
}
.section-title { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 1.1rem; }
.section-lead { max-width: 640px; color: var(--ink-soft); }
.script { font-family: var(--font-script); font-weight: 400; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.7rem; border-radius: 999px;
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em;
  border: 1.5px solid transparent; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--turquoise); color: #fff; }
.btn-solid:hover { background: var(--teal); color: #fff; box-shadow: 0 12px 24px -10px rgba(23, 112, 138, 0.6); }
.btn-ghost { border-color: rgba(255,255,255,0.7); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }
.btn-ghost-dark { border-color: var(--ink); color: var(--ink); }
.btn-ghost-dark:hover { background: var(--ink); color: var(--ivory); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: #b88f3e; color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 0.9rem 0;
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* Brand slot stays 46px tall so nav never shifts; the logo overflows
   downward over the hero as a large signature mark and shrinks fluidly
   into the bar as the user scrolls (--logo-shrink goes 0 → 1, set by
   js/main.js). --logo-big scales with the viewport. */
.brand {
  position: relative; display: block;
  height: 46px; width: 63px; /* fixed slot (46px × logo ratio) so the nav never shifts */
  --logo-big: clamp(220px, 34vh, 360px);
  /* When expanded, pull the logo toward the viewport's left edge (2.5rem in),
     instead of leaving it at the container edge near the portrait.
     Collapses to 0 as --logo-shrink reaches 1, and on viewports narrower
     than the container the offset is naturally 0. */
  --logo-x: min(0px, calc(2.5rem - (100vw - var(--content-w)) / 2 - 1.5rem));
}
.brand img {
  position: absolute; top: 0; left: 0; max-width: none;
  height: calc((1 - var(--logo-shrink, 0)) * var(--logo-big) + var(--logo-shrink, 0) * 46px);
  width: auto;
  transform: translateX(calc((1 - var(--logo-shrink, 0)) * var(--logo-x)));
  transition: opacity var(--transition);
}
.brand .logo-light { filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.35)); }
.brand .logo-dark { display: none; }
/* Utility pages (letras, gracias, thanks) use the short .page-hero, so the
   header logo stays bar-sized and never overflows down onto the heading. */
.compact-logo .brand { --logo-big: 46px; }
.compact-logo .brand img { height: 46px; transform: none; }
.site-header.scrolled { background: rgba(250, 246, 239, 0.96); box-shadow: 0 6px 24px -12px rgba(30,36,48,0.25); padding: 0.55rem 0; backdrop-filter: blur(8px); }
.site-header.scrolled .logo-light { display: none; }
.site-header.scrolled .logo-dark { display: block; }

.main-nav { display: flex; align-items: center; gap: 1.6rem; }
.main-nav a {
  color: #fff; font-size: 0.86rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 0; border-bottom: 2px solid transparent;
}
.main-nav a:hover { border-color: var(--gold); color: #fff; }
.site-header.scrolled .main-nav a { color: var(--ink); }
.site-header.scrolled .main-nav a:hover { color: var(--teal); }
.main-nav .nav-cta {
  border: 1.5px solid var(--gold); border-radius: 999px;
  padding: 0.45rem 1.2rem; color: #fff;
}
.main-nav .nav-cta:hover { background: var(--gold); color: var(--ink); }
.site-header.scrolled .main-nav .nav-cta { color: var(--ink); }
.site-header.scrolled .main-nav .nav-cta:hover { background: var(--gold); }
.lang-switch { opacity: 0.85; }

.nav-toggle {
  display: none; background: none; border: 0; width: 44px; height: 44px;
  position: relative; z-index: 120;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 26px; height: 2px;
  background: #fff; position: absolute; left: 9px; transition: var(--transition);
}
.site-header.scrolled .nav-toggle span,
.site-header.scrolled .nav-toggle span::before,
.site-header.scrolled .nav-toggle span::after { background: var(--ink); }
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -8px; left: 0; }
.nav-toggle span::after { top: 8px; left: 0; }
body.nav-open .nav-toggle span { background: transparent !important; }
body.nav-open .nav-toggle span::before { transform: rotate(45deg); top: 0; background: var(--ivory); }
body.nav-open .nav-toggle span::after { transform: rotate(-45deg); top: 0; background: var(--ivory); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; overflow: hidden; isolation: isolate;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 65% 30%;
  animation: heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.07); } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(20, 25, 36, 0.88) 0%, rgba(20, 25, 36, 0.35) 45%, rgba(20, 25, 36, 0.18) 100%);
}
.hero-inner { padding: 0 1.5rem clamp(1.8rem, 4vh, 3rem); width: 100%; }
.hero-tagline { font-family: var(--font-script); font-size: clamp(1.9rem, 4vw, 2.9rem); color: var(--gold-soft); display: block; margin-bottom: 0.4rem; }
.hero h1 {
  font-size: clamp(2.9rem, 8vw, 5.6rem); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.02;
}
.hero-sub { margin: 1rem 0 1.9rem; font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2rem; }
.hero-social { display: flex; gap: 1.1rem; }
.hero-social a, .footer-social a {
  display: inline-flex; width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.55); align-items: center; justify-content: center;
  color: #fff; transition: var(--transition);
}
.hero-social a:hover, .footer-social a:hover { background: var(--turquoise); border-color: var(--turquoise); color: #fff; transform: translateY(-2px); }
.hero-social svg, .footer-social svg { width: 18px; height: 18px; fill: currentColor; }
/* ---------- Press strip (lives inside the hero, above the fold) ---------- */
.press-strip {
  width: 100%;
  background: rgba(20, 25, 36, 0.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(201, 161, 75, 0.45);
  color: rgba(250, 246, 239, 0.92);
  padding: 1.35rem 0;
}
.press-strip .container { max-width: min(1380px, 95vw); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.9rem 2.1rem; }
.press-strip .label { font-size: 0.8rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.press-strip .press-name {
  font-family: var(--font-display); font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-style: italic; white-space: nowrap; color: inherit;
  text-decoration: none; transition: color var(--transition);
}
.press-strip .press-name:hover, .press-strip .press-name:focus-visible { color: var(--gold-soft); }
@media (prefers-reduced-motion: no-preference) {
  .press-strip .container > * { opacity: 0; animation: pressIn 0.55s ease forwards; }
  .press-strip .container > *:nth-child(1) { animation-delay: 0.45s; }
  .press-strip .container > *:nth-child(2) { animation-delay: 0.53s; }
  .press-strip .container > *:nth-child(3) { animation-delay: 0.61s; }
  .press-strip .container > *:nth-child(4) { animation-delay: 0.69s; }
  .press-strip .container > *:nth-child(5) { animation-delay: 0.77s; }
  .press-strip .container > *:nth-child(6) { animation-delay: 0.85s; }
  .press-strip .container > *:nth-child(7) { animation-delay: 0.93s; }
  .press-strip .container > *:nth-child(8) { animation-delay: 1.01s; }
}
@keyframes pressIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Sections ---------- */
.section { padding: var(--section-pad) 0; }
.section-alt { background: var(--white); }
.section-dark { background: var(--ink); color: var(--ivory); }
.section-dark .section-title { color: var(--ivory); }
.section-dark .overline { color: var(--turquoise); }
.section-dark .section-lead { color: rgba(250,246,239,0.78); }

/* ---------- Música ---------- */
.music-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; margin-top: 2.5rem; }
.album-card { position: relative; }
.album-card img { border-radius: var(--radius); box-shadow: var(--shadow); }
.award-badge {
  position: absolute; top: 1rem; left: -0.8rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--gold); color: var(--ink);
  padding: 0.5rem 0.95rem; border-radius: 4px; box-shadow: 0 8px 20px -8px rgba(0,0,0,0.4);
  overflow: hidden; cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.award-badge > svg { width: 17px; height: 17px; flex: none; }
.award-badge-text { display: flex; flex-direction: column; line-height: 1.3; }
.award-badge-text strong { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.award-badge-text small { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.award-badge-cta {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width 0.35s ease, opacity 0.35s ease, margin 0.35s ease;
}
.award-badge:hover .award-badge-cta,
.award-badge:focus-visible .award-badge-cta { max-width: 9em; opacity: 1; margin-left: 0.3rem; }
.award-badge:hover,
.award-badge:focus-visible {
  color: var(--ink); /* keep ink on gold — global a:hover would turn it turquoise (unreadable) */
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 28px -10px rgba(0,0,0,0.45), 0 0 0 3px rgba(255,255,255,0.35);
}
.award-badge:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.award-badge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.32) 50%, transparent 60%);
  transform: translateX(-130%);
}
.award-badge:hover::after,
.award-badge:focus-visible::after { transform: translateX(130%); transition: transform 0.7s ease; }
.album-meta { margin-top: 1.4rem; }
.album-meta h3 { font-size: 1.6rem; }
.album-meta p { color: var(--ink-soft); font-size: 0.95rem; margin: 0.3rem 0 1.1rem; }
.platforms { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.platform-pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 0.5rem 1.05rem; font-size: 0.85rem; font-weight: 600; color: var(--ink);
  transition: var(--transition); background: var(--white);
}
.platform-pill:hover { border-color: var(--turquoise); color: var(--teal); transform: translateY(-2px); }
.platform-pill svg { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

/* Brand-colored streaming pills */
.pill-spotify  { --brand: #1DB954; }
.pill-apple    { --brand: #FA243C; }
.pill-youtube  { --brand: #FF0000; }
.pill-spotify, .pill-apple, .pill-youtube {
  border-color: var(--brand);
  font-weight: 700;
}
.pill-spotify svg, .pill-apple svg, .pill-youtube svg { fill: var(--brand); }
.pill-spotify:hover, .pill-apple:hover, .pill-youtube:hover {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.pill-spotify:hover svg, .pill-apple:hover svg, .pill-youtube:hover svg { fill: #fff; }
.spotify-embed { position: relative; min-height: 420px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.spotify-embed iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }

.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 3rem; }
.video-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-inline: auto; }

/* ---------- Video card + facade ---------- */
.video-card {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 10px 36px -18px rgba(30,36,48,0.3);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex; flex-direction: column;
}
.video-card:hover { transform: translateY(-4px); box-shadow: 0 18px 46px -18px rgba(30,36,48,0.42); }
.section-dark .video-card { background: rgba(255,255,255,0.05); }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #0d1018; }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: none; padding: 0; display: block; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; transition: var(--transition); }
.yt-facade:hover img { opacity: 1; transform: scale(1.03); }
.yt-facade::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(20,25,36,0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center/26px no-repeat;
  border: 2px solid rgba(255,255,255,0.85); transition: var(--transition);
}
.yt-facade:hover::after { background-color: var(--turquoise); transform: translate(-50%, -50%) scale(1.08); }
/* Caption anatomy: kicker (source/category) → serif title (links to the
   video) → description → footer pinned to the card bottom so every card
   in a row ends on the same line (logos left, YouTube pill right). */
.video-caption {
  padding: 1.05rem 1.25rem 1.2rem; flex: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
}
.vc-kicker {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--teal);
}
.section-dark .vc-kicker { color: var(--gold-soft); }
.vc-title {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
  line-height: 1.2; color: var(--ink); transition: color var(--transition);
}
/* The arrow stays a plain inline glyph (not inline-block) so the line
   breaker can never orphan it onto its own row. */
.vc-title .vc-arrow {
  font-size: 0.7em; margin-left: 0.3rem;
  opacity: 0.45; transition: opacity var(--transition), color var(--transition);
}
.vc-title:hover { color: var(--teal); }
.vc-title:hover .vc-arrow { opacity: 1; color: var(--turquoise); }
.section-dark .vc-title { color: var(--ivory); }
.section-dark .vc-title:hover { color: var(--turquoise); }
.vc-desc { font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft); }
.section-dark .vc-desc { color: rgba(250,246,239,0.72); }
.vc-foot {
  margin-top: auto; padding-top: 0.85rem; width: 100%;
  display: flex; align-items: center; gap: 0.8rem;
  border-top: 1px solid var(--line);
}
.section-dark .vc-foot { border-top-color: rgba(250,246,239,0.16); }
.vc-foot > .yt-link:last-child { margin-left: auto; }
.vc-foot .media-row { display: flex; align-items: center; gap: 0.8rem; }
.vc-foot .logo-primer-impacto { height: 20px; }
.vc-foot .logo-univision { height: 22px; }
.vc-foot .media-divider { width: 1px; height: 18px; background: rgba(30,36,48,0.16); flex: none; }

/* ---------- Video gallery (filterable catalog) ---------- */
.video-filters { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 2.6rem; }
.filter-pill {
  font: inherit; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.5rem 1.1rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(30,36,48,0.35); background: transparent; color: var(--ink);
  transition: var(--transition);
}
.filter-pill .count { opacity: 0.55; font-weight: 500; margin-left: 0.25rem; font-variant-numeric: tabular-nums; }
.filter-pill:hover { border-color: var(--turquoise); color: var(--ink); background: rgba(67,184,212,0.1); }
.filter-pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.filter-pill[aria-pressed="true"] .count { opacity: 0.7; }
.video-gallery-grid { margin-top: 1.5rem; }
/* Denser 3-up catalog grid: trim the caption scale a notch. */
.video-gallery-grid .vc-title { font-size: 1.22rem; }
.video-gallery-grid .video-caption { padding: 0.95rem 1.15rem 1.05rem; }
.yt-link {
  display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1;
  color: var(--ink-soft); border: 1.5px solid rgba(30,36,48,0.18);
  border-radius: 999px; padding: 0.38rem 0.7rem; margin-top: 0.15rem;
  transition: var(--transition);
}
.yt-link svg { width: 15px; height: 15px; fill: currentColor; }
.yt-link:hover { background: #f00; border-color: #f00; color: #fff; }
.section-dark .yt-link { color: rgba(250,246,239,0.78); border-color: rgba(250,246,239,0.3); }
.section-dark .yt-link:hover { background: #f00; border-color: #f00; color: #fff; }
.video-more { margin-top: 1.8rem; text-align: center; }

/* ---------- Historia ---------- */
/* The section sits on a blurred, washed-out echo of the garden portrait
   instead of flat white: strongest at the top (a soft green-gold veil that
   announces the section as you scroll in), fading to near-white where the
   paragraphs and timeline sit so text contrast stays intact. */
/* Música above shares the same light background, so this seam gets no color
   break — full section padding on both sides reads as dead space. Halve it. */
.section-story { position: relative; background: var(--white); overflow: hidden; padding-top: clamp(2rem, 4.5vw, 4rem); }
.section-tight-bottom { padding-bottom: clamp(2rem, 4.5vw, 4rem); }
/* historia-wash.jpg is the portrait downscaled to 32px; letting the browser
   upscale it produces the soft blur for free (a runtime blur() filter this
   large is too heavy — some renderers drop the whole layer). */
.section-story::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../assets/img/historia-wash.jpg") center top / cover no-repeat;
  filter: saturate(1.35);
  opacity: 0.6;
}
.section-story::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(
    180deg,
    var(--ivory) 0%,
    rgba(255, 255, 255, 0.5) 14%,
    rgba(255, 255, 255, 0.84) 48%,
    var(--white) 86%
  );
}
.section-story .container { position: relative; z-index: 1; }
.story-head { margin-bottom: clamp(2.4rem, 5vw, 3.8rem); }
.story-head .section-title { font-size: clamp(2.6rem, 6vw, 4rem); margin-bottom: 0; }
.story-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2.2rem, 6vw, 4.5rem); align-items: start; }
.framed { position: relative; }
.framed img { border-radius: var(--radius); position: relative; z-index: 1; box-shadow: var(--shadow); }
/* The portrait is landscape but the text column is tall; at desktop widths,
   crop it to fill the full column height so both columns bottom-align.
   Absolute positioning keeps the row height driven by the text, not the
   image's intrinsic aspect. object-position keeps Elizabeth in frame. */
@media (min-width: 961px) {
  .story-grid .framed { height: 100%; }
  .story-grid .framed img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 62% 30%;
  }
}
.framed::before {
  content: ""; position: absolute; inset: 1.2rem -1.2rem -1.2rem 1.2rem;
  border: 2px solid var(--gold); border-radius: var(--radius); z-index: 0;
}
.story-quote {
  font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-style: italic; line-height: 1.4; color: var(--ink);
  border-left: 3px solid var(--gold); padding-left: 1.2rem; margin: 1.6rem 0;
}
.timeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin: 3.2rem 0 2.4rem; position: relative; }
.timeline::before { content: ""; position: absolute; top: 7px; left: 2%; right: 2%; height: 1.5px; background: var(--gold-soft); }
.timeline li { position: relative; padding: 1.6rem 0.8rem 0 0; transition: transform var(--transition); }
.timeline li::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--ivory); border: 3px solid var(--gold);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.timeline li:hover { transform: translateY(-4px); }
.timeline li:hover::before {
  background: var(--gold); transform: scale(1.3);
  box-shadow: 0 0 0 6px rgba(201, 161, 75, 0.2);
}
.timeline .year { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; display: block; color: var(--teal); transition: color var(--transition); }
.timeline li:hover .year { color: var(--ink); }
.timeline p { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.45; margin-top: 0.2rem; transition: color var(--transition); }
.timeline li:hover p { color: var(--ink); }

/* ---------- Libro ---------- */
.book-grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(2.2rem, 6vw, 4.5rem); align-items: center; }
.book-cover { max-width: 320px; justify-self: center; }
.book-cover img, .book-cover .cover-fallback { border-radius: 8px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55); }
.cover-fallback {
  aspect-ratio: 2 / 3; background: linear-gradient(160deg, #2a3347, var(--ink));
  display: flex; flex-direction: column; justify-content: center; text-align: center;
  padding: 2rem; border: 1px solid rgba(201,161,75,0.5);
}
.cover-fallback .script { color: var(--gold-soft); font-size: 2.2rem; }
.cover-fallback strong { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.06em; color: var(--ivory); }
.book-grid .platforms { margin-top: 1.6rem; }
.section-dark .platform-pill { background: transparent; color: var(--ivory); border-color: rgba(250,246,239,0.35); }
.section-dark .platform-pill:hover { border-color: var(--turquoise); color: var(--turquoise); }

/* ---------- Testimonios ---------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.6rem; }
.testimonial-card .video-frame { aspect-ratio: 9 / 14; }
.testimonial-card .video-frame video { object-fit: cover; background: #0d1018; }
.testimonial-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 36px -18px rgba(30,36,48,0.3); display: flex; flex-direction: column; }
.testimonial-card blockquote {
  padding: 1.3rem 1.4rem 0.4rem; font-family: var(--font-display); font-style: italic;
  font-size: 1.06rem; line-height: 1.5; color: var(--ink); flex: 1;
}
.testimonial-card blockquote::before { content: "“"; color: var(--gold); font-size: 2rem; line-height: 0; vertical-align: -0.35em; margin-right: 0.15rem; }
.testimonial-card figcaption { padding: 1rem 1.4rem 1.5rem; }
.testimonial-card figcaption::before {
  content: ""; display: block; width: 2.4rem; height: 2px;
  background: var(--gold); margin-bottom: 0.75rem;
}
.testimonial-card figcaption strong {
  display: block; font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600; color: var(--ink);
}
.testimonial-card figcaption span {
  display: block; margin-top: 0.35rem;
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-soft);
}
.testimonial-card .media-row {
  display: flex; align-items: center; gap: 0.9rem;
  margin-top: 1rem; padding-top: 0.95rem;
  border-top: 1px solid rgba(30, 36, 48, 0.1);
  min-height: 38px;
}
.media-row img { display: block; width: auto; }
.media-row .logo-primer-impacto { height: 25px; }
.media-row .logo-univision { height: 27px; }
.media-row .media-divider { width: 1px; height: 24px; margin-top: 0; background: rgba(30, 36, 48, 0.16); flex: none; }
.media-row .media-chip {
  display: inline-flex; align-items: center; justify-content: center; margin-top: 0;
  width: 38px; height: 38px; flex: none;
  background: #2b0044; border-radius: 8px;
  box-shadow: 0 6px 14px -6px rgba(30, 36, 48, 0.45);
}
.media-row .media-chip img { height: 22px; }
.media-row .podcast-art {
  width: 38px; height: 38px; border-radius: 8px; object-fit: cover;
  box-shadow: 0 6px 14px -6px rgba(30, 36, 48, 0.45);
}
.media-row .podcast-label {
  display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.2;
  margin-top: 0; text-transform: none; letter-spacing: normal;
}
.media-row .podcast-label small {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.media-row .podcast-label b {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.98rem; color: var(--ink);
}
/* Each logo links out to its outlet (Univision, CVC La Voz, Spotify). */
.media-row .media-link {
  display: inline-flex; align-items: center; gap: 0.9rem;
  color: inherit; text-decoration: none;
  transition: opacity var(--transition);
}
.media-row .media-link:hover { opacity: 0.7; }
/* Logos keep their original color; the hover lift is what signals the
   card is interactive (not just the video). */
.media-row .media-link > img, .media-row .media-chip {
  transition: transform var(--transition);
  will-change: transform;
}
.testimonial-card:hover .media-row .media-link > img,
.testimonial-card:hover .media-row .media-chip {
  transform: translateY(-3px) scale(1.04);
}

/* ---------- Prensa ---------- */
.press-strip-link {
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--turquoise); white-space: nowrap;
  padding: 0.35rem 0.95rem; border: 1.5px solid rgba(67, 184, 212, 0.5); border-radius: 999px;
  transition: var(--transition);
}
.press-strip-link:hover, .press-strip-link:focus-visible {
  color: var(--ink); background: var(--turquoise); border-color: var(--turquoise);
  transform: translateX(3px);
}
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.6rem; }
.press-card {
  display: flex; flex-direction: column; gap: 0.55rem;
  background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.3rem; color: var(--ink);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.press-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold-soft); color: var(--ink); }
.press-outlet { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--teal); }
.press-card h3 { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; line-height: 1.35; flex: 1; }
.press-meta { font-size: 0.8rem; color: var(--ink-soft); }
.press-more { font-size: 0.82rem; font-weight: 700; color: var(--gold); }
.press-card:hover .press-more { color: var(--teal); }
.press-note { margin-top: 2.2rem; font-size: 0.9rem; color: var(--ink-soft); text-align: center; }

/* ---------- Ministerio ----------
   The section gets its own warm-cream identity between the two white
   sections around it: a gold hairline on top, an editorial split header,
   four hoverable "pillars" (what HIB does), a stats + verse composition,
   and the dark booking band. */
.section-ministry {
  background: linear-gradient(180deg, #F6F0E2 0%, var(--ivory) 88%);
  border-top: 1px solid rgba(201, 161, 75, 0.35);
}

/* Split header: identity on the left, mission on the right */
.ministry-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem clamp(2.5rem, 6vw, 5rem); align-items: end;
}
.ministry-head .section-title { font-size: clamp(2.4rem, 5vw, 3.4rem); margin-bottom: 0; }
.ministry-tagline {
  font-family: var(--font-script); font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.1; color: var(--gold); margin-top: 0.15rem;
}
.ministry-head .section-lead { margin-bottom: 0.5rem; }

/* Pillars: numbered editorial columns, gold rule grows on hover */
.ministry-pillars {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0 clamp(1.4rem, 3vw, 2.4rem); margin-top: clamp(2.6rem, 5vw, 3.6rem);
}
.ministry-pillars li {
  position: relative; border-top: 1px solid rgba(30, 36, 48, 0.25);
  padding: 1.35rem 0 1.5rem;
  transition: transform var(--transition);
}
.ministry-pillars li::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}
.ministry-pillars li:hover { transform: translateY(-4px); }
.ministry-pillars li:hover::before { transform: scaleX(1); }
.pillar-num {
  display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.1em; color: var(--gold); margin-bottom: 0.8rem;
  transition: color var(--transition);
}
.ministry-pillars li:hover .pillar-num { color: var(--teal); }
.ministry-pillars h3 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.ministry-pillars p { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.6; }

/* Photo + verse + stats: the ministry in images on the left,
   the verse that guides it and the numbers behind it on the right */
.ministry-figures {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(1.8rem, 4vw, 3.5rem); align-items: stretch;
  margin: clamp(2.6rem, 5vw, 3.8rem) 0;
}
.ministry-photo {
  position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--ink); min-height: 340px;
}
.ministry-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.ministry-photo:hover img { transform: scale(1.04); }
.ministry-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.4rem 1.3rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(15, 18, 26, 0.75));
  color: var(--ivory); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.ministry-figures-text {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(1.6rem, 3vw, 2.4rem);
}
.ministry-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 clamp(1.5rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line);
}
.m-stat { padding: 1.3rem 0 0; }
.m-stat + .m-stat { border-left: 1px solid var(--line); padding-left: clamp(1.5rem, 3vw, 2.4rem); }
.m-stat-num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 3.5vw, 2.9rem); line-height: 1.05; color: var(--teal);
  font-variant-numeric: lining-nums tabular-nums;
}
.m-stat p { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.5rem; max-width: 38ch; }
.ministry-verse {
  position: relative; margin: 0;
  padding: 1.6rem 0 0.4rem clamp(2.2rem, 4vw, 3.2rem);
  border-left: 2px solid var(--gold);
}
.ministry-verse::before {
  content: "\201C"; position: absolute; top: -0.9rem; left: clamp(1.4rem, 3vw, 2.2rem);
  font-family: var(--font-display); font-size: 6rem; line-height: 1;
  color: rgba(201, 161, 75, 0.32); pointer-events: none;
}
.ministry-verse blockquote {
  position: relative; font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1.4; color: var(--ink);
}
.ministry-verse figcaption {
  margin-top: 1rem; font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal);
}

/* Booking band */
.ministry-cta {
  position: relative; overflow: hidden;
  margin-top: 2.8rem; background: var(--ink); color: var(--ivory);
  border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 2.8rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem;
}
.ministry-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 88% 12%, rgba(201, 161, 75, 0.22), transparent 55%);
}
.ministry-cta > * { position: relative; z-index: 1; }
.ministry-cta h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); max-width: 560px; }
.ministry-cta .script { font-size: 1.4em; color: var(--gold-soft); }
.btn .arrow { transition: transform var(--transition); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Galería (justified rows — natural aspect ratios, no cropping) ----------
   Each figure carries its photo's aspect ratio in --ar (width/height).
   flex-grow ∝ --ar makes every item in a row render at the same height,
   so rows pack edge-to-edge with no dead space and no cropping. */
.gallery-grid { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.6rem; }
.gallery-grid figure {
  --ar: 1.5;
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--ink); margin: 0;
  aspect-ratio: var(--ar);
  flex-grow: calc(var(--ar) * 100);
  flex-basis: calc(var(--ar) * 13.5rem);
  min-width: 0;
}
.gallery-grid img, .gallery-grid video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s ease;
}
.gallery-grid figure:hover img { transform: scale(1.04); }
.gallery-grid figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.6rem 1rem 0.8rem;
  background: linear-gradient(to top, rgba(20,25,36,0.85), transparent);
  color: #fff; font-size: 0.82rem; letter-spacing: 0.04em;
  pointer-events: none;
}
/* The reel is a real <video controls>; the browser draws its play/scrub bar
   along the bottom edge — right where this caption sits. Hovering means the
   visitor wants to play or scrub, so the caption lifts up and fades away to
   hand that bottom strip to the native controls; moving the mouse off lets it
   drop back down into place. Photos (no controls) keep their caption as-is. */
.gallery-grid figure:has(video) figcaption {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.gallery-grid figure:has(video):hover figcaption {
  opacity: 0; transform: translateY(-0.85rem);
}

/* ---------- Contacto ---------- */
.contact-grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2.2rem, 6vw, 4.5rem); align-items: start; }
.form-field { margin-bottom: 1.25rem; }
.form-field label { display: block; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.45rem; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 0.85rem 1rem; font: inherit; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line); border-radius: 10px;
  transition: border-color var(--transition);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--turquoise); outline: none; }
.contact-aside { background: var(--white); border-radius: var(--radius); padding: 2rem; box-shadow: 0 10px 36px -18px rgba(30,36,48,0.25); }
.contact-aside h3 { font-size: 1.4rem; margin-bottom: 0.6rem; }
.contact-aside p { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 1.2rem; }
.contact-aside .hero-social a { border-color: var(--line); color: var(--ink); }
.contact-aside .hero-social a:hover { color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(250,246,239,0.8); padding: 3.5rem 0 2rem; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: 2.2rem; }
.site-footer img { height: 56px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.footer-nav a { color: rgba(250,246,239,0.8); }
.footer-nav a:hover { color: var(--turquoise); }
.footer-base { border-top: 1px solid rgba(250,246,239,0.15); padding-top: 1.6rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem; font-size: 0.82rem; color: rgba(250,246,239,0.55); }
.footer-base a { color: rgba(250,246,239,0.7); }

/* ---------- Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }

/* ---------- Story page (historia / my-story / letras) ---------- */
.page-hero {
  background: var(--ink); color: var(--ivory); position: relative;
  padding: 9.5rem 0 4rem; text-align: center;
}
.page-hero h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); }
.page-hero .script { color: var(--gold-soft); font-size: clamp(1.7rem, 3.5vw, 2.4rem); display: block; margin-bottom: 0.4rem; }
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: 3rem 0 1rem; }
.prose h2 .chapter-num { color: var(--gold); font-style: italic; margin-right: 0.6rem; }
.prose p { margin-bottom: 1.2rem; color: var(--ink-soft); }
.prose .story-quote { color: var(--ink); }
.letter {
  background: var(--white); border: 1px solid var(--gold-soft); border-radius: var(--radius);
  padding: clamp(1.8rem, 5vw, 3rem); margin: 3rem 0; box-shadow: var(--shadow);
}
.letter p { color: var(--ink); }
.letter .signature { font-family: var(--font-script); font-size: 2rem; color: var(--teal); margin-bottom: 0; }

.lyrics-list { max-width: 760px; margin: 2.5rem auto 0; }
.lyrics-list details {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 0.9rem; overflow: hidden;
}
.lyrics-list summary {
  list-style: none; cursor: pointer; padding: 1.1rem 1.4rem;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.lyrics-list summary::-webkit-details-marker { display: none; }
.lyrics-list summary .tag { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); border: 1px solid var(--turquoise); border-radius: 999px; padding: 0.2rem 0.7rem; }
.lyrics-list summary::after { content: "+"; font-size: 1.5rem; color: var(--gold); margin-left: auto; }
.lyrics-list details[open] summary::after { content: "–"; }
.lyrics-list .lyric-body { padding: 0.2rem 1.4rem 1.6rem; color: var(--ink-soft); font-size: 0.97rem; line-height: 1.55; }
.lyrics-list .lyric-body p { margin: 0 0 1.15em; }
.lyrics-list .lyric-body p:last-child { margin-bottom: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .music-grid, .story-grid, .book-grid, .contact-grid { grid-template-columns: 1fr; }
  .video-grid, .video-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; max-width: 540px; }
  .press-grid { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: repeat(3, 1fr); gap: 0 0.6rem; }
  .timeline::before { display: none; }
  .timeline li { border-left: 1.5px solid var(--gold-soft); padding: 0 0 1.2rem 1rem; }
  .timeline li::before { left: -8px; }
  .ministry-head { grid-template-columns: 1fr; align-items: start; gap: 1.2rem; }
  .ministry-head .section-lead { margin-bottom: 0; }
  .ministry-pillars { grid-template-columns: 1fr 1fr; gap: 0 1.8rem; }
  .ministry-figures { grid-template-columns: 1fr; gap: 2.2rem; }
  .ministry-photo { min-height: 0; aspect-ratio: 16 / 9; }
  .m-stat { padding: 1.1rem 0 0; }
  .framed::before { display: none; }
  .book-cover { max-width: 250px; }
}
@media (max-width: 760px) {
  .main-nav {
    position: fixed; inset: 0; background: rgba(20, 25, 36, 0.97);
    flex-direction: column; justify-content: center; gap: 1.9rem;
    opacity: 0; pointer-events: none; transition: opacity var(--transition);
  }
  body.nav-open .main-nav { opacity: 1; pointer-events: auto; }
  .main-nav a, .site-header.scrolled .main-nav a { color: var(--ivory); font-size: 1.05rem; }
  .main-nav .nav-cta, .site-header.scrolled .main-nav .nav-cta { color: var(--ivory); }
  .nav-toggle { display: block; }
  /* On phones the header logo stays at bar size so the large signature
     mark never overflows down onto the hero headline. */
  .brand { height: 42px; width: 57px; --logo-big: 42px; }
  .brand img { height: 42px; }
  body.nav-open { overflow: hidden; }
  .video-grid, .video-grid.cols-2 { grid-template-columns: 1fr; }
  .gallery-grid figure { flex-basis: calc(var(--ar) * 9rem); }
  .press-grid { grid-template-columns: 1fr; }
  .hero { min-height: 92svh; }
  .press-strip { padding: 1.1rem 0; }
  .press-strip .container { gap: 0.55rem 1.4rem; }
  .press-strip .press-name { font-size: 1.08rem; }
  .ministry-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .ministry-pillars { grid-template-columns: 1fr; }
  .ministry-pillars li { padding: 1.1rem 0 1.3rem; }
  .ministry-verse::before { font-size: 5rem; top: -0.6rem; }
  .ministry-stats { grid-template-columns: 1fr; }
  .m-stat + .m-stat { border-left: none; border-top: 1px solid var(--line); padding-left: 0; margin-top: 1.1rem; }
  .gallery-grid { gap: 0.7rem; }
  .gallery-grid figure { flex-basis: calc(var(--ar) * 7.5rem); }
  .timeline { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Long-read experience (historia.html / my-story.html)
   ============================================================ */

/* Reading progress bar */
.read-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 160; pointer-events: none;
}
.read-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--turquoise));
}

/* Story hero */
.story-hero {
  position: relative; min-height: 76svh;
  display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; isolation: isolate;
}
.story-hero .bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
}
.story-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(20,25,36,0.92) 0%, rgba(20,25,36,0.3) 55%, rgba(20,25,36,0.38) 100%);
}
.story-hero .container { padding-bottom: clamp(2.6rem, 7vh, 5rem); width: 100%; }
.story-hero .script { color: var(--gold-soft); font-size: clamp(1.8rem, 3.5vw, 2.6rem); display: block; margin-bottom: 0.2rem; }
.story-hero h1 { font-size: clamp(2.6rem, 6.5vw, 4.4rem); }
.story-standfirst { max-width: 580px; margin-top: 1.1rem; font-size: 1.05rem; color: rgba(255,255,255,0.9); }
.story-meta {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 1.5rem;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-soft);
}

/* Chapter rail (desktop) */
.chapter-rail {
  position: fixed; left: clamp(0.9rem, 2vw, 2rem); top: 50%;
  transform: translateY(-50%); z-index: 90;
  display: flex; flex-direction: column; gap: 1.15rem;
}
.rail-link { display: flex; align-items: center; gap: 0.7rem; color: var(--ink-soft); }
.rail-link .dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  border: 2px solid var(--gold); background: transparent; transition: var(--transition);
}
.rail-link .rail-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0; transform: translateX(-5px); transition: var(--transition); white-space: nowrap;
}
.rail-link:hover .rail-label, .rail-link:focus-visible .rail-label, .rail-link.active .rail-label { opacity: 1; transform: none; }
.rail-link.active .dot { background: var(--gold); transform: scale(1.25); }

/* Part intro */
.part-intro { text-align: center; padding: clamp(4rem, 9vw, 6.5rem) 1.5rem clamp(2rem, 5vw, 3.2rem); }
.part-kicker {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--teal);
}
.part-num {
  display: block; font-family: var(--font-script);
  font-size: clamp(3.4rem, 7vw, 4.8rem); color: var(--gold);
  line-height: 1; margin: 1rem 0 0.1rem;
}
.part-title { font-size: clamp(2.1rem, 5vw, 3.1rem); }
.part-summary {
  max-width: 600px; margin: 1.1rem auto 0;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.42rem); line-height: 1.55; color: var(--ink-soft);
}
.part-intro::after { content: ""; display: block; width: 56px; height: 2px; background: var(--gold); margin: 1.8rem auto 0; }

/* Long-read prose column */
.longread { max-width: 680px; margin: 0 auto; padding: 0 1.5rem; }
.longread h3 { font-size: clamp(1.45rem, 3vw, 1.8rem); margin: 2.8rem 0 1rem; }
.longread h3 .chapter-num { color: var(--gold); font-style: italic; margin-right: 0.55rem; }
.longread p { margin-bottom: 1.3rem; color: var(--ink-soft); }
.longread .letter p { color: var(--ink); }
.dropcap::first-letter {
  font-family: var(--font-display); font-weight: 700; font-size: 3.3em;
  float: left; line-height: 0.84; padding: 0.05em 0.14em 0 0; color: var(--teal);
}

/* Full-width pull-quote band */
.pullquote-band {
  background: var(--ink); color: var(--ivory); text-align: center;
  padding: clamp(3rem, 8vw, 5rem) 0; margin: clamp(2.4rem, 6vw, 4rem) 0;
}
.pullquote-band blockquote {
  max-width: 840px; margin: 0 auto; padding: 0 1.5rem;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.45rem, 3.6vw, 2.25rem); line-height: 1.42;
}
.pullquote-band cite {
  display: block; margin-top: 1.3rem;
  font-family: var(--font-body); font-style: normal;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-soft);
}

/* Interleaved figures */
.figure-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
  max-width: 880px; margin: clamp(2.2rem, 5vw, 3.2rem) auto; padding: 0 1.5rem;
}
.figure-wide { max-width: 880px; margin: clamp(2.2rem, 5vw, 3.2rem) auto; padding: 0 1.5rem; }
.figure-pair figure, .figure-wide figure {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--ink); box-shadow: var(--shadow);
}
/* Ratios match the source photos (portraits ≈3:4, stills 16:9) so
   nothing meaningful is cropped; object-position guards faces. */
.figure-pair img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; object-position: 50% 18%; }
.figure-wide img { width: 100%; object-fit: cover; aspect-ratio: 16 / 9; object-position: 50% 25%; }
.figure-pair figcaption, .figure-wide figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.5rem 1.1rem 0.8rem;
  background: linear-gradient(to top, rgba(20,25,36,0.85), transparent);
  color: #fff; font-size: 0.8rem; letter-spacing: 0.04em;
}

/* Part rhythm */
.part { padding-bottom: clamp(3rem, 7vw, 5rem); }
.part-alt { background: var(--white); }

@media (max-width: 1240px) { .chapter-rail { display: none; } }
@media (max-width: 640px) {
  .figure-pair { grid-template-columns: 1fr; }
  .story-hero { min-height: 64svh; }
}

/* ============================================================
   Lightbox (site-wide click-to-enlarge for photos)
   ============================================================ */
img[data-lightbox] { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(20, 25, 36, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  animation: lbFade 0.25s ease;
}
.lightbox[hidden] { display: none; }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.lightbox figure { margin: 0; text-align: center; max-width: 100%; }
.lightbox img {
  max-width: min(1100px, 100%); max-height: 80svh;
  width: auto; height: auto; margin: 0 auto;
  border-radius: 8px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  animation: lbZoom 0.25s ease;
}
@keyframes lbZoom { from { transform: scale(0.96); } to { transform: none; } }
.lightbox figcaption {
  color: rgba(250, 246, 239, 0.88); margin-top: 1rem;
  font-size: 0.92rem; letter-spacing: 0.03em;
}
.lb-close {
  position: absolute; top: 0.9rem; right: 1rem; z-index: 2;
  background: none; border: 0; color: #fff;
  font-size: 2.4rem; line-height: 1; padding: 0.3rem 0.6rem;
  opacity: 0.85; transition: var(--transition);
}
.lb-close:hover { opacity: 1; transform: scale(1.08); }
.lb-prev, .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(20, 25, 36, 0.45); color: #fff;
  font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.lb-prev { left: clamp(0.6rem, 2vw, 1.6rem); }
.lb-next { right: clamp(0.6rem, 2vw, 1.6rem); }
.lb-prev:hover, .lb-next:hover { background: var(--turquoise); border-color: var(--turquoise); }
body.lb-open { overflow: hidden; }
@media (max-width: 640px) {
  .lb-prev, .lb-next { width: 40px; height: 40px; }
  .lightbox img { max-height: 72svh; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-bg { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .platform-pill:hover { transform: none; }
  .testimonial-card:hover .media-row .media-link > img,
  .testimonial-card:hover .media-row .media-chip { transform: none; }
  .lightbox, .lightbox img { animation: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .nav-toggle { display: none; }
  .hero { min-height: auto; color: var(--ink); }
}