/* ==========================================================================
   GRIHASTHA — page layout & frame styles
   --------------------------------------------------------------------------
   This file holds the LAYOUT for the one-page "film reel" site.
   The reusable design system (colors, fonts, glitch logo, photo treatment,
   buttons) lives in  shared/grih.css  — do not duplicate tokens here.

   You normally won't need to touch this file to update content.
   To change words, photos, links or videos, edit  index.html  instead.
   ========================================================================== */

html,body{ height:100%; }
body{ height:100vh; overflow:hidden; background:#040404; }

/* ---------- film sprocket strips (top & bottom) ---------- */
.sprock{ position:fixed; left:0; right:0; height:34px; z-index:40; background:#0a0a0b; pointer-events:none; }
.holes{ position:fixed; left:0; right:0; height:34px; z-index:41; pointer-events:none; display:flex; gap:30px; align-items:center; padding:0 14px; overflow:hidden; }
.holes i{ width:20px; height:14px; border-radius:2px; background:#040404; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); flex:none; }
.top0{ top:0 } .bot0{ bottom:0 }

/* ---------- standalone corner wordmark ---------- */
.corner{ position:fixed; top:42px; left:26px; z-index:60; display:flex; align-items:center; gap:10px; pointer-events:none; transition:opacity .4s; }
.corner .gl{ font-size:20px; line-height:1; }
.corner .dot{ width:7px; height:7px; border-radius:50%; background:var(--ember); box-shadow:0 0 10px var(--ember); animation:pulse 2.4s ease-in-out infinite; }
body.at-intro .corner{ opacity:0; pointer-events:none; }
@keyframes pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }

/* ---------- horizontal reel (desktop) ---------- */
.reel{ position:fixed; top:34px; bottom:34px; left:0; right:0; z-index:5; display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none; }
.reel::-webkit-scrollbar{ display:none; }
.frame{ flex:0 0 100vw; height:100%; scroll-snap-align:center; position:relative; border-right:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center; padding:40px; }
.fnum{ position:absolute; top:18px; right:26px; font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--dim); }
.fnum b{ color:var(--ember); }

/* ---------- intro frame ---------- */
.intro{ position:relative; width:100%; height:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.intro .photo{ position:absolute; inset:0; }
.intro .photo img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.06) brightness(.6) saturate(0); }
.intro .scrim{ position:absolute; inset:0; background:radial-gradient(90% 80% at 50% 50%, rgba(4,4,4,.3), rgba(4,4,4,.85)); }
.intro .mid{ position:relative; z-index:3; text-align:center; }
.intro .gl{ font-size:clamp(48px,11vw,180px); }
.intro .sub{ margin-top:18px; font-family:var(--mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--dim); }
.intro .cue{ margin-top:26px; font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ember); }
.intro .cue.m{ display:none; }

/* ---------- generic content panel ---------- */
.panel{ width:min(1100px,100%); }
.ph2{ font-family:var(--display); text-transform:uppercase; font-size:clamp(40px,7vw,104px); line-height:.86; margin:0 0 8px; }
.seclabel{ margin-bottom:14px; }

/* ---------- music / player ---------- */
.grih-player{ height:min(64vh,560px); border:1px solid var(--line); background:radial-gradient(120% 100% at 50% 50%, #131315, #060607 70%); }

/* ---------- videos ---------- */
.vrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.vcard{ cursor:pointer }
.vcard .photo{ aspect-ratio:16/9; border:1px solid var(--line) }
.vcard .photo .pb{ position:absolute; inset:0; display:grid; place-items:center; z-index:2; font-size:22px; color:#fff }
.vcard:hover .photo .pb{ color:var(--ember) }
.vcard .vt{ font-family:var(--cond); font-size:20px; margin-top:8px }

/* ---------- photos ---------- */
.prow{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.prow .photo{ aspect-ratio:3/4; border:1px solid var(--line) }

/* ---------- about ---------- */
.abouttext{ color:#c7c3bb; font-size:16px; line-height:1.75; max-width:620px }
.abouttext em{ color:var(--ember); font-style:normal }
/* Desktop frames are fixed-height; let the longer bio scroll instead of clipping. */
@media(min-width:821px){
  #about .panel{ max-height:calc(100vh - 120px); overflow-y:auto; scrollbar-width:none; }
  #about .panel::-webkit-scrollbar{ display:none; }
}

/* ---------- press ---------- */
.quote{ border-top:1px solid var(--line); padding-top:18px; margin-top:16px }
.quote p{ font-family:var(--cond); font-size:clamp(20px,2.4vw,28px); line-height:1.16; margin:0 0 10px }
.quote .src{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ember) }
.quote .src span{ color:var(--dim) }

/* ---------- progress + jump nav ---------- */
.reelnav{ position:fixed; left:50%; bottom:44px; transform:translateX(-50%); z-index:50; display:flex; gap:8px; align-items:center;
  background:rgba(8,8,10,.7); border:1px solid var(--line); padding:8px 12px; backdrop-filter:blur(8px); }
.reelnav a{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); padding:4px 8px; cursor:pointer; transition:.2s; }
.reelnav a:hover{ color:var(--bone) }
.reelnav a.on{ color:#000; background:var(--ember) }
.hintbar{ position:fixed; right:26px; bottom:46px; z-index:50; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }

/* ---------- video lightbox ---------- */
.vlb{ position:fixed; inset:0; z-index:200; background:rgba(2,2,2,.92); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .35s }
.vlb.open{ opacity:1; pointer-events:auto }
.vlb .box{ width:min(900px,90vw); aspect-ratio:16/9; border:1px solid var(--line) }
.vlb iframe{ width:100%; height:100% }
.vlb .x{ position:absolute; top:22px; right:26px; font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--dim); cursor:pointer }

/* ==========================================================================
   MOBILE (≤820px) — vertical stack, native scroll, no scroll-hijack.
   Deliberate client decision: sideways scrolling on a phone felt wrong.
   ========================================================================== */
@media(max-width:820px){
  body{ height:auto; overflow:auto; }
  .reel{ position:static; display:block; overflow:visible; height:auto; top:auto; bottom:auto;
    scroll-snap-type:none; padding:34px 0; }
  .frame{ flex:none; width:100%; height:auto; min-height:auto; scroll-snap-align:none;
    border-right:none; border-bottom:1px solid rgba(255,255,255,.08); padding:74px 20px 64px; }
  .frame[data-i="0"]{ min-height:88vh; }
  .intro{ min-height:74vh; }
  .fnum{ top:26px; }
  .intro .cue{ display:none; } .intro .cue.m{ display:block; }
  .corner{ top:auto; bottom:14px; left:14px; }
  .grih-player{ height:min(78vh,560px); }
  .vrow{ grid-template-columns:1fr; gap:14px; }
  .prow{ grid-template-columns:1fr 1fr; }
  .hintbar{ display:none; }
  .reelnav{ left:50%; bottom:16px; gap:4px; padding:7px 9px; max-width:calc(100vw - 24px); overflow-x:auto; scrollbar-width:none; }
  .reelnav::-webkit-scrollbar{ display:none; }
}