/* Rodrigo Serpa — portfolio · shared stylesheet
   Single source of truth for all pages. Do not inline this into HTML files. */

:root{
  --bg:#100D0A;
  --fg:#F2ECE2;
  --fg-dim:#F2ECE299;
  --fg-faint:#F2ECE255;
  --accent:#A8794F;
  --line:#F2ECE21A;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Fraunces', serif;
  min-height:100vh;
  position:relative;
}

a{ color:inherit; }

/* grain — a property of the image, not a filter on top */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:50;
  opacity:0.028;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header / nav ---------- */
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:5vw 5vw 4vw;
  border-bottom:1px solid var(--line);
}
.wordmark{
  font-weight:300;
  font-size:clamp(14px, 1.15vw, 16px);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--fg-dim);
  text-decoration:none;
}
.site-nav{
  display:flex;
  gap:28px;
  font-family:'Space Mono', monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.site-nav a{
  color:var(--fg-dim);
  text-decoration:none;
  transition:color .3s ease;
}
.site-nav a.active,
.site-nav a:hover{ color:var(--fg); }

/* ---------- footer ---------- */
.site-footer{
  margin-top:6vw;
  padding:3vw 5vw 4vw;
  display:flex;
  justify-content:space-between;
  font-family:'Space Mono', monospace;
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--fg-dim);
}

/* ---------- INDEX grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:3px;
  padding:3vw 5vw 0;
}
.frame{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  aspect-ratio:16/9;
  display:block;
  text-decoration:none;
}
.frame .plate{
  position:absolute; inset:0;
  z-index:1;
  filter:saturate(0.85) contrast(1.05);
  transition:filter .5s ease;
}
.frame:hover .plate{ filter:saturate(1) contrast(1.1) brightness(1.05); }
.frame .vignette{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(120% 120% at 50% 40%, transparent 40%, rgba(0,0,0,0.5) 100%);
}
.frame .cap{
  position:absolute;
  left:14px; bottom:12px;
  z-index:3;
  pointer-events:none;
  font-family:'Space Mono', monospace;
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--fg-dim);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .35s ease, transform .35s ease;
}
/* sits above the iframe so the click always reaches the <a>, regardless of
   how the embedded video player handles pointer events internally */
.frame .click-catcher{
  position:absolute; inset:0;
  z-index:4;
}
.frame:hover .cap{ opacity:1; transform:translateY(0); }
.frame .cap span{ display:block; color:var(--accent); font-size:9px; margin-top:3px; }

@media (max-width:720px){
  .grid{ grid-template-columns:repeat(1, 1fr); }
}

/* ---------- project page ---------- */
.project-hero{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
}
.project-hero .plate{ position:absolute; inset:0; }

.project-meta{
  padding:4vw 5vw;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2vw 4vw;
  max-width:900px;
}
.project-title{
  font-weight:400;
  font-size:clamp(28px, 4vw, 44px);
  grid-column:1 / -1;
  margin-bottom:1vw;
}
.meta-row{ border-top:1px solid var(--line); padding-top:10px; }
.meta-label{
  font-family:'Space Mono', monospace;
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--fg-faint);
  margin-bottom:6px;
}
.meta-value{ font-size:16px; font-weight:300; color:var(--fg-dim); }

.project-nav{
  padding:2vw 5vw 5vw;
  display:flex;
  justify-content:space-between;
  font-family:'Space Mono', monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.project-nav a{ color:var(--fg-dim); text-decoration:none; transition:color .3s ease; }
.project-nav a:hover{ color:var(--fg); }

/* ---------- about ---------- */
.about-wrap{
  padding:4vw 5vw 6vw;
  display:grid;
  grid-template-columns:340px 1fr;
  gap:6vw;
  align-items:start;
}
.about-photo{
  width:100%;
  aspect-ratio:4/5;
  display:block;
  object-fit:cover;
  filter:contrast(1.05) brightness(0.97);
  position:relative;
}
.about-text p{
  font-size:clamp(16px, 1.5vw, 20px);
  font-weight:300;
  line-height:1.7;
  color:var(--fg-dim);
  margin-bottom:1.4em;
  max-width:620px;
}
.about-text .available{
  font-family:'Space Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin-top:2em;
}
@media (max-width:820px){
  .about-wrap{ grid-template-columns:1fr; }
  .about-photo{ max-width:340px; }
}

/* ---------- contact ---------- */
.contact-wrap{
  padding:8vw 5vw 10vw;
  min-height:50vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.contact-wrap a{
  display:block;
  font-size:clamp(20px, 3vw, 34px);
  font-weight:300;
  text-decoration:none;
  color:var(--fg);
  margin-bottom:0.3em;
  transition:color .3s ease;
}
.contact-wrap a:hover{ color:var(--accent); }
.contact-label{
  font-family:'Space Mono', monospace;
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--fg-faint);
  margin:1.6em 0 0.4em;
}
.contact-label:first-child{ margin-top:0; }

/* ---------- placeholder plates (stand-ins until real footage is uploaded) ---------- */
.p1{ background:linear-gradient(155deg,#2a2420,#4b3a2c 55%,#241d17); }
.p2{ background:linear-gradient(200deg,#12232a,#274a52 60%,#0d1a1e); }
.p3{ background:linear-gradient(170deg,#241a14,#5c4128 50%,#17110c); }
.p4{ background:linear-gradient(210deg,#1b2b2c,#3c5c56 55%,#101a1a); }
.p5{ background:linear-gradient(160deg,#2e211a,#6b4a2e 50%,#1a130e); }
.p6{ background:linear-gradient(190deg,#141d29,#2d3f57 55%,#0c121a); }
.p7{ background:linear-gradient(175deg,#231b13,#4a3320 50%,#160f0a); }
.p8{ background:linear-gradient(205deg,#101f24,#233f45 55%,#0a1416); }
.p9{ background:linear-gradient(165deg,#2b1f1a,#523823 50%,#19110c); }