/* ==========================================================================
   Glance Film — v3
   White page, black type. Arial Black for anything that acts as a heading,
   Helvetica Light for body. Every section is one screen and snaps.
   ========================================================================== */

:root {
  --ink: #000000;
  --mute: #ADADAD;
  --page: #FFFFFF;

  --black: "Archivo Black", "Arial Black", Arial, sans-serif;
  --light: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --edge: 1.375rem;
  --stage: min(63.25rem, (100svh - 10.25rem) * 1.5);
  --rail: clamp(5rem, 10vw, 12rem);
  --gap: clamp(1.5rem, 4.5vw, 6.5rem);

  --chrome: 5.25rem;     /* space the fixed nav occupies */
  --footer: 4.5rem;      /* space the fixed icons occupy */
}

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

html, body { height: 100%; overflow: hidden; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--light);
  font-weight: 300;
  font-size: clamp(1rem, 0.9rem + 0.28vw, 1.1875rem);
  line-height: 1.42;
  -webkit-font-smoothing: antialiased;
}

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

/* --------------------------------------------------------------------------
   The scroller. Each section is a screen and snaps into place.
   -------------------------------------------------------------------------- */

.deck {
  height: 100svh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
}

.screen:last-child { min-height: 100svh; }

.screen {
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  align-content: center;
  padding: var(--chrome) var(--edge) var(--footer);
}

/* --------------------------------------------------------------------------
   Fixed chrome
   -------------------------------------------------------------------------- */

.chrome {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  padding: var(--edge) var(--edge) 0;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--stage)) var(--rail);
  column-gap: var(--gap);
  justify-content: center;
  align-items: start;
  pointer-events: none;
}

.chrome > * { pointer-events: auto; }

.chrome__mark { grid-column: 1; display: none; }   /* desktop uses the in-section stamp */

.nav {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--black);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.nav a {
  color: var(--mute);
  text-decoration: none;
  transition: color 150ms ease;
}

.nav a:hover,
.nav a:focus-visible,
.nav a.is-here { color: var(--ink); }

/* icons: pinned to the bottom corners on desktop, in the header on mobile */

.icons { display: flex; gap: 1rem; align-items: center; }

.icons a { display: block; color: var(--ink); transition: color 150ms ease; }
.icons a:hover, .icons a:focus-visible { color: var(--mute); }

.icons svg {
  display: block;
  width: 1.4rem;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.icons svg .fill { fill: currentColor; stroke: none; }

.icons--head { display: none; }

.icons--foot {
  position: fixed;
  bottom: var(--edge);
  left: var(--edge);
  right: var(--edge);
  z-index: 30;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   Stage
   -------------------------------------------------------------------------- */

.stage {
  width: 100%;
  max-width: calc(var(--stage) + (var(--rail) + var(--gap)) * 2);
  margin: 0 auto;
}

.stage--home {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--stage)) var(--rail);
  column-gap: var(--gap);
  align-items: stretch;
}

.side { display: flex; flex-direction: column; }
.side--start { grid-column: 1; justify-content: flex-start; }
.side--end   { grid-column: 3; justify-content: flex-end; text-align: right; }
.plate       { grid-column: 2; display: flex; align-items: center; }

.stamp { display: block; }
.stamp--home img { width: clamp(3.25rem, 6.4vw, 5.85rem); height: auto; }
.stamp--home { transition: opacity 160ms ease; }
.stamp--home:hover, .stamp--home:focus-visible { opacity: 0.55; }

/* Locked blocks: the line breaks are fixed in the markup and the type scales
   with the viewport, so the shape never reflows. */

.tagline br.m { display: none; }

.tagline {
  margin: 1.4rem 0 0;
  font-size: clamp(0.6875rem, 1.31vw, 1.1875rem);
  line-height: 1.42;
}

.lockup {
  margin: 0;
  font-size: clamp(0.6875rem, 1.31vw, 1.1875rem);
  line-height: 1.42;
}

.lockup__name {
  font-family: var(--black);
  font-weight: 400;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.wall { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.stage--about {
  max-width: var(--stage);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 17.8% 69.8%;
  column-gap: 12.4%;
  align-items: start;
}

.stamp--big { grid-column: 1; width: 100%; height: auto; }

.copy {
  grid-column: 2;
  text-align: justify;
  hyphens: none;
  line-height: 1.62;
}

.copy p { margin: 0 0 1.4em; }
.copy p:last-child { margin-bottom: 0; }

.supported {
  grid-column: 1 / -1;
  margin-top: clamp(2.5rem, 8vh, 5.5rem);
  text-align: center;
}

.supported__label {
  font-family: var(--black);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.8125rem;
  margin: 0 0 0.7rem;
}

.supported img { width: 37.5%; min-width: 11rem; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Script Lab
   -------------------------------------------------------------------------- */

.stage--lab { text-align: center; }

.poster {
  width: 100%;
  height: auto;
  max-height: calc(100svh - var(--chrome) - var(--footer) - 5rem);
  object-fit: contain;
  margin: 0 auto;
}

.apply {
  margin: clamp(1.5rem, 4vh, 2.75rem) 0 0;
  font-family: var(--black);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
}

.apply a {
  color: var(--mute);
  text-decoration: none;
  transition: color 150ms ease;
}

.apply a:hover, .apply a:focus-visible { color: var(--ink); }

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

.stage--contact { display: grid; justify-items: center; }

.card {
  display: block;
  width: min(26vw, 23.5rem);
  transform: rotate(2deg);          /* eases back the tilt baked into the artwork */
  transition: transform 200ms ease;
}
.card img { width: 100%; height: auto; }
.card:hover, .card:focus-visible { transform: rotate(2deg) translateY(-3px); }

/* The address exists as real text for search engines and copy and paste,
   without showing on top of the card artwork. */
.card__text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Mobile cover
   -------------------------------------------------------------------------- */

.cover {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--ink);
}

.cover__media { width: 100%; height: 100%; object-fit: cover; }

.cover__enter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: transparent;
  font: inherit;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 56rem) {
  :root {
    --chrome: calc(var(--chrome-measured, 7.15rem) + 1rem);
    --footer: 1.5rem;
    --air: clamp(1.4rem, 4vh, 2.25rem);
  }

  .chrome {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 1rem;
    row-gap: 0.5rem;
    background: var(--page);
    padding-bottom: 0.75rem;
  }

  .chrome__mark { display: block; grid-column: 1; grid-row: 1 / span 2; }
  .chrome__mark img { width: 2.5rem; height: auto; }

  .nav {
    grid-column: 2; grid-row: 1;
    justify-content: flex-end;
    gap: clamp(0.6rem, 2.7vw, 1.1rem);
    font-size: clamp(0.75rem, 3.3vw, 0.9375rem);
  }

  .icons--head { display: flex; grid-column: 2; grid-row: 2; justify-content: flex-end; gap: 0.75rem; }
  .icons--head svg { width: 1.3rem; height: auto; }
  .icons--foot { display: none; }

  .stage--home { grid-template-columns: minmax(0, 1fr); }
  .side--start, .plate, .side--end { grid-column: 1; }
  .side--end { display: none; }               /* address comes off mobile home */

  .stamp--home { display: none; }             /* the header stamp does this job */

  .tagline {
    margin: 0 0 1.25rem;
    font-size: clamp(0.8125rem, 4.05vw, 1.1875rem);
    line-height: 1.35;
  }
  .tagline br.d { display: none; }
  .tagline br.m { display: inline; }

  .wall { max-height: none; }

  .stage--about {
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 0;
  }
  .stamp--big { display: none; }
  .copy { grid-column: 1; margin-top: var(--air); line-height: 1.5; }
  .copy p { margin-bottom: 1.2em; }

  /* the two gaps either side of the body copy are deliberately identical */
  .supported { grid-column: 1; margin-top: var(--air); }
  .supported__label { font-size: 0.6875rem; letter-spacing: 0.03em; }
  .supported img { width: 54%; min-width: 0; }

  .poster { max-height: none; }

  .card { width: 63%; }
}

/* --------------------------------------------------------------------------
   Quality floor
   -------------------------------------------------------------------------- */

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

@media (prefers-reduced-motion: reduce) {
  .deck { scroll-behavior: auto; scroll-snap-type: none; }
  * { animation: none !important; transition: none !important; }
}