/* ============================================
   PBC Founders Edition - Landing Page CSS
   Sleek minimal business-professional aesthetic
   Palette extracted from event flyer (2026-05-13)
   Layout + mobile depth extension (2026-05-13)
   Mobile-first | 320 / 640 / 1024 / 1440 breakpoints
   Fluid via clamp() between breakpoints
   ============================================ */

/* ---- BRAND TOKENS (from flyer + SAM logo) ---- */
:root {
  /* Backgrounds (dark mode default) */
  --bg-primary:    #0E1B3A;   /* dominant flyer navy */
  --bg-secondary:  #16234A;   /* card backgrounds */
  --bg-tertiary:   #1B2D52;   /* SAM logo navy, frames */

  /* Accents — PRIMARY hierarchy (2026-05-13 Sam direction):
     orange (SAM logo) = PRIMARY CTA color, lime = secondary highlight, cyan = focus only. */
  --accent-primary:        #F26E3A;   /* SAM logo orange — primary CTAs */
  --accent-primary-soft:   #F58660;   /* orange hover/active */
  --accent-secondary:      #C8E83E;   /* lime — keyword highlight + I Krave lockup + countdown */
  --accent-secondary-soft: #D9F060;   /* lime hover */
  --accent-cyan:           #3FA9F5;   /* flyer cyan — FOCUS RINGS + eyebrow only */
  --accent-cyan-soft:      #5BB8F8;

  /* Legacy aliases kept for safety (point to new hierarchy) */
  --accent-lime:        var(--accent-secondary);
  --accent-lime-soft:   var(--accent-secondary-soft);
  --accent-sam-orange:  var(--accent-primary);

  /* Text */
  --text-primary:    #F5F7FA;   /* near-white body */
  --text-secondary:  #A0AEC8;   /* muted with navy tint */
  --text-tertiary:   #6B7A9A;
  --text-on-primary: #FFFFFF;   /* white on orange (high contrast) */
  --text-on-lime:    #0E1B3A;
  --text-on-cyan:    #0E1B3A;
  --text-on-orange:  #FFFFFF;

  /* Borders */
  --border:          rgba(245, 247, 250, 0.10);
  --border-strong:   rgba(245, 247, 250, 0.18);
  --border-cyan:     rgba(63, 169, 245, 0.4);
  --border-primary:  rgba(242, 110, 58, 0.4);
  --border-lime:     rgba(200, 232, 62, 0.4);

  /* States */
  --error:    #FF6B6B;
  --success:  #52D1A4;

  /* Type */
  --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 7.5rem;

  /* Fluid section padding (48 → 150px) */
  --section-padding: clamp(3rem, 10vw, 9.375rem);

  /* Fluid container side padding */
  --container-pad: clamp(1rem, 4vw, 2.5rem);

  /* Radius (sharp, not bubbly) */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-lime: 0 8px 24px rgba(200, 232, 62, 0.25);
  --shadow-primary: 0 8px 24px rgba(242, 110, 58, 0.32);
  --shadow-flyer: 0 30px 80px rgba(10, 22, 40, 0.45);
}

/* ============================================
   RESET + BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.1875rem);   /* 17 → 19px fluid */
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* mobile padding so sticky CTA doesn't cover content; reset on desktop below */
  padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
}

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

a { color: var(--accent-cyan); text-decoration: none; }
a:hover { color: var(--accent-cyan-soft); text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-md);
  color: var(--text-primary);
}

p { margin: 0 0 var(--space-md); max-width: 65ch; }

button { font-family: inherit; cursor: pointer; }

::selection {
  background: var(--accent-lime);
  color: var(--text-on-lime);
}

/* Accessible focus rings (keyboard only) */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip-to-content (visually hidden until focused) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--accent-lime);
  color: var(--text-on-lime);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  z-index: 1000;
  transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 1rem;
  text-decoration: none;
}

/* Smooth scroll offset for anchor targets */
[id="rsvp"], [id="expect"], [id="room"], [id="cohosts"], [id="main"] {
  scroll-margin-top: 80px;
}

/* ============================================
   LAYOUT
   ============================================ */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.container--narrow { max-width: 640px; }

.section {
  padding-block: var(--section-padding);
}

.section__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: var(--space-lg);
}

.section__title--center { text-align: center; }

.section__lede {
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.1875rem);
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
  max-width: 60ch;
}

.section__lede--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.95rem 1.75rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: -0.01em;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  user-select: none;
}

.btn--primary {
  background: var(--accent-primary);
  color: var(--text-on-primary);
  border-color: var(--accent-primary);
}

.btn--primary:hover:not(:disabled) {
  background: var(--accent-primary-soft);
  border-color: var(--accent-primary-soft);
  color: var(--text-on-primary);
  transform: scale(1.02) translateY(-1px);
  box-shadow: var(--shadow-primary);
  text-decoration: none;
}

.btn--primary:active:not(:disabled) {
  transform: scale(0.99);
}

.btn--primary:disabled,
.btn--primary[aria-busy="true"] {
  background: var(--text-tertiary);
  border-color: var(--text-tertiary);
  color: var(--text-primary);
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn--ghost:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  text-decoration: none;
}

.btn--lg {
  min-height: 56px;
  padding: 1.1rem 2rem;
  font-size: 1.05rem;
}

.btn--full { width: 100%; }

.btn__spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: none;
  animation: spin 0.7s linear infinite;
}

.btn[aria-busy="true"] .btn__spinner { display: inline-block; }
.btn[aria-busy="true"] .btn__label { opacity: 0.7; }

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

/* ============================================
   FLOATING RSVP PILL (desktop)
   ============================================ */
.rsvp-pill {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 90;
  display: none;            /* hidden on mobile (sticky CTA bar covers) */
  padding: 0.7rem 1.4rem;
  background: var(--accent-primary);
  color: var(--text-on-primary);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.rsvp-pill:hover {
  background: var(--accent-primary-soft);
  color: var(--text-on-primary);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

/* ============================================
   HERO — Path A: clean photographic
   Desktop: palm-2.jpg (WPB skyline)
   Mobile: palm-4.jpg (tall palm, navy sky)
   Overlay: navy #0E1B3A 75% top, 92% bottom for WCAG AA
   Flyer removed from hero — relocated to section 7
   ============================================ */
.hero {
  position: relative;
  min-height: clamp(560px, 90vh, 880px);
  overflow: hidden;
  background: var(--bg-primary);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* pure navy fallback if both images fail */
  background: var(--bg-primary);
}

/* Desktop photo (palm-2.jpg — WPB skyline) */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Mobile photo swaps to palm-4.jpg at ≤639px */
.hero__photo--desktop { display: block; }
.hero__photo--mobile  { display: none;  }

@media (max-width: 639px) {
  .hero__photo--desktop { display: none;  }
  .hero__photo--mobile  { display: block; object-position: center 20%; }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  /* Strong top coverage ensures eyebrow text is always AA contrast;
     fades through center then deepens at bottom for headline + CTA */
  background: linear-gradient(
    180deg,
    rgba(14, 27, 58, 0.78) 0%,
    rgba(14, 27, 58, 0.55) 30%,
    rgba(14, 27, 58, 0.62) 65%,
    rgba(14, 27, 58, 0.94) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) var(--container-pad) clamp(3rem, 6vw, 4.5rem);
}

.hero__content {
  max-width: 760px;
}

.hero__eyebrow {
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.hero__headline {
  font-size: clamp(2.5rem, 6vw, 5.25rem);          /* 40 → 84px */
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  color: var(--text-primary);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.hero__headline .accent {
  color: var(--accent-lime);
}

.hero__subhead {
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);  /* 17 → 22px */
  line-height: 1.55;
  color: var(--text-primary);
  opacity: 0.92;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 56ch;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero__cta {
  /* always large on hero */
  min-height: 60px;
  padding: 1.15rem 2.25rem;
  font-size: 1.0625rem;
}

/* ============================================
   META STRIP (When / Where / Admission)
   ============================================ */
.meta-strip {
  background: var(--bg-secondary);
  border-block: 1px solid var(--border);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.meta-strip__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}

.meta-item__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.meta-item__value {
  display: block;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.5;
  color: var(--accent-lime);
  font-weight: 600;
}

.meta-item__value em {
  font-style: normal;
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 0.95em;
}

/* ============================================
   EXPECT (single vertical column, big type, left lime rule)
   ============================================ */
.section--expect {
  background: var(--bg-primary);
}

.section--expect .container { max-width: 880px; }

.expect__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(1.5rem, 2.5vw, 2rem);
}

.expect__item {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
  border-left: 2px solid var(--accent-lime);
  background: none;
  border-radius: 0;
  align-items: flex-start;
}

.expect__icon {
  /* hidden — the left rule + big type carry it */
  display: none;
}

.expect__text {
  font-size: clamp(1.5rem, 3vw, 2.5rem);             /* 24 → 40px */
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-family: var(--font-display);
}

/* ============================================
   ROOM (people grid, no card chrome)
   ============================================ */
.section--room {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section--room .section__title { margin-bottom: var(--space-md); }
.section--room .section__lede { margin-bottom: var(--space-2xl); }

.room__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.room__cell {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  position: relative;
  transition: transform 0.3s ease;
}

.room__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.95);
  transition: filter 0.3s ease, transform 0.4s ease;
}

.room__cell:hover img {
  filter: saturate(1) brightness(1);
  transform: scale(1.03);
}

/* ============================================
   HOSTS (minimal divider strip)
   ============================================ */
.section--hosts {
  background: var(--bg-primary);
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

.hosts__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.hosts__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: var(--space-md);
  flex-direction: column;
}

.hosts__logo {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

.hosts__divider {
  width: 24px;
  height: 1px;
  background: var(--border-strong);
  display: inline-block;
}

.hosts__sponsor {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: var(--space-md) 0 0;
}

.hosts__sponsor a {
  color: var(--accent-cyan);
  font-weight: 500;
}

/* ============================================
   FORM (floating card on navy)
   ============================================ */
.section--form {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-top: 1px solid var(--border);
}

.section--form .section__title { color: var(--text-primary); }
.section--form .section__lede { color: var(--text-secondary); }

.form {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* form__row reserved for future multi-input rows; single-column by default.
   Name input is now a standalone full-width .form__group, no row split. */
.form__row {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

.form__group {
  margin-bottom: var(--space-lg);
}

.form__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.req { color: var(--accent-primary); }

.form__input {
  width: 100%;
  min-height: 48px;
  padding: 1rem 1.05rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.form__input::placeholder {
  color: var(--text-tertiary);
  font-weight: 400;
}

.form__input:focus,
.form__input:focus-visible {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(63, 169, 245, 0.30);
}

.form__input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.18);
}

.form__error {
  display: none;
  font-size: 0.85rem;
  color: var(--error);
  margin: 0.4rem 0 0;
}

.form__error.is-visible { display: block; }

.form__group--checkbox { margin-bottom: var(--space-lg); }

.form__checkbox-label {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
  cursor: pointer;
  min-height: 44px;
  padding-block: 0.25rem;
}

.form__checkbox {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--accent-lime);
  flex-shrink: 0;
  cursor: pointer;
}

.form__checkbox-text { flex: 1; }

.form__status {
  margin: var(--space-md) 0 0;
  font-size: 0.95rem;
  text-align: center;
  min-height: 1.2em;
  font-weight: 500;
}

.form__status.is-error { color: var(--error); }
.form__status.is-success { color: var(--success); }

.form__nudge {
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: var(--space-lg) 0 0;
}

.form__nudge strong { color: var(--text-primary); font-weight: 600; }

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--bg-primary);
  color: var(--text-secondary);
  padding: var(--space-xl) 0;
  text-align: center;
  border-top: 1px solid var(--border);
}

.footer__line {
  margin: 0 auto 0.4rem;
  font-size: 0.85rem;
  max-width: 65ch;
}

.footer__line--muted { color: var(--text-tertiary); }
.footer__line a { color: var(--accent-cyan); }
.footer__line a:hover { color: var(--accent-cyan-soft); }

/* ============================================
   STICKY MOBILE CTA
   ============================================ */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  text-align: center;
  background: var(--accent-primary);
  color: var(--text-on-primary);
  padding: 1.05rem 1rem calc(1.05rem + env(safe-area-inset-bottom, 0px));
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
  z-index: 100;
  transition: background 0.18s ease;
}

.sticky-cta:hover {
  background: var(--accent-primary-soft);
  color: var(--text-on-primary);
  text-decoration: none;
}

/* ============================================
   THANK YOU PAGE
   ============================================ */
.ty-body { padding-bottom: 0; }
.ty-body .sticky-cta,
.ty-body .rsvp-pill { display: none; }

.ty {
  padding: var(--section-padding) 0;
  text-align: center;
  background: var(--bg-primary);
  min-height: 80vh;
}

.ty__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--accent-lime);
  color: var(--text-on-lime);
  font-size: 1.75rem;
  font-weight: 700;
  border-radius: 50%;
  margin-bottom: var(--space-lg);
}

.ty__headline {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

.ty__subhead {
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
  max-width: 520px;
  margin-inline: auto;
}

.ty__confirm {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
  max-width: 520px;
  margin-inline: auto;
}

.ty__card {
  text-align: left;
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent-lime);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.ty__card-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: var(--space-sm);
}

.ty__card-line {
  margin: 0 0 0.3rem;
  font-size: 0.98rem;
  color: var(--text-primary);
}

.ty__card-line em { font-style: normal; color: var(--text-secondary); }

.ty__section {
  margin-bottom: var(--space-xl);
  text-align: left;
}

.ty__section--sponsor {
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  text-align: center;
}

.ty__section-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
  color: var(--text-primary);
}

.ty__calendar-grid,
.ty__share-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.btn--cal, .btn--share { font-size: 0.92rem; padding: 0.8rem 0.5rem; min-height: 44px; }

.ty__share-lede,
.ty__sponsor-lede {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.ty__signoff {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-cyan);
  margin-top: var(--space-xl);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

/* ============================================
   BREAKPOINT: 640px (large mobile / small tablet)
   ============================================ */
@media (min-width: 640px) {
  .form__row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  .meta-strip__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero__cta { width: auto; }

  .room__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hosts__logos {
    flex-direction: row;
  }

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

/* ============================================
   BREAKPOINT: 1024px (tablet landscape / desktop)
   ============================================ */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }

  .hero {
    min-height: clamp(640px, 88vh, 880px);
  }

  .hero__content {
    max-width: 880px;
  }

  .meta-strip__grid {
    max-width: 1120px;
    margin-inline: auto;
  }

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

  /* Hide mobile sticky CTA; show floating pill instead */
  .sticky-cta { display: none; }
  .rsvp-pill { display: inline-flex; }

  .form {
    padding: clamp(2rem, 3vw, 3rem);
  }
}

/* ============================================
   BREAKPOINT: 1280px+ (large desktop)
   ============================================ */
@media (min-width: 1280px) {
  .container { max-width: 1280px; }

  .section--expect .container { max-width: 960px; }

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

/* ============================================
   BREAKPOINT: 1440px+ (XL desktop)
   ============================================ */
@media (min-width: 1440px) {
  .container { max-width: 1280px; }
}

/* ============================================
   PRINT (invert to light mode for ink savings)
   ============================================ */
@media print {
  :root {
    --bg-primary:    #FFFFFF;
    --bg-secondary:  #F5F7FA;
    --bg-tertiary:   #EBEFF5;
    --text-primary:  #0E1B3A;
    --text-secondary: #4A5878;
    --text-tertiary: #6B7A9A;
    --border:        rgba(14, 27, 58, 0.12);
    --border-strong: rgba(14, 27, 58, 0.20);
  }

  html, body {
    background: #FFFFFF !important;
    color: #0E1B3A !important;
    padding: 0 !important;
  }

  .hero {
    min-height: auto;
    page-break-after: avoid;
  }

  .hero__media,
  .hero__overlay,
  .sticky-cta,
  .rsvp-pill,
  .skip-link,
  .form { display: none !important; }

  .hero, .section, .footer, .meta-strip {
    background: #FFFFFF !important;
    color: #0E1B3A !important;
    padding-block: 1.5rem !important;
  }

  h1, h2, h3, p, span, li, .expect__text, .meta-item__value {
    color: #0E1B3A !important;
    text-shadow: none !important;
  }

  .hero__headline .accent {
    color: #1B2D52 !important;
    text-decoration: underline;
  }

  .meta-strip__grid,
  .room__grid,
  .expect__list {
    grid-template-columns: 1fr !important;
  }

  .room__cell { display: none; }
  .room__cell:nth-child(-n+2) { display: block; }

  a { color: #1B2D52 !important; text-decoration: underline; }

  .expect__item {
    border-left-color: #1B2D52 !important;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }
}

/* ============================================
   META-ITEM enhanced (primary / secondary lines)
   ============================================ */
.meta-item__value {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.meta-item__primary,
.meta-item__primary-alt {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);   /* 20 → 26px */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.meta-item__primary { color: var(--accent-lime); }
.meta-item__primary-alt { color: var(--text-primary); }

.meta-item__secondary {
  display: block;
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 500;
  opacity: 0.85;
}

/* ============================================
   COUNTDOWN SECTION
   ============================================ */
.countdown-section {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(2rem, 5vw, 4rem);
  text-align: center;
}

.countdown-eyebrow {
  font-size: clamp(0.72rem, 0.7rem + 0.15vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin: 0 auto var(--space-lg);
}

.countdown-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  flex-wrap: nowrap;
  max-width: 720px;
  margin-inline: auto;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(56px, 14vw, 100px);
}

.countdown-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.75rem);                  /* 32 → 60px */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent-lime);
  font-variant-numeric: tabular-nums;
}

.countdown-label {
  margin-top: 0.4rem;
  font-size: clamp(0.65rem, 0.6rem + 0.15vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.countdown-divider {
  width: 1px;
  height: clamp(28px, 5vw, 48px);
  background: var(--border-strong);
  flex-shrink: 0;
}

@media (max-width: 420px) {
  .countdown-divider { display: none; }
  .countdown-grid {
    gap: clamp(0.75rem, 3vw, 1rem);
    justify-content: space-between;
  }
}

/* ============================================
   COHOST LOCKUP (logos with branded fallback chips)
   ============================================ */
.cohost-band { padding-block: clamp(2.5rem, 5vw, 4rem); }

.cohost-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: var(--space-md);
  flex-direction: column;
  flex-wrap: wrap;
}

.cohost-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}

.cohost-logo {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

.cohost-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  letter-spacing: 0.08em;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-sm);
}

.cohost-fallback--ikrave {
  background: transparent;
  color: var(--accent-lime);
  border: 1.5px solid var(--accent-lime);
}

.cohost-fallback--sam {
  background: transparent;
  color: var(--accent-sam-orange);
  border: 1.5px solid var(--accent-sam-orange);
}

/* Vertical lime rule — mirrors flyer's center divider between logo slots.
   Hidden on mobile (column layout); becomes a 1px×40px lime stroke on desktop. */
.cohost-divider {
  display: none;           /* hidden in mobile column layout */
  width: 1px;
  height: 40px;
  background: var(--accent-lime);
  flex-shrink: 0;
  align-self: center;
}

@media (min-width: 640px) {
  .cohost-divider { display: block; }
}

.cohost-caption {
  font-size: 0.92rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-sm);
}

@media (min-width: 640px) {
  .cohost-lockup { flex-direction: row; }
}

/* ============================================
   FORCED COLORS (Windows high contrast)
   ============================================ */
@media (forced-colors: active) {
  .btn--primary {
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }

  .btn--ghost {
    color: ButtonText;
    border-color: ButtonText;
  }

  .hero__overlay {
    background: Canvas;
    opacity: 0.85;
  }

  :focus-visible {
    outline: 2px solid Highlight;
  }

  .form__input {
    border-color: ButtonText;
  }

  a {
    color: LinkText;
  }

  .expect__item {
    border-left-color: Highlight;
  }
}

/* ============================================
   THANK-YOU COMPACT VARIANTS (countdown + cohost)
   ============================================ */
.ty__section--countdown {
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
}

.countdown-eyebrow--ty { margin-bottom: var(--space-md); }

.countdown-grid--compact {
  gap: clamp(0.4rem, 1.5vw, 1rem);
  max-width: 560px;
}

.countdown-grid--compact .countdown-num {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.countdown-grid--compact .countdown-divider {
  height: clamp(20px, 4vw, 36px);
}

.ty__card-line--time {
  font-size: 1.05rem;
  color: var(--accent-lime);
  margin-bottom: 0.5rem;
}

.ty__card-line--time em {
  color: var(--text-secondary);
  font-style: normal;
  font-size: 0.9em;
}

.ty__cohost-band {
  text-align: center;
  padding-block: var(--space-lg);
  border-top: 1px solid var(--border);
  margin-top: var(--space-xl);
}

.cohost-lockup--compact {
  gap: clamp(1rem, 3vw, 2rem);
  flex-direction: row;
  margin-bottom: 0;
}

.cohost-logo--sm { max-height: 40px; }

.cohost-fallback--sm {
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  padding: 0.4rem 0.9rem;
}

.cohost-divider--sm { height: 22px; }

/* ============================================
   FLYER CARD (section 7 — relocated from hero)
   Centered card, max 480px desktop, navy frame,
   lime "save this to share" caption below.
   ============================================ */
.section--flyer-card {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.flyer-card {
  max-width: 480px;
  margin-inline: auto;
  border: 2px solid var(--bg-tertiary);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-flyer);
}

.flyer-card__img {
  width: 100%;
  height: auto;
  display: block;
}

.flyer-card__caption {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-lime);
  background: var(--bg-tertiary);
  padding: 0.75rem 1rem;
  margin: 0;
  max-width: none;
}

/* ============================================
   SCENE STRIP (Palm Beach mood — 3 image slots)
   Graceful fallback: each cell shows a navy chip
   with location text if the image fails to load.
   ============================================ */
.section--scene {
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.scene__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin: 0 0 var(--space-sm);
}

.scene__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: var(--space-xl);
}

.scene__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.scene__cell {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.scene__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.92);
  transition: filter 0.3s ease, transform 0.4s ease;
}

.scene__cell:hover img {
  filter: saturate(1) brightness(1);
  transform: scale(1.02);
}

.scene__fallback {
  /* shown via JS onerror; hidden by default */
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(63, 169, 245, 0.18), transparent 70%),
    var(--bg-tertiary);
  padding: 1rem;
}

.scene__fallback em {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 0.85em;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  letter-spacing: 0.02em;
}

@media (min-width: 640px) {
  .scene__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .scene__cell {
    aspect-ratio: 4 / 5;
  }
}

/* ============================================
   SPONSOR FORM (thank-you page, inline)
   Mirrors RSVP form styling for consistency.
   Overrides ty__section--sponsor center-align
   so form labels/inputs read left-aligned.
   Added 2026-05-13 — replaces mailto: pattern.
   ============================================ */
.ty__section--sponsor {
  /* allow form children to be left-aligned without
     disturbing the centered title + lede */
}

.ty__section--sponsor .section__title,
.ty__section--sponsor .ty__sponsor-lede {
  text-align: center;
}

.sponsor-form {
  text-align: left;
  margin-top: var(--space-lg);
  /* form already has bg-secondary; sponsor section already has bg-secondary —
     remove inner card visual to avoid double-card nesting */
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
}

.sponsor-form .form__label-optional {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: none;
  margin-left: 0.35rem;
}

.form__textarea {
  min-height: 110px;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  resize: vertical;
  line-height: 1.5;
  font-family: var(--font-body);
}

.sponsor-success {
  background: var(--bg-tertiary);
  border: 1px solid var(--accent-lime);
  border-left: 3px solid var(--accent-lime);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 4vw, 2rem);
  margin-top: var(--space-lg);
  text-align: left;
}

.sponsor-success__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent-lime);
  margin: 0 0 var(--space-sm);
}

.sponsor-success__title:focus {
  outline: none;
}

.sponsor-success__body {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0;
  max-width: none;
}

.sponsor-success__body strong {
  color: var(--accent-cyan);
  font-weight: 600;
}

/* ============================================
   MOBILE AUDIT FIXES (2026-05-13 v5 pass)
   ============================================ */

/* 1. Sticky CTA was overlapping the in-page sponsor anchor on small phones
      when the user jumps from index.html#sponsor-form-section.
      Increase scroll-margin-top on the sponsor section so the headline
      isn't hidden under the floating RSVP pill on desktop. */
#sponsor-form-section {
  scroll-margin-top: 88px;
}

/* 2. Tap-target minimum on the share-hero buttons on narrow viewports.
      The current min-height 56px is fine but on 320px the 2-col grid can
      crush the second word in long labels. Tighten the label safely. */
@media (max-width: 360px) {
  .btn--share-hero {
    font-size: 0.88rem;
    padding: 0.85rem 0.5rem;
  }
}

/* 3. Sponsor form on very narrow phones: shrink internal padding so the
      form doesn't visually push against ty__section--sponsor's padding. */
@media (max-width: 420px) {
  .sponsor-form {
    padding: 1.25rem;
  }
}

/* 4. RSVP pill on 1024px+ was getting hidden under desktop hero on some
      laptops at 1280×800. Bump z-index above hero, keep below sticky cta. */
.rsvp-pill { z-index: 95; }

/* 5. Sticky CTA + form bottom on small phones — add bottom padding to the
      ty container so the last footer line isn't flush with the page edge
      when the sponsor success state replaces the form (which is taller
      than the success block on mobile). */
@media (max-width: 640px) {
  .ty .container--narrow {
    padding-bottom: var(--space-lg);
  }
}