@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/DMSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Epilogue";
  src: url("assets/fonts/Epilogue-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --surface: #f7f6fc;
  --ink: #080909;
  --muted: #666372;
  --line: #d7d2e4;
  --lake: #625283;
  --lake-soft: #e8e2f5;
  --forest: #625283;
  --terracotta: #7765a1;
  --warning: #aa4235;
  --radius-lg: 20px;
  --radius-md: 12px;
  --shadow: none;
  --content: 1080px;
}

html,
body {
  background: #ffffff;
}

body {
  background-image: none;
  color: var(--ink);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--lake);
  outline-offset: 4px;
}

.topbar {
  height: calc(76px + var(--safe-top));
  padding: var(--safe-top) max(24px, calc((100vw - 1032px) / 2)) 0;
  border: 0;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.wordmark {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.wordmark span {
  color: var(--ink);
  font-weight: 400;
}

.topbar .primary-navigation {
  gap: 24px;
}

.travel-navigation summary,
.topbar .primary-navigation__ledger {
  font-size: 14px;
  font-weight: 400;
}

.travel-navigation summary[aria-current="page"]::after,
.topbar .primary-navigation__ledger[aria-current="page"]::after {
  height: 1px;
  background: var(--ink);
}

.travel-navigation-menu {
  top: calc(80px + var(--safe-top));
  left: 50%;
  right: auto;
  width: min(420px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: translateX(-50%);
}

.topbar .travel-navigation-menu a {
  color: var(--muted);
  background: #ffffff;
  font-size: 13px;
  font-weight: 400;
}

.topbar .travel-navigation-menu a:active {
  color: #ffffff;
  background: var(--ink);
}

.hero,
.section,
.footer {
  width: min(100%, var(--content));
}

.hero {
  position: relative;
  min-height: 520px;
  padding: 78px 24px 64px;
  justify-content: flex-start;
}

.hero__eyebrow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  margin: 0 0 26px;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--ink);
  background: #f3f4f6;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: lowercase;
}

.hero-display {
  max-width: 880px;
  margin: 0 0 30px;
  color: var(--ink);
  font-family: "Epilogue", "Arial Black", sans-serif;
  font-size: clamp(54px, 8.6vw, 112px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.075em;
  text-wrap: balance;
}

.hero-display span {
  display: block;
}

.hero h1 {
  max-width: 650px;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.035em;
}

.hero__date {
  width: max-content;
  max-width: 100%;
  margin-top: 12px;
  color: var(--muted);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.hero-caption {
  position: absolute;
  right: 24px;
  bottom: 64px;
  max-width: 250px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
  text-align: right;
}

.section {
  padding: 66px 24px;
  scroll-margin-top: 84px;
}

.flights-section {
  padding-top: 40px;
}

.section-heading {
  margin-bottom: 28px;
  align-items: center;
}

.section-heading h2 {
  font-size: 31px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.048em;
}

.section-kicker {
  margin-bottom: 10px;
  color: var(--muted);
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .08em;
}

.section-index,
.soft-label {
  color: var(--muted);
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.flight-carousel {
  gap: 18px;
  padding-bottom: 18px;
}

.flight-card {
  flex: 0 0 calc(50% - 9px);
  min-height: 320px;
  padding: 28px;
  border-radius: 16px;
  color: var(--ink);
  background: #e3dff0;
  box-shadow: none;
}

.flight-card:nth-child(2n) {
  background: #f3f1f8;
}

.flight-card:nth-child(3n) {
  background: #e8edf7;
}

.flight-card:nth-child(4n) {
  background: #eeebf5;
}

.flight-card__top,
.flight-card__airlines,
.flight-stop__city,
.flight-stop__timing,
.flight-stop__timing em,
.flight-segment,
.flight-countdown span {
  color: var(--muted);
}

.flight-card__top {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  letter-spacing: .06em;
}

.flight-card__airlines {
  margin-top: 8px;
  font-size: 11px;
}

.flight-stop__code {
  color: var(--ink);
  font-family: "Epilogue", "Arial Black", sans-serif;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -.07em;
}

.flight-stop__city {
  font-size: 12px;
}

.flight-stop__dot {
  border-color: #867699;
  background: transparent;
}

.flight-stop__timing b {
  color: var(--ink);
  font-size: 11px;
  font-weight: 400;
}

.flight-segment {
  padding-top: 55px;
}

.flight-segment i {
  color: #7c6c98;
  background: #a99fbd;
}

.flight-card__countdown-row {
  border-top-color: rgba(8, 9, 9, .1);
}

.flight-countdown strong {
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 400;
}

.carousel-dot {
  background: #d6d1e2;
}

.carousel-dot.is-active {
  width: 22px;
  background: var(--lake);
}

.route-region-tabs,
.route-day-tabs {
  gap: 6px;
  margin-bottom: 12px;
}

.route-region-tabs button,
.route-day-tabs button {
  min-height: 38px;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
}

.route-region-tabs button[aria-pressed="true"] {
  color: #ffffff;
  background: var(--lake);
}

.route-day-tabs button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.travel-map-scroll,
.route-map-button {
  border-color: var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: none;
}

.map-utility {
  color: var(--muted);
}

.map-utility button,
.route-caption {
  color: var(--muted);
}

.timeline::before {
  background: var(--line);
}

.day-dot {
  border-color: var(--paper);
  background: #aaa3b5;
  box-shadow: 0 0 0 1px #aaa3b5;
}

.day-card.is-today .day-dot {
  background: var(--lake);
  box-shadow: 0 0 0 3px rgba(98, 82, 131, .14);
}

.day-toggle {
  min-height: 82px;
  padding-block: 16px;
  border-bottom-color: var(--line);
}

.day-toggle > span:first-child {
  min-width: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 12px;
}

.day-meta {
  color: var(--lake);
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .04em;
  white-space: nowrap;
}

.day-title {
  min-width: 0;
  margin-top: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.day-locations {
  grid-column: 1 / -1;
  margin-top: 0;
  color: var(--muted);
}

.day-chevron {
  border-color: var(--line);
  color: var(--lake);
}

.schedule-time {
  color: var(--muted);
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
}

.schedule-item::before {
  background: var(--line);
}

.schedule-item::after {
  border-color: var(--lake);
  background: var(--paper);
}

.schedule-map-link,
.todo-link {
  border-color: #d5cee3;
  color: var(--lake);
  background: #f3f0f8;
}

.map-pin-mark {
  position: relative;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  flex: 0 0 11px;
  border: 1.5px solid currentColor;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.map-pin-mark::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.prep-section {
  padding-bottom: 84px;
}

.todo-form {
  grid-template-columns: minmax(130px, .44fr) minmax(0, 1fr) auto;
}

.todo-form input,
.todo-form select {
  border-color: var(--line);
  border-radius: 10px;
  background-color: #ffffff;
}

.todo-form input:focus,
.todo-form select:focus {
  border-color: var(--lake);
  box-shadow: 0 0 0 3px rgba(98, 82, 131, .1);
}

.todo-form button {
  border-radius: 10px;
  background: var(--ink);
}

.todo-list {
  gap: 30px;
  margin-top: 24px;
}

.todo-toolbar {
  min-height: 44px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}

.todo-toolbar button {
  min-height: 38px;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.todo-toolbar button[aria-pressed="true"] {
  color: var(--lake);
}

.todo-group {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.todo-group__heading {
  min-height: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.todo-group__heading strong {
  font-size: 17px;
  letter-spacing: -.02em;
}

.todo-group__heading span {
  font-weight: 400;
}

.todo-group__items {
  padding: 0;
}

.todo-item {
  min-height: 62px;
  border-bottom-color: var(--line);
}

.todo-item label {
  min-height: 62px;
}

.todo-check {
  border-color: #aaa3b5;
  border-radius: 6px;
}

.todo-item.is-complete .todo-check {
  border-color: var(--lake);
  background: var(--lake);
}

.todo-text {
  font-size: 14px;
  line-height: 1.6;
}

.todo-due {
  color: var(--muted);
  font-size: 11px;
}

.todo-delete {
  color: #938a9f;
}

.footer {
  padding: 76px 24px calc(42px + var(--safe-bottom));
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 36px;
  border: 0;
}

.footer-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.055em;
}

.footer > p:not(.footer-note),
.footer > a {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.footer > a {
  margin-top: 0;
}

.map-dialog {
  background: var(--surface);
}

.dialog-close,
.ticket-dialog > header button {
  color: var(--lake);
  background: #ffffff;
}

.ticket-dialog {
  border-color: var(--line);
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(30, 25, 40, .18);
}

.ledger-view,
body[data-active-view="ledger"] {
  background: var(--paper);
}

.ledger-app {
  width: min(100%, 900px);
}

.ledger-page-header h1 {
  font-size: 42px;
  letter-spacing: -.045em;
}

.ledger-icon-button {
  border: 0;
  color: var(--ink);
  background: var(--lake-soft);
  box-shadow: none;
}

.ledger-tab.ledger-is-active::after {
  background: var(--lake);
}

.ledger-primary-button,
.ledger-secondary-button {
  background: var(--ink);
}

.ledger-entry-card,
.ledger-list-section,
.ledger-transfer-list,
.ledger-member-stats-list,
.ledger-stats-overview {
  border-color: var(--line);
  border-radius: 12px;
  box-shadow: none;
}

@media (max-width: 700px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  .topbar {
    height: calc(64px + var(--safe-top));
    padding-inline: 24px;
  }

  .topbar .primary-navigation {
    gap: 12px;
  }

  .travel-navigation-menu {
    top: calc(68px + var(--safe-top));
  }

  .hero {
    min-height: auto;
    padding: 48px 24px 44px;
  }

  .hero__eyebrow {
    margin-bottom: 24px;
  }

  .hero-display {
    margin-bottom: 30px;
    font-size: clamp(47px, 13vw, 76px);
    line-height: 1.01;
    letter-spacing: -.07em;
  }

  .hero h1 {
    font-size: 24px;
  }

  .hero__date {
    font-size: 13px;
  }

  .hero-caption {
    position: static;
    max-width: 290px;
    margin-top: 22px;
    text-align: left;
  }

  .travel-navigation-menu {
    top: calc(68px + var(--safe-top));
    left: 14px;
    right: 14px;
    width: auto;
    max-width: none;
    transform: none;
  }

  .section {
    padding: 44px 24px;
    scroll-margin-top: 72px;
  }

  .section-heading {
    margin-bottom: 24px;
  }

  .section-heading h2 {
    font-size: 28px;
  }

  .flight-carousel {
    gap: 12px;
    margin-right: -24px;
    padding-right: 24px;
  }

  .flight-card {
    flex-basis: calc(100% - 18px);
    min-height: 320px;
    padding: 22px;
  }

  .flight-stop__code {
    font-size: clamp(28px, 8.4vw, 36px);
  }

  .flight-countdown strong {
    font-size: 26px;
  }

  .route-section {
    padding-inline: 24px;
  }

  .travel-map-canvas {
    min-width: 640px;
  }

  .is-overview .travel-map-canvas,
  .is-daily .travel-map-canvas {
    min-width: 0;
  }

  .timeline::before {
    left: 12px;
  }

  .day-card {
    padding-left: 38px;
  }

  .day-dot {
    left: 6px;
  }

  .day-toggle {
    padding-right: 0;
  }

  .day-chevron {
    width: 32px;
    height: 32px;
  }

  .todo-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .todo-form select {
    grid-column: 1 / -1;
  }

  .todo-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .todo-link {
    grid-column: 1;
    width: max-content;
    margin: -6px 0 10px 32px;
  }

  .todo-delete {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .footer {
    padding: 64px 24px calc(38px + var(--safe-bottom));
    gap: 24px;
  }

  .footer-note {
    font-size: 38px;
  }
}

@media (min-width: 1000px) {
  .route-section {
    width: min(1100px, calc(100vw - 64px));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}