/* Advantage Digital — version 1
   Two colours. Three typefaces. One rule. */

:root {
  --black: #0B0B0B;
  --white: #F5F1EA;
  --charcoal: #1C1C1C;
  --stone: #8A857D;

  --serif: "Bodoni Moda", "Bodoni 72", Didot, "Bodoni MT", serif;
  --accent: "Cormorant Garamond", Garamond, "Hoefler Text", "Times New Roman", serif;
  --sans: Montserrat, "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.5rem, 5.5vw, 5rem);
  --ease: cubic-bezier(.2, .6, .2, 1);
}

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

html {
  background: var(--black);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--charcoal) var(--black);
}

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--black);
  color: var(--white);
  font: 300 1rem/1.75 var(--sans);
  letter-spacing: .012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Paper grain. It belongs to the page, so it scrolls with it. */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/img/grain.png") 0 0 / 256px 256px;
  pointer-events: none;
}

main { flex: 1 0 auto; }

::selection { background: var(--white); color: var(--black); }

a { color: inherit; }

:focus-visible {
  outline: 1px solid var(--white);
  outline-offset: 5px;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ── Type ─────────────────────────────────────────────── */

.label {
  margin: 0;
  font: 300 .75rem/1 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--stone);
}

.display {
  margin: 0;
  max-width: 13ch;
  font: 400 clamp(2.5rem, 6.4vw, 5.5rem)/1.04 var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.accent {
  margin: 0;
  font: italic 400 clamp(1.45rem, 2.5vw, 2rem)/1.3 var(--accent);
  letter-spacing: .005em;
  text-wrap: balance;
}

.link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .4em;
  transition: text-underline-offset .5s var(--ease);
}
.link:hover { text-underline-offset: .6em; }

/* The rule from the card. The only ornament. */
.rule {
  width: 6rem;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--white);
}
@media (min-resolution: 2dppx) { .rule { height: .5px; } }


/* ── Monogram ─────────────────────────────────────────── */

.mono {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 84 / 55.58;
  fill: var(--white);
  overflow: visible;
}
.mono--emboss { fill: var(--black); filter: url("#emboss"); }


/* ── Button ───────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 1.3em 2.5em 1.25em calc(2.5em + .34em);
  border: 1px solid var(--white);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font: 300 .75rem/1 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
.btn:hover,
.btn:focus-visible { background: var(--white); color: var(--black); }
.btn[disabled] { cursor: default; }


/* ── Header ───────────────────────────────────────────── */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.25rem, 3vw, 2.25rem) var(--gutter);
}
.top__mark { display: block; width: 2.75rem; padding: .25rem 0; }

.nav { display: flex; gap: clamp(1.5rem, 3.5vw, 3rem); }
.nav a {
  position: relative;
  padding: 1em 0;
  font: 300 .75rem/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: .3em;
  bottom: .35em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .7s var(--ease);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }


/* ── Footer ───────────────────────────────────────────── */

.foot { padding: 0 var(--gutter) clamp(1.5rem, 3vw, 2.25rem); }
.foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2.5rem;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--charcoal);
}
.foot__name { margin: 0; }


/* ── Home ─────────────────────────────────────────────── */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  text-align: center;
}
.hero__inner { display: flex; flex-direction: column; align-items: center; }
.hero__mark { width: clamp(7.25rem, 14vw, 11.5rem); }

.wordmark {
  margin: clamp(2.25rem, 4.6vw, 3.5rem) -.22em 0 0;
  font: 400 clamp(1.06rem, 5.6vw, 3.3rem)/1 var(--serif);
  font-optical-sizing: auto;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tagline {
  margin: clamp(1.15rem, 2vw, 1.75rem) -.3em 0 0;
  font: 300 clamp(.56rem, 2.45vw, .7rem)/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 44em) {
  .tagline { margin-right: -.44em; font-size: clamp(.7rem, 1vw, .8rem); letter-spacing: .44em; }
}

.screening {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 4rem) var(--gutter);
}

.next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 4vw, 2.75rem);
  padding: clamp(4rem, 12vh, 8rem) var(--gutter) clamp(7rem, 20vh, 12rem);
  text-align: center;
}


/* ── The film ─────────────────────────────────────────── */

.film {
  --ratio: 1.7778;
  width: min(100%, 80rem, calc((100vh - 9rem) * var(--ratio)));
  width: min(100%, 80rem, calc((100svh - 9rem) * var(--ratio)));
  margin: 0 auto;
}
.film__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--black);
  outline: 1px solid var(--charcoal);
  overflow: hidden;
}
.film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--black);
}

.film__plate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
}
.film__plate .mono { width: clamp(4.5rem, 13%, 9rem); }

.film__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: rgba(11, 11, 11, .5);
  color: var(--white);
  cursor: pointer;
  transition: opacity .8s var(--ease);
}
.film__play:focus-visible { outline-offset: -8px; }
.film__play-text {
  position: relative;
  padding-bottom: .5em;
  font: italic 400 clamp(1.5rem, 3.2vw, 2.5rem)/1.2 var(--accent);
  text-shadow: 0 0 1.5em var(--black), 0 0 .5em var(--black);
}
.film__play-text::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--white);
  transform: translateX(-50%) scaleX(.36);
  transition: transform .9s var(--ease);
}
.film__play:hover .film__play-text::after,
.film__play:focus-visible .film__play-text::after { transform: translateX(-50%) scaleX(1); }

.film.is-playing .film__play { opacity: 0; pointer-events: none; }
.film__note { margin: 1.25rem 0 0; text-align: center; }


/* ── Inner pages ──────────────────────────────────────── */

.page { padding: 0 var(--gutter); }

.lede { padding: clamp(4rem, 13vh, 8.5rem) 0 clamp(4rem, 11vh, 7.5rem); }
.lede .label { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.lede .rule { margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 2.6vw, 2rem); }

/* Services */
.change {
  display: grid;
  gap: 1.25rem;
  padding: clamp(2.25rem, 6vw, 4.75rem) 0;
  border-top: 1px solid var(--charcoal);
}
.change h2 {
  margin: 0;
  max-width: 15ch;
  font: 400 clamp(1.75rem, 3.9vw, 3.4rem)/1.1 var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -.008em;
  text-wrap: balance;
}
.change p { margin: 0; max-width: 31ch; font-size: clamp(1rem, 1.2vw, 1.125rem); }

@media (min-width: 56em) {
  .change { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 8.33%; align-items: end; }
  .change p { padding-bottom: .5em; }
}

.close {
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 3.25rem);
  padding: clamp(4rem, 11vw, 8.5rem) 0 clamp(5rem, 13vw, 10rem);
  border-top: 1px solid var(--charcoal);
}
.close .accent { max-width: 24ch; font-size: clamp(1.7rem, 3.5vw, 2.9rem); line-height: 1.18; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.75rem; }
.actions .link {
  font: 300 .75rem/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
}

@media (min-width: 56em) {
  .close { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 8.33%; align-items: end; }
  .close .actions { padding-bottom: .6em; }
}

/* Contact */
.contact { display: grid; gap: clamp(1rem, 4vw, 2rem); padding-bottom: clamp(5rem, 13vw, 10rem); }
.contact .lede { padding-bottom: 0; }
.lede__note { margin: 0; }
.lede__direct { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; overflow-wrap: anywhere; }

.form { padding-top: clamp(3rem, 7vw, 4rem); }
.field { margin: 0 0 clamp(2rem, 4.5vw, 3rem); }
.field label {
  display: block;
  font: 300 .75rem/1 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--stone);
}
.field input {
  display: block;
  width: 100%;
  margin: 0;
  padding: .75rem 0 .85rem;
  border: 0;
  border-bottom: 1px solid var(--stone);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  caret-color: var(--white);
  font: 400 clamp(1.3rem, 2.3vw, 1.7rem)/1.25 var(--serif);
  font-optical-sizing: auto;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.field input:focus {
  outline: 0;
  border-bottom-color: var(--white);
  box-shadow: 0 1px 0 var(--white);
}
.field input:-webkit-autofill,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--white);
  box-shadow: 0 0 0 100px var(--black) inset;
  transition: background-color 9999s;
}
.field input:-webkit-autofill:focus { box-shadow: 0 0 0 100px var(--black) inset, 0 1px 0 var(--white); }
.field__error { margin: 0; font-size: .875rem; line-height: 1.5; }
.field__error:not(:empty) { margin-top: .7rem; }

.trap { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.5rem; padding-top: .5rem; }
.form__status { margin: 0; max-width: 30ch; font-size: .9375rem; line-height: 1.6; overflow-wrap: anywhere; }

.sent { padding-top: clamp(3rem, 7vw, 4rem); outline: 0; }
.sent .display { font-size: clamp(2.5rem, 5vw, 4.25rem); }
.sent .rule { margin: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(1.25rem, 2.4vw, 1.75rem); }
.sent p:last-child { margin: 0; }
.sent:target { display: block; }
.sent:target ~ .form { display: none; }

@media (min-width: 56em) {
  .contact { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 8.33%; align-items: start; }
  .form, .sent { padding-top: calc(clamp(4rem, 13vh, 8.5rem) + .75rem + clamp(1.75rem, 3.5vw, 2.75rem)); }
}

/* Watch */
.watch main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vh, 3.25rem);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter);
}
.watch .film { width: min(100%, 80rem, calc((100vh - 13rem) * var(--ratio))); width: min(100%, 80rem, calc((100svh - 13rem) * var(--ratio))); }

/* On a phone the film runs edge to edge. */
@media (max-width: 43.99em) {
  .screening { padding-left: 0; padding-right: 0; }
  .watch main { padding-left: 0; padding-right: 0; }
  .film__frame { outline: 0; }
}

/* Not found */
.lost main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  padding: var(--gutter);
  text-align: center;
}
.lost .hero__mark { width: 6.5rem; }


/* ── Motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .js [data-reveal] {
    opacity: 0;
    transform: translateY(.9rem);
    transition: opacity 1.1s var(--ease), transform 1.5s var(--ease);
    transition-delay: var(--d, 0s);
  }
  [data-d="1"] { --d: .15s; }
  [data-d="2"] { --d: .3s; }
  [data-d="3"] { --d: .45s; }
  [data-d="4"] { --d: .6s; }
  [data-d="6"] { --d: .95s; }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  .js [data-intro] { opacity: 0; }
  .js.is-ready [data-intro] { animation: arrive 2.2s var(--ease) var(--d, 0s) both; }
  @keyframes arrive {
    from { opacity: 0; transform: translateY(.6rem); }
    to   { opacity: 1; transform: none; }
  }
}

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

@media print {
  body { background: #fff; color: #000; }
  body::before, .film, .top, .foot { display: none; }
}