:root {
  --ink: #18212f;
  --muted: #617083;
  --paper: #fffdf8;
  --card: #ffffff;
  --line: #dde6ef;
  --ocean: #0b5d78;
  --teal: #149487;
  --sun: #f4a73b;
  --coral: #e66b4f;
  --violet: #5b5da8;
  --shadow: 0 18px 50px -32px rgba(16, 34, 52, .55);
  --radius: 22px;
  --travel: #2687d9;
  --epic: #7b3ff2;
  --universal: #1867c9;
  --ioa: #128a55;
  --resort: #c98224;
  --mk: #3867e8;
  --epcot: #0098a7;
  --ak: #668323;
  --hs: #d94b45;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.65;
  background:
    radial-gradient(circle at top left, rgba(20, 148, 135, .13), transparent 34rem),
    linear-gradient(180deg, #f5fbff 0%, var(--paper) 40%);
}

a { color: inherit; }

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--day-color, var(--sun)) 42%, transparent), transparent 21rem),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--day-color-2, var(--coral)) 34%, transparent), transparent 18rem),
    linear-gradient(135deg, var(--hero-a, #06253c) 0%, var(--hero-b, #0b5d78) 46%, var(--hero-c, #20366f) 100%);
  color: white;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(110deg, transparent 0 26px, rgba(255, 255, 255, .045) 26px 28px),
    linear-gradient(120deg, transparent 0 48%, rgba(255, 255, 255, .10) 48% 52%, transparent 52%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.topbar,
.hero-inner {
  position: relative;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  max-width: 1120px;
  margin: auto;
  padding: 20px;
}

.brand {
  font-family: Fraunces, serif;
  font-weight: 700;
  text-decoration: none;
  font-size: 22px;
  white-space: nowrap;
}

.navlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.nav-day {
  border: 1px solid rgba(255, 255, 255, .24);
  border-left: 6px solid var(--day-color, rgba(255, 255, 255, .24));
  border-radius: 999px;
  padding: 7px 11px;
  text-decoration: none;
  font-size: 13px;
  background: rgba(255, 255, 255, .08);
}

.nav-day span { font-weight: 700; }
.nav-day small { opacity: .75; margin-left: 4px; }
.nav-day[aria-current="page"] { background: white; color: var(--ink); }
.menu { display: none; }

.hero-inner {
  max-width: 980px;
  margin: auto;
  padding: 74px 20px 88px;
}

.breadcrumbs { color: #d4ecf2; margin: 0 0 18px; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .22em;
  color: #bfeee8;
  font-weight: 700;
  font-size: 12px;
}

.hero h1 {
  font-family: Fraunces, serif;
  font-size: clamp(46px, 9vw, 96px);
  line-height: .95;
  margin: 10px 0 20px;
  max-width: 850px;
}

.lede { font-size: 20px; max-width: 720px; color: #e8f5f7; }
.hero-pills,
.legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.hero-lockup {
  display: flex;
  align-items: center;
  gap: 22px;
}

.theme-orb,
.card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 82px;
  height: 82px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .22));
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .6);
  font-size: 42px;
}

.card-icon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  margin-bottom: 16px;
  font-size: 30px;
}

.pill,
.reservation-dot {
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  font-weight: 700;
  font-size: 13px;
}

.container {
  max-width: 1120px;
  margin: -38px auto 80px;
  padding: 0 20px;
  position: relative;
}

.panel,
.day-card,
.plan-card,
.today-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.panel { padding: 28px; margin-bottom: 24px; }
.panel h2,
.day-card h2,
.plan-card h2,
.today-card h2 { font-family: Fraunces, serif; line-height: 1.1; }
.intro { border-top: 6px solid var(--sun); }

.day-grid,
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin: 24px 0;
}

.day-card,
.plan-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-top: 9px solid var(--day-color, var(--teal));
}
.day-card::before,
.plan-card::before,
.today-card::before,
.theme-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--day-color, var(--teal)) 14%, transparent), transparent 44%);
  pointer-events: none;
}
.day-card > *,
.plan-card > *,
.today-card > *,
.theme-banner > * { position: relative; }
.day-card h2 { font-size: 25px; margin: 6px 0 10px; }
.day-card h2 a { text-decoration: none; }
.kicker {
  margin: 0;
  color: var(--day-color, var(--teal));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}

.dining-list { columns: 2; gap: 38px; padding-left: 20px; }
.dining-list li { break-inside: avoid; margin: 0 0 10px; }
.dining-list span { color: var(--coral); font-weight: 800; }

.day-main { max-width: 900px; }
.today-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 22px;
  padding: 26px;
  border-top: 8px solid var(--day-color, var(--teal));
  margin-bottom: 24px;
}
.today-heading { display: flex; align-items: center; gap: 16px; }
.today-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; }
.today-card dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.today-card dd { margin: 0; font-weight: 800; }

.theme-banner {
  position: relative;
  overflow: hidden;
  margin: 0 0 24px;
  padding: 28px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--day-color) 18%, white), white);
  border: 1px solid color-mix(in srgb, var(--day-color) 36%, var(--line));
  box-shadow: var(--shadow);
}
.theme-banner h2 { font-family: Fraunces, serif; margin: 4px 0 8px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.morning-card { border-top-color: var(--sun); }
.evening-card { border-top-color: var(--violet); }
.reservation { border-top-color: var(--coral); }
.transport-card { border-top-color: var(--ocean); }
.packing-card { border-top-color: var(--teal); }
.idea-card { border-top-color: var(--resort); }
.muted-card { color: var(--muted); }

.nextprev {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}

.nextprev a {
  background: var(--ink);
  color: white;
  border-radius: 999px;
  padding: 10px 16px;
  text-decoration: none;
  font-weight: 800;
}

footer { text-align: center; color: var(--muted); padding: 44px 20px; }

.theme-overview { --day-color: var(--sun); --day-color-2: var(--teal); --hero-a: #06253c; --hero-b: #0b5d78; --hero-c: #20366f; }
.theme-travel { --day-color: var(--travel); --day-color-2: #9bd7ff; --hero-a: #06365e; --hero-b: #2687d9; --hero-c: #66b9ef; }
.theme-epic { --day-color: var(--epic); --day-color-2: #16d6d1; --hero-a: #140b35; --hero-b: #4a22a8; --hero-c: #111f5c; }
.theme-universal { --day-color: var(--universal); --day-color-2: #f2c14e; --hero-a: #061a35; --hero-b: #184f9e; --hero-c: #0d2b5f; }
.theme-ioa { --day-color: var(--ioa); --day-color-2: #f0b33f; --hero-a: #062b1a; --hero-b: #128a55; --hero-c: #164d39; }
.theme-resort { --day-color: var(--resort); --day-color-2: #f2d28a; --hero-a: #3a210e; --hero-b: #a6651c; --hero-c: #5c3212; }
.theme-mk { --day-color: var(--mk); --day-color-2: #f4c95d; --hero-a: #10225c; --hero-b: #3867e8; --hero-c: #4b2e90; }
.theme-epcot { --day-color: var(--epcot); --day-color-2: #7ad7e8; --hero-a: #06364a; --hero-b: #0098a7; --hero-c: #145b84; }
.theme-ak { --day-color: var(--ak); --day-color-2: #d19a3a; --hero-a: #28350f; --hero-b: #668323; --hero-c: #314715; }
.theme-hs { --day-color: var(--hs); --day-color-2: #ffc857; --hero-a: #3b1420; --hero-b: #b83843; --hero-c: #54215f; }

.theme-travel,
.theme-epic,
.theme-universal,
.theme-ioa,
.theme-resort,
.theme-mk,
.theme-epcot,
.theme-ak,
.theme-hs {
  border-color: var(--day-color);
}

@media (max-width: 760px) {
  .menu {
    display: block;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .12);
    color: white;
    border-radius: 999px;
    padding: 8px 14px;
  }

  .navlinks {
    display: none;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 62px;
    background: #082a43;
    border-radius: 18px;
    padding: 14px;
    z-index: 3;
  }

  .navlinks.open { display: flex; }
  .navlinks a { width: 100%; }
  .hero-lockup,
  .split,
  .today-card { grid-template-columns: 1fr; }
  .hero-lockup { align-items: flex-start; flex-direction: column; }
  .today-card dl { grid-template-columns: 1fr; }
  .dining-list { columns: 1; }
}

@media print {
  .topbar,
  .nextprev,
  .menu { display: none; }
  body { background: white; }
  .container { margin: 0 auto; }
  .panel,
  .day-card,
  .plan-card,
  .today-card { box-shadow: none; break-inside: avoid; }
}