/* Member pages follow the reader's platform: system colours and the system type stack. The
   card is one fixed frame on every shape; the frame decides the column, the shape fills it. */
:root {
  color-scheme: light dark;
  --surface: Canvas; --ink: CanvasText;
  --surface-raised: color-mix(in srgb, CanvasText 6%, Canvas);
  --line: color-mix(in srgb, CanvasText 18%, Canvas);
  --ink-dim: color-mix(in srgb, CanvasText 68%, Canvas);
  --ink-muted: color-mix(in srgb, CanvasText 48%, Canvas);
  --system-accent: LinkText; --accent: var(--system-accent); --scrim: rgb(0 0 0 / .72);
  --display: 600 24px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: 400 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --meta: 400 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --caption: 400 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 8px; --media-radius: 6px; --pad: 16px; --gap: 8px;
  font: var(--body);
}
@supports (color: AccentColor) { :root { --system-accent: AccentColor; } }
:root[data-painted] { color-scheme: var(--scheme, light dark); --surface: var(--bg, Canvas); --ink: var(--fg, CanvasText); --accent: var(--accent-chosen, var(--system-accent));
  --surface-raised: color-mix(in srgb, var(--ink) 6%, var(--surface)); --line: color-mix(in srgb, var(--ink) 18%, var(--surface));
  --ink-dim: color-mix(in srgb, var(--ink) 68%, var(--surface)); --ink-muted: color-mix(in srgb, var(--ink) 48%, var(--surface)); }
:root[data-painted] { background: var(--surface); color: var(--ink); accent-color: var(--accent); }
:root[data-painted] a { color: var(--accent); }
:root[data-painted] .profile { border: 2px solid var(--accent); }
:where(:root[data-painted]) button { background: var(--surface-raised); color: var(--accent); border: 1px solid var(--accent); border-radius: var(--media-radius); }
* { box-sizing: border-box; }
body { max-width: 52rem; margin: auto; padding: 1.25rem; overflow-wrap: anywhere; background: var(--surface); color: var(--ink); }
nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-block: 1rem; }
nav[hidden] { display: none; }
#site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
button { font: inherit; cursor: pointer; padding: .35rem .8rem; }
img, video, audio { max-width: 100%; height: auto; }
pre { overflow-x: auto; }
article, li { margin-block: 1rem; }
h1, h2, h3, p { margin: 0; }
h1 { font: var(--display); font-size: 28px; margin-block: .5rem; }
h2 { font: var(--display); font-size: 20px; margin-block: 1rem .5rem; }
#site-header p, ul { margin-block: .5rem; }
.cards { display: grid; gap: 1rem; }
.card { margin: 0; padding: var(--pad); border: 1px solid var(--line); border-radius: var(--radius); }
.card img { display: block; margin-bottom: .5rem; border-radius: var(--media-radius); }
.card h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.card p { margin: .25rem 0; }
.card time { font: var(--meta); color: var(--ink-muted); }
/* The profile card, the web twin of the native profile: avatar beside the handle, then bio and
   links in the accent. A site profile and a member's page draw the same card. */
.profile { margin-block: 1rem; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.profile-head { display: flex; align-items: center; gap: 14px; }
.profile img, .profile .avatar-fallback { width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; }
.profile .avatar-fallback { display: flex; align-items: center; justify-content: center; background: var(--surface-raised); color: var(--ink-muted); font-size: 30px; font-weight: 700; }
.profile .handle { font-size: 20px; font-weight: 700; line-height: 1.25; }
.profile .bio { margin-block: 14px 0; max-width: 65ch; white-space: pre-wrap; }
.profile .profile-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 14px 0 0; padding: 0; list-style: none; }
.profile .profile-links li { margin: 0; }
/* Profiles share the site palette, including the native public profile projection. */
.profile .profile-links a { color: var(--accent); font: 600 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration: none; }
.profile .profile-links a:hover { text-decoration: underline; }
#notice { min-height: 1.6em; }
#session { margin-block: 1rem; }
:root[data-layout="feed"] body { max-width: 96rem; }
.subscribe { margin-block: 0 1rem; }
/* A Calendar feed's views, and its date view's agenda headings. */
.calendar-views { margin-block: 0 1rem; }
.calendar-views a { text-decoration: none; padding-block: 6px; border-bottom: 2px solid transparent; }
.calendar-views a[aria-current="page"] { font-weight: 600; border-bottom-color: var(--accent); }
.calendar-horizons { margin-block: 0 .5rem; font: var(--meta); }
.calendar-horizons a { text-decoration: none; }
.calendar-horizons a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.agenda-day { margin-block: 1.5rem 0.75rem; font-size: 1.05rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- The grid: one column, three from 64rem with every frame the same height ---------- */
.entries { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.entry { position: relative; display: flex; flex-direction: column; gap: var(--gap); min-width: 0; margin: 0;
  padding: var(--pad); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.entry > * { min-width: 0; }
.entry a { color: inherit; }
.entry-body a { color: var(--accent); }

/* The header: avatar, source, time. The same line on every card. */
.entry-meta { display: flex; align-items: center; gap: 10px; margin: 0; font: var(--body); }
.entry-meta .avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; object-fit: cover; }
.entry-meta .source { font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-meta .source:hover { text-decoration: underline; }
.entry-meta time { font: var(--meta); color: var(--ink-muted); margin-left: auto; flex: none; }
.entry-header { margin-block: 0 1rem; }

.entry-body { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
.entry-body p { overflow-wrap: anywhere; }
.entry-body p + p { margin-top: .5em; }
/* Short text: a raised box, the words centred in it. */
.said { flex: 1; display: grid; align-content: center; gap: .5em; padding: 20px; border-radius: var(--media-radius); background: var(--surface-raised); }
.said p { font: var(--display); text-wrap: pretty; }
.said p + p { margin: 0; }
.caption { font: var(--caption); color: var(--ink-dim); }
.credit { font: 400 11px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink-muted); margin-top: -4px; }
.linkrow { font: var(--meta); color: var(--accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkrow:hover { text-decoration: underline; }
.more { align-self: flex-start; font: var(--meta); font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0; margin-top: auto; }

/* Pictures: the carousel. One ratio per post, every page shares it, no picture is cropped. */
.gallery { position: relative; margin-inline: calc(var(--pad) * -1); background: var(--surface-raised); }
.track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: var(--ratio, 4 / 5); scroll-behavior: smooth; }
.track::-webkit-scrollbar { display: none; }
.track figure { flex: 0 0 100%; margin: 0; scroll-snap-align: start; height: 100%; }
.track a, .track .zoom { display: block; height: 100%; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.track a { cursor: pointer; }
.track img { width: 100%; height: 100%; object-fit: contain; display: block; }
.count { position: absolute; top: 10px; right: 10px; font: var(--meta); font-variant-numeric: tabular-nums;
  padding: 3px 8px; border-radius: 999px; background: var(--scrim); color: #fff; pointer-events: none; }
.dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / .55); }
.dots i.on { background: #fff; }
.arrow { position: absolute; top: 50%; translate: 0 -50%; width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0;
  background: var(--scrim); color: #fff; font-size: 20px; line-height: 1; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.arrow.prev { left: 8px; } .arrow.next { right: 8px; }
.gallery:hover .arrow, .gallery:focus-within .arrow { opacity: 1; }
@media (hover: none) { .arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .track { scroll-behavior: auto; } .arrow { transition: none; } }

/* Linked things: the title, then the picture at its own ratio with its credit under it. */
.hero { width: 100%; max-height: 16rem; object-fit: contain; object-position: left; background: var(--surface-raised); border-radius: var(--media-radius); display: block; }
.title { font: var(--display); font-size: 20px; }
.title a { text-decoration: none; color: inherit; }
.title a:hover { text-decoration: underline; }
.excerpt { color: var(--ink-dim); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.byline { font: var(--meta); color: var(--ink-dim); }
.byline b { font-weight: 600; color: var(--ink); }
.rss .title { font-size: 18px; }
.rss .excerpt { font: var(--caption); -webkit-line-clamp: 2; }
.poster { position: relative; display: block; margin-inline: calc(var(--pad) * -1); background: var(--surface-raised); }
.poster img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; display: block; }
.poster .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.poster .play span { width: 56px; height: 56px; border-radius: 50%; background: var(--scrim); display: grid; place-items: center; font-size: 22px; padding-left: 4px; }

/* A scene: the poster at its own ratio (4:5 to 16:9, as the carousel), the Interactive badge over
   it and the caption under it. On the post page the runtime's iframe covers the frame exactly and
   everything the runtime adds sits over it, so nothing moves when the scene starts. */
.scene { margin: 0; display: flex; flex-direction: column; gap: var(--gap); }
.scene-frame { position: relative; margin-inline: calc(var(--pad) * -1); aspect-ratio: var(--ratio, 4 / 5); overflow: hidden;
  background: var(--surface-raised); touch-action: pan-y; }
.scene-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.scene-frame img[hidden] { display: none; }
.scene-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.scene-badge { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 10px; border-radius: 999px; background: var(--scrim);
  color: #fff; font: var(--meta); font-weight: 600; text-decoration: none; }
a.scene-badge:hover { text-decoration: underline; }
.entry a.scene-badge { color: #fff; }
.scene-frame[data-scene-state="ready"] .scene-badge { display: none; }
.scene-play { position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: 1; min-width: 56px; min-height: 56px; padding: 0 20px;
  border: 0; border-radius: 999px; background: var(--scrim); color: #fff; font-weight: 600; }
.scene-error { position: absolute; inset: auto 0 0 0; z-index: 1; margin: 0; padding: 8px 12px; background: var(--scrim); color: #fff; font: var(--caption); }
/* The runtime's api.announce line: read to assistive technology, never drawn. */
.scene-announce { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The post's controls under the scene, in the site's own type and colours: labels above inputs, a wrapping grid. */
.scene-controls { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 12px 16px; }
.scene-control { display: flex; flex-direction: column; gap: 4px; min-width: 0; font: var(--meta); color: var(--ink); }
.scene-control label { font-weight: 600; }
.scene-control input[type="range"] { width: 100%; accent-color: var(--accent); }
.scene-control output { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.scene-control-ends { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-muted); }
.scene-control select { font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--media-radius); background: var(--surface); color: var(--ink); }
.scene-control-toggle { flex-direction: row; align-items: center; gap: 8px; }
.scene-control-toggle input { accent-color: var(--accent); }
.scene-control-button { justify-content: flex-end; }
.scene-control-button button { align-self: flex-start; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-raised); color: var(--ink); }

/* A repost: the original is the card; the reposter signs it below, with their comment. */
.repost { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.entry-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-top: 10px; border-top: 1px solid var(--line); font: var(--meta); color: var(--ink-dim); }
.entry-foot .mark { font-size: 15px; line-height: 1; }
.entry-foot .reposter { flex: 1; font: var(--meta); gap: 8px; }
.entry-foot .reposter .avatar { width: 20px; height: 20px; }
.entry-foot .reposter .source { color: var(--ink); }
.entry-foot .comment { flex-basis: 100%; font: var(--body); font-size: 15px; color: var(--ink); }

/* The decorator bar: one full-width button below the body, above a repost's signature. On the
   grid the body takes the spare height, so the bar sits at the foot of every decorated frame. */
.entry-decorator { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; width: 100%; flex: none; margin: 0; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--media-radius); background: var(--surface-raised); color: var(--ink); font: var(--meta); text-align: left; }
.decorator-label { font-weight: 600; }
.decorator-detail { color: var(--ink-dim); overflow-wrap: anywhere; }
.decorator-place { flex-basis: 100%; padding-left: calc(1.25em + 8px); color: var(--ink-dim); overflow-wrap: anywhere; }
.entry-decorator.past { opacity: .65; }
.entry-decorator:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* One column: long text clamps and opens in place, fading while closed. */
@media (max-width: 63.98rem) {
  .text-long:not(.open) .entry-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; position: relative; }
  .text-long:not(.open) .entry-body::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3.5rem;
    background: linear-gradient(transparent, var(--surface)); pointer-events: none; }
}
/* Three columns: every frame the same size; what overflows fades, and Read in full is a dialog. */
@media (min-width: 64rem) {
  :where(:root:not([data-feed-layout="single"])) .entries { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 30rem; }
  :where(:root:not([data-feed-layout="single"])) .text-long:not(.open) .entry-body { display: flex; }
  :where(:root:not([data-feed-layout="single"])) .entry { height: 100%; }
  :where(:root:not([data-feed-layout="single"])) .entry-body { flex: 1; overflow: hidden; position: relative; }
  :where(:root:not([data-feed-layout="single"])) .text-long .entry-body::after, :where(:root:not([data-feed-layout="single"])) .repost .fades::after { content: ""; position: absolute; inset: auto 0 0 0; height: 5rem;
    background: linear-gradient(transparent, var(--surface)); pointer-events: none; }
  :where(:root:not([data-feed-layout="single"])) .images .entry-body { gap: 6px; }
  :where(:root:not([data-feed-layout="single"])) .gallery { flex: 1; min-height: 0; display: flex; }
  :where(:root:not([data-feed-layout="single"])) .track { aspect-ratio: auto; flex: 1; }
  :where(:root:not([data-feed-layout="single"])) .images .caption { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  :where(:root:not([data-feed-layout="single"])) .scene { flex: 1; min-height: 0; }
  :where(:root:not([data-feed-layout="single"])) .scene-frame { flex: 1; min-height: 0; aspect-ratio: auto; }
  :where(:root:not([data-feed-layout="single"])) .scene .caption { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  :where(:root:not([data-feed-layout="single"])) .repost .entry-body { justify-content: center; }
  :where(:root:not([data-feed-layout="single"])) .rss .title { font-size: 20px; }
  :where(:root:not([data-feed-layout="single"])) .rss .excerpt { -webkit-line-clamp: 3; }
  :where(:root:not([data-feed-layout="single"])) .hero { max-height: 13rem; }
}
/* The full card: a post page or the Read in full dialog. Nothing clamps. */
.entry-full { height: auto; }
.entry-full .entry-body { display: flex; flex: none; overflow: visible; -webkit-line-clamp: none; }
.entry-full .entry-body::after { display: none; }
.entry-full .excerpt, .entry-full .caption { display: block; -webkit-line-clamp: none; }
.entry-full .hero { max-height: none; }
.entry-full .gallery { flex: none; display: block; }
.entry-full .track { aspect-ratio: var(--ratio, 4 / 5); }
.entry-full .scene { flex: none; }
.entry-full .scene-frame { flex: none; aspect-ratio: var(--ratio, 4 / 5); }

/* ---------- Dialogs: the full view and the picture viewer ---------- */
.decorator-dialog { width: min(32rem, calc(100% - 2rem)); margin: 2rem auto; }
.decorator-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.decorator-card h2 { margin: 0 3.5rem 0 0; }
.decorator-card p { overflow-wrap: anywhere; }
.decorator-text { white-space: pre-line; }
dialog { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: none; max-height: none; }
dialog::backdrop { background: var(--scrim); }
.entry-dialog { width: min(44rem, calc(100% - 2rem)); margin: 2rem auto; }
.entry-dialog .entry { padding: 24px; gap: 12px; }
.dialog-close { position: absolute; top: 12px; right: 12px; z-index: 1; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); }
.viewer { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; background: #000; color: #fff; }
.viewer .track { height: 100%; aspect-ratio: auto; }
.viewer .track img { object-fit: contain; }
.viewer .count { top: 16px; left: 16px; right: auto; font-size: 15px; }
.viewer .dialog-close { background: rgb(255 255 255 / .18); color: #fff; border-color: transparent; }
.viewer .arrow { opacity: 1; width: 44px; height: 44px; }

/* ---------- Newsletter: the title, prose, and each card item as a static section ---------- */
.entry.newsletter .entry-title { margin: 0; font: var(--display); }
.entry.newsletter .entry-body h2, .entry.newsletter .entry-body h3, .entry.newsletter .entry-body > h4 { margin: .5em 0 0; }
.entry.newsletter .entry-body ul, .entry.newsletter .entry-body ol { margin: 0; padding-left: 1.4em; }
.newsletter-item { display: flex; flex-direction: column; gap: .5em; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--media-radius); background: var(--surface-raised); overflow-wrap: anywhere; }
.newsletter-item img { max-width: 100%; height: auto; border-radius: var(--media-radius); }
.newsletter-item blockquote { margin: 0; padding-left: .8em; border-left: 3px solid var(--line); }
.newsletter-item cite { font-style: normal; font-weight: 600; }

/* ---------- Prose: an article page's body and a newsletter's, in rich_html's normal form ----------
   Classes only (the page policy is style-src 'self'; rich_html never writes a style): three
   heading levels under the page or issue title, align-center/align-right on a top-level
   paragraph, heading or picture, align-left on a narrower picture only, and width-20..width-90
   on a picture. A blank line is <p><br></p>, one line high by itself. A narrower picture is
   centred unless aligned left (the start edge) or right, never floated; its caption is inside it, so it follows the picture's width. */
.prose h3, .prose h4 { margin-block: 1rem .5rem; }
.prose h3, .prose h4, .entry.newsletter .entry-body > h4 { font: var(--display); }
.prose h3 { font-size: 18px; }
.prose h4, .entry.newsletter .entry-body > h4 { font-size: 16px; }
.prose > .align-center, .entry.newsletter .entry-body > .align-center { text-align: center; }
.prose > .align-right, .entry.newsletter .entry-body > .align-right { text-align: right; }
.prose figure { margin: 1rem 0; }
.prose figure img { display: block; width: 100%; height: auto; border-radius: var(--media-radius); }
.prose figcaption { margin-top: .35rem; font: var(--caption); color: var(--ink-dim); }
.prose figure[class*="width-"] { margin-inline: auto; }
.prose figure.align-left { margin-inline: 0 auto; }
.prose figure.align-right { margin-inline: auto 0; }
.prose figure.width-20 { width: 20%; } .prose figure.width-30 { width: 30%; }
.prose figure.width-40 { width: 40%; } .prose figure.width-50 { width: 50%; }
.prose figure.width-60 { width: 60%; } .prose figure.width-70 { width: 70%; }
.prose figure.width-80 { width: 80%; } .prose figure.width-90 { width: 90%; }

/* ---------- Listed feeds: a descriptor and its request link, never entries ---------- */
.listed ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.listed li, .listed.locked { display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.listed-kind { margin: 0; color: var(--ink-dim); font: var(--meta); }
.listed-description { margin: 0; white-space: pre-line; }
.listed-request { align-self: flex-start; }

:root[data-feed-layout="single"] body { max-width: 52rem; }
:root[data-feed-layout="single"] .entries { grid-template-columns: minmax(0,1fr); grid-auto-rows: auto; }
:root[data-feed-layout="single"] .text-long:not(.open):not(.entry-full) .entry-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; position: relative; }
:root[data-feed-layout="single"] .text-long:not(.open):not(.entry-full) .entry-body::after { content: ""; position: absolute; inset: auto 0 0; height: 5rem; background: linear-gradient(transparent, var(--surface)); pointer-events: none; }
:root[data-feed-layout="single"] .hero { max-height: 14rem; }
.entry-announced { font: var(--meta); color: var(--ink-muted); }
@media (max-width: 63.98rem) {
  :root[data-feed-layout="grid"] .entries { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .entry.compact { padding: 8px; gap: 6px; cursor: pointer; }
  .compact .entry-meta .avatar { width: 22px; height: 22px; font-size: 11px; }
  .compact-picture { position: relative; margin: 0; aspect-ratio: 1; border-radius: 4px; overflow: hidden; }
  .compact-picture img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
  .compact-count { position: absolute; bottom: 4px; right: 4px; background: var(--scrim); color: #fff; border-radius: 4px; padding: 2px 4px; font: var(--meta); font-size: 10px; }
  .compact-title { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .compact-overlay { position: absolute; inset: auto 0 0; padding: 4px; background: var(--scrim); color: #fff; }
  .compact .said { padding: 8px; min-height: 5rem; }
  .compact .said p { font: 400 13px/1.35 system-ui, sans-serif; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
  .compact .entry-decorator { padding: 4px; font-size: 10px; white-space: nowrap; overflow: hidden; display: block; text-overflow: ellipsis; }
  .compact-signature { font: var(--meta); font-size: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
.avatar-fallback { display: grid; place-items: center; background: var(--surface-raised); }
.month { width: 100%; table-layout: fixed; border-collapse: collapse; }
.month caption { text-align: left; padding-block: .5rem 1rem; }
.month-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.month-name { font: var(--display); font-size: 20px; }
.month-zone { font: var(--meta); color: var(--ink-muted); }
.month-navigation { margin-left: auto; display: flex; gap: 8px; }
.month-navigation a { font: var(--meta); font-weight: 600; text-decoration: none; padding: 6px 10px; border: 1px solid var(--accent); border-radius: var(--media-radius); background: var(--surface-raised); }
.month-chevron { display: none; }
.month th { font: var(--meta); color: var(--ink-dim); padding: .5rem; text-align: left; }
.month-day { border: 1px solid var(--line); height: 7rem; vertical-align: top; padding: 4px; }
.month-day.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.month-day.outside { background: var(--surface-raised); }
.month-day.selected { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.month-number, .month-entry, .month-more { background: none; color: var(--ink); border: 0; }
.month-number { min-width: 32px; min-height: 32px; padding: 4px; font: var(--meta); font-weight: 600; }
.today .month-number { background: var(--accent); color: var(--surface); border-radius: 50%; }
.month-entry { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; white-space: nowrap; overflow: hidden; font: var(--meta); padding: 4px; color: var(--accent); }
.month-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.month-time { color: var(--ink-dim); flex: none; }
.month-entry-title { overflow: hidden; text-overflow: ellipsis; }
.month-more { font: var(--meta); color: var(--ink-dim); }
.month-day-panel { margin-block: 1rem; padding: 1rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.month-day-panel h3 { margin-bottom: .75rem; font: var(--display); font-size: 20px; }
.month-day-count { margin-left: .75rem; font: var(--meta); color: var(--ink-muted); }
.month-day.past .month-number, .month-entry.past { opacity: .65; }
.month-dots { display: none; }
@media (max-width: 39.98rem) {
  .month-day { height: 3.5rem; padding: 3px; }
  .month-entry, .month-more, .month-link-label { display: none; }
  .month-chevron { display: inline; }
  .month-zone { order: 3; flex-basis: 100%; }
  .month-number { padding: 0; font-size: 12px; }
  .month-dots { display: flex; flex-wrap: wrap; gap: 3px; padding: 2px; }
  .month-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .month-dots i.past { opacity: .5; }
  .month-day-panel { padding: 12px; }
  .month-day-panel h3 { font-size: 17px; }
}