/* ---------- tokens ----------
   One warm palette, one accent (a strong cool pink), one typeface (Bricolage Grotesque),
   a 4px spacing scale, and soft filled cards with no outlines. */
:root {
  --bg: #f2eee6; --card: #faf8f3; --fg: #1b1a17; --muted: #6e695f; --line: #e0d9cc; --soft: #ebe6db;
  --accent: #e0156f; --fizz: 224, 21, 111; --bubble: 27, 26, 23;
  --r-card: 24px; --r-inner: 16px; --r-pill: 999px; --frame: #ffffff; --tint: rgba(var(--fizz), .08);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #171613; --card: #201f1b; --fg: #f1ede5; --muted: #a39d91; --line: #312f2a; --soft: #272520;
  --accent: #ff5fa3; --fizz: 255, 95, 163; --bubble: 241, 237, 229; --frame: #2c2a25; --tint: rgba(var(--fizz), .14);
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--fg);
  font: 400 16px/1.5 "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color .25s, color .25s;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }
::selection { background: rgba(var(--fizz), .22); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.mono { font-variant-numeric: tabular-nums; }
.wordmark, h1.name { font-weight: 800; letter-spacing: -0.045em; }
.link { text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .15s; }
.link:hover { text-decoration-color: var(--accent); }
#fizz { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }

/* ---------- bubbles ---------- */
.bubble { flex: none; width: var(--d); height: var(--d); border-radius: 50%; border: 1.25px solid rgba(var(--bubble), .5); background: rgba(var(--bubble), .03); display: grid; place-items: center; position: relative; font-size: 12px; line-height: 1; }
.bubble::before { content: ""; position: absolute; z-index: 1; left: 17%; top: 15%; width: 10%; height: 10%; min-width: 4px; min-height: 4px; border-radius: 50%; background: rgba(var(--bubble), .42); }
.bubble.avatar { background: none; }
/* avatar hidden for now; delete this rule to bring it back */
.bubble.avatar { display: none; }
.bubble.avatar img { width: 100%; height: 100%; padding: 3px; border-radius: 50%; object-fit: cover; }
.bubble.avatar::before { background: rgba(255, 255, 255, .88); left: 20%; top: 17%; }
.pop { animation: bob 4.5s ease-in-out infinite; animation-delay: var(--t, 0s); transition: transform .25s, opacity .25s; }
.pop.popped { transform: scale(1.45); opacity: 0; transition: transform .12s ease-out, opacity .12s ease-out; }
.pop.regrow { animation: regrow .5s cubic-bezier(.3, 1.6, .5, 1), bob 4.5s ease-in-out .5s infinite; }
@keyframes bob { 0%, 100% { translate: 0 2px; } 50% { translate: 0 -3px; } }
@keyframes regrow { from { scale: 0; opacity: 0; } to { scale: 1; opacity: 1; } }

/* ---------- home layout ---------- */
.page { max-width: 1120px; margin: 0 auto; padding: 64px 24px; display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 72px; align-items: start; }
.about { position: sticky; top: 64px; }
.col > section + section { margin-top: 56px; }

.id { display: flex; align-items: center; gap: 12px; }
h1.name { font-size: 44px; line-height: 56px; }
.facts { margin-top: 16px; display: grid; gap: 6px; color: var(--muted); font-size: 15px; line-height: 20px; }
.facts > * { display: flex; align-items: center; gap: 10px; }
.facts svg, .social svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.facts svg { width: 18px; height: 18px; }
.facts button { background: none; border: 0; padding: 0; text-align: left; transition: color .15s; }
.facts button:hover { color: var(--fg); }
.claim { margin-top: 24px; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.bio { margin-top: 8px; color: var(--muted); }

.social { margin-top: 24px; display: flex; align-items: center; gap: 16px; color: var(--accent); }
.social .follow { font-size: 15px; line-height: 20px; }
.social a { display: grid; place-items: center; width: 20px; height: 20px; transition: color .15s, transform .15s; }
.social a:hover { transform: translateY(-2px); }
.social svg { width: 20px; height: 20px; }
.social svg.solid { fill: currentColor; stroke: none; }
.tip { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--muted); }
.tip .link { color: var(--fg); }

h2.label { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 16px; font-weight: 500; color: var(--muted); }
h2.label .dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 1px; animation: pulse 2.4s ease-in-out infinite; }
h2.label a:hover { color: var(--fg); }
@keyframes pulse { 50% { opacity: .35; } }

.now p { margin-top: 16px; max-width: 38em; font-size: 17px; line-height: 26px; }

/* ---------- things: one wide featured card, then a grid of smaller ones ---------- */
.things { list-style: none; padding: 0; margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.things > li { display: flex; }
.card { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 12px 24px; background: var(--card); border-radius: var(--r-card); transition: transform .2s; }
.card:hover { transform: translateY(-2px); }
.frame { width: 100%; padding: 6px; background: var(--frame); border-radius: calc(var(--r-inner) + 6px); }
.frame img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-inner); background: var(--soft); }
.card h3 { margin-top: 20px; font-size: 19px; line-height: 24px; font-weight: 700; letter-spacing: -0.015em; }
.card p { margin-top: 6px; padding: 0 8px; font-size: 15px; line-height: 22px; color: var(--muted); }
.stats { list-style: none; padding: 0; margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.stats li { display: block; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--tint); color: var(--accent); font-size: 12.5px; line-height: 24px; font-weight: 500; white-space: nowrap; }
.acts { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.things > li.wide { grid-column: 1 / -1; }
.card.feature { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; column-gap: 24px; padding: 56px 20px 28px 28px; text-align: left; }
.card.feature:hover { transform: none; }
.card.feature .badge { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px 0 10px; border-radius: var(--r-card) 0 var(--r-inner) 0; background: var(--accent); color: #fff; font-size: 13px; line-height: 1; font-weight: 500; }
.card.feature .badge::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #fff; background: radial-gradient(circle at 32% 30%, #fff 0 1.5px, transparent 2px); }
.card.feature h3 { margin-top: 0; font-size: 26px; line-height: 30px; letter-spacing: -0.025em; }
.card.feature p { margin-top: 8px; padding: 0; font-size: 16px; line-height: 24px; }
.card.feature .stats, .card.feature .acts { justify-content: flex-start; }
.card.feature .stats { margin-top: 16px; }
.card.feature .acts { margin-top: 0; padding-top: 20px; }
.card.feature .frame img { aspect-ratio: 16 / 9; }

/* sips (the short videos): small cards, three across, so the section stays short as more get added */
.clips { list-style: none; padding: 0; margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.clips.two { margin-top: 0; grid-template-columns: 1fr 1fr; }
.clips > li { display: flex; }
.clip { flex: 1; display: flex; flex-direction: column; padding: 8px 8px 16px; background: var(--card); border-radius: 20px; }
.clip .frame { position: relative; display: block; padding: 4px; border-radius: 16px; }
.clip .frame img { aspect-ratio: 16 / 9; border-radius: 12px; }
.clip h3 { margin-top: 12px; padding: 0 6px; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; }
.clip .stats { justify-content: flex-start; margin-top: 10px; padding: 0 6px; gap: 4px; }
.clip .stats li { height: 22px; padding: 0 8px; font-size: 12px; line-height: 22px; }
.more { margin-top: 16px; display: flex; justify-content: center; }
/* sits under the title on the poster, lined up with its left edge */
.play { position: absolute; left: 5%; top: 76%; translate: 0 -50%; display: grid; place-items: center; width: clamp(32px, 14%, 48px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(var(--fizz), .35); transition: transform .15s; }
.clip .frame:hover .play { transform: scale(1.08); }
.play svg { width: 40%; height: 40%; margin-left: 2px; fill: currentColor; }

/* the modal the videos play in */
.player { width: min(1080px, calc(100vw - 32px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: none; color: #fff; }
.player::backdrop { background: rgba(23, 22, 19, .82); backdrop-filter: blur(6px); }
.player[open], .player[open]::backdrop { animation: show .2s ease-out; }
.player .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.player .name { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.player .close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; transition: background-color .15s; }
.player .close:hover { background: var(--accent); }
.player .close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.player video { display: block; width: 100%; height: auto; max-height: calc(100vh - 120px); aspect-ratio: 16 / 9; border-radius: var(--r-inner); background: #000; }
html:has(.player[open]) { overflow: hidden; }
@keyframes show { from { opacity: 0; } }

.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-pill); font-size: 14px; line-height: 1; font-weight: 500; white-space: nowrap; transition: background-color .15s, color .15s, box-shadow .15s; }
.btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn.primary { background: var(--fg); color: var(--bg); }
.btn.primary:hover { background: var(--accent); color: #fff; }
.btn.ghost { color: var(--accent); box-shadow: inset 0 0 0 1.25px rgba(var(--fizz), .38); }
.btn.ghost:hover { background: var(--tint); box-shadow: inset 0 0 0 1.25px rgba(var(--fizz), .6); }

/* ---------- guides & notes list ---------- */
.notes { list-style: none; padding: 0; }
.notes li { border-bottom: 1px solid var(--line); }
.notes a { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 16px 0; }
.notes .title { font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: -0.01em; }
.notes .title i { font-style: normal; color: var(--muted); margin-left: 6px; display: inline-block; opacity: 0; transform: translateX(-3px); transition: opacity .15s, transform .15s, color .15s; }
.notes a:hover .title i { opacity: 1; transform: none; color: var(--accent); }
.notes .kind { font-size: 12px; color: var(--muted); white-space: nowrap; }

footer.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; line-height: 20px; color: var(--muted); }
.page > footer.foot { grid-column: 1 / -1; margin-top: 64px; }
footer.foot a:hover { color: var(--fg); }
.foot .links { display: flex; gap: 16px; flex-wrap: wrap; }
.hint-touch { display: none; }

/* ---------- inner pages ---------- */
.doc { max-width: 720px; margin: 0 auto; padding: 32px 24px 64px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 40px; font-size: 14px; color: var(--muted); }
.top .home { display: flex; align-items: center; gap: 10px; color: var(--fg); }
.top .wordmark { font-size: 22px; line-height: 1; }
.top nav { display: flex; align-items: center; gap: 20px; }
.top nav a:hover { color: var(--fg); }
.doc header.head { padding: 64px 0 40px; }
.doc .kicker { font-size: 13px; line-height: 16px; color: var(--muted); }
.doc h1 { margin-top: 12px; font-weight: 800; font-size: clamp(34px, 6vw, 48px); line-height: 1.04; letter-spacing: -0.04em; }
.doc .lede { margin-top: 16px; font-size: 19px; line-height: 28px; color: var(--muted); }
.actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.prose { font-size: 17px; line-height: 28px; }
.prose > * + * { margin-top: 16px; }
.prose a { text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .15s; }
.prose a:hover { text-decoration-color: var(--accent); }
.prose a.btn { text-decoration: none; }
.prose h2 { margin-top: 56px; font-size: 24px; line-height: 32px; letter-spacing: -0.025em; font-weight: 600; }
.prose h3 { margin-top: 32px; font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 4px; }
.prose li::marker { color: var(--muted); }
.prose figure { margin-top: 24px; }
.prose figure img { width: 100%; height: auto; border-radius: var(--r-inner); }
.prose details { border-bottom: 1px solid var(--line); margin-top: 0; }
.prose details:first-of-type { border-top: 1px solid var(--line); margin-top: 16px; }
.prose summary { padding: 16px 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after { content: "+"; color: var(--muted); }
.prose details[open] summary::after { content: "–"; }
.prose details > :not(summary) { padding-bottom: 16px; color: var(--muted); }
.next { margin-top: 56px; }
.next a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: var(--card); border-radius: var(--r-card); transition: transform .2s; }
.next a:hover { transform: translateY(-2px); }
.next small { display: block; font-size: 13px; line-height: 16px; color: var(--muted); }
.next b { display: block; margin-top: 2px; font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: -0.01em; }
.next .arrow { color: var(--muted); transition: color .15s, transform .15s; }
.next a:hover .arrow { color: var(--accent); transform: translateX(3px); }
.doc footer.foot { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--line); }
.doc .notes { border-top: 1px solid var(--line); }

/* 404 */
.flat { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 24px; }
.flat h1 { margin-top: 12px; font-weight: 800; font-size: clamp(44px, 9vw, 84px); line-height: 1; letter-spacing: -0.045em; }
.flat p { margin-top: 16px; color: var(--muted); font-size: 18px; line-height: 28px; }
.flat .kicker { margin-top: 0; font-size: 13px; line-height: 16px; }
.flat .actions { justify-content: center; }

/* theme switch: a moon in light mode, a sun in dark mode, parked in the bottom corner */
.theme { position: fixed; right: 20px; bottom: 20px; z-index: 20; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--card); color: var(--muted); transition: color .15s, transform .2s; }
.theme:hover { color: var(--accent); transform: rotate(-12deg); }
.theme svg { grid-area: 1 / 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme .sun, [data-theme="dark"] .theme .moon { display: none; }
[data-theme="dark"] .theme .sun { display: block; }

/* toast + easter egg */
.toast { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 30; height: 40px; display: flex; align-items: center; padding: 0 16px; border-radius: var(--r-pill); background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 500; white-space: nowrap; pointer-events: none; animation: toast 2.6s ease forwards; }
@keyframes toast { 0% { opacity: 0; translate: -50% 10px; } 10%, 85% { opacity: 1; translate: -50% 0; } 100% { opacity: 0; translate: -50% -6px; } }
body.sour h1.name, body.sour .top .wordmark { animation: pucker .5s ease-in-out 4; transform-origin: left center; }
@keyframes pucker { 50% { transform: scale(.8, 1.12) rotate(-2deg); } }
/* "sour": everything on the page reacts. Each piece jiggles with its own tilt and timing,
   pills hop, the avatar winces. The script tags the pieces and gives each its own numbers. */
body.sour [data-sour] { animation: jiggle .42s ease-in-out 5; animation-delay: calc(var(--i, 0) * 28ms); }
body.sour .stats li { animation: hop .42s ease-in-out 5; animation-delay: calc(var(--i, 0) * 28ms + var(--j, 0) * 50ms); }
body.sour .bubble.avatar { animation: wince .5s ease-in-out 4; }
@keyframes jiggle { 0%, 100% { transform: none; } 25% { transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--r, 1deg)); } 75% { transform: translate(calc(var(--tx, 0) * -1), calc(var(--ty, 0) * -1)) rotate(calc(var(--r, 1deg) * -1)); } }
@keyframes hop { 50% { transform: translateY(-4px); } }
@keyframes wince { 50% { transform: scale(1.12, .78) rotate(6deg); } }

/* ---------- pointer: a bubble over empty space and cards, normal elsewhere ---------- */
@media (hover: hover) and (pointer: fine) {
  html { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><circle cx='11' cy='11' r='9.5' fill='rgba(250,248,243,.4)' stroke='%23e0156f' stroke-width='1.6'/><circle cx='7.5' cy='7' r='1.5' fill='%23e0156f' fill-opacity='.6'/></svg>") 11 11, auto; }
  p, h1, h2, h3, li, small, blockquote, figcaption, .facts > span { cursor: auto; }
  a, button, summary { cursor: pointer; }
  input { cursor: text; }
  .btn, .btn *, .pop.avatar, .pop.avatar * { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='14.5' fill='rgba(250,248,243,.75)' stroke='%23e0156f' stroke-width='1.6'/><circle cx='11' cy='10.2' r='2.2' fill='%23e0156f' fill-opacity='.6'/></svg>") 16 16, pointer; }
  [data-theme="dark"] { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><circle cx='11' cy='11' r='9.5' fill='rgba(32,31,27,.4)' stroke='%23ff5fa3' stroke-width='1.6'/><circle cx='7.5' cy='7' r='1.5' fill='%23ff5fa3' fill-opacity='.7'/></svg>") 11 11, auto; }
  [data-theme="dark"] .btn, [data-theme="dark"] .btn *, [data-theme="dark"] .pop.avatar, [data-theme="dark"] .pop.avatar * { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='14.5' fill='rgba(32,31,27,.75)' stroke='%23ff5fa3' stroke-width='1.6'/><circle cx='11' cy='10.2' r='2.2' fill='%23ff5fa3' fill-opacity='.7'/></svg>") 16 16, pointer; }
}

@media (hover: none) {
  .hint-mouse { display: none; }
  .hint-touch { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .pop, .pop.regrow, h2.label .dot, body.sour h1.name, body.sour .top .wordmark, body.sour [data-sour], body.sour .stats li, body.sour .bubble.avatar, .player[open], .player[open]::backdrop { animation: none; }
  body, .card { transition: none; }
}
@media (max-width: 900px) {
  .page { grid-template-columns: minmax(0, 1fr); row-gap: 56px; padding: 40px 20px 48px; }
  .about { position: static; }
  .doc { padding: 24px 20px 48px; }
}
@media (max-width: 640px) {
  .things { grid-template-columns: minmax(0, 1fr); }
  .card.feature { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding: 52px 12px 12px; }
  .card.feature .text { padding: 0 12px; }
  .card.feature .frame { order: 2; }
  .clips, .clips.two { grid-template-columns: minmax(0, 1fr); }
}