/* =========================================================================
   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-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;
    gap: 32px;
  }
}

.hero-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-headline {
  /* White lines match the navigation's weight (500); ATTENTION. keeps
     its heavier accent weight via .hero-line-accent. */
  font-size: clamp(2.1rem, 3.85vw, 3.45rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
  transition: opacity 220ms ease;
}

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

.hero-line {
  display: block;
  /* 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);
  font-size: 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;
  background: var(--color-bg-elevated);
  /* 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);
}

.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;
  }

  /* 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; }

.hero-arrow-prev { left: 14px; }
.hero-arrow-next { right: 14px; }
.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;
}

.gallery-tile:hover .tile-media,
.gallery-tile:focus-visible .tile-media {
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.22);
}

.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 {
  filter: brightness(1.25);
}

.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;
  }
}