@acms-subir/core 0.0.1

package/src/styles/site.css

@@ -0,0 +1,427 @@
+/* Wrapped in @layer base so theme CSS (inlined unlayered by Site.astro)
+   always wins ties, regardless of bundle order in the built head. */
+@layer base {
+*, *::before, *::after { box-sizing: border-box; }
+/* Base values only — the active theme (src/themes/) overrides these via an
+   inlined :root block emitted by Site.astro, plus its own theme.css. */
+:root {
+  --bg: #faf9f7;
+  --ink: #1e1f24;
+  --muted: #6b6e78;
+  --line: #e5e3de;
+  --accent: #4f46e5;
+  --panel: #ffffff;
+  --soft: #eceae5;
+  --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
+  --content-width: 760px;
+}
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-size: 17px;
+  line-height: 1.65;
+  -webkit-font-smoothing: antialiased;
+}
+.site-header {
+  max-width: var(--content-width);
+  margin: 0 auto;
+  padding: 28px 20px 0;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.site-header .brand { font-weight: 700; font-size: 18px; text-decoration: none; color: var(--ink); display: flex; align-items: center; }
+.site-header .brand img.brand-logo { height: 30px; width: auto; display: block; }
+.site-nav { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
+.site-nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
+.site-nav a:hover, .site-nav a[aria-current='page'] { color: var(--ink); }
+
+/* language switcher — rendered when acms({ i18n }) lists >1 locale */
+.lang-switch { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; }
+.lang-switch a { padding: 2px 11px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
+.lang-switch a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
+.lang-switch a.on, .lang-switch a.on:hover { background: var(--ink); color: var(--bg, #fff); }
+main.site-main { max-width: var(--content-width); margin: 0 auto; padding: 24px 20px 80px; }
+.site-footer { max-width: var(--content-width); margin: 0 auto; padding: 24px 20px 48px; color: var(--muted); font-size: 13.5px; border-top: 1px solid var(--line); }
+.site-footer p { margin: 0 0 6px; }
+.site-footer p:last-child { margin-bottom: 0; }
+.site-footer a { color: var(--muted); text-decoration-color: var(--line); }
+.site-footer a:hover { color: var(--ink); }
+a { color: var(--accent); }
+img { max-width: 100%; height: auto; }
+h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.25; letter-spacing: -0.01em; }
+pre { background: #23242a; color: #e8e9ed; border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 14px; position: relative; }
+/* language badge + dark token palette, emitted by src/lib/highlightCode.ts */
+pre[data-language]::before {
+  content: attr(data-language); position: absolute; top: 8px; right: 12px;
+  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #8a90a3;
+  font-family: var(--font-body, inherit);
+}
+pre .hljs-comment, pre .hljs-quote { color: #8b949e; font-style: italic; }
+pre .hljs-keyword, pre .hljs-selector-tag, pre .hljs-doctag, pre .hljs-template-tag, pre .hljs-operator { color: #ff7b72; }
+pre .hljs-string, pre .hljs-regexp, pre .hljs-addition { color: #a5d6ff; }
+pre .hljs-title, pre .hljs-section { color: #d2a8ff; }
+pre .hljs-number, pre .hljs-literal, pre .hljs-attr, pre .hljs-variable, pre .hljs-template-variable,
+pre .hljs-type, pre .hljs-selector-class, pre .hljs-selector-id, pre .hljs-meta,
+pre .hljs-attribute, pre .hljs-property { color: #79c0ff; }
+pre .hljs-name, pre .hljs-tag, pre .hljs-bullet { color: #7ee787; }
+pre .hljs-built_in, pre .hljs-symbol { color: #ffa657; }
+pre .hljs-deletion { color: #ffa198; }
+pre .hljs-emphasis { font-style: italic; }
+pre .hljs-strong { font-weight: 700; }
+code { font-family: ui-monospace, 'SF Mono', monospace; font-size: 0.9em; }
+p code { background: var(--soft); padding: 2px 5px; border-radius: 4px; }
+blockquote { margin: 16px 0; padding: 4px 18px; border-left: 3px solid var(--line); color: var(--muted); }
+table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; line-height: 1.5; }
+th, td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
+th { background: var(--soft); font-weight: 600; }
+th p, td p { margin: 0; }
+/* saved empty cells serialize as <p></p> — keep them one line tall */
+th p:empty::before, td p:empty::before { content: '\00a0'; }
+
+/* widgets */
+.w-hero { padding: 56px 0 40px; }
+.w-hero.center { text-align: center; }
+.w-hero h1 { font-size: 40px; margin: 0 0 10px; }
+.w-hero .sub { font-size: 19px; color: var(--muted); margin: 0 auto 22px; max-width: 55ch; }
+.w-hero.center .sub { margin-left: auto; margin-right: auto; }
+.w-btn { display: inline-block; padding: 10px 22px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 15px; }
+.w-btn.primary { background: var(--accent); color: #fff; }
+.w-btn.outline { border: 1.5px solid var(--accent); color: var(--accent); }
+.w-image figcaption { color: var(--muted); font-size: 14px; margin-top: 6px; }
+.w-spacer.s { height: 16px; } .w-spacer.m { height: 40px; } .w-spacer.l { height: 80px; }
+.w-embed iframe, .w-custom iframe { width: 100%; border: 0; border-radius: 10px; display: block; }
+
+/* blog */
+.post-list { list-style: none; padding: 0; margin: 0; }
+.post-list li { padding: 18px 0; border-bottom: 1px solid var(--line); }
+.post-list a { font-size: 20px; font-weight: 650; text-decoration: none; color: var(--ink); }
+.post-list a:hover { color: var(--accent); }
+.post-meta { color: var(--muted); font-size: 14px; margin-top: 2px; }
+.tag { display: inline-block; background: var(--soft); color: var(--muted); font-size: 12.5px; padding: 2px 9px; border-radius: 99px; margin-right: 6px; text-decoration: none; }
+a.tag:hover { background: var(--accent); color: #fff; }
+.byline { color: var(--muted); }
+.tag-kicker { text-transform: uppercase; letter-spacing: 0.09em; font-size: 12px; color: var(--accent); margin: 24px 0 0; font-weight: 600; }
+.tag-kicker + h1 { margin-top: 4px; }
+.tag-desc { color: var(--muted); font-size: 17px; margin-top: -8px; }
+.post-cover {
+  display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover;
+  border-radius: 12px; margin: 12px 0 28px; background: var(--soft);
+}
+
+/* links page */
+.links-page { max-width: 520px; margin: 0 auto; text-align: center; padding-top: 32px; }
+.links-page h1 { margin-bottom: 4px; }
+.links-avatar {
+  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
+  margin: 0 auto 14px; display: block; box-shadow: 0 4px 16px rgb(30 31 36 / 12%);
+}
+.links-page .tagline { color: var(--muted); margin: 0 0 32px; white-space: pre-wrap; }
+.link-btn {
+  display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: 8px;
+  margin: 14px 0; padding: 15px 18px;
+  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
+  color: var(--ink); font-weight: 600; text-decoration: none; font-size: 16px;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+.link-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgb(30 31 36 / 8%); }
+.link-btn .link-label { grid-column: 2; }
+.link-ico { grid-column: 1; display: grid; place-items: center; width: 28px; height: 28px; }
+.link-ico svg { width: 22px; height: 22px; fill: currentColor; }
+.link-ico img { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; display: block; }
+.link-ico-emoji { font-size: 20px; line-height: 1; }
+.link-heading { font-size: 20px; margin: 26px 0 2px; letter-spacing: -0.01em; }
+.link-text { color: var(--muted); font-size: 15px; margin: 10px 0; white-space: pre-wrap; }
+.link-spacer { width: 100%; }
+.link-html { margin: 14px 0; text-align: initial; }
+.link-html > :first-child { margin-top: 0; }
+.link-html > :last-child { margin-bottom: 0; }
+
+}
+
+@layer base {
+  /* managed footer navigation areas */
+  .footer-nav, .social-nav { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-bottom: 12px; }
+  .footer-nav a, .social-nav a { color: var(--muted); text-decoration: none; font-size: 13.5px; }
+  .footer-nav a:hover, .social-nav a:hover { color: var(--ink); }
+  .social-nav a { text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
+}
+
+@layer base {
+  /* pagination + tag landing pages */
+  .pager { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; font-size: 14.5px; }
+  .pager a { text-decoration: none; }
+  .pager-status { color: var(--muted); font-size: 13px; }
+  .tag-hero { margin-bottom: 8px; }
+  .post-item { display: flex; gap: 18px; align-items: flex-start; }
+  .post-thumb { flex: 0 0 150px; }
+  .post-thumb img { width: 150px; aspect-ratio: 1.6 / 1; object-fit: cover; border-radius: 8px; background: var(--soft); display: block; }
+  @media (max-width: 560px) { .post-item { flex-direction: column; } .post-thumb, .post-thumb img { width: 100%; flex-basis: auto; } }
+}
+
+@layer base {
+  /* dynamic post-list blocks (expanded at request time) */
+  .dyn-postlist { display: grid; gap: 22px; margin: 28px 0; }
+  .dyn-postlist.is-empty p { color: var(--muted); border: 1.5px dashed var(--line); border-radius: 8px; padding: 22px; text-align: center; font-size: 14px; margin: 0; }
+  .dyn-postlist .dp-meta { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; }
+  .dyn-postlist .dp-title { margin: 4px 0 4px; font-size: 21px; line-height: 1.25; }
+  .dyn-postlist .dp-title a { color: var(--ink); text-decoration: none; }
+  .dyn-postlist .dp-title a:hover { color: var(--accent); }
+  .dyn-postlist .dp-excerpt { color: var(--muted); font-size: 15px; margin: 2px 0 0; }
+  .dyn-postlist .dp-thumb img { width: 100%; border-radius: 8px; object-fit: cover; background: var(--soft); display: block; }
+
+  .dyn-postlist[data-layout='list'] .dp-item { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
+  .dyn-postlist[data-layout='list'] .dp-item:last-child { border-bottom: none; padding-bottom: 0; }
+  .dyn-postlist[data-layout='list'] .dp-thumb { flex: 0 0 150px; }
+  .dyn-postlist[data-layout='list'] .dp-thumb img { aspect-ratio: 1.6 / 1; }
+
+  .dyn-postlist[data-layout='grid'] { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
+  .dyn-postlist[data-layout='grid'] .dp-thumb img { aspect-ratio: 1.9 / 1; margin-bottom: 8px; }
+  .dyn-postlist[data-layout='grid'] .dp-title { font-size: 19px; }
+
+  .dyn-postlist[data-layout='feature'] .dp-thumb img { aspect-ratio: 2 / 1; margin-bottom: 10px; }
+  .dyn-postlist[data-layout='feature'] .dp-title { font-size: 28px; }
+
+  @media (max-width: 560px) {
+    .dyn-postlist[data-layout='list'] .dp-item { flex-direction: column; }
+    .dyn-postlist[data-layout='list'] .dp-thumb { flex-basis: auto; width: 100%; }
+  }
+}
+
+@layer base {
+  /* author profiles + post page extras */
+  .author-hero { display: flex; align-items: center; gap: 20px; margin: 8px 0 20px; }
+  .author-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--soft); }
+  .author-initial { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 28px; color: var(--muted); }
+  .author-hero h1 { margin: 2px 0 4px; }
+
+  .post-share { display: flex; align-items: center; gap: 10px; margin: 36px 0 0; }
+  .post-share-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11.5px; color: var(--muted); margin-right: 2px; }
+  .post-share a, .post-share-copy {
+    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
+    border-radius: 50%; border: 1px solid var(--line); color: var(--muted); background: none; cursor: pointer;
+  }
+  .post-share a:hover, .post-share-copy:hover { color: var(--ink); border-color: var(--muted); }
+  .post-share-copy.is-copied { color: var(--accent); border-color: var(--accent); }
+
+  .author-card {
+    display: flex; gap: 18px; align-items: flex-start;
+    border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px;
+  }
+  .author-card .author-avatar { width: 64px; height: 64px; }
+  .author-card-name { font-size: 22px; margin: 4px 0 4px; }
+  .author-card-name a { color: var(--ink); text-decoration: none; }
+  .author-card-name a:hover { color: var(--accent); }
+  .author-card-bio { color: var(--muted); font-size: 15px; margin: 0 0 8px; }
+  .author-card-more { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11.5px; text-decoration: none; }
+
+  .related { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 8px; }
+  .related-title { font-size: 24px; }
+}
+
+@layer base {
+  /* post page structure: header / cover / body+share / author / related.
+     Base = single column with share row after the body; themes can turn
+     .post-layout into a grid with a share rail. */
+  .post-header { margin-bottom: 4px; }
+  .post-kicker { margin: 24px 0 6px; }
+  .post-kicker:empty { display: none; }
+  .post-layout { margin-top: 8px; }
+  .post-content > :first-child { margin-top: 0; }
+
+  .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
+  .related-card h3 { font-size: 18px; line-height: 1.3; margin: 4px 0 4px; }
+  .related-card h3 a { color: var(--ink); text-decoration: none; }
+  .related-card h3 a:hover { color: var(--accent); }
+  .related-thumb img { width: 100%; aspect-ratio: 1.7 / 1; object-fit: cover; border-radius: 8px; background: var(--soft); display: block; margin-bottom: 8px; }
+  .related-excerpt { color: var(--muted); font-size: 13.5px; margin: 2px 0 0; }
+}
+
+@layer base {
+  /* feature-image styles, driven by theme post.cover / Design overrides */
+  .post-cover.is-full {
+    width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: 0;
+    border-radius: 0; aspect-ratio: auto; max-height: 62vh;
+  }
+}
+
+@layer base {
+  /* overlay feature image: full-bleed hero, bottom gradient scrim for
+     legibility (fades out ~60% up so most of the image stays clean),
+     title/meta stacked on top */
+  .post-hero {
+    position: relative; width: 100vw; margin-left: calc(50% - 50vw);
+    min-height: clamp(340px, 62vh, 660px);
+    display: flex; align-items: flex-end; justify-content: center;
+    margin-bottom: 40px;
+  }
+  .post-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+  .post-hero-scrim {
+    position: absolute; inset: 0;
+    background: linear-gradient(to top, rgb(0 0 0 / 74%) 0%, rgb(0 0 0 / 34%) 32%, transparent 60%);
+  }
+  .post-hero-content {
+    position: relative; width: 100%; max-width: var(--content-width);
+    padding: 0 20px 44px; text-align: center; color: #fff;
+  }
+  .post-hero-content h1 { color: #fff; margin: 6px 0 10px; text-shadow: 0 1px 16px rgb(0 0 0 / 40%); }
+  .post-hero-content .post-meta { color: rgb(255 255 255 / 85%); }
+  .post-hero-content .byline a { color: rgb(255 255 255 / 85%); }
+  .post-hero-content .byline a:hover { color: #fff; }
+  .post-hero-content .tag { background: rgb(255 255 255 / 16%); color: rgb(255 255 255 / 90%); }
+  .post-hero-content a.tag:hover { background: rgb(255 255 255 / 30%); color: #fff; }
+  @media (max-width: 640px) { .post-hero { min-height: 300px; } .post-hero-content { padding-bottom: 30px; } }
+}
+
+/* announcement bar */
+.announcement-bar {
+  display: flex; align-items: center; justify-content: center; gap: 10px;
+  background: var(--ink); color: var(--bg);
+  font-size: 14px; padding: 9px 40px; text-align: center; position: relative;
+}
+.announcement-bar a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
+.announcement-x {
+  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
+  background: none; border: 0; color: inherit; opacity: 0.7; cursor: pointer;
+  font-size: 12px; padding: 6px;
+}
+.announcement-x:hover { opacity: 1; }
+
+/* Calendar card (dynamic block): month / week / upcoming views rendered by
+   src/lib/calendar/render.ts. Everything is driven by the scoped --cal-*
+   custom properties (defaulting to theme tokens) and stable .pc-cal-* class
+   hooks — the widget's public styling API. Theme CSS and Settings → Code
+   injection are unlayered, so either can override any of this without
+   !important. */
+@layer base {
+  .pc-calendar {
+    --cal-bg: var(--panel);
+    --cal-ink: var(--ink);
+    --cal-muted: var(--muted);
+    --cal-line: var(--line);
+    --cal-accent: var(--accent);
+    --cal-soft: var(--soft);
+    --cal-radius: 12px;
+    --cal-dot-2: #2f9e6e; --cal-dot-3: #b3541e; --cal-dot-4: #8250df; --cal-dot-5: #c2255c; --cal-dot-6: #0c8599;
+    margin: 28px 0;
+  }
+  .pc-cal-heading { font-family: var(--font-heading); font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: var(--cal-ink); margin: 0 0 3px; }
+  .pc-cal-sub { color: var(--cal-muted); font-size: 14px; margin: 0 0 16px; }
+  .pc-cal-frame { position: relative; background: var(--cal-bg); border: 1px solid var(--cal-line); border-radius: var(--cal-radius); }
+
+  .pc-cal-toolbar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--cal-line); }
+  .pc-cal-title { font-weight: 700; font-size: 15.5px; color: var(--cal-ink); margin-right: auto; }
+  .pc-cal-btn {
+    font: 600 12.5px/1 var(--font-body); color: var(--cal-ink); background: transparent;
+    border: 1px solid var(--cal-line); border-radius: 8px; padding: 7px 11px; cursor: pointer;
+  }
+  .pc-cal-btn:hover { border-color: var(--cal-accent); color: var(--cal-accent); }
+
+  /* month view — minmax(0, 1fr) so long event names can never stretch a
+     column: all seven stay exactly equal and chips truncate instead */
+  .pc-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
+  .pc-cal-dow {
+    font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
+    color: var(--cal-muted); text-align: center; padding: 10px 0 8px; border-bottom: 1px solid var(--cal-line);
+  }
+  .pc-cal-day { min-width: 0; min-height: 76px; border-bottom: 1px solid var(--cal-line); border-right: 1px solid var(--cal-line); padding: 5px 4px; font-size: 12px; }
+  .pc-cal-day:nth-child(7n + 7) { border-right: none; }
+  .pc-cal-grid .pc-cal-day:nth-last-child(-n + 7) { border-bottom: none; }
+  .pc-cal-date {
+    display: flex; width: fit-content; margin: 0 auto; align-items: center; justify-content: center;
+    min-width: 22px; height: 22px; border-radius: 999px; font-weight: 600; color: var(--cal-ink); padding: 0 4px;
+  }
+  .pc-cal-day.is-out .pc-cal-date { color: var(--cal-muted); opacity: 0.55; }
+  .pc-cal-day.is-today .pc-cal-date, .pc-cal-wday.is-today .pc-cal-date { background: var(--cal-accent); color: var(--cal-bg); }
+
+  /* event chips (buttons: they open the details popover). One line, title
+     truncates with an ellipsis — chips never wrap or widen their column. The
+     color dot only appears on multi-calendar cards (.is-multi), where it
+     carries meaning; on a single calendar it's just noise. */
+  .pc-cal-event {
+    display: flex; width: 100%; min-width: 0; align-items: center; gap: 5px; margin-top: 3px; padding: 2px 5px;
+    border: 0; border-radius: 6px; background: none; color: var(--cal-ink);
+    font-family: var(--font-body); font-size: 11px; line-height: 1.5; text-align: left; cursor: pointer;
+  }
+  .pc-cal-event:hover { background: var(--cal-soft); }
+  .pc-cal-event::before { content: ''; display: none; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 99px; background: var(--cal-dot, var(--cal-accent)); }
+  .pc-calendar.is-multi .pc-cal-event::before { display: block; }
+  [data-cal='1'] { --cal-dot: var(--cal-dot-2); }
+  [data-cal='2'] { --cal-dot: var(--cal-dot-3); }
+  [data-cal='3'] { --cal-dot: var(--cal-dot-4); }
+  [data-cal='4'] { --cal-dot: var(--cal-dot-5); }
+  [data-cal='5'] { --cal-dot: var(--cal-dot-6); }
+  .pc-cal-event b { font-weight: 500; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .pc-cal-event .t { color: var(--cal-muted); flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
+  .pc-cal-event .t:empty { display: none; }
+
+  /* week view */
+  .pc-cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
+  .pc-cal-wday { min-width: 0; min-height: 150px; border-right: 1px solid var(--cal-line); padding: 10px 6px; }
+  .pc-cal-wday:last-child { border-right: none; }
+  .pc-cal-wday .pc-cal-dow { display: block; border-bottom: none; padding: 0; }
+  .pc-cal-wday .pc-cal-date { margin: 2px auto 4px; font-size: 15px; }
+  .pc-cal-wday .whead { text-align: center; }
+
+  /* upcoming view */
+  .pc-cal-agenda { list-style: none; margin: 0; padding: 6px 0; }
+  .pc-cal-agenda li + li { border-top: 1px solid var(--cal-line); }
+  .pc-cal-row {
+    display: flex; width: 100%; gap: 14px; align-items: baseline; padding: 11px 16px;
+    border: 0; background: none; color: var(--cal-ink); font-family: var(--font-body);
+    font-size: 13.5px; text-align: left; cursor: pointer;
+  }
+  .pc-cal-row:hover { background: var(--cal-soft); }
+  .pc-cal-row .d {
+    flex: 0 0 96px; font-weight: 700; font-size: 12px; color: var(--cal-muted);
+    text-transform: uppercase; letter-spacing: 0.05em;
+  }
+  .pc-calendar.is-multi .pc-cal-row .d::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 99px; background: var(--cal-dot, var(--cal-accent)); margin-right: 7px; vertical-align: 1px; }
+  .pc-cal-row .t { color: var(--cal-muted); font-variant-numeric: tabular-nums; margin-left: auto; font-size: 12.5px; }
+
+  /* footer: the Google Calendar link lives alone on a quiet line */
+  .pc-cal-foot { display: flex; justify-content: flex-end; padding: 9px 16px; border-top: 1px solid var(--cal-line); }
+  .pc-cal-open { font-size: 12px; font-weight: 600; color: var(--cal-muted); text-decoration: none; }
+  .pc-cal-open:hover { color: var(--cal-accent); }
+
+  /* event details popover */
+  .pc-cal-pop {
+    position: absolute; z-index: 5; max-width: 300px; padding: 12px 14px 12px;
+    background: var(--cal-bg); border: 1px solid var(--cal-line); border-radius: 10px;
+    box-shadow: 0 10px 28px rgb(0 0 0 / 14%); font-size: 12.5px; color: var(--cal-ink);
+  }
+  .pc-cal-pop-title { display: block; font-size: 13.5px; padding-right: 20px; }
+  .pc-cal-pop-when { color: var(--cal-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
+  .pc-cal-pop-loc { color: var(--cal-muted); margin-top: 3px; }
+  .pc-cal-pop-desc { margin: 8px 0 0; color: var(--cal-ink); line-height: 1.5; white-space: pre-line; }
+  .pc-cal-pop-x {
+    position: absolute; top: 6px; right: 6px; border: 0; background: none; color: var(--cal-muted);
+    font-size: 15px; line-height: 1; padding: 4px; cursor: pointer;
+  }
+  .pc-cal-pop-x:hover { color: var(--cal-ink); }
+
+  .pc-cal-empty { color: var(--cal-muted); font-size: 14px; text-align: center; padding: 26px 16px; margin: 0; }
+
+  @media (max-width: 640px) {
+    /* month cells are too narrow for text: events collapse to tappable dots
+       under the date, like the Google mobile grid */
+    .pc-cal-day { min-height: 52px; padding: 4px 2px; }
+    .pc-cal-grid .pc-cal-event {
+      width: 7px; height: 7px; padding: 0; margin: 4px auto 0; border-radius: 99px;
+      background: var(--cal-dot, var(--cal-accent)); overflow: hidden;
+    }
+    .pc-cal-grid .pc-cal-event .t, .pc-cal-grid .pc-cal-event b, .pc-cal-grid .pc-cal-event::before { display: none; }
+    .pc-cal-grid .pc-cal-event:nth-of-type(n + 4) { display: none; } /* max 3 dots per day */
+    .pc-cal-week { grid-template-columns: 1fr; }
+    .pc-cal-wday { min-height: 0; border-right: none; border-bottom: 1px solid var(--cal-line); display: flex; gap: 12px; padding: 10px 12px; }
+    .pc-cal-wday:last-child { border-bottom: none; }
+    .pc-cal-wday .whead { flex: 0 0 64px; }
+    .pc-cal-wday .wevs { flex: 1; min-width: 0; }
+    .pc-cal-row .d { flex-basis: 84px; }
+  }
+}

package/src/themes/editorial/templates/home.astro

@@ -0,0 +1,127 @@
+---
+// Editorial theme — coded homepage. This is the "agent path": edit this file
+// (and theme.css) to redesign the homepage; the words stay UI-editable because
+// the isHome page's rendered body is injected as the hero. Sections are driven
+// by data: `featured` posts, latest, and the `projects` / `log` tags.
+import type { Page, Post, Settings, Tag } from '../../../lib/schema';
+import { slugify } from '../../../lib/schema';
+import { formatDate } from '../../../lib/dates';
+import { CONTENT, postsIndexUrl, postUrl, tagUrl } from '../../../lib/content';
+
+interface Props {
+  settings: Settings;
+  page: Page | null;
+  posts: Post[]; // published, newest first
+  tags: Tag[];
+}
+const { page, posts, tags, settings } = Astro.props;
+
+const tagSlug = (name: string) =>
+  tags.find((t) => t.name.toLowerCase() === name.toLowerCase())?.slug ?? slugify(name);
+const hasTag = (p: Post, name: string) => p.tags.some((t) => t.toLowerCase() === name.toLowerCase());
+
+// single-feature rule: at most one post is featured at a time
+const feature = posts.find((p) => p.featured) ?? null;
+const latest = posts.filter((p) => p.id !== feature?.id).slice(0, 4);
+const projects = posts.filter((p) => hasTag(p, 'projects') || hasTag(p, 'project'));
+const log = posts.filter((p) => hasTag(p, 'log') || hasTag(p, 'the log'));
+const sectioned = new Set([...(feature ? [feature] : []), ...projects, ...log].map((p) => p.id));
+const other = posts.filter((p) => !sectioned.has(p.id));
+
+const fmt = (ts: number | null) => formatDate(ts, settings, 'short');
+const readMins = (p: Post) =>
+  Math.max(1, Math.round((p.bodyHtml || p.body).replace(/<[^>]+>/g, ' ').split(/\s+/).filter(Boolean).length / 220));
+// date and read time joined without stray separators when the date is missing
+const metaLine = (p: Post) => [fmt(p.publishedAt), `${readMins(p)} min read`].filter(Boolean).join(' · ');
+---
+
+<div class="ed-home">
+  {page?.bodyHtml && <section class="ed-hero" set:html={page.bodyHtml} />}
+
+  {feature && (
+    <section class="ed-section ed-feature">
+      <div class="ed-sechead"><h2>Featured</h2><span class="ed-meta">01</span></div>
+      <article>
+        {feature.cover && (
+          <a class="ed-imglink" href={postUrl(feature.slug)}><img src={feature.cover} alt={feature.coverAlt} loading="lazy" /></a>
+        )}
+        <div class="ed-feature-text">
+          <div class="ed-meta">{metaLine(feature)}</div>
+          <h3><a href={postUrl(feature.slug)}>{feature.title}</a></h3>
+          {feature.excerpt && <p class="ed-excerpt">{feature.excerpt}</p>}
+        </div>
+      </article>
+    </section>
+  )}
+
+  <section class="ed-section">
+    <div class="ed-sechead"><h2>Latest</h2><a href={postsIndexUrl()}>View all {CONTENT.posts.plural.toLowerCase()}</a></div>
+    {latest.length === 0 ? (
+      <div class="ed-empty">No {CONTENT.posts.plural.toLowerCase()} yet.</div>
+    ) : (
+      <ul class="ed-list">
+        {latest.map((p) => (
+          <li class="ed-item">
+            <div class="ed-meta">{metaLine(p)}</div>
+            <h3><a href={postUrl(p.slug)}>{p.title}</a></h3>
+            {p.excerpt && <p>{p.excerpt}</p>}
+          </li>
+        ))}
+      </ul>
+    )}
+  </section>
+
+  {(projects.length > 0 || log.length > 0) && (
+    <div class="ed-cols">
+      {projects.length > 0 && (
+        <section class="ed-section">
+          <div class="ed-sechead"><h2>Projects</h2><a href={tagUrl(tagSlug('projects'))}>View all</a></div>
+          <div class="ed-cards">
+            {projects.slice(0, 3).map((p) => (
+              <article class="ed-card">
+                {p.cover && (
+                  <a class="ed-imglink" href={postUrl(p.slug)}><img src={p.cover} alt={p.coverAlt} loading="lazy" /></a>
+                )}
+                <div class="ed-meta">{metaLine(p)}</div>
+                <h3><a href={postUrl(p.slug)}>{p.title}</a></h3>
+                {p.excerpt && <p class="ed-excerpt">{p.excerpt}</p>}
+              </article>
+            ))}
+          </div>
+        </section>
+      )}
+      {log.length > 0 && (
+        <section class="ed-section">
+          <div class="ed-sechead"><h2>The Log</h2><a href={tagUrl(tagSlug('log'))}>View all</a></div>
+          <div class="ed-cards">
+            {log.slice(0, 3).map((p) => (
+              <article class="ed-card">
+                {p.cover && (
+                  <a class="ed-imglink" href={postUrl(p.slug)}><img src={p.cover} alt={p.coverAlt} loading="lazy" /></a>
+                )}
+                <div class="ed-meta">{metaLine(p)}</div>
+                <h3><a href={postUrl(p.slug)}>{p.title}</a></h3>
+                {p.excerpt && <p class="ed-excerpt">{p.excerpt}</p>}
+              </article>
+            ))}
+          </div>
+        </section>
+      )}
+    </div>
+  )}
+
+  {other.length > 0 && (
+    <section class="ed-section">
+      <div class="ed-sechead"><h2>Other</h2><a href={postsIndexUrl()}>View all {CONTENT.posts.plural.toLowerCase()}</a></div>
+      <ul class="ed-list">
+        {other.slice(0, 4).map((p) => (
+          <li class="ed-item">
+            <div class="ed-meta">{metaLine(p)}</div>
+            <h3><a href={postUrl(p.slug)}>{p.title}</a></h3>
+            {p.excerpt && <p>{p.excerpt}</p>}
+          </li>
+        ))}
+      </ul>
+    </section>
+  )}
+</div>

package/src/themes/editorial/templates/post-minimal.astro

@@ -0,0 +1,50 @@
+---
+// Editorial theme — "minimal" post template, selectable per-post in the
+// editor sidebar. A stripped-back reading view: no cover, no author card, no
+// related section — just the title, a dateline, and the words.
+//
+// Template contract (any templates/post-<name>.astro receives the same):
+//   post     — the Post (title, publishedAt, tags, …)
+//   html     — rendered body HTML, dynamic blocks already expanded
+//   authors  — ordered User[] (may be empty)
+//   settings — site Settings
+//   related  — up to 3 related Post[]
+import type { Post, Settings, User } from '../../../lib/schema';
+import { authorSlug } from '../../../lib/schema';
+
+interface Props {
+  post: Post;
+  html: string;
+  authors: User[];
+  settings: Settings;
+  related: Post[];
+}
+const { post, html, authors } = Astro.props;
+const fmt = (ts: number | null) =>
+  ts ? new Date(ts).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' }) : '';
+---
+
+<article class="tpl-minimal">
+  <header>
+    <h1>{post.title}</h1>
+    <p class="tpl-minimal-meta">
+      {post.publishedAt && <time datetime={new Date(post.publishedAt).toISOString()}>{fmt(post.publishedAt)}</time>}
+      {authors.length > 0 && (
+        <span>
+          {post.publishedAt && ' · '}by{' '}
+          {authors.map((a, i) => (
+            <>{i > 0 && (i === authors.length - 1 ? ' & ' : ', ')}<a href={`/author/${authorSlug(a)}`}>{a.name}</a></>
+          ))}
+        </span>
+      )}
+    </p>
+  </header>
+  <div class="post-content" set:html={html} />
+</article>
+
+<style>
+  .tpl-minimal { max-width: 62ch; margin: 0 auto; }
+  .tpl-minimal h1 { font-size: 2rem; line-height: 1.2; margin: 2rem 0 0.5rem; }
+  .tpl-minimal-meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 2.5rem; }
+  .tpl-minimal-meta a { color: inherit; }
+</style>