/* Full Spread Party website theme
   Source of truth: /brand/Full-Spread-Party-Brand-Guide.pdf */
:root {
  --fsp-orange: #c2410c;
  --fsp-cream: #f7f4ed;
  --fsp-ink: #141414;
  --fsp-white: #ffffff;
  --fsp-rule: #ded8ce;
  --fsp-muted: rgba(20, 20, 20, .7);
  --fsp-font: Arial, sans-serif;
  --fsp-radius: 8px;
  --fsp-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  --fsp-shadow-hover: 0 4px 12px rgba(0, 0, 0, .10);

  /* Compatibility aliases for the existing pages. */
  --cream: var(--fsp-cream);
  --orange: var(--fsp-orange);
  --orange-light: var(--fsp-orange);
  --brown: var(--fsp-ink);
  --brown-mid: var(--fsp-muted);
  --yellow: var(--fsp-orange);
  --peach: var(--fsp-cream);
  --peach-dark: var(--fsp-rule);
  --white: var(--fsp-white);
  --gray-light: var(--fsp-rule);
  --paper: var(--fsp-cream);
  --paper-2: var(--fsp-white);
  --paper-3: var(--fsp-rule);
  --espresso: var(--fsp-ink);
  --espresso-2: var(--fsp-ink);
  --espresso-3: var(--fsp-ink);
  --ink: var(--fsp-ink);
  --ink-mid: var(--fsp-muted);
  --ink-soft: var(--fsp-muted);
  --line: var(--fsp-rule);
  --line-dark: rgba(247, 244, 237, .22);
  --clay: var(--fsp-orange);
  --clay-hot: var(--fsp-orange);
  --clay-deep: var(--fsp-orange);
  --mustard: var(--fsp-cream);
  --mustard-deep: var(--fsp-orange);
  --sage: var(--fsp-ink);
  --font-display: var(--fsp-font);
  --font-body: var(--fsp-font);
  --river: var(--fsp-orange);
  --river-dark: var(--fsp-orange);
  --foam: var(--fsp-cream);
  --sand: var(--fsp-rule);
  --muted: var(--fsp-muted);
}

html {
  color: var(--fsp-ink);
  background: var(--fsp-cream);
}

body,
button,
input,
select,
textarea {
  font-family: var(--fsp-font) !important;
}

body {
  color: var(--fsp-ink);
  background-color: var(--fsp-cream);
  font-size: 16px;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
.display,
.serif,
.h2,
.left-title,
.left-subtitle,
.form-heading,
.ticket-title,
.ticket-price,
.ticket-card h3,
.qty-num,
.receipt-head,
.receipt-row.total b,
.footer-brand span,
.footer-logo,
.nav-logo-text,
.brand-mark,
.story-note,
.join-handle,
.menu-row .name,
.menu-row .num,
.menu-row .price,
.next-when,
.next-facts,
.tile .cap {
  font-family: var(--fsp-font) !important;
  font-style: normal !important;
}

p {
  max-width: 65ch;
}

a {
  color: var(--fsp-orange);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fsp-orange) !important;
  outline-offset: 2px !important;
}

button,
input,
select,
textarea,
.btn,
.btn-primary,
.btn-outline,
.checkout-btn,
.ticket-cta,
.submit {
  border-radius: var(--fsp-radius) !important;
}

button,
input,
select,
textarea,
.btn,
.btn-primary,
.btn-outline,
.checkout-btn,
.ticket-cta,
.submit {
  min-height: 44px;
}

.btn,
.btn-primary,
.btn-outline,
.checkout-btn,
.ticket-cta,
.submit,
a,
button,
input,
select,
textarea {
  transition-duration: 200ms !important;
  transition-timing-function: ease-out !important;
}

.btn-clay,
.btn-primary,
.checkout-btn,
.ticket-cta,
.submit {
  background: var(--fsp-orange) !important;
  color: var(--fsp-white) !important;
  border-color: transparent !important;
  box-shadow: var(--fsp-shadow) !important;
}

.btn-clay:hover,
.btn-primary:hover,
.checkout-btn:hover:not(:disabled),
.ticket-cta:hover,
.submit:hover:not(:disabled) {
  background: var(--fsp-orange) !important;
  box-shadow: var(--fsp-shadow-hover) !important;
}

.card,
.menu-card,
.ticket,
.ticket-card,
.receipt,
.attendee-card,
.source-box,
.terms-box,
.order-summary,
.price-box,
.why-box,
.form-card,
.rsvp-card,
.editor,
.faq-item,
.location-box,
.info-box,
.notice,
.tile,
.reel,
.poster img,
.lightbox img {
  border-radius: var(--fsp-radius) !important;
  box-shadow: var(--fsp-shadow) !important;
}

.card:hover,
.menu-card:hover,
.ticket-card:hover,
.tile:hover,
.reel:hover {
  box-shadow: var(--fsp-shadow-hover) !important;
}

.nav-logo img {
  width: 96px !important;
  height: auto !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.nav-logo:hover img {
  transform: none !important;
}

.nav-logo-icon {
  width: 96px !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.nav-logo-text,
.footer-brand span {
  display: none !important;
}

.footer-brand img,
.footer-logo img {
  width: 128px !important;
  height: auto !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.footer-logo {
  display: flex !important;
  align-items: center !important;
  font-size: 0 !important;
}

.story-who a,
.story-open,
.story-note a,
#feedHandle,
.join a,
.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.brand-mark {
  width: 96px !important;
  height: 64px !important;
  color: transparent !important;
  background-image: url('/images/brand/logo-wordmark-orange.svg') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  overflow: hidden;
}

nav,
.nav,
header {
  border-color: var(--fsp-rule) !important;
}

.nav.solid,
.nav.always-solid,
nav:not(.on-dark) {
  background: var(--fsp-cream) !important;
  color: var(--fsp-ink) !important;
}

.section {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.hero h1,
.event-hero h1,
.left-title {
  font-size: clamp(49px, 6vw, 61px) !important;
  line-height: 1.05 !important;
}

.h2,
.section h2,
.event-main h2,
.form-heading {
  font-size: clamp(31px, 4vw, 39px) !important;
  line-height: 1.15 !important;
}

.lede,
.hero-sub,
.left-subtitle {
  font-size: 20px !important;
  line-height: 1.5 !important;
}

.kicker,
.hero-kicker,
.ticket-kicker,
.price-box-title,
.why-box-title,
.source-box-title,
.terms-box-title,
.summary-title,
.attendee-card-label {
  font-size: 13px !important;
}

.join {
  background: var(--fsp-orange) !important;
}

.join a:not(.btn),
.join .h2,
.join .lede,
.join .join-handle,
.join .kicker {
  color: var(--fsp-white) !important;
}

.gallery,
.footer,
footer,
.page-left {
  background: var(--fsp-ink) !important;
  color: var(--fsp-cream) !important;
}

.page-left .left-subtitle,
.page-left .event-tag,
.page-left .price-row.total .amount {
  color: var(--fsp-cream) !important;
}

.page-left .event-tag {
  background: var(--fsp-orange) !important;
}

@media (max-width: 640px) {
  .section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .hero h1,
  .event-hero h1,
  .left-title {
    font-size: 36px !important;
  }

  .h2,
  .section h2,
  .event-main h2,
  .form-heading {
    font-size: 31px !important;
  }

  nav,
  .nav {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .nav-logo img,
  .nav-logo-icon {
    width: 96px !important;
  }

  .footer-brand img,
  .footer-logo img {
    width: 128px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}