/* The expedition map (/ks3/map), scoped under .pg-map. Ported from site/map.html. */
.pg-map {
    .intro { padding-block: 22px 26px; }
    .intro .wrap { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; }
    .intro p { margin: 10px 0 0; max-width: 60ch; }
    .legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .85rem; align-items: center; }
    .legend span { display: inline-flex; align-items: center; gap: 7px; }
    .legend i { display: inline-block; }
    .controls { display: grid; gap: 10px; margin-top: 18px; }
    .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .chip { cursor: pointer; border: 0; background: none; padding: 0; font: inherit; }
    .chip .torn { font-size: .86rem; }
    .chip[aria-pressed="true"] .torn { --torn-bg: var(--c, var(--ink)); color: #fff; }
    .chips .lbl { font: 700 1.3rem/1 var(--f-hand); margin-right: 6px; min-width: 3.6em; }

    .mapbox { position: relative; box-shadow: inset 0 10px 14px -10px rgba(0,0,0,.35), inset 0 -10px 14px -10px rgba(0,0,0,.35); }
    .scroller { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
    .scroller:focus-visible { outline: 3px dashed var(--coral); outline-offset: -3px; }
    .land { position: relative; }
    .band { position: absolute; top: 0; bottom: 0; }
    .band.bs { background: #c29c6e url(/img/tile_kraft.webp) 0 0/1200px auto repeat; }
    /* each year's land opens with its landscape, fading into the band's paper */
    .band .strip { position: absolute; left: 0; right: 0; top: 0; height: 158px; background: center 18% / 100% auto no-repeat; opacity: .92;
                   -webkit-mask-image: linear-gradient(#000 58%, transparent); mask-image: linear-gradient(#000 58%, transparent); pointer-events: none; }
    .region { position: absolute; top: 14px; transform: translateX(-50%); white-space: nowrap; font-size: 1.05rem; z-index: 6; }
    /* half-term headings: this half term in bright white, the rest in a quiet paper tone */
    .htl { position: absolute; top: 52px; transform: translateX(-50%) rotate(var(--tilt, -2deg)); font: 400 1.12rem/1 var(--f-label); letter-spacing: .01em; color: rgba(246,239,226,.78); white-space: nowrap; z-index: 6;
           text-shadow: 1.5px 0 0 rgba(29,36,72,.55), -1.5px 0 0 rgba(29,36,72,.55), 0 1.5px 0 rgba(29,36,72,.55), 0 -1.5px 0 rgba(29,36,72,.55), 1px 1px 0 rgba(29,36,72,.55), -1px 1px 0 rgba(29,36,72,.55), 1px -1px 0 rgba(29,36,72,.55), -1px -1px 0 rgba(29,36,72,.55); }
    .htl.now { color: #fff; font-size: 1.24rem;
           text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 1.4px 1.4px 0 var(--ink), -1.4px 1.4px 0 var(--ink), 1.4px -1.4px 0 var(--ink), -1.4px -1.4px 0 var(--ink), 0 4px 0 rgba(29,36,72,.3); }
    .land > svg { position: absolute; inset: 0; overflow: visible; z-index: 2; pointer-events: none; }
    .trailpath, .xfer, .pin, .stk { transition: opacity .3s; }
    .dim { opacity: .3; }
    .xfer .dots { stroke: #1d2448; stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; fill: none; }
    .xfer.live .dots { stroke: var(--coral); stroke-width: 4.5; animation: map-march .7s linear infinite; }
    .pin { position: absolute; z-index: 4; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
           background: var(--label); box-shadow: 0 0 0 4px var(--c), 0 3px 0 4px rgba(0,0,0,.2); font: 400 1.32rem/1 var(--f-label);
           display: grid; place-items: center; padding: .2em 0 0;   /* Luckiest Guy sits high: nudge the digit down to the optical centre */ color: var(--ink); transition: transform .15s, opacity .3s, background-color .3s; }
    .pin.ghost { background: rgba(255,255,255,.35); box-shadow: 0 0 0 3px rgba(29,36,72,.35); color: rgba(29,36,72,.5); cursor: default; }
    .pin.x::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2.5px dashed var(--ink); }
    .pin:hover, .pin:focus-visible { transform: scale(1.2); outline: none; }
    .pin:focus-visible { box-shadow: 0 0 0 4px var(--c), 0 0 0 8px var(--coral); }
    .pin.past { background: var(--c); color: #fff; }
    .pin.sel { background: var(--coral); color: #fff; transform: scale(1.4); z-index: 7; }
    .pin.glow { animation: map-glow 1.1s ease-in-out infinite; z-index: 6; }
    .stk { position: absolute; z-index: 3; width: 74px; height: 74px; margin-left: -37px; border: 0; padding: 0; background: none; cursor: pointer; transition: transform .15s, opacity .3s; }
    .stk img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.28)); }
    .stk:hover { transform: scale(1.22) rotate(0deg) !important; z-index: 5; }
    .stk.sel { transform: scale(1.4) rotate(0deg) !important; z-index: 6; }
    .here { position: absolute; z-index: 5; pointer-events: none; }
    /* this half term: a strip of torn tissue paper laid down the map, under the trails */
    .nowband { position: absolute; z-index: 1; pointer-events: none; filter: drop-shadow(0 0 1px rgba(90,60,20,.35)) drop-shadow(0 3px 5px rgba(40,25,5,.22)); }
    .nowband div { position: absolute; inset: 0; background: rgba(255,250,236,.5) url(/img/bg_cream.webp) center/320px auto; background-blend-mode: soft-light; opacity: .78; }
    .here img { position: absolute; width: 54px; max-width: none; left: -66px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.3)); }
    .here .torn { position: absolute; left: -8px; transform: rotate(-3deg); white-space: nowrap; font-size: .78rem; --torn-bg: var(--coral); color: #fff; }
    .summit-flag { position: absolute; z-index: 3; text-align: center; transform: translateX(-50%); }
    .summit-flag .pole { width: 5px; height: 90px; background: var(--ink); margin: 0 auto; position: relative; }
    .summit-flag .pole::after { content: "GCSE"; position: absolute; left: 5px; top: 0; background: var(--coral); color: #fff; font: 400 1rem/1 var(--f-label); padding: 10px 16px 8px 10px; clip-path: polygon(0 0, 100% 0, 86% 50%, 100% 100%, 0 100%); }
    .summit-flag p { margin: 8px 0 0; font: 700 1.2rem/1.1 var(--f-hand); max-width: 9em; }
    .lanes { position: absolute; left: 0; top: 0; bottom: 0; width: 152px; z-index: 8; pointer-events: none; background: linear-gradient(90deg, rgba(246,239,226,.95) 0 78%, rgba(246,239,226,0)); }
    .lane { position: absolute; left: 10px; transform: translateY(-50%); pointer-events: auto; text-decoration: none; font: 400 1.08rem/1.02 var(--f-label); letter-spacing: .02em; color: var(--c); max-width: 128px; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
    .lane small { display: block; font: 700 1.02rem/1 var(--f-hand); color: #7a6040; letter-spacing: 0; margin-top: 3px; }
    .lane:hover small, .lane:focus-visible small { color: var(--coral); }
    .runner { position: absolute; z-index: 9; width: 66px; pointer-events: none; transform: translate(-50%, -88%); }
    .runner img { display: block; width: 100%; max-width: none; transform-origin: 50% 100%; filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); }
    .spark { position: absolute; z-index: 10; width: 26px; margin: -13px 0 0 -13px; pointer-events: none; }
    .post { position: absolute; z-index: 5; width: 54px; margin: -30px 0 0 -27px; border: 0; padding: 0; background: none; cursor: pointer; transition: transform .15s, opacity .3s; }
    .post img { display: block; width: 100%; filter: drop-shadow(0 3px 3px rgba(0,0,0,.3)); }
    .post:hover, .post:focus-visible { transform: scale(1.22) rotate(-4deg); z-index: 7; outline: none; }
    .post:focus-visible img { filter: drop-shadow(0 0 0 var(--coral)) drop-shadow(0 0 4px var(--coral)); }
    .post.on { transform: scale(1.32); z-index: 7; }
    .post.mini { width: 42px; margin: -24px 0 0 -21px; }   /* crossroads to a trail that's hidden by the filter */
    .post.mini::after { content: ""; position: absolute; right: -3px; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--oc); border: 2px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
    .pin.hop { animation: map-pinhop .7s cubic-bezier(.3,1.6,.5,1); }
    .stk.hop img { animation: map-stkhop .7s cubic-bezier(.3,1.6,.5,1); }
    .tip { position: absolute; z-index: 9; font: 700 1.35rem/1.1 var(--f-hand); color: var(--ink); background: #fff8e8; padding: 8px 12px; transform: rotate(-3deg); box-shadow: 0 4px 10px rgba(0,0,0,.2); pointer-events: none; }
    .tip::after { content: "↙"; position: absolute; left: -6px; bottom: -22px; font-size: 1.6rem; }

    /* stop card */
    .pop { position: absolute; z-index: 12; width: 370px; max-width: calc(100vw - 32px); background: #fffdf6; box-shadow: 0 16px 34px rgba(20,15,5,.35); border-top: 10px solid var(--c); }
    .pop[hidden] { display: none !important; }
    .pop .x { position: absolute; top: 8px; right: 8px; cursor: pointer; border: 0; background: none; font: 400 1.1rem/1 var(--f-label); color: #8a6f4c; padding: 6px 8px; }
    .pop .ph { display: grid; grid-template-columns: 86px 1fr; gap: 12px; align-items: center; padding: 14px 40px 6px 14px; }
    .pop .ph img { width: 86px; height: 86px; object-fit: contain; transform: rotate(-5deg); filter: drop-shadow(0 4px 4px rgba(0,0,0,.22)); }
    .pop .line { font: 400 .74rem/1.2 var(--f-label); letter-spacing: .05em; color: var(--c); }
    .pop h3 { font: 400 1.3rem/1.12 var(--f-slab); margin-top: 4px; }
    .pop .pb { padding: 4px 16px 12px; display: grid; gap: 10px; max-height: 330px; overflow-y: auto; }
    .pop .pb h4 { font: 400 .74rem/1 var(--f-label); letter-spacing: .08em; color: #8a6f4c; margin: 4px 0 -4px; }
    .pop ul { margin: 0; padding-left: 1.1em; font-size: .92rem; display: grid; gap: 3px; }
    .pop .terms { display: flex; flex-wrap: wrap; gap: 5px; }
    .pop .terms span { font-size: .76rem; padding: 3px 8px; background: #efe3cb; }
    .pop .tr { display: flex; align-items: center; gap: 10px; cursor: pointer; border: 0; background: var(--navy); color: #fff; padding: 6px 12px 6px 6px; font: 400 .82rem/1.1 var(--f-label); letter-spacing: .03em; text-align: left; }
    .pop .tr img { width: 80px; aspect-ratio: 16 / 9; object-fit: cover; }
    .pop .soonchip { font: 700 1.1rem/1.1 var(--f-hand); color: #8a6f4c; }
    .pop .xr { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center; cursor: pointer; border: 0; background: #f4ecdb; padding: 6px 10px 6px 6px; text-align: left; font: inherit; color: inherit; width: 100%; }
    .pop .xr:hover, .pop .xr:focus-visible { background: #fbe3cc; }
    .pop .xr img { width: 46px; height: 46px; object-fit: contain; }
    .pop .xr b { display: block; font: 400 .74rem/1.2 var(--f-label); letter-spacing: .04em; color: var(--c); }
    .pop .xr span { display: block; font-size: .84rem; line-height: 1.3; }
    .pop .xr em { display: block; font: 700 1rem/1.1 var(--f-hand); font-style: normal; color: #7a6040; margin-top: 2px; }
    .pop .pf { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px 12px; border-top: 2px dashed rgba(29,36,72,.15); }
    .pop .pf button { cursor: pointer; border: 0; background: none; font: 400 .8rem/1 var(--f-label); color: var(--ink); padding: 6px 2px; }
    .pop .pf button:disabled { opacity: .3; cursor: default; }
    .pop .pf a { font: 400 .8rem/1 var(--f-label); color: #fff; background: var(--c); text-decoration: none; padding: 8px 10px 7px; text-align: center; }
    .pop.xpop { width: 580px; border-top-color: var(--ink); }
    .xpop .xh { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 14px 44px 4px 16px; }
    .xpop .xh img { width: 64px; transform: rotate(-4deg); filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
    .xpop .xh .line { color: var(--coral); }
    .xpop .xh h3 { font: 700 1.55rem/1.1 var(--f-hand); color: var(--ink); margin-top: 2px; }
    .xpop .two { display: grid; grid-template-columns: 1fr 34px 1fr; gap: 0; padding: 10px 14px 6px; align-items: start; }
    .xpop .and { align-self: center; text-align: center; font: 700 1.8rem/1 var(--f-hand); color: var(--coral); }
    .xpop .side { display: grid; gap: 7px; align-content: start; border-top: 6px solid var(--c); background: #fbf5e8; padding: 10px 10px 12px; }
    .xpop .side .top { display: grid; grid-template-columns: 1fr 66px; gap: 8px; align-items: start; }
    .xpop .side .top img { width: 66px; height: 66px; object-fit: contain; margin-top: -24px; transform: rotate(5deg); filter: drop-shadow(0 4px 4px rgba(0,0,0,.22)); }
    .xpop .side .line { color: var(--c); display: block; }
    .xpop .side h4 { font: 400 1.02rem/1.15 var(--f-slab); margin: 4px 0 0; }
    .xpop .side ul { font-size: .84rem; }
    .xpop .side .terms span { font-size: .7rem; }
    .xpop .side .go { cursor: pointer; border: 0; background: var(--c); color: #fff; font: 400 .84rem/1 var(--f-label); letter-spacing: .03em; padding: 10px 12px 9px; justify-self: stretch; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 3px 0 rgba(0,0,0,.2); transition: transform .15s; }
    .xpop .side .go:hover, .xpop .side .go:focus-visible { transform: translateY(-2px); }
    .xpop .side .go img { width: 30px; }
    .xpop .side .tr { font-size: .72rem; } .xpop .side .tr img { width: 58px; }
    .xpop .ask { margin: 4px 16px 14px; font: 700 1.2rem/1.2 var(--f-hand); color: #7a6040; }
    @media (max-width: 700px) {
      .xpop .two { grid-template-columns: 1fr; gap: 26px; } .xpop .and { display: none; }
      .pop { position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; max-width: none; max-height: 72vh; overflow-y: auto;
             padding-bottom: env(safe-area-inset-bottom, 0px); animation: map-sheet .25s ease-out; }
      .pop .pb { max-height: none; }
      .lanes { width: 118px; } .lane { max-width: 98px; font-size: .88rem; }
    }
    .below { padding-block: 16px 60px; }
    .below .hint { font: 700 1.25rem/1 var(--f-hand); margin: 0 0 30px; }
    .xgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 20px; }
    .xcard { cursor: pointer; border: 0; font: inherit; color: inherit; text-align: left; background: #fffaf0; padding: 12px 14px 14px; box-shadow: 0 3px 8px rgba(0,0,0,.12); display: grid; gap: 6px; transition: transform .15s; }
    .xcard:hover { transform: translateY(-3px); }
    .xcard .pair { display: flex; align-items: center; gap: 6px; }
    .xcard .pair img { width: 58px; height: 58px; object-fit: contain; }
    .xcard .route { font: 400 .74rem/1.25 var(--f-label); letter-spacing: .04em; }
    .xcard p { margin: 0; font-size: .92rem; }
    @media (max-width: 860px) { .intro .wrap { grid-template-columns: 1fr; } }
    @media (prefers-reduced-motion: reduce) { .xfer.live .dots, .pin.glow, .pin.hop, .stk.hop img { animation: none; } }
}

@keyframes map-march { to { stroke-dashoffset: -22; } }
@keyframes map-glow { 50% { box-shadow: 0 0 0 4px var(--c), 0 0 0 12px rgba(228,111,85,.45); } }
@keyframes map-pinhop { 0% { transform: scale(1); } 40% { transform: scale(1.8); } 100% { transform: scale(1.4); } }
@keyframes map-stkhop { 0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-16px) rotate(-8deg); } 70% { transform: translateY(0) rotate(4deg); } 100% { transform: none; } }
@keyframes map-sheet { from { transform: translateY(40px); opacity: 0; } }

/* ---------- the folded map: a plain visit starts here ---------- */
.pg-map {
    .refold { cursor: pointer; border: 0; background: none; padding: 0; font: inherit; margin-left: 6px; }
    .refold .torn { font-size: .78rem; --torn-bg: #efe3cb; color: #6b5230; }
    .refold:hover .torn, .refold:focus-visible .torn { --torn-bg: var(--ink); color: #fff; }

    .foldsec { padding-block: 8px 70px; }
    /* the sheet is three columns (the three years) by two rows; --pw and --ph are one panel */
    .fold { --pw: min(330px, calc((100vw - 64px) / 3)); --ph: calc(var(--pw) * .9);
            --fx: 0px; --fy: calc(var(--ph) / 2); --fs: 1;
            position: relative; width: calc(var(--pw) * 3); height: calc(var(--ph) * 2); margin-inline: auto; }
    .stage3d { position: absolute; inset: 0; perspective: 2400px; perspective-origin: 50% 40%; cursor: pointer; }
    .slide, .lift { position: absolute; left: 0; top: 0; width: var(--pw); height: var(--ph); transform-style: preserve-3d; }
    .slide { transform: translateX(var(--fx)) scale(var(--fs)); transform-origin: calc(var(--pw) / 2) calc(var(--fy) + var(--ph) / 2); }
    .lift { transform: translateY(var(--fy)); }

    .col { position: absolute; top: 0; width: var(--pw); height: var(--ph); transform-style: preserve-3d; transform-origin: 0 50%; }
    .c1 { left: 0; }
    .c2, .c3 { left: 100%; }
    /* folded like a real map: every bottom half folded up to the back of the sheet, then the columns
       concertina'd behind the first. The small translateZ steps keep each layer of paper at its own depth
       (the front panel at 0, the rest a few px behind) so no two layers share a plane. */
    .c2 { transform: rotateY(180deg) translateZ(4px); }
    .c3 { transform: rotateY(-180deg) translateZ(-2px); }
    .half { position: absolute; left: 0; top: 100%; width: 100%; height: 100%; transform-style: preserve-3d; transform-origin: 50% 0; transform: rotateX(-180deg) translateZ(2px); }
    .face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
    .face.back { transform: rotateY(180deg); background: #c29c6e url(/img/tile_kraft.webp) 0 0/600px auto; }
    .half > .face.back { transform: rotateX(180deg); }
    /* creases, and a shadow on each panel while it's still turning towards the light */
    .face.front::after { content: ""; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(90deg, rgba(40,25,5,.16), transparent 7%, transparent 93%, rgba(40,25,5,.16)), linear-gradient(rgba(40,25,5,.1), transparent 6%, transparent 94%, rgba(40,25,5,.1)); }
    .c2 > .face.front::before, .c3 > .face.front::before, .half > .face.front::before { content: ""; position: absolute; inset: 0; z-index: 3; background: rgba(40,25,5,.5); pointer-events: none; }

    /* the printed map: 3 × 2 panels' worth, and each face shows its own part */
    .fold-print { position: absolute; width: 300%; height: 200%; font-size: calc(var(--pw) / 22); }
    .mband { position: absolute; top: 0; bottom: 0; width: 33.34%; }
    .mband img { position: absolute; left: 0; top: 0; width: 100%; max-width: none; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
    .mband .torn { position: absolute; left: 50%; top: 4%; transform: translateX(-50%) rotate(-2deg); font-size: .9em; white-space: nowrap; }
    .fold-print svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    .fold-print path { fill: none; stroke-width: 4.2; stroke-linecap: round; opacity: .92; }
    .fold-print circle { fill: #f6efe2; stroke-width: 1.4; }
    .mstk { position: absolute; width: 6.5%; max-width: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }

    /* the parcel: a kraft cover with a peek at the map, twine, a bow and a luggage tag */
    .parcel { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(3px); font-size: calc(var(--pw) / 16); }
    .cover { position: absolute; inset: 0; transform-origin: 0 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
             background: #1f2a55 url(/img/tile_navy.webp) 0 0/500px auto;   /* navy, so the parcel stands out from the kraft page */
             box-shadow: 1px 1px 0 #eadcc0, 2px 2px 0 #b99a6b, 3px 3px 0 #eadcc0, 4px 4px 0 #b3915f, 5px 5px 0 #e4d4b4, 0 14px 26px rgba(40,25,5,.4); }
    .cover::before { content: ""; position: absolute; inset: .55em; border: 2px solid rgba(246,239,226,.5); outline: 1px solid rgba(246,239,226,.28); outline-offset: 3px; pointer-events: none; }
    .window { position: absolute; left: calc(var(--pw) * .1); top: calc(var(--ph) * .1); width: calc(var(--pw) * .8); height: calc(var(--ph) * .47);
              overflow: hidden; outline: .3em solid #f6efe2; box-shadow: 0 2px 5px rgba(0,0,0,.3); }
    .peek { position: absolute; width: var(--pw); height: var(--ph); left: calc(var(--pw) * -.1); top: 0; }
    .title { position: absolute; left: 10%; right: 26%; top: 71%; text-align: left; display: grid; gap: .2em; color: var(--label); }
    .title b { font: 400 1.08em/1 var(--f-slab); }
    .title span { font: 400 .62em/1 var(--f-label); letter-spacing: .06em; color: var(--mustard); }
    .twine { position: absolute; z-index: 2; background: repeating-linear-gradient(135deg, #d4ab70 0 .16em, #9d7038 .16em .28em); box-shadow: 0 1px 2px rgba(40,25,5,.4); }
    .twine.v { left: 80%; top: -.35em; bottom: -.35em; width: .3em; }
    .twine.h { top: 63%; left: -.35em; right: -.35em; height: .3em; }
    .bow { position: absolute; z-index: 4; left: calc(80% + .15em); top: calc(63% + .15em); width: 4.8em; overflow: visible;
           transform: translate(-50%, -38%); filter: drop-shadow(0 2px 2px rgba(40,25,5,.4)); }
    .bow path { fill: none; stroke: #b98a4e; stroke-width: 5.5; stroke-linecap: round; }
    .bow .loop { stroke-dasharray: 3 2.2; stroke: #c99b5e; }
    .bow ellipse { fill: #a7763c; }
    .tagstring { position: absolute; z-index: 3; left: calc(80% + .1em); top: calc(63% + .2em); width: 2.4em; height: 2px; background: #9d7038; transform-origin: 0 50%; transform: rotate(52deg); }
    .tag { position: absolute; z-index: 3; left: 82%; top: 75%; width: 7.4em; padding: .55em .6em .5em 1.55em; transform: rotate(12deg); transform-origin: 0 20%;
           background: #f6efe2 url(/img/tile_cream.webp) center/300px; box-shadow: 0 3px 6px rgba(40,25,5,.35); display: grid; gap: .15em;
           clip-path: polygon(0 22%, 13% 0, 100% 0, 99% 50%, 100% 100%, 13% 100%, 0 78%); }
    .tag::before { content: ""; position: absolute; left: .55em; top: 50%; width: .5em; height: .5em; margin-top: -.25em; border-radius: 50%; background: #9d7a4c; box-shadow: inset 0 0 0 .12em #f6efe2; }
    .tag b { font: 400 .72em/1.05 var(--f-label); letter-spacing: .03em; color: var(--ink); }
    .tag span { font: 700 .95em/1 var(--f-hand); color: #7a3a22; }

    /* the picker beside it */
    /* it starts past the luggage tag, which hangs off the parcel's right edge */
    .picker { position: absolute; left: calc(var(--pw) * 1.45 + 28px); right: 0; top: 50%; transform: translateY(-50%);
              background: #fffdf6; padding: 22px 24px 20px; box-shadow: 0 10px 24px rgba(40,25,5,.22); border-top: 10px solid var(--coral);
              transition: opacity .3s, transform .3s; }
    .picker h2 { font: 400 1.5rem/1.1 var(--f-slab); margin: 0 0 6px; }
    .picker .q { font: 700 1.35rem/1.1 var(--f-hand); color: #5b3a1a; margin: 14px 0 8px; }
    .pchips { display: flex; flex-wrap: wrap; gap: 8px; }
    .pchips .chip .torn { font-size: .92rem; }
    .pchips .chip.yr { display: grid; justify-items: center; gap: 2px; }
    .pchips .chip.yr small { font: 700 1rem/1 var(--f-hand); color: #7a6040; }
    /* a little window onto each year's land, from the map's own landscape strips */
    .pchips .chip.yr .land-thumb { display: block; width: 104px; height: 64px; overflow: hidden; border: 3px solid #fffdf6; box-shadow: 0 2px 5px rgba(40,25,5,.25); margin-bottom: 4px; transform: rotate(-1.5deg); transition: transform .15s; }
    .pchips .chip.yr:nth-child(2) .land-thumb { transform: rotate(1.2deg); }
    .pchips .chip.yr .land-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
    .pchips .chip.yr:hover .land-thumb { transform: rotate(0) translateY(-2px); }
    .pchips .chip.yr[aria-pressed="true"] .land-thumb { border-color: var(--coral); }
    .pchips .chip.yr[aria-pressed="true"] .torn { --torn-bg: var(--coral); }
    .openbtn { margin-top: 20px; font-size: 1.05rem; background: var(--hach-yellow, #f0c000); }
    .later { margin: 10px 0 0; font: 700 1.1rem/1 var(--f-hand); color: #8a6f4c; }

    /* ---- opening: untie (0–0.45s), lift the cover, unfold the columns, then the rows (to 2.25s) ---- */
    .fold[data-phase="open"] {
        .stage3d, .picker { pointer-events: none; }
        .picker { opacity: 0; transform: translateY(-46%); }
        .tag { opacity: 0; transform: translate(1.5em, 3.5em) rotate(48deg); transition: transform .45s cubic-bezier(.5,0,.8,.4), opacity .4s .05s; }
        .tagstring { opacity: 0; transition: opacity .2s; }
        .bow { opacity: 0; transform: translate(-50%, -38%) scale(.2) rotate(-120deg); transition: transform .42s cubic-bezier(.5,0,.8,.5) .05s, opacity .3s .15s; }
        .twine.v { opacity: 0; transform: translateY(35%); transition: transform .4s cubic-bezier(.5,0,.8,.5) .18s, opacity .3s .26s; }
        .twine.h { opacity: 0; transform: translateX(30%); transition: transform .4s cubic-bezier(.5,0,.8,.5) .18s, opacity .3s .26s; }
        .cover { transform: rotateY(-172deg); opacity: 0; transition: transform .52s cubic-bezier(.45,.05,.25,1) .42s, opacity .18s linear .82s; }
        .c2 { transform: rotateY(0deg) translateZ(0); transition: transform .5s cubic-bezier(.45,.05,.2,1) .86s; }
        .c3 { transform: rotateY(0deg) translateZ(0); transition: transform .5s cubic-bezier(.45,.05,.2,1) 1.26s; }
        .c2 > .face.front::before { opacity: 0; transition: opacity .45s .9s; }
        .c3 > .face.front::before { opacity: 0; transition: opacity .45s 1.3s; }
        .half { transform: rotateX(0deg) translateZ(0); transition: transform .55s cubic-bezier(.45,.05,.2,1) 1.7s; }
        .c2 > .half { transition-delay: 1.76s; }
        .c3 > .half { transition-delay: 1.82s; }
        .half > .face.front::before { opacity: 0; transition: opacity .5s 1.75s; }
        .slide { --fx: 0px; --fs: 1; transition: transform .9s cubic-bezier(.45,.05,.25,1) .86s; }
        .lift { --fy: 0px; transition: transform .6s cubic-bezier(.45,.05,.25,1) 1.7s; }
    }

    /* with reduced motion, the full map fades in over where the paper was */
    .opened.fresh { animation: map-reveal .75s ease-out; }
    /* otherwise Fetch hauls it up from below the window (js/map.js): until he starts it's laid out but
       hidden, the page clips it so nothing scrolls or widens, and the controls wait until he's done */
    &.hauling { overflow: clip; }
    &.hauling .opened { visibility: hidden; }
    &.hauling .intro { pointer-events: none; }

    @media (max-width: 760px) {
        .fold { --pw: calc((100vw - 40px) / 3); --fx: var(--pw); --fs: 1.55; height: auto; }
        .stage3d { position: relative; height: calc(var(--ph) * 2); }
        .picker { position: static; transform: none; margin-top: 22px; }
        .fold[data-phase="open"] .picker { transform: translateY(6px); }
    }
    @media (prefers-reduced-motion: reduce) { .opened.fresh { animation-duration: .25s; } }
}

@keyframes map-reveal { from { opacity: 0; transform: scale(.985); } }