* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Space above the globe = pinned header offset. Reused as equal bottom padding. */
  --anchor: calc(50vh - 100px - 1.374 * min(8vw, 72px) - min(4vw, 36px));
}

body {
  background: #ffffff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #262626;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  transition: opacity 0.7s ease-out;
}

.js body {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .js body { opacity: 1; }
  body { transition: none; }
}

.container {
  max-width: min(90vw, 420px);
  width: 100%;
  padding: var(--anchor) 24px var(--anchor);
}

.globe {
  font-size: min(8vw, 72px);
  line-height: 1.374;
  letter-spacing: -1.98px;
  margin-bottom: min(4vw, 36px);
}

.name,
.header-nav a,
.body,
.body p,
.label {
  font-size: min(2.8vw, 15px);
  line-height: 1.25;
  letter-spacing: -0.1px;
}

.header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
}

.name {
  color: #262626;
  text-decoration: none;
}

.header-nav {
  display: flex;
  gap: 14px;
}

.header-nav a {
  color: #939393;
  text-decoration: none;
  transition: color 0.3s ease;
}

.header-nav a:hover { color: #262626; }
.header-nav a.active { color: #262626; }

.body {
  margin-top: clamp(18px, 3.6vh, 32px);
}

.entry {
  margin-top: clamp(18px, 3.6vh, 32px);
}

.entry:first-child { margin-top: 0; }

.label { color: #939393; }

.body a {
  color: #5199de;
  text-decoration: none;
}

.body a:hover { text-decoration: underline; }

.body p:not(.label) {
  color: #333333;
  text-wrap: pretty;
}

.body p + p {
  margin-top: clamp(10px, 2.3vh, 21px);
}

.body ul {
  margin-top: clamp(10px, 2.3vh, 21px);
  padding-left: 18px;
  color: #333333;
}

.body li { margin-bottom: 5px; }

/* Fare comparison, kept to the same type scale as everything else. */
.fares {
  margin-top: clamp(10px, 2.3vh, 21px);
  border-top: 1px solid #ececec;
}

.fare {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid #ececec;
  color: #333333;
}

.fare span { color: #939393; }
.fare b { font-weight: 500; font-variant-numeric: tabular-nums; }
.fare.biz b { color: #262626; }

.rotate-notice { display: none; }

@media (max-width: 540px) {
  .container {
    padding-left: 36px;
    padding-right: 36px;
    max-width: calc(65vw + 72px);
  }
}

/* Phones held sideways: hide the site and ask to rotate back. */
@media (orientation: landscape) and (max-height: 500px) {
  .container { display: none; }

  .rotate-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: fixed;
    inset: 0;
    background: #ffffff;
    text-align: center;
    padding: 0 40px;
  }

  .rotate-globe { font-size: 56px; line-height: 1; }

  .rotate-notice p {
    font-size: 15px;
    letter-spacing: -0.1px;
    color: #939393;
  }
}