@canvas-digital/blog-sdk 2.0.0

package/dist/style.css

@@ -0,0 +1,3105 @@
+/* Single entry for admin + public site styles (hero animations live in site-*). */
+
+/*
+ * Editorial dashboard.
+ *
+ * Scanned, not read — so the craft is information density and state legibility.
+ * Anything needing action must be findable without reading a sentence.
+ *
+ * Structure: tokens, shell, then one section per surface (list, editor, forms,
+ * modals). Every colour is a token; nothing here hard-codes a hex outside the
+ * token blocks, which is what makes the dark theme a redefinition rather than a
+ * second stylesheet.
+ *
+ * Chart colours (--viz-*, --ord-*) are the validated data-viz palette: separate
+ * steps chosen for each surface, never an automatic inversion of the other mode.
+ */
+
+:root {
+  --d-bg: #f4f4f7;
+  --d-surface: #ffffff;
+  --d-surface-2: #fafafc;
+  --d-sunk: #f0f0f5;
+  --d-side: #14152a;
+  --d-side-2: #1e2040;
+  --d-side-ink: #b8bad6;
+  --d-side-ink-2: #7b7d9c;
+  --d-ink: #16172b;
+  --d-ink-2: #4b4d66;
+  --d-ink-3: #7a7c94;
+  --d-rule: #e5e5ec;
+  --d-rule-2: #eeeef3;
+  --d-accent: #4f46e5;
+  --d-accent-ink: #4338ca;
+  --d-accent-soft: #eef0ff;
+
+  --d-good: #0ca30c;
+  --d-good-soft: #e3f4e3;
+  --d-warn: #b57900;
+  --d-warn-soft: #fdf3dd;
+  --d-serious: #ec835a;
+  --d-crit: #d03b3b;
+  --d-crit-soft: #fae7e7;
+  --d-delta-up: #006300;
+
+  /* data-viz: light steps, validated against #ffffff */
+  --viz-1: #2a78d6;
+  --viz-2: #eb6834;
+  --viz-3: #1baf7a;
+  --viz-grid: #eceef2;
+  --viz-axis: #c3c2b7;
+  --viz-muted: #898781;
+  --ord-1: #86b6ef;
+  --ord-2: #5598e7;
+  --ord-3: #2a78d6;
+  --ord-4: #184f95;
+
+  --d-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --d-read: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
+  --d-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+
+  --d-radius: 12px;
+  --d-radius-sm: 8px;
+  --d-shadow: 0 1px 2px rgba(22, 23, 43, 0.04), 0 10px 24px -18px rgba(22, 23, 43, 0.3);
+  --d-shadow-lg: 0 2px 6px rgba(22, 23, 43, 0.06), 0 28px 60px -26px rgba(22, 23, 43, 0.42);
+  --d-ring: 0 0 0 3px rgba(79, 70, 229, 0.18);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --d-bg: #0c0d16;
+    --d-surface: #151626;
+    --d-surface-2: #1a1b2d;
+    --d-sunk: #1d1e31;
+    --d-side: #0a0a14;
+    --d-side-2: #12132a;
+    --d-side-ink: #aeb0cf;
+    --d-side-ink-2: #6e708f;
+    --d-ink: #eceef6;
+    --d-ink-2: #b3b5cc;
+    --d-ink-3: #8688a3;
+    --d-rule: #272840;
+    --d-rule-2: #202136;
+    --d-accent: #7c73f0;
+    --d-accent-ink: #a9a2f7;
+    --d-accent-soft: #1e1c40;
+
+    --d-good: #3fbf3f;
+    --d-good-soft: #10240f;
+    --d-warn: #e0a92c;
+    --d-warn-soft: #2a2211;
+    --d-serious: #ec835a;
+    --d-crit: #e26060;
+    --d-crit-soft: #2a1414;
+    --d-delta-up: #3fbf3f;
+
+    /* data-viz: dark steps, validated against #14161e */
+    --viz-1: #3987e5;
+    --viz-2: #d95926;
+    --viz-3: #199e70;
+    --viz-grid: #22252f;
+    --viz-axis: #383835;
+    --viz-muted: #898781;
+    --ord-1: #9ec5f4;
+    --ord-2: #6da7ec;
+    --ord-3: #3987e5;
+    --ord-4: #1c5cab;
+
+    --d-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 22px -16px rgba(0, 0, 0, 0.8);
+    --d-shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.5), 0 24px 56px -24px rgba(0, 0, 0, 0.9);
+    --d-ring: 0 0 0 3px rgba(124, 115, 240, 0.3);
+  }
+}
+
+:root[data-theme='dark'] {
+  --d-bg: #0c0d16;
+  --d-surface: #151626;
+  --d-surface-2: #1a1b2d;
+  --d-sunk: #1d1e31;
+  --d-side: #0a0a14;
+  --d-side-2: #12132a;
+  --d-side-ink: #aeb0cf;
+  --d-side-ink-2: #6e708f;
+  --d-ink: #eceef6;
+  --d-ink-2: #b3b5cc;
+  --d-ink-3: #8688a3;
+  --d-rule: #272840;
+  --d-rule-2: #202136;
+  --d-accent: #7c73f0;
+  --d-accent-ink: #a9a2f7;
+  --d-accent-soft: #1e1c40;
+  --d-good: #3fbf3f;
+  --d-good-soft: #10240f;
+  --d-warn: #e0a92c;
+  --d-warn-soft: #2a2211;
+  --d-serious: #ec835a;
+  --d-crit: #e26060;
+  --d-crit-soft: #2a1414;
+  --d-delta-up: #3fbf3f;
+  --viz-1: #3987e5;
+  --viz-2: #d95926;
+  --viz-3: #199e70;
+  --viz-grid: #22252f;
+  --viz-axis: #383835;
+  --viz-muted: #898781;
+  --ord-1: #9ec5f4;
+  --ord-2: #6da7ec;
+  --ord-3: #3987e5;
+  --ord-4: #1c5cab;
+  --d-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 22px -16px rgba(0, 0, 0, 0.8);
+  --d-shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.5), 0 24px 56px -24px rgba(0, 0, 0, 0.9);
+  --d-ring: 0 0 0 3px rgba(124, 115, 240, 0.3);
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--d-bg);
+  color: var(--d-ink);
+  font-family: var(--d-ui);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+a { color: var(--d-accent); }
+:focus-visible { outline: 2px solid var(--d-accent); outline-offset: 2px; border-radius: 4px; }
+.mono { font-family: var(--d-mono); font-size: 0.92em; }
+.muted { color: var(--d-ink-3); }
+.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: inline-block; }
+
+/* ============================ app shell ============================ */
+
+.bp-admin-wrapper {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.shell {
+  display: grid;
+  grid-template-columns: 1fr;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+@media (min-width: 1000px) { .shell { grid-template-columns: 250px minmax(0, 1fr); } }
+
+.side {
+  background: linear-gradient(180deg, var(--d-side-2), var(--d-side));
+  color: var(--d-side-ink);
+  padding: 18px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  border-right: 1px solid rgba(255, 255, 255, 0.06);
+  min-height: 0;
+  overflow: hidden;
+}
+@media (min-width: 1000px) {
+  .side {
+    position: sticky;
+    top: 0;
+    height: 100%;
+    max-height: 100vh;
+    max-height: 100dvh;
+    align-self: start;
+  }
+}
+
+.side-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 0; }
+.side-mark {
+  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
+  background: linear-gradient(135deg, var(--viz-1), var(--ord-4));
+  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px;
+}
+.side-name { color: #fff; font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; line-height: 1.2; }
+.side-role { color: var(--d-side-ink-2); font-size: 11.5px; margin-top: 1px; }
+
+.side-new, button.side-new {
+  display: flex; align-items: center; justify-content: center; gap: 7px;
+  background: rgb(79, 70, 229); color: #fff; text-decoration: none;
+  font-size: 13.2px; font-weight: 650; padding: 9px 12px; border-radius: 8px;
+  height: 38px; border: none; cursor: pointer; width: 100%;
+}
+.side-new:hover, button.side-new:hover { filter: brightness(1.08); }
+
+.side-scroll {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  flex: 1 1 auto;
+  min-height: 0;
+  margin: 0 -4px;
+  padding: 0 4px;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
+}
+.side-scroll::-webkit-scrollbar { width: 6px; }
+.side-scroll::-webkit-scrollbar-track { background: transparent; }
+.side-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.28);
+  border-radius: 999px;
+}
+.side-brand, .side-new, .side-foot { flex: 0 0 auto; }
+.side-group { display: flex; flex-direction: column; gap: 4px; }
+.side-sect {
+  font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
+  color: var(--d-side-ink-2); padding: 0 8px; margin: 0 0 2px;
+}
+.side-nav { display: flex; flex-direction: column; gap: 1px; }
+.side-nav a, .side-nav button {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 10px; border-radius: 7px;
+  color: var(--d-side-ink); text-decoration: none; font-size: 13.4px; font-weight: 520;
+}
+.side-nav button { font-family: inherit; background: none; border: none; cursor: pointer; text-align: left; width: 100%; }
+.side-nav a:hover, .side-nav button:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
+.side-nav a.is-open, .side-nav button.is-open { color: #fff; }
+.side-nav a[aria-current='page'], .side-nav button[aria-current='page'] {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff; font-weight: 650;
+}
+.nav-icon { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.85; }
+.side-nav .badge {
+  margin-left: auto; font-size: 10.8px; font-weight: 700; padding: 1px 7px;
+  border-radius: 100px; background: rgba(255, 255, 255, 0.14); color: #fff;
+  font-variant-numeric: tabular-nums;
+}
+.side-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px 20px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
+.side-sub a { font-size: 12.6px; padding: 6px 9px; font-weight: 500; color: var(--d-side-ink-2); }
+.side-sub a:hover { color: #fff; }
+.side-sub a[aria-current='page'] { color: #fff; background: rgba(255, 255, 255, 0.08); }
+
+.side-foot { margin-top: auto; padding: 12px 8px 10px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
+.side-user-card {
+  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--d-radius-sm);
+  text-decoration: none; color: inherit; transition: background 0.12s ease;
+}
+.side-user-card:hover { background: rgba(255, 255, 255, 0.06); }
+.side-user-card.is-active,
+.side-user-card[aria-current='page'] { background: rgba(255, 255, 255, 0.08); }
+.side-user-avatar {
+  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+}
+.side-user-avatar-fallback {
+  display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); color: #fff;
+  font-size: 14px; font-weight: 700;
+}
+.side-user-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.side-user-name {
+  font-size: 13px; font-weight: 650; color: var(--d-side-ink); line-height: 1.25;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.side-user-role {
+  font-size: 11.5px; color: var(--d-side-ink-2); line-height: 1.25;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+.main {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* ============================ top bar ============================ */
+
+.top {
+  background: color-mix(in srgb, var(--d-surface) 88%, transparent);
+  backdrop-filter: saturate(180%) blur(8px);
+  border-bottom: 1px solid var(--d-rule);
+  padding: 14px 26px; display: flex; align-items: center; justify-content: space-between;
+  gap: 16px; flex-wrap: wrap; position: sticky; top: 0; z-index: 30;
+  flex: 0 0 auto;
+}
+.top h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
+.top .sub { font-size: 12.5px; color: var(--d-ink-3); margin: 2px 0 0; }
+.top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+
+.body {
+  padding: 20px 26px 72px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.body-wide { padding-left: 20px; padding-right: 20px; }
+
+/* brand switcher */
+.menu { position: relative; }
+.menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
+.menu > summary::-webkit-details-marker { display: none; }
+.menu .caret { font-size: 10px; color: var(--d-ink-3); }
+.menu-panel {
+  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 210px;
+  background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
+  box-shadow: var(--d-shadow-lg); padding: 5px; display: flex; flex-direction: column;
+}
+.menu-panel a,
+.menu-panel button {
+  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--d-radius-sm);
+  color: var(--d-ink-2); text-decoration: none; font-size: 13px; font-weight: 550;
+  border: 0; background: none; width: 100%; text-align: left; cursor: pointer; font: inherit;
+}
+.menu-panel a:hover,
+.menu-panel button:hover { background: var(--d-sunk); color: var(--d-ink); }
+.menu-panel a[aria-current='true'],
+.menu-panel button[aria-current='true'] { background: var(--d-accent-soft); color: var(--d-accent-ink); }
+.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
+
+/* ============================ buttons ============================ */
+
+.btn {
+  font: inherit; font-size: 13px; font-weight: 600; text-decoration: none;
+  padding: 7px 13px; border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule);
+  color: var(--d-ink-2); background: var(--d-surface); white-space: nowrap; cursor: pointer;
+  display: inline-flex; align-items: center; gap: 6px; line-height: 1.35;
+}
+.btn { transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease; }
+.btn:hover:not(:disabled) { border-color: var(--d-accent); color: var(--d-accent-ink); background: var(--d-accent-soft); }
+.btn:disabled { opacity: 0.45; cursor: not-allowed; }
+.btn-primary {
+  background: var(--d-accent); border-color: var(--d-accent); color: #fff;
+  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--d-accent) 90%, transparent);
+}
+.btn-primary:hover:not(:disabled) { color: #fff; filter: brightness(1.08); background: var(--d-accent); }
+.btn-ghost { border-style: dashed; color: var(--d-ink-3); }
+.btn-tiny { font-size: 12px; padding: 4px 9px; }
+.btn-block { width: 100%; justify-content: center; }
+.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.icon-btn {
+  font: inherit; border: 0; background: transparent; color: var(--d-ink-3); cursor: pointer;
+  width: 30px; height: 30px; border-radius: var(--d-radius-sm); display: grid; place-items: center;
+}
+.icon-btn:hover { background: var(--d-sunk); color: var(--d-ink); }
+.btn-danger-link {
+  font: inherit; font-size: 12.5px; font-weight: 600; border: 0; background: none;
+  color: var(--d-crit); cursor: pointer; padding: 0; text-align: left; text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.btn-danger-link:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.seg { display: inline-flex; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden; }
+.seg a {
+  font-size: 12.5px; font-weight: 600; padding: 6px 11px; text-decoration: none;
+  color: var(--d-ink-3); background: var(--d-surface); border-right: 1px solid var(--d-rule);
+}
+.seg a:last-child { border-right: 0; }
+.seg a[aria-current='true'] { background: var(--d-accent-soft); color: var(--d-accent-ink); }
+
+/* ============================ stat cards ============================ */
+
+.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 14px; }
+.kpi {
+  background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
+  padding: 15px 17px; box-shadow: var(--d-shadow);
+  display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: inherit;
+}
+.kpi { transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease; }
+a.kpi:hover { border-color: var(--d-accent); transform: translateY(-1px); box-shadow: var(--d-shadow-lg); }
+.kpi-l { font-size: 11px; font-weight: 680; letter-spacing: 0.09em; text-transform: uppercase; color: var(--d-ink-3); }
+.kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
+.kpi-n { font-size: 29px; font-weight: 700; letter-spacing: -0.028em; line-height: 1.05; font-variant-numeric: tabular-nums; }
+.kpi-delta { font-size: 12px; font-weight: 650; display: inline-flex; align-items: center; gap: 5px; }
+.kpi-delta.up { color: var(--d-delta-up); }
+.kpi-delta.down { color: var(--d-crit); }
+.kpi-delta.flat { color: var(--d-ink-3); }
+.kpi-delta-sub { color: var(--d-ink-3); font-weight: 400; }
+.kpi-sub { font-size: 12px; color: var(--d-ink-3); }
+.spark { width: 120px; height: 32px; display: block; }
+
+/* ============================ panels ============================ */
+
+.grid { display: grid; gap: 16px; }
+@media (min-width: 1160px) { .grid-2 { grid-template-columns: 1.55fr 1fr; } }
+@media (min-width: 1160px) { .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
+@media (min-width: 820px) and (max-width: 1159px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
+
+.panel {
+  background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
+  box-shadow: var(--d-shadow); overflow: hidden; display: flex; flex-direction: column;
+}
+.panel-head {
+  padding: 13px 17px; border-bottom: 1px solid var(--d-rule);
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  background: var(--d-surface);
+}
+.panel-head h2 { font-size: 13.5px; font-weight: 680; letter-spacing: -0.005em; margin: 0; display: flex; gap: 8px; align-items: baseline; }
+.panel-head .hint { font-size: 11.5px; color: var(--d-ink-3); font-weight: 500; }
+.hint-link { font-size: 12px; color: var(--d-accent); text-decoration: none; font-weight: 600; }
+.hint-link:hover { text-decoration: underline; }
+.panel-body { padding: 15px 17px; }
+.panel-body.flush { padding: 0; }
+.split { display: grid; gap: 16px; align-items: start; }
+@media (min-width: 1000px) { .split { grid-template-columns: 340px 1fr; } }
+.panel-form { position: sticky; top: 86px; }
+
+/* ============================ charts ============================ */
+
+.chart-holder { position: relative; }
+.chart-svg { display: block; width: 100%; height: auto; }
+.axis-label { font-size: 10.5px; font-family: var(--d-ui); font-variant-numeric: tabular-nums; }
+.chart-tip {
+  position: absolute; top: 4px; transform: translateX(-50%);
+  background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
+  box-shadow: var(--d-shadow); padding: 8px 11px; pointer-events: none; min-width: 116px;
+  font-size: 12.5px;
+}
+.tip-date { font-weight: 700; margin-bottom: 3px; font-size: 12px; }
+.tip-row { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
+.tip-swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
+.tip-sub { color: var(--d-ink-3); font-size: 11.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
+
+.barlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
+.bl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
+.bl-link { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; text-decoration: none; color: inherit; }
+.bl-link:hover .bl-label { color: var(--d-accent); }
+.bl-label { font-size: 13px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bl-value { font-size: 12.5px; font-weight: 700; color: var(--d-ink-2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
+.bl-track { height: 7px; background: var(--d-sunk); border-radius: 4px; overflow: hidden; }
+.bl-fill { height: 100%; border-radius: 4px; }
+
+.funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
+.fn-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
+.fn-label { font-size: 13px; font-weight: 550; }
+.fn-value { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.fn-track { height: 9px; background: var(--d-sunk); border-radius: 5px; overflow: hidden; }
+.fn-fill { height: 100%; border-radius: 5px; }
+
+/* ============================ rows ============================ */
+
+.row {
+  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px;
+  align-items: start; padding: 12px 17px; border-bottom: 1px solid var(--d-rule-2);
+}
+.row:last-child { border-bottom: 0; }
+.row:hover { background: var(--d-surface-2); }
+.row-main a.t { font-size: 14px; font-weight: 620; color: var(--d-ink); text-decoration: none; letter-spacing: -0.005em; }
+.row-main a.t:hover { color: var(--d-accent); }
+.row-sub { font-size: 12.2px; color: var(--d-ink-3); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: center; }
+.row-right { display: flex; gap: 7px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
+
+/* ============================ chips ============================ */
+
+.chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 10.6px; font-weight: 700; letter-spacing: 0.045em; text-transform: uppercase;
+  padding: 3px 8px; border-radius: 100px; border: 1px solid transparent; white-space: nowrap;
+}
+.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+.chip-review { background: var(--d-warn-soft); color: var(--d-warn); border-color: var(--d-warn); }
+.chip-writing { background: var(--d-sunk); color: var(--d-ink-3); border-color: var(--d-rule); }
+.chip-approved { background: var(--d-accent-soft); color: var(--d-accent-ink); border-color: var(--d-accent); }
+.chip-live { background: var(--d-good-soft); color: var(--d-good); border-color: var(--d-good); }
+.chip-blocked { background: var(--d-crit-soft); color: var(--d-crit); border-color: var(--d-crit); }
+.chip-brand { background: transparent; color: var(--d-ink-3); border-color: var(--d-rule); text-transform: none; letter-spacing: 0; font-weight: 600; }
+
+.blockers { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 3px 14px; }
+.blockers li { font-size: 12px; color: var(--d-crit); }
+.blockers li::before { content: '✕ '; font-weight: 700; }
+
+/* ============================ tables ============================ */
+
+.tw { overflow-x: auto; }
+table.tbl { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13.2px; }
+.tbl th, .tbl td { text-align: left; padding: 11px 17px; border-bottom: 1px solid var(--d-rule-2); vertical-align: top; }
+.tbl th {
+  font-size: 10.6px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
+  color: var(--d-ink-3); background: var(--d-sunk); white-space: nowrap; vertical-align: middle;
+  position: sticky; top: 0; z-index: 1;
+}
+.tbl tbody tr:last-child td { border-bottom: 0; }
+.tbl tbody tr:hover { background: var(--d-surface-2); }
+.tbl tbody tr.is-selected { background: var(--d-accent-soft); }
+.tbl td.num, .tbl th.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
+.tbl a { text-decoration: none; font-weight: 620; color: var(--d-ink); }
+.tbl a:hover { color: var(--d-accent); }
+.col-check { width: 34px; padding-right: 0; }
+.col-narrow { width: 1%; white-space: nowrap; }
+.col-title { min-width: 280px; }
+.row-title { font-size: 13.8px; font-weight: 640; color: var(--d-ink); text-decoration: none; display: inline-flex; gap: 7px; align-items: center; letter-spacing: -0.005em; }
+a.row-title:hover,
+button.row-title:hover { color: var(--d-accent); }
+button.row-title {
+  border: 0; background: none; padding: 0; cursor: pointer; font: inherit; text-align: left;
+}
+.cell-sub { display: block; font-size: 12px; color: var(--d-ink-3); margin-top: 2px; }
+.cell-lbl { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--d-ink-3); font-weight: 650; }
+.mini-track { height: 6px; background: var(--d-sunk); border-radius: 3px; overflow: hidden; min-width: 80px; flex: 1; }
+.mini-fill { height: 100%; border-radius: 3px; background: var(--viz-1); display: block; }
+.bar-cell { display: flex; align-items: center; gap: 10px; }
+.bar-cell-n { font-variant-numeric: tabular-nums; min-width: 46px; font-weight: 600; }
+
+/* WordPress-style hover actions: present when needed, quiet when not */
+.row-actions { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 5px; opacity: 0; transition: opacity 0.12s ease; }
+tr:hover .row-actions, tr:focus-within .row-actions, .row-actions:focus-within { opacity: 1; }
+@media (hover: none) { .row-actions { opacity: 1; } }
+.row-actions button, .row-actions a {
+  font: inherit; font-size: 12.2px; font-weight: 550; border: 0; background: none; padding: 0;
+  color: var(--d-accent); cursor: pointer; text-decoration: none;
+}
+.row-actions button:hover, .row-actions a:hover { text-decoration: underline; }
+.row-actions button:disabled { color: var(--d-ink-3); cursor: not-allowed; text-decoration: none; }
+.row-actions .danger { color: var(--d-crit); }
+
+.list { display: flex; flex-direction: column; }
+.list-bar {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 11px 17px; border-bottom: 1px solid var(--d-rule); background: var(--d-surface-2); flex-wrap: wrap;
+}
+.bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+
+.quick-row td { background: var(--d-sunk); }
+.quick { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; }
+.quick-head { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--d-ink-3); }
+.quick-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
+.quick-grid label, .fld-row { display: flex; flex-direction: column; gap: 5px; }
+.quick-grid label > span, .fld-lbl { font-size: 11.6px; font-weight: 650; color: var(--d-ink-2); }
+.quick-grid .span-2 { grid-column: span 2; }
+.inline-form { display: flex; gap: 7px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
+
+/* ============================ tabs + filters ============================ */
+
+.tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--d-rule); }
+.tabs a,
+.tabs button {
+  display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px;
+  font-size: 13px; font-weight: 600; color: var(--d-ink-3); text-decoration: none;
+  border-bottom: 2px solid transparent; margin-bottom: -1px;
+  border-top: 0; border-left: 0; border-right: 0; background: none; cursor: pointer; font: inherit;
+}
+.tabs a:hover,
+.tabs button:hover { color: var(--d-ink); }
+.tabs a[aria-current='true'],
+.tabs button[aria-current='true'] { color: var(--d-accent-ink); border-bottom-color: var(--d-accent); }
+.tab-count {
+  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
+  background: var(--d-sunk); color: var(--d-ink-3); border-radius: 100px; padding: 1px 7px;
+}
+.tabs a[aria-current='true'] .tab-count,
+.tabs button[aria-current='true'] .tab-count { background: var(--d-accent-soft); color: var(--d-accent-ink); }
+
+.filterbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.filterbar .fld { min-width: 180px; }
+.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+
+/* ============================ forms ============================ */
+
+.fld {
+  font: inherit; font-size: 13.2px; padding: 8px 11px; border-radius: var(--d-radius-sm);
+  border: 1px solid var(--d-rule); background: var(--d-surface); color: var(--d-ink);
+  width: 100%; max-width: 100%;
+}
+.fld:focus { outline: none; border-color: var(--d-accent); box-shadow: var(--d-ring); }
+.fld:disabled { background: var(--d-sunk); color: var(--d-ink-3); cursor: not-allowed; }
+.fld-sm { font-size: 12.4px; padding: 5px 9px; width: auto; }
+.fld-inline { width: auto; min-width: 160px; }
+select.fld {
+  width: auto;
+  min-width: 140px;
+  padding-right: 2rem;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75L6 6.25L10.5 1.75' stroke='%23666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.7rem center;
+  background-size: 12px 8px;
+}
+textarea.fld { resize: vertical; line-height: 1.55; }
+.fld-lbl em { font-style: normal; font-weight: 450; color: var(--d-ink-3); }
+.fld.is-invalid { border-color: var(--d-crit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-crit) 18%, transparent); }
+.fld-error { display: block; margin-top: 6px; font-size: 12.4px; color: var(--d-crit); }
+.fld-hint { display: block; margin-top: 6px; font-size: 12.2px; color: var(--d-ink-3); }
+.fld-checks { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--d-ink-2); }
+.fld-checks label { display: flex; gap: 8px; align-items: center; }
+.stack { display: flex; flex-direction: column; gap: 12px; }
+
+.form-error {
+  margin: 0; font-size: 12.8px; color: var(--d-crit); background: var(--d-crit-soft);
+  border: 1px solid var(--d-crit); border-radius: var(--d-radius-sm); padding: 9px 12px;
+}
+.form-ok {
+  margin: 0; font-size: 12.8px; color: var(--d-good); background: var(--d-good-soft);
+  border: 1px solid var(--d-good); border-radius: var(--d-radius-sm); padding: 9px 12px;
+}
+.form-ok.inline { padding: 4px 9px; font-size: 12px; }
+
+.dashboard-toast-container {
+  top: 18px !important;
+  right: 22px !important;
+  width: min(360px, calc(100vw - 32px));
+}
+
+.dashboard-toast.Toastify__toast--success {
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 650;
+  border-radius: var(--d-radius);
+  box-shadow: var(--d-shadow-lg);
+}
+
+.banner {
+  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
+  padding: 12px 16px; border-radius: var(--d-radius); font-size: 13px;
+}
+.banner-warn { background: var(--d-warn-soft); border: 1px solid var(--d-warn); color: var(--d-ink-2); }
+
+.d-empty { padding: 22px 18px; color: var(--d-ink-3); font-size: 13px; margin: 0; }
+.note { font-size: 12px; color: var(--d-ink-3); margin: 0; }
+.explain {
+  font-size: 12.6px; color: var(--d-ink-3); background: var(--d-sunk);
+  border: 1px solid var(--d-rule); border-radius: var(--d-radius); padding: 11px 14px; margin: 0;
+}
+.explain b { color: var(--d-ink-2); font-weight: 650; }
+
+.settings { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
+.save-bar {
+  position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between;
+  gap: 12px; background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
+  padding: 11px 16px; box-shadow: var(--d-shadow-lg); flex-wrap: wrap;
+}
+.colour-row { display: flex; gap: 8px; align-items: center; }
+.colour { width: 42px; height: 34px; padding: 2px; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-surface); cursor: pointer; }
+.role-grid { display: flex; flex-direction: column; gap: 8px; }
+.role-row { display: grid; grid-template-columns: minmax(90px, 1fr) auto; gap: 8px 12px; align-items: center; font-size: 13px; }
+.role-row .note { grid-column: 1 / -1; }
+
+/* ============================ post editor ============================ */
+
+.skip-link {
+  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
+}
+.skip-link:focus {
+  position: fixed; left: 12px; top: 12px; z-index: 100; width: auto; height: auto; overflow: visible;
+  padding: 8px 14px; background: var(--d-accent); color: #fff; border-radius: var(--d-radius-sm);
+  font-size: 13px; font-weight: 650; text-decoration: none; box-shadow: var(--d-shadow);
+}
+.screen-reader {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
+  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+}
+.ed-title-wrap { display: contents; }
+
+.ed-wp-header {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  margin-bottom: 4px; font-size: 13px; color: var(--d-ink-3);
+}
+.ed-wp-header-meta .is-dirty { color: var(--d-warn); font-weight: 650; }
+
+.ed-bar {
+  position: sticky; top: 8px; z-index: 20; display: flex; align-items: center;
+  justify-content: space-between; gap: 12px; flex-wrap: wrap;
+  background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
+  padding: 9px 13px; box-shadow: var(--d-shadow);
+}
+.ed-bar-left, .ed-bar-right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
+.ed-bar-meta { font-size: 12.2px; color: var(--d-ink-3); }
+.ed-bar-meta .is-dirty { color: var(--d-warn); font-weight: 650; }
+.ed-error { margin-top: -6px; }
+
+.ed-layout { display: grid; gap: 16px; align-items: start; }
+@media (min-width: 1100px) { .ed-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
+.ed-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
+.ed-side { display: flex; flex-direction: column; gap: 14px; }
+/* A sticky column, but never a squashed one: without `flex: 0 0 auto` the boxes
+   shrink to fit the column and `overflow: hidden` silently eats their content. */
+.ed-side > * { flex: 0 0 auto; }
+@media (min-width: 1100px) { .ed-side { position: sticky; top: 12px; align-self: start; } }
+
+.ed-title {
+  font: inherit; font-size: 1.7em; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25;
+  padding: 8px 0 12px; border: 0; border-radius: 0;
+  background: transparent; color: var(--d-ink); width: 100%; box-shadow: none;
+}
+.ed-title:focus { outline: none; box-shadow: none; border-bottom: 1px solid var(--d-accent); }
+.ed-title::placeholder { color: var(--d-ink-3); font-weight: 600; }
+
+.ed-permalink { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.6px; color: var(--d-ink-3); padding: 0 3px; }
+.ed-permalink .lbl { font-weight: 650; color: var(--d-ink-2); }
+.ed-permalink-value { color: var(--d-accent-ink); }
+
+/* `overflow: clip` (not `hidden`) keeps rounded corners flush with the card
+   border without creating a scroll container that would trap the sticky toolbar. */
+.ed {
+  border: 1px solid var(--d-rule);
+  border-radius: var(--d-radius);
+  background: var(--d-surface);
+  box-shadow: var(--d-shadow);
+  overflow: clip;
+}
+.ed-chrome {
+  border-radius: var(--d-radius) var(--d-radius) 0 0;
+  background: var(--d-surface-2);
+  overflow: clip;
+}
+/* Stick the Visual/Code + formatting bar under the dashboard top bar while editing */
+.ed.is-active .ed-chrome {
+  position: sticky;
+  top: 64px;
+  z-index: 25;
+  box-shadow: 0 8px 20px -14px rgba(16, 18, 32, 0.45);
+  border-bottom: 1px solid var(--d-rule);
+  border-radius: 0; /* flush under the sticky top bar when active */
+}
+.ed-toolbar {
+  display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
+  padding: 7px 9px; border-bottom: 1px solid var(--d-rule); background: var(--d-surface-2);
+  border-radius: 0;
+}
+.tb-btn {
+  font: inherit; font-size: 13px; min-width: 30px; height: 30px; padding: 0 7px;
+  border: 1px solid transparent; border-radius: var(--d-radius-sm); background: transparent;
+  color: var(--d-ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
+}
+.tb-btn:hover { background: var(--d-sunk); color: var(--d-ink); }
+.tb-btn.is-on { background: var(--d-accent-soft); color: var(--d-accent-ink); border-color: var(--d-accent); }
+.tb-select { font: inherit; font-size: 12.6px; padding: 5px 8px; border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule); background: var(--d-surface); color: var(--d-ink); }
+.tb-sep { width: 1px; height: 18px; background: var(--d-rule); margin: 0 5px; }
+.tb-count { margin-left: auto; font-size: 11.6px; color: var(--d-ink-3); font-variant-numeric: tabular-nums; }
+
+.ed-link { border-bottom: 1px solid var(--d-rule); background: var(--d-sunk); padding: 11px 13px; display: flex; flex-direction: column; gap: 9px; }
+.ed-link-popover {
+  position: fixed; z-index: 10000; width: min(360px, calc(100vw - 16px));
+  background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
+  box-shadow: 0 12px 40px rgba(16, 18, 32, 0.22); padding: 12px 13px;
+  display: flex; flex-direction: column; gap: 10px;
+  max-height: min(420px, calc(100vh - 24px)); overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.ed-link-popover::-webkit-scrollbar { display: none; }
+.ed-link-popover::before {
+  content: ''; position: absolute; top: -6px; left: 18px; width: 10px; height: 10px;
+  background: var(--d-surface); border-left: 1px solid var(--d-rule); border-top: 1px solid var(--d-rule);
+  transform: rotate(45deg);
+}
+.ed-link-selection {
+  margin: 0; font-size: 12.5px; color: var(--d-ink-2); font-style: italic;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.ed-link-actions { display: flex; gap: 12px; justify-content: flex-end; }
+.ed-link-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.ed-link-row .fld { flex: 1; min-width: 190px; }
+.ed-link-tab { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--d-ink-2); white-space: nowrap; }
+.ed-link-hits {
+  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px;
+  max-height: 200px; overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.ed-link-hits::-webkit-scrollbar { display: none; }
+.ed-link-hits button {
+  font: inherit; width: 100%; text-align: left; border: 0; background: var(--d-surface);
+  border-radius: var(--d-radius-sm); padding: 7px 10px; cursor: pointer; display: flex;
+  justify-content: space-between; gap: 12px; align-items: baseline; color: var(--d-ink);
+}
+.ed-link-hits button:hover { background: var(--d-accent-soft); }
+.hit-label { font-size: 13px; font-weight: 600; }
+.hit-path { font-size: 11.6px; color: var(--d-ink-3); }
+.ed-link-note { margin: 0; font-size: 11.8px; color: var(--d-ink-3); }
+
+.ed-surface { position: relative; border-radius: 0 0 var(--d-radius) var(--d-radius); overflow: clip; }
+.ed-placeholder { position: absolute; top: 22px; left: 24px; color: var(--d-ink-3); pointer-events: none; font-size: 16.5px; }
+.ed-input { padding: 20px 24px 48px; min-height: 420px; outline: none; }
+.ed-skeleton {
+  min-height: 420px;
+  background: linear-gradient(90deg, var(--d-sunk) 0%, var(--d-surface-2) 50%, var(--d-sunk) 100%);
+  background-size: 200% 100%;
+  animation: ed-shimmer 1.2s ease-in-out infinite;
+}
+.ed-mode-skeleton {
+  display: inline-block; width: 64px; height: 28px; border-radius: var(--d-radius-sm);
+  background: var(--d-sunk);
+}
+@keyframes ed-shimmer {
+  0% { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ed-skeleton { animation: none; background: var(--d-sunk); }
+}
+
+/* the writing surface reads like the article, not like a form field */
+.ed-input.prose { font-family: var(--d-read); font-size: 16.5px; line-height: 1.68; color: var(--d-ink); }
+.ed-input.prose > * { margin: 0 0 1.05em; }
+.ed-input.prose h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; margin: 1.5em 0 0.5em; line-height: 1.2; }
+.ed-input.prose h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 1.5em 0 0.5em; line-height: 1.25; }
+.ed-input.prose h3 { font-size: 19.5px; font-weight: 700; letter-spacing: -0.015em; margin: 1.4em 0 0.45em; }
+.ed-input.prose h4 { font-size: 17px; font-weight: 700; margin: 1.3em 0 0.4em; }
+.ed-input.prose blockquote {
+  margin: 1.3em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--d-accent);
+  color: var(--d-ink-2); font-style: italic;
+}
+.ed-input.prose ul, .ed-input.prose ol { padding-left: 1.4em; }
+.ed-input.prose li { margin-bottom: 0.35em; }
+.ed-input.prose a { color: var(--d-accent); text-decoration: underline; text-underline-offset: 2px; }
+.ed-input.prose a[data-link-type='internal'] { text-decoration-style: dotted; }
+.ed-input.prose code { font-family: var(--d-mono); font-size: 0.88em; background: var(--d-sunk); padding: 1px 5px; border-radius: 4px; }
+.ed-input.prose hr { border: 0; border-top: 2px solid var(--d-rule); margin: 1.8em 0; }
+.ed-input.prose figure.ed-figure { margin: 1.5em 0; border-radius: var(--d-radius); overflow: hidden; border: 1px solid var(--d-rule); background: var(--d-sunk); }
+.ed-input.prose figure.ed-figure img { display: block; width: 100%; height: auto; }
+.ed-input.prose figure.ed-figure figcaption { font-family: var(--d-ui); font-size: 12.2px; color: var(--d-ink-3); padding: 8px 12px; }
+
+/* sidebar boxes */
+.box { background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius); box-shadow: var(--d-shadow); overflow: hidden; }
+.box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--d-rule); background: var(--d-surface-2); }
+.box-head h3 { margin: 0; font-size: 12.4px; font-weight: 700; letter-spacing: 0.045em; text-transform: uppercase; color: var(--d-ink-2); }
+.box-hint { font-size: 11.4px; color: var(--d-ink-3); }
+.box-hint.warn { color: var(--d-warn); font-weight: 650; }
+.box-body { padding: 13px 14px; }
+.box-publish { border-color: var(--d-accent); }
+.box-publish .box-head { background: var(--d-accent-soft); border-bottom-color: var(--d-accent); }
+
+.facts { margin: 0; display: flex; flex-direction: column; gap: 6px; }
+.facts > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.6px; }
+.facts dt { color: var(--d-ink-3); margin: 0; }
+.facts dd { margin: 0; font-weight: 620; text-align: right; }
+
+.checklist { background: var(--d-crit-soft); border: 1px solid var(--d-crit); border-radius: var(--d-radius-sm); padding: 9px 12px; }
+.checklist-head { margin: 0 0 5px; font-size: 11.6px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--d-crit); }
+.checklist ul { margin: 0; padding-left: 16px; font-size: 12.4px; color: var(--d-ink-2); }
+.checklist-ok { margin: 0; font-size: 12.4px; color: var(--d-good); font-weight: 600; }
+.checklist-ok::before { content: '✓ '; font-weight: 700; }
+
+.pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow-y: auto; }
+.pick-list-auto { max-height: none; overflow: visible; }
+.pick-list-compact { max-height: 140px; }
+.pick-row { display: flex; gap: 9px; align-items: center; font-size: 13px; padding: 3px 2px; cursor: pointer; }
+.pick-row:hover { color: var(--d-accent-ink); }
+
+.tokens { display: flex; flex-wrap: wrap; gap: 6px; }
+.token {
+  display: inline-flex; align-items: center; gap: 6px; font-size: 12.2px; font-weight: 560;
+  background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: 100px; padding: 3px 5px 3px 10px;
+}
+.token-new { background: var(--d-accent-soft); border-color: var(--d-accent); color: var(--d-accent-ink); }
+.token button { font: inherit; border: 0; background: none; cursor: pointer; color: var(--d-ink-3); line-height: 1; padding: 0 3px; }
+.token button:hover { color: var(--d-crit); }
+
+.thumb-row { display: flex; gap: 10px; align-items: center; }
+.thumb { width: 62px; height: 46px; object-fit: cover; border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule); }
+.feat { width: 100%; border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule); display: block; aspect-ratio: 4 / 3; object-fit: cover; }
+.feat-alt { margin-top: 2px; }
+.feat-alt .fld { resize: vertical; min-height: 56px; }
+.feat-alt-foot { margin: 0; }
+.fld-em { font-style: normal; font-weight: 500; color: var(--d-ink-3); font-size: 11.5px; }
+
+/* drop targets */
+.drop-target.is-dragging { outline: 2px dashed var(--d-accent); outline-offset: -6px; background: var(--d-accent-soft); }
+.dropzone-cta {
+  font: inherit; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px;
+  padding: 20px 14px; border: 1.5px dashed var(--d-rule); border-radius: var(--d-radius-sm);
+  background: var(--d-surface-2); color: var(--d-ink-2); cursor: pointer; text-align: center;
+  font-size: 12.6px; font-weight: 550;
+}
+.dropzone-cta:hover:not(:disabled) { border-color: var(--d-accent); color: var(--d-accent-ink); background: var(--d-accent-soft); }
+.dropzone-cta:disabled { opacity: 0.6; cursor: progress; }
+.dropzone-icon { font-size: 17px; }
+
+/* search-result preview */
+.serp { background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); padding: 11px 13px; }
+.serp-url { font-size: 11.8px; color: var(--d-ink-3); }
+.serp-title { font-size: 16px; color: var(--d-accent); margin-top: 3px; line-height: 1.3; }
+.serp-desc { font-size: 12.6px; color: var(--d-ink-2); margin-top: 3px; }
+
+/* WordPress-parity editor extras */
+.ed-mode-tabs {
+  display: flex; gap: 0; border-bottom: 1px solid var(--d-rule);
+  background: var(--d-surface-2); border-radius: inherit; padding: 0 8px;
+}
+.ed-mode-tabs button {
+  font: inherit; font-size: 12.5px; font-weight: 600; border: 0; background: transparent;
+  color: var(--d-ink-3); padding: 9px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
+}
+.ed-mode-tabs button:hover { color: var(--d-ink); }
+.ed-mode-tabs button.is-on { color: var(--d-ink); border-bottom-color: var(--d-accent); }
+.ed .ed-toolbar { border-radius: 0; }
+.tb-media {
+  font-weight: 650 !important; min-width: auto !important; padding: 0 10px !important;
+  background: var(--d-accent-soft) !important; color: var(--d-accent-ink) !important; border-color: var(--d-accent) !important;
+}
+.tb-color { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--d-ink-2); cursor: pointer; padding: 0 6px; height: 30px; }
+.tb-color input { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; }
+.ed-code {
+  display: block; width: 100%; min-height: 420px; padding: 16px 18px; border: 0; resize: vertical;
+  background: #1e1f2b; color: #e8e8f0; font-size: 13px; line-height: 1.5; outline: none;
+  border-radius: 0 0 var(--d-radius) var(--d-radius);
+}
+.ed-chars {
+  display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--d-rule); background: var(--d-sunk);
+}
+.ed-chars button {
+  font: inherit; min-width: 28px; height: 28px; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
+  background: var(--d-surface); cursor: pointer; color: var(--d-ink);
+}
+.ed-chars button:hover { border-color: var(--d-accent); }
+
+.wp-facts { margin: 0; display: flex; flex-direction: column; gap: 6px; }
+.wp-facts .fact-row { display: flex; gap: 6px; align-items: baseline; font-size: 12.6px; flex-wrap: wrap; }
+.wp-facts .fact-lbl { color: var(--d-ink-3); min-width: 72px; }
+.wp-facts .fact-val { font-weight: 550; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.fact-edit { padding: 4px 0 8px 78px; }
+.fld-sm { max-width: 180px; padding: 5px 8px; font-size: 12.5px; }
+.linkish {
+  font: inherit; border: 0; background: transparent; color: var(--d-accent); cursor: pointer;
+  padding: 0; text-decoration: underline; text-underline-offset: 2px; font-size: 12.4px;
+}
+.linkish:hover { color: var(--d-accent-ink); }
+.linkish:disabled { opacity: 0.5; cursor: not-allowed; }
+.publish-foot {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
+  padding-top: 8px; border-top: 1px solid var(--d-rule); margin-top: 4px;
+}
+.publish-foot-left { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
+
+.profile-panel { display: flex; flex-direction: column; gap: 18px; }
+.profile-hero { display: flex; align-items: center; gap: 14px; }
+.profile-avatar-img {
+  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
+  border: 1px solid var(--d-accent);
+}
+.profile-avatar {
+  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
+  background: var(--d-accent-soft); color: var(--d-accent-ink); font-size: 20px; font-weight: 800;
+  border: 1px solid var(--d-accent);
+}
+.profile-name { margin: 0; font-size: 18px; font-weight: 700; color: var(--d-ink); }
+.profile-email { margin: 4px 0 0; font-size: 13px; color: var(--d-ink-3); }
+.profile-facts { max-width: 360px; }
+.profile-roles h3 { margin: 0 0 8px; font-size: 12.4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--d-ink-3); }
+.profile-role-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.profile-role-list li {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 8px 10px; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-sunk);
+  font-size: 13px;
+}
+.profile-role-brand { font-weight: 600; color: var(--d-ink); }
+.profile-role-level { font-size: 12px; color: var(--d-ink-3); }
+
+.profile-logout-top {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-weight: 600;
+  color: var(--d-crit);
+  background: color-mix(in srgb, var(--d-crit) 7%, var(--d-surface));
+  border: 1px solid color-mix(in srgb, var(--d-crit) 28%, var(--d-rule));
+  box-shadow: 0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset;
+  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
+}
+
+.profile-logout-top:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--d-crit) 12%, var(--d-surface));
+  border-color: color-mix(in srgb, var(--d-crit) 45%, var(--d-rule));
+  transform: translateY(-1px);
+  box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--d-crit) 55%, transparent);
+}
+
+.profile-logout-top:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.profile-logout-top:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
+.logout-btn-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+.publish-seo-summary { flex-direction: column; align-items: stretch; }
+.btn-tiny { font-size: 12px; padding: 4px 9px; }
+
+.seo-summary { display: flex; flex-wrap: wrap; gap: 8px; }
+.seo-pill {
+  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
+  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--d-rule); background: var(--d-sunk);
+}
+.seo-pill-good { border-color: var(--d-good); background: var(--d-good-soft); color: var(--d-good); }
+.seo-pill-ok { border-color: var(--d-warn); background: var(--d-warn-soft); color: var(--d-warn); }
+.seo-pill-bad { border-color: var(--d-crit); background: var(--d-crit-soft); color: var(--d-crit); }
+.seo-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
+.seo-dot-good { background: var(--d-good); }
+.seo-dot-ok { background: var(--d-warn); }
+.seo-dot-bad { background: var(--d-crit); }
+.seo-analysis { display: flex; flex-direction: column; gap: 12px; }
+.seo-details { border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-sunk); padding: 0 12px 10px; }
+.seo-details summary { cursor: pointer; font-weight: 650; font-size: 13px; padding: 10px 0; list-style: none; }
+.seo-details summary::-webkit-details-marker { display: none; }
+.seo-advanced { border-top: 1px solid var(--d-rule); padding-top: 8px; }
+.seo-advanced summary { cursor: pointer; font-weight: 650; font-size: 13px; color: var(--d-ink-2); }
+.seo-group { margin-top: 8px; }
+.seo-group-title { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--d-ink-3); }
+.seo-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.seo-checks li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.6px; }
+.seo-checks strong { display: block; font-size: 12.8px; }
+.seo-checks span { display: block; color: var(--d-ink-2); margin-top: 1px; }
+
+/* Yoast SEO metabox — uses dashboard tokens */
+.yoast-box { overflow: hidden; }
+.yoast-box .box-body { padding: 0; }
+.yoast-tabs {
+  display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--d-rule);
+  background: var(--d-surface-2); padding: 0 8px;
+}
+.yoast-tab {
+  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--d-ink-3);
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 9px 14px; border: 0; border-bottom: 2px solid transparent;
+  background: transparent; cursor: pointer; margin-bottom: -1px;
+}
+.yoast-tab:hover { color: var(--d-ink); }
+.yoast-tab.is-active { color: var(--d-ink); border-bottom-color: var(--d-accent); }
+.yoast-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
+.yoast-dot-good { background: var(--d-good); }
+.yoast-dot-ok { background: var(--d-warn); }
+.yoast-dot-bad { background: var(--d-crit); }
+.yoast-inside { padding: 14px 16px 16px !important; }
+.yoast-panel { display: flex; flex-direction: column; gap: 14px; }
+.yoast-intro { margin: 0; font-size: 13px; color: var(--d-ink-2); line-height: 1.45; }
+.yoast-section { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
+.yoast-section-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--d-ink); }
+.yoast-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
+.yoast-analysis { display: flex; flex-direction: column; gap: 10px; }
+.yoast-schema-preview {
+  background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
+  padding: 11px 13px;
+}
+.yoast-schema-list { margin: 6px 0 0; padding-left: 18px; font-size: 12.6px; color: var(--d-ink-2); }
+.yoast-schema-list li + li { margin-top: 6px; }
+.yoast-social-preview {
+  display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start;
+  border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden;
+  background: var(--d-sunk);
+}
+.yoast-social-img { width: 100%; height: 100%; min-height: 80px; object-fit: cover; display: block; }
+.yoast-social-img-empty {
+  display: flex; align-items: center; justify-content: center; min-height: 80px;
+  font-size: 11px; color: var(--d-ink-3); background: var(--d-rule);
+}
+.yoast-social-text { padding: 10px 12px 12px 0; min-width: 0; }
+.yoast-social-site { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--d-ink-3); }
+.yoast-social-title {
+  font-size: 14px; font-weight: 650; color: var(--d-ink); margin-top: 4px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.yoast-social-desc {
+  font-size: 12px; color: var(--d-ink-2); margin-top: 3px; line-height: 1.35;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+
+/* SEO tab — WordPress Yoast parity */
+.yoast-panel-seo { gap: 16px; }
+.yoast-field { display: flex; flex-direction: column; gap: 6px; }
+.yoast-label { font-size: 13px; font-weight: 650; color: var(--d-ink); }
+.yoast-input { font-size: 13px; }
+.yoast-help { margin: 0; font-size: 12.4px; line-height: 1.45; color: var(--d-ink-3); }
+.yoast-learn-more { color: var(--d-accent); text-decoration: none; }
+.yoast-learn-more:hover { text-decoration: underline; }
+.yoast-keyphrase-hint {
+  margin: 0; padding: 10px 12px; font-size: 12.8px; color: var(--d-ink-2);
+  background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
+}
+.yoast-snippet {
+  border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden;
+  background: var(--d-surface);
+}
+.yoast-snippet-head {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
+  padding: 10px 12px; border-bottom: 1px solid var(--d-rule); background: var(--d-surface-2);
+}
+.yoast-snippet-toggle {
+  font: inherit; font-size: 13px; font-weight: 700; color: var(--d-ink);
+  border: 0; background: transparent; cursor: pointer; padding: 0;
+}
+.yoast-snippet-toggle:hover { color: var(--d-accent-ink); }
+.yoast-preview-modes { display: inline-flex; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden; }
+.yoast-preview-mode {
+  font: inherit; font-size: 11.8px; font-weight: 600; padding: 4px 10px; border: 0;
+  background: var(--d-surface); color: var(--d-ink-2); cursor: pointer;
+}
+.yoast-preview-mode + .yoast-preview-mode { border-left: 1px solid var(--d-rule); }
+.yoast-preview-mode.is-active { background: var(--d-accent-soft); color: var(--d-accent-ink); }
+.yoast-serp { margin: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--d-rule); }
+.yoast-serp-mobile { max-width: 360px; }
+.yoast-serp-desktop { max-width: none; }
+.yoast-serp .serp-title strong, .yoast-serp .serp-desc strong { font-weight: 700; }
+.yoast-snippet-fields { padding: 12px; gap: 14px !important; }
+.yoast-field-foot { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
+.yoast-char-count { font-size: 11.6px; color: var(--d-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.yoast-meter { flex: 1; min-width: 0; }
+.yoast-meter-track { height: 4px; border-radius: 999px; background: var(--d-rule); overflow: hidden; }
+.yoast-meter-fill { height: 100%; border-radius: 999px; transition: width 0.15s ease; }
+.yoast-meter-good { background: var(--d-good); }
+.yoast-meter-ok { background: var(--d-warn); }
+.yoast-meter-bad { background: var(--d-crit); }
+.yoast-slug-row { display: flex; align-items: center; gap: 0; }
+.yoast-slug-prefix {
+  font-size: 12.6px; color: var(--d-ink-3); padding: 8px 0 8px 10px;
+  border: 1px solid var(--d-rule); border-right: 0; border-radius: var(--d-radius-sm) 0 0 var(--d-radius-sm);
+  background: var(--d-sunk);
+}
+.yoast-slug-row .yoast-input { border-radius: 0 var(--d-radius-sm) var(--d-radius-sm) 0; }
+.yoast-accordion {
+  display: flex; flex-direction: column;
+  border: 1px solid var(--d-rule); border-radius: var(--d-radius);
+  background: var(--d-surface); box-shadow: var(--d-shadow); overflow: hidden;
+}
+.yoast-accordion .yoast-collapse {
+  border: 0; border-radius: 0; box-shadow: none; margin: 0;
+}
+.yoast-accordion .yoast-collapse + .yoast-collapse { margin-top: 0; border-top: 1px solid var(--d-rule); }
+.yoast-accordion-note {
+  margin: 0; padding: 10px 14px; font-size: 12.5px; line-height: 1.45; color: var(--d-warn);
+  background: var(--d-warn-soft); border-top: 1px solid var(--d-rule); border-bottom: 1px solid var(--d-rule);
+}
+
+/* Shared accordion chevron */
+.acc-chevron {
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
+  width: 20px; height: 20px; color: var(--d-ink-3);
+  transition: transform 0.2s ease, color 0.15s ease;
+}
+details[open] > summary .acc-chevron { transform: rotate(180deg); color: var(--d-accent); }
+.yoast-collapse-summary:hover .acc-chevron,
+.yoast-result-summary:hover .acc-chevron { color: var(--d-ink-2); }
+details[open] > summary:hover .acc-chevron { color: var(--d-accent-ink); }
+
+/* Yoast collapsible sections */
+.yoast-collapse {
+  border: 1px solid var(--d-rule); border-radius: var(--d-radius);
+  background: var(--d-surface); box-shadow: var(--d-shadow); overflow: hidden;
+}
+.yoast-collapse + .yoast-collapse { margin-top: 10px; }
+.yoast-collapse-summary {
+  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
+  padding: 11px 14px; font-size: 13px; font-weight: 650; letter-spacing: -0.01em;
+  color: var(--d-ink); background: transparent;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.yoast-collapse-summary:hover { background: var(--d-sunk); }
+.yoast-collapse[open] > .yoast-collapse-summary {
+  background: var(--d-surface-2); border-bottom: 1px solid var(--d-rule); color: var(--d-ink);
+}
+.yoast-collapse-summary::-webkit-details-marker { display: none; }
+.yoast-collapse-title { flex: 1; min-width: 0; }
+.yoast-collapse-status { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
+.yoast-collapse-body {
+  padding: 14px; display: flex; flex-direction: column; gap: 12px;
+  background: var(--d-surface);
+}
+.yoast-count { font-weight: 600; color: var(--d-ink-3); }
+.yoast-empty { margin: 0; font-size: 12.6px; color: var(--d-ink-3); }
+
+.yoast-snippet-field { display: flex; flex-direction: column; gap: 6px; }
+.yoast-var-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.yoast-var-chip {
+  font: inherit; font-size: 12.2px; font-weight: 560; padding: 3px 10px;
+  border: 1px solid var(--d-rule); border-radius: 100px; background: var(--d-sunk);
+  color: var(--d-ink-2); cursor: pointer;
+}
+.yoast-var-chip:hover { border-color: var(--d-accent); color: var(--d-accent-ink); background: var(--d-accent-soft); }
+.yoast-var-chip.token { cursor: pointer; }
+.yoast-snippet-actions {
+  display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 2px;
+}
+.yoast-var-picker { position: relative; }
+.yoast-var-menu {
+  position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px;
+  margin: 0; padding: 4px; list-style: none; background: var(--d-surface);
+  border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); box-shadow: var(--d-shadow-lg);
+}
+.yoast-var-option {
+  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
+  font: inherit; font-size: 12.4px; padding: 7px 9px; border: 0; border-radius: var(--d-radius-sm);
+  background: transparent; color: var(--d-ink); cursor: pointer; text-align: left;
+}
+.yoast-var-option:hover { background: var(--d-sunk); }
+.yoast-var-option-label { font-weight: 650; }
+.yoast-var-option-token { font-size: 11px; color: var(--d-ink-3); }
+
+.yoast-status-bad {
+  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
+  border-radius: 50%; background: var(--d-crit-soft); color: var(--d-crit); font-size: 12px; font-weight: 800;
+  border: 1px solid var(--d-crit);
+}
+.yoast-link-btn {
+  font: inherit; font-size: 12.6px; font-weight: 600; color: var(--d-accent);
+  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; text-align: left;
+}
+.yoast-link-btn:hover:not(:disabled) { text-decoration: underline; }
+.yoast-link-btn:disabled { color: var(--d-ink-3); cursor: not-allowed; }
+.yoast-preview-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.yoast-preview-label { font-size: 12.6px; font-weight: 600; color: var(--d-ink-2); }
+.yoast-google-card {
+  border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-surface);
+  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
+}
+.yoast-google-mobile { max-width: 360px; }
+.yoast-google-site { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
+.yoast-google-favicon {
+  width: 26px; height: 26px; border-radius: 50%; background: var(--d-sunk);
+  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--d-ink-2);
+}
+.yoast-google-site-name { font-size: 12px; color: var(--d-ink); line-height: 1.2; }
+.yoast-google-site-meta .serp-url { font-size: 11.5px; margin-top: 1px; }
+.yoast-google-title { font-size: 16px; color: var(--d-accent); line-height: 1.3; }
+.yoast-google-desc { font-size: 12.6px; color: var(--d-ink-2); line-height: 1.45; }
+.yoast-composite-field {
+  border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-surface);
+  overflow: hidden;
+}
+.yoast-var-chips-inset { padding: 8px 8px 0; border-bottom: 1px solid var(--d-rule); background: var(--d-sunk); }
+.yoast-composite-input {
+  font: inherit; font-size: 13px; width: 100%; border: 0; background: transparent;
+  padding: 9px 10px; color: var(--d-ink); resize: vertical;
+}
+.yoast-composite-input:focus { outline: none; box-shadow: var(--d-ring); }
+.yoast-premium-links { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; border-top: 1px solid var(--d-rule); }
+.yoast-toggle-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--d-ink-2); }
+.yoast-radio-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.yoast-radio-fieldset legend { font-size: 12.8px; font-weight: 650; color: var(--d-ink); margin-bottom: 4px; padding: 0; }
+.yoast-radio-fieldset label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--d-ink-2); }
+.yoast-analysis-list {
+  display: flex; flex-direction: column; gap: 0;
+  border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
+  overflow: hidden; background: var(--d-surface);
+}
+
+/* SEO analysis panel */
+.yoast-seo-analysis-panel { display: flex; flex-direction: column; gap: 14px; }
+.yoast-premium-cta {
+  border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
+  background: var(--d-warn-soft); padding: 14px;
+}
+.yoast-premium-cta-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
+.yoast-premium-badge {
+  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
+  color: var(--d-warn); background: var(--d-surface); border: 1px solid var(--d-warn); border-radius: 999px; padding: 2px 8px;
+}
+.yoast-premium-cta-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--d-ink); }
+.yoast-premium-cta-lead { margin: 0 0 10px; font-size: 12.6px; line-height: 1.45; color: var(--d-ink-2); }
+.yoast-premium-cta-list {
+  margin: 0 0 12px; padding-left: 18px; font-size: 12.4px; line-height: 1.5; color: var(--d-ink-2);
+}
+.yoast-premium-cta-list li + li { margin-top: 8px; }
+.yoast-premium-cta-list strong { color: var(--d-ink); font-weight: 650; }
+.yoast-premium-cta-btn {
+  display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;
+  color: var(--d-ink-2); text-decoration: none; padding: 4px 9px; border-radius: var(--d-radius-sm);
+  border: 1px solid var(--d-rule); background: var(--d-surface); cursor: pointer;
+}
+.yoast-premium-cta-btn:hover:not(:disabled) { border-color: var(--d-accent); color: var(--d-accent-ink); background: var(--d-accent-soft); text-decoration: none; }
+.yoast-premium-cta-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+.yoast-keyphrase-inline-hint {
+  margin: 0; padding: 9px 11px; font-size: 12.6px; color: var(--d-ink-2);
+  background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
+}
+.yoast-analysis-results-head {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
+}
+.yoast-result-empty { margin: 0; font-size: 12.4px; color: var(--d-ink-3); }
+.yoast-footer-collapse { border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-surface); }
+.yoast-footer-collapse + .yoast-footer-collapse { margin-top: 8px; }
+.yoast-footer-collapse-summary {
+  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
+  padding: 10px 12px; font-size: 12.8px; font-weight: 650; color: var(--d-ink-2);
+}
+.yoast-footer-collapse-summary::-webkit-details-marker { display: none; }
+.yoast-footer-collapse-body { margin: 0; padding: 0 12px 12px; font-size: 12.4px; color: var(--d-ink-3); }
+.yoast-analysis-footer {
+  display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--d-rule);
+}
+.yoast-footer-link {
+  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.6px; font-weight: 600;
+  color: var(--d-accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; text-align: left;
+}
+.yoast-footer-link:hover:not(:disabled) { text-decoration: underline; }
+.yoast-footer-link:disabled { color: var(--d-ink-3); cursor: not-allowed; }
+.yoast-footer-lock { font-size: 11px; line-height: 1; }
+.yoast-footer-badge {
+  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
+  color: var(--d-good); background: var(--d-good-soft); border: 1px solid var(--d-good); border-radius: 4px; padding: 1px 5px;
+}
+.wp-publish-scores .fact-val { display: inline-flex; align-items: center; gap: 6px; }
+.wp-cat-tabs { margin-bottom: 4px; }
+
+.yoast-snippet-label-row {
+  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap;
+}
+.yoast-snippet-actions-top { margin-top: 0; }
+.yoast-accordion-panel,
+.yoast-internal-links { display: flex; flex-direction: column; gap: 14px; }
+.yoast-link-section { display: flex; flex-direction: column; gap: 6px; }
+.yoast-link-section-title { margin: 0; font-size: 12.8px; font-weight: 700; color: var(--d-ink); }
+.yoast-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.yoast-link-list li { font-size: 12.4px; padding: 8px 10px; background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); }
+.yoast-link-label { display: flex; align-items: flex-start; gap: 6px; font-weight: 600; color: var(--d-ink); }
+.yoast-link-href { display: block; font-size: 11px; color: var(--d-ink-3); margin-top: 2px; word-break: break-all; }
+.yoast-insight-value { font-size: 22px; font-weight: 700; color: var(--d-ink); font-variant-numeric: tabular-nums; margin: 0; }
+.yoast-premium-inline-btn {
+  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 12.6px; font-weight: 600;
+  padding: 8px 12px; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
+  background: var(--d-sunk); color: var(--d-ink-3); cursor: not-allowed;
+}
+
+.tag-most-used { margin-top: 4px; }
+.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
+.tag-cloud-item {
+  font: inherit; font-size: 12px; padding: 3px 8px; border-radius: var(--d-radius-sm);
+  border: 1px solid var(--d-rule); background: var(--d-surface); color: var(--d-accent); cursor: pointer;
+}
+.tag-cloud-item:hover { border-color: var(--d-accent); background: var(--d-accent-soft); }
+
+/* ============================ modals ============================ */
+
+.modal-backdrop {
+  position: fixed; inset: 0; background: rgba(10, 11, 16, 0.55); backdrop-filter: blur(2px);
+  z-index: 100; display: grid; place-items: center; padding: 20px;
+}
+.modal {
+  background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
+  box-shadow: var(--d-shadow-lg); width: min(560px, 100%); max-height: min(86vh, 780px);
+  display: flex; flex-direction: column; overflow: hidden;
+}
+.modal-wide { width: min(960px, 100%); }
+.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--d-rule); }
+.modal-head h2 { margin: 0; font-size: 14.5px; font-weight: 700; }
+.modal-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.modal-head-actions .fld { min-width: 190px; }
+.modal-body { padding: 16px; overflow-y: auto; flex: 1; }
+.modal-body.detail { display: grid; gap: 16px; }
+@media (min-width: 720px) { .modal-body.detail { grid-template-columns: 260px 1fr; } }
+.detail-img { width: 100%; border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule); display: block; }
+.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--d-rule); background: var(--d-surface-2); flex-wrap: wrap; }
+.modal-foot-actions { display: flex; gap: 8px; align-items: center; }
+.modal-more { display: flex; justify-content: center; padding: 14px 0 2px; }
+
+/* In-page post preview (stays in admin layout — no new tab) */
+.ed-preview {
+  position: fixed;
+  inset: 0;
+  z-index: 120;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100dvh;
+  max-height: 100dvh;
+  overflow: hidden;
+  background: var(--d-paper, #fff);
+  overscroll-behavior: none;
+}
+.ed-preview-bar {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--d-rule);
+  background: var(--d-surface);
+  box-shadow: var(--d-shadow);
+}
+.ed-preview-bar-left,
+.ed-preview-bar-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+.ed-preview-badge {
+  font-size: 11px;
+  font-weight: 750;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--d-accent-ink);
+  background: var(--d-accent-soft);
+  border: 1px solid var(--d-accent);
+  border-radius: 999px;
+  padding: 3px 9px;
+}
+.ed-preview-title {
+  font-size: 13.5px;
+  font-weight: 650;
+  color: var(--d-ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: min(52vw, 420px);
+}
+.ed-preview-frame {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: #fff;
+  display: block;
+}
+
+/* Parent page must not scroll under the preview overlay */
+html.ed-preview-open,
+body.ed-preview-open {
+  overflow: hidden !important;
+  overscroll-behavior: none;
+}
+
+.dropzone { position: relative; }
+.dropzone.is-dragging { outline: 2px dashed var(--d-accent); outline-offset: -6px; background: var(--d-accent-soft); }
+
+.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 12px; }
+.pick {
+  border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden;
+  background: var(--d-sunk); cursor: pointer; padding: 0; text-align: left; display: flex; flex-direction: column;
+}
+.pick:hover { border-color: var(--d-accent); }
+.pick.is-picked { border-color: var(--d-accent); box-shadow: var(--d-ring); }
+.pick img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
+.pick-blank { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--d-rule); }
+.pick-meta { padding: 7px 9px; font-size: 11.6px; background: var(--d-surface); }
+.pick-alt { display: block; color: var(--d-ink); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pick-alt.is-missing, .media-alt.is-missing { color: var(--d-warn); }
+.pick-sub { display: block; color: var(--d-ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
+
+/* ============================ media library ============================ */
+
+.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; padding: 16px 17px; }
+.media-card {
+  border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden;
+  background: var(--d-sunk); text-align: left; padding: 0; cursor: pointer; display: flex; flex-direction: column;
+}
+.media-card:hover { border-color: var(--d-accent); }
+.media-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
+.media-meta { padding: 8px 10px; font-size: 11.8px; background: var(--d-surface); }
+.media-alt { display: block; color: var(--d-ink); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.media-sub { display: block; color: var(--d-ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
+
+/* post format panels — WordPress-style format-specific editor */
+.format-chip { color: var(--d-accent-ink); font-weight: 600; }
+.format-panel {
+  border: 1px solid var(--d-rule); border-radius: var(--d-radius); background: var(--d-surface);
+  box-shadow: var(--d-shadow); overflow: hidden;
+}
+.format-panel-head {
+  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
+  border-bottom: 1px solid var(--d-rule); background: var(--d-surface-2);
+}
+.format-panel-icon {
+  width: 36px; height: 36px; border-radius: var(--d-radius-sm); display: grid; place-items: center;
+  background: var(--d-accent-soft); color: var(--d-accent-ink); font-size: 18px; font-weight: 700; flex-shrink: 0;
+}
+.format-panel-head h3 { margin: 0; font-size: 15px; letter-spacing: -0.02em; }
+.format-panel-body { padding: 14px 16px 16px; }
+.format-panel-video .format-embed,
+.format-panel-body .format-embed {
+  border-radius: var(--d-radius);
+  overflow: hidden;
+  background: #111;
+}
+.format-video-preview {
+  display: block;
+  width: 100%;
+  max-height: 360px;
+  border-radius: var(--d-radius-sm);
+  background: #111;
+}
+.format-media-hero {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.format-media-placeholder {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: var(--d-radius-sm);
+  background: var(--d-sunk);
+}
+.format-media-empty { width: 100%; min-height: 140px; flex-direction: column; }
+.format-upload-error { margin: 0 16px 12px; padding: 10px 12px; border-radius: var(--d-radius-sm); }
+.format-panel-body .format-embed {
+  position: relative; aspect-ratio: 16 / 9; border-radius: var(--d-radius-sm); overflow: hidden;
+  background: #111; border: 1px solid var(--d-rule);
+}
+.format-embed iframe, .format-embed video { width: 100%; height: 100%; border: 0; display: block; }
+.format-audio { width: 100%; }
+.format-quote-input { font-family: var(--d-read); font-size: 16px; line-height: 1.5; }
+.format-quote-preview {
+  margin: 0; padding: 16px 18px; border-left: 4px solid var(--d-accent);
+  background: var(--d-sunk); border-radius: 0 var(--d-radius-sm) var(--d-radius-sm) 0;
+  font-family: var(--d-read); font-size: 17px; line-height: 1.55;
+}
+.format-quote-preview cite { display: block; margin-top: 8px; font-size: 13px; color: var(--d-ink-3); font-style: normal; }
+.format-link-preview {
+  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--d-rule);
+  border-radius: var(--d-radius-sm); background: var(--d-sunk); text-decoration: none; color: inherit;
+}
+.format-link-preview:hover { border-color: var(--d-accent); }
+.format-link-title { font-weight: 650; color: var(--d-accent-ink); }
+.format-link-url { font-size: 12px; color: var(--d-ink-3); word-break: break-all; }
+.format-image-hero { margin: 0; }
+.format-image-hero img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--d-radius-sm); display: block; }
+.format-image-empty { width: 100%; min-height: 200px; }
+.format-gallery-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px;
+}
+.format-gallery-item { position: relative; margin: 0; border-radius: var(--d-radius-sm); overflow: hidden; border: 1px solid var(--d-rule); }
+.format-gallery-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
+.format-gallery-remove {
+  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 999px;
+  background: rgba(0,0,0,.65); color: #fff; cursor: pointer; font-size: 12px;
+}
+.format-gallery-add {
+  min-height: 110px; border: 1px dashed var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-sunk);
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
+  font: inherit; font-size: 12.5px; color: var(--d-ink-2); cursor: pointer;
+}
+.format-gallery-add:hover { border-color: var(--d-accent); color: var(--d-accent-ink); }
+.ed-compact .ed-input { min-height: 220px; }
+
+/* ============================ SEO modules ============================ */
+
+.seo-module { display: flex; flex-direction: column; gap: 16px; border: 0; margin: 0; padding: 0; min-inline-size: 0; }
+.seo-grid { align-items: start; }
+.seo-banner {
+  padding: 12px 14px; border-radius: var(--d-radius-sm); font-size: 13px; line-height: 1.45;
+  border: 1px solid var(--d-rule); background: var(--d-sunk); color: var(--d-ink-2);
+}
+.seo-banner-warn {
+  border-color: color-mix(in srgb, #c9851a 35%, var(--d-rule));
+  background: color-mix(in srgb, #c9851a 10%, var(--d-card));
+}
+.seo-banner code, .seo-checklist code, .seo-steps code, .seo-preview {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+.seo-status {
+  display: flex; gap: 12px; align-items: flex-start; padding: 12px 13px;
+  border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule); background: var(--d-sunk);
+}
+.seo-status strong { display: block; font-size: 13.2px; font-weight: 650; color: var(--d-ink); }
+.seo-status p { margin: 3px 0 0; font-size: 12.6px; color: var(--d-ink-3); line-height: 1.45; }
+.seo-status-dot {
+  width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0;
+  background: var(--d-ink-3);
+}
+.seo-status.is-ok .seo-status-dot { background: #2f8f5b; box-shadow: 0 0 0 4px color-mix(in srgb, #2f8f5b 18%, transparent); }
+.seo-status.is-warn .seo-status-dot { background: #c9851a; box-shadow: 0 0 0 4px color-mix(in srgb, #c9851a 18%, transparent); }
+.seo-preview {
+  margin: 0; padding: 14px 15px; border-radius: var(--d-radius-sm);
+  background: #12161f; color: #d7deea; font-size: 12.4px; line-height: 1.55;
+  overflow: auto; white-space: pre-wrap; word-break: break-word;
+}
+.seo-preview-sm { font-size: 11.8px; padding: 10px 12px; }
+.seo-checklist, .seo-steps {
+  margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px;
+  font-size: 13.2px; color: var(--d-ink-2); line-height: 1.45;
+}
+.seo-stat-row {
+  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px;
+}
+.seo-stat {
+  padding: 16px 17px; border-radius: var(--d-radius); border: 1px solid var(--d-rule);
+  background: var(--d-card); display: flex; flex-direction: column; gap: 4px;
+}
+.seo-stat-value {
+  font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--d-ink);
+  font-variant-numeric: tabular-nums;
+}
+.seo-stat-label { font-size: 12px; color: var(--d-ink-3); font-weight: 550; }
+.seo-link-list { list-style: none; margin: 0; padding: 0; }
+.seo-link-list li { border-top: 1px solid var(--d-rule); }
+.seo-link-list li:first-child { border-top: 0; }
+.seo-link-list a {
+  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
+  padding: 12px 17px; text-decoration: none; color: var(--d-ink); font-size: 13.2px;
+}
+.seo-link-list a:hover { background: var(--d-sunk); }
+.seo-link-list .mono { color: var(--d-ink-3); font-size: 12px; }
+.redirect-form {
+  display: grid; grid-template-columns: 1.2fr 1.2fr 140px; gap: 12px; align-items: end;
+}
+.redirect-form-note { grid-column: 1 / -1; }
+.redirect-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
+.btn-sm { padding: 4px 9px; font-size: 12.2px; }
+
+/* —— Add / Edit Redirection layout —— */
+.import-file {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.import-file-name { font-size: 12.6px; color: var(--d-ink-3); }
+.import-errors {
+  margin: 8px 0 0;
+  padding-left: 18px;
+  font-size: 12.6px;
+  color: var(--d-crit);
+}
+
+.export-fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.export-fieldset-label {
+  padding: 0;
+  margin: 0 0 4px;
+  font-size: 12.4px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--d-ink-2);
+}
+.export-option {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 12px;
+  align-items: start;
+  padding: 12px 14px;
+  border: 1px solid var(--d-rule);
+  border-radius: var(--d-radius);
+  background: var(--d-card);
+  cursor: pointer;
+  transition: border-color 0.12s ease, background 0.12s ease;
+}
+.export-option:hover { border-color: var(--d-accent); }
+.export-option.is-on {
+  border-color: var(--d-accent);
+  background: color-mix(in srgb, var(--d-accent) 8%, var(--d-card));
+}
+.export-option input {
+  margin-top: 3px;
+  accent-color: var(--d-accent);
+}
+.export-option-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.export-option-label { font-size: 14px; font-weight: 700; color: var(--d-ink); }
+.export-option-desc { font-size: 12.8px; line-height: 1.45; color: var(--d-ink-3); }
+.sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+}
+
+.redir-analytics { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }
+.redir-analytics-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+.redir-rules-block { margin-top: 4px; }
+.redir-log-tbl .redir-log-path { color: var(--d-ink); }
+.redir-log-tbl .redir-log-to { color: var(--d-ink-3); }
+.redir-log-status {
+  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
+}
+.redir-log-status.is-ok { color: var(--d-delta-up); }
+.redir-log-status.is-bad { color: var(--d-crit); }
+
+@media (max-width: 900px) {
+  .redir-analytics-grid { grid-template-columns: 1fr; }
+}
+.redir-body { display: flex; flex-direction: column; gap: 22px; }
+.redir-row {
+  display: grid;
+  grid-template-columns: 160px minmax(0, 1fr);
+  gap: 16px 20px;
+  align-items: start;
+  padding-bottom: 18px;
+  border-bottom: 1px solid var(--d-rule);
+}
+.redir-row.is-muted { opacity: 0.72; }
+.redir-label {
+  font-size: 12.4px; font-weight: 700; letter-spacing: 0.02em;
+  color: var(--d-ink-2); padding-top: 10px;
+}
+.redir-field { min-width: 0; }
+.redir-field.stack { display: flex; flex-direction: column; gap: 10px; }
+.redir-source-line {
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  min-width: 0;
+}
+.redir-source-line > .fld.mono {
+  flex: 1 1 auto;
+  min-width: 0;
+  width: auto;
+}
+select.fld.redir-match {
+  flex: 0 0 132px;
+  width: 132px;
+  min-width: 132px;
+  max-width: 132px;
+  padding-right: 2rem;
+}
+.redir-remove {
+  appearance: none; cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+  flex: 0 0 36px;
+  width: 36px; height: auto; min-height: 36px; padding: 0;
+  border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
+  background: var(--d-card); color: var(--d-crit);
+  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
+}
+.redir-remove svg { width: 14px; height: 14px; display: block; }
+.redir-remove:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--d-crit) 55%, var(--d-rule));
+  background: color-mix(in srgb, var(--d-crit) 8%, transparent);
+}
+.redir-remove:disabled { opacity: 0.35; cursor: not-allowed; }
+.redir-add { align-self: flex-start; margin-top: 2px; }
+.redir-type-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 8px;
+}
+.redir-type-btn {
+  appearance: none; cursor: pointer; text-align: left;
+  padding: 10px 12px; border-radius: var(--d-radius-sm);
+  border: 1px solid var(--d-rule); background: var(--d-card);
+  color: var(--d-ink); font-size: 12.8px; font-weight: 600; line-height: 1.3;
+  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
+}
+.redir-type-btn:hover { border-color: var(--d-accent); color: var(--d-accent-ink); }
+.redir-type-btn.is-on {
+  background: var(--d-accent); border-color: var(--d-accent); color: #fff;
+}
+.redir-status {
+  display: inline-flex; border: 1px solid var(--d-rule); border-radius: 999px; overflow: hidden;
+}
+.redir-status-btn {
+  appearance: none; cursor: pointer; border: 0; background: transparent;
+  padding: 8px 16px; font-size: 12.8px; font-weight: 650; color: var(--d-ink-2);
+}
+.redir-status-btn.is-on { background: var(--d-accent); color: #fff; }
+.redir-note { margin-top: 4px; }
+.redir-actions {
+  display: flex; justify-content: space-between; align-items: center; gap: 12px;
+  padding-top: 8px; flex-wrap: wrap;
+}
+.btn.danger-outline {
+  border-color: color-mix(in srgb, var(--d-crit) 55%, var(--d-rule));
+  color: var(--d-crit);
+}
+.btn.danger-outline:hover { background: color-mix(in srgb, var(--d-crit) 8%, transparent); }
+.btn-text {
+  appearance: none; background: none; border: 0; cursor: pointer;
+  font-size: 12.6px; font-weight: 650; color: var(--d-ink-3); padding: 4px 2px;
+}
+.btn-text.danger { color: var(--d-crit); }
+.btn-text:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.seo-detail-bar { margin-bottom: 4px; }
+.seo-dl {
+  display: grid; gap: 14px; margin: 0;
+}
+.seo-dl > div { display: grid; gap: 4px; }
+.seo-dl dt {
+  font-size: 11.2px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase;
+  color: var(--d-ink-3); margin: 0;
+}
+.seo-dl dd { margin: 0; font-size: 13.6px; color: var(--d-ink); }
+.seo-dl-panel {
+  padding: 15px 17px; border: 1px solid var(--d-rule); border-radius: var(--d-radius);
+  background: var(--d-card);
+}
+.chip-draft { background: var(--d-sunk); color: var(--d-ink-3); border-color: var(--d-rule); }
+
+@media (max-width: 900px) {
+  .seo-stat-row { grid-template-columns: 1fr; }
+  .redirect-form { grid-template-columns: 1fr; }
+  .redir-row { grid-template-columns: 1fr; gap: 8px; }
+  .redir-label { padding-top: 0; }
+  .redir-source-line {
+    flex-wrap: wrap;
+  }
+  .redir-source-line > .fld.mono {
+    flex: 1 1 100%;
+  }
+  select.fld.redir-match {
+    flex: 1 1 auto;
+    width: auto;
+    min-width: 132px;
+    max-width: none;
+  }
+  .redir-remove {
+    flex: 0 0 36px;
+  }
+}
+
+/* ============================ responsive ============================ */
+
+@media (max-width: 999px) {
+  .bp-admin-wrapper,
+  .shell {
+    height: auto;
+    min-height: 100vh;
+    min-height: 100dvh;
+    overflow: visible;
+  }
+  .side {
+    flex-direction: column;
+    gap: 12px;
+    height: auto;
+    max-height: none;
+    overflow: visible;
+    position: static;
+  }
+  .side-scroll {
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    gap: 20px;
+    max-height: none;
+  }
+  .side-group { min-width: 190px; }
+  .main {
+    height: auto;
+    overflow: visible;
+  }
+  .body {
+    overflow: visible;
+  }
+  .top { position: static; }
+  .ed-bar { position: static; }
+  .ed.is-active .ed-chrome { top: 0; }
+  .panel-form { position: static; }
+}
+@media (max-width: 720px) {
+  .body { padding: 16px 14px 60px; }
+  .top { padding: 12px 14px; }
+  .row { grid-template-columns: 1fr; }
+  .row-right { justify-content: flex-start; }
+  .ed-title { font-size: 22px; }
+}
+
+/* Scope to admin shell so public site hero animations keep working when
+   prefers-reduced-motion is unset; site-*.css handle their own reduce rules. */
+@media (prefers-reduced-motion: reduce) {
+  .bp-admin-wrapper *,
+  .shell * {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+.route-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  min-height: 42vh;
+  padding: 40px 20px;
+}
+.route-loading-bar {
+  width: min(220px, 50vw);
+  height: 3px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, transparent, var(--d-accent, #2e3a8c), transparent);
+  background-size: 200% 100%;
+  animation: route-loading-slide 1s linear infinite;
+}
+.route-loading-label {
+  margin: 0;
+  font-size: 13px;
+  color: var(--d-ink-3);
+}
+@keyframes route-loading-slide {
+  from { background-position: 100% 0; }
+  to { background-position: -100% 0; }
+}
+
+
+
+/* Public post details (BlogUploader article page) — scoped under .bp-site-article */
+
+.bp-site-article {
+  --bp-paper: #ffffff;
+  --bp-paper-2: #f8f9fc;
+  --bp-ink: #16172b;
+  --bp-ink-2: #3a3d55;
+  --bp-ink-3: #6b6f8a;
+  --bp-rule: #e4e6f0;
+  --bp-accent: var(--bp-color-primary, #2e3a8c);
+  --bp-sunk: #eef0f7;
+  --bp-radius-sm: 10px;
+  --bp-site-pad: clamp(16px, 4vw, 28px);
+  --bp-site-max: 1120px;
+  --bp-measure: 68ch;
+  --bp-font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --bp-font-display: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
+  --bp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-out: var(--bp-ease-out);
+  color: var(--bp-ink);
+  background: var(--bp-paper);
+  font-family: var(--bp-font-ui);
+}
+
+/* Full-bleed inside admin Shell body */
+.body:has(.admin-post-detail) {
+  padding: 0 !important;
+  gap: 0 !important;
+}
+.admin-post-detail {
+  min-height: 100%;
+}
+
+.bp-site-article .progress {
+  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent;
+}
+.bp-site-article .progress span {
+  display: block; height: 100%; background: var(--bp-accent); transition: width 0.08s linear;
+}
+
+/* Match BlogUploader looping hero text animation (list media hero + article).
+   Scoped to .bp-root so both .bp-site-index and .bp-site-article inherit it. */
+@keyframes hero-fade-slide-from-left {
+  0% { opacity: 0; transform: translateX(-56px); }
+  12% { opacity: 1; transform: translateX(0); }
+  72% { opacity: 1; transform: translateX(0); }
+  88% { opacity: 0; transform: translateX(-56px); }
+  100% { opacity: 0; transform: translateX(-56px); }
+}
+@keyframes hero-fade-slide-from-right {
+  0% { opacity: 0; transform: translateX(56px); }
+  12% { opacity: 1; transform: translateX(0); }
+  72% { opacity: 1; transform: translateX(0); }
+  88% { opacity: 0; transform: translateX(56px); }
+  100% { opacity: 0; transform: translateX(56px); }
+}
+
+.bp-root {
+  --bp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-out: var(--bp-ease-out);
+}
+
+.bp-root .hero-fade-slide {
+  --hero-loop: 5s;
+  animation-duration: var(--hero-loop);
+  animation-timing-function: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  /* Negative delay keeps stagger offset on every loop */
+  animation-delay: calc(var(--slide-delay, 0ms) * -1);
+}
+.bp-root .hero-fade-slide-left {
+  animation-name: hero-fade-slide-from-left;
+}
+.bp-root .hero-fade-slide-right {
+  animation-name: hero-fade-slide-from-right;
+}
+@media (prefers-reduced-motion: reduce) {
+  .bp-root .hero-fade-slide {
+    opacity: 1;
+    transform: none;
+    animation: none !important;
+  }
+}
+
+.bp-site-article .article-detail-hero { width: 100%; font-family: var(--bp-font-ui); }
+.bp-site-article .article-hero-media {
+  margin: 0 auto; width: 100%; max-width: 1200px; background: #0a0b10; overflow: hidden;
+}
+.bp-site-article .article-hero-visual {
+  display: block; width: 100%; max-width: 1200px; height: auto; margin: 0 auto;
+  aspect-ratio: 1200 / 630; object-fit: cover; border: 0;
+}
+.bp-site-article .article-hero-caption {
+  margin: 0 auto; padding: 12px var(--bp-site-pad) 0; max-width: var(--bp-site-max);
+  font-size: 12.8px; color: var(--bp-ink-3);
+}
+.bp-site-article .article-hero-copy {
+  width: 100%;
+  padding: clamp(32px, 5vw, 56px) var(--bp-site-pad) clamp(20px, 3vw, 32px);
+  border-bottom: 1px solid var(--bp-rule);
+  background: linear-gradient(180deg, var(--bp-paper-2) 0%, var(--bp-paper) 100%);
+}
+.bp-site-article .blog-details-hero .article-hero-copy {
+  border-bottom: 0;
+  background: transparent;
+  padding-top: 0;
+}
+.bp-site-article .article-hero-copy-inner { max-width: min(860px, 100%); margin: 0 auto; }
+.bp-site-article .blog-details-hero .article-hero-copy-inner { max-width: 1200px; }
+.bp-site-article .article-hero-title {
+  font-family: var(--bp-font-display);
+  font-size: clamp(32px, 5.2vw, 52px);
+  line-height: 1.08; letter-spacing: -0.028em; font-weight: 700; margin: 16px 0 0;
+  text-wrap: balance;
+}
+.bp-site-article .blog-details-hero .article-hero-title {
+  font-size: clamp(36px, 5.8vw, 58px);
+}
+.bp-site-article .standfirst,
+.bp-site-article .article-hero-standfirst {
+  font-size: clamp(18px, 2.2vw, 21px); line-height: 1.55; color: var(--bp-ink-2);
+  margin: 18px 0 0; max-width: 62ch;
+}
+.bp-site-article .blog-details-hero .standfirst,
+.bp-site-article .blog-details-hero .article-hero-standfirst {
+  margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, 0.9);
+  text-align: center; max-width: 48ch;
+}
+.bp-site-article .blog-details-hero .byline-row { justify-content: center; }
+.bp-site-article .blog-details-hero .breadcrumb { justify-content: center; }
+.bp-site-article .eyebrow {
+  display: inline-block; font-size: 11.5px; font-weight: 750; letter-spacing: 0.1em;
+  text-transform: uppercase; color: var(--bp-accent); text-decoration: none;
+  background: color-mix(in srgb, var(--bp-accent) 10%, transparent);
+  padding: 4px 11px; border-radius: 100px;
+}
+.bp-site-article .byline-row { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
+.bp-site-article .byline-faces { display: flex; }
+.bp-site-article .byline-faces img,
+.bp-site-article .face-fallback {
+  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
+  border: 2px solid var(--bp-paper); margin-left: -8px; background: var(--bp-sunk);
+  display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--bp-ink-2);
+}
+.bp-site-article .blog-details-hero .byline-faces img,
+.bp-site-article .blog-details-hero .face-fallback {
+  border-color: #0B4A75; color: #0B4A75; background: #fff;
+}
+.bp-site-article .byline-faces img:first-child,
+.bp-site-article .face-fallback:first-child { margin-left: 0; }
+.bp-site-article .byline-text { display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
+.bp-site-article .byline-text .by { font-weight: 650; color: var(--bp-ink); }
+.bp-site-article .blog-details-hero .byline-text .by,
+.bp-site-article .blog-details-hero .byline-text .meta { color: rgba(255,255,255,0.92); }
+.bp-site-article .byline-text .meta {
+  color: var(--bp-ink-3); display: flex; gap: 12px; flex-wrap: wrap; font-size: 13.4px;
+}
+
+.bp-site-article .article-shell {
+  display: grid; gap: 32px; padding: 40px var(--bp-site-pad) 64px;
+  align-items: start; max-width: var(--bp-site-max); margin: 0 auto; width: 100%; box-sizing: border-box;
+}
+@media (min-width: 1040px) {
+  .bp-site-article .article-shell {
+    grid-template-columns: minmax(0, 1fr) 280px; column-gap: 40px;
+  }
+}
+.bp-site-article .article { min-width: 0; max-width: none; }
+.bp-site-article .rail { display: none; width: 100%; }
+@media (min-width: 1040px) {
+  .bp-site-article .rail { display: block; position: sticky; top: 96px; }
+}
+.bp-site-article .rail-title {
+  font-size: 11px; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase;
+  color: var(--bp-ink-3); margin: 0 0 12px;
+}
+.bp-site-article .toc ol {
+  list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--bp-rule);
+  display: flex; flex-direction: column; gap: 9px;
+}
+.bp-site-article .toc li.sub { padding-left: 12px; }
+.bp-site-article .toc a {
+  font-size: 13.4px; line-height: 1.4; color: var(--bp-ink-2); text-decoration: none; display: block;
+}
+.bp-site-article .toc a:hover { color: var(--bp-accent); }
+
+.bp-site-article .article-rail-details { margin-bottom: 26px; display: flex; flex-direction: column; gap: 22px; }
+.bp-site-article .rail-details-mobile { margin: 0 0 28px; }
+.bp-site-article .rail-details-desktop { display: none; }
+@media (min-width: 1040px) {
+  .bp-site-article .rail-details-mobile { display: none; }
+  .bp-site-article .rail-details-desktop { display: flex; }
+}
+.bp-site-article .rail-owner-panel,
+.bp-site-article .rail-related-panel {
+  background: var(--bp-paper); border: 1px solid var(--bp-rule); border-radius: 12px;
+  box-shadow: 0 1px 2px rgba(22, 23, 43, 0.04), 0 10px 24px -18px rgba(22, 23, 43, 0.22);
+  overflow: hidden; display: flex; flex-direction: column;
+}
+.bp-site-article .rail-owner-list {
+  list-style: none; margin: 0; padding: 14px 17px; display: flex; flex-direction: column; gap: 14px;
+}
+.bp-site-article .rail-owner { display: flex; gap: 12px; align-items: flex-start; }
+.bp-site-article .rail-owner img,
+.bp-site-article .rail-owner-fallback {
+  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
+}
+.bp-site-article .rail-owner img { object-fit: cover; }
+.bp-site-article .rail-owner-fallback {
+  display: grid; place-items: center;
+  background: color-mix(in srgb, var(--bp-accent) 16%, var(--bp-sunk));
+  color: var(--bp-accent); font-size: 12px; font-weight: 750;
+}
+.bp-site-article .rail-owner-name { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--bp-ink); }
+.bp-site-article .rail-owner-role { margin: 2px 0 0; font-size: 12px; color: var(--bp-ink-3); }
+.bp-site-article .rail-owner-bio {
+  margin: 6px 0 0; font-size: 12.4px; line-height: 1.45; color: var(--bp-ink-2);
+  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
+}
+.bp-site-article .rail-related-head {
+  padding: 13px 17px; border-bottom: 1px solid var(--bp-rule);
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+}
+.bp-site-article .rail-related-head h3 {
+  margin: 0; font-size: 13.5px; font-weight: 680; letter-spacing: -0.005em; color: var(--bp-ink);
+}
+.bp-site-article .rail-related-rows { display: flex; flex-direction: column; }
+.bp-site-article .rail-related-row {
+  padding: 12px 17px; border-bottom: 1px solid color-mix(in srgb, var(--bp-rule) 70%, transparent);
+}
+.bp-site-article .rail-related-row:last-child { border-bottom: 0; }
+.bp-site-article .rail-related-row:hover { background: var(--bp-paper-2); }
+.bp-site-article .rail-related-t {
+  font-size: 14px; font-weight: 620; color: var(--bp-ink); text-decoration: none;
+  letter-spacing: -0.005em; display: block; line-height: 1.35;
+  border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font: inherit;
+}
+.bp-site-article .rail-related-t:hover { color: var(--bp-accent); }
+.bp-site-article .rail-related-sub {
+  font-size: 12.2px; color: var(--bp-ink-3); margin-top: 3px;
+  display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: center;
+}
+.bp-site-article .rail-related-sub a,
+.bp-site-article .rail-related-sub .bp-linkish {
+  color: var(--bp-accent); text-decoration: none; font-weight: 600;
+  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
+}
+.bp-site-article .rail-related-sub a:hover,
+.bp-site-article .rail-related-sub .bp-linkish:hover { text-decoration: underline; }
+
+.bp-site-article .prose {
+  font-family: var(--bp-font-display);
+  font-size: 18.5px; line-height: 1.72; max-width: var(--bp-measure);
+}
+.bp-site-article .prose > * { margin: 0 0 1.15em; }
+.bp-site-article .prose h2,
+.bp-site-article .prose h3 {
+  font-family: var(--bp-font-display); letter-spacing: -0.02em; line-height: 1.25;
+  position: relative; scroll-margin-top: 96px;
+}
+.bp-site-article .prose h2 { font-size: clamp(24px, 3vw, 30px); margin: 1.9em 0 0.55em; font-weight: 700; }
+.bp-site-article .prose h3 { font-size: clamp(20px, 2.4vw, 23px); margin: 1.6em 0 0.45em; font-weight: 700; }
+.bp-site-article .prose a { color: var(--bp-accent); }
+.bp-site-article .prose blockquote {
+  margin: 1.7em 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--bp-accent);
+  font-size: 1.06em; color: var(--bp-ink-2); font-style: italic;
+}
+.bp-site-article .prose img { border-radius: 12px; display: block; max-width: 100%; height: auto; }
+
+.bp-site-article .tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
+.bp-site-article .tag-pill {
+  font-size: 12.6px; color: var(--bp-ink-2); background: var(--bp-sunk);
+  border: 1px solid var(--bp-rule); border-radius: 100px; padding: 4px 12px;
+  text-decoration: none; cursor: pointer; font: inherit;
+}
+.bp-site-article .share {
+  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13.4px;
+}
+.bp-site-article .share-label {
+  font-weight: 750; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--bp-ink-3);
+}
+.bp-site-article .share a { color: var(--bp-ink-2); text-decoration: none; }
+.bp-site-article .share a:hover { color: var(--bp-accent); }
+.bp-site-article .share-copy summary { cursor: pointer; color: var(--bp-ink-2); list-style: none; }
+.bp-site-article .share-copy summary::-webkit-details-marker { display: none; }
+.bp-site-article .share-copy input {
+  font: inherit; font-size: 12.5px; margin-top: 8px; width: min(320px, 100%);
+  padding: 7px 10px; border: 1px solid var(--bp-rule); border-radius: 8px;
+  background: var(--bp-paper-2); color: var(--bp-ink-2);
+}
+.bp-site-article .share-foot { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--bp-rule); }
+
+.bp-site-article .author-card {
+  display: flex; gap: 16px; align-items: flex-start; margin-top: 30px; padding: 20px;
+  background: var(--bp-paper-2); border: 1px solid var(--bp-rule); border-radius: 12px;
+}
+.bp-site-article .author-name { margin: 0; font-weight: 700; font-size: 15px; }
+.bp-site-article .author-name span { font-weight: 400; color: var(--bp-ink-3); }
+.bp-site-article .author-bio { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--bp-ink-2); }
+
+.bp-site-article .comments {
+  margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--bp-rule);
+}
+.bp-site-article .comments h2 {
+  font-family: var(--bp-font-display); font-size: 26px; letter-spacing: -0.02em; margin: 0 0 18px;
+}
+.bp-site-article .comments-count { font-weight: 500; color: var(--bp-ink-3); font-size: 0.85em; }
+.bp-site-article .comments-closed,
+.bp-site-article .comments-empty { margin: 0 0 22px; color: var(--bp-ink-3); font-size: 14.5px; }
+.bp-site-article .comments-list {
+  list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 16px;
+}
+.bp-site-article .comment-item {
+  padding: 16px 18px; border: 1px solid var(--bp-rule); border-radius: 12px; background: var(--bp-paper-2);
+}
+.bp-site-article .comment-profile { display: flex; gap: 14px; align-items: flex-start; }
+.bp-site-article .comment-avatar {
+  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
+  background: color-mix(in srgb, var(--bp-accent) 16%, var(--bp-sunk));
+  color: var(--bp-accent); font-size: 13px; font-weight: 750;
+}
+.bp-site-article .comment-meta {
+  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin-bottom: 8px;
+  font-size: 13px; color: var(--bp-ink-3);
+}
+.bp-site-article .comment-author { color: var(--bp-ink); font-size: 14.5px; }
+.bp-site-article .comment-body {
+  margin: 0; font-size: 15px; line-height: 1.65; color: var(--bp-ink-2);
+  white-space: pre-wrap; word-break: break-word;
+}
+.bp-site-article .comment-form {
+  display: flex; flex-direction: column; gap: 14px; padding: 20px;
+  border: 1px solid var(--bp-rule); border-radius: 12px; background: var(--bp-paper);
+}
+.bp-site-article .comment-form-title { margin: 0; font-size: 16px; font-weight: 700; }
+.bp-site-article .comment-form-grid { display: grid; gap: 12px; }
+@media (min-width: 640px) {
+  .bp-site-article .comment-form-grid { grid-template-columns: 1fr 1fr; }
+}
+.bp-site-article .comment-form label {
+  display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--bp-ink-2);
+}
+.bp-site-article .comment-form label em {
+  font-style: normal; font-weight: 450; color: var(--bp-ink-3);
+}
+.bp-site-article .comment-form input,
+.bp-site-article .comment-form textarea {
+  font: inherit; font-weight: 450; font-size: 14.5px; padding: 10px 12px;
+  border: 1px solid var(--bp-rule); border-radius: 8px; background: var(--bp-paper-2); color: var(--bp-ink);
+}
+.bp-site-article .comment-form input:focus,
+.bp-site-article .comment-form textarea:focus {
+  outline: none; border-color: var(--bp-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 18%, transparent);
+}
+.bp-site-article .comment-body-field textarea { resize: vertical; min-height: 120px; }
+.bp-site-article .comment-submit {
+  align-self: flex-start; font: inherit; font-weight: 650; font-size: 14px;
+  padding: 10px 16px; border: 0; border-radius: 8px; background: var(--bp-accent); color: #fff; cursor: pointer;
+}
+.bp-site-article .comment-submit:disabled { opacity: 0.65; cursor: wait; }
+.bp-site-article .comment-error {
+  margin: 0; padding: 10px 12px; border-radius: 8px;
+  background: color-mix(in srgb, #c44 12%, transparent); color: #9a2f2f; font-size: 13.5px;
+}
+.bp-site-article .comment-ok {
+  margin: 0; padding: 10px 12px; border-radius: 8px;
+  background: color-mix(in srgb, #2f8f5b 12%, transparent); color: #1f6b42; font-size: 13.5px;
+}
+.bp-site-article .comment-moderation-note { margin: 0; font-size: 12.5px; color: var(--bp-ink-3); }
+.bp-site-article .comment-hp {
+  position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
+}
+
+
+
+/* Public post list (BlogUploader index) — scoped under .bp-site-index */
+
+.bp-site-index {
+  --bp-accent: var(--bp-color-primary, #2e3a8c);
+  --accent: var(--bp-accent);
+  --bp-ink: #14151c;
+  --bp-ink-2: #4a4e60;
+  --bp-ink-3: #757a8c;
+  --bp-paper: #ffffff;
+  --bp-paper-2: #f8f9fc;
+  --bp-sunk: #f0f2f7;
+  --bp-rule: #e6e8f0;
+  --bp-measure: 68ch;
+  --bp-font-body: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
+  --bp-font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-body: var(--bp-font-body);
+  --font-ui: var(--bp-font-ui);
+  --bp-radius: 16px;
+  --bp-radius-sm: 10px;
+  --bp-shadow: 0 2px 8px rgba(20, 21, 28, 0.04), 0 24px 48px -28px rgba(20, 21, 28, 0.28);
+  --bp-shadow-hover: 0 8px 24px rgba(20, 21, 28, 0.08), 0 32px 64px -24px rgba(20, 21, 28, 0.22);
+  --bp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-out: var(--bp-ease-out);
+  --bp-site-pad: clamp(20px, 4.5vw, 56px);
+  --site-pad: var(--bp-site-pad);
+  --bp-site-max: 1680px;
+  --site-max: var(--bp-site-max);
+  color: var(--bp-ink);
+  background: var(--bp-paper);
+  font-family: var(--bp-font-body);
+  font-size: 18px;
+  line-height: 1.68;
+  -webkit-font-smoothing: antialiased;
+  width: 100%;
+  min-height: 100%;
+}
+
+.bp-site-index *,
+.bp-site-index *::before,
+.bp-site-index *::after {
+  box-sizing: border-box;
+}
+
+.bp-site-index a {
+  color: var(--bp-accent);
+  text-underline-offset: 2px;
+}
+
+.bp-site-index :focus-visible {
+  outline: 2px solid var(--bp-accent);
+  outline-offset: 3px;
+  border-radius: 3px;
+}
+
+.bp-site-index img {
+  max-width: 100%;
+  height: auto;
+}
+
+.bp-site-index .wrap {
+  width: 100%;
+  max-width: var(--bp-site-max);
+  margin: 0 auto;
+  padding: 0 var(--bp-site-pad);
+}
+
+@keyframes bp-site-rise {
+  from { opacity: 0; transform: translateY(28px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes bp-site-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes bp-site-scale-in {
+  from { opacity: 0; transform: scale(0.96) translateY(12px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+@keyframes bp-site-index-bridge-breathe {
+  0%, 100% { opacity: 0.55; transform: translateX(-50%) scaleX(0.92); }
+  50% { opacity: 0.95; transform: translateX(-50%) scaleX(1); }
+}
+
+.bp-site-index .site-animate-in > .site-animate-item {
+  animation: bp-site-rise 0.75s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
+}
+.bp-site-index .site-animate-in > .site-animate-item:nth-child(1) { animation-delay: 0.04s; }
+.bp-site-index .site-animate-in > .site-animate-item:nth-child(2) { animation-delay: 0.1s; }
+.bp-site-index .site-animate-in > .site-animate-item:nth-child(3) { animation-delay: 0.16s; }
+.bp-site-index .site-animate-in > .site-animate-item:nth-child(4) { animation-delay: 0.22s; }
+.bp-site-index .site-animate-in > .site-animate-item:nth-child(5) { animation-delay: 0.28s; }
+.bp-site-index .site-animate-in > .site-animate-item:nth-child(6) { animation-delay: 0.34s; }
+.bp-site-index .site-animate-in > .site-animate-item:nth-child(7) { animation-delay: 0.4s; }
+.bp-site-index .site-animate-in > .site-animate-item:nth-child(8) { animation-delay: 0.46s; }
+
+/* --- hero --------------------------------------------------------------- */
+
+.bp-site-index .site-hero {
+  position: relative;
+  width: 100%;
+  padding: clamp(56px, 10vw, 112px) var(--bp-site-pad) clamp(40px, 6vw, 72px);
+  overflow: hidden;
+  border-bottom: 1px solid var(--bp-rule);
+  background:
+    radial-gradient(ellipse 90% 70% at 50% -30%, color-mix(in srgb, var(--bp-accent) 14%, transparent), transparent 55%),
+    linear-gradient(180deg, var(--bp-paper-2) 0%, var(--bp-paper) 100%);
+}
+
+.bp-site-index .site-hero-glow {
+  position: absolute;
+  inset: auto -20% -40% -20%;
+  height: 60%;
+  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--bp-accent) 8%, transparent), transparent 70%);
+  pointer-events: none;
+  animation: bp-site-fade 1.2s var(--bp-ease-out) both;
+}
+
+.bp-site-index .site-hero-inner {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: var(--bp-site-max);
+  margin: 0 auto;
+}
+
+.bp-site-index .site-hero-eyebrow {
+  margin: 0;
+  font-family: var(--bp-font-ui);
+  font-size: 12px;
+  font-weight: 750;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--bp-accent);
+}
+
+.bp-site-index .site-hero-title {
+  margin: 14px 0 0;
+  font-family: var(--bp-font-body);
+  font-size: clamp(36px, 6.5vw, 64px);
+  line-height: 1.05;
+  letter-spacing: -0.035em;
+  font-weight: 700;
+  text-wrap: balance;
+  max-width: 18ch;
+}
+
+.bp-site-index .site-hero-desc {
+  margin: 18px 0 0;
+  font-family: var(--bp-font-ui);
+  font-size: clamp(17px, 2.2vw, 20px);
+  line-height: 1.55;
+  color: var(--bp-ink-2);
+  max-width: 52ch;
+}
+
+/* --- feed bridge -------------------------------------------------------- */
+
+.bp-site-index .site-index-feed {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  margin-top: clamp(-28px, -3vw, -16px);
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--bp-paper-2) 88%, transparent) 0%,
+      var(--bp-paper) 42%,
+      var(--bp-paper) 100%
+    );
+  border-top: 1px solid color-mix(in srgb, var(--bp-rule) 70%, transparent);
+  box-shadow: 0 -24px 48px -28px color-mix(in srgb, #000 28%, transparent);
+}
+
+.bp-site-index .site-index-bridge {
+  position: relative;
+  height: clamp(28px, 4vw, 44px);
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.bp-site-index .site-index-bridge-glow {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: min(520px, 70vw);
+  height: 100%;
+  transform: translateX(-50%);
+  background: radial-gradient(
+    ellipse at center top,
+    color-mix(in srgb, var(--bp-accent) 22%, transparent) 0%,
+    transparent 70%
+  );
+  opacity: 0.85;
+  animation: bp-site-index-bridge-breathe 5.5s ease-in-out infinite;
+}
+
+.bp-site-index .site-index-bridge-line {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: min(180px, 40vw);
+  height: 1px;
+  transform: translate(-50%, -50%);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--bp-accent) 55%, var(--bp-rule)),
+    transparent
+  );
+}
+
+.bp-site-index .site-index-feed-inner { width: 100%; }
+
+.bp-site-index .site-index-feed-head {
+  width: 100%;
+  max-width: var(--bp-site-max);
+  margin: 0 auto;
+  padding: clamp(8px, 1.5vw, 16px) var(--bp-site-pad) clamp(20px, 3vw, 32px);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.bp-site-index .site-index-feed-eyebrow {
+  margin: 0;
+  flex: 0 0 auto;
+  font-family: var(--bp-font-ui);
+  font-size: 12px;
+  font-weight: 750;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--bp-ink-3);
+}
+
+.bp-site-index .site-index-feed-rule {
+  display: block;
+  flex: 1 1 auto;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    var(--bp-rule),
+    color-mix(in srgb, var(--bp-rule) 20%, transparent)
+  );
+}
+
+.bp-site-index .site-page,
+.bp-site-index .site-index-feed-body {
+  width: 100%;
+  max-width: var(--bp-site-max);
+  margin: 0 auto;
+  padding: 0 var(--bp-site-pad) clamp(48px, 8vw, 80px);
+}
+
+.bp-site-index .site-index-feed-body .cat-bar { margin-top: 0; }
+
+/* --- category bar ------------------------------------------------------- */
+
+.bp-site-index .cat-bar {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  font-family: var(--bp-font-ui);
+  font-size: 13.6px;
+  margin: clamp(28px, 4vw, 40px) 0 clamp(24px, 3vw, 36px);
+  padding-bottom: 4px;
+}
+
+.bp-site-index .cat-bar button,
+.bp-site-index .cat-bar a {
+  font: inherit;
+  color: var(--bp-ink-2);
+  text-decoration: none;
+  padding: 8px 16px;
+  border: 1px solid var(--bp-rule);
+  border-radius: 100px;
+  background: var(--bp-paper);
+  cursor: pointer;
+  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s var(--bp-ease-out), box-shadow 0.2s ease;
+}
+
+.bp-site-index .cat-bar button:hover,
+.bp-site-index .cat-bar a:hover {
+  border-color: color-mix(in srgb, var(--bp-accent) 40%, var(--bp-rule));
+  color: var(--bp-accent);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--bp-accent) 35%, transparent);
+}
+
+.bp-site-index .cat-bar button[aria-current="page"],
+.bp-site-index .cat-bar a[aria-current="page"] {
+  background: var(--bp-accent);
+  border-color: var(--bp-accent);
+  color: #fff;
+  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--bp-accent) 65%, transparent);
+}
+
+/* --- cards -------------------------------------------------------------- */
+
+.bp-site-index .post-grid,
+.bp-site-index .card-grid {
+  list-style: none;
+  margin: 0 0 clamp(32px, 5vw, 48px);
+  padding: 0;
+  display: grid;
+  gap: clamp(20px, 3vw, 28px);
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
+}
+
+.bp-site-index .post-grid-lead {
+  grid-template-columns: 1fr !important;
+  margin-bottom: clamp(24px, 4vw, 36px);
+}
+
+.bp-site-index .card {
+  border: 1px solid var(--bp-rule);
+  border-radius: var(--bp-radius);
+  background: var(--bp-paper);
+  box-shadow: var(--bp-shadow);
+  overflow: hidden;
+  transition: box-shadow 0.4s var(--bp-ease-out), border-color 0.3s ease, transform 0.4s var(--bp-ease-out);
+  animation: bp-site-scale-in 0.65s var(--bp-ease-out) both;
+  animation-delay: calc(var(--motion-i, 0) * 50ms);
+}
+
+.bp-site-index .card:hover {
+  box-shadow: var(--bp-shadow-hover);
+  border-color: color-mix(in srgb, var(--bp-accent) 28%, var(--bp-rule));
+  transform: translateY(-6px);
+}
+
+.bp-site-index .card > a,
+.bp-site-index .card > button.card-link {
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.bp-site-index .card-img {
+  display: block;
+  overflow: hidden;
+  background: var(--bp-sunk);
+}
+
+.bp-site-index .card-img img {
+  display: block;
+  width: 100%;
+  aspect-ratio: 3 / 2;
+  object-fit: cover;
+  transition: transform 0.55s var(--bp-ease-out);
+}
+
+.bp-site-index .card:hover .card-img img { transform: scale(1.06); }
+
+.bp-site-index .card-img-blank {
+  aspect-ratio: 3 / 2;
+  background: linear-gradient(135deg, var(--bp-sunk), var(--bp-paper-2));
+}
+
+.bp-site-index .card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-family: var(--bp-font-ui);
+  padding: 18px 18px 20px;
+  flex: 1;
+}
+
+.bp-site-index .card-eyebrow {
+  font-size: 11px;
+  font-weight: 750;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--bp-accent);
+}
+
+.bp-site-index .card-title {
+  font-family: var(--bp-font-body);
+  font-size: clamp(18px, 2.2vw, 21px);
+  line-height: 1.28;
+  letter-spacing: -0.018em;
+  font-weight: 700;
+  transition: color 0.2s ease;
+}
+
+.bp-site-index .card:hover .card-title { color: var(--bp-accent); }
+
+.bp-site-index .card-excerpt {
+  font-size: 14.5px;
+  line-height: 1.6;
+  color: var(--bp-ink-2);
+}
+
+.bp-site-index .card-meta {
+  font-size: 12.8px;
+  color: var(--bp-ink-3);
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-top: auto;
+  padding-top: 4px;
+}
+
+.bp-site-index .card-lead { border-width: 1px; }
+.bp-site-index .card-lead > a,
+.bp-site-index .card-lead > button.card-link {
+  gap: 0;
+  flex-direction: column;
+}
+
+@media (min-width: 900px) {
+  .bp-site-index .card-lead > a,
+  .bp-site-index .card-lead > button.card-link {
+    flex-direction: row;
+    align-items: stretch;
+  }
+  .bp-site-index .card-lead .card-img { flex: 1 1 58%; min-height: 100%; }
+  .bp-site-index .card-lead .card-img img,
+  .bp-site-index .card-lead .card-img-blank {
+    aspect-ratio: auto;
+    height: 100%;
+    min-height: 320px;
+  }
+  .bp-site-index .card-lead .card-body {
+    flex: 1 1 42%;
+    justify-content: center;
+    padding: clamp(24px, 4vw, 40px);
+    gap: 12px;
+  }
+  .bp-site-index .card-lead .card-title {
+    font-size: clamp(28px, 3.8vw, 40px);
+    line-height: 1.12;
+  }
+  .bp-site-index .card-lead .card-excerpt { font-size: 17px; }
+}
+
+/* --- pagination / empty / loading --------------------------------------- */
+
+.bp-site-index .pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  font-family: var(--bp-font-ui);
+  font-size: 14px;
+  padding: 16px 0 8px;
+  border-top: 1px solid var(--bp-rule);
+  margin-top: 8px;
+}
+
+.bp-site-index .pagination button {
+  font: inherit;
+  text-decoration: none;
+  padding: 10px 18px;
+  border: 1px solid var(--bp-rule);
+  border-radius: 100px;
+  color: var(--bp-ink-2);
+  background: var(--bp-paper);
+  cursor: pointer;
+  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--bp-ease-out);
+}
+
+.bp-site-index .pagination button:hover:not(:disabled) {
+  border-color: var(--bp-accent);
+  color: var(--bp-accent);
+  transform: translateY(-2px);
+}
+
+.bp-site-index .pagination button:disabled,
+.bp-site-index .pagination [aria-disabled="true"] {
+  color: var(--bp-ink-3);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.bp-site-index .empty {
+  padding: clamp(48px, 8vw, 80px) 0;
+  color: var(--bp-ink-3);
+  font-family: var(--bp-font-ui);
+  font-size: 17px;
+}
+
+.bp-site-index .bp-state {
+  padding: clamp(48px, 8vw, 80px) var(--bp-site-pad);
+  font-family: var(--bp-font-ui);
+  color: var(--bp-ink-3);
+  text-align: center;
+}
+
+.bp-site-index .bp-state--error { color: #b91c1c; }
+
+@media (prefers-reduced-motion: reduce) {
+  .bp-site-index .site-animate-in > .site-animate-item,
+  .bp-site-index .card,
+  .bp-site-index .site-hero-glow,
+  .bp-site-index .site-index-bridge-glow {
+    animation: none !important;
+    opacity: 1;
+    transform: none;
+  }
+  .bp-site-index .card:hover { transform: none; }
+  .bp-site-index .card:hover .card-img img { transform: none; }
+}
+
+/* --- media hero (BlogUploader SiteMediaHero) ----------------------------- */
+
+@keyframes hero-ken-burns {
+  from { transform: scale(1.04); }
+  to { transform: scale(1.12); }
+}
+@keyframes hero-scrim-pulse {
+  0%, 100% { opacity: 0.92; }
+  50% { opacity: 0.98; }
+}
+@keyframes hero-loop-arrow {
+  0%, 100% { transform: translateX(0); }
+  50% { transform: translateX(6px); }
+}
+
+.bp-site-index .site-hero-media {
+  position: relative;
+  width: 100%;
+  min-height: clamp(520px, 92vh, 920px);
+  display: flex;
+  align-items: flex-end;
+  overflow: hidden;
+  color: #fff;
+  isolation: isolate;
+  --hero-shadow-ink: #141418;
+  --hero-shadow-gray: #2e2e34;
+  --hero-shadow-soft: rgba(0, 0, 0, 0.42);
+  --hero-shadow-mid: rgba(0, 0, 0, 0.55);
+  --hero-shadow-deep: rgba(0, 0, 0, 0.72);
+  --hero-text-depth:
+    0 1px 0 var(--hero-shadow-gray),
+    0 2px 4px var(--hero-shadow-soft),
+    0 6px 14px var(--hero-shadow-mid);
+  --hero-text-depth-lg:
+    0 1px 0 var(--hero-shadow-gray),
+    0 3px 6px var(--hero-shadow-soft),
+    0 8px 20px var(--hero-shadow-mid),
+    0 16px 40px var(--hero-shadow-deep);
+}
+
+.bp-site-index .site-hero-media-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: #0a0b10;
+  overflow: hidden;
+}
+
+.bp-site-index .site-hero-media-slide {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transition: opacity 0.85s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
+  pointer-events: none;
+}
+.bp-site-index .site-hero-media-slide.is-active {
+  opacity: 1;
+  z-index: 1;
+}
+
+.bp-site-index .site-hero-media-visual {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  object-fit: cover;
+  object-position: center;
+  border: 0;
+  pointer-events: none;
+  transform-origin: center center;
+  animation: hero-ken-burns 22s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) infinite alternate;
+}
+
+.bp-site-index .site-hero-media-scrim {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(180deg, rgba(8, 9, 14, 0.35) 0%, rgba(8, 9, 14, 0.15) 38%, rgba(8, 9, 14, 0.82) 100%),
+    linear-gradient(90deg, rgba(8, 9, 14, 0.72) 0%, rgba(8, 9, 14, 0.2) 55%, transparent 100%);
+  animation: hero-scrim-pulse 8s ease-in-out infinite;
+}
+
+.bp-site-index .site-hero-media-grain {
+  position: absolute;
+  inset: 0;
+  opacity: 0.06;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  mix-blend-mode: overlay;
+  pointer-events: none;
+}
+
+.bp-site-index .site-hero-media-content {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  max-width: var(--site-max, var(--bp-site-max));
+  margin: 0 auto;
+  padding: clamp(96px, 14vh, 140px) var(--site-pad, var(--bp-site-pad)) clamp(48px, 8vh, 88px);
+}
+
+.bp-site-index .site-hero-media-copy {
+  max-width: min(720px, 92%);
+  overflow: visible;
+}
+.bp-site-index .site-hero-media-copy .hero-fade-slide {
+  overflow: visible;
+}
+.bp-site-index .site-hero-media-meta-wrap .site-hero-media-meta {
+  margin-top: 18px;
+}
+
+.bp-site-index .site-hero-media-eyebrow {
+  margin: 0;
+  font-family: var(--font-ui, var(--bp-font-ui));
+  font-size: 12px;
+  font-weight: 750;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: #f2f2f5;
+  text-shadow: 0 1px 2px var(--hero-shadow-soft), 0 3px 10px var(--hero-shadow-mid);
+}
+
+.bp-site-index .site-hero-media-title {
+  margin: 16px 0 0;
+  font-family: var(--font-body, var(--bp-font-body));
+  font-size: clamp(36px, 6.8vw, 72px);
+  line-height: 1.02;
+  letter-spacing: -0.04em;
+  font-weight: 700;
+  text-wrap: balance;
+  max-width: 16ch;
+  color: #fff;
+  text-shadow: var(--hero-text-depth-lg);
+}
+
+.bp-site-index .site-hero-media-desc {
+  margin: 20px 0 0;
+  font-family: var(--font-ui, var(--bp-font-ui));
+  font-size: clamp(16px, 2.1vw, 20px);
+  line-height: 1.55;
+  color: #e8e8ec;
+  max-width: 48ch;
+  text-shadow: var(--hero-text-depth);
+}
+
+.bp-site-index .site-hero-media-meta {
+  display: flex;
+  gap: 14px;
+  margin-top: 18px;
+  font-family: var(--font-ui, var(--bp-font-ui));
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #d4d4da;
+  transform-origin: left center;
+  text-shadow: 0 1px 2px var(--hero-shadow-soft), 0 3px 8px var(--hero-shadow-mid);
+}
+.bp-site-index .site-hero-media-meta time::after {
+  content: "·";
+  margin: 0 10px;
+  opacity: 0.5;
+}
+.bp-site-index .site-hero-media-reading:only-child,
+.bp-site-index .site-hero-media-meta time:only-child::after {
+  display: none;
+}
+
+.bp-site-index .site-hero-media-cta {
+  --hero-cta-text: #ffffff;
+  --hero-cta-depth: var(--hero-shadow-gray);
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 28px;
+  padding: 15px 30px;
+  border-radius: 100px;
+  font-family: var(--font-ui, var(--bp-font-ui));
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  line-height: 1;
+  text-decoration: none;
+  color: var(--hero-cta-text);
+  background: linear-gradient(
+    165deg,
+    color-mix(in srgb, var(--accent, var(--bp-accent)) 82%, #fff) 0%,
+    var(--accent, var(--bp-accent)) 48%,
+    color-mix(in srgb, var(--accent, var(--bp-accent)) 88%, #000) 100%
+  );
+  border: 1px solid color-mix(in srgb, #fff 28%, var(--accent, var(--bp-accent)));
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.22) inset,
+    0 -2px 0 rgba(0, 0, 0, 0.35) inset,
+    0 4px 0 var(--hero-cta-depth),
+    0 8px 0 var(--hero-shadow-ink),
+    0 12px 24px -4px var(--hero-shadow-mid),
+    0 20px 40px -10px var(--hero-shadow-soft);
+  cursor: pointer;
+  appearance: none;
+  transition:
+    transform 0.22s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
+    box-shadow 0.22s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
+    filter 0.22s ease,
+    border-color 0.22s ease;
+}
+.bp-site-index .site-hero-media-cta:hover {
+  color: var(--hero-cta-text);
+  filter: brightness(1.07);
+  transform: translateY(-2px);
+}
+.bp-site-index .site-hero-media-cta-arrow {
+  display: inline-flex;
+  animation: hero-loop-arrow 2.4s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) infinite;
+}
+
+.bp-site-index .site-hero-media-edge {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 25%, transparent), transparent);
+  z-index: 3;
+}
+
+.bp-site-index .site-hero-media-dots {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 28px;
+  max-width: min(720px, 92%);
+}
+.bp-site-index .site-hero-media-dot {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  cursor: pointer;
+  background: color-mix(in srgb, #fff 35%, transparent);
+  transition: width 0.28s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)), background 0.28s ease;
+}
+.bp-site-index .site-hero-media-dot.is-active {
+  width: 28px;
+  background: #fff;
+}
+
+@media (max-width: 640px) {
+  .bp-site-index .site-hero-media {
+    min-height: clamp(480px, 88vh, 720px);
+  }
+  .bp-site-index .site-hero-media-copy { max-width: 100%; }
+  .bp-site-index .site-hero-media-title { max-width: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bp-site-index .site-hero-media-visual,
+  .bp-site-index .site-hero-media-scrim,
+  .bp-site-index .site-hero-media-cta-arrow {
+    animation: none !important;
+  }
+  .bp-site-index .site-hero-media-slide { transition: none; }
+  .bp-site-index .site-hero-media .hero-fade-slide {
+    opacity: 1;
+    transform: none;
+    animation: none !important;
+  }
+}
+
+
+