:root {
  color-scheme: light;
  --paper: #fffdf5;
  --ink: #111110;
  --orange: #f76b15;
  --red: #e52017;
  --rule: #bcbcb5;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
.landing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1600px;
  min-height: 100svh;
  margin: auto;
  padding: 12px 34px 32px;
  background: var(--paper);
}
.brand { height: 202px; border-bottom: 1px solid #8e9196; overflow: hidden; }
.brand img { width: 350px; height: 350px; object-fit: contain; margin: -62px 0 0 -54px; mix-blend-mode: multiply; }
.welcome { position: relative; z-index: 2; width: 40%; padding-top: 32px; }
.eyebrow { color: var(--red); font-size: 1.4375rem; margin: 0 0 12px; letter-spacing: -.7px; }
h1 {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-weight: 900;
  font-size: clamp(4rem, 10vw, 10rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  margin: 0 0 26px;
}
h1 span { display: block; overflow-wrap: anywhere; }
.destinations { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--paper); }
.destinations a, .menu {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 600;
}
.menu {
  border: 0;
  border-radius: 6px;
  background: var(--orange);
  padding: 12px 32px;
  font-family: inherit;
  font-size: 1.4375rem;
  margin-bottom: 14px;
  cursor: not-allowed;
  text-align: left;
  min-width: 0;
  overflow-wrap: anywhere;
}
.destinations a span { min-width: 0; overflow-wrap: anywhere; }
.menu-note { font-size: 1rem; line-height: 1.5; margin: 16px 0 0; overflow-wrap: anywhere; background: var(--paper); }
.destinations a { border-top: 1px solid var(--rule); padding: 14px 12px; transition: background-color 150ms; }
.destinations a:last-child { border-bottom: 1px solid var(--rule); }
.destinations a:hover { background: #f7ebdb; }
.destinations a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; background: #f7ebdb; }
.icon { flex: 0 0 auto; width: 32px; height: 32px; }
.arrow { margin-left: auto; flex: 0 0 auto; }
.hero-image { position: absolute; z-index: 1; width: 100%; right: -18%; top: 12%; pointer-events: none; background: url('./assets/hero-backdrop.309d2597cd0154e452ec797ed9f240a6ff10b9d318247b1b263f6715b49a55f0.webp') right top / 74% 90% no-repeat; }
.hero-image img { display: block; width: 100%; height: auto; }
@media (min-width: 1600px) { h1 { font-size: 10rem; } }
@media (max-width: 960px) {
  .landing { max-width: 480px; padding: 12px 24px 24px; display: flex; flex-direction: column; }
  .brand { height: clamp(194px, 57.5vw, 226px); text-align: center; flex-shrink: 0; }
  .brand img { width: clamp(320px, 89vw, 350px); height: clamp(320px, 89vw, 350px); margin: -56px -50px 0; }
  .hero-image { position: relative; width: calc(100% + 180px); right: auto; top: auto; margin: -66px -90px -45px; background-size: 85% 82%; background-position: right 28px; }
  .welcome { width: 100%; padding-top: 0; }
  .eyebrow { font-size: 1.25rem; margin-bottom: 8px; }
  h1 { font-size: clamp(3.625rem, 23vw, 6.875rem); margin-bottom: 20px; }
  .menu { min-height: 56px; font-size: 1.25rem; padding: 12px 24px; margin-bottom: 12px; }
  .destinations a { min-height: 64px; font-size: 1.0625rem; gap: 20px; padding: 12px 8px; }
  .icon { width: 30px; height: 30px; }
  .arrow { width: 24px; height: 24px; }
}
@media (max-width: 360px) {
  .destinations a { font-size: 1rem; gap: 12px; }
  .icon { width: 28px; height: 28px; }
  .arrow { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .destinations a { transition: none; } }