/* ============================================================================
   DJ WILLIONAIRE — Design System
   --------------------------------------------------------------------------
   Premium-but-warm. Dark warm-black backgrounds with aged-brass gold and
   off-white cream. Editorial typography in three voices:
      Playfair Display  → display / headlines
      DM Sans           → body / UI
      DM Mono           → captions, microcopy, technical detail

   Philosophy: "Black scrim, clean booth" — uncluttered, architectural,
   intentional. Generous whitespace. Restraint as the flex. No nightclub
   gradients, no neon. The premium signal is calm.

   Breakpoints: 375px (small mobile), 768px (tablet), 1440px (desktop)
   ============================================================================ */

/* ---------- TOKENS ---------- */
:root {
  /* ---- Color ---- */
  /* Background scale (warm-dark, never pure black — pure black reads cold/cheap) */
  --bg-deepest: #0E0C0A;        /* page background */
  --bg-surface: #161310;        /* cards, panels */
  --bg-elevated: #1F1B16;       /* hover states, further elevation */

  /* Gold scale (aged brass — sophistication signal, NOT bright yellow) */
  --gold: #C8A24B;              /* primary accent — links, key emphasis */
  --gold-muted: #8E7437;        /* hover/pressed state, secondary emphasis */
  --gold-dim: #534529;          /* hairline gold for subtle dividers */

  /* Cream scale (warm off-white — body copy on dark) */
  --cream: #F3EBD8;             /* primary text */
  --cream-muted: #B5AC9A;       /* secondary text, meta */
  --cream-dim: #6E6960;         /* tertiary text, placeholder */

  /* Lines */
  --hairline: rgba(243, 235, 216, 0.08);   /* subtle dividers on dark */
  --hairline-strong: rgba(243, 235, 216, 0.16);

  /* Semantic aliases */
  --text: var(--cream);
  --text-muted: var(--cream-muted);
  --text-dim: var(--cream-dim);
  --accent: var(--gold);
  --accent-hover: var(--gold-muted);

  /* ---- Typography ---- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Type scale (editorial generosity — body is 17px, not 16) */
  --fs-xs: 0.75rem;       /* 12px — mono microcopy, tags */
  --fs-sm: 0.875rem;      /* 14px — captions */
  --fs-base: 1.0625rem;   /* 17px — body */
  --fs-lg: 1.25rem;       /* 20px — large body, callouts */
  --fs-xl: 1.5rem;        /* 24px — h4 */
  --fs-2xl: 2rem;         /* 32px — h3 */
  --fs-3xl: 3rem;         /* 48px — h2 */
  --fs-4xl: 4rem;         /* 64px — h1 */
  --fs-5xl: 5.5rem;       /* 88px — hero display */

  /* Line heights */
  --lh-tight: 1.05;       /* display, hero */
  --lh-snug: 1.2;         /* H2/H3 */
  --lh-normal: 1.5;       /* UI body */
  --lh-loose: 1.7;        /* long-form prose */

  /* Letter spacing */
  --tracking-tight: -0.02em;       /* display headlines */
  --tracking-normal: 0;
  --tracking-wide: 0.08em;          /* mono caps, tags */
  --tracking-wider: 0.18em;         /* eyebrow microcopy */

  /* ---- Spacing scale (4px base, editorial generous) ---- */
  --space-1: 0.25rem;     /* 4px */
  --space-2: 0.5rem;      /* 8px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.5rem;      /* 24px */
  --space-6: 2rem;        /* 32px */
  --space-7: 3rem;        /* 48px */
  --space-8: 4rem;        /* 64px */
  --space-9: 6rem;        /* 96px */
  --space-10: 8rem;       /* 128px */
  --space-11: 12rem;      /* 192px */

  /* ---- Layout ---- */
  --container-max: 1200px;            /* default content width */
  --container-wide: 1440px;           /* wide sections (gallery, hero) */
  --container-narrow: 720px;          /* long-form prose */
  --gutter-mobile: var(--space-5);    /* 24px */
  --gutter-tablet: var(--space-7);    /* 48px */
  --gutter-desktop: var(--space-8);   /* 64px */

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);          /* editorial settle */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms;
  --duration: 320ms;
  --duration-slow: 720ms;

  /* ---- Radius (minimal — premium uses sharp edges) ---- */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 8px;     /* reserved for inputs/cards only */
}

/* ============================================================================
   RESET — minimal, intentional. No CSS-in-JS, no normalize bloat.
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  background: var(--bg-deepest);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  min-height: 100vh;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; background: transparent; border: 0; }
::selection { background: var(--gold); color: var(--bg-deepest); }

/* ============================================================================
   TYPOGRAPHY — the editorial voice. Display is Playfair, body is DM Sans,
   meta is DM Mono. Mono is a *signal* (technical, intentional), not the
   workhorse — use sparingly.
   ============================================================================ */
.display, h1.hero, .hero-display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-size: clamp(2.5rem, 6vw + 1rem, var(--fs-5xl));
}

h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw + 1rem, var(--fs-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 2.5vw + 1rem, var(--fs-3xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
}

h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

/* Eyebrow — the small mono label that appears above section headlines.
   Use as: <p class="eyebrow">The Process</p><h2>…</h2> */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--gold);
  margin-bottom: var(--space-4);
}

/* Lede — the opening paragraph after a hero. Slightly larger, more air. */
.lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--cream);
  max-width: 60ch;
}

/* Long-form prose — for About origin story, Process steps. Use on a parent
   container; child <p>, <em>, <strong> styled here. */
.prose {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--cream);
  max-width: 65ch;
}
.prose p { margin-top: var(--space-5); }
.prose p:first-child { margin-top: 0; }
.prose em { font-style: italic; color: var(--cream); }
.prose strong { font-weight: 600; color: var(--cream); }
.prose a { color: var(--gold); border-bottom: 1px solid var(--gold-dim); transition: border-color var(--duration) var(--ease); }
.prose a:hover { border-color: var(--gold); }

/* Meta line — DM Mono separator. Use for credentials, tags, location lines.
   <p class="meta">PITTSBURGH · WORLDWIDE · 50+ WEDDINGS</p> */
.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--cream-muted);
}

/* Pullquote — for testimonials and emphasized lines.
   Wrap in <blockquote class="pullquote">. */
.pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, var(--fs-2xl));
  line-height: var(--lh-snug);
  color: var(--cream);
  max-width: 32ch;
}
.pullquote::before { content: "“"; color: var(--gold); }
.pullquote::after  { content: "”"; color: var(--gold); }

/* ============================================================================
   LAYOUT — containers, sections, grids
   ============================================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

@media (min-width: 768px) {
  .container { padding-inline: var(--gutter-tablet); }
}
@media (min-width: 1440px) {
  .container { padding-inline: var(--gutter-desktop); }
}

/* Section — vertical rhythm between page blocks. */
.section {
  padding-block: var(--space-9);
}
.section--lg { padding-block: var(--space-10); }
.section--xl { padding-block: var(--space-11); }

/* Editorial two-column — text left, image right (or vice versa).
   Stacks on mobile. */
.split {
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 768px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
  }
  .split--reverse > :first-child { order: 2; }
}

/* ============================================================================
   COMPONENTS
   ============================================================================ */

/* ----- Nav (top) ----- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(14, 12, 10, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
}
.nav__brand {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--cream);
  position: relative;
  z-index: 22;
}
.nav__brand em { font-style: italic; color: var(--gold); }

/* Hamburger toggle — hidden on desktop, visible on mobile */
.nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 22;
}
.nav__toggle-icon,
.nav__toggle-icon::before,
.nav__toggle-icon::after {
  content: "";
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--cream);
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.nav__toggle-icon::before {
  position: absolute;
  transform: translateY(-7px);
}
.nav__toggle-icon::after {
  position: absolute;
  transform: translateY(7px);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-icon { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon::before { transform: translateY(0) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon::after  { transform: translateY(0) rotate(-45deg); }

/* Nav panel — mobile full-screen overlay, desktop inline list */
.nav__panel {
  position: fixed;
  inset: 0;
  background: var(--bg-deepest);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration) var(--ease);
  z-index: 21;
}
.nav__panel.is-open {
  opacity: 1;
  pointer-events: auto;
}
.nav__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  list-style: none;
  font-size: var(--fs-2xl);
  font-family: var(--font-display);
  text-align: center;
}
.nav__links a {
  color: var(--cream);
  transition: color var(--duration) var(--ease);
}
.nav__links a:hover { color: var(--gold); }
.nav__links a.is-active { color: var(--gold); font-style: italic; }

/* Body scroll lock when mobile nav is open */
body.nav-open { overflow: hidden; }

/* Desktop: hide hamburger, show links inline in the top bar */
@media (min-width: 768px) {
  .nav__toggle { display: none; }
  .nav__panel {
    position: static;
    background: transparent;
    opacity: 1;
    pointer-events: auto;
    display: block;
    z-index: auto;
  }
  .nav__links {
    flex-direction: row;
    gap: var(--space-5);
    font-size: var(--fs-sm);
    font-family: var(--font-body);
    text-align: left;
  }
  .nav__links a { color: var(--cream-muted); }
  .nav__links a:hover { color: var(--cream); }
  .nav__links a.is-active { color: var(--gold); font-style: normal; }
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border: 1px solid var(--cream);
  color: var(--cream);
  background: transparent;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.btn:hover { background: var(--cream); color: var(--bg-deepest); }

.btn--gold {
  border-color: var(--gold);
  color: var(--gold);
}
.btn--gold:hover { background: var(--gold); color: var(--bg-deepest); }

.btn--ghost {
  border-color: var(--hairline-strong);
  color: var(--cream-muted);
}
.btn--ghost:hover { border-color: var(--cream); color: var(--cream); background: transparent; }

/* ----- Card (process step, credential, service tier) ----- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  padding: var(--space-7);
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.card:hover {
  border-color: var(--hairline-strong);
  background: var(--bg-elevated);
}
.card__number {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--gold);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-5);
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  margin-bottom: var(--space-4);
  color: var(--cream);
}
.card__body {
  color: var(--cream-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
}

/* ----- Testimonial ----- */
.testimonial {
  border-left: 1px solid var(--gold-dim);
  padding-left: var(--space-7);
}
.testimonial__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--cream);
  margin-bottom: var(--space-5);
}
.testimonial__attr {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--cream-muted);
}
.testimonial__attr strong { color: var(--gold); font-weight: 400; }

/* ----- Form ----- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.field__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--cream-muted);
}
.field__input,
.field__textarea {
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.field__input:focus,
.field__textarea:focus {
  outline: 0;
  border-color: var(--gold);
  background: var(--bg-elevated);
}
.field__textarea { min-height: 7rem; resize: vertical; line-height: var(--lh-normal); }
.field__input::placeholder,
.field__textarea::placeholder { color: var(--cream-dim); }

/* ----- Footer ----- */
.footer {
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-8);
  color: var(--cream-muted);
}
.footer__brand {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--cream);
  margin-bottom: var(--space-4);
}
.footer__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ============================================================================
   HERO — full-width band with editorial image + text below.
   Used on most pages. Photo as wide band, text generous below.
   ============================================================================ */
.hero {
  padding-top: var(--space-8);
  padding-bottom: var(--space-9);
}
.hero__media {
  width: 100%;
  margin-bottom: var(--space-8);
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}
.hero__content {
  max-width: 60ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.hero__ctas {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

/* Hero variant — typography-only (no image). For pages where image dependency
   is deliberately removed (Destinations until photos arrive). */
.hero--typo {
  padding-block: var(--space-10);
}

/* ============================================================================
   GRIDS — 3-column for value-prop cards / credentials, 2-column for
   credential grids. Auto-stacking on mobile.
   ============================================================================ */
.grid-3 {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.grid-2 {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}

/* ============================================================================
   SECTION HEADER — eyebrow + headline + optional intro line.
   ============================================================================ */
.section-head {
  margin-bottom: var(--space-7);
  max-width: 65ch;
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* ============================================================================
   DESTINATIONS — typographic centerpiece. Large display word in gold-italic
   anchors the section when there's no hero image to carry it.
   ============================================================================ */
.dest-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  margin-block: var(--space-5);
}
.dest-coords {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-5);
}
.dest-coords hr {
  flex: 1;
  height: 1px;
  background: var(--gold-dim);
  border: 0;
}

/* Destinations grid — four-up region list, mono caps. */
.dest-regions {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .dest-regions { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .dest-regions { grid-template-columns: repeat(4, 1fr); }
}
.dest-regions li {
  padding-block: var(--space-5);
  border-top: 1px solid var(--hairline);
}
.dest-regions__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--gold);
  display: block;
  margin-bottom: var(--space-3);
}
.dest-regions__detail {
  font-family: var(--font-body);
  color: var(--cream);
  font-size: var(--fs-base);
  font-style: italic;
}

/* ============================================================================
   PRICING TIERS — three-card grid, middle tier highlighted.
   ============================================================================ */
.tier-card {
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
}
.tier-card--featured {
  border-color: var(--gold-dim);
  background: var(--bg-elevated);
}
.tier-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  color: var(--cream);
  margin-block: var(--space-4);
  line-height: var(--lh-tight);
}
.tier-card__price small {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--cream-muted);
  display: block;
  margin-top: var(--space-2);
  font-weight: 400;
}
.tier-card__list {
  list-style: none;
  padding: 0;
  margin-block: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--cream-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}
.tier-card__list li::before {
  content: "·";
  color: var(--gold);
  margin-right: var(--space-3);
}
.tier-card__footnote {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--cream-dim);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--lh-normal);
}
.tier-card__cta {
  margin-top: auto;
  padding-top: var(--space-6);
}

/* ============================================================================
   REVIEWS BADGE — static, brand-matched. Deep-links to WeddingWire.
   No third-party script; always renders.
   ============================================================================ */
.reviews-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-7);
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  text-align: center;
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.reviews-badge:hover {
  border-color: var(--gold-dim);
  background: var(--bg-elevated);
}
.reviews-badge__stars {
  font-size: var(--fs-2xl);
  color: var(--gold);
  letter-spacing: 0.1em;
  line-height: 1;
}
.reviews-badge__rating {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  color: var(--cream);
  line-height: 1;
}
.reviews-badge__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--cream-muted);
}
.reviews-badge__cta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--gold);
  border-bottom: 1px solid var(--gold-dim);
  padding-bottom: 2px;
  transition: border-color var(--duration) var(--ease);
}
.reviews-badge__cta:hover { border-color: var(--gold); }

/* ============================================================================
   GALLERY GRID — asymmetric editorial layout. Photo + figcaption per item.
   First tile spans wider on desktop for a hero-cell rhythm.
   ============================================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.gallery-grid figure { margin: 0; }
.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}
.gallery-grid figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--cream-muted);
  margin-top: var(--space-3);
  font-style: italic;
}
.gallery-grid figcaption strong {
  color: var(--gold);
  font-weight: 400;
  font-style: normal;
}
@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
  .gallery-grid > :nth-child(1) { grid-column: span 2; }
  .gallery-grid > :nth-child(1) img { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid > :nth-child(1) { grid-column: span 3; }
  .gallery-grid > :nth-child(2) { grid-column: span 2; }
  .gallery-grid > :nth-child(5) { grid-column: span 2; }
}

/* ============================================================================
   STEP CARDS — for The Process page. Larger than .card, more editorial. Numbered.
   ============================================================================ */
.step {
  padding-block: var(--space-7);
  border-top: 1px solid var(--hairline);
}
.step:last-child { border-bottom: 1px solid var(--hairline); }
.step__grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .step__grid {
    grid-template-columns: 200px 1fr;
    gap: var(--space-7);
  }
}
.step__number {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--gold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.step__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  margin-block: var(--space-3);
  color: var(--cream);
}
.step__body {
  color: var(--cream);
  line-height: var(--lh-loose);
  max-width: 60ch;
}

/* ============================================================================
   MOTION — staggered fade-up. CSS-only, no JS. Apply via class on first
   load. For scroll-triggered, the Upwork freelancer wires IntersectionObserver
   later (out of scope for prototype).

   Usage:
     <div class="stagger">
       <p class="fade-up" style="--delay: 0ms;">…</p>
       <p class="fade-up" style="--delay: 80ms;">…</p>
       <p class="fade-up" style="--delay: 160ms;">…</p>
     </div>
   ============================================================================ */
/* Fade-up plays on page load. Pure CSS, no JS dependency. */
.fade-up {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp var(--duration-slow) var(--ease) forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   UTILITIES (minimal — only ones used repeatedly)
   ============================================================================ */
.text-gold { color: var(--gold); }
.text-muted { color: var(--cream-muted); }
.text-dim { color: var(--cream-dim); }
.italic { font-style: italic; }
.mono { font-family: var(--font-mono); }
.center { text-align: center; }
.hairline { height: 1px; background: var(--hairline); border: 0; margin-block: var(--space-7); }

/* ============================================================================
   FONT LOADING — Google Fonts link goes in HTML <head>, not here. For
   reference, the Upwork freelancer needs:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap" rel="stylesheet">

   This loads:
     - Playfair Display 500/600, italic 500
     - DM Sans 400/500/600
     - DM Mono 400/500
   ============================================================================ */