/* The homepage's Passport chapter (index.html #passport): the app's own
   passport, large, opening as the page scrolls. The book's markup is a
   snapshot of Me's passport card in the app (a demo traveler), and the rules
   under "the book" are ported from the app's style.css (.pp-*, .pp-stamp,
   .visa), scoped to .ppx. The pages are paper in either theme, like the app.
   The scroll script at the end of index.html drives it: closed and upright,
   turned landscape, the cover swung open on the routes and photo pages, then
   the routes page turned down to the Visas & Stamps spread. */

/* ---------- the stage ---------- */
.hv .ppx-band { padding-bottom: 0; overflow: clip; }
.hv .ppx-band .chapter { position: relative; z-index: 1; }
.hv .ppx { position: relative; margin-top: 24px; }
.hv .ppx-pin {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px);
  align-items: center; max-width: 1180px; margin: 0 auto; padding: 40px var(--gutter) 120px;
}
/* an evening sky behind the book, the app's, so its glass rim has something to show through */
.hv .ppx-sky {
  position: absolute; inset: -10% -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 46% at 68% 48%, rgba(255, 184, 140, .5), transparent 70%),
    radial-gradient(36% 40% at 48% 62%, rgba(176, 150, 255, .4), transparent 72%),
    radial-gradient(30% 32% at 80% 26%, rgba(110, 160, 255, .32), transparent 70%);
  filter: blur(10px);
}
.hv .ppx-copy { position: relative; z-index: 1; }
.hv .ppx-step { padding: 22px 0; }
.hv .ppx-step + .ppx-step { border-top: 1px solid rgba(13, 23, 38, .08); }
.hv .ppx-step .n { font: 700 12px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.hv .ppx-step h3 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.05; font-weight: 800; margin-top: 10px; }
.hv .ppx-step p { color: var(--ink-2); margin-top: 10px; max-width: 42ch; }
.hv .ppx-step .tags { margin-top: 14px; }
.hv .ppx-stage { position: relative; z-index: 1; height: min(900px, 100vh); min-height: 520px; }
.hv .ppx-fit { position: absolute; left: 50%; top: 50%; width: 600px; transform-origin: 300px 50%; }
.hv .ppx-dots { display: none; }

/* Live (the script runs): a tall runway, the stage pinned while the book opens,
   one caption at a time over the book on a phone and beside it on desktop */
.hv .ppx.is-live { height: 460vh; }
.hv .ppx.is-live .ppx-pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding-block: 72px 84px; } /* the book ends above the trip rail */
.hv .ppx.is-live .ppx-stage { height: 100%; min-height: 0; }
.hv .ppx.is-live .ppx-copy { display: grid; }
.hv .ppx.is-live .ppx-step {
  grid-area: 1 / 1; padding: 0; border: 0; opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
}
.hv .ppx.is-live .ppx-step.on { opacity: 1; transform: none; pointer-events: auto; }
.hv .ppx.is-live .ppx-dots { display: flex; gap: 8px; margin-top: 26px; }
.hv .ppx-dots i { width: 26px; height: 4px; border-radius: 2px; background: rgba(13, 23, 38, .12); transition: background .3s; }
.hv .ppx-dots i.on { background: var(--brand); }

@media (max-width: 960px) {
.hv .ppx-pin { grid-template-columns: minmax(0, 1fr); padding-bottom: 80px; }
.hv .ppx-stage { height: 120vw; max-height: 760px; }
/* a phone: the book on top, the caption under it */
/* (the bottom padding keeps the caption clear of the trip rail) */
.hv .ppx.is-live .ppx-pin { grid-template-rows: minmax(0, 1fr) auto; gap: 8px; padding-block: 64px 78px; align-items: stretch; }
.hv .ppx.is-live .ppx-stage { max-height: none; }
.hv .ppx.is-live .ppx-copy { order: 2; min-height: 150px; align-content: start; }
.hv .ppx.is-live .ppx-step h3 { font-size: 24px; margin-top: 6px; }
.hv .ppx.is-live .ppx-step p { font-size: 15.5px; line-height: 1.45; margin-top: 6px; }
.hv .ppx.is-live .ppx-step .tags, .hv .ppx.is-live .ppx-dots { display: none; }
}
/* five legs on the trip rail: tighter on a phone so Crew still fits */
@media (max-width: 420px) {
.hv .rail { gap: 2px; }
.hv .rail a { padding: 8px 8px; font-size: 12.5px; }
}

@media (prefers-color-scheme: dark) {
.hv .ppx-sky {
  background:
    radial-gradient(42% 46% at 68% 48%, rgba(255, 140, 100, .22), transparent 70%),
    radial-gradient(36% 40% at 48% 62%, rgba(140, 110, 255, .26), transparent 72%),
    radial-gradient(30% 32% at 80% 26%, rgba(80, 130, 255, .22), transparent 70%);
}
.hv .ppx-step + .ppx-step { border-top-color: rgba(238, 243, 251, .08); }
.hv .ppx-dots i { background: rgba(238, 243, 251, .14); }
.ppx .pp-book::before { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 18px 44px rgba(0, 0, 0, .45); }
}

/* ---------- the book (ported from the app's style.css) ---------- */
.ppx .pp-card {
  --pp-cover: #1b2a4a;
  --pp-ink: color-mix(in srgb, var(--pp-cover) 45%, #2f5fb3);
  --pp-paper-a: color-mix(in srgb, var(--pp-cover) 6%, #edf2f8);
  --pp-paper-b: color-mix(in srgb, var(--pp-cover) 4%, #ecf3ec);
  --pp-paper-m: #f6f0e4;
  --brand-gradient: linear-gradient(135deg, #4e8cfb 0%, #1e97c4 55%, #0fae9c 100%);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color: #0d1726; text-align: left;
}
.ppx .pp-book {
  container-type: inline-size; position: relative; isolation: isolate; padding: 5px; border-radius: 18px;
  display: grid; grid-template-rows: 1fr auto 1fr; perspective: 1800px;
  --pp-w: 100cqw;
  --pp-fold-h: clamp(14px, 3.6cqw, 24px);
}
.ppx .pp-book::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: rgba(255, 255, 255, .34); border: 1px solid rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 18px 44px rgba(6, 16, 36, .22);
  opacity: var(--ppx-rim, 1);
}
.ppx .pp-page {
  position: relative; overflow: hidden; color: #121a2b;
  background: linear-gradient(100deg, var(--pp-paper-a) 0%, var(--pp-paper-m) 48%, var(--pp-paper-b) 100%);
}
.ppx .pp-page i { font-style: normal; color: color-mix(in srgb, var(--pp-ink) 62%, #fff); }
.ppx .pp-visa-head i::before { content: "/ "; }
.ppx .pp-leaf {
  position: relative; z-index: 2; min-height: calc(var(--pp-w) * 88 / 125);
  transform-style: preserve-3d; transform-origin: 50% calc(100% + var(--pp-fold-h) / 2);
}
.ppx .pp-visa {
  position: absolute; inset: 0; border-radius: 13px 13px 0 0; isolation: isolate;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.ppx .pp-data { border-radius: 0 0 13px 13px; }
.ppx .pp-fold {
  height: var(--pp-fold-h); opacity: var(--ppx-rim, 1);
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, color-mix(in srgb, color-mix(in srgb, var(--pp-ink) 45%, #8a7c63) 70%, transparent) 9px 14px) 50% 50% / 100% 1.2px no-repeat,
    linear-gradient(180deg,
      rgba(16, 33, 63, 0) 0, rgba(16, 33, 63, .07) 30%, rgba(16, 33, 63, .2) 47%,
      rgba(16, 33, 63, .32) 50%, rgba(16, 33, 63, .2) 53%, rgba(16, 33, 63, .07) 70%, rgba(16, 33, 63, 0) 100%),
    linear-gradient(100deg, var(--pp-paper-a) 0%, var(--pp-paper-m) 48%, var(--pp-paper-b) 100%);
}
.ppx :is(.pp-visa, .pp-data, .pp-p2-page, .pp-turn-face > .pp-page)::after {
  content: ""; position: absolute; left: 0; right: 0; height: 9%; pointer-events: none; z-index: 5;
}
.ppx :is(.pp-visa, .pp-p2.is-top .pp-page, .pp-turn-face.is-front > .pp-page)::after { bottom: 0; background: linear-gradient(0deg, rgba(16, 33, 63, .13), rgba(16, 33, 63, 0)); }
.ppx :is(.pp-data, .pp-p2.is-bot .pp-page, .pp-turn-face.is-back > .pp-page)::after { top: 0; background: linear-gradient(180deg, rgba(16, 33, 63, .13), rgba(16, 33, 63, 0)); }
.ppx .pp-map { position: absolute; inset: 0; display: block; }
/* the cover: the routes page's back, lying over the photo page while shut;
   its face is drawn upright for the book turned on its side */
.ppx .pp-cover {
  position: absolute; inset: -2px; padding: 0; border: 0; border-radius: 5px 5px 15px 15px;
  container-type: size; color: #e3c178; font: inherit;
  transform: rotateX(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255, 255, 255, .13), transparent 55%),
    radial-gradient(90% 70% at 80% 95%, rgba(0, 0, 0, .28), transparent 60%),
    var(--pp-cover);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 0 28px rgba(0, 0, 0, .35), 0 14px 32px rgba(6, 16, 36, .32);
}
.ppx .pp-cover-face {
  position: absolute; left: 50%; top: 50%; width: 100cqh; height: 100cqw; transform: translate(-50%, -50%) rotate(90deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7cqw;
  padding: 10cqw 6cqh; text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 -1px 0 rgba(255, 255, 255, .12);
}
.ppx .pp-cover-country { margin-top: auto; font-size: 6.4cqh; font-weight: 700; letter-spacing: .22em; line-height: 1.3; }
.ppx .pp-cover-title { font-family: var(--f-display); font-size: 8.6cqh; font-weight: 800; letter-spacing: .32em; margin-right: -.32em; text-transform: uppercase; }
.ppx .pp-cover-mark { width: 40cqh; height: 40cqh; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
.ppx .pp-cover-chip { width: 13cqh; margin-top: auto; opacity: .9; }
.ppx .pp-map-art, .ppx .pp-map-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; object-fit: cover;
}
.ppx .pp-map-art img { mix-blend-mode: multiply; opacity: .8; filter: sepia(.1); }
.ppx .pp-visa-head {
  position: absolute; left: 3.4cqw; top: 2.8cqw; margin: 0; line-height: 1.5;
  font-size: clamp(8.5px, 2cqw, 13px); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--pp-ink);
}
.ppx .pp-visa-head span { display: block; margin-top: 3px; font-weight: 600; letter-spacing: .08em; text-transform: none; color: color-mix(in srgb, var(--pp-ink) 70%, #fff); }
.ppx .pp-visa-head span:empty { display: none; }
/* the photo page */
.ppx .pp-art { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--pp-ink); pointer-events: none; }
.ppx .pp-art-waves { opacity: .3; }
.ppx .pp-art-mark { opacity: .32; }
.ppx .pp-data-head, .ppx .pp-data-body, .ppx .pp-mrz { position: relative; }
.ppx .pp-data-head {
  display: grid; grid-template-columns: 25% minmax(0, 1fr) auto; grid-template-areas: "title name pill";
  align-items: start; column-gap: 3cqw; row-gap: 1cqw; padding: 3.2cqw 3.4cqw 0;
}
.ppx .pp-title {
  grid-area: title; min-width: 0; overflow: hidden; font-family: var(--f-display); font-size: clamp(9px, 2.5cqw, 17px); font-weight: 800; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pp-ink);
}
.ppx .pp-title small {
  display: block; margin-top: .45em; font-family: inherit; font-size: clamp(7.5px, 1.7cqw, 11.5px); font-weight: 600;
  letter-spacing: .16em; color: color-mix(in srgb, var(--pp-ink) 62%, #fff);
}
.ppx .pp-country {
  grid-area: name; min-width: 0; padding-top: .35em; text-align: left; font-size: clamp(8.5px, 2cqw, 13px); font-weight: 700;
  letter-spacing: .16em; color: var(--pp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ppx .pp-name-serif .pp-country { font-family: "Times New Roman", Georgia, serif; font-weight: 700; letter-spacing: .06em; }
.ppx .pp-country small { display: block; margin-top: .3em; font-size: .7em; font-weight: 600; letter-spacing: .1em; color: color-mix(in srgb, var(--pp-ink) 62%, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppx .pp-data-head .pro-pill { grid-area: pill; margin-left: 0; }
.ppx .pp-data-body { display: flex; gap: 3cqw; padding: 2.6cqw 3.4cqw 0; }
.ppx .pp-portrait-col { flex: 0 0 25%; display: flex; flex-direction: column; gap: 1.2cqw; }
.ppx .pp-photo {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  aspect-ratio: 35 / 45; border-radius: 1.2cqw; background: #c9d3df; color: #7d8ba0;
}
.ppx .pp-photo svg { width: 45%; height: 45%; }
.ppx .pp-sig {
  padding-top: .3cqw; border-top: 1px solid color-mix(in srgb, var(--pp-ink) 35%, transparent);
  font-family: "Mrs Saint Delafield", cursive; font-size: clamp(14px, 4.6cqw, 32px); line-height: 1; text-align: center;
  color: color-mix(in srgb, var(--pp-ink) 70%, #0b1430); white-space: nowrap; overflow: hidden;
}
.ppx .pp-fields { flex: 1; min-width: 0; margin: 0; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 1.5cqw 2.2cqw; align-content: start; }
.ppx .pp-field { grid-column: span 8; min-width: 0; }
.ppx .pp-field.is-half { grid-column: span 12; }
.ppx .pp-field.is-full { grid-column: span 24; }
.ppx .pp-field.is-date { grid-column: span 9; }
.ppx .pp-field.is-short { grid-column: span 6; }
.ppx .pp-field dt {
  font-size: clamp(9px, 1.65cqw, 11.5px); font-weight: 600; line-height: 1.2; color: var(--pp-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ppx .pp-field dt i { display: block; font-size: .9em; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.ppx .pp-field dd {
  margin: .15em 0 0; font-size: clamp(12px, 2.6cqw, 17px); font-weight: 700; letter-spacing: .04em; color: #111a2b;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ppx .pp-ghost {
  position: absolute; right: 3.4cqw; bottom: calc(var(--pp-w) * .135); width: 6.5cqw; border-radius: .8cqw;
  opacity: .28; mix-blend-mode: multiply;
}
.ppx .pp-mrz { margin-top: 2.6cqw; background: rgba(255, 255, 255, .7); box-shadow: 0 -1px 0 color-mix(in srgb, var(--pp-ink) 14%, transparent); }
.ppx .pp-mrz svg { display: block; width: 100%; height: auto; }
.ppx .pp-mrz text { font-family: var(--f-mono); font-size: 30px; font-weight: 500; fill: #1b2232; font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; }
/* the second spread: stamps above the fold, visas below; the turning page
   carries copies of the routes page (front) and the visas page (back) */
.ppx .pp-p2, .ppx .pp-turn {
  position: absolute; left: 5px; right: 5px; height: calc((100% - 10px - var(--pp-fold-h)) / 2);
}
.ppx .pp-p2 { z-index: 3; visibility: hidden; }
.ppx .pp-p2.is-top { top: 5px; }
.ppx .pp-p2.is-bot { bottom: 5px; }
.ppx .pp-p2-page { position: absolute; inset: 0; isolation: isolate; }
.ppx .pp-p2-page {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .22  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"),
    repeating-radial-gradient(circle at 50% 56%, transparent 0 9px, color-mix(in srgb, var(--pp-ink) 7%, transparent) 9px 10px, transparent 10px 15px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cpath d='M0 12 Q15 2 30 12 T60 12 T90 12 T120 12 M0 18 Q15 8 30 18 T60 18 T90 18 T120 18' fill='none' stroke='%232f5fb3' stroke-opacity='.07' stroke-width='.7'/%3E%3C/svg%3E"),
    linear-gradient(100deg, var(--pp-paper-a) 0%, var(--pp-paper-m) 48%, var(--pp-paper-b) 100%);
  background-size: 160px 160px, 100% 100%, 120px 24px, 100% 100%;
}
.ppx .pp-p2-page .pp-visa-head { z-index: 2; }
.ppx .pp-p2-page::before {
  content: "LYVR · PASSPORT · PASSEPORT · PASAPORTE · LYVR · PASSPORT · PASSEPORT · PASAPORTE · LYVR · PASSPORT";
  position: absolute; left: 3.4cqw; right: 3.4cqw; top: 19%; overflow: hidden; white-space: nowrap; pointer-events: none;
  font: 700 clamp(5px, 1.2cqw, 7px)/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .3em;
  color: color-mix(in srgb, var(--pp-ink) 30%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--pp-ink) 14%, transparent); padding-top: 2px;
}
.ppx .pp-p2-no { position: absolute; z-index: 2; right: 3.4cqw; bottom: 2.4cqw; font: 600 clamp(9px, 2.2cqw, 11px)/1 ui-monospace, "SF Mono", Menlo, monospace; color: color-mix(in srgb, var(--pp-ink) 60%, #fff); }
.ppx .pp-p2.is-top .pp-page { border-radius: 13px 13px 0 0; }
.ppx .pp-p2.is-bot .pp-page { border-radius: 0 0 13px 13px; }
.ppx .pp-turn {
  top: 5px; z-index: 4; display: none; pointer-events: none;
  transform-origin: 50% calc(100% + var(--pp-fold-h) / 2);
}
.ppx .pp-turn-face { position: absolute; inset: 0; }
.ppx .pp-turn-face > .pp-page { position: absolute; inset: 0; }
.ppx .pp-turn-face.is-front > .pp-page { border-radius: 13px 13px 0 0; }
.ppx .pp-turn-face.is-back { transform: rotateX(180deg); }
.ppx .pp-turn-face.is-back > .pp-page { border-radius: 0 0 13px 13px; }
/* the stamps, where the app's _ppScatterStamps put them for a 600px book */
.ppx .pp-stamps { list-style: none; margin: 0; padding: 0; }
.ppx .pp-stamps > li { display: contents; }
.ppx .pp-stamps.pp-p2-scatter { position: absolute; inset: 2cqw 2.4cqw; display: block; }
.ppx .pp-stamp {
  --ink: var(--stamp);
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); margin: -46px 0 0 -46px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 92px; height: 92px; padding: 6px; text-align: center; color: var(--ink); line-height: 1.5;
  border-radius: 12px; opacity: calc(.92 * var(--ppx-in, 1));
  transform: rotate(var(--tilt)) scale(calc(var(--k, .8) * (1 + .7 * (1 - var(--ppx-in, 1)))));
}
.ppx .pp-stamp.is-round { border-radius: 50%; }
.ppx .pp-stamp.is-off { display: none; }
.ppx .pp-stamp-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.ppx .pp-stamp-art text { font-family: inherit; }
.ppx .pp-stamp-mark { opacity: .2; }
.ppx .pp-stamp > span:not(.pp-stamp-count) { position: relative; }
.ppx .pp-stamp-code { font-size: 19px; font-weight: 800; letter-spacing: .06em; line-height: 1; }
.ppx .pp-stamp-city {
  max-width: 56px; margin-top: 2px; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ppx .pp-stamp.is-square .pp-stamp-city { max-width: 66px; }
.ppx .pp-stamp-city.is-wrapped { white-space: normal; line-height: 1.05; text-overflow: clip; }
.ppx .pp-stamp-city:empty { display: none; }
.ppx .pp-stamp-date { margin-top: 2px; font: 700 8.5px/1.1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .02em; }
.ppx .pp-stamp-count {
  position: absolute; top: -6px; right: -6px; padding: 1px 6px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; line-height: 1.5; color: #fff; background: var(--stamp);
}
/* the visas, stuck on the paper */
.ppx .pp-p2-grid {
  position: absolute; left: 3.4cqw; right: 3.4cqw; top: 25%; bottom: 8%;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2.4cqw;
}
.ppx .visa {
  --visa-c: 58, 111, 240;
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start;
  min-height: 0; padding: 1.8cqw 2.2cqw 3cqw; border-radius: 3cqw; color: #16202c; line-height: 1.5;
  background: radial-gradient(120% 90% at 100% 100%, rgba(var(--visa-c), .32), rgba(var(--visa-c), 0) 70%),
    linear-gradient(160deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .5) 55%, rgba(255, 255, 255, .72));
  box-shadow: inset 0 1px 1px #fff, 0 1px 0 rgba(16, 32, 44, .06), 0 3px 8px rgba(16, 32, 44, .1);
}
.ppx .visa::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .45) 44%, rgba(255, 255, 255, 0) 58%);
}
.ppx .visa.cat-flying { --visa-c: 58, 111, 240; }
.ppx .visa.cat-layovers { --visa-c: 255, 140, 92; }
.ppx .visa.cat-arrivals { --visa-c: 43, 179, 155; }
.ppx .visa.cat-pickups { --visa-c: 238, 90, 140; }
.ppx .visa.cat-crew { --visa-c: 150, 100, 230; }
.ppx .visa.cat-lyvr { --visa-c: 30, 151, 196; }
.ppx .visa.cat-secret { --visa-c: 110, 90, 200; }
.ppx .visa.is-holo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; mix-blend-mode: soft-light;
  background: linear-gradient(120deg, #ffe08a, #ff9ec7, #9cc8ff, #9ff0cf, #ffe08a);
  background-size: 300% 300%; animation: ppx-holo 8s ease-in-out infinite alternate;
}
@keyframes ppx-holo { to { background-position: 100% 100%; } }
.ppx .visa-k { font: 800 clamp(6.5px, 1.75cqw, 9px)/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .25cqw; opacity: .65; }
.ppx .visa-n { margin-top: .6cqw; font-size: clamp(9.5px, 2.85cqw, 14px); line-height: 1.12; font-weight: 900; text-transform: uppercase; letter-spacing: .2px; overflow-wrap: anywhere; }
.ppx .visa-d { margin-top: .6cqw; font-size: clamp(8px, 2.2cqw, 11px); opacity: .75; padding-right: 7cqw; }
.ppx .visa-ic { position: absolute; width: 6cqw; height: 6cqw; right: 2.2cqw; bottom: 2.6cqw; color: rgb(var(--visa-c)); filter: drop-shadow(0 0 6px rgba(var(--visa-c), .45)); }
.ppx .visa-tier { position: absolute; height: .8cqw; left: 3cqw; right: 3cqw; bottom: 1.1cqw; border-radius: 99px; background: linear-gradient(140deg, #dbe6ff, #3a6ff0 60%, #2bb39b); }
.ppx .visa.tier-b .visa-tier { background: linear-gradient(140deg, #f3c9a1, #b9733f 55%, #e3a777); }
.ppx .visa.tier-s .visa-tier { background: linear-gradient(140deg, #f4f7fa, #9aa7b4 55%, #dbe2ea); }
.ppx .visa.tier-g .visa-tier { background: linear-gradient(140deg, #fff0b8, #d29b26 55%, #f6d470); box-shadow: 0 0 8px rgba(255, 200, 80, .7); }
.ppx .visa.tier-p .visa-tier { background: linear-gradient(140deg, #ffffff, #a9b8ff 40%, #9fe6dc 70%, #f0d9ff); box-shadow: 0 0 8px rgba(160, 180, 255, .8); }
@media (prefers-reduced-motion: reduce) {
  .ppx .visa.is-holo::before { animation: none; }
}

/* ---------- Visas (#visas): the achievements, under the book ----------
   The tiles are the app's visas (.visa in its style.css): liquid glass with
   the kind's colour glowing through and a tier strip, gold and platinum
   shimmering; here bigger, with each one's quip and rule, on an evening sky
   so the glass has something to show through. */
.hv .vx { position: relative; z-index: 1; padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(80px, 11vw, 150px); }
.hv .vx-head { max-width: 760px; }
.hv .vx-head .h2 { margin-top: 14px; }
.hv .vx-board {
  --vx-glass: linear-gradient(160deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .34) 55%, rgba(255, 255, 255, .5));
  --vx-rim: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .35), inset 1px 0 1px rgba(255, 255, 255, .3), inset -1px 0 1px rgba(255, 255, 255, .25);
  --vx-shadow: 0 8px 22px rgba(16, 32, 44, .14);
  --vx-glow: .38;
  --vx-text: #16202c;
  position: relative; margin-top: 48px; padding: clamp(18px, 3vw, 32px); border-radius: 34px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(255, 196, 150, .75), transparent 70%),
    radial-gradient(55% 60% at 10% 90%, rgba(170, 150, 255, .55), transparent 70%),
    radial-gradient(50% 60% at 50% 50%, rgba(255, 170, 190, .35), transparent 70%),
    linear-gradient(160deg, #b9c7f5 0%, #e3c3e6 50%, #f8cfae 100%);
}
.hv .vx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hv .vx-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font: 600 14px var(--f-body); color: var(--vx-text);
  background: rgba(255, 255, 255, .38); border: 1px solid rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 12px rgba(16, 32, 44, .08);
  transition: background .2s, transform .15s;
}
.hv .vx-chip span { font: 700 11px var(--f-mono); opacity: .55; }
.hv .vx-chip:hover { transform: translateY(-1px); }
.hv .vx-chip[aria-pressed="true"] { background: var(--vx-text); color: #fff; border-color: transparent; }
.hv .vx-chip[aria-pressed="true"] span { opacity: .7; }
.hv .vx-chip:focus-visible { outline: 3px solid var(--brand-hi); outline-offset: 2px; }
.hv .vx-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.hv .vx-board .vx-card[hidden] { display: none; } /* (.visa below is a flex box only when shown) */
.hv .vx-count { margin-top: 18px; font: 700 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--vx-text); opacity: .6; text-align: center; }
.hv .vx-board .visa:not([hidden]) {
  --visa-c: 58, 111, 240;
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start;
  min-height: 214px; padding: 14px 16px 24px; border-radius: 22px; color: var(--vx-text); line-height: 1.4;
  background: radial-gradient(120% 90% at 100% 100%, rgba(var(--visa-c), var(--vx-glow)), rgba(var(--visa-c), 0) 70%), var(--vx-glass);
  -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(1.06); backdrop-filter: blur(18px) saturate(180%) brightness(1.06);
  box-shadow: var(--vx-rim), var(--vx-shadow);
}
.hv .vx-board .visa::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .45) 44%, rgba(255, 255, 255, 0) 58%);
}
.hv .vx-board .visa.cat-flying { --visa-c: 58, 111, 240; }
.hv .vx-board .visa.cat-layovers { --visa-c: 255, 140, 92; }
.hv .vx-board .visa.cat-arrivals { --visa-c: 43, 179, 155; }
.hv .vx-board .visa.cat-pickups { --visa-c: 238, 90, 140; }
.hv .vx-board .visa.cat-crew { --visa-c: 150, 100, 230; }
.hv .vx-board .visa.cat-lyvr { --visa-c: 30, 151, 196; }
.hv .vx-board .visa.cat-secret { --visa-c: 110, 90, 200; }
.hv .vx-board .visa.is-holo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; mix-blend-mode: soft-light;
  background: linear-gradient(120deg, #ffe08a, #ff9ec7, #9cc8ff, #9ff0cf, #ffe08a);
  background-size: 300% 300%; animation: ppx-holo 8s ease-in-out infinite alternate;
}
.hv .vx-board .visa .visa-k { font: 800 10px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 1.4px; opacity: .65; }
.hv .vx-board .visa .visa-n { margin-top: 6px; font: 800 18px/1.08 var(--f-display); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; }
.hv .vx-own { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: rgb(var(--visa-c)); filter: brightness(.8); }
.hv .vx-quip { margin-top: 10px; font-size: 14.5px; font-style: italic; line-height: 1.4; opacity: .85; padding-right: 4px; }
.hv .vx-rule { margin-top: auto; padding: 12px 40px 0 0; font-size: 12px; line-height: 1.35; opacity: .6; }
.hv .vx-board .visa .visa-ic { position: absolute; right: 14px; bottom: 16px; width: 30px; height: 30px; color: rgb(var(--visa-c)); filter: drop-shadow(0 0 6px rgba(var(--visa-c), .45)); }
.hv .vx-board .visa .visa-tier { position: absolute; left: 16px; right: 16px; bottom: 7px; height: 4px; border-radius: 99px; background: linear-gradient(140deg, #dbe6ff, #3a6ff0 60%, #2bb39b); }
.hv .vx-board .visa.tier-b .visa-tier { background: linear-gradient(140deg, #f3c9a1, #b9733f 55%, #e3a777); }
.hv .vx-board .visa.tier-s .visa-tier { background: linear-gradient(140deg, #f4f7fa, #9aa7b4 55%, #dbe2ea); }
.hv .vx-board .visa.tier-g .visa-tier { background: linear-gradient(140deg, #fff0b8, #d29b26 55%, #f6d470); box-shadow: 0 0 8px rgba(255, 200, 80, .7); }
.hv .vx-board .visa.tier-p .visa-tier { background: linear-gradient(140deg, #ffffff, #a9b8ff 40%, #9fe6dc 70%, #f0d9ff); box-shadow: 0 0 8px rgba(160, 180, 255, .8); }
/* a secret one, not yet issued: clear glass, a dashed rim */
.hv .vx-board .visa.is-locked { background: rgba(255, 255, 255, .16); box-shadow: var(--vx-rim); outline: 1.5px dashed rgba(255, 255, 255, .75); outline-offset: -5px; }
.hv .vx-board .visa.is-locked::after { display: none; }
.hv .vx-board .visa.is-locked .visa-n { letter-spacing: .3em; }
.hv .vx-board .visa.is-locked .visa-ic { color: currentColor; opacity: .4; filter: none; }

/* a tap flips a visa over to its tiers (the script in index.html turns it
   edge-on, swaps the faces, and turns it back); both faces share one grid
   cell, so a card is as tall as its longer side and nothing moves */
.hv .vx-board .vx-card { width: 100%; margin: 0; border: 0; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hv .vx-board .vx-card:not([hidden]) { display: grid; }
.hv .vx-board .vx-card:focus-visible { outline: 3px solid var(--brand-hi); outline-offset: 3px; }
.hv .vx-front, .hv .vx-back { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.hv .vx-back, .hv .vx-card.is-flipped .vx-front { visibility: hidden; }
.hv .vx-card.is-flipped .vx-back { visibility: visible; }
.hv .vx-board .vx-card.is-flipped { --vx-glow: .2; }
.hv .vx-hint { position: absolute; top: 13px; right: 13px; width: 15px; height: 15px; opacity: .35; transition: opacity .2s, transform .3s; }
.hv .vx-card:hover .vx-hint { opacity: .75; transform: rotate(40deg); }
.hv .vx-back .visa-n { padding-right: 18px; }
.hv .vx-steps { list-style: none; width: 100%; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.hv .vx-steps li { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 9px; align-items: start; }
.hv .vx-steps i { grid-row: span 2; width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; background: linear-gradient(140deg, #dbe6ff, #3a6ff0 60%, #2bb39b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 3px rgba(0, 0, 0, .2); }
.hv .vx-steps .tier-b i { background: linear-gradient(140deg, #f3c9a1, #b9733f 55%, #e3a777); }
.hv .vx-steps .tier-s i { background: linear-gradient(140deg, #f4f7fa, #9aa7b4 55%, #dbe2ea); }
.hv .vx-steps .tier-g i { background: linear-gradient(140deg, #fff0b8, #d29b26 55%, #f6d470); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 6px rgba(255, 200, 80, .7); }
.hv .vx-steps .tier-p i { background: linear-gradient(140deg, #ffffff, #a9b8ff 40%, #9fe6dc 70%, #f0d9ff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 6px rgba(160, 180, 255, .8); }
.hv .vx-steps b { font-size: 13.5px; font-weight: 800; line-height: 1.3; }
.hv .vx-steps span { font-size: 12.5px; line-height: 1.35; opacity: .75; }
.hv .vx-note { margin-top: auto; padding-top: 12px; font-size: 12.5px; font-style: italic; line-height: 1.4; opacity: .7; }
.hv .vx-back .visa-n + .vx-note { margin-top: 10px; font-size: 14px; }

/* the medals: tiers and the new-visa sheet (the app's .visa-medal) */
.hv .vx-medal {
  position: relative; display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; flex: none;
  color: rgba(40, 30, 10, .8); background: linear-gradient(140deg, #dbe6ff, #3a6ff0 60%, #2bb39b);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), inset 0 -3px 6px rgba(0, 0, 0, .18), 0 6px 14px rgba(0, 0, 0, .18);
}
.hv .vx-medal::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .55); }
.hv .vx-medal svg { width: 26px; height: 26px; }
.hv .vx-medal.tier-b { background: linear-gradient(140deg, #f3c9a1, #b9733f 55%, #e3a777); }
.hv .vx-medal.tier-s { background: linear-gradient(140deg, #f4f7fa, #9aa7b4 55%, #dbe2ea); }
.hv .vx-medal.tier-g { background: linear-gradient(140deg, #fff0b8, #d29b26 55%, #f6d470); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), inset 0 -3px 6px rgba(0, 0, 0, .18), 0 6px 14px rgba(0, 0, 0, .18), 0 0 22px rgba(255, 200, 80, .6); }
.hv .vx-medal.tier-p { background: linear-gradient(140deg, #ffffff, #a9b8ff 40%, #9fe6dc 70%, #f0d9ff); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), inset 0 -3px 6px rgba(0, 0, 0, .12), 0 6px 14px rgba(0, 0, 0, .18), 0 0 22px rgba(160, 180, 255, .7); }
.hv .vx-medal.is-big { width: 104px; height: 104px; }
.hv .vx-medal.is-big svg { width: 46px; height: 46px; }

.hv .vx-more { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(64px, 8vw, 110px); }
.hv .vx-tiers h3, .hv .vx-unlock figcaption b { font-family: var(--f-display); }
.hv .vx-tiers h3 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.02; font-weight: 800; margin-top: 12px; }
.hv .vx-tiers > p { font-size: 18px; color: var(--ink-2); margin-top: 16px; max-width: 52ch; }
.hv .vx-ladder { list-style: none; padding: 0; margin: 30px 0 0; display: flex; gap: 10px; }
.hv .vx-ladder li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.hv .vx-ladder li + li { position: relative; }
.hv .vx-ladder li + li::before { content: ""; position: absolute; top: 29px; right: calc(50% + 36px); width: calc(100% - 62px); border-top: 2px dashed rgba(13, 23, 38, .15); }
.hv .vx-ladder b { font: 700 15px var(--f-display); }
.hv .vx-ladder span { font: 600 12px var(--f-mono); color: var(--ink-2); }
.hv .vx-ladder-name { margin-top: 16px; font-size: 15px; color: var(--ink-2); text-align: center; }
.hv .vx-ladder-name b { color: var(--ink); text-transform: uppercase; font-size: 13px; letter-spacing: .04em; margin-right: 6px; }
.hv .vx-unlock { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hv .vx-sheet {
  position: relative; width: min(360px, 100%); padding: 30px 22px 22px; border-radius: 30px; text-align: center; color: #16202c; overflow: hidden;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(160, 180, 255, .55), transparent 70%),
    linear-gradient(170deg, #eef0fb 0%, #f6eaf1 55%, #fbefe6 100%);
  box-shadow: inset 0 1px 0 #fff, 0 30px 60px rgba(16, 32, 44, .18);
}
.hv .vx-burst { display: flex; justify-content: center; animation: vx-pop 3.6s ease-in-out infinite; }
@keyframes vx-pop { 50% { transform: translateY(-4px) rotate(-3deg); } }
.hv .vx-sheet-k { margin-top: 18px; font: 800 11px var(--f-mono); letter-spacing: .22em; color: #5a6578; }
.hv .vx-sheet-name { margin-top: 8px; font: 800 26px/1.1 var(--f-display); letter-spacing: -.01em; }
.hv .vx-sheet-own { margin-top: 4px; font-weight: 700; color: #6f62d8; }
.hv .vx-sheet-quip { margin-top: 10px; font-style: italic; color: #3c4658; }
.hv .vx-sheet-more { margin-top: 8px; font-size: 13px; color: #6b7588; }
.hv .vx-sheet-btns { display: flex; gap: 10px; margin-top: 18px; }
.hv .vx-sheet-btns span { flex: 1; padding: 12px 0; border-radius: 14px; font-weight: 700; font-size: 15px; background: rgba(13, 23, 38, .06); }
.hv .vx-sheet-btns .go { flex: 2; background: #2b6ff0; color: #fff; }
.hv .vx-unlock figcaption { text-align: center; max-width: 36ch; }
.hv .vx-unlock figcaption b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.hv .vx-unlock figcaption > span { display: block; margin-top: 6px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.hv .vx-burst-row { display: flex !important; justify-content: center; margin-top: 18px !important; }
.hv .vx-burst-row .vx-medal { width: 44px; height: 44px; margin-left: -10px; }
.hv .vx-burst-row .vx-medal:first-child { margin-left: 0; }
.hv .vx-burst-row .vx-medal svg { width: 20px; height: 20px; }
.hv .vx-burst-row .vx-medal::before { inset: 4px; }
.hv .vx-rules { margin-top: clamp(64px, 8vw, 100px); }

@media (max-width: 960px) {
.hv .vx-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hv .vx-more { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
.hv .vx-steps { gap: 7px; }
.hv .vx-steps b { font-size: 12px; }
.hv .vx-steps span { font-size: 11.5px; }
.hv .vx-hint { top: 11px; right: 11px; width: 13px; height: 13px; }
.hv .vx-board { margin-inline: calc(var(--gutter) * -.5); border-radius: 28px; }
.hv .vx-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px 6px; }
.hv .vx-chips::-webkit-scrollbar { display: none; }
.hv .vx-chip { flex: none; }
.hv .vx-wall { gap: 10px; }
.hv .vx-board .visa { min-height: 196px; padding: 12px 12px 22px; border-radius: 18px; }
.hv .vx-board .visa .visa-n { font-size: 15px; }
.hv .vx-quip { font-size: 13px; }
.hv .vx-rule { font-size: 11px; padding-right: 30px; }
.hv .vx-board .visa .visa-ic { width: 24px; height: 24px; right: 11px; bottom: 14px; }
.hv .vx-ladder li + li::before { display: none; }
.hv .vx-ladder .vx-medal { width: 50px; height: 50px; }
}

@media (prefers-color-scheme: dark) {
.hv .vx-board {
  --vx-glass: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .1));
  --vx-rim: inset 0 1px 1px rgba(255, 255, 255, .28), inset 0 -1px 1px rgba(255, 255, 255, .08), inset 1px 0 1px rgba(255, 255, 255, .1), inset -1px 0 1px rgba(255, 255, 255, .08);
  --vx-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  --vx-glow: .3;
  --vx-text: #eef3fb;
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(255, 130, 100, .3), transparent 70%),
    radial-gradient(55% 60% at 10% 90%, rgba(120, 90, 255, .35), transparent 70%),
    linear-gradient(160deg, #141c3d 0%, #2a1f4a 55%, #3a2340 100%);
}
.hv .vx-chip { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.hv .vx-chip[aria-pressed="true"] { background: #eef3fb; color: #0d1726; }
.hv .vx-board .visa::after { opacity: .35; }
.hv .vx-board .visa.is-holo::before { opacity: .4; mix-blend-mode: screen; }
.hv .vx-own { filter: brightness(1.25); }
.hv .vx-board .visa.is-locked { background: rgba(255, 255, 255, .04); outline-color: rgba(255, 255, 255, .3); }
.hv .vx-ladder li + li::before { border-top-color: rgba(238, 243, 251, .18); }
.hv .vx-sheet {
  color: #eef3fb;
  background: radial-gradient(90% 60% at 50% 0%, rgba(120, 140, 255, .35), transparent 70%), linear-gradient(170deg, #1a2140 0%, #261c38 60%, #2e1f2e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 60px rgba(0, 0, 0, .45);
}
.hv .vx-sheet-k, .hv .vx-sheet-more { color: #a7b2c6; }
.hv .vx-sheet-quip { color: #cfd7e6; }
.hv .vx-sheet-own { color: #b3a8ff; }
.hv .vx-sheet-btns span { background: rgba(255, 255, 255, .1); }
}
@media (prefers-reduced-motion: reduce) {
.hv .vx-board .visa.is-holo::before, .hv .vx-burst { animation: none; }
}