/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
  /* colors — stardust: cassette futurism, psychedelic Dieter Rams */
  --background-color: #fffdf7; /* parchment */
  --light-color: #f5e6d3; /* warm cream */
  --dark-color: #6b6b6b; /* bakelite grey — captions, fine print */
  --text-color: #1c1c1c; /* charcoal machinery */
  --smoke-color: #3a3a3a; /* card surfaces on dark */
  --link-color: #2d7d9a; /* studio teal */
  --link-hover-color: #d93025;
  --accent-color: #d93025; /* yunost red */
  --accent-secondary: #3a3a3a;
  --accent-warm: #e67e22;
  --accent-coral: #e8573a;
  --accent-mustard: #e8a317; /* vu amber */
  --accent-mint: #27ae60; /* vu green */
  --accent-teal: #2d7d9a;
  --panel-color: #f5e6d3;
  --border-color: #6b6b6b;

  /* channel stripes — one color per artist, like a mixing desk */
  --channel-sylvaine-eternelle: #c44a6a;
  --channel-helle-raud: #7a9fb0;
  --channel-natsuko-terada: #c44a3a;
  --channel-dmitri-volkov: #4a7a5a;
  --channel-kevin-mayfield: #c49030;
  --channel-the-moss-twins: #6a8a6a;
  --channel-cassidy-diane: #6a6a9a;
  --channel-ann-francon: #c46a30;
  --channel-itzik-kagan: #c45aa0;
  --channel-johnny-kovacs: #6d8290;

  /* fonts */
  --body-font-family: space-mono, mono-cyrillic-fallback, 'Courier New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', monospace;
  --heading-font-family: space-grotesk, space-grotesk-fallback, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --mono-font-family: space-mono, mono-cyrillic-fallback, 'Courier New', monospace;
  --accent-font-family: fraunces, georgia, serif;

  /* body sizes — mono reads small; the machine is precise */
  --body-font-size-m: 15px;
  --body-font-size-s: 13px;
  --body-font-size-xs: 11px;

  /* heading sizes */
  --heading-font-size-xxl: 44px;
  --heading-font-size-xl: 34px;
  --heading-font-size-l: 28px;
  --heading-font-size-m: 22px;
  --heading-font-size-s: 18px;
  --heading-font-size-xs: 16px;

  /* surface treatments — injection-molded thermoplastic */
  --bevel-light: inset 0 1px 0 rgb(255 255 255 / 18%), inset 0 -2px 0 rgb(0 0 0 / 12%);
  --bevel-dark: inset 0 1px 0 rgb(255 255 255 / 8%), inset 0 -2px 0 rgb(0 0 0 / 25%);
  --drop-shadow: 0 3px 10px rgb(0 0 0 / 25%);
  --radius: 8px;
  --radius-card: 10px;
  --radius-cassette: 14px;

  /* nav height */
  --nav-height: 56px;
}

/* fallback fonts */
@font-face {
  font-family: space-grotesk-fallback;
  size-adjust: 97%;
  src: local('Arial');
}

@media (width >= 900px) {
  :root {
    /* heading sizes — display type goes big, weight goes light */
    --heading-font-size-xxl: 96px;
    --heading-font-size-xl: 56px;
    --heading-font-size-l: 40px;
    --heading-font-size-m: 28px;
    --heading-font-size-s: 20px;
    --heading-font-size-xs: 16px;
  }
}

/* the root paints the overscroll/rubber-band area — keep it dark so it
   matches the charcoal header (top) and footer (bottom), not the parchment body */
html {
  background-color: var(--text-color);
}

body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  line-height: 1.7;
}

body.appear {
  display: block;
}

header {
  height: var(--nav-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  font-family: var(--heading-font-family);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  scroll-margin: 40px;
}

h1 {
  font-size: var(--heading-font-size-xxl);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.04em;
}

h2 { font-size: var(--heading-font-size-xl); }
h3 { font-size: var(--heading-font-size-l); }

h4,
h5,
h6 {
  font-weight: 700;
}

h4 { font-size: var(--heading-font-size-m); }
h5 { font-size: var(--heading-font-size-s); }
h6 { font-size: var(--heading-font-size-xs); }

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

code,
pre {
  font-family: var(--mono-font-family);
  font-size: var(--body-font-size-s);
}

pre {
  padding: 16px;
  border-radius: var(--radius);
  background-color: var(--panel-color);
  border: 1px solid var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

main > div {
  margin: 40px 16px;
}

input,
textarea,
select,
button {
  font: inherit;
}

/* links */
a:any-link {
  color: var(--link-color);
  text-decoration: none;
  overflow-wrap: break-word;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* buttons */
p.button-wrapper {
  margin: 12px 0;
}

a.button:any-link,
button.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 11px 27px;
  font-family: var(--heading-font-family);
  font-weight: 700;
  font-size: var(--body-font-size-s);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: var(--text-color);
  color: var(--light-color);
  box-shadow: var(--bevel-dark), var(--drop-shadow);
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s, color 0.2s;
}

a.button:any-link:hover,
button.button:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

a.button[aria-disabled="true"],
button.button:disabled {
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--light-color);
  color: var(--dark-color);
  box-shadow: none;
}

a.button.primary,
button.button.primary {
  background-color: var(--accent-color);
  color: var(--background-color);
  box-shadow: var(--bevel-light), var(--drop-shadow);
}

a.button.primary:hover,
a.button.primary:focus-visible,
button.button.primary:hover,
button.button.primary:focus-visible {
  background-color: var(--accent-coral);
  color: var(--background-color);
}

a.button.secondary,
button.button.secondary {
  border-color: var(--accent-color);
  background-color: transparent;
  color: var(--accent-color);
  box-shadow: none;
}

a.button.secondary:hover,
a.button.secondary:focus-visible,
button.button.secondary:hover,
button.button.secondary:focus-visible {
  background-color: rgb(217 48 37 / 8%);
  color: var(--accent-color);
}

/* cool counterpoint call-to-action */
a.button.accent,
button.button.accent {
  background-color: var(--accent-teal);
  color: var(--background-color);
  box-shadow: var(--bevel-light), var(--drop-shadow);
}

a.button.accent:hover,
a.button.accent:focus-visible,
button.button.accent:hover,
button.button.accent:focus-visible {
  background-color: var(--link-color);
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* sections */
main > .section {
  margin: 64px 0;
}

main > .section > div {
  max-width: 1200px;
  margin: auto;
  padding: 0 24px;
}

/* hero — matte charcoal, CRT warming up */
main > .section:first-of-type {
  margin-top: 0;
  position: relative;

  /* contain the scan-line pseudo-elements' z-index so they can't paint
     over the fixed header as the hero scrolls underneath it */
  isolation: isolate;
  overflow: hidden;
  background-color: var(--text-color);
  color: var(--light-color);
  text-align: center;
  padding: 72px 0;
  border-bottom: 2px solid var(--accent-color);
}

main > .section:first-of-type > div {
  position: relative;
  z-index: 2;
}

/* scan lines */
main > .section:first-of-type::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgb(0 0 0 / 8%) 2px,
      rgb(0 0 0 / 8%) 4px
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgb(255 255 255 / 3%) 50%,
      transparent 100%
    );
  background-size: 100% 4px, 100% 200px;
  animation: scanline-scroll 4s linear infinite;
}

/* colour bleed */
main > .section:first-of-type::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 65% 35%, rgb(217 48 37 / 7%) 0%, transparent 55%),
    radial-gradient(ellipse at 35% 75%, rgb(45 125 154 / 4%) 0%, transparent 50%);
}

@keyframes scanline-scroll {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 200px, 0 200px; }
}

@media (prefers-reduced-motion: reduce) {
  main > .section:first-of-type::before {
    animation: none;
  }
}

main > .section:first-of-type h1 {
  color: var(--light-color);
  text-shadow: 0 2px 20px rgb(217 48 37 / 12%);
}

main > .section:first-of-type p {
  color: var(--light-color);
  opacity: 0.75;
  font-size: var(--body-font-size-m);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

main > .section:first-of-type p.button-wrapper {
  opacity: 1;
}

main > .section:first-of-type a.button.secondary {
  border-color: var(--accent-coral);
  color: var(--accent-coral);
}

main > .section:first-of-type a.button.secondary:hover {
  background-color: rgb(232 87 58 / 12%);
}

@media (width >= 900px) {
  main > .section > div {
    padding: 0 32px;
  }

  main > .section:first-of-type {
    padding: 104px 0;
  }
}

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);
  margin: 0;
  padding: 48px 0;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 40%),
    inset 0 -1px 0 rgb(0 0 0 / 5%);
}

/* dark section variant — the roster wall */
main .section.dark {
  background-color: var(--text-color);
  color: var(--light-color);
  margin: 0;
  padding: 48px 0;
}

main .section.dark h2,
main .section.dark h3 {
  color: var(--light-color);
}