/* Final Rose: a sweet, playful dating-app look. White cards with thin plum outlines on a warm off-white page,
   pastel pill buttons (rose, coral, butter, sky, mint), outlined bar charts for the roses and round portrait chips. */
:root {
  color-scheme: light;
  --bg: #f8f4f0;
  --card: #ffffff;
  --ink: #2b2230;
  --ink-2: #5d5160;
  --ink-3: #776b7a;
  --line: #2b2230;
  --hair: #e9e1dc;
  --rose: #f2788f;
  --rose-deep: #c93d5c;
  --rose-50: #fde9ed;
  --coral: #f8977f;
  --coral-50: #feeee8;
  --butter: #f7cb55;
  --butter-50: #fdf4d8;
  --sky: #74c3ef;
  --sky-50: #e6f4fc;
  --mint: #8ad2a8;
  --mint-50: #e7f6ed;
  --lilac: #cbbcf1;
  --lilac-50: #f1ecfd;
  --r-card: 22px;
  --r-sm: 14px;
  --b: 1.5px solid var(--line);
  --display: 'Fraunces', Georgia, serif;
  --body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --wrap: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  overflow-x: hidden;
  overflow-x: clip;
  position: relative;
}
/* Soft pastel circles behind everything, as on the pin's canvas. */
body::before, body::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
body::before { width: 620px; height: 620px; top: -220px; right: -180px; background: radial-gradient(circle, #fde3e8 0 60%, transparent 61%); opacity: .8; }
body::after { width: 420px; height: 420px; top: 1100px; left: -220px; background: radial-gradient(circle, #e3f4ea 0 60%, transparent 61%); opacity: .9; }

img { max-width: 100%; display: block; }
a { color: var(--rose-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
code, pre { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .86em; }
code { background: var(--rose-50); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 10px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; font-variation-settings: 'SOFT' 100, 'WONK' 0; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(40px, 6.4vw, 70px); }
h2 { font-size: clamp(30px, 4vw, 42px); }
h3 { font-size: 22px; }
p { margin: 0 0 12px; }
.faint { color: var(--ink-3); }
.muted { color: var(--ink-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ pills, buttons, tags */

.pill, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 8px 18px;
  border: var(--b); border-radius: 999px;
  background: var(--card); color: var(--ink);
  font: 600 15px/1.1 var(--body); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform .15s ease, background-color .15s ease;
}
.btn:hover, a.pill:hover { transform: translateY(-1px); color: var(--ink); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary, .pill.rose { background: var(--rose); }
.btn.coral, .pill.coral { background: var(--coral); }
.btn.butter, .pill.butter { background: var(--butter); }
.btn.sky, .pill.sky { background: var(--sky); }
.btn.mint, .pill.mint { background: var(--mint); }
.btn.big { min-height: 52px; padding: 12px 26px; font-size: 17px; }
.btn.small { min-height: 40px; padding: 6px 14px; font-size: 14px; }
.btn svg, .pill svg { width: 18px; height: 18px; flex: none; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border: var(--b); border-radius: 999px;
  font: 600 13px/1.4 var(--body); background: var(--card); white-space: nowrap;
}
.tag.rose { background: var(--rose-50); }
.tag.mint { background: var(--mint-50); }
.tag.butter { background: var(--butter-50); }
.tag.sky { background: var(--sky-50); }
.tag.coral { background: var(--coral-50); }
.tag.lilac { background: var(--lilac-50); }
.tag.solid-rose { background: var(--rose); }
.tag.solid-butter { background: var(--butter); }
.tag.solid-mint { background: var(--mint); }
.tag.grey { background: #f1edea; color: var(--ink-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); border: 1.5px solid var(--ink); flex: none; }

.stamp {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border: 1.5px dashed var(--ink); border-radius: 999px;
  background: var(--butter-50); font: 700 13px/1.3 var(--body); letter-spacing: .02em;
}

/* ------------------------------------------------------------------ cards and chips */

.card { background: var(--card); border: var(--b); border-radius: var(--r-card); padding: 24px; }
.card.tint-rose { background: var(--rose-50); }
.card.tint-mint { background: var(--mint-50); }
.card.tint-butter { background: var(--butter-50); }
.card.tint-sky { background: var(--sky-50); }
.card h3 { margin-bottom: 10px; }

.chip {
  --size: 48px;
  width: var(--size); height: var(--size); flex: none;
  border-radius: 50%; border: var(--b); overflow: hidden;
  background: var(--chip, var(--rose-50));
  display: grid; place-items: center;
  font: 700 calc(var(--size) * .36) / 1 var(--body); color: var(--ink);
}
.chip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.18); transform-origin: 50% 32%; }
.chip.sm { --size: 34px; }
.chip.lg { --size: 72px; }
.chip.xl { --size: 112px; }
.chip.out img { filter: grayscale(.85); opacity: .75; }

/* ------------------------------------------------------------------ nav */

.nav { position: sticky; top: 0; z-index: 20; background: rgba(248, 244, 240, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1.5px solid transparent; }
.nav.scrolled { border-bottom-color: var(--hair); }
.nav .wrap { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 600 23px/1 var(--display); font-variation-settings: 'SOFT' 100; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand img { width: 36px; height: 36px; }
.navlinks { display: flex; gap: 4px; margin-left: auto; }
.navlinks a { padding: 9px 12px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; }
.navlinks a:hover, .navlinks a[aria-current='page'] { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); }
#connect { background: var(--coral); }

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

.hero { padding: 40px 0 26px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 44px; align-items: center; }
.eyebrow { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.hero h1 em { font-style: italic; font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--rose-deep); }
.lede { font-size: 19px; color: var(--ink-2); max-width: 560px; margin: 20px 0 26px; }
.lede b { color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.profile { position: relative; padding: 18px 8px 58px 34px; }
.profile-card { position: relative; z-index: 1; padding: 0; overflow: hidden; transform: rotate(-1.5deg); max-width: 380px; margin-left: auto; }
.profile-card .photo { aspect-ratio: 1 / 1; background: #f3c8cf; border-bottom: var(--b); overflow: hidden; }
.profile-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-card .info { padding: 16px 20px 20px; }
.profile-card .who { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.profile-card .who h3 { font-size: 26px; margin: 0; }
.profile-card .job { color: var(--ink-2); margin: 2px 0 10px; font-size: 15px; }
.likes { display: flex; flex-wrap: wrap; gap: 6px; }
.likes .tag { font-weight: 500; }
.float {
  position: absolute; z-index: 2; background: var(--card); border: var(--b); border-radius: 18px;
  padding: 12px 14px; font-size: 14px; line-height: 1.35;
}
.float.suitors { left: 0; bottom: 0; display: flex; align-items: center; gap: 10px; }
.stack { display: flex; }
.stack .chip { margin-left: -12px; }
.stack .chip:first-child { margin-left: 0; }
.float.next { right: -6px; top: 0; transform: rotate(2deg); min-width: 190px; }
.float.next b { display: block; font-size: 17px; }
.meter { height: 16px; border: var(--b); border-radius: 999px; background: var(--card); overflow: hidden; margin-top: 8px; }
.meter i { display: block; height: 100%; background: var(--rose); border-right: var(--b); width: 0; }
.meter.coral i { background: var(--coral); }

.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 34px; }
.stat { background: var(--card); border: var(--b); border-radius: 18px; padding: 14px 16px; }
.stat b { display: block; font: 700 25px/1.15 var(--body); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat span { color: var(--ink-2); font-size: 14px; }
.stat:nth-child(1) { background: var(--rose-50); }
.stat:nth-child(3) { background: var(--butter-50); }
.stat:nth-child(5) { background: var(--mint-50); }

/* ------------------------------------------------------------------ sections */

.block { padding: 56px 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 20px; margin-bottom: 22px; }
.section-head .kicker { margin-bottom: 8px; }
.kicker { font: 600 14px/1.2 var(--body); color: var(--rose-deep); letter-spacing: .03em; text-transform: uppercase; margin: 0 0 6px; }
.sub { color: var(--ink-2); max-width: 720px; }
.notice { display: flex; gap: 10px; align-items: flex-start; background: var(--butter-50); border: 1.5px dashed var(--ink); border-radius: var(--r-sm); padding: 12px 16px; margin: 0 0 18px; font-size: 15px; }

/* ------------------------------------------------------------------ the ceremony */

.ceremony { padding: 24px; }
.cer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 6px; }
.cer-top h3 { font-size: 28px; margin: 0; }
.cer-sub { color: var(--ink-2); font-size: 15px; margin: 0 0 16px; }
.clockline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.clock-pill { background: var(--butter); font-variant-numeric: tabular-nums; }
.week-meter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; color: var(--ink-2); margin: 4px 0 20px; }
.week-meter .meter { margin: 0; height: 18px; }

.board {
  --n: 10;
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px;
  border: var(--b); border-radius: 18px; padding: 18px 14px 14px; background: linear-gradient(var(--hair) 1px, transparent 1px) 0 0 / 100% 36px, var(--card);
}
.col {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 4px 2px; border-radius: 14px; font: inherit; color: inherit; cursor: pointer; min-width: 0;
}
.col:hover .bar, .col[aria-pressed='true'] .bar { filter: saturate(1.25); }
.col[aria-pressed='true'] { background: var(--rose-50); box-shadow: inset 0 0 0 1.5px var(--ink); }
.col[disabled] { cursor: default; }
.col .well { position: relative; width: 100%; max-width: 46px; height: 184px; padding-top: 34px; box-sizing: border-box; display: flex; align-items: flex-end; }
.col .bar { position: relative; width: 100%; min-height: 14px; border: var(--b); border-radius: 12px; background: var(--sky); transition: height .5s ease; }
.col.lead .bar { background: var(--rose); }
.col.bubble .bar { background: var(--butter); }
.col.zero .bar { background: #f1edea; }
.col.pending .bar { background: repeating-linear-gradient(-45deg, var(--rose-50) 0 6px, var(--card) 6px 12px); border-style: dashed; }
.col .badge { position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%); width: 26px; height: 26px; border-radius: 50%; border: var(--b); display: grid; place-items: center; background: var(--rose); }
.col.bubble .badge { background: var(--butter); }
.col .badge svg { width: 15px; height: 15px; }
.col .rank { font: 700 12px/1 var(--body); border: var(--b); border-radius: 999px; padding: 3px 7px; background: var(--card); font-variant-numeric: tabular-nums; }
.col .nm { font: 600 13px/1.2 var(--body); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col .amt { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 14px; border-radius: 4px; border: var(--b); display: inline-block; }

.verdict { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--rose-50); border: var(--b); font-size: 15px; }
.verdict b { font-weight: 700; }

.giver { margin-top: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; border: var(--b); border-radius: 18px; padding: 18px; background: var(--card); }
.giver .who h4 { margin: 0; font: 600 22px/1.15 var(--display); }
.giver .who p { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.amount-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 8px; }
.amount-row input { flex: 1 1 140px; min-width: 0; }
.giver .fine { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; }
.giver-empty { margin-top: 16px; text-align: center; color: var(--ink-2); font-size: 15px; padding: 14px; border: 1.5px dashed var(--hair); border-radius: 18px; }

input, textarea, select {
  font: 500 16px/1.3 var(--body); color: var(--ink);
  min-height: 44px; padding: 10px 14px; border: var(--b); border-radius: 14px; background: var(--card); width: 100%;
}
input:focus-visible { outline: 3px solid var(--sky); outline-offset: 1px; }
.field { margin: 0 0 14px; }
.field label { display: block; font: 600 14px/1.3 var(--body); margin-bottom: 6px; color: var(--ink-2); }
.status { font-size: 14px; margin: 10px 0 0; min-height: 1.4em; color: var(--ink-2); overflow-wrap: anywhere; }
.status.good { color: #1f6b42; }
.status.err { color: #b0283f; }
.status a { color: inherit; }

/* ------------------------------------------------------------------ episodes */

.days { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 0 14px; scrollbar-width: thin; }
.day {
  flex: none; display: grid; justify-items: center; gap: 1px; min-width: 64px; padding: 8px 12px;
  border: var(--b); border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none; font-size: 13px; line-height: 1.2;
}
.day b { font-size: 18px; font-variant-numeric: tabular-nums; }
.day.on { background: var(--coral); min-width: 116px; }
.day:hover { color: var(--ink); background: var(--rose-50); }
.day.on:hover { background: var(--coral); }

.feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0; padding: 0; overflow: hidden; }
.feature .pic { border-right: var(--b); background: var(--rose-50); min-height: 260px; }
.feature .pic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.feature .txt { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.feature .txt h3 { font-size: 30px; margin: 0; }
.feature .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.feature .log { color: var(--ink-2); margin: 0; }
.feature .cast-line { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.feature .txt .actions { margin-top: auto; }

/* ------------------------------------------------------------------ cast */

.cast-grid { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 18px; align-items: start; }
.lead-card { padding: 0; overflow: hidden; }
.lead-card .photo { aspect-ratio: 1 / 1; border-bottom: var(--b); background: #f3c8cf; }
.lead-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.lead-card .info { padding: 18px 20px 22px; }
.lead-card h3 { font-size: 26px; margin: 6px 0 2px; }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.mini { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: var(--b); border-radius: 18px; background: var(--card); text-decoration: none; color: var(--ink); min-width: 0; }
.mini:hover { background: var(--rose-50); color: var(--ink); }
.mini .t { min-width: 0; }
.mini b { display: block; font-size: 15px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini small { display: block; color: var(--ink-2); font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .tag { margin-top: 5px; font-size: 12px; padding: 1px 8px; }
.mini.out { background: #f6f2ef; }

/* ------------------------------------------------------------------ how, rules, agents, token, faq */

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.step .ico { width: 54px; height: 54px; border-radius: 50%; border: var(--b); display: grid; place-items: center; margin-bottom: 14px; }
.step .ico svg { width: 26px; height: 26px; }
.step .n { float: right; font: 700 13px/1 var(--body); border: var(--b); border-radius: 999px; padding: 5px 9px; }
.step p { color: var(--ink-2); font-size: 15px; margin: 0; }

.rules-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 16px; align-items: start; }
.rules { list-style: none; margin: 0; padding: 0; counter-reset: r; display: grid; gap: 10px; }
.rules li { counter-increment: r; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; }
.rules li::before { content: counter(r); width: 30px; height: 30px; border: var(--b); border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--body); background: var(--rose-50); margin-top: 1px; }
.rules li:nth-child(5n+2)::before { background: var(--butter-50); }
.rules li:nth-child(5n+3)::before { background: var(--sky-50); }
.rules li:nth-child(5n+4)::before { background: var(--mint-50); }
.rules li:nth-child(5n+5)::before { background: var(--lilac-50); }
.rules b { font-weight: 700; }
.check ol { margin: 0; padding-left: 20px; font-size: 15px; color: var(--ink-2); }
.check li { margin-bottom: 8px; }

.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.facts li { padding-left: 26px; position: relative; font-size: 16px; }
.facts li::before { content: ''; position: absolute; left: 0; top: 7px; width: 13px; height: 13px; border-radius: 50%; border: var(--b); background: var(--rose); }
.facts li:nth-child(3n+2)::before { background: var(--butter); }
.facts li:nth-child(3n)::before { background: var(--mint); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
pre { background: #2b2230; color: #fbeff2; border-radius: 18px; padding: 18px 20px; overflow-x: auto; line-height: 1.55; margin: 0; border: var(--b); }
pre .c { color: #f6b3c1; }
.addr { font: 500 14px/1.4 ui-monospace, Menlo, monospace; overflow-wrap: anywhere; background: var(--rose-50); border: var(--b); border-radius: 12px; padding: 10px 12px; }

.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.qa h3 { font: 700 17px/1.35 var(--body); margin-bottom: 6px; }
.qa p { color: var(--ink-2); font-size: 15px; margin: 0; }

.erc8004-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border: var(--b); border-radius: 999px; background: var(--sky-50); color: var(--ink); font: 600 12px/1.5 var(--body); text-decoration: none; vertical-align: middle; }

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

footer { margin-top: 30px; padding: 36px 0 50px; border-top: 1.5px solid var(--hair); font-size: 14px; color: var(--ink-2); }
footer .foot-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; margin-bottom: 14px; }
footer .foot-brand img { width: 26px; height: 26px; }
footer p { max-width: 900px; }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50; max-width: min(520px, calc(100vw - 32px)); background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 18px; font-size: 15px; }

/* ------------------------------------------------------------------ episode page */

.ep-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; padding: 28px 0 40px; }
.back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--ink); font-weight: 600; text-decoration: none; }
.episode { padding: 0; overflow: hidden; }
.episode .head { padding: 26px 28px 18px; }
.episode .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.episode h1 { font-size: clamp(34px, 5vw, 52px); }
.episode .log { font-size: 19px; color: var(--ink-2); margin: 12px 0 0; }
.episode figure { margin: 0; border-top: var(--b); border-bottom: var(--b); background: var(--rose-50); }
.episode figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.episode .body { padding: 24px 28px 30px; }
.episode .body > p { font-size: 18px; line-height: 1.7; margin: 0 0 18px; }
.example-note { margin: 0 28px 4px; }
.sec-title { font: 600 24px/1.2 var(--display); margin: 28px 0 14px; }
.chat { display: grid; gap: 12px; margin: 8px 0 6px; }
.msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: end; }
.msg .bubble { background: var(--sky-50); border: var(--b); border-radius: 18px 18px 18px 4px; padding: 10px 14px; font-size: 16px; line-height: 1.5; }
.msg .bubble small { display: block; font-weight: 700; font-size: 13px; color: var(--ink); margin-bottom: 2px; }
.msg.lead .bubble { background: var(--rose-50); }
.msg.bye .bubble { background: var(--butter-50); }
.arrivals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.arrivals .msg .bubble { background: var(--mint-50); }

.tally { display: grid; gap: 8px; }
.trow { display: grid; grid-template-columns: 30px 34px minmax(0, 1fr) 118px; gap: 10px; align-items: center; font-size: 15px; }
.trow .ix { font: 700 12px/1 var(--body); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.trow .nm { display: flex; flex-direction: column; min-width: 0; }
.trow .nm b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .hbar { height: 12px; border: var(--b); border-radius: 999px; background: var(--card); overflow: hidden; margin-top: 4px; }
.trow .hbar i { display: block; height: 100%; background: var(--sky); border-right: var(--b); }
.trow.first .hbar i { background: var(--rose); }
.trow.home .hbar i { background: var(--butter); }
.trow .amt { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ink-2); text-align: right; white-space: nowrap; }
.proof { margin-top: 18px; font-size: 14px; }
.proof dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0 0 12px; }
.proof dt { font-weight: 700; }
.proof dd { margin: 0; overflow-wrap: anywhere; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.checks { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.checks li { display: flex; gap: 8px; align-items: flex-start; }
.checks li::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: var(--b); background: #f1edea; }
.checks li.ok::before { background: var(--mint); }
.checks li.bad::before { background: var(--rose); }

.ep-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.archive { position: sticky; top: 84px; padding: 18px; max-height: calc(100vh - 100px); overflow: auto; }
.archive h2 { font-size: 24px; margin-bottom: 12px; }
.alist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.alist a { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: 14px; color: var(--ink); text-decoration: none; }
.alist a:hover { background: var(--rose-50); color: var(--ink); }
.alist a[aria-current='page'] { background: var(--rose-50); box-shadow: inset 0 0 0 1.5px var(--ink); }
.alist .d { display: grid; justify-items: center; border: var(--b); border-radius: 12px; padding: 4px 0; background: var(--card); font-size: 11px; line-height: 1.2; }
.alist .d b { font-size: 16px; }
.alist .k { font-size: 12px; color: var(--ink-2); display: block; }
.alist .tt { font-weight: 600; font-size: 14px; line-height: 1.3; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alist .cer .d { background: var(--rose-50); }

/* ------------------------------------------------------------------ cast page */

.season-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.season-tabs button[aria-pressed='true'] { background: var(--rose); }
.suitor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.scard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.scard .photo { aspect-ratio: 4 / 3; border-bottom: var(--b); overflow: hidden; position: relative; }
.scard .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.scard .photo .initials { width: 100%; height: 100%; display: grid; place-items: center; font: 600 54px/1 var(--display); }
.scard .photo .no { position: absolute; left: 12px; top: 12px; }
.scard .photo .st { position: absolute; right: 12px; top: 12px; }
.scard.out .photo img { filter: grayscale(.7); }
.scard .info { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.scard h3 { font-size: 23px; margin: 0; }
.scard .job { color: var(--ink-2); font-size: 14px; margin: 0; }
.scard .bio { font-size: 15px; margin: 0; }
.scard .nums { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.timeline li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px; border: var(--b); border-radius: 16px; background: var(--card); font-size: 15px; }
.timeline .wk { font-weight: 700; }
.timeline .wk small { display: block; font-weight: 400; color: var(--ink-2); font-size: 12px; }

/* ------------------------------------------------------------------ deploy */

.deploy-main { padding: 40px 20px 60px; max-width: 760px; }
.deploy-main .actions { margin-top: 6px; }
.deploy-main pre { margin-top: 14px; font-size: 13px; }

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .profile { max-width: 460px; margin: 0 auto; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules-grid, .ep-layout { grid-template-columns: 1fr; }
  .archive { position: static; max-height: none; }
  .cast-grid { grid-template-columns: 1fr; }
  .lead-card { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
  .lead-card .photo { border-bottom: 0; border-right: var(--b); }
}
@media (max-width: 760px) {
  .navlinks { display: none; }
  .nav .wrap { justify-content: space-between; }
  .feature { grid-template-columns: 1fr; }
  .feature .pic { border-right: 0; border-bottom: var(--b); min-height: 0; }
  .grid2, .faq { grid-template-columns: 1fr; }
  .board { --n: 5 !important; row-gap: 22px; padding: 16px 10px 12px; }
  .col .well { height: 144px; }
  .arrivals { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .hero { padding-top: 22px; }
  .lede { font-size: 17px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:last-child { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr; }
  .block { padding: 40px 0; }
  .card, .ceremony { padding: 18px; }
  .profile { padding: 10px 0 34px 0; }
  .float.next { right: 0; min-width: 0; max-width: 62%; }
  .giver { grid-template-columns: 1fr; }
  .lead-card { grid-template-columns: 1fr; }
  .lead-card .photo { border-right: 0; border-bottom: var(--b); }
  .episode .head, .episode .body { padding-left: 18px; padding-right: 18px; }
  .example-note { margin: 0 18px 4px; }
  .trow { grid-template-columns: 22px 30px minmax(0, 1fr) auto; gap: 8px; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; }
  .brand { font-size: 20px; }
  .brand img { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* cast page layout */
.cast-h1 { font-size: clamp(36px, 5vw, 54px); }
.cast-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.timeline-card { padding: 22px; }
.timeline .who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.timeline .who span { display: inline-flex; align-items: center; gap: 6px; }
.timeline a { color: var(--ink); }
.timeline .empty { grid-template-columns: 1fr; color: var(--ink-2); border-style: dashed; }
@media (max-width: 900px) { .cast-top { grid-template-columns: 1fr; } }
.cast-top .lead-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.cast-top .lead-card .photo { border-bottom: 0; border-right: var(--b); aspect-ratio: auto; min-height: 220px; }
@media (max-width: 560px) {
  .cast-top .lead-card { grid-template-columns: 1fr; }
  .cast-top .lead-card .photo { border-right: 0; border-bottom: var(--b); aspect-ratio: 1 / 1; }
  .timeline li { grid-template-columns: 1fr; gap: 6px; }
}

/* lists that are also cards keep the card's padding */
.card.rules, .card.facts { padding: 22px 24px; }
.deploy-main h1 { margin-bottom: 14px; }
@media (max-width: 560px) {
  .episode .head { padding: 20px 18px 14px; }
  .episode .body { padding: 18px 18px 24px; }
  .episode .body > p { font-size: 17px; }
  .example-note { margin: 0 18px 4px; }
  .trow { grid-template-columns: 24px 30px minmax(0, 1fr) 86px; gap: 8px; font-size: 14px; }
  .trow .amt { font-size: 13px; }
  .proof dl { grid-template-columns: 1fr; gap: 2px; }
  .proof dd { margin-bottom: 8px; }
}
@media (max-width: 560px) { .trow .amt .u { display: none; } }