/* ───────────────────────── Passport · "Where I've left a mark" ─────────────────────────
   Everything is namespaced .pp-* ; the section itself reuses the site's .record-section pattern. */

.passport11{display:block;padding-block:65px 36px;position:relative}
.passport11 .record-heading{max-width:460px}
.passport11 .record-heading h2{margin-bottom:0}

.pp{--pw:440px;--ph:625px;--sw:31.4px;position:relative;margin-top:8px;color:#22231f;font-family:Instrument,Arial,sans-serif;-webkit-tap-highlight-color:transparent}
.pp *,.pp *::before,.pp *::after{box-sizing:border-box}
.pp button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}

/* ── stage: the camera ── */
.pp-stage{position:relative;width:100%;height:calc(var(--ph) + 210px);perspective:calc(var(--pw) * 5.2);perspective-origin:50% 40%;touch-action:pan-y;-webkit-user-select:none;user-select:none;outline:none}
.pp--single .pp-stage{overflow:hidden}
.pp-tilt{position:absolute;left:50%;top:calc(50% + 14px);width:0;height:0;transform-style:preserve-3d;
  transform:translate3d(0,var(--lift,0px),0) scale(var(--sc,1)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg))}
.pp-book{position:absolute;left:0;top:calc(var(--ph) * -.5);width:var(--pw);height:var(--ph);transform-style:preserve-3d;transform:translate3d(var(--bx,0px),0,0)}
.pp-spine{position:absolute;left:0;top:0;width:1px;height:1px;pointer-events:none}

/* soft contact shadow on the desk, sits just below the book in the same 3D space */
.pp-shadow{position:absolute;top:calc(var(--ph) * -.5);left:0;width:var(--pw);height:var(--ph);border-radius:10px;pointer-events:none;
  background:rgba(40,28,12,.5);filter:blur(22px);will-change:transform,opacity;opacity:var(--so,.8);transform:translate3d(var(--shx,0px),var(--shy,16px),-16px) scaleX(var(--shs,1));transform-origin:0 50%}

/* ── leaves ── */
.pp-leaf,.pp-bender{position:absolute;left:0;top:0;width:var(--pw);height:var(--ph);transform-origin:0 50%;transform-style:preserve-3d}
.pp-bender{visibility:hidden}
.pp-s{position:absolute;top:0;width:calc(var(--sw) + .6px);height:var(--ph);transform-origin:0 50%;transform-style:preserve-3d}
.pp-s>.pp-s{left:var(--sw)}

.pp-face{--gut:linear-gradient(90deg,rgba(38,26,8,.30) 0,rgba(38,26,8,.11) 5.5%,rgba(38,26,8,0) 17%);
  position:absolute;inset:0;overflow:hidden;background-color:#efe9d8;background-repeat:no-repeat;
  background-image:var(--gut),var(--l2,none),var(--l1,none),var(--art,none);background-size:var(--pw) var(--ph),var(--z2,auto),var(--z1,auto),var(--pw) var(--ph);background-position:var(--ox,0px) 0,var(--q2,0 0),var(--q1,0 0),var(--ox,0px) 0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.pp-face.is-back{transform:rotateY(180deg);--gut:linear-gradient(270deg,rgba(38,26,8,.30) 0,rgba(38,26,8,.11) 5.5%,rgba(38,26,8,0) 17%)}
.pp-face>.c{position:absolute;inset:0;pointer-events:none;opacity:var(--cast,0);
  background:linear-gradient(90deg,rgba(20,12,4,.62) 0,rgba(20,12,4,.28) 45%,rgba(20,12,4,0) 92%);background-size:var(--pw) var(--ph);background-position:var(--ox,0px) 0;background-repeat:no-repeat}
.pp-face.is-back>.c{background-image:linear-gradient(270deg,rgba(20,12,4,.62) 0,rgba(20,12,4,.28) 45%,rgba(20,12,4,0) 92%)}
.pp-face::after{content:"";position:absolute;inset:0;pointer-events:none;background:#4a3a24;opacity:var(--sh,0)}

/* cover: exterior art + foil that reacts to the pointer */
.pp-face.is-cover{--gut:linear-gradient(transparent,transparent);border-radius:2px 7px 7px 2px}
.pp-foil{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:var(--foil,0);
  -webkit-mask:var(--mask) center/100% 100% no-repeat;mask:var(--mask) center/100% 100% no-repeat;
  background:radial-gradient(circle at var(--fx,30%) var(--fy,22%),rgba(255,250,214,.96) 0,rgba(255,228,140,.55) 16%,rgba(255,200,90,.14) 36%,transparent 58%)}

/* page block layers (thickness of the stacks, visible when the book is tilted) */
.pp-blk{position:absolute;top:0;width:var(--pw);height:var(--ph);display:none;border-radius:2px;background:linear-gradient(180deg,#f0ead9,#ded6bf);box-shadow:inset 0 0 0 1px rgba(70,54,26,.22)}
.pp-blk.r{left:0}.pp-blk.l{left:calc(var(--pw) * -1)}
.pp-board{position:absolute;left:-2px;top:-3px;width:calc(var(--pw) + 5px);height:calc(var(--ph) + 6px);border-radius:2px 8px 8px 2px;background:linear-gradient(#143a7a,#0b2552);box-shadow:inset 0 0 0 1px rgba(150,180,240,.18)}

/* interaction affordances */
.pp-hit{position:absolute;inset:-14% -8%;z-index:1;cursor:pointer}
.pp--open .pp-hit{cursor:grab}
.pp--drag .pp-hit{cursor:grabbing}



/* ── overlays that live on the faces (design px 440x625, scaled by --k) ── */
.pp-ov{position:absolute;left:0;top:0;width:440px;height:625px;transform:scale(var(--k,1));transform-origin:0 0;pointer-events:none}
.pp-ov>*{position:absolute}
.pp-st{display:block;transform-origin:50% 50%;will-change:transform,opacity;-webkit-user-drag:none;user-select:none}
.pp-sig{-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--w,0%) - 9%),transparent var(--w,0%));mask-image:linear-gradient(90deg,#000 calc(var(--w,0%) - 9%),transparent var(--w,0%))}
.pp-fx{display:block;pointer-events:none}
.pp-bloom{border-radius:50%;transform-origin:50% 50%}
.pp-dent{border-radius:46%;border:1.5px solid rgba(255,255,255,.62);box-shadow:inset 0 0 9px rgba(50,34,10,.2),0 0 7px rgba(50,34,10,.12);transform-origin:50% 50%}
.pp-drop{border-radius:50%}
.pp-row{background:linear-gradient(90deg,rgba(242,220,156,.34),rgba(242,220,156,.04));border-left:2px solid rgba(242,220,156,.85)}
.pp-rtw{left:0;top:0;width:440px;height:625px}
.pp-rtw svg{display:block}
.pp .pp-hot{pointer-events:auto;background:none;border:0;padding:0;margin:0;cursor:pointer;border-radius:14px;outline:none}
.pp .pp-hot:focus-visible{outline:2px solid rgba(27,63,148,.75);outline-offset:2px}
.pp-vf{pointer-events:auto;border-radius:14px;cursor:crosshair;touch-action:pan-y;outline:none}
.pp-vf:focus-visible{outline:2px solid rgba(27,63,148,.75);outline-offset:3px}
.pp-vring{position:absolute;left:50%;top:calc(50% - 10px);width:136px;height:136px;margin:-68px 0 0 -68px;border-radius:50%;border:2px solid rgba(27,63,148,.4);animation:ppRing 2.4s ease-in-out infinite;pointer-events:none}
.pp-charge{border:2.5px solid #1b3f94;border-radius:50%;pointer-events:none}
.pp-vs{pointer-events:none;transform-origin:50% 50%}
@keyframes ppRing{0%,100%{transform:scale(.9);opacity:.25}50%{transform:scale(1.07);opacity:.75}}

/* ── route bar + tools ── */
.pp-ui{position:relative;z-index:3;width:min(620px,100%);margin:-50px auto 0;padding:0 6px;display:flex;flex-direction:column;align-items:center;gap:8px}
.pp-bar{display:flex;align-items:center;gap:10px;width:100%}
.pp .pp-nav{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(34,35,31,.18);background:rgba(255,255,255,.62);color:#22231f;transition:transform .15s,background .2s,opacity .2s}
.pp .pp-nav:hover{background:#fff;transform:scale(1.07)}
.pp .pp-nav:active{transform:scale(.94)}
.pp .pp .pp-nav:disabled{opacity:.3;pointer-events:none}
.pp-track{position:relative;flex:1;height:50px}
.pp-line{position:absolute;left:0;right:0;top:20px;height:0;border-top:2px dotted rgba(34,35,31,.3)}
.pp-prog{position:absolute;left:0;top:20px;height:0;width:0;border-top:2px solid #1b3f94;border-radius:2px}
.pp .pp-stop{position:absolute;left:calc(9% + var(--i) * 20.5%);top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;width:58px;padding:14px 0 0;color:rgba(34,35,31,.55)}
.pp-stop .d{display:block;width:12px;height:12px;border-radius:50%;background:#f7f6f2;border:2px solid rgba(34,35,31,.38);transition:border-color .25s,box-shadow .25s,background .25s}
.pp-stop b{font:600 10px/1 Mono,ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em}
.pp .pp-stop:hover .d{border-color:var(--c)}
.pp .pp-stop.is-done .d{background:var(--c);border-color:var(--c);animation:ppPop .5s cubic-bezier(.2,1.6,.4,1)}
.pp .pp-stop.is-cur{color:#22231f}
.pp .pp-stop.is-cur .d{box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent);border-color:var(--c)}
.pp .pp-stop:focus-visible,.pp-nav:focus-visible,.pp-snd:focus-visible,.pp-clr:focus-visible{outline:2px solid #1b3f94;outline-offset:3px;border-radius:8px}
.pp-plane{position:absolute;top:21px;left:0;width:22px;height:22px;color:#22231f;pointer-events:none;will-change:transform;filter:drop-shadow(0 3px 3px rgba(34,35,31,.28))}
.pp-tools{display:flex;gap:10px;align-items:center;min-height:32px}
.pp .pp-snd{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:rgba(34,35,31,.55);border:1px solid rgba(34,35,31,.18);background:transparent}
.pp-snd .w{opacity:0;transition:opacity .2s}.pp-snd.is-on{color:#1b3f94;border-color:#1b3f94}.pp-snd.is-on .w{opacity:1}
.pp .pp-clr{font:600 12px/1 Instrument,Arial,sans-serif;color:rgba(34,35,31,.72);padding:9px 13px;border-radius:99px;border:1px dashed rgba(34,35,31,.32);background:transparent}
.pp .pp-clr[hidden]{display:none}
.pp-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@keyframes ppPop{0%{transform:scale(.3)}100%{transform:scale(1)}}

/* ── closed-state hint ── */
.pp-hint{position:absolute;left:50%;top:6px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0;color:#22231f;font:400 27px/1 Marker,cursive;opacity:0;pointer-events:none;transition:opacity .5s;white-space:nowrap;z-index:2}
.pp-hint svg{display:block;margin-top:2px}
.pp-hint path{stroke-dashoffset:120;transition:stroke-dashoffset .9s .15s ease}
.pp-hint.on{opacity:.88}
.pp-hint.on path{stroke-dashoffset:0}

@media (max-width:560px){
  .pp-ui{margin-top:-46px}
  .pp-nav{width:36px;height:36px}
  .pp-stop{width:46px}
}
@media (prefers-reduced-motion:reduce){.pp *{animation:none!important;transition:none!important}}