/* ============================================================
   GREAT WAVE STUDIOS — shared design system
   Void black / paper white, Fraunces + Inter + IBM Plex Mono
   ============================================================ */

:root{
  --void:#0A0A0A;
  --paper:#F5F4F1;
  --graphite:#1C1C1C;
  --fog:#8A8782;
  --line:#2E2E2C;
  --signal:#E8341C;

  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;

  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:96px; --sp-8:128px;

  --margin: 80px;
  --nav-h: 64px;
}
@media (max-width: 767px){
  :root{ --margin: 20px; }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--void);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{
  max-width:1440px;
  margin:0 auto;
  padding-left:var(--margin);
  padding-right:var(--margin);
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:500;
  margin:0;
}
.mono{ font-family:var(--font-mono); letter-spacing:0.02em; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--fog);
  text-transform:none;
}

/* ---------- links & the "no buttons" rule ---------- */
.text-link{
  display:inline-block;
  position:relative;
  color:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, opacity .25s ease;
  padding-bottom:2px;
}
.text-link:hover{ border-color:var(--paper); }
.text-link.arrow::after{ content:" \2192"; }
.text-link.muted{ color:var(--fog); }
.text-link.muted:hover{ color:var(--paper); border-color:var(--paper); }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:1px solid var(--signal);
  outline-offset:3px;
}

/* ---------- nav ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 var(--margin);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
.site-nav.solid{
  background:rgba(10,10,10,0.92);
  backdrop-filter:blur(6px);
  border-bottom-color:var(--line);
}
.nav-brand{ display:flex; flex-direction:row; align-items:center; gap:10px; }
.nav-brand .endorsement{
  font-family:var(--font-body);
  font-weight:400;
  font-style:italic;
  font-size:10px;
  letter-spacing:0;
  text-transform:none;
  color:var(--fog);
  opacity:0.85;
}

/* ---------- circular logo ---------- */
.logo-circle{
  display:inline-block; position:relative; border-radius:50%; overflow:hidden; flex-shrink:0;
  width:40px; height:40px;
  background:var(--void);
}
.logo-circle img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.logo-circle.large{ width:360px; height:360px; transform-origin:center center; }
@media (max-width:767px){
  .logo-circle.large{ width:252px; height:252px; }
}

/* Passthrough wrapper: carries the one-time load-in fade+rise (hero-fade),
   kept separate from .logo-circle.large so the scroll-driven scale()
   applied there via JS never fights the fade's own transform. */
.logo-fade-wrap{ display:inline-block; }

/* ---------- real media frame (replaces placeholder-media once assets exist) ---------- */
.media-frame{
  position:relative; overflow:hidden; border:1px solid var(--line);
  background:var(--graphite);
}
.media-frame img, .media-frame video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.nav-links{ display:flex; gap:22px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.03em; }
.nav-links a{ position:relative; padding-bottom:4px; border-bottom:1px solid transparent; transition:border-color .2s ease, color .2s ease;}
.nav-links a:hover, .nav-links a.active{ border-color:var(--paper); }
.nav-links a.active{ color:var(--paper); }
.nav-toggle{ display:none; background:none; border:0; color:var(--paper); font-size:22px; cursor:pointer; }

/* Hidden by default at every viewport — only the mobile media query below
   ever makes this visible, and only once .open is added by main.js. This
   is the fix for the stray top-left element: previously this had no base
   display rule, so on desktop it rendered inline at the top of the page. */
.mobile-menu{
  display:none;
  position:fixed; inset:0; background:var(--void); z-index:99;
  flex-direction:column; justify-content:center; gap:28px;
  padding:0 var(--margin);
}
.mobile-menu.open{ display:flex; }

@media (max-width: 767px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .nav-toggle.is-hidden{ display:none; }
  .mobile-menu a{ font-family:var(--font-mono); font-size:20px; }
  .mobile-menu .close-btn{
    position:absolute; top:20px; right:20px; background:none; border:0;
    color:var(--paper); font-size:26px; cursor:pointer;
  }
}

/* ---------- placeholder media blocks ---------- */
.placeholder-media{
  position:relative;
  width:100%;
  background:
    repeating-linear-gradient(135deg, var(--graphite), var(--graphite) 1px, var(--void) 1px, var(--void) 14px);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.placeholder-media .label{
  font-family:var(--font-mono); font-size:11px; color:var(--fog);
  background:rgba(10,10,10,0.75);
  padding:6px 12px;
  text-align:center;
}
.ratio-16-9{ aspect-ratio:16/9; }
.ratio-21-9{ aspect-ratio:21/9; }
.ratio-3-2{ aspect-ratio:3/2; }
.ratio-4-5{ aspect-ratio:4/5; }

/* ---------- sections & scroll reveal ---------- */
section{ padding:var(--sp-7) 0; border-top:1px solid var(--line); }
section:first-of-type{ border-top:none; }
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-fade{ opacity:1 !important; transform:none !important; }
  .pulse{ animation:none !important; }
}

/* ---------- signal-red tally dot ---------- */
.tally{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--signal); margin-right:8px; vertical-align:middle;
}
.pulse{ animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  border-top:none;
}
.hero.hero-plain{
  min-height:auto;
  display:block;
  text-align:center;
  padding:calc(var(--nav-h) + var(--sp-5)) 0 var(--sp-4);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.35) 100%);
}
.hero-content{ position:relative; z-index:2; padding-bottom:var(--sp-7); }
.hero.hero-plain .hero-content{ padding-bottom:0; }
.hero.hero-plain .logo-circle{ margin:0 auto; }
.hero-title{ font-size:clamp(40px, 7vw, 88px); letter-spacing:-0.01em; }
.hero-tagline{ font-size:clamp(16px, 2vw, 20px); margin-top:var(--sp-2); }
.hero-services{ font-family:var(--font-mono); font-size:13px; color:var(--fog); margin-top:var(--sp-2); }
.hero-fade{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
.hero-fade.in-view{ opacity:1; transform:translateY(0); }
.scroll-cue{ font-family:var(--font-mono); font-size:11px; color:var(--fog); margin-top:var(--sp-4); }

/* ---------- selected work / grid ---------- */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:var(--sp-4);
}
.section-head h2{ font-size:22px; }

.meta{ font-family:var(--font-mono); font-size:11px; color:var(--fog); }

/* ---------- portfolio item: shared 16:9 hover-reveal component ----------
   Used on the homepage (1 large + 4 support) and the Work page (12-grid).
   Desktop: hover dims the image and reveals brand + campaign.
   Mobile (no hover): the overlay is always visible at reduced strength. --- */
.portfolio-item{ display:block; }
.portfolio-media{ position:relative; overflow:hidden; }
.portfolio-media .placeholder-media{ transition:opacity .3s ease; }
.portfolio-item:hover .portfolio-media .placeholder-media{ opacity:.35; }
.portfolio-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--sp-2);
  opacity:0;
  transition:opacity .3s ease;
  background:linear-gradient(0deg, rgba(10,10,10,0.8) 0%, rgba(10,10,10,0) 65%);
}
.portfolio-item:hover .portfolio-overlay{ opacity:1; }
.portfolio-brand{ font-size:15px; font-weight:600; }
.portfolio-campaign{ font-family:var(--font-mono); font-size:11px; color:var(--fog); margin-top:2px; }
.portfolio-item .cap{ margin-top:var(--sp-1); }

/* homepage: 1 large + 4 supporting */
.work-large{ margin-bottom:var(--sp-3); }
.work-support-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3);
}

/* work page: simple 12-up editorial grid */
.portfolio-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3);
}

@media (max-width: 767px){
  .work-support-grid{ grid-template-columns:1fr; }
  .portfolio-grid{ grid-template-columns:1fr; }
  /* no hover on touch — show the overlay permanently instead */
  .portfolio-item .portfolio-overlay{ opacity:1; }
  .portfolio-item .portfolio-media .placeholder-media{ opacity:1; }
}

/* ---------- services ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
.service{ border-top:1px solid var(--line); padding-top:var(--sp-2); }
.service .num{ font-family:var(--font-mono); font-size:12px; color:var(--fog); }
.service h3{ font-size:16px; margin-top:var(--sp-1); font-family:var(--font-body); font-weight:500; }
.service p{ color:var(--fog); font-size:14px; margin-top:var(--sp-1); }
@media (max-width: 767px){ .services-grid{ grid-template-columns:1fr; } }

/* ---------- studio ---------- */
.studio-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--sp-3); align-items:end; }
.studio-grid .cap{ margin-top:var(--sp-1); }
.studio-pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
@media (max-width: 767px){
  .studio-grid{ grid-template-columns:1fr; }
  .studio-pair{ grid-template-columns:1fr 1fr; }
}

/* ---------- contact ---------- */
.contact-block{ text-align:center; padding:var(--sp-8) 0; }
.contact-block h2{ font-size:clamp(24px,4vw,36px); }
.contact-email{ margin-top:var(--sp-3); font-size:18px; }
.contact-email.placeholder{ color:var(--fog); font-style:italic; border-bottom:1px dashed var(--fog); }

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:var(--sp-4) 0;
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--fog); flex-wrap:wrap; gap:var(--sp-2);
}
footer .brands div:first-child{ color:var(--paper); }

/* ---------- page hero (non-home) ---------- */
.page-hero{ padding-top:calc(var(--nav-h) + var(--sp-6)); padding-bottom:var(--sp-5); border-top:none; }
.page-hero h1{ font-size:clamp(32px,5vw,52px); }
.page-hero p{ color:var(--fog); margin-top:var(--sp-2); max-width:520px; }

/* Mobile-only: tighten the gap between the intro/subheading and the
   first content section on Work, Services, Studio, and About — the only
   pages with a .page-hero, so this can't touch Home, Contact, or the
   project page. Desktop spacing (above) is untouched. */
@media (max-width: 767px){
  .page-hero{ padding-bottom:var(--sp-2); }
  .page-hero + section{ padding-top:var(--sp-3); }
}

/* ---------- project page ---------- */
.project-back-top{ padding-top:calc(var(--nav-h) + var(--sp-3)); margin-bottom:0; }
.text-link.arrow-left::before{ content:"\2190 "; }

.project-video-wrap{
  display:flex; justify-content:center;
  padding:var(--sp-3) var(--margin) 0;
}
.project-video{ width:100%; max-width:900px; }

/* Metadata is centered and constrained to the same max-width as the
   video above it, rather than spanning the full page container. */
.project-meta-wrap{
  max-width:900px; margin:0 auto; padding:0 var(--margin);
  text-align:center;
}
.project-meta-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-5);
  padding:var(--sp-4) 0; border-bottom:1px solid var(--line);
}
.project-meta-grid .k{ font-family:var(--font-mono); font-size:11px; color:var(--fog); }
.project-meta-grid .v{ margin-top:4px; font-size:14px; }
@media (max-width: 767px){
  .project-meta-grid{ gap:var(--sp-3); }
  .project-video{ max-width:none; }
}
.project-desc{ max-width:640px; margin:0 auto; padding:var(--sp-4) 0; color:var(--fog); }

/* ---------- about ---------- */
.prose{ max-width:640px; }
.prose p{ margin:0 0 var(--sp-2); color:var(--fog); }
.prose p:first-child{ color:var(--paper); font-size:18px; }

.about-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5);
  align-items:start;
}
.about-photo .placeholder-media, .about-photo .media-frame{ aspect-ratio:4/5; }
.about-text p{ margin:0 0 var(--sp-3); color:var(--fog); font-size:16px; line-height:1.7; }
@media (max-width: 767px){
  .about-grid{ grid-template-columns:1fr; gap:var(--sp-3); }
}

/* ---------- instagram icon (monochrome) ---------- */
.ig-link{ display:inline-flex; align-items:center; gap:8px; }
.ig-link svg{ width:15px; height:15px; fill:currentColor; }

/* ---------- contact info + form ---------- */
.contact-details{
  display:flex; flex-direction:column; gap:var(--sp-1);
  margin-top:var(--sp-3); align-items:center;
}
.contact-details .k{ font-family:var(--font-mono); font-size:11px; color:var(--fog); }
.contact-details .v{ font-size:16px; }

/* ---------- contact page: two-column layout ---------- */
.contact-page{ padding:calc(var(--nav-h) + var(--sp-6)) 0 var(--sp-7); }
.contact-title-main{
  font-size:clamp(30px,4.5vw,46px);
  text-align:center;
  margin-bottom:var(--sp-6);
}
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-7);
  align-items:start; text-align:left;
}
@media (max-width:767px){
  .contact-grid{ grid-template-columns:1fr; gap:var(--sp-6); }
}

.contact-info-block{
  display:flex; flex-direction:column; gap:14px; align-items:stretch;
  margin-top:var(--sp-4);
}
.contact-info-block .studio-name{
  font-family:var(--font-body); font-weight:600; font-size:16px;
  color:var(--paper); margin-bottom:4px;
}
/* Fixed-width icon column so every row's text starts on the same
   vertical line, regardless of icon shape — address wraps, phone/
   email/Instagram stay single-line, all aligned. */
.info-row{
  display:grid; grid-template-columns:24px 1fr; align-items:start; gap:12px;
  max-width:380px;
}
.info-row .info-icon{ width:16px; height:16px; fill:var(--fog); margin-top:2px; }
.info-row span, .info-row a{ font-size:14px; color:var(--paper); line-height:1.5; }
.info-row a:hover{ color:var(--fog); }

.contact-form{
  max-width:480px; margin:var(--sp-3) 0 0; text-align:left;
}
.contact-form .field{ margin-bottom:var(--sp-3); }
.contact-form label{
  display:block; font-family:var(--font-mono); font-size:11px; color:var(--fog);
  margin-bottom:6px;
}
.contact-form input, .contact-form textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
  color:var(--paper); font-family:var(--font-body); font-size:15px; padding:8px 0;
  transition:border-color .2s ease;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-bottom-color:var(--signal);
}
.contact-form textarea{ resize:vertical; min-height:100px; }
.contact-form button{
  margin-top:var(--sp-2); background:none; border:1px solid var(--paper);
  color:var(--paper); font-family:var(--font-mono); font-size:12px;
  padding:12px 24px; cursor:pointer; transition:background .2s ease, color .2s ease;
}
.contact-form button:hover{ background:var(--paper); color:var(--void); }
.contact-form .form-note{
  margin-top:var(--sp-2); font-family:var(--font-mono); font-size:11px; color:var(--fog);
}
.contact-form .form-status{ margin-top:var(--sp-2); font-size:13px; color:var(--fog); }
.contact-form .form-status.success{ color:var(--paper); }
.contact-form .form-status.error{ color:var(--signal); }
.contact-form button:disabled{ opacity:0.5; cursor:not-allowed; }
.contact-form button:disabled:hover{ background:none; color:var(--paper); }

/* ---------- about: closing statement ---------- */
.about-closing{
  font-family:var(--font-display);
  font-style:italic;
  font-size:20px;
  color:var(--paper);
  margin-top:var(--sp-4);
  padding-top:var(--sp-3);
  border-top:1px solid var(--line);
}