:root {
  --white:#FFFFFF; --cream-soft:#FAF8F4; --cream:#F2EDE5; --cream-warm:#E8E1D5;
  --ink:#1F1D1B; --ink-soft:#6B655C; --ink-mute:#948D82; --ink-line:#DDD6CA;
  --brand:#C84E1A; --brand-soft:#F4E2D6; --brand-dark:#783D2A; --brand-deep:#2A1810;
  --ff-display:"Jost","Inter",system-ui,sans-serif;
  --ff-editorial:"Fraunces",Georgia,serif;
  --ff-body:"Inter",system-ui,sans-serif;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--ff-body); font-size:16px; line-height:1.65; color:var(--ink); background:var(--cream-soft); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { font-family:var(--ff-display); font-weight:300; letter-spacing:-0.02em; line-height:1.05; margin:0; color:var(--ink); }
p { margin:0; }
::selection { background:var(--brand); color:var(--white); }

.container { width:100%; max-width:1320px; margin:0 auto; padding:0 24px; }

.site-header { position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(250,248,244,.92); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid rgba(31,29,27,.06); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.logo { display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; color:var(--brand); line-height:1; }
.logo-mark { font-family:"Fraunces",serif; font-style:italic; font-weight:400; font-size:28px; letter-spacing:-0.02em; text-transform:lowercase; color:var(--ink); transition:color .3s; }
.logo:hover .logo-mark { color:var(--brand); }
.logo-sub { font-family:var(--ff-display); font-size:8.5px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--ink-mute); margin-top:3px; }

.back-link { display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-display); font-size:11px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink); padding:8px 0; transition:gap .3s ease; }
.back-link:hover { gap:14px; }
.back-link svg { transform:rotate(180deg); }
.proj-nav .back-link svg { transform:none; }

.proj-hero { position:relative; height:78vh; min-height:560px; overflow:hidden; background:var(--cream-warm); }
.proj-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.proj-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(31,29,27,.32) 0%, rgba(31,29,27,0) 35%, rgba(31,29,27,0) 60%, rgba(31,29,27,.55) 100%); z-index:1; }
.proj-hero-content { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:64px 0 56px; }
.proj-eyebrow { font-family:var(--ff-display); font-size:11px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:rgba(255,255,255,.9); display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.proj-eyebrow::before { content:""; width:32px; height:1px; background:rgba(255,255,255,.6); }
.proj-hero h1 { color:var(--white); font-size:clamp(44px,5.6vw,82px); font-weight:300; letter-spacing:-0.025em; line-height:1.03; max-width:14ch; }
.proj-hero h1 em { font-family:var(--ff-editorial); font-style:italic; font-weight:400; color:rgba(255,255,255,.95); }

.proj-intro { padding:clamp(80px,10vw,140px) 0; background:var(--cream-soft); }
.proj-intro-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:clamp(48px,6vw,96px); align-items:start; }
.proj-facts { position:sticky; top:120px; }
.proj-facts dl { margin:0; display:flex; flex-direction:column; gap:24px; }
.proj-facts dt { font-family:var(--ff-display); font-size:10.5px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:6px; }
.proj-facts dd { margin:0; font-family:var(--ff-display); font-size:16px; font-weight:400; color:var(--ink); padding-bottom:24px; border-bottom:1px solid var(--ink-line); }
.proj-facts dd:last-child { border-bottom:none; }

.proj-narrative h2 { font-family:var(--ff-display); font-size:clamp(28px,3.2vw,42px); font-weight:300; letter-spacing:-0.02em; line-height:1.15; margin-bottom:32px; }
.proj-narrative h2 em { font-family:var(--ff-editorial); font-style:italic; font-weight:400; }
.proj-narrative p { color:var(--ink-soft); font-size:17px; line-height:1.7; max-width:62ch; margin-bottom:24px; }

.proj-gallery { padding:clamp(40px,6vw,80px) 0 clamp(80px,10vw,140px); background:var(--cream-soft); }
.gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(24px,3vw,40px); }
.gallery-item { position:relative; overflow:hidden; background:var(--cream); }
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s cubic-bezier(.2,.8,.2,1); }
.gallery-item:hover img { transform:scale(1.03); }
.gallery-caption { display:block; margin-top:16px; font-family:var(--ff-display); font-size:11px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-mute); }

.g1 { grid-column:span 7; aspect-ratio:4/3; }
.g2 { grid-column:span 5; aspect-ratio:4/5; padding-top:clamp(40px,6vw,80px); }
.g3 { grid-column:span 5; aspect-ratio:4/3; }
.g4 { grid-column:span 7; aspect-ratio:16/10; padding-top:clamp(20px,3vw,48px); }
.g5 { grid-column:span 6; aspect-ratio:4/5; }
.g6 { grid-column:span 6; aspect-ratio:4/5; padding-top:clamp(40px,6vw,80px); }

/* layouts pra galerias menores */
.gallery-2items .g1 { grid-column:span 7; aspect-ratio:4/3; }
.gallery-2items .g2 { grid-column:span 5; aspect-ratio:4/5; }

.gallery-3items .g1 { grid-column:span 12; aspect-ratio:16/9; }
.gallery-3items .g2 { grid-column:span 6; aspect-ratio:4/3; padding-top:clamp(40px,6vw,80px); }
.gallery-3items .g3 { grid-column:span 6; aspect-ratio:4/3; padding-top:0; }

.gallery-5items .g5 { grid-column:span 12; aspect-ratio:16/9; padding-top:clamp(20px,3vw,48px); }

.g2, .g4, .g6 { display:flex; flex-direction:column; }
.g2 .gallery-item, .g4 .gallery-item, .g6 .gallery-item { flex:1; }

.proj-cta { padding:clamp(80px,10vw,140px) 0; background:var(--brand-deep); color:var(--white); text-align:center; }
.proj-cta h2 { color:var(--white); font-size:clamp(32px,4vw,56px); font-weight:300; letter-spacing:-0.02em; line-height:1.1; max-width:22ch; margin:0 auto 24px; }
.proj-cta h2 em { font-family:var(--ff-editorial); font-style:italic; font-weight:400; color:var(--brand); }
.proj-cta p { color:rgba(255,255,255,.65); font-size:17px; max-width:48ch; margin:0 auto 40px; }
.proj-cta-buttons { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:18px 32px; font-family:var(--ff-display); font-weight:500; font-size:13px; letter-spacing:0.2em; text-transform:uppercase; transition:all .3s ease; border:1px solid transparent; }
.btn-primary { background:var(--brand); color:var(--white); }
.btn-primary:hover { background:var(--white); color:var(--brand); }
.btn-ghost-light { background:transparent; color:var(--white); border-color:rgba(255,255,255,.4); }
.btn-ghost-light:hover { background:var(--white); color:var(--ink); border-color:var(--white); }

.proj-nav { padding:64px 0; background:var(--cream); border-top:1px solid var(--ink-line); display:flex; justify-content:center; }

footer { background:var(--brand-deep); color:rgba(255,255,255,.7); padding:48px 0 24px; font-size:13px; text-align:center; }
footer a { color:rgba(255,255,255,.85); }

@media (max-width:1024px) {
  .proj-intro-grid { grid-template-columns:1fr; }
  .proj-facts { position:static; }
  .gallery-grid { grid-template-columns:repeat(6,1fr); }
  .g1, .g4 { grid-column:span 6; padding-top:0 !important; }
  .g2, .g3, .g5, .g6 { grid-column:span 3; padding-top:0 !important; }
  .gallery-3items .g1 { grid-column:span 6; }
  .gallery-3items .g2, .gallery-3items .g3 { grid-column:span 3; padding-top:0; }
  .gallery-5items .g5 { grid-column:span 6; padding-top:0; }
}
@media (max-width:720px) {
  .proj-hero { height:88vh; min-height:520px; }
  .proj-hero-content { padding:100px 0 32px; justify-content:flex-end; }
  .proj-hero h1 { font-size:clamp(38px,11vw,52px); }
  .gallery-grid { grid-template-columns:1fr; gap:32px; }
  .gallery-item, .g1, .g2, .g3, .g4, .g5, .g6 { grid-column:1/-1 !important; aspect-ratio:4/3 !important; padding-top:0 !important; }
  .proj-cta-buttons .btn { width:100%; }
}
