:root {
  --ink: #070712;
  --ivory: #f3f0e8;
  --muted: #9c9baa;
  --line: #ffffff21;
  --lavender: #b4a6ee;
  --gold: #c4b06b;
  --paper: #f0eadb;
  color-scheme: dark;
  font-family: Arial,Helvetica,sans-serif;
  color: var(--ivory);
  background: var(--ink);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 30px;
}

body {
  margin: 0;
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button,input {
  font: inherit;
}

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

button,a {
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: default;
  opacity: .35;
}

img {
  max-width: 100%;
  display: block;
}

button {
  color: inherit;
}

button:focus-visible,a:focus-visible,input:focus-visible {
  outline: 2px solid var(--lavender);
  outline-offset: 6px;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ui-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.12em;
}

.ui-icon .icon-fill {
  fill: currentColor;
  stroke: none;
}

::selection {
  background: #b4a6ee;
  color: #070712;
}

[hidden] {
  display: none!important;
}

.shell {
  width: min(1320px,calc(100% - 112px));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute!important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  padding: 12px;
  background: var(--ivory);
  color: var(--ink);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Header and primary navigation */
.site-header {
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 2;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 29px;
  font-weight: 750;
  letter-spacing: -1.7px;
}

.brand img {
  border-radius: 8px;
}

nav {
  display: flex;
  gap: 34px;
  font-size: 12px;
  color: #c8c5d1;
}

nav a:hover,.text-link:hover,.site-footer a:hover {
  color: var(--lavender);
}

.header-cta {
  font-size: 10px;
  border: 1px solid #ffffff3d;
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  transition: background .2s;
}

.header-cta:hover {
  background: #ffffff0d;
}

/* Editorial hero and globe composition */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  padding-top: 82px;
  isolation: isolate;
}

.hero-copy {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.hero-copy a,.hero-copy button {
  pointer-events: auto;
}

.eyebrow,.chapter,.demo-label,.orbit-label,.globe-coordinate,.route-location>span,.platform-note,.cover-subtitle,.cover-year,.paper-topline,.paper-label,.stamp-hint,.passport-footnote>span,.form-note {
  font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size: 10px;
  letter-spacing: 1.45px;
  line-height: 1.6;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--lavender);
  margin: 0 0 29px;
  text-transform: uppercase;
}

.status-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lavender);
  box-shadow: 0 0 12px #ad9eed55;
}

h1 {
  font-size: clamp(56px,6.7vw,98px);
  line-height: .99;
  font-weight: 500;
  letter-spacing: -5.6px;
  margin: 0;
}

h1 em,h2 em {
  font-style: italic;
  font-family: Georgia,'Times New Roman',serif;
  font-weight: 400;
  color: var(--lavender);
}

.hero-description {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 390px;
  margin: 29px 0 24px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 23px;
  flex-wrap: wrap;
}
.hero-actions .text-link {
  font-size: 14px;
}

.button {
  border: 0;
  border-radius: 3px;
  padding: 17px 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.button-light {
  background: var(--ivory);
  color: #151222;
}

.button-light:hover {
  background: var(--lavender);
}

.play-mark {
  font-size: 9px;
}

.text-link {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ffffff3c;
  padding: 8px 0;
  font-size: 12px;
  display: inline-flex;
  gap: 21px;
  align-items: center;
}

.platform-note {
  color: #757480;
  font-size: 9px;
  letter-spacing: .3px;
  margin-top: 18px;
}

.globe-stage {
  position: relative;
  align-self: stretch;
  min-height: 500px;
  margin-left: -75px;
  margin-right: -30px;
  z-index: 1;
}

.globe-stage:before {
  content: '';
  position: absolute;
  inset: 0 0 5%;
  background: radial-gradient(ellipse,#6250a91b,transparent 65%);
  z-index: -1;
  pointer-events: none;
}

#journey-globe {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  display: block;
}

.orbit-label {
  position: absolute;
  top: -13px;
  right: 40px;
  color: #767383;
  font-size: 8px;
  letter-spacing: 2px;
  z-index: 2;
}

.tiny-cross {
  font-size: 16px;
  margin-right: 18px;
  color: var(--lavender);
}

.traveler-tag {
  position: absolute;
  bottom: 42px;
  left: 36%;
  display: flex;
  align-items: center;
  gap: 11px;
  background: #0d0c19ed;
  border: 1px solid #ffffff23;
  padding: 9px 13px 9px 9px;
  border-radius: 50px;
  box-shadow: 0 15px 40px #0003;
  z-index: 2;
  white-space: nowrap;
}

.traveler-tag img {
  border-radius: 50%;
  width: 37px;
  height: 37px;
  object-fit: cover;
}

.traveler-tag span {
  font-size: 11px;
}

.traveler-tag small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  margin-top: 5px;
}

.tag-arrow {
  padding: 0 6px;
  color: var(--lavender);
}

.globe-coordinate {
  position: absolute;
  right: 30px;
  bottom: 0;
  font-size: 8px;
  color: #797581;
}

.arrival-card {
  position: absolute;
  left: 12%;
  right: 6%;
  bottom: 120px;
  z-index: 3;
  padding: 25px;
  background: #090815ed;
  border: 1px solid #b4a6ee40;
  box-shadow: 0 15px 80px #070712;
  border-radius: 3px;
}

.arrival-card .eyebrow {
  margin-bottom: 12px;
}

.arrival-card strong {
  font: italic 42px Georgia,serif;
  display: block;
}

.arrival-card a {
  display: inline-block;
  margin-top: 18px;
  color: var(--lavender);
  font-size: 12px;
}

/* Journey controls and chapter navigation */
.route-manifest {
  grid-column: 1/-1;
  margin-top: 64px;
  border-top: 1px solid var(--line);
  padding: 23px 0 0;
  position: relative;
  z-index: 3;
}

.manifest-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chapter {
  color: var(--lavender);
}

.demo-label {
  font-size: 8px;
  color: #85818e;
  letter-spacing: 1px;
}

.route-row {
  display: flex;
  align-items: center;
  gap: 33px;
  margin-top: 23px;
}

.route-location {
  min-width: 155px;
}

.route-location>span {
  font-size: 8px;
  letter-spacing: 1.2px;
  color: #797583;
}

.route-location strong {
  display: block;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -.6px;
  margin-top: 7px;
}

.route-location small {
  font: 9px ui-monospace,monospace;
  color: #77737e;
  vertical-align: middle;
  margin-left: 10px;
}

.route-track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--lavender);
  font-size: 13px;
}

.route-dash {
  height: 1px;
  background: var(--line);
  flex: 1;
}

.route-plane {
  display: inline-flex;
  font-size: 20px;
}

.route-node {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.route-node-filled {
  background: currentColor;
}

.journey-controls {
  display: flex;
  gap: 8px;
  border-left: 1px solid var(--line);
  padding-left: 32px;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  border: 1px solid #ffffff35;
  border-radius: 50%;
  background: transparent;
  font-size: 16px;
}

.icon-button:hover:not(:disabled) {
  border-color: var(--lavender);
  background: #b4a6ee12;
}

.journey-timeline {
  margin-top: 23px;
}

.journey-timeline input {
  display: block;
  appearance: none;
  width: 100%;
  height: 20px;
  cursor: pointer;
  margin: 0;
  background: transparent;
  accent-color: var(--lavender);
}

.journey-timeline input::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right,var(--lavender) var(--progress,0%),#ffffff1b var(--progress,0%));
}

.journey-timeline input::-webkit-slider-thumb {
  appearance: none;
  width: 8px;
  height: 8px;
  background: var(--lavender);
  border-radius: 50%;
  margin-top: -3px;
}

.journey-timeline input::-moz-range-track {
  height: 2px;
  background: #ffffff1b;
}

.journey-timeline input::-moz-range-progress {
  height: 2px;
  background: var(--lavender);
}

.journey-timeline input::-moz-range-thumb {
  width: 8px;
  height: 8px;
  background: var(--lavender);
  border: 0;
  border-radius: 50%;
}

.chapter-steps {
  display: flex;
  justify-content: space-between;
}

.chapter-steps button {
  border: 0;
  background: transparent;
  color: #77737f;
  padding: 10px 0;
  font: 9px ui-monospace,monospace;
  letter-spacing: .5px;
}

.chapter-steps button.is-current {
  color: var(--lavender);
}

/* Editorial story divider */
.story-strip {
  margin-top: 69px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 28px;
}

.little-star {
  display: inline-flex;
  font-size: 34px;
  color: var(--lavender);
  font-weight: 300;
}

.story-strip>p {
  font-size: 28px;
  letter-spacing: -.8px;
  margin: 0;
}

.story-strip em {
  font-family: Georgia,serif;
  color: var(--lavender);
}

.story-aside {
  margin-left: auto;
  font-size: 11px;
  line-height: 1.8;
  color: var(--muted);
}

/* A human-scale counterpoint to the Maracanã journey. */
.ground-story {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  align-items: center;
  gap: clamp(38px,5vw,86px);
  margin-top: 108px;
}

.ground-story-media {
  position: relative;
  margin: 0;
  height: clamp(420px,42vw,590px);
  overflow: hidden;
  border: 1px solid #ffffff25;
  background: #151727;
}

.ground-story-media:after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent,#070712ae);
  pointer-events: none;
}

.ground-story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% center;
}

.ground-story-media figcaption {
  position: absolute;
  bottom: 22px;
  left: 24px;
  z-index: 1;
  font: 10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing: 1.2px;
  color: #f3f0e8d9;
}

.ground-story-copy .eyebrow {
  margin-bottom: 24px;
}

.ground-story-copy h2 {
  font-size: clamp(44px,4.7vw,68px);
  line-height: 1.06;
  letter-spacing: -2.9px;
}

.ground-story-copy>p:not(.eyebrow) {
  max-width: 39ch;
  font-size: 16px;
  line-height: 1.85;
  color: #c0bdc9;
  margin: 28px 0 0;
}

.ground-story-copy .ground-story-refrain {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font: italic 22px/1.4 Georgia,'Times New Roman',serif;
  color: var(--ivory);
}

@media(max-width:760px) {
  .ground-story {
    grid-template-columns: 1fr;
    gap: 31px;
    margin-top: 68px;
  }
  .ground-story-media {
    height: clamp(260px,70vw,430px);
  }
  .ground-story-copy h2 {
    font-size: clamp(42px,8vw,56px);
    letter-spacing: -2.1px;
  }
  .ground-story-copy>p:not(.eyebrow) {
    font-size: 14px;
    margin-top: 22px;
  }
  .ground-story-copy .ground-story-refrain {
    font-size: 20px;
    margin-top: 26px;
  }
}

@media(max-width:360px) {
  .ground-story-copy h2 {
    font-size: 40px;
  }
}

/* Passport introduction and cover */
.passport-section {
  padding-top: 115px;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 35px;
}

.section-heading .eyebrow {
  margin-bottom: 22px;
}

h2 {
  font-size: clamp(50px,5.7vw,80px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -3px;
  margin: 0;
}

.section-description p {
  font-size: 17px;
  line-height: 1.6;
  color: #c0bdc9;
  margin: 0 0 22px;
}

.section-description {
  padding-bottom: 6px;
}

.passport-experience {
  margin-top: 55px;
  position: relative;
  background: radial-gradient(ellipse at 72% 50%,#29213966,transparent 65%),#0c0b17;
  border: 1px solid #ffffff0c;
  min-height: 505px;
}

.passport-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 505px;
  padding: 48px 65px;
  gap: 40px;
}

.passport-caption h3 {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -1px;
  font-weight: 400;
  margin: 26px 0 20px;
}

.passport-caption>p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 230px;
}

.passport-caption .text-link {
  margin-top: 15px;
  color: var(--lavender);
}

.cover-wrap {
  position: relative;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  padding: 5px 0 10px;
}

.passport-cover {
  position: relative;
  width: 258px;
  height: 365px;
  background: radial-gradient(ellipse at 20% 0%,#51458155,transparent 80%),linear-gradient(90deg,#191332,#332962 4%,#292159 9%,#292159 96%,#544578);
  border-radius: 4px 16px 16px 4px;
  color: var(--gold);
  padding: 17px;
  transform: rotate(-8deg) rotateY(-10deg);
  box-shadow: 2px 3px 0 #776b60,5px 6px 0 #21192e,11px 16px 27px #0008,inset 0 0 2px #afa08277;
  transition: transform .4s;
}

.cover-wrap:hover .passport-cover {
  transform: rotate(-4deg) rotateY(-5deg);
}

.passport-cover:after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .15;
  background-image: repeating-linear-gradient(30deg,transparent 0 1px,#b9a0ff33 1px 2px);
  pointer-events: none;
  border-radius: inherit;
}

.cover-border {
  height: 100%;
  border: 1px solid #c4b06b50;
  border-radius: 2px 8px 8px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 12px 18px;
}

.cover-republic {
  font: 12px Georgia,serif;
  line-height: 1.5;
  letter-spacing: 3px;
}

.cover-globe {
  width: 95px;
  height: 95px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.1;
  margin: 18px 0 12px;
}

.cover-title {
  font: 18px Georgia,serif;
  letter-spacing: 5px;
}

.cover-subtitle {
  font-size: 6px;
  letter-spacing: 1.2px;
  margin-top: 16px;
}

.cover-year {
  font-size: 9px;
  margin-top: auto;
}

/* Interactive passport pages and stamp collection */
.passport-open {
  padding: 22px 30px 16px;
}

.passport-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.passport-toolbar .text-link {
  font-size: 10px;
  border: 0;
}

.passport-book {
  display: grid;
  grid-template-columns: 1fr 1fr;
  filter: drop-shadow(0 16px 15px #0004);
  color: #3e3551;
}

.passport-page {
  position: relative;
  background-color: var(--paper);
  min-height: 432px;
  padding: 26px 30px 40px;
  /* One continuous sheet per page avoids exposed bands on tall phone layouts. */
  background-image: url('/assets/cinematic/passport-top.png');
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.identity-page {
  border-radius: 5px 0 0 5px;
  border-right: 1px solid #96866d77;
}

.identity-page:after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 25px;
  background: linear-gradient(90deg,transparent,#594b3a1f);
  pointer-events: none;
}

.stamps-page {
  background-image: url('/assets/cinematic/passport-bottom.png');
  border-radius: 0 5px 5px 0;
  box-shadow: inset 15px 0 22px -22px #2b1a12;
}

.paper-topline {
  font-size: 8px;
  color: #696076;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #68607133;
  padding-bottom: 12px;
  letter-spacing: 1px;
}

.passport-person {
  display: flex;
  gap: 23px;
  align-items: center;
  margin-top: 31px;
}

.passport-person img {
  width: 96px;
  height: 120px;
  object-fit: cover;
  filter: sepia(.16);
  border-radius: 2px;
}

.paper-label {
  display: block;
  font-size: 7px;
  letter-spacing: 1px;
  color: #74687c;
}

.passport-person h3 {
  font: 28px Georgia,serif;
  margin: 9px 0 6px;
}

.passport-person p {
  font: 10px ui-monospace,monospace;
  margin: 0 0 19px;
}

.identity-rule {
  height: 1px;
  background: #68607130;
  margin-top: 25px;
}

.passport-quote {
  font: italic 29px/1.15 Georgia,serif;
  margin: 20px 0 10px;
}

.paper-note {
  font-size: 10px;
  line-height: 1.6;
  max-width: 265px;
  color: #746b79;
}

.passport-mrz {
  font: 9px/1.6 ui-monospace,monospace;
  letter-spacing: 1px;
  color: #928495;
  margin-top: 23px;
  white-space: nowrap;
}

.paper-number {
  position: absolute;
  bottom: 14px;
  left: 50%;
  font: 9px Georgia,serif;
  color: #897c91;
}

.spread-subtitle {
  font: italic 13px Georgia,serif;
  text-align: center;
  color: #82748b;
  margin: 18px 0 0;
}

.stamp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  min-height: 305px;
  gap: 6px;
  padding: 8px 0;
}

.stamp-grid.single-stamp {
  grid-template-columns: 1fr;
}

.stamp-button {
  border: 0;
  background: transparent;
  padding: 4px;
  width: 100%;
  height: 137px;
  position: relative;
  transition: transform .2s;
}

.stamp-button img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  mix-blend-mode: normal;
  filter: brightness(1.65) saturate(1.15) drop-shadow(0 3px 8px #0008);
}

.single-stamp .stamp-button {
  height: 265px;
  width: 80%;
}

.stamp-button:hover {
  transform: scale(1.07)!important;
}

.stamp-button:focus-visible {
  outline-color: #604579;
}

.stamp-hint {
  color: #81718a;
  font-size: 7px;
  letter-spacing: .5px;
  text-align: center;
  margin: 0;
}

.book-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin-top: 20px;
}

.book-pagination .icon-button {
  width: 32px;
  height: 32px;
  font-size: 15px;
}

.page-dots {
  display: flex;
  gap: 12px;
}

.page-dots button {
  border: 0;
  background: transparent;
  padding: 9px;
  position: relative;
  min-width: 26px;
  min-height: 32px;
}

.page-dots button:before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffffff40;
}

.page-dots button[aria-current=true]:before {
  background: var(--lavender);
  box-shadow: 0 0 0 3px #b4a6ee16;
}

.passport-footnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 21px 0;
  border-bottom: 1px solid var(--line);
  gap: 20px;
}

.passport-footnote>span {
  font-size: 8px;
  color: #746e81;
}

.passport-footnote p {
  font-size: 11px;
  color: #aaa5b4;
}

.passport-footnote>.ui-icon {
  font-size: 22px;
  color: var(--lavender);
}

/* Waitlist conversion and footer */
.waitlist-section {
  padding: 115px 0 108px;
  text-align: center;
  position: relative;
}

.waitlist-section:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 75%,#392c5b28,transparent 65%);
}

.waitlist-section .eyebrow {
  justify-content: center;
  margin-bottom: 25px;
}

.waitlist-description {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  margin: 25px 0 29px;
}

.waitlist-form {
  max-width: 485px;
  margin: auto;
  text-align: left;
}

.waitlist-form label {
  font-size: 10px;
  display: block;
  margin: 0 0 10px;
  color: #c2bbcd;
}

.form-row {
  display: flex;
  border: 1px solid #ffffff2b;
  padding: 5px;
  background: #ffffff03;
  border-radius: 4px;
  gap: 5px;
}

.form-row input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ivory);
  padding: 13px;
  font-size: 12px;
  outline-offset: 0;
}

.form-row input::placeholder {
  color: #847d91;
}

.form-row button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--lavender);
  color: #171123;
  border: 0;
  border-radius: 2px;
  padding: 0 19px;
  font-size: 11px;
  font-weight: 600;
}

.form-row button span {
  margin-left: 0;
}

.form-row button:hover {
  background: #c7baf7;
}

.form-note {
  font-size: 8px;
  letter-spacing: .3px;
  color: #766e83;
  text-align: center;
  margin-top: 12px;
}

.site-footer {
  padding: 29px 0 34px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.site-footer .brand {
  font-size: 26px;
}

.footer-message {
  font: italic 14px Georgia,serif;
  color: #9c94aa;
}

.site-footer>div {
  display: flex;
  gap: 22px;
  font-size: 9px;
  color: #807889;
}

/* Accessible stamp detail dialog */
.stamp-dialog {
  width: min(410px,calc(100% - 32px));
  padding: 38px 30px 30px;
  background: var(--paper);
  color: #392d4a;
  border: 1px solid #c8bead;
  border-radius: 5px;
  box-shadow: 0 40px 100px #0008;
  text-align: center;
}

.stamp-dialog::backdrop {
  background: #04040bcc;
  backdrop-filter: blur(7px);
}

.stamp-dialog .eyebrow {
  color: #7a618c;
  justify-content: center;
  font-size: 8px;
  margin: 10px 0 18px;
}

.stamp-dialog>img {
  width: 200px;
  height: 220px;
  object-fit: contain;
  margin: auto;
  mix-blend-mode: multiply;
}

.stamp-dialog h3 {
  font: 34px Georgia,serif;
  margin: 14px 0 8px;
}

.stamp-dialog>p {
  font-size: 12px;
  line-height: 1.7;
  color: #776782;
}

.stamp-dialog .demo-label {
  font-size: 7px;
  display: block;
  margin-top: 23px;
  color: #776782;
}

.dialog-close {
  position: absolute;
  right: 10px;
  top: 10px;
  border-color: #392d4a30;
  width: 29px;
  height: 29px;
}

.static-passport {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 30px;
  font-size: 13px;
  color: var(--muted);
}

.static-passport img {
  background: var(--paper);
  object-fit: contain;
}

.fallback-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}

/* Responsive layouts */
@media(min-width:1500px) {
  .hero {
    padding-top: 110px;
  }
  .globe-stage {
    min-height: 550px;
  }
  .hero h1 {
    font-size: 106px;
  }
  .hero-description {
    margin-top: 34px;
  }
  .route-manifest {
    margin-top: 75px;
  }
}

@media(max-width:1100px) {
  .shell {
    width: calc(100% - 72px);
  }
  .hero {
    padding-top: 64px;
  }
  h1 {
    letter-spacing: -4px;
    font-size: 72px;
  }
  .hero-copy .eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .hero-description {
    font-size: 13px;
    max-width: 290px;
  }
  .hero-actions {
    gap: 15px;
  }
  .hero-actions .button {
    font-size: 10px;
    padding: 16px;
  }
  .hero-actions .text-link {
    font-size: 12px;
  }
  .globe-stage {
    margin-left: -85px;
    min-height: 470px;
  }
  .traveler-tag {
    left: 29%;
  }
  .orbit-label {
    right: 15px;
    font-size: 7px;
  }
  .globe-coordinate {
    right: 5px;
  }
  .passport-intro {
    padding-inline: 45px;
  }
  .passport-page {
    padding-inline: 22px;
  }
  .passport-person {
    gap: 15px;
  }
  .passport-mrz {
    font-size: 7px;
  }
  .section-description .demo-label {
    font-size: 7px;
  }
}

@media(max-width:760px) {
  .shell {
    width: calc(100% - 40px);
  }
  .site-header {
    height: 80px;
  }
  .brand {
    font-size: 26px;
  }
  .brand img {
    width: 28px;
    height: 28px;
  }
  nav {
    gap: 19px;
    font-size: 10px;
  }
  .header-cta {
    font-size: 10px;
    padding: 11px 12px;
    gap: 12px;
  }
  .hero {
    padding-top: 45px;
    grid-template-columns: 1fr;
  }
  .hero-copy {
    max-width: 100%;
  }
  .hero-copy .eyebrow {
    font-size: 8px;
    margin-bottom: 24px;
    letter-spacing: 1.2px;
  }
  h1 {
    font-size: clamp(59px,10vw,78px);
    letter-spacing: -3.5px;
    line-height: 1.01;
  }
  .hero-description {
    max-width: 360px;
    font-size: 13px;
    margin-top: 30px;
  }
  .hero-actions .button {
    font-size: 11px;
  }
  .hero-actions .text-link {
    font-size: 11px;
  }
  .platform-note {
    font-size: 8px;
  }
  .globe-stage {
    min-height: 420px;
    height: 64vw;
    max-height: 510px;
    margin: 4px -16px 0;
  }
  .orbit-label {
    top: 20px;
    right: 25px;
    font-size: 7px;
  }
  .traveler-tag {
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
  }
  .globe-coordinate {
    bottom: 0;
    right: 24px;
  }
  .route-manifest {
    margin-top: 24px;
    padding-top: 18px;
  }
  .route-row {
    gap: 15px;
    margin-top: 20px;
  }
  .route-location {
    min-width: 100px;
  }
  .route-location strong {
    font-size: 21px;
  }
  .route-location small {
    font-size: 8px;
    margin-left: 4px;
  }
  .route-location>span {
    font-size: 7px;
  }
  .route-track {
    gap: 8px;
  }
  .journey-controls {
    padding-left: 13px;
    gap: 5px;
  }
  .icon-button {
    width: 33px;
    height: 33px;
    font-size: 13px;
  }
  .chapter {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .demo-label {
    font-size: 7px;
    letter-spacing: .7px;
  }
  .chapter-steps button {
    font-size: 8px;
    letter-spacing: 0;
  }
  .story-strip {
    margin-top: 45px;
    padding: 27px 0;
    gap: 17px;
    flex-wrap: wrap;
  }
  .story-strip>p {
    font-size: 26px;
  }
  .story-aside {
    width: 100%;
    margin-left: 0;
    font-size: 10px;
  }
  .little-star {
    font-size: 32px;
  }
  .passport-section {
    padding-top: 70px;
  }
  .section-heading {
    display: block;
  }
  h2 {
    font-size: 59px;
    letter-spacing: -2.5px;
  }
  .section-description {
    margin-top: 25px;
  }
  .section-description p {
    font-size: 15px;
    margin-bottom: 15px;
  }
  .passport-experience {
    margin-top: 30px;
  }
  .passport-intro {
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 35px 30px 50px;
  }
  .passport-caption h3 {
    font-size: 30px;
    margin: 20px 0 15px;
  }
  .passport-caption>p {
    max-width: 300px;
  }
  .passport-caption .text-link {
    margin-top: 7px;
  }
  .cover-wrap {
    padding-top: 6px;
  }
  .passport-cover {
    width: 235px;
    height: 335px;
  }
  .cover-border {
    padding-top: 21px;
  }
  .cover-globe {
    width: 85px;
    height: 85px;
    margin: 15px 0 12px;
  }
  .cover-title {
    font-size: 16px;
  }
  .cover-republic {
    font-size: 11px;
  }
  .passport-open {
    padding: 15px 12px;
  }
  .passport-book {
    grid-template-columns: 1fr;
  }
  .identity-page {
    display: none;
  }
  .passport-page {
    min-height: 430px;
    border-radius: 3px;
    padding-inline: 22px;
  }
  .passport-toolbar .demo-label {
    font-size: 6px;
  }
  .passport-toolbar .text-link {
    font-size: 9px;
    gap: 12px;
  }
  .stamp-grid {
    min-height: 305px;
  }
  .stamp-button {
    height: 145px;
  }
  .single-stamp .stamp-button {
    height: 265px;
  }
  .passport-footnote {
    flex-wrap: wrap;
    gap: 4px;
    padding: 19px 0;
  }
  .passport-footnote>span:first-child {
    width: 100%;
    font-size: 7px;
  }
  .passport-footnote p {
    font-size: 10px;
  }
  .waitlist-section {
    padding: 78px 0 70px;
  }
  .waitlist-section h2 {
    font-size: clamp(44px,8vw,62px);
  }
  .waitlist-description {
    font-size: 13px;
  }
  .site-footer {
    flex-wrap: wrap;
    gap: 22px;
    padding-top: 25px;
  }
  .footer-message {
    font-size: 12px;
  }
  .site-footer>div {
    width: 100%;
    justify-content: space-between;
  }
  .arrival-card {
    bottom: 96px;
    left: 10%;
    right: 10%;
    padding: 22px;
  }
  .arrival-card strong {
    font-size: 36px;
  }
}

@media(max-width:420px) {
  .shell {
    width: calc(100% - 36px);
  }
  nav {
    display: none;
  }
  .header-cta {
    padding: 11px 13px;
  }
  .hero {
    padding-top: 38px;
  }
  h1 {
    font-size: 56px;
    letter-spacing: -3px;
  }
  h1 br:nth-of-type(1) {
    display: block;
  }
  .hero-description {
    max-width: 280px;
    font-size: 13px;
  }
  .hero-actions {
    gap: 18px;
  }
  .hero-actions .button {
    padding: 15px 13px;
    font-size: 10px;
  }
  .hero-actions .text-link {
    font-size: 12px;
    gap: 10px;
  }
  .globe-stage {
    min-height: 300px;
    height: 300px;
  }
  .route-location {
    min-width: 90px;
  }
  .route-location strong {
    font-size: 18px;
  }
  .route-track {
    gap: 5px;
  }
  .journey-controls {
    padding-left: 9px;
    gap: 4px;
  }
  .journey-controls .icon-button {
    width: 29px;
    height: 29px;
    font-size: 11px;
  }
  .route-row {
    gap: 9px;
  }
  .route-location small {
    font-size: 7px;
  }
  .route-plane {
    font-size: 18px;
  }
  .chapter-steps button {
    font-size: 7px;
  }
  .story-strip>p {
    font-size: 23px;
  }
  .passport-intro {
    padding: 30px 24px 44px;
  }
  .form-row input {
    font-size: 11px;
    padding: 13px 9px;
  }
  .form-row button {
    padding: 0 12px;
    font-size: 10px;
  }
  .form-row button span {
    margin-left: 7px;
  }
  .waitlist-section h2 {
    font-size: 44px;
    letter-spacing: -2px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  *,*:before,*:after {
    animation: none!important;
    transition: none!important;
  }
  .cover-wrap:hover .passport-cover {
    transform: rotate(-8deg) rotateY(-10deg);
  }
}

/* The destination adds a tangible passport stamp, without obscuring the route marker. */
.arrival-card {
  left: auto;
  right: 0;
  top: 53px;
  bottom: auto;
  padding: 12px 15px 12px 12px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: #0b0913dc;
  border: 1px solid #ffffff16;
  box-shadow: 0 10px 35px #0004;
  max-width: 355px;
}

.arrival-stamp-paper {
  width: 83px;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  transform: rotate(-5deg);
}

.arrival-stamp-paper img {
  width: 100%;
  height: auto;
  aspect-ratio: 306 / 375;
  object-fit: contain;
  mix-blend-mode: multiply;
  animation: collect-stamp .65s cubic-bezier(.16,1,.3,1) both;
}

.arrival-copy .eyebrow {
  font-size: 7px;
  letter-spacing: .8px;
  margin-bottom: 10px;
}

.arrival-card strong {
  font-size: 27px;
  white-space: normal;
  line-height: 1.08;
  max-width: 220px;
}

.arrival-card a {
  font-size: 9px;
  margin-top: 12px;
}

@keyframes collect-stamp {
  from {
    opacity: 0;
    transform: scale(1.55) rotate(9deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@media(max-width:760px) {
  .arrival-card {
    top: 44px;
    right: 15px;
    left: auto;
    bottom: auto;
    max-width: 310px;
    padding: 10px;
    gap: 13px;
  }
  .arrival-stamp-paper {
    width: 70px;
  }
  .arrival-stamp-paper img {
    height: auto;
  }
  .arrival-card strong {
    font-size: 24px;
  }
  .arrival-copy .eyebrow {
    font-size: 6px;
  }
  .arrival-card a {
    font-size: 8px;
  }
}

/* Readable labels and generous touch targets are retained at every viewport. */
.stamp-art {
  display: block;
  width: 100%;
  height: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  background-color: #30333c;
  mix-blend-mode: multiply;
}

.stamp-dialog #stamp-dialog-image {
  width: 200px;
  height: 220px;
  margin: auto;
}

.demo-label,.chapter,.platform-note,.route-location>span,.chapter-steps button,.stamp-hint,.form-note,.paper-label,.paper-topline,.paper-note,.passport-person p,.passport-footnote>span:first-child,.passport-footnote p,.site-footer>div,.passport-toolbar .demo-label,.passport-toolbar .text-link,.section-description .demo-label {
  font-size: 11px;
}

.passport-toolbar .demo-label {
  letter-spacing: .5px;
}

.passport-person {
  gap: 16px;
}

.passport-person .paper-label {
  letter-spacing: .4px;
}

.passport-person p {
  margin-bottom: 13px;
}

.paper-topline {
  letter-spacing: .5px;
}

.stamp-dialog .demo-label,.stamp-dialog .eyebrow {
  font-size: 11px;
  letter-spacing: .7px;
}

.waitlist-form label {
  font-size: 12px;
}

.form-note {
  line-height: 1.7;
}

.hero-copy .eyebrow {
  font-size: 11px;
  letter-spacing: 1px;
}

.section-heading .eyebrow,.waitlist-section .eyebrow {
  font-size: 11px;
}

.icon-button,.journey-controls .icon-button,.book-pagination .icon-button,.dialog-close {
  min-width: 44px;
  min-height: 44px;
}

.page-dots {
  gap: 3px;
}

.page-dots button {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-pagination {
  gap: 15px;
}

.dialog-close {
  top: 5px;
  right: 5px;
}

.stamp-dialog .eyebrow {
  padding-top: 10px;
}

.arrival-copy .eyebrow {
  font-size: 10px;
  letter-spacing: .3px;
}

.arrival-card a {
  font-size: 11px;
}

.arrival-card {
  max-width: 365px;
}

@media(max-width:760px) {
  .route-row {
    flex-wrap: wrap;
    gap: 12px;
  }
  .route-location {
    min-width: 100px;
  }
  .destination {
    text-align: right;
  }
  .route-track {
    min-width: 50px;
  }
  .journey-controls {
    width: 100%;
    justify-content: flex-end;
    border: 0;
    padding: 0;
    gap: 8px;
    margin-top: 0;
  }
  .journey-timeline {
    margin-top: 5px;
  }
  .manifest-heading {
    gap: 12px;
    align-items: flex-start;
  }
  .manifest-heading .demo-label {
    text-align: right;
    max-width: 125px;
  }
  .chapter-steps {
    gap: 10px;
  }
  .chapter-steps button {
    text-align: left;
    font-size: 11px;
    line-height: 1.5;
  }
  .chapter-steps button:last-child {
    text-align: right;
  }
  .chapter-steps button:nth-child(2) {
    text-align: center;
  }
  .form-row input {
    font-size: 16px;
    padding: 12px 9px;
  }
  .form-row button {
    font-size: 11px;
    padding-inline: 12px;
  }
  .form-row button span {
    margin-left: 5px;
  }
  .passport-toolbar .demo-label {
    max-width: 150px;
    line-height: 1.5;
  }
  .passport-toolbar .text-link {
    font-size: 11px;
    gap: 8px;
  }
  .passport-footnote>span:first-child {
    font-size: 11px;
  }
  .passport-footnote p {
    font-size: 11px;
  }
  .section-description .demo-label {
    font-size: 11px;
    line-height: 1.7;
    display: block;
  }
  .arrival-card {
    right: 15px;
    max-width: calc(100% - 30px);
  }
  .arrival-card strong {
    font-size: 24px;
  }
  .arrival-copy .eyebrow {
    font-size: 10px;
  }
  .arrival-card a {
    font-size: 11px;
  }
  .arrival-stamp-paper {
    width: 63px;
  }
  .arrival-stamp-paper img {
    height: auto;
  }
}

/* Text-based actions also keep a comfortable keyboard and touch target. */
.header-cta,
.text-link,
.chapter-steps button,
.site-header nav a {
  min-height: 44px;
}
.site-header nav a {
  display: flex;
  align-items: center;
}

/* The cover is an actual button, and the full control area accepts touch. */
.passport-cover {
  border: 0;
  flex-shrink: 0;
}
.passport-cover:disabled {
  opacity: 1;
}
#start-journey,
.form-row input,
.form-row button,
.journey-timeline input {
  min-height: 44px;
}

/* Keep the editorial headline and pagination comfortable on the smallest phones. */
@media (max-width: 360px) {
  .hero h1 {
    font-size: 44px;
    letter-spacing: -2px;
  }
  .book-pagination {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
  }
  #previous-spread {
    grid-area: 1 / 1;
  }
  #next-spread {
    grid-area: 1 / 3;
  }
  .page-dots {
    grid-area: 2 / 1 / 3 / 4;
    justify-content: center;
  }
  .form-row {
    flex-direction: column;
  }
}

/* Vertical, identity-first passport viewer. Each spread is a top/bottom pair. */
body.passport-is-open {
  overflow: hidden;
}
.passport-viewer {
  width: min(540px, calc(100% - 24px));
  max-height: calc(100dvh - 20px);
  padding: 18px 28px 16px;
  border: 1px solid #ffffff1c;
  border-radius: 10px;
  background: #070712;
  color: var(--ivory);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.passport-viewer::backdrop {
  background: #04040bec;
  backdrop-filter: blur(9px);
}
.viewer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 17px;
}
.viewer-toolbar h2 {
  font: 18px/1.2 Georgia, serif;
  letter-spacing: 0;
  margin: 0 0 5px;
}
.viewer-toolbar p {
  font-size: 11px;
  color: #a9a0b6;
  margin: 0;
}
.vertical-passport {
  --book-width: min(430px, max(280px, calc((100dvh - 210px) * .72)), 100%);
  position: relative;
  display: grid;
  grid-template-rows: 1fr 1fr;
  width: var(--book-width);
  aspect-ratio: .72;
  margin: 0 auto;
  border-radius: 6px;
  background: #e9e5dc;
  box-shadow: 0 20px 55px #0009, 3px 3px 0 #a6a198, 5px 5px 0 #302a3e;
  perspective: 1400px;
  isolation: isolate;
  touch-action: pan-x pinch-zoom;
}
.vertical-passport:before {
  content: '';
  position: absolute;
  inset: 25px 18px;
  background: url('/assets/cinematic/pitch.png') center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  opacity: .07;
  z-index: 2;
  pointer-events: none;
}
.passport-leaf {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: #393040;
  padding: 15px 20px 19px;
  background-color: #eae5dc;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.passport-leaf-top {
  border-radius: 6px 6px 0 0;
  background-image: url('/assets/cinematic/passport-top.png');
}
.passport-leaf-bottom {
  border-radius: 0 0 6px 6px;
  background-image: url('/assets/cinematic/passport-bottom.png');
}
.country-heading {
  font: 600 12px/1.3 Arial, sans-serif;
  letter-spacing: 1px;
  margin: 0 0 8px;
  text-align: center;
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}
.country-flag {
  display: inline-block;
  width: 18px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -1px;
  border: 1px solid #6c6470aa;
  border-radius: 1px;
  box-shadow: 0 1px 1px #0002;
}
.country-flag-br { background: linear-gradient(33deg, transparent 42%, #f5d04b 43% 57%, transparent 58%), linear-gradient(135deg, #168b4a 0 50%, #168b4a 50%); }
.country-flag-ar { background: linear-gradient(#6bb6e8 0 33%, #fff 33% 66%, #6bb6e8 66%); }
.country-flag-de { background: linear-gradient(#171717 0 33%, #c72d3d 33% 66%, #e6bd43 66%); }
.country-flag-es { background: linear-gradient(#c82e3e 0 25%, #f4c84d 25% 75%, #c82e3e 75%); }
.country-flag-hu { background: linear-gradient(#c73b46 0 33%, #fff 33% 66%, #3a9c62 66%); }
.country-flag-us { background: repeating-linear-gradient(#c73b46 0 1px, #fff 1px 2px); position: relative; }
.country-flag-us:before { content: ''; position: absolute; inset: 0 50% 50% 0; background: #34558f; }
.leaf-content {
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 3;
}
.leaf-page-number {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  color: #817789;
  font: 10px/1.2 Georgia, serif;
}
.horizontal-spine {
  position: absolute;
  inset: calc(50% - 8px) 0 auto;
  height: 16px;
  background: linear-gradient(transparent, #7a667c1f 42%, #7c687a6b 49%, #fbf8e7c9 51%, #70647413 59%, transparent);
  pointer-events: none;
  z-index: 5;
}
.identity-leaf .country-heading {
  font-size: 10px;
  letter-spacing: 1.7px;
  margin-bottom: 14px;
}
.identity-layout {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
}
.identity-portrait {
  width: 28%;
  max-width: 110px;
  aspect-ratio: .8;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid #71637822;
  filter: sepia(.06);
}
.identity-details {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 11px;
  margin: 0;
}
.identity-details .identity-name {
  grid-column: 1 / -1;
}
.identity-details dt {
  font-size: 11px;
  line-height: 1.25;
  color: #6e6475;
  margin-bottom: 3px;
}
.identity-details dd {
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  margin: 0;
}
.identity-details .identity-name dd {
  font-size: 15px;
  letter-spacing: .7px;
}
.country-stamps {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(0, 1fr);
  align-items: stretch;
  justify-items: center;
  gap: 8px 16px;
  padding: 3px 4px;
}
.country-stamps.count-1 {
  grid-template-columns: 1fr;
}
.country-stamps .stamp-button,
.country-stamps .stamp-static {
  position: relative;
  height: 100%;
  min-height: 0;
  width: 100%;
  max-width: 150px;
  border: 0;
  padding: 5px;
  background: transparent;
  border-radius: 4px;
}
.country-stamps .stamp-static {
  cursor: default;
}
.country-stamps .stamp-button {
  min-height: 44px;
  min-width: 44px;
}
.country-stamps .stamp-button:focus-visible {
  outline: 2px solid #735685;
  outline-offset: 4px;
  border-radius: 8px;
}
.country-stamps .stamp-button:focus:not(:focus-visible) {
  outline: none;
}
.country-stamps .stamp-button:hover {
  transform: none !important;
  background: #ffffff33;
}
.photo-badge {
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 6px;
  min-height: 23px;
  background: #3c2d4f;
  color: #fffaf2;
  border-radius: 12px;
  box-shadow: 0 2px 5px #0002;
  font: 11px/1 Arial, sans-serif;
}
.photo-badge .ui-icon {
  width: 13px;
  height: 13px;
  stroke-width: 1.7;
}
.viewer-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.viewer-page-label,
.viewer-hint {
  font-size: 11px;
  text-align: center;
  color: #b5aebf;
  margin: 9px 0 0;
  line-height: 1.5;
}
.viewer-hint {
  color: #9790a4;
  margin-top: 3px;
}
.turning-sheet {
  display: none;
  position: absolute;
  z-index: 6;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #eae5dc;
  background-size: 100% 100%;
  pointer-events: none;
  backface-visibility: visible;
}
.turning-sheet:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(#46314c44, transparent 55%);
  opacity: 0;
}
.turn-forward .turning-sheet {
  display: block;
  top: 50%;
  background-image: url('/assets/cinematic/passport-bottom.png');
  transform-origin: center top;
  animation: fold-forward 450ms cubic-bezier(.45, .05, .35, 1) both;
}
.turn-backward .turning-sheet {
  display: block;
  top: 0;
  background-image: url('/assets/cinematic/passport-top.png');
  transform-origin: center bottom;
  animation: fold-backward 450ms cubic-bezier(.45, .05, .35, 1) both;
}
.turn-forward .turning-sheet:after,
.turn-backward .turning-sheet:after {
  animation: fold-shadow 450ms ease-in-out both;
}
.book-opening {
  animation: open-vertical-book 400ms ease-out both;
}
@keyframes fold-forward {
  from { transform: rotateX(0); }
  to { transform: rotateX(180deg); }
}
@keyframes fold-backward {
  from { transform: rotateX(0); }
  to { transform: rotateX(-180deg); }
}
@keyframes fold-shadow {
  0%, 100% { opacity: 0; }
  45% { opacity: 1; }
}
@keyframes open-vertical-book {
  from { opacity: .4; transform: perspective(1400px) rotateX(-9deg) translateY(12px); }
  to { opacity: 1; transform: perspective(1400px) rotateX(0) translateY(0); }
}
.memory-dialog {
  width: min(780px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  border: 1px solid #ffffff26;
  border-radius: 8px;
  background: #10101b;
  color: var(--ivory);
  overflow: auto;
  overscroll-behavior: contain;
}
.memory-dialog::backdrop {
  background: #04040bef;
  backdrop-filter: blur(7px);
}
.memory-dialog .dialog-close {
  position: sticky;
  z-index: 2;
  top: 10px;
  float: right;
  margin: 10px 10px -54px 0;
  background: #080811e8;
  color: #fff;
  border-color: #ffffff55;
}
#memory-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62dvh;
  object-fit: contain;
  background: #070712;
}
.memory-caption {
  padding: 24px 28px 28px;
}
.memory-caption .demo-label {
  color: var(--lavender);
}
.memory-caption h3 {
  font: 31px/1.2 Georgia, serif;
  margin: 13px 0 7px;
}
.memory-caption p {
  font-size: 13px;
  line-height: 1.65;
  color: #b9b1c4;
  margin: 8px 0;
}
.memory-caption .memory-location {
  color: #f0e8f7;
}
.memory-caption .memory-disclaimer {
  font-size: 11px;
  color: #968b9f;
  margin-top: 18px;
}
@media(max-width: 600px) {
  .passport-viewer {
    width: calc(100% - 16px);
    padding: 14px 12px 13px;
    max-height: calc(100dvh - 16px);
  }
  .viewer-toolbar {
    margin-bottom: 14px;
  }
  .viewer-toolbar h2 {
    font-size: 17px;
  }
  .vertical-passport {
    --book-width: min(max(280px, calc((100dvh - 215px) * .72)), 100%);
  }
  .passport-leaf {
    padding: 13px 14px 18px;
  }
  .identity-layout {
    gap: 12px;
  }
  .identity-details {
    gap: 8px;
  }
  .identity-details dt {
    font-size: 11px;
  }
  .identity-details dd {
    font-size: 11px;
  }
  .identity-details .identity-name dd {
    font-size: 13px;
  }
  .identity-leaf .country-heading {
    margin-bottom: 9px;
    font-size: 10px;
  }
  .country-heading {
    font-size: 11px;
    margin-bottom: 6px;
  }
  .country-stamps {
    gap: 5px 12px;
    padding: 2px;
  }
  .viewer-navigation {
    gap: 8px;
    margin-top: 15px;
  }
  .viewer-navigation .page-dots {
    gap: 0;
  }
  .memory-caption {
    padding: 20px;
  }
  .memory-caption h3 {
    font-size: 26px;
  }
}
@media(prefers-reduced-motion: reduce) {
  .turning-sheet {
    display: none !important;
  }
}

/* Match the native portrait book and identity field bands. */
.vertical-passport {
  --book-width: min(400px, max(280px, calc((100dvh - 210px) * .62)), 100%);
  aspect-ratio: .62;
}
.vertical-passport:before {
  opacity: .21;
}
.identity-layout {
  gap: 20px;
}
.identity-portrait {
  width: 31%;
  max-width: 112px;
}
.identity-details {
  grid-template-columns: 1fr;
  gap: 6px;
}
.identity-details .identity-name {
  grid-column: auto;
}
.identity-details dt {
  font-size: 11px;
  line-height: 1.1;
  margin-bottom: 2px;
}
.identity-details dd,
.identity-details .identity-name dd {
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: .2px;
  background: #6b877534;
  border-radius: 2px;
  padding: 3px 6px;
}
.country-stamps .stamp-static,
.country-stamps .stamp-button {
  max-width: clamp(64px, 20vw, 82px);
  width: min(100%, clamp(64px, 20vw, 82px));
  height: auto;
  max-height: none;
  aspect-ratio: 306 / 375;
  align-self: center;
}
@media(max-width: 600px) {
  .vertical-passport {
    --book-width: min(max(280px, calc((100dvh - 215px) * .62)), 100%);
  }
  .identity-layout {
    gap: 14px;
  }
  .identity-leaf {
    padding-top: 10px;
  }
  .identity-leaf .country-heading {
    margin-bottom: 6px;
  }
  .identity-details {
    gap: 4px;
  }
  .identity-details dt {
    line-height: 1.05;
  }
  .identity-details dd,
  .identity-details .identity-name dd {
    font-size: 12px;
    padding: 2px 5px;
  }
}

/* The source artwork is half a pitch: mirror it across the horizontal spine. */
.vertical-passport:before,
.vertical-passport:after {
  content: '';
  position: absolute;
  background: url('/assets/cinematic/pitch.png') center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  opacity: .21;
  z-index: 2;
  pointer-events: none;
}
.vertical-passport:before {
  inset: 25px 18px 50%;
}
.vertical-passport:after {
  inset: 50% 18px 25px;
  transform: rotate(180deg);
}

/* One coherent document face across the inner passport pages. */
.passport-leaf {
  font-family: "Avenir Next","Helvetica Neue",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.country-heading {
  font-family: "Avenir Next","Helvetica Neue",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 1.55px;
  color: #3d3544;
}
.identity-leaf .country-heading {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.9px;
}
.identity-details dt {
  font-family: "Avenir Next Condensed","Avenir Next","Helvetica Neue",Arial,sans-serif;
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #716778;
}
.identity-details dd,
.identity-details .identity-name dd {
  font-family: "Avenir Next","Helvetica Neue",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .45px;
  color: #2d2732;
}
.identity-details .identity-name dd {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .8px;
}
.leaf-page-number {
  font-family: "Avenir Next Condensed","Avenir Next","Helvetica Neue",Arial,sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #756b7b;
}
.photo-badge {
  font-family: "Avenir Next","Helvetica Neue",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  font-weight: 600;
}
@media(max-width:600px) {
  .identity-details dt {
    font-size: 7px;
    letter-spacing: .65px;
  }
  .identity-details dd,
  .identity-details .identity-name dd {
    font-size: 11px;
  }
  .identity-details .identity-name dd {
    font-size: 12px;
  }
}

/* Language switcher */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.language-picker select {
  appearance: none;
  border: 1px solid #ffffff3d;
  border-radius: 4px;
  background: transparent;
  color: var(--ivory);
  padding: 12px 28px 12px 11px;
  font-size: 12px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 17px, calc(100% - 10px) 17px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.language-picker option { color: var(--ink); background: var(--ivory); }
.language-picker select:hover { background-color: #ffffff0d; }
@media (max-width: 760px) {
  .site-header { height: 82px; }
  .site-header nav { display: none; }
  .header-actions { gap: 8px; }
  .header-cta { padding-inline: 8px; }
  .language-picker select { padding-inline: 8px 24px; }
}

/* Memories first: the geography is a later chapter, never the introduction. */
html { scroll-padding-top: 112px; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #070712f5;
  backdrop-filter: blur(16px);
}
.primary-cta,.header-cta.primary-cta,.waitlist-form button {
  color: var(--ink);
  background: var(--lavender);
  border: 1px solid var(--lavender);
  border-radius: 5px;
  min-height: 46px;
  font-weight: 650;
  transition: background .2s, border-color .2s;
}
.primary-cta:hover,.header-cta.primary-cta:hover,.waitlist-form button:hover {
  background: #c8bcfa;
  border-color: #c8bcfa;
  color: var(--ink);
}
.header-cta.primary-cta { font-size: 12px; padding-inline: 17px; }
.memories-hero { gap: 38px; padding-block: 76px 48px; align-items: center; }
.memories-hero .hero-copy { pointer-events: auto; }
.memories-hero .hero-description { max-width: 410px; }
.memories-hero .hero-actions .button { font-size: 14px; padding: 17px 23px; }
.signup-helper { color: #c2bdcf; font-size: 12px; line-height: 1.6; margin: 13px 0 0; }
.memories-hero .platform-note { margin-top: 9px; }
.memory-composition { position: relative; min-width: 0; width: 100%; height: 590px; isolation: isolate; }
.memory-composition:before { content: ''; position: absolute; inset: 0 -3%; background: radial-gradient(ellipse,#72629625,transparent 68%); z-index: -1; }
.memory-polaroid { position: absolute; width: 55%; max-width: 300px; margin: 0; background: #f0eadf; padding: 11px 11px 16px; color: #332c35; box-shadow: 0 16px 45px #0007; transform: rotate(var(--tilt)); }
.memory-polaroid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.memory-polaroid figcaption { font: italic 16px/1.25 Georgia,serif; padding: 14px 3px 0; min-height: 35px; }
.memory-polaroid-heritage { --tilt: -9deg; top: 30px; left: 2%; z-index: 1; }
.memory-polaroid-celebration { --tilt: 9deg; top: 130px; right: 0; z-index: 2; }
.memory-polaroid-story { --tilt: -5deg; top: 300px; left: 8%; z-index: 3; width: 43%; }
.memory-note { position: absolute; z-index: 4; right: 0; bottom: 28px; width: 51%; padding: 22px 20px; background: #d2c3e3; color: #302536; transform: rotate(4deg); box-shadow: 0 12px 25px #0005; }
.memory-note:before { content: ''; position: absolute; width: 65px; height: 21px; left: 35%; top: -10px; transform: rotate(-9deg); background: #e8dfc9a8; }
.memory-note>span { font: 8px/1.5 ui-monospace,monospace; letter-spacing: 1.2px; }
.memory-note p { font: italic 22px/1.35 Georgia,serif; margin: 12px 0 0; }
.memory-composition-caption { position: absolute; inset: auto 0 -20px; text-align: right; color: var(--muted); font: 9px/1.6 ui-monospace,monospace; letter-spacing: .6px; }
@media(prefers-reduced-motion:no-preference) {
  .has-landing-enhancement .memory-polaroid-celebration { animation: memory-land 1.1s .35s both; }
  .has-landing-enhancement .memory-polaroid-story { animation: memory-land 1.1s 1s both; }
  .has-landing-enhancement .memory-note { animation: memory-note-land .8s 1.9s both; }
  @keyframes memory-land { from { opacity: 0; translate: 0 18px; rotate: -3deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
  @keyframes memory-note-land { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
}
.journey-section { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 25px; padding-block: 80px 36px; }
.journey-copy h2 { font-size: clamp(36px,4.5vw,64px); }
.journey-copy>p:last-child { max-width: 390px; font-size: 14px; line-height: 1.85; color: var(--muted); margin-top: 26px; }
.journey-section .globe-stage { width: auto; margin: 0; min-height: 480px; }
.journey-section .route-manifest { margin-top: 10px; }
.mobile-signup { display: none; }
@media(max-width:1100px) and (min-width:761px) {
  .memories-hero { gap: 20px; grid-template-columns: 1fr 1fr; }
  .memories-hero h1 { font-size: clamp(48px,6.4vw,70px); letter-spacing: -3px; }
  .memory-composition { height: 500px; }
  .memory-polaroid figcaption { font-size: 13px; }
  .memory-polaroid-story { top: 260px; }
  .memory-note { bottom: 22px; padding: 16px 12px; }
  .memory-note p { font-size: 19px; }
}
@media(max-width:760px) {
  html { scroll-padding-top: 24px; }
  .site-header { position: relative; backdrop-filter: none; }
  .header-cta.primary-cta { font-size: 11px; padding-inline: 10px; }
  .memories-hero { grid-template-columns: 1fr; gap: 30px; padding-block: 38px 40px; }
  .memories-hero h1 { font-size: clamp(46px,9.8vw,74px); letter-spacing: -2.7px; }
  .memories-hero .hero-description { max-width: 480px; font-size: 14px; margin-top: 24px; }
  .memory-composition { height: clamp(390px,94vw,590px); max-width: 560px; margin-inline: auto; }
  .memory-polaroid { width: 52%; padding: 8px 8px 12px; }
  .memory-polaroid figcaption { font-size: clamp(12px,3vw,16px); padding-top: 10px; min-height: 28px; }
  .memory-polaroid-heritage { left: 4%; top: 15px; }
  .memory-polaroid-celebration { right: 2%; top: 95px; }
  .memory-polaroid-story { left: 7%; top: 48%; width: 43%; }
  .memory-note { right: 1%; bottom: 10%; padding: 16px 13px; width: 47%; }
  .memory-note p { font-size: clamp(16px,4vw,22px); }
  .memory-note>span { font-size: 7px; }
  .memory-composition-caption { bottom: -8px; font-size: 8px; }
  .journey-section { grid-template-columns: 1fr; gap: 12px; padding-block: 55px 20px; }
  .journey-copy h2 { font-size: clamp(36px,7vw,54px); }
  .journey-copy>p:last-child { max-width: 490px; }
  .journey-section .globe-stage { min-height: 350px; height: 80vw; max-height: 510px; }
  .mobile-signup { position: fixed; z-index: 15; bottom: 0; left: 0; right: 0; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); background: #070712f5; border-top: 1px solid var(--line); }
  .mobile-signup:not([hidden]) { display: block; }
  .mobile-signup .button { width: 100%; justify-content: center; min-height: 48px; }
  body.has-mobile-signup { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .waitlist-form .form-row { display: flex; flex-direction: column; gap: 12px; }
  .waitlist-form input,.waitlist-form button { width: 100%; min-height: 54px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .memory-polaroid,.memory-note { animation: none; }
}
/* Keep a recognisable slice of the memory stack in the first phone screen. */
@media(max-width:600px) {
  .site-header { height: 72px; }
  .site-header .brand { font-size: 25px; gap: 7px; }
  .site-header .brand img { width: 28px; height: 28px; }
  .header-actions { gap: 6px; }
  .header-cta.primary-cta { font-size: 10px; gap: 5px; padding-inline: 8px; }
  .language-picker select { font-size: 11px; padding-left: 7px; }
  .memories-hero { padding-top: 26px; gap: 18px; }
  .memories-hero .hero-copy .eyebrow { margin-bottom: 18px; }
  .memories-hero h1 { font-size: clamp(40px,10.2vw,59px); line-height: 1; letter-spacing: -2px; }
  .memories-hero .hero-description { font-size: 13px; line-height: 1.65; margin-block: 19px 20px; }
  .memories-hero .hero-actions .button { padding-block: 15px; }
  .memories-hero .platform-note { letter-spacing: 0; }
}

/* Make the handoff to Kit clear before the visitor submits their email. */
.waitlist-transition { margin: 10px 0 0; text-align: center; color: #c2bbcd; font-size: 11px; line-height: 1.5; }