/* Union Raiffeisenbank Leibnitz Volleyball. One stylesheet for every page.
   Colours from their logo badge: orange #EC6707 with black lettering. */

@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colour: one accent (their orange), one neutral ramp, black and white */
  --orange: #ec6707;        /* logo badge: fills with black text, large headline words */
  --orange-ink: #a84700;    /* the same orange, dark enough for links on the page (5.55:1) */
  --ink: #141414;
  --ink-2: #2b2724;
  --muted: #5c5650;
  --stone: #8a847c;
  --line: #d9d3ca;
  --line-2: #efebe5;
  --bg: #faf8f5;
  --white: #ffffff;

  /* type: Barlow Condensed for display, system sans for reading; ratio 1.333 */
  --f-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-label: 0.875rem;  /* 14 */
  --fs-0: 1.0625rem;     /* 17 */
  --fs-1: 1.375rem;      /* 22.7 */
  --fs-2: 1.875rem;      /* 30 */
  --fs-3: 2.5rem;        /* 40 */
  --fs-4: 3.3125rem;     /* 53 */
  --fs-5: 4.4375rem;     /* 71 */

  /* space: 4px grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: 20px;
  --section: 48px;
  --radius: 4px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) {
  :root {
    --section: 80px;
    --fs-0: 1.125rem;  /* 18 */
    --fs-1: 1.5rem;    /* 24 */
    --fs-2: 2rem;      /* 32 */
    --fs-3: 2.6875rem; /* 43 */
    --fs-4: 3.5625rem; /* 57 */
    --fs-5: 4.75rem;   /* 76 */
  }
}
@media (min-width: 1120px) { :root { --gutter: 48px; } }
@media (min-width: 1440px) { :root { --gutter: 64px; } }
@media (min-width: 1920px) { :root { --gutter: 96px; } }

/* ------------------------------------------------------------------ base */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-0);
  line-height: 1.6;
  font-weight: 400;
}

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

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
  letter-spacing: 0.005em;
}
h1, h2 { text-transform: uppercase; }
h2 { font-size: var(--fs-3); }
h3 { font-size: var(--fs-2); }
h4 { font-size: var(--fs-1); }

p { margin: 0; max-width: 68ch; }
p + p { margin-top: var(--s4); }

a { color: var(--orange-ink); text-underline-offset: 0.18em; text-decoration-thickness: 2px; }

strong { font-weight: 600; }

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

.nowrap { white-space: nowrap; }

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

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 10;
  background: var(--ink); color: var(--white); padding: var(--s3) var(--s4);
}
.skip:focus { top: var(--s4); }

.wrap { padding-inline: var(--gutter); }

.label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  line-height: 1.4;
}

/* ------------------------------------------------------------------ the net: their signature
   One word of each big heading stands on a volleyball net: a black tape line over an orange diamond mesh. */

.net {
  color: var(--orange);
  padding-bottom: 0.2em;
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    repeating-linear-gradient(45deg, var(--orange) 0 1.5px, transparent 1.5px 6px),
    repeating-linear-gradient(-45deg, var(--orange) 0 1.5px, transparent 1.5px 6px);
  background-size: 100% 3px, 100% 0.16em, 100% 0.16em;
  background-position: 0 calc(100% - 0.16em), 0 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* in body-sized headings the orange word uses the darker orange so it keeps 4.5:1 */
h3 .net, h4 .net { color: var(--orange-ink); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s3) var(--s5);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--f-body);
  font-size: var(--fs-0);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.btn svg { width: 20px; height: 20px; flex: none; }
/* call buttons never move: on hover and focus only the colour changes, at once */
.btn-primary { background: var(--orange); color: var(--ink); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--ink); color: var(--white); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--ink); color: var(--white); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover, .btn-dark:focus-visible { background: var(--white); color: var(--ink); }

/* ------------------------------------------------------------------ "Mehr dazu" links: the ball over the net */

.more {
  position: relative;
  display: inline-block;
  padding-top: 0.7em;
  padding-bottom: 0.3em;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    repeating-linear-gradient(45deg, var(--orange) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, var(--orange) 0 1px, transparent 1px 5px);
  background-size: 100% 2px, 100% 6px, 100% 6px;
  background-position: 0 calc(100% - 6px), 0 100%, 0 100%;
  background-repeat: no-repeat;
}
.more::after {
  content: " →";
}
/* the ball: a pseudo-element as wide as the link minus the ball, so translateX(100%) carries it across */
.more::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 0.55em);
  height: 0.55em;
  background: radial-gradient(circle at 0.275em 50%, var(--orange) 0.24em, var(--ink) 0.25em, var(--ink) 0.275em, transparent 0.285em);
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------------ header */

.site-header {
  background: var(--white);
  border-bottom: 2px solid var(--ink);
}
.bar {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "brand call" "nav nav";
  align-items: center;
  justify-content: space-between;
  column-gap: var(--s4);
  row-gap: var(--s2);
  padding-block: var(--s3) var(--s2);
}
.brand { grid-area: brand; display: block; }
.brand img { height: clamp(40px, 5vw, 58px); width: auto; }
.call-top { grid-area: call; padding-inline: var(--s4); }
.call-top .num { display: none; }
.main-nav { grid-area: nav; }
.main-nav ul {
  display: flex;
  gap: var(--s3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a {
  display: inline-block;
  padding-block: var(--s2) var(--s3);
  font-family: var(--f-display);
  font-size: 1.125rem;  /* 18 */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-size: 0 3px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  min-height: 44px;
}
.main-nav a[aria-current="page"] { background-size: 100% 3px; }
.main-nav a:hover, .main-nav a:focus-visible { background-size: 100% 3px; }

@media (min-width: 480px) {
  .call-top .num { display: inline; }
  .call-top .word { display: none; }
  .main-nav ul { gap: var(--s5); }
}
@media (min-width: 1024px) {
  .bar {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav call";
    column-gap: var(--s6);
    padding-block: var(--s4);
  }
  .main-nav ul { justify-content: flex-end; gap: var(--s6); }
  .main-nav a { font-size: 1.375rem; padding-block: var(--s3); }
}

/* ------------------------------------------------------------------ sections */

.section { padding-block: var(--section); border-top: 2px solid var(--ink); }
.section-head { margin-bottom: var(--s6); }
.section-head p { margin-top: var(--s4); font-size: var(--fs-1); line-height: 1.45; color: var(--ink-2); }
.section-head .label { color: var(--orange-ink); margin-bottom: var(--s2); }
@media (min-width: 1024px) { .section-head { margin-bottom: var(--s7); } }

/* ------------------------------------------------------------------ hero (home) */

.hero { padding-block: var(--s6) var(--section); }
.hero h1 {
  font-size: clamp(3.25rem, 16.5vw, 6rem);
  line-height: 1.02;
  letter-spacing: 0;
}
.hero-grid {
  display: grid;
  grid-template-areas: "copy" "photo" "trust";
  gap: var(--s6);
  margin-top: var(--s5);
}
.hero .hero-copy { grid-area: copy; }
.hero .collage { grid-area: photo; }
.hero .trust { grid-area: trust; margin: 0; }
.hero .lead { font-size: var(--fs-1); line-height: 1.4; font-weight: 600; }
.hero .lead span { display: block; font-weight: 400; color: var(--ink-2); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.cta-row .btn { flex: 1 1 auto; }
.hero-photo { margin: 0; }
.hero-photo .frame { aspect-ratio: 1440 / 761; overflow: hidden; border-radius: var(--radius); background: var(--line-2); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo figcaption, .photo-caption { margin-top: var(--s2); font-size: var(--fs-label); color: var(--muted); }

@media (min-width: 768px) {
  .hero h1 { font-size: min(8.4vw, 10rem); }
  .cta-row .btn { flex: 0 0 auto; }
}
@media (min-width: 1024px) {
  .hero { padding-top: var(--s7); }
  .hero-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "copy photo" "trust photo";
    grid-template-rows: auto 1fr;
    column-gap: var(--s7);
    row-gap: var(--s6);
    align-items: start;
    margin-top: var(--s6);
  }
}

/* trust line: the real facts, set like a scoreboard row */
.trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: var(--s6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}
.trust li {
  padding: var(--s3) var(--s3) var(--s3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink-2);
}
.trust b {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-2);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .trust { grid-template-columns: repeat(4, auto); column-gap: var(--s5); }
  .trust li { border-bottom: 0; }
}
@media (min-width: 1024px) { .hero .trust { align-self: end; } }

/* ------------------------------------------------------------------ the collage (hero): every team, side by side.
   The box takes its height from its width, so nothing shifts while the photos load. */

.collage { margin: 0; }
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas: "a b" "a c" "d e";
  gap: var(--s2);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.tiles img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); background: var(--line-2); }
.tiles .t1 { grid-area: a; object-position: 50% 45%; }
.tiles .t2 { grid-area: b; object-position: 50% 40%; }
.tiles .t3 { grid-area: c; object-position: 50% 35%; }
.tiles .t4 { grid-area: d; object-position: 40% 40%; }
.tiles .t5 { grid-area: e; object-position: 50% 30%; }
.collage figcaption { margin-top: var(--s2); font-size: var(--fs-label); color: var(--muted); }
@media (min-width: 768px) {
  .tiles {
    grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-areas: "a b c" "a d e";
    aspect-ratio: 16 / 9;
  }
}
@media (min-width: 1024px) { .tiles { aspect-ratio: 3 / 2; } }
@media (min-width: 1440px) { .tiles { aspect-ratio: 2 / 1; } }

/* ------------------------------------------------------------------ ways in (home) */

.paths {
  display: grid;
  gap: var(--s6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.path a {
  display: grid;
  gap: var(--s3);
  color: var(--ink);
  text-decoration: none;
}
.path .shot { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--line-2); }
.path .shot img { width: 100%; height: 100%; object-fit: cover; }
.path .age { color: var(--orange-ink); }
.path h3 { font-size: var(--fs-3); text-transform: uppercase; }
.path p { color: var(--ink-2); }
.path .when { font-weight: 600; color: var(--ink); }
.path .more { justify-self: start; }

@media (min-width: 768px) {
  .paths { grid-template-columns: 1fr 1fr; column-gap: var(--s6); row-gap: var(--s7); }
  .path .shot { aspect-ratio: 16 / 10; }
}
@media (min-width: 1440px) {
  .paths { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s5); }
  .path .shot { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------------ leagues (home): ÖVV and STVV, set like a table */

.leagues { display: grid; gap: var(--s7); }
.league { display: grid; gap: var(--s3); align-content: start; }
.league-photo { margin: 0 0 var(--s2); }
.league-photo img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--radius); background: var(--line-2); }
.league-photo figcaption { margin-top: var(--s2); font-size: var(--fs-label); color: var(--muted); }
.league .fed { color: var(--orange-ink); }
.league h3 { font-size: var(--fs-3); text-transform: uppercase; }
.league .home { font-weight: 600; }
.league .more { justify-self: start; margin-top: var(--s2); }
.ladder { margin: var(--s2) 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.ladder li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--s4);
  align-items: baseline;
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}
.ladder .lg { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-1); line-height: 1.2; }
.ladder .tm { font-weight: 600; }
.ladder .tm small { display: block; font-size: 1rem; font-weight: 400; color: var(--muted); }
@media (min-width: 1024px) {
  .leagues { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); }
}

/* ------------------------------------------------------------------ photo strips (carousels) */

/* every photo keeps its own shape: one height per strip, the width follows the photo (set by its width and
   height attributes, so nothing shifts while it loads) */
.strip { position: relative; --strip-h: clamp(220px, 62vw, 300px); }
.strip-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-bottom: var(--s4);
  margin: 0;
  list-style: none;
  padding-left: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--stone) transparent;
}
.strip-track:focus-visible { outline-offset: 6px; }
/* phones: each slide is 82% of the screen wide and shows the whole photo, so the next one peeks in */
.slide { margin: 0; scroll-snap-align: start; width: min(82vw, 26rem); }
.slide img { width: 100%; height: auto; border-radius: var(--radius); background: var(--line-2); }
.slide figcaption { margin-top: var(--s2); font-size: var(--fs-0); line-height: 1.45; color: var(--ink-2); }
/* wider screens: one height per strip, every photo keeps its own shape */
@media (min-width: 768px) {
  .slide { width: auto; display: grid; grid-template-columns: min-content; }
  .slide img { height: var(--strip-h); width: auto; max-width: none; }
  .slide figcaption { min-width: 14rem; }
}
.slide figcaption b { display: block; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); }
.strip-nav { display: flex; gap: var(--s2); margin-top: var(--s3); }
.strip-nav button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}
.strip-nav button svg { width: 22px; height: 22px; }
.strip-nav button:hover, .strip-nav button:focus-visible { background: var(--ink); color: var(--white); }
.strip-nav button:disabled { opacity: 0.35; cursor: default; background: var(--white); color: var(--ink); }
.strip-nav[hidden] { display: none; }

@media (min-width: 768px) { .strip { --strip-h: 320px; } }
@media (min-width: 1024px) { .strip { --strip-h: 360px; } .strip-track { gap: var(--s5); } }
@media (min-width: 1920px) { .strip { --strip-h: 420px; } }

/* ------------------------------------------------------------------ partners */

.partners {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.partners li { display: grid; place-items: center; height: 104px; padding: var(--s3) var(--s4); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.partners img { max-height: 60px; width: auto; max-width: 100%; object-fit: contain; }
.partners .square img { max-height: 80px; }
.partner-call { margin-top: var(--s6); display: grid; gap: var(--s4); justify-items: start; }
@media (min-width: 600px) { .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .partners { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1920px) { .partners { grid-template-columns: repeat(10, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ inner pages */

.page-head { padding-block: var(--s6) var(--section); }
.page-head h1 { font-size: clamp(2.75rem, 12.5vw, 5.5rem); line-height: 1.05; }
.page-head .lead { margin-top: var(--s4); font-size: var(--fs-1); line-height: 1.45; max-width: 46ch; }
.page-head .cta-row { margin-top: var(--s5); }
.page-head-grid { display: grid; gap: var(--s6); }
@media (min-width: 768px) { .page-head h1 { font-size: min(8vw, 7rem); } }
@media (min-width: 1024px) {
  .page-head-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--s7); align-items: end; }
}

.page-head .label { color: var(--orange-ink); margin-bottom: var(--s2); }
.page-head .trust { grid-template-columns: 1fr 1fr; }
.page-head-short .lead { max-width: 52ch; }
.hero-photo .frame-head { aspect-ratio: auto; }
/* the net hangs below the headline's last line: keep the next line clear of it */
.page-title { padding-bottom: 0.22em; }
/* big uppercase headlines have no descenders: the net sits closer under the letters */
.page-title .net { padding-bottom: 0.04em; }
.frame-head img { height: auto; object-fit: fill; }
.after-board { margin-top: var(--s5); color: var(--ink-2); }

/* steps: three numbered moves, numbers like jersey numbers */
.steps { display: grid; gap: var(--s5); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s4); align-items: start; padding-top: var(--s4); border-top: 2px solid var(--ink); }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  grid-row: span 2;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-5);
  line-height: 0.9;
  color: var(--orange);
  min-width: 0.7em;
}
.steps h3 { font-size: var(--fs-2); text-transform: uppercase; }
.steps p { color: var(--ink-2); }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s6); } }

/* training board */
.board { display: grid; gap: var(--s6); }
.group { border-top: 2px solid var(--ink); padding-top: var(--s4); }
.group h3 { font-size: var(--fs-2); text-transform: uppercase; }
.group .focus { color: var(--ink-2); margin-top: var(--s1); }
.times { margin: var(--s3) 0 0; padding: 0; list-style: none; }
.times li {
  display: grid;
  grid-template-columns: 3.25rem 7.5rem 1fr;
  column-gap: var(--s3);
  align-items: baseline;
  padding-block: var(--s2);
  border-bottom: 1px solid var(--line);
}
.times .d { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-1); text-transform: uppercase; }
.times .t { font-weight: 600; font-variant-numeric: tabular-nums; }
.times .h { color: var(--ink-2); }
@media (min-width: 768px) { .board { grid-template-columns: 1fr 1fr; column-gap: var(--s6); } }
@media (min-width: 1280px) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1920px) { .board { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* text beside its photos */
/* minmax(0, …): a photo strip must never widen its column past the screen */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.split > * { min-width: 0; }
.split .text p + p { margin-top: var(--s4); }
.split .text .facts { margin-top: var(--s5); }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s7); align-items: start; }
  .split .strip { --strip-h: 280px; }
}
@media (min-width: 1440px) { .split .strip { --strip-h: 300px; } }
@media (min-width: 1920px) { .split .strip { --strip-h: 360px; } }

/* fact list: label and value, used for fees and details */
.facts { margin: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.facts div { display: grid; grid-template-columns: minmax(7rem, 2fr) 3fr; column-gap: var(--s4); padding-block: var(--s3); border-bottom: 1px solid var(--line); }
.facts dt { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; padding-top: 0.2em; }
.facts dd { margin: 0; }

/* tables */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-variant-numeric: tabular-nums; }
caption { text-align: left; font-size: var(--fs-label); color: var(--muted); padding-bottom: var(--s3); }
th, td { text-align: left; padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 2px solid var(--ink); }
tbody th { font-weight: 600; }

/* halls */
.halls { display: grid; gap: var(--s5); margin: 0; padding: 0; list-style: none; }
.halls li { border-top: 2px solid var(--ink); padding-top: var(--s4); }
.halls h3 { font-size: var(--fs-2); text-transform: uppercase; }
.halls p { color: var(--ink-2); margin-top: var(--s1); }
@media (min-width: 768px) { .halls { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s6); } }

/* teams */
.squad { display: grid; gap: var(--s6); margin: 0; padding: 0; list-style: none; }
.squad > li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s4); border-top: 2px solid var(--ink); padding-top: var(--s4); }
.squad .no {
  grid-row: span 4;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-5);
  line-height: 0.9;
  color: var(--orange);
  min-width: 0.8em;
}
.squad > li > :not(.no) { grid-column: 2; }
.squad h3 { font-size: var(--fs-2); text-transform: uppercase; }
.squad .league { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--orange-ink); margin-top: var(--s1); }
.squad p { margin-top: var(--s2); color: var(--ink-2); }
@media (min-width: 1024px) { .squad { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s7); } }
.squad.squad-one { grid-template-columns: 1fr; margin-top: var(--s5); }

.kids { margin-top: var(--s6); padding-top: var(--s4); border-top: 2px solid var(--ink); }
.kids h3 { font-size: var(--fs-2); text-transform: uppercase; margin-bottom: var(--s2); }
.kids .facts { margin-top: var(--s4); }

.mixed-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.mixed-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4); padding-block: var(--s3); border-bottom: 1px solid var(--line); }
.mixed-list b { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-1); }
.mixed-list span { color: var(--ink-2); }

/* milestones */
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline > li { display: grid; gap: var(--s3); padding-block: var(--s5); border-top: 2px solid var(--ink); }
.timeline .year { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-4); line-height: 1; color: var(--orange); }
.timeline h3 { font-size: var(--fs-2); text-transform: uppercase; }
.timeline p { color: var(--ink-2); }
.timeline .entry p { margin-top: var(--s2); }
.timeline .pic { margin: 0; max-width: 26rem; }
.timeline .pic img { border-radius: var(--radius); background: var(--line-2); }
@media (min-width: 768px) {
  .timeline > li { grid-template-columns: 7rem minmax(0, 1fr); column-gap: var(--s6); }
  .timeline .pic { grid-column: 2; }
}
@media (min-width: 1024px) {
  .timeline > li { grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 20rem); }
  .timeline .entry { grid-column: 2; }
  .timeline .pic { grid-column: 3; grid-row: 1; }
  .timeline .year { grid-row: 1; }
}
@media (min-width: 1440px) { .timeline > li { grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 26rem); } }

.people { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.people li { border-top: 2px solid var(--ink); padding-top: var(--s3); }
.people b { display: block; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-1); }
.people span { color: var(--ink-2); }
@media (min-width: 768px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); } }
@media (min-width: 1280px) { .people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cols { display: grid; gap: var(--s6); }
@media (min-width: 1024px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); } }
@media (min-width: 1440px) { .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cols h3 { font-size: var(--fs-2); text-transform: uppercase; margin-bottom: var(--s2); }
.cols p { color: var(--ink-2); }

/* ------------------------------------------------------------------ contact form */

.contact-grid { display: grid; gap: var(--s7); }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s8); align-items: start; } }

.form { display: grid; gap: var(--s5); max-width: 44rem; margin-top: var(--s6); }
@media (min-width: 1024px) { .contact-grid .contact-card { margin-top: var(--s4); } }
.field { display: grid; gap: var(--s2); }
.field label, .field legend { font-weight: 600; font-size: var(--fs-0); padding: 0; }
.field .hint { font-size: var(--fs-label); color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s3) var(--s4);
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}
.field textarea { min-height: 10rem; resize: vertical; }
.field select {
  appearance: none;
  padding-right: var(--s7);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(-45deg, transparent 50%, var(--ink) 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: #b3261e; }
.field .error { color: #b3261e; font-weight: 600; font-size: var(--fs-0); }
.field .error:empty { display: none; }
.pair { display: grid; gap: var(--s5); }
@media (min-width: 600px) { .pair { grid-template-columns: 1fr 1fr; } }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .note { font-size: var(--fs-label); color: var(--muted); max-width: 60ch; }
.form-status { padding: var(--s4); border: 2px solid var(--ink); border-radius: var(--radius); background: var(--white); }
.form-status:empty { display: none; }
.form-status.ok { border-color: var(--ink); border-left: 8px solid var(--orange); }
.form-status.fail { border-color: #b3261e; border-left: 8px solid #b3261e; }
.form-status b { display: block; font-family: var(--f-display); font-size: var(--fs-1); text-transform: uppercase; }
.form button[type="submit"] { justify-self: start; }

.contact-card { border-top: 2px solid var(--ink); padding-top: var(--s4); display: grid; gap: var(--s4); }
.contact-card h2 { font-size: var(--fs-2); }
.contact-card .who b { display: block; font-family: var(--f-display); font-size: var(--fs-1); font-weight: 600; }
.contact-card .who span { color: var(--ink-2); }
.contact-card .ways { display: grid; gap: var(--s3); }
.contact-card .ways .btn { justify-content: flex-start; }

/* ------------------------------------------------------------------ call strip and footer */

.call-strip { background: var(--orange); color: var(--ink); border-top: 2px solid var(--ink); }
.call-strip .wrap { display: grid; gap: var(--s4); padding-block: var(--s7); }
.call-strip h2 { font-size: var(--fs-3); }
.call-strip p { font-size: var(--fs-1); line-height: 1.4; }
.call-strip a.tel { color: var(--ink); font-weight: 600; }
.call-strip .cta-row { margin-top: 0; }
@media (min-width: 1024px) {
  .call-strip .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s7); }
}

.site-footer { background: var(--ink); color: #c9c2b8; font-size: var(--fs-label); line-height: 1.6; }
.site-footer .wrap { padding-block: var(--s7) var(--s6); }
.foot-cols { display: grid; gap: var(--s5); grid-template-columns: 1fr 1fr; }
.foot-cols h2 {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--s2);
}
.foot-cols p, .foot-cols ul { margin: 0; padding: 0; list-style: none; font-size: var(--fs-0); }
.site-footer a { color: var(--white); text-decoration-color: var(--orange); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--orange); }
.foot-cols li a, .foot-cols p a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-cols p { line-height: 1.75; }
.legal { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--ink-2); display: grid; gap: var(--s1); }
.legal p { max-width: none; }
@media (min-width: 768px) { .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* the banner for the website service: light, so it reads as an advert and not as part of the club's footer */
.maker { background: var(--bg); color: var(--ink); border-top: 6px solid var(--ink); }
.site-footer .maker .wrap { display: grid; gap: var(--s5); justify-items: start; padding-block: var(--s7); }
.maker .label { color: var(--muted); }
.maker h2 { font-size: var(--fs-4); margin-top: var(--s1); }
.maker p { font-size: var(--fs-0); color: var(--ink-2); }
.maker .maker-text h2 + p { margin-top: var(--s3); }
.maker .maker-text p + p { margin-top: var(--s3); }
.maker .maker-pitch {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-2);
  line-height: 1.2;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.site-footer .maker a:not(.btn) { color: var(--ink); text-decoration-color: var(--orange); text-decoration-thickness: 3px; }
.site-footer .maker a:not(.btn):hover, .site-footer .maker a:not(.btn):focus-visible { color: var(--orange-ink); }
.site-footer .maker .btn-dark { color: var(--white); }
.site-footer .maker .btn-dark:hover, .site-footer .maker .btn-dark:focus-visible { background: var(--white); color: var(--ink); }
.maker .maker-by { font-size: var(--fs-label); color: var(--muted); }
@media (min-width: 1024px) {
  .site-footer .maker .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s7); }
  .maker .maker-by { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ motion
   Everything moves only for people who have not asked for less motion. Without this block every effect shows
   its end state. Hover effects need a pointer that can hover, each with a keyboard-focus twin. */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* load 1: the net under the headline word draws in from the left */
  .page-title .net {
    animation: net-draw 800ms var(--ease-out) 150ms both;
  }
  @keyframes net-draw {
    from { background-size: 0 3px, 0 0.16em, 0 0.16em; }
    to { background-size: 100% 3px, 100% 0.16em, 100% 0.16em; }
  }

  /* load 2 (home): the collage opens tile by tile, top down, like the cards of a scoreboard */
  .tiles img { animation: tile-in 700ms var(--ease-out) both; }
  .tiles .t1 { animation-delay: 200ms; }
  .tiles .t2 { animation-delay: 320ms; }
  .tiles .t3 { animation-delay: 440ms; }
  .tiles .t4 { animation-delay: 560ms; }
  .tiles .t5 { animation-delay: 680ms; }
  @keyframes tile-in {
    from { clip-path: inset(0 0 100% 0); transform: translateY(-8px); }
    to { clip-path: inset(0 0 0 0); transform: none; }
  }

  .main-nav a { transition: background-size 150ms var(--ease-out); }
  .strip-nav button { transition: background-color 150ms ease, color 150ms ease; }
  .path .shot img { transition: transform 200ms var(--ease-out); }
  .more::before { transition: opacity 150ms ease; }

  @media (hover: hover) and (pointer: fine) {
    .main-nav a:hover { transition-duration: 200ms; }
    .path a:hover .shot img { transform: scale(1.03); transition-duration: 400ms; }
    .path a:hover .more::before, .more:hover::before { animation: ball-arc 700ms linear both; }
  }
  /* the keyboard twin of the hover */
  .path a:focus-visible .more::before, .more:focus-visible::before { animation: ball-arc 700ms linear both; }
  .path a:focus-visible .shot img { transform: scale(1.03); transition-duration: 400ms; }

  /* the ball rises over the net and lands on the far side: a parabola in five steps */
  @keyframes ball-arc {
    0% { opacity: 0; transform: translate(0, 0.3em); }
    12% { opacity: 1; }
    25% { transform: translate(25%, 0); }
    50% { transform: translate(50%, -0.16em); }
    75% { transform: translate(75%, 0); }
    100% { opacity: 1; transform: translate(100%, 0.3em); }
  }
}