@font-face {
  font-family: 'ABCSolarDisplay';
  font-style: normal;
  font-weight: 400;
  src: url('./ABCSolarDisplay-Regular.woff2') format('woff2');
  font-display: block;
}
@font-face {
  font-family: 'ABCSolarDisplay';
  font-style: normal;
  font-weight: 500;
  src: url('./ABCSolarDisplay-Medium.woff2') format('woff2');
  font-display: block;
}
@font-face {
  font-family: 'ABCSolarDisplay';
  font-style: normal;
  font-weight: 700;
  src: url('./ABCSolarDisplay-Ultra.woff2') format('woff2');
  font-display: block;
}

@property --color-frame {
  syntax: "<color>";
  inherits: true;
  initial-value: #fff;
}

:root {
  --radius: 10px;
  --gutter: 20px;
  --block-spacing: 60px;
  --navbar-spacing: 30px; @media (width >= 768px) { --navbar-spacing: 60px; }
  --navbar-height: 28px; @media (width >= 1280px) { --navbar-height: 49px; }
  --navbar-trailing: 61.8svh;
  --text-spacing: 10px;
  --footer-bleed: 100px;

  --font-family-display: 'ABCSolarDisplay', sans-serif;
  --font-family-mono: 'Courier New', monospace;

  --font-size-mono: 15px;
  --font-size-body: 20px; @media (width >= 1280px) { --font-size-body: 35px; }
  --font-size-h2:   30px; @media (width >= 1280px) { --font-size-h2:   50px; }
  --font-size-h1:   30px; @media (width >= 1280px) { --font-size-h1:   60px; }
  --font-size-logo: 40px; @media (width >= 1280px) { --font-size-logo: 70px; }

  --font-mono: 400 var(--font-size-mono) / 17px var(--font-family-mono);
  --font-body: 400 var(--font-size-body) / 1 var(--font-family-display);
  --font-h2:   500 var(--font-size-h2)   / 1 var(--font-family-display);
  --font-h1:   500 var(--font-size-h1)   / 1 var(--font-family-display);
  --font-logo: 700 var(--font-size-logo) / 1 var(--font-family-display);

  --color-black-1: #0A0A0A; --color-black: var(--color-black-1);
  --color-black-2: #2A2A2A; --color-darkgrey: var(--color-black-2);
  --color-black-3: #5F5F5F; --color-shadow: var(--color-black-3);
  --color-black-4: #B9B9B9; --color-midgrey: var(--color-black-4);
  --color-black-5: #E5E5E5; --color-lightgrey: var(--color-black-5);
  --color-black-6: #EFEFEF; --color-brightgrey: var(--color-black-6);
  --color-black-7: #FAFAFA; --color-white: var(--color-black-7);
  --color-black-8: #FFFFFF; --color-blank: var(--color-black-8);

  --color-cyan-1: #00E2E2; --color-cyan: var(--color-cyan-1);
  --color-cyan-2: #64ECEC;
  --color-cyan-3: #C8F5F5;
  --color-cyan-4: #EDF9F9;

  --color-blue-1: #00AFFF; --color-blue: var(--color-blue-1);
  --color-blue-2: #C8EBFB;
  --color-blue-3: #EDF6FA;

  --color-red-1: #F52D00; --color-red: var(--color-red-1);

  --z-pip: 3000;
  --z-navbar: 2000;
  --z-skipper: 1000;
  --z-content: 500;
  --z-footer: 100;
}

:root {
  --columns: 4;
  --column-width: (100dvw - (var(--columns) + 1) * var(--gutter)) / var(--columns);
  @media (width >= 1280px) { --columns: 15; }

  --navbar-span: 4;
  @media (width >=  768px) { --navbar-span: 3; }
  @media (width >= 1280px) { --navbar-span: 9; }
  @media (width >= 1680px) { --navbar-span: 7; }
  @media (width >= 2560px) { --navbar-span: 5; }

  --navbar-width: calc(var(--navbar-span) * var(--column-width) + (var(--navbar-span) - 1) * var(--gutter));
}

:root, .template-talents, .template-talent {
  --paper-angle: -45deg;

  --color-page: var(--color-white);
  --color-frame: var(--color-blank);
  --color-nav: var(--color-brightgrey);
  --color-text: var(--color-black);
  --color-muted: var(--color-midgrey);

  .cta {
    --color-frame: var(--color-cyan-4);
    --color-text: var(--color-cyan-1);
    --color-muted: var(--color-cyan-3);

    &:hover {
      --color-frame: var(--color-cyan-3);
      --color-muted: var(--color-text);
    }
  }

  .footer {
    --color-frame: var(--color-brightgrey);
  }
}

.template-talents, .template-talent {
  nav-bar {
    --color-frame: var(--color-blank);
  }
}

.template-case, .template-cases {
  --paper-angle: 45deg;

  --color-page: var(--color-black);
  --color-frame: var(--color-darkgrey);
  --color-nav: var(--color-darkgrey);
  --color-text: var(--color-white);
  --color-muted: var(--color-shadow);

  .cta {
    --color-frame: var(--color-cyan-2);
    --color-text: var(--color-white);
    --color-muted: var(--color-cyan-3);

    &:hover {
      --color-frame: var(--color-cyan-1);
      --color-muted: var(--color-text);
    }
  }

  .footer {
    --color-frame: inherit;
  }
}

.template-services {
  --paper-angle: -225deg;

  --color-page: var(--color-white);
  --color-frame: var(--color-blank);
  --color-nav: var(--color-blue-3);
  --color-text: var(--color-blue-1);
  --color-muted: var(--color-blue-2);

  .cta {
    --color-frame: var(--color-blank);
    --color-text: var(--color-blue-1);
    --color-muted: var(--color-blue-2);
  }

  .footer {
    --color-frame: var(--color-blue-3);
  }
}

.font-mono { font: var(--font-mono); }
.font-body { font: var(--font-body); }
.font-h2 { font: var(--font-h2); }
.font-h1 { font: var(--font-h1); }
.font-logo { font: var(--font-logo); }

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

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

@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 0.5s;
}

html {
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-page);
  color: var(--color-text);
}
body {
  font: var(--font-body);
}

h1, h2, h3, h4, h5, h6, input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

video-player { display: block; }

.heading, figcaption, dt, button, .slash, .legal {
  font: var(--font-mono);
}

.heading {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  padding: 15px;

  &.spread {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.badge, .cta {
  padding-inline: 15px;
  padding-block: 40px;
}

.cta {
  --offset: 0;
  @media (width >=  768px) { --offset: 1; }
  @media (width >= 1280px) { --offset: 2; }
  @media (width >= 2560px) { --offset: 3; }

  @media (hover: hover) {
    &:hover {
      @media (width >=  768px) { --offset: 0; }
      @media (width >= 1280px) { --offset: 0; }
      @media (width >= 1280px) { --offset: 1; }
      @media (width >= 2560px) { --offset: 2; }

      p {
        font-feature-settings: "ss02";
      }
    }
  }

  margin-inline: calc(var(--offset) * var(--column-width) + var(--offset) * var(--gutter));
  transition: color 300ms ease-in-out, background-color 300ms ease-in-out, margin 300ms ease-in-out;
}

.banner {
  padding-inline: 15px;
  padding-block: 60px;

  @media (width >= 1280px) {
    padding-inline: 60px;
    padding-block: 80px;
  }
}

.text {
  padding-inline: 15px;
  padding-block: 15px 60px;

  h1, h2, h3, h4, h5, h6 {
    font: var(--font-mono);
  }
}

.slash {
  display: flex;

  li {
    display: inline-flex;
    &:not(:last-child)::after {
      content: "/";
    }
  }
}

ul[role='list'], ol[role='list'] {
  list-style: none;
}

button {
  appearance: none;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}
a {
  text-decoration: none;
  color: var(--color-muted);
  &:hover { color: var(--color-text); }
  transition: color 300ms ease-in-out;
}
.legal a {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  &:hover {
    text-decoration: none;
    color: inherit;
  }
}

pre {
  white-space: pre-wrap;
}

hr {
  border-style: solid;
  border-width: 1px 0 0;
  color: inherit;
  height: 0;
  overflow: visible;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}
img, svg, video, canvas {
  height: auto;
}

.hidden, [hidden] { display: none }
.invisible, .skipper:not(:active, :focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
  user-select: none;
}
.invisible {
  &::before { content: "\00a0"; }
  &::after  { content: "\00a0"; }
}
.skipper {
  z-index: var(--z-skipper);
  position: relative;
  display: block;
  padding: var(--gutter);
  text-decoration: none;
  text-align: center;
  background-color: var(--color-cyan-4);
  color: var(--color-cyan-1);
  &:hover {
    background-color: var(--color-cyan-3);
    color: var(--color-cyan-1);
  }
}

.logo {
  cursor: default;
  button& {
    cursor: pointer;
  }

  font: var(--font-logo);
  color: var(--color-text);

  nav-bar & {
    line-height: var(--navbar-height);
  }

  .gpu-ready & {
    opacity: 0;
  }
}

nav-bar {
  --color-frame: var(--color-nav);
  z-index: var(--z-navbar);
  display: block;
  pointer-events: none;
  position: sticky;
  inset-block-start: var(--navbar-spacing);
  margin-block-start: calc(50svh - 0.5 * var(--navbar-height));
  margin-block-end: calc(var(--block-spacing) + var(--navbar-trailing));
}
nav-bar + * {
  margin-block-start: calc(-1 * var(--navbar-trailing));
}
nav-bar .frame {
  width: var(--navbar-width);
  margin-inline: auto;
}
nav-bar nav {
  pointer-events: all;
}
nav-bar nav, nav-bar .menu-wrap {
  height: var(--navbar-height);

  @media (width < 768px) {
    nav-bar[open] & { height: auto; }
  }
}
nav-bar .menu-wrap {
  overflow: hidden;
}

.menu {
  padding-inline: 15px;
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  align-items: start;

  @media (width >= 768px) {
    height: 100%;
  }

  .active a {
    color: var(--color-text);
  }
}
.menu :is(.slash, button) {
  height: var(--navbar-height);
}
.menu .slash {
  align-items: center;
}
.menu button {
  text-align: right;
  color: var(--color-muted);
  transition: color 300ms ease-in-out;
  &:hover { color: var(--color-text); }
}
.menu-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
  padding-block: 30px;

  @media (width >= 768px) {
    height: var(--navbar-height);
    flex-direction: row;
    gap: 30px;
    padding-block: 0;
  }
}
nav-bar:not([open]) .menu-close,
nav-bar[open] .menu-open {
  display: none;
}

logo-screen {
  position: relative;

  canvas {
    pointer-events: none;

    max-width: 100dvw;
    max-height: 100dvh;
    object-fit: cover;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

nav-bar logo-screen {
  display: block;
  max-width: fit-content;
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  margin-inline: auto;

  button {
    display: block;
  }
}
nav-bar :is(.menu-items, logo-screen, .slash, button) {
  transition: opacity 300ms ease-in-out;
}
@media (width < 768px) {
  nav-bar:not([open]) .menu :is(.slash, button) {
    pointer-events: none;
    opacity: 0;
  }
}
nav-bar:not([open]) .menu-items,
nav-bar[open] logo-screen {
  pointer-events: none;
  opacity: 0;
}

.is-first-load {
  nav-bar {
    --color-nav: var(--color-cyan);

    .frame {
      width: var(--navbar-height);
    }
  }

  main, nav-bar nav {
    opacity: 0;
  }
}

#content {
  position: relative;
  z-index: var(--z-content);
}

.page:not(:has(+ .footer-wrap)) {
  margin-block-end: 50svh;
}

.rtf {
  & > * + * {
    margin-block-start: var(--text-spacing);
  }

  h1, h2, h3, h4, h5, h6, dt {
    font: var(--font-mono);

    & + * {
      margin-block-start: 0;
    }
  }
}

.upper { text-transform: uppercase; }

.section {
  padding-inline: var(--gutter);
}
.section + .section {
  margin-block-start: var(--block-spacing);
}

.grid, .grid2, .grid3 {
  display: grid;
  gap: var(--gutter);
}
.grid {
  grid-template-columns: repeat(var(--columns), 1fr);
}
.grid2 {
  grid-template-columns: 1fr;
  @media (width >= 768px) { grid-template-columns: repeat(2, 1fr); }
}
.grid3 {
  grid-template-columns: 1fr;
  @media (width >= 768px) { grid-template-columns: repeat(3, 1fr); }
}

.stack {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
}
.spread {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.frame {
  position: relative;
  background-color: var(--color-frame);
  color: var(--color-text);
  border-radius: var(--radius);
}

.corners1, .corners2 {
  --edge: 0; --size: 10px;
  @media (width >= 1280px) { --size: 15px; }
  @media (resolution >= 2x) { --edge: -0.5px; }

  position: absolute;
  inset-inline: 0;

  &::before, &::after {
    content: "";
    display: block;
    position: absolute;
    width: var(--size);
    height: var(--size);
    border-color: var(--color-text);
    border-width: 1px;
  }

  &::before {
    inset-inline-start: var(--edge);
  }

  &::after {
    inset-inline-end: var(--edge);
  }
}
.corners1 {
  inset-block-start: var(--edge);

  &::before, &::after {
    border-block-start-style: solid;
  }

  &::before {
    border-inline-start-style: solid;
    border-start-start-radius: var(--radius);
  }

  &::after {
    border-inline-end-style: solid;
    border-start-end-radius: var(--radius);
  }
}
.corners2 {
  inset-block-end: calc(var(--size) + var(--edge));

  &::before, &::after {
    border-block-end-style: solid;
  }

  &::before {
    border-inline-start-style: solid;
    border-end-start-radius: var(--radius);
  }

  &::after {
    border-inline-end-style: solid;
    border-end-end-radius: var(--radius);
  }
}

.media {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
  position: relative;
  .frame { position: absolute; inset: 0; }
  img, video, video-player { position: absolute; inset: 0; width: 100%; height: 100%; }
  img, video { object-fit: cover; border-radius: var(--radius); }
  figcaption { position: absolute; inset-block-start: 0; inset-inline-start: 0; padding: 15px; }
  a & {
    .frame { transition: inset 300ms ease-in-out; }
    figcaption { transition: padding 300ms ease-in-out; }
    @media (hover: hover) {
      &:hover {
        .frame { inset: -10px; }
        figcaption { padding: 25px; }
      }
    }
  }
}

.billboard, .template-case .blocks > * {
  grid-column: 1 / -1;
  @media (width >= 1280px) { grid-column: 3 / -3; }
  @media (width >= 2560px) { grid-column: 4 / -4; }
}

.clip {
  grid-column-end: span 2;
  @media (width >=  768px) { grid-column-end: span 1; }
  @media (width >= 1280px) { grid-column-end: span 3; }
}

.sidebar {
  @media (width >= 768px) { align-self: start; position: sticky; inset-block-start: var(--gutter); }

  grid-column: 1 / -1;
  @media (width >=  768px) { grid-column: 1 / 3; }
  @media (width >= 1280px) { grid-column: 1 / 5; }
  @media (width >= 1680px) { grid-column: 1 / 6; }
}
.sidebar + * {
  grid-column: 1 / -1;
  @media (width >=  768px) { grid-column: 3 / -1; }
  @media (width >= 1280px) { grid-column: 5 / -1; }
  @media (width >= 1680px) { grid-column: 6 / -1; }
}

.video-description, .video-credits {
  grid-column: 1 / -1;
  @media (width >= 1680px) { grid-column: 1 / -3; }
  @media (width >= 2560px) { grid-column: 2 / -4; }

  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--text-spacing);
}
.video-description-1 {
  grid-column: 1 / -1;
  @media (width >=  768px) { grid-column: 1 / 3; }
  @media (width >= 1280px) { grid-column: 1 / 5; }
  @media (width >= 2560px) { grid-column: 1 / 4; }
}
.video-description-2 {
  grid-column: 1 / -1;
  @media (width >=  768px) { grid-column: 3 / -1; }
  @media (width >= 1280px) { grid-column: 5 / -1; }
  @media (width >= 2560px) { grid-column: 4 / -1; }
}

.video-credits dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--text-spacing);
}
.video-credit {
  grid-column-end: span 4;
  @media (width >=  768px) { grid-column-end: span 3; }
  @media (width >= 1280px) { grid-column-end: span 5; }
  @media (width >= 1680px) { grid-column-end: span 4; }
  @media (width >= 2560px) { grid-column-end: span 3; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

scroll-list {
  .frame {
    color: var(--color-muted);
    transition: color 300ms ease-in-out;
  }

  .active {
    .frame { color: var(--color-text); }
    .heading { animation: blink 1s linear infinite; }
  }
}

.pip {
  z-index: var(--z-pip);
  position: fixed;
  inset-inline: 0;
  padding-block: var(--gutter);
  pointer-events: none;

  transition: opacity 300ms ease-in-out;
  .is-intro-playing & {
    opacity: 0;
  }

  @media (width < 768px) {
    inset-block-end: 0;
  }

  @media (width >= 768px) {
    inset-block-start: 0;
  }
}

.pip-item {
  --span: 4;
  @media (width >=  768px) { --span: 1; }
  @media (width >= 1280px) { --span: 3; }
  @media (width >= 1680px) { --span: 4; }

  align-self: start;
  grid-row: 1;
  grid-column: 1 / span var(--span);
  pointer-events: all;

  &:not(.active) {
    opacity: 0;
  }

  img {
    width: 100%;
    border-radius: var(--radius);
  }
}

.legal {
  --offset: 0;
  @media (width >= 1280px) { --offset: 2; }
  @media (width >= 2560px) { --offset: 3; }

  text-align: center;
  grid-column: calc(var(--offset) + 1) / calc(-1 * (var(--offset) + 1));
}

.footer-wrap {
  z-index: var(--z-footer);
  position: relative;
  min-height: 100svh;
  margin-block-start: calc(-1 * var(--footer-bleed));
  padding-block-start: var(--footer-bleed);
}
.footer-wrap .paper {
  position: absolute;
  inset-block: 0 auto;
  inset-inline: 0;
  width: 100%;
  height: 100%;
}
.footer-wrap .section {
  padding-block: var(--block-spacing);
}
.footer, .footer-row {
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--block-spacing);
  @media (width >=  768px) { row-gap: 80px; }
  @media (width >= 1280px) { row-gap: 120px; }
}
.footer {
  padding: 15px;
  grid-column: 1 / -1;
  @media (width >= 1280px) { grid-column: 1 / -4; }
  @media (width >= 1680px) { grid-column: 1 / -6; }
  @media (width >= 2560px) { grid-column: 1 / -8; }
}
.footer-row {
  grid-column: 1 / -1;
}
.footer-smallprint {
  font: var(--font-mono);
  align-items: end;
  row-gap: 10px;
}
.footer-col {
  grid-column-end: span 4;
  @media (width >=  768px) { grid-column-end: span 2; }
  @media (width >= 1280px) { grid-column-end: span 6; }
  @media (width >= 1680px) { grid-column-end: span 5; }
  @media (width >= 2560px) { grid-column-end: span 4; }
}

.paper {
  overflow: hidden;
}
.paper-inner {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 160px;
  padding-block-start: var(--block-spacing);

  @media (width >= 1280px) {
    gap: 190px;
    padding-block-start: 120px;
  }
}
.paper-row {
  display: flex;
  flex-direction: row;
  gap: 60px;
}
.paper-col {
  transform: rotate(var(--paper-angle));
  transform-origin: center;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}
.paper-smallprint {
  font: var(--font-mono);
  text-transform: uppercase;
  text-wrap: nowrap;
  a { text-transform: none; }
  @media (width >= 1280px) { padding-inline-start: 4em; }
}