/* Archivo variable (Google Fonts). echeng.com proper uses a neutral system sans;
   the projects section pairs it with Archivo for editorial scale contrast. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

/* echeng.com projects — color tokens
   Dark-only, like the parent site — but lifted off pure black for reading.
   echeng.com proper is #0a0a0a; the projects section sits a few stops up:
   warm charcoal paper, soft off-white ink. No light mode. */
:root {
  /* base */
  --paper: #1c1b19;        /* page background — warm charcoal, not black */
  --surface: #262521;      /* cards, faux-UI placeholder screens */
  --surface-2: #32302b;    /* recessed placeholder blocks */
  --ink: #e8e5df;          /* primary text — warm off-white */
  --ink-2: #a39f96;        /* secondary text, captions, metadata */
  --ink-3: #6b6860;        /* tertiary: ghost numerals, disabled */
  --hairline: rgba(232, 229, 223, 0.14);
  --hairline-strong: rgba(232, 229, 223, 0.34);
  --scrim: linear-gradient(to top, rgba(10,10,10,0.72), rgba(10,10,10,0.0) 60%);
  /* semantic */
  --text-muted: var(--ink-2);
  --surface-page: var(--paper);
  --surface-card: var(--surface);
  --border-default: var(--hairline);
  --link: var(--ink);
  --link-underline: rgba(232, 229, 223, 0.35);
  --chip-active-bg: var(--ink);
  --chip-active-fg: var(--paper);
  --focus-ring: rgba(232, 229, 223, 0.6);
  /* imagery sits on true near-black — matches echeng.com proper */
  --media-well: #0a0a0a;
  color-scheme: dark;
}
/* [data-theme="black"] — optional: drop to the parent site's pure black
   (used by full-bleed cinematic surfaces so they read as one with echeng.com) */
[data-theme="black"] {
  --paper: #0a0a0a;
  --surface: #161616;
  --surface-2: #211f1d;
  /* re-declare aliases so they pick up the black values (aliases resolve where declared) */
  --surface-page: var(--paper);
  --surface-card: var(--surface);
  --chip-active-fg: var(--paper);
}

/* echeng.com projects — typography tokens
   One neutral grotesque (Archivo) at strong editorial scale contrast:
   huge tight display, modest body, small letterspaced caps for metadata. */
:root {
  --font-sans: "Archivo", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* scale (fluid where it matters) */
  --text-display: clamp(3rem, 8vw, 6.5rem);       /* 48–104px: page titles */
  --text-title: clamp(2rem, 4.5vw, 3.5rem);       /* 32–56px: project row titles */
  --text-heading: clamp(1.5rem, 2.5vw, 1.75rem);  /* 24–28px: section headings */
  --text-lead: clamp(1.125rem, 1.8vw, 1.3125rem); /* 18–21px: intros */
  --text-body: 1.0625rem;                          /* 17px */
  --text-small: 0.875rem;                          /* 14px */
  --text-meta: 0.75rem;                            /* 12px, uppercase */

  --leading-display: 0.98;
  --leading-title: 1.04;
  --leading-heading: 1.2;
  --leading-body: 1.65;
  --leading-meta: 1.4;

  --tracking-display: -0.025em;
  --tracking-title: -0.02em;
  --tracking-meta: 0.14em;   /* uppercase metadata */
  --tracking-wordmark: 0.22em; /* ERIC CHENG */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 620;   /* Archivo is variable */
}

/* echeng.com projects — spacing, layout, radii */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --page-max: 1200px;                          /* landing + detail container */
  --measure: 680px;                            /* long-form reading measure */
  --page-pad: clamp(20px, 4vw, 48px);          /* horizontal page padding */
  --section-gap: clamp(48px, 8vw, 96px);       /* between project rows / page sections */

  /* photographic = sharp. No rounded cards. */
  --radius-0: 0px;
  --radius-interactive: 2px;   /* chips, buttons only */
  --radius-pill: 999px;        /* filter chips */
}

/* echeng.com projects — motion, focus, image treatment. No shadows anywhere: hierarchy comes from hairlines and scale. */
:root {
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
  --hover-dim: 0.85;        /* text/link hover = opacity dip */
  --image-hover-scale: 1.02; /* thumbnails ease in scale on hover */
  --aspect-thumb: 21 / 10;   /* landing row thumbnails */
  --aspect-hero: 16 / 9;     /* detail hero + video */
  --aspect-gallery: 1 / 1;   /* gallery grid cells */
}

/* Minimal element defaults for the projects section. */
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 3px;
  transition: opacity var(--duration-fast) var(--ease-out);
}
a:hover { opacity: var(--hover-dim); }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Long-form article styling for project pages. Apply class="prose" to the writeup container.
   Everything sits on the 680px measure; quiet, editorial, no decorative chrome. */
.prose { font-size: var(--text-body); line-height: var(--leading-body); }
.prose h2 {
  font-size: var(--text-heading); line-height: var(--leading-heading);
  letter-spacing: var(--tracking-title); font-weight: var(--weight-semibold);
  margin: var(--space-8) 0 var(--space-4);
}
.prose h3 {
  font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em;
  font-weight: var(--weight-semibold); margin: var(--space-6) 0 var(--space-3);
}
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 var(--space-5); text-wrap: pretty; }
.prose ul, .prose ol { margin: 0 0 var(--space-5); padding-left: 1.4em; }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--ink-3); }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { padding-left: 1.4em; position: relative; }
.prose ul li::before { content: "\2014"; position: absolute; left: 0; color: var(--ink-3); }
.prose blockquote {
  margin: var(--space-7) 0; padding: var(--space-5) 0;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  font-size: 1.5rem; line-height: 1.4; letter-spacing: -0.01em; font-weight: var(--weight-medium);
}
.prose blockquote p { margin: 0; }
.prose blockquote footer {
  margin-top: var(--space-3); font-size: var(--text-meta); font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--ink-2);
}
.prose code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--surface-2); padding: 1px 5px;
}
.prose pre { background: var(--surface-2); padding: var(--space-4); overflow-x: auto; margin: 0 0 var(--space-5); }
.prose pre code { background: none; padding: 0; }
.prose hr { border: none; border-top: 1px solid var(--hairline); margin: var(--space-7) 0; }
.prose strong { font-weight: var(--weight-semibold); }


/* ---- components (generated by build.py; tokens above are design_handoff/design/tokens/*) ---- */
* { box-sizing: border-box; }
.meta, .tier-label, .crumb, .badge {
  font-size: var(--text-meta); letter-spacing: var(--tracking-meta);
  text-transform: uppercase; color: var(--ink-2); line-height: var(--leading-meta);
}

/* header — ported verbatim from echeng.com (cloud/frontend/index.html) */
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(https://echeng.com/static/montserrat-700.woff2) format('woff2');
}
:root {
  --nav-bg: #0a0a0a;
  --nav-surface2: #1e1e1e;
  --nav-text: #e0e0e0;
  --nav-text-dim: rgba(224,224,224,0.5);
  --nav-text-dimmer: rgba(224,224,224,0.3);
  --nav-height: 56px;
  --nav-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-height); display: flex; align-items: center;
  padding: 0 24px; gap: 24px; font-family: var(--nav-font);
  transition: background 0.3s, transform 0.3s;
}
.nav.scrolled { background: rgba(10,10,10,0.92); backdrop-filter: blur(12px); }
.nav.hidden { transform: translateY(-100%); }
.nav-title {
  font-family: 'Montserrat', var(--nav-font); font-size: 22px; font-weight: 700;
  letter-spacing: 0.075em; text-transform: uppercase;
  color: var(--nav-text); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.nav-title:hover { opacity: 1; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-link {
  padding: 6px 14px; font-size: 13px; font-weight: 500;
  color: var(--nav-text-dim); text-decoration: none; border-radius: 20px;
  transition: color 0.2s, background 0.2s; cursor: pointer;
}
.nav-link:hover, .nav-link.active { color: var(--nav-text); background: var(--nav-surface2); opacity: 1; }
.nav-hamburger {
  display: none; background: none; border: none; color: var(--nav-text-dim);
  cursor: pointer; padding: 6px; font-size: 22px; line-height: 1;
}
.nav-hamburger:hover { color: var(--nav-text); }
.search-bar {
  position: relative;
  display: flex; align-items: center; background: var(--nav-surface2);
  border-radius: 24px; padding: 0 16px; height: 36px;
  flex: 1; max-width: 240px; min-width: 0;
}
.search-bar form { flex: 1; min-width: 0; display: flex; margin: 0; }
.search-bar input {
  flex: 1; min-width: 0; background: none; border: none; color: var(--nav-text);
  font-size: 14px; outline: none; font-family: var(--nav-font);
}
.search-bar input::placeholder { color: var(--nav-text-dimmer); }
.search-bar input::-webkit-search-cancel-button { display: none; }
@media (max-width: 768px) {
  .nav { padding: 0 16px; gap: 12px; }
  .nav-hamburger { display: block; }
  .nav-links {
    position: fixed; top: var(--nav-height); left: 0; right: 0;
    flex-direction: column; background: rgba(10,10,10,0.95);
    backdrop-filter: blur(12px); padding: 12px 16px; gap: 4px;
    display: none; border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav-links.mobile-open { display: flex; }
  .nav-link { padding: 10px 14px; font-size: 14px; }
  .search-bar { max-width: 160px; }
}

body { padding-top: var(--nav-height); }
main { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); }

/* landing intro */
.intro { padding: var(--section-gap) 0 var(--space-7); }
.intro h1 { margin: 0; font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-weight: var(--weight-semibold); }
.intro h1 sup { font-size: 0.28em; font-weight: var(--weight-medium); color: var(--text-muted); letter-spacing: 0; margin-left: 0.3em; }
.intro > p { margin: var(--space-4) 0 var(--space-6); max-width: 560px; font-size: var(--text-lead); line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.chips button { font: inherit; font-size: var(--text-small); cursor: pointer; padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: transparent; color: var(--ink); transition: border-color var(--duration-fast) var(--ease-out); }
.chips button:hover { border-color: var(--hairline-strong); }
.chips button[aria-pressed="true"] { background: var(--chip-active-bg); border-color: var(--chip-active-bg); color: var(--chip-active-fg); }
.chips button span { opacity: 0.55; margin-left: 6px; }

/* badges */
.badge { display: inline-flex; align-items: center; padding: 3px 10px 2px; border: 1px solid var(--hairline); border-radius: 999px; white-space: nowrap; }
.badge-strong { color: var(--ink); border-color: var(--hairline-strong); }
.badge-mid { color: var(--ink-2); }
.badge-low { color: var(--ink-3); }

.tier-label { color: var(--ink-3); margin-bottom: var(--space-3); }

/* featured rows */
.row { display: block; text-decoration: none; color: var(--ink); border-top: 1px solid var(--hairline); padding: var(--space-6) 0 var(--section-gap); }
.row:hover { opacity: 1; }
.row .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.row h2 { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: var(--tracking-title); font-weight: var(--weight-semibold); text-wrap: pretty; transition: opacity var(--duration-fast) var(--ease-out); }
.row .sub { margin: 0 0 var(--space-5); max-width: 640px; color: var(--text-muted); font-size: var(--text-lead); line-height: 1.5; text-wrap: pretty; transition: opacity var(--duration-fast) var(--ease-out); }
.row:hover h2, .row:hover .sub { opacity: var(--hover-dim); }
.thumb-2110 { display: block; aspect-ratio: var(--aspect-thumb); overflow: hidden; background: var(--media-well); }
.thumb-1610 { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--media-well); }
.row img, .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.row:hover img, .tile:hover img { transform: scale(var(--image-hover-scale)); }

/* tiles */
.all-tier { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }
.tiles { border-top: 1px solid var(--hairline); padding-top: var(--space-5); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--space-7) var(--space-5); }
.tile { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.tile:hover { opacity: 1; }
.tile .meta { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5em; font-size: 0.6875rem; letter-spacing: 0.08em; line-height: 1.8; color: var(--ink-2); }
.tile .meta span { white-space: nowrap; }
.tile .meta span:not(:last-child)::after { content: "\00a0\00a0\00b7"; color: var(--ink-2); letter-spacing: 0; }
.tile .meta .date { color: var(--ink-2); }
.tile .name { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: 1.125rem; line-height: 1.2; letter-spacing: var(--tracking-title); font-weight: var(--weight-semibold); }
.tile .name > span:first-child { transition: opacity var(--duration-fast) var(--ease-out); }
.tile:hover .name > span:first-child { opacity: var(--hover-dim); }
.tile .sub { font-size: var(--text-small); line-height: 1.5; color: var(--text-muted); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.empty { padding: var(--space-7) 0 var(--section-gap); border-top: 1px solid var(--hairline); margin: 0; color: var(--text-muted); }
[hidden] { display: none !important; }

/* hero fallback */
.fallback { width: 100%; height: 100%; background: var(--media-well); border: 1px solid var(--hairline); padding: clamp(18px, 4.5%, 44px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; container-type: inline-size; }
.fallback .fb-meta { font-size: var(--text-meta); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--ink-3); line-height: var(--leading-meta); }
.fallback .fb-body { display: block; }
.fallback .fb-title { display: block; font-size: clamp(26px, 5.5cqw, 56px); line-height: var(--leading-title); letter-spacing: var(--tracking-title); font-weight: var(--weight-semibold); color: var(--ink); text-wrap: balance; }
.fallback .fb-path { display: block; margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-small); color: var(--ink-3); }
.fallback.compact { padding: 12px 14px; }
.fallback.compact .fb-meta { font-size: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.fallback.compact .fb-title { font-size: clamp(15px, 9cqw, 20px); line-height: 1.1; overflow-wrap: anywhere; text-wrap: initial; }

/* detail page */
.crumb { padding: var(--space-6) 0 var(--space-5); }
.crumb a { color: inherit; text-decoration: none; font-weight: var(--weight-semibold); }
.crumb-sep { color: var(--text-muted); }
.hero { margin: 0; }
.hero .well { aspect-ratio: var(--aspect-hero); background: var(--media-well); overflow: hidden; }
.natural { aspect-ratio: auto !important; }
.natural img { width: 100%; height: auto; display: block; object-fit: unset; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-head { padding: var(--space-7) 0 var(--space-6); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.detail-head h1 { margin: 0; font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-weight: var(--weight-semibold); text-wrap: balance; }
.detail-head p { margin: var(--space-5) 0 0; max-width: 720px; font-size: var(--text-lead); line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-5) var(--space-6); margin: 0 0 var(--space-7); }
.facts > div { border-top: 1px solid var(--hairline); padding-top: var(--space-3); }
.facts dt { font-size: var(--text-meta); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--space-2); }
.facts dd { margin: 0; font-size: 15px; line-height: 1.5; }
.link-list { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
article { padding-bottom: var(--section-gap); }
.measure { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.article-fig { margin: var(--space-6) 0; }
.article-fig a { display: block; background: var(--media-well); cursor: zoom-in; }
.article-fig img { width: 100%; height: auto; display: block; }
.article-fig figcaption { margin-top: var(--space-2); font-size: var(--text-small); color: var(--text-muted); }
.origin-prompt { max-width: var(--measure); margin: var(--section-gap) auto 0; }
.origin-prompt .origin-intro { margin: 0 0 var(--space-5); }
.origin-prompt blockquote { margin: 0; padding: var(--space-5) var(--space-6); border-left: 2px solid var(--hairline-strong); background: var(--media-well); border-radius: 6px; font-size: var(--text-small); font-weight: var(--weight-regular); letter-spacing: 0; }
.origin-prompt blockquote p { margin: 0 0 var(--space-4); line-height: 1.65; color: var(--text-muted); }
.origin-prompt blockquote p:last-child { margin-bottom: 0; }
.origin-prompt blockquote ul { margin: 0 0 var(--space-4); padding-left: 1.25em; color: var(--text-muted); font-size: inherit; }
.origin-prompt blockquote li { margin: 0 0 var(--space-1); line-height: 1.65; }
.origin-prompt.inline { margin: var(--space-6) 0; }
.origin-prompt.inline .tier-label { margin-bottom: var(--space-2); }
.origin-prompt.inline blockquote { max-height: 24rem; overflow-y: auto; }
.statement { max-width: var(--measure); margin: 0 auto var(--space-7); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: var(--space-6) 0; }
.statement p { margin: 0; font-size: clamp(1.375rem, 2.2vw, 1.5rem); line-height: 1.4; letter-spacing: -0.01em; font-weight: var(--weight-medium); text-wrap: pretty; }
.features { margin-top: var(--space-6); }
.tech-wrap { margin-top: var(--space-7); }

/* under the hood */
.tech { background: var(--media-well); border: 1px solid var(--hairline); padding: var(--space-6); }
.tech h2, .tech .lab { font-size: var(--text-meta); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--ink-3); line-height: var(--leading-meta); font-weight: var(--weight-medium); }
.tech h2 { color: var(--ink-2); margin: 0 0 var(--space-5); }
.tech .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-5) var(--space-6); margin-bottom: var(--space-6); }
.tech .stats > div { border-top: 1px solid var(--hairline); padding-top: var(--space-3); }
.tech .num { display: block; font-family: var(--font-mono); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15; color: var(--ink); }
.tech .stats .lab { display: block; margin-top: var(--space-2); }
.tech-row { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-4); border-top: 1px solid var(--hairline); padding: var(--space-3) 0; }
.tech .val { font-family: var(--font-mono); font-size: var(--text-small); line-height: 1.7; color: var(--ink); }
.notable { border-top: 1px solid var(--hairline); padding-top: var(--space-3); }
.notable .lab { margin-bottom: var(--space-3); }
.notable ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.notable li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); font-size: var(--text-small); line-height: 1.6; color: var(--text-muted); }
.notable li > span:first-child { color: var(--ink-3); }

/* demo video */
.video-sec { margin-top: var(--section-gap); }
.video-sec video { width: 100%; display: block; background: var(--media-well); }

/* gallery */
.gallery-sec { margin-top: var(--section-gap); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); }
.gallery a { display: block; aspect-ratio: var(--aspect-gallery); overflow: hidden; background: var(--media-well); cursor: zoom-in; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.gallery a:hover img { transform: scale(var(--image-hover-scale)); }
.gallery a:hover { opacity: 1; }

/* prev/next */
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); border-top: 1px solid var(--hairline); }
.prevnext a { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: var(--ink); padding: var(--space-5) 0; }
.prevnext .pn-next { text-align: right; }
.prevnext .pn-title { font-size: var(--text-heading); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-title); line-height: var(--leading-heading); }
.prevnext a:hover { opacity: var(--hover-dim); }

/* footer */
.site-footer { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-6) var(--page-pad) var(--space-7); border-top: 1px solid var(--hairline); margin-top: var(--section-gap); font-size: var(--text-small); color: var(--text-muted); }
.site-footer a { color: var(--text-muted); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10,10,10,0.96); display: flex; flex-direction: column; }
.lightbox .lb-top { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-5); }
.lightbox .lb-count { font-size: var(--text-meta); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: rgba(232,229,223,0.65); }
.lightbox button { font: inherit; font-size: 26px; line-height: 1; cursor: pointer; background: none; border: none; color: rgba(232,229,223,0.75); padding: var(--space-4); min-width: 44px; min-height: 44px; }
.lightbox .lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 0; padding: 0 var(--space-2); }
.lightbox img { max-width: calc(100% - 16px); max-height: 100%; object-fit: contain; animation: lb-fade var(--duration-base) var(--ease-out); }
.lightbox .lb-caption { padding: var(--space-4) var(--space-5) var(--space-5); text-align: center; min-height: 24px; font-size: var(--text-small); color: rgba(232,229,223,0.65); }
@keyframes lb-fade { from { opacity: 0 } to { opacity: 1 } }