/* ===== THE LONG WAY TO EUROPE — "Six Worlds + Postcard letters" ===== */
:root{
  /* hero/prologue keep the warm cream; gate uses the Dusk paper */
  --paper:#f6f2ea; --paper2:#efe9dc; --ink:#221d18; --ink2:#443c32; --ink3:#6b6457;
  --cream:#f4ebdd; --red:#A6311E; --blue:#3a5a7a; --graphite:#6b6457;
  /* Dusk gate paper */
  --gate-paper:#DAD0BF; --gate-paper2:#E3D9C8; --gate-ink:#221d18; --gate-ink2:#443c32;
  --legcream:#F3ECDC;   /* cream text on every chapter */
  /* TYPE SYSTEM: Display=Archivo, Serif=Newsreader, Label=Space Mono, Hand=Caveat */
  --disp:'Archivo',system-ui,sans-serif; --sans:'Archivo',system-ui,sans-serif; --mono:'Space Mono',monospace;
  --hand:'Caveat',cursive; --serif:'Newsreader',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
::selection{background:var(--red);color:#fff}
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:95;background:var(--red)}
.tag{position:fixed;top:14px;left:14px;z-index:60;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:#1a1a1a;padding:.3rem .6rem;border-radius:2px}
.mono{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* a11y: visible keyboard focus everywhere (theme-aware), only on keyboard nav not mouse click */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}
.leg :focus-visible,.journey-section :focus-visible,.footer :focus-visible{outline-color:var(--legcream)}
.gate input:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(166,49,30,.42)}
#private :focus-visible,#plb :focus-visible{outline-color:#f0e7d6}
/* ==important== emphasis in the writing — warm gold, slightly bold, so the key moments stand out */
.em{color:#9a5a14;font-weight:600}

/* ---------- HERO (words-first cinematic title-card: washed photo, centered type, ticker) ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;background:var(--paper)}
.hero-bg2{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:saturate(1.06) contrast(1.03)}
/* center-weighted paper wash: photo stays clear, the soft veil + text-halo carry the centered words */
.hero-wash{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(ellipse 96% 92% at 50% 47%,rgba(246,242,234,.18) 0%,rgba(246,242,234,.08) 50%,rgba(246,242,234,0) 78%),
  linear-gradient(180deg,rgba(246,242,234,.3) 0%,transparent 22%,transparent 70%,rgba(246,242,234,.66) 100%)}
.hero-top,.hero-mid,.hero-ticker{position:relative;z-index:2}
.hero-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:clamp(1.3rem,3vw,2.1rem) clamp(1.4rem,4vw,3rem) 0;text-shadow:0 1px 10px rgba(246,242,234,.92)}
.hero-top .htop-lead{font-family:var(--mono);font-size:clamp(.82rem,1.4vw,1rem);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.hero-top .htop-date{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.hero-mid{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:1.5rem clamp(1.2rem,5vw,2.5rem);text-shadow:0 1px 18px rgba(246,242,234,.95),0 2px 5px rgba(246,242,234,.88)}
.hero-mid h1{font-family:var(--disp);font-weight:800;line-height:.96;letter-spacing:-.025em;font-size:clamp(2.7rem,8.5vw,8rem);max-width:14ch;color:var(--ink);margin:0}
.hero-route{position:relative;display:flex;justify-content:space-between;align-items:center;width:min(430px,82vw);height:16px;margin:clamp(1.4rem,3vw,2.4rem) 0}
.hero-route .hrline{position:absolute;left:0;right:0;top:50%;border-top:2px dashed #c4bba8;z-index:0}
.hero-route .hdot{position:relative;z-index:1;width:14px;height:14px;border-radius:50%;border:none;padding:0;background:var(--c);box-shadow:0 0 0 3px rgba(246,242,234,.55)}
.hero-route button.hdot{cursor:pointer;transition:transform .2s}
.hero-route button.hdot:hover{transform:scale(1.3)}
.hero-quote{font-family:var(--serif);font-style:italic;font-weight:700;font-size:clamp(1.4rem,2.7vw,2.3rem);line-height:1.4;max-width:28ch;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6),0 2px 22px rgba(0,0,0,.45);margin:0}
.hero-sign{font-family:'Caveat',cursive;font-weight:700;font-size:clamp(2.6rem,4.4vw,3.8rem);line-height:1;color:#fff;margin:.7rem 0 0;text-shadow:0 1px 4px rgba(0,0,0,.55),0 3px 22px rgba(0,0,0,.4)}
/* soft dark scrim behind ONLY the white quote + signature so they read on any photo region (legibility no longer photo-dependent) */
.hero-words{position:relative;display:flex;flex-direction:column;align-items:center}
.hero-words::before{content:'';position:absolute;inset:-.4em -1.5em;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 72% 118% at 50% 50%,rgba(16,11,6,.42),rgba(16,11,6,.16) 56%,transparent 80%)}
.hero-ticker{overflow:hidden;border-top:1px solid rgba(34,29,24,.14);background:var(--paper2)}
.hero-ticker-row{display:flex;gap:2.4rem;white-space:nowrap;width:max-content;font-family:'Caveat',cursive;font-weight:600;font-size:1.5rem;color:var(--ink);padding:.55rem 0;animation:heroTick 42s linear infinite}
.hero-ticker-row .tdot{color:var(--red)}
@keyframes heroTick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hero-ticker-row{animation:none;transform:translateX(0)}}

/* ---------- THE FLIGHT (dark map interlude) ---------- */
.journey-section{background:#0a0806;color:#efe6d6;padding:clamp(3rem,7vh,5rem) clamp(1.2rem,5vw,4rem) clamp(2.5rem,6vh,4rem)}
.journey-section .flight-label{max-width:1100px;margin:0 auto 1.4rem;display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}   /* eyebrow stacked above the title (desktop matches the phone layout) */
.journey-section .flight-label .mono{color:var(--red);text-transform:uppercase;letter-spacing:.24em;font-size:.72rem}
.journey-section .flight-label h2{font-family:var(--disp);font-weight:500;font-size:clamp(1.7rem,4vw,2.9rem);letter-spacing:-.015em;color:#f4ecdc}
.flight-frame{max-width:1100px;margin:0 auto;border-radius:6px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.07);background:#000}
.flight-frame iframe{display:block;width:100%;height:min(78vh,640px);border:0}
/* tap-to-load poster (defers the 1.1MB map so photos load first) */
.flight-poster{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
  width:100%;height:min(78vh,640px);border:0;cursor:pointer;color:#f3ece0;background:#0a0a0e center/cover no-repeat;touch-action:manipulation}
.flight-poster::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(8,6,4,.5),rgba(8,6,4,.86))}
.flight-poster>*{position:relative;z-index:1}
.flight-poster .fp-go{font-family:var(--mono);font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;background:var(--red);color:#fff;padding:.85em 1.7em;border-radius:9px;box-shadow:0 14px 36px rgba(0,0,0,.45)}
.flight-poster .fp-sub{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#cabfae;opacity:.85}
@media(max-width:760px){.flight-poster{height:62vh;max-height:480px}}
/* phones get a guaranteed-tappable full-screen path (top-level link — immune to iframe tap quirks) */
.flight-full{display:none;width:fit-content;margin:1rem auto 0;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--red);color:#fff;text-decoration:none;padding:1em 1.6em;border-radius:8px;touch-action:manipulation}
.flight-cap{max-width:1100px;margin:1rem auto 0;color:#8a8378;text-align:center}

/* ---------- PROLOGUE ---------- */
.prologue{background:var(--paper2);padding:clamp(5rem,12vh,10rem) clamp(1.4rem,6vw,6rem);display:grid;grid-template-columns:repeat(12,1fr);gap:1.4rem}
.prologue .side{grid-column:1/4;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--ink3);line-height:1.9}
.prologue .side .place{color:var(--ink);text-transform:uppercase;letter-spacing:.18em}
.prologue .prose{grid-column:4/11;max-width:56ch}
.prologue .prose p{font-family:var(--serif);font-weight:300;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.7;color:var(--ink);margin-bottom:1.2em;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.prologue .prose .lead{text-align:left}   /* the italic opening line reads better ragged */
.prologue .prose .lead{font-family:var(--disp);font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.25;font-style:italic}
.prologue .stamp{display:block;width:fit-content;font-family:var(--disp);font-size:1.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--red);border:2px solid var(--red);border-radius:4px;padding:.1em .5em;transform:rotate(-6deg);margin:1.6rem 0}   /* own line, equal space above/below */
.prologue .margin{grid-column:1/4;font-family:var(--hand);font-size:1.4rem;line-height:1.25;color:var(--red);margin-top:1.5rem}

/* ---------- ROUTE LINK ---------- */
.routelink{text-align:center;padding:clamp(3rem,7vh,5rem) 1.4rem;background:var(--paper)}
.routelink a{font-family:var(--disp);font-size:clamp(1.6rem,4vw,2.6rem);color:var(--ink);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:.1em}
.routelink .sm{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-top:.8rem}

/* ---------- CHAPTER WORLDS ("Dusk" + editorial + polaroid) ---------- */
.leg{background:var(--field);color:var(--legcream);padding:clamp(3.5rem,8vh,7rem) clamp(1.4rem,6vw,4rem);overflow:hidden}
.leg-in{max-width:1100px;margin:0 auto}
/* editorial top row: Roman numeral · rule · kicker */
.leg-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.leg .num{font-family:var(--mono);font-weight:700;font-size:26px;line-height:1;color:var(--legcream);opacity:.55}
.leg-head .rule{width:26px;height:1px;background:currentColor;opacity:.5}
.leg .meta{font-family:var(--mono);font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;opacity:.7}
.leg .t{font-family:var(--disp);font-weight:800;font-size:clamp(48px,8vw,132px);line-height:.92;letter-spacing:-.025em;overflow-wrap:break-word;margin:.05em 0 .35em;color:var(--legcream)}
.leg .lead{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.3vw,34px);line-height:1.25;max-width:42ch;text-wrap:balance;margin-bottom:2.2rem;color:var(--legcream);opacity:.92}   /* punchy one-liners stay on one line; the long Swiss closer balances to 2 */
/* POLAROID grid: 4 cols of square prints, white frame + thick bottom + handwritten caption + scrapbook tilt */
.collage{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,26px);margin:0 0 2.6rem}
.frame{background:#fbf7ee;padding:7px;border-radius:3px;box-shadow:0 16px 28px -16px rgba(0,0,0,.55);cursor:zoom-in;transition:transform .25s,box-shadow .25s}
.frame:nth-child(3n){transform:rotate(-1.6deg)}.frame:nth-child(3n+1){transform:rotate(1.3deg)}.frame:nth-child(4n){transform:rotate(.8deg)}
.frame:hover{transform:scale(1.04) rotate(0);box-shadow:0 22px 40px -14px rgba(0,0,0,.6);position:relative;z-index:3}
.frame img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:1px;image-orientation:from-image;filter:brightness(.9) saturate(1.08) contrast(1.04)}
.frame .cap{font-family:var(--hand);font-size:15px;line-height:1;color:#221d18;text-align:center;padding:8px 4px 12px;min-height:30px}
/* foot: tags line + who-was-here */
.leg-foot{display:flex;flex-direction:column;align-items:flex-start;gap:1.6rem}   /* names always on their own line below the places (was inline-right on short legs) */
.leg .body{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7;color:var(--legcream)}
.hostblock{margin-top:0}
.also-h{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;opacity:.7;margin-bottom:.7rem;color:var(--legcream)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-block;background:transparent;border:1px solid rgba(243,236,220,.45);border-radius:999px;padding:7px 16px;cursor:pointer;color:var(--legcream);font-family:var(--sans);font-size:14px;font-weight:500;transition:background .2s,transform .2s}
.chip:hover{background:rgba(243,236,220,.16);transform:translateY(-2px)}

/* ---------- NUMBERS ---------- */
.numbers{background:var(--paper2);padding:clamp(5rem,12vh,10rem) clamp(1.4rem,6vw,6rem);max-width:980px;margin:0 auto}
.numbers .lede{font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink3);margin-bottom:3.2rem}
.fact{display:flex;align-items:baseline;gap:1.4rem;margin-bottom:2.4rem;max-width:660px}
.fact:nth-child(even){margin-left:auto;flex-direction:row-reverse;text-align:right}
.fact .n{font-family:var(--disp);font-size:clamp(2.8rem,6vw,5rem);line-height:.85;white-space:nowrap;color:var(--ink)}
.fact .n.word{color:var(--red);font-style:italic;font-size:clamp(1.7rem,4vw,2.6rem)}
.fact .cap{font-family:var(--serif);font-size:1.08rem;line-height:1.5;color:var(--ink2);max-width:30ch}
.fact .cap strong{color:var(--ink);font-weight:500}
.numbers .foot{font-family:var(--serif);font-style:italic;color:var(--ink3);margin-top:2rem;text-align:center}

/* ---------- DOORWAY (Dusk gate) ---------- */
.doorway{background:var(--gate-paper);padding:clamp(5rem,12vh,9rem) clamp(1.4rem,6vw,6rem);text-align:center}
/* the padlock (kept) — now accent-coloured */
.lock-wrap{display:flex;justify-content:center;margin-bottom:1.6rem}
.lock{width:70px;height:auto;color:var(--red);overflow:visible}
.lock .lbody{fill:var(--red)}
.lock .lhole{fill:var(--gate-paper)}
.lock .shackle{transform-origin:58px 30px;transition:none}
.lock.unlocked .shackle{animation:shackleOpen .85s cubic-bezier(.5,-0.4,.3,1.4) forwards}
.lock.unlocked .lbody{animation:lockPop .85s ease}
@keyframes shackleOpen{0%{transform:translateY(0) rotate(0)}35%{transform:translateY(-7px) rotate(0)}100%{transform:translateY(-6px) rotate(32deg)}}
@keyframes lockPop{0%{transform:translateY(0)}45%{transform:translateY(0)}60%{transform:translateY(-4px) scale(1.06)}100%{transform:translateY(0) scale(1)}}
.lock.shake{animation:lockShake .5s}
@keyframes lockShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px) rotate(-4deg)}40%{transform:translateX(6px) rotate(4deg)}60%{transform:translateX(-4px) rotate(-2deg)}80%{transform:translateX(4px) rotate(2deg)}}
/* cinematic unlock: the world washes away while the open lock zooms through you, then the letter fades in.
   Phones get a plain wash with an opacity-only fade (compositor-only = always smooth); desktops add the
   frosted blur — kept STATIC (only the veil's opacity animates; animating blur radius janks even there). */
.unlock-veil{position:fixed;inset:0;z-index:790;pointer-events:none;opacity:0;transition:opacity .55s ease;
  background:rgba(218,208,191,.55)}
.unlock-veil.on{opacity:1}
.unlock-veil .lock{will-change:transform,opacity}
@media (hover:hover) and (pointer:fine){
  .unlock-veil{background:rgba(218,208,191,.38);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .unlock-veil .lock{filter:drop-shadow(0 18px 50px rgba(60,20,15,.35))}
}
.private.enter{animation:privIn .65s ease both}
@keyframes privIn{from{opacity:0}to{opacity:1}}
.doorway .eyebrow{font-family:var(--mono);font-size:.82rem;letter-spacing:.26em;text-transform:uppercase;color:var(--red);margin-bottom:1.1rem}
.doorway h2{font-family:var(--disp);font-weight:800;font-size:clamp(38px,5.6vw,76px);line-height:.98;letter-spacing:-.02em;color:var(--gate-ink);margin-bottom:1.1rem}
.doorway p{font-family:var(--serif);font-size:1.36rem;line-height:1.62;color:var(--gate-ink2);max-width:40ch;margin:0 auto 2rem}
.gate-context{font-family:var(--hand);font-size:1.6rem;color:var(--red);min-height:1.2em;margin-bottom:.6rem}
.gate{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.gate input{background:var(--gate-paper2);border:1px solid rgba(34,29,24,.18);color:var(--gate-ink);font-family:var(--mono);font-size:1.02rem;padding:.92rem 1.2rem;border-radius:8px;min-width:250px;outline:none}
.gate input:focus{border-color:var(--red)}
.gate input.bad{animation:gateBad .55s}
@keyframes gateBad{0%,100%{border-color:rgba(34,29,24,.18)}25%,75%{border-color:var(--red);box-shadow:0 0 0 3px rgba(178,52,44,.25)}}
.gate button{background:var(--red);color:#fff;border:none;font-family:var(--mono);font-weight:700;font-size:.88rem;letter-spacing:.12em;text-transform:uppercase;padding:.95rem 1.6rem;border-radius:8px;cursor:pointer;touch-action:manipulation}
.gate-note{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--gate-ink2);opacity:.78;margin-top:1.3rem}
.gate-msg{font-family:var(--hand);font-size:1.3rem;color:var(--red);margin-top:.9rem;min-height:1.4em}

/* ---------- FOOTER ---------- */
.footer{background:var(--ink);color:var(--paper);padding:clamp(4rem,10vh,7rem) clamp(1.4rem,6vw,6rem);text-align:center}
.footer .foot-mark{color:var(--red);font-size:1.4rem;margin-bottom:1.4rem;opacity:.8}
.footer .credit{font-family:var(--serif);color:#cfc7b6;font-size:1rem;line-height:1.7}
.footer .stamp-line{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:#8a8378;margin-top:1.2rem}

/* ---------- AMBIENT MUSIC TOGGLE ---------- */
.music-btn{position:fixed;right:18px;bottom:18px;z-index:90;width:42px;height:42px;border-radius:50%;
  background:rgba(28,26,23,.62);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .25s,transform .2s}
.music-btn:hover{transform:scale(1.08);background:rgba(28,26,23,.8)}
.music-btn .bars{display:flex;align-items:flex-end;gap:2.5px;height:16px}
.music-btn .bars i{width:2.5px;height:5px;background:var(--paper);border-radius:2px;transition:height .2s}
.music-btn.on{background:var(--red);border-color:var(--red)}
.music-btn.on .bars i{animation:eq .9s ease-in-out infinite}
.music-btn.on .bars i:nth-child(2){animation-delay:.15s}.music-btn.on .bars i:nth-child(3){animation-delay:.3s}.music-btn.on .bars i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:4px}50%{height:15px}}

/* ---------- PRIVATE: POSTCARD LETTER ---------- */
.private{position:fixed;inset:0;z-index:800;background:var(--cream);overflow-y:auto;overscroll-behavior:contain;
  background-image:radial-gradient(rgba(120,100,70,.05) 1px,transparent 1px);background-size:4px 4px}
.private[hidden]{display:none}
.priv-close{position:fixed;top:16px;right:16px;z-index:7;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;background:var(--cream);border:1px solid var(--red);color:var(--red);padding:1em 1.3em;min-height:44px;border-radius:2px;cursor:pointer}   /* >=44px touch target */
.pc-page{max-width:680px;margin:0 auto;padding:clamp(3.5rem,8vh,6rem) clamp(1.4rem,6vw,2.5rem) 6rem}
.pc-arch{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:.4rem}
.pc-archsub{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:var(--graphite);margin-bottom:1.8rem}
/* flip card */
.pc-card{position:relative;aspect-ratio:3/2;max-width:440px;cursor:pointer;perspective:1600px;margin:0 0 2.4rem}
.pc-card .inner{position:absolute;inset:0;transition:transform .8s cubic-bezier(.4,.1,.2,1);transform-style:preserve-3d;transform:rotate(-1.4deg)}
.pc-card.flip .inner{transform:rotateY(180deg) rotate(-1deg)}
.pc-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:3px;box-shadow:0 16px 38px rgba(60,45,25,.3);background:#fff;overflow:hidden}
.pc-face.front{background-size:cover;background-position:center}
.front .placard{position:absolute;left:12px;bottom:12px;background:rgba(244,235,221,.92);padding:.25rem .65rem;font-family:var(--hand);font-size:1.6rem;color:var(--ink);border-radius:2px;line-height:1}
.front .flipnote{position:absolute;right:12px;bottom:14px;font-family:var(--mono);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(28,26,23,.55);padding:.25rem .5rem;border-radius:2px}
.front .mono-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--hand);font-size:5rem;color:var(--red);background:#e7dcc6}
.pc-back{transform:rotateY(180deg);background:var(--paper);padding:1.2rem 1.3rem;display:flex;flex-direction:column}
.pc-back .ruled{position:absolute;inset:0;background:repeating-linear-gradient(transparent,transparent 31px,rgba(120,100,70,.13) 31px,rgba(120,100,70,.13) 32px);opacity:.5}
.pc-back .to{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);position:relative;margin-bottom:.4rem}
.pc-back .ln{font-family:var(--hand);font-size:1.6rem;line-height:1.2;color:var(--ink);position:relative;flex:1;min-height:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}   /* clamp so a long teaser can't push the signature off the card */
.pc-back .sign{font-family:var(--hand);font-size:1.4rem;color:var(--blue);position:relative;text-align:right}
/* per-city postmark stamped on the back */
.postmark{position:absolute;top:10px;right:10px;width:84px;height:84px;transform:rotate(-13deg);opacity:.42;color:var(--blue);pointer-events:none;z-index:2}
.postmark svg{width:100%;height:100%;overflow:visible}
.postmark .pm-ring{fill:none;stroke:currentColor;stroke-width:2.4}
.postmark .pm-ring.pm-thin{stroke-width:1.1}
.postmark .pm-arc{fill:currentColor;font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.5px}
.postmark .pm-city{fill:currentColor;font-family:var(--disp);font-weight:700;font-size:17px;text-transform:uppercase}
.postmark .pm-date{fill:currentColor;font-family:'Space Mono',monospace;font-size:7px;letter-spacing:1px}
.postmark .pm-cancel path{fill:none;stroke:currentColor;stroke-width:1.6;opacity:.7}
/* the full letter */
.pc-salu{font-family:var(--hand);font-size:2rem;color:var(--ink);margin:0 0 1rem}
.pc-letter p{font-family:var(--serif);font-size:1.18rem;line-height:1.7;color:var(--ink);margin-bottom:1.1em}
.pc-letter .last{font-style:italic;color:var(--graphite)}
.pc-sign{font-family:var(--hand);font-size:1.9rem;color:var(--blue);margin-top:1.4rem}
.pc-encl{font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--graphite);margin:3rem 0 1.2rem}
/* enclosed prints — gallery wall (masonry), natural orientation, develop-in */
.pc-prints{columns:3;column-gap:1rem}
.pc-print{break-inside:avoid;margin:0 0 1rem;background:#fff;padding:8px 8px 11px;box-shadow:0 12px 26px rgba(60,45,25,.28);cursor:zoom-in;transition:transform .35s,box-shadow .35s;display:block}
.pc-print:nth-child(3n){transform:rotate(1.3deg)}.pc-print:nth-child(3n+2){transform:rotate(-1.4deg)}
.pc-print:hover{transform:scale(1.04) rotate(0);box-shadow:0 18px 38px rgba(60,45,25,.4);position:relative;z-index:3}
/* develop-in: photos default VISIBLE; JS briefly adds .developing so they fade up from blur (can never leave them hidden) */
.pc-print img{width:100%;height:auto;display:block;opacity:1;filter:none;transition:opacity .9s ease,filter 1.1s ease}
.pc-prints.developing .pc-print img{opacity:0;filter:saturate(.12) blur(9px)}
.pc-print:nth-child(6n+1) img{transition-delay:.04s}.pc-print:nth-child(6n+2) img{transition-delay:.12s}.pc-print:nth-child(6n+3) img{transition-delay:.2s}
.pc-print:nth-child(6n+4) img{transition-delay:.28s}.pc-print:nth-child(6n+5) img{transition-delay:.36s}.pc-print:nth-child(6n) img{transition-delay:.44s}
.pc-print .d{font-family:var(--mono);font-size:.5rem;color:var(--graphite);margin-top:6px}

/* private photo lightbox */
#plb{position:fixed;inset:0;z-index:850;background:rgba(28,24,18,.94);display:none;align-items:center;justify-content:center;touch-action:none;overscroll-behavior:contain}   /* swipes navigate photos; they must never scroll the page behind */
#plb.show{display:flex}#plb[hidden]{display:none}
#plb img{max-width:92%;max-height:88%;object-fit:contain;transition:opacity .25s;box-shadow:0 20px 60px rgba(0,0,0,.6)}
#plb .nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;color:#f4ebdd;font-size:2.2rem;opacity:.7;cursor:pointer;padding:1rem}
#plb .prev{left:1rem}#plb .next{right:1rem}#plb .x{position:absolute;top:.4rem;right:.5rem;background:none;border:none;color:#f4ebdd;font-size:1.4rem;cursor:pointer;padding:.7rem 1rem;min-width:44px;min-height:44px}   /* >=44px touch target */
#plb .cap{position:absolute;bottom:1.4rem;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:#e7dcc6}

/* ---------- MOBILE ---------- */
@media(max-width:900px){
  .hero-mid h1{font-size:clamp(2.4rem,9vw,4.4rem);max-width:15ch}
  .hero-quote{font-size:clamp(1.2rem,4.4vw,1.7rem);max-width:26ch}
  .hero-sign{font-size:clamp(2.3rem,8vw,3.2rem)}
  .hero-route{width:min(360px,80vw)}
  /* a touch more wash on phones — the photo crop is tighter and the text covers more of it */
  .hero-wash{background:
    radial-gradient(ellipse 120% 78% at 50% 44%,rgba(246,242,234,.3) 0%,rgba(246,242,234,.16) 46%,rgba(246,242,234,.05) 82%),
    linear-gradient(180deg,rgba(246,242,234,.38) 0%,transparent 24%,transparent 64%,rgba(246,242,234,.72) 100%)}
}
@media(max-width:760px){
  .prologue{display:block}.prologue .side,.prologue .prose,.prologue .margin{grid-column:auto;max-width:none}.prologue .margin{margin-top:1.2rem}
  .hero-mid h1{font-size:clamp(2.3rem,11vw,3.7rem);max-width:16ch}
  .hero-top{flex-wrap:wrap;gap:.3rem}
  .hero-top .htop-date{display:none}   /* keep the top line clean on small phones */
  .hero-sign{font-size:clamp(2.2rem,11vw,3rem)}
  .hero-quote{font-size:clamp(1.15rem,5vw,1.5rem);max-width:90vw}
  .hero-ticker-row{font-size:1.25rem;gap:1.7rem}
  .leg{padding:3rem 1.4rem}
  .leg .t{font-size:clamp(34px,11vw,132px)}   /* floor low enough that SWITZERLAND fits one line at 360-430px */
  .leg .lead{max-width:none}
  .collage{grid-template-columns:repeat(2,1fr)}
  .flight-frame iframe{height:62vh;max-height:480px}
  .flight-full{display:block;text-align:center}   /* the full-screen map button shows on phones */
  .fact,.fact:nth-child(even){flex-direction:column;text-align:left;margin-left:0;gap:.3rem}
  .pc-prints{columns:2}
  .gate input{min-width:200px;flex:1}   /* keep the field typeable; the button wraps to its own row instead */
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.05ms!important}}