/* =========================================================
   FIMMA — theme.css
   Design tokens + custom block styles (faithful rebuild)
   ========================================================= */

:root {
  /* Brand / Olympic palette */
  --fimma-black: #000000;
  --fimma-white: #ffffff;
  --fimma-ink: #0a0a0a;
  --fimma-paper: #f7f7f7;
  --fimma-muted: #6b7280;
  --fimma-line: #e5e7eb;

  /* Official Olympic-ring colours, matching the original site */
  --fimma-blue: #0085C7;
  --fimma-blue-bright: #0066FF;
  --fimma-yellow: #F4C300;
  --fimma-yellow-bright: #FFB800;
  --fimma-green: #009F3D;
  --fimma-green-bright: #00A651;
  --fimma-red: #DF0024;
  --fimma-red-bright: #FF0000;

  --fimma-purple: #7B4DB8;
  --fimma-purple-dark: #5B2D8E;
  --fimma-lime: #C5E636;
  --fimma-green-dark: #1a5c3a;

  /* Type — Instrument Sans for display headings, DM Sans for body/UI */
  --fimma-font: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --fimma-font-display: 'Heading Now', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;

  /* Layout */
  --fimma-container: 1280px;
  --fimma-gutter: clamp(1rem, 4vw, 2rem);
  --fimma-header-h: 112px;

  /* Motion */
  --fimma-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- base ----- */
body {
  font-family: var(--fimma-font);
  color: var(--fimma-ink);
  background: var(--fimma-white);
  -webkit-font-smoothing: antialiased;
  /* Heading Now (display font) ships only an upright Medium face. Disabling font
     synthesis makes the existing `font-style: italic` heading rules render UPRIGHT
     (no faux slant) and prevents faux-bold on 600/700 titles. Real italic/bold
     faces (DM Sans, Instrument Sans) are unaffected — they have their own files. */
  font-synthesis: none;
}

.fimma-container {
  width: 100%;
  max-width: var(--fimma-container);
  margin-inline: auto;
  padding-inline: var(--fimma-gutter);
}

.fimma-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fimma-muted);
}

/* =========================================================
   RESPONSIVE SAFETY — never scroll horizontally, at any width
   ---------------------------------------------------------
   `overflow-x: clip` (NOT hidden) stops the page ever scrolling sideways
   while leaving the sticky scroll-reveal hero working — `clip` does not
   create a scroll container the way `hidden`/`auto` do. Full-bleed
   (alignfull) bands are exactly viewport-wide, so this never clips the design;
   it only catches accidental sub-pixel/large-text overflow.
   ========================================================= */
html {
  overflow-x: clip;
}

/* The theme is authored for the border-box model (every .fimma-container,
   header inner, panel and form input pairs `width:100%`/`max-width` with its
   own padding). Without this, that padding is added OUTSIDE the width, so
   `.fimma-container` overflows the viewport by up to 2×gutter on any screen
   narrower than ~1344px — the main cause of the sideways scroll. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Long words / URLs break instead of pushing the layout wide. */
body {
  overflow-wrap: break-word;
}

/* Media can never exceed its container. */
img,
svg,
video,
iframe {
  max-width: 100%;
}

/* Grid & flex children default to `min-width: auto`, which refuses to shrink
   below their content and forces a track wider than the viewport (big display
   numbers/letters, form inputs, long titles). Let them shrink — no effect at
   widths where the content already fits, so the design is unchanged. */
.fimma-news__featured>*,
.fimma-news__compact>*,
.fimma-news-row,
.fimma-news-row>div,
.fimma-energy__inner>*,
.fimma-stats__grid>*,
.fimma-values__grid>*,
.fimma-commitments__grid>*,
.fimma-board__grid>*,
.fimma-contact__grid>*,
.fimma-form__row>*,
.fimma-intro-facts__grid>*,
.fimma-athletedetail__grid>*,
.fimma-newslist__grid>*,
.fimma-games__grid>*,
.fimma-athletes__grid>*,
.fimma-media__grid>*,
.fimma-mgrid__grid>*,
.fimma-footer__cols>*,
.fimma-pagenav__inner>*,
.fimma-program,
.fimma-program__panel,
.fimma-timeline__card {
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================
   HEADER / NAV  (faithful to the original — dropdowns, hide-on-hero)
   ========================================================= */
.fimma-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 300;
  /* above the hero (200) once it slides in */
  height: var(--fimma-header-h);
  display: flex;
  align-items: center;
  background: var(--fimma-white);
  color: var(--fimma-ink);
  transition: transform 0.5s var(--fimma-ease),
    opacity 0.5s var(--fimma-ease),
    box-shadow 0.35s var(--fimma-ease);
}

/* Hidden over the hero's first screen; slides in on scroll (set by JS) */
.fimma-header.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.fimma-header.is-solid {
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
}

.fimma-header__inner {
  width: 100%;
  max-width: var(--fimma-container);
  margin-inline: auto;
  padding-inline: var(--fimma-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Logo — the official FIMMA emblem, referenced relative to this stylesheet */
.fimma-header__logo {
  flex-shrink: 0;
  display: block;
}

.fimma-header__logo-img {
  display: block;
  width: 80px;
  height: 80px;
  background: url("../images/fimma-logo.svg") center / contain no-repeat;
}

@media (min-width: 1024px) {
  .fimma-header__logo-img {
    width: 88px;
    height: 88px;
  }
}

/* ----- desktop nav ----- */
.fimma-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2rem);
}

.fimma-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.fimma-nav__link,
.fimma-nav__sub a {
  font-family: var(--fimma-font);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.fimma-nav__link {
  font-size: 15px;
  letter-spacing: 0.12em;
  color: rgba(0, 0, 0, 0.6);
  transition: color 0.2s ease;
}

.fimma-nav__item:hover .fimma-nav__link,
.fimma-nav__link:hover,
.fimma-nav__link.is-active {
  color: var(--fimma-ink);
}

.fimma-nav__caret {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.fimma-nav__item:hover>.fimma-nav__caret {
  color: var(--fimma-ink);
  transform: rotate(180deg);
}

/* ----- dropdown submenus ----- */
.fimma-nav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  min-width: 260px;
  list-style: none;
  padding: 0;
  background: var(--fimma-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 10;
}

/* Reveal a submenu on hover of its OWN parent item only (direct child, so
   hovering a top-level item does not also open its grandchild flyouts). */
.fimma-nav__item--has-sub:hover>.fimma-nav__sub,
.fimma-nav__subitem--has-sub:hover>.fimma-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Second-level+ items: keep the link + caret on one row so the caret can
   sit at the right edge and the nested flyout can anchor to the item. */
.fimma-nav__subitem {
  position: relative;
  display: flex;
  align-items: center;
}

.fimma-nav__subitem>a {
  flex: 1;
}

/* A submenu nested inside another submenu flies out to the side, not below.
   No horizontal gap, so moving the pointer into it doesn't drop :hover. */
.fimma-nav__sub .fimma-nav__sub {
  top: -1px;
  left: 100%;
  margin-top: 0;
  margin-left: 0;
}

/* Nested caret points to the flyout (to the right) instead of down. */
.fimma-nav__subitem--has-sub>.fimma-nav__caret {
  padding-right: 1rem;
  transform: rotate(-90deg);
}

.fimma-nav__subitem--has-sub:hover>.fimma-nav__caret {
  color: var(--fimma-ink);
}

.fimma-nav__sub a {
  display: block;
  padding: 0.75rem 1.25rem;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.6);
  transition: color 0.2s ease, background 0.2s ease;
}

.fimma-nav__sub a:hover,
.fimma-nav__sub a.is-active {
  color: var(--fimma-ink);
  background: rgba(0, 0, 0, 0.03);
}

/* ----- mobile toggle ----- */
.fimma-nav__toggle {
  display: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0.5rem;
  margin-right: -0.5rem;
}

.fimma-nav__toggle-close {
  display: none;
}

.fimma-header.is-nav-open .fimma-nav__toggle-open {
  display: none;
}

.fimma-header.is-nav-open .fimma-nav__toggle-close {
  display: block;
}

@media (max-width: 1023px) {
  .fimma-nav {
    position: fixed;
    inset: var(--fimma-header-h) 0 auto 0;
    background: var(--fimma-white);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--fimma-ease);
  }

  .fimma-header.is-nav-open .fimma-nav {
    max-height: calc(100vh - var(--fimma-header-h));
    overflow-y: auto;
  }

  .fimma-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0;
  }

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

  .fimma-nav__link {
    flex: 1;
    padding: 0.85rem 0;
    font-size: 0.875rem;
  }

  .fimma-nav__caret {
    padding: 0.85rem 0.5rem;
  }

  .fimma-nav__item:hover .fimma-nav__caret {
    transform: none;
  }

  .fimma-nav__item.is-open .fimma-nav__caret {
    transform: rotate(180deg);
  }

  /* mobile = accordion: submenus open via .is-open, not hover */
  .fimma-nav__sub {
    position: static;
    width: 100%;
    margin: 0;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.02);
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s var(--fimma-ease);
  }

  .fimma-nav__item.is-open>.fimma-nav__sub,
  .fimma-nav__subitem.is-open>.fimma-nav__sub {
    max-height: 60vh;
  }

  .fimma-nav__sub a {
    padding-left: 0.5rem;
  }

  /* Nested submenus stack (accordion) rather than fly out on mobile.
     flex-wrap lets the nested <ul> drop to a full-width row below the link. */
  .fimma-nav__subitem {
    flex-wrap: wrap;
  }

  .fimma-nav__subitem--has-sub>.fimma-nav__caret {
    padding: 0.85rem 0.5rem;
    transform: none;
  }

  .fimma-nav__subitem.is-open>.fimma-nav__caret {
    transform: rotate(180deg);
  }

  /* Indent the third level so the hierarchy stays legible. */
  .fimma-nav__sub .fimma-nav__sub a {
    padding-left: 1.5rem;
  }

  .fimma-nav__toggle {
    display: inline-flex;
  }
}

/* =========================================================
   HERO — Olympic-stripe scroll-reveal (faithful to original)

   A PNG mask (white + grey leaning spindles, with thin slanted transparent
   windows) sits over the media. Five colour tints (exact clip-path windows)
   colour the media inside those windows. On scroll the whole overlay (tints +
   mask + side panels) fades via --fimma-hero-overlay (1 → 0), revealing the
   full media underneath, which also scales up slightly. Then the page scrolls
   on. The section is a 200vh scroll track with a sticky 100vh viewport.
   ========================================================= */
.fimma-hero {
  --fimma-hero-overlay: 1;
  position: relative;
  height: 200vh;
  background: var(--fimma-white);
}

.fimma-hero__viewport {
  position: sticky;
  top: 0;
  z-index: 200;
  /* above the navbar — clean full-screen hero */
  /* full viewport height so the opening video fills the whole screen */
  height: 100vh;
  min-height: 520px;
  overflow: hidden;
  background: var(--fimma-white);
}

/* Background video (or image) — never fades; scales up a touch as the overlay
   clears, matching the original. */
.fimma-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.fimma-hero__media video,
.fimma-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1 + 0.05 * (1 - var(--fimma-hero-overlay))));
}

/* Everything that fades away on scroll */
.fimma-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: var(--fimma-hero-overlay);
  pointer-events: none;
}

/* The five Olympic colour windows — exact clip-paths from the original.
   They tint the media that shows through the mask's transparent stripes. */
.fimma-hero__tint {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.fimma-hero__tint--blue {
  background: rgba(0, 133, 199, 0.45);
}

.fimma-hero__tint--yellow {
  background: rgba(244, 195, 0, 0.45);
}

.fimma-hero__tint--black {
  background: rgba(0, 0, 0, 0.45);
}

.fimma-hero__tint--green {
  background: rgba(0, 159, 61, 0.45);
}

.fimma-hero__tint--red {
  background: rgba(223, 0, 36, 0.45);
}

/* The ribbon mask PNG — white + grey spindles with transparent stripe windows */
.fimma-hero__mask {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
}

/* White edge panels hiding the media at the very left/right of the mask */
.fimma-hero__panel {
  position: absolute;
  top: 0;
  height: 100%;
  width: 1rem;
  z-index: 10;
  background: var(--fimma-white);
}

.fimma-hero__panel--left {
  left: 0;
}

.fimma-hero__panel--right {
  right: 0;
}

/* =========================================================
   SECTION HEADING (big italic display)
   ========================================================= */
.fimma-section-heading {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 3vw, 2.5rem);
}

.fimma-section-heading__title {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-size: clamp(2.25rem, 1.25rem + 4.6vw, 6rem);
  max-width: 18ch;
}

.fimma-section-heading__rule {
  margin-top: 1.75rem;
  height: 1px;
  background: var(--fimma-line);
}

/* =========================================================
   NEWS GRID
   ========================================================= */
.fimma-news {
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 7vw, 6rem);
}

.fimma-news__label {
  margin-bottom: 1.5rem;
}

.fimma-news__featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.fimma-news-card a,
.fimma-news-row a {
  color: var(--fimma-ink);
  text-decoration: none;
}

.fimma-news-card a:hover,
.fimma-news-row a:hover {
  text-decoration: none;
}

.fimma-news-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--fimma-paper);
}

.fimma-news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--fimma-ease);
}

.fimma-news-card:hover .fimma-news-card__media img {
  transform: scale(1.04);
}

.fimma-news-card__meta {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  margin-top: 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fimma-muted);
}

.fimma-news-card__cat {
  color: var(--fimma-ink);
}

.fimma-news-card__title {
  margin-top: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.fimma-news-card__cta {
  display: inline-block;
  margin-top: 0.65rem;
  font-size: 0.8125rem;
  color: var(--fimma-muted);
}

.fimma-news-card:hover .fimma-news-card__cta {
  color: var(--fimma-ink);
}

.fimma-news__compact {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.fimma-news-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.fimma-news-row__media {
  flex: 0 0 84px;
  width: 84px;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--fimma-paper);
}

.fimma-news-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fimma-news-row__meta {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fimma-muted);
}

.fimma-news-row__title {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

@media (max-width: 768px) {

  .fimma-news__featured,
  .fimma-news__compact {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PHOTO MOSAIC (2x2 full-bleed)
   ========================================================= */
.fimma-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.fimma-mosaic figure {
  margin: 0;
  aspect-ratio: 3/2;
  overflow: hidden;
}

.fimma-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .fimma-mosaic {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PARTNER BAND (cRedo)
   ========================================================= */
.fimma-partner {
  background: linear-gradient(135deg, #2D8B4E 0%, #7BC74D 40%, #C5E636 70%, #FFD700 100%);
  color: var(--fimma-white);
  text-align: center;
  padding-block: clamp(4rem, 8vw, 9rem);
}

.fimma-partner__logo {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(3.5rem, 2rem + 6vw, 9rem);
  letter-spacing: -0.02em;
  line-height: 1;
}

.fimma-partner__label {
  margin-top: 0.75rem;
  font-size: 0.6875rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.85;
  font-size: 1rem;
}

/* =========================================================
   TRIANGLE GALLERY
   ========================================================= */
.fimma-triangles {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
  justify-content: center;
  flex-wrap: wrap;
}

.fimma-triangle {
  width: clamp(140px, 18vw, 230px);
  aspect-ratio: 1 / 0.92;
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  overflow: hidden;
  position: relative;
}

.fimma-triangle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fimma-triangle figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  text-align: center;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

/* =========================================================
   ENERGY BAND (FIMMA ENERGY — purple)
   ========================================================= */
.fimma-energy {
  background: var(--fimma-purple-dark);
  color: var(--fimma-white);
  padding-block: clamp(3.5rem, 6vw, 7rem);
}

.fimma-energy__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.fimma-energy__letter {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(7rem, 4rem + 12vw, 14rem);
  line-height: 0.9;
}

.fimma-energy__name {
  margin-top: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 1.875rem;
}

.fimma-energy__text {
  margin-top: 0.75rem;
  max-width: 45ch;
  opacity: 0.85;
  font-size: 0.875rem;
}

.fimma-energy__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.fimma-energy__media img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .fimma-energy__inner {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ANNIVERSARY BAND (15th)
   ========================================================= */
.fimma-anniversary {
  position: relative;
  background: linear-gradient(135deg, #2D8B4E 0%, #7BC74D 60%, #A4C639 100%);
  color: var(--fimma-white);
  text-align: center;
  padding-block: clamp(4rem, 8vw, 9rem);
  overflow: hidden;
}

.fimma-anniversary__ghost {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.025em;
  font-size: clamp(6rem, 3rem + 16vw, 17rem);
}

.fimma-anniversary__label {
  margin-top: 0.5rem;
  font-size: 1rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* =========================================================
   STATS COUNTER
   ========================================================= */
.fimma-stats {
  padding-block: clamp(3rem, 6vw, 5rem);
  padding-bottom: 0;
}

.fimma-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  text-align: left;
}

.fimma-stat__value {
  font-family: var(--fimma-font-display);
  font-size: clamp(2.75rem, 1.5rem + 5vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  /* The count-up rewrites this text every frame, so its box must never change
     size or the whole page below the band reflows. `body` sets
     overflow-wrap:break-word and .fimma-stat has min-width:0, so a long value
     ("5000+") can break onto a second line part-way through the count and snap
     back — that toggling is what makes the sections underneath jump. nowrap
     stops the wrap; tabular-nums keeps every digit the same width so the number
     itself doesn't wobble. (interactions.js also pins the final width.) */
  white-space: nowrap;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}

.fimma-stat__label {
  margin-top: 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fimma-muted);
}

.fimma-stats__tagline {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: 1.25rem;
  padding: 4rem 0;
  /* color: var(--fimma-muted); */
}

@media (max-width: 560px) {
  .fimma-stats__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* =========================================================
   OLYMPIC STRIPE divider (skewed 5-colour bars)
   ========================================================= */
.fimma-olympic-stripe {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  height: clamp(96px, 12vw, 200px);
  overflow: hidden;
}

/* Make each grid cell a container; draw the skewed/scaled bar
   inside a ::before so the grid `gap` remains visible. */
.fimma-olympic-stripe span {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.fimma-olympic-stripe span::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: skewX(-18deg) scaleX(1);
  transform-origin: center;
  display: block;
}

.fimma-olympic-stripe span:nth-child(1)::before {
  background: var(--fimma-blue-bright);
}

.fimma-olympic-stripe span:nth-child(2)::before {
  background: var(--fimma-yellow-bright);
}

.fimma-olympic-stripe span:nth-child(3)::before {
  background: var(--fimma-black);
}

.fimma-olympic-stripe span:nth-child(4)::before {
  background: var(--fimma-green-bright);
}

.fimma-olympic-stripe span:nth-child(5)::before {
  background: var(--fimma-red-bright);
}

/* =========================================================
   FOOTER
   ========================================================= */
.fimma-footer {
  padding-block: 2.5rem;
}

.fimma-footer__cols {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}

.fimma-footer__cols .fimma-footer__top a {
  font-size: 1.875rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--fimma-ink);
}

.fimma-footer__heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fimma-muted);
  margin-bottom: 0.75rem;
}

.fimma-footer__cols p,
.fimma-footer__cols a {
  font-size: 0.875rem;
  color: var(--fimma-muted);
}

.fimma-footer__legal {
  margin-top: 2.5rem;
  font-size: 0.6875rem;
  color: var(--fimma-muted);
}

@media (max-width: 768px) {
  .fimma-footer__cols {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PAGE HERO  (black interior-page header — reusable)
   Faithful to the original: pt-28/32/36, pb-16/24, italic display title.
   padding-top clears the 112px fixed header.
   ========================================================= */
.fimma-page-hero {
  background: var(--fimma-black);
  color: var(--fimma-white);
  padding-top: clamp(7rem, 5.2rem + 4vw, 9rem);
  padding-bottom: clamp(4rem, 2.5rem + 4vw, 6rem);
}

.fimma-page-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1rem;
}

.fimma-page-hero__title {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  font-size: clamp(3rem, 1.8rem + 5vw, 4.5rem);
  margin: 0;
  color: var(--fimma-white);
}

.fimma-page-hero__subtitle {
  margin: 1.5rem 0 0;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.6);
}

/* =========================================================
   INTRO + KEY FACTS  (two-column prose + bordered panel)
   ========================================================= */
.fimma-intro-facts {
  background: var(--fimma-white);
  padding-block: clamp(4rem, 2.5rem + 4vw, 6rem);
}

.fimma-intro-facts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 1rem + 5vw, 5rem);
  align-items: start;
}

.fimma-intro-facts__heading {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.25rem);
  margin: 0 0 1.5rem;
}

.fimma-intro-facts__body>p {
  color: var(--fimma-muted);
  line-height: 1.625;
  font-size: 1rem;
  margin: 0 0 1.25rem;
}

.fimma-intro-facts__body>p:last-child {
  margin-bottom: 0;
}

.fimma-intro-facts__panel {
  background: #f9fafb;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: clamp(2rem, 1.4rem + 1.6vw, 2.5rem);
}

.fimma-intro-facts__panel-title {
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1.5rem;
}

.fimma-intro-facts__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fimma-intro-facts__item {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.fimma-intro-facts__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.fimma-intro-facts__label {
  font-weight: 600;
  color: var(--fimma-black);
  min-width: 110px;
  flex-shrink: 0;
}

.fimma-intro-facts__value {
  color: var(--fimma-muted);
}

@media (max-width: 1024px) {
  .fimma-intro-facts__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MILESTONES TIMELINE  (year rail + bordered cards on a hairline)
   ========================================================= */
.fimma-timeline {
  background: #f9fafb;
  padding-block: clamp(4rem, 2.5rem + 4vw, 6rem);
}

.fimma-timeline__head {
  margin-bottom: 3rem;
}

.fimma-timeline__heading {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.25rem);
  margin: 0;
}

.fimma-timeline__intro {
  margin: 0.75rem 0 0;
  color: var(--fimma-muted);
  font-size: 1rem;
}

.fimma-timeline__track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Vertical hairline at the right edge of the 88px year rail */
.fimma-timeline__track::before {
  content: '';
  position: absolute;
  left: 88px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.1);
}

.fimma-timeline__row {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.fimma-timeline__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 88px;
  flex-shrink: 0;
}

.fimma-timeline__dot {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: var(--fimma-black);
  margin-top: 0.25rem;
  position: relative;
  z-index: 1;
}

.fimma-timeline__year {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fimma-muted);
  text-align: center;
  line-height: 1.2;
  margin-top: 0.5rem;
}

.fimma-timeline__year--inline {
  display: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9ca3af;
  text-align: left;
  margin: 0 0 0.25rem;
}

.fimma-timeline__card {
  flex: 1;
  background: var(--fimma-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
}

.fimma-timeline__title {
  font-family: var(--fimma-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.fimma-timeline__desc {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--fimma-muted);
  line-height: 1.625;
}

@media (max-width: 640px) {
  .fimma-timeline__track::before {
    display: none;
  }

  .fimma-timeline__rail {
    display: none;
  }

  .fimma-timeline__row {
    gap: 0;
  }

  .fimma-timeline__year--inline {
    display: block;
  }
}

/* =========================================================
   FOOTER TAGLINE  (precedes the olympic stripe on interior pages)
   ========================================================= */
.fimma-footer-tagline-wrap {
  padding-block: clamp(2.5rem, 1.5rem + 2vw, 4rem);
  background: var(--fimma-white);
  /* Span full width even inside a constrained post-content so the inner
     .fimma-container lines up with the full-bleed bands above it. */
  max-width: none;
}

.fimma-footer-tagline {
  margin: 0;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  letter-spacing: 0.025em;
}

/* =========================================================
   GRID SECTION HEAD  (shared: heading + intro, used by the
   Values and Commitments grids)
   ========================================================= */
.fimma-grid-head {
  margin-bottom: 3rem;
}

.fimma-grid-head__title {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.25rem);
  margin: 0;
}

.fimma-grid-head__intro {
  margin: 0.75rem 0 0;
  max-width: 36rem;
  color: var(--fimma-muted);
  font-size: 1rem;
}

/* =========================================================
   VALUES GRID  (numbered, colour-filled cards)
   ========================================================= */
.fimma-values {
  background: var(--fimma-white);
  padding-block: clamp(4rem, 2.5rem + 4vw, 6rem);
}

.fimma-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.fimma-value-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  color: var(--fimma-white);
}

.fimma-value-card__number {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  opacity: 0.3;
}

.fimma-value-card__title {
  font-family: var(--fimma-font-display);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0;
  color: var(--fimma-white);
}

.fimma-value-card__desc {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

@media (max-width: 1024px) {
  .fimma-values__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .fimma-values__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MISSION BANNER  (centered statement quote)
   ========================================================= */
.fimma-mission {
  background: #f9fafb;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-block: clamp(4rem, 2.5rem + 4vw, 5rem);
}

.fimma-mission__inner {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.fimma-mission__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #9ca3af;
  margin: 0 0 1.5rem;
}

.fimma-mission__quote {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 600;
  line-height: 1.375;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem);
  color: var(--fimma-black);
  margin: 0;
  border: 0;
  padding: 0;
}

.fimma-mission__attribution {
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  color: var(--fimma-muted);
}

/* =========================================================
   COMMITMENTS GRID  (bordered title/description cards)
   ========================================================= */
.fimma-commitments {
  background: var(--fimma-white);
  padding-block: clamp(4rem, 2.5rem + 4vw, 6rem);
}

.fimma-commitments__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.fimma-commitment-card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  transition: border-color 0.25s var(--fimma-ease);
}

.fimma-commitment-card:hover {
  border-color: rgba(0, 0, 0, 0.3);
}

.fimma-commitment-card__dash {
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--fimma-black);
  margin-bottom: 1rem;
}

.fimma-commitment-card__title {
  font-family: var(--fimma-font-display);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

.fimma-commitment-card__desc {
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fimma-muted);
  margin: 0;
}

@media (max-width: 1024px) {
  .fimma-commitments__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .fimma-commitments__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   BOARD GRID  (Board of Directors — portrait cards + modal)
   ========================================================= */
.fimma-board {
  background: var(--fimma-paper);
  padding-block: clamp(3.5rem, 2rem + 4vw, 6rem);
}

.fimma-board__grid {
  display: grid;
  grid-template-columns: repeat(var(--fimma-board-cols, 2), minmax(0, 1fr));
  gap: clamp(1rem, 0.75rem + 1vw, 1.75rem);
}

.fimma-board__group+.fimma-board__group {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.fimma-board__group-title {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  line-height: 1.1;
  margin: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--fimma-line);
}

.fimma-board__empty {
  text-align: center;
  padding-block: 5rem;
  color: rgba(0, 0, 0, 0.4);
  font-size: 1.125rem;
}

/* Horizontal card: circular avatar + text block, white panel on the paper band. */
.fimma-board-card {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.875rem, 0.6rem + 1vw, 1.375rem);
  width: 100%;
  text-align: left;
  padding: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  background: var(--fimma-white);
  border: 1px solid var(--fimma-line);
  /* border-radius: 1rem; */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: box-shadow 0.3s var(--fimma-ease), transform 0.3s var(--fimma-ease), border-color 0.3s var(--fimma-ease);
}

.fimma-board-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: rgba(0, 0, 0, 0.14);
}

.fimma-board-card__photo {
  position: relative;
  flex: 0 0 auto;
  width: clamp(56px, 4vw + 2.5rem, 76px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: #f3f4f6;
}

.fimma-board-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fimma-board-card__initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fimma-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: #9ca3af;
  background: #e5e7eb;
}

.fimma-board-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.fimma-board-card__name {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
}

.fimma-board-card__role {
  font-size: 0.8125rem;
  color: rgba(0, 0, 0, 0.55);
}

.fimma-board-card__excerpt {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fimma-board-card__nat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(0, 0, 0, 0.45);
}

.fimma-board-card__flag {
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: normal;
}

.fimma-board-card__flag-img {
  display: block;
  width: 21px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.fimma-board-card__country {
  font-weight: 600;
}

/* Visually-hidden text (announced to screen readers) — used for the full
   country name behind the flag + code. Standard WordPress pattern. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1023px) {
  .fimma-board__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .fimma-board__grid {
    grid-template-columns: 1fr;
  }
}

/* ----- Board member modal ----- */
body.fimma-modal-open {
  overflow: hidden;
}

.fimma-board-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.2s var(--fimma-ease);
}

.fimma-board-modal[hidden] {
  display: none;
}

.fimma-board-modal.is-open {
  opacity: 1;
}

.fimma-board-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
}

.fimma-board-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 42rem;
  max-height: 92vh;
  overflow: hidden;
  background: var(--fimma-white);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s var(--fimma-ease);
}

.fimma-board-modal.is-open .fimma-board-modal__panel {
  transform: translateY(0) scale(1);
}

.fimma-board-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: inline-flex;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.85);
  border: 0;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.fimma-board-modal__close:hover {
  background: #fff;
}

.fimma-board-modal__photo {
  position: relative;
  flex-shrink: 0;
  height: 320px;
  background: #f3f4f6;
}

.fimma-board-modal__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
}

.fimma-board-modal__initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fimma-font-display);
  font-weight: 700;
  font-size: 4.5rem;
  color: #9ca3af;
  background: #e5e7eb;
}

.fimma-board-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2rem);
}

.fimma-board-modal__eyebrow {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(0, 0, 0, 0.4);
  margin: 0 0 0.5rem;
}

.fimma-board-modal__name {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  margin: 0 0 0.25rem;
}

.fimma-board-modal__role {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 0 1rem;
}

.fimma-board-modal__bio {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 1rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.75);
}

.fimma-board-modal__bio>p {
  margin: 0 0 1rem;
}

.fimma-board-modal__bio>p:last-child {
  margin-bottom: 0;
}

.fimma-board-modal__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.fimma-board-modal__link {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0.5rem 1rem;
  color: var(--fimma-ink);
  text-decoration: none;
  transition: background 0.2s var(--fimma-ease), color 0.2s var(--fimma-ease);
}

.fimma-board-modal__link:hover {
  background: var(--fimma-black);
  color: #fff;
}

/* =========================================================
   INTRO-FACTS — "rows" variant (Governance Structure)
   Right column becomes separate bordered cards on a grey section.
   ========================================================= */
.fimma-intro-facts--rows {
  background: #f9fafb;
}

.fimma-intro-facts--rows .fimma-intro-facts__panel {
  background: none;
  border: 0;
  padding: 0;
}

.fimma-intro-facts--rows .fimma-intro-facts__panel-title {
  display: none;
}

.fimma-intro-facts--rows .fimma-intro-facts__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fimma-intro-facts--rows .fimma-intro-facts__item {
  align-items: center;
  gap: 1rem;
  background: var(--fimma-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 1rem;
  margin: 0;
}

.fimma-intro-facts--rows .fimma-intro-facts__label {
  width: 5rem;
  min-width: 0;
  flex-shrink: 0;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.4);
}

.fimma-intro-facts--rows .fimma-intro-facts__value {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.8);
}

/* =========================================================
   PAGE NAV BAR  (e.g. "← Back to About" / "Contact FIMMA →")
   ========================================================= */
.fimma-pagenav {
  background: var(--fimma-white);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-block: 2.5rem;
  max-width: none;
}

.fimma-pagenav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.fimma-pagenav a {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(0, 0, 0, 0.5);
  text-decoration: none;
  transition: color 0.2s var(--fimma-ease);
}

.fimma-pagenav a:hover {
  color: var(--fimma-black);
}

/* =========================================================
   PAGE HERO — light variant + divider (Contact)
   ========================================================= */
.fimma-page-hero--light {
  background: var(--fimma-white);
  color: var(--fimma-ink);
  padding-top: calc(var(--fimma-header-h) + clamp(1rem, 3vw, 2rem));
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.fimma-page-hero--light .fimma-page-hero__title {
  color: var(--fimma-ink);
  font-size: clamp(3.5rem, 1.5rem + 9vw, 8rem);
  line-height: 1.03;
}

.fimma-page-hero--light .fimma-page-hero__eyebrow {
  color: var(--fimma-muted);
}

.fimma-page-hero--light .fimma-page-hero__subtitle {
  color: var(--fimma-muted);
}

.fimma-page-hero__divider {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0 0;
}

/* =========================================================
   CONTACT SECTION  (offices + working form)
   ========================================================= */
.fimma-contact {
  background: var(--fimma-white);
  padding-block: clamp(3rem, 1.5rem + 4vw, 5rem);
}

.fimma-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 1rem + 5vw, 5rem);
  align-items: start;
}

.fimma-contact__eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(0, 0, 0, 0.5);
  margin: 0 0 2rem;
}

.fimma-contact__intro {
  font-size: 1.125rem;
  line-height: 1.625;
  color: rgba(0, 0, 0, 0.7);
  margin: 0 0 2.5rem;
}

.fimma-contact__offices {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.fimma-office {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.fimma-office__bar {
  flex-shrink: 0;
  width: 4px;
  align-self: stretch;
}

.fimma-office__body>p {
  margin: 0;
}

.fimma-office__region {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(0, 0, 0, 0.4);
  margin-bottom: 0.25rem !important;
}

.fimma-office__city {
  font-size: 0.875rem;
  font-weight: 500;
}

.fimma-office__line {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 0.25rem !important;
}

.fimma-office__email {
  display: inline-block;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.8);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: 0.25rem;
}

.fimma-office__email:hover {
  color: var(--fimma-black);
}

/* ----- form ----- */
.fimma-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.fimma-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.fimma-form__field {
  display: flex;
  flex-direction: column;
}

.fimma-form__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 0.5rem;
}

.fimma-form__input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
  padding: 0.5rem 0;
  font-family: var(--fimma-font);
  font-size: 0.875rem;
  color: var(--fimma-ink);
  background: transparent;
  transition: border-color 0.2s var(--fimma-ease);
}

.fimma-form__input:focus {
  outline: none;
  border-bottom-color: var(--fimma-black);
}

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

.fimma-form__select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.fimma-form__submit {
  align-self: flex-start;
  padding: 0.75rem 2rem;
  font-family: var(--fimma-font);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--fimma-black);
  border: 0;
  cursor: pointer;
  transition: background 0.2s var(--fimma-ease);
}

.fimma-form__submit:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Honeypot — hidden from people, visible to dumb bots */
.fimma-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fimma-form__notice {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  border: 1px solid;
}

.fimma-form__notice--ok {
  color: #166534;
  background: #f0fdf4;
  border-color: rgba(22, 101, 52, 0.3);
}

.fimma-form__notice--error {
  color: #991b1b;
  background: #fef2f2;
  border-color: rgba(153, 27, 27, 0.3);
}

@media (max-width: 1024px) {
  .fimma-contact__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .fimma-form__row {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   SOCIAL BAND  ("Follow Us" + outlined link buttons)
   ========================================================= */
.fimma-social {
  background: #f9fafb;
  padding-block: clamp(3rem, 2rem + 2vw, 4rem);
}

.fimma-social__eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(0, 0, 0, 0.5);
  margin: 0 0 1.5rem;
}

.fimma-social__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.fimma-social__link {
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fimma-ink);
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  transition: background 0.2s var(--fimma-ease), color 0.2s var(--fimma-ease);
}

.fimma-social__link:hover {
  background: var(--fimma-black);
  color: #fff;
}

/* =========================================================
   SCROLL / ENTRANCE ANIMATIONS
   Motion is driven by GSAP + ScrollTrigger (assets/js/interactions.js
   initAnim). CSS only sets the initial hidden state — gated by .fimma-js
   on <html> (set by an inline wp_head script) so no-JS visitors still see
   everything. The per-item stagger lives in inline `--anim-delay` and is read
   by GSAP. `.fimma-anim-off` (added by JS when GSAP is unavailable or motion
   is reduced) and `prefers-reduced-motion` reveal everything immediately, so
   content is never stuck hidden if the animation layer doesn't run.
   ========================================================= */
.fimma-js [data-anim] {
  opacity: 0;
  will-change: opacity, transform;
}

.fimma-js [data-anim="up"] {
  transform: translateY(30px);
}

.fimma-js [data-anim="left"] {
  transform: translateX(-28px);
}

.fimma-js [data-anim="right"] {
  transform: translateX(28px);
}

.fimma-js [data-anim="scale"] {
  transform: scale(0.92);
}

.fimma-js [data-anim="fade"] {
  transform: none;
}

.fimma-js.fimma-anim-off [data-anim] {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .fimma-js [data-anim] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   NEWS LIST  (News page: featured article + "All News" grid)
   ========================================================= */
.fimma-newslist {
  background: var(--fimma-white);
  padding-block: clamp(3rem, 2rem + 3vw, 4rem);
}

.fimma-newslist__empty {
  text-align: center;
  padding-block: 5rem;
  color: rgba(0, 0, 0, 0.4);
  font-size: 1.125rem;
}

.fimma-newslist__featured {
  display: block;
  text-decoration: none;
  color: inherit;
}

.fimma-newslist__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: #f3f4f6;
}

.fimma-newslist__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--fimma-ease);
}

.fimma-newslist__featured:hover .fimma-newslist__media img {
  transform: scale(1.05);
}

.fimma-newslist__metarow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
}

.fimma-newslist__cat {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.5);
}

.fimma-newslist__dot {
  color: rgba(0, 0, 0, 0.2);
}

.fimma-newslist__featuredtag {
  color: rgba(0, 0, 0, 0.5);
}

.fimma-newslist__title {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  max-width: 48rem;
  margin: 0;
}

.fimma-newslist__featured:hover .fimma-newslist__title {
  text-decoration: underline;
}

.fimma-newslist__excerpt {
  margin: 0.75rem 0 0;
  max-width: 42rem;
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.6;
}

.fimma-newslist__rule {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: clamp(2.5rem, 4vw, 3.5rem) 0;
}

.fimma-newslist__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(0, 0, 0, 0.5);
  margin: 0 0 2rem;
}

.fimma-newslist__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 1rem + 1.5vw, 2rem);
}

.fimma-newscard {
  display: block;
  text-decoration: none;
  color: inherit;
}

.fimma-newscard__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 1rem;
  background: #f3f4f6;
}

.fimma-newscard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--fimma-ease);
}

.fimma-newscard:hover .fimma-newscard__media img {
  transform: scale(1.05);
}

.fimma-newscard__cat {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 0.5rem;
}

.fimma-newscard__title {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
}

.fimma-newscard:hover .fimma-newscard__title {
  text-decoration: underline;
}

.fimma-newscard__excerpt {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.55;
}

@media (max-width: 1024px) {
  .fimma-newslist__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .fimma-newslist__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   POST ARTICLE  (themed single-post layout)
   ========================================================= */
.fimma-article__hero {
  width: 100%;
  height: 50vh;
  min-height: 320px;
  overflow: hidden;
}

.fimma-article__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fimma-article__body {
  max-width: 48rem;
  margin-inline: auto;
  padding-top: 2.5rem;
  padding-bottom: clamp(4rem, 2rem + 6vw, 6rem);
}

/* No hero image: clear the fixed header. */
.fimma-article--flush .fimma-article__body {
  padding-top: calc(var(--fimma-header-h) + 2rem);
}

.fimma-article__back,
.fimma-article__backbottom a {
  display: inline-block;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.5);
  text-decoration: none;
  transition: color 0.2s var(--fimma-ease);
}

.fimma-article__back {
  margin-bottom: 2rem;
}

.fimma-article__back:hover,
.fimma-article__backbottom a:hover {
  color: var(--fimma-black);
}

.fimma-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.fimma-article__cat {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(0, 0, 0, 0.5);
}

.fimma-article__date,
.fimma-article__author {
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.4);
}

/* "Source: …" attribution for imported (external) News */
.fimma-article__source {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fimma-muted);
}

.fimma-article__source a {
  color: var(--fimma-ink);
  text-decoration: underline;
}

.fimma-newslist__source {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fimma-blue);
}

.fimma-newscard .fimma-newslist__source {
  display: block;
  margin-bottom: 0.35rem;
}

.fimma-article__title {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem);
  margin: 0 0 1.5rem;
}

.fimma-article__excerpt {
  font-size: 1.125rem;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.7);
  border-left: 4px solid var(--fimma-black);
  padding-left: 1rem;
  margin: 0 0 2rem;
}

.fimma-article__rule {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0 0 2rem;
}

.fimma-article__content {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.8);
}

.fimma-article__content>* {
  margin: 0 0 1.25rem;
}

.fimma-article__content>*:last-child {
  margin-bottom: 0;
}

.fimma-article__content h2,
.fimma-article__content h3 {
  font-family: var(--fimma-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 2rem;
}

.fimma-article__content a {
  text-decoration: underline;
}

.fimma-article__content img {
  max-width: 100%;
  height: auto;
}

.fimma-article__backbottom {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.fimma-article__backbottom a {
  font-weight: 600;
  color: var(--fimma-ink);
}

.fimma-article__backbottom a:hover {
  text-decoration: underline;
}

/* =========================================================
   GAMES LIST  (Games page: featured event + status grid)
   ========================================================= */
.fimma-games {
  background: var(--fimma-white);
  padding-block: clamp(3rem, 2rem + 3vw, 4rem);
}

.fimma-games__empty {
  text-align: center;
  padding-block: 5rem;
  color: rgba(0, 0, 0, 0.4);
  font-size: 1.125rem;
}

/* Shared status badge (solid colours — used on grid cards & detail) */
.fimma-game-status {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  padding: 0.25rem 0.5rem;
}

.fimma-game-status--upcoming {
  background: #16a34a;
}

.fimma-game-status--ongoing {
  background: #eab308;
}

.fimma-game-status--completed {
  background: rgba(0, 0, 0, 0.5);
}

/* ----- featured event (text overlaid on the banner) ----- */
.fimma-games__featured {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: #111;
}

.fimma-games__featured-media,
.fimma-games__featured-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fimma-games__featured-media img {
  object-fit: cover;
  transition: transform 0.7s var(--fimma-ease);
}

.fimma-games__featured:hover .fimma-games__featured-media img {
  transform: scale(1.04);
}

.fimma-games__featured-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
  background: rgba(0, 0, 0, 0.3);
}

.fimma-games__featured-badge {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.75rem;
}

.fimma-games__featured-title {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.25rem);
  color: #fff;
}

.fimma-games__featured-place {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

.fimma-games__rule {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: clamp(2.5rem, 4vw, 3.5rem) 0;
}

.fimma-games__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(0, 0, 0, 0.5);
  margin: 0 0 2rem;
}

.fimma-games__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 1rem + 1.5vw, 2rem);
}

/* ----- grid card ----- */
.fimma-gamecard {
  display: block;
  text-decoration: none;
  color: inherit;
}

.fimma-gamecard__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 1rem;
  background: #f3f4f6;
}

.fimma-gamecard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--fimma-ease);
}

.fimma-gamecard:hover .fimma-gamecard__media img {
  transform: scale(1.05);
}

.fimma-gamecard__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
}

.fimma-gamecard__place {
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.5);
  margin: 0 0 0.25rem;
}

.fimma-gamecard__title {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
}

.fimma-gamecard__desc {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.55;
}

@media (max-width: 1024px) {
  .fimma-games__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .fimma-games__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   GAME DETAIL  (themed single-event layout)
   ========================================================= */
.fimma-gamedetail__hero {
  position: relative;
  min-height: 50vh;
  background: #0a0a0a center / cover no-repeat;
  color: #fff;
  display: flex;
  align-items: flex-end;
}

.fimma-gamedetail__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.fimma-gamedetail__hero--plain::before {
  background: rgba(0, 0, 0, 0);
}

.fimma-gamedetail__hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: calc(var(--fimma-header-h) + 2rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.fimma-gamedetail__back {
  display: inline-block;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: color 0.2s var(--fimma-ease);
}

.fimma-gamedetail__back:hover {
  color: #fff;
}

.fimma-gamedetail__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.fimma-gamedetail__status {
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.6875rem;
}

/* Pastel pill in the detail hero (matches the original detail styling) */
.fimma-gamedetail__status.fimma-game-status--upcoming {
  background: #dbeafe;
  color: #1e40af;
}

.fimma-gamedetail__status.fimma-game-status--ongoing {
  background: #dcfce7;
  color: #166534;
}

.fimma-gamedetail__status.fimma-game-status--completed {
  background: #f3f4f6;
  color: #4b5563;
}

.fimma-gamedetail__category {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
}

.fimma-gamedetail__title {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  margin: 0;
  color: #fff;
}

.fimma-gamedetail__body {
  max-width: 56rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}

.fimma-gamedetail__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.fimma-gamedetail__fact-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(0, 0, 0, 0.4);
  margin: 0 0 0.35rem;
}

.fimma-gamedetail__fact-value {
  font-weight: 600;
  margin: 0;
}

.fimma-gamedetail__register {
  display: inline-block;
  background: var(--fimma-black);
  color: #fff;
  text-decoration: none;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 1rem;
  transition: background 0.2s var(--fimma-ease);
}

.fimma-gamedetail__register:hover {
  background: rgba(0, 0, 0, 0.8);
}

.fimma-gamedetail__rule {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0 0 2.5rem;
}

.fimma-gamedetail__content {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.8);
}

.fimma-gamedetail__content>* {
  margin: 0 0 1.25rem;
}

.fimma-gamedetail__content>*:last-child {
  margin-bottom: 0;
}

.fimma-gamedetail__backbottom {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.fimma-gamedetail__backbottom a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fimma-ink);
  text-decoration: none;
}

.fimma-gamedetail__backbottom a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .fimma-gamedetail__facts {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* =========================================================
   ATHLETES GRID  (weight-class filter + grayscale card grid)
   ========================================================= */
.fimma-athletes {
  background: var(--fimma-white);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
}

.fimma-athletes__filter-label,
.fimma-athletes__count {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(0, 0, 0, 0.5);
}

.fimma-athletes__filter-label {
  margin: 0 0 1.5rem;
}

.fimma-athletes__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fimma-athletes__filter {
  font-family: var(--fimma-font);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fimma-ink);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.2s var(--fimma-ease), color 0.2s var(--fimma-ease), border-color 0.2s var(--fimma-ease);
}

.fimma-athletes__filter:hover {
  background: var(--fimma-black);
  color: #fff;
  border-color: var(--fimma-black);
}

.fimma-athletes__filter.is-active {
  background: var(--fimma-black);
  color: #fff;
  border-color: var(--fimma-black);
}

.fimma-athletes__rule {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: clamp(2rem, 3vw, 3rem) 0;
}

.fimma-athletes__count {
  margin: 0 0 2rem;
}

.fimma-athletes__count-name {
  text-transform: none;
}

.fimma-athletes__empty {
  text-align: center;
  padding-block: 5rem;
  color: rgba(0, 0, 0, 0.4);
  text-transform: none;
  letter-spacing: normal;
  font-size: 1.125rem;
}

.fimma-athletes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 1rem + 1.5vw, 2rem);
}

.fimma-athlete {
  display: block;
  text-decoration: none;
  color: inherit;
}

.fimma-athlete__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-bottom: 1rem;
  background: #f3f4f6;
}

.fimma-athlete__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.5s var(--fimma-ease), transform 0.5s var(--fimma-ease);
}

.fimma-athlete:hover .fimma-athlete__img {
  filter: grayscale(0);
}

.fimma-athlete__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: var(--fimma-black);
}

.fimma-athlete__name {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
}

.fimma-athlete__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.5);
}

.fimma-athlete__sep {
  color: rgba(0, 0, 0, 0.2);
}

.fimma-athlete__record {
  font-weight: 500;
  color: var(--fimma-ink);
}

.fimma-athlete__bio {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.55;
}

@media (max-width: 1024px) {
  .fimma-athletes__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .fimma-athletes__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   STATS COUNTER — dark variant (Athletes black stats banner)
   ========================================================= */
.fimma-stats--dark {
  background: var(--fimma-black);
  padding-block: clamp(4rem, 2.5rem + 4vw, 6rem);
}

.fimma-stats--dark .fimma-stat__value {
  color: #fff;
}

.fimma-stats--dark .fimma-stat__label {
  color: rgba(255, 255, 255, 0.5);
}

.fimma-stats--dark .fimma-stats__tagline {
  color: #fff;
}

/* =========================================================
   ATHLETE DETAIL  (themed single-athlete layout)
   ========================================================= */
.fimma-athletedetail {
  background: var(--fimma-white);
  padding-top: calc(var(--fimma-header-h) + 1.5rem);
  padding-bottom: clamp(4rem, 2rem + 6vw, 6rem);
}

.fimma-athletedetail__back,
.fimma-athletedetail__backbottom a {
  display: inline-block;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.5);
  text-decoration: none;
  transition: color 0.2s var(--fimma-ease);
}

.fimma-athletedetail__back {
  margin-bottom: 2rem;
}

.fimma-athletedetail__back:hover,
.fimma-athletedetail__backbottom a:hover {
  color: var(--fimma-black);
}

.fimma-athletedetail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 1rem + 5vw, 5rem);
  align-items: start;
}

.fimma-athletedetail__photo {
  overflow: hidden;
}

.fimma-athletedetail__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.fimma-athletedetail__info {
  padding-top: 1rem;
}

.fimma-athletedetail__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.fimma-athletedetail__nat,
.fimma-athletedetail__weight {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(0, 0, 0, 0.5);
}

.fimma-athletedetail__weight {
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0.15rem 0.5rem;
}

.fimma-athletedetail__name {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
  margin: 0 0 1.5rem;
}

.fimma-athletedetail__record {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.fimma-athletedetail__stat {
  text-align: center;
}

.fimma-athletedetail__stat-num {
  display: block;
  font-family: var(--fimma-font-display);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
}

.fimma-athletedetail__stat-num--rank {
  color: #b8860b;
}

.fimma-athletedetail__stat-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 0.35rem;
}

.fimma-athletedetail__divider {
  width: 1px;
  height: 3rem;
  background: rgba(0, 0, 0, 0.1);
}

.fimma-athletedetail__bio {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.7);
}

.fimma-athletedetail__bio>* {
  margin: 0 0 1rem;
}

.fimma-athletedetail__bio>*:last-child {
  margin-bottom: 0;
}

.fimma-athletedetail__backbottom {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.fimma-athletedetail__backbottom a {
  font-weight: 600;
  color: var(--fimma-ink);
}

.fimma-athletedetail__backbottom a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .fimma-athletedetail__grid {
    grid-template-columns: 1fr;
  }

  .fimma-athletedetail__photo {
    max-width: 24rem;
  }
}

@media (max-width: 480px) {
  .fimma-athletedetail__record {
    gap: 1rem;
  }

  .fimma-athletedetail__stat-num {
    font-size: 1.75rem;
  }
}

/* =========================================================
   MEDIA  (Media page: category filter + event cards)
   The masonry grid below (.fimma-media__grid / .fimma-media-item) is the
   photo grid INSIDE one event — see MEDIA ALBUM further down.
   ========================================================= */
.fimma-media {
  background: var(--fimma-white);
  padding-block: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}

.fimma-media__empty {
  text-align: center;
  padding-block: 5rem;
  color: rgba(0, 0, 0, 0.4);
  font-size: 1.125rem;
}

.fimma-media__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.fimma-media__filter {
  font-family: var(--fimma-font);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fimma-ink);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.2s var(--fimma-ease), color 0.2s var(--fimma-ease), border-color 0.2s var(--fimma-ease);
}

.fimma-media__filter:hover,
.fimma-media__filter.is-active {
  background: var(--fimma-black);
  color: #fff;
  border-color: var(--fimma-black);
}

/* ---- Event cards (one card = one event album) ---- */
.fimma-media__events {
  display: grid;
  grid-template-columns: repeat(var(--fimma-media-cols, 3), minmax(0, 1fr));
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}

.fimma-eventcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--fimma-line);
  transition: border-color 0.3s var(--fimma-ease), transform 0.3s var(--fimma-ease), box-shadow 0.3s var(--fimma-ease);
}

.fimma-eventcard:hover {
  border-color: rgba(0, 0, 0, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.fimma-eventcard__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f3f4f6;
}

.fimma-eventcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--fimma-ease);
}

.fimma-eventcard:hover .fimma-eventcard__media img {
  transform: scale(1.05);
}

.fimma-eventcard__cat,
.fimma-eventcard__count {
  position: absolute;
  display: inline-block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.35rem 0.6rem;
  line-height: 1;
}

.fimma-eventcard__cat {
  top: 0.75rem;
  left: 0.75rem;
  color: var(--fimma-ink);
  background: rgba(255, 255, 255, 0.92);
}

.fimma-eventcard__count {
  bottom: 0.75rem;
  right: 0.75rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}

.fimma-eventcard__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem);
}

.fimma-eventcard__date {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fimma-muted);
}

.fimma-eventcard__title {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.15;
  margin: 0.5rem 0 0;
}

.fimma-eventcard__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fimma-muted);
  margin-top: 0.6rem;
}

.fimma-eventcard__btn {
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fimma-ink);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--fimma-ease);
}

.fimma-eventcard__btn span {
  display: inline-block;
  transition: transform 0.25s var(--fimma-ease);
}

.fimma-eventcard:hover .fimma-eventcard__btn span {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .fimma-media__events {
    grid-template-columns: repeat(min(var(--fimma-media-cols, 3), 2), minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .fimma-media__events {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Photo masonry (inside one event album) ---- */
.fimma-media__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(8rem, 13vw, 12rem);
  grid-auto-flow: dense;
  gap: clamp(0.75rem, 1.2vw, 1rem);
}

.fimma-media-item {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f3f4f6;
}

.fimma-media-item--large {
  grid-column: span 2;
  grid-row: span 2;
}

.fimma-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--fimma-ease);
}

.fimma-media-item:hover img {
  transform: scale(1.05);
}

.fimma-media-item__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(0.85rem, 1vw, 1.5rem);
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s var(--fimma-ease);
}

.fimma-media-item:hover .fimma-media-item__overlay {
  background: rgba(0, 0, 0, 0.4);
}

.fimma-media-item__cat,
.fimma-media-item__caption {
  color: #fff;
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.3s var(--fimma-ease), transform 0.3s var(--fimma-ease);
}

.fimma-media-item__cat {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
}

.fimma-media-item__caption {
  font-size: 0.9375rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

.fimma-media-item:hover .fimma-media-item__cat,
.fimma-media-item:hover .fimma-media-item__caption {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .fimma-media__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(7rem, 28vw, 11rem);
  }
}

/* =========================================================
   MEDIA ALBUM  (single event: head + photo masonry + lightbox)
   ========================================================= */
.fimma-album {
  background: var(--fimma-white);
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}

.fimma-album__head {
  padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  border-bottom: 1px solid var(--fimma-line);
  margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}

.fimma-album__back {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fimma-muted);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: color 0.2s var(--fimma-ease);
}

.fimma-album__back:hover {
  color: var(--fimma-ink);
}

.fimma-album__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fimma-muted);
  margin: 0;
}

.fimma-album__cat {
  color: var(--fimma-ink);
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0.3rem 0.6rem;
  line-height: 1;
}

.fimma-album__title {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  font-size: clamp(2.25rem, 1.5rem + 4vw, 4.5rem);
  margin: 0.75rem 0 0;
}

.fimma-album__lead {
  max-width: 62ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.65;
  color: var(--fimma-muted);
  margin-top: 1rem;
}

.fimma-album__content {
  max-width: 70ch;
  line-height: 1.75;
  margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}

.fimma-album__content p {
  margin-bottom: 1rem;
}

.fimma-album__backbottom {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--fimma-line);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.fimma-album__backbottom a {
  color: var(--fimma-muted);
  text-decoration: none;
  transition: color 0.2s var(--fimma-ease);
}

.fimma-album__backbottom a:hover {
  color: var(--fimma-ink);
}

/* ---- Lightbox (opened from any [data-fimma-lightbox] grid) ---- */
.fimma-js [data-fimma-lightbox] .fimma-media-item {
  cursor: zoom-in;
}

body.is-lightbox-open {
  overflow: hidden;
}

.fimma-lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3.5rem);
  background: rgba(0, 0, 0, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--fimma-ease), visibility 0s linear 0.25s;
}

.fimma-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s var(--fimma-ease), visibility 0s;
}

.fimma-lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  user-select: none;
}

.fimma-lightbox__close,
.fimma-lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background 0.2s var(--fimma-ease), border-color 0.2s var(--fimma-ease);
}

.fimma-lightbox__close:hover,
.fimma-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.fimma-lightbox__close {
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.5rem;
  line-height: 1;
}

.fimma-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 3.75rem;
  font-size: 1.75rem;
  line-height: 1;
}

.fimma-lightbox__nav--prev {
  left: clamp(0.5rem, 2vw, 1.5rem);
}

.fimma-lightbox__nav--next {
  right: clamp(0.5rem, 2vw, 1.5rem);
}

.fimma-lightbox__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(0.75rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding-inline: 4rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

.fimma-lightbox__caption {
  font-size: 0.9375rem;
  margin: 0;
}

.fimma-lightbox__counter {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

@media (max-width: 560px) {
  .fimma-lightbox__nav {
    width: 2.25rem;
    height: 3rem;
    font-size: 1.375rem;
  }

  .fimma-lightbox__bar {
    padding-inline: 1rem;
  }
}

/* =========================================================
   CTA BAND  (centered call-to-action — e.g. Press Kit)
   ========================================================= */
.fimma-cta {
  padding-block: clamp(4rem, 2.5rem + 4vw, 6rem);
}

.fimma-cta--dark {
  background: var(--fimma-black);
  color: #fff;
}

.fimma-cta--light {
  background: var(--fimma-white);
  color: var(--fimma-ink);
}

.fimma-cta__inner {
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
}

.fimma-cta__title {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
  margin: 0 0 1rem;
}

.fimma-cta--dark .fimma-cta__title {
  color: #fff;
}

.fimma-cta__text {
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0 0 2rem;
}

.fimma-cta--dark .fimma-cta__text {
  color: rgba(255, 255, 255, 0.6);
}

.fimma-cta--light .fimma-cta__text {
  color: rgba(0, 0, 0, 0.6);
}

.fimma-cta__button {
  display: inline-block;
  font-family: var(--fimma-font);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 2rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--fimma-ease), color 0.2s var(--fimma-ease);
}

.fimma-cta--dark .fimma-cta__button {
  background: #fff;
  color: var(--fimma-black);
}

.fimma-cta--dark .fimma-cta__button:hover {
  background: rgba(255, 255, 255, 0.9);
}

.fimma-cta--light .fimma-cta__button {
  background: var(--fimma-black);
  color: #fff;
}

.fimma-cta--light .fimma-cta__button:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* =========================================================
   LEAD STATEMENT  (eyebrow + large lead paragraph)
   ========================================================= */
.fimma-lead {
  background: var(--fimma-white);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}

.fimma-lead__inner {
  max-width: 48rem;
}

.fimma-lead__eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(0, 0, 0, 0.5);
  margin: 0 0 1.5rem;
}

.fimma-lead__text {
  font-size: clamp(1.125rem, 0.9rem + 1.1vw, 1.5rem);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.8);
  margin: 0;
}

/* =========================================================
   PROGRAMS LIST  (image + colour panel rows, alternating)
   ========================================================= */
.fimma-programs {
  background: var(--fimma-white);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.fimma-programs__eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(0, 0, 0, 0.5);
  margin: 0 0 2rem;
}

.fimma-programs__list {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 1rem + 1.5vw, 2rem);
}

.fimma-program {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.fimma-program__media {
  overflow: hidden;
}

.fimma-program__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--fimma-ease);
}

.fimma-program:hover .fimma-program__media img {
  transform: scale(1.04);
}

.fimma-program:nth-child(even) .fimma-program__media {
  order: 2;
}

.fimma-program__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  color: #fff;
}

.fimma-program__title {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-size: clamp(1.25rem, 0.9rem + 1.6vw, 1.875rem);
  color: #fff;
  margin: 0 0 1rem;
}

.fimma-program__desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.fimma-program__button {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  padding-bottom: 0.25rem;
  transition: border-color 0.2s var(--fimma-ease);
}

.fimma-program__button:hover {
  border-bottom-color: #fff;
}

@media (max-width: 768px) {
  .fimma-program {
    grid-template-columns: 1fr;
  }

  .fimma-program__media {
    aspect-ratio: 16 / 10;
  }

  .fimma-program:nth-child(even) .fimma-program__media {
    order: 0;
  }
}

/* =========================================================
   MILESTONES GRID  (black band: big italic years + events)
   ========================================================= */
.fimma-mgrid {
  background: var(--fimma-black);
  padding-block: clamp(4rem, 2.5rem + 4vw, 6rem);
}

.fimma-mgrid__eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 2.5rem;
}

.fimma-mgrid__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 1rem + 1.5vw, 2rem);
}

.fimma-mgrid__year {
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3rem);
  color: #fff;
  margin: 0;
}

.fimma-mgrid__event {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0.5rem 0 0;
}

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

/* =========================================================
   EXTERNAL RSS FEED
   (server-rendered from fetch_feed(); styled to match the News cards)
   ========================================================= */
.fimma-rss {
  padding-block: clamp(2rem, 5vw, 4rem);
}

.fimma-rss__label {
  margin-bottom: 1.5rem;
}

.fimma-rss__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.fimma-rss__item {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--fimma-line);
}

.fimma-rss__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--fimma-paper);
  margin-bottom: 1rem;
}

.fimma-rss__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--fimma-ease);
}

.fimma-rss__item:hover .fimma-rss__media img {
  transform: scale(1.04);
}

.fimma-rss__date {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fimma-muted);
}

.fimma-rss__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.fimma-rss__title a {
  color: var(--fimma-ink);
  text-decoration: none;
  transition: color 0.25s var(--fimma-ease);
}

.fimma-rss__title a:hover {
  color: var(--fimma-blue);
  text-decoration: underline;
}

.fimma-rss__excerpt {
  margin: 0.65rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fimma-muted);
}

.fimma-rss__cta {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fimma-muted);
  text-decoration: none;
  transition: color 0.25s var(--fimma-ease);
}

.fimma-rss__item:hover .fimma-rss__cta {
  color: var(--fimma-ink);
}

.fimma-rss__notice {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--fimma-muted);
}

/* Detail page ( /rss-item/{hash}/ ) — "Original source" attribution line.
   The article body itself reuses the shared .fimma-article* styles. */
.fimma-rss-detail__source {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fimma-line);
  font-size: 0.875rem;
  color: var(--fimma-muted);
}

.fimma-rss-detail__source a {
  color: var(--fimma-ink);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .fimma-rss__list {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PAGE CORNER DECORATIONS
   ---------------------------------------------------------
   A single fixed, viewport-sized layer (`.fimma-page-deco`, output once via
   wp_footer in functions.php → fimma_page_decorations) that pins top.png to the
   TOP-LEFT and bottom.png to the BOTTOM-RIGHT of the screen. Because the layer
   is `position: fixed`, the accents stay visible on screen while the page
   scrolls — on every template (home, interior, single).

   Non-obstruction:
   - `pointer-events: none` on the whole layer → it never intercepts a click,
     tap or hover; every button/link underneath stays fully usable.
   - Only the two corners carry an image; the whole centre of the layer is
     empty, so page content itself is never covered.
   - Sits below the header (300), hero (200) and modals (500) so real UI chrome
     always stays on top.

   Responsive: sizes use aspect-ratio (matching each PNG) + clamp() and shrink
   on tablet/phone so they stay clear of the content.
   ========================================================= */
.fimma-page-deco {
  position: fixed;
  inset: 0;
  /* full viewport (100vw × 100vh) without the scrollbar-width overflow */
  z-index: -1;
  /* BEHIND page content: shows through the transparent/light sections and is
     hidden behind dark/coloured bands (and behind the footer, via JS) */
  pointer-events: none;
  /* never block interaction */
  overflow: hidden;
  /* accents can never cause a scrollbar */
  transition: opacity 0.4s var(--fimma-ease);
}

/* Faded out once the footer scrolls into view (see initDeco in
   interactions.js) so the accents never sit behind the footer. */
.fimma-page-deco.is-hidden {
  opacity: 0;
}

.fimma-page-deco__top,
.fimma-page-deco__bottom {
  position: absolute;
  width: clamp(200px, 28vw, 480px);
  background-repeat: no-repeat;
  background-size: contain;
}

.fimma-page-deco__top {
  top: var(--fimma-header-h);
  /* drop below the fixed navbar so it isn't hidden behind it */
  left: 0;
  aspect-ratio: 628 / 299;
  background-image: url("../images/top.png");
  background-position: top left;
}

.fimma-page-deco__bottom {
  right: 0;
  bottom: 0;
  aspect-ratio: 576 / 410;
  background-image: url("../images/bottom.png");
  background-position: bottom right;
}

@media (max-width: 768px) {

  .fimma-page-deco__top,
  .fimma-page-deco__bottom {
    width: clamp(90px, 30vw, 190px);
  }
}

/* Let the fixed decoration layer (z-index:-1) show THROUGH the light content
   sections. These are full-width block wrappers that only paint a white
   background to sit on the white page — dropping it to transparent reveals the
   decoration behind them as you scroll, while dark/coloured bands (and inner
   white cards, the header, modals, etc.) still cover it. Add any new
   light-background block wrapper here to keep the effect consistent. */
.fimma-intro-facts,
.fimma-values,
.fimma-commitments,
.fimma-board,
.fimma-pagenav,
.fimma-page-hero--light,
.fimma-contact,
.fimma-newslist,
.fimma-games,
.fimma-athletes,
.fimma-athletedetail,
.fimma-media,
.fimma-cta--light,
.fimma-lead,
.fimma-programs,
.fimma-const,
.fimma-footer-tagline-wrap {
  background: transparent;
}

/* =========================================================
   FEATURED IMAGES — anchor the object-fit:cover crop to the
   TOP (center top) so the top of the photo is never cut off.
   Applies to News cards, the News page list, the single
   article hero and the External RSS Feed cards.
   ========================================================= */
.fimma-news-card__media img,
.fimma-news-row__media img,
.fimma-newslist__media img,
.fimma-newscard__media img,
.fimma-article__hero-img,
.fimma-rss__media img {
  object-position: center top;
}

/* =========================================================
   CONSTITUTION  (sticky table of contents + the numbered
   legal document — fimma/constitution-doc)
   ---------------------------------------------------------
   Layout mirrors the source PDF: roman-numbered PARTS, then
   "Article N – Title" headings, then hanging-indent clauses
   (1.1 → a. → i.). Each clause list sets --fimma-const-n
   inline (render.php) to the width of its longest marker, so
   every clause in a list hangs off exactly the same indent.
   ========================================================= */
.fimma-const {
  background: var(--fimma-white);
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) clamp(4rem, 2.5rem + 4vw, 6rem);
  /* "Back to top" must land below the fixed header */
  scroll-margin-top: var(--fimma-header-h);
}

.fimma-const__layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  align-items: start;
}

.fimma-const--no-toc .fimma-const__layout {
  grid-template-columns: minmax(0, 1fr);
}

/* ----- table of contents ----- */
/* Sticky sits on the GRID ITEM, not on the panel inside it: a sticky element
   can only travel within its containing block, and this column is only as tall
   as the TOC box itself — so sticking the inner panel would pin it to nothing
   and it would never follow the scroll. As a grid item its containing block is
   .fimma-const__layout, so it rides the full height of the document column
   (and, in the one-column mobile layout, floats over the document below it).
   `align-self: start` is required: a stretched item fills the row and can't
   move. `z-index` keeps it above the document it floats over; the navbar is
   z-index 300, so the header still wins. */
.fimma-const__aside {
  min-width: 0;
  position: sticky;
  /* clear the fixed navbar */
  top: calc(var(--fimma-header-h) + 1.5rem);
  align-self: start;
  z-index: 5;
}

.fimma-const__toc {
  background: var(--fimma-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 1.5rem 1.25rem;
}

.fimma-const__toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.fimma-const__toc-title {
  margin: 0;
  font-family: var(--fimma-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Collapse control — only shown once the TOC stops being a sidebar */
.fimma-const__toc-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  padding: 0.25rem;
  margin: 0;
  cursor: pointer;
  color: var(--fimma-muted);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fimma-const__toc-toggle svg {
  transition: transform 0.25s var(--fimma-ease);
}

.fimma-const__toc-toggle[aria-expanded="false"] svg {
  transform: rotate(-90deg);
}

.fimma-const__toc-body {
  margin-top: 1.25rem;
  max-height: calc(100vh - var(--fimma-header-h) - 10rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* room for the scrollbar so active items aren't clipped */
  padding-right: 0.5rem;
}

.fimma-const__toc-body.is-collapsed {
  display: none;
}

.fimma-const__toc-parts,
.fimma-const__toc-articles,
.fimma-const__toc-clauses {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fimma-const__toc-part+.fimma-const__toc-part {
  margin-top: 1.5rem;
}

.fimma-const__toc-part>a {
  display: flex;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--fimma-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.fimma-const__toc-roman {
  flex: 0 0 auto;
}

.fimma-const__toc-articles {
  margin-top: 0.625rem;
  border-left: 1px solid var(--fimma-line);
}

.fimma-const__toc-articles a,
.fimma-const__toc-clauses a {
  display: flex;
  gap: 0.5rem;
  padding: 0.3125rem 0 0.3125rem 0.875rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  text-decoration: none;
  color: var(--fimma-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
  transition: color 0.2s var(--fimma-ease), border-color 0.2s var(--fimma-ease);
}

.fimma-const__toc-clauses a {
  padding-left: 1.75rem;
  font-size: 0.75rem;
}

.fimma-const__toc-no {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: #9ca3af;
}

.fimma-const__toc-name {
  min-width: 0;
}

.fimma-const__toc-articles a:hover,
.fimma-const__toc-clauses a:hover,
.fimma-const__toc-articles a:focus-visible,
.fimma-const__toc-clauses a:focus-visible {
  color: var(--fimma-ink);
}

/* Scroll-spy state (initConstitution in interactions.js) */
.fimma-const__toc-articles a.is-active,
.fimma-const__toc-clauses a.is-active {
  color: var(--fimma-ink);
  font-weight: 600;
  border-left-color: var(--fimma-blue);
}

.fimma-const__toc-articles a.is-active .fimma-const__toc-no {
  color: var(--fimma-blue);
}

.fimma-const__toc-actions {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fimma-line);
}

.fimma-const__pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--fimma-ink);
  color: var(--fimma-ink);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s var(--fimma-ease), color 0.2s var(--fimma-ease);
}

.fimma-const__pdf:hover,
.fimma-const__pdf:focus-visible {
  background: var(--fimma-ink);
  color: var(--fimma-white);
}

/* ----- document ----- */
.fimma-const__doc {
  min-width: 0;
  max-width: 46rem;
}

.fimma-const__meta {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--fimma-line);
  margin-bottom: 2.5rem;
}

.fimma-const__version {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fimma-muted);
}

.fimma-const__intro {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--fimma-muted);
}

/* PART — "I. Name, Seat, Purpose, Means and Resources" */
.fimma-const__part+.fimma-const__part {
  margin-top: clamp(3rem, 2rem + 2vw, 4.5rem);
}

.fimma-const__part-title {
  display: flex;
  gap: 0.625rem;
  margin: 0 0 2rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--fimma-ink);
  font-family: var(--fimma-font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.fimma-const__part-roman {
  flex: 0 0 auto;
}

/* ARTICLE — "Article 1 – Name and Duration" */
.fimma-const__article {
  /* the fixed header must not cover the target of a TOC jump */
  scroll-margin-top: calc(var(--fimma-header-h) + 1.5rem);
}

.fimma-const__article+.fimma-const__article {
  margin-top: 2.75rem;
}

.fimma-const__article-title {
  margin: 0 0 1.25rem;
  font-family: var(--fimma-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.fimma-const__article-no {
  color: var(--fimma-ink);
}

.fimma-const__article-name::before {
  content: '– ';
  color: var(--fimma-muted);
}

/* CLAUSES — hanging indent, marker in its own column */
.fimma-const__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fimma-const__clause {
  display: flex;
  align-items: baseline;
  column-gap: 0.75rem;
  scroll-margin-top: calc(var(--fimma-header-h) + 1.5rem);
}

.fimma-const__list--l0>.fimma-const__clause+.fimma-const__clause {
  margin-top: 1.125rem;
}

.fimma-const__list--l1>.fimma-const__clause+.fimma-const__clause,
.fimma-const__list--l2>.fimma-const__clause+.fimma-const__clause {
  margin-top: 0.75rem;
}

/* Nested lists sit under their parent's text, indented by one step */
.fimma-const__list--l1,
.fimma-const__list--l2 {
  margin-top: 0.75rem;
  padding-left: 1.25rem;
}

.fimma-const__num {
  flex: 0 0 var(--fimma-const-n, 3ch);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--fimma-muted);
  line-height: 1.7;
}

.fimma-const__clause-body {
  min-width: 0;
  flex: 1;
}

.fimma-const__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #26272b;
}

/* Underlined sub-headings ("Ordinary Full Members", "Treasurer" …) */
.fimma-const__subhead {
  margin: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--fimma-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.fimma-const__subhead+.fimma-const__text {
  margin-top: 0.5rem;
}

.fimma-const__signoff {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fimma-line);
  font-size: 0.9375rem;
  color: var(--fimma-muted);
}

.fimma-const__backtotop {
  margin: 1.5rem 0 0;
}

.fimma-const__backtotop a {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fimma-muted);
  text-decoration: none;
}

.fimma-const__backtotop a:hover {
  color: var(--fimma-ink);
}

.fimma-const__empty {
  margin: 0;
  padding: 2rem;
  border: 1px dashed var(--fimma-line);
  color: var(--fimma-muted);
}

/* ----- TOC becomes a slim floating bar above the document -----
   Still sticky, just collapsed by default (initConstitution) so it rides along
   as a "Contents" bar under the navbar instead of eating the screen. */
@media (max-width: 1024px) {
  .fimma-const__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fimma-const__aside {
    top: var(--fimma-header-h);
  }

  .fimma-const__toc {
    padding: 0.875rem 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .fimma-const__toc-toggle {
    display: inline-flex;
  }

  .fimma-const__toc-body {
    margin-top: 0.875rem;
    max-height: min(60vh, calc(100vh - var(--fimma-header-h) - 8rem));
  }

  .fimma-const__doc {
    max-width: none;
  }

  /* A TOC jump must clear the navbar AND the collapsed bar riding under it. */
  .fimma-const__article,
  .fimma-const__clause {
    scroll-margin-top: calc(var(--fimma-header-h) + 5rem);
  }
}

@media (max-width: 560px) {
  .fimma-const__list--l1,
  .fimma-const__list--l2 {
    padding-left: 0.5rem;
  }

  .fimma-const__clause {
    column-gap: 0.5rem;
  }
}

/* ----- print: the document only, no chrome ----- */
@media print {

  .fimma-const__aside,
  .fimma-const__backtotop {
    display: none;
  }

  .fimma-const {
    padding-block: 0;
  }

  .fimma-const__layout {
    display: block;
  }

  .fimma-const__doc {
    max-width: none;
  }

  .fimma-const__part-title,
  .fimma-const__article-title {
    break-after: avoid;
  }

  .fimma-const__clause {
    break-inside: avoid;
  }
}