/* ==========================================================================
   SHSRK — Shoqata e Stomatologëve të Republikës së Kosovës
   ==========================================================================
   Separation is done with 1px borders, never drop shadows. The one real
   shadow in the design is the speaker modal.
   The only breakpoint is 1180px, where the navigation collapses. Everything
   else is fluid: auto-fit grids with min(Npx, 100%) and clamp() type.
   ========================================================================== */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-site.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens -- */
:root {
  --ink: #14171a;
  --ink-deep: #0c0e10;
  --paper: #fcfcfb;
  --paper-alt: #f7f7f5;
  --surface-warm: #f0f0ec;
  --surface-warm-alt: #f2f2ee;
  --placeholder: #efefea;
  --placeholder-alt: #edede8;
  --border: #e4e4de;
  --border-light: #e8e8e4;
  --border-input: #dcdcd5;
  --border-strong: #d6d6cf;

  --text-body: #3a4046;
  --text-muted: #5a6169;
  --text-meta: #8a8f96;
  --text-disabled: #a2a7ad;
  --nav-inactive: #6b7280;

  --accent: #1b6b5a;
  --accent-deep: #0f4a3e;
  --accent-light: #8fcbb8;
  --accent-pale: #c9e4db;
  --accent-tint: #f2f8f6;
  --blue: #3b82d9;
  --blue-deep: #245fa6;
  --blue-light: #8fbef0;

  --on-dark-90: rgba(252, 252, 251, 0.9);
  --on-dark-78: rgba(252, 252, 251, 0.78);
  --on-dark-72: rgba(252, 252, 251, 0.72);
  --on-dark-60: rgba(252, 252, 251, 0.6);
  --on-dark-55: rgba(252, 252, 251, 0.55);
  --on-dark-45: rgba(252, 252, 251, 0.45);
  --on-dark-40: rgba(252, 252, 251, 0.4);
  --rule-dark: rgba(252, 252, 251, 0.18);
  --rule-dark-soft: rgba(252, 252, 251, 0.12);
  --rule-dark-strong: rgba(252, 252, 251, 0.3);

  --serif: "Newsreader", Georgia, serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 32px);
}

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

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-deep);
}

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

::selection {
  background: var(--accent-pale);
}

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

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site__main {
  flex: 1;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 0 0 6px 0;
  font-size: 14px;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
  color: var(--paper);
}

/* Available to screen readers, invisible on screen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- layout --- */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(55px, 8vw, 100px);
}

.section--lg {
  padding-block: clamp(61px, 8vw, 110px);
}

.section--xl {
  padding-block: clamp(66px, 8vw, 120px);
}

.section--page {
  padding-block: clamp(48px, 8vw, 88px) 110px;
}

.section--alt {
  background: var(--paper-alt);
}

.section--ruled {
  border-top: 1px solid var(--border-light);
}

/* Fluid multi-column layout. min(Npx, 100%) is what stops 320px phones from
   overflowing horizontally — do not drop it. */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 340px), 100%), 1fr));
  gap: var(--gap, clamp(40px, 5vw, 72px));
}

.cols--wide-gap {
  --gap: clamp(48px, 5vw, 80px);
}

.cols--center {
  align-items: center;
}

.cols--start {
  align-items: start;
}

/* The hairline grid: gap:1px over a tinted background *is* the rule line. */
.hairgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 300px), 100%), 1fr));
  gap: 1px;
  background: var(--paper-alt);
}

.hairgrid > * {
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--border);
}

/* Variant used where the design draws an outer border instead of cell outlines. */
.hairgrid--boxed {
  background: var(--border);
  border: 1px solid var(--border);
}

.hairgrid--boxed > * {
  box-shadow: none;
}

.hairrows {
  display: grid;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.hairrows > * {
  background: var(--paper);
}

/* --------------------------------------------------------- typography --- */
.eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow--on-dark {
  color: var(--accent-light);
}

.eyebrow--muted {
  color: var(--on-dark-60);
  font-size: 12.5px;
  letter-spacing: 0.14em;
}

/* Same weight as --muted, for light grounds. */
.eyebrow--soft {
  color: var(--text-meta);
  font-size: 12.5px;
  letter-spacing: 0.14em;
}

.micro {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-meta);
}

.micro--on-dark {
  color: var(--on-dark-45);
}

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
}

.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 5.2vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

.h2--lg {
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.16;
}

.h2--sm {
  font-size: clamp(24px, 5.2vw, 32px);
}

.h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 0;
}

.lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-body);
}

.body {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
}

.body--sm {
  font-size: 15px;
}

.quote {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}

.measure {
  max-width: 60ch;
}

.placeholder {
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  background: var(--paper-alt);
  padding: 56px 32px;
}

.placeholder__note {
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  line-height: 1.8;
  color: var(--text-meta);
}

/* ---------------------------------------------------------- components -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.btn--dark {
  background: var(--ink);
  color: var(--paper);
}

.btn--dark:hover {
  background: var(--accent);
  color: var(--paper);
}

.btn--light {
  background: var(--paper);
  color: var(--ink);
}

.btn--light:hover {
  background: var(--accent);
  color: var(--paper);
}

.btn--light-ink:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn--blue {
  background: var(--blue);
  color: var(--paper);
  padding: 16px 30px;
}

.btn--blue:hover {
  border-color: var(--blue-deep);
  background: var(--blue-deep);
  color: var(--paper);
}

.btn--outline {
  border-color: var(--border-strong);
  color: var(--ink);
  font-weight: 500;
}

.btn--outline:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.btn--on-dark {
  border-color: var(--rule-dark-strong);
  color: var(--paper);
  font-weight: 500;
  padding: 16px 30px;
}

.btn--on-dark:hover {
  border-color: var(--paper);
  color: var(--paper);
}

.btn--sm {
  padding: 13px 24px;
  font-size: 14px;
}

.btn--xs {
  padding: 12px 22px;
  font-size: 13.5px;
}

.btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.tag {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tag--blue {
  background: var(--blue);
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid var(--accent-pale);
  padding-bottom: 3px;
}

.arrow-link:hover {
  border-color: var(--accent);
}

.text-link {
  font-size: 14.5px;
  font-weight: 600;
}

/* Portrait frames. The three crop numbers arrive as inline custom properties
   because they are per-photo data, not styling — see includes/helpers.php. */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--placeholder);
}

.frame--portrait {
  aspect-ratio: 3 / 4;
}

.frame--square {
  aspect-ratio: 1 / 1;
}

.frame > img {
  position: absolute;
  display: block;
  /* The crop deliberately oversizes the image past its frame, so the global
     img { max-width: 100% } must not clamp it back. */
  max-width: none;
  width: var(--crop-w, 100%);
  left: var(--crop-l, 0);
  top: var(--crop-t, 0);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.stat {
  padding: 22px 20px;
}

.stat__label {
  margin: 0 0 6px;
}

.stat__value {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.stat__value--accent {
  color: var(--accent);
}

/* -------------------------------------------------------------- header --- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(252, 252, 251, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
}

.header__bar {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 76px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo img {
  height: 46px;
  width: auto;
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav__link {
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--nav-inactive);
}

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

.nav__link.is-active {
  color: var(--ink);
  background: var(--surface-warm);
}

.nav__congress-set {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--surface-warm);
}

.nav__congress-set .nav__link {
  padding: 8px 10px;
}

.nav__congress-set .nav__link:hover,
.nav__congress-set .nav__link.is-active {
  background: var(--paper);
  color: var(--accent-deep);
}

.nav__cta {
  margin-left: 20px;
  padding: 11px 20px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav__cta:hover {
  background: var(--accent);
  color: var(--paper);
}

.nav-toggle {
  margin-left: auto;
  width: 46px;
  height: 46px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper);
  font-size: 17px;
  line-height: 1;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
}

.nav-panel {
  display: none;
  border-top: 1px solid var(--border-light);
  background: var(--paper);
  padding: 16px 24px 24px;
}

.nav-panel.is-open {
  display: block;
}

.nav-panel__list {
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  gap: 2px;
}

.nav-panel__link {
  padding: 14px 12px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

.nav-panel__link:hover {
  background: var(--surface-warm);
  color: var(--ink);
}

.nav-panel__congress-set {
  display: grid;
  gap: 2px;
  margin-block: 6px;
  padding: 6px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--surface-warm);
}

.nav-panel__congress-set .nav-panel__link:hover,
.nav-panel__congress-set .nav-panel__link[aria-current="page"] {
  background: var(--paper);
  color: var(--accent-deep);
}

@media (max-width: 1179px) {
  .nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }
}

.congress-marquee {
  overflow: hidden;
  background: var(--accent-deep);
  color: var(--paper);
}

.congress-marquee__track {
  display: flex;
  width: max-content;
  color: inherit;
  animation: congress-marquee-scroll 48s linear infinite;
}

.congress-marquee__track:hover,
.congress-marquee__track:focus-visible {
  color: var(--paper);
}

.congress-marquee__group {
  display: flex;
  flex: none;
}

.congress-marquee__item {
  display: flex;
  flex: none;
  align-items: center;
  gap: 18px;
  min-height: 36px;
  padding-inline: 28px;
  font-size: 12.5px;
  line-height: 1.3;
  white-space: nowrap;
}

.congress-marquee__item strong {
  font-weight: 700;
}

.congress-marquee__separator {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: var(--accent-light);
}

.congress-marquee:hover .congress-marquee__track,
.congress-marquee:focus-within .congress-marquee__track {
  animation-play-state: paused;
}

@keyframes congress-marquee-scroll {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .congress-marquee__track {
    width: 100%;
    animation: none;
    transform: none;
  }

  .congress-marquee__group {
    width: 100%;
  }

  .congress-marquee__item {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  .congress-marquee__item:not(:first-child),
  .congress-marquee__group[aria-hidden="true"] {
    display: none;
  }
}

/* -------------------------------------------------------------- footer --- */
.footer {
  background: var(--accent-deep);
  color: var(--paper);
  margin-top: auto;
}

.footer__congress {
  background: var(--accent);
  border-bottom: 1px solid var(--rule-dark);
}

.footer__congress-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(36px, 5vw, 56px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(32px, 6vw, 96px);
}

.footer__congress-meta {
  margin: 0 0 12px;
  color: var(--on-dark-78);
  font-size: 13px;
  font-weight: 700;
}

.footer__congress h2 {
  max-width: 24ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.footer__congress h2 + p {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--on-dark-78);
  font-size: 14.5px;
  line-height: 1.65;
}

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

.footer__button {
  min-height: 46px;
  padding: 13px 20px;
  border: 1px solid var(--rule-dark-strong);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
}

.footer__button--primary,
.footer__button--primary:hover,
.footer__button--primary:focus-visible {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--ink);
}

.footer__button--secondary,
.footer__button--secondary:hover,
.footer__button--secondary:focus-visible {
  color: var(--paper);
}

.footer__button--secondary:hover,
.footer__button--secondary:focus-visible {
  background: rgba(252, 252, 251, 0.1);
}

.footer__main {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(52px, 7vw, 84px) var(--gutter) clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: minmax(280px, 1.45fr) minmax(130px, 0.55fr) minmax(160px, 0.7fr) minmax(230px, 0.9fr);
  align-items: start;
  gap: clamp(36px, 5vw, 72px);
}

.footer__identity {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--paper);
}

.footer__identity:hover,
.footer__identity:focus-visible {
  color: var(--paper);
}

.footer__mark {
  display: grid;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  place-items: center;
  padding: 7px;
  border-radius: 8px;
  background: var(--paper);
}

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

.footer__identity strong,
.footer__identity span span {
  display: block;
}

.footer__identity strong {
  margin-bottom: 4px;
  font-size: 19px;
  letter-spacing: 0.04em;
}

.footer__identity span span {
  max-width: 28ch;
  color: var(--on-dark-72);
  font-size: 11.5px;
  line-height: 1.45;
}

.footer__statement {
  max-width: 23ch;
  margin: 34px 0 16px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.footer__blurb {
  max-width: 48ch;
  margin: 0;
  color: var(--on-dark-72);
  font-size: 13.5px;
  line-height: 1.7;
}

.footer__column h2,
.footer__contact h2 {
  margin: 3px 0 22px;
  color: var(--on-dark-60);
  font-size: 12px;
  font-weight: 700;
}

.footer__links {
  display: grid;
  gap: 13px;
}

.footer__links a {
  width: fit-content;
  color: var(--on-dark-78);
  font-size: 13.5px;
  line-height: 1.45;
}

.footer__links a:hover,
.footer__links a:focus-visible {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer__contact p {
  margin: 0 0 24px;
  color: var(--on-dark-72);
  font-size: 13.5px;
  line-height: 1.65;
}

.footer__email {
  display: inline-block;
  overflow-wrap: anywhere;
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.2;
}

.footer__email:hover,
.footer__email:focus-visible {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.footer__social {
  display: block;
  width: fit-content;
  margin-top: 22px;
  color: var(--on-dark-78);
  font-size: 13.5px;
  font-weight: 700;
}

.footer__social:hover,
.footer__social:focus-visible {
  color: var(--paper);
}

.footer__bottom {
  border-top: 1px solid var(--rule-dark-soft);
}

.footer__bottom-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 24px var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--on-dark-60);
}

.footer__legal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.footer__legal a {
  color: inherit;
}

.footer__legal a:hover {
  color: var(--paper);
}

@media (max-width: 1040px) {
  .footer__congress-inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__brand,
  .footer__contact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .footer__congress-actions,
  .footer__button {
    width: 100%;
  }

  .footer__main {
    grid-template-columns: 1fr;
  }

  .footer__brand,
  .footer__contact {
    grid-column: auto;
  }

  .footer__bottom-inner {
    flex-direction: column;
  }
}

.form-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.form-consent input {
  margin-top: 3px;
  accent-color: var(--accent);
}

.form-consent a,
.legal-page a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-page__header {
  max-width: 800px;
  padding-bottom: clamp(36px, 6vw, 64px);
  border-bottom: 1px solid var(--border-light);
}

.legal-page__updated {
  margin: 22px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.legal-page__content {
  max-width: 800px;
  display: grid;
  gap: 0;
}

.legal-page__content section {
  padding: 34px 0;
  border-bottom: 1px solid var(--border-light);
}

.legal-page__content h2 {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.2;
}

.legal-page__content p {
  margin: 0;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.75;
}

.legal-page__content p + p {
  margin-top: 14px;
}

.not-found {
  min-height: 62vh;
  display: grid;
  grid-template-columns: minmax(180px, .65fr) minmax(0, 1fr);
  gap: clamp(32px, 7vw, 100px);
  align-items: center;
}

.not-found__code {
  color: var(--accent);
  font-family: var(--serif);
  font-size: clamp(100px, 18vw, 240px);
  line-height: .75;
  letter-spacing: -.08em;
  opacity: .16;
}

.not-found__content {
  max-width: 660px;
}

@media (max-width: 700px) {
  .not-found {
    grid-template-columns: 1fr;
    align-content: center;
  }

  .not-found__code {
    font-size: 92px;
  }
}

/* ---------------------------------------------------------- home: hero --- */
.hero {
  background: var(--paper);
}

/*
 * The photo is never cropped horizontally, so all 20 members stay in frame.
 *
 * The height cap has to be width-relative, not viewport-relative: how much of
 * the source a `cover` crop keeps depends on the element's own aspect ratio,
 * so a vh cap on a wide, short window silently ate the seated row's faces.
 * At 30vw the visible band is a constant ~58% of the source — comfortably
 * outside the faces, which sit between 30% and 67%. max() lets the natural
 * ratio win on phones, where 30vw would leave an unreadable sliver.
 */
.hero__group {
  width: 100%;
  display: block;
  aspect-ratio: 1920 / 1002;
  max-height: max(30vw, 220px);
  object-fit: cover;
  object-position: 50% 42%;
  background: var(--placeholder);
}

.hero__copy {
  padding-block: clamp(44px, 5vw, 72px);
}

.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}

.hero__lead {
  margin: 28px 0 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-body);
}

/* Home ticker strip */
.ticker {
  background: var(--accent);
  color: var(--paper);
}

.ticker__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 26px var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.ticker__date {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.ticker__date strong {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.ticker__venue {
  font-size: 14px;
  color: var(--on-dark-72);
}

.ticker__name {
  font-size: 14.5px;
  color: var(--on-dark-90);
  flex: 1;
  min-width: 240px;
}

.ticker__cta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

/*
 * The congress countdown sits with the congress name, never beside the
 * abstract button — read together they implied you had until October to
 * submit, when submissions actually close on 31 August.
 */
.ticker__count {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--on-dark-60);
}

.ticker__deadline {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 18px;
  border-left: 1px solid var(--rule-dark);
  text-align: left;
}

.ticker__deadline-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-60);
}

.ticker__deadline-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--on-dark-90);
}

.ticker__deadline.is-urgent .ticker__deadline-value,
.ticker__deadline.is-urgent .ticker__deadline-label {
  color: var(--accent-light);
}

@media (max-width: 760px) {
  .ticker__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-left: 0;
  }

  .ticker__deadline {
    padding-left: 0;
    border-left: 0;
  }
}

/* Small live counter that rides next to a printed deadline. */
.countdown-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-pale);
  color: var(--accent-deep);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
}

.countdown-pill--urgent {
  background: #fdf1e7;
  border-color: #f0cfae;
  color: #9a4b12;
}

.intro__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: pretty;
}

.intro__photos {
  display: grid;
  gap: 20px;
}

.intro__photos img {
  width: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.value-card {
  padding: clamp(30px, 6vw, 44px) clamp(22px, 5vw, 36px) clamp(32px, 6vw, 48px);
}

.value-card:hover {
  background: #fff;
}

.value-card__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--accent-pale);
  background: var(--accent-tint);
  font-family: var(--serif);
  font-size: 18px;
  color: var(--accent);
}

.value-card__title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 24px 0 12px;
}

.value-card__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

.teaser__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  max-width: 16ch;
}

.teaser__poster {
  width: 100%;
  max-width: 420px;
  justify-self: center;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.date-list {
  display: grid;
  gap: 14px;
}

.date-list__row {
  display: flex;
  gap: 18px;
  align-items: baseline;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}

.date-list__label {
  font-size: 14px;
  color: var(--text-muted);
  flex: 1;
  min-width: 180px;
}

.date-list__value {
  font-size: 14.5px;
  font-weight: 600;
  text-align: right;
}

.divider-block {
  margin-top: 88px;
  padding-top: 56px;
  border-top: 1px solid var(--border);
}

.mini-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  background: var(--placeholder);
  display: block;
}

.mini-card__name {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 14px 0 6px;
}

.mini-card__topic {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

/*
 * Every portrait is a 640×796 (4:5) headshot cropped tight to the top of the
 * head. Forcing them into a square took the crop out of the middle and cut
 * foreheads off, so the card matches the source ratio instead.
 */
.person__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  background: var(--placeholder);
  border-radius: 4px;
  display: block;
}

.person__name {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 24px 0 8px;
}

.person__role {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ------------------------------------------------------ congress: hero --- */
/*
 * Light hero. The blurred poster still tints the background, but it now sits
 * under a paper-coloured wash instead of a near-black one.
 */
.chero {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  border-bottom: 1px solid var(--border-light);
}

.chero__bg {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  filter: blur(56px) saturate(1.2);
  opacity: 0.55;
}

.chero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(252, 252, 251, 0.97) 0%,
    rgba(252, 252, 251, 0.92) 46%,
    rgba(252, 252, 251, 0.72) 100%
  );
}

.chero__inner {
  position: relative;
}

.chero__copy {
  padding-block: clamp(64px, 7vw, 104px);
}

.chero__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

.chero__theme {
  margin: 30px 0 0;
  max-width: 50ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-body);
  font-family: var(--serif);
}

/*
 * Stacked by default, three across only when the hero column can actually
 * hold them. As a wrapping flex row, the long third label ("Deri te
 * kongresi") pushed the countdown onto a second line still carrying its
 * inner padding, so it sat indented and detached.
 *
 * The limit is the width of this column, not the viewport — at tablet sizes
 * the hero is still two columns, so a media query would guess wrong. Columns
 * are max-content, which keeps "9–10 tetor 2026" on one line; equal columns
 * squeezed it into two and broke the shared baseline.
 */
.chero__copy {
  container-type: inline-size;
}

.chero__stats {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 44px;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

.chero__stat {
  min-width: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-strong);
}

.chero__stat:last-child {
  border-bottom: 0;
}

.chero__stat p:last-child {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/*
 * The hero column caps at 552px on any desktop (--wrap is 1240, split in
 * two), so this threshold has to sit below that or the row would stack
 * everywhere. Three columns measure 524px at this padding, leaving enough
 * slack that a font fallback cannot tip them into overflow.
 */
@container (min-width: 530px) {
  .chero__stats {
    grid-template-columns: repeat(3, max-content);
  }

  .chero__stat {
    padding: 22px 20px;
    border-bottom: 0;
    border-right: 1px solid var(--border-strong);
  }

  .chero__stat:first-child {
    padding-left: 0;
  }

  .chero__stat:last-child {
    padding-right: 0;
    border-right: 0;
  }
}

.chero__stat-count {
  color: var(--blue);
}

.chero__speakers {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
  color: var(--ink);
  flex-wrap: wrap;
}

.chero__speakers:hover {
  color: var(--blue);
}

.avatars {
  display: flex;
  align-items: center;
  padding-left: 14px;
}

.avatar {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--paper);
  margin-left: -14px;
  background: var(--placeholder);
  flex: none;
}

.avatar img {
  position: absolute;
  display: block;
  max-width: none;
  width: var(--crop-w, 100%);
  left: var(--crop-l, 0);
  top: var(--crop-t, 0);
}

.chero__speakers-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.chero__poster-wrap {
  display: flex;
  justify-content: center;
  padding-block: clamp(40px, 5vw, 72px);
}

.chero__poster {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  border-radius: 10px;
  opacity: 0.95;
  mask-image: radial-gradient(120% 100% at 50% 45%, #000 52%, transparent 92%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 45%, #000 52%, transparent 92%);
}

.organisers {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  flex-wrap: wrap;
}

.organisers img {
  height: 96px;
  width: auto;
  display: block;
}

/* ---------------------------------------------------------- sponsors --- */
.sponsor-tier {
  background: #74530b;
}

.sponsor-tier--silver {
  background: #56636a;
}

.sponsor-tier--bronze {
  background: #805039;
}

.congress-sponsor {
  background: var(--accent-tint);
}

.congress-sponsor-compact {
  padding-block: clamp(44px, 5vw, 68px);
}

.congress-sponsor-compact__head {
  margin-bottom: 26px;
}

.congress-sponsor-compact__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(48px, 6vw, 76px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--border);
}

.sponsor-mini {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 230px;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.sponsor-mini--silver {
  background: #f1f3f3;
  border-color: #c7cdcf;
}

.sponsor-mini--bronze {
  background: #f8f0eb;
  border-color: #d5ad94;
}

.sponsor-mini__identity {
  display: block;
}

.sponsor-mini__identity img {
  display: block;
  width: auto;
  max-width: min(180px, 100%);
  height: 66px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 14px;
}

.sponsor-mini h3,
.sponsor-mini p {
  margin: 0;
}

.sponsor-mini h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
}

.sponsor-mini p {
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 13.5px;
}

.sponsor-mini__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 13px;
  margin-top: auto;
}

.sponsor-mini__contacts a,
.sponsor-mini__cta {
  color: var(--accent-deep);
  font-size: 12.5px;
  font-weight: 600;
}

.sponsor-mini__contacts a:hover,
.sponsor-mini__contacts a:focus-visible,
.sponsor-mini__cta:hover,
.sponsor-mini__cta:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sponsor-mini__cta {
  align-self: end;
  margin-top: auto;
}

@media (max-width: 700px) {
  .congress-sponsor-compact__grid {
    grid-template-columns: 1fr;
  }
}

.sponsors-hero__copy {
  display: grid;
  justify-items: start;
}

.sponsors-hero__badge-row {
  margin-bottom: 34px;
}

.sponsors-hero__link {
  margin-top: 34px;
}

.sponsors-hero__poster {
  max-width: 360px;
}

.sponsor-group {
  display: grid;
  gap: clamp(32px, 5vw, 54px);
}

.sponsor-group__head {
  display: grid;
  justify-items: start;
  gap: 18px;
}

.sponsor-group__head > * {
  margin: 0;
}

.sponsor-list {
  display: grid;
  gap: 48px;
}

.sponsor-entry {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.4fr);
  align-items: start;
  gap: clamp(40px, 8vw, 104px);
  padding-top: clamp(36px, 5vw, 60px);
  border-top: 1px solid var(--border);
}

.sponsor-entry__logo {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: clamp(22px, 4vw, 42px);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.sponsor-entry__logo img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
}

.sponsor-entry__media {
  display: grid;
  gap: 14px;
}

.sponsor-entry__contacts {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper);
}

.sponsor-entry__contact {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 13px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.sponsor-entry__contact + .sponsor-entry__contact {
  border-top: 1px solid var(--border-light);
}

.sponsor-entry__contact svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sponsor-entry__contact:hover,
.sponsor-entry__contact:focus-visible {
  background: var(--accent-tint);
  color: var(--accent-deep);
}

.sponsor-entry__content {
  display: grid;
  gap: 20px;
  max-width: 70ch;
}

.sponsor-entry__content > * {
  margin: 0;
}

.sponsors-footer-link {
  padding-block: 38px;
}

.sponsor-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 18px;
}

.sponsor-slot {
  display: grid;
  align-content: center;
  min-height: 210px;
  padding: clamp(24px, 4vw, 34px);
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
}

.sponsor-slot--silver {
  background: #f5f6f6;
  border-color: #aeb7ba;
}

.sponsor-slot--bronze {
  background: #faf4f0;
  border-color: #cba78f;
}

.sponsor-slot__number {
  margin-bottom: 20px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sponsor-slot__title {
  font-family: var(--serif);
  font-size: clamp(25px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.1;
}

.sponsor-slot__availability {
  margin-top: 24px;
  color: var(--accent-deep);
  font-size: 14px;
  font-weight: 700;
}

.sponsor-slot.is-confirmed {
  border-style: solid;
  border-color: #89979c;
  background: #f1f3f3;
  color: var(--ink);
}

.sponsor-slot.is-confirmed .sponsor-slot__availability {
  color: var(--accent-deep);
}

.sponsor-slot:hover,
.sponsor-slot:focus-visible {
  border-color: var(--accent);
}

.sponsor-slot.is-confirmed:hover {
  border-color: #89979c;
}

.sponsor-opportunities__intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  align-items: end;
  gap: clamp(28px, 6vw, 80px);
  margin-bottom: clamp(38px, 6vw, 64px);
}

.sponsor-opportunities__intro > * {
  margin: 0;
}

.sponsor-opportunities__intro .lead {
  max-width: 58ch;
}

.sponsor-package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 18px;
}

.sponsor-package {
  display: grid;
  align-content: start;
  min-height: 320px;
  padding: clamp(28px, 4vw, 38px);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--ink);
}

.sponsor-package--gold {
  background: #eceeec;
  border-color: #d2d5d3;
  color: var(--text-disabled);
}

.sponsor-package--gold .sponsor-package__places {
  color: var(--text-meta);
}

.sponsor-package--silver {
  background: #f1f3f3;
  border-color: #c7cdcf;
}

.sponsor-package--bronze {
  background: #f8f0eb;
  border-color: #d5ad94;
}

.sponsor-package__status {
  justify-self: start;
  margin-bottom: 34px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sponsor-package__name {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(27px, 2.7vw, 38px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sponsor-package__price {
  margin: 16px 0 0;
  font-size: 20px;
  font-weight: 700;
}

.sponsor-package__places {
  margin: 18px 0 0;
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.55;
}

.sponsor-package__cta {
  align-self: end;
  margin-top: 38px;
  font-size: 14px;
  font-weight: 700;
}

.sponsor-package:hover,
.sponsor-package:focus-visible {
  border-color: var(--accent);
  color: var(--accent-deep);
}

.sponsor-package.is-unavailable {
  cursor: not-allowed;
  filter: grayscale(1);
}

.sponsor-package.is-unavailable:hover {
  border-color: #d2d5d3;
  color: var(--text-disabled);
}

@media (prefers-reduced-motion: no-preference) {
  .sponsor-package {
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease;
  }

  .sponsor-package:hover {
    transform: translateY(-4px);
  }

  .sponsor-package.is-unavailable:hover {
    transform: none;
  }

  .sponsor-slot {
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease;
  }

  .sponsor-slot:hover {
    transform: translateY(-3px);
  }

  .sponsor-slot.is-confirmed:hover {
    transform: none;
  }
}

@media (max-width: 820px) {
  .sponsor-entry {
    grid-template-columns: 1fr;
  }

  .sponsor-entry__logo {
    min-height: 0;
  }
}

.block-divider {
  margin-top: 64px;
  padding-top: 44px;
  border-top: 1px solid var(--border-light);
}

.info-card {
  padding: clamp(28px, 6vw, 38px) clamp(22px, 5vw, 32px) clamp(30px, 6vw, 40px);
}

.info-card__title {
  margin: 0 0 24px;
}

.info-card__list {
  display: grid;
  gap: 12px;
}

.info-card__list p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.info-card__list strong {
  color: var(--ink);
  font-weight: 600;
}

.venue {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: clamp(26px, 6vw, 36px) clamp(22px, 5vw, 32px);
  background: var(--paper);
  display: grid;
  gap: 26px;
}

.venue__head {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.venue__logo {
  height: 88px;
  width: auto;
  display: block;
}

.venue__name {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.venue__address {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

.venue__map {
  width: 100%;
  height: 280px;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: block;
  background: var(--paper-alt);
}

/* Sponsorship table — the one horizontally scrolling element in the design. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  background: var(--paper);
}

.tiers {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.tiers th {
  text-align: left;
  padding: 26px 24px;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--placeholder-alt);
  vertical-align: top;
}

.tiers th:first-child {
  padding: 26px 28px;
  border-left: 0;
  width: 36%;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.tiers__name {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.tiers__price {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}

.tiers td {
  padding: 15px 24px;
  border-bottom: 1px solid var(--placeholder-alt);
  border-left: 1px solid var(--placeholder-alt);
  font-weight: 600;
  color: var(--ink);
}

/* Row headers carry the benefit name; they must not look like column heads. */
.tiers tbody th {
  padding: 15px 28px;
  border-left: 0;
  border-bottom: 1px solid var(--placeholder-alt);
  width: auto;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-body);
}

.tiers td.is-no {
  font-weight: 400;
  color: var(--text-disabled);
}

/* Two price columns instead of three sponsor tiers, so the table needs less
   room; the column whose deadline is live today is tinted. */
.tiers--fees {
  min-width: 520px;
}

.tiers--fees th:first-child {
  width: 52%;
}

.tiers--fees .tiers__name {
  font-size: 19px;
}

.tiers--fees td {
  font-size: 17px;
}

.tiers--fees .is-live {
  background: var(--accent-tint);
}

.tiers--fees thead .is-live .tiers__price {
  color: var(--accent-deep);
  font-weight: 700;
}

/* ------------------------------------------------------- registration ---- */
.steplist {
  counter-reset: step;
  list-style: none;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.steplist__item {
  counter-increment: step;
  position: relative;
  padding-left: 34px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-body);
}

.steplist__item::before {
  content: counter(step);
  position: absolute;
  top: 1px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--paper);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Each phase pairs its numbered instructions with the platform screens they
   describe, the way the printed manual does. */
.phases {
  display: grid;
  gap: clamp(36px, 5vw, 56px);
}

.phase {
  padding-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid var(--border);
}

.phase:first-child {
  padding-top: 0;
  border-top: 0;
}

.phase__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: clamp(24px, 3vw, 34px);
}

.phase__num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--accent-pale);
  background: var(--accent-tint);
  font-family: var(--serif);
  font-size: 17px;
  color: var(--accent);
}

.phase__title {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.phase__lead {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* A sequence stays in one column — steps read top to bottom, never across. */
.steplist--split {
  max-width: 72ch;
}

/* The screens get the full width of the section. They are authored to be read
   at ~320px; squeezing them into a narrow column makes the type illegible. */
.screengrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(26px, 3vw, 34px) clamp(20px, 2.5vw, 28px);
  margin-top: clamp(34px, 4vw, 48px);
}

.screencard {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.screencard__frame {
  position: relative;
  flex: 1;
  padding: 22px 20px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--paper);
}

.screencard__badge {
  position: absolute;
  top: -13px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.screencard figcaption {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---------------------------------------------- platform screen mock-ups --
   Schematic redraws of the OSK platform, not screenshots. Sized to stay
   readable — if you shrink these, shrink the grid's min track instead. */
.mock {
  display: grid;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-body);
}

.mock__brand {
  display: grid;
  justify-items: center;
  gap: 7px;
}

.mock__seal {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--accent-pale);
  background: var(--accent-tint);
}

.mock__brandname {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--text-meta);
}

.mock__h {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  text-align: center;
  color: var(--ink);
}

.mock__h--sm {
  font-size: 16px;
  text-align: left;
}

.mock__field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.mock__label {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-meta);
}

.mock__input {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--border-input);
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  color: var(--text-disabled);
  overflow: hidden;
}

.mock__grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.mock__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.mock__btn--sm {
  height: 24px;
  padding: 0 11px;
  font-size: 11px;
}

.mock__btn--ghost {
  border: 1px solid var(--border-input);
  background: #fff;
  color: var(--text-muted);
}

.mock__btnrow {
  display: flex;
  gap: 7px;
}

.mock__link {
  font-size: 12px;
  text-align: center;
  color: var(--text-meta);
}

/* The manual rings this line in red — it is the branch most people miss. */
.mock__link--flag b {
  padding: 2px 6px;
  border: 1px solid #e8b4b4;
  border-radius: 4px;
  background: #fdf0f0;
  color: #c0392b;
}

.mock__upload {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px dashed var(--border-strong);
  border-radius: 7px;
  font-size: 12px;
  color: var(--text-meta);
}

.mock__uploadicon {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--surface-warm);
}

.mock__table {
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
}

.mock__tr {
  display: grid;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--placeholder-alt);
  font-size: 11.5px;
}

.mock__tr:last-child {
  border-bottom: 0;
}

.mock__tr--head {
  background: var(--paper-alt);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-meta);
}

.mock__tr--docs { grid-template-columns: 1fr auto auto; }
.mock__tr--act  { grid-template-columns: 1.4fr auto auto auto; }

.mock__ok    { color: var(--accent); font-weight: 700; }
.mock__muted { color: var(--text-meta); }

.mock__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.mock__box {
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--accent-tint);
}

.mock__mailhead {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.mock__avatar {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-warm);
}

.mock__from {
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-meta);
}

.mock__from b {
  color: var(--text-muted);
  font-weight: 600;
}

/* The orange annotation boxes the client's manual uses to explain each email. */
.mock__callout {
  margin: 0;
  padding: 11px 12px;
  border: 1px solid #f0cfae;
  border-radius: 7px;
  background: #fdf1e7;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  color: #9a4b12;
}

.mock__body {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.mock__nav {
  display: grid;
  gap: 5px;
}

.mock__navitem {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.mock__navitem.is-active {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}

.mock__dot {
  flex: none;
  width: 12px;
  height: 12px;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: 0.55;
}

.mock__pill {
  justify-self: end;
  padding: 5px 11px;
  border: 1px solid #e8b4b4;
  border-radius: 999px;
  background: #fdf0f0;
  font-size: 11px;
  font-weight: 700;
  color: #c0392b;
}

.mock__pill--action {
  justify-self: start;
}

.mock__aim {
  display: flex;
  align-items: center;
  gap: 9px;
}

.mock__arrow {
  color: #c96a1c;
  font-size: 17px;
}

.mock__ghostrows {
  display: grid;
  gap: 6px;
}

.mock__ghostrows span {
  height: 11px;
  border-radius: 3px;
  background: var(--placeholder);
}

.mock__ghostrows span:nth-child(2) { width: 82%; }
.mock__ghostrows span:nth-child(3) { width: 64%; }

.mock__dialog {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #fff;
}

/* Click-to-copy bank values. The value stays the loudest thing in the row —
   the affordance is the icon and the hover tint, not a button chrome. */
.copy-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -4px -7px;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: right;
  cursor: pointer;
}

.copy-value:hover {
  border-color: var(--accent-pale);
  background: var(--accent-tint);
}

.copy-value__text {
  overflow-wrap: anywhere;
}

/* Two offset squares — the standard copy glyph, drawn in CSS. */
.copy-value__icon {
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--text-meta);
}

.copy-value__icon::before,
.copy-value__icon::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

.copy-value__icon::before { right: 0; top: 0; }
.copy-value__icon::after  { left: 0; bottom: 0; background: var(--paper); }

.copy-value:hover .copy-value__icon {
  color: var(--accent);
}

/* Confirmed state: the icon becomes a tick and the row tints green. */
.copy-value.is-copied {
  border-color: var(--accent-pale);
  background: var(--accent-tint);
  color: var(--accent-deep);
}

.copy-value.is-copied .copy-value__icon {
  color: var(--accent);
}

.copy-value.is-copied .copy-value__icon::before {
  width: 11px;
  height: 6px;
  right: 1px;
  top: 1px;
  border-width: 0 0 2px 2px;
  border-radius: 0;
  transform: rotate(-45deg);
}

.copy-value.is-copied .copy-value__icon::after {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .copy-value {
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
}

.notice-panel {
  padding: clamp(26px, 5vw, 34px) clamp(24px, 5vw, 38px);
  border: 1px solid var(--accent-pale);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--accent-tint);
}

.notice-panel__title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--accent-deep);
}

.notice-panel__body {
  margin: 0;
  max-width: 78ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-body);
}

/* --------------------------------------------------------- speakers ----- */
.speaker-card__name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 24px 0 10px;
}

.speaker-card__topic {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.speaker-card__more {
  display: inline-flex;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
}

.speaker-card__plus {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(12, 14, 16, 0.66);
  color: var(--paper);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.speaker-card__plus:hover {
  background: var(--accent);
}

/* Speaker modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(12, 14, 16, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 5vh, 64px) 20px;
  overflow-y: auto;
}

.modal[hidden] {
  display: none;
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: var(--paper);
  border-radius: 8px;
  padding: clamp(30px, 4vw, 54px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.modal__close:hover {
  background: var(--surface-warm-alt);
  color: var(--ink);
}

.modal__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  margin: 16px 0 30px;
}

.modal__body p {
  margin: 0 0 18px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-body);
}

.modal__rule {
  border: 0;
  border-top: 1px solid var(--border-light);
  margin: 34px 0 26px;
}

.modal__topic {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
  margin: 14px 0 22px;
}

body.is-locked {
  overflow: hidden;
}

/* -------------------------------------------------------- abstracts ----- */
.keydate {
  padding: clamp(26px, 6vw, 36px) clamp(20px, 5vw, 30px);
}

.keydate__label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.keydate__value {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.25;
}

.keydate__note {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.keydate__note.is-urgent {
  color: #9a4b12;
}

/*
 * Deadline banner — the abstracts page is where the CTA lands, so the closing
 * date has to be the first thing read, not a row in the calendar grid below.
 */
.deadline-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 32px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--accent-pale);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-tint);
}

.deadline-banner__note {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-deep);
}

.deadline-banner__date {
  font-size: 14.5px;
  color: var(--text-body);
}

.deadline-banner--urgent {
  border-color: #f0cfae;
  border-left-color: #c96a1c;
  background: #fdf1e7;
}

.deadline-banner--urgent .deadline-banner__note {
  color: #9a4b12;
}

.deadline-banner--closed {
  border-color: var(--border);
  border-left-color: var(--text-meta);
  background: #f5f5f3;
}

.deadline-banner--closed .deadline-banner__note {
  color: var(--text-muted);
}

/* Shown in place of the submission form outside the abstract window. */
.form-closed {
  padding: 24px 26px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--paper);
}

.form-closed__title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.form-closed__body {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

.form-closed__body:last-child {
  margin-bottom: 0;
}

.form-closed__body strong {
  color: var(--ink);
  font-weight: 600;
}

/* Congress-hero clarification: the big countdown is the congress, not the abstracts. */
.chero__deadline {
  margin: 28px 0 0;
  padding: 14px 18px;
  max-width: 62ch;
  border-radius: 8px;
  border: 1px solid var(--accent-pale);
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
}

.chero__deadline strong {
  font-weight: 700;
  color: var(--ink);
}

.chero__deadline.is-urgent {
  border-color: #f0cfae;
  border-left-color: #c96a1c;
  background: #fdf1e7;
}

.deflist {
  display: grid;
  gap: 14px;
  margin: 0;
}

.deflist__row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  border-bottom: 1px solid var(--placeholder-alt);
  padding-bottom: 14px;
}

.deflist__term {
  font-size: 14.5px;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 110px;
  margin: 0;
}

.deflist__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.form-panel {
  background: var(--paper-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: clamp(30px, 4vw, 44px) clamp(24px, 4vw, 40px);
  align-self: start;
  position: sticky;
  top: 100px;
}

.form {
  display: grid;
  gap: 22px;
}

.field {
  display: grid;
  gap: 8px;
}

.field__label {
  font-size: 13px;
  font-weight: 600;
}

.field input,
.field textarea {
  padding: 13px 14px;
  border: 1px solid var(--border-input);
  border-radius: 4px;
  background: var(--paper);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
  width: 100%;
}

.field textarea {
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
}

.field input[aria-invalid="true"] {
  border-color: #a63737;
}

.field__error {
  color: #8c2929;
  font-size: 12.5px;
  line-height: 1.45;
}

.chips {
  display: flex;
  gap: 8px;
}

.chip {
  flex: 1;
  padding: 11px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-input);
  background: var(--paper);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}

.chip.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--paper);
}

.dropzone {
  position: relative;
  display: grid;
  gap: 4px;
  border: 1px dashed var(--border-input);
  border-radius: 4px;
  padding: 26px;
  text-align: center;
  background: var(--paper);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-meta);
}

.dropzone:focus-within {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.dropzone.has-file {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-tint);
}

.dropzone__title {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.dropzone__meta {
  font-size: 12px;
  color: var(--text-meta);
}

.dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  opacity: 0;
  cursor: pointer;
}

.dropzone:hover {
  border-color: var(--accent);
}

.form__submit {
  margin-top: 6px;
  padding: 15px;
  width: 100%;
}

.form__submit:disabled {
  cursor: wait;
  opacity: 0.62;
}

.form-notice {
  display: grid;
  gap: 5px;
  margin: -4px 0 24px;
  padding: 16px 18px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 13.5px;
}

.form-notice--success {
  background: var(--accent-tint);
  border-color: var(--accent-pale);
  color: var(--accent-deep);
}

.form-notice--error {
  background: #fff7f6;
  border-color: #e8c7c3;
  color: #7b2424;
}

.hp-field {
  position: absolute;
  left: -9999px;
}

/* ------------------------------------------------------------- about ---- */
/*
 * The hero is five photos separated by slightly-off-vertical lines. The strip
 * is skewed as a whole and each photo is counter-skewed, so the flex `gap`
 * between panels becomes the slanted divider. The strip is deliberately wider
 * than the hero (and pulled left) so the skew wedges fall outside the frame.
 */
.about-hero {
  --lean: -4deg;
  --divider: 3px;
  --hero-h: clamp(320px, 42vw, 560px);
  /* tan(4deg) ≈ 0.07 of the height, rounded up, spare on each side */
  --wedge: calc(0.08 * var(--hero-h));
  position: relative;
  overflow: hidden;
  background: var(--ink-deep);
  height: var(--hero-h);
}

.about-hero__strip {
  position: absolute;
  inset: 0;
  display: flex;
  gap: var(--divider);
  width: calc(100% + 2 * var(--wedge));
  margin-left: calc(-1 * var(--wedge));
  transform: skewX(var(--lean));
}

.about-hero__panel {
  position: relative;
  flex: 1 1 0;
  overflow: hidden;
  background: var(--ink-deep);
}

.about-hero__panel img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--pos, 50% 40%);
  /* Undo the strip skew, then scale to cover the parallelogram it leaves. */
  transform: skewX(calc(-1 * var(--lean))) scale(1.14);
}

@media (max-width: 900px) {
  .about-hero {
    --divider: 2px;
  }

  .about-hero__panel:nth-child(n + 4) {
    display: none;
  }
}

@media (max-width: 600px) {
  .about-hero__panel:nth-child(n + 3) {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .about-hero__panel img {
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  .about-hero__panel:hover img {
    transform: skewX(calc(-1 * var(--lean))) scale(1.2);
  }
}

.about-hero__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(
    to top,
    rgba(10, 12, 14, 0.96) 30%,
    rgba(10, 12, 14, 0.7) 62%,
    rgba(10, 12, 14, 0) 100%
  );
}

.about-hero__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(24px, 3.5vw, 56px);
}

.about-hero__eyebrow {
  font-size: clamp(10px, 0.85vw, 12px);
  margin-bottom: clamp(8px, 1.2vw, 20px);
}

.about-hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 3.6vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0;
  max-width: 18ch;
}

.mv-card {
  padding: clamp(32px, 6vw, 52px) clamp(24px, 5vw, 44px);
}

.mv-card p {
  margin: 0 0 18px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

.mv-card p:last-child {
  margin-bottom: 0;
}

.president-row {
  padding: 20px 4px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/*
 * A circle has to crop the 4:5 source to a square. Centred, that ate the
 * forehead — the heads sit ~5% from the top of every file — so pull the crop
 * window up to keep the hairline in frame.
 */
.president-row img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  object-position: 50% 6%;
  border-radius: 50%;
  background: var(--placeholder);
  flex-shrink: 0;
}

.president-row__body {
  flex: 1;
}

.president-row__name {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.president-row__role {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-muted);
}

.president-row__years {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--accent);
  white-space: nowrap;
}

/* ----------------------------------------------------------- contact ---- */
.contact-card {
  padding: clamp(32px, 6vw, 52px) clamp(24px, 5vw, 44px);
}

.contact-card__value {
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

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

/* -------------------------------------------------------------- utils --- */
.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
.mt-32 { margin-top: 32px; }
.mt-36 { margin-top: 36px; }
.mt-40 { margin-top: 40px; }
.mt-44 { margin-top: 44px; }
.mt-64 { margin-top: 64px; }
.mb-12 { margin-bottom: 12px; }
.mb-20 { margin-bottom: 20px; }
.mb-22 { margin-bottom: 22px; }
.mb-24 { margin-bottom: 24px; }
.mb-28 { margin-bottom: 28px; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }
.mb-44 { margin-bottom: 44px; }
.mb-48 { margin-bottom: 48px; }
.mb-56 { margin-bottom: 56px; }
.mb-64 { margin-bottom: 64px; }

.badge-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}