/* ==========================================================================
   The Madeira Invitational 2026 — main stylesheet
   Print-invitation aesthetic: cream ground, navy serif, gold hairlines.
   ========================================================================== */

/* ------------------------------ Fonts ---------------------------------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2');
}

/* ------------------------------ Tokens --------------------------------- */

:root {
  --cream: #F5F0E6;
  --cream-soft: #FAF7EF;
  --cream-deep: #EDE6D6;
  --navy: #1C2B45;
  --navy-deep: #12203A;
  --ink: #3C4457;
  --gold: #A6862F;
  --gold-soft: #C2A75E;
  --error: #A5442A;
  --line: rgba(28, 43, 69, 0.14);
  --line-gold: rgba(166, 134, 47, 0.38);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;

  --section-pad: clamp(4.5rem, 10vw, 7.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------ Base ----------------------------------- */

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

html {
  scroll-behavior: smooth;
}

html.i18n-pending body {
  visibility: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip; /* decorative SVGs bleed past the viewport on purpose */
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  /* Safety net: never let a long word/token bleed past the viewport
     (body uses overflow-x: clip, so overflow would be silently cut off). */
  overflow-wrap: break-word;
}

h2 {
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.15;
}

p {
  margin: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

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

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

.container {
  width: min(1140px, 100% - 3rem);
  margin-inline: auto;
}

section {
  scroll-margin-top: 5.5rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--cream);
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.skip-link:focus {
  left: 0.75rem;
  top: 0.75rem;
}

/* --------------------------- Shared pieces ------------------------------ */

.kicker {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--gold);
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.1rem 0;
}

.divider-left {
  justify-content: flex-start;
}

.divider-line {
  width: 56px;
  height: 1px;
  background: var(--line-gold);
  transform-origin: center;
}

.divider-diamond {
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}

/* Icons: 1.5 stroke navy line work, gold accent dot */
.icon {
  width: 24px;
  height: 24px;
  flex: none;
}

.icon path,
.icon rect,
.icon circle {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon .icon-accent {
  fill: var(--gold);
  stroke: none;
}

.icon .icon-accent-stroke {
  stroke: var(--gold);
}

.icon-lg {
  width: 34px;
  height: 34px;
}

.icon-btn {
  width: 18px;
  height: 18px;
}

/* ------------------------------ Buttons --------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 2.4rem;
  border: 1px solid var(--navy);
  border-radius: 2px;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
  z-index: -1;
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: scaleX(1);
}

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

.btn-ghost {
  background: transparent;
  color: var(--navy);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  color: var(--cream);
}

.btn-gold {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold-soft);
}

.btn-gold:hover,
.btn-gold:focus-visible {
  color: var(--navy-deep);
}

.btn-gold .icon path,
.btn-gold .icon rect {
  stroke: currentColor;
}

.btn-nav {
  padding: 0.55rem 1.4rem;
  font-size: 0.75rem;
}

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

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0.9rem 0;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), padding 0.4s var(--ease);
}

.site-header.scrolled {
  background: rgba(245, 240, 230, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
  padding: 0.55rem 0;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--navy);
  letter-spacing: 0.01em;
}

.brand-year {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--gold);
}

.nav-links {
  display: flex;
  gap: 2.2rem;
}

.nav-links a {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--navy);
  padding-bottom: 0.2rem;
  /* Never wrap: a two-line link doubles the header height and breaks the
     underline sweep below. This only holds because the breakpoint that hides
     these links is set wide enough for the longest translation to fit. Without
     that, nowrap does not save the header, it pushes the CTA off-viewport
     instead, which is worse. The two belong together. */
  white-space: nowrap;
  background: linear-gradient(var(--gold), var(--gold)) left bottom / 0 1px no-repeat;
  transition: background-size 0.35s var(--ease);
}

.nav-links a:hover,
.nav-links a:focus-visible {
  background-size: 100% 1px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.lang-btn {
  background: none;
  border: none;
  padding: 0.25rem 0.15rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--ink);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.25s ease, color 0.25s ease;
}

.lang-btn[aria-pressed='true'] {
  color: var(--gold);
  opacity: 1;
  box-shadow: 0 1px 0 var(--gold);
}

.lang-btn:hover {
  opacity: 1;
}

.lang-sep {
  color: var(--line-gold);
  font-size: 0.7rem;
}

/* ------------------------------- Hero ----------------------------------- */

.hero {
  position: relative;
  min-height: max(100svh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 7rem 0 8rem;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  animation: kenburns 14s var(--ease) both;
}

@keyframes kenburns {
  from {
    transform: scale(1.12) translateY(-1.5%);
  }
  to {
    transform: scale(1);
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28, 43, 69, 0.28) 0%, rgba(28, 43, 69, 0) 30%),
    linear-gradient(180deg, rgba(245, 240, 230, 0) 52%, rgba(245, 240, 230, 0.55) 78%, var(--cream) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-crest {
  width: clamp(104px, 12vw, 136px);
  height: auto;
  filter: drop-shadow(0 16px 30px rgba(28, 43, 69, 0.28));
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.kicker-line {
  width: 56px;
  height: 1px;
  background: var(--line-gold);
}

.hero-title {
  max-width: 17ch;
  margin-top: 1.4rem;
  font-size: clamp(2.75rem, 6.5vw, 4.75rem);
  line-height: 1.08;
  text-wrap: balance;
}

.hero-subtitle {
  max-width: 52ch;
  margin-top: 1.5rem;
  font-size: 1.1rem;
  color: var(--ink);
}

.hero-meta {
  margin-top: 1.6rem;
  font-weight: 500;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--navy);
}

.meta-sep {
  color: var(--gold);
  margin: 0 0.6rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.4rem;
}

/* Hero entrance sequence — pure CSS, runs once on first paint */
.hero-crest,
.hero-kicker,
.hero-title,
.hero-subtitle,
.hero-meta,
.hero-ctas {
  animation: heroIn 0.9s var(--ease) both;
}

.hero-crest { animation-delay: 0ms; }
.hero-kicker { animation-delay: 150ms; }
.hero-title { animation-delay: 350ms; }
.hero-subtitle { animation-delay: 500ms; }
.hero-meta { animation-delay: 650ms; }
.hero-ctas { animation-delay: 800ms; }

@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero-kicker span[data-i18n] {
  animation: trackIn 1.4s var(--ease) 0.15s both;
}

@keyframes trackIn {
  from {
    letter-spacing: 0.5em;
    opacity: 0;
  }
  to {
    letter-spacing: 0.24em;
    opacity: 1;
  }
}

.hero-kicker .kicker-line {
  transform-origin: center;
  animation: lineIn 1.1s var(--ease) 0.3s both;
}

@keyframes lineIn {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.scroll-cue {
  position: relative;
  margin-top: 3.2rem;
  width: 1px;
  height: 52px;
  background: var(--line-gold);
  overflow: hidden;
  animation: heroIn 0.9s var(--ease) 1.2s both;
}

.scroll-cue-dot {
  position: absolute;
  left: -1.5px;
  top: -4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  animation: cueTravel 2.6s ease-in-out 1.6s infinite;
}

@keyframes cueTravel {
  0% {
    transform: translateY(-6px);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateY(56px);
    opacity: 0;
  }
}

/* ----------------------------- Facts bar -------------------------------- */

.facts {
  position: relative;
  z-index: 2;
}

.facts-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: -4.6rem 0 0;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -35px rgba(28, 43, 69, 0.35);
}

.fact {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 1.6rem 1.8rem;
}

.fact + .fact {
  border-left: 1px solid var(--line);
}

.fact-label {
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.fact-value {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--navy);
  line-height: 1.25;
}

/* ------------------------------ Sections -------------------------------- */

.section {
  position: relative;
  padding: var(--section-pad) 0;
}

.section-head {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

.section-lede {
  margin-top: 1.4rem;
}

/* Decorative contour-line SVGs (island topography motif) */
.contours {
  position: absolute;
  width: min(620px, 70vw);
  height: auto;
  pointer-events: none;
  z-index: 0;
}

.contours path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  opacity: 0.09;
}

.contours-tr {
  top: -8%;
  right: -14%;
}

.contours-bl {
  bottom: -12%;
  left: -16%;
}

.section > .container {
  position: relative;
  z-index: 1;
}

/* ----------------------------- Experience ------------------------------- */

.section-experience {
  overflow: hidden;
}

.includes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
  gap: 1.1rem;
  margin-top: 3.4rem;
}

.include-card {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1.9rem 1.5rem 1.7rem;
  text-align: center;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.include-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-gold);
  box-shadow: 0 22px 40px -30px rgba(28, 43, 69, 0.4);
}

.include-card .icon {
  margin: 0 auto;
}

.include-card h3 {
  margin-top: 1.1rem;
  font-size: 1.35rem;
}

.include-card p {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ------------------------------- Venue ---------------------------------- */

.section-venue {
  background: var(--cream-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.venue-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.venue-figure {
  position: relative;
  margin: 0;
}

.venue-figure img {
  width: 100%;
  border-radius: 2px;
  box-shadow: 12px 12px 0 -1px var(--cream-deep), 12px 12px 0 0 var(--line-gold);
}

.venue-caption {
  margin-top: 1.4rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
}

.venue-copy h2 {
  margin-top: 0;
}

.venue-copy > p {
  margin-top: 1.3rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.8rem;
}

.chip {
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  padding: 0.35rem 1.05rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--cream);
}

.map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.8rem;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  background: linear-gradient(var(--gold), var(--gold)) left bottom / 0 1px no-repeat;
  transition: background-size 0.35s var(--ease);
}

.map-link:hover,
.map-link:focus-visible {
  background-size: 100% 1px;
}

.map-link .icon path {
  stroke: var(--gold);
}

/* ----------------------------- Programme -------------------------------- */

.timeline {
  max-width: 40rem;
  margin: 3.4rem auto 0;
  padding: 0;
  list-style: none;
}

/* Vertical rail drawn as each item's left border; the last item hides it so
   the line terminates cleanly at the final node. */
.timeline-item {
  position: relative;
  padding: 0 0 2.1rem 2.2rem;
  border-left: 1px solid var(--line-gold);
}

.timeline-item:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

/* diamond node sitting on the rail */
.timeline-item::before {
  content: '';
  position: absolute;
  left: -3.5px;
  top: 0.3rem;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
}

.timeline-time {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.timeline-body h3 {
  margin-top: 0.25rem;
  font-size: 1.25rem;
  line-height: 1.2;
}

.timeline-body p {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ------------------------------- Travel --------------------------------- */

.section-travel {
  background: var(--navy-deep);
  overflow: hidden;
}

.section-travel .contours path {
  opacity: 0.12;
}

.dimples {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.dimples circle {
  fill: rgba(245, 240, 230, 0.05);
}

.travel-inner {
  text-align: center;
  max-width: 44rem;
}

.section-travel h2 {
  color: var(--cream);
}

.travel-body {
  margin-top: 1.4rem;
  color: rgba(245, 240, 230, 0.78);
}

.section-travel .btn-gold {
  margin-top: 2.2rem;
}

/* -------------------------------- Stay ---------------------------------- */

/* Grid, not flex: a flex item would size to max-content and leave cards
   narrower than their track wherever the text fits on one line. */
.stay-partners > li {
  display: grid;
}

.partner-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--navy);
}

.partner-card h3 {
  margin-top: 0;
}

.partner-card p {
  color: var(--ink);
}

.partner-card .partner-cta {
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.partner-card .partner-cta::after {
  content: ' \2192';
}

/* ------------------------------ Register -------------------------------- */

.section-register {
  background: var(--cream-deep);
}

.register-card {
  max-width: 680px;
  margin: 0 auto;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 2px;
  padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: 0 40px 80px -50px rgba(28, 43, 69, 0.45);
}

#reg-form {
  margin-top: 2.6rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem 1.2rem;
}

.field {
  display: flex;
  flex-direction: column;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.field-full {
  grid-column: 1 / -1;
}

.field label,
.field legend {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--navy);
  margin-bottom: 0.45rem;
  padding: 0;
}

.opt {
  color: var(--ink);
  opacity: 0.55;
  text-transform: none;
  letter-spacing: 0.04em;
  font-weight: 400;
}

.field input[type='text'],
.field input[type='email'],
.field select,
.field textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--navy);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.8rem 1rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(166, 134, 47, 0.14);
}

.field input[aria-invalid='true'],
.field select[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
  border-color: var(--error);
}

.field textarea {
  resize: vertical;
  min-height: 5.2rem;
}

.field ::placeholder {
  color: rgba(60, 68, 87, 0.45);
}

.field-radios .radio {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.98rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.45rem;
  cursor: pointer;
}

.field-radios input[type='radio'],
.field-consent input[type='checkbox'] {
  accent-color: var(--gold);
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  cursor: pointer;
}

.field-consent .checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.88rem;
  line-height: 1.55;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}

.field-consent input[type='checkbox'] {
  margin-top: 0.2rem;
}

.privacy-link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.field-error {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--error);
}

.form-banner {
  margin-top: 1.4rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--error);
  border-radius: 2px;
  background: rgba(165, 68, 42, 0.07);
  color: var(--error);
  font-size: 0.9rem;
}

.btn-submit {
  width: 100%;
  margin-top: 1.8rem;
}

.btn-spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(245, 240, 230, 0.35);
  border-top-color: var(--cream);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.btn-submit.is-submitting .btn-spinner {
  display: inline-block;
}

.btn-submit[disabled] {
  cursor: default;
  opacity: 0.85;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Honeypot: visually removed, still in the DOM for bots */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Success panel */
.form-success {
  margin-top: 2.6rem;
  text-align: center;
}

.icon-success {
  width: 52px;
  height: 52px;
  margin: 0 auto 1.2rem;
}

.form-success h3 {
  font-size: 2rem;
}

.form-success > p {
  margin-top: 0.8rem;
}

.booking-note {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.5rem;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--line-gold);
  border-radius: 2px;
  background: var(--cream);
  font-size: 0.9rem;
  color: var(--navy);
}

.booking-note.emphasis {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(166, 134, 47, 0.12);
}

.noscript-note {
  margin-top: 1.6rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line-gold);
  font-size: 0.9rem;
}

.register-contact {
  margin-top: 2.2rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink);
}

.register-contact .contact-details {
  display: block;
  margin-top: 0.5rem;
}

.register-contact .contact-name {
  color: var(--navy);
  font-weight: 500;
}

.register-contact a {
  color: var(--gold);
  white-space: nowrap;
  background: linear-gradient(var(--gold), var(--gold)) left bottom / 0 1px no-repeat;
  transition: background-size 0.35s var(--ease);
}

.register-contact a:hover,
.register-contact a:focus-visible {
  background-size: 100% 1px;
}

.register-contact .meta-sep {
  color: var(--gold);
  margin: 0 0.55rem;
}

/* ------------------------------ Sponsors -------------------------------- */

.sponsors {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}

.sponsor-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 4.5rem);
  margin-top: 2.4rem;
}

.sponsor-logos a {
  display: block;
  line-height: 0;
}

/* Logos vary wildly in aspect ratio, so bound both dimensions and let each
   settle to a comparable optical weight rather than a shared height. */
.sponsor-logos img {
  max-height: clamp(48px, 6.5vw, 62px);
  max-width: min(190px, 44vw);
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(1);
  opacity: 0.66;
  transition: filter 0.35s ease, opacity 0.35s ease;
}

/* Square/stacked marks read smaller than wordmarks — give them a touch more. */
.sponsor-logos .sponsor-vpm,
.sponsor-logos .sponsor-island,
.sponsor-logos .sponsor-palheiro {
  max-height: clamp(58px, 7.5vw, 76px);
}

.sponsor-logos li:hover img,
.sponsor-logos li:focus-within img {
  filter: grayscale(0);
  opacity: 1;
}

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

.site-footer {
  position: relative;
  background: var(--navy-deep);
  color: rgba(245, 240, 230, 0.75);
  padding: 3.2rem 0 2.2rem;
  overflow: hidden;
}

.footer-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}

.footer-brand .brand-name {
  color: var(--cream);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
}

.footer-links a {
  color: rgba(245, 240, 230, 0.75);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  background: linear-gradient(var(--gold-soft), var(--gold-soft)) left bottom / 0 1px no-repeat;
  transition: background-size 0.35s var(--ease), color 0.25s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--cream);
  background-size: 100% 1px;
}

.lang-toggle-footer .lang-btn {
  color: rgba(245, 240, 230, 0.7);
}

.lang-toggle-footer .lang-btn[aria-pressed='true'] {
  color: var(--gold-soft);
  box-shadow: 0 1px 0 var(--gold-soft);
}

.footer-copyright {
  position: relative;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(245, 240, 230, 0.12);
  font-size: 0.8rem;
  color: rgba(245, 240, 230, 0.5);
}

/* --------------------------- Scroll reveals ----------------------------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  transition-delay: var(--rd, 0ms);
}

html.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* Divider draw-in + icon stroke draw once revealed */
html.js .reveal .divider-line {
  transform: scaleX(0);
  transition: transform 0.9s var(--ease) 0.15s;
}

html.js .reveal.in .divider-line {
  transform: scaleX(1);
}

/* Icon line work simply rides along with its card's reveal; a stroke-draw
   effect via pathLength proved unreliable in Chromium and was removed. */

/* --------------------------- Reduced motion ----------------------------- */

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

  .hero-media img,
  .hero-crest,
  .hero-kicker,
  .hero-kicker span[data-i18n],
  .hero-kicker .kicker-line,
  .hero-title,
  .hero-subtitle,
  .hero-meta,
  .hero-ctas,
  .scroll-cue,
  .scroll-cue-dot {
    animation: none;
  }

  html.js .reveal,
  html.js .reveal .divider-line {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .btn::after,
  .nav-links a,
  .include-card {
    transition: none;
  }
}

/* ----------------------------- Responsive ------------------------------- */

/* The section links are the first thing to go when the header runs out of room.
   They are a convenience, since the page scrolls fine without them, whereas the
   Register CTA sitting beside them is the point of the page. This breakpoint is
   set by the WIDEST TRANSLATION, not by a device: German "Anreise und
   Aufenthalt" needs about 1040px before the CTA starts getting clipped, and the
   clip is silent because body has overflow-x: clip, so there is no scrollbar to
   recover it. Raise this if a longer label ever lands, and check the header at
   the new width in every language. There is no hamburger: below this the links
   simply vanish, as they already do on every phone and tablet. */
@media (max-width: 1100px) {
  .nav-links {
    display: none;
  }
}

@media (max-width: 960px) {
  .facts-bar {
    grid-template-columns: 1fr 1fr;
  }

  .fact:nth-child(3) {
    border-left: none;
  }

  .fact:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .venue-split {
    grid-template-columns: 1fr;
  }

  .venue-figure {
    max-width: 480px;
  }
}

@media (max-width: 640px) {
  .nav {
    gap: 0.9rem;
  }

  .brand-name {
    font-size: 1.05rem;
  }

  .site-header .brand-year {
    display: none;
  }

  .nav-actions {
    gap: 0.85rem;
  }

  .btn-nav {
    padding: 0.5rem 0.95rem;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }

  .hero {
    padding-top: 6rem;
  }

  .hero-ctas .btn {
    width: 100%;
  }

  .hero-ctas {
    width: 100%;
    max-width: 340px;
  }

  .facts-bar {
    grid-template-columns: 1fr;
    margin-top: -3.4rem;
  }

  .fact {
    padding: 1.05rem 1.4rem;
  }

  .fact + .fact {
    border-left: none;
    border-top: 1px solid var(--line);
  }

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

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

/* Below this the header cannot hold both the language toggle and the CTA, so the
   CTA goes: the hero's Register button sits right underneath it, whereas the
   toggle has no other copy above the fold, and a German visitor who cannot find
   it reads the whole page in English. This used to be 360px, which was already
   1px-tight at 375px; the three-language toggle is ~42px wider than the
   two-language one and needs the extra room. Set by measurement, not by device:
   the CTA needs about 430px to clear the viewport, and this leaves margin. */
@media (max-width: 460px) {
  .btn-nav {
    display: none;
  }
}