/* ============================================================================
   PELIKLIK — « Fête » theme. Warm & celebratory event photo sharing.
   Built on Kuaile tokens (tokens.css): ochre primary, pine-teal secondary,
   warm-neutral grays, Bricolage / Hanken / JetBrains type.
   Phone-first; the same layout widens responsively on desktop.
   ============================================================================ */
/* Caveat self-hosted via fonts.css */

:root {
  --pk-cream:   #fbf2e2;
  --pk-cream-2: #f6e8d0;
  --pk-card:    #fffdf8;
  --pk-ink:     #3a2a18;
  --pk-ink-2:   #7a5c39;
  /* ink-3 darkened from #9a7c54 (3.51:1 on cream — failed AA) to meet WCAG AA
     for the muted meta / nav-label / sub text it's used for (now ~4.9:1). */
  --pk-ink-3:   #856438;
  --pk-line:    #efdcbc;
  --pk-line-2:  #e6d3ad;
  /* Primary accent stepped one tone darker (ochre-600 → ochre-700) so white text
     on ochre buttons (4.17 → 5.66:1) and ochre link text on cream (3.76 → 5.10:1)
     both pass WCAG AA. ochre-d is a darker synthetic step so gradients/hover that
     went 600→700 keep their depth. */
  --pk-ochre:   var(--ochre-700);
  --pk-ochre-d: #7d4408;
  --pk-teal:    var(--teal-600);
  --pk-teal-d:  var(--teal-700);
  --pk-radius:  18px;
  --pk-font:    var(--font-sans);
  --pk-display: var(--font-display);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
/* Landmark wrapper: no box of its own, so it doesn't disturb the flex shell. */
.pk-main { display: contents; }
/* Skip-to-content link: off-screen until keyboard-focused. */
.pk-skip { position: fixed; left: 8px; top: -64px; z-index: 200; background: var(--pk-card);
  color: var(--pk-ink); padding: 10px 16px; border-radius: 10px; font-weight: 800;
  text-decoration: none; box-shadow: 0 6px 18px rgba(40,24,8,.22); transition: top .15s ease; }
.pk-skip:focus { top: 8px; }
body {
  background: #e7ddcb;
  font-family: var(--pk-font);
  color: var(--pk-ink);
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea { font-family: inherit; }

/* a scrollable content region inside the screen */
.pk-view { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.pk-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.pk-scroll::-webkit-scrollbar { width: 0; }

/* ===== Type helpers ====================================================== */
.pk-display { font-family: var(--pk-display); font-weight: 800; letter-spacing: -.03em; line-height: .98; }
.pk-title   { font-family: var(--pk-display); font-weight: 800; letter-spacing: -.02em; }
.pk-hand    { font-family: 'Caveat', cursive; font-weight: 700; }
.pk-mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pk-eyebrow { font: 700 11px/1 var(--pk-font); letter-spacing: .14em; text-transform: uppercase; }

/* ===== Brand lock-up (aperture symbol + "Peliklik" wordmark) ============= */
/* Size is driven by --pk-logo-size so the wordmark and the gap scale together,
   matching the hand-off proportions (wordmark .92×, gap .34× of the symbol). */
.pk-logo { display: inline-flex; align-items: center; line-height: 1; text-decoration: none;
  color: inherit; gap: calc(var(--pk-logo-size, 28px) * .34); }
.pk-logo--vertical { flex-direction: column; gap: calc(var(--pk-logo-size, 28px) * .26); }
.pk-logo-mark { display: block; flex: none; }
.pk-wordmark { font-family: var(--pk-display); font-weight: 800; letter-spacing: -.035em;
  font-size: calc(var(--pk-logo-size, 28px) * .92); line-height: 1; color: var(--ink-900); }
.pk-wordmark .k { color: var(--teal-600); }
.pk-logo--dark .pk-wordmark { color: #fff; }
.pk-logo--dark .pk-wordmark .k { color: var(--ochre-300); }
/* Brand link sitting above the auth / form chrome, centred. */
.pk-brandlink { display: flex; width: fit-content; margin: 2px auto 16px; }

/* ===== Buttons =========================================================== */
/* Links styled as buttons/cards/tiles must not carry the default underline. */
a.pk-btn, a.pk-sharebtn, a.pk-iconbtn, a.pk-card, a.chip { text-decoration: none; }
.pk-btn {
  height: 54px; border-radius: 15px; font: 800 16px/1 var(--pk-font); letter-spacing: -.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; white-space: nowrap;
  transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
}
.pk-btn:active { transform: translateY(1px) scale(.992); }
.pk-btn.ochre { background: var(--pk-ochre); color: #fff; box-shadow: 0 10px 22px rgba(181,106,12,.30); }
.pk-btn.ochre:hover { filter: brightness(1.04); }
.pk-btn.teal  { background: var(--pk-teal); color: #fff; box-shadow: 0 10px 22px rgba(13,116,104,.28); }
.pk-btn.teal:hover { filter: brightness(1.05); }
.pk-btn.ghost { background: var(--pk-card); color: var(--pk-ink); box-shadow: inset 0 0 0 1.5px var(--pk-line-2); }
.pk-btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--pk-ink-3); }
.pk-btn.sm { height: 44px; font-size: 14px; border-radius: 12px; }
.pk-btn:disabled { opacity: .5; pointer-events: none; }

.pk-iconbtn {
  width: 44px; height: 44px; border-radius: 50%; background: var(--pk-card);
  display: flex; align-items: center; justify-content: center; color: var(--pk-ink);
  box-shadow: 0 2px 8px rgba(80,50,20,.10); flex: none; transition: transform .12s ease;
}
.pk-iconbtn:active { transform: scale(.92); }
.pk-iconbtn.solid { background: rgba(20,12,4,.42); color: #fff; box-shadow: none; backdrop-filter: blur(8px); }

/* ===== Avatars =========================================================== */
.pk-av {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; flex: none; border: 2px solid #fff; background-size: cover;
}
.pk-stack { display: flex; }
.pk-stack .pk-av { margin-left: -8px; }
.pk-stack .pk-av:first-child { margin-left: 0; }

/* ===== Confetti (subtle, on celebratory headers) ========================= */
.pk-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.pk-confetti i { position: absolute; width: 7px; height: 7px; border-radius: 2px; opacity: .9; }

/* =========================================================================
   JOIN SCREEN
   ========================================================================= */
.pk-join { flex: 1; display: flex; flex-direction: column; padding: 4px 24px 26px; position: relative; z-index: 2; }
.pk-join .cluster { position: relative; height: 210px; margin: 8px 0 2px; }
.pk-join .cluster .ph {
  position: absolute; border-radius: 16px; background-size: cover; background-position: center;
  border: 5px solid #fff; box-shadow: 0 12px 28px rgba(80,50,20,.22);
}
.pk-join .cluster .p1 { width: 142px; height: 168px; left: 50%; top: 16px; transform: translateX(-50%) rotate(-4deg); z-index: 3; }
.pk-join .cluster .p2 { width: 98px; height: 118px; left: 2px; top: 50px; transform: rotate(-10deg); z-index: 2; }
.pk-join .cluster .p3 { width: 98px; height: 118px; right: 2px; top: 44px; transform: rotate(9deg); z-index: 2; }
.pk-join .badge {
  align-self: center; background: #fff; color: var(--pk-ochre); border-radius: 999px;
  padding: 8px 16px; font: 700 11px/1 var(--pk-font); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: var(--shadow-sm); display: inline-flex; gap: 7px; align-items: center; white-space: nowrap;
}
.pk-join h1 { font-size: 42px; text-align: center; margin: 16px 0 0; }
.pk-join h1 .accent { color: var(--pk-ochre); }
.pk-join .sub { text-align: center; font-size: 14.5px; color: var(--pk-ink-2); margin: 12px 0 0; line-height: 1.45; }
.pk-join .sub b { color: var(--pk-ink); font-weight: 700; }
.pk-join .spacer { flex: 1; min-height: 14px; }
/* Vertically centre the join content (heading + name field) instead of pinning
   the field to the bottom — the screen is sparse now the promo copy is hidden.
   A cover banner, if present, stays above this and nudges the centre down. */
.pk-join .join-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Upload completion card. Neutral cream by default; turns soft green once every
   file in the batch has uploaded with no failures (driven by Alpine `allOk`). */
.pk-complete { margin-top: 18px; text-align: center; padding: 18px 16px; background: var(--pk-cream-2); border-radius: 16px; transition: background .35s ease; }
.pk-complete.ok { background: #d8f1e1; }
.pk-field { position: relative; }
.pk-field input {
  width: 100%; height: 54px; border: 2px solid var(--pk-line); border-radius: 15px; background: #fffdf8;
  padding: 0 16px 0 48px; font-size: 16px; color: var(--pk-ink); outline: none; transition: border-color .15s;
}
.pk-field input::placeholder { color: #8a6b42; }  /* AA on the cream/card input bg */
.pk-field input:focus { border-color: var(--pk-ochre); }
.pk-field .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--pk-ink-3); }
.pk-join .guests { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.pk-join .guests span { font-size: 13px; color: var(--pk-ink-2); font-weight: 600; }
.pk-join .anon { text-align: center; margin-top: 14px; font-size: 13px; color: var(--pk-ink-3); }
.pk-join .anon a { color: var(--pk-teal); font-weight: 700; text-decoration: none; }
.pk-join .orgline { text-align: center; margin-top: 18px; font-size: 12.5px; color: var(--pk-ink-3); }
.pk-join .orgline a { color: var(--pk-ochre); font-weight: 700; text-decoration: none; }

/* =========================================================================
   APP CHROME: top app bar + bottom nav
   ========================================================================= */
.pk-appbar {
  flex: none; padding: 6px 18px 12px; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, var(--pk-cream) 70%, rgba(251,242,226,0));
}
.pk-appbar .ttl { flex: 1; min-width: 0; }
.pk-appbar h2 { font-family: var(--pk-display); font-weight: 800; font-size: 21px; margin: 0; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-appbar .meta { font-size: 11.5px; color: var(--pk-ink-3); margin-top: 1px; font-weight: 600; }
.pk-appbar .meta b { color: var(--pk-ochre); }
/* Metadata links (e.g. the contributors link) take the brand accent, not the
   user-agent blue underline, and a tappable hit area. */
.pk-appbar .meta a { color: var(--pk-ochre); font-weight: 700; text-decoration: none; padding: 6px 2px; display: inline-block; }

.pk-nav {
  flex: none; height: 76px; display: flex; align-items: stretch; padding: 6px 12px 16px;
  background: rgba(255,253,248,.86); backdrop-filter: blur(14px); border-top: 1px solid var(--pk-line);
  /* Stay pinned to the bottom of the viewport while the page scrolls, instead of
     sitting at the end of a long gallery below the fold. Sticky degrades to the
     old in-flow position where unsupported. Bottom padding clears the iOS home
     indicator on notched devices. */
  position: sticky; bottom: 0; z-index: 30;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.pk-nav .nlab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--pk-ink-3); }
.pk-nav .nlab.on { color: var(--pk-ochre); }
.pk-nav .nlab span { font: 700 10px/1 var(--pk-font); }
.pk-nav .center { flex: none; width: 64px; position: relative; }
.pk-nav .center .fab {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  width: 58px; height: 58px; border-radius: 20px; background: var(--pk-ochre); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px rgba(181,106,12,.42); transition: transform .14s ease;
}
.pk-nav .center .fab:active { transform: translateX(-50%) scale(.93); }

/* =========================================================================
   GALLERY
   ========================================================================= */
.pk-chips { display: flex; gap: 8px; padding: 2px 18px 12px; overflow-x: auto; flex: none; }
.pk-chips::-webkit-scrollbar { height: 0; }
.pk-chips a.chip {
  flex: none; font: 700 12.5px/1 var(--pk-font); padding: 13px 15px; border-radius: 999px;
  background: var(--pk-card); color: var(--pk-ink-2); box-shadow: inset 0 0 0 1px var(--pk-line);
  transition: all .14s ease; white-space: nowrap; text-decoration: none; min-height: 40px;
  display: inline-flex; align-items: center; cursor: pointer; max-width: 60vw;
}
.pk-chips a.chip .nm, .pk-chips a.chip span { overflow: hidden; text-overflow: ellipsis; }
.pk-chips a.chip.on { background: var(--pk-teal); color: #fff; box-shadow: 0 4px 12px rgba(13,116,104,.26); }

/* Row-major 2-column grid: reads left-to-right, top-to-bottom in the gallery's
   (newest-first) order — unlike the old `columns:2` masonry, which filled
   column-major and scrambled the visual reading order. Square cells keep rows
   aligned; the full image is shown in the viewer. */
.pk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 2px 14px 24px; }
.pk-card {
  border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 5px 14px rgba(80,50,20,.10); position: relative; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
.pk-card:active { transform: scale(.98); }
.pk-card .img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background-size: cover; background-position: center; }
.pk-card .ov {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 10px;
  background: linear-gradient(180deg, transparent 55%, rgba(20,12,4,.42)); opacity: 0; transition: opacity .16s;
}
.pk-card:hover .ov { opacity: 1; }
.pk-card .heart {
  position: absolute; right: 8px; bottom: 8px; background: rgba(255,255,255,.94);
  border-radius: 999px; padding: 5px 9px; font: 700 11.5px/1 var(--pk-font); color: var(--pk-ochre);
  display: flex; align-items: center; gap: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.pk-card .heart.liked { background: var(--pk-ochre); color: #fff; }
.pk-card .by { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity .16s; }
.pk-card:hover .by { opacity: 1; }
/* Truncate a long uploader name to one line instead of wrapping over the photo. */
.pk-card .by .nm { font: 700 10.5px/1.2 var(--pk-font); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-card .fav-badge { position: absolute; left: 8px; top: 8px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }

/* select mode */
.pk-card .seldot {
  position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.5); border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
  color: #fff; transition: all .12s; z-index: 2;
}
.pk-card.selected .seldot { background: var(--pk-teal); }
.pk-card.selected { box-shadow: 0 0 0 3px var(--pk-teal); }
.pk-card.selmode .heart, .pk-card.selmode .by { display: none; }

.pk-day { padding: 12px 18px 6px; }
.pk-day .lab { font: 700 12px/1 var(--pk-font); color: var(--pk-ink-3); letter-spacing: .02em; display: flex; align-items: center; gap: 8px; }
.pk-day .lab::after { content: ''; flex: 1; height: 1px; background: var(--pk-line); }

/* selection action bar */
.pk-selbar {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 40;
  background: var(--pk-ink); color: #fff; border-radius: 18px; padding: 10px 12px 10px 18px;
  display: flex; align-items: center; gap: 12px; box-shadow: 0 12px 30px rgba(20,12,4,.4);
  animation: pk-up .22s ease;
}
.pk-selbar .n { flex: 1; font: 700 14px/1 var(--pk-font); }
.pk-selbar .n small { display: block; font-weight: 500; font-size: 11px; opacity: .7; margin-top: 3px; }
.pk-selbar button { background: var(--pk-ochre); color: #fff; height: 40px; padding: 0 16px; border-radius: 12px; font: 800 13.5px/1 var(--pk-font); display: flex; align-items: center; gap: 7px; }
.pk-selbar .x { background: rgba(255,255,255,.14); width: 40px; padding: 0; }
@keyframes pk-up { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* =========================================================================
   PHOTO DETAIL (overlay)
   ========================================================================= */
.pk-detail { position: absolute; inset: 0; z-index: 80; background: #15100a; display: flex; flex-direction: column; animation: pk-fade .2s ease; }
@keyframes pk-fade { from { opacity: 0; } to { opacity: 1; } }
.pk-detail .dhead {
  flex: none; padding: 50px 16px 10px; display: flex; align-items: center; gap: 12px; z-index: 5;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
}
.pk-detail .dhead .who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.pk-detail .dhead .who .nm { font: 700 14px/1 var(--pk-font); color: #fff; }
.pk-detail .dhead .who .tm { font: 500 11px/1 var(--pk-font); color: rgba(255,255,255,.6); margin-top: 3px; }
.pk-detail .stagewrap { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.pk-detail .stage { max-width: 100%; max-height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; width: 100%; height: 100%; }
.pk-detail .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.pk-detail .arrow.l { left: 10px; } .pk-detail .arrow.r { right: 10px; }
.pk-detail .dfoot { flex: none; background: #fffdf8; border-radius: 22px 22px 0 0; max-height: 46%; display: flex; flex-direction: column; }
.pk-detail .dactions { flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--pk-line); }
.pk-detail .react { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--pk-cream); color: var(--pk-ink); font: 800 14px/1 var(--pk-font); transition: transform .1s; }
.pk-detail .react.liked { background: var(--pk-ochre); color: #fff; }
.pk-detail .react:active { transform: scale(.92); }
.pk-detail .dactions .sp { flex: 1; }
.pk-detail .clist { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 14px; }
.pk-detail .clist::-webkit-scrollbar { width: 0; }
.pk-cm { display: flex; gap: 10px; }
.pk-cm .bd { flex: 1; }
.pk-cm .bd .nm { font: 700 13px/1 var(--pk-font); color: var(--pk-ink); }
.pk-cm .bd .tx { font: 400 13.5px/1.4 var(--pk-font); color: var(--pk-ink-2); margin-top: 3px; }
.pk-cm .bd .tm { font: 500 10.5px/1 var(--pk-font); color: var(--pk-ink-3); margin-top: 5px; }
.pk-detail .cbar { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px 14px; border-top: 1px solid var(--pk-line); }
.pk-detail .cbar input { flex: 1; height: 44px; border-radius: 999px; border: 1.5px solid var(--pk-line); background: var(--pk-cream); padding: 0 16px; font-size: 14px; outline: none; }
.pk-detail .cbar input:focus { border-color: var(--pk-ochre); }
.pk-detail .cbar .send { width: 44px; height: 44px; border-radius: 50%; background: var(--pk-ochre); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.pk-detail .cbar .send:disabled { opacity: .4; }

.pk-fly { position: absolute; pointer-events: none; z-index: 90; color: var(--pk-ochre); animation: pk-fly .7s ease-out forwards; }
@keyframes pk-fly { 0% { transform: scale(.4); opacity: 0; } 25% { opacity: 1; } 60% { transform: scale(1.25) translateY(-10px); opacity: 1; } 100% { transform: scale(1) translateY(-46px); opacity: 0; } }

/* =========================================================================
   UPLOAD SHEET
   ========================================================================= */
.pk-sheet-bg { position: absolute; inset: 0; z-index: 70; background: rgba(20,12,4,.5); animation: pk-fade .2s; display: flex; flex-direction: column; justify-content: flex-end; }
.pk-sheet { background: var(--pk-card); border-radius: 26px 26px 0 0; padding: 8px 22px 26px; animation: pk-up .26s ease; max-height: 92%; display: flex; flex-direction: column; }
.pk-sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--pk-line-2); margin: 4px auto 14px; }
.pk-sheet h2 { font-family: var(--pk-display); font-weight: 800; font-size: 24px; margin: 0 0 4px; text-align: center; letter-spacing: -.02em; }
.pk-sheet .lead { text-align: center; font-size: 13.5px; color: var(--pk-ink-2); margin: 0 0 18px; line-height: 1.45; }
.pk-bigsrc { display: flex; gap: 12px; }
.pk-big { flex: 1; aspect-ratio: 1; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; font: 800 14px/1.15 var(--pk-font); text-align: center; transition: transform .12s; }
.pk-big:active { transform: scale(.96); }
.pk-big.cam { background: linear-gradient(160deg, var(--pk-teal), var(--pk-teal-d)); box-shadow: 0 12px 24px rgba(13,116,104,.28); }
.pk-big.lib { background: linear-gradient(160deg, var(--pk-ochre), var(--pk-ochre-d)); box-shadow: 0 12px 24px rgba(181,106,12,.28); }
.pk-big .ic { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; }
.pk-recent { margin-top: 20px; }
.pk-recent .lab { font: 700 12px/1 var(--pk-font); color: var(--pk-ink-2); margin-bottom: 10px; display: flex; justify-content: space-between; }
.pk-recent .lab b { color: var(--pk-ochre); }
.pk-rgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pk-rgrid .ph { aspect-ratio: 1; border-radius: 12px; background-size: cover; background-position: center; position: relative; transition: transform .1s; }
.pk-rgrid .ph:active { transform: scale(.94); }
.pk-rgrid .ph .chk { position: absolute; right: 5px; top: 5px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.45); border: 2px solid #fff; display: flex; align-items: center; justify-content: center; color: #fff; }
.pk-rgrid .ph.sel .chk { background: var(--pk-teal); }
.pk-rgrid .ph.sel { outline: 3px solid var(--pk-teal); outline-offset: 2px; }
.pk-cap { margin-top: 18px; }
.pk-cap input { width: 100%; height: 48px; border: 1.5px solid var(--pk-line); border-radius: 14px; background: var(--pk-cream); padding: 0 14px; font-size: 14.5px; outline: none; }
.pk-cap input:focus { border-color: var(--pk-ochre); }

/* upload progress */
.pk-uploading { position: absolute; inset: 0; z-index: 75; background: rgba(251,242,226,.96); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px; animation: pk-fade .2s; }
.pk-uploading .ring { width: 120px; height: 120px; position: relative; }
.pk-uploading h3 { font-family: var(--pk-display); font-weight: 800; font-size: 22px; margin: 0; text-align: center; }
.pk-uploading p { font-size: 13.5px; color: var(--pk-ink-2); margin: 6px 0 0; text-align: center; }

/* success burst */
.pk-success { position: absolute; inset: 0; z-index: 78; background: rgba(251,242,226,.97); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px; animation: pk-fade .25s; }
.pk-success .check { width: 92px; height: 92px; border-radius: 50%; background: var(--pk-teal); color: #fff; display: flex; align-items: center; justify-content: center; animation: pk-pop .4s cubic-bezier(.2,1.5,.4,1); box-shadow: 0 14px 30px rgba(13,116,104,.34); }
@keyframes pk-pop { from { transform: scale(0); } to { transform: scale(1); } }
.pk-success h3 { font-family: var(--pk-display); font-weight: 800; font-size: 26px; margin: 18px 0 0; }
.pk-success p { font-size: 14px; color: var(--pk-ink-2); margin: 6px 0 0; text-align: center; }

/* =========================================================================
   CONTRIBUTORS
   ========================================================================= */
.pk-contrib { padding: 4px 18px 24px; }
.pk-hero-stat { background: linear-gradient(160deg, var(--pk-teal), var(--pk-teal-d)); border-radius: 20px; padding: 20px; color: #fff; display: flex; align-items: center; gap: 16px; box-shadow: 0 12px 26px rgba(13,116,104,.26); margin-bottom: 18px; position: relative; overflow: hidden; }
.pk-hero-stat .big { font-family: var(--pk-display); font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -.03em; }
.pk-hero-stat .lab { font-size: 13px; opacity: .9; margin-top: 2px; font-weight: 600; }
.pk-hero-stat .div { width: 1px; align-self: stretch; background: rgba(255,255,255,.25); }
.pk-clist { display: flex; flex-direction: column; gap: 2px; }
.pk-crow { display: flex; align-items: center; gap: 13px; padding: 11px 6px; }
.pk-crow .bd { flex: 1; min-width: 0; }
.pk-crow .bd .nm { font: 700 15px/1 var(--pk-font); color: var(--pk-ink); }
.pk-crow .bd .nm .you { font-size: 11px; color: var(--pk-teal); font-weight: 700; margin-left: 6px; }
.pk-crow .bd .sub { font-size: 12px; color: var(--pk-ink-3); margin-top: 3px; }
.pk-crow .cnt { font-family: var(--pk-display); font-weight: 800; font-size: 18px; color: var(--pk-ochre); }
.pk-crow .cnt small { font-size: 11px; color: var(--pk-ink-3); font-weight: 600; margin-left: 2px; }
.pk-crow .crown { color: var(--ochre-500); }
.pk-invite-card { margin-top: 18px; border: 1.5px dashed var(--pk-line-2); border-radius: 18px; padding: 18px; text-align: center; background: rgba(255,253,248,.6); }
.pk-invite-card p { font-size: 13.5px; color: var(--pk-ink-2); margin: 0 0 12px; }

/* =========================================================================
   SHARE / QR
   ========================================================================= */
.pk-share { padding: 6px 22px 24px; display: flex; flex-direction: column; align-items: center; }
.pk-qrcard { background: #fff; border-radius: 24px; padding: 22px; box-shadow: 0 14px 34px rgba(80,50,20,.16); width: 100%; text-align: center; position: relative; overflow: hidden; }
.pk-qrcard .evt { font-family: var(--pk-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; margin: 0 0 2px; }
.pk-qrcard .dt { font-size: 12px; color: var(--pk-ink-3); margin-bottom: 16px; font-weight: 600; }
.pk-qr { width: 196px; height: 196px; margin: 0 auto; }
.pk-qr svg { display: block; width: 100%; height: 100%; }
.pk-qrcard .scan { font-size: 12.5px; color: var(--pk-ink-2); margin-top: 14px; font-weight: 600; }
.pk-linkrow { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 16px; background: var(--pk-card); border: 1.5px solid var(--pk-line); border-radius: 14px; padding: 6px 6px 6px 16px; }
.pk-linkrow .url { flex: 1; min-width: 0; font: 600 13.5px/1 var(--font-mono); color: var(--pk-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-linkrow .copy { height: 40px; padding: 0 16px; border-radius: 10px; background: var(--pk-teal); color: #fff; font: 800 13px/1 var(--pk-font); display: flex; align-items: center; gap: 7px; flex: none; }
.pk-sharerow { display: flex; gap: 10px; width: 100%; margin-top: 14px; }
.pk-sharebtn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 0; border-radius: 16px; background: var(--pk-card); box-shadow: inset 0 0 0 1px var(--pk-line); font: 700 11px/1 var(--pk-font); color: var(--pk-ink-2); }
.pk-sharebtn .ic { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; }

/* =========================================================================
   CREATE EVENT
   ========================================================================= */
.pk-create { padding: 4px 22px 26px; }
.pk-create h1 { font-family: var(--pk-display); font-weight: 800; font-size: 30px; letter-spacing: -.02em; margin: 6px 0 4px; }
.pk-create .intro { font-size: 14px; color: var(--pk-ink-2); margin: 0 0 22px; line-height: 1.45; }
.pk-flabel { font: 700 12.5px/1 var(--pk-font); color: var(--pk-ink-2); margin: 18px 0 9px; display: block; }
.pk-input { width: 100%; height: 52px; border: 2px solid var(--pk-line); border-radius: 14px; background: #fffdf8; padding: 0 15px; font-size: 16px; color: var(--pk-ink); outline: none; transition: border-color .15s; }
.pk-input:focus { border-color: var(--pk-ochre); }
.pk-typegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pk-type { padding: 13px 6px; border-radius: 14px; background: var(--pk-card); box-shadow: inset 0 0 0 1.5px var(--pk-line); display: flex; flex-direction: column; align-items: center; gap: 7px; font: 700 12px/1 var(--pk-font); color: var(--pk-ink-2); transition: all .14s; }
.pk-type.on { box-shadow: inset 0 0 0 2px var(--pk-ochre); background: var(--ochre-050); color: var(--pk-ochre-d); }
.pk-type .em { font-size: 22px; }
.pk-cover { height: 132px; border-radius: 16px; border: 2px dashed var(--pk-line-2); background: rgba(255,253,248,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--pk-ink-3); font: 700 13px/1 var(--pk-font); position: relative; overflow: hidden; background-size: cover; background-position: center; }
.pk-cover.filled { border-style: solid; }
.pk-cover.filled .edit { position: absolute; right: 10px; bottom: 10px; background: rgba(20,12,4,.5); color: #fff; padding: 7px 12px; border-radius: 999px; font: 700 12px/1 var(--pk-font); display: flex; gap: 6px; align-items: center; }
.pk-toggle-row { display: flex; align-items: center; gap: 12px; background: var(--pk-card); border: 1.5px solid var(--pk-line); border-radius: 14px; padding: 14px 16px; }
.pk-toggle-row .bd { flex: 1; }
.pk-toggle-row .bd .t { font: 700 14px/1 var(--pk-font); color: var(--pk-ink); }
.pk-toggle-row .bd .d { font-size: 12px; color: var(--pk-ink-3); margin-top: 3px; }
.pk-switch { width: 48px; height: 28px; border-radius: 999px; background: var(--pk-line-2); position: relative; transition: background .18s; flex: none; }
.pk-switch.on { background: var(--pk-teal); }
.pk-switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.pk-switch.on i { transform: translateX(20px); }

/* =========================================================================
   TOAST
   ========================================================================= */
/* Fixed to the viewport (not the content column) so a flash toast is always in
   view, even on a page taller than the screen. Clears the bottom nav + home bar. */
.pk-toasts { position: fixed; left: 0; right: 0; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 95; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; max-width: 480px; margin: 0 auto; }
.pk-toast { background: var(--pk-ink); color: #fff; padding: 12px 18px; border-radius: 14px; font: 700 13.5px/1.2 var(--pk-font); display: flex; align-items: center; gap: 10px; box-shadow: 0 12px 30px rgba(20,12,4,.4); animation: pk-toast-in .26s ease; max-width: 84%; }
.pk-toast .ic { color: var(--teal-200); flex: none; }
@keyframes pk-toast-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* generic back header */
.pk-back { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 14px 10px; }
.pk-back h3 { font-family: var(--pk-display); font-weight: 800; font-size: 17px; margin: 0; flex: 1; letter-spacing: -.01em; }

/* =========================================================================
   APP SHELL — responsive page container (replaces the design-canvas phone
   frame). The app is a normal responsive web page: a phone-width column
   centered on a warm canvas, going full-bleed on small screens.
   ========================================================================= */
.pk-app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--pk-cream);
  box-shadow: 0 0 40px rgba(40,24,8,.10);
  /* The photo viewer (.pk-detail) is position:absolute; inset:0 — anchor it to
     the app shell so on desktop it fills the 480px column instead of spilling
     full-bleed across the viewport with controls flung to the screen corners. */
  position: relative;
}

/* fixed language toggle, tucked in a corner */
.pk-langtoggle {
  position: fixed; top: 12px; right: 12px; z-index: 100;
  background: rgba(255,253,248,.86); backdrop-filter: blur(8px);
  border-radius: 999px; box-shadow: var(--shadow-sm);
  padding: 6px 4px;
}
.pk-langtoggle a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 28px; padding: 0 8px;
  font: 800 12px/1 var(--pk-font); letter-spacing: .04em;
  color: var(--pk-ochre); text-decoration: none; border-radius: 999px;
}
.pk-langtoggle a:hover { background: var(--ochre-050); }

/* Bottom-nav items are <a> wrappers around the styled labels. */
.pk-nav > a { flex: 1; display: flex; text-decoration: none; }
.pk-nav > a > .nlab { flex: 1; }
.pk-nav .center .fab { text-decoration: none; }
.pk-nav .center .fab span { font-size: 28px; line-height: 1; }

/* Hide Alpine-cloaked elements until Alpine initialises (progressive). */
[x-cloak] { display: none !important; }

/* Visible keyboard-focus ring. Many controls clear the default outline on
   :focus; restore a clear ring for :focus-visible (keyboard navigation) only,
   so mouse users don't see it but keyboard users always do. */
a:focus-visible, button:focus-visible, input:focus-visible,
label:focus-visible, [tabindex]:focus-visible, .pk-card:focus-visible {
  outline: 3px solid var(--pk-ochre);
  outline-offset: 2px;
  border-radius: 8px;
}
/* A label wrapping a visually-hidden-but-focusable control (e.g. the upload
   file picker) shows the ring when that control is keyboard-focused. */
label:has(:focus-visible) { outline: 3px solid var(--pk-ochre); outline-offset: 2px; }

/* Visually hidden but kept in the tab order and the accessibility tree — for
   inputs we hide visually (a styled <label> is the visible affordance) yet must
   remain reachable and operable by keyboard / assistive tech. NOT display:none,
   which removes the control from the tab order entirely. */
.pk-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* =========================================================================
   REDUCED MOTION — respect the user's OS preference.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .pk-card, .pk-btn, .pk-iconbtn, .pk-nav .center .fab,
  .pk-confetti, .pk-confetti i { animation: none !important; transition: none !important; }
}

/* =========================================================================
   RESPONSIVE — tablet & desktop. Mobile (<768px) is unchanged.
   The photo gallery fills the width with fluid columns and the single-photo
   viewer goes true full-screen; form/text screens stay in a readable, centred
   column. CSS-only — no markup changes.
   ========================================================================= */
@media (min-width: 768px) {
  /* Warm canvas behind the wide-shell pages (no white gutter). */
  body { background: var(--pk-cream); }

  /* Most pages KEEP the centred app column, so page chrome (app bar, back
     header, join cover) and content stay aligned. Only pages that opt in
     (.pk-app--wide = gallery, landing) take the full width and drop the
     phone-card shadow. */
  .pk-app--wide { max-width: 1180px; box-shadow: none; }

  /* Gallery (wide): a fluid full-width grid — as many ~210px columns as fit. */
  .pk-app--wide .pk-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; padding: 6px 26px 44px; }
  .pk-app--wide .pk-appbar { padding: 12px 26px 14px; }
  .pk-app--wide .pk-chips { padding-left: 26px; padding-right: 26px; }
  .pk-chips a.chip { max-width: none; }
  .pk-card { border-radius: 18px; }

  /* The phone bottom tab-bar is a mobile pattern; hide it on bigger screens.
     The top app bar covers navigation: the gallery bar has the Guests link +
     the Add CTA, the contributors bar has a back-to-gallery arrow. */
  .pk-nav { display: none; }

  /* True full-screen photo viewer — break out of the shell. `fixed` is
     viewport-relative here (no ancestor sets transform/filter). */
  .pk-detail { position: fixed; }
  .pk-detail .arrow.l { left: 24px; }
  .pk-detail .arrow.r { right: 24px; }
  .pk-detail .dfoot { max-width: 760px; margin-left: auto; margin-right: auto; width: 100%; }
}

@media (min-width: 1280px) {
  .pk-app--wide { max-width: 1480px; }
  .pk-app--wide .pk-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

/* =========================================================================
   LANDING — a keepsake / instant-photo album. Warm paper, ochre + pine-teal,
   a handwritten (Caveat) accent, and a tilted photo collage that settles in
   on load. Built on the brand tokens; entrance motion is auto-disabled by the
   prefers-reduced-motion rule above.
   ========================================================================= */
.pk-landing { position: relative; max-width: 1080px; margin: 0 auto; padding: 16px 22px 48px; overflow: hidden; }
.pk-landing > * { position: relative; z-index: 1; }
.pk-landing-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pk-landing-bg .glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; }
.pk-landing-bg .glow.a { width: 340px; height: 340px; top: -90px; right: -70px; background: radial-gradient(circle, var(--ochre-300), transparent 68%); }
.pk-landing-bg .glow.b { width: 300px; height: 300px; bottom: 90px; left: -90px; background: radial-gradient(circle, var(--teal-200), transparent 68%); }
/* fine paper grain over the whole page */
.pk-landing::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.pk-landing-head { display: flex; justify-content: center; padding: 6px 0 20px; }

/* ---- hero ---- */
.pk-hero { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
.pk-hero-kicker { color: var(--pk-ochre); display: block; margin-bottom: 14px; }
.pk-hero-title { font-size: clamp(34px, 8.5vw, 50px); line-height: 1.02; color: var(--pk-ink); margin: 0; text-wrap: balance; }
.pk-hero-note { font-family: 'Caveat', cursive; font-weight: 700; font-size: clamp(23px, 6.5vw, 31px); color: var(--pk-ochre); display: inline-block; transform: rotate(-3deg); transform-origin: left center; margin: 14px 0 0; padding-bottom: 9px; position: relative; }
.pk-hero-note::after { content: ""; position: absolute; left: 0; right: -4px; bottom: 0; height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='9'%3E%3Cpath d='M2 6 Q 20 1 40 5.5 T 80 5.5 T 118 4.5' stroke='%23b56a0c' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / 100% 100%; }
.pk-hero-lead { font-size: 15.5px; line-height: 1.55; color: var(--pk-ink-2); margin: 20px 0 0; max-width: 44ch; }
.pk-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 26px; }
.pk-hero-cta { width: auto; padding: 0 24px; gap: 10px; }
.pk-hero-cta .arr { transition: transform .2s ease; }
.pk-hero-cta:hover .arr { transform: translateX(4px); }
.pk-hero-login { color: var(--pk-ochre); font-weight: 700; font-size: 14.5px; text-decoration: none; border-bottom: 1.5px solid transparent; transition: border-color .15s; }
.pk-hero-login:hover { border-bottom-color: currentColor; }

/* ---- instant-photo collage ---- */
.pk-collage { position: relative; height: 312px; max-width: 320px; margin: 10px auto 4px; }
.pk-collage .snap { position: absolute; background: var(--pk-card); padding: 9px 9px 30px; border-radius: 4px; box-shadow: 0 20px 40px rgba(60,38,12,.20); }
.pk-collage .snap .ph { display: block; width: 150px; height: 150px; border-radius: 2px; }
.pk-collage .snap .cap { position: absolute; left: 0; right: 0; bottom: 4px; margin: 0; text-align: center; font-family: 'Caveat', cursive; font-weight: 700; font-size: 21px; color: var(--ochre-600); }
.pk-collage .snap.s2 .cap { color: var(--teal-500); }
.pk-collage .snap .mk { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); opacity: .9; }
.pk-collage .snap .tape { position: absolute; top: -9px; left: 50%; width: 58px; height: 19px; transform: translateX(-50%) rotate(-4deg); background: repeating-linear-gradient(90deg, rgba(13,116,104,.20) 0 6px, rgba(13,116,104,.12) 6px 12px); }
.snap.s1 { top: 4px; left: 4px; z-index: 2; transform: rotate(-7deg); }
.snap.s2 { top: 26px; right: 0; z-index: 3; transform: rotate(6deg); }
.snap.s3 { bottom: 0; left: 50%; margin-left: -84px; z-index: 4; transform: rotate(-2deg); }
.p-gold  { background: radial-gradient(circle at 26% 28%, rgba(255,255,255,.6), transparent 34%), radial-gradient(circle at 72% 66%, rgba(255,232,170,.75), transparent 42%), linear-gradient(140deg, var(--ochre-500), var(--ochre-700)); }
.p-teal  { background: radial-gradient(circle at 70% 26%, rgba(255,255,255,.45), transparent 34%), radial-gradient(circle at 30% 72%, var(--teal-400), transparent 46%), linear-gradient(150deg, var(--teal-600), var(--teal-800)); }
.p-blush { background: radial-gradient(circle at 34% 32%, rgba(255,255,255,.7), transparent 40%), linear-gradient(140deg, #f4dcc0, #e7b88c); }

/* ---- how it works ---- */
.pk-steps { margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--pk-line); }
.pk-steps-kicker { color: var(--pk-ink-3); display: block; margin-bottom: 15px; }
.pk-steplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pk-steplist .step { display: flex; align-items: flex-start; gap: 15px; background: var(--pk-card); border: 1.5px solid var(--pk-line); border-radius: 16px; padding: 16px 18px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.pk-steplist .step:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(60,38,12,.10); border-color: var(--pk-line-2); }
.pk-steplist .step .n { flex: none; font-family: var(--font-mono); font-weight: 600; font-size: 12.5px; color: var(--pk-ochre); background: var(--ochre-050); border: 1px solid var(--ochre-100); border-radius: 9px; padding: 7px 8px; line-height: 1; }
.pk-steplist .step p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.42; color: var(--pk-ink); }

/* ---- one-shot entrance (jumps to final state under reduced-motion) ---- */
@keyframes pk-rise  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pk-drop1 { from { opacity: 0; transform: translateY(-26px) rotate(-15deg); } to { opacity: 1; transform: translateY(0) rotate(-7deg); } }
@keyframes pk-drop2 { from { opacity: 0; transform: translateY(-30px) rotate(16deg); }  to { opacity: 1; transform: translateY(0) rotate(6deg); } }
@keyframes pk-drop3 { from { opacity: 0; transform: translateY(-22px) rotate(-12deg); } to { opacity: 1; transform: translateY(0) rotate(-2deg); } }
.pk-landing-head { animation: pk-rise .5s 0s both; }
.pk-hero-kicker  { animation: pk-rise .55s .05s both; }
.pk-hero-title   { animation: pk-rise .6s .12s both; }
.pk-hero-note    { animation: pk-rise .6s .26s both; }
.pk-hero-lead    { animation: pk-rise .6s .34s both; }
.pk-hero-actions { animation: pk-rise .6s .42s both; }
.snap.s1 { animation: pk-drop1 .7s .34s both; }
.snap.s2 { animation: pk-drop2 .7s .46s both; }
.snap.s3 { animation: pk-drop3 .7s .58s both; }

@media (min-width: 768px) {
  .pk-landing { padding: 24px 32px 64px; }
  .pk-landing-head { justify-content: flex-start; }
  .pk-hero { grid-template-columns: 1.04fr .96fr; gap: 46px; padding: 14px 0 10px; }
  .pk-hero-title { font-size: clamp(46px, 4.6vw, 58px); }
  .pk-hero-lead { font-size: 16px; }
  .pk-collage { height: 392px; max-width: none; margin: 0; }
  .pk-collage .snap .ph { width: 188px; height: 188px; }
  .snap.s1 { top: 26px; left: 4%; }
  .snap.s2 { top: 64px; right: 6%; }
  .snap.s3 { bottom: 6px; left: 42%; margin-left: -94px; }
  .pk-steps { margin-top: 52px; }
  .pk-steplist { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .pk-steplist .step { flex-direction: column; gap: 12px; }
}