/* =========================================================
   Versão C: clara, editorial e com movimento.
   Branco quente, Instrument Serif grande, fotos que se expandem ao rolar.
   Tudo aparece mesmo sem JavaScript: as animações só escondem o que vão revelar.
   ========================================================= */
:root {
  --bg: #f8f5ef;
  --warm: #efe9de;
  --ink: #141210;
  --dim: #6b655c;
  --faint: #9a9388;
  --line: #e2dbce;
  --gold: #a88858;
  --gold-deep: #86683a;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Manrope", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --pad: clamp(20px, 4.4vw, 72px);
  --ease: cubic-bezier(.23, 1, .32, 1);
}
* { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip; min-width: 320px;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: #a8885855; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.bg-deco, .shutter-flash { display: none !important; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
em { font-style: italic; }

/* ---------- peças de texto ---------- */
.c-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.c-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.c-lead { color: var(--dim); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7; max-width: 44ch; }
.ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ln-in { display: block; }
.gold { color: var(--gold-deep); }

/* texto que rola pra cima no hover (botões e menu) */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.roll > span { display: block; transition: transform .55s var(--ease); }
.roll::after { content: attr(data-t); position: absolute; left: 0; right: 0; top: 100%; transition: transform .55s var(--ease); }
a:hover .roll > span, a:hover .roll::after, button:hover .roll > span, button:hover .roll::after { transform: translateY(-100%); }

.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 30px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .01em; transition: background .3s;
}
.c-btn:hover { background: var(--gold-deep); }
.c-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease); }
.c-link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- menu ---------- */
.c-nav {
  position: fixed; z-index: 60; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--pad) 14px; border-bottom: 1px solid transparent;
  transition: background .4s, border-color .4s, transform .6s var(--ease);
}
.c-nav.solid { background: #f8f5efe6; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.c-nav.hide { transform: translateY(-105%); }
.c-logo { font-family: var(--serif); font-size: 26px; line-height: 1; letter-spacing: -.01em; }
.c-menu { display: none; gap: 30px; margin-left: auto; font-size: 13px; font-weight: 500; color: var(--dim); }
.c-menu a { line-height: 1.4; }
.c-menu a:hover { color: var(--ink); }
.c-pill { margin-left: auto; display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; transition: background .3s; }
.c-pill:hover { background: var(--gold-deep); }

/* ---------- abertura (contador) e cortina entre páginas ---------- */
.c-loader {
  position: fixed; inset: 0; z-index: 200; background: var(--ink); color: var(--bg); display: flex; align-items: flex-end; justify-content: space-between;
  padding: var(--pad); pointer-events: none;
}
.c-loader-name { font-family: var(--serif); font-size: clamp(44px, 9vw, 150px); line-height: .9; letter-spacing: -.02em; }
.c-loader-name em { color: #d9c08f; }
.c-loader-n { font-family: var(--mono); font-size: clamp(14px, 1.4vw, 18px); letter-spacing: .1em; color: #d9c08f; }
.c-curtain { position: fixed; inset: 0; z-index: 190; background: var(--ink); transform: translateY(100%); pointer-events: none; }

/* ---------- cursor (só com mouse) ---------- */
.c-cursor {
  position: fixed; left: 0; top: 0; z-index: 180; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink);
  pointer-events: none; display: grid; place-items: center; transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background .3s;
}
.c-cursor span { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #fff; opacity: 0; transition: opacity .25s; white-space: nowrap; }
.c-cursor.big { width: 86px; height: 86px; margin: -43px 0 0 -43px; background: var(--ink); }
.c-cursor.big span { opacity: 1; }
.c-cursor.hidden { opacity: 0; }

/* ---------- topo ---------- */
.c-hero { padding-top: calc(108px + env(safe-area-inset-top, 0px)); }
.c-hero-top { max-width: 1680px; margin: 0 auto; padding: 0 var(--pad); display: grid; gap: clamp(18px, 2.4vw, 30px); }
.c-title { font-family: var(--serif); font-weight: 400; font-size: clamp(54px, 10.6vw, 196px); line-height: .9; letter-spacing: -.032em; }
.c-title em { color: var(--gold-deep); }
.c-hero-row { display: grid; gap: 20px; }
.c-hero-media { position: relative; margin-top: clamp(28px, 4vw, 56px); padding: 0 var(--pad); }
.c-hero-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--warm); }
.c-hero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 40%; transform-origin: 50% 50%; }
.c-hero-cap { display: none; }
.c-scroll { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.c-scroll i { position: relative; width: 1px; height: 38px; background: var(--line); overflow: hidden; }
.c-scroll i::after { content: ""; position: absolute; inset: 0; background: var(--ink); animation: desce 2s var(--ease) infinite; }
@keyframes desce { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

/* ---------- frase de abertura (palavras acendem ao rolar) ---------- */
.c-intro { max-width: 1500px; margin: 0 auto; padding: clamp(96px, 13vw, 210px) var(--pad); display: grid; gap: 30px; }
.c-statement { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5.3vw, 92px); line-height: 1.04; letter-spacing: -.022em; text-wrap: pretty; }
.c-statement em { color: var(--gold-deep); }
.c-intro-foot { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; justify-content: space-between; }
.c-sign { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--dim); }
.c-sign img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.c-sign strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--ink); line-height: 1.1; }

/* ---------- cabeçalho das seções ---------- */
.c-head { max-width: 1680px; margin: 0 auto; padding: 0 var(--pad); display: grid; gap: 18px; margin-bottom: clamp(30px, 4vw, 56px); }
.c-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 7.4vw, 128px); line-height: .92; letter-spacing: -.03em; }
.c-head h2 em { color: var(--gold-deep); }

/* ---------- trabalhos: parede de painéis ---------- */
.c-works { padding-bottom: clamp(90px, 12vw, 180px); }
.c-wall { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 0 var(--pad); scrollbar-width: none; overscroll-behavior-x: contain; }
.c-wall::-webkit-scrollbar { display: none; }
.c-panel { position: relative; flex: none; width: 76vw; max-width: 400px; aspect-ratio: 3 / 4.5; overflow: hidden; scroll-snap-align: start; isolation: isolate; background: var(--warm); }
.c-panel img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.c-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#0000 40%, #0e0c0ad9); }
.c-panel:hover img { transform: scale(1.06); }
.c-wall.anim .c-panel img { transition: none; }
.c-panel-n { position: absolute; top: 16px; left: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: #fff; }
.c-panel-meta { position: absolute; left: 20px; right: 20px; bottom: 22px; display: grid; gap: 8px; color: #fff; }
.c-panel-meta small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #ecdcb8; }
.c-panel-meta strong { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 8vw, 52px); line-height: .96; letter-spacing: -.015em; }
.c-panel-meta strong em { color: #ecdcb8; }
.c-panel-go { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.c-panel-go b { font-weight: 400; transition: transform .4s var(--ease); }
.c-panel:hover .c-panel-go b { transform: translateX(6px); }

/* ---------- faixa que corre ---------- */
.c-marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(18px, 2.4vw, 32px) 0; }
.c-marquee-track { display: flex; width: max-content; animation: corre 38s linear infinite; }
.c-marquee-track span { display: inline-flex; align-items: center; gap: .5em; padding-right: .5em; font-family: var(--serif); font-size: clamp(40px, 7vw, 120px); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.c-marquee-track span em { color: var(--gold-deep); }
.c-marquee-track i { font-style: normal; font-size: .4em; color: var(--gold); }
@keyframes corre { to { transform: translateX(-50%); } }

/* ---------- momentos: fotos em fila (no computador, a fila anda com a rolagem) ---------- */
.c-moments { padding: clamp(90px, 12vw, 170px) 0; overflow: hidden; }
.c-moments-view { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); }
.c-moments-view::-webkit-scrollbar { display: none; }
.c-track { display: flex; align-items: flex-end; gap: clamp(14px, 1.6vw, 26px); padding: 0 var(--pad); width: max-content; }
.c-m { flex: none; display: grid; gap: 12px; scroll-snap-align: start; }
.c-m-img { overflow: hidden; background: var(--warm); }
.c-m img { height: min(58svh, 520px); width: auto; transition: transform 1.2s var(--ease); }
.c-m:nth-child(even) img { height: min(46svh, 420px); }
.c-m:hover img { transform: scale(1.04); }
.c-m figcaption { display: flex; justify-content: space-between; gap: 18px; font-size: 13px; color: var(--dim); }
.c-m figcaption strong { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ink); line-height: 1.1; }
.c-m figcaption small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); align-self: end; }

/* ---------- vídeos ---------- */
.c-videos { background: var(--warm); padding: clamp(90px, 12vw, 170px) 0; }
.c-reel { display: flex; gap: clamp(14px, 1.6vw, 26px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 0 var(--pad); scrollbar-width: none; align-items: flex-end; max-width: 1680px; margin: 0 auto; }
.c-reel::-webkit-scrollbar { display: none; }
.c-reel-card { flex: none; width: clamp(210px, 62vw, 300px); display: grid; gap: 14px; scroll-snap-align: start; }
.c-reel-card.wide { width: clamp(300px, 86vw, 640px); }
.c-reel-img { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; background: #e4dccd; }
.c-reel-card.wide .c-reel-img { aspect-ratio: 16 / 9; }
.c-reel-img img, .c-reel-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .5s; }
.c-reel-img video { opacity: 0; }
.c-reel-card.tocando .c-reel-img video { opacity: 1; }
.c-reel-card:hover .c-reel-img img { transform: scale(1.04); }
.c-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: #f8f5efeb; color: var(--ink); font-size: 20px; transition: opacity .4s, transform .5s var(--ease);
}
.c-play .icon { fill: currentColor; stroke: none; margin-left: 3px; }
.c-reel-card.tocando .c-play { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
.c-reel-meta { display: grid; justify-items: start; gap: 10px; }
.c-reel-meta small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.c-reel-meta strong { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; }
.c-reel-meta .c-link { flex: none; }

/* ---------- sobre ---------- */
.c-about { max-width: 1680px; margin: 0 auto; padding: clamp(90px, 12vw, 170px) var(--pad); display: grid; gap: 40px; }
.c-portrait { overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink); max-width: 460px; }
.c-portrait img { width: 100%; height: 115%; object-fit: cover; }
.c-about-copy { display: grid; gap: 24px; align-content: start; }
.c-about-copy h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6.4vw, 104px); line-height: .94; letter-spacing: -.03em; }
.c-about-copy h2 em { color: var(--gold-deep); }
.c-services { border-top: 1px solid var(--line); margin-top: 10px; }
.c-services li { display: grid; grid-template-columns: 44px 1fr; gap: 6px 16px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.c-services li > span:first-child { font-family: var(--mono); font-size: 12px; color: var(--gold-deep); }
.c-services strong { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1; }
.c-services p { grid-column: 2; color: var(--dim); font-size: 14.5px; }

/* ---------- contato ---------- */
.c-contact { max-width: 1680px; margin: 0 auto; padding: clamp(90px, 12vw, 180px) var(--pad); display: grid; gap: 30px; justify-items: start; }
.c-contact h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 11.4vw, 210px); line-height: .88; letter-spacing: -.035em; }
.c-contact h2 em { color: var(--gold-deep); }
.c-contact-row { display: grid; gap: 30px; width: 100%; }
.c-magnet {
  position: relative; width: clamp(150px, 15vw, 210px); aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.35; padding: 20px; transition: background .4s;
}
.c-magnet:hover { background: var(--gold-deep); }
.c-magnet > span { display: grid; justify-items: center; gap: 8px; }
.c-magnet .icon { display: block; font-size: 24px; }

/* ---------- rodapé ---------- */
.c-foot { border-top: 1px solid var(--line); padding: 28px var(--pad) calc(26px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.c-foot-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; color: var(--dim); font-size: 13px; }
.c-foot-links a:hover { color: var(--ink); }
.c-wordmark { font-family: var(--serif); font-size: clamp(64px, 16.4vw, 300px); line-height: .82; letter-spacing: -.045em; white-space: nowrap; margin-top: clamp(30px, 5vw, 70px); }
.c-wordmark em { color: var(--gold-deep); }

/* =========================================================
   PÁGINA DE UM TRABALHO
   ========================================================= */
.w-hero { position: relative; height: 100svh; min-height: 520px; overflow: hidden; isolation: isolate; color: #fff; }
.w-hero-img { position: absolute; inset: 0; z-index: -2; }
.w-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.w-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#0e0c0a73, #0e0c0a00 28%, #0e0c0a00 42%, #0e0c0ae6); }
.w-meta, .w-title { text-shadow: 0 2px 18px #0000004d; }
.w-hero-txt { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(28px, 5vw, 64px); display: grid; gap: 16px; }
.w-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #ecdcb8; }
.w-title { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 11vw, 200px); line-height: .88; letter-spacing: -.035em; }
.w-title em { color: #ecdcb8; }
.c-page .c-nav:not(.solid) { color: #fff; }
.c-page .c-nav:not(.solid) .c-menu { color: #ffffffd9; }
.c-page .c-nav:not(.solid) .c-pill { background: #fff; color: var(--ink); }

.w-video { max-width: 1680px; margin: 0 auto; padding: 0 var(--pad) clamp(90px, 12vw, 170px); display: grid; gap: 34px; justify-items: center; }
.w-video-box { position: relative; width: 100%; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.w-video-box video { width: 100%; height: 100%; object-fit: contain; }
.w-video.vertical .w-video-box { aspect-ratio: 9 / 16; width: min(100%, 380px, calc(80svh * 9 / 16)); }
.w-video-txt { display: grid; gap: 18px; justify-items: start; max-width: 520px; }
.w-video-txt h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6vw, 96px); line-height: .94; letter-spacing: -.03em; }
.w-video-txt h2 em { color: var(--gold-deep); }

.w-fotos { padding-bottom: clamp(90px, 12vw, 170px); }
.w-chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1680px; margin: 0 auto 26px; padding: 0 var(--pad); }
.w-chip { min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--dim); transition: background .3s, color .3s, border-color .3s; }
.w-chip:hover { border-color: var(--ink); color: var(--ink); }
.w-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.w-gallery { max-width: 1680px; margin: 0 auto; padding: 0 var(--pad); columns: 2; column-gap: 10px; }
.w-item { display: block; width: 100%; margin: 0 0 10px; break-inside: avoid; overflow: hidden; background: var(--warm); }
.w-item img { width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.w-item:hover img { transform: scale(1.035); }

.w-next { position: relative; display: block; height: min(80svh, 720px); overflow: hidden; isolation: isolate; color: #fff; }
.w-next img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 120%; object-fit: cover; transition: transform 1.4s var(--ease); }
.w-next::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #0e0c0a8c; transition: background .6s; }
.w-next:hover::after { background: #0e0c0a66; }
.w-next-txt { position: absolute; inset: auto var(--pad) clamp(30px, 5vw, 70px); display: grid; gap: 14px; }
.w-next-txt small { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #ecdcb8; }
.w-next-txt strong { font-family: var(--serif); font-weight: 400; font-size: clamp(54px, 10vw, 180px); line-height: .88; letter-spacing: -.035em; }
.w-next-txt strong em { color: #ecdcb8; }

/* foto ampliada (marcação do base.js) */
.lightbox { position: fixed; inset: 0; z-index: 170; background: #f8f5effa; display: grid; place-items: center; padding: 60px 14px; }
.lightbox figure { display: grid; gap: 12px; justify-items: center; }
.lightbox figure img { max-width: min(92vw, 1400px); max-height: 82svh; width: auto; height: auto; }
.lightbox figcaption { display: flex; gap: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--dim); }
.lightbox figcaption em { font-style: normal; }
.lightbox-close, .lightbox-arrow {
  position: absolute; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); font-size: 20px; color: var(--ink);
}
.lightbox-close { top: 16px; right: 16px; }
.lightbox-arrow { top: 50%; transform: translateY(-50%); }
.lightbox-arrow.previous { left: 14px; }
.lightbox-arrow.next { right: 14px; }

/* =========================================================
   COMPUTADOR
   ========================================================= */
@media (min-width: 900px) {
  .c-menu { display: flex; }
  .c-pill { margin-left: 0; }
  .c-title .ln:nth-child(2) { padding-left: 10vw; }
  .c-hero-row { grid-template-columns: 1fr auto; align-items: end; }
  .c-hero-row .c-lead { max-width: 40ch; }
  /* a foto começa emoldurada e abre até a tela inteira ao rolar (o JS anima) */
  .c-hero-media { height: 100svh; margin-top: clamp(24px, 3vw, 44px); padding: 0; }
  .c-hero-frame { position: absolute; inset: 0; aspect-ratio: auto; clip-path: inset(12% 26% 12% 26%); }
  .c-hero-cap { display: grid; gap: 6px; position: absolute; top: 50%; transform: translateY(-50%); width: 20%; font-size: 13px; color: var(--dim); }
  .c-hero-cap strong { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.05; color: var(--ink); }
  .c-hero-cap small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
  .c-hero-cap.l { left: var(--pad); }
  .c-hero-cap.r { right: var(--pad); text-align: right; justify-items: end; }

  .c-head { grid-template-columns: 1fr auto; align-items: end; }
  .c-head .c-eyebrow { grid-column: 1 / -1; }
  .c-head .c-lead { max-width: 34ch; padding-bottom: .6em; }

  .c-wall { overflow: visible; gap: 10px; height: min(78svh, 760px); min-height: 500px; }
  .c-panel { flex: 1 1 0; width: auto; max-width: none; aspect-ratio: auto; height: 100%; transition: flex-grow .9s var(--ease); }
  .c-wall:hover .c-panel { flex-grow: .75; }
  .c-wall .c-panel:hover { flex-grow: 2; }
  .c-panel-meta strong { font-size: clamp(36px, 3.6vw, 60px); }

  /* a seção fica presa enquanto a fila anda: título + fotos cabem numa tela */
  .c-moments { padding-top: clamp(60px, 7svh, 90px); padding-bottom: clamp(60px, 7svh, 90px); min-height: 100svh; }
  .c-moments .c-head { margin-bottom: clamp(20px, 3svh, 40px); }
  .c-moments .c-head h2 { font-size: clamp(46px, min(6.4vw, 9svh), 112px); }
  .c-moments-view { overflow: visible; }
  .c-m img { height: min(50svh, 560px); }
  .c-m:nth-child(even) img { height: min(40svh, 440px); }
  .c-m:nth-child(3n) { margin-bottom: 6svh; }

  .c-reel-card { width: clamp(180px, 19vw, 320px); }
  .c-reel-card.wide { width: clamp(330px, 36vw, 660px); }

  .c-about { grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr); gap: clamp(50px, 8vw, 140px); align-items: center; }
  .c-contact-row { grid-template-columns: 1fr auto; align-items: center; }
  .c-foot-links { font-size: 14px; }

  .w-gallery { columns: 3; column-gap: 12px; }
  .w-item { margin-bottom: 12px; }
  .w-video { grid-template-columns: auto minmax(0, 480px); justify-content: center; align-items: center; gap: clamp(50px, 7vw, 120px); }
  .w-video:not(.vertical) { grid-template-columns: 1fr; justify-items: start; }
  .w-video:not(.vertical) .w-video-box { max-width: 1400px; }
}
@media (min-width: 1500px) { .w-gallery { columns: 4; } }

/* =========================================================
   ELEMENTOS DE FUNDO: linhas-guia de diagramação, letras vazadas gigantes,
   diafragma em traço, selo girando, polaroides, cantos de visor e REC.
   Tudo em traço fino e tons de areia: dá vida sem sujar (nada de granulado).
   ========================================================= */
:root { --gl: #e7e0d3; --sand: #f0e9dd; --sand-2: #e9dfcf; --ghost: #d8ccb6; }
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--gl), var(--gl)) var(--pad) 0 / 1px 100% no-repeat,
    linear-gradient(var(--gl), var(--gl)) calc(100% - var(--pad)) 0 / 1px 100% no-repeat,
    linear-gradient(var(--gl), var(--gl)) 50% 0 / 1px 100% no-repeat;
}
section { position: relative; isolation: isolate; }

/* letras vazadas gigantes atrás das seções */
.c-ghost {
  position: absolute; z-index: -1; pointer-events: none; white-space: nowrap; user-select: none;
  font-family: var(--serif); font-size: clamp(120px, 24vw, 420px); line-height: .78; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px var(--ghost);
}
.c-ghost em { font-style: italic; }

/* diafragma em traço fino, girando devagar */
.c-aperture { position: absolute; z-index: -1; pointer-events: none; width: clamp(280px, 42vw, 640px); aspect-ratio: 1; fill: none; stroke: var(--gold); stroke-width: .06; opacity: .32; animation: gira 90s linear infinite; }
.c-aperture.fino { stroke-width: .03; opacity: .5; }
@keyframes gira { to { transform: rotate(360deg); } }

/* selo redondo com texto girando */
.c-badge { position: absolute; width: 132px; aspect-ratio: 1; pointer-events: none; }
.c-badge svg { width: 100%; height: 100%; animation: gira 26s linear infinite; }
.c-badge text { font-family: var(--mono); font-size: 9.6px; letter-spacing: .32em; fill: var(--gold-deep); text-transform: uppercase; }
.c-badge .icon { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; color: var(--gold); stroke-width: 1.1; }

/* polaroides soltas no topo */
.c-polaroid { position: absolute; display: none; background: #fff; padding: 8px 8px 30px; box-shadow: 0 24px 40px -22px #2a201466, 0 2px 6px #2a20141a; pointer-events: none; }
.c-polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.c-polaroid small { position: absolute; left: 10px; bottom: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

/* cantos de visor e REC com timecode */
.c-vf { position: absolute; inset: clamp(18px, 3vw, 40px); pointer-events: none; z-index: -1; }
.c-vf i { position: absolute; width: 34px; height: 34px; border: 1.5px solid var(--gold); opacity: .55; }
.c-vf i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.c-vf i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.c-vf i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.c-vf i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.c-rec { position: absolute; top: clamp(30px, 4vw, 56px); right: clamp(30px, 4vw, 60px); display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--dim); }
.c-rec i { width: 8px; height: 8px; border-radius: 50%; background: #c0392b; animation: pisca 1.6s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: .2; } }

/* tons de areia alternando entre as seções */
.c-works { background: var(--sand); padding-top: clamp(90px, 12vw, 170px); }
.c-works .c-ghost { top: clamp(10px, 2vw, 30px); right: -2vw; }
.c-intro .c-aperture { right: -8vw; top: 50%; margin-top: calc(clamp(280px, 42vw, 640px) / -2); }
.c-moments-view { position: relative; padding: 22px 0; }
.c-moments-view::before, .c-moments-view::after { /* furos de filme em traço claro */
  content: ""; position: absolute; left: 0; right: 0; height: 8px; pointer-events: none;
  background: linear-gradient(90deg, var(--sand-2) 0 14px, #0000 14px 30px) 0 0 / 30px 8px repeat-x;
}
.c-moments-view::before { top: 0; }
.c-moments-view::after { bottom: 0; }
.c-moments .c-ghost { bottom: -2vw; left: -1vw; }
.c-videos { background: var(--sand-2); }
.c-about .c-portrait-wrap { position: relative; max-width: 460px; }
.c-about .c-portrait-wrap::before { content: ""; position: absolute; inset: 20px -20px -20px 20px; border: 1px solid var(--gold); opacity: .6; z-index: -1; }
.c-about .c-ghost { top: 4%; right: -3vw; }
.c-contact { background: var(--sand); max-width: none; padding-left: max(var(--pad), calc((100vw - 1680px) / 2 + var(--pad))); padding-right: max(var(--pad), calc((100vw - 1680px) / 2 + var(--pad))); overflow: hidden; }
.c-contact .c-aperture { right: -10vw; bottom: -14vw; }
.c-magnet-wrap { position: relative; justify-self: start; }
.c-magnet-wrap::before, .c-magnet-wrap::after { content: ""; position: absolute; inset: -18px; border-radius: 50%; border: 1px solid var(--gold); opacity: .45; pointer-events: none; animation: onda 3.2s var(--ease) infinite; }
.c-magnet-wrap::after { inset: -40px; opacity: .25; animation-delay: 1.1s; }
@keyframes onda { 0% { transform: scale(.92); opacity: 0; } 30% { opacity: .5; } 100% { transform: scale(1.12); opacity: 0; } }
.w-fotos .c-ghost { top: clamp(-30px, -2vw, 0px); right: -2vw; }
.w-fotos { padding-top: clamp(40px, 6vw, 90px); }

@media (min-width: 900px) {
  body::after {
    background:
      linear-gradient(var(--gl), var(--gl)) var(--pad) 0 / 1px 100% no-repeat,
      linear-gradient(var(--gl), var(--gl)) calc(100% - var(--pad)) 0 / 1px 100% no-repeat,
      linear-gradient(var(--gl), var(--gl)) 25% 0 / 1px 100% no-repeat,
      linear-gradient(var(--gl), var(--gl)) 50% 0 / 1px 100% no-repeat,
      linear-gradient(var(--gl), var(--gl)) 75% 0 / 1px 100% no-repeat;
  }
  .c-hero-top { position: relative; }
  .c-badge { right: var(--pad); top: -6px; width: 150px; }
  /* polaroides à direita, na altura da segunda linha do título (onde sobra espaço) */
  .c-hero-row .c-scroll { display: none; }
  .c-polaroid { width: clamp(120px, 10vw, 180px); z-index: 2; }
  .c-polaroid.p1 { right: calc(var(--pad) + clamp(110px, 9vw, 170px)); bottom: 10px; rotate: -7deg; }
  .c-polaroid.p2 { right: var(--pad); bottom: -70px; rotate: 6deg; }
  .c-magnet-wrap { justify-self: end; }
}
@media (max-width: 899px) {
  .c-badge { display: none; }
}
@media (min-width: 1200px) { .c-polaroid { display: block; } }

@media (prefers-reduced-motion: reduce) {
  .c-marquee-track, .c-scroll i::after, .c-aperture, .c-badge svg, .c-magnet-wrap::before, .c-magnet-wrap::after, .c-rec i { animation: none; }
}