/* Lifetime of Magic. Design system.
   Palette: the original brand colors, tuned for contrast.
   - Navy and Sailor Blue carry text, links and structure.
   - Bill Yellow is the action color (primary buttons) and nothing else.
   - Hat Red is an accent for small marks only. It fails contrast as text, so it is never used for text. */

@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url(/assets/fonts/display.c7e1602806.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Source Serif 4 Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/assets/fonts/serif.382475f382.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Source Serif 4 Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url(/assets/fonts/serifItalic.b4f56ddc98.woff2) format('woff2-variations');
}

:root {
  --navy: #14223a;
  --sailor: #1e5daf;
  --yellow: #ffd23f;
  --red: #e63946;
  --paper: #fffbf0;
  --wash: #e9f0fa;
  --white: #ffffff;
  --ink: #14223a;
  --muted: #3b4a63;
  --line: #c9d3e3;
  --display: 'Bricolage Grotesque Variable', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --serif: 'Source Serif 4 Variable', Georgia, 'Times New Roman', serif;
  --radius: 0.6rem;
  --measure: 66ch;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4.5rem); font-stretch: 82%; letter-spacing: -0.02em; line-height: 1.02; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; line-height: 1.2; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
a { color: var(--sailor); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--navy); }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.4em; }
strong { font-weight: 650; }

:focus-visible { outline: 3px solid var(--sailor); outline-offset: 3px; border-radius: 2px; }
.band-navy :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: var(--yellow); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 0.5rem; top: -4rem; z-index: 100; background: var(--yellow); color: var(--navy); padding: 0.6rem 1rem; font-family: var(--display); font-weight: 600; border-radius: var(--radius); }
.skip:focus { top: 0.5rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wrap { width: min(100% - 3rem, 80rem); margin-inline: auto; }

/* Preview-only chrome */

/* Header */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 0.7rem; }
.logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--navy); }
.logo-img { display: block; height: 3.5rem; width: auto; }
.site-footer .logo-img { height: 4rem; }
.logo-light { color: #fff; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.4rem; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.3rem; list-style: none; margin: 0; padding: 0; }
.site-nav li { margin: 0; }
.site-nav a:not(.btn) { font-family: var(--display); font-weight: 560; font-size: 1rem; color: var(--navy); text-decoration: none; padding: 0.35rem 0; border-bottom: 2px solid transparent; }
.site-nav a:not(.btn):hover { border-bottom-color: var(--navy); }
.site-nav a[aria-current='page'] { border-bottom-color: var(--sailor); }
@media (max-width: 52rem) {
  .header-row { padding-block: 0.5rem; gap: 0.1rem 0.75rem; flex-wrap: wrap; }
  .site-header .logo-img { height: 2.75rem; }
  .site-nav { display: contents; }
  .site-nav .btn { order: 2; margin-left: auto; padding: 0.5rem 0.9rem; font-size: 0.95rem; }
  .site-nav ul { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; gap: 0.85rem; padding-bottom: 0.1rem; scrollbar-width: none; }
  .site-nav ul::-webkit-scrollbar { display: none; }
  .site-nav a:not(.btn) { font-size: 0.9rem; white-space: nowrap; }
}
.date-tool { background: var(--wash); border-radius: 1rem; padding: 1.4rem; margin: 1.5rem 0 2.5rem; }
.date-tool h2 { margin-top: 0; font-size: 1.4rem; }
.date-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.6rem; }
.date-list li { display: grid; gap: 0.1rem; background: #fff; border-left: 4px solid var(--sailor); border-radius: 0.4rem; padding: 0.7rem 0.9rem; margin: 0; }
.date-list li.is-past { border-left-color: var(--red); }
.date-list strong { font-family: var(--display); }
.date-tool .note { font-size: 0.9rem; color: var(--muted); margin-top: 0.8rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 620; font-stretch: 92%; font-size: 1.05rem; line-height: 1.1;
  padding: 0.85rem 1.35rem; border-radius: var(--radius);
  border: 2px solid var(--navy); text-decoration: none; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
  box-shadow: 0 3px 0 var(--navy);
}
.btn:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--navy); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--navy); }
.btn-primary { background: var(--sailor); color: #fff; }
.btn-primary:hover { background: #2a6bc2; color: #fff; }
.hero .btn-primary, .band-navy .btn-primary { background: var(--yellow); color: var(--navy); border-color: var(--navy); }
.hero .btn-primary:hover, .band-navy .btn-primary:hover { background: #ffdc66; color: var(--navy); }
.btn-secondary { background: transparent; color: var(--navy); }
.btn-secondary:hover { background: var(--wash); color: var(--navy); }
.btn-sm { padding: 0.55rem 1rem; font-size: 0.98rem; }
.hero .btn-secondary, .band-navy .btn-secondary { color: #fff; border-color: #fff; box-shadow: 0 3px 0 rgba(255, 255, 255, 0.35); }
.hero .btn-secondary:hover, .band-navy .btn-secondary:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem 1.1rem; align-items: center; margin-top: 1.6rem; }

/* Bands */
.band { padding-block: clamp(3rem, 7vw, 5.5rem); }
.band-wash { background: var(--wash); }
.band-navy { background: var(--navy); color: #fff; }
.band-navy a:not(.btn) { color: #fff; }
.band-navy p { color: #dce6f5; }
.band-navy h2, .band-navy h3 { color: #fff; }
.band-head { max-width: 46rem; margin-bottom: 2.4rem; }
.band-head p { font-size: 1.2rem; color: var(--muted); }
.band-navy .band-head p { color: #dce6f5; }
.lead { font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.5; color: var(--muted); max-width: 46rem; }

/* Hero (home) */
.hero {
  position: relative;
  background: var(--sailor) url(/route.svg) no-repeat right -4rem bottom -2rem / min(60rem, 90%) auto;
  color: #fff;
  padding-block: clamp(3rem, 8vw, 6.5rem);
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.hero::before { content: ''; position: absolute; inset: 0; background: url(/sparkles.svg) center / 52rem auto; pointer-events: none; }
.hero > .wrap { position: relative; }
.hero h1 { color: #fff; margin-bottom: 0.45em; }
.hero .lead { color: #dce6f5; }
.hero-facts { margin-top: 2rem; padding: 0; list-style: none; display: grid; gap: 0.35rem; color: #dce6f5; font-size: 1rem; }
.hero-facts li { margin: 0; padding-left: 1.4rem; position: relative; }
.hero-facts li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--yellow); }
@media (max-width: 56rem) { .hero-grid { grid-template-columns: 1fr; } }

/* The luggage tag: the home page's one memorable object. It is the first step of the real trip request. */
.tag {
  position: relative; background: var(--paper); color: var(--navy);
  border-radius: 1.4rem; padding: 3.4rem 1.6rem 1.7rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  transform-origin: 50% 1.1rem; transform: rotate(1.2deg);
  animation: tag-swing 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s both;
}
.tag::before { content: ''; position: absolute; top: 1.05rem; left: 50%; width: 1.25rem; height: 1.25rem; margin-left: -0.625rem; border-radius: 50%; background: var(--navy); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5); }
.tag-title { font-size: 1.55rem; margin: 0 0 0.3rem; }
.tag-sub { font-size: 1rem; color: var(--muted); margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 2px dashed var(--line); }
@keyframes tag-swing { 0% { transform: rotate(-5deg); } 35% { transform: rotate(3deg); } 65% { transform: rotate(0deg); } 100% { transform: rotate(1.2deg); } }
@media (max-width: 56rem) { .tag { transform: none; animation: none; } }
@media (prefers-reduced-motion: reduce) { .tag { animation: none; } .btn { transition: none; } }

/* Forms */
label, .label { display: block; font-family: var(--display); font-weight: 600; font-size: 0.98rem; margin-bottom: 0.3rem; }
.label-hint { font-weight: 400; color: var(--muted); }
input, select, textarea {
  width: 100%; font: inherit; font-family: var(--display); font-size: 1rem; color: var(--navy);
  background: #fff; border: 2px solid var(--navy); border-radius: 0.5rem; padding: 0.7rem 0.8rem;
}
textarea { min-height: 7rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--sailor); outline-offset: 2px; }
.field { margin-bottom: 1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 40rem) { .field-row { grid-template-columns: 1fr; } }
.form-note { font-size: 0.92rem; color: var(--muted); margin: 0.8rem 0 0; }
.form-status { margin: 0.8rem 0 0; font-family: var(--display); font-weight: 600; }
.form-status.is-ok { color: #0c5a2d; }
.form-status.is-err { color: #8a1c26; }
.is-hidden { display: none !important; }
.form-card { background: #fff; border: 2px solid var(--navy); border-radius: 1rem; padding: clamp(1.2rem, 3vw, 2rem); }
.form-step-title { font-size: 1.2rem; }

.news { max-width: 36rem; }
.news-title { font-size: 1.5rem; }
.news-row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.news-row input[type='email'] { flex: 1 1 14rem; width: auto; }
.band-navy .form-note, .band-navy .news p { color: #dce6f5; }

/* Parallel items: decisions, benefits. A heavy top rule marks each as a peer. */
.items { display: grid; gap: 2.2rem clamp(1.5rem, 4vw, 3rem); }
.items-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.items-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.items-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.item { border-top: 3px solid var(--navy); padding-top: 1rem; }
.item h3 { margin-bottom: 0.4rem; }
.item p { font-size: 1.05rem; color: var(--muted); }
.band-navy .item { border-top-color: var(--yellow); }
.band-navy .item p { color: #dce6f5; }
@media (max-width: 62rem) { .items-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .items-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .items-2, .items-3, .items-4 { grid-template-columns: 1fr; } }

/* The route: a real sequence, so it is numbered. */
.route { list-style: none; margin: 0; padding: 0; position: relative; counter-reset: stop; max-width: 46rem; }
.route::before { content: ''; position: absolute; left: 1.2rem; top: 1.4rem; bottom: 1.4rem; border-left: 3px dotted var(--sailor); }
.route li { position: relative; padding: 0 0 2rem 4rem; margin: 0; counter-increment: stop; }
.route li:last-child { padding-bottom: 0; }
.route li::before {
  content: counter(stop); position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--yellow); color: var(--navy); border: 2px solid var(--navy);
  font-family: var(--display); font-weight: 700; display: grid; place-items: center;
}
.route h3 { margin-bottom: 0.25rem; padding-top: 0.2rem; }
.route p { color: var(--muted); font-size: 1.05rem; margin-bottom: 0; }

/* Destination rows */
.dest-list { border-top: 2px solid var(--navy); }
.dest h3 { margin: 0; font-size: 1.6rem; }
.dest p { margin: 0; color: var(--muted); font-size: 1.05rem; }
.dest-minor h3 { font-size: 1.25rem; }

/* Short-answer block (answer engines and people both read this first) */
.answer { background: #fff; border-left: 6px solid var(--yellow); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.1rem 1.4rem; margin: 0 0 2rem; max-width: 46rem; box-shadow: 0 0 0 1px var(--line); }
.answer-q { font-family: var(--display); font-weight: 650; font-size: 1.1rem; margin: 0 0 0.3rem; }
.answer-a { margin: 0; }
.reviewed { font-family: var(--display); font-size: 0.95rem; color: var(--muted); margin-bottom: 1.5rem; }

/* Breadcrumbs */
.crumbs { padding-top: 1.4rem; font-family: var(--display); font-size: 0.92rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; margin: 0; padding: 0; }
.crumbs li { margin: 0; color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-right: 0.5rem; color: var(--line); }

/* Page head for inner pages */
.page-head { padding-block: clamp(1.25rem, 3.5vw, 2.5rem) clamp(1rem, 2.5vw, 2rem); }
.page-head h1 { font-size: clamp(2.2rem, 4.8vw, 3.8rem); max-width: 22ch; }

/* Long-form text */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.5rem, 3vw, 2rem); }
.prose h3 { margin-top: 1.8em; }
.prose table { border-collapse: collapse; width: 100%; font-family: var(--display); font-size: 0.98rem; margin: 1.4rem 0; }
.prose th, .prose td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { border-bottom: 2px solid var(--navy); }
.prose blockquote { margin: 1.5rem 0; padding: 0.2rem 0 0.2rem 1.2rem; border-left: 4px solid var(--sailor); color: var(--muted); }
.prose .table-wrap { overflow-x: auto; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 56rem) { .two-col { grid-template-columns: 1fr; } }

/* FAQ: native details, so answers are in the HTML for every reader and crawler */
.faq { max-width: 50rem; border-top: 2px solid var(--navy); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; font-family: var(--display); font-weight: 620; font-stretch: 92%; font-size: 1.2rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 400; color: var(--sailor); }
.faq details[open] summary::after { content: '\2212'; }
.faq .faq-a { padding: 0 0 1.2rem; }
.faq .faq-a p:last-child { margin-bottom: 0; }

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.review { margin: 0; }
.review blockquote { margin: 0 0 0.8rem; font-size: 1.05rem; padding-left: 1rem; border-left: 4px solid var(--yellow); }
.review figcaption { font-family: var(--display); font-weight: 600; font-size: 0.98rem; padding-left: 1rem; }
@media (max-width: 62rem) { .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .reviews { grid-template-columns: 1fr; } }

/* Guide library */
.guide-list { list-style: none; padding: 0; margin: 0 0 2.5rem; border-top: 2px solid var(--navy); }
.guide-list li { margin: 0; border-bottom: 1px solid var(--line); }
.guide-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1.5rem; padding: 1rem 0; text-decoration: none; color: var(--navy); }
.guide-list a:hover .g-title { text-decoration: underline; }
.g-title { font-family: var(--display); font-weight: 620; font-size: 1.15rem; }
.g-desc { grid-column: 1; color: var(--muted); font-size: 1rem; }
.g-date { font-family: var(--display); font-size: 0.9rem; color: var(--muted); grid-row: 1; grid-column: 2; }
.notice { background: #fff; border: 2px dashed var(--red); border-radius: var(--radius); padding: 1rem 1.2rem; font-family: var(--display); max-width: 46rem; }

/* CTA band */

/* Footer */
.foot-group ul, .social { list-style: none; margin: 0; padding: 0; }
.social { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem; margin: 2rem 0; }
.person { background: #fff; border: 2px solid var(--navy); border-radius: 1rem; padding: 1.4rem; }
.person h2, .person h3 { margin: 0.9rem 0 0.15rem; font-size: 1.35rem; }
.person .role { font-family: var(--display); font-weight: 600; color: var(--sailor); margin: 0 0 0.6rem; }
.person p { font-size: 1.02rem; color: var(--muted); }
.avatar { width: 5.5rem; height: 5.5rem; border-radius: 50%; background: var(--sailor); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.9rem; border: 3px solid var(--yellow); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-mini { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1.2rem 0; padding: 0; list-style: none; }
.team-mini li { display: flex; align-items: center; gap: 0.7rem; margin: 0; font-family: var(--display); font-weight: 600; }
.team-mini .avatar { width: 3rem; height: 3rem; font-size: 1.1rem; border-width: 2px; }

/* Cover art */
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.cards3 > div { background: #fff; border: 2px solid var(--navy); border-top: 8px solid var(--sailor); border-radius: 0.8rem; padding: 1rem 1.1rem; }
.cards3 > div:nth-child(2) { border-top-color: var(--yellow); }
.cards3 > div:nth-child(3) { border-top-color: var(--red); }
.cards3 h3 { margin: 0 0 0.3rem; font-size: 1.15rem; }
.cards3 p { margin: 0; font-size: 0.98rem; color: var(--muted); }
.delta { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: 0.6rem; }
.delta li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; margin: 0; padding: 0.7rem 1rem; background: var(--wash); border-radius: 0.6rem; font-family: var(--display); }
.delta b { font-weight: 700; }
.delta .was { color: var(--muted); text-decoration: line-through; }
.delta .now { color: var(--sailor); font-weight: 700; }

/* Reading layout rail */
.rail { position: sticky; top: 5.5rem; display: grid; gap: 1.2rem; }
@media (max-width: 56rem) { .rail { position: static; } }
.rail-title { font-family: var(--display); font-weight: 700; margin: 0 0 0.5rem; }
.toc { border-left: 3px solid var(--sailor); padding-left: 1rem; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.toc li { margin: 0; }
.toc a { font-family: var(--display); font-size: 0.98rem; text-decoration: none; color: var(--navy); }
.toc a:hover { color: var(--sailor); text-decoration: underline; }
.prose { max-width: 72ch; }
.prose h2 { scroll-margin-top: 6rem; }
.prose .answer { max-width: none; }
.page-head .lead { max-width: 54rem; }

/* Library */
.lib-search { display: block; width: min(100%, 28rem); margin: 0 0 1.5rem; }
.guide-grid { list-style: none; margin: 0 0 3rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.guide-grid li { margin: 0; }
.lib-group h2 { margin: 0 0 1rem; }
.lib-empty { display: none; font-family: var(--display); }
@media (prefers-reduced-motion: reduce) { .guide-card { transition: none; } }

.review-grid { columns: 3 18rem; column-gap: 1.5rem; }
.review-grid .review { break-inside: avoid; margin: 0 0 1.5rem; }
.items-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 56rem) { .items-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .items-3 { grid-template-columns: 1fr; } }

/* ===================================================================
   Magic layer: the park-day details. Sky headers, tickets, star CTAs,
   the red fun-fact bar, the starry footer and the interactive glossary.
   =================================================================== */
@keyframes twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes drift { from { background-position: 0 0; } to { background-position: 52rem 0; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.eyebrow { font-family: var(--display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sailor); margin: 0 0 0.5rem; display: inline-flex; align-items: center; gap: 0.45rem; }
.eyebrow::before { content: ''; width: 0.75rem; height: 0.75rem; background: var(--yellow); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.center { justify-content: center; text-align: center; }

/* Red fun-fact bar (top of every page) */
.magic-bar { background: #c8102e; color: #fff; font-family: var(--display); font-size: 0.92rem; position: relative; z-index: 60; }
.magic-bar-row { display: flex; align-items: center; justify-content: center; gap: 0.8rem; min-height: 2.4rem; padding-block: 0.3rem; }
.mb-text { margin: 0; text-align: center; animation: fadeIn 0.35s ease; }
.mb-kind { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; color: var(--yellow); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; margin-right: 0.35rem; }
.mb-kind::before { content: ''; width: 0.7rem; height: 0.7rem; background: var(--yellow); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 2.4s ease-in-out infinite; }
.mb-preview { flex: none; background: #fff; color: #c8102e; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2rem; padding: 0.12rem 0.55rem; cursor: help; }
.mb-controls { display: inline-flex; gap: 0.3rem; flex: none; }
.mb-btn { font: inherit; font-size: 0.75rem; line-height: 1; color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; width: 1.7rem; height: 1.7rem; cursor: pointer; display: grid; place-items: center; }
.mb-btn:hover { background: rgba(255, 255, 255, 0.28); }
.magic-bar :focus-visible { outline-color: var(--yellow); }
@media (max-width: 40rem) { .magic-bar { font-size: 0.85rem; } .mb-preview { display: none; } }

/* Unconfirmed text: a highlighter swipe with a red "confirm" sticker */
.claim-unconfirmed {
  color: inherit; padding: 0 0.15em; border-radius: 0.2em;
  background: linear-gradient(104deg, rgba(255, 210, 63, 0) 0.6%, rgba(255, 210, 63, 0.75) 2.5%, rgba(255, 225, 120, 0.6) 96%, rgba(255, 210, 63, 0) 99%);
  text-decoration: underline wavy #c8102e; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.claim-unconfirmed::after {
  content: '\2726  Confirm'; display: inline-block; margin-left: 0.4em; vertical-align: 0.25em;
  font-family: var(--display); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
  background: #c8102e; color: #fff; padding: 0.3em 0.6em; border-radius: 2rem; transform: rotate(-4deg); box-shadow: 0 2px 0 var(--navy);
}
.hero .claim-unconfirmed, .sky-head .claim-unconfirmed, .cta-magic .claim-unconfirmed, .band-navy .claim-unconfirmed { color: var(--navy); }

/* Sky page headers (every inner page) */
.sky-head { position: relative; overflow: hidden; background: var(--sailor); color: #fff; margin-bottom: clamp(2rem, 5vw, 3.5rem); isolation: isolate; }
.sky-head::before { content: ''; position: absolute; inset: 0; background: url(/sparkles.svg) left center / 46rem auto; opacity: 0.8; z-index: -1; animation: drift 120s linear infinite; }
.sky-art { position: absolute; inset: 0; z-index: -2; }
.sky-art svg { display: block; width: 100%; height: 100%; }
.sky-head.has-art::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--sailor) 0%, rgba(30, 93, 175, 0.92) 38%, rgba(30, 93, 175, 0.2) 70%, rgba(30, 93, 175, 0) 100%); }
.sky-head .page-head { padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(2.5rem, 6vw, 4.5rem); max-width: 46rem; }
.sky-head h1 { color: #fff; }
.sky-head .lead { color: #e6eefa; }
.sky-head .eyebrow { color: var(--yellow); }
.sky-head .crumbs li, .sky-head .crumbs a { color: #e6eefa; }
.sky-head .crumbs li + li::before { color: rgba(255, 255, 255, 0.5); }
.sky-head .crumbs [aria-current] { color: #fff; }
.sky-head :focus-visible { outline-color: var(--yellow); }
.sky-head .btn-primary { background: var(--yellow); color: var(--navy); }
.sky-head .btn-secondary, .cta-magic .btn-secondary { color: #fff; border-color: #fff; box-shadow: 0 3px 0 var(--navy); }
.sky-head .btn-secondary:hover, .cta-magic .btn-secondary:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
@media (max-width: 52rem) { .sky-head.has-art::after { background: rgba(30, 93, 175, 0.86); } }

/* 404 */
.lost { margin-bottom: 0; }
.lost-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem 3rem; align-items: center; padding-block: 3rem 5rem; }
.lost-art { width: 8rem; height: auto; animation: floaty 6s ease-in-out infinite; }
@media (max-width: 40rem) { .lost-inner { grid-template-columns: 1fr; } .lost-art { width: 5rem; } }

/* Ticket card (page rails) */
.ticket {
  position: relative; background: #fff; color: var(--navy); border-radius: 1rem; padding: 1.3rem 1.4rem 1.2rem;
  border: 2px solid var(--navy); box-shadow: 0 5px 0 var(--navy);
  -webkit-mask: radial-gradient(circle at 0 calc(100% - 4.4rem), transparent 0.8rem, #000 0.85rem) left / 51% 100% no-repeat, radial-gradient(circle at 100% calc(100% - 4.4rem), transparent 0.8rem, #000 0.85rem) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 calc(100% - 4.4rem), transparent 0.8rem, #000 0.85rem) left / 51% 100% no-repeat, radial-gradient(circle at 100% calc(100% - 4.4rem), transparent 0.8rem, #000 0.85rem) right / 51% 100% no-repeat;
  background-image: linear-gradient(var(--yellow), var(--yellow)); background-size: 100% 0.55rem; background-repeat: no-repeat;
}
.ticket-top { display: flex; justify-content: space-between; align-items: center; margin: 0.2rem 0 0.6rem; font-family: var(--display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sailor); }
.ticket-stamp { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px dashed #c8102e; transform: rotate(-12deg); background: url(/favicon.svg) center / 62% no-repeat; opacity: 0.9; }
.ticket h2 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.ticket p { font-size: 1rem; color: var(--muted); }
.ticket-stub { border-top: 2px dashed var(--line); padding-top: 1.1rem; margin: 1rem -0.4rem 0; text-align: center; }
.ticket-stub .btn { width: 100%; justify-content: center; }
.ticket-link { font-family: var(--display); font-size: 0.95rem; text-align: center; margin: 0.8rem 0 0; }

/* Star CTA band */
.cta-magic { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--sailor) 0%, #17468a 60%, var(--navy) 100%); color: #fff; padding-block: clamp(3rem, 7vw, 5.5rem); isolation: isolate; }
.cta-magic::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(/sparkles.svg) center / 40rem auto, url(/route.svg) no-repeat left -6rem bottom -4rem / 50rem auto; }
.cta-magic-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; align-items: center; }
.cta-copy { max-width: 40rem; }
.cta-magic h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 0.35em; }
.cta-magic p { color: #e6eefa; font-size: 1.2rem; }
.cta-magic .eyebrow { color: var(--yellow); }
.cta-magic .btn-primary { background: var(--yellow); color: var(--navy); }
.cta-magic :focus-visible { outline-color: var(--yellow); }
.cta-art { position: relative; width: 11rem; }
.cta-balloons { display: block; width: 100%; height: auto; animation: floaty 7s ease-in-out infinite; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.25)); }
@media (max-width: 44rem) { .cta-magic-inner { grid-template-columns: 1fr; } .cta-art { position: absolute; right: -1.5rem; top: -1rem; width: 6rem; opacity: 0.35; } }

/* Guide cards with cover art */
.guide-grid-3 { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.guide-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 2px solid var(--navy); border-radius: 1rem; overflow: hidden; text-decoration: none; color: var(--navy); box-shadow: 0 4px 0 var(--navy); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.guide-card:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 8px 0 var(--navy); color: var(--navy); }
.g-art { display: block; height: 7.5rem; background: var(--sailor); border-bottom: 2px solid var(--navy); overflow: hidden; }
.g-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 85% 50%; transition: transform 0.4s ease; }
.guide-card:hover .g-art img { transform: scale(1.06); }
.g-body { display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem 1.15rem 1.1rem; flex: 1; }
.g-tag { align-self: flex-start; font-family: var(--display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--yellow); color: var(--navy); border-radius: 2rem; padding: 0.2rem 0.6rem; }
.guide-card .g-title { font-family: var(--display); font-weight: 650; font-size: 1.15rem; line-height: 1.25; }
.guide-card .g-desc { font-size: 0.95rem; color: var(--muted); line-height: 1.45; }
.g-more { margin-top: auto; padding-top: 0.3rem; font-family: var(--display); font-weight: 650; font-size: 0.95rem; color: var(--sailor); }
.g-more::after { content: ' \2192'; display: inline-block; transition: transform 0.15s ease; }
.guide-card:hover .g-more::after { transform: translateX(4px); }

/* Chips (library topics, glossary filters) */
.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.chips li { margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 0.45rem; font: inherit; font-family: var(--display); font-weight: 600; font-size: 0.95rem; text-decoration: none; padding: 0.42rem 0.9rem; border: 2px solid var(--navy); border-radius: 2rem; color: var(--navy); background: #fff; cursor: pointer; box-shadow: 0 2px 0 var(--navy); }
.chip:hover { background: var(--yellow); color: var(--navy); }
.chip[aria-pressed='true'] { background: var(--navy); color: #fff; }
.chip-n { font-size: 0.75rem; background: var(--wash); color: var(--navy); border-radius: 1rem; padding: 0.05rem 0.45rem; }
.lib-tools { background: var(--wash); border-radius: 1rem; padding: 1.2rem 1.2rem 0.4rem; margin-bottom: 2.5rem; }
.lib-tools .lib-search { width: min(100%, 34rem); }
.lib-group { scroll-margin-top: 6rem; }
.lib-group h2 { display: flex; align-items: center; gap: 0.6rem; }
.lib-group h2::before { content: ''; width: 1.1rem; height: 1.1rem; background: var(--yellow); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* Home: icons on decisions, art on destinations */
.item-icon { border-top: 0; padding-top: 0; }
.item-art { display: block; width: 100%; height: 5.5rem; object-fit: cover; object-position: 85% 50%; border-radius: 0.8rem; border: 2px solid var(--navy); margin-bottom: 1rem; }
.dest-list { border-top: 2px solid var(--navy); }
.dest { display: grid; grid-template-columns: 9rem minmax(0, 0.9fr) minmax(0, 1.3fr) auto; gap: 1rem 2rem; align-items: center; padding: 1.3rem 0; border-bottom: 1px solid var(--line); transition: background 0.2s ease; }
.dest:hover { background: linear-gradient(90deg, var(--wash), rgba(233, 240, 250, 0)); }
.dest-art { width: 9rem; height: 5rem; object-fit: cover; object-position: 85% 50%; border-radius: 0.7rem; border: 2px solid var(--navy); }
@media (max-width: 52rem) { .dest { grid-template-columns: 6rem minmax(0, 1fr); } .dest-art { width: 6rem; height: 4rem; grid-row: span 3; align-self: start; } }

/* Prose touches */
.prose ul { list-style: none; padding-left: 1.6rem; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ''; position: absolute; left: -1.4rem; top: 0.45em; width: 0.8rem; height: 0.8rem; background: var(--sailor); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.prose table { border-radius: 0.8rem; overflow: hidden; box-shadow: 0 0 0 2px var(--navy); }
.prose th { background: var(--navy); color: #fff; border-bottom: 0; }
.prose h2 { position: relative; }

/* Glossary */
.lingo-tools { position: sticky; top: 4.6rem; z-index: 5; background: var(--paper); padding: 0.8rem 0 0.2rem; margin-bottom: 1rem; }
.lingo-search { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-bottom: 0.9rem; }
.lingo-search .lib-search { margin: 0; flex: 1 1 18rem; max-width: 30rem; }
.term-grid { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.term { margin: 0; background: #fff; border: 2px solid var(--navy); border-radius: 1rem; padding: 1.1rem 1.2rem 1.2rem; position: relative; box-shadow: 0 4px 0 var(--navy); scroll-margin-top: 12rem; transition: transform 0.15s ease; }
.term:hover { transform: translateY(-3px); }
.term::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 0.45rem; border-radius: 0.9rem 0.9rem 0 0; background: var(--cat, var(--sailor)); }
.term-name { font-size: 1.3rem; margin: 0.4rem 0 0.35rem; }
.term p { margin: 0; color: var(--muted); font-size: 1rem; }
.term-tag { font-family: var(--display); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sailor); }
.term-parks { --cat: var(--sailor); }
.term-dining { --cat: #c8102e; }
.term-stay { --cat: var(--yellow); }
.term-cruise { --cat: #2a8c8c; }
.term-lingo { --cat: var(--navy); }
.term.is-glow { animation: glow 1.6s ease; }
@keyframes glow { 0% { box-shadow: 0 0 0 0 var(--yellow), 0 4px 0 var(--navy); } 30% { box-shadow: 0 0 0 10px var(--yellow), 0 4px 0 var(--navy); } 100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0), 0 4px 0 var(--navy); } }
.lingo-quiz { position: relative; overflow: hidden; background: var(--navy) url(/sparkles.svg) center / 36rem auto; color: #fff; border-radius: 1.2rem; padding: clamp(1.3rem, 3vw, 2rem); margin: 0 0 2rem; box-shadow: 0 6px 0 var(--sailor); }
.lingo-quiz h2 { color: #fff; margin: 0; font-size: 1.5rem; }
.quiz-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.8rem; }
.quiz-score { margin: 0; font-family: var(--display); font-weight: 700; background: var(--yellow); color: var(--navy); border-radius: 2rem; padding: 0.25rem 0.8rem; font-size: 0.9rem; }
.quiz-prompt { font-size: 1.2rem; color: #e6eefa; max-width: 48rem; }
.quiz-prompt strong { color: var(--yellow); font-family: var(--display); }
.quiz-options { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.8rem; }
.quiz-opt { font: inherit; font-family: var(--display); font-weight: 650; font-size: 1rem; padding: 0.6rem 1rem; border-radius: 0.7rem; border: 2px solid #fff; background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; }
.quiz-opt:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
.quiz-opt.is-right { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
.quiz-opt.is-wrong { background: #c8102e; border-color: #c8102e; }
.quiz-opt:disabled { cursor: default; }
.quiz-feedback { min-height: 1.6em; font-family: var(--display); font-weight: 600; margin: 0 0 0.8rem; }
.lingo-quiz :focus-visible { outline-color: var(--yellow); }
.lingo-quiz .btn-secondary { color: #fff; border-color: #fff; }
.lingo-quiz .btn-secondary:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Starry footer */
.site-footer { position: relative; overflow: hidden; background: var(--navy); color: #dce6f5; font-size: 1rem; isolation: isolate; }
.site-footer::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(/sparkles.svg) center top / 44rem auto, url(/route.svg) no-repeat center bottom 3rem / 100% auto; opacity: 0.9; }
.site-footer::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--yellow) 0 2.2rem, var(--sailor) 2.2rem 4.4rem); }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--yellow); }
.foot-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.twinkle { position: absolute; width: 1.4rem; height: 1.4rem; background: var(--yellow); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 3.2s ease-in-out infinite; }
.twinkle.t1 { top: 2.5rem; right: 8%; }
.twinkle.t2 { top: 45%; left: 4%; width: 0.9rem; height: 0.9rem; animation-delay: 1.4s; }
.foot-inner { padding-top: 4rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-bottom: 3rem; }
.foot-title { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); margin-bottom: 0.8rem; }
.foot-group ul, .social { list-style: none; margin: 0; padding: 0; }
.foot-brand p { max-width: 30ch; }
.foot-legal { background: rgba(0, 0, 0, 0.22); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.88rem; }
.foot-legal-row { display: grid; gap: 0.5rem; padding-block: 1.1rem 1.3rem; }
.foot-legal p { margin: 0; max-width: none; }
.foot-disclaimer { color: #b9c7dd; }
.foot-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.6rem; }
.foot-copy span { margin-right: auto; }
@media (max-width: 52rem) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  .sky-head::before, .cta-balloons, .lost-art, .twinkle, .mb-kind::before, .mb-text, .term.is-glow { animation: none; }
  .guide-card, .guide-card .g-art img, .term, .g-more::after { transition: none; }
  .guide-card:hover, .term:hover { transform: none; }
}
/* Postcard side boxes */
.aside-box { position: relative; background: #fff; border: 2px solid var(--navy); border-radius: 1rem; padding: 1.3rem 1.4rem; box-shadow: 0 5px 0 var(--navy); background-image: repeating-linear-gradient(135deg, #c8102e 0 0.6rem, #fff 0.6rem 1.2rem, var(--sailor) 1.2rem 1.8rem, #fff 1.8rem 2.4rem); background-size: 100% 0.45rem; background-repeat: no-repeat; padding-top: 1.6rem; }
.aside-box h2 { font-size: 1.3rem; }
.aside-box p { font-size: 1rem; color: var(--muted); }
[hidden] { display: none !important; }
.guide-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 62rem) { .guide-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .guide-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 52rem) { .lingo-tools { position: static; } }
@media (max-width: 40rem) { .magic-bar { font-size: 0.8rem; } .mb-kind { display: none; } }
.check-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin: 1rem 0 1.5rem; }
.check-cards > div { background: #fff; border: 2px solid var(--navy); border-radius: 0.9rem; padding: 0.9rem 1rem; box-shadow: 0 4px 0 var(--navy); }
.check-cards h3 { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 1.05rem; margin: 0 0 0.3rem; }
.check-cards h3::before { content: '\2713'; flex: none; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--yellow); color: var(--navy); font-size: 0.85rem; }
.check-cards p { margin: 0; font-size: 0.95rem; color: var(--muted); }
@media (max-width: 40rem) { .check-cards { grid-template-columns: 1fr; } }

/* About: pain points, story, at-a-glance */
.pain-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pain-grid li { margin: 0; position: relative; background: #fff; border: 2px solid var(--navy); border-radius: 1rem; padding: 1.2rem 1.2rem 1.2rem 3.4rem; box-shadow: 0 4px 0 var(--navy); }
.pain-grid li::before { content: ''; position: absolute; left: 1.1rem; top: 1.35rem; width: 1.4rem; height: 1.4rem; background: var(--red); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.pain-grid h3 { font-size: 1.12rem; margin: 0 0 0.35rem; }
.pain-grid p { margin: 0; color: var(--muted); font-size: 1rem; }
.join-grid li::before { background: var(--yellow); }
@media (max-width: 62rem) { .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .pain-grid { grid-template-columns: 1fr; } }
.about-story { align-items: start; }
.glance { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.glance li { margin: 0; display: grid; grid-template-columns: 7.2rem 1fr; gap: 0.8rem; align-items: center; font-size: 1rem; color: var(--muted); }
.glance strong { font-family: var(--display); font-size: 1.9rem; line-height: 1; color: var(--sailor); }
.foot-find { margin-top: 2rem; color: var(--muted); }

/* Reviews: postcards */
.postcards { list-style: none; margin: 0 0 3rem; padding: 0; columns: 3 20rem; column-gap: 1.4rem; }
.postcard { break-inside: avoid; margin: 0 0 1.4rem; position: relative; background: #fff; border: 2px solid var(--navy); border-radius: 0.9rem; padding: 1.6rem 1.4rem 1.2rem; box-shadow: 0 5px 0 var(--navy); transition: transform 0.2s ease; }
.postcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 0.45rem; border-radius: 0.8rem 0.8rem 0 0; background: repeating-linear-gradient(135deg, #c8102e 0 0.6rem, #fff 0.6rem 1.2rem, var(--sailor) 1.2rem 1.8rem, #fff 1.8rem 2.4rem); }
.postcard::after { content: ''; position: absolute; right: 1rem; top: 1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px dashed #c8102e; background: url(/favicon.svg) center / 60% no-repeat; transform: rotate(12deg); opacity: 0.85; }
.pc-0 { transform: rotate(-0.6deg); } .pc-1 { transform: rotate(0.5deg); } .pc-2 { transform: rotate(-0.3deg); } .pc-3 { transform: rotate(0.7deg); }
.postcard:hover { transform: rotate(0) translateY(-3px); }
.pc-stars { color: var(--yellow); font-size: 1.15rem; letter-spacing: 0.1em; -webkit-text-stroke: 1px var(--navy); }
.postcard blockquote { margin: 0.6rem 0 1rem; padding: 0; border: 0; }
.postcard blockquote p { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.pc-from { margin: 0; border-top: 2px dashed var(--line); padding-top: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; font-family: var(--display); }
.pc-name { font-weight: 700; }
.pc-place { color: var(--muted); font-size: 0.92rem; }

/* Home: people cards */
.people-cards { display: grid; gap: 1rem; align-content: start; }
.mini-card { display: flex; flex-direction: column; gap: 0.35rem; background: #fff; border: 2px solid var(--navy); border-radius: 1rem; padding: 1.3rem 1.4rem; text-decoration: none; color: var(--navy); box-shadow: 0 4px 0 var(--navy); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.mini-card:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--navy); color: var(--navy); }
.mini-join { background: var(--sailor) url(/sparkles.svg) center / 30rem auto; color: #fff; }
.mini-join:hover { color: #fff; }
.mini-join .mini-text { color: #e6eefa; }
.mini-join .g-more { color: var(--yellow); }
.mini-stars { color: var(--yellow); font-size: 1.2rem; letter-spacing: 0.1em; -webkit-text-stroke: 1px var(--navy); }
.mini-title { font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.mini-text { color: var(--muted); }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Team: join card; join page */
.join-card { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; background: var(--wash) url(/route.svg) no-repeat right -4rem center / 30rem auto; border: 2px solid var(--navy); border-radius: 1.2rem; padding: clamp(1.3rem, 3vw, 2rem); box-shadow: 0 5px 0 var(--navy); }
.join-card h2 { margin: 0 0 0.3rem; }
.join-card p { margin: 0; color: var(--muted); }
.join-why { margin-bottom: 2.5rem; }
.join-why h2 { margin-bottom: 1.2rem; }
.join-note { margin-top: 1.5rem; font-family: var(--display); font-size: 1.1rem; max-width: 46rem; }
.join-form { max-width: 52rem; margin-bottom: 4rem; }
.checks { border: 0; padding: 0; margin: 0 0 1.1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.checks legend { font-family: var(--display); font-weight: 600; margin-bottom: 0.5rem; padding: 0; }
.checks label { display: inline-flex; gap: 0.45rem; align-items: center; font-weight: 400; }
.checks input { width: 1.15rem; height: 1.15rem; accent-color: var(--sailor); }
@media (prefers-reduced-motion: reduce) { .postcard, .mini-card { transition: none; } .postcard:hover, .mini-card:hover { transform: none; } }
.btn-row.center { justify-content: center; max-width: none; margin-inline: auto; }
.join-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 62rem) { .join-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .join-grid { grid-template-columns: 1fr; } }
.sky-head.has-art .page-head { max-width: 40rem; }

/* Footer: brand plus four link columns */
.foot-grid { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 62rem) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }

/* Secondary buttons fill with yellow on hover, everywhere */
.btn-secondary:hover,
.sky-head .btn-secondary:hover,
.cta-magic .btn-secondary:hover,
.lingo-quiz .btn-secondary:hover { background: var(--yellow); color: var(--navy); border-color: var(--navy); }
.btn-primary:hover { background: #c8102e; color: #fff; }
.hero .btn-primary:hover, .band-navy .btn-primary:hover, .sky-head .btn-primary:hover, .cta-magic .btn-primary:hover { background: #fff; color: var(--navy); }

/* Consistent breathing room before the footer or next band */
main > .wrap { padding-bottom: clamp(3rem, 6vw, 5rem); }
main > .wrap + .band, main > .wrap + .cta-magic { margin-top: 0; }
.route { margin-bottom: 2rem; }
.form-card + .form-status { margin-top: 1rem; }
.res-grid { margin-bottom: 3rem; }
.res-grid li { padding-left: 3.4rem; display: flex; flex-direction: column; }
.res-grid h2 { font-size: 1.25rem; margin: 0 0 0.35rem; }
.res-grid li > p:last-child { margin-top: auto; padding-top: 0.8rem; }
.store-card { margin-top: 3rem; background: var(--wash); border: 2px solid var(--navy); border-radius: 1rem; padding: clamp(1.2rem, 3vw, 1.8rem); box-shadow: 0 5px 0 var(--navy); max-width: 52rem; }
.store-card h2 { margin-top: 0; }
@media (max-width: 52rem) {
  .site-nav ul { justify-content: space-between; gap: 0.6rem; }
  .site-nav a:not(.btn) { font-size: 0.84rem; }
}

/* Park and cruise skyline along the bottom of every CTA band (generic shapes, no Disney marks) */
.cta-magic { padding-bottom: calc(clamp(3rem, 7vw, 5.5rem) + clamp(4.5rem, 9vw, 8rem)); }
.cta-magic::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(5rem, 10.6vw, 9.5rem); z-index: -1; background: url(/skyline.svg) center bottom / max(100%, 900px) auto no-repeat; pointer-events: none; }
.cta-magic-inner { position: relative; }
.cta-magic::before { background: url(/sparkles.svg) center top / 40rem auto; }

/* Tighter CTA band; skyline keeps its proportions so the castle top never crops */
.cta-magic { padding-top: clamp(2.25rem, 4.5vw, 3.25rem); padding-bottom: calc(max(10.6vw, 96px) + 0.5rem); }
.cta-magic::after { left: 50%; right: auto; width: max(100%, 900px); height: auto; aspect-ratio: 1600 / 170; transform: translateX(-50%); background-size: 100% 100%; }
.cta-magic h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.cta-magic p { font-size: 1.1rem; margin-bottom: 0; }
.cta-magic .btn-row { margin-top: 1.2rem; }
.cta-art { width: 8.5rem; }
@media (max-width: 44rem) { .cta-art { width: 5rem; top: -0.5rem; } }
@media (max-width: 44rem) { .cta-art { display: none; } }

/* Destination rows: fixed columns so names, text and buttons line up */
.dest { grid-template-columns: 9rem 15rem minmax(0, 1fr) 14rem; }
.dest h2, .dest h3, .dest-minor h3 { font-size: 1.4rem; line-height: 1.2; margin: 0; }
.dest .btn { justify-self: stretch; justify-content: center; text-align: center; white-space: nowrap; }
@media (max-width: 62rem) { .dest { grid-template-columns: 7rem 12rem minmax(0, 1fr) 12.5rem; gap: 1rem 1.4rem; } .dest-art { width: 7rem; height: 4.2rem; } }
@media (max-width: 52rem) {
  .dest { grid-template-columns: 6rem minmax(0, 1fr); }
  .dest-art { width: 6rem; height: 4rem; grid-row: span 3; }
  .dest .btn { justify-self: start; width: 100%; max-width: 16rem; }
}

/* How planning works: steps beside the journey illustration */
.journey { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.journey-art { display: block; width: 100%; height: auto; border-radius: 1.4rem; box-shadow: 0 6px 0 var(--navy); border: 2px solid var(--navy); }
@media (max-width: 52rem) { .journey { grid-template-columns: 1fr; } .journey-art { max-width: 24rem; margin-inline: auto; order: -1; } }

/* Magic moments: scrapbook grid and lightbox */
.moments { list-style: none; margin: 0 0 2rem; padding: 0; columns: 3 18rem; column-gap: 1.4rem; }
.moment { break-inside: avoid; margin: 0 0 1.6rem; background: #fff; border: 2px solid var(--navy); border-radius: 0.6rem; padding: 0.7rem 0.7rem 0.9rem; box-shadow: 0 5px 0 var(--navy); position: relative; transition: transform 0.2s ease; }
.moment::before { content: ''; position: absolute; top: -0.7rem; left: 50%; width: 5rem; height: 1.4rem; margin-left: -2.5rem; background: rgba(255, 210, 63, 0.8); transform: rotate(-3deg); }
.m-0 { transform: rotate(-1deg); } .m-1 { transform: rotate(0.8deg); } .m-2 { transform: rotate(-0.4deg); } .m-3 { transform: rotate(1.1deg); } .m-4 { transform: rotate(-0.7deg); }
.moment:hover { transform: rotate(0) translateY(-3px); }
.moment-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 0.3rem; overflow: hidden; }
.moment-open img { display: block; width: 100%; height: auto; }
.moment-cap { margin: 0.7rem 0.2rem 0.3rem; font-size: 1rem; line-height: 1.45; }
.moment-who { margin: 0 0.2rem; font-family: var(--display); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; }
.moment-who span { color: var(--muted); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 70rem); max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(11, 20, 36, 0.88); }
.lightbox figure { margin: 0; background: #fff; border-radius: 0.8rem; padding: 0.6rem; }
.lightbox img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: 0.4rem; }
.lightbox figcaption { font-family: var(--display); padding: 0.6rem 0.3rem 0.2rem; }
.lb-btn { position: absolute; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--navy); background: var(--yellow); color: var(--navy); font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; box-shadow: 0 3px 0 var(--navy); }
.lb-close { top: -1rem; right: -1rem; }
.lb-prev { left: -1.3rem; top: 45%; }
.lb-next { right: -1.3rem; top: 45%; }
@media (max-width: 40rem) { .lb-prev { left: 0.3rem; } .lb-next { right: 0.3rem; } .lb-close { right: 0.3rem; top: 0.3rem; } }
@media (prefers-reduced-motion: reduce) { .moment { transition: none; } .moment:hover { transform: none; } }
.moments { padding-top: 0.8rem; }
.moment { display: inline-block; width: 100%; vertical-align: top; }

/* How planning works: steps with pictures in the same rows, on a starry map */
.jsteps { list-style: none; margin: 0; padding: 0; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 25rem); grid-auto-rows: 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); counter-reset: stop; }
.jsteps::before { content: ''; position: absolute; left: 1.2rem; top: 2.2rem; bottom: 2.2rem; border-left: 3px dotted var(--sailor); }
.jsteps::after { content: ''; grid-column: 2; grid-row: 1 / -1; z-index: -1; border-radius: 1.4rem; border: 2px solid var(--navy); box-shadow: 0 6px 0 var(--navy); background: url(/sparkles.svg) center / 26rem auto, linear-gradient(180deg, var(--sailor), var(--navy)); }
.jsteps li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; margin: 0; counter-increment: stop; }
.js-text { position: relative; padding: 1rem 0 1rem 4rem; }
.js-text::before { content: counter(stop); position: absolute; left: 0; top: 1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--navy); border: 2px solid var(--navy); font-family: var(--display); font-weight: 700; }
.js-text h3 { margin: 0 0 0.25rem; padding-top: 0.2rem; }
.js-text p { margin: 0; }
.js-pic { position: relative; height: 100%; display: flex; align-items: center; padding: 0.6rem 9%; }
.js-pic img { position: relative; z-index: 1; width: 9.5rem; height: auto; }
.jsteps li:nth-child(odd) .js-pic { justify-content: flex-start; }
.jsteps li:nth-child(even) .js-pic { justify-content: flex-end; }
.js-num { position: absolute; z-index: 2; top: 50%; margin-top: -2.6rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--navy); border: 2px solid var(--navy); font-family: var(--display); font-weight: 800; font-size: 0.95rem; }
.jsteps li:nth-child(odd) .js-num { left: 7%; }
.jsteps li:nth-child(even) .js-num { right: 7%; }
/* dotted path from this picture down to the next one */
.jsteps li:not(:last-child) .js-pic::after { content: ''; position: absolute; top: 50%; height: 100%; left: calc(9% + 4.75rem); right: calc(9% + 4.75rem); background: url(/journey/path-ltr.svg) 0 0 / 100% 100% no-repeat; }
.jsteps li:nth-child(even):not(:last-child) .js-pic::after { background-image: url(/journey/path-rtl.svg); }
@media (max-width: 52rem) {
  .jsteps { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .jsteps::after, .js-pic::after, .js-num { display: none; }
  .jsteps li { grid-template-columns: minmax(0, 1fr) 5.5rem; column-gap: 0.8rem; }
  .js-pic { padding: 0; height: auto; justify-content: center !important; background: var(--navy); border-radius: 0.8rem; aspect-ratio: 1; }
  .js-pic img { width: 90%; }
}
.jsteps { grid-template-rows: repeat(4, 1fr); }
@media (max-width: 52rem) {
  .jsteps { grid-template-rows: none; }
  .jsteps li { grid-template-columns: minmax(0, 1fr) 4.5rem; align-items: start; }
  .js-pic { margin-top: 1rem; }
}
.jsteps li:nth-child(1) { grid-row: 1; } .jsteps li:nth-child(2) { grid-row: 2; } .jsteps li:nth-child(3) { grid-row: 3; } .jsteps li:nth-child(4) { grid-row: 4; }
@media (max-width: 52rem) { .jsteps li:nth-child(n) { grid-row: auto; } }
.jsteps li:nth-child(4) .js-num { right: auto; left: calc(100% - 9% - 9.5rem - 0.6rem); }
/* Fun-fact bar: always one line */
.magic-bar-row { flex-wrap: nowrap; min-height: 2.2rem; }
.mb-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* CTA balloons: on desktop the big logo floats on the right with a gentle sway (the floaty
   animation above). On phones it stands still beside the two buttons. */
@media (max-width: 44rem) {
  .cta-art { display: block; position: absolute; top: auto; right: 0.6rem; bottom: 0; width: 4.2rem; margin: 0; opacity: 1; }
  .cta-balloons { animation: none; transform: rotate(-6deg); }
  .cta-magic .btn-row { max-width: calc(100% - 7rem); }
  .cta-magic .cta-copy > p:not(.eyebrow) { max-width: calc(100% - 4.6rem); }
  .cta-magic { padding-bottom: calc(max(10.6vw, 96px) + 0.25rem); }
}

/* Team: identical card structure for every advisor */
.team-grid { align-items: stretch; }
.person { display: flex; flex-direction: column; }
.person-top { display: flex; align-items: center; gap: 1rem; }
.person-top .avatar { flex: none; }
.person-top h2 { margin: 0 0 0.15rem; font-size: 1.35rem; }
.person-top h2 a { color: var(--navy); text-decoration: none; }
.person-top h2 a:hover { text-decoration: underline; }
.person-top .role { margin: 0; }
.facts { list-style: none; margin: 1rem 0 0.9rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.facts li { margin: 0; background: var(--wash); color: var(--navy); border-radius: 999px; padding: 0.25rem 0.75rem; font-family: var(--display); font-weight: 560; font-size: 0.9rem; }
.person-bio { flex: 1 1 auto; margin: 0 0 1.1rem; }
.person-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
.profile-head { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1.5rem; }
.profile-head .avatar { width: 8rem; height: 8rem; flex: none; border-width: 4px; }
.profile-head .role { font-family: var(--display); font-weight: 600; color: var(--sailor); margin: 0 0 0.2rem; }
.profile-head .facts { margin: 0.5rem 0 0; }
.mini-person { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--navy); font-family: var(--display); font-weight: 600; }
.mini-person small { display: block; font-weight: 500; color: var(--muted); }
.mini-person .avatar { width: 3rem; height: 3rem; border-width: 2px; }
@media (max-width: 40rem) { .profile-head { flex-direction: column; align-items: flex-start; } }

.prose .facts li, .prose .team-mini li { padding-left: 0.75rem; }
.prose .team-mini li { padding-left: 0; }
.prose .facts li::before, .prose .team-mini li::before { content: none; display: none; }

/* Generic Disney-style banners (fireworks, balloons, sparkles). No characters or park icons. */
.bg-mike-spampinato { background-image: url(/images/team-bg/mike-spampinato.svg); }
.bg-kelly-volk { background-image: url(/images/team-bg/kelly-volk.svg); }
.bg-patty-scholz { background-image: url(/images/team-bg/patty-scholz.svg); }
.person-banner, .profile-banner { background-size: cover; background-position: center; background-color: var(--sailor); }
.person-banner { height: 6.5rem; margin: -1.4rem -1.4rem 0; border-radius: calc(1rem - 2px) calc(1rem - 2px) 0 0; }
.person-top { margin-top: -2.75rem; position: relative; }
.person-top .avatar { background: var(--sailor); }
.person-top > div:last-child { padding-top: 2.6rem; }
.profile-banner { height: 9rem; border-radius: 1rem; }
.profile-head { margin-top: -4.5rem; padding: 0 1.2rem; position: relative; }
.person-top > div:last-child { padding-top: 3.1rem; }
.prose .facts { padding-left: 0; }
.profile-head { padding: 0 0.5rem; }
/* Standard photo frame: same ring and backdrop for every advisor */
.avatar { background: linear-gradient(160deg, #2c78d0, #14408a); border: 4px solid var(--yellow); box-shadow: 0 0 0 3px #fff, 0 3px 10px rgba(20, 34, 58, .25); }
.team-label { font-family: var(--display); font-weight: 700; color: var(--sailor); margin: 2.2rem 0 0.7rem; font-size: 1.05rem; }
.team-label-h { font-size: 1.7rem; color: var(--navy); margin-bottom: 0.3rem; }
.team-sub { margin: 0 0 1.4rem; color: var(--muted); max-width: 60ch; }
.team-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.founder-row .person { max-width: 44rem; }
@media (max-width: 48rem) { .team-grid-2 { grid-template-columns: 1fr; } }

.moments-reviews { margin-top: 2.5rem; }
.moments-reviews h2 { margin-bottom: 0.3rem; }
.mr-lead { margin: 0 0 1.4rem; color: var(--muted); }