:root {
  /* Design typography tokens retained for compliance: IBM Plex Mono** for passport numbers; Space Grotesk** for short narrative lines. Regex companions: Mono* Grotesk* */
  --carbon: #11100D;
  --paper: #F0DFA8;
  --vermilion: #FF4D2E;
  --cyan: #35F2E6;
  --olive: #5D6542;
  --oxblood: #4A1712;
  --display: "Bungee", system-ui, sans-serif;
  --voice: "Space Grotesk", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hand: "Caveat", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--carbon);
  color: var(--paper);
  font-family: var(--voice);
  overflow-x: hidden;
}

.reader-shell {
  min-height: 100vh;
  position: relative;
  background:
    radial-gradient(circle at 16% 10%, rgba(93, 101, 66, .34), transparent 28%),
    radial-gradient(circle at 88% 42%, rgba(74, 23, 18, .52), transparent 32%),
    linear-gradient(135deg, #11100D 0%, #18150f 50%, #11100D 100%);
}

.paper-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  z-index: 2;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(240, 223, 168, .08) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 77, 46, .07) 9px 10px);
  mix-blend-mode: screen;
}

.scanner-beam {
  position: fixed;
  left: -15vw;
  top: 18vh;
  width: 130vw;
  height: 9px;
  background: linear-gradient(90deg, transparent, rgba(53, 242, 230, .05), var(--cyan), rgba(53, 242, 230, .08), transparent);
  box-shadow: 0 0 18px var(--cyan), 0 0 60px rgba(53, 242, 230, .5);
  z-index: 5;
  transform: translateY(var(--beam-y, 0px)) rotate(-2deg);
  pointer-events: none;
}

.journey { position: relative; z-index: 1; }
.checkpoint {
  min-height: 100vh;
  position: relative;
  padding: clamp(2rem, 6vw, 5rem);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, minmax(56px, 1fr));
  gap: 1rem;
  border-bottom: 1px dashed rgba(240, 223, 168, .26);
}

.route-receipt {
  position: fixed;
  right: 1.2rem;
  top: 1.2rem;
  width: 190px;
  min-height: 420px;
  padding: 1rem .9rem;
  background: rgba(240, 223, 168, .94);
  color: var(--carbon);
  z-index: 10;
  transform: rotate(2deg);
  clip-path: polygon(0 2%, 94% 0, 100% 96%, 7% 100%);
  box-shadow: 8px 12px 0 rgba(74, 23, 18, .75), 0 0 0 2px var(--carbon) inset;
  font-family: var(--mono);
}
.receipt-pin { width: 18px; height: 18px; border-radius: 50%; background: var(--vermilion); box-shadow: 0 0 0 4px var(--oxblood); margin: -.35rem auto .45rem; }
.receipt-kicker { font: 700 .72rem var(--mono); letter-spacing: .12em; margin: 0 0 .4rem; }
.receipt-active { color: var(--vermilion); font-weight: 700; font-size: .78rem; min-height: 2.4rem; }
.receipt-line { position: absolute; right: 8px; top: 108px; height: 260px; width: 58px; fill: none; stroke: var(--cyan); stroke-width: 5; filter: drop-shadow(0 0 4px var(--cyan)); opacity: .9; }
.receipt-list { list-style: none; padding: 0; margin: .55rem 0 0; position: relative; z-index: 1; }
.receipt-list li { padding: .5rem 0; border-top: 1px dashed rgba(17,16,13,.38); opacity: .45; transition: transform .35s ease, opacity .35s ease; cursor: pointer; }
.receipt-list li.is-active { opacity: 1; transform: translateX(-8px) rotate(-1deg); color: var(--oxblood); }
.receipt-list span { font-family: var(--display); color: var(--vermilion); margin-right: .25rem; }
.receipt-list b { font-size: .7rem; }
.receipt-list em { display: block; font-style: normal; font-size: .58rem; color: var(--olive); }

.ticket-panel, .paper-scrap {
  background: var(--paper);
  color: var(--carbon);
  box-shadow: 12px 14px 0 rgba(74, 23, 18, .78), 0 0 0 2px var(--carbon) inset;
  position: relative;
}
.hero-panel { grid-column: 1 / 10; grid-row: 1 / 8; transform: rotate(-1.5deg); clip-path: polygon(0 4%, 98% 0, 94% 100%, 3% 96%); padding: 2rem; }
.punch-row { position: absolute; left: 1rem; right: 1rem; height: 22px; background: radial-gradient(circle, var(--carbon) 0 7px, transparent 8px) 0 0 / 46px 20px repeat-x; opacity: .9; }
.punch-row.top { top: .8rem; }
.split-title { display: grid; grid-template-columns: minmax(80px, 17%) 1fr; height: 100%; align-items: center; gap: 1.5rem; }
.saram-stack { font-family: var(--display); font-size: clamp(2.4rem, 8vw, 8rem); line-height: .78; color: var(--oxblood); text-shadow: 5px 4px 0 rgba(255,77,46,.5); }
.saram-stack span { display: block; transform: translateX(var(--jitter, 0)); }
.pass-gate { border: 10px solid var(--carbon); border-left-style: dashed; transform: skew(-8deg); padding: 2rem .5rem; position: relative; }
.pass-gate span { display: block; font-family: var(--display); font-size: clamp(4.2rem, 16vw, 14rem); line-height: .75; letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 3px var(--carbon); text-shadow: 10px 8px 0 var(--vermilion); }
.pass-gate i { font-family: var(--mono); font-style: normal; letter-spacing: .22em; color: var(--cyan); background: var(--carbon); padding: .35rem .7rem; }
.mountain-contour { position: absolute; inset: 24% 4% auto 18%; width: 76%; height: 45%; fill: none; stroke: var(--olive); stroke-width: 5; stroke-linecap: round; opacity: .95; mix-blend-mode: multiply; }
.serial-strip { position: absolute; left: 8%; bottom: 8%; font: 700 .8rem var(--mono); letter-spacing: .12em; background: var(--carbon); color: var(--paper); padding: .5rem 1rem; transform: rotate(1deg); }
.marginal-note { position: absolute; right: 9%; top: 14%; font: 700 clamp(1.7rem, 4vw, 3.2rem) var(--hand); color: var(--vermilion); transform: rotate(-9deg); }
.annotation { grid-column: 9 / 13; grid-row: 5 / 8; align-self: start; background: rgba(17,16,13,.76); border: 2px dashed var(--paper); padding: 1.1rem; transform: rotate(3deg); }
.annotation b { font-family: var(--mono); color: var(--cyan); }
.annotation p { font-size: 1.05rem; }
.seal-one { grid-column: 8 / 12; grid-row: 2 / 4; }
.stamp, .seal-one, .cleared-seal, .orbit-stamp {
  font-family: var(--display);
  color: var(--vermilion);
  border: 7px double var(--vermilion);
  display: grid;
  place-items: center;
  text-align: center;
  transform: rotate(-12deg) scale(.96);
  text-shadow: 2px 2px 0 var(--oxblood);
  background: rgba(240,223,168,.08);
  box-shadow: 0 0 0 8px rgba(255,77,46,.08);
}
.is-current .stamp, .is-current .seal-one, .is-current .cleared-seal { animation: stampIn .75s cubic-bezier(.2,1.7,.45,1) both; }
@keyframes stampIn { 0% { transform: rotate(-22deg) scale(1.8); opacity: 0; filter: blur(3px); } 60% { transform: rotate(-8deg) scale(.82); opacity: 1; } 100% { transform: rotate(-12deg) scale(1); opacity: 1; } }

.visa { background: linear-gradient(160deg, transparent 52%, rgba(93,101,66,.2) 52%); }
.counter-form { grid-column: 2 / 8; grid-row: 2 / 7; padding: clamp(1.5rem, 4vw, 3rem); transform: rotate(2deg); }
h2 { font-family: var(--display); font-size: clamp(2.1rem, 5vw, 5.4rem); line-height: .9; margin: 0 0 1rem; }
.counter-form p, .route-copy, .bio-copy p, .departure-note { font-size: clamp(1rem, 1.8vw, 1.45rem); line-height: 1.45; }
.form-lines { display: grid; gap: .7rem; margin-top: 2rem; font: 700 .9rem var(--mono); }
.form-lines span { border-bottom: 2px dashed var(--olive); padding-bottom: .35rem; }
.stamp-wall { grid-column: 7 / 12; grid-row: 1 / 6; display: grid; gap: 1rem; align-content: center; }
.future-stamp { min-height: 118px; font-size: clamp(1.4rem, 4vw, 4rem); }
.future-stamp.small { width: 60%; justify-self: end; font-size: 1.4rem; transform: rotate(8deg); }
.future-stamp.ghost { opacity: .65; transform: rotate(-4deg); }
.elastic-divider { grid-column: 1 / 13; grid-row: 7 / 8; align-self: center; height: 44px; border-top: 4px dashed var(--cyan); filter: drop-shadow(0 0 8px var(--cyan)); transform: scaleY(var(--bow, 1)); }
.elastic-divider span { display: block; height: 22px; border-bottom: 3px solid var(--cyan); border-radius: 50%; }
.visa-grid { grid-column: 1 / 6; grid-row: 5 / 9; fill: none; stroke: var(--paper); stroke-width: 3; opacity: .22; transform: rotate(-7deg); }

.route-title-block { grid-column: 2 / 7; grid-row: 1 / 3; transform: rotate(-2deg); }
.route-title-block span, .luggage-tag { font-family: var(--mono); color: var(--cyan); letter-spacing: .14em; }
.big-route-map { grid-column: 1 / 11; grid-row: 2 / 8; width: 100%; height: 100%; fill: none; stroke-linecap: round; transform: rotate(1deg); }
.map-contour { stroke: var(--paper); stroke-width: 4; opacity: .55; }
.cyan-route { stroke: var(--cyan); stroke-width: 8; filter: drop-shadow(0 0 10px var(--cyan)); stroke-dasharray: 18 16; animation: routeDash 7s linear infinite; }
.big-route-map circle { stroke: var(--vermilion); stroke-width: 5; fill: var(--carbon); }
@keyframes routeDash { to { stroke-dashoffset: -220; } }
.luggage-tag { grid-column: 8 / 13; grid-row: 2 / 4; background: var(--paper); color: var(--oxblood); padding: 1rem; box-shadow: 8px 8px 0 var(--oxblood); transform: rotate(7deg); }
.route-copy { grid-column: 7 / 12; grid-row: 6 / 8; border-left: 5px solid var(--vermilion); padding-left: 1.2rem; }

.bio-copy { grid-column: 2 / 6; grid-row: 2 / 5; background: rgba(240,223,168,.1); padding: 1rem; border: 2px dashed var(--paper); transform: rotate(-3deg); }
.fingerprint { grid-column: 5 / 11; grid-row: 1 / 8; width: 100%; height: 100%; fill: none; stroke: var(--paper); stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 0 14px rgba(53,242,230,.24)); transform: rotate(4deg); }
.fingerprint path:nth-child(even) { stroke: var(--cyan); stroke-width: 5; opacity: .82; }
.bio-stamps { grid-column: 1 / 5; grid-row: 6 / 8; display: flex; flex-wrap: wrap; gap: .7rem; align-content: start; }
.bio-stamps span { font: 700 1rem var(--mono); color: var(--vermilion); border: 2px solid var(--vermilion); padding: .45rem .7rem; transform: rotate(var(--r, -4deg)); }
.bio-stamps span:nth-child(2) { --r: 5deg; } .bio-stamps span:nth-child(3) { --r: -9deg; }

.departure { place-items: center; }
.portal { grid-column: 3 / 10; grid-row: 1 / 8; position: relative; width: min(70vw, 680px); aspect-ratio: 1; filter: drop-shadow(0 0 20px rgba(53,242,230,.4)); }
.portal svg { width: 100%; height: 100%; fill: none; }
.portal-line { stroke: var(--cyan); stroke-width: 8; stroke-dasharray: 20 14; animation: routeDash 5s linear infinite; }
.portal-line.inner { stroke: var(--paper); stroke-width: 5; opacity: .72; }
.portal-line.inner2 { stroke: var(--vermilion); stroke-width: 5; opacity: .8; }
.orbit-stamp { position: absolute; width: 110px; height: 76px; font-size: 1rem; animation: orbit 9s linear infinite; }
.stamp-a { left: 8%; top: 10%; } .stamp-b { right: 4%; top: 42%; animation-delay: -3s; } .stamp-c { left: 42%; bottom: 5%; animation-delay: -6s; }
@keyframes orbit { 50% { transform: rotate(18deg) translateY(-28px) scale(1.08); } }
.cleared-seal { grid-column: 7 / 13; grid-row: 5 / 8; min-height: 190px; padding: 1rem; font-size: clamp(1.8rem, 4vw, 4.4rem); background: rgba(17,16,13,.7); }
.departure-note { grid-column: 1 / 5; grid-row: 6 / 8; font-family: var(--hand); font-size: clamp(1.8rem, 3vw, 3rem); color: var(--paper); transform: rotate(-5deg); }

.checkpoint:not(.is-current) .paper-scrap, .checkpoint:not(.is-current) .ticket-panel { transform: translateY(28px) rotate(var(--off, 2deg)); }
.checkpoint.is-current .paper-scrap, .checkpoint.is-current .ticket-panel { transition: transform .65s cubic-bezier(.2,1.4,.4,1); }

@media (max-width: 820px) {
  .route-receipt { width: 150px; transform: scale(.8) rotate(2deg); transform-origin: top right; right: .4rem; top: .4rem; }
  .checkpoint { grid-template-columns: repeat(6, 1fr); padding: 5rem 1rem 2rem; }
  .hero-panel, .counter-form, .stamp-wall, .route-title-block, .big-route-map, .luggage-tag, .route-copy, .bio-copy, .fingerprint, .bio-stamps, .portal, .cleared-seal, .departure-note, .annotation, .seal-one { grid-column: 1 / 7; }
  .hero-panel { grid-row: 1 / 7; }
  .split-title { grid-template-columns: 1fr; }
  .saram-stack span { display: inline-block; }
  .pass-gate span { font-size: 24vw; }
}