@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* Colours from the brand sheet. --field is the sheet's own background, so the
   cut-out pictures need no transparency: their edges vanish into the page. */
:root {
  --field: #f6f6f6;
  --ink: #1c1d20;
  --panel: #25282e;
  --red: #d5362f;
  --steel: #6d7078;
  --line: #d9d9dc;
  --critical: #d5362f;
  --high: #ee7b34;
  --medium: #f0b92b;
  --low: #3fae57;
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wide: 1180px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font: 400 1.125rem/1.55 var(--body);
}

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.98;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); max-width: 18ch; }
h3 { font-size: 1.55rem; font-weight: 700; line-height: 1.05; }
p { margin: 0; max-width: 60ch; }

a { color: var(--ink); text-underline-offset: 0.2em; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 10; }
.skip:focus { left: 8px; }

main > section, .top, .foot { width: min(var(--wide), 100% - 40px); margin-inline: auto; }
main > section { padding-block: clamp(44px, 7vw, 92px); }

/* Yard lines: the hash marks of a field separate the sections. */
main > section + section {
  background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 5%) top left / 100% 14px no-repeat;
  border-top: 3px solid var(--ink);
}

/* Top bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
.mark { display: inline-flex; align-items: center; gap: 10px; font: 800 1.5rem/1 var(--display); text-transform: uppercase; text-decoration: none; color: var(--ink); }
.mark span { background: var(--ink); color: #fff; font-size: 1rem; padding: 5px 7px 4px; border-radius: 5px; border-bottom: 3px solid var(--red); }
.top nav { display: flex; gap: clamp(14px, 3vw, 30px); }
.top nav a { font: 700 1.1rem/1 var(--display); text-transform: uppercase; text-decoration: none; color: var(--steel); letter-spacing: 0.03em; }
.top nav a:hover { color: var(--red); }

/* Hero */
main > .hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  padding-top: clamp(12px, 3vw, 36px);
}

.word {
  display: block;
  font-size: clamp(3.6rem, 9.6vw, 8.2rem);
  line-height: 0.86;
  letter-spacing: -0.01em;
  /* the speed stripes of the wordmark */
  padding-bottom: 0.16em;
  background:
    linear-gradient(var(--red), var(--red)) left bottom / 42% 0.035em no-repeat,
    linear-gradient(var(--red), var(--red)) left calc(100% - 0.06em) / 30% 0.035em no-repeat;
}

.tag {
  display: block;
  margin-top: 0.5em;
  font-size: clamp(1.15rem, 2.3vw, 1.75rem);
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.08em;
}

.lead { margin-top: 1.2rem; font-size: clamp(1.1rem, 1.5vw, 1.3rem); }

.run { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.run > span, .status { font: 700 1.05rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--steel); }
.status { margin-top: 1.4rem; }

code {
  font: 800 clamp(1.5rem, 2.6vw, 2.1rem)/1 var(--display);
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  padding: 0.32em 0.6em 0.28em;
  border-radius: 8px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
code span { color: var(--red); }

/* The hero picture with two live cards. The cards sit exactly over the two
   cards painted in the picture, and scale with it. */
.field {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 750 / 755;
  width: 100%;
}
.field > .lb { width: 100%; height: 100%; }

/* A picture is a stack of SVG layers of the same size: the body, the eyes,
   a blurred copy of the eyes for the glow, and the part that moves. */
.lb { position: relative; display: block; }
.lb > * { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.lb > .body { position: relative; }
/* The blink: a black copy of the eyes (the lid) lies over them and is shown
   from the top down, then hidden again. Nothing moves, so the blink stays
   inside the eyes. --top and --bottom are where the eyes begin and end, in %
   of the picture's height; tools/trace.py prints them. */
.lb > .lid { filter: brightness(0.09); clip-path: inset(0 0 calc(100% - var(--top)) 0); animation: lid 5.2s linear infinite var(--wait, 0s); }
.lb-hero { --top: 27.2%; --bottom: 32.2%; }
.lb-step-1 { --top: 35.1%; --bottom: 42.6%; --wait: -1.3s; }
.lb-step-2 { --top: 37.2%; --bottom: 45.7%; --wait: -3.1s; }
.lb-step-3 { --top: 37.8%; --bottom: 46.0%; --wait: -0.6s; }
.lb-step-4 { --top: 37.0%; --bottom: 44.7%; --wait: -2.2s; }
.lb-tackling { --top: 29.5%; --bottom: 34.3%; --wait: -4s; }
.lb-scanning { --top: 28.1%; --bottom: 33.1%; --wait: -1.8s; }
.lb-cleared { --top: 22.9%; --bottom: 27.6%; --wait: -2.9s; }
.lb > .glow { filter: blur(3px) saturate(1.5); mix-blend-mode: screen; animation: glow 3.4s ease-in-out infinite, shut 5.2s linear infinite var(--wait, 0s); }
.lb-hero > .glow { filter: blur(1.4cqw) saturate(1.5); }
.lb-hero > .halo { overflow: visible; animation: halo 7s ease-in-out infinite; transform-origin: 54% 42.6%; }
.lb-hero > .halo path { transform-box: fill-box; transform-origin: center; animation: twinkle 3.2s ease-in-out infinite; }
.lb-hero > .halo path:nth-child(2) { animation-delay: -0.9s; }
.lb-hero > .halo path:nth-child(3) { animation-delay: -1.7s; }
.lb-hero > .halo path:nth-child(4) { animation-delay: -2.5s; }
.lb-hero > .body, .lb-hero > .eyes { animation: ready 4.6s ease-in-out infinite; }
.lb-hero > .lid { animation: ready 4.6s ease-in-out infinite, lid 5.2s linear infinite; }
.lb-hero > .glow { animation: ready 4.6s ease-in-out infinite, glow 3.4s ease-in-out infinite, shut 5.2s linear infinite; }

/* each moving part turns around its own middle, given in % of the picture */
.lb-step-2 > .fx { transform-origin: 73% 42%; animation: bob 2.6s ease-in-out infinite; }
.lb-step-3 > .fx { transform-origin: 79% 46%; animation: wobble 2.2s ease-in-out infinite; }
.lb-step-4 > .fx { animation: confetti 2.4s ease-in-out infinite; }
.lb-tackling > .fx { transform-origin: 58.9% 82.7%; animation: squirm 1.1s ease-in-out infinite; }
/* the radar: a green beam that goes round the dial painted in the picture */
.lb-scanning > .sweep {
  inset: auto;
  left: 22.7%; top: 55.8%; width: 27.9%; height: 35.4%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(110, 230, 130, 0) 0 68%, rgba(110, 230, 130, 0.55) 100%);
  mix-blend-mode: screen;
  animation: sweep 3.6s linear infinite;
}
.lb-cleared > .fx { transform-origin: 75% 65%; animation: shield 3s ease-in-out infinite; }

.card {
  position: absolute;
  font-size: 2.3cqw;
  line-height: 1.25;
  border-radius: 1.6cqw;
  box-shadow: 0 1.2cqw 3cqw rgba(20, 20, 24, 0.28);
}
.card p { max-width: none; }
.card-head { display: flex; align-items: center; gap: 0.8cqw; font-weight: 600; }
.card-head svg { width: 2.4cqw; height: 2.4cqw; fill: currentColor; flex: none; }

.checks {
  left: -1%;
  top: 54.5%;
  width: 41%;
  min-height: 46.5%;
  background: var(--panel);
  color: #fff;
  padding: 2.2cqw 2.4cqw 1.6cqw;
}
.checks .card-head b { margin-left: 0.6cqw; background: var(--low); font-size: 0.82em; font-weight: 600; padding: 0.15em 0.6em; border-radius: 0.5cqw; }
.checks ul { list-style: none; margin: 1.5cqw 0 0; padding: 0; }
.checks li {
  display: grid;
  grid-template-columns: 4.4cqw 1fr;
  align-items: center;
  gap: 1.3cqw;
  padding: 1.25cqw 0;
  border-top: 1px solid #3a3e46;
  animation: call 0.5s ease-out both;
}
.checks li:nth-child(1) { animation-delay: 0.7s; }
.checks li:nth-child(2) { animation-delay: 1.5s; }
.checks li:nth-child(3) { animation-delay: 2.3s; }
.checks li:nth-child(4) { animation-delay: 3.1s; }
.checks i {
  width: 4.4cqw;
  height: 4.4cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 2.9cqw/1 var(--display);
  font-style: normal;
  color: #fff;
  background: var(--critical);
}
.checks .warn i { background: var(--medium); color: var(--ink); clip-path: polygon(50% 4%, 100% 92%, 0 92%); border-radius: 0; padding-top: 0.9cqw; }
.checks .good i { background: var(--low); }
.checks strong { display: block; font-weight: 600; font-size: 1.06em; }
.checks span { color: #c8cbd2; font-size: 0.9em; }
.checks strong { color: #fff; }

.report {
  left: 64.5%;
  top: 61.5%;
  width: 43%;
  min-height: 40%;
  background: #fff;
  color: var(--ink);
  padding: 2.2cqw 2.4cqw 1.8cqw;
  transform: rotate(4.5deg);
  transform-origin: 30% 20%;
}
.report .card-head { color: var(--red); font: 800 2.9cqw/1 var(--display); text-transform: uppercase; letter-spacing: 0.03em; padding-bottom: 1.4cqw; border-bottom: 1px solid var(--line); }
.report .card-head svg { width: 2.8cqw; height: 2.8cqw; }
.risk { margin-top: 1.4cqw; }
.risk b { color: var(--red); text-transform: uppercase; letter-spacing: 0.04em; }
.report dl { margin: 1.2cqw 0 0; }
.report dl div { display: grid; grid-template-columns: 9.5cqw 1fr; align-items: center; padding: 0.55cqw 0; }
.report dt { font-size: 0.95em; }
.report dd { margin: 0; display: grid; grid-template-columns: 1fr 2.5cqw; align-items: center; gap: 1cqw; }
.report dd span { height: 0.9cqw; border-radius: 99px; background: #e6e6e9; position: relative; overflow: hidden; }
.report dd span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: var(--c);
  transform-origin: left;
  transform: scaleX(var(--n));
  animation: fill 0.9s 3.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.report dd b { color: var(--c); text-align: right; }
.critical { --c: var(--critical); }
.high { --c: var(--high); }
.medium { --c: var(--medium); }
.low { --c: var(--low); }
.done { margin-top: 1.2cqw; padding-top: 1.2cqw; border-top: 1px solid var(--line); font-size: 0.92em; }

/* The play */
.play ol {
  list-style: none;
  margin: clamp(28px, 4vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);
  counter-reset: move;
}
.play li { counter-increment: move; display: grid; grid-template-rows: clamp(110px, 14vw, 172px) auto 1fr; gap: 10px; }
.play .lb { height: 100%; align-self: end; justify-self: start; }
/* a jersey number for each move */
.play h3::before {
  content: counter(move, decimal-leading-zero);
  display: block;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--red);
  margin-bottom: 4px;
}
.play p, .trio p { font-size: 1.05rem; color: #3b3d43; }

/* The defense */
.trio {
  margin-top: clamp(28px, 4vw, 52px);
  display: grid;
  grid-template-columns: 1.25fr 1fr 0.9fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: end;
}
.trio article { display: grid; gap: 10px; }
.trio .lb { justify-self: start; height: min(300px, 100%); max-width: 100%; }
.trio h3 { margin-top: 6px; }

/* The report */
main > .reporting { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.reporting > div > p { margin-top: 1.1rem; }
.levels { margin: 1.6rem 0 0; }
.levels div { display: grid; grid-template-columns: 11ch 1fr; gap: 1ch; padding: 0.6rem 0 0.6rem 14px; border-top: 1px solid var(--line); border-left: 6px solid var(--c); }
.levels dt { font: 700 1.35rem/1.25 var(--display); text-transform: uppercase; }
.levels dd { margin: 0; color: #3b3d43; }
.command { justify-self: center; }
.command code { font-size: clamp(2.6rem, 6vw, 4.6rem); border-bottom: 8px solid var(--red); }

/* Why */
main > .why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 5vw, 72px); align-items: start; }
.why div { display: grid; gap: 1.1rem; }
.why strong, .memory strong { font-weight: 600; }

/* The lineup and the call */
.intro { margin-top: 1.1rem; }
.lineup ul, .call ul { list-style: none; padding: 0; margin: clamp(28px, 4vw, 52px) 0 0; display: grid; gap: clamp(18px, 2.4vw, 32px); }
.lineup ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lineup li { border-top: 6px solid var(--ink); padding-top: 16px; display: grid; gap: 8px; align-content: start; }
.lineup li p, .call li p:last-child { font-size: 1.05rem; color: #3b3d43; }
/* Icons: ink lines with one red part, which is the part that moves. */
.ico { width: 60px; height: 60px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; margin-bottom: 6px; }
.ico * { transform-box: view-box; }
.ico .red { stroke: var(--red); }
.ico .dial { stroke-width: 5; stroke-linecap: butt; }
.ico .hub { fill: var(--ink); stroke: none; }
.ico .stamp circle { fill: var(--field); }
.ico .look { animation: look 4.5s ease-in-out infinite; }
.ico .needle { transform-origin: 24px 34px; animation: needle 3.8s ease-in-out infinite; }
.ico .scan { animation: scan 3.2s ease-in-out infinite; }
.ico .gap { stroke-dasharray: 3 5; animation: gap 2s ease-in-out infinite; }
.ico .stamp { transform-origin: 35px 33px; animation: stamp 3.6s ease-in-out infinite; }
.ico.sign { stroke: var(--c); stroke-width: 4.5; width: 64px; height: 64px; }

.memory { margin-top: clamp(24px, 3vw, 40px); padding-left: 16px; border-left: 6px solid var(--red); }

.call ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.call li { border-top: 10px solid var(--c); padding-top: 14px; display: grid; gap: 6px; align-content: start; }
.call li p:first-of-type { font: 700 1.05rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--steel); }
.call h3 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; }
.stop { --c: var(--critical); }
.care { --c: var(--medium); }
.go { --c: var(--low); }

/* Versus */
.versus table { width: 100%; margin-top: clamp(28px, 4vw, 52px); border-collapse: collapse; text-align: left; table-layout: fixed; }
.versus thead td { width: 22%; }
.versus th, .versus td { padding: 0.8rem 1rem 0.8rem 0; vertical-align: top; border-top: 1px solid var(--line); }
.versus thead th, .versus thead td { border-top: 0; font: 800 1.55rem/1.05 var(--display); text-transform: uppercase; }
.versus tbody th { font: 700 1.2rem/1.25 var(--display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--steel); width: 22%; }
.versus td { width: 39%; color: #3b3d43; }
.versus thead th:last-child, .versus td:last-child { padding-left: 1rem; background: var(--ink); color: #fff; border-top-color: #3a3d44; }
.versus thead th:last-child { border-top: 6px solid var(--red); }
.versus table + p { margin-top: clamp(24px, 3vw, 40px); }

.foot {
  border-top: 3px solid var(--ink);
  padding-block: 26px 44px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  color: var(--steel);
  font-size: 1rem;
}

@keyframes call { from { opacity: 0; transform: translateX(-2.5cqw); } }
@keyframes fill { from { transform: scaleX(0); } }
/* one blink, then a double blink, in each loop */
@keyframes lid {
  0%, 55%, 59%, 91%, 95%, 98%, 100% { clip-path: inset(0 0 calc(100% - var(--top)) 0); }
  57%, 93%, 96.5% { clip-path: inset(0 0 calc(100% - var(--bottom) - 0.5%) 0); }
}
@keyframes shut {
  0%, 55%, 59%, 91%, 95%, 98%, 100% { clip-path: inset(0); }
  57%, 93%, 96.5% { clip-path: inset(100% 0 0 0); }
}
@keyframes glow { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes ready { 50% { transform: translateY(-0.9%); } }
@keyframes halo { 50% { transform: scale(1.018); } }
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.35); opacity: 0.4; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-7%) rotate(5deg); } }
@keyframes wobble { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes confetti { 0%, 100% { transform: translateY(-2%); opacity: 1; } 50% { transform: translateY(3%); opacity: 0.55; } }
@keyframes squirm { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg) translateX(1%); } }
@keyframes sweep { to { transform: rotate(1turn); } }
/* the shield only grows: shrinking or turning would uncover the gap behind it */
@keyframes look { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-21px, -20px); } 62% { transform: translate(-2px, -22px); } }
@keyframes needle { 0%, 100% { transform: rotate(-62deg); } 45%, 60% { transform: rotate(58deg); } 75% { transform: rotate(6deg); } }
@keyframes scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(21px); } }
@keyframes gap { 50% { opacity: 0.3; } }
@keyframes stamp { 0%, 62%, 100% { transform: scale(1); } 70% { transform: scale(1.25); } 78% { transform: scale(0.94); } }
@keyframes shield { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

@media (max-width: 920px) {
  main > .hero, main > .reporting { grid-template-columns: minmax(0, 1fr); }
  .field { width: 100%; margin: 0; }
  main > .why { grid-template-columns: minmax(0, 1fr); }
  .lineup ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .play ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .command { justify-self: start; }
}

@media (max-width: 560px) {
  .top nav a:not(:first-child) { display: none; }
  .play ol, .trio, .lineup ul, .call ul { grid-template-columns: minmax(0, 1fr); }
  /* the table becomes one block per row, each answer named */
  .versus thead { display: none; }
  .versus tr, .versus tbody th, .versus td { display: block; width: auto; }
  .versus tbody th { border-top: 3px solid var(--ink); padding-bottom: 0.2rem; }
  .versus td { border-top: 0; padding: 0.5rem 0.8rem; }
  .versus td::before { content: attr(data-who); display: block; font: 700 0.95rem/1.3 var(--display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--steel); }
  .versus td:last-child { padding-left: 0.8rem; margin-bottom: 0.9rem; }
  .versus td:last-child::before { color: #b9bcc4; }

  .play li { grid-template-rows: 130px auto auto; }
  .levels div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}