/* PKILLAAH - one stylesheet, same-origin only, no external request of any kind.
 *
 * Palette, one job each (work/direction_brief.md):
 *   --ground     #fcfdfe  page ground
 *   --ink        #101216  type, photo borders, CTA fill              18.41:1 on ground
 *   --pink       #f15aa3  identity accent on large display glyphs     3.12:1, large type only
 *   --pink-deep  #a91a5b  name line and conversion controls           7.03:1 on white
 *   --pool       #0188b6  secondary accent, hover flips, large marks  3.97:1, graphic use only
 *   --pool-deep  #166f9d  secondary small accent text and links       5.43:1 on ground
 *   --muted      #3d434d  secondary type, always solid, never opacity
 *   action       pink-deep fill, white label.
 *   status       none. There is no live-status truth, so nothing pulses or loops.
 *
 * Type: Anybody variable (self-hosted), 900 weight / 118% width / caps for display;
 * system-ui lowercase for the voice whisper lines.
 *
 * Motion, four named jobs and nothing else: name-inflate, beat-cuts, press-snap,
 * dialog-beat. Base CSS is always the FINAL visible state, so no content depends on
 * JS or on an animation completing. Everything that moves moves transform/opacity
 * only, so there is no layout shift.
 */

/* ---------- reset ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body { margin: 0; }

img,
svg { display: block; }

/* ---------- font ---------- */

@font-face {
  font-family: "Anybody";
  src: url("/assets/anybody-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
}

/* Metrics-tuned fallback, so the pre-swap line occupies the same width as the final line
 * and the swap moves nothing sideways.
 *
 * Measured, not guessed: work/fallback_metrics.py renders the shipped woff2 in headless
 * Chrome at font-size 100px against the exact shipped lockup structure (one inline-block
 * per glyph, letter-spacing -0.01em, so kerning is discarded identically in both faces):
 *
 *   "PKILLAAH", Anybody wght 900 / wdth 118%   604.547px
 *   "PKILLAAH", Arial Black untuned            558.766px   (-7.573%)
 *   width ratio                                108.193%  -> size-adjust: 108.2%
 *   "PKILLAAH", Arial Black at 108.2%          605.219px   (+0.111%, inside the 2% gate)
 *
 * Arial Black is the NARROWER face, so the untuned fallback never overflowed; tuning it
 * removes the 7.6% reflow that used to happen the moment the webfont swapped in.
 */
@font-face {
  font-family: "Anybody Fallback";
  src: local("Arial Black");
  size-adjust: 108.2%;
}

/* ---------- tokens ---------- */

:root {
  --ground: #fcfdfe;
  --ink: #101216;
  --pink: #f15aa3;
  --pink-deep: #a91a5b;
  --pool: #0188b6;
  --pool-deep: #166f9d;
  --muted: #3d434d;
  --paper: #ffffff;

  --gut: 4.6vw;
  /* --band is the ONE seam between sections, not a padding on both sides of each one:
   * bands carry padding-top only and the hero carries none at the bottom, so every
   * section-to-section gap is exactly this value. Two stacked paddings is what made the
   * dead zones read as unfinished. */
  --band: 72px;
  --edge: 3px;

  --display: "Anybody", "Anybody Fallback", sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

@media (min-width: 768px) {
  :root { --band: 96px; }
}

@media (min-width: 1024px) {
  :root {
    --gut: 6vw;
    --band: 120px;
  }
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.45;
}

.pk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pk-pool { color: var(--pool); }

.pk-pool-deep { color: var(--pool-deep); }

/* ---------- shared conversion hardware (press-snap) ----------
 * One definition for every members CTA and every confirmation submit button, so the
 * three landing CTAs and both confirmation surfaces are the same object. The hover
 * flip carries no transition on purpose: it is a cut, not a fade. Only transform is
 * transitioned, which is the 70ms press return.
 */

.pk-cta,
.pk-panel button[type="submit"],
.pk-dialog button[type="submit"] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 0 18px 0 24px;
  border: 0;
  border-radius: 0;
  background: var(--pink-deep);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 118%;
  font-size: clamp(19px, 5.1vw, 22px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform 70ms;
}

.pk-cta { margin-top: clamp(20px, 3.4vw, 30px); }

.pk-cta::before,
.pk-panel button[type="submit"]::before,
.pk-dialog button[type="submit"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 6px;
  background: transparent;
}

@media (hover: hover) {
  .pk-cta:hover::before,
  .pk-panel button[type="submit"]:hover::before,
  .pk-dialog button[type="submit"]:hover::before { background: var(--pool); }
}

.pk-cta:active,
.pk-panel button[type="submit"]:active,
.pk-dialog button[type="submit"]:active { transform: translateY(2px); }

.pk-arrow {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

@media (min-width: 1024px) {
  .pk-cta {
    display: inline-flex;
    width: auto;
    min-width: 280px;
    min-height: 64px;
  }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--pink-deep);
  outline-offset: 2px;
}

/* ---------- photo cards ---------- */

.pk-card {
  margin: 0;
  border: var(--edge) solid var(--ink);
  background: var(--paper);
}

.pk-card img {
  width: 100%;
  height: auto;
}

.pk-card-cap {
  border-top: var(--edge) solid var(--ink);
  background: var(--paper);
  padding: 11px 13px;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- hero ---------- */

.pk-main { padding: 0 var(--gut); }

.pk-hero { padding: clamp(26px, 7vh, 84px) 0 0; }

.pk-hero-type { container-type: inline-size; }

/* overflow-x: clip is a hard guard on the two display lines: whatever face is in use, no
 * glyph can push the document wider than the viewport. Vertical stays visible on purpose
 * (line-height 0.82 lets the caps sit outside their own line box), which the spec allows
 * for the clip/visible pair. */
.pk-name {
  position: relative;
  overflow-x: clip;
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 118%;
  font-size: clamp(45px, 14.5vw, 150px);
  line-height: 0.82;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

/* nowrap is a guard, not a style choice: the lockup is one line by definition, and a
 * wrapped trailing glyph would break the identity. The fill constants below leave
 * slack so nowrap never has to absorb an overflow. */
.pk-glyphs {
  display: block;
  white-space: nowrap;
}

.pk-g { display: inline-block; }

.pk-g-a { color: var(--pink); }

.pk-legal-name {
  margin: clamp(14px, 2vw, 22px) 0 0;
  font-family: var(--display);
  font-weight: 760;
  font-stretch: 108%;
  font-size: clamp(23px, 6.4vw, 36px);
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pink-deep);
}

.pk-whisper {
  margin: clamp(15px, 2.6vw, 24px) 0 0;
  font-size: clamp(17px, 5vw, 23px);
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--ink);
}

.pk-hero-card { margin-top: var(--band); }

@media (min-width: 768px) and (max-width: 1023px) {
  .pk-hero-card { width: 60%; }
}

@media (min-width: 1024px) {
  .pk-hero {
    display: grid;
    grid-template-columns: minmax(0, 62fr) minmax(0, 32fr);
    column-gap: 6%;
    align-items: start;
  }

  .pk-hero-card {
    margin-top: 0;
    max-width: 480px;
  }

  .pk-name { font-size: 8.7vw; }

  .pk-legal-name { font-size: clamp(28px, 2.2vw, 38px); }

  .pk-whisper { font-size: clamp(21px, 1.7vw, 26px); }
}

/* ---------- about band ---------- */

.pk-band { padding: var(--band) 0 0; }

.pk-about-line {
  margin: 0;
  font-size: clamp(26px, 8.2vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-transform: lowercase;
}

/* The chip sits directly under the line at every width. It used to be a second grid
 * column on desktop, which stranded it against the right edge with nothing to relate to. */
.pk-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-top: 28px;
  padding: 6px 16px 6px 6px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 70ms;
}

.pk-chip img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.pk-glyph {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: var(--ink);
}

@media (hover: hover) {
  .pk-chip:hover { border-color: var(--pool); }

  .pk-chip:hover .pk-glyph { color: var(--pool); }
}

.pk-chip:active { transform: translateY(2px); }

@media (min-width: 1024px) {
  .pk-about-line { font-size: clamp(36px, 3.4vw, 52px); }
}

/* ---------- party band ----------
 * Her stream line is a display SCREAM, not a caption bar: the photo is a bare bordered
 * square and the line carries the voice at display scale, so the right column is a group
 * (line + CTA) instead of a lone button floating in a column of its own.
 */

.pk-party-line {
  margin: 0;
  font-family: var(--display);
  font-weight: 860;
  font-stretch: 118%;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.pk-party-side { margin-top: clamp(20px, 3.4vw, 30px); }

@media (min-width: 768px) and (max-width: 1023px) {
  .pk-party-card { width: 60%; }
}

@media (min-width: 1024px) {
  .pk-party {
    display: grid;
    grid-template-columns: 440px minmax(0, 1fr);
    column-gap: 5vw;
    justify-content: start;
    align-items: center;
  }

  .pk-party-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-top: 0;
  }
}

/* ---------- find me ---------- */

.pk-find-label {
  margin: 0 0 clamp(18px, 3.4vw, 26px);
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 118%;
  font-size: clamp(24px, 7vw, 30px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.pk-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pk-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 5px;
  min-height: 170px;
  padding: 16px;
  border: var(--edge) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: transform 70ms;
}

.pk-tile .pk-glyph {
  width: 32px;
  height: 32px;
  margin-bottom: auto;
}

.pk-tile-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.pk-tile-handle {
  font-size: 13px;
  line-height: 1.2;
  color: var(--muted);
}

@media (hover: hover) {
  .pk-tile:hover { border-color: var(--pool); }

  .pk-tile:hover .pk-glyph { color: var(--pool); }
}

.pk-tile:active { transform: translateY(2px); }

@media (min-width: 1024px) {
  .pk-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
}

/* ---------- closer ---------- */

.pk-closer { container-type: inline-size; }

.pk-closer-name {
  overflow-x: clip;
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 118%;
  font-size: clamp(36px, 11.1vw, 134px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

@media (min-width: 1024px) {
  .pk-closer-name { font-size: 10.7vw; }
}

/* ---------- footer ---------- */

.pk-footer { padding: var(--band) var(--gut) clamp(28px, 5vw, 44px); }

.pk-footer-name {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- quiet pages: confirmation, 404 ---------- */

.pk-quiet-head { padding: clamp(20px, 4vw, 32px) var(--gut) 0; }

.pk-wordmark {
  display: inline-block;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 118%;
  font-size: 22px;
  line-height: 44px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.pk-panel {
  max-width: 620px;
  padding: clamp(26px, 7vw, 64px) var(--gut) clamp(48px, 10vw, 96px);
}

.pk-panel-title {
  margin: 0 0 clamp(20px, 4vw, 30px);
  font-family: var(--text);
  font-weight: 600;
  font-size: clamp(22px, 5.6vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.pk-panel label,
.pk-dialog label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
}

/* The confirmation checkbox is a 44x44 target in its own right, drawn as a mini tile so it
 * belongs to the same hardware family as the photo cards and the find-me tiles: 3px ink
 * edge on white, and the pool accent only once it is actually checked. */
.pk-panel input[type="checkbox"],
.pk-dialog input[type="checkbox"] {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  margin: 0;
  border: var(--edge) solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  accent-color: var(--pool);
  cursor: pointer;
}

.pk-panel button[type="submit"],
.pk-dialog button[type="submit"] { margin-top: clamp(16px, 3vw, 22px); }

@media (min-width: 1024px) {
  .pk-panel button[type="submit"],
  .pk-dialog button[type="submit"] {
    display: inline-flex;
    width: auto;
    min-width: 280px;
    min-height: 64px;
  }
}

/* padding, not just line-height: "Back" is only ~33px of text, so the box needs horizontal
 * padding to clear 44x44. The negative left margin keeps the text optically flush with the
 * panel edge while the target grows outwards. */
.pk-back {
  display: inline-block;
  margin-top: clamp(16px, 3vw, 24px);
  margin-left: -12px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  font-size: 15px;
  line-height: 44px;
  color: var(--pool-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- members dialog ---------- */

.pk-dialog {
  position: relative;
  width: min(480px, calc(100vw - 2 * var(--gut)));
  padding: clamp(22px, 5vw, 34px);
  border: var(--edge) solid var(--ink);
  background: var(--ground);
  color: var(--ink);
}

.pk-dialog::backdrop { background: rgba(16, 18, 22, 0.72); }

.pk-dialog-x {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: transform 70ms;
}

@media (hover: hover) {
  .pk-dialog-x:hover { color: var(--pool); }
}

.pk-dialog-x:active { transform: translateY(2px); }

/* ---------- motion ----------
 * Every rule below is gated on html.pk-js AND on prefers-reduced-motion:
 * no-preference. With JS off, or with reduced motion asked for, none of these
 * selectors can match, so the page is simply the final state.
 */

@keyframes pk-inflate {
  0% { transform: scaleX(0.62); }
  62% { transform: scaleX(1.06); }
  100% { transform: scaleX(1); }
}

@keyframes pk-slide {
  0% { transform: translateX(-0.42em); }
  100% { transform: translateX(0); }
}

@keyframes pk-cut {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.pk-b1 { --pk-delay: 0ms; }

.pk-b2 { --pk-delay: 90ms; }

.pk-b3 { --pk-delay: 180ms; }

.pk-b4 { --pk-delay: 270ms; }

.pk-b5 { --pk-delay: 360ms; }

@media (prefers-reduced-motion: no-preference) {
  /* name-inflate: the two A glyphs stretch open from the left, the trailing H
     slides out of the overlap. Transforms only, so the lockup never reflows. */
  html.pk-js .pk-hero-type.pk-arrive .pk-g-a {
    transform-origin: left center;
    animation: pk-inflate 620ms cubic-bezier(0.22, 1.36, 0.36, 1) both;
  }

  html.pk-js .pk-hero-type.pk-arrive .pk-g-h {
    animation: pk-slide 620ms cubic-bezier(0.22, 1.36, 0.36, 1) both;
  }

  /* the voice line is a single cut one beat later, never a fade */
  html.pk-js .pk-hero-type.pk-arrive .pk-whisper {
    animation: pk-cut 1ms steps(1, end) both;
    animation-delay: 90ms;
  }

  /* beat-cuts: below-fold bands cut in, element by element, 90ms apart */
  html.pk-js .pk-band:not(.pk-cut) .pk-beat { opacity: 0; }

  html.pk-js .pk-band.pk-cut .pk-beat {
    animation: pk-cut 1ms steps(1, end) both;
    animation-delay: var(--pk-delay, 0ms);
  }

  /* dialog-beat: the dialog is a hard cut, its row and button punch one beat later */
  html.pk-js .pk-dialog:not(.pk-cut) label,
  html.pk-js .pk-dialog:not(.pk-cut) button[type="submit"] { opacity: 0; }

  html.pk-js .pk-dialog.pk-cut label,
  html.pk-js .pk-dialog.pk-cut button[type="submit"] {
    animation: pk-cut 1ms steps(1, end) both;
    animation-delay: 90ms;
  }
}

/* Container-relative display sizing: each display line fills its own column, at every
 * width, with no viewport arithmetic and no breakpoint to retune. Declared last so it
 * wins over the vw fallbacks above wherever container queries are supported.
 *
 * The two constants are calibrated against real browser metrics, not guessed. Measured
 * per glyph in Chrome against the shipped woff2 at wght 900 / wdth 118%: the eight-span
 * lockup advances 6.0543em and the plain ten-glyph closer line 7.787em, letter-spacing
 * included. So 16cqw fills 96.9% of the lockup column and 12.2cqw fills 95.0% of the
 * closer column, each leaving deliberate slack: at 17.4cqw the trailing H of the lockup
 * wrapped to a second line. The vw values above are the no-container-query fallback and
 * track the same fills.
 */
@supports (font-size: 1cqw) {
  .pk-name { font-size: 16cqw; }

  .pk-closer-name { font-size: 12.2cqw; }
}

/* ---------- creator review revision: pink editorial system ---------- */

:root {
  --pink: #f15aa3;
  --pink-deep: #9f1557;
  --pink-soft: #fff0f7;
  --pink-pale: #ffd9ea;
  --members: #00aff0;
}

.pk-main { overflow: hidden; }

.pk-cta,
.pk-panel button[type="submit"],
.pk-dialog button[type="submit"] {
  border-radius: 8px;
  background: var(--members);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 800;
  font-stretch: normal;
  font-size: 18px;
  letter-spacing: 0;
  box-shadow: 8px 8px 0 var(--pink-pale);
}

.pk-cta::before,
.pk-panel button[type="submit"]::before,
.pk-dialog button[type="submit"]::before {
  width: 7px;
  border-radius: 8px 0 0 8px;
  background: var(--pink-deep);
}

@media (hover: hover) {
  .pk-cta:hover,
  .pk-panel button[type="submit"]:hover,
  .pk-dialog button[type="submit"]:hover {
    box-shadow: 4px 4px 0 var(--pink);
  }

  .pk-cta:hover::before,
  .pk-panel button[type="submit"]:hover::before,
  .pk-dialog button[type="submit"]:hover::before { background: var(--pink-deep); }
}

.pk-card {
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  box-shadow: 12px 12px 0 var(--pink-pale);
}

.pk-card-cap {
  border: 0;
  background: var(--pink-soft);
  font-family: var(--text);
  font-weight: 750;
  letter-spacing: 0.08em;
}

.pk-legal-name,
.pk-party-line,
.pk-find-label,
.pk-tile,
.pk-closer-name,
.pk-footer-name,
.pk-wordmark,
.pk-dialog-x {
  font-family: var(--text);
  font-stretch: normal;
}

.pk-legal-name {
  font-weight: 760;
  color: var(--pink-deep);
}

.pk-inline-link {
  color: var(--pink-deep);
  font-weight: 750;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.pk-hero-card { box-shadow: 16px 16px 0 var(--pink); }

.pk-about {
  margin-right: calc(-1 * var(--gut));
  margin-left: calc(-1 * var(--gut));
  padding-right: var(--gut);
  padding-bottom: clamp(46px, 8vw, 78px);
  padding-left: var(--gut);
  background: var(--pink-soft);
}

.pk-about-line {
  max-width: 850px;
  font-weight: 620;
}

.pk-chip {
  border: 0;
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--pink-pale);
}

.pk-party {
  position: relative;
  padding-bottom: clamp(48px, 8vw, 84px);
}

.pk-party::after {
  content: "";
  position: absolute;
  right: -10vw;
  bottom: 0;
  width: 42vw;
  height: 14px;
  background: var(--pink);
}

.pk-photo-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(104px, 0.9fr);
  align-items: end;
  gap: 12px;
  max-width: 680px;
}

.pk-party-card { box-shadow: none; }

.pk-party-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pk-party-card-main img { aspect-ratio: 3 / 4; }

.pk-party-card-side {
  margin-bottom: 28px;
  box-shadow: 8px 8px 0 var(--pink);
}

.pk-party-card-side img { aspect-ratio: 3 / 4; }

.pk-party-line {
  max-width: 520px;
  font-weight: 820;
  letter-spacing: 0;
}

.pk-find {
  margin-right: calc(-1 * var(--gut));
  margin-left: calc(-1 * var(--gut));
  padding-right: var(--gut);
  padding-bottom: clamp(56px, 9vw, 96px);
  padding-left: var(--gut);
  background: var(--pink);
}

.pk-find-label {
  max-width: 760px;
  margin-bottom: 28px;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.pk-tiles {
  grid-template-columns: 1fr;
  gap: 10px;
}

.pk-tile {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 34px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 14px;
  min-height: 78px;
  padding: 12px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 6px 6px 0 rgba(159, 21, 87, 0.34);
}

.pk-tile .pk-glyph {
  grid-row: 1 / span 2;
  align-self: center;
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 10px;
  border-radius: 50%;
  background: var(--pink-soft);
  color: var(--pink-deep);
}

.pk-tile-name {
  align-self: end;
  font-size: 18px;
  font-weight: 780;
}

.pk-tile-handle {
  align-self: start;
  font-size: 13px;
}

.pk-tile-arrow {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 26px;
  line-height: 1;
  color: var(--pink-deep);
}

.pk-tile:nth-child(2) {
  background: var(--ink);
  color: var(--paper);
}

.pk-tile:nth-child(2) .pk-tile-handle { color: var(--pink-pale); }

.pk-tile:nth-child(2) .pk-glyph {
  background: var(--pink);
  color: var(--ink);
}

.pk-tile:nth-child(2) .pk-tile-arrow { color: var(--pink); }

@media (hover: hover) {
  .pk-tile:hover {
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 3px 10px 0 rgba(159, 21, 87, 0.38);
  }

  .pk-tile:hover .pk-glyph { color: var(--pink-deep); }
}

.pk-closer {
  margin-right: calc(-1 * var(--gut));
  margin-left: calc(-1 * var(--gut));
  padding-right: var(--gut);
  padding-bottom: clamp(52px, 8vw, 84px);
  padding-left: var(--gut);
  background: var(--pink-soft);
}

.pk-closer-name {
  font-weight: 850;
  letter-spacing: 0;
  color: var(--pink-deep);
}

.pk-footer {
  background: var(--pink-soft);
  border-top: 1px solid var(--pink-pale);
}

.pk-footer-name {
  font-weight: 750;
  letter-spacing: 0.12em;
  color: var(--pink-deep);
}

.pk-panel,
.pk-dialog {
  border-color: var(--pink-deep);
  background: var(--pink-soft);
}

@media (min-width: 768px) {
  .pk-tiles {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
  }

  .pk-tile:nth-child(1),
  .pk-tile:nth-child(4) { grid-column: span 5; }

  .pk-tile:nth-child(2),
  .pk-tile:nth-child(3) { grid-column: span 7; }
}

@media (min-width: 1024px) {
  .pk-party {
    grid-template-columns: minmax(480px, 560px) minmax(300px, 1fr);
    column-gap: 5vw;
    padding-top: 80px;
    padding-bottom: 64px;
  }

  .pk-photo-duo { max-width: 560px; }

  .pk-party-side { padding-top: 4%; }

  .pk-find-label { font-size: 48px; }
}

@media (prefers-reduced-motion: no-preference) {
  html.pk-js .pk-hero-type.pk-arrive .pk-g-a {
    animation-duration: 1860ms;
  }

  html.pk-js .pk-hero-type.pk-arrive .pk-g-h {
    animation-duration: 1860ms;
  }
}

/* ---------- creator review v5: immersive, social-first composition ---------- */

.pk-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(900px, 92svh);
  margin-right: calc(-1 * var(--gut));
  margin-left: calc(-1 * var(--gut));
  padding: clamp(130px, 28vh, 270px) var(--gut) clamp(78px, 11vh, 116px);
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
}

.pk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14, 15, 19, 0.02) 24%, rgba(14, 15, 19, 0.35) 58%, rgba(14, 15, 19, 0.9) 100%);
  pointer-events: none;
}

.pk-hero-type {
  position: relative;
  z-index: 2;
  width: min(100%, 980px);
}

.pk-hero-card {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.pk-hero-card picture,
.pk-hero-card img {
  display: block;
  width: 100%;
  height: 100%;
}

.pk-hero-card img {
  object-fit: cover;
  object-position: 25% 42%;
}

.pk-hero-card .pk-card-cap {
  position: absolute;
  top: clamp(20px, 4vw, 44px);
  right: var(--gut);
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

.pk-hero .pk-name {
  max-width: 1000px;
  font-size: clamp(50px, 14.8vw, 168px);
  color: var(--paper);
  text-shadow: 0 4px 30px rgba(14, 15, 19, 0.3);
}

.pk-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.14em;
  color: #59e58c;
}

.pk-status-dot {
  position: relative;
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: #59e58c;
}

@keyframes pk-status-ring {
  0% { transform: scale(1); opacity: 0.5; }
  80%, 100% { transform: scale(2.2); opacity: 0; }
}

.pk-hero .pk-legal-name {
  color: var(--paper);
  text-shadow: 0 2px 18px rgba(14, 15, 19, 0.5);
}

.pk-hero .pk-whisper { color: var(--paper); }

.pk-hero .pk-inline-link { color: var(--pink-pale); }

.pk-cta,
.pk-panel button[type="submit"],
.pk-dialog button[type="submit"] {
  min-height: 62px;
  padding-right: 12px;
  padding-left: 24px;
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(0, 175, 240, 0.26);
}

.pk-cta::before,
.pk-panel button[type="submit"]::before,
.pk-dialog button[type="submit"]::before {
  display: none;
}

.pk-cta .pk-arrow {
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 9px;
  border-radius: 50%;
  background: var(--paper);
}

.pk-about {
  position: relative;
  z-index: 3;
  margin-top: -42px;
  padding-top: clamp(72px, 10vw, 112px);
  border-radius: 48px 48px 0 0;
}

.pk-about-line {
  max-width: 920px;
  font-size: clamp(36px, 8.8vw, 72px);
  line-height: 0.98;
}

.pk-movies-link {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.1em;
}

.pk-movies-link:hover { color: var(--pink-deep); }

.pk-chip {
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(159, 21, 87, 0.12);
}

.pk-party {
  min-height: 640px;
  padding-top: clamp(72px, 10vw, 128px);
}

.pk-party::after { border-radius: 999px 0 0 999px; }

.pk-photo-duo {
  position: relative;
  display: block;
  width: min(100%, 660px);
  min-height: clamp(430px, 128vw, 660px);
}

.pk-party-card-main {
  width: 74%;
  border-radius: 46% 46% 22px 22px;
  box-shadow: 0 24px 70px rgba(14, 15, 19, 0.12);
}

.pk-party-card-side {
  position: absolute;
  right: 0;
  bottom: 2%;
  width: 45%;
  margin: 0;
  border: 8px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 20px 48px rgba(159, 21, 87, 0.2);
}

.pk-party-card-side img { aspect-ratio: 1; }

.pk-party-side {
  position: relative;
  z-index: 2;
  margin-top: -10px;
}

.pk-party-line {
  font-size: clamp(34px, 9.2vw, 76px);
  line-height: 0.94;
}

.pk-find {
  padding-top: clamp(82px, 12vw, 132px);
  border-radius: 64px 64px 0 0;
}

.pk-find-label {
  max-width: 900px;
  font-size: clamp(42px, 10vw, 86px);
  line-height: 0.92;
}

.pk-tiles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.pk-tile {
  display: grid;
  width: 92%;
  min-height: 76px;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(159, 21, 87, 0.18);
}

.pk-tile:nth-child(even) {
  align-self: flex-end;
  width: 86%;
}

.pk-tile:nth-child(3) { width: 82%; }

.pk-tile .pk-glyph { border-radius: 50%; }

.pk-closer {
  padding-top: clamp(86px, 14vw, 150px);
  border-radius: 0 0 72px 72px;
}

.pk-closer-name {
  font-size: clamp(60px, 17vw, 200px);
  line-height: 0.82;
}

@media (min-width: 768px) {
  .pk-hero-card img { object-position: 44% 40%; }

  .pk-tiles {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
  }

  .pk-tile,
  .pk-tile:nth-child(even),
  .pk-tile:nth-child(3) { width: 100%; }

  .pk-tile:nth-child(1),
  .pk-tile:nth-child(4) { grid-column: span 5; }

  .pk-tile:nth-child(2),
  .pk-tile:nth-child(3) { grid-column: span 7; }
}

@media (min-width: 1024px) {
  .pk-hero {
    display: flex;
    min-height: min(920px, 94svh);
    padding-bottom: 104px;
  }

  .pk-hero-card { max-width: none; }

  .pk-hero-card img { object-position: 58% 38%; }

  .pk-hero .pk-name { font-size: clamp(108px, 11.6vw, 184px); }

  .pk-party {
    grid-template-columns: minmax(520px, 660px) minmax(340px, 1fr);
    align-items: center;
    column-gap: 7vw;
  }

  .pk-photo-duo {
    max-width: 660px;
    min-height: 650px;
  }

  .pk-party-side {
    margin-top: 0;
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pk-status-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #59e58c;
    animation: pk-status-ring 2.4s ease-out infinite;
  }
}