/* Peninsula Passport promo surfaces: the campaign strip (home, city pages),
   the landing page sections and the winners page. Scoped to .ppx- so it can
   ride on any page without touching that page's own styles. Navy + gold. */
/* Campaign marks (_passport_icons.php) default to the line's size; tiles size them up. */
.pp-ico{width:1em;height:1em;display:block;flex:none}
.ppx-strip{padding:26px 0 0}
.ppx-wrap{max-width:1120px;margin:0 auto;padding:0 20px}
/* Home: same box as .nh-wrap so the banner lines up with the sections below it. */
.ppx-strip--home{padding:30px 0 0;background:#f7f2e9}
.ppx-strip--home .ppx-wrap{max-width:1180px;padding:0 34px}
.ppx-strip--home + .nh-feature{padding-top:34px}
/* City: already inside .oe-city-wrap. */
.ppx-strip--city{padding:4px 0 22px}
.ppx-strip--city .ppx-wrap{max-width:none;padding:0}
.ppx-strip--landing{padding:24px 0 4px;background:#f7f2e9}
.ppx-label{margin:0 0 10px;font:700 12px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#b47713}
.ppx-grid{display:flex;flex-direction:column;gap:12px}

/* The banner: hero under a cover in the campaign ink; --pp-text picked by contrast in PHP. */
.ppx-card{--pp-ink:#101530;--pp-text:#101530;position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;width:100%;padding:14px 18px;border-radius:16px;
  background:#fffdf8;background-size:cover;background-position:center;color:var(--pp-text);box-shadow:0 6px 22px rgba(16,21,48,.16);outline:2px solid #ecaf18;outline-offset:-2px;overflow:hidden}
.ppx-card-main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 16px;align-items:center;text-decoration:none;color:inherit;flex:1 1 360px;min-width:0}
.ppx-tile{width:64px;height:64px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:34px;line-height:1;color:#fffdf8;
  background:linear-gradient(135deg,var(--pp-ink),#101530);box-shadow:inset 0 0 0 1px rgba(255,253,248,.15)}
.ppx-tile .pp-ico{width:34px;height:34px}
.ppx-card.is-dark .ppx-tile{background:rgba(255,253,248,.16);box-shadow:inset 0 0 0 1px rgba(255,253,248,.4),0 2px 8px rgba(0,0,0,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ppx-card-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.ppx-card-tx b{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:24px;line-height:1.1;color:var(--pp-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppx-card-tx small{font:500 14px 'DM Sans',sans-serif;color:var(--pp-text);opacity:.85}
.ppx-card.is-dark .ppx-card-tx b{text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 14px rgba(0,0,0,.35)}
.ppx-card.is-dark .ppx-card-tx small{text-shadow:0 1px 2px rgba(0,0,0,.5)}
.ppx-card.is-light.has-hero .ppx-card-tx b{text-shadow:0 1px 0 rgba(255,253,248,.7),0 0 10px rgba(255,253,248,.6)}
.ppx-state{display:inline-flex;align-items:center;gap:7px;margin-top:2px;font:800 12px 'DM Sans',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--pp-text);opacity:.9}
.ppx-state i{width:9px;height:9px;border-radius:50%;background:#ecaf18;flex:0 0 auto}
.ppx-state.is-live i{background:#5cc48c;animation:ppxBlink 1.1s ease-in-out infinite}
@keyframes ppxBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.2;transform:scale(.6)}}
@media (prefers-reduced-motion:reduce){.ppx-state.is-live i{animation:none}}
.ppx-acts{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}
.ppx-btn{display:inline-flex;align-items:center;gap:6px;padding:11px 18px;border-radius:10px;font:800 14px 'DM Sans',sans-serif;text-decoration:none;white-space:nowrap}
.ppx-btn--gold{background:#ecaf18;color:#101530}
.ppx-btn--gold:hover{background:#f5c23a}
.ppx-card.is-light.has-hero .ppx-btn--gold{background:#101530;color:#fffdf8}
.ppx-btn--ghost{background:rgba(255,253,248,.85);color:#101530;border:1px solid rgba(16,21,48,.18)}
.ppx-card.is-dark .ppx-btn--ghost{background:rgba(255,253,248,.14);color:#fffdf8;border-color:rgba(255,253,248,.45)}
.ppx-btn--ghost:hover{border-color:#101530}

/* Restaurant detail: the campaign line under the Passport check ins row. */
.rd-pp-camp{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px;row-gap:8px;margin-top:8px;padding:10px 12px;border-radius:12px;background:#fdf6e1;border:1px solid #f1dfa6}
.rd-pp-camp .rd-pp-glyph{display:flex;font-size:22px;line-height:1;color:#101530}
.rd-pp-camp .rd-pp-glyph .pp-ico{width:24px;height:24px}
.rd-pp-camp b{font:700 14px 'DM Sans',sans-serif;color:#101530}
.rd-pp-camp small{font-size:13px;color:#6b7280}
.rd-pp-camp .rd-pp-links{grid-column:2;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-start}
.rd-pp-camp a{font:700 13px 'DM Sans',sans-serif;color:#101530;text-decoration:none;border-bottom:2px solid #ecaf18}
.rd-pp-camp .rd-pp-live{display:inline-flex;align-items:center;gap:6px;font:800 11.5px 'DM Sans',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#1f7a45}
.rd-pp-camp .rd-pp-live i{width:8px;height:8px;border-radius:50%;background:#5cc48c;animation:ppxBlink 1.1s ease-in-out infinite}

/* Landing page (/passport) */
.ppl-hero{position:relative;overflow:hidden;background:#101530;color:#fffdf8;box-sizing:border-box;max-width:1120px;margin:22px auto 0;border-radius:18px}
@media (max-width:1120px){.ppl-hero{margin-top:0;border-radius:0}}
.ppl-hero-in{box-sizing:border-box}
.ppl-hero-in{max-width:1120px;margin:0 auto;padding:48px 20px 42px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:32px;align-items:center}
.ppl-eyebrow{margin:0 0 12px;font:700 12px 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,253,248,.7)}
.ppl-hero h1{margin:0 0 14px;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:48px;line-height:1.04;letter-spacing:-.02em}
.ppl-hero h1 em{font-style:normal;color:#ecaf18}
.ppl-lede{margin:0 0 24px;font-size:18px;line-height:1.55;color:rgba(255,253,248,.88);max-width:54ch}
.ppl-ctas{display:flex;gap:12px;flex-wrap:wrap}
.ppl-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:12px;font:800 15px 'DM Sans',sans-serif;text-decoration:none}
.ppl-btn--gold{background:#ecaf18;color:#101530}
.ppl-btn--gold:hover{background:#f5c23a}
.ppl-btn--ghost{color:#fffdf8;border:1.5px solid rgba(255,253,248,.55)}
.ppl-btn--ghost:hover{border-color:#fffdf8}
.ppl-stampart{display:flex;justify-content:center;align-items:center}
.ppl-stampart svg{width:min(320px,80vw);height:auto;filter:drop-shadow(0 12px 30px rgba(0,0,0,.35));transform:rotate(-8deg)}
.ppl-section{padding:40px 0}
/* Under the Back to Explore row the hero needs less air above it. */
.oe-backrow ~ main .ppl-hero,.oe-backrow + main .ppl-hero{margin-top:12px}
.ppl-section.is-cream{background:#f7f2e9}
.ppl-section.is-white{background:#fffdf8}
.ppl-section.is-navy{background:#101530;color:#fffdf8}
.ppl-in{max-width:1120px;margin:0 auto;padding:0 20px}
.ppl-section h2{margin:0 0 8px;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:32px;line-height:1.1;color:#101530}
.ppl-section.is-navy h2{color:#fffdf8}
.ppl-sub{margin:0 0 20px;font-size:17px;line-height:1.55;color:#4b5563;max-width:62ch}
.ppl-section.is-navy .ppl-sub{color:rgba(255,253,248,.8)}
.ppl-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ppl-step{background:#fffdf8;border:1px solid #e4ddcf;border-radius:16px;padding:22px 20px}
.ppl-step .n{display:inline-flex;width:34px;height:34px;border-radius:50%;background:#101530;color:#ecaf18;font:800 16px 'DM Sans',sans-serif;align-items:center;justify-content:center;margin-bottom:12px}
.ppl-step h3{margin:0 0 6px;font-family:'DM Sans',sans-serif;font-weight:800;font-size:18px;color:#101530}
.ppl-step p{margin:0;font-size:15px;line-height:1.55;color:#4b5563}
.ppl-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.ppl-fact{background:#fffdf8;border:1px solid #e4ddcf;border-radius:16px;padding:20px}
.ppl-section.is-navy .ppl-fact{background:rgba(255,253,248,.06);border-color:rgba(255,253,248,.18)}
.ppl-fact h3{margin:0 0 6px;font:800 16px 'DM Sans',sans-serif;color:#101530}
.ppl-section.is-navy .ppl-fact h3{color:#ecaf18}
.ppl-fact p,.ppl-fact li{margin:0;font-size:15px;line-height:1.55;color:#4b5563}
.ppl-section.is-navy .ppl-fact p,.ppl-section.is-navy .ppl-fact li{color:rgba(255,253,248,.82)}
.ppl-fact ul{margin:0;padding-left:18px}
.ppl-trophies{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:6px}
.ppl-trophy{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#fffdf8;border:1px solid #e4ddcf;min-width:0}
.ppl-trophy .oe-tbadge{width:46px;height:46px;flex:0 0 auto;display:block}
.ppl-trophy b{display:block;font:800 14.5px 'DM Sans',sans-serif;color:#101530}
.ppl-trophy small{display:block;font-size:12.5px;line-height:1.35;color:#6b7280;margin-top:2px}
.ppl-stores{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ppl-stores a{display:block}
.ppl-stores img{display:block;height:46px;width:auto}
.ppl-stores .ppl-btn{padding:12px 20px}
.ppl-empty{background:#fffdf8;border:1px dashed #d8d0c2;border-radius:16px;padding:26px;font-size:16px;color:#4b5563}
.ppl-empty b{color:#101530}
.ppl-band{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ppl-band p{margin:0;font-size:17px;line-height:1.5;color:rgba(255,253,248,.85);max-width:56ch}
.ppl-band .ppl-ctas a.ppl-btn--ghost{border-color:rgba(255,253,248,.55)}
.ppl-mini{font-size:13.5px;color:#6b7280;margin:18px 0 0}

/* Winners page (/passport/winners): a navy hero like the landing, then one
   card per campaign: its cover on the left, the champion spotlight and the
   rest of the board on the right. Stacks under 860px. */
.ppw2-stampart svg{transform:rotate(-6deg);width:min(230px,56vw)}
/* Winners hero + wall: tighter (owner 09-28). */
.ppw2-hero .ppl-hero-in{padding:30px 20px 26px;gap:24px}
.ppw2-hero h1{font-size:40px;margin-bottom:10px}
.ppw2-hero .ppl-lede{margin-bottom:18px;font-size:17px}
.ppw2-sec{background:#f7f2e9;padding:18px 0 44px}
.ppw2-in{max-width:1120px;margin:0 auto;padding:0 20px}
.ppw2-list{display:flex;flex-direction:column;gap:16px}
.ppw2-camp{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);background:#fffdf8;border-radius:22px;overflow:hidden;box-shadow:0 10px 34px rgba(16,21,48,.10);outline:1px solid #e4ddcf;outline-offset:-1px}
.ppw2-cover{--pp-ink:#101530;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 20px 14px;color:#fffdf8;
  background:linear-gradient(160deg,var(--pp-ink),#101530);background-size:cover;background-position:center}
.ppw2-tile{width:40px;height:40px;font-size:20px;margin-bottom:4px;border-radius:10px;background:rgba(255,253,248,.14);box-shadow:inset 0 0 0 1px rgba(255,253,248,.35)}
.ppw2-tile .pp-ico{width:20px;height:20px}
.ppw2-state{margin:0;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(236,175,24,.18);color:#ecaf18;font:800 11px 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.ppw2-cover h2{margin:4px 0 0;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:24px;line-height:1.08;color:#fffdf8;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.ppw2-meta{margin:0;font:600 13px 'DM Sans',sans-serif;color:rgba(255,253,248,.82)}
.ppw2-board{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:4px;font:800 14px 'DM Sans',sans-serif;color:#ecaf18;text-decoration:none}
.ppw2-board svg{width:16px;height:16px;transition:transform .12s ease}
.ppw2-board:hover svg{transform:translateX(3px)}
.ppw2-body{padding:14px 20px 14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ppw2-champs{display:grid;gap:10px}
.ppw2-champs.is-many{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ppw2-champ{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:14px;background:linear-gradient(135deg,#fdf3d3,#fffaf0 60%);box-shadow:inset 0 0 0 1.5px #ecaf18}
.ppw2-champ-av{position:relative;flex:0 0 auto}
.ppw2-av{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border-radius:50%;overflow:hidden;background:#101530;color:#fffdf8;font:800 14px 'DM Sans',sans-serif}
.ppw2-av img{width:100%;height:100%;object-fit:cover;display:block}
.ppw2-av i{font-style:normal}
.ppw2-av--lg{width:58px;height:58px;font-size:24px;box-shadow:0 0 0 3px #fffdf8,0 0 0 5px #ecaf18,0 8px 20px rgba(16,21,48,.18)}
.ppw2-medal{position:absolute;right:-6px;bottom:-4px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ecaf18;color:#101530;box-shadow:0 0 0 3px #fffdf8}
.ppw2-medal svg{width:15px;height:15px}
.ppw2-champ-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ppw2-champ-label{margin:0;font:800 11px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#b47713}
.ppw2-champ-tx > b{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:22px;line-height:1.08;color:#101530;overflow-wrap:anywhere}
.ppw2-stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:2px;font:500 13px 'DM Sans',sans-serif;color:#5c6280}
.ppw2-stats b{font-weight:800;color:#101530}
.ppw2-pending{padding:16px 18px;border-radius:14px;border:1.5px dashed #d8c89c;background:#fffaf0;font-size:15px;line-height:1.5;color:#4b5563}
.ppw2-pending b{color:#101530}
.ppw2-rest h3{margin:0 0 10px;font:800 12px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7b8590}
.ppw2-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ppw2-rows li{display:grid;grid-template-columns:28px 32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 4px;border-top:1px solid #efe8da}
.ppw2-rows li:first-child{border-top:0}
.ppw2-rank{font:800 14px 'DM Sans',sans-serif;color:#9aa1ab;text-align:center}
.ppw2-nm{font:700 15px 'DM Sans',sans-serif;color:#101530;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ppw2-pts{font:800 14px 'DM Sans',sans-serif;color:#101530;white-space:nowrap}
.ppw2-pts small{font-weight:600;color:#7b8590}
.ppw2-note{margin:0;font-size:15px;color:#6b7280}
.ppw2-played{margin:0;padding-top:8px;border-top:1px solid #efe8da;font-size:14px;line-height:1.5;color:#4b5563}
.ppw2-played span{font:800 11px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#b47713;margin-right:6px}
.ppw2-empty{display:flex;align-items:center;gap:18px;background:#fffdf8;border:1.5px dashed #d8c89c;border-radius:20px;padding:18px 22px;font-size:16px;line-height:1.5;color:#4b5563}
.ppw2-empty b{color:#101530}
.ppw2-empty a{color:#101530;font-weight:700;text-decoration-color:#ecaf18;text-decoration-thickness:2px;text-underline-offset:3px}
.ppw2-empty-ic{flex:0 0 auto;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#101530;color:#ecaf18}
.ppw2-empty-ic svg{width:28px;height:28px}

@media (max-width:860px){
  .ppl-hero-in{grid-template-columns:1fr;padding:36px 20px 32px}
  .ppl-hero h1{font-size:36px}
  .ppl-stampart{order:-1}
  .ppl-stampart svg{width:min(220px,60vw)}
  .ppl-steps{grid-template-columns:1fr}
  .ppl-section h2{font-size:26px}
  .ppx-strip--home .ppx-wrap{padding:0 20px}
  .ppx-tile{width:56px;height:56px;font-size:28px}
  .ppx-tile .pp-ico{width:28px;height:28px}
  .ppx-card-tx b{font-size:21px;white-space:normal}
  .ppx-card{padding:14px}
  .ppx-acts{width:100%}
  .ppx-acts .ppx-btn{flex:1 1 auto;justify-content:center}
  .ppw2-camp{grid-template-columns:1fr}
  .ppw2-cover{padding:22px 20px 18px}
  .ppw2-cover h2{font-size:26px}
  .ppw2-body{padding:20px 18px 22px}
}
@media (max-width:520px){
  .ppw2-champ{flex-direction:column;align-items:flex-start;gap:14px;padding:18px}
  .ppw2-av--lg{width:76px;height:76px;font-size:30px}
  .ppw2-champ-tx > b{font-size:26px}
  .ppw2-empty{flex-direction:column;align-items:flex-start}
}

/* ── Home page passport banner (2026-09-28, second pass: "significantly
   shorter, passports to the right, the paper is the whole banner, no shelf").
   One rounded banner on the passport paper texture: copy on the left, the
   campaign books on the right, each book drawn the way the app draws its
   Passport shelf (leather in the campaign colour, foil rule and mark, ribbon
   out of the foot). Scoped to .pps- so it rides on the home page only. */
.pps{--bk-w:104px;--bk-h:calc(var(--bk-w) * 1.42);--bk-foil:linear-gradient(135deg,#f6e3a4 0%,#d7a947 38%,#fbeebd 52%,#b8862c 78%,#eccf7e 100%);padding:18px 0 0;background:#f7f2e9}
.pps--home + .nh-feature{padding-top:26px}
/* /passport: same banner, in that page's 1120 column, right under the hero. */
.pps--landing{padding:22px 0 24px}
.pps--landing .pps-wrap{max-width:1120px;padding:0 20px}
.pps--landing + .ppl-section{padding-top:36px}
.pps-wrap{max-width:1180px;margin:0 auto;padding:0 34px}
.pps-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 28px;align-items:center;padding:16px 26px 14px;border-radius:20px;
  /* The paper shows through a cream wash, so it reads as a hint of texture rather than a full sheet. */
  background:linear-gradient(rgba(247,242,233,.62),rgba(247,242,233,.62)),url("/assets/passport/pp-paper.webp") center/cover #f3ebda;box-shadow:inset 0 0 0 1px rgba(16,21,48,.08),0 6px 20px rgba(16,21,48,.07)}
.pps-copy{min-width:0}
.pps-copy .ppx-label{margin-bottom:6px}
.pps-copy h2{margin:0 0 6px;font-family:'DM Sans',sans-serif!important;font-weight:800;font-size:clamp(20px,2vw,26px);line-height:1.08;letter-spacing:-.02em;color:#101530}
.pps-lede{margin:0 0 12px;font:14.5px/1.45 'Source Sans 3','DM Sans',sans-serif;color:#42505a;max-width:40ch}
.pps-ctas{display:flex;gap:8px;flex-wrap:wrap}
.pps-ctas .ppx-btn{padding:8px 14px;font-size:13px;border-radius:9px}
.pps-ctas .ppx-btn--ghost{background:transparent;border-color:rgba(16,21,48,.28)}
/* The books: right aligned, room under them for the ribbon tails. */
.pps-books{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:16px;padding:4px 6px 14px 0}
.pps-book{width:var(--bk-w)}
.pps-bk{position:relative;z-index:1;isolation:isolate;display:block;width:var(--bk-w);height:var(--bk-h);border-radius:3px 9px 9px 3px;text-decoration:none;color:#f1d994;
  box-shadow:0 10px 20px rgba(16,21,48,.3),0 2px 4px rgba(16,21,48,.25);transition:transform .18s ease,box-shadow .18s ease;transform-origin:50% 100%}
.pps-bk:hover,.pps-bk:focus-visible{transform:translateY(-6px) rotate(-1.2deg);box-shadow:0 18px 28px rgba(16,21,48,.32),0 3px 6px rgba(16,21,48,.25);outline:0}
.pps-bk:focus-visible .pps-bk-cover::before{border-color:#ecaf18}
.pps-bk::after{content:'';position:absolute;z-index:-1;top:2.2%;bottom:2.2%;right:-3px;width:5px;border-radius:0 2px 2px 0;background:repeating-linear-gradient(90deg,#f3ecdc 0 1px,#d8cfbb 1px 2px);box-shadow:0 3px 6px rgba(0,0,0,.25)}
.pps-bk-ribbon{position:absolute;z-index:-1;bottom:-12%;right:9%;width:8%;height:22%;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(255,255,255,.18) 45%,rgba(0,0,0,.22) 100%),var(--bk-ribbon,#ecaf18);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.pps-bk-cover{position:absolute;inset:0;border-radius:inherit;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding:10% 8% 9%;
  background-color:var(--bk-bg,#101530);
  background-image:linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,.08) 6%,rgba(255,255,255,.07) 7.5%,rgba(0,0,0,0) 12%),radial-gradient(120% 90% at 30% 18%,rgba(255,255,255,.10),rgba(0,0,0,0) 60%),url("/assets/passport/pp-leather.webp");
  background-size:auto,auto,70% auto;background-blend-mode:normal,normal,overlay}
.pps-bk-cover::before{content:'';position:absolute;inset:4.8% 5.4%;border-radius:2px 6px 6px 2px;border:1px solid rgba(233,196,106,.55);pointer-events:none;box-shadow:inset 0 0 0 2px rgba(0,0,0,.12),0 0 0 2px rgba(0,0,0,.12)}
.pps-bk-top{font:800 6px 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.2em;line-height:1.3;background:var(--bk-foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.pps-bk-glyph{flex:1 1 auto;display:grid;place-items:center;width:100%;min-height:0}
.pps-bk-mark{display:grid;place-items:center;width:30px;height:30px;color:#e9c46a;font-size:24px;line-height:1;filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 -0.5px 0 rgba(255,240,200,.35))}
.pps-bk-mark .pp-ico{width:100%;height:100%}
.pps-bk-title{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:12px;line-height:1.08;background:var(--bk-foil);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;overflow-wrap:anywhere}
.pps-bk-count{margin-top:2px;font:600 7.5px 'DM Sans',sans-serif;color:rgba(241,217,148,.78);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pps-bk-status{display:inline-flex;align-items:center;gap:3px;max-width:100%;margin-top:5px;padding:2px 6px;border-radius:999px;
  font:800 5.5px 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#f1d994;border:1px solid rgba(233,196,106,.5);background:rgba(0,0,0,.18)}
.pps-bk-status i{flex:0 0 auto;width:4px;height:4px;border-radius:50%;background:#3ddc84;animation:ppsLive 1.3s ease-in-out infinite}
@keyframes ppsLive{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(61,220,132,.7),0 0 6px rgba(61,220,132,.9)}50%{opacity:.28;box-shadow:0 0 0 3px rgba(61,220,132,0),0 0 0 rgba(61,220,132,0)}}
@media (prefers-reduced-motion:reduce){.pps-bk-status i{animation:none}.pps-bk{transition:none}.pps-bk:hover{transform:none}}
@media (max-width:860px){
  .pps{padding:14px 0 0}
  .pps-wrap{padding:0 20px}
  .pps-panel{grid-template-columns:1fr;gap:12px;padding:16px 18px 10px;border-radius:16px}
  .pps-books{justify-content:flex-start;padding:0 0 12px}
}
@media (max-width:480px){
  .pps-books{gap:12px}
  .pps{--bk-w:92px}
}