/* ALL P!NK (slug: all-pink) — the Oct 16 pink rave for Breast Cancer Awareness Month.
   The rule of the page is the name of the night: every colour is a pink. Blush stands in
   for white, wine stands in for black, and nothing outside that range is used. Copy sits on
   blush cards with wine ink so it stays readable whichever pink the room is dyed; the silk
   drifting behind is the awareness ribbon, unspooled. */

body.event-theme-pink {
  --pk-base: #ff4fa3;       /* the room; re-dyed by "Pick your pink" */
  --pk-accent: #c40f70;     /* labels and links on blush; dark enough to read there */
  --pk-paper: #ffe6f2;      /* blush: the page's white */
  --pk-paper-deep: #ffd0e6;
  --pk-ink: #4a0530;        /* wine: the page's black */
  --pk-ink-soft: #7a1a55;
  background: var(--pk-base);
  color: var(--pk-ink);
}
body.event-theme-pink[data-pink-shade="bubblegum"] { --pk-base: #ff9ccb; --pk-accent: #b82877; }
body.event-theme-pink[data-pink-shade="magenta"] { --pk-base: #e4168a; --pk-accent: #a80862; }
body.event-theme-pink[data-pink-shade="rose"] { --pk-base: #f77fa4; --pk-accent: #c2305f; }

body.event-theme-pink .archive-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--pk-ink) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 2px solid var(--pk-paper-deep); }
body.event-theme-pink main { position: relative; z-index: 1; }
body.event-theme-pink .site-footer { position: relative; z-index: 1; background: var(--pk-ink); }
/* The silk stays fixed; everything else stacks above it. */
body.event-theme-pink > main > *:not(.pk-silk) { position: relative; z-index: 1; }

.pk-silk { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--pk-base); }
.pk-silk canvas { display: block; width: 100%; height: 100%; }

/* ---------- Hero ---------- */
.pk-hero { display: grid; justify-items: center; max-width: 1180px; margin: 0 auto;
  padding: clamp(26px, 5vw, 64px) clamp(16px, 4vw, 54px) clamp(20px, 4vw, 46px); text-align: center; }

.pk-month { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 9px 18px 9px 13px; border-radius: 999px;
  background: var(--pk-ink); color: var(--pk-paper); font: 500 clamp(10px, 1.3vw, 12px) 'DM Mono', monospace; letter-spacing: .2em; text-transform: uppercase; }
.pk-ribbon-small { flex: 0 0 auto; width: 15px; height: 16px; color: var(--pk-base); }

/* ALL / P!NK as a sticker: blush letters with a wine edge, so it reads on any pink. */
.pk-title { margin: clamp(14px, 2.4vw, 26px) 0 0; display: grid; justify-items: center; line-height: .86; }
.pk-title span { display: block; font-family: 'Bowlby One', Manrope, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(74px, 23vw, 250px); letter-spacing: -.01em; color: var(--pk-paper);
  text-shadow: .035em .035em 0 var(--pk-ink), .07em .07em 0 color-mix(in srgb, var(--pk-ink) 45%, transparent); }
.pk-title span:first-child { font-size: clamp(44px, 12vw, 132px); letter-spacing: .12em; margin-right: -.12em; }
.pk-title i { display: inline-block; font-style: normal; color: var(--pk-ink); text-shadow: .035em .035em 0 var(--pk-paper);
  transform: rotate(9deg); transform-origin: 50% 85%; }
@keyframes pk-bang { 0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(-7deg) translateY(-.04em); } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-bs-motion="paused"]) .pk-title i { animation: pk-bang 1.9s cubic-bezier(.45,0,.55,1) infinite; }
}

.pk-slab { display: inline-flex; align-items: center; gap: 14px; margin: clamp(18px, 3vw, 30px) 0 0; padding: 8px 22px 8px 8px; border-radius: 999px;
  background: var(--pk-paper); color: var(--pk-ink); box-shadow: 5px 5px 0 var(--pk-ink); }
.pk-slab b { padding: 6px 16px; border-radius: 999px; background: var(--pk-ink); color: var(--pk-paper);
  font: 400 clamp(19px, 3vw, 28px) 'Bowlby One', Manrope, sans-serif; letter-spacing: .03em; }
.pk-slab span { font: 700 clamp(13px, 1.7vw, 17px) Manrope, sans-serif; }

.pk-lede { max-width: 560px; margin: clamp(18px, 3vw, 28px) auto 0; padding: 14px 22px; border-radius: 20px; background: var(--pk-paper); color: var(--pk-ink);
  font: 600 clamp(15px, 1.7vw, 18px)/1.6 Manrope, sans-serif; }

.pk-vitals { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: clamp(14px, 2.4vw, 20px) 0 0; padding: 0; list-style: none; }
.pk-vitals li { display: grid; gap: 2px; min-width: 104px; padding: 10px 18px; border-radius: 16px; background: var(--pk-paper); }
.pk-vitals b { color: var(--pk-accent); font: 500 10px 'DM Mono', monospace; letter-spacing: .22em; text-transform: uppercase; }
.pk-vitals strong { color: var(--pk-ink); font: 800 clamp(15px, 2vw, 19px) Manrope, sans-serif; }

/* Online and door, as two tickets. */
.pk-prices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: clamp(16px, 2.8vw, 24px) 0 0; padding: 0; list-style: none; }
.pk-prices li { display: grid; justify-items: center; gap: 1px; min-width: 122px; padding: 12px 20px 13px; border: 2px dashed var(--pk-ink); border-radius: 14px;
  background: var(--pk-paper); color: var(--pk-ink); }
.pk-prices strong { font: 400 clamp(26px, 4vw, 38px)/1 'Bowlby One', Manrope, sans-serif; }
.pk-prices span { font: 500 11px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }

.pk-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(22px, 3.4vw, 32px); padding: 16px 32px; border-radius: 999px;
  background: var(--pk-ink); color: var(--pk-paper); text-decoration: none; font: 500 13px 'DM Mono', monospace; letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 5px 5px 0 var(--pk-paper); transition: transform .2s, box-shadow .2s; }
.pk-cta:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--pk-paper); }

/* ---------- Sections: blush cards with a wine edge ---------- */
.pk-section { width: calc(100% - 32px); max-width: 880px; margin: clamp(26px, 5vw, 60px) auto; padding: clamp(22px, 4vw, 44px);
  border: 2px solid var(--pk-ink); border-radius: 28px; background: var(--pk-paper); color: var(--pk-ink); box-shadow: 8px 8px 0 var(--pk-ink); }
.pk-label { margin: 0; color: var(--pk-accent); font: 500 11px 'DM Mono', monospace; letter-spacing: .26em; text-transform: uppercase; transition: color .3s; }
.pk-section h2 { margin: 6px 0 16px; font: 400 clamp(25px, 4.4vw, 46px)/1.05 'Bowlby One', Manrope, sans-serif; text-transform: uppercase; color: var(--pk-ink); }
.pk-section p { margin: 0; }

/* ---------- The cause ---------- */
.pk-cause { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(16px, 4vw, 40px); }
.pk-ribbon { width: clamp(64px, 13vw, 128px); height: auto; color: var(--pk-base); filter: drop-shadow(4px 4px 0 var(--pk-ink)); transition: color .3s; }
.pk-cause h2 { margin-bottom: 12px; font-size: clamp(22px, 3.7vw, 40px); }
.pk-cause h2 em { font-style: normal; color: var(--pk-accent); transition: color .3s; }
.pk-cause div > p:last-child { color: var(--pk-ink-soft); font: 500 clamp(15px, 1.6vw, 17px)/1.75 Manrope, sans-serif; }

/* ---------- Pick your pink ---------- */
.pk-shade-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pk-shade { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 18px 6px 7px; border: 2px solid var(--pk-ink); border-radius: 999px;
  background: transparent; color: var(--pk-ink); cursor: pointer; font: 700 14px Manrope, sans-serif; transition: background .2s, color .2s, transform .15s; }
.pk-shade i { width: 32px; height: 32px; border: 2px solid var(--pk-ink); border-radius: 50%; background: var(--swatch); }
.pk-shade:hover { transform: translateY(-2px); }
.pk-shade[aria-pressed="true"] { background: var(--pk-ink); color: var(--pk-paper); }
.pk-shade[aria-pressed="true"] i { border-color: var(--pk-paper); }
.pk-shade-note { min-height: 20px; margin-top: 12px !important; color: var(--pk-accent); font: 500 13px 'DM Mono', monospace; }

/* ---------- The bill ---------- */
.pk-bill { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pk-act { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 13px 18px; border-radius: 14px; background: var(--pk-paper-deep);
  animation: pk-in .6s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes pk-in { from { opacity: 0; transform: translateY(14px); } }
.pk-act a, .pk-act-name { color: var(--pk-ink); font: 800 clamp(16px, 2.2vw, 21px) Manrope, sans-serif; text-decoration: none; }
.pk-act a { display: inline-block; padding: 3px 0; }
.pk-act a b { margin-left: .3em; color: var(--pk-accent); font-size: .72em; font-weight: 400; }
.pk-act a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pk-time { color: var(--pk-ink-soft); font: 500 13px 'DM Mono', monospace; letter-spacing: .06em; }
.pk-act.is-tba { background: transparent; outline: 2px dashed var(--pk-paper-deep); }
.pk-act.is-tba .pk-act-name { color: var(--pk-ink-soft); }
.pk-hint { margin-bottom: 14px !important; color: var(--pk-ink-soft); font: 500 12px 'DM Mono', monospace; }
.pk-hint b { color: var(--pk-accent); font-weight: 400; }
.pk-soon { padding: 22px; border: 2px dashed var(--pk-ink-soft); border-radius: 14px; color: var(--pk-ink-soft); text-align: center; font: 700 clamp(15px, 2vw, 18px) Manrope, sans-serif; }

/* ---------- The flyer ---------- */
.pk-flyer img { display: block; width: min(100%, 520px); height: auto; margin: 0 auto; border: 2px solid var(--pk-ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--pk-ink); }

/* ---------- Getting in: a door-only night, so this replaces the ticket booth ---------- */
.pk-entry-list { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.pk-entry-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 13px 18px; border-radius: 14px; background: var(--pk-paper-deep); }
.pk-entry-list strong { font: 400 clamp(20px, 3vw, 28px)/1.1 'Bowlby One', Manrope, sans-serif; }
.pk-entry-list span { color: var(--pk-ink-soft); font: 600 clamp(14px, 1.6vw, 16px)/1.5 Manrope, sans-serif; }
.pk-booth-cause { display: flex; align-items: center; gap: 9px; margin: 0; padding-top: 14px; border-top: 2px dashed var(--pk-paper-deep); color: var(--pk-ink); font: 700 13px/1.5 Manrope, sans-serif; }
.pk-booth-cause .pk-ribbon-small { color: var(--pk-accent); }

.pk-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 22px; max-width: 880px; margin: 0 auto;
  padding: 18px 24px; border-radius: 20px 20px 0 0; background: var(--pk-ink); color: var(--pk-paper);
  font: 500 11px 'DM Mono', monospace; letter-spacing: .2em; text-transform: uppercase; }

body.event-theme-pink :is(a, button, select, input):focus-visible { outline: 3px solid var(--pk-ink); outline-offset: 3px; }
body.event-theme-pink .pk-cta:focus-visible, body.event-theme-pink .pk-buy:focus-visible { outline-color: var(--pk-paper); box-shadow: 0 0 0 6px var(--pk-ink); }

@media (max-width: 720px) {
  .pk-cause { grid-template-columns: 1fr; justify-items: start; }
  .pk-section { border-radius: 22px; box-shadow: 5px 5px 0 var(--pk-ink); }
  .pk-shade { flex: 1 1 calc(50% - 10px); }
  .pk-prices li { min-width: 0; flex: 1 1 96px; padding-inline: 10px; }
  .pk-footer { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.event-theme-pink *, body.event-theme-pink *::before, body.event-theme-pink *::after { animation: none !important; transition: none !important; }
}