/* Berta Boys Paintball: Rodeo Program
   Wood type on rawhide paper, royal blue ink, butter yellow prize ribbons,
   all of it taken from the team's logo: its two colours (read off their
   sticker, allowing for the photo's light), its western slab lettering
   (Berta Slab, built by assets/slab.js), its rounded corners and its
   sheriff stars. Nothing here has a sharp corner, because nothing on the
   logo does. Themes key on html[data-theme]; nothing follows the device. */

/* Antonio is the stand-in display face when script is off. It sets only
   capitals here, stacked tight like wood type, so its line box is fitted to
   the capitals, centred, the way Berta Slab's own metrics are. */
@font-face {
  font-family: "Antonio";
  src: url("../fonts/antonio.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 78%;
  descent-override: 4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Scene progress, written by assets/motion.js on the elements that read it.
   Its initial value is the finished state, so a page without script, under
   reduced motion or in the preview's still mode shows every beat landed. */
@property --sp {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

[hidden] { display: none !important; }

/* ---------- Themes ---------- */

html[data-theme="light"] {
  color-scheme: light;
  --ground: #FFFCF5;
  --surface: #F2E4C8;
  --ink: #333CA5;
  --accent: #EAD98B;
  --accent-ink: #333CA5;
  --accent-edge: #333CA5;
  --band-bg: #333CA5;
  --band-ink: #FFFCF5;
  --star: #333CA5;
  --gold-deep: #C2AE5E;
  --tail-a: #333CA5;
  --tail-b: #4C55BC;
  --rule: rgba(51, 60, 165, 0.32);
  --rule-strong: #333CA5;
  --focus: #333CA5;
  --btn2-bg: #333CA5;
  --btn2-ink: #FFFCF5;
  --header-bg: rgba(255, 252, 245, 0.97);
  --paper: url("paper-light.svg");
  --lift: 0 22px 44px -26px rgba(36, 26, 16, 0.55);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ground: #241A10;
  /* A deeper blue than the logo's own, so its panel keeps its edge on the cover */
  --surface: #232A7C;
  --ink: #FFF3D6;
  --accent: #EAD98B;
  --accent-ink: #241A10;
  --accent-edge: #EAD98B;
  --band-bg: #333CA5;
  --band-ink: #FFF3D6;
  --star: #EAD98B;
  --gold-deep: #B09C4E;
  --tail-a: #333CA5;
  --tail-b: #4C55BC;
  --rule: rgba(255, 243, 214, 0.3);
  --rule-strong: #FFF3D6;
  --focus: #EAD98B;
  --btn2-bg: #FFF3D6;
  --btn2-ink: #241A10;
  --header-bg: rgba(36, 26, 16, 0.97);
  --paper: url("paper-dark.svg");
  --lift: 0 22px 44px -24px rgba(0, 0, 0, 0.7);
}

/* ---------- Base ---------- */

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

html {
  /* The logo's two colours, the same in both themes. The sticker photo
     reads about #E8D788 and #3A43A6, a muted butter yellow and a royal
     blue; each is set a touch truer here for the photo's dim light. */
  --blue: #333CA5;
  --yellow: #EAD98B;
  --hh: 72px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --display: "Berta Slab", "Antonio", "Arial Narrow", sans-serif;
  /* Corner sizes, from the sticker's rounded panel */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  background-color: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-synthesis: none;
  font-size: 100%;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hh) + 16px);
  scrollbar-color: var(--ink) var(--ground);
  caret-color: var(--ink);
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--ground);
  background-image: var(--paper);
  background-size: 320px 320px;
}

::selection { background: var(--accent); color: var(--accent-ink); }

main { display: block; }

img, svg { display: block; max-width: 100%; }
:where(img[width][height]) { height: auto; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 5rem); }
h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1; }

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

.wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.lede {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.4;
  max-width: 30em;
}
.body-copy p + p { margin-top: 1em; }
.stack { display: grid; gap: 22px; justify-items: start; align-content: start; }
.stack p + p { margin-top: 0; }
.body-copy p {
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 33em;
}

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-weight: 400;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Buttons and links ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 24px;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.18s ease, color 0.18s ease, translate 0.18s ease;
}
/* The butter yellow sits close to the paper, so on the light theme the
   primary button carries a blue edge, the way the logo's art meets its ground. */
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-edge); }
.band .btn-primary { border-color: var(--accent); }
.btn-secondary { background: var(--btn2-bg); color: var(--btn2-ink); border-color: var(--btn2-bg); }
.btn-sm { min-height: 44px; padding: 10px 16px; font-size: 1.05rem; }

@media (hover: hover) {
  .btn-primary:hover { background: var(--ground); color: var(--ink); border-color: var(--ink); }
  .btn-secondary:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
  .band .btn-primary:hover { background: transparent; color: var(--accent); border-color: var(--accent); }
  .band .btn-secondary:hover { color: var(--band-ink); border-color: var(--band-ink); }
  .text-link:hover { text-decoration-thickness: 3px; }
  .program-row:hover .go { background: var(--accent); color: var(--accent-ink); }
  .site-nav a:not(.btn):hover { text-decoration: underline; }
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

/* ---------- Ornaments ---------- */

.rope {
  height: 12px;
  width: 100%;
  background: var(--accent);
  -webkit-mask: url("rope.svg") repeat-x left center / 10px 12px;
  mask: url("rope.svg") repeat-x left center / 10px 12px;
}

/* The team's logo, their own clean vector (client-files/logo-studio.svg),
   used exactly as it is: the hat, BERTA BOYS and the two sheriff stars in
   butter yellow on the rounded royal blue panel. The panel carries its own
   corners, so nothing here crops, frames or recolours it. */
.logo { display: block; }
.logo img { width: 100%; height: auto; }

/* Sheriff stars, the sticker's own ornament: five points, each tipped with a ball. */
.star { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; flex: none; overflow: visible; }

/* The prize rosette: drawn shapes, with its words set in HTML. */
.rosette {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 120 / 170;
}
.rosette svg { width: 100%; height: 100%; overflow: visible; }
.rosette .r-scallop { fill: none; stroke: var(--gold-deep); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0.01 6.2; }
.rosette .r-base { fill: var(--gold-deep); }
.rosette .r-pleats { fill: none; stroke: var(--yellow); stroke-width: 15; stroke-dasharray: 3.6 1.6; }
.rosette .r-ring { fill: var(--blue); }
.rosette .r-disc { fill: var(--yellow); }
.rosette .r-line { fill: none; stroke: var(--blue); stroke-width: 1.4; }
.rosette .r-tail-a { fill: var(--tail-a); stroke: var(--tail-a); }
.rosette .r-tail-b { fill: var(--tail-b); stroke: var(--tail-b); }
.rosette .tails path { stroke-width: 5; stroke-linejoin: round; }
.rosette .tails { transform-box: fill-box; transform-origin: 50% 0; }
.rosette-label {
  position: absolute;
  left: 50%;
  top: 35.3%;
  translate: -50% -50%;
  width: 52%;
  display: grid;
  justify-items: center;
  gap: 0.04em;
  color: var(--blue);
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  line-height: 0.9;
}
.rosette-label .rl-small { font-size: 16px; font-size: 10.5cqi; letter-spacing: 0.08em; }
.rosette-label .rl-big { font-size: 28px; font-size: 20cqi; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: var(--header-bg);
  border-bottom: 2px solid var(--rule-strong);
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--hh);
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  flex: none;
}
.brand .logo { width: 104px; }
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
}
.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.2vw, 18px);
  list-style: none;
}
.site-nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 4px;
  text-underline-offset: 0.3em;
}
.menu-btn {
  display: none;
  appearance: none;
  min-height: 44px;
  min-width: 88px;
  padding: 8px 16px;
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-btn[aria-expanded="true"] { background: var(--ink); color: var(--ground); }

@media (max-width: 899px) {
  html { --hh: 64px; }
  .brand .logo { width: 90px; }
  html.js .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  html.js .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 12px var(--gutter) 24px;
    background: var(--ground);
    border-bottom: 2px solid var(--rule-strong);
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: var(--lift);
  }
  html.js .site-nav:not(.open) { display: none; }
  html.js .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  html.js .site-nav li + li { border-top: 1px solid var(--rule); }
  html.js .site-nav a:not(.btn) { min-height: 56px; font-size: 1.6rem; padding-inline: 0; }
  html.no-js .site-header .bar { flex-wrap: wrap; padding-block: 8px; }
  html.no-js .site-nav { flex-wrap: wrap; width: 100%; }
  html.no-js .site-nav ul { flex-wrap: wrap; }
}

/* ---------- Home: the cover ---------- */

.cover { padding-block: clamp(16px, 3vw, 40px) clamp(40px, 6vw, 88px); }
.cover-frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(20px, 3.4vw, 52px);
  background-color: var(--surface);
  background-image: var(--paper);
  background-size: 320px 320px;
  border: 7px double var(--rule-strong);
  border-radius: var(--r-lg);
}
.cover-copy { display: grid; gap: clamp(16px, 2vw, 26px); align-content: center; justify-items: start; min-width: 0; }
/* The title is the team's logo, printed big on the program cover. */
.cover-title { width: min(100%, 600px); }
.cover-title .logo { width: 100%; }
.cover-photo { position: relative; margin: 0; min-width: 0; }
.arch {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 50% 50% var(--r-md) var(--r-md) / 24% 24% var(--r-md) var(--r-md);
  border: 3px solid var(--rule-strong);
  background: var(--ground);
}
.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.cover-photo .rosette {
  position: absolute;
  width: clamp(96px, 13vw, 176px);
  right: 10px;
  top: -34px;
  transform-origin: 50% 8%;
}

html[data-theme="light"] .only-dark,
html[data-theme="dark"] .only-light { display: none; }

@media (min-width: 1100px) {
  .cover-frame {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    align-items: center;
    min-height: calc(100vh - var(--hh) - 72px);
    min-height: calc(100svh - var(--hh) - 72px);
  }
  .cover-title { width: min(100%, 600px, calc((100svh - var(--hh) - 380px) * 1.46)); min-width: 380px; }
  .cover-photo .rosette { left: -64px; right: auto; top: auto; bottom: -52px; }
  .arch { aspect-ratio: 5 / 4.4; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .cover-title { width: min(100%, 520px); }
  .arch { aspect-ratio: 16 / 9.5; }
}

/* ---------- Home: story ---------- */

.section { padding-block: clamp(64px, 9vw, 136px); }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 56px); }

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.story-copy { display: grid; gap: 24px; justify-items: start; }
.tilt-card {
  --q: var(--sp);
  justify-self: center;
  width: min(100%, 520px);
  margin: 0;
  padding: 14px 14px 18px;
  background: var(--surface);
  border: 2px solid var(--rule-strong);
  border-radius: var(--r-md);
  box-shadow: var(--lift);
  rotate: calc(-3.5deg + var(--q) * 5deg);
}
.tilt-inner { overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--r-sm); }
.tilt-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.14;
  translate: 0 calc((var(--q) - 0.5) * -9%);
}
.tilt-card figcaption {
  margin-top: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}
@media (min-width: 900px) {
  .story-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* ---------- Home: champions, the pinned set-piece ---------- */

.band {
  background: var(--band-bg);
  color: var(--band-ink);
  --focus: var(--yellow);
  --rule-strong: var(--band-ink);
  --rule: rgba(255, 248, 230, 0.35);
}
.band .btn-secondary { background: var(--band-ink); color: var(--band-bg); border-color: var(--band-ink); }
.band ::selection { background: var(--yellow); color: var(--blue); }

.champs { position: relative; overflow-x: clip; }
.champs-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(56px, 7vw, 96px) var(--gutter);
}
.champs-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(16px, 3vw, 36px);
  row-gap: 22px;
  align-items: center;
}
.champs-copy .rosette { width: clamp(92px, 12vw, 170px); grid-row: 1; }
.champs-copy .rosette {
  --a: clamp(0, calc(var(--sp) / 0.42), 1);
  --t: clamp(0, calc((var(--sp) - 0.12) / 0.42), 1);
  rotate: calc((1 - var(--a)) * -150deg);
  scale: calc(0.7 + var(--a) * 0.3);
  transform-origin: 50% 35%;
}
.champs-copy .rosette .tails { transform: scaleY(var(--t)); }
.champs-title {
  --a: clamp(0, calc(var(--sp) / 0.42), 1);
  grid-row: 1;
  min-width: 0;
  display: grid;
  gap: 0.06em;
  line-height: 0.88;
}
.champs-title > span { display: block; }
.champs-year { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 5rem); }
.champs-series { font-size: clamp(1.15rem, 0.85rem + 1.2vw, 2rem); letter-spacing: 0.02em; translate: calc((1 - var(--a)) * 20%) 0; }
.champs-word {
  font-size: clamp(2.1rem, 0.8rem + 3.9vw, 4.8rem);
  color: var(--yellow);
  translate: calc((1 - var(--a)) * -8%) 0;
}
.champs-copy p { grid-column: 1 / -1; font-size: 1.15rem; line-height: 1.5; max-width: 30em; }
.champs-copy .actions { grid-column: 1 / -1; }
.champs-photo {
  --b: clamp(0, calc((var(--sp) - 0.08) / 0.5), 1);
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 3px solid var(--yellow);
  border-radius: var(--r-md);
  clip-path: circle(calc(64% + var(--b) * 62%) at 18% 60%);
}
.champs-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; scale: calc(1.12 - var(--b) * 0.12); }

@media (min-width: 1100px) {
  .champs-stage { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .champs-photo { aspect-ratio: 4 / 4.2; }
}

/* Pinned only with motion on and room for it. */
@media (prefers-reduced-motion: no-preference) and (min-height: 620px) {
  html.motion:not([data-preview-still]) .champs { height: 230vh; height: 230svh; }
  html.motion:not([data-preview-still]) .champs-stage {
    position: sticky;
    top: var(--hh);
    min-height: calc(100vh - var(--hh));
    min-height: calc(100svh - var(--hh));
    padding-block: clamp(24px, 4vh, 56px);
  }
}
@media (max-width: 1099px) and (prefers-reduced-motion: no-preference) and (min-height: 620px) {
  html.motion:not([data-preview-still]) .champs-photo { aspect-ratio: auto; height: min(34svh, 340px); }
}

/* ---------- Home: ways in, set like a program's order of events ---------- */

.program { list-style: none; }
.program li { position: relative; border-bottom: 2px solid var(--rule-strong); }
.program li:first-child { border-top: 2px solid var(--rule-strong); }
.program-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding-block: clamp(18px, 2.4vw, 30px);
  text-decoration: none;
}
.program-row .who {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem);
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
}
.program-row .leader { display: none; }
.program-row .go {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 0.18s ease, color 0.18s ease;
}
@media (min-width: 900px) {
  .program-row { grid-template-columns: auto minmax(40px, 1fr) auto; align-items: end; gap: 18px; }
  .program-row .leader {
    display: block;
    margin-bottom: 21px;
    border-bottom: 2px solid var(--rule);
  }
}

/* ---------- Home: novice squad ---------- */

.novice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.novice-photo { margin: 0; overflow: hidden; border-radius: var(--r-md); border: 3px solid var(--rule-strong); aspect-ratio: 3 / 2; }
.novice-photo img { width: 100%; height: 100%; object-fit: cover; }
.novice-copy { display: grid; gap: 22px; justify-items: start; }
@media (min-width: 900px) {
  .novice-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* ---------- Home: sponsor band ---------- */

.sponsor-band { overflow: clip; padding-block: clamp(48px, 7vw, 104px) clamp(64px, 9vw, 128px); }
.banner-track {
  --q: var(--sp);
  display: flex;
  align-items: center;
  gap: 0.35em;
  width: max-content;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.4rem, 2rem + 6vw, 8.5rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--yellow);
  translate: calc((0.35 - var(--q)) * 40vw) 0;
  margin-bottom: clamp(32px, 5vw, 64px);
}
.banner-track .star { width: 0.4em; height: 0.4em; fill: var(--yellow); }
.sponsor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.sponsor-copy { display: grid; gap: 22px; justify-items: start; }
.sponsor-photo { margin: 0; justify-self: center; width: min(100%, 440px); overflow: hidden; border-radius: var(--r-md); border: 3px solid var(--yellow); aspect-ratio: 4 / 5; }
.sponsor-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .sponsor-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

/* ---------- Home: closing ---------- */

.closing-inner {
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
}
.closing-stars { display: flex; align-items: center; gap: 14px; color: var(--star); }
.closing-stars .star { width: clamp(44px, 6vw, 64px); height: auto; aspect-ratio: 1; }
.closing-stars .star.sm { width: clamp(28px, 3.6vw, 38px); }
.closing-inner h2 { font-size: clamp(2.8rem, 1.6rem + 4.4vw, 6rem); }
.closing-inner p { max-width: 30em; }

/* ---------- Inner pages ---------- */

.page-head { padding-block: clamp(16px, 3vw, 40px) clamp(32px, 5vw, 64px); }
.page-head-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(24px, 4vw, 56px);
  background-color: var(--surface);
  background-image: var(--paper);
  background-size: 320px 320px;
  border: 7px double var(--rule-strong);
  border-radius: var(--r-lg);
}
.page-head-copy { display: grid; gap: 20px; justify-items: start; min-width: 0; }
.page-title { font-size: clamp(3rem, 1.6rem + 5vw, 6rem); line-height: 0.9; }
.page-head-photo { position: relative; margin: 0; min-width: 0; }
.page-head-photo .frame { overflow: hidden; border: 3px solid var(--rule-strong); border-radius: var(--r-md); aspect-ratio: 16 / 10; }
.page-head-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-head-photo .rosette { position: absolute; width: clamp(84px, 10vw, 132px); right: 12px; top: -30px; transform-origin: 50% 8%; }
@media (min-width: 1000px) {
  .page-head-frame { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.squads { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; list-style: none; }
.squad {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(22px, 3vw, 36px);
  background: var(--surface);
  border: 2px solid var(--rule-strong);
  border-radius: var(--r-md);
}
.squad .tag {
  justify-self: start;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (min-width: 760px) {
  .squads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.steps { list-style: none; counter-reset: step; display: grid; gap: 0; border-top: 2px solid var(--rule-strong); }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding-block: 20px;
  border-bottom: 2px solid var(--rule-strong);
  font-size: 1.0625rem;
  line-height: 1.5;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
}
.steps h3 { margin-bottom: 6px; }

.ledger { width: 100%; border-collapse: collapse; }
.ledger th, .ledger td { text-align: left; padding: 18px 14px 18px 0; border-bottom: 2px solid var(--rule-strong); vertical-align: baseline; }
.ledger thead th {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom-width: 4px;
}
.ledger td { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.ledger .finish {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  text-transform: uppercase;
  line-height: 1;
}
.ledger .year {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1;
}
@media (max-width: 599px) {
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger tr { display: grid; gap: 6px; padding-block: 16px; border-bottom: 2px solid var(--rule-strong); }
  .ledger td { display: block; padding: 0; border: 0; }
  .ledger td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

.reasons { list-style: none; display: grid; gap: 0; border-top: 2px solid var(--rule-strong); }
.reasons li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding-block: 22px;
  border-bottom: 2px solid var(--rule-strong);
}
.reasons .star { width: 24px; height: 24px; margin-top: 4px; color: var(--ink); }
.reasons h3 { margin-bottom: 8px; }
.reasons p { font-size: 1.0625rem; line-height: 1.55; max-width: 34em; }

.dm-card {
  display: grid;
  gap: 20px;
  justify-items: start;
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--r-lg);
}
.handle {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1rem + 4vw, 4.2rem);
  line-height: 1;
  text-transform: lowercase;
  overflow-wrap: anywhere;
}

.prompts { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 2px solid var(--rule-strong); }
.prompts li { display: grid; gap: 6px; padding-block: 22px; border-bottom: 2px solid var(--rule-strong); }
.prompts p { font-size: 1.0625rem; line-height: 1.5; max-width: 34em; }
@media (min-width: 900px) {
  .prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
}

.cta-band { padding-block: clamp(56px, 8vw, 112px); }
.cta-band .wrap { display: grid; gap: 22px; justify-items: start; }
.cta-band h2 { font-size: clamp(2.8rem, 1.6rem + 4.6vw, 6rem); }
.cta-band p { max-width: 32em; font-size: 1.15rem; line-height: 1.5; }

/* ---------- Footer ---------- */

.site-footer { padding-block: clamp(48px, 6vw, 80px) 32px; border-top: 2px solid var(--rule-strong); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
.footer-brand { display: grid; gap: 12px; justify-items: start; }
.footer-brand .logo { width: 200px; }
.footer-h {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.footer-links { list-style: none; display: grid; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.0625rem; }
.footer-base { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 0.95rem; }
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Motion ----------
   Hidden start states exist only with motion on (html.motion, set before
   first paint by the head script) and are dropped in reduced motion and in
   the preview's still mode (html[data-preview-still]). Transitions arm a few
   frames after load (html.armed) so nothing fades out on arrival. */

@media (prefers-reduced-motion: no-preference) {
  html.motion:not([data-preview-still]) .cover-photo .rosette {
    animation: swing-in 1.9s cubic-bezier(0.22, 1.2, 0.36, 1) 0.15s both;
  }
  html.motion:not([data-preview-still]) .arch img {
    animation: settle 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  html.motion:not([data-preview-still]) .page-head-photo .rosette {
    animation: swing-in 1.7s cubic-bezier(0.22, 1.2, 0.36, 1) 0.1s both;
  }

  /* Every start state below still shows its content whole: the motion
     eases out from a visible default rather than revealing from nothing. */
  .program li::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--accent);
    transform-origin: 0 50%;
  }
  html.motion:not([data-preview-still]) .program:not(.in) li::after { scale: 0 1; }
  html.motion:not([data-preview-still]) .program:not(.in) .who { translate: -14px 0; }
  html.motion.armed:not([data-preview-still]) .program .who {
    transition: translate 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 110ms);
  }
  html.motion.armed:not([data-preview-still]) .program li::after {
    transition: scale 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) calc(var(--i, 0) * 110ms + 0.1s);
  }

  html.motion:not([data-preview-still]) .novice-photo:not(.in) img { clip-path: inset(16% 0 0 0); scale: 1.12; }
  html.motion.armed:not([data-preview-still]) .novice-photo img {
    transition: clip-path 1.1s cubic-bezier(0.2, 0.7, 0.1, 1), scale 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  html.motion:not([data-preview-still]) .cover-title .logo {
    animation: stamp 0.9s cubic-bezier(0.3, 1.4, 0.5, 1) 0.05s both;
  }
  html.motion:not([data-preview-still]) .closing-inner.in .closing-stars .star { animation: spin-star 1.4s cubic-bezier(0.3, 0.7, 0.2, 1) 0.1s both; }
  html.motion:not([data-preview-still]) .closing-inner.in .closing-stars .star.sm { animation-delay: 0.25s; }

  html.motion:not([data-preview-still]) .squads:not(.in) .squad { translate: 0 40px; rotate: -1.5deg; }
  html.motion.armed:not([data-preview-still]) .squads .squad {
    transition: translate 0.9s cubic-bezier(0.16, 1, 0.3, 1), rotate 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.motion.armed:not([data-preview-still]) .squads .squad:nth-child(2) { transition-delay: 0.12s; }

  html.motion:not([data-preview-still]) .steps:not(.in) li::before { scale: 0.55; }
  html.motion.armed:not([data-preview-still]) .steps li::before { transition: scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
  html.motion.armed:not([data-preview-still]) .steps li:nth-child(2)::before { transition-delay: 0.15s; }
  html.motion.armed:not([data-preview-still]) .steps li:nth-child(3)::before { transition-delay: 0.3s; }

  html.motion:not([data-preview-still]) .reasons:not(.in) .star { rotate: -180deg; scale: 0.5; }
  html.motion.armed:not([data-preview-still]) .reasons .star { transition: rotate 0.9s cubic-bezier(0.16, 1, 0.3, 1), scale 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
  html.motion.armed:not([data-preview-still]) .reasons li:nth-child(2) .star { transition-delay: 0.12s; }
  html.motion.armed:not([data-preview-still]) .reasons li:nth-child(3) .star { transition-delay: 0.24s; }

  html.motion:not([data-preview-still]) .ledger-wrap:not(.in) .finish { translate: 0 14px; }
  html.motion.armed:not([data-preview-still]) .ledger-wrap .finish { transition: translate 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s; }
}

@keyframes swing-in {
  0% { rotate: 38deg; translate: 0 -42%; }
  55% { rotate: -9deg; translate: 0 0; }
  75% { rotate: 4deg; }
  90% { rotate: -1.5deg; }
  100% { rotate: 0deg; translate: 0 0; }
}
@keyframes settle {
  0% { scale: 1.09; }
  100% { scale: 1; }
}
/* The logo is pressed onto the cover like a print block: a touch big, then
   flat. It is never faded, blurred or turned, so it reads whole and clean
   from the first frame. */
@keyframes stamp {
  0% { scale: 1.05; }
  100% { scale: 1; }
}
@keyframes spin-star {
  0% { rotate: -144deg; scale: 0.6; }
  70% { rotate: 8deg; scale: 1.05; }
  100% { rotate: 0deg; scale: 1; }
}

/* Reduced motion and the preview's still mode: every beat stands landed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reads] { --sp: 1 !important; }
}
html[data-preview-still] *,
html[data-preview-still] *::before,
html[data-preview-still] *::after { animation: none !important; transition: none !important; }
html[data-preview-still] [data-reads] { --sp: 1 !important; }