@font-face {
  font-family: "Window Hand";
  src: url("fonts/Pangolin-Regular.ttf") format("truetype");
  font-display: swap;
}

.hero h1 {
  max-width: 930px;
  margin: 70px 0 26px;
  font-family: "Window Hand", cursive;
  font-size: clamp(46px, 6.6vw, 78px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: none;
}

.hero h1 em {
  color: var(--green);
  font-style: normal;
}

.content h2,
.last h2,
.package header h3,
.content > h3,
.road b {
  font-family: "Window Hand", cursive;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.02em;
}

.content h2,
.last h2 {
  line-height: 1.08;
}

.package header h3 {
  font-size: 28px;
}

.packages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.package {
  padding: 22px;
  border: 1px solid var(--edge);
  background: var(--panel);
}

.package.featured { border-top: 3px solid var(--green); }
.package header { border-bottom: 1px solid var(--edge); padding-bottom: 16px; }
.package header small { color: var(--dim); font: 11px "IBM Plex Mono"; text-transform: uppercase; }
.package header h3 { margin: 5px 0; font: 700 25px "IBM Plex Sans Condensed"; text-transform: uppercase; }
.package header strong { color: var(--green); font: 500 20px "IBM Plex Mono"; }
.package-note { min-height: 84px; color: var(--soft); font-size: 14px; }
.package .budget p { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.package .budget span { font-size: 10px; }
.package .budget b { font-size: 13px; }

.story-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 28px 0;
  color: var(--soft);
  font: 12px "IBM Plex Mono";
  text-transform: uppercase;
}

.story-flow span { border-top: 2px solid var(--green); padding-top: 8px; }
.story-flow i { color: var(--red); font-style: normal; }

@media (max-width: 900px) {
  .packages { grid-template-columns: 1fr; }
  .package-note { min-height: 0; }
}