.blog-preview{padding:40px 0;border-top:2px solid var(--line)}
.blog-preview>h2{font:500 clamp(26px,3vw,38px)/1.3 var(--mono);margin-bottom:16px;text-shadow:2px 2px 0 #dcefff}
.blog-preview>p,.blog-entry p{font:15px/1.8 var(--mono);max-width:68ch;margin-bottom:12px}
.blog-language,.blog-entry time,.blog-pin{font-size:13px;color:var(--muted)}
.blog-pin{display:inline-block;margin-right:8px;padding:2px 8px;border:1px solid var(--ink);background:var(--accent);font-weight:500;color:var(--ink)}
.blog-entry{display:grid;grid-template-columns:minmax(160px,30%) minmax(0,1fr);align-items:start;gap:24px;padding:24px 0;border-bottom:2px solid var(--line);max-width:900px}
.blog-thumbnail{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border:2px solid var(--ink)}
.blog-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.blog-tags a{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;border:1px solid var(--ink);background:var(--surface);font:13px/1.5 var(--mono);text-decoration:none}
.blog-tags a:hover{background:var(--accent)}
.blog-main:has(.blog-article-layout){max-width:1160px}
.blog-cover{margin:0 0 40px;max-width:760px}
.blog-cover img{display:block;width:100%;height:auto;object-fit:contain;border:2px solid var(--ink)}
/* The outline is a grid sibling of the title, not a block below the cover: it is on screen in the
   first viewport and stays put while the article scrolls. Reading order and DOM order agree at
   every width, so the sidebar never comes before the heading for a screen reader. */
.blog-article-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(190px,1fr);grid-template-areas:"head side" "cover side" "body side";gap:40px;align-items:start}
.blog-article-layout>.blog-heading{grid-area:head;margin-bottom:0}
.blog-article-layout>.blog-cover{grid-area:cover;margin-bottom:0}
.blog-article-layout>article{grid-area:body;min-width:0}
.blog-outline{grid-area:side;position:sticky;top:calc(var(--header-height) + 24px);border-left:2px solid var(--line);padding-left:20px;font:13px/1.7 var(--mono);max-height:calc(100dvh - var(--header-height) - 100px);overflow:auto}
.blog-outline summary{font-weight:500;cursor:pointer;min-height:44px;align-content:center}
.blog-outline ol{list-style:none;padding:0;margin:8px 0 16px}
.blog-outline a{display:flex;align-items:center;min-height:44px;text-underline-offset:4px;padding-block:8px}
.blog-outline .outline-h3{padding-left:16px}
.blog-outline a:hover{background:var(--accent)}
.blog-prose :is(h2,h3){scroll-margin-top:12px}
.blog-share{margin-top:40px;padding-top:24px;border-top:2px solid var(--line);font:14px/1.7 var(--mono)}
.blog-share h2{font:500 22px/1.4 var(--mono);margin-bottom:16px}
.blog-share-actions{display:flex;flex-wrap:wrap;gap:12px}
.blog-share-actions :is(button,a){display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:2px solid var(--ink);background:var(--surface);color:var(--ink);font:inherit;text-decoration:none;cursor:pointer}
.blog-share-actions [hidden]{display:none}
.blog-share-actions :is(button,a):hover{background:var(--accent)}
.blog-share-actions button:disabled{cursor:wait;opacity:.7}
.share-status{min-height:24px;margin-top:12px}
.share-link-label{display:block;margin:8px 0}
.blog-share input{display:block;width:100%;min-height:44px;padding:10px;border:1px solid var(--ink);background:var(--surface);color:var(--ink);font:13px/1.6 var(--mono)}
.blog-adjacent{display:flex;flex-wrap:wrap;gap:24px;margin-top:32px;padding-top:24px;border-top:2px solid var(--line);font:15px/1.7 var(--mono)}
.blog-adjacent a{flex:1 1 220px;min-height:44px;text-underline-offset:5px}.blog-adjacent small{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}.blog-adjacent a[rel=next]{text-align:right}
.blog-footer .blog-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:10;margin:0;padding:8px 12px;background:var(--surface);border:2px solid var(--ink);font:13px/1.6 var(--mono);box-shadow:2px 2px 0 var(--ink)}
.blog-page :is(a,button,input,summary):focus-visible,.blog-tags a:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
@media(max-width:900px){.blog-article-layout{grid-template-columns:1fr;grid-template-areas:"head" "side" "cover" "body";gap:24px}.blog-outline{position:static;max-height:none;border-left:0;border-block:2px solid var(--line);padding:12px 0}.blog-outline .outline-top{display:none}.blog-cover{margin-bottom:0}}
@media(max-width:540px){.blog-entry{grid-template-columns:1fr;gap:16px}.blog-thumbnail{max-width:100%}.blog-adjacent a[rel=next]{text-align:left}.blog-footer{padding-bottom:100px}}
.blog-entry h2,.blog-entry h3{font:500 clamp(22px,2.4vw,30px)/1.4 var(--mono);margin:12px 0}
.blog-entry h2 a,.blog-entry h3 a{text-decoration-thickness:2px;text-underline-offset:6px}
.blog-entry h2 a:hover,.blog-entry h3 a:hover{background:var(--accent)}
.blog-entry-featured{grid-template-columns:1fr;gap:20px;padding:8px 0 32px;border-bottom:2px solid var(--ink)}
.blog-entry-featured .blog-thumbnail{aspect-ratio:1200/630;box-shadow:6px 6px 0 var(--line)}
.blog-entry-featured h2,.blog-entry-featured h3{font-size:clamp(26px,3.4vw,40px);line-height:1.3;text-wrap:balance}
.blog-entry-featured p{font-size:16px;text-wrap:pretty}
.blog-entry-compact{grid-template-columns:128px minmax(0,1fr);gap:20px;padding:18px 0}
.blog-entry-compact h2,.blog-entry-compact h3{font-size:clamp(18px,1.8vw,21px);line-height:1.45;margin:6px 0}
.blog-entry-compact p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;line-height:1.7;margin-bottom:0}
@media(max-width:540px){.blog-entry-compact{grid-template-columns:88px minmax(0,1fr);gap:14px}.blog-entry-compact p{-webkit-line-clamp:3}}
.blog-all{display:inline-flex;align-items:center;min-height:44px;margin-top:20px;font-weight:500;text-underline-offset:5px}
.blog-main{max-width:808px;margin-inline:auto;padding:56px 24px 64px;overflow-wrap:anywhere}
.blog-heading{margin-bottom:40px}
.blog-heading h1{font:500 clamp(36px,5vw,56px)/1.2 var(--mono);margin:16px 0 24px;text-shadow:3px 3px 0 #dcefff}
.blog-heading>p:not(.blog-meta){font:17px/1.8 var(--mono);max-width:65ch}
.blog-meta{font:13px/1.7 var(--mono);color:var(--muted)}
.blog-back{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:5px;margin-bottom:20px}
.blog-prose{font:17px/1.9 var(--mono)}
.blog-prose p,.blog-prose ul,.blog-prose ol,.blog-prose blockquote,.blog-prose pre,.blog-prose table{margin:0 0 24px}
.blog-prose h2{font:500 26px/1.4 var(--mono);margin:44px 0 20px}
.blog-prose h3{font:500 21px/1.5 var(--mono);margin:32px 0 16px}
.blog-prose li{margin-bottom:12px}.blog-prose ul,.blog-prose ol{padding-left:1.5em}
.blog-prose a{text-decoration-thickness:2px;text-underline-offset:4px}
.blog-prose a:hover{background:var(--accent)}
.blog-prose img{display:block;max-width:100%;height:auto;border:2px solid var(--ink)}
.blog-prose pre{overflow-x:auto;padding:20px;background:var(--surface);border:2px solid var(--line);font:14px/1.7 var(--mono);white-space:pre}
.blog-prose code{font-family:var(--mono);background:var(--surface);padding:2px 4px}.blog-prose pre code{padding:0}
.blog-prose blockquote{border-left:4px solid var(--ink);padding:4px 0 4px 24px}
.blog-prose blockquote p:last-child{margin-bottom:0}
.blog-prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:14px}
.blog-prose th,.blog-prose td{padding:12px;border:1px solid var(--line);text-align:left}
.blog-footer{max-width:808px;margin:0 auto;padding:32px 24px 56px;border-top:2px solid var(--line);font:14px/1.8 var(--mono)}
.blog-footer p{margin-bottom:16px}.blog-footer a{display:inline-flex;align-items:center;min-height:44px;margin-right:24px;text-underline-offset:5px}
.blog-skip{position:fixed;top:-100px;left:16px;z-index:20;padding:12px;background:var(--accent);color:var(--ink)}.blog-skip:focus{top:12px}
@media(max-width:760px){.blog-main{padding:32px 6% 48px}.blog-prose{font-size:16px;line-height:1.85}.blog-heading>p:not(.blog-meta){font-size:16px}.blog-footer{padding-inline:6%}.blog-entry{padding-block:20px}}

/* ── Dance score ──────────────────────────────────────────────────────────────
   One routine's layers share a single time axis. The stage is the story: it comes
   up with the dance and is handed back at the end, so the score has to show the
   hand-back, not just the dance. */
.dance-score{--dance-gutter:98px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--shadow);margin:32px 0 36px;background:var(--paper);font:14px/1.6 var(--mono);font-variant-numeric:tabular-nums}
.dance-main{min-width:0;padding:24px}
.dance-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dance-head h3{font:500 clamp(18px,1.9vw,25px)/1.35 var(--mono);text-wrap:balance}
.dance-controls{display:flex;gap:6px;flex-shrink:0}
.dance-controls button{min-width:44px;min-height:44px;padding:8px 12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:500 12px var(--mono);cursor:pointer;transition:transform 120ms ease-out,background 160ms ease-out}
.dance-controls button[aria-pressed=true]{background:var(--accent);border-color:var(--ink)}
.dance-hint{margin:8px 0 20px;font-size:12px;color:var(--muted)}
.dance-stage{position:relative;padding:6px 0;border-block:1px solid var(--line)}
.dance-lanes{display:grid;gap:2px}
.dance-lane{display:grid;grid-template-columns:calc(var(--dance-gutter) - 10px) minmax(0,1fr);align-items:center;gap:10px;height:26px}
.dance-lane-label{font:500 10px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dance-track{position:relative;height:100%;min-width:0}
.dance-tick{position:absolute;top:50%;left:calc(var(--at) * 1%);width:2px;height:9px;margin-left:-1px;background:var(--line);transform:translateY(-50%);transition:background 80ms linear,height 80ms linear}
.dance-tick[data-alt]{height:15px}
.dance-tick[data-lit]{background:var(--ink)}
.dance-block{position:absolute;top:50%;left:calc(var(--from) * 1%);width:calc((var(--to) - var(--from)) * 1%);height:13px;border:1px solid var(--line);background:var(--surface);transform:translateY(-50%);transition:background 80ms linear,border-color 80ms linear}
.dance-block[data-lit]{background:var(--accent);border-color:var(--ink)}
.dance-block-label{position:absolute;top:50%;left:calc(var(--at) * 1%);margin-left:5px;transform:translateY(-50%);font:500 10px/1 var(--mono);color:var(--muted);white-space:nowrap}
.dance-cover{position:absolute;left:var(--dance-gutter);right:0;top:0;bottom:0;pointer-events:none}
.dance-playhead{position:absolute;top:0;bottom:0;left:calc(var(--at) * 1%);width:2px;margin-left:-1px;background:var(--ink);opacity:0}
.dance-score[data-armed] .dance-playhead{opacity:1}
.dance-axis{display:grid;grid-template-columns:var(--dance-gutter) minmax(0,1fr);gap:10px;margin-top:6px;font-size:10px;color:var(--muted)}
.dance-axis span:last-child{text-align:right}
.dance-scrub-label{display:block;margin-top:14px;font-size:11px;color:var(--muted)}
.dance-scrub{display:block;width:100%;min-height:44px;margin:0;accent-color:var(--ink);cursor:pointer}
.dance-note{margin-top:10px;padding-top:12px;border-top:1px solid var(--line);font-size:11px;line-height:1.7;color:var(--muted)}
.dance-readout{min-width:0;border-left:1px solid var(--line);padding:24px;background:var(--surface)}
.dance-eyebrow{font-size:11px;color:var(--muted);margin-bottom:8px}
.dance-clock{font:500 clamp(26px,3.2vw,38px)/1.1 var(--mono);font-variant-numeric:tabular-nums}
.dance-clock small{font-size:13px;color:var(--muted);margin-left:4px}
.dance-facts{display:grid;grid-template-columns:1fr auto;gap:10px 14px;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:12px}
.dance-facts dt{min-width:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dance-facts dd{text-align:right;font-variant-numeric:tabular-nums}
.dance-state{display:inline-block;padding:1px 6px;border:1px solid var(--line);background:var(--paper);font:500 11px/1.5 var(--mono);white-space:nowrap}
.dance-state[data-on]{border-color:var(--ink);background:var(--accent)}
@media(hover:hover) and (pointer:fine){.dance-controls button:hover{background:var(--surface-hover);transform:translateY(-2px)}}
@media(max-width:900px){.dance-score{grid-template-columns:minmax(0,1fr)}.dance-readout{border-left:0;border-top:1px solid var(--line)}}
@media(max-width:760px){.dance-score{--dance-gutter:66px;box-shadow:4px 4px 0 var(--shadow)}.dance-main,.dance-readout{padding:18px 14px}.dance-lane{height:24px}.dance-block-label{display:none}}
@media(prefers-reduced-motion:reduce){.dance-controls button,.dance-tick,.dance-block{transition:none}}
.blog-cover figcaption{margin-top:8px;font:13px/1.7 var(--mono);color:var(--muted)}

/* ── Media figures ─────────────────────────────────────────────────────────────
   A still or a clip inside the prose column: the same pixel frame as the covers,
   natural size up to the column width (a 384px sticker stays a sticker), one
   caption line. Never floated — the 760px measure stays intact. blog-emoji is a
   chibi sticker used mid-sentence, so it keeps text metrics instead of a frame. */
.blog-figure{margin:32px 0 36px}
.blog-figure :is(img,video){display:block;max-width:100%;height:auto;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--shadow);background:var(--paper)}
.blog-figure figcaption{margin-top:10px;font:13px/1.7 var(--mono);color:var(--muted);text-wrap:pretty}
.blog-prose .blog-emoji{display:inline-block;width:1.6em;height:1.6em;max-width:100%;margin:0 2px;border:0;box-shadow:none;vertical-align:-.4em}
@media(max-width:760px){.blog-figure :is(img,video){box-shadow:4px 4px 0 var(--shadow)}}

.blog-community{display:flex;align-items:center;gap:24px;padding:28px;margin:32px 0;background:var(--surface);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--shadow)}
.blog-community>img{width:100px;height:100px;object-fit:contain;border:0;box-shadow:none;flex-shrink:0}
.blog-community h3{margin:0 0 10px}.blog-community p{font-size:14px;margin:0 0 18px}
.blog-community-actions{display:flex;flex-wrap:wrap;gap:12px}
.blog-community-actions a,.blog-sidebar-actions a{display:block;padding:12px 14px;min-height:44px;border:1px solid var(--ink);background:var(--paper);font:500 12px/1.6 var(--mono);text-decoration:none;color:var(--ink)}
.blog-community-actions .community-primary,.blog-sidebar-actions .community-primary{background:var(--ink);color:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow)}
.blog-community-actions a:hover,.blog-sidebar-actions a:hover{outline:2px solid var(--ink);outline-offset:3px}
.blog-community-actions a:focus-visible,.blog-sidebar-actions a:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.blog-sidebar-actions{margin-top:24px;border-top:1px solid var(--line);padding-top:20px;display:grid;gap:20px}
.blog-sidebar-actions section{display:grid;gap:8px}.blog-sidebar-actions h2{font:500 13px/1.5 var(--mono);margin:0 0 4px}.sidebar-share-links{display:flex;flex-wrap:wrap;gap:6px}.sidebar-share-links a{padding:9px;font-size:11px}
.blog-outline{max-height:calc(100dvh - var(--header-height,80px) - 32px);overflow-y:auto;padding-right:12px}
.blog-figure video{height:auto;object-fit:contain}
.sidebar-share-links{display:grid;grid-template-columns:1fr 1fr}.sidebar-share-links button{grid-column:1/-1;min-height:44px;padding:10px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font:500 12px/1.6 var(--mono);cursor:pointer}.sidebar-share-links button[hidden]{display:none}.sidebar-copy-status{grid-column:1/-1;font-size:11px;margin:0}.sidebar-copy-status:empty{display:none}.blog-sidebar-actions section+section{border-top:1px solid var(--line);padding-top:20px}.blog-sidebar-actions a span{margin-right:6px}.sidebar-share-links button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media(max-width:900px){.blog-outline{max-height:none;overflow:visible}.blog-sidebar-actions{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.blog-community{display:block;padding:20px}.blog-community>img{display:none}.blog-community-actions{display:grid}.blog-sidebar-actions{grid-template-columns:1fr}}

/* An illustrated conversation: the character owns the stage, choices own the pace. */
.co-story{margin:32px 0 36px;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--shadow);background:var(--surface);color:var(--ink);font:14px/1.65 var(--mono)}
.co-story [hidden]{display:none!important}
.co-story-header{display:flex;justify-content:space-between;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);font-size:11px}
.co-story-header span:last-child{color:var(--muted)}
.co-story-scene{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);align-items:center;min-height:430px;padding:32px 24px;gap:24px}
.co-story-art{text-align:center;min-width:0}
.co-story-note{display:block;font-size:12px;color:var(--muted)}
.co-story-art img{display:block;width:100%;height:250px;object-fit:contain;margin:12px auto;border:0;box-shadow:none}
.co-story-art-caption{font-size:10px;color:var(--muted)}
.co-story-dialogue{min-width:0}
.co-story-speaker{font-size:11px;margin:0 0 8px!important;color:var(--muted)}
.co-story-dialogue h3{font:500 clamp(22px,3vw,30px)/1.35 var(--mono);margin:0 0 16px;text-wrap:balance}
.co-story-dialogue h3:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.co-story-dialogue p{font-size:14px;line-height:1.8;text-wrap:pretty}
.co-story-yours{padding:10px 14px;background:var(--paper);border-left:3px solid var(--line);font-size:12px!important;margin:0 0 24px!important}
.co-story-choices{display:grid;gap:10px;margin-top:24px}
.co-story button{font:500 12px/1.6 var(--mono);color:var(--ink);cursor:pointer}
.co-story-choices button{min-height:46px;padding:12px 14px;text-align:left;border:1px solid var(--ink);background:var(--paper);box-shadow:3px 3px 0 var(--line)}
.co-story-choices button::after{content:' →'}
.co-story button:hover{background:var(--accent)}
.co-story button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.co-story-footer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 22px;border-top:1px solid var(--line);background:var(--paper)}
.co-story-footer p{flex:1 1 180px;font-size:10px!important;line-height:1.6;margin:0!important;color:var(--muted)}
.co-story-footer button{background:transparent;border:0;padding:8px 0;text-decoration:underline;min-height:44px}
.co-story[data-scene="song"] .co-story-art img{height:230px;object-fit:cover;object-position:50% 50%;border:2px solid var(--ink)}
@media(max-width:600px){.co-story-scene{grid-template-columns:1fr;padding:24px 18px;gap:20px}.co-story-art img{height:180px;width:210px}.co-story-art-caption{display:none}.co-story-dialogue h3{font-size:24px}.co-story-header{padding:12px 16px}.co-story-footer{padding:12px 16px}.co-story[data-scene="song"] .co-story-art img{width:100%;height:180px}}

.blog-shorts{text-align:left;margin:28px 0;min-width:0}.blog-shorts header{margin-bottom:16px}.blog-shorts h2{font:500 22px/1.4 var(--mono)}.blog-shorts button{min-width:44px;min-height:44px;border:1px solid var(--ink);background:var(--surface);color:var(--ink);cursor:pointer}.blog-shorts-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 16px}.blog-short{flex:0 0 240px;scroll-snap-align:start;display:flex!important;flex-direction:column;gap:12px;white-space:normal;margin:0!important}.blog-short img{display:block;width:100%;height:auto;border:2px solid var(--ink)}.blog-short span{font:500 14px/1.6 var(--mono)}.blog-short small{font:12px/1.5 var(--mono)}