/* ============================================================
   JOSH NAGEL PRODUCTIONS — DESIGN TOKENS
   Derived from approved art direction.

   TYPEFACE NOTE: the approved art direction specifies Canela/
   Reckless Neue (display serif) and Suisse Int'l/National 2
   (grotesk). Those are licensed commercial faces. This build
   uses close, freely-licensed stand-ins — Fraunces (soft-contrast
   editorial serif) and Inter (disciplined grotesk) — so the
   system is fully functional today. Swap the font-family values
   below once the licensed faces are purchased; nothing else
   needs to change.
   ============================================================ */

:root {
  /* ---- Color ---- */
  --color-base: #0E0D0C;        /* warm near-black */
  --color-paper: #F4F1EA;       /* warm bone/white */
  --color-accent: #74563A;      /* burnt umber — rare use only; darkened from art-direction #8A6A4B to clear 4.5:1 AA with paper-colored text in hover states */
  --color-support: #8C8880;     /* graphite, lightened from art-direction #3A3835 to clear 4.5:1 AA on the dark base — original tone kept as --color-support-on-paper below */
  --color-support-on-paper: #3A3835;
  --color-signal: #B23A2E;      /* muted rust — single live/active marker only */
  --color-hairline: rgba(244, 241, 234, 0.16);
  --color-hairline-on-paper: rgba(14, 13, 12, 0.14);

  /* ---- Type ----
     Direction A: condensed display for headlines/titles only.
     Body, nav, descriptions, and form text stay in Inter.
     Mono is a restrained accent for metadata only (role, year, index
     numbers) — never for paragraphs. */
  --font-display: "Big Shoulders Display", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step-label: 0.6875rem;   /* 11px small-caps utility labels */
  --step-body: 1.0625rem;    /* 17px */
  --step-body-lg: 1.25rem;   /* 20px */
  /* Display sizes run larger than the previous serif scale: Big Shoulders
     is condensed, so it occupies far less width per character and needs
     more size to carry the same weight on the page. */
  --step-h3: 2.25rem;
  --step-h2: clamp(2.25rem, 4.5vw, 3.75rem);
  --step-section-heading: clamp(2rem, 2.8vw, 3.25rem); /* real section headings, site-wide — its own 2rem/32px floor already clears the "min 1.8rem mobile" requirement, so no separate mobile override is needed */
  --step-h1: clamp(3rem, 8vw, 6.5rem);

  --tracking-label: 0.12em;
  --tracking-display: 0.005em;
  --leading-body: 1.6;
  --leading-display: 0.94;

  /* ---- Layout ---- */
  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-space: clamp(4rem, 12vw, 9rem); /* reserved for deliberate full hero/CTA moments only */
  --section-gap: clamp(3rem, 6vw, 6.25rem); /* ~48-100px: normal content-section rhythm site-wide */
  --content-max: 80rem; /* shared centered container width for interior pages */
  --content-padding-inline: clamp(1.5rem, 4vw, 4rem); /* 24-64px: shared container's horizontal padding */

  /* ---- Motion (see motion system spec) ---- */
  --ease-cut: linear;
  --ease-dissolve: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-drift: cubic-bezier(0.25, 0.1, 0.25, 1);

  --dur-cut: 80ms;
  --dur-dissolve: 250ms;
  --dur-dissolve-slow: 400ms;
  --dur-drift: 10s;
}

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

html {
  background: var(--color-base);
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--color-base);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

/* Display headings — Big Shoulders Display, uppercase, tightly set.
   Applied to hero, page titles, section titles, work/case-study titles
   and large pull quotes only. Never to paragraphs. */
.hero__logline,
.page-intro__title,
.section__title,
.work-card__title,
.index-row__title,
.pov__quote,
.closing-cta__title,
.prose-section__title,
.cs-hero__title,
.contact-hero__title,
.form-success__title,
.pillar h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}

.hero__logline,
.page-intro__title,
.closing-cta__title,
.cs-hero__title,
.contact-hero__title {
  font-weight: 800;
}

/* Long project titles need room. Condensed type at large sizes turns a
   title like "Food Stories — Achieving the Dream" into a dense wall,
   so work/index titles run smaller, looser, and with more line-height
   than the hero and page titles do. */
.work-card__title,
.index-row__title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: 0.02em;
  line-height: 1.06;
  max-width: 22ch;
}

/* The lead card carries the largest treatment, but still looser than
   the hero. */
.work-card--static:first-child .work-card__title {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  letter-spacing: 0.015em;
  max-width: 18ch;
}

/* Page titles are often long sentences ("The complete record — sports,
   entertainment, music, and national brands"), so they get looser
   tracking and leading than the short, punchy hero line. */
.page-intro__title,
.section__title {
  letter-spacing: 0.015em;
  line-height: 1.0;
}

@media (max-width: 640px) {
  /* Condensed caps get dense fast on a narrow screen — ease tracking
     and leading across all display type at mobile widths. */
  .hero__logline,
  .page-intro__title,
  .section__title,
  .closing-cta__title,
  .pov__quote,
  .cs-hero__title,
  .contact-hero__title,
  .impact-card__title {
    letter-spacing: 0.02em;
    line-height: 1.0;
    /* A single long word (e.g. "CINEMATOGRAPHY", "ORGANIZATIONS",
       "#INTHISTOGETHEROHIO") in Big Shoulders Display at hero size has
       nowhere to break on a narrow screen and was clipping past the
       viewport edge. */
    overflow-wrap: anywhere;
  }

  .work-card__title,
  .index-row__title,
  .work-card--static:first-child .work-card__title {
    letter-spacing: 0.03em;
    line-height: 1.1;
    max-width: none;
    overflow-wrap: anywhere;
  }
}

/* Restrained mono accent — metadata only (role, year, index numbers). */
.u-meta,
.index-row__num,
.work-card__role,
.index-row__role,
.cs-hero__meta {
  font-family: var(--font-mono);
  font-weight: 500;
}

.u-label {
  font-family: var(--font-body);
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-support);
}

.u-measure { max-width: var(--measure); }

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Visible, deliberate focus state — never removed */
:focus-visible {
  outline: 2px solid var(--color-paper);
  outline-offset: 3px;
}

/* Global film-grain texture, applied once at the body level.
   Cheap: a small tiled SVG noise data-uri, not a per-element filter. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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