/* ═══════════════════════════════════════════════════════════════
   Ugly Mug Creative — styles.css
   Editorial dark theme for the studio's marketing site.

   Section index:
     1. Design tokens
     2. Reset & base
     3. Layout primitives
     4. Typography utilities
     5. Skip link
     6. Nav
     7. Hero
     8. Hero copy (descriptive H1)
     9. Scroll indicator
    10. Works (selected projects grid)
    11. Studio (about)
    12. Menu (services grid)
    13. Contact
    14. Footer
    15. Reveal-on-scroll motion
    16. Reduced motion
    17. Responsive — mobile (≤900px)
    18. Responsive — phone (≤600px)
    19. Responsive — small phone (≤420px)
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   Single source of truth for color, spacing, type, motion.
   ─────────────────────────────────────────────────────────────── */
:root {
  /* — Color —
     *-rgb tokens hold the channel triplets so rgba()-style alpha
     compositing can reuse them via `rgb(var(--bg-rgb) / 0.85)`. */
  --bg-rgb: 10, 10, 10;
  --accent-rgb: 245, 211, 107;
  --bg: rgb(var(--bg-rgb));
  --bg-2: #111111;
  --ink: #f4f1ea;
  --ink-dim: #8a8680;
  --ink-faint: #8e8a83;   /* warm gray — meets WCAG AA (~5.2:1 on bg) */
  --accent: rgb(var(--accent-rgb));
  --rule: #1f1d1a;
  --error: var(--accent);   /* form-error tone; aliased to keep single source of truth */

  /* — Spacing scale (4px base) — */
  --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: 2.5rem;    /* 40px */
  --space-8: 3rem;      /* 48px */
  --space-9: 3.75rem;   /* 60px */
  --space-10: 5rem;     /* 80px */
  --space-11: 6.25rem;  /* 100px */
  --space-12: 8.75rem;  /* 140px */

  /* — Layout — */
  --container-max: 82.5rem;     /* 1320px */
  --gutter-desktop: 2.5rem;     /* 40px */
  --gutter-mobile: 1.5rem;      /* 24px */

  /* — Type — */
  --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif: 'Fraunces', Georgia, serif;

  /* — Motion — */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-settle: cubic-bezier(.16, .84, .32, 1);
  --t-fast: 0.3s;
  --t-mid: 0.6s;
  --t-slow: 1s;

  /* — Effects — */
  --grain-opacity: 0.04;
  --z-grain: 100;
  --z-nav: 50;
  --z-overlay: 3;
}


/* ───────────────────────────────────────────────────────────────
   2. RESET & BASE
   ─────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--accent); color: #000; }

/* Visually hidden but still accessible to screen readers and form parsers */
.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;
}

/* Subtle film grain — sells the editorial feel without dominating */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}


/* ───────────────────────────────────────────────────────────────
   3. LAYOUT PRIMITIVES
   ─────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}


/* ───────────────────────────────────────────────────────────────
   4. TYPOGRAPHY UTILITIES
   ─────────────────────────────────────────────────────────────── */
.mono {
  font-family: var(--font-mono);
  font-size: 0.6875rem;       /* 11px */
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}


/* ───────────────────────────────────────────────────────────────
   5. SKIP LINK
   Keyboard-only affordance: jumps past the nav to <main>.
   Visible only when focused.
   ─────────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: calc(var(--z-nav) + 1);
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: #000;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform var(--t-fast) ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: none;
}


/* ───────────────────────────────────────────────────────────────
   6. NAV
   Transparent over hero. Dark/blurred after scroll.
   ─────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  /* Three-column grid: logo on the left, nav-links centered, the
     toggle (mobile only) on the right. The two 1fr outer tracks
     guarantee the middle track stays viewport-centered regardless
     of how many items live inside it. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.375rem var(--gutter-desktop);
  background: transparent;
  transition: background var(--t-fast) ease, backdrop-filter var(--t-fast) ease;
}

.nav.is-scrolled {
  background: linear-gradient(to bottom,
    rgb(var(--bg-rgb) / 1) 0%,
    rgb(var(--bg-rgb) / 1) 65%,
    rgb(var(--bg-rgb) / 0.85) 85%,
    transparent 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.logo {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.875rem;        /* 14px */
  letter-spacing: 0.12em;
  color: var(--accent);
  transition: opacity var(--t-fast) ease;
}

.logo:hover { opacity: 0.7; }

/* Nav logo mark — the mug. Footer keeps the wordmark for recognition. */
.nav .logo {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.logo-mark {
  width: 5rem;                /* 80px — logo art has built-in padding */
  height: 5rem;
  display: block;
  object-fit: contain;
}

.nav-links {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 2.75rem;
}

.nav-link {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.8125rem;       /* 13px — slightly larger to balance bigger logo */
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--t-fast) ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.375rem;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.4s var(--ease-out);
}

.nav-link:hover { color: var(--accent); }
.nav-link:hover::after { width: 100%; }

/* Shares grid-column 3 with .nav-toggle below — only one is ever
   visible at a time (.nav-cta on desktop, .nav-toggle on mobile),
   so they never collide in the right-hand cell. */
.nav-cta {
  grid-column: 3;
  justify-self: end;
  display: inline-block;
  padding: 0.6875rem 1.25rem;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}

.nav-cta:hover {
  background: var(--accent);
  color: #000;
}

/* Mobile menu toggle — hidden on desktop */
.nav-toggle {
  grid-column: 3;
  justify-self: end;
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--accent);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
  overflow: visible;
}

/* Hamburger → X morph when the drawer opens.
   Top and bottom lines translate to the SVG center then rotate;
   middle line fades out. transform-origin matches viewBox center. */
.nav-toggle svg line {
  transform-origin: 256px 256px;
  transition: transform var(--t-fast) var(--ease-out),
              opacity var(--t-fast) ease;
}

.nav.is-open .nav-toggle svg line:nth-child(1) {
  transform: rotate(45deg) translate(0, 96px);
}
.nav.is-open .nav-toggle svg line:nth-child(2) {
  opacity: 0;
}
.nav.is-open .nav-toggle svg line:nth-child(3) {
  transform: rotate(-45deg) translate(0, -96px);
}

/* Honor reduced-motion: skip the morph animation */
@media (prefers-reduced-motion: reduce) {
  .nav-toggle svg line { transition: none; }
}


/* ───────────────────────────────────────────────────────────────
   7. HERO
   ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: var(--bg);
}

/* Use small-viewport-height units on mobile so the browser nav bar
   doesn't push hero content off-screen */
@supports (height: 100svh) {
  .hero { height: 100svh; }
}

.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.hero-video.is-ready { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-video { transition: none; }
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 30%,
      var(--bg) 100%);
}


/* ───────────────────────────────────────────────────────────────
   8. HERO COPY — descriptive H1 centered over video. 6s arc:
   fades in over 1.1s, holds ~3s, fades out over the final 2s.
   Stays in DOM (indexable) regardless of animation state.
   ─────────────────────────────────────────────────────────────── */
.hero-copy {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-inline: var(--gutter-desktop);
  pointer-events: none;
  opacity: 0;
}

/* Triggered by JS once the hero video is ready — keeps copy synced with video reveal */
.hero-copy.is-ready {
  animation: hero-copy-show 6s ease-out forwards;
}

@keyframes hero-copy-show {
  0%   { opacity: 0; }
  18%  { opacity: 1; }   /* 1.1s fade-in — matches the hero video reveal */
  67%  { opacity: 1; }   /* ~3s visible at full opacity */
  100% { opacity: 0; }   /* 2s fade-out */
}

.hero-h1 {
  max-width: var(--container-max);
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 6.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  color: var(--accent);
}

.hero-sub {
  max-width: var(--container-max);
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(0.75rem, 1.4vw, 0.9375rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--accent);
  opacity: 0.85;
}


/* ───────────────────────────────────────────────────────────────
   9. SCROLL INDICATOR
   ─────────────────────────────────────────────────────────────── */
.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 2.5rem;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transform: translateX(-50%);
  color: var(--accent);
  animation: float 2.4s ease-in-out infinite;
}

.scroll-indicator span {
  font-family: var(--font-mono);
  font-size: 0.5625rem;       /* 9px */
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.scroll-arrow {
  width: 1px;
  height: 2rem;
  background: linear-gradient(to bottom, var(--accent), transparent);
}

@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(0.5rem); }
}


/* ───────────────────────────────────────────────────────────────
   10. WORKS — three-tile cinematic block
   Mathews (vertical) on the left, two 16:9 videos stacked on the right.
   All cells share total height to read as one rectangle.
   ─────────────────────────────────────────────────────────────── */
.works {
  padding-block: var(--space-9);
}

.works-heading {
  text-align: center;
  margin-bottom: var(--space-8);
}

.works-heading h2 {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.works-block {
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-4);
}

.works-tile {
  display: block;          /* forces block flow on the <a> variant — eliminates inline baseline gap */
  position: relative;
  overflow: hidden;
  background: #1a1a1a;
  font-size: 0;            /* defends against descendant whitespace creating a 1px line */
  line-height: 0;
}

.works-tile:not(.works-tile-tall) { aspect-ratio: 16/9; }

.works-tile-tall {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.works-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;  /* belt-and-braces: kills any leftover baseline-aligned 1px gap */
  filter: brightness(0.92);
  transition: transform 1.2s var(--ease-out), filter var(--t-mid) ease;
}

.works-tile:hover img {
  transform: scale(1.04);
  filter: brightness(1);
}

/* Replaced iframe (after click) fills the cell */
.works-tile iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* — YouTube facade play button — */
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5.5rem;
  height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  background: rgb(var(--bg-rgb) / 0.65);
  border: 1px solid rgb(var(--accent-rgb) / 0.4);
  border-radius: 0.875rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--accent);
  pointer-events: none;
  z-index: 2;
  transition: transform 0.4s var(--ease-out),
              background var(--t-fast) ease,
              border-color var(--t-fast) ease;
}

.play-button svg {
  width: 1.75rem;
  height: 1.75rem;
}

.works-video { cursor: pointer; }

.works-video:hover .play-button {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgb(var(--bg-rgb) / 0.8);
  border-color: var(--accent);
}

.works-video:focus-visible,
a.works-tile-tall:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* ───────────────────────────────────────────────────────────────
   11. STUDIO — editorial prose section
   Mobile: single column, padded.
   Tablet: single column, wider.
   Desktop ≥1024px: full-screen editorial spread, two-column prose.
   ─────────────────────────────────────────────────────────────── */
.studio {
  padding-block: var(--space-10) var(--space-9);
}

.studio .container {
  width: 100%;
}

.studio-heading {
  max-width: 50rem;
  margin: 0 auto var(--space-8);
  text-align: center;
}

.studio-heading h2 {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.studio-body {
  max-width: 40rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.studio-body p {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
}

/* Desktop ≥1024px: occupy full viewport, prose flows in two columns */
@media (min-width: 1024px) {
  .studio {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-block: var(--space-10);
  }

  .studio-body {
    max-width: 70rem;
    column-count: 2;
    column-gap: var(--space-9);
    display: block;
  }

  .studio-body p {
    break-inside: avoid;
    margin-bottom: var(--space-5);
  }

  .studio-body p:last-child {
    margin-bottom: 0;
  }
}


/* ───────────────────────────────────────────────────────────────
   12. MENU — services grid
   ─────────────────────────────────────────────────────────────── */
.menu {
  background: var(--bg-2);
  padding-block: var(--space-10) var(--space-12);
}

.menu-heading {
  text-align: center;
  margin-bottom: var(--space-11);
}

.menu-heading h2 {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.9;
  text-transform: uppercase;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-9) var(--space-7);
}

/* Center the orphaned 9th and 10th cards in the 4-column desktop grid:
   place item 9 in column 2 → items 9 and 10 occupy columns 2 and 3
   (centered within the 4-column row). At narrower breakpoints the grid
   collapses to 2 or 1 columns, so this placement no longer applies. */
@media (min-width: 901px) {
  .menu-grid .service:nth-child(9) {
    grid-column: 2;
  }
}

.service {
  position: relative;
  padding-top: var(--space-2);
}

/* Cursor only on actual content — not the empty space inside the card */
.service-icon,
.service h3,
.service p { cursor: pointer; }

.service-icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: 1.125rem;
  color: var(--accent);
}

.service h3 {
  margin-bottom: 0.625rem;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.service p {
  max-width: 20rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-dim);
}


/* ───────────────────────────────────────────────────────────────
   13. CONTACT
   ─────────────────────────────────────────────────────────────── */
.contact {
  padding-block: var(--space-12) var(--space-9);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-10);
  align-items: start;
}

.contact h2 {
  margin-bottom: var(--space-8);
  font-family: var(--font-sans);
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.92;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Default (≥421px): "Make Your Brand" reads as one line, then
   Impossible and To Ignore. each break onto their own line.
   Each rendered line stays nowrapped to prevent mid-phrase breaks. */
.contact h2 .contact-h2-word {
  display: inline;
  white-space: nowrap;
}
.contact h2 .contact-h2-word + .contact-h2-word::before {
  content: ' ';
  white-space: pre;
}
.contact h2 .contact-h2-line {
  display: block;
  white-space: nowrap;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.contact-info-item .icon {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
  flex-shrink: 0;
}

/* — Form — */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.field label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.5rem 0 0.875rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-faint);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;            /* 16px — prevents iOS auto-zoom on focus */
  outline: none;
  resize: none;
  transition: border-color var(--t-fast) ease;
}

.field textarea { min-height: 3.75rem; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }

.field input:focus,
.field textarea:focus { border-bottom-color: var(--accent); }

/* Error state — subtle, on-brand. Triggered by .has-error class on .field */
.field.has-error input,
.field.has-error textarea {
  border-bottom-color: var(--error);
}

.field.has-error label {
  color: var(--error);
}

.field-error {
  display: block;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--error);
  opacity: 0;
  transition: opacity var(--t-fast) ease,
              max-height var(--t-fast) ease,
              margin-top var(--t-fast) ease;
}

.field.has-error .field-error {
  max-height: 2rem;
  margin-top: 0.5rem;
  opacity: 1;
}

.submit-btn {
  margin-top: var(--space-2);
  padding: 1.125rem;
  background: linear-gradient(90deg, #ffffff 0%, var(--accent) 100%);
  border: 0;
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: transform var(--t-fast) ease, filter var(--t-fast) ease;
}

.submit-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}


/* ───────────────────────────────────────────────────────────────
   14. FOOTER
   ─────────────────────────────────────────────────────────────── */
.footer {
  padding-block: 2.25rem 2.5rem;
  border-top: 1px solid var(--rule);
}

.footer-inner .logo { display: block; margin-bottom: var(--space-2); }

.footer-inner small {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}


/* ───────────────────────────────────────────────────────────────
   15. REVEAL-ON-SCROLL MOTION
   Generic reveal applied via .reveal class, plus a dedicated
   per-item cascade for the menu grid.
   ─────────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Menu item cascade — slower, gentler than the page-wide reveal.
   Per-item delays are set in JS once the grid enters view. */
.menu-grid .service {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 1.6s var(--ease-settle),
              transform 1.6s var(--ease-settle);
  will-change: opacity, transform;
}

.menu-grid.is-revealed .service {
  opacity: 1;
  transform: none;
}


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

  html { scroll-behavior: auto; }

  .reveal,
  .menu-grid .service,
  .hero-copy {
    opacity: 1;
    transform: none;
    animation: none;
  }
}


/* ───────────────────────────────────────────────────────────────
   17. RESPONSIVE — mobile (≤900px)
   Single-column layouts, mobile-friendly nav, tightened spacing.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .container {
    padding-inline: var(--gutter-mobile);
  }

  .nav {
    padding: var(--space-4) var(--gutter-mobile);
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* Mobile closed state: hide the drawer items completely so they don't
     take layout space in the top bar (which would push the toggle off
     the right edge on narrow phones). */
  .nav-links,
  .nav-cta {
    display: none;
  }

  /* Mobile open state: the entire .nav becomes the full-screen overlay,
     stacking Work, Services, and Work With Us in one centered flex column
     with equal gaps. Logo and toggle absolute-pin to the top corners so
     they remain visible and tappable above the drawer content. We
     override display from grid (the desktop layout) to flex so
     flex-direction: column applies.
     The .is-closing state holds the same structural layout briefly while
     opacity fades to 0 — without it, the close would snap because
     display:grid <-> display:flex and inset changes can't transition. */
  .nav.is-open,
  .nav.is-closing {
    inset: 0;                        /* expand from top bar to full viewport */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-8);
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: opacity var(--t-fast) var(--ease-out);
  }

  .nav.is-closing {
    opacity: 0;
    pointer-events: none;
  }

  .nav.is-open .logo,
  .nav.is-closing .logo,
  .nav.is-open .nav-toggle,
  .nav.is-closing .nav-toggle {
    position: absolute;
    top: var(--space-4);
    z-index: var(--z-nav);
    background: transparent;
  }
  .nav.is-open .logo,
  .nav.is-closing .logo { left: var(--gutter-mobile); }
  .nav.is-open .nav-toggle,
  .nav.is-closing .nav-toggle { right: var(--gutter-mobile); }

  .nav.is-open .nav-links,
  .nav.is-closing .nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
  }

  .nav.is-open .nav-links {
    animation: nav-drawer-fade var(--t-fast) ease;
  }

  .nav.is-open .nav-link,
  .nav.is-closing .nav-link {
    font-size: 1.75rem;
    letter-spacing: 0.18em;
    color: var(--ink);
  }

  .nav.is-open .nav-link::after,
  .nav.is-closing .nav-link::after { display: none; } /* skip underline animation in drawer */

  .nav.is-open .nav-cta,
  .nav.is-closing .nav-cta {
    display: inline-flex;
    margin: 0;
    padding: 1rem 2rem;
    font-size: 0.75rem;
  }

  .nav.is-open .nav-cta {
    animation: nav-drawer-fade var(--t-fast) ease;
  }

  @keyframes nav-drawer-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .hero-copy {
    padding-inline: var(--gutter-mobile);
  }

  /* — Works: stack to single column — */
  .works-heading {
    margin-bottom: var(--space-6);
  }

  .works-block {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--space-3);
  }

  .works-tile-tall {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 4/5;
  }

  .works-tile:not(.works-tile-tall) {
    aspect-ratio: 16/9;       /* Standard ratio reads better on mobile */
  }

  /* — Studio: tighten spacing on mobile — */
  .studio {
    padding-block: var(--space-9) var(--space-8);
  }

  .studio-heading {
    margin-bottom: var(--space-6);
  }

  /* — Menu: 2 columns on tablet — */
  .menu {
    padding-block: var(--space-9) var(--space-10);
  }

  .menu-heading {
    margin-bottom: var(--space-9);
  }

  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8) var(--space-7);
  }

  /* — Contact: stack — */
  .contact {
    padding-block: var(--space-10) var(--space-8);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .contact h2 { margin-bottom: var(--space-6); }

  /* The email is long ("uglymugcreative@gmail.com"); default 0.18em
     letter-spacing pushes it past its flex-item width on narrow phones,
     visually shifting the row right of the Birmingham, AL row.
     Tighter tracking + overflow-wrap keeps both rows aligned. */
  .contact-info-item {
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

}


/* ───────────────────────────────────────────────────────────────
   18. RESPONSIVE — phone (≤600px)
   Drops menu to single column. Tablets at 601-900px keep 2 columns.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .menu-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}


/* ───────────────────────────────────────────────────────────────
   19. RESPONSIVE — small phone (≤420px)
   Final tightening for narrow phones.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .nav { padding: var(--space-3) var(--gutter-mobile); }
  .play-button { width: 4.5rem; height: 3rem; }
  .play-button svg { width: 1.5rem; height: 1.5rem; }

  /* Tighten the hero subhead's tracking on the narrowest screens so a
     wrapped second line doesn't look unsettled (default 0.22em is too
     loose for uppercase mono once it breaks). */
  .hero-sub { letter-spacing: 0.16em; }

  /* Mobile drawer with 3 nav links + CTA gets tight at 320px — pull the
     stacked link gap back one notch so the toggle keeps clear airspace. */
  .nav.is-open .nav-links,
  .nav.is-closing .nav-links { gap: var(--space-7); }

  /* "Make" and "Your Brand" split onto separate lines so the longest
     rendered line drops from 15ch to 10ch — fits cleanly on 320px. */
  .contact h2 .contact-h2-word {
    display: block;
  }
  .contact h2 .contact-h2-word + .contact-h2-word::before {
    content: none;
  }
}


/* ───────────────────────────────────────────────────────────────
   20. BLOG — editorial placeholder & future post layout
   Used by /blog/index.html (and eventually individual posts).
   ─────────────────────────────────────────────────────────────── */
.page-blog {
  background: var(--bg);
  color: var(--ink);
}

.blog-main {
  min-height: 100vh;
  padding-block: clamp(7rem, 14vh, 11rem) var(--space-9);
  padding-inline: var(--gutter-desktop);
  display: flex;
  justify-content: center;
}

.blog-intro {
  max-width: 38rem;
  width: 100%;
}

.blog-eyebrow {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.6875rem;        /* 11px */
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
}

.blog-title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
}

.blog-deck {
  margin: 0 0 var(--space-6);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.78;
}

.blog-divider {
  width: 4rem;
  height: 1px;
  margin: var(--space-7) 0;
  background: var(--ink);
  opacity: 0.25;
}

.blog-body {
  margin: 0 0 var(--space-6);
  font-family: var(--font-serif, 'Fraunces', serif);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.45vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ink);
}

.blog-cta-wrap {
  margin: var(--space-6) 0 0;
}

.blog-cta {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  transition: opacity var(--t-fast) var(--ease-out);
}

.blog-cta:hover,
.blog-cta:focus-visible {
  opacity: 0.85;
}

@media (max-width: 900px) {
  .blog-main {
    padding-inline: var(--gutter-mobile);
    padding-block: clamp(9rem, 18vh, 12rem) var(--space-8);
  }
}