/* 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);
  /* The Design's typeface preset sets the faces and sizes; dates, menus and captions stay in
     the system sans whatever it is. */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: Charter, "Iowan Old Style", Georgia, serif;
  --display-face: var(--sans); --body-face: var(--sans);
  --body-size: 17px; --body-lh: 1.5; --display-size: 28px;
  --display: 600 24px/1.25 var(--display-face);
  --body: 400 var(--body-size)/var(--body-lh) var(--body-face);
  --meta: 400 13px/1.3 var(--sans);
  --caption: 400 14px/1.4 var(--sans);
  /* The density preset: padding, gaps, the space between blocks and corner radii. */
  --radius: 8px; --media-radius: 6px; --pad: 16px; --gap: 8px; --block: 1rem;
  font: var(--body);
}
/* ---------- Design presets (`data-*` on <html>, set by the page script from `design`) ---------- */
:root[data-typography="editorial"] { --display-face: var(--serif); --body-face: var(--serif); --body-lh: 1.55; --display-size: 30px; }
:root[data-typography="compact"] { --body-size: 15px; --body-lh: 1.4; --display-size: 24px; }
:root[data-density="airy"] { --pad: 24px; --gap: 12px; --block: 1.5rem; --radius: 12px; }
:root[data-density="dense"] { --pad: 10px; --gap: 6px; --block: .5rem; --radius: 4px; --media-radius: 3px; }
@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; }
/* The menu: one row; the current page underlined. On a phone it scrolls sideways under the
   site head rather than wrapping. The skip link shows only while focused. */
#site-nav { gap: 4px 1rem; margin-block: var(--block); font: 600 15px/1.4 var(--sans); }
#site-nav a { text-decoration: none; padding-block: 6px; }
#site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
#site-nav .skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#site-nav .skip:focus { position: static; width: auto; height: auto; clip-path: none; }
@media (max-width: 39.98rem) {
  #site-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; gap: 14px;
    margin-inline: -1.25rem; padding-inline: 1.25rem; border-bottom: 1px solid var(--line); }
  #site-nav::-webkit-scrollbar { display: none; }
  #site-nav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding-block: 10px; }
}
/* The site head. Home: the avatar beside the title and tagline (`avatar_title`), the title
   alone (`title`), or the banner at full column width above them (`banner`: 3:1 on a desk,
   2:1 on a phone). Every other page: the avatar and title as a link home. */
#site-header { display: flex; flex-direction: column; gap: 12px; }
.site-banner { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--radius); background: var(--surface-raised); }
@media (max-width: 39.98rem) { .site-banner { aspect-ratio: 2 / 1; } }
.site-head { display: flex; align-items: center; gap: 14px; }
.site-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.site-avatar { flex: none; border-radius: 50%; object-fit: cover; }
.site-head .site-avatar { width: 72px; height: 72px; }
h1.site-home { margin: 0; font: 600 18px/1.3 var(--display-face); }
.site-home a { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.site-home a:hover span { text-decoration: underline; }
.site-home .site-avatar { width: 40px; height: 40px; }
/* A static page's own banner, above its title. */
.page-banner { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--radius); background: var(--surface-raised); margin-block: var(--block) 0; }
button { font: inherit; cursor: pointer; padding: .35rem .8rem; }
img, video, audio { max-width: 100%; height: auto; }
pre { overflow-x: auto; }
article, li { margin-block: var(--block); }
h1, h2, h3, p { margin: 0; }
h1 { font: var(--display); font-size: var(--display-size); margin-block: .5rem; }
h2 { font: var(--display); font-size: 20px; margin-block: var(--block) .5rem; }
#site-header p, ul { margin-block: .5rem; }
#site-header .site-title h1, #site-header .site-title p { margin-block: 0; }
#site-header .site-title p { color: var(--ink-dim); }
li time { font: var(--meta); color: var(--ink-muted); }
li > p { margin-block: .25rem 0; color: var(--ink-dim); }
.cards { display: grid; gap: var(--block); }
.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: var(--block); }
: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 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"])) .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); }

/* ---------- 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 ----------
   Both carry `rich-html`: the shared stylesheet (rich-html.css, also the browser editors') sizes
   the three heading levels, aligns and sizes pictures. Here: the site's type, spacing and
   colours around them. */
.prose h3, .prose h4 { margin-block: 1rem .5rem; }
.prose h3, .prose h4, .entry.newsletter .entry-body > h4 { font-weight: 600; line-height: 1.25; }
.prose figure { margin: 1rem 0; }
.prose figure img { border-radius: var(--media-radius); }
.prose figcaption { margin-top: .35rem; font: var(--caption); color: var(--ink-dim); }

/* ---------- 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; }
}

/* ---------- Design presets: cards and links (after every rule they adjust) ---------- */
/* Cards: `bordered` is the 1px line above; `flat` drops it for the raised fill. */
:root[data-cards="flat"] :is(.card, .entry, .month-day-panel) { border-color: transparent; background: var(--surface-raised); }
:root[data-cards="flat"] .entry .said, :root[data-cards="flat"] .entry .gallery, :root[data-cards="flat"] .entry .poster,
/* Links: in the accent (the default), or in the text colour with the underline kept. */
:root[data-links="text"] :is(.prose, .entry-body, .profile-links, .listed, #main > ul, #main > p) a,
:root[data-links="text"] .linkrow { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
:root[data-links="text"] #site-nav a { color: var(--ink); }