/* ==================================================================
   CARLINHOS FALSETTI — nvfase.com/carlinhosfalsetti
   Sistema visual da página oficial. Nasce da fotografia 050:
   parede clara e quente, camisa preta, violão de mogno, olhos
   fechados. Voz e violão — nada mais é preciso.
   ------------------------------------------------------------------
   PRINCÍPIOS
   · Papel, não ecrã: a página é a mesma superfície da parede da
     foto. A fotografia entra em multiply sobre o papel, por isso
     o branco da parede desaparece e a figura fica "pousada" na
     página, sem recorte nem moldura.
   · Tinta e madeira: só duas cores fortes — o preto quente da
     camisa (tinta) e o mogno do violão (madeira). O ganga da
     calça dá um azul apagado para detalhes secundários.
   · Serifa com voz: Instrument Serif, regular para o nome de
     batismo e itálico para "Falsetti" — o itálico canta, e é a
     assinatura da identidade. Instrument Sans (partilhada com o
     selo) para texto corrido, Space Mono para fichas e datas.
   · Assimetria controlada: uma coluna de leitura à esquerda,
     fotografia a sangrar à direita, ficha técnica a fechar o
     ecrã. Tudo alinhado a duas margens, nunca centrado.
   ================================================================== */

/* ---------- Fontes ---------- */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-serif-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-serif-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: 'Instrument Serif';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-serif-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: 'Instrument Sans';
  font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap;
  src: url(../fonts/instrument-sans-latin-ext-3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap;
  src: url(../fonts/instrument-sans-latin-4.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: 'Space Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/space-mono-latin-ext-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/space-mono-latin-6.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 050 */
  --paper:        #F4F1EC;   /* a parede depois da luz: nunca branco puro */
  --paper-deep:   #E8E2D9;   /* a parede onde a luz não chega */
  --ink:          #17140F;   /* o preto quente da camisa */
  --ink-soft:     rgba(23, 20, 15, .68);
  --ink-mute:     rgba(23, 20, 15, .54);
  --ink-line:     rgba(23, 20, 15, .16);
  --ink-hair:     rgba(23, 20, 15, .09);
  --wood:         #7A4322;   /* o mogno do violão — o único acento */
  --wood-deep:    #4A2412;
  --amber:        #C98A3E;   /* o brilho da madeira: só em detalhes */
  --denim:        #4A5570;   /* a calça — azul apagado para estados secundários */

  /* Tipografia */
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body:  "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono:  "Space Mono", ui-monospace, monospace;

  /* Escala */
  --text-name:  clamp(4.4rem, 11.4vw, 12rem);
  --text-lede:  clamp(1.15rem, 1.05rem + .6vw, 1.5rem);
  --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(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  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(--wood); outline-offset: 4px; }

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

/* ---------- Navegação ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 50;
  display: flex; align-items: center;
  padding-inline: var(--gutter);
  /* o fio inferior só aparece depois de rolar (JS põe .is-stuck) */
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav.is-stuck {
  background: rgba(244, 241, 236, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: var(--ink-hair);
}
.nav-inner {
  width: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem;
}
.wordmark {
  font-family: var(--font-serif);
  font-size: 1.35rem; line-height: 1; letter-spacing: -.01em;
  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 em { font-style: italic; color: var(--wood); }
.nav-links { display: flex; gap: clamp(1.2rem, 2.6vw, 2.4rem); }
.nav-links a {
  position: relative; padding-block: .35rem;
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--wood);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current] { color: var(--ink); }
.nav-links a[aria-current]::after { transform: scaleX(1); }
.menu-links a[aria-current] { color: var(--wood); }
.nav-end { display: flex; justify-content: flex-end; align-items: center; gap: 1.2rem; }
/* Chancela NVFASE: a wordmark oficial em tinta, pequena e apagada —
   «Carlinhos Falsetti» continua a ser a marca desta página. */
.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(--ink-line);
  border-radius: 999px; padding: .55rem 1rem;
  font: inherit; color: var(--ink); cursor: pointer;
}

/* Menu móvel: um painel de papel por baixo do nav, com os mesmos
   quatro destinos em serifa grande. */
.menu {
  position: fixed; inset: var(--nav-h) 0 0 0;
  z-index: 40;
  background: var(--paper);
  padding: clamp(1.5rem, 6vh, 3rem) var(--gutter);
  display: flex; flex-direction: column; justify-content: space-between;
  animation: fade-up .4s var(--ease-out) both;
}
.menu[hidden] { display: none; }
.menu-links { display: grid; gap: .2em; }
.menu-links a {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 11vw, 4rem); line-height: 1.1;
  letter-spacing: -.02em;
  border-bottom: 1px solid var(--ink-hair);
  padding-block: .15em;
}
.menu-links a:hover { color: var(--wood); }
.menu-foot { color: var(--ink-mute); margin: 0; }
.menu-foot a { color: var(--ink); border-bottom: 1px solid var(--ink-line); }
html.menu-open { overflow: hidden; }
html.menu-open .nav { background: var(--paper); border-color: var(--ink-hair); }

/* ---------- Botões ---------- */
.btn {
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .7em;
  padding: .95em 1.6em;
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-weight: 500; font-size: .95rem; line-height: 1;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--wood); transform: translateY(-2px); }
.btn .icon { width: 1em; height: 1em; }
.link-arrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-weight: 500; font-size: .95rem;
  border-bottom: 1px solid var(--ink-line);
  padding-bottom: .15em;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-arrow svg { width: .9em; height: .9em; transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover { color: var(--wood); border-color: var(--wood); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Hero ----------
   Composição: o Carlinhos é o eixo físico da página. O nome ocupa
   o canto superior esquerdo, a agenda encosta ao rodapé do hero à
   esquerda, o convite encosta à direita. As três coisas gravitam
   à volta da figura sem colunas rígidas:

        Carlinhos
           Falsetti          [ figura, monumental ]
        PRÓXIMOS ENCONTROS                        Convide Carlinhos…
        ····                                      FAZER UM CONVITE →
        ─────────────────────────────────────────────────────────────
        [ficha: Alabanza]                                CONTINUAR ↓
*/
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: var(--nav-h);
  /* sem overflow:hidden de propósito: a figura atravessa a base do
     hero e dissolve-se dentro da secção seguinte (o corte horizontal
     é feito no body, com overflow-x: clip) */
}

/* A fotografia: ocupa o centro, de alto a baixo, e funde-se com o
   papel pelo multiply. A máscara dissolve os bordos laterais e a
   base (onde a agenda e o convite pousam). */
.hero-photo {
  position: absolute; margin: 0;
  /* 128% da altura do hero: a cabeça encosta ao nav, o violão passa
     o fio da ficha e as pernas dissolvem-se já dentro de «Assista» */
  top: -3%; height: 128%;
  left: 15vw; right: 11vw;
  z-index: 0;
  pointer-events: none;
  animation: photo-in 1.6s var(--ease-out) both;
}
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 54% 0%;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 95%),
                      linear-gradient(to right, transparent, #000 8%, #000 96%, transparent);
          mask-image: linear-gradient(to bottom, #000 68%, transparent 95%),
                      linear-gradient(to right, transparent, #000 8%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
@keyframes photo-in {
  from { opacity: 0; transform: translateY(1.5%) scale(1.02); }
  to   { opacity: 1; transform: none; }
}

/* A grelha por cima da fotografia: 3 colunas soltas, 2 linhas.
   O nome vive em cima; agenda e convite sentam-se na linha do fio. */
.hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 30vw) 1fr minmax(0, 23vw);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.5rem, 5vh, 3.5rem) var(--gutter) clamp(1.5rem, 4vh, 2.5rem);
}

/* Identidade */
.hero-id { grid-column: 1 / 3; grid-row: 1; }
.eyebrow {
  margin: 0 0 clamp(1rem, 2.6vh, 1.8rem);
  color: var(--ink-mute);
  display: flex; align-items: center; gap: .9rem;
}
.eyebrow::before {
  content: ""; width: 2.2rem; height: 1px; background: var(--wood); flex: none;
}
.hero-name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-name);
  line-height: .84;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.hero-name .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-name .line > span { display: block; animation: rise 1.1s var(--ease-out) backwards; }
.hero-name .line:nth-child(2) > span { animation-delay: .14s; }
/* O apelido em itálico é a assinatura: recua para a direita e
   ganha a cor da madeira. */
.hero-name .surname { font-style: italic; color: var(--wood); padding-left: .42em; }
@keyframes rise {
  from { transform: translateY(110%); }
  to   { transform: none; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Título das duas utilidades: fio de madeira + mono */
.hero-kicker {
  margin: 0 0 1.1rem;
  color: var(--ink);
  display: flex; align-items: center; gap: .8rem;
}
.hero-kicker::before { content: ""; width: 1.4rem; height: 1px; background: var(--wood); flex: none; }

/* Agenda — parte da tipografia, não um cartão. Cada data é uma
   linha de ficha: data em mono/madeira, o quê em serifa, onde em
   mono apagado, e um link à direita. */
.hero-agenda {
  grid-column: 1; grid-row: 3;
  align-self: end;
  padding-top: clamp(1.5rem, 4vh, 3rem);
  animation: fade-up 1s var(--ease-out) .5s backwards;
}
.agenda-list { list-style: none; margin: 0; padding: 0; }
.agenda-item {
  display: grid;
  grid-template-columns: 4.2rem 1fr auto;
  grid-template-areas: "date what link" "date where link";
  column-gap: 1rem;
  align-items: baseline;
  padding-block: .8rem;
  border-top: 1px solid var(--ink-line);
}
.agenda-item:last-child { border-bottom: 1px solid var(--ink-line); }
.agenda-date { grid-area: date; color: var(--wood); }
.agenda-date b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 1.7rem; line-height: .95; letter-spacing: -.02em; color: var(--ink); }
.agenda-what { grid-area: what; font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.15; }
.agenda-where { grid-area: where; color: var(--ink-mute); margin-top: .3rem; }
.agenda-link { grid-area: link; align-self: center; color: var(--ink-soft); border-bottom: 1px solid var(--ink-line); padding-bottom: .1em; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.agenda-link:hover { color: var(--wood); border-color: var(--wood); }
/* Sem datas confirmadas: a estrutura fica, a mensagem é honesta */
.agenda-empty {
  margin: 0;
  padding-block: .9rem 1rem;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--font-serif);
  font-size: 1.2rem; line-height: 1.3;
  color: var(--ink-soft);
  max-width: 26ch;
  text-wrap: pretty;
}
.agenda-empty em { color: var(--ink); }
.agenda-follow { margin-top: 1rem; display: inline-flex; }
/* o handle em minúsculas e em tinta cheia: um grau acima de «Instagram»,
   sem virar botão */
.ig-handle { font-weight: 400; color: var(--ink); text-transform: none; letter-spacing: .02em; }
.agenda-follow:hover .ig-handle { color: var(--wood); }
.agenda-list:empty + .agenda-empty { display: block; }
.agenda-list:not(:empty) + .agenda-empty { display: none; }

/* Convite — a outra margem. Uma frase em serifa e um caminho claro. */
.hero-invite {
  grid-column: 3; grid-row: 1;
  align-self: start;
  justify-self: end;
  width: 100%;
  /* alinha o kicker do convite com o eyebrow do nome: uma linha de
     cabeçalho que atravessa o ecrã por cima da figura */
  padding-top: .1rem;
  animation: fade-up 1s var(--ease-out) .65s backwards;
}
.invite-text {
  margin: 0 0 1.3rem;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 1.1rem + .9vw, 2rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.invite-text em { font-style: italic; color: var(--wood); }
.invite-note { margin: 0 0 1.3rem; color: var(--ink-mute); max-width: 30ch; font-size: .92rem; line-height: 1.5; }
/* Ação secundária do convite: ferramenta para quem prepara cartaz
   ou matéria — mono, pequena, com respiro; nunca outro botão. */
.hero-invite .btn { display: flex; width: fit-content; }
.invite-secondary { display: inline-flex; margin-top: 1.4rem; }

/* Links em mono com seta (agenda, ficha) */
.link-mono {
  display: inline-flex; align-items: center; gap: .55em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink-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(--wood); border-color: var(--wood); }
.link-mono:hover svg { transform: translateX(3px); }

/* A ficha que fecha o ecrã: a camada de atualidade (troca-se a
   cada lançamento sem mexer no resto do hero) */
.hero-foot {
  position: relative; z-index: 1;
  margin-inline: var(--gutter);
  border-top: 1px solid var(--ink-line);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.5rem 3rem;
  padding-block: 1.1rem 1.4rem;
  animation: fade-up 1s var(--ease-out) .8s backwards;
}
.now {
  display: flex; align-items: center; gap: 1rem;
  color: var(--ink);
}
.now img {
  width: 3.25rem; height: 3.25rem; object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(23,20,15,.12), 0 6px 18px -8px rgba(23,20,15,.45);
  transition: transform var(--dur) var(--ease-out);
}
.now:hover img { transform: translateY(-2px) rotate(-1.5deg); }
.now-text { display: grid; gap: .25rem; }
.now-text .mono { color: var(--ink-mute); }
.now-title { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.05; }
.now-title em { color: var(--wood); }
.foot-end { justify-self: end; display: grid; justify-items: end; gap: .55rem; align-self: center; }
.hero-meta { color: var(--ink-mute); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem 1.6rem; margin: 0; }
.hero-meta span { display: inline-flex; align-items: center; gap: .6rem; }
.hero-meta span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--wood); }
.scroll-cue {
  display: inline-flex; align-items: center; gap: .7rem;
  color: var(--ink-mute);
}
.scroll-cue svg { width: 1rem; height: 1rem; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ---------- Responsivo ---------- */

/* Ecrãs largos e baixos (1440×900, 1920×1080): a figura pode crescer
   um pouco mais para os lados sem tocar no texto. */
@media (min-width: 1500px) {
  .hero-photo { left: 16vw; right: 12vw; }
}

/* Portátil (≈1024–1180): menos largura para as três coisas, a
   figura aperta-se para o centro e o nome desce um degrau. */
@media (max-width: 1180px) {
  :root { --text-name: clamp(4.2rem, 10.6vw, 9rem); }
  /* menos altura e mais à direita: liberta a agenda e a ficha */
  .hero-photo { top: 2%; height: 112%; left: 18vw; right: 2vw; }
  /* três ações no convite: mais juntas, para não tocarem no braço do violão */
  .invite-text { font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); margin-bottom: 1rem; }
  .invite-secondary { margin-top: .85rem; }
  .hero-photo img {
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 90%),
                        linear-gradient(to right, transparent, #000 8%, #000 96%, transparent);
            mask-image: linear-gradient(to bottom, #000 58%, transparent 90%),
                        linear-gradient(to right, transparent, #000 8%, #000 96%, transparent);
  }
  .hero-grid { grid-template-columns: minmax(0, 33vw) 1fr minmax(0, 29vw); }
  .agenda-item { grid-template-columns: 3.6rem 1fr; grid-template-areas: "date what" "date where" "date link"; }
  .agenda-link { justify-self: start; margin-top: .5rem; }
}

/* Tablet e celular: leitura vertical. Nome → fotografia → agenda →
   convite → ficha. A fotografia continua monumental: ocupa a largura
   toda e o nome pousa na sua base. */
@media (max-width: 860px) {
  :root { --nav-h: 4rem; --text-name: clamp(4.2rem, 15.5vw, 8.5rem); }
  .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 { grid-template-rows: auto 1fr auto; padding-top: 0; }
  .hero-photo {
    position: relative;
    top: auto; left: auto; right: auto;
    width: 100%; height: min(78svh, 800px);
    pointer-events: auto;
    grid-row: 1;
    margin-top: calc(var(--nav-h) - 1rem);
  }
  .hero-photo img {
    object-position: 56% 0%;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 95%);
            mask-image: linear-gradient(to bottom, #000 60%, transparent 95%);
  }
  .hero-grid {
    grid-row: 2;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-content: start;
    column-gap: clamp(1.5rem, 5vw, 3rem);
    row-gap: clamp(2rem, 5vh, 3rem);
    margin-top: -10svh;
    padding-top: 0;
  }
  .hero-id { grid-column: 1 / -1; grid-row: 1; }
  .hero-name { white-space: normal; }
  .hero-agenda { grid-column: 1; grid-row: 2; align-self: start; padding-top: 0; }
  .hero-invite { grid-column: 2; grid-row: 2; align-self: start; justify-self: start; padding-top: 0; }
  .agenda-item { grid-template-columns: 3.6rem 1fr; grid-template-areas: "date what" "date where" "date link"; }
  .agenda-link { justify-self: start; margin-top: .5rem; }
  .hero-foot { grid-template-columns: 1fr; gap: 1rem; }
  .foot-end { justify-self: start; justify-items: start; }
  .hero-meta { justify-content: flex-start; }
  .scroll-cue { display: none; }
}

@media (max-width: 600px) {
  .hero-photo { height: min(64svh, 560px); }
  .hero-grid { grid-template-columns: 1fr; margin-top: -8svh; row-gap: clamp(2rem, 6vh, 3rem); }
  .hero-agenda { grid-column: 1; grid-row: 2; }
  .hero-invite { grid-column: 1; grid-row: 3; }
  .hero-name .surname { padding-left: .3em; }
  .agenda-empty, .invite-note { max-width: none; }
}

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

/* ---------- Assista ----------
   Playlist editorial, não grelha de cartões. O palco (vídeo) ocupa
   dois terços; a lista é tipográfica — número em mono, título em
   serifa, ficha em mono — e o item ativo ganha a madeira.
   O topo da secção fica livre à direita do título: é aí que as
   pernas da figura do hero terminam de se dissolver. */
.watch {
  position: relative;
  padding: clamp(4rem, 12vh, 8rem) var(--gutter) clamp(4rem, 10vh, 7rem);
}
.watch-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 23vw);
  align-items: end;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.watch-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(3.4rem, 8.4vw, 8rem);
  line-height: .9;
  letter-spacing: -.025em;
}
.watch-title em { font-style: italic; color: var(--wood); }
.watch-lead {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-lede);
  line-height: 1.3;
  color: var(--ink-soft);
  max-width: 22ch;
  text-wrap: pretty;
}
.watch-lead em { font-style: italic; color: var(--ink); }

.watch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 23vw);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;   /* a lista de nove corre ao lado do palco, de cima para baixo */
}

/* O palco: 16:9 reservado desde o primeiro pintar (sem salto). O
   cartaz é um botão; ao carregar, o iframe do YouTube (domínio
   nocookie) substitui-o. */
.watch-stage { margin: 0; position: relative; z-index: 1; }
.watch-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
}
.watch-player > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.watch-poster {
  display: block;
  appearance: none; border: 0; padding: 0; margin: 0;
  background: var(--ink);
  cursor: pointer;
  color: var(--paper);
}
.watch-poster img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out), opacity var(--dur) var(--ease);
}
.watch-poster:hover img { transform: scale(1.02); }
.watch-poster.is-swapping img { opacity: 0; }
/* O glifo de play: um disco de papel com o triângulo em tinta */
.watch-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(--paper);
  color: var(--ink);
  display: grid; place-items: center;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.watch-play svg { width: 38%; height: 38%; margin-left: 8%; }
.watch-poster:hover .watch-play { transform: translate(-50%, -50%) scale(1.06); background: var(--wood); color: var(--paper); }
.watch-poster:focus-visible { outline: none; }
.watch-poster:focus-visible .watch-play { outline: 2px solid var(--paper); outline-offset: 4px; }
.watch-player iframe { border: 0; }

/* Legenda do palco: número/ficha em mono, título em serifa */
.watch-caption {
  display: grid;
  grid-template-columns: 1fr;
  padding-top: 1.1rem;
}
.watch-caption .mono { color: var(--ink-mute); }
.watch-caption-num { color: var(--wood); font-variant-numeric: tabular-nums; }
.watch-caption-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); line-height: 1.05; letter-spacing: -.015em; }
.watch-caption-meta { margin-top: .45rem; }

/* A lista: cada vídeo é um botão de linha inteira */
.watch-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-line); }
.watch-item { border-bottom: 1px solid var(--ink-line); }
.watch-item button {
  appearance: none; background: none; border: 0;
  width: 100%; text-align: left;
  /* sem numeração: a ordem lê-se pelos anos, à direita */
  display: grid; grid-template-columns: 1fr auto; column-gap: 1rem;
  padding: .75rem 0 .8rem;   /* nove itens: compacto, ainda com 3+ rem de área de toque */
  font: inherit; color: var(--ink);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.watch-item .ttl { font-family: var(--font-serif); font-size: 1.32rem; line-height: 1.06; letter-spacing: -.012em; }
.watch-item .yr  { grid-column: 2; grid-row: 1 / 3; align-self: start; padding-top: .35rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.watch-item .sub { grid-column: 1; color: var(--ink-mute); margin-top: .3rem; font-size: .66rem; }
.watch-item button:hover .ttl { color: var(--wood); }
.watch-item button:focus-visible { outline: 2px solid var(--wood); outline-offset: -2px; }
.watch-item.is-active .yr { color: var(--wood); }
.watch-item.is-active .ttl { color: var(--wood); font-style: italic; }
.watch-item.is-active button { cursor: default; }
.watch-all { margin-top: 1.4rem; }

@media (max-width: 1180px) {
  .watch-grid { grid-template-columns: minmax(0, 1fr) minmax(15rem, 30vw); }
  .watch-head { grid-template-columns: minmax(0, 1fr) minmax(0, 30vw); }
}
@media (max-width: 860px) {
  .watch { padding-top: clamp(3rem, 8vh, 5rem); }
  .watch-head { grid-template-columns: 1fr; row-gap: 1rem; }
  .watch-grid { grid-template-columns: 1fr; row-gap: 2.2rem; }
  /* o palco sangra até às margens: o vídeo ganha a largura toda */
  .watch-stage { margin-inline: calc(-1 * var(--gutter)); }
  .watch-caption { padding-inline: var(--gutter); }
  .watch-item button { padding-block: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .watch-poster img, .watch-play { transition: none; }
  .watch-poster:hover img { transform: none; }
}

/* ---------- Ouça ----------
   O capítulo silencioso: depois do palco cinematográfico, só
   tipografia, fios e um único objeto — a playlist «This Is». A
   composição inverte a de «Assista»: texto à esquerda, música à
   direita. O Spotify é conteúdo, não direção de arte: entra num
   caixilho de papel, com o tema claro, e com a altura reservada. */
.listen {
  position: relative;
  /* a base é generosa de propósito: a mão da gravura de «Conheça» sobe até aqui */
  padding: clamp(3rem, 8vh, 6rem) var(--gutter) clamp(6rem, 18vw, 18rem);
  border-top: 1px solid var(--ink-line);
  margin-top: clamp(1rem, 4vh, 3rem);
}
.listen-grid {
  display: grid;
  grid-template-columns: minmax(0, 30vw) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 6vw, 7rem);
  row-gap: clamp(2.5rem, 6vh, 4rem);
  align-items: start;
}
.listen-head { grid-column: 1; grid-row: 1; }
.listen-title {
  margin: 0 0 clamp(1.2rem, 3vh, 2rem);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(3.4rem, 8.4vw, 8rem);
  line-height: .9;
  letter-spacing: -.025em;
}
.listen-title em { font-style: italic; color: var(--wood); }
.listen-lead {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-lede);
  line-height: 1.3;
  color: var(--ink-soft);
  max-width: 24ch;
  text-wrap: pretty;
}
.listen-lead em { font-style: italic; color: var(--ink); }

.listen-stage { grid-column: 2; grid-row: 1 / 3; margin: 0; }
.listen-caption { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.listen-caption .hero-kicker { margin: 0; }
.listen-name {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.listen-name em { font-style: italic; color: var(--wood); }
/* O caixilho: altura do embed reservada; um fio de tinta à volta faz
   o widget parecer uma peça da página e não um corpo estranho. */
.listen-player {
  position: relative;
  height: 472px;   /* no desktop, a base do caixilho encontra a base das plataformas */
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  background: var(--paper-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%);
  display: inline-flex; align-items: center; gap: .55em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink-line); padding-bottom: .2em;
  white-space: nowrap;
}
.listen-fallback svg { width: .85rem; height: .85rem; }
.listen-fallback:hover { color: var(--wood); border-color: var(--wood); }
.listen-player.is-ready .listen-fallback { display: none; }

/* As outras plataformas: uma coluna de linhas mono, sem cores de
   marca. Cada linha é área de toque inteira. */
/* as plataformas alinham pela base do caixilho do Spotify */
.listen-platforms { grid-column: 1; grid-row: 2; align-self: end; }
.platform-list {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--ink-line);
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem;
  max-width: 30rem;
}
.platform-list li { border-bottom: 1px solid var(--ink-line); }
.platform-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 0;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.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(--wood); }
.platform-list a:hover svg { color: var(--wood); transform: translate(2px, -2px); }
.platform-list a:focus-visible { outline: 2px solid var(--wood); outline-offset: -2px; }

@media (max-width: 1180px) {
  .listen-grid { grid-template-columns: minmax(0, 34vw) minmax(0, 1fr); }
  .listen-player { height: 352px; }
}
@media (max-width: 860px) {
  .listen { padding-top: clamp(3rem, 7vh, 4rem); }
  .listen-grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .listen-head, .listen-stage, .listen-platforms { grid-column: 1; }
  .listen-grid { grid-template-rows: auto auto auto; }
  .listen-head { grid-row: 1; }
  .listen-stage { grid-row: 2; }
  .listen-platforms { grid-row: 3; align-self: start; }
  .listen-lead { max-width: 30ch; }
  .platform-list { max-width: none; }
  .platform-list a { padding: 1.05rem 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; border-radius: 0; background: none; }
}
@media (prefers-reduced-motion: reduce) {
  .listen-player iframe { transition: none; }
  .platform-list a:hover svg { transform: none; }
}

/* ---------- Conheça ----------
   Ritmo diferente dos dois capítulos anteriores: em vez de duas
   colunas, uma figura que atravessa a fronteira com «Ouça», sai pela
   margem esquerda e é lida aos poucos; o título vive a meia altura,
   à direita; a citação fecha em largura quase total. A gravura entra
   em multiply, como a fotografia do hero: é tinta no mesmo papel. */
.about {
  position: relative;
  /* sem fio no topo: a própria figura, a atravessar a fronteira, é a transição */
  padding: clamp(2rem, 6vh, 4rem) var(--gutter) clamp(2rem, 5vh, 4rem);
  margin-top: clamp(3rem, 10vh, 8rem);
}
.about-art {
  position: absolute; margin: 0;
  /* monumental: 96vw de largura, a mão sobe 20vw para dentro de «Ouça»,
     o violão sai pela direita do ecrã; a base dissolve-se no papel */
  top: -18vw; left: 22vw;
  width: 112vw;
  pointer-events: none;
  z-index: 0;
}
.about-art img {
  width: 100%; height: auto;
  mix-blend-mode: multiply;
  opacity: .92;
  -webkit-mask-image: linear-gradient(to bottom, #000 56%, transparent 96%),
                      linear-gradient(to right, transparent, #000 14%);
          mask-image: linear-gradient(to bottom, #000 56%, transparent 96%),
                      linear-gradient(to right, transparent, #000 14%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.about-grid {
  position: relative; z-index: 1;
  display: grid;
  /* texto à esquerda (a figura está à direita); a citação vai para a
     direita, em baixo, onde a gravura já se dissolveu */
  grid-template-columns: minmax(0, 40vw) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(2rem, 6vw, 8rem);
}
.about-head {
  grid-column: 1; grid-row: 1;
  padding-top: clamp(2rem, 6vw, 6rem);
}
.about-title {
  margin: 0 0 1.2rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(3.4rem, 8.4vw, 8rem);
  line-height: .9;
  letter-spacing: -.025em;
}
.about-title em { font-style: italic; color: var(--wood); }
.about-head .hero-kicker { margin: 0; }
.about-body {
  grid-column: 1; grid-row: 2;
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
  max-width: 36rem;
}
.about-body p { margin: 0 0 1.1em; text-wrap: pretty; }
.about-body p em { font-style: italic; color: var(--wood); }
.about-facts {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  color: var(--ink-mute);
  margin-top: 1.6rem !important;
}
.about-facts span { display: inline-flex; align-items: center; gap: .6rem; }
.about-facts span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--wood); }

.about-quote {
  /* uma frase impressa em grande escala, na base do capítulo: atravessa
     as duas colunas, recuada à esquerda, por baixo de onde a figura
     já se dissolveu. 2–3 linhas no desktop. */
  grid-column: 1 / -1; grid-row: 3;
  margin: clamp(2.5rem, 6vw, 6rem) 0 0 clamp(0rem, 18vw, 18rem);
  max-width: none;
}
.about-quote p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 1.3rem + 1.9vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.about-quote footer { margin-top: 1.2rem; color: var(--ink-mute); }

/* ---------- Histórias (continuação de Conheça) ----------
   Índice de revista, não grelha de cartões: a matéria mais recente em
   escala grande, as seguintes como linhas numeradas com miniatura. */
.stories {
  position: relative; z-index: 1;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding-top: clamp(1.5rem, 4vh, 2.5rem);
  border-top: 1px solid var(--ink-line);
}
.stories-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38vw);
  column-gap: clamp(2rem, 5vw, 6rem); align-items: start;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.stories-head .hero-kicker { margin: 0; }
.stories-lead { margin: 0; color: var(--ink-soft); max-width: 34ch; text-wrap: pretty; }
.stories-list { list-style: none; margin: 0; padding: 0; }
.story { border-top: 1px solid var(--ink-line); }
.story:last-child { border-bottom: 1px solid var(--ink-line); }
.story-link { display: grid; color: var(--ink); padding: clamp(1.4rem, 3vh, 2.2rem) 0; }
.story-media { margin: 0; overflow: hidden; background: var(--paper-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(--ink-mute); margin: 0 0 .9rem; }
.story-meta b { font-weight: 400; color: var(--wood); }
.story-title {
  margin: 0;
  font-family: var(--font-serif); font-weight: 400;
  line-height: 1.05; letter-spacing: -.02em;
  text-wrap: balance;
  transition: color var(--dur) var(--ease);
}
.story-link:hover .story-title { color: var(--wood); }
.story-excerpt { margin: .9rem 0 0; color: var(--ink-soft); max-width: 48ch; text-wrap: pretty; }
.story-go { display: inline-flex; align-items: center; gap: .55em; margin-top: 1.2rem; color: var(--ink-soft); border-bottom: 1px solid var(--ink-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(--wood); border-color: var(--wood); }
.story-link:hover .story-go svg { transform: translateX(3px); }
.story-link:focus-visible { outline: 2px solid var(--wood); outline-offset: 4px; }

/* a mais recente: imagem grande à esquerda, texto à direita */
.story-featured .story-link { grid-template-columns: minmax(0, 46vw) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 6rem); align-items: end; }
.story-featured .story-title { font-size: clamp(1.9rem, 1.3rem + 2vw, 3.4rem); }
/* as seguintes: número/data, título e resumo, miniatura pequena à direita */
.story-row .story-link { grid-template-columns: minmax(0, 1fr) 14rem; column-gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.story-row .story-media { order: 2; }
.story-row .story-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem); }
.story-row .story-excerpt { max-width: 56ch; }
.stories-all { margin-top: 1.6rem; }

@media (max-width: 1180px) {
  .about-art { top: -16vw; left: 26vw; width: 116vw; }
  .about-grid { grid-template-columns: minmax(0, 46vw) minmax(0, 1fr); }
  .about-quote { margin-left: clamp(0rem, 10vw, 10rem); }
}
@media (max-width: 860px) {
  /* leitura vertical: título → gravura (corte intencional) → ficha → bio →
     citação → histórias. O grid passa a display:contents para os filhos
     entrarem na coluna flex e poderem ser reordenados. */
  .about { display: flex; flex-direction: column; padding-top: clamp(2rem, 5vh, 3rem); margin-top: clamp(1rem, 4vh, 2rem); }
  .about-grid { display: contents; }
  .about-head { order: 1; }
  .about-art { order: 2; }
  .about-body { order: 3; }
  .about-quote { order: 4; }
  .stories { order: 5; }
  /* crop próprio: sangra até às margens e corta com força — rosto, mão e
     violão preenchem o ecrã em vez de encolher */
  .about-art {
    position: relative; top: auto; left: auto;
    width: auto; margin-inline: calc(-1 * var(--gutter));
    height: min(120vw, 680px);
    margin-top: clamp(1rem, 4vh, 2rem); margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
    overflow: hidden;
  }
  .about-art img {
    height: 100%; object-fit: cover; object-position: 72% 0;
    opacity: 1;
    -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
  }
  .listen { padding-bottom: clamp(3rem, 8vh, 5rem); }
  .about-head { padding-top: 0; }
  .about-body { margin-top: 0; max-width: none; }
  .about-quote { margin: clamp(2rem, 6vh, 3rem) 0 0; }
  .about-quote p { font-size: clamp(1.6rem, 1.2rem + 2.4vw, 2.5rem); line-height: 1.14; }
  .stories-head { grid-template-columns: 1fr; row-gap: .8rem; }
  .story-featured .story-link, .story-row .story-link { grid-template-columns: 1fr; row-gap: 1.2rem; align-items: start; }
  .story-row .story-media { order: -1; }
}
@media (max-width: 600px) {
  .about-art { height: min(132vw, 560px); }
  .about-art img { object-position: 70% 0; }
  .about-quote { margin-top: clamp(2rem, 6vh, 3rem); }
}
@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; }
}

/* ---------- Fique por perto ----------
   O fecho: título monumental à esquerda, um campo e um botão à direita.
   Sem cartão, sem fundo — o formulário é uma linha de tinta no papel. */
.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 {
  position: relative;
  padding: clamp(4rem, 12vh, 8rem) var(--gutter) clamp(4rem, 10vh, 7rem);
  border-top: 1px solid var(--ink-line);
  margin-top: clamp(3rem, 8vh, 6rem);
}
.stay-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46vw);
  column-gap: clamp(2rem, 6vw, 8rem);
  align-items: end;
}
.stay-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(3.6rem, 9.5vw, 9.5rem);
  line-height: .88;
  letter-spacing: -.03em;
}
.stay-title em { font-style: italic; color: var(--wood); }
.stay-lead {
  margin: 0 0 clamp(1.4rem, 3vh, 2rem);
  font-family: var(--font-serif);
  font-size: var(--text-lede);
  line-height: 1.3;
  color: var(--ink-soft);
  max-width: 30ch;
  text-wrap: pretty;
}
.stay-form { margin: 0; }
.stay-row {
  display: flex; align-items: stretch; gap: .8rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: .6rem;
}
.stay-input {
  flex: 1 1 auto; min-width: 0;
  appearance: none; border: 0; background: transparent;
  padding: .7rem 0;
  font: inherit; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
  color: var(--ink);
}
.stay-input::placeholder { color: var(--ink-mute); }
.stay-input:focus { outline: none; }
.stay-row:focus-within { border-color: var(--wood); }
.stay-row .btn { flex: none; align-self: center; white-space: nowrap; }
.stay-consent { margin: 1rem 0 0; color: var(--ink-mute); max-width: 52ch; text-transform: none; letter-spacing: .02em; line-height: 1.5; }
.stay-status { margin: .8rem 0 0; color: var(--wood); text-transform: none; letter-spacing: .02em; line-height: 1.5; min-height: 1em; }
.stay-status:empty { display: none; }
.stay-status a { color: var(--ink); border-bottom: 1px solid var(--ink-line); }
.stay-status a:hover { color: var(--wood); border-color: var(--wood); }
/* rota secundária para convites: pequena, no fim da coluna */
.stay-invite { margin-top: clamp(2.2rem, 5vh, 3.5rem); }
.stay-invite .hero-kicker { margin-bottom: .6rem; color: var(--ink-mute); }

/* ---------- Footer: expediente ----------
   Quatro colunas de mono sobre um fio; a wordmark do artista à esquerda,
   a chancela NVFASE à direita. */
.foot {
  padding: clamp(2rem, 4vh, 3rem) var(--gutter) clamp(2.5rem, 6vh, 4rem);
  border-top: 1px solid var(--ink-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(--ink-soft); border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.foot-list a:hover { color: var(--wood); border-color: var(--wood); }
.foot-seal { display: grid; justify-items: end; gap: .8rem; text-align: right; }
.foot-seal p { margin: 0; color: var(--ink-mute); }
/* assinatura de desenvolvimento: um grau abaixo do copyright */
.foot-seal .foot-dev { font-size: .66rem; color: rgba(23, 20, 15, .42); margin-top: .3rem; }
.foot-dev a { color: rgba(23, 20, 15, .6); border-bottom: 1px solid var(--ink-line); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.foot-dev a:hover { color: var(--wood); border-color: var(--wood); }

@media (max-width: 1180px) {
  .stay-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 52vw); }
}
@media (max-width: 860px) {
  .stay { padding-top: clamp(3rem, 8vh, 5rem); }
  .stay-grid { grid-template-columns: 1fr; row-gap: 2rem; }
  .stay-lead { max-width: 34ch; }
  .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: .5rem; border-top: 1px solid var(--ink-hair); }
  .foot-seal .foot-dev { margin-top: 1rem; }
}
@media (max-width: 600px) {
  /* o botão desce para a linha de baixo: área de toque inteira */
  .stay-row { flex-direction: column; align-items: stretch; gap: 1rem; border-bottom: 0; padding-bottom: 0; }
  .stay-input { border-bottom: 1px solid var(--ink); padding: .8rem 0; }
  .stay-input:focus { border-color: var(--wood); }
  .stay-row .btn { align-self: flex-start; }
}