:root {
  --night: #090b0a;
  --paper: #f4f1e9;
  --orange: #ef6338;
  --amber: #e8b55e;
  --muted: #a8b0aa;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0; color: var(--paper); background: var(--night);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--amber); outline-offset: 5px; }
.shell { width: min(100% - 48px, 1220px); margin-inline: auto; }
.skip-link {
  position: fixed; z-index: 20; top: 12px; left: 12px; padding: 12px 16px;
  background: var(--paper); color: var(--night); border-radius: 8px; text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.home-header {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 86px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.wordmark { font-size: 1.45rem; font-weight: 750; letter-spacing: -.075em; text-decoration: none; }
.wordmark-dot { color: var(--orange); }
.header-note, .eyebrow, .choice-topline, .choice-bottomline {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .7rem; letter-spacing: .095em;
}
.header-note { color: var(--muted); letter-spacing: .025em; }
.intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 330px);
  gap: 24px 40px; align-items: end; padding: clamp(48px, 6vw, 80px) 0 42px;
}
.eyebrow { display: flex; grid-column: 1 / -1; align-items: center; gap: 12px; margin: 0; color: var(--amber); }
.eyebrow-line { width: 27px; height: 1px; background: currentColor; }
.intro h1 {
  max-width: 750px; margin: 0; font-size: clamp(3.25rem, 7vw, 6.5rem);
  font-weight: 590; letter-spacing: -.075em; line-height: .99; text-wrap: balance;
}
.intro h1 em { color: var(--orange); font-weight: 590; font-style: normal; }
.intro-copy {
  max-width: 330px; margin: 0 0 5px; color: #c1c8c0;
  font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.55; text-wrap: pretty;
}
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.choice {
  position: relative; display: block; min-width: 0; min-height: 535px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.13); border-radius: 10px;
  text-decoration: none; isolation: isolate;
  transition: transform 350ms var(--ease), border-color 350ms var(--ease), box-shadow 350ms var(--ease);
}
.choice:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.4); box-shadow: 0 20px 48px rgba(0,0,0,.26); }
.choice:active { transform: translateY(-1px); }
.choice--run { color: #191b17; background: #e8e3d8; }
.choice--run::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 85% 92%, rgba(239,99,56,.44), transparent 51%), linear-gradient(120deg, rgba(255,255,255,.43), transparent 72%);
}
.choice--map { background: #121a16; }
.choice--map::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 78% 90%, rgba(120,164,155,.18), transparent 58%);
}
.choice-topline { display: flex; justify-content: space-between; gap: 18px; padding: 25px 28px 0; opacity: .7; }
.choice-copy { position: relative; z-index: 2; padding: 58px 28px 0; max-width: 490px; }
.product-label { display: inline-block; margin-bottom: 14px; color: #a84023; font-size: .82rem; font-weight: 680; letter-spacing: .015em; }
.choice--map .product-label { color: var(--amber); }
.choice h2 { margin: 0; font-size: clamp(2.8rem, 4.6vw, 4.6rem); font-weight: 580; line-height: .98; letter-spacing: -.072em; }
.choice h2 strong { font-weight: 760; }
.choice-copy p { max-width: 330px; min-height: 86px; margin: 19px 0 23px; color: #42483f; font-size: .99rem; line-height: 1.55; text-wrap: pretty; }
.choice--map .choice-copy p { color: #c1cec3; }
.choice-action {
  display: inline-flex; align-items: center; gap: 26px; min-height: 47px;
  padding: 0 16px 0 18px; border-radius: 6px; background: #1b211b; color: #fff;
  font-size: .85rem; font-weight: 660; transition: background 250ms ease, gap 300ms var(--ease);
}
.choice-action span { font-size: 1.2rem; line-height: 1; }
.choice:hover .choice-action { gap: 35px; background: #a84023; }
.choice--map .choice-action { background: var(--paper); color: #152019; }
.choice--map:hover .choice-action { background: var(--amber); }
.run-art, .map-art { position: absolute; z-index: 1; pointer-events: none; }
.run-art {
  width: clamp(205px, 27vw, 286px); top: 280px; right: 5%;
  border: 8px solid #1c211d; border-bottom: 0; border-radius: 33px 33px 0 0;
  background: #fff; box-shadow: 0 18px 55px rgba(35,25,18,.36);
  transform: rotate(9deg) translateY(8px); transform-origin: center top;
  transition: transform 500ms var(--ease);
}
.choice:hover .run-art { transform: rotate(6deg) translateY(-3px); }
.run-art img { display: block; width: 100%; height: auto; border-radius: 23px 23px 0 0; }
.map-art {
  width: clamp(310px, 38vw, 430px); height: 420px; top: 286px; right: -15px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 11px; overflow: hidden;
  box-shadow: 0 20px 45px rgba(0,0,0,.3); transform: rotate(-5deg);
  transition: transform 500ms var(--ease);
}
.choice:hover .map-art { transform: rotate(-2deg) translateY(-5px); }
.map-art img { display: block; width: 100%; height: auto; transform: translateY(-23%); }
.choice-bottomline { position: absolute; z-index: 2; bottom: 26px; left: 28px; opacity: .65; }
.afterword { max-width: 630px; margin: 27px auto 58px; color: var(--muted); font-size: .91rem; line-height: 1.5; text-align: center; text-wrap: pretty; }
.home-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 27px 0 34px; border-top: 1px solid rgba(255,255,255,.12);
  color: var(--muted); font-size: .77rem;
}
.home-footer nav { display: flex; flex-wrap: wrap; gap: 11px 22px; }
.home-footer a { text-decoration: none; transition: color 180ms ease; }
.home-footer a:hover { color: var(--paper); }
@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; gap: 18px; }
  .intro-copy { max-width: 540px; }
  .choice { min-height: 500px; }
  .choice-copy { padding-top: 52px; }
  .choice h2 { font-size: clamp(2.6rem, 5vw, 3.8rem); }
  .choice-copy p { max-width: 280px; }
  .run-art { top: 300px; right: -24px; }
  .map-art { top: 317px; right: -65px; }
}
@media (max-width: 690px) {
  .shell { width: min(100% - 32px, 520px); }
  .home-header { min-height: 70px; }
  .header-note { font-size: .61rem; text-align: right; }
  .intro { padding: 43px 0 31px; gap: 16px; }
  .intro h1 { font-size: clamp(3rem, 11vw, 4.5rem); }
  .intro-copy { font-size: .98rem; }
  .choices { grid-template-columns: 1fr; gap: 14px; }
  .choice { min-height: 405px; }
  .choice-topline { padding: 20px 21px 0; }
  .choice-copy { padding: 42px 21px 0; }
  .choice h2 { font-size: clamp(2.8rem, 10vw, 3.8rem); }
  .choice-copy p { max-width: min(310px, 80%); min-height: 0; margin: 14px 0 18px; font-size: .9rem; }
  .choice-action { min-height: 43px; font-size: .8rem; }
  .run-art { width: 170px; top: 238px; right: 16px; border-width: 6px; border-radius: 25px 25px 0 0; }
  .run-art img { border-radius: 18px 18px 0 0; }
  .map-art { width: 268px; top: 254px; right: -25px; }
  .choice-bottomline { bottom: 20px; left: 21px; font-size: .6rem; max-width: 120px; line-height: 1.5; }
  .afterword { margin: 25px auto 43px; }
  .home-footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 400px) {
  .choice-copy p { max-width: 100%; }
  .choice { min-height: 418px; }
  .run-art { right: -25px; top: 266px; }
  .map-art { top: 280px; right: -66px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}