/* Scotia Entertainment
   Layout: every page is a single full-bleed still. A fixed slate rail (logo + nav)
   holds the top-left corner; the active page carries a red tally light, the
   on-air lamp of a camera. Copy sits in the open part of each frame. */
:root {
  --fog: #eef0f1;          /* the homepage still's sky */
  --ink: #202122;          /* type on fog */
  --night: #0e0f10;        /* ground behind dark stills */
  --paper: #f4f5f5;        /* type on dark stills */
  --paper-dim: rgba(244, 245, 245, 0.72);
  --tally: #e11d14;        /* the red tally light */
  --rule: rgba(244, 245, 245, 0.28);

  --display: "Gambetta", "Newsreader", Georgia, "Times New Roman", serif;
  --ui: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 2.1vw, 40px);
  --rail-top: clamp(16px, 2.1vw, 36px);
  --logo-w: clamp(128px, 12.5vw, 236px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tally); outline-offset: 4px; border-radius: 2px; }

/* Page grounds — each page commits to one look */
.page--light { background: var(--fog); color: var(--ink); }
.page--dark  { background: var(--night); color: var(--paper); color-scheme: dark; }

/* ---------- Full-bleed still ---------- */
.still {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--night);
}
.page--light .still { background: var(--fog); }
.still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: develop 1.6s var(--ease) both;
}
.still::after {             /* scrim, set per page */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* film grain over the dark stills */
.page--dark .still::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
.still.is-missing img { visibility: hidden; }
.still.is-missing {
  background:
    radial-gradient(120% 90% at 70% 20%, #2a2c2f 0%, var(--night) 70%);
}

@keyframes develop { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: none; } }
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- Slate rail ---------- */
.rail {
  position: fixed;
  z-index: 20;
  top: calc(var(--rail-top) + env(safe-area-inset-top, 0px));
  left: max(var(--gutter), env(safe-area-inset-left, 0px));
  display: grid;
  gap: clamp(28px, 3vw, 44px);
}
.logo { display: block; width: var(--logo-w); line-height: 0; text-decoration: none; }
.logo svg { width: 100%; height: auto; display: block; }
.nav { display: grid; gap: 14px; margin: 0; padding: 0 0 0 4px; list-style: none; }
.menu-toggle { display: none; }
.nav a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  transition: transform .35s var(--ease), opacity .2s;
}
@media (hover: hover) { .nav a:hover { transform: translateX(4px); } }
.nav a[aria-current="page"] { font-weight: 700; padding-left: 15px; }
.nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--tally);
  box-shadow: 0 0 0 0 rgba(225, 29, 20, .45);
  animation: tally 2.8s ease-in-out infinite;
}
@keyframes tally {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(225, 29, 20, .0); }
  50% { opacity: .55; box-shadow: 0 0 10px 2px rgba(225, 29, 20, .35); }
}

/* ---------- Caption (credit for a still) ---------- */
.credit {
  position: fixed;
  z-index: 20;
  top: calc(var(--rail-top) + env(safe-area-inset-top, 0px));
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(15px, 1.33vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* ---------- Footer ---------- */
.foot {
  position: fixed;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) calc(clamp(16px, 2vw, 28px) + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
  font-size: 12px;
  line-height: 1.2;
  pointer-events: none;
}
.foot > * { pointer-events: auto; margin: 0; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__cities { letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }

/* ---------- Shared type ---------- */
.display {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.display em { font-style: italic; }
.lede { margin: 0; max-width: 34em; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.65; color: var(--paper-dim); text-wrap: pretty; }
.eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.reveal { animation: rise 1.1s var(--ease) both; animation-delay: var(--d, .35s); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* =========================================================
   HOME
   ========================================================= */
.home .still img { object-position: 30% 100%; }
.home__line {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: clamp(150px, 20.5vh, 240px);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.home__line .display {
  font-size: clamp(44px, 5.56vw, 108px);
  line-height: 1.12;
  text-align: right;
  white-space: nowrap;
}
.home__line .stories {
  position: relative;
  display: inline-block;
  font-style: italic;
  font-size: 1.04em;   /* Gambetta's italic is narrower and lighter; this evens it with the roman */
}
/* the underline is drawn, like a pen stroke under the one word that matters */
.home__line .stories::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.02em;
  height: max(2px, 0.04em);
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(1);
  animation: draw 1s var(--ease) 1.1s both;
}
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =========================================================
   ABOUT
   ========================================================= */
.about .still img { object-position: 40% 60%; }
.about .still::after {
  background:
    linear-gradient(90deg, rgba(14,15,16,.55) 0%, rgba(14,15,16,0) 30%),
    linear-gradient(180deg, rgba(14,15,16,.62) 0%, rgba(14,15,16,.25) 45%, rgba(14,15,16,0) 70%);
}
.about__copy {
  position: relative;
  z-index: 10;
  display: grid;
  gap: 22px;
  width: min(36rem, 100%);
  margin-left: auto;
  margin-right: clamp(0px, 18vw, 360px);
  padding-top: calc(var(--rail-top) + 4px);
  padding-bottom: 120px;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.about__copy .display { font-size: clamp(40px, 4.2vw, 76px); line-height: 1.02; }
.about__copy h2 { margin: 6px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(20px, 1.6vw, 26px); letter-spacing: -0.01em; }
.about__copy .lede { color: rgba(244,245,245,.82); }
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 10px 0 0;
  border-top: 1px solid var(--rule);
}
.facts div { padding: 14px 0 0; }
.facts div + div { padding-left: 20px; border-left: 1px solid var(--rule); }
.facts dt { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); }
.facts dd { margin: 4px 0 0; font-family: var(--display); font-size: clamp(18px, 1.4vw, 22px); letter-spacing: -0.01em; }

/* =========================================================
   OUR WORK
   ========================================================= */
.work .still { right: auto; width: 46vw; }
.work .still img { object-position: 30% 50%; }
.work .still::after { background: linear-gradient(90deg, rgba(14,15,16,0) 55%, var(--night) 100%); }
.work__main {
  position: relative;
  z-index: 10;
  margin-left: 46vw;
  padding: calc(var(--rail-top) + 4px) max(var(--gutter), env(safe-area-inset-right, 0px)) 140px clamp(24px, 5vw, 96px);
  display: grid;
  gap: clamp(48px, 6vw, 96px);
  max-width: 1100px;
}
.work__intro { display: grid; gap: 20px; }
.work__intro .display { font-size: clamp(44px, 4.6vw, 84px); line-height: 1; }
.films { display: grid; gap: clamp(48px, 5vw, 80px); margin: 0; padding: 0; list-style: none; counter-reset: film; }
.film { counter-increment: film; }
.film__link { display: grid; gap: 16px; text-decoration: none; color: inherit; }
.film__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  overflow: hidden;
  background: #1b1c1e;
}
.film__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), filter .6s;
  filter: saturate(.92);
}
.film__frame.is-missing img { visibility: hidden; }
.film__frame.is-missing::after {
  content: "Still pending";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
/* aspect guides, like a monitor's frame lines */
.film__frame::before {
  content: "";
  position: absolute;
  inset: 10% 5.5%;
  z-index: 1;
  border: 1px solid rgba(244,245,245,0);
  transition: border-color .5s;
  pointer-events: none;
}
@media (hover: hover) {
  .film__link:hover .film__frame img { transform: scale(1.03); filter: saturate(1.05); }
  .film__link:hover .film__frame::before { border-color: rgba(244,245,245,.32); }
  .film__link:hover .film__title { transform: translateX(6px); font-style: italic; }
}
.film__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 2.3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  transition: transform .5s var(--ease);
}
.film__title span { font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); white-space: nowrap; }
.work .foot { left: 46vw; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact .still img { object-position: 50% 70%; }
.contact .still::after {
  background:
    linear-gradient(180deg, rgba(14,15,16,.58) 0%, rgba(14,15,16,.30) 50%, rgba(14,15,16,.12) 100%),
    linear-gradient(90deg, rgba(14,15,16,0) 30%, rgba(14,15,16,.62) 52%, rgba(14,15,16,.62) 82%, rgba(14,15,16,.3) 100%);
}
.contact__copy {
  position: relative;
  z-index: 10;
  display: grid;
  gap: 22px;
  width: min(34rem, 100%);
  margin-left: auto;
  margin-right: clamp(0px, 13vw, 260px);
  padding-top: calc(var(--rail-top) + 4px);
  padding-bottom: 120px;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.contact__copy .display { font-size: clamp(44px, 4.6vw, 84px); line-height: 1; }
.contact__copy .lede { color: rgba(244,245,245,.84); }
.mail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.mail a { font-family: var(--display); font-size: clamp(20px, 1.7vw, 28px); letter-spacing: -0.01em; text-decoration: none; overflow-wrap: anywhere; }
.mail a:hover { font-style: italic; }
.mail button {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--paper-dim);
  font: 700 11px/1 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.mail button:hover { color: var(--paper); }

.form { display: grid; gap: 18px; margin-top: 4px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); }
.field input, .field textarea {
  width: 100%;
  padding: 8px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  font: 500 17px/1.4 var(--ui);
  letter-spacing: -0.01em;
  transition: border-color .25s;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(244,245,245,.42); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--paper); }
.submit {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--paper);
  border-radius: 999px;
  background: var(--paper);
  color: var(--night);
  font: 700 14px/1 var(--ui);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.submit:hover { background: transparent; color: var(--paper); }
.form__note { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--paper-dim); }

/* =========================================================
   FILM PAGES
   One page per film: a letterboxed still, a slate of facts,
   the credits as they'd roll, and the next film queued up.
   ========================================================= */
.reel { background: var(--night); }
.reel .rail { position: absolute; }
.reel .foot { position: relative; }
.screen {
  position: relative;
  height: min(86vh, 44vw + 120px);
  min-height: 420px;
  overflow: hidden;
  background: #000;
}
.screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: develop 1.6s var(--ease) both;
}
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14,15,16,.55) 0%, rgba(14,15,16,0) 28%),
    linear-gradient(0deg, var(--night) 0%, rgba(14,15,16,0) 38%);
  pointer-events: none;
}
.screen.is-missing img { visibility: hidden; }
.screen.is-missing { background: radial-gradient(120% 90% at 70% 20%, #2a2c2f 0%, var(--night) 70%); }

.reel__body {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 120px);
  margin-top: clamp(-180px, -12vw, -64px);
  padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) clamp(64px, 8vw, 120px) max(var(--gutter), env(safe-area-inset-left, 0px));
  max-width: 1600px;
}
.reel__head { display: grid; gap: 20px; align-content: start; min-width: 0; }
.reel__back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper-dim);
}
.reel__back::before { content: "\2190"; font-size: 14px; letter-spacing: 0; }
.reel__back:hover { color: var(--paper); }
.reel__title { font-size: clamp(52px, 8vw, 148px); line-height: .92; }
.reel__log { margin: 6px 0 0; max-width: 30em; font-family: var(--display); font-size: clamp(20px, 1.8vw, 28px); line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty; }
.reel__note { margin: 0; max-width: 34em; color: var(--paper-dim); }
.reel__note a { color: var(--paper); text-underline-offset: 3px; }

.slate {
  align-self: end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--rule);
  min-width: 0;
}
.slate div { padding: 14px 0 14px; border-bottom: 1px solid var(--rule); }
.slate div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--rule); }
.slate dt { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); }
.slate dd { margin: 6px 0 0; font-family: var(--display); font-size: clamp(20px, 1.6vw, 26px); line-height: 1.15; font-variant-numeric: tabular-nums; }

.roll {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 36px clamp(24px, 4vw, 64px);
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--rule);
}
.roll h2 { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); }
.roll ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.roll li { display: grid; gap: 0; }
.roll .who { font-family: var(--display); font-size: clamp(19px, 1.45vw, 23px); line-height: 1.2; letter-spacing: -0.01em; }
.roll .as { font-size: 13px; color: var(--paper-dim); }
.roll .who.is-scotia::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: .3em; border-radius: 50%; background: var(--tally); }
.laurels { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.laurels li { display: grid; gap: 2px; }
.laurels strong { font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.45vw, 23px); line-height: 1.2; letter-spacing: -0.01em; }
.laurels span { font-size: 13px; color: var(--paper-dim); }

.next {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  margin: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) clamp(96px, 9vw, 140px) max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
}
.next__label { display: grid; gap: 10px; min-width: 0; }
.next__label span { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); }
.next__label strong { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 5vw, 88px); line-height: .95; letter-spacing: -0.02em; transition: transform .5s var(--ease); }
.next .film__frame { aspect-ratio: 2.39 / 1; }
@media (hover: hover) {
  .next:hover .next__label strong { transform: translateX(8px); font-style: italic; }
  .next:hover .film__frame img { transform: scale(1.03); }
}

/* =========================================================
   Phones and small tablets
   On a phone the still becomes the top of the page instead of
   its wallpaper, so the photograph stays visible and the copy
   gets a solid ground to sit on.
   ========================================================= */
@media (max-width: 860px) {
  :root { --gutter: 20px; --rail-top: 18px; --logo-w: 132px; }
  body { position: relative; }

  /* Top bar: logo left, Menu right. The links open as a full-screen sheet. */
  .rail {
    position: absolute;
    right: max(var(--gutter), env(safe-area-inset-right, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .menu-toggle {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-right: -10px;
    padding: 0 10px;
    border: 0;
    background: none;
    color: inherit;
    font: 700 13px/1 var(--ui);
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .menu-toggle::before {
    content: "";
    width: 18px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transition: transform .3s var(--ease), height .3s var(--ease);
  }
  .menu-toggle__close { display: none; }
  .menu-open .menu-toggle__open { display: none; }
  .menu-open .menu-toggle__close { display: inline; }
  .menu-open .menu-toggle::before { height: 0; border-bottom: 0; transform: rotate(0); }
  .rail .logo { position: relative; z-index: 2; }

  #site-nav {
    position: fixed;
    z-index: 1;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 120px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(48px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
    background: var(--night);
    visibility: hidden;
    opacity: 0;
    transition: opacity .35s var(--ease), visibility 0s linear .35s;
  }
  .page--light #site-nav { background: var(--fog); }
  .menu-open #site-nav { visibility: visible; opacity: 1; transition: opacity .35s var(--ease); }
  .menu-open { overflow: hidden; }
  .menu-open .rail { position: fixed; top: calc(var(--rail-top) + env(safe-area-inset-top, 0px)); }
  .nav { display: grid; gap: 4px; padding: 0; }
  .nav li { overflow: hidden; }
  .nav a {
    display: inline-flex;
    align-items: center;
    min-height: 56px;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(44px, 13vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    transform: translateY(100%);
    transition: transform .6s var(--ease);
  }
  .menu-open .nav a { transform: none; }
  .menu-open .nav li:nth-child(2) a { transition-delay: .05s; }
  .menu-open .nav li:nth-child(3) a { transition-delay: .1s; }
  .menu-open .nav li:nth-child(4) a { transition-delay: .15s; }
  .nav a[aria-current="page"] { font-weight: 400; font-style: italic; padding-left: 26px; }
  .nav a[aria-current="page"]::before { width: 12px; height: 12px; margin-top: -4px; }

  /* the menu sheet sits above everything else on the page, footer and credit included */
  .rail { z-index: 30; }
  .menu-open .foot { visibility: hidden; }

  /* the film credit joins the footer's bottom-right corner, its last line
     sharing a baseline with the cities on the left */
  .home .foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 16px;
    align-items: last baseline;
  }
  .home .foot > p { grid-column: 1; }
  .home .foot > .credit {
    position: static;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: last baseline;
    max-width: 9.5em;
    font-size: 15px;
    line-height: 1.2;
    text-align: right;
    text-wrap: balance;
    color: var(--ink);
  }
  .home .still img { object-position: 50% 100%; }
  .foot { position: relative; padding-top: 32px; }

  /* the phone keeps a static, lighter grain */
  .page--dark .still::before { animation: none; opacity: .1; }

  /* Home stays a single full-screen frame */
  .home { min-height: 100svh; }
  .home .foot { position: absolute; }
  .home .foot > p:not(.credit) { color: var(--paper); }
  .home__line { padding-top: 168px; justify-content: flex-start; min-height: 100svh; }
  .home__line .display { text-align: left; white-space: normal; font-size: clamp(42px, 12vw, 64px); line-height: 1.08; }

  /* About, Contact, Our Work: photo on top, copy below */
  .about .still, .contact .still, .work .still {
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    height: 62svh;
    min-height: 380px;
  }
  .about .still::after, .contact .still::after, .work .still::after {
    background:
      linear-gradient(180deg, rgba(14,15,16,.55) 0%, rgba(14,15,16,0) 30%),
      linear-gradient(0deg, var(--night) 0%, rgba(14,15,16,.4) 30%, rgba(14,15,16,0) 60%);
  }
  .about .still img { object-position: 52% 70%; }
  .work .still img { object-position: 42% 40%; }
  .contact .still img { object-position: 50% 80%; }

  .about__copy, .contact__copy {
    margin: 0;
    width: 100%;
    padding-top: max(300px, calc(62svh - 150px));
    padding-bottom: 24px;
  }
  .about__copy .display, .contact__copy .display, .work__intro .display { font-size: clamp(44px, 12vw, 60px); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); margin-top: 14px; }

  .work__main { margin-left: 0; gap: 56px; padding: max(300px, calc(62svh - 150px)) max(var(--gutter), env(safe-area-inset-right, 0px)) 24px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .work .foot { left: 0; }
  .films { gap: 44px; }
  .film__title { font-size: 28px; }

  .mail { padding: 10px 0; }
  .mail button { min-height: 44px; padding: 0 4px; }
  .submit { width: 100%; justify-content: center; min-height: 52px; }

  /* Film pages */
  .screen { height: 70svh; min-height: 420px; }
  .reel__body { grid-template-columns: minmax(0, 1fr); margin-top: -96px; gap: 36px; }
  .reel__title { font-size: clamp(48px, 14vw, 84px); }
  .slate div:nth-child(even) { padding-left: 16px; }
  .next { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 40px; }
  .next .film__frame { order: -1; }
}


/* =========================================================
   Phone screen edges
   A solid strip and a soft fade at the top and bottom of the
   screen, in each page's edge color, under the header and footer.
   ========================================================= */
.page--dark  { --edge-top-background: var(--night); --edge-bottom-background: var(--night); }
.home        { --edge-top-background: #f2f4f3;      --edge-bottom-background: #586363; }

@media (max-width: 860px) {
  .edge-top::after, .edge-bottom::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    pointer-events: none;
  }
  .edge-top::after, .edge-bottom::after {
    height: 12px;
    z-index: 10;
  }
  .edge-top::after {
    top: -7px;
    background: var(--edge-top-background);
  }
  .edge-bottom::after {
    bottom: -7px;
    background: var(--edge-bottom-background);
  }

  .edge-top::before, .edge-bottom::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    height: 48px;
    z-index: 10;
    pointer-events: none;
  }
  .edge-top::before {
    top: 5px;
    background: linear-gradient(to bottom,
      var(--edge-top-background), transparent);
  }
  .edge-bottom::before {
    bottom: 5px;
    background: linear-gradient(to top,
      var(--edge-bottom-background), transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Home: the copyright sits over dark rock, the cities over fog */
.home .foot > p:first-child { color: var(--paper); }

/* =========================================================
   ABOUT · studio ident, inset under the facts
   ========================================================= */
.ident { display: grid; gap: 10px; margin: 10px 0 0; }
.ident__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px var(--rule), 0 24px 60px rgba(0, 0, 0, .45);
}
.ident video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ident__play {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(14, 15, 16, .72);
  color: var(--paper);
  font: 700 11px/1 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ident__play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}
.ident__play:hover { background: rgba(14, 15, 16, .9); }
.ident__play[hidden] { display: none; }
.ident figcaption {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(244, 245, 245, .86);
  text-shadow: 0 1px 8px rgba(14, 15, 16, .8);
  font-variant-numeric: tabular-nums;
}