/* ============================================================
   MERIDIAN — videography portfolio
   Shared styles. Concept: the page staged like a cinema
   camera viewfinder. Neutral chrome, one warm accent,
   color comes from the film stills themselves.
   ============================================================ */

:root{
  --bg:        #0a0a0b;
  --bg-soft:   #101012;
  --panel:     #141416;
  --ink:       #f3f1ec;
  --ink-dim:   #9a978f;
  --ink-faint: #5c5a55;
  --line:      rgba(243,241,236,0.12);
  --line-soft: rgba(243,241,236,0.06);
  --accent:    #e7a24a;
  --accent-dim:rgba(231,162,74,0.16);

  --frame:     min(1280px, 92vw);
  --gutter:    clamp(20px, 5vw, 64px);

  --f-display: "Space Grotesk", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode:multiply;
}
::selection{ background:var(--accent); color:#171204; }
a{ color:inherit; text-decoration:none; }
img{ display:block; }

.mono{
  font-family:var(--f-mono); font-weight:400;
  letter-spacing:0.04em; font-size:0.72rem;
  text-transform:uppercase; color:var(--ink-dim);
}

/* ---------- viewfinder chrome ---------- */
.viewfinder{ position:fixed; inset:0; z-index:40; pointer-events:none; }
.vf-corner{ position:absolute; width:30px; height:30px; border:1.5px solid rgba(243,241,236,0.30); }
.vf-corner.tl{ top:18px; left:18px; border-right:0; border-bottom:0; }
.vf-corner.tr{ top:18px; right:18px; border-left:0;  border-bottom:0; }
.vf-corner.bl{ bottom:18px; left:18px; border-right:0; border-top:0; }
.vf-corner.br{ bottom:18px; right:18px; border-left:0;  border-top:0; }
.vf-rec{ position:absolute; top:90px; left:24px; display:flex; align-items:center; gap:9px; }
.vf-rec .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); animation:blink 1.6s steps(1) infinite; }
.vf-rec .label{ font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.22em; color:var(--ink); }
@keyframes blink{ 0%,55%{opacity:1} 56%,100%{opacity:0.15} }

/* ---------- shell ---------- */
.wrap{ position:relative; z-index:2; width:var(--frame); margin-inline:auto; }
section{ position:relative; z-index:2; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:30;
  backdrop-filter:blur(14px);
  background:linear-gradient(to bottom, rgba(10,10,11,0.86), rgba(10,10,11,0.0));
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{ width:var(--frame); margin-inline:auto; height:72px; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:baseline; gap:12px; }
.brand .mark{ font-family:var(--f-display); font-weight:700; font-size:1.02rem; letter-spacing:0.16em; padding-left:0.16em; text-transform:uppercase; white-space:nowrap; }
.brand .sub{ font-family:var(--f-mono); font-size:0.62rem; letter-spacing:0.18em; color:var(--ink-faint); }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-dim); transition:color .25s ease; position:relative; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.tab.active{ color:var(--accent); }
.nav-links a.tab.active::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--accent); }
.nav-cta{ border:1px solid var(--line); border-radius:2px; padding:9px 16px; color:var(--ink) !important; }
.nav-cta:hover{ border-color:var(--accent); background:var(--accent-dim); }
.nav-burger{ display:none; background:none; border:0; cursor:pointer; }

/* mobile menu sheet */
.menu-sheet{
  position:fixed; inset:0; z-index:35; background:rgba(8,8,9,0.97);
  backdrop-filter:blur(8px); display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:26px;
}
.menu-sheet.open{ display:flex; }
.menu-sheet a{ font-family:var(--f-display); font-size:1.8rem; color:var(--ink); }
.menu-sheet a.active{ color:var(--accent); }
.menu-sheet .close{ position:absolute; top:20px; right:24px; font-family:var(--f-mono); font-size:0.8rem; color:var(--ink-dim); background:none; border:0; cursor:pointer; }

/* ---------- hero (home) ---------- */
.hero{ padding-top:clamp(20px,3.5vh,44px); }
.hero-intro{ margin-top:clamp(34px,6vh,64px); }
.hero-eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:clamp(28px,5vh,52px); }
.hero-eyebrow .rule{ height:1px; width:54px; background:var(--accent); }
.hero h1{ font-family:var(--f-display); font-weight:600; font-size:clamp(2.6rem,8.2vw,7rem); line-height:0.98; letter-spacing:-0.02em; max-width:16ch; }
.hero h1 .warm{ color:var(--accent); }
.hero-sub{ margin-top:clamp(26px,4vh,40px); max-width:52ch; color:var(--ink-dim); font-size:clamp(1rem,1.5vw,1.18rem); }
.hero-meta{ margin-top:clamp(34px,5vh,56px); display:flex; flex-wrap:wrap; gap:30px 48px; padding-bottom:clamp(36px,6vh,68px); border-bottom:1px solid var(--line-soft); }
.hero-meta .item .k{ display:block; }
.hero-meta .item .v{ font-family:var(--f-display); font-size:1.05rem; color:var(--ink); margin-top:4px; }

.feature-still{ margin-top:0; position:relative; aspect-ratio:2.39/1; overflow:hidden; border:1px solid var(--line); background:#000; }
.feature-still img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.02) contrast(1.02); transform:scale(1.02); }

/* hero slideshow — GPU dissolve canvas */
.feature-still .hero-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; background:#000; }

.feature-still .tag{ position:absolute; left:16px; bottom:14px; display:flex; gap:14px; align-items:center; z-index:5; }
.feature-still .vf-rec.hero-rec{ top:14px; left:16px; z-index:5; text-shadow:0 1px 4px rgba(0,0,0,0.6); }

/* live luma histogram (hero, bottom-right) */
.feature-still .hist{ position:absolute; right:16px; bottom:14px; z-index:5; pointer-events:none;
  display:flex; flex-direction:row; gap:9px; align-items:center;
  padding:5px 10px; border:1px solid var(--line); border-radius:2px;
  background:rgba(10,10,11,0.6); backdrop-filter:blur(6px); }
.feature-still .hist-label{ font-size:0.62rem; letter-spacing:0.16em; color:var(--ink-dim); }
.feature-still .hist-canvas{ display:block; width:120px; height:18px; }
@media (max-width:760px){ .feature-still .hist{ display:none; } }
.feature-still .pill{ background:rgba(10,10,11,0.6); backdrop-filter:blur(6px); border:1px solid var(--line); padding:5px 10px; border-radius:2px; white-space:nowrap; }
.feature-still .pill-cam{ overflow:hidden; text-align:center; }

/* ---------- section heading ---------- */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:clamp(80px,13vh,160px) 0 clamp(34px,5vh,54px); }
.sec-head h2{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.7rem,3.4vw,2.7rem); letter-spacing:-0.01em; }
.sec-head .idx{ font-family:var(--f-mono); color:var(--accent); font-size:0.74rem; letter-spacing:0.2em; }
.sec-head .note{ max-width:36ch; text-align:right; color:var(--ink-dim); font-size:0.92rem; }

/* ---------- category cards (home) ---------- */
.cats{ display:grid; gap:clamp(16px,2vw,24px); }
.cat-card{ position:relative; display:block; overflow:hidden; border:1px solid var(--line); background:#000; aspect-ratio:21/7; }
.cat-card img{ width:100%; height:100%; object-fit:cover; filter:brightness(0.62) saturate(0.95); transform:scale(1.04); transition:transform 1.1s cubic-bezier(.22,.61,.36,1), filter .6s ease; }
.cat-card:hover img{ transform:scale(1.09); filter:brightness(0.78) saturate(1.05); }
.cat-card .overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(20px,3vw,40px); }
.cat-card .kicker{ font-family:var(--f-mono); color:var(--accent); font-size:0.72rem; letter-spacing:0.2em; }
.cat-card h3{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.8rem,4.5vw,3.4rem); line-height:1; margin-top:8px; letter-spacing:-0.01em; }
.cat-card .go{ position:absolute; top:clamp(20px,3vw,36px); right:clamp(20px,3vw,40px); display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.16em; color:var(--ink); opacity:0; transform:translateX(-6px); transition:opacity .4s ease, transform .4s ease; }
.cat-card:hover .go{ opacity:1; transform:none; }
.cat-card .count{ position:absolute; top:clamp(20px,3vw,36px); left:clamp(20px,3vw,40px); }

/* ---------- page hero (category pages) ---------- */
.page-hero{ padding-top:clamp(48px,9vh,104px); padding-bottom:clamp(36px,6vh,60px); border-bottom:1px solid var(--line-soft); }
.page-hero.has-bg{ position:relative; overflow:hidden; }
.page-hero.full-bleed{ width:100%; padding-inline:0; }
.page-hero .page-hero-bg{ position:absolute; inset:0; z-index:0; background:var(--bg) center/cover no-repeat; animation:heroBgFade 1s ease both; }
@keyframes heroBgFade{ from{ opacity:0 } to{ opacity:1 } }
.page-hero .page-hero-bg video,
.page-hero .page-hero-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; display:block; opacity:1; }
.page-hero.has-bg > :not(.page-hero-bg){ position:relative; z-index:1; }
.page-hero.has-bg .wrap{ text-shadow:0 1px 3px rgba(0,0,0,0.45), 0 6px 30px rgba(0,0,0,0.5); }
@media (prefers-reduced-motion:reduce){ .page-hero .page-hero-bg video{ display:none; } .page-hero .page-hero-bg{ animation:none; } }
.page-hero .crumb{ display:flex; align-items:center; gap:14px; margin-bottom:clamp(22px,4vh,40px); }
.page-hero .crumb .rule{ height:1px; width:40px; background:var(--accent); }
.page-hero h1{ font-family:var(--f-display); font-weight:600; font-size:clamp(2.6rem,9vw,6.4rem); line-height:0.96; letter-spacing:-0.02em; }
.page-hero h1 .warm{ color:var(--accent); }
.page-hero .lead{ margin-top:clamp(22px,3.5vh,34px); max-width:54ch; color:var(--ink); font-size:clamp(1rem,1.4vw,1.14rem); }
.page-hero .stats{ margin-top:clamp(28px,4vh,44px); display:flex; flex-wrap:wrap; gap:26px 44px; }
.page-hero .stats .v{ font-family:var(--f-display); font-size:1.05rem; color:var(--ink); margin-top:4px; }
.page-hero .stats .k{ display:block; }

/* ---------- film / gallery grid ---------- */
.films{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,30px); padding-top:clamp(40px,6vh,72px); }
.film{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.film.in{ opacity:1; transform:none; }
.film-frame{ position:relative; aspect-ratio:2.39/1; overflow:hidden; border:1px solid var(--line); background:#000; }
.film-frame img{ width:100%; height:100%; object-fit:cover; transform:scale(1.03); filter:saturate(0.96) brightness(0.92); transition:transform 1.1s cubic-bezier(.22,.61,.36,1), filter .6s ease; }
.film:hover .film-frame img{ transform:scale(1.08); filter:saturate(1.06) brightness(1); }
.film-frame .corner{ position:absolute; width:16px; height:16px; border:1px solid rgba(243,241,236,0.45); opacity:0; transition:opacity .4s ease; }
.film:hover .film-frame .corner{ opacity:1; }
.film-frame .corner.tl{ top:10px; left:10px; border-right:0; border-bottom:0; }
.film-frame .corner.br{ bottom:10px; right:10px; border-left:0; border-top:0; }
.film-frame .play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9); width:62px; height:62px; border:1px solid rgba(243,241,236,0.6); border-radius:50%; display:grid; place-items:center; opacity:0; transition:opacity .4s ease, transform .5s ease; background:rgba(10,10,11,0.25); backdrop-filter:blur(3px); }
.film:hover .film-frame .play{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.film-frame .play svg{ width:18px; height:18px; fill:var(--ink); margin-left:3px; }
.film-info{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:16px 2px 0; }
.film-info .t{ font-family:var(--f-display); font-weight:500; font-size:1.18rem; letter-spacing:-0.01em; }
.film-info .type{ margin-top:5px; }
.film-info .specs{ text-align:right; line-height:1.9; white-space:nowrap; }
.film-info .num{ font-family:var(--f-mono); color:var(--accent); font-size:0.72rem; }

/* ---------- reel (embedded video) ---------- */
.reel{ padding-top:clamp(70px,11vh,130px); }
.reel-frame{ position:relative; aspect-ratio:21/9; overflow:hidden; border:1px solid var(--line); background:#000; }
.reel-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* ---------- capabilities ---------- */
.caps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.cap{ position:relative; overflow:hidden; background:var(--bg); padding:clamp(26px,3vw,40px); min-height:208px; display:flex; flex-direction:column; justify-content:space-between; }
.cap .cap-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0.62; }
.cap::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,11,0.9) 0%, rgba(10,10,11,0.5) 50%, rgba(10,10,11,0.72) 100%); }
.cap > :not(.cap-bg){ position:relative; z-index:2; }
.cap .n{ font-family:var(--f-mono); color:var(--ink-faint); font-size:0.7rem; letter-spacing:0.18em; }
.cap h3{ font-family:var(--f-display); font-weight:500; font-size:1.32rem; margin-top:auto; }
.cap p{ color:var(--ink-dim); font-size:0.88rem; margin-top:10px; }
.cap h3 .dot{ color:var(--accent); }

/* ---------- contact ---------- */
.contact{ padding:clamp(110px,18vh,220px) 0 clamp(60px,10vh,120px); text-align:center; }
.contact .eyebrow{ margin-bottom:28px; display:block; }
.contact h2{ font-family:var(--f-display); font-weight:600; font-size:clamp(2.4rem,7vw,5.6rem); line-height:1.0; letter-spacing:-0.02em; }
.contact h2 .warm{ color:var(--accent); }
.contact .email{ display:inline-flex; align-items:center; gap:14px; margin-top:clamp(34px,5vh,52px); font-family:var(--f-display); font-size:clamp(1.1rem,2.4vw,1.7rem); padding-bottom:8px; border-bottom:1px solid var(--line); transition:border-color .3s ease, color .3s ease; }
.contact .email:hover{ border-color:var(--accent); color:var(--accent); }
.contact .email .arw{ transition:transform .3s ease; }
.contact .email:hover .arw{ transform:translate(4px,-4px); }
.contact .lower{ margin-top:clamp(48px,7vh,84px); display:flex; gap:26px; justify-content:center; flex-wrap:wrap; }
.contact .lower a{ transition:color .25s ease; }
.contact .lower a:hover{ color:var(--ink); }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line-soft); padding:30px 0 calc(30px + env(safe-area-inset-bottom)); }
.foot-inner{ width:var(--frame); margin-inline:auto; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }

/* ---------- responsive ---------- */
@media (max-width:760px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
  .brand .sub{ display:none; }
  .viewfinder .vf-rec{ display:none; }   /* avoid colliding with the wider wordmark */
  .films{ grid-template-columns:1fr; }
  .caps-grid{ grid-template-columns:1fr; }
  .film-frame{ aspect-ratio:16/9; }
  .feature-still{ aspect-ratio:16/9; }
  .cat-card{ aspect-ratio:16/9; }
  .sec-head .note{ text-align:left; }
}
@media (max-width:980px) and (min-width:761px){
  .caps-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .film{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}