/* ═══════════════════════════════════════════════════════════════════
   Home v2 — redesigned logged-in home (/home-v2, admin preview).
   Plan: data/plans/2026-11-14-home-v2.md
   Built on wuc-tokens.css (design-system/design.md): parchment surfaces,
   one dark band, pill buttons (primary / secondary / dark / outline + the
   "Read more" chip), 14px cards, type scale 28/18/15/14/13/11, 4-pt spacing.
   Everything is namespaced .h2-*; existing cards keep their home.css look.
   ═══════════════════════════════════════════════════════════════════ */

.h2-body { background: var(--wuc-parchment, #f5f0e8); }

.h2-shell {
  max-width: 1368px; margin: 0 auto; padding: 24px;
  display: grid; grid-template-columns: 240px minmax(0, 760px) 320px; gap: 24px;
  align-items: start; justify-content: center;
  font: 400 15px/1.5 var(--wuc-font-body, 'DM Sans', system-ui, sans-serif);
  color: var(--wuc-fg1, #1a0f06);
}
.h2-left, .h2-right, .h2-main, .h2-timeline { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.h2-shell a { color: var(--wuc-copper-dark, #8b4513); text-decoration: none; transition: color 150ms ease; }
.h2-shell a:hover { color: var(--wuc-copper, #c17d3c); }
.h2-shell :focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(232, 122, 53, 0.30); }
.h2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.h2-shell [hidden] { display: none !important; }
.h2-grow { flex: 1 1 0; min-width: 0; }
.h2-ico { flex: 0 0 auto; }
.h2-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* The same cards outside the home page (author profile activity feed): no page grid, just the stack. */
.h2-shell.h2-embed { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 16px; max-width: none; margin: 0; padding: 0; }
.h2-embed .prof-feed-more { font-size: 18px; line-height: 1; }
.h2-shell.h2-embed.prof-pinned { margin-bottom: 20px; }
.h2-shell.h2-embed.h2-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.prof-people-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.prof-people-title { margin: 0; font: 600 22px/1.3 var(--wuc-font-body, 'DM Sans', sans-serif); color: var(--wuc-fg1, #1a0f06); }
.prof-people-note { font-size: 13px; color: rgba(26, 15, 6, 0.6); }
.h2-shell.h2-embed.prof-people-more { justify-content: center; margin-top: 16px; }
.h2-list-main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2-shell .h2-list .h2-list-main a { white-space: inherit; }
.h2-shell.h2-embed.prof-popular { margin-bottom: 24px; }

/* ── Cards ─────────────────────────────────────────────────────── */
.h2-card {
  background: var(--wuc-parchment-raised, #fbf7ef);
  border: 1px solid rgba(139, 69, 19, 0.18);
  border-radius: 14px; padding: 20px 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  display: flex; flex-direction: column; gap: 12px; margin: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.h2-wu:hover { border-color: rgba(139, 69, 19, 0.35); box-shadow: 0 4px 14px rgba(26, 15, 6, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.h2-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ── Type ──────────────────────────────────────────────────────── */
.h2-eyebrow { margin: 0; font: 600 11px/1.4 var(--wuc-font-body, 'DM Sans', sans-serif); letter-spacing: 0.15em; text-transform: uppercase; color: var(--wuc-copper-dark, #8b4513); }
.h2-h5 { margin: 0; font: 600 18px/1.35 var(--wuc-font-body, 'DM Sans', sans-serif); color: var(--wuc-fg1, #1a0f06); }
.h2-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wuc-fg2, #3d2a18); }
.h2-text strong { font-weight: 600; color: var(--wuc-fg1, #1a0f06); }
.h2-sub { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(26, 15, 6, 0.6); }
.h2-sub--strong { color: var(--wuc-fg2, #3d2a18); }
.h2-figure { margin: 0; font: 600 28px/1.25 var(--wuc-font-display, 'Playfair Display', serif); letter-spacing: -0.01em; color: var(--wuc-copper-dark, #8b4513); }
.h2-name { font: 500 14px/1.45 var(--wuc-font-body, 'DM Sans', sans-serif); color: var(--wuc-fg1, #1a0f06) !important; }
.h2-name:hover { color: var(--wuc-copper-dark, #8b4513) !important; }
.h2-link { font: 500 13px/1.45 var(--wuc-font-body, 'DM Sans', sans-serif); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--wuc-copper-dark, #8b4513); align-self: flex-start; }
.h2-link:hover { color: var(--wuc-copper, #c17d3c); }
.h2-meta { flex: 1 1 180px; min-width: 0; font-size: 13px; line-height: 1.45; color: rgba(26, 15, 6, 0.6); }
.h2-status { display: inline-block; background: var(--wuc-primary, #e87a35); color: #fff; border-radius: 999px; padding: 2px 8px; font: 500 11px/1.2 var(--wuc-font-body, 'DM Sans', sans-serif); vertical-align: 1px; }

/* ── Buttons (design.md §4 — no fifth style) ───────────────────── */
.h2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: 500 14px/1 var(--wuc-font-body, 'DM Sans', sans-serif); cursor: pointer; white-space: nowrap;
  text-decoration: none; transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.h2-btn--sm, .h2-btn--read { height: 32px; padding: 0 14px; font-size: 13px; }
.h2-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.h2-shell .h2-btn--secondary { background: var(--wuc-copper, #c17d3c); color: var(--wuc-parchment, #f5f0e8); }
.h2-shell .h2-btn--secondary:hover { background: var(--wuc-copper-muted, #a0622d); color: var(--wuc-parchment, #f5f0e8); }
.h2-shell .h2-btn--secondary:active { background: var(--wuc-copper-dark, #8b4513); }
.h2-shell .h2-btn--outline, .h2-shell .h2-btn--read { background: transparent; color: var(--wuc-primary, #e87a35); border-color: var(--wuc-primary, #e87a35); }
.h2-shell .h2-btn--outline:hover, .h2-shell .h2-btn--read:hover { background: rgba(232, 122, 53, 0.08); color: var(--wuc-primary, #e87a35); }
.h2-shell .h2-btn--outline:active, .h2-shell .h2-btn--read:active { background: rgba(232, 122, 53, 0.14); }
.h2-shell .h2-btn--outline.is-on { background: rgba(232, 122, 53, 0.12); border-color: rgba(232, 122, 53, 0.35); }
.h2-shell .h2-btn--dark { background: #1a0f06; color: #e8ddd0; border-color: rgba(193, 125, 60, 0.35); }
.h2-shell .h2-btn--dark:hover { background: #2d1a0c; border-color: rgba(193, 125, 60, 0.55); color: #e8ddd0; }
.h2-iconbtn { width: 32px; height: 32px; border-radius: 999px; border: 0; background: transparent; color: var(--wuc-copper-dark, #8b4513); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 150ms ease-out; }
.h2-iconbtn:hover { background: rgba(26, 15, 6, 0.06); }

/* ── Chips ─────────────────────────────────────────────────────── */
.h2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.h2-topic { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid; font: 500 11px/1 var(--wuc-font-body, 'DM Sans', sans-serif); align-self: flex-start; }
.h2-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--wuc-fg2, #3d2a18); font: 500 13px/1 var(--wuc-font-body, 'DM Sans', sans-serif); cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out; }
.h2-chip .h2-ico { color: var(--wuc-copper-dark, #8b4513); }
.h2-chip:hover { background: rgba(26, 15, 6, 0.06); }
.h2-chip.is-on { background: rgba(232, 122, 53, 0.12); border-color: rgba(232, 122, 53, 0.35); color: var(--wuc-primary, #e87a35); }
.h2-chip.is-on .h2-ico { color: var(--wuc-primary, #e87a35); }
.h2-chip[disabled] { opacity: 0.55; cursor: default; }
.h2-count { margin-left: auto; font: 500 11px/1 var(--wuc-font-body, 'DM Sans', sans-serif); background: rgba(232, 122, 53, 0.18); color: var(--wuc-primary, #e87a35); border-radius: 999px; padding: 3px 7px; }

/* ── Inputs ────────────────────────────────────────────────────── */
.h2-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; min-width: 0; }
.h2-label { margin: 0; font: 500 13px/1.45 var(--wuc-font-body, 'DM Sans', sans-serif); color: var(--wuc-fg2, #3d2a18); }
.h2-input { width: 100%; box-sizing: border-box; min-height: 40px; border-radius: 10px; border: 1px solid rgba(139, 69, 19, 0.25); background: var(--wuc-parchment, #f5f0e8); color: var(--wuc-fg1, #1a0f06); padding: 10px 14px; font: 400 14px/1.4 var(--wuc-font-body, 'DM Sans', sans-serif); transition: border-color 150ms ease; }
.h2-input::placeholder { color: rgba(26, 15, 6, 0.45); }
.h2-input:hover { border-color: rgba(139, 69, 19, 0.4); }
.h2-shell .h2-input:focus { border-color: var(--wuc-primary, #e87a35); outline: none; box-shadow: 0 0 0 3px rgba(232, 122, 53, 0.25); }

/* ── Left rail ─────────────────────────────────────────────────── */
.h2-nav { padding: 12px; gap: 4px; }
.h2-nav-row { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent; color: var(--wuc-fg2, #3d2a18) !important; font: 500 14px/1 var(--wuc-font-body, 'DM Sans', sans-serif); }
.h2-nav-row .h2-ico { color: var(--wuc-copper-dark, #8b4513); }
.h2-nav-row:hover { background: rgba(26, 15, 6, 0.04); color: var(--wuc-fg1, #1a0f06) !important; }
.h2-nav-row.is-active { background: rgba(232, 122, 53, 0.12); border-color: rgba(232, 122, 53, 0.25); color: var(--wuc-primary, #e87a35) !important; }
.h2-nav-row.is-active .h2-ico { color: var(--wuc-primary, #e87a35); }
.h2-spark { display: flex; align-items: flex-end; gap: 4px; height: 48px; }
.h2-spark span { flex: 1; border-radius: 4px; background: var(--wuc-parchment-sunken, #ece5d8); }
.h2-spark span.is-today { background: var(--wuc-copper, #c17d3c); }
.h2-week { display: flex; gap: 4px; }
.h2-week span { flex: 1; height: 24px; border-radius: 999px; background: var(--wuc-parchment-sunken, #ece5d8); color: var(--wuc-fg2, #3d2a18); border: 1px solid transparent; display: flex; align-items: center; justify-content: center; font: 500 11px/1 var(--wuc-font-body, 'DM Sans', sans-serif); }
.h2-week span.is-done { background: var(--wuc-copper, #c17d3c); color: var(--wuc-parchment, #f5f0e8); }
.h2-week span.is-today:not(.is-done) { background: transparent; border-color: var(--wuc-primary, #e87a35); color: var(--wuc-primary, #e87a35); }
.h2-week span.is-today.is-done { box-shadow: 0 0 0 2px rgba(232, 122, 53, 0.30); }
.h2-bar { height: 8px; border-radius: 999px; background: var(--wuc-parchment-sunken, #ece5d8); overflow: hidden; }
.h2-bar span { display: block; height: 8px; border-radius: 999px; background: var(--wuc-copper, #c17d3c); transition: width 220ms ease; }
.h2-goal .h2-bar span { background: var(--wuc-primary, #e87a35); }
.h2-goal-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.h2-goal-form[hidden] { display: none; }

/* ── The dark band (the one espresso section on the page) ──────── */
.h2-band { background: #1a0f06; border: 1px solid rgba(193, 125, 60, 0.18); border-radius: 14px; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; color: #e8ddd0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.h2-band .h2-eyebrow { color: #c17d3c; }
.h2-band-title { margin: 0; font: 600 28px/1.25 var(--wuc-font-display, 'Playfair Display', serif); letter-spacing: -0.01em; color: #f0c080; text-wrap: balance; }
.h2-band-text { margin: 0; color: #ddd0c0; font-size: 15px; }
.h2-band-meta { margin: 0; color: #ddd0c0; font-size: 13px; }
.h2-shell .h2-band a:not(.h2-btn) { color: #f0c080; }
.h2-shell .h2-band a:not(.h2-btn):hover { color: #e0a030; }
.h2-band-row { display: flex; gap: 12px; flex-wrap: wrap; }
.h2-reply { background: #251508; border: 1px solid rgba(193, 125, 60, 0.18); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.h2-reply-quote { margin: 0; color: #e8ddd0; font-size: 15px; }
.h2-reply-quote strong { font-weight: 600; }
.h2-reply-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.h2-reply-status { margin: 0; color: #f0c080; font-size: 14px; }
.h2-band .h2-label { color: #ddd0c0; }
.h2-band .h2-input { background: #1a0f06; border-color: rgba(193, 125, 60, 0.25); color: #e8ddd0; }
.h2-band .h2-input::placeholder { color: rgba(221, 208, 192, 0.45); }
.h2-pick { height: 32px; padding: 0 14px; border-radius: 999px; background: transparent; border: 1px solid rgba(193, 125, 60, 0.35); color: #e8ddd0; font: 500 13px/1 var(--wuc-font-body, 'DM Sans', sans-serif); cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out; }
.h2-pick:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(193, 125, 60, 0.55); }
.h2-pick.is-on { background: rgba(232, 122, 53, 0.12); border-color: rgba(232, 122, 53, 0.35); color: #e87a35; }

/* ── Today at the cafe ─────────────────────────────────────────── */
.h2-today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.h2-tile { background: var(--wuc-parchment, #f5f0e8); border: 1px solid rgba(139, 69, 19, 0.12); border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; transition: border-color 150ms ease; }
.h2-tile:hover { border-color: rgba(139, 69, 19, 0.35); }
.h2-tile-text { font: 500 14px/1.45 var(--wuc-font-body, 'DM Sans', sans-serif); color: var(--wuc-fg1, #1a0f06); }
.h2-tile.is-done { background: rgba(232, 122, 53, 0.08); border-color: rgba(232, 122, 53, 0.25); }

/* ── Composer ──────────────────────────────────────────────────── */
/* Tab links land here; leave room for the sticky nav above it. */
.h2-composer { scroll-margin-top: 88px; }
.h2-composer-row { display: flex; align-items: flex-start; gap: 12px; }
.h2-composer-input { resize: none; overflow: hidden; }
.h2-composer-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.h2-poll-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.h2-poll-fields[hidden] { display: none; }
.h2-poll-fields .h2-label { grid-column: 1 / -1; }
.h2-notice { margin: 0; padding: 12px 16px; border-radius: 10px; background: rgba(232, 122, 53, 0.08); border: 1px solid rgba(232, 122, 53, 0.25); color: var(--wuc-fg2, #3d2a18); font-size: 14px; }

/* ── Tabs ──────────────────────────────────────────────────────── */
.h2-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.h2-shell .h2-tab { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent; color: var(--wuc-fg2, #3d2a18); font: 500 14px/1 var(--wuc-font-body, 'DM Sans', sans-serif); }
.h2-shell .h2-tab:hover { background: rgba(26, 15, 6, 0.06); color: var(--wuc-fg1, #1a0f06); }
.h2-shell .h2-tab.is-on { background: rgba(232, 122, 53, 0.12); border-color: rgba(232, 122, 53, 0.35); color: var(--wuc-primary, #e87a35); }

/* ── Avatars ───────────────────────────────────────────────────── */
.h2-ava { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 999px; overflow: hidden; background: var(--wuc-copper, #c17d3c); color: var(--wuc-parchment, #f5f0e8); font: 500 14px/1 var(--wuc-font-body, 'DM Sans', sans-serif); }
.h2-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Writeup card ──────────────────────────────────────────────── */
.h2-wu-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.h2-wu-body { display: flex; gap: 20px; flex-wrap: wrap; }
.h2-wu-cover { flex: 0 0 160px; height: 120px; border-radius: 10px; background: var(--wuc-parchment-sunken, #ece5d8); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--wuc-copper-dark, #8b4513); }
.h2-wu-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h2-wu-text { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.h2-wu-title { margin: 0; font: 600 18px/1.35 var(--wuc-font-body, 'DM Sans', sans-serif); }
.h2-shell .h2-wu-title a { color: var(--wuc-fg1, #1a0f06); }
.h2-shell .h2-wu-title a:hover { color: var(--wuc-copper-dark, #8b4513); }
.h2-wu-excerpt { margin: 0; font-size: 15px; line-height: 1.5; color: var(--wuc-fg2, #3d2a18); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h2-proof { margin: 0; font-size: 13px; color: var(--wuc-fg2, #3d2a18); }
.h2-first { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: 13px; line-height: 1.45; color: var(--wuc-fg2, #3d2a18); }
.h2-first .h2-link { align-self: auto; }
.h2-wu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border-top: 1px solid rgba(139, 69, 19, 0.12); padding-top: 12px; }
.h2-rx { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.h2-wu-foot .h2-btn--read { margin-left: 8px; }
.h2-rx-legacy { font-size: 13px; color: rgba(26, 15, 6, 0.6); padding: 0 8px; }
.h2-rx-legacy[hidden] { display: none; }
.h2-rx.is-busy { opacity: 0.6; pointer-events: none; }

/* ── Question, keep reading, writers ───────────────────────────── */
.h2-q-text { margin: 0; font: italic 500 22px/1.3 var(--wuc-font-display, 'Playfair Display', serif); color: var(--wuc-fg2, #3d2a18); text-wrap: balance; }
.h2-q-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.h2-q-error { margin: 0; font-size: 13px; color: var(--wuc-coral, #e07b6a); }
.h2-q-done { margin: 0; font: 500 14px/1.45 var(--wuc-font-body, 'DM Sans', sans-serif); color: var(--wuc-copper-dark, #8b4513); }
.h2-q-answers { display: flex; flex-direction: column; gap: 8px; }
.h2-q-answers:empty { display: none; }
.h2-q-answer { margin: 0; padding-top: 12px; border-top: 1px solid rgba(139, 69, 19, 0.12); font-size: 15px; color: var(--wuc-fg2, #3d2a18); overflow-wrap: anywhere; }
.h2-keep-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.h2-writers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.h2-writer { background: var(--wuc-parchment, #f5f0e8); border: 1px solid rgba(139, 69, 19, 0.12); border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }

/* ── Poll ──────────────────────────────────────────────────────── */
.h2-poll-q { margin: 0; font: 400 17px/1.6 var(--wuc-font-body, 'DM Sans', sans-serif); color: var(--wuc-fg1, #1a0f06); overflow-wrap: anywhere; }
.h2-poll-opts { display: flex; flex-direction: column; gap: 8px; }
.h2-poll-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(139, 69, 19, 0.25); background: var(--wuc-parchment, #f5f0e8); color: var(--wuc-fg1, #1a0f06); font: 500 14px/1.3 var(--wuc-font-body, 'DM Sans', sans-serif); text-align: left; cursor: pointer; overflow: hidden; transition: border-color 150ms ease; }
.h2-poll-opt:hover:not([disabled]) { border-color: var(--wuc-primary, #e87a35); }
.h2-poll-opt[disabled] { cursor: default; }
.h2-poll-bar { position: absolute; inset: 0 auto 0 0; background: rgba(193, 125, 60, 0.18); transition: width 220ms ease; }
.h2-poll-opt.is-mine { border-color: rgba(232, 122, 53, 0.35); }
.h2-poll-opt.is-mine .h2-poll-bar { background: rgba(232, 122, 53, 0.18); }
.h2-poll-label, .h2-poll-pct { position: relative; }
.h2-poll-pct { font-size: 13px; color: var(--wuc-fg2, #3d2a18); }
.h2-poll-meta { margin: 0; font-size: 13px; color: rgba(26, 15, 6, 0.6); }
.h2-poll-hint[hidden] { display: none; }

/* ── Right rail rows ───────────────────────────────────────────── */
.h2-row { display: flex; align-items: center; gap: 12px; }
.h2-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.h2-row-text .h2-name, .h2-row-text .h2-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2-trend { min-height: 40px; display: flex; flex-direction: column; justify-content: center; }
.h2-foot { margin: 0; padding: 0 4px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; line-height: 1.4; color: rgba(26, 15, 6, 0.6); }
.h2-shell .h2-foot a { color: var(--wuc-fg2, #3d2a18); }
.h2-more { display: flex; justify-content: center; }
.h2-empty { align-items: flex-start; }

/* ── Shared by every feed card ─────────────────────────────────── */
.h2-context { margin: 0; font: 500 13px/1.45 var(--wuc-font-body, 'DM Sans', sans-serif); color: var(--wuc-copper-dark, #8b4513); }
.h2-quote { margin: 0; padding-left: 16px; border-left: 2px solid var(--wuc-copper, #c17d3c); font: italic 500 17px/1.5 var(--wuc-font-display, 'Playfair Display', serif); color: var(--wuc-fg2, #3d2a18); overflow-wrap: anywhere; }
.h2-chip.active { background: rgba(232, 122, 53, 0.12); border-color: rgba(232, 122, 53, 0.35); color: var(--wuc-primary, #e87a35); }
.h2-chip.active .h2-ico { color: var(--wuc-primary, #e87a35); }
.h2-chip span:empty { display: none; }
.h2-subtabs { margin-top: -4px; }
.h2-shell .h2-subtabs .h2-tab { font-size: 13px; }

/* ── Blog card (writeup layout) ────────────────────────────────── */
.h2-wu-excerpt--long { -webkit-line-clamp: 3; }
.h2-blog .h2-list { border-top: 0; }
.h2-blog .h2-list li:first-child { border-top: 1px solid rgba(139, 69, 19, 0.12); padding-top: 12px; }
.h2-blog .h2-wu-foot { border-top: 0; padding-top: 0; }

/* ── Story Spark ───────────────────────────────────────────────── */
.h2-ss .h2-wu-foot .h2-sub { flex: 1 1 200px; }
.h2-sub em { font-style: italic; color: var(--wuc-fg2, #3d2a18); }

/* ── Short post ────────────────────────────────────────────────── */
.h2-sp-body { margin: 0; font: 400 17px/1.6 var(--wuc-font-body, 'DM Sans', sans-serif); color: var(--wuc-fg1, #1a0f06); overflow-wrap: anywhere; }
.h2-hash { color: var(--wuc-copper-dark, #8b4513); font-weight: 500; }

/* ── Writer / blog / topic card ────────────────────────────────── */
.h2-ent-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.h2-ent-text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.h2-ent-text .h2-chips { margin-top: 4px; }
.h2-wu-title .h2-status { margin-left: 8px; vertical-align: 2px; }
.h2-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid rgba(139, 69, 19, 0.12); }
.h2-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0 0; margin-top: 12px; border-top: 1px solid rgba(139, 69, 19, 0.12); }
.h2-list li:first-child { border-top: 0; margin-top: 0; }
.h2-shell .h2-list a { flex: 1 1 auto; min-width: 0; font: 500 14px/1.45 var(--wuc-font-body, 'DM Sans', sans-serif); color: var(--wuc-fg1, #1a0f06); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2-shell .h2-list a:hover { color: var(--wuc-copper-dark, #8b4513); }
.h2-list .h2-sub { flex: 0 0 auto; }

/* ── One-line activity ─────────────────────────────────────────── */
.h2-line { flex-direction: row; align-items: center; flex-wrap: wrap; padding: 12px 24px; }
.h2-line-text { flex: 1 1 220px; min-width: 0; margin: 0; font-size: 14px; line-height: 1.45; color: var(--wuc-fg2, #3d2a18); }
.h2-line .h2-link { align-self: center; }

/* ── Cards that keep the existing template (sponsored, Story Spark): match the frame ── */
.h2-legacy { margin: 0; }
.h2-legacy .card { margin-bottom: 0; border-radius: 14px; border: 1px solid rgba(139, 69, 19, 0.18); background: var(--wuc-parchment-raised, #fbf7ef); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); animation: none; }
.h2-legacy .card:hover { transform: none; }
.h2-legacy .ctitle { font: 600 18px/1.35 var(--wuc-font-body, 'DM Sans', sans-serif); color: var(--wuc-fg1, #1a0f06); }
.h2-legacy .cexcerpt { font-size: 15px; line-height: 1.5; color: var(--wuc-fg2, #3d2a18); }
.h2-right .cta-banner { margin: 0; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .h2-shell { grid-template-columns: 240px minmax(0, 1fr); }
  .h2-right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
}
@media (max-width: 860px) {
  .h2-shell { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 16px; }
  .h2-main { order: 1; }
  .h2-left { order: 2; }
  .h2-right { order: 3; display: flex; }
  .h2-nav { display: none; }
  .h2-card, .h2-band { padding: 16px; }
  .h2-band-title { font-size: 22px; line-height: 1.3; }
  .h2-wu-cover { flex: 1 1 100%; height: 160px; }
  .h2-meta { flex-basis: 0; }
  .h2-line { padding: 12px 16px; }
  .h2-list li { flex-direction: column; gap: 0; }
  .h2-shell .h2-list a { white-space: normal; }
  .h2-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .h2-tabs::-webkit-scrollbar { display: none; }
  .h2-shell .h2-tab { flex: 0 0 auto; }
  .h2-btn, .h2-btn--sm, .h2-btn--read, .h2-chip, .h2-pick { min-height: 40px; }
  .h2-iconbtn { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .h2-shell *, .h2-shell *::before, .h2-shell *::after { transition: none !important; }
}