/* Shared look for the photo-first cards (Search for Us, Piece of Us), from the PhotoBook design system:
   warm-cream chrome that steps back from the photos, the platform sans-serif, one violet action per screen,
   16px corners for almost everything, 32px for big photos and pop-ups, pills for chips and labels.
   No shadows except the pop-up, no decorative gradients: the photos carry the colour.
   Every rule is scoped to body.pb so the card maker's editor keeps its own styles. */
body.pb{
  --primary:#6f45d7;--on-primary:#fff;--primary-pressed:#5834b5;
  --ink:#000;--ink-soft:#211922;--body:#33332e;--charcoal:#262622;--mute:#62625b;--ash:#91918c;--stone:#c8c8c1;
  --hairline:#dadad3;--hairline-soft:#e5e5e0;--secondary-bg:#e5e5e0;--secondary-pressed:#c8c8c1;
  --canvas:#fff;--surface-soft:#fbfbf9;--surface-card:#f6f6f3;--surface-dark:#262622;--on-dark:#fff;--on-dark-mute:rgba(255,255,255,.7);
  --focus-outer:#435ee5;--success-deep:#103c25;--success-pale:#c7f0da;--error:#9e0a0a;
  --r-sm:8px;--r-md:16px;--r-lg:32px;--r-full:9999px;
  --s-xxs:4px;--s-xs:6px;--s-sm:8px;--s-md:12px;--s-lg:16px;--s-xl:24px;--s-xxl:32px;--s-section:64px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --ck-bg:#fff;--ck-ink:#000;--ck-soft:#62625b;--ck-line:#dadad3;--ck-field:#fff;--ck-accent:#6f45d7;--ck-accent-ink:#fff;--ck-font:var(--font);--ck-display:var(--font);--ck-radius:16px;
  margin:0;background:var(--surface-soft);color:var(--body);font:400 16px/1.4 var(--font);-webkit-font-smoothing:antialiased;
}
body.pb *,body.pb *::before,body.pb *::after{box-sizing:border-box}
body.pb button{font:inherit;color:inherit}
body.pb :focus-visible{outline:4px solid var(--focus-outer);outline-offset:2px;box-shadow:0 0 0 2px var(--canvas)}
body.pb .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.pb [hidden]{display:none!important}

/* type */
.pb .t-display-xl{margin:0;font:600 clamp(36px,7vw,70px)/1.1 var(--font);letter-spacing:-1.2px;color:var(--ink);text-wrap:balance}
.pb .t-display-lg{margin:0;font:700 clamp(32px,5vw,44px)/1.15 var(--font);letter-spacing:-.8px;color:var(--ink);text-wrap:balance}
.pb .t-heading-xl{margin:0;font:700 28px/1.2 var(--font);letter-spacing:-1.2px;color:var(--ink);text-wrap:balance}
.pb .t-heading-lg{margin:0;font:600 22px/1.25 var(--font);color:var(--ink)}
.pb .t-heading-md{margin:0;font:600 18px/1.3 var(--font);color:var(--ink)}
.pb .t-body{margin:0;font:400 16px/1.4 var(--font);color:var(--body)}
.pb .t-body-sm{margin:0;font:400 14px/1.4 var(--font);color:var(--mute)}
.pb .t-strong-sm{font:700 14px/1.4 var(--font);color:var(--ink)}
.pb .t-caption{margin:0;font:500 12px/1.5 var(--font);color:var(--mute)}

/* buttons */
.pb .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:6px 14px;border:0;border-radius:var(--r-md);
  font:700 14px/1 var(--font);cursor:pointer;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.pb .btn svg{width:18px;height:18px;flex:none}
.pb .btn-primary{background:var(--primary);color:var(--on-primary)}
.pb .btn-primary:active{background:var(--primary-pressed)}
.pb .btn-secondary{background:var(--secondary-bg);color:var(--ink)}
.pb .btn-secondary:active{background:var(--secondary-pressed)}
.pb .btn-tertiary{background:transparent;color:var(--ink)}
.pb .btn-tertiary:active{background:var(--surface-card)}
.pb .btn:disabled,.pb .btn[aria-disabled="true"]{background:var(--surface-card);color:var(--ash);cursor:default}
.pb .btn-wide{width:100%;min-height:48px;font-size:16px}
.pb .btn-icon{width:40px;height:40px;min-height:40px;padding:0;border-radius:var(--r-full);background:var(--surface-card);color:var(--ink)}
.pb .btn-icon:active{background:var(--secondary-bg)}
.pb .btn-icon.on{background:var(--ink);color:var(--on-dark)}

/* pills and chips */
.pb .pill{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:6px 12px;border-radius:var(--r-full);background:var(--canvas);color:var(--ink);font:700 12px/1.2 var(--font)}
.pb .pill svg{width:14px;height:14px;flex:none}
.pb .chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 16px;border:0;border-radius:var(--r-full);background:var(--surface-card);color:var(--ink);font:700 14px/1 var(--font);cursor:pointer;white-space:nowrap}
.pb .chip[aria-pressed="true"]{background:var(--ink);color:var(--on-dark)}

/* photos and tiles */
.pb .photo-card{position:relative;display:block;overflow:hidden;border-radius:var(--r-md);background:var(--surface-card);padding:0;border:0}
.pb .photo-card.lg{border-radius:var(--r-lg)}
.pb .photo-card img{display:block;width:100%;height:100%;object-fit:cover}
.pb .photo-card>.pill{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px)}
.pb .photo-card>.pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb .tile{border-radius:var(--r-md);background:var(--surface-card);padding:16px;color:var(--ink)}
.pb .avatar{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;overflow:hidden;border-radius:var(--r-full);background:var(--secondary-bg);color:var(--ink);font:700 14px/1 var(--font)}
.pb .avatar img{width:100%;height:100%;object-fit:cover}

/* search bar and inputs */
.pb .search{display:flex;align-items:center;gap:8px;height:48px;padding:0 6px 0 15px;border-radius:var(--r-full);background:var(--surface-card);color:var(--ink)}
.pb .search:focus-within{background:var(--canvas);box-shadow:inset 0 0 0 1px var(--ash),0 0 0 4px var(--focus-outer)}
.pb .search svg{width:18px;height:18px;flex:none;color:var(--mute)}
.pb .search input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:400 16px var(--font);color:var(--ink);outline:none;box-shadow:none}
.pb .search input::placeholder{color:var(--ash)}
.pb .search input::-webkit-search-cancel-button{display:none}

/* navigation, sections, footer */
.pb .nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;height:64px;padding:0 24px;background:var(--canvas)}
.pb .nav.rule{box-shadow:inset 0 -1px 0 var(--hairline)}
.pb .wordmark{flex:none;font:700 21px/1 var(--font);letter-spacing:-.8px;color:var(--primary);text-decoration:none;white-space:nowrap}
.pb .wrap{width:min(100%,1280px);margin:0 auto;padding:0 24px}
.pb .foot{margin-top:var(--s-section);padding:32px 24px;background:var(--canvas);box-shadow:inset 0 1px 0 var(--hairline);color:var(--mute);font:400 14px/1.4 var(--font)}
.pb .foot-in{width:min(100%,1232px);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.pb .foot b{color:var(--primary);font-weight:700;letter-spacing:-.4px}

/* pop-ups: the only shadow in the system */
.pb .scrim{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.5);opacity:0;transition:opacity .25s}
.pb .scrim.show{opacity:1}
.pb .modal{position:relative;width:min(100%,480px);max-height:calc(100dvh - 48px);overflow:auto;padding:32px;border-radius:var(--r-lg);background:var(--canvas);color:var(--body);
  box-shadow:0 0 16px rgba(0,0,0,.25);transform:translateY(12px);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.pb .scrim.show .modal{transform:none}
.pb .modal-x{position:absolute;top:16px;right:16px}

@media (max-width:768px){
  .pb .nav{padding:0 16px;gap:8px}
  .pb .wrap{padding:0 16px}
  .pb .foot{margin-top:48px}
}
@media (max-width:480px){
  .pb .scrim{place-items:end center;padding:0}
  .pb .modal{width:100%;max-height:92dvh;padding:28px 20px calc(env(safe-area-inset-bottom,0px) + 24px);border-radius:var(--r-lg) var(--r-lg) 0 0;transform:translateY(40px)}
  .pb .foot{margin-top:32px}
}
@media (prefers-reduced-motion:reduce){
  .pb .scrim,.pb .modal{transition:none}
}