/* ============================================================
   GLOBALIZÁCIA 2026 — Editorial light theme
   Off-white paper · near-black ink · restrained deep ink-blue
   Source Serif 4 + IBM Plex Sans
   Inspired by Stanford HAI · Royal Society · Aspen Ideas
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Type families */
  --f-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --f-sans:  "IBM Plex Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  /* Color */
  --paper:        #faf8f3;   /* off-white warm */
  --paper-2:      #f3efe6;   /* slightly deeper paper */
  --white:        #ffffff;
  --ink:          #161618;   /* near-black, slight warmth */
  --ink-2:        #38383d;
  --ink-3:        #5a5a62;
  --mute:         #7a7a82;
  --mute-2:       #a4a4ac;
  --line:         rgba(22, 22, 24, 0.10);
  --line-soft:    rgba(22, 22, 24, 0.06);
  --line-strong:  rgba(22, 22, 24, 0.2);

  /* Single sophisticated accent — deep ink blue, used sparingly */
  --accent:       #1c3a5b;
  --accent-hover: #142844;
  --accent-soft:  #e8edf3;
  --accent-text:  #1c3a5b;

  /* Validation / error — muted warm brick, tuned to the warm paper palette */
  --danger:       #9a3327;
  --danger-soft:  #f6e9e5;

  /* Geometry */
  --max-w:    1320px;
  --max-w-prose: 68ch;
  --pad-x:    clamp(1.25rem, 4.5vw, 4rem);
  --nav-h:    76px;

  /* Type scale — measured, not shouting */
  --fs-xs:  clamp(0.78rem, 0.74rem + 0.1vw, 0.84rem);
  --fs-sm:  clamp(0.88rem, 0.84rem + 0.14vw, 0.96rem);
  --fs-md:  clamp(1rem, 0.95rem + 0.18vw, 1.08rem);
  --fs-lg:  clamp(1.12rem, 1.05rem + 0.3vw, 1.28rem);
  --fs-xl:  clamp(1.32rem, 1.2rem + 0.5vw, 1.6rem);
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem);
  --fs-3xl: clamp(2.2rem, 1.7rem + 1.8vw, 3.2rem);
  --fs-4xl: clamp(2.8rem, 2rem + 3vw, 4.5rem);

  /* Motion */
  --ease:     cubic-bezier(.22,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast:   180ms;
  --t-base:   320ms;
  --t-slow:   720ms;
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--f-sans);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
  font-weight: 400;
  /* Sticky footer: body fills the viewport and #main grows so a short page
     (logout, password-reset confirmations, etc.) never leaves a strip of page
     background visible below the footer, on any screen size. */
  display: flex;
  flex-direction: column;
}
#main { flex: 1 0 auto; }
img, svg, video { max-width: 100%; display: block; }
/* Prevent long URLs / emails / unbreakable tokens from overflowing on small screens */
p, li, dd, address, figcaption, blockquote, .content a, .req-list a, .req-list span, .essay a, .t-step a, .meta a, address a, .payment dd, .field__error {
  overflow-wrap: anywhere;
  word-break: break-word;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--paper); }

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

/* ---------- 3. TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--f-serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); letter-spacing: -0.025em; line-height: 1.04; }
h2 { font-size: var(--fs-3xl); letter-spacing: -0.022em; line-height: 1.08; }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); font-family: var(--f-sans); font-weight: 500; letter-spacing: 0; }

p {
  margin: 0 0 1em;
  text-wrap: pretty;
  color: var(--ink-2);
}

.lede {
  font-family: var(--f-serif);
  font-size: var(--fs-xl);
  line-height: 1.4;
  color: var(--ink);
  font-weight: 400;
  max-width: 50ch;
}

.kicker {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

.eyebrow {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--mute);
}

em.serif-it { font-style: italic; font-family: var(--f-serif); }

/* ---------- 4. CONTAINER + SECTION ---------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  position: relative;
}
.container--narrow { max-width: 920px; }
.container--prose { max-width: calc(var(--max-w-prose) + var(--pad-x) * 2); }

.section {
  padding: clamp(4rem, 9vw, 9rem) 0;
  position: relative;
}
.section--tight { padding: clamp(3rem, 6vw, 6rem) 0; }
.section--paper-2 { background: var(--paper-2); }
.section--white { background: var(--white); }

/* Section header */
.sec-head {
  max-width: 56ch;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.sec-head .kicker { margin-bottom: 1rem; }
.sec-head h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem); }

/* ---------- 5. HEADER + NAV ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(250, 248, 243, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}
/* On the home page the hero is full-bleed image, header overlays transparently */
.site-header--overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  color: var(--paper);
}
.site-header--overlay.is-scrolled {
  background: rgba(250, 248, 243, 0.92);
  color: var(--ink);
}
.site-header--overlay:not(.is-scrolled) .nav__links a,
.site-header--overlay:not(.is-scrolled) .nav__signin,
.site-header--overlay:not(.is-scrolled) .brand,
.site-header--overlay:not(.is-scrolled) .hamburger {
  color: var(--paper);
}
.site-header--overlay:not(.is-scrolled) .brand__mark {
  background-image: url("../img/brand/logo-white.3b48da092405.png");
}
.site-header--overlay:not(.is-scrolled) .nav__signin svg { color: rgba(250, 248, 243, 0.85); }
.site-header--overlay:not(.is-scrolled) .btn--primary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.site-header--overlay:not(.is-scrolled) .btn--primary:hover {
  background: var(--white);
  border-color: var(--white);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  height: var(--nav-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  margin-right: auto;
  color: currentColor;
  white-space: nowrap;
}
.brand__mark {
  width: 36px; height: 36px;
  background-image: url("../img/brand/logo-blue.522bcd7a4673.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  display: block;
}
.brand__mark::before { display: none; }
.brand__name { display: inline-flex; flex-direction: column; line-height: 1.1; }
.brand__name b { font-weight: 400; font-size: 1rem; font-family: var(--f-serif); letter-spacing: -0.01em; }
.brand__name span { font-size: 0.7rem; font-family: var(--f-sans); color: var(--mute); margin-top: 2px; letter-spacing: 0.01em; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__links a {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink);
  padding: 0.5rem 0;
  position: relative;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--accent); }
.nav__item:not(.nav__item--has-menu) > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: currentColor;
}
/* Active underline for parent menu items (uses ::before so it won't clash with the chevron ::after) */
.nav__item--has-menu > a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: currentColor;
}

.nav__item { position: relative; }
.nav__item--has-menu > a { display: inline-flex; align-items: center; }
.nav__item--has-menu > a::after {
  content: "";
  flex: none;
  width: 4px; height: 4px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  margin-top: -2px;
  opacity: 0.55;
}

.nav__submenu {
  position: absolute;
  top: calc(100% + 4px);
  left: -1rem;
  min-width: 260px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
  transition-delay: 0.12s;
  box-shadow: 0 20px 40px -16px rgba(22, 22, 24, 0.15);
}
/* Invisible bridge across the 4px gap so the mouse never leaves the hover zone (prevents flicker) */
.nav__submenu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 6px;
}
.nav__item:hover .nav__submenu,
.nav__item:focus-within .nav__submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s;
}
.nav__submenu a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 4px;
  color: var(--ink);
  font-size: var(--fs-sm);
  transition: color var(--t-fast) var(--ease);
}
.nav__submenu a:hover,
.nav__submenu a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
}
/* Keep dropdown text dark even when the overlay header (home) uses light nav text */
.site-header--overlay:not(.is-scrolled) .nav__submenu a { color: var(--ink); }
.site-header--overlay:not(.is-scrolled) .nav__submenu a:hover,
.site-header--overlay:not(.is-scrolled) .nav__submenu a[aria-current="page"] { color: var(--accent); }

.nav__cta {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav__signin {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--t-fast) var(--ease);
}
.nav__signin:hover { color: var(--accent); }
.nav__signin svg { width: 14px; height: 14px; opacity: 0.7; }

/* ---------- 6. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.4rem;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  border: 1px solid currentColor;
  border-radius: 2px;
  position: relative;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
.btn--primary {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--ghost-light {
  background: transparent;
  color: var(--paper);
  border-color: rgba(250, 248, 243, 0.6);
}
.btn--ghost-light:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn--lg { padding: 0.95rem 1.6rem; font-size: var(--fs-md); }
.btn--block { width: 100%; }
.btn .arrow { transition: transform var(--t-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-weight: 500;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.link-arrow:hover { color: var(--accent-hover); border-color: var(--accent-hover); }
.link-arrow .arrow { transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover .arrow { transform: translateX(3px); }

/* ---------- 7. HAMBURGER + FULL-SCREEN MOBILE OVERLAY ---------- */
.hamburger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  background: transparent;
  position: relative;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  color: var(--ink);
}
.site-header--overlay:not(.is-scrolled) .hamburger { border-color: rgba(250, 248, 243, 0.5); }
.hamburger span {
  display: block;
  width: 18px; height: 1.5px;
  background: currentColor;
  position: relative;
  transition: transform var(--t-base) var(--ease), top var(--t-fast) var(--ease) 100ms, opacity var(--t-fast) var(--ease) 150ms;
}
.hamburger span::before, .hamburger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 1.5px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease), top var(--t-fast) var(--ease) 100ms;
}
.hamburger span::before { top: -6px; }
.hamburger span::after  { top: 6px; }
.hamburger[aria-expanded="true"] span { background: transparent; }
.hamburger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--paper);
  color: var(--ink);
  z-index: 80;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
}
.mobile-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 2;
  height: var(--nav-h);
  flex-shrink: 0;
}
.mobile-nav__close {
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--ink);
  border-radius: 2px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mobile-nav__close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mobile-nav__close svg { width: 18px; height: 18px; }

.mobile-nav__body {
  padding: clamp(2rem, 6vw, 3.5rem) var(--pad-x) 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mobile-nav__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
}
.mobile-nav__list > li {
  border-bottom: 1px solid var(--line);
  padding: 0.4rem 0;
}
.mobile-nav__list > li > a, .mobile-nav__group > a {
  display: block;
  font-family: var(--f-serif);
  font-size: clamp(1.6rem, 1.2rem + 2.4vw, 2.4rem);
  font-weight: 400;
  line-height: 1.1;
  padding: 0.7rem 0;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.mobile-nav__list > li > a:hover { color: var(--accent); }
.mobile-nav__list > li > a[aria-current="page"],
.mobile-nav__group > a[aria-current="page"] { color: var(--accent); }
.mobile-nav__sub {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mobile-nav__sub a {
  display: block;
  font-family: var(--f-sans);
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--mute);
  padding: 0.35rem 0;
  transition: color var(--t-fast) var(--ease);
}
.mobile-nav__sub a:hover { color: var(--accent); }
.mobile-nav__sub a[aria-current="page"] { color: var(--accent); font-weight: 500; }
.mobile-nav__foot {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* ---------- 8. HERO — full-bleed photograph ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--nav-h) + 1rem);
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
  background: var(--ink);
}
.hero__media {
  position: absolute;
  inset: -10% 0 -5% 0;
  z-index: -2;
  will-change: transform;
}
.hero__slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  animation: heroSlideshow 35s infinite;
}
.hero__slide:nth-child(1) { background-image: url("../img/hero/hero.560d81cb22d2.webp?v=4");   animation-delay: 0s; }
.hero__slide:nth-child(2) { background-image: url("../img/hero/hero-2.002d40886b69.webp?v=4"); animation-delay: 7s; }
.hero__slide:nth-child(3) { background-image: url("../img/hero/hero-4.f4ad2133d500.webp?v=4"); animation-delay: 14s; }
.hero__slide:nth-child(4) { background-image: url("../img/hero/hero-3.8d80787490b5.webp?v=4"); animation-delay: 21s; }
.hero__slide:nth-child(5) { background-image: url("../img/hero/hero-5.e8ad3acf141b.webp?v=4"); animation-delay: 28s; background-position: center; }
@keyframes heroSlideshow {
  0%   { opacity: 0; }
  4%   { opacity: 0.55; }
  20%  { opacity: 0.55; }
  24%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Hero slideshow keeps cross-fading even under reduced-motion: it is a pure
   opacity fade (no movement/parallax/scale), so it doesn't trigger motion
   discomfort, and the rotating imagery is content rather than decoration.
   Without this, OS-level "reduce motion" (common on Windows/macOS desktops)
   froze the hero on the first image while phones still cycled. */

/* Touch devices (phones + tablets, any orientation): the 5-layer cross-fading
   slideshow is too heavy for a mobile GPU and stutters intermittently. Show a
   single static hero image instead — no animation, no per-frame layer blending.
   Desktops (mouse pointer) keep the full slideshow. The max-width branch is a
   safety net so it also applies to any narrow viewport, not only touch devices. */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  .hero__slide { animation: none; }
  .hero__slide:nth-child(1) { opacity: 0.55; }
  .hero__slide:nth-child(n + 2) { display: none; }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(22, 22, 24, 0.5) 0%,
      rgba(22, 22, 24, 0.15) 35%,
      rgba(22, 22, 24, 0.55) 75%,
      rgba(22, 22, 24, 0.85) 100%);
  pointer-events: none;
}

.hero__top {
  padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 4rem));
  flex: 0 0 auto;
}
.hero__bottom {
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 5vw, 4rem);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--paper);
  letter-spacing: 0.01em;
  opacity: 0.9;
}
.hero__eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--paper);
}
.hero h1 {
  font-size: clamp(2.4rem, 1.8rem + 3.4vw, 5rem);
  font-weight: 400;
  color: var(--paper);
  margin: 1.5rem 0 1.5rem;
  max-width: 22ch;
  letter-spacing: -0.022em;
  line-height: 1.04;
}
.hero h1 em { font-style: italic; }
.hero__lede {
  font-family: var(--f-sans);
  font-size: var(--fs-lg);
  color: rgba(250, 248, 243, 0.85);
  max-width: 50ch;
  line-height: 1.5;
  margin: 0 0 2rem;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(250, 248, 243, 0.25);
}
.hero__meta-cell { text-align: center; }
.hero__meta-cell .lbl {
  display: block;
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: rgba(250, 248, 243, 0.65);
  margin-bottom: 0.4rem;
  text-transform: none;
  letter-spacing: 0;
}
.hero__meta-cell .val {
  display: block;
  font-family: var(--f-serif);
  font-size: var(--fs-lg);
  color: var(--paper);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.hero__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.hero__scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: rgba(250, 248, 243, 0.7);
  z-index: 1;
  animation: scrollHint 2.4s ease-in-out infinite;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, rgba(250,248,243,0.6), transparent);
}
@keyframes scrollHint {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
  50%      { transform: translate(-50%, 6px); opacity: 1; }
}
@media (max-width: 720px) {
  .hero__scroll { display: none; }
}

/* ---------- 9. KEY DATES (calm strip) ---------- */
.dates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.dates__cell {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 2rem);
  border-right: 1px solid var(--line);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
}
.dates__cell:last-child { border-right: 0; }
@media (max-width: 720px) {
  .dates__cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .dates__cell:last-child { border-bottom: 0; }
}
.dates__cell .lbl {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--mute);
  margin-bottom: 0.5rem;
  line-height: 1.35;
  text-wrap: balance;
}
.dates__cell .val {
  font-family: var(--f-serif);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.dates__cell--peak .val { color: var(--accent); }
.dates__cell--peak::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
}

/* Countdown row */
.countdown-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: end;
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .countdown-row { grid-template-columns: auto 1fr; }
}
.countdown-row__label {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--mute);
  max-width: 18ch;
  line-height: 1.4;
}
.countdown-row__label strong {
  display: block;
  font-family: var(--f-serif);
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.25rem;
  letter-spacing: -0.01em;
}
.cd {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: end;
  font-variant-numeric: tabular-nums;
}
.cd__cell {
  padding: 0 clamp(0.6rem, 1.5vw, 1.25rem);
  border-left: 1px solid var(--line);
  text-align: center;
}
.cd__cell:first-child { border-left: 0; padding-left: 0; }
.cd__num {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 3.5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.cd__lbl {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--mute);
  margin-top: 0.4rem;
}

/* ---------- 10. EDITORIAL SPLITS ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 7fr; }
  .split--reverse { grid-template-columns: 7fr 5fr; }
  .split--equal { grid-template-columns: 1fr 1fr; }
}
.split--reverse .split__lead { order: 2; }
.split__lead h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin-bottom: 1rem; }
.split__body p {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 60ch;
}
.split__body p + p { margin-top: 1rem; }

/* Image card (calm) */
.image-card {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 4/5;
}
.image-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.image-card:hover img { transform: scale(1.03); }
.image-card__cap {
  position: absolute;
  bottom: 1rem; left: 1rem;
  background: rgba(22, 22, 24, 0.7);
  color: var(--paper);
  padding: 0.4rem 0.75rem;
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
}

/* ---------- 11. TOPIC GRID (calm) ---------- */
.topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.topic {
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  transition: background var(--t-base) var(--ease);
}
.topic:hover { background: var(--white); }
.topic h4 {
  font-family: var(--f-serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  margin: 0 0 1rem;
  letter-spacing: -0.018em;
  color: var(--ink);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.topic ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0.4rem;
}
.topic li {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.5;
}

/* ---------- 12. CARD TILES (calm pillars) ---------- */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 720px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .pillars { grid-template-columns: repeat(4, 1fr); }
}
.pillar {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink);
  transition: opacity var(--t-base) var(--ease);
  color: inherit;
  min-height: 200px;
}
.pillar__num {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--mute);
  font-weight: 500;
}
.pillar h3 {
  font-family: var(--f-serif);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.018em;
  line-height: 1.15;
}
.pillar p {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin: 0;
  line-height: 1.55;
}
.pillar__more {
  margin-top: auto;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap var(--t-fast) var(--ease);
}
.pillar:hover .pillar__more { gap: 0.7rem; }
.pillar__more .arrow { transition: transform var(--t-fast) var(--ease); }
.pillar:hover .pillar__more .arrow { transform: translateX(2px); }

/* ---------- 13. FEATURE BAND (light bg, calm CTA) ---------- */
.feature-band {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(4rem, 8vw, 7rem) 0;
  position: relative;
  overflow: hidden;
}
.feature-band__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(40, 66, 255, 0.10), transparent 60%),
    linear-gradient(135deg, var(--ink) 0%, #0a1126 100%);
  overflow: hidden;
  z-index: 0;
}
.feature-band__bg::after {
  /* Dark veil so left-side text stays strongly contrasted, motif lives on the right */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(22,22,24,0.92) 0%, rgba(22,22,24,0.85) 30%, rgba(22,22,24,0.45) 55%, transparent 80%);
  z-index: 2;
  pointer-events: none;
}
.feature-band__bg .motif {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}
.motif-globe-tilt {
  /* DEPRECATED — kept as a no-op class for legacy markup. */
}

/* True 3D wireframe globe — pure HTML/CSS preserve-3d, no SVG. */
.globe-stage {
  position: absolute;
  top: 50%;
  right: 14%;
  transform: translateY(-50%);
  width: clamp(260px, 32vw, 440px);
  aspect-ratio: 1 / 1;
  perspective: 1400px;
  z-index: 1;
  pointer-events: none;
}
.globe-stage__silhouette {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(173, 196, 230, 0.55);
  border-radius: 50%;
  pointer-events: none;
}
.globe-stage__silhouette::after {
  /* subtle inner glow on the sphere — gives it depth */
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(120, 180, 255, 0.05), transparent 65%);
  pointer-events: none;
}
.globe {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: globeSpin 70s linear infinite;
}
.globe .meridian,
.globe .parallel {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(173, 196, 230, 0.45);
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
}
@keyframes globeSpin {
  from { transform: rotateZ(8deg) rotateX(-18deg) rotateY(0deg); }
  to   { transform: rotateZ(8deg) rotateX(-18deg) rotateY(360deg); }
}

/* Pins overlay — sits in front of the globe + dark veil, does NOT rotate.
   Subtle white connection nodes with thin dashed link lines, spanning the
   whole section so the network reaches out across the dark area. */
.globe-pins {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.pin {
  fill: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 0 6px rgba(220, 235, 255, 0.7));
}
.pin--pulse {
  transform-origin: center;
  transform-box: fill-box;
  animation: pinPulse 4.5s ease-in-out infinite;
}
.pin-link {
  fill: none;
  stroke: rgba(220, 235, 255, 0.4);
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
  animation: pinLinkFlow 18s linear infinite;
}
@keyframes pinPulse {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  50%      { transform: scale(1.55); opacity: 1; }
}
@keyframes pinLinkFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -45; }
}

.feature-band.is-paused .globe,
.feature-band.is-paused .pin--pulse,
.feature-band.is-paused .pin-link { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .globe, .pin--pulse, .pin-link { animation: none !important; }
}
.feature-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: end;
}
@media (min-width: 900px) {
  .feature-band__inner { grid-template-columns: 1.4fr auto; }
}
.feature-band h2 {
  color: var(--paper);
  font-size: clamp(1.9rem, 1.5rem + 2vw, 3rem);
  max-width: 22ch;
  line-height: 1.08;
}
.feature-band h2 em { font-style: italic; }
.feature-band p {
  color: rgba(250, 248, 243, 0.78);
  margin-top: 1rem;
  font-size: var(--fs-md);
  max-width: 50ch;
}
.feature-band__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ---------- 14. GALLERY ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.gal-item {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--paper-2);
  display: block;
}
.gal-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.gal-item:hover img { transform: scale(1.04); }
.gal-item__cap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(0deg, rgba(22, 22, 24, 0.65), transparent);
  color: var(--paper);
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.gal-item:hover .gal-item__cap { opacity: 1; transform: translateY(0); }

.gal-item--hidden { display: none; }
.gal-item--01 { grid-column: span 12; aspect-ratio: 16/9; }
.gal-item--02 { grid-column: span 7; aspect-ratio: 5/4; }
.gal-item--03 { grid-column: span 5; align-self: stretch; height: 100%; }
.gal-item--04 { grid-column: span 4; aspect-ratio: 1/1; }
.gal-item--05 { grid-column: span 4; aspect-ratio: 1/1; }
.gal-item--06 { grid-column: span 4; aspect-ratio: 1/1; }
@media (max-width: 720px) {
  .gal-item--01 { aspect-ratio: 16/10; }
  .gal-item--02, .gal-item--03 { grid-column: span 12; aspect-ratio: 4/3; }
  .gal-item--04, .gal-item--05, .gal-item--06 { grid-column: span 6; aspect-ratio: 1/1; }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(22, 22, 24, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
  padding: 1rem;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: min(1280px, 95vw);
  max-height: 85vh;
  transition: transform var(--t-base) var(--ease-out);
  transform: scale(0.98);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__nav, .lightbox__close {
  position: absolute;
  width: 48px; height: 48px;
  border: 1px solid rgba(250, 248, 243, 0.4);
  color: var(--paper);
  display: grid; place-items: center;
  background: transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  border-radius: 50%;
}
.lightbox__nav:hover, .lightbox__close:hover { background: var(--paper); color: var(--ink); }
.lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__counter {
  position: absolute;
  bottom: 1.25rem; left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: rgba(250, 248, 243, 0.8);
}
@media (max-width: 640px) {
  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox__nav--prev { left: 0.5rem; }
  .lightbox__nav--next { right: 0.5rem; }
}

/* ---------- 15. VENUE CARD ---------- */
.venue {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 900px) {
  .venue { grid-template-columns: 7fr 5fr; }
}
.venue__media {
  position: relative;
  aspect-ratio: 4/3;
  background: url("../img/venue/venue-aphrodite.b125b8a4cd04.webp") center/cover;
  overflow: hidden;
}
.venue__media::after {
  content: "Aphrodite Palace · Rajecké Teplice";
  position: absolute;
  bottom: 1rem; left: 1rem;
  background: rgba(22, 22, 24, 0.65);
  color: var(--paper);
  padding: 0.4rem 0.75rem;
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
}
.venue__body {
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}
.venue__body h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.venue__body address {
  font-style: normal;
  font-family: var(--f-serif);
  font-size: var(--fs-md);
  color: var(--ink);
  line-height: 1.6;
}

/* ---------- 16. CONTACT BLOCK ---------- */
.contact-block {
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 5vw, 5rem) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 720px) {
  .contact-block { grid-template-columns: 1fr auto; }
}
.contact-block h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  max-width: 24ch;
}
.contact-block h2 a {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--t-fast) var(--ease);
}
.contact-block h2 a:hover { color: var(--accent-hover); }

/* ---------- 17. FOOTER ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(250, 248, 243, 0.85);
  padding: clamp(2rem, 3vw, 2.75rem) 0 1rem;
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
  border-bottom: 1px solid rgba(250, 248, 243, 0.15);
}
@media (min-width: 720px) {
  .footer-top { grid-template-columns: 1.6fr 1fr; }
}
.footer-top h2 {
  color: var(--paper);
  font-size: clamp(1.8rem, 1.4rem + 2vw, 3rem);
  max-width: 18ch;
  line-height: 1.1;
}
.footer-top h2 em { font-style: italic; }
.footer-top__cta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: start;
}
@media (min-width: 720px) {
  .footer-top__cta { align-items: end; justify-content: end; }
}

.footer-partners {
  padding-top: 0;
  margin-bottom: clamp(1rem, 1.5vw, 1.5rem);
}
.footer-partners h5 {
  margin: 0 0 0.75rem 0;
}
.footer-partners__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.partner-card {
  aspect-ratio: 3/2;
  background: var(--paper);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  min-width: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.9;
}
.partner-card:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.partner-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.partner-card img.is-lg { transform: scale(1.3); }
@media (max-width: 768px) {
  .footer-partners__grid { grid-template-columns: repeat(3, 1fr); }
  /* Drop the 1.3x upscale on smaller screens so logos stay inside their card. */
  .partner-card img.is-lg { transform: none; }
  /* MGM / Interway artwork fills its whole canvas (no internal padding), so with
     the is-lg upscale off it fills the card edge-to-edge while the padded logos
     look smaller. Scale them down so all six logos share the same breathing room.
     (transform is used instead of max-height: a %-height on an object-fit image
     inside an aspect-ratio flex card is unreliable / ignored by browsers.) */
  .partner-card img.is-tight { transform: scale(0.78); }
}
@media (max-width: 480px) {
  .footer-partners__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .partner-card { padding: 0.5rem 0.6rem; overflow: hidden; }
}

.footer-grid {
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
}
.footer-contact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: center;
}
.contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(250, 248, 243, 0.78);
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.contact-item a { color: inherit; }
.contact-item a:hover { color: var(--paper); }
.contact-item__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(250, 248, 243, 0.5);
}
.contact-item__sep {
  color: rgba(250, 248, 243, 0.4);
  margin: 0 0.15rem;
}
.footer h5 {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: var(--fs-xs);
  color: rgba(250, 248, 243, 0.6);
  margin: 0 0 1rem;
  letter-spacing: 0.02em;
}
.footer p, .footer a {
  color: rgba(250, 248, 243, 0.78);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.footer a:hover { color: var(--paper); }
.footer__contact p { margin: 0 0 0.4rem; }
.footer__social { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.footer__social a {
  width: 38px; height: 38px;
  border: 1px solid rgba(250, 248, 243, 0.3);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.footer__social a:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.footer__social svg { width: 14px; height: 14px; fill: currentColor; }

.footer-bot {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  padding-top: 1rem;
  border-top: 1px solid rgba(250, 248, 243, 0.15);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: rgba(250, 248, 243, 0.5);
}

/* Cookies notice */
.cookies {
  position: fixed;
  bottom: 1rem; left: 1rem; right: 1rem;
  max-width: 460px;
  background: var(--ink);
  color: var(--paper);
  padding: 1rem 1.25rem;
  border-radius: 4px;
  display: flex;
  gap: 1rem;
  align-items: center;
  z-index: 70;
  transform: translateY(150%);
  transition: transform var(--t-slow) var(--ease-out);
  box-shadow: 0 20px 40px -16px rgba(22, 22, 24, 0.4);
}
.cookies.is-visible { transform: translateY(0); }
.cookies p { margin: 0; font-size: var(--fs-sm); color: rgba(250, 248, 243, 0.85); flex: 1; }
.cookies .btn { padding: 0.55rem 1rem; font-size: var(--fs-xs); flex-shrink: 0; min-height: 44px; }

/* ---------- 18. PAGE HEADER (inner pages) ---------- */
.page-header {
  background: var(--paper);
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--mute);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.crumbs a { color: var(--mute); transition: color var(--t-fast) var(--ease); }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep::before { content: "/"; opacity: 0.5; }
.crumbs span:not(.sep):last-child { color: var(--ink); }
.page-header h1 {
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4.5rem);
  max-width: 18ch;
  margin: 0;
  letter-spacing: -0.025em;
}
.page-header h1 em { font-style: italic; }
.page-header__lede {
  max-width: 56ch;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  font-family: var(--f-serif);
  color: var(--ink);
  font-size: var(--fs-xl);
  line-height: 1.4;
}

/* ---------- 19. CONTENT (prose blocks) ---------- */
.content {
  max-width: var(--max-w-prose);
}
.content p {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 1.15em;
}
.content p strong { color: var(--ink); font-weight: 600; }
.content > h2 {
  margin: clamp(3rem, 5vw, 4rem) 0 1.25rem;
  padding-top: clamp(2rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
  letter-spacing: -0.022em;
}
.content > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.content h3 {
  margin: 2rem 0 0.75rem;
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
}
.content ul, .content ol { padding-left: 1.4rem; color: var(--ink-2); margin: 0 0 1.15em; }
.content li { margin: 0.4rem 0; line-height: 1.65; }
.content li::marker { color: var(--accent); }
.content a { color: var(--accent); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.content a:hover { color: var(--accent-hover); }

/* Tables */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  margin: clamp(2rem, 3.5vw, 2.75rem) 0;
  background: var(--white);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 480px;
}
table th, table td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.55;
}
table th {
  font-family: var(--f-sans);
  font-weight: 500;
  color: var(--ink);
  background: var(--paper-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
}
table tr:last-child td { border-bottom: 0; }
table tr:hover td { background: var(--paper); }
table td strong { color: var(--ink); font-weight: 600; }

/* Org list */
.org-list { display: grid; gap: 0; border: 1px solid var(--line); margin: 1.5rem 0; background: var(--white); }
.org-list__item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  align-items: baseline;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast) var(--ease);
}
.org-list__item:last-child { border-bottom: 0; }
.org-list__item:hover { background: var(--paper); }
.org-list__name { color: var(--ink); font-weight: 500; }
.org-list__tel { font-family: var(--f-serif); font-size: var(--fs-sm); color: var(--accent); }

/* Person */
.person {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) { .person { grid-template-columns: auto 1fr; gap: 2rem; align-items: start; } }
.person__avatar {
  width: 80px; height: 80px;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--f-serif);
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  border-radius: 50%;
  flex-shrink: 0;
}
.person__name {
  font-family: var(--f-serif);
  font-size: var(--fs-xl);
  color: var(--ink);
  margin: 0 0 0.25rem;
  letter-spacing: -0.018em;
  line-height: 1.2;
}
.person__title {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--accent);
  margin: 0 0 0.85rem;
  font-weight: 500;
}
.person__bio {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0 0 0.75rem;
}
.person__links {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  font-size: var(--fs-xs);
  margin-top: 0.5rem;
}
.person__links a {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  word-break: break-all;
}

/* Steps */
.steps {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.1rem 1.25rem;
  background: var(--paper);
  color: var(--ink-2);
  font-size: var(--fs-md);
  line-height: 1.6;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--f-serif);
  font-size: var(--fs-lg);
  color: var(--accent);
  width: auto;
  letter-spacing: -0.01em;
}
.steps li a { color: var(--accent); border-bottom: 1px solid currentColor; word-break: break-all; }

/* Downloads */
.downloads { display: grid; gap: 1px; margin: 1.5rem 0; border: 1px solid var(--line); background: var(--line); }
.download {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1.25rem;
  background: var(--paper);
  transition: background var(--t-fast) var(--ease);
}
.download:hover { background: var(--white); }
.download__icon {
  width: 52px; height: 52px;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0.04em;
  border-radius: 2px;
}
.download__body { flex: 1; min-width: 0; }
.download__name {
  font-family: var(--f-serif);
  font-size: var(--fs-lg);
  color: var(--ink);
  margin: 0 0 0.2rem;
  letter-spacing: -0.018em;
}
.download__meta { font-family: var(--f-sans); font-size: var(--fs-xs); color: var(--mute); word-break: break-all; }
.download__action {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent);
  flex-shrink: 0;
  transition: gap var(--t-fast) var(--ease);
}
@media (max-width: 560px) {
  .download { flex-wrap: wrap; gap: 0.55rem 1rem; padding: 1rem; }
  .download__body { flex: 1 1 150px; }
  .download__name { font-size: var(--fs-md); overflow-wrap: break-word; word-break: normal; }
  .download__action { flex-basis: 100%; padding-left: calc(52px + 1rem); }
}

/* Fee cards */
.fee-pair {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
  grid-template-columns: 1fr;
  margin: 1.5rem 0 2.5rem;
}
@media (min-width: 720px) { .fee-pair { grid-template-columns: 1fr 1fr; } }
.fee {
  padding: clamp(2rem, 4vw, 2.75rem);
  background: var(--paper);
}
.fee--accent {
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
}
.fee__label {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--mute);
  font-weight: 500;
}
.fee__price {
  font-family: var(--f-serif);
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0.75rem 0 0.85rem;
  color: var(--ink);
}
.fee--accent .fee__price { color: var(--accent); }
.fee__desc { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; line-height: 1.5; }

/* Payment box */
.payment {
  border: 1px solid var(--line);
  margin: 1.5rem 0;
  background: var(--white);
}
.payment .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.payment .row:last-child { border-bottom: 0; }
@media (min-width: 600px) {
  .payment .row { grid-template-columns: 220px 1fr; gap: 1rem; align-items: baseline; }
}
.payment dt { font-family: var(--f-sans); font-size: var(--fs-sm); color: var(--mute); font-weight: 500; margin: 0; }
.payment dd { margin: 0; color: var(--ink); font-family: var(--f-serif); word-break: break-all; }

/* ---------- 20. AUTH ---------- */
.auth {
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  grid-template-columns: 1fr;
  background: var(--paper);
}
@media (min-width: 960px) { .auth { grid-template-columns: 1fr 1.05fr; } }

.auth__hero {
  display: none;
  padding: clamp(3rem, 5vw, 5rem) clamp(2.5rem, 4vw, 4rem);
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  background: var(--ink);
  color: var(--paper);
}
@media (min-width: 960px) { .auth__hero { display: flex; } }
.auth__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/hero/register-hero.a4aa9df47bf8.webp?v=4") center/cover;
  opacity: 0.5;
  z-index: 0;
}
.auth__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 28, 38, 0.72) 0%,
    rgba(20, 28, 38, 0.32) 32%,
    rgba(20, 28, 38, 0.32) 60%,
    rgba(20, 28, 38, 0.78) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.auth__hero .inner { position: relative; z-index: 1; max-width: 480px; }
.auth__hero--signin::before { background-image: url("../img/hero/signin-hero.afae71ce3c9b.webp?v=4"); }
.auth__hero--signin::after {
  background: linear-gradient(
    to bottom,
    rgba(20, 28, 38, 0.70) 0%,
    rgba(20, 28, 38, 0.18) 26%,
    rgba(20, 28, 38, 0.10) 48%,
    rgba(20, 28, 38, 0.20) 70%,
    rgba(20, 28, 38, 0.70) 100%
  );
}
.auth__hero .kicker { color: rgba(250, 248, 243, 0.85); }
.auth__hero .kicker::before { background: rgba(250, 248, 243, 0.85); }
.auth__hero h2 {
  color: var(--paper);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  margin: 1.25rem 0 1rem;
  letter-spacing: -0.025em;
  line-height: 1.08;
}
.auth__hero h2 em { font-style: italic; }
.auth__hero p { color: rgba(250, 248, 243, 0.82); font-size: var(--fs-md); }
.auth__hero .stat-row {
  position: relative; z-index: 1;
  display: flex; gap: 2.5rem; flex-wrap: wrap;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(250, 248, 243, 0.3);
}
.auth__hero .stat .num {
  font-family: var(--f-serif);
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.8rem);
  display: block;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--paper);
}
.auth__hero .stat .lbl {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: rgba(250, 248, 243, 0.65);
  margin-top: 0.45rem;
  display: block;
}

.auth__form-wrap {
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth__form { width: 100%; max-width: 540px; }
.auth__form .kicker { margin-bottom: 1rem; }
.auth__form h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  margin: 0 0 1rem;
  letter-spacing: -0.025em;
}
.auth__form h1 em { font-style: italic; }
.auth__form > p.lede { margin: 0 0 2rem; }

.form-grid { display: grid; gap: 1.1rem; }
.form-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .form-row--two { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
/* The `.field` display above beats the UA `[hidden]` rule, so a hidden field
   would still show — re-assert hiding for fields toggled via the hidden attribute
   (e.g. the Preferred Roommate field, shown only for a Double room). */
.field[hidden] { display: none; }
/* Custom file input control (English "Choose file" + filename label), replacing
   the browser-localized native widget. Built by initFileInputs() in main.js. */
.file-ctrl { display: inline-flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.file-ctrl > input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.file-ctrl__btn {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 0.62rem 1.05rem;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.file-ctrl__btn:hover { border-color: var(--accent); color: var(--accent); }
.file-ctrl__name { color: var(--mute); font-size: var(--fs-sm); word-break: break-word; }

/* Form error notice — a prominent toast shown when a submitted form has validation
   errors (on long forms the highlighted fields are often below the fold, so this
   makes clear the form did NOT go through). Built by initFormErrorToast() in main.js. */
.form-alert {
  position: fixed;
  top: calc(var(--nav-h, 72px) + 1rem);
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: max-content;
  max-width: min(460px, calc(100vw - 2rem));
  background: var(--white);
  border: 1px solid var(--danger);
  border-left: 4px solid var(--danger);
  border-radius: 11px;
  box-shadow: 0 20px 55px -18px rgba(22, 22, 24, 0.4);
  padding: 0.95rem 1.1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.form-alert.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.form-alert__icon { color: var(--danger); flex-shrink: 0; margin-top: 1px; }
.form-alert__icon svg { width: 20px; height: 20px; display: block; }
.form-alert__text { font-family: var(--f-sans); font-size: var(--fs-sm); color: var(--ink); line-height: 1.5; }
.form-alert__close { background: none; border: 0; color: var(--mute); cursor: pointer; padding: 2px; flex-shrink: 0; line-height: 0; }
.form-alert__close:hover { color: var(--ink); }
.field label {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--ink);
  font-weight: 500;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field select {
  background: var(--white);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  padding: 0.78rem 0.95rem;
  font-size: var(--fs-md);
  font-family: var(--f-sans);
  border-radius: 2px;
  width: 100%;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input::placeholder { color: var(--mute-2); }
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field .hint { font-family: var(--f-sans); font-size: var(--fs-xs); color: var(--mute); }

/* ---- Password show/hide toggle ---- */
.pw-wrap { position: relative; display: flex; }
.field .pw-wrap input { padding-right: 2.9rem; }
.pw-toggle {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--mute);
  transition: color var(--t-fast) var(--ease);
}
.pw-toggle:hover { color: var(--ink); }
.pw-toggle:focus-visible {
  outline: none;
  color: var(--accent);
}
.pw-toggle svg { width: 19px; height: 19px; }
.pw-toggle__off { display: none; }
.pw-toggle.is-on .pw-toggle__eye { display: none; }
.pw-toggle.is-on .pw-toggle__off { display: block; }

/* ---- Validation / error states ---- */
.field__error {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--danger);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.1rem;
}
.field__error::before {
  content: "";
  width: 13px; height: 13px;
  flex-shrink: 0;
  background: var(--danger);
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v7h-2V7zm0 9h2v2h-2v-2z'/%3E%3C/svg%3E");
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v7h-2V7zm0 9h2v2h-2v-2z'/%3E%3C/svg%3E");
}
.field--error input[type="text"],
.field--error input[type="email"],
.field--error input[type="password"] {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.field--error input:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}
.field--error > label { color: var(--danger); }
/* Participation type group error */
.field--error .choices { border-color: var(--danger); }
.field--error .choice__title::before { border-color: var(--danger); }

/* Choices */
.choices { display: grid; gap: 0; border: 1px solid var(--line); background: var(--white); border-radius: 2px; }
@media (min-width: 720px) { .choices:not(.choices--inline) { grid-template-columns: 1fr; } }
.choice {
  position: relative;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.7rem;
  row-gap: 0.15rem;
}
.choice:last-child { border-bottom: 0; }
@media (min-width: 720px) {
  .choice { border-bottom: 0; border-right: 1px solid var(--line); }
  .choice:last-child { border-right: 0; }
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__title {
  font-family: var(--f-serif);
  font-size: var(--fs-md);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: -0.018em;
}
.choice__title::before {
  content: "";
  width: 14px; height: 14px;
  border: 1.5px solid var(--mute);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.choice__desc { font-size: var(--fs-sm); color: var(--mute); margin: 0; flex-basis: 100%; }
.choice:hover { background: var(--paper); }
.choice:has(input:checked) { background: var(--accent-soft); }
.choice:has(input:checked) .choice__title { color: var(--accent); }
.choice:has(input:checked) .choice__title::before {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 40%, transparent 45%);
}

.form-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap;
}
.form-foot a, .auth__form a { color: var(--accent); border-bottom: 1px solid currentColor; }
.form-foot a:hover, .auth__form a:hover { color: var(--accent-hover); }

.success-card {
  max-width: 580px; margin: 0 auto; text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--line);
  background: var(--white);
}
.success-card__icon {
  width: 64px; height: 64px;
  margin: 0 auto 1.5rem;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: grid; place-items: center;
}
.success-card__icon svg { width: 28px; height: 28px; }

/* ---------- 21. REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }

/* ---------- 22. RESPONSIVE NAV BREAKS ---------- */
@media (max-width: 1200px) {
  .nav__links, .nav__cta { display: none; }
  .hamburger { display: inline-flex; }
}

/* ---------- 23. UTILS ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1rem;
  border-radius: 2px;
  z-index: 200;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===========================================================
   INNER-PAGE COMPONENTS — same design language as the landing,
   applied to long-form content pages.
   =========================================================== */

/* Intro band — accent-tinted strip below page-header */
.intro-band {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.intro-band__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: end;
}
@media (min-width: 900px) {
  .intro-band__inner { grid-template-columns: 1.6fr 1fr; }
}
.intro-band__lede {
  font-family: var(--f-serif);
  font-size: var(--fs-xl);
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.012em;
  max-width: 50ch;
}
.intro-band__side {
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--accent);
}
.intro-band__side .lbl {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--mute);
  margin-bottom: 0.3rem;
}
.intro-band__side .val {
  font-family: var(--f-serif);
  font-size: var(--fs-lg);
  color: var(--accent);
  line-height: 1.3;
}

/* Fact strip — horizontal stats */
.fact-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.fact-strip--inset { background: var(--paper); margin: clamp(2rem, 4vw, 3rem) 0; }
.fact {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.5rem);
  border-right: 1px solid var(--line);
}
.fact:last-child { border-right: 0; }
@media (max-width: 720px) {
  .fact { border-right: 0; border-bottom: 1px solid var(--line); }
  .fact:last-child { border-bottom: 0; }
}
.fact__num {
  font-family: var(--f-serif);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}
.fact__num small { font-size: 0.5em; color: var(--mute); letter-spacing: 0; margin-left: 0.2rem; }
.fact__lbl {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.4;
}

/* Pull quote */
.pull-quote {
  margin: clamp(2.5rem, 5vw, 4rem) 0;
  padding: 0 0 0 clamp(1.5rem, 3vw, 2.5rem);
  border-left: 2px solid var(--accent);
  font-family: var(--f-serif);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.018em;
  color: var(--ink);
  font-weight: 400;
  max-width: 36ch;
}
.pull-quote__attr {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--mute);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Callout / accent tinted info card */
.callout {
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin: clamp(2rem, 3vw, 2.75rem) 0;
}
.callout h3 {
  font-family: var(--f-serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  margin: 0 0 0.75rem;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.callout p { color: var(--ink-2); margin: 0 0 0.75rem; font-size: var(--fs-md); line-height: 1.65; }
.callout p:last-child { margin-bottom: 0; }
.callout ol, .callout ul { padding-left: 1.4rem; margin: 0.5rem 0; color: var(--ink-2); }
.callout li { margin: 0.4rem 0; line-height: 1.6; }
.callout li::marker { color: var(--accent); }

/* Numbered section heading (inner pages) */
.h-num {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 1rem 1.25rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.h-num:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.h-num__num {
  font-family: var(--f-serif);
  font-size: var(--fs-sm);
  color: var(--accent);
  letter-spacing: 0;
  font-weight: 400;
  font-style: italic;
}
.h-num__text {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}

/* Layout with sticky aside (TOC) */
.layout-aside {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (min-width: 1000px) {
  .layout-aside { grid-template-columns: 1fr 240px; }
  .layout-aside--reverse { grid-template-columns: 240px 1fr; }
}
.layout-aside__aside {
  position: relative;
}
@media (min-width: 1000px) {
  .layout-aside__aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
}
.aside-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 1.25rem 1.35rem;
}
.aside-card h4 {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--mute);
  margin: 0 0 0.85rem;
  letter-spacing: 0.04em;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { margin: 0; }
.toc-list a {
  display: block;
  padding: 0.45rem 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.4;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.toc-list a:hover { color: var(--accent); transform: translateX(3px); }

/* Large lede / featured opening paragraph */
.prose-lede {
  font-family: var(--f-serif);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);
  line-height: 1.4;
  color: var(--ink);
  max-width: 56ch;
  margin: 0 0 2rem;
  letter-spacing: -0.012em;
  font-weight: 400;
}

/* 2-column prose */
.prose-cols { column-gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) {
  .prose-cols--2 { column-count: 2; }
}
.prose-cols p { break-inside: avoid; margin: 0 0 1em; }

/* Two-column list (committees compact) */
.list-2col {
  list-style: none; padding: 0; margin: 1.5rem 0;
  column-count: 1; column-gap: 2rem;
}
@media (min-width: 720px) { .list-2col { column-count: 2; } }
.list-2col li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
  page-break-inside: avoid;
}
.list-2col li strong {
  display: block;
  font-family: var(--f-serif);
  font-size: var(--fs-md);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.018em;
  margin-bottom: 0.2rem;
}
.list-2col li span {
  display: block;
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--mute);
  line-height: 1.4;
}
.list-2col li em.country {
  font-family: var(--f-sans);
  font-style: normal;
  font-size: 0.72rem;
  color: var(--accent);
  display: inline-block;
  margin-top: 0.2rem;
  letter-spacing: 0.02em;
}

/* Requirements / process — accent-numbered ordered list */
.req-list {
  list-style: none;
  counter-reset: req;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}
.req-list li {
  counter-increment: req;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  align-items: start;
  min-width: 0;
}
.req-list li::before {
  content: counter(req, decimal-leading-zero);
  font-family: var(--f-serif);
  font-size: var(--fs-lg);
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.req-list li strong { display: block; color: var(--ink); font-family: var(--f-serif); font-size: var(--fs-md); letter-spacing: -0.01em; font-weight: 400; margin-bottom: 0.2rem; }
.req-list li span { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }

/* Image strip — small images horizontal */
.image-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.image-strip .image-card { aspect-ratio: 4/3; }

/* Stats / facts inline list */
.kv-list {
  list-style: none; padding: 0; margin: 1rem 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.kv-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.kv-list .k { font-family: var(--f-sans); font-size: var(--fs-sm); color: var(--mute); }
.kv-list .v { font-family: var(--f-serif); font-size: var(--fs-md); color: var(--ink); letter-spacing: -0.01em; }

/* Section closing CTA (inner pages) */
.inner-cta {
  border-top: 1px solid var(--line);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  margin-top: clamp(3rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: end;
}
@media (min-width: 720px) {
  .inner-cta { grid-template-columns: 1fr auto; }
}
.inner-cta h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  max-width: 26ch;
}
.inner-cta h2 em { font-style: italic; color: var(--accent); }
.inner-cta p { color: var(--ink-2); margin: 0.75rem 0 0; font-size: var(--fs-md); max-width: 48ch; }
.inner-cta__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Refined org list (organizing committee — names + phones) */
.org-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin: 1.5rem 0;
}
@media (min-width: 720px) { .org-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .org-cards { grid-template-columns: repeat(3, 1fr); } }
.org-card {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: background var(--t-fast) var(--ease);
}
.org-card:hover { background: var(--paper); }
.org-card__role {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.org-card__name {
  font-family: var(--f-serif);
  font-size: var(--fs-md);
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.3;
  margin: 0;
}
.org-card__tel {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-top: auto;
  padding-top: 0.4rem;
}

/* Closing inner-page hint area (subtle) */
.next-pages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(3rem, 5vw, 4rem);
}
@media (min-width: 720px) { .next-pages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .next-pages { grid-template-columns: repeat(3, 1fr); } }
.next-page {
  padding: 1.5rem;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: background var(--t-fast) var(--ease);
}
.next-page:hover { background: var(--white); }
.next-page .lbl {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--mute);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.next-page .ttl {
  font-family: var(--f-serif);
  font-size: var(--fs-lg);
  color: var(--ink);
  letter-spacing: -0.018em;
}
.next-page .more {
  margin-top: 0.4rem;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap var(--t-fast) var(--ease);
}
.next-page:hover .more { gap: 0.65rem; }

/* Highlighted important date row (inside intro bands) */
.date-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  background: var(--accent);
  color: var(--paper);
  padding: 0.4rem 0.85rem;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: 2px;
}

/* ===========================================================
   INNER-PAGE LAYOUT VARIANTS — each page type gets a fitting
   composition, not the same intro-band skeleton.
   =========================================================== */

/* --- VERTICAL TIMELINE (Important Dates) --- */
.timeline {
  position: relative;
  margin: 2rem 0;
  padding-left: clamp(2.5rem, 5vw, 3.5rem);
}
.timeline::before {
  content: "";
  position: absolute;
  left: clamp(0.9rem, 1.6vw, 1.25rem);
  top: 1rem;
  bottom: 1rem;
  width: 1px;
  background: var(--line-strong);
}
.t-step {
  position: relative;
  padding: 1.25rem 0 1.5rem;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
}
.t-step:last-child { border-bottom: 0; }
.t-step::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(2.5rem, 5vw, 3.5rem) + clamp(0.6rem, 1.4vw, 1rem));
  top: 1.75rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 4px var(--paper);
  z-index: 1;
}
.t-step--peak::before {
  background: var(--accent);
  width: 14px; height: 14px;
  left: calc(-1 * clamp(2.5rem, 5vw, 3.5rem) + clamp(0.4rem, 1.2vw, 0.8rem));
  top: 1.6rem;
}
.t-step .lbl {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--mute);
  letter-spacing: 0.01em;
}
.t-step .date {
  font-family: var(--f-serif);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.t-step--peak .date { color: var(--accent); }
.t-step .meta {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0.25rem 0 0;
}

/* --- FEE / PARTICIPATION COMPARE CARDS --- */
.compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 1.5rem 0;
}
@media (min-width: 720px) { .compare { grid-template-columns: repeat(3, 1fr); } }
.cmp {
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
}
.cmp--featured {
  background: var(--accent-soft);
}
.cmp--featured::after {
  content: "Most authors choose";
  position: absolute;
  top: 1rem; right: 1.25rem;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--f-sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.55rem;
}
.cmp__name {
  font-family: var(--f-serif);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.cmp__sub {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--mute);
  margin: 0;
  line-height: 1.45;
}
.cmp__price {
  font-family: var(--f-serif);
  font-size: clamp(2.2rem, 1.6rem + 2.5vw, 3.4rem);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--accent);
  margin: 0.75rem 0 0.5rem;
}
.cmp__price small {
  font-size: 0.45em;
  color: var(--mute);
  letter-spacing: 0;
  margin-left: 0.3rem;
}
.cmp__price--free {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  color: var(--ink-2);
}
.cmp__features {
  list-style: none;
  margin: 0.5rem 0 0; padding: 1rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.55rem;
}
.cmp__features li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.5;
}
.cmp__features li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.4rem;
  width: 14px; height: 8px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.cmp__features li.no::before {
  border: 0;
  width: 10px; height: 1.5px;
  background: var(--mute-2);
  top: 0.65rem;
  transform: none;
}

/* --- INFO CARDS (Venue & Travel) --- */
.info-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 1.5rem 0;
}
@media (min-width: 720px) { .info-cards { grid-template-columns: repeat(3, 1fr); } }
.info-card {
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.info-card__num {
  font-family: var(--f-serif);
  font-size: var(--fs-sm);
  color: var(--accent);
  font-style: italic;
  margin-bottom: 0.25rem;
}
.info-card h3 {
  font-family: var(--f-serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.018em;
}
.info-card p {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}
.info-card a {
  margin-top: 0.4rem;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  padding-bottom: 1px;
}

/* --- ARCHIVE (Proceedings) --- */
.archive {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 1.5rem 0;
}
@media (min-width: 700px) { .archive { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .archive { grid-template-columns: repeat(3, 1fr); } }
.arc-card {
  background: var(--paper);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: background var(--t-fast) var(--ease);
  color: inherit;
}
.arc-card:hover { background: var(--white); }
.arc-card__year {
  font-family: var(--f-serif);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--accent);
  margin: 0;
}
.arc-card__ttl {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--ink);
  font-weight: 500;
  margin: 0;
}
.arc-card__meta {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--mute);
  margin: 0;
}
.arc-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.arc-card__badge {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: var(--paper-2);
  padding: 0.18rem 0.5rem;
}
.arc-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent);
  transition: gap var(--t-fast) var(--ease);
}
.arc-card:hover .arc-card__more { gap: 0.6rem; }

/* PDF part links inside an archive card */
.arc-card__parts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.arc-card__part {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: var(--paper-2);
  padding: 0.18rem 0.5rem;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.arc-card__part:hover { background: var(--accent-soft); }
.arc-card__soon {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--mute);
}

/* --- IMAGE HERO (Venue) --- */
.image-hero {
  position: relative;
  aspect-ratio: 21/9;
  overflow: hidden;
  margin: 0;
  background: var(--paper-2);
}
@media (max-width: 720px) { .image-hero { aspect-ratio: 4/3; } }
.image-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.image-hero:hover img { transform: scale(1.02); }
.image-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(22,22,24,0.55) 100%);
  pointer-events: none;
}
.image-hero__cap {
  position: absolute;
  bottom: 1.25rem;
  left: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 0.5rem 1.5rem;
  color: var(--paper);
}
.image-hero__cap .place {
  font-family: var(--f-serif);
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem);
  letter-spacing: -0.018em;
}
.image-hero__cap .coord {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: rgba(250, 248, 243, 0.75);
  letter-spacing: 0.02em;
}

/* --- COMMITTEE DIRECTORY GRID --- */
.directory {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 1.5rem 0;
}
@media (min-width: 720px) { .directory { grid-template-columns: repeat(2, 1fr); border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
@media (min-width: 1100px) { .directory { grid-template-columns: repeat(3, 1fr); } }
.dir-card {
  padding: 1.1rem 1.4rem;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: background var(--t-fast) var(--ease);
}
.dir-card:hover { background: var(--white); }
.dir-card__name {
  font-family: var(--f-serif);
  font-size: var(--fs-md);
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.25;
  margin: 0;
  font-weight: 400;
}
.dir-card__inst {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: 1.4;
  margin: 0;
}
.dir-card__country {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-top: auto;
  padding-top: 0.3rem;
}

/* --- STEPPER (reviewer recommendations) --- */
.stepper {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 2rem 0;
  counter-reset: step;
}
.stepper__step {
  background: var(--paper);
  padding: 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  counter-increment: step;
}
.stepper__step::before {
  content: counter(step, lower-roman);
  font-family: var(--f-serif);
  font-size: var(--fs-lg);
  color: var(--accent);
  font-style: italic;
  letter-spacing: -0.01em;
  min-width: 28px;
  line-height: 1.3;
}
.stepper__step h4 {
  font-family: var(--f-serif);
  font-size: var(--fs-md);
  font-weight: 400;
  margin: 0 0 0.25rem;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.stepper__step p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.55;
}

/* --- FEATURE PERSON CARD (chairman / lead) --- */
.lead-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  align-items: start;
  margin: 1.5rem 0;
}
@media (min-width: 720px) { .lead-card { grid-template-columns: auto 1fr; gap: 2.5rem; } }
.lead-card__avatar {
  width: 120px; height: 120px;
  background: var(--accent);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--f-serif);
  font-size: 2.4rem;
  letter-spacing: -0.04em;
  flex-shrink: 0;
}
.lead-card__role {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.4rem;
  letter-spacing: 0.04em;
}
.lead-card__name {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.lead-card__inst {
  font-family: var(--f-sans);
  font-size: var(--fs-md);
  color: var(--ink-2);
  margin: 0 0 1rem;
}
.lead-card__details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
}
@media (min-width: 540px) { .lead-card__details { grid-template-columns: auto auto; gap: 0.5rem 2rem; } }
.lead-card__details dt { color: var(--mute); margin: 0; }
.lead-card__details dd { color: var(--ink); margin: 0; font-family: var(--f-serif); }

/* --- GROUPED HEADING (between sections, lighter than h-num) --- */
.group-head {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
}
.group-head__num {
  font-family: var(--f-serif);
  font-size: var(--fs-sm);
  color: var(--accent);
  font-style: italic;
}
.group-head h2 {
  font-family: var(--f-serif);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  margin: 0;
  line-height: 1.15;
}
.group-head__count {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--mute);
  margin-left: auto;
  letter-spacing: 0.01em;
}

/* ===========================================================
   ENHANCEMENTS — scroll-spy nav, filter, map, stats band
   =========================================================== */

/* --- On-page scroll-spy nav --- */
.on-page-nav {
  position: relative;
}
@media (min-width: 1000px) {
  .on-page-nav {
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
    background: transparent;
    padding-left: 1rem;
    border-left: 1px solid var(--line);
  }
}
.on-page-nav h4 {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--mute);
  letter-spacing: 0.04em;
  margin: 0 0 0.85rem;
  text-transform: uppercase;
}
.on-page-nav__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
}
.on-page-nav__list a {
  display: block;
  padding: 0.45rem 0.85rem 0.45rem 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.4;
  border-left: 2px solid transparent;
  padding-left: 0.85rem;
  margin-left: -1rem;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.on-page-nav__list a:hover { color: var(--accent); }
.on-page-nav__list a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
}

/* Mobile: horizontal sticky bar */
@media (max-width: 999px) {
  .on-page-nav {
    position: sticky;
    top: var(--nav-h);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--pad-x);
    margin: 0 calc(var(--pad-x) * -1) clamp(1.5rem, 3vw, 2rem);
    z-index: 30;
    overflow: hidden;
  }
  .on-page-nav h4 { display: none; }
  .on-page-nav__list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .on-page-nav__list::-webkit-scrollbar { display: none; }
  .on-page-nav__list a {
    flex-shrink: 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.25rem 0.4rem;
    margin: 0;
    white-space: nowrap;
    font-size: var(--fs-sm);
  }
  .on-page-nav__list a.is-active {
    border-bottom-color: var(--accent);
    border-left-color: transparent;
  }
}

/* --- Committee directory filter --- */
.dir-filter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 1.5rem 0 0.5rem;
}
@media (min-width: 720px) { .dir-filter { grid-template-columns: 1fr 220px; } }
.dir-filter__field {
  position: relative;
  display: flex;
}
.dir-filter input[type="search"],
.dir-filter select {
  background: var(--white);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  padding: 0.7rem 0.95rem;
  font-size: var(--fs-md);
  font-family: var(--f-sans);
  border-radius: 2px;
  width: 100%;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.dir-filter input[type="search"] { padding-left: 2.5rem; }
.dir-filter input:focus,
.dir-filter select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.dir-filter__field svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--mute);
  pointer-events: none;
}
.dir-filter__status {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--mute);
  margin: 0 0 1rem;
  font-style: italic;
}
.dir-empty {
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  font-family: var(--f-serif);
  font-size: var(--fs-lg);
  color: var(--mute);
  background: var(--paper);
  border: 1px solid var(--line);
  margin: 0;
}
.dir-empty.is-hidden { display: none; }

/* --- Venue map --- */
.venue-map {
  position: relative;
  border: 1px solid var(--line);
  background: var(--paper-2);
  margin: 1.5rem 0;
}
.venue-map__frame {
  display: block;
  width: 100%;
  height: clamp(320px, 50vh, 480px);
  border: 0;
}
.venue-map__foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  align-items: center;
}
.venue-map__addr {
  color: var(--ink-2);
  margin: 0;
}
.venue-map__addr strong { color: var(--ink); font-weight: 500; font-family: var(--f-serif); }
.venue-map__directions {
  color: var(--accent);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap var(--t-fast) var(--ease);
}
.venue-map__directions:hover { gap: 0.55rem; }

/* --- "25 years" stats band — restrained, prestigious --- */
.stats-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  isolation: isolate;
}
.stats-band::before {
  /* Faint globalization motif behind the stats */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--motif);
  background-size: 70% 200%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0.7;
  pointer-events: none;
}
@media (min-width: 640px) { .stats-band { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stats-band { grid-template-columns: repeat(4, 1fr); } }
.stats-band__cell {
  background: var(--paper);
  padding: clamp(2rem, 3.5vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.stats-band__num {
  font-family: var(--f-serif);
  font-size: clamp(2.4rem, 1.7rem + 2.8vw, 3.6rem);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--accent);
  margin: 0;
  font-weight: 400;
}
.stats-band__num small {
  font-size: 0.42em;
  color: var(--mute);
  letter-spacing: 0;
  margin-left: 0.25rem;
  font-family: var(--f-sans);
}
.stats-band__lbl {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.35;
  margin: 0.25rem 0 0;
}
.stats-band__sub {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--mute);
  margin: 0;
  line-height: 1.5;
}

/* --- Horizontal sticky section-nav bar (alternative to .on-page-nav) --- */
.section-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 30;
  background: rgba(250, 248, 243, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.section-bar__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding: 0.55rem 0;
  min-height: 46px;
}
.section-bar__label {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  color: var(--mute);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.section-bar__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  min-width: 0;
  scroll-snap-type: x proximity;
}
.section-bar__list::-webkit-scrollbar { display: none; }
.section-bar__list li { scroll-snap-align: start; }
.section-bar__list a {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  padding: 0.4rem 0;
  border-bottom: 1.5px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.section-bar__list a:hover { color: var(--accent); }
.section-bar__list a.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
@media (max-width: 720px) {
  .section-bar__label { display: none; }
}

/* ===========================================================
   ELEVATION ROUND — signature page headers · globalization
   motif · editorial sticky sidebar · richer motion
   =========================================================== */

/* --- Globalization motif (faint meridian lines, SVG bg) ---
   Used as a barely-there texture in the new page-header band,
   stats bands, and select dividers. Mono, low contrast.
   The SVG is encoded inline so no external file is needed. */
:root {
  --motif-color: rgba(28, 58, 91, 0.07);     /* accent at very low opacity */
  --motif-color-strong: rgba(28, 58, 91, 0.12);
  --motif:
    radial-gradient(circle at 50% 50%,
      transparent 0, transparent 26%,
      var(--motif-color) 26.4%, var(--motif-color) 26.7%, transparent 27.1%,
      transparent 38%, var(--motif-color) 38.4%, var(--motif-color) 38.7%, transparent 39.1%,
      transparent 52%, var(--motif-color) 52.4%, var(--motif-color) 52.7%, transparent 53.1%,
      transparent 68%);
}

/* --- Signature page-header band — applied to every inner page --- */
.ph {
  position: relative;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.75rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}
.ph::before {
  /* Globalization motif — fine concentric "globe" arcs + meridians */
  content: "";
  position: absolute;
  width: clamp(420px, 50vw, 720px);
  height: clamp(420px, 50vw, 720px);
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  background-image: var(--motif);
  background-size: 100% 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.95;
}
.ph::after {
  /* fine meridian lines crossing the band */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(90deg, transparent 0, transparent 19.9%, var(--motif-color) 20%, var(--motif-color) 20.1%, transparent 20.2%, transparent 100%),
    linear-gradient(90deg, transparent 0, transparent 39.9%, var(--motif-color) 40%, var(--motif-color) 40.1%, transparent 40.2%, transparent 100%),
    linear-gradient(90deg, transparent 0, transparent 59.9%, var(--motif-color) 60%, var(--motif-color) 60.1%, transparent 60.2%, transparent 100%),
    linear-gradient(90deg, transparent 0, transparent 79.9%, var(--motif-color) 80%, var(--motif-color) 80.1%, transparent 80.2%, transparent 100%);
  pointer-events: none;
  opacity: 0.7;
}
.ph__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: end;
  position: relative;
}
@media (min-width: 900px) {
  .ph__grid { grid-template-columns: clamp(6.5rem, 5rem + 7.5vw, 12.5rem) 1fr; }
}
.ph__numeral {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(5rem, 4rem + 6vw, 10rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: var(--accent);
  opacity: 0.16;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 0;
  -webkit-text-stroke: 0;
  user-select: none;
}
.ph__body {
  position: relative;
  z-index: 1;
}
.ph__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--mute);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.ph__crumbs a { color: var(--mute); transition: color var(--t-fast) var(--ease); }
.ph__crumbs a:hover { color: var(--accent); }
.ph__crumbs .sep::before { content: "/"; opacity: 0.5; padding: 0 0.1rem; }
.ph__crumbs span:not(.sep):last-child { color: var(--ink); }
.ph__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin-bottom: 0.85rem;
}
.ph__kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.ph h1 {
  font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4.6rem);
  max-width: 22ch;
  margin: 0;
  letter-spacing: -0.026em;
  line-height: 1.02;
  font-weight: 400;
  font-family: var(--f-serif);
}
.ph h1 em { font-style: italic; }
.ph__lede {
  max-width: 58ch;
  margin: clamp(1.1rem, 2vw, 1.5rem) 0 0;
  font-family: var(--f-serif);
  color: var(--ink-2);
  font-size: var(--fs-lg);
  line-height: 1.45;
  text-align: justify;
}
.ph__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--line);
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.ph__meta span strong {
  font-family: var(--f-serif);
  color: var(--ink);
  font-weight: 400;
}

/* --- Subtle motif divider (horizontal accent line with fade) --- */
.motif-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--motif-color-strong) 20%, var(--motif-color-strong) 80%, transparent);
  border: 0;
  margin: 0;
}

/* --- Editorial sidebar layout for long pages --- */
.essay {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.essay__main { min-width: 0; }
@media (min-width: 1000px) {
  .essay { grid-template-columns: minmax(0, 1fr) 240px; }
  .essay--left-aside { grid-template-columns: 240px minmax(0, 1fr); }
}
.essay__aside {
  position: relative;
  font-family: var(--f-sans);
}
@media (min-width: 1000px) {
  .essay__aside { position: sticky; top: calc(var(--nav-h) + 2rem); }
}
.essay__aside-card {
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.essay__aside-block {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.essay__aside-block:last-child { border-bottom: 0; padding-bottom: 0; }
.essay__aside h4 {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--mute);
  letter-spacing: 0.06em;
  margin: 0 0 0.85rem;
  text-transform: uppercase;
}
.essay__toc {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
}
.essay__toc a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.85rem;
  margin-left: -0.85rem;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.essay__toc a:hover { color: var(--accent); }
.essay__toc a.is-active { color: var(--accent); border-left-color: var(--accent); }
.essay__meta {
  display: grid;
  gap: 0.55rem;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.essay__meta-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  line-height: 1.4;
}
.essay__meta-row .k { color: var(--mute); font-size: var(--fs-xs); }
.essay__meta-row .v { color: var(--ink); font-family: var(--f-serif); }
.essay__progress {
  width: 100%;
  height: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.essay__progress::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--progress, 0%);
  background: var(--accent);
  transition: width 120ms linear;
}

/* Mobile: aside becomes a horizontal sticky bar (reuses .section-bar
   pattern). On long pages, render the TOC as a sticky horizontal bar
   under the page header at <1000px and hide the sidebar.  */
@media (max-width: 999px) {
  .essay__aside { display: none; }
}

/* --- Topic cards with line icons --- */
.topic {
  position: relative;
  transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.topic:hover {
  transform: translateY(-2px);
  background: var(--white);
}
.topic__icon {
  width: 28px; height: 28px;
  color: var(--accent);
  margin-bottom: 0.75rem;
  opacity: 0.85;
}
.topic__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; }

/* Force a clean 3×2 grid for Subject & Aim's six topics (no orphans) */
.topics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 640px) { .topics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .topics { grid-template-columns: repeat(3, 1fr); } }

/* --- Stat chip (used in profile cards) --- */
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.65rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  white-space: nowrap;
}
.stat-chip strong { color: var(--ink); font-weight: 500; font-family: var(--f-serif); letter-spacing: -0.01em; }
.stat-chips {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 0.85rem 0 0.6rem;
}

/* --- Featured profile card (Kliestik / Nica) --- */
.profile {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--line);
  margin: 1rem 0;
  transition: background var(--t-base) var(--ease);
}
.profile:hover { background: var(--white); }
@media (min-width: 720px) {
  .profile { grid-template-columns: 220px 1fr; }
}
.profile__portrait {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 4/5;
  background: var(--paper-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.profile__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
  transition: transform 600ms var(--ease-out), filter var(--t-base) var(--ease);
}
.profile:hover .profile__portrait img {
  transform: scale(1.03);
  filter: saturate(1);
}
.profile__portrait::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(0deg, rgba(28,58,91,0.15), transparent);
  pointer-events: none;
}
.profile__role {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.profile__name {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.85rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.15;
  margin: 0.35rem 0 0.25rem;
  color: var(--ink);
}
.profile__inst {
  font-family: var(--f-sans);
  font-size: var(--fs-md);
  color: var(--ink-2);
  margin: 0 0 0.5rem;
}
.profile__bio {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0.75rem 0;
  text-align: justify;
}
.profile__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.profile__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent);
  border: 1px solid var(--line-strong);
  padding: 0.45rem 0.85rem;
  border-radius: 2px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.profile__link:hover {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.profile__link svg { width: 12px; height: 12px; }

/* Hover lift on directory cards */
.dir-card {
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.dir-card:hover {
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -6px rgba(22,22,24,0.12);
  position: relative;
  z-index: 1;
}

/* --- Stats count-up (numbers slide in subtly) --- */
.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* --- Alternating timeline (Important Dates) --- */
.alt-timeline {
  position: relative;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}
.alt-timeline::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
  transform: scaleY(var(--draw, 1));
  transform-origin: top;
  transition: transform 1.2s var(--ease-out);
}
@media (min-width: 800px) {
  .alt-timeline::before { left: 50%; }
}
.alt-step {
  position: relative;
  padding: 0 0 1.75rem 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
}
.alt-step:last-child { padding-bottom: 0; }
.alt-step::before {
  /* milestone dot */
  content: "";
  position: absolute;
  left: 10px;
  top: 0.55rem;
  width: 14px; height: 14px;
  background: var(--paper);
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--paper);
  z-index: 1;
}
.alt-step__icon {
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  color: var(--accent);
  z-index: 2;
  pointer-events: none;
}
.alt-step__icon svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  background: var(--paper);
  padding: 4px;
  border-radius: 50%;
}
.alt-step .lbl {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--mute);
  letter-spacing: 0.02em;
  margin: 0;
}
.alt-step .date {
  font-family: var(--f-serif);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}
.alt-step .meta {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0.25rem 0 0;
}
.alt-step--peak::before {
  background: var(--accent);
  width: 18px; height: 18px;
  left: 8px;
  border-width: 2px;
}
.alt-step--peak .date { color: var(--accent); }
.alt-step--peak .lbl { color: var(--accent); font-weight: 500; }

/* Desktop: alternating left/right layout */
@media (min-width: 800px) {
  .alt-step {
    grid-template-columns: 1fr 1fr;
    padding: 0 0 2.5rem 0;
    gap: 0;
  }
  .alt-step::before { left: calc(50% - 7px); top: 0.55rem; }
  .alt-step--peak::before { left: calc(50% - 9px); }
  .alt-step__icon {
    position: absolute;
    left: calc(50% - 16px);
    top: 0.2rem;
    width: 32px;
    height: 32px;
  }
  .alt-step__content {
    padding-right: clamp(2rem, 4vw, 3rem);
  }
  .alt-step:nth-child(even) .alt-step__content {
    grid-column: 2;
    padding-left: clamp(2rem, 4vw, 3rem);
    padding-right: 0;
    text-align: left;
  }
  .alt-step:nth-child(odd) .alt-step__content {
    grid-column: 1;
    text-align: right;
  }
}

/* "Next deadline" highlighted card (in essay aside or right column) */
.next-deadline {
  background: var(--paper);
  border: 1px solid var(--accent);
  border-left-width: 3px;
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.next-deadline .lbl {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.next-deadline .name {
  font-family: var(--f-serif);
  font-size: var(--fs-lg);
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--ink);
}
.next-deadline .date {
  font-family: var(--f-serif);
  font-size: var(--fs-md);
  color: var(--accent);
  margin: 0;
  font-style: italic;
}
.next-deadline .countdown {
  margin-top: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.next-deadline .countdown strong {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: var(--fs-md);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* --- Header condensation on scroll --- */
.site-header.is-scrolled {
  --nav-h: 60px;
}
.site-header.is-scrolled .nav { height: var(--nav-h); }
/* Inner pages (non-overlay) start already condensed — no jump on first scroll */
.site-header:not(.site-header--overlay) {
  --nav-h: 60px;
  border-bottom-color: var(--line);
}

/* --- Old .page-header — soften default behaviour for any page still using it --- */
.page-header { background: linear-gradient(180deg, var(--accent-soft) 0%, var(--paper) 100%); }

/* ===========================================================
   PRINT / REDUCED MOTION
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .hero__media { transform: none !important; }
  .hero__scroll { animation: none; }
  /* Keep the hero cross-fade slideshow running (gentle opacity fade, content) */
  .hero__slide {
    animation-duration: 35s !important;
    animation-iteration-count: infinite !important;
  }
}


/* ---------- Subpage footer (no Partners) — tighter spacing ---------- */
.site-footer:not(:has(.footer-partners)) {
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  padding-bottom: 0.75rem;
}
.site-footer:not(:has(.footer-partners)) .footer-grid {
  padding-top: 0;
}
.site-footer:not(:has(.footer-partners)) .footer-bot {
  margin-top: clamp(1rem, 1.5vw, 1.25rem);
}


/* ---------- Next-pages — lively colored variants ---------- */
.next-pages--lively {
  gap: 1rem;
  background: transparent;
  border: 0;
}
.next-pages--lively .next-page {
  position: relative;
  border: 0;
  border-radius: 4px;
  padding: 1.5rem;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.next-pages--lively .next-page:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -18px rgba(15, 23, 42, 0.45);
}

/* Variant 1 — primary (dark ink) */
.next-page--primary {
  background: #2d3340;
  color: var(--paper);
}
.next-page--primary .lbl { color: rgba(250, 248, 243, 0.7); }
.next-page--primary .ttl { color: var(--paper); }
.next-page--primary .more { color: var(--paper); }
.next-page--primary:hover { background: #2d3340; }

/* Variant 2 — accent (brand blue) */
.next-page--accent {
  background: var(--accent);
  color: var(--paper);
}
.next-page--accent .lbl { color: rgba(250, 248, 243, 0.75); }
.next-page--accent .ttl { color: var(--paper); }
.next-page--accent .more { color: var(--paper); }
.next-page--accent:hover { background: var(--accent); }

/* Variant 3 — paper (light card, accent kicker) */
.next-page--paper {
  background: var(--accent-soft);
  color: var(--accent);
}
.next-page--paper .lbl { color: var(--accent); }
.next-page--paper .ttl { color: var(--ink); }
.next-page--paper .more { color: var(--accent); }
.next-page--paper:hover { background: var(--accent-soft); }


/* ---------- Stepper — refined card look (no border-grid, badge numerals) ---------- */
.stepper {
  background: transparent;
  border: 0;
  gap: 0.6rem;
}
.stepper__step {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 1.1rem 1.4rem 1.1rem 1.25rem;
  align-items: center;
  gap: 1.1rem;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.stepper__step:hover {
  background: var(--accent-soft);
  transform: translateX(2px);
  box-shadow: 0 6px 18px -14px rgba(15, 23, 42, 0.35);
}
.stepper__step:hover::before {
  background: var(--white);
}
.stepper__step::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.15rem;
  min-width: 0;
  flex-shrink: 0;
}
/* Soften the left border colour for later/heavier outcomes */
.stepper__step:nth-child(1) { border-left-color: #4f8a5e; }
.stepper__step:nth-child(2) { border-left-color: #6b9a72; }
.stepper__step:nth-child(3) { border-left-color: var(--accent); }
.stepper__step:nth-child(4) { border-left-color: #c09155; }
.stepper__step:nth-child(5) { border-left-color: #b56666; }


/* ---------- Chairman avatar — photo variant, portrait rectangle filling card ---------- */
.lead-card__avatar--photo {
  width: 150px;
  height: auto;
  align-self: stretch;
  padding: 0;
  background: transparent;
  border-radius: 4px;
  overflow: hidden;
  display: block;
}
.lead-card__avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 200px;
}
@media (min-width: 720px) {
  .lead-card:has(.lead-card__avatar--photo) {
    align-items: stretch;
  }
}


/* ---------- Logistics CTA — globe/network photo background ---------- */
.logistics-cta {
  position: relative;
  background-image: url("../img/hero/logistics-bg.5d4cae43112f.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #04080e !important;
  isolation: isolate;
  overflow: hidden;
}
.logistics-cta::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(4,8,14,0.82) 0%, rgba(4,8,14,0.58) 52%, rgba(4,8,14,0.34) 100%);
}
@media (max-width: 760px) {
  .logistics-cta::after {
    background: linear-gradient(180deg, rgba(4,8,14,0.72) 0%, rgba(4,8,14,0.64) 100%);
  }
}
.logistics-cta > .container { position: relative; z-index: 1; }


/* ---------- Organizing committee member email link ---------- */
.org-card__email {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
  line-height: 1.4;
}
.org-card__email:hover { text-decoration: underline; }


/* ============================================================
   DASHBOARD PORTAL (Phase 2)
   Authenticated area: left sidebar (desktop) + content column.
   On <960px the sidebar collapses to a horizontal scrollable tab
   strip. Uses the same tokens/idiom as the rest of the site so it
   reads as native. The public site header/footer stay in place.
   ============================================================ */
.dash-section { padding: clamp(2.25rem, 5vw, 4rem) 0; }

/* Top bar — page title + participation pill */
.dash-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.6rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.dash-top__intro { min-width: 0; }
.dash-top__title {
  font-family: var(--f-serif);
  font-size: var(--fs-2xl);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0.5rem 0 0;
  color: var(--ink);
}
.dash-top__title em { font-style: italic; }

/* Two-column shell */
.dash {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 960px) {
  .dash { grid-template-columns: 252px minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
}

/* --- Sidebar --- */
.dash__side { min-width: 0; }
@media (min-width: 960px) {
  .dash__side { position: sticky; top: calc(var(--nav-h) + 1.25rem); }
}
.dash__nav { display: flex; flex-direction: column; gap: 0.15rem; }
@media (max-width: 959px) {
  .dash__nav {
    flex-direction: row;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.85rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border-bottom: 1px solid var(--line);
  }
}
.dash__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  border-radius: 5px;
  white-space: nowrap;
  position: relative;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.dash__link svg {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--mute);
  transition: color var(--t-fast) var(--ease);
}
.dash__link:hover { background: var(--paper-2); color: var(--ink); }
.dash__link:hover svg { color: var(--ink-2); }
.dash__link.is-active { background: var(--accent-soft); color: var(--accent); }
.dash__link.is-active svg { color: var(--accent); }
@media (min-width: 960px) {
  .dash__link.is-active::before {
    content: "";
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 58%;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
  }
}
/* Mobile: links become rounded pill tabs (labels only) */
@media (max-width: 959px) {
  .dash__link {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.55rem 1.05rem;
  }
  .dash__link.is-active { border-color: var(--accent); }
  .dash__link svg { display: none; }
}

.dash__side-foot {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
@media (max-width: 959px) { .dash__side-foot { display: none; } }
.dash__signout {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--mute);
  padding: 0.5rem 0.9rem;
  transition: color var(--t-fast) var(--ease);
}
.dash__signout:hover { color: var(--danger); }
.dash__signout svg { width: 17px; height: 17px; }

/* --- Content column --- */
.dash__main { min-width: 0; }
.dash-h {
  font-family: var(--f-serif);
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.65rem;
  color: var(--ink);
}
.dash-lede {
  color: var(--ink-2);
  font-size: var(--fs-md);
  line-height: 1.65;
  margin: 0 0 1.5rem;
}

/* Overview-only intro note (registration rules + hotel contact). Lives inside the
   dashboard header so it sits under the title and above the divider line. */
.dash-note {
  flex-basis: 100%;
  margin-top: 0.65rem;
  padding: 1.1rem 1.3rem;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
}
.dash-note p {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0 0 0.35rem;
  text-align: justify;
}
.dash-note p:last-child { margin: 0; }
.dash-note strong { color: var(--ink); font-weight: 600; }
.dash-note a { color: var(--accent); font-weight: 600; }

/* Justify the running prose blocks (intro leads, notes, banners) so the right
   edge isn't ragged. Buttons, links, labels and form controls are unaffected. */
.dash-lede,
.fr-note,
.fr-state,
.fr-sec__sub,
.fr-dates__note,
.fr-total__note,
.fr-captcha-placeholder {
  text-align: justify;
}

/* "Coming soon" placeholder card (Submission / Accommodation in Phase 2) */
.dash-soon {
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--white);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.dash-soon__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.dash-soon h2 {
  font-family: var(--f-serif);
  font-size: var(--fs-lg);
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
  color: var(--ink);
}
.dash-soon p { color: var(--ink-2); margin: 0; max-width: 56ch; }

/* --- Registration details card + participation pill (shared across the
       portal; moved here from the dashboard template so the pill can be
       reused in the top bar). --- */
.reg-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 24px 50px -30px rgba(22, 22, 24, 0.20);
  /* Full content-column width, matching the submission read-only cards
     (.fr-sec / .review-detail). The .container already caps the overall
     width, and .reg-grid collapses to one column under 560px. */
}
.reg-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  flex-wrap: wrap;
  padding-bottom: 1.35rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}
.reg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.45rem 2.25rem;
}
.reg-cell { min-width: 0; }
.reg-cell--wide { grid-column: 1 / -1; }
.reg-cell .lbl {
  display: block;
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  color: var(--mute);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.reg-cell .val {
  display: block;
  font-family: var(--f-serif);
  font-size: var(--fs-lg);
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.01em;
  word-break: break-word;
}
/* Clickable submission title in the Overview card -> Submission page. */
.ov-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.ov-title-link:hover,
.ov-title-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.reg-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.9rem;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
}
.reg-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.reg-pill--passive { background: var(--paper-2); color: var(--ink-2); }
.reg-pill--passive .reg-pill__dot { background: var(--mute); }
@media (max-width: 560px) {
  .reg-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .reg-cell--wide { grid-column: auto; }
}

/* Overview: submission file chips (open latest abstract / manuscript / licence)
   + empty-state notes shown inside the .reg-card boxes. */
.sub-files { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.file-chip svg { width: 16px; height: 16px; flex-shrink: 0; }
.file-chip__v { color: var(--mute); font-weight: 400; font-size: var(--fs-xs); margin-left: 0.15rem; }
a.file-chip:hover { background: var(--accent-soft); border-color: var(--accent); }
.file-chip--off { color: var(--mute); border-style: dashed; cursor: default; }
/* Chip groups used across submission / editor / reviewer views (via _file_chip.html).
   .file-chip-wrap keeps a chip and its date together; the date is kept where it
   matters (the author's C. Files section). */
.file-chips { display: flex; flex-wrap: wrap; gap: 0.55rem 0.9rem; margin-top: 0.55rem; }
.file-chip-wrap { display: inline-flex; align-items: center; gap: 0.5rem; }
.file-chip__date { color: var(--mute); font-size: var(--fs-xs); white-space: nowrap; }
.reg-empty { color: var(--ink-2); line-height: 1.65; margin: 0; font-size: var(--fs-md); }
.reg-empty a { color: var(--accent); font-weight: 500; }

/* Overview: A / B / C sub-section headers inside the Registration form details
   card — mirror the registration form's structure. */
.ov-sec { margin-top: 2rem; }
.ov-sec:first-child { margin-top: 0; }
.ov-sec__title {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 1.15rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.ov-sec__letter { color: var(--accent); margin-right: 0.25rem; }


/* ============================================================
   FULL REGISTRATION FORM (Phase 2) — extends the existing form kit
   (.field / .form-row / .choices). Adds the input types the kit did
   not yet cover (textarea / tel / url / number / date / checkbox),
   the A/B/C section headers, the accommodation repeater, and the
   live price total. Reuses all design tokens.
   ============================================================ */
/* Forms fill the dashboard main column, consistent with the white cards and the
   intro texts. The responsive grid rows (two/three columns) handle small screens;
   the editor "Assign reviewer" form keeps its own narrow inline max-width. */
.fr-form { max-width: 100%; }
.req { color: var(--danger); font-weight: 600; }

/* Input types the base kit didn't style yet */
.field textarea,
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field input[type="date"] {
  background: var(--white);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  padding: 0.78rem 0.95rem;
  font-size: var(--fs-md);
  font-family: var(--f-sans);
  border-radius: 2px;
  width: 100%;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 98px; line-height: 1.55; }
.field textarea::placeholder { color: var(--mute-2); }
.field textarea:focus,
.field input[type="tel"]:focus,
.field input[type="url"]:focus,
.field input[type="number"]:focus,
.field input[type="date"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field--error textarea { border-color: var(--danger); background: var(--danger-soft); }

/* Read-only e-mail (the fixed account identifier) */
.field input.is-locked {
  background: var(--paper-2);
  color: var(--ink-3);
  cursor: text;
}

/* Three-up name row */
@media (min-width: 720px) { .form-row--three { grid-template-columns: 1fr 1fr 1fr; } }

/* Region / participation as side-by-side choice cards */
@media (min-width: 560px) { .choices--inline { grid-template-columns: 1fr 1fr; } }

/* Section headers (A. / B. / C.) */
.fr-sec { margin-bottom: 2.75rem; }
.fr-sec__head {
  padding-bottom: 1rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}
.fr-sec__title {
  font-family: var(--f-serif);
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.fr-sec__letter { color: var(--accent); }
.fr-sec__sub { margin: 0.35rem 0 0; color: var(--mute); font-size: var(--fs-sm); }
.fr-subhead {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  letter-spacing: 0.02em;
  margin: 0.4rem 0 -0.4rem;
}

/* Form-level error box */
.fr-formerror {
  border: 1px solid var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
  padding: 0.85rem 1.1rem;
  border-radius: 2px;
  margin-bottom: 1.5rem;
  font-size: var(--fs-sm);
}
.fr-formerror ul { margin: 0; padding-left: 1.1rem; }

/* The "share accommodation" notice */
.fr-note {
  font-size: var(--fs-sm);
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-left-width: 3px;
  padding: 0.75rem 1rem;
  border-radius: 2px;
  margin: 0 0 1.25rem;
}

/* Consent checkbox row */
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.5;
}
.check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 0.12rem;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}

/* Accommodation repeater */
.accom {
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 8px;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}
/* These elements are shown/hidden via the `hidden` attribute in JS. Their author
   `display` rules (grid/flex) would otherwise beat the UA `[hidden]{display:none}`
   rule, so they need explicit overrides — same pattern as `.fr-dgroup[hidden]`.
   (Fixes: remove-room X, and the accommodation block/line not hiding on Passive.) */
.accom[hidden],
.accom-row[hidden],
.fr-total__row[hidden] { display: none; }
.accom-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 0.85rem;
}
@media (min-width: 620px) {
  .accom-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}
.accom-row__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 560px) { .accom-row__fields { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .accom-row__fields { grid-template-columns: repeat(3, 1fr); } }
.accom-row .field label { font-size: var(--fs-xs); color: var(--ink-2); }
.accom-row__del { display: flex; align-items: center; justify-content: flex-end; }
@media (min-width: 620px) { .accom-row__del { align-self: start; padding-top: 1.65rem; } }
.accom-remove {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mute);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.accom-remove:hover { color: var(--danger); border-color: var(--danger); }
.accom-remove svg { width: 16px; height: 16px; }
.accom-add { margin-top: 0.25rem; }

/* Live price total */
.fr-total {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 10px;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  margin: 0.25rem 0;
}
.fr-total__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.4rem 0;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.fr-total__row > span:last-child {
  font-family: var(--f-serif);
  font-size: var(--fs-md);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.fr-total__row--grand {
  border-top: 1px solid var(--line);
  margin-top: 0.3rem;
  padding-top: 0.8rem;
}
.fr-total__row--grand > span:first-child { font-weight: 600; color: var(--ink); }
.fr-total__row--grand > span:last-child { font-size: var(--fs-xl); color: var(--accent); }
.fr-total__note { margin: 0.6rem 0 0; font-size: var(--fs-xs); color: var(--mute); }

/* reCAPTCHA placeholder note */
.fr-captcha-placeholder {
  font-size: var(--fs-xs);
  color: var(--mute);
  background: var(--paper-2);
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  margin: 0;
}

/* intl-tel-input fits the field full width */
.field .iti { width: 100%; display: block; }

/* Keyboard focus indicators (the custom radio cards hide the real input, and a
   few controls lacked a visible focus ring) — WCAG 2.4.7. */
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.field input.is-locked:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.accom-remove:focus-visible,
.check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Conditional invoice field groups (§B — shown per delegate type) */
.fr-dgroup { display: grid; gap: 1.1rem; }
.fr-dgroup[hidden] { display: none; }

/* Custom country dropdown — opens DOWNWARD, searchable (replaces the native
   select, whose popup direction the browser controls). The real <select> stays
   in the DOM (hidden) for submission; without JS it is shown as a fallback. */
.combo { position: relative; }
.combo__ui[hidden] { display: none; }
.combo__btn {
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.78rem 0.95rem;
  font-family: var(--f-sans);
  font-size: var(--fs-md);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.combo__btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.combo__value.is-placeholder { color: var(--mute-2); }
.combo__chev { width: 16px; height: 16px; color: var(--mute); flex-shrink: 0; transition: transform var(--t-fast) var(--ease); }
.combo__btn[aria-expanded="true"] .combo__chev { transform: rotate(180deg); }
.combo__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 60;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  box-shadow: 0 18px 40px -18px rgba(22, 22, 24, 0.35);
  padding: 0.5rem;
  max-height: 320px;
  display: flex;
  flex-direction: column;
}
.combo__panel[hidden] { display: none; }
.combo__search {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  margin-bottom: 0.4rem;
}
.combo__search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.combo__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.combo__opt { padding: 0.5rem 0.7rem; border-radius: 2px; cursor: pointer; font-size: var(--fs-sm); color: var(--ink); }
.combo__opt:hover { background: var(--paper-2); }
.combo__opt.is-sel { background: var(--accent-soft); color: var(--accent); }
.combo__empty { padding: 0.5rem 0.7rem; color: var(--mute); font-size: var(--fs-sm); }


/* ============================================================
   SUBMISSION SYSTEM (Phase 2) — reuses .field / .fr-sec / .accom-row idiom
   ============================================================ */
/* File inputs */
.field input[type="file"] {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  width: 100%;
}
.field input[type="file"]::file-selector-button {
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  margin-right: 0.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--paper-2);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.field input[type="file"]::file-selector-button:hover { background: var(--accent-soft); }

/* Abstract word counter */
.abs-count { font-family: var(--f-sans); font-size: var(--fs-xs); color: var(--mute); font-weight: 400; }
.abs-count--ok { color: var(--accent); }
.abs-count--off { color: var(--danger); }

/* Existing-files list */
.file-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.file-list li { font-size: var(--fs-sm); }
.file-list a { color: var(--accent); border-bottom: 1px solid var(--accent); }
.file-list span { color: var(--mute); font-size: var(--fs-xs); }

/* Co-author repeater */
.coauthor-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 0.85rem;
}
@media (min-width: 620px) { .coauthor-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.coauthor-row[hidden] { display: none; }
.coauthor-row__fields { display: grid; grid-template-columns: 1fr; gap: 0.85rem; }
@media (min-width: 560px) { .coauthor-row__fields { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .coauthor-row__fields { grid-template-columns: repeat(3, 1fr); } }
.coauthor-row .field label { font-size: var(--fs-xs); color: var(--ink-2); }
.coauthor-row__corr { grid-column: 1 / -1; margin-top: 0.25rem; }
.coauthor-row__del { display: flex; align-items: center; justify-content: flex-end; }
@media (min-width: 620px) { .coauthor-row__del { align-self: start; padding-top: 1.65rem; } }

/* Submission status + reviewer decision */
.sub-status { display: flex; align-items: center; gap: 0.75rem 1.25rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.sub-status__meta { font-family: var(--f-sans); font-size: var(--fs-sm); color: var(--mute); }
.sub-decision {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--white);
  border-radius: 8px;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  margin-bottom: 1.75rem;
}
.sub-decision__title {
  font-family: var(--f-serif);
  font-size: var(--fs-lg);
  letter-spacing: -0.015em;
  margin: 0.35rem 0 0;
  color: var(--ink);
}
.sub-decision__label {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mute);
  margin: 1rem 0 0.35rem;
}
.sub-decision__comments { margin: 0; color: var(--ink-2); line-height: 1.6; max-width: 64ch; }

/* Important-dates callout on the submission page */
.fr-dates {
  max-width: 100%;             /* full dashboard column, like the Overview cards + the form */
  border: 1px solid var(--line);
  background: var(--white);     /* white card look, like the Overview boxes */
  border-radius: 14px;
  box-shadow: 0 24px 50px -30px rgba(22, 22, 24, 0.20);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 2rem;
}
.fr-dates__list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.fr-dates__list li { font-size: var(--fs-sm); color: var(--ink-2); }
.fr-dates__note { margin: 0.85rem 0 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }

/* Editor views */
.ed-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ed-table th {
  text-align: left;
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #faf8f3;
  font-weight: 600;
  padding: 0.8rem 0.9rem;
  background: var(--accent);
  border-bottom: 0;
  white-space: nowrap;
}
.ed-table td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.ed-table tr:hover td { background: var(--paper-2); }
.ed-table a { color: var(--accent); font-weight: 500; border-bottom: 1px solid transparent; }
.ed-table a:hover { border-bottom-color: var(--accent); }
/* Bulk abstract-acceptance: checkbox column + action bar */
.ed-table th.ed-check, .ed-table td.ed-check { width: 1%; text-align: center; padding-right: 0.4rem; }
.ed-table .ed-check input { width: 16px; height: 16px; cursor: pointer; }
.ed-table td.ed-check input { accent-color: var(--accent); }
.ed-table td.ed-check input:disabled { cursor: not-allowed; opacity: 0.3; }
.ed-bulk { display: flex; align-items: center; gap: 0.8rem 1.1rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.ed-bulk__hint { font-size: var(--fs-xs); color: var(--mute); max-width: 52ch; }
/* Sortable column headers (links live on the blue header row) */
.ed-table th a.ed-sort { color: #faf8f3; text-decoration: none; border-bottom: 0; cursor: pointer; white-space: nowrap; }
.ed-table th a.ed-sort:hover { text-decoration: underline; }
/* Stacked up/down arrows, both white; the active sort direction is fully bright. */
.ed-sort__arrows { display: inline-flex; flex-direction: column; line-height: 0.6; font-size: 0.6em; margin-left: 0.45em; vertical-align: middle; }
.ed-sort__arrows span { color: #faf8f3; opacity: 0.35; }
.ed-sort__arrows span.is-on { opacity: 1; }
.ed-muted { color: var(--mute); }
.ed-subh { font-size: var(--fs-lg); margin-top: 2.25rem; }
.ed-meta { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.ed-meta p { margin: 0 0 0.4rem; }
.ed-abstract { color: var(--ink-2); line-height: 1.65; text-align: justify; }
.ed-authors { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.ed-authors li { font-size: var(--fs-sm); color: var(--ink); }
.ed-aff { color: var(--mute); font-size: var(--fs-sm); }
.ed-tag {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin-left: 0.4rem;
}

/* Reviewer evaluation form */
.assess { border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.assess__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--line);
}
.assess__row:last-child { border-bottom: 0; }
.assess__row--error { background: var(--danger-soft); }
.assess__q { font-size: var(--fs-sm); color: var(--ink-2); flex: 1 1 58%; min-width: 0; line-height: 1.45; }
.assess__yn { display: flex; gap: 1.25rem; flex-shrink: 0; }
.assess__err { flex: 1 1 100%; }
.yn { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; }
.yn input { accent-color: var(--accent); cursor: pointer; }
.quality-row { display: flex; flex-wrap: wrap; gap: 1.1rem 1.5rem; }

/* Decision: vertical stack of choice cards (override the inline border rule) */
.decision-choices .choice { border-bottom: 1px solid var(--line); border-right: 0; }
.decision-choices .choice:last-child { border-bottom: 0; }

/* Author lifecycle state banner (revision requested / accepted / published / rejected) */
.fr-state {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
  color: var(--ink-2);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.6rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.fr-state--ok { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.fr-state--warn { background: var(--danger-soft); border-color: var(--danger); border-left-color: var(--danger); color: var(--ink); }

/* Read-only reviewer evaluation (shown to author / editor / reviewer history) */
.review-detail {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--white);
  border-radius: 8px;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  margin-bottom: 1.75rem;
}
.review-detail__decision {
  font-family: var(--f-serif);
  font-size: var(--fs-lg);
  letter-spacing: -0.015em;
  margin: 0.35rem 0 0.4rem;
  color: var(--ink);
}
.review-detail__meta { font-size: var(--fs-sm); color: var(--ink-2); margin: 0 0 0.2rem; }
.review-detail__label {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mute);
  margin: 1rem 0 0.35rem;
}
.review-detail__comments { margin: 0; color: var(--ink-2); line-height: 1.6; max-width: 66ch; }
.review-assess { list-style: none; margin: 1rem 0 0; padding: 0; border: 1px solid var(--line); border-radius: 4px; }
.review-assess__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.review-assess__row:last-child { border-bottom: 0; }
.review-assess__q { color: var(--ink-2); flex: 1 1 auto; }
.review-assess__a { flex-shrink: 0; font-weight: 600; font-size: var(--fs-xs); padding: 0.1rem 0.5rem; border-radius: 999px; }
.review-assess__a--yes { color: var(--accent); background: var(--accent-soft); }
.review-assess__a--no { color: var(--danger); background: var(--danger-soft); }
.review-assess__a--na { color: var(--mute); background: var(--paper-2); }

/* Editor download panel */
.fr-exports {
  /* white card look (like the Overview boxes); width unchanged (full column) */
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 24px 50px -30px rgba(22, 22, 24, 0.20);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 2rem;
}
.fr-exports__group { margin-top: 0.85rem; }
.fr-exports__label {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mute);
  margin: 0 0 0.5rem;
}
.fr-exports__buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }