/* The Scarlet Express keepsake at the end of scarlet-recap.html: the departure board and the ticket.
   Everything is scoped to #journey and prefixed jr- so it never touches the Recap's own styles.
   Type: Big Shoulders (variable weight, settles to bold on arrival), Big Shoulders Stencil (railway signage),
   Space Mono (boards, labels, tickets), Caveat (handwritten scrapbook notes), Newsreader italic (memories).
   Motion is deliberately calm: one arrival per stop, flips where cards flip, and nothing that moves without a reason. */
#journey{
  --jr-paper:#FFFFFF; --jr-ink:#171010; --jr-muted:#5F5757; --jr-line:#E8E3E3; --jr-soft:#F6F2F2;
  --jr-red:#CC0000; --jr-red-ink:#C00000; --jr-red-deep:#8E0000;
  --jr-board:#141010; --jr-flap:#2A2323; --jr-flap-2:#1E1919; --jr-flap-ink:#F6EFE3; --jr-ok:#1E7A3C; --jr-ok-bg:#E7F3EA;
  --jr-display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --jr-stencil:'Big Shoulders Stencil Display','Big Shoulders Display','Arial Narrow',sans-serif;
  --jr-mono:'Space Mono',ui-monospace,Consolas,monospace;
  --jr-hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --jr-serif:'Newsreader',Georgia,serif;
  --jr-ui:'Archivo',system-ui,sans-serif;
  --jr-top:calc(env(safe-area-inset-top,0px) + 53px);
  /* Every stop fits the screen left under the Recap bar and this rail: --jr-vis is that visible height,
     --jr-fit what a game may use once the stop's padding is taken off. */
  --jr-rail:52px;
  --jr-vis:calc(100vh - var(--jr-top) - var(--jr-rail));
  --jr-pad:clamp(24px,5vh,64px);
  --jr-fit:calc(var(--jr-vis) - 2 * var(--jr-pad) - 60px);
  position:relative;background:var(--jr-paper);color:var(--jr-ink);font-family:var(--jr-ui);
}
@supports (height:100svh){ #journey{--jr-vis:calc(100svh - var(--jr-top) - var(--jr-rail))} }
@media (max-width:760px){ #journey{--jr-rail:46px} }
#journey *,#journey *::before,#journey *::after{box-sizing:border-box}
#journey [hidden]{display:none!important}
.jr-wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,4.5vw,48px)}
.jr-ph{color:var(--jr-red-deep);text-decoration:underline dotted 1px;text-underline-offset:3px}
.jr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:2px solid var(--jr-red);border-radius:2px;background:var(--jr-red);color:#FFFFFF;font:700 15px/1 var(--jr-ui);text-decoration:none;cursor:pointer;touch-action:manipulation;transition:background-color .15s,color .15s,border-color .15s}
.jr-btn:hover{background:var(--jr-red-deep);border-color:var(--jr-red-deep);color:#FFFFFF}
.jr-btn.jr-ghost{background:transparent;color:var(--jr-red-ink)}
.jr-btn.jr-ghost:hover{background:var(--jr-red);color:#FFFFFF}
.jr-btn.jr-small{min-height:44px;padding:0 16px;font-size:14px}
.jr-hand{font-family:var(--jr-hand);font-weight:700;color:var(--jr-red-ink);line-height:1}

/* ---------- 3D split-flap board ---------- */
.jr-flaps{display:inline-flex;gap:3px;padding:6px;background:var(--jr-board);border-radius:5px;box-shadow:inset 0 0 0 1px #000,0 12px 26px -14px rgba(0,0,0,.65)}
.jr-flap{--h:calc(var(--fs,17px) * 1.5);position:relative;width:calc(var(--fs,17px) * 1.05);height:var(--h);font:700 var(--fs,17px)/1 var(--jr-mono);color:var(--jr-flap-ink);border-radius:2px;perspective:calc(var(--h) * 4)}
.jr-flap > span{position:absolute;left:0;right:0;height:50%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.jr-flap > span > i{position:absolute;left:0;right:0;height:var(--h);display:grid;place-items:center;font-style:normal}
.jr-flap .u,.jr-flap .fu{top:0;border-radius:2px 2px 0 0;background:linear-gradient(var(--jr-flap),#251F1F)}
.jr-flap .d,.jr-flap .fd{bottom:0;border-radius:0 0 2px 2px;background:linear-gradient(#211B1B,var(--jr-flap-2))}
.jr-flap .d > i,.jr-flap .fd > i{top:-100%}
.jr-flap .fu{transform-origin:50% 100%;z-index:2}
.jr-flap .fd{transform-origin:50% 0;z-index:2;transform:rotateX(90deg)}
.jr-flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:rgba(0,0,0,.8);z-index:3}
.jr-flap.go .fu{animation:jr-fu .09s ease-in forwards}
.jr-flap.go .fd{animation:jr-fd .09s .085s ease-out forwards}
@keyframes jr-fu{from{transform:rotateX(0);filter:brightness(1)}to{transform:rotateX(-90deg);filter:brightness(.55)}}
@keyframes jr-fd{from{transform:rotateX(90deg);filter:brightness(1.4)}to{transform:rotateX(0);filter:brightness(1)}}
.jr-flaps.jr-big{--fs:clamp(15px,3.4vw,38px);gap:clamp(2px,.4vw,4px);padding:clamp(6px,1vw,10px)}

/* ---------- Intro: platform, board, and the line ahead ---------- */
.jr-intro{position:relative;overflow:clip;text-align:center;min-height:var(--jr-vis);display:flex;flex-direction:column;justify-content:center;padding-block:clamp(40px,7vh,96px) clamp(150px,20vh,230px);background:radial-gradient(ellipse 70% 60% at 50% 0%,#FFF1F1 0%,#FFFFFF 70%)}
.jr-intro .jr-wrap{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.8vh,30px)}
.jr-platform{margin:0;font:900 clamp(18px,2.2vw,24px)/1 var(--jr-stencil);letter-spacing:.14em;text-transform:uppercase;color:var(--jr-red-ink)}
.jr-intro h2{margin:0;font:900 clamp(48px,min(8.6vw,11vh),120px)/.9 var(--jr-display);text-wrap:balance}
.jr-intro h2 em{font-style:normal;color:var(--jr-red-ink)}
.jr-intro .jr-lede{margin:0;max-width:42ch;font:italic clamp(19px,2.1vw,23px)/1.55 var(--jr-serif);color:#3E3636}
.jr-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.jr-route{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 4px;margin:6px 0 0;padding:0;list-style:none;font:700 12px var(--jr-mono);text-transform:uppercase}
.jr-route li{display:flex;align-items:center;gap:4px}
.jr-route li+li::before{content:"";width:22px;height:2px;background:repeating-linear-gradient(90deg,var(--jr-red) 0 4px,transparent 4px 7px);margin-right:4px}
.jr-route a{color:var(--jr-ink);text-decoration:none;padding:8px 4px}
.jr-route a:hover{color:var(--jr-red-ink)}

/* ---------- Stops: roomier, larger reading text ---------- */
/* Each stop is one screen tall (the space under the rail), with its copy and its game side by side and centred,
   and it lands exactly under the rail when you travel to it. */
.jr-stop{position:relative;min-height:var(--jr-vis);display:flex;flex-direction:column;justify-content:center;padding-block:var(--jr-pad);border-top:1px solid var(--jr-line);overflow:clip;scroll-margin-top:calc(var(--jr-top) + var(--jr-rail))}
.jr-stop > .jr-wrap{width:100%}
.jr-stop.jr-alt{background:var(--jr-soft)}
.jr-num{position:absolute;right:-1vw;top:50%;margin-top:-.5em;font:900 clamp(200px,min(30vw,50vh),420px)/1 var(--jr-stencil);color:transparent;-webkit-text-stroke:2px rgba(204,0,0,.12);pointer-events:none;user-select:none;z-index:0}
.jr-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,104px);align-items:center}
.jr-copy{max-width:520px}
.jr-kicker{margin:0;font:700 12px/1.5 var(--jr-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--jr-red-ink)}
.jr-stop h3{margin:clamp(8px,1.4vh,14px) 0 0;font:900 clamp(42px,min(6.4vw,9vh),92px)/.92 var(--jr-display);text-wrap:balance}
.jr-stop h3::after{content:"";display:block;width:76px;height:8px;margin-top:clamp(12px,2.2vh,22px);background:var(--jr-red)}
.jr-stop .jr-lede{margin:clamp(14px,2.6vh,28px) 0 0;max-width:38ch;font:italic clamp(18px,1.7vw,21px)/1.55 var(--jr-serif);color:#3A3232}
.jr-note{display:inline-block;margin:clamp(10px,2vh,22px) 0 0;font-size:clamp(24px,2.6vw,30px);transform:rotate(-3deg)}
.jr-how{display:flex;align-items:flex-start;gap:12px;margin:clamp(12px,2vh,22px) 0 0;max-width:42ch;font-weight:600;font-size:16px;line-height:1.5}
.jr-how svg{flex:none;width:22px;height:22px;margin-top:1px;color:var(--jr-red-ink)}
.jr-more{margin:clamp(10px,1.8vh,18px) 0 0;font-weight:700;font-size:15px}
.jr-more a{color:var(--jr-red-ink);text-underline-offset:4px}
.jr-next{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;margin:clamp(18px,3.4vh,40px) auto 0;width:max-content;max-width:100%;min-height:48px;padding:0 20px;border:2px dashed #BDB3B3;border-radius:999px;color:var(--jr-ink);font:700 13px var(--jr-mono);text-transform:uppercase;text-decoration:none}
.jr-next:hover{border-color:var(--jr-red);color:var(--jr-red-ink)}
.jr-next svg{width:18px;height:18px}

@keyframes jr-arrive{from{transform:translate3d(36px,0,0);opacity:.3}to{transform:none;opacity:1}}
@keyframes jr-weight{from{font-weight:560}to{font-weight:900}}
@keyframes jr-drift{from{transform:translateY(10%)}to{transform:translateY(-10%)}}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .jr-reveal{animation:jr-arrive linear both;animation-timeline:view();animation-range:entry 5% entry 60%}
    .jr-stop h3{animation:jr-weight linear both;animation-timeline:view();animation-range:entry 25% cover 34%}
    .jr-num{animation:jr-drift linear both;animation-timeline:view();animation-range:cover}
  }
  .jr-reveal.in{animation:jr-arrive .8s cubic-bezier(.2,.7,.2,1) both}
}

/* ---------- Stop 6: your ticket, printed by the machine ---------- */
.jr-tgrid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,5vw,64px);align-items:start}
.jr-form{display:flex;flex-direction:column;gap:14px;margin-top:clamp(16px,3vh,30px);max-width:480px}
.jr-form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.jr-form label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px}
.jr-form input,.jr-form select{width:100%;min-width:0;min-height:48px;padding:0 12px;border:2px solid #D9D3D3;border-radius:2px;background:#FFFFFF;color:var(--jr-ink);font:500 16px var(--jr-ui)}
.jr-form input:focus,.jr-form select:focus{border-color:var(--jr-red-ink);outline:3px solid var(--jr-red-ink);outline-offset:1px}
.jr-form small{font-weight:500;color:var(--jr-muted)}
.jr-form-hint{margin:0;font-size:13px;line-height:1.45;color:var(--jr-muted)}
/* The ticket column shrinks on short screens so the printed ticket and its buttons stay on one screen. */
.jr-tcol{width:100%;max-width:min(640px,max(300px,calc((var(--jr-fit) - 190px) * 2.3)));margin-inline:auto}
.jr-tcol .jr-actions{justify-content:flex-start;margin-top:4px}
.jr-printer{position:relative;min-width:0;padding-top:22px}
.jr-slot{position:absolute;top:0;left:-2%;right:-2%;height:24px;z-index:3;border-radius:6px;background:linear-gradient(#2A2323,#0E0B0B);box-shadow:0 8px 14px -8px rgba(0,0,0,.6)}
.jr-slot::after{content:"";position:absolute;left:4%;right:4%;bottom:5px;height:4px;border-radius:2px;background:#000}
.jr-paperclip{clip-path:inset(0 -80px -60px -80px);padding:4px 8px 28px;margin:0 -8px}
.jr-ticket-tilt{transform-origin:50% 50%}
.jr-ticket{position:relative;transform:translateY(0);transition:transform 1.6s steps(12,end)}
.jr-printer.waiting .jr-ticket{transform:translateY(-104%)}
.jr-ticket canvas{display:block;width:100%;height:100%;filter:drop-shadow(0 18px 22px rgba(60,0,0,.25))}
/* The ticket is a card: two printed faces a hair apart with plies of paper between, so it has an edge when it
   leans. It turns over top to bottom (nothing swings up into the printer). Notches and the punch hole are cut out
   of the canvases; --tk-mask cuts the same shapes out of the plies and the light. */
.jr-tk{position:relative;aspect-ratio:1200/520;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.77,0,.175,1);cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent;
  --tk-mask:radial-gradient(ellipse 1.84% 4.24% at 25% 0,#0000 98%,#000 100%),radial-gradient(ellipse 1.84% 4.24% at 25% 100%,#0000 98%,#000 100%),radial-gradient(ellipse 1.34% 3.08% at 30% 13.85%,#0000 98%,#000 100%)}
.jr-tk.is-back{transform:rotateX(180deg)}
.jr-tk-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(1.6px)}
.jr-tk-back{transform:rotateX(180deg) translateZ(1.6px)}
.jr-tk-ply{position:absolute;inset:0;background:#E4DAC8;transform:translateZ(.55px);-webkit-mask:var(--tk-mask);-webkit-mask-composite:source-in;mask:var(--tk-mask);mask-composite:intersect}
.jr-tk-ply + .jr-tk-ply{background:#D6CAB5;transform:translateZ(-.55px)}
.jr-glare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(circle at var(--hx,50%) var(--hy,35%),rgba(255,255,255,.55),rgba(255,255,255,0) 46%);-webkit-mask:var(--tk-mask);-webkit-mask-composite:source-in;mask:var(--tk-mask);mask-composite:intersect}
.jr-tk-back .jr-glare{transform:scaleY(-1)}
/* a foil strip down the tear line: its colours run as the ticket leans */
.jr-holo{position:absolute;top:4.6%;bottom:4.6%;left:25.6%;width:2.6%;pointer-events:none;mix-blend-mode:hard-light;opacity:.85;border-radius:1px;
  background:linear-gradient(180deg,#FF5A5A,#FFC24B,#7CF2C4,#5FB8FF,#C58BFF,#FF5A5A);background-size:100% 300%;background-position:0 var(--hy,50%)}
.jr-holo::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 2px,rgba(255,255,255,0) 2px 6px)}
.jr-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1);will-change:transform}
.jr-msg{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--jr-muted)}
.jr-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;margin-top:clamp(24px,4vh,48px);text-align:center}
.jr-end p{margin:0;font:700 clamp(26px,3vw,34px)/1 var(--jr-hand);color:var(--jr-red-ink);transform:rotate(-2deg)}

@media (max-width:900px){
  .jr-grid,.jr-tgrid{grid-template-columns:minmax(0,1fr);gap:36px}
  .jr-copy{max-width:none}
  .jr-stop{padding-block:clamp(48px,9vw,72px)}
  .jr-form{max-width:none}
  .jr-num{top:5%;margin-top:0;font-size:clamp(150px,44vw,280px)}
}
@media (max-width:480px){
  .jr-stop h3{font-size:clamp(44px,12.5vw,58px)}
  .jr-stop .jr-lede{font-size:19px}
  .jr-how{font-size:15px}
  .jr-desk{gap:9px;padding:10px}
}
@media (prefers-reduced-motion: reduce){
  .jr-line-plane{animation:none}
  .jr-card .in,.jr-tilt,.jr-ticket,.jr-pola,.jr-scratch,.jr-tk{transition:none}
  .jr-gift,.jr-sticky,.jr-sticky.done,.jr-sticky.gone,.jr-sticky.wrong,.jr-desk.lvlup{animation:none}
  .jr-printer.waiting .jr-ticket{transform:none}
}

/* ---------- The keepsake: board, a few lines and the route on the left, the ticket on the right ---------- */
.jr-keep{min-height:0;padding-block:clamp(56px,8vw,104px);border-top:0;background:radial-gradient(ellipse 60% 70% at 85% 50%,rgba(204,0,0,.06),transparent 70%),var(--jr-soft)}
.jr-keep .jr-platform{text-align:left}
.jr-keep .jr-flaps.jr-big{margin:14px 0 0}
.jr-keep h2{margin:clamp(14px,2vh,22px) 0 0;font:900 clamp(40px,5.6vw,76px)/.92 var(--jr-display);text-wrap:balance}
.jr-keep h2 em{font-style:normal;color:var(--jr-red-ink)}
.jr-keep .jr-route{justify-content:flex-start;margin-top:clamp(14px,2vh,22px)}
.jr-keep .jr-form{margin-top:clamp(16px,2.4vh,26px)}
@media (max-width:900px){ .jr-keep .jr-copy{max-width:none} }