/* =====================================================================
   standups & snacktime · site layer for brand v5 "the overlap" (nov 2026)
   loads after styles.css (the v1-v4 history) and brand-v5.css (shared tokens),
   and maps the old components onto the new system.
   ===================================================================== */

/* ---------- old tokens, pointed at the new palette ---------- */
:root, body, body[data-page], .dark, .cream, .gradband {
  --bg:var(--pg); --panel:var(--card); --panel-2:var(--pg); --line:var(--hair);
  --cream:var(--ink); --muted:var(--mut); --faint:var(--mut);
  --lime:var(--w); --mint:var(--ink); --aqua:var(--l); --sky:var(--l); --yellow:var(--acc); --red:var(--l); --sage:var(--w);
  --lemon:var(--acc); --lilac:var(--ml); --bubble:var(--ml);
  --p-lemon:var(--card); --p-mint:var(--card); --p-sky:var(--card); --p-lilac:var(--card); --p-bubble:var(--card);
  --grad:linear-gradient(90deg,var(--w),var(--l)); --grad-diag:var(--grad); --grad-full:var(--grad);
  --fun:var(--card); --hl:var(--mw);
  --dots:linear-gradient(transparent,transparent);
  --head:var(--v5); --body:var(--v5); --mono:var(--v5);
  --radius:26px;
  color:var(--ink);
}
html, body, body[data-page], body[data-page="about"], body[data-page="templates"], body[data-page="standup"], body[data-page="connect"], body[data-page="404"] { background:var(--pg) !important; }
body { font-family:var(--v5); font-weight:500; font-size:18px; line-height:1.55; color:var(--ink); transition:background .3s ease; }
body::before { display:none; }
::selection { background:var(--mw); color:var(--ink); }
:focus-visible { outline:2.5px solid var(--ink); outline-offset:4px; border-radius:10px; }

/* ---------- type ---------- */
h1, h2, h3, .display, .page-title, .wordmark { font-family:var(--v5); font-weight:900; letter-spacing:-.04em; line-height:1.06; text-transform:lowercase; color:var(--ink); text-wrap:balance; }
.page-title, .about-hero h1, .nf h1 { font-size:clamp(46px,8vw,84px); line-height:1.02; }
h2, .display { font-size:clamp(32px,4.4vw,46px); line-height:1.08; }
h3 { font-size:clamp(21px,2.2vw,25px); font-weight:800; letter-spacing:-.025em; line-height:1.2; }
.h-sub { font-size:clamp(24px,2.6vw,30px); }
p, li, label, input, textarea, .lede, .entry p, .tpl p, .prose p { font-family:var(--v5); }
.lede, .entry p, .tpl p, .prose p, .prose li { color:var(--ink); }
.lede { font-size:clamp(18px,1.7vw,20px); line-height:1.5; max-width:38em; font-weight:500; }
.kicker { font-family:var(--v5) !important; font-weight:700; font-size:14px; letter-spacing:.03em; text-transform:lowercase; color:var(--mut) !important; opacity:1; margin-bottom:10px; }
.script, .grad-text { font-family:inherit; font-weight:inherit; background:none; color:inherit; -webkit-text-fill-color:currentColor; }
.sw { background:none; padding:0; }
.rule { height:0; width:auto; background:none !important; margin:0 0 18px; }
.page-title + .rule, h1 + .rule { margin-top:18px; }
.mono { font-family:var(--v5); }
small, .small-note, .small-print { color:var(--mut); }
.small-print { font-size:15px; margin-top:22px; }
.small-print a { color:var(--ink); font-weight:700; text-decoration-color:var(--l); text-decoration-thickness:2px; text-underline-offset:3px; }

/* ---------- links: underline in the life color, hover switches to work ---------- */
a { color:inherit; }
.link-more, .back, .linkbtn, footer a, .g-more, .prose a, .perks a, .lede a, .issue .kv a, p a:not(.btn):not(.pill):not(.link-more):not(.linkbtn) {
  color:var(--ink); font-family:var(--v5); font-weight:800; text-decoration:underline; text-decoration-color:var(--l); text-decoration-thickness:2px; text-underline-offset:4px;
  background:none !important; box-shadow:none !important; transition:text-decoration-color .15s ease; }
.link-more:hover, .back:hover, .linkbtn:hover, footer a:hover, .g-more:hover, .prose a:hover, .perks a:hover, .lede a:hover, .issue .kv a:hover, p a:not(.btn):not(.pill):not(.link-more):not(.linkbtn):hover { color:var(--ink); text-decoration-color:var(--w); }
.link-more { font-size:16px; }
.linkbtn.danger { text-decoration-color:var(--ov); }

/* ---------- header: lockup, tabs with crossing markers on hover ---------- */
.titlebar { position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--pg) !important; backdrop-filter:none; border:0 !important; border-bottom:1.5px solid var(--ink) !important; border-image:none !important; border-radius:0 !important; box-shadow:none !important; min-height:68px; gap:12px 18px; transition:background .3s ease; }
.titlebar::before, .titlebar::after { display:none !important; }
.brand.lockup { flex:none; display:inline-flex; }
.tabs { gap:2px; align-items:center; justify-content:flex-end; padding-block:12px 14px; margin-block:-12px -14px; }
.tab { z-index:0; position:relative; font-family:var(--v5) !important; font-weight:700; font-size:16px; color:var(--ink) !important; background:none !important; padding:8px 10px !important; border-radius:10px; text-transform:lowercase; box-shadow:none !important; }
.tab:hover { background:none !important; }
.tab:not([aria-current="page"])::before, .tab:not([aria-current="page"])::after { content:""; position:absolute; border-radius:.18em; mix-blend-mode:multiply; opacity:0; transition:opacity .15s ease, transform .15s ease; height:auto; display:block; }
.tab:not([aria-current="page"])::before { left:6px; right:6px; top:50%; bottom:8px; background:var(--mw); transform:rotate(-1.5deg) scaleX(.6); transform-origin:left; z-index:-1; }
.tab:not([aria-current="page"])::after { left:42%; right:4px; top:34%; bottom:13px; background:var(--ml); transform:rotate(3deg) scaleX(.6); transform-origin:left; z-index:1; }
.tab:not([aria-current="page"]):hover::before { opacity:1; transform:rotate(-1.5deg); }
.tab:not([aria-current="page"]):hover::after { opacity:1; transform:rotate(3deg); }
.tab[aria-current="page"]::before, .tab[aria-current="page"]::after { content:""; position:absolute; left:10px; right:10px; height:5px; border-radius:3px; mix-blend-mode:multiply; display:block; top:auto; }
.tab[aria-current="page"]::before { bottom:2px; background:var(--w); right:16px; }
.tab[aria-current="page"]::after { bottom:0; background:var(--l); left:16px; }
@media (prefers-reduced-motion:reduce) { .tab::before, .tab::after { transition:none; } }

/* ---------- buttons: main = two swipes off-register; everything else = outlined swipe ---------- */
.btn, .more-bar, .tabs .tab.tab-cta, .pl-play, .statusmini .link-more {
  position:relative; isolation:isolate; z-index:0; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:none !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; filter:none !important; transform:none !important;
  color:var(--ink) !important; font:800 17px/1.1 var(--v5) !important; letter-spacing:-.01em; text-transform:lowercase; text-decoration:none !important;
  padding:16px 30px 18px 24px !important; white-space:nowrap; cursor:pointer; --o:7px; width:auto; }
.btn::before, .btn::after, .more-bar::before, .more-bar::after, .tabs .tab.tab-cta::before, .tabs .tab.tab-cta::after, .pl-play::before, .pl-play::after, .statusmini .link-more::before, .statusmini .link-more::after {
  content:""; display:block; position:absolute; z-index:-1; opacity:1; border-radius:.65em .9em .7em .85em; transition:transform .18s ease; pointer-events:none; height:auto; width:auto; mix-blend-mode:normal; }
.btn::before, .more-bar::before, .tabs .tab.tab-cta::before, .pl-play::before, .statusmini .link-more::before { background:var(--l); inset:var(--o) 0 0 var(--o); opacity:.9; transform:none; }
.btn::after, .more-bar::after, .tabs .tab.tab-cta::after, .pl-play::after, .statusmini .link-more::after { background:var(--card); border:2px solid var(--ink); inset:0 var(--o) var(--o) 0; transform:none; }
.btn:hover::after, .btn:focus-visible::after, .more-bar:hover::after, .tabs .tab.tab-cta:hover::after, .pl-play:hover::after, .statusmini .link-more:hover::after, .statusmini:hover .link-more::after { transform:translate(calc(var(--o) / 2), calc(var(--o) / 2)); }
.tabs .tab.tab-cta:hover::before, .more-bar:hover::before, .pl-play:hover::before { transform:none; opacity:.9; }
.btn:active::after, .more-bar:active::after { transform:translate(var(--o), var(--o)); }
.btn-primary { color:#fff !important; }
.btn-primary::before { background:var(--w); inset:0 var(--o) var(--o) 0; opacity:1; }
.btn-primary::after { background:var(--l); border:0; inset:var(--o) 0 0 var(--o); mix-blend-mode:multiply; }
.btn-primary:hover::before { transform:translate(-2px,-2px); } .btn-primary:hover::after, .btn-primary:focus-visible::after { transform:translate(2px,2px); }
.btn-primary:active::before { transform:translate(3px,3px); } .btn-primary:active::after { transform:translate(-3px,-3px); }
.pl-play.on { color:#fff !important; }
.pl-play.on::before { background:var(--w); inset:0 var(--o) var(--o) 0; opacity:1; }
.pl-play.on::after { background:var(--l); border:0; inset:var(--o) 0 0 var(--o); mix-blend-mode:multiply; }
.btn-sm, .tabs .tab.tab-cta, .rp-cta, .statusmini .link-more, .more-bar, .pl-play, .rd-bar .btn, .term .btn { font-size:15px !important; padding:13px 22px 15px 17px !important; --o:5px; }
.tabs .tab.tab-cta { margin-left:8px; }
.btns { gap:14px 16px; align-items:center; }
.more-bar { width:max-content; margin-top:6px; }
.more-bar .arrow { font-weight:900; }
@media (prefers-reduced-motion:reduce) { .btn::before, .btn::after, .more-bar::before, .more-bar::after { transition:none; } }

/* ---------- forms ---------- */
input:not([type=checkbox]):not([type=radio]):not(.hp):not(#term-in), textarea, select, .editor input[type=text], .nl-form input:not(.hp), .jot-row input, .sc-field input:not([type=radio]) {
  background:var(--card) !important; color:var(--ink) !important; border:1.5px solid var(--ink) !important; box-shadow:none !important; font-family:var(--v5); font-weight:600; }
input:not([type=checkbox]):not([type=radio]):not(.hp):not(#term-in), .nl-form input:not(.hp), .jot-row input { border-radius:999px; }
textarea, .editor textarea { border-radius:20px; }
input:focus, textarea:focus, select:focus { outline:2.5px solid var(--l) !important; outline-offset:2px; border-color:var(--ink) !important; }
::placeholder { color:var(--mut); opacity:1; }
.nl-form { gap:12px; align-items:center; }
.nl-form input:not(.hp) { padding:15px 20px; font-size:17px; }
.nl-msg, .emsg { color:var(--ink) !important; font-weight:700; }
.jot textarea { border:0 !important; border-radius:0; }

/* ---------- cards: white, ink outline, no tape, no tilt ---------- */
.entries.cards .entry, #all-entries .entry, .post-next .entry, .entry,
.shelf, .ls, .ping, .editor, .incident, .banner, .whoami, .promptbox, .issue, .jot, .pl-card, .pl-card.pl-hi, .pl-card.pl-now, .egg, .statusmini, .statusmini.dark, .guide-card, .rp-card, .section.strip, .term .window, .resume-dialog, .callout {
  background:var(--card) !important; color:var(--ink); border:1.5px solid var(--ink) !important; border-radius:26px !important; box-shadow:none !important; transform:none !important; }
.entries.cards .entry:hover, .entry:hover, .statusmini:hover, .pl-card:hover, .rp-card:hover { transform:none !important; box-shadow:none !important; background:var(--card) !important; }
.tape, .jot::before, .issue::before, .term .window::before, .pb-dots { display:none !important; }
.entry:hover h3 { text-decoration:underline; text-decoration-color:var(--l); text-decoration-thickness:2px; text-underline-offset:5px; }
.entry .meta, .entry .ver, .entry p { color:var(--ink); }
.entry .meta { color:var(--mut); font-weight:600; }
.entry .ver { color:var(--ink); font-weight:800; }
.callout { background:var(--acc) !important; font-family:var(--v5); }
.rp-card { border-radius:12px !important; overflow:hidden; }
.rp-card img { border-radius:0; }

/* tags + chips + pills: outlined pills; the active one is ink */
.tag, .chip, .pill, .pl-chip, .pb-name, .issue .bar span, .term .tbar span, .g-tag, .seg button {
  font-family:var(--v5) !important; font-weight:700; color:var(--ink) !important; border:1.5px solid var(--ink) !important; border-radius:999px; box-shadow:none !important; text-transform:lowercase; }
.tag { background:var(--card); font-size:13px; padding:3px 11px; }
.tag[data-p="career"] { background:var(--mw); } .tag[data-p="hard-thing"] { background:var(--ml); } .tag[data-p="the-mess"] { background:var(--acc); } .tag[data-p="whole-person"] { background:linear-gradient(100deg, var(--mw) 50%, var(--ml) 50%); } /* real life = where work and life overlap */
.chip, .pl-chip { background:var(--card) !important; }
.chip:hover, .pl-chip:hover { background:var(--card) !important; text-decoration:underline; text-decoration-color:var(--l); text-underline-offset:3px; }
/* changelog filters: hovering a pillar shows that pillar's tag color (same as the tag on each post) */
.chip[data-tag]:not([data-tag="all"]):not([aria-pressed="true"]):hover { text-decoration:none; }
.chip[data-tag="career"]:not([aria-pressed="true"]):hover { background:var(--mw) !important; }
.chip[data-tag="hard-thing"]:not([aria-pressed="true"]):hover { background:var(--ml) !important; }
.chip[data-tag="the-mess"]:not([aria-pressed="true"]):hover { background:var(--acc) !important; }
.chip[data-tag="whole-person"]:not([aria-pressed="true"]):hover { background:linear-gradient(100deg, var(--mw) 50%, var(--ml) 50%) !important; }
.chip[aria-pressed="true"], .pl-chip[aria-pressed="true"], .seg button[aria-checked="true"] { background:var(--ink) !important; color:var(--pg) !important; }
.pb-name, .issue .bar span, .term .tbar span { background:var(--card) !important; }
.g-tag { display:inline-flex; background:var(--card); font-size:13px; padding:3px 11px; }
.checks li::before { background:var(--mw) !important; color:var(--ink) !important; }

/* status colors stay inside the palette */
.lvl-green, .sc-lv.lvl-green { --lc:var(--w); } .lvl-yellow, .sc-lv.lvl-yellow { --lc:var(--acc); } .lvl-red, .sc-lv.lvl-red { --lc:var(--l); }
.s-op, .s-shipped { background:var(--mw) !important; } .s-deg, .s-wip { background:var(--acc) !important; } .s-part { background:var(--ml) !important; }
.s-maj { background:var(--l) !important; color:#fff !important; } .s-maint, .s-backlog { background:var(--card) !important; }
.statusmini.lvl-green .sm-state { background:var(--mw); } .statusmini.lvl-yellow .sm-state { background:var(--acc); } .statusmini.lvl-red .sm-state { background:var(--ml); }
.statusmini .sm-state { border:1.5px solid var(--ink); color:var(--ink); }
.meter { background:var(--pg); border:1.5px solid var(--ink); }
.eq i, .pb-copy { background:var(--w); }
.light { box-shadow:none !important; }

/* ---------- page bands ---------- */
main { padding:0; }
.band, .band.alt, .band.dark, .band.cream, .band.gradband {
  background:none !important; border-radius:0 !important; margin:0 !important; position:relative;
  padding-block:clamp(56px,8vw,96px); padding-inline:max(24px, calc(50vw - 550px)); border-top:1.5px solid var(--ink); }
.band.center { text-align:left; }
.section-head { align-items:flex-end; margin-bottom:28px; }
.section-head h2 { margin:0; }

/* ---------- home hero ---------- */
.v5-hero { display:flex; flex-direction:column; gap:18px; margin-top:28px !important; margin-bottom:clamp(56px,8vw,96px) !important; }
.v5-hero .me { position:relative; display:flex; align-items:center; gap:16px; }
.ring { position:relative; display:block; width:118px; height:118px; flex:none; text-decoration:none; }
.ring::before, .ring::after { content:""; position:absolute; border-radius:30px; mix-blend-mode:multiply; transition:transform .25s ease; }
.ring::before { inset:0 8px 8px 0; background:var(--w); transform:rotate(-3deg); }
.ring::after { inset:8px 0 0 8px; background:var(--l); transform:rotate(2deg); }
.ring:hover::before { transform:rotate(-5deg); } .ring:hover::after { transform:rotate(4deg); }
.ring img { position:absolute; inset:9px; width:100px; height:100px; border-radius:24px; border:4px solid var(--pg); z-index:1; object-fit:cover; display:block; }
.pf-p { display:none !important; } [data-pal="print"] .pf-p { display:block !important; } [data-pal="print"] .pf-s { display:none !important; }
.say { position:relative; margin:0; font-weight:700; font-size:16px; line-height:1.35; }
.say .ghost { visibility:hidden; }
.say .typed { position:absolute; inset:0; padding:inherit; white-space:nowrap; }
.say .caret { display:inline-block; width:.32em; height:1.05em; border-radius:2px; background:var(--w); box-shadow:3px 3px 0 var(--l); margin-left:4px; margin-right:calc(-.32em - 4px); vertical-align:-.16em; animation:blink 1s steps(1) infinite; flex:none; }
@media (prefers-reduced-motion:reduce) { .say .caret { animation:none; } }
.arw { position:absolute; left:0; top:0; pointer-events:none; overflow:visible; z-index:3; }
.arw path { fill:none; stroke:var(--ink); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.arw path.h { stroke:var(--card); stroke-width:9; }
.arw.draw .a1 { transition:stroke-dashoffset .7s ease-out; stroke-dashoffset:0; }
.arw.draw .a2 { transition:stroke-dashoffset .25s ease-out .65s; stroke-dashoffset:0; }
.arw-d { display:none; }
@media (prefers-reduced-motion:reduce) { .arw path { stroke-dashoffset:0; transition:none !important; } }
.v5-h1 { font-size:clamp(46px,12vw,60px); line-height:1.04; margin:0; }
.v5-hero .lede { margin:0; }
.v5-hero .btns { margin-top:6px; }

/* ---------- what you'll find here: two columns, list rows ---------- */
.find { display:grid; gap:28px; }
.find-head { display:grid; gap:14px; align-content:start; }
.find-head h2 { margin:0; }
.rows { border-top:2px solid var(--ink); }
.row-link { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 18px; align-items:center; padding:18px 4px; border-bottom:1.5px solid var(--ink); text-decoration:none; color:var(--ink); }
.row-link b { font-weight:900; font-size:21px; letter-spacing:-.025em; grid-column:1; }
.row-link span { grid-column:1; color:var(--mut); font-size:16px; line-height:1.45; }
.row-link i { grid-column:2; grid-row:1 / span 2; font-style:normal; font-weight:900; font-size:22px; transition:transform .18s ease; }
.row-link:hover b { text-decoration:underline; text-decoration-color:var(--l); text-decoration-thickness:2px; text-underline-offset:4px; }
.row-link:hover i { transform:translateX(4px); }

/* ---------- guide cards + templates ---------- */
.guides-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:0; max-width:none; }
.guide-card { padding:26px 24px !important; display:flex !important; flex-direction:column; align-items:flex-start; gap:12px; }
.guide-card b { font-family:var(--v5); font-weight:900; font-size:32px; letter-spacing:-.04em; line-height:1; }
.guide-card .g-desc { font-size:17px; line-height:1.5; color:var(--ink); flex:1; }
.guide-card .btn { margin-top:6px; }
.tpl-teaser { gap:22px; }
.shelf h2 { font-size:28px; }
.tpl { border-color:var(--hair) !important; }
.tpl .tname { font-weight:800; }
.tpl .get-btn { background:var(--card) !important; color:var(--ink) !important; border:1.5px solid var(--ink) !important; box-shadow:none !important; }
.tpl .get-btn:hover { background:var(--mw) !important; }
.tpl .fmt { color:var(--mut); }
.statusmini { margin-top:28px; padding:22px 26px !important; }
.statusmini .sm-title { font-family:var(--v5); font-weight:900; }

/* ---------- newsletter + closing statement ---------- */
.news .strip, .gradband .strip { background:none !important; border:0 !important; padding:0; border-radius:0; box-shadow:none !important; align-items:end; }
.news h2 { margin:0; }
.section.strip { padding:clamp(24px,4vw,40px) !important; }
.stmt { display:grid; gap:22px; }
.stmt .big { font-weight:900; font-size:clamp(40px,10vw,52px); line-height:1.06; letter-spacing:-.04em; text-wrap:balance; }
.big-mark { font-size:110px; }

/* ---------- about ---------- */
.about-hero h1 .mkw { padding-left:.06em; }
.whoami dt { color:var(--mut); font-weight:600; }
.whoami .cmd { font-weight:800; color:var(--ink); }
.did b { font-weight:900; }
.perks .ico svg [stroke="#FFDE59"] { stroke:var(--w); }
.egg > svg { background:var(--ink); }
.egg kbd { background:var(--card); color:var(--ink); border:1.5px solid var(--ink); }
.rp-note { font-weight:800; }
.rp-arrow path { stroke:var(--ink); }

/* ---------- changelog post: standard capitalization, 680px measure ---------- */
#post .prose, .post .prose { font-size:19px; line-height:1.65; }
#post .prose p, #post .prose li { max-width:680px; }
.prose h2 { font-size:clamp(26px,3vw,32px); margin-top:1.4em; }
.prose blockquote { margin:1.6em 0; padding:18px 0; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); font-weight:800; font-size:24px; line-height:1.3; letter-spacing:-.02em; }
.prose li::before { background:var(--w) !important; }
.post-head h1 { font-size:clamp(40px,6.4vw,68px); }
.post-meta { color:var(--mut); }

/* ---------- 404 ---------- */
.nf-mark { font-size:96px; margin-bottom:18px; }
.nf-mark::after { content:none; }

/* ---------- terminal keeps its typewriter font ---------- */
.term { background:color-mix(in srgb, var(--pg) 78%, transparent); }
.term .out, .term form label, .term input { color:var(--ink); font-family:var(--term); }
.term .out .u { background:var(--mw); } .term .out .y { background:var(--ml); }
.term .out .dim { color:var(--mut); }
.term input, .term input:focus { background:var(--pg) !important; border:1.5px solid var(--ink) !important; }
.term .close { background:var(--card); border:1.5px solid var(--ink); color:var(--ink); }

/* ---------- footer: page color, one ink rule, room for the toggle ---------- */
footer { background:var(--pg) !important; color:var(--ink) !important; border-top:1.5px solid var(--ink); border-radius:0 !important; margin-top:0; padding-block:44px 104px !important; display:grid; gap:14px; --faint:var(--mut); transition:background .3s ease; }
footer .foot-lockup .amp-mark { font-size:40px; }
footer .foot-lockup { font-size:22px; }
footer .foot-tag { margin:0; font-weight:800; font-size:18px; letter-spacing:-.02em; }
footer .foot-links { display:flex; flex-wrap:wrap; gap:8px 22px; }
footer .foot-links a { font-size:16px; }
footer .foot-copy { color:var(--mut); font-size:14px; }
footer .foot-small a { font-size:13px; font-weight:700; }

/* ---------- desktop ---------- */
@media (min-width:861px) {
  .titlebar { padding-inline:max(24px, calc(50vw - 550px)); }
  .v5-hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); column-gap:64px; row-gap:22px; align-items:start; margin-top:64px !important; }
  .v5-hero > * { grid-column:1; }
  .v5-hero .me { grid-column:2; grid-row:1 / span 4; flex-direction:column; align-items:center; gap:0; align-self:center; justify-self:center; }
  .v5-hero .say { position:relative; z-index:2; margin-top:-46px; background:var(--card); border:2px solid var(--ink); border-radius:16px; padding:12px 20px; text-align:center; transform:rotate(-2deg); box-shadow:5px 5px 0 var(--l); font-size:19px; line-height:1.3; }
  .ring { width:320px; height:320px; }
  .ring::before, .ring::after { border-radius:64px; }
  .ring::before { inset:0 16px 16px 0; } .ring::after { inset:16px 0 0 16px; }
  .ring img { inset:20px; width:280px; height:280px; border-radius:52px; border-width:6px; }
  .arw-m { display:none; } .arw-d { display:block; }
  .v5-h1 { font-size:88px; }
  .v5-hero .lede { font-size:20px; }
  .find { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:64px; align-items:start; }
  .stmt { grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:56px; }
  .stmt .big { font-size:76px; }
  .stmt .big-mark { grid-column:2; grid-row:1 / span 2; font-size:220px; }
}
@media (max-width:1060px) and (min-width:861px) { .tab { font-size:15px; padding:8px 7px !important; } .tabs .tab.tab-cta { padding:11px 18px 13px 14px !important; } }
@media (max-width:860px) {
  .titlebar { flex-wrap:wrap; padding-block:12px 0; padding-inline:16px; min-height:0; }
  .tabs { order:3; flex:1 1 100%; width:100%; justify-content:flex-start; overflow-x:auto; margin-inline:-10px; padding:2px 10px 10px; margin-block:0; -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent); }
  .band, .band.alt, .band.dark, .band.cream, .band.gradband { padding-inline:16px; }
  .guides-row { grid-template-columns:minmax(0,1fr); }
  .page > *:not(.band) { margin-left:16px; margin-right:16px; }
  footer { padding-inline:16px; }
}

/* ---------- jess radio: the floating player, on the page colors ---------- */
.radio { font-family:var(--v5); }
.rd-fab { background:var(--card) !important; border:1.5px solid var(--ink) !important; padding:0; box-shadow:4px 4px 0 var(--l) !important; }
.rd-fab-in { background:var(--card); }
.rd-eq i:nth-child(1) { background:var(--w); } .rd-eq i:nth-child(2) { background:var(--l); } .rd-eq i:nth-child(3) { background:var(--ov); } .rd-eq i:nth-child(4) { background:var(--acc); }
.rd-tag { background:var(--card); border:1.5px solid var(--ink); color:var(--ink); box-shadow:none; }
.rd-panel { background:var(--card); border:1.5px solid var(--ink); padding:0; box-shadow:0 20px 50px rgba(0,0,0,.18); }
.rd-in { background:var(--card); }
.rd-bar { background:var(--card); border-bottom:1.5px solid var(--ink); }
.rd-bar::after, .rd-dots { display:none; }
.rd-fn { margin-left:0; margin-right:auto; font-weight:800; font-size:15px; color:var(--ink); }
.rd-x { color:var(--ink); } .rd-x:hover { color:var(--ink); background:var(--pg); }
.rd-q { color:var(--ink); font-weight:800; }
.rd-tile { color:var(--mut); }
.rd-tile.on img { border-color:var(--l); box-shadow:none; }
.rd-tile.on span { color:var(--ink); }
.rd-tiles { scrollbar-color:var(--l) transparent; }
.rd-tiles::-webkit-scrollbar-thumb, .rd-tiles::-webkit-scrollbar-thumb:horizontal { background:var(--l); }
.rd-player { background:var(--pg); }
.rd-hint { color:var(--mut); }
.rd-links a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--l); text-decoration-thickness:2px; text-underline-offset:3px; }
.rd-grab { background:var(--hair); }
@media (max-width:640px) { .rd-panel { border-radius:26px 26px 0 0; border-bottom:0; } }
/* the palette pill sits left of the radio on phones so they never touch */
@media (max-width:640px) { .pal-tog { left:16px; transform:none; bottom:calc(22px + env(safe-area-inset-bottom,0px)); } }

/* small fixes */
.whoami .cmd { text-transform:lowercase; letter-spacing:.03em; font-size:14px; color:var(--mut); font-weight:700; }
.page[data-page="post"] .back { display:inline-block; margin-top:28px; }
/* playlists and the connect list read lowercase like the rest of the site */
.page[data-page="playlists"], .ping .net { text-transform:lowercase; }

/* ---------- drafts (admin only): dashed box, a publish button under each draft ---------- */
.drafts-box { border:2px dashed var(--ink) !important; border-radius:26px; padding:8px 20px 22px; background:none; }
.drafts-head { color:var(--ink) !important; font-weight:800; font-size:15px; text-transform:lowercase; padding:14px 2px 12px; }
.drafts-box .draft-item { background:var(--card); border:1.5px solid var(--ink); border-radius:26px; }
.drafts-box .draft-item + .draft-item { margin-top:18px; }
#all-entries .drafts-box .draft-item .entry { border:0 !important; background:none !important; padding-bottom:14px; }
.draft-badge { color:var(--ink) !important; background:var(--acc); border-radius:999px; padding:1px 10px; justify-self:start; }
.draft-entry { opacity:1; }
.draft-banner { border:2px dashed var(--ink) !important; color:var(--ink) !important; background:var(--acc); font-family:var(--v5); font-weight:600; font-size:15px; text-transform:lowercase; }
.draft-banner a { color:var(--ink); font-weight:800; text-decoration-color:var(--l); }
.draft-actions { padding:0 30px 28px; }
@media (max-width:640px) { .draft-actions { padding:0 24px 24px; } }
.page[data-page="post"] .draft-actions { padding:0 0 26px; }
.draft-actions .btns { display:flex; flex-wrap:wrap; }
.draft-note { margin:0 0 12px; font-size:16px; line-height:1.5; color:var(--ink); max-width:38em; }
.draft-note code { font-size:14px; }
.draft-err { font-weight:700; text-decoration:underline; text-decoration-color:var(--ov); text-decoration-thickness:2px; text-underline-offset:4px; }
.draft-actions .linkbtn { background:none; border:0; cursor:pointer; font-size:16px; padding:6px 4px; }
.draft-actions button:disabled { cursor:progress; opacity:.7; }