/* Tinta Negra Productions — static rebuild.
   Values are transcribed from the rendered original so the layout matches at 1440px. */

/* ---------- fonts ---------- */

@font-face {
  font-family: 'League Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/league-gothic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'League Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/league-gothic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'League Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/league-gothic-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Lumios';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/lumios-typewriter.ttf) format('truetype');
}

/* ---------- tokens ---------- */

:root {
  --black: #000;
  --navy-deep: #060d17;
  --ink: #172239;
  --cream: #fffbf9;
  --rust: #8b210a;
  --parchment: #e7d7c0;
  --slate: #69727d;

  --display: 'League Gothic', 'Arial Narrow', sans-serif;
  --body: 'Lumios', 'Courier New', monospace;

  --shell: 1140px;
  --masthead-h: 92px;

  /* The full-bleed bands are viewport-relative, so they keep filling the screen
     on tall displays instead of leaving the next section riding up. */
  --band-h: 90vh;
  --bio-h: 80vh;
}

/* ---------- base ---------- */

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, blockquote, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
iframe { border: 0; }
a { color: inherit; text-decoration: none; }

.sprite { display: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--rust);
  color: var(--cream);
}

.skip-link:focus { left: 0; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 10px;
}

/* ---------- masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--black);
}

.masthead__inner {
  max-width: var(--shell);
  min-height: var(--masthead-h);
  margin-inline: auto;
  padding-inline: 10px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.wordmark {
  flex: 0 0 265px;
  font-family: var(--display);
  font-size: 52px;
  line-height: 52px;
  letter-spacing: -2.8px;
  color: var(--rust);
}

.nav { flex: 1; }

.nav ul {
  display: flex;
  justify-content: center;
}

.nav a {
  display: block;
  padding: 13px 20px;
  font-size: 16px;
  color: var(--cream);
  transition: color .2s;
}

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

.nav-toggle,
.nav-burger { display: none; }

/* ---------- social icons ---------- */

.socials { display: flex; align-items: center; }

.socials a {
  display: grid;
  place-items: center;
}

.socials svg { fill: currentColor; }

.socials--bar { flex: 0 0 265px; justify-content: flex-end; gap: 10px; }
.socials--bar a { width: 40px; height: 40px; border-radius: 10%; color: var(--cream); }
.socials--bar svg { width: 20px; height: 20px; }
.socials--bar a:hover { color: var(--rust); }

.socials--round { justify-content: flex-end; gap: 16px; }
.socials--round a {
  width: 76px;
  height: 76px;
  border: 2.4px solid var(--rust);
  border-radius: 50%;
  color: var(--rust);
  transition: background-color .2s, color .2s;
}
.socials--round svg { width: 38px; height: 38px; }
.socials--round a:hover { background: var(--rust); color: var(--cream); }

/* ---------- scroll reveal ---------- */

/* The photo bands pin to the top of the viewport and the section after each one
   scrolls up and over it. Positioning every section makes painting follow document
   order, so a later section always covers the band pinned behind it. */

main > * { position: relative; }

.parallax--one,
.parallax--two,
.parallax--quote,
.portfolio {
  position: sticky;
  top: 0;
}

/* ---------- hero ---------- */

.hero {
  min-height: var(--band-h);
  display: grid;
  align-content: center;
  background: var(--black) url(assets/img/bg-hero.jpg) 50% 0 / cover no-repeat;
  padding-inline: 10px;
}

.hero__inner {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  text-align: center;
}

.hero__banner { width: 370px; margin-inline: auto; }

.hero__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 250px;
  line-height: 250px;
  letter-spacing: -13px;
  color: var(--rust);
  margin-top: 3px;
}

/* The spray mark deliberately overlaps the two headings, as in the original. */
.hero__spray {
  width: 246px;
  margin: -113px auto -68px;
  position: relative;
}

.hero__name {
  font-family: var(--display);
  font-size: 82px;
  line-height: 82px;
  letter-spacing: -.3px;
  color: var(--rust);
}

.hero__tagline {
  margin-top: 20px;
  font-size: 25px;
  line-height: 25px;
  letter-spacing: 6.2px;
  color: #fff;
}

.hero__actions {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
}

.hero__actions .btn:first-child { justify-self: end; }
.hero__actions .btn:last-child { justify-self: start; }

.btn {
  display: inline-block;
  padding: 30px 60px;
  border-radius: 3px;
  background: var(--rust);
  color: var(--parchment);
  font-size: 24px;
  line-height: 24px;
  letter-spacing: 3.8px;
  transition: filter .2s;
}

.btn:hover { filter: brightness(1.25); }

/* ---------- reel ---------- */

.reel {
  background: var(--black);
  padding-block: 10px;
}

.reel .shell { padding-inline: 0; }

.reel__player {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  background: var(--black);
}

/* ---------- parallax bands ---------- */

.parallax {
  min-height: var(--band-h);
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.parallax--one { background-image: url(assets/img/bg-parallax-1.jpg); }
.parallax--two { background-image: url(assets/img/bg-parallax-2.jpg); }
.parallax--quote { background-image: url(assets/img/bg-quote.jpg); }

/* ---------- bio ---------- */

.bio {
  position: relative;
  min-height: var(--bio-h);
  display: grid;
  align-content: center;
  row-gap: 20px;
  padding-block: 10px;
  background: url(assets/img/bg-bio.jpg) 50% 50% / cover no-repeat;
}

.bio__copy,
.bio__player { position: relative; }

.bio__copy { padding: 80px; }

.bio p {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  text-align: justify;
  color: #fff;
  margin-bottom: 14.4px;
}

.bio__player {
  padding-block: 32px;
  display: grid;
  justify-items: center;
}

.bio__playlist {
  width: 912px;
  max-width: 100%;
  height: 352px;
  border-radius: 12px;
  display: block;
}

/* ---------- work ---------- */

.work {
  background: var(--navy-deep);
  padding-bottom: 130px;
}

/* Only the middle band of the square spray shows, which is what makes it read
   as a horizontal zigzag rather than a blob. */
.work__sprayband {
  height: 169px;
  overflow: clip;
  display: flex;
  justify-content: center;
}

.work__spray {
  width: 500px;
  max-width: none;
  margin-top: -120px;
}

.work__title {
  margin-top: 20px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 103px;
  line-height: 103px;
  letter-spacing: 4.4px;
  text-align: center;
  color: var(--cream);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 70px;
  padding-inline: 30px;
}

.video-grid iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
}

.work .video-grid { margin-top: 60px; }

.work-more {
  background: var(--cream);
  padding-block: 90px 80px;
}

.work-more .shell { padding-inline: 0; }

/* ---------- channels ---------- */

.channels { background: var(--cream); padding-block: 10px; }

.channels .shell { padding-inline: 0; }

.channels__row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.channels__row img { flex: none; width: 265px; margin: 10px; }

.channels__link {
  flex: 0 0 570px;
  text-align: center;
  padding: 30px 100px;
  border: 1.6px solid var(--black);
  font-size: 31px;
  color: var(--black);
  transition: color .2s, background-color .2s;
}

.channels__link:hover { background: var(--black); color: var(--cream); }

/* ---------- services ---------- */

.services {
  background: var(--cream);
  padding-block: 60px;
}

.services .shell { padding-inline: 0; }

/* The swash sits behind the heading, cropped by the banner box. */
.services__banner {
  padding: 35px;
  background: url(assets/img/spray-line.png) 315px -158px no-repeat;
}

.services__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 62px;
  line-height: 62px;
  letter-spacing: .8px;
  text-align: center;
  color: var(--ink);
}

.services__grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 405px;
  gap: 20px;
  padding: 10px;
}

.services__grid h3 {
  margin: 8px 0 16px;
  font-size: 28px;
  font-weight: 500;
  line-height: 33.6px;
  letter-spacing: 1.1px;
  color: var(--ink);
}

.services__grid hr {
  box-sizing: content-box;
  height: 0;
  margin: 0;
  overflow: visible;
}

.services__grid p {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 1.1px;
  color: var(--ink);
}

/* ---------- quote ---------- */

.quote {
  display: grid;
  place-content: center;
  padding-inline: 10px;
}

.quote__text {
  max-width: 853px;
  font-size: 50px;
  font-weight: 600;
  line-height: 75px;
  text-align: center;
  color: var(--rust);
}

/* ---------- clients ---------- */

.clients {
  background: var(--cream);
  padding-block: 45px 40px;
}

.clients__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 110px;
  line-height: 110px;
  letter-spacing: .8px;
  text-align: center;
  color: var(--ink);
}

/* Offset from the section's right edge, not the centred shell, so it stays clear
   of the heading on wide screens. Faded well back into the cream background. */
.clients__spray {
  position: absolute;
  top: 21px;
  right: 165px;
  width: 295px;
  opacity: .46;
  pointer-events: none;
}

.clients__grid {
  margin-top: 85px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

.clients__grid li {
  display: grid;
  place-items: center;
}

/* ---------- portfolio ---------- */

.portfolio {
  background: var(--cream);
  padding: 10px;
}

.portfolio iframe {
  width: 100%;
  height: 822px;
  display: block;
}

/* ---------- contact ---------- */

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: var(--band-h);
  background: var(--cream);
}

.contact__photo {
  min-height: var(--band-h);
  background: url(assets/img/bg-contact.jpg) 50% 50% / cover no-repeat;
}

.contact__panel {
  padding: 10px 40px 60px 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.contact__line {
  margin-top: 14px;
  font-size: 29px;
  line-height: 43.5px;
  color: var(--black);
}

.contact__line a { transition: color .2s; }
.contact__line a:hover { color: var(--rust); }

.contact__title {
  margin-top: auto;
  font-family: var(--display);
  font-weight: 600;
  font-size: 130px;
  line-height: 130px;
  color: var(--black);
}

/* ---------- colophon ---------- */

.colophon {
  background: var(--black);
  color: var(--cream);
}

.colophon__inner {
  max-width: var(--shell);
  min-height: 72px;
  margin-inline: auto;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.colophon p { font-size: 12px; }

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
  :root { --shell: 1024px; }

  .hero__title { font-size: 170px; line-height: 170px; letter-spacing: -8px; }
  .hero__spray { margin-block: -70px -50px; }
  .clients__title { font-size: 84px; line-height: 84px; }
  .contact__title { font-size: 96px; line-height: 96px; }
  .services__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 30px; }
  .video-grid { gap: 40px; }
  .portfolio { min-height: 49vh; }
  .portfolio iframe { height: 620px; }

  .parallax--one { min-height: 53vh; }
  .parallax--two { min-height: 50vh; }
  .parallax--quote { min-height: 59vh; }

  .clients__spray { top: -93px; right: 306px; width: 180px; }
}

@media (max-width: 767px) {
  :root { --shell: 767px; }

  .reel { min-height: 43vh; }
  .parallax--one { min-height: 43vh; }
  .parallax--two { min-height: 33vh; }
  .parallax--quote { min-height: 56vh; }
  .portfolio { min-height: 35vh; }
  .contact__photo { min-height: 59vh; }

  .masthead__inner { flex-wrap: wrap; padding-block: 12px; }
  .wordmark { flex: 1; font-size: 40px; line-height: 40px; }

  .nav-burger {
    display: block;
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
  }
  .nav-burger span,
  .nav-burger span::before,
  .nav-burger span::after {
    content: '';
    position: absolute;
    left: 8px;
    width: 24px;
    height: 2px;
    background: var(--cream);
  }
  .nav-burger span { top: 19px; }
  .nav-burger span::before { top: -7px; left: 0; }
  .nav-burger span::after { top: 7px; left: 0; }

  .nav {
    flex-basis: 100%;
    display: none;
  }
  .nav-toggle:checked ~ .nav { display: block; }
  .nav ul { flex-direction: column; align-items: center; }

  .socials--bar { flex: 1 0 100%; justify-content: center; }

  .hero__banner { width: 260px; }
  .hero__title { font-size: 84px; line-height: 84px; letter-spacing: -4px; }
  .hero__spray { width: 150px; margin-block: -34px -26px; }
  .hero__name { font-size: 46px; line-height: 46px; }
  .hero__tagline { font-size: 17px; line-height: 26px; letter-spacing: 3px; }
  .hero__actions { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
  .hero__actions .btn:first-child,
  .hero__actions .btn:last-child { justify-self: center; }
  .btn { padding: 20px 36px; font-size: 18px; }

  .bio p { font-size: 17px; line-height: 27px; text-align: left; }
  .bio__playlist { height: 352px; }

  .work { padding-bottom: 70px; }
  .work__sprayband { height: 100px; }
  .work__spray { width: 300px; margin-top: -74px; }
  .work__title { font-size: 54px; line-height: 54px; }
  .video-grid { grid-template-columns: 1fr; gap: 24px; }
  .work .video-grid { margin-top: 30px; }
  .work-more { padding-block: 50px 40px; }
  .services { padding-block: 55px 45px; }
  .services__grid { margin-top: 32px; }
  .clients { padding-block: 30px; }

  .channels__row { flex-direction: column; gap: 20px; }
  .channels__row img { width: 180px; }
  .channels__link { flex: none; padding: 16px 20px; font-size: 24px; }

  .services__title { font-size: 44px; line-height: 44px; }
  .services__grid { grid-template-columns: 1fr; }

  .quote__text { font-size: 28px; line-height: 42px; }

  .clients__title { font-size: 52px; line-height: 52px; }
  .clients__spray { top: -41px; right: 160px; width: 180px; }
  .clients__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; margin-top: 24px; }
  .clients__grid img { max-width: 140px; }

  .portfolio iframe { height: 420px; }

  .contact { grid-template-columns: 1fr; }
  .contact__panel { padding: 24px 16px 40px; }
  .contact__line { font-size: 17px; line-height: 28px; }
  .contact__title { font-size: 60px; line-height: 60px; margin-top: 32px; }
  .socials--round a { width: 56px; height: 56px; }
  .socials--round svg { width: 26px; height: 26px; }

  .colophon__inner { flex-direction: column; text-align: center; padding-block: 16px; }
}