/* ==========================================================================
   OHA33 CONSTRUCTION — Design System
   Pure HTML5 / CSS3 / vanilla JS. No framework dependency.
   Structural / architectural / blueprint-annotated visual language.
   ========================================================================== */

:root{
  --charcoal:      #1C1E21;
  --charcoal-deep: #101113;
  --slate:         #26292E;
  --slate-line:    #3D4148;
  --off-white:     #F4F2EC;
  --paper:         #EDEAE2;
  --orange:        #E65F2B;
  --orange-dim:    #C24B1E;
  --gold:          #D4AF37;
  --gold-dim:      #B4922C;
  --ink:           #1C1E21;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --container-max: 1280px;
  --gutter: 1.5rem;
}

*, *::before, *::after{ box-sizing: border-box; }
*{ scroll-behavior: smooth; margin:0; padding:0; }

html{ font-size: 16px; }

body{
  font-family: var(--font-body);
  background: var(--charcoal);
  color: var(--off-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; background:none; border:none; color: inherit; cursor:pointer; }
ul{ list-style: none; }
input, textarea, select{ font: inherit; }

h1,h2,h3,h4,.font-display{ font-family: var(--font-display); letter-spacing: -0.01em; font-weight: 700; line-height: 1.1; }
.font-mono{ font-family: var(--font-mono); letter-spacing: 0.06em; }

/* Focus visibility (accessibility floor) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

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

/* --------------------------------------------------------------------------
   Layout primitives (replace Tailwind utility usage)
   -------------------------------------------------------------------------- */
.container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 1024px){
  .container{ padding-inline: 2.5rem; }
}

.section{ padding-block: 5rem; }
.section-lg{ padding-block: 6rem; }
.border-t{ border-top: 1px solid var(--slate-line); }
.border-y{ border-top: 1px solid var(--slate-line); border-bottom: 1px solid var(--slate-line); }
.bg-charcoal{ background: var(--charcoal); }
.bg-charcoal-deep{ background: var(--charcoal-deep); }

.flex{ display:flex; }
.flex-col{ flex-direction: column; }
.items-center{ align-items:center; }
.items-start{ align-items:flex-start; }
.items-end{ align-items:flex-end; }
.justify-between{ justify-content: space-between; }
.justify-center{ justify-content:center; }
.wrap{ flex-wrap: wrap; }
.gap-1{ gap:.5rem; } .gap-2{ gap:.75rem; } .gap-3{ gap:1rem; } .gap-4{ gap:1.5rem; } .gap-6{ gap:2.5rem; } .gap-8{ gap:3.5rem; }

.grid{ display:grid; gap: 1.5rem; }
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
.grid-4{ grid-template-columns: repeat(2,1fr); }
@media (min-width: 640px){
  .grid-3{ grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 1024px){
  .grid-2{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(3,1fr); }
  .grid-4{ grid-template-columns: repeat(4,1fr); }
}

.shrink-0{ flex-shrink:0; }
.text-center{ text-align:center; }
.hidden{ display:none !important; }
.relative{ position:relative; }
.overflow-hidden{ overflow:hidden; }

/* --------------------------------------------------------------------------
   Blueprint grid texture — signature background for dark sections
   -------------------------------------------------------------------------- */
.blueprint-grid{
  background-image:
    linear-gradient(rgba(212,175,55,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,0.055) 1px, transparent 1px);
  background-size: 44px 44px;
}

.blueprint-grid-fine{
  background-image:
    linear-gradient(rgba(244,242,236,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,242,236,0.04) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* --------------------------------------------------------------------------
   Signature device: drafting corner brackets on media + panels
   -------------------------------------------------------------------------- */
.blueprint-frame{ position: relative; }
.blueprint-frame::before,
.blueprint-frame::after,
.blueprint-frame > .bp-tr,
.blueprint-frame > .bp-br{
  content:"";
  position:absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--gold);
  opacity: 0.85;
  pointer-events: none;
  z-index: 10;
  transition: width .35s ease, height .35s ease;
}
.blueprint-frame::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.blueprint-frame::after{ bottom:-1px; left:-1px; border-right:none; border-top:none; }
.blueprint-frame > .bp-tr{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
.blueprint-frame > .bp-br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
.blueprint-frame:hover::before,
.blueprint-frame:hover::after,
.blueprint-frame:hover > .bp-tr,
.blueprint-frame:hover > .bp-br{ width: 34px; height: 34px; }

/* Dimension label chip — used on figure captions like a drawing annotation */
.dim-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.dim-label::before{
  content:"";
  width: 18px; height: 1px;
  background: var(--gold);
  display:inline-block;
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
#site-header{
  position: fixed; top:0; left:0; right:0; z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(28,30,33,0.86);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
#site-header.scrolled{ border-bottom-color: var(--slate-line); }

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 80px;
}

.brand{ display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.brand-text{ line-height: 1; }
.brand-name{ font-family: var(--font-display); font-weight:700; font-size: 1.125rem; letter-spacing:-0.02em; color: var(--off-white); }
.brand-sub{ display:block; font-family: var(--font-mono); font-size: 9px; letter-spacing:.25em; color: var(--gold); margin-top:.15rem; }

.main-nav{ display:none; align-items:center; gap: 2.5rem; }
@media (min-width: 1024px){ .main-nav{ display:flex; } }

.nav-link{
  position: relative;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--off-white);
  opacity: 0.75;
  transition: opacity .2s ease;
}
.nav-link::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px;
  height:1px; background: var(--orange);
  transform: scaleX(0); transform-origin:left;
  transition: transform .25s ease;
}
.nav-link:hover{ opacity:1; }
.nav-link:hover::after, .nav-link.active::after{ transform: scaleX(1); }
.nav-link.active{ opacity:1; color: var(--orange); }

.header-cta{ display:none; }
@media (min-width: 1024px){ .header-cta{ display:block; } }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-cta{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--orange);
  color: var(--charcoal-deep);
  padding: 0.9rem 1.6rem;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  border: 1px solid var(--orange);
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-cta:hover{ background: transparent; color: var(--orange); box-shadow: 0 0 0 1px var(--orange) inset; transform: translateY(-1px); }
.btn-cta.full{ width:100%; justify-content:center; }

.btn-outline{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--off-white);
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--slate-line);
  display:inline-flex; align-items:center; gap:.6rem;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.btn-outline:hover{ border-color: var(--off-white); background: rgba(244,242,236,0.05); transform: translateY(-1px); }

.btn-gold{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--gold);
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--gold);
  display:inline-flex; align-items:center; gap:.6rem;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.btn-gold:hover{ background: var(--gold); color: var(--charcoal-deep); transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity: 1; transform: translateY(0); }
.reveal-delay-1{ transition-delay: .08s; }
.reveal-delay-2{ transition-delay: .16s; }
.reveal-delay-3{ transition-delay: .24s; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.value-grid{ display:grid; gap:1px; background: var(--slate-line); grid-template-columns: 1fr; }
@media (min-width:768px){ .value-grid{ grid-template-columns: repeat(3,1fr); } }

.value-card{
  background: var(--slate);
  padding: 2.25rem;
  transition: border-color .25s ease, transform .25s ease;
}
.value-card:hover{ transform: translateY(-4px); }
.value-card .num{ font-family: var(--font-mono); font-size: .75rem; color: var(--gold); }
.value-card h3{ font-size: 1.25rem; margin: 1.25rem 0 .75rem; }
.value-card p{ color: rgba(244,242,236,.65); font-size: .9rem; line-height:1.6; }

.project-tile{ position:relative; overflow:hidden; cursor:pointer; }
.project-tile img{ width:100%; height:100%; object-fit:cover; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.project-tile:hover img{ transform: scale(1.06); filter: brightness(.55); }
.project-tile .tile-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 1.25rem;
  opacity:0; transition: opacity .35s ease;
  background: linear-gradient(180deg, transparent 30%, rgba(16,17,19,0.92) 100%);
}
.project-tile:hover .tile-overlay{ opacity:1; }
.project-tile .tile-title{ font-family: var(--font-display); font-weight:600; font-size:1.125rem; }
.project-tile .tile-meta{ display:grid; grid-template-columns: repeat(2,1fr); gap: .1rem 1rem; margin-top:.75rem; font-family: var(--font-mono); font-size:10.5px; color: rgba(244,242,236,.8); }
.project-tile .tile-meta .val{ color: var(--gold); }
.project-tile .tile-meta .val.orange{ color: var(--orange); }
.project-tile .tap-hint{ position:absolute; top:.85rem; right:.85rem; font-family: var(--font-mono); font-size:9.5px; letter-spacing:.12em; color: var(--off-white); background: rgba(16,17,19,.65); border:1px solid var(--slate-line); padding:.3rem .55rem; opacity:0; transition: opacity .3s ease; }
.project-tile:hover .tap-hint{ opacity:1; }

/* --------------------------------------------------------------------------
   Mobile nav
   -------------------------------------------------------------------------- */
#mobile-menu{
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
  background: var(--charcoal);
  border-top: 1px solid var(--slate-line);
}
#mobile-menu.open{ max-height: 420px; }
#mobile-menu nav{ display:flex; flex-direction:column; padding: 1.5rem; gap: 1.25rem; }
@media (min-width: 1024px){ #mobile-menu{ display:none; } }

#hamburger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; }
@media (min-width: 1024px){ #hamburger{ display:none; } }
#hamburger span{ display:block; width:28px; height:2px; background: var(--off-white); transition: transform .3s ease, opacity .3s ease; }
#hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
#hamburger.open span:nth-child(2){ opacity:0; }
#hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Timeline (Portfolio page)
   -------------------------------------------------------------------------- */
.tl-line{ background: var(--slate-line); position:absolute; left:6px; top:.5rem; bottom:.5rem; width:1px; }
.tl-dot{
  position:absolute; left:-40px; top:.25rem;
  width: 14px; height:14px; border-radius:0; transform: rotate(45deg);
  background: var(--charcoal); border: 2px solid var(--slate-line);
  transition: background .3s ease, border-color .3s ease;
}
.tl-step{ position:relative; padding-left:2.5rem; padding-bottom:3.5rem; cursor:pointer; }
.tl-step.active .tl-dot{ background: var(--orange); border-color: var(--orange); }
.tl-step.active .tl-title{ color: var(--orange); }
.tl-stage{ font-family: var(--font-mono); font-size:.75rem; color: rgba(244,242,236,.5); margin-bottom:.25rem; }
.tl-title{ font-size:1.25rem; margin-bottom:.5rem; transition: color .2s ease; }
.tl-desc{ color: rgba(244,242,236,.6); font-size:.9rem; max-width:32rem; line-height:1.6; }

/* --------------------------------------------------------------------------
   Filter bar (Portfolio)
   -------------------------------------------------------------------------- */
.filter-bar{ position: sticky; top: 80px; z-index: 30; background: var(--charcoal); border-top:1px solid var(--slate-line); border-bottom:1px solid var(--slate-line); padding: 1.25rem 0; }
.filter-btn{
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing:.1em; text-transform: uppercase;
  padding: .55rem 1.1rem;
  border: 1px solid var(--slate-line);
  color: var(--off-white); opacity:.7;
  transition: all .2s ease;
}
.filter-btn:hover{ opacity:1; border-color: var(--gold); }
.filter-btn.active{ background: var(--orange); border-color: var(--orange); color: var(--charcoal-deep); opacity:1; }

/* --------------------------------------------------------------------------
   Form (Contact page)
   -------------------------------------------------------------------------- */
.form-panel{ background: var(--slate); border: 1px solid var(--slate-line); padding: 2rem; }
@media (min-width:1024px){ .form-panel{ padding: 2.5rem; } }

.form-row{ display:grid; gap:1.5rem; grid-template-columns: 1fr; margin-bottom:1.5rem; }
@media (min-width:640px){ .form-row.two{ grid-template-columns: 1fr 1fr; } }

.field-label{ font-family: var(--font-mono); font-size: 11px; letter-spacing:.12em; text-transform: uppercase; color: var(--gold); display:block; margin-bottom:.5rem; }
.field-input{
  width:100%; background: var(--charcoal-deep); border: 1px solid var(--slate-line);
  color: var(--off-white); padding: .85rem 1rem; font-family: var(--font-body); font-size: 14.5px;
  transition: border-color .2s ease, background .2s ease;
}
.field-input::placeholder{ color: #7A7E85; }
.field-input:focus{ border-color: var(--orange); outline:none; background: #17191C; }
textarea.field-input{ resize:none; }

.upload-zone{
  border: 1.5px dashed var(--slate-line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.5rem;
  padding: 2rem 1rem; cursor:pointer;
  transition: border-color .2s ease, background .2s ease;
}
.upload-zone:hover{ border-color: var(--gold); background: rgba(212,175,55,0.04); }

.form-status{ margin-top: 1rem; font-family: var(--font-mono); font-size: 12.5px; }
.form-status.error{ color: var(--orange); }
.form-status.success{ color: var(--gold); }

/* Marquee-style service area strip */
.coverage-tag{
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing:.08em;
  border: 1px solid var(--slate-line); padding: .4rem .8rem; color: var(--off-white); opacity:.85;
}

/* --------------------------------------------------------------------------
   Hero sections
   -------------------------------------------------------------------------- */
.hero-inner-page{ position:relative; padding-top: 8rem; padding-bottom: 4rem; overflow:hidden; }
.hero-home{ position:relative; min-height:100vh; display:flex; align-items:flex-end; padding-bottom:6rem; padding-top:8rem; overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media .fade{ position:absolute; inset:0; background: linear-gradient(0deg, var(--charcoal-deep) 0%, rgba(16,17,19,.7) 55%, rgba(16,17,19,.2) 100%); }
.hero-title-xl{ font-size: 13vw; line-height:.95; max-width: 56rem; color: var(--off-white); }
@media (min-width:1024px){ .hero-title-xl{ font-size:4.5rem; } }
@media (min-width:1280px){ .hero-title-xl{ font-size:5.5rem; } }
.hero-title{ font-size: 2.75rem; max-width: 48rem; }
@media (min-width:1024px){ .hero-title{ font-size: 4.5rem; } }

.text-muted{ color: rgba(244,242,236,.7); }
.max-w-xl{ max-width: 36rem; }
.max-w-3xl{ max-width: 48rem; }

/* --------------------------------------------------------------------------
   Spec grid (services page)
   -------------------------------------------------------------------------- */
.spec-grid{ display:grid; grid-template-columns: 1fr; gap:1px; background: var(--slate-line); border:1px solid var(--slate-line); }
@media (min-width:640px){ .spec-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .spec-grid{ grid-template-columns: repeat(4,1fr); } }
.spec-cell{ background: var(--charcoal); padding:2rem; text-align:center; transition: background .2s ease; }
.spec-cell:hover{ background: var(--slate); }
.spec-num{ font-size: 2.25rem; margin-bottom:.5rem; }
.spec-label{ font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; color: rgba(244,242,236,.7); }

/* --------------------------------------------------------------------------
   Service row (services page)
   -------------------------------------------------------------------------- */
.service-row{ display:grid; grid-template-columns:1fr; gap:3.5rem; align-items:center; }
@media (min-width:1024px){ .service-row{ grid-template-columns: 1fr 1fr; } }
.service-row img{ width:100%; height:420px; object-fit:cover; }
.service-copy h2{ font-size:1.875rem; margin-bottom:1.5rem; }
@media (min-width:1024px){ .service-copy h2{ font-size:2.25rem; } }
.service-copy p{ color: rgba(244,242,236,.65); line-height:1.7; margin-bottom:1.5rem; }
.service-list li{ display:flex; align-items:flex-start; gap:.75rem; font-size:.9rem; color: rgba(244,242,236,.75); margin-bottom:.75rem; }
.service-list li .dash{ color: var(--orange); margin-top:.15rem; }
.service-list li .dash.gold{ color: var(--gold); }
.order-2-lg{}
@media (min-width:1024px){ .order-1-lg{ order:1; } .order-2-lg{ order:2; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
#site-footer{ padding-top:5rem; padding-bottom:2rem; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:3rem; padding-bottom:4rem; }
@media (min-width:768px){ .footer-grid{ grid-template-columns: repeat(4,1fr); } }
.footer-heading{ font-family: var(--font-mono); font-size:.75rem; letter-spacing:.15em; color: var(--gold); margin-bottom:1.25rem; }
.footer-links li{ margin-bottom:.75rem; font-size:.9rem; color: rgba(244,242,236,.65); }
.footer-links a:hover{ color: var(--orange); }
.footer-bottom-row{ display:flex; flex-wrap:wrap; align-items:center; gap: 2rem .5rem; padding-block:2rem; border-top:1px solid var(--slate-line); }
.footer-legal{ display:flex; flex-direction:column; gap:1rem; padding-top:2rem; border-top:1px solid var(--slate-line); }
@media (min-width:640px){ .footer-legal{ flex-direction:row; justify-content:space-between; } }
.footer-legal p{ color: rgba(244,242,236,.4); font-size:.75rem; }

/* --------------------------------------------------------------------------
   Coverage map (contact page)
   -------------------------------------------------------------------------- */
.map-frame{ position:relative; border: 1px solid var(--slate-line); background: var(--charcoal-deep); height: 18rem; overflow:hidden; }
.map-caption{ position:absolute; bottom:.75rem; left:.75rem; font-family: var(--font-mono); font-size:10px; color: rgba(244,242,236,.4); }

.detail-row{ display:flex; gap:1rem; align-items:flex-start; padding-bottom:1.5rem; margin-bottom:1.5rem; border-bottom:1px solid var(--slate-line); }
.detail-row:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.detail-icon{ width:44px; height:44px; flex-shrink:0; border:1px solid var(--gold); display:flex; align-items:center; justify-content:center; color: var(--gold); }
.detail-label{ font-family: var(--font-mono); font-size:11px; color: rgba(244,242,236,.5); margin-bottom:.25rem; }
.detail-value{ font-family: var(--font-display); font-size:1.125rem; }
.detail-value:hover{ color: var(--orange); }

/* --------------------------------------------------------------------------
   Confirmation panel
   -------------------------------------------------------------------------- */
.form-confirm{ text-align:center; padding-block:2.5rem; }
.confirm-icon{ width:56px; height:56px; margin-inline:auto; border:1px solid var(--gold); display:flex; align-items:center; justify-content:center; color: var(--gold); margin-bottom:1.25rem; }
.form-confirm h3{ font-size:1.25rem; margin-bottom:.5rem; }
.form-confirm p{ color: rgba(244,242,236,.6); font-size:.9rem; max-width:20rem; margin-inline:auto; }

/* ==========================================================================
   LIGHTBOX / CAROUSEL (Portfolio page)
   ========================================================================== */
.lightbox-overlay{
  position: fixed; inset:0; z-index: 200;
  background: rgba(10,10,11,0.94);
  display:flex; align-items:center; justify-content:center;
  padding: 2rem 1rem;
  opacity:0; visibility:hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.lightbox-overlay.open{ opacity:1; visibility:visible; }

.lightbox-box{
  position:relative;
  width:100%; max-width: 980px;
  max-height: 90vh;
  display:flex; flex-direction:column;
}

.lightbox-close{
  position:absolute; top:-3rem; right:0;
  width:40px; height:40px;
  border:1px solid var(--slate-line);
  display:flex; align-items:center; justify-content:center;
  color: var(--off-white);
  transition: border-color .2s ease, color .2s ease;
}
.lightbox-close:hover{ border-color: var(--gold); color: var(--gold); }

.lightbox-stage{
  position:relative;
  background: var(--charcoal-deep);
  border: 1px solid var(--slate-line);
  overflow:hidden;
}
.lightbox-track{
  display:flex;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  height: 60vh;
  max-height: 620px;
}
.lightbox-slide{ flex: 0 0 100%; height:100%; }
.lightbox-slide img{ width:100%; height:100%; object-fit:cover; }

.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width: 44px; height:44px;
  background: rgba(16,17,19,.7);
  border: 1px solid var(--slate-line);
  color: var(--off-white);
  display:flex; align-items:center; justify-content:center;
  transition: border-color .2s ease, background .2s ease;
  z-index: 5;
}
.lightbox-arrow:hover{ border-color: var(--gold); background: rgba(16,17,19,.9); }
.lightbox-arrow.prev{ left: 1rem; }
.lightbox-arrow.next{ right: 1rem; }

.lightbox-counter{
  position:absolute; top: 1rem; right: 1rem;
  font-family: var(--font-mono); font-size:11px; letter-spacing:.1em;
  background: rgba(16,17,19,.7); border:1px solid var(--slate-line);
  padding: .3rem .6rem; color: var(--off-white);
}

.lightbox-info{
  padding: 1.5rem 0 0;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1rem;
}
.lightbox-info h3{ font-size:1.5rem; margin-bottom:.5rem; }
.lightbox-meta{ display:flex; flex-wrap:wrap; gap: .35rem 1.25rem; font-family: var(--font-mono); font-size:11px; color: rgba(244,242,236,.6); }
.lightbox-meta span.val{ color: var(--gold); }

.lightbox-thumbs{ display:flex; gap:.6rem; margin-top:1.25rem; overflow-x:auto; padding-bottom:.25rem; }
.lightbox-thumb{
  flex: 0 0 auto; width: 70px; height: 50px;
  border: 2px solid transparent;
  opacity:.55; cursor:pointer;
  transition: opacity .2s ease, border-color .2s ease;
}
.lightbox-thumb img{ width:100%; height:100%; object-fit:cover; }
.lightbox-thumb.active{ opacity:1; border-color: var(--orange); }

body.lightbox-open{ overflow: hidden; }

@media (max-width: 640px){
  .lightbox-arrow{ width:36px; height:36px; }
  .lightbox-track{ height:42vh; }
}