@font-face {
  font-family: Manrope;
  src: url(../assets/manrope-regular.woff) format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url(../assets/manrope-bold.woff) format("woff");
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: light;
  --night: #10333f;
  --ink: #173e45;
  --warm: #fff6e1;
  --gold: #ffce7f;
  --ochre: #895d32;
  --paper: #f9efd8;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100svh;
  background: radial-gradient(ellipse at 18% 0%, #20515d 0, #133746 45%, #0e2838 100%);
  color: var(--warm);
  font: 16px/1.45 Manrope, system-ui, sans-serif;
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
button, a { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #ea963a; outline-offset: 4px; }
h1:focus { outline: 0; }
.wrap { width: min(1100px, calc(100% - 40px)); margin-inline: auto; }
.top, .brand, .sound, .site-footer, .site-footer div { display: flex; align-items: center; }
.top { justify-content: space-between; min-height: 68px; }
.brand { text-decoration: none; gap: 9px; }
.brand svg { width: 37px; height: 37px; color: var(--gold); }
.brand span { font: 700 21px/1 Georgia, serif; }
.brand small { display: block; margin-top: 4px; color: #dfcda6; font: 700 9px/1 Manrope, sans-serif; letter-spacing: .19em; }
.sound { gap: 8px; min-height: 44px; border: 1px solid #709097; border-radius: 99px; background: #123742; padding: 7px 13px; font-size: 13px; font-weight: 700; }
.sound svg { width: 17px; height: 17px; }
.sound[aria-pressed=true] { border-color: #e6b86d; color: #ffdda4; }
.site-footer { justify-content: space-between; gap: 8px; font-size: 12px; color: #d4e4df; padding: 12px 0 20px; }
.site-footer div { gap: 16px; }
.site-footer a, .site-footer button { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.primary, .soft, .text-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; font-weight: 700; line-height: 1.2; text-decoration: none;
}
.primary {
  padding: 13px 22px; color: #402b22; background: #ffce7f;
  border: 1px solid #ffe6ab; border-radius: 12px; box-shadow: 0 3px 0 #a77443;
}
.primary:hover { background: #ffdaa0; }
.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #a77443; }
.soft { padding: 11px 16px; border: 1px solid #99aaa2; border-radius: 12px; background: #fffaf0; color: var(--ink); }
.text-action { padding: 8px 3px; background: none; border: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cover {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(435px, 66svh, 650px); background: var(--night);
  border: 1px solid #aab8a670; border-radius: 23px;
}
.cover picture, .cover picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.cover:before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #081e2ef5, #123144d9 28%, #14324980 53%, transparent 78%); }
.cover-copy { width: min(52%, 540px); padding: clamp(30px, 4.5vw, 65px); }
.kicker, .place { display: inline-flex; align-items: center; gap: 8px; font: 700 11px/1.3 Manrope, sans-serif; letter-spacing: .115em; text-transform: uppercase; }
.kicker { color: #ffe3a5; }
.kicker:before { content: ""; width: 24px; height: 1px; background: currentColor; }
.cover h1 { font: 700 clamp(54px, 6.2vw, 92px)/.94 Georgia, serif; letter-spacing: -.057em; margin: 19px 0; }
.cover h1 small { display: block; margin-bottom: 7px; font: italic 400 .49em/1.1 Georgia, serif; letter-spacing: -.035em; color: #ffe1a5; }
.cover-copy p { max-width: 360px; margin: 0 0 22px; font-size: clamp(16px, 1.35vw, 19px); }
.start { min-width: 162px; min-height: 54px; font-size: 19px; }
.start svg { width: 18px; height: 18px; }

/* A single open page: one instruction, the moving picture, and the same three pockets. */
.storybook, .postcard, .adult, .letter-door {
  color: var(--ink); background: var(--paper); border-radius: 22px;
  border: 1px solid #d0bea0; box-shadow: 0 6px 0 #082c3666, 0 16px 42px #071f291f;
}
.storybook { max-width: 860px; margin-inline: auto; overflow: hidden; }
.page-stack { position: relative; isolation: isolate; overflow: hidden; }
.leaf { background: var(--paper); }
.leaf.outgoing { position: absolute; inset: 0 0 auto; z-index: 2; pointer-events: none; }
.help-hand {
  position: absolute; z-index: 2; pointer-events: none; right: -3%; bottom: 16%;
  width: clamp(27px, 28%, 39px); height: 38px; filter: drop-shadow(0 2px 2px #49352177);
  animation: tap-example .9s ease-in-out 2;
}
.help-hand svg { display: block; width: 100%; height: 100%; }
.lamp-button .help-hand { right: -15%; bottom: 13%; }
.engine .help-hand { left: 46%; top: -2%; width: 24%; }
@keyframes tap-example { 45% { transform: translate(-3px, -4px) scale(.94); } }
.task { display: flex; gap: 17px; align-items: center; padding: 16px clamp(17px, 3vw, 32px); }
.sample {
  position: relative; flex: 0 0 auto; display: grid; place-items: center;
  width: 70px; height: 70px; border-radius: 50%; color: var(--ochre);
  background: radial-gradient(circle at 35% 30%, #fffdf2, #f3deaf); border: 1px solid #c9a970;
  box-shadow: inset 0 0 0 4px #fff5d8, inset 0 0 0 5px #ddc595;
}
.sample svg { width: 77%; height: 77%; }
.place { color: #745332; font-size: 10px; }
.place svg { width: 14px; height: 14px; }
.task h1 { font: 700 clamp(30px, 4.3vw, 49px)/1.02 Georgia, serif; letter-spacing: -.045em; margin: 3px 0 5px; }
.cue { margin: 0; min-height: 1.4em; color: #34515a; font-size: 16px; }
.scene {
  position: relative; isolation: isolate; overflow: hidden; width: 100%;
  height: clamp(280px, 42vw, 410px); background: #456573;
  border-block: 1px solid #bac4b6;
}
.backdrop { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.scene-horse .backdrop { object-position: center 17%; }
.scene-star .backdrop { object-position: center 20%; }
.scene-train .backdrop { object-position: center 25%; }
.scene:before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, #082c3600 38%, #12363f28 72%, #244b50a3 100%); }
.scenery { position: absolute; inset: 0; }
.scene button { user-select: none; }
.scene button:focus-visible { outline: 4px solid #fff4b1; outline-offset: 1px; }
.toy-row {
  position: absolute; inset-inline: 4%; bottom: 6%; display: flex; align-items: end;
  justify-content: space-evenly; gap: clamp(4px, 3%, 18px);
}
.toy-choice {
  position: relative; isolation: isolate; display: grid; justify-items: center;
  width: min(28%, 145px); min-height: 92px; padding: 3px 2px 5px; border: 0; border-radius: 17px;
  color: #3e3327; background: transparent;
}
.toy-choice:before {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: 20%;
  height: 27%; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 48%, #a09478 0, #efe7d4 44%, #fbf4dd 62%, #c89a60 66%, #835a38 76%);
  box-shadow: 0 4px 6px #322d2777;
}
.toy-choice .play-toy { display: block; width: 93%; aspect-ratio: 128 / 112; overflow: visible; transform-origin: 50% 87%; filter: drop-shadow(0 2px 1px #fff6e5) drop-shadow(1px 3px 2px #66492960); }
.toy-choice .nameplate {
  padding: 3px 8px; border-radius: 9px; background: #fff4d8; border: 1px solid #a88a54;
  font-size: clamp(12px, 1.6vw, 15px); font-weight: 700; line-height: 1.3;
  box-shadow: 0 2px 0 #80613d;
}
.scene-horse:after {
  content: ""; position: absolute; left: -4%; right: -4%; bottom: -7%; height: 28%; z-index: -1;
  transform: rotate(-1deg); pointer-events: none; border-top: 5px solid #fbf6dd;
  background: linear-gradient(#7faca9 0%, #416d70 58%, #254e56 59%); box-shadow: 0 -2px 10px #e3efa673;
}
.is-guided:after {
  content: ""; pointer-events: none; position: absolute; inset: -3px; border: 2px solid #ffe19a;
  border-radius: 19px; box-shadow: 0 0 0 2px #8d682c, 0 0 14px #ffde8aa6;
  animation: point-out 1.25s ease-in-out 2;
}
.toy-choice.is-guided .play-toy { animation: rock .65s ease-in-out 2 alternate; }
@keyframes point-out { 50% { opacity: .55; transform: scale(1.045); } }
@keyframes rock { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

.garland { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.garland path { vector-effect: non-scaling-stroke; stroke-linecap: round; fill: none; }
.paper-star {
  position: absolute; left: 50%; top: 9%; width: clamp(56px, 15%, 103px);
  aspect-ratio: 1; transform: translateX(-50%); pointer-events: none;
}
.paper-star:before {
  content: ""; position: absolute; inset: -28%; background: radial-gradient(circle, #fff8c4cc, #ffce6329 54%, transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.paper-star svg { position: relative; width: 100%; height: 100%; opacity: .82; filter: saturate(.65) drop-shadow(0 2px 2px #49310770); }
.scene-star.awake .paper-star:before { opacity: 1; }
.scene-star.awake .paper-star svg { opacity: 1; filter: drop-shadow(0 0 8px #ffde64); }
.lamp-button {
  position: absolute; width: clamp(64px, 13%, 104px); aspect-ratio: 100/130;
  transform: translate(-50%, -3%); padding: 0; border: 0; border-radius: 28%;
  background: transparent;
}
.lamp-button[data-lamp="0"] { left: 19%; top: 35.8%; }
.lamp-button[data-lamp="1"] { left: 50%; top: 43.2%; }
.lamp-button[data-lamp="2"] { left: 81%; top: 35.8%; }
.lamp-button:before {
  content: ""; position: absolute; inset: -40%;
  background: radial-gradient(ellipse, #fff1a4d9 10%, #ffcb647d 35%, transparent 68%); opacity: 0; pointer-events: none; transition: opacity .32s;
}
.lamp-button[aria-pressed=true]:before { opacity: 1; }
.lamp-model { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(1px 3px 2px #25353a88); transform-origin: 50% 5%; }
.glass-on { opacity: 0; transition: opacity .22s; }
.lamp-button[aria-pressed=true] .glass-on { opacity: 1; }
.lamp-button.is-guided:after { border-radius: 40%; }
.scene-train:after {
  content: ""; pointer-events: none; z-index: -1; position: absolute; left: -4%; right: -4%; bottom: -7%; height: 24%;
  border-radius: 42% 53% 0 0 / 23% 30% 0 0;
  background: linear-gradient(176deg, #fffeef 0%, #d9e3df 32%, #9bbed1 65%, #7ca4b4);
  box-shadow: 0 -2px 3px #e8f2e9;
}
.track { pointer-events: none; position: absolute; left: -2%; right: -2%; bottom: 9%; height: 6.5%; transform: skewX(-15deg); border-block: 4px solid #7c6048; box-shadow: inset 0 -2px #e9cf9e, 0 3px 0 #d1b68d; background: repeating-linear-gradient(90deg, transparent 0 15px, #9b7755 15px 24px, transparent 24px 35px); }
.engine-position { position: absolute; left: 5%; bottom: 13%; width: clamp(142px, 32%, 238px); aspect-ratio: 146/104; }
.engine { display: block; position: relative; width: 100%; height: 100%; padding: 0; border: none; border-radius: 20px; background: transparent; }
.loco { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 2px 1px #f2eee0) drop-shadow(1px 4px 2px #5d504d70); }
.turn-key { position: absolute; left: 24%; top: -14%; width: 43%; height: 55%; transform-origin: 50% 85%; transform: rotate(12deg); filter: drop-shadow(0 0 4px #fff5b8); }
.engine.is-guided:after { inset: -11% 30% 49% 19%; border-radius: 50%; }
.wheel { transform-origin: center; transform-box: fill-box; }
.is-running .wheel { animation: roll .48s linear infinite; }
@keyframes roll { to { transform: rotate(360deg); } }
.steam { position: absolute; top: 7%; left: 69%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: #fffaec; opacity: 0; pointer-events: none; }
.is-running .steam { animation: steam .68s ease-out infinite; }
.is-running .steam:nth-of-type(2) { animation-delay: .22s; }
.is-running .steam:nth-of-type(3) { animation-delay: .43s; }
@keyframes steam { 10% { opacity: .8; transform: translate(0) scale(.7); } 100% { opacity: 0; transform: translate(-120%, -140%) scale(1.65); } }

.satchel { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px clamp(13px, 3.5vw, 30px); background: #fff6e3; }
.satchel-label { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.satchel-label > svg { width: 39px; height: 42px; }
.satchel-label small { display: block; color: #52635d; font: 700 12px/1.3 Manrope, sans-serif; }
.pockets { display: flex; align-items: center; gap: 6px; }
.pocket { display: grid; place-items: center; width: 47px; height: 44px; border: 1px dashed #9a9d89; border-radius: 12px; background: #f0ead6; }
.pocket svg { width: 81%; height: 81%; filter: grayscale(1); opacity: .32; }
.pocket.filled { border: 1px solid #bca576; background: #f8e3ad; }
.pocket.filled svg { opacity: 1; filter: none; }
.flying-toy { position: fixed; top: 0; left: 0; z-index: 30; pointer-events: none; color: var(--gold); filter: drop-shadow(0 3px 4px #74512566); }
.flying-toy svg { width: 100%; height: 100%; }

/* The postcard belongs to the child. The separate envelope opens on request. */
.finish, .adult { max-width: 900px; margin-inline: auto; }
.postcard { display: grid; grid-template-columns: 1.08fr 1fr; overflow: hidden; }
.postcard > img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.post-copy { align-self: center; padding: clamp(22px, 4vw, 38px); }
.post-copy h1, .adult h1 { margin: 5px 0 12px; font: 700 clamp(33px, 4.4vw, 53px)/1.02 Georgia, serif; letter-spacing: -.045em; }
.post-copy p { margin: 0 0 17px; }
.end-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.share-note, .quiet { font-size: 14px; color: #476067; }
#share-status:not(:empty) { display: block; margin-top: 8px; }
.letter-door { margin-top: 14px; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f5e9ce; }
.letter-title { display: inline-flex; align-items: center; gap: 10px; font: 700 20px Georgia, serif; }
.envelope { display: inline-block; width: 37px; height: 26px; position: relative; border: 1px solid #af8b58; border-radius: 5px; background: linear-gradient(32deg, transparent 49%, #bb9759 50%, transparent 54%) left top / 50% 75% no-repeat, linear-gradient(-32deg, transparent 49%, #bb9759 50%, transparent 54%) right top / 50% 75% no-repeat, #ffebbb; }
.envelope:after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #b74437; left: calc(50% - 5px); top: 8px; border: 1px solid #914334; }
.replay { color: #f6e3bd; font-size: 14px; }
.adult { padding: clamp(20px, 4vw, 38px); max-width: 700px; }
.adult header { display: flex; align-items: center; gap: 13px; }
.adult header img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 35%; border: 2px solid #e9c984; }
.adult h1 { margin-top: 17px; }
.adult p { margin: 10px 0 16px; }
.adult .price { font: 700 25px/1.1 Georgia, serif; }
.passline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 6px; }
.code { font: 700 clamp(20px, 4vw, 27px)/1.2 ui-monospace, monospace; }
.reward-note { color: #476067; font-size: 14px; }
.reward-note:empty { display: none; }

@media (max-width: 640px) {
  .wrap { width: calc(100% - 20px); }
  .top { min-height: 55px; padding-inline: 3px; }
  .brand svg { width: 31px; height: 31px; }
  .brand span { font-size: 18px; }
  .sound { min-height: 44px; padding: 6px 10px; font-size: 12px; }
  .cover { display: block; min-height: 0; border-radius: 17px; }
  .cover picture { position: relative; display: block; z-index: -2; width: 100%; height: clamp(158px, min(59vw, 32svh), 270px); }
  .cover picture img { object-position: 50% 36%; }
  .cover:before { background: linear-gradient(0deg, #0e3341 22%, #0e334100 72%); }
  .cover-copy { width: 100%; padding: 12px 21px 22px; background: #103440; }
  .cover h1 { font-size: clamp(42px, 11.8vw, 68px); margin: 8px 0 13px; }
  .cover h1 small { margin-bottom: 4px; }
  .cover-copy p { font-size: 16px; margin-bottom: 15px; }
  .start { width: 100%; min-height: 50px; }
  .site-footer { font-size: 11px; padding: 5px 2px 14px; }
  .site-footer div { gap: 10px; }
  .storybook, .postcard, .adult, .letter-door { border-radius: 16px; }
  .task { padding: 12px 13px; gap: 10px; }
  .sample { width: 52px; height: 52px; }
  .place { font-size: 9px; }
  .task h1 { margin: 3px 0; font-size: clamp(26px, 6.8vw, 38px); }
  .cue { font-size: 14px; }
  .scene { height: clamp(219px, min(78vw, 49svh), 372px); }
  .scene-horse .backdrop { object-position: 50% 50%; }
  .scene-star .backdrop { object-position: 50% 47%; }
  .scene-train .backdrop { object-position: 50% 54%; }
  .toy-row { inset-inline: 1%; bottom: 7%; gap: 1%; }
  .toy-choice { width: 31%; min-height: 76px; }
  .toy-choice .nameplate { padding: 3px 6px; }
  .satchel { padding: 8px 12px; }
  .satchel-label { font-size: 14px; gap: 6px; }
  .satchel-label > svg { width: 32px; height: 36px; }
  .pocket { width: 37px; height: 36px; border-radius: 10px; }
  .pockets { gap: 4px; }
  .postcard { grid-template-columns: 1fr; }
  .postcard > img { min-height: 0; height: clamp(150px, 42vw, 215px); object-position: 50% 42%; }
  .post-copy { padding: 17px 19px; }
  .post-copy h1 { margin: 7px 0; }
  .end-actions { gap: 2px 10px; }
  .letter-door { padding: 10px 13px; }
  .letter-title { font-size: 16px; gap: 7px; }
  .envelope { width: 29px; height: 23px; }
  .letter-door .soft { font-size: 14px; padding-inline: 10px; }
  .adult .primary { width: 100%; }
}
@media (max-height: 490px) and (min-width: 641px) {
  .top { min-height: 49px; }
  .task { padding-block: 6px; }
  .sample { width: 48px; height: 48px; }
  .task h1 { font-size: 30px; }
  .scene { height: 52svh; min-height: 175px; }
  .satchel { padding-block: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
}

@media (max-width: 640px) {
  body:has(.cookie-panel:not([hidden])) { padding-bottom: min(280px, 58svh); }
}

/* Tactile chapter scenes: the child changes the picture instead of clicking through cards. */
.cover-note { display:block; margin-top:14px; font-size:12px; color:#d7e7df; }
.chapter { display:flex; gap:6px; margin-left:auto; flex:0 0 auto; }
.chapter span { width:7px; height:7px; border-radius:50%; background:#d8c8a8; }
.chapter .current { background:#b54436; box-shadow:0 0 0 4px #b5443617; }
.chapter .passed { background:#477f6c; }
.task { position:relative; }
.magic-bit { position:fixed; width:7px; height:7px; border-radius:2px; pointer-events:none; z-index:80; }
.snow-toy { position:absolute; width:clamp(220px,46%,355px); aspect-ratio:1.25; left:50%; bottom:8%; transform:translateX(-50%); }
.buried-horse { position:absolute; width:87%; height:96%; left:7%; top:0; filter:drop-shadow(0 4px 2px #12333f55); transform-origin:50% 88%; }
.snow-cap { position:absolute; width:63%; height:58%; padding:0; border:0; background:none; touch-action:none; border-radius:45%; filter:drop-shadow(0 5px 3px #375e7e44); }
.snow-cap svg { width:100%; height:100%; overflow:visible; }
.snow-0 { left:-4%; bottom:-2%; transform:rotate(-9deg); }
.snow-1 { right:-3%; bottom:-3%; transform:rotate(8deg); }
.snow-2 { left:22%; top:-1%; transform:rotate(-5deg); }
.snow-cap .help-hand { width:38px; height:45px; right:28%; bottom:20%; }
.snow-cap.is-guided:after { border-radius:50%; inset:15% 11%; }
.scene-horse:after { height:20%; background:linear-gradient(180deg,#fffaf0,#d8eaf0 50%,#98c3d5); border-radius:45% 55% 0 0; border:0; transform:none; }
.scene-star:before { background:linear-gradient(#23384e26,#102d5966); }
.scene-star:after { content:""; pointer-events:none; position:absolute; inset:0; z-index:-1; opacity:var(--lamplight,0); background:radial-gradient(ellipse at 50% 50%,#ffc34e2b,transparent 70%); transition:opacity .5s; }
.paper-star { width:clamp(68px,16%,117px); }
.engine-position.assembly { left:8%; bottom:29%; width:clamp(175px,40%,285px); }
.scene-train .track { bottom:27%; }
.scene-train:after { height:42%; }
.loose-wheels { display:flex; justify-content:center; gap:clamp(30px,9%,85px); position:absolute; bottom:3.5%; width:100%; }
.spare-wheel { position:relative; padding:6px; width:clamp(56px,10%,76px); height:clamp(56px,10vw,76px); border:0; border-radius:50%; background:#fff5d9; box-shadow:0 3px 0 #95734c,0 5px 14px #14394744; }
.spare-wheel svg { display:block; width:100%; height:100%; }
.spare-wheel:disabled { pointer-events:none; }
.spare-wheel .help-hand { right:-12%; width:30px; }
.fitted-wheel { transition:opacity .18s; }
.departure { max-width:860px; margin:auto; text-align:center; border-radius:22px; overflow:hidden; background:var(--paper); color:var(--ink); border:1px solid #d0bea0; }
.departure-art { position:relative; overflow:hidden; height:clamp(230px,40vw,400px); }
.departure-art img { width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.departure-copy { padding:22px 20px 28px; }
.departure h1 { font:700 clamp(32px,4vw,48px)/1.05 Georgia,serif; margin:0 0 10px; letter-spacing:-.035em; }
.departure p { margin:0 auto 19px; max-width:420px; }
.departure.sending .departure-art img { animation:sleigh-flight 1.1s ease-in forwards; }
@keyframes sleigh-flight { to { transform:scale(1.07) translateY(-6px); filter:brightness(1.22); } }
.adult { padding:0; max-width:860px; overflow:hidden; }
.adult-hero { display:grid; grid-template-columns:.9fr 1.1fr; gap:0; }
.adult-hero > img { width:100%; height:100%; object-fit:cover; object-position:50% 38%; min-height:270px; }
.adult-intro { padding:30px; align-self:center; }
.adult-intro h1 { margin:10px 0 14px; }
.adult-intro p { color:#39565a; }
.adult-body { padding:0 30px 25px; }
.offer-card { background:#fffaf0; border:1px solid #d7c29b; border-radius:15px; padding:21px; margin:5px 0 14px; }
.offer-heading { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.adult .price { font:700 43px/1.1 Georgia,serif; color:#a53131; }
.was-price { text-decoration:line-through; color:#667674; font-size:18px; }
.offer-details { margin:10px 0 16px; }
.offer-details strong { display:block; }
.pass-details { border-top:1px solid #dfd2b9; padding-top:10px; }
.pass-details summary { cursor:pointer; font-size:14px; min-height:36px; display:flex; align-items:center; color:#516661; }
.pass-details .code { font-size:20px; }
.offer-card .primary { width:100%; }
.letter-door { background:linear-gradient(120deg,#fff3d5,#efd8ab); border-color:#dfc28d; }
.letter-title small { display:block; margin-top:3px; font:400 12px/1.3 Manrope,sans-serif; color:#715a3f; }
@media(max-width:640px) {
  .chapter { position:absolute; top:13px; right:13px; gap:5px; }
  .chapter span { width:5px; height:5px; }
  .task .place { padding-right:22px; }
  .task .cue { font-size:13px; }
  .task h1 { font-size:clamp(25px,6.6vw,38px); }
  .cover-note { font-size:11px; margin-top:11px; }
  .snow-toy { width:70%; max-width:280px; bottom:5%; }
  .engine-position.assembly { width:57%; bottom:29%; left:6%; }
  .spare-wheel { width:55px; height:55px; }
  .loose-wheels { bottom:3%; gap:30px; }
  .departure-art { height:clamp(190px,60vw,300px); }
  .departure-copy { padding:18px 20px 22px; }
  .departure-copy .primary { width:100%; }
  .adult-hero { grid-template-columns:1fr; }
  .adult-hero > img { height:150px; min-height:0; object-position:50% 33%; }
  .adult-intro { padding:20px 20px 4px; }
  .adult-intro h1 { font-size:35px; }
  .adult-body { padding:0 20px 20px; }
  .offer-card { padding:16px; }
  .adult .price { font-size:39px; }
  .letter-title small { max-width:140px; font-size:11px; }
}
/* Keep the other wheels still when one is fitted, including rapid taps. */
.spare-wheel[hidden] { display:block !important; visibility:hidden; pointer-events:none; }