/* ==========================================================================
   Story Place Productions — redesign design system
   --------------------------------------------------------------------------
   Currently used by index.html only. about.html / news.html / portfolio.html
   still load the previous css/style.css; they move over here as each one is
   redesigned, and style.css gets deleted once nothing references it.
   ========================================================================== */

:root {
  --bg:      #F6F3EE;   /* page cream            */
  --ink:     #14100D;   /* near-black text       */
  --accent:  #8A6A52;   /* muted brown/taupe     */
  --panel:   #E7E1D8;   /* image + section panel */

  /* ink at opacity — text hierarchy on light backgrounds */
  --ink-82: rgba(20, 16, 13, 0.82);
  --ink-72: rgba(20, 16, 13, 0.72);
  --ink-68: rgba(20, 16, 13, 0.68);
  --ink-60: rgba(20, 16, 13, 0.60);
  --ink-55: rgba(20, 16, 13, 0.55);
  --ink-50: rgba(20, 16, 13, 0.50);

  /* ink at opacity — rules and outlines */
  --rule-08: rgba(20, 16, 13, 0.08);
  --rule-12: rgba(20, 16, 13, 0.12);
  --rule-14: rgba(20, 16, 13, 0.14);
  --rule-28: rgba(20, 16, 13, 0.28);
  --rule-35: rgba(20, 16, 13, 0.35);

  /* cream at opacity — text and rules on dark backgrounds */
  --cream-82: rgba(246, 243, 238, 0.82);
  --cream-72: rgba(246, 243, 238, 0.72);
  --cream-62: rgba(246, 243, 238, 0.62);
  --cream-55: rgba(246, 243, 238, 0.55);
  --cream-50: rgba(246, 243, 238, 0.50);
  --cream-70: rgba(246, 243, 238, 0.70);
  --cream-45: rgba(246, 243, 238, 0.45);
  --cream-40: rgba(246, 243, 238, 0.40);
  --cream-18: rgba(246, 243, 238, 0.18);
  --cream-14: rgba(246, 243, 238, 0.14);

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --gutter: 48px;      /* horizontal page padding */
  --header-h: 63px;    /* sticky header height, for the hero's 100vh math */
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--ink); text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; }
a:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Shared type ---------- */

.eyebrow {
  font-size: 14px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
}
.eyebrow.on-dark { color: var(--cream-50); }
.eyebrow.muted   { color: var(--ink-50); }

.display {
  margin: 0; font-family: var(--serif); font-weight: 400;
  line-height: 1.05; letter-spacing: -0.005em;
}

/* Monospace stamp used on not-yet-delivered media placeholders. */
.ph-note {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-55);
}
.ph-note.on-dark { color: var(--cream-55); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 17px 34px;
  font-size: 14px; letter-spacing: 0.14em;
  text-transform: uppercase; text-align: center;
}
.btn-solid { background: var(--ink); color: var(--bg); }
.btn-solid:hover { background: var(--accent); color: var(--bg); }

.btn-outline { border: 1px solid var(--rule-28); }
.btn-outline:hover { border-color: var(--ink); background: rgba(20, 16, 13, 0.04); color: var(--ink); }

/* Heavier outline button — contact block */
.btn-outline-lg {
  display: block; padding: 20px 36px;
  border: 1px solid var(--ink);
  font-size: 16px; letter-spacing: 0.14em;
  text-transform: uppercase; text-align: center;
}
.btn-outline-lg:hover { background: var(--ink); color: var(--bg); }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px var(--gutter);
  background: rgba(246, 243, 238, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-08);
}
.wordmark { font-family: var(--serif); font-size: 30px; letter-spacing: 0.01em; }

.main-nav {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 32px;
  font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase;
}
.main-nav a.is-active { color: var(--accent); border-bottom: 1px solid var(--accent); }
.nav-phone { padding: 11px 20px; border: 1px solid var(--ink); white-space: nowrap; }
.nav-phone:hover { background: var(--ink); color: var(--bg); }

/* ---------- Hero ---------- */

.hero {
  display: grid; grid-template-columns: 1.22fr 1fr;
  align-items: stretch;
  min-height: calc(100vh - var(--header-h));
}
.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  gap: 28px; padding: 88px 64px 88px var(--gutter);
}
.hero-copy h1 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(56px, 6.4vw, 104px); line-height: 0.95; letter-spacing: -0.015em;
}
.hero-copy p {
  margin: 0; max-width: 44ch;
  font-size: 20px; line-height: 1.65; color: var(--ink-72);
  text-wrap: pretty;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
/* a lone button in the hero column shouldn't stretch to the full width */
.hero-copy > .btn { align-self: flex-start; margin-top: 6px; }

.hero-media {
  position: relative; align-self: stretch;
  min-height: 560px; background: var(--panel);
}
.hero-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 20%;
}

/* ---------- Interior page hero (news / portfolio / about) ---------- */

.page-hero {
  display: grid; grid-template-columns: 1.22fr 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--rule-08);
}
.page-hero .hero-copy { gap: 26px; padding: 104px 64px 104px var(--gutter); }
.page-hero h1 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(48px, 5.6vw, 92px); line-height: 0.98; letter-spacing: -0.015em;
}
.page-hero .hero-copy p {
  margin: 0; max-width: 46ch;
  font-size: 20px; line-height: 1.65; color: var(--ink-72); text-wrap: pretty;
}
.page-hero .hero-copy em { font-family: var(--serif); font-size: 22px; font-style: italic; }
.page-hero .hero-media { min-height: 520px; }
.page-hero .hero-media img { object-position: var(--pos, 50% 50%); }

.hero-stats { display: flex; gap: 44px; padding-top: 14px; }
.hero-stats .stat-num { font-size: 40px; }

/* ---------- Featured story ---------- */

.featured {
  padding: 104px var(--gutter) 40px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
.featured .video-embed { aspect-ratio: 16 / 10; }
.featured-copy { display: flex; flex-direction: column; gap: 22px; }
.featured-copy h2 { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.08; }
.featured-copy p {
  margin: 0; max-width: 48ch;
  font-size: 19px; line-height: 1.65; color: rgba(20, 16, 13, 0.7); text-wrap: pretty;
}
/* Jost ships no italic here, so titles fall back to the serif like elsewhere */
.featured-copy p em { font-family: var(--serif); font-size: 21px; font-style: italic; }

/* ---------- Story archive ---------- */

.archive { padding: 80px var(--gutter) 120px; }
.archive-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--rule-14);
}
.archive-head h2 { font-size: 40px; }

.archive-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 56px 40px; padding-top: 56px;
}
.story-card { display: flex; flex-direction: column; gap: 16px; }
.story-card:hover { color: var(--accent); }
.story-card .video-embed { aspect-ratio: 16 / 9; }
.story-body { display: flex; flex-direction: column; gap: 8px; }
.story-tag {
  font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-50);
}
.story-title {
  font-family: var(--serif); font-size: 25px; line-height: 1.22;
  text-wrap: pretty;
}
.story-desc {
  margin: 0; font-size: 17px; line-height: 1.6;
  color: var(--ink-68); text-wrap: pretty;
}
/* Copy we don't have yet — reads as a note, not as finished prose. */
.story-desc.pending {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; letter-spacing: 0.04em; color: var(--ink-50);
}

/* Campaign attribute chips (featured project) */
.tag-row {
  display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px;
  font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-60);
}
.tag-chip { padding: 9px 16px; border: 1px solid rgba(20, 16, 13, 0.2); }
/* running number, top-left of each thumbnail */
.story-num {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--bg);
  text-shadow: 0 1px 3px rgba(20, 16, 13, 0.55);
}
/* over a light striped placeholder rather than a photo thumbnail */
.story-num.on-light { color: rgba(20, 16, 13, 0.45); text-shadow: none; }

/* ---------- Intro + stats ---------- */

.intro {
  display: flex; flex-direction: column; gap: 64px;
  padding: 120px var(--gutter);
  border-top: 1px solid var(--rule-08);
}
.intro-grid {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 72px; align-items: center;
}
.intro-media {
  order: 1; position: relative; align-self: stretch;
  min-height: 380px; background: var(--panel);
}
.intro-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 34%;
}
.intro-copy { order: 2; display: flex; flex-direction: column; gap: 28px; }
.intro-copy h2 { font-size: clamp(38px, 4vw, 56px); }
.intro-copy p {
  margin: 0; max-width: 52ch;
  font-size: 22px; line-height: 1.72; color: var(--ink-82);
  text-wrap: pretty;
}
.intro-copy em {
  font-family: var(--serif); font-size: 23px; font-style: italic;
}

.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  padding-top: 36px; border-top: 1px solid var(--rule-12);
}
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat-num { font-family: var(--serif); font-size: 44px; line-height: 1; }
.stat-label {
  font-size: 14px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-60);
}

/* ---------- Bio block (about) ---------- */

/* Reuses .intro-grid / .intro-media / .intro-copy, but stands alone rather
   than sitting under the homepage's border-top + stat row. */
.bio { padding: 120px var(--gutter); }
.bio .intro-media { min-height: 400px; }
.bio .intro-copy { gap: 26px; }
.bio .intro-copy h2 { font-size: clamp(34px, 3.6vw, 52px); }
.bio .intro-copy p { font-size: 21px; line-height: 1.72; }
.bio .intro-copy p + p { font-size: 19px; line-height: 1.7; color: var(--ink-68); }
.bio .intro-copy p + p em { font-size: 21px; }

/* inline prose link */
.link-underline { border-bottom: 1px solid rgba(20, 16, 13, 0.3); }
.link-underline:hover { border-color: var(--accent); }

/* ---------- Awards (dark) ---------- */

.awards {
  background: var(--ink); color: var(--bg);
  padding: 120px var(--gutter);
  display: flex; flex-direction: column; gap: 56px;
}
.awards-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--cream-18);
}
.awards-head h2 { font-size: 40px; }
.awards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.award { display: flex; flex-direction: column; gap: 14px; }
.award-num { font-family: var(--serif); font-size: 56px; line-height: 1; }
.award-name { font-family: var(--serif); font-size: 27px; line-height: 1.2; }
.award p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--cream-70); text-wrap: pretty; }
.award p.pending {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; letter-spacing: 0.04em; color: var(--cream-55);
}
.awards-photo {
  position: relative; aspect-ratio: 16 / 9;
  background: #241E19; margin-top: 16px; overflow: hidden;
}
.awards-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
}

/* ---------- Testimonial (dark) ---------- */

.testimonial {
  background: var(--ink); color: var(--bg);
  padding: 110px var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
.testimonial figure { margin: 0; display: flex; flex-direction: column; gap: 28px; }
.testimonial blockquote {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 2.9vw, 44px); line-height: 1.25;
  font-style: italic; text-wrap: pretty;
}
.testimonial figcaption {
  font-size: 14px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cream-62);
}

/* ---------- Reel ---------- */

.reel {
  padding: 120px var(--gutter);
  display: flex; flex-direction: column; gap: 48px;
}
.section-head {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between; gap: 24px;
}
.section-head-text { display: flex; flex-direction: column; gap: 14px; max-width: 56ch; }
.section-head-text h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.08; }
.section-head > p {
  margin: 0; max-width: 38ch;
  font-size: 19px; line-height: 1.65; color: var(--ink-68);
  text-wrap: pretty;
}

/* ---------- Video facade / media placeholders ---------- */

/* Real video: thumbnail + play ring, opens in the modal via js/site.js.
   Deliberately NOT an inline iframe — see js/site.js. */
.video-embed {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  overflow: hidden; background: var(--panel);
  display: flex; align-items: center; justify-content: center;
}
.video-facade { cursor: pointer; background-size: cover; background-position: center; }
.video-facade::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(20, 16, 13, 0.28);
  transition: background-color 0.15s ease;
}
.video-facade:hover::after { background: rgba(20, 16, 13, 0.16); }

/* Striped panel for media we don't have yet */
.media-placeholder {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, var(--panel) 0 10px, #EFEAE3 10px 20px);
}
.media-placeholder.on-dark {
  background: repeating-linear-gradient(135deg, rgba(246, 243, 238, 0.09) 0 10px, rgba(246, 243, 238, 0.045) 10px 20px);
}
.placeholder-inner {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}

.play-ring {
  position: relative; z-index: 1;
  width: 84px; height: 84px; border-radius: 999px;
  border: 1px solid var(--rule-35);
  background: rgba(246, 243, 238, 0.75);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* play triangle */
.play-ring::before {
  content: ''; width: 0; height: 0; margin-left: 5px;
  border-left: 20px solid var(--ink);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  transition: border-left-color 0.15s ease;
}
.video-facade:hover .play-ring, .media-placeholder:hover .play-ring { background: var(--ink); }
.video-facade:hover .play-ring::before, .media-placeholder:hover .play-ring::before { border-left-color: var(--bg); }

/* smaller ring for the archive grid thumbnails */
.play-ring.sm { width: 56px; height: 56px; background: rgba(246, 243, 238, 0.72); }
.play-ring.sm::before {
  margin-left: 4px;
  border-left: 14px solid var(--ink);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

.play-ring.on-dark {
  width: 72px; height: 72px;
  border-color: rgba(246, 243, 238, 0.45);
  background: transparent;
}
.play-ring.on-dark::before {
  margin-left: 5px;
  border-left: 18px solid var(--bg);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.video-facade:hover .play-ring.on-dark, .media-placeholder:hover .play-ring.on-dark {
  background: rgba(246, 243, 238, 0.12);
}
.video-facade:hover .play-ring.on-dark::before, .media-placeholder:hover .play-ring.on-dark::before {
  border-left-color: var(--bg);
}

/* ---------- Explore cards ---------- */

.explore { padding: 0 var(--gutter) 120px; }
.explore-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--rule-14);
}
.explore-head h2 { font-size: 40px; }

.card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 40px; padding-top: 48px;
}
.card { display: flex; flex-direction: column; gap: 20px; }
.card:hover { opacity: 0.72; color: var(--ink); }
.card-media { position: relative; aspect-ratio: 4 / 5; background: var(--panel); }
/* Per-photo framing: each card image sets --pos inline (subject isn't centered
   in every source photo). Falls back to centre. */
.card-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.card-body { display: flex; flex-direction: column; gap: 10px; }
.card-body h3 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: 27px; line-height: 1.15;
}
.card-body p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink-68); text-wrap: pretty; }
.card-link {
  font-size: 14px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); padding-top: 6px;
}

/* ---------- Contact ---------- */

.contact {
  background: var(--panel); padding: 120px var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto;
  align-items: end; gap: 56px;
}
.contact-copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.contact-copy h2 { font-size: clamp(34px, 4.2vw, 58px); }
.contact-actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink); color: var(--cream-72);
  padding: 72px var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 56px;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; }
.footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 36ch; }
.footer-brand .name { font-family: var(--serif); font-size: 26px; color: var(--bg); }
.footer-brand p { margin: 0; font-size: 17px; line-height: 1.6; }
.footer-col {
  display: flex; flex-direction: column; gap: 14px;
  font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase;
}
.footer-col .label { color: var(--cream-40); }
.footer-col a { color: var(--cream-82); }
.footer-col a:hover { color: var(--bg); }
.footer-bottom {
  padding-top: 24px; border-top: 1px solid var(--cream-14);
  font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cream-45);
}

/* ---------- Video modal (opened by js/site.js) ---------- */

body.modal-open { overflow: hidden; }
.video-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 40px;
}
.video-modal.open { display: flex; }
.video-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 16, 13, 0.9); }
.video-modal-inner { position: relative; width: min(1040px, 100%); }
.video-modal-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; overflow: hidden;
}
.video-modal-frame iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; border: 0;
}
.video-modal-close {
  position: absolute; top: -44px; right: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(246, 243, 238, 0.12); border: none; color: var(--bg);
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.video-modal-close:hover { background: rgba(246, 243, 238, 0.24); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 64px var(--gutter) 48px; gap: 24px; }
  .hero-media { min-height: 62vh; }

  .intro { padding: 88px var(--gutter); gap: 48px; }
  .intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .intro-media { min-height: 300px; }

  .testimonial { grid-template-columns: 1fr; gap: 48px; padding: 88px var(--gutter); }
  .reel { padding: 88px var(--gutter); gap: 36px; }
  .explore { padding: 0 var(--gutter) 88px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  .contact { grid-template-columns: 1fr; align-items: start; gap: 36px; padding: 88px var(--gutter); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }

  .page-hero { grid-template-columns: 1fr; }
  .page-hero .hero-copy { padding: 64px var(--gutter) 48px; }
  .page-hero .hero-media { min-height: 46vh; }
  .featured { grid-template-columns: 1fr; gap: 36px; padding: 72px var(--gutter) 24px; }
  .archive { padding: 64px var(--gutter) 88px; }
  .archive-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 32px; }

  .bio { padding: 88px var(--gutter); }
  .bio .intro-media { min-height: 320px; }
  .awards { padding: 88px var(--gutter); gap: 44px; }
  .awards-grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 700px) {
  :root { --gutter: 24px; }

  /* Nav can't fit on one line at phone widths — let it wrap under the
     wordmark and shrink, and keep the phone number from breaking apart.
     The wrapped header is ~130px tall, too much to keep pinned on a phone,
     so it scrolls away here instead of sticking. */
  .site-header { position: static; flex-wrap: wrap; gap: 12px; padding: 14px var(--gutter); }
  .wordmark { font-size: 22px; }
  .main-nav { gap: 10px 16px; font-size: 12px; letter-spacing: 0.06em; }
  .nav-phone { padding: 8px 12px; }

  .hero-copy { padding: 48px var(--gutter) 40px; }
  .hero-copy p { font-size: 18px; }
  .hero-media { min-height: 56vh; }

  .intro { padding: 72px var(--gutter); }
  .intro-copy p { font-size: 19px; }
  .intro-copy em { font-size: 20px; }
  .stats { grid-template-columns: 1fr; gap: 24px; }

  .testimonial, .reel { padding: 72px var(--gutter); }
  .explore { padding: 0 var(--gutter) 72px; }
  .explore-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .card-grid { grid-template-columns: 1fr; gap: 36px; }

  .contact { padding: 72px var(--gutter); }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  .video-modal { padding: 20px; }
  .video-modal-close { top: -38px; }

  .play-ring { width: 64px; height: 64px; }
  .play-ring::before { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }
  .play-ring.sm { width: 52px; height: 52px; }

  .page-hero .hero-copy { padding: 48px var(--gutter) 40px; }
  .page-hero .hero-copy p { font-size: 18px; }
  .page-hero .hero-media { min-height: 42vh; }
  .featured { padding: 56px var(--gutter) 16px; }
  .archive { padding: 56px var(--gutter) 72px; }
  .archive-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .archive-grid { grid-template-columns: 1fr; gap: 40px; }

  .bio { padding: 72px var(--gutter); }
  .bio .intro-copy p { font-size: 19px; }
  .bio .intro-copy p + p { font-size: 17px; }
  .awards { padding: 72px var(--gutter); }
  .awards-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .award-num { font-size: 46px; }
}