/* Appearance tokens. Illustrations retain their destination palettes. */
:root {
  color-scheme: light;
  --primary: #ac4f28;
  --action: #ac4f28;
  --action-hover: #8d3f20;
  --on-action: #fffaf1;
  --on-dark: #f5f0e5;
  --ink: #342d26;
  --clay: #ac4f28;
  --muted: #6b675e;
  --line: #ddd4c3;
  --header-bg: #2e2823;
  --surface-muted: #ece7dc;
  --surface-soft: #f2e5d3;
  --selected-surface: #f8eadb;
  --summary-surface: #e9dbbb;
  --warm-section: #eae4d2;
  --detail-surface: #fffdf64d;
  --map-surface: #f0e6cf;
  --graphic-frame: #ebe2cf;
  --control-border: #bcb59e;
  --ticket-border: #b7b09c;
}

html[data-theme='dark'] {
  color-scheme: dark;
  --paper: #171c19;
  --white: #242c27;
  --ink: #f1ecdf;
  --primary: #eca36e;
  --clay: #eca36e;
  --muted: #b6beb0;
  --line: #465047;
  --night: #101713;
  --header-bg: #151a17;
  --surface-muted: #202923;
  --surface-soft: #343329;
  --selected-surface: #352c23;
  --summary-surface: #32372c;
  --warm-section: #202722;
  --detail-surface: #29312a;
  --map-surface: #29312a;
  --graphic-frame: #29312a;
  --control-border: #626b58;
  --ticket-border: #5a6457;
}

body { transition: background-color .25s, color .25s; }
.header { background: var(--header-bg); color: var(--on-dark); border-color: var(--line); }
.button, .header .button { background: var(--action); border-color: var(--action); color: var(--on-action); }
.button:hover, .header .button:hover { background: var(--action-hover); border-color: var(--action-hover); }
.round-button:hover { background: var(--action); border-color: var(--action); color: var(--on-action); }
.theme-button .theme-sun { display: none; }
html[data-theme='dark'] .theme-button .theme-moon { display: none; }
html[data-theme='dark'] .theme-button .theme-sun { display: block; }
.theme-button[aria-pressed='true'] { color: #f2b17e; background: #ffffff0b; border-color: #f2b17e70; }
.header nav a::after, .scroll-progress { background: #dc8b56; }
.header .language, .theme-button { border-color: #f5f0e535; }
.menu-button { color: var(--on-dark); }
.destination-ribbon { background: var(--surface-muted); }
.destination-card { border-color: var(--line); }
.destination-number { color: #fffaf1; }
.destination-highlights span { background: var(--surface-soft); }
.destination-switch { background: var(--surface-muted); }
.switch-button[aria-pressed='true'] { background: var(--action); color: var(--on-action); }
.experience-section, .closing { color: var(--on-dark); }
.experience-section .section-heading > .eyebrow, .closing .eyebrow { color: #e6b58a; }
.experience-section .section-heading em, .closing h2 em { color: #e3a274; }
.experience-copy > .eyebrow { color: #dbb596; }
.sketch-paper { background: #fffdf6; color: var(--action); }
.sketch-badge { background: #f6f3ea; color: var(--action); }
.journey-map-card { background: var(--map-surface); }
.route-graphic { --ink: #342d26; --primary: #ac4f28; --white: #fffaf1; --clay: #ac4f28; }
.map-stop.is-visited > circle { fill: #ac4f28; }
.day-tabs button[aria-selected='true'] { background: var(--action); border-color: var(--action); color: var(--on-action); }
.details-section { background: var(--warm-section); }
.stay-block, .gift-block { background: var(--detail-surface); border-color: var(--line); }
.gift-notebook { background: var(--action); color: var(--on-action); }
.tote-logo { color: var(--action); font-size: 27px; letter-spacing: -1px; }
.tote-line { color: #72452e; }
.ticket-card { border-color: var(--ticket-border); }
.ticket-card.is-selected { border-color: var(--action); background: var(--selected-surface); box-shadow: 0 0 0 2px var(--action), 0 9px 25px #0000000a; }
.ticket-choice input:checked + .radio-dot { border-color: var(--action); }
.radio-dot { border-color: var(--control-border); }
.ticket-seam { border-color: var(--ticket-border); }
.ticket-seam::before, .ticket-seam::after { border-color: var(--ticket-border); }
.ticket-art { border-color: var(--line); }
.plan-inclusion > .inclusion-badge { background: var(--surface-soft); color: var(--ink); }
.ticket-cta { background: var(--surface-soft); border-color: var(--line); color: var(--primary); }
.ticket-card.is-selected .ticket-cta { background: var(--action); border-color: var(--action); color: var(--on-action); }
.ticket-cta:hover:not(:disabled) { background: var(--action-hover); color: var(--on-action); border-color: var(--action-hover); }
.unavailable { background: var(--surface-muted); color: var(--muted); }
.unavailable .plan-price, .unavailable .ticket-cta { color: var(--muted); }
.booking-summary { background: var(--summary-surface); border-color: var(--line); }
.summary-heading .eyebrow { color: var(--muted); }
.summary-stamp { border-color: var(--control-border); outline-color: var(--control-border); }
select, .stepper { border-color: var(--control-border); }
.summary-row, .summary-travelers { border-color: var(--control-border); }
.stepper input { color: var(--ink); border-color: var(--line); }
.stepper button:hover:not(:disabled) { background: var(--surface-soft); }
.step-number { background: var(--surface-soft); border-color: var(--line); }
.faq-escape { background: var(--graphic-frame); border-color: var(--line); }
.escape-controls { border-color: var(--line); }
.escape-choice[aria-pressed='true'] { background: var(--action); color: var(--on-action); border-color: var(--action); }
.escape-choice:hover:not(:disabled) { background: var(--surface-soft); color: var(--ink); }
.escape-play { border-color: var(--control-border); }
.escape-corner-stamp { color: #fffaf1; }
.button-cream { background: #f6f3ea; border-color: #f6f3ea; color: #342d26; }
.button-cream:hover { background: #e6d5b5; border-color: #e6d5b5; color: #342d26; }
.orbit { border-color: var(--line); }
.hero-postcard { background: #fffdf6; }
.hero-postcard > span { color: #342d26; }
.travel-stamp { background: var(--paper); }
html[data-theme='dark'] .sea .destination-tag { color: #95c1c9; }
html[data-theme='dark'] ::selection { color: #342d26; }
html[data-theme='dark'] .ticket-art { opacity: .5; }
html[data-theme='dark'] .unavailable .ticket-art { opacity: .25; }

/* A framed company wordmark based on the supplied identity. */
.wordmark { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 145px; height: 54px; padding: 6px 10px 5px; border: 3px solid currentColor; border-bottom: 0; letter-spacing: normal; font-size: 16px; flex-shrink: 0; }
.wordmark::before, .wordmark::after { content: ''; position: absolute; bottom: 0; width: 19px; height: 3px; background: currentColor; }
.wordmark::before { left: -3px; }.wordmark::after { right: -3px; }
.brand-main { font-family: 'Space Grotesk', sans-serif; font-size: 28px; line-height: 1; font-weight: 700; letter-spacing: -.8px; }
.brand-sub { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 7px; line-height: 1.6; letter-spacing: 3.1px; font-weight: 500; margin-top: 4px; }
.footer-brand { order: 0; }
.footer-contact { order: 1; display: flex; flex-direction: column; gap: 5px; margin-inline-start: auto; }
.footer-contact > .eyebrow { font-size: 10px; color: var(--primary); margin-bottom: 4px; }
.footer-contact a { font-size: 12px; line-height: 1.6; }
.footer-contact a:hover { color: var(--primary); text-decoration: underline; }
.footer-meta { order: 2; max-width: 250px; }
.footer > .round-button { order: 3; }

@media (max-width: 1150px) {
  .wordmark { width: 132px; height: 51px; }
  .brand-main { font-size: 26px; }
  .brand-sub { font-size: 6px; letter-spacing: 2.8px; }
}
@media (max-width: 720px) {
  .wordmark { width: 122px; height: 47px; }
  .brand-main { font-size: 24px; }
  .brand-sub { font-size: 5.8px; letter-spacing: 2.5px; }
  .header nav { background: var(--header-bg); }
  .footer-contact { order: 3; margin-inline-start: 0; width: 100%; border-top: 1px solid var(--line); padding-top: 21px; }
  .footer > .round-button { order: 2; }
  .footer-meta { order: 4; max-width: none; }
}
@media (max-width: 360px) {
  .wordmark { width: 110px; height: 44px; border-width: 2px; }
  .wordmark::before, .wordmark::after { height: 2px; }
  .brand-main { font-size: 22px; }
  .brand-sub { font-size: 5px; letter-spacing: 2px; }
}