/* ============================================================
   Mohamed Gamaleldin — Portfolio
   Visual language: cinematic, editorial luxury — inspired by the
   full-bleed photography, engraved serif headlines, restrained
   gold-on-black palette and slow, confident motion of premium
   automotive brand sites. Fixed dark theme, no toggle.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@300;400;500;600&family=Jost:wght@400;500&family=Anton&display=swap');

:root{
  --black:#000000;
  --bg:#0a0a0a;
  --bg-2:#131311;
  --bg-3:#1b1a17;
  --ink:#f3efe6;
  --ink-soft:#b6ada0;
  --ink-faint:#7a7367;
  --line:rgba(243,239,230,0.14);
  --line-soft:rgba(243,239,230,0.08);

  --gold:#c6a565;
  --gold-soft:#e6d3a6;
  --gold-dim:#8a7448;

  --font-display: "Fraunces", "Georgia", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-label: "Jost", "Inter", sans-serif;
  --font-mark: "Anton", "Arial Narrow", sans-serif;

  --radius-lg: 2px;
  --radius-md: 2px;
  --radius-sm: 2px;

  --edge: clamp(20px, 5.5vw, 80px);
  --nav-bg: rgba(6,6,5,0.62);
  --nav-bg-solid: rgba(6,6,5,0.92);
  --shadow-soft: rgba(0,0,0,0.5);
}

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

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block; max-width:100%; height:auto;}
a{color:inherit; text-decoration:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ---------- utility ---------- */
.wrap{ max-width:1320px; margin:0 auto; padding-left:var(--edge); padding-right:var(--edge); }
.wrap-narrow{ max-width:900px; margin:0 auto; padding-left:var(--edge); padding-right:var(--edge); }

.eyebrow{
  font-family:var(--font-label);
  font-size:11.5px; font-weight:500; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--gold);
}

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity 1.1s cubic-bezier(.19,1,.22,1), transform 1.1s cubic-bezier(.19,1,.22,1); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- logo wordmark ---------- */
.mg-mark{
  font-family:var(--font-mark);
  text-transform:uppercase;
  color:var(--ink);
  line-height:0.86;
  letter-spacing:0.005em;
  display:inline-block;
}
.mg-mark .sparkle{
  display:inline-block;
  color:var(--gold);
  transform:translate(2px,-2px);
}
.mg-mark-nav{ font-size:15px; letter-spacing:0.02em; line-height:1; }
.mg-mark-nav .l1, .mg-mark-nav .l2{ display:inline; }
.mg-mark-hero{
  font-size:clamp(46px, 9vw, 128px);
  text-align:center;
}
.mg-mark-hero .l1, .mg-mark-hero .l2{ display:block; }
.mg-mark-hero .sparkle{ font-size:0.5em; }

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:100;
  height:78px; display:flex; align-items:center; justify-content:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .5s ease, border-color .5s ease, backdrop-filter .5s ease;
}
.site-nav.scrolled{
  background:var(--nav-bg-solid);
  backdrop-filter:saturate(140%) blur(16px);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  border-bottom:1px solid var(--line-soft);
  height:64px;
}
.site-nav .inner{
  width:100%; max-width:1400px; padding:0 var(--edge);
  display:flex; align-items:center; justify-content:space-between;
}
.site-nav .brand{ display:flex; align-items:center; gap:0; color:var(--ink); }
.site-nav nav{ display:flex; align-items:center; gap:42px; }
.site-nav nav a{
  font-family:var(--font-label); font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-soft); position:relative; padding-bottom:6px;
  transition:color .3s ease;
}
.site-nav nav a:hover{ color:var(--ink); }
.site-nav nav a.back::before{ content:"← "; }
.site-nav nav a:not(.back)::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.site-nav nav a:not(.back):hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- section rhythm ---------- */
section{ padding:150px 0; }
section.tight{ padding:96px 0; }
section.bg-2{ background:var(--bg-2); }
section.bg-3{ background:var(--bg-3); }

/* ---------- headings ---------- */
h1,h2,h3{ font-family:var(--font-display); font-weight:500; letter-spacing:-0.01em; color:var(--ink); }

.h-hero{ font-size:clamp(42px, 6.6vw, 82px); line-height:1.06; font-weight:400; letter-spacing:-0.01em; text-align:center; }
.h-hero .accent{ color:var(--gold); font-style:italic; }
.h-section{ font-size:clamp(30px, 4vw, 50px); line-height:1.12; font-weight:400; text-align:center; }
.h-sub{ font-family:var(--font-sans); font-size:clamp(17px,1.6vw,19px); font-weight:300; color:var(--ink-soft); text-align:center; max-width:640px; margin:22px auto 0; line-height:1.7; }

.eyebrow-center{ text-align:center; display:block; margin-bottom:20px; }

p.lede{ font-family:var(--font-sans); font-size:19px; font-weight:300; line-height:1.65; color:var(--ink-soft); }
p.body-text{ font-family:var(--font-sans); font-size:15.5px; font-weight:300; line-height:1.8; color:var(--ink-soft); }

/* ---------- discover link (replaces pill buttons) ---------- */
.pill-row{ display:flex; gap:44px; justify-content:center; flex-wrap:wrap; margin-top:40px; }
.discover{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-label); font-size:11.5px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink); padding-bottom:8px; border-bottom:1px solid var(--line);
  transition:border-color .35s ease, color .35s ease, gap .35s ease;
}
.discover span{ transition:transform .35s ease; }
.discover:hover{ color:var(--gold); border-color:var(--gold); gap:16px; }
.discover.ghost{ color:var(--ink-soft); }
.discover.ghost:hover{ color:var(--gold); }

/* legacy pill aliases so older markup still renders sensibly */
.pill{ font-family:var(--font-label); font-size:11.5px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; padding-bottom:8px; border-bottom:1px solid var(--line); transition:border-color .3s ease, color .3s ease; }
.pill-solid{ color:var(--ink); }
.pill-solid:hover{ color:var(--gold); border-color:var(--gold); }
.pill-ghost{ color:var(--ink-soft); }
.pill-ghost:hover{ color:var(--gold); }

/* ---------- rounded media cards ---------- */
.card-media{ overflow:hidden; width:100%; }
.card-media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- portrait ---------- */
.portrait{
  width:220px; height:220px; overflow:hidden; flex:none;
  background:var(--bg-3);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 30px 60px var(--shadow-soft);
}
.portrait img{ width:100%; height:100%; object-fit:cover; }
.portrait .initials{ font-family:var(--font-display); font-size:64px; font-weight:500; color:var(--ink-faint); }

/* ---------- stat row ---------- */
.stat-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; text-align:center; }
.stat-row .stat .num{ font-family:var(--font-display); font-size:clamp(26px,3.2vw,42px); font-weight:400; letter-spacing:-0.01em; color:var(--ink); }
.stat-row .stat .num sup{ font-size:0.4em; font-weight:400; margin-left:2px; top:-0.6em; }
.stat-row .stat .cap{ font-family:var(--font-label); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:12px; }

/* ---------- feature split (image + text) ---------- */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.feature.reverse .f-media{ order:2; }
.feature.reverse .f-copy{ order:1; }
.f-copy h3{ font-family:var(--font-display); font-size:clamp(24px,2.8vw,32px); font-weight:400; margin-bottom:18px; }
.f-copy p + p{ margin-top:14px; }

/* ---------- tag chips ---------- */
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.chip{
  font-family:var(--font-label); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
  padding:11px 20px; border:1px solid var(--line); color:var(--ink-soft); background:transparent;
}
.chip.sage{ color:var(--gold); border-color:var(--gold-dim); }

/* ---------- unit rows ---------- */
.unit-table{ max-width:720px; margin:52px auto 0; }
.unit-row{
  display:grid; grid-template-columns:90px 1fr 150px; gap:20px; align-items:baseline;
  padding:24px 0; border-bottom:1px solid var(--line);
}
.unit-row .type{ font-family:var(--font-display); font-size:22px; font-weight:500; color:var(--ink); }
.unit-row .desc{ font-family:var(--font-sans); font-size:13.5px; font-weight:300; color:var(--ink-soft); }
.unit-row .range{ font-family:var(--font-label); font-size:12px; letter-spacing:0.06em; color:var(--ink-faint); text-align:right; }

/* ---------- gallery grid ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; }
.gallery-grid .g-wide{ grid-column:span 2; aspect-ratio:16/8; }
.gallery-grid .g-tall{ aspect-ratio:4/5; }

/* ---------- showroom grid (home — replaces list rows) ---------- */
.showroom-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; margin-top:64px; }
.showroom-card{ position:relative; display:block; overflow:hidden; background:var(--bg-2); aspect-ratio:4/5; }
.showroom-card .sc-media{ position:absolute; inset:0; overflow:hidden; }
.showroom-card .sc-media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); transition:transform 1.4s cubic-bezier(.19,1,.22,1), filter 1.4s ease;
  filter:grayscale(0.25) brightness(0.82);
}
.showroom-card:hover .sc-media img{ transform:scale(1.12); filter:grayscale(0) brightness(0.92); }
.showroom-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.86) 100%);
}
.showroom-card .sc-copy{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:34px 36px; }
.showroom-card .sc-num{ font-family:var(--font-label); font-size:11px; letter-spacing:0.2em; color:var(--gold-soft); margin-bottom:10px; display:block; }
.showroom-card h2{ font-family:var(--font-display); font-size:clamp(24px,2.6vw,32px); font-weight:400; color:var(--ink); }
.showroom-card .sc-meta{ font-family:var(--font-label); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:8px; }
.showroom-card .sc-discover{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-family:var(--font-label); font-size:10.5px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink);
  opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease;
}
.showroom-card:hover .sc-discover{ opacity:1; transform:translateY(0); }
.showroom-card.soon{ pointer-events:none; }
.showroom-card.soon .sc-media{ background:var(--bg-3); }
.showroom-card.soon h2{ color:var(--ink-faint); }
.showroom-card.wide{ grid-column:span 2; aspect-ratio:16/8; }

@media (max-width:900px){
  .showroom-grid{ grid-template-columns:1fr; }
  .showroom-card.wide{ grid-column:span 1; aspect-ratio:4/5; }
}

/* ---------- footer ---------- */
footer{ background:var(--black); padding:80px 0 28px; border-top:1px solid var(--line-soft); }
footer .foot-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; padding-bottom:48px; }
footer h3{ font-family:var(--font-display); font-size:clamp(26px,3.2vw,40px); font-weight:400; max-width:520px; }
footer .contact-list{ display:flex; flex-direction:column; gap:12px; margin-top:22px; }
footer .contact-list a{ font-family:var(--font-label); font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }
footer .contact-list a:hover{ color:var(--gold); }
footer .foot-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding-top:26px; border-top:1px solid var(--line-soft);
  font-family:var(--font-label); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint);
}
footer .foot-bottom a:hover{ color:var(--gold); }

@media (max-width:820px){
  .feature, .feature.reverse{ grid-template-columns:1fr; gap:32px; }
  .feature.reverse .f-media, .feature.reverse .f-copy{ order:0; }
  .stat-row{ grid-template-columns:repeat(2,1fr); gap:40px 20px; }
  .gallery-grid{ grid-template-columns:1fr; }
  .gallery-grid .g-wide{ grid-column:span 1; aspect-ratio:4/3; }
  .site-nav nav{ gap:22px; }
  section{ padding:96px 0; }
}
@media (max-width:520px){
  .portrait{ width:150px; height:150px; }
  .portrait .initials{ font-size:44px; }
  .site-nav nav a:not(.back){ display:none; }
}

/* ============================================================
   Motion system
   ============================================================ */

.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:var(--gold); z-index:300; transform-origin:left;
  transition:width .08s linear;
}

.parallax-img{ will-change:transform; transform:translateY(0); }
.hero-fade{ will-change:transform, opacity; }

.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1.1s cubic-bezier(.19,1,.22,1), transform 1.1s cubic-bezier(.19,1,.22,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(.96); transition:opacity 1.2s cubic-bezier(.19,1,.22,1), transform 1.2s cubic-bezier(.19,1,.22,1); }
.reveal-scale.in{ opacity:1; transform:scale(1); }
.reveal-left{ opacity:0; transform:translateX(-34px); transition:opacity 1s cubic-bezier(.19,1,.22,1), transform 1s cubic-bezier(.19,1,.22,1); }
.reveal-left.in{ opacity:1; transform:translateX(0); }
.reveal-right{ opacity:0; transform:translateX(34px); transition:opacity 1s cubic-bezier(.19,1,.22,1), transform 1s cubic-bezier(.19,1,.22,1); }
.reveal-right.in{ opacity:1; transform:translateX(0); }

.stagger > *{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; transition-delay:var(--d,0s); }
.stagger.in > *{ opacity:1; transform:translateY(0); }

/* ---------- stacking scrollytelling panels ---------- */
.stack-scrolly{ position:relative; background:#000; }
.stack-panel{
  position:sticky; top:78px; height:calc(100vh - 78px);
  overflow:hidden; display:flex; align-items:flex-end;
}
.stack-panel img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.08); transition:transform 1.6s cubic-bezier(.19,1,.22,1);
  filter:grayscale(0.2) brightness(0.9);
}
.stack-panel.is-active img{ transform:scale(1); filter:grayscale(0) brightness(1); }
.stack-panel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.86) 100%);
}
.stack-caption{ position:relative; z-index:2; color:#fff; padding:70px var(--edge); max-width:640px; }
.stack-caption .step-num{
  font-family:var(--font-label); color:var(--gold-soft); font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase;
  display:block; margin-bottom:14px;
  opacity:0; transform:translateY(14px); transition:opacity .7s ease .05s, transform .7s ease .05s;
}
.stack-caption h3{
  font-family:var(--font-display); font-size:clamp(24px,3.4vw,40px); color:#fff; font-weight:400; line-height:1.18;
  opacity:0; transform:translateY(14px); transition:opacity .7s ease .12s, transform .7s ease .12s;
}
.stack-panel.is-active .step-num,
.stack-panel.is-active h3{ opacity:1; transform:translateY(0); }
.stack-progress{
  position:absolute; right:var(--edge); bottom:70px; z-index:2;
  display:flex; flex-direction:column; gap:10px;
}
.stack-progress .dot{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.3); transition:background .3s ease, transform .3s ease; }
.stack-progress .dot.on{ background:var(--gold); transform:scale(1.5); }

@media (max-width:820px){
  .stack-panel{ top:64px; height:calc(100vh - 64px); }
  .stack-caption{ padding:44px 24px; }
  .stack-progress{ display:none; }
}

/* ---------- hover tilt ---------- */
@media (hover:hover) and (pointer:fine){
  .tilt{ transition:transform .3s cubic-bezier(.2,.7,.2,1); transform-style:preserve-3d; will-change:transform; }
}

/* ---------- large uncropped profile portrait ---------- */
.profile-card{
  width:100%; max-width:380px; overflow:hidden;
  box-shadow:0 30px 60px var(--shadow-soft);
}
.profile-card img{ width:100%; height:auto; display:block; filter:grayscale(0.15); }

@media (max-width:820px){
  .profile-card{ max-width:280px; margin:0 auto; }
}

/* ---------- micro-interactions ---------- */
.chip{ transition:transform .25s ease, border-color .25s ease, color .25s ease; cursor:default; }
.chip:hover{ transform:translateY(-2px); border-color:var(--gold); color:var(--gold); }

a.project-link .title-block h2::after{
  content:"→"; display:inline-block; margin-left:12px; font-size:0.5em; vertical-align:middle;
  opacity:0; transform:translate(-8px,-2px);
  transition:opacity .3s ease, transform .3s ease;
}
a.project-link:hover .title-block h2::after{ opacity:1; transform:translate(0,-2px); }

/* ---------- back to top ---------- */
.back-to-top{
  position:fixed; right:26px; bottom:26px; width:42px; height:42px; border-radius:50%;
  background:var(--ink); color:var(--black); border:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .3s ease;
  z-index:150; cursor:pointer; box-shadow:0 10px 26px var(--shadow-soft);
}
.back-to-top.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.back-to-top:hover{ background:var(--gold); transform:translateY(-3px) scale(1.06); }
.back-to-top:active{ transform:translateY(-1px) scale(0.96); }
.back-to-top svg{ width:16px; height:16px; }

.stack-progress .dot.on{ animation:dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(198,165,101,0.35); }
  50%{ box-shadow:0 0 0 6px rgba(198,165,101,0); }
}

@media (prefers-reduced-motion: reduce){
  .stack-progress .dot.on{ animation:none; }
}

/* ---------- project detail hero ---------- */
.hero-project{
  position:relative; height:94vh; min-height:600px; overflow:hidden;
  display:flex; align-items:flex-end;
}
.hero-project img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(0.15) brightness(0.9);
}
.hero-project::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.08) 40%, rgba(0,0,0,0.9) 100%);
}
.hero-project .wrap{ position:relative; z-index:2; width:100%; padding-bottom:76px; color:var(--ink); }
.hero-project .eyebrow{ margin-bottom:20px; display:block; }
.hero-project h1{
  font-family:var(--font-display); font-size:clamp(46px,8.6vw,108px); line-height:0.98;
  color:var(--ink); font-weight:500; letter-spacing:-0.01em;
}
.hero-meta{
  margin-top:34px; display:flex; flex-wrap:wrap; gap:30px 52px;
  border-top:1px solid var(--line); padding-top:22px;
}
.hero-meta .k{ font-family:var(--font-label); font-size:10.5px; text-transform:uppercase; letter-spacing:0.18em; color:var(--ink-faint); margin-bottom:6px; }
.hero-meta .v{ font-family:var(--font-sans); font-size:14px; color:var(--ink); font-weight:300; }

/* ---------- section head + narrow intro ---------- */
.sec-head{ text-align:center; margin-bottom:60px; }
.sec-head .eyebrow{ display:block; margin-bottom:14px; }
.sec-head p{ max-width:640px; margin:18px auto 0; }
.intro-wrap{ text-align:center; }
.intro-wrap .lede{ max-width:760px; margin:22px auto 0; text-align:center; }

/* ---------- two-image amenity grid ---------- */
.amenity-media{ display:grid; grid-template-columns:1.3fr 1fr; gap:2px; margin-top:50px; }
.amenity-media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- closing credits row ---------- */
.credits{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; text-align:center; }
.credits .k{ font-family:var(--font-label); font-size:11px; text-transform:uppercase; letter-spacing:0.16em; color:var(--ink-faint); margin-bottom:10px; }
.credits .v{ font-family:var(--font-sans); font-size:14.5px; font-weight:300; color:var(--ink-soft); }

/* ---------- zone / tag grid (used on some project pages) ---------- */
.zone-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:2px; margin-top:44px; }
.zone-grid .zone-chip{
  text-align:center; padding:20px 8px; background:var(--bg-2);
  font-family:var(--font-label); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);
}

@media (max-width:820px){
  .amenity-media{ grid-template-columns:1fr; }
  .credits{ grid-template-columns:1fr; gap:28px; }
  .zone-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- fullscreen image lightbox ---------- */
img.lb{ cursor:zoom-in; }
.lightbox{
  position:fixed; inset:0; z-index:500; background:rgba(5,5,5,0.97);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s ease, visibility 0s linear .4s;
}
.lightbox.open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .4s ease, visibility 0s linear 0s;
}
.lightbox-stage{
  position:relative; width:min(92vw,1500px); height:min(86vh,920px);
  display:flex; align-items:center; justify-content:center;
}
.lightbox-stage img{
  max-width:100%; max-height:100%; object-fit:contain;
  box-shadow:0 50px 120px rgba(0,0,0,0.6);
  opacity:0; transform:scale(0.97); transition:opacity .35s ease, transform .35s ease;
}
.lightbox-stage img.show{ opacity:1; transform:scale(1); }

.lightbox-close, .lightbox-prev, .lightbox-next{
  position:fixed; background:transparent; border:1px solid var(--line-soft); color:var(--ink);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{
  border-color:var(--gold); color:var(--gold);
}
.lightbox-close{ top:28px; right:32px; width:44px; height:44px; border-radius:50%; font-size:16px; z-index:502; }
.lightbox-prev, .lightbox-next{ top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; font-size:22px; z-index:502; }
.lightbox-prev{ left:24px; }
.lightbox-next{ right:24px; }
.lightbox-count{
  position:fixed; bottom:30px; left:50%; transform:translateX(-50%);
  font-family:var(--font-label); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-faint); z-index:502;
}
@media (max-width:640px){
  .lightbox-prev, .lightbox-next{ width:40px; height:40px; font-size:18px; }
  .lightbox-prev{ left:10px; }
  .lightbox-next{ right:10px; }
  .lightbox-close{ top:16px; right:16px; width:38px; height:38px; }
}

/* ---------- legacy element rename shims (project-row still used as fallback) ---------- */
.project-row{
  display:grid; grid-template-columns:56px 1fr auto auto; align-items:center; gap:24px;
  padding:34px 0; border-top:1px solid var(--line);
}
.project-row:last-child{ border-bottom:1px solid var(--line); }
.project-row .num{ font-family:var(--font-label); font-size:12px; letter-spacing:0.1em; color:var(--ink-faint); }
.project-row .title-block h2{ font-family:var(--font-display); font-size:clamp(22px,2.8vw,30px); font-weight:400; color:var(--ink); transition:color .3s ease; }
.project-row .title-block .meta{ font-family:var(--font-label); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:8px; }
.project-row .year{ font-family:var(--font-label); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); }
.project-row .thumb{
  width:88px; height:60px; overflow:hidden; opacity:0; transform:translateX(8px);
  transition:opacity .3s ease, transform .3s ease;
}
.project-row .thumb img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0.3); }
a.project-link{ display:block; }
a.project-link:hover .project-row .title-block h2{ color:var(--gold); }
a.project-link:hover .project-row .thumb{ opacity:1; transform:translateX(0); }
.project-row.soon{ opacity:0.4; }