:root {
  --ink: #17110c;
  --ink-2: #221910;
  --paper: #f6eee2;
  --muted: #b8a58f;
  --accent: #d0743f;
  --sand: #e8bd82;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; }
html { background: var(--ink); }
html.lenis, html.lenis body { height: auto; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.03em; line-height: 1.02; margin: 0; }
em { font-style: italic; color: var(--sand); }
.eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin: 0 0 20px; }
.split-line { overflow: hidden; padding-bottom: 0.06em; }

/* Topo */
.top { position: fixed; z-index: 20; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--gutter); mix-blend-mode: difference; }
.brand { font: 500 20px var(--serif); text-decoration: none; }
.brand span { color: var(--accent); }
.top-nav { display: flex; gap: 28px; font-size: 13px; }
.top-nav a, .top-cta { text-decoration: none; }
.top-cta { font-size: 13px; border: 1px solid currentColor; border-radius: 999px; padding: 8px 18px; }

/* 1. Hero */
.hero { position: relative; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.hero-media { position: absolute; inset: 0; clip-path: inset(18% 22% 18% 22% round 28px); }
.hero-media img { transform: scale(1.25); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,17,12,.15), rgba(23,17,12,.55)); }
.hero-copy { position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter); }
.hero h1 { font-size: clamp(54px, 10vw, 168px); }
.hero-hint { position: absolute; z-index: 2; bottom: 28px; left: 0; right: 0; text-align: center; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin: 0; }
.hero-hint span { display: inline-block; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(6px); } }

/* 2. Manifesto */
.statement { padding: clamp(120px, 20vh, 220px) var(--gutter) 120px; max-width: 1280px; margin: 0 auto; }
.statement-text { font: 400 clamp(30px, 4.4vw, 68px)/1.18 var(--serif); letter-spacing: -0.02em; margin: 0; }
.statement-text .word { display: inline-block; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 110px; border-top: 1px solid rgba(244,239,230,.15); padding-top: 32px; }
.facts strong { display: block; font: 400 clamp(48px, 6vw, 88px)/1 var(--serif); }
.facts span { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* 3. Capítulos */
.chapters { position: relative; height: 100svh; display: grid; grid-template-columns: 1.25fr 1fr; overflow: hidden; background: var(--ink-2); }
.chapters-media { position: relative; overflow: hidden; }
.chapter-photo { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.chapter-photo + .chapter-photo { clip-path: inset(100% 0 0 0); }
.chapter-photo img { transform: scale(1.15); }
.chapters-copy { position: relative; }
.chapter { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter); }
.chapter + .chapter { opacity: 0; }
.chapter span { font-size: 12px; letter-spacing: 0.24em; color: var(--accent); }
.chapter h2 { font-size: clamp(44px, 5vw, 84px); margin: 18px 0 22px; }
.chapter p { color: var(--muted); max-width: 380px; margin: 0; }
.chapters-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(244,239,230,.12); }
.chapters-progress span { display: block; height: 100%; background: var(--sand); transform: scaleX(0); transform-origin: left; }

/* 3 (variante). Capítulos em tela cheia, texto sobre a foto */
.chapters--full { grid-template-columns: 1fr; }
.chapters--full .chapters-media { position: absolute; inset: 0; }
.chapters--full .chapters-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(23,17,12,.75), rgba(23,17,12,0) 65%); }
.chapters--full .chapters-copy { position: absolute; inset: 0; z-index: 2; max-width: 640px; }
.chapters--full .chapter p { color: #dfe7e1; }

/* 3b. Do dia à noite */
.daynight { position: relative; height: 100svh; overflow: hidden; }
.daynight img { position: absolute; inset: 0; }
.daynight-night { opacity: 0; }
.daynight::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,17,12,0) 45%, rgba(23,17,12,.8)); }
.daynight-copy { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 12vh; }
.daynight-copy h2 { font-size: clamp(44px, 6vw, 100px); }
.daynight-night-copy { opacity: 0; }

/* 4. Galeria horizontal */
.rail { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 88px 0 48px; }
.rail-head { padding: 0 var(--gutter); margin-bottom: clamp(24px, 4vh, 48px); }
.rail-head h2 { font-size: clamp(44px, 6vw, 96px); }
.rail-track { display: flex; gap: clamp(16px, 3vw, 40px); padding: 0 var(--gutter); width: max-content; }
.rail-card { margin: 0; flex: none; }
.rail-card div { height: min(52svh, 560px); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; }
.rail-card img { transform: scale(1.06); }
.rail-card figcaption { margin-top: 14px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* 5. O lugar */
.place { position: relative; height: 120svh; overflow: hidden; display: flex; align-items: flex-end; }
.place-media { position: absolute; inset: -15% 0; }
.place-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,17,12,0) 30%, rgba(23,17,12,.85)); }
.place-copy { position: relative; z-index: 2; padding: 0 var(--gutter) 14vh; max-width: 900px; }
.place h2 { font-size: clamp(48px, 7vw, 120px); margin-bottom: 26px; }
.place-copy > p:last-child { color: #cfd8d1; max-width: 460px; margin: 0; }

/* 6. Final */
.final { padding: 160px var(--gutter) 140px; text-align: center; }
.final-media { width: min(880px, 100%); aspect-ratio: 16 / 8; margin: 0 auto 72px; overflow: hidden; border-radius: 6px; }
.final h2 { font-size: clamp(46px, 7vw, 116px); margin-bottom: 44px; }
.button { display: inline-block; background: var(--paper); color: var(--ink); text-decoration: none; border-radius: 999px; padding: 18px 36px; font-weight: 500; transition: transform .3s, background .3s; }
.button:hover { transform: translateY(-2px); background: var(--sand); }
.fine { color: var(--muted); font-size: 13px; margin-top: 22px; }
.footer { display: flex; justify-content: space-between; gap: 24px; padding: 40px var(--gutter) 48px; border-top: 1px solid rgba(244,239,230,.12); font-size: 13px; color: var(--muted); }
.footer p { margin: 0; max-width: 520px; text-align: right; }
.dot { color: var(--accent); }
.mobile-cta { display: none; }

/* Mobile */
@media (max-width: 760px) {
  .top-nav { display: none; }
  .hero-media { clip-path: inset(22% 8% 22% 8% round 20px); }
  .facts { grid-template-columns: repeat(2, 1fr); margin-top: 72px; }
  .chapters { grid-template-columns: 1fr; grid-template-rows: 55svh 45svh; }
  .chapter { justify-content: flex-start; padding-top: 32px; }
  .rail-card div { height: auto; width: 82vw; }
  .footer { flex-direction: column; }
  .footer p { text-align: left; }
  .mobile-cta { display: block; position: fixed; z-index: 30; left: 16px; right: 16px; bottom: 16px; text-align: center; background: var(--paper); color: var(--ink); text-decoration: none; border-radius: 999px; padding: 15px; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.35); transform: translateY(140%); transition: transform .4s; }
  .mobile-cta.is-visible { transform: none; }
  .top-cta { display: none; }
}

/* Sem animação: tudo visível, em ordem */
.no-motion .hero-media { clip-path: none; }
.no-motion .hero-media img, .no-motion .chapter-photo img, .no-motion .rail-card img { transform: none; }
.no-motion .chapters { height: auto; display: block; }
.no-motion .chapter-photo, .no-motion .chapter { position: relative; opacity: 1; clip-path: none; }
.no-motion .chapter-photo { height: 70svh; }
.no-motion .chapter { padding: 48px var(--gutter); }
.no-motion .rail-track { width: auto; overflow-x: auto; }
.no-motion .mobile-cta { transform: none; }
.no-motion .hero-hint span { animation: none; }
.no-motion .chapters--full .chapters-media, .no-motion .chapters--full .chapters-copy { position: relative; }
.no-motion .daynight { height: auto; }
.no-motion .daynight img { position: relative; height: 70svh; opacity: 1; }
.no-motion .daynight-copy { position: relative; padding: 32px 0; }
.no-motion .daynight-night-copy { opacity: 1; }