/* Daniel Cutting. Plain CSS, no preprocessor. Tokens first, then layout, components, utilities.
   Three breakpoints: phones up to 700px, tablets up to 860px, small laptops up to 1000px. */
:root {
  --bg: #f5f3ef; /* warm white */
  --ink: #101214; /* all text solid: hierarchy comes from size and weight */
  --line: rgba(16, 18, 20, 0.12);
  /* The one brand red. It passes contrast for white text on it and as text on
     light backgrounds; on dark backgrounds use it only for large text, lines and
     markers (small text there is white, next to a red marker). */
  --red: #db0007; /* Arsenal red */
  --dark: #101214;
  --red-dark: #b80006; /* the red, pressed or hovered */
  --display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* type scale: every piece of text uses one of these */
  --fs-label: 12px;
  --fs-small: 14px;
  --fs-body-sm: 16px;
  --fs-body: 17px;
  --fs-lede: clamp(17px, 1.5vw, 21px);
  --fs-ui: 19px;
  --fs-title: clamp(20px, 2.2vw, 32px);
  --fs-h3: clamp(28px, 3.2vw, 44px);
  --fs-h2: clamp(40px, 5.4vw, 76px);
  --fs-h1: clamp(48px, 8vw, 128px);
  --gutter: clamp(20px, 4vw, 56px);
  --header: 72px; /* the fixed header's height: heroes, anchors and full-screen sections allow for it */
  --head-gap: clamp(28px, 3.4vw, 44px); /* the gap under every section intro */
  --hero-h1: min(8vw, 12.5vh); /* page headings scale with the screen's width and height */
  --max: 1440px;
  --r: 14px;
}
* {
  box-sizing: border-box;
}
/* line breaks for wide screens only, and for phones only */
@media (max-width: 860px) {
  .br-wide {
    display: none;
  }
}
@media (min-width: 701px) {
  .br-narrow {
    display: none;
  }
}
/* copy that only wider screens have room for */
@media (max-width: 700px) {
  .not-phone {
    display: none;
  }
}
html {
  -webkit-tap-highlight-color: transparent; /* no grey flash where a phone is tapped */
  scroll-behavior: smooth;
  scroll-padding-top: var(--header); /* anchor links land exactly below the fixed header */
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation: none !important;
    transition: none !important;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img,
video {
  max-width: 100%;
  display: block;
}
img {
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) {
  a:hover {
    color: var(--red);
  }
}
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}
/* icon sprite: out of layout, but its symbols stay usable by <use> */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.status {
  margin-top: 12px;
  min-height: 1.4em;
  font-size: var(--fs-small);
  color: inherit;
}
.status.err {
  color: var(--red);
}
.status a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}
.dark .status.err {
  color: #fff;
}
.skip {
  position: absolute;
  left: -999px;
  top: 12px;
  background: var(--red);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  z-index: 1000;
}
.skip:focus {
  left: 12px;
}
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.wrap.narrow {
  max-width: 720px;
}
.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.9;
}
/* small capital labels (credentials, count names, figures, form labels, badges): one style */
.creds li,
.stat .who,
.facts > div > span,
.views small,
.vid .badge,
.f label,
.foot-person span {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.eyebrow {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
}
.dark .eyebrow,
.full .eyebrow,
.phero .eyebrow {
  color: #fff;
}
/* small labels everywhere: a red marker, then dark text (white on dark backgrounds) */
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 3px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--red);
}
h1,
h2,
h3 {
  margin: 0;
}
p {
  margin: 0;
}
/* the hero headline also scales with screen height, so it fits short laptop screens */
.hero .h-xl,
.phero .h-xl {
  font-size: clamp(48px, var(--hero-h1), 128px); /* every page heading the size of the home page's */
  margin-top: 18px; /* clear of the label above */
}
.h-xl {
  font-size: var(--fs-h1);
}
.h-lg {
  font-size: var(--fs-h2);
}
.h-md {
  font-size: var(--fs-h3);
}
/* section headings: the headline font like everything else (the class name is historical) */
.h-sans {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance; /* even lines, never one stranded word */
}
.lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink);
  max-width: 56ch;
}
.dark .lede {
  color: #fff;
}
.btn {
  /* one button style everywhere, in the headline font like the nav: red = book or send,
     outlined = see more */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 28px 14px;
  border-radius: 999px;
  border: 2px solid transparent;
  font: 400 var(--fs-ui)/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 0.2s,
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
  }
}
.btn-red {
  background: var(--red);
  color: #fff;
}
@media (hover: hover) {
  .btn-red:hover {
    color: #fff;
    background: var(--red-dark);
    box-shadow: 0 8px 24px rgba(219, 0, 7, 0.35);
  }
}
.btn-line {
  background: transparent;
  color: var(--ink);
  border-color: currentColor;
}
.dark .btn-line {
  color: #fff;
}
@media (hover: hover) {
  .btn-line:hover,
  .dark .btn-line:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
  }
}
.btn .ar {
  /* a drawn arrow, not a character: Anton has none, and a fallback font's arrow sat low */
  flex: none;
  width: 16px;
  height: 12px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 6h14M9 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
section {
  padding-block: clamp(44px, 5.5vw, 80px);
}
.dark {
  background: var(--dark);
  color: #fff;
}
.sec-head {
  display: grid;
  gap: 22px;
  max-width: 920px;
  margin-bottom: var(--head-gap);
}

/* header */
.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(16, 18, 20, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
}
.top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--header);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 28px;
  letter-spacing: 0.01em;
  color: #fff;
}
@media (hover: hover) {
  .brand:hover {
    color: #fff;
  }
}
.brand img {
  height: 40px;
  width: auto;
}
.brand em {
  font-style: normal;
  color: var(--red);
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 32px);
}
.nav a {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-ui);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}
/* the red underline marks the current page, and slides in under a link on hover */
.nav a:not(.btn) {
  position: relative;
  padding-block: 6px;
}
.nav a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav a[aria-current]::after {
  transform: scaleX(1);
}
@media (hover: hover) {
  .nav a:not(.btn):hover::after {
    transform: scaleX(1);
  }
}
@media (hover: hover) {
  .nav a:hover {
    color: #fff;
  }
}
/* Book: the same type as the links, set apart only by its red pill */
.nav a.btn {
  padding: 11px 20px 10px;
}
.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 0;
}
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  margin: 3px auto;
  border-radius: 2px;
}
@media (max-width: 860px) {
  .top.open {
    background: var(--dark);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header);
    height: calc(100dvh - var(--header));
    overflow: auto;
    background: var(--dark);
    flex-direction: column;
    align-items: stretch;
    padding: 24px var(--gutter);
    gap: 0;
    display: none;
  }
  .nav.open {
    display: flex;
    overscroll-behavior: contain; /* the menu's own scroll never hands over to the page */
  }
  /* the page behind the open menu stays put (js/nav.js sets top to the scroll position) */
  body.menu-open {
    position: fixed;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  /* every link the same height, the current page shown by its red alone */
  .nav a:not(.btn) {
    font-size: 26px;
    padding-block: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .nav a:not(.btn)::after {
    display: none;
  }
  .nav a[aria-current] {
    color: var(--red);
  }
  .nav a.btn {
    margin-top: 20px;
    justify-content: center;
    font-size: 22px;
  }
  .burger {
    display: block;
  }
}

/* social rail */
.rail {
  position: fixed;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 999px;
  background: rgba(16, 18, 20, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.rail b {
  display: block;
  text-align: center;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  color: #fff;
  margin: 4px 0 2px;
}
.rail a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
}
@media (hover: hover) {
  .rail a:hover {
    background: var(--red);
    color: #fff;
  }
}
.rail svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}
/* keep page content clear of the fixed rail wherever it shows (it ends ~58px from the left);
   the header sits above the rail, so it keeps the normal gutter */
@media (min-width: 861px) {
  main,
  footer {
    --gutter: max(72px, 4vw);
  }
}
@media (max-width: 860px) {
  .rail {
    display: none;
  }
}

/* hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: calc(var(--header) + 4vh) 0 clamp(32px, 6vh, 64px);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero > .wrap {
  width: 100%; /* as a grid item it would otherwise shrink to its content and centre */
}
.hero .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--dark);
}
.hero .bg picture,
.hero .bg video {
  position: absolute;
  inset: 0;
}
.hero .bg video,
.hero .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 40%;
  animation: push 32s ease-in-out infinite alternate;
}
@keyframes push {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.09);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero .bg video,
  .hero .bg img {
    animation: none;
  }
}
.hero .shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* vignette (darkens the edges, where the blurred sides of portrait clips sit)
     over a top-to-bottom fade that ends in the page's black */
  --vignette: radial-gradient(ellipse 70% 80% at 50% 45%, transparent 35%, rgba(16, 18, 20, 0.8) 100%);
  background:
    var(--vignette),
    linear-gradient(
      180deg,
      rgba(16, 18, 20, 0.6) 0%,
      rgba(16, 18, 20, 0.3) 30%,
      rgba(16, 18, 20, 0.82) 62%,
      var(--dark) 100%
    );
}
@media (max-width: 700px) {
  /* phones show the middle of the video, so a lighter vignette */
  .hero .shade {
    --vignette: radial-gradient(ellipse 90% 70% at 50% 40%, transparent 55%, rgba(16, 18, 20, 0.45) 100%);
  }
}
/* hero words, credentials and follower counts (base styles; the phone and desktop layouts below
   adjust them) */
.creds {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  border-left: 3px solid var(--red);
  white-space: nowrap;
  list-style: none;
  margin: 0 0 clamp(20px, 3vw, 32px);
  padding-left: 16px;
}
.creds li + li::before {
  content: '·';
  margin: 0 0.55em;
  color: #fff;
}
.creds li {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.hero .lede {
  margin-top: 26px;
  color: #fff;
  /* one step down the scale, and no wider than the headline ("WATCHING." is ~4x the headline
     size), so it never runs over the video; the headline scales with screen height, so this does too */
  font-size: var(--fs-body);
  max-width: clamp(300px, calc(var(--hero-h1) * 4.05), 520px);
}
.hero .cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.stats {
  display: grid;
  gap: 18px;
}
.stat {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.stat .n {
  margin: 0;
  font-family: var(--display);
  font-size: var(--fs-h2);
  line-height: 0.9;
}
/* on the landing page the counts sit one step down, beside the headline */
.hero .stat .n {
  font-size: var(--fs-h3);
}
.stat .n i {
  font-style: normal;
  color: var(--red);
}
.stat .who {
  margin: 0 0 10px;
  color: #fff;
}
.stat .circle-links {
  margin-top: 12px;
  color: #fff;
}

@media (max-width: 1000px) {
  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: end;
}
@media (max-width: 1000px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  /* phones and tablets: the credentials line sits above the headline, the counts below */
  .hero-side {
    display: contents;
  }
  .hero-side .creds {
    order: -1;
  }
  .hero-side .stats {
    order: 1;
  }
}
/* phones and tablets: one credential per line (on one line they only fit from about 800px, and
   an iPad in portrait is 768) */
@media (max-width: 860px) {
  .hero .creds {
    flex-direction: column;
    white-space: normal;
    gap: 2px;
    margin-bottom: 0;
  }
  .hero .creds li + li::before {
    display: none;
  }
}
/* phones: a tighter landing, so the counts and their channels fit on the first screen with the
   browser's bars showing — the intro's first sentence only (the Book button says the rest) */
@media (max-width: 700px) {
  .hero {
    align-items: stretch;
    padding-top: calc(var(--header) + 8px);
    padding-bottom: 16px;
  }
  .hero-grid {
    grid-template-rows: auto 1fr auto;
    gap: 14px;
  }
  .hero .lede {
    margin-top: 12px;
  }
  /* the credentials pinned under the header; the intro, button and counts at the foot of the
     screen; the headline centred in the space between */
  .hero-grid > div:first-child {
    display: flex;
    flex-direction: column;
  }
  .hero .h-xl {
    margin-block: auto;
    padding-block: 12px;
  }
  .hero .lede-more {
    display: none;
  }
  .hero .cta {
    margin-top: 16px;
  }
  .hero .stats {
    gap: 10px 14px;
  }
  .hero .stat {
    padding-top: 10px;
  }
  .hero .stat .who {
    margin-bottom: 6px;
  }
  .hero .stat .circle-links {
    margin-top: 8px;
  }
  .hero .circle-links a {
    width: 32px;
    height: 32px;
  }
}
/* Desktop: words on the left, follower counts stacked on the right, and a clear column down
   the middle where the video shows through. The scrim follows: dark behind each side, light
   in the middle. */
@media (min-width: 1001px) {
  .hero-grid {
    grid-template-columns: minmax(0, min(560px, 44vw)) minmax(0, 1fr) auto;
  }
  .hero {
    /* lifts the block (and the Book button) well off the bottom edge, so it stays clear of a
       Dock overlapping the browser window on a laptop */
    padding-bottom: clamp(72px, 13vh, 140px);
  }
  .hero-side {
    grid-column: 3;
    align-self: stretch; /* full height: follower counts level with the headline, credentials at the bottom */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: clamp(20px, 3vh, 32px);
  }
  .hero-side .creds {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    margin: 0;
    padding: 2px 16px 2px 0;
    border-left: 0;
    border-right: 3px solid var(--red);
    text-align: right;
  }
  .hero-side .creds li + li::before {
    content: none;
  }
  .hero-side .stats {
    order: -1; /* follower counts at the top, credentials at the bottom */
    width: max-content;
    text-align: right;
  }
  .hero .stat .circle-links {
    justify-content: flex-end;
  }
  .hero .shade {
    background:
      linear-gradient(180deg, rgba(16, 18, 20, 0.55) 0%, transparent 16%, transparent 82%, var(--dark) 100%),
      linear-gradient(
        90deg,
        rgba(16, 18, 20, 0.92) 0%,
        rgba(16, 18, 20, 0.7) 36%,
        rgba(16, 18, 20, 0.05) 52%,
        rgba(16, 18, 20, 0.05) 66%,
        rgba(16, 18, 20, 0.7) 78%,
        rgba(16, 18, 20, 0.92) 100%
      );
  }
}
/* logos: on the same black the hero fades into, so they read as part of the landing */
.logos {
  padding-block: clamp(20px, 2.6vw, 36px) clamp(36px, 4vw, 56px);
  background: var(--dark);
}
.logos .eyebrow::before {
  content: none;
}
.logos .eyebrow {
  text-align: center;
  color: #fff;
  margin-bottom: clamp(26px, 3vw, 40px);
}
.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(22px, 3vw, 44px) clamp(16px, 2.6vw, 36px);
  align-items: center;
  justify-items: center;
}
.logo-grid img {
  height: clamp(26px, 2.8vw, 40px);
  width: auto;
  max-width: 150px;
  object-fit: contain;
  /* white marks (scripts/white-logos.mjs), all at one brightness */
  opacity: 0.85;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  .logo-grid img:hover {
    opacity: 1;
  }
}
.logo-grid img.tall {
  height: clamp(34px, 3.6vw, 52px);
}
/* the crest is narrow, so it needs a little more height to carry the same weight */
.logo-grid img.crest {
  height: clamp(40px, 4.3vw, 62px);
}
@media (max-width: 860px) {
  .logo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 700px) {
  .logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* doors */
.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 860px) {
  .doors {
    grid-template-columns: 1fr;
  }
}
.door {
  --pad: clamp(24px, 3vw, 40px);
  position: relative;
  /* heading at the top, the text and link at the bottom over a faded scrim, the photo
     clear in between; both cards share one layout, only the photo and copy differ */
  display: flex;
  flex-direction: column;
  min-height: min(74vh, 620px);
  padding: var(--pad) var(--pad) 0;
  border-radius: var(--r);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
/* phones: shorter cards, so the second one comes into view sooner */
@media (max-width: 700px) {
  .door {
    min-height: min(62vh, 500px);
  }
}
.door img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* each card places its photo so the faces sit in the gap between heading and text */
  object-position: var(--focus, 50% 20%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--origin, 50% 50%);
  z-index: -2;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (hover: hover) {
  .door:hover img {
    transform: scale(calc(var(--zoom, 1) * 1.05));
  }
}
/* each card's photo framed so the faces sit in the gap between heading and text */
.door-brands {
  --focus: 50% 30%;
}
.door-events {
  --focus: 50% 80%;
}
.door::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* dark behind the words at the top and the link at the bottom; the photo shows between */
  background: linear-gradient(
    180deg,
    rgba(16, 18, 20, 0.7) 0%,
    transparent 28%,
    transparent 42%,
    rgba(16, 18, 20, 0.75) 68%,
    rgba(16, 18, 20, 0.95) 100%
  );
}
.door h3 {
  font-size: var(--fs-h3);
}
/* side by side: the heading fits on one line in the card */
@media (min-width: 861px) {
  .door h3 {
    white-space: nowrap;
  }
}
.door-foot {
  margin-top: auto;
  padding-bottom: var(--pad);
}
.door p {
  /* three lines tall on both cards, so the divider and arrow line up */
  min-height: 4.5em;
  margin-bottom: 20px;
  max-width: 46ch;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: #fff;
}
/* the link row: a divider, the label, and a round arrow badge that fills on hover —
   the whole card is the link, so this only signals it */
.door .tag {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* the same type as the buttons */
  font: 400 var(--fs-ui)/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.door .tag-text {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  transition: text-decoration-color 0.25s ease;
}
.door .go {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}
.door .go::before {
  content: '';
  width: 12px;
  height: 16px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 0v14M1 9l5 5 5-5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.door:focus-visible .tag-text {
  text-decoration-color: var(--red);
}
@media (hover: hover) {
  .door:hover .tag-text {
    text-decoration-color: var(--red);
  }
}
.door:focus-visible .go {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(3px);
}
@media (hover: hover) {
  .door:hover .go {
    background: var(--red);
    border-color: var(--red);
    transform: translateY(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .door:hover .go,
  .door:focus-visible .go {
    transform: none;
  }
}
@media (hover: hover) {
  .door:hover {
    color: #fff;
  }
}

/* cards / tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 860px) {
  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}
.tile {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
}
.tile.wide {
  grid-column: span 2;
  aspect-ratio: auto;
}
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
/* a montage clip (js/montage.js) fades in over the tile's photo, and back out when it ends */
.tile video {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.tile video.is-on {
  opacity: 1;
}
/* a clip whose subject is at the bottom of the frame keeps its bottom edge when trimmed */
.tile.clip-low video {
  object-position: 50% 100%;
}
.tile::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(180deg, transparent, rgba(16, 18, 20, 0.82));
  pointer-events: none;
}
.tile b {
  transition: opacity 0.25s ease;
  z-index: 1;
  position: absolute;
  left: 18px;
  bottom: 16px;
  right: 18px;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-title);
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}
/* a montage tile's label fades as it changes with its clip (js/montage.js) */
.tile b.is-changing {
  opacity: 0;
}

/* home events teaser: four boxes across the page (js/montage.js plays clips in them at random,
   two at a time here and one on phones, fading back to their photos):
     [ wide (landscape) | tall (portrait, full height) ]
     [ box   | box      |                            ]
   The height fits one screen below the header with about 50px to spare, so the whole
   teaser can be watched at once. */
@media (min-width: 861px) {
  .tiles.boxes {
    grid-template-columns: 1fr 1fr 0.8fr;
    grid-template-rows: 1.25fr 1fr;
    height: clamp(460px, min(56vw, 100svh - var(--header) - 50px), 860px);
  }
  .tiles.boxes .tile {
    aspect-ratio: auto;
  }
  .tiles.boxes .tile.wide {
    grid-column: 1 / span 2;
  }
  .tiles.boxes .tile.tall {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

/* phones and tablets: the same shape stacked — wide box across the top, then the tall box
   beside the two smaller ones */
@media (max-width: 860px) {
  .tiles.boxes {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr 1fr;
  }
  .tiles.boxes .tile {
    aspect-ratio: 1;
  }
  .tiles.boxes .tile.wide {
    grid-column: 1 / span 2;
    aspect-ratio: 16 / 10;
  }
  .tiles.boxes .tile.tall {
    grid-column: 2;
    grid-row: 2 / span 2;
    aspect-ratio: auto;
  }
}

/* Daniel page about: words and a 2x2 of key facts on the left set the height; the record photo
   fills the column beside them, its top level with the label and its bottom with the facts */
.split.about {
  align-items: stretch;
}
.split.about > .reveal:first-child {
  display: flex;
  flex-direction: column;
}
.split.about .pic {
  position: relative;
  min-height: 360px;
  overflow: hidden;
}
.split.about .pic img {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
/* the key facts: big numbers like the hero's counts, two by two */
.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: auto;
}
.facts > div {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.facts b {
  display: block;
  font: 400 var(--fs-h3) / 0.9 var(--display);
}
.facts b i {
  font-style: normal;
  color: var(--red);
}
/* the YouTube logo beside "Gold" */
.fact-icon svg {
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.12em;
  vertical-align: 0.06em;
  fill: var(--red);
}
.facts > div > span {
  display: block;
  margin-top: 10px;
}

/* eight campaign videos: four across on desktop, so the rows come out even */
@media (min-width: 1001px) {
  .cases.cases-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* body text under a section intro, one step down from the lede */
.sec-head + .body {
  margin-top: calc(20px - var(--head-gap)); /* closer to the intro than the usual gap */
}
.body + .body {
  margin-top: 1em;
}
.body {
  max-width: 56ch;
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* Daniel & Joshua events: every kind of event, each tile shaped for its photo or clip; the clips
   loop together while on screen (js/montage.js) */
.events-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    'football football appear'
    'schools parties appear'
    'brand fans corporate';
}
.events-grid .tile {
  aspect-ratio: 1;
}
.events-grid .ev-football {
  grid-area: football;
  aspect-ratio: 16 / 9;
}
.events-grid .ev-appear {
  grid-area: appear;
  aspect-ratio: auto;
}
.ev-schools {
  grid-area: schools;
}
.ev-parties {
  grid-area: parties;
}
.ev-brand {
  grid-area: brand;
}
.ev-fans {
  grid-area: fans;
}
.ev-corporate {
  grid-area: corporate;
}
@media (max-width: 860px) {
  .events-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'football football'
      'appear schools'
      'appear parties'
      'brand fans'
      'corporate corporate';
  }
  .events-grid .ev-corporate {
    aspect-ratio: 16 / 9;
  }
}

/* a split whose two sides start level at the top (the Camps video beside its heading) */
.split.split-top {
  align-items: start;
}

/* Camps photos: the camp clips in wide and tall tiles among the photos, at least one per row; every
   clip on screen loops (js/montage.js) */
.camp-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    'c1 c1 t1'
    'a b t1'
    't2 c d'
    't2 c2 c2';
}
.camp-grid .tile {
  aspect-ratio: 1;
}
.camp-grid .cg-c1,
.camp-grid .cg-c2 {
  aspect-ratio: 16 / 9;
}
.camp-grid .cg-t1,
.camp-grid .cg-t2 {
  aspect-ratio: auto;
}
.cg-c1 {
  grid-area: c1;
}
.cg-c2 {
  grid-area: c2;
}
.cg-t1 {
  grid-area: t1;
}
.cg-t2 {
  grid-area: t2;
}
.cg-a {
  grid-area: a;
}
.cg-b {
  grid-area: b;
}
.cg-c {
  grid-area: c;
}
.cg-d {
  grid-area: d;
}
@media (max-width: 860px) {
  .camp-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'c1 c1'
      't1 a'
      't1 b'
      'c t2'
      'd t2'
      'c2 c2';
  }
}

/* Daniel & Joshua family: the photos at their own portrait shape, three across */
.family-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.family-grid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
}
/* a taller photo cropped from its top, so a head isn't cut off */
.family-grid img.fit-top {
  object-position: 50% 0%;
}
@media (max-width: 700px) {
  .family-grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* eleven photos: the one landscape photo spans two columns, so every row is full (four rows of
   three; on phones, full width over five pairs). It takes the row's height on wider screens. */
.family-grid .wide {
  grid-column: span 2;
  position: relative;
}
@media (min-width: 701px) {
  .family-grid .wide img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}
@media (max-width: 700px) {
  .family-grid .wide img {
    aspect-ratio: 4 / 3;
  }
  /* The family selfies alternate with the other photos in the page order, so none sit side by
     side three across. Two across, that order would stack every selfie down the right; swapping
     the 3rd and 5th pairs (photos 4 and 5, 8 and 9) zig-zags them instead. */
  .family-grid > :nth-child(-n + 3),
  .family-grid > :nth-child(5) {
    order: -2;
  }
  .family-grid > :nth-child(4),
  .family-grid > :nth-child(6),
  .family-grid > :nth-child(7),
  .family-grid > :nth-child(9) {
    order: -1;
  }
}

/* video figure */
.vid {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 9/16;
}
.vid.land {
  aspect-ratio: 16/9;
}
.vid video,
.vid img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The play button covers the whole video. While a video plays by itself it's invisible (tap the
   video to pause it); a paused video, or one waiting to be played (.rm: reduced motion or data
   saver, so nothing plays by itself), shows the round play button. */
.vid .play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
  color: #fff;
}
.vid .play::before {
  content: '';
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.vid .play svg {
  position: absolute;
  width: 26px;
  height: 26px;
  fill: #fff;
  margin-left: 4px;
}
.vid:not(.user-paused) .play::before,
.vid:not(.user-paused) .play svg {
  display: none;
}
.rm .vid:not(.playing) .play::before,
.rm .vid:not(.playing) .play svg {
  display: block;
}
.vid.user-paused .play,
.rm .vid:not(.playing) .play {
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.5));
}
/* the hero's pause button, bottom centre, clear of the words and counts */
.hero-pause {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(16px, 3vh, 28px);
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(16, 18, 20, 0.45);
  color: #fff;
  cursor: pointer;
}
/* phones and tablets: top right, opposite the credentials */
@media (max-width: 1000px) {
  .hero-pause {
    left: auto;
    right: var(--gutter);
    bottom: auto;
    top: calc(var(--header) + 12px);
    translate: none;
  }
}
/* the slow push-in stops with the video, and when there's no video to pause (data saver, or it
   failed to load), so nothing on the page moves without a way to stop it */
.hero.is-paused .bg video,
.hero.is-paused .bg img,
.hero:not(:has(video)) .bg img {
  animation-play-state: paused;
}
/* video and clip tiles are pause buttons: their focus ring sits inside the rounded corners */
.vid .play:focus-visible,
.tile[role='button']:focus-visible {
  outline-offset: -6px;
}
.tile[role='button'] {
  cursor: pointer;
}
.hero-pause[hidden] {
  display: none;
}
.hero-pause svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.hero-pause .icon-play,
.hero-pause.is-paused .icon-pause {
  display: none;
}
.hero-pause.is-paused .icon-play {
  display: block;
}
@media (hover: hover) {
  .hero-pause:hover {
    background: var(--red);
    border-color: var(--red);
  }
}
.vid video,
.hero .bg video {
  opacity: 0;
  transition: opacity 0.9s ease;
}
.vid video.is-on,
.hero .bg video.is-on {
  opacity: 1;
}
.vid[data-src]::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  transition: transform 0.3s linear;
  pointer-events: none;
}
.vid .badge {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(16, 18, 20, 0.65);
  color: #fff;
  pointer-events: none;
}

/* case studies: the title (bottom left) and views (top right) sit on the video over a soft
   scrim; the description runs underneath, exactly as wide as the video */
/* a portrait video fills its column; on short screens it's trimmed top and bottom (never
   taller than the screen below the nav) rather than narrowed, so there are no gaps */
.case > .vid {
  width: 100%;
  max-height: max(360px, calc(100svh - var(--header) - 58px));
}

.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 32px);
  padding-block: 0; /* a <section> (a labelled region for the swipe row) without section padding */
}
@media (max-width: 1000px) {
  .cases {
    grid-template-columns: 1fr 1fr;
  }
}
.case .vid::before,
.feature .pic::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    transparent 24%,
    transparent 70%,
    rgba(0, 0, 0, 0.65) 100%
  );
  pointer-events: none;
}
.case .vid .play {
  z-index: 3;
}
.vid-title {
  position: absolute;
  bottom: clamp(14px, 1.6vw, 22px);
  left: clamp(12px, 1.4vw, 20px);
  right: clamp(12px, 1.4vw, 20px);
  z-index: 2;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
/* a figure over a photo or video, top-right: the label above the number */
.views {
  display: flex;
  flex-direction: column-reverse; /* the "views" label above the number */
  align-items: flex-end;
  gap: 4px;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.vid .views,
.pic-stats {
  position: absolute;
  right: clamp(12px, 1.4vw, 20px);
  top: clamp(12px, 1.4vw, 20px);
  z-index: 2;
}
.views b {
  display: block;
  font: 400 var(--fs-title) / 1 var(--display);
}
.views small {
  display: block;
  color: #fff;
}
.views b i {
  font-style: normal;
  color: var(--red);
}
.case-copy {
  margin-top: 16px;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--ink);
}
.dark .case-copy {
  color: #fff;
}
/* phones: the campaign videos are a swipe row, each centred with the edges of its neighbours
   showing either side */
@media (max-width: 700px) {
  .cases {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 80vw;
    gap: 32px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: 10vw; /* the first and last centre too */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .cases::-webkit-scrollbar {
    display: none;
  }
  .cases .case {
    scroll-snap-align: center;
    scroll-snap-stop: always; /* one swipe, one video */
  }
  /* the videos are only for watching here: no long-press menus or text selection to get in the
     way of a swipe */
  .cases .vid {
    -webkit-touch-callout: none;
    user-select: none;
  }
  .cases .vid video {
    pointer-events: none;
  }
  .case > .vid {
    max-height: none;
  }
}

/* split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
}
.split .pic {
  border-radius: var(--r);
  overflow: hidden;
}
.split .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/5;
}
/* feature sections (home Daniel & Joshua, the Daniel page's about and training): words on the
   left set the height; the big photo fills the column beside them, so its top lines up with
   the label and its bottom with the small captioned photos under the words */
.feature .split {
  align-items: stretch;
}
@media (min-width: 861px) {
  .feature .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px; /* the same gap as between the small photos, so they read as one set */
  }
}
.feature .split > .reveal:first-child {
  display: flex;
  flex-direction: column;
}
/* phones and tablets: words, then the big photo, then the small ones, then the link to the page */
@media (max-width: 860px) {
  .feature .split {
    gap: 24px;
  }
  /* the words to the photo: the standard gap under a section head, like every other section */
  .feature .sec-head {
    margin-bottom: calc(var(--head-gap) - 24px);
  }
  .feature .split > .reveal:first-child {
    display: contents;
  }
  .feature .pic {
    order: 1;
  }
  .feature .mini-strip {
    order: 2;
    margin-top: -12px; /* the same 12px gap as between the small photos */
    padding-top: 0;
  }
  .feature .split .more {
    order: 3;
    margin-top: 0;
  }
}
/* the words keep clear of the photo beside them; only the small photos run up to the 12px gap */
@media (min-width: 861px) {
  .feature .split > .reveal:first-child > :not(.mini-strip) {
    padding-right: clamp(32px, 5vw, 80px);
  }
}
.feature .pic {
  position: relative;
  min-height: 420px;
}
.feature .pic img {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
.feature .lede {
  max-width: 30em;
  text-wrap: balance; /* even lines, no stranded last word */
}
.mini-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: auto;
  padding-top: clamp(28px, 3vw, 40px);
}
/* the big photo labelled like a campaign video: caption bottom-left, follower figures top-right */
.pic-stats {
  display: flex;
  gap: 28px;
}
/* each small photo captioned over a fade at its foot */
.mini-strip figure {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
}
.mini-strip figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(16, 18, 20, 0.75) 0%, rgba(16, 18, 20, 0) 55%);
}
.mini-strip img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.mini-strip figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 1;
  font: 400 var(--fs-body) / 1.05 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
/* the big photo's caption the same size as the small ones (17px), on desktop and phones */
.feature .pic .vid-title {
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
}

/* photo sections (home camps and booking bands): the photo fills the section behind the words */
.full {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: calc(100svh - var(--header));
  padding-block: clamp(56px, 10vh, 120px);
  color: #fff;
  overflow: hidden;
}
.full > .wrap {
  width: 100%; /* as a grid item it would otherwise shrink to its content and centre */
}
.full .bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.full .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Photo framing: a section sets --focus (which part of the photo stays in view), --zoom and
   --origin (where the zoom centres), and its photo follows. The door cards and page heroes use
   the same settings. */
.feature .pic img,
.split.about .pic img,
.full .bg img {
  object-position: var(--focus, 50% 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--origin, 50% 50%);
}
.frame-wembley {
  --focus: 41% 50%; /* the two of them sit just left of the Wembley photo's middle */
}
.frame-gym {
  --focus: 40% 30%; /* Daniel's face and arms, zoomed in a little */
  --zoom: 1.18;
  --origin: 62% 40%;
}
.frame-record {
  --zoom: 1.15; /* in a little on Daniel and the certificate */
  --origin: 45% 60%;
}
.frame-camp-group {
  --focus: 50% 85%; /* zoomed in so the kids fill the band (the 1920 copy keeps it sharp) */
  --zoom: 1.3;
  --origin: 50% 85%;
}
.frame-wembley-kick {
  --focus: 50% 45%; /* the booking photo (portrait): Daniel's body and the ball */
}
.full::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* dark behind the words: from the left, and up from the bottom */
  background:
    linear-gradient(0deg, rgba(16, 18, 20, 0.85) 0%, rgba(16, 18, 20, 0) 55%),
    linear-gradient(90deg, rgba(16, 18, 20, 0.85) 0%, rgba(16, 18, 20, 0.45) 50%, rgba(16, 18, 20, 0.1) 100%);
}
.full .lede {
  color: #fff;
}
.full .btn-line {
  color: #fff;
}
/* home camps: a shorter band between two light sections, centred like an advert, with an
   even tint over the whole photo */
.full-band {
  min-height: 620px; /* camps and booking the same height, whatever their words */
  align-content: center;
  text-align: center;
  padding-block: clamp(88px, 11vw, 140px);
}
.full-band::after {
  background: rgba(16, 18, 20, 0.72);
}
.full-band .sec-head,
.full-band .lede {
  margin-inline: auto;
}
/* the booking heading fits on one line, and its two-line intro is broken by hand */
.full-band .sec-head {
  max-width: none;
}
.lede-wide {
  max-width: none;
}
.full-band .more {
  justify-content: center;
}
/* phones: the words at the top of the band, fading down into the photo below them */
@media (max-width: 700px) {
  .full-band {
    align-content: start;
    min-height: 560px;
    padding-block: 40px;
  }
  .full-band::after {
    background: linear-gradient(
      180deg,
      rgba(16, 18, 20, 0.85) 0%,
      rgba(16, 18, 20, 0.6) 50%,
      rgba(16, 18, 20, 0.1) 100%
    );
  }
  /* the photos move down below the words: the kids' faces on camps, Daniel's jump on booking */
  .frame-camp-group {
    --origin: 50% 0%;
  }
  .frame-camp-group .bg img {
    translate: 0 -12px;
  }
  .frame-wembley-kick {
    --focus: 50% 0%;
    --zoom: 1.5;
    --origin: 55% 0%;
  }
}

/* a button row straight after a section head: the head's own bottom margin is the gap */
.sec-head + .more {
  margin-top: 0;
}

.more {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 34px);
}

/* the line above the camps sign-up, inviting the email */
.signup-label {
  margin: clamp(24px, 3vw, 32px) 0 12px;
  font-weight: 600;
}
.signup {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.signup input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 15px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font: 500 var(--fs-body) var(--sans);
}
/* Cloudflare Turnstile: out of the layout (so nothing moves when it loads) until Cloudflare
   shows the visitor a box to tick */
.turnstile:not(.is-shown) {
  position: absolute;
  pointer-events: none;
}
.signup .turnstile {
  flex-basis: 100%;
}
/* arriving from the home page's camps button: the box pulses red twice to say "here" */
.signup input.is-called {
  animation: called 0.9s ease-out 2;
}
@keyframes called {
  0% {
    box-shadow: 0 0 0 0 rgba(219, 0, 7, 0.9);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(219, 0, 7, 0);
  }
}
.signup .status {
  flex-basis: 100%;
  margin: 0;
}

/* gallery strip; .flush for the full-bleed version */
.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 700px) {
  .strip {
    grid-template-columns: repeat(2, 1fr);
  }
}
.strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
}
.strip.flush img {
  border-radius: 0; /* edge to edge, square corners */
}
.strip.flush {
  gap: 0;
}
.bleed {
  padding-block: 0;
}

/* contact */
/* contact: the form centred on the dark background */
.contact-box {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.contact-box .lede {
  margin: 14px auto 0;
}
form.enq {
  display: grid;
  gap: 12px;
  margin-top: clamp(28px, 4vw, 44px);
  text-align: left;
}
.f {
  display: grid;
  gap: 6px;
}
.f label {
  color: #fff;
}
.f input,
.f textarea {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: 400 var(--fs-body) var(--sans);
}
.f textarea {
  min-height: 150px;
  resize: vertical;
}
/* the field with a problem, until it is fixed and sent again */
.f [aria-invalid='true'] {
  border-color: var(--red);
  box-shadow: 0 0 0 2px var(--red);
}
.hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* footer */
footer {
  padding: 56px 0 32px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink);
}
.foot-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.foot-id {
  display: grid;
  gap: 20px;
  align-content: start;
}
.foot .brand {
  color: var(--ink);
}
@media (hover: hover) {
  .foot .brand:hover {
    color: var(--ink);
  }
}
.foot .brand em {
  color: var(--red);
}
.foot .brand img {
  filter: invert(1);
}
.foot .note {
  max-width: 52ch;
  font-size: var(--fs-small);
  line-height: 1.5;
}
.foot-links {
  display: grid;
  gap: 24px;
  justify-items: end;
  align-content: start;
}
/* the header's links, a size down, with the same red underline */
.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
}
.foot nav a {
  position: relative;
  padding-block: 6px;
  font-family: var(--display);
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}
.foot nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
@media (hover: hover) {
  .foot nav a:hover::after {
    transform: scaleX(1);
  }
}
/* each person's channels: a small name, then thin outlined icons */
.foot-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}
.foot-person span {
  margin-right: 4px;
}
/* round icon links to each person's channels (footer and follower counts): a thin ring in the
   text colour, filling red on hover */
.circle-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.circle-links a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 50%;
  color: inherit;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
@media (hover: hover) {
  .circle-links a:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
  }
}
.circle-links svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.foot .legal {
  padding-top: 20px;
}
.foot .legal a {
  color: inherit;
  text-decoration: underline;
}
/* phones and tablets: two columns side by side — the page links listed down the left, each
   person's channels (name above the icons) down the right */
@media (max-width: 860px) {
  .foot-main {
    display: block;
  }
  .foot-id {
    margin-bottom: 28px;
  }
  .foot-links {
    grid-template-columns: 1fr 1fr;
    justify-items: start;
    gap: 0 24px;
  }
  .foot nav {
    flex-direction: column;
    gap: 2px;
  }
  .foot-social {
    flex-direction: column;
    gap: 16px;
    justify-self: end;
  }
  .foot-person {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .foot-person span {
    flex-basis: 100%;
    margin: 0 0 2px;
    text-align: right;
  }
}

/* page hero (subpages) */
.phero {
  position: relative;
  isolation: isolate;
  background: var(--dark); /* behind the photo, and the whole hero on pages without one */
  min-height: min(72vh, 640px);
  display: grid;
  align-content: end;
  padding: calc(var(--header) + 8vh) 0 clamp(36px, 5vw, 64px);
  color: #fff;
}

.phero-sm {
  min-height: 42vh;
}
.phero .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.phero .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the Daniel page: the same hero as the other pages; its photo is zoomed in a little from its
   left edge, which moves Daniel to the right, clear of the long headline */
.phero-daniel .bg img {
  --focus: 50% 18%;
}
@media (min-width: 861px) {
  .phero-top .bg {
    overflow: hidden; /* a zoomed photo stays inside its column */
  }
  .phero-daniel .bg img {
    transform: scale(1.14);
    transform-origin: 0 20%;
  }
}
/* each page hero's face position */
.phero-dj .bg img {
  --focus: 50% 45%;
}
.phero-contact .bg img {
  --focus: 35% 42%; /* Daniel's strike, the ball just out of view below */
}
.phero-camps .bg img {
  --focus: 50% 35%;
}
/* on wide screens the photo sits a little higher, so Daniel's face and the children's are clear
   above the headline (which runs across the photo there) */
@media (min-width: 861px) {
  .phero-camps .bg img {
    --focus: 50% 45%;
  }
}
/* page heroes with a person: the photo sits on the right over a dark backdrop, fading in from
   the left, so the words only just overlap them; --focus places the face (each page sets it) */
.phero-top .bg img {
  object-position: var(--focus, 50% 22%);
}
@media (min-width: 861px) {
  .phero-top .bg {
    left: 30%;
  }
  .phero-top .bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--dark) 0%, transparent 35%);
  }
  .phero-top .shade {
    display: none;
  }
}
.phero .shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16, 18, 20, 0.7), rgba(16, 18, 20, 0.35) 45%, rgba(16, 18, 20, 0.9));
}
.phero > .wrap {
  position: relative;
  z-index: 2;
  width: 100%; /* as a grid item it would otherwise shrink to its text and centre */
}
.phero .lede {
  color: #fff;
  margin-top: 22px;
  font-size: var(--fs-body); /* as on the home page's hero */
}
/* sections fade in as they scroll into view (js/reveal.js); only hidden where scripts run, so a
   browser without them still shows everything. If the script fails to load or run (a patchy
   connection, a blocker), the sections fade in after a few seconds anyway; main.js marks the
   root .js as soon as it runs, which turns this fallback off. */
@keyframes reveal-fallback {
  to {
    opacity: 1;
    transform: none;
  }
}
/* with reduced motion nothing fades (and the fallback animation would be switched off), so the
   sections are never hidden in the first place */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  :root:not(.js) .reveal {
    animation: reveal-fallback 0.7s ease 4s forwards;
  }
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.7s ease,
      transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .reveal.in {
    opacity: 1;
    transform: none;
  }
}

/* long-form text (privacy) */
.prose .updated {
  margin-top: 40px;
  font-size: var(--fs-small);
}
.prose h2 + p {
  margin-top: 16px;
}
.prose p + h2 {
  margin-top: 44px;
}
.prose ul {
  margin-top: 16px;
  padding-left: 1.2em;
  list-style: disc;
}
.prose li + li {
  margin-top: 10px;
}
.prose ul + p {
  margin-top: 16px;
}
.prose a:not(.btn) {
  color: var(--red);
  font-weight: 600;
}

/* spacing utility, last so it wins over component defaults */
.mt-3 {
  margin-top: 28px;
}