/* ==========================================================================
   Full Tilt Travel — Landing Page
   Brand tokens from Brand Identity (locked June 30, 2026)
   Same token block as the Luggage Quiz build — single source of truth.
   ========================================================================== */

@font-face {
  font-family: "Atami";
  src: url("fonts/Atami-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --galaxy-black: #2A2A2A;
  --pure-white: #FFFFFF;
  --valhalla: #2A1A45;
  --green-haze: #A3B19B;
  --deep-sea: #346666;
  --special-orange: #EE733A;

  --font-hero: "Atami", "Barlow Condensed", sans-serif;
  --font-head: "Barlow Condensed", sans-serif;
  --font-body: "Spectral", Georgia, serif;
  --font-accent: "Qwigley", cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--font-body);
  color: var(--galaxy-black);
  background: var(--pure-white);
  line-height: 1.6;
}

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

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}

.wrap--wide { max-width: 56rem; }

section { padding: 3.5rem 1.25rem; }

/* ---------- header ---------- */

.site-header {
  background: var(--pure-white);
  border-bottom: 1px solid #ECECEC;
  padding: 0.75rem 1.25rem;
}

.header-inner {
  max-width: 56rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-logo { width: 44px; height: 44px; }

.header-wordmark {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 1.15rem;
  color: var(--galaxy-black);
}

/* ---------- shared type ---------- */

.kicker {
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 1.1rem;
  color: var(--green-haze);
  margin-bottom: 1rem;
}

.kicker--on-teal { color: var(--pure-white); opacity: 0.85; }

.hero {
  font-family: var(--font-hero);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 8vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
}

.hero--small { font-size: clamp(1.8rem, 6.5vw, 2.5rem); }

.section-heading {
  font-family: var(--font-hero);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  line-height: 1.12;
  color: var(--valhalla);
  margin-bottom: 1.25rem;
}

.section-heading--light { color: var(--pure-white); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1.15rem;
  border-radius: 999px;
  padding: 0.95rem 2.2rem;
  min-height: 48px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Special Orange: fills only, CTA only, kept scarce */
.btn--cta {
  background: var(--special-orange);
  color: var(--pure-white);
}

.btn--cta:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(238, 115, 58, 0.35); }
.btn--cta:active { transform: none; }

.btn:focus-visible,
.signup-input:focus-visible {
  outline: 3px solid var(--deep-sea);
  outline-offset: 3px;
}

.hero-section .btn:focus-visible,
.hero-section .signup-input:focus-visible,
.close-section .btn:focus-visible,
.close-section .signup-input:focus-visible,
.quiz-section .btn:focus-visible {
  outline-color: var(--green-haze);
}

/* ---------- hero section ---------- */

.hero-section {
  background: var(--galaxy-black);
  color: var(--pure-white);
  padding-top: 3rem;
  padding-bottom: 3.5rem;
}

.hero-copy {
  font-size: 1.05rem;
  margin-bottom: 2rem;
}

.hero-fineprint {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--green-haze);
}

/* ---------- signup form (shared by hero + close) ---------- */

.signup-form { text-align: left; }

.signup-label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1rem;
  color: var(--green-haze);
  margin-bottom: 0.4rem;
}

.signup-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.signup-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--galaxy-black);
  background: var(--pure-white);
  border: 2px solid var(--green-haze);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  min-height: 52px;
}

.signup-input::placeholder { color: #9a9a9a; font-style: italic; }

.signup-form .btn--cta { width: 100%; }

.signup-form .btn--cta:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

.signup-error {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--green-haze);
  background: rgba(163, 177, 155, 0.12);
  border: 1px solid var(--green-haze);
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

.signup-success {
  margin-top: 1rem;
  font-size: 1.02rem;
  color: var(--pure-white);
  background: rgba(163, 177, 155, 0.16);
  border: 1px solid var(--green-haze);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  text-align: center;
}

/* ---------- book teaser ---------- */

.teaser-section { background: var(--pure-white); }

.teaser-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  margin-bottom: 2.5rem;
}

/* Typographic stand-in for the cover — swap for real art when it exists */
.title-treatment {
  background: var(--valhalla);
  color: var(--pure-white);
  border-radius: 14px;
  padding: 2.5rem 2rem 2.2rem;
  width: 100%;
  max-width: 20rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(42, 26, 69, 0.25);
}

.tt-major {
  display: block;
  font-family: var(--font-hero);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.9rem;
  line-height: 1.12;
  letter-spacing: 0.03em;
}

.tt-minor {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.14em;
  color: var(--green-haze);
  margin: 0.5rem 0;
}

.title-treatment__star {
  font-size: 1.3rem;
  color: var(--green-haze);
  margin: 1rem 0 0.8rem;
  line-height: 1;
}

.title-treatment__sub {
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.95rem;
}

.teaser-art {
  width: 100%;
  max-width: 15rem;
}

.teaser-copy {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}

.teaser-copy p { margin-bottom: 1rem; font-size: 1.02rem; }

.method-line {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.35rem;
  color: var(--valhalla);
  margin: 1.5rem 0 !important;
}

.teaser-cred {
  font-size: 0.92rem !important;
  font-style: italic;
  color: var(--deep-sea);
}

/* ---------- quiz CTA ---------- */

.quiz-section {
  background: var(--deep-sea);
  color: var(--pure-white);
}

.quiz-copy {
  font-size: 1.02rem;
  margin-bottom: 2rem;
}

/* ---------- email close ---------- */

.close-section {
  background: var(--galaxy-black);
  color: var(--pure-white);
  padding-bottom: 4rem;
}

.close-copy {
  font-size: 1.02rem;
  margin-bottom: 2rem;
}

.signoff-line {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 1.25rem;
  color: var(--green-haze);
  margin-top: 3rem;
}

.signoff-accent {
  font-family: var(--font-accent);
  font-size: 2.8rem;
  line-height: 1;
  color: var(--green-haze);
  transform: rotate(-3deg);
  margin: 0.2rem 0 0.6rem;
}

.signoff-brand {
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 1rem;
  color: var(--pure-white);
  opacity: 0.7;
}

.footer-legal {
  margin-top: 2.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--green-haze);
}

.footer-legal a {
  color: var(--green-haze);
  text-decoration: none;
}

.footer-legal a:hover { text-decoration: underline; }

.footer-legal .footer-sep { margin: 0 0.5rem; opacity: 0.6; }

/* ---------- larger screens ---------- */

@media (min-width: 700px) {
  section { padding: 4.5rem 2rem; }

  .signup-row { flex-direction: row; }
  .signup-input { flex: 1; }
  .signup-form .btn--cta { width: auto; white-space: nowrap; }

  .teaser-grid {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 2.5rem;
  }

  .title-treatment {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .teaser-art {
    max-width: 17rem;
    object-fit: contain;
  }
}