/* WarDorks site, version 2.
   Palette: the brand kit's (brand/palette.json), the game's own team colours on black.
   Type: Barlow Condensed extra-bold italic for display, Barlow for reading; the slant echoes the name tags in the show's intro.
   Layout: left-aligned on a wide column. The loud element is the cast strip: five looping cards on their team colours.
   Everything else stays black, white and quiet. */
:root {
  --black: #060606;
  --white: #ffffff;
  --blue: #75b1ed;
  --red: #db503f;
  --green: #7cd565;
  --soft: #c4c7ce;
  --line: #24272e;
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --skew: -12deg;
}
* { box-sizing: border-box; }
html { background: var(--black); color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--white); font: 400 1.125rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: var(--blue); text-underline-offset: 0.2em; }
a:hover { color: var(--white); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
p { margin: 0 0 1.1rem; max-width: 38rem; }
.wrap { max-width: 72rem; margin: 0 auto; padding-inline: 1.5rem; }

/* Slanted tags and buttons: one shape, used for names, squads and actions */
.tag, .btn {
  display: inline-block;
  transform: skewX(var(--skew));
  font: italic 800 1.35rem/1 var(--display);
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.tag > span, .btn > span { display: inline-block; transform: skewX(12deg); }
.btn { padding: 0.75rem 1.5rem 0.8rem; background: var(--white); color: var(--black); }
.btn:hover { background: var(--blue); color: var(--black); }
.btn.red { background: var(--red); color: var(--black); }
.btn.red:hover { background: var(--white); }
.tag { padding: 0.3rem 1rem 0.4rem; color: var(--black); cursor: default; }
.tag.blue { background: var(--blue); }
.tag.red { background: var(--red); }
.tag.green { background: var(--green); }
.tag.name { background: var(--black); color: var(--white); font-size: 1.7rem; padding: 0.3rem 0.9rem 0.4rem; }

/* Top bar */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; padding-block: 1.25rem; }
.top .logo { width: 13.5rem; height: auto; }
.top nav { display: flex; gap: 1.5rem; margin-left: auto; font: italic 800 1.25rem/1 var(--display); }
.top nav a { color: var(--white); text-decoration: none; }
.top nav a:hover { color: var(--blue); }

/* Hero: the pitch on the left, the pilot on the right */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding-block: 2.5rem 4.5rem; }
h1 { font: italic 800 clamp(2.6rem, 6.2vw, 5rem)/0.98 var(--display); margin: 0 0 1.5rem; text-wrap: balance; }
.lead { font-size: 1.35rem; line-height: 1.5; color: var(--soft); }
.actions { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; margin-top: 2rem; }
.player { justify-self: end; width: min(100%, 21rem); margin: 0; }
.screen { position: relative; aspect-ratio: 9 / 16; background: #000 center / cover no-repeat; overflow: hidden; }
.screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-items: end center; padding: 0 0 2.25rem;
  background: linear-gradient(to top, rgba(6, 6, 6, 0.55), rgba(6, 6, 6, 0) 45%);
  border: 0; cursor: pointer; color: var(--black);
}
.play .btn { font-size: 1.6rem; padding: 0.9rem 1.7rem 1rem; }
.play:hover .btn { background: var(--blue); }
.player figcaption { margin-top: 0.8rem; color: var(--soft); font-size: 1rem; }

/* Sections */
section { padding-block: 3.5rem; border-top: 1px solid var(--line); }
h2 { font: italic 800 clamp(2rem, 4vw, 2.8rem)/1.05 var(--display); margin: 0 0 0.6rem; }
.sub { color: var(--soft); margin-bottom: 2.25rem; }

/* Cast strip */
.cast { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.cast li { display: grid; gap: 0.9rem; align-content: start; }
.card { position: relative; aspect-ratio: 9 / 16; overflow: hidden; }
.card.blue { background: var(--blue); }
.card.red { background: var(--red); }
.card video, .card img { width: 100%; height: 100%; object-fit: cover; }
.card .name { position: absolute; left: 0.3rem; bottom: 0.9rem; }
.cast p { margin: 0; color: var(--soft); font-size: 1rem; line-height: 1.45; }
.squadline { display: grid; grid-template-columns: max-content 1fr max-content 1fr max-content 1.6fr; align-items: center; gap: 0.75rem 1rem; margin-top: 2.5rem; color: var(--soft); }
.squadline .tag { justify-self: start; }
.squadline p { margin: 0; }

/* Episodes */
.episode { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 2rem; align-items: center; }
.episode img { width: 100%; height: auto; }
.episode h3 { font: italic 800 2rem/1.05 var(--display); margin: 0 0 0.5rem; }
.episode .meta { color: var(--soft); margin-bottom: 1.25rem; }
.after { margin-top: 2.5rem; }

footer { border-top: 1px solid var(--line); padding-block: 2rem 3.5rem; color: var(--soft); font-size: 0.95rem; }
footer p { margin-bottom: 0.6rem; max-width: 46rem; }

/* Privacy page */
.doc { max-width: 46rem; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.doc h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); }
.doc h2 { font-size: 1.6rem; margin-top: 2.5rem; }
.doc ul { max-width: 38rem; padding-left: 1.2rem; margin: 0 0 1.1rem; }
.doc li { margin-bottom: 0.45rem; }
.doc .quiet { color: var(--soft); font-size: 1rem; }
.doc footer { margin-top: 3.5rem; }
.back { display: inline-block; margin-bottom: 2rem; }

@media (max-width: 60rem) {
  .hero { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 1.5rem 3.5rem; }
  .player { justify-self: start; }
  .cast { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .episode { grid-template-columns: 1fr; gap: 1.25rem; }
  .squadline { grid-template-columns: max-content 1fr; }
}
@media (max-width: 34rem) {
  .top nav { display: none; }
  .top .logo { width: 11rem; }
  .cast { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .tag.name { font-size: 1.4rem; }
  section { padding-block: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }