/* ============================================================
   EAST OF THERE: visual identity. Site-specific.

   WHO THIS IS FOR
   East Coast parents and grandparents, roughly 30 to 60, planning
   family outings a few weeks out on a phone. Money is watched:
   in the 2025 Family Travel Survey, 73% named affordability as
   their biggest obstacle. Many have already met a sold-out gate or
   a price that only showed up at checkout. The question they bring
   is simple: can we get in, when do I book, and what will it cost?

   WHAT THE DESIGN HAS TO SAY
   Organized and cheerful, like the family calendar on the fridge.
   Every listing is a card with the same facts in the same place,
   so a parent can scan twenty of them in a minute.

   SIGNATURES
   A sunrise mark (east, and the Atlantic), a "family of four" price
   sticker in gold on every card, and booking labels that always
   spell out how you get in.

   COLOR
   Atlantic navy for ink and actions, sunrise gold and coral, sea
   glass and warm sand. Coral carries no text on light grounds;
   deep coral does, for "has sold out" notes. Booking levels are
   always written out. Every pair is checked by the build script.

   TYPE
   Gabarito for headings: round, friendly and bold without being
   babyish. Onest for reading: very clear at phone sizes.
   ============================================================ */

:root {
  --sand:       #fbf5ea;
  --card:       #ffffff;
  --ink:        #14213d;
  --ink-soft:   #4b5670;
  --navy:       #1d3461;
  --navy-deep:  #13254a;
  --gold:       #ffc94a;
  --seaglass:   #cfe8e1;
  --coral:      #e85d3f;   /* decoration only */
  --coral-wash: #fde4dc;
  --coral-deep: #a3321b;
  --line:       #eadfcd;   /* decorative rules only */

  --accent:     var(--navy);
  --accent-ink: #ffffff;
  --focus:      var(--coral-deep);
  --measure:    66ch;

  --display: 'Gabarito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:    'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

[hidden] { display: none !important; }

body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; background: var(--sand); color: var(--ink); }

.wrap { width: min(74rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 46rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.08; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom: 0.6rem; }
h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.3rem; }
p + p { margin-top: 0.8rem; }
a { color: var(--navy); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--coral-deep); }
a[href^="mailto:"] { overflow-wrap: anywhere; }

.eyebrow { font-weight: 700; font-size: 0.9375rem; color: var(--coral-deep); margin-bottom: 0.5rem; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 52ch; }
.fine { font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.8rem; }

/* ---- Header ------------------------------------------------ */
.site-header { background: var(--card); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.6rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.45rem; }
.brand .mark { width: 42px; height: 28px; color: var(--navy); flex-shrink: 0; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.2rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--gold); color: var(--ink); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--coral); }

main { padding-block: 2.5rem 4rem; }
.hero { padding-bottom: 1.5rem; }
.hero h1 { max-width: 20ch; margin-bottom: 0.8rem; }
.section { margin-top: 3.25rem; }
.count-line { margin-top: 1rem; font-weight: 600; }

.hero--home { display: grid; gap: 1rem 2rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
.sunrise { width: 100%; max-width: 22rem; height: auto; justify-self: center; }
@media (max-width: 48rem) { .hero--home { grid-template-columns: 1fr; } .sunrise { max-width: 14rem; order: -1; } }

/* ---- Season cards and four things -------------------------- */
.seasons { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.season { border-radius: 18px; padding: 1.3rem 1.4rem 1.4rem; max-width: none; }
.season--holiday { background: var(--navy); color: #ffffff; }
.season--holiday a { color: #ffffff; }
.season--holiday :focus-visible { outline-color: var(--gold); }
.season--fall { background: var(--gold); color: var(--ink); }
.season--fall a { color: var(--ink); }
.season h3 { font-size: 1.8rem; font-weight: 800; }
.season-tag { display: inline-block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.4rem; }
.fourthings { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.fourthings li { background: var(--card); border-radius: 14px; padding: 1rem 1.1rem; border-top: 5px solid var(--seaglass); max-width: none; }
.fourthings p { font-size: 0.975rem; color: var(--ink-soft); }

/* ---- Filter ------------------------------------------------ */
.filters { margin-top: 1.25rem; background: var(--card); border-radius: 16px; padding: 1rem 1.1rem; display: grid; gap: 0.75rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips button { min-height: 44px; padding: 0 1rem; border: 2px solid var(--ink-soft); border-radius: 999px; background: #ffffff; color: var(--ink); font-family: var(--body); font-weight: 600; font-size: 0.95rem; cursor: pointer; }
.chips button:hover { border-color: var(--navy); }
.chips button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #ffffff; }
.ahead { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; font-weight: 600; cursor: pointer; }
.ahead input { width: 1.25rem; height: 1.25rem; min-height: 0; accent-color: var(--navy); margin: 0; }
.filter-status { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

/* ---- Listings: the fridge-calendar cards -------------------- */
.region { margin-top: 3rem; }
.region-sub { color: var(--ink-soft); }
.listings { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
.listing { display: flex; flex-direction: column; background: var(--card); border-radius: 18px; padding: 1.1rem 1.15rem 0.9rem; max-width: none; box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(20, 33, 61, 0.06); }
.listing-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.where { font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); margin: 0; }
.level { display: inline-block; font-size: 0.8125rem; font-weight: 700; padding: 0.2rem 0.65rem; border-radius: 999px; white-space: nowrap; }
.level--timed { background: var(--gold); color: var(--ink); }
.level--reserve { background: var(--coral-wash); color: var(--coral-deep); }
.level--tickets { background: var(--seaglass); color: var(--ink); }
.level--walkup { background: #ffffff; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.listing h3 { font-size: 1.3rem; }
.kind { font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 0.6rem; }
.facts { margin: 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); padding-top: 0.1rem; }
.facts dd { margin: 0; font-size: 0.975rem; }
.total { margin: 0.8rem 0 0; background: var(--gold); border-radius: 12px; padding: 0.55rem 0.8rem; max-width: none; }
.total-label { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.total-value { display: block; font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.2; }
.total small { display: block; font-size: 0.8125rem; margin-top: 0.1rem; }
.flag { margin: 0.6rem 0 0; font-size: 0.925rem; border-radius: 10px; padding: 0.5rem 0.7rem; max-width: none; }
.flag--sellout { background: var(--coral-wash); color: var(--coral-deep); }
.flag--sellout a { color: var(--coral-deep); }
.flag--access, .flag--owned { background: var(--seaglass); color: var(--ink); }
.note { margin-top: 0.65rem; font-size: 0.95rem; }
.go { margin-top: auto; padding-top: 0.4rem; font-weight: 700; }
.go a { display: inline-flex; align-items: center; min-height: 44px; }
.checked { font-size: 0.8125rem; color: var(--ink-soft); margin: 0; }

/* ---- How we check: levels ---------------------------------- */
.levels { margin: 1rem 0 0; display: grid; gap: 0.7rem; max-width: 46rem; }
.levels div { display: grid; grid-template-columns: 9rem 1fr; gap: 0.75rem; align-items: center; background: var(--card); border-radius: 12px; padding: 0.7rem 0.9rem; }
.levels dd { margin: 0; }

/* ---- Panels, band, buttons, forms --------------------------- */
.panel { background: var(--card); border-radius: 16px; padding: clamp(1.25rem, 3vw, 2rem); }
.band { background: var(--seaglass); border-radius: 20px; padding: clamp(1.5rem, 4vw, 2.5rem); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem; background: var(--navy); color: #ffffff; border: 2px solid var(--navy); border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #ffffff; }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--card); color: var(--navy-deep); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.prose h2 { margin-top: 2.25rem; }
.prose ul { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.45rem; }

.signup { display: grid; gap: 0.6rem; max-width: 26rem; margin-top: 1rem; }
.signup label { font-weight: 700; }
.signup input { padding: 0.6rem 0.9rem; border: 2px solid var(--ink-soft); border-radius: 12px; background: #ffffff; }
.signup button { justify-self: start; }

/* ---- Footer: dark band, light focus ring ------------------- */
.site-footer { background: var(--navy-deep); color: var(--sand); margin-top: 2rem; padding-block: 2.5rem 3rem; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h2 { font-family: var(--body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #ffffff; display: inline-block; padding-block: 0.3rem; }
.site-footer a:hover { color: var(--gold); }
.site-footer .fine { color: #c9d3e6; margin-top: 2rem; }
.site-footer :focus-visible { outline-color: var(--gold); }

@media (max-width: 30rem) {
  .facts div { grid-template-columns: 1fr; gap: 0.1rem; }
  .levels div { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
  .listing, .season, .panel, .band, .btn, .chips button, .level, .total, .flag { border: 1px solid; }
}