/* =====================================================
   STYLE GUIDE
   --plum:    #6E1423  (vermelho ameixa)
   --forest:  #2A5A2E  (verde floresta)
   --burnt:   #C8932A  (amarelo queimado)
   --black:   #0E0E0E
   --bone:    #F4EFE6  (off-white)
   ===================================================== */

:root{
  --plum:   #6E1423;
  --plum-2: #8A1C2F;
  --forest: #2A5A2E;
  --forest-2: #3B7D3F;
  --burnt:  #C8932A;
  --burnt-2:#E2B045;
  --black:  #0E0E0E;
  --bone:   #F4EFE6;

  --ease: cubic-bezier(.7,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --f-display: "Anton", "Bebas Neue", Impact, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;

  --page-max: 1920px;
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
/* clip (e não hidden): o Android Chrome ainda deixa arrastar no eixo x com
   overflow-x:hidden só no body, e clip não vira scroll container — o sticky
   e o pin continuam presos ao viewport */
html{ background: var(--bone); overflow-x: clip; }
body{
  font-family: var(--f-body);
  color: var(--black);
  background: var(--bone);
  /* faz do body um contexto de empilhamento, pra .bg-layers com z-index -1
     ficar atrás de todo o conteúdo dele em vez de escapar pro contexto raiz
     (onde sumiria atrás do próprio fundo do body) */
  isolation: isolate;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  max-width: var(--page-max);
  margin: 0 auto;
  position: relative;
}

/* Fundo em camadas: o script cria uma div por transição de cor da corrente.
   z-index negativo dentro do body (que é isolate), então fica atrás de todo o
   conteúdo. Recortado no --page-max igual ao nav, pra em tela ultra-larga a cor
   não vazar pras bordas, como era quando quem pintava era o body. */
.bg-layers{
  position: fixed;
  top: 0;
  bottom: 0;
  left: max(0px, calc((100vw - var(--page-max)) / 2));
  right: max(0px, calc((100vw - var(--page-max)) / 2));
  z-index: -1;
  pointer-events: none;
}
.bg-layers > div{
  position: absolute;
  inset: 0;
  opacity: 0;
}
.bg-layers > div.is-fading{ will-change: opacity; }

/* Lenis required */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; }
.lenis.lenis-stopped{ overflow: hidden; }
.lenis.lenis-scrolling iframe{ pointer-events:none; }

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }

/* ===================== LOADER ===================== */
.loader{
  position: fixed;
  inset:0;
  background: var(--black);
  z-index: 999;
  display: grid;
  place-items: center;
  color: var(--bone);
  transition: opacity .6s var(--ease), visibility .6s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__bar{
  position:absolute;
  bottom:18%;
  left:10%;
  right:10%;
  height:2px;
  background: rgba(244,239,230,.15);
  overflow:hidden;
}
.loader__bar span{
  display:block; height:100%; width:0%;
  background: var(--burnt);
  transition: width 1.2s var(--ease-out);
}
.loader.is-loading .loader__bar span{ width:100%; }
.loader__text{
  font-family: var(--f-display);
  font-size: clamp(3rem, 10vw, 8rem);
  letter-spacing: .08em;
  color: var(--bone);
}

/* ===================== PROGRESS ===================== */
.progress{
  position: fixed;
  top: 0;
  left: max(0px, calc((100vw - var(--page-max)) / 2));
  height: 3px;
  /* scaleX e não width: --p é reescrito a cada frame de scroll, e animar width
     dispara layout da página inteira toda vez. transform fica no compositor.
     Sem transition: o scroll já atualiza frame a frame, a transition só
     empilhava trabalho e atrasava a barra. */
  width: min(100vw, var(--page-max));
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  will-change: transform;
  background: linear-gradient(90deg, var(--forest), var(--burnt), var(--plum));
  z-index: 200;
}

/* ===================== NAV ===================== */
.nav{
  position: fixed;
  top: 0;
  left: max(0px, calc((100vw - var(--page-max)) / 2));
  right: max(0px, calc((100vw - var(--page-max)) / 2));
  z-index: 220;
  padding: 1.4rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  mix-blend-mode: difference;
  color: var(--bone);
}
.nav__logo{
  font-family: var(--f-display);
  font-size: 1.5rem;
  letter-spacing: .15em;
}
.nav__links{
  list-style:none; padding:0; margin:0;
  display:flex; gap: 2rem;
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.nav__links a{ position: relative; padding-bottom: 2px; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:1px; background: currentColor;
  transition: width .4s var(--ease-out);
}
.nav__links a:hover::after{ width:100%; }

/* Hambúrguer (some no desktop) */
.nav__burger{
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 210;
  position: relative;
  margin-left: auto;
  color: var(--bone);
}
.nav__burger span{
  display: block;
  width: 30px;
  height: 4px;
  border-radius: 2px;
  margin: 5px auto;
  transition: transform .4s var(--ease), opacity .3s var(--ease), background-color .3s var(--ease);
}
.nav__burger span:nth-child(1){ background: var(--forest); }
.nav__burger span:nth-child(2){ background: var(--burnt); }
.nav__burger span:nth-child(3){ background: var(--plum); }
.nav__burger.is-open span:nth-child(1){
  transform: translateY(9px) rotate(45deg);
  background: var(--forest);
}
.nav__burger.is-open span:nth-child(2){ opacity: 0; }
.nav__burger.is-open span:nth-child(3){
  transform: translateY(-9px) rotate(-45deg);
  background: var(--burnt);
}

/* No mobile, desliga mix-blend-mode do nav pra cores reais do burger aparecerem.
   Também economiza: elemento fixo com blend obriga a re-compor aquela faixa a
   cada frame de scroll, porque o que está atrás dele muda o tempo todo. */
@media (max-width: 880px){
  .nav{ mix-blend-mode: normal; }
  /* mesmo motivo: o círculo blenda contra um fundo que agora é animado */
  .circle--yellow{ mix-blend-mode: normal; opacity: .22; }
}

/* Menu overlay full-screen */
.menu-overlay{
  position: fixed;
  inset: 0;
  background: var(--black);
  color: var(--bone);
  z-index: 180;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform .55s var(--ease), opacity .4s var(--ease), visibility .55s;
}
.menu-overlay.is-open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.menu-overlay__links{
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.menu-overlay__links a{
  font-family: var(--f-display);
  font-size: clamp(2rem, 9vw, 4rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bone);
}
.menu-overlay__links a:hover,
.menu-overlay__links a:focus{ color: var(--burnt); }

@media (max-width: 880px){
  .nav__links{ display: none; }
  .nav__burger{ display: block; }
}

/* ===================== HERO ===================== */
.hero{
  position: relative;
  min-height: 100vh;
  background: var(--bone);
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(8rem - 100px) 2.5rem 3rem;
  /* Distância da faixa amarela E da imagem até a base do hero. As duas descem
     juntas por aqui — era o mesmo 3rem repetido nas duas, e mexer numa só
     desalinhava a composição. Em 1rem a base da faixa fica faceada com a base
     do "MARLEY"; subir o valor afasta as duas da base da tela.
     Knob: calibrado por print, então ajuste no olho se a sua janela pedir. */
  --hero-base: 1rem;
  /* Quanto o bloco ROBERT/NESTA/MARLEY sobe. Voltou de 148px pra 2rem porque
     quem cria a folga agora é o teto em vh do .display: com o tipo cabendo na
     tela, os 148px só reintroduziriam o corte do "ROBERT" no topo. O que sobra
     aqui é margem de segurança entre a base do "MARLEY" e a faixa.
     Segundo knob da mesma composição — mexer neste afasta a frase da faixa,
     mexer no de cima afasta a faixa da base da tela. */
  --hero-titulo-sobe: 2rem;
}
/* A altura é a DA tela, não "pelo menos" a da tela. Com min-height o hero
   crescia pra caber o título — três linhas de 16vw passam de 100vh numa janela
   de notebook — e crescer empurrava junto a faixa amarela, que está ancorada em
   bottom: 3rem DO HERO: ela saía pela base da tela, e no topo sobrava a faixa
   vazia. Com a altura fixa o título volta a sangrar pelo topo (o overflow:hidden
   acima já corta) e a faixa amarela fecha a tela.
   Só no desktop: no mobile o hero é outro layout e mede em svh por causa da
   barra de URL, onde travar a altura reintroduziria o corte. */
@media (min-width: 881px){
  .hero{ height: 100vh; }
}

.hero__bg-stripes{
  position:absolute; inset:0;
  display:flex;
  z-index:0;
}
.hero__bg-stripes span{
  flex:1;
  border-right:1px solid rgba(14,14,14,.06);
}
.hero__bg-stripes span:last-child{ border-right:none; }

.hero__title{
  position: relative;
  z-index: 2;
  align-self: end;
  /* margin e não transform: o align-self: end alinha a caixa de MARGEM ao fim
     da área do grid, então isto sobe o bloco de verdade. Transform aqui
     brigaria com o que o GSAP escreve nas palavras na entrada do hero.
     O mobile zera com `margin: 0`, então não vaza pra lá. */
  margin-bottom: var(--hero-titulo-sobe);
}
.display{
  font-family: var(--f-display);
  /* Amarrado à largura E à altura. Só com 16vw, três linhas de título somavam
     mais altura do que a tela tinha, e o bloco inteiro não cabia: era por isso
     que afastar o "MARLEY" da faixa empurrava o "ROBERT" para fora pelo topo —
     é o mesmo bloco, e o que sobrava de um lado faltava do outro.
     Com o teto em vh o tipo encolhe em janela baixa e as três linhas cabem
     inteiras. O 26vh é o knob: subir aumenta o tipo e reduz a folga até a faixa.
     Mobile não é afetado — os media queries abaixo redeclaram font-size. */
  font-size: clamp(4rem, min(16vw, 26vh), 16rem);
  line-height: .88;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--black);
}
.display .line{
  display:block;
  overflow: hidden;
}
.display .word{
  display:inline-block;
  transform: translateY(110%);
}
.display .line:nth-child(2) .word{ color: var(--plum); padding-left: 1.5rem; }
.display .line:nth-child(3) .word{ font-style: italic; }

.hero__sub{
  margin-top: 1.5rem;
  font-size: .9rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0;
  transform: translateY(20px);
}

.hero__img-wrap{
  position: absolute;
  top: auto;
  bottom: var(--hero-base);
  right: 0;
  width: clamp(320px, 46vw, 760px);
  height: clamp(320px, 46vw, 760px);
  z-index: 3;
  pointer-events: none;
  clip-path: inset(100% 0 0 0);
}
.hero__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  filter: grayscale(.1) contrast(1.08);
}

/* Card flutuante secundário no hero */
.hero__card{
  position: absolute;
  left: 4%;
  top: 18%;
  width: clamp(140px, 14vw, 220px);
  margin: 0;
  z-index: 3;
  transform: rotate(-6deg);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.35);
  background: var(--bone);
  padding: 10px 10px 36px;
  opacity: 0;
}
.hero__card img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  filter: grayscale(.2) contrast(1.05);
}
.hero__card figcaption{
  position: absolute;
  left:10px; right:10px; bottom:10px;
  font-family: var(--f-display);
  font-size: .85rem;
  letter-spacing: .25em;
  color: var(--plum);
}
@media (max-width: 880px){
  .hero__card{ display:none; }
}

.hero__marquee{
  position: absolute;
  bottom: var(--hero-base);
  left:0; right:0;
  overflow:hidden;
  border-top: 1px solid rgba(14,14,14,.15);
  border-bottom: 1px solid rgba(14,14,14,.15);
  background: var(--burnt);
  z-index: 2;
}
.marquee__track{
  display: inline-flex;
  white-space: nowrap;
  padding: .8rem 0;
  font-family: var(--f-display);
  font-size: 1.6rem;
  letter-spacing: .12em;
  color: var(--black);
  animation: marquee 30s linear infinite;
}
.marquee__track span{ padding: 0 1.2rem; }

@keyframes marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

.hero__scrollhint{
  position: absolute;
  right: 2.5rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  z-index: 3;
}
.hero__scrollline{
  width: 60px; height: 1px;
  background: currentColor;
  position: relative;
  overflow:hidden;
}
.hero__scrollline::after{
  content:"";
  position:absolute; inset:0;
  background: var(--plum);
  animation: scrollline 2.2s var(--ease) infinite;
}
@keyframes scrollline{
  0%{ transform: translateX(-100%); }
  50%{ transform: translateX(0); }
  100%{ transform: translateX(100%); }
}

/* ===================== MARCADOR DE SCROLL ===================== */
/* Mesma anatomia do .hero__scrollhint — rótulo + trilho com um segmento
   varrendo — só que de pé, porque aqui o que ele indica é a direção do scroll.
   O difference é o mesmo truque do .nav: elemento fixo que passa por cima de
   seções de todas as cores (bone, preto, ameixa, amarelo, e ainda por cima de
   fotos), e invertendo o fundo ele nunca some em nenhuma. */
.scrollmark{
  position: fixed;
  right: 2.5rem;
  bottom: 1.75rem;
  /* abaixo do menu-overlay (180), acima de qualquer seção (3) */
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bone);
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease-out), visibility .5s;
}
.scrollmark.is-on{ opacity: 1; visibility: visible; }
.scrollmark__line{
  position: relative;
  width: 1px;
  height: 46px;
  overflow: hidden;
}
/* trilho apagado + segmento aceso, os dois em currentColor: no hero o segmento
   é --plum sobre o bone da seção, mas aqui o fundo é outro a cada seção e ameixa
   sobre a própria seção ameixa não apareceria. */
.scrollmark__line::before,
.scrollmark__line::after{
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
}
.scrollmark__line::before{ opacity: .3; }
.scrollmark__line::after{ animation: scrollmark 2.2s var(--ease) infinite; }
@keyframes scrollmark{
  0%  { transform: translateY(-100%); }
  50% { transform: translateY(0); }
  100%{ transform: translateY(100%); }
}
/* Pra cima: o segmento varre ao contrário e o rótulo troca de ponta. São as
   duas metades da mesma leitura — sem trocar o rótulo, inverter a varredura
   sozinha passa despercebido. */
.scrollmark.is-up{ flex-direction: column-reverse; }
.scrollmark.is-up .scrollmark__line::after{ animation-direction: reverse; }

@media (prefers-reduced-motion: reduce){
  .scrollmark__line::after{ animation: none; }
}

/* ===================== INTRO QUOTE ===================== */
.intro{
  background: var(--bone);
  padding: 14rem 2.5rem;
  text-align: center;
}
/* Duas linhas, sempre: a quebra é o <br/> no HTML, e o resto daqui existe só
   pra garantir que nenhuma das duas metades quebre de novo sozinha.
   Medido no anton-regular.ttf, não estimado: cada metade tem 10.85em de
   avanço, e o glifo "0" (a unidade do ch) tem 0.494em — ou seja, 21.96ch.
   O 23ch abaixo é isso com folga. Acima de 600px o clamp já cabe em qualquer
   viewport (6vw × 10.85 nunca alcança a largura menos o padding); quem não
   cabia era o mobile, tratado no @media de 600px. */
.intro__quote{
  font-family: var(--f-display);
  font-size: clamp(2rem, 6vw, 5.5rem);
  line-height: 1.05;
  max-width: 23ch;
  margin: 0 auto;
  color: var(--black);
}
.intro__quote .char{
  display:inline-block;
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}
.intro__quote .char.is-active{ opacity: 1; }
.intro__author{
  margin-top: 2rem;
  font-size: .8rem;
  letter-spacing: .3em;
  color: var(--plum);
  text-transform: uppercase;
}

/* ===================== LAYERS ===================== */
.layer{
  position: relative;
  min-height: 100vh;
  padding: 10rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  overflow: hidden;
}
.layer--green{ background: var(--forest); color: var(--bone); }
.layer--red  { background: var(--plum);   color: var(--bone); }
/* entram por cima da seção anterior pinada (ver overlayReveal em script.js) */
#rastafari, #wailers{ z-index: 3; }
/* só will-change: a seção PRECISA ficar no fluxo. position:fixed tirava ela
   dali, a página encolhia a altura dela inteira e tudo abaixo subia antes da
   hora — e o overlayReveal mede getBoundingClientRect().top pra segurar ela
   no topo, medida que fixed zera. */
#rastafari.is-revealing, #wailers.is-revealing{ will-change: transform; }
@media (min-width: 881px){
  #rastafari.is-revealing, #wailers.is-revealing{ will-change: transform, clip-path; }
}
.layer--yellow{ background: var(--burnt); color: var(--black); }
.layer--black{ background: var(--black);  color: var(--bone); }
.layer--rio{
  background: linear-gradient(135deg, var(--burnt) 0%, var(--forest) 100%);
  color: var(--bone);
}

/* ===================== LAYER RIO (layout próprio) ===================== */
.layer-rio{
  position: relative;
  background: var(--forest);
  color: var(--bone);
  padding: 10rem 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 5rem;
  align-items: center;
  overflow: hidden;
  min-height: 100vh;
}
.layer-rio__bg-year{
  position: absolute;
  top: -2rem;
  left: -1rem;
  font-family: var(--f-display);
  font-size: clamp(6rem, 16vw, 16rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--plum);
  opacity: .35;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}
.layer-rio__text{
  position: relative;
  z-index: 2;
}
.layer-rio__title{
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: .95;
  margin: 0 0 2rem;
  color: var(--bone);
}
.layer-rio__body{
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 52ch;
}
.layer-rio__body p + p{ margin-top: 1rem; }
.layer-rio__body strong{ color: var(--burnt-2); font-weight: 500; }
.layer-rio__body em{ font-style: italic; color: var(--burnt-2); }

.layer-rio__gallery{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
}
.rio-photo{
  margin: 0;
  width: min(360px, 100%);
  background: var(--bone);
  padding: 14px 14px 50px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
}
.rio-photo img{
  width: 100%;
  height: 280px;
  object-fit: cover;
  filter: grayscale(.1) contrast(1.05);
}
.rio-photo figcaption{
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  font-family: var(--f-display);
  font-size: .85rem;
  letter-spacing: .15em;
  color: var(--plum);
}
.rio-photo{ position: relative; }
.rio-photo--a{ transform: rotate(-3deg); align-self: flex-start; }
.rio-photo--b{ transform: rotate(3deg);  align-self: flex-end; }

@media (max-width: 880px){
  .layer-rio{ grid-template-columns: 1fr; padding: 6rem 1.5rem; }
}

.layer__year{
  font-family: var(--f-display);
  font-size: clamp(8rem, 22vw, 22rem);
  line-height: .85;
  letter-spacing: -.02em;
  /* o JS lê esta variável pra saber até onde animar a opacidade */
  --ano-opacidade: .9;
  opacity: var(--ano-opacidade);
}
.layer--green  .layer__year{ color: var(--burnt); }

/* Nine Mile: no fluxo do grid o ano cai no meio da coluna esquerda, que é
   exatamente onde a foto --tl (absolute, z-index 2) fica — por isso sumia.
   Vira marca d'água sangrando pelo alto, no mesmo espírito do "RIO 1980".
   Só no desktop: no mobile a seção empilha em 1 coluna e ele já aparece. */
@media (min-width: 881px){
  /* O ano vira marca d'água na metade esquerda, sempre no canto OPOSTO ao da
     foto. No fluxo do grid ele ficava centralizado na coluna 1, que é
     exatamente onde a foto (absolute, z-index 2) cai — por isso sumia nas três
     seções. Canto oposto é o que garante que nunca mais seja coberto. */
  .layer--green .layer__year,
  .layer--yellow .layer__year,
  .layer--black .layer__year{
    position: absolute;
    left: 2.5rem; /* mesma sangria lateral do padding da seção */
    z-index: 0;
    /* marca d'água mesmo: acima disso o número compete com o título */
    --ano-opacidade: .18;
    /* O 17vh é o que resolve: a foto tem altura FIXA (~480px), então a faixa
       livre ao lado dela encolhe conforme a tela fica mais baixa — 348px numa
       tela de 900, só 158px numa de 694. Dimensionar o número em vw ignorava
       isso e ele voltava a cair atrás da foto em notebook. Amarrado à altura,
       ele encolhe junto com a faixa. */
    font-size: clamp(3.5rem, min(10vw, 17vh), 12rem);
    pointer-events: none;
    white-space: nowrap;
  }
  /* foto no alto (--tl) → número na faixa livre de baixo */
  .layer--green .layer__year{ bottom: 1.5rem; }
  /* foto na base (--bl) → número na faixa livre de cima */
  .layer--yellow .layer__year,
  .layer--black .layer__year{ top: 1.25rem; }

  /* o círculo vermelho caía justo na faixa do número. Vai pro vão entre as
     colunas, que fecha a composição: foto no alto-esq, número embaixo-esq,
     círculo amarelo no alto-dir e o vermelho no meio. */
  .layer--green .circle--red{ bottom: 26%; left: 44%; }

  .layer--green .layer__content,
  .layer--yellow .layer__content,
  .layer--black .layer__content{
    /* o ano saiu do fluxo do grid, e era ele quem ocupava a coluna 1. Sem fixar
       aqui, o texto escorrega pra coluna 1 e cai embaixo da foto. */
    grid-column: 2;
    /* estático pintaria abaixo de qualquer posicionado (marca d'água, círculos):
       precisa ser posicionado pra ficar por cima */
    position: relative;
    z-index: 1;
  }
}
.layer--red    .layer__year{ color: var(--burnt); }
.layer--yellow .layer__year{ color: var(--plum); }
.layer--black  .layer__year{ color: var(--burnt); }
.layer--rio    .layer__year{ color: var(--plum);  font-size: clamp(5rem, 14vw, 14rem); }

.layer__title{
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: .95;
  margin: 0 0 2rem;
}
.layer__body{
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 46ch;
}
.layer__body p + p{ margin-top: 1rem; }

.layer__deco{
  position: absolute;
  inset: 0;
  pointer-events:none;
  z-index: 0;
}
.circle{
  position: absolute;
  border-radius: 50%;
}
.circle--yellow{
  width: 260px; height: 260px;
  background: var(--burnt);
  /* 72px > os 52px que o parallax sobe (40% de 260, metade pra cada lado):
     assim o círculo nunca encosta na borda da seção e some pelo overflow */
  top: 72px; right: 10%;
  mix-blend-mode: screen;
  opacity: .35;
}
.circle--red{
  width: 180px; height: 180px;
  background: var(--plum);
  bottom: 10%; left: 5%;
  opacity: .55;
}

.layer__content,
.layer__year{
  position: relative;
  z-index: 1;
}

/* Foto dentro das layers — flutuando em posições diagonais */
.layer__photo{
  position: absolute;
  margin: 0;
  z-index: 2;
  width: clamp(220px, 26vw, 380px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.55);
  background: var(--bone);
  padding: 12px 12px 48px;
}
.layer__photo img{
  width: 100%;
  height: clamp(260px, 32vw, 420px);
  object-fit: cover;
  filter: grayscale(.15) contrast(1.05);
}
.layer__photo figcaption{
  position: absolute;
  left:14px; right:14px; bottom:14px;
  font-family: var(--f-display);
  font-size: .85rem;
  letter-spacing: .18em;
  color: var(--plum);
}
.layer__photo--tl{ top: 8%;     left:  6%;  transform: rotate(-5deg); }
.layer__photo--tr{ top: 10%;    right: 6%;  transform: rotate(4deg);  }
.layer__photo--br{ bottom: 8%;  right: 6%;  transform: rotate(-3deg); }
.layer__photo--bl{ bottom: 8%;  left:  6%;  transform: rotate(5deg);  }

/* Foto sem moldura — apenas a imagem recortada (PNG transparente) */
.layer__photo--bare{
  position: static !important;
  background: transparent;
  padding: 0;
  box-shadow: none;
  transform: none !important;
  width: 100%;
  max-width: clamp(220px, 30vw, 440px);
  margin: 0;
  top: auto; left: auto; right: auto; bottom: auto;
}
.layer__photo--bare img{
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: none;
}

/* Seção Rastafari: vídeo à esquerda, texto à direita, centrados verticalmente */
.layer--red{ grid-template-columns: 1fr 1fr; }
.layer--red .layer__year{ display: none; }
.layer--red .layer__video{
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: center;
}
.layer--red .layer__content{
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.layer__video{
  margin: 0;
  width: 100%;
  /* teto duplo: a largura da coluna e a altura útil da seção (100svh menos os
     10rem de padding em cima e embaixo). O menor dos dois manda, então o player
     nunca estoura a seção nem em tela baixa e larga. */
  max-width: min(46vw, 620px, (100svh - 22rem) * 16 / 9);
  position: relative;
  z-index: 2;
}
.layer__video video{
  display: block;
  width: 100%;
  height: auto;
  /* declarado: reserva o espaço certo antes de o metadata chegar, senão a
     seção muda de altura no meio do reveal e a conta do retângulo sai errada */
  aspect-ratio: 16 / 9;
  background: #000;
  /* sem box-shadow: a figure é .clip-reveal e o clip-path recorta na caixa,
     então a sombra ficaria cortada mesmo depois da animação terminar */
}

/* Caminho explícito pro som: o browser só libera áudio depois de um gesto do
   usuário, e rolar a roda do mouse não conta como gesto. */
.video__sound{
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: .55rem .9rem;
  border: 1px solid rgba(244, 239, 230, .35);
  border-radius: 999px;
  background: rgba(14, 14, 14, .6);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.video__sound:hover{ background: rgba(14, 14, 14, .85); }
.video__sound.is-on{
  border-color: var(--burnt);
  color: var(--burnt);
}

/* No mobile, volta a empilhar (1 coluna) */
@media (max-width: 880px){
  .layer--red{ grid-template-columns: 1fr; }
  .layer--red .layer__video,
  .layer--red .layer__content{
    grid-column: 1;
    grid-row: auto;
  }
  .layer__photo--bare{ max-width: min(60vw, 320px); }
  .layer__video{ max-width: 100%; }
}

/* clip reveal — anima via GSAP no JS */
.clip-reveal{
  clip-path: inset(0 0 100% 0);
}

@media (max-width: 880px){
  .layer{ grid-template-columns: 1fr; padding: 6rem 1.5rem; }
  .layer__photo{ position: relative; top:auto; left:auto; right:auto; bottom:auto; transform:none; margin: 2rem auto; }
}

/* ===================== PINNED HORIZONTAL ===================== */
.pin-story{
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--plum);
}
.pin-story__track{
  display: flex;
  height: 100%;
  width: max-content;
  /* o trilho tem 4 telas de largura: sem a promoção a camada própria, cada
     frame do scrub repinta a faixa inteira em vez de só deslocá-la */
  will-change: transform;
}
.panel{
  width: min(100vw, var(--page-max));
  height: 100vh;
  padding: 8rem 8vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}
.panel__copy{ position: relative; z-index: 2; }
.panel__num{
  font-family: var(--f-display);
  font-size: 8rem;
  position: absolute;
  top: 5rem;
  right: 8vw;
  opacity: .15;
  z-index: 1;
}
.panel h3{
  font-family: var(--f-display);
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: .9;
  margin: 0 0 2rem;
  letter-spacing: -.01em;
}
.panel p{
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 50ch;
}
.panel__img{
  margin: 0;
  position: relative;
  z-index: 2;
  justify-self: center;
  width: clamp(280px, 32vw, 480px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
  transform: rotate(-3deg);
  background: var(--bone);
  padding: 14px 14px 14px;
}
.panel__img--right{ transform: rotate(3deg); }
.panel__img img{
  width: 100%;
  display: block;
  filter: grayscale(.1) contrast(1.05);
}
.panel--1{ background: var(--bone);   color: var(--black);  }
.panel--2{ background: var(--forest); color: var(--bone);   }
.panel--2 .panel__num{ color: var(--burnt); opacity: .35; }
.panel--3{ background: var(--burnt);  color: var(--black); }
.panel--3 .panel__num{ color: var(--plum); opacity: .35; }
.panel--4{ background: var(--plum);   color: var(--bone);  }
.panel--4 .panel__num{ color: var(--burnt); opacity: .35; }

/* ===================== BOTÃO EXTERNO ===================== */
/* Mesma pílula do .video__sound — o padrão que a aplicação já usa pra controle
   flutuante — mas com a cor vinda de currentColor, porque este vive dentro de
   um painel colorido e precisa funcionar sobre qualquer um deles. */
.btn-ext{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  margin-top: 2.2rem;
  padding: .95rem 1.7rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  /* isolation + z-index negativo no ::before: a tinta fica atrás do texto sem
     escapar do contexto de empilhamento do painel */
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: color .45s var(--ease-out);
}
/* a tinta entra pela esquerda. scaleX e não width: resolvido no compositor */
.btn-ext::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--burnt);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--ease-out);
}
.btn-ext__rolo{
  display: block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
}
.btn-ext__rolo span{
  display: block;
  transition: transform .5s var(--ease-out);
}
.btn-ext__seta{
  display: inline-block;
  transition: transform .45s var(--ease-out);
}

.btn-ext:hover,
.btn-ext:focus-visible{ color: var(--black); }
.btn-ext:hover::before,
.btn-ext:focus-visible::before{ transform: scaleX(1); }
/* sobe uma linha: a segunda cópia ocupa o lugar da primeira */
.btn-ext:hover .btn-ext__rolo span,
.btn-ext:focus-visible .btn-ext__rolo span{ transform: translateY(-100%); }
.btn-ext:hover .btn-ext__seta,
.btn-ext:focus-visible .btn-ext__seta{ transform: translateX(.4rem); }
/* teclado precisa ver onde está; o outline vai por fora do overflow:hidden */
.btn-ext:focus-visible{ outline: 2px solid var(--burnt); outline-offset: 4px; }
/* sem hover no toque: o mesmo estado responde ao dedo */
.btn-ext:active{ color: var(--black); }
.btn-ext:active::before{ transform: scaleX(1); }

@media (prefers-reduced-motion: reduce){
  .btn-ext,
  .btn-ext::before,
  .btn-ext__rolo span,
  .btn-ext__seta{ transition: none; }
}

/* ===================== DECK (cards empilhados sticky) ===================== */
.deck{
  background: var(--bone);
  padding: 8rem 2.5rem 0;
  position: relative;
}
.deck__head{
  max-width: 1100px;
  margin: 0 auto 4rem;
}
.deck__kicker{
  font-size: .75rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--plum);
  margin: 0 0 1rem;
}
.deck__title{
  font-family: var(--f-display);
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: .92;
  margin: 0;
  color: var(--black);
}
.deck__sub{
  margin-top: 1.5rem;
  font-size: .85rem;
  letter-spacing: .25em;
  color: var(--forest);
  text-transform: uppercase;
}
.deck__cards{
  max-width: 1100px;
  margin: 0 auto;
  /* segura o último card no sticky; 60vh eram ~meia tela de scroll com a
     imagem congelada, já que o último card não encolhe (não há próximo) */
  padding-bottom: 25vh;
}
.deck-card{
  position: sticky;
  top: 12vh;
  margin: 0 auto 4rem;
  width: min(720px, 90vw);
  height: 70vh;
  background: var(--bone);
  padding: 18px 18px 80px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.45);
  display: grid;
  grid-template-rows: 1fr auto;
  will-change: transform;
  transform-origin: center top;
}
.deck-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.1) contrast(1.05);
}
.deck-card figcaption{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 1.5rem;
  padding-top: 1.2rem;
  font-size: .85rem;
  color: var(--black);
}
.deck-card figcaption span{
  font-family: var(--f-display);
  font-size: 1.2rem;
  letter-spacing: .15em;
  color: var(--plum);
}
.deck-card figcaption strong{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  letter-spacing: .02em;
  text-align: center;
  color: var(--black);
}
.deck-card[data-idx="0"]{ transform: rotate(-1.5deg); }
.deck-card[data-idx="1"]{ transform: rotate( 1.2deg); }
.deck-card[data-idx="2"]{ transform: rotate(-1deg);   }
.deck-card[data-idx="3"]{ transform: rotate( 1.5deg); }

/* cor de fundo de cada card */
.deck-card[data-idx="0"]{ background: var(--burnt); }
.deck-card[data-idx="1"]{ background: var(--forest); }
.deck-card[data-idx="1"] figcaption,
.deck-card[data-idx="1"] figcaption strong{ color: var(--bone); }
.deck-card[data-idx="1"] figcaption span{ color: var(--burnt); }
.deck-card[data-idx="2"]{ background: var(--plum); }
.deck-card[data-idx="2"] figcaption,
.deck-card[data-idx="2"] figcaption strong{ color: var(--bone); }
.deck-card[data-idx="2"] figcaption span{ color: var(--burnt); }
.deck-card[data-idx="3"]{ background: var(--black); }
.deck-card[data-idx="3"] figcaption,
.deck-card[data-idx="3"] figcaption strong{ color: var(--bone); }
.deck-card[data-idx="3"] figcaption span{ color: var(--burnt); }

@media (max-width: 720px){
  .deck-card{ height: 60vh; }
}

/* ===================== REVEAL STAGE ===================== */
.reveal-stage{
  height: 200vh;
  position: relative;
  background: var(--black);
  color: var(--bone);
}
.reveal-stage__inner{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 2rem;
  padding: 0 0 0 2rem;
}
/* no mobile o ScrollTrigger pina por transform, o que quebra tanto o sticky
   quanto qualquer fixed filho. Absolute na base do palco = mesma posição em
   que o sticky termina, e vale nos dois tipos de pin. */
.reveal-stage.is-pinned .reveal-stage__inner{
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
}
.reveal-stage__img{
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: 100%;
  flex-shrink: 0;
}
.reveal-stage__img img{
  height: 90%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left bottom;
  filter: grayscale(1) contrast(1.2) brightness(.95);
  display: block;
}
.reveal-stage__title{
  position: relative;
  z-index: 2;
  font-family: var(--f-display);
  font-size: clamp(3rem, 9vw, 10rem);
  line-height: .9;
  margin: 0 0 1rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  letter-spacing: -.01em;
  /* cresce pra esquerda e pra cima com a quina de baixo à direita cravada:
     é o que mantém o bloco na posição atual enquanto a escala sobe */
  transform-origin: right bottom;
}
.reveal-stage__title span{ display:block; }
.reveal-stage__title span:nth-child(1){ color: var(--forest-2); }
.reveal-stage__title span:nth-child(2){ color: var(--burnt); }
.reveal-stage__title span:nth-child(3){ color: var(--plum-2); }

/* ===================== STATS ===================== */
.stats{
  background: var(--bone);
  padding: 8rem 2.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  border-top: 1px solid rgba(14,14,14,.1);
  border-bottom: 1px solid rgba(14,14,14,.1);
}
.stat{ text-align:center; }
.stat__num{
  font-family: var(--f-display);
  font-size: clamp(4rem, 9vw, 8rem);
  line-height: 1;
  color: var(--plum);
}
.stat__label{
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-top: 1rem;
  color: var(--forest);
}
.stat:nth-child(2) .stat__num{ color: var(--forest); }
.stat:nth-child(3) .stat__num{ color: var(--burnt); }
.stat:nth-child(4) .stat__num{ color: var(--black); }

@media (max-width: 720px){
  .stats{ grid-template-columns: repeat(2, 1fr); }
}

/* ===================== FINAL ===================== */
.final{
  background: var(--bone);
  padding: 14rem 2.5rem;
  text-align: center;
}
/* Seção agora é preta (ver --bg abaixo): tudo que era escuro vira a variante
   clara da mesma cor, as mesmas que o .reveal-stage já usa sobre preto. */
.final__quote{
  font-family: var(--f-display);
  font-size: clamp(2rem, 7vw, 6rem);
  line-height: 1.05;
  margin: 0;
  color: var(--bone);
}
.final__quote span:first-child,
.final__quote span:last-child{
  /* plum-2 sobre preto dá 2.1:1 — as aspas praticamente sumiam. Burnt é o
     mesmo acento que o ano da seção preta logo acima já usa. */
  color: var(--burnt);
}
.final__quote-em{
  display:block;
  color: var(--forest-2);
  font-style: italic;
  margin-top: 1rem;
}
.final__cred{
  margin-top: 3rem;
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  /* burnt e não plum-2: texto pequeno precisa de mais contraste que o display */
  color: var(--burnt);
}

/* ===================== FOOTER ===================== */
.footer{
  background: var(--black);
  color: var(--bone);
  padding: 3rem 2.5rem;
  text-align: center;
  font-size: .8rem;
  letter-spacing: .15em;
}

/* ===================== COR DE FUNDO CONTÍNUA =====================
   Quem pinta o fundo é o body: estas seções ficam transparentes e só declaram
   em --bg a cor que "pedem". O script varre body > section na ordem do DOM e
   faz o body derreter da cor da seção anterior pra esta conforme ela se
   aproxima — a tela inteira muda, não só a emenda.
   Precisa vir depois das regras acima, porque o atalho `background:` delas
   sobrescreveria isto.

   Mantêm fundo próprio: #rastafari e #wailers, que precisam ser opacos pra cobrir
   a seção pinada durante o reveal; o .deck e o .stats, que vêm logo depois desses
   dois e entram com corte seco, sem transição; o .pin-story, cujos painéis já são
   cartões opacos de 100vh; e a cauda preta (#legado, .final e footer).
   As opacas (menos o footer) ainda participam da corrente: o script só adia a
   virada delas pro momento em que já cobrem a tela. Sem isso o body ficaria com
   uma cor velha e a seção transparente de cima apareceria errada na subida. */
.hero         { --bg: var(--bone);   background: transparent; }
.intro        { --bg: var(--bone);   background: transparent; }
.layer--green { --bg: var(--forest); background: transparent; }
.layer-rio    { --bg: var(--forest); background: transparent; }
.reveal-stage { --bg: var(--black);  background: transparent; }
/* Cauda preta e sem transição nenhuma: #legado, .final e o footer pintam o
   próprio preto. Como não há seção transparente depois deles, o body não
   precisa mais acompanhar daqui pra frente. */
.final        { background: var(--black); }

/* ===================== UTIL: reveals ===================== */
.reveal-up{
  opacity: 0;
  transform: translateY(40px);
  /* transition na base e não no .is-in: declarada só no estado final, ela
     desaparecia junto com a classe e a volta era um corte seco */
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  /* sem will-change: são 14 elementos, e a animação acontece uma vez só.
     Fixo, cada um segurava uma camada de GPU pela vida inteira da página —
     o browser já promove sozinho durante a transition, que é quando importa. */
}
.reveal-up.is-in{
  opacity: 1;
  transform: none;
}

/* =====================================================
   MOBILE / TABLET — ajuste fino de posicionamento
   ===================================================== */

/* Tablet (até 880px) — já existem alguns ajustes acima;
   aqui complementamos */
@media (max-width: 880px){
  .nav{ padding: 1rem 1.25rem; }

  /* HERO MOBILE — título encostado na esquerda (sob o menu),
     imagem na lateral direita, à altura de "MARLEY".
     3 camadas: texto (fundo), faixa (meio), imagem (frente) */
  .hero{
    display: block;
    position: relative;
    padding: 0;
    --hero-img-top: calc(6rem + 6vw);
    --hero-img-size: min(58vw, 320px);
    min-height: 100vh;
    min-height: 100svh;
  }
  .hero__bg-stripes{ z-index: 0; }

  /* padding lateral: sem ele o itálico de "MARLEY" corta na borda */
  .hero__title{
    position: relative;
    z-index: 1;
    padding: 6rem 1rem 0 1.25rem;
    margin: 0;
  }
  .display{ font-size: clamp(3rem, 15vw, 6rem); }
  .display .line:nth-child(2) .word{ padding-left: .5rem; }

  /* Faixa amarela: alinhada à base da imagem */
  .hero__marquee{
    position: absolute;
    top: calc(var(--hero-img-top) + var(--hero-img-size));
    left: 0;
    right: 0;
    bottom: auto;
    transform: translateY(-100%);
    z-index: 2;
  }
  .marquee__track{ font-size: 1.1rem; padding: .55rem 0; }

  /* Imagem do Bob: encostada na direita, na linha do "MARLEY" */
  .hero__img-wrap{
    position: absolute;
    top: var(--hero-img-top);
    right: 0;
    left: auto;
    bottom: auto;
    transform: none;
    width: var(--hero-img-size);
    height: var(--hero-img-size);
    z-index: 3;
  }
  .hero__img{ object-position: right bottom; }

  /* no mobile a linha cruzava o "MARLEY" e a faixa — só no desktop */
  .hero__sub{ display: none; }

  .hero__scrollhint{ display: none; }

  /* Overlay dentro do branco do hero: absolute em relação ao body (que é
     position:relative). Assim a citação não ocupa altura nenhuma no fluxo —
     o hero fica com os 100svh inteiros e a seção verde só começa depois deles.
     Fundo transparente pra não cortar as listras do hero. */
  .intro{
    position: absolute;
    top: 60svh;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 1.25rem;
    background: transparent;
    z-index: 1;
  }

  .layer__year{ font-size: clamp(5rem, 22vw, 9rem); }

  /* Pin-story mantém scroll horizontal; só ajusta padding e tipografia interna */
  .panel{
    padding: 5rem 1.5rem;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-content: center;
  }
  .panel__num{
    top: 3rem;
    right: 1.5rem;
    font-size: 5rem;
  }
  .panel h3{ margin-bottom: 1rem; }
  .panel__img{
    width: min(70%, 320px);
    justify-self: center;
  }

  .layer-rio__bg-year{
    font-size: clamp(4rem, 18vw, 7rem);
    top: 1rem;
  }
  .layer-rio__gallery{ gap: 1.5rem; }
  .rio-photo{ width: min(280px, 80%); }
  .rio-photo img{ height: 220px; }

  .deck{ padding: 5rem 1.25rem 0; }
  .deck__head{ margin-bottom: 2.5rem; }
  .deck-card{
    height: 65svh;
    padding: 12px 12px 64px;
  }
  .deck-card figcaption{
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding-top: .8rem;
  }
  .deck-card figcaption strong{ text-align: left; }

  /* Uma tela e nada mais. A sequência (frase → imagem → One Love) toca inteira
     no momento em que o palco cobre a tela; altura sobrando aqui só vira preto
     rolando antes de a frase começar — e era ela que separava os três passos em
     três rolagens. */
  .reveal-stage{ height: 100vh; }
  .reveal-stage__inner{ padding: 0 2rem; gap: 1.5rem; }
  .reveal-stage__img img{ height: 70%; }

  .stats{ padding: 5rem 1.25rem; gap: 2rem 1rem; }
  .stat__label{ font-size: .7rem; }

  .final{ padding: 7rem 1.25rem; }
  .final__quote{ font-size: clamp(1.75rem, 8vw, 3.5rem); }

  .footer{ padding: 2rem 1.25rem; }
}

/* Phone (até 600px) — refino extra */
@media (max-width: 600px){
  .hero{
    padding: 0;
    --hero-img-size: 62vw;
  }
  .hero__title{ padding: 5.5rem .75rem 0 1rem; }
  .display{ font-size: clamp(2.8rem, 16vw, 6rem); }
  .display .line:nth-child(2) .word{ padding-left: .4rem; }

  .intro{ padding: 0 1rem; }
  /* A largura disponível é 100vw menos o padding de 1rem de cada lado, e a
     linha ocupa 10.85em — então o corpo que cabe é essa largura dividida por
     10.85. O 11 é isso com 1.4% de sobra. Sai o mínimo de 1.75rem do clamp de
     propósito: era ele que estourava a linha num aparelho de 320px, e "duas
     linhas" ganha da fonte não encolher. */
  .intro__quote{ font-size: min(calc((100vw - 2rem) / 11), 3rem); }
  .intro__author{ font-size: .7rem; letter-spacing: .25em; }

  .layer{ padding: 5rem 1rem; gap: 2rem; }
  .layer__year{ font-size: clamp(4.5rem, 26vw, 7rem); }
  .layer__title{ font-size: clamp(2rem, 10vw, 3.5rem); margin-bottom: 1.25rem; }
  .layer__body{ font-size: .98rem; line-height: 1.6; }
  .layer__photo{
    width: min(78%, 320px);
    padding: 10px 10px 40px;
  }
  .layer__photo img{ height: 240px; }
  .layer__photo figcaption{ font-size: .75rem; }

  .circle--yellow{ width: 180px; height: 180px; }
  .circle--red{ width: 130px; height: 130px; }

  .layer-rio{ padding: 5rem 1rem; gap: 2.5rem; }
  .layer-rio__title{ font-size: clamp(2rem, 10vw, 3.5rem); margin-bottom: 1.25rem; }
  .layer-rio__body{ font-size: .98rem; line-height: 1.6; }

  .panel{ padding: 4rem 1rem; }
  .panel__num{ font-size: 3.5rem; }
  .panel h3{ font-size: clamp(2.25rem, 11vw, 3.5rem); }
  .panel p{ font-size: 1rem; }
  .panel__img{ width: 86%; }

  .deck{ padding: 4rem 1rem 0; }
  .deck__title{ font-size: clamp(2.25rem, 11vw, 4rem); }
  .deck__sub{ font-size: .7rem; letter-spacing: .2em; }
  .deck-card{
    width: 92vw;
    height: 60svh;
    top: 8vh;
    margin-bottom: 2.5rem;
  }
  .deck-card img{ object-fit: contain; }
  .deck-card figcaption span{ font-size: 1rem; }
  .deck-card figcaption strong{ font-size: 1.25rem; }

  .reveal-stage__inner{
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 1.5rem;
    padding: 4rem 1.25rem 0;
  }
  .reveal-stage__title{
    order: 1;
    font-size: clamp(3.5rem, 22vw, 7rem);
    text-align: left;
    align-items: flex-start;
    margin: 0;
  }
  .reveal-stage__img{
    order: 2;
    width: 100%;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 1;
    min-height: 0;
  }
  .reveal-stage__img img{
    height: auto;
    max-height: 55svh;
    object-position: center bottom;
  }

  .stats{
    grid-template-columns: repeat(2, 1fr);
    padding: 4rem 1rem;
    gap: 2.5rem 1rem;
  }
  .stat__num{ font-size: clamp(3rem, 14vw, 5rem); }
  .stat__label{ font-size: .65rem; margin-top: .5rem; letter-spacing: .15em; }

  .final{ padding: 5rem 1rem; }
  .final__quote{ font-size: clamp(1.5rem, 9vw, 2.75rem); line-height: 1.15; }
  .final__cred{ font-size: .7rem; letter-spacing: .2em; margin-top: 2rem; }

  .progress{ height: 2px; }
}

/* Phone pequeno (até 380px) */
@media (max-width: 380px){
  .hero__title{ padding: 5rem .75rem 0 .9rem; }
  .display{ font-size: clamp(2.4rem, 17vw, 4.5rem); }
  .layer__year{ font-size: clamp(4rem, 28vw, 6rem); }
  .panel__num{ font-size: 3rem; }
}