/* ==========================================================================
PROJECT DETAIL — page-specific layout only.
Redesigned toward the editorial-monograph brief: image-led, restrained,
controlled asymmetry. Shares every token/color/type value with the rest
of NEMA X (tokens.css, system.css) — nothing here introduces a new
color, font, or motion curve.
========================================================================== */
.p-crumb{ font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-soft); margin-bottom:22px; }
.p-crumb a{ transition:color var(--i2) var(--ease-instrument); }
.p-crumb a:hover{ color:var(--ink); }
.p-crumb .code{ color:var(--brass); }
/* ---- Arrival — title page: crumb, numbered eyebrow, title, one-line
descriptor, then the large Cover breaking out beyond the text column. ---- */
.p-arrival{ padding-top:140px; padding-bottom:var(--pad-lead); position:relative; overflow:hidden; }
.p-intro-head{ max-width:920px; }
.p-arrival-title{ font-family:var(--f-display); font-weight:400; font-size:clamp(42px,6.4vw,96px); line-height:var(--lh-mega); letter-spacing:var(--ls-mega); max-width:16ch; text-wrap:balance; margin-top:14px; }
.p-arrival-descriptor{ font-family:var(--f-mono); font-size:12px; letter-spacing:var(--ls-tight); text-transform:uppercase; color:var(--ink-soft); margin-top:18px; }
.p-arrival-note{ font-family:var(--f-display); font-style:italic; font-weight:360; font-size:clamp(16px,1.6vw,19px); max-width:44ch; margin-top:14px; opacity:.85; }
/* The Cover is the strongest Plate on the page, but it is still an
architectural plate placed within the page grid — not an edge-to-edge
billboard. Same max-width/margin-inline/padding-inline as .container
(system.css) — the same box the title/crumb/eyebrow above sit in — so
its left edge shares that exact axis instead of centering independently
at its own width; --edge's own clamp already scales this correctly
down to mobile, so no separate mobile override is needed here either. */
.p-hero-frame{ max-width:var(--max); margin-inline:auto; padding-inline:var(--edge); margin-top:clamp(26px,4vw,46px); }
.p-hero-frame .plate{ width:100%; }
.p-arrival .stamp{ top:-16px; right:14px; }
/* ---- Hero technical footer — MOBILE ONLY (≤759px, the theme's one
mobile breakpoint). Desktop is untouched above this: the stamp stays
absolute (line 30, hung off the photo's top-right corner) and
.plate-caption stays overlaid on the photo's own bottom edge exactly as
system.css already defines it.
Below 759px, .plate-caption's Fig./city-year pair and .stamp's status/
code pair used to occupy the SAME bottom-of-photo space -- the previous
mobile rule turned .stamp into a static, in-flow block appended after
the image, which grew .plate's own box taller; .plate-caption's
position:absolute;bottom:14px then measured against that new, taller
bottom edge instead of the photo's, landing its Fig./code text on top of
the stamp. Fixed here by unwrapping BOTH .plate-caption and .stamp with
display:contents -- promoting their existing spans (no template change,
same nemax_the_plate()/nemax_the_stamp() output every other caller
still gets) straight into one 3-column grid on .plate itself: Fig./code
stacked at left, the stamp recentred and compacted in the middle,
city/year at right. Grid columns give each of the three areas its own
track, so long status text (req. 9) can only wrap inside the centre
track -- it structurally cannot bleed into the left/right text. */
@media (max-width:759px){
.p-arrival .p-hero-frame .plate{
display:grid;
grid-template-columns:1fr minmax(0,150px) 1fr;
column-gap:10px; row-gap:6px;
align-items:center;
grid-template-areas:
"img img img"
"fig stamp loc"
"code stamp loc";
}
.p-arrival .p-hero-frame .plate > img{ grid-area:img; }
/* Fig. 00 (left, top) / city, year (right) -- same two spans
nemax_the_plate() already prints, just re-placed. opacity is not an
inherited property, so the .7 dimming display:contents would
otherwise drop is re-declared directly on each span. */
.p-arrival .plate-caption{ display:contents; }
.p-arrival .plate-caption span:first-child{ grid-area:fig; justify-self:start; align-self:end; padding-left:14px; opacity:.7; }
.p-arrival .plate-caption span:last-child{ grid-area:loc; justify-self:end; align-self:start; padding-right:14px; text-align:right; opacity:.7; }
/* The stamp -- centred, compact, red accent/border/typography kept
exactly (moved from .stamp's own box onto .s1, since .stamp no
longer generates one). Its Appear-triggered reveal (data-stamp /
.is-stamped, system.js) still fades .s1 in the same way .stamp itself
used to fade on mobile. */
.p-arrival .stamp{ position:static; display:contents; top:auto; right:auto; margin-top:0; transform:none; }
.p-arrival .stamp .s1{
grid-area:stamp; justify-self:center; align-self:center;
position:relative; max-width:150px;
border:1.5px solid var(--stamp-color, var(--stamp)); color:var(--stamp-color, var(--stamp));
background:rgba(28,27,23,.02); padding:6px 10px; text-align:center;
opacity:0; transition:opacity var(--i3) var(--ease-contact);
}
.p-arrival .stamp .s1::before{ content:""; position:absolute; inset:3px; border:1px solid var(--stamp-color, var(--stamp)); pointer-events:none; }
.p-arrival .stamp.is-stamped .s1{ opacity:.92; }
/* Project code -- kept (req. 2), moved to the left column under Fig.
00, restrained to the neutral graphite text color instead of the red
accent, weight eased back slightly. */
.p-arrival .stamp .s2{
grid-area:code; justify-self:start; align-self:start; padding-left:14px; margin-top:0;
color:var(--ink-soft); font-weight:600;
}
}
/* ---- Statement — asymmetric two-column editorial moment. Left: Concept
Lead + main narrative, in the display serif. Right: the short Context
note. Single column below 860px — no attempt to preserve the desktop
asymmetry on tablet/mobile (brief §19). ---- */
.p-statement{ padding:var(--pad-loose) 0; }
.statement-grid{ display:grid; grid-template-columns:1fr; gap:44px; margin-top:32px; }
@media (min-width:860px){ .statement-grid{ grid-template-columns:1.3fr .7fr; gap:80px; align-items:start; } }
.statement-pull{ font-family:var(--f-display); font-weight:400; font-size:clamp(26px,3.4vw,36px); line-height:var(--lh-read); letter-spacing:var(--ls-read); text-wrap:balance; }
.statement-body{ margin-top:26px; color:var(--ink-soft); font-size:15px; line-height:var(--lh-body); max-width:58ch; font-variant-numeric:oldstyle-figures; }
.statement-body p + p{ margin-top:18px; }
.dropcap{ font-family:var(--f-display); font-weight:400; color:var(--bronze-deep); font-size:1.6em; line-height:1; margin-right:5px; -webkit-initial-letter:2 2; initial-letter:2 2; }
.statement-context{ padding-top:4px; }
@media (min-width:860px){ .statement-context{ padding-top:8px; border-top:1px solid var(--line); } }
.statement-context-label{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px; }
.statement-context-body{ color:var(--ink-soft); font-size:14px; line-height:var(--lh-body); max-width:42ch; font-variant-numeric:oldstyle-figures; }
.statement-context-body p + p{ margin-top:14px; }
/* ---- Project Information — the dark architectural title-block. A plain
aligned dl, never cards (brief §8). Three columns at wide viewports so a
dozen facts still read as one calm sheet, not a long scroll. ---- */
.p-info{ padding:var(--pad-standard) 0; background:var(--ink); color:var(--paper); }
.info-grid{ display:grid; grid-template-columns:1fr; gap:0 40px; margin-top:36px; }
@media (min-width:700px){ .info-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .info-grid{ grid-template-columns:1fr 1fr 1fr; } }
.info-row{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:14px 0; border-bottom:1px solid var(--line-dark); font-family:var(--f-mono); font-size:12px; }
.info-row dt{ color:var(--on-dark-soft); letter-spacing:var(--ls-tight); }
.info-row dd{ color:var(--paper); text-align:right; }
/* ---- Visual Story — editorial image sequence, composed by
nemax_gallery_beats() (inc/template-tags.php), never a fixed grid.
Five automatic composition types — SOLO, DETAIL, PAIR_EQUAL,
PAIR_OFFSET, PORTRAIT_PAIR — replace the old feature/large/medium/
small/pair scale. FEATURE survives only as a manual-only art-direction
escape hatch (layout=feature): the automatic system never produces it
and no beat is ever allowed to read as near-full-viewport. Alignment
(center/left/right) is a separate axis from scale, applied only to the
single-image types. Widths are min()/vw-driven so a very large monitor
gets more negative space around a beat, not a bigger image — every cap
below stays safely inside .container's own 1560px maximum inner width
at any viewport. Tablet (700–1023px) needs no dedicated breakpoint: the
vw term of each min() already scales continuously through that range
before the explicit ≤699px override takes over. ---- */
.p-gallery{ padding:var(--pad-standard) 0; }
.gallery-seq{ display:flex; flex-direction:column; align-items:center; gap:clamp(32px,4.5vw,56px); margin-top:36px; }
.gallery-seq > *{ width:100%; }
.g-solo,.g-detail,.g-feature{ margin-inline:auto; }
.g-solo{ width:min(820px, 68vw); } /* SOLO — target ~760–840px */
.g-detail{ width:min(520px, 42vw); } /* DETAIL — target ~420–560px */
.g-feature{ width:min(1040px, 62vw); } /* manual layout=feature only — never produced automatically */
.g-align-left{ margin-left:0; margin-right:auto; }
.g-align-right{ margin-left:auto; margin-right:0; }
/* Pairs are their own bounded grid row — width set per composition type
below so PORTRAIT_PAIR reads narrower than PAIR_EQUAL/PAIR_OFFSET even
though all three share the same base .g-pair grid mechanics. */
.g-pair{ display:grid; grid-template-columns:1fr; gap:clamp(18px,2.6vw,26px); width:100%; margin-inline:auto; }
@media (min-width:700px){
.g-pair-equal{ width:min(960px, 74vw); grid-template-columns:1fr 1fr; } /* PAIR_EQUAL row — target ~900–980px */
.g-pair-offset{ width:min(960px, 76vw); grid-template-columns:1fr 1fr; } /* PAIR_OFFSET row — target ~900–980px */
.g-pair-offset.g-pair--first-wide{ grid-template-columns:1.4fr 1fr; } /* ~58/42 */
.g-pair-offset.g-pair--second-wide{ grid-template-columns:1fr 1.4fr; }
.g-portrait-pair{ width:min(720px, 56vw); grid-template-columns:1fr 1fr; } /* PORTRAIT_PAIR — narrower, balanced */
}
/* A pair or a manual Feature reads as a stronger composition change than
two consecutive solo/detail beats — a little extra breathing room on
top of .gallery-seq's own gap, without a second spacing system. */
.g-pair,.g-feature{ margin-block:clamp(6px,1.4vw,14px); }
@media (max-width:699px){
.g-solo,.g-feature{ width:90vw; }
.g-detail{ width:80vw; }
.g-align-left,.g-align-right{ margin-inline:auto; } /* no desktop asymmetry on mobile */
}
.gallery-chapter-label{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-soft); margin-top:40px; }
.gallery-chapter-turn{ text-align:center; padding:var(--pad-beat) 0 var(--pad-lead); max-width:52ch; margin-inline:auto; }
.gallery-chapter-turn .gallery-chapter-label{ margin-top:0; }
.gallery-chapter-note{ font-family:var(--f-display); font-style:italic; font-weight:360; font-size:clamp(18px,2vw,22px); margin-top:12px; }
/* A quiet visual pause between Gallery ACTS (Adaptive Editorial brief §9) —
a thin rule and generous whitespace only, deliberately no text label, so
it never reads as an invented chapter. */
.gallery-act-break{ height:1px; width:64px; background:var(--line); opacity:.6; margin:clamp(48px,7vw,80px) auto 0; }
.gallery-compare-block{ display:flex; flex-direction:column; gap:clamp(28px,4vw,48px); margin-top:clamp(40px,6vw,72px); }
.g-compare{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:700px){ .g-compare{ grid-template-columns:1fr 1fr; gap:32px; } }
.g-compare-item{ display:flex; flex-direction:column; gap:12px; }
.g-compare-label{ font-family:var(--f-mono); font-size:10px; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-soft); }
/* Every Visual Story / Next-Project image — safe, JS-optional reveal.
Unscoped default: fully visible. Only .js-reveal-ready (added by
assets/js/system.js, and only once IntersectionObserver + no-reduced-
motion are both confirmed) opts a supported browser into the animated
version. If JS never runs, this rule block is simply inert. */
.p-media{ position:relative; scroll-margin-top:96px; }
.p-media.reveal--mask{ opacity:1; transform:none; clip-path:inset(0 0 0% 0); }
.p-media.reveal--mask .plate img{ transform:scale(1); }
.js-reveal-ready .p-media.reveal--mask{
opacity:0; transform:translateY(10px); clip-path:inset(0 0 100% 0);
transition:opacity var(--i4) var(--ease-instrument), transform var(--i4) var(--ease-instrument), clip-path 800ms var(--ease-instrument);
}
.js-reveal-ready .p-media.reveal--mask.is-visible{ opacity:1; transform:none; clip-path:inset(0 0 0% 0); }
.js-reveal-ready .p-media.reveal--mask .plate img{ transform:scale(1.03); }
.js-reveal-ready .p-media.reveal--mask.is-visible .plate img{ transform:scale(1); transition-delay:80ms; }
@media (prefers-reduced-motion:reduce){
.p-media.reveal--mask{ clip-path:none !important; opacity:1 !important; transform:none !important; }
.p-media.reveal--mask .plate img{ transform:none !important; }
}
/* Visual Index — a compact wayfinding strip for image-rich (Extended)
Projects only (brief §12/§13). Small thumbnails, fine lines, the same
technical mono index language the Rail already uses sitewide — never a
filmstrip/carousel, wraps naturally rather than scrolling horizontally. */
.p-visual-index{ padding:var(--pad-lead) 0 0; }
.index-label{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--ink-soft); }
.vi-strip{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.vi-thumb{
position:relative; flex:none; width:56px; height:56px; overflow:hidden;
border:1px solid var(--line); opacity:.68;
transition:opacity var(--i2) var(--ease-instrument), border-color var(--i2) var(--ease-instrument);
}
.vi-thumb:hover, .vi-thumb:focus-visible{ opacity:1; border-color:var(--ink); }
.vi-thumb-img{ width:100%; height:100%; object-fit:cover; display:block; }
.vi-num{
position:absolute; left:3px; bottom:2px; font-family:var(--f-mono); font-size:9px;
letter-spacing:.02em; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.65); pointer-events:none;
}
@media (max-width:639px){ .vi-thumb{ width:48px; height:48px; } }
.p-drawings{ padding:var(--pad-standard) 0; }
.drawing-sheets{ display:flex; flex-direction:column; gap:clamp(50px,7vw,80px); margin-top:40px; }
.sheet-row{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:820px){ .sheet-row{ grid-template-columns:220px 1fr; align-items:start; gap:40px; } }
.sheet-meta{ font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-tight); color:var(--on-dark-soft); line-height:var(--lh-data); }
.sheet-meta b{ display:block; color:var(--paper); font-size:13px; letter-spacing:var(--ls-tight); margin-bottom:6px; }
.sheet-scale{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.sheet-scale-icon{ --icon-size:10px; opacity:.7; }
/* Same content grid as the Gallery above (.container) — .container's own
--max/--edge tokens saturate together at wider viewports, so the inner
content width is effectively fixed (~1400px) from roughly 1600px up,
not still growing with the viewport. A tight column-gap at the 4-up
breakpoint is therefore the only real lever for "slightly larger" cards
within that fixed budget; row-gap stays generous for vertical rhythm
when a Project has more than 4 Materials and the grid wraps. Still
unambiguously smaller than any Gallery SOLO image at every breakpoint. */
/* Compact architectural material palette, not a second image gallery —
minmax(0,Npx) tracks (the standard "capped column" idiom: grow toward
Npx when space allows, shrink gracefully on a narrow viewport, never
overflow) plus justify-content:start keep the whole grid narrower than
the Project container and left-aligned to it, same as every other
lower-page block's edge, instead of stretching 4 cards across the full
container width. */
.p-materials{ padding:var(--pad-tight) 0; background:var(--paper); }
.materials-grid{
display:grid;
grid-template-columns:repeat( 2, minmax( 0, 175px ) );
justify-content:start;
gap:20px clamp(18px,3vw,24px);
margin-top:32px;
}
@media (min-width:640px){
.materials-grid{ grid-template-columns:repeat( 3, minmax( 0, 180px ) ); }
}
@media (min-width:900px){
.materials-grid{ grid-template-columns:repeat( 4, minmax( 0, 190px ) ); gap:20px clamp(20px,2.2vw,28px); }
}
@media (min-width:1220px){
.materials-grid{ grid-template-columns:repeat( 5, minmax( 0, 185px ) ); }
}
/* Secondary reference layer — never a boxed UI card (brief §20). The
sample composition already carries the frame; the frontend adds only
small typography, a quiet index number, and negative space. */
.material-card{ position:relative; }
.material-index{
display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:var(--ls-tight);
color:var(--ink-soft); opacity:.6; margin-bottom:8px;
}
.material-card b{ display:block; font-family:var(--f-body); font-weight:500; font-size:13px; margin-top:11px; }
.material-card span{ display:block; font-family:var(--f-mono); font-size:10px; color:var(--ink-soft); margin-top:3px; }
.material-card span:empty{ display:none; }
/* Construction now comes before Materials in the project narrative (single-
project.php) — padding tightened from --pad-standard to --pad-tight so it
reads as connected to what precedes it rather than a separate, distant
block; still its own visual beat via the --paper-2 background. */
.p-construction{ padding:var(--pad-tight) 0; background:var(--paper-2); }
.construction-body{ max-width:56ch; color:var(--ink-soft); font-size:15px; line-height:var(--lh-body); margin-top:24px; font-variant-numeric:oldstyle-figures; }
.process-line{ position:relative; margin-top:60px; padding-top:10px; }
/* Construction photos get their own larger grid — deliberately NOT
.materials-grid's small fixed-max swatch columns (Materials keeps that
exactly as-is). Three genuine architectural photos read as a proper
full-width row: fractional 1fr columns fill the available container
width instead of capping at a small px max. */
.construction-grid{
display:grid; grid-template-columns:1fr; gap:18px; margin-top:40px;
}
@media (min-width:640px){
.construction-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1024px){
.construction-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
/* Restrained hover — a real (nemax_the_plate()'s href) opening the
existing Gallery Lightbox (assets/js/gallery-lightbox.js), so the
pointer cursor is already the browser's native link cursor; this only
adds the subtle image response itself. */
.construction-grid .plate img{ transition:transform 400ms var(--ease-instrument); }
.construction-grid .material-card:hover .plate img{ transform:scale(1.02); }
.process-track{ position:relative; height:1px; background:var(--line); }
.process-fill{ position:absolute; left:0; top:0; height:1px; background:var(--stamp); width:100%; }
.process-phases{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:0; }
.phase{ position:relative; padding-top:22px; }
.phase::before{ content:""; position:absolute; top:-1px; left:0; width:1px; height:9px; background:var(--stamp); }
.phase b{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink); }
.phase span{ display:block; font-family:var(--f-mono); font-size:10px; color:var(--ink-soft); margin-top:4px; }
.p-details{ padding:var(--pad-tight) 0; }
.details-grid{ display:grid; grid-template-columns:1fr; gap:32px; margin-top:36px; }
@media (min-width:700px){ .details-grid{ grid-template-columns:repeat(3,1fr); } }
.detail-card b{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--stamp); margin-top:12px; }
.detail-card span{ display:block; font-family:var(--f-body); font-size:14px; margin-top:4px; }
/* ---- Related Work — secondary project discovery. One deliberate
two-card row, narrower than the Gallery, wider/more present than
Materials. Same 3/2 plate ratio on both cards (via ar="landscape")
guarantees identical image height regardless of source dimensions —
controlled cropping is acceptable here since these are navigation
thumbnails, not the primary Gallery. Interaction stays restrained: a
small image scale + title color shift, matching the .card-title /
.next-title hover convention used everywhere else on this page. ---- */
.p-related{ padding:var(--pad-tight) 0; }
.rel-grid{ display:grid; grid-template-columns:1fr; gap:28px; max-width:520px; margin-top:28px; }
@media (min-width:700px){
.rel-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(24px,3vw,40px); max-width:960px; }
}
.rel-card{ display:block; }
.rel-card .plate img{ transition:transform var(--i3) var(--ease-instrument); }
.rel-card:hover .plate img{ transform:scale(1.03); }
.rel-title{ display:block; font-family:var(--f-display); font-weight:500; font-size:20px; letter-spacing:var(--ls-head); line-height:1.2; margin-top:16px; transition:color var(--i2) var(--ease-instrument); }
.rel-card:hover .rel-title{ color:var(--stamp); }
.rel-meta{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-tight); color:var(--ink-soft); margin-top:6px; }
/* ---- Continue — lightweight navigation only, not another chapter.
Deliberately closer to a footer nav row than a Gallery section: a
small fixed-width thumbnail (clamp caps it at the 120-160px target
regardless of viewport), title sized well below the primary Project
title scale, and controlled padding instead of a min-height so total
height stays in the ~180-240px band. ---- */
.p-continue{ border-top:1px solid var(--line); }
.continue-link{ display:block; padding:clamp(28px,4vw,40px) 0; }
.continue-inner{ display:flex; align-items:center; gap:clamp(18px,2.6vw,28px); }
.continue-thumb{ flex:none; width:clamp(96px,12vw,150px); }
.continue-body{ display:flex; flex-direction:column; min-width:0; }
.continue-eyebrow{ font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--ink-soft); }
.continue-title{ font-family:var(--f-display); font-weight:500; font-size:clamp(22px,2.6vw,32px); line-height:1.2; letter-spacing:var(--ls-head); margin-top:8px; transition:color var(--i2) var(--ease-instrument); }
.continue-title i{ font-style:normal; display:inline-block; transition:transform var(--i2) var(--ease-instrument); }
a.continue-link:hover .continue-title{ color:var(--stamp); }
a.continue-link:hover .continue-title i{ transform:translateX(4px); }
.continue-meta{ font-family:var(--f-mono); font-size:11px; color:var(--ink-soft); margin-top:6px; }
@media (max-width:479px){
.continue-thumb{ display:none; }
}
/* ---- Gallery Lightbox — minimal, no dependency (assets/js/gallery-
lightbox.js). Solid dark overlay, no blur, no drop shadow — the same
restrained architectural-overlay philosophy system.css already uses for
the Architectural Index nav. Built entirely by JS and appended to
only once a Gallery image is actually clicked — if the script
never runs, none of this markup exists and every Gallery image is still
a plain, fully visible, directly-linked to its own file. ---- */
.gallery-lightbox{
position:fixed; inset:0;
/* Above every other fixed/overlay layer in the theme -- .site-nav
(1000), .arch-menu (1500), .mobile-menu (1999) -- so the header/menu
never sit on top of the lightbox and swallow clicks meant for it (the
old z-index:200 put it BELOW .site-nav, which is fixed and spans the
full page width/top, so the header was silently intercepting clicks
on the close button and any backdrop area under the header's strip). */
z-index:2000;
display:flex; align-items:center; justify-content:center;
background:var(--ink); padding:clamp(16px,4vw,48px);
opacity:0; visibility:hidden;
transition:opacity var(--i3) var(--ease-instrument), visibility 0s linear var(--i3);
}
.gallery-lightbox.is-open{ opacity:1; visibility:visible; transition:opacity var(--i3) var(--ease-instrument); }
.lb-stage{ position:relative; max-width:100%; max-height:100%; display:flex; align-items:center; justify-content:center; }
.lb-img{ display:block; max-width:100%; max-height:calc(100svh - 96px); width:auto; height:auto; object-fit:contain; opacity:0; transition:opacity var(--i2) var(--ease-instrument); }
.lb-img.is-loaded{ opacity:1; }
.lb-caption{ position:absolute; left:0; right:0; bottom:-34px; text-align:center; font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-tight); color:var(--on-dark-soft); }
.lb-caption:empty{ display:none; }
.lb-close,.lb-prev,.lb-next{
position:fixed; display:flex; align-items:center; justify-content:center;
width:44px; height:44px; border:1px solid var(--line-dark); background:transparent;
color:var(--paper); font-family:var(--f-mono); font-size:18px; line-height:1; cursor:pointer;
transition:border-color var(--i2) var(--ease-instrument), color var(--i2) var(--ease-instrument);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ border-color:var(--stamp); color:var(--stamp); }
:is(.lb-close,.lb-prev,.lb-next):focus-visible{ outline:2px solid var(--stamp); outline-offset:2px; border-color:var(--stamp); color:var(--stamp); }
.lb-close{ top:20px; right:20px; }
.lb-prev{ left:20px; top:50%; transform:translateY(-50%); }
.lb-next{ right:20px; top:50%; transform:translateY(-50%); }
.lb-prev[hidden],.lb-next[hidden]{ display:none; }
@media (max-width:699px){
.gallery-lightbox{ padding:14px; }
.lb-img{ max-height:calc(100svh - 64px); }
.lb-close{ top:10px; right:10px; width:44px; height:44px; }
.lb-prev{ left:6px; width:44px; height:44px; }
.lb-next{ right:6px; width:44px; height:44px; }
.lb-caption{ bottom:-26px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce){
.gallery-lightbox,.gallery-lightbox.is-open,.lb-img{ transition:none; }
}