/* ============================================================
   PEDRO & EMI — shared design system
   Cinema black · bold grotesk · filmic high-contrast
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Archivo+Expanded:wght@500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Syne:wght@600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Unbounded:wght@600;700;800;900&family=Climate+Crisis&display=swap');

:root{
  /* ---- color (themeable) ---- */
  --bg:        #0a0a0b;
  --bg-2:      #141416;
  --bg-3:      #1b1b1e;
  --fg:        #f2f0ea;
  --muted:     rgba(242,240,234,.52);
  --faint:     rgba(242,240,234,.30);
  --line:      rgba(242,240,234,.14);
  --line-2:    rgba(242,240,234,.07);
  --accent:    #00d1c3;                    /* selected: teal */
  --accent-fg: #0a0a0b;

  /* ---- type ---- */
  --display: 'Unbounded', 'Archivo', system-ui, sans-serif;
  --sans:    'Archivo', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: cubic-bezier(.16,1,.3,1);

  --pad: clamp(20px, 4.5vw, 64px);
  --nav-h: 78px;
}

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

html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--accent); color:var(--accent-fg); }

/* film grain overlay ---------------------------------------- */
.grain{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.no-grain .grain{ display:none; }

/* ---------- shared type utilities ---------- */
.display{
  font-family:var(--display);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.kicker{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.mono{ font-family:var(--mono); }
.accent{ color:var(--accent); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 var(--pad);
  mix-blend-mode:difference;       /* legible on any frame */
  color:#fff;
}
.nav.solid{ mix-blend-mode:normal; background:rgba(10,10,11,.55); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav__brand{
  grid-column:2; justify-self:center;
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size:18px;
  display:flex; align-items:center; gap:.55em;
  white-space:nowrap;
}
.nav__brand .dot{ color:var(--accent); }
/* flanking nav links: Work pinned left, About pinned right */
.nav__side{
  font-family:var(--mono);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  position:relative; padding:6px 0; opacity:.85;
  transition:opacity .3s, letter-spacing .4s var(--ease);
}
.nav__side--l{ grid-column:1; justify-self:start; }
.nav__side--r{ grid-column:3; justify-self:end; }
.nav__side:hover{ opacity:1; letter-spacing:.28em; }
.nav__side::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__side:hover::after,
.nav__side[aria-current="page"]::after{ transform:scaleX(1); }
.nav__side[aria-current="page"]{ opacity:1; }

/* ============================================================
   PLACEHOLDER FRAMES  (drop real media here)
   ============================================================ */
.frame{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.022) 0 2px,
      transparent 2px 9px),
    linear-gradient(145deg, var(--f1,#1a1a1d), var(--f2,#101012));
  isolation:isolate;
}
.frame::after{
  content:attr(data-label);
  position:absolute; left:14px; bottom:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(242,240,234,.42);
  white-space:nowrap; pointer-events:none;
}
.frame--play::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:62px; height:62px; border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:
    linear-gradient(transparent,transparent) ,
    conic-gradient(from 0deg, transparent 0);
}
.frame--play .play-tri{
  position:absolute; inset:0; margin:auto; width:0; height:0;
  border-style:solid; border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
  transform:translateX(2px);
}
.ratio-169{ aspect-ratio:16/9; }
.ratio-43{  aspect-ratio:4/3; }
.ratio-11{  aspect-ratio:1/1; }
.ratio-23{  aspect-ratio:2/3; }
.ratio-34{  aspect-ratio:3/4; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  border-top:none;
  padding:clamp(40px,7vw,90px) var(--pad) 40px;
  display:grid; gap:clamp(40px,6vw,80px);
  background:var(--accent); color:var(--accent-fg);
}
.foot__big{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  line-height:.9; letter-spacing:-.02em;
  font-size:clamp(20px,4vw,60px);
}
.foot__big a{ color:var(--accent-fg); transition:opacity .3s; }
.foot__big a:hover{ color:var(--accent-fg); opacity:.6; }
.foot__row{
  display:flex; flex-wrap:wrap; gap:24px 48px; justify-content:space-between;
  align-items:flex-end;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:rgba(10,10,11,.62); text-transform:uppercase;
}
.foot__row a{ color:rgba(10,10,11,.8); transition:opacity .3s; }
.foot__row a:hover{ color:var(--accent-fg); opacity:1; }

/* reveal on scroll ------------------------------------------ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--slow), transform 1s var(--slow); }
.reveal.in{ opacity:1; transform:none; }

@media (max-width:680px){
  :root{ --nav-h:64px; }
  .nav__brand{ font-size:15px; }
}