/* Tide Tribe · Tribe Passport. Black and white, square corners, Gloock. Stamps share the boarding-pass stamp's look.
   Nothing stays on screen: a notice drops in at the top when a stamp lands, the footer link opens the passport. */

/* the passport */
.tp{width:100%;max-width:560px;max-height:min(88svh,820px);margin:auto auto 0;padding:0;border:0;background:#fff;color:#000;overflow:auto;overscroll-behavior:contain}
.tp::backdrop{background:rgba(0,0,0,.6)}
.tp[open]{animation:tp-up .4s cubic-bezier(.23,1,.32,1)}
@keyframes tp-up{from{transform:translateY(40px);opacity:0}}
@media(min-width:700px){.tp{margin:auto}}
.tp__page{padding:18px 20px 28px}
.tp__top{position:sticky;top:0;z-index:2;background:#fff;margin:-18px -20px 0;padding:18px 20px 10px;display:flex;align-items:center;justify-content:space-between;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(0,0,0,.55);border-bottom:1px solid #000;padding-bottom:10px}
.tp__close{width:44px;height:44px;margin:-10px -10px -10px 0;display:grid;place-items:center;background:none;border:0;color:#000;cursor:pointer}
.tp__close svg{width:22px;height:22px}
.tp__title{margin:22px 0 8px;font-family:var(--font-heading);font-weight:400;font-size:clamp(40px,11vw,60px);line-height:.95;letter-spacing:-.03em}
.tp__sub{margin:0 0 22px;color:rgba(0,0,0,.65);max-width:40ch}
.tp__offer{width:100%;margin:0 0 24px;background:#25D366;color:#fff}
.tp__offer svg{width:22px;height:22px}
.tp__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(0,0,0,.12);border-left:1px solid rgba(0,0,0,.12)}
.tp__cell{display:grid;justify-items:center;align-content:start;gap:10px;padding:18px 10px 16px;border-right:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);text-align:center}
.tp__cell:last-child:nth-child(odd){grid-column:1/-1}
.tp__stamp{--r:0deg;width:96px;height:96px;border-radius:50%;border:2px dashed rgba(0,0,0,.25);display:grid;place-content:center;gap:4px;padding:8px;color:rgba(0,0,0,.35);transform:rotate(var(--r))}
.tp__stamp b{font-family:var(--font-heading);font-weight:400;font-size:15px;line-height:1.05}
.tp__stamp small{font-size:.625rem;letter-spacing:.12em;text-transform:uppercase}
.tp__cell.is-got .tp__stamp{border:2px solid #000;color:#000;box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px #000}
.tp__done-btn{width:100%;margin-top:22px}
.tp-lock,.tp-lock body{overflow:hidden}
.tp__go{font-size:.8125rem;color:#000;text-decoration:underline;text-underline-offset:3px;min-height:32px;display:inline-flex;align-items:center}

/* footer link */
.tp-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:28px 0 0;padding:14px 0 0;width:100%;background:none;border:0;border-top:1px solid currentColor;color:inherit;font:inherit;font-family:var(--font-heading);font-size:1.25rem;text-align:left;cursor:pointer}
.tp-foot span{font-family:var(--font-body);font-size:.8125rem;opacity:.7}

/* notice: drops in at the top, leaves on its own */
.tp-toast{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));z-index:70;width:min(420px,calc(100% - 24px));display:flex;align-items:center;gap:14px;padding:10px 16px 10px 10px;background:#000;color:#fff;border:0;font:inherit;text-align:left;cursor:pointer;transform:translate(-50%,-140%);transition:transform .35s cubic-bezier(.23,1,.32,1)}
.tp-toast.is-in{transform:translate(-50%,0)}
.tp-toast__stamp{--r:-8deg;flex:none;width:52px;height:52px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;padding:4px;text-align:center;transform:rotate(var(--r))}
.tp-toast.is-in .tp-toast__stamp{animation:tp-press .55s .15s cubic-bezier(.23,1,.32,1) both}
@keyframes tp-press{0%{transform:rotate(var(--r)) scale(1.9);opacity:0}55%{transform:rotate(var(--r)) scale(.94);opacity:1}100%{transform:rotate(var(--r)) scale(1)}}
.tp-toast__stamp b{font-family:var(--font-heading);font-weight:400;font-size:11px;line-height:1.05}
.tp-toast__txt{display:grid;gap:2px;line-height:1.3}
.tp-toast__txt small{font-size:.8125rem;opacity:.75}

@media (prefers-reduced-motion:reduce){.tp[open],.tp-toast.is-in .tp-toast__stamp{animation:none}.tp-toast{transition:none}}
@media print{.tp-toast{display:none}}