/* ============================================================
   THE LANDON COLLECTION — Stylesheet
   Identity: Minimal Gallery Silence
   See PRODUCT.md and DESIGN.md at the repo root for the spec.
   ============================================================ */

/* Fontshare: Cabinet Grotesk + Satoshi */
@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@500,700&f[]=satoshi@300,400,500,700&display=swap');
/* Google Fonts: Cormorant Garamond italic + JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,400;1,500&family=JetBrains+Mono:wght@300;400&display=swap');

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* Color — OKLCH neutrals with faint warm tint toward gold */
  --bg-primary:    oklch(0.992 0.003 80);
  --bg-secondary:  oklch(0.965 0.004 80);
  --bg-tertiary:   oklch(0.940 0.005 80);
  --bg-hero:       oklch(0.150 0.005 80);
  --bg-overlay:    oklch(0.080 0.004 80 / 0.92);

  --text-primary:   oklch(0.180 0.005 80);
  --text-secondary: oklch(0.420 0.005 80);
  --text-muted:     oklch(0.640 0.005 80);
  --text-on-dark:   oklch(0.975 0.003 80);
  --text-on-dark-muted: oklch(0.760 0.005 80);

  --accent-gold:        oklch(0.760 0.060 80);
  --accent-gold-soft:   oklch(0.760 0.060 80 / 0.18);
  --accent-gold-faint:  oklch(0.760 0.060 80 / 0.06);

  --border-subtle: oklch(0 0 0 / 0.06);
  --border-medium: oklch(0 0 0 / 0.10);
  --border-strong: oklch(0 0 0 / 0.18);
  --border-on-dark: oklch(1 0 0 / 0.14);

  --shadow-xs:    0 1px 2px  oklch(0.180 0.005 80 / 0.04);
  --shadow-sm:    0 2px 8px  oklch(0.180 0.005 80 / 0.06);
  --shadow-md:    0 8px 24px oklch(0.180 0.005 80 / 0.08);
  --shadow-lg:    0 16px 48px oklch(0.180 0.005 80 / 0.10);
  --shadow-hover: 0 20px 60px oklch(0.180 0.005 80 / 0.14);

  /* Typography */
  --font-display:    "Cabinet Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:       "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-editorial:  "Cormorant Garamond", "Georgia", serif;
  --font-mono:       "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(3rem, 8vw, 6rem);
  --fs-h1:      clamp(2.25rem, 5vw, 4rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.5rem);
  --fs-quote:   clamp(1.5rem, 3vw, 2.25rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-label:   0.6875rem;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --sp-section: clamp(5rem, 10vw, 9rem);

  /* Motion curves */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* RESERVED: hero gold-line + hero stagger */

  /* Layout */
  --container: 1400px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --nav-h: 64px;

  /* Z-index scale */
  --z-content: 1;
  --z-sticky: 20;
  --z-nav: 30;
  --z-overlay: 40;
  --z-lightbox: 50;
}

/* ============================================================
   2. RESET
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* Prevent any element from causing horizontal scroll on mobile.
     `clip` is the modern equivalent of `hidden` that doesn't establish a
     new scroll container, so it won't break sticky-positioned descendants.
     The `hidden` line is a fallback for older browsers. */
  overflow-x: hidden;
  overflow-x: clip;
  /* Belt-and-suspenders: nothing on the page should ever exceed the viewport. */
  max-width: 100%;
}
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   3. UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.gold-rule {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--accent-gold);
  border: 0;
  margin: var(--sp-6) auto;
}
.gold-rule.left { margin-inline-start: 0; }

.section-head {
  text-align: center;
  margin-bottom: var(--sp-16);
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

.text-mono { font-family: var(--font-mono); font-weight: 300; }
.text-italic-serif { font-family: var(--font-editorial); font-style: italic; }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   4. NAV
   ============================================================ */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color 240ms var(--ease-out),
              border-color 240ms var(--ease-out),
              color 240ms var(--ease-out);
  border-bottom: 1px solid transparent;
  color: var(--text-on-dark);
}
.site-nav.is-scrolled,
.site-nav.is-light {
  background: oklch(0.992 0.003 80 / 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border-subtle);
  color: var(--text-primary);
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
}

.nav-links {
  display: flex;
  gap: var(--sp-8);
  align-items: center;
}
.nav-links a {
  position: relative;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5rem 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover::after { transform: scaleX(1); }
}
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.nav-toggle .bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 240ms var(--ease-out), opacity 200ms var(--ease-out);
}
.nav-toggle .bar + .bar { margin-top: 6px; }

@media (max-width: 767px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--bg-hero);
  color: var(--text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-drawer);
}
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  text-align: center;
}
.mobile-menu a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms var(--ease-out) calc(var(--i, 0) * 60ms),
              transform 320ms var(--ease-out) calc(var(--i, 0) * 60ms);
}
.mobile-menu.is-open a {
  opacity: 1;
  transform: none;
}

/* X morph — bars are 1.5px tall with 6px margin between them, so the
   middle bar is 7.5px from each outer bar (center to center). The outer
   bars need to translate that full distance to land on top of each other,
   otherwise the X looks lopsided. */
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.875rem 1.5rem 0.875rem 1.75rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 180ms var(--ease-out),
              box-shadow 180ms var(--ease-out),
              background-color 180ms var(--ease-out),
              color 180ms var(--ease-out),
              border-color 180ms var(--ease-out);
  user-select: none;
}
.btn:active { transform: scale(0.97); transition-duration: 120ms; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }
}

.btn--primary {
  background: var(--text-primary);
  color: var(--text-on-dark);
  border: 1px solid var(--text-primary);
}
.btn--outline {
  background: transparent;
  color: var(--text-on-dark);
  border: 1px solid var(--text-on-dark);
}
@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover {
    background: var(--text-on-dark);
    color: var(--text-primary);
  }
}
.btn--light {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
}

/* Trailing arrow icon nested in circle (button-in-button) */
.btn .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.14);
  margin-left: var(--sp-2);
  margin-right: -0.5rem;
  transition: transform 220ms var(--ease-out);
}
.btn .btn-icon svg { width: 14px; height: 14px; stroke-width: 1.5; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn-icon { transform: translate(2px, -1px); }
}
.btn--light .btn-icon { background: oklch(0 0 0 / 0.05); }

/* Plain text link with under-draw */
.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0;
  color: var(--text-primary);
}
.text-link::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left center;
}
@media (hover: hover) and (pointer: fine) {
  .text-link:hover::after {
    animation: link-redraw 360ms var(--ease-out) forwards;
  }
}
@keyframes link-redraw {
  0%   { transform-origin: right center; transform: scaleX(1); }
  49%  { transform-origin: right center; transform: scaleX(0); }
  50%  { transform-origin: left center;  transform: scaleX(0); }
  100% { transform-origin: left center;  transform: scaleX(1); }
}
.text-link svg { width: 14px; height: 14px; stroke-width: 1.5; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .text-link:hover svg { transform: translateX(3px); }
}

/* ============================================================
   6. HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh; /* small viewport height: avoids iOS URL-bar layout shift */
  min-height: 100dvh;
  background: var(--bg-hero);
  color: var(--text-on-dark);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.hero-slides {
  position: absolute;
  inset: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1500ms var(--ease-out);
  will-change: opacity;
}
.hero-slide.is-active { opacity: 1; }
/* The reset gives picture/img height:auto, which makes percentage heights on
   the img collapse to its intrinsic aspect height — leaving dark space below
   on tall mobile viewports. Take both out of the height-cycle by positioning
   them absolutely inside the slide. */
.hero-slide > picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.hero-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transform-origin: center;
}
.hero-slide.is-active .hero-slide-img {
  animation: ken-burns 12s linear forwards;
}
@keyframes ken-burns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.05); }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    oklch(0 0 0 / 0.20) 0%,
    oklch(0 0 0 / 0.10) 35%,
    oklch(0 0 0 / 0.45) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--container-pad);
  max-width: 100%;
}
.hero-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 13vw, 6rem);
  letter-spacing: 0.06em;
  line-height: 1;
  margin: 0;
  opacity: 0;
  transform: translateY(12px);
}
.hero-tagline {
  margin-top: var(--sp-8);
  font-size: var(--fs-label);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  opacity: 0;
  transform: translateY(12px);
}
@media (min-width: 768px) {
  .hero-name { font-size: var(--fs-display); letter-spacing: 0.06em; }
}
.hero-rule {
  width: 0;
  height: 1px;
  background: var(--accent-gold);
  margin: var(--sp-6) auto 0;
  border: 0;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .hero.is-loaded .hero-name {
    animation: hero-rise 700ms var(--ease-bounce) 200ms forwards;
  }
  .hero.is-loaded .hero-rule {
    animation: hero-line-draw 900ms var(--ease-bounce) 700ms forwards;
  }
  .hero.is-loaded .hero-tagline {
    animation: hero-rise 700ms var(--ease-out) 1100ms forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-name, .hero-tagline { opacity: 1; transform: none; }
  .hero-rule { width: 80px; opacity: 1; }
}
@keyframes hero-rise {
  to { opacity: 1; transform: none; }
}
@keyframes hero-line-draw {
  to { width: 80px; opacity: 1; }
}

.hero-scroll-indicator {
  position: absolute;
  bottom: calc(var(--sp-8) + env(safe-area-inset-bottom));
  left: 50%;
  width: 1px;
  height: 40px;
  background: var(--text-on-dark-muted);
  transform: translateX(-50%);
  opacity: 0.5;
  z-index: 2;
  overflow: hidden;
}
.hero-scroll-indicator::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--text-on-dark);
  transform-origin: top center;
  animation: scroll-pulse 2.4s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%   { transform: scaleY(0); transform-origin: top center; }
  40%  { transform: scaleY(1); transform-origin: top center; }
  41%  { transform: scaleY(1); transform-origin: bottom center; }
  100% { transform: scaleY(0); transform-origin: bottom center; }
}

/* ============================================================
   7. SECTIONS + CATEGORY CARDS
   ============================================================ */
.section { padding-block: var(--sp-section); }
.section--bg-secondary { background: var(--bg-secondary); }
.section--dark { background: var(--bg-hero); color: var(--text-on-dark); }

.categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 1023px) { .categories { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } }
@media (max-width: 480px)  { .categories { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); } }

.cat-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-tertiary);
  isolation: isolate;
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.cat-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 600ms var(--ease-out);
  z-index: 0;
}
.cat-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    oklch(0 0 0 / 0.10) 0%,
    oklch(0 0 0 / 0.55) 100%
  );
  transition: opacity 280ms var(--ease-out);
  z-index: 1;
}
.cat-card-content {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-6);
  z-index: 2;
  color: var(--text-on-dark);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.cat-card-num {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--text-on-dark-muted);
}
.cat-card-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.cat-card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: var(--sp-2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.cat-card-cta svg { width: 14px; height: 14px; stroke-width: 1.5; }

@media (hover: hover) and (pointer: fine) {
  .cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); z-index: 2; }
  .cat-card:hover .cat-card-img { transform: scale(1.06); }
  .cat-card:hover .cat-card-overlay { opacity: 0.6; }
  .cat-card:hover .cat-card-cta { opacity: 1; transform: none; }
}
.cat-card:active { transform: scale(0.99); }

/* ============================================================
   8. SELECTED WORK (asymmetric editorial grid)
   ============================================================ */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(280px, auto);
  gap: var(--sp-3);
}
.featured-grid > .fg {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-tertiary);
  cursor: zoom-in;
}
.featured-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 500ms var(--ease-out);
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .featured-grid > .fg:hover img { transform: scale(1.04); }
  .featured-grid > .fg:hover { z-index: 2; }
}
.fg-1 { grid-column: span 8; grid-row: span 2; }
.fg-2 { grid-column: span 4; grid-row: span 2; }
.fg-3 { grid-column: span 4; }
.fg-4 { grid-column: span 4; }
.fg-5 { grid-column: span 4; }
.fg-6 { grid-column: span 4; grid-row: span 2; }
.fg-7 { grid-column: span 8; grid-row: span 2; }

@media (max-width: 1023px) {
  .featured-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(220px, auto); }
  .fg-1, .fg-2, .fg-3, .fg-4, .fg-5, .fg-6, .fg-7 { grid-column: span 6; grid-row: auto; }
  .fg-1, .fg-7 { grid-row: span 2; }
}
@media (max-width: 600px) {
  .featured-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(180px, auto); gap: var(--sp-2); }
  .fg-1, .fg-2, .fg-3, .fg-4, .fg-5, .fg-6, .fg-7 { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 3; }
  .fg-1, .fg-7 { aspect-ratio: 3 / 4; } /* feature shots taller */
}

.featured-foot {
  margin-top: var(--sp-12);
  text-align: center;
}

/* ============================================================
   9. FILMSTRIP MARQUEE
   ============================================================ */
.filmstrip {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-section);
  background: var(--bg-primary);
}
.filmstrip-label {
  text-align: center;
  margin-bottom: var(--sp-12);
}
.filmstrip-track {
  display: flex;
  gap: var(--sp-3);
  width: max-content;
  animation: marquee 60s linear infinite;
}
.filmstrip:hover .filmstrip-track { animation-play-state: paused; }
.filmstrip-item {
  position: relative;
  flex: 0 0 auto;
  height: 360px;
  overflow: hidden;
  border-radius: 4px;
  cursor: zoom-in;
  background: var(--bg-tertiary);
}
.filmstrip-item img {
  height: 100%;
  width: auto;
  display: block;
  transition: transform 320ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .filmstrip-item:hover img { transform: scale(1.04); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .filmstrip-item { height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .filmstrip-track { animation: none; }
}

/* ============================================================
   10. PARALLAX QUOTE
   ============================================================ */
.parallax-quote {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-hero);
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  color: var(--text-on-dark);
  isolation: isolate;
}
.parallax-quote::before {
  content: "";
  position: absolute;
  inset: 0;
  background: oklch(0 0 0 / 0.28);
  z-index: 0;
}
.parallax-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  padding: 0 var(--container-pad);
}
.parallax-quote-glyph {
  display: block;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(4rem, 10vw, 7rem);
  color: var(--accent-gold);
  line-height: 1;
  margin-bottom: var(--sp-3);
  user-select: none;
}
.parallax-quote-text {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: 1.25;
  margin: 0;
}
.parallax-quote-attr {
  display: block;
  margin-top: var(--sp-6);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

/* ============================================================
   11. ABOUT TEASER
   ============================================================ */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) { .about-split { grid-template-columns: 1fr; } }

.about-text-block .eyebrow { margin-bottom: var(--sp-4); }
.about-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 var(--sp-6);
}
.about-body { color: var(--text-secondary); margin: 0 0 var(--sp-8); max-width: 56ch; }

.about-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-tertiary);
  box-shadow: var(--shadow-md);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   12. TESTIMONIALS
   ============================================================ */
.testimonials { text-align: center; }
.testimonials-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  max-width: 920px;
  margin-inline: auto;
}
.testimonials-stage {
  /* Grid lets every testimonial share one cell, so the cell auto-sizes
     to the longest one — no overflow into the dots row, no jumpy heights. */
  display: grid;
  grid-template-columns: 1fr;
  flex: 1 1 760px;
  max-width: 760px;
  min-width: 0;
}
.testimonial {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
  pointer-events: none;
}
.testimonial.is-active { opacity: 1; pointer-events: auto; }
.testimonial-arrow {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid oklch(from var(--text-primary) l c h / 0.18);
  border-radius: 50%;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.testimonial-arrow:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}
.testimonial-arrow:active { transform: scale(0.94); }
.testimonial-arrow:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
.testimonial-arrow svg { width: 22px; height: 22px; }
.testimonial-glyph {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 4rem;
  line-height: 1;
  color: var(--accent-gold);
  margin-bottom: var(--sp-4);
  user-select: none;
}
.testimonial-quote {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 0 var(--sp-6);
}
.testimonial-name {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-primary);
}
.testimonial-session {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-12);
}
.testimonial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--text-primary);
  background: transparent;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out);
}
.testimonial-dot.is-active { background: var(--text-primary); }

/* ============================================================
   13. INSTAGRAM STRIP
   ============================================================ */
.instagram-strip { text-align: center; }
.instagram-handle {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  margin: var(--sp-3) 0 var(--sp-12);
  color: var(--text-primary);
}
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 768px) { .instagram-grid { grid-template-columns: repeat(3, 1fr); } }
.instagram-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-tertiary);
}
.instagram-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out);
}
.instagram-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: oklch(0 0 0 / 0);
  transition: background-color 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .instagram-tile:hover img { transform: scale(1.05); }
  .instagram-tile:hover::after { background: oklch(0 0 0 / 0.18); }
}

/* ============================================================
   14. CTA (dark)
   ============================================================ */
.cta-section {
  background: var(--bg-hero);
  color: var(--text-on-dark);
  text-align: center;
}
.cta-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 var(--sp-4);
}
.cta-body {
  color: var(--text-on-dark-muted);
  max-width: 52ch;
  margin: 0 auto var(--sp-12);
}
.cta-buttons {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   15. FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding-block: var(--sp-12);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-6);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  min-width: 0;
}
.footer-copyright { font-family: var(--font-mono); font-weight: 300; font-size: 0.75rem; }
@media (max-width: 768px) {
  /* Stack the three footer parts vertically and center them on small screens. */
  .site-footer .container {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-4);
  }
  .footer-nav {
    /* Tighter gap so all six links fit without spilling past the edge. */
    gap: var(--sp-2) var(--sp-4);
    letter-spacing: 0.14em;
  }
}

/* ============================================================
   16. PORTFOLIO PAGE
   ============================================================ */
.page-header {
  padding-top: calc(var(--nav-h) + var(--sp-16));
  padding-bottom: var(--sp-12);
  text-align: center;
}
.page-header h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  letter-spacing: -0.02em;
  margin: var(--sp-3) 0 0;
}
.page-header .gold-rule { margin-top: var(--sp-6); }
/* Quick-links to the other three categories shown when viewing one category */
.portfolio-other-cats {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  margin-top: var(--sp-6);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.portfolio-other-cats__label {
  color: var(--text-muted);
  margin-right: 0.25rem;
}
.portfolio-other-cats__links { display: inline-flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: baseline; }
.portfolio-other-cats__link {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.portfolio-other-cats__link:hover {
  color: var(--accent-gold);
  border-bottom-color: var(--accent-gold);
}
.portfolio-other-cats__sep {
  color: var(--text-muted);
  opacity: 0.5;
  user-select: none;
}
.portfolio-other-cats__back { display: inline-flex; align-items: center; gap: 0.4rem; }
.portfolio-other-cats__back svg { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
.portfolio-other-cats__back:hover svg { transform: translateX(-3px); }
@media (max-width: 600px) {
  .portfolio-other-cats { font-size: 0.65rem; gap: 0.375rem 0.5rem; }
  .portfolio-other-cats__sep { display: none; }
}

/* Generous bottom spacing on both portfolio views, matching the galleries page */
#portfolio-cards-view,
#portfolio-masonry-view {
  padding-bottom: var(--sp-section);
}

/* Galleries showcase page */
.page-subhead {
  margin: var(--sp-6) auto 0;
  max-width: 540px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.page-subhead a { color: var(--text-primary); border-bottom: 1px solid currentColor; transition: opacity 200ms var(--ease-out); }
.page-subhead a:hover { opacity: 0.7; }
.galleries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--sp-6);
  padding-bottom: var(--sp-16);
}
.galleries-loading,
.galleries-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-16) var(--sp-6);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-muted);
}
/* ────────────────────────────────────────────────────────────────────────
   Gallery cards — editorial / magazine style.
   Photo on top with a soft drop shadow, caption sits cleanly below on the
   cream page background. No absolute-positioning gymnastics, looks
   intentional on every browser, and matches the rest of the site's voice.
   ──────────────────────────────────────────────────────────────────────── */
.galleries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--sp-12) var(--sp-8);
  padding-block: var(--sp-2) var(--sp-section);
}
.gallery-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.gallery-card__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
  background: var(--bg-tertiary);
  box-shadow: 0 1px 2px rgba(20, 18, 16, 0.06),
              0 12px 30px rgba(20, 18, 16, 0.10);
  transition: transform 360ms var(--ease-out), box-shadow 360ms var(--ease-out);
}
.gallery-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--ease-out);
}
.gallery-card__caption {
  padding-top: var(--sp-4);
  text-align: left;
}
.gallery-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 var(--sp-1);
}
.gallery-card__meta {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
@media (hover: hover) and (pointer: fine) {
  .gallery-card:hover { z-index: 2; }
  .gallery-card:hover .gallery-card__photo {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(20, 18, 16, 0.08),
                0 22px 48px rgba(20, 18, 16, 0.16);
  }
  .gallery-card:hover .gallery-card__img { transform: scale(1.04); }
  .gallery-card:hover .gallery-card__name { color: var(--accent-gold); }
}
.gallery-card { position: relative; }
.gallery-card:active .gallery-card__photo { transform: scale(0.99); }
@media (max-width: 600px) {
  .galleries-grid { grid-template-columns: 1fr; gap: var(--sp-10); padding-block: var(--sp-2) var(--sp-12); }
  .gallery-card__photo { aspect-ratio: 4 / 5; }
  .gallery-card__caption { padding-top: var(--sp-3); }
  .gallery-card__name { font-size: 1.25rem; }
  .gallery-card__meta { font-size: 0.65rem; letter-spacing: 0.16em; }
}

.filter-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: var(--z-sticky);
  background: oklch(0.992 0.003 80 / 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  padding-block: var(--sp-3);
}
.filter-list {
  position: relative;
  display: flex;
  justify-content: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
.filter-btn {
  position: relative;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--sp-3) 0;
  transition: color 220ms var(--ease-out);
}
.filter-btn:hover { color: var(--text-primary); }
.filter-btn.is-active { color: var(--text-primary); }
.filter-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--text-primary);
  transform-origin: left center;
  transition: transform 280ms var(--ease-in-out), width 280ms var(--ease-in-out);
  pointer-events: none;
}

.masonry {
  columns: 3;
  column-gap: var(--sp-3);
  padding-block: var(--sp-12);
}
@media (max-width: 1023px) { .masonry { columns: 2; } }
@media (max-width: 600px)  { .masonry { columns: 1; } }

.masonry-item {
  break-inside: avoid;
  margin-bottom: var(--sp-3);
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: zoom-in;
  background: var(--bg-tertiary);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
}
.masonry-item.is-loaded { opacity: 1; transform: none; }
.masonry-item img {
  width: 100%;
  display: block;
  transition: transform 480ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .masonry-item:hover img { transform: scale(1.03); }
  /* Lift the hovered tile above its neighbors so its shadow/scale always stay
     on top, never clipped by an adjacent card. */
  .masonry-item:hover { z-index: 2; }
}
.masonry-item.is-hidden { display: none; }

/* ============================================================
   17. ABOUT PAGE
   ============================================================ */
.about-page {
  padding-top: calc(var(--nav-h) + var(--sp-16));
  padding-bottom: var(--sp-section);
}
.about-page-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 900px) { .about-page-grid { grid-template-columns: 1fr; } }
.about-page-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-tertiary);
  box-shadow: var(--shadow-md);
}
.about-page-photo img { width: 100%; height: 100%; object-fit: cover; }

.about-page-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 8vw, 5rem);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: var(--sp-6) 0 var(--sp-3);
}
.about-page-sub {
  color: var(--text-muted);
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-12);
}
.about-page-body p {
  margin: 0 0 var(--sp-6);
  color: var(--text-secondary);
  max-width: 60ch;
}

/* ============================================================
   18. PRICING PAGE
   ============================================================ */
.pricing-page {
  padding-top: calc(var(--nav-h) + var(--sp-16));
  padding-bottom: var(--sp-section);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-16);
}
@media (max-width: 768px) { .pricing-grid { grid-template-columns: 1fr; } }

.pricing-card {
  position: relative;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
  display: flex;
  flex-direction: column;
}
@media (hover: hover) and (pointer: fine) {
  .pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
  }
}
.pricing-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 var(--sp-2);
}
.pricing-tagline {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin: 0 0 var(--sp-6);
}
.pricing-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.75rem);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 var(--sp-2);
}
.pricing-duration {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--sp-6);
}
.pricing-divider {
  height: 1px;
  background: var(--accent-gold);
  width: 40px;
  border: 0;
  margin: var(--sp-2) 0 var(--sp-6);
}
.pricing-features {
  margin: 0 0 var(--sp-12);
  flex: 1;
}
.pricing-features li {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.9375rem;
}
.pricing-features li:last-child { border-bottom: 0; }

.pricing-foot {
  margin-top: var(--sp-12);
  text-align: center;
  color: var(--text-muted);
  max-width: 60ch;
  margin-inline: auto;
  font-size: 0.875rem;
}

/* ============================================================
   19. CONTACT PAGE
   ============================================================ */
.contact-page {
  padding-top: calc(var(--nav-h) + var(--sp-16));
  padding-bottom: var(--sp-section);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  margin-top: var(--sp-16);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-form { display: flex; flex-direction: column; gap: var(--sp-6); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label {
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input,
.field textarea,
.field select {
  background: var(--bg-primary);
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  color: var(--text-primary);
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--text-primary);
  box-shadow: 0 0 0 3px oklch(0.180 0.005 80 / 0.10);
}
.field textarea { min-height: 140px; resize: vertical; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

.contact-info { display: flex; flex-direction: column; gap: var(--sp-8); }
.info-block .eyebrow { display: block; margin-bottom: var(--sp-2); }
.info-block-value {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
}
.info-block a { border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease-out); }
.info-block a:hover { border-bottom-color: var(--text-primary); }

.form-success {
  background: var(--bg-secondary);
  border: 1px solid var(--accent-gold-soft);
  padding: var(--sp-8);
  border-radius: 4px;
}
.form-success-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  margin: 0 0 var(--sp-2);
}
.form-success-body { color: var(--text-secondary); margin: 0; }

/* ============================================================
   20. LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-out);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-stage {
  position: relative;
  width: 90vw;
  height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.lightbox-img.is-shown { opacity: 1; transform: none; }
.lightbox-btn {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.06);
  color: var(--text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: background-color 220ms var(--ease-out), opacity 220ms var(--ease-out);
  opacity: 0.7;
}
.lightbox-btn:hover { background: oklch(1 0 0 / 0.16); opacity: 1; }
.lightbox-btn svg { width: 18px; height: 18px; stroke-width: 1.5; }
.lightbox-prev { left: var(--sp-6); }
.lightbox-next { right: var(--sp-6); }
.lightbox-close { top: var(--sp-6); right: var(--sp-6); transform: none; }
.lightbox-counter {
  position: absolute;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--text-on-dark-muted);
}
@media (max-width: 600px) {
  .lightbox-prev { left: var(--sp-2); }
  .lightbox-next { right: var(--sp-2); }
  .lightbox-close { top: var(--sp-2); right: var(--sp-2); }
}

/* ============================================================
   21. MOBILE OPTIMIZATION (≤ 768px)
   Tightens typography, section rhythm, and component sizing
   for phones. Desktop layouts above 768px are not affected.
   ============================================================ */
@media (max-width: 768px) {
  /* Section rhythm: dial down generous desktop spacing */
  :root {
    --sp-section: clamp(3.5rem, 9vw, 5rem);
  }

  /* Hero tagline: tighter letter-spacing on phones so the short location
     line keeps its proportions. Single line, no wrap. */
  .hero-tagline {
    margin-top: var(--sp-6);
    letter-spacing: 0.22em;
    white-space: nowrap;
  }
  .hero-rule { margin-top: var(--sp-4); }

  /* Section heads: less air on mobile, keep the editorial feel */
  .section-head { margin-bottom: var(--sp-12); }
  .gold-rule { margin: var(--sp-4) auto; }

  /* Category cards: square aspect for 2x2 grid → all four visible */
  .cat-card { aspect-ratio: 1 / 1; border-radius: 3px; }
  .cat-card-content { padding: var(--sp-4); gap: var(--sp-1); }
  .cat-card-name { font-size: 1.125rem; }
  .cat-card-num { font-size: 0.6875rem; }
  /* Mobile is touch — show CTA permanently so tap affordance is clear */
  .cat-card-cta { opacity: 1; transform: none; font-size: 0.625rem; margin-top: var(--sp-1); }

  /* Featured: trim the foot margin */
  .featured-foot { margin-top: var(--sp-8); }

  /* Filmstrip: shorter, less aggressive */
  .filmstrip-item { height: 200px; }
  .filmstrip-label { margin-bottom: var(--sp-8); }
  .filmstrip-track { gap: var(--sp-2); }

  /* Parallax quote: 70vh is overkill on phones */
  .parallax-quote { min-height: 56vh; }
  .parallax-quote-glyph { margin-bottom: var(--sp-2); }
  .parallax-quote-attr { margin-top: var(--sp-4); letter-spacing: 0.20em; }

  /* About teaser: photo first, text below — tighter gap */
  .about-split { gap: var(--sp-8); }
  .about-heading { margin-bottom: var(--sp-4); }
  .about-body { margin-bottom: var(--sp-6); }

  /* Testimonials: tighter spacing + smaller arrows on mobile */
  .testimonials-carousel { gap: var(--sp-2); }
  .testimonial-arrow { width: 36px; height: 36px; }
  .testimonial-arrow svg { width: 18px; height: 18px; }
  .testimonial-glyph { font-size: 3rem; margin-bottom: var(--sp-3); }
  .testimonial-quote { font-size: 1.375rem; line-height: 1.35; }
  .testimonial-dots { margin-top: var(--sp-8); }

  /* Instagram: handle margin too generous; make tiles tighter */
  .instagram-handle { margin: var(--sp-2) 0 var(--sp-8); font-size: 1.625rem; }
  .instagram-grid { gap: var(--sp-2); }

  /* CTA: stack full-width buttons, reduce body bottom margin */
  .cta-body { margin-bottom: var(--sp-8); }
  .cta-buttons { flex-direction: column; gap: var(--sp-3); align-items: stretch; }
  .cta-buttons .btn { justify-content: center; padding: 1rem 1.5rem; }

  /* Page headers: cut top padding so the H1 isn't pushed below the fold */
  .page-header,
  .about-page,
  .pricing-page,
  .contact-page { padding-top: calc(var(--nav-h) + var(--sp-8)); }
  .page-header { padding-bottom: var(--sp-6); }

  /* Pricing grid: reduce top margin, snug card padding */
  .pricing-grid { margin-top: var(--sp-8); gap: var(--sp-4); }
  .pricing-card { padding: var(--sp-8) var(--sp-6); }
  .pricing-features { margin-bottom: var(--sp-6); }

  /* Contact grid: tighter top margin */
  .contact-grid { margin-top: var(--sp-8); gap: var(--sp-12); }

  /* Filter bar: keep horizontal — scroll if needed rather than wrap.
     justify-content: flex-start so the leftmost button is reachable when the
     list overflows the viewport. */
  .filter-list {
    gap: var(--sp-6);
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    padding-inline: var(--sp-1);
  }
  .filter-list::-webkit-scrollbar { display: none; }
  .filter-btn { white-space: nowrap; flex-shrink: 0; }

  /* Masonry: tighter rhythm on phones */
  .masonry { padding-block: var(--sp-8); column-gap: var(--sp-2); }
  .masonry-item { margin-bottom: var(--sp-2); }

  /* Footer: stack cleanly, center, monospace copyright last */
  .site-footer .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-4);
  }
  .footer-nav { order: -1; gap: var(--sp-5, 1.25rem); }
  .footer-copyright { order: 1; }
}

/* Smallest phones: drop side padding per DESIGN.md */
@media (max-width: 374px) {
  :root { --container-pad: 1rem; }
  .hero-name { letter-spacing: 0.04em; }
  .cat-card-content { padding: var(--sp-3); }
}

/* Touch-only refinements (no hover support) */
@media (hover: none) and (pointer: coarse) {
  /* Show category CTA permanently — there's no hover to reveal it */
  .cat-card-cta { opacity: 1; transform: none; }
  /* Disable Ken Burns on touch to save battery and avoid repaint cost */
  .hero-slide.is-active .hero-slide-img { animation-duration: 16s; }
}