:root {
  --forest: #123427;
  --sage: #7e997e;
  --cream: #f6f0da;
  --paper: #fdfaed;
  --gold: #ca9738;
  --charcoal: #272b27;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--charcoal);
  background: var(--cream);
  font: 17px/1.6 ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: var(--forest); }
.nav {
  max-width: 1120px;
  margin: auto;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav nav { display: flex; gap: 24px; }
.brand { font-size: 22px; font-weight: 900; text-decoration: none; }
.hero {
  max-width: 1120px;
  min-height: 68vh;
  margin: auto;
  padding: 64px 24px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: 64px;
}
h1 { color: var(--forest); font-size: clamp(48px, 8vw, 88px); line-height: .98; letter-spacing: -.05em; margin: 16px 0 28px; }
h2 { color: var(--forest); line-height: 1.2; }
.eyebrow { color: var(--sage); font-size: 13px; font-weight: 900; letter-spacing: .14em; }
.lede { max-width: 680px; font-size: 22px; }
.availability { display: inline-block; padding: 10px 16px; border: 1px solid var(--forest); border-radius: 999px; font-weight: 800; }
.mark { aspect-ratio: 1; position: relative; border-radius: 28%; overflow: hidden; background: var(--forest); }
.destination { position: absolute; width: 20%; height: 20%; border: 18px solid var(--gold); border-radius: 50%; top: 10%; left: 40%; }
.path { position: absolute; width: 36%; height: 76%; left: 32%; bottom: -8%; border: 42px solid var(--paper); border-left-color: transparent; border-radius: 50%; transform: rotate(8deg); }
.principles { max-width: 1120px; margin: 0 auto 80px; padding: 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.principles article { padding: 26px; background: var(--paper); border-radius: 22px; }
.document { max-width: 760px; margin: 60px auto 100px; padding: 0 24px; }
.document h1 { font-size: clamp(48px, 8vw, 72px); }
footer { padding: 30px 24px; text-align: center; background: var(--forest); color: var(--cream); }
footer a { color: var(--cream); }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding-top: 34px; }
  .mark { max-width: 420px; }
  .principles { grid-template-columns: 1fr; }
}