/* Deeploy Tech. Matte graphite track, acid yellow and safety orange livery,
   Archivo Expanded Black Italic for every lockup. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-normal-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: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-normal-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: "Archivo";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-italic-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: "Archivo";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-italic-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;
}

:root {
  color-scheme: dark;

  /* Track */
  --graphite: #0e1114;
  --pit: #14181d;
  --pit-raised: #1a1f25;
  --track: #2a2f36;
  --tarmac: #60666e;
  --silver: #b6bcc4;
  --decal: #ffffff;

  /* Livery */
  --yellow: #dfff00;
  --orange: #ff5a00;

  /* Text on track */
  --ink: var(--decal);
  --ink-soft: #c9ced5;
  --ink-quiet: var(--silver);

  /* The livery an element is painted in; entries override it. */
  --livery: var(--yellow);

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --slant: -14deg;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* The three slashes. Used as a decal, never as content. */
  --slashes-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24'%3E%3Cpath fill='%23FF5A00' d='M10 0h10L10 24H0zM30 0h10L30 24H20zM50 0h10L50 24H40z'/%3E%3C/svg%3E");
  --slashes-graphite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24'%3E%3Cpath fill='%230E1114' d='M10 0h10L10 24H0zM30 0h10L30 24H20zM50 0h10L50 24H40z'/%3E%3C/svg%3E");
}

[data-livery="orange"] { --livery: var(--orange); }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  scrollbar-color: var(--track) var(--graphite);
  background: var(--graphite);
}

body {
  margin: 0;
  background: var(--graphite);
  color: var(--ink-soft);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  caret-color: var(--yellow);
  accent-color: var(--yellow);
  overflow-x: clip;
}

::selection { background: var(--yellow); color: var(--graphite); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--graphite); }
::-webkit-scrollbar-thumb { background: var(--track); border: 3px solid var(--graphite); }
::-webkit-scrollbar-thumb:hover { background: var(--tarmac); }

img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--tarmac);
  transition: text-decoration-color 160ms ease-out, color 160ms ease-out;
}
a:hover { text-decoration-color: var(--yellow); }

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: 8px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--yellow);
  color: var(--graphite);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 200ms var(--ease-out);
}
.skip:focus-visible { transform: none; outline-color: var(--decal); }

/* ---------- Type ---------- */

.display {
  font-style: italic;
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 0.88;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.display--section { font-size: clamp(2.5rem, 6vw, 4.75rem); }
.display--close { font-size: clamp(2.25rem, 5.4vw, 4.5rem); }

.label {
  font-style: italic;
  font-weight: 800;
  font-stretch: 112%;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
}

.num { font-variant-numeric: tabular-nums; }

/* ---------- Decal buttons ---------- */

.decal {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 30px 0 32px;
  color: var(--graphite);
  font-style: italic;
  font-weight: 900;
  font-stretch: 118%;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.decal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--yellow);
  transform: skewX(var(--slant));
  transition: background-color 200ms ease-out, transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.decal:hover::before {
  transform: skewX(var(--slant)) translateX(4px);
  box-shadow: -10px 8px 24px rgb(0 0 0 / 0.45);
}
.decal:focus-visible { outline: none; }
.decal:focus-visible::before {
  outline: 3px solid var(--decal);
  outline-offset: 4px;
}
.decal__arrow {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 260ms var(--ease-out);
}
.decal:hover .decal__arrow { transform: translateX(4px); }

.decal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, rgb(14 17 20 / 0.34) 1px, transparent 1.45px);
  background-size: 5px 5px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 95%);
  mask-image: linear-gradient(90deg, transparent 30%, #000 95%);
  transform: skewX(var(--slant));
  opacity: 0;
  transition: opacity 200ms ease-out, transform 260ms var(--ease-out);
}
/* The active state prints a halftone decal fill across the trailing end. */
.decal:hover::after {
  opacity: 1;
  transform: skewX(var(--slant)) translateX(4px);
}

.decal--ghost { color: var(--ink); }
.decal--ghost::after,
.decal--ink::after { display: none; }
.decal--ghost::before {
  background: transparent;
  border: 2px solid var(--silver);
}
.decal--ghost:hover::before {
  border-color: var(--decal);
  background: rgb(255 255 255 / 0.04);
  box-shadow: none;
}

/* Decals that sit on a livery field. */
.decal--ink { color: var(--yellow); }
.decal--ink::before { background: var(--graphite); }
.decal--ink:focus-visible::before,
.decal--on-livery:focus-visible::before { outline-color: var(--graphite); }
.decal--on-livery { color: var(--graphite); }
.decal--on-livery::before { border-color: var(--graphite); }
.decal--on-livery:hover::before {
  border-color: var(--graphite);
  background: rgb(14 17 20 / 0.07);
}

/* ---------- Team bar ---------- */

.bar {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  gap: 32px;
  min-height: 84px;
  padding-left: var(--gutter);
  border-bottom: 1px solid var(--track);
  overflow: clip;
}

.team {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  text-decoration: none;
}
.team__mark { width: 56px; height: 35px; flex: none; }
.team__name {
  font-style: italic;
  font-weight: 900;
  font-stretch: 125%;
  font-size: 1.25rem;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.team__name > span { display: block; color: var(--yellow); }

.bar__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 44px);
}
.bar__nav a {
  position: relative;
  padding: 10px 0;
  white-space: nowrap;
  color: var(--ink);
  font-style: italic;
  font-weight: 800;
  font-stretch: 112%;
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.bar__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0) skewX(var(--slant));
  transform-origin: left;
  transition: transform 260ms var(--ease-out);
}
.bar__nav a:hover::after,
.bar__nav a:focus-visible::after { transform: scaleX(1) skewX(var(--slant)); }

/* The bar's CTA is the yellow corner of the page, as on a team's pit board. */
.bar__cta {
  /* The cut below is 0.25 x this height, which is what makes it 14 degrees,
     so the height is set, not left to the row. */
  --bar-h: 84px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  height: var(--bar-h);
  align-items: center;
  gap: 14px;
  padding: 0 calc(var(--gutter) + 8px) 0 56px;
  color: var(--graphite);
  font-style: italic;
  font-weight: 900;
  font-stretch: 118%;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
/* Same 14 degree slant as the decals, cut rather than skewed so the corner
   ends exactly at the page edge. */
.bar__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--yellow);
  clip-path: polygon(calc(var(--bar-h) * 0.25) 0, 100% 0, 100% 100%, 0 100%);
}
.bar__cta::after {
  content: "";
  width: 42px;
  height: 17px;
  background: var(--slashes-graphite) center / contain no-repeat;
}
.bar__cta:focus-visible {
  outline: 3px solid var(--graphite);
  outline-offset: -12px;
}
.bar__cta .decal__arrow { transition: transform 260ms var(--ease-out); }
.bar__cta:hover .decal__arrow { transform: translateX(4px); }