/* ============================================================
   Erin Sanger — design system
   ============================================================ */

:root {
  --font-main: Futura, 'Futura PT', 'Century Gothic', 'URW Gothic', Avenir, 'Avenir Next LT Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ink: #141414;
  --ink-soft: #4a4a4a;
  --ink-faint: #8a8a8a;
  --paper: #ffffff;
  --line: #e7e5e2;
  --line-strong: #141414;
  --accent: #b8542e; /* warm terracotta accent used sparingly */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 140px;
  --container: 1800px;
  --container-pad: 32px;
  --nav-h: 96px;
  --ease: cubic-bezier(.4,0,.2,1);
  /* Matches the Squarespace gallery's real gutter (measured from reference
     screenshots). Kept in sync with GALLERY_GAP_PX in js/app.js, which uses
     this same value to estimate column heights so the JS column-balancing
     math agrees with what actually renders. */
  --gallery-gap: 56px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Visually hidden but present for screen readers and document outline —
   used for the one h1 every page needs even where the visual design has
   no room for (or want of) a printed page title. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-main);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

@media (max-width: 900px) {
  .container { padding: 0 var(--space-2); }
}

/* ---------------- NAV ---------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
}
/* note: no backdrop-filter here — it would establish a containing block
   for the fixed-position mobile .nav-links panel and break its sizing */

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

.logo {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .logo { font-size: 24px; }
}

.nav-links {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.nav-links a:hover { border-bottom-color: var(--ink-faint); }
.nav-links a.active { border-bottom-color: var(--ink); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}

@media (max-width: 1023px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--paper);
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-2);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav-links.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-links a { font-size: 15px; opacity: 1; }
}

/* ---------------- GRIDS (home / films / commercials) ---------------- */

.project-grid {
  display: grid;
  gap: 10px;
  margin-bottom: var(--space-4);
}
.project-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.project-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

/* A trailing odd tile (e.g. the 5th film) sits in the first column at its
   normal size, matching the original site — the second column is simply
   left blank rather than stretching the tile to fill the row. */

@media (max-width: 900px) {
  .project-grid.cols-3, .project-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .project-grid.cols-3, .project-grid.cols-2 { grid-template-columns: 1fr; }
}

.tile {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0f0f0f;
  display: block;
  cursor: pointer;
}
.tile img, .tile .tile-fallback {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease), filter .5s var(--ease);
}
.tile .tile-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1c1c1c, #2c2c2c);
  color: rgba(255,255,255,.35);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-2);
}
.tile:hover img { transform: scale(1.05); filter: brightness(.55); }
.tile:hover .tile-fallback { filter: brightness(.7); }

.tile-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2);
  background: linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 55%);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.tile:hover .tile-overlay { opacity: 1; }

.tile-title {
  color: #fff;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateY(6px);
  transition: transform .35s var(--ease);
}
.tile:hover .tile-title { transform: translateY(0); }

/* Touch devices don't have a real hover state — tapping a tile applies
   :hover, but there's no reliable "hover out" the way a mouse leaving the
   tile gives one, so it can stay stuck active after navigating to a
   project and back (the title/darkening lingering over the thumbnail for
   an awkward moment). The original site doesn't show this treatment on
   mobile at all, so disabling it here for hover:none devices matches that
   and removes the stuck-state glitch at the same time — desktop is
   unaffected since a mouse always fires a genuine hover-out. */
@media (hover: none) {
  .tile:hover img { transform: none; filter: none; }
  .tile:hover .tile-fallback { filter: none; }
  .tile:hover .tile-overlay { opacity: 0; }
  .tile:hover .tile-title { transform: translateY(6px); }
}

.tile-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,.45);
  padding: 5px 9px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.tile-network {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* ---------------- PAGE HEADERS ---------------- */

.page-head {
  padding: var(--space-5) 0 var(--space-4);
}
.page-head h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.page-head p {
  color: var(--ink-soft);
  max-width: 46em;
  margin-top: var(--space-2);
  font-size: 15.5px;
  line-height: 1.6;
}

/* ---------------- PROJECT DETAIL ---------------- */

.project-detail { padding-bottom: var(--space-7); }

.project-head {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4) var(--space-3);
  text-align: center;
}
.project-head h1 {
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.project-head .subtitle {
  display: block;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.project-head .synopsis {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
}
.project-head .note {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
}
.project-head .note a { text-decoration: underline; text-underline-offset: 3px; }
.meta-block {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}
.meta-block .meta-label { color: var(--ink-faint); }
.project-head .director {
  font-family: var(--font-main);
  font-style: normal;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: var(--space-2) 0 0;
}

.project-media {
  max-width: 1180px;
  margin: 0 auto 36px;
  padding: 0 var(--space-4);
}
/* On a phone, the same padding used for the surrounding text leaves the
   video too narrow for Vimeo's/YouTube's own control bar to render its
   icons without crowding — which was the root cause of the fullscreen
   button being unreachable inline. Going edge-to-edge here (independent of
   the text's own margins) gives their controls the same room they'd have
   on the original Squarespace site. */
@media (max-width: 767px) {
  .project-media { padding: 0; margin-bottom: var(--space-3); }
}
.video-frame {
  position: relative;
  width: 100%;
  background: #0a0a0a;
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.35);
}
.video-frame iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-pending {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.4);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.video-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,.5);
  padding: 6px 10px;
  border-radius: 999px;
  pointer-events: none;
}
.video-poster {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  display: block;
}
.video-poster img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-poster-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.video-poster-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
}
.video-poster:hover .video-poster-play {
  background: rgba(0,0,0,.75);
  transform: translate(-50%, -50%) scale(1.06);
}

.poster-layout {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4) 0;
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: var(--space-6);
  align-items: start;
}
.poster-layout .poster-col {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-3));
}
.poster-layout img { width: 100%; box-shadow: 0 30px 70px -30px rgba(0,0,0,.4); }
.poster-layout .text-col { text-align: center; }
.poster-layout .text-col h1 {
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.poster-layout .synopsis {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
}
.poster-layout .note { font-size: 14.5px; color: var(--ink-soft); margin-bottom: var(--space-3); }
.poster-layout .note a { text-decoration: underline; text-underline-offset: 3px; }
.poster-layout .director {
  font-family: var(--font-main);
  font-style: normal;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 28px;
}
.poster-layout hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0 0 18px;
}
.poster-layout .awards { max-width: none; margin: 0; padding: 0; border-top: none; }

@media (max-width: 860px) {
  .poster-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .poster-layout .poster-col { position: static; max-width: 340px; }
}

.pull-quote {
  max-width: 760px;
  margin: 28px auto 18px;
  padding: 0 var(--space-4);
  text-align: center;
  font-family: var(--font-main);
  font-style: italic;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
}
.pull-quote-attribution {
  display: block;
  white-space: nowrap;
}
/* Opt-in per project (see data.js `pullQuoteNoWrap`) for quotes that must
   render as a single unbroken line on desktop. Reverts to normal wrapping
   on narrow/mobile widths so long quotes never force horizontal scroll. */
.pull-quote-text--nowrap {
  white-space: nowrap;
}
@media (max-width: 767px) {
  .pull-quote-text--nowrap {
    white-space: normal;
  }
}

.awards {
  max-width: 640px;
  margin: 0 auto;
  padding: 18px var(--space-4) 0;
  border-top: 1px solid var(--line);
  display: grid;
}
.award-group {
  display: grid;
  grid-template-columns: 190px 1fr;
  column-gap: var(--space-3);
  align-items: baseline;
  text-align: left;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.award-group:last-child { border-bottom: none; }
.award-group:first-child { padding-top: 0; }
.award-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0;
}
.award-entry {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.award-entry a { text-decoration: underline; text-underline-offset: 3px; }

.award-entries.multi .award-entry {
  position: relative;
  padding-left: 15px;
}
.award-entries.multi .award-entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-faint);
}

@media (max-width: 600px) {
  .award-group {
    grid-template-columns: 1fr;
    row-gap: 4px;
    padding: 22px 0;
  }
  .award-group:first-child { padding-top: 0; }
  .award-label { padding-top: 0; }
  .awards { padding-top: 22px; }
  .pull-quote { margin-bottom: 22px; }
  .poster-layout hr { margin-bottom: 22px; }
}

.extra-note {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  text-align: center;
  font-size: 15px;
  color: var(--ink-soft);
}
.extra-note a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- PRESS ---------------- */

.press-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 42px 0;
  padding: 1vmax 0 3.3vmax;
}
@media (max-width: 980px) { .press-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .press-grid { grid-template-columns: 1fr; } }

.press-item {
  text-align: center;
  /* stretched to the full height of its grid row (grid's default
     align-items: stretch); laid out as a column so the READ MORE
     button always lands on the same baseline as the rest of its row,
     no matter how many lines that row's longest headline wraps to. */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.press-item .outlet {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.press-item .outlet.serif { font-family: var(--font-main); font-weight: 500; }
.press-item .outlet img {
  max-height: 68px;
  max-width: 280px;
  width: auto;
  height: auto;
}
.press-item .headline {
  font-size: 16.2px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  max-width: 247px;
  margin: 0 auto 18px;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.press-item .headline em { font-style: italic; font-weight: inherit; }
.read-more {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-size: 14.4px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 1.2em 2.6em;
  transition: background .2s var(--ease);
}
.read-more:hover { background: var(--accent); }

/* ---------------- ABOUT ---------------- */

.about-layout {
  display: grid;
  grid-template-columns: minmax(260px, 400px) 1fr;
  gap: var(--space-6);
  padding: var(--space-3) 0 var(--space-7);
  align-items: start;
}
@media (max-width: 820px) {
  .about-layout { grid-template-columns: 1fr; gap: var(--space-4); }
}
.about-photo {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-3));
}
.about-photo img { width: 100%; filter: grayscale(1); }
.photo-credit {
  position: absolute;
  bottom: 12px;
  right: 12px;
  color: rgba(255,255,255,.85);
  font-size: 10px;
  letter-spacing: .04em;
}
.about-bio {
  font-family: 'Avenir Next', 'Century Gothic', Futura, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'DejaVu Sans Light', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink);
  max-width: 46em;
  margin: 0 0 var(--space-4);
}
.about-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-4);
  max-width: 560px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.about-col-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.about-col-content {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.about-col-content a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 820px) {
  .about-photo { position: static; }
}

/* ---------------- PHOTOGRAPHY ---------------- */

.photo-gallery {
  display: flex;
  gap: var(--gallery-gap);
  padding: var(--space-3) 0 var(--space-7);
}
@media (max-width: 560px) {
  .photo-gallery { padding-top: var(--space-2); }
}
.photo-gallery-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gallery-gap);
}
/* Mobile (2-column tier, <768px) uses a much tighter gutter to match
   Squarespace's mobile gallery — measured directly off a reference
   screenshot at ~3-4px, so 4px here is a faithful match rather than a guess.
   This rule is placed AFTER the base .photo-gallery / .photo-gallery-col
   rules above so it actually wins the cascade at matching widths (an earlier
   version of this override sat before the base .photo-gallery-col rule and
   was silently cancelled out by it — that's why the row spacing hadn't
   visibly changed). This is still a purely visual override — it
   intentionally does NOT change GALLERY_GAP_PX in js/app.js, so the
   column-balancing/assignment math (and therefore which photo lands in
   which column, in what order) stays exactly as already verified against
   reference screenshots. Only the rendered spacing shrinks. */
@media (max-width: 767px) {
  .photo-gallery, .photo-gallery-col { gap: 4px; }
}
.photo-gallery-item {
  cursor: pointer;
  overflow: hidden;
  background: var(--line);
}
.photo-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .5s var(--ease);
}
.photo-gallery-item:hover img {
  transform: scale(1.03);
}

.lightbox-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 300;
  background: rgba(255, 255, 255, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}
.lightbox-overlay.open { opacity: 1; pointer-events: auto; }
.lightbox-img-wrap { max-width: min(84vw, 1600px); max-height: min(86vh, 1150px); }
.lightbox-img-wrap img {
  display: block;
  max-width: min(84vw, 1600px);
  max-height: min(86vh, 1150px);
  width: auto;
  height: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  opacity: 1;
  transition: opacity .15s ease;
}
/* While a newly-selected photo is loading, hide the previous one instead
   of leaving it visible — prevents the old image flashing before the
   new one is ready. */
.lightbox-img-wrap img.is-loading { opacity: 0; }
.lightbox-close,
.lightbox-arrow {
  position: absolute;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
  padding: var(--space-1);
  opacity: .8;
  transition: opacity .2s var(--ease);
}
.lightbox-close:hover,
.lightbox-arrow:hover { opacity: 1; }
.lightbox-close {
  top: var(--space-3);
  right: var(--space-4);
  font-size: 32px;
  font-weight: 300;
}
.lightbox-arrow {
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
  font-weight: 300;
}
.lightbox-arrow.prev { left: var(--space-3); }
.lightbox-arrow.next { right: var(--space-3); }
@media (max-width: 600px) {
  .lightbox-arrow { font-size: 34px; }
  .lightbox-close { top: var(--space-2); right: var(--space-2); font-size: 26px; }
  .lightbox-arrow.prev { left: var(--space-1); }
  .lightbox-arrow.next { right: var(--space-1); }
}

/* ---------------- VIDEO LIGHTBOX ----------------
   Tapping a video's poster opens the embed here instead of playing it
   inline in the small project-page frame. Vimeo's own control bar (play,
   captions, settings, fullscreen, etc.) needs real horizontal room to lay
   itself out — the inline frame on mobile was only as wide as the text
   column, which wasn't enough room for every control to render, and was
   especially bad for vertically-shot videos, which rendered pillarboxed
   down to a sliver. This overlay gives Vimeo a generously large box in
   both dimensions regardless of the video's own orientation, and requests
   the browser's native fullscreen where that's supported. */
.video-lightbox-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 400;
  background: rgba(8, 8, 8, .96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}
.video-lightbox-overlay.open { opacity: 1; pointer-events: auto; }
.video-lightbox-frame {
  position: relative;
  width: min(95vw, 1280px);
  height: min(85vh, 720px);
  background: #000;
  box-shadow: 0 20px 70px rgba(0,0,0,.6);
}
/* Shot-vertically projects (e.g. the John Legend piece): match the frame to
   the video's own 9:16 shape instead of a 16:9 box, so it fills edge-to-edge
   with no black bars on the sides. Same specificity as the base rule above,
   so source order decides — this must stay ABOVE the phone-landscape rule
   further down, which intentionally overrides back to full-bleed regardless
   of footage orientation once the phone is rotated. */
.video-lightbox-frame--vertical {
  /* The frame has no in-flow content (the iframe inside is positioned
     absolutely), so it has no intrinsic size of its own — width/height
     both "auto" would collapse to 0. Instead derive a single definite
     width from whichever viewport dimension is tighter, then let height
     follow it via aspect-ratio. */
  aspect-ratio: 9 / 16;
  width: min(95vw, calc(90vh * 9 / 16), 506px);
  height: auto;
}
.video-lightbox-frame iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-lightbox-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  z-index: 1;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  font-size: 32px;
  font-weight: 300;
  padding: var(--space-1);
  opacity: .8;
  transition: opacity .2s var(--ease);
}
.video-lightbox-close:hover { opacity: 1; }
@media (max-width: 600px) {
  .video-lightbox-close { top: var(--space-2); right: var(--space-2); font-size: 26px; }
}
/* Phone rotated to landscape while a video is open: let the frame go fully
   edge-to-edge instead of staying a centered box. Scoped by max-height
   (phones in landscape are short, ~350-430px) rather than max-width, so a
   landscape phone gets true fullscreen here while a landscape iPad or a
   desktop window — both much taller than a phone in landscape — keep the
   normal centered player instead of ballooning to fill the whole screen. */
@media (orientation: landscape) and (max-height: 500px) {
  .video-lightbox-frame { width: 100vw; height: 100vh; }
}
/* Phone in portrait, VERTICAL video only: same idea as the landscape rule
   above — go fully edge-to-edge instead of leaving a margin around a
   smaller centered box, since a 9:16 video already closely matches a
   portrait phone's own shape, so filling the screen leaves little to no
   letterboxing inside the video itself.
   This is intentionally NOT applied to standard (horizontal) video: a wide
   16:9 video stretched to fill a tall phone screen has to be letterboxed
   heavily to avoid distortion, and since that letterboxing happens inside
   Vimeo's own iframe, it doesn't respond to taps the way our own frame's
   backdrop margin did — trading a merely-inert margin for much thicker,
   equally inert bars. Standard video keeps its normal centered sizing here;
   rotating to landscape is what actually fills the screen well for it. */
@media (max-width: 600px) {
  .video-lightbox-frame--vertical { width: 100vw; height: 100vh; }
}

.coming-soon {
  padding: var(--space-7) var(--space-4);
  text-align: center;
}
.coming-soon h1 {
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.coming-soon p { color: var(--ink-soft); font-size: 15.5px; }

/* ---------------- UTIL ---------------- */

.fade-in { animation: fadeIn .45s var(--ease) both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}