/* ===== Fonts ===== */
@font-face {
  font-family: 'VoxelFoundersGroteskMono';
  src: url('/fonts/FoundersGroteskMonoWeb-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VoxelFoundersGroteskMono';
  src: url('/fonts/FoundersGroteskMonoWeb-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VoxelFoundersGroteskText';
  src: url('/fonts/founders-grotesk-text-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VoxelFoundersGroteskText';
  src: url('/fonts/founders-grotesk-text-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VoxelFoundersGroteskText';
  src: url('/fonts/founders-grotesk-text-regular-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'VoxelFoundersGroteskText';
  src: url('/fonts/founders-grotesk-text-bold-italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ===== Shared font stacks =====
   Every rule site-wide references these instead of respelling the fallback
   list (which had drifted across files). */
:root {
  --font-mono: 'VoxelFoundersGroteskMono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-text: 'VoxelFoundersGroteskText', system-ui, -apple-system, sans-serif;
  /* Text-color tiers — every `color:` on text uses one of these four.
     (Borders and backgrounds stay literal #000/#fff.) */
  --ink: #000;        /* headings, links, dept/event body text */
  --ink-soft: #333;   /* default body text */
  --ink-muted: #555;  /* labels, kickers, captions */
  --ink-faint: #888;  /* de-emphasized: pending states, tile dates */
}

/* ===== Breakpoint ladder =====
   600px — small-phone tweaks (type sizes, single-column galleries)
   700px — rows/lists collapse to one column; stacked footer
   720px — header switches to the stacked mobile nav (721px min-width pair)
   800px — homepage stage + past-event galleries reflow
   900px — event page's ticket sidebar folds under the content
   Deliberate outliers: 760px (VE's three-column card grid),
   749px (past-event image rows, ported from voxel.org). */

/* ===== Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  background: #ffffff;
  font-family: var(--font-text);
  color: var(--ink-soft);
}
/* Standard page scaffold: content clears the fixed header via body padding.
   Shared by every page except the homepage, which spaces content with .stage
   padding instead and zeroes this out in home.css. */
body {
  min-height: 100vh;
  padding-top: 11rem;
  padding-bottom: 4rem;
}
p {
  font-family: var(--font-text);
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0 0 0.9rem;
}
/* Zero specificity so the dept/event pages' black-ink baseline (also zero,
   but later in the cascade) wins on those pages. */
:where(p) { color: var(--ink-soft); }
p:last-child { margin-bottom: 0; }

/* Inline links inherit text color — never browser-default blue/purple.
   Wrapped in :where() so any class-level rule (.signup-link, .meta-cta …) wins. */
:where(a, a:link, a:visited, a:hover, a:active) { color: inherit; }

/* Removes an element from the visual page while leaving it in the accessibility
   tree and in the HTML for crawlers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===== Button block (reusable CTA — matches the homepage mailing-list button) =====
   Scoped as `.button-block a.button-link` (specificity 0,2,1) so it beats the
   page-level `.main a { color:#000 }` rule in dept-page.css that would
   otherwise make the white button text black. */
.button-block { margin: 1.5rem 0; }
.button-block a.button-link,
.about a.signup-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 0.55rem 1.1rem;
  background: #000;
  color: #fff;
  border: 2px solid #000;
  text-decoration: none;
  cursor: pointer;
}
.button-block a.button-link:hover,
.about a.signup-link:hover {
  background: #fff;
  color: var(--ink);
}

/* ===== Header with nav + voxel logo =====
   Fixed, and docks continuously via --dock (0 at the top → 1 fully docked),
   set from scroll position by logo.js — so there is no breakpoint. The header
   rises, shrinks from its full 130px height down to a 64px bar, and the
   underline + white fill fade in over the second half of the collapse. The
   links/logo are constrained to the main text-column width. (Loaded on every
   page; the homepage reuses this too.) */
.site-header {
  position: fixed;
  top: 30px;
  left: 0;
  right: 0;
  width: 100%;
  transform: translateY(calc(-30px * var(--dock, 0)));
  height: calc(130px - 66px * var(--dock, 0));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.5rem;
  padding-inline: calc((100% - min(720px, 90vw)) / 2);
  z-index: 2000;
  /* Solid white bar (so it covers page content once docked). Fades in over
     the second half of the dock, together with the underline. */
  background: rgba(255, 255, 255, calc((var(--dock, 0) - 0.5) * 2));
  border-bottom: 2px solid rgba(0, 0, 0, calc((var(--dock, 0) - 0.5) * 2));
}
/* Once scrolled, clip the full-size logo (and its hover animation) to the
   shrinking bar; left visible at the very top so the hero logo + hover show. */
.site-header.is-scrolled { overflow: hidden; }

/* Anchor-link targets (e.g. /visit#accessibility) should land below the fixed
   site header, not behind it. */
:is(h1, h2, h3, h4, h5, h6)[id] { scroll-margin-top: 6rem; }

.nav {
  display: flex;
  gap: 1.5rem;
}
.nav a {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { text-decoration: underline; }
.logo {
  width: 7rem;
  aspect-ratio: 1 / 1;
  display: grid;
  align-items: center;
  flex-shrink: 0;
}
.logo a { display: block; }
.voxel-logo { width: 100%; height: auto; display: block; }

/* Single-row header: let both nav groups grow equally so the fixed-width logo
   stays geometrically centered even when the left and right link counts differ.
   (At/below the matching breakpoint the header switches to the stacked layout.) */
@media (min-width: 721px) {
  .nav-left,
  .nav-right { flex: 1 1 0; min-width: 0; }
  .nav-right { justify-content: flex-end; }
}
.voxel-logo .echo2 { opacity: 0.5; }
.voxel-logo .letter-v { transition: transform 200ms cubic-bezier(0.64, 0.57, 0.67, 1.53) 0ms; }
.voxel-logo .letter-o { transition: transform 200ms cubic-bezier(0.64, 0.57, 0.67, 1.53) 50ms; }
.voxel-logo .letter-x { transition: transform 200ms cubic-bezier(0.64, 0.57, 0.67, 1.53) 100ms; }
.voxel-logo .letter-e { transition: transform 200ms cubic-bezier(0.64, 0.57, 0.67, 1.53) 150ms; }
.voxel-logo .letter-l { transition: transform 200ms cubic-bezier(0.64, 0.57, 0.67, 1.53) 200ms; }
.voxel-logo.alternate-0 .echo1 .letter-v,
.voxel-logo.alternate-0 .echo1 .letter-o,
.voxel-logo.alternate-0 .echo1 .letter-x,
.voxel-logo.alternate-0 .echo1 .letter-e,
.voxel-logo.alternate-0 .echo1 .letter-l,
.voxel-logo.alternate-0 .echo2 .letter-v,
.voxel-logo.alternate-0 .echo2 .letter-o,
.voxel-logo.alternate-0 .echo2 .letter-x,
.voxel-logo.alternate-0 .echo2 .letter-e,
.voxel-logo.alternate-0 .echo2 .letter-l { transform: translate(0, 0); }
.voxel-logo.alternate-1 .echo1 .letter-v { transform: translate(0, -114px); }
.voxel-logo.alternate-1 .echo1 .letter-o { transform: translate(0, 130px); }
.voxel-logo.alternate-1 .echo1 .letter-x { transform: translate(0, -220px); }
.voxel-logo.alternate-1 .echo1 .letter-e { transform: translate(0, -80px); }
.voxel-logo.alternate-1 .echo1 .letter-l { transform: translate(0, 79px); }
.voxel-logo.alternate-1 .echo2 .letter-v { transform: translate(0, 289px); }
.voxel-logo.alternate-1 .echo2 .letter-o { transform: translate(0, -467px); }
.voxel-logo.alternate-1 .echo2 .letter-x { transform: translate(0, 361px); }
.voxel-logo.alternate-1 .echo2 .letter-e { transform: translate(0, 238px); }
.voxel-logo.alternate-1 .echo2 .letter-l { transform: translate(0, -349px); }
.voxel-logo.alternate-2 .echo1 .letter-v { transform: translate(0, 144px); }
.voxel-logo.alternate-2 .echo1 .letter-o { transform: translate(0, -98px); }
.voxel-logo.alternate-2 .echo1 .letter-x { transform: translate(0, -220px); }
.voxel-logo.alternate-2 .echo1 .letter-e { transform: translate(0, 78px); }
.voxel-logo.alternate-2 .echo1 .letter-l { transform: translate(0, -156px); }
.voxel-logo.alternate-2 .echo2 .letter-v { transform: translate(0, -192px); }
.voxel-logo.alternate-2 .echo2 .letter-o { transform: translate(0, 306px); }
.voxel-logo.alternate-2 .echo2 .letter-x { transform: translate(0, -380px); }
.voxel-logo.alternate-2 .echo2 .letter-e { transform: translate(0, 430px); }
.voxel-logo.alternate-2 .echo2 .letter-l { transform: translate(0, -235px); }
.voxel-logo.alternate-3 .echo1 .letter-v { transform: translate(0, 192px); }
.voxel-logo.alternate-3 .echo1 .letter-o { transform: translate(0, 341px); }
.voxel-logo.alternate-3 .echo1 .letter-x { transform: translate(0, -117px); }
.voxel-logo.alternate-3 .echo1 .letter-e { transform: translate(0, 79px); }
.voxel-logo.alternate-3 .echo1 .letter-l { transform: translate(0, -156px); }
.voxel-logo.alternate-3 .echo2 .letter-v { transform: translate(0, -337px); }
.voxel-logo.alternate-3 .echo2 .letter-o { transform: translate(0, 447px); }
.voxel-logo.alternate-3 .echo2 .letter-x { transform: translate(0, 201px); }
.voxel-logo.alternate-3 .echo2 .letter-e { transform: translate(0, -431px); }
.voxel-logo.alternate-3 .echo2 .letter-l { transform: translate(0, 270px); }
.voxel-logo.alternate-4 .echo1 .letter-v { transform: translate(0, -145px); }
.voxel-logo.alternate-4 .echo1 .letter-o { transform: translate(0, 78px); }
.voxel-logo.alternate-4 .echo1 .letter-x { transform: translate(0, 202px); }
.voxel-logo.alternate-4 .echo1 .letter-e { transform: translate(0, -80px); }
.voxel-logo.alternate-4 .echo1 .letter-l { transform: translate(0, -156px); }
.voxel-logo.alternate-4 .echo2 .letter-v { transform: translate(0, -385px); }
.voxel-logo.alternate-4 .echo2 .letter-o { transform: translate(0, 447px); }
.voxel-logo.alternate-4 .echo2 .letter-x { transform: translate(0, -277px); }
.voxel-logo.alternate-4 .echo2 .letter-e { transform: translate(0, 305px); }
.voxel-logo.alternate-4 .echo2 .letter-l { transform: translate(0, -349px); }

/* ===== Shared main-content width ===== */
.main-width { width: min(720px, 90vw); }

/* ===== Site footer ===== */
.site-footer {
  width: min(1240px, 94vw);
  margin: 4rem auto 3rem;
}
.footer-divider {
  border: 0;
  border-top: 2px solid #000;
  margin: 0 0 2rem;
}
.footer-content {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 3rem;
  align-items: start;
}
.footer-logo {
  width: 5.5rem;
  aspect-ratio: 1 / 1;
}
.footer-logo a { display: block; }
.footer-logo svg { width: 100%; height: auto; display: block; }
.footer-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--ink);
}
.footer-address,
.footer-links,
.footer-nav {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.footer-address {
  text-transform: uppercase;
  line-height: 1.5;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}
.footer-links a,
.footer-nav a {
  color: var(--ink);
  text-decoration: none;
}
.footer-links a:hover,
.footer-nav a:hover {
  text-decoration: underline;
}
.footer-nav {
  display: grid;
  gap: 0.55rem;
  text-transform: uppercase;
  justify-items: end;
  text-align: right;
}
/* Voxel Engineering link wears the same electric blue as its page. */
.footer-nav a.footer-ve-link { color: #2330ff; }
@media (max-width: 700px) {
  /* Stacked footer: trim the space directly above + below the (now larger)
     logo. The smaller row-gap also tightens info↔nav, so nudge the nav back
     down to keep that gap unchanged. */
  .footer-divider { margin-bottom: 1.5rem; }
  .footer-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .footer-nav {
    justify-items: start;
    text-align: left;
    margin-top: 0.5rem;
  }
}

/* ===== Responsive header =====
   The single-row bar must never wrap. As soon as it would (below the width
   where the desktop layout fits), the header switches straight to the stacked
   layout: the Voxel logo pinned top-left, and every nav link stacked into a
   single right-aligned list (echoing the footer's right-aligned nav stack).
   The two <nav> groups flow one after the other, so their six links read as one
   continuous column down the right edge. */
@media (max-width: 720px) {
  .site-header {
    /* Scroll away with the page (not pinned) so the tall stacked nav doesn't
       eat screen space — the templates' top padding already reserves room for
       it on first paint. */
    position: absolute;
    transform: none;
    /* Static, not docking: fixed auto height (no scroll-driven shrink) so
       nothing animates as you scroll. */
    height: auto;
    display: block;
    text-align: right;
    padding: 0.75rem 2rem;
    /* The bar scrolls out of view here, so neither the docked white fill nor
       the bottom underline should flash in as you scroll. */
    background: transparent;
    border-bottom: 0;
  }
  /* No dock-clip here — keep the stacked nav fully visible while scrolling. */
  .site-header.is-scrolled { overflow: visible; }
  .logo {
    position: absolute;
    left: 2rem;
    top: 0.75rem;
    width: 7rem;
    margin: 0;
  }
  .nav { display: block; }
  .nav a { display: block; font-size: 0.85rem; line-height: 1.85; }
  /* The stacked nav is taller than the desktop bar, so give page content more
     clearance below it. `html body` wins over the base `body { padding-top }`
     scaffold above on specificity, regardless of load order. The homepage
     opts out of this (it spaces content via .stage instead). */
  html body { padding-top: 13rem; }
}

/* ===== Shared type components =====
   Canonical versions of patterns that used to be respelled (with drift) in
   page stylesheets and template <style> blocks. Pages override the odd value
   (a margin, a size) rather than redefining the whole rule. */

/* Big underlined page title (dept pages, event pages, homepage show title). */
.page-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
  text-decoration: underline;
  text-decoration-thickness: 6px;
  text-underline-offset: 0.12em;
}
/* Mono section heading. Margin-top varies by page (dept 5rem, events 3.5rem). */
.section-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 3rem 0 1rem;
}
/* Small mono kicker above a show title ("X PRESENTS", past-event date line). */
.kicker {
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}
/* Intro paragraph under a page title. */
.lede {
  font-family: var(--font-text);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 2.5rem;
}
/* "← Back" mono link above page titles. (Two class names for one style —
   historical markup; both render identically.) */
.back-link,
.back-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  margin-bottom: 2rem;
}
.back-link:hover,
.back-link:hover { text-decoration: underline; }

/* ===== Meta box (event / events / classes detail grid) =====
   Bordered cells with a mono label over a value; the last cell is often the
   black .meta-cta CTA. Pages set their own .meta display/columns. */
.meta { margin: 1.5rem 0; border: 2px solid #000; }
.meta-item {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-right: 2px solid #000;
}
.meta-item:last-child { border-right: 0; }
.meta-label {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin-bottom: 0.35rem;
}
.meta-value {
  font-family: var(--font-text);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--ink);
}
.meta-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  background: #000;
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 120ms ease, color 120ms ease;
}
.meta-cta:hover {
  background: #fff;
  color: var(--ink);
}

/* ===== Hover-lift card (Technical feature cards, Archive tiles) ===== */
.lift-card {
  border: 2px solid #000;
  background: #fff;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.lift-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 7px 7px 0 #000;
}

/* ===== Layout rows (Kirby layout/blocks pages: Classes, Visit, dept pages) =====
   Each row's columns carry an inline flex-grow from the layout's span, so a
   "1/2, 1/2" row renders side-by-side; rows stack on small screens. */
.layout-row { display: flex; flex-wrap: wrap; gap: 2rem; }
.layout-col { flex: 1 1 0; min-width: 0; }
@media (max-width: 700px) { .layout-row { flex-direction: column; } }

/* Blocks-editor typography for layout columns (heading + text + image pages). */
.layout-col h1,
.layout-col h2 { font-family: var(--font-mono); font-weight: 700; font-size: 1.6rem; text-transform: uppercase; margin: 3.5rem 0 1rem; }
.main > .layout-row:first-child .layout-col > :first-child { margin-top: 0; }
/* No color on these: text inherits #333 from the body on blocks pages, while
   the dept pages' black-ink baseline turns it #000 there. */
.layout-col p { font-family: var(--font-text); font-size: 1.2rem; line-height: 1.5; margin: 0 0 0.9rem; }
.layout-col ul, .layout-col ol { margin: 0 0 0.9rem; }
.layout-col ol { padding-left: 1.5rem; }
.layout-col li { font-family: var(--font-text); font-size: 1.2rem; line-height: 1.5; margin-bottom: 0.4rem; }
/* Em-dash bullets on unordered lists, matching the lab-note list style
   (dept-page.css's .main ul). Applies to every layout-block page. */
.layout-col ul { list-style: none; padding-left: 0; }
.layout-col ul li { position: relative; padding-left: 1.75em; }
.layout-col ul li::before { content: '\2014'; position: absolute; left: 0; }
/* The writer stores list items as <li><p>…</p></li>; drop the paragraph's
   trailing margin so items stay dense instead of spaced a full line apart. */
.layout-col li p:last-child { margin-bottom: 0; }
.layout-col figure { margin: 1.25rem 0; }
.layout-col img { display: block; width: 100%; height: auto; }
/* The figure carries the vertical rhythm; stop .main img (dept-page.css) from
   adding its own margin inside one (which would double the spacing). */
.layout-col figure img { margin: 0; }
/* Table blocks on blocks-only pages (Classes, Visit …). Mirrors `.main table`
   in dept-page.css, which wins on the pages that load it — so tables look the
   same everywhere. */
.layout-col table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.45;
}
.layout-col th,
.layout-col td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1.5px solid #000;
  word-break: break-word;
}
.layout-col thead th {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  border-bottom: 2px solid #000;
  border-top: 2px solid #000;
}
/* Table blocks: extra breathing room below (the generic table margin is a
   tight 1.5rem). .main-scoped so it outranks both `.main table`
   (dept-page.css) and `.layout-col table` above, regardless of load order. */
.main table.block-table { margin-bottom: 2.5rem; }

/* Caption (both dept + blocks pages): small mono label above the table. */
.block-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  padding-bottom: 0.5rem;
}
.layout-col hr { border: 0; border-top: 2px solid #000; margin: 3rem 0 1rem; }

/* ===== Creative-team credits (event + past-event pages) =====
   Bordered role/name grid, shared by event.php and past-event.php. */
.event-credits {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.25rem;
  row-gap: 0.4rem;
  width: -moz-fit-content; /* Firefox < 94 needs the prefix; drops the FF floor from 94 to 89 */
  width: fit-content;
  border: 2px solid #000;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
}
.event-credit-role {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  color: var(--ink-muted);
  align-self: baseline;
}
.event-credit-name {
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--ink);
  margin: 0;
  align-self: baseline;
}
/* On narrow screens the role column's `max-content` (e.g. the uppercased
   "Lighting and Projection Designer") is wider than the viewport and won't
   wrap, forcing the whole page wider than the screen. Let the role column
   shrink and wrap, and drop fit-content so the box tracks the container. */
@media (max-width: 600px) {
  .event-credits {
    grid-template-columns: minmax(0, max-content) 1fr;
    width: auto;
  }
}

/* ===== Lightbox (event + past-event photo galleries) =====
   Click to enlarge, prev/next; driven by assets/js/lightbox.js. */
body.lb-lock { overflow: hidden; }
/* --lb-top is set by lightbox.js to the fixed nav's rendered bottom edge, so
   the overlay starts just under the (variable-height, docking) header instead
   of behind it. Falls back to full-viewport if the script never runs. */
.lightbox { position: fixed; inset: var(--lb-top, 0px) 0 0 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.93); }
.lightbox.is-open { display: flex; }
.lb-stage { margin: 0; max-width: 92vw; max-height: calc(92vh - var(--lb-top, 0px)); display: flex; flex-direction: column; align-items: center; }
.lb-img { max-width: 92vw; max-height: calc(88vh - var(--lb-top, 0px)); width: auto; height: auto; object-fit: contain; display: block; }
.lb-btn { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; line-height: 1; opacity: 0.75; transition: opacity 0.15s; }
.lb-btn:hover { opacity: 1; }
.lb-close { top: 0.5rem; right: 1rem; font-size: 2.6rem; padding: 0.25rem 0.75rem; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 3.5rem; padding: 1rem 1.25rem; }
.lb-prev { left: 0.25rem; }
.lb-next { right: 0.25rem; }
@media (max-width: 700px) { .lb-prev, .lb-next { font-size: 2.5rem; padding: 0.75rem; } }