/* ==================================================================
   VITOR TEIXEIRA — nvfase.com/vitorteixeira
   Segundo exemplar do NVFASE Artist Framework. Mesma engenharia da
   página do Carlinhos Falsetti (nav, menu, agenda, convite, ficha,
   srcset/WebP, cache busting, reduced-motion); identidade própria.
   ------------------------------------------------------------------
   TESE
     Carlinhos: editorial assimétrico · figura recortada · papel ·
                gravura · informação em colunas
     Vitor:     frontal · arquitetónico · cinematográfico · horizontal
                · monumental · luz + pedra + carvão
   PRINCÍPIOS
   · Capa de álbum expandida: a fotografia frontal (DSC_9804, a
     escadaria simétrica) abre a página de lado a lado e dissolve-se
     na pedra do fundo por uma máscara curta — não há "fim" da foto.
   · Uma assinatura: VITOR TEIXEIRA em Archivo expandida, caixa alta,
     duas linhas do mesmo gesto, a entrar onde a foto acaba.
   · Uma linha de créditos: convite, lançamento e agenda numa só faixa
     por baixo da assinatura, como os créditos de uma capa.
   · Azul mineral é sinalização, não tinta: fios, kickers, hover,
     numeração. O laranja vive nas capas e na fotografia, não na UI.
   · Vozes: Archivo (display + UI) · Fraunces (serifa, frases e leitura)
     · DM Mono (fichas, kickers, datas). Nenhuma partilhada com o
     Carlinhos.
   ================================================================== */

/* ---------- Fontes ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(../fonts/archivo-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: 'Fraunces';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/fraunces-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: 'Fraunces';
  font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(../fonts/fraunces-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;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/dm-mono-400-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: 'DM Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/dm-mono-500-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 e das capas */
  --stone:        #E8E3DD;   /* a pedra clara da escadaria: o fundo (um ponto mais quente que a v1, para casar com a foto frontal) */
  --stone-deep:   #CFC7BF;   /* pedra à sombra: fios, blocos */
  --light:        #F6F2EC;   /* luz: superfícies claras */
  --charcoal:     #171310;   /* o portão de ferro e a camisa */
  --ch-soft:      rgba(23, 19, 16, .70);
  --ch-mute:      rgba(23, 19, 16, .54);
  --ch-line:      rgba(23, 19, 16, .18);
  --ch-hair:      rgba(23, 19, 16, .10);
  /* Cor de assinatura: AZUL MINERAL — ardósia/aço azulado, o contraponto
     frio à pedra quente e ao carvão. Só sinalização: fios, kickers,
     hover/focus, numeração. O laranja fica nas capas e na foto. */
  --mineral:        #315C66;   /* 5,8:1 sobre a pedra */
  --mineral-light:  #6F9AA6;   /* 6,0:1 sobre o grafite */
  --graphite:       #171310;   /* = charcoal; o interior (Assista) */
  --offwhite:       #F7F7F4;
  --concrete:       #B7B0A7;   /* pedra apagada: metadados sobre grafite (8,6:1) */
  --of-line:        rgba(247, 247, 244, .16);

  /* Tipografia */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui:      "Archivo", system-ui, -apple-system, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, monospace;

  /* Escala */
  --text-body:  clamp(1rem, .95rem + .25vw, 1.125rem);
  --text-mono:  .72rem;

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

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--stone);
  color: var(--charcoal);
  font-family: var(--font-ui);
  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(--mineral); outline-offset: 4px; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.45;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -4rem;
  padding: .6rem 1rem; background: var(--charcoal); color: var(--light);
  z-index: 100; transition: top .2s var(--ease);
}
.skip-link:focus { top: .75rem; }

/* ---------- Navegação ----------
   Mesmo esqueleto do framework; proporções próprias: wordmark em
   caixa alta expandida, apelido a peso 800; links em DM Mono. */
.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(232, 227, 221, .88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: var(--ch-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: 500; font-stretch: 112%;
  font-size: .95rem; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
  /* 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; } }
.wordmark b { font-weight: 800; }
.nav-links { display: flex; gap: clamp(1.2rem, 2.6vw, 2.4rem); }
.nav-links a {
  position: relative; padding-block: .35rem;
  color: var(--ch-soft);
  transition: color var(--dur) var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--mineral);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav-links a:hover { color: var(--charcoal); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current] { color: var(--charcoal); }
.nav-links a[aria-current]::after { transform: scaleX(1); }
.menu-links a[aria-current] { color: var(--mineral); }
.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.35rem; width: auto; opacity: .5; transition: opacity var(--dur) var(--ease); }
.nav-seal:hover img, .nav-seal:focus-visible img { opacity: .9; }
.menu-btn {
  display: none;
  appearance: none; background: none; border: 1px solid var(--ch-line);
  border-radius: 2px; padding: .6rem 1rem;
  font: inherit; color: var(--charcoal); cursor: pointer;
}

/* Menu móvel: painel de pedra por baixo do nav; destinos em Archivo
   expandida, numerados em DM Mono como faixas de um disco */
.menu {
  position: fixed; inset: var(--nav-h) 0 0 0;
  z-index: 40;
  background: var(--stone);
  padding: clamp(1.5rem, 6vh, 3rem) 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; counter-reset: faixa; }
.menu-links a {
  display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline;
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 118%; text-transform: uppercase;
  font-size: clamp(2rem, 9vw, 3.4rem); line-height: 1.05;
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--ch-line);
  padding-block: .5em .4em;
}
.menu-links a::before {
  counter-increment: faixa; content: "0" counter(faixa);
  font-family: var(--font-mono); font-weight: 400; font-size: .72rem; letter-spacing: .06em;
  color: var(--mineral);
}
.menu-links a:hover { color: var(--mineral); }
.menu-foot { color: var(--ch-mute); margin: 0; }
.menu-foot a { color: var(--charcoal); border-bottom: 1px solid var(--ch-line); }
html.menu-open { overflow: hidden; }
html.menu-open .nav { background: var(--stone); border-color: var(--ch-hair); }

/* ---------- Componentes ---------- */
/* Botão: bloco de carvão, canto quase reto — arquitetura, não pílula */
.btn {
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .7em;
  padding: 1em 1.5em;
  border-radius: 2px;
  background: var(--charcoal); color: var(--light);
  font-family: var(--font-ui); font-weight: 600; font-size: .92rem; line-height: 1;
  letter-spacing: .01em;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--mineral); transform: translateY(-2px); }
.btn .icon { width: 1em; height: 1em; }
.link-mono {
  display: inline-flex; align-items: center; gap: .55em;
  color: var(--ch-soft);
  border-bottom: 1px solid var(--ch-line);
  padding-bottom: .2em;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-mono svg { width: .85rem; height: .85rem; transition: transform var(--dur) var(--ease-out); }
.link-mono:hover { color: var(--mineral); border-color: var(--mineral); }
.link-mono:hover svg { transform: translate(2px, -2px); }
.link-mono.is-soon { color: var(--ch-mute); border-color: var(--ch-hair); cursor: default; }
.link-mono.is-soon svg { opacity: .5; }
.kicker {
  margin: 0 0 .9rem;
  color: var(--charcoal);
  display: flex; align-items: center; gap: .8rem;
}
.kicker::before { content: ""; width: 1.4rem; height: 2px; background: var(--mineral); flex: none; }
.kicker-amber { color: var(--mineral); }
.ig-handle { font-weight: 500; color: var(--charcoal); text-transform: none; letter-spacing: 0; }
.agenda-follow:hover .ig-handle { color: var(--mineral); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: var(--nav-h);
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
}

/* A fotografia: de lado a lado, dissolvida na pedra pela base. A
   máscara é só alfa (sem cor, sem blur): a foto perde opacidade nos
   últimos ~30 % e a pedra clara da escadaria vira a pedra da página. */
.hero-photo {
  margin: 0;
  height: clamp(24rem, 52vh, 44rem);
  animation: photo-in 1.2s var(--ease-out) both;
}
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%;
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, rgba(0,0,0,.55) 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 66%, rgba(0,0,0,.55) 84%, transparent 100%);
}
@keyframes photo-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* A assinatura entra onde a foto acaba: a primeira linha nasce ainda
   dentro da zona dissolvida. Duas linhas, um gesto. */
.hero-title {
  position: relative; z-index: 1;
  margin-top: calc(-1 * clamp(2.4rem, 10vh, 6.5rem));
  padding-inline: var(--gutter);
  display: flex; align-items: flex-start; gap: clamp(1.2rem, 3vw, 3rem);
}
.hero-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 122%;
  font-size: clamp(3rem, 8.4vw, 8.6rem);
  line-height: .86; letter-spacing: -.025em;
  text-transform: uppercase;
  white-space: nowrap;
}
.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: .1s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(.2em); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* A linha de créditos: três células sobre um fio, separadas por fios */
.hero-strip {
  position: relative; z-index: 1;
  margin: clamp(1.2rem, 3vh, 2rem) var(--gutter) 0;
  border-top: 1px solid var(--ch-line);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  animation: fade-up 1s var(--ease-out) .45s backwards;
}
.cell { padding: clamp(1.1rem, 3vh, 1.8rem) clamp(1.2rem, 2.6vw, 2.6rem) 0 0; min-width: 0; }
.cell + .cell { border-left: 1px solid var(--ch-line); padding-left: clamp(1.2rem, 2.6vw, 2.6rem); }

.invite-text {
  margin: 0 0 1.1rem;
  font-family: var(--font-text);
  font-weight: 400; font-variation-settings: "SOFT" 30, "WONK" 0;
  font-size: clamp(1.35rem, 1rem + 1.1vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
  max-width: 18ch;
}
.invite-text em { font-style: italic; color: var(--mineral); }
.invite-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem; }

.cell-now { display: block; color: var(--charcoal); }
.cell-now .kicker { margin-bottom: 1rem; }
.now-row { display: flex; align-items: center; gap: 1rem; }
.now-row img {
  width: 3.6rem; height: 3.6rem; object-fit: cover; flex: none;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out);
}
.cell-now:hover img { transform: translateY(-2px); }
.now-text { display: grid; gap: .3rem; }
.now-title {
  font-family: var(--font-text); font-weight: 400; font-variation-settings: "SOFT" 30, "WONK" 0;
  font-size: clamp(1.3rem, 1rem + .8vw, 1.8rem); line-height: 1.05;
  transition: color var(--dur) var(--ease);
}
.cell-now:hover .now-title { color: var(--mineral); }
.now-go { display: inline-flex; align-items: center; gap: .4em; color: var(--ch-mute); }
.now-go svg { width: .8rem; height: .8rem; }

.agenda-list { list-style: none; margin: 0; padding: 0; }
.agenda-item {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  grid-template-areas: "date what" "date where" "date link";
  column-gap: .8rem; align-items: baseline;
  padding-block: .7rem;
  border-top: 1px solid var(--ch-hair);
}
.agenda-date { grid-area: date; color: var(--mineral); }
.agenda-date b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: .95; color: var(--charcoal); }
.agenda-what { grid-area: what; font-family: var(--font-text); font-size: 1.2rem; line-height: 1.15; }
.agenda-where { grid-area: where; color: var(--ch-mute); margin-top: .25rem; }
.agenda-link { grid-area: link; justify-self: start; margin-top: .4rem; color: var(--ch-soft); border-bottom: 1px solid var(--ch-line); }
.agenda-empty {
  margin: 0;
  font-family: var(--font-text);
  font-weight: 400; font-variation-settings: "SOFT" 30, "WONK" 0;
  font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); line-height: 1.25;
  color: var(--ch-soft);
  max-width: 24ch;
  text-wrap: pretty;
}
.agenda-empty em { font-style: italic; color: var(--charcoal); }
.agenda-follow { margin-top: 1rem; }
.agenda-list:empty + .agenda-empty { display: block; }
.agenda-list:not(:empty) + .agenda-empty { display: none; }


/* ---------- Ouça ----------
   Terceiro ato: volta à luz. Corte seco do grafite para a pedra
   (contraste de atos, não degradê). OUÇA encostado à direita — o
   contrário de ASSISTA — para os dois capítulos ganharem ritmo. O
   Spotify é o objeto; as plataformas, uma grelha de sinalização. */
.listen {
  position: relative;
  background: var(--stone);
  color: var(--charcoal);
  padding: clamp(3.5rem, 9vh, 6.5rem) var(--gutter) clamp(4rem, 10vh, 7rem);
}
.listen-head {
  display: flex; justify-content: flex-end;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  border-bottom: 1px solid var(--ch-line);
  padding-bottom: clamp(1rem, 3vh, 1.8rem);
}
.listen-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 122%;
  font-size: clamp(3rem, 8.4vw, 8.6rem);
  line-height: .86; letter-spacing: -.025em;
  text-transform: uppercase;
}
.listen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 30vw);
  column-gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}
.listen-stage { margin: 0; }
.listen-caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 2rem; margin-bottom: 1rem; }
.listen-caption .kicker { margin: 0; }
.listen-name {
  font-family: var(--font-display); font-weight: 700; font-stretch: 110%;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); letter-spacing: -.005em; text-transform: uppercase;
}
/* o caixilho: altura do embed reservada; bordos retos, como tudo aqui */
.listen-player {
  position: relative;
  height: 452px;
  border: 1px solid var(--ch-line);
  background: var(--stone-deep);
  overflow: hidden;
}
.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: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.listen-player.is-ready .listen-fallback { display: none; }

/* sinalização: uma coluna de destinos em Archivo, fios finos, seta */
.listen-platforms { padding-top: .2rem; }
.platform-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ch-line); }
.platform-list li { border-bottom: 1px solid var(--ch-line); }
.platform-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0;
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%;
  font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--charcoal);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease-out);
}
.platform-list a svg { width: .9rem; height: .9rem; color: var(--ch-mute); transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease); }
.platform-list a:hover { color: var(--mineral); padding-left: .4rem; }
.platform-list a:hover svg { color: var(--mineral); transform: translate(2px, -2px); }
.platform-list a:focus-visible { outline: 2px solid var(--mineral); outline-offset: -2px; }

@media (max-width: 1180px) {
  .listen-grid { grid-template-columns: minmax(0, 1fr) minmax(14rem, 32vw); }
  .listen-player { height: 380px; }
}
@media (max-width: 860px) {
  .listen { padding-top: clamp(3rem, 8vh, 4.5rem); }
  .listen-grid { grid-template-columns: 1fr; row-gap: 2.2rem; }
  .listen-stage { margin-inline: calc(-1 * var(--gutter)); }
  .listen-caption { padding-inline: var(--gutter); }
  .listen-player { height: 352px; border-inline: 0; }
  .platform-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .platform-list a { padding: .95rem 0; font-size: .82rem; }
  .platform-list a:hover { padding-left: 0; }
}
/* Telemóveis: o embed do Spotify escolhe o player compacto (152px, a
   altura documentada) e não estica para preencher caixilhos maiores —
   em ecrãs pequenos reservamos exatamente essa altura, senão sobra um
   vazio por baixo do player. Tablet e desktop continuam com o embed
   grande. */
@media (max-width: 600px) {
  /* altura documentada do player compacto; sem caixilho, para que
     qualquer folga que o Spotify deixe leia como espaço normal e não
     como uma caixa vazia */
  .listen-player { height: 152px; border: 0; background: none; }
}
@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 ----------
   Quarto ato: permanência. Fundo em off-white (a variação mais suave
   possível da pedra); a fotografia — fotografia, sem tratamento —
   é uma coluna colada ao bordo esquerdo do ecrã que vai do topo ao
   fundo da secção. CONHEÇA nasce sobre a pedra da própria foto (a
   zona à direita do Vitor) e atravessa para o fundo da página: a
   palavra pertence às duas superfícies. A biografia lê-se à direita. */
.about {
  position: relative;
  background: var(--offwhite);
  color: var(--charcoal);
  display: grid;
  grid-template-columns: 46vw minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 5vw, 6rem);
  padding: 0 var(--gutter) clamp(4rem, 10vh, 7rem) 0;
}
.about-photo {
  grid-column: 1; grid-row: 1 / 3;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--stone-deep);
}
.about-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 38% 22%;   /* portão à esquerda, Vitor ao centro; o corte come a pedra da direita */
}
/* CONHEÇA: a primeira letra ainda sobre a foto, o resto sobre o fundo */
.about-title {
  grid-column: 1 / -1; grid-row: 1;
  position: relative; z-index: 2;
  margin: clamp(3.5rem, 9vh, 6.5rem) 0 0 calc(46vw - clamp(3rem, 8.4vw, 8.6rem) * 1.05);
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 122%;
  font-size: clamp(3rem, 8.4vw, 8.6rem);
  line-height: .86; letter-spacing: -.025em;
  text-transform: uppercase;
  white-space: nowrap;
}
.about-body {
  grid-column: 2; grid-row: 2;
  align-self: start;
  padding-top: clamp(2.2rem, 5vh, 3.4rem);
  max-width: 40rem;
}
.about-bio p {
  margin: 0 0 1.1em;
  font-family: var(--font-text);
  font-weight: 400; font-variation-settings: "SOFT" 30, "WONK" 0;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  line-height: 1.5;
  text-wrap: pretty;
}
.about-bio p:first-child { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.7rem); line-height: 1.3; }

@media (max-width: 1180px) {
  .about { grid-template-columns: 44vw minmax(0, 1fr); }
  .about-title { margin-left: calc(44vw - clamp(3rem, 8.4vw, 8.6rem) * .95); }
}
@media (max-width: 860px) {
  /* CONHEÇA → retrato 4:5 (o título pousa sobre a pedra do topo) → biografia */
  .about {
    display: block;
    padding: clamp(3rem, 8vh, 4.5rem) var(--gutter) clamp(3.5rem, 8vh, 5rem);
    min-height: 0;
  }
  .about-title { margin: 0 0 -.32em; font-size: clamp(3rem, 15vw, 6.2rem); }
  .about-photo {
    margin-inline: calc(-1 * var(--gutter));
    aspect-ratio: 4 / 5;
    background: var(--stone-deep);
  }
  .about-photo img { object-position: 50% 50%; }
  .about-body { padding-top: clamp(1.6rem, 5vh, 2.4rem); max-width: none; }
}


/* Conheça — fecho humano: a voz do Vitor, depois da biografia */
.about-quote {
  margin: clamp(2.6rem, 6vh, 4rem) 0 0;
  padding-top: clamp(1.6rem, 4vh, 2.4rem);
  border-top: 1px solid var(--mineral);
  max-width: 40rem;
}
.about-quote p {
  margin: 0;
  font-family: var(--font-text);
  font-weight: 400; font-variation-settings: "SOFT" 30, "WONK" 0;
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.about-quote cite { display: block; margin-top: 1.2rem; font-style: normal; color: var(--ch-mute); }

/* ---------- Histórias ----------
   Quinto ato, em pedra. Uma publicação, não um portal: a matéria mais
   recente ganha a largura (imagem à esquerda, texto à direita, pousado
   na base); as seguintes, quando existirem, são linhas com miniatura.
   Markup gerado por tools/build-artist-stories.ps1. */
.stories {
  background: var(--stone);
  color: var(--charcoal);
  padding: clamp(3.5rem, 9vh, 6.5rem) var(--gutter) clamp(4rem, 10vh, 7rem);
}
.stories-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
  padding-bottom: clamp(1rem, 3vh, 1.8rem);
  border-bottom: 1px solid var(--ch-line);
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.stories-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 122%;
  font-size: clamp(3rem, 8.4vw, 8.6rem);
  line-height: .86; letter-spacing: -.025em;
  text-transform: uppercase;
}
.stories-list { list-style: none; margin: 0; padding: 0; }
.story + .story { border-top: 1px solid var(--ch-line); }
.story-link { display: grid; color: var(--charcoal); }
.story-media { margin: 0; overflow: hidden; background: var(--stone-deep); }
.story-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; transition: transform 1.2s var(--ease-out); }
.story-link:hover .story-media img { transform: scale(1.03); }
.story-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem; color: var(--ch-mute); margin: 0 0 1rem; }
.story-meta b { font-weight: 500; color: var(--mineral); }
.story-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 700; font-stretch: 110%;
  line-height: 1.02; letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
  transition: color var(--dur) var(--ease);
}
.story-link:hover .story-title { color: var(--mineral); }
.story-excerpt {
  margin: 1rem 0 0;
  font-family: var(--font-text); font-variation-settings: "SOFT" 30, "WONK" 0;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.45;
  color: var(--ch-soft); max-width: 44ch; text-wrap: pretty;
}
.story-go { display: inline-flex; align-items: center; gap: .55em; margin-top: 1.4rem; color: var(--ch-soft); border-bottom: 1px solid var(--ch-line); padding-bottom: .2em; transition: color var(--dur) var(--ease), 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 { color: var(--mineral); border-color: var(--mineral); }
.story-link:hover .story-go svg { transform: translateX(3px); }
.story-link:focus-visible { outline: 2px solid var(--mineral); outline-offset: 4px; }
/* a mais recente */
.story-featured .story-link { grid-template-columns: minmax(0, 52vw) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 6rem); align-items: end; padding-block: 0 clamp(1.5rem, 4vh, 2.5rem); }
.story-featured .story-title { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 3rem); }
/* as seguintes: linha com miniatura à direita */
.story-row .story-link { grid-template-columns: minmax(0, 1fr) 12rem; column-gap: clamp(2rem, 5vw, 6rem); align-items: center; padding-block: clamp(1.4rem, 3vh, 2.2rem); }
.story-row .story-media { order: 2; }
.story-row .story-title { font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); }
.stories-all { margin-top: clamp(1.4rem, 4vh, 2.2rem); }

/* ---------- Fique por perto ----------
   Encerramento em grafite: título monumental, uma linha de luz para
   escrever o e-mail, o botão em off-white. Mineral-light ganha um
   pouco mais de presença no escuro. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stay {
  background: var(--graphite);
  color: var(--offwhite);
  padding: clamp(4rem, 12vh, 8rem) var(--gutter) clamp(3.5rem, 9vh, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 44vw);
  column-gap: clamp(2rem, 6vw, 8rem);
  align-items: end;
}
.stay-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 122%;
  font-size: clamp(3rem, 8.4vw, 8.6rem);
  line-height: .86; letter-spacing: -.025em;
  text-transform: uppercase;
}
.stay-lead {
  margin: 0 0 clamp(1.4rem, 3vh, 2rem);
  font-family: var(--font-text); font-variation-settings: "SOFT" 30, "WONK" 0;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.3;
  color: var(--concrete); max-width: 32ch; text-wrap: pretty;
}
.stay-form { margin: 0; }
.stay-row { display: flex; align-items: stretch; gap: .8rem; border-bottom: 1px solid var(--offwhite); padding-bottom: .6rem; }
.stay-input {
  flex: 1 1 auto; min-width: 0;
  appearance: none; border: 0; background: transparent;
  padding: .7rem 0;
  font-family: var(--font-ui); font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
  color: var(--offwhite);
}
.stay-input::placeholder { color: var(--concrete); }
.stay-input:focus { outline: none; }
.stay-row:focus-within { border-color: var(--mineral-light); }
.stay-row .btn { flex: none; align-self: center; white-space: nowrap; }
.btn-light { background: var(--offwhite); color: var(--graphite); }
.btn-light:hover { background: var(--mineral-light); color: var(--graphite); }
.stay-consent { margin: 1rem 0 0; color: var(--concrete); max-width: 52ch; text-transform: none; letter-spacing: .02em; line-height: 1.5; }
.stay-status { margin: .8rem 0 0; color: var(--mineral-light); text-transform: none; letter-spacing: .02em; line-height: 1.5; }
.stay-status:empty { display: none; }
.stay-status a { color: var(--offwhite); border-bottom: 1px solid var(--of-line); }
.stay-invite { margin-top: clamp(2.2rem, 5vh, 3.5rem); }
.stay-invite .kicker { color: var(--concrete); margin-bottom: .6rem; }
.stay-invite .kicker::before { background: var(--mineral-light); }
.stay-invite .link-mono { color: var(--offwhite); border-color: var(--of-line); }
.stay-invite .link-mono:hover { color: var(--mineral-light); border-color: var(--mineral-light); }
.stay :focus-visible { outline-color: var(--mineral-light); }

/* ---------- Footer: expediente, na continuidade do grafite ---------- */
.foot {
  background: var(--graphite);
  color: var(--offwhite);
  padding: clamp(2rem, 4vh, 3rem) var(--gutter) clamp(2.5rem, 6vh, 4rem);
  border-top: 1px solid var(--of-line);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: 1.5rem;
  align-items: start;
}
.foot-mark { margin: 0; }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.foot-list a { color: var(--concrete); border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.foot-list a:hover { color: var(--mineral-light); border-color: var(--mineral-light); }
.foot-list .is-soon { color: rgba(247, 247, 244, .38); }
.foot-seal { display: grid; justify-items: end; gap: .7rem; text-align: right; }
.foot-seal .nav-seal img { height: 1.35rem; opacity: .55; }
.foot-seal p { margin: 0; color: var(--concrete); }
.foot-seal .foot-dev { font-size: .66rem; color: rgba(247, 247, 244, .45); margin-top: .35rem; }
.foot-dev a { color: rgba(247, 247, 244, .6); border-bottom: 1px solid rgba(247, 247, 244, .2); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.foot-dev a:hover { color: var(--mineral-light); border-color: var(--mineral-light); }
.foot :focus-visible { outline-color: var(--mineral-light); }

@media (max-width: 1180px) {
  .story-featured .story-link { grid-template-columns: minmax(0, 48vw) minmax(0, 1fr); }
  .stay { grid-template-columns: minmax(0, 1fr) minmax(0, 50vw); }
}
@media (max-width: 860px) {
  .about-quote { max-width: none; margin-top: clamp(2.2rem, 6vh, 3rem); }
  .stories { padding-top: clamp(3rem, 8vh, 4.5rem); }
  .stories-head { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .story-featured .story-link, .story-row .story-link { grid-template-columns: 1fr; row-gap: 1.2rem; align-items: start; }
  .story-featured .story-media, .story-row .story-media { margin-inline: calc(-1 * var(--gutter)); }
  .story-row .story-media { order: -1; }
  .stay { grid-template-columns: 1fr; row-gap: 2rem; padding-top: clamp(3rem, 8vh, 5rem); }
  .stay-title { font-size: clamp(3rem, 15vw, 6.2rem); }
  .stay-lead { max-width: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-mark { grid-column: 1 / -1; }
  .foot-seal { grid-column: 1 / -1; justify-items: start; text-align: left; padding-top: 1rem; border-top: 1px solid var(--of-line); }
  .foot-seal .foot-dev { margin-top: 1.1rem; }
}
@media (max-width: 600px) {
  .stay-row { flex-direction: column; align-items: stretch; gap: 1rem; border-bottom: 0; padding-bottom: 0; }
  .stay-input { border-bottom: 1px solid var(--offwhite); padding: .8rem 0; }
  .stay-input:focus { border-color: var(--mineral-light); }
  .stay-row .btn { align-self: flex-start; }
}
@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; }
}

/* ---------- Assista ----------
   Exterior → interior: o hero é a capa em pedra; Assista é o encarte,
   em grafite. Tracklist visual: o palco (01) e cinco faixas
   horizontais que trocam o palco. Números em mineral; títulos em
   Archivo; créditos em DM Mono sobre betão. O laranja só existe
   dentro dos cartazes. */
.watch {
  position: relative;
  /* corte seco pedra → grafite: mudança de capítulo (o botão carvão do
     hero já antecipa o grafite) */
  background: var(--graphite);
  color: var(--offwhite);
  padding: clamp(3.5rem, 9vh, 6.5rem) var(--gutter) clamp(3.5rem, 8vh, 6rem);
}
.watch-head { margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.watch-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 122%;
  font-size: clamp(3rem, 8.4vw, 8.6rem);
  line-height: .86; letter-spacing: -.025em;
  text-transform: uppercase;
}
/* uma faixa: corpo | arte — repertório, não índice */
.track { border-top: 1px solid var(--of-line); }

/* o palco */
.track-stage { padding: clamp(1.2rem, 3vh, 2rem) 0 clamp(1.6rem, 4vh, 2.6rem); }
.stage { margin: 0; }
.stage-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0E0C0A;
  overflow: hidden;
}
.stage-player > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-poster {
  display: block; appearance: none; border: 0; padding: 0; margin: 0;
  background: #0E0C0A; color: var(--offwhite); cursor: pointer;
}
.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); }
.stage-poster.is-swapping img { opacity: 0; }
.stage-play {
  position: absolute; left: 50%; top: 50%;
  width: clamp(3.6rem, 6vw, 5.2rem); height: clamp(3.6rem, 6vw, 5.2rem);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--offwhite); color: var(--graphite);
  display: grid; place-items: center;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.stage-play svg { width: 38%; height: 38%; margin-left: 8%; }
.stage-poster:hover .stage-play { transform: translate(-50%, -50%) scale(1.06); background: var(--mineral-light); color: var(--graphite); }
.stage-poster:focus-visible { outline: none; }
.stage-poster:focus-visible .stage-play { outline: 2px solid var(--mineral-light); outline-offset: 4px; }
.stage-player iframe { border: 0; }
.stage-caption {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 2rem;
  padding-top: 1rem;
}
.stage-title {
  font-family: var(--font-display); font-weight: 700; font-stretch: 110%;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); line-height: 1.05; letter-spacing: -.01em;
  text-transform: uppercase;
}
.stage-meta { color: var(--concrete); }

/* a lista */
.tracklist { list-style: none; margin: 0; padding: 0; }
.tracklist button {
  appearance: none; background: none; border: 0;
  width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) 11rem;
  column-gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding: .9rem 0;
  font: inherit; color: var(--offwhite);
  transition: color var(--dur) var(--ease);
}
.tracklist button:focus-visible { outline: 2px solid var(--mineral-light); outline-offset: -2px; }
.track-body { display: grid; gap: .3rem; min-width: 0; }
.track-title {
  font-family: var(--font-display); font-weight: 700; font-stretch: 110%;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); line-height: 1.08; letter-spacing: -.01em;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}
.track-meta { color: var(--concrete); }
.track-meta b { font-weight: 500; color: var(--mineral-light); }
/* a arte: uma janela 2:1 sobre o cartaz — fragmento, não miniatura */
.track-art { display: block; aspect-ratio: 2 / 1; overflow: hidden; background: #0E0C0A; }
.track-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: .78; transition: opacity var(--dur) var(--ease), transform 1.2s var(--ease-out); }
.tracklist button:hover .track-title { color: var(--mineral-light); }
.tracklist button:hover .track-art img { opacity: 1; transform: scale(1.04); }
.track.is-active .track-title { color: var(--mineral-light); }
.track.is-active .track-art img { opacity: 1; }
.track.is-active button { cursor: default; }
.tracklist .track:last-child { border-bottom: 1px solid var(--of-line); }
.watch-all { margin-top: clamp(1.4rem, 4vh, 2.2rem); color: var(--concrete); border-color: var(--of-line); }
.watch-all:hover { color: var(--mineral-light); border-color: var(--mineral-light); }

@media (max-width: 1180px) {
  .tracklist button { grid-template-columns: minmax(0, 1fr) 9rem; }
}
@media (max-width: 860px) {
  .watch { padding-top: clamp(3rem, 8vh, 4.5rem); }
  /* o palco sangra até às margens */
  .track-stage { padding-top: 1rem; }
  .stage { margin-inline: calc(-1 * var(--gutter)); }
  .stage-caption { padding-inline: var(--gutter); flex-direction: column; gap: .3rem; }
  .tracklist button { grid-template-columns: minmax(0, 1fr) 7.5rem; column-gap: 1rem; padding: 1rem 0; }
  .track-art { aspect-ratio: 16 / 10; }
  .track-title { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-poster img, .stage-play, .track-art img { transition: none; }
  .stage-poster:hover img, .tracklist button:hover .track-art img { transform: none; }
}


/* ---------- Responsivo ---------- */
@media (max-width: 1180px) {
  .hero-photo { height: clamp(22rem, 52vh, 36rem); }
  .invite-text { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); }
  .cell { padding-right: 1.2rem; }
  .cell + .cell { padding-left: 1.2rem; }
  .now-title { font-size: 1.3rem; }
  .now-row img { width: 3.2rem; height: 3.2rem; }
}

/* Tablet e celular: abertura cinematográfica em retrato (recorte
   próprio da mesma foto), a assinatura a nascer da dissolução, e os
   créditos empilhados. */
@media (max-width: 860px) {
  :root { --nav-h: 4rem; }
  .nav-inner { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .nav-end .nav-seal img { height: 1.15rem; }
  .menu-btn { display: inline-flex; }

  .hero-photo { height: min(74svh, 720px); }
  .hero-photo img {
    object-position: 50% 18%;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, rgba(0,0,0,.5) 86%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 70%, rgba(0,0,0,.5) 86%, transparent 100%);
  }
  .hero-title {
    margin-top: calc(-1 * clamp(2rem, 9vw, 4rem));
    flex-direction: column; gap: 1rem;
  }
  .hero-name { font-size: clamp(2.6rem, 15vw, 6.2rem); }
  .hero-strip { grid-template-columns: 1fr; margin-top: clamp(1.4rem, 4vh, 2.2rem); }
  .cell { padding: clamp(1.2rem, 3.5vh, 1.8rem) 0; }
  .cell + .cell { border-left: 0; border-top: 1px solid var(--ch-line); padding-left: 0; }
  .invite-text { max-width: 22ch; }
  .agenda-empty { max-width: 30ch; }
}
@media (max-width: 600px) {
  .hero-photo { height: min(80svh, 620px); }
}

/* Movimento reduzido: tudo no lugar, sem animações. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-photo, .hero-name .line > span, .hero-strip, .menu { animation: none; }
  .btn:hover, .cell-now:hover img, .link-mono:hover svg { transform: none; }
}