:root {
  --ink: #17231d;
  --paper: #f3efe5;
  --cream: #e9e0cd;
  --orange: #d95f32;
  --orange-dark: #a63f20;
  --sage: #7b8f78;
  --line: rgba(23, 35, 29, .18);
  --white: #fffdf8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Sans SC", system-ui, sans-serif;
  font-size: 16px;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.hero {
  min-height: 92vh;
  color: var(--white);
  background:
    radial-gradient(circle at 79% 28%, rgba(217, 95, 50, .7), transparent 18%),
    linear-gradient(135deg, rgba(23, 35, 29, .96), rgba(31, 55, 43, .88)),
    repeating-linear-gradient(120deg, transparent 0 80px, rgba(255,255,255,.035) 81px 82px);
  position: relative;
  overflow: hidden;
}
.hero:after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -120px;
  height: 300px;
  background: var(--paper);
  clip-path: polygon(0 54%, 18% 29%, 34% 58%, 49% 18%, 65% 52%, 80% 22%, 100% 46%, 100% 100%, 0 100%);
}
nav {
  width: min(1180px, calc(100% - 48px));
  margin: auto;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.18);
  position: relative;
  z-index: 2;
}
.brand { display: flex; gap: 10px; align-items: center; font-weight: 800; letter-spacing: .08em; }
.brand span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; font-family: "Noto Serif SC"; }
.nav-links { display: flex; gap: 28px; font-size: 14px; }
.nav-links a { opacity: .75; }
.nav-links a:hover { opacity: 1; }

.hero-inner {
  width: min(1180px, calc(100% - 48px));
  margin: auto;
  padding: 105px 0 220px;
  position: relative;
  z-index: 1;
}
.eyebrow, .kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--orange);
}
.hero h1 {
  margin: 25px 0 25px;
  font-family: "Noto Serif SC", serif;
  font-size: clamp(52px, 7.4vw, 104px);
  line-height: 1.03;
  letter-spacing: -.055em;
  max-width: 950px;
}
.hero h1 em { color: #e27a50; font-style: normal; }
.hero-copy { max-width: 610px; margin: 0; color: rgba(255,255,255,.72); font-size: 18px; line-height: 1.8; }
.hero-actions { display: flex; gap: 12px; margin-top: 38px; }
.button { border: 0; border-radius: 999px; padding: 14px 23px; cursor: pointer; font-weight: 700; }
.button.primary { background: var(--orange); color: white; }
.button.ghost { color: white; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.trip-facts { display: flex; gap: 60px; margin-top: 65px; }
.trip-facts div { display: grid; gap: 2px; }
.trip-facts strong { font-size: 26px; }
.trip-facts span { color: rgba(255,255,255,.55); font-size: 13px; }
.hero-mark {
  position: absolute;
  right: 3vw;
  bottom: 7vh;
  font-family: "Noto Serif SC";
  font-size: min(38vw, 480px);
  color: rgba(255,255,255,.025);
  line-height: .8;
  transform: rotate(-6deg);
}

section { padding: 110px 0; }
.section-heading, .route-board, .budget-grid, .checklist-section {
  width: min(1120px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}
.section-heading { margin-bottom: 56px; }
.section-heading h2, .checklist-section h2 {
  font-family: "Noto Serif SC";
  font-size: clamp(34px, 4.5vw, 58px);
  margin: 12px 0 14px;
  letter-spacing: -.04em;
}
.section-heading p { max-width: 660px; color: #617067; line-height: 1.8; }
.section-heading.inverse h2 { color: var(--white); }
.section-heading.inverse p { color: rgba(255,255,255,.6); }

.route-board {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 50px;
  box-shadow: 0 26px 80px rgba(23,35,29,.08);
}
.route-line {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  position: relative;
  gap: 10px;
}
.route-line:before {
  content: "";
  position: absolute;
  height: 2px;
  background: var(--orange);
  top: 18px;
  left: 7%;
  right: 7%;
}
.route-stop { text-align: center; position: relative; }
.route-stop span {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 16px;
  background: var(--paper); border: 2px solid var(--orange);
  color: var(--orange-dark); font-size: 11px; font-weight: 900;
  position: relative; z-index: 1;
}
.route-stop b { display: block; font-family: "Noto Serif SC"; font-size: 18px; }
.route-stop small { color: #839087; }
.route-stop.mountain span { border-radius: 4px 4px 50% 50%; transform: rotate(45deg); }
.route-stop.mountain span::first-line { transform: rotate(-45deg); }
.route-stop.volcano span { background: var(--orange); color: white; }
.route-note { display: flex; gap: 24px; align-items: flex-start; border-top: 1px solid var(--line); margin-top: 42px; padding-top: 28px; }
.route-note span { color: var(--orange-dark); font-size: 12px; font-weight: 800; letter-spacing: .14em; white-space: nowrap; }
.route-note p { margin: 0; line-height: 1.75; color: #59675e; }

.days-section { background: var(--ink); }
.day-list { width: min(1120px, calc(100% - 48px)); margin: auto; display: grid; gap: 14px; }
.day-card {
  display: grid;
  grid-template-columns: 110px 1fr 180px;
  gap: 34px;
  padding: 32px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--white);
  background: rgba(255,255,255,.035);
  transition: transform .25s ease, background .25s ease;
}
.day-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.055); }
.day-card.featured { border-color: rgba(217,95,50,.7); }
.date { border-right: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; align-items: flex-start; }
.date span { color: var(--orange); font-weight: 800; font-size: 11px; letter-spacing: .18em; }
.date strong { font-family: "Noto Serif SC"; font-size: 54px; line-height: 1.1; }
.date small { color: rgba(255,255,255,.45); }
.day-title span { color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.day-title h3 { font-family: "Noto Serif SC"; font-size: 27px; margin: 7px 0 22px; }
.schedule { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 24px; }
.schedule p { margin: 0; color: rgba(255,255,255,.7); font-size: 14px; }
.schedule time { color: white; font-weight: 700; margin-right: 9px; }
.day-tip { margin-top: 23px; color: rgba(255,255,255,.6); line-height: 1.65; font-size: 13px; border-left: 2px solid var(--sage); padding-left: 13px; }
.day-tip.warning { border-color: var(--orange); }
.day-meta { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; color: rgba(255,255,255,.52); font-size: 12px; }
.day-card.return { background: rgba(217,95,50,.09); }

.budget-section { background: var(--cream); }
.budget-grid { display: grid; grid-template-columns: .8fr 1.2fr; background: var(--white); border: 1px solid var(--line); }
.budget-total { padding: 48px; background: var(--orange); color: white; position: relative; overflow: hidden; min-height: 390px; }
.budget-total span { opacity: .7; }
.budget-total strong { display: block; font-size: clamp(46px, 5vw, 72px); margin: 12px 0 0; letter-spacing: -.06em; }
.budget-total small { opacity: .65; }
.budget-ring { position: absolute; width: 260px; height: 260px; right: -65px; bottom: -80px; border: 24px solid rgba(255,255,255,.12); border-radius: 50%; }
.budget-ring i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); }
.budget-items { padding: 28px 44px; }
.budget-items label { display: grid; grid-template-columns: 1fr 100px 22px; gap: 8px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.budget-items label:last-child { border-bottom: 0; }
.budget-items input { width: 100%; text-align: right; border: 0; border-bottom: 1px dashed var(--sage); background: transparent; font-weight: 800; color: var(--ink); padding: 4px; }
.budget-items b { color: #8b948e; font-weight: 500; }
.checklist-section { padding-top: 100px; padding-bottom: 100px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; }
.checklist { display: grid; gap: 12px; }
.checklist label { display: flex; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); background: var(--white); cursor: pointer; }
.checklist input { appearance: none; width: 20px; height: 20px; border: 1px solid var(--sage); border-radius: 50%; flex: 0 0 auto; }
.checklist input:checked { background: var(--orange); border: 5px solid var(--white); outline: 1px solid var(--orange); }
.checklist input:checked + span { text-decoration: line-through; color: #89938d; }

footer { background: #0e1712; color: white; padding: 40px max(24px, calc((100vw - 1120px)/2)); display: flex; justify-content: space-between; align-items: center; }
footer div { display: grid; }
footer div span, footer p { color: rgba(255,255,255,.45); font-size: 12px; }

body.compact .schedule, body.compact .day-tip { display: none; }
body.compact .day-card { grid-template-columns: 90px 1fr 170px; padding-top: 22px; padding-bottom: 22px; }

@media (max-width: 820px) {
  .hero { min-height: auto; }
  nav, .hero-inner, .section-heading, .route-board, .budget-grid, .checklist-section, .day-list { width: min(100% - 28px, 680px); }
  .nav-links { display: none; }
  .hero-inner { padding: 75px 0 160px; }
  .hero h1 { font-size: clamp(48px, 15vw, 72px); }
  .hero-copy { font-size: 16px; }
  .trip-facts { gap: 26px; flex-wrap: wrap; }
  section { padding: 76px 0; }
  .route-board { padding: 30px 20px; overflow-x: auto; }
  .route-line { min-width: 620px; }
  .route-note { min-width: 580px; }
  .day-card, body.compact .day-card { grid-template-columns: 62px 1fr; gap: 18px; padding: 24px 18px; }
  .date strong { font-size: 40px; }
  .day-meta { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; }
  .schedule { grid-template-columns: 1fr; }
  .budget-grid { grid-template-columns: 1fr; }
  .budget-total { min-height: 270px; padding: 34px 26px; }
  .budget-items { padding: 18px 24px; }
  .checklist-section { grid-template-columns: 1fr; gap: 28px; }
  footer { display: grid; gap: 14px; }
}

@media (max-width: 480px) {
  .hero-actions { align-items: stretch; flex-direction: column; width: 220px; }
  .trip-facts strong { font-size: 22px; }
  .day-title h3 { font-size: 22px; }
  .day-meta { flex-direction: column; align-items: flex-start; }
  .budget-items label { grid-template-columns: 1fr 82px 20px; }
}