/* E74BYZ public frontend — modular design system + homepage first viewport */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Onest:wght@600&display=swap');

:root {
  --e74-bg: #f3f5f7;
  --e74-surface: #ffffff;
  --e74-ink: #0e1318;
  --e74-ink-muted: #5c6670;
  /* Locked brand accent — RF / field / project */
  --e74-accent: #fb5607;
  --e74-field: var(--e74-accent);
  --e74-accent-soft: rgba(251, 86, 7, 0.5);
  --e74-line: color-mix(in srgb, var(--e74-accent) 22%, #d4dae1);
  --e74-line-strong: color-mix(in srgb, var(--e74-accent) 48%, #d4dae1);
  --e74-line-on-dark: color-mix(in srgb, var(--e74-accent) 42%, transparent);
  --e74-signal: #0b5fff;
  --e74-dark: #0c1116;
  --e74-dark-ink: #f3f6f8;
  --e74-overlay-ink: #f4f7fa;
  /* Soft graphite band for flagship / dark sections (not flat #000) */
  --e74-section-dark: #1c2228;
  --e74-section-dark-soft: #2a323a;
  --e74-section-dark-line: color-mix(in srgb, #fff 16%, transparent);
  --e74-radius: 2px;
  --e74-radius-control: 4px;
  --e74-radius-card: 14px;
  --e74-radius-badge: 7px;
  --e74-max: 1440px;
  --e74-gutter: clamp(1.25rem, 3.2vw, 2.75rem);
  --e74-header-h: 5.25rem;
  --e74-header-h-compact: 4rem;
  /* Inner-page main row (~80px) + thin utility meta strip (~34–36px) */
  --e74-header-inner-h: 5rem;
  --e74-header-meta-h: 2.25rem;
  --e74-header-inner-surface: color-mix(in srgb, var(--e74-ink) 3.5%, var(--e74-bg));
  --e74-space-1: 0.25rem;
  --e74-space-2: 0.5rem;
  --e74-space-3: 0.75rem;
  --e74-space-4: 1rem;
  --e74-space-5: 1.5rem;
  --e74-space-6: 2rem;
  --e74-space-7: 3rem;
  --e74-space-8: 4rem;
  --e74-hero-copy-max: 38rem;
  --e74-hero-title-max: 46rem;
  --e74-hero-support-max: 26rem;
  --e74-hero-media-position: 58% 48%;
  --e74-hero-media-position-mobile: 62% 42%;
  /* Typography roles — Onest display is CANDIDATE / visual approval pending */
  --font-display: "Onest", "Manrope", system-ui, sans-serif;
  --font-ui: "Manrope", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  /* Display / block headings — slightly tight tracking (locked direction) */
  --e74-tracking-heading: -0.045em;
  --e74-tracking-heading-sm: -0.035em;
  --e74-ease: 0.25s ease;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  color: var(--e74-ink);
  background: var(--e74-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--e74-signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--e74-ink);
}

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

/* Display / section headings — shared tight tracking */
h1,
h2,
h3,
.hero-title,
.home-hero__headline,
.who-we-are__title,
.who-we-are__year,
.cemernica-people__title,
.cemernica-people__support-title,
.cemernica-donors__intro-title,
.cemernica-donors__group-title,
.cemernica-status__title,
.cemernica-status__col-title,
.cemernica-status__diary-title,
.activities-page__title,
.contact-visit__title,
.club-today__title,
.club-space__title,
.club-mission__title,
.club-activities__title,
.club-activities__card-title,
.club-coop__title,
.club-coop__card-title,
.club-media__title,
.club-media-card__title,
.club-board__title,
.club-docs__title,
.club-history__title,
.useful-links__title,
.useful-links__section-title,
.useful-links__featured-title,
.mesh-hero__title,
.mesh-live__title,
.mesh-nodes__title,
.mesh-monitor__title,
.mesh-basics__title,
.mesh-join-cta__title,
.mesh-news__title,
.activity-feature__heading,
.become-ham__step-title,
.featured-project__identity,
.featured-project__headline,
.featured-project__card-title,
.radio-outdoors__title,
.radio-outdoors-cta__title,
.home-news__title,
.final-cta__title,
.activity-card__title-text,
.news-feat-carousel__heading,
.news-list-card__title,
.news-sidebar__title {
  letter-spacing: var(--e74-tracking-heading);
}

.feature-card__title,
.freq-card__title,
.news-feat-card__title,
.useful-links__card-title {
  letter-spacing: var(--e74-tracking-heading-sm);
}

.shell {
  width: min(100% - (var(--e74-gutter) * 2), var(--e74-max));
  margin-inline: auto;
}

/* -------------------------------------------------------------------------- */
/* Reusable primitives                                                        */
/* -------------------------------------------------------------------------- */

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

.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--e74-accent);
}

.eyebrow--on-dark {
  color: color-mix(in srgb, var(--e74-accent) 72%, var(--e74-overlay-ink));
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.85rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--e74-radius-control);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--e74-ease), color var(--e74-ease), border-color var(--e74-ease), opacity var(--e74-ease);
}

.btn--solid {
  background: var(--e74-accent);
  border-color: var(--e74-accent);
  color: #fff;
}

.btn--solid:hover,
.btn--solid:focus-visible {
  background: var(--e74-ink);
  border-color: var(--e74-ink);
  color: var(--e74-accent);
}

.btn--ghost {
  background: transparent;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  color: inherit;
}

.btn--ghost:hover {
  border-color: currentColor;
}

.btn--text {
  min-height: auto;
  padding: 0.35rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  padding-bottom: 0.2rem;
}

.btn--text:hover {
  border-bottom-color: currentColor;
}

/* Primary solid stays accent on dark surfaces (hero, dark bands) */
.btn--on-dark.btn--solid {
  background: var(--e74-accent);
  border-color: var(--e74-accent);
  color: #fff;
}

.btn--on-dark.btn--solid:hover,
.btn--on-dark.btn--solid:focus-visible {
  background: var(--e74-ink);
  border-color: color-mix(in srgb, #fff 18%, var(--e74-ink));
  color: var(--e74-accent);
}

.btn--on-dark.btn--text,
.btn--on-dark.btn--ghost {
  color: #fff;
}

.btn--on-dark.btn--text:hover,
.btn--on-dark.btn--ghost:hover {
  color: #fff;
}

.tech-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}

.tech-meta__sep {
  margin-inline: 0.35rem;
  opacity: 0.85;
  color: var(--e74-accent);
}

.tech-meta--muted {
  color: var(--e74-ink-muted);
}

.tech-meta--on-light {
  color: var(--e74-ink);
  opacity: 0.72;
}

.tech-meta--on-dark {
  color: var(--e74-overlay-ink);
  opacity: 0.78;
}

.tech-rail {
  border-top: 1px solid var(--e74-line-on-dark);
}

.tech-rail__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tech-rail__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  min-height: 2.65rem;
  padding: 0.55rem 0.75rem;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  border-right: 1px solid var(--e74-line-on-dark);
  opacity: 0.88;
}

.tech-rail__link:last-child {
  border-right: 0;
}

.tech-rail__link:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 6%, transparent);
  color: inherit;
}

.tech-rail__n {
  opacity: 0.45;
  font-size: 0.65rem;
}

.tech-rail__label {
  font-weight: 500;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(243, 245, 247, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--e74-line);
  color: var(--e74-ink);
  transition: background-color var(--e74-ease), border-color var(--e74-ease), color var(--e74-ease), min-height var(--e74-ease);
}

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: var(--e74-header-h) auto;
  align-items: center;
  column-gap: 1.25rem;
}

.site-header__utility {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  grid-column: 2;
  grid-row: 1;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
}

.brand:hover {
  color: inherit;
}

.brand__logo {
  display: block;
  height: 2.15rem;
  width: auto;
  max-width: min(11rem, 42vw);
}

.page-home .site-header--overlay .brand__logo,
.page-home .site-header.is-solid .brand__logo {
  height: 2.25rem;
}

.brand__callsign {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.28rem;
  letter-spacing: 0.16em;
  line-height: 1;
}

.page-home .site-header--overlay .brand__callsign {
  font-size: 1.32rem;
}

.brand__name {
  display: none;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 1280px) {
  .brand__name {
    display: inline;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  border-radius: var(--e74-radius-control);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.9;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  position: relative;
  transition:
    transform 160ms ease,
    opacity 120ms ease,
    top 160ms ease,
    background-color 120ms ease;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

/* Hamburger → X when menu open */
.nav-toggle[aria-expanded="true"] span {
  background-color: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  top: 0;
  transform: rotate(-45deg);
}

.lang-switch--bar {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  padding-top: 0;
}

.lang-switch--bar a {
  color: inherit;
  text-decoration: none;
  padding: 0.2rem 0.4rem;
  opacity: 0.65;
}

.lang-switch--bar a:hover,
.lang-switch--bar a.is-active {
  opacity: 1;
}

.lang-switch--bar a + a {
  border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.site-nav {
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: stretch;
  padding: 0.35rem 0 1rem;
}

.site-nav.is-open {
  display: flex;
}

.site-nav__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.site-nav__footer {
  display: none;
}

/*
 * Mobile / tablet (<1100px): full-viewport overlay under the header bar.
 * Same pattern on homepage and inner pages — page content does not shift.
 */
@media (max-width: 1099.98px) {
  body.is-nav-open {
    overflow: hidden;
    touch-action: none;
  }

  /*
   * Expand header to the viewport while open so the panel fills the rest.
   * Header surface is full-bleed; links stay on shell width via panel padding.
   */
  .site-header.is-open {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    z-index: 80;
    overflow: hidden;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-header.is-open .site-header__meta {
    display: none;
  }

  .site-header.is-open .site-header__inner {
    position: relative;
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    max-width: none;
    min-height: 0;
    height: 100%;
    margin-inline: 0;
    padding-inline: var(--e74-gutter);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: var(--e74-header-h-compact) minmax(0, 1fr);
    column-gap: 1.25rem;
    background: transparent;
  }

  .site-header__inner {
    position: relative;
    grid-template-rows: var(--e74-header-h-compact);
  }

  .page-home .site-header--overlay .site-header__inner,
  .page-home .site-header.is-solid .site-header__inner {
    grid-template-rows: var(--e74-header-h-compact);
  }

  .site-nav {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    transform: none;
    grid-column: auto;
    grid-row: auto;
    z-index: 1;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    overflow: hidden;
    min-height: 0;
  }

  .site-nav.is-open {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .site-nav__panel {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    padding: 0.85rem 0 max(1.35rem, env(safe-area-inset-bottom));
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav__links {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1 1 auto;
  }

  .site-nav__footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: auto;
    padding-top: 1.5rem;
  }

  .site-nav__rule {
    display: block;
    width: 100%;
    height: 0;
    margin: 0 0 0.25rem;
    border: 0;
    border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
  }

  .site-nav a.nav-link {
    border-bottom-color: color-mix(in srgb, currentColor 8%, transparent);
  }

  .site-nav__meta-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.72;
  }

  .site-nav__meta-sep {
    margin-inline: 0.4rem;
    opacity: 0.5;
  }

  .site-nav__meta-map {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    color: inherit;
    text-decoration: none;
    opacity: 0.88;
    line-height: inherit;
  }

  .site-nav__meta-map:hover,
  .site-nav__meta-map:focus-visible,
  .site-nav__meta-map.is-active {
    color: var(--e74-accent);
    opacity: 1;
    outline: none;
  }

  .site-nav__meta-map-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    line-height: 0;
  }

  .site-nav__meta-map-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .site-nav__meta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.1rem;
    width: 100%;
  }

  .site-nav__meta-email {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: inherit;
    text-decoration: none;
    opacity: 0.88;
  }

  .site-nav__meta-email:hover,
  .site-nav__meta-email:focus-visible {
    color: var(--e74-accent);
    opacity: 1;
    outline: none;
  }

  .site-nav__meta-social {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-nav__meta-social a,
  .site-nav__meta-social-pending {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: 0.78;
    line-height: 0;
  }

  .site-nav__meta-social a:hover,
  .site-nav__meta-social a:focus-visible {
    color: var(--e74-accent);
    opacity: 1;
    outline: none;
  }

  .site-nav__meta-social-pending {
    opacity: 0.38;
  }

  .site-nav__meta-social svg {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
  }

  .page-home .site-nav {
    background: transparent;
    color: var(--e74-overlay-ink);
  }

  .page-home .site-header.is-open,
  .page-home .site-header--overlay.is-open,
  .page-home .site-header--overlay:has(.site-nav.is-open),
  .page-home .site-header.is-solid:has(.site-nav.is-open) {
    background: #0c1116;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-header--inner.is-open,
  .site-header--inner:has(.site-nav.is-open) {
    background: var(--e74-bg);
    border-bottom-color: transparent;
  }

  .site-header--inner.is-open .site-nav,
  .site-header--inner.is-open .site-nav__panel,
  .site-header--inner:has(.site-nav.is-open) .site-nav,
  .site-header--inner:has(.site-nav.is-open) .site-nav__panel {
    background: transparent;
    color: var(--e74-ink);
  }
}

.site-nav a.nav-link,
.site-nav button.nav-link {
  color: inherit;
  text-decoration: none;
  padding: 0.85rem 0.1rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
  font-weight: 700;
  font-size: 1.05rem;
  opacity: 0.88;
}

.site-nav button.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.site-nav a.nav-link:hover,
.site-nav a.nav-link.is-active,
.site-nav button.nav-link:hover,
.site-nav button.nav-link.is-active,
.site-nav button.nav-link[aria-expanded="true"] {
  opacity: 1;
}

.nav-link__chevron {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
  flex: 0 0 auto;
}

.nav-item--has-children.is-open > .nav-link .nav-link__chevron,
.nav-item--has-children:focus-within > .nav-link .nav-link__chevron,
.nav-item--has-children.is-open > .nav-item__parent-row .nav-link__chevron,
.nav-item--has-children:focus-within > .nav-item__parent-row .nav-link__chevron {
  transform: rotate(225deg);
}

/* Top-level parent that is both a page link and a submenu trigger */
.nav-item__parent-row {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  width: 100%;
  border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}

.nav-item__parent-row > .nav-link {
  flex: 1 1 auto;
  min-width: 0;
  border-bottom: none;
}

.nav-item__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
}

.nav-item__expand:hover,
.nav-item__expand:focus-visible,
.nav-item--has-children.is-open > .nav-item__parent-row > .nav-item__expand {
  opacity: 1;
}

.nav-submenu {
  display: grid;
  gap: 0.15rem;
  padding: 0.35rem 0 0.65rem 0.85rem;
}

.nav-submenu[hidden] {
  display: none;
}

.nav-submenu__link {
  display: block;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  opacity: 0.8;
  padding: 0.45rem 0;
}

.nav-submenu__link:hover,
.nav-submenu__link:focus-visible,
.nav-submenu__link.is-active {
  opacity: 1;
}

/* Nested 3rd-level (e.g. Network → Meshtastic → nodes) — mobile stack */
.nav-item--nested {
  display: grid;
  gap: 0;
}

.nav-submenu__parent-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.nav-submenu__parent-row > .nav-submenu__link {
  flex: 1 1 auto;
  min-width: 0;
}

.nav-submenu__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
}

.nav-submenu__expand:hover,
.nav-submenu__expand:focus-visible,
.nav-item--nested.is-open > .nav-submenu__parent-row > .nav-submenu__expand {
  opacity: 1;
}

.nav-submenu--nested {
  padding: 0.15rem 0 0.45rem 0.85rem;
}

/* Homepage overlay header — belongs to the hero composition */
.page-home .site-header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
}

.page-home .site-header--overlay {
  background: rgba(7, 12, 18, 0.42);
  border-bottom-color: color-mix(in srgb, #fff 12%, transparent);
  color: var(--e74-overlay-ink);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}

  .page-home .site-header--overlay .site-nav a.nav-link,
  .page-home .site-header--overlay .site-nav button.nav-link {
  border-bottom-color: var(--e74-line-on-dark);
}

.page-home .site-header.is-solid {
  background: rgba(12, 17, 22, 0.94);
  border-bottom-color: var(--e74-line-on-dark);
  color: var(--e74-overlay-ink);
  backdrop-filter: blur(12px);
}

.page-home .site-header.is-solid .site-header__inner {
  grid-template-rows: var(--e74-header-h-compact);
}

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

  .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: var(--e74-header-h);
    column-gap: 2rem;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
  }

  .site-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    height: auto;
    transform: none;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    padding: 0;
    gap: 0;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    overflow: visible;
  }

  .site-nav__panel {
    display: contents;
  }

  .site-nav__footer {
    display: none;
  }

  .site-header__utility {
    grid-column: 3;
    grid-row: 1;
  }

  .site-nav__links {
    display: flex;
    align-items: center;
    gap: clamp(1.1rem, 1.6vw, 1.75rem);
  }

  .site-nav a.nav-link,
  .site-nav button.nav-link {
    position: relative;
    border-bottom: none;
    padding: 0.45rem 0;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .site-nav button.nav-link {
    width: auto;
    justify-content: flex-start;
  }

  .site-nav a.nav-link::after,
  .site-nav button.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 160ms ease;
    pointer-events: none;
  }

  .site-nav a.nav-link:hover::after,
  .site-nav a.nav-link:focus-visible::after,
  .site-nav a.nav-link.is-active::after,
  .site-nav button.nav-link:hover::after,
  .site-nav button.nav-link:focus-visible::after,
  .site-nav button.nav-link.is-active::after,
  .nav-item--has-children.is-open > .nav-link::after,
  .nav-item--has-children.is-open > .nav-item__parent-row > .nav-link::after {
    transform: scaleX(1);
  }

  .site-header--inner .site-nav a.nav-link::after,
  .site-header--inner .site-nav button.nav-link::after {
    background: var(--e74-accent);
  }

  .nav-item--has-children {
    position: relative;
  }

  .nav-item__parent-row {
    width: auto;
    gap: 0.1rem;
    border-bottom: none;
  }

  .nav-item__expand {
    width: 1.35rem;
    height: auto;
    align-self: stretch;
    opacity: 0.7;
  }

  .nav-item__expand .nav-link__chevron {
    margin-left: 0;
  }

  .nav-link__chevron {
    width: 0.35rem;
    height: 0.35rem;
    margin-left: 0.35rem;
  }

  /*
   * Submenu starts at 100% of the trigger (no dead air gap).
   * Top padding is a transparent hover bridge so the cursor can
   * travel from label → panel without closing the menu.
   */
  .nav-submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 12.5rem;
    padding: 0.65rem 0 0;
    gap: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    z-index: 40;
    overflow: visible;
  }

  .nav-submenu::before {
    content: "";
    position: absolute;
    top: 0.65rem;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--e74-ink) 12%, transparent);
    border-radius: var(--e74-radius-badge);
    box-shadow: 0 14px 36px rgba(12, 17, 22, 0.14);
    z-index: -1;
  }

  .page-home .site-header--overlay .nav-submenu::before,
  .page-home .site-header.is-solid .nav-submenu::before {
    background: rgba(12, 17, 22, 0.96);
    border-color: color-mix(in srgb, #fff 14%, transparent);
  }

  .nav-submenu__link {
    position: relative;
    padding: 0.55rem 0.7rem;
    font-size: 0.86rem;
    border-radius: 0;
    color: var(--e74-ink);
  }

  .page-home .site-header--overlay .nav-submenu__link,
  .page-home .site-header.is-solid .nav-submenu__link {
    color: var(--e74-overlay-ink);
  }

  .nav-submenu__link:hover,
  .nav-submenu__link:focus-visible,
  .nav-submenu__link.is-active {
    background: color-mix(in srgb, var(--e74-accent) 12%, transparent);
    color: var(--e74-accent);
  }

  .page-home .site-header--overlay .nav-submenu__link:hover,
  .page-home .site-header--overlay .nav-submenu__link:focus-visible,
  .page-home .site-header--overlay .nav-submenu__link.is-active,
  .page-home .site-header.is-solid .nav-submenu__link:hover,
  .page-home .site-header.is-solid .nav-submenu__link:focus-visible,
  .page-home .site-header.is-solid .nav-submenu__link.is-active {
    background: color-mix(in srgb, #fff 10%, transparent);
    color: #fff;
  }

  /* Nested flyout (Network → Meshtastic → nodes) */
  .nav-item--nested {
    position: relative;
  }

  .nav-submenu__parent-row {
    gap: 0;
  }

  .nav-submenu__parent-row > .nav-submenu__link {
    padding-right: 0.15rem;
  }

  .nav-submenu__expand {
    width: 2rem;
    height: auto;
    align-self: stretch;
    opacity: 0.7;
  }

  .nav-submenu__expand .nav-link__chevron {
    transform: rotate(-45deg);
  }

  .nav-item--nested.is-open > .nav-submenu__parent-row .nav-link__chevron,
  .nav-item--nested:focus-within > .nav-submenu__parent-row .nav-link__chevron {
    transform: rotate(45deg);
  }

  .nav-submenu--nested {
    top: 0;
    left: calc(100% - 0.25rem);
    right: auto;
    transform: none;
    min-width: 11.5rem;
    padding: 0 0 0 0.35rem;
    z-index: 45;
  }

  .nav-submenu--nested::before {
    top: 0;
    left: 0.35rem;
  }

  .page-home .site-header--overlay .nav-submenu__expand,
  .page-home .site-header.is-solid .nav-submenu__expand {
    color: var(--e74-overlay-ink);
  }

  .lang-switch--bar {
    padding-left: 1.25rem;
    border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  }

  .lang-switch--bar a + a {
    border-left-color: transparent;
  }

  .lang-switch--bar a + a::before {
    content: "·";
    display: inline-block;
    margin-right: 0.45rem;
    opacity: 0.45;
  }

  .page-home .site-header.is-solid .site-header__inner {
    grid-template-rows: var(--e74-header-h-compact);
  }
}

/* -------------------------------------------------------------------------- */
/* Header — inner (solid light; utility strip ABOVE main nav)                 */
/* -------------------------------------------------------------------------- */

.site-header--inner {
  background: var(--e74-header-inner-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--e74-ink) 8%, transparent);
  color: var(--e74-ink);
  backdrop-filter: none;
}

.site-header--inner .site-header__inner {
  grid-template-rows: var(--e74-header-inner-h);
}

.site-header--inner .brand__logo {
  height: 2.35rem;
}

.site-header--inner .brand__callsign {
  font-size: 1.2rem;
  letter-spacing: 0.14em;
}

.site-header--inner .site-nav a.nav-link.is-active {
  color: var(--e74-ink);
  opacity: 1;
}

/* Desktop utility strip — hidden at hamburger breakpoint (<1100px) */
.site-header__meta {
  display: none;
  align-items: center;
  min-height: var(--e74-header-meta-h);
  max-height: 3rem;
  overflow: hidden;
  background: var(--e74-header-inner-surface);
  color: var(--e74-ink-muted);
  border-bottom: 1px solid color-mix(in srgb, var(--e74-ink) 8%, transparent);
  transition:
    max-height 220ms ease,
    min-height 220ms ease,
    opacity 180ms ease,
    border-bottom-width 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .site-header__meta {
    transition: none;
  }
}

.site-header__meta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e74-space-4);
  min-height: var(--e74-header-meta-h);
  padding-block: 0.3rem;
}

.site-header__meta-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  min-width: 0;
}

.site-header__meta-sep {
  margin-inline: 0.4rem;
  opacity: 0.5;
}

.site-header__meta-map {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0;
  color: inherit;
  text-decoration: none;
  opacity: 0.88;
  line-height: inherit;
}

.site-header__meta-map:hover,
.site-header__meta-map:focus-visible,
.site-header__meta-map.is-active {
  color: var(--e74-accent);
  opacity: 1;
  outline: none;
}

.site-header__meta-map-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
  line-height: 0;
}

.site-header__meta-map-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.site-header__meta-map-label {
  line-height: inherit;
}

.site-header__meta-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.site-header__meta-email {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: inherit;
  text-decoration: none;
  opacity: 0.88;
}

.site-header__meta-email:hover,
.site-header__meta-email:focus-visible {
  color: var(--e74-accent);
  opacity: 1;
}

.site-header__meta-social {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__meta-social a,
.site-header__meta-social-pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--e74-ink-muted);
  text-decoration: none;
  opacity: 0.9;
}

.site-header__meta-social a:hover,
.site-header__meta-social a:focus-visible {
  color: var(--e74-accent);
  opacity: 1;
}

.site-header__meta-social-pending {
  cursor: default;
  opacity: 0.75;
}

.site-header__meta-social svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

/* Homepage: same utility content, dark surface matching overlay header */
.page-home .site-header__meta {
  background: rgba(7, 12, 18, 0.55);
  color: color-mix(in srgb, var(--e74-overlay-ink) 72%, transparent);
  border-bottom-color: color-mix(in srgb, #fff 12%, transparent);
}

.page-home .site-header.is-solid .site-header__meta {
  background: rgba(8, 12, 16, 0.72);
  border-bottom-color: var(--e74-line-on-dark);
}

.page-home .site-header__meta-email:hover,
.page-home .site-header__meta-email:focus-visible,
.page-home .site-header__meta-social a:hover,
.page-home .site-header__meta-social a:focus-visible,
.page-home .site-header__meta-map:hover,
.page-home .site-header__meta-map:focus-visible,
.page-home .site-header__meta-map.is-active {
  color: var(--e74-accent);
}

.page-home .site-header__meta-social a,
.page-home .site-header__meta-social-pending {
  color: color-mix(in srgb, var(--e74-overlay-ink) 78%, transparent);
}

@media (max-width: 1099.98px) {
  .site-header--inner .site-header__inner {
    grid-template-rows: var(--e74-header-h-compact);
  }

  .site-header--inner .site-nav {
    background: var(--e74-header-inner-surface);
  }
}

@media (min-width: 1100px) {
  .site-header__meta {
    display: flex;
  }

  .site-header.is-scrolled .site-header__meta {
    max-height: 0;
    min-height: 0;
    opacity: 0;
    border-bottom-width: 0;
    pointer-events: none;
  }

  .site-header--inner .site-header__inner {
    grid-template-rows: var(--e74-header-inner-h);
  }
}

/* -------------------------------------------------------------------------- */
/* Inner-page hero / title band (reusable page identity)                      */
/* Background layer is separable for a future animated treatment.             */
/* -------------------------------------------------------------------------- */

.inner-page-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: clamp(6.25rem, 14vw, 10.25rem);
  padding-block: var(--e74-space-5);
  overflow: hidden;
  color: var(--e74-ink);
  border-bottom: 1px solid var(--e74-line);
}

.inner-page-hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--e74-ink) 4%, var(--e74-bg)) 0%,
      var(--e74-bg) 48%,
      color-mix(in srgb, var(--e74-ink) 6%, #e8ecf0) 100%
    );
}

.inner-page-hero__background::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image:
    /* Minor grid */
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 23px,
      color-mix(in srgb, var(--e74-ink) 7%, transparent) 23px,
      color-mix(in srgb, var(--e74-ink) 7%, transparent) 24px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 23px,
      color-mix(in srgb, var(--e74-ink) 6%, transparent) 23px,
      color-mix(in srgb, var(--e74-ink) 6%, transparent) 24px
    ),
    /* Major grid every 4 cells */
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 95px,
      color-mix(in srgb, var(--e74-ink) 14%, transparent) 95px,
      color-mix(in srgb, var(--e74-ink) 14%, transparent) 96px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 95px,
      color-mix(in srgb, var(--e74-ink) 12%, transparent) 95px,
      color-mix(in srgb, var(--e74-ink) 12%, transparent) 96px
    );
  /* Reversed radial: clear behind title, grid builds outward, soft fade at rim */
  mask-image: radial-gradient(
    ellipse 70% 80% at 18% 48%,
    transparent 0%,
    transparent 18%,
    #000 52%,
    #000 78%,
    transparent 100%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 70% 80% at 18% 48%,
    transparent 0%,
    transparent 18%,
    #000 52%,
    #000 78%,
    transparent 100%
  );
}

.inner-page-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: var(--e74-space-3);
}

.inner-page-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.15rem, 4.2vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: var(--e74-tracking-heading);
  color: var(--e74-ink);
}

.inner-page-hero__breadcrumb {
  margin: 0;
}

.inner-page-hero__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
}

.inner-page-hero__crumb-link {
  color: inherit;
  text-decoration: none;
  opacity: 0.78;
}

.inner-page-hero__crumb-link:hover,
.inner-page-hero__crumb-link:focus-visible {
  opacity: 1;
  color: var(--e74-ink);
}

.inner-page-hero__crumb.is-current {
  color: var(--e74-ink);
  font-weight: 500;
  opacity: 1;
}

.inner-page-hero__crumb-sep {
  opacity: 0.4;
}

/* FrequencyWindow bars rail — bottom edge, right ~2/3; left ~1/3 clear for titles */
.inner-page-hero__wave {
  position: absolute;
  left: 33.333%;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 2.85rem;
  pointer-events: none;
  overflow: hidden;
}

.freq-window--bars-rail,
.inner-page-hero__freq-bars {
  /* Reuse FrequencyWindow bar motion; accent stroke on light hero surface */
  --freq-signal: var(--e74-accent);
  --freq-signal-bar: color-mix(in srgb, var(--e74-accent) 42%, transparent);
  --freq-signal-bar-mid: color-mix(in srgb, var(--e74-accent) 62%, transparent);
  --freq-signal-bar-peak: color-mix(in srgb, var(--e74-accent) 88%, transparent);
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  vertical-align: top;
  background: transparent;
  color: transparent;
}

.freq-window--bars-rail .freq-window__bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;
}

.freq-window--bars-rail .freq-window__bar {
  flex: 1 1 0;
  width: auto;
  min-width: 1px;
  max-width: 2px;
  height: 100%;
  transform: scaleY(var(--freq-h, 0.12));
  transform-origin: bottom center;
  background: var(--freq-signal-bar);
}

/* Taller travel than inline FrequencyWindow bars */
.freq-window--bars-rail.is-locked .freq-window__bar {
  animation: freq-signal-drift-rail var(--freq-dur, 1.9s) ease-in-out var(--freq-delay, 0s) infinite;
}

@keyframes freq-signal-drift-rail {
  0%,
  100% {
    transform: scaleY(calc(var(--freq-h, 0.12) * 1.15));
  }
  28% {
    transform: scaleY(calc(var(--freq-h, 0.12) * 0.35));
  }
  52% {
    transform: scaleY(calc(var(--freq-h, 0.12) * 2.15));
  }
  74% {
    transform: scaleY(calc(var(--freq-h, 0.12) * 0.7));
  }
}

.page-news__placeholder,
.page-inner__placeholder {
  min-height: var(--e74-space-6, 2rem);
}

/* —— News index listing (2/3 + sidebar) —— */
.news-index {
  padding-block: 0 var(--e74-space-8);
}

.news-index__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

.news-index__main {
  min-width: 0;
}

.news-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e74-space-4);
  margin-bottom: var(--e74-space-5);
  padding-bottom: var(--e74-space-5);
  border-bottom: 1px solid color-mix(in srgb, var(--e74-ink) 8%, transparent);
}

.news-filters__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: min(100%, 14rem);
  flex: 1 1 12rem;
}

.news-filters__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
}

.news-filters__select {
  width: 100%;
  min-height: 2.65rem;
  padding: 0.55rem 2.4rem 0.55rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--e74-ink) 14%, transparent);
  border-radius: var(--e74-radius-control);
  background-color: var(--e74-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%230e1318' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 0.75rem;
  color: var(--e74-ink);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  appearance: none;
  cursor: pointer;
}

.news-filters__select:hover {
  border-color: color-mix(in srgb, var(--e74-accent) 45%, transparent);
}

.news-filters__select:focus-visible {
  outline: 2px solid var(--e74-accent);
  outline-offset: 2px;
}

.news-filters__submit {
  align-self: flex-end;
}

.news-index__context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0 0 var(--e74-space-4);
  font-size: 0.9rem;
  color: var(--e74-ink-muted);
}

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

.news-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--e74-space-5);
  min-width: 0;
}

.news-sidebar__block {
  padding: var(--e74-space-4);
  border-radius: var(--e74-radius-card);
  border: 1px solid color-mix(in srgb, var(--e74-ink) 8%, transparent);
  background: var(--e74-surface);
}

.news-sidebar__title {
  margin: 0 0 var(--e74-space-3);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: var(--e74-tracking-heading-sm);
  color: var(--e74-ink);
  text-transform: none;
}

.news-sidebar__search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
}

.news-sidebar__search-input {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--e74-ink) 14%, transparent);
  border-radius: var(--e74-radius-control);
  background: var(--e74-bg);
  color: var(--e74-ink);
  font: inherit;
}

.news-sidebar__search-input:focus-visible {
  outline: 2px solid var(--e74-accent);
  outline-offset: 2px;
}

.news-sidebar__search-btn {
  min-height: 2.5rem;
  padding: 0 0.85rem;
  border: 0;
  border-radius: var(--e74-radius-control);
  background: var(--e74-accent);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.news-sidebar__search-btn:hover,
.news-sidebar__search-btn:focus-visible {
  background: var(--e74-ink);
  color: var(--e74-accent);
  outline: none;
}

.news-sidebar__clear {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: 0.82rem;
  color: var(--e74-ink-muted);
}

.news-sidebar__recent {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.news-sidebar__recent-link {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  text-decoration: none;
  color: inherit;
}

.news-sidebar__recent-link:hover .news-sidebar__recent-title,
.news-sidebar__recent-link:focus-visible .news-sidebar__recent-title {
  color: var(--e74-accent);
  outline: none;
}

.news-sidebar__recent-media {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border-radius: var(--e74-radius-control);
  background: var(--e74-section-dark-soft);
}

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

.news-sidebar__recent-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.news-sidebar__recent-title {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--e74-ink);
}

.news-sidebar__recent-date {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--e74-ink-muted);
}

.news-sidebar__archive {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-sidebar__archive-link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--e74-ink) 12%, transparent);
  background: var(--e74-bg);
  color: var(--e74-ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-decoration: none;
}

.news-sidebar__archive-link:hover,
.news-sidebar__archive-link:focus-visible {
  border-color: color-mix(in srgb, var(--e74-accent) 50%, transparent);
  outline: none;
}

.news-sidebar__archive-link.is-active {
  background: var(--e74-accent);
  border-color: var(--e74-accent);
  color: #fff;
}

.news-sidebar__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.news-sidebar__social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--e74-ink);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
}

.news-sidebar__social-link:hover,
.news-sidebar__social-link:focus-visible {
  color: var(--e74-accent);
  outline: none;
}

.news-sidebar__social-link--pending {
  opacity: 0.45;
  cursor: default;
}

.news-sidebar__social-icon {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  color: inherit;
}

.news-sidebar__social-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.news-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e74-space-5);
}

.news-index__empty {
  margin: 0;
  color: var(--e74-ink-muted);
}

.news-list-card {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  gap: 0;
  overflow: hidden;
  border-radius: var(--e74-radius-card);
  background: var(--e74-surface);
  border: 1px solid color-mix(in srgb, var(--e74-ink) 8%, transparent);
  min-height: 14.5rem;
}

.news-list-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--e74-space-3);
  padding: clamp(1.1rem, 2vw, 1.55rem);
  min-width: 0;
}

.news-list-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-list-card__tag.feature-card__badge--accent {
  color: #fff;
}

.news-list-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: var(--e74-tracking-heading-sm);
}

.news-list-card__title a {
  color: var(--e74-ink);
  text-decoration: none;
}

.news-list-card__title a:hover,
.news-list-card__title a:focus-visible {
  color: var(--e74-accent);
  outline: none;
}

.news-list-card__summary {
  margin: 0;
  flex: 1 1 auto;
  color: var(--e74-ink-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-list-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e74-space-3);
  margin-top: auto;
  padding-top: var(--e74-space-2);
}

.news-list-card__date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--e74-ink-muted);
}

.news-list-card__date-icon {
  display: inline-flex;
  color: var(--e74-ink-muted);
}

.news-list-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--e74-accent);
  text-decoration: none;
  white-space: nowrap;
}

.news-list-card__more:hover,
.news-list-card__more:focus-visible {
  color: var(--e74-ink);
  outline: none;
}

.news-list-card__media {
  display: block;
  position: relative;
  min-height: 100%;
  background: var(--e74-section-dark-soft);
  text-decoration: none;
}

.news-list-card__img,
.news-list-card__media-fallback {
  width: 100%;
  height: 100%;
  min-height: 14.5rem;
  object-fit: cover;
}

.news-list-card__media-fallback {
  display: block;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--e74-section-dark) 88%, var(--e74-accent)) 0%,
      var(--e74-section-dark) 100%
    );
}

.news-index__pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: var(--e74-space-6) 0 0;
  padding: 0;
}

.news-index__pager li {
  margin: 0;
}

.news-index__pager a,
.news-index__pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.55rem;
  border-radius: var(--e74-radius-control);
  border: 1px solid color-mix(in srgb, var(--e74-ink) 12%, transparent);
  background: var(--e74-surface);
  color: var(--e74-ink);
  text-decoration: none;
  font-size: 0.88rem;
}

.news-index__pager .active a,
.news-index__pager .active span {
  background: var(--e74-ink);
  border-color: var(--e74-ink);
  color: var(--e74-overlay-ink);
}

.news-index__pager .disabled span {
  opacity: 0.4;
}

@media (max-width: 899px) {
  .news-index__layout {
    grid-template-columns: 1fr;
  }

  .news-sidebar {
    order: 2;
  }

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

  .news-list-card__media {
    order: -1;
    min-height: 12rem;
  }

  .news-list-card__img,
  .news-list-card__media-fallback {
    min-height: 12rem;
  }
}

/* —— Featured news carousel (Swiper) —— */
.news-feat-carousel {
  padding-block: var(--e74-space-5) var(--e74-space-7);
}

.news-feat-carousel--embed {
  padding-block: 0 var(--e74-space-4);
}

.news-feat-carousel__intro {
  margin-bottom: var(--e74-space-5);
}

.news-feat-carousel__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--e74-tracking-heading-sm);
  color: var(--e74-ink);
  text-transform: none;
}

/*
 * Track = exact .shell content width.
 * Prev/next sit in the side gutters outside that column.
 */
.news-feat-carousel__stage {
  --nfc-shell: min(100% - (var(--e74-gutter) * 2), var(--e74-max));
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    var(--nfc-shell)
    minmax(0, 1fr);
  align-items: center;
}

.news-feat-carousel__track {
  grid-column: 2;
  min-width: 0;
  width: 100%;
}

.news-feat-carousel__swiper {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-bottom: 0.15rem;
}

.news-feat-carousel__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--e74-ink) 14%, transparent);
  border-radius: 999px;
  background: var(--e74-surface);
  color: var(--e74-ink);
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
}

.news-feat-carousel__nav--prev {
  grid-column: 1;
  justify-self: center;
}

.news-feat-carousel__nav--next {
  grid-column: 3;
  justify-self: center;
}

.news-feat-carousel__nav:hover,
.news-feat-carousel__nav:focus-visible {
  background: var(--e74-ink);
  color: var(--e74-overlay-ink);
  border-color: var(--e74-ink);
  outline: none;
}

.news-feat-carousel__nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.news-feat-card {
  position: relative;
  display: block;
  height: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--e74-radius-card);
  background: var(--e74-section-dark);
  color: var(--e74-overlay-ink);
  text-decoration: none;
  isolation: isolate;
}

.news-feat-card:hover,
.news-feat-card:focus-visible {
  color: var(--e74-overlay-ink);
  outline: none;
}

.news-feat-card:focus-visible {
  box-shadow: 0 0 0 2px var(--e74-bg), 0 0 0 4px var(--e74-accent);
}

.news-feat-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--e74-section-dark-soft) 70%, #000);
}

.news-feat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Graphite veil: true opacity ramp 0 → 1 over the lower half */
.news-feat-card__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(28 34 40 / 0) 0%,
    rgb(28 34 40 / 0) 28%,
    rgb(28 34 40 / 0.35) 48%,
    rgb(28 34 40 / 0.72) 66%,
    rgb(28 34 40 / 1) 86%,
    rgb(28 34 40 / 1) 100%
  );
}

.news-feat-card__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--e74-space-4);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
}

.news-feat-card__title {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: var(--e74-tracking-heading-sm);
  color: #fff;
}

.news-feat-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e74-space-3);
}

.news-feat-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
}

.news-feat-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.news-feat-card__tag.feature-card__badge--accent {
  background: var(--e74-accent-soft);
  color: #fff;
}

.news-feat-card__date {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--e74-overlay-ink) 72%, transparent);
}

.news-feat-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--e74-section-dark-line);
  color: #fff;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.news-feat-card:hover .news-feat-card__arrow,
.news-feat-card:focus-visible .news-feat-card__arrow {
  background: var(--e74-accent);
  border-color: var(--e74-accent);
  color: #fff;
}

@media (max-width: 1399px) {
  /*
   * Same gutter math as .radio-outdoors: below ~1175px side columns are
   * narrower than the nav buttons and overhang the viewport. Keep side
   * placement only once gutters reliably fit the controls.
   */
  .news-feat-carousel__stage {
    display: grid;
    grid-template-columns: var(--nfc-shell);
    justify-content: center;
    row-gap: var(--e74-space-4);
  }

  .news-feat-carousel__track {
    grid-column: 1;
    grid-row: 1;
  }

  .news-feat-carousel__nav--prev,
  .news-feat-carousel__nav--next {
    grid-column: 1;
    grid-row: 2;
    justify-self: unset;
  }

  .news-feat-carousel__nav--prev {
    justify-self: start;
  }

  .news-feat-carousel__nav--next {
    justify-self: end;
  }

  .news-feat-card {
    aspect-ratio: 5 / 4;
  }
}

@media (max-width: 899.98px) {
  .inner-page-hero {
    min-height: clamp(9.5rem, 34vw, 12rem);
    padding-block: var(--e74-space-6);
  }

  .inner-page-hero__title {
    font-size: clamp(1.95rem, 7.5vw, 2.55rem);
  }

  .inner-page-hero__content {
    gap: var(--e74-space-4);
  }
}

/* -------------------------------------------------------------------------- */
/* Section navigation                                                         */
/* -------------------------------------------------------------------------- */

.section-nav-bar {
  position: sticky;
  top: var(--e74-header-offset, var(--e74-header-h));
  z-index: 45;
  background: rgba(243, 245, 247, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--e74-line);
}

.section-nav {
  width: min(100% - (var(--e74-gutter) * 2), var(--e74-max));
  margin-inline: auto;
}

.section-nav__track {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.section-nav__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--e74-ink-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.section-nav__link.is-active {
  color: var(--e74-ink);
  border-bottom-color: var(--e74-accent);
}

.section-nav__link:focus-visible {
  outline: 2px solid var(--e74-accent);
  outline-offset: -2px;
}

/* -------------------------------------------------------------------------- */
/* Main                                                                       */
/* -------------------------------------------------------------------------- */

.site-main {
  flex: 1;
}

/* html is the scrolling element — body-only clip does not always stop page scroll */
html:has(body.page-home) {
  overflow-x: hidden;
}

.page-home {
  position: relative;
  overflow-x: clip;
  overflow-x: hidden;
}

.page-home .site-main {
  padding: 0;
}

/* -------------------------------------------------------------------------- */
/* Immersive hero — one cinematic first viewport                              */
/* -------------------------------------------------------------------------- */

.home-hero {
  position: relative;
  /* Prefer locked px height (JS); svh fallback before JS runs */
  min-height: var(--home-hero-height, 100svh);
  height: var(--home-hero-height, 100svh);
  max-height: var(--home-hero-height, 100svh);
  display: flex;
  color: var(--e74-overlay-ink);
  overflow: hidden;
  isolation: isolate;
  background: var(--e74-dark);
}

.home-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.home-hero__swiper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-hero__swiper .swiper-wrapper,
.home-hero__swiper .swiper-slide {
  height: 100%;
}

.home-hero__slide {
  position: relative;
  overflow: hidden;
}

.home-hero__media .img-cover,
.home-hero__media img,
.home-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Per-slide art direction, with global token fallback */
  object-position: var(--e74-hero-slide-position, var(--e74-hero-media-position));
  transform: scale(1.035);
  transition: opacity 0.9s ease, transform 1.35s ease;
  opacity: 0;
}

.home-hero.is-ready .home-hero__media .img-cover,
.home-hero.is-ready .home-hero__media img,
.home-hero.is-ready .home-hero__img {
  opacity: 1;
  transform: scale(1);
}

.home-hero__pagination {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(5.5rem, 12svh, 7.5rem);
  transform: translateX(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  pointer-events: auto;
}

.home-hero--multi .home-hero__pagination {
  display: flex;
}

.home-hero__bullet {
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease, width 200ms ease;
}

.home-hero__bullet.is-active {
  width: 1.15rem;
  background: var(--e74-accent);
  transform: none;
}

.home-hero__bullet:focus-visible {
  outline: 2px solid var(--e74-accent);
  outline-offset: 3px;
}

.home-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Stronger left + top falloff so white type stays readable on busy photos */
  background:
    linear-gradient(
      105deg,
      rgba(7, 12, 18, 0.78) 0%,
      rgba(7, 12, 18, 0.58) 28%,
      rgba(7, 12, 18, 0.28) 52%,
      rgba(7, 12, 18, 0.12) 72%,
      rgba(7, 12, 18, 0.18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(7, 12, 18, 0.55) 0%,
      rgba(7, 12, 18, 0.18) 22%,
      rgba(7, 12, 18, 0.2) 58%,
      rgba(7, 12, 18, 0.72) 100%
    );
}

.home-hero__frame {
  position: relative;
  z-index: 2;
  width: min(100% - (var(--e74-gutter) * 2), var(--e74-max));
  margin-inline: auto;
  min-height: var(--home-hero-height, 100svh);
  height: var(--home-hero-height, 100svh);
  max-height: var(--home-hero-height, 100svh);
  display: flex;
  flex-direction: column;
  padding-top: var(--e74-header-h);
}

.home-hero__stage {
  flex: 1 1 auto;
  display: flex;
  /* Trust: editorial mass sits mid-left, not glued to the footer rail */
  align-items: center;
  padding:
    clamp(2.5rem, 5.5svh, 5.5rem)
    0
    clamp(1.25rem, 2.5svh, 2.5rem);
  min-height: 0;
}

.home-hero__copy {
  width: min(100%, var(--e74-hero-copy-max));
  max-width: var(--e74-hero-copy-max);
  display: grid;
  gap: clamp(0.85rem, 1.4svh, 1.35rem);
}

.home-hero__identity {
  display: grid;
  gap: 0.15rem;
  margin-bottom: 0.15rem;
}

.home-hero__club {
  margin: 0;
  font-size: clamp(0.92rem, 1.2vw, 1.02rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--e74-overlay-ink) 82%, transparent);
}

.home-hero__place {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.58;
}

/* Shared display title role — locale strings stay natural case; CSS owns presentation */
.home-hero__headline,
.hero-title {
  margin: 0;
  width: min(100%, var(--e74-hero-title-max));
  max-width: var(--e74-hero-title-max);
  font-family: var(--font-display);
  font-size: clamp(2.65rem, 4.6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: var(--e74-tracking-heading);
  font-weight: 600;
  text-transform: uppercase;
}

.hero-title__line {
  display: block;
}

.hero-title__line--freq {
  margin-block: 0.06em;
}

/*
 * EN “Connections that last” is wider than LAT/ĆIR “Veze koje traju”.
 * Desktop: widen EN copy + slightly tighten highlight type so it stays one line.
 * Narrow: allow wrap; pad the orange field so glyphs are not clipped.
 */
html[lang="en"] {
  --e74-hero-copy-max: 50rem;
  --e74-hero-title-max: 52rem;
}

.home-hero .freq-window--hero {
  max-width: 100%;
}

.home-hero .freq-window--hero .freq-window__field {
  max-width: 100%;
  box-sizing: border-box;
  padding-block: 0.1em 0.22em;
}

.home-hero .freq-window--hero .freq-window__text {
  max-width: 100%;
  line-height: 1.12;
}

html[lang="en"] .home-hero .freq-window--hero .freq-window__text {
  white-space: nowrap;
  font-size: 0.88em;
}

@media (max-width: 1099px) {
  html[lang="en"] {
    --e74-hero-copy-max: 38rem;
    --e74-hero-title-max: 46rem;
  }

  html[lang="en"] .home-hero .freq-window--hero .freq-window__text {
    white-space: normal;
    text-wrap: balance;
    font-size: 1em;
  }
}

.home-hero__support {
  margin: 0;
  width: min(100%, var(--e74-hero-support-max));
  max-width: var(--e74-hero-support-max);
  font-size: clamp(0.98rem, 1.35vw, 1.08rem);
  line-height: 1.5;
  opacity: 0.8;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.95rem 1.65rem;
  padding-top: 0.45rem;
}

.home-hero__foot {
  flex: 0 0 auto;
  display: grid;
  gap: 0.55rem;
  padding-bottom: 0;
  color: var(--e74-overlay-ink);
}

.home-hero__foot .tech-meta {
  padding-bottom: 0.1rem;
  opacity: 0.7;
}

.home-hero__foot .tech-rail {
  /*
   * Full-bleed past .home-hero__frame. 100vw can be ~15px wider than
   * the content box when a classic scrollbar is present, but .home-hero
   * already uses overflow:hidden so the excess is clipped and does not
   * grow page scrollWidth.
   */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-top-color: var(--e74-line-on-dark);
  background: rgba(7, 11, 15, 0.18);
  backdrop-filter: blur(8px);
}

.home-hero__foot .tech-rail__inner {
  width: min(100% - (var(--e74-gutter) * 2), var(--e74-max));
  margin-inline: auto;
}

.home-hero__foot .tech-rail__link {
  min-height: 2.65rem;
  padding: 0.55rem 0.75rem;
}

/* Mobile / tablet — still one photographic composition (Conseil mobile) */
@media (max-width: 899px) {
  .page-home .site-header--overlay {
    background: rgba(7, 12, 18, 0.5);
    border-bottom-color: color-mix(in srgb, #fff 10%, transparent);
    color: var(--e74-overlay-ink);
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
  }

  .page-home .site-header--overlay.is-open,
  .page-home .site-header--overlay:has(.site-nav.is-open) {
    background: rgba(12, 17, 22, 0.96);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .home-hero {
    min-height: var(--home-hero-height, 100svh);
    height: var(--home-hero-height, 100svh);
    max-height: var(--home-hero-height, 100svh);
  }

  .home-hero__media .img-cover,
  .home-hero__media img,
  .home-hero__img {
    object-position: var(--e74-hero-slide-position-mobile, var(--e74-hero-media-position-mobile));
  }

  .home-hero__pagination {
    bottom: clamp(4.75rem, 11svh, 6.25rem);
  }

  .home-hero__veil {
    background:
      linear-gradient(
        180deg,
        rgba(7, 12, 18, 0.62) 0%,
        rgba(7, 12, 18, 0.32) 28%,
        rgba(7, 12, 18, 0.4) 58%,
        rgba(7, 12, 18, 0.78) 100%
      ),
      linear-gradient(
        90deg,
        rgba(7, 12, 18, 0.55) 0%,
        rgba(7, 12, 18, 0.22) 55%,
        rgba(7, 12, 18, 0.2) 100%
      );
  }

  .home-hero__frame {
    min-height: var(--home-hero-height, 100svh);
    height: var(--home-hero-height, 100svh);
    max-height: var(--home-hero-height, 100svh);
  }

  .home-hero__stage {
    /* Locked mobile: editorial stack sits high, not glued to the foot rail */
    align-items: flex-start;
    padding: 0.85rem 0 1rem;
  }

  .home-hero__copy {
    width: min(100%, var(--e74-hero-copy-max));
    max-width: var(--e74-hero-copy-max);
    gap: 0.7rem;
  }

  .home-hero__headline,
  .hero-title {
    width: min(100%, var(--e74-hero-title-max));
    max-width: var(--e74-hero-title-max);
    font-size: clamp(2.15rem, 8.6vw, 2.7rem);
    line-height: 1.08;
  }

  .home-hero__support {
    width: min(100%, var(--e74-hero-support-max));
    max-width: var(--e74-hero-support-max);
    font-size: 0.95rem;
  }

  /* Locked mobile: CTA pair stays one row; clear separation from copy above */
  .home-hero__actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem 0.75rem;
    width: 100%;
    margin-top: 1.15rem;
    padding-top: 0.2rem;
  }

  .home-hero__actions .btn {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 2.4rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.66rem;
    letter-spacing: 0.045em;
    white-space: nowrap;
  }

  .home-hero__actions .btn--text {
    min-height: auto;
    padding: 0.35rem 0;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
  }

  .home-hero__foot .tech-meta {
    font-size: 0.6rem;
    letter-spacing: 0.07em;
  }

  /* Keep annotation; drop rail numbers density on narrow phones */
  .home-hero__foot .tech-rail__n {
    display: none;
  }

  .home-hero__foot .tech-rail__inner {
    display: flex;
    overflow-x: auto;
    width: 100%;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .home-hero__foot .tech-rail__link {
    flex: 0 0 auto;
    min-width: 5.75rem;
    justify-content: center;
    border-right: 1px solid var(--e74-line-on-dark);
  }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .home-hero__headline,
  .hero-title {
    font-size: clamp(2.35rem, 3.9vw, 3.35rem);
  }
}

/* -------------------------------------------------------------------------- */
/* Infrastructure index + reusable feature cards                              */
/* -------------------------------------------------------------------------- */

.infra-index {
  background: var(--e74-bg);
  border-bottom: 1px solid var(--e74-line-strong);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0 clamp(1.5rem, 3vw, 2.35rem);
}

.infra-index__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--e74-line-strong);
}

.infra-index__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.infra-index__note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-accent);
}

.feature-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

@media (min-width: 1100px) {
  .feature-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 100%;
  padding: 1.55rem 1.45rem 1.35rem;
  background: var(--e74-surface);
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-card);
  color: var(--e74-ink);
  text-decoration: none;
  transition: transform var(--e74-ease), box-shadow var(--e74-ease), border-color var(--e74-ease);
}

.feature-card:hover {
  color: var(--e74-ink);
  border-color: var(--e74-line-strong);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(14, 19, 24, 0.06);
}

.feature-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.feature-card__icon {
  display: inline-flex;
  width: 1.7rem;
  height: 1.7rem;
  color: var(--e74-ink);
}

.feature-card__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-card__badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--e74-radius-badge);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.feature-card__badge--muted {
  background: #eef1f4;
  color: var(--e74-ink);
}

.feature-card__badge--accent {
  background: var(--e74-accent-soft);
  color: var(--e74-ink);
}

.feature-card__badge--dark {
  background: rgba(14, 19, 24, 0.16);
  color: #fff;
}

.feature-card__title {
  margin: 0;
  font-size: clamp(1.35rem, 1.8vw, 1.65rem);
  font-weight: 700;
  letter-spacing: var(--e74-tracking-heading-sm);
  line-height: 1.15;
}

.feature-card__desc {
  margin: 0;
  flex: 1 1 auto;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--e74-ink-muted);
}

.feature-card__rule {
  height: 1px;
  margin: 0.35rem 0 0.15rem;
  background: var(--e74-line);
}

.feature-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 2.85rem;
  padding: 0.7rem 1rem;
  border-radius: calc(var(--e74-radius-card) - 4px);
  background: var(--e74-accent);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.feature-card:hover .feature-card__cta {
  filter: brightness(1.05);
}

/* DMR dual-site card — denser technical stack, unique to this card */
.feature-card--sites {
  gap: 0.7rem;
  padding: 1.35rem 1.25rem 1.2rem;
}

.feature-card--sites .feature-card__title {
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  margin: 0;
}

.infra-sites {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1 1 auto;
  min-width: 0;
}

.infra-site {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border-left: 2px solid var(--e74-accent);
  background: color-mix(in srgb, var(--e74-ink) 3.5%, var(--e74-surface));
  border-radius: 0 var(--e74-radius-control) var(--e74-radius-control) 0;
}

.infra-site__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: var(--e74-tracking-heading-sm);
  line-height: 1.25;
  color: var(--e74-ink);
}

.infra-site__meta,
.infra-site__freq,
.infra-site__id {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.infra-site__freq {
  letter-spacing: 0.03em;
}

.infra-site__id {
  opacity: 0.78;
}

/* Accent / flagship card (Čemernica) */
.feature-card--accent {
  background: var(--e74-accent);
  border-color: var(--e74-accent);
  color: #fff;
}

.feature-card--accent:hover {
  color: #fff;
  border-color: var(--e74-accent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--e74-accent) 35%, transparent);
}

.feature-card--accent .feature-card__icon,
.feature-card--accent .feature-card__title,
.feature-card--accent .feature-card__desc {
  color: #fff;
}

.feature-card--accent .feature-card__desc {
  opacity: 0.92;
}

.feature-card--accent .feature-card__rule {
  background: color-mix(in srgb, #fff 28%, transparent);
}

.feature-card--accent .feature-card__cta {
  background: var(--e74-ink);
  color: #fff;
}

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

.site-footer {
  background: var(--e74-dark);
  color: var(--e74-dark-ink);
  padding: 3rem 0 2rem;
  margin-top: auto;
}

.site-footer a {
  color: #c9d4df;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
}

.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 960px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2rem 2.5rem;
  }
}

.footer-brand .brand__callsign {
  color: #fff;
  font-size: 1.2rem;
}

.footer-brand .brand__name,
.footer-copy {
  color: #9aa8b5;
}

.footer-copy--spaced {
  margin-top: 1rem;
}

.footer-brand .footer-copy {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.footer-copy--ids {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

.footer-copy__sep {
  margin: 0 0.35rem;
  opacity: 0.55;
}

.footer-grid h3 {
  margin: 0 0 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9aa8b5;
  font-weight: 500;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--e74-line-on-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-end;
  color: #9aa8b5;
  font-size: 0.9rem;
}

.footer-bottom__primary {
  display: grid;
  gap: 0.55rem;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  font-size: 0.78rem;
  line-height: 1.4;
}

.footer-legal a {
  color: #8a97a5;
}

.footer-legal a:hover {
  color: #fff;
}

.footer-legal__sep {
  color: #5f6b76;
}

/* Legal document pages */
.legal-page {
  padding: 2.5rem 0 4rem;
  background: var(--e74-surface);
}

.legal-page__shell {
  max-width: 46rem;
}

.legal-page__intro {
  margin-bottom: 1.5rem;
}

.legal-page__title {
  margin: 0.35rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.4vw, 2.1rem);
  letter-spacing: var(--e74-tracking-heading);
  color: var(--e74-ink);
}

.legal-page__updated {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--e74-muted);
}

.legal-page__lead {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--e74-ink-soft, var(--e74-ink));
}

.legal-page__siblings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin: 0 0 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--e74-line);
  font-size: 0.86rem;
}

.legal-page__sibling {
  color: var(--e74-muted);
  text-decoration: none;
}

.legal-page__sibling:hover {
  color: var(--e74-ink);
}

.legal-page__sibling.is-active {
  color: var(--e74-accent);
  font-weight: 600;
}

.legal-page__section {
  margin: 0 0 1.75rem;
}

.legal-page__heading {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: var(--e74-tracking-heading-sm);
  color: var(--e74-ink);
}

.legal-page__body p {
  margin: 0 0 0.75rem;
  line-height: 1.65;
  color: var(--e74-ink-soft, var(--e74-ink));
}

.legal-page__body ul {
  margin: 0 0 0.85rem;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.4rem;
  line-height: 1.55;
  color: var(--e74-ink-soft, var(--e74-ink));
}

/* Form legal consent (small print) — one flowing sentence beside the checkbox */
.form-consent {
  display: block;
}

.form-consent__row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.form-consent__input {
  flex: 0 0 auto;
  margin: 0.15rem 0 0;
  width: 0.85rem;
  height: 0.85rem;
  accent-color: var(--e74-accent);
}

.form-consent__label {
  display: inline;
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--e74-muted);
}

.form-consent__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.form-consent__link:hover {
  color: var(--e74-accent);
}

.form-consent .help-block,
.form-consent .final-cta__error,
.form-consent .training-cta__error,
.form-consent .webshop-card__error {
  margin-top: 0.25rem;
}

.training-cta__field--consent .form-consent__label {
  color: color-mix(in srgb, var(--e74-overlay-ink) 68%, transparent);
}

.training-cta__field--consent .form-consent__link:hover {
  color: var(--e74-accent);
}

.final-cta__field--consent {
  margin-top: 0.15rem;
}

/* -------------------------------------------------------------------------- */
/* Who We Are — Conseil-class identity split + offset Frequency card          */
/* -------------------------------------------------------------------------- */

.who-we-are {
  background: var(--e74-surface);
  border-bottom: 1px solid var(--e74-line);
  padding: clamp(2.75rem, 6vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6rem);
  color: var(--e74-ink);
  overflow: visible;
}

.who-we-are__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: center;
}

.who-we-are__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
  max-width: none;
}

.who-we-are__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  /* Pull main title closer to the Od 1946. label */
  margin-bottom: -0.55rem;
}

.who-we-are__year {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 4vw, 3.15rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--e74-tracking-heading);
}

/* Contextual FrequencyWindow size — inherits display type; does not alter hero */
.freq-window--stat {
  vertical-align: baseline;
}

.who-we-are__label {
  margin: 0;
  color: var(--e74-ink-muted);
  letter-spacing: 0.12em;
}

.who-we-are__title {
  margin: 0;
  max-width: none;
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  font-weight: 600;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.02;
  /* Locked: section titles use natural case — no CSS uppercase */
  text-transform: none;
  white-space: normal;
  text-wrap: balance;
}

.who-we-are__rule {
  width: 100%;
  max-width: none;
  margin: 0.15rem 0 0;
  border: 0;
  border-top: 1px solid var(--e74-line);
}

.who-we-are__body {
  margin: 0;
  max-width: none;
  width: 100%;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.who-we-are__actions {
  margin-top: 0.55rem;
}

.who-we-are__visual {
  position: relative;
  width: 100%;
  max-width: none;
  justify-self: stretch;
  /* Room for offset card overhang */
  margin-bottom: 1.75rem;
  padding-right: 0.85rem;
}

.who-we-are__media {
  margin: 0;
  aspect-ratio: 1 / 1.02;
  overflow: hidden;
  border-radius: calc(var(--e74-radius-card) + 12px);
  background: #e8ecef;
}

.who-we-are__media .img-cover {
  object-position: var(--e74-media-position, 50% 50%);
}

/* Offset Frequency card — deliberate X + Y overhang past image edge */
.who-we-are__card {
  position: absolute;
  right: -0.65rem;
  bottom: -1.55rem;
  z-index: 2;
  width: min(72%, 15.75rem);
}

/* Reusable Frequency card surface (Uvijek na frekvenciji pattern) */
.freq-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 0.95rem 0.9rem;
  background: color-mix(in srgb, var(--e74-accent) 14%, var(--e74-surface));
  border: 1.5px solid var(--e74-accent);
  border-radius: calc(var(--e74-radius-card) + 6px);
  color: var(--e74-accent);
  text-decoration: none;
  box-shadow: 0 14px 32px color-mix(in srgb, var(--e74-ink) 12%, transparent);
  transition: transform var(--e74-ease), box-shadow var(--e74-ease), background var(--e74-ease);
}

a.freq-card:hover {
  color: var(--e74-accent);
  background: color-mix(in srgb, var(--e74-accent) 20%, var(--e74-surface));
  transform: translateY(-2px);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--e74-accent) 18%, transparent);
}

.freq-card__copy {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.freq-card__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
}

.freq-card__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight: 800;
  letter-spacing: var(--e74-tracking-heading-sm);
  line-height: 1.15;
  text-wrap: balance;
}

.freq-card__wave {
  flex: 0 0 auto;
  min-height: 2.1rem;
  height: 2.1rem;
  margin: 0.1rem 0;
}

.freq-card__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.78;
}

@media (min-width: 960px) {
  /* ~50% text · small gutter · ~50% image */
  .who-we-are__shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 2.2vw, 2rem);
    align-items: center;
  }

  .who-we-are__copy {
    grid-column: auto;
    max-width: none;
    width: 100%;
    padding-right: clamp(0.85rem, 1.8vw, 1.5rem);
  }

  .who-we-are__title,
  .who-we-are__body,
  .who-we-are__rule {
    max-width: none;
    width: 100%;
  }

  .who-we-are__visual {
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
    margin-bottom: 1.25rem;
    padding-right: 1.15rem;
  }

  .who-we-are__card {
    right: -1.1rem;
    bottom: -1.95rem;
    width: min(48%, 16.75rem);
  }
}

@media (max-width: 959px) {
  .who-we-are__shell {
    gap: 1.75rem;
  }

  .who-we-are__copy {
    max-width: none;
    order: 1;
  }

  .who-we-are__visual {
    order: 2;
    max-width: none;
    /* Room for the half of the card that hangs below the photo */
    margin-bottom: clamp(4.25rem, 16vw, 5.75rem);
    padding-right: 0;
  }

  /*
   * Mobile: centered on the photo bottom edge —
   * half on the image, half hanging below.
   */
  .who-we-are__card {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 0;
    z-index: 2;
    width: min(88%, 15.5rem);
    margin: 0;
    transform: translate(-50%, 50%);
  }

  .who-we-are__card .freq-card {
    padding: 0.8rem 0.85rem 0.75rem;
    gap: 0.4rem;
  }

  .who-we-are__card .freq-card__title {
    font-size: clamp(0.95rem, 3.8vw, 1.1rem);
  }

  .who-we-are__card .freq-card__wave {
    display: none;
  }
}

@media (max-width: 559px) {
  .who-we-are__card {
    width: min(90%, 14.5rem);
  }
}

/* -------------------------------------------------------------------------- */
/* TopographicBackground — static cartographic contour / isohypse layer       */
/* Section background only. No motion. Accent stroke at very low opacity.     */
/* -------------------------------------------------------------------------- */

.topo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--e74-accent);
  opacity: 0.22;
}

.topo-bg__svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

@media (max-width: 959px) {
  .topo-bg {
    opacity: 0.16;
  }
}

/* -------------------------------------------------------------------------- */
/* Featured project — dark flagship composition (Čemernica first consumer)    */
/* -------------------------------------------------------------------------- */

.featured-project {
  --featured-surface: var(--e74-section-dark);
  --featured-surface-lift: var(--e74-section-dark-soft);
  --featured-ink: var(--e74-overlay-ink);
  --featured-muted: color-mix(in srgb, var(--e74-overlay-ink) 68%, transparent);
  --featured-line: var(--e74-section-dark-line);
  position: relative;
  z-index: 0;
  isolation: isolate;
  color: var(--featured-ink);
  background:
    linear-gradient(
      168deg,
      #273038 0%,
      var(--e74-section-dark) 42%,
      #181e24 100%
    );
  border-bottom: 1px solid color-mix(in srgb, var(--e74-accent) 18%, transparent);
  /* Match Who We Are vertical section rhythm */
  padding: clamp(2.75rem, 6vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6rem);
  overflow: visible;
}

.featured-project__shell {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  min-width: 0;
}

.featured-project__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: center;
  min-width: 0;
}

.featured-project__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
  max-width: none;
  width: 100%;
  min-width: 0;
}

.featured-project__eyebrow {
  margin: 0;
}

.featured-project__identity {
  margin: 0;
  max-width: 100%;
  width: 100%;
  font-family: var(--font-display);
  /* Display identity — larger than Who We Are title, still within column measure */
  font-size: clamp(2.35rem, 5.2vw, 3.85rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: var(--e74-tracking-heading);
  text-transform: uppercase;
  color: #fff;
  overflow-wrap: anywhere;
}

.featured-project__location {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--featured-muted);
}

.featured-project__headline {
  margin: 0;
  max-width: none;
  width: 100%;
  font-family: var(--font-display);
  /* Same display scale as homepage / become section titles */
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: var(--e74-tracking-heading);
  text-transform: none;
  color: #fff;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.featured-project__body {
  margin: 0;
  max-width: none;
  width: 100%;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  font-weight: 500;
  line-height: 1.65;
  color: var(--featured-muted);
  overflow-wrap: break-word;
}

.featured-project__actions {
  margin-top: 0.55rem;
}

.featured-project__visual {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: none;
  min-width: 0;
  justify-self: stretch;
}

.featured-project__media {
  position: relative;
  margin: 0;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1.02;
  overflow: hidden;
  border-radius: calc(var(--e74-radius-card) + 12px);
  background: #2a3138;
  border: 1px solid var(--featured-line);
  z-index: 1;
}

.featured-project__media .img-cover {
  object-position: var(--e74-media-position, 50% 40%);
}

.featured-project__visual-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding: 0 0.15rem;
}

.featured-project__visual-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.featured-project__visual-caption {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--featured-muted);
}

/* Summit annotation — cartographic / RF label in sky space */
.summit-note {
  --summit-note-x: 62%;
  --summit-note-y: 16%;
  position: absolute;
  left: var(--summit-note-x);
  top: var(--summit-note-y);
  z-index: 3;
  max-width: min(42%, 11.5rem);
  padding: 0.45rem 0.55rem 0.5rem;
  transform: translate(0, 0);
  pointer-events: none;
  background: color-mix(in srgb, var(--e74-section-dark) 72%, transparent);
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
  border-radius: var(--e74-radius-control);
  color: #fff;
}

.summit-note__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.summit-note__rule {
  display: block;
  width: 1.65rem;
  height: 1px;
  margin: 0.35rem 0 0.4rem;
  background: color-mix(in srgb, var(--e74-accent) 72%, transparent);
}

.summit-note__line {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  line-height: 1.45;
  color: color-mix(in srgb, #fff 72%, transparent);
}

.summit-note__line + .summit-note__line {
  margin-top: 0.08rem;
}

/* Thin technical leader: pin → annotation */
.summit-leader {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.summit-leader__line {
  fill: none;
  stroke: color-mix(in srgb, var(--e74-accent) 82%, transparent);
  stroke-width: 1.15;
  stroke-linecap: round;
}

.summit-leader--mobile {
  display: none;
}

.featured-project__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  min-width: 0;
}

.featured-project__card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 1.35rem 1.25rem 1.3rem;
  background: var(--featured-surface-lift);
  border: 1px solid var(--featured-line);
  border-radius: calc(var(--e74-radius-card) + 6px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
}

.featured-project__card-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--e74-accent);
}

.featured-project__card-title {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
  color: #fff;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.featured-project__card-body {
  margin: 0;
  max-width: 100%;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--featured-muted);
  overflow-wrap: break-word;
}

.featured-project__card--has-media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--featured-surface-lift);
  justify-content: flex-end;
  min-height: 24rem;
}

.featured-project__card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--card-media-image);
  background-size: cover;
  background-position: var(--card-media-position, 50% 45%);
  background-repeat: no-repeat;
}

/* Transparent at top → graphite at bottom (image sky/summit visible; copy readable) */
.featured-project__card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--e74-section-dark) 18%, transparent) 28%,
    color-mix(in srgb, var(--e74-section-dark) 55%, transparent) 55%,
    color-mix(in srgb, var(--e74-section-dark) 88%, transparent) 78%,
    var(--e74-section-dark) 100%
  );
}

.featured-project__card--has-media > :not(.featured-project__card-media) {
  position: relative;
  z-index: 1;
}

.featured-project__card--has-media .featured-project__card-body {
  color: color-mix(in srgb, #fff 78%, transparent);
}

/* Controlled AmplitudeWave slot — do not let .amp-wave min-height blow the card */
.featured-project__wave-slot {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  height: 1.85rem;
  min-height: 1.85rem;
  max-height: 1.85rem;
  margin: 0.15rem 0 0.2rem;
  overflow: hidden;
}

.featured-project__wave-slot .amp-wave,
.featured-project__wave {
  display: block;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100%;
  margin: 0;
}

.featured-project__wave-slot .amp-wave__viewport,
.featured-project__wave-slot .amp-wave__track,
.featured-project__wave-slot .amp-wave__svg {
  height: 100%;
  min-height: 0;
}

.featured-project__wave-slot .amp-wave__viewport,
.featured-project__wave-slot .amp-wave__svg {
  overflow: hidden;
}

.featured-project__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.15rem 1.25rem;
  margin: 0.7rem 0 0.55rem;
  padding: 0;
  list-style: none;
}

.featured-project__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  text-align: center;
}

.featured-project__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  color: var(--e74-accent);
}

.featured-project__feature-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.featured-project__feature-icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.featured-project__feature-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: color-mix(in srgb, #fff 78%, transparent);
}

.featured-project__card-link {
  align-self: flex-start;
  margin-top: 0.25rem;
  max-width: 100%;
}

.featured-project__card-meta {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--featured-line);
  min-width: 0;
}

.featured-project__card-meta .tech-meta {
  opacity: 0.9;
  max-width: 100%;
}

@media (min-width: 960px) {
  /* Same editorial band standard as Who We Are: ~50% / gutter / ~50% */
  .featured-project__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 2.2vw, 2rem);
    align-items: center;
  }

  .featured-project__intro {
    max-width: none;
    width: 100%;
    padding-right: clamp(0.85rem, 1.8vw, 1.5rem);
    justify-content: center;
  }

  .featured-project__visual {
    max-width: none;
    justify-self: stretch;
  }

  .featured-project__media {
    min-height: 0;
    aspect-ratio: 1 / 1.02;
    height: auto;
  }

  .featured-project__cards {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.65fr);
    gap: 1.1rem;
  }

  .featured-project__card {
    padding: 1.55rem 1.45rem 1.4rem;
    min-height: 100%;
  }

  .featured-project__card--tech {
    gap: 0.95rem;
  }

  .featured-project__features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.55rem 1.5rem;
  }

  .featured-project__feature-icon {
    width: 4.25rem;
    height: 4.25rem;
  }

  .featured-project__feature-label {
    font-size: 0.82rem;
  }

  .featured-project__card--support {
    gap: 0.85rem;
  }

  .featured-project__card--support:not(.featured-project__card--has-media) {
    justify-content: flex-start;
  }

  .featured-project__card--has-media {
    justify-content: flex-end;
    min-height: 100%;
  }
}

@media (max-width: 959px) {
  .featured-project__intro {
    max-width: none;
    order: 1;
  }

  .featured-project__visual {
    order: 2;
  }

  .featured-project__top {
    gap: 1.75rem;
  }

  .featured-project__card--has-media {
    min-height: 26rem;
  }

  /* Taller crop preserves Goli Vis summit + sky on narrow viewports */
  .featured-project__media {
    aspect-ratio: 4 / 5;
  }

  .summit-note {
    left: var(--summit-note-x-sm, var(--summit-note-x));
    top: var(--summit-note-y-sm, var(--summit-note-y));
    max-width: min(48%, 10.5rem);
    padding: 0.4rem 0.45rem 0.45rem;
  }

  .summit-leader--desktop {
    display: none;
  }

  .summit-leader--mobile {
    display: block;
  }
}

/* -------------------------------------------------------------------------- */
/* SignalPin — reusable RF origin / infrastructure location marker            */
/* -------------------------------------------------------------------------- */

.signal-pin {
  --signal-pin-x: 50%;
  --signal-pin-y: 50%;
  --signal-pin-size: 5.5rem;
  --signal-pin-color: var(--e74-accent);
  position: absolute;
  left: var(--signal-pin-x);
  top: var(--signal-pin-y);
  z-index: 2;
  width: var(--signal-pin-size);
  height: var(--signal-pin-size);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.signal-pin__rings,
.signal-pin__core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.signal-pin__ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--signal-pin-color) 92%, transparent);
  opacity: 0;
  transform: scale(0.18);
  animation: signal-pin-pulse 2.5s ease-out infinite;
}

.signal-pin__ring--1 {
  animation-delay: 0s;
}

.signal-pin__ring--2 {
  animation-delay: 0.45s;
}

.signal-pin__ring--3 {
  animation-delay: 0.9s;
}

.signal-pin__halo {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1.75px solid color-mix(in srgb, var(--signal-pin-color) 92%, transparent);
  background: color-mix(in srgb, var(--signal-pin-color) 22%, transparent);
}

.signal-pin__dot {
  position: absolute;
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 50%;
  background: var(--signal-pin-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--signal-pin-color) 35%, transparent);
}

@keyframes signal-pin-pulse {
  0% {
    transform: scale(0.18);
    opacity: 0.85;
  }
  28% {
    transform: scale(0.58);
    opacity: 0.55;
  }
  62% {
    transform: scale(1.05);
    opacity: 0.12;
  }
  100% {
    transform: scale(1.12);
    opacity: 0;
  }
}

@media (max-width: 959px) {
  .signal-pin {
    left: var(--signal-pin-x-sm, var(--signal-pin-x));
    top: var(--signal-pin-y-sm, var(--signal-pin-y));
    --signal-pin-size: 4.6rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Frequency Window — E74BYZ editorial highlight text                          */
/* Surface + bottom-edge RF bars (up/down). No tune / cursor / acquire.       */
/* Variants: graphite | accent — identical geometry / motion.                 */
/* -------------------------------------------------------------------------- */

.freq-window {
  /* Semantic roles — GRAPHITE default */
  --freq-surface: var(--e74-dark);
  --freq-surface-top: color-mix(in srgb, var(--e74-ink) 42%, var(--e74-dark));
  --freq-surface-bottom: color-mix(in srgb, #000 28%, var(--e74-dark));
  --freq-text: #fff;
  --freq-signal: var(--e74-accent);
  --freq-inset-highlight: color-mix(in srgb, #fff 7%, transparent);
  --freq-signal-bar: color-mix(in srgb, var(--freq-signal) 34%, transparent);
  --freq-signal-bar-mid: color-mix(in srgb, var(--freq-signal) 50%, transparent);
  --freq-signal-bar-peak: color-mix(in srgb, var(--freq-signal) 68%, transparent);
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: baseline;
  color: inherit;
}

/* ACCENT variant — invert surface ↔ signal; text stays white */
.freq-window--accent {
  --freq-surface: var(--e74-accent);
  --freq-surface-top: color-mix(in srgb, #fff 10%, var(--e74-accent));
  --freq-surface-bottom: color-mix(in srgb, var(--e74-ink) 16%, var(--e74-accent));
  --freq-text: #fff;
  --freq-signal: var(--e74-ink);
  --freq-inset-highlight: color-mix(in srgb, #fff 14%, transparent);
  --freq-signal-bar: color-mix(in srgb, var(--freq-signal) 36%, transparent);
  --freq-signal-bar-mid: color-mix(in srgb, var(--freq-signal) 52%, transparent);
  --freq-signal-bar-peak: color-mix(in srgb, var(--freq-signal) 70%, transparent);
}

.freq-window__field {
  position: relative;
  display: inline-block;
  max-width: 100%;
  /* Tight equal pad; bars sit in the bottom edge inside the field */
  padding: 0.08em 0.28em;
  background:
    linear-gradient(
      180deg,
      var(--freq-surface-top) 0%,
      var(--freq-surface) 48%,
      var(--freq-surface-bottom) 100%
    );
  color: var(--freq-text);
  border-radius: 0.14em;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 var(--freq-inset-highlight);
}

/* Bottom RF bars only — edge to edge, same motion as homepage bars-rail */
.freq-window__instrument {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 1.2em;
  min-height: 17px;
  max-height: 28px;
  pointer-events: none;
}

.freq-window__bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;
  padding-inline: 0.12em;
}

.freq-window__bar {
  flex: 0 0 1px;
  width: 1px;
  height: 100%;
  transform: scaleY(var(--freq-h, 0.12));
  transform-origin: bottom center;
  background: var(--freq-signal-bar);
  will-change: transform;
}

.freq-window__bar--thick-sm {
  flex: 0 0 2px;
  width: 2px;
}

.freq-window__bar--thick {
  flex: 0 0 2.5px;
  width: 2.5px;
}

.freq-window__bar--mid {
  background: var(--freq-signal-bar-mid);
}

.freq-window__bar--peak {
  background: var(--freq-signal-bar-peak);
}

.freq-window.is-locked .freq-window__bar {
  animation: freq-signal-drift var(--freq-dur, 1.9s) ease-in-out var(--freq-delay, 0s) infinite;
}

.freq-window__text {
  position: relative;
  z-index: 3;
  display: inline-block;
  color: var(--freq-text);
  white-space: nowrap;
}

/* Slow coherent RF activity — not per-frame equalizer bounce */
@keyframes freq-signal-drift {
  0%,
  100% {
    transform: scaleY(var(--freq-h, 0.12));
  }
  28% {
    transform: scaleY(calc(var(--freq-h, 0.12) * 0.72));
  }
  52% {
    transform: scaleY(calc(var(--freq-h, 0.12) * 1.35));
  }
  74% {
    transform: scaleY(calc(var(--freq-h, 0.12) * 0.9));
  }
}

@media (max-width: 899px) {
  .freq-window__field {
    padding: 0.07em 0.24em;
    border-radius: 0.12em;
  }

  .freq-window__instrument {
    height: 1.05em;
    min-height: 15px;
    max-height: 24px;
  }

  .freq-window__bar:nth-child(odd) {
    display: none;
  }

  .freq-window__text {
    white-space: normal;
  }
}

/* -------------------------------------------------------------------------- */
/* AmplitudeWave — reusable AM signal decoration (cards / bands / blocks)     */
/* Variants: accent (default) | graphite — identical geometry / motion.       */
/* -------------------------------------------------------------------------- */

.amp-wave {
  --amp-wave-stroke: var(--e74-accent);
  --amp-wave-duration: 7.5s;
  display: block;
  width: 100%;
  min-height: 2.5rem;
  height: 100%;
  pointer-events: none;
}

.amp-wave--accent {
  --amp-wave-stroke: var(--e74-accent);
}

.amp-wave--graphite {
  --amp-wave-stroke: var(--e74-ink);
}

.amp-wave__viewport {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
}

.amp-wave__track {
  display: flex;
  width: 200%;
  height: 100%;
  animation: amp-wave-scroll var(--amp-wave-duration) linear infinite;
  will-change: transform;
}

.amp-wave__svg {
  display: block;
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  overflow: visible;
}

.amp-wave__path {
  stroke: var(--amp-wave-stroke);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.32;
}

@keyframes amp-wave-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* -------------------------------------------------------------------------- */
/* Become page — split hero (Conseil left copy + right media)                 */
/* -------------------------------------------------------------------------- */

.become-hero {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--e74-line);
  padding: clamp(2rem, 4.5vw, 3.5rem) 0 clamp(2.35rem, 5vw, 4rem);
  color: var(--e74-ink);
  overflow: clip;
  background:
    radial-gradient(
      ellipse 78% 72% at 100% 0%,
      color-mix(in srgb, var(--e74-accent) 28%, transparent) 0%,
      color-mix(in srgb, var(--e74-accent) 12%, transparent) 36%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 76% 68% at 0% 100%,
      color-mix(in srgb, var(--e74-accent) 24%, transparent) 0%,
      color-mix(in srgb, var(--e74-accent) 10%, transparent) 38%,
      transparent 74%
    ),
    var(--e74-bg);
}

.become-hero__shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.35rem, 2.75vw, 2.35rem);
  align-items: center;
  min-width: 0;
}

.become-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding-right: clamp(0.5rem, 1.5vw, 1.25rem);
}

.become-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.15rem;
  padding: 0.35rem 0.85rem 0.35rem 0.95rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--e74-ink) 5.5%, var(--e74-surface));
  border: 1px solid color-mix(in srgb, var(--e74-ink) 8%, transparent);
  color: var(--e74-ink-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--e74-ease), border-color var(--e74-ease), background var(--e74-ease);
}

.become-hero__badge:hover,
.become-hero__badge:focus-visible {
  color: var(--e74-ink);
  border-color: color-mix(in srgb, var(--e74-accent) 35%, transparent);
  background: color-mix(in srgb, var(--e74-accent) 8%, var(--e74-surface));
}

.become-hero__badge-arrow {
  color: var(--e74-accent);
  font-size: 0.85em;
}

/* Compact vs homepage .hero-title — shared by Become + Club */
.become-hero .become-hero__title {
  margin: 0;
  width: 100%;
  max-width: none;
  font-size: clamp(2rem, 3.35vw, 3.05rem);
  line-height: 1.06;
}

.become-hero .become-hero__title .hero-title__line--freq {
  margin-block: 0.06em 0.03em;
}

/* Editorial lede — shared structure (Become / Club / project heroes) */
.become-hero__lede {
  margin: 0;
  width: 100%;
  max-width: none;
  padding-left: 1rem;
  border-left: 3px solid var(--e74-accent);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 600;
  letter-spacing: var(--e74-tracking-heading-sm);
  line-height: 1.32;
  color: var(--e74-ink);
  text-wrap: balance;
}

/* Compact lede — Become + Club only */
.become-hero .become-hero__lede {
  padding-left: 0.9rem;
  font-size: clamp(1.02rem, 1.55vw, 1.32rem);
  line-height: 1.34;
}

.become-hero__support {
  margin: 0;
  width: 100%;
  max-width: 36rem;
  font-size: clamp(0.95rem, 1.1vw, 1.02rem);
  line-height: 1.55;
  color: var(--e74-ink-muted);
}

.become-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.95rem 1.35rem;
  padding-top: 0.2rem;
}

.become-hero__visual {
  position: relative;
  width: 100%;
  max-width: none;
  justify-self: stretch;
  margin-bottom: 2rem;
  padding-right: 0.85rem;
}

.become-hero__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--e74-radius-card) + 14px);
  background: #e8ecef;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--e74-ink) 10%, transparent);
}

.become-hero__media .img-cover {
  /* Field mentorship: both operators + HT in the 4:3 crop */
  object-position: var(--e74-media-position, 55% 38%);
}

/* Glass overlay — centered on image, offset toward bottom */
.become-hero__overlay {
  position: absolute;
  left: 50%;
  bottom: -1.35rem;
  z-index: 2;
  width: min(78%, 16.5rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.15rem 1.2rem 1.05rem;
  border-radius: calc(var(--e74-radius-card) + 4px);
  color: #fff;
  background: color-mix(in srgb, var(--e74-section-dark) 42%, transparent);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--e74-ink) 18%, transparent);
}

.become-hero__overlay-stat {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 2.6vw, 2.35rem);
  font-weight: 600;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1;
}

.become-hero__overlay-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.88;
}

.become-hero__overlay-note {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  opacity: 0.78;
}

@media (min-width: 960px) {
  .become-hero__visual {
    margin-bottom: 2.15rem;
    padding-right: 1.15rem;
  }

  .become-hero__overlay {
    bottom: -1.65rem;
    width: min(72%, 16.75rem);
  }
}

@media (max-width: 899px) {
  .become-hero {
    padding: clamp(1.5rem, 4.5vw, 2.15rem) 0 clamp(2.15rem, 5.5vw, 3rem);
  }

  .become-hero__shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .become-hero__copy {
    max-width: none;
    gap: 0.95rem;
    padding-right: 0;
  }

  .become-hero .become-hero__title {
    font-size: clamp(1.85rem, 7.2vw, 2.35rem);
  }

  .become-hero .become-hero__lede {
    font-size: clamp(0.98rem, 3.6vw, 1.18rem);
  }

  .become-hero__support {
    max-width: none;
  }

  .become-hero__visual {
    max-width: none;
    justify-self: stretch;
    order: -1;
    margin-bottom: 1.85rem;
    padding-right: 0.75rem;
  }

  .become-hero__media {
    aspect-ratio: 4 / 3;
    border-radius: calc(var(--e74-radius-card) + 10px);
  }

  .become-hero__overlay {
    bottom: -1.15rem;
    width: min(88%, 17rem);
  }

  .become-hero__actions {
    width: 100%;
  }

  .become-hero__actions .btn--solid {
    width: 100%;
  }
}

@media (max-width: 559px) {
  .become-hero__visual {
    padding-right: 0.5rem;
  }

  .become-hero__overlay {
    width: min(90%, 16rem);
  }
}

/* —— Club today (About the club intro + 2×2) —— */
.club-today {
  background: var(--e74-surface);
  color: var(--e74-ink);
  border-bottom: 1px solid var(--e74-line);
  padding: clamp(2.75rem, 6vw, 4.75rem) 0;
}

.club-today__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  align-items: stretch;
  min-width: 0;
}

.club-today__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.1rem;
  min-width: 0;
  max-width: none;
}

.club-today__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.08;
  color: var(--e74-ink);
  text-wrap: balance;
}

.club-today__lead {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.6;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.club-today__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.95rem 1.35rem;
  padding-top: 0.25rem;
}

.club-today__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0;
  aspect-ratio: 4 / 3;
  width: 100%;
  min-width: 0;
  border-radius: var(--e74-radius-card);
  /* Clip subpixel seams between flush tiles */
  overflow: hidden;
}

.club-today__tile {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
  min-height: 0;
  height: 100%;
  /* Overlap neighbours by 1px — kills hairline gaps from subpixel rounding */
  margin: 0 -1px -1px 0;
  padding: clamp(1.15rem, 2vw, 1.45rem) clamp(1rem, 1.8vw, 1.35rem);
  transform: scale(1);
  transform-origin: center;
  transition:
    transform 260ms ease,
    box-shadow 260ms ease,
    z-index 0s;
  cursor: default;
}

.club-today__tile:nth-child(1) {
  border-radius: var(--e74-radius-card) 0 0 0;
}

.club-today__tile:nth-child(2) {
  border-radius: 0 var(--e74-radius-card) 0 0;
}

.club-today__tile:nth-child(3) {
  border-radius: 0 0 0 var(--e74-radius-card);
}

.club-today__tile:nth-child(4) {
  border-radius: 0 0 var(--e74-radius-card) 0;
}

.club-today__tile:hover,
.club-today__tile:focus-within {
  z-index: 2;
  transform: scale(1.02);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--e74-ink) 12%, transparent);
}

.club-today__tile:hover .club-today__icon,
.club-today__tile:focus-within .club-today__icon {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .club-today__tile {
    transition: none;
  }

  .club-today__tile:hover,
  .club-today__tile:focus-within {
    transform: none;
  }
}

.club-today__icon {
  position: absolute;
  top: 1.05rem;
  right: 1.05rem;
  z-index: 1;
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  color: inherit;
  opacity: 0.72;
  transition: opacity 220ms ease;
}

.club-today__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.club-today__stat {
  margin: 0;
  padding-right: 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.05;
}

.club-today__tile-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: var(--e74-tracking-heading-sm);
  line-height: 1.25;
}

.club-today__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0.1rem 0 0;
  padding: 0;
  max-width: 100%;
}

.club-today__pill {
  max-width: 100%;
}

.club-today__tile-body {
  margin: 0;
  margin-top: auto;
  font-family: var(--font-ui);
  font-size: clamp(0.9rem, 1.05vw, 0.95rem);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}

.club-today__tile--soft {
  background: color-mix(in srgb, var(--e74-ink) 7%, var(--e74-surface));
  color: var(--e74-ink);
}

.club-today__tile--soft .club-today__tile-body {
  color: var(--e74-ink-muted);
}

.club-today__tile--soft .club-today__pill {
  background: color-mix(in srgb, var(--e74-ink) 8%, var(--e74-surface));
  color: var(--e74-ink);
}

.club-today__tile--dark {
  background: var(--e74-section-dark);
  color: var(--e74-overlay-ink);
}

.club-today__tile--dark .club-today__tile-body {
  color: color-mix(in srgb, var(--e74-overlay-ink) 72%, transparent);
}

.club-today__tile--dark .club-today__pill {
  background: color-mix(in srgb, #fff 14%, transparent);
  color: var(--e74-overlay-ink);
}

.club-today__tile--accent-soft {
  background: var(--e74-accent-soft);
  color: var(--e74-ink);
}

.club-today__tile--accent-soft .club-today__tile-body {
  color: color-mix(in srgb, var(--e74-ink) 78%, transparent);
}

.club-today__tile--accent-soft .club-today__pill {
  background: color-mix(in srgb, var(--e74-ink) 10%, #fff);
  color: var(--e74-ink);
}

.club-today__tile--accent {
  background: var(--e74-accent);
  color: #fff;
}

.club-today__tile--accent .club-today__tile-body {
  color: color-mix(in srgb, #fff 86%, transparent);
}

.club-today__tile--accent .club-today__pill {
  background: color-mix(in srgb, #fff 18%, transparent);
  color: #fff;
}

@media (min-width: 960px) {
  .club-today__shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(1.75rem, 3vw, 2.75rem);
    align-items: center;
  }
}

/* Narrow phones: 2×2 squares cannot hold pills + body — stack to one column */
@media (max-width: 699px) {
  .club-today__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    aspect-ratio: auto;
    gap: 0.65rem;
    overflow: visible;
  }

  .club-today__tile {
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 1.15rem 1.1rem 1.2rem;
    border-radius: var(--e74-radius-card);
  }

  .club-today__tile:nth-child(1),
  .club-today__tile:nth-child(2),
  .club-today__tile:nth-child(3),
  .club-today__tile:nth-child(4) {
    border-radius: var(--e74-radius-card);
  }

  .club-today__tile-body {
    margin-top: 0.55rem;
  }

  .club-today__actions {
    width: 100%;
  }

  .club-today__actions .btn--solid {
    width: 100%;
  }
}

/* —— Club space (full-width intro + 3 equal photos) —— */
.club-space {
  background: var(--e74-bg);
  color: var(--e74-ink);
  border-bottom: 1px solid var(--e74-line);
  padding: clamp(2.75rem, 6vw, 4.75rem) 0;
}

.club-space__shell {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  min-width: 0;
}

.club-space__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.9rem;
  width: 100%;
  min-width: 0;
}

.club-space__eyebrow-row {
  display: block;
  width: 100%;
}

.club-space__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 1.75rem;
  align-items: end;
  width: 100%;
  min-width: 0;
}

.club-space__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}

.club-space__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.08;
  color: var(--e74-ink);
  text-wrap: balance;
}

.club-space__lead {
  margin: 0;
  max-width: 42rem;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.6;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.club-space__pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
}

.club-space__pill {
  margin: 0;
}

@media (min-width: 800px) {
  .club-space__main {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
    align-items: center;
  }

  .club-space__pills {
    justify-content: flex-end;
  }
}

.club-space__gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
}

.club-space__frame {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  aspect-ratio: 4 / 3;
  background: #d8dde3;
  border-radius: var(--e74-radius-card);
  overflow: hidden;
}

.club-space__img {
  object-position: var(--e74-media-position, 50% 50%);
}

@media (min-width: 700px) {
  .club-space__gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* —— Club mission / vision (editorial intro + 2 cards) —— */
.club-mission {
  background: var(--e74-bg);
  color: var(--e74-ink);
  border-bottom: 1px solid var(--e74-line);
  padding: clamp(2.75rem, 6vw, 5rem) 0;
}

.club-mission__shell {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  min-width: 0;
}

.club-mission__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.15rem, 2.5vw, 1.75rem);
  align-items: start;
  min-width: 0;
}

.club-mission__heading {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.club-mission__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.08;
  color: var(--e74-ink);
  text-wrap: balance;
}

.club-mission__lead {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.6;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.club-mission__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  min-width: 0;
}

.club-mission__card {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  border-color: transparent;
  background: var(--e74-surface);
  overflow: hidden;
  transition:
    transform var(--e74-ease),
    box-shadow var(--e74-ease),
    background-color var(--e74-ease);
}

.club-mission__dash-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.club-mission__dash-path {
  fill: none;
  stroke: color-mix(in srgb, var(--e74-accent) 42%, transparent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 0.18 0.09;
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: calc(var(--e74-radius-card) - 1px);
  ry: calc(var(--e74-radius-card) - 1px);
}

.club-mission__card > :not(.club-mission__dash-frame) {
  position: relative;
  z-index: 1;
}

.club-mission__card .feature-card__desc {
  flex: 1 1 auto;
}

.club-mission__card:hover,
.club-mission__card:focus-within {
  color: var(--e74-ink);
  border-color: transparent;
  background: color-mix(in srgb, var(--e74-accent) 8%, var(--e74-surface));
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(14, 19, 24, 0.06);
}

.club-mission__card:hover .club-mission__dash-path,
.club-mission__card:focus-within .club-mission__dash-path {
  stroke: color-mix(in srgb, var(--e74-accent) 62%, transparent);
}

@media (min-width: 900px) {
  .club-mission__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }

  .club-mission__lead {
    padding-left: clamp(1.25rem, 2.5vw, 1.75rem);
    border-left: 1px solid var(--e74-line);
  }

  .club-mission__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Club — Activities / sections (photographic cards)                          */
/* -------------------------------------------------------------------------- */

.club-activities {
  background: var(--e74-bg);
  color: var(--e74-ink);
  border-bottom: 1px solid var(--e74-line);
  padding: clamp(2.75rem, 6vw, 5rem) 0;
}

.club-activities__shell {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  min-width: 0;
}

.club-activities__intro {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.club-activities__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  width: 100%;
  min-width: 0;
}

.club-activities__title {
  margin: 0;
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 28rem;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.08;
  color: var(--e74-ink);
  text-wrap: balance;
}

/* Activity scan — cycles labels tied to the six cards below */
.club-activities__scan {
  --club-scan-step: 1.45s;
  --club-scan-total: calc(var(--club-scan-step) * 6);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0 auto;
  flex: 0 0 auto;
  min-width: 11.5rem;
  font-family: var(--font-mono);
  font-size: clamp(0.84rem, 1.05vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
  line-height: 1.2;
}

.club-activities__scan-dot {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--e74-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--e74-accent) 45%, transparent);
  animation: club-activity-scan-dot var(--club-scan-step) ease-out infinite;
}

.club-activities__scan-viewport {
  position: relative;
  display: block;
  height: 1.25em;
  min-width: 10.5rem;
  overflow: hidden;
}

.club-activities__scan-label {
  position: absolute;
  inset: 0 auto auto 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.35em);
  animation: club-activity-scan-label var(--club-scan-total) ease-in-out infinite;
  /* Negative phase offset so stagger stays correct on every loop */
  animation-delay: calc((var(--scan-i, 0) * var(--club-scan-step)) - var(--club-scan-total));
}

.club-activities__lead {
  margin: 0;
  max-width: 40rem;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.6;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

@media (max-width: 699px) {
  .club-activities__scan {
    margin-left: 0;
  }
}

@keyframes club-activity-scan-label {
  0% {
    opacity: 0;
    transform: translateY(0.35em);
  }

  3% {
    opacity: 1;
    transform: translateY(0);
  }

  13% {
    opacity: 1;
    transform: translateY(0);
  }

  16.66% {
    opacity: 0;
    transform: translateY(-0.28em);
  }

  100% {
    opacity: 0;
    transform: translateY(-0.28em);
  }
}

@keyframes club-activity-scan-dot {
  0%,
  70% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--e74-accent) 40%, transparent);
    opacity: 1;
  }

  100% {
    box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--e74-accent) 0%, transparent);
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .club-activities__scan-dot {
    animation: none;
  }

  .club-activities__scan-label {
    animation: none;
    opacity: 0;
    transform: none;
  }

  .club-activities__scan-label.is-active {
    opacity: 1;
  }
}

.club-activities__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

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

@media (min-width: 1000px) {
  .club-activities__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

.club-activities__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--e74-radius-card);
  background: var(--e74-surface);
  color: var(--e74-ink);
}

.club-activities__media {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--e74-section-dark);
}

.club-activities__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--e74-media-position, 50% 45%);
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.club-activities__placeholder {
  position: absolute;
  inset: 0;
  background: #d8dde3;
}

.club-activities__media--placeholder {
  background: #d8dde3;
}

.club-activities__card:hover .club-activities__img {
  transform: scale(1.03);
}

.club-activities__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(28 34 40 / 0) 0%,
    rgb(28 34 40 / 0) 42%,
    rgb(28 34 40 / 0.35) 62%,
    rgb(28 34 40 / 0.72) 82%,
    rgb(28 34 40 / 0.92) 100%
  );
}

.club-activities__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: 0.4rem;
  padding: 1rem 1.15rem 1.05rem;
}

.club-activities__index {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--e74-accent);
  line-height: 1.35;
}

.club-activities__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.7vw, 1.7rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.12;
  color: #fff;
  text-wrap: balance;
}

.club-activities__body {
  display: grid;
  gap: 0.7rem;
  padding: 1rem 1.15rem 1.2rem;
  min-width: 0;
}

.club-activities__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.club-activities__tag {
  background: color-mix(in srgb, var(--e74-ink) 6%, var(--e74-surface));
  border: 1px solid var(--e74-line);
  color: var(--e74-ink-muted);
}

.club-activities__desc {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

@media (max-width: 699px) {
  .club-activities__media {
    aspect-ratio: 16 / 11;
  }

  .club-activities__card-title {
    font-size: clamp(1.3rem, 5.5vw, 1.55rem);
  }

  .club-activities__desc {
    font-size: 1rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Club — Institutional cooperation (editorial feature grid)                  */
/* -------------------------------------------------------------------------- */

.club-coop {
  background: var(--e74-bg);
  color: var(--e74-ink);
  border-bottom: 1px solid var(--e74-line);
  padding: clamp(2.75rem, 6vw, 5rem) 0;
}

.club-coop__shell {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  min-width: 0;
}

.club-coop__intro {
  display: grid;
  gap: 0.85rem;
  max-width: 40rem;
  min-width: 0;
}

.club-coop__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.08;
  color: var(--e74-ink);
  text-wrap: balance;
}

.club-coop__lead {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.6;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.club-coop__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  min-width: 0;
}

.club-coop__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--e74-radius-card);
  background: #1c2228;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

.club-coop__card--highlight {
  border-color: var(--e74-accent);
  box-shadow:
    0 0 0 1px var(--e74-accent),
    0 10px 28px color-mix(in srgb, var(--e74-accent) 18%, transparent);
}

.club-coop__card:hover,
.club-coop__card:focus-visible {
  color: #fff;
  outline: none;
}

.club-coop__card:focus-visible {
  box-shadow: 0 0 0 2px var(--e74-bg), 0 0 0 4px var(--e74-accent);
}

.club-coop__card--highlight:focus-visible {
  box-shadow:
    0 0 0 2px var(--e74-bg),
    0 0 0 4px var(--e74-accent),
    0 10px 28px color-mix(in srgb, var(--e74-accent) 18%, transparent);
}

.club-coop__media {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #1c2228;
}

.club-coop__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--e74-media-position, 50% 45%);
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.club-coop__card:hover .club-coop__img,
.club-coop__card:focus-visible .club-coop__img {
  transform: scale(1.03);
}

.club-coop__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(28 34 40 / 0.22) 0%,
    rgb(28 34 40 / 0.08) 35%,
    rgb(28 34 40 / 0.35) 62%,
    rgb(28 34 40 / 0.82) 100%
  );
}

.club-coop__pills {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
}

.club-coop__pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 1.45rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--e74-radius-badge);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.25;
}

.club-coop__pill--accent {
  color: #fff;
  background: var(--e74-accent);
  border: 1px solid transparent;
}

.club-coop__pill--muted {
  color: color-mix(in srgb, #fff 90%, transparent);
  background: color-mix(in srgb, #1c2228 55%, transparent);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  backdrop-filter: blur(6px);
}

.club-coop__card-title {
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 0.95rem;
  z-index: 2;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.9vw, 1.85rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.12;
  color: #fff;
  text-wrap: balance;
}

.club-coop__body {
  display: grid;
  gap: 0.7rem;
  flex: 1 1 auto;
  padding: 1.05rem 1.1rem 1.1rem;
  background: #1c2228;
  color: #fff;
}

.club-coop__desc {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.9rem, 1.05vw, 0.98rem);
  font-weight: 500;
  line-height: 1.55;
  color: color-mix(in srgb, #fff 84%, transparent);
  text-wrap: pretty;
}

.club-coop__note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--e74-accent) 72%, #fff);
  line-height: 1.35;
}

.club-coop__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin-top: auto;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

.club-coop__more-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
  color: #fff;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.club-coop__card:hover .club-coop__more-arrow,
.club-coop__card:focus-visible .club-coop__more-arrow {
  background: var(--e74-accent);
  border-color: var(--e74-accent);
  transform: translateX(2px);
}

@media (min-width: 700px) {
  .club-coop__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 900px) {
  .club-coop__grid {
    gap: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .club-coop__img {
    transition: none;
  }

  .club-coop__card:hover .club-coop__img,
  .club-coop__card:focus-visible .club-coop__img {
    transform: none;
  }

  .club-coop__card:hover .club-coop__more-arrow,
  .club-coop__card:focus-visible .club-coop__more-arrow {
    transform: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Club — Media coverage (articles + videos)                                  */
/* -------------------------------------------------------------------------- */

.club-media {
  background: var(--e74-bg);
  border-bottom: 1px solid var(--e74-line);
  color: var(--e74-ink);
  padding: clamp(2.75rem, 6vw, 4.75rem) 0;
}

.club-media__shell {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

.club-media__intro {
  display: grid;
  gap: 0.85rem;
  max-width: 42rem;
}

.club-media__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--e74-tracking-heading);
  text-wrap: balance;
  color: var(--e74-ink);
}

.club-media__lead {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.club-media__empty {
  margin: 0;
  color: var(--e74-ink-muted);
}

.club-media__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

.club-media-card {
  min-width: 0;
  border-radius: var(--e74-radius-card);
  border: 1px solid var(--e74-line);
  background: var(--e74-surface);
  overflow: hidden;
  transition:
    transform var(--e74-ease),
    box-shadow var(--e74-ease),
    border-color var(--e74-ease);
}

.club-media-card:hover,
.club-media-card:focus-within {
  border-color: var(--e74-line-strong);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(14, 19, 24, 0.06);
}

.club-media-card--video {
  border-color: color-mix(in srgb, var(--e74-accent) 28%, var(--e74-line));
}

.club-media-card--article {
  border-color: var(--e74-line);
}

.club-media-card__link {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.club-media-card__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--e74-section-dark);
}

.club-media-card__img {
  width: 100%;
  height: 100%;
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.club-media-card:hover .club-media-card__img,
.club-media-card:focus-within .club-media-card__img {
  transform: scale(1.03);
}

.club-media-card__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 35%,
    rgba(7, 12, 18, 0.28) 100%
  );
}

.club-media-card__play-icon {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--e74-accent) 92%, #fff);
  box-shadow: 0 10px 28px rgba(7, 12, 18, 0.35);
  position: relative;
}

.club-media-card__play-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.9rem;
  border-color: transparent transparent transparent #fff;
  transform: translate(-50%, -50%);
}

.club-media-card__type {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
}

.club-media-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.15rem 1.2rem 1.25rem;
  min-width: 0;
}

.club-media-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
}

.club-media-card__source {
  color: var(--e74-accent);
}

.club-media-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--e74-tracking-heading-sm);
  text-wrap: balance;
  color: var(--e74-ink);
}

.club-media-card__summary {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.club-media-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--e74-accent);
}

.club-media-card__cta-arrow {
  font-size: 0.85em;
  line-height: 1;
}

.club-media-card:hover .club-media-card__cta,
.club-media-card:focus-within .club-media-card__cta {
  color: var(--e74-ink);
}

.club-media__more {
  display: flex;
  justify-content: center;
  padding-top: 0.35rem;
}

@media (min-width: 700px) {
  .club-media__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }
}

@media (min-width: 1100px) {
  .club-media__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .club-media-card,
  .club-media-card__img {
    transition: none;
  }

  .club-media-card:hover,
  .club-media-card:focus-within {
    transform: none;
  }

  .club-media-card:hover .club-media-card__img,
  .club-media-card:focus-within .club-media-card__img {
    transform: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Club — Leadership / working bodies                                         */
/* -------------------------------------------------------------------------- */

.club-board {
  background: var(--e74-bg);
  color: var(--e74-ink);
  border-bottom: 1px solid var(--e74-line);
  padding: clamp(2.75rem, 6vw, 5rem) 0;
}

.club-board__shell {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  min-width: 0;
}

.club-board__intro {
  display: grid;
  gap: 0.85rem;
  max-width: 40rem;
  min-width: 0;
}

.club-board__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.08;
  color: var(--e74-ink);
  text-wrap: balance;
}

.club-board__lead {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.6;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.club-board__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  min-width: 0;
}

.club-board__col {
  min-width: 0;
}

.club-board__body-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--e74-accent);
  line-height: 1.35;
}

.club-board__panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-card);
  background: var(--e74-surface);
}

.club-board__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
}

.club-board__table th,
.club-board__table td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--e74-line);
}

.club-board__table thead th {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
  background: color-mix(in srgb, var(--e74-ink) 2.5%, var(--e74-surface));
}

.club-board__table tbody tr:last-child th,
.club-board__table tbody tr:last-child td {
  border-bottom: 0;
}

.club-board__name {
  font-size: 1rem;
  font-weight: 550;
  color: var(--e74-ink);
  letter-spacing: var(--e74-tracking-heading-sm);
}

.club-board__person-name {
  display: block;
}

.club-board__role {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
  line-height: 1.3;
}

.club-board__role--lead {
  color: var(--e74-accent);
}

.club-board__call {
  width: 7.25rem;
  min-width: 7.25rem;
  text-align: right;
  white-space: nowrap;
}

.club-board__table thead th:last-child {
  white-space: nowrap;
}

.club-board__callsign {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--e74-accent);
}

.club-board__callsign--empty {
  color: var(--e74-ink-muted);
  font-weight: 500;
}

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

@media (min-width: 1000px) {
  .club-board__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Club history — WIP notice                                                  */
/* -------------------------------------------------------------------------- */

.club-history {
  background: var(--e74-bg);
  color: var(--e74-ink);
  border-bottom: 1px solid var(--e74-line);
  padding: clamp(2.5rem, 5.5vw, 4.25rem) 0 clamp(3.25rem, 7vw, 5.5rem);
}

.club-history__shell {
  min-width: 0;
}

.club-history__card {
  display: grid;
  gap: 0.85rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--e74-accent) 28%, var(--e74-line));
  border-radius: var(--e74-radius-card);
  background: color-mix(in srgb, var(--e74-accent-soft) 42%, var(--e74-surface));
  text-align: center;
  justify-items: center;
}

.club-history__eyebrow {
  margin: 0;
}

.club-history__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.8vw, 2.15rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.12;
  color: var(--e74-ink);
  text-wrap: balance;
}

.club-history__body {
  margin: 0;
  max-width: 32rem;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.6;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

/* -------------------------------------------------------------------------- */
/* Club documents — grouped PDF downloads                                     */
/* -------------------------------------------------------------------------- */

.club-docs {
  background: var(--e74-bg);
  color: var(--e74-ink);
  border-bottom: 1px solid var(--e74-line);
  padding: clamp(2.75rem, 6vw, 4.75rem) 0 clamp(3.25rem, 7vw, 5.5rem);
}

.club-docs__shell {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  min-width: 0;
}

.club-docs__intro {
  display: grid;
  gap: 0.85rem;
  max-width: 40rem;
  min-width: 0;
}

.club-docs__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.08;
  color: var(--e74-ink);
  text-wrap: balance;
}

.club-docs__lead {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.6;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.club-docs__empty {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--e74-ink-muted);
}

.club-docs__groups {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  min-width: 0;
}

.club-docs__group {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.club-docs__group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--e74-line);
}

.club-docs__group-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading-sm);
  line-height: 1.15;
  color: var(--e74-ink);
}

.club-docs__group-count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  color: var(--e74-ink-muted);
}

.club-docs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.club-docs__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: clamp(1.1rem, 2vw, 1.35rem) clamp(1.15rem, 2.2vw, 1.5rem);
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-card);
  background: var(--e74-surface);
}

.club-docs__copy {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.club-docs__item-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading-sm);
  line-height: 1.2;
  color: var(--e74-ink);
}

.club-docs__item-body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.club-docs__item-meta {
  margin: 0.15rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
}

.club-docs__download {
  justify-self: start;
}

@media (min-width: 800px) {
  .club-docs__item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
  }

  .club-docs__download {
    justify-self: end;
  }
}

/* -------------------------------------------------------------------------- */
/* Become — Who are radio amateurs? (4×4 technical matrix)                    */
/* -------------------------------------------------------------------------- */

.ham-who {
  --ham-who-line: color-mix(in srgb, var(--e74-section-dark) 16%, transparent);
  --ham-who-line-hover: color-mix(in srgb, var(--e74-section-dark) 26%, transparent);
  background: var(--e74-bg);
  border-bottom: 1px solid var(--e74-line);
  padding: clamp(3.25rem, 7vw, 5.75rem) 0 clamp(3.75rem, 8vw, 6.5rem);
  color: var(--e74-ink);
}

.ham-who__shell {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 3.75rem);
  min-width: 0;
}

.ham-who__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.95rem;
  max-width: 42rem;
  margin-inline: auto;
}

.ham-who__eyebrow {
  margin: 0;
}

.ham-who__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  font-weight: 600;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.12;
  color: var(--e74-section-dark);
  text-transform: none;
}

.ham-who__lead {
  margin: 0;
  max-width: 36rem;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.6;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

/* One connected matrix — continuous SVG dash frame */
.ham-who__board {
  position: relative;
  width: 100%;
  min-width: 0;
  border-radius: var(--e74-radius-card);
  background: color-mix(in srgb, var(--e74-surface) 55%, var(--e74-bg));
}

.ham-who__dash-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ham-who__dash-path {
  fill: none;
  stroke: color-mix(in srgb, var(--e74-accent) 42%, transparent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: butt;
  stroke-linejoin: round;
  /* Dash ≥ 2× gap; keep overall period fine like a classic dashed border */
  stroke-dasharray: 0.18 0.09;
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: calc(var(--e74-radius-card) - 1px);
  ry: calc(var(--e74-radius-card) - 1px);
}

.ham-who__matrix {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  border: none;
  border-radius: inherit;
  overflow: hidden;
}

.ham-who__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
  padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.1rem, 1.8vw, 1.55rem);
  border-right: 1px dashed var(--ham-who-line);
  border-bottom: 1px dashed var(--ham-who-line);
  background: transparent;
  transition:
    background-color 220ms ease,
    border-color 220ms ease;
}

.ham-who__cell:nth-child(4n) {
  border-right: 0;
}

/* Desktop 4×3 — last row = cells 9–12 */
.ham-who__cell:nth-child(n + 9) {
  border-bottom: 0;
}

.ham-who__index {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--e74-accent);
  opacity: 0.88;
  transition: opacity 220ms ease;
}

.ham-who__head,
.ham-who__toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
}

.ham-who__toggle {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: default;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.ham-who__chevron {
  display: none;
}

.ham-who__cell-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--e74-section-dark);
}

.ham-who__panel {
  width: 100%;
  min-width: 0;
}

.ham-who__cell-body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.ham-who__cell--close {
  gap: 0.75rem;
  justify-content: flex-start;
  background: color-mix(in srgb, var(--e74-accent) 14%, var(--e74-surface));
}

.ham-who__close-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--e74-accent);
}

.ham-who__close-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  font-weight: 600;
  letter-spacing: var(--e74-tracking-heading-sm);
  line-height: 1.3;
  color: var(--e74-section-dark);
  text-wrap: balance;
}

.ham-who__close-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--e74-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--e74-accent) 35%, transparent);
  padding-bottom: 0.15rem;
  transition: border-color 220ms ease, color 220ms ease;
}

.ham-who__close-link:hover,
.ham-who__close-link:focus-visible {
  color: var(--e74-section-dark);
  border-bottom-color: var(--e74-accent);
}

@media (hover: hover) and (pointer: fine) {
  .ham-who__cell:not(.ham-who__cell--close):hover {
    background: color-mix(in srgb, var(--e74-surface) 88%, transparent);
    border-color: var(--ham-who-line-hover);
  }

  .ham-who__cell:not(.ham-who__cell--close):hover .ham-who__index {
    opacity: 1;
  }
}

/* Tablet — 2 × 6, still one matrix */
@media (max-width: 1099px) and (min-width: 700px) {
  .ham-who__matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ham-who__cell {
    border-right: 1px dashed var(--ham-who-line);
    border-bottom: 1px dashed var(--ham-who-line);
  }

  .ham-who__cell:nth-child(4n) {
    border-right: 1px dashed var(--ham-who-line);
  }

  .ham-who__cell:nth-child(n + 9) {
    border-bottom: 1px dashed var(--ham-who-line);
  }

  .ham-who__cell:nth-child(2n) {
    border-right: 0;
  }

  /* Tablet last row = cells 11–12 */
  .ham-who__cell:nth-child(n + 11) {
    border-bottom: 0;
  }
}

/* Mobile — 1 × 12 accordion stack; first + last always open */
@media (max-width: 699px) {
  .ham-who {
    padding: clamp(2.5rem, 8vw, 3.5rem) 0 clamp(2.75rem, 9vw, 4rem);
  }

  .ham-who__shell {
    gap: 2rem;
  }

  .ham-who__intro {
    align-items: flex-start;
    text-align: left;
    max-width: none;
  }

  .ham-who__lead {
    max-width: none;
  }

  .ham-who__matrix {
    grid-template-columns: minmax(0, 1fr);
  }

  .ham-who__cell {
    border-right: 0;
    border-bottom: 1px dashed var(--ham-who-line);
    padding: 1.05rem 1.1rem;
    gap: 0.65rem;
  }

  .ham-who__cell:nth-child(4n),
  .ham-who__cell:nth-child(2n) {
    border-right: 0;
  }

  .ham-who__cell:nth-child(n + 9),
  .ham-who__cell:nth-child(n + 11) {
    border-bottom: 1px dashed var(--ham-who-line);
  }

  .ham-who__cell:last-child {
    border-bottom: 0;
  }

  .ham-who__toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
    align-items: center;
    cursor: pointer;
  }

  .ham-who__toggle .ham-who__index {
    grid-column: 1;
    grid-row: 1;
  }

  .ham-who__toggle .ham-who__cell-title {
    grid-column: 1;
    grid-row: 2;
  }

  .ham-who__chevron {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 1.5px solid var(--e74-accent);
    border-bottom: 1.5px solid var(--e74-accent);
    transform: rotate(45deg);
    transition: transform 200ms ease;
    opacity: 0.75;
  }

  .ham-who__cell.is-open .ham-who__chevron {
    transform: rotate(225deg);
  }

  /* Accordion: collapse middle cells; pinned first/last stay open */
  .ham-who__cell[data-ham-who-accordion] .ham-who__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 320ms ease;
  }

  .ham-who__cell[data-ham-who-accordion].is-open .ham-who__panel {
    grid-template-rows: 1fr;
  }

  .ham-who__cell[data-ham-who-accordion] .ham-who__panel > * {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateY(-0.2rem);
    transition:
      opacity 240ms ease,
      transform 280ms ease;
  }

  .ham-who__cell[data-ham-who-accordion].is-open .ham-who__panel > * {
    opacity: 1;
    transform: none;
  }

  .ham-who__cell-body {
    font-size: 0.92rem;
  }

  .ham-who__cell--close {
    min-height: 11.5rem;
    padding-top: 1.65rem;
    padding-bottom: 1.65rem;
    gap: 0.95rem;
  }

  .ham-who__cell--close .ham-who__close-link {
    padding-top: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ham-who__cell,
  .ham-who__index,
  .ham-who__close-link,
  .ham-who__chevron {
    transition: none;
  }

  .ham-who__cell[data-ham-who-accordion] .ham-who__panel,
  .ham-who__cell[data-ham-who-accordion] .ham-who__panel > * {
    transition: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Become — licence path (sticky left header · 2×3 step cards)                */
/* -------------------------------------------------------------------------- */

.ham-steps {
  background: var(--e74-bg);
  border-bottom: 1px solid var(--e74-line);
  padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(3.25rem, 7vw, 5.5rem);
  color: var(--e74-ink);
}

.ham-steps__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
  min-width: 0;
}

.ham-steps__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
  width: 100%;
  min-width: 0;
}

.ham-steps__eyebrow {
  margin: 0;
}

.ham-steps__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: var(--e74-tracking-heading);
  text-wrap: balance;
  color: var(--e74-ink);
}

.ham-steps__lead {
  margin: 0;
  max-width: 28rem;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.ham-steps__actions {
  margin-top: 0.35rem;
}

.ham-steps__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  min-width: 0;
}

.ham-steps__card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  min-height: 100%;
  padding: 1.55rem 1.45rem 1.35rem;
  border-radius: var(--e74-radius-card);
  background: var(--e74-surface);
  border: 1px solid var(--e74-line);
  color: var(--e74-ink);
  transition: transform var(--e74-ease), box-shadow var(--e74-ease), border-color var(--e74-ease);
}

.ham-steps__card:hover {
  border-color: var(--e74-line-strong);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(14, 19, 24, 0.06);
}

.ham-steps__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.ham-steps__card-index {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--e74-accent);
}

.ham-steps__card-title {
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.8vw, 1.65rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--e74-tracking-heading-sm);
  color: var(--e74-ink);
}

.ham-steps__card-media {
  position: relative;
  margin: 0.15rem 0 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--e74-radius-card) - 4px);
  overflow: hidden;
  background: var(--e74-section-dark);
}

.ham-steps__card-media--mockup {
  background: #e6eaee;
}

.ham-steps__card-media .img-cover,
.ham-steps__card-media .ham-steps__card-img {
  width: 100%;
  height: 100%;
  transition: transform var(--e74-ease);
}

.ham-steps__card-img--contain {
  object-fit: cover;
  object-position: 52% 46%;
  padding: 0;
}

.ham-steps__card-media--diagram {
  background: #f3f5f7;
}

.ham-steps__card-img--diagram {
  object-fit: contain;
  object-position: center;
  padding: 0.45rem 0.55rem;
}

.ham-steps__card:hover .ham-steps__card-media .img-cover,
.ham-steps__card:hover .ham-steps__card-media .ham-steps__card-img {
  transform: scale(1.04);
}

.ham-steps__card:hover .ham-steps__card-media--mockup .ham-steps__card-img {
  transform: scale(1.03);
}

.ham-steps__card:hover .ham-steps__card-media--diagram .ham-steps__card-img {
  transform: none;
}

.ham-steps__card-body {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.ham-steps__card-foot {
  display: flex;
  align-items: flex-start;
  margin-top: auto;
  padding-top: 0.35rem;
}

.ham-steps__card-note {
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
}

@media (min-width: 700px) {
  .ham-steps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

@media (min-width: 960px) {
  .ham-steps__shell {
    /* Sticky editorial left ~1/3 · scrolling 2×3 cards ~2/3 */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.65fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: start;
  }

  .ham-steps__intro {
    position: sticky;
    top: calc(var(--e74-header-h-compact, 4.5rem) + 1.35rem);
    padding-right: clamp(0.5rem, 1.5vw, 1.25rem);
  }

  .ham-steps__grid {
    gap: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ham-steps__card,
  .ham-steps__card-media .img-cover,
  .ham-steps__card-media .ham-steps__card-img {
    transition: none;
  }

  .ham-steps__card:hover {
    transform: none;
  }

  .ham-steps__card:hover .ham-steps__card-media .img-cover,
  .ham-steps__card:hover .ham-steps__card-media .ham-steps__card-img {
    transform: none;
  }

}

/* -------------------------------------------------------------------------- */
/* Become — exam prep / knowledge base (3 resource cards)                     */
/* -------------------------------------------------------------------------- */

.learn-prep {
  background: var(--e74-bg);
  border-bottom: 1px solid var(--e74-line);
  color: var(--e74-ink);
  padding: clamp(2.75rem, 6vw, 4.75rem) 0;
}

.learn-prep__shell {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 2.75rem);
  min-width: 0;
}

.learn-prep__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  max-width: 40rem;
  margin-inline: auto;
}

.learn-prep__eyebrow {
  margin: 0;
}

.learn-prep__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.8vw, 2.75rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: var(--e74-tracking-heading);
  text-wrap: balance;
  color: var(--e74-section-dark);
}

.learn-prep__lead {
  margin: 0;
  max-width: 34rem;
  font-family: var(--font-ui);
  font-size: clamp(0.96rem, 1.1vw, 1.05rem);
  font-weight: 500;
  line-height: 1.58;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.learn-prep__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  min-width: 0;
}

.learn-prep__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
  padding: 1.35rem 1.35rem 1.4rem;
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-card);
  background: var(--e74-surface);
  box-shadow: 0 10px 28px rgba(14, 19, 24, 0.05);
  transition:
    transform var(--e74-ease),
    box-shadow var(--e74-ease),
    border-color var(--e74-ease),
    background var(--e74-ease);
}

.learn-prep__card:hover,
.learn-prep__card:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--e74-accent) 42%, var(--e74-line));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--e74-ink) 12%, transparent);
}

.learn-prep__card--kb {
  background: color-mix(in srgb, var(--e74-accent-soft) 42%, var(--e74-surface));
  border-color: color-mix(in srgb, var(--e74-accent) 32%, var(--e74-line));
}

.learn-prep__card--kb:hover,
.learn-prep__card--kb:focus-within {
  background: color-mix(in srgb, var(--e74-accent-soft) 55%, var(--e74-surface));
  border-color: color-mix(in srgb, var(--e74-accent) 48%, var(--e74-line));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--e74-accent) 18%, transparent);
}

.learn-prep__card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

.learn-prep__card-label,
.learn-prep__card-value,
.learn-prep__card-badge {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--e74-section-dark);
}

.learn-prep__card-badge {
  color: var(--e74-accent);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

.learn-prep__meter {
  width: 100%;
  height: 0.55rem;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--e74-section-dark) 10%, transparent);
}

.learn-prep__card--kb .learn-prep__meter {
  background: color-mix(in srgb, var(--e74-accent) 16%, transparent);
}

.learn-prep__meter-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--e74-section-dark);
}

.learn-prep__card--kb .learn-prep__meter-fill {
  background: var(--e74-accent);
}

.learn-prep__card-title {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--e74-tracking-heading-sm);
  color: var(--e74-section-dark);
}

.learn-prep__card-body {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.learn-prep__card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--e74-accent);
  text-decoration: none;
  transition: color 180ms ease;
}

.learn-prep__card-link span[aria-hidden] {
  display: inline-block;
  transition: transform 180ms ease;
}

.learn-prep__card-link:hover,
.learn-prep__card-link:focus-visible {
  color: var(--e74-section-dark);
}

.learn-prep__card-link:hover span[aria-hidden],
.learn-prep__card-link:focus-visible span[aria-hidden] {
  transform: translateX(3px);
}

.learn-prep__card-link:focus-visible {
  outline: 2px solid var(--e74-accent);
  outline-offset: 3px;
}

@media (min-width: 800px) {
  .learn-prep__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
  }

  .learn-prep__card {
    min-height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .learn-prep__card,
  .learn-prep__card-link,
  .learn-prep__card-link span[aria-hidden] {
    transition: none;
  }

  .learn-prep__card:hover,
  .learn-prep__card:focus-within {
    transform: none;
  }

  .learn-prep__card-link:hover span[aria-hidden],
  .learn-prep__card-link:focus-visible span[aria-hidden] {
    transform: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Become — after the licence (horizontal discipline tabs + split card)       */
/* -------------------------------------------------------------------------- */

.after-licence {
  background: var(--e74-bg);
  border-bottom: 1px solid var(--e74-line);
  color: var(--e74-ink);
  padding: clamp(2.75rem, 6vw, 5rem) 0;
  overflow-x: clip;
}

.after-licence__shell {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  min-width: 0;
}

.after-licence__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;
  max-width: none;
  min-width: 0;
}

.after-licence__eyebrow {
  margin: 0;
}

.after-licence__title-row {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  width: 100%;
  min-width: 0;
}

.after-licence__title {
  flex: 0 1 auto;
  margin: 0;
  max-width: min(18ch, 58%);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--e74-tracking-heading);
  text-wrap: balance;
  color: var(--e74-ink);
}

/* Amplitude toward shell edge — gutter pull, not 50vw (avoids scrollbar overflow) */
.after-licence__wave {
  flex: 1 1 auto;
  align-self: center;
  height: clamp(2.6rem, 3.6vw, 3.35rem);
  min-width: 3.5rem;
  margin-right: calc(-1 * var(--e74-gutter));
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 6%,
    rgba(0, 0, 0, 0.45) 18%,
    rgba(0, 0, 0, 0.85) 38%,
    #000 58%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 6%,
    rgba(0, 0, 0, 0.45) 18%,
    rgba(0, 0, 0, 0.85) 38%,
    #000 58%
  );
}

.after-licence__wave .amp-wave,
.after-licence__amp {
  display: block;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100%;
  margin: 0;
}

.after-licence__wave .amp-wave__viewport,
.after-licence__wave .amp-wave__track,
.after-licence__wave .amp-wave__svg {
  height: 100%;
  min-height: 0;
}

.after-licence__wave .amp-wave__path {
  opacity: 0.78;
  stroke-width: 2;
}

.after-licence__lead {
  margin: 0;
  max-width: 42rem;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.after-licence__system {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.after-licence__tabs-wrap {
  margin: 0 calc(var(--e74-gutter) * -1);
  padding-inline: var(--e74-gutter);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.after-licence__tabs-wrap::-webkit-scrollbar {
  display: none;
}

.after-licence__tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.15rem;
  width: max-content;
  min-width: 100%;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--e74-line);
}

.after-licence__tab {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  padding: 0.7rem 0.85rem 0.85rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: color-mix(in srgb, var(--e74-ink) 55%, transparent);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--e74-ease), border-color var(--e74-ease);
}

.after-licence__tab:hover,
.after-licence__tab:focus-visible {
  color: var(--e74-ink);
  outline: none;
}

.after-licence__tab:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--e74-accent) 55%, transparent);
}

.after-licence__tab.is-active {
  color: var(--e74-ink);
  border-bottom-color: var(--e74-accent);
  font-weight: 700;
}

.after-licence__tab-index {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--e74-ink) 42%, transparent);
}

.after-licence__tab.is-active .after-licence__tab-index {
  color: var(--e74-accent);
}

.after-licence__tab-label {
  text-transform: uppercase;
}

.after-licence__panels {
  min-width: 0;
}

.after-licence__panel[hidden] {
  display: none !important;
}

.after-licence__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
  min-width: 0;
  min-height: 22.5rem;
  padding: clamp(0.75rem, 1.4vw, 1.1rem);
  background: var(--e74-surface);
  border: 1px solid var(--e74-accent);
  border-radius: calc(var(--e74-radius-card) + 8px);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(14, 19, 24, 0.04);
}

.after-licence__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.1rem 1rem 1.05rem;
  min-width: 0;
  height: 100%;
  border-radius: calc(var(--e74-radius-card) + 2px);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--e74-accent-soft) 55%, var(--e74-surface)) 0%,
    color-mix(in srgb, var(--e74-accent-soft) 18%, transparent) 52%,
    transparent 100%
  );
}

.after-licence__category {
  margin: 0;
  background: var(--e74-accent);
  color: #fff;
}

.after-licence__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--e74-tracking-heading);
  text-wrap: balance;
  color: var(--e74-ink);
}

.after-licence__body {
  margin: 0;
  max-width: 36ch;
  font-family: var(--font-ui);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.after-licence__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: auto;
  padding-top: 0.85rem;
  width: 100%;
}

.after-licence__tech {
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
  background: var(--e74-accent-soft);
  color: var(--e74-ink);
}

.after-licence__cta {
  margin-left: auto;
  color: var(--e74-ink);
}

.after-licence__cta:hover,
.after-licence__cta:focus-visible {
  color: var(--e74-accent);
  outline: none;
}

.after-licence__cta-arrow {
  font-size: 0.95em;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
}

.after-licence__media {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--e74-radius-card) + 2px);
  background: var(--e74-section-dark);
  overflow: hidden;
  align-self: stretch;
}

.after-licence__img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

.after-licence__badge {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--e74-radius-badge);
  background: rgba(255, 255, 255, 0.94);
  color: var(--e74-ink);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(14, 19, 24, 0.12);
}

@media (min-width: 900px) {
  .after-licence__tabs-wrap {
    margin: 0;
    padding-inline: 0;
  }

  .after-licence__card {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: stretch;
    min-height: 28rem;
    padding: clamp(0.9rem, 1.6vw, 1.25rem);
    gap: clamp(0.9rem, 1.6vw, 1.25rem);
  }

  .after-licence__copy {
    padding: clamp(1.35rem, 2.4vw, 1.85rem) clamp(1.15rem, 2.2vw, 1.65rem);
    gap: 1rem;
  }

  .after-licence__media {
    aspect-ratio: auto;
    min-height: 100%;
    height: 100%;
    border-radius: calc(var(--e74-radius-card) + 2px);
  }

  .after-licence__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .after-licence__heading {
    max-width: 14ch;
  }
}

@media (max-width: 899.98px) {
  .after-licence__title {
    max-width: none;
  }

  .after-licence__wave {
    display: none;
  }

  .after-licence__card {
    /* Image first on mobile (reference stack) */
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .after-licence__media {
    order: -1;
    aspect-ratio: auto;
    border-radius: calc(var(--e74-radius-card) + 2px);
  }

  /* Full diagram visible on narrow viewports (no side crop). */
  .after-licence__img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .after-licence__body {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .after-licence__tab,
  .after-licence__cta {
    transition: none;
  }

  .after-licence__wave .amp-wave__track {
    animation: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Become page — licence classes FAQ (Rule 92/2020 / CEPT)                    */
/* -------------------------------------------------------------------------- */

.licence-faq {
  background: var(--e74-bg);
  border-bottom: 1px solid var(--e74-line);
  color: var(--e74-ink);
  padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(3.25rem, 7vw, 5.75rem);
}

.licence-faq__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
  min-width: 0;
}

.licence-faq__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;
  min-width: 0;
}

.licence-faq__eyebrow {
  margin: 0;
}

.licence-faq__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--e74-tracking-heading);
  text-wrap: balance;
  color: var(--e74-ink);
}

.licence-faq__lead {
  margin: 0;
  max-width: 34rem;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.06rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.licence-faq__summary {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  max-width: 28rem;
  margin-top: 0.25rem;
}

.licence-faq__summary-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem 0.65rem;
  border-radius: calc(var(--e74-radius-card) + 2px);
  border: 1px solid var(--e74-line);
  background: var(--e74-surface);
  color: var(--e74-ink);
}

.licence-faq__summary-block--entry {
  background: var(--e74-surface);
  border-color: var(--e74-line);
  color: var(--e74-ink);
}

.licence-faq__summary-block--novice {
  background: var(--e74-accent);
  border-color: var(--e74-accent);
  color: #fff;
}

.licence-faq__summary-block--cept {
  background: var(--e74-section-dark);
  border-color: var(--e74-section-dark);
  color: #fff;
}

.licence-faq__summary-code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
}

.licence-faq__summary-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 0.75rem;
}

.licence-faq__summary-row {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.licence-faq__summary-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
}

.licence-faq__summary-block--novice .licence-faq__summary-label,
.licence-faq__summary-block--cept .licence-faq__summary-label {
  color: color-mix(in srgb, #fff 72%, transparent);
}

.licence-faq__summary-line {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
}

.licence-faq__main {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  min-width: 0;
}

.licence-faq__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--e74-line);
}

.licence-faq__item {
  border-bottom: 1px solid var(--e74-line);
}

.licence-faq__item-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.licence-faq__trigger {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem 1rem;
  width: 100%;
  margin: 0;
  padding: 1.05rem 0.15rem 1.05rem 0;
  border: 0;
  background: transparent;
  color: var(--e74-ink);
  text-align: left;
  cursor: pointer;
  transition: color var(--e74-ease);
}

.licence-faq__trigger:hover,
.licence-faq__trigger:focus-visible {
  color: var(--e74-ink);
  outline: none;
}

.licence-faq__trigger:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--e74-accent) 55%, transparent);
}

.licence-faq__item-index {
  padding-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--e74-ink) 42%, transparent);
}

.licence-faq__item.is-open .licence-faq__item-index {
  color: var(--e74-accent);
}

.licence-faq__item.is-open .licence-faq__item-question {
  color: var(--e74-accent);
}

.licence-faq__item.is-open .licence-faq__trigger {
  color: var(--e74-accent);
}

.licence-faq__item-question {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--e74-tracking-heading-sm);
  text-wrap: pretty;
}

.licence-faq__item-icon {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.licence-faq__item-icon::before,
.licence-faq__item-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform var(--e74-ease), opacity var(--e74-ease);
}

.licence-faq__item-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  transform: translateY(-50%);
}

.licence-faq__item-icon::after {
  top: 0;
  left: 50%;
  width: 1.5px;
  height: 100%;
  transform: translateX(-50%);
}

.licence-faq__item.is-open .licence-faq__item-icon::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

.licence-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms ease;
}

.licence-faq__item.is-open .licence-faq__panel {
  grid-template-rows: 1fr;
}

.licence-faq__panel-inner {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0 0 1.25rem;
  max-width: 46rem;
  padding-left: calc(0.68rem * 2.2 + 1rem);
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transform: translateY(-0.2rem);
  transition:
    opacity 240ms ease,
    transform 280ms ease;
}

.licence-faq__item.is-open .licence-faq__panel-inner {
  opacity: 1;
  transform: none;
}

.licence-faq__answer {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.licence-faq__source-note {
  margin: 0.15rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: color-mix(in srgb, var(--e74-ink) 48%, transparent);
}

.licence-faq__foot {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-top: 0.35rem;
  max-width: 46rem;
}

.licence-faq__disclaimer {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.licence-faq__sources-heading {
  margin: 0.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--e74-accent);
}

.licence-faq__sources {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.licence-faq__sources a {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--e74-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.licence-faq__sources a:hover,
.licence-faq__sources a:focus-visible {
  color: var(--e74-accent);
  outline: none;
}

@media (min-width: 960px) {
  .licence-faq__shell {
    /* Sticky editorial left · scrolling FAQ right (same pattern as ham-steps) */
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    gap: clamp(1.75rem, 3.5vw, 3rem);
    align-items: start;
  }

  .licence-faq__aside {
    position: sticky;
    top: calc(var(--e74-header-h-compact, 4rem) + 1.25rem);
    align-self: start;
    width: 100%;
    padding-right: clamp(0.5rem, 1.5vw, 1.25rem);
  }
}

@media (max-width: 599.98px) {
  .licence-faq__panel-inner {
    padding-left: 0;
  }

  .licence-faq__trigger {
    gap: 0.65rem 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .licence-faq__trigger,
  .licence-faq__item-icon::before,
  .licence-faq__item-icon::after,
  .licence-faq__panel,
  .licence-faq__panel-inner {
    transition: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Become radio amateur — left intro + stacked dashed steps (no images)       */
/* -------------------------------------------------------------------------- */

.become-ham {
  background: var(--e74-bg);
  border-bottom: 1px solid var(--e74-line);
  padding: clamp(2.75rem, 6vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6rem);
  color: var(--e74-ink);
}

.become-ham__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
  min-width: 0;
}

.become-ham__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
  max-width: none;
  width: 100%;
  min-width: 0;
}

.become-ham__eyebrow {
  margin: 0;
}

.become-ham__title {
  margin: 0;
  max-width: none;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: var(--e74-tracking-heading);
  text-wrap: balance;
  color: var(--e74-ink);
}

.become-ham__body {
  margin: 0;
  max-width: none;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
}

.become-ham__categories {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--e74-line);
  width: 100%;
  max-width: none;
}

.become-ham__categories-label,
.become-ham__categories-values {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.become-ham__categories-label {
  color: var(--e74-ink-muted);
}

.become-ham__categories-values {
  color: var(--e74-ink);
}

.become-ham__actions {
  margin-top: 0.35rem;
}

.become-ham__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.become-ham__step {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  margin: 0;
  padding: 1.15rem 1.2rem 1.1rem;
  border: 1px dashed var(--e74-line);
  border-radius: var(--e74-radius-badge);
  background: var(--e74-surface);
  transition:
    transform var(--e74-ease),
    box-shadow var(--e74-ease),
    border-color var(--e74-ease),
    background-color var(--e74-ease);
}

.become-ham__step:hover {
  border-color: color-mix(in srgb, var(--e74-accent) 55%, var(--e74-line));
  background: color-mix(in srgb, var(--e74-accent) 4%, var(--e74-surface));
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(14, 19, 24, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .become-ham__step {
    transition: border-color var(--e74-ease), background-color var(--e74-ease);
  }

  .become-ham__step:hover {
    transform: none;
    box-shadow: none;
  }
}

.become-ham__step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.become-ham__step-label,
.become-ham__step-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.become-ham__step-label {
  color: var(--e74-ink-muted);
}

.become-ham__step-note {
  flex: 0 1 auto;
  min-width: 0;
  text-align: right;
  color: var(--e74-accent);
  text-wrap: balance;
}

.become-ham__step-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--e74-tracking-heading);
  text-transform: uppercase;
  color: var(--e74-ink);
}

.become-ham__step-body {
  margin: 0;
  max-width: 42ch;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--e74-ink-muted);
}

@media (min-width: 960px) {
  .become-ham__shell {
    /* Match FeaturedProject cards: 1/3 · 2/3 (0.85fr · 1.65fr) */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.65fr);
    gap: 1.1rem;
    align-items: start;
  }

  .become-ham__intro {
    position: sticky;
    top: calc(var(--e74-header-h-compact) + 1.25rem);
    max-width: none;
    padding-right: clamp(1rem, 2.2vw, 1.75rem);
    width: 100%;
  }

  .become-ham__title,
  .become-ham__body,
  .become-ham__categories {
    max-width: none;
  }
}

@media (max-width: 959px) {
  .become-ham__intro {
    max-width: none;
  }
}

@media (max-width: 559px) {
  .become-ham__categories-values {
    letter-spacing: 0.1em;
  }
}

/* -------------------------------------------------------------------------- */
/* Homepage latest news — lead feature + three list cards                     */
/* -------------------------------------------------------------------------- */

.home-news {
  background: var(--e74-bg);
  color: var(--e74-ink);
  padding: clamp(3rem, 6.5vw, 5.75rem) 0;
  border-bottom: 1px solid var(--e74-line);
}

.home-news__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 40rem;
  margin: 0 auto clamp(1.35rem, 2.8vw, 2.15rem);
  gap: 0.85rem;
  min-width: 0;
}

.home-news__eyebrow {
  margin: 0;
}

.home-news__title {
  margin: 0;
  max-width: 16ch;
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: var(--e74-tracking-heading);
  text-transform: none;
  text-wrap: balance;
  color: var(--e74-ink);
}

.home-news__body {
  margin: 0;
  max-width: 34rem;
  width: 100%;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
}

.home-news__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 1.8vw, 1.35rem);
  align-items: stretch;
}

.home-news__lead {
  min-width: 0;
  min-height: 0;
  display: flex;
}

.home-news__lead-card {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 100%;
  aspect-ratio: auto;
  max-height: 100%;
}

.home-news__lead-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.45;
  color: color-mix(in srgb, #fff 78%, transparent);
}

.home-news__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}

.home-news__item {
  margin: 0;
  min-width: 0;
}

/* Compact horizontal cards — text beside image, minimal height */
.home-news__list .news-list-card {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
}

.home-news__list .news-list-card__media {
  order: 0;
  min-height: 7.25rem;
}

.home-news__list .news-list-card__img,
.home-news__list .news-list-card__media-fallback {
  min-height: 7.25rem;
}

.home-news__list .news-list-card__body {
  gap: 0.4rem;
  padding: 0.75rem 0.85rem;
}

.home-news__list .news-list-card__title {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.25;
}

.home-news__list .news-list-card__summary {
  -webkit-line-clamp: 2;
  font-size: 0.82rem;
  line-height: 1.4;
}

.home-news__list .news-list-card__footer {
  padding-top: 0.25rem;
}

.home-news__list .news-list-card__tags {
  gap: 0.25rem;
}

.home-news__actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.25rem, 2.5vw, 1.85rem);
}

@media (max-width: 899px) {
  .home-news__grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  /*
   * Mobile featured: fixed photo band; extra height grows graphite text zone only
   * (same idea as activity-card — do not crop/reposition the image).
   */
  .home-news__lead-card {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    min-height: 0;
    height: auto;
    max-height: none;
  }

  .home-news__lead-card .news-feat-card__media {
    position: relative;
    inset: auto;
    flex: 0 0 12.5rem;
    width: 100%;
    height: 12.5rem;
    max-height: 12.5rem;
    overflow: hidden;
  }

  .home-news__lead-card .news-feat-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .home-news__lead-card .news-feat-card__veil {
    background: linear-gradient(
      180deg,
      rgb(28 34 40 / 0) 0%,
      rgb(28 34 40 / 0) 18%,
      rgb(28 34 40 / 0.22) 42%,
      rgb(28 34 40 / 0.55) 68%,
      rgb(28 34 40 / 0.88) 88%,
      rgb(28 34 40 / 1) 100%
    );
  }

  .home-news__lead-card .news-feat-card__content {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-height: 10.5rem;
    justify-content: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 1rem 1rem;
    background: linear-gradient(
      180deg,
      #1c2228 0%,
      #191e24 35%,
      #151a1f 70%,
      #12171c 100%
    );
  }

  .home-news__lead-card .news-feat-card__title {
    font-size: 1.15rem;
    line-height: 1.25;
  }

  .home-news__lead-summary {
    -webkit-line-clamp: 3;
  }

  .home-news__lead-card .news-feat-card__footer {
    margin-top: auto;
    padding-top: 0.35rem;
  }

  .home-news__list {
    gap: 0.55rem;
  }

  /* Keep horizontal compact cards on mobile — override global news-list stack */
  .home-news__list .news-list-card {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    min-height: 0;
  }

  .home-news__list .news-list-card__media {
    order: 0;
    min-height: 5.75rem;
  }

  .home-news__list .news-list-card__img,
  .home-news__list .news-list-card__media-fallback {
    min-height: 5.75rem;
  }

  .home-news__list .news-list-card__body {
    gap: 0.35rem;
    padding: 0.65rem 0.7rem;
    justify-content: center;
  }

  .home-news__list .news-list-card__tags,
  .home-news__list .news-list-card__summary {
    display: none;
  }

  .home-news__list .news-list-card__title {
    font-size: 0.92rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .home-news__list .news-list-card__footer {
    padding-top: 0.15rem;
    gap: 0.45rem;
  }

  .home-news__list .news-list-card__date {
    font-size: 0.65rem;
  }

  .home-news__list .news-list-card__more {
    font-size: 0.72rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Radio Outdoors / Activities — intro + Swiper ActivityCards + full CTA      */
/* -------------------------------------------------------------------------- */

.radio-outdoors {
  background: var(--e74-bg);
  color: var(--e74-ink);
  padding: clamp(3rem, 6.5vw, 5.75rem) 0 0;
  border-bottom: 1px solid var(--e74-line);
}

.radio-outdoors__shell {
  padding-bottom: 0;
}

.radio-outdoors__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 40rem;
  margin: 0 auto clamp(1.35rem, 2.8vw, 2.15rem);
  gap: 0.85rem;
  min-width: 0;
}

.radio-outdoors__eyebrow {
  margin: 0;
}

.radio-outdoors__title {
  margin: 0;
  max-width: 16ch;
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: var(--e74-tracking-heading);
  text-transform: none;
  text-wrap: balance;
  color: var(--e74-ink);
}

.radio-outdoors__body {
  margin: 0;
  max-width: 34rem;
  width: 100%;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
}

/*
 * Track = exact .shell content width.
 * Prev/next sit in the side gutters outside that column.
 */
.radio-outdoors__stage {
  --act-shell: min(100% - (var(--e74-gutter) * 2), var(--e74-max));
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    var(--act-shell)
    minmax(0, 1fr);
  align-items: center;
  margin-bottom: clamp(2.75rem, 5.5vw, 4.5rem);
}

.radio-outdoors__track {
  grid-column: 2;
  min-width: 0;
  width: 100%;
}

.radio-outdoors__swiper {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-bottom: 0.2rem;
}

.radio-outdoors__swiper .swiper-slide {
  height: auto;
  transition:
    opacity 780ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

.radio-outdoors__swiper .swiper-slide:not(.swiper-slide-visible) {
  opacity: 0.55;
}

.radio-outdoors__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--e74-ink) 14%, transparent);
  border-radius: 999px;
  background: var(--e74-surface);
  color: var(--e74-ink);
  cursor: pointer;
  transition:
    background 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
}

.radio-outdoors__nav--prev {
  grid-column: 1;
  justify-self: center;
}

.radio-outdoors__nav--next {
  grid-column: 3;
  justify-self: center;
}

.radio-outdoors__nav:hover,
.radio-outdoors__nav:focus-visible {
  background: var(--e74-ink);
  color: var(--e74-overlay-ink);
  border-color: var(--e74-ink);
  outline: none;
  transform: scale(1.05);
}

.radio-outdoors__nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
  transform: none;
}

@media (max-width: 1399px) {
  /*
   * Side gutters = (viewport − shell) / 2. Shell is inset by --e74-gutter
   * (clamp 1.25rem–2.75rem). Nav buttons are 2.35rem (~37.6px). Below
   * ~1175px gutters are narrower than the buttons and overhang the
   * viewport → horizontal page scroll. Keep side placement only once
   * gutters are reliably ≥ button + hover scale (max gutter 2.75rem at
   * ~1375px). Same under-track pattern as .news-feat-carousel.
   */
  .radio-outdoors__stage {
    display: grid;
    grid-template-columns: var(--act-shell);
    justify-content: center;
    row-gap: 0.75rem;
  }

  .radio-outdoors__track {
    grid-column: 1;
    grid-row: 1;
  }

  .radio-outdoors__nav--prev,
  .radio-outdoors__nav--next {
    grid-column: 1;
    grid-row: 2;
    justify-self: unset;
  }

  .radio-outdoors__nav--prev {
    justify-self: start;
  }

  .radio-outdoors__nav--next {
    justify-self: end;
  }
}

/*
 * ActivityCard — full-bleed photo (100% width of card).
 * Clear photo = top ~2/5. Graphite veil starts there and overlaps
 * INTO the photo from below, then fills the bottom ~3/5. No solid panel.
 */
.activity-card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--e74-radius-card);
  background: var(--e74-section-dark);
  color: var(--e74-overlay-ink);
  text-decoration: none;
  isolation: isolate;
}

.activity-card--link:hover,
.activity-card--link:focus-visible {
  color: var(--e74-overlay-ink);
  outline: none;
}

.activity-card--link:focus-visible {
  box-shadow: 0 0 0 2px var(--e74-bg), 0 0 0 4px var(--e74-accent);
}

.activity-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--e74-section-dark);
}

.activity-card__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--e74-media-position, 50% 45%);
  z-index: 0;
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.activity-card__placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #d8dde3;
}

.activity-card--placeholder:hover .activity-card__placeholder,
.activity-card--placeholder.activity-card--link:focus-visible .activity-card__placeholder {
  transform: none;
}

.activity-card:hover .activity-card__img,
.activity-card--link:focus-visible .activity-card__img {
  transform: scale(1.04);
}

/* Continuous veil: transparent through top 2/5, ramps across into the photo, solid by the bottom */
.activity-card__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(28 34 40 / 0) 0%,
    rgb(28 34 40 / 0) 40%,
    rgb(28 34 40 / 0.28) 52%,
    rgb(28 34 40 / 0.58) 66%,
    rgb(28 34 40 / 0.84) 80%,
    rgb(28 34 40 / 0.96) 92%,
    rgb(28 34 40 / 1) 100%
  );
}

.activity-card__logo-slot {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity-card__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.3));
  pointer-events: none;
}

.activity-card__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 40%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0 1.25rem 1.2rem;
  box-sizing: border-box;
  background: transparent;
}

.activity-card__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 82%, transparent);
  line-height: 1.35;
}

.activity-card__index {
  color: var(--e74-accent);
}

.activity-card__meta-sep {
  opacity: 0.55;
}

.activity-card__label {
  color: color-mix(in srgb, #fff 88%, transparent);
}

.activity-card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  /* Same band with or without logo — keeps tags/desc aligned across cards */
  min-height: 2.75rem;
}

.activity-card__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  background: none;
  padding: 0;
}

.activity-card__title-text {
  display: inline;
  padding: 0.22em 0.55em 0.28em;
  border-radius: var(--e74-radius-control);
  background: var(--e74-accent);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--e74-tracking-heading);
  text-transform: uppercase;
  color: #fff;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.activity-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 1.65rem;
}

.activity-card__tag {
  color: color-mix(in srgb, #fff 82%, transparent);
  background: color-mix(in srgb, #fff 12%, transparent);
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
}

.activity-card__desc {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.5;
  color: color-mix(in srgb, #fff 78%, transparent);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* Fixed 2-line band so footer aligns across cards */
  min-height: calc(1.5em * 2);
}

.activity-card__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding-top: 0;
  width: 100%;
}

.activity-card__rule {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--e74-accent);
  opacity: 0.9;
}

.activity-card__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  transition: color 160ms ease;
}

.activity-card__more-label {
  min-width: 0;
}

.activity-card__more-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--e74-section-dark-line);
  color: #fff;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.activity-card__more:hover,
.activity-card__more:focus-visible {
  color: #fff;
  outline: none;
}

.activity-card__more:hover .activity-card__more-arrow,
.activity-card__more:focus-visible .activity-card__more-arrow {
  background: var(--e74-accent);
  border-color: var(--e74-accent);
  color: #fff;
}

.activity-card--link:hover .activity-card__more-arrow,
.activity-card--link:focus-visible .activity-card__more-arrow {
  background: var(--e74-accent);
  border-color: var(--e74-accent);
  color: #fff;
}

.activity-card__more--static {
  cursor: default;
}

/* Mobile: lock photo band height; grow only the graphite zone below */
@media (max-width: 699px) {
  .radio-outdoors__nav {
    width: 2.1rem;
    height: 2.1rem;
  }

  .radio-outdoors__swiper .swiper-wrapper {
    align-items: stretch;
  }

  .radio-outdoors__swiper .swiper-slide {
    height: auto;
    display: flex;
  }

  .activity-card {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    height: 30.5rem;
    min-height: 30.5rem;
    max-height: 30.5rem;
  }

  /* Same photo band as before — do not grow this */
  .activity-card__media {
    position: relative;
    inset: auto;
    flex: 0 0 12.4rem;
    width: 100%;
    height: 12.4rem;
    max-height: 12.4rem;
  }

  /* Longer overlap into the photo */
  .activity-card__veil {
    background: linear-gradient(
      180deg,
      rgb(28 34 40 / 0) 0%,
      rgb(28 34 40 / 0) 18%,
      rgb(28 34 40 / 0.22) 42%,
      rgb(28 34 40 / 0.55) 68%,
      rgb(28 34 40 / 0.88) 88%,
      rgb(28 34 40 / 1) 100%
    );
  }

  .activity-card__content {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.4rem 1.15rem 0.85rem;
    background: linear-gradient(
      180deg,
      #1c2228 0%,
      #191e24 35%,
      #151a1f 70%,
      #12171c 100%
    );
  }

  .activity-card__desc {
    -webkit-line-clamp: 5;
    min-height: 0;
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .activity-card__footer {
    margin-top: auto;
    padding-top: 0.35rem;
    gap: 0.5rem;
  }
}

/* Full-bleed photographic CTA — outside .shell, edge-to-edge */
.radio-outdoors-cta {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(22rem, 38vw, 32rem);
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  color: var(--e74-overlay-ink);
}

.radio-outdoors-cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  background-color: var(--e74-ink);
  background-image: var(--e74-cta-bg);
  background-size: cover;
  background-position: var(--e74-media-position, 50% 42%);
  background-repeat: no-repeat;
}

.radio-outdoors-cta__media picture {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
}

.radio-outdoors-cta__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--e74-media-position, 50% 42%);
}

.radio-outdoors-cta__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--e74-ink) 18%, transparent) 0%,
      color-mix(in srgb, var(--e74-ink) 32%, transparent) 45%,
      color-mix(in srgb, var(--e74-ink) 48%, transparent) 100%
    );
}

.radio-outdoors-cta__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
  width: min(100% - (var(--e74-gutter) * 2), 40rem);
  padding: clamp(2.75rem, 6vw, 4.25rem) 0;
  box-sizing: border-box;
}

.radio-outdoors-cta__eyebrow {
  margin: 0;
}

.radio-outdoors-cta__title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 3.35rem);
  font-weight: 600;
  line-height: 1.05;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 1px 18px color-mix(in srgb, var(--e74-ink) 45%, transparent);
}

.radio-outdoors-cta__body {
  margin: 0;
  max-width: 34rem;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  font-weight: 500;
  line-height: 1.55;
  color: color-mix(in srgb, #fff 88%, transparent);
  text-wrap: pretty;
}

.radio-outdoors-cta__actions {
  margin-top: 0.35rem;
}

@media (max-width: 699px) {
  .radio-outdoors-cta {
    /* Taller portrait field CTA on mobile */
    min-height: clamp(36rem, 128vw, 48rem);
  }

  .radio-outdoors-cta__media {
    background-image: var(--e74-cta-bg-mobile, var(--e74-cta-bg));
    background-position: var(--e74-media-position-mobile, center center);
  }

  .radio-outdoors-cta__img {
    object-position: var(--e74-media-position-mobile, center center);
  }
}

/* Soft entrance — restrained reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity 700ms var(--e74-ease), transform 700ms var(--e74-ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .site-header,
  .btn,
  .home-hero__media .img-cover,
  .home-hero__media img,
  [data-reveal],
  .feature-card,
  .activity-card,
  .activity-card__img,
  .freq-window__instrument,
  .amp-wave__track,
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after,
  .site-nav a.nav-link::after {
    transition: none;
  }

  .home-hero__media .img-cover,
  .home-hero__media img,
  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .freq-window__bar {
    animation: none !important;
    transform: scaleY(var(--freq-h, 0.12));
  }

  .freq-window--bars-rail .freq-window__bar {
    transform: scaleY(calc(var(--freq-h, 0.12) * 1.15));
  }

  .amp-wave__track {
    animation: none !important;
    transform: none;
  }

  .signal-pin__ring {
    animation: none !important;
  }

  .signal-pin__ring--1 {
    opacity: 0.42;
    transform: scale(0.72);
  }

  .signal-pin__ring--2,
  .signal-pin__ring--3 {
    opacity: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* Public News article                                                        */
/* -------------------------------------------------------------------------- */

.page-news-article .site-main {
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem);
}

.news-article__shell {
  max-width: none;
}

.news-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

.news-article__main {
  min-width: 0;
}

.news-article__header {
  margin-bottom: var(--e74-space-6);
}

.news-article__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin: 0 0 var(--e74-space-4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
}

.news-article__breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.news-article__breadcrumb a:hover {
  color: var(--e74-accent);
}

.news-article__breadcrumb-sep {
  opacity: 0.55;
}

.news-article__category {
  margin-bottom: var(--e74-space-3);
}

.news-article__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: var(--e74-tracking-heading);
  color: var(--e74-ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.news-article__meta {
  margin: var(--e74-space-4) 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--e74-ink-muted);
}

.news-article__featured {
  margin: 0 0 var(--e74-space-7);
  width: 100%;
  max-width: none;
}

.news-article__featured img,
.news-article__body img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.news-article__image-trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: var(--e74-radius);
  overflow: hidden;
}

.news-article__image-trigger:focus-visible {
  outline: 2px solid var(--e74-accent);
  outline-offset: 3px;
}

.news-article__body {
  font-size: clamp(1.02rem, 1.4vw, 1.125rem);
  line-height: 1.7;
  color: var(--e74-ink);
}

.news-article__body > *:first-child {
  margin-top: 0;
}

.news-article__body > *:last-child {
  margin-bottom: 0;
}

.news-article__body p {
  margin: 0 0 1.15em;
}

.news-article__body h2,
.news-article__body h3,
.news-article__body h4 {
  margin: 1.6em 0 0.55em;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--e74-tracking-heading);
  color: var(--e74-ink);
  text-transform: none;
}

.news-article__body h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
}

.news-article__body h3 {
  font-size: clamp(1.18rem, 2vw, 1.35rem);
}

.news-article__body h4 {
  font-size: 1.08rem;
}

.news-article__body a {
  color: var(--e74-signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}

.news-article__body a:hover {
  color: var(--e74-accent);
}

/* Nested related-news card (from [news-card slug="…"]) */
.news-article__body .news-embed {
  margin: 1.75em 0;
}

.news-article__body .news-embed__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 32%);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, var(--e74-ink) 3.5%, var(--e74-surface));
  border: 2px dashed color-mix(in srgb, var(--e74-accent) 26%, transparent);
  border-radius: var(--e74-radius-card);
  box-shadow: none;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.news-article__body .news-embed__card:hover,
.news-article__body .news-embed__card:focus-visible {
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, var(--e74-accent) 6%, var(--e74-surface));
  border-color: color-mix(in srgb, var(--e74-accent) 40%, transparent);
  outline: none;
}

.news-article__body .news-embed__card--text {
  grid-template-columns: 1fr;
}

.news-article__body .news-embed__copy {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem 1.1rem 1.05rem;
  min-width: 0;
}

.news-article__body .news-embed__eyebrow {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-accent);
}

.news-article__body .news-embed__title {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--e74-tracking-heading-sm);
  color: var(--e74-ink);
  text-transform: none;
}

.news-article__body .news-embed__card:hover .news-embed__title,
.news-article__body .news-embed__card:focus-visible .news-embed__title {
  color: var(--e74-accent);
}

.news-article__body .news-embed__summary {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--e74-ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-article__body .news-embed__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: auto;
  padding-top: 0.35rem;
}

.news-article__body .news-embed__date {
  font-size: 0.82rem;
  color: var(--e74-ink-muted);
}

.news-article__body .news-embed__cta {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--e74-accent);
  white-space: nowrap;
}

.news-article__body .news-embed__media {
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 7.5rem;
  background: color-mix(in srgb, var(--e74-ink) 8%, var(--e74-surface));
}

.news-article__body .news-embed__img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 640px) {
  .news-article__body .news-embed__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-article__body .news-embed__media {
    order: -1;
    grid-column: 1 / -1;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .news-article__body .news-embed__img {
    width: 100%;
    height: 100%;
    max-width: none;
  }
}

.news-article__body strong,
.news-article__body b {
  font-weight: 700;
}

.news-article__body em,
.news-article__body i {
  font-style: italic;
}

.news-article__body ul,
.news-article__body ol {
  margin: 0 0 1.15em;
  padding-left: 1.35em;
}

.news-article__body li {
  margin: 0.35em 0;
}

.news-article__body li::marker {
  color: var(--e74-accent);
}

.news-article__body blockquote {
  margin: 1.4em 0;
  padding: 0.15em 0 0.15em 1.1em;
  border-left: 3px solid var(--e74-accent);
  color: var(--e74-ink-muted);
  font-style: italic;
}

.news-article__body hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid var(--e74-line);
}

.news-article__body figure:not(.news-gallery) {
  margin: 1.6em 0;
  width: 100%;
  max-width: none;
}

/* Lone body figures: editorial thumbnail crop (avoids full-height portraits). */
.news-article__body figure:not(.news-gallery) img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}

.news-article__body figcaption {
  margin-top: 0.55rem;
  font-size: 0.9em;
  line-height: 1.45;
  color: var(--e74-ink-muted);
}

.news-article__body .news-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 1.75em 0;
  width: 100%;
}

/* Two images: always a side-by-side pair (portrait-friendly). */
.news-article__body .news-gallery:has(> img:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Four images: tidy 2×2 instead of 3+1. */
.news-article__body .news-gallery:has(> img:nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.news-article__body .news-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: var(--e74-radius);
  background: color-mix(in srgb, var(--e74-ink) 6%, var(--e74-surface));
}

@media (max-width: 899px) {
  .news-article__layout {
    grid-template-columns: 1fr;
  }

  .news-article__layout .news-sidebar {
    order: 2;
  }

  .news-article__body .news-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  /* Keep gallery thumbs in a compact 2-col grid; avoid full-bleed singles. */
  .news-article__body .news-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-article__body .news-gallery:has(> img:only-child) {
    grid-template-columns: 1fr;
  }
}

/* News lightbox */
.news-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(12, 17, 22, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.news-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.news-lightbox__dialog {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 3.5rem 1.25rem 1.25rem;
  border: 0;
  background: transparent;
}

.news-lightbox__image {
  display: block;
  box-sizing: border-box;
  max-width: min(100%, 72rem);
  max-height: calc(100dvh - 4.75rem);
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--e74-radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

.news-lightbox__close {
  position: fixed;
  top: max(0.85rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.25rem 0.35rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--e74-accent);
  font-family: var(--font-ui);
  font-size: clamp(1.85rem, 3vw, 2.35rem);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transform: none;
}

.news-lightbox__close:hover,
.news-lightbox__close:focus-visible {
  color: #fff;
  background: transparent;
  outline: none;
}

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


/* -------------------------------------------------------------------------- */
/* Club friends — sponsors & partners (homepage, above final CTA)             */
/* -------------------------------------------------------------------------- */

.club-friends {
  background: var(--e74-bg);
  border-bottom: 1px solid var(--e74-line);
  color: var(--e74-ink);
  padding: clamp(2.5rem, 5.5vw, 4.25rem) 0;
}

.club-friends__shell {
  min-width: 0;
}

.club-friends__panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  padding: clamp(2rem, 4.5vw, 3.25rem) 0 clamp(1.75rem, 3.5vw, 2.5rem);
  border: 1px solid var(--e74-line);
  border-radius: calc(var(--e74-radius-card) + 6px);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--e74-accent-soft) 55%, var(--e74-surface)) 0%,
    color-mix(in srgb, var(--e74-accent-soft) 18%, transparent) 52%,
    transparent 100%
  );
  box-shadow: 0 12px 32px rgba(14, 19, 24, 0.04);
  overflow: hidden;
}

.club-friends__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  max-width: 38rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3.5vw, 2.75rem);
}

.club-friends__eyebrow {
  margin: 0;
}

.club-friends__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: var(--e74-tracking-heading);
  text-wrap: balance;
  color: var(--e74-section-dark);
}

.club-friends__lead {
  margin: 0;
  max-width: 34rem;
  font-family: var(--font-ui);
  font-size: clamp(0.96rem, 1.1vw, 1.05rem);
  font-weight: 500;
  line-height: 1.58;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.club-friends__cta {
  margin-top: 0.35rem;
}

.club-friends__marquee {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0.85rem 0 0.15rem;
  border-top: 1px solid color-mix(in srgb, var(--e74-accent) 18%, var(--e74-line));
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 5%,
    #000 95%,
    transparent 100%
  );
}

.club-friends__marquee.is-dragging {
  cursor: grabbing;
}

.club-friends__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 0;
  animation: club-friends-marquee 42s linear infinite;
}

.club-friends__track.is-js-driven {
  animation: none;
  will-change: transform;
}

.club-friends__marquee:hover .club-friends__track:not(.is-js-driven),
.club-friends__marquee:focus-within .club-friends__track:not(.is-js-driven) {
  animation-play-state: paused;
}

.club-friends__logos {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3rem);
  margin: 0;
  padding: 0 clamp(1.75rem, 4vw, 3rem);
  list-style: none;
}

.club-friends__logo {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.club-friends__logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  text-decoration: none;
  outline-offset: 4px;
  transition: background-color var(--e74-ease);
}

.club-friends__logo-link:hover,
.club-friends__logo-link:focus-visible {
  background: color-mix(in srgb, var(--e74-surface) 72%, transparent);
}

.club-friends__logo-link:focus-visible {
  outline: 2px solid var(--e74-accent);
}

.club-friends__logo-img {
  display: block;
  width: auto;
  max-width: 9.5rem;
  max-height: 3rem;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.62);
  transition: filter var(--e74-ease), opacity var(--e74-ease), transform var(--e74-ease);
}

.club-friends__logo-link:hover .club-friends__logo-img,
.club-friends__logo-link:focus-visible .club-friends__logo-img {
  filter: none;
  opacity: 1;
  transform: translateY(-1px);
}

@keyframes club-friends-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .club-friends__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    row-gap: 0.75rem;
  }

  .club-friends__track.is-js-driven {
    transform: none !important;
    will-change: auto;
  }

  .club-friends__logos[aria-hidden="true"] {
    display: none;
  }

  .club-friends__logos {
    flex-wrap: wrap;
    justify-content: center;
    padding-inline: clamp(1.25rem, 3.5vw, 2.75rem);
  }

  .club-friends__marquee {
    mask-image: none;
    cursor: default;
    touch-action: auto;
    user-select: auto;
  }

  .club-friends__logo-link,
  .club-friends__logo-img {
    transition: none;
  }

  .club-friends__logo-link:hover .club-friends__logo-img,
  .club-friends__logo-link:focus-visible .club-friends__logo-img {
    transform: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Final CTA — calm dark invite + light contact form (pre-footer)             */
/* -------------------------------------------------------------------------- */

.final-cta {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--e74-ink);
}

.final-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
}

.final-cta__pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  min-width: 0;
  padding: clamp(2.75rem, 6vw, 4.75rem) clamp(1.35rem, 5vw, 4.5rem);
}

.final-cta__pane--invite {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--e74-accent) 12%, transparent) 0%,
      transparent 46%
    ),
    var(--e74-section-dark);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--e74-accent);
}

.final-cta__pulse {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(
    ellipse 110% 110% at 0% 0%,
    #000 0%,
    rgba(0, 0, 0, 0.72) 32%,
    rgba(0, 0, 0, 0.28) 58%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 110% 110% at 0% 0%,
    #000 0%,
    rgba(0, 0, 0, 0.72) 32%,
    rgba(0, 0, 0, 0.28) 58%,
    transparent 78%
  );
}

.final-cta__pulse-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: min(82%, 34rem);
  height: min(82%, 34rem);
  transform: translate(-42%, -42%);
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--e74-accent) 48%, transparent) 0%,
    color-mix(in srgb, var(--e74-accent) 20%, transparent) 40%,
    transparent 72%
  );
  animation: final-cta-glow 4.8s ease-in-out infinite;
}

.final-cta__pulse-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: min(185%, 68rem);
  height: min(185%, 68rem);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.12);
  border: 1.75px solid color-mix(in srgb, var(--e74-accent) 82%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--e74-accent) 18%, transparent),
    0 0 42px color-mix(in srgb, var(--e74-accent) 28%, transparent);
  opacity: 0;
  animation: final-cta-pulse 4.8s ease-out infinite;
}

.final-cta__pulse-ring--1 {
  animation-delay: 0s;
}

.final-cta__pulse-ring--2 {
  animation-delay: 1.2s;
}

.final-cta__pulse-ring--3 {
  animation-delay: 2.4s;
}

.final-cta__pulse-ring--4 {
  animation-delay: 3.6s;
}

@keyframes final-cta-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0.9;
  }
  35% {
    transform: translate(-50%, -50%) scale(0.48);
    opacity: 0.48;
  }
  70% {
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0.14;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 0;
  }
}

@keyframes final-cta-glow {
  0%,
  100% {
    opacity: 0.65;
    transform: translate(-42%, -42%) scale(0.92);
  }
  50% {
    opacity: 1;
    transform: translate(-42%, -42%) scale(1.1);
  }
}

.final-cta__pane--form {
  background: var(--e74-bg);
  color: var(--e74-ink);
  border-top: 1px solid var(--e74-line);
}

.final-cta__copy,
.final-cta__action {
  position: relative;
  z-index: 1;
}

.final-cta__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
  max-width: 34rem;
}

.final-cta__eyebrow {
  margin: 0;
  color: color-mix(in srgb, var(--e74-accent) 72%, #fff);
}

.final-cta__title {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 4.4vw, 3.35rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: var(--e74-tracking-heading);
  text-transform: none;
  text-wrap: balance;
  color: #fff;
}

.final-cta__body {
  margin: 0;
  max-width: 32rem;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  font-weight: 500;
  line-height: 1.55;
  color: color-mix(in srgb, #fff 72%, transparent);
}

.final-cta__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
  min-width: 0;
}

.final-cta__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.final-cta__fact {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: color-mix(in srgb, #fff 58%, transparent);
}

.final-cta__fact--link {
  color: color-mix(in srgb, #fff 78%, transparent);
  text-decoration: none;
  transition: color 160ms ease;
}

.final-cta__fact--link:hover,
.final-cta__fact--link:focus-visible {
  color: #fff;
  outline: none;
}

.final-cta__fact--meta {
  color: color-mix(in srgb, #fff 42%, transparent);
}

.final-cta__form-head {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: none;
}

.final-cta__form-eyebrow {
  margin: 0;
}

.final-cta__form-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--e74-tracking-heading);
  color: var(--e74-section-dark);
  text-wrap: balance;
}

.final-cta__form-success {
  margin: 0;
  max-width: none;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--e74-section-dark);
}

.final-cta__form {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  width: 100%;
  max-width: none;
}

.final-cta__fields-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.95rem;
}

.final-cta__field {
  margin: 0;
  min-width: 0;
}

.final-cta__label {
  display: block;
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
}

.final-cta__input {
  display: block;
  width: 100%;
  min-height: 2.85rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-control);
  background: var(--e74-surface);
  color: var(--e74-ink);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  transition: border-color var(--e74-ease), box-shadow var(--e74-ease);
}

.final-cta__input::placeholder {
  color: color-mix(in srgb, var(--e74-ink-muted) 72%, transparent);
}

.final-cta__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--e74-accent) 55%, var(--e74-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--e74-accent) 18%, transparent);
}

.final-cta__input--area {
  min-height: 7.5rem;
  resize: vertical;
}

.final-cta__error {
  display: block;
  margin: 0.35rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  color: #b42318;
}

.final-cta__field--honeypot,
.final-cta__honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.final-cta__form-actions {
  margin-top: 0.25rem;
}

.final-cta__submit {
  width: auto;
}

@media (min-width: 900px) {
  .final-cta__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .final-cta__pane--form {
    border-top: 0;
    border-left: 1px solid var(--e74-line);
  }

  .final-cta__fields-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .final-cta__title {
    max-width: 12ch;
  }

  .final-cta__pane--invite {
    box-shadow: inset 0 3px 0 0 var(--e74-accent);
  }

  .final-cta__btn,
  .final-cta__submit {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .final-cta__pulse-glow,
  .final-cta__pulse-ring {
    animation: none;
  }

  .final-cta__pulse-glow {
    opacity: 0.7;
    transform: translate(-42%, -42%);
  }

  .final-cta__pulse-ring {
    opacity: 0.18;
    transform: translate(-50%, -50%) scale(0.55);
  }

  .final-cta__pulse-ring--2 {
    opacity: 0.12;
    transform: translate(-50%, -50%) scale(0.78);
  }

  .final-cta__pulse-ring--3 {
    opacity: 0.08;
    transform: translate(-50%, -50%) scale(0.95);
  }

  .final-cta__pulse-ring--4 {
    display: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Become — Training CTA (final section)                                      */
/* -------------------------------------------------------------------------- */

.training-cta {
  padding-block: clamp(2.75rem, 6vw, 5rem) clamp(3.5rem, 8vw, 6.5rem);
  background: var(--e74-bg);
}

.training-cta__shell {
  width: min(100% - (var(--e74-gutter) * 2), var(--e74-max));
}

.training-cta__compose {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1rem);
  align-items: stretch;
  min-height: clamp(28rem, 42vw, 34rem);
}

.training-cta__info,
.training-cta__state {
  border-radius: var(--e74-radius-card);
  overflow: hidden;
}

.training-cta__info {
  display: flex;
  flex-direction: column;
  gap: var(--e74-space-5);
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  background: color-mix(in srgb, var(--e74-accent) 9%, var(--e74-surface));
  color: var(--e74-ink);
  border: 1px solid color-mix(in srgb, var(--e74-accent) 14%, transparent);
}

.training-cta__eyebrow {
  color: var(--e74-accent);
}

.training-cta__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.85rem);
  font-weight: 600;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.05;
  color: var(--e74-ink);
  text-transform: none;
}

.training-cta__lead {
  display: grid;
  gap: 0.85rem;
  max-width: 38rem;
}

.training-cta__lead p {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
}

.training-cta__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.training-cta__note {
  margin-top: auto;
  padding-top: var(--e74-space-4);
  border-top: 1px solid color-mix(in srgb, var(--e74-accent) 18%, transparent);
  display: grid;
  gap: 0.55rem;
  max-width: 36rem;
}

.training-cta__note-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-ink);
}

.training-cta__note-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--e74-ink-muted);
}

.training-cta__state {
  position: relative;
  display: flex;
  min-height: 100%;
  color: var(--e74-overlay-ink);
  isolation: isolate;
}

.training-cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.training-cta__media img {
  object-position: 52% 40%;
}

.training-cta__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--e74-dark) 55%, transparent) 0%,
      color-mix(in srgb, var(--e74-section-dark) 78%, transparent) 42%,
      color-mix(in srgb, var(--e74-dark) 92%, transparent) 100%
    ),
    color-mix(in srgb, var(--e74-section-dark) 42%, transparent);
}

.training-cta__state-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--e74-space-4);
  justify-content: flex-end;
  width: 100%;
  padding: clamp(1.5rem, 2.6vw, 2.15rem);
}

.training-cta__state-eyebrow {
  color: var(--e74-accent);
}

.training-cta__state-title {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.2vw, 1.95rem);
  font-weight: 600;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.1;
  color: var(--e74-overlay-ink);
  text-transform: none;
}

.training-cta__state-body {
  margin: 0;
  max-width: 28ch;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--e74-overlay-ink) 78%, transparent);
}

.training-cta__form {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.25rem;
}

.training-cta__field {
  margin: 0;
}

.training-cta__label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--e74-overlay-ink) 78%, transparent);
}

.training-cta__input {
  width: 100%;
  min-height: 2.85rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  border-radius: var(--e74-radius-control);
  background: color-mix(in srgb, var(--e74-dark) 55%, transparent);
  color: var(--e74-overlay-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.training-cta__input::placeholder {
  color: color-mix(in srgb, var(--e74-overlay-ink) 45%, transparent);
}

.training-cta__input:focus {
  border-color: var(--e74-accent);
  background: color-mix(in srgb, var(--e74-dark) 70%, transparent);
}

.training-cta__error {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: #ffb4a0;
}

.training-cta__honeypot,
.training-cta__field--honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.training-cta__form-actions,
.training-cta__state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.training-cta__cta {
  width: 100%;
  justify-content: center;
}

.training-cta__privacy {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--e74-overlay-ink) 62%, transparent);
}

.training-cta__external {
  color: color-mix(in srgb, var(--e74-overlay-ink) 88%, transparent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--e74-accent) 55%, transparent);
}

.training-cta__external:hover,
.training-cta__external:focus-visible {
  color: var(--e74-accent);
  text-decoration-color: var(--e74-accent);
}

.training-cta__success {
  margin: 0.35rem 0 0;
  padding: 0.95rem 1rem;
  border-radius: var(--e74-radius-control);
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
  background: color-mix(in srgb, var(--e74-dark) 48%, transparent);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--e74-overlay-ink);
}

@media (max-width: 1099px) {
  .training-cta__compose {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    min-height: 0;
  }
}

@media (max-width: 899px) {
  .training-cta {
    padding-block: 2.5rem 3.5rem;
  }

  .training-cta__compose {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .training-cta__info {
    gap: var(--e74-space-4);
    padding: 1.5rem 1.35rem;
  }

  .training-cta__title {
    max-width: none;
  }

  .training-cta__state {
    min-height: 22rem;
  }

  .training-cta__state-inner {
    justify-content: flex-end;
    padding: 1.4rem 1.25rem 1.5rem;
  }

  .training-cta__state-title,
  .training-cta__state-body {
    max-width: none;
  }

  .training-cta__cta {
    min-height: 2.95rem;
  }
}

@media (max-width: 559px) {
  .training-cta__state {
    min-height: 20.5rem;
  }
}

/* -------------------------------------------------------------------------- */
/* SectionFrequencyNav — long-form sticky section rail (become, cemernica, …) */
/* -------------------------------------------------------------------------- */

:root {
  --e74-section-freq-nav-h: 2.75rem;
}

.become-track,
[data-section-freq-scope] {
  position: relative;
}

.section-freq-nav {
  position: sticky;
  top: var(--e74-header-offset, var(--e74-header-inner-h));
  z-index: 45;
  background: color-mix(in srgb, var(--e74-accent) 6%, var(--e74-bg));
  border-bottom: 1px solid color-mix(in srgb, var(--e74-accent) 16%, transparent);
}

.section-freq-nav__shell {
  position: relative;
  padding-block: 0.45rem 0.55rem;
}

.section-freq-nav__nav {
  display: grid;
  gap: 0;
  min-width: 0;
}

.section-freq-nav__rail {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  /* Equal free space between intrinsic-width items (not equal columns) */
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.section-freq-nav__rail::-webkit-scrollbar {
  display: none;
}

.section-freq-nav__item {
  /* Hug label width — equal flex columns made short labels look widely spaced */
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 1.55rem;
  padding: 0.25rem 0 0.2rem;
  font-family: var(--font-mono);
  text-decoration: none;
  color: var(--e74-ink-muted);
  white-space: nowrap;
  border: 0;
  background: transparent;
  transition: color 220ms ease;
}

.section-freq-nav__item:hover {
  color: color-mix(in srgb, var(--e74-ink-muted) 55%, var(--e74-ink));
}

.section-freq-nav__item.is-active {
  color: var(--e74-accent);
}

.section-freq-nav__item:focus-visible {
  outline: 2px solid var(--e74-accent);
  outline-offset: 2px;
}

.section-freq-nav__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
}

.section-freq-nav__label--short {
  display: none;
}

/* Ticks sit on the sticky bar’s bottom border — no second baseline. */
.section-freq-nav__scale {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.55rem;
  pointer-events: none;
}

.section-freq-nav__scale-track {
  position: relative;
  height: 100%;
  width: 100%;
}

.section-freq-nav__ticks {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.section-freq-nav__tick {
  width: 1px;
  height: 0.28rem;
  background: color-mix(in srgb, var(--e74-ink) 22%, transparent);
}

.section-freq-nav__tick--major {
  height: 0.45rem;
  background: color-mix(in srgb, var(--e74-ink) 32%, transparent);
}

.section-freq-nav__lock {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2px;
  height: 0.55rem;
  margin-left: -1px;
  background: var(--e74-accent);
  transform: translateX(var(--section-freq-lock-x, 0px));
  transition: transform 220ms ease;
  will-change: transform;
}

.page-become .become-track > section[id],
.page-cemernica .become-track > section[id],
.page-meshtastic .become-track > section[id],
.page-club .become-track > section[id] {
  scroll-margin-top: calc(
    var(--e74-header-offset, 5rem)
    + var(--e74-section-freq-nav-h)
    + 0.65rem
  );
}

@media (max-width: 899px) {
  :root {
    --e74-section-freq-nav-h: 2.55rem;
  }

  .section-freq-nav__rail {
    justify-content: flex-start;
    gap: 0.15rem;
  }

  .section-freq-nav__item {
    flex: 0 0 auto;
    padding-inline: 0.15rem 0.85rem;
  }

  .section-freq-nav__label--full {
    display: none;
  }

  .section-freq-nav__label--short {
    display: inline;
  }

  .section-freq-nav__label {
    font-size: 0.64rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-freq-nav__rail {
    scroll-behavior: auto;
  }

  .section-freq-nav__item,
  .section-freq-nav__lock {
    transition: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Čemernica — immersive full-bleed hero + become editorial stack (left)      */
/* -------------------------------------------------------------------------- */

.page-cemernica {
  background: var(--e74-bg);
}

/*
 * Wide journey/people rails paint past the viewport inside clipped
 * containers; without a page-level clip some browsers still grow
 * document scrollWidth and show a horizontal scrollbar.
 */
body.page-cemernica {
  overflow-x: clip;
}

/*
 * Map-heavy pages: keep vertical scroll, but block document pinch-zoom so
 * two-finger map gestures do not scale the whole page.
 */
.page-cemernica,
.page-repeater-map {
  touch-action: pan-x pan-y;
}

.page-cemernica .maplibregl-canvas-container,
.page-cemernica .maplibregl-canvas,
.page-repeater-map .maplibregl-canvas-container,
.page-repeater-map .maplibregl-canvas {
  touch-action: none;
}

.project-hero {
  /* Prefer locked px height (JS); svh fallback before JS runs — same iOS fix as home-hero */
  --project-hero-h: var(
    --project-hero-height,
    calc(100svh - var(--e74-header-offset, var(--e74-header-inner-h)))
  );
  position: relative;
  min-height: var(--project-hero-h);
  height: var(--project-hero-h);
  max-height: var(--project-hero-h);
  display: flex;
  color: var(--e74-overlay-ink);
  overflow: hidden;
  isolation: isolate;
  background: var(--e74-section-dark, #1c2228);
}

.project-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.project-hero__media .img-cover,
.project-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--e74-project-hero-media-position, 46.5% 28%);
}

.project-hero__annotations {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

/* Left-weighted veil for editorial readability — keeps right summit / pin clear. */
.project-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      rgba(7, 12, 18, 0.88) 0%,
      rgba(7, 12, 18, 0.72) 26%,
      rgba(7, 12, 18, 0.28) 48%,
      rgba(7, 12, 18, 0.06) 68%,
      transparent 82%
    ),
    linear-gradient(
      180deg,
      rgba(7, 12, 18, 0.28) 0%,
      transparent 28%,
      transparent 70%,
      rgba(7, 12, 18, 0.45) 100%
    );
}

.project-hero__frame {
  position: relative;
  z-index: 3;
  width: min(100% - (var(--e74-gutter) * 2), var(--e74-max));
  margin-inline: auto;
  min-height: var(--project-hero-h);
  height: var(--project-hero-h);
  max-height: var(--project-hero-h);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.project-hero__stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: clamp(1.75rem, 4svh, 3.5rem) 0;
  min-height: 0;
}

.project-hero__copy {
  width: min(100%, 34rem);
  max-width: 34rem;
  padding-right: 0;
  pointer-events: auto;
  color: var(--e74-overlay-ink);
}

.project-hero__copy .become-hero__badge {
  background: color-mix(in srgb, #fff 10%, transparent);
  border-color: color-mix(in srgb, #fff 22%, transparent);
  color: color-mix(in srgb, var(--e74-overlay-ink) 82%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.project-hero__copy .become-hero__badge:hover,
.project-hero__copy .become-hero__badge:focus-visible {
  color: var(--e74-overlay-ink);
  border-color: color-mix(in srgb, var(--e74-accent) 55%, transparent);
  background: color-mix(in srgb, var(--e74-accent) 18%, transparent);
}

.project-hero__copy .hero-title,
.project-hero__copy .hero-title__line {
  color: var(--e74-overlay-ink);
}

.project-hero__copy .become-hero__lede {
  color: var(--e74-overlay-ink);
  max-width: 32rem;
}

.project-hero__copy .become-hero__support {
  color: color-mix(in srgb, var(--e74-overlay-ink) 78%, transparent);
  max-width: 32rem;
}

.project-hero__copy .become-hero__actions {
  flex-wrap: nowrap;
}

@media (max-width: 899px) {
  .project-hero__stage {
    align-items: flex-end;
    padding-top: clamp(1.35rem, 3.5svh, 2.25rem);
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  }

  .project-hero__copy {
    width: min(100%, 28rem);
  }

  .project-hero__copy .become-hero__actions {
    flex-wrap: nowrap;
  }

  .project-hero__copy .become-hero__actions .btn {
    padding-inline: 0.95rem;
    font-size: 0.72rem;
  }

  .project-hero__veil {
    background:
      linear-gradient(
        180deg,
        rgba(7, 12, 18, 0.28) 0%,
        rgba(7, 12, 18, 0.12) 28%,
        rgba(7, 12, 18, 0.45) 58%,
        rgba(7, 12, 18, 0.78) 82%,
        rgba(7, 12, 18, 0.88) 100%
      );
  }
}

/* -------------------------------------------------------------------------- */
/* Čemernica — block 3: From idea to signal (milestone rail + journey carousel) */
/* -------------------------------------------------------------------------- */

.cemernica-journey {
  --journey-shell: min(100% - (var(--e74-gutter) * 2), var(--e74-max));
  --journey-side: max(var(--e74-gutter), calc((100% - var(--journey-shell)) / 2));
  position: relative;
  background: var(--e74-bg);
  border-bottom: 1px solid var(--e74-line);
  padding: clamp(2.75rem, 6vw, 5.5rem) 0 clamp(3.25rem, 6.5vw, 5.75rem);
  color: var(--e74-ink);
  overflow-x: clip;
}

.cemernica-journey__intro {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  min-width: 0;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.cemernica-journey__header {
  display: grid;
  gap: 0.85rem;
  max-width: 40rem;
}

.cemernica-journey__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  font-weight: 600;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.02;
  text-transform: none;
  text-wrap: balance;
  color: var(--e74-ink);
}

.cemernica-journey__lead {
  margin: 0;
  max-width: 36rem;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.cemernica-journey__rail {
  position: relative;
  min-width: 0;
}

.cemernica-journey__rail-line {
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  top: 2.55rem;
  height: 1px;
  pointer-events: none;
}

.cemernica-journey__rail-base {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--e74-ink) 14%, transparent);
}

.cemernica-journey__rail-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--journey-progress, 0) * 100%);
  background: var(--e74-accent);
  transition: width 420ms ease;
}

.cemernica-journey__rail-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.35rem;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.cemernica-journey__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.cemernica-journey__step:focus-visible {
  outline: 2px solid var(--e74-accent);
  outline-offset: 4px;
}

.cemernica-journey__step-n,
.cemernica-journey__step-label,
.cemernica-journey__step-status {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.25;
}

.cemernica-journey__step-n {
  margin: 0;
  font-size: 0.58rem;
  color: var(--e74-ink-muted);
}

.cemernica-journey__step-label {
  margin: 0;
  max-width: 100%;
  font-size: 0.58rem;
  color: var(--e74-ink-muted);
  overflow-wrap: anywhere;
  hyphens: auto;
}

.cemernica-journey__step-node {
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--e74-bg);
  border: 2px solid color-mix(in srgb, var(--e74-ink) 28%, transparent);
  box-shadow: 0 0 0 3px var(--e74-bg);
  transition:
    border-color 200ms ease,
    background-color 200ms ease;
}

.cemernica-journey__step-status {
  margin: 0.15rem 0 0;
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  color: var(--e74-accent);
}

.cemernica-journey__step.is-carousel-active .cemernica-journey__step-n,
.cemernica-journey__step.is-carousel-active .cemernica-journey__step-label {
  color: var(--e74-accent);
}

.cemernica-journey__step.is-carousel-active .cemernica-journey__step-node {
  border-color: var(--e74-accent);
  background: var(--e74-accent);
}

/* Real-world status — restrained, independent of carousel view */
.cemernica-journey__step.is-project-future {
  opacity: 0.78;
}

.cemernica-journey__step.is-project-future .cemernica-journey__step-node {
  border-style: dashed;
}

.cemernica-journey__bleed {
  --journey-side: max(var(--e74-gutter), calc((100% - var(--journey-shell)) / 2));
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.cemernica-journey__track {
  padding-left: var(--journey-side);
  min-width: 0;
}

.cemernica-journey__swiper {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-right: var(--e74-gutter);
}

.cemernica-journey__slide {
  height: auto;
  box-sizing: border-box;
}

.cemernica-journey__slide.ham-steps__card {
  min-height: 0;
  height: auto;
  gap: 0;
  padding: 1.5rem 1.45rem 1rem;
  border-style: dashed;
  border-color: var(--e74-line);
}

.cemernica-journey__slide.ham-steps__card.swiper-slide-active {
  border-style: solid;
  border-color: var(--e74-line-strong);
}

.cemernica-journey__slide.ham-steps__card:hover {
  transform: none;
  box-shadow: none;
}

.cemernica-journey__slide.ham-steps__card.swiper-slide-active:hover {
  border-color: var(--e74-line-strong);
}

.cemernica-journey__slide[data-project-future] {
  opacity: 0.92;
}

.cemernica-journey__slide .ham-steps__card-head {
  margin-bottom: 1.15rem;
}

.cemernica-journey__slide .ham-steps__card-title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
}

.cemernica-journey__slide .ham-steps__card-media {
  margin: 0 0 1.25rem;
  aspect-ratio: 5 / 4;
}

.cemernica-journey__slide .ham-steps__card-body {
  margin: 0 0 1.15rem;
  max-width: none;
  line-height: 1.55;
}

.cemernica-journey__slide .ham-steps__card-foot {
  margin-top: 0;
  padding-top: 0;
}

@media (max-width: 899px) {
  .cemernica-journey__rail-line {
    left: 0.55rem;
    right: auto;
    width: calc(6 * 6.5rem + 5 * 0.85rem);
    top: 2.45rem;
  }

  .cemernica-journey__rail-steps {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.85rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .cemernica-journey__rail-steps::-webkit-scrollbar {
    display: none;
  }

  .cemernica-journey__step {
    flex: 0 0 auto;
    width: 6.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cemernica-journey__rail-progress {
    transition: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Čemernica — block 4: Sistem na vrhu (interactive cutaway + system cards)   */
/* -------------------------------------------------------------------------- */

.cemernica-system {
  --cemernica-system-ease: 220ms ease;
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  background: color-mix(in srgb, var(--e74-ink) 3%, var(--e74-bg));
  border-bottom: 1px solid var(--e74-line);
  padding: clamp(2.75rem, 6vw, 5.25rem) 0;
  color: var(--e74-ink);
}

.cemernica-system > .topo-bg {
  /* Same contour layer as Featured Project; softer on light surface */
  opacity: 0.14;
}

.cemernica-system__board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "header"
    "live"
    "map"
    "cards";
  gap: clamp(1.15rem, 2.5vw, 1.75rem);
  align-items: start;
  min-width: 0;
}

.cemernica-system__header {
  grid-area: header;
  display: grid;
  gap: 0.75rem;
  max-width: 40rem;
}

.cemernica-system__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  font-weight: 600;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.02;
  text-wrap: balance;
  color: var(--e74-ink);
}

.cemernica-system__lead {
  margin: 0;
  max-width: 38rem;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.cemernica-system__map {
  grid-area: map;
  min-width: 0;
}

.cemernica-system__cards {
  grid-area: cards;
}

.system-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--e74-surface);
  border: 1px solid var(--e74-line);
}

.system-map__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  vertical-align: top;
  border-radius: inherit;
}

/* Desktop: caption on live embed (eyebrow / mono, all caps). */
.system-map__live-caption {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 1.85rem 0.7rem 0.55rem;
  box-sizing: border-box;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(12, 17, 22, 0.82) 0%,
    rgba(12, 17, 22, 0.45) 58%,
    rgba(12, 17, 22, 0) 100%
  );
  color: #fff;
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 0.95vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  text-wrap: balance;
}

.system-map__live-target {
  position: absolute;
  left: var(--live-target-x, 81.5%);
  top: var(--live-target-y, 18.8%);
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 0;
}

/* Live camera — own row on mobile (above map); desktop: beside intro */
.system-map__live {
  grid-area: live;
  position: relative;
  z-index: 4;
  width: min(46%, 12rem);
  justify-self: center;
  align-self: start;
  margin: 0;
  transform: none;
  transition: opacity var(--cemernica-system-ease);
}

@media (min-width: 960px) {
  .cemernica-system__board {
    grid-template-columns: minmax(0, 3fr) minmax(14rem, 2fr);
    grid-template-areas:
      "header live"
      "map cards";
    column-gap: clamp(1rem, 1.8vw, 1.5rem);
    row-gap: clamp(1.25rem, 2.2vw, 1.85rem);
    align-items: end;
  }

  .cemernica-system__header {
    align-self: end;
  }

  .system-map__live {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    align-self: end;
    margin: 0;
    transform: none;
  }

  .system-map__live-caption {
    display: block;
  }

  .system-map__live-tap-hint {
    display: none !important;
  }
}

/* Mobile tap hint: LottieFiles Click/tap v2 (animated GIF — no CSS filter) */
.system-map__live-tap-hint {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.system-map__live-tap-hint-img {
  display: block;
  width: min(58%, 5rem);
  height: auto;
  /* Avoid filter/drop-shadow — freezes animated GIF/WebP in some browsers */
}

@media (max-width: 959.98px) {
  .cemernica-system__board {
    grid-template-areas:
      "header"
      "live"
      "map"
      "cards";
    row-gap: 0;
  }

  .cemernica-system__header {
    margin-bottom: clamp(0.55rem, 2vw, 0.85rem);
  }

  .system-map__live {
    width: min(46%, 12rem);
    margin: 0 auto;
    /* Overlap ~18% of embed height onto the map (raised vs prior 30%) */
    transform: translateY(18%);
    margin-bottom: calc(min(46%, 12rem) * 9 / 16 * -0.18);
  }

  .cemernica-system__map {
    margin-top: 0;
  }

  .system-map__live-caption {
    display: none !important;
  }

  .system-map__live-tap-hint {
    display: flex;
  }

  .system-map__live-frame {
    border-width: 2px;
    animation-name: system-map-live-pulse-mobile;
  }
}

@keyframes system-map-live-pulse-mobile {
  0%,
  100% {
    border-color: var(--e74-accent);
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--e74-accent) 40%, transparent),
      0 2px 8px color-mix(in srgb, var(--e74-accent) 22%, transparent);
  }
  50% {
    border-color: #ff8a3a;
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--e74-accent) 0%, transparent),
      0 4px 12px color-mix(in srgb, #ff7a28 38%, transparent);
  }
}

.system-map__live.is-dim {
  opacity: 0.55;
}

.system-map__live.is-active {
  opacity: 1;
}

.system-map__live-frame {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 3px solid var(--e74-accent);
  border-radius: 4px;
  background: var(--e74-ink);
  aspect-ratio: 16 / 9;
  cursor: zoom-in;
  animation: system-map-live-pulse 1.9s ease-in-out infinite;
}

.system-map__live-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1px;
  vertical-align: top;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.system-map__live-img.is-pending {
  opacity: 0;
}

.system-map__live-loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: color-mix(in srgb, var(--e74-ink) 72%, #000);
}

.system-map__live-frame.is-loading .system-map__live-loader {
  display: flex;
}

.system-map__live-frame.is-loading .system-map__live-tap-hint {
  opacity: 0;
}

.system-map__live-loader-spin {
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid color-mix(in srgb, var(--e74-accent) 28%, transparent);
  border-top-color: var(--e74-accent);
  border-radius: 50%;
  animation: system-map-live-spin 0.7s linear infinite;
}

@keyframes system-map-live-spin {
  to {
    transform: rotate(360deg);
  }
}

.system-map__live-frame:focus-visible {
  outline: 2px solid var(--e74-ink);
  outline-offset: 3px;
}

@keyframes system-map-live-pulse {
  0%,
  100% {
    border-color: var(--e74-accent);
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--e74-accent) 70%, transparent),
      0 0 14px 4px color-mix(in srgb, var(--e74-accent) 45%, transparent),
      0 10px 28px color-mix(in srgb, var(--e74-accent) 38%, transparent);
  }
  50% {
    border-color: #ff8a3a;
    box-shadow:
      0 0 0 12px color-mix(in srgb, var(--e74-accent) 0%, transparent),
      0 0 0 22px color-mix(in srgb, var(--e74-accent) 0%, transparent),
      0 18px 48px color-mix(in srgb, #ff7a28 78%, transparent);
  }
}

.cemernica-system__live-bridge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.cemernica-system__live-bridge-path {
  stroke: var(--e74-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.88;
  fill: none;
}

.cemernica-system__live-bridge-dot {
  fill: var(--e74-accent);
  stroke: #fff;
  stroke-width: 1.25;
}

.cemernica-system.is-live-active .cemernica-system__live-bridge-path {
  stroke-width: 2.5;
  opacity: 1;
}

/* Live snapshot lightbox */
.cemernica-live-lightbox {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(12, 17, 22, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cemernica-live-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cemernica-live-lightbox[hidden] {
  display: none;
}

.cemernica-live-lightbox.is-open[hidden] {
  display: flex;
}

.cemernica-live-lightbox__dialog {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 3.5rem 1.25rem 1.25rem;
}

.cemernica-live-lightbox__image {
  display: block;
  box-sizing: border-box;
  max-width: min(100%, 72rem);
  max-height: calc(100dvh - 4.75rem);
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--e74-radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}

.cemernica-live-lightbox__close {
  position: fixed;
  top: max(0.85rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(12, 17, 22, 0.55);
  color: #fff;
  font-family: var(--font-ui);
  font-size: clamp(1.85rem, 3vw, 2.35rem);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.cemernica-live-lightbox__close:hover,
.cemernica-live-lightbox__close:focus-visible {
  color: var(--e74-accent);
  background: rgba(12, 17, 22, 0.8);
  outline: none;
}

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

.system-map__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.system-map__callout .system-map__leader {
  stroke: color-mix(in srgb, #fff 72%, var(--e74-ink));
  stroke-width: 1.35;
  opacity: 0.72;
  transition:
    stroke var(--cemernica-system-ease),
    stroke-width var(--cemernica-system-ease),
    opacity var(--cemernica-system-ease);
}

.system-map__callout .system-map__anchor {
  fill: var(--e74-accent);
  stroke: color-mix(in srgb, #fff 55%, var(--e74-accent));
  stroke-width: 1;
  opacity: 0.9;
  transition:
    fill var(--cemernica-system-ease),
    opacity var(--cemernica-system-ease);
}

.system-map__callout .system-map__anchor-ring {
  stroke: var(--e74-accent);
  stroke-width: 1.25;
  opacity: 0;
  transition: opacity var(--cemernica-system-ease);
}

.system-map__callout.is-dim .system-map__leader {
  opacity: 0.18;
}

.system-map__callout.is-dim .system-map__anchor {
  opacity: 0.28;
}

.system-map__callout.is-active .system-map__leader {
  stroke: var(--e74-accent);
  stroke-width: 2.25;
  opacity: 0.95;
}

.system-map__callout.is-active .system-map__anchor {
  fill: var(--e74-accent);
  stroke: #fff;
  opacity: 1;
}

.system-map__callout.is-active .system-map__anchor-ring {
  opacity: 0.85;
}

.system-map__pins {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.system-map__pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.15rem;
  min-height: 1.85rem;
  padding: 0.22rem 0.42rem;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--e74-ink) 18%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--e74-ink) 88%, #000);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition:
    background var(--cemernica-system-ease),
    border-color var(--cemernica-system-ease),
    color var(--cemernica-system-ease),
    box-shadow var(--cemernica-system-ease);
}

.system-map__pin:hover,
.system-map__pin:focus-visible {
  outline: 2px solid var(--e74-accent);
  outline-offset: 2px;
}

.system-map__pin.is-active {
  background: var(--e74-accent);
  border-color: var(--e74-accent);
  color: #fff;
}

.cemernica-system__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 0.45rem;
  min-width: 0;
  min-height: 0;
}

/* Live pin sits under the embed; hide duplicate chrome */
.system-map__pin[data-system-pin="live"] {
  display: none;
}

/* Live callout: keep leader visible toward the mast tip */
.system-map__callout[data-system-callout="live"] .system-map__leader {
  stroke: var(--e74-accent);
  stroke-width: 1.85;
  opacity: 0.82;
}

.system-map__callout[data-system-callout="live"] .system-map__anchor {
  opacity: 0.95;
}

.system-map__callout[data-system-callout="live"].is-active .system-map__leader {
  stroke-width: 2.4;
  opacity: 1;
}

@media (min-width: 960px) {
  .cemernica-system__cards {
    height: 100%;
    gap: 0.6rem;
  }
}

.cemernica-system__card-item {
  min-width: 0;
  min-height: 0;
  display: flex;
}

.cemernica-system__card {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  min-height: 4.25rem;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--e74-ink) 10%, transparent);
  border-radius: var(--e74-radius-control);
  background: var(--e74-surface);
  color: var(--e74-ink);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    background var(--cemernica-system-ease),
    border-color var(--cemernica-system-ease),
    color var(--cemernica-system-ease),
    box-shadow var(--cemernica-system-ease);
}

.cemernica-system__card:hover {
  border-color: color-mix(in srgb, var(--e74-accent) 45%, var(--e74-line));
}

.cemernica-system__card:focus-visible {
  outline: 2px solid var(--e74-accent);
  outline-offset: 2px;
}

.cemernica-system__card-n {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--e74-accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  transition:
    background var(--cemernica-system-ease),
    color var(--cemernica-system-ease);
}

.cemernica-system__card-body {
  display: grid;
  align-content: center;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.65rem 0.9rem 0.7rem;
}

.cemernica-system__card-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.cemernica-system__card-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
  line-height: 1.3;
}

.cemernica-system__card-desc {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.cemernica-system__card.is-active {
  background: var(--e74-accent);
  border-color: var(--e74-accent);
  color: #fff;
}

.cemernica-system__card.is-active .cemernica-system__card-n {
  background: var(--e74-ink);
  color: #fff;
}

.cemernica-system__card.is-active .cemernica-system__card-meta,
.cemernica-system__card.is-active .cemernica-system__card-desc {
  color: color-mix(in srgb, #fff 86%, transparent);
}

@media (max-width: 959.98px) {
  .cemernica-system__cards {
    grid-template-rows: none;
    gap: 0.55rem;
  }

  .cemernica-system__card {
    grid-template-columns: 4.35rem minmax(0, 1fr);
    min-height: 4.5rem;
  }

  .cemernica-system__card-n {
    font-size: 1.3rem;
  }

  .cemernica-system__card-body {
    padding: 0.7rem 0.8rem;
  }
}


@media (prefers-reduced-motion: reduce) {
  .system-map__callout .system-map__leader,
  .system-map__callout .system-map__anchor,
  .system-map__callout .system-map__anchor-ring,
  .system-map__pin,
  .cemernica-system__card,
  .cemernica-system__card-n {
    transition: none;
  }

  .system-map__live-frame {
    animation: none;
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--e74-accent) 55%, transparent),
      0 12px 32px color-mix(in srgb, var(--e74-accent) 50%, transparent);
  }

  .system-map__live-loader-spin {
    animation: none;
    border-top-color: var(--e74-accent);
    opacity: 0.85;
  }

  .system-map__live-img {
    transition: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Čemernica — Signal sa Čemernice (static RF coverage / MapLibre)            */
/* -------------------------------------------------------------------------- */

.cemernica-coverage {
  --cemernica-coverage-ease: 200ms ease;
  background: var(--e74-bg);
  border-bottom: 1px solid var(--e74-line);
  padding: clamp(2.75rem, 6vw, 5.25rem) 0;
  color: var(--e74-ink);
  overflow-x: clip;
}

.cemernica-coverage__intro {
  margin-bottom: clamp(1.35rem, 2.8vw, 2rem);
}

.cemernica-coverage__header {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.cemernica-coverage__title-row {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  width: 100%;
  min-width: 0;
}

.cemernica-coverage__title {
  flex: 0 1 auto;
  margin: 0;
  max-width: min(22ch, 58%);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  font-weight: 600;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.02;
  text-wrap: balance;
  color: var(--e74-ink);
}

/* Amplitude toward shell/viewport edge — gutter pull, not 50vw (avoids scrollbar overflow) */
.cemernica-coverage__wave {
  flex: 1 1 auto;
  align-self: center;
  height: clamp(2.6rem, 3.6vw, 3.35rem);
  min-width: 3.5rem;
  margin-right: calc(-1 * var(--e74-gutter));
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 6%,
    rgba(0, 0, 0, 0.45) 18%,
    rgba(0, 0, 0, 0.85) 38%,
    #000 58%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 6%,
    rgba(0, 0, 0, 0.45) 18%,
    rgba(0, 0, 0, 0.85) 38%,
    #000 58%
  );
}

.cemernica-coverage__wave .amp-wave,
.cemernica-coverage__amp {
  display: block;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100%;
  margin: 0;
}

.cemernica-coverage__wave .amp-wave__viewport,
.cemernica-coverage__wave .amp-wave__track,
.cemernica-coverage__wave .amp-wave__svg {
  height: 100%;
  min-height: 0;
}

.cemernica-coverage__wave .amp-wave__path {
  opacity: 0.78;
  stroke-width: 2;
}

.cemernica-coverage__lead {
  margin: 0;
  max-width: 38rem;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.cemernica-coverage__body {
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.5rem);
  min-width: 0;
}

.cemernica-coverage__systems {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  min-width: 0;
}

.cemernica-coverage__system {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: 0.85rem 0.95rem;
  text-align: left;
  color: var(--e74-ink);
  background: #fff;
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-control);
  cursor: pointer;
  transition:
    border-color var(--cemernica-coverage-ease),
    background var(--cemernica-coverage-ease),
    color var(--cemernica-coverage-ease);
}

.cemernica-coverage__system:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--e74-accent) 45%, var(--e74-line));
}

.cemernica-coverage__system:focus-visible {
  outline: 2px solid var(--e74-accent);
  outline-offset: 2px;
}

.cemernica-coverage__system.is-active {
  border-color: var(--e74-accent);
  background: color-mix(in srgb, var(--e74-accent) 7%, #fff);
  box-shadow: inset 3px 0 0 var(--e74-accent);
}

.cemernica-coverage__system.is-disabled,
.cemernica-coverage__system:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  background: color-mix(in srgb, var(--e74-ink) 2.5%, #fff);
}

.cemernica-coverage__system-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  min-width: 0;
}

.cemernica-coverage__system-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading-sm);
  line-height: 1.2;
}

.cemernica-coverage__system-freq {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--e74-ink-muted);
  white-space: nowrap;
}

.cemernica-coverage__system-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--e74-ink-muted);
  line-height: 1.35;
}

.cemernica-coverage__system-status {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
  line-height: 1.3;
}

.cemernica-coverage__system.is-active .cemernica-coverage__system-status {
  color: var(--e74-accent);
}

.cemernica-coverage__map-block {
  position: relative;
  min-width: 0;
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-control);
  background: color-mix(in srgb, var(--e74-ink) 2%, #fff);
  overflow: hidden;
}

.cemernica-coverage__map-chrome {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  left: 0.75rem;
  pointer-events: none;
}

.cemernica-coverage__map-badge {
  margin: 0;
  padding: 0.28rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--e74-ink);
  background: color-mix(in srgb, #fff 88%, transparent);
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius);
}

.cemernica-coverage__map-stage {
  position: relative;
  width: 100%;
  min-height: 440px;
  height: min(62vh, 480px);
}

@media (min-width: 700px) {
  .cemernica-coverage__map-stage {
    min-height: 540px;
    height: min(64vh, 600px);
  }
}

@media (min-width: 1100px) {
  .cemernica-coverage__map-stage {
    min-height: 640px;
    height: min(68vh, 720px);
  }
}

.cemernica-coverage__map {
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.cemernica-coverage__loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  background: color-mix(in srgb, #fff 72%, transparent);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.cemernica-coverage__loader[hidden] {
  display: none;
}

.cemernica-coverage__loader-spin {
  width: 1.65rem;
  height: 1.65rem;
  border: 2px solid color-mix(in srgb, var(--e74-accent) 25%, transparent);
  border-top-color: var(--e74-accent);
  border-radius: 50%;
  animation: cemernica-coverage-spin 0.7s linear infinite;
}

.cemernica-coverage__loader-text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-ink);
  text-align: center;
}

.cemernica-coverage__loader-progress {
  display: grid;
  gap: 0.4rem;
  width: min(16rem, calc(100% - 2rem));
  margin-top: 0.15rem;
}

.cemernica-coverage__loader-progress[hidden] {
  display: none;
}

.cemernica-coverage__loader-bar {
  position: relative;
  height: 0.28rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--e74-ink) 12%, #fff);
  border: 1px solid var(--e74-line);
  border-radius: 1px;
}

.cemernica-coverage__loader-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--e74-accent);
  transform-origin: left center;
  transition: width 0.12s linear;
}

.cemernica-coverage__loader-bar.is-indeterminate .cemernica-coverage__loader-bar-fill {
  width: 36% !important;
  animation: cemernica-coverage-bar-slide 1.1s ease-in-out infinite;
}

.cemernica-coverage__loader-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--e74-ink-muted);
  font-variant-numeric: tabular-nums;
}

.cemernica-coverage__loader-meta [data-coverage-progress-pct] {
  color: var(--e74-ink);
  font-weight: 650;
}

.cemernica-coverage.is-loading .cemernica-coverage__system:not(.is-disabled) {
  pointer-events: none;
}

.cemernica-coverage.is-loading .cemernica-coverage__system:not(.is-disabled):not(.is-active) {
  opacity: 0.55;
}

@keyframes cemernica-coverage-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cemernica-coverage-bar-slide {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(320%);
  }
}

.cemernica-coverage__map .maplibregl-canvas {
  outline: none;
}

.cemernica-coverage__map .maplibregl-ctrl-group {
  border-radius: 0 !important;
  overflow: hidden;
}

.cemernica-coverage__map .maplibregl-ctrl-attrib {
  font-size: 0.68rem;
}

.cemernica-coverage__map .maplibregl-cooperative-gesture-screen {
  font-family: inherit !important;
}

.cemernica-coverage__map .maplibregl-cooperative-gesture-screen .maplibregl-cooperative-gesture-screen-message {
  font-size: 0.9rem !important;
  font-weight: 650 !important;
  border-radius: 0 !important;
}

.cemernica-coverage__marker {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  pointer-events: none;
}

.cemernica-coverage__marker-dot {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-bottom: 0.15rem;
  border-radius: 50%;
  background: var(--e74-accent);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--e74-ink) 35%, transparent);
}

.cemernica-coverage__marker-label {
  display: grid;
  gap: 0.05rem;
  padding: 0.28rem 0.45rem;
  background: color-mix(in srgb, #fff 92%, transparent);
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius);
  line-height: 1.2;
}

.cemernica-coverage__marker-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading-sm);
  color: var(--e74-ink);
}

.cemernica-coverage__marker-sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--e74-ink-muted);
}

.cemernica-coverage__map-legend {
  position: absolute;
  z-index: 2;
  right: 0.75rem;
  bottom: 2.4rem;
  width: min(11.5rem, calc(100% - 1.5rem));
  padding: 0.65rem 0.75rem;
  background: color-mix(in srgb, #fff 94%, transparent);
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-control);
  pointer-events: none;
}

.cemernica-coverage__legend-title {
  margin: 0 0 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
}

.cemernica-coverage__legend-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.cemernica-coverage__legend-list li {
  display: grid;
  grid-template-columns: 0.7rem minmax(0, 1fr);
  column-gap: 0.45rem;
  row-gap: 0.05rem;
  align-items: center;
}

.cemernica-coverage__swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 1px;
  border: 1px solid color-mix(in srgb, var(--e74-accent) 35%, transparent);
}

.cemernica-coverage__swatch--excellent {
  background: rgba(220, 70, 0, 0.58);
}

.cemernica-coverage__swatch--good {
  background: rgba(251, 86, 7, 0.4);
}

.cemernica-coverage__swatch--usable {
  background: rgba(251, 86, 7, 0.22);
}

.cemernica-coverage__swatch--marginal {
  background: rgba(251, 86, 7, 0.1);
}

.cemernica-coverage__legend-label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--e74-ink);
  line-height: 1.2;
}

.cemernica-coverage__legend-range {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--e74-ink-muted);
  line-height: 1.2;
}

.cemernica-coverage__legend-note {
  margin: 0.55rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.cemernica-coverage__status {
  margin: 0;
  padding: 0.45rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--e74-ink-muted);
  border-top: 1px solid var(--e74-line);
  background: color-mix(in srgb, var(--e74-ink) 2%, #fff);
  min-height: 1.6rem;
}

.cemernica-coverage__status:empty {
  display: none;
}

.cemernica-coverage__meta {
  display: grid;
  gap: 0.55rem;
  max-width: 46rem;
  padding: 0.7rem 0.85rem;
  background: #fff;
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-control);
}

.cemernica-coverage__meta-tech {
  display: grid;
  gap: 0.15rem;
}

.cemernica-coverage__meta-primary {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--e74-ink);
}

.cemernica-coverage__meta-secondary {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--e74-ink-muted);
  line-height: 1.4;
}

.cemernica-coverage__meta-note {
  margin: 0.1rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--e74-ink-muted);
  line-height: 1.4;
  text-wrap: pretty;
}

.cemernica-coverage__disclaimer {
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--e74-line);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.maplibregl-popup.cemernica-coverage__popup .maplibregl-popup-content {
  padding: 0.55rem 0.7rem;
  border-radius: var(--e74-radius-control);
  box-shadow: none;
  border: 1px solid var(--e74-line);
  font-family: var(--font-ui);
}

.maplibregl-popup.cemernica-coverage__popup .maplibregl-popup-close-button {
  font-size: 1rem;
  padding: 0 0.35rem;
  color: var(--e74-ink-muted);
}

.cemernica-coverage__popup-body {
  display: grid;
  gap: 0.2rem;
}

.cemernica-coverage__popup-kicker {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
}

.cemernica-coverage__popup-body strong {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--e74-ink);
}

@media (max-width: 899.98px) {
  .cemernica-coverage__systems {
    grid-template-columns: 1fr;
  }

  .cemernica-coverage__map-legend {
    position: static;
    width: auto;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    pointer-events: auto;
  }
}

@media (min-width: 700px) and (max-width: 959.98px) {
  .cemernica-coverage__systems {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cemernica-coverage__system {
    transition: none;
  }

  .cemernica-coverage__loader-spin {
    animation: none;
    border-top-color: var(--e74-accent);
    opacity: 0.85;
  }

  .cemernica-coverage__loader-bar-fill {
    transition: none;
  }

  .cemernica-coverage__loader-bar.is-indeterminate .cemernica-coverage__loader-bar-fill {
    animation: none;
    width: 100% !important;
    opacity: 0.55;
  }
}

/* -------------------------------------------------------------------------- */
/* Čemernica — Ljudi iza sistema (editorial + documentary rail)               */
/* -------------------------------------------------------------------------- */

.cemernica-people {
  background: color-mix(in srgb, var(--e74-ink) 2.5%, var(--e74-bg));
  border-bottom: 1px solid var(--e74-line);
  padding: clamp(2.75rem, 6vw, 5.25rem) 0;
  color: var(--e74-ink);
  overflow-x: clip;
}

.cemernica-people__intro {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  align-items: start;
}

@media (min-width: 900px) {
  .cemernica-people__intro {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.cemernica-people__copy {
  display: grid;
  gap: 0.85rem;
  max-width: 36rem;
}

.cemernica-people__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  font-weight: 600;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.02;
  color: var(--e74-ink);
  text-wrap: balance;
}

.cemernica-people__lead {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.cemernica-people__index {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.cemernica-people__index-item {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: 0.85rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--e74-line);
}

.cemernica-people__index-item:last-child {
  border-bottom: 1px solid var(--e74-line);
}

.cemernica-people__index-n {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  color: var(--e74-accent);
  line-height: 1.4;
  padding-top: 0.1rem;
}

.cemernica-people__index-body {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.cemernica-people__index-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--e74-ink);
}

.cemernica-people__index-text {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

/* Full-bleed documentary film strip */
.cemernica-people__rails {
  display: grid;
  gap: 0.55rem;
  width: 100%;
  max-width: 100%;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
  min-width: 0;
}

.cemernica-people__rail {
  width: 100%;
  max-width: 100%;
  margin: 0;
  min-width: 0;
  overflow-x: clip;
}

.cemernica-people__rail-viewport {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  outline: none;
  /* Allow vertical page scroll until JS locks a horizontal swipe. */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.cemernica-people__rail-viewport.is-dragging {
  cursor: grabbing;
  /* Once horizontal intent is clear, kill vertical page pan for this gesture. */
  touch-action: none;
}

.cemernica-people__rail-viewport:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--e74-accent) 55%, transparent);
}

.cemernica-people__rail-track {
  display: flex;
  width: max-content;
  gap: 0;
  will-change: transform;
  backface-visibility: hidden;
}

.cemernica-people__rail-set {
  display: flex;
  gap: 0.55rem;
  padding-inline: 0.55rem;
}

.cemernica-people__shot {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  height: clamp(190px, 28vw, 300px);
  overflow: hidden;
  border: 0;
  background: color-mix(in srgb, var(--e74-ink) 6%, #fff);
  cursor: grab;
  appearance: none;
  -webkit-appearance: none;
  touch-action: pan-y;
}

.cemernica-people__rail-viewport.is-dragging .cemernica-people__shot {
  cursor: grabbing;
  touch-action: none;
}

.cemernica-people__shot--narrow {
  width: clamp(160px, 22vw, 250px);
}

.cemernica-people__shot--standard {
  width: clamp(240px, 34vw, 400px);
}

.cemernica-people__shot--wide {
  width: clamp(300px, 48vw, 580px);
}

.cemernica-people__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 180ms ease;
}

.cemernica-people__shot:hover img,
.cemernica-people__shot:focus-visible img {
  opacity: 0.92;
}

.cemernica-people__shot:focus-visible {
  outline: 2px solid var(--e74-accent);
  outline-offset: 2px;
}

/* People rail lightbox gallery */
.people-lightbox {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 17, 22, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.people-lightbox.is-dragging {
  cursor: grabbing;
}

.people-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.people-lightbox__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 3.5rem 3.5rem 1.5rem;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.people-lightbox__stage {
  position: relative;
  width: 100%;
  height: calc(100dvh - 5.5rem);
  overflow: hidden;
}

.people-lightbox__image {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  box-sizing: border-box;
  max-width: min(100%, 72rem);
  max-height: calc(100dvh - 5.5rem);
  width: auto;
  height: auto;
  margin: 0;
  object-fit: contain;
  border-radius: var(--e74-radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms ease;
  will-change: transform, opacity;
}

.people-lightbox__image.is-current {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, -50%, 0);
}

.people-lightbox__image.is-outgoing {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0);
}

.people-lightbox__image.is-outgoing.is-slide-exit-next {
  transform: translate3d(calc(-50% - 18vw), -50%, 0);
  opacity: 0;
}

.people-lightbox__image.is-outgoing.is-slide-exit-prev {
  transform: translate3d(calc(-50% + 18vw), -50%, 0);
  opacity: 0;
}

.people-lightbox__image.is-incoming {
  z-index: 2;
  visibility: visible;
  opacity: 0;
}

.people-lightbox__image.is-incoming.is-slide-enter-next {
  transform: translate3d(calc(-50% + 18vw), -50%, 0);
}

.people-lightbox__image.is-incoming.is-slide-enter-prev {
  transform: translate3d(calc(-50% - 18vw), -50%, 0);
}

.people-lightbox__image.is-incoming.is-slide-in {
  transform: translate3d(-50%, -50%, 0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .people-lightbox__image {
    transition: none;
  }
}

.people-lightbox__counter {
  margin: 0.75rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 72%, transparent);
}

.people-lightbox__close {
  position: fixed;
  top: max(0.85rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 2;
  margin: 0;
  padding: 0.25rem 0.35rem;
  border: 0;
  background: transparent;
  color: var(--e74-accent);
  font-family: var(--font-ui);
  font-size: clamp(1.85rem, 3vw, 2.35rem);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.people-lightbox__close:hover,
.people-lightbox__close:focus-visible {
  color: #fff;
  outline: none;
}

.people-lightbox__nav {
  position: fixed;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--e74-ink) 55%, transparent);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.people-lightbox__nav--prev {
  left: max(0.75rem, env(safe-area-inset-left));
}

.people-lightbox__nav--next {
  right: max(0.75rem, env(safe-area-inset-right));
}

.people-lightbox__nav:hover,
.people-lightbox__nav:focus-visible {
  border-color: var(--e74-accent);
  color: var(--e74-accent);
  outline: none;
}

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

@media (max-width: 699.98px) {
  .people-lightbox__dialog {
    padding: 3.25rem 0.75rem 1.25rem;
  }

  .people-lightbox__nav {
    width: 2.35rem;
    height: 2.35rem;
  }
}

/* Support / donors — highlighted community band */
.cemernica-people__support {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.cemernica-people__support-panel {
  position: relative;
  padding: clamp(1.5rem, 3.2vw, 2.35rem) clamp(1.25rem, 2.8vw, 2.15rem);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--e74-accent) 9%, #fff) 0%,
      color-mix(in srgb, var(--e74-accent) 3.5%, #fff) 55%,
      #fff 100%
    );
  border: 1px solid color-mix(in srgb, var(--e74-accent) 28%, var(--e74-line));
  border-radius: var(--e74-radius-control);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--e74-accent) 18%, transparent),
    0 14px 36px color-mix(in srgb, var(--e74-ink) 5%, transparent);
  overflow: hidden;
}

.cemernica-people__support-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--e74-accent);
  pointer-events: none;
}

.cemernica-people__support-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.35rem;
}

@media (min-width: 900px) {
  .cemernica-people__support-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: clamp(1.75rem, 3vw, 2.75rem);
  }
}

.cemernica-people__support-copy {
  display: grid;
  gap: 0.7rem;
  max-width: 42rem;
}

.cemernica-people__support-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.8vw, 2.15rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.12;
  color: var(--e74-ink);
  text-wrap: balance;
}

.cemernica-people__support-text {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--e74-ink) 78%, transparent);
  text-wrap: pretty;
}

.cemernica-people__support-action {
  margin: 0;
}

.cemernica-people__support-btn {
  white-space: normal;
  text-align: center;
  max-width: 22rem;
}

@media (prefers-reduced-motion: reduce) {
  .cemernica-people__shot img {
    transition: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Čemernica donors — transparent campaign acknowledgement                    */
/* -------------------------------------------------------------------------- */

.cemernica-donors {
  background: var(--e74-bg);
  color: var(--e74-ink);
  padding: clamp(2.5rem, 5.5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--e74-line);
}

.cemernica-donors__shell {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  min-width: 0;
}

.cemernica-donors__intro {
  display: grid;
  gap: 0.85rem;
  max-width: 42rem;
}

.cemernica-donors__intro-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: var(--e74-tracking-heading);
  color: var(--e74-ink);
  text-wrap: balance;
}

.cemernica-donors__intro-body {
  display: grid;
  gap: 0.75rem;
}

.cemernica-donors__intro-body p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.cemernica-donors__back {
  margin: 0.35rem 0 0;
}

.cemernica-donors__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--e74-ink-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.1rem;
  transition: color 160ms ease, border-color 160ms ease;
}

.cemernica-donors__back-link:hover,
.cemernica-donors__back-link:focus-visible {
  color: var(--e74-accent);
  border-bottom-color: var(--e74-accent);
  outline: none;
}

.cemernica-donors__group {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.cemernica-donors__group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45rem 1.25rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--e74-line);
}

.cemernica-donors__group-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading);
  color: var(--e74-ink);
}

.cemernica-donors__group-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--e74-ink-muted);
}

.cemernica-donors__table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-control);
  background: #fff;
}

.cemernica-donors__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 0.92rem;
}

.cemernica-donors__table th,
.cemernica-donors__table td {
  padding: 0.7rem 0.95rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--e74-line);
}

.cemernica-donors__table thead th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
  background: color-mix(in srgb, var(--e74-ink) 2.5%, #fff);
}

.cemernica-donors__table tbody tr:last-child td {
  border-bottom: 0;
}

.cemernica-donors__table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--e74-ink) 1.5%, #fff);
}

.cemernica-donors__col-amount {
  width: 7.5rem;
  text-align: right !important;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--e74-ink);
}

.cemernica-donors__table tbody .cemernica-donors__col-amount {
  font-weight: 550;
}

@media (max-width: 599.98px) {
  .cemernica-donors__table th,
  .cemernica-donors__table td {
    padding: 0.65rem 0.75rem;
  }

  .cemernica-donors__col-amount {
    width: 5.75rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Čemernica status — today / roadmap / project diary                         */
/* -------------------------------------------------------------------------- */

.cemernica-status {
  background: var(--e74-bg);
  color: var(--e74-ink);
  padding: clamp(2.75rem, 6vw, 5.25rem) 0 0;
  border-bottom: 1px solid var(--e74-line);
  overflow-x: clip;
}

.cemernica-status__shell {
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 3.5rem);
  min-width: 0;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.cemernica-status__intro {
  display: grid;
  gap: 0.85rem;
  max-width: 42rem;
}

.cemernica-status__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  font-weight: 600;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.02;
  color: var(--e74-ink);
  text-wrap: balance;
}

.cemernica-status__lead {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.cemernica-status__split {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  min-width: 0;
}

.cemernica-status__col {
  --cem-sys-line: color-mix(in srgb, var(--e74-section-dark) 16%, transparent);
  --cem-sys-dash: color-mix(in srgb, var(--e74-accent) 48%, transparent);
  --cem-sys-index: var(--e74-accent);
  --cem-sys-label: var(--e74-accent);
  --cem-sys-title: var(--e74-section-dark);
  --cem-sys-body: var(--e74-ink-muted);
  --cem-sys-board-bg: color-mix(in srgb, var(--e74-surface) 48%, var(--e74-bg));
  --cem-sys-hover-bg: color-mix(in srgb, var(--e74-accent) 10%, var(--e74-surface));
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 0.85rem;
  min-width: 0;
  align-content: start;
}

.cemernica-status__col--active {
  --cem-sys-line: color-mix(in srgb, var(--e74-section-dark) 18%, transparent);
  --cem-sys-dash: color-mix(in srgb, var(--e74-accent) 58%, transparent);
  --cem-sys-index: var(--e74-accent);
  --cem-sys-label: var(--e74-accent);
  --cem-sys-title: var(--e74-ink);
  --cem-sys-body: color-mix(in srgb, var(--e74-ink-muted) 88%, var(--e74-ink));
  --cem-sys-board-bg: color-mix(in srgb, var(--e74-accent) 6%, var(--e74-surface));
  --cem-sys-hover-bg: color-mix(in srgb, var(--e74-accent) 16%, var(--e74-surface));
}

.cemernica-status__col--planned {
  --cem-sys-line: color-mix(in srgb, var(--e74-section-dark) 9%, transparent);
  --cem-sys-dash: color-mix(in srgb, var(--e74-accent) 22%, transparent);
  --cem-sys-index: color-mix(in srgb, var(--e74-accent) 42%, var(--e74-ink-muted));
  --cem-sys-label: color-mix(in srgb, var(--e74-accent) 40%, var(--e74-ink-muted));
  --cem-sys-title: color-mix(in srgb, var(--e74-section-dark) 62%, var(--e74-ink-muted));
  --cem-sys-body: color-mix(in srgb, var(--e74-ink-muted) 72%, var(--e74-surface));
  --cem-sys-board-bg: color-mix(in srgb, var(--e74-surface) 72%, var(--e74-bg));
  --cem-sys-hover-bg: color-mix(in srgb, var(--e74-section-dark) 6%, var(--e74-surface));
}

@media (min-width: 900px) {
  .cemernica-status__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    column-gap: clamp(2.25rem, 4.5vw, 3.75rem);
    row-gap: 0.85rem;
    align-items: stretch;
  }

  .cemernica-status__col {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    gap: 0;
    min-height: 0;
  }
}

.cemernica-status__col-eyebrow {
  margin: 0;
}

.cemernica-status__col-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  font-weight: 650;
  line-height: 1.2;
  color: var(--e74-ink);
  text-wrap: balance;
}

.cemernica-status__col-body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.cemernica-status__systems-label {
  margin: 1.35rem 0 0;
  align-self: end;
  padding-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cem-sys-label);
}

.cemernica-status__board {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin-top: 0.35rem;
  border-radius: var(--e74-radius-card);
  background: var(--cem-sys-board-bg);
}

.cemernica-status__dash-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.cemernica-status__dash-path {
  fill: none;
  stroke: var(--cem-sys-dash);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 0.18 0.09;
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: calc(var(--e74-radius-card) - 1px);
  ry: calc(var(--e74-radius-card) - 1px);
}

.cemernica-status__matrix {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  min-height: 100%;
  border: none;
  border-radius: inherit;
  overflow: hidden;
}

.cemernica-status__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
  padding: 1rem 0.95rem 1.1rem;
  border-right: 1px dashed var(--cem-sys-line);
  border-bottom: 1px dashed var(--cem-sys-line);
  background: transparent;
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.cemernica-status__cell:nth-child(2n) {
  border-right: 0;
}

.cemernica-status__cell:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.cemernica-status__cell-index {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  color: var(--cem-sys-index);
  transition: color 180ms ease;
}

.cemernica-status__cell-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--cem-sys-title);
  transition: color 180ms ease;
}

.cemernica-status__cell-tag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 550;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cem-sys-index);
  transition: color 180ms ease;
}

.cemernica-status__cell-body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--cem-sys-body);
  text-wrap: pretty;
}

@media (hover: hover) and (pointer: fine) {
  .cemernica-status__col--active .cemernica-status__cell:hover {
    background: var(--cem-sys-hover-bg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--e74-accent) 35%, transparent);
  }

  .cemernica-status__col--active .cemernica-status__cell:hover .cemernica-status__cell-index,
  .cemernica-status__col--active .cemernica-status__cell:hover .cemernica-status__cell-tag {
    color: var(--e74-accent);
  }

  .cemernica-status__col--active .cemernica-status__cell:hover .cemernica-status__cell-title {
    color: var(--e74-ink);
  }

  .cemernica-status__col--planned .cemernica-status__cell:hover {
    background: var(--cem-sys-hover-bg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--e74-section-dark) 14%, transparent);
  }

  .cemernica-status__col--planned .cemernica-status__cell:hover .cemernica-status__cell-index,
  .cemernica-status__col--planned .cemernica-status__cell:hover .cemernica-status__cell-tag {
    color: color-mix(in srgb, var(--e74-accent) 55%, var(--e74-ink-muted));
  }

  .cemernica-status__col--planned .cemernica-status__cell:hover .cemernica-status__cell-title {
    color: color-mix(in srgb, var(--e74-section-dark) 78%, var(--e74-ink-muted));
  }
}

@media (max-width: 699px) {
  .cemernica-status__matrix {
    grid-template-columns: minmax(0, 1fr);
  }

  .cemernica-status__cell {
    border-right: 0;
    border-bottom: 1px dashed var(--cem-sys-line);
    padding: 0.95rem 1rem;
  }

  .cemernica-status__cell:nth-child(2n),
  .cemernica-status__cell:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px dashed var(--cem-sys-line);
  }

  .cemernica-status__cell:last-child {
    border-bottom: 0;
  }
}

.cemernica-status__diary {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.75rem, 5.5vw, 4.5rem);
  background: color-mix(in srgb, var(--e74-ink) 2.5%, var(--e74-bg));
  border-top: 1px solid var(--e74-line);
}

.cemernica-status__diary-intro {
  display: grid;
  gap: 0.75rem;
  max-width: 36rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.cemernica-status__diary-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  font-weight: 600;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.02;
  color: var(--e74-ink);
  text-wrap: balance;
}

.cemernica-status__diary-lead {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.cemernica-status__empty {
  margin: 0;
  padding: 1.25rem 0;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--e74-ink-muted);
}

.cemernica-status__diary-actions {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.cemernica-status__view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--e74-ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.1rem;
  transition: color 160ms ease, border-color 160ms ease;
}

.cemernica-status__view-all:hover,
.cemernica-status__view-all:focus-visible {
  color: var(--e74-accent);
  border-bottom-color: var(--e74-accent);
  outline: none;
}

/* -------------------------------------------------------------------------- */
/* Activities — stacked feature cards (50/50, flush split)                    */
/* -------------------------------------------------------------------------- */

.activities-page {
  background: var(--e74-bg);
  color: var(--e74-ink);
  padding: clamp(2.75rem, 6vw, 5.25rem) 0 clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid var(--e74-line);
}

.activities-page__shell {
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 3.5rem);
  min-width: 0;
}

.activities-page__intro {
  display: grid;
  gap: 0.85rem;
  max-width: 40rem;
}

.activities-page__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.8vw, 2.35rem);
  font-weight: 650;
  line-height: 1.12;
  color: var(--e74-ink);
  text-wrap: balance;
}

.activities-page__lead {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.activities-page__stack {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  min-width: 0;
}

.activity-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  height: auto;
  min-height: 30rem;
  background: var(--e74-surface);
  border: 1px solid color-mix(in srgb, var(--e74-accent) 55%, var(--e74-line));
  border-radius: calc(var(--e74-radius-card) + 8px);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(14, 19, 24, 0.04);
}

.activity-feature__copy {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding: clamp(1.5rem, 3vw, 2.35rem) clamp(1.25rem, 2.5vw, 2rem);
  min-width: 0;
  min-height: 18rem;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--e74-accent-soft) 55%, var(--e74-surface)) 0%,
    color-mix(in srgb, var(--e74-accent-soft) 18%, transparent) 52%,
    transparent 100%
  );
}

.activity-feature__logo {
  position: absolute;
  top: clamp(1rem, 2vw, 1.35rem);
  right: clamp(1rem, 2vw, 1.35rem);
  z-index: 2;
  width: clamp(2.75rem, 4.5vw, 3.5rem);
  height: clamp(2.75rem, 4.5vw, 3.5rem);
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgb(14 19 24 / 0.18));
}

.activity-feature__copy:has(.activity-feature__logo) {
  padding-right: clamp(4.25rem, 7vw, 5.5rem);
}

.activity-feature__silhouette {
  position: absolute;
  right: -4%;
  bottom: -2%;
  z-index: 0;
  width: min(72%, 22rem);
  height: auto;
  color: color-mix(in srgb, var(--e74-accent) 22%, transparent);
  pointer-events: none;
}

.activity-feature__silhouette-path {
  opacity: 1;
}

.activity-feature__kicker,
.activity-feature__heading,
.activity-feature__body,
.activity-feature__stat,
.activity-feature__meta {
  position: relative;
  z-index: 1;
}

.activity-feature__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 0.95vw, 0.82rem);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-accent);
  text-wrap: balance;
}

.activity-feature__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 4.2vw, 3.25rem);
  font-weight: 750;
  line-height: 0.95;
  letter-spacing: var(--e74-tracking-heading);
  color: var(--e74-ink);
  text-transform: uppercase;
}

.activity-feature__body {
  margin: 0;
  max-width: 38ch;
  font-family: var(--font-ui);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.activity-feature__stat {
  display: grid;
  gap: 0.2rem;
  margin-top: auto;
  padding-top: 1rem;
  width: 100%;
}

.activity-feature__stat-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--e74-tracking-heading);
  color: var(--e74-accent);
  font-variant-numeric: tabular-nums;
}

.activity-feature__stat-label {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 550;
  line-height: 1.35;
  color: var(--e74-ink);
}

.activity-feature__stat-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  margin: 0.55rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.activity-feature__stat-link {
  color: var(--e74-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--e74-accent) 55%, transparent);
  transition: color 160ms ease, border-color 160ms ease;
}

.activity-feature__stat-link:hover,
.activity-feature__stat-link:focus-visible {
  color: var(--e74-ink);
  border-bottom-color: var(--e74-ink);
  outline: none;
}

.activity-feature__stat-sep {
  color: color-mix(in srgb, var(--e74-accent) 35%, var(--e74-line));
}

.activity-feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: auto 0 0;
  padding: 1rem 0 0;
  list-style: none;
  width: 100%;
}

.activity-feature__meta li {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--e74-radius-badge);
  background: var(--e74-accent-soft);
  color: var(--e74-ink);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.activity-feature__media {
  position: relative;
  margin: 0;
  width: 100%;
  min-height: 16rem;
  aspect-ratio: 4 / 3;
  background: var(--e74-section-dark);
  overflow: hidden;
}

.activity-feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-feature__placeholder {
  position: absolute;
  inset: 0;
  background: #d8dde3;
}

.activity-feature__media--placeholder {
  background: #d8dde3;
}

.activity-feature__badge {
  position: absolute;
  top: 0.95rem;
  right: 0.95rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--e74-radius-badge);
  background: rgba(255, 255, 255, 0.94);
  color: var(--e74-ink);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(14, 19, 24, 0.12);
}

@media (min-width: 900px) {
  .activity-feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: 36rem;
    min-height: 36rem;
  }

  .activity-feature__copy {
    height: 100%;
    min-height: 0;
    padding: clamp(2rem, 3.5vw, 2.85rem) clamp(1.75rem, 3vw, 2.5rem);
  }

  .activity-feature__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }

  .activity-feature__silhouette {
    width: min(78%, 26rem);
  }
}

@media (max-width: 899.98px) {
  .activity-feature {
    height: auto;
    min-height: 0;
  }

  .activity-feature__silhouette {
    opacity: 0.85;
  }
}


/* —— Contact page —— */
.contact-page {
  background: var(--e74-bg);
  color: var(--e74-ink);
  padding: clamp(2.25rem, 5vw, 3.75rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--e74-line);
}

.contact-page__shell {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  min-width: 0;
}

.contact-page__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: stretch;
  min-width: 0;
}

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

@media (min-width: 1100px) {
  .contact-page__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

.contact-card {
  min-width: 0;
}

/* QSL band — distinct from feature cards; compact full-width callout */
.contact-qsl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  min-width: 0;
  padding: 0.95rem 1.1rem;
  border: 1px dashed color-mix(in srgb, var(--e74-accent) 42%, var(--e74-line));
  border-radius: var(--e74-radius-badge);
  background: color-mix(in srgb, var(--e74-accent) 7%, var(--e74-surface));
  color: var(--e74-ink);
}

.contact-qsl__copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.contact-qsl__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-accent);
}

.contact-qsl__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: var(--e74-tracking-heading-sm);
  color: var(--e74-ink);
}

.contact-qsl__body {
  margin: 0.15rem 0 0;
  max-width: 62ch;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--e74-ink-muted);
}

.contact-qsl__link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.1rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--e74-accent);
  transition: color var(--e74-ease);
}

.contact-qsl__link:hover,
.contact-qsl__link:focus-visible {
  color: var(--e74-ink);
  outline: none;
}

@media (min-width: 900px) {
  .contact-qsl {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.25rem;
    padding: 1rem 1.25rem;
  }

  .contact-qsl__copy {
    gap: 0.15rem;
  }

  .contact-qsl__body {
    max-width: 68ch;
  }

  .contact-qsl__link {
    justify-self: end;
    margin-top: 0;
    white-space: nowrap;
  }
}

.contact-card__phones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  flex: 1 1 auto;
}

.contact-card__phone {
  display: grid;
  gap: 0.2rem;
}

.contact-card__role {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
}

.contact-card__value {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--e74-ink);
  text-decoration: none;
  word-break: break-word;
  transition: color var(--e74-ease);
}

.contact-card__value:hover,
.contact-card__value:focus-visible {
  color: var(--e74-accent);
  outline: none;
}

.contact-card__value--email {
  display: inline-block;
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
}

.contact-card__callbook {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  margin-top: auto;
}

.contact-card__callbook-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--e74-ink);
  text-decoration: none;
  transition: color var(--e74-ease);
}

.contact-card__callbook-link:hover,
.contact-card__callbook-link:focus-visible {
  color: var(--e74-accent);
  outline: none;
}

.contact-card__address {
  flex: 1 1 auto;
}

.contact-card__social {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.contact-card__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--e74-ink);
  text-decoration: none;
  border-radius: var(--e74-radius-control);
  transition: color var(--e74-ease), background-color var(--e74-ease);
}

.contact-card__social-link:hover,
.contact-card__social-link:focus-visible {
  color: var(--e74-accent);
  background: color-mix(in srgb, var(--e74-accent) 10%, transparent);
  outline: none;
}

.contact-card__social-link svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.contact-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--e74-accent);
  transition: color var(--e74-ease);
}

.contact-card__link:hover,
.contact-card__link:focus-visible {
  color: var(--e74-ink);
  outline: none;
}

.contact-visit {
  background: var(--e74-bg);
  color: var(--e74-ink);
  padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5.5rem);
  border-bottom: 1px solid var(--e74-line);
}

.contact-visit__shell {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  min-width: 0;
}

.contact-visit__intro {
  display: grid;
  gap: 0.75rem;
  max-width: 40rem;
}

.contact-visit__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.8vw, 2.35rem);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: var(--e74-tracking-heading);
  color: var(--e74-ink);
  text-wrap: balance;
}

.contact-visit__lead {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.contact-visit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  align-items: stretch;
  min-width: 0;
}

@media (min-width: 900px) {
  .contact-visit__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.contact-visit__map-panel,
.contact-visit__form-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 20rem;
  padding: 1rem;
  background: var(--e74-surface);
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-card);
}

.contact-visit__form-panel {
  gap: 1rem;
  padding: clamp(1.35rem, 3vw, 1.85rem);
}

.contact-visit__map {
  flex: 1 1 auto;
  width: 100%;
  min-height: 20rem;
  height: 20rem;
  border-radius: calc(var(--e74-radius-card) - 4px);
  overflow: hidden;
  background: #e8ecf0;
}

@media (min-width: 900px) {
  .contact-visit__map-panel,
  .contact-visit__form-panel {
    min-height: 34rem;
  }

  .contact-visit__map {
    min-height: 30rem;
    height: 100%;
  }
}

.contact-visit__map-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0.85rem;
}

.contact-map-marker {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50% 50% 50% 0;
  background: var(--e74-accent);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(14, 19, 24, 0.28);
  transform: rotate(-45deg);
}

.contact-map-popup {
  display: grid;
  gap: 0.2rem;
  padding: 0.15rem 0.1rem;
}

.contact-map-popup__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.2;
  color: var(--e74-ink);
}

.contact-map-popup__sub {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--e74-accent);
}

.contact-map-popup__addr {
  margin: 0.15rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--e74-ink-muted);
}

.contact-map-popup-wrap .maplibregl-popup-content {
  padding: 0.7rem 0.85rem;
  border-radius: var(--e74-radius-control);
  box-shadow: 0 8px 24px rgba(14, 19, 24, 0.12);
}

.contact-org {
  margin-top: 0.35rem;
  padding-top: 1.15rem;
  border-top: 1px dashed var(--e74-line);
  min-width: 0;
}

.contact-org--legal {
  margin-top: 0;
}

.contact-org__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: var(--e74-ink-muted);
}

.contact-org__label {
  color: var(--e74-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.contact-org__name {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--e74-ink);
}

.contact-org__sep {
  opacity: 0.45;
}

.contact-org__meta {
  color: var(--e74-ink-muted);
}

.contact-org__link {
  color: var(--e74-ink-muted);
  text-decoration: none;
}

.contact-org__link:hover,
.contact-org__link:focus-visible {
  color: var(--e74-ink);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}


/* —— Meshtastic overview —— */
.mesh-page {
  background: var(--e74-bg);
  color: var(--e74-ink);
  overflow-x: clip;
}

.mesh-hero {
  --mesh-kpi-line: color-mix(in srgb, var(--e74-section-dark) 16%, transparent);
  position: relative;
  isolation: isolate;
  padding: clamp(2.5rem, 5.5vw, 4.25rem) 0 clamp(2.75rem, 5vw, 4rem);
  border-bottom: 1px solid var(--e74-line);
  background: color-mix(in srgb, var(--e74-ink) 2.5%, var(--e74-bg));
  overflow: hidden;
}

.mesh-hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 70% 60% at 0% 100%,
      color-mix(in srgb, var(--e74-accent) 14%, transparent) 0%,
      color-mix(in srgb, var(--e74-accent) 5%, transparent) 38%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--e74-ink) 3%, transparent),
      transparent 55%
    );
}

/* Homepage Final CTA pulse — mirrored to top-right */
.mesh-hero__pulse {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(
    ellipse 110% 110% at 100% 0%,
    #000 0%,
    rgba(0, 0, 0, 0.72) 32%,
    rgba(0, 0, 0, 0.28) 58%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 110% 110% at 100% 0%,
    #000 0%,
    rgba(0, 0, 0, 0.72) 32%,
    rgba(0, 0, 0, 0.28) 58%,
    transparent 78%
  );
}

.mesh-hero__pulse-glow {
  position: absolute;
  right: 0;
  top: 0;
  /* Equal axes (vmin) — % width/% height on a rectangular hero make ellipses. */
  width: min(82vmin, 34rem);
  height: min(82vmin, 34rem);
  aspect-ratio: 1;
  transform: translate(42%, -42%);
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--e74-accent) 48%, transparent) 0%,
    color-mix(in srgb, var(--e74-accent) 20%, transparent) 40%,
    transparent 72%
  );
  animation: final-cta-glow-tr 4.8s ease-in-out infinite;
}

.mesh-hero__pulse-ring {
  position: absolute;
  right: 0;
  top: 0;
  width: min(140vmin, 68rem);
  height: min(140vmin, 68rem);
  aspect-ratio: 1;
  transform: translate(50%, -50%) scale(0.12);
  border-radius: 50%;
  border: 1.75px solid color-mix(in srgb, var(--e74-accent) 82%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--e74-accent) 18%, transparent),
    0 0 42px color-mix(in srgb, var(--e74-accent) 28%, transparent);
  opacity: 0;
  animation: final-cta-pulse-tr 4.8s ease-out infinite;
}

.mesh-hero__pulse-ring--1 {
  animation-delay: 0s;
}

.mesh-hero__pulse-ring--2 {
  animation-delay: 1.2s;
}

.mesh-hero__pulse-ring--3 {
  animation-delay: 2.4s;
}

.mesh-hero__pulse-ring--4 {
  animation-delay: 3.6s;
}

@keyframes final-cta-pulse-tr {
  0% {
    transform: translate(50%, -50%) scale(0.1);
    opacity: 0.9;
  }
  35% {
    transform: translate(50%, -50%) scale(0.48);
    opacity: 0.48;
  }
  70% {
    transform: translate(50%, -50%) scale(0.92);
    opacity: 0.14;
  }
  100% {
    transform: translate(50%, -50%) scale(1.08);
    opacity: 0;
  }
}

@keyframes final-cta-glow-tr {
  0%,
  100% {
    opacity: 0.65;
    transform: translate(42%, -42%) scale(0.92);
  }
  50% {
    opacity: 1;
    transform: translate(42%, -42%) scale(1.1);
  }
}

.mesh-hero__shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  align-items: center;
  min-width: 0;
}

.mesh-hero__copy {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  max-width: 38rem;
}

.mesh-hero__breadcrumb {
  margin: 0 0 0.15rem;
}

.mesh-hero__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
}

.mesh-hero__crumb-link {
  color: inherit;
  text-decoration: none;
}

.mesh-hero__crumb-link:hover,
.mesh-hero__crumb-link:focus-visible {
  color: var(--e74-accent);
  outline: none;
}

.mesh-hero__crumb.is-current {
  color: var(--e74-ink);
}

.mesh-hero__crumb-sep {
  opacity: 0.45;
}

.mesh-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 4.2vw, 3.35rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.05;
  color: var(--e74-ink);
  text-wrap: balance;
}

.mesh-hero__lead,
.mesh-hero__support,
.mesh-live__lead,
.mesh-nodes__lead,
.mesh-monitor__lead,
.mesh-basics__lead,
.mesh-news__lead {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.6;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.mesh-hero__support {
  font-size: 0.95rem;
}

/* Connected 2×2 board — same matrix language as ham-who */
.mesh-kpi-board {
  position: relative;
  width: 100%;
  min-width: 0;
  border-radius: var(--e74-radius-card);
  background: color-mix(in srgb, var(--e74-accent-soft) 55%, var(--e74-surface));
  color: var(--e74-ink);
  overflow: hidden;
}

.mesh-kpi-board__dash-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.mesh-kpi-board__dash-path {
  fill: none;
  stroke: color-mix(in srgb, var(--e74-accent) 42%, transparent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 0.18 0.09;
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: calc(var(--e74-radius-card) - 1px);
  ry: calc(var(--e74-radius-card) - 1px);
}

.mesh-kpi {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  border: none;
  border-radius: inherit;
  overflow: hidden;
}

.mesh-kpi__item {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  min-width: 0;
  padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.1rem, 1.8vw, 1.55rem);
  border-right: 1px dashed var(--mesh-kpi-line);
  border-bottom: 1px dashed var(--mesh-kpi-line);
  background: transparent;
  color: var(--e74-ink);
}

.mesh-kpi__item:nth-child(2n) {
  border-right: 0;
}

.mesh-kpi__item:nth-child(n + 3) {
  border-bottom: 0;
}

.mesh-kpi__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.65rem, 2.8vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--e74-section-dark);
  font-variant-numeric: tabular-nums;
}

.mesh-kpi__label {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-accent);
}

.mesh-hero__wave {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-inline: var(--e74-gutter);
}

.mesh-hero__freq-bars {
  width: min(100%, var(--e74-max));
  margin-inline: auto;
  margin-left: max(0px, calc((100% - var(--e74-max)) / 2 + 33%));
}

@media (min-width: 900px) {
  .mesh-hero__shell {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.mesh-live,
.mesh-nodes,
.mesh-monitor,
.mesh-basics,
.mesh-news {
  padding: clamp(2.75rem, 6vw, 5rem) 0;
  border-bottom: 1px solid var(--e74-line);
}

.mesh-live__shell,
.mesh-nodes__shell,
.mesh-monitor__shell,
.mesh-basics__shell,
.mesh-news__shell {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  min-width: 0;
}

.mesh-live__intro,
.mesh-nodes__intro,
.mesh-monitor__intro,
.mesh-basics__intro,
.mesh-news__intro {
  display: grid;
  gap: 0.75rem;
  max-width: 42rem;
  justify-items: start;
  text-align: left;
}

.mesh-live__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: end;
  min-width: 0;
}

.mesh-live__legend {
  min-width: 0;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-card);
  background: var(--e74-surface);
}

.mesh-live__legend-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0;
}

.mesh-live__legend-item {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding-top: 0.7rem;
  border-top: 1px dashed color-mix(in srgb, var(--e74-section-dark) 14%, transparent);
}

.mesh-live__legend-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.mesh-live__legend-item dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
}

.mesh-live__legend-item dd {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--e74-ink);
}

.mesh-live__legend-snr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

.mesh-live__snr-scale {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.mesh-live__snr-swatch {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
}

.mesh-live__snr-swatch--good {
  background: #2ea44f;
}

.mesh-live__snr-swatch--ok {
  background: #c9a227;
}

.mesh-live__snr-swatch--weak {
  background: #e07a2f;
}

.mesh-live__snr-swatch--poor {
  background: #c0392b;
}

.mesh-live__snr-range {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--e74-ink-muted);
}

@media (min-width: 700px) {
  .mesh-live__legend-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.1rem;
  }

  .mesh-live__legend-item {
    padding-top: 0;
    border-top: 0;
  }

  .mesh-live__legend-item:nth-child(n + 3) {
    padding-top: 0.75rem;
    border-top: 1px dashed color-mix(in srgb, var(--e74-section-dark) 14%, transparent);
  }
}

@media (min-width: 960px) {
  .mesh-live__head {
    grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.9fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
  }

  .mesh-live__intro {
    max-width: none;
  }
}

.mesh-live__title,
.mesh-nodes__title,
.mesh-monitor__title,
.mesh-basics__title,
.mesh-news__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.8vw, 2.35rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.12;
  color: var(--e74-ink);
  text-wrap: balance;
}

.mesh-live__frame {
  position: relative;
  min-width: 0;
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-card);
  overflow: hidden;
  background: var(--e74-surface);
}

.mesh-live__iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  background: #e8ecf0;
}

@media (min-width: 700px) {
  .mesh-live__iframe {
    height: 540px;
  }
}

@media (min-width: 1100px) {
  .mesh-live__iframe {
    height: 640px;
  }
}

.mesh-live__interact {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 1.25rem;
  border: 0;
  background: color-mix(in srgb, var(--e74-ink) 38%, transparent);
  color: #fff;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.mesh-live__frame.is-interactive .mesh-live__interact {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mesh-live__interact-label {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mesh-live__interact-hint {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
}

.mesh-live__interact:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.mesh-live__fullscreen {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: calc(100% - 1.5rem);
  padding: 0.55rem 0.8rem;
  border-radius: calc(var(--e74-radius-card) - 2px);
  background: color-mix(in srgb, var(--e74-surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--e74-line) 80%, transparent);
  box-shadow: 0 6px 18px rgba(14, 19, 24, 0.12);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--e74-accent);
  backdrop-filter: blur(6px);
}

.mesh-live__fullscreen:hover,
.mesh-live__fullscreen:focus-visible {
  color: var(--e74-ink);
  border-color: color-mix(in srgb, var(--e74-accent) 40%, var(--e74-line));
  outline: none;
}

.mesh-page__text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--e74-accent);
}

.mesh-page__text-link:hover,
.mesh-page__text-link:focus-visible {
  color: var(--e74-ink);
  outline: none;
}

.mesh-nodes {
  background: var(--e74-bg);
}

.mesh-nodes__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: end;
  min-width: 0;
}

.mesh-nodes__summary {
  min-width: 0;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-card);
  background: var(--e74-surface);
}

.mesh-nodes__summary-count {
  margin: 0 0 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-accent);
}

.mesh-nodes__summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.mesh-nodes__summary-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.45rem;
  min-width: 0;
  padding-top: 0.7rem;
  border-top: 1px dashed color-mix(in srgb, var(--e74-section-dark) 14%, transparent);
  font-family: var(--font-ui);
  font-size: 0.92rem;
  line-height: 1.35;
}

.mesh-nodes__summary-item:first-child {
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 480px) {
  .mesh-nodes__summary-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.1rem;
  }

  .mesh-nodes__summary-item {
    padding-top: 0;
    border-top: 0;
  }

  .mesh-nodes__summary-item:nth-child(n + 3) {
    padding-top: 0.75rem;
    border-top: 1px dashed color-mix(in srgb, var(--e74-section-dark) 14%, transparent);
  }
}

.mesh-nodes__summary-name {
  font-weight: 650;
  color: var(--e74-ink);
}

.mesh-nodes__summary-sep {
  color: var(--e74-ink-muted);
}

.mesh-nodes__summary-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
}

.mesh-nodes__summary-item--gateway .mesh-nodes__summary-name {
  font-weight: 700;
  color: var(--e74-ink);
}

.mesh-nodes__summary-item--gateway .mesh-nodes__summary-role {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: var(--e74-accent);
  color: #fff;
  font-weight: 600;
}

@media (min-width: 960px) {
  .mesh-nodes__head {
    grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.9fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
  }

  .mesh-nodes__intro {
    max-width: none;
  }
}

.mesh-nodes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  min-width: 0;
}

@media (min-width: 700px) {
  .mesh-nodes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem;
  }
}

@media (min-width: 1100px) {
  .mesh-nodes__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.35rem;
  }
}

.mesh-node {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--e74-surface);
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-card);
  transition:
    transform var(--e74-ease),
    box-shadow var(--e74-ease),
    border-color var(--e74-ease),
    background var(--e74-ease);
}

.mesh-node:hover,
.mesh-node:focus-within {
  border-color: color-mix(in srgb, var(--e74-accent) 42%, var(--e74-line));
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(14, 19, 24, 0.06);
}

/* Gateway: same 1px border box as others so row content stays aligned; accent via ring. */
.mesh-node--gateway {
  border-color: color-mix(in srgb, var(--e74-accent) 62%, var(--e74-line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--e74-accent) 42%, transparent),
    0 8px 22px color-mix(in srgb, var(--e74-accent) 12%, transparent);
}

.mesh-node--gateway:hover,
.mesh-node--gateway:focus-within {
  border-color: var(--e74-accent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--e74-accent) 70%, transparent),
    0 14px 32px color-mix(in srgb, var(--e74-accent) 18%, transparent);
}

.mesh-node--gateway .mesh-node__facts {
  border-top-color: color-mix(in srgb, var(--e74-accent) 28%, var(--e74-line));
}

.mesh-node__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e8ecf0;
}

.mesh-node__media--carousel .mesh-node__swiper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.mesh-node__swiper .swiper-wrapper,
.mesh-node__swiper .swiper-slide {
  height: 100%;
}

.mesh-node__slide {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #e8ecf0;
}

.mesh-node__media:not(.mesh-node__media--carousel) > .mesh-node__slide {
  position: absolute;
  inset: 0;
}

.mesh-node__media .img-cover,
.mesh-node__slide .img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--e74-media-position, 50% 50%);
  transition: transform var(--e74-ease);
}

.mesh-node:hover .mesh-node__media:not(.mesh-node__media--carousel) .img-cover,
.mesh-node:focus-within .mesh-node__media:not(.mesh-node__media--carousel) .img-cover {
  transform: scale(1.04);
}

.mesh-node__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--e74-surface) 92%, transparent);
  color: var(--e74-ink);
  box-shadow: 0 4px 14px rgba(14, 19, 24, 0.16);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 160ms ease, color 160ms ease;
}

.mesh-node__nav--prev {
  left: 0.65rem;
}

.mesh-node__nav--next {
  right: 0.65rem;
}

.mesh-node__nav:hover,
.mesh-node__nav:focus-visible {
  background: var(--e74-ink);
  color: #fff;
  outline: none;
}

.mesh-node__nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.mesh-node__body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.7rem;
  padding: 1.25rem 1.3rem 1.35rem;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.mesh-node__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 700;
  letter-spacing: var(--e74-tracking-heading-sm);
  line-height: 1.15;
  color: var(--e74-ink);
}

.mesh-node__desc {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.mesh-node__facts {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--e74-line);
  /*
   * Reserve space for the densest cards (long location pills wrap to more
   * rows). Shorter cards (e.g. Klašnice without coordinates) keep empty
   * space so separators stay aligned within each grid row.
   */
  min-height: 9rem;
}

.mesh-node__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}

.mesh-node__pill-icon {
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
}

.mesh-node__pill-kicker {
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.mesh-node__pill-value {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.mesh-node__pill code.mesh-node__pill-value {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Dominant: location + operating mode (replaces the old header meta). */
.mesh-node__pill--emphasis {
  min-height: 1.9rem;
  padding: 0.32rem 0.7rem 0.32rem 0.55rem;
  gap: 0.4rem;
  background: #eef1f4;
  color: var(--e74-ink);
  font-size: 0.68rem;
}

.mesh-node__pill--emphasis .mesh-node__pill-icon {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--e74-accent);
}

.mesh-node__pill--emphasis .mesh-node__pill-kicker {
  color: var(--e74-ink-muted);
}

.mesh-node__pill--emphasis .mesh-node__pill-value {
  font-size: 0.72rem;
  color: var(--e74-ink);
}

.mesh-node--gateway .mesh-node__pill--mode {
  background: var(--e74-accent);
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--e74-accent) 18%, transparent);
}

.mesh-node--gateway .mesh-node__pill--mode .mesh-node__pill-icon,
.mesh-node--gateway .mesh-node__pill--mode .mesh-node__pill-kicker,
.mesh-node--gateway .mesh-node__pill--mode .mesh-node__pill-value {
  color: #fff;
}

.mesh-node--gateway .mesh-node__pill--mode .mesh-node__pill-kicker {
  opacity: 0.82;
}

/* Secondary: coordinates, node id, live / empty status. */
.mesh-node__pill--quiet {
  min-height: 1.55rem;
  padding: 0.18rem 0.5rem 0.18rem 0.4rem;
  background: color-mix(in srgb, var(--e74-ink) 4.5%, var(--e74-surface));
  color: var(--e74-ink-muted);
  font-size: 0.6rem;
}

.mesh-node__pill--quiet .mesh-node__pill-icon {
  width: 0.8rem;
  height: 0.8rem;
  color: color-mix(in srgb, var(--e74-ink-muted) 72%, var(--e74-accent));
  opacity: 0.85;
}

.mesh-node__pill--quiet .mesh-node__pill-kicker {
  color: color-mix(in srgb, var(--e74-ink-muted) 88%, transparent);
}

.mesh-node__pill--quiet .mesh-node__pill-value {
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--e74-ink-muted);
}

.mesh-node__pill--quiet code.mesh-node__pill-value {
  font-size: 0.64rem;
  font-weight: 500;
  color: var(--e74-ink-muted);
}

.mesh-node__pill--empty {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--e74-ink) 10%, transparent);
}

.mesh-node__pill--empty .mesh-node__pill-icon {
  color: var(--e74-ink-muted);
  opacity: 0.7;
}

.mesh-node__pill--empty .mesh-node__pill-value {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
}

.mesh-monitor {
  background: color-mix(in srgb, var(--e74-ink) 2.5%, var(--e74-bg));
}

.mesh-monitor__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: end;
  min-width: 0;
}

.mesh-monitor__scope {
  min-width: 0;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-card);
  background: var(--e74-surface);
}

.mesh-monitor__scope-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0;
}

.mesh-monitor__scope-item {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding-top: 0.7rem;
  border-top: 1px dashed color-mix(in srgb, var(--e74-section-dark) 14%, transparent);
}

.mesh-monitor__scope-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.mesh-monitor__scope-item dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
}

.mesh-monitor__scope-item dd {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--e74-ink);
}

.mesh-monitor__scope-item code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--e74-ink);
}

@media (min-width: 700px) {
  .mesh-monitor__scope-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.1rem;
  }

  .mesh-monitor__scope-item {
    padding-top: 0;
    border-top: 0;
  }

  .mesh-monitor__scope-item:nth-child(n + 3) {
    padding-top: 0.75rem;
    border-top: 1px dashed color-mix(in srgb, var(--e74-section-dark) 14%, transparent);
  }
}

@media (min-width: 960px) {
  .mesh-monitor__head {
    grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.9fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
  }

  .mesh-monitor__intro {
    max-width: none;
  }
}

.mesh-monitor__gateways {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  min-width: 0;
}

@media (min-width: 900px) {
  .mesh-monitor__gateways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem;
    align-items: start;
  }
}

.mesh-monitor__gateway {
  display: grid;
  gap: 0.95rem;
  min-width: 0;
}

.mesh-monitor__gateway-head {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.mesh-monitor__gateway-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e74-accent);
}

.mesh-monitor__gateway-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: var(--e74-tracking-heading-sm);
  line-height: 1.15;
  color: var(--e74-ink);
}

.mesh-monitor__gateway-id {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--e74-ink-muted);
}

.mesh-monitor__gateway-id code {
  font-family: inherit;
  color: var(--e74-ink);
}

.mesh-monitor__gateway-charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  min-width: 0;
}

.mesh-chart {
  margin: 0;
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding: 1.15rem 1.15rem 1.25rem;
  background: var(--e74-surface);
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-card);
}

.mesh-chart__caption {
  display: grid;
  gap: 0.2rem;
}

.mesh-chart__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading-sm);
  color: var(--e74-ink);
}

.mesh-chart__meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--e74-ink-muted);
}

.mesh-chart__canvas-wrap {
  position: relative;
  height: 220px;
  min-width: 0;
}

.mesh-chart__canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.mesh-chart__status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 1rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--e74-ink-muted);
  background: color-mix(in srgb, var(--e74-surface) 88%, transparent);
  text-align: center;
}

.mesh-chart__status[hidden] {
  display: none !important;
}

/* Reusable signal-grid band (option D, no concentric rings) — Meshtastic basics */
.band-signal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: color-mix(in srgb, var(--e74-ink) 3.5%, var(--e74-bg));
  color: var(--e74-ink);
  border-bottom-color: var(--e74-line);
}

.band-signal__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--e74-section-dark) 10%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--e74-section-dark) 10%, transparent) 1px,
      transparent 1px
    );
  background-size: 44px 44px, 44px 44px;
  opacity: 0.62;
}

.band-signal > :not(.band-signal__field) {
  position: relative;
  z-index: 1;
}

.band-signal .mesh-basics__card {
  background: var(--e74-surface);
  border-color: var(--e74-line);
}

.band-signal .mesh-basics__card:hover,
.band-signal .mesh-basics__card:focus-visible {
  border-color: color-mix(in srgb, var(--e74-accent) 42%, var(--e74-line));
  background: var(--e74-surface);
  box-shadow: 0 10px 28px rgba(14, 19, 24, 0.06);
}

.band-signal .mesh-basics__card--accent,
.mesh-basics__card--accent {
  background: color-mix(in srgb, var(--e74-accent-soft) 42%, var(--e74-surface));
  border-color: color-mix(in srgb, var(--e74-accent) 32%, var(--e74-line));
}

.band-signal .mesh-basics__card--accent:hover,
.band-signal .mesh-basics__card--accent:focus-visible,
.mesh-basics__card--accent:hover,
.mesh-basics__card--accent:focus-visible {
  background: color-mix(in srgb, var(--e74-accent-soft) 55%, var(--e74-surface));
  border-color: color-mix(in srgb, var(--e74-accent) 48%, var(--e74-line));
}

.mesh-basics.band-signal {
  border-bottom-color: var(--e74-line);
}

.mesh-basics__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  min-width: 0;
}

@media (min-width: 700px) {
  .mesh-basics__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

@media (min-width: 1100px) {
  .mesh-basics__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mesh-basics__card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.7rem;
  min-width: 0;
  min-height: 100%;
  padding: 1.4rem 1.35rem 1.25rem;
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-card);
  background: var(--e74-surface);
  color: inherit;
  text-decoration: none;
  transition: transform var(--e74-ease), border-color var(--e74-ease), box-shadow var(--e74-ease);
}

.mesh-basics__card:hover,
.mesh-basics__card:focus-visible {
  border-color: color-mix(in srgb, var(--e74-accent) 42%, var(--e74-line));
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(14, 19, 24, 0.06);
  outline: none;
}

.mesh-basics__index {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--e74-accent);
}

.mesh-basics__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  font-weight: 700;
  letter-spacing: var(--e74-tracking-heading-sm);
  line-height: 1.2;
  color: var(--e74-ink);
}

.mesh-basics__card-body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.mesh-basics__card-link {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--e74-accent);
  margin-top: auto;
}

.mesh-join-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.35rem, 2.5vw, 2rem);
  align-items: center;
  width: 100%;
  min-width: 0;
  margin-top: 0.35rem;
  padding: clamp(1.6rem, 3vw, 2.35rem) clamp(1.35rem, 2.5vw, 2rem);
  border-radius: var(--e74-radius-card);
  background: var(--e74-section-dark);
  color: #f2f5f7;
  box-shadow: inset 3px 0 0 var(--e74-accent);
}

.mesh-join-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      color-mix(in srgb, #fff 7%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, #fff 7%, transparent) 1px,
      transparent 1px
    );
  background-size: 44px 44px, 44px 44px;
  opacity: 0.45;
}

.mesh-join-cta__copy,
.mesh-join-cta__actions {
  position: relative;
  z-index: 1;
}

.mesh-join-cta__copy {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  max-width: 36rem;
}

.mesh-join-cta__eyebrow {
  margin: 0;
  color: color-mix(in srgb, var(--e74-accent) 78%, #fff);
}

.mesh-join-cta__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 650;
  letter-spacing: var(--e74-tracking-heading);
  line-height: 1.12;
  color: #f2f5f7;
  text-wrap: balance;
}

.mesh-join-cta__body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.55;
  color: color-mix(in srgb, #f2f5f7 68%, transparent);
  text-wrap: pretty;
}

.mesh-join-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

@media (min-width: 900px) {
  .mesh-join-cta {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .mesh-join-cta__actions {
    justify-content: flex-end;
  }
}

.mesh-news {
  background: var(--e74-bg);
}

.mesh-news__intro {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.mesh-news .news-feat-carousel--embed {
  padding-top: 0;
}

.mesh-news__actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(0.75rem, 1.5vw, 1.15rem);
}

.mesh-news__empty {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--e74-ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  .mesh-basics__card,
  .mesh-node,
  .mesh-node__media .img-cover,
  .mesh-live__interact {
    transition: none;
  }

  .mesh-basics__card:hover,
  .mesh-basics__card:focus-visible,
  .mesh-node:hover,
  .mesh-node:focus-within {
    transform: none;
  }

  .mesh-node:hover .mesh-node__media .img-cover,
  .mesh-node:focus-within .mesh-node__media .img-cover {
    transform: none;
  }

  .mesh-hero__pulse-glow,
  .mesh-hero__pulse-ring {
    animation: none;
  }

  .mesh-hero__pulse-glow {
    opacity: 0.75;
  }

  .mesh-hero__pulse-ring {
    opacity: 0.22;
    transform: translate(50%, -50%) scale(0.55);
  }

  .mesh-hero__pulse-ring--2 {
    transform: translate(50%, -50%) scale(0.78);
    opacity: 0.14;
  }

  .mesh-hero__pulse-ring--3,
  .mesh-hero__pulse-ring--4 {
    opacity: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* Nav — accent CTA link (Webshop)                                            */
/* -------------------------------------------------------------------------- */

.site-nav a.nav-link--accent,
.site-nav a.nav-link--accent.is-active,
.site-header--inner .site-nav a.nav-link--accent,
.site-header--inner .site-nav a.nav-link--accent.is-active {
  background: var(--e74-accent);
  color: #fff;
  opacity: 1;
  border-bottom-color: transparent;
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  font-weight: 700;
}

.site-nav a.nav-link--accent:hover,
.site-nav a.nav-link--accent:focus-visible,
.site-header--inner .site-nav a.nav-link--accent:hover,
.site-header--inner .site-nav a.nav-link--accent:focus-visible {
  background: var(--e74-ink);
  color: var(--e74-accent);
  opacity: 1;
}

@media (min-width: 1060px) {
  .site-nav a.nav-link--accent,
  .site-nav a.nav-link--accent.is-active,
  .site-header--inner .site-nav a.nav-link--accent,
  .site-header--inner .site-nav a.nav-link--accent.is-active {
    padding: 0.4rem 0.85rem;
    font-size: 0.88rem;
  }

  .site-nav a.nav-link--accent::after {
    display: none;
  }

  .page-home .site-header--overlay .site-nav a.nav-link--accent,
  .page-home .site-header--overlay .site-nav a.nav-link--accent.is-active,
  .page-home .site-header.is-solid .site-nav a.nav-link--accent,
  .page-home .site-header.is-solid .site-nav a.nav-link--accent.is-active {
    background: var(--e74-accent);
    color: #fff;
  }

  .page-home .site-header--overlay .site-nav a.nav-link--accent:hover,
  .page-home .site-header--overlay .site-nav a.nav-link--accent:focus-visible,
  .page-home .site-header.is-solid .site-nav a.nav-link--accent:hover,
  .page-home .site-header.is-solid .site-nav a.nav-link--accent:focus-visible {
    background: var(--e74-ink);
    color: var(--e74-accent);
  }
}

/* -------------------------------------------------------------------------- */
/* Webshop — club merch order page                                            */
/* -------------------------------------------------------------------------- */

.webshop {
  background: var(--e74-bg);
  color: var(--e74-ink);
  padding: clamp(2.5rem, 5vw, 4.25rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--e74-line);
}

.webshop__shell {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  min-width: 0;
}

.webshop__intro {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 40rem;
}

.webshop__catalog-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.6vw, 2.65rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: var(--e74-tracking-heading);
  color: var(--e74-section-dark);
  text-wrap: balance;
}

.webshop__lead {
  margin: 0;
  max-width: 36rem;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.58;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.webshop__note {
  margin: 0;
  max-width: 36rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--e74-accent);
  background: color-mix(in srgb, var(--e74-accent-soft) 35%, #fff);
  border-radius: 0 0.45rem 0.45rem 0;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--e74-section-dark);
  text-wrap: pretty;
}

.webshop__flash {
  margin: 0;
  padding: 0.95rem 1.1rem;
  border-radius: var(--e74-radius-card);
  font-weight: 600;
  line-height: 1.45;
}

.webshop__flash--ok {
  background: color-mix(in srgb, var(--e74-accent) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--e74-accent) 35%, var(--e74-line));
  color: var(--e74-section-dark);
}

.webshop__flash--err {
  background: color-mix(in srgb, #b42318 8%, #fff);
  border: 1px solid color-mix(in srgb, #b42318 28%, var(--e74-line));
  color: #7a1a12;
}

.webshop__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.35rem, 2.5vw, 1.85rem);
  min-width: 0;
}

.webshop-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background: var(--e74-surface);
  border: 1px solid var(--e74-line);
  border-radius: calc(var(--e74-radius-card) + 4px);
  box-shadow: 0 12px 32px rgba(14, 19, 24, 0.05);
}

.webshop-card__gallery {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  background: color-mix(in srgb, var(--e74-section-dark) 4%, #fff);
}

.webshop-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.webshop-card__form {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.webshop-card__panel {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 1.15rem 1.15rem 1.35rem;
  min-width: 0;
}

.webshop-card__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.webshop-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.webshop-card__eyebrow {
  margin: 0;
}

.webshop-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--e74-tracking-heading-sm);
  color: var(--e74-section-dark);
  text-wrap: balance;
}

.webshop-card__price {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--e74-accent);
}

.webshop-card__amount {
  font-size: 1.55rem;
  letter-spacing: var(--e74-tracking-heading-sm);
}

.webshop-card__currency {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.webshop-card__price-note {
  margin-left: 0.15rem;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--e74-ink-muted);
}

.webshop-card__copy {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--e74-ink-muted);
  text-wrap: pretty;
}

.webshop-card__selectors {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.95rem 1rem;
  border: 1px solid var(--e74-line);
  border-radius: var(--e74-radius-card);
  background: color-mix(in srgb, var(--e74-accent-soft) 28%, #fff);
}

.webshop-card__order-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--e74-section-dark);
}

.webshop-card__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.webshop-card__fields {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  padding-top: 0.15rem;
  border-top: 1px solid var(--e74-line);
}

.webshop-card__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

.webshop-card__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--e74-ink-muted);
}

.webshop-card__input,
.webshop-card__form textarea.webshop-card__input,
.webshop-card__form select.webshop-card__input {
  width: 100%;
  min-height: 2.65rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--e74-line);
  border-radius: 0.55rem;
  background: #fff;
  color: var(--e74-ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
}

.webshop-card__form textarea.webshop-card__input {
  min-height: 5.5rem;
  resize: vertical;
}

.webshop-card__input:focus,
.webshop-card__form textarea.webshop-card__input:focus,
.webshop-card__form select.webshop-card__input:focus {
  outline: 2px solid color-mix(in srgb, var(--e74-accent) 55%, transparent);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--e74-accent) 45%, var(--e74-line));
}

.webshop-card__error {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #b42318;
}

.webshop-card__honeypot,
.webshop-card__field--honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.webshop-card__field--consent .form-consent__label {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--e74-ink-muted);
}

.webshop-card__actions {
  margin-top: 0.15rem;
}

.webshop-card__submit {
  width: 100%;
  justify-content: center;
}

@media (min-width: 700px) {
  .webshop-card__summary {
    grid-template-columns: minmax(0, 1.35fr) minmax(12rem, 0.85fr);
    gap: 1.15rem;
    align-items: start;
  }
}

@media (min-width: 900px) {
  .webshop__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .webshop-card__panel {
    padding: 1.25rem 1.35rem 1.45rem;
  }
}

/* —— Maintenance page (bare layout, no header/footer) —— */
.page-maintenance {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--e74-bg);
}

.page-maintenance .err-page {
  min-height: 100vh;
  width: 100%;
}

.maint-raise {
  margin: 0 auto 1.5rem;
  width: min(100%, 36rem);
  color: var(--e74-ink);
}

.maint-raise__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.maint-raise__ground,
.maint-raise__base,
.maint-raise__winch,
.maint-raise__stake,
.maint-raise__guy,
.maint-raise__cable {
  stroke: color-mix(in srgb, var(--e74-ink) 72%, #2a323a);
  fill: none;
}

.maint-raise__ground {
  stroke: color-mix(in srgb, var(--e74-ink) 18%, transparent);
}

.maint-raise__base circle {
  fill: var(--e74-accent);
  stroke: none;
}

.maint-raise__winch circle {
  fill: var(--e74-accent);
  stroke: none;
}

.maint-raise__drum {
  fill: none !important;
  stroke: color-mix(in srgb, var(--e74-ink) 55%, transparent) !important;
  transform-origin: 108px 188px;
  animation: maint-drum-spin 5.5s linear infinite;
}

.maint-raise__cable,
.maint-raise__guy {
  stroke: var(--e74-accent);
  opacity: 0.75;
}

.maint-raise__cable {
  animation: maint-cable-tension 5.5s ease-in-out infinite;
}

.maint-raise__mast {
  stroke: color-mix(in srgb, var(--e74-ink) 72%, #2a323a);
  fill: none;
  transform-origin: 0px 0px;
  transform: rotate(-56deg);
  animation: maint-tower-raise 5.5s ease-in-out infinite;
}

.maint-raise__beacon {
  fill: var(--e74-accent);
  stroke: none;
  animation: maint-beacon 5.5s ease-in-out infinite;
}

.maint-raise__code {
  fill: color-mix(in srgb, var(--e74-ink) 28%, transparent);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
}

@keyframes maint-tower-raise {
  0%,
  100% {
    transform: rotate(-58deg);
  }
  42% {
    transform: rotate(-14deg);
  }
  50% {
    transform: rotate(-11deg);
  }
  58% {
    transform: rotate(-16deg);
  }
}

@keyframes maint-drum-spin {
  0% {
    transform: rotate(0deg);
  }
  42% {
    transform: rotate(220deg);
  }
  58% {
    transform: rotate(240deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes maint-cable-tension {
  0%,
  100% {
    opacity: 0.45;
    stroke-dashoffset: 8;
  }
  45%,
  55% {
    opacity: 0.95;
    stroke-dashoffset: 0;
  }
}

@keyframes maint-beacon {
  0%,
  35% {
    opacity: 0.25;
    filter: drop-shadow(0 0 0 transparent);
  }
  48%,
  62% {
    opacity: 1;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--e74-accent) 55%, transparent));
  }
  100% {
    opacity: 0.35;
    filter: drop-shadow(0 0 0 transparent);
  }
}

@media (max-width: 560px) {
  .maint-raise {
    margin-bottom: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .maint-raise__mast,
  .maint-raise__drum,
  .maint-raise__cable,
  .maint-raise__beacon {
    animation: none;
  }

  .maint-raise__mast {
    transform: rotate(-28deg);
  }

  .maint-raise__beacon {
    opacity: 0.85;
  }
}

/* —— Error / 404 (broken RF link) —— */
.page-error .site-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.err-page {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--e74-gutter) clamp(3rem, 8vw, 5rem);
  background:
    radial-gradient(ellipse 55% 40% at 50% 18%, color-mix(in srgb, var(--e74-accent) 8%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--e74-ink) 2.5%, var(--e74-bg)) 0%, var(--e74-bg) 55%);
}

.err-page__inner {
  width: min(100%, 40rem);
  text-align: center;
}

.err-page__status {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 6.5rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: var(--e74-tracking-heading);
  color: color-mix(in srgb, var(--e74-ink) 18%, transparent);
}

.err-page__eyebrow {
  margin: 0 0 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--e74-accent);
}

.err-page__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 4vw, 2.15rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--e74-tracking-heading);
  color: var(--e74-ink);
  text-transform: none;
}

.err-page__support {
  margin: 0 auto 1.75rem;
  max-width: 28rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--e74-ink-muted);
}

.err-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
}

/* Illustration */
.err-link {
  margin: 0 auto 1.5rem;
  width: min(100%, 36rem);
  color: var(--e74-ink);
}

.err-link__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.err-link__ground {
  stroke: color-mix(in srgb, var(--e74-ink) 18%, transparent);
}

.err-link__tower {
  stroke: color-mix(in srgb, var(--e74-ink) 72%, #2a323a);
  fill: none;
}

.err-link__tower circle {
  fill: var(--e74-accent);
  stroke: none;
  animation: err-beacon 2.4s ease-in-out infinite;
}

.err-link__tower--right circle {
  animation-delay: 0.35s;
  opacity: 0.55;
}

.err-link__wave {
  stroke: var(--e74-accent);
  fill: none;
}

.err-link__wave--left,
.err-link__wave--left-soft {
  stroke-dasharray: 180;
  stroke-dashoffset: 0;
  animation: err-wave-crawl 2.8s ease-in-out infinite;
}

.err-link__wave--right,
.err-link__wave--right-soft {
  stroke-dasharray: 180;
  stroke-dashoffset: 40;
  animation: err-wave-crawl-right 2.8s ease-in-out infinite;
  opacity: 0.55;
}

.err-link__wave--left-soft,
.err-link__wave--right-soft {
  stroke: color-mix(in srgb, var(--e74-accent) 55%, var(--e74-ink));
}

.err-link__break {
  color: var(--e74-accent);
}

.err-link__spark {
  stroke: var(--e74-accent);
  animation: err-spark 1.6s ease-in-out infinite;
}

.err-link__spark--b {
  animation-delay: 0.25s;
  opacity: 0.7;
}

.err-link__fragment {
  fill: var(--e74-accent);
  animation: err-fragment 1.8s ease-in-out infinite;
}

.err-link__fragment--b {
  animation-delay: 0.4s;
}

.err-link__dash {
  stroke: color-mix(in srgb, var(--e74-accent) 70%, transparent);
  animation: err-dash-blink 1.4s steps(2, end) infinite;
}

.err-link__code {
  fill: color-mix(in srgb, var(--e74-ink) 28%, transparent);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.2em;
}

@keyframes err-beacon {
  0%,
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    opacity: 0.65;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--e74-accent) 55%, transparent));
  }
}

@keyframes err-wave-crawl {
  0%,
  100% {
    stroke-dashoffset: 12;
    opacity: 0.85;
  }
  50% {
    stroke-dashoffset: -28;
    opacity: 1;
  }
}

@keyframes err-wave-crawl-right {
  0%,
  100% {
    stroke-dashoffset: 48;
    opacity: 0.35;
  }
  50% {
    stroke-dashoffset: 8;
    opacity: 0.55;
  }
}

@keyframes err-spark {
  0%,
  100% {
    opacity: 0.35;
    transform: translate(0, 0);
  }
  40% {
    opacity: 1;
    transform: translate(1px, -2px);
  }
  70% {
    opacity: 0.55;
    transform: translate(-1px, 1px);
  }
}

@keyframes err-fragment {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@keyframes err-dash-blink {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.9;
  }
}

@media (max-width: 560px) {
  .err-link {
    margin-bottom: 1.15rem;
  }

  .err-page__actions {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .err-page__actions .btn--solid {
    padding: 0.65rem 1rem;
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .err-link__tower circle,
  .err-link__wave--left,
  .err-link__wave--left-soft,
  .err-link__wave--right,
  .err-link__wave--right-soft,
  .err-link__spark,
  .err-link__fragment,
  .err-link__dash {
    animation: none;
  }
}