/* Pocket Planners — topic grid + 3D fold mockup */
.pp{overflow-x:hidden}
.pp-hero{position:relative;background:#111;color:#fff;padding:72px 0 64px;overflow:hidden}
.pp-glow{position:absolute;inset:auto auto -20% -10%;width:min(80vw,720px);height:min(80vw,720px);background:radial-gradient(circle,rgba(226,27,35,.45),transparent 68%);pointer-events:none;animation:ppdrift 14s ease-in-out infinite}
@keyframes ppdrift{0%,100%{transform:translate(0,0)}50%{transform:translate(18%,-12%)}}
.pp-hero h1{color:#fff;font-size:clamp(42px,9vw,84px);margin:0 0 16px}
.pp-hero h1 em{color:var(--red);font-style:normal}
.pp-lede{max-width:38em;font-size:18px;line-height:1.55;color:#ddd;margin:0 0 12px}
.pp-count{color:#bbb;font-weight:600;margin:0}
.pp-browse{padding:48px 0 72px;background:var(--paper)}
.pp-tools{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.pp-tools h2{margin:0;font-size:clamp(28px,5vw,42px)}
.pp-search{flex:1 1 260px;max-width:420px}
.pp-search input{width:100%;min-height:48px;border:2px solid #111;border-radius:999px;padding:10px 18px;font:600 16px/1.2 var(--body);background:#fff}
.pp-search input:focus{outline:3px solid var(--red);outline-offset:2px}
.pp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.pp-chips button{min-height:40px;padding:8px 14px;border-radius:999px;border:2px solid #111;background:transparent;font:700 13px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;color:#111}
.pp-chips button[aria-selected=true],.pp-chips button:hover{background:#111;color:#fff}
.pp-chips button:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.pp-found{margin:0 0 18px;color:#555;font-size:14px}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
@media (min-width:700px){.pp-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}}
.pp-card{margin:0;background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 24px -20px rgba(0,0,0,.5);transition:transform .25s,box-shadow .25s}
.pp-card:hover,.pp-card:focus-within{transform:translateY(-4px);box-shadow:0 18px 32px -18px rgba(226,27,35,.45)}
.pp-card button{display:block;width:100%;border:0;background:none;padding:0;text-align:left;cursor:pointer;color:inherit;font:inherit}
.pp-card button:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
.pp-card img{width:100%;aspect-ratio:2.75/4.25;object-fit:cover;object-position:center top;display:block;background:#fff;border-bottom:1px solid var(--line)}
.pp-card .meta{padding:10px 12px 14px}
.pp-card h3{font-family:var(--body);font-weight:800;font-size:15px;line-height:1.25;text-transform:none;margin:0 0 4px;letter-spacing:0}
.pp-card .cat{margin:0;font-size:12px;color:#666;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.pp-empty{text-align:center;padding:32px 8px;color:#555}

/* mockup */
.pp-mock{padding:32px 0 80px;background:#111;color:#fff}
.pp-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:#fff;font:700 14px/1 var(--body);cursor:pointer;padding:8px 0;margin-bottom:16px}
.pp-back:hover{color:var(--red)}
.pp-back:focus-visible{outline:3px solid #fff;outline-offset:3px}
.pp-mock-head h2{color:#fff;font-size:clamp(32px,6vw,64px);margin:0 0 8px}
.pp-outcome{max-width:36em;color:#ccc;margin:0 0 22px}
.pp-steps{list-style:none;display:flex;gap:6px;flex-wrap:wrap;padding:0;margin:0 0 22px}
.pp-steps li{flex:1 1 auto}
.pp-steps button{width:100%;min-height:54px;padding:8px 8px 6px;border:1px solid #333;background:#1a1a1a;color:#ddd;border-radius:12px;cursor:pointer;font:inherit;text-align:left}
.pp-steps button:hover{border-color:#666}
.pp-steps button[aria-current=step]{background:#fff;color:#111;border-color:#fff}
.pp-steps button[aria-current=step] .n{background:var(--red);color:#fff}
.pp-steps .n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#333;color:#fff;font:800 11px/1 var(--body);margin-right:6px}
.pp-steps .k{display:block;font-family:var(--disp);text-transform:uppercase;font-size:13px;letter-spacing:.04em;margin-top:4px}
.pp-steps button:focus-visible{outline:3px solid var(--red);outline-offset:2px}

.pp-stage-wrap{margin:0 0 18px}
.pp-stage{position:relative;width:100%;max-width:920px;margin:0 auto;aspect-ratio:11/8.5;perspective:1600px;background:#1c1c1c;border-radius:16px;overflow:hidden;border:1px solid #2a2a2a}
.pp-world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transition:opacity .35s}
.pp-pan{position:absolute;left:0;top:0;transform-origin:0 0;transform-style:preserve-3d;will-change:transform}
.pp-pan>.pp-pf,.pp-pan>.pp-pb{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pp-pf{background-color:#fff;background-image:var(--sheet);background-size:400% 200%;background-repeat:no-repeat}
.pp-pb{background:#f3f1ec;transform:rotateY(180deg)}
.pp-pf::after,.pp-pb::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--sh,0);pointer-events:none}
.pp-pf::before,.pp-pb::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);opacity:var(--cr,0);pointer-events:none;z-index:1}
.pp-cutl{position:absolute;left:0;right:0;height:3px;background:var(--red);transform:scaleX(var(--k,0));transform-origin:right center;opacity:var(--cv,1);z-index:2;pointer-events:none;box-shadow:0 0 6px rgba(226,27,35,.6)}
.pp-cutl.b{bottom:-1px}
.pp-cutl.t{top:-1px}
.pp-scis{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.pp-scis svg{display:block;width:100%;height:100%;overflow:visible}

/* 7 DONE: hide the sheet, show the finished booklet */
.pp-stage.s7 .pp-world{opacity:0;pointer-events:none}
.pp-stage.s7 .pp-book-stage{display:block}

.pp-step-copy{text-align:center;margin:14px 0 0;font-size:16px;color:#ddd;min-height:1.4em}
.pp-step-copy b{color:#fff;font-family:var(--disp);font-weight:400;letter-spacing:.04em;text-transform:uppercase;margin-right:8px}

.pp-controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0 10px}
.pp-controls .btn{min-width:128px}
.pp-scrub{display:flex;align-items:center;gap:12px;justify-content:center;max-width:520px;margin:0 auto 18px;color:#bbb;font-weight:700;font-size:13px}
.pp-scrub input{flex:1;accent-color:var(--red);min-height:28px}
.pp-note{max-width:44em;margin:28px auto 0;text-align:center;color:#999;font-size:13px;line-height:1.5}

/* booklet */
.pp-book-stage{display:none;position:absolute;inset:0;perspective:1600px}
.pp-book{position:absolute;left:50%;top:50%;width:min(42%, 280px);aspect-ratio:2.75/4.25;transform:translate(-50%,-50%) rotateY(-18deg) rotateX(6deg);transform-style:preserve-3d;transform-origin:left center}
.pp-leaf{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:left center;transition:transform .8s cubic-bezier(.2,.7,.2,1);z-index:4}
.pp-leaf.L0{z-index:8}
.pp-leaf.L1{z-index:6}
.pp-leaf.L2{z-index:4}
.pp-leaf.L3{z-index:2}
.pp-leaf.flipped{transform:rotateY(-180deg)}
.pp-leaf.flipped.L0{z-index:3}
.pp-leaf.flipped.L1{z-index:5}
.pp-leaf.flipped.L2{z-index:7}
.pp-leaf.flipped.L3{z-index:9}
.pp-pg{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-image:var(--sheet);background-repeat:no-repeat;background-color:#fff;box-shadow:0 10px 28px -16px rgba(0,0,0,.8);border-radius:2px 8px 8px 2px}
.pp-pg.front,.pp-pg.back{background-size:400% 200%}
/* page mapping: cover p1 is top-right; bottom-row panels are upside-down on the sheet, so they rotate 180°. */
.pp-pg.front[data-page="1"]{background-position:100% 0%}
.pp-pg.back[data-page="2"]{background-position:100% 100%;transform:rotateY(180deg) rotate(180deg)}
.pp-pg.front[data-page="3"]{background-position:66.666% 100%;transform:rotate(180deg)}
.pp-pg.back[data-page="4"]{background-position:33.333% 100%;transform:rotateY(180deg) rotate(180deg)}
.pp-pg.front[data-page="5"]{background-position:0% 100%;transform:rotate(180deg)}
.pp-pg.back[data-page="6"]{background-position:0% 0%;transform:rotateY(180deg)}
.pp-pg.front[data-page="7"]{background-position:33.333% 0%}
.pp-pg.back[data-page="8"]{background-position:66.666% 0%;transform:rotateY(180deg)}
.pp-book{filter:drop-shadow(12px 22px 28px rgba(0,0,0,.55))}
.pp-flipbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:8px 0 0}
.pp-flipbar p{margin:0;min-width:10em;text-align:center;font-weight:700}

@media (max-width:700px){
  .pp-chips{flex-wrap:nowrap;overflow-x:auto;padding:0 0 10px;margin-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .pp-chips button{flex:0 0 auto;white-space:nowrap}
  .pp-hero{padding:56px 0 48px}
  .pp-stage{aspect-ratio:11/9.2}
  .pp-steps button .k{font-size:11px}
  .pp-book{width:min(36%, 220px)}
}
@media (max-width:420px){
  .pp-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}

@media (prefers-reduced-motion:reduce){
  .pp-glow{animation:none}
  .pp-world,.pp-leaf,.pp-card{transition:none}
}

/* keep the 3D from causing sideways scroll */
@media (max-width:1280px){
  .pp-stage-wrap,.pp-stage,.pp-browse,.pp-hero,.pp-mock{overflow-x:hidden;max-width:100%}
}

.pp-howto{max-width:920px;margin:28px auto 0;background:#fff;color:#111;border-radius:16px;overflow:hidden}
.pp-howto img{width:100%;height:auto;display:block}
.pp-howto figcaption{margin:0;padding:12px 16px 16px;font-size:13px;color:#555;line-height:1.45}
.pp-mock-head h2:focus{outline:none}
.pp-mock-head h2:focus-visible{outline:3px solid #fff;outline-offset:4px}