/* =========================================================================
   Steven Adler — Graphic Design / Art Direction
   Shared stylesheet. Dark cinematic theme per approved homepage mockup.
   ========================================================================= */

:root {
  --color-bg: #000000;
  --color-bg-elevated: #0a0a0a;
  --color-white: #f5f5f5;
  --color-text: #e8e8e8;
  --color-text-dim: #b3b3b3;
  --color-text-mute: #8a8a8a;
  --color-border: #2a2a2a;
  --color-yellow: #ffd23f;
  --color-orange-1: #ffb627;
  --color-orange-2: #ff8a1e;
  --color-orange-3: #f2540a;
  --gradient-orange: linear-gradient(90deg, var(--color-orange-1) 0%, var(--color-orange-2) 55%, var(--color-orange-3) 100%);
  --gradient-orange-text: linear-gradient(100deg, var(--color-orange-1) 0%, var(--color-orange-2) 50%, var(--color-orange-3) 100%);
  --color-gold-border: #caa24a;
  --font-display: "Helvetica Neue", Helvetica, "Inter", -apple-system, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, "Inter", -apple-system, Arial, sans-serif;
  --header-height: 84px;
  --container-max: 1400px;
  --container-pad: 40px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --focus-ring: 2px solid var(--color-yellow);
}

@media (max-width: 640px) {
  :root {
    --container-pad: 20px;
    --header-height: 64px;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--color-bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  color: var(--color-white);
}

p { margin: 0; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  background: var(--color-yellow);
  color: #000;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-weight: 700;
  z-index: 1000;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 8px;
}

/* Visually hidden but available to assistive tech */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

/* =========================================================================
   Header / nav (injected by js/chrome.js)
   ========================================================================= */

.site-header {
  position: relative;
  z-index: 100;
  border-bottom: 1px solid transparent;
}

.site-header .header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 20px var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-height);
  /* Safety net: if content ever exceeds available width (long labels,
     browser zoom, unusual viewport), wrap to a second row instead of
     silently clipping under the page's overflow-x:hidden. */
  flex-wrap: wrap;
  row-gap: 12px;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.site-logo-img {
  height: 64px;
  width: auto;
}

@media (min-width: 901px) and (max-width: 1180px) {
  .site-logo-img { height: 52px; }
}

@media (max-width: 640px) {
  .site-logo-img { height: 42px; }
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  row-gap: 12px;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
  row-gap: 8px;
}

.primary-nav a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-text-dim);
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.primary-nav a:hover {
  color: var(--color-white);
}

.primary-nav a[aria-current="page"] {
  color: var(--color-white);
  border-bottom-color: var(--color-yellow);
}

.btn-connect {
  /* Approved revision: plain yellow text link — no pill, no outline. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0;
  background: transparent;
  color: var(--color-yellow);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  border: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-connect:hover {
  color: var(--color-white);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-white);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

@media (min-width: 901px) and (max-width: 1180px) {
  .primary-nav { gap: 22px; }
  .primary-nav ul { gap: 20px; }

}

@media (max-width: 900px) {
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; }

  .primary-nav.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-elevated);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
    padding: 12px var(--container-pad) 20px;
    gap: 0;
  }

  .primary-nav.is-open ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .primary-nav.is-open li { border-bottom: 1px solid var(--color-border); }
  .primary-nav.is-open li:last-child { border-bottom: none; }

  .primary-nav.is-open a {
    padding: 14px 4px;
    width: 100%;
  }

  .primary-nav.is-open .btn-connect {
    margin-top: 12px;
    width: 100%;
  }
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
  padding: 6px 0 4px;
}

.hero-inner {
  /* mainsite_R2: text column (~35%) on pure black beside the image,
     which runs to the container's right edge. No overlap; the slide
     images carry their own baked-in left fades. */
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  display: grid;
  grid-template-columns: minmax(280px, 35%) 1fr;
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .hero {
    /* Close the black space above/below the stacked hero. */
    padding: 0;
  }

  .hero-inner {
    /* Stacked layout: revert to the normal centered container so the
       artwork doesn't run full-bleed under/behind the text column. */
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    grid-template-columns: 1fr;
    /* Tight gap between the text stack and the image — the big 32px gutter
       read as wasted black space on phones. */
    gap: 12px;
  }

  .hero-text {
    /* Let the headline/supporting lines size themselves; centering vertically
       in the auto-height row just added dead space. */
    justify-content: flex-start;
  }

  /* Headline collapses to ONE signal line across the top:
     "DESIGN THAT COMMANDS ATTENTION." — white body + orange ATTENTION,
     shrunk by fitHeroHeadline() so it never wraps to a second row. */
  .hero-headline {
    white-space: nowrap;
    line-height: 1.1;
  }
  .hero-headline .hero-line {
    display: inline;
    /* Keep nowrap on the spans too — with the children breakable the line
       collapsed back to 3 rows. Both levels nowrap = one true line. */
    white-space: nowrap;
  }
  /* The spans are built without whitespace between them; restore a real
     space before each line after the first so words don't run together
     (non-breaking so the joined line never splits at these seams). */
  .hero-headline .hero-line + .hero-line::before {
    content: "\00a0";
  }

  /* Supporting copy also stays on one line (fitHeroSupporting shrinks it). */
  .hero-supporting {
    margin-top: 8px;
    margin-bottom: 14px;
    max-width: none;
    white-space: nowrap;
    line-height: 1.3;
  }
}

.hero-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Ensures long headline text can never push the flex/grid track wider
     than its 35% column — the image column to the right stays fixed. */
  overflow: hidden;
  container-type: inline-size;
}

.hero-headline {
  /* White lines match the navigation's weight (500); ATTENTION. keeps
     its heavier accent weight via .hero-line-accent. */
  /* --hero-headline-fit is set by fitHeroHeadline() in main.js each time
     the text changes or the viewport resizes: it starts at the natural
     clamp() cap and steps down until the headline fits inside its column
     at the intended line count, so longer edits shrink instead of
     wrapping past the image row. Fallback is the same clamp() the site
     used before, so JS-off users still see reasonable sizing. */
  font-size: var(--hero-headline-fit, clamp(2.1rem, 3.85vw, 3.45rem));
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
  transition: opacity 220ms ease;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hero-headline.is-text-swapping {
  opacity: 0;
}

.hero-line {
  display: block;
  /* Each headline line is designed as its own line ("DESIGN THAT" |
     "COMMANDS" | "ATTENTION."); nowrap keeps that shape and lets
     fitHeroHeadline() shrink the whole block when the owner edits it
     to something longer, instead of the line wrapping into two rows. */
  white-space: nowrap;
  /* Bright white with only a whisper of sheen at the baseline — the
     mockup headline reads white, not silver. */
  background: linear-gradient(180deg, #ffffff 55%, #cfcfcf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-line-accent {
  font-weight: 700;
  background: var(--gradient-orange-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-supporting {
  margin-top: 18px;
  color: var(--color-text-dim);
  /* --hero-supporting-fit is set by fitHeroSupporting() in main.js. On
     desktop the copy wraps freely, never overflows, and stays at 0.95rem;
     on mobile it's forced onto one line (see @media ≤900px) and shrinks to
     fit the phone width. */
  font-size: var(--hero-supporting-fit, 0.95rem);
  line-height: 1.7;
  max-width: 60ch;
  margin-bottom: 28px;
  transition: opacity 220ms ease;
}

.hero-supporting.is-text-swapping {
  opacity: 0;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 22px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  border-radius: var(--radius-md);
}

.btn-outline {
  border: 1px solid var(--color-gold-border);
  color: var(--color-white);
  background: transparent;
}

.btn-outline:hover {
  background: rgba(202, 162, 74, 0.1);
}

.link-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--color-text-dim);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.link-secondary:hover { color: var(--color-white); }

.icon-grid {
  display: inline-grid;
  grid-template-columns: repeat(2, 5px);
  grid-template-rows: repeat(2, 5px);
  gap: 3px;
}
.icon-grid span {
  width: 5px; height: 5px;
  background: currentColor;
  border-radius: 50%;
}

/* Hero art / carousel */

.hero-art {
  position: relative;
  overflow: hidden;
  /* Transparent so the panel disappears into the page background before
     the first slide loads — no darker "elevated" plate on a black site. */
  background: transparent;
  /* Explicit height (not derived from slide aspect ratio in JS) so the
     art column always matches the text column's height, per mockup,
     and so there's no layout shift while the first slide loads. */
  /* Cap matches the container cap so the hero's scale locks once the
     site hits max width — no extra space on resize. */
  position: relative;
  height: clamp(300px, 28vw, 392px);
  /* Owner request: pull the image column 20px into the gap (was 24px)
     to reduce the black gutter between the text and the image. The
     prev arrow lives at left:14px inside .hero-art, so it shifts 20px
     to the left automatically along with the image. */
  margin-left: -20px;
}

.hero-art[hidden] { display: none; }

@media (max-width: 900px) {
  .hero-art {
    /* Size the panel to the artwork's shape (slight 2:1 crop) so the
       image fills it exactly — no letterbox bars on mobile. */
    height: auto;
    aspect-ratio: 2 / 1;
    /* Stacked layout: no side gap to reclaim. */
    margin-left: 0;
  }

  /* The desktop supporting-copy line break creates ragged wrapping on
     narrow screens — let the text flow naturally there. */
  .hero-supporting br { display: none; }
}

.hero-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  /* Every slide (active included) is absolutely pinned to the container,
     which carries the explicit height — the artwork always fills the
     panel edge-to-edge with no letterboxing (mockup behavior). */
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  /* Minimal glyph, no background circle — hit area sized to the
     doubled chevron. */
  width: 84px;
  height: 84px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 68px;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 180ms ease;
}

.hero-arrow[hidden] { display: none; }

/* Anchored to the image's own edges so the prev arrow sits at the left
   edge of the hero image and the next arrow's right side aligns with the
   nav CONNECT link + VIEW ALL WORK grid icon at the container's right
   edge (all three live in containers sharing --container-max/pad). */
.hero-arrow-prev { left: 0; }
.hero-arrow-next { right: 0; }
.hero-arrow:hover,
.hero-arrow:focus-visible {
  color: #fff;
}

.hero-pause {
  position: absolute;
  bottom: 12px;
  right: 12px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.45);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.hero-pause[hidden] { display: none; }

.hero-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--color-text-mute);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

/* =========================================================================
   Work bar (between hero and grid) — tabs / slide dashes / view-all link
   ========================================================================= */

.work-bar {
  border: none;
}

.work-bar-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.work-bar-tabs {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
  padding: 16px 0;
  /* Never wraps — scrolls horizontally instead when space runs out. */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.work-bar-tabs::-webkit-scrollbar {
  display: none;
}

.work-bar-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--color-text-mute);
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
}

.work-bar-tab:hover {
  color: var(--color-white);
}

.work-bar-tab.is-active {
  color: var(--color-orange-1);
  border-bottom-color: var(--color-yellow);
}

.work-bar-divider {
  flex-shrink: 0;
  color: var(--color-border);
  font-size: 11px;
}

.work-bar-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.work-bar-dashes {
  display: flex;
  align-items: center;
}

.work-bar-dash-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 0;
}

.work-bar-dash {
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: #3a3a3a;
  transition: background 180ms ease;
}

.work-bar-dash-btn:hover .work-bar-dash,
.work-bar-dash-btn:focus-visible .work-bar-dash {
  background: var(--color-orange-1);
}

.work-bar-dash.is-active {
  background: var(--gradient-orange);
}

.work-bar-viewall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--color-text-mute);
}

.work-bar-viewall:hover {
  color: var(--color-white);
}

@media (max-width: 640px) {
  .work-bar-inner {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .work-bar-tabs {
    padding: 12px 0;
  }

  .work-bar-right {
    justify-content: space-between;
    padding-bottom: 8px;
  }
}

/* =========================================================================
   Gallery grid (homepage)
   ========================================================================= */

.gallery-grid {
  padding: 0 0 80px;
}

.gallery-grid-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  /* Breathing room between framed tiles + their labels (mockup rhythm) */
  gap: 36px 24px;
  /* Homepage tiles are wide/cinematic per the approved mockup — gallery
     detail pages keep the default ratio (see .tile-media below). */
  --tile-ratio: 2 / 1;
}

.gallery-grid-inner .tile-label {
  letter-spacing: 0.2em;
}

@media (min-width: 640px) {
  .gallery-grid-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .gallery-grid-inner { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .gallery-grid-inner { grid-template-columns: repeat(4, 1fr); }
}

.gallery-tile {
  /* Mockup: hairline frame hugs the IMAGE only; the label sits below the
     framed box on the page background — no card/box around the label. */
  display: block;
  border: none;
  padding: 0;
  min-height: 44px;
}

/* Tile hover/focus glow — shared by the homepage grid and the gallery
   detail-page grid (both use .gallery-tile / .tile-media / .tile-label).
   Transition duration is zeroed globally under prefers-reduced-motion
   (see bottom of file); the brightness/glow state change still applies. */
.tile-media {
  aspect-ratio: var(--tile-ratio, 4 / 3.3);
  overflow: hidden;
  background: var(--color-bg-elevated);
  border: none;
  transition: box-shadow 180ms ease;
  /* Anchors a cropped tile <img>, which applyThumbnail() positions absolutely
     (width/height/left/top in %). Non-cropped imgs stay 100%/object-fit:cover. */
  position: relative;
}

/* Every gallery tile carries a thin dark-grey keyline by default. Drawn on a
   pseudo-element above the image (an outline on .tile-media gets covered by the
   absolutely-positioned cropped img). The hero carousel uses .hero-* markup,
   NOT .tile-media, so it is unaffected. */
.tile-media::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(88, 88, 88, 0.9);
  z-index: 3;
}

/* Edge glow — a soft light-grey halo that is brightest at the four edges and
   fades to nothing at the center, so dark/black images separate from the black
   page. A pseudo-element inset box-shadow (not on .tile-media itself) keeps it
   independent of the hover glow. Sits above the image. */
.tile-media.has-edgeglow::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 26px 5px rgba(214, 214, 214, 0.30);
  z-index: 2;
}

.gallery-tile:hover .tile-media,
.gallery-tile:focus-visible .tile-media {
  /* +50% highlight intensity: shadow blur 28→42, alpha 0.22→0.33. */
  box-shadow: 0 0 42px rgba(255, 255, 255, 0.33);
}

.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 180ms ease;
}

.gallery-tile:hover .tile-media img,
.gallery-tile:focus-visible .tile-media img {
  /* +50% highlight intensity: extra brightness above 1.0 scaled by 1.5
     (0.25 → 0.375 → brightness 1.375). */
  filter: brightness(1.375);
}

.tile-label {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-text-mute);
  transition: color 180ms ease;
}

.gallery-tile:hover .tile-label,
.gallery-tile:focus-visible .tile-label {
  color: var(--color-white);
}

/* .gallery-tile is an <a> on the homepage grid and a <button> on the
   gallery detail grid (opens the lightbox instead of navigating) — reset
   button chrome so it renders identically to the anchor version. */
button.gallery-tile {
  all: unset;
  display: block;
  box-sizing: border-box;
  width: 100%;
  border: none;
  padding: 0;
  min-height: 44px;
  cursor: zoom-in;
}

button.gallery-tile:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

/* Sub-gallery tiles zoom into the artwork so scan margins / built-in
   white borders on posters never show inside the frame. The lightbox
   still presents the full, untouched image. */
button.gallery-tile .tile-media img {
  transform: scale(1.14);
}

.gallery-empty {
  grid-column: 1 / -1;
  padding: 60px 24px;
  text-align: center;
  color: var(--color-text-mute);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

/* =========================================================================
   Gallery detail page
   ========================================================================= */

.gallery-page-header {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 10px var(--container-pad) 20px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--color-text-dim);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.back-link:hover { color: var(--color-white); }

.gallery-page-header h1 {
  /* Consistent section-header style sitewide: nav-type tracked caps,
     slightly larger than the 13px nav text. */
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-white);
}

.gallery-page-description {
  margin-top: 12px;
  color: var(--color-text-dim);
  max-width: 60ch;
}

/* Uniform cropped grid — identical column behavior, gap, aspect ratio,
   and tile styling (.gallery-tile / .tile-media / .tile-label) as the
   homepage grid. The owner explicitly approved cropping in this grid;
   the lightbox (opened per tile) shows the full uncropped image. */
.gallery-detail-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad) 80px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 24px;
}

@media (min-width: 640px) {
  .gallery-detail-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .gallery-detail-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .gallery-detail-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  z-index: 1000;
}

.lightbox[hidden] { display: none; }

.lightbox-figure {
  max-width: min(1200px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lightbox-figure img {
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

.lightbox-caption {
  color: var(--color-text-dim);
  font-size: 13px;
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-white);
  font-size: 20px;
}

/* Clearly-labeled back control (in addition to the icon-only close
   button) that closes the lightbox and returns to the grid. */
.lightbox-back {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.lightbox-back:hover,
.lightbox-back:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-white);
  font-size: 24px;
}
.lightbox-nav-prev { left: 20px; }
.lightbox-nav-next { right: 20px; }

/* =========================================================================
   About / Resume / Contact
   ========================================================================= */

.page-hero {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 10px var(--container-pad) 20px;
}

.page-hero h1 {
  /* Matches .gallery-page-header h1 — one consistent section-header
     style on every page. */
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-white);
}

.about-layout {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad) 80px;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 800px) {
  .about-layout { grid-template-columns: 1fr; }
}

.about-headshot {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.about-bio p {
  color: var(--color-text-dim);
  margin-bottom: 18px;
  max-width: 68ch;
  line-height: 1.7;
}

.resume-actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 var(--container-pad) 32px;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--container-pad);
}

.resume-embed-wrap {
  max-width: var(--container-max);
  margin: 0 auto 80px;
  padding: 0 var(--container-pad);
}

.resume-embed {
  width: 100%;
  height: 82vh;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
}

.resume-fallback {
  padding: 24px;
  color: var(--color-text-dim);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.contact-layout {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--container-pad) 100px;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 36px;
}

.contact-methods a {
  color: var(--color-white);
  font-weight: 500;
  font-size: 1.05rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.contact-methods a:hover { color: var(--color-orange-1); }

.form-field {
  margin-bottom: 20px;
}

.form-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-text-dim);
  margin-bottom: 8px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-white);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  min-height: 44px;
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--color-yellow);
}

.form-field.has-error input,
.form-field.has-error textarea {
  border-color: #ff5c5c;
}

.field-error {
  color: #ff8080;
  font-size: 12px;
  margin-top: 6px;
}

.form-error-summary {
  border: 1px solid #ff5c5c;
  background: rgba(255, 92, 92, 0.08);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 24px;
}

.form-error-summary h2 {
  font-size: 14px;
  color: #ff8080;
  margin-bottom: 8px;
}

.form-error-summary ul { list-style: disc; padding-left: 20px; }
.form-error-summary a { color: #ffb3b3; text-decoration: underline; }

.form-success,
.form-failure {
  padding: 20px;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}

.form-success {
  border: 1px solid var(--color-orange-1);
  background: rgba(255, 138, 30, 0.08);
}

.form-failure {
  border: 1px solid #ff5c5c;
  background: rgba(255, 92, 92, 0.08);
}

.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.submit-btn {
  border: none;
  background: var(--gradient-orange);
  color: #000;
  min-height: 48px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================================================================
   Footer
   ========================================================================= */

.site-footer {
  border: none;
  padding: 32px var(--container-pad) 48px;
  margin-top: 40px;
  text-align: center;
  color: #5a5a5a;
}
.site-footer p { color: #5a5a5a; }

.footer-inner {
  justify-content: center;
  text-align: center;
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text-mute);
  font-size: 13px;
}

.footer-inner a {
  color: var(--color-text-dim);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.footer-inner a:hover { color: var(--color-white); }

.footer-contact {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* =========================================================================
   Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}