@acms-subir/core 0.2.0 → 0.3.0

package/src/styles/site.css

@@ -1,299 +1,577 @@
-/* Wrapped in @layer base so theme CSS (inlined unlayered by Site.astro)
-   always wins ties, regardless of bundle order in the built head. */
+/* Public site styles ("Ink v2" component kit).
+   Wrapped in @layer base so theme CSS (inlined unlayered by Site.astro)
+   always wins ties, regardless of bundle order in the built head.
+
+   Every color, radius and shadow reads a token emitted by lib/themeTokens.ts
+   (light + dark palettes, --r-*, --sh-*, --space). Design rules:
+   - labels are a 7px rounded-square marker + text, never a filled pill
+   - controls are rounded rects (--r-sm/10–12px), never 999px capsules
+   - selection = tinted fill + stronger text, never a colored edge stripe */
 @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. */
+/* Fallbacks only — the active theme's inlined :root block overrides these. */
+:root {
+  --bg: #f6f5f2; --ink: #17181c; --muted: #62646c; --line: #e5e2db; --accent: #3355ff;
+  --panel: #fdfcfa; --soft: #efede8; --accent-ink: #fff; --accent-text: #2344e0;
+  --btn: var(--ink); --btn-ink: var(--bg); --code-bg: #1b1c21;
+  --success: #127442; --danger: #b42f2f; --warning: #8a5f0a;
+  --sh-1: 0 1px 2px rgb(23 24 28 / 5%);
+  --sh-2: 0 1px 2px rgb(23 24 28 / 4%), 0 8px 24px -12px rgb(23 24 28 / 14%);
+  --sh-3: 0 2px 6px rgb(23 24 28 / 6%), 0 24px 48px -20px rgb(23 24 28 / 28%);
+  --font-heading: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --font-body: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
+  --display-weight: 650; --display-tracking: -0.04em; --base-size: 17px;
+  --r-sm: 10px; --r: 16px; --r-lg: 24px; --space: 1;
+  --content-width: 720px; --wide-width: 1080px;
+}
+/* derived — color-mix() so a theme.css override of a base token cascades */
 :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;
+  --ink-2: color-mix(in srgb, var(--ink) 82%, var(--bg));
+  --line-2: color-mix(in srgb, var(--line), var(--ink) 10%);
+  --hover: color-mix(in srgb, var(--ink) 5%, transparent);
+  --accent-soft: color-mix(in srgb, var(--accent) 11%, transparent);
+  --glass: color-mix(in srgb, var(--bg) 76%, transparent);
+  --gutter: 20px;
 }
+html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
 body {
   margin: 0;
   background: var(--bg);
   color: var(--ink);
   font-family: var(--font-body);
-  font-size: 17px;
+  font-size: var(--base-size);
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  overflow-x: clip;
+}
+::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
+a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
+img { max-width: 100%; height: auto; }
+h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; letter-spacing: -0.02em; font-weight: 650; text-wrap: balance; }
+h1 { font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.08; }
+p { text-wrap: pretty; }
+hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }
+.skip-link {
+  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--r-sm);
+  background: var(--btn); color: var(--btn-ink); font-weight: 600; text-decoration: none; transition: top 0.15s;
 }
-.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); }
+.skip-link:focus { top: 12px; }
+
+/* ---- header -------------------------------------------------------------- */
+.site-header { position: sticky; top: 0; z-index: 40; padding: 12px var(--gutter); }
+.site-header-in { max-width: var(--wide-width); margin: 0 auto; display: flex; align-items: center; gap: 16px; min-height: 52px; }
+.site-header[data-style='floating'] .site-header-in {
+  padding: 7px 8px 7px 18px; border-radius: calc(var(--r) + 2px);
+  background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
+  border: 1px solid var(--line); box-shadow: var(--sh-1);
+}
+.site-header[data-style='bar'] {
+  padding: 0 var(--gutter); background: var(--glass); border-bottom: 1px solid var(--line);
+  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
+}
+.site-header[data-style='bar'] .site-header-in { min-height: 64px; }
+.site-header[data-style='minimal'] { position: relative; padding-top: 22px; }
+.site-header[data-style='centered'] { position: relative; padding-top: 26px; }
+.site-header[data-style='centered'] .site-header-in { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
+.site-header[data-style='centered'] .brand { flex-basis: 100%; justify-content: center; font-size: 22px; }
+.site-header[data-style='centered'] .site-nav { margin: 0; }
+
+.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; white-space: nowrap; }
+.brand img.brand-logo { height: 28px; width: auto; display: block; }
+.site-nav { display: flex; gap: 2px; margin: 0 auto; min-width: 0; }
+.site-nav a {
+  padding: 6px 12px; border-radius: 9px; font-size: 14.5px; color: var(--muted); text-decoration: none; white-space: nowrap;
+  transition: background-color 0.15s, color 0.15s;
+}
+.site-nav a:hover { color: var(--ink); background: var(--hover); }
+.site-nav a[aria-current='page'] { color: var(--ink); background: var(--panel); box-shadow: var(--sh-1); font-weight: 550; }
+.site-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
+.site-nav + .site-tools { margin-left: 0; }
+.icon-btn {
+  width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; padding: 0;
+  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+}
+.icon-btn:hover { background: var(--soft); color: var(--ink); }
+.icon-btn svg { display: block; }
+.scheme-toggle .i-sun { display: none; }
+:root[data-scheme='dark'] .scheme-toggle .i-sun { display: block; }
+:root[data-scheme='dark'] .scheme-toggle .i-moon { display: none; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-scheme='light']) .scheme-toggle .i-sun { display: block; }
+  :root:not([data-scheme='light']) .scheme-toggle .i-moon { display: none; }
+}
+.menu-btn { display: none; }
 
 /* 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 */
+.lang-switch { display: inline-flex; background: var(--soft); border-radius: 10px; padding: 3px; }
+.lang-switch a { padding: 3px 9px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; line-height: 1.5; }
+.lang-switch a:hover { color: var(--ink); }
+.lang-switch a.on { background: var(--panel); color: var(--ink); box-shadow: var(--sh-1); }
+
+/* phone menu: bottom sheet */
+dialog.site-menu {
+  margin: auto 0 0; width: 100%; max-width: 100%; max-height: 86vh; border: 0;
+  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
+  border-radius: 22px 22px 0 0; background: var(--panel); color: var(--ink);
+  box-shadow: 0 -20px 40px -12px rgb(0 0 0 / 28%);
+}
+dialog.site-menu[open] { animation: sheet-up 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
+dialog.site-menu::backdrop { background: rgb(10 10 12 / 42%); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
+@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
+.site-menu-grab { width: 38px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 0 auto 12px; }
+.site-menu nav { display: flex; flex-direction: column; gap: 2px; }
+.site-menu nav a {
+  display: flex; justify-content: space-between; align-items: center; padding: 13px 12px; border-radius: 12px;
+  font-size: 17px; font-weight: 550; color: var(--ink); text-decoration: none;
+}
+.site-menu nav a svg { color: var(--muted); }
+.site-menu nav a[aria-current='page'] { background: var(--soft); }
+.site-menu-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 4px 0; border-top: 1px solid var(--line); }
+.site-menu-actions { display: flex; gap: 6px; }
+
+/* ---- page frame ------------------------------------------------------------ */
+main.site-main { max-width: calc(var(--content-width) + 2 * var(--gutter)); margin: 0 auto; padding: calc(28px * var(--space)) var(--gutter) calc(96px * var(--space)); }
+/* break out of the reading column to the wide layout width */
+.wide { margin-inline: calc((100% - min(var(--wide-width), 100vw - 2 * var(--gutter))) / 2); }
+
+/* ---- footer ---------------------------------------------------------------- */
+.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
+.site-footer-in { max-width: calc(var(--wide-width) + 2 * var(--gutter)); margin: 0 auto; padding: 44px var(--gutter) 36px; }
+.site-footer[data-style='simple'] .site-footer-in { max-width: calc(var(--content-width) + 2 * var(--gutter)); padding-top: 28px; }
+.footer-cols { display: grid; grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(0, 1fr)); gap: 32px; padding-bottom: 30px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
+.footer-blurb { margin: 10px 0 16px; max-width: 36ch; color: var(--muted); }
+.footer-col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
+.footer-col h2 { font: 550 13px/1.4 var(--font-body); letter-spacing: 0; color: var(--muted); margin: 0 0 4px; }
+.footer-col a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
+.footer-col a:hover { color: var(--ink); }
+.footer-nav, .social-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 14px; }
+.footer-nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
+.footer-nav a:hover { color: var(--ink); }
+.social-nav { gap: 6px 14px; }
+.social-nav a { color: var(--muted); text-decoration: none; font-size: 13.5px; }
+.social-nav a:hover { color: var(--ink); }
+.social-nav a.has-icon {
+  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
+  background: var(--soft); color: var(--ink-2); transition: background-color 0.15s, color 0.15s;
+}
+.social-nav a.has-icon:hover { background: var(--line); color: var(--ink); }
+.social-nav:has(.has-icon) { gap: 6px; }
+.footer-text { font-size: 13px; }
+.footer-text p { margin: 0 0 4px; }
+.footer-text a { color: var(--muted); }
+.footer-text a:hover { color: var(--ink); }
+
+/* ---- responsive chrome ------------------------------------------------------ */
+@media (max-width: 800px) {
+  :root { --gutter: 16px; }
+  .site-header { padding: 10px 12px; }
+  .site-header[data-style='floating'] .site-header-in { padding: 6px 6px 6px 14px; }
+  .site-header[data-style='centered'] .brand { flex-basis: auto; font-size: 17px; }
+  .site-header[data-style='centered'] .site-header-in { justify-content: space-between; }
+  .site-nav, .site-tools .lang-switch, .site-tools .scheme-toggle { display: none; }
+  .menu-btn { display: grid; }
+  .site-nav + .site-tools { margin-left: auto; }
+  .site-tools .pc-search-trigger { width: 36px; min-width: 0; padding: 0; justify-content: center; border-radius: 50%; }
+  .pc-search-label, .pc-search-hint { display: none; }
+  .footer-cols { grid-template-columns: 1fr 1fr; }
+  .footer-brand { grid-column: 1 / -1; }
+}
+
+/* ---- buttons ---------------------------------------------------------------- */
+.btn, .w-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent;
+  font: 550 15px/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer;
+  transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s, border-color 0.15s, color 0.15s;
+}
+.btn.primary, .w-btn.primary { background: var(--btn); color: var(--btn-ink); box-shadow: var(--sh-2); }
+.btn.primary:hover, .w-btn.primary:hover { transform: translateY(-1px); box-shadow: var(--sh-3); }
+.btn.accent { background: var(--accent); color: var(--accent-ink); }
+.btn.secondary, .w-btn.outline { background: var(--panel); color: var(--ink); border-color: var(--line-2); }
+.btn.secondary:hover, .w-btn.outline:hover { background: var(--soft); }
+.btn.ghost { background: none; color: var(--ink-2); }
+.btn.ghost:hover { background: var(--hover); color: var(--ink); }
+.btn.sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
+.btn svg, .w-btn svg { width: 16px; height: 16px; flex: none; }
+
+/* ---- labels (tags, flags) — marker + text, never a pill ---------------------- */
+.tag {
+  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 550; line-height: 1.4;
+  color: var(--ink-2); text-decoration: none; white-space: nowrap;
+}
+.tag::before { content: ''; width: 7px; height: 7px; flex: none; border-radius: 2px; background: var(--tc, var(--muted)); }
+a.tag:hover { color: var(--ink); }
+.tag.is-accent { color: var(--accent-text); --tc: var(--accent); }
+
+/* ---- notices ------------------------------------------------------------------ */
+.notice { border-radius: var(--r-sm); padding: 10px 14px; font-size: 14.5px; margin: 0 0 18px; background: var(--soft); color: var(--ink); }
+.notice.is-warning { background: color-mix(in srgb, var(--warning) 14%, var(--panel)); }
+.notice.is-danger { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); }
+
+/* ---- prose ------------------------------------------------------------------ */
+pre {
+  background: var(--code-bg); color: #e6e7ec; border-radius: var(--r); padding: 16px 18px; margin: 24px 0;
+  overflow-x: auto; font: 13.5px/1.65 var(--font-mono); position: relative; box-shadow: var(--sh-2);
+}
+/* language strip, emitted by src/lib/highlightCode.ts */
+pre[data-language] { padding-top: 50px; }
 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; }
+  content: attr(data-language); position: absolute; top: 0; left: 0; right: 0;
+  padding: 9px 18px; font: 500 12px/1.5 var(--font-mono); color: #8e919c; text-transform: lowercase;
+  border-bottom: 1px solid rgb(255 255 255 / 7%);
+}
+.code-copy {
+  position: absolute; top: 7px; right: 10px; border: 0; border-radius: 7px; cursor: pointer;
+  background: rgb(255 255 255 / 8%); color: #c8cad2; font: 500 12px/1 var(--font-mono); padding: 5px 9px;
+  opacity: 0; transition: opacity 0.15s, background-color 0.15s;
+}
+pre:hover .code-copy, .code-copy:focus-visible, .code-copy.is-done { opacity: 1; }
+.code-copy:hover { background: rgb(255 255 255 / 14%); }
+pre .hljs-comment, pre .hljs-quote { color: #7d818c; font-style: italic; }
+pre .hljs-keyword, pre .hljs-selector-tag, pre .hljs-doctag, pre .hljs-template-tag, pre .hljs-operator { color: #ff8f7a; }
+pre .hljs-string, pre .hljs-regexp, pre .hljs-addition { color: #a8d4ff; }
+pre .hljs-title, pre .hljs-section { color: #d4b5ff; }
 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-attribute, pre .hljs-property { color: #7fc4ff; }
+pre .hljs-name, pre .hljs-tag, pre .hljs-bullet { color: #85e89d; }
+pre .hljs-built_in, pre .hljs-symbol { color: #ffab70; }
 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); }
-mark { background: #fde58a; border-radius: 3px; padding: 0 2px; }
-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; }
+code { font-family: var(--font-mono); font-size: 0.88em; }
+:not(pre) > code { background: var(--soft); padding: 2px 6px; border-radius: 6px; color: var(--ink); }
+blockquote {
+  margin: 30px 0; padding: 22px 26px 22px 58px; border-radius: var(--r); background: var(--soft);
+  color: var(--ink); font-size: 1.12em; line-height: 1.5; letter-spacing: -0.01em; position: relative;
+}
+blockquote::before {
+  content: '\201C'; position: absolute; left: 20px; top: 10px; font: 600 54px/1 var(--font-heading); color: var(--accent);
+}
+blockquote > :first-child { margin-top: 0; }
+blockquote > :last-child { margin-bottom: 0; }
+mark { background: color-mix(in srgb, #f5c542 48%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
+table {
+  width: 100%; border-collapse: separate; border-spacing: 0; margin: 24px 0; font-size: 15px; line-height: 1.5;
+  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
+}
+th, td { border: 0; border-top: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; }
+tr:first-child > th, tr:first-child > td { border-top: 0; }
+th { background: var(--soft); font-weight: 600; font-size: 14px; color: var(--ink); }
 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'; }
+ul, ol { padding-left: 1.3em; }
+li::marker { color: var(--muted); }
 
-/* widgets */
-.w-hero { padding: 56px 0 40px; }
+/* ---- widgets ------------------------------------------------------------------ */
+.w-hero { padding: calc(64px * var(--space)) 0 calc(44px * var(--space)); }
 .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);
-}
+.w-hero h1 { font-size: clamp(38px, 6.2vw, 64px); line-height: 1.03; margin: 0 0 16px; }
+.w-hero .sub { font-size: 18.5px; line-height: 1.55; color: var(--muted); margin: 0 0 28px; max-width: 54ch; }
+.w-hero.center .sub, .w-hero.center h1 { margin-left: auto; margin-right: auto; }
+.w-hero .w-btn + .w-btn { margin-left: 8px; }
+.w-image figcaption { color: var(--muted); font-size: 14px; margin-top: 10px; text-align: center; }
+.w-image img { border-radius: var(--r); display: block; }
+.w-spacer.s { height: calc(16px * var(--space)); } .w-spacer.m { height: calc(40px * var(--space)); } .w-spacer.l { height: calc(80px * var(--space)); }
+.w-embed iframe, .w-custom iframe { width: 100%; border: 0; border-radius: var(--r); display: block; }
 
-/* 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; }
+/* ---- page heads + empty states --------------------------------------------------- */
+.page-head { padding: calc(20px * var(--space)) 0 calc(22px * var(--space)); }
+.page-head h1 { font-size: clamp(36px, 5vw, 48px); margin: 0 0 8px; }
+.page-lede { color: var(--muted); font-size: 17px; margin: 0; max-width: 62ch; }
+.page-kicker { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--muted); margin: 0 0 10px; }
+.muted-note { color: var(--muted); }
+.empty-state { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 44px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
+.empty-state b { font-size: 16px; color: var(--ink); margin-top: 8px; }
+.empty-state > span:not(.empty-icon) { color: var(--muted); font-size: 14.5px; }
+.empty-state .btn { margin-top: 14px; }
+.empty-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--soft); color: var(--muted); display: grid; place-items: center; }
 
-}
+/* ---- filter tabs -------------------------------------------------------------- */
+.filter-tabs { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; margin: 0 0 30px; border-bottom: 1px solid var(--line); }
+.filter-tabs a { flex: none; padding: 0 0 12px; font-size: 14.5px; color: var(--muted); text-decoration: none; display: inline-flex; gap: 6px; align-items: baseline; }
+.filter-tabs a small { font-size: 12px; opacity: 0.85; font-variant-numeric: tabular-nums; }
+.filter-tabs a:hover { color: var(--ink); }
+.filter-tabs a[aria-current='page'] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
 
-@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; }
-}
+/* ---- post cards ---------------------------------------------------------------- */
+.post-grid { display: grid; gap: 40px 24px; margin: 0 0 8px; }
+.post-grid.is-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.post-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
+.post-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+.post-card-media { display: block; text-decoration: none; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--soft); border: 1px solid var(--line); box-shadow: var(--sh-1); }
+.post-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
+.post-card:hover .post-card-media img { transform: scale(1.025); }
+.post-card-tile { width: 100%; height: 100%; display: grid; place-items: end start; padding: 18px 20px; background: var(--soft); position: relative; }
+.post-card-tile::before { content: ''; position: absolute; top: 18px; left: 20px; width: 12px; height: 12px; border-radius: 3px; background: var(--tc, var(--muted)); }
+.post-card-tile span { font: var(--display-weight) 26px/1.1 var(--font-heading); letter-spacing: -0.03em; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.post-card-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+.post-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--muted); }
+.post-card-title { font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; margin: 0; font-weight: 600; }
+.post-card-title a { color: var(--ink); text-decoration: none; }
+.post-card-title a::after { content: ''; position: absolute; inset: 0; } /* whole card clickable */
+.post-card .tag { position: relative; z-index: 1; }
+.post-card-title a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); }
+.post-card-excerpt { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.post-card-author { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 550; color: var(--ink); text-decoration: none; margin-top: 6px; }
 
-@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; } }
+/* feature: split card */
+.post-card.is-feature {
+  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; margin: 0 0 48px;
+  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2);
+  transition: transform 0.2s, box-shadow 0.2s;
 }
+.post-card.is-feature:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
+.post-card.is-feature .post-card-media { aspect-ratio: auto; min-height: 340px; border: 0; border-radius: 0; box-shadow: none; }
+.post-card.is-feature .post-card-body { padding: 34px 36px; justify-content: center; gap: 12px; }
+.post-card.is-feature .post-card-title { font-size: clamp(26px, 3vw, 32px); line-height: 1.1; letter-spacing: -0.035em; font-weight: var(--display-weight); }
+.post-card.is-feature .post-card-excerpt { font-size: 16px; -webkit-line-clamp: 3; }
 
-@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; }
+/* row: list layout */
+.post-card.is-row { flex-direction: row; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); }
+.post-card.is-row:first-child { padding-top: 4px; }
+.post-card.is-row .post-card-body { flex: 1; }
+.post-card.is-row .post-card-title { font-size: 21px; }
+.post-card-thumb { flex: 0 0 132px; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; background: var(--soft); position: relative; z-index: 1; }
+.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; 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; }
+/* avatars (icon placeholder — never a letter in a colored disc) */
+.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; background: var(--soft); display: block; }
+.avatar-empty { display: grid; place-items: center; color: var(--muted); }
 
-  .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; }
+/* ---- pagination ---------------------------------------------------------------- */
+.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 44px 0 0; font-size: 14px; }
+.pager-nums { display: flex; gap: 4px; }
+.pager-nums a, .pager-gap { min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-variant-numeric: tabular-nums; }
+.pager-nums a:hover { background: var(--hover); }
+.pager-nums a[aria-current='page'] { background: var(--btn); color: var(--btn-ink); font-weight: 600; }
+.pager-step { height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; background: var(--panel); }
+.pager-step:hover { background: var(--soft); }
+.pager-step.is-off { color: var(--muted); opacity: 0.5; }
+.pager-gap { color: var(--muted); }
 
-  .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; }
+/* ---- archives ------------------------------------------------------------------ */
+.archive-group { font-size: 22px; margin: 36px 0 18px; }
+.archive-back { margin-top: 36px; font-size: 14.5px; }
+.profile-head { display: flex; align-items: center; gap: 24px; padding: calc(20px * var(--space)) 0 calc(34px * var(--space)); }
+.profile-head h1 { font-size: clamp(32px, 4.5vw, 44px); margin: 0 0 8px; }
+.profile-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; background: var(--soft); box-shadow: 0 0 0 4px var(--panel), var(--sh-2); }
+.profile-count { font-size: 13.5px; color: var(--muted); margin: 10px 0 0; }
 
-  @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%; }
-  }
+@media (max-width: 900px) {
+  .post-grid.is-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .post-card.is-feature { grid-template-columns: 1fr; }
+  .post-card.is-feature .post-card-media { min-height: 0; aspect-ratio: 16 / 9; }
+  .post-card.is-feature .post-card-body { padding: 24px; }
+}
+@media (max-width: 600px) {
+  .post-grid.is-cards { grid-template-columns: 1fr; gap: 32px; }
+  .post-card.is-row { gap: 16px; align-items: flex-start; }
+  .post-card-thumb { flex-basis: 92px; }
+  .post-card.is-row .post-card-title { font-size: 18px; }
+  .profile-head { flex-direction: column; align-items: flex-start; gap: 16px; }
 }
 
-@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; }
+/* ---- legacy list (older theme templates still emit these) ----------------------- */
+.post-list { list-style: none; padding: 0; margin: 0; }
+.post-list li { padding: 18px 0; border-bottom: 1px solid var(--line); }
+.post-list li > a:not(.tag), .post-list .post-item > div > a:not(.tag) { font-size: 20px; font-weight: 650; text-decoration: none; color: var(--ink); }
+.post-meta { color: var(--muted); font-size: 14px; }
+.byline { color: var(--muted); }
+.byline a { color: var(--ink); text-decoration: none; font-weight: 550; }
+.byline a:hover { text-decoration: underline; }
+.tag-kicker { font-size: 13px; color: var(--muted); margin: 24px 0 0; font-weight: 550; }
+.tag-kicker + h1 { margin-top: 4px; }
+.tag-desc { color: var(--muted); font-size: 17px; margin-top: -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: var(--r-sm); background: var(--soft); display: block; }
 
-  .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); }
+/* ---- post page ------------------------------------------------------------------ */
+.post-header { padding: calc(32px * var(--space)) 0 calc(28px * var(--space)); }
+.post-kicker { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; }
+.post-kicker:empty { display: none; }
+.post-header h1 { font-size: clamp(34px, 4.8vw, 50px); line-height: 1.06; margin: 0 0 16px; }
+.post-dek { font-size: 19.5px; line-height: 1.5; color: var(--muted); margin: 0 0 24px; }
+.post-byline-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
+.post-byline { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.post-byline > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
+.post-byline .byline { font-size: 14.5px; }
+.post-byline .post-meta { font-size: 13.5px; }
+.avatar-stack { display: flex; }
+.avatar-stack .avatar { width: 40px; height: 40px; box-shadow: 0 0 0 2px var(--bg); }
+.avatar-stack .avatar + .avatar { margin-left: -10px; }
+.post-share { display: flex; align-items: center; gap: 6px; }
+.post-share a, .post-share-copy {
+  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
+  border-radius: 50%; border: 1px solid var(--line); color: var(--ink-2); background: var(--panel); cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+}
+.post-share a:hover, .post-share-copy:hover { color: var(--ink); background: var(--soft); }
+.post-share-copy.is-copied { color: var(--success); }
+
+.post-cover-wrap { margin: 0 0 calc(40px * var(--space)); }
+.post-cover-wrap:not(.is-full) { margin-inline: calc((100% - min(1000px, 100vw - 2 * var(--gutter))) / 2); }
+.post-cover { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--r-lg); background: var(--soft); box-shadow: var(--sh-2); }
+.post-cover.is-full { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); border-radius: 0; box-shadow: none; aspect-ratio: auto; max-height: 64vh; }
 
-  .author-card {
-    display: flex; gap: 18px; align-items: flex-start;
-    border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px;
+.post-layout { position: relative; }
+.post-content { font-size: calc(var(--base-size) + 0px); line-height: 1.75; }
+.post-content > :first-child { margin-top: 0; }
+.post-content h1 { font-size: 30px; margin: 1.4em 0 0.4em; letter-spacing: -0.03em; }
+.post-content h2 { font-size: 26px; margin: 1.7em 0 0.45em; letter-spacing: -0.025em; }
+.post-content h3 { font-size: 20px; margin: 1.5em 0 0.4em; }
+.post-content p, .post-content ul, .post-content ol { margin: 0 0 1.15em; }
+.post-content li { margin: 0.3em 0; }
+.post-content li > p, .post-content :is(th, td) p { margin: 0; }
+.post-content a { text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
+.post-content a:hover { text-decoration-color: currentColor; }
+.post-content img { border-radius: var(--r); }
+
+.post-toc { display: none; }
+@media (min-width: 1240px) {
+  .post-layout.has-toc .post-toc {
+    display: block; position: absolute; top: 0; bottom: 0; right: calc(100% + 48px); width: 200px;
   }
-  .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; }
+  .post-toc nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; }
+}
+.post-toc-title { font-size: 12.5px; font-weight: 550; color: var(--muted); padding: 0 10px 8px; }
+.post-toc a { padding: 5px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; line-height: 1.4; transition: background-color 0.15s, color 0.15s; }
+.post-toc a[data-depth='1'] { padding-left: 22px; }
+.post-toc a:hover { color: var(--ink); }
+.post-toc a[aria-current] { background: var(--soft); color: var(--ink); font-weight: 550; }
+
+.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
+.read-progress i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
 
-  .related { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 8px; }
-  .related-title { font-size: 24px; }
+.author-card {
+  display: flex; gap: 16px; align-items: center; margin: 48px 0 0; padding: 20px 22px;
+  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
+}
+.author-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; background: var(--soft); }
+.author-card-text { flex: 1; min-width: 0; }
+.author-card-name { font-size: 17px; letter-spacing: -0.015em; margin: 0 0 2px; }
+.author-card-name a { color: var(--ink); text-decoration: none; }
+.author-card-name a:hover { text-decoration: underline; }
+.author-card-bio { color: var(--muted); font-size: 14.5px; margin: 0; line-height: 1.5; }
+.author-card-more { flex: none; }
+@media (max-width: 600px) {
+  .author-card { flex-wrap: wrap; }
+  .author-card-more { margin-left: 72px; }
+  .post-byline-row { flex-wrap: wrap; }
+  .post-cover { border-radius: var(--r); aspect-ratio: 16 / 10; }
 }
 
-@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; }
-  /* in-body h1: below the post title's scale, above h2 */
-  .post-content h1 { font-size: 30px; margin: 1.2em 0 0.4em; }
-
-  .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; }
+.related { margin-top: 72px; padding-top: 36px; border-top: 1px solid var(--line); }
+.related-title { font-size: 24px; margin: 0 0 22px; }
+
+/* ---- overlay feature image (post.cover = 'overlay') --------------------------------- */
+.post-hero {
+  position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: calc(-28px * var(--space));
+  min-height: clamp(360px, 66vh, 680px);
+  display: flex; align-items: flex-end; justify-content: center; margin-bottom: 44px;
 }
+.site-header:is([data-style='floating'], [data-style='bar']) ~ main .post-hero { margin-top: calc(-1 * (76px + 28px * var(--space))); }
+.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: calc(var(--content-width) + 2 * var(--gutter)); padding: 0 var(--gutter) 46px; color: #fff; }
+.post-hero-content h1 { color: #fff; font-size: clamp(34px, 5vw, 54px); margin: 10px 0 12px; text-shadow: 0 1px 16px rgb(0 0 0 / 40%); }
+.post-hero-content .post-meta, .post-hero-content .byline, .post-hero-content .byline a { color: rgb(255 255 255 / 88%); }
+.post-hero-content .tag { color: #fff; }
+@media (max-width: 640px) { .post-hero { min-height: 320px; } .post-hero-content { padding-bottom: 30px; } }
 
-@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;
-  }
+/* ---- links page (/links) ------------------------------------------------------------ */
+.links-page { max-width: 480px; margin: 0 auto; text-align: center; padding: 48px 0 24px; }
+.links-page h1 { font-size: 26px; letter-spacing: -0.03em; margin: 0 0 6px; }
+.links-avatar {
+  width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 16px;
+  box-shadow: 0 0 0 4px var(--panel), var(--sh-2);
 }
+.links-page .tagline { color: var(--muted); margin: 0 0 18px; white-space: pre-wrap; font-size: 15.5px; }
+.links-page .social-nav { justify-content: center; margin: 0 0 26px; }
+.link-btn {
+  display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 10px;
+  margin: 0 0 10px; padding: 10px 12px; min-height: 58px;
+  background: var(--panel); border: 1px solid var(--line); border-radius: calc(var(--r) + 2px);
+  color: var(--ink); font-weight: 550; text-decoration: none; font-size: 15.5px; box-shadow: var(--sh-1);
+  transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
+}
+.link-btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
+.link-btn .link-label { grid-column: 2; }
+.link-btn::after { content: '\2192'; grid-column: 3; color: var(--muted); font-size: 16px; }
+.link-ico { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--soft); }
+.link-ico svg { width: 18px; height: 18px; fill: currentColor; }
+.link-ico img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; display: block; }
+.link-ico-emoji { font-size: 18px; line-height: 1; }
+.links-page .link-btn:first-of-type:not([style]) { background: var(--btn); color: var(--btn-ink); border-color: transparent; }
+.links-page .link-btn:first-of-type:not([style]) .link-ico { background: color-mix(in srgb, var(--btn-ink) 14%, transparent); }
+.links-page .link-btn:first-of-type:not([style])::after { color: inherit; opacity: 0.6; }
+.link-heading { font-size: 13px; font-weight: 550; color: var(--muted); letter-spacing: 0; margin: 26px 0 10px; font-family: var(--font-body); }
+.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; }
+.links-foot { margin-top: 30px; font-size: 12.5px; color: var(--muted); }
+.links-foot a { color: var(--muted); }
 
-@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 */
+/* ---- 404 ------------------------------------------------------------------------------ */
+.not-found { max-width: 520px; margin: 8vh auto 0; }
+.not-found .empty-state { padding: 48px 24px; }
+.not-found h1 { font-size: 28px; letter-spacing: -0.03em; margin: 10px 0 4px; }
+.not-found form { display: flex; gap: 6px; width: 100%; max-width: 380px; margin: 18px auto 0; background: var(--soft); border-radius: 12px; padding: 4px; }
+.not-found input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; padding: 0 12px; color: var(--ink); outline: none; }
+
+/* ---- 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;
+  background: var(--btn); color: var(--btn-ink);
+  font-size: 14px; padding: 9px 44px; 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;
+  background: none; border: 0; color: inherit; opacity: 0.7; cursor: pointer; font-size: 12px; padding: 6px; border-radius: 6px;
+}
+.announcement-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
+
+/* dynamic post-list blocks (expanded at request time) */
+.dyn-postlist { display: grid; gap: 24px; margin: 32px 0; }
+.dyn-postlist.is-empty p { color: var(--muted); border: 1.5px dashed var(--line-2); border-radius: var(--r); padding: 22px; text-align: center; font-size: 14px; margin: 0; }
+.dyn-postlist .dp-meta { color: var(--muted); font-size: 13px; }
+.dyn-postlist .dp-title { margin: 4px 0 4px; font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; }
+.dyn-postlist .dp-title a { color: var(--ink); text-decoration: none; }
+.dyn-postlist .dp-title a:hover { text-decoration: underline; text-decoration-color: var(--line-2); }
+.dyn-postlist .dp-excerpt { color: var(--muted); font-size: 15px; margin: 2px 0 0; }
+.dyn-postlist .dp-thumb { display: block; border-radius: var(--r); overflow: hidden; background: var(--soft); border: 1px solid var(--line); }
+.dyn-postlist .dp-thumb img { width: 100%; object-fit: cover; display: block; transition: transform 0.35s; }
+.dyn-postlist .dp-item:hover .dp-thumb img { transform: scale(1.025); }
+.dyn-postlist[data-layout='list'] .dp-item { display: flex; gap: 20px; align-items: center; padding-bottom: 22px; 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; border-radius: var(--r-sm); }
+.dyn-postlist[data-layout='list'] .dp-thumb img { aspect-ratio: 4 / 3; }
+.dyn-postlist[data-layout='grid'] { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 32px 20px; }
+.dyn-postlist[data-layout='grid'] .dp-thumb { margin-bottom: 12px; }
+.dyn-postlist[data-layout='grid'] .dp-thumb img { aspect-ratio: 16 / 10; }
+.dyn-postlist[data-layout='grid'] .dp-title { font-size: 18px; }
+.dyn-postlist[data-layout='feature'] .dp-thumb { margin-bottom: 14px; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
+.dyn-postlist[data-layout='feature'] .dp-thumb img { aspect-ratio: 2 / 1; }
+.dyn-postlist[data-layout='feature'] .dp-title { font-size: 30px; letter-spacing: -0.035em; }
+@media (max-width: 560px) {
+  .dyn-postlist[data-layout='list'] .dp-item { flex-direction: column; align-items: stretch; }
+  .dyn-postlist[data-layout='list'] .dp-thumb { flex-basis: auto; width: 100%; }
+  .post-item { flex-direction: column; } .post-thumb, .post-thumb img { width: 100%; flex-basis: auto; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
+}
 }
-.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-*
@@ -309,51 +587,52 @@ a.tag:hover { background: var(--accent); color: #fff; }
     --cal-line: var(--line);
     --cal-accent: var(--accent);
     --cal-soft: var(--soft);
-    --cal-radius: 12px;
+    --cal-radius: var(--r-lg);
     --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-heading { font-family: var(--font-heading); font-size: 24px; font-weight: 650; letter-spacing: -0.025em; 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-frame { position: relative; background: var(--cal-bg); border: 1px solid var(--cal-line); border-radius: var(--cal-radius); box-shadow: var(--sh-1); }
 
-  .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-toolbar { display: flex; align-items: center; gap: 6px; padding: 14px 16px 14px 20px; }
+  .pc-cal-title { font-weight: 650; font-size: 18px; letter-spacing: -0.02em; 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;
+    font: 550 13px/1 var(--font-body); color: var(--cal-ink); background: var(--cal-bg);
+    border: 1px solid var(--cal-line); border-radius: 10px; min-width: 34px; height: 34px; padding: 0 11px; cursor: pointer;
   }
-  .pc-cal-btn:hover { border-color: var(--cal-accent); color: var(--cal-accent); }
+  .pc-cal-btn:hover { background: var(--cal-soft); }
 
   /* 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);
+    font-size: 12px; font-weight: 550;
+    color: var(--cal-muted); text-align: left; padding: 8px 10px; 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 { min-width: 0; min-height: 88px; border-bottom: 1px solid var(--cal-line); border-right: 1px solid var(--cal-line); padding: 6px 6px; 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;
+    display: flex; width: fit-content; align-items: center; justify-content: center;
+    min-width: 26px; height: 26px; border-radius: 50%; font-weight: 550; color: var(--cal-ink); padding: 0 5px; font-variant-numeric: tabular-nums;
   }
   .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); }
+  .pc-cal-day.is-today .pc-cal-date, .pc-cal-wday.is-today .pc-cal-date { background: var(--cal-accent); color: var(--accent-ink); }
 
   /* 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;
+    display: flex; width: 100%; min-width: 0; align-items: center; gap: 6px; margin-top: 3px; padding: 2px 4px;
     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;
+    font-family: var(--font-body); font-size: 12px; 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; }
+  /* marker + text: the event's calendar color on multi-calendar cards, the
+     accent otherwise */
+  .pc-cal-event::before { content: ''; display: block; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 2px; background: var(--cal-dot, var(--cal-accent)); }
   [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); }
@@ -375,16 +654,15 @@ a.tag:hover { background: var(--accent); color: #fff; }
   .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;
+    display: flex; width: 100%; gap: 14px; align-items: baseline; padding: 12px 20px;
     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;
+    flex: 0 0 96px; font-weight: 550; font-size: 13px; color: var(--cal-muted);
   }
-  .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-calendar.is-multi .pc-cal-row .d::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 2px; 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 */
@@ -395,8 +673,8 @@ a.tag:hover { background: var(--accent); color: #fff; }
   /* 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);
+    background: var(--cal-bg); border: 1px solid var(--cal-line); border-radius: var(--r-sm);
+    box-shadow: var(--sh-3); 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; }
@@ -415,7 +693,7 @@ a.tag:hover { background: var(--accent); color: #fff; }
        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;
+      width: 7px; height: 7px; padding: 0; margin: 4px auto 0; border-radius: 2px;
       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; }
@@ -436,12 +714,14 @@ a.tag:hover { background: var(--accent); color: #fff; }
    tokens — theme CSS and Settings → Code injection are unlayered, so either
    overrides any of this without !important. */
 @layer base {
-  .site-nav a.pc-search-trigger {
-    display: inline-flex; align-items: center; align-self: center;
-    color: var(--muted); padding: 2px;
+  .pc-search-trigger {
+    display: inline-flex; align-items: center; gap: 8px; height: 36px; min-width: 164px; padding: 0 7px 0 11px;
+    border-radius: 10px; border: 1px solid var(--line); background: var(--panel);
+    color: var(--muted); font-size: 13.5px; text-decoration: none; transition: border-color 0.15s, color 0.15s;
   }
-  .site-nav a.pc-search-trigger:hover { color: var(--ink); }
-  .pc-search-trigger svg { display: block; }
+  .pc-search-trigger:hover { color: var(--ink); border-color: var(--line-2); }
+  .pc-search-trigger svg { display: block; flex: none; }
+  .pc-search-hint { margin-left: auto; font: 500 11px/1.6 var(--font-mono); background: var(--soft); border-radius: 6px; padding: 0 6px; color: var(--muted); }
 
   dialog.pc-search {
     --search-bg: var(--panel);
@@ -449,8 +729,8 @@ a.tag:hover { background: var(--accent); color: #fff; }
     --search-muted: var(--muted);
     --search-line: var(--line);
     --search-accent: var(--accent);
-    --search-radius: 12px;
-    --search-veil: rgb(0 0 0 / 0.35);
+    --search-radius: var(--r);
+    --search-veil: rgb(10 10 12 / 0.4);
     --search-width: 640px;
     --search-top: 9vh;
     width: min(var(--search-width), 92vw);
@@ -463,7 +743,7 @@ a.tag:hover { background: var(--accent); color: #fff; }
     display: flex; align-items: center; gap: 12px;
     background: var(--search-bg); color: var(--search-ink);
     border-radius: var(--search-radius);
-    box-shadow: 0 14px 40px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.08);
+    border: 1px solid var(--search-line); box-shadow: var(--sh-3);
     padding: 15px 18px;
   }
   .pc-search-box svg { flex: none; color: var(--search-muted); }
@@ -483,16 +763,13 @@ a.tag:hover { background: var(--accent); color: #fff; }
   .pc-search-results {
     margin-top: 10px; padding: 2px 0 8px;
     background: var(--search-bg); border-radius: var(--search-radius);
-    box-shadow: 0 14px 40px rgb(0 0 0 / 0.16);
+    border: 1px solid var(--search-line); box-shadow: var(--sh-3); padding: 2px 6px 8px;
     max-height: min(56vh, 460px); overflow-y: auto;
   }
-  .pc-search-group {
-    font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
-    color: var(--search-muted); padding: 14px 18px 4px;
-  }
+  .pc-search-group { font-size: 12.5px; font-weight: 550; color: var(--search-muted); padding: 14px 12px 4px; }
   a.pc-search-hit {
     display: flex; align-items: baseline; gap: 10px;
-    padding: 8px 18px; text-decoration: none; color: var(--search-ink); font-size: 15.5px;
+    padding: 9px 12px; border-radius: var(--r-sm); text-decoration: none; color: var(--search-ink); font-size: 15px;
   }
   a.pc-search-hit:hover, a.pc-search-hit.sel {
     background: color-mix(in srgb, var(--search-ink) 6%, transparent);
@@ -513,3 +790,383 @@ a.tag:hover { background: var(--accent); color: #fff; }
     dialog.pc-search { --search-top: 4vh; width: 94vw; }
   }
 }
+
+/* ---- Calendar module: event cards, event page, calendar page -------------
+   Stable .pc-ev-* / .pc-calpage-* hooks; colors come from the theme tokens so
+   every theme (and Settings → Code injection) restyles them. */
+@layer base {
+  .pc-cal-event.is-cancelled b, .pc-cal-row.is-cancelled .ti { text-decoration: line-through; color: var(--cal-muted); }
+  .pc-cal-pop-flag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--danger); margin-bottom: 3px; }
+  .pc-cal-pop-link { display: inline-block; margin-top: 9px; font-weight: 600; font-size: 12.5px; color: var(--cal-accent); text-decoration: none; }
+  .pc-cal-pop-link:hover { text-decoration: underline; }
+
+  /* date tile: month band + day number (cards, event page) */
+  .pc-ev-tile {
+    display: inline-flex; flex-direction: column; align-items: stretch; width: 52px; flex: 0 0 auto;
+    border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); text-align: center;
+  }
+  .pc-ev-tile b { display: block; background: var(--soft); color: var(--muted); font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 0 2px; }
+  .pc-ev-tile span { display: block; font-family: var(--font-heading); font-size: 20px; font-weight: 650; line-height: 1.4; color: var(--ink); padding: 1px 0 3px; font-variant-numeric: tabular-nums; }
+
+  /* cards */
+  .pc-ev-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; margin: 1.4em 0; }
+  .pc-ev-cards[data-layout='list'] { grid-template-columns: 1fr; gap: 0; }
+  .pc-ev-card { display: flex; flex-direction: column; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); transition: box-shadow 0.2s, transform 0.2s; }
+  .pc-ev-card:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
+  .pc-ev-cards[data-layout='list'] .pc-ev-card:hover { transform: none; }
+  .pc-ev-cards[data-layout='list'] .pc-ev-card { flex-direction: row; border-radius: 0; border-width: 0 0 1px; background: none; padding: 14px 0; gap: 16px; box-shadow: none; }
+  .pc-ev-card-media { display: block; text-decoration: none; aspect-ratio: 16 / 10; background: var(--soft); overflow: hidden; }
+  .pc-ev-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease-out; }
+  .pc-ev-card:hover .pc-ev-card-media img { transform: scale(1.02); }
+  .pc-ev-card-media.is-tile { display: grid; place-items: center; }
+  .pc-ev-cards[data-layout='list'] .pc-ev-card-media { flex: 0 0 132px; aspect-ratio: 4 / 3; border-radius: var(--r-sm); }
+  .pc-ev-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+  .pc-ev-cards[data-layout='list'] .pc-ev-card-body { padding: 0; }
+  .pc-ev-card-when { font-size: 13px; font-weight: 600; color: var(--accent-text); }
+  .pc-ev-flag { color: var(--danger); }
+  .pc-ev-card-title { font-size: 17px; line-height: 1.3; letter-spacing: -0.015em; margin: 2px 0 0; }
+  .pc-ev-card-title a { color: var(--ink); text-decoration: none; }
+  .pc-ev-card-title a:hover { text-decoration: underline; text-decoration-color: var(--line-2); }
+  .pc-ev-card.is-cancelled .pc-ev-card-title a { text-decoration: line-through; color: var(--muted); }
+  .pc-ev-card-excerpt { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+  .pc-ev-card-loc { font-size: 13px; color: var(--muted); margin-top: 4px; }
+  .pc-ev-card-loc::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 2px; background: var(--line-2); margin-right: 7px; vertical-align: 2px; }
+  .pc-ev-cards.is-single { grid-template-columns: minmax(0, 520px); }
+  .pc-ev-empty { color: var(--muted); font-size: 14.5px; margin: 0; }
+  .pc-ev-cta {
+    display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; height: 44px; padding: 0 18px;
+    background: var(--btn); color: var(--btn-ink); border: 1px solid transparent; border-radius: 12px; box-shadow: var(--sh-2);
+    font: 550 15px/1 var(--font-body); text-decoration: none; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
+  }
+  .pc-ev-cta:hover { transform: translateY(-1px); box-shadow: var(--sh-3); }
+  .pc-ev-cta.is-outline { background: var(--panel); color: var(--ink); border-color: var(--line-2); box-shadow: none; }
+  .pc-ev-cta.is-outline:hover { background: var(--soft); transform: none; }
+
+  /* event page — breaks out of the reading column to a wider layout */
+  .pc-ev-page, .pc-calpage { margin-inline: calc((100% - min(var(--wide-width), 100vw - 2 * var(--gutter))) / 2); }
+  .pc-ev-preview { background: var(--accent-soft); border-radius: var(--r-sm); padding: 8px 14px; font-size: 14px; margin: 0 0 16px; }
+  .pc-ev-hero { margin: 8px 0 34px; border-radius: var(--r-lg); overflow: hidden; background: var(--soft); aspect-ratio: 21 / 9; box-shadow: var(--sh-2); }
+  .pc-ev-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .pc-ev-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
+  /* calendar + tag labels: marker + text, never pills */
+  .pc-ev-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; }
+  .pc-ev-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 550; color: var(--ink-2); text-decoration: none; }
+  a.pc-ev-chip:hover { color: var(--ink); }
+  .pc-ev-chip i { width: 7px; height: 7px; border-radius: 2px; }
+  .pc-ev-chip.is-tag::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--muted); }
+  .pc-ev-title { font-size: clamp(32px, 4.6vw, 48px); line-height: 1.05; letter-spacing: var(--display-tracking); font-weight: var(--display-weight); margin: 0 0 14px; }
+  .pc-ev-page.is-cancelled .pc-ev-title { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted); }
+  .pc-ev-cancelled { background: color-mix(in srgb, var(--danger) 10%, var(--panel)); border-radius: var(--r-sm); padding: 10px 14px; font-size: 14.5px; margin: 0 0 16px; }
+  .pc-ev-cancelled b { color: var(--danger); }
+  .pc-ev-lede { font-size: 19px; line-height: 1.55; color: var(--muted); margin: 0 0 22px; }
+  .pc-ev-side {
+    position: sticky; top: 96px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
+    padding: 20px; display: flex; flex-direction: column; gap: 0; font-size: 14.5px; box-shadow: var(--sh-2);
+  }
+  .pc-ev-date { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; }
+  .pc-ev-date > div b { display: block; font-size: 15px; line-height: 1.3; }
+  .pc-ev-date > div span { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
+  .pc-ev-fact { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--line); }
+  .pc-ev-fact svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; margin-top: 1px; }
+  .pc-ev-fact b { display: block; font-weight: 600; line-height: 1.35; }
+  .pc-ev-fact span { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
+  .pc-ev-fact a { color: var(--accent-text); }
+  .pc-ev-side .pc-ev-cta { width: 100%; margin-top: 14px; }
+  .pc-ev-add { position: relative; margin-top: 8px; }
+  .pc-ev-add > summary, .pc-ev-share {
+    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
+    height: 42px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel);
+    font: 550 14.5px/1.2 var(--font-body); color: var(--ink); cursor: pointer; list-style: none;
+  }
+  .pc-ev-add > summary::-webkit-details-marker { display: none; }
+  .pc-ev-add > summary:hover, .pc-ev-share:hover, .pc-ev-add[open] > summary { background: var(--soft); }
+  .pc-ev-add svg, .pc-ev-share svg { width: 16px; height: 16px; }
+  .pc-ev-add-menu {
+    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--panel);
+    border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--sh-3); padding: 5px;
+    display: flex; flex-direction: column;
+  }
+  .pc-ev-add-menu a { padding: 8px 10px; border-radius: 7px; font-size: 14px; color: var(--ink); text-decoration: none; }
+  .pc-ev-add-menu a:hover { background: var(--soft); }
+  .pc-ev-share { margin-top: 6px; border-color: transparent; background: none; color: var(--muted); }
+  .pc-ev-share:hover { color: var(--ink); background: var(--hover); }
+  .pc-ev-more { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
+  .pc-ev-more h2 { font-size: 24px; margin: 0; }
+  .pc-ev-all { font-weight: 550; font-size: 14.5px; color: var(--muted); text-decoration: none; }
+  .pc-ev-all:hover { color: var(--ink); }
+
+  /* calendar page */
+  .pc-calpage-head { padding-top: calc(20px * var(--space)); }
+  .pc-calpage-head h1 { font-size: clamp(36px, 5vw, 48px); margin: 0 0 8px; }
+  .pc-calpage-head p { color: var(--muted); font-size: 17px; margin: 0 0 26px; max-width: 640px; }
+  .pc-calpage-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
+  /* calendar filter: text tabs with the calendar's color marker */
+  .pc-calpage-chips { display: flex; gap: 20px; flex-wrap: wrap; align-self: stretch; }
+  .pc-calpage-chips a {
+    display: inline-flex; align-items: center; gap: 7px; padding: 6px 0; font-size: 14px; color: var(--muted); text-decoration: none;
+  }
+  .pc-calpage-chips a:hover { color: var(--ink); }
+  .pc-calpage-chips a.is-on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
+  .pc-calpage-chips i { width: 7px; height: 7px; border-radius: 2px; }
+  .pc-calpage-tools { display: flex; gap: 8px; align-items: center; margin-left: auto; }
+  .pc-calpage-views { display: inline-flex; background: var(--soft); border-radius: 10px; padding: 3px; }
+  .pc-calpage-views a { padding: 5px 12px; border-radius: 7px; font-size: 13px; font-weight: 550; color: var(--muted); text-decoration: none; }
+  .pc-calpage-views a:hover { color: var(--ink); }
+  .pc-calpage-views a.is-on { background: var(--panel); color: var(--ink); box-shadow: var(--sh-1); }
+  .pc-calpage-sub { position: relative; }
+  .pc-calpage-sub > summary {
+    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px;
+    background: var(--panel); font-size: 13.5px; font-weight: 550; color: var(--ink); cursor: pointer; list-style: none;
+  }
+  .pc-calpage-sub > summary::-webkit-details-marker { display: none; }
+  .pc-calpage-sub > summary svg { width: 15px; height: 15px; }
+  .pc-calpage-sub-menu {
+    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 260px; background: var(--panel);
+    border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-3); padding: 8px;
+    display: flex; flex-direction: column;
+  }
+  .pc-calpage-sub-menu p { font-size: 13px; color: var(--muted); margin: 4px 8px 8px; line-height: 1.45; }
+  .pc-calpage-sub-menu a, .pc-calpage-sub-menu button {
+    text-align: left; padding: 8px 10px; border-radius: 8px; border: 0; background: none;
+    font: inherit; font-size: 14px; color: var(--ink); text-decoration: none; cursor: pointer;
+  }
+  .pc-calpage-sub-menu a:hover, .pc-calpage-sub-menu button:hover { background: var(--soft); }
+  .pc-calpage .pc-calendar { margin: 0; }
+  .pc-calpage-up { margin-top: 38px; }
+  .pc-calpage-up h2 { font-size: 24px; margin: 0; }
+  .pc-calpage-foot { display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
+
+  /* agenda: list view everywhere, and the default on phones */
+  .pc-calpage-agenda, .pc-calpage-strip { display: none; }
+  .pc-calpage.view-list .pc-calpage-view { display: none; }
+  .pc-calpage.view-list .pc-calpage-agenda { display: block; }
+  .pc-agenda-day { padding: 4px 0 10px; scroll-margin-top: 16px; }
+  .pc-agenda-day h3 { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted); margin: 18px 0 4px; }
+  .pc-agenda-row {
+    display: flex; gap: 14px; align-items: baseline; padding: 10px 12px; margin: 0 -12px; border-radius: 10px;
+    color: var(--ink); text-decoration: none;
+  }
+  a.pc-agenda-row[href]:hover { background: var(--soft); }
+  .pc-agenda-row .t { flex: 0 0 76px; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
+  .pc-agenda-row .ti { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
+  .pc-agenda-row .ti i { width: 7px; height: 7px; border-radius: 2px; align-self: center; }
+  .pc-agenda-row b { font-weight: 600; }
+  .pc-agenda-row small { color: var(--muted); font-size: 13px; }
+  .pc-agenda-row.is-cancelled b { text-decoration: line-through; color: var(--muted); }
+  .pc-calpage-strip { gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px 12px; padding: 0 4px 2px; }
+  .pc-calpage-strip a {
+    flex: 0 0 40px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 7px;
+    border-radius: 12px; color: var(--muted); text-decoration: none;
+  }
+  .pc-calpage-strip a small { font-size: 11px; }
+  .pc-calpage-strip a b { font-size: 15px; color: var(--ink); }
+  .pc-calpage-strip a i { width: 5px; height: 5px; border-radius: 2px; background: transparent; }
+  .pc-calpage-strip a.has i { background: var(--accent); }
+  .pc-calpage-strip a.today { background: var(--btn); }
+  .pc-calpage-strip a.today small, .pc-calpage-strip a.today b { color: var(--btn-ink); }
+  .pc-calpage-strip a.today.has i { background: var(--btn-ink); }
+  .pc-embed { padding: 2px; }
+
+  @media (max-width: 860px) {
+    .pc-ev-layout { grid-template-columns: 1fr; gap: 24px; }
+    .pc-ev-side { position: static; order: -1; }
+    .pc-ev-hero { aspect-ratio: 16 / 9; margin-bottom: 20px; }
+  }
+  @media (max-width: 640px) {
+    .pc-calpage:not(.is-explicit) .pc-calpage-view { display: none; }
+    .pc-calpage:not(.is-explicit) .pc-calpage-agenda, .pc-calpage.view-list .pc-calpage-agenda { display: block; }
+    .pc-calpage:not(.is-explicit) .pc-calpage-strip, .pc-calpage.view-list .pc-calpage-strip { display: flex; }
+    .pc-calpage-tools { margin-left: 0; width: 100%; justify-content: space-between; }
+    .pc-calpage-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 2px; }
+    .pc-calpage-chips a { flex: 0 0 auto; }
+    .pc-ev-cards[data-layout='list'] .pc-ev-card-media { flex-basis: 96px; }
+  }
+}
+
+/* ---- Bookings: directory, resource page, booking flow, manage page -------
+   .pc-bk-* / .pc-res-* / .pc-dir-* / .pc-manage-* hooks on theme tokens. */
+@layer base {
+  .pc-bkpage, .pc-res, .pc-dir, .pc-manage { margin-inline: calc((100% - min(var(--wide-width), 100vw - 2 * var(--gutter))) / 2); }
+  .pc-bk-foot { font-size: 14px; margin: 18px 0 0; }
+  .pc-bk-foot a { color: var(--muted); }
+  .pc-bk-empty, .pc-bk-hint { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
+  .pc-bk-hint a { color: var(--accent-text); font-weight: 600; }
+  .pc-bk-error { background: color-mix(in srgb, var(--danger) 10%, var(--panel)); color: var(--danger); border-radius: var(--r-sm); padding: 9px 12px; font-size: 14px; margin: 0 0 14px; }
+
+  /* the three-column flow (info · month · times), stacking on phones */
+  .pc-bk { display: grid; grid-template-columns: 270px minmax(0, 1fr) 220px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; min-height: 440px; box-shadow: var(--sh-2); }
+  .pc-bk > * { padding: 24px; min-width: 0; }
+  .pc-bk-info { border-right: 1px solid var(--line); }
+  .pc-bk-back, .pc-bk-kicker { font-size: 13px; color: var(--muted); text-decoration: none; }
+  .pc-bk-back:hover { color: var(--ink); }
+  .pc-bk-title { font-size: 24px; line-height: 1.2; letter-spacing: -0.03em; margin: 10px 0 8px; }
+  .pc-bk-desc { color: var(--muted); font-size: 14.5px; margin: 0 0 10px; }
+  .pc-bk-rules { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; color: var(--muted); }
+  .pc-bk-rules li { padding: 5px 0; border-top: 1px solid var(--line); }
+  .pc-bk-rules li:first-child { border-top: 0; }
+  .pc-bk-label { display: block; font-size: 13px; font-weight: 550; color: var(--muted); margin: 18px 0 8px; }
+  .pc-bk-lens div { display: flex; gap: 6px; flex-wrap: wrap; }
+  .pc-bk-lens a { border: 1px solid var(--line-2); border-radius: 10px; padding: 5px 11px; font-size: 13.5px; color: var(--ink); text-decoration: none; background: var(--panel); }
+  .pc-bk-lens a:hover { background: var(--soft); }
+  .pc-bk-lens a.is-on { background: var(--btn); border-color: transparent; color: var(--btn-ink); font-weight: 600; }
+  .pc-bk-tz { font-size: 12.5px; color: var(--muted); margin: 16px 0 0; }
+  .pc-bk-note { font-size: 13px; background: var(--soft); border-radius: var(--r-sm); padding: 8px 10px; margin: 12px 0 0; }
+  .pc-bk-calhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+  .pc-bk-calhead b { font-size: 16px; font-weight: 600; }
+  .pc-bk-calhead span { display: flex; gap: 4px; }
+  .pc-bk-calhead a, .pc-bk-calhead span > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: var(--panel); }
+  .pc-bk-calhead a:hover { background: var(--soft); }
+  .pc-bk-calhead span > span { color: var(--line-2); }
+  .pc-bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
+  .pc-bk-grid .dow { font-size: 12px; font-weight: 550; color: var(--muted); padding: 4px 0; }
+  .pc-bk-grid .day { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font-size: 14px; color: color-mix(in srgb, var(--muted) 60%, transparent); text-decoration: none; max-width: 44px; margin: 0 auto; width: 100%; }
+  .pc-bk-grid .day.open { color: var(--accent-text); font-weight: 650; background: var(--accent-soft); }
+  .pc-bk-grid .day.open:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
+  .pc-bk-grid .day.is-on { background: var(--btn); color: var(--btn-ink); }
+  .pc-bk-grid .day.today { box-shadow: inset 0 0 0 1.5px var(--line); }
+  .pc-bk-slots { border-left: 1px solid var(--line); }
+  .pc-bk-slotday { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 12px; }
+  .pc-bk-slotlist { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }
+  .pc-bk-slotlist a { display: grid; place-items: center; height: 42px; border: 1px solid var(--line-2); border-radius: 12px; font-weight: 550; font-size: 14.5px; color: var(--ink); text-decoration: none; background: var(--panel); font-variant-numeric: tabular-nums; transition: background-color 0.15s, color 0.15s; }
+  .pc-bk-slotlist a:hover { background: var(--btn); color: var(--btn-ink); border-color: transparent; }
+  .pc-bk-form { grid-column: span 2; max-width: 520px; }
+  .pc-bk-summary { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; background: var(--soft); border-radius: var(--r-sm); padding: 11px 14px; margin-bottom: 16px; }
+  .pc-bk-summary b { width: 100%; font-size: 15px; }
+  .pc-bk-summary span { color: var(--muted); font-size: 14px; }
+  .pc-bk-summary a { font-size: 13px; font-weight: 600; color: var(--accent-text); margin-left: auto; }
+  .pc-bk-field { display: block; margin-bottom: 12px; }
+  .pc-bk-field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
+  .pc-bk-field > span em { font-style: normal; font-weight: 400; color: var(--muted); }
+  .pc-bk-field input, .pc-bk-field select, .pc-bk-field textarea {
+    width: 100%; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); color: var(--ink);
+  }
+  .pc-bk-field input:focus, .pc-bk-field select:focus, .pc-bk-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
+  .pc-bk-field small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
+  .pc-bk-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 4px 0 14px; }
+  .pc-bk-submit { width: 100%; height: 46px; border: 0; border-radius: 12px; background: var(--btn); color: var(--btn-ink); font: 550 15px/1.2 var(--font-body); cursor: pointer; box-shadow: var(--sh-2); transition: transform 0.15s, box-shadow 0.15s; }
+  .pc-bk-submit:hover { transform: translateY(-1px); box-shadow: var(--sh-3); }
+  .pc-bk-fine { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
+  .pc-bk.is-embed { border: 0; border-radius: 0; }
+
+  /* resource page */
+  .pc-res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
+  .pc-res-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-2); background: var(--soft); display: block; margin-bottom: 16px; }
+  .pc-res-kind { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 550; color: var(--muted); }
+  .pc-res-kind::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
+  .pc-res-title { font-size: clamp(30px, 4.4vw, 44px); margin: 8px 0 10px; }
+  .pc-res-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0 0 14px; padding: 0; }
+  .pc-res-facts li { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
+  .pc-res-facts li::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--muted); }
+  .pc-res-desc { color: var(--muted); }
+  .pc-res-links { display: flex; flex-direction: column; gap: 12px; }
+  .pc-res-link { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px; box-shadow: var(--sh-1); }
+  .pc-res-linkhead { display: flex; align-items: center; gap: 8px; }
+  .pc-res-linkhead h2 { font-size: 17px; margin: 0; }
+  .pc-res-linkhead a { color: var(--ink); text-decoration: none; }
+  .pc-res-linkhead a:hover { text-decoration: underline; }
+  .pc-res-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 550; color: var(--muted); }
+  .pc-res-badge::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: currentColor; }
+  .pc-res-badge.is-instant { color: var(--success); }
+  .pc-res-link > p { color: var(--muted); font-size: 14px; margin: 4px 0 10px; }
+  .pc-res-next { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+  .pc-res-next a { border: 1px solid var(--line-2); border-radius: 10px; padding: 6px 11px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
+  .pc-res-next a:hover { background: var(--btn); color: var(--btn-ink); border-color: transparent; }
+  .pc-res-next a.pc-res-more { border: 0; color: var(--accent-text); padding-inline: 4px; }
+  .pc-res-next a.pc-res-more:hover { background: none; text-decoration: underline; }
+  .pc-res-none { font-size: 13.5px; color: var(--muted); }
+
+  /* directory */
+  .pc-dir-group h2 { font-size: 22px; margin: 32px 0 14px; }
+  .pc-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
+  .pc-dir-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); transition: box-shadow 0.2s, transform 0.2s; }
+  .pc-dir-card:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
+  .pc-dir-media { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--soft); color: var(--muted); }
+  .pc-dir-media img { width: 100%; height: 100%; object-fit: cover; }
+  .pc-dir-media svg { width: 36px; height: 36px; }
+  .pc-dir-body { padding: 16px 18px 18px; }
+  .pc-dir-body h3 { font-size: 17px; margin: 0 0 3px; }
+  .pc-dir-body h3 a { color: var(--ink); text-decoration: none; }
+  .pc-dir-body p { color: var(--muted); font-size: 13.5px; margin: 0 0 10px; }
+  .pc-dir-links { display: flex; flex-wrap: wrap; gap: 6px; }
+  .pc-dir-links a { font-size: 13.5px; font-weight: 550; color: var(--ink); text-decoration: none; border: 1px solid var(--line-2); border-radius: 10px; padding: 6px 11px; }
+  .pc-dir-links a:hover { background: var(--soft); }
+
+  /* manage page */
+  .pc-manage { max-width: 520px; margin: 0 auto; text-align: center; }
+  .pc-manage-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin: 12px auto 12px; }
+  .pc-manage-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
+  .pc-manage-icon.is-confirmed { background: color-mix(in srgb, var(--success) 14%, var(--panel)); color: var(--success); }
+  .pc-manage-icon.is-pending { background: color-mix(in srgb, var(--warning) 14%, var(--panel)); color: var(--warning); }
+  .pc-manage-icon.is-cancelled, .pc-manage-icon.is-declined { background: var(--soft); color: var(--muted); }
+  .pc-manage h1 { font-size: 30px; margin: 0 0 8px; }
+  .pc-manage-lede { color: var(--muted); margin: 0 0 18px; }
+  .pc-manage-card { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); margin: 0; padding: 4px 18px; box-shadow: var(--sh-1); }
+  .pc-manage-card > div { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
+  .pc-manage-card > div:first-child { border-top: 0; }
+  .pc-manage-card dt { flex: 0 0 84px; color: var(--muted); }
+  .pc-manage-card dd { margin: 0; }
+  .pc-manage-card .mono { font-family: var(--font-mono); font-size: 13px; }
+  .pc-manage-status.is-confirmed { color: var(--success); font-weight: 600; }
+  .pc-manage-status.is-pending { color: var(--warning); font-weight: 600; }
+  .pc-manage-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
+  .pc-manage-actions .pc-ev-add { margin: 0; }
+  .pc-manage-actions .pc-ev-add > summary { width: auto; }
+  .pc-manage-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); font: 550 14px/1.2 var(--font-body); color: var(--ink); text-decoration: none; cursor: pointer; }
+  .pc-manage-btn:hover { background: var(--soft); }
+  .pc-manage-btn.is-danger { color: var(--danger); }
+  .pc-manage-note { font-size: 12.5px; color: var(--muted); margin-top: 22px; }
+
+  /* RSVP on the event page */
+  .pc-ev-rsvp { margin-top: 12px; }
+  .pc-ev-going { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
+  .pc-ev-going b { color: var(--ink); }
+  .pc-ev-rsvpform > summary { list-style: none; cursor: pointer; width: 100%; margin-top: 0; }
+  .pc-ev-rsvpform > summary::-webkit-details-marker { display: none; }
+  .pc-ev-rsvpform[open] > summary { display: none; }
+  .pc-ev-rsvpform form { margin-top: 4px; }
+  .pc-ev-full { font-size: 14px; font-weight: 600; color: var(--muted); }
+
+  @media (max-width: 860px) {
+    .pc-bk { grid-template-columns: 1fr; }
+    .pc-bk-info { border-right: 0; border-bottom: 1px solid var(--line); }
+    .pc-bk-slots { border-left: 0; border-top: 1px solid var(--line); }
+    .pc-bk-form { grid-column: auto; }
+    .pc-bk > * { padding: 18px; }
+    .pc-res { grid-template-columns: 1fr; gap: 20px; }
+    .pc-bk-slotlist { max-height: none; }
+  }
+}
+
+/* Design preview bar — admin chrome floating over the public site in preview
+   mode (and for share-link reviewers). Deliberately NOT themed: it has to read
+   the same on every theme and scheme, like the code block. */
+@layer base {
+  .preview-bar {
+    position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90;
+    display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
+    padding: 7px 8px 7px 14px; border-radius: 14px; background: #1c1b19; color: #ece8e1;
+    border: 1px solid #2e2b27; box-shadow: 0 14px 40px -10px rgb(0 0 0 / 55%);
+    font: 500 13px/1.3 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; white-space: nowrap;
+  }
+  .preview-bar[hidden] { display: none; }
+  .preview-bar-dot { width: 8px; height: 8px; flex: none; border-radius: 2px; background: #f06a30; }
+  .preview-bar-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
+  .preview-bar-label small { font-weight: 400; color: #8f887e; margin-left: 7px; font-size: 12.5px; }
+  .preview-bar-seg { display: inline-flex; background: #2e2b27; border-radius: 9px; padding: 2px; flex: none; }
+  .preview-bar-seg a { padding: 4px 10px; border-radius: 7px; color: #8f887e; text-decoration: none; font-size: 12.5px; font-weight: 550; }
+  .preview-bar-seg a:hover { color: #ece8e1; }
+  .preview-bar-seg a[aria-current] { background: #22211e; color: #ece8e1; box-shadow: 0 1px 2px rgb(0 0 0 / 35%); }
+  .preview-bar-div { width: 1px; height: 18px; background: #3a3733; flex: none; }
+  .preview-bar-btn {
+    display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 9px; border: 0; cursor: pointer;
+    background: none; color: #c7c1b8; font: 600 12.5px/1 ui-sans-serif, system-ui, sans-serif; text-decoration: none; flex: none;
+  }
+  .preview-bar-btn:hover { background: rgb(255 248 235 / 7%); color: #ece8e1; }
+  .preview-bar-btn.is-primary { background: #f06a30; color: #fff; }
+  .preview-bar-btn.is-primary:hover { background: #ff7a40; }
+  .preview-bar-btn.is-icon { width: 30px; padding: 0; justify-content: center; font-size: 12px; }
+  @media (max-width: 600px) {
+    .preview-bar { gap: 6px; padding-left: 10px; }
+    .preview-bar-label small, .preview-bar-div, .preview-bar a[href='/admin/design'] { display: none; }
+  }
+}