/* Minimal night-sky theme. Dark only. */
@font-face {
  font-family: "Inter Local";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
:root {
  --bg: #000; --card: #0a0a0a; --border: #222; --border-hi: #555;
  --ink: #f2f2f2; --muted: #9a9a9a; --dim: #6f6f6f;
  --ring: #5b7cfa; --ring-2: #c084fc;
  --font: "Inter Local", Inter, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; font-family: var(--font); color: var(--ink); background: transparent; line-height: 1.6; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
a { color: var(--ink); text-decoration-color: #555; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sr-only, .skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 50; background: #fff; color: #000; padding: 8px 12px; border-radius: 4px; }

/* Night sky canvas behind everything */
.sky { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; display: block; background: transparent; pointer-events: none; }

.preview-banner { position: relative; z-index: 2; text-align: center; font-size: .8rem; color: #d8d8d8; background: rgba(17,17,17,.7); border-bottom: 1px solid var(--border); padding: 8px 16px; }
.preview-banner code { background: #222; padding: 1px 5px; border-radius: 3px; }

/* Single centered column */
.page { position: relative; max-width: 640px; margin: 0 auto; padding: 120px 24px 48px; }

/* Hero */
.hero { margin-bottom: 64px; }
.avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: #111;
  box-shadow: 0 0 0 3px var(--ring), 0 0 0 5px rgba(91,124,250,.25), 0 0 26px rgba(120,110,255,.45);
  animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.hello { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 28px 0 10px; font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: #fff; }
.tagline { margin: 0 0 26px; color: var(--muted); font-size: .98rem; }

/* Outlined link buttons */
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px; border: 1px solid #3a3a3a; border-radius: 3px;
  background: #0b0b0b; color: #e8e8e8; text-decoration: none; font-size: .88rem; font-weight: 500;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.btn img { width: 16px; height: 16px; filter: brightness(0) invert(1); image-rendering: pixelated; }
.btn:hover, .btn:focus-visible { border-color: #9a9a9a; background: #111; transform: translateY(-2px); box-shadow: 0 0 14px rgba(255,255,255,.12); color: #fff; }
.btn.is-preview { cursor: default; }

/* Cards */
.card { background: rgba(10,10,10,.92); border: 1px solid var(--border); border-radius: 2px; padding: 28px 30px; margin: 0 0 22px; }
.card-title { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 1rem; font-weight: 600; color: #fff; letter-spacing: 0; }
.card-title::before { content: ""; width: 8px; height: 8px; background: #fff; flex: none; }
.muted { color: var(--muted); }
.small { font-size: .78rem; }
.bio { margin: 0 0 20px; font-size: 1.02rem; color: #e6e6e6; }

.facts, .interests { margin: 0; display: grid; gap: 0; }
.facts div, .interests div { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 16px; padding: 10px 0; border-top: 1px solid #1a1a1a; }
.facts dt, .interests dt { color: var(--dim); font-size: .85rem; }
.facts dd, .interests dd { margin: 0; color: #e6e6e6; font-size: .92rem; overflow-wrap: anywhere; }
.interests div:first-child { border-top: 0; padding-top: 0; }

/* Gallery (mixed sizes → square cover crops) */
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gallery li { min-width: 0; }
.thumb { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid var(--border); border-radius: 2px; background: #111; overflow: hidden; cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity .4s ease, transform .5s ease; }
.thumb img.loaded { opacity: 1; }
.thumb:hover img, .thumb:focus-visible img { transform: scale(1.05); }
.thumb.broken::after { content: "Photo not found"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); font-size: .75rem; }

/* Top 5 */
.top5 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.top-inner { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: #e6e6e6; font-size: .8rem; text-align: center; transition: transform .2s ease; }
.top-inner img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--border); border-radius: 2px; background: #111; transition: border-color .2s, box-shadow .2s; }
.top-inner:hover { transform: translateY(-3px); }
.top-inner:hover img { border-color: #777; box-shadow: 0 0 14px rgba(255,255,255,.1); }
.top-name { overflow-wrap: anywhere; }

/* Posts */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { padding: 10px 0; border-top: 1px solid #1a1a1a; }
.post-list li:first-child { border-top: 0; padding-top: 0; }
.post-link, .post-list a { font-weight: 500; }
.post-date, .date-inline { color: var(--dim); font-size: .8rem; }
.date-inline { margin-left: 8px; }
.post-excerpt { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.tag { display: inline-block; margin-left: 8px; font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #cfcfcf; border: 1px solid #444; border-radius: 2px; padding: 0 5px; vertical-align: middle; }
.more { margin: 16px 0 0; font-size: .88rem; }
.crumb { margin: 0 0 8px; font-size: .88rem; color: var(--muted); }
.crumb a { color: var(--muted); }
.post-title { margin: 0 0 4px; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; }
.post-body { margin-top: 18px; line-height: 1.75; color: #e6e6e6; overflow-wrap: anywhere; }
.post-body h2, .post-body h3 { color: #fff; font-weight: 600; }
.post-body img { height: auto; border: 1px solid var(--border); margin: 12px 0; }
.post-body blockquote { margin: 12px 0; padding: 4px 14px; border-left: 2px solid #555; color: var(--muted); }
.post-body code { background: #161616; padding: 1px 5px; border-radius: 2px; }

/* Newsletter */
.nl-heading { margin: 0 0 2px; font-weight: 600; }
.nl-form { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.nl-form input { flex: 1 1 220px; min-width: 0; height: 40px; padding: 0 12px; font: inherit; font-size: .9rem; color: var(--ink); background: #050505; border: 1px solid #333; border-radius: 3px; }
.nl-form input:focus { border-color: #888; outline: none; }
.nl-form button { height: 40px; padding: 0 18px; font: inherit; font-size: .9rem; font-weight: 600; color: #000; background: #f2f2f2; border: 1px solid #f2f2f2; border-radius: 3px; cursor: pointer; }
.nl-form button:hover { background: #fff; }
.nl-form.is-disabled input, .nl-form.is-disabled button { background: #111; color: #777; border-color: #2a2a2a; cursor: not-allowed; }

audio { width: 100%; margin-top: 8px; }
.footer { margin-top: 40px; font-size: .75rem; color: var(--dim); }
.footer a { color: var(--dim); }

/* Lightbox */
.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; background: transparent; }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(0,0,0,.94); }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.lightbox img { max-width: 92vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; border: 1px solid var(--border); }
.lightbox figcaption { margin-top: 10px; color: var(--muted); font-size: .85rem; }
.lb-close, .lb-nav { position: fixed; width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.8rem; line-height: 1; color: #fff; background: #0b0b0b; border: 1px solid #3a3a3a; border-radius: 3px; cursor: pointer; }
.lb-close:hover, .lb-nav:hover { border-color: #999; }
.lb-close { top: 14px; right: 14px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-nav[hidden] { display: none; }

/* Scroll reveal */
.reveal-on .reveal { opacity: 0; translate: 0 18px; transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s; }
.reveal-on .reveal.in { opacity: 1; translate: none; }


@media (max-width: 560px) {
  .page { padding: 72px 18px 36px; }
  .hero { margin-bottom: 44px; }
  .hello { font-size: 1.75rem; margin-top: 22px; }
  .card { padding: 22px 18px; }
  .facts div, .interests div { grid-template-columns: 100px minmax(0,1fr); gap: 12px; }
  .top5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .btn { height: 36px; padding: 0 12px; font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-on .reveal { opacity: 1; transform: none; translate: none; }
  .thumb img { opacity: 1; }
}

/* Verified badge after the name */
.verified { width: 0.85em; height: 0.85em; flex: none; display: inline-block; }

/* Rich text: mostly muted, **bold** = bright white, with inline logo chips */
.rich { font-size: 1.4rem; line-height: 1.55; letter-spacing: -0.012em; color: #7d7d7d; font-weight: 400; }
.rich p { margin: 0 0 0.8em; }
.rich strong { color: #fff; font-weight: 500; }
.rich em { color: #c9c9c9; }
.rich a:not(.chip-link) { color: #fff; text-decoration-color: #555; }
.rich h2, .rich h3, .rich h4 { color: #fff; font-weight: 600; letter-spacing: -0.01em; margin: 1.2em 0 .4em; font-size: 1.15em; }
.rich ul, .rich ol { padding-left: 1.1em; }
.chip { display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; margin: 0 .12em; vertical-align: -0.16em; background: #f4f4f4; border-radius: .26em; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.chip img { width: 62%; height: 62%; }
.chip-link { text-decoration: none; display: inline-block; transition: transform .15s ease; }
.chip-link:hover { transform: translateY(-2px); }
.chip-link:hover .chip { box-shadow: 0 0 0 1px #fff, 0 0 10px rgba(255,255,255,.35); }

/* About card: intro + halftone dots on the right */
#about { position: relative; overflow: hidden; }
#about > *:not(.halftone) { position: relative; z-index: 1; }
.intro { margin: 0 0 22px; }
.halftone { position: absolute; z-index: 0; top: 0; right: 0; width: 60%; height: 100%; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.16) 1.1px, transparent 1.4px); background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 85% 35%, #000 0%, rgba(0,0,0,.5) 45%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 85% 35%, #000 0%, rgba(0,0,0,.5) 45%, transparent 75%); }

/* Interest pills */
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid #333; border-radius: 999px; color: #bdbdbd; font-size: .9rem; background: rgba(255,255,255,.02); transition: border-color .2s, color .2s; }
.pill:hover { border-color: #666; color: #fff; }
.pill-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Blog typography */
.post-list .post-excerpt.rich { font-size: 1.1rem; margin-top: 6px; }
.post-link { color: #fff; font-size: 1.05rem; }
.post-body.rich { font-size: 1.4rem; line-height: 1.6; }
.post-body.rich p { margin: 0 0 .9em; }

@media (max-width: 560px) {
  .rich, .post-body.rich { font-size: 1.2rem; }
  .post-list .post-excerpt.rich { font-size: 1.02rem; }
  .halftone { width: 75%; }
}
.post-body .chip img, .rich .chip img { width: 62%; height: 62%; margin: 0; border: 0; }

/* ===== Members blog ===== */
.lock { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #ffd27a; border: 1px solid #6b5520; background: rgba(255,200,80,.06); border-radius: 2px; padding: 0 6px; vertical-align: middle; line-height: 1.7; }
.lock::before { content: ""; width: 7px; height: 8px; background: currentColor; -webkit-mask: linear-gradient(#000 0 0) bottom/100% 60% no-repeat, radial-gradient(circle at 50% 100%, transparent 1.6px, #000 1.7px 3.4px, transparent 3.5px) top/100% 60% no-repeat; mask: linear-gradient(#000 0 0) bottom/100% 60% no-repeat, radial-gradient(circle at 50% 100%, transparent 1.6px, #000 1.7px 3.4px, transparent 3.5px) top/100% 60% no-repeat; }
.tag-example { color: #9fd3ff; border-color: #2a5675; }
.tag-live { color: #8ff0a8; border-color: #23633a; }
.tag-draft { color: #ffd27a; border-color: #6b5520; }
.post-date .lock, .post-date .tag { margin-left: 10px; }

/* Locked post: excerpt, first paragraph fading into a blur */
.locked-excerpt { color: #d6d6d6; margin: 0 0 .9em; }
.teaser { position: relative; user-select: none; pointer-events: none; }
.teaser-first { -webkit-mask-image: linear-gradient(#000 35%, transparent 100%); mask-image: linear-gradient(#000 35%, transparent 100%); }
.teaser-first p { margin-bottom: 0; }
.teaser-rest { filter: blur(6px); opacity: .35; margin-top: -.4em; }
.teaser-rest p { margin: 0; }

/* Unlock box */
.subscribe-box { position: relative; background: linear-gradient(180deg, rgba(20,20,26,.96), rgba(10,10,10,.96)); border: 1px solid #333; border-radius: 4px; padding: 28px 30px; margin: 0 0 22px; box-shadow: 0 0 40px rgba(91,124,250,.08); }
.sub-title { margin: 0 0 6px; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.sub-lead { margin: 0 0 18px; color: var(--muted); }
.sub-lead strong { color: #fff; font-weight: 600; }
.sub-foot { margin: 14px 0 0; }
.step { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 10px; }
.step-num { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #000; font-size: .78rem; font-weight: 700; }
.step-head { font-weight: 600; color: #fff; }
.pay-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 12px; }
.pay-btn { flex: 1 1 200px; justify-content: center; }
.pay-cashapp { background: #00d64f; border-color: #00d64f; color: #000; }
.pay-cashapp:hover { background: #2ee874; }
.pay-paypal { background: #ffc439; border-color: #ffc439; color: #111; }
.pay-paypal:hover { background: #ffd36b; }
.pay-note { margin: 4px 0 8px; color: #fff; }
.copy-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.copy-email { background: #151515; border: 1px solid #2c2c2c; border-radius: 3px; padding: 7px 10px; color: #e8e8e8; font-size: .88rem; overflow-wrap: anywhere; }
.paid-form { display: grid; gap: 10px; margin-top: 6px; }
.notice { margin: 4px 0; padding: 12px 14px; border: 1px solid #2c4a33; background: rgba(60,200,110,.07); color: #c9f5d6; border-radius: 3px; }
.notice-warn { border-color: #5c4a20; background: rgba(255,200,80,.06); color: #ffe3a6; }

/* Shared form bits */
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; }
.inline-form input, .inline-form select, .field { flex: 1 1 220px; min-width: 0; height: 42px; padding: 0 12px; font: inherit; font-size: .95rem; color: var(--ink); background: #050505; border: 1px solid #333; border-radius: 3px; }
.inline-form select { flex: 0 1 160px; }
.field { width: 100%; display: block; }
.inline-form input:focus, .field:focus, .inline-form select:focus { border-color: #888; outline: none; }
.code-input { letter-spacing: .3em; font-variant-numeric: tabular-nums; max-width: 180px; }
.btn-solid { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; font: inherit; font-size: .92rem; font-weight: 600; color: #000; background: #f2f2f2; border: 1px solid #f2f2f2; border-radius: 3px; cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; }
.btn-solid:hover { background: #fff; color: #000; transform: translateY(-1px); box-shadow: 0 0 14px rgba(255,255,255,.18); }
.btn-solid:disabled { background: #1a1a1a; color: #777; border-color: #2a2a2a; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-wide { width: 100%; }
button.btn { font: inherit; font-size: .88rem; cursor: pointer; }
.btn.danger { color: #ff9b9b; border-color: #5a2a2a; }
.btn.danger:hover { border-color: #ff7b7b; color: #fff; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: #fff; text-decoration: underline; text-decoration-color: #666; text-underline-offset: 3px; cursor: pointer; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--muted); margin: 6px 0; }
.check input { margin-top: 3px; width: 16px; height: 16px; accent-color: #fff; }
.form-msg { min-height: 1.2em; margin: 8px 0 0; font-size: .88rem; color: #e8e8e8; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.segmented { display: inline-flex; border: 1px solid #333; border-radius: 3px; overflow: hidden; }
.seg { font: inherit; font-size: .88rem; padding: 9px 14px; background: #070707; color: #bbb; border: 0; border-right: 1px solid #333; cursor: pointer; }
.seg:last-child { border-right: 0; }
.seg.on { background: #f2f2f2; color: #000; font-weight: 600; }
.field-label { display: block; margin: 16px 0 6px; font-size: .85rem; color: #cfcfcf; font-weight: 500; }
.count-badge { margin-left: 8px; font-size: .7rem; font-weight: 700; background: #ff5a5a; color: #fff; border-radius: 999px; padding: 1px 8px; }
.sub-head { margin: 22px 0 6px; font-size: .95rem; font-weight: 600; }

/* Write page */
.page-wide { max-width: 1120px; }
.narrow-card { max-width: 480px; }
.write-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.write-head .hello { margin: 8px 0; }
.write-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.write-grid .card { margin-bottom: 0; }
.preview-card { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; }
.toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.toolbar button, .tool-photo { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; font: inherit; font-size: .8rem; color: #e8e8e8; background: #0b0b0b; border: 1px solid #333; border-radius: 3px; cursor: pointer; }
.toolbar button:hover, .tool-photo:hover { border-color: #888; }
.toolbar img { width: 13px; height: 13px; filter: brightness(0) invert(1); }
.body-field { height: auto; min-height: 320px; padding: 12px; line-height: 1.6; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; }
.save-row { margin-top: 14px; }
.admin-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-left { min-width: 0; }
.write-grid + .card { margin-top: 22px; }

@media (max-width: 860px) {
  .write-grid { grid-template-columns: 1fr; }
  .preview-card { position: static; max-height: none; }
}
@media (max-width: 560px) {
  .subscribe-box { padding: 22px 18px; }
  .inline-form button { flex: 1 1 100%; }
}

/* ===== Composer (Write page) ===== */
.page-composer { max-width: 760px; }
.composer { position: relative; background: #18181a; border: 1px solid #2c2c30; border-radius: 22px; padding: 26px 28px 18px; margin: 0 0 22px; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.cmp-top { display: flex; gap: 16px; align-items: flex-start; }
.cmp-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid #333; }
.cmp-main { flex: 1; min-width: 0; }
.cmp-namerow { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.cmp-name { font-size: 1.2rem; font-weight: 500; color: #f2f2f2; }
.cmp-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cmp-chips .lock, .cmp-chips .tag { margin-left: 0; }
.chip-btn { cursor: pointer; font: inherit; font-size: .62rem; background: rgba(255,200,80,.06); }
.cmp-drafts { margin-left: auto; background: none; border: 0; color: #f2f2f2; font: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer; padding: 4px 2px; position: relative; }
.cmp-drafts:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.count-dot { position: absolute; top: -4px; right: -14px; min-width: 18px; height: 18px; line-height: 18px; font-size: .68rem; text-align: center; border-radius: 9px; background: #3a3a40; color: #fff; padding: 0 5px; }
.cmp-title { width: 100%; background: none; border: 0; outline: none; color: #fff; font: inherit; font-size: 1.3rem; font-weight: 600; padding: 6px 0 0; }
.cmp-title::placeholder { color: #55555c; font-weight: 500; }
.cmp-body { width: 100%; min-height: 110px; resize: none; overflow: hidden; background: none; border: 0; outline: none; color: #ececec; font: inherit; font-size: 1.15rem; line-height: 1.55; padding: 6px 0; }
.cmp-body::placeholder { color: #8a8a90; }
.cmp-attach { display: grid; gap: 12px; margin: 4px 0 6px; }
.cmp-attach:empty { display: none; }
.cmp-gallery, .post-gallery { display: grid; gap: 6px; grid-template-columns: repeat(2, 1fr); border-radius: 12px; overflow: hidden; }
.cmp-gallery.n1, .post-gallery.n1 { grid-template-columns: 1fr; }
.cmp-gallery.n3 > :first-child, .post-gallery.n3 > :first-child { grid-row: span 2; }
.cmp-thumb, .pg-item { position: relative; display: block; aspect-ratio: 4 / 3; background: #0d0d0d; overflow: hidden; }
.n1 > .cmp-thumb, .n1 > .pg-item { aspect-ratio: auto; max-height: 520px; }
.cmp-thumb img, .pg-item img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border: 0; border-radius: 0; transition: transform .35s; }
.n1 img { height: auto; max-height: 520px; object-fit: contain; }
.pg-item:hover img { transform: scale(1.03); }
.cmp-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(0,0,0,.72); color: #fff; cursor: pointer; padding: 0; z-index: 2; }
.cmp-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.cmp-x:hover { background: #000; }
.cmp-video { position: relative; }
.post-video { border-radius: 12px; overflow: hidden; background: #000; }
.post-video video { width: 100%; max-height: 520px; display: block; }
.post-video.embed { aspect-ratio: 16 / 9; }
.post-video.embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.post-video.link-only { background: none; padding: 6px 0; }
.post-attach { display: grid; gap: 16px; margin-top: 16px; }
.post-attach:empty { display: none; }
.cmp-poll { position: relative; border: 1px solid #333; border-radius: 14px; padding: 16px; display: grid; gap: 8px; background: #121214; }
.cmp-poll .field { height: 40px; background: #0a0a0b; }
.opt-row { display: flex; gap: 8px; align-items: center; }
.opt-row .cmp-x { position: static; flex: none; background: #222; }
.opt-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.small-select { width: auto; height: 34px !important; font-size: .85rem; display: inline-block; flex: none; }
.resolve-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: 1px solid #2a2a2a; padding-top: 10px; margin-top: 4px; }
.cmp-bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.cmp-tools { display: flex; gap: 6px; }
.cmp-tool { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: none; border: 0; color: #e8e8e8; cursor: pointer; transition: background .15s; }
.cmp-tool:hover, .cmp-tool:focus-visible { background: #26262a; }
.cmp-tool svg, .pop-menu svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cmp-status { flex: 1; min-width: 120px; font-size: .82rem; color: #8a8a90; text-align: right; }
.cmp-status a { color: #fff; }
.cmp-actions { display: flex; gap: 12px; }
.cmp-btn { height: 52px; padding: 0 24px; border-radius: 12px; border: 0; background: #2a2a2e; color: #f2f2f2; font: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer; transition: background .15s, transform .15s; }
.cmp-btn:hover { background: #333338; }
.cmp-post { background: #f2f2f2; color: #000; }
.cmp-post:hover { background: #fff; transform: translateY(-1px); }
.cmp-post:disabled { background: #2a2a2e; color: #6d6d72; cursor: not-allowed; transform: none; }
.pop { position: absolute; bottom: 86px; z-index: 30; width: 320px; max-width: calc(100% - 16px); background: #1e1e21; border: 1px solid #36363b; border-radius: 14px; padding: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.pop-title { margin: 0 0 10px; font-weight: 600; }
.pop-or { text-align: center; color: #777; font-size: .8rem; margin: 10px 0 0; }
.pop .inline-form input { height: 40px; }
.pop .btn-row { margin-top: 10px; }
.pop-menu { padding: 6px; width: 290px; }
.pop-menu button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; background: none; border: 0; border-radius: 10px; color: #f2f2f2; font: inherit; font-size: 1rem; text-align: left; cursor: pointer; }
.pop-menu button:hover, .pop-menu button:focus-visible { background: #2a2a2e; }
.pop-menu button em { margin-left: auto; font-style: normal; font-size: .72rem; color: #9fd3ff; }
.pop-menu .danger { color: #ff9b9b; }
.pop-menu [hidden] { display: none; }
.pop-emoji { width: 340px; padding: 8px; }
.emoji-tabs { display: flex; gap: 2px; border-bottom: 1px solid #333; padding-bottom: 6px; margin-bottom: 6px; overflow-x: auto; }
.emoji-tab { background: none; border: 0; font-size: 1.1rem; padding: 4px 6px; border-radius: 8px; cursor: pointer; opacity: .55; }
.emoji-tab.on, .emoji-tab:hover { opacity: 1; background: #2a2a2e; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 210px; overflow-y: auto; }
.emoji { background: none; border: 0; font-size: 1.35rem; padding: 4px 0; border-radius: 8px; cursor: pointer; line-height: 1.2; }
.emoji:hover, .emoji:focus-visible { background: #2a2a2e; }
.drawer { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); display: flex; justify-content: flex-end; }
.drawer[hidden] { display: none; }
.drawer-card { width: min(460px, 100%); height: 100%; overflow-y: auto; background: #111113; border-left: 1px solid #2c2c30; padding: 22px; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.drawer-head h2 { margin: 0; font-size: 1.2rem; }
.drawer .segmented { margin-bottom: 10px; }
.write-head { margin-bottom: 10px; }
.write-head .muted { margin: 0; }

/* ===== Polls & predictions on posts ===== */
.poll-box { border: 1px solid #333; border-radius: 14px; padding: 18px; background: rgba(18,18,22,.9); }
.poll-head { display: flex; align-items: center; gap: 8px; }
.poll-kind { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: #9a9aa0; font-weight: 600; }
.tag-fun { color: #c9b6ff; border-color: #4a3d7a; margin-left: 0; }
.poll-q { margin: 8px 0 12px; font-size: 1.1rem; font-weight: 600; color: #fff; }
.poll-options { display: grid; gap: 8px; }
.poll-option { text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid #3a3a40; background: #0c0c0e; color: #f2f2f2; font: inherit; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.poll-option:hover:not(:disabled) { border-color: #9a9aa0; transform: translateY(-1px); }
.poll-option.picked { border-color: #fff; background: #1d1d22; }
.poll-option:disabled { cursor: default; opacity: .7; }
.poll-result { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: #0c0c0e; border: 1px solid #26262b; overflow: hidden; }
.poll-bar { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(91,124,250,.38), rgba(91,124,250,.18)); border-right: 1px solid rgba(140,165,255,.5); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.poll-result.mine .poll-bar { background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.12)); border-right-color: rgba(255,255,255,.6); }
.poll-result.correct { border-color: #2f7a48; }
.poll-result.correct .poll-bar { background: linear-gradient(90deg, rgba(60,200,110,.4), rgba(60,200,110,.16)); }
.poll-label, .poll-pct { position: relative; }
.poll-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #f2f2f2; }
.poll-pct { font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.poll-you, .poll-right { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 3px; background: rgba(255,255,255,.12); color: #fff; }
.poll-right { background: rgba(60,200,110,.22); color: #b7f5c9; }
.poll-foot { margin: 10px 0 0; font-size: .8rem; color: #8a8a90; }
@media (prefers-reduced-motion: reduce) { .poll-bar { transition: none; } }
@media (max-width: 600px) {
  .composer { padding: 18px 16px 14px; border-radius: 18px; }
  .cmp-avatar { width: 38px; height: 38px; }
  .cmp-top { gap: 10px; }
  .cmp-tools { gap: 0; }
  .cmp-tool { width: 40px; height: 40px; }
  .cmp-status { order: 3; flex-basis: 100%; text-align: left; }
  .cmp-actions { margin-left: auto; }
  .cmp-btn { height: 46px; padding: 0 18px; }
  .pop { bottom: 120px; }
}
.btn-solid.pay-cashapp { background: #00d64f; border-color: #00d64f; color: #000; }
.btn-solid.pay-cashapp:hover { background: #2ee874; }
.btn-solid.pay-paypal { background: #ffc439; border-color: #ffc439; color: #111; }
.btn-solid.pay-paypal:hover { background: #ffd36b; }
.paid-form .segmented { justify-self: start; }
.poll-box .form-msg:empty { display: none; }
.cmp-status { order: -1; flex-basis: 100%; min-height: 1.1em; margin-bottom: -6px; }

/* ===== Byline (post page + blog list) ===== */
.byline { position: relative; display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; border-radius: 999px; max-width: 100%; }
.byline-hit { position: absolute; inset: -4px; border-radius: 999px; z-index: 1; }
.byline-hit:hover ~ .byline-text .byline-name { text-decoration: underline; text-decoration-color: #666; text-underline-offset: 3px; }
.byline-hit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.byline .badge-btn { z-index: 2; }
.byline-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid #333; box-shadow: 0 0 0 3px rgba(255,255,255,.04); margin: 0; }
.byline-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.byline-name { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-weight: 600; font-size: .98rem; white-space: nowrap; }
.byline-verified { width: 16px; height: 16px; flex: none; margin: 0; border: 0; }
.byline-date { color: var(--muted); font-size: .84rem; margin-top: 2px; }
.byline-row { margin: 0 0 16px; }
.post-tags { margin-top: -4px; }
.post-tags .lock:first-child, .post-tags .tag:first-child { margin-left: 0; }
.byline-sm { gap: 8px; margin-bottom: 6px; }
.byline-sm .byline-avatar { width: 24px; height: 24px; box-shadow: none; }
.byline-sm .byline-name { font-size: .82rem; }
.byline-sm .byline-verified { width: 13px; height: 13px; }
.post-item .byline-sm { display: flex; width: max-content; }
@media (max-width: 560px) {
  .byline-avatar { width: 40px; height: 40px; }
  .byline-row { margin-bottom: 12px; }
}

/* ===== Admin shortcuts (only shown when Colton is signed in) ===== */
.admin-link { color: #6d6d72 !important; text-decoration-color: #444 !important; }
.admin-link:hover { color: #bbb !important; }
.fab-new { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 16px; border-radius: 999px; background: #f2f2f2; color: #000 !important; font-weight: 600; font-size: .98rem; text-decoration: none !important; box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 4px rgba(255,255,255,.06); transition: transform .15s, box-shadow .15s, background .15s; }
.fab-new:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.6), 0 0 18px rgba(255,255,255,.18); }
.fab-new span { font-size: 1.1rem; }
.is-admin .footer { padding-bottom: 70px; }
.edit-link { margin-left: 10px; font-size: .78rem; color: #fff; border: 1px solid #444; border-radius: 3px; padding: 1px 8px; text-decoration: none; }
.edit-link:hover { border-color: #aaa; }
.compose-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.compose-title { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#myposts-card .segmented { margin-bottom: 8px; flex-wrap: wrap; }
@media (max-width: 560px) { .fab-new { right: 14px; bottom: 14px; height: 48px; padding: 0 16px 0 13px; } }

/* ===== Comments ===== */
.comments-card { margin-top: 0; }
.comment-list { list-style: none; margin: 0 0 8px; padding: 0; }
.comment { padding: 14px 0; border-bottom: 1px solid #1f1f22; }
.comment:last-child { border-bottom: 0; }
.comment-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.comment-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin: 0; border: 1px solid #333; flex: none; }
.comment-initial { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #1d1d22; border: 1px solid #333; color: #cfcfd4; font-size: .78rem; font-weight: 600; }
.comment-name { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: #f2f2f2; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.by-author .comment-name { color: #fff; }
.comment-name .byline-verified { width: 14px; height: 14px; }
.comment-time { color: #77777d; font-size: .8rem; white-space: nowrap; }
.comment-del { margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: #8a8a90; cursor: pointer; }
.comment-del:hover { background: #2a1717; color: #ff9b9b; }
.comment-del svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.comment-body { margin: 6px 0 0 36px; color: #d6d6d8; font-size: .95rem; line-height: 1.55; overflow-wrap: anywhere; }
.comment-empty { padding: 6px 0 10px; }
.comment-form { border-top: 1px solid #222; padding-top: 6px; }
.comment-text { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.comment-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }
.cmp-actions { margin-left: auto; }
.write-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* ===== Mobile & touch pass ===== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
.page { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.post-body, .rich, .card, .post-link, .comment-body, .tagline, .cmp-body, .post-title, .poll-q, .poll-label { overflow-wrap: anywhere; word-break: normal; }
.post-body pre, .post-body code { white-space: pre-wrap; overflow-wrap: anywhere; }
.post-body img, .post-body video, .post-body iframe { max-width: 100%; }
.fab-new { right: max(22px, calc(env(safe-area-inset-right) + 14px)); bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px)); }
.is-admin .footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

@media (pointer: coarse), (max-width: 820px) {
  /* 16px+ text in fields so iOS Safari doesn't zoom in */
  input, select, textarea, .field, .cmp-title, .cmp-body { font-size: max(16px, 1em) !important; }
  .cmp-title { font-size: 1.2rem !important; }
  .cmp-body { font-size: 1.1rem !important; }
  /* 44px tap targets */
  .btn, .btn-solid, button.btn, .seg, .poll-option, .cmp-btn, .cmp-tool, .emoji-tab, .comment-del, .fab-new,
  .inline-form input, .inline-form select, .inline-form button, .field, .small-select { min-height: 44px; }
  .btn, a.btn { display: inline-flex; align-items: center; justify-content: center; }
  .cmp-tool { min-width: 44px; width: 44px; height: 44px; }
  .comment-del { width: 44px; height: 44px; margin-right: -8px; }
  .cmp-x { width: 36px; height: 36px; }
  .cmp-x::after { content: ""; position: absolute; inset: -6px; }
  .opt-row .cmp-x { width: 44px; height: 44px; }
  .emoji { min-height: 44px; font-size: 1.5rem; }
  .link-btn, .crumb a, .footer a, .edit-link, .cmp-drafts, .byline-sm { display: inline-flex; align-items: center; min-height: 44px; }
  .crumb { margin-bottom: 4px; }
  .edit-link { padding: 0 14px; }
  .check { min-height: 44px; align-items: center; }
  .check input { width: 22px; height: 22px; margin-top: 0; }
  .lock, .tag { line-height: 1.9; }
}

/* Link buttons: neat 2-3 column grid on phones */
@media (max-width: 600px) {
  .links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .links li, .links a { min-width: 0; }
  .links a { width: 100%; min-height: 48px; justify-content: center; }
}
@media (min-width: 420px) and (max-width: 600px) {
  .links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Composer on phones: tools scroll sideways, Cancel/Post always visible, bar stays above the keyboard */
@media (max-width: 600px) {
  .composer { padding: 16px 14px 0; border-radius: 18px; }
  .cmp-bar { position: sticky; bottom: var(--kb, 0px); z-index: 20; flex-wrap: nowrap; gap: 8px; margin: 12px -14px 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #18181a; border-top: 1px solid #2a2a2e; border-radius: 0 0 18px 18px; }
  .cmp-status { position: absolute; left: 14px; right: 14px; top: -22px; text-align: left; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
  .cmp-tools { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 2px; }
  .cmp-tools::-webkit-scrollbar { display: none; }
  .cmp-tool { flex: none; }
  .cmp-actions { flex: none; gap: 8px; margin-left: 0; }
  .cmp-btn { height: 44px; padding: 0 14px; font-size: 1rem; border-radius: 11px; }
  .cmp-attach { margin-bottom: 26px; }
  .cmp-body { min-height: 120px; }
  /* Emoji picker, More menu, video and schedule panels become bottom sheets */
  .pop { position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 72vh; overflow-y: auto;
    border-radius: 18px 18px 0 0; padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); z-index: 60;
    box-shadow: 0 -20px 60px rgba(0,0,0,.7), 0 0 0 100vmax rgba(0,0,0,.45); animation: sheet-up .22s ease-out; }
  .pop::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: #4a4a50; margin: 0 auto 10px; }
  .pop-menu { width: auto; }
  .pop-menu button { min-height: 52px; font-size: 1.05rem; }
  .pop-emoji { width: auto; }
  .emoji-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); max-height: 46vh; }
  .drawer-card { width: 100%; padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
  .admin-item { align-items: flex-start; }
  .admin-item .btn-row { width: 100%; }
  .admin-item .btn-row > * { flex: 1 1 0; }
  .admin-left { width: 100%; }
  .compose-title { font-size: 1.3rem; }
  .write-head { flex-wrap: wrap; }
  .segmented { display: flex; width: 100%; }
  .segmented .seg { flex: 1 1 0; padding: 9px 6px; }
  .inline-form > * { flex: 1 1 100%; }
  .comment-row .btn-solid { flex: 1; }
  .pay-btn { flex: 1 1 100%; }
  .lightbox img, dialog img { touch-action: pan-y pinch-zoom; }
}
@keyframes sheet-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pop { animation: none; } }

/* iPad / tablets */
@media (min-width: 601px) and (max-width: 1024px) {
  .page-composer { max-width: 720px; }
  .pop { max-width: calc(100vw - 48px); }
}

/* ===== Home layout: hero + sidebar (Latest posts, Photos) ===== */
.home-tabs { display: none; }
.home-grid { display: block; }
.side-card { position: relative; background: rgba(10,10,12,.88); border: 1px solid #262629; border-radius: 6px; padding: 18px; margin-bottom: 22px; }
.side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.side-title { margin: 0; font-size: 1rem; font-weight: 600; color: #fff; }
.side-title::before { content: ""; display: inline-block; width: 8px; height: 8px; background: #fff; margin-right: 10px; vertical-align: middle; }
.side-more { font-size: .82rem; color: #bdbdc2; white-space: nowrap; }
.mini-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mini-link { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid #2a2a2e; border-radius: 6px; background: #0d0d10; text-decoration: none !important; color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; }
.mini-link:hover, .mini-link:focus-visible { border-color: #6b6b72; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 16px rgba(91,124,250,.12); }
.mini-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mini-meta .lock, .mini-meta .tag { margin-left: 0; }
.mini-date { font-size: .74rem; color: #8a8a90; }
.mini-title { font-weight: 600; color: #fff; font-size: .95rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-excerpt { color: #9a9aa0; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Polaroid deck */
.deck { position: relative; height: 300px; margin: 10px auto 4px; display: grid; place-items: center; outline: none; touch-action: pan-y; perspective: 900px; }
.deck:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 8px; }
.polaroid { position: absolute; width: 190px; padding: 10px 10px 34px; background: #f4f1ea; border: 0; border-radius: 3px; box-shadow: 0 14px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); cursor: pointer;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .3s, opacity .3s; will-change: transform; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; background: #222; pointer-events: none; }
.polaroid-cap { position: absolute; left: 10px; right: 10px; bottom: 8px; color: #333; font-size: .78rem; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "Marker Felt", "Comic Sans MS", "Segoe Print", cursive; }
.polaroid.top { box-shadow: 0 18px 40px rgba(0,0,0,.7), 0 0 26px rgba(150,170,255,.18); }
.polaroid.dragging { transition: none; }
.polaroid.leaving { opacity: 0; transition: transform .3s ease-in, opacity .3s ease-in; }
.deck:hover .polaroid:hover { box-shadow: 0 22px 50px rgba(0,0,0,.75), 0 0 34px rgba(150,170,255,.35); z-index: 20 !important; }
.deck-more { position: absolute; right: 8px; bottom: 6px; z-index: 30; min-width: 48px; height: 48px; padding: 0 10px; border-radius: 999px; border: 1px solid #555; background: rgba(12,12,16,.9); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.deck-more:hover { border-color: #fff; }
.deck-hint { text-align: center; margin: 4px 0 0; }

/* Full Photos section: masonry with hover tilt + glow */
#photos .gallery { display: block; columns: 3 160px; column-gap: 10px; }
#photos .gallery li { break-inside: avoid; margin: 0 0 10px; }
#photos .thumb { aspect-ratio: auto; border-radius: 6px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; transform-style: preserve-3d; }
#photos .thumb img { height: auto; display: block; object-fit: initial; }
#photos .thumb::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), transparent 55%); }
#photos .thumb:hover { border-color: #777; box-shadow: 0 12px 30px rgba(0,0,0,.6), 0 0 22px rgba(120,150,255,.25); }
#photos .thumb:hover::before { opacity: 1; }
#photos .thumb:hover img { transform: none; }

/* Desktop: main column + sticky right sidebar */
@media (min-width: 1024px) {
  .page-home { max-width: 1080px; padding-top: 96px; }
  .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 40px; align-items: start; }
  .home-grid > :not(.home-side) { grid-column: 1; }
  .home-side { grid-column: 2; grid-row: 1 / span 30; position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: none; padding-top: 6px; }
  .home-side::-webkit-scrollbar { display: none; }
  .page-home .footer { grid-column: 1 / -1; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .deck { height: 250px; } .polaroid { width: 160px; }
}

/* Tablet & phone: everything important right under the intro */
@media (max-width: 1023px) {
  .page-home { max-width: 720px; }
  .home-tabs { display: flex; position: sticky; top: env(safe-area-inset-top); z-index: 35; justify-content: center; gap: 4px; margin: -40px auto 22px; width: max-content; max-width: 100%;
    padding: 4px; border: 1px solid #2c2c30; border-radius: 999px; background: rgba(10,10,12,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .home-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; color: #e8e8e8; text-decoration: none; font-size: .9rem; font-weight: 500; }
  .home-tabs a:hover, .home-tabs a:focus-visible, .home-tabs a.on { background: #f2f2f2; color: #000; }
  .home-side { margin-top: 6px; }
  .side-card { background: none; border: 0; padding: 0; }
  #latest .mini-posts { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 2px 20px 10px; scroll-padding: 0 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #latest .mini-posts::-webkit-scrollbar { display: none; }
  #latest .mini-post { flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; }
  #latest .mini-link { height: 100%; align-content: start; min-height: 112px; }
  .deck { height: 290px; }
  [id] { scroll-margin-top: 70px; }
}
@media (max-width: 380px) { .polaroid { width: 168px; } .deck { height: 262px; } }
@media (prefers-reduced-motion: reduce) {
  .polaroid, .mini-link, #photos .thumb { transition: none; }
}
@media (min-width: 380px) and (max-width: 600px) { .links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .deck { height: 228px; margin-top: 4px; } .polaroid { width: 150px; padding: 8px 8px 28px; } .polaroid-cap { bottom: 6px; } .side-card { padding: 16px; margin-bottom: 16px; } .mini-link { padding: 10px 12px; } }
@media (min-width: 1024px) and (min-height: 900px) { .deck { height: 290px; } .polaroid { width: 190px; padding: 10px 10px 34px; } }
/* Tap-target touch-ups found by the 360–768px audit */
@media (max-width: 1023px) {
  .home-tabs a { min-height: 44px; }
  .side-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px 0 10px; }
  .post-item .post-link { display: inline-flex; align-items: center; min-height: 44px; }
  .byline { min-height: 44px; }
  .link-btn { min-width: 44px; min-height: 44px; padding-left: 6px; padding-right: 6px; }
  .cmp-title { min-height: 44px; }
  label.check { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; }
  label.check input { width: 22px; height: 22px; flex: none; }
}

/* ===== Profile header panel (banner, avatar, status bubble, stats) ===== */
.profile-head { position: relative; margin: 0 0 26px; }
.banner { position: relative; height: 320px; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #1b2440, #0b0b10); isolation: isolate; }
.banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; z-index: -1; }
.banner::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 48%, rgba(0,0,0,.72) 82%, #000 100%); }
.glass-btn { position: relative; z-index: 2; display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; color: #fff; cursor: pointer;
  background: rgba(30,30,36,.42); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 4px 16px rgba(0,0,0,.25); transition: background .2s, transform .2s, border-color .2s; text-decoration: none !important; }
.glass-btn:hover, .glass-btn:focus-visible { background: rgba(50,50,60,.6); border-color: rgba(255,255,255,.5); transform: scale(1.06); }
.glass-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.banner-edit { position: absolute; top: 16px; left: 16px; }
.banner-actions { position: absolute; top: 16px; right: 16px; z-index: 3; display: flex; gap: 10px; }
.menu-wrap { position: relative; }
.jump-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; padding: 6px; border-radius: 14px; z-index: 40;
  background: rgba(16,16,20,.9); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 34px rgba(0,0,0,.55); }
.jump-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; color: #eee; text-decoration: none; font-size: .95rem; }
.jump-menu a:hover, .jump-menu a:focus-visible { background: rgba(255,255,255,.1); color: #fff; }
.share-toast { position: absolute; top: 74px; right: 16px; z-index: 3; margin: 0; padding: 8px 12px; border-radius: 999px; font-size: .85rem; color: #fff; max-width: 70%;
  background: rgba(16,16,20,.85); border: 1px solid rgba(255,255,255,.18); opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; pointer-events: none; overflow-wrap: anywhere; }
.share-toast.show { opacity: 1; transform: none; }

.ph-row { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: -72px; padding: 0 22px; }
.ph-id { min-width: 0; }
.ph-avatar { display: block; width: 128px; height: 128px; border-radius: 50%; object-fit: cover; background: #111;
  box-shadow: 0 0 0 4px #000, 0 0 0 6px rgba(91,124,250,.85), 0 0 30px rgba(120,110,255,.5); }
.ph-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 4px; font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: #fff; }
.ph-name .verified { width: 28px; height: 28px; }
.profile-head .tagline { margin: 0; }

.ph-stats { list-style: none; display: flex; gap: 34px; margin: 22px 0 0; padding: 0 22px; }
.ph-stats a, .ph-stats .st { display: flex; flex-direction: column; min-height: 44px; justify-content: center; color: inherit; text-decoration: none !important; }
.ph-stats b { font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ph-stats span span, .ph-stats a > span { color: #a4a4aa; font-size: .95rem; }
.ph-stats a:hover b, .ph-stats a:focus-visible b { color: #9db2ff; }
.page-home .hero { margin-bottom: 40px; }

@media (min-width: 1024px) {
  .page-home { padding-top: 28px; }
  .home-grid > .profile-head { grid-column: 1 / -1; grid-row: 1; }
  .home-side { grid-row: 2 / span 30; }
}
@media (max-width: 1023px) {
  .page-home { padding-top: max(14px, env(safe-area-inset-top)); }
  .home-tabs { margin: 0 auto 22px; }
}
@media (max-width: 640px) {
  .banner { height: 200px; border-radius: 14px; }
  .banner-edit { top: 12px; left: 12px; }
  .banner-actions { top: 12px; right: 12px; gap: 8px; }
  .share-toast { top: 66px; right: 12px; }
  .ph-row { margin-top: -52px; padding: 0 6px; gap: 10px; }
  .ph-avatar { width: 96px; height: 96px; }
  .ph-name { font-size: 1.5rem; margin-top: 12px; }
  .ph-name .verified { width: 24px; height: 24px; }
  .ph-stats { justify-content: space-between; gap: 8px; padding: 0 6px; margin-top: 18px; }
  .ph-stats li { flex: 1 1 0; min-width: 0; }
  .ph-stats b { font-size: 1.35rem; }
  .ph-stats span span, .ph-stats a > span { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .glass-btn, .share-toast { transition: none; } }
@media (max-width: 640px) {
  .ph-name { flex-wrap: nowrap; }
  .ph-id { padding-right: 0; }
}
@media (max-width: 640px) { .ph-id { max-width: 100%; } .ph-name > span { min-width: 0; } }

/* ===================== Motion round: nebula, cursor, badge popover, events ===================== */

/* Nebula: soft colour clouds drifting behind the star canvas (GPU transforms only) */
.nebula { position: fixed; inset: -20vmax; z-index: -2; pointer-events: none; overflow: hidden; }
.nebula i { position: absolute; display: block; border-radius: 50%; filter: blur(60px); opacity: .5; will-change: transform; }
.nebula i:nth-child(1) { width: 60vmax; height: 46vmax; left: 8%; top: 4%; background: radial-gradient(closest-side, rgba(70,60,170,.34), rgba(70,60,170,0)); animation: neb1 70s ease-in-out infinite alternate; }
.nebula i:nth-child(2) { width: 52vmax; height: 40vmax; right: 2%; top: 38%; background: radial-gradient(closest-side, rgba(150,60,170,.24), rgba(150,60,170,0)); animation: neb2 90s ease-in-out infinite alternate; }
.nebula i:nth-child(3) { width: 46vmax; height: 36vmax; left: 30%; bottom: 0; background: radial-gradient(closest-side, rgba(30,110,170,.22), rgba(30,110,170,0)); animation: neb3 80s ease-in-out infinite alternate; }
@keyframes neb1 { to { transform: translate3d(12vmax, 6vmax, 0) scale(1.15); } }
@keyframes neb2 { to { transform: translate3d(-14vmax, -8vmax, 0) scale(.9); } }
@keyframes neb3 { to { transform: translate3d(8vmax, -10vmax, 0) scale(1.1); } }
@media (max-width: 820px), (pointer: coarse) { .nebula i { filter: blur(40px); opacity: .42; } }

/* Custom cursor: crisp dot + trailing ring (fine pointers only, set up by cursor.js) */
html.has-cursor, html.has-cursor body, html.has-cursor a, html.has-cursor button, html.has-cursor label, html.has-cursor summary, html.has-cursor .thumb, html.has-cursor [role="button"] { cursor: none; }
html.has-cursor input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=file]), html.has-cursor textarea, html.has-cursor select, html.has-cursor [contenteditable="true"] { cursor: text; }
html.has-cursor :disabled { cursor: not-allowed !important; }
.cur-dot, .cur-ring { position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; border-radius: 50%; opacity: 0; will-change: transform; }
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.7), 0 0 14px rgba(140,160,255,.45); transition: opacity .2s, width .2s, height .2s, margin .2s; }
.cur-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1.5px solid rgba(255,255,255,.55); box-shadow: 0 0 16px rgba(140,160,255,.22);
  transition: opacity .25s, width .28s cubic-bezier(.2,.8,.2,1), height .28s cubic-bezier(.2,.8,.2,1), margin .28s cubic-bezier(.2,.8,.2,1), background-color .28s, border-color .28s; }
html.cur-visible .cur-dot { opacity: 1; }
html.cur-visible .cur-ring { opacity: 1; }
html.cur-hover .cur-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: #fff; border-color: #fff; mix-blend-mode: difference; box-shadow: none; }
html.cur-hover .cur-dot { width: 0; height: 0; margin: 0; }
html.cur-text .cur-ring, html.cur-text .cur-dot { opacity: 0 !important; }
html.cur-down .cur-ring { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
html.cur-hover.cur-down .cur-ring { width: 46px; height: 46px; margin: -23px 0 0 -23px; }

/* Verified badge: button + popover + sparkle burst */
.badge-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; line-height: 0; cursor: pointer; border-radius: 50%; flex: none; vertical-align: middle; transition: transform .2s; }
.badge-btn:hover { transform: scale(1.12); }
.badge-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.badge-btn::after { content: ""; position: absolute; inset: -12px; } /* bigger tap target */
.badge-btn img { margin: 0; }
.badge-pop { position: fixed; z-index: 9000; width: max-content; max-width: min(280px, calc(100vw - 24px)); padding: 14px 16px 14px 14px; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center;
  background: rgba(16,18,26,.97); color: #f2f2f2; border: 1px solid #3a3f55; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.7), 0 0 28px rgba(91,124,250,.22);
  transform-origin: var(--ox, 50%) var(--oy, 0); animation: pop-in .26s cubic-bezier(.2,1.3,.4,1) both; }
.badge-pop[hidden] { display: none !important; }
.badge-pop img { grid-row: 1 / span 2; width: 30px; height: 30px; margin: 0; }
.badge-pop strong { font-size: 1rem; color: #fff; line-height: 1.2; }
.badge-pop p { margin: 0; font-size: .9rem; color: #c9cbd6; line-height: 1.35; }
.badge-pop:focus { outline: none; }
.badge-pop:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.badge-pop.out { animation: pop-out .16s ease-in both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes pop-out { to { opacity: 0; transform: translateY(-4px) scale(.94); } }
.spark { position: fixed; z-index: 9001; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; pointer-events: none; border-radius: 50%;
  background: var(--c, #9db7ff); box-shadow: 0 0 8px var(--c, #9db7ff); animation: spark .7s cubic-bezier(.15,.7,.3,1) forwards; }
.spark.star { border-radius: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); box-shadow: none; }
@keyframes spark { 0% { opacity: 1; transform: translate(var(--x0), var(--y0)) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x1), var(--y1)) scale(1) rotate(90deg); } }

/* Hover lifts and tilts */
.card, .side-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s; }
@media (hover: hover) and (pointer: fine) {
  .side-card:hover, .event-card:hover { transform: translateY(-3px); border-color: #3a3a44; box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 24px rgba(91,124,250,.10); }
  .mini-post { transition: transform .25s, border-color .25s; }
  .mini-post:hover { transform: translateY(-2px); }
  .links a { transition: transform .2s, box-shadow .2s, border-color .2s; }
  .links a:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 16px rgba(140,160,255,.18); }
  .tilt { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); }
}

/* Staggered entrance: children of a revealed block fade up one after another */
.reveal-on .reveal .stagger > * { opacity: 0; translate: 0 10px; transition: opacity .55s ease, translate .55s cubic-bezier(.2,.7,.2,1), transform .2s, box-shadow .2s, border-color .2s; transition-delay: calc(var(--i, 0) * 60ms + 120ms), calc(var(--i, 0) * 60ms + 120ms), 0s, 0s, 0s; }
.reveal-on .reveal.in .stagger > * { opacity: 1; translate: none; }

/* Smooth page-to-page transitions (browsers that support cross-document view transitions) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s ease both; }
::view-transition-new(root) { animation: vt-in .32s ease both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 2px rgba(157,183,255,.8), 0 0 30px rgba(91,124,250,.35); } 100% { box-shadow: none; } }

/* Banner parallax (set by fun.js) */
.banner-img { will-change: transform; transform: translate3d(0, var(--par, 0px), 0) scale(1.08); }

/* Events */
.event-list { display: grid; gap: 14px; }
.event-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 16px; border: 1px solid #26262b; border-radius: 8px; background: rgba(14,14,18,.9); scroll-margin-top: 80px; transition: transform .3s, border-color .3s, box-shadow .3s; }
.event-card.is-cancelled .event-title, .event-card.is-cancelled .event-when { text-decoration: line-through; text-decoration-color: #777; }
.event-card.is-past { opacity: .78; }
.event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 68px; border: 1px solid #3a3f55; border-radius: 8px; background: linear-gradient(180deg, rgba(91,124,250,.18), rgba(192,132,252,.08)); }
.ev-mon { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #b8c4ff; }
.ev-day { font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1.1; }
.event-main { min-width: 0; }
.event-cover { width: 100%; max-height: 240px; object-fit: cover; border-radius: 6px; margin: 0 0 12px; border: 1px solid #26262b; }
.event-title { margin: 0 0 4px; font-size: 1.08rem; color: #fff; overflow-wrap: anywhere; }
.event-title a { color: #fff; text-decoration: none; }
.event-title a:hover { text-decoration: underline; }
.event-when { margin: 0; color: #d9dcf0; font-weight: 600; font-size: .92rem; }
.event-where { margin: 2px 0 0; color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.event-desc { margin: 10px 0 0; color: #cfcfd4; white-space: pre-line; overflow-wrap: anywhere; }
.event-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.event-actions .btn, .event-actions .btn-solid { min-height: 44px; }
.event-empty { margin: 0; padding: 18px 0; text-align: center; }
.tag-cancel { color: #ffb0b0; border-color: #6a2b2b; text-decoration: none; display: inline-block; }
.past-events > summary { cursor: pointer; list-style: none; min-height: 44px; margin: 0; }
.past-events > summary::-webkit-details-marker { display: none; }
.past-events[open] > summary { margin-bottom: 18px; }
.past-events > summary .muted { font-weight: 400; }
#next-event .event-card { padding: 12px; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; background: rgba(18,18,24,.9); }
#next-event .event-date { width: 52px; height: 56px; }
#next-event .ev-day { font-size: 1.3rem; }
@media (max-width: 1023px) { #next-event { margin-bottom: 18px; } }
@media (max-width: 560px) {
  .event-card { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 14px 12px; }
  .event-date { width: 52px; height: 58px; }
  .event-actions > * { flex: 1 1 auto; justify-content: center; }
}

/* Events admin form (Write page) */
.ev-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; margin-bottom: 8px; }
.ev-form .full { grid-column: 1 / -1; }
.ev-field { display: flex; flex-direction: column; gap: 6px; font-size: .86rem; color: #cfcfd4; min-width: 0; }
.ev-field small { color: var(--muted); font-weight: 400; }
.ev-field input, .ev-field textarea { width: 100%; min-height: 44px; font: inherit; font-size: 16px; color: #fff; background: #0f0f12; border: 1px solid #333; border-radius: 4px; padding: 10px 12px; }
.ev-field textarea { resize: vertical; }
.ev-field input:focus, .ev-field textarea:focus { border-color: #8aa0ff; outline: none; box-shadow: 0 0 0 3px rgba(91,124,250,.25); }
.ev-cover-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ev-cover-row .btn { min-height: 44px; cursor: pointer; }
.ev-cover-preview { width: 120px; height: 72px; object-fit: cover; border-radius: 4px; border: 1px solid #333; margin: 0; }
.ev-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .95rem; cursor: pointer; }
.ev-check input { width: 20px; height: 20px; margin: 0; accent-color: #8aa0ff; }
.ev-check.is-disabled { color: #8a8a8a; cursor: not-allowed; }
.ev-note { margin: -4px 0 0; font-size: .84rem; color: #b8bccb; background: rgba(91,124,250,.08); border: 1px solid #2c3250; border-radius: 4px; padding: 8px 10px; }
.ev-buttons { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.ev-buttons > * { min-height: 44px; }
.ev-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ev-tags .tag { margin-left: 0; }
.form-msg.bad { color: #ffb0b0; }
@media (max-width: 560px) {
  .ev-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-form .ev-field:nth-of-type(2) { grid-column: 1 / -1; }
  .ev-buttons > * { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nebula i { animation: none !important; }
  .banner-img { transform: none; }
  .reveal-on .reveal .stagger > * { opacity: 1; translate: none; }
  .tilt { transform: none !important; }
  .spark { display: none; }
  @view-transition { navigation: none; }
}

/* ===================== Subscribe button + dialog (home header) ===================== */
.ph-cta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-bottom: 6px; }
.subscribe-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer; overflow: hidden;
  font: inherit; font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; color: #fff;
  background: linear-gradient(120deg, #3d5af1, #6d46e6 55%, #8b3fd9);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 10px 30px rgba(61,90,241,.35), 0 0 26px rgba(139,63,217,.3);
  transition: transform .2s, box-shadow .2s; }
.subscribe-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 10%; }
.subscribe-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); animation: sub-shine 4.5s ease-in-out 1.2s infinite; pointer-events: none; }
.subscribe-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 14px 36px rgba(61,90,241,.45), 0 0 34px rgba(139,63,217,.42); }
.subscribe-btn:hover svg { animation: bell .6s ease; }
.subscribe-btn:active { transform: translateY(0) scale(.98); }
.subscribe-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes sub-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes bell { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(6deg); } }
.cta-sub { margin: 0; font-size: .82rem; color: #b9bccb; text-align: right; }
@media (max-width: 640px) {
  .ph-row { flex-wrap: wrap; }
  .ph-cta { width: 100%; align-items: stretch; padding: 4px 0 0; }
  .subscribe-btn { width: 100%; min-height: 50px; }
  .cta-sub { text-align: center; }
}

/* ===== Subscribe modal (X creator-subscription layout, site palette) ===== */
.btn-wide { width: 100%; }
html.dialog-open { overflow: hidden; }
@keyframes fade-in { from { opacity: 0; } }
.xsub { padding: 0; border: 1px solid #2c3046; border-radius: 22px; background: #050508; color: var(--ink); width: min(600px, calc(100vw - 24px)); max-width: none;
  height: min(820px, calc(100dvh - 40px)); max-height: none; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.85), 0 0 60px rgba(91,124,250,.18); }
.xsub[open] { display: flex; flex-direction: column; animation: xs-in .34s cubic-bezier(.2,1.1,.4,1) both; }
.xsub::backdrop { background: rgba(0,0,0,.74); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.xsub[open]::backdrop { animation: fade-in .3s ease both; }
@keyframes xs-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.xs-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.xs-hero { position: relative; padding: 0 16px 92px; color: #fff; text-align: center;
  background: linear-gradient(180deg, rgba(5,5,8,0) 52%, #050508 100%), radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.16), transparent 55%), linear-gradient(130deg, #3a56ee 0%, #5a49e8 45%, #7f3fdc 100%); }
.xs-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(1.5px 1.5px at 15% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 55%, #fff, transparent), radial-gradient(1px 1px at 35% 65%, #fff, transparent); }
.xs-bar { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; padding: 10px 0 4px; }
.xs-bar h2 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.xs-icbtn { grid-row: 1; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background .15s, transform .15s; }
.xs-icbtn:hover { background: rgba(255,255,255,.16); }
.xs-icbtn:active { transform: scale(.92); }
.xs-icbtn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
#xs-close, #xs-back { grid-column: 1; }
#xs-copy { grid-column: 3; }
.xs-icbtn[hidden] { display: none; }
.xs-ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.xs-toast { position: absolute; top: 58px; right: 14px; z-index: 4; margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.6); font-size: .85rem; opacity: 0; transform: translateY(-4px); transition: .2s; pointer-events: none; }
.xs-toast.on { opacity: 1; transform: none; }
.xs-id { position: relative; z-index: 1; padding-top: 10px; }
.xs-ring { display: inline-block; padding: 4px; border-radius: 50%; background: conic-gradient(from 200deg, #9db7ff, #ffffff, #c084fc, #5b7cfa, #9db7ff); box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.xs-ring img { display: block; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 4px solid #101018; background: #111; }
.xs-name { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 14px 0 4px; font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.xs-name .verified, .xs-name .badge-btn img { width: 24px; height: 24px; }
.xs-counts { margin: 0; font-size: 1rem; color: rgba(255,255,255,.92); font-variant-numeric: tabular-nums; min-height: 1.5em; }
.xs-body { position: relative; z-index: 2; margin-top: -70px; padding: 0 18px 20px; }
.xs-view.xs-in { animation: xs-view .32s cubic-bezier(.2,.9,.3,1) both; }
@keyframes xs-view { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.xs-card { background: #000; border: 1px solid #262838; border-radius: 18px; padding: 20px 22px; box-shadow: 0 20px 50px rgba(0,0,0,.55); }
.xs-card h3 { margin: 0 0 10px; font-size: 1.3rem; font-weight: 800; color: #fff; }
.xs-perks { list-style: none; margin: 0; padding: 0; }
.xs-perks li { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; }
.xs-perks li + li { border-top: 1px solid #16171f; }
.xs-perks .xs-ic { width: 26px; height: 26px; margin-top: 1px; color: #c9d4ff; }
.xs-perks strong { display: block; color: #fff; font-size: 1.05rem; font-weight: 700; }
.xs-perks span { display: block; color: #a9adbd; font-size: .92rem; }
.xs-notice, .xs-alt { margin: 14px 4px 0; text-align: center; }
.xs-body .step { margin-top: 16px; }
.xs-body .step:first-child { margin-top: 0; }
.xs-body .pay-options, .xs-body .xs-form { background: #000; border: 1px solid #262838; border-radius: 16px; padding: 14px; }
.xs-body .pay-options { margin: 8px 0 4px; }
.xs-body .field, .xs-body input { font-size: 16px; }
.xs-form { margin-top: 8px; }
.xs-form .step { margin: 18px 0 8px; }
.xs-wait { text-align: center; }
.xs-done { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 8px; color: #fff; background: linear-gradient(135deg, #3a56ee, #7f3fdc); box-shadow: 0 0 30px rgba(110,90,240,.5); animation: pop-in .4s cubic-bezier(.2,1.4,.4,1) both; }
.xs-done .xs-ic { width: 28px; height: 28px; stroke-width: 2.4; }
.xs-foot { flex: none; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: rgba(5,5,8,.94); border-top: 1px solid #1d1f2b; }
.xs-pill { display: block; width: 100%; min-height: 54px; border: 0; border-radius: 999px; padding: 0 22px; font: inherit; font-size: 1.12rem; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(120deg, #3d5af1, #6d46e6 55%, #8b3fd9); box-shadow: 0 10px 30px rgba(93,76,240,.35); transition: transform .15s, box-shadow .2s, filter .2s; }
.xs-pill:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(93,76,240,.5); filter: brightness(1.07); }
.xs-pill:active:not(:disabled) { transform: scale(.985); }
.xs-pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.xs-pill:disabled { cursor: default; opacity: .6; box-shadow: none; }
.xs-pill.xs-pill-quiet { background: #1b1d29; box-shadow: none; border: 1px solid #333849; }
.xs-fine { margin: 9px 4px 0; text-align: center; font-size: .8rem; color: #a3a7b6; }
.xs-fine[hidden] { display: none; }
.sub-cta-box .xs-pill { max-width: 420px; margin: 6px auto 0; }
@media (max-width: 560px) {
  .xsub { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .xsub[open] { animation-name: xs-sheet; }
  @keyframes xs-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .xs-bar { padding-top: max(8px, env(safe-area-inset-top)); }
  .xs-body { padding: 0 12px 18px; }
  .xs-card { padding: 18px 16px; }
  .xs-ring img { width: 96px; height: 96px; }
  .xs-name { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .xsub[open], .xsub[open]::backdrop, .xs-view.xs-in, .xs-done { animation: none; }
  .xs-pill, .xs-icbtn, .xs-toast { transition: none; }
}

/* ===== Spotify "Now playing" note (Instagram Notes style) ===== */
.ph-av-wrap { position: relative; width: max-content; }
.np-note { position: absolute; left: calc(100% - 26px); bottom: calc(100% - 30px); z-index: 3; display: flex; align-items: center; gap: 9px; width: max-content; max-width: min(300px, 62vw);
  padding: 7px 14px 7px 7px; border-radius: 18px; background: rgba(18,19,28,.94); border: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform-origin: 0 100%; transition: transform .18s, border-color .2s; }
.np-note[hidden] { display: none; }
.np-note::before, .np-note::after { content: ""; position: absolute; border-radius: 50%; background: rgba(18,19,28,.94); border: 1px solid rgba(255,255,255,.14); }
.np-note::before { width: 12px; height: 12px; left: 6px; bottom: -9px; }
.np-note::after { width: 6px; height: 6px; left: -1px; bottom: -17px; }
.np-note:hover, .np-note:focus-visible { transform: translateY(-2px); border-color: rgba(30,215,96,.55); }
.np-note:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.np-note.np-pop { animation: np-pop .45s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes np-pop { from { opacity: 0; transform: scale(.6) translateY(8px); } to { opacity: 1; transform: none; } }
.np-art { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; background: #222; }
.np-art[hidden] { display: none; }
.np-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.np-top { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: #1ed760; letter-spacing: .02em; }
.np-note:not(.np-live) .np-top { color: #b7bac8; }
.np-song, .np-artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-song { font-size: .92rem; font-weight: 700; color: #fff; }
.np-artist { font-size: .8rem; color: #b9bccb; }
.np-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.np-eq i { width: 2.5px; height: 100%; background: currentColor; border-radius: 1px; transform-origin: bottom; animation: np-eq 0.9s ease-in-out infinite; }
.np-eq i:nth-child(2) { animation-delay: -.3s; } .np-eq i:nth-child(3) { animation-delay: -.6s; } .np-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes np-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.np-note:not(.np-live) .np-eq { display: none; }
@media (max-width: 640px) {
  .np-note { left: calc(100% - 18px); bottom: calc(100% - 24px); max-width: min(230px, calc(100vw - 130px)); padding: 6px 11px 6px 6px; }
  .np-art { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .np-eq i, .np-note.np-pop { animation: none; } .np-eq i { transform: scaleY(.7); } .np-note { transition: none; } }

/* PayPal by email */
.pay-options { margin: 6px 0 10px; }
.pay-sub { margin: -4px 0 12px; }
.paypal-email { border: 1px solid #3a3420; background: rgba(255,196,57,.06); border-radius: 8px; padding: 12px; margin: 4px 0 10px; }
.pp-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; color: #fff; font-weight: 600; }
.pp-logo { font-size: .72rem; font-weight: 800; color: #111; background: #ffc439; border-radius: 4px; padding: 2px 6px; }
.paypal-email .copy-row { margin-bottom: 6px; }
.copy-btn { min-height: 44px; }
.paypal-email p.muted { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .subscribe-btn::after { display: none; }
}
/* The dialog sits in the browser's top layer, above the custom cursor, so use the normal cursor while it's open */
html.has-cursor.dialog-open, html.has-cursor.dialog-open * { cursor: auto !important; }
html.has-cursor.dialog-open :is(a, button, label, summary, select) { cursor: pointer !important; }
html.has-cursor.dialog-open :is(input:not([type=checkbox]):not([type=radio]), textarea) { cursor: text !important; }
html.dialog-open .cur-dot, html.dialog-open .cur-ring { display: none; }
/* Write page: Spotify card */
.sp-steps { margin: 8px 0 14px; padding-left: 22px; }
.sp-steps li { margin: 8px 0; }
.sp-steps .copy-row { margin-top: 6px; }
#sp-body .copy-row { flex-wrap: wrap; }