/* ════════════════════════════════════════════════════════════════════════════
   picker-cards.css — the template picker, and the brochures on it
   ════════════════════════════════════════════════════════════════════════════
   Shared by app.html (the chooser) and index.html (the front page's
   collection). It used to live inline in app.html; the moment the front page
   started showing the same five brochures, one copy became the only way the
   two could not drift apart.

   Nothing in here is scoped to either host. The only rule that names the app's
   overlay is #tf-pick.open, which simply never matches on the front page.
*/
/* ── TEMPLATE PICKER ─────────────────────────────────────────────────────
   A cylinder of folded sheets. The cards are pinned around a ring and the
   ring turns, so a card does not slide out of the way — it rolls, turns its
   edge to you, and shows you its back. And because a trifold has two sides,
   it has two: the OUTSIDE (flap, back cover, front cover) and the INSIDE
   (the day-by-day spread). Roll past 90° and you are looking at the inside
   of the brochure, because that is what is there.

   Geometry, derived rather than tuned:
     n cards, evenly spaced   γ = 360/n
     the ring holds           translateZ(-R)
     panel k of a side        rotateY(i·γ + spin) translateZ(R) · hinge(k)
       hinge(-1)              translateX(-p/2) rotateY(-fold) translateX(-p/2)
       hinge( 0)              —
       hinge(+1)              translateX(+p/2) rotateY(+fold) translateX(+p/2)
     the back side adds       … rotateY(180deg) before the hinge

   translateZ(-R) on the ring lands the front card's CENTRE panel back on the
   stage plane at z = 0, so it is projected 1:1 — no scale, nothing to
   resample, nothing to blur.

   WHY THE TURN AND THE CULLING BOTH LIVE ON THE PANEL. Two things, one
   measured here and one measured in isolation:

     1. LOAD-BEARING, and held by a control in tests/picker-cylinder-probe.js:
        backface-visibility on the PANELS is what stops you reading the inside
        of the sheet through the outside. Take it off and the back face's outer
        panels — which the mirrored hinge brings toward the viewer — cover the
        front's. The parent cannot do this job: once the panels are the 3D
        children they are the things that get painted, so culling their .tp-face
        culls nothing.

     2. Blink will not always inherit the flip from an ancestor. An element
        carrying an overlay child — an absolutely-positioned box covering it, or
        a ::before/::after doing the same, which every panel here has — stops
        flipping when the rotation sits on an ancestor rather than on itself:

          nothing inside          → flips
          absolute element child  → does NOT flip
          ::after overlay         → does NOT flip

        That is why the turn is written on the panel. It is a narrower rule than
        it first looked: an earlier build of this comment claimed any element
        with any children behaves that way, and that is not what the isolation
        harness showed. Writing the turn on the panel is correct under either reading,
        so it stays there and the claim stays small. */
#tf-pick{position:fixed;inset:0;z-index:100060;background:radial-gradient(120% 90% at 50% 0%,#10294E,#060F1D 62%);
  display:none;flex-direction:column;overflow-y:auto;overflow-x:hidden;color:#FBF7F1}
#tf-pick.open{display:flex}
.tp-head{text-align:center;padding:30px 20px 4px}
.tp-head h2{font-family:Fraunces,Georgia,serif;font-weight:600;margin:0 0 8px;
  font-size:clamp(23px,3.2vw,34px);letter-spacing:-.4px;color:#FBF7F1}
.tp-head p{margin:0 auto;max-width:540px;color:rgba(251,247,241,.62);font-size:14px;line-height:1.6}

.tp-stage{position:relative;height:540px;margin:14px auto 0;width:100%;max-width:1400px;
  --tp-fold:8deg;                     /* how far the outer panels swing back */
  --tps:1;                            /* every size inside a sheet scales by this */
  perspective:1800px;perspective-origin:50% 45%;
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.tp-stage.drag{cursor:grabbing}
/* the floor the cylinder turns on */
.tp-floor{position:absolute;left:50%;top:45%;width:900px;height:160px;margin:150px 0 0 -450px;
  pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.55),rgba(0,0,0,0) 72%)}
/* The ring holds ONE thing: translateZ(-R). It never rotates — see above. */
.tp-ring{position:absolute;top:45%;left:50%;width:0;height:0;
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
/* The card is a grouping wrapper and a click target, nothing more. It has no
   transform, so pointer-events:none keeps its flat box from swallowing clicks
   in the middle of the stage; the panels take them and the click bubbles up. */
.tp-card{position:absolute;width:540px;height:417px;margin:-208px 0 0 -270px;
  border:0;padding:0;background:none;cursor:pointer;pointer-events:none;
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.tp-card:focus-visible{outline:2px solid #33B5AB;outline-offset:14px}
.tp-face{display:block;position:absolute;inset:0;
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
/* Every panel sits at the CARD's centre and is moved into place by its own
   transform. position:absolute is load-bearing twice: it takes the panels out
   of flow, and it makes each one the containing block its own tape and waves
   need. */
.tp-pan{position:absolute;top:0;height:100%;left:50%;width:33.3334%;margin-left:-16.6667%;
  overflow:hidden;background:#FBF7F1;pointer-events:auto;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .95s cubic-bezier(.32,.72,.24,1),filter .45s ease;
  box-shadow:0 26px 56px rgba(0,0,0,.5),0 8px 18px rgba(0,0,0,.34)}
.tp-stage.drag .tp-pan{transition:none}
/* Light, baked to match the fold: the centre panel faces you, the outer two
   turn away and fall off toward their outer edges. */
.tp-pan::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:6}
.tpb > .tp-pan:nth-child(1)::after{background:linear-gradient(90deg,rgba(2,12,28,.3),rgba(2,12,28,0) 66%)}
.tpb > .tp-pan:nth-child(2)::after{background:linear-gradient(104deg,rgba(255,255,255,.15),rgba(255,255,255,0) 42%,rgba(2,12,28,.07))}
.tpb > .tp-pan:nth-child(3)::after{background:linear-gradient(270deg,rgba(2,12,28,.3),rgba(2,12,28,0) 66%)}
/* Everything that is not the front card recedes in LIGHT, never in position —
   the ring already owns position — and never as opacity or a filter on the
   card. Both are grouping properties: they force transform-style:flat on
   whatever they are set on, which would collapse the card out of the 3D scene.
   A veil painted inside each panel costs nothing and reads truer anyway: paper
   in shadow is dark, not see-through. */
.tp-pan::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:7;
  background:#0B1F3A;opacity:0;transition:opacity .45s ease}
.tp-card.off .tp-pan::before{opacity:.62}
.tp-card.far .tp-pan::before{opacity:.9}
.tp-card.far .tp-pan{filter:blur(1.6px)}

.tp-cap{text-align:center;margin-top:2px;min-height:62px}
/* DEFAULT OFF, and this is the SECOND of two guards rather than the only one.
   The tier line is the front page's — inside the app the traveller has already
   bought, and the picker has its own gate. tfPickLayout now declines to render
   it unless the caption asks by carrying data-tiers, so this rule exists only
   to catch a host that renders it and forgets to style it. */
.tp-tier{display:none}
[data-tiers] .tp-tier{display:inline-block}
.tp-cap b{font-family:Syne,sans-serif;font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase}
.tp-cap span{display:block;font-size:12px;color:rgba(251,247,241,.62);margin-top:4px}
.tp-cap em{display:block;font-size:10.5px;color:rgba(251,247,241,.42);margin-top:4px;font-style:normal}
.tp-ctr{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;flex-wrap:wrap;padding:0 16px}
.tp-arrow{width:42px;height:42px;border-radius:99px;border:1px solid rgba(251,247,241,.14);
  background:rgba(251,247,241,.06);color:#FBF7F1;font-size:16px;cursor:pointer;display:grid;place-items:center}
.tp-arrow:hover{background:rgba(251,247,241,.13)}
.tp-go{background:linear-gradient(135deg,#1E8E82,#33B5AB);border:none;color:#00232B;
  font-family:Syne,sans-serif;font-weight:800;font-size:13px;padding:14px 30px;border-radius:12px;
  cursor:pointer;box-shadow:0 10px 26px rgba(51,181,171,.28)}
.tp-go[disabled]{background:rgba(251,247,241,.1);color:rgba(251,247,241,.42);
  box-shadow:none;cursor:default}
.tp-hint,.tp-count{text-align:center;font-family:Syne,sans-serif;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(251,247,241,.3);font-weight:800;margin-top:14px}
.tp-dots{display:flex;gap:7px;justify-content:center;margin-top:16px}
.tp-dot{width:7px;height:7px;border-radius:99px;background:rgba(251,247,241,.22);cursor:pointer;
  border:0;padding:0;transition:width .3s,background .3s}
.tp-dot.on{background:#33B5AB;width:22px}
.tp-skip{display:block;margin:16px auto 30px;background:none;border:0;color:rgba(251,247,241,.45);
  font-size:12px;cursor:pointer;text-decoration:underline;font-family:inherit}
.tp-x{position:absolute;top:14px;left:16px;width:36px;height:36px;border-radius:99px;
  border:1px solid rgba(251,247,241,.3);background:rgba(6,15,29,.6);color:#FBF7F1;font-size:15px;
  cursor:pointer;z-index:5}

/* ═══ THE SHEET ITSELF — .tpb, three panels wide ═══════════════════════════
   Every class here is prefixed so none of it can collide with, or inherit
   from, the 21,000 lines of app CSS above it. */
.tpb{position:absolute;inset:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.tpb-k{font-family:Syne,sans-serif;font-size:calc(7px * var(--tps));font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:#255194}
.tpb-hh{font-family:Fraunces,serif;font-weight:600;font-size:calc(15px * var(--tps));color:#00104F;
  margin:calc(6px * var(--tps)) 0 calc(12px * var(--tps));line-height:1.1}
.tpb-rule{width:calc(28px * var(--tps));height:calc(2px * var(--tps));background:#33B5AB}
.tpb-eye{font-family:Syne,sans-serif;font-size:calc(6.5px * var(--tps));font-weight:800;letter-spacing:.22em;
  text-transform:uppercase}
.tpb-dts{font-family:Syne,sans-serif;font-size:calc(7px * var(--tps));font-weight:700;letter-spacing:.13em;margin-top:calc(10px * var(--tps))}
.tpb-mark{margin-top:auto;font-family:Syne,sans-serif;font-weight:800;font-size:calc(10.5px * var(--tps));
  text-align:center;letter-spacing:.3px}
.tpb-mark .t{color:#33B5AB} .tpb-mark .f{color:#F39883;font-style:italic}
.tpb-waves{position:absolute;left:0;right:0;bottom:0;height:calc(34px * var(--tps));z-index:2}

/* — the Keepsake outside — */
.tpb-flap{background:#FBF7F1;padding:calc(19px * var(--tps)) calc(14px * var(--tps));display:flex;flex-direction:column}
.tpb-crew{display:flex;gap:calc(7px * var(--tps));margin-bottom:calc(10px * var(--tps));align-items:flex-start}
.tpb-av{width:calc(21px * var(--tps));height:calc(21px * var(--tps));border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:calc(11px * var(--tps));background:#EDF2FA;border:1.5px solid #fff;box-shadow:0 2px 5px rgba(0,16,79,.14)}
.tpb-crew b{font-size:calc(9px * var(--tps));color:#00104F;font-weight:600}
.tpb-crew i{font-style:normal;font-size:calc(8.5px * var(--tps));color:#8AA0C4;margin-left:calc(3px * var(--tps))}
.tpb-task{font-size:calc(8px * var(--tps));color:#556FA8;margin-top:calc(2px * var(--tps));line-height:1.3}
.tpb-sig{margin-top:auto;font-family:Fraunces,serif;font-style:italic;font-size:calc(13px * var(--tps));
  color:#F39883;transform:rotate(-6deg);text-align:center;padding-bottom:calc(6px * var(--tps))}
.tpb-bk{padding:calc(19px * var(--tps)) calc(14px * var(--tps));color:#EAF2FF;display:flex;flex-direction:column;
  background:linear-gradient(168deg,#2A5A9E,#1B3F73 62%,#14304F)}
.tpb-bk .tpb-k{color:#33B5AB}
.tpb-bk .tpb-hh{color:#fff}
.tpb-m{display:flex;gap:calc(7px * var(--tps));font-size:calc(8.5px * var(--tps));margin-bottom:calc(8px * var(--tps));align-items:flex-start;line-height:1.4}
.tpb-m i{font-family:Fraunces,serif;font-style:italic;color:#F39883;font-size:calc(11px * var(--tps));flex:0 0 calc(9px * var(--tps));line-height:1}
.tpb-cov{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(19px * var(--tps)) calc(13px * var(--tps));background:linear-gradient(160deg,#2E639F,#1B3F73 55%,#102845)}
.tpb-photo{width:82%;aspect-ratio:4/3.3;border:3.5px solid #fff;border-radius:calc(3px * var(--tps));
  background:linear-gradient(155deg,#9BCBE8,#4E8CBE 44%,#2A5A8E);
  box-shadow:0 9px 20px rgba(0,0,0,.42);margin-bottom:calc(12px * var(--tps));transform:rotate(-1.4deg);
  position:relative;overflow:hidden}
.tpb-cov .tpb-rule{margin-bottom:calc(8px * var(--tps))}
.tpb-cov .tpb-eye{color:#F8C3B6;margin-bottom:calc(7px * var(--tps))}
.tpb-fam{font-family:Fraunces,serif;font-weight:600;font-size:calc(19px * var(--tps));color:#fff;line-height:1.05}
.tpb-cov .tpb-dts{color:#BFD6F5}
.tpb-tape{position:absolute;top:calc(14px * var(--tps));right:-calc(24px * var(--tps));width:calc(92px * var(--tps));height:calc(18px * var(--tps));transform:rotate(36deg);
  background:repeating-linear-gradient(45deg,rgba(243,152,131,.85) 0 calc(5px * var(--tps)),rgba(248,195,182,.85) calc(5px * var(--tps)) calc(10px * var(--tps)));opacity:.92}

/* — the Classic outside: an information sheet on cream stock — */
.tpb-hi{padding:calc(17px * var(--tps)) calc(13px * var(--tps));display:flex;flex-direction:column;overflow:hidden}
.tpb-h{margin:calc(6px * var(--tps)) 0 calc(8px * var(--tps))}
.tpb-h b{display:block;font-family:Fraunces,serif;font-weight:600;font-size:calc(10.5px * var(--tps));color:#00104F;
  line-height:1.15;margin-bottom:calc(2px * var(--tps))}
.tpb-h span{display:block;font-size:calc(7.5px * var(--tps));color:#556FA8;line-height:1.4}
.tpb-rt{display:flex;justify-content:space-between;align-items:baseline;gap:calc(6px * var(--tps));
  font-size:calc(8px * var(--tps));color:#00104F;padding:calc(2.5px * var(--tps)) 0;border-bottom:1px solid rgba(0,16,79,.07)}
.tpb-rt i{font-style:normal;font-size:calc(7px * var(--tps));color:#8AA0C4;flex:0 0 auto}
.tpb-map{padding:calc(17px * var(--tps)) calc(13px * var(--tps));display:flex;flex-direction:column}
/* ── THE PHOTO TRIP CARD ────────────────────────────────────────────────────
   The miniature of photo-render.js. Every class here is the card-scale version
   of a real one on the printed sheet, so what the picker promises is what the
   sheet delivers.

   NOT ONE OF THESE SETS position, inset OR size ON A .tp-pan. `.tp-pan` places
   every panel with left:50%, a 33.3334% width and a negative margin, and a
   panel class that touches any of those destroys the fold. `.tpb-map` did it
   with position:relative; `.tpb-phcov` did it with inset:0, which displaced
   the front cover 270px left and slid it underneath its neighbours — the
   build Olman photographed. Style the INSIDE of a panel, never its
   placement. */
.tpb-map{padding:calc(17px * var(--tps)) calc(13px * var(--tps));display:flex;flex-direction:column}
.tpb-phcov::after{content:'';position:absolute;left:0;right:0;bottom:0;height:62%;
  background:linear-gradient(to top,rgba(6,14,24,.92),rgba(6,14,24,0))}
.tpb-cm{display:flex;gap:calc(5px * var(--tps));font-size:calc(8px * var(--tps));color:#556FA8;margin-bottom:calc(5px * var(--tps));line-height:1.35}
.tpb-cm i{font-style:normal;font-family:Fraunces,serif;color:#F39883;font-size:calc(9px * var(--tps));flex:0 0 calc(8px * var(--tps))}
.tpb-cm b{color:#00104F;font-weight:600}
.tpb-mapbox{margin:calc(8px * var(--tps)) 0 calc(4px * var(--tps));background:#F2F7FC;border-radius:calc(5px * var(--tps));padding:calc(6px * var(--tps));flex:1;
  display:grid;place-items:center;border:1px solid rgba(0,16,79,.06)}
.tpb-mapbox svg{width:100%;height:auto}
.tpb-map .tpb-mark{color:#00104F;font-size:calc(10px * var(--tps))}
.tpb-clcov{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(19px * var(--tps)) calc(13px * var(--tps));background:linear-gradient(165deg,#F7FAFE,#E6EFF9 60%,#D8E6F4)}
.tpb-clcov .tpb-eye{color:#255194;margin-bottom:calc(9px * var(--tps))}
.tpb-ttl{font-family:Fraunces,serif;font-weight:600;font-size:calc(21px * var(--tps));color:#00104F;line-height:1.06}
.tpb-clcov .tpb-rule{background:#F39883;width:calc(30px * var(--tps));margin:calc(11px * var(--tps)) 0 calc(12px * var(--tps))}
.tpb-stats{display:flex;gap:calc(12px * var(--tps));font-family:Syne,sans-serif;font-size:calc(6.5px * var(--tps));
  letter-spacing:.12em;text-transform:uppercase;color:#8AA0C4;font-weight:700}
.tpb-stats b{display:block;font-family:Fraunces,serif;font-size:calc(14px * var(--tps));color:#255194;
  letter-spacing:0;text-transform:none;margin-bottom:calc(1px * var(--tps))}
.tpb-clcov .tpb-dts{color:#8AA0C4;margin-top:calc(13px * var(--tps))}

/* — the INSIDE spread, which is what a card shows once it rolls past 90° — */
.tpb.insd > .tp-pan{background:#12294B}
.tpb-day{padding:calc(14px * var(--tps)) calc(10px * var(--tps));display:flex;flex-direction:column;gap:calc(9px * var(--tps));overflow:hidden}
.tpb-d{border-left:2px solid #F39883;padding-left:calc(8px * var(--tps))}
.tpb.insd .tpb-d{border-left-color:#33B5AB}
.tpb-dn{font-family:Syne,sans-serif;font-size:calc(6.5px * var(--tps));font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:#F39883}
.tpb.insd .tpb-dn{color:#33B5AB}
.tpb-dt{font-family:Fraunces,serif;font-weight:600;font-size:calc(10.5px * var(--tps));color:#00104F;
  line-height:1.15;margin-top:calc(2px * var(--tps))}
.tpb.insd .tpb-dt{color:#fff}
.tpb-dp{font-size:calc(7px * var(--tps));color:#8AA0C4;margin-bottom:calc(3px * var(--tps))}
.tpb-de{font-size:calc(7.5px * var(--tps));color:#556FA8;line-height:1.45}
.tpb.insd .tpb-de{color:#A9C3E4}
.tpb-de b{color:#00104F;font-weight:600;font-size:calc(7px * var(--tps))}
.tpb.insd .tpb-de b{color:#EAF2FF}

/* — a template that does not exist yet, drawn as an UNPRINTED trifold so it
     folds like every other card instead of being a modal on the stage — */
.tpb.soonx > .tp-pan{background:linear-gradient(168deg,#27548A,#17355C)}
.tpb-soon{padding:calc(19px * var(--tps)) calc(14px * var(--tps));display:flex;flex-direction:column}
.tpb-soon .tpb-k{color:#9CC2EE}
.tpb-sm{font-size:calc(8.5px * var(--tps));color:rgba(251,247,241,.82);line-height:1.55;margin:calc(7px * var(--tps)) 0 calc(10px * var(--tps))}

/* ── THE COLORING TRIP CARD ────────────────────────────────────────────────
   Black line on white paper, because that is literally what the template is.
   .tpb-ink overrides the two dark panels the other sheets use — the back cover
   and the cover — so all three panels read as the same sheet of paper. Every
   size goes through --tps like the rest of the picker, or the type overflows
   the panel at the phone breakpoint. */
.tpb-ink .tp-pan{background:#FBF7F1;color:#12314F}
.tpb-ink .tpb-k{color:#8A93A0}
.tpb-ink .tpb-hh{color:#12314F}
.tpb-ink .tpb-rule{background:#12314F}
.tpb-face{width:calc(21px * var(--tps));height:calc(21px * var(--tps));border-radius:50%;flex:0 0 auto;
  border:calc(1.5px * var(--tps)) solid #12314F;background:#fff}
.tpb-ink .tpb-crew b{color:#12314F;font-weight:700;letter-spacing:.06em}
.tpb-ink .tpb-crew i{color:#8A93A0}
.tpb-ink .tpb-task{color:#42586B}
.tpb-plate{height:calc(15px * var(--tps));border:calc(1.5px * var(--tps)) solid #12314F;
  border-radius:calc(3px * var(--tps));margin:calc(4px * var(--tps)) 0;background:#fff}
.tpb-spot{font-size:calc(8px * var(--tps));color:#12314F;margin:calc(3px * var(--tps)) 0;line-height:1.35}
.tpb-spot b{font-weight:600}
.tpb-covink{background:#FBF7F1 !important;padding:calc(14px * var(--tps))}
.tpb-covink .tpb-eye{color:#8A93A0}
.tpb-covink .tpb-dts{color:#42586B}
.tpb-otitle{font-family:Fraunces,serif;font-weight:800;font-size:calc(16px * var(--tps));line-height:1.05;
  text-align:center;color:transparent;-webkit-text-stroke:calc(.7px * var(--tps)) #12314F;
  margin:calc(6px * var(--tps)) 0}
.tpb-sm2{font-family:Syne,sans-serif;font-size:calc(6px * var(--tps));font-weight:800;letter-spacing:.16em;
  color:#42586B;text-align:center}
/* NO position:relative here. .tp-pan is already position:absolute, which is
   itself a containing block for .tpb-road, so declaring relative buys nothing
   — and it OVERRIDES the absolute, dropping all three panels back into flow so
   the card stacks vertically. Same bug as .p-flap / .p-cover / .p-cl-cover,
   caught by picker-cylinder-probe.js on the first run, which is the entire
   reason that assertion exists. */
.tpb-map{background:#FBF7F1;padding:calc(14px * var(--tps)) calc(11px * var(--tps));
  display:flex;flex-direction:column;overflow:hidden}
.tpb-cart{font-family:Fraunces,serif;font-weight:700;font-size:calc(9px * var(--tps));text-align:center;
  color:#12314F;border:calc(1.5px * var(--tps)) solid #12314F;border-radius:999px;
  padding:calc(3px * var(--tps)) calc(6px * var(--tps));margin-bottom:calc(8px * var(--tps))}
.tpb-stop{display:flex;align-items:center;gap:calc(5px * var(--tps));margin:calc(7px * var(--tps)) 0}
.tpb-stop i{font-style:normal;width:calc(13px * var(--tps));height:calc(13px * var(--tps));border-radius:50%;
  border:calc(1.5px * var(--tps)) solid #12314F;display:grid;place-items:center;flex:0 0 auto;
  font-size:calc(7px * var(--tps));font-weight:800;background:#fff}
.tpb-stop span{font-family:Syne,sans-serif;font-size:calc(6.5px * var(--tps));font-weight:800;letter-spacing:.08em;color:#12314F}
.tpb-road{position:absolute;left:0;right:0;top:52%;height:calc(2px * var(--tps));
  background:repeating-linear-gradient(90deg,#12314F 0,#12314F calc(5px * var(--tps)),
    transparent calc(5px * var(--tps)),transparent calc(9px * var(--tps)))}
.tpb-chips{display:flex;gap:calc(5px * var(--tps));flex-wrap:wrap;margin:calc(8px * var(--tps)) 0 calc(10px * var(--tps))}
.tpb-chip{font-family:Syne,sans-serif;font-size:calc(6.5px * var(--tps));letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:rgba(251,247,241,.72);border:1px solid rgba(251,247,241,.26);
  padding:calc(3px * var(--tps)) calc(7px * var(--tps));border-radius:calc(99px * var(--tps))}
.tpb-lines{margin-top:auto;display:flex;flex-direction:column;gap:calc(9px * var(--tps));padding-bottom:calc(4px * var(--tps))}
.tpb-lines i{display:block;height:calc(1px * var(--tps));background:rgba(251,247,241,.17)}
.tpb-lines i:nth-child(3n){width:72%} .tpb-lines i:nth-child(4n){width:88%}
.tpb-sooncov{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(19px * var(--tps)) calc(13px * var(--tps));background:linear-gradient(160deg,#2E639F,#1B3F73 55%,#102845)}
.tpb-ic{font-size:calc(30px * var(--tps));opacity:.9;margin-bottom:calc(12px * var(--tps))}
.tpb-lbl{font-family:Fraunces,serif;font-weight:600;font-size:calc(17px * var(--tps));color:rgba(251,247,241,.94);line-height:1.1}
.tpb-sooncov .tpb-rule{background:#F39883;margin:calc(11px * var(--tps)) 0 calc(9px * var(--tps))}
.tpb-sooncov .tpb-eye{color:#8FB4E2}


/* ── WHAT flat_413 ADDS ─────────────────────────────────────────────────────
   Everything above this line is the original card vocabulary. It was deleted
   once by a patch that replaced a REGION of this stylesheet by its start and
   end markers, and the end marker turned out to be 35 rules further down than
   intended — so the Classic, the Coloring Trip and the still-in-design card
   all lost their styling at the same moment, silently, while I was looking at
   the Photo Trip. Recovered from git and reinstated here.

   The lesson is the size of the edit, not the marker: replace a rule, or
   append after one. Never span. */

/* Photography. Every image on a card is a real file listed in TP_IMG. */
.tpb-img{background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:#DDE5EC}
/* A captioned photograph dropped into a text panel. Shared by the Classic and
   the Keepsake so the two cannot drift apart. */
.tpb-clphoto{position:relative;width:100%;height:calc(84px * var(--tps));
  border-radius:calc(3px * var(--tps));overflow:hidden;margin-top:calc(12px * var(--tps))}
.tpb-clphoto::after{content:'';position:absolute;left:0;right:0;bottom:0;height:50%;
  background:linear-gradient(to top,rgba(6,14,24,.8),rgba(6,14,24,0))}
.tpb-clphoto .tpb-phlab{left:calc(6px * var(--tps));bottom:calc(4px * var(--tps));
  font-size:calc(4.4px * var(--tps))}
.tpb-clcovimg{width:100%;height:calc(150px * var(--tps));border-radius:calc(3px * var(--tps));
  margin-bottom:calc(16px * var(--tps));box-shadow:0 calc(6px * var(--tps)) calc(16px * var(--tps)) rgba(0,16,79,.28)}

/* Line art for the Coloring card — stroked, never filled. A filled shape on a
   colouring sheet is a shape a child cannot colour, and that is the product. */
.tpb-art{color:#12314F;opacity:.92;display:block}
.tpb-artrow{display:flex;gap:calc(8px * var(--tps));align-items:stretch;margin-top:auto;
  padding-top:calc(9px * var(--tps))}
.tpb-artbox{flex:1 1 0;border:calc(1.2px * var(--tps)) dashed #C9BFB0;
  border-radius:calc(4px * var(--tps));padding:calc(6px * var(--tps));display:flex;
  align-items:center;justify-content:center}
.tpb-artbig{margin:calc(8px * var(--tps)) auto;color:#12314F;display:flex;justify-content:center}
.tpb-draw{flex:1 1 auto;margin-top:calc(10px * var(--tps));border:calc(1.3px * var(--tps)) dashed #C9BFB0;
  border-radius:calc(5px * var(--tps));display:flex;align-items:flex-start;justify-content:center;
  padding:calc(7px * var(--tps));min-height:calc(60px * var(--tps))}
.tpb-draw span{font-family:Syne,sans-serif;font-weight:800;font-size:calc(6px * var(--tps));
  letter-spacing:.16em;text-transform:uppercase;color:#A9B3BE}

/* a licence plate a child fills in: the state is printed, the number is not */
.tpb-plate2{border:calc(1.6px * var(--tps)) solid #12314F;border-radius:calc(3.5px * var(--tps));
  background:#fff;display:flex;align-items:center;gap:calc(6px * var(--tps));
  padding:calc(4px * var(--tps)) calc(6px * var(--tps));margin:calc(5px * var(--tps)) 0}
.tpb-plate2 b{font-family:Syne,sans-serif;font-weight:800;font-size:calc(7.5px * var(--tps));
  letter-spacing:.08em;color:#12314F;flex:0 0 auto}
.tpb-plate2 i{flex:1 1 auto;height:calc(10px * var(--tps));
  border-bottom:calc(1px * var(--tps)) dotted #9AA6B2}
.tpb-box{width:calc(7px * var(--tps));height:calc(7px * var(--tps));
  border:calc(1.2px * var(--tps)) solid #12314F;border-radius:calc(1.5px * var(--tps));
  flex:0 0 auto;margin-top:calc(1.5px * var(--tps))}
.tpb-spotrow{display:flex;gap:calc(5px * var(--tps));align-items:flex-start;
  margin-bottom:calc(5px * var(--tps));font-size:calc(7.6px * var(--tps));line-height:1.3;color:#12314F}
.tpb-mapstop{display:flex;align-items:center;gap:calc(6px * var(--tps));margin:calc(5px * var(--tps)) 0}
.tpb-mapstop i{font-style:normal;width:calc(14px * var(--tps));height:calc(14px * var(--tps));
  border-radius:50%;border:calc(1.4px * var(--tps)) solid #12314F;display:flex;align-items:center;
  justify-content:center;font-family:Syne,sans-serif;font-weight:800;font-size:calc(7px * var(--tps));
  color:#12314F;flex:0 0 auto;background:#fff}
.tpb-mapstop span{font-family:Syne,sans-serif;font-size:calc(6.6px * var(--tps));font-weight:800;
  letter-spacing:.07em;color:#12314F}

/* ── THE STILL-IN-DESIGN CARD ───────────────────────────────────────────────
   Dark, photographic and unlabelled. Two earlier versions of this card were
   wrong in opposite directions: the first was seven grey lines and the words
   "In development", which read as an unfinished build; the second named all
   four themes, which answered the only question the card should be asking.

   The photographs are <img> at width:100%/height:auto — never
   background-size:cover — because "show the full view of the pictures" is a
   requirement, not a preference, and a background can only ever show part. */
.tpb-mys{background:linear-gradient(172deg,#0C1A2E,#08121F 62%,#050C16);
  padding:calc(14px * var(--tps)) calc(13px * var(--tps));display:flex;
  flex-direction:column;justify-content:center;gap:calc(11px * var(--tps))}
.tpb-mysfig{position:relative;margin:0;line-height:0}
.tpb-mysimg{display:block;width:100%;height:auto;border-radius:calc(3px * var(--tps));
  background:#101E33;
  box-shadow:0 calc(6px * var(--tps)) calc(16px * var(--tps)) rgba(0,0,0,.55),
             0 0 0 calc(1px * var(--tps)) rgba(255,255,255,.10)}
/* A number, not a name. It says six things are coming and nothing else. */
/* On its own pill. As bare type it disappeared over a bright sky and a snow
   field — two of the six — which is the same legibility failure as ink-on-
   photograph everywhere else in this file. */
.tpb-mysnum{position:absolute;left:calc(6px * var(--tps));top:calc(6px * var(--tps));
  font-family:Syne,sans-serif;font-weight:800;font-size:calc(5.2px * var(--tps));
  letter-spacing:.16em;color:rgba(255,255,255,.94);line-height:1;
  background:rgba(6,14,26,.62);border-radius:calc(3px * var(--tps));
  padding:calc(3px * var(--tps)) calc(5px * var(--tps));
  backdrop-filter:blur(calc(2px * var(--tps)));-webkit-backdrop-filter:blur(calc(2px * var(--tps)))}
/* The ones not taken yet. */
.tpb-mysveil{border:calc(1.2px * var(--tps)) dashed rgba(143,182,228,.34);
  border-radius:calc(4px * var(--tps));height:calc(58px * var(--tps));display:flex;
  align-items:center;justify-content:center;background:rgba(143,182,228,.05)}
.tpb-mysveil span{font-size:calc(13px * var(--tps));color:rgba(143,182,228,.55)}
.tpb-mysmid{justify-content:space-between}
.tpb-mysline{font-family:Fraunces,serif;font-style:italic;font-size:calc(11px * var(--tps));
  line-height:1.4;color:#DCE7F5;text-align:center;padding:calc(6px * var(--tps)) 0}

/* the cover */
.tpb-myscov{overflow:hidden;background:#060E1A;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:calc(20px * var(--tps)) calc(15px * var(--tps))}
/* The photograph is there, and you cannot quite see it. That is the whole
   idea of the panel. */
.tpb-mysback{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.30;filter:blur(calc(3px * var(--tps))) saturate(.75)}
.tpb-mysveilbig{position:absolute;inset:0;
  background:radial-gradient(120% 70% at 50% 42%,rgba(6,14,26,.30),rgba(6,14,26,.93) 72%)}
.tpb-mysmark{position:relative;z-index:2;font-size:calc(24px * var(--tps));
  color:#7FC9C1;margin-bottom:calc(12px * var(--tps));line-height:1}
.tpb-mystitle{position:relative;z-index:2;font-family:Fraunces,serif;font-weight:600;
  font-size:calc(19px * var(--tps));line-height:1.1;color:#fff}
.tpb-mysrule{position:relative;z-index:2;width:calc(30px * var(--tps));
  height:calc(2px * var(--tps));background:#7FC9C1;border-radius:1px;
  margin:calc(12px * var(--tps)) 0}
.tpb-myssay{position:relative;z-index:2;font-family:Syne,sans-serif;font-weight:800;
  font-size:calc(5.4px * var(--tps));letter-spacing:.2em;text-transform:uppercase;
  color:rgba(220,231,245,.72);line-height:1.7}
.tpb-mysdots{position:relative;z-index:2;display:flex;gap:calc(6px * var(--tps));
  margin-top:calc(18px * var(--tps))}
.tpb-mysdots i{width:calc(7px * var(--tps));height:calc(7px * var(--tps));border-radius:50%;
  border:calc(1.2px * var(--tps)) solid rgba(127,201,193,.55)}

.tpb-pho{padding:calc(15px * var(--tps)) 0 calc(11px * var(--tps));display:flex;
  flex-direction:column;background:#F2F5F8;overflow:hidden}
.tpb-phbody{padding:0 calc(11px * var(--tps));display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.tpb-phtab{position:absolute;left:0;right:0;top:0;height:calc(15px * var(--tps));display:flex;
  align-items:center;justify-content:center;background:#16355C;color:#fff;font-family:Syne,sans-serif;
  font-weight:800;font-size:calc(5.2px * var(--tps));letter-spacing:.2em;text-transform:uppercase;z-index:8}

/* THE HERO IS 3:2, WHICH IS THE SHAPE OF THE PHOTOGRAPH. A 180-wide panel and
   a 440x300 source means 122px of height shows the WHOLE frame. The first
   version made it 82px, which cropped a landscape down to a band of sky and
   read as a flat gradient — a photograph that has been cropped past its
   subject is worse than no photograph. */
.tpb-phhero{position:relative;flex:0 0 auto;width:100%;height:calc(122px * var(--tps));overflow:hidden}
.tpb-phhero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(to top,rgba(6,14,24,.8),rgba(6,14,24,0))}
.tpb-phlab{position:absolute;left:calc(9px * var(--tps));bottom:calc(5px * var(--tps));z-index:3;
  color:#fff;font-family:Syne,sans-serif;font-weight:800;font-size:calc(4.6px * var(--tps));
  letter-spacing:.15em;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.tpb-phnum{position:absolute;right:calc(7px * var(--tps));top:calc(19px * var(--tps));z-index:4;
  font-family:Syne,sans-serif;font-weight:800;font-size:calc(38px * var(--tps));line-height:.8;
  color:rgba(255,255,255,.36);text-shadow:0 2px 8px rgba(0,0,0,.35)}
.tpb-phhead{font-family:Fraunces,serif;font-weight:600;font-size:calc(11px * var(--tps));color:#16355C;
  line-height:1.12;margin:calc(9px * var(--tps)) 0 calc(4px * var(--tps))}
.tpb-phrule{width:calc(22px * var(--tps));height:calc(2px * var(--tps));background:#F39883;
  border-radius:1px;margin-bottom:calc(6px * var(--tps))}
.tpb-phlead{font-size:calc(5.6px * var(--tps));line-height:1.5;color:#5B6773;margin:0 0 calc(8px * var(--tps))}
.tpb-phlead b{color:#16355C;font-weight:700}

/* the ringed inset: a white keyline inside the accent, because one ring alone
   disappears against a photograph of the same value */
.tpb-phrings{display:flex;gap:calc(8px * var(--tps));justify-content:center;
  margin:calc(-26px * var(--tps)) 0 calc(8px * var(--tps));position:relative;z-index:5}
.tpb-phring{width:calc(46px * var(--tps));height:calc(46px * var(--tps));border-radius:50%;
  box-shadow:0 0 0 calc(2.2px * var(--tps)) #fff,0 0 0 calc(4px * var(--tps)) #F39883,
  0 calc(3px * var(--tps)) calc(10px * var(--tps)) rgba(0,0,0,.38)}
.tpb-phring:nth-child(2){width:calc(38px * var(--tps));height:calc(38px * var(--tps));
  align-self:flex-end;margin-bottom:calc(4px * var(--tps))}
.tpb-phcaps{display:flex;gap:calc(8px * var(--tps));justify-content:center;
  font-style:italic;font-size:calc(4.8px * var(--tps));color:#7A8794;margin-bottom:calc(9px * var(--tps))}

/* the honeycomb, laid out rather than absolutely placed so it cannot drift */
.tpb-phcomb{display:flex;flex-wrap:wrap;gap:calc(3px * var(--tps));justify-content:center;
  margin-bottom:calc(8px * var(--tps))}
.tpb-phhex{width:calc(46px * var(--tps));height:calc(40px * var(--tps));
  -webkit-clip-path:polygon(100% 50%,75% 100%,25% 100%,0% 50%,25% 0%,75% 0%);
  clip-path:polygon(100% 50%,75% 100%,25% 100%,0% 50%,25% 0%,75% 0%)}
.tpb-phhex:nth-child(3){margin-top:calc(-14px * var(--tps))}

.tpb-phstrip3{display:flex;gap:calc(4px * var(--tps));margin-bottom:calc(8px * var(--tps))}
.tpb-phstrip3 i{flex:1 1 0;height:calc(38px * var(--tps));border-radius:calc(2px * var(--tps))}
.tpb-phwide{width:100%;height:calc(58px * var(--tps));border-radius:calc(2px * var(--tps));
  margin-bottom:calc(8px * var(--tps));position:relative;overflow:hidden}
.tpb-phwide::after{content:'';position:absolute;left:0;right:0;bottom:0;height:56%;
  background:linear-gradient(to top,rgba(6,14,24,.8),rgba(6,14,24,0))}
.tpb-phwide .tpb-phlab{left:calc(6px * var(--tps));bottom:calc(4px * var(--tps));
  font-size:calc(4.2px * var(--tps))}

.tpb-phcard{margin-top:auto;background:#FBF7F1;border-left:calc(2.5px * var(--tps)) solid #F39883;
  padding:calc(6px * var(--tps)) calc(7px * var(--tps));
  box-shadow:0 calc(3px * var(--tps)) calc(10px * var(--tps)) rgba(0,0,0,.14)}
.tpb-phcard b{display:block;font-family:Fraunces,serif;font-size:calc(7px * var(--tps));color:#16355C}
.tpb-phcard i{display:block;font-style:normal;font-size:calc(5px * var(--tps));color:#7A8794;
  margin-top:calc(1.5px * var(--tps));line-height:1.3}

/* the route panel */
.tpb-phcounts{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-evenly;
  padding:calc(4px * var(--tps)) 0}
.tpb-phcount{display:flex;align-items:flex-start;gap:calc(6px * var(--tps))}
.tpb-phcount span{flex:0 0 auto;width:calc(13px * var(--tps));height:calc(13px * var(--tps));
  border-radius:calc(2.5px * var(--tps));background:#16355C;color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:Syne,sans-serif;font-weight:800;font-size:calc(6px * var(--tps))}
.tpb-phcount b{display:block;font-size:calc(6.4px * var(--tps));color:#16355C;font-weight:700;letter-spacing:.04em}
.tpb-phcount em{display:block;font-style:italic;font-size:calc(5px * var(--tps));color:#8A97A4;
  margin-top:calc(1px * var(--tps));line-height:1.3}
.tpb-phends{display:flex;gap:calc(6px * var(--tps));padding-bottom:calc(4px * var(--tps))}
.tpb-phend{position:relative;flex:1 1 0;height:calc(52px * var(--tps));border-radius:calc(3px * var(--tps));
  overflow:hidden}
.tpb-phend::after{content:'';position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(to top,rgba(6,14,24,.82),rgba(6,14,24,0))}
.tpb-phlab2{position:absolute;left:calc(4px * var(--tps));bottom:calc(3px * var(--tps));z-index:2;
  color:#fff;font-family:Syne,sans-serif;font-weight:800;font-size:calc(4px * var(--tps));
  letter-spacing:.13em;text-transform:uppercase}

/* the numbers panel */
.tpb-phstats{display:grid;grid-template-columns:1fr 1fr;gap:calc(9px * var(--tps)) calc(5px * var(--tps));
  margin-bottom:calc(11px * var(--tps))}
.tpb-phstat b{display:block;font-family:Syne,sans-serif;font-weight:800;font-size:calc(19px * var(--tps));
  line-height:.9;color:#16355C}
.tpb-phstat i{display:block;font-style:normal;font-size:calc(4.4px * var(--tps));letter-spacing:.14em;
  text-transform:uppercase;color:#7A8794;margin-top:calc(1px * var(--tps))}
.tpb-phsigl{font-family:Syne,sans-serif;font-weight:800;font-size:calc(4.4px * var(--tps));
  letter-spacing:.14em;text-transform:uppercase;color:#7A8794;margin-bottom:calc(3px * var(--tps))}
.tpb-phsig{display:flex;height:calc(9px * var(--tps));border-radius:calc(1.5px * var(--tps));
  overflow:hidden;margin-bottom:calc(11px * var(--tps))}
.tpb-phsig i{flex:1 1 0}
.tpb-phqrow{display:flex;gap:calc(7px * var(--tps));align-items:flex-start;margin-bottom:calc(10px * var(--tps))}
.tpb-phqr{width:calc(32px * var(--tps));height:calc(32px * var(--tps));flex:0 0 auto;background:#fff;
  padding:calc(2px * var(--tps));box-sizing:border-box}
.tpb-phqr svg{display:block;width:100%;height:100%}
.tpb-phscan{font-family:Syne,sans-serif;font-weight:800;font-size:calc(4.8px * var(--tps));
  letter-spacing:.18em;text-transform:uppercase;color:#16355C;padding-top:calc(2px * var(--tps))}
.tpb-phscan em{display:block;font-style:italic;font-family:'DM Sans',sans-serif;font-weight:400;
  font-size:calc(4.6px * var(--tps));letter-spacing:0;text-transform:none;color:#8A97A4;
  margin-top:calc(2px * var(--tps));line-height:1.4}
.tpb-phstrip{display:flex;gap:calc(4px * var(--tps));margin-bottom:calc(10px * var(--tps))}
.tpb-phstrip i{flex:1 1 0;height:calc(30px * var(--tps));border-radius:calc(2px * var(--tps))}
.tpb-phquote{font-family:Fraunces,serif;font-style:italic;font-size:calc(7.4px * var(--tps));
  line-height:1.35;color:#16355C;border-left:calc(2px * var(--tps)) solid #F39883;
  padding-left:calc(7px * var(--tps));margin-bottom:calc(10px * var(--tps))}
.tpb-phquote em{display:block;font-style:normal;font-family:Syne,sans-serif;font-weight:800;
  font-size:calc(4.2px * var(--tps));letter-spacing:.14em;text-transform:uppercase;color:#8A97A4;
  margin-top:calc(4px * var(--tps))}
.tpb-phlist{margin-bottom:calc(11px * var(--tps))}
.tpb-phlist span{display:block;font-family:Syne,sans-serif;font-weight:800;
  font-size:calc(4.4px * var(--tps));letter-spacing:.14em;text-transform:uppercase;color:#7A8794;
  margin-bottom:calc(5px * var(--tps))}
.tpb-phlist div{display:flex;align-items:flex-start;gap:calc(5px * var(--tps));
  font-size:calc(5.4px * var(--tps));line-height:1.35;color:#16355C;margin-bottom:calc(4px * var(--tps))}
.tpb-phlist i{flex:0 0 auto;width:calc(6px * var(--tps));height:calc(6px * var(--tps));
  border:calc(1px * var(--tps)) solid #16355C;border-radius:calc(1.2px * var(--tps));
  margin-top:calc(1.5px * var(--tps))}
/* The gallery, at the SHEET's proportions — one wide frame over a row of
   squares. Sizing these with flex-grow instead looked right on the printed
   panel and wrong on the card: the picker panel is 0.43 aspect, so 1.7-of-the-
   free-height made the hero SQUARE and each square a tall portrait slice, and
   a 1.93 landscape dropped into a 0.52 box is a photograph of somebody's
   elbow. Aspect is the thing that has to match, not the flex ratio. */
.tpb-phgal{display:flex;flex-direction:column;gap:calc(4px * var(--tps));
  margin-bottom:calc(9px * var(--tps))}
.tpb-phgalh{width:100%;aspect-ratio:300/176;border-radius:calc(2.5px * var(--tps))}
.tpb-phgalr{display:flex;gap:calc(4px * var(--tps))}
.tpb-phgalr i{flex:1 1 0;aspect-ratio:1/1;border-radius:calc(2.5px * var(--tps))}
/* The mark takes the slack, exactly as it does on the sheet. */
.tpb-phmarkb{text-align:center;padding-top:calc(4px * var(--tps));margin-top:auto}
.tpb-phmarkb .tpb-phqr{margin:0 auto}
.tpb-phmarkb em{display:block;font-family:'DM Sans',sans-serif;font-style:italic;
  font-size:calc(4.6px * var(--tps));color:#5B6B7C;margin:calc(4px * var(--tps)) 0 calc(6px * var(--tps))}
.tpb-phmarkr{display:block;width:calc(14px * var(--tps));height:calc(1.4px * var(--tps));
  background:#F39883;border-radius:calc(1px * var(--tps));margin:0 auto calc(5px * var(--tps))}
.tpb-phmarkb b{display:block;font-family:Syne,sans-serif;font-weight:800;
  font-size:calc(6.4px * var(--tps));letter-spacing:.3em;text-indent:.3em;color:#16355C}
.tpb-phmarkb u{display:block;text-decoration:none;font-size:calc(3.8px * var(--tps));
  letter-spacing:.2em;text-transform:uppercase;color:#8A97A4;margin-top:calc(3px * var(--tps))}
.tpb-phprompt{margin-top:0}
.tpb-phprompt span{display:block;font-family:Syne,sans-serif;font-weight:800;
  font-size:calc(4.4px * var(--tps));letter-spacing:.14em;text-transform:uppercase;color:#7A8794;
  margin-bottom:calc(6px * var(--tps))}
.tpb-phprompt i{display:block;height:0;border-bottom:calc(1px * var(--tps)) solid #C3CFDA;
  margin-bottom:calc(9px * var(--tps))}
.tpb-phfoot{position:absolute;left:0;right:0;bottom:0;height:calc(11px * var(--tps));background:#16355C;
  color:#fff;display:flex;align-items:center;justify-content:center;font-family:Syne,sans-serif;
  font-weight:800;font-size:calc(4.4px * var(--tps));letter-spacing:.18em;z-index:9}

/* ── THE FRONT COVER ────────────────────────────────────────────────────────
   A photograph across the top and a colour block beneath it, NOT a full-bleed
   crop. A 180x420 panel is a 0.43 aspect; forcing a 0.92 group photograph into
   it keeps a 200px-wide slice and throws three of the four people away. Real
   travel brochures solve this the same way — Space Coast's cover is a photo
   with a banner under it — and it makes the title unconditionally legible
   instead of dependent on what the picture happens to be doing. */
.tpb-phcov{overflow:hidden;background:#0F2340;display:flex;flex-direction:column;padding:0}
.tpb-phcovimg{position:relative;flex:0 0 auto;height:calc(232px * var(--tps));width:100%;overflow:hidden}
.tpb-phcovimg::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(to top,#0F2340,rgba(15,35,64,0))}
.tpb-phcovtxt{flex:1 1 auto;padding:calc(4px * var(--tps)) calc(13px * var(--tps)) calc(13px * var(--tps));
  display:flex;flex-direction:column}
.tpb-phkick{color:#8FB6E4;font-family:Syne,sans-serif;font-weight:800;font-size:calc(4.6px * var(--tps));
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:calc(6px * var(--tps))}
.tpb-phtitle{font-family:Fraunces,serif;font-weight:700;color:#fff;font-size:calc(17px * var(--tps));
  line-height:1.04;letter-spacing:-.01em}
.tpb-phsub{font-family:Syne,sans-serif;font-weight:800;font-size:calc(4.4px * var(--tps));
  letter-spacing:.16em;text-transform:uppercase;color:#F39883;margin-top:calc(7px * var(--tps))}
.tpb-phdates{margin-top:auto;color:#C6D8EE;font-family:Syne,sans-serif;font-weight:700;
  font-size:calc(5.2px * var(--tps));letter-spacing:.13em}
.tpb-phmark{color:rgba(255,255,255,.6);font-family:Syne,sans-serif;font-weight:800;
  font-size:calc(4.2px * var(--tps));letter-spacing:.3em;margin-top:calc(6px * var(--tps))}
.tpb-phroundel{position:absolute;right:calc(9px * var(--tps));top:calc(9px * var(--tps));z-index:4;
  width:calc(40px * var(--tps));height:calc(40px * var(--tps));border-radius:50%;background:#F39883;
  color:#16273C;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 calc(3px * var(--tps)) calc(10px * var(--tps)) rgba(0,0,0,.4)}
.tpb-phroundel b{font-family:Syne,sans-serif;font-weight:800;font-size:calc(6.5px * var(--tps))}
.tpb-phroundel i{font-style:normal;font-size:calc(3.8px * var(--tps));letter-spacing:.08em;
  opacity:.85;margin-top:calc(1px * var(--tps))}

/* ── smaller stages. The type inside a panel is sized for the DESKTOP card;
      shrinking the card without shrinking the type would overflow every
      panel, so each step scales the sheet's type down with it. ─────────── */
@media(max-width:1180px){
  .tp-stage{height:470px;perspective:1500px}
  .tp-card{width:440px;height:340px;margin:-170px 0 0 -220px}
  .tp-floor{width:740px;margin:122px 0 0 -370px}
  .tp-stage{--tps:.815}
}
@media(max-width:860px){
  .tp-head{padding:22px 18px 2px}
  .tp-stage{height:380px;perspective:1200px}
  .tp-card{width:350px;height:270px;margin:-135px 0 0 -175px}
  .tp-floor{width:580px;height:120px;margin:96px 0 0 -290px}
  .tp-stage{--tps:.648}
  .tp-head{padding-top:58px}   /* clear the close button */
  .tp-cap{min-height:56px}
}
@media(max-width:540px){
  .tp-stage{height:320px;perspective:1000px}
  .tp-card{width:288px;height:222px;margin:-111px 0 0 -144px}
  .tp-floor{width:470px;height:100px;margin:78px 0 0 -235px}
  .tp-stage{--tps:.533}
  .tp-go{padding:13px 22px;font-size:12px}
  .tp-skip{margin-bottom:24px}
}
/* A cylinder that cannot turn is just a stack of paper, so the ring still
   moves — it simply stops being an animation. */
@media (prefers-reduced-motion:reduce){
  .tp-pan{transition:transform .2s linear,filter .2s linear}
  .tp-pan::before{transition:opacity .2s linear}
}