/* ==================================================================
   PETER QUINTINO — nvfase.com/peterquintino
   Terceiro exemplar do NVFASE Artist Framework. Mesma engenharia das
   páginas do Carlinhos Falsetti e do Vitor Teixeira (nav, menu, agenda
   com estado vazio, convite, ficha do lançamento, srcset/WebP, cache
   busting, reduced-motion); identidade própria.
   ------------------------------------------------------------------
   TESE
     Carlinhos: papel · memória · madeira · hinário
     Vitor:     pedra · arquitetura · luz · âmbar
     Peter:     palco · contraste · pulso · guitarra · preto · vermelho
     «o palco ainda está escuro, mas alguém já está ali com a guitarra»
   PRINCÍPIOS
   · O preto é o palco, não um "modo escuro": a fotografia (CD Peter-55,
     estúdio, fundo preto) não tem moldura — funde-se na página pela
     esquerda e o seu preto é o preto do fundo.
   · O nome é cartaz: PETER / QUINTINO em Big Shoulders 800, caixa alta,
     escala de rua, no vazio à esquerda; a segunda linha entra por trás
     da guitarra. Foto e tipografia são uma composição, não dois blocos.
   · O vermelho é sinal, não tinta: as luzes dos rótulos, o botão, a
     data do lançamento. Nunca superfícies grandes.
   · Cobre vem da pele e da madeira da guitarra: metadados, fios quentes.
   · Vozes: Big Shoulders (display + rótulos; um só ficheiro variável
     com eixo óptico) · Schibsted Grotesk (texto corrido, calmo).
     Nenhuma partilhada com os outros dois artistas.
   ================================================================== */

/* ---------- Fontes ---------- */
@font-face {
  font-family: 'Big Shoulders';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/big-shoulders-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/schibsted-grotesk-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic; font-weight: 400 900; font-display: swap;
  src: url(../fonts/schibsted-grotesk-var-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* Cor — amostrada da fotografia (fundo, pele, guitarra) e da capa de «Decretado Está» */
  --black:        #0D0D0B;   /* o fundo do estúdio na foto 55 (cantos): o preto da página */
  --black-lit:    #141211;   /* o mesmo fundo onde a luz chega: superfícies, menu */
  --white:        #F4F1EB;   /* branco quente: a camisa sob a luz */
  --white-soft:   rgba(244, 241, 235, .74);
  --white-mute:   rgba(244, 241, 235, .52);
  --line:         rgba(244, 241, 235, .16);
  --hair:         rgba(244, 241, 235, .09);
  /* O vermelho da capa (média #FA3535) ajustado ao ecrã: 5:1 sobre o preto em texto pequeno */
  --red:          #F23838;
  --red-deep:     #B4121F;   /* superfície do botão: branco por cima a 7:1 */
  /* Cobre: a pele (#7D4B3C) e a madeira da guitarra, clareados para ler sobre preto (5,8:1) */
  --copper:       #B8825F;
  --copper-deep:  #8A5733;   /* o mesmo cobre, escurecido para ler sobre o branco quente (5,1:1) */

  /* Tipografia */
  --font-display: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --font-text:    "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Escala */
  --text-body:  clamp(1rem, .95rem + .25vw, 1.1rem);
  --text-label: .78rem;

  /* Ritmo */
  --gutter:   clamp(1.25rem, 5vw, 4.5rem);
  --nav-h:    4.5rem;
  --ease:     cubic-bezier(.22, .61, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur:      .45s;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
html, body { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

/* Rótulos: Big Shoulders em caixa alta e tamanho de fita de palco.
   O eixo óptico (opsz 10–72) é automático: em tamanhos pequenos a fonte
   abre as formas sozinha. */
.label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -4rem;
  padding: .6rem 1rem; background: var(--white); color: var(--black);
  z-index: 100; transition: top .2s var(--ease);
}
.skip-link:focus { top: .75rem; }

/* ---------- Navegação ----------
   Mesmo esqueleto do framework; sobre preto. Wordmark em Big Shoulders
   pesada e tracking largo, como a marca de um amplificador; destinos em
   rótulos; cada um tem uma luz vermelha que acende no hover. */
.nav {
  position: fixed; inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 50;
  display: flex; align-items: center;
  padding-inline: var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav.is-stuck {
  background: rgba(13, 13, 11, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: var(--hair);
}
.nav-inner {
  width: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  padding-top: .1em; /* compensa a altura das capitulares: alinha ao centro óptico */
  /* Handoff de marca: some so quando o nome monumental do Hero deixa a
     area util (ver IntersectionObserver no HTML). Espaco reservado desde
     o primeiro frame -- nunca display:none -- para nao mover NVFASE/menu. */
  opacity: 0; transform: translateY(3px) scale(.97); pointer-events: none;
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.nav.artist-mark-visible .wordmark { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .wordmark { transition: none; } }
.nav-links { display: flex; gap: clamp(1.4rem, 2.8vw, 2.6rem); }
.nav-links a {
  position: relative; padding: .4rem 0 .4rem .9rem;
  color: var(--white-soft);
  transition: color var(--dur) var(--ease);
}
/* a luz: um quadrado vermelho apagado que acende */
.nav-links a::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 5px; height: 5px; margin-top: -3px;
  background: var(--red);
  opacity: 0; transform: scale(.4);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::before, .nav-links a:focus-visible::before { opacity: 1; transform: none; }
.nav-links a[aria-current] { color: var(--white); }
.nav-links a[aria-current]::before { opacity: 1; transform: none; }
.menu-links a[aria-current]::before { opacity: 1; }
.nav-end { display: flex; justify-content: flex-end; align-items: center; gap: 1.2rem; }
.nav-seal { display: inline-flex; align-items: center; }
.nav-seal img { height: 1.1rem; width: auto; opacity: .55; transition: opacity var(--dur) var(--ease); }
.nav-seal:hover img, .nav-seal:focus-visible img { opacity: 1; }
.menu-btn {
  display: none;
  appearance: none; background: none; border: 1px solid var(--line);
  border-radius: 0; padding: .65rem .9rem .55rem;
  font: inherit; font-family: var(--font-display); font-weight: 600; font-size: var(--text-label); letter-spacing: .14em; text-transform: uppercase;
  color: var(--white); cursor: pointer;
}

/* Menu móvel: painel preto; destinos em Big Shoulders de cartaz, cada
   um com a sua luz à esquerda, separados por fios */
.menu {
  position: fixed; inset: var(--nav-h) 0 0 0;
  z-index: 40;
  background: var(--black);
  padding: clamp(1.2rem, 5vh, 2.5rem) var(--gutter);
  display: flex; flex-direction: column; justify-content: space-between;
  animation: fade-up .35s var(--ease-out) both;
}
.menu[hidden] { display: none; }
.menu-links { display: grid; }
.menu-links a {
  display: grid; grid-template-columns: 1.4rem 1fr; align-items: center;
  font-family: var(--font-display);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.8rem, 14vw, 4.6rem); line-height: 1;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--line);
  padding: .32em 0 .22em;
}
.menu-links a::before {
  content: ""; width: 7px; height: 7px; background: var(--red);
  opacity: .35; transition: opacity var(--dur) var(--ease);
}
.menu-links a:hover::before, .menu-links a:focus-visible::before { opacity: 1; }
.menu-links a:hover { color: var(--white); }
.menu-foot { color: var(--white-mute); margin: 0; font-size: .95rem; }
.menu-foot a { color: var(--white); border-bottom: 1px solid var(--line); }
html.menu-open { overflow: hidden; }
html.menu-open .nav { background: var(--black); border-color: var(--hair); }

/* ---------- Componentes ---------- */
/* Botão: bloco vermelho de cantos retos, rótulo em Big Shoulders */
.btn {
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .8em;
  padding: 1.05em 1.5em .95em;
  border-radius: 0;
  background: var(--red-deep); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: .92rem; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background-color var(--dur) var(--ease);
}
.btn:hover { background: #CF1A27; }
.btn .icon { width: 1em; height: 1em; }
.link-label {
  display: inline-flex; align-items: center; gap: .55em;
  color: var(--white-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: .25em;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-label svg { width: .85rem; height: .85rem; transition: transform var(--dur) var(--ease-out); }
.link-label:hover { color: var(--white); border-color: var(--red); }
.link-label:hover svg { transform: translate(2px, -2px); }
.link-label.is-soon { color: var(--white-mute); border-color: var(--hair); cursor: default; }
.link-label.is-soon svg { opacity: .5; }
/* Kicker: rótulo com a sua luz vermelha */
.kicker {
  margin: 0 0 .8rem;
  color: var(--white-soft);
  display: flex; align-items: center; gap: .7rem;
}
.kicker::before { content: ""; width: 6px; height: 6px; background: var(--red); flex: none; }
.kicker-red { color: var(--red); }
.ig-handle { font-weight: 700; color: var(--white); text-transform: none; letter-spacing: .02em; }
.agenda-follow { color: var(--copper); border-color: rgba(184, 130, 95, .35); }
.agenda-follow:hover .ig-handle { color: var(--red); }

/* ---------- Hero ----------
   Quatro zonas que nunca se cruzam: a grelha garante-o. Coluna 1 =
   zona funcional (agenda + convite) em cima e nome monumental em
   baixo, separados por uma linha elástica; coluna 2 = o bilhete do
   lançamento, encostado ao canto. A fotografia continua absoluta por
   cima do nome (a sobreposição desejada) e por baixo do que é
   funcional. Em janelas baixas a linha elástica encolhe e o herói
   cresce — texto funcional nunca cai em cima do nome. */
.hero {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--nav-h) + clamp(1.6rem, 5vh, 4rem)) var(--gutter) clamp(1.8rem, 6vh, 4rem);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(clamp(2rem, 7vh, 5rem), 1fr) auto;
  column-gap: clamp(1.5rem, 4vw, 3rem);
}

/* A fotografia: à direita, altura do palco inteiro, largura natural
   (7:6). Sem moldura: a máscara só de alfa funde-a no preto pela
   esquerda — o vazio do palco e o fundo do estúdio são o mesmo preto. */
.hero-photo {
  position: absolute; right: 0; bottom: 0;
  /* altura = palco inteiro nos ecrãs largos; em janelas mais estreitas a
     foto baixa (ancorada ao chão) para deixar vazio ao nome sem cortar a
     guitarra */
  height: min(100%, 56vw);
  margin: 0;
  z-index: 2;
}
.hero-photo picture, .hero-photo img { height: 100%; width: auto; }
/* a animação vive no mesmo elemento da máscara: animar o <figure> por cima
   de uma máscara no <img> deixava o Chrome sem repintar no fim */
.hero-photo img {
  animation: photo-in 1.4s var(--ease-out) both;
  object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 12%, #000 26%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 12%, #000 26%);
}
@keyframes photo-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* O nome: cartaz no vazio, ancorado ao chão do palco. Fica POR BAIXO da
   fotografia: onde a segunda linha entra na foto, a guitarra e a
   escuridão do estúdio cobrem as letras. */
.hero-name {
  grid-column: 1; grid-row: 3;
  position: relative; align-self: end;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(5.5rem, 12.7vw, 15.5rem);
  line-height: .88; letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
}
.hero-name .line { display: block; }
.hero-name .line > span { display: block; animation: rise 1s var(--ease-out) backwards; }
.hero-name .line:nth-child(2) > span { animation-delay: .12s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(.15em); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* A coluna funcional: rótulos colados no vazio, acima do nome */
.hero-rail {
  grid-column: 1; grid-row: 1;
  position: relative;
  z-index: 3;
  width: min(21rem, 34vw);
  display: grid; gap: clamp(1.6rem, 4.5vh, 3rem);
  animation: fade-up 1s var(--ease-out) .5s backwards;
}
.rail-block { min-width: 0; }
.agenda-list { list-style: none; margin: 0; padding: 0; }
.agenda-list:empty { display: none; }
.agenda-list:empty + .agenda-empty { display: block; }
.agenda-empty {
  display: none;
  margin: 0 0 .9rem;
  color: var(--white-soft);
  font-size: .98rem; line-height: 1.5;
  max-width: 24ch;
}
.agenda-empty em { font-style: italic; color: var(--white); }
.agenda-item {
  display: grid; grid-template-columns: 3.2rem 1fr; grid-template-areas: "date what" "date where" "date link";
  gap: .1rem .9rem; padding: .8rem 0; border-top: 1px solid var(--line);
}
.agenda-date { grid-area: date; color: var(--red); }
.agenda-date b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: .9; color: var(--white); letter-spacing: 0; }
.agenda-what { grid-area: what; font-size: 1.05rem; line-height: 1.2; }
.agenda-where { grid-area: where; color: var(--white-mute); }
.agenda-link { grid-area: link; color: var(--white-soft); border-bottom: 1px solid var(--line); justify-self: start; }

.invite-text {
  margin: 0 0 1.1rem;
  color: var(--white-soft);
  font-size: 1.02rem; line-height: 1.45;
  max-width: 22ch;
}
.invite-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }

/* O lançamento vigente: um bilhete no canto do palco, sobre a zona
   escura da fotografia (as pernas e o chão) */
.hero-now {
  grid-column: 2; grid-row: 3;
  position: relative; justify-self: end; align-self: end;
  z-index: 3;
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: center;
  width: min(21rem, 30vw);
  animation: fade-up 1s var(--ease-out) .7s backwards;
}
.hero-now img { width: 5.5rem; height: 5.5rem; }
.now-text { display: grid; gap: .25rem; min-width: 0; }
.now-text .kicker { margin: 0; }
.now-title {
  font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1;
  letter-spacing: .02em; text-transform: uppercase;
}
.now-go { display: inline-flex; align-items: center; gap: .5em; color: var(--white-soft); transition: color var(--dur) var(--ease); }
.now-go svg { width: .8rem; height: .8rem; transition: transform var(--dur) var(--ease-out); }
.hero-now:hover .now-go { color: var(--white); }
.hero-now:hover .now-go svg { transform: translate(2px, -2px); }

/* placeholders das secções futuras: só âncoras */
.placeholder { height: 1px; margin: 0; }

/* ---------- Ajustes ---------- */
@media (min-width: 861px) and (max-width: 1180px) {
  /* Faixa intermédia: a zona funcional comprime-se (fios mais juntos,
     corpo de texto e botão menores) para o nome monumental caber
     inteiro mesmo em janelas baixas. */
  .hero { padding-top: calc(var(--nav-h) + clamp(1rem, 3vh, 2rem)); }
  .hero-rail { gap: clamp(1.1rem, 3vh, 1.9rem); }
  .hero-rail .agenda-empty { font-size: .92rem; margin-bottom: .75rem; max-width: 26ch; }
  .hero-rail .invite-text { font-size: .95rem; margin-bottom: .9rem; }
  .hero-rail .btn { padding: .9em 1.25em .8em; font-size: .86rem; }
  .hero-name { font-size: clamp(5rem, 11.4vw, 12rem); }

  /* Faixa intermédia: a foto cresce e a dissolução fica curta, para que
     o fim de QUINTINO encontre o CORPO da guitarra (opaco, legível como
     sobreposição) e não a zona esbatida da máscara — que fazia as letras
     parecerem apagadas por acidente. */
  .hero-photo { height: min(100%, 56vw); }
  .hero-photo img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.6) 70px, #000 165px);
            mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.6) 70px, #000 165px);
  }
  .hero-now { width: min(20rem, 34vw); }
}
@media (max-width: 1180px) {
  .hero-rail { width: min(19rem, 36vw); }
  .hero-now { width: min(19rem, 32vw); grid-template-columns: 4.5rem 1fr; }
  .hero-now img { width: 4.5rem; height: 4.5rem; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-block; }
  /* alvos de toque: a chancela e o wordmark ganham área sem mudar de tamanho */
  .nav-seal { padding: .8rem .4rem; margin-inline: -.4rem; }
  .nav-seal img { height: 1rem; }
  .wordmark { padding-block: .7rem .6rem; }
  .link-label { padding-top: .55rem; }

  /* Celular: composição própria — o nome abre o palco (marquise), a
     fotografia em retrato entra por trás da segunda linha, e os rótulos
     seguem em coluna. */
  .hero {
    min-height: 0;
    display: flex; flex-direction: column;
    padding: calc(var(--nav-h) + 1.2rem) 0 clamp(2rem, 6vh, 3rem);
  }
  .hero-name {
    position: relative; left: auto; bottom: auto;
    order: 1; z-index: 3;
    padding-inline: var(--gutter);
    font-size: clamp(4.6rem, 24vw, 9.5rem);
    margin-bottom: -1.15em; /* a segunda linha pousa no vazio acima da cabeça */
  }
  .hero-photo {
    position: relative; inset: auto; height: auto;
    order: 2; z-index: 2;
    width: 100%; aspect-ratio: 3 / 4;
    min-height: 0; /* item flex: sem isto a altura intrínseca do <img> vence o aspect-ratio */
  }
  .hero-photo picture, .hero-photo img { width: 100%; height: 100%; }
  .hero-photo img {
    object-position: 50% 40%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 80%, transparent 100%);
  }
  .hero-rail {
    position: relative; left: auto; top: auto;
    order: 3; width: auto;
    margin-top: -1.2rem;
    padding-inline: var(--gutter);
    gap: 2rem;
  }
  .hero-now {
    position: relative; right: auto; bottom: auto;
    order: 4; width: auto;
    margin: 2.2rem var(--gutter) 0;
    padding-top: 1.4rem; border-top: 1px solid var(--line);
  }
  .invite-text { max-width: 26ch; }
  .agenda-empty { max-width: 30ch; }
}
@media (min-width: 601px) and (max-width: 860px) {
  /* tablet em pé: a foto quadrada, recortada por cima, para o nome não ficar longe da cabeça */
  .hero-photo { aspect-ratio: 1 / 1; }
  .hero-photo img { object-position: 50% 100%; }
  .hero-name { margin-bottom: -.3em; }
}
@media (max-width: 400px) {
  .invite-actions { gap: .9rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-photo img, .hero-name .line > span, .hero-rail, .hero-now, .menu { animation: none; }
  .link-label:hover svg, .hero-now:hover .now-go svg { transform: none; }
}

/* ---------- Assista ----------
   O palco continua: mesmo preto, sem quebra de fundo. O título é
   cartaz (à esquerda, colado ao topo da secção); por baixo, o vídeo
   domina e o setlist é uma folha impressa à direita — tipografia e um
   sinal vermelho, sem caixas, sem miniaturas, sem sombras. */
/* a pausa depois do herói: o palco continua preto, mas o vazio antes
   do título é longo o bastante para que QUINTINO e ASSISTA não se
   leiam como um só bloco; o título muda de eixo (direita) para
   reforçar que começou outra secção */
.watch {
  padding: clamp(8rem, 22vh, 16rem) var(--gutter) clamp(3.5rem, 9vh, 6rem);
  border-top: 1px solid var(--hair);
}
.watch-head {
  display: flex; justify-content: flex-end;
  margin-bottom: clamp(2.2rem, 6vh, 4rem);
}
.watch-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 11vw, 13rem);
  line-height: .82; letter-spacing: .01em;
  text-transform: uppercase;
}

.watch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 27%);
  grid-template-rows: auto 1fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
}
/* o palco ocupa a coluna esquerda inteira; o setlist fica no alto da
   direita e o destino do canal desce para o pé dessa mesma folha */
.stage { grid-column: 1; grid-row: 1 / span 2; }
.setlist { grid-column: 2; grid-row: 1; }
.watch-foot { grid-column: 2; grid-row: 2; align-self: end; }

/* O palco: 16:9 reservado desde o início (sem salto quando o iframe chega) */
.stage { position: relative; min-width: 0; }
.stage-poster, .stage iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 0; background: var(--black-lit);
}
.stage-poster {
  position: relative; padding: 0; margin: 0; cursor: pointer;
  overflow: hidden;
}
.stage-poster img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out), opacity var(--dur) var(--ease);
}
.stage-poster:hover img { transform: scale(1.02); }
/* o botão de play: um quadrado vermelho, não uma pílula */
.stage-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(3.4rem, 5vw, 4.4rem); aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--red-deep); color: var(--white);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.stage-play svg { width: 45%; height: 45%; }
.stage-poster:hover .stage-play { background: #CF1A27; transform: translate(-50%, -50%) scale(1.06); }
.stage-poster:focus-visible { outline: none; }
.stage-poster:focus-visible .stage-play { outline: 2px solid var(--white); outline-offset: 5px; }

.stage-info { padding-top: clamp(1rem, 2.5vh, 1.5rem); }
.stage-name {
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1;
  letter-spacing: .02em; text-transform: uppercase;
}
.stage-meta { margin: .5rem 0 0; color: var(--copper); }

/* Setlist: linhas de uma folha de palco */
.setlist {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line);
}
.set-item { border-bottom: 1px solid var(--line); }
.set-item button {
  appearance: none; background: none; border: 0; cursor: pointer;
  width: 100%; text-align: left;
  display: grid; grid-template-columns: .8rem 1fr; column-gap: .9rem;
  padding: 1.05rem 0 .95rem;
  color: inherit; font: inherit;
}
/* o sinal: quadrado vermelho apagado; acende na faixa em exibição */
.set-item button::before {
  content: ""; grid-row: 1 / span 2;
  width: 7px; height: 7px; margin-top: .55em;
  background: var(--red); opacity: .25;
  transition: opacity var(--dur) var(--ease);
}
.set-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem); line-height: 1.05;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--white-soft);
  transition: color var(--dur) var(--ease);
}
.set-meta { display: block; margin-top: .35rem; color: var(--white-mute); }
.set-item button:hover .set-name { color: var(--white); }
.set-item button:hover::before { opacity: .7; }
.set-item.is-active button::before { opacity: 1; }
.set-item.is-active .set-name { color: var(--white); }
.set-item.is-active .set-meta { color: var(--copper); }
.set-item button:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

.watch-foot { margin: clamp(1.6rem, 4vh, 2.4rem) 0 0; }

@media (max-width: 1180px) {
  .watch-grid { grid-template-columns: minmax(0, 1fr) minmax(13rem, 30%); }
}
@media (max-width: 860px) {
  /* Celular: uma coluna. O palco continua a dominar (sangra até às
     margens), o setlist segue por baixo como lista impressa. */
  .watch { padding-inline: 0; }
  .watch-head, .watch-foot { padding-inline: var(--gutter); }
  .watch-head { justify-content: flex-start; }
  .watch-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 1.6rem; }
  .stage, .setlist, .watch-foot { grid-column: 1; grid-row: auto; }
  .watch-foot { margin-top: .6rem; }
  .stage-info { padding-inline: var(--gutter); }
  .setlist { margin-inline: var(--gutter); }
}
@media (prefers-reduced-motion: reduce) {
  .stage-poster img, .stage-play { transition: none; }
  .stage-poster:hover img { transform: none; }
  .stage-poster:hover .stage-play { transform: translate(-50%, -50%); }
}

/* ---------- Ouça ----------
   A primeira quebra da página: o palco acaba num corte seco (sem
   degradê, sem fio) e começa a superfície clara — do palco para o
   encarte. A composição é de cartaz e não repete o Assista: o bloco
   da playlist abre em cima à direita, os destinos ficam em baixo à
   esquerda e OUÇA fecha a secção em baixo à direita, como um carimbo.
   A tinta inverte-se (preto sobre branco quente); o vermelho continua
   a ser só sinal. */
.listen {
  background: var(--white);
  color: var(--black);
  padding: clamp(4rem, 10vh, 7rem) var(--gutter) clamp(3rem, 8vh, 5rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: clamp(2rem, 5vh, 3.2rem);
  align-items: start;
  /* tinta invertida para os componentes partilhados desta secção */
  --ink-soft: rgba(13, 13, 11, .72);
  --ink-mute: rgba(13, 13, 11, .6);   /* .5 dava 3,54:1 na ficha das Histórias (abaixo de AA); .6 dá 4,94:1 */
  --ink-line: rgba(13, 13, 11, .18);
}
/* OUÇA é a âncora: a palavra e o player assentam na mesma linha de
   base e formam um só bloco; os destinos são o segundo eixo, uma
   banda por baixo do fio. */
.listen-rule { grid-column: 1 / -1; grid-row: 2; height: 1px; background: var(--ink-line); }
.listen-title {
  grid-column: 1; grid-row: 1;
  justify-self: start; align-self: end;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 13vw, 15rem);
  line-height: .78; letter-spacing: .01em;
  text-transform: uppercase;
}
/* o bloco da playlist: ficha à esquerda, player logo abaixo, sem
   moldura — o embed traz o seu próprio canto arredondado */
.listen-stage { grid-column: 2; grid-row: 1; margin: 0; min-width: 0; justify-self: end; width: min(34rem, 100%); }
.listen-caption { display: block; margin-bottom: clamp(.9rem, 2vh, 1.2rem); }
.listen .kicker { color: var(--ink-soft); }
.listen-player {
  position: relative;
  height: 352px;
  max-width: 34rem;
}
.listen-player iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
  opacity: 0; transition: opacity .6s var(--ease);
}
.listen-player.is-ready iframe { opacity: 1; }
.listen-fallback {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: .55em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink-line); padding-bottom: .25em;
  white-space: nowrap;
}
.listen-fallback svg { width: .85rem; height: .85rem; }
.listen-player.is-ready .listen-fallback { display: none; }

/* Os destinos: coluna de linhas finas, nome em Big Shoulders e seta */
.listen-platforms { grid-column: 1 / -1; grid-row: 3; }
.listen-platforms .kicker { margin-bottom: 1.1rem; }
.platform-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--ink-line);
}
.platform-list li + li { border-left: 1px solid var(--ink-line); }
.platform-list a {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: 1.1rem clamp(.8rem, 1.6vw, 1.6rem) 1rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--black);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease-out);
}
.platform-list a svg { width: .85rem; height: .85rem; color: var(--ink-mute); transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease); }
.platform-list a:hover { color: var(--red-deep); }
.platform-list a:hover svg { color: var(--red-deep); transform: translate(2px, -2px); }
.platform-list a:focus-visible { outline: 2px solid var(--red-deep); outline-offset: -2px; }

@media (max-width: 1180px) {
  .listen-title { font-size: clamp(4.5rem, 12vw, 11rem); }
}
@media (max-width: 860px) {
  /* Celular: OUÇA abre a superfície clara, a playlist vem a seguir e os
     destinos fecham em duas colunas. */
  .listen {
    grid-template-columns: 1fr; grid-template-rows: none;
    row-gap: clamp(2.2rem, 6vh, 3rem);
    padding-top: clamp(3.2rem, 9vh, 5rem);
  }
  .listen-title, .listen-stage, .listen-platforms, .listen-rule {
    grid-column: 1; grid-row: auto;
    /* stretch: com justify-self:start o item encolhe até ao conteúdo e o
       embed do Spotify fica estreito */
    justify-self: stretch; align-self: start;
  }
  .listen-title { font-size: clamp(4.6rem, 24vw, 9rem); }
  .listen-stage { width: auto; }
  .listen-player { max-width: none; }
  .platform-list { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .platform-list li + li { border-left: 0; }
  .platform-list li { border-bottom: 1px solid var(--ink-line); }
  .platform-list a { padding: 1.05rem 0 .95rem; font-size: .95rem; }
}
@media (max-width: 600px) {
  /* altura do player compacto do Spotify (a documentada). Provisório:
     a altura em mobile vai ser revista na auditoria do Artist Framework. */
  .listen-player { height: 152px; }
}
@media (prefers-reduced-motion: reduce) {
  .listen-player iframe, .platform-list a, .platform-list a svg { transition: none; }
  .platform-list a:hover { padding-left: 0; }
  .platform-list a:hover svg { transform: none; }
}

/* ---------- Conheça ----------
   Volta ao estúdio escuro, mas com outra função compositiva: aqui a
   tipografia está POR CIMA da fotografia (no herói era o contrário) e
   o retrato entra pela margem esquerda, dissolvido nos bordos — um
   recorte de estúdio, sem moldura. A leitura fica à direita. */
.about {
  background: var(--black);
  padding: clamp(4.5rem, 12vh, 8rem) var(--gutter) clamp(3rem, 6vh, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(1.5rem, 3vw, 3rem);
}
/* CONHEÇA: nasce à esquerda, por cima do retrato */
.about-title {
  grid-column: 1 / -1; grid-row: 1;
  position: relative; z-index: 2;
  margin: 0 0 calc(-1 * clamp(2.5rem, 7vw, 6.5rem));
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 11.5vw, 13rem);
  line-height: .8; letter-spacing: .01em;
  text-transform: uppercase;
}
/* o retrato: sangra pela margem esquerda e perde os bordos no preto */
.about-photo {
  grid-column: 1; grid-row: 2;
  margin: 0 0 0 calc(-1 * var(--gutter));
  position: relative; z-index: 1;
}
.about-photo img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to right, #000 70%, transparent 100%), linear-gradient(to bottom, #000 86%, transparent 100%);
          mask-image: linear-gradient(to right, #000 70%, transparent 100%), linear-gradient(to bottom, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* a leitura: coluna da direita, alinhada pelo alto do retrato */
.about-bio {
  grid-column: 2; grid-row: 2;
  padding-top: clamp(3rem, 8vw, 7rem);
  max-width: 44ch;
}
.about-bio .kicker { margin-bottom: 1.4rem; }
.about-bio p { margin: 0 0 1.15em; color: var(--white-soft); }
.about-bio p:last-child { margin-bottom: 0; }
.about-bio b { font-weight: 600; color: var(--white); }
.about-lead {
  font-size: clamp(1.15rem, 1.3vw, 1.35rem); line-height: 1.4;
  color: var(--white) !important;
}
.about-lead em { font-style: normal; color: var(--copper); }

@media (min-width: 861px) {
  /* A altura da secção era dada pela CAIXA do retrato: abaixo de ~70 %
     da imagem só há calça preta e a rampa da máscara — pixels com o
     mesmo brilho do fundo (13). Essa faixa ocupava layout sem mostrar
     nada. Aqui a caixa termina aos 80 % (a imagem mantém recorte e
     escala; só deixa de reservar altura invisível). */
  .about-photo { aspect-ratio: 72 / 80; overflow: hidden; }
  /* a dissolução termina onde a caixa termina: sem ela ficaria um
     degrau, porque o preto da fotografia (1–11) é mais denso que o da
     página (13). A figura visível acaba aos ~69 %, por isso a rampa só
     começa depois disso — o retrato aprovado não muda. */
  .about-photo img {
    -webkit-mask-image: linear-gradient(to right, #000 70%, transparent 100%), linear-gradient(to bottom, #000 72%, transparent 80%);
            mask-image: linear-gradient(to right, #000 70%, transparent 100%), linear-gradient(to bottom, #000 72%, transparent 80%);
  }
}
@media (max-width: 1180px) {
  .about { grid-template-columns: minmax(0, 54%) minmax(0, 1fr); }
  .about-bio { padding-top: clamp(2rem, 6vw, 4rem); }
}
@media (max-width: 860px) {
  /* Celular: o título abre, o retrato sangra de margem a margem e a
     biografia segue por baixo — nenhum texto sobre o rosto. */
  .about {
    grid-template-columns: 1fr; grid-template-rows: none;
    padding-inline: 0;
    /* o celular mantém o respiro aprovado: a redução do fundo é só
       para desktop/tablet, onde a caixa do retrato criava o vazio */
    padding-bottom: clamp(4rem, 10vh, 7rem);
    row-gap: 0;
  }
  .about-title {
    grid-column: 1; grid-row: auto;
    padding-inline: var(--gutter);
    font-size: clamp(3.6rem, 19vw, 7rem);
    margin-bottom: calc(-1 * clamp(1.5rem, 7vw, 3rem));
  }
  .about-photo {
    grid-column: 1; grid-row: auto;
    margin-left: 0;
  }
  .about-photo img {
    -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .about-bio {
    grid-column: 1; grid-row: auto;
    padding: clamp(1.5rem, 5vh, 2.5rem) var(--gutter) 0;
    max-width: none;
  }
}

/* ---------- Histórias ----------
   Quinta função: arquivo. Corte seco do estúdio preto para a página
   impressa (o mesmo branco quente do Ouça). A palavra não é cabeçalho
   nem carimbo: é a MARGEM — corre na vertical pelo bordo esquerdo,
   como a lombada de um arquivo, e a matéria ocupa a folha. */
.stories {
  background: var(--white);
  color: var(--black);
  padding: clamp(4rem, 10vh, 7rem) var(--gutter);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  --ink-soft: rgba(13, 13, 11, .72);
  --ink-mute: rgba(13, 13, 11, .6);   /* .5 dava 3,54:1 na ficha das Histórias (abaixo de AA); .6 dá 4,94:1 */
  --ink-line: rgba(13, 13, 11, .18);
}
.stories-title {
  margin: 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 6.5vw, 7.5rem);
  line-height: 1; letter-spacing: .02em;
  text-transform: uppercase;
}
.stories-main { min-width: 0; }
.stories-list { list-style: none; margin: 0; padding: 0; }

/* uma matéria = uma feature: imagem grande, ficha, título, resumo */
.story-link { display: block; }
.story-media { margin: 0 0 clamp(1.2rem, 3vh, 1.8rem); overflow: hidden; }
.story-media img {
  width: 100%; height: auto; display: block;
  transition: transform 1.2s var(--ease-out);
}
.story-link:hover .story-media img { transform: scale(1.02); }
.story-meta {
  margin: 0 0 .9rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-label); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.story-meta time { color: var(--copper-deep); }
.story-meta::before { content: ""; width: 6px; height: 6px; background: var(--red); flex: none; }
.story-title {
  margin: 0 0 .7rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.9rem); line-height: 1.02;
  letter-spacing: .01em; text-transform: uppercase;
  max-width: 22ch;
}
.story-excerpt { margin: 0 0 1.2rem; color: var(--ink-soft); max-width: 52ch; }
.story-go {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-label); letter-spacing: .14em; text-transform: uppercase;
  color: var(--black);
  border-bottom: 1px solid var(--ink-line); padding-bottom: .25em;
  transition: border-color var(--dur) var(--ease);
}
.story-go svg { width: .85rem; height: .85rem; transition: transform var(--dur) var(--ease-out); }
.story-link:hover .story-go { border-color: var(--red-deep); }
.story-link:hover .story-go svg { transform: translateX(3px); }
.story-link:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 4px; }

.stories-foot {
  margin: clamp(2.2rem, 6vh, 3.5rem) 0 0;
  padding-top: clamp(1.4rem, 3vh, 2rem);
  border-top: 1px solid var(--ink-line);
}
.stories .link-label { color: var(--ink-soft); border-color: var(--ink-line); }
.stories .link-label:hover { color: var(--black); border-color: var(--red-deep); }

/* ---------- Fique por perto ----------
   Volta ao palco. O título ocupa a composição em três degraus e o
   formulário é uma linha editorial por baixo — não um cartão. */
.stay {
  background: var(--black);
  padding: clamp(4.5rem, 12vh, 8rem) var(--gutter) clamp(3.5rem, 9vh, 5.5rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
}
.stay-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.4rem, 9vw, 10rem);
  line-height: .82; letter-spacing: .01em;
  text-transform: uppercase;
}
.stay-title span { display: block; }
.stay-title span:nth-child(2) { padding-left: .42em; }
.stay-title span:nth-child(3) { padding-left: .84em; }

.stay-form-wrap { min-width: 0; padding-bottom: .4rem; max-width: 46rem; }
.stay-lead { margin: 0 0 clamp(1.4rem, 4vh, 2.2rem); color: var(--white-soft); max-width: 34ch; }
.stay-row {
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  gap: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .9rem;
}
.stay-label { grid-column: 1 / -1; color: var(--white-mute); }
.stay-input {
  appearance: none; background: none; border: 0;
  font: inherit; color: var(--white);
  /* altura de toque confortável sem caixa: o fio por baixo é a moldura */
  padding: .55rem 0; min-width: 0;
}
.stay-input::placeholder { color: rgba(244, 241, 235, .32); }
.stay-input:focus { outline: none; }
.stay-row:focus-within { border-color: var(--red); }
.stay-btn { white-space: nowrap; }
.stay-status { margin: .9rem 0 0; color: var(--copper); min-height: 1.4em; font-size: .95rem; }
.stay-status:empty { min-height: 0; margin: 0; }
.stay-status a { color: var(--white); border-bottom: 1px solid var(--line); }
.stay-legal { margin: 1rem 0 0; color: var(--white-mute); font-size: .86rem; max-width: 46ch; }

.stay-invite {
  margin: clamp(2.4rem, 6vh, 3.4rem) 0 0;
  padding-top: clamp(1.2rem, 3vh, 1.8rem);
  border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.2rem;
}
.stay-invite .label { color: var(--white-mute); }

/* ---------- Footer ---------- */
.foot {
  background: var(--black);
  padding: clamp(2.5rem, 6vh, 4rem) var(--gutter) clamp(2.5rem, 6vh, 3.5rem);
  border-top: 1px solid var(--hair);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto auto minmax(0, 1fr);
  gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.foot-mark {
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.15rem; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase;
}
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.foot-list a { color: var(--white-soft); transition: color var(--dur) var(--ease); }
.foot-list a:hover { color: var(--white); }
.foot-list .is-soon { color: var(--white-mute); cursor: default; }
.foot-seal { justify-self: end; text-align: right; display: grid; justify-items: end; }
.foot-nvfase img { height: 1.1rem; width: auto; opacity: .55; transition: opacity var(--dur) var(--ease); }
.foot-nvfase:hover img, .foot-nvfase:focus-visible img { opacity: 1; }
.foot-legal { margin: 1rem 0 0; color: var(--white-mute); }
.foot-dev { margin: .5rem 0 0; color: rgba(244, 241, 235, .42); }
.foot-dev a { color: rgba(244, 241, 235, .6); border-bottom: 1px solid var(--hair); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.foot-dev a:hover { color: var(--red); border-color: var(--red); }

@media (max-width: 1180px) {
  .stories-title { font-size: clamp(3rem, 7vw, 6rem); }
  .foot-grid { grid-template-columns: minmax(0, 1fr) auto auto; }
  .foot-seal {
    grid-column: 1 / -1; justify-self: start; text-align: left; justify-items: start;
    padding-top: 1rem; border-top: 1px solid var(--hair);
  }
}
@media (max-width: 860px) {
  /* Celular: a margem vira cabeçalho (a vertical não cabe), o fecho
     mantém os três degraus e o rodapé empilha. */
  .stories {
    grid-template-columns: 1fr;
    row-gap: clamp(1.4rem, 4vh, 2rem);
    padding-inline: 0;
  }
  .stories-title {
    writing-mode: horizontal-tb; transform: none;
    padding-inline: var(--gutter);
    font-size: clamp(3.4rem, 17vw, 6rem);
  }
  .story-meta, .story-title, .story-excerpt, .story-go, .stories-foot { margin-inline: var(--gutter); }
  .story-title { max-width: none; }
  .stories-foot { margin-top: clamp(1.8rem, 5vh, 2.5rem); }

  .stay { grid-template-columns: 1fr; row-gap: clamp(1.8rem, 5vh, 2.6rem); }
  .stay-title { font-size: clamp(3.4rem, 19vw, 7rem); }
  .stay-form-wrap { padding-bottom: 0; }
  .stay-row { grid-template-columns: 1fr; }
  .stay-btn { justify-content: center; }

  .foot-grid { grid-template-columns: 1fr 1fr; }
  /* alvos de toque: os destinos do rodapé ganham área */
  .foot-list { gap: 0; }
  .foot-list a, .foot-list .is-soon { display: inline-block; padding-block: .6rem; }
  .foot-mark { grid-column: 1 / -1; }
  .foot-seal { grid-column: 1 / -1; margin-top: .5rem; }
  .foot-legal { margin-top: 1.2rem; }
  .foot-dev { margin-top: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .story-media img, .story-go svg { transition: none; }
  .story-link:hover .story-media img, .story-link:hover .story-go svg { transform: none; }
}