/* ==========================================================================
   ECC SPORTS — css/style.css
   FILE PART 1 OF 3  (Part 2 and Part 3 are pasted directly below this part)

   CONTENTS
   Part 1:  1 Fonts          2 Design tokens      3 Themes
            4 Reset          5 Typography         6 Layout
            7 Buttons, badges and tags            8 Media and placeholders
            9 Header and navigation               10 Home hero
            11 Inner page hero
   Part 2:  Cards and content components
   Part 3:  Forms, legal pages, footer, scroll reveal, reduced motion

   BREAKPOINTS (mobile-first, always written as min-width)
   640px  large phone        768px  tablet
   1024px laptop             1100px desktop navigation switches on
   1280px large desktop
   ========================================================================== */


/* 1. FONTS
   To change fonts see README section 5.14. */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap");


/* 2. DESIGN TOKENS
   EDIT COLORS, FONTS AND SIZES HERE. Everything on the site reads from this block. */
:root {
  /* Colors (README section 5.13) */
  --color-deep-blue: #0E1A2B;
  --color-blue: #2C3E56;
  --color-black: #070B12;
  --color-silver: #C3CAD4;
  --color-white: #FFFFFF;
  --color-muted: #9AA6B8;
  --color-border: #2E3F58;
  --color-live: #D64550;

  /* Derived colors: built from the colors above, normally leave alone */
  --color-blue-light: color-mix(in srgb, var(--color-blue) 75%, var(--color-white));
  --color-silver-light: color-mix(in srgb, var(--color-silver) 38%, var(--color-white));
  --color-silver-dark: color-mix(in srgb, var(--color-silver) 62%, var(--color-black));
  --color-ink: var(--color-deep-blue);
  --color-ink-muted: color-mix(in srgb, var(--color-blue) 82%, var(--color-white));

  /* Gradients */
  --gradient-silver: linear-gradient(180deg, var(--color-white) 0%, var(--color-silver) 52%, var(--color-silver-dark) 100%);
  --gradient-blue: linear-gradient(145deg, var(--color-blue) 0%, var(--color-deep-blue) 100%);
  --gradient-placeholder:
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--color-silver) 6%, transparent) 14px 15px),
    var(--gradient-blue);

  /* Fonts (README section 5.14) */
  --font-display: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;
  --font-script: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Text sizes */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --heading-1: clamp(3.25rem, 9vw, 6.5rem);
  --heading-2: clamp(2.5rem, 5.5vw, 4rem);
  --heading-3: clamp(1.75rem, 3.2vw, 2.25rem);
  --heading-4: 1.5rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-pad: clamp(4rem, 9vw, 7.5rem);

  /* Corners */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px color-mix(in srgb, var(--color-black) 30%, transparent);
  --shadow-md: 0 14px 34px -12px color-mix(in srgb, var(--color-black) 55%, transparent);
  --shadow-lg: 0 30px 70px -24px color-mix(in srgb, var(--color-black) 70%, transparent);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --transition-fast: 180ms var(--ease);
  --transition: 320ms var(--ease);
  --transition-slow: 700ms var(--ease);

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-height: 4.25rem;
  --z-header: 100;
}

@media (min-width: 768px) {
  :root {
    --header-height: 4.75rem;
  }
}


/* 3. THEMES
   Add one of these classes to a section (for example class="section theme-light").
   Components read the --surface-* values, so cards, buttons and lines adapt automatically. */
:root,
.theme-navy {
  color-scheme: dark;
  --surface-bg: var(--color-deep-blue);
  --surface-text: var(--color-white);
  --surface-muted: var(--color-muted);
  --surface-line: var(--color-border);
  --surface-card: color-mix(in srgb, var(--color-blue) 40%, var(--color-deep-blue));
  --surface-accent: var(--color-silver);
}

.theme-blue {
  color-scheme: dark;
  --surface-bg: var(--color-blue);
  --surface-text: var(--color-white);
  --surface-muted: var(--color-silver);
  --surface-line: color-mix(in srgb, var(--color-silver) 26%, transparent);
  --surface-card: color-mix(in srgb, var(--color-deep-blue) 45%, var(--color-blue));
  --surface-accent: var(--color-silver);
}

.theme-black {
  color-scheme: dark;
  --surface-bg: var(--color-black);
  --surface-text: var(--color-white);
  --surface-muted: var(--color-muted);
  --surface-line: var(--color-border);
  --surface-card: color-mix(in srgb, var(--color-deep-blue) 75%, var(--color-black));
  --surface-accent: var(--color-silver);
}

.theme-light {
  color-scheme: light;
  --surface-bg: var(--color-silver-light);
  --surface-text: var(--color-ink);
  --surface-muted: var(--color-ink-muted);
  --surface-line: color-mix(in srgb, var(--color-blue) 18%, var(--color-silver-light));
  --surface-card: var(--color-white);
  --surface-accent: var(--color-blue);
}

.theme-navy,
.theme-blue,
.theme-black,
.theme-light {
  background: var(--surface-bg);
  color: var(--surface-text);
}


/* 4. RESET AND BASE */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--surface-bg);
  color: var(--surface-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

main {
  flex: 1 0 auto;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[class],
ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

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

::selection {
  background: var(--color-silver);
  color: var(--color-deep-blue);
}


/* 5. TYPOGRAPHY */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 { font-size: var(--heading-1); }
h2 { font-size: var(--heading-2); }
h3 { font-size: var(--heading-3); }
h4 { font-size: var(--heading-4); }

h5, h6 {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.3;
}

p {
  text-wrap: pretty;
}

strong {
  font-weight: 600;
}

.text-script {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.text-muted {
  color: var(--surface-muted);
}


/* 6. LAYOUT */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

.section {
  padding-block: var(--section-pad);
}

.section--tight {
  padding-block: calc(var(--section-pad) * 0.6);
}

/* Section heading: eyebrow, big title, thin rule underneath */
.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--surface-line);
}

.section__title {
  font-size: var(--heading-2);
}

.section__lead {
  max-width: 56ch;
  color: var(--surface-muted);
  font-size: var(--text-lg);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--surface-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 2px;
  background: currentColor;
}

@media (min-width: 768px) {
  .section__head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

/* Grids */
.grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* News, events and other wide cards: 1 column, then 2, then 3 */
.grid--cards {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid--cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid--cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

/* Players, creators and team members: 2 columns on phones, then 3, then 4 */
.grid--people {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .grid--people {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .grid--people {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
}

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

.skip-link {
  position: absolute;
  top: -4rem;
  left: var(--space-4);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--color-silver);
  color: var(--color-deep-blue);
  font-weight: 600;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

.stack > * + * {
  margin-top: var(--stack-gap, var(--space-4));
}


/* 7. BUTTONS, BADGES AND TAGS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 3rem;
  padding: 0.85rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

.btn--primary {
  border-color: var(--surface-accent);
  background: var(--surface-accent);
  color: var(--surface-bg);
}

.btn--primary:hover {
  border-color: var(--surface-text);
  background: var(--surface-text);
  color: var(--surface-bg);
}

.btn--outline {
  border-color: var(--surface-accent);
  background: transparent;
  color: var(--surface-text);
}

.btn--outline:hover {
  background: var(--surface-accent);
  color: var(--surface-bg);
}

.btn--sm {
  min-height: 2.5rem;
  padding: 0.6rem 1.1rem;
}

.btn--block {
  width: 100%;
}

/* Text link with an arrow, for "Read more" and "View all" */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--surface-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.link-more::after {
  content: "\2192";
  content: "\2192" / "";
  transition: transform var(--transition-fast);
}

.link-more:hover::after {
  transform: translateX(4px);
}

/* Category label */
.tag {
  color: var(--surface-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Event status badges. They have solid backgrounds so they stay readable on top of images. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.badge--upcoming {
  background: var(--color-silver);
  color: var(--color-deep-blue);
}

.badge--live {
  background: var(--color-live);
  color: var(--color-white);
}

.badge--completed {
  background: color-mix(in srgb, var(--color-black) 72%, transparent);
  color: var(--color-silver);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.badge__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  animation: badge-pulse 1.8s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}


/* 8. MEDIA BOXES AND IMAGE PLACEHOLDERS
   Every image sits inside a .media box. The box has a branded background,
   so a missing or slow image never looks broken (render.js adds the placeholder text). */
.media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--gradient-placeholder);
}

.media--portrait {
  aspect-ratio: 4 / 5;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--color-silver) 30%, transparent);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 10vw, 4.5rem);
  letter-spacing: 0.12em;
  user-select: none;
}

.is-broken {
  display: none !important;
}


/* 9. HEADER AND NAVIGATION
   The header is fixed. On the home page (.site-header--overlay) it is see-through
   over the hero and turns solid after scrolling (.is-scrolled, set by main.js).
   NAV BREAKPOINT: desktop navigation switches on at 1100px (main.js uses the same number). */
.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  color: var(--color-white);
}

/* Background and blur live on ::before because backdrop-filter on the header itself
   would trap the full-screen mobile menu inside the header's box. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-deep-blue) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity var(--transition);
}

.site-header--overlay::before {
  opacity: 0;
}

.site-header--overlay::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
  height: calc(var(--header-height) + 2.5rem);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-black) 60%, transparent), transparent);
  pointer-events: none;
  transition: opacity var(--transition);
}

.site-header--overlay.is-scrolled::before {
  opacity: 1;
}

.site-header--overlay.is-scrolled::after {
  opacity: 0;
}

.site-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Wordmark. To use an image logo instead, see README section 5.2. */
.brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
}

.brand__wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  line-height: 1;
}

.brand__ecc {
  background: var(--gradient-silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-display);
  font-size: 2.25rem;
  letter-spacing: 0.06em;
}

.brand__sports {
  color: var(--color-silver);
  font-family: var(--font-script);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 600;
}

.brand__image {
  width: auto;
  height: 2.5rem;
}

/* Hamburger button */
.nav-toggle {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 3rem;
  height: 3rem;
  margin-right: -0.5rem;
  border-radius: var(--radius-sm);
}

.nav-toggle__bar {
  width: 1.625rem;
  height: 2px;
  background: var(--color-white);
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile menu: a full-screen panel that slides in from the right */
.site-nav {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-height) + 1rem) var(--gutter) 2rem;
  background: linear-gradient(160deg, var(--color-blue) 0%, var(--color-deep-blue) 72%);
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease), visibility 0s linear 0.45s;
}

.site-nav.is-open {
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.site-nav__item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.site-nav.is-open .site-nav__item {
  opacity: 1;
  transform: none;
}

.site-nav.is-open .site-nav__item:nth-child(1) { transition-delay: 0.10s; }
.site-nav.is-open .site-nav__item:nth-child(2) { transition-delay: 0.14s; }
.site-nav.is-open .site-nav__item:nth-child(3) { transition-delay: 0.18s; }
.site-nav.is-open .site-nav__item:nth-child(4) { transition-delay: 0.22s; }
.site-nav.is-open .site-nav__item:nth-child(5) { transition-delay: 0.26s; }
.site-nav.is-open .site-nav__item:nth-child(6) { transition-delay: 0.30s; }
.site-nav.is-open .site-nav__item:nth-child(7) { transition-delay: 0.34s; }

.site-nav__link {
  display: flex;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 9vw, 3rem);
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.site-nav__link[aria-current="page"] {
  color: var(--color-silver);
}

.site-nav__link[aria-current="page"]::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  margin-right: var(--space-4);
  background: currentColor;
}

@media (min-width: 1100px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    z-index: auto;
    display: block;
    padding: 0;
    background: none;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .site-nav__item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-nav__link {
    position: relative;
    padding: 0.5rem 0.85rem;
    border-bottom: 0;
    color: color-mix(in srgb, var(--color-white) 82%, transparent);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    transition: color var(--transition-fast);
  }

  .site-nav__link:hover,
  .site-nav__link[aria-current="page"] {
    color: var(--color-white);
  }

  /* Active page indicator: a silver line under the link */
  .site-nav__link::after {
    content: "";
    position: absolute;
    right: 0.85rem;
    bottom: 0.1rem;
    left: 0.85rem;
    height: 2px;
    background: var(--gradient-silver);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
  }

  .site-nav__link:hover::after,
  .site-nav__link[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .site-nav__link[aria-current="page"]::before {
    content: none;
  }
}


/* 10. HOME HERO
   Background photos come from heroImages in js/data.js (main.js builds the slides).
   The ECC / Sports lockup is tuned with two numbers on .hero__title:
   --ecc-size (how big ECC is) and --hero-overlap (how far Sports overlaps it). */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--color-black);
  color: var(--color-white);
}

.hero__slides,
.hero__overlay {
  position: absolute;
  inset: 0;
}

.hero__slides {
  z-index: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background: var(--gradient-placeholder);
  opacity: 0;
  transition: opacity 1.6s ease;
}

.hero__slide.is-active {
  opacity: 1;
}

/* Slow zoom on the visible photo. It resets only after the fade-out finishes. */
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transform: scale(1.1);
  transition: transform 0s linear 1.6s;
}

.hero__slide.is-active img {
  transform: scale(1);
  transition: transform 10s linear;
}

/* Dark overlay keeps text readable and fades into the navy section below */
.hero__overlay {
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-black) 55%, transparent) 0%,
      color-mix(in srgb, var(--color-deep-blue) 38%, transparent) 38%,
      color-mix(in srgb, var(--color-deep-blue) 82%, transparent) 78%,
      var(--color-deep-blue) 100%
    ),
    radial-gradient(
      120% 90% at 20% 40%,
      color-mix(in srgb, var(--color-blue) 38%, transparent),
      transparent 70%
    );
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--header-height) + var(--space-6));
  padding-bottom: 6.5rem;
  text-align: center;
}

.hero__eyebrow {
  margin-bottom: var(--space-5);
  color: var(--color-silver);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.hero__title {
  --ecc-size: clamp(8rem, min(52vw, 48vh), 30rem);
  --hero-overlap: 0.16;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}

.hero__ecc {
  background: var(--gradient-silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-display);
  font-size: var(--ecc-size);
  letter-spacing: 0.04em;
  line-height: 0.82;
  filter: drop-shadow(0 12px 40px color-mix(in srgb, var(--color-black) 55%, transparent));
}

.hero__sports {
  margin-top: calc(var(--ecc-size) * var(--hero-overlap) * -1);
  text-transform: none;
  letter-spacing: 0;
  margin-right: 4%;
  color: var(--color-white);
  font-family: var(--font-script);
  font-size: calc(var(--ecc-size) * 0.34);
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  text-shadow:
    0 2px 0 color-mix(in srgb, var(--color-deep-blue) 75%, transparent),
    0 10px 34px color-mix(in srgb, var(--color-black) 65%, transparent);
}

.hero__tagline {
  max-width: 36rem;
  margin-top: var(--space-6);
  color: var(--color-silver-light);
  font-size: var(--text-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Slide selector dots (main.js hides them when there is only one image) */
.hero__dots {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  z-index: 3;
  display: flex;
  gap: var(--space-1);
  transform: translateX(-50%);
}

.hero__dot {
  position: relative;
  width: 2.25rem;
  height: 2.75rem;
}

.hero__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 3px;
  background: color-mix(in srgb, var(--color-white) 35%, transparent);
  transform: translateY(-50%);
  transition: background-color var(--transition-fast);
}

.hero__dot:hover::before {
  background: color-mix(in srgb, var(--color-white) 65%, transparent);
}

.hero__dot.is-active::before {
  background: var(--color-white);
}

/* "Scroll" cue, shown from tablet size up */
.hero__scroll {
  position: absolute;
  bottom: 1.75rem;
  left: var(--gutter);
  z-index: 3;
  display: none;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-silver);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.hero__scroll::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: scroll-cue 2.4s ease-in-out infinite;
}

@keyframes scroll-cue {
  0%, 100% { transform: scaleX(0.35); }
  50% { transform: scaleX(1); }
}

@media (min-width: 768px) {
  .hero__scroll {
    display: inline-flex;
  }

  .hero__content {
    padding-bottom: 7rem;
  }
}


/* 11. INNER PAGE HERO
   The title banner at the top of every page except the home page. */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-height) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--color-border);
  background: var(--gradient-blue);
  color: var(--color-white);
}

/* Large outlined ECC watermark */
.page-hero::after {
  content: "ECC";
  content: "ECC" / "";
  position: absolute;
  right: -2%;
  bottom: -32%;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(12rem, 40vw, 34rem);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--color-silver) 20%, transparent);
}

.page-hero > .container {
  position: relative;
  z-index: 1;
}

.page-hero__title {
  margin-top: var(--space-4);
  font-size: clamp(3.5rem, 11vw, 7rem);
}

.page-hero__lead {
  max-width: 52ch;
  margin-top: var(--space-4);
  color: var(--color-silver);
  font-size: var(--text-lg);
}


/* END OF PART 1 — paste Part 2 directly below this line */
/* ==========================================================================
   FILE PART 2 OF 3  (paste directly below Part 1)

   CONTENTS
   12 Cards and stretched links       13 Meta line, filters, empty states
   14 News cards                      15 Article page
   16 Prose (long text)               17 Notices
   18 Events                          19 Group headings (events and rosters)
   20 People cards (players, creators, team)
   21 Social links and cards          22 About intro

   Every component reads the --surface-* values from the nearest theme class,
   so it looks right on navy, blue, black and light sections without changes.
   ========================================================================== */


/* 12. CARDS AND STRETCHED LINKS
   .card is the shared shell. .card--link adds the hover lift for clickable cards.
   .stretched-link makes a headline link cover its whole card, so the card is
   one big touch target but screen readers still hear a single link. */
.card {
  --card-radius: var(--radius-md);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--surface-line);
  border-radius: var(--card-radius);
  background: var(--surface-card);
  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.card:hover {
  border-color: color-mix(in srgb, var(--surface-accent) 60%, var(--surface-line));
}

.card--link:hover {
  border-color: var(--surface-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.card--link .media img {
  transition: transform var(--transition-slow);
}

.card--link:hover .media img {
  transform: scale(1.05);
}

.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--card-radius, 0);
}

.stretched-link:focus-visible {
  outline: none;
}

.stretched-link:focus-visible::after {
  outline: 3px solid var(--surface-accent);
  outline-offset: -3px;
}


/* 13. META LINE, FILTERS, EMPTY STATES
   RENDER: <div class="meta"><span class="tag">Category</span><time class="meta__date">3 Oct 2026</time></div> */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--space-1);
  color: var(--surface-muted);
  font-size: var(--text-xs);
}

.meta > * + * {
  position: relative;
  padding-left: 1.25rem;
}

.meta > * + *::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.5rem;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.meta__date {
  letter-spacing: 0.06em;
}

/* Category filter buttons on the News page.
   RENDER: <div class="filter-bar" role="group" aria-label="..."><button class="filter-btn" aria-pressed="true">All</button>... */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.filter-btn {
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-pill);
  color: var(--surface-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.filter-btn:hover {
  border-color: var(--surface-accent);
  color: var(--surface-text);
}

.filter-btn[aria-pressed="true"] {
  border-color: var(--surface-accent);
  background: var(--surface-accent);
  color: var(--surface-bg);
}

/* Shown when a list has no items (for example no events yet) */
.empty-state {
  padding: var(--space-8) var(--space-5);
  border: 1px dashed var(--surface-line);
  border-radius: var(--radius-md);
  color: var(--surface-muted);
  text-align: center;
}


/* 14. NEWS CARDS
   RENDER (standard card):
   <article class="card card--link news-card">
     <div class="media"><img ...></div>
     <div class="news-card__body">
       <div class="meta">...</div>
       <h3 class="news-card__title"><a class="stretched-link" href="article.html?id=...">Headline</a></h3>
       <p class="news-card__excerpt">Excerpt</p>
       <span class="link-more">Read more</span>
     </div>
   </article>
   Modifiers: news-card--lead and news-card--compact (home page). */
.news-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.news-card__title {
  font-size: 1.65rem;
  line-height: 1.1;
  transition: color var(--transition-fast);
}

.news-card:hover .news-card__title {
  color: var(--surface-accent);
}

.news-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: var(--surface-muted);
  font-size: var(--text-sm);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.news-card .link-more {
  margin-top: auto;
  padding-top: var(--space-2);
}

/* Home page: one large lead story beside a stack of compact stories.
   RENDER: <div class="news-split"><article class="... news-card--lead">...</article>
           <div class="news-stack"><article class="... news-card--compact">...</article>...</div></div> */
.news-split {
  display: grid;
  gap: var(--space-5);
}

.news-split > :only-child {
  grid-column: 1 / -1;
}

.news-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.news-card--lead .news-card__title {
  font-size: var(--heading-3);
}

.news-card--compact {
  flex-direction: row;
}

.news-card--compact .media {
  flex: 0 0 38%;
  aspect-ratio: auto;
  min-height: 8.5rem;
}

.news-card--compact .media img {
  position: absolute;
  inset: 0;
}

.news-card--compact .news-card__body {
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
}

.news-card--compact .news-card__title {
  font-size: 1.35rem;
}

.news-card--compact .news-card__excerpt {
  display: none;
}

.news-card--compact .link-more {
  display: none;
}

@media (min-width: 640px) {
  .news-card--compact .news-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

@media (min-width: 1024px) {
  .news-split {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-6);
  }

  .news-stack {
    gap: var(--space-6);
  }

  .news-stack > * {
    flex: 1 1 0;
  }

  .news-card--lead .media {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 18rem;
  }

  .news-card--lead .media img {
    position: absolute;
    inset: 0;
  }

  .news-card--lead .news-card__body {
    flex: 0 0 auto;
  }
}

/* News page: the featured article.
   RENDER: <article class="card card--link featured-article">
             <div class="media">...</div>
             <div class="featured-article__body"> meta, <h2 class="featured-article__title"><a class="stretched-link">,
               <p class="featured-article__excerpt">, <span class="link-more"> </div></article> */
.featured-article {
  --card-radius: var(--radius-lg);
}

.featured-article__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
}

.featured-article__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  transition: color var(--transition-fast);
}

.featured-article:hover .featured-article__title {
  color: var(--surface-accent);
}

.featured-article__excerpt {
  color: var(--surface-muted);
  font-size: var(--text-lg);
}

@media (min-width: 768px) {
  .featured-article {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .featured-article .media {
    aspect-ratio: auto;
    min-height: 22rem;
  }

  .featured-article .media img {
    position: absolute;
    inset: 0;
  }

  .featured-article__body {
    justify-content: center;
    padding: var(--space-7);
  }
}


/* 15. ARTICLE PAGE (article.html)
   RENDER: <header class="page-hero"> back link, meta, h1.page-hero__title--article </header>
           <div class="article theme-light">
             <div class="container"><figure class="media article__figure">...</figure></div>
             <div class="container container--narrow"><div class="prose prose--lead article__content">...</div></div>
           </div>
           then a related-articles section using .news-card in .grid--cards */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  color: var(--color-silver);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.back-link::before {
  content: "\2190";
  content: "\2190" / "";
  transition: transform var(--transition-fast);
}

.back-link:hover::before {
  transform: translateX(-4px);
}

.page-hero .meta {
  margin-top: var(--space-4);
  color: var(--color-silver);
}

.page-hero__title--article {
  max-width: 24ch;
  font-size: clamp(2.5rem, 7vw, 4.75rem);
}

/* The article image overlaps the bottom of the title banner */
.article__figure {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--space-7) * -1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.article__content {
  margin-inline: auto;
  padding-block: var(--space-7) var(--section-pad);
}

@media (min-width: 1024px) {
  .article__figure {
    aspect-ratio: 2 / 1;
  }
}


/* 16. PROSE (long text)
   Used for the article body, the About text and the legal pages.
   RENDER: <div class="prose"> <p>, <h2>, <h3>, <ul>, <ol>, <blockquote> </div>
   Add .prose--lead to make the first paragraph larger. */
.prose {
  max-width: 68ch;
  color: color-mix(in srgb, var(--surface-text) 90%, var(--surface-bg));
}

.prose > * + * {
  margin-top: 1.25em;
}

.prose h2,
.prose h3 {
  margin-top: 2em;
  color: var(--surface-text);
}

.prose h2 {
  font-size: var(--heading-3);
}

.prose h3 {
  font-size: var(--heading-4);
}

.prose a {
  color: var(--surface-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.prose a:hover {
  color: var(--surface-text);
}

.prose ul,
.prose ol {
  padding-left: 1.4em;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose blockquote {
  padding-left: var(--space-5);
  border-left: 3px solid var(--surface-accent);
  color: var(--surface-text);
  font-family: var(--font-script);
  font-size: var(--text-xl);
  font-style: italic;
}

.prose--lead > p:first-child {
  color: var(--surface-text);
  font-size: var(--text-xl);
  line-height: 1.5;
}


/* 17. NOTICES (editorial list, not cards)
   RENDER: <div class="notice-list">
     <article class="notice">
       <div class="notice__meta"><time class="notice__date">3 Oct 2026</time><span class="tag">Recruitment</span></div>
       <div class="notice__main"><h3 class="notice__title">Title</h3><p class="notice__text">Text</p></div>
       <a class="link-more notice__link" href="...">Details</a>   (only when a link is set)
     </article> ... </div> */
.notice-list {
  border-bottom: 1px solid var(--surface-line);
}

.notice {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-top: 1px solid var(--surface-line);
}

.notice__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.notice__date {
  color: var(--surface-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.notice__title {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
}

.notice__text {
  max-width: 60ch;
  margin-top: var(--space-2);
  color: var(--surface-muted);
}

.notice__link {
  min-height: 2.75rem;
}

@media (min-width: 768px) {
  .notice {
    grid-template-columns: 12rem minmax(0, 1fr) auto;
    column-gap: var(--space-6);
    align-items: start;
    padding-block: var(--space-6);
  }

  .notice__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .notice__link {
    align-self: center;
  }
}


/* 18. EVENTS
   RENDER:
   <article class="card event-card [event-card--row] [is-live | is-completed]">
     <div class="media">
       <img ...>
       <span class="badge badge--upcoming event-card__badge">Upcoming</span>   (live: badge--live with <span class="badge__dot">)
       <div class="date-chip" aria-hidden="true"><span class="date-chip__day">20</span><span class="date-chip__month">Oct</span></div>
     </div>
     <div class="event-card__body">
       <div class="meta"><span class="tag">Game</span><span>Tournament name</span></div>
       <h3 class="event-card__title">Event name</h3>
       <dl class="event-card__details"><div><dt>Date</dt><dd>...</dd></div> (Time, Location) </dl>
       <p class="event-card__desc">Description</p>
       <div class="event-card__actions"><a class="btn btn--outline btn--sm" href="...">Register</a></div>
     </div>
   </article>
   Home page uses the vertical card in .grid--cards. The Events page uses
   .event-card--row cards inside .event-list. */
.event-card__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 1;
}

.date-chip {
  position: absolute;
  bottom: 0;
  left: var(--space-4);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.75rem;
  padding: 0.5rem 0.75rem 0.6rem;
  border-top: 3px solid var(--color-silver);
  background: color-mix(in srgb, var(--color-deep-blue) 92%, transparent);
  color: var(--color-white);
  line-height: 1;
  text-align: center;
}

.date-chip__day {
  font-family: var(--font-display);
  font-size: 2.25rem;
  letter-spacing: 0.02em;
}

.date-chip__month {
  margin-top: 0.2rem;
  color: var(--color-silver);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.event-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.event-card__title {
  font-size: var(--heading-3);
}

.event-card__details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-3);
  border-block: 1px solid var(--surface-line);
}

.event-card__details dt {
  color: var(--surface-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.event-card__details dd {
  font-weight: 600;
}

.event-card__desc {
  display: -webkit-box;
  overflow: hidden;
  color: var(--surface-muted);
  font-size: var(--text-sm);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.event-card__actions {
  margin-top: auto;
  padding-top: var(--space-3);
}

.event-card.is-live {
  border-color: var(--color-live);
}

.event-card.is-completed .media img {
  filter: grayscale(0.8);
  opacity: 0.8;
}

.event-list {
  display: grid;
  gap: var(--space-6);
}

.event-card--row .event-card__desc {
  display: block;
  overflow: visible;
}

@media (min-width: 768px) {
  .event-card--row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .event-card--row .media {
    aspect-ratio: auto;
    min-height: 18rem;
  }

  .event-card--row .media img {
    position: absolute;
    inset: 0;
  }

  .event-card--row .event-card__body {
    justify-content: center;
    padding: var(--space-6);
  }

  .event-card--row .event-card__actions {
    margin-top: var(--space-2);
  }
}


/* 19. GROUP HEADINGS (events by status, roster by game)
   RENDER: <section class="group" aria-labelledby="...">
             <header class="group__head"><h2 class="group__title" id="...">Brawl Stars</h2><span class="group__count">5 players</span></header>
             ...content... </section> */
.group + .group {
  margin-top: var(--space-9);
}

.group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--surface-line);
}

.group__title {
  font-size: var(--heading-3);
}

.group__count {
  color: var(--surface-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* 20. PEOPLE CARDS (players, creators, team members)
   RENDER: <ul class="grid grid--people"><li>
     <article class="card person-card">
       <div class="media media--portrait">
         <img ...>
         <span class="person-card__tag">TAG</span>      (only when a player tag is set)
       </div>
       <div class="person-card__body">
         <h3 class="person-card__name">Player Name</h3>
         <p class="person-card__role">Role</p>
         <p class="person-card__desc">Description</p>   (creators and team members)
         <ul class="social-list social-list--sm">...</ul>
       </div>
     </article></li>... </ul> */
.grid--people > li {
  display: flex;
}

.grid--people > li > .card {
  flex: 1;
  min-width: 0;
}

.person-card__tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  max-width: calc(100% - var(--space-5));
  padding: 0.3rem 0.6rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-deep-blue) 88%, transparent);
  color: var(--color-silver);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.person-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-4);
  border-top: 2px solid var(--surface-accent);
}

.person-card__name {
  font-size: clamp(1.5rem, 4.5vw, 1.875rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.person-card__role {
  color: var(--surface-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.person-card__desc {
  color: var(--surface-muted);
  font-size: var(--text-sm);
}

.person-card .social-list {
  margin-top: auto;
  padding-top: var(--space-3);
}

@media (min-width: 768px) {
  .person-card__body {
    padding: var(--space-5);
  }
}


/* 21. SOCIAL LINKS AND CARDS
   Icons are inline SVGs that render.js builds from the socialLinks data.
   RENDER (small round icons, used in the footer and on people cards):
   <ul class="social-list [social-list--sm]"><li>
     <a class="social-link" href="..." target="_blank" rel="noopener noreferrer" aria-label="Instagram"><svg aria-hidden="true">...</svg></a>
   </li></ul>
   RENDER (About page cards):
   <div class="social-grid"><a class="card card--link social-card" href="..." target="_blank" rel="noopener noreferrer">
     <span class="social-card__icon"><svg aria-hidden="true">...</svg></span>
     <span class="social-card__name">Instagram</span><span class="link-more">Follow</span></a>... </div> */
.social-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.social-link {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--surface-line);
  border-radius: 50%;
  color: var(--surface-text);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.social-link:hover {
  border-color: var(--surface-accent);
  background: var(--surface-accent);
  color: var(--surface-bg);
}

.social-link svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: currentColor;
}

.social-list--sm .social-link {
  width: 2.5rem;
  height: 2.5rem;
}

.social-list--sm .social-link svg {
  width: 1.1rem;
  height: 1.1rem;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .social-grid {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-5);
  }
}

.social-card {
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
}

.social-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-2);
  border: 1px solid var(--surface-line);
  border-radius: 50%;
  color: var(--surface-accent);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.social-card:hover .social-card__icon {
  background: var(--surface-accent);
  color: var(--surface-bg);
}

.social-card__icon svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
}

.social-card__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.social-card .link-more {
  margin-top: auto;
  padding-top: var(--space-2);
}


/* 22. ABOUT INTRO
   RENDER: <div class="about-intro">
             <div class="about-intro__aside"><span class="eyebrow">...</span><h2 class="section__title">...</h2></div>
             <div class="prose prose--lead">...paragraphs...</div></div> */
.about-intro {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .about-intro {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-9);
    align-items: start;
  }

  .about-intro__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }
}


/* END OF PART 2 — paste Part 3 directly below this line */
/* ==========================================================================
   FILE PART 3 OF 3  (paste directly below Part 2)

   CONTENTS
   23 Contact page layout        24 Forms
   25 Legal pages                26 Footer
   27 Scroll reveal and entrance animation
   28 No-JavaScript notice       29 Reduced motion
   ========================================================================== */


/* 23. CONTACT PAGE LAYOUT
   The email address is the main way to get in touch; the form sits beside it.
   RENDER: <div class="contact-layout">
     <div class="contact-info">
       <span class="eyebrow">Official contact</span>
       <h2 class="section__title">Get in touch</h2>
       <p class="section__lead">...</p>
       <a class="contact-email" href="mailto:...">email</a>
       <div class="contact-social"><h3 class="contact-social__title">Follow us</h3><ul class="social-list">...</ul></div>
     </div>
     <div class="card contact-form-card">...form (section 24)...</div>
   </div> */
.contact-layout {
  display: grid;
  gap: var(--space-7);
}

.contact-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.contact-email {
  display: inline-block;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid var(--surface-accent);
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3.25rem);
  letter-spacing: 0.03em;
  line-height: 1.1;
  overflow-wrap: anywhere;
  transition: color var(--transition-fast);
}

.contact-email:hover {
  color: var(--surface-accent);
}

.contact-social {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.contact-social__title {
  color: var(--surface-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.3;
}

.contact-form-card {
  padding: var(--space-5);
}

@media (min-width: 768px) {
  .contact-form-card {
    padding: var(--space-7);
  }
}

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


/* 24. FORMS
   The contact form has no backend. main.js builds a mailto: link from the fields
   and opens the visitor's email app (see README section 5.9).
   RENDER: <form class="form" id="contact-form" novalidate>
     <div class="form__row">
       <div class="form__field">
         <label class="form__label" for="cf-name">Name</label>
         <input class="form__input" id="cf-name" name="name" type="text" autocomplete="name" required aria-describedby="cf-name-error">
         <p class="form__error" id="cf-name-error"></p>
       </div>
       ...email field...
     </div>
     ...subject field, then message field using <textarea class="form__input form__textarea">...
     <p class="form__note">This form opens your email app...</p>
     <button class="btn btn--primary" type="submit">Open in email app</button>
     <p class="form__status" role="status" aria-live="polite"></p>
   </form>
   main.js sets aria-invalid="true" on a bad field and writes the message into its .form__error. */
.form {
  --form-error: color-mix(in srgb, var(--color-live) 55%, var(--color-white));
  display: grid;
  gap: var(--space-5);
}

.theme-light .form {
  --form-error: color-mix(in srgb, var(--color-live) 80%, var(--color-black));
}

.form__row {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* font-size stays at 1rem on purpose: smaller text makes iPhones zoom in when a field is tapped */
.form__input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-bg) 55%, transparent);
  color: var(--surface-text);
  font-size: var(--text-base);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.form__input::placeholder {
  color: var(--surface-muted);
  opacity: 1;
}

.form__input:hover {
  border-color: color-mix(in srgb, var(--surface-accent) 55%, var(--surface-line));
}

.form__input:focus {
  border-color: var(--surface-accent);
}

.form__input[aria-invalid="true"] {
  border-color: var(--form-error);
}

.form__textarea {
  min-height: 9rem;
  resize: vertical;
}

.form__error {
  color: var(--form-error);
  font-size: var(--text-sm);
}

.form__error:empty {
  display: none;
}

.form__note {
  color: var(--surface-muted);
  font-size: var(--text-sm);
}

.form__status {
  min-height: 1.5em;
  color: var(--surface-accent);
  font-weight: 600;
}

.form__status.is-error {
  color: var(--form-error);
}

@media (min-width: 640px) {
  .form .btn {
    justify-self: start;
  }
}


/* 25. LEGAL PAGES (terms.html, privacy.html, copyright.html)
   The text is plain HTML inside .prose (README section 5.15).
   RENDER: <section class="section theme-light legal"><div class="container container--narrow">
     <p class="legal__updated">Last updated: 3 October 2026</p>
     <div class="prose legal__content"> <h2>, <p>, <ul> ... </div>
     <nav class="legal-nav" aria-label="Legal pages">
       <a class="legal-nav__link" href="terms.html" aria-current="page">Terms of Service</a> ...
     </nav>
   </div></section> */
.legal__updated {
  margin-bottom: var(--space-5);
  color: var(--surface-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.legal__content > h2:first-child {
  margin-top: 0;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--surface-line);
}

.legal-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--surface-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color var(--transition-fast);
}

.legal-nav__link:hover,
.legal-nav__link[aria-current="page"] {
  color: var(--surface-text);
}

.legal-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.4em;
}


/* 26. FOOTER
   Built by main.js from js/data.js. Use class="site-footer theme-black" on the <footer>.
   RENDER: <footer class="site-footer theme-black"><div class="container">
     <div class="site-footer__grid">
       <div class="site-footer__brand">
         <a class="brand" href="index.html">...wordmark...</a>
         <p class="site-footer__about">Short description</p>
         <ul class="social-list">...</ul>
       </div>
       <nav class="site-footer__col" aria-label="Footer navigation">
         <h2 class="footer-title">Explore</h2>
         <ul class="footer-list"><li><a class="footer-link" href="...">Home</a></li>...</ul>
       </nav>
       <div class="site-footer__col">
         <h2 class="footer-title">Contact</h2>
         <a class="footer-link footer-link--email" href="mailto:...">email</a>
       </div>
     </div>
     <div class="site-footer__bottom">
       <p class="site-footer__copy">© 2026 ECC Sports. All rights reserved.</p>
       <nav aria-label="Legal"><ul class="footer-legal"><li><a class="footer-link" href="terms.html">Terms of Service</a></li>...</ul></nav>
     </div>
   </div></footer> */
.site-footer {
  position: relative;
  flex-shrink: 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--surface-line);
}

/* Thin silver line fading in from both sides along the top edge */
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-silver), transparent);
  opacity: 0.55;
}

.site-footer__grid {
  display: grid;
  gap: var(--space-7);
  padding-bottom: var(--space-8);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.site-footer .brand__ecc {
  font-size: 3rem;
}

.site-footer .brand__sports {
  font-size: 1.35rem;
}

.site-footer__about {
  max-width: 38ch;
  color: var(--surface-muted);
  font-size: var(--text-sm);
}

.footer-title {
  margin-bottom: var(--space-3);
  color: var(--surface-text);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.3;
  text-transform: uppercase;
}

.footer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
}

.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--surface-muted);
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

.footer-link:hover,
.footer-link[aria-current="page"] {
  color: var(--surface-text);
}

.footer-link--email {
  color: var(--surface-text);
  font-size: var(--text-base);
  font-weight: 600;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--surface-line);
  text-underline-offset: 0.25em;
}

.footer-link--email:hover {
  color: var(--surface-accent);
  text-decoration-color: currentColor;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: 1px solid var(--surface-line);
  color: var(--surface-muted);
  font-size: var(--text-xs);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-5);
}

.footer-legal .footer-link {
  font-size: var(--text-xs);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
  }

  .site-footer__brand {
    grid-column: auto;
  }

  .footer-list {
    grid-template-columns: 1fr;
  }
}


/* 27. SCROLL REVEAL AND ENTRANCE ANIMATION
   Add class="reveal" to anything that should fade up when it scrolls into view.
   main.js adds .is-visible and sets --reveal-delay for staggering.
   Content is hidden only when the "js" class is on <html>. Every page's <head> contains
   <script>document.documentElement.classList.add('js')</script>, so without JavaScript
   nothing is ever hidden. Uses an animation plus the separate "translate" property,
   so card hover effects (which use transform) are never affected. */
@keyframes reveal-up {
  from {
    opacity: 0;
    translate: 0 1.5rem;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.js .reveal {
  opacity: 0;
}

.js .reveal.is-visible {
  animation: reveal-up 0.8s var(--ease) both;
  animation-delay: var(--reveal-delay, 0ms);
}

/* Home hero: the ECC lockup eases in one line at a time on page load (no JavaScript needed) */
.hero__content > * {
  animation: reveal-up 1s var(--ease) both;
}

.hero__content > :nth-child(1) { animation-delay: 0.2s; }
.hero__content > :nth-child(2) { animation-delay: 0.35s; }
.hero__content > :nth-child(3) { animation-delay: 0.5s; }
.hero__content > :nth-child(4) { animation-delay: 0.65s; }


/* 28. NO-JAVASCRIPT NOTICE
   RENDER (inside <body>, before <main>): <noscript><p class="noscript-notice">Please turn on JavaScript to view this website.</p></noscript>
   It contains no email address on purpose, so the email exists only in js/data.js. */
.noscript-notice {
  padding: calc(var(--header-height) + 2rem) var(--gutter) 2rem;
  background: var(--color-blue);
  color: var(--color-white);
  text-align: center;
}


/* 29. REDUCED MOTION
   For visitors who set "reduce motion" in their device settings: no fades, slides,
   zooms, pulses or hover movement. Content simply appears. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
  }

  .hero__slide img,
  .hero__slide.is-active img {
    transform: none;
  }

  .btn:hover,
  .card--link:hover,
  .card--link:hover .media img {
    transform: none;
  }
}


/* END OF css/style.css */