/* =========================================================
   Hetansh Bhuta — flight through a world
   Art direction: warm cinematic / golden-hour drone HUD
   ========================================================= */

@font-face{
  font-family: "Bodoni Moda";
  src: url("assets/fonts/BodoniModa-Medium.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face{
  font-family: "Bodoni Moda";
  src: url("assets/fonts/BodoniModa-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face{
  font-family: "Bodoni Moda";
  src: url("assets/fonts/BodoniModa-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face{
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/HankenGrotesk-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face{
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/HankenGrotesk-Medium.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face{
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/HankenGrotesk-Bold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face{
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/HankenGrotesk-ExtraBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face{
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/HankenGrotesk-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face{
  font-family: "JetBrains Mono";
  src: url("assets/fonts/JetBrainsMono-ExtraBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

:root{
  --ink:        #0c0907;
  --ink-2:      #14100b;
  --char:       #221913;
  --cream:      #f4ead8;
  --cream-2:    #e7d6bd;
  --dim:        #a08c72;
  --dim-2:      #6f614e;
  --ember:      #ff8a3c;
  --ember-2:    #ff6a2a;
  --ember-deep: #d9531a;
  --teal:       #5fb3bd;
  --line:       rgba(244,234,216,.14);
  --line-2:     rgba(244,234,216,.07);

  --f-disp: "Bodoni Moda", Georgia, serif;   /* @kind font */
  --f-body: "Hanken Grotesk", system-ui, sans-serif;  /* @kind font */
  --f-mono: "JetBrains Mono", ui-monospace, monospace;  /* @kind font */

  --ease: cubic-bezier(.22,.61,.36,1);   /* @kind other */
  --ease-out: cubic-bezier(.16,1,.3,1);  /* @kind other */
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overscroll-behavior:none; background:#0c0907; }
body{
  font-family:var(--f-body);
  background:var(--ink);
  color:var(--cream);
  overflow-x:clip;
  overscroll-behavior:none;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.005em;
}
img{ display:block; max-width:100%; }
.mono{ font-family:var(--f-mono); font-weight:400; letter-spacing:.12em; }
.display{ font-family:var(--f-disp); font-weight:400; }
.dim{ color:var(--dim); }
em{ font-style:italic; }

/* ============ FIXED ATMOSPHERE ============ */
#sky{
  position:fixed; inset:0; z-index:-3;
  background:#0c0907;
}
.skylayer{ position:absolute; inset:0; opacity:0; will-change:opacity; }
.s-dawn{ opacity:1;
  background:
    radial-gradient(120% 80% at 80% 8%, rgba(255,150,80,.6), rgba(255,150,80,0) 55%),
    linear-gradient(180deg, #20344e 0%, #4a4458 30%, #b87b4a 66%, #2a1810 100%);
}
.s-day{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,240,210,.5), transparent 55%),
    linear-gradient(180deg, #2f5f93 0%, #6ba0cf 42%, #bcd6e8 78%, #2a2f38 100%);
}
.s-golden{
  background:
    radial-gradient(130% 90% at 75% 12%, rgba(255,170,90,.7), rgba(255,120,60,0) 58%),
    linear-gradient(180deg, #243a55 0%, #8a5a3e 48%, #e08a3c 76%, #2c1a12 100%);
}
.s-dusk{
  background:
    radial-gradient(120% 80% at 30% 18%, rgba(255,120,90,.45), transparent 55%),
    linear-gradient(180deg, #1c1f3a 0%, #4a3258 38%, #a85a52 72%, #1a1018 100%);
}
.s-night{
  background:
    radial-gradient(100% 70% at 50% 6%, rgba(70,90,150,.35), transparent 60%),
    linear-gradient(180deg, #070a16 0%, #0e1424 42%, #1a1a2c 74%, #060507 100%);
}
#vignette{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(110% 90% at 50% 42%, transparent 52%, rgba(6,4,3,.62) 100%);
}
#gl{ position:fixed; inset:0; z-index:-2; pointer-events:none; width:100%; height:100%; display:block; }
#grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,1%)} 80%{transform:translate(3%,2%)} 100%{transform:translate(0,0)}
}

/* ============ HUD ============ */
#hud{ position:fixed; inset:0; z-index:40; pointer-events:none; color:var(--cream); }
#hud .mono{ font-size:11px; letter-spacing:.18em; }
.bracket{ position:fixed; width:26px; height:26px; border:1.5px solid rgba(244,234,216,.5); }
.bracket.tl{ top:18px; left:18px; border-right:0; border-bottom:0; }
.bracket.tr{ top:18px; right:18px; border-left:0; border-bottom:0; }
.bracket.bl{ bottom:18px; left:18px; border-right:0; border-top:0; }
.bracket.br{ bottom:18px; right:18px; border-left:0; border-top:0; }
.hud-tl{ position:fixed; top:24px; left:34px; display:flex; gap:14px; align-items:center; pointer-events:auto; cursor:help; }
.hud-tip{ position:absolute; top:calc(100% + 12px); left:0; width:min(280px,72vw); padding:11px 14px; border:1px solid var(--line); border-radius:10px; background:rgba(12,9,7,.92); backdrop-filter:blur(8px); color:var(--cream-2); font-size:10.5px; line-height:1.55; letter-spacing:.06em; text-transform:none; opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none; transition:opacity .3s, transform .3s, visibility .3s; z-index:50; }
.hud-tl:hover .hud-tip, .hud-tl:focus-visible .hud-tip{ opacity:1; visibility:visible; transform:none; }
.hud-tr{ position:fixed; top:24px; right:34px; text-align:right; display:flex; flex-direction:column; gap:3px; align-items:flex-end; }
.hud-tr #place{ color:var(--ember); }
.hud-bl{ position:fixed; bottom:24px; left:34px; display:flex; align-items:baseline; gap:6px; }
.hud-br{ position:fixed; bottom:22px; right:34px; }
.hud-contact{ pointer-events:auto; cursor:pointer; display:inline-flex; align-items:center; gap:9px; font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; color:var(--cream); background:rgba(12,9,7,.32); border:1px solid var(--line); border-radius:100px; padding:8px 15px 8px 12px; transition:.35s var(--ease-out); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.hud-contact svg{ width:15px; height:15px; }
.hud-contact:hover{ border-color:var(--ember); color:var(--ember); background:rgba(255,138,60,.1); transform:translateY(-1px); }
.alt-label{ color:var(--dim); }
.alt-val{ font-size:15px; font-weight:700; letter-spacing:.1em; min-width:42px; display:inline-block; }
.alt-unit{ color:var(--dim); }
.rec{ display:flex; align-items:center; gap:7px; color:var(--ember); }
.rec i{ width:8px; height:8px; border-radius:50%; background:var(--ember-2); animation:blink 1.4s steps(1) infinite; }
@keyframes blink{ 50%{opacity:.15} }

/* descent transition */
#descent{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:0; transition:opacity .35s; }
#descent.on{ opacity:1; }
#descent::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 50% 120%, rgba(255,120,50,.16), transparent 60%); }
.descent-scan{ position:absolute; left:0; right:0; top:-6%; height:6%; background:linear-gradient(180deg, transparent, rgba(255,170,90,.5), transparent); box-shadow:0 0 30px rgba(255,138,60,.5); opacity:0; }
#descent.on .descent-scan{ animation:scan 1.3s var(--ease) forwards; }
@keyframes scan{ 0%{ top:-8%; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ top:104%; opacity:0; } }
.descent-label{ position:absolute; left:50%; bottom:13%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.26em; color:var(--ember); white-space:nowrap; }
.descent-label i{ width:8px; height:8px; border-radius:50%; background:var(--ember); box-shadow:0 0 10px var(--ember); animation:blink .6s steps(1) infinite; }

#flightbar{ position:fixed; left:0; top:0; height:2px; width:100%; z-index:41; background:transparent; }
#flightbar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--ember-deep),var(--ember)); box-shadow:0 0 12px rgba(255,138,60,.7); }

/* ============ GENERIC SCENE / LAYOUT ============ */
main{ position:relative; z-index:10; }
.scene{ position:relative; }
.panel{ min-height:100svh; display:flex; align-items:center; padding:18vh 0; }
.wrap{ width:min(1180px,88vw); margin:0 auto; }
.sec-label{ font-size:11px; color:var(--dim); margin-bottom:34px; letter-spacing:.26em; }
.sec-label b{ color:var(--ember); font-weight:400; }

/* reveal */
[data-r]{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
[data-r].in{ opacity:1; transform:none; }
[data-rd="1"]{ transition-delay:.12s; }
[data-rd="2"]{ transition-delay:.24s; }

/* ============ HERO ============ */
#hero{ height:210svh; }
.hero-stage{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hero-world{ position:absolute; inset:0; z-index:0; will-change:transform,opacity; transform-origin:50% 64%; }
.hero-world img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.hero-world-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,9,7,.34) 0%, rgba(12,9,7,0) 26%, rgba(12,9,7,.18) 60%, rgba(12,9,7,.86) 100%),
    radial-gradient(120% 70% at 50% 120%, rgba(12,9,7,.7), transparent 60%);
}
.hero-copy{ position:relative; z-index:2; text-align:center; padding:0 6vw; will-change:transform,opacity; }
.hero-copy .kicker{ display:inline-flex; align-items:center; gap:10px; font-size:11px; color:var(--cream-2); margin-bottom:30px; padding:7px 16px; border:1px solid var(--line); border-radius:100px; backdrop-filter:blur(4px); background:rgba(12,9,7,.18); }
.hero-copy .kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--ember); box-shadow:0 0 10px var(--ember); }
h1.display{
  font-weight:500; line-height:.92; letter-spacing:-.01em;
  font-size:clamp(62px, 16vw, 230px);
  text-shadow:0 8px 60px rgba(0,0,0,.5);
}
h1.display .ln{ display:block; }
h1.display .ln:last-child{ font-style:italic; font-weight:400; color:var(--cream); }
.lede{ margin:30px auto 0; max-width:30ch; font-size:clamp(16px,2.1vw,23px); color:var(--cream-2); font-weight:300; line-height:1.55; text-shadow:0 2px 20px rgba(0,0,0,.6); }
.scrollcue{ margin-top:54px; display:inline-flex; flex-direction:column; align-items:center; gap:14px; font-size:10px; color:var(--dim); }
.scrollcue i{ width:1px; height:46px; background:linear-gradient(var(--ember),transparent); position:relative; overflow:hidden; }
.scrollcue i::after{ content:""; position:absolute; top:-46px; left:0; width:1px; height:46px; background:var(--cream); animation:drop 2s var(--ease) infinite; }
@keyframes drop{ 0%{transform:translateY(0)} 60%,100%{transform:translateY(92px)} }

/* lift-off intro */
.lift .kicker, .lift h1 .ln, .lift .lede, .lift .scrollcue{ opacity:0; transform:translateY(40px); }
.armed .kicker{ animation:rise .9s var(--ease-out) .15s forwards; }
.armed h1 .ln:first-child{ animation:rise 1.05s var(--ease-out) .32s forwards; }
.armed h1 .ln:last-child{ animation:rise 1.05s var(--ease-out) .46s forwards; }
.armed .lede{ animation:rise 1s var(--ease-out) .7s forwards; }
.armed .scrollcue{ animation:rise 1s var(--ease-out) .95s forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ============ ABOUT ============ */
#about blockquote{
  font-weight:400; line-height:1.08; letter-spacing:-.01em;
  font-size:clamp(32px,5.6vw,76px); max-width:18ch; margin-bottom:64px;
}
#about blockquote em{ color:var(--ember); }
.about-grid{ display:flex; flex-direction:column; gap:30px; max-width:74ch; margin-left:0; }
.about-grid p{ font-size:clamp(16px,1.5vw,19px); color:var(--cream-2); font-weight:300; line-height:1.75; }
.about-grid em{ color:var(--cream); font-style:italic; }

/* ============ JOURNEY — flight strip ============ */
#journey{ height:300svh; }
.journey-stage{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; flex-direction:column; }
.journey-head{ width:min(1180px,88vw); margin:0 auto; padding-top:11vh; flex:0 0 auto; position:relative; z-index:5; }
.journey-head h2{ font-size:clamp(28px,4.6vw,56px); font-weight:500; line-height:1.06; margin-top:16px; }
.journey-head h2 em{ color:var(--ember); font-style:italic; }

.legstrip{ position:relative; flex:1 1 auto; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent); }
.legtrack{ position:absolute; top:0; bottom:0; left:0; will-change:transform; }
.legbase{ position:absolute; top:50%; left:0; height:0; border-top:1.5px dashed var(--line); }
.legfill{ position:absolute; top:50%; left:0; height:0; width:0; border-top:2px solid var(--ember); filter:drop-shadow(0 0 6px rgba(255,138,60,.6)); }
.legs{ position:absolute; top:0; bottom:0; left:0; display:flex; }
.leg{ position:relative; height:100%; flex:0 0 auto; }
.leg-tick{ position:absolute; top:50%; left:50%; width:1px; height:40px; background:var(--line); }
.leg.up .leg-tick{ transform:translate(-.5px,-100%); }
.leg.down .leg-tick{ transform:translate(-.5px,0); }
.leg-node{ position:absolute; top:50%; left:50%; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%); background:var(--ink); border:2px solid var(--dim-2); transition:.5s var(--ease); z-index:2; }
.leg.active .leg-node{ background:var(--ember); border-color:var(--ember); box-shadow:0 0 0 6px rgba(255,138,60,.16),0 0 18px rgba(255,138,60,.85); }
.leg-card{ position:absolute; left:50%; width:min(380px,82vw); transform:translateX(-50%) translateY(14px); opacity:.3; transition:opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.leg.up .leg-card{ bottom:calc(50% + 52px); }
.leg.down .leg-card{ top:calc(50% + 52px); }
.leg.active .leg-card{ opacity:1; transform:translateX(-50%) translateY(0); }
.leg-year{ font-family:var(--f-mono); font-size:13px; letter-spacing:.22em; color:var(--ember); }
.leg-city{ font-family:var(--f-disp); font-size:clamp(22px,2.4vw,30px); font-weight:600; line-height:1.08; margin:8px 0 4px; }
.leg-role{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--cream-2); margin-bottom:12px; }
.leg-note{ font-size:13.5px; color:var(--cream-2); font-weight:300; line-height:1.6; }
.leg-coord{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; color:var(--dim-2); margin-top:12px; line-height:1.5; }
.leg-coord b{ color:var(--ember); font-weight:500; }
.reticle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:4; pointer-events:none; }
.reticle svg{ width:30px; height:26px; transform:rotate(90deg); }
.reticle polygon{ fill:var(--cream); filter:drop-shadow(0 0 10px rgba(255,138,60,.95)); }
.reticle::before{ content:""; position:absolute; left:50%; top:50%; width:1px; height:70px; transform:translate(-.5px,-50%); background:linear-gradient(transparent,rgba(255,138,60,.4),transparent); z-index:-1; }
.leghint{ position:absolute; left:50%; bottom:5%; transform:translateX(-50%); font-size:10px; letter-spacing:.24em; color:var(--dim-2); z-index:5; transition:opacity .4s; white-space:nowrap; }

/* ============ PROJECTS ============ */
.proj-h{ font-size:clamp(34px,6vw,78px); font-weight:500; line-height:1.04; margin-bottom:60px; }
.proj-list{ display:flex; flex-direction:column; gap:26px; }
.proj{
  position:relative; display:grid; grid-template-columns:1.15fr 1fr; gap:0;
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg, rgba(36,25,19,.55), rgba(20,16,11,.5));
  backdrop-filter:blur(8px);
  transition:transform .6s var(--ease-out), border-color .5s, box-shadow .6s;
  will-change:transform; transform-style:preserve-3d;
}
.proj:hover{ border-color:rgba(255,138,60,.4); box-shadow:0 30px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,138,60,.1); }
.proj-body{ padding:clamp(28px,3.4vw,52px); display:flex; flex-direction:column; }
.proj-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.proj-iconlink{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--cream); text-decoration:none; transition:.35s var(--ease-out); }
.proj-iconlink svg{ width:18px; height:18px; }
.proj-iconlink:hover{ border-color:var(--ember); color:var(--ember); transform:translateY(-2px); background:rgba(255,138,60,.08); }
.proj-status{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; color:var(--ember); margin-bottom:22px; }
.proj-status i{ width:7px; height:7px; border-radius:50%; background:var(--ember); box-shadow:0 0 8px var(--ember); animation:blink 1.6s steps(1) infinite; }
.proj-name{ font-family:var(--f-disp); font-size:clamp(30px,4vw,52px); font-weight:600; line-height:1; }
.proj-tag{ font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; color:var(--dim); margin-top:10px; }
.proj-desc{ margin-top:22px; font-size:15.5px; color:var(--cream-2); font-weight:300; line-height:1.65; max-width:46ch; }
.proj-meta{ margin-top:auto; padding-top:30px; display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; color:var(--cream-2); border:1px solid var(--line); padding:6px 12px; border-radius:100px; }
.proj-link{ display:inline-flex; align-items:center; gap:10px; margin-top:26px; font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; color:var(--cream); text-decoration:none; width:fit-content; border-bottom:1px solid transparent; padding-bottom:3px; transition:.35s; }
.proj-link:hover{ color:var(--ember); border-color:var(--ember); gap:16px; }
.proj-visual{ position:relative; overflow:hidden; background:#0a0705; min-height:240px; border-left:1px solid var(--line); }
.proj-visual.coming{ display:flex; align-items:center; justify-content:center; }
.proj-glyph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.proj-glyph svg{ width:60%; opacity:.9; overflow:visible; }
/* radar — scanning sweep + clickable blip */
.radar-sweep{ transform-box:view-box; transform-origin:100px 100px; animation:radar-spin 3.4s linear infinite; }
@keyframes radar-spin{ to{ transform:rotate(360deg); } }
.radar-blip{ cursor:pointer; }
.radar-blip .blip-hit{ fill:transparent; }
.radar-blip .blip-core{ fill:var(--ember); transition:r .3s; }
.radar-blip .blip-ring{ fill:none; stroke:var(--ember); stroke-width:1.4; transform-origin:148px 72px; animation:blip-pulse 2s ease-out infinite; }
.radar-blip:hover .blip-core{ r:6; }
.radar-blip:hover .blip-ring{ stroke-width:2; }
@keyframes blip-pulse{ 0%{ r:4; opacity:.9; } 70%{ r:18; opacity:0; } 100%{ r:18; opacity:0; } }
@media (prefers-reduced-motion:reduce){ .radar-sweep{ animation:none; } .radar-blip .blip-ring{ animation:none; } }
.coming-tag{ font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; color:var(--dim-2); border:1px dashed var(--line); padding:14px 20px; border-radius:12px; }

.proj.add{ border-style:dashed; background:transparent; backdrop-filter:none; grid-template-columns:1fr; }
.proj.add .proj-body{ align-items:center; text-align:center; padding:44px; }
.proj.add .proj-name{ font-size:clamp(20px,2.4vw,26px); color:var(--dim); font-style:italic; }
.proj.add:hover{ box-shadow:none; border-color:rgba(255,138,60,.3); }

/* ============ GALLERY ============ */
.gal-h{ font-size:clamp(30px,5.4vw,68px); font-weight:500; line-height:1.08; margin-bottom:0; letter-spacing:-.005em; }
.gal-track{ display:flex; gap:24px; padding:7vh max(6vw,40px); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; perspective:1400px; }
.gal-track::-webkit-scrollbar{ height:0; }
.frame{
  position:relative; flex:0 0 auto; scroll-snap-align:center; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#0a0705;
  transition:transform .6s var(--ease-out), border-color .4s, box-shadow .6s;
  will-change:transform; transform-style:preserve-3d;
}
.frame picture{ display:block; width:100%; height:100%; }
.frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out), filter .6s; }
.frame:hover{ border-color:rgba(255,138,60,.45); box-shadow:0 40px 90px -50px rgba(0,0,0,.95); }
.frame:hover img{ transform:scale(1.06); }
.frame .meta{ position:absolute; left:0; right:0; bottom:0; padding:24px 22px 20px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; background:linear-gradient(transparent,rgba(8,5,3,.55) 55%,rgba(8,5,3,.92)); opacity:1; transition:opacity .45s; }
.frame:hover .meta{ opacity:1; }
.frame .meta .cap{ font-family:var(--f-disp); font-style:italic; font-weight:500; font-size:clamp(21px,2vw,27px); line-height:1.08; color:var(--cream); }
.frame .meta .geo{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.frame.empty{ display:flex; align-items:center; justify-content:center; border-style:dashed; cursor:default; }
.frame.empty .plus{ display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--dim-2); font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; }
.frame.empty .plus b{ font-size:30px; font-weight:300; line-height:1; }
.frame .badge{ position:absolute; top:14px; left:14px; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; color:var(--cream); background:rgba(12,9,7,.5); border:1px solid var(--line); padding:5px 9px; border-radius:6px; backdrop-filter:blur(4px); }
.gal-foot{ text-align:center; padding-bottom:4vh; }
.gal-foot .mono{ font-size:10px; letter-spacing:.22em; }

/* ============ CONTACT ============ */
#contact{ min-height:100svh; display:flex; align-items:center; padding:18vh 0 12vh; }
.contact-h{ font-size:clamp(46px,10vw,140px); font-weight:500; line-height:.98; letter-spacing:-.01em; }
.contact-h br{ }
.contact-sub{ margin-top:30px; font-size:clamp(15px,1.8vw,20px); color:var(--cream-2); font-weight:300; }
.links{ margin-top:54px; display:flex; flex-wrap:wrap; gap:16px; }
.link{ display:inline-flex; align-items:center; gap:16px; text-decoration:none; color:var(--cream); font-family:var(--f-disp); font-size:clamp(24px,3.4vw,40px); font-weight:500; padding:14px 30px 14px 24px; border:1px solid var(--line); border-radius:100px; transition:.45s var(--ease-out); }
.link .idx{ font-size:15px; color:var(--ember); transition:transform .45s; }
.link:hover{ border-color:var(--ember); background:rgba(255,138,60,.07); }
.link:hover .idx{ transform:translateX(6px); }
.footnote{ margin-top:13vh; padding-top:26px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:10px; letter-spacing:.2em; color:var(--dim-2); }

/* ============ LIGHTBOX ============ */
#lightbox{ position:fixed; inset:0; z-index:80; background:rgba(6,4,3,.95); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; padding:6vh 5vw; opacity:0; visibility:hidden; transition:opacity .4s; }
#lightbox.on{ opacity:1; visibility:visible; }
#lightbox figure{ max-width:92vw; max-height:88vh; transform:scale(.96); transition:transform .5s var(--ease-out); }
#lightbox.on figure{ transform:none; }
#lightbox img{ max-width:92vw; max-height:80vh; object-fit:contain; border-radius:6px; box-shadow:0 50px 120px rgba(0,0,0,.8); }
#lbCap{ margin-top:16px; font-size:11px; letter-spacing:.16em; color:var(--dim); text-align:center; }
#lbClose{ position:fixed; top:24px; right:28px; background:transparent; border:1px solid var(--line); color:var(--cream); padding:10px 16px; border-radius:100px; cursor:pointer; font-size:11px; letter-spacing:.16em; transition:.3s; }
#lbClose:hover{ border-color:var(--ember); color:var(--ember); }

/* ============ RESPONSIVE ============ */
@media (max-width:880px){
  #hud .mono{ font-size:9.5px; }
  .hud-tl{ left:24px; gap:10px; } .hud-tr{ right:24px; } .hud-bl{ left:24px; } .hud-br{ right:24px; }
  .bracket{ width:18px; height:18px; }
  .about-grid{ grid-template-columns:1fr; gap:26px; margin-left:0; }
  .proj{ grid-template-columns:1fr; }
  .proj-visual{ min-height:200px; border-left:0; border-top:1px solid var(--line); order:-1; }
}
@media (max-width:560px){
  .lede br.d{ display:none; }
  .cross{ display:none; }
  .links{ flex-direction:column; gap:12px; }
  .link{ width:100%; justify-content:flex-start; }
  .footnote{ flex-direction:column; gap:6px; }
  #hero{ height:180svh; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-r]{ opacity:1 !important; transform:none !important; }
  .lift .kicker,.lift h1 .ln,.lift .lede,.lift .scrollcue{ opacity:1; transform:none; }
  #grain{ display:none; }
}