/* ===================================================================
   ESRA — "Viewfinder" edition
   Tokens
=================================================================== */
:root{
  --black:      #0b0b0a;
  --black-soft: #131311;
  --panel:      #151512;
  --line:       #2c2b26;
  --line-soft:  #201f1b;
  --paper:      #eeece4;
  --paper-dim:  #98958a;
  --teal:       #79b4bc;
  --teal-dim:   #3d7a82;
  --teal-light: #9ec9cf;
  --accent:     var(--teal);
  --accent-dim: var(--teal-dim);
  --pick:       #d1503f;

  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --gutter: clamp(20px, 5vw, 64px);
  --rail-w: 64px;

  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-s: .3s;
  --dur-m: .6s;
}

/* ===================================================================
   Reset
=================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ background:var(--black); scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }
body{
  margin:0; background:var(--black); color:var(--paper);
  font-family:var(--font-display); font-weight:400; font-size:16px; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
svg{ display:block; }
::selection{ background:var(--accent-dim); color:var(--black); }
:focus-visible{ outline:1.5px solid var(--accent); outline-offset:3px; }

::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--black); }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:0; border:2px solid var(--black); }

.grain{
  position:fixed; inset:0; z-index:5; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.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; }

/* ===================================================================
   Type
=================================================================== */
.mono{ font-family:var(--font-mono); }
.label{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em;
  color:var(--paper-dim); text-transform:uppercase;
}
.display-1{
  font-family:var(--font-display); font-weight:600; font-size:clamp(3rem, 8vw, 7rem);
  line-height:.96; letter-spacing:-.02em;
}
.display-2{
  font-family:var(--font-display); font-weight:600; font-size:clamp(2rem, 4.4vw, 3.1rem);
  line-height:1.05; letter-spacing:-.015em;
}
.lede{
  font-weight:400; font-size:clamp(1rem, 1.3vw, 1.14rem); color:var(--paper-dim);
  max-width:50ch; line-height:1.65;
}

/* ===================================================================
   Layout
=================================================================== */
.wrap{ max-width:1360px; margin-inline:auto; padding-inline: calc(var(--gutter) + var(--rail-w)); }
@media (max-width: 860px){ .wrap{ padding-inline:var(--gutter); } }

.section{
  position:relative; padding-block:clamp(88px, 12vw, 152px);
  border-top:1px solid var(--line);
}
.section--tight{ padding-block:clamp(64px, 8vw, 108px); }
.section-head{ max-width:64ch; margin-bottom:clamp(36px, 5vw, 60px); }
.section-head h2{ margin-bottom:14px; }

/* ===================================================================
   Reveal
=================================================================== */
.reveal{
  opacity:0; transform:translateY(20px);
  transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

body:not(.content-ready) .pre-reveal{ opacity:0; }
.pre-reveal{ transition: opacity .9s var(--ease-out); }

.focus-pull{ filter:blur(16px); opacity:.35; transition: filter .6s var(--ease-out), opacity .6s var(--ease-out); }
body.content-ready .focus-pull{ filter:blur(0); opacity:1; }

/* ===================================================================
   Corner-bracket "AF" frame — the recurring signature device
=================================================================== */
.af-frame{ position:relative; }
.af-frame::before, .af-frame::after,
.af-frame .af-c2, .af-frame .af-c3{
  content:""; position:absolute; width:18px; height:18px; pointer-events:none;
  border-color:var(--accent); opacity:.85;
}
.af-frame::before{ top:-1px; left:-1px; border-top:1.4px solid var(--accent); border-left:1.4px solid var(--accent); }
.af-frame::after{ top:-1px; right:-1px; border-top:1.4px solid var(--accent); border-right:1.4px solid var(--accent); }
.af-frame .af-c2{ bottom:-1px; left:-1px; border-bottom:1.4px solid var(--accent); border-left:1.4px solid var(--accent); }
.af-frame .af-c3{ bottom:-1px; right:-1px; border-bottom:1.4px solid var(--accent); border-right:1.4px solid var(--accent); }

/* ===================================================================
   Reticle cursor (fine-pointer only)
=================================================================== */
.reticle{
  position:fixed; top:0; left:0; z-index:999; width:26px; height:26px;
  pointer-events:none; transform:translate(-50%,-50%);
  transition: width .2s var(--ease-out), height .2s var(--ease-out), opacity .3s;
}
.reticle::before, .reticle::after, .reticle .rc2, .reticle .rc3{
  content:""; position:absolute; width:8px; height:8px; border-color:var(--accent);
}
.reticle::before{ top:0; left:0; border-top:1px solid var(--accent); border-left:1px solid var(--accent); }
.reticle::after{ top:0; right:0; border-top:1px solid var(--accent); border-right:1px solid var(--accent); }
.reticle .rc2{ bottom:0; left:0; border-bottom:1px solid var(--accent); border-left:1px solid var(--accent); }
.reticle .rc3{ bottom:0; right:0; border-bottom:1px solid var(--accent); border-right:1px solid var(--accent); }
.reticle-dot{
  position:fixed; top:0; left:0; z-index:999; width:3px; height:3px; border-radius:50%;
  background:var(--accent); pointer-events:none; transform:translate(-50%,-50%);
}
.reticle.is-active{ width:44px; height:44px; }
/* Hovering the 3D camera's shutter release — same signal as hovering a link. */
body.is-shutter-hot .reticle{ width:44px; height:44px; }
@media (hover:none), (pointer:coarse){ .reticle, .reticle-dot{ display:none; } }

/* ===================================================================
   HUD top bar
=================================================================== */
.hud{
  position:fixed; inset:0 0 auto 0; z-index:90; display:flex; align-items:center;
  justify-content:space-between; gap:20px; padding:16px var(--gutter);
  border-bottom:1px solid transparent; transition: background var(--dur-s), border-color var(--dur-s);
}
.hud.is-scrolled{ background:rgba(11,11,10,.82); backdrop-filter:blur(12px); border-color:var(--line); }
.hud__brand{ display:flex; align-items:center; gap:10px; }
.hud__brand img{ width:26px; height:26px; }
.hud__brand span{ font-weight:600; font-size:1rem; letter-spacing:-.01em; }

.hud__center{
  display:flex; align-items:center; gap:10px; font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.05em; color:var(--paper-dim);
}
.hud__rec{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
.hud__rec.is-live{ animation: rec-blink 1s steps(2,end) infinite; }
/* One blip when a frame is taken from the hero camera. */
.hud__rec.is-shot{ animation: rec-shot .75s var(--ease-out) 1; }
@keyframes rec-shot{
  0%   { transform:scale(1);   box-shadow:0 0 0 0 var(--accent); }
  22%  { transform:scale(1.9); box-shadow:0 0 0 5px rgba(121,180,188,.28); }
  100% { transform:scale(1);   box-shadow:0 0 0 0 rgba(121,180,188,0); }
}
@keyframes rec-blink{ 50%{ opacity:.25; } }
@media (max-width: 980px){ .hud__center{ display:none; } }

.hud__links{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); }
.hud__links a{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.04em; color:var(--paper-dim);
  position:relative; padding-bottom:3px;
}
.hud__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent);
  transition: right .3s var(--ease-out);
}
.hud__links a:hover, .hud__links a.is-active{ color:var(--paper); }
.hud__links a:hover::after, .hud__links a.is-active::after{ right:0; }

/* The Contact link is a .btn as well, and `.hud__links a` (0,1,1) outbids
   `.btn` (0,1,0) — so the 3px bottom padding meant for the hover underline
   was overriding the button's own padding and pushing its label off centre.
   It doesn't want the sliding underline either. */
.hud__links a.btn{ padding:11px 20px; }
.hud__links a.btn::after{ content:none; }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px;
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.04em;
  border:1px solid var(--line); color:var(--paper); position:relative;
  transition: border-color var(--dur-s), background var(--dur-s), color var(--dur-s);
}
.btn:hover{ border-color:var(--accent); color:var(--accent); }
.btn--solid{ background:var(--paper); color:var(--black); border-color:var(--paper); }
.btn--solid:hover{ background:var(--accent); border-color:var(--accent); color:var(--black); }

.hud-toggle{ display:none; width:38px; height:38px; place-items:center; }
.hud-toggle span, .hud-toggle span::before, .hud-toggle span::after{
  content:""; display:block; width:18px; height:1px; background:var(--paper); position:relative;
  transition: transform .3s, opacity .3s;
}
.hud-toggle span::before{ position:absolute; top:-6px; }
.hud-toggle span::after{ position:absolute; top:6px; }
.hud-toggle.is-open span{ background:transparent; }
.hud-toggle.is-open span::before{ transform:translateY(6px) rotate(45deg); }
.hud-toggle.is-open span::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 980px){
  .hud__links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); background:var(--panel);
    flex-direction:column; align-items:flex-start; padding:100px 30px 40px; gap:24px;
    transform:translateX(100%); transition: transform .5s var(--ease-out); border-left:1px solid var(--line);
  }
  .hud__links.is-open{ transform:translateX(0); }
  .hud__links a{ font-size:.95rem; }
  .hud-toggle{ display:grid; }
}

/* ===================================================================
   Filmstrip rail (right side nav — replaces a chapter list)
=================================================================== */
.filmstrip{
  position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:70;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.filmstrip .sprocket{ width:4px; height:4px; border-radius:50%; background:var(--line); }
.filmstrip a{
  position:relative; width:30px; height:30px; margin:5px 0; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--paper-dim); font-family:var(--font-mono); font-size:.62rem;
  transition: border-color .3s, color .3s;
}
.filmstrip a:hover, .filmstrip a.is-active{ border-color:var(--accent); color:var(--accent); }
.filmstrip a.is-active::before, .filmstrip a.is-active::after{
  content:""; position:absolute; width:8px; height:8px; border-color:var(--accent);
}
.filmstrip a.is-active::before{ top:-4px; left:-4px; border-top:1.2px solid var(--accent); border-left:1.2px solid var(--accent); }
.filmstrip a.is-active::after{ bottom:-4px; right:-4px; border-bottom:1.2px solid var(--accent); border-right:1.2px solid var(--accent); }
@media (max-width: 980px){ .filmstrip{ display:none; } }

/* ===================================================================
   Intro / flash
=================================================================== */
#camera-stage{ position:fixed; inset:0; z-index:200; background:var(--black); }
#camera-stage.is-hero{ position:absolute; inset:auto; top:0; left:0; width:100%; height:100%; }
#camera-stage canvas{ display:block; width:100%; height:100%; touch-action:none; }

.intro-hud{
  position:fixed; inset:0; z-index:210; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-between; padding:32px;
}
.intro-hud__row{ display:flex; justify-content:space-between; align-items:flex-start; font-family:var(--font-mono); font-size:.72rem; color:var(--paper-dim); letter-spacing:.05em; }
.intro-hud__row span{ display:block; }

/* The intro lockup. It's deliberately its own fixed element rather than a
   child of .intro-hud: as a <span> in .intro-hud__row it was picking up that
   row's `display:block` (a .class element selector outbids a .class one), so
   the wordmark stacked under the mark instead of sitting beside it. It also
   sat at 32,32 — directly underneath the top-left AF bracket. It starts large
   and flies into the nav bar when the flash fires (see intro.js). */
.intro-brand{
  position:fixed; top:64px; left:76px; z-index:212; pointer-events:none;
  display:flex; align-items:center; gap:18px; color:var(--paper);
  will-change:transform;
}
.intro-brand img{ width:62px; height:62px; }
.intro-brand__word{
  font-family:var(--font-display); font-weight:600; font-size:1.7rem;
  letter-spacing:.16em; line-height:1;
}
@media (max-width: 700px){
  .intro-brand{ top:72px; left:44px; gap:12px; }
  .intro-brand img{ width:44px; height:44px; }
  .intro-brand__word{ font-size:1.2rem; letter-spacing:.12em; }
}
.intro-corner{ position:fixed; z-index:210; width:26px; height:26px; pointer-events:none; }
.intro-corner.tl{ top:32px; left:32px; border-top:1.4px solid var(--accent); border-left:1.4px solid var(--accent); }
.intro-corner.tr{ top:32px; right:32px; border-top:1.4px solid var(--accent); border-right:1.4px solid var(--accent); }
.intro-corner.bl{ bottom:32px; left:32px; border-bottom:1.4px solid var(--accent); border-left:1.4px solid var(--accent); }
.intro-corner.br{ bottom:32px; right:32px; border-bottom:1.4px solid var(--accent); border-right:1.4px solid var(--accent); }

.intro-reticle{
  position:fixed; top:50%; left:50%; z-index:210; width:64px; height:64px;
  transform:translate(-50%,-50%); pointer-events:none;
}
.intro-reticle::before, .intro-reticle::after{ content:""; position:absolute; background:var(--accent); opacity:.8; }
.intro-reticle::before{ top:50%; left:0; right:0; height:1px; transform:scaleX(.3); }
.intro-reticle::after{ left:50%; top:0; bottom:0; width:1px; transform:scaleY(.3); }

.skip-intro{
  pointer-events:auto; align-self:flex-end; font-family:var(--font-mono); font-size:.7rem;
  color:var(--paper-dim); border:1px solid var(--line); padding:8px 14px; opacity:0;
  transition: opacity .4s, border-color .3s, color .3s;
}
.skip-intro.is-shown{ opacity:1; }
.skip-intro:hover{ color:var(--paper); border-color:var(--accent); }

.intro-chrome{ transition: opacity .4s var(--ease-soft); }
.intro-chrome.is-hidden{ opacity:0; pointer-events:none; }

#flash-overlay{ position:fixed; inset:0; z-index:250; background:#fbfaf6; opacity:0; pointer-events:none; }

body.intro-active{ overflow:hidden; height:100vh; }
body.intro-active .hud, body.intro-active .filmstrip{ opacity:0; pointer-events:none; }
body.intro-active main{ pointer-events:none; }

/* ===================================================================
   Hero
=================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding:110px var(--gutter) clamp(48px,6vw,84px); overflow:hidden; }
.hero__visual{ position:absolute; inset:0; z-index:0; }
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,11,10,.05) 0%, rgba(11,11,10,.18) 55%, var(--black) 96%),
    linear-gradient(90deg, rgba(11,11,10,.76) 0%, rgba(11,11,10,.18) 46%, rgba(11,11,10,0) 62%);
}
.hero__content{ position:relative; z-index:2; max-width:760px; }
.hero__content .display-1{ margin-bottom:22px; }
.hero__tags{ display:flex; flex-wrap:wrap; gap:9px; margin:26px 0 36px; }
.hero__tags span{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--paper-dim);
  padding:7px 12px; border:1px solid var(--line); position:relative;
}
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }

.hero__hud-info{ position:absolute; z-index:2; right:var(--gutter); bottom:44px; text-align:right; font-family:var(--font-mono); font-size:.7rem; color:var(--paper-dim); }
.hero__hud-info .val{ color:var(--accent); }
@media (max-width: 860px){
  .hero{ align-items:flex-start; padding-top:140px; }
  .hero__visual{ opacity:.5; }
  .hero__hud-info{ display:none; }
}

/* ===================================================================
   Model panels (umbrella / beauty dish / rings / event light)
=================================================================== */
.model-panel{ position:relative; width:100%; aspect-ratio:1/1; max-width:400px; }
.model-panel canvas{ width:100%; height:100%; display:block; }
.model-panel__tag{
  position:absolute; left:10px; bottom:10px; font-family:var(--font-mono); font-size:.66rem;
  color:var(--paper-dim); letter-spacing:.04em; z-index:2;
}

/* ===================================================================
   Split rows
=================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); align-items:center; }
.split--reverse .split__text{ order:2; }
.split__text{ max-width:48ch; }
.split__text p{ margin-top:18px; color:var(--paper-dim); }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; } .split--reverse .split__text{ order:0; } }

/* ===================================================================
   Spec list (About / gear)
=================================================================== */
.spec-list{ margin-top:26px; border-top:1px solid var(--line); }
.spec-row{ display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:.85rem; }
.spec-row dt{ color:var(--paper-dim); }
.spec-row dd{ margin:0; text-align:right; }

/* ===================================================================
   Filmstrip mini-preview (top of each category section)
=================================================================== */

/* ===================================================================
   Category hero frame
=================================================================== */
.frame-hero{ position:relative; margin-bottom:40px; }
.frame-hero img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

/* Fashion shoots portrait, and its feature frame shares the row with the
   studio prop rather than spanning the page — so it is taller than it is wide.
   The ratio is mirrored in shared/gallery-schema.js, which is what the admin
   crops to; the two have to move together. */
.frame-hero--portrait img{ aspect-ratio:4/5; }
.split--feature{ align-items:center; margin-bottom:48px; }
.split--feature .frame-hero{ margin-bottom:0; width:100%; max-width:440px; justify-self:center; }
.split__prop{ display:flex; justify-content:center; }

/* Ring stage — the wedding rings travel from beside the feature photo down
   into the ring box, so one transparent canvas has to span both. It breaks out
   to the full viewport width to get margins either side of the photo wide
   enough to hold a ring, and never takes pointer events, so the photo below it
   still opens in the lightbox. */
.ring-stage{ position:relative; }
.ring-stage__canvas{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:100vw; height:100%; z-index:2; pointer-events:none;
}
.split--rings{ margin-top:72px; }
.split--rings .model-panel{ position:relative; z-index:1; }
.exif-bar{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--paper-dim);
}
.exif-bar .cat{ color:var(--paper); }

/* ===================================================================
   Contact-sheet gallery
=================================================================== */
.contact-sheet{ display:grid; grid-template-columns:repeat(4, 1fr); gap:3px; background:var(--line); }
.contact-sheet__cell{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--panel); }
.contact-sheet__cell img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15); transition:transform .8s var(--ease-out), filter .4s; }
.contact-sheet__cell:hover img{ transform:scale(1.05); filter:grayscale(0); }
.contact-sheet__cell.is-pick .pick-mark{ opacity:1; }
.pick-mark{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s; }
.pick-mark svg{ width:100%; height:100%; }
.pick-mark .tag{
  position:absolute; top:8px; right:8px; font-family:var(--font-mono); font-size:.6rem;
  color:var(--pick); border:1px solid var(--pick); padding:2px 6px; letter-spacing:.05em;
  transform:rotate(-3deg);
}
@media (max-width: 860px){ .contact-sheet{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 560px){ .contact-sheet{ grid-template-columns:repeat(2,1fr); } }

/* ===================================================================
   Compare slider
=================================================================== */
.compare{ position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; user-select:none; touch-action:pan-y; cursor:ew-resize; background:var(--panel); }
.compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; }
.compare__after{ clip-path:inset(0 0 0 50%); }
.compare__label{ position:absolute; top:16px; z-index:3; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; padding:6px 10px; background:rgba(11,11,10,.6); backdrop-filter:blur(6px); color:var(--paper); }
.compare__label--before{ left:16px; }
.compare__label--after{ right:16px; }
.compare__handle{ position:absolute; top:0; bottom:0; left:50%; z-index:4; width:0; transform:translateX(-50%); pointer-events:none; }
.compare__handle::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:1px; background:var(--accent); }
.compare__grip{ position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:42px; height:42px; background:var(--black); border:1px solid var(--accent); display:grid; place-items:center; }
.compare__grip svg{ width:16px; height:16px; color:var(--accent); }
.compare__hint{ margin-top:12px; font-family:var(--font-mono); font-size:.7rem; color:var(--paper-dim); }

/* ===================================================================
   Notes (testimonials)
=================================================================== */
.notes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,28px); }
.note{ border:1px solid var(--line); padding:26px 22px; }
.note p{ font-size:1.02rem; line-height:1.5; }
.note cite{ display:block; margin-top:18px; font-style:normal; font-family:var(--font-mono); font-size:.72rem; color:var(--paper-dim); }
@media (max-width: 860px){ .notes{ grid-template-columns:1fr; } }

/* ===================================================================
   Contact
=================================================================== */
.contact__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,6vw,90px); align-items:start; }
.contact-list{ display:flex; flex-direction:column; margin-top:32px; }
.contact-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; border-top:1px solid var(--line); transition:padding-left .3s var(--ease-out); }
.contact-row:last-child{ border-bottom:1px solid var(--line); }
.contact-row:hover{ padding-left:8px; }
.contact-row__label{ display:flex; align-items:center; gap:14px; min-width:0; }
.contact-row__label svg{ width:18px; height:18px; color:var(--accent); flex:none; }
.contact-row__title{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; color:var(--paper-dim); display:block; margin-bottom:4px; }
.contact-row__value{ font-family:var(--font-display); font-weight:500; font-size:1.2rem; white-space:nowrap; }
.contact-row__arrow{ width:14px; height:14px; color:var(--paper-dim); transition:transform .3s var(--ease-out); }
.contact-row:hover .contact-row__arrow{ transform:translateX(5px); color:var(--accent); }
@media (max-width: 860px){ .contact__grid{ grid-template-columns:1fr; } }

/* ===================================================================
   Footer
=================================================================== */
.footer{ border-top:1px solid var(--line); padding:32px var(--gutter) 30px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--font-mono); font-size:.72rem; color:var(--paper-dim); }
.footer .socials{ display:flex; gap:16px; }
.footer .socials a{ color:var(--paper-dim); transition:color .3s; }
.footer .socials a:hover{ color:var(--accent); }
.footer .socials svg{ width:16px; height:16px; }

/* ===================================================================
   Motion & a11y
=================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal, .pre-reveal, .focus-pull, .contact-sheet__cell img, .btn, .contact-row{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ===================================================================
   Lightbox — click any gallery frame to see it whole
=================================================================== */
.contact-sheet__cell img, .frame-hero img{ cursor:zoom-in; }
.contact-sheet__cell img:focus-visible, .frame-hero img:focus-visible{
  outline:1px solid var(--accent); outline-offset:-3px;
}

.lightbox{
  width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
  margin:0; padding:0; border:0; background:transparent; overflow:hidden;
}
.lightbox::backdrop{ background:rgba(6,6,5,.94); backdrop-filter:blur(4px); }

.lightbox__frame{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  max-width:min(92vw, 1500px); max-height:78dvh;
  display:flex; align-items:center; justify-content:center;
}
.lightbox__img{
  display:block; max-width:min(92vw, 1500px); max-height:78dvh;
  width:auto; height:auto; object-fit:contain; background:var(--panel);
}

/* The same focus brackets the rest of the site frames a subject with. */
.lightbox__corner{ position:absolute; width:18px; height:18px; border:1px solid var(--accent); opacity:.75; }
.lightbox__corner.tl{ top:-9px; left:-9px; border-right:0; border-bottom:0; }
.lightbox__corner.tr{ top:-9px; right:-9px; border-left:0; border-bottom:0; }
.lightbox__corner.bl{ bottom:-9px; left:-9px; border-right:0; border-top:0; }
.lightbox__corner.br{ bottom:-9px; right:-9px; border-left:0; border-top:0; }

.lightbox__nav, .lightbox__close{
  position:absolute; z-index:2; display:grid; place-items:center;
  width:46px; height:46px; padding:0; cursor:pointer;
  background:rgba(11,11,10,.72); border:1px solid var(--line); color:var(--paper);
  font-family:var(--font-mono); font-size:1.1rem; line-height:1;
  transition:border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.lightbox__nav:hover, .lightbox__close:hover{ border-color:var(--accent); color:var(--accent); }
.lightbox__nav:focus-visible, .lightbox__close:focus-visible{ outline:1px solid var(--accent); outline-offset:2px; }
.lightbox__nav{ top:50%; transform:translateY(-50%); }
.lightbox__nav--prev{ left:clamp(10px, 3vw, 40px); }
.lightbox__nav--next{ right:clamp(10px, 3vw, 40px); }
.lightbox__close{ top:clamp(10px, 2vw, 26px); right:clamp(10px, 3vw, 40px); font-size:1.35rem; }

.lightbox__bar{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px clamp(14px, 4vw, 44px); border-top:1px solid var(--line);
  background:rgba(11,11,10,.82);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--paper-dim);
}
.lightbox__cat{ color:var(--accent); }
.lightbox__caption{ flex:1; min-width:0; color:var(--paper); }
.lightbox__counter{ color:var(--paper-dim); }

@media (max-width: 620px){
  .lightbox__frame{ max-height:66dvh; }
  .lightbox__img{ max-height:66dvh; }
  .lightbox__nav{ top:auto; bottom:76px; transform:none; }
}