/* WeMovieMake holding page: a slate on a dark stage, lit by one work light, with one accent (gaffer-tape yellow).
   Barlow Condensed is the printed type on the slate; Permanent Marker is what the crew writes on it.
   One moment of motion: the clapstick shuts, then the tape goes on. */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-condensed-400.6437503e.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-600.0a7db401.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-800.db5ae356.woff2") format("woff2"); }
@font-face { font-family: "Permanent Marker"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/permanent-marker-400.f5617a0f.woff2") format("woff2"); }

:root {
  --night: #0a0908;     /* the stage with the lights off */
  --pool: #2e281e;      /* where the work light falls */
  --board: #1a1918;     /* the slate */
  --stick: #121110;
  --chalk: #f2eee5;     /* text and the lines on the slate */
  --fog: #a8a296;       /* quiet text (7:1 on the board) */
  --tape: #ffc21a;      /* the accent: gaffer tape and the waitlist button */
  --tape-ink: #17130a;
  --rule: rgba(242, 238, 229, .18);
  --sans: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --marker: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
  --gutter: clamp(16px, 4.6vw, 72px);
  --photo: url("/img/wmm-bg-800.webp");
  --light-at: 50% 15%;  /* the work light sits behind the slate */
}
@media (min-width: 801px) { :root { --photo: url("/img/wmm-bg-1600.webp"); } }
@media (min-width: 960px) { :root { --light-at: 76% 40%; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--night); }
body {
  margin: 0; min-height: 100vh; color: var(--chalk); font-family: var(--sans); font-size: 1.25rem; line-height: 1.45;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* light pool on top, then a dark scrim, then the set photo if it exists, then black: looks right with or without the photo */
  background-color: var(--night);
  background-image:
    radial-gradient(52% 46% at var(--light-at), rgba(255, 198, 125, .17), rgba(255, 198, 125, .05) 48%, transparent 74%),
    radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(10, 9, 8, .82) 100%),
    linear-gradient(rgba(10, 9, 8, .66), rgba(10, 9, 8, .88)),
    var(--photo);
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, center 30%;
  background-repeat: no-repeat;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--tape); color: var(--tape-ink); }
:focus-visible { outline: 3px solid var(--tape); outline-offset: 4px; border-radius: 2px; }
.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; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 20; padding: 10px 16px; background: var(--tape); color: var(--tape-ink); font-weight: 800; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.brand { width: 158px; color: var(--chalk); }
.brand svg { width: 100%; height: auto; }
.top__cta { font-size: 1rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tape); padding: 8px 0 5px; border-bottom: 3px solid var(--tape); }
.top__cta:hover { color: var(--chalk); }
@media (min-width: 900px) { .top { padding-block: 30px; } .brand { width: 210px; } .top__cta { font-size: 1.125rem; } }

/* ---------- the slate ---------- */
.scene { display: grid; gap: clamp(36px, 5vw, 64px); padding-block: clamp(20px, 4vw, 56px) clamp(56px, 7vw, 104px); }
.slate { position: relative; width: min(100%, 640px); justify-self: center; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .65)); }
.slate__sticks { position: relative; height: clamp(46px, 8.5vw, 70px); }
.slate__stick {
  position: absolute; left: 0; right: 0; height: 47%; border: 3px solid var(--stick); border-radius: 5px;
  background: repeating-linear-gradient(-58deg, var(--chalk) 0 clamp(16px, 3vw, 26px), var(--stick) clamp(16px, 3vw, 26px) clamp(32px, 6vw, 52px));
}
.slate__stick--clap { top: 0; transform-origin: 2% 100%; }
.slate__stick--base { bottom: 0; background-image: repeating-linear-gradient(58deg, var(--chalk) 0 clamp(16px, 3vw, 26px), var(--stick) clamp(16px, 3vw, 26px) clamp(32px, 6vw, 52px)); }
.slate__hinge { position: absolute; left: 1.2%; bottom: 36%; width: clamp(9px, 1.4vw, 13px); height: clamp(9px, 1.4vw, 13px); border-radius: 50%; background: #3b3936; box-shadow: inset 0 0 0 2px var(--stick); }
.slate__board { position: relative; background: var(--board); border: 3px solid var(--stick); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); padding: clamp(12px, 2.2vw, 20px) clamp(14px, 2.6vw, 24px) clamp(16px, 2.8vw, 26px); }
.slate__field { display: grid; gap: 2px; padding-block: 6px 10px; }
.slate__field--prod { border-bottom: 2px solid var(--chalk); }
.slate__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 2px solid var(--chalk); }
.slate__row .slate__field { padding-inline: clamp(8px, 1.6vw, 14px); border-left: 2px solid var(--chalk); }
.slate__row .slate__field:first-child { padding-left: 0; border-left: 0; }
.slate__label { font-size: clamp(.6875rem, 1.3vw, .8125rem); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--fog); line-height: 1.2; }
.slate__value { font-family: var(--marker); font-size: clamp(1.75rem, 5.2vw, 3rem); line-height: 1.12; color: var(--chalk); transform: rotate(-1.5deg); transform-origin: left center; white-space: nowrap; }
.slate__maker { padding-top: 12px; font-size: clamp(.625rem, 1.2vw, .75rem); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--fog); }
.slate__tape {
  position: absolute; right: clamp(-14px, -1.6vw, -6px); bottom: clamp(22px, 4.2vw, 40px);
  padding: .32em 1.05em .22em; background: var(--tape); color: var(--tape-ink);
  font-family: var(--marker); font-size: clamp(1.25rem, 3.6vw, 2.125rem); line-height: 1.1; white-space: nowrap;
  transform: rotate(-5deg); box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
  clip-path: polygon(0 6%, 3% 0, 6% 9%, 9% 1%, 91% 0, 94% 8%, 97% 0, 100% 7%, 99% 50%, 100% 94%, 97% 100%, 94% 92%, 91% 100%, 9% 100%, 6% 92%, 3% 100%, 0 93%, 1% 50%);
}
@media (prefers-reduced-motion: no-preference) {
  .slate__stick--clap { animation: clap 1.25s linear .25s both; }
  .slate__tape { animation: tape-on .45s cubic-bezier(.2, .9, .3, 1.3) 1.35s both; }
}
@keyframes clap {
  0%, 46% { transform: rotate(-17deg); animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  58% { transform: rotate(1.2deg); animation-timing-function: ease-out; }
  66% { transform: rotate(-1.6deg); animation-timing-function: ease-in; }
  74%, 100% { transform: rotate(0); }
}
@keyframes tape-on { from { opacity: 0; transform: rotate(-9deg) scale(1.18); } to { opacity: 1; transform: rotate(-5deg) scale(1); } }

/* ---------- the pitch ---------- */
.pitch { display: grid; gap: clamp(18px, 2.4vw, 28px); align-content: start; }
.pitch h1 { font-size: clamp(3rem, 7.1vw, 6.75rem); font-weight: 800; line-height: .88; letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; }
.pitch__lede { max-width: 34ch; font-size: clamp(1.25rem, 1.9vw, 1.625rem); line-height: 1.35; color: var(--chalk); opacity: .9; }
.pitch__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; }
.btn { display: inline-flex; align-items: center; gap: .6em; padding: 17px 28px 14px; border-radius: 3px; background: var(--tape); color: var(--tape-ink); font-size: 1.375rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1; box-shadow: 0 3px 0 #b88700; transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #b88700; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #b88700; }
.btn svg { width: 1.05em; height: 1.05em; }
.pitch__mail { color: var(--fog); font-size: 1.125rem; }
.pitch__mail a { color: var(--chalk); border-bottom: 2px solid var(--rule); overflow-wrap: anywhere; transition: border-color .2s; }
.pitch__mail a:hover { border-color: var(--tape); }
@media (min-width: 960px) {
  .scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "pitch slate"; column-gap: clamp(40px, 5vw, 88px); align-items: center; }
  .pitch { grid-area: pitch; }
  .slate { grid-area: slate; transform: rotate(-2.5deg); }
}

/* ---------- departments, ruled like the slate ---------- */
.depts { padding-bottom: clamp(56px, 7vw, 104px); }
.depts h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 18px; }
.depts ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--chalk); }
.depts li { display: grid; gap: 10px; align-content: start; padding: 20px 16px 24px 0; border-bottom: 2px solid var(--chalk); }
.depts li:nth-child(even) { padding-left: 16px; border-left: 2px solid var(--chalk); }
.depts svg { width: 38px; height: 38px; color: var(--tape); }
.depts h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; line-height: .95; text-transform: uppercase; }
.depts p { color: var(--fog); font-size: 1.125rem; line-height: 1.35; max-width: 24ch; }
@media (min-width: 900px) {
  .depts ul { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 2px solid var(--chalk); }
  .depts li, .depts li:nth-child(even) { padding: 26px 24px 32px; border-bottom: 0; border-left: 2px solid var(--chalk); }
  .depts li:first-child { padding-left: 0; border-left: 0; }
  .depts svg { width: 46px; height: 46px; }
}

/* ---------- 404 ---------- */
.gone { display: grid; gap: 22px; padding-block: clamp(32px, 7vw, 120px) clamp(72px, 9vw, 140px); }
.gone > * { max-width: 46rem; }
.gone h1 { font-size: clamp(3rem, 9vw, 7rem); font-weight: 800; line-height: .9; text-transform: uppercase; }
.gone p { font-size: clamp(1.25rem, 1.9vw, 1.5rem); color: var(--chalk); opacity: .9; max-width: 36ch; }
.gone .pitch__act { margin-top: 8px; }
.textlink { font-size: 1.25rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-bottom: 3px solid var(--tape); padding-bottom: 2px; }
.textlink:hover { color: var(--tape); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 22px 28px; font-size: 1rem; color: var(--fog); }
.foot a { color: var(--chalk); }
.foot a:hover { color: var(--tape); }

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