/* =========================================================
   TK2 SOFT — heartbreak theme layer
   Loaded after styles.css on every page. Everything here is
   scoped to html[data-site-mode="soft"] (set by mode.js), so
   tuff mode renders exactly like the original site.
   ========================================================= */

/* ---- Mode-specific content ---- */
[data-site-mode="soft"] [data-only="tuff"],
[data-site-mode="tuff"] [data-only="soft"] {
  display: none !important;
}

/* ---- Palette: rainy night, one dim lightbulb ---- */
[data-site-mode="soft"] {
  --ink: #0a0e14;
  --velvet: #1a2230;
  --wine: #2b3646;
  --gold: #7f97b2;
  --gold-bright: #c7d5e6;
  --parchment: #cfd6de;
  --bone: #eef2f6;
  --marble: #b9c3cf;
  --line: rgba(199, 213, 230, 0.2);
  --paper: #e9eef3;
  --paper-ink: #0f141b;
  --bulb: #f2c46b;
  --imessage: #0a84ff;
  --heart: #ff6b81;
}

[data-site-mode="soft"] body {
  background:
    radial-gradient(circle at 70% 0%, rgba(120, 150, 190, 0.18), transparent 32rem),
    radial-gradient(circle at 15% 30%, rgba(40, 60, 90, 0.35), transparent 28rem),
    linear-gradient(180deg, #0a0e14 0%, #121a25 50%, #07090d 100%);
}

[data-site-mode="soft"] body::before {
  background-image:
    linear-gradient(rgba(199, 213, 230, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199, 213, 230, 0.02) 1px, transparent 1px);
}

/* ---- Buttons ---- */
[data-site-mode="soft"] .primary-btn {
  color: #0b1119;
}

/* ---- Header + wordmark ---- */
[data-site-mode="soft"] .site-header {
  border-bottom-color: rgba(199, 213, 230, 0.14);
  background: rgba(10, 14, 20, 0.84);
}

/* ---- Logo: broken heart mark + wet chrome "Weak" wordmark ---- */
[data-site-mode="soft"] .brand {
  gap: 0;
  line-height: 1;
}
[data-site-mode="soft"] .brand::after { content: none; }

.brand-soft {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
}

.brand-mark {
  --beat: 0;
  width: 46px;
  height: auto;
  overflow: visible;
  flex: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 14px rgba(255, 90, 120, 0.22));
  scale: calc(1 + var(--beat) * 0.08);
}
.brand-mark__half {
  transform-box: view-box;
  transform-origin: 24px 41px;
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1.2);
}
.brand-mark__half--l { transform: rotate(-3deg); }
.brand-mark__half--r { transform: translate(1.2px, 0.4px) rotate(5deg); }
.brand-mark__shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2;
  stroke-linecap: round;
}
.brand-mark__crown {
  transform-box: view-box;
  transform-origin: 36px 12px;
  transform: translate(1px, 1px) rotate(24deg);
  transition: transform 520ms cubic-bezier(.2, .8, .2, 1.2);
}
.brand-mark__tear {
  fill: #a9c8f5;
  transform-box: fill-box;
  transform-origin: 50% 0;
  opacity: 0;
  animation: brand-tear 4.8s ease-in infinite;
}
@keyframes brand-tear {
  0%, 55% { opacity: 0; transform: translateY(-4px) scale(0.3); }
  68% { opacity: 1; transform: translateY(0) scale(1); }
  88% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(10px) scale(0.8); }
}
.brand:hover .brand-mark__half--l { transform: translate(-1.5px, 0.5px) rotate(-9deg); }
.brand:hover .brand-mark__half--r { transform: translate(2.5px, 1px) rotate(12deg); }
.brand:hover .brand-mark__crown { transform: translate(5px, 9px) rotate(58deg); }

.brand-word {
  display: grid;
  gap: 5px;
}
.brand-word__main {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.brand-word__tk {
  font: 800 0.72rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.3em;
  color: #8fa3bd;
  transform: translateY(-0.35em);
}
.brand-word__weak {
  position: relative;
  font: italic 700 1.75rem/0.9 Georgia, "Times New Roman", serif;
  letter-spacing: -0.01em;
  padding-right: 0.08em;
  /* Wet chrome with a sheen that sweeps across every few seconds */
  background: linear-gradient(100deg, #f1f5fa 0%, #c3d0e0 34%, #ffffff 46%, #dce6f2 52%, #9fb2ca 66%, #eaf0f7 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(160, 190, 230, 0.28));
  animation: brand-sheen 7s ease-in-out infinite;
}
/* A drip sliding off the "k" */
.brand-word__weak::after {
  content: "";
  position: absolute;
  right: 0.12em;
  top: 78%;
  width: 4px;
  height: 6px;
  border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%;
  background: linear-gradient(180deg, #e6eefa, #8fb2e3);
  opacity: 0;
  animation: brand-drip 5.2s ease-in infinite 1.2s;
}
@keyframes brand-sheen {
  0%, 62% { background-position: 100% 0; }
  82%, 100% { background-position: 0% 0; }
}
@keyframes brand-drip {
  0%, 50% { opacity: 0; transform: translateY(-3px) scaleY(0.4); }
  62% { opacity: 1; transform: translateY(0) scaleY(1); }
  80% { opacity: 1; transform: translateY(2px) scaleY(1.2); }
  100% { opacity: 0; transform: translateY(16px) scaleY(1); }
}
.brand-word__tag {
  font: 700 0.56rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(199, 213, 230, 0.5);
}

@media (max-width: 860px) {
  .brand-soft { gap: 10px; }
  .brand-mark { width: 40px; }
  .brand-word__weak { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark__tear,
  .brand-word__weak,
  .brand-word__weak::after { animation: none; }
}

/* ---- Captcha gate ---- */
[data-site-mode="soft"] .gate {
  background: radial-gradient(circle at center, rgba(40, 58, 82, 0.94), rgba(6, 9, 13, 0.98) 72%);
}

[data-site-mode="soft"] .gate::after {
  background: radial-gradient(ellipse at center, transparent 0%, transparent 30%, rgba(6, 9, 13, 0.55) 65%, rgba(6, 9, 13, 0.92) 100%);
}

[data-site-mode="soft"] .gate__bg-row { color: rgba(199, 213, 230, 0.07); }
[data-site-mode="soft"] .gate__bg-row--c {
  color: rgba(60, 80, 110, 0.35);
  -webkit-text-stroke: 1px rgba(199, 213, 230, 0.08);
}
[data-site-mode="soft"] .gate__bg-row--g { color: rgba(255, 107, 129, 0.12); }

[data-site-mode="soft"] .gate__panel {
  background: rgba(10, 14, 20, 0.88);
}

[data-site-mode="soft"] .crest {
  background: radial-gradient(circle, #26344a, #0a0e14);
}

[data-site-mode="soft"] .captcha-tile {
  border-color: rgba(199, 213, 230, 0.25);
  background: linear-gradient(145deg, #1f2a3a, #0a0e14);
}

[data-site-mode="soft"] .captcha-tile img {
  filter: grayscale(0.35) brightness(0.92);
}

[data-site-mode="soft"] .captcha-caption {
  left: auto;
  right: 8px;
  max-width: calc(100% - 16px);
  padding: 4px 9px;
  border-radius: 14px 14px 4px 14px;
  color: #fff;
  background: var(--imessage);
  text-transform: none;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

[data-site-mode="soft"] .captcha-tile.is-selected::after {
  border-color: var(--gold-bright);
  box-shadow: inset 0 0 0 999px rgba(199, 213, 230, 0.14);
}

.captcha-stamp {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  padding: 4px 8px;
  border: 3px solid var(--heart, #ff6b81);
  border-radius: 6px;
  color: var(--heart, #ff6b81);
  background: rgba(10, 14, 20, 0.72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.55rem, 1.8vw, 0.8rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-14deg) scale(1.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 220ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.captcha-tile.is-busted .captcha-stamp {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-14deg) scale(1);
}

.captcha-tile.is-busted::after {
  border-color: var(--heart, #ff6b81);
  box-shadow: inset 0 0 0 999px rgba(255, 80, 110, 0.16);
}

.captcha-tile.is-shaking {
  animation: soft-shake 380ms ease;
}

@keyframes soft-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-1deg); }
  40% { transform: translateX(6px) rotate(1deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.gate__error.is-good {
  color: #9fe3b4;
}

[data-site-mode="soft"] .captcha-loader,
[data-site-mode="soft"] .captcha-loader__count,
[data-site-mode="soft"] .captcha-loader__label {
  color: var(--gold-bright);
}
[data-site-mode="soft"] .captcha-loader__ring svg circle { stroke: rgba(199, 213, 230, 0.18); }
[data-site-mode="soft"] .captcha-loader__ring svg .captcha-loader__progress {
  stroke: var(--gold-bright);
  filter: drop-shadow(0 0 6px rgba(199, 213, 230, 0.5));
}

/* ---- Hero ---- */
[data-site-mode="soft"] .hero {
  background:
    linear-gradient(180deg, rgba(8, 11, 16, 0.1), rgba(8, 11, 16, 0.8)),
    radial-gradient(circle at 72% 38%, rgba(160, 185, 220, 0.14), transparent 30rem),
    radial-gradient(circle at 30% 72%, rgba(40, 60, 90, 0.32), transparent 25rem);
}

/* Castle wall -> sad wooden fence + wet ground */
[data-site-mode="soft"] .hero::before {
  border-top: 0;
  background:
    repeating-linear-gradient(90deg, rgba(24, 31, 41, 0.96) 0 16px, transparent 16px 38px) top / 100% 58% no-repeat,
    linear-gradient(180deg, transparent 0 14%, rgba(24, 31, 41, 0.96) 14% 21%, transparent 21% 40%, rgba(24, 31, 41, 0.96) 40% 47%, transparent 47%),
    linear-gradient(180deg, transparent 0 58%, #0c1016 58% 100%);
}

[data-site-mode="soft"] .hero__bigtext {
  color: rgba(199, 213, 230, 0.04);
  -webkit-text-stroke: 1px rgba(199, 213, 230, 0.05);
}

[data-site-mode="soft"] .hero__particles,
[data-site-mode="soft"] .kingdom-sky .spark {
  display: none;
}

[data-site-mode="soft"] .hero__copy h1 {
  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 38px rgba(160, 185, 220, 0.16);
}

/* The TK banners got thrown out. Trash cans sit by the shed instead (inside the shed SVG). */
[data-site-mode="soft"] .banner {
  display: none;
}
.sad-shed__trash {
  transform-box: fill-box;
  transform-origin: 50% 97%;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));
  animation: soft-trash-wobble 5.5s ease-in-out infinite;
}
.sad-shed__trash--late {
  animation-delay: -2.2s;
}
@keyframes soft-trash-wobble {
  0%, 86%, 100% { transform: rotate(0deg); }
  89% { transform: rotate(-3deg); }
  92% { transform: rotate(2.5deg); }
  95% { transform: rotate(-1deg); }
}

[data-site-mode="soft"] .hero__stats span,
[data-site-mode="soft"] .leaderboard,
[data-site-mode="soft"] .quiz-card,
[data-site-mode="soft"] .forum-post,
[data-site-mode="soft"] .product-card {
  border-color: rgba(199, 213, 230, 0.16);
  background: rgba(200, 215, 235, 0.05);
}

/* ---- "Time since she last replied" ---- */
.reply-timer {
  max-width: 620px;
  margin: 0 0 12px;
  padding: 16px 18px;
  border: 1px solid rgba(199, 213, 230, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(10, 132, 255, 0.08), rgba(10, 14, 20, 0.35));
  backdrop-filter: blur(12px);
}

.reply-timer__label {
  margin: 0 0 10px !important;
  color: var(--gold-bright) !important;
  font-size: 0.78rem !important;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reply-timer__units {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.reply-timer__units span {
  display: grid;
  justify-items: center;
  padding: 10px 4px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
}

.reply-timer__units strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}

.reply-timer__units em {
  margin-top: 4px;
  color: rgba(238, 242, 246, 0.6);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reply-timer__last {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0 !important;
  color: rgba(238, 242, 246, 0.7) !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
}

.reply-timer__bubble {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 16px 16px 16px 4px;
  color: #eef2f6;
  background: #3a3a3c;
  font-weight: 600;
}

.reply-timer__read {
  color: rgba(238, 242, 246, 0.45);
  font-size: 0.78rem;
}

/* Floating pill on every page */
.reply-pill {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 110px);
  padding: 8px 14px;
  border: 1px solid rgba(199, 213, 230, 0.22);
  border-radius: 999px;
  color: rgba(238, 242, 246, 0.82);
  background: rgba(10, 14, 20, 0.86);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  font-size: 0.8rem;
  font-weight: 700;
  pointer-events: none;
}

.reply-pill strong {
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}

.reply-pill__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--heart);
  box-shadow: 0 0 10px var(--heart);
  animation: soft-pulse 2.4s ease-in-out infinite;
}

@keyframes soft-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ---- Crown stage -> TK in front of his shed ---- */
[data-site-mode="soft"] .crown-stage {
  background:
    radial-gradient(circle at 50% 18%, rgba(190, 210, 240, 0.16), transparent 16rem),
    linear-gradient(180deg, rgba(20, 28, 40, 0.55), rgba(5, 8, 12, 0.65));
  box-shadow:
    inset 0 0 120px rgba(0, 0, 0, 0.5),
    0 30px 90px rgba(0, 0, 0, 0.4);
}

/* Orbit ring -> cold streetlight cone */
[data-site-mode="soft"] .crown-stage::before {
  top: 10%;
  width: min(80%, 480px);
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(200, 220, 255, 0.2), transparent 70%);
  filter: blur(18px);
  opacity: 0.8;
  animation: none;
}

/* Pedestal -> puddle */
[data-site-mode="soft"] .crown-stage::after {
  bottom: 1%;
  height: 12%;
  background: radial-gradient(ellipse at center, rgba(140, 170, 210, 0.28), transparent 68%);
  filter: blur(3px);
  animation: soft-puddle 3.6s ease-in-out infinite;
  z-index: 1;
}

@keyframes soft-puddle {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scaleX(1); }
  50% { opacity: 0.9; transform: translateX(-50%) scaleX(1.06); }
}

.sad-shed {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: min(92%, 580px);
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.95;
}

.sad-shed svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sad-shed__glow {
  animation: shed-flicker 6s steps(1) infinite;
}

@keyframes shed-flicker {
  0%, 100% { opacity: 0.7; }
  41% { opacity: 0.7; }
  42% { opacity: 0.2; }
  43% { opacity: 0.65; }
  44% { opacity: 0.15; }
  46% { opacity: 0.7; }
  78% { opacity: 0.55; }
}

.sad-shed__drip {
  animation: shed-drip 1.8s ease-in infinite;
}
.sad-shed__drip--late { animation-delay: -0.9s; }

@keyframes shed-drip {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(120px); opacity: 0; }
}

[data-site-mode="soft"] .crown-hint,
[data-site-mode="soft"] .crown-audio {
  background: rgba(10, 14, 20, 0.78);
}

/* ---- Renaissance banner -> wet grey tarp ---- */
[data-site-mode="soft"] .renaissance-banner__rope {
  background: linear-gradient(180deg, rgba(199, 213, 230, 0.7), rgba(199, 213, 230, 0.15));
  box-shadow: none;
}

[data-site-mode="soft"] .renaissance-banner__cloth {
  background:
    repeating-linear-gradient(90deg, rgba(199, 213, 230, 0.03) 0 2px, transparent 2px 28px),
    linear-gradient(180deg, #2b3646 0%, #1c2431 42%, #121821 100%);
  border-top-color: rgba(199, 213, 230, 0.35);
  border-bottom-color: rgba(199, 213, 230, 0.35);
  box-shadow:
    inset 0 0 0 6px rgba(5, 8, 12, 0.4),
    inset 0 0 0 7px rgba(199, 213, 230, 0.18),
    inset 0 4px 14px rgba(0, 0, 0, 0.6),
    inset 0 -4px 14px rgba(0, 0, 0, 0.6);
  transform: rotate(-0.6deg);
}

[data-site-mode="soft"] .renaissance-banner__tassel {
  background: radial-gradient(circle at 50% 18%, #c7d5e6 0%, #6b7f97 60%, #2b3646 100%);
}
[data-site-mode="soft"] .renaissance-banner__tassel::after {
  background: repeating-linear-gradient(90deg, #9fb4cc 0 2px, #4a5a6e 2px 4px);
}

[data-site-mode="soft"] .renaissance-banner__item {
  color: #d9e3ef;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
}
[data-site-mode="soft"] .renaissance-banner__item .fleur {
  color: #9fb4cc;
  filter: none;
}

/* ---- Section dividers ---- */
[data-site-mode="soft"] .section-divider::before,
[data-site-mode="soft"] .section-divider::after {
  background: linear-gradient(90deg, transparent, rgba(199, 213, 230, 0.45), transparent);
}

/* ---- Hero name: "TK" crossed out ---- */
.hero__copy h1 .demoted {
  position: relative;
  text-decoration: none;
  opacity: 0.45;
  font-size: 0.72em;
  vertical-align: 0.12em;
}
.hero__copy h1 .demoted::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  top: 52%;
  height: 0.12em;
  border-radius: 2px;
  background: var(--heart, #ff6b81);
  transform: rotate(-8deg);
}

/* ---- Jason's Day in the Life ---- */
.day-life__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 36px;
}
.day-card img,
[data-site-mode="soft"] .day-card img {
  height: auto;
  aspect-ratio: 3 / 2;
  filter: saturate(0.85) contrast(1.04);
}
/* Timestamp only, stamped on the photo like a camcorder date */
.day-card figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 0;
  background: none;
  pointer-events: none;
}
[data-site-mode="soft"] .day-card .worst-card__tag {
  color: #f3f6fa;
  background: rgba(6, 9, 13, 0.62);
  border-color: rgba(199, 213, 230, 0.35);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
}
@media (max-width: 860px) {
  .day-life__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }
  .day-card img,
  [data-site-mode="soft"] .day-card img { aspect-ratio: 3 / 2; }
}
@media (min-width: 561px) and (max-width: 860px) {
  .day-life__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Worst moments ---- */
[data-site-mode="soft"] .worst-card {
  border-color: rgba(199, 213, 230, 0.18);
  background: linear-gradient(165deg, rgba(20, 28, 40, 0.92), rgba(5, 8, 12, 0.96));
}
[data-site-mode="soft"] .worst-card img {
  filter: grayscale(0.55) contrast(1.05);
}
[data-site-mode="soft"] .worst-moments__subhead,
[data-site-mode="soft"] .worst-moments__verdict {
  color: var(--gold-bright);
}

/* ---- Newsletter ---- */
[data-site-mode="soft"] .newsletter-card {
  margin-inline: auto;
}
[data-site-mode="soft"] .newsletter-card {
  background:
    repeating-linear-gradient(100deg, rgba(199, 213, 230, 0.03) 0 1px, transparent 1px 14px),
    radial-gradient(circle at 0% 0%, rgba(160, 185, 220, 0.14), transparent 50%),
    linear-gradient(165deg, #1b2431 0%, #0f141c 55%, #07090d 100%);
  border-color: rgba(199, 213, 230, 0.55);
  box-shadow:
    inset 0 0 0 6px rgba(5, 8, 12, 0.4),
    inset 0 0 0 7px rgba(199, 213, 230, 0.25),
    inset 0 0 60px rgba(0, 0, 0, 0.55),
    0 28px 80px rgba(0, 0, 0, 0.55);
}
[data-site-mode="soft"] .newsletter-card::before,
[data-site-mode="soft"] .newsletter-card::after {
  content: "☂";
  color: rgba(199, 213, 230, 0.7);
  filter: none;
}
[data-site-mode="soft"] .newsletter-card .eyebrow,
[data-site-mode="soft"] .newsletter-form label {
  color: var(--gold-bright);
}
[data-site-mode="soft"] .newsletter-card .eyebrow::before,
[data-site-mode="soft"] .newsletter-card .eyebrow::after {
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}
[data-site-mode="soft"] .newsletter-form {
  background: linear-gradient(180deg, #121925 0%, #080b10 100%);
  border-color: rgba(199, 213, 230, 0.4);
  box-shadow:
    inset 0 0 0 4px rgba(5, 8, 12, 0.5),
    inset 0 0 0 5px rgba(199, 213, 230, 0.18),
    0 18px 36px rgba(0, 0, 0, 0.5);
}
[data-site-mode="soft"] .newsletter-form::before {
  content: "💔";
  background: radial-gradient(circle at 50% 30%, #c7d5e6, #6b7f97 60%, #2b3646);
  border-color: #1b2431;
}
[data-site-mode="soft"] .newsletter-form input {
  border-color: rgba(199, 213, 230, 0.35);
}

/* ---- Quotes ---- */
[data-site-mode="soft"] .quote-panel {
  border-color: rgba(199, 213, 230, 0.2);
  background: linear-gradient(165deg, rgba(20, 28, 40, 0.92), rgba(5, 8, 12, 0.96));
}
[data-site-mode="soft"] .quote-panel--gold {
  background:
    radial-gradient(circle at 0% 100%, rgba(10, 132, 255, 0.12), transparent 55%),
    linear-gradient(165deg, #1b2431, #0b0f15);
}
[data-site-mode="soft"] .quote-panel--marble {
  background:
    radial-gradient(circle at 80% 20%, rgba(238, 242, 246, 0.06), transparent 55%),
    linear-gradient(165deg, #232a33, #0e1218);
}
[data-site-mode="soft"] .quote-panel--crimson {
  background:
    radial-gradient(circle at 20% 100%, rgba(255, 107, 129, 0.16), transparent 60%),
    linear-gradient(165deg, #1e1a24, #0b0a10);
}
[data-site-mode="soft"] .portrait {
  border-color: rgba(199, 213, 230, 0.55);
  color: #0b1119;
  background:
    radial-gradient(circle at 50% 30%, rgba(238, 242, 246, 0.9), transparent 40%),
    linear-gradient(145deg, #cfd6de, #7f97b2, #2b3646);
}
[data-site-mode="soft"] .quotes-disclaimer {
  color: rgba(199, 213, 230, 0.7);
}

/* Quotes: 5 cards, last row centered */
[data-site-mode="soft"] .quotes .section__heading {
  margin-inline: auto;
  text-align: center;
}
[data-site-mode="soft"] .quotes .quotes-disclaimer {
  display: block;
  width: 100%;
  max-width: none;
  text-align: center;
}
[data-site-mode="soft"] .quote-hall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1100px;
}
[data-site-mode="soft"] .quote-hall .quote-panel {
  flex: 1 1 320px;
  max-width: 350px;
}
[data-site-mode="soft"] .quote-panel blockquote {
  color: #f1f5fa;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.3;
}
[data-site-mode="soft"] .quote-panel::before { color: rgba(199, 213, 230, 0.12); }
[data-site-mode="soft"] .quote-panel cite { border-top-color: rgba(199, 213, 230, 0.16); }
.tk-quotes {
  margin-top: clamp(40px, 7vw, 80px);
}
[data-site-mode="soft"] .tk-quotes .section__heading {
  margin-inline: auto;
  text-align: center;
}
.tk-quotes__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.tk-quotes__list li {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 18px;
  border: 1px solid rgba(199, 213, 230, 0.16);
  border-radius: 14px;
  background: rgba(10, 14, 20, 0.6);
}
.tk-quotes__list p {
  justify-self: start;
  margin: 0;
  padding: 10px 14px;
  border-radius: 18px 18px 18px 4px;
  color: #fff;
  background: var(--imessage);
  font-size: 1.02rem;
  line-height: 1.4;
}
.tk-quotes__list span {
  color: rgba(238, 242, 246, 0.55);
  font-size: 0.82rem;
  font-style: italic;
}
/* ---- Quiz ---- */
[data-site-mode="soft"] .quiz-scorecard--duo {
  background: linear-gradient(135deg, #2b3646, #0a4c8f);
  box-shadow: 0 16px 36px rgba(10, 76, 143, 0.35);
}
[data-site-mode="soft"] .quiz-scorecard--duo strong {
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}
[data-site-mode="soft"] .answer,
[data-site-mode="soft"] .duo-features div {
  border-color: rgba(199, 213, 230, 0.2);
}
/* Quiz mascot: the TK2 Weak logo */
.duo-mascot--weak {
  display: inline-grid;
  justify-items: center;
  gap: 10px;
}
.duo-logo {
  flex-direction: column;
  gap: 10px;
  animation: duo-bounce 2.4s ease-in-out infinite;
}
.duo-logo .brand-mark { width: 92px; }
.duo-logo .brand-word { justify-items: center; }
.duo-logo .brand-word__weak { font-size: 2.3rem; }
.duo-logo .brand-word__tk { font-size: 0.85rem; }
.duo-mascot--weak .duo-speech { top: 18%; left: 100%; }
.duo-mascot--weak:hover .brand-mark__half--l { transform: translate(-1.5px, 0.5px) rotate(-9deg); }
.duo-mascot--weak:hover .brand-mark__half--r { transform: translate(2.5px, 1px) rotate(12deg); }
.duo-mascot--weak:hover .brand-mark__crown { transform: translate(5px, 9px) rotate(58deg); }
@media (max-width: 860px) {
  .duo-logo .brand-mark { width: 72px; }
  .duo-logo .brand-word__weak { font-size: 1.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .duo-logo { animation: none; }
}
[data-site-mode="soft"] .duo-mascot img {
  filter: grayscale(1) brightness(0.85);
  transform: rotate(-8deg);
}

/* ---- Shop ---- */
.shop-closed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
}
.shop-closed__timer {
  margin-top: 12px !important;
  font-size: 0.95rem;
}
.shop-closed__timer strong {
  color: var(--heart, #ff6b81);
  font-variant-numeric: tabular-nums;
}
.shop-closed__sign {
  position: relative;
  padding-top: 34px;
  margin-right: clamp(0px, 3vw, 36px);
  transform-origin: 50% 0;
  animation: shop-sign-swing 6s ease-in-out infinite;
}
.shop-closed__string {
  position: absolute;
  top: 0;
  left: 50%;
  width: 90px;
  height: 36px;
  transform: translateX(-50%);
  border: 2px solid #8d9aab;
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.shop-closed__string::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #8d9aab;
}
.shop-closed__board {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 230px;
  padding: 14px 22px 16px;
  border: 3px solid #5a1f2a;
  border-radius: 10px;
  background: linear-gradient(180deg, #c23a4f, #8e2436);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5), inset 0 0 0 3px rgba(255, 255, 255, 0.16);
  color: #fff4f4;
  font-family: Georgia, "Times New Roman", serif;
  text-align: center;
}
.shop-closed__board small {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.shop-closed__board strong {
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shop-closed__board em {
  font-size: 0.8rem;
  opacity: 0.85;
}
@keyframes shop-sign-swing {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(2deg); }
}
.product-grid--closed .product-card {
  position: relative;
}
.product-grid--closed .product-photo img {
  filter: grayscale(1) brightness(0.55);
}
.product-grid--closed .product-photo {
  position: relative;
}
.product-grid--closed .product-photo::after {
  content: "CLOSED";
  position: absolute;
  inset: 50% auto auto 50%;
  padding: 6px 16px;
  border: 3px solid var(--heart, #ff6b81);
  border-radius: 6px;
  transform: translate(-50%, -50%) rotate(-12deg);
  color: var(--heart, #ff6b81);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  background: rgba(6, 9, 13, 0.55);
}
[data-site-mode="soft"] .closed-btn {
  border-color: rgba(199, 213, 230, 0.3);
  background: linear-gradient(135deg, #1b2330, #0a0e14);
  color: #aab6c5;
  letter-spacing: 0.14em;
}
@media (prefers-reduced-motion: reduce) {
  .shop-closed__sign { animation: none; }
}
[data-site-mode="soft"] .shop-hero--simple {
  border-bottom-color: rgba(199, 213, 230, 0.16);
}
[data-site-mode="soft"] .cart-button {
  background: linear-gradient(135deg, #2b3646, #0a4c8f);
  box-shadow: 0 14px 30px rgba(10, 76, 143, 0.35);
}
[data-site-mode="soft"] .cart-button strong {
  background: rgba(5, 8, 12, 0.55);
}

/* ---- Forum ---- */
[data-site-mode="soft"] .subreddit-bar {
  border-color: rgba(199, 213, 230, 0.16);
  background: rgba(10, 14, 20, 0.85);
}

/* ---- Thanks + 404 ---- */
[data-site-mode="soft"] .thanks-card {
  border-color: rgba(199, 213, 230, 0.55);
  background:
    repeating-linear-gradient(100deg, rgba(199, 213, 230, 0.03) 0 1px, transparent 1px 14px),
    radial-gradient(circle at 0% 0%, rgba(160, 185, 220, 0.14), transparent 50%),
    linear-gradient(165deg, #1b2431 0%, #0f141c 55%, #07090d 100%);
  box-shadow:
    inset 0 0 0 6px rgba(5, 8, 12, 0.4),
    inset 0 0 0 7px rgba(199, 213, 230, 0.25),
    inset 0 0 60px rgba(0, 0, 0, 0.5),
    0 24px 60px rgba(0, 0, 0, 0.55);
}
[data-site-mode="soft"] .thanks-card::before,
[data-site-mode="soft"] .thanks-card::after {
  content: "☂";
  color: rgba(199, 213, 230, 0.7);
}
[data-site-mode="soft"] .thanks-card__crest,
[data-site-mode="soft"] .not-found__crest {
  color: #0b1119;
  background:
    radial-gradient(circle at 50% 30%, rgba(238, 242, 246, 0.9), transparent 40%),
    linear-gradient(145deg, #cfd6de, #7f97b2, #2b3646);
  border-color: rgba(199, 213, 230, 0.7);
}
[data-site-mode="soft"] .thanks-card__role,
[data-site-mode="soft"] .thanks-card__body strong,
[data-site-mode="soft"] .thanks__footer,
[data-site-mode="soft"] .thanks-divider,
[data-site-mode="soft"] .not-found__sign {
  color: var(--gold-bright);
}
[data-site-mode="soft"] .not-found__list li {
  border-color: rgba(199, 213, 230, 0.18);
  background: rgba(10, 14, 20, 0.55);
}
[data-site-mode="soft"] .not-found__list li::before {
  content: "💧";
  font-size: 0.85rem;
}

/* ---- Toasts, transitions, cursor, whispers ---- */
[data-site-mode="soft"] .tk-toast {
  background: linear-gradient(135deg, #0b1119, #1e2a3a);
  border-color: rgba(199, 213, 230, 0.45);
}
[data-site-mode="soft"] .page-transition {
  background: radial-gradient(circle at center, #1e2a3a 0%, #06080c 80%);
}
[data-site-mode="soft"] .page-transition__crest {
  filter: drop-shadow(0 6px 14px rgba(255, 107, 129, 0.45));
}
[data-site-mode="soft"] .back-to-top {
  border-color: rgba(199, 213, 230, 0.45);
  background: radial-gradient(circle at 50% 40%, rgba(199, 213, 230, 0.16), rgba(27, 36, 49, 0.92) 60%, rgba(6, 9, 13, 0.96));
}
[data-site-mode="soft"] .tk-trail {
  background: radial-gradient(circle, #e6f0ff 0%, #9fb4cc 40%, rgba(159, 180, 204, 0) 75%);
  box-shadow: 0 0 10px rgba(159, 180, 204, 0.6);
}
[data-site-mode="soft"] .ambient-whisper {
  color: rgba(199, 213, 230, 0.75);
  text-shadow: 0 2px 12px rgba(10, 132, 255, 0.35);
}
[data-site-mode="soft"] .crown-drop {
  filter: drop-shadow(0 4px 8px rgba(10, 132, 255, 0.35));
}
[data-site-mode="soft"] .checkout-modal__panel {
  background: linear-gradient(165deg, #1b2431, #07090d);
  border-color: rgba(199, 213, 230, 0.4);
}

/* ---- Rain ---- */
.rain-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 55;
  pointer-events: none;
}

/* Low mist drifting along the bottom of the screen */
.rain-fog {
  position: fixed;
  left: -20vw;
  right: -20vw;
  bottom: -6vh;
  height: 34vh;
  z-index: 54;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 60% at 20% 70%, rgba(170, 190, 215, 0.1), transparent 70%),
    radial-gradient(ellipse 30% 55% at 55% 80%, rgba(170, 190, 215, 0.08), transparent 70%),
    radial-gradient(ellipse 36% 60% at 85% 75%, rgba(170, 190, 215, 0.09), transparent 70%);
  filter: blur(8px);
  animation: rain-fog-drift 38s ease-in-out infinite alternate;
}

@keyframes rain-fog-drift {
  from { transform: translateX(-6vw); }
  to { transform: translateX(6vw); }
}

/* Lightning wash; animated from JS, rare and soft (no strobing) */
.rain-flash {
  position: fixed;
  inset: 0;
  z-index: 54;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 60% -10%, rgba(220, 232, 255, 0.9), rgba(160, 185, 230, 0.35) 45%, transparent 75%);
}

/* ---- Admin control room ---- */
.admin {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 90px) clamp(18px, 5vw, 32px);
}

.admin h1 {
  margin: 6px 0 10px;
  font-size: clamp(2rem, 5vw, 3rem);
}

.admin__lede {
  margin: 0 0 28px;
  color: rgba(238, 242, 246, 0.72);
  line-height: 1.6;
}

.admin-card {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.admin-card h2 {
  margin: 0;
  font-size: 1.3rem;
}

.admin-card p {
  margin: 0;
  color: rgba(238, 242, 246, 0.72);
  line-height: 1.55;
}

.admin-card code {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.9em;
}

.admin-status {
  font-weight: 800;
}

.admin-status strong {
  color: var(--gold-bright);
}

.admin-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-toggle button {
  min-height: 64px;
  border: 2px solid var(--line);
  border-radius: 10px;
  color: var(--bone);
  background: rgba(0, 0, 0, 0.25);
  font-weight: 900;
  font-size: 1.05rem;
}

.admin-toggle button[aria-pressed="true"] {
  border-color: var(--gold-bright);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---- Desktop hero layout ----
 * The base layout parks the crown stage in grid row 2 and pulls it up with a
 * fixed translate. The soft hero copy is taller (reply timer), which would push
 * the stage down, so soft mode places copy + stage side by side in row 1.
 */
@media (min-width: 861px) {
  [data-site-mode="soft"] .kingdom-sky {
    position: absolute;
  }
  [data-site-mode="soft"] .crown-stage {
    grid-column: 1;
    grid-row: 1;
    translate: none;
  }
  [data-site-mode="soft"] .hero__copy {
    grid-column: 2;
    grid-row: 1;
  }
  [data-site-mode="soft"] .renaissance-banner {
    margin-top: -150px;
  }
}

/* ---- Small screens ---- */
@media (max-width: 860px) {
  .reply-pill { left: 10px; bottom: 12px; font-size: 0.72rem; padding: 7px 12px; }
  .reply-timer { margin-left: auto; margin-right: auto; }
}

@media (max-width: 420px) {
  .reply-timer__units { gap: 6px; }
  .reply-timer__units span { padding: 8px 2px; }
  .reply-timer__units em { font-size: 0.62rem; }
}

/* ---- Reduced motion: no rain, no flicker ---- */
@media (prefers-reduced-motion: reduce) {
  .rain-canvas,
  .rain-fog,
  .rain-flash { display: none; }
  .sad-shed__glow,
  .sad-shed__drip,
  .reply-pill__dot,
  .sad-shed__trash,
  [data-site-mode="soft"] .crown-stage::after {
    animation: none;
  }
}

/* =========================================================
   Heartbreak edit intro (after the captcha)
   ========================================================= */
.hb-intro {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #1a0b12 0%, #050306 70%);
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  opacity: 0;
}
/* Letterbox bars */
.hb-intro::before,
.hb-intro::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 9vh;
  background: #000;
  z-index: 3;
}
.hb-intro::before { top: 0; }
.hb-intro::after { bottom: 0; }

.hb-intro__stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  transition: opacity 120ms steps(1);
}
.hb-heart {
  width: min(46vw, 230px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 22px rgba(255, 60, 100, 0.55));
}
.hb-outline {
  fill: none;
  stroke: #ff6b81;
  stroke-width: 2.4;
  stroke-linejoin: round;
}
.hb-crack {
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linejoin: miter;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 4px #fff);
  transition: stroke-dashoffset 280ms cubic-bezier(.6, 0, .4, 1);
}
.hb-intro.is-cracked .hb-crack { stroke-dashoffset: 0; }
.hb-intro.is-broken .hb-crack { opacity: 0; transition: opacity 80ms; }

.hb-half {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 1100ms cubic-bezier(.2, .8, .2, 1), opacity 700ms ease 500ms;
}
.hb-intro.is-broken .hb-half--l { transform: translate(-20px, 16px) rotate(-26deg); opacity: 0.35; }
.hb-intro.is-broken .hb-half--r { transform: translate(20px, 20px) rotate(22deg); opacity: 0.35; }

.hb-heart.is-beating { animation: hb-beat 560ms ease-in-out infinite; }
.hb-heart.is-shaking { animation: hb-shake 90ms linear infinite; }
@keyframes hb-beat {
  0%, 100% { transform: scale(1); }
  18% { transform: scale(1.09); }
  36% { transform: scale(0.98); }
  52% { transform: scale(1.05); }
}
@keyframes hb-shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-3px, 1px) rotate(-1.5deg); }
  50% { transform: translate(3px, -1px) rotate(1.5deg); }
  75% { transform: translate(-2px, -2px) rotate(-1deg); }
}

.hb-intro__pct {
  margin: 8px 0 0;
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hb-intro__label {
  margin: 0;
  min-height: 1.4em;
  font-size: clamp(0.95rem, 3.2vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffd1da;
  text-transform: lowercase;
}
.hb-dots i {
  font-style: normal;
  animation: hb-dot 1s infinite;
}
.hb-dots i:nth-child(2) { animation-delay: 0.15s; }
.hb-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hb-dot { 0%, 60%, 100% { opacity: 0.2; } 30% { opacity: 1; } }

.hb-shard {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 12px;
  height: 12px;
  clip-path: polygon(50% 0, 100% 70%, 20% 100%);
  pointer-events: none;
}

/* Hard-cut caption words */
.hb-intro__caption {
  position: absolute;
  inset: 50% auto auto 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
  font-size: clamp(3rem, 13vw, 7.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  text-transform: lowercase;
  color: #fff;
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
  text-shadow: 4px 0 rgba(255, 50, 90, 0.75), -4px 0 rgba(80, 170, 255, 0.75), 0 10px 40px rgba(0, 0, 0, 0.8);
}
.hb-intro__caption.is-crown { text-transform: none; color: #d8c27a; }
.hb-intro__caption.is-red { color: #ff4d6d; }
.hb-intro.is-captions .hb-intro__stage { opacity: 0; }
.hb-intro.is-captions .hb-intro__caption { opacity: 1; }
.hb-intro.is-captions { background: #050306; }
.is-punch { animation: hb-punch 260ms cubic-bezier(.2, .9, .3, 1.2); }
.hb-intro__caption.is-punch { animation-name: hb-punch-center; }
@keyframes hb-punch {
  0% { transform: scale(1.35); filter: blur(4px); }
  100% { transform: scale(1); filter: blur(0); }
}
@keyframes hb-punch-center {
  0% { transform: translate(-50%, -50%) scale(1.4); filter: blur(5px); }
  100% { transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}

.hb-intro__flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.hb-intro__skip {
  position: absolute;
  right: 18px;
  bottom: calc(9vh + 14px);
  z-index: 5;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font: 700 0.85rem "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
}
.hb-intro__skip:focus-visible { outline: 2px solid #ff6b81; outline-offset: 2px; }

/* The cut from the intro into the page */
.hb-reveal main,
.hb-reveal .site-header {
  animation: hb-page-in 1100ms cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes hb-page-in {
  0% { scale: 1.14; filter: blur(12px) brightness(1.9) saturate(0.3); opacity: 0.2; }
  30% { filter: blur(2px) brightness(1.2) saturate(0.8); opacity: 1; }
  100% { scale: 1; filter: none; opacity: 1; }
}

/* =========================================================
   TikTok-edit layer: grain, vignette, beat flash, captions
   ========================================================= */
.edit-fx {
  --beat: 0;
  position: fixed;
  inset: 0;
  z-index: 9400;
  pointer-events: none;
}
.edit-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Closes in during a build-up, breathes on the kick */
  background: radial-gradient(ellipse at center, transparent calc(55% - var(--rise, 0) * 22%), rgba(0, 0, 0, calc(0.5 + var(--beat) * 0.12 + var(--rise, 0) * 0.35)) 100%);
}
.edit-fx__grain {
  position: absolute;
  inset: -50%;
  opacity: 0.075;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  animation: edit-grain 0.9s steps(6) infinite;
}
@keyframes edit-grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(5%, -7%); }
  60% { transform: translate(-4%, -3%); }
  80% { transform: translate(7%, 5%); }
  100% { transform: translate(0, 0); }
}
.edit-fx__flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(220, 235, 255, 0.9), rgba(160, 190, 230, 0.35) 60%, transparent 100%);
  opacity: calc(var(--beat) * 0.07 + var(--flash, 0) * 0.6);
  mix-blend-mode: screen;
}
.hb-intro-active .edit-fx,
.hb-intro-active .edit-caption { opacity: 0; }

/* Beat-reactive headings: small zoom punch + RGB split on the kick */
[data-site-mode="soft"] .hero__copy h1,
[data-site-mode="soft"] .section__heading h2 {
  scale: calc(1 + var(--beat, 0) * 0.03);
  text-shadow:
    calc(var(--beat, 0) * 5px) 0 0 rgba(255, 70, 110, calc(var(--beat, 0) * 0.7)),
    calc(var(--beat, 0) * -5px) 0 0 rgba(90, 170, 255, calc(var(--beat, 0) * 0.7)),
    0 12px 30px rgba(0, 0, 0, 0.55);
}
[data-site-mode="soft"] .hero__copy h1 { transform-origin: left center; }
[data-site-mode="soft"] .reply-timer__units,
[data-site-mode="soft"] .shop-closed__board {
  scale: calc(1 + var(--beat, 0) * 0.02);
}

/* Auto-caption text, like a TikTok edit */
.edit-caption {
  position: fixed;
  left: 50%;
  bottom: 74px;
  z-index: 9450;
  max-width: min(86vw, 640px);
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  font: 900 clamp(1.15rem, 4.2vw, 1.7rem)/1.15 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em;
  color: #fff;
  -webkit-text-stroke: 1.2px rgba(0, 0, 0, 0.9);
  paint-order: stroke fill;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.85);
  transition: opacity 260ms ease, transform 260ms ease;
}
.edit-caption.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}
.edit-caption span {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  transition: opacity 120ms ease, transform 160ms cubic-bezier(.2, .9, .3, 1.3), color 120ms ease;
}
.edit-caption span.is-said { opacity: 1; transform: none; }
.edit-caption span.is-now { color: #ff6b81; }

/* Section reveals cut in like an edit (flash + zoom + blur) */
@media (prefers-reduced-motion: no-preference) {
  [data-site-mode="soft"] [data-reveal].is-revealed {
    animation: edit-cut-in 760ms cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: var(--reveal-delay, 0ms);
  }
}
@keyframes edit-cut-in {
  0% { scale: 1.06; filter: blur(10px) brightness(1.8) saturate(0.4); }
  35% { filter: blur(0) brightness(1.15) saturate(0.9); }
  100% { scale: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .edit-fx__grain,
  .hb-heart.is-beating,
  .hb-heart.is-shaking { animation: none; }
  .hb-reveal main,
  .hb-reveal .site-header { animation: none; }
  .edit-caption span { transition: none; }
}
@media (max-width: 560px) {
  .edit-caption { bottom: 66px; }
}

/* =========================================================
   Hero art: bench photo (default) vs 3D statue.
   Toggle with html[data-hero-art] (mode.js / admin.html / tk.hero()).
   ========================================================= */
.hero-photo { display: none; }

[data-site-mode="soft"][data-hero-art="photo"] .hero-photo { display: block; }
[data-site-mode="soft"][data-hero-art="photo"] #crownCanvas,
[data-site-mode="soft"][data-hero-art="photo"] .sad-shed,
[data-site-mode="soft"][data-hero-art="photo"] .crown-hint {
  display: none;
}

/* Drop the panel box so the photo melts into the page */
[data-site-mode="soft"][data-hero-art="photo"] .crown-stage {
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
[data-site-mode="soft"][data-hero-art="photo"] .crown-stage::before,
[data-site-mode="soft"][data-hero-art="photo"] .crown-stage::after {
  display: none;
}

.hero-photo {
  --beat: 0;
  position: absolute;
  top: 50%;
  left: 48%;
  z-index: 0;
  width: 129%;
  aspect-ratio: 1400 / 1112;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Feather every edge into the page background */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 9%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 11%, #000 85%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 9%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 11%, #000 85%, transparent 100%);
  mask-composite: intersect;
  animation: hero-photo-drift 26s ease-in-out infinite alternate;
  transform-origin: 45% 62%;
}
.hero-photo picture,
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-photo img {
  object-fit: cover;
  /* Grade it toward the site's cold blue palette; brightens on the beat */
  filter: saturate(calc(0.9 + var(--flash, 0) * 0.4)) contrast(calc(1.05 + var(--flash, 0) * 0.25)) brightness(calc(0.9 + var(--beat) * 0.12 + var(--flash, 0) * 0.55));
  transform: scale(var(--cz, 1));
  transform-origin: var(--co, 50% 50%);
}
/* Cold wash so the photo shares the page's color */
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 14, 20, 0.15), rgba(10, 14, 20, 0) 30%, rgba(10, 14, 20, 0) 70%, rgba(10, 14, 20, 0.35)),
    rgba(40, 60, 90, 0.12);
  mix-blend-mode: multiply;
}
@keyframes hero-photo-drift {
  from { scale: 1; }
  to { scale: 1.06; }
}

/* Flickering window + streetlamp */
.hero-photo__glow {
  position: absolute;
  z-index: 1;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  mix-blend-mode: screen;
}
.hero-photo__glow--window {
  left: 49%;
  top: 29%;
  width: 22%;
  background: radial-gradient(circle, rgba(255, 196, 110, 0.32), rgba(255, 196, 110, 0) 62%);
  animation: hero-window-flicker 7s steps(1) infinite;
}
.hero-photo__glow--lamp {
  left: 9.5%;
  top: 12.5%;
  width: 16%;
  background: radial-gradient(circle, rgba(255, 214, 140, 0.4), rgba(255, 214, 140, 0) 60%);
  animation: hero-lamp-hum 3.2s ease-in-out infinite;
}
@keyframes hero-window-flicker {
  0%, 100% { opacity: 1; }
  41% { opacity: 0.35; }
  43% { opacity: 1; }
  45% { opacity: 0.2; }
  47% { opacity: 1; }
  78% { opacity: 0.55; }
  80% { opacity: 1; }
}
@keyframes hero-lamp-hum {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Raindrop ripples on the wet ground */
.hero-photo__ripple {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  width: 7%;
  aspect-ratio: 3 / 1;
  border: 1px solid rgba(210, 225, 245, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  animation: hero-ripple 2.8s ease-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes hero-ripple {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
}

@media (max-width: 860px) {
  .hero-photo {
    left: 50%;
    width: 116%;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 12%, #000 82%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 12%, #000 82%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo,
  .hero-photo__glow,
  .hero-photo__ripple { animation: none; }
}

/* =========================================================
   Nonchalant counter (always 0)
   ========================================================= */
.nonchalant {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 10px 18px 10px 12px;
  border: 1px solid rgba(255, 107, 129, 0.35);
  border-radius: 14px;
  background: rgba(255, 77, 109, 0.08);
}
.nonchalant strong {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #0b1119;
  border: 1px solid rgba(255, 107, 129, 0.45);
  color: #ff6b81;
  font: 900 1.7rem/1 "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
.nonchalant span {
  color: #f1f5fa;
  font: 800 0.8rem/1.2 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
@media (max-width: 860px) {
  .nonchalant { display: flex; width: fit-content; margin-inline: auto; }
}

/* =========================================================
   Tap Jason on the bench -> crying sound
   ========================================================= */
.hero-photo__cry {
  position: absolute;
  z-index: 2;
  left: 27%;
  top: 28%;
  width: 35%;
  height: 63%;
  padding: 0;
  border: 0;
  border-radius: 40% 40% 12% 12%;
  background: none;
  cursor: pointer;
  pointer-events: auto;
}
.hero-photo__cry:focus-visible { outline: 2px dashed #ff6b81; outline-offset: 4px; }
.hero-photo.is-sobbing picture { animation: hero-sob 1.4s ease-in-out; transform-origin: 44% 70%; }
@keyframes hero-sob {
  0%, 100% { transform: none; }
  10%, 30%, 50%, 70% { transform: translateY(1.5px) scale(1.004); }
  20%, 40%, 60%, 80% { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo.is-sobbing picture { animation: none; }
}

/* =========================================================
   Beat engine visuals (driven by startBeatEngine in app.js)
   ========================================================= */
/* Bench photo: kick punch-in, build-up push-in, drop shake */
.hero-photo picture {
  scale: calc(1 + var(--beat, 0) * 0.028 + var(--flash, 0) * 0.05 + var(--rise, 0) * 0.07);
  translate: var(--shx, 0) var(--shy, 0);
  transform-origin: 46% 55%;
}
/* Hard camera cuts on downbeats (no transition = a real cut) */
.hero-photo[data-cut="him"]   { --cz: 1.16; --co: 44% 58%; }
.hero-photo[data-cut="head"]  { --cz: 1.34; --co: 51% 34%; }
.hero-photo[data-cut="bench"] { --cz: 1.2;  --co: 30% 78%; }
.hero-photo[data-cut="wide"]  { --cz: 1;    --co: 50% 50%; }

/* Headings: kick = zoom, snare = RGB split, drop = shake */
[data-site-mode="soft"] .hero__copy h1,
[data-site-mode="soft"] .section__heading h2 {
  scale: calc(1 + var(--beat, 0) * 0.025 + var(--flash, 0) * 0.03);
  translate: var(--shx, 0) var(--shy, 0);
  text-shadow:
    calc(var(--snare, 0) * 6px + var(--beat, 0) * 2px) 0 0 rgba(255, 70, 110, calc(var(--snare, 0) * 0.8 + var(--beat, 0) * 0.25)),
    calc(var(--snare, 0) * -6px - var(--beat, 0) * 2px) 0 0 rgba(90, 170, 255, calc(var(--snare, 0) * 0.8 + var(--beat, 0) * 0.25)),
    0 12px 30px rgba(0, 0, 0, 0.55);
}

/* Small UI that breathes with the kick */
[data-site-mode="soft"] .nonchalant {
  box-shadow: 0 0 calc(var(--beat, 0) * 26px) rgba(255, 77, 109, calc(var(--beat, 0) * 0.45));
}
[data-site-mode="soft"] .nonchalant strong { scale: calc(1 + var(--snare, 0) * 0.12); }
.reply-pill .reply-pill__dot { scale: calc(1 + var(--beat, 0) * 0.9); }

/* Grain gets heavier in the drops, lighter when it's quiet */
[data-edit-section="drop"] .edit-fx__grain { opacity: 0.1; }
[data-edit-section="quiet"] .edit-fx__grain,
[data-edit-section="outro"] .edit-fx__grain { opacity: 0.06; }

/* Intro: the loading heart thumps on every beat */
.hb-heart.is-punch { animation: hb-thump 300ms cubic-bezier(.2, .9, .3, 1); }
@keyframes hb-thump { 0% { scale: 1.12; } 100% { scale: 1; } }

/* Captions: each word pops on its beat */
.edit-caption.is-punch { animation: cap-pop 240ms cubic-bezier(.2, .9, .3, 1.3); }
@keyframes cap-pop { 0% { scale: 1.1; } 100% { scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero-photo picture,
  [data-site-mode="soft"] .hero__copy h1,
  [data-site-mode="soft"] .section__heading h2 { scale: none; translate: none; }
  .hero-photo[data-cut] { --cz: 1; }
  .hb-heart.is-punch,
  .edit-caption.is-punch { animation: none; }
}

/* =========================================================
   Karaoke lyrics (noraebang style)
   ========================================================= */
.karaoke {
  --beat: 0;
  position: fixed;
  left: 50%;
  bottom: 64px;
  z-index: 9460;
  display: grid;
  gap: 0.18em;
  width: min(1000px, 92vw);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  font: 900 clamp(1.35rem, 3.4vw, 2.6rem)/1.15 "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em;
  transition: opacity 240ms ease;
}
.karaoke.is-on { opacity: 1; }
/* Soft dark band behind the text so it reads over anything */
.karaoke::before {
  content: "";
  position: absolute;
  inset: -0.8em -12vw -0.9em;
  z-index: -1;
  background: radial-gradient(60% 70% at 50% 60%, rgba(4, 6, 12, 0.72), transparent 75%);
}
.karaoke__row {
  min-height: 1.3em;
  white-space: nowrap;
  overflow: visible;
  transform-origin: center;
}
.karaoke__row--a { text-align: left; }
.karaoke__row--b { text-align: right; }
.karaoke__row.is-current { scale: calc(1 + var(--beat) * 0.035); }

/* One word: white + navy outline; the sung part wipes in pink + white outline.
   Two copies of the word share one grid cell, so they line up exactly. The
   extra padding (cancelled by negative margin) gives the glow room so the
   wipe's clip never shows a box. */
.kw {
  position: relative;
  display: inline-grid;
  vertical-align: baseline;
}
.kw > span {
  grid-area: 1 / 1;
  padding: 1.1em;
  margin: -1.1em;
  white-space: pre;
  -webkit-text-stroke-width: 0.16em;
  paint-order: stroke fill;
}
.kw__base {
  color: #fff;
  -webkit-text-stroke-color: #102a6b;
  text-shadow: 0 0.08em 0.25em rgba(0, 0, 0, 0.6);
}
.kw__fill {
  color: #ff3d7f;
  -webkit-text-stroke-color: #fff;
  text-shadow: 0 0 0.3em rgba(255, 61, 127, 0.85), 0 0 0.8em rgba(255, 61, 127, 0.4);
  /* Wipe front moves across the letters; the glow gets 1.1em of room on every
     side so it never shows a box edge. Hidden until the word starts. */
  clip-path: inset(0 calc((1 - var(--p, 0)) * (100% - 1.1em)) 0 0);
  opacity: calc(var(--p, 0) * 40);
}
.karaoke__row:not(.is-current) .kw { opacity: 0.92; }

/* Countdown dots before a line after a gap */
.karaoke__count {
  display: inline-block;
  min-width: 0;
  margin-right: 0.3em;
  color: #ff3d7f;
  -webkit-text-stroke: 0.12em #fff;
  paint-order: stroke fill;
  font-size: 0.55em;
  letter-spacing: 0.12em;
  vertical-align: 0.35em;
}
.karaoke__count:empty { display: none; }
.karaoke__row--b .karaoke__count { margin-right: 0.3em; }

@media (max-width: 560px) {
  .karaoke { bottom: 58px; font-size: clamp(1.05rem, 5.4vw, 1.4rem); }
  .karaoke__row { white-space: normal; }
}
.hb-intro-active .karaoke { opacity: 0; }

/* Admin: lyric timing tool */
.lyric-tool textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(199, 213, 230, 0.25);
  border-radius: 10px;
  background: rgba(5, 8, 12, 0.6);
  color: #f1f5fa;
  font: 0.92rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical;
}
.lyric-tool textarea:focus-visible,
.lyric-tool audio:focus-visible { outline: 2px solid #ff6b81; outline-offset: 2px; }
.lyric-tool__label {
  display: block;
  margin: 14px 0 6px;
  color: rgba(199, 213, 230, 0.75);
  font: 800 0.72rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lyric-tool__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.lyric-tool__check { display: inline-flex; align-items: center; gap: 6px; color: #d9e2ee; font-size: 0.9rem; }
.lyric-tool__now { margin: 12px 0 10px; color: #ff9aae; font-weight: 700; }
.lyric-tool audio { width: 100%; margin-bottom: 4px; }
.lyric-tool kbd {
  padding: 1px 6px;
  border: 1px solid rgba(199, 213, 230, 0.35);
  border-radius: 5px;
  background: rgba(5, 8, 12, 0.6);
  font: 700 0.8em ui-monospace, Menlo, monospace;
}


/* =========================================================
   Intro scenes: countdown -> "girl," + L's -> line 1 -> bike ride -> heart
   ========================================================= */
.hb-intro__stage { opacity: 0; scale: 0.7; transition: opacity 240ms ease, scale 420ms cubic-bezier(.2, .9, .3, 1.2); }
.hb-intro.is-heart .hb-intro__stage { opacity: 1; scale: 1; }
.hb-intro.is-captions .hb-intro__stage { transition: none; }

.hb-count,
.hb-lyric,
.hb-ride {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  text-align: center;
}
.hb-intro.is-count .hb-count,
.hb-intro.is-l1 .hb-lyric,
.hb-intro.is-ride .hb-ride { opacity: 1; }

.hb-count {
  font: 900 clamp(2rem, 7vw, 4rem)/1 "Arial Black", Arial, sans-serif;
  letter-spacing: 0.3em;
  color: #ff3d7f;
  -webkit-text-stroke: 0.08em #fff;
  paint-order: stroke fill;
}

/* Words share the karaoke look; emphasis classes change color/size */
.hb-lyric__hero,
.hb-lyric__line,
.hb-ride__line,
.hb-ride__num,
.hb-intro__lyric {
  margin: 0;
  max-width: 94vw;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.hb-lyric__hero { font-size: clamp(4.4rem, 22vw, 14rem); text-transform: uppercase; }
.hb-lyric__line { font-size: clamp(1.5rem, 5vw, 3.2rem); margin-top: -0.2em; }
.hb-ride__line { font-size: clamp(1.4rem, 4.6vw, 2.9rem); }
.hb-ride__num { font-size: clamp(6rem, 30vw, 19rem); line-height: 0.95; letter-spacing: 0.02em; }
.hb-intro__lyric { min-height: 1.3em; margin-top: 14px; font-size: clamp(1.25rem, 4.2vw, 2.4rem); text-align: center; transition: opacity 200ms ease; }

.kw.is-hot .kw__base { color: #ffd1dc; }
.kw.is-hot .kw__fill { color: #ff1f5e; text-shadow: 0 0 0.35em rgba(255, 31, 94, 0.95), 0 0 0.9em rgba(255, 31, 94, 0.5); }
.kw.is-gold .kw__base { color: #fff4cf; -webkit-text-stroke-color: #4a3410; }
.kw.is-gold .kw__fill { color: #ffc93c; -webkit-text-stroke-color: #fff; text-shadow: 0 0 0.3em rgba(255, 201, 60, 0.9), 0 0 0.9em rgba(255, 150, 0, 0.45); }
.kw.is-big { font-size: 1.28em; }
.karaoke .kw.is-big { font-size: 1.18em; }

/* Flood of L's */
.hb-ls { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.hb-l {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font: 900 var(--s)/1 "Arial Black", Arial, sans-serif;
  color: #fff;
  -webkit-text-stroke: 0.08em #102a6b;
  paint-order: stroke fill;
  text-shadow: 0 0.06em 0.3em rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%) rotate(var(--r));
}
.hb-l--pink { color: #ff3d7f; -webkit-text-stroke-color: #fff; text-shadow: 0 0 0.4em rgba(255, 61, 127, 0.7); }

/* Whoosh streak */
.hb-whoosh {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  width: 60vw;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85) 45%, rgba(255, 210, 225, 0.6) 55%, transparent);
  filter: blur(18px);
  opacity: 0;
  translate: 110vw 0;
  pointer-events: none;
}

/* The bike (positioned by JS along the words) */
.hb-bike {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  font-size: clamp(3.4rem, 11vw, 7rem);
  line-height: 1;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.6));
  will-change: transform;
}
.hb-bike__emoji { display: inline-block; transform: scaleX(-1); } /* face right */

@media (prefers-reduced-motion: reduce) {
  .hb-intro__stage { transition: none; }
}

/* Held notes: stretched caps that swell as he holds them */
.kw.is-held { scale: calc(1 + var(--p, 0) * 0.1); transform-origin: left center; }
.hb-lyric__hero { font-size: clamp(3rem, 12.5vw, 9.5rem); }
.hb-lyric__line { white-space: normal; }

/* 🥁 on the bass */
.hb-drums { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hb-drum {
  position: absolute;
  left: 50%;
  top: 72%;
  translate: -50% -50%;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6));
}
.hb-drum--big { top: 74%; font-size: clamp(4rem, 13vw, 8.5rem); }

/* "772" stays digits; the held 2 swells while he holds it */
.hb-ride__num { white-space: nowrap; }
.hb-ride__num .kw.is-held { scale: calc(1 + var(--p, 0) * 0.22); transform-origin: 50% 90%; }

/* Caption cuts ("he / used to be / TK.") play on pure black: hide the broken heart */
.hb-intro.is-captions { background: #000; }
.hb-intro.is-captions .hb-intro__stage { opacity: 0 !important; transition: none; }

/* Header sits above the film grain / vignette so the logo isn't dimmed */
[data-site-mode="soft"] .site-header { z-index: 9420; }
.brand-word__tk { color: #b3c2d6; }
.brand-word__tag { color: rgba(199, 213, 230, 0.72); }
.brand-mark { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 16px rgba(255, 90, 120, 0.3)) brightness(1.08); }

/* =========================================================
   Text Her (text.html): iMessage simulator
   ========================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.text-sim {
  display: grid;
  justify-items: center;
  gap: 22px;
}
.text-sim__intro { text-align: center; }
.text-sim__intro h1 {
  margin: 4px 0 6px;
  color: var(--gold-bright);
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1;
}
.text-sim__intro p:not(.eyebrow) { margin: 0; color: rgba(199, 213, 230, 0.75); font-style: italic; }

.phone {
  --beat: 0;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  width: min(100%, 400px);
  height: min(680px, calc(100svh - 190px));
  min-height: 460px;
  overflow: hidden;
  border-radius: 38px;
  border: 1px solid rgba(199, 213, 230, 0.18);
  background: #000;
  box-shadow: 0 0 0 8px #111418, 0 0 0 9px rgba(199, 213, 230, 0.15), 0 40px 100px rgba(0, 0, 0, 0.6);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
.phone__head {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  padding: 14px 12px 10px;
  background: rgba(28, 28, 30, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.phone__back,
.phone__info {
  border: 0;
  background: none;
  color: #0a84ff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}
.phone__info { font-size: 1.1rem; text-align: right; cursor: default; }
.phone__contact { display: grid; justify-items: center; gap: 2px; }
.phone__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(180deg, #a3a8b5, #6b7180);
  font-size: 1.3rem;
}
.phone__contact strong { color: #fff; font-size: 0.82rem; font-weight: 600; }
.phone__contact small { color: rgba(235, 235, 245, 0.55); font-size: 0.68rem; }

.phone__log {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 12px 12px 8px;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: none;
}
.phone__log::-webkit-scrollbar { display: none; }
.msg { position: relative; display: flex; flex-direction: column; max-width: 78%; }
.msg--him { align-self: flex-end; align-items: flex-end; }
.msg--her { align-self: flex-start; align-items: flex-start; }
.msg__bubble {
  margin: 0;
  padding: 8px 13px;
  border-radius: 18px;
  font-size: 0.95rem;
  line-height: 1.3;
  word-break: break-word;
  animation: msg-in 220ms cubic-bezier(.2, .8, .2, 1.2);
}
.msg--him .msg__bubble { background: linear-gradient(180deg, #2a8cff, #0a7aff); color: #fff; border-bottom-right-radius: 5px; }
.msg--her .msg__bubble { background: #26262a; color: #fff; border-bottom-left-radius: 5px; }
@keyframes msg-in { from { transform: translateY(8px) scale(0.96); opacity: 0; } }
.msg + .msg--him,
.msg + .msg--her { margin-top: 1px; }
.msg--him + .msg--her,
.msg--her + .msg--him { margin-top: 8px; }
.msg__receipt {
  margin: 2px 4px 4px;
  color: rgba(235, 235, 245, 0.5);
  font-size: 0.66rem;
  font-weight: 600;
}
.msg__tapback {
  position: absolute;
  top: -12px;
  left: -14px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #000;
  background: #3a3a3f;
  font-size: 0.85rem;
}
.msg-divider {
  align-self: center;
  margin: 10px 0 6px;
  color: rgba(235, 235, 245, 0.45);
  font-size: 0.66rem;
  font-weight: 600;
  text-align: center;
}
.msg-divider--tap { margin: 2px 0 6px; font-weight: 500; font-style: italic; }
.msg--typing .msg__bubble { display: inline-flex; gap: 4px; padding: 12px 14px; }
.msg--typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(235, 235, 245, 0.55);
  animation: typing-dot 1.1s infinite ease-in-out;
}
.msg--typing i:nth-child(2) { animation-delay: 0.15s; }
.msg--typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

.phone__chips {
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.phone__chips::-webkit-scrollbar { display: none; }
.phone__chip {
  flex: none;
  padding: 7px 12px;
  border: 1px solid rgba(10, 132, 255, 0.55);
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.12);
  color: #8fc3ff;
  font: 600 0.8rem/1 -apple-system, "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
}
.phone__chip:hover { background: rgba(10, 132, 255, 0.25); }
.phone__chip:focus-visible,
.phone__back:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
.phone__compose {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 16px;
}
.phone__compose input {
  flex: 1;
  min-width: 0;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: #0d0d0f;
  color: #fff;
  font: 0.95rem -apple-system, "Helvetica Neue", Arial, sans-serif;
  outline: none;
}
.phone__compose input:focus { border-color: #0a84ff; }
.phone__compose button {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #0a84ff;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
}
.phone__compose button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.text-sim__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 560px);
}
.text-sim__stats div {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 6px;
  border: 1px solid rgba(199, 213, 230, 0.16);
  border-radius: 14px;
  background: rgba(10, 14, 20, 0.6);
}
.text-sim__stats strong { color: #fff; font: 900 1.4rem/1 "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums; }
.text-sim__stats span { color: rgba(199, 213, 230, 0.6); font: 700 0.66rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.text-sim__stats div:last-child strong { color: #ff6b81; }

@media (max-width: 560px) {
  .phone { border-radius: 30px; height: calc(100svh - 230px); min-height: 440px; }
  .text-sim__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header nav a { font-size: clamp(0.56rem, 2.3vw, 0.74rem); padding: 8px 2px; letter-spacing: 0.02em; }
}
@media (prefers-reduced-motion: reduce) {
  .msg__bubble { animation: none; }
  .msg--typing i { animation: none; opacity: 0.7; }
}
/* Text Her: fit the phone on screen; the reply pill would cover the compose bar */
.phone { height: min(620px, calc(100svh - 250px)); }
.page-text .reply-pill { display: none; }
[data-site-mode="soft"] .page-text .page-shell { padding-top: clamp(20px, 3vw, 40px); }
@media (max-width: 560px) {
  .phone { height: calc(100svh - 330px); min-height: 420px; }
}

/* Replay intro button (hero) */
.replay-intro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 107, 129, 0.5);
  border-radius: 999px;
  background: rgba(255, 77, 109, 0.12);
  color: #ffd1da;
  font: 800 0.9rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.replay-intro span { font-size: 1.1rem; line-height: 1; display: inline-block; transition: transform 400ms cubic-bezier(.2, .9, .3, 1.3); }
.replay-intro:hover { background: rgba(255, 77, 109, 0.22); border-color: #ff6b81; }
.replay-intro:hover span { transform: rotate(-200deg); }
.replay-intro:active { transform: scale(0.97); }
.replay-intro:focus-visible { outline: 2px solid #ff6b81; outline-offset: 3px; }

/* =========================================================
   Mobile polish
   ========================================================= */
@media (max-width: 560px) {
  /* Nav: 7 links as a tidy 4 + 3 grid instead of a cramped single row */
  .site-header nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px !important;
  }
  .site-header nav a { font-size: 0.66rem !important; padding: 8px 2px !important; letter-spacing: 0.04em !important; }

  /* Intro: "GURL" reads bigger than the L's around it */
  .hb-lyric__hero { font-size: clamp(3.1rem, 15vw, 5rem); }
  .hb-lyric__line { font-size: clamp(1.5rem, 7vw, 2.2rem); line-height: 1.15; }
  .hb-ride__line { font-size: clamp(1.3rem, 6.4vw, 1.9rem); }
  .hb-ride__num { font-size: clamp(6rem, 34vw, 9rem); }
  .hb-intro__lyric { font-size: clamp(1.35rem, 6.4vw, 1.9rem); padding: 0 12px; }
  .hb-intro__caption { font-size: clamp(3.4rem, 17vw, 5.5rem); }
  .hb-drum--big { font-size: clamp(3.4rem, 17vw, 5rem); }

  /* Page karaoke: centered rows on a solid band at the bottom, above the pill */
  .karaoke {
    left: 0;
    bottom: 0;
    width: 100%;
    transform: none;
    padding: 26px 14px calc(62px + env(safe-area-inset-bottom));
    font-size: clamp(1.1rem, 5.2vw, 1.4rem);
    background: linear-gradient(180deg, rgba(4, 6, 12, 0) 0%, rgba(4, 6, 12, 0.82) 38%, rgba(4, 6, 12, 0.94) 100%);
  }
  .karaoke::before { display: none; }
  .karaoke__row,
  .karaoke__row--a,
  .karaoke__row--b { text-align: center; white-space: normal; }
  .karaoke__row + .karaoke__row { opacity: 0.85; }
  .edit-caption { bottom: calc(66px + env(safe-area-inset-bottom)); }
}

.hb-lyric__hero { white-space: nowrap; }
/* No sideways scroll from decorative overhangs (banner tassels etc). `clip` keeps the sticky header working. */
html, body { overflow-x: clip; }

/* =========================================================
   Captcha is modal: no header on top of it, no page scroll behind it
   ========================================================= */
html.gate-open { overflow: hidden; }
html.gate-open .site-header,
html.gate-open .reply-pill { display: none !important; }

/* =========================================================
   Mobile hamburger menu (<= 860px)
   ========================================================= */
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .site-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 14px !important;
  }
  .site-header .brand { justify-self: auto; }
  .nav-toggle {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(199, 213, 230, 0.28);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
  }
  .nav-toggle:focus-visible { outline: 2px solid #ff6b81; outline-offset: 2px; }
  .nav-toggle__bars { display: grid; gap: 5px; width: 22px; }
  .nav-toggle__bars i {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #e6edf6;
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease;
  }
  html.nav-open .nav-toggle__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  html.nav-open .nav-toggle__bars i:nth-child(2) { opacity: 0; }
  html.nav-open .nav-toggle__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Closed: nav hidden. Open: full-width sheet under the header. */
  .site-header nav { display: none !important; }
  html.nav-open .site-header nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: auto;
    padding: 10px 14px 18px !important;
    background: rgba(8, 11, 16, 0.97);
    border-bottom: 1px solid rgba(199, 213, 230, 0.14);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(14px);
    animation: nav-drop 220ms cubic-bezier(.2, .8, .2, 1);
  }
  html.nav-open .site-header nav a {
    padding: 14px 16px !important;
    border-radius: 14px;
    border: 1px solid rgba(199, 213, 230, 0.14);
    font-size: 0.95rem !important;
    letter-spacing: 0.08em !important;
    text-align: left;
  }
  html.nav-open .site-header nav a[aria-current="page"] {
    border-color: rgba(255, 107, 129, 0.55);
    color: #ffd1da;
    background: rgba(255, 77, 109, 0.12);
    box-shadow: none;
  }
  @keyframes nav-drop { from { opacity: 0; transform: translateY(-8px); } }
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bars i { transition: none; }
  html.nav-open .site-header nav { animation: none; }
}

/* =========================================================
   Mobile: smooth "ridin' through the 772" scene
   The giant glowing digits made the clip-path wipe repaint a huge blur every
   frame on phones (blocky + choppy). On mobile the words/digits fade in on
   their beat instead (compositor-only opacity), with a lighter glow.
   ========================================================= */
@media (max-width: 860px) {
  .hb-ride .kw__fill {
    clip-path: none;
    opacity: clamp(0, calc(var(--p, 0) * 5), 1);
    will-change: opacity;
    text-shadow: 0 0 0.16em rgba(255, 61, 127, 0.75);
  }
  .hb-ride .kw.is-gold .kw__fill { text-shadow: 0 0 0.12em rgba(255, 190, 60, 0.8); }
  .hb-ride .kw__base { text-shadow: none; }
  .hb-ride .kw { will-change: transform; }
  .hb-ride .kw > span { padding: 0.25em; margin: -0.25em; }
  .hb-bike { will-change: transform; }
}

/* =========================================================
   Mobile: taller Text Her phone
   ========================================================= */
@media (max-width: 860px) {
  [data-site-mode="soft"] .page-text .page-shell { padding-top: 12px; }
  .text-sim { gap: 14px; }
  .text-sim__intro h1 { font-size: 2rem; margin: 2px 0 2px; }
  .text-sim__intro p:not(.eyebrow) { font-size: 0.9rem; }
  .phone { height: calc(100svh - 190px); min-height: 520px; }
}
/* Text Her: nothing floats over the phone (karaoke/captions would cover the typing bar) */
.page-text .karaoke,
.page-text .edit-caption { display: none !important; }