:root {
  color-scheme: light;
  --bg: #f7f6f3;
  --bg-soft: #f1efea;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --panel-dark: #14233b;
  --line: #e0ddd5;
  --line-strong: #c9c5ba;
  --text: #1b1c1e;
  --muted: #5d6066;
  --accent: #1f3a5f;
  --accent-strong: #7a2230;
  --glow: rgba(31, 58, 95, 0.08);
  --shadow: 0 1px 2px rgba(20, 22, 28, 0.05);
  --radius-xl: 10px;
  --radius-lg: 8px;
  --radius-md: 6px;
  --max-width: 1100px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  font-weight: 600;
}

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

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

.page-shell {
  position: relative;
  overflow: hidden;
}

.container {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 2rem), var(--max-width));
  margin: 0 auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(1.1) blur(8px);
  background: rgba(247, 246, 243, 0.9);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.brand-mark {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 0.4rem;
  background: var(--accent);
  color: #ffffff;
  border: 1px solid var(--accent);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.brand-copy {
  min-width: 0;
}

.brand-copy strong,
.brand-copy span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-copy strong {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brand-copy span {
  font-size: 0.82rem;
  color: var(--muted);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav a {
  color: var(--muted);
  font-size: 0.94rem;
  transition: color 160ms ease;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--text);
}

.nav .invite-pill {
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-weight: 600;
}

.nav .invite-pill:hover,
.nav .invite-pill:focus-visible {
  background: var(--accent);
  color: #ffffff;
}

/* ------------------------------------------------------------------ *
   Mobile hamburger toggle. Hidden on desktop; shown at <=980px where
   the inline nav collapses into a dropdown panel.
 * ------------------------------------------------------------------ */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 0.4rem;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

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

.nav-toggle-bars {
  position: relative;
  display: block;
  width: 1.25rem;
  height: 0.85rem;
}

.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 200ms ease, opacity 160ms ease, top 200ms ease;
}

.nav-toggle-bars span:nth-child(1) {
  top: 0;
}

.nav-toggle-bars span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.nav-toggle-bars span:nth-child(3) {
  top: 100%;
  transform: translateY(-100%);
}

/* Animate the bars into an "X" when the menu is open. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

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

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

section {
  /* Reduced vertical spacing between sections */
  padding: 2rem 0;
}

.hero {
  /* Slightly tighter hero spacing to match reduced section gaps */
  padding: 2rem 0 1.25rem;
}

.hero-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
  align-items: stretch;
}

.hero-copy,
.hero-panel,
.section-panel,
.organizer-card,
.focus-card,
.detail-card {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.hero-copy {
  padding: clamp(1.6rem, 2vw, 2.4rem);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  margin-top: 1rem;
  font-size: clamp(2rem, 5.5vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.hero-lead {
  margin-top: 1rem;
  max-width: 38rem;
  font-size: clamp(1.02rem, 2vw, 1.15rem);
  color: #33363b;
}

.hero-meta {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.meta-chip {
  padding: 0.7rem 0.95rem;
  border-radius: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.95rem;
}

.meta-chip strong {
  color: var(--text);
  font-weight: 700;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.1rem;
}

.button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.button {
  color: #ffffff;
  background: var(--accent);
  border: 1px solid var(--accent);
}

.ghost-button {
  color: var(--accent);
  border: 1px solid var(--line-strong);
  background: transparent;
}

.button:hover,
.button:focus-visible {
  background: #16304f;
}

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

.hero-footnote {
  margin-top: 0.9rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.hero-panel {
  border-radius: var(--radius-xl);
  padding: clamp(1.4rem, 2vw, 2rem);
  display: grid;
  gap: 1rem;
  align-content: start;
  background: var(--bg-soft);
}

.hero-panel-label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 600;
}

.hero-panel h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.hero-panel p {
  color: #33363b;
}

.signal-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.signal-list li {
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
}

.signal-list strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--text);
  font-size: 0.92rem;
}

.section-header {
  display: grid;
  gap: 0.6rem;
  /* Reduced header bottom margin to tighten the space before content */
  margin-bottom: 1rem;
}

.section-kicker {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 600;
}

.section-header h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.section-header p {
  color: var(--muted);
  font-size: 1.02rem;
}

.topic-intro {
  margin-top: 0.25rem;
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
}

.topic-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem 1.5rem;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.97rem;
}

.topic-list li {
  padding-left: 0.1rem;
}

.section-panel {
  border-radius: var(--radius-xl);
  padding: clamp(1.45rem, 3vw, 2rem);
}

.story-grid,
.focus-grid,
.format-grid,
.detail-grid,
.program-grid,
.organizer-grid {
  display: grid;
  gap: 1rem;
}

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

.story-main {
  grid-column: span 7;
}

.story-side {
  grid-column: span 5;
  display: grid;
  gap: 1rem;
}

.story-main p,
.story-side p {
  color: #33363b;
  font-size: 1rem;
}

.story-quote {
  padding: 1.2rem;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}

.story-quote strong {
  display: block;
  font-size: 1.1rem;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.focus-grid,
.format-grid,
.detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

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

#why .focus-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.focus-card,
.format-card,
.detail-card,
.program-day,
.organizer-card {
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

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

.program-day {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.format-card {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.program-day-header {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.program-day-header span {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.program-day-header strong {
  font-size: 1.15rem;
  line-height: 1.2;
}

.program-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.program-list li {
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.program-list time {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
}

.program-list span {
  color: var(--muted);
  font-size: 0.95rem;
}

.focus-card h3,
.format-card h3,
.detail-card h3,
.organizer-card h3 {
  font-size: 0.98rem;
  margin-bottom: 0.35rem;
  letter-spacing: 0;
}

.focus-card p,
.format-card p,
.detail-card p,
.organizer-card p {
  color: var(--muted);
  font-size: 0.9rem;
}

.focus-tag,
.organizer-role {
  display: inline-flex;
  margin-bottom: 0.5rem;
  padding: 0.18rem 0.5rem;
  border-radius: 3px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
   Summit banner: full-bleed SVG mountain at the top of the page with the
   organizers placed along the ridge. Short fixed height.
 * ------------------------------------------------------------------ */
.summit-banner {
  padding: 0;
  margin: 0;
}

.summit-scene {
  position: relative;
  width: 100%;
  height: clamp(120px, 16vw, 185px);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.summit-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Sun overlay (HTML element above the SVG). We position it to match the
   original SVG circle at cx=1030, cy=42 r=24 in the 1200x185 viewBox.
   It remains a perfect circle by default and becomes elliptical on very
   wide viewports. */
.sun-overlay {
  position: absolute;
  /* center the overlay at the circle's viewBox coordinates (cx=1030, cy=42)
     relative to the SVG viewBox (1200x185). Percentages map to the
     containing block's width/height which match the SVG filling the scene.
     Use translate(-50%,-50%) to position the element by its center. */
  left: 85.833333%; /* 1030 / 1200 * 100% */
  top: 22.702703%;  /* 42 / 185 * 100% */
  height: calc(48 / 185 * 100%); /* diameter relative to viewBox height */
  aspect-ratio: 1 / 1; /* keep square; width is computed from height */
  background: #ffffff;
  opacity: 0.7;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  transition: transform 240ms ease;
  z-index: 1;
}

.summit-label {
  position: absolute;
  left: 50.5%;
  top: 43%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: clamp(0.7rem, 1.7vw, 1.15rem);
  letter-spacing: 0.02em;
  color: var(--accent);
  pointer-events: none;
}

.summit-climbers {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 2;
}

.climber {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: max-content;
}

.climber img {
  width: clamp(2.1rem, 4.6vw, 3.4rem);
  height: clamp(2.1rem, 4.6vw, 3.4rem);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 2px solid #ffffff;
  box-shadow: 0 3px 9px rgba(20, 22, 28, 0.28);
  background: var(--panel);
}

.climber--peak img {
  width: clamp(2.5rem, 5.4vw, 4rem);
  height: clamp(2.5rem, 5.4vw, 4rem);
  border-color: #f4f7fb;
}

.climber-name {
  padding: 0.04rem 0.4rem;
  border-radius: 999px;
  background: rgba(20, 35, 59, 0.82);
  color: #ffffff;
  font-size: clamp(0.55rem, 1.1vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  backdrop-filter: blur(2px);
}

.organizer-grid {
  /* More compact grid: four columns on wide screens */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}

.organizer-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  /* Reduce inner padding so the whole card is smaller */
  padding: 0.75rem;
}

.organizer-photo {
  width: 100%;
  /* Square thumbnail keeps faces fully visible across varied source crops
     while staying compact. Per-image object-position overrides are set
     inline on the <img> elements. */
  aspect-ratio: 1 / 1;
  max-width: 8.5rem;
  border-radius: calc(var(--radius-lg) - 0.35rem);
  border: 1px solid var(--line);
  object-fit: cover;
  object-position: center 20%;
}

/* Wider variant for landscape/environmental portraits: same height as the
   square thumbnails (8.5rem at the capped size) but wider (3:2). Used where
   the source is a wide shot and there is horizontal space to spare. */
.organizer-photo--wide {
  aspect-ratio: 3 / 2;
  max-width: 12.75rem;
}

.organizer-card a {
  color: var(--accent);
  font-weight: 600;
  width: fit-content;
  border-bottom: 1px solid transparent;
}

.organizer-card a:hover,
.organizer-card a:focus-visible {
  border-bottom-color: var(--accent);
}

.detail-card strong {
  color: var(--text);
}

.closing-panel {
  border-radius: var(--radius-xl);
  padding: clamp(1.55rem, 3vw, 2.25rem);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.closing-panel h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.closing-panel p {
  margin-top: 0.7rem;
  color: #33363b;
}

.closing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.9rem;
}

.signup-panel {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  border-radius: var(--radius-xl);
  padding: clamp(1.55rem, 3vw, 2.25rem);
  display: grid;
  gap: 0.9rem;
}

.signup-panel h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.signup-panel p {
  color: #33363b;
  max-width: 46rem;
}

.signup-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.4rem;
}

.partners {
  padding: 1rem 0 0;
}

.partners-panel {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.6rem;
}

.partner-card {
  min-height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--muted);
  text-align: center;
  transition: border-color 160ms ease, background 160ms ease;
}

.partner-card:hover,
.partner-card:focus-visible {
  border-color: var(--line-strong);
  background: var(--bg-soft);
}

.partner-card-logo {
  background: var(--panel-dark);
  border-color: var(--panel-dark);
  color: #d7dbe2;
}

.partner-card-logo:hover,
.partner-card-logo:focus-visible {
  background: #1a2c49;
  border-color: #1a2c49;
}

.partner-card-rub img {
  width: min(100%, 11rem);
  max-height: 3.2rem;
}

.partner-card-rub span {
  font-size: 0.92rem;
  line-height: 1.35;
}

.partner-card img {
  max-height: 3.8rem;
  width: min(100%, 13rem);
  object-fit: contain;
}

.partner-card span {
  font-size: 0.86rem;
}

.partner-card-text strong {
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.2;
}

.partner-card-lab {
  position: relative;
  display: flex; /* Ensure flex properties work */
  flex-direction: row;
  align-items: center; /* Vertically center content */
  justify-content: center; /* Horizontally center content */
  gap: 0;
  padding: 0;
  overflow: hidden;
  text-align: center; /* Optional: Center text if needed */
  min-height: 8rem;
  background: #e2e9f1;
  border-color: #e2e9f1;
}

.partner-lab-logo {
  position: absolute;
  top: 50%; /* Move top edge to middle of parent */
  left: 50%; /* Move left edge to middle of parent */
  transform: translate(-50%, -50%); /* Shift back by half of logo's width/height */
  width: 8.5rem;
  height: 100%;
  max-width: none;
  max-height: none !important;
  object-fit: contain;
  object-position: center; /* Center the image within its container */
  border-radius: 0;
  border: 0;
}

.partner-card-lab strong {
  color: #1b2942;
  font-size: 1.05rem;
  line-height: 1.2;
  align-self: center;
  flex: 1 1 auto;
  padding: 1rem 0.75rem 1rem 6.5rem;
  white-space: nowrap;
}

.partner-card-software-center img {
  width: min(100%, 14rem);
  max-height: 3.4rem;
}

footer {
  padding: 1.5rem 0 4rem;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.92rem;
  border-top: 1px solid var(--line);
  padding-top: 1.3rem;
}

/* Content is visible by default. The hidden start state is only applied when
   JavaScript is available (the script adds `js-reveal` to <html>), so the
   scroll fade-in is progressive enhancement and never blanks the page. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 980px) {
  .hero-grid,
  .focus-grid,
  .format-grid,
  .detail-grid,
  .program-grid,
  .partner-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Medium screens: organizers in three columns */
  .organizer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #why .focus-grid {
    grid-template-columns: 1fr 1fr;
  }

  .story-main,
  .story-side {
    grid-column: span 12;
  }

  /* Below the desktop layout the inline nav needs more room. Shrink the
     brand (drop the subtitle, tighten the title) so all links keep fitting
     next to it and the hamburger doesn't appear while there's still space. */
  .brand-copy span {
    display: none;
  }

  .brand-copy strong {
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    line-height: 1.15;
  }

  /* Let the brand be the flexible part that shrinks/ellipsizes, and keep the
     nav on a single row so links use the free space instead of wrapping down
     under the logo. */
  .brand {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .nav {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 0.85rem;
  }

  .nav a {
    font-size: 0.9rem;
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  /* Keep the header a single row (brand left, hamburger right). A later
     mobile rule sets .topbar-inner to column for the footer's sake; the
     header must stay horizontal so the toggle sits beside the logo. */
  .topbar-inner {
    flex-direction: row;
    align-items: center;
  }

  .nav-toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }

  /* Brand shrinks/ellipsizes as needed so the toggle always stays visible
     at the far right, on the same row. */
  .brand {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  /* Collapse the inline nav into a dropdown panel below the header.
     Hidden by default; the toggle button adds `is-open` to reveal it. */
  .nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0.4rem 0;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(20, 22, 28, 0.12);
    /* Collapsed state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
  }

  .nav a {
    padding: 0.85rem 1.25rem;
    font-size: 1rem;
    border-top: 1px solid var(--line);
  }

  .nav a:first-child {
    border-top: 0;
  }

  .nav .invite-pill {
    margin: 0.6rem 1.25rem 0.4rem;
    padding: 0.7rem 0.9rem;
    text-align: center;
    border-radius: 4px;
  }
}

/* On very wide screens make the sun slightly elliptical (wider than tall).
   Adjust min-width as desired to control when the effect kicks in. */
@media (min-width: 1400px) {
  .sun-overlay {
    transform: translate(-50%, -50%) scaleX(1.6) scaleY(0.9);
  }
}

@media (max-width: 720px) {
  section {
    /* Mobile: reduce section padding proportionally */
    padding: 1.8rem 0;
  }

  .hero {
    /* Mobile: reduce hero top padding */
    padding-top: 1.8rem;
  }

  .hero-grid,
  .focus-grid,
  .format-grid,
  .detail-grid,
  .program-grid,
  .partner-grid,
  .organizer-grid {
    grid-template-columns: 1fr;
  }

  #why .focus-grid {
    grid-template-columns: 1fr;
  }

  .program-list li {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .partner-card-lab {
    position: static;
    flex-direction: column;
    padding: 1rem;
    text-align: center;
  }

  .partner-lab-logo {
    position: static;
    width: min(100%, 8rem);
    height: auto;
    max-height: 4rem;
    align-self: center;
    object-fit: contain;
    border-radius: 6px;
  }

  .partner-card-lab strong {
    align-self: auto;
    padding: 0;
  }

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

  /* Mobile: allow the square thumbnail to grow a bit for readability */
  .organizer-photo {
    max-width: 10rem;
  }

  .organizer-photo--wide {
    max-width: 15rem;
  }

  /* Mobile: keep the banner short but give a little more height so the
     seven avatars stay clustered around the peak without crowding. */
  .summit-scene {
    height: clamp(110px, 30vw, 150px);
  }

  .climber img {
    border-width: 2px;
  }

  .footer-row {
    align-items: flex-start;
    flex-direction: column;
  }

  h1 {
    max-width: none;
  }

  .hero-panel h2,
  .closing-panel h2 {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js-reveal .reveal,
  .js-reveal .reveal.is-visible,
  .button,
  .ghost-button {
    transition: none;
    transform: none;
    opacity: 1;
  }

  /* Keep the menu functional but drop the motion (state stays instant). */
  .nav-toggle-bars span,
  .nav {
    transition: none;
  }
}