@import url(https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&display=swap);
/* ════════════════════════════════════════
   The Sunset Ink - Global stylesheet
   Design tokens, reset, base typography.
════════════════════════════════════════ */

/* PERF-009: Google Fonts moved to <link rel="preconnect"> + parallel-fetched
   stylesheet in basepage/head.html. CSS @import was a render-blocking serial
   waterfall: parser blocks on main.css download, then @import triggers another
   round-trip for the fonts CSS, then both must parse before paint. Preconnect
   in the head opens the TLS handshake to fonts.googleapis.com / .gstatic.com
   immediately, so the fonts stylesheet downloads in parallel with main.css. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:    #1a1410;
  --paper:  #f5f0e8;
  --accent: #c0392b;
  --muted:  #6e6457;  /* UX-008: darkened from #8a7f74 (3.27:1 on paper, fails WCAG AA) to ~5.0:1 - passes AA for body text */
  --rule:   #d4ccc0;
  --serif:  'Playfair Display', Georgia, serif;
  --sans:   'DM Sans', sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--sans);
}

body {
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* <main> hosts a stack of content components and fills the space between
   header and footer. It is layout-neutral - each child component owns its own
   padding / max-width / alignment. */
main {
  flex: 1;
}

/* UX-007 - global keyboard-focus baseline. Many components scatter
   `outline: none` (to drop the browser's blue ring during mouse click) without
   a paired :focus-visible replacement. This single rule restores a visible
   focus indicator for keyboard users (Tab key, screen reader, voice control)
   across the entire app without painting a ring on click - `:focus-visible`
   matches only when focus arrives via the keyboard, not via pointer.

   Higher-specificity component rules (e.g., `.user-profile .up-tab:focus-visible`)
   still win - this is the default for everything else. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* UX-011 - visually-hidden utility for screen-reader-only content. Used to
   insert section headings (h2) that satisfy the heading-order rule
   (h1 → h2 → h3 with no skips) without affecting visual layout. The recipe
   is the WAI-ARIA "sr-only" convention - width/height/position trick that
   keeps the text in the accessibility tree but renders zero pixels. */
.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;
}

/* UX-013 - skip-to-main-content link. Hidden offscreen by default; on
   keyboard focus, snaps to top-left and becomes visible. Mouse users
   never see it; keyboard / screen-reader users get a "bypass the header
   nav" shortcut as the first focusable element on every page. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.95rem;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
}

/* Brand convention: the key word of any major heading is italic + accent.
   Wordmark logo (in a <span>) has its own .logo-wordmark em rule. */
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--accent);
}

/* ════════════════════════════════════════
   The Sunset Ink - Header V1
   Sticky top bar + primary nav + mega-menu.
   Depends on design tokens defined in src/styles/main.css.
════════════════════════════════════════ */

#site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 300;
}

/* ── Top bar ── */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.25rem, 5vw, 4rem);
  height: 72px;
  gap: 1rem;
  position: relative;
}

/* ── Hamburger (mobile only) ── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  z-index: 10;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Logo ── */
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-wordmark {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
/* Brand convention: key word of any major title is italic + accent. */
.logo-wordmark em {
  font-style: italic;
  color: var(--accent);
}
.logo-tagline {
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Header right actions ── */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ── Generic icon button ── */
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.icon-btn:hover { background: rgba(26,20,16,0.06); }
.icon-btn.active { background: var(--ink); color: var(--paper); }

/* ════════════════════════════════════════
   1. EXPANDABLE SEARCH
════════════════════════════════════════ */
.search-wrap {
  display: flex;
  align-items: center;
  position: relative;
}
.search-field {
  width: 0;
  opacity: 0;
  border: none;
  border-bottom: 1.5px solid transparent;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink);
  padding: 0.3rem 0;
  outline: none;
  transition: width 0.35s cubic-bezier(0.4,0,0.2,1),
              opacity 0.25s ease,
              border-color 0.25s ease;
  white-space: nowrap;
  overflow: hidden;
}
.search-field::placeholder { color: var(--muted); }
.search-field.open {
  width: 200px;
  opacity: 1;
  border-color: var(--ink);
  margin-right: 4px;
}
@media (max-width: 480px) {
  .search-field.open { width: 130px; }
}

/* ════════════════════════════════════════
   2. USER MENU
════════════════════════════════════════ */
.user-wrap { position: relative; }

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  transition: background 0.15s;
  flex-shrink: 0;
}
.user-avatar:hover { background: #3a2e28; }
.user-avatar.signed-out {
  background: transparent;
  border: 1.5px solid var(--rule);
  color: var(--muted);
}
.user-avatar.signed-out:hover { border-color: var(--ink); color: var(--ink); background: rgba(26,20,16,0.04); }

.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  min-width: 210px;
  box-shadow: 0 8px 32px rgba(26,20,16,0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
}
.user-dropdown.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Arrow tip */
.user-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 10px;
  width: 10px;
  height: 10px;
  background: var(--paper);
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  transform: rotate(45deg);
}

.user-info {
  padding: 1rem 1.1rem 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.user-name  { font-size: 0.85rem; font-weight: 500; color: var(--ink); }
.user-email { font-size: 0.72rem; color: var(--muted); margin-top: 0.1rem; }

.user-menu-list { list-style: none; padding: 0.4rem 0; }
.user-menu-list li a,
.user-menu-list li button {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.6rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.user-menu-list li a:hover,
.user-menu-list li button:hover { background: rgba(26,20,16,0.05); }
.user-menu-list li.sep { border-top: 1px solid var(--rule); margin-top: 0.4rem; padding-top: 0.4rem; }
.user-menu-list li.sep button { color: var(--accent); }
.user-menu-list li.sep button:hover { background: rgba(192,57,43,0.06); }

/* Reading history is deferred until the feature is wired (no /profile/history
   surface today, no reading-history collection on User). Hide the menu row
   via CSS-only so we don't have to touch the HTL or JS - when the feature
   ships, delete this rule. */
.user-menu-list li:has(> a[href="/profile/history.html"]) { display: none; }

.u-signed-out-actions {
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.u-signin-btn {
  width: 100%;
  padding: 0.6rem;
  background: var(--ink);
  color: var(--paper);
  border: none;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.u-signin-btn:hover { background: var(--accent); }
.u-reg-btn {
  width: 100%;
  padding: 0.6rem;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.u-reg-btn:hover { border-color: var(--ink); background: rgba(26,20,16,0.04); }

/* ════════════════════════════════════════
   3. PRIMARY NAV
════════════════════════════════════════ */
.header-nav {
  border-top: 1px solid var(--rule);
  position: relative;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 2.5vw, 2.2rem);
  padding: 0 clamp(1.25rem, 5vw, 4rem);
  height: 48px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }

.nav-inner a,
.nav-more-btn {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
  position: relative;
  padding-bottom: 2px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-inner a::after,
.nav-more-btn::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.25s;
}
.nav-inner a:hover,
.nav-more-btn:hover { color: var(--ink); }
.nav-inner a:hover::after,
.nav-more-btn:hover::after { transform: scaleX(1); }
/* UX-014 - active-state styling reads from aria-current (set by header.js
   on init). Keeping `.nav-more-btn.active` as-is because the mega-menu
   trigger uses a separate "active" semantic (drawer open, not page
   indicator) - toggled imperatively in header.js. */
.nav-inner a[aria-current="page"],
.nav-more-btn.active { color: var(--ink); }
.nav-inner a[aria-current="page"]::after,
.nav-more-btn.active::after { transform: scaleX(1); }

.more-chevron {
  display: inline-block;
  transition: transform 0.25s;
  opacity: 0.6;
}
.nav-more-btn.active .more-chevron { transform: rotate(180deg); }

/* ════════════════════════════════════════
   4. MEGA-MENU (More panel)
════════════════════════════════════════ */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 16px 40px rgba(26,20,16,0.1);
  z-index: 200;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;

  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mega-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mega-col {
  padding: 1.75rem clamp(1rem, 2vw, 1.75rem);
  border-right: 1px solid var(--rule);
}
.mega-col:last-child { border-right: none; }

.mega-col-head {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}

.mega-col ul { list-style: none; }
.mega-col ul li { margin-bottom: 0.05rem; }
.mega-col ul li a {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.5rem;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.15s;
}
.mega-col ul li a:hover { background: rgba(26,20,16,0.04); }
.mega-link-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.mega-link-desc {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.3;
}

.mega-featured {
  background: var(--ink);
  padding: 1.75rem clamp(1rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
.mega-featured-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 80% 60% at 90% 20%, rgba(192,57,43,0.25) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 14px);
}
.mega-featured-tag {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.5rem;
  position: relative;
}
.mega-featured-title {
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  font-weight: 400;
  font-style: italic;
  color: var(--paper);
  line-height: 1.35;
  margin-bottom: 0.75rem;
  position: relative;
}
.mega-featured-cta {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.55);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s;
  position: relative;
}
.mega-featured-cta:hover { color: var(--paper); }

@media (max-width: 860px) {
  .mega-menu { grid-template-columns: 1fr 1fr; }
  .mega-featured { display: none; }
}
@media (max-width: 560px) {
  .mega-menu { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   MOBILE HEADER
════════════════════════════════════════ */
@media (max-width: 700px) {
  .hamburger { display: flex; }

  .header-nav {
    position: absolute;
    top: 72px;
    left: 0; right: 0;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s ease;
  }
  .header-nav.mob-open {
    max-height: 520px;
  }
  /* When the mega-menu is also opened inside the mobile drawer, raise the
     parent's clip so the combined content (~280px nav + ~600px mega) doesn't
     get cut off. :has() is supported in all modern evergreen browsers. */
  .header-nav.mob-open:has(.mega-menu.open) {
    max-height: 1200px;
  }
  .nav-inner {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 0.75rem clamp(1.25rem, 5vw, 4rem) 0.25rem;
    gap: 0;
    overflow: visible;
  }
  .nav-inner a,
  .nav-more-btn {
    font-size: 0.92rem;
    padding: 0.6rem 0;
    width: 100%;
    justify-content: space-between;
    letter-spacing: 0.04em;
  }
  .nav-inner a::after,
  .nav-more-btn::after { display: none; }

  .mega-menu {
    position: static;
    border: none;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    box-shadow: none;
    grid-template-columns: 1fr;
    transform: none;
    opacity: 1;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s;
    background: rgba(26,20,16,0.02);
    margin: 0 calc(-1 * clamp(1.25rem, 5vw, 4rem));
    padding: 0 clamp(1.25rem, 5vw, 4rem);
  }
  .mega-menu.open {
    max-height: 600px;
    pointer-events: auto;
    opacity: 1;
    transform: none;
  }
  .mega-col {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 1rem 0;
  }
  .mega-col:last-child { border-bottom: none; }
  .mega-featured { display: none; }
}

/* ── Outside-click backdrop ── */
.backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 250;
  background: transparent;
}
.backdrop.show { display: block; }

/* ════════════════════════════════════════
   The Sunset Ink - Header V2
   Closed-portal header. Wordmark on the left, "Not an author?" return link
   on the right. All selectors scoped under .header-v2 so they don't collide
   with the v1 header (which uses unscoped `.logo`, `.logo-wordmark`, etc.).
   Tokens come from src/styles/main.css.
════════════════════════════════════════ */

.header-v2 {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.header-v2 .header-v2-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(1.25rem, 5vw, 4rem);
  height: 72px;
}

/* ── Logo (left) ── */
/* Brand-area styling is intentionally identical to v1's `.logo / .logo-wordmark /
   .logo-tagline` rules - only the surrounding header chrome differs in v2. */
.header-v2 .logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.header-v2 .wordmark {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
/* Wordmark is in a <span>, so the global "h1 em / h2 em / h3 em" rule in
   main.css doesn't apply - restate locally so "Ink" gets italic + accent. */
.header-v2 .wordmark em {
  font-style: italic;
  color: var(--accent);
}
.header-v2 .tagline {
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── "Not an author?" aside (right) ── */
.header-v2 .aside {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: right;
  line-height: 1.4;
}
.header-v2 .aside-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 0.25rem;
  transition: color 0.15s;
}
.header-v2 .aside-link:hover { color: var(--accent); }

/* ── Mobile: shrink the aside copy, hide the prefix on the smallest screens ── */
@media (max-width: 480px) {
  .header-v2 .aside { font-size: 0.72rem; }
  .header-v2 .aside-prefix { display: none; }   /* hook for the prefix span if added later */
}

/* ════════════════════════════════════════
   The Sunset Ink - Footer V1
   Newsletter band, brand + link columns, legal row.
   Depends on design tokens defined in src/styles/main.css.
════════════════════════════════════════ */

#site-footer {
  background: var(--ink);
  color: var(--paper);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .logo-wordmark { color: var(--paper); font-size: 1.6rem; }
.footer-brand .logo-tagline  { color: rgba(245,240,232,0.4); }
.footer-brand-desc {
  margin-top: 1rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(245,240,232,0.55);
  max-width: 240px;
}

.footer-socials { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.social-icon {
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  color: rgba(245,240,232,0.6);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.social-icon:hover { border-color: var(--accent); background: var(--accent); color: white; }

.footer-col h4 {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.35);
  margin-bottom: 1.2rem;
  font-weight: 500;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.65rem; }
.footer-col ul li a {
  font-size: 0.85rem;
  color: rgba(245,240,232,0.65);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--paper); }

.footer-newsletter {
  padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 5vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
  cursor: default;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.footer-newsletter:hover {
  background: rgba(192, 57, 43, 0.07);
  box-shadow: inset 0 0 0 1px rgba(192, 57, 43, 0.18);
}

.newsletter-cta {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.newsletter-cta:hover,
.footer-newsletter:hover .newsletter-cta {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}

.newsletter-arrow {
  width: clamp(90px, 12vw, 140px);
  height: auto;
  color: rgba(245,240,232,0.55);
  flex-shrink: 0;
  transform: translateY(0.35rem);
  transition: color 0.3s ease;
}
.footer-newsletter:hover .newsletter-arrow { color: var(--accent); }

.newsletter-note {
  font-family: 'Caveat', cursive;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  line-height: 1.25;
  color: var(--paper);
  max-width: 36ch;
  transition: color 0.3s ease;
}
.footer-newsletter:hover .newsletter-note { color: #ffe8e3; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem clamp(1.25rem, 5vw, 4rem);
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bottom p { font-size: 0.75rem; color: rgba(245,240,232,0.3); }
.footer-bottom-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-bottom-links a {
  font-size: 0.75rem;
  color: rgba(245,240,232,0.3);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-bottom-links a:hover { color: rgba(245,240,232,0.7); }

@media (max-width: 900px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand-desc { max-width: 100%; }
}
@media (max-width: 560px) {
  .footer-main { grid-template-columns: 1fr; gap: 2rem; }
  .footer-newsletter { flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; }
  .newsletter-arrow { transform: rotate(75deg) translateY(0); width: 70px; }
  .newsletter-note { max-width: 28ch; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ════════════════════════════════════════
   The Sunset Ink - Banner V1
   Centered hero/intro block.
   Lives as one of many sibling components inside <main>, so it owns its own
   vertical padding and horizontal centering - <main> stays layout-neutral.
   Depends on tokens in src/styles/main.css; key-word italic+accent on
   .banner-title em comes from the global "h1 em" rule there.
════════════════════════════════════════ */

.banner {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5rem) clamp(1.25rem, 5vw, 2rem);
}

.banner-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.banner-divider {
  width: 48px;
  height: 1px;
  background: var(--rule);
  margin: 1.5rem auto;
}

.banner-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.banner-desc {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.7;
}

/* ════════════════════════════════════════
   The Sunset Ink - Banner V2 (dark hero)

   Dark, full-bleed hero with subtle grid + radial-gradient pattern,
   left-aligned content, large italic-accented serif title. Pairs with the
   v2 HTL at apps/sunset-ink/components/content/banner/v2/.

   Distinct from v1 (centred, light, paper background): v1's selectors are
   `.banner-*`, this is `.banner-hero-*` - they coexist without collision
   on any page that drops both.

   Tokens come from src/styles/main.css.
════════════════════════════════════════ */

.banner-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 8vw, 8rem);
  display: flex;
  align-items: flex-end;
  min-height: 280px;
}

.banner-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 60% 80% at 85% 40%, rgba(192, 57, 43, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(192, 57, 43, 0.08) 0%, transparent 60%),
    repeating-linear-gradient(0deg,  rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 48px);
}

.banner-hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.banner-hero-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
  font-weight: 500;
}

/* Empty eyebrow / desc / title segments collapse out. This matters when
   a tab activation sets a field to an empty string (i.e. neither the
   page-level banner default nor the per-tab override has a value): the
   JS sets textContent='', the element becomes :empty, and CSS hides it.
   The title is composed of three spans (pre/em/post) so each segment
   can independently collapse - e.g. a tab that provides only title2
   shows just the italic key-word with no surrounding text. */
.banner-hero-eyebrow:empty,
.banner-hero-desc:empty,
.banner-hero-title-pre:empty,
.banner-hero-title-em:empty,
.banner-hero-title-post:empty {
  display: none;
}

.banner-hero-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--paper);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}

/* Override the global `h1 em` italic-accent rule's colour for this
   dark-background variant: same italic, same accent red - but the global
   rule already gives us that. Kept explicit here so it can be tweaked
   per-component without changing the global. */
.banner-hero-title em {
  font-style: italic;
  color: var(--accent);
}

.banner-hero-desc {
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  color: rgba(245, 240, 232, 0.65);
  line-height: 1.7;
  max-width: 520px;
  margin: 0;
}

/* ════════════════════════════════════════
   The Sunset Ink - Tab Container V1

   Tabbed wrapper for any set of child components.
   Publish mode: tab nav + one visible panel.
   Edit mode: stacked, no tab UI (so every panel is reachable
   from the Sling-CMS authoring view).

   Activation behaviour lives in tab-container.js.
   Tokens come from src/styles/main.css.
════════════════════════════════════════ */

/* ── Publish mode ── */
.tabs {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 2rem);
}

.tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--rule);
  margin: 0 0 1.5rem;
}

.tabs-nav-btn {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 0.85rem 1rem;
  margin-bottom: -1px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.tabs-nav-btn:hover {
  color: var(--ink);
}

.tabs-nav-btn.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.tabs-panel {
  display: none;
}

.tabs-panel.is-active {
  display: block;
}

/* ── Edit mode (stacked) ── */
.tabs-edit-stack {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 2rem);
}

.tabs-edit-panel {
  padding: 1.5rem 0;
  border-bottom: 1px dashed var(--rule);
}

.tabs-edit-panel:last-child {
  border-bottom: none;
}

.tabs-edit-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
  font-weight: 500;
}

/* ════════════════════════════════════════
   The Sunset Ink - Static prose pages
   Shared styles for everything under
   apps/sunset-ink/components/content/sunset-ink/*
   (privacy, cookies, terms, dmca, accessibility,
    handbook bodies, contributor agreement).
   Tab-container chrome lives in its own
   file under content/tab-container/v1/.
   Tokens come from src/styles/main.css.
════════════════════════════════════════ */

/* ── Prose body wrapper ── */
.prose-body {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 2rem);
  font-family: var(--sans);
  line-height: 1.75;
  color: var(--ink);
}

.prose-body p {
  margin: 0 0 1rem;
}

.prose-body p:last-child {
  margin-bottom: 0;
}

.prose-body strong {
  font-weight: 500;
  color: var(--ink);
}

.prose-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose-body a:hover {
  text-decoration-thickness: 2px;
}

.prose-body ul,
.prose-body ol {
  padding-left: 1.5rem;
  margin: 0 0 1rem;
}

.prose-body li {
  margin-bottom: 0.45rem;
}

.prose-body code {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  background: rgba(26, 20, 16, 0.06);
  border-radius: 3px;
}

/* ── Section headings inside prose ── */
.prose-section {
  margin-top: 2.5rem;
}

.prose-section h2 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.75rem;
}

.prose-section h3 {
  font-size: 1rem;
  font-weight: 500;
  margin: 1.25rem 0 0.4rem;
}

/* ── "Last updated" line at the top of each body ── */
.prose-meta {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

/* ── Highlight callout box ── */
.prose-highlight {
  background: rgba(192, 57, 43, 0.05);
  border-left: 3px solid var(--accent);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink);
}

/* ── Lead paragraph (sits above the first section) ── */
.prose-lead {
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 2rem;
}

/* ── FAQ accordion (native <details>/<summary>, no JS) ── */
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 0;
}

.faq-item:first-of-type {
  border-top: 1px solid var(--rule);
}

.faq-item > summary {
  cursor: pointer;
  padding: 0.75rem 1.75rem 0.75rem 0;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
  position: relative;
  list-style: none;
  transition: color 0.15s;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary::after {
  content: '+';
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--muted);
  transition: transform 0.2s, color 0.15s;
  line-height: 1;
}

.faq-item[open] > summary::after {
  content: '−';
  color: var(--accent);
}

.faq-item > summary:hover {
  color: var(--accent);
}

.faq-item > p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.75;
  padding: 0 0 0.75rem;
  margin: 0;
}

/* ── Team cards (about-us body) ── */
.team-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.team-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.4);
  transition: border-color 0.15s, background 0.15s;
}

.team-card:hover {
  border-color: var(--accent);
  background: rgba(192, 57, 43, 0.03);
  text-decoration: none;
}

.team-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: rgba(192, 57, 43, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.team-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.team-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}

.team-role {
  font-size: 0.78rem;
  color: var(--muted);
}

/* ── Cookie / data tables ── */
.prose-table-wrap {
  overflow-x: auto;
  margin: 0 0 1.5rem;
}

.prose-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  border: 1px solid var(--rule);
  background: #fff;
}

.prose-table th,
.prose-table td {
  text-align: left;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.prose-table th {
  font-weight: 500;
  background: rgba(26, 20, 16, 0.04);
  white-space: nowrap;
}

.prose-table tr:last-child td {
  border-bottom: none;
}


/* ════════════════════════════════════════
   The Sunset Ink - Contact Us / Feedback V1
   Pairs with HTL at apps/sunset-ink/components/content/sunset-ink/contact-us/v1.
   Internal tab switcher (Contact / Feedback). All form panels SSR'd; JS
   toggles is-active to switch.
   Tokens come from src/styles/main.css.
════════════════════════════════════════ */

.contact-us-body {
  /* Use prose-body padding/width baseline; only contact-specific extras here. */
}

/* ── Response-time card ── */
.cf-response {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
  background: rgba(192, 57, 43, 0.04);
  border: 1px solid rgba(192, 57, 43, 0.18);
  border-radius: 10px;
}

.cf-response-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 0.45rem;
  animation: cf-pulse 2s ease-in-out infinite;
}

@keyframes cf-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

.cf-response-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cf-response-title {
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink);
}

.cf-response-p {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ── Card wrapper ── */
.cf-card {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: clamp(1.25rem, 3vw, 2rem);
  position: relative;
}

/* ── Internal tab switcher ── */
.cf-tabs {
  display: flex;
  gap: 0;
  background: rgba(26, 20, 16, 0.04);
  border-radius: 8px;
  padding: 3px;
  margin: 0 0 1.75rem;
}

.cf-tab {
  flex: 1;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.cf-tab:hover {
  color: var(--ink);
}

.cf-tab.is-active {
  background: var(--paper);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(26, 20, 16, 0.08);
}

/* ── Panel ── */
.cf-panel {
  display: none;
  flex-direction: column;
  gap: 1.25rem;
}

.cf-panel.is-active {
  display: flex;
}

/* ── Two-column row ── */
.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  .cf-row { grid-template-columns: 1fr; }
}

/* ── Field ── */
.cf-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cf-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cf-req {
  color: var(--accent);
  font-size: 0.85rem;
  line-height: 1;
}

.cf-optional {
  font-size: 0.65rem;
  color: var(--muted);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

/* ── Inputs ── */
.cf-input,
.cf-select,
.cf-textarea {
  width: 100%;
  padding: 0.7rem 0.95rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}

.cf-input::placeholder,
.cf-textarea::placeholder {
  color: var(--muted);
}

.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

.cf-field.is-invalid .cf-input,
.cf-field.is-invalid .cf-select,
.cf-field.is-invalid .cf-textarea {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}

.cf-select {
  background-image: url("data:image/svg+xml,%3Csvg width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1L6 7L11 1%27 stroke=%27%236e6457%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.cf-textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.65;
}

.cf-hint {
  font-size: 0.72rem;
  color: var(--muted);
}

.cf-error {
  font-size: 0.75rem;
  color: var(--accent);
  display: none;
}

.cf-field.is-invalid .cf-error {
  display: block;
}

.cf-error--consent {
  margin-top: -0.5rem;
}

.cf-error--consent.is-visible {
  display: block;
}

/* ── Honeypot (off-screen for bots) ── */
.cf-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ── Consent ── */
.cf-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
}

.cf-consent input[type=checkbox] {
  margin-top: 0.2rem;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.cf-consent a {
  color: var(--accent);
}

/* ── Submit button ── */
.cf-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.cf-submit:hover:not(:disabled) {
  background: var(--accent);
  transform: translateY(-1px);
}

.cf-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.cf-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(245, 240, 232, 0.35);
  border-top-color: var(--paper);
  border-radius: 50%;
  display: none;
  animation: cf-spin 0.7s linear infinite;
}

.cf-submit.is-loading .cf-spinner { display: inline-block; }
.cf-submit.is-loading .cf-btn-text { opacity: 0.4; }

@keyframes cf-spin {
  to { transform: rotate(360deg); }
}

/* ── Star rating ── */
.cf-stars {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.cf-star {
  background: 0;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--rule);
  cursor: pointer;
  padding: 0.1rem;
  transition: color 0.15s, transform 0.1s;
}

.cf-star:hover {
  color: var(--accent);
  transform: scale(1.1);
}

.cf-star.is-on {
  color: var(--accent);
}

.cf-stars-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin-left: 0.5rem;
}

/* ── Chips ── */
.cf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cf-chip {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-size: 0.75rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-family: var(--sans);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.cf-chip:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.cf-chip.is-on {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(192, 57, 43, 0.06);
}

/* ── Radio group ── */
.cf-radio-group {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cf-radio {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}

.cf-radio input { accent-color: var(--accent); }

/* ── Toast ── */
.cf-toast {
  display: none;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.cf-toast.is-visible { display: flex; }

.cf-toast.is-success {
  background: rgba(75, 145, 90, 0.08);
  border: 1px solid rgba(75, 145, 90, 0.3);
  color: #2a6535;
}

.cf-toast.is-error {
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.3);
  color: var(--accent);
}

.cf-toast-title {
  font-weight: 500;
  margin-right: 0.35rem;
}

/* ── "Other ways to reach us" card ── */
.cf-info {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--rule);
  border-radius: 12px;
}

.cf-info-title {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  display: block;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}

.cf-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cf-info-label {
  font-size: 0.78rem;
  color: var(--muted);
  display: block;
}

.cf-info-link {
  font-size: 0.92rem;
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.cf-info-link:hover { text-decoration: underline; }

/* ════════════════════════════════════════
   The Sunset Ink - Card List V1
   Article card grid with lazy-loading on scroll. No shadow DOM -
   class names are scoped by the .card-list ancestor where it matters.
   Depends on tokens in src/styles/main.css.
════════════════════════════════════════ */

.card-list {
  display: block;
  padding: 2.5rem clamp(1.25rem, 5vw, 4rem) 3.5rem;
}

/* ── Section header ── */
.card-list-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.card-list-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
}
/* .card-list-title em is handled by the global "h1 em, h2 em, h3 em" rule
   in main.css (italic + accent). No need to re-declare here. */

.card-list-count {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.card-list-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  background: var(--accent);
  color: white;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
.card-list-cta:hover { background: #a93226; }
.card-list-cta svg { flex-shrink: 0; }

/* ── Runtime view filter (only rendered when dialog Content Type = Both) ──
   Mirrors the column page's sort-select look so toggles across the site
   read as one family. Lives on its own row above the grid, right-aligned. */
.card-list-filter {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.25rem;
}
.card-list-view-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.6rem;
  align-self: center;
}
.card-list-view-select {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background-color: transparent;
  border: 1px solid var(--rule);
  padding: 0.35rem 1.8rem 0.35rem 0.8rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%238a7f74%27 stroke-width=%272.5%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  outline: none;
}
.card-list-view-select:hover { border-color: var(--ink); }

/* ── Grid ── */
.card-list-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1100px) { .card-list-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .card-list-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 480px)  { .card-list-grid { grid-template-columns: 1fr; gap: 1rem; } }

/* ── Card ── */
.card-list .card {
  background: #fff;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  animation: card-fade-up 0.4s ease both;
  /* The card is rendered as an <a> when a real article href is known so
     the browser handles middle-click / right-click / open-in-new-tab
     naturally - these reset link defaults so it still looks like the
     non-link variant. */
  color: inherit;
  text-decoration: none;
}
@keyframes card-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card-list .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(26,20,16,0.10);
}

.card-list .card-thumb {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.card-list .card-thumb-pattern {
  position: absolute; inset: 0;
  opacity: 0.35;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(26,20,16,0.06) 0px, rgba(26,20,16,0.06) 1px,
    transparent 1px, transparent 12px
  );
}
.card-list .card-thumb-letter {
  font-family: var(--serif);
  font-size: 4rem;
  font-weight: 700;
  color: rgba(26,20,16,0.18);
  z-index: 1;
  user-select: none;
  line-height: 1;
}

/* Bookmark overlay (top-right of the card thumb). Same circular ink chip
   used in the library tile so the visual language stays consistent across
   listing + library surfaces. */
.card-list .card-save-icon {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(26,20,16,0.85);
  color: var(--paper);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.15s, transform 0.15s;
  opacity: 0;
}
.card-list .card:hover .card-save-icon,
.card-list .card-save-icon.saved,
.card-list .card-save-icon:focus-visible { opacity: 1; }
.card-list .card-save-icon:hover {
  background: var(--accent);
  transform: scale(1.05);
}
.card-list .card-save-icon .save-icon-filled { display: none; }
.card-list .card-save-icon.saved .save-icon-outline { display: none; }
.card-list .card-save-icon.saved .save-icon-filled { display: block; }
.card-list .card-save-icon.saved { background: var(--accent); }

.card-list .card-body {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-list .card-cat {
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.55rem;
}
.card-list .card-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 0.85rem;
  flex: 1;
}
.card-list .card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 1px solid #ede7dc;
  padding-top: 0.75rem;
  margin-top: auto;
}
.card-list .card-author {
  font-size: 0.73rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-list .card-read {
  font-size: 0.7rem;
  color: #b0a699;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Lazy-load tail ── */
.card-list-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
  min-height: 1px;
}
.card-list-sentinel {
  width: 100%;
  height: 1px;
}
.card-list-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.card-list-spinner {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: card-list-spin 0.7s linear infinite;
}
@keyframes card-list-spin { to { transform: rotate(360deg); } }
.card-list-done {
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  font-style: italic;
}
.card-list-error {
  font-size: 0.78rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}

/* Card List V2 - reuses every visual style from the v1 stylesheet
   (.card-list, .card, .card-list-header, .card-list-grid, .card-list-cta,
   .card-list-filter, .card-list-loading, .card-list-spinner, etc). The
   class names are deliberately shared so v2 stays UI-faithful with v1
   without a parallel CSS bundle to maintain.

   Add overrides here if/when v2's card density or chrome diverges from v1. */

/* Contributor CTA shown beneath the "No <items> in this category yet"
   message - only on v2 (the category-scoped variant). v1 stays silent
   on the browse-all page. Mirrors `.card-list-done` typography so the
   two stack as a quiet pair, with the link picking up the accent. */
.card-list-empty-cta {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-align: center;
}
.card-list-empty-cta a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.card-list-empty-cta a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Card List V3 - Authors directory. Reuses every visual style from the v1
   stylesheet (.card-list, .card, .card-list-header, .card-list-grid, .card,
   .card-thumb, .card-body, .card-title, .card-cat, .card-meta, .card-list-cta,
   .card-list-loading, .card-list-spinner, .card-list-empty, etc).

   The class names are deliberately shared so the author directory stays
   visually adjacent to the article + column grids on /our-writers and any
   shared page - no parallel CSS bundle to maintain.

   This file exists so main.js can `import './cards-list.css'` in the v3
   slot. Add v3-specific overrides here if/when the author tile needs to
   diverge from the article/column tile (e.g. circular avatars, different
   meta-row treatment). One small addition lives here today: avatar image
   sizing inside the card thumb, which v1/v2 don't use.

   The avatar fills the same square the v1/v2 cards use for their thumb
   letter. object-fit:cover keeps non-square author photos from
   distorting; the parent .card-thumb retains its tinted background so a
   transparent PNG falls back to the brand pastel rather than the page
   colour. */
.card-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ════════════════════════════════════════
   The Sunset Ink - Search Results V1
   Article search page. Two-column layout: results grid + sticky sidebar.
   All selectors scoped under .search-results so .card / .grid / .empty
   etc. don't collide with siblings (e.g. card-list).
   Tokens come from src/styles/main.css.
════════════════════════════════════════ */

/* ── Page header ── */
.search-results .page-header {
  padding: 2.5rem clamp(1.25rem, 5vw, 4rem) 2rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.search-results .page-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.search-results .page-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
/* .page-title em handled by global "h1 em" rule in main.css */

.search-results .page-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.search-results .result-count {
  font-size: 0.78rem;
  color: var(--muted);
}
.search-results .result-count strong {
  color: var(--ink);
  font-weight: 500;
}
.search-results .result-pending {
  font-style: italic;
  opacity: 0.7;
}

/* ── Mobile filter toggle ── */
.search-results .mobile-filter-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  position: relative;
}
.search-results .mobile-filter-toggle .badge {
  background: var(--accent);
  color: #fff;
  font-size: 0.6rem;
  min-width: 16px;
  height: 16px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
@media (max-width: 900px) {
  .search-results .mobile-filter-toggle { display: flex; }
}

/* ── Layout ── */
.search-results .layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  align-items: start;
  padding: 2rem clamp(1.25rem, 5vw, 4rem) 4rem;
}
@media (max-width: 900px) {
  .search-results .layout { grid-template-columns: 1fr; }
  .search-results .sidebar { display: none; }
  .search-results .sidebar.open { display: block; margin-bottom: 2rem; }
}

/* ── Results column ── */
.search-results .results-col {
  padding-right: 2.5rem;
  min-width: 0;
}
@media (max-width: 900px) {
  .search-results .results-col { padding-right: 0; }
}

/* ── Grid ── */
.search-results .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 1200px) { .search-results .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .search-results .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .search-results .grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.search-results .card {
  background: #fff;
  border: 1px solid var(--rule);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
  animation: search-card-up 0.35s ease both;
  /* Tiles render as <a> when a real href is available so middle-click /
     new-tab work natively. These reset link defaults so the visual is
     identical to the non-link variant. */
  color: inherit;
  text-decoration: none;
}
@keyframes search-card-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.search-results .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(26,20,16,0.09);
}
.search-results .card-thumb {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.search-results .card-thumb-pat {
  position: absolute; inset: 0;
  opacity: 0.28;
  background-image: repeating-linear-gradient(45deg, rgba(26,20,16,0.07) 0px, rgba(26,20,16,0.07) 1px, transparent 1px, transparent 10px);
}
.search-results .card-letter {
  font-family: var(--serif);
  font-size: 3.2rem;
  font-weight: 700;
  color: rgba(26,20,16,0.15);
  z-index: 1;
  line-height: 1;
  user-select: none;
}

/* Bookmark overlay (top-right of the card thumb). Same circular ink chip
   used on cards-list tiles + the library card so the visual language stays
   consistent across listing + library surfaces. */
.search-results .card-save-icon {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(26,20,16,0.85);
  color: var(--paper);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.15s, transform 0.15s;
  opacity: 0;
}
.search-results .card:hover .card-save-icon,
.search-results .card-save-icon.saved,
.search-results .card-save-icon:focus-visible { opacity: 1; }
.search-results .card-save-icon:hover {
  background: var(--accent);
  transform: scale(1.05);
}
.search-results .card-save-icon .save-icon-filled { display: none; }
.search-results .card-save-icon.saved .save-icon-outline { display: none; }
.search-results .card-save-icon.saved .save-icon-filled { display: block; }
.search-results .card-save-icon.saved { background: var(--accent); }
.search-results .card-body {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.search-results .card-cat {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.search-results .card-title {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  flex: 1;
  margin-bottom: 0.75rem;
}
.search-results .card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #ede7dc;
  padding-top: 0.65rem;
  margin-top: auto;
  gap: 0.5rem;
}
.search-results .card-author {
  font-size: 0.7rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-results .card-read {
  font-size: 0.68rem;
  color: #b0a699;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Search-term highlight inside card titles */
.search-results .search-mark {
  background: #fff0aa;
  color: var(--ink);
  padding: 0 1px;
}

/* ── Empty state ── */
.search-results .empty {
  grid-column: 1 / -1;
  padding: 4rem 2rem;
  text-align: center;
}
.search-results .empty-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  opacity: 0.4;
}
.search-results .empty h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}
.search-results .empty p {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ── Results tail (progress + lazy-load sentinel + done/loading footer) ──
   Replaces the older Load-More CTA. The same .progress-bar /
   .progress-label / .all-done classes are reused so the visual stays
   identical - only the trigger swapped from a click to scroll. */
.search-results .results-tail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 0 2rem;
}
.search-results .results-sentinel {
  width: 100%;
  height: 1px;
}
.search-results .results-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.search-results .results-spinner {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: results-spin 0.7s linear infinite;
}
@keyframes results-spin { to { transform: rotate(360deg); } }

.search-results .progress-bar {
  width: 100%;
  max-width: 320px;
  height: 2px;
  background: var(--rule);
}
.search-results .progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.4s ease;
}
.search-results .progress-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.search-results .all-done {
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
  padding: 1rem 0 0;
}

/* ── Filter chips (active filters) ── */
.search-results .active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.search-results .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}
.search-results .filter-chip span { font-size: 0.75rem; opacity: 0.7; }

/* ════ SIDEBAR ════ */
.search-results .sidebar {
  position: sticky;
  top: 130px;
  border: 1px solid var(--rule);
  background: #fff;
  padding: 0;
  overflow: hidden;
}
@media (max-width: 900px) {
  .search-results .sidebar {
    position: static;
    border: none;
    background: transparent;
  }
}

/* Sidebar header */
.search-results .sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.search-results .sidebar-title {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}
.search-results .reset-btn {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.search-results .reset-btn[hidden] { display: none; }

/* Sidebar section */
.search-results .s-section { border-bottom: 1px solid var(--rule); }
.search-results .s-section:last-child { border-bottom: none; }
.search-results .s-section-label {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 0.75rem;
  display: block;
}
.search-results .s-pad { padding: 1.1rem 1.3rem; }

/* Text search */
.search-results .search-wrap { position: relative; }
.search-results .search-input {
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 0.6rem 2.2rem 0.6rem 0.85rem;
  outline: none;
  color: var(--ink);
  transition: border-color 0.2s;
}
.search-results .search-input:focus { border-color: var(--ink); }
.search-results .search-input::placeholder { color: #b0a699; }
.search-results .search-clear {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  padding: 2px;
  transition: color 0.15s;
}
.search-results .search-clear[hidden] { display: none; }
.search-results .search-clear:hover { color: var(--accent); }

/* Sort */
.search-results .sort-select {
  width: 100%;
  border: 1px solid var(--rule);
  background-color: var(--paper);
  font-family: var(--sans);
  font-size: 0.83rem;
  padding: 0.6rem 2rem 0.6rem 0.85rem;
  outline: none;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 stroke=%27%238a7f74%27 stroke-width=%271.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}
.search-results .sort-select:focus { border-color: var(--ink); }

/* Collapsible multi-select */
.search-results .collapsible-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.3rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.search-results .collapsible-toggle:hover { background: var(--paper); }
.search-results .collapsible-toggle-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.search-results .collapsible-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.search-results .collapsible-count {
  background: var(--ink);
  color: var(--paper);
  font-size: 0.58rem;
  min-width: 16px;
  height: 16px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.search-results .chevron {
  transition: transform 0.25s;
  flex-shrink: 0;
  color: var(--muted);
}
.search-results .chevron.open { transform: rotate(180deg); }

.search-results .collapsible-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.search-results .collapsible-body.open {
  /* Fits the inner search input + ~6 options. The inner .facet-options
     handles its own overflow so longer lists scroll there, not here. */
  max-height: 320px;
  border-top: 1px solid #ede7dc;
}
.search-results .collapsible-inner {
  padding: 0.75rem 1.3rem 1rem;
  display: flex;
  flex-direction: column;
}

/* ── Inner facet search + scrollable options ──
   Used inside Categories / Authors when the facet set is non-empty. The
   text input filters the visible options client-side (no fetch); only
   checkbox toggles drive a real query. List caps at ~6 visible rows. */
.search-results .facet-search {
  margin-bottom: 0.6rem;
}
.search-results .facet-search-input {
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 0.78rem;
  padding: 0.4rem 0.7rem;
  outline: none;
  color: var(--ink);
  transition: border-color 0.2s;
}
.search-results .facet-search-input:focus { border-color: var(--ink); }
.search-results .facet-search-input::placeholder { color: #b0a699; }

.search-results .facet-options {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  overflow-y: auto;
  max-height: 11rem;  /* ~6 rows at the .opt 0.35rem-padding + 0.8rem-label */
}
.search-results .facet-options::-webkit-scrollbar { width: 3px; }
.search-results .facet-options::-webkit-scrollbar-thumb { background: var(--rule); }

/* Checkbox option */
.search-results .opt {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 0;
  cursor: pointer;
  user-select: none;
}
.search-results .opt:hover .opt-label { color: var(--ink); }
.search-results .opt-check {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 1.5px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.search-results .opt-check.checked {
  background: var(--ink);
  border-color: var(--ink);
}
.search-results .opt-check svg { display: none; }
.search-results .opt-check.checked svg { display: block; }
.search-results .opt-label {
  font-size: 0.8rem;
  color: var(--muted);
  transition: color 0.15s;
  flex: 1;
}
.search-results .opt-pill {
  font-size: 0.62rem;
  color: #b0a699;
}

/* ════════════════════════════════════════
   The Sunset Ink - Library V1
   Reader's saved articles + columns page. Two-column layout mirrors
   search-results: results grid + sticky sidebar. All selectors scoped
   under .library so .card / .grid / .empty etc. don't collide with
   siblings (e.g. search-results, card-list).
   Tokens come from src/styles/main.css.
════════════════════════════════════════ */

/* ── Page header ── */
.library .page-header {
  padding: 2.5rem clamp(1.25rem, 5vw, 4rem) 2rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.library .page-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.library .page-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.library .page-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
/* .page-title em handled by global "h1 em" rule in main.css */

.library .page-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.library .result-count {
  font-size: 0.78rem;
  color: var(--muted);
}
.library .result-count strong {
  color: var(--ink);
  font-weight: 500;
}

/* ── Collection-view header ──
   When the user opens a single reading collection, the page-title swaps
   for a back-button + collection name + count. Keeps the page chrome
   stable while signalling the drill-down. */
.library .collection-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.library .back-btn {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 1px solid var(--rule);
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.15s, border-color 0.15s;
}
.library .back-btn:hover { color: var(--ink); border-color: var(--ink); }
.library .collection-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.library .delete-collection-btn {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0.3rem 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Mobile filter toggle ── */
.library .mobile-filter-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  position: relative;
}
.library .mobile-filter-toggle .badge {
  background: var(--accent);
  color: #fff;
  font-size: 0.6rem;
  min-width: 16px;
  height: 16px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
@media (max-width: 900px) {
  .library .mobile-filter-toggle { display: flex; }
}

/* ── Layout ── */
.library .layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  align-items: start;
  padding: 2rem clamp(1.25rem, 5vw, 4rem) 4rem;
}
@media (max-width: 900px) {
  .library .layout { grid-template-columns: 1fr; }
  .library .sidebar { display: none; }
  .library .sidebar.open { display: block; margin-bottom: 2rem; }
}

/* ── Results column ── */
.library .results-col {
  padding-right: 2.5rem;
  min-width: 0;
}
@media (max-width: 900px) {
  .library .results-col { padding-right: 0; }
}

/* ── Grid ── */
.library .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 1200px) { .library .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .library .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .library .grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.library .card-wrap { display: flex; flex-direction: column; }
.library .card {
  background: #fff;
  border: 1px solid var(--rule);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
  animation: lib-card-up 0.35s ease both;
  color: inherit;
  text-decoration: none;
  flex: 1;
}
@keyframes lib-card-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.library .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(26,20,16,0.09);
}
.library .card-thumb {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.library .card-thumb-pat {
  position: absolute; inset: 0;
  opacity: 0.28;
  background-image: repeating-linear-gradient(45deg, rgba(26,20,16,0.07) 0px, rgba(26,20,16,0.07) 1px, transparent 1px, transparent 10px);
}
.library .card-letter {
  font-family: var(--serif);
  font-size: 3.2rem;
  font-weight: 700;
  color: rgba(26,20,16,0.15);
  z-index: 1;
  line-height: 1;
  user-select: none;
}
.library .saved-icon {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s, transform 0.15s;
}
.library .saved-icon:hover {
  background: var(--accent);
  transform: scale(1.05);
}
.library .card-body {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.library .card-cat {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.library .card-title {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  flex: 1;
  margin-bottom: 0.75rem;
}
.library .card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #ede7dc;
  padding-top: 0.65rem;
  margin-top: auto;
  gap: 0.5rem;
}
.library .card-author {
  font-size: 0.7rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library .card-read {
  font-size: 0.68rem;
  color: #b0a699;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Search-term highlight inside card titles */
.library .search-mark {
  background: #fff0aa;
  color: var(--ink);
  padding: 0 1px;
}

/* ── Collection CTA below each card ── */
.library .collection-cta-wrap {
  position: relative;
  margin-top: 0.5rem;
}
.library .collection-cta {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: none;
  border: 1px dashed var(--rule);
  color: var(--muted);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.library .collection-cta:hover { color: var(--ink); border-color: var(--ink); }
.library .collection-cta .arrow { margin-left: auto; color: inherit; }
.library .collection-cta.assigned {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.library .collection-cta.assigned:hover { color: var(--paper); }
.library .collection-cta-remove {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--rule);
  color: var(--accent);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.library .collection-cta-remove:hover { border-color: var(--accent); }

.library .collection-dropdown {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 12px 32px rgba(26,20,16,0.12);
  z-index: 5;
  max-height: 240px;
  overflow-y: auto;
}
.library .collection-dropdown[hidden] { display: none; }
.library .drop-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.8rem;
  font-size: 0.78rem;
  cursor: pointer;
  border-bottom: 1px solid #f1ece2;
  color: var(--ink);
}
.library .drop-item:last-child { border-bottom: none; }
.library .drop-item:hover { background: var(--paper); }
.library .drop-item .drop-count {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--muted);
}
.library .drop-item.new-collection {
  color: var(--accent);
  font-weight: 500;
}

/* ── Empty state ── */
.library .empty {
  grid-column: 1 / -1;
  padding: 4rem 2rem;
  text-align: center;
}
.library .empty-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  opacity: 0.4;
}
.library .empty h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}
.library .empty p {
  font-size: 0.85rem;
  color: var(--muted);
}
.library .empty-cta {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1.4rem;
  text-decoration: none;
}

/* ── Filter chips (active filters) ── */
.library .active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.library .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}
.library .filter-chip span { font-size: 0.75rem; opacity: 0.7; }

/* ── Results tail (progress + done footer) ── */
.library .results-tail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 0 2rem;
}
.library .progress-bar {
  width: 100%;
  max-width: 320px;
  height: 2px;
  background: var(--rule);
}
.library .progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.4s ease;
}
.library .progress-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.library .all-done {
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
  padding: 1rem 0 0;
}
.library .reveal-more-btn {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 0.65rem 1.2rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.library .reveal-more-btn:hover { background: var(--ink); color: var(--paper); }

/* ════ SIDEBAR ════ */
.library .sidebar {
  position: sticky;
  top: 130px;
  border: 1px solid var(--rule);
  background: #fff;
  padding: 0;
  overflow: hidden;
}
@media (max-width: 900px) {
  .library .sidebar {
    position: static;
    border: none;
    background: transparent;
  }
}

/* Sidebar header */
.library .sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.library .sidebar-title {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}
.library .reset-btn {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.library .reset-btn[hidden] { display: none; }

/* Sidebar section */
.library .s-section { border-bottom: 1px solid var(--rule); }
.library .s-section:last-child { border-bottom: none; }
.library .s-section-label {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 0.75rem;
  display: block;
}
.library .s-pad { padding: 1.1rem 1.3rem; }

/* Text search */
.library .search-wrap { position: relative; }
.library .search-input {
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 0.6rem 2.2rem 0.6rem 0.85rem;
  outline: none;
  color: var(--ink);
  transition: border-color 0.2s;
}
.library .search-input:focus { border-color: var(--ink); }
.library .search-input::placeholder { color: #b0a699; }
.library .search-clear {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  padding: 2px;
  transition: color 0.15s;
}
.library .search-clear[hidden] { display: none; }
.library .search-clear:hover { color: var(--accent); }

/* Sort + type select */
.library .sort-select {
  width: 100%;
  border: 1px solid var(--rule);
  background-color: var(--paper);
  font-family: var(--sans);
  font-size: 0.83rem;
  padding: 0.6rem 2rem 0.6rem 0.85rem;
  outline: none;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 stroke=%27%238a7f74%27 stroke-width=%271.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}
.library .sort-select:focus { border-color: var(--ink); }

/* Collections list in sidebar */
.library .collection-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.library .collection-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: color 0.15s;
}
.library .collection-row:hover { color: var(--ink); }
.library .collection-row.active { color: var(--ink); font-weight: 500; }
.library .collection-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.library .collection-row-count {
  margin-left: auto;
  font-size: 0.62rem;
  color: #b0a699;
}
.library .new-collection-btn {
  margin-top: 0.6rem;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  color: var(--accent);
  border: 1px dashed var(--rule);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.library .new-collection-btn:hover { border-color: var(--accent); }

/* Collapsible multi-select */
.library .collapsible-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.3rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.library .collapsible-toggle:hover { background: var(--paper); }
.library .collapsible-toggle-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.library .collapsible-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.library .collapsible-count {
  background: var(--ink);
  color: var(--paper);
  font-size: 0.58rem;
  min-width: 16px;
  height: 16px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.library .chevron {
  transition: transform 0.25s;
  flex-shrink: 0;
  color: var(--muted);
}
.library .chevron.open { transform: rotate(180deg); }

.library .collapsible-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.library .collapsible-body.open {
  max-height: 320px;
  border-top: 1px solid #ede7dc;
}
.library .collapsible-inner {
  padding: 0.75rem 1.3rem 1rem;
  display: flex;
  flex-direction: column;
}

/* Inner facet search + scrollable options */
.library .facet-search { margin-bottom: 0.6rem; }
.library .facet-search-input {
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 0.78rem;
  padding: 0.4rem 0.7rem;
  outline: none;
  color: var(--ink);
  transition: border-color 0.2s;
}
.library .facet-search-input:focus { border-color: var(--ink); }
.library .facet-search-input::placeholder { color: #b0a699; }

.library .facet-options {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  overflow-y: auto;
  max-height: 11rem;
}
.library .facet-options::-webkit-scrollbar { width: 3px; }
.library .facet-options::-webkit-scrollbar-thumb { background: var(--rule); }

/* Checkbox option */
.library .opt {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 0;
  cursor: pointer;
  user-select: none;
}
.library .opt:hover .opt-label { color: var(--ink); }
.library .opt-check {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 1.5px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.library .opt-check.checked {
  background: var(--ink);
  border-color: var(--ink);
}
.library .opt-check svg { display: none; }
.library .opt-check.checked svg { display: block; }
.library .opt-label {
  font-size: 0.8rem;
  color: var(--muted);
  transition: color 0.15s;
  flex: 1;
}
.library .opt-pill {
  font-size: 0.62rem;
  color: #b0a699;
}

/* ════ Modal (new collection) ════ */
.library .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,20,16,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.library .modal-overlay[hidden] { display: none; }
.library .modal {
  background: #fff;
  width: 100%;
  max-width: 420px;
  padding: 1.6rem 1.6rem 1.4rem;
  border: 1px solid var(--rule);
  box-shadow: 0 24px 60px rgba(26,20,16,0.25);
}
.library .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.library .modal-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--ink);
}
.library .modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
}
.library .modal-input {
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 0.88rem;
  padding: 0.65rem 0.85rem;
  outline: none;
  color: var(--ink);
  margin-bottom: 1rem;
}
.library .modal-input:focus { border-color: var(--ink); }
.library .modal-btn {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
}
.library .modal-btn:hover { background: var(--accent); }

/* ════════════════════════════════════════
   The Sunset Ink - Article Page V1
   Full-bleed hero → sticky meta bar → centered serif body → tags → related grid.
   All selectors scoped under .article-page so .hero / .tag / .rel-card etc.
   don't collide with sibling components. Tokens come from src/styles/main.css.
   The hero & avatar background colours are set inline by the JS (per-article).
════════════════════════════════════════ */

/* ── Hero ── */
.article-page .hero {
  position: relative;
  width: 100%;
  height: clamp(320px, 52vw, 600px);
  overflow: hidden;
  /* background colour set inline */
}
/* Hero image fills the section beneath the pattern + dark overlay so the
   title strip still reads against the photograph. Absent when the author
   hasn't uploaded a hero - palette + pattern carry the strip on their own. */
.article-page .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-page .hero-pattern {
  position: absolute;
  inset: 0;
  /* background-image set inline (uses heroAccent) */
}
.article-page .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(26, 20, 16, 0.82) 100%);
}
.article-page .hero-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1.25rem, 8vw, 8rem);
}
/* Column kicker - small italic serif line above the topic badge,
   identifying the recurring series the piece belongs to. No background:
   reads as quiet editorial framing rather than a topic tag. */
.article-page .hero-column {
  display: block;
  font-family: var(--serif);
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(245, 240, 232, 0.72);
  margin-bottom: 0.55rem;
}
.article-page .hero-cat {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--accent);
  padding: 0.3rem 0.8rem;
  margin-bottom: 1rem;
}
.article-page .hero-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--paper);
  letter-spacing: -0.02em;
  max-width: 820px;
  margin-bottom: 0.75rem;
}
.article-page .hero-subtitle {
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  color: rgba(245, 240, 232, 0.78);
  max-width: 640px;
  line-height: 1.6;
}

/* ── Meta bar (sticky) ── */
.article-page .meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.2rem clamp(1.25rem, 8vw, 8rem);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 120px; /* clears site header (72px top + 48px nav) */
  z-index: 10;
}
.article-page .meta-left {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.article-page .author-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--paper);
  flex-shrink: 0;
  /* background colour set inline (per-article heroAccent) */
}
.article-page .author-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.article-page .author-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
}
.article-page .author-role {
  font-size: 0.72rem;
  color: var(--muted);
}
.article-page .meta-divider {
  width: 1px;
  height: 28px;
  background: var(--rule);
}
.article-page .meta-date {
  font-size: 0.78rem;
  color: var(--muted);
}
.article-page .meta-read {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--muted);
  padding: 0.25rem 0.65rem;
}

/* Share row */
.article-page .share-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.article-page .share-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.25rem;
}
.article-page .share-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  text-decoration: none;
}
.article-page .share-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.article-page .share-btn svg { pointer-events: none; }

/* Transient "Copied" toast - attached to <body>, not nested under
   .article-page, so it floats above page chrome and isn't clipped. */
.article-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8rem;
  padding: 0.7rem 1.1rem;
  z-index: 9999;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.article-toast.is-visible { opacity: 1; transform: translateY(0); }
.article-toast svg { flex-shrink: 0; }

/* Filled / outline flag-icon toggling (mirrors the save-btn pattern). */
.article-page .share-btn[data-flagged="1"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ── Report-article modal - appended to <body>, not nested under .article-page
   (same reason as .article-toast). Calm centred dialog, ink-on-paper, no
   animation gimmicks. ── */
.flag-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
}
body.flag-modal-open { overflow: hidden; }

.flag-modal-card {
  background: var(--paper);
  color: var(--ink);
  width: min(480px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  border-radius: 2px;
}

.flag-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.flag-modal-title {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}
.flag-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0 0.25rem;
}
.flag-modal-close:hover { color: var(--ink); }

.flag-modal-blurb {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 1rem;
  line-height: 1.5;
}

.flag-modal-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1rem;
}
.flag-modal-legend {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
  padding: 0;
}
.flag-modal-reason {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.25rem;
  cursor: pointer;
  font-size: 0.9rem;
  border-radius: 2px;
}
.flag-modal-reason:hover { background: rgba(0, 0, 0, 0.04); }
.flag-modal-reason input { accent-color: var(--accent, currentColor); }

.flag-modal-note-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}
.flag-modal-note-label > span {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.flag-modal-note {
  width: 100%;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
  min-height: 4.5rem;
}
.flag-modal-note:focus { outline: 2px solid var(--accent, var(--ink)); outline-offset: 1px; }
.flag-modal-note-hint {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 0.4rem;
}

.flag-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.flag-modal-cancel,
.flag-modal-submit {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--ink);
  cursor: pointer;
  background: var(--paper);
  color: var(--ink);
}
.flag-modal-submit {
  background: var(--ink);
  color: var(--paper);
}
.flag-modal-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.flag-modal-cancel:hover { background: var(--ink); color: var(--paper); }

.flag-modal-err {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--accent, #b03a2e);
  min-height: 1.2em;
}

/* ── Article body ── */
.article-page .article-wrap {
  display: grid;
  grid-template-columns: 1fr min(680px, 100%) 1fr;
  padding: clamp(2rem, 5vw, 4rem) 0;
}
.article-page .article-body {
  grid-column: 2;
  padding: 0;
}

.article-page .article-body .lede {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.65;
  color: #3a302a;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}
.article-page .article-body p {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.85;
  color: #2a2018;
  margin-bottom: 1.6rem;
}
.article-page .article-body .article-section-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: 2rem 0 0.5rem;
  line-height: 1.4;
}
/* When a section label is followed by a heading, kill the heading's top
   margin so the pair reads as one label-plus-title unit. Sibling rule
   works because HTL emits them as direct siblings inside .article-body -
   there's no wrapper. */
.article-page .article-body .article-section-label + h2,
.article-page .article-body .article-section-label + h3 {
  margin-top: 0;
}
/* Metrics - horizontal stat row. Each column shares horizontal space via
   flex; vertical rule between siblings via border-left on every column
   after the first. Heavy top rule + light bottom rule frame the block
   without dueling against neighbouring sections. */
.article-page .article-body .article-metrics {
  display: flex;
  align-items: stretch;
  margin: 2.5rem 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.article-page .article-body .article-metric {
  flex: 1 1 0;
  min-width: 0;                       /* allow labels to wrap inside flex */
  padding: 1.4rem 1rem 1.25rem;
  text-align: center;
  border-left: 1px solid var(--rule);
}
.article-page .article-body .article-metric:first-child {
  border-left: none;
}
.article-page .article-body .article-metric-value {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  line-height: 1;
  color: var(--ink);
  margin-bottom: 0.5rem;
  font-feature-settings: 'tnum' 1;
}
.article-page .article-body .article-metric-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.5;
}
@media (max-width: 560px) {
  /* Wrap to two columns on small screens - five+ stats stack readably,
     and adjacent borders become horizontal between rows. */
  .article-page .article-body .article-metrics {
    flex-wrap: wrap;
  }
  .article-page .article-body .article-metric {
    flex: 1 1 45%;
  }
  .article-page .article-body .article-metric:nth-child(odd) {
    border-left: none;
  }
  .article-page .article-body .article-metric:nth-child(n+3) {
    border-top: 1px solid var(--rule);
  }
}

/* Milestones - two-column key/value list (e.g. timeline of years and
   events). Border-top on the <dl> + border-bottom on each <dt> and <dd>
   gives the "rules between rows, no outer frame" look. No <div> wrappers:
   HTL closes <dl> on the first non-dt/dd child, and the row-bottom-border
   approach needs zero gap between columns to read as one continuous rule.
   Right padding on <dt> gives the visual column separation instead. */
.article-page .article-body .article-milestones {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0;
  margin: 2rem 0;
  border-top: 1px solid var(--rule);
}
.article-page .article-body .article-milestones dt {
  padding: 1rem clamp(1.5rem, 4vw, 3rem) 1rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  font-feature-settings: 'tnum' 1;   /* tabular numerals - column-align years */
  white-space: nowrap;
  /* No align-self override: default `stretch` makes both <dt> and <dd>
     fill the grid row, so their bottom borders meet at the row's bottom
     edge regardless of how many lines <dd> wraps to. Text stays at the
     top because of the `padding-top: 1rem` above. */
}
.article-page .article-body .article-milestones dd {
  margin: 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.6;
  color: #2a2018;
}
@media (max-width: 560px) {
  .article-page .article-body .article-milestones {
    grid-template-columns: 1fr;
  }
  /* Stack to one column: drop the rule between <dt> and the <dd> below it
     so each year+event pair reads as one unit; keep the rule only on <dd>. */
  .article-page .article-body .article-milestones dt {
    padding: 0.85rem 0 0;
    border-bottom: none;
  }
  .article-page .article-body .article-milestones dd {
    padding: 0.2rem 0 0.85rem;
  }
}

/* Outro - closing flourish. Single heavy top rule marks "this is the end
   of the piece"; the tags-section below has its own border-top so a
   bottom rule on the outro would duplicate it and read as visual noise.
   white-space: pre-line preserves manual line breaks from the author's
   textarea (e.g. splitting "Premier League. FA Cup. Golden Boot." and
   "With Leicester City." onto separate lines). */
/* Body image block - uploaded image plus optional italic caption. Width
   matches the article body's centred column; height scales to preserve
   the image's aspect ratio. */
.article-page .article-body .article-image {
  margin: 1.75rem 0;
}
.article-page .article-body .article-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.article-page .article-body .article-image figcaption {
  font-family: var(--serif);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-muted, #6b5f50);
  text-align: center;
  margin-top: 0.55rem;
  line-height: 1.5;
}

.article-page .article-body .article-outro {
  margin: 3rem 0 1.5rem;
  padding: 2.25rem 1.5rem 0;
  border-top: 1px solid var(--ink);
  text-align: center;
}
.article-page .article-body .article-outro-summary {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  line-height: 1.55;
  color: #2a2018;
  margin: 0 0 1rem;
  white-space: pre-line;
}
.article-page .article-body .article-outro-punchline {
  font-family: var(--sans);
  color: var(--accent);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.7vw, 1.05rem);
  margin: 0;
}
/* When there's no punchline, drop the summary's margin-bottom so the
   summary sits centred between the rules without trailing whitespace. */
.article-page .article-body .article-outro-summary:last-child {
  margin-bottom: 0;
}

.article-page .article-body h2 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.5vw, 1.65rem);
  font-weight: 700;
  color: var(--ink);
  margin: 2.5rem 0 1rem;
  line-height: 1.2;
}
/* Inline marks rendered by InlineMarkdown.java - bold, italic, link,
   inline code, strikethrough. <strong> / <em> / <del> inherit their
   styling from the user agent; this block tunes the link + code looks
   to the rest of the page. */
.article-page .article-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color 0.15s;
}
.article-page .article-body a:hover {
  color: var(--ink);
}
.article-page .article-body code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 0.05em 0.35em;
  background: rgba(26, 20, 16, 0.06);
  border-radius: 2px;
}
.article-page .article-body del,
.article-page .article-body strike,
.article-page .article-body s {
  color: var(--muted);
  text-decoration: line-through;
}

.article-page .article-body blockquote {
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  border-left: 3px solid var(--accent);
  background: rgba(192, 57, 43, 0.04);
}
.article-page .article-body blockquote p {
  font-family: var(--serif);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-style: italic;
  color: #2a2018;
  margin: 0 0 0.5rem;
}
.article-page .article-body blockquote cite {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: normal;
}

/* Pullquote v2 - "showcase" variant. Same accent stripe and italic serif
   body as v1, but on a paper-tone background, large decorative opening
   quote (top-left) and matching closing quote (bottom-right). Defaults to
   v1 when the attribute is absent, so legacy pullquotes render unchanged.

   Positioning note: the typographic quote glyphs sit in the upper portion
   of their CSS line-box, so the closing ::after uses a NEGATIVE bottom
   value to push its line-box past the blockquote's bottom edge - that
   lands the visible "99" glyph near the corner instead of floating in the
   middle of the box. */
.article-page .article-body blockquote[data-variant="v2"] {
  background: var(--paper);
  padding: 1.4rem 4rem 1.4rem 4rem;
  margin: 1.5rem 0;
  position: relative;
  overflow: hidden;  /* contain the ::after that bleeds slightly below */
}
.article-page .article-body blockquote[data-variant="v2"]::before {
  content: "\201C";  /* left double quotation mark */
  position: absolute;
  top: 0.2rem;
  left: 1.4rem;
  font-family: var(--serif);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--accent);
  font-weight: 700;
}
.article-page .article-body blockquote[data-variant="v2"]::after {
  content: "\201D";  /* right double quotation mark */
  position: absolute;
  bottom: -1.4rem;
  right: 1.4rem;
  font-family: var(--serif);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--accent);
  font-weight: 700;
}
.article-page .article-body blockquote[data-variant="v2"] p {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
}
.article-page .article-body blockquote[data-variant="v2"] cite {
  display: block;
  text-align: left;       /* keep clear of the closing-quote glyph at bottom-right */
  margin-top: 0.5rem;
}
@media (max-width: 560px) {
  .article-page .article-body blockquote[data-variant="v2"] {
    padding: 1rem 2.75rem 1rem 3rem;
  }
  .article-page .article-body blockquote[data-variant="v2"]::before {
    font-size: 3.4rem;
    top: 0.1rem;
    left: 0.6rem;
  }
  .article-page .article-body blockquote[data-variant="v2"]::after {
    font-size: 3.4rem;
    bottom: -1rem;
    right: 0.6rem;
  }
}

/* ── Article-specific tags (this article's `metadata.tags`) ──
   Section chrome only - the pills themselves reuse the `.tags-row` and
   `.tag` styling from the browse-by-category section below so both rows
   look visually identical. No `.current-cat` highlight is applied. */
.article-page .article-tags-section {
  padding: 1.5rem clamp(1.25rem, 8vw, 8rem);
  background: var(--paper);
  border-top: 1px solid var(--rule);
}
.article-page .article-tags-heading {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.85rem;
  font-weight: 500;
}

/* ── Tags section ── */
.article-page .tags-section {
  padding: 2.5rem clamp(1.25rem, 8vw, 8rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.article-page .tags-heading {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
  font-weight: 500;
}
.article-page .tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.article-page .tag {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 0.4rem 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  background: transparent;
}
.article-page .tag:hover,
.article-page .tag.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.article-page .tag.current-cat {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}

/* ── Related articles ── */
.article-page .related-section {
  padding: 3rem clamp(1.25rem, 8vw, 8rem) 4rem;
  background: var(--paper);
}
.article-page .related-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
}
.article-page .related-title {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: 400;
  color: var(--ink);
}
/* .related-title em handled by the global "h2 em" italic + accent rule */

.article-page .expand-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 1px solid var(--rule);
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.article-page .expand-btn:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.article-page .expand-icon {
  display: inline-flex;
  transition: transform 0.3s;
}
.article-page .expand-icon.open { transform: rotate(180deg); }

.article-page .related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .article-page .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .article-page .related-grid { grid-template-columns: 1fr; gap: 1rem; }
}

.article-page .rel-card {
  background: #fff;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  animation: article-rel-up 0.35s ease both;
  display: flex;
  flex-direction: column;
}
@keyframes article-rel-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.article-page .rel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(26, 20, 16, 0.09);
}
.article-page .rel-thumb {
  height: 130px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background colour set inline */
}
.article-page .rel-thumb-pat {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(26, 20, 16, 0.07) 0px, rgba(26, 20, 16, 0.07) 1px,
    transparent 1px, transparent 10px
  );
}
.article-page .rel-thumb-letter {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 700;
  color: rgba(26, 20, 16, 0.16);
  z-index: 1;
  user-select: none;
  line-height: 1;
}
.article-page .rel-body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.article-page .rel-cat {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.article-page .rel-title {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 0.75rem;
  flex: 1;
}
.article-page .rel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #ede7dc;
  padding-top: 0.65rem;
  margin-top: auto;
}
.article-page .rel-author {
  font-size: 0.7rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article-page .rel-read {
  font-size: 0.68rem;
  color: #b0a699;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Mobile: header v1 collapses its 48px nav into the hamburger drawer (absolutely
   positioned, out of flow), so the sticky site header is only the 72px top bar.
   Match the meta-bar's stick offset to that. */
@media (max-width: 700px) {
  .article-page .meta-bar { top: 72px; }
}

/* Responsive meta bar + body padding on mobile */
@media (max-width: 640px) {
  .article-page .meta-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .article-page .meta-divider { display: none; }
  .article-page .share-row { padding-top: 0.25rem; }
  .article-page .article-wrap { grid-template-columns: 1fr; }
  .article-page .article-body { padding: 0 1.25rem; }
}

/* ── Not found / degraded state ──
   Mirrors the topic / author / column missing-state treatment so the three
   editorial landing pages and the article page all surface a 404 / network
   blip with the same dark-hero visual weight. Class scope is
   `.article-page--missing` so the per-piece `.hero` styles above never
   apply on this branch. */
.article-page--missing .missing-hero {
  background: var(--ink);
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 5.5rem) clamp(1.25rem, 5vw, 4rem);
  min-height: 240px;
}
.article-page--missing .missing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 18px);
  pointer-events: none;
}
.article-page--missing .missing-hero::after {
  content: '';
  position: absolute;
  top: -30%;
  right: 5%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(192,57,43,0.14) 0%, transparent 70%);
  pointer-events: none;
}
.article-page--missing .missing-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}
.article-page--missing .missing-title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--paper);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.article-page--missing .missing-message {
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  color: rgba(245,240,232,0.55);
  line-height: 1.7;
  max-width: 640px;
  margin: 0;
}
.article-page--missing .missing-message a {
  color: rgba(245,240,232,0.85);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.article-page--missing .missing-message a:hover {
  color: var(--paper);
}

/* ════════════════════════════════════════
   The Sunset Ink - Article Submit V1
   Four-step contributor portal (sidebar + content). All selectors scoped under
   .article-submit. Tokens come from src/styles/main.css; the global
   `h1 em / h2 em / h3 em` rule there already handles italic+accent on key words.
════════════════════════════════════════ */

.article-submit {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
}

/* ── Layout ── */
.article-submit .portal-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: start;
  min-height: 70vh;
}
@media (max-width: 860px) {
  .article-submit .portal-wrap { grid-template-columns: 1fr; }
}

/* ── Sidebar ── */
.article-submit .sidebar {
  background: var(--ink);
  padding: 2.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-self: stretch;
}
@media (max-width: 860px) {
  .article-submit .sidebar {
    padding: 1.25rem clamp(1.25rem, 5vw, 4rem);
    flex-direction: row;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .article-submit .sidebar::-webkit-scrollbar { display: none; }
}

.article-submit .sidebar-brand { margin-bottom: 2.5rem; }
.article-submit .sidebar-brand-name {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -0.01em;
}
.article-submit .sidebar-brand-name em {
  font-style: italic;
  color: var(--accent);
}
.article-submit .sidebar-brand-sub {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.35);
  margin-top: 0.2rem;
}
@media (max-width: 860px) { .article-submit .sidebar-brand { display: none; } }

/* Steps nav */
.article-submit .step-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
@media (max-width: 860px) {
  .article-submit .step-nav { flex-direction: row; gap: 0; flex: 1; }
}
.article-submit .step-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0.75rem;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}
@media (max-width: 860px) {
  .article-submit .step-item {
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 0.9rem;
    flex-shrink: 0;
  }
}
.article-submit .step-item:hover { background: rgba(245, 240, 232, 0.06); }
.article-submit .step-item.active { background: rgba(245, 240, 232, 0.1); }
.article-submit .step-item.done .step-num {
  background: #27ae60;
  border-color: #27ae60;
  color: #fff;
}

.article-submit .step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 240, 232, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(245, 240, 232, 0.4);
  flex-shrink: 0;
  transition: all 0.2s;
}
.article-submit .step-item.active .step-num {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.article-submit .step-info { display: flex; flex-direction: column; gap: 0.1rem; }
@media (max-width: 860px) { .article-submit .step-info { align-items: center; } }
.article-submit .step-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.35);
  transition: color 0.2s;
}
.article-submit .step-item.active .step-label { color: var(--paper); }
.article-submit .step-title-text {
  font-size: 0.82rem;
  color: rgba(245, 240, 232, 0.6);
  transition: color 0.2s;
}
.article-submit .step-item.active .step-title-text { color: rgba(245, 240, 232, 0.9); }
@media (max-width: 860px) { .article-submit .step-title-text { display: none; } }

.article-submit .step-connector {
  width: 1px;
  height: 20px;
  background: rgba(245, 240, 232, 0.1);
  margin: 0 0 0 calc(0.75rem + 13px - 0.5px);
}
@media (max-width: 860px) { .article-submit .step-connector { display: none; } }

.article-submit .sidebar-footer {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 240, 232, 0.08);
}
@media (max-width: 860px) { .article-submit .sidebar-footer { display: none; } }
.article-submit .sidebar-footer p {
  font-size: 0.72rem;
  color: rgba(245, 240, 232, 0.3);
  line-height: 1.55;
}
.article-submit .sidebar-footer a {
  color: rgba(245, 240, 232, 0.45);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-submit .sidebar-settings {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.7);
  background: transparent;
  border: 1px solid rgba(245, 240, 232, 0.18);
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.55rem;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.article-submit .sidebar-settings:hover,
.article-submit .sidebar-settings.active {
  background: rgba(245, 240, 232, 0.06);
  border-color: rgba(245, 240, 232, 0.4);
  color: var(--paper);
}
.article-submit .sidebar-settings svg { flex-shrink: 0; }

.article-submit .sidebar-signout {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.7);
  background: transparent;
  border: 1px solid rgba(245, 240, 232, 0.18);
  padding: 0.65rem 0.9rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.article-submit .sidebar-signout:hover {
  background: rgba(192, 57, 43, 0.18);
  border-color: var(--accent);
  color: var(--paper);
}
.article-submit .sidebar-signout:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.article-submit .sidebar-signout svg { flex-shrink: 0; }

/* ── Main content area ── */
.article-submit .content {
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.5rem) 4rem;
  animation: as-fadeUp 0.3s ease both;
}
@keyframes as-fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Step header */
.article-submit .step-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.article-submit .step-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.45rem;
}
.article-submit .step-h1 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.article-submit .step-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 580px;
}

/* ── Form grid ── */
.article-submit .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.article-submit .form-grid.single { grid-template-columns: 1fr; }
@media (max-width: 640px) {
  .article-submit .form-grid { grid-template-columns: 1fr; }
}
.article-submit .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}
.article-submit .form-group.span2 { grid-column: 1 / -1; }
.article-submit .f-label {
  font-size: 0.63rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5a4a3a;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.article-submit .f-optional {
  font-size: 0.62rem;
  color: #b0a699;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.article-submit .f-input,
.article-submit .f-select,
.article-submit .f-textarea {
  border: 1.5px solid var(--rule);
  background: #fff;
  font-family: var(--sans);
  font-size: 0.88rem;
  padding: 0.68rem 0.9rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.article-submit .f-input:focus,
.article-submit .f-select:focus,
.article-submit .f-textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26, 20, 16, 0.05);
}
.article-submit .f-input::placeholder,
.article-submit .f-textarea::placeholder { color: #b8b0a8; }
.article-submit .f-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.65;
}
.article-submit .f-select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 stroke=%27%238a7f74%27 stroke-width=%271.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
}
.article-submit .f-hint {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 0.1rem;
}
.article-submit .char-warn { color: var(--accent); }

/* Section dividers */
.article-submit .form-section-title {
  font-size: 0.63rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: 2rem 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.article-submit .form-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.article-submit .form-section-title .f-optional {
  text-transform: none;
  letter-spacing: 0;
  color: #b0a699;
  font-weight: 400;
}

/* Tag input */
.article-submit .tag-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem;
  border: 1.5px solid var(--rule);
  background: #fff;
  min-height: 44px;
  align-items: center;
  cursor: text;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.article-submit .tag-wrap:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26, 20, 16, 0.05);
}
.article-submit .tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.7rem;
  padding: 0.25rem 0.6rem;
}
.article-submit .tag-pill button {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(245, 240, 232, 0.6);
  display: flex;
  align-items: center;
  padding: 0;
  transition: color 0.15s;
  line-height: 1;
}
.article-submit .tag-pill button:hover { color: var(--paper); }
.article-submit .tag-input-field {
  border: none;
  outline: none;
  font-family: var(--sans);
  font-size: 0.83rem;
  background: transparent;
  color: var(--ink);
  flex: 1;
  min-width: 80px;
  padding: 0.1rem 0.2rem;
}
.article-submit .tag-input-field::placeholder { color: #b8b0a8; }

/* Combobox (Column field - filterable list with free-text fallback) */
.article-submit .combo-wrap {
  position: relative;
}
.article-submit .combo-input {
  padding-right: 2.4rem;
  cursor: pointer;
}
.article-submit .combo-input:focus { cursor: text; }
.article-submit .combo-chevron {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
  display: flex;
  transition: transform 0.2s;
}
.article-submit .combo-wrap.open .combo-chevron {
  transform: translateY(-50%) rotate(180deg);
  color: var(--ink);
}
.article-submit .combo-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid var(--rule);
  max-height: 240px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(26, 20, 16, 0.08);
}
.article-submit .combo-option {
  padding: 0.55rem 0.9rem;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  user-select: none;
}
.article-submit .combo-option:hover {
  background: var(--ink);
  color: var(--paper);
}
.article-submit .combo-empty {
  padding: 0.65rem 0.9rem;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}
/* Separator only when at least one option is also visible above it */
.article-submit .combo-option:not([hidden]) ~ .combo-empty:not([hidden]) {
  border-top: 1px solid var(--rule);
}

/* ── Topic combobox (grouped + searchable) ─────────────────────────────────
   Distinct from the .combo-* family above - the topic field's strict
   "must pick from list" rule meant the column combobox's free-text affordance
   was wrong here, and the grouped + search-at-top layout (per the IA
   design) wants its own visual treatment. Shared trigger appearance with
   .f-input so the form layout doesn't shift when the field changes type. */
.article-submit .topic-combo {
  position: relative;
}
.article-submit .topic-combo-trigger {
  padding-right: 2.4rem;
  cursor: pointer;
  /* Readonly trigger should still LOOK like the editable inputs around it.
     Clear the user-agent's readonly tinting and use the same .f-input bg. */
  background: var(--paper);
}
.article-submit .topic-combo-trigger:focus {
  outline: none;
}
.article-submit .topic-combo-chevron {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
  display: flex;
  transition: transform 0.2s;
}
.article-submit .topic-combo.open .topic-combo-chevron {
  transform: translateY(-50%) rotate(180deg);
  color: var(--ink);
}

.article-submit .topic-combo-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid var(--rule);
  z-index: 20;
  box-shadow: 0 8px 24px rgba(26, 20, 16, 0.08);
  display: flex;
  flex-direction: column;
  /* Cap the whole panel; the list scrolls beneath the sticky search row. */
  max-height: 340px;
}
/* Override the .topic-combo-panel { display: flex } above when the panel
   carries the [hidden] attribute. Without this rule, the explicit display
   value beats the browser's default `[hidden] { display: none }` (higher
   specificity), and the close() call in cards-list.js can't actually
   hide the dropdown after a topic is selected. */
.article-submit .topic-combo-panel[hidden] { display: none; }

.article-submit .topic-combo-search-row {
  position: relative;
  flex-shrink: 0;
  border-bottom: 1px solid var(--rule);
  background: #fff;
}
.article-submit .topic-combo-search-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  display: flex;
}
.article-submit .topic-combo-search {
  width: 100%;
  border: none;
  outline: none;
  padding: 0.7rem 0.9rem 0.7rem 2.4rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink);
  background: transparent;
}
.article-submit .topic-combo-search::placeholder { color: #b8b0a8; }

.article-submit .topic-combo-list {
  overflow-y: auto;
  flex: 1 1 auto;
}

.article-submit .topic-combo-group + .topic-combo-group {
  border-top: 1px solid var(--rule);
}
.article-submit .topic-combo-group-header {
  padding: 0.55rem 0.9rem 0.2rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: #fff;
}
.article-submit .topic-combo-group-options {
  padding-bottom: 0.35rem;
}

.article-submit .topic-combo-option {
  padding: 0.45rem 0.9rem 0.45rem 1.4rem;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  user-select: none;
  position: relative;
}
.article-submit .topic-combo-option:hover,
.article-submit .topic-combo-option.active {
  background: var(--ink);
  color: var(--paper);
}
/* Selected (currently committed) marker - a small accent dot on the left.
   Survives the .active highlight so the user still sees "this is your
   current pick" when they're keyboard-navigating away from it. */
.article-submit .topic-combo-option.selected::before {
  content: '';
  position: absolute;
  left: 0.55rem;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}

.article-submit .topic-combo-empty {
  padding: 0.9rem;
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  text-align: center;
}

/* Hero image upload */
.article-submit .hero-dropzone {
  border: 2px dashed var(--rule);
  background: #fff;
  padding: 2.5rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}
.article-submit .hero-dropzone:hover {
  border-color: var(--muted);
  background: rgba(212, 204, 192, 0.05);
}
.article-submit .hero-dropzone.has-image {
  padding: 0;
  border-style: solid;
  border-color: var(--rule);
}
.article-submit .hero-preview {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.article-submit .hero-dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  pointer-events: none;
}
.article-submit .hero-dz-icon { color: var(--rule); }
.article-submit .hero-dz-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: #5a4a3a;
}
.article-submit .hero-dz-sub {
  font-size: 0.75rem;
  color: #b0a699;
}
.article-submit .hero-change-btn {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(26, 20, 16, 0.7);
  color: var(--paper);
  border: none;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: background 0.2s;
}
.article-submit .hero-change-btn:hover { background: var(--ink); }
.article-submit .hero-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

/* ── Body editor ── */
.article-submit .editor-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.article-submit .editor-empty {
  text-align: center;
  padding: 2.5rem;
  border: 2px dashed var(--rule);
  color: #b0a699;
  font-size: 0.85rem;
}

.article-submit .add-block-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.9rem 1rem;
  background: rgba(26, 20, 16, 0.03);
  border: 1px dashed var(--rule);
}
.article-submit .add-block-label {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-right: 0.25rem;
  white-space: nowrap;
}
.article-submit .add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: #5a4a3a;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 0.38rem 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  font-family: var(--sans);
}
.article-submit .add-btn:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.article-submit .add-btn svg { flex-shrink: 0; }

/* Block card */
.article-submit .block-card {
  background: #fff;
  border: 1.5px solid var(--rule);
  position: relative;
  transition: border-color 0.15s;
}
.article-submit .block-card:focus-within { border-color: var(--muted); }
.article-submit .block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  background: rgba(26, 20, 16, 0.025);
  border-bottom: 1px solid #ede7dc;
}
.article-submit .block-type-badge {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.article-submit .block-type-changer {
  cursor: pointer;
}
.article-submit .block-type-select {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  font-weight: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 0.1rem 1.1rem 0.1rem 0.25rem;
  margin: -0.1rem 0;  /* keeps header height stable vs. static badge */
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 0.35rem center, right 0.18rem center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  transition: border-color 0.15s, background-color 0.15s;
}
.article-submit .block-type-select:hover,
.article-submit .block-type-select:focus {
  border-color: #d4ccc0;
  background-color: rgba(26, 20, 16, 0.04);
  outline: none;
}
.article-submit .block-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.article-submit .blk-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #b0a699;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 2px;
  transition: color 0.15s, background 0.15s;
}
.article-submit .blk-btn:hover {
  color: var(--ink);
  background: rgba(26, 20, 16, 0.06);
}
.article-submit .blk-btn.danger:hover {
  color: var(--accent);
  background: rgba(192, 57, 43, 0.06);
}
.article-submit .block-body { padding: 0.85rem; }

/* Block-specific text styles */
.article-submit .blk-textarea {
  width: 100%;
  border: none;
  outline: none;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink);
  resize: none;
  background: transparent;
  line-height: 1.75;
  min-height: 80px;
}
.article-submit .blk-textarea.heading {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  min-height: 48px;
  line-height: 1.3;
}
.article-submit .blk-textarea.subheading {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  min-height: 44px;
  line-height: 1.35;
}
.article-submit .blk-textarea.lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  min-height: 72px;
  line-height: 1.65;
}
.article-submit .blk-textarea.section-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  min-height: 36px;
  line-height: 1.4;
}
.article-submit .blk-textarea.pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  min-height: 60px;
  border-left: 3px solid var(--accent);
  padding-left: 0.85rem;
  line-height: 1.5;
}
.article-submit .blk-textarea.callout {
  font-size: 0.9rem;
  min-height: 60px;
  line-height: 1.65;
}
.article-submit .blk-small-input {
  width: 100%;
  border: 1px solid #ede7dc;
  background: #faf8f4;
  font-family: var(--sans);
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  color: #5a4a3a;
  outline: none;
  margin-top: 0.6rem;
  transition: border-color 0.2s;
}
.article-submit .blk-small-input:focus { border-color: var(--muted); }
.article-submit .blk-small-input::placeholder { color: #b8b0a8; }

/* Image block */
.article-submit .blk-img-dropzone {
  border: 2px dashed var(--rule);
  padding: 1.75rem;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
  background: #faf8f4;
}
.article-submit .blk-img-dropzone:hover {
  border-color: var(--muted);
  background: var(--paper);
}
.article-submit .blk-img-dropzone.has-img {
  padding: 0;
  border-style: solid;
  border-color: var(--rule);
}
.article-submit .blk-img-preview {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  display: block;
}
.article-submit .blk-img-file {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.article-submit .blk-img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}
.article-submit .blk-img-placeholder-txt {
  font-size: 0.78rem;
  color: var(--muted);
}
.article-submit .blk-img-change {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(26, 20, 16, 0.7);
  color: var(--paper);
  border: none;
  padding: 0.32rem 0.7rem;
  cursor: pointer;
}

/* List block */
.article-submit .list-items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.article-submit .list-item-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.article-submit .list-bullet {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.article-submit .list-num {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 16px;
}
.article-submit .list-item-input {
  flex: 1;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink);
  outline: none;
  padding: 0.25rem 0;
  transition: border-color 0.15s;
}
.article-submit .list-item-input:focus { border-color: var(--rule); }
.article-submit .list-item-input::placeholder { color: #b8b0a8; }
.article-submit .list-add-btn {
  font-size: 0.7rem;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.2rem 0;
  transition: color 0.15s;
  font-family: var(--sans);
}
.article-submit .list-add-btn:hover { color: var(--ink); }

/* Callout */
.article-submit .blk-textarea.callout.note      { background: rgba(160, 200, 230, 0.10); border-left: 3px solid #3498db; padding-left: 0.85rem; }
.article-submit .blk-textarea.callout.tip       { background: rgba(39, 174, 96, 0.08);   border-left: 3px solid #27ae60; padding-left: 0.85rem; }
.article-submit .blk-textarea.callout.warning   { background: rgba(230, 180, 50, 0.10);  border-left: 3px solid #f39c12; padding-left: 0.85rem; }
.article-submit .blk-textarea.callout.important { background: rgba(192, 57, 43, 0.06);   border-left: 3px solid var(--accent); padding-left: 0.85rem; }
/* Outro editor - italic-serif summary textarea + optional accent-coloured
   punchline input. Previews the final centred / rules-framed layout at
   editor density so the author sees what's coming. */
.article-submit .blk-textarea.outro-summary {
  font-family: var(--serif);
  font-style: italic;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.5;
  white-space: pre-line;
  min-height: 60px;
}
.article-submit .blk-small-input.outro-punchline {
  text-align: center;
  color: var(--accent);
  font-weight: 600;
  margin-top: 0.6rem;
  font-size: 0.92rem;
}

/* Metrics editor - per-stat value/label inputs + Add stat button. Value
   field is narrow because numerals are usually short; label is wide and
   uppercase-previewed to match the final render. */
.article-submit .metrics-edit {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
}
.article-submit .metrics-stat-edit {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 0.5rem;
  align-items: center;
}
.article-submit .metrics-value-input,
.article-submit .metrics-label-input {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink);
  background: #faf8f4;
  border: 1px solid #ede7dc;
  padding: 0.5rem 0.7rem;
  outline: none;
}
.article-submit .metrics-value-input {
  font-family: var(--serif);
  font-weight: 700;
  text-align: center;
}
.article-submit .metrics-label-input {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  color: var(--muted);
}
.article-submit .metrics-value-input:focus,
.article-submit .metrics-label-input:focus {
  border-color: var(--accent);
  background: var(--paper);
}
.article-submit .metrics-stat-remove {
  background: none;
  border: 1px solid #ede7dc;
  color: var(--muted);
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.article-submit .metrics-stat-remove:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.article-submit .metrics-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
  background: transparent;
  border: 1px dashed #d4ccc0;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, opacity 0.15s;
}
.article-submit .metrics-add-btn:hover:not([disabled]) {
  color: var(--accent);
  border-color: var(--accent);
}
.article-submit .metrics-add-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
@media (max-width: 560px) {
  .article-submit .metrics-stat-edit {
    grid-template-columns: 1fr auto;
    grid-template-areas: "value remove" "label label";
    gap: 0.35rem;
  }
  .article-submit .metrics-value-input { grid-area: value; }
  .article-submit .metrics-label-input { grid-area: label; }
  .article-submit .metrics-stat-remove { grid-area: remove; }
}

/* Milestones editor - per-row label/value inputs + Add row button.
   Mirrors the list-block editor shape; label column is fixed-narrow so
   year-style labels sit aligned. */
.article-submit .milestones-edit {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
}
.article-submit .milestones-row-edit {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 0.5rem;
  align-items: center;
}
.article-submit .milestones-label-input,
.article-submit .milestones-value-input {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink);
  background: #faf8f4;
  border: 1px solid #ede7dc;
  padding: 0.5rem 0.7rem;
  outline: none;
}
.article-submit .milestones-label-input {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}
.article-submit .milestones-label-input:focus,
.article-submit .milestones-value-input:focus {
  border-color: var(--accent);
  background: var(--paper);
}
.article-submit .milestones-row-remove {
  background: none;
  border: 1px solid #ede7dc;
  color: var(--muted);
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.article-submit .milestones-row-remove:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.article-submit .milestones-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
  background: transparent;
  border: 1px dashed #d4ccc0;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.article-submit .milestones-add-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
@media (max-width: 560px) {
  .article-submit .milestones-row-edit {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label remove" "value value";
    gap: 0.35rem;
  }
  .article-submit .milestones-label-input { grid-area: label; }
  .article-submit .milestones-value-input { grid-area: value; }
  .article-submit .milestones-row-remove  { grid-area: remove; }
}

/* Inline-Markdown toolbar that sits above each Markdown-enabled textarea.
   Bold / Italic / Link / Code / Strike - click wraps the current
   selection in the matching delimiter (link opens a URL prompt). */
.article-submit .md-toolbar {
  display: flex;
  gap: 0.2rem;
  margin-bottom: 0.35rem;
}
.article-submit .md-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf8f4;
  border: 1px solid #ede7dc;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.82rem;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.article-submit .md-btn:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.article-submit .callout-select,
.article-submit .pullquote-variant-select {
  font-size: 0.75rem;
  color: #5a4a3a;
  background: #faf8f4;
  border: 1px solid #ede7dc;
  padding: 0.35rem 0.6rem;
  outline: none;
  cursor: pointer;
  margin-bottom: 0.65rem;
  font-family: var(--sans);
}

/* Divider block */
.article-submit .blk-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}
.article-submit .blk-divider-line {
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.article-submit .blk-divider-dots {
  font-size: 1.2rem;
  color: var(--rule);
  letter-spacing: 0.3em;
}

/* Stats bar */
.article-submit .editor-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.article-submit .stat-item {
  font-size: 0.7rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.article-submit .stat-val { font-weight: 500; color: var(--ink); }
.article-submit .autosave-indicator {
  font-size: 0.68rem;
  color: #b0a699;
  margin-left: auto;
  transition: color 0.3s;
}
.article-submit .autosave-indicator.saved { color: #27ae60; }

/* ── Review step ── */
.article-submit .review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
@media (max-width: 640px) {
  .article-submit .review-grid { grid-template-columns: 1fr; }
}
.article-submit .review-card {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 1.25rem;
}
.article-submit .review-card-head {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid #ede7dc;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.article-submit .review-edit-btn {
  font-size: 0.65rem;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.article-submit .review-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.75rem;
}
.article-submit .review-row:last-child { margin-bottom: 0; }
.article-submit .review-field {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b0a699;
}
.article-submit .review-value {
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.5;
}
.article-submit .review-value.empty {
  color: #b0a699;
  font-style: italic;
}
.article-submit .review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}
.article-submit .review-tag {
  font-size: 0.7rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.2rem 0.6rem;
  color: #5a4a3a;
}

/* Body preview */
.article-submit .body-preview {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 1.75rem;
  margin-bottom: 2rem;
}
.article-submit .body-preview-head {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 1.25rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid #ede7dc;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.article-submit .preview-block { margin-bottom: 1.25rem; }
.article-submit .preview-block:last-child { margin-bottom: 0; }
.article-submit .preview-p {
  font-size: 0.92rem;
  line-height: 1.8;
  color: #2a2018;
}
.article-submit .preview-h2 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.article-submit .preview-h3 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.article-submit .preview-lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.65;
  color: #3a302a;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1rem;
}
.article-submit .preview-section-label {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: 0.4rem 0 0.1rem;
}
.article-submit .preview-outro {
  text-align: center;
  border-top: 1px solid var(--ink);
  padding: 1rem 0.5rem 0;
  margin: 0.5rem 0;
}
.article-submit .preview-outro-summary {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #2a2018;
  margin: 0 0 0.5rem;
  white-space: pre-line;
}
.article-submit .preview-outro-summary:last-child {
  margin-bottom: 0;
}
.article-submit .preview-outro-punchline {
  font-family: var(--sans);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.85rem;
  margin: 0;
}

.article-submit .preview-metrics {
  display: flex;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  margin: 0.5rem 0;
}
.article-submit .preview-metric {
  flex: 1;
  padding: 0.7rem 0.5rem;
  text-align: center;
  border-left: 1px solid var(--rule);
}
.article-submit .preview-metric:first-child {
  border-left: none;
}
.article-submit .preview-metric-value {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.article-submit .preview-metric-label {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.article-submit .preview-milestones {
  margin: 0.5rem 0;
  border-top: 1px solid var(--rule);
}
.article-submit .preview-milestones-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  column-gap: 1rem;
  align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule);
}
.article-submit .preview-milestones dt {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
  font-size: 0.85rem;
}
.article-submit .preview-milestones dd {
  margin: 0;
  font-size: 0.85rem;
  color: #2a2018;
}
.article-submit .preview-quote {
  border-left: 3px solid var(--accent);
  padding: 0.85rem 1rem;
  background: rgba(192, 57, 43, 0.04);
  margin: 0.5rem 0;
}
.article-submit .preview-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: #2a2018;
  margin-bottom: 0.35rem;
}
.article-submit .preview-quote cite {
  font-size: 0.72rem;
  color: var(--muted);
}
/* Preview hint for the showcase pullquote variant - mirrors the published
   render at compressed scale. Closing quote uses negative `bottom` to
   align the visible glyph with the bottom-right corner. */
.article-submit .preview-quote[data-variant="v2"] {
  background: var(--paper);
  padding: 0.65rem 2.4rem 0.65rem 2.4rem;
  position: relative;
  overflow: hidden;
}
.article-submit .preview-quote[data-variant="v2"]::before {
  content: "\201C";
  position: absolute;
  top: 0.05rem;
  left: 0.7rem;
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
  font-weight: 700;
}
.article-submit .preview-quote[data-variant="v2"]::after {
  content: "\201D";
  position: absolute;
  bottom: -0.8rem;
  right: 0.7rem;
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
  font-weight: 700;
}
.article-submit .preview-quote[data-variant="v2"] cite {
  display: block;
  text-align: left;
}
.article-submit .preview-img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  display: block;
  margin-bottom: 0.4rem;
}
.article-submit .preview-img-placeholder {
  height: 120px;
  background: #f0ebe0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #b0a699;
}
.article-submit .preview-caption {
  font-size: 0.73rem;
  color: var(--muted);
  font-style: italic;
}
.article-submit .preview-list {
  padding-left: 1.2rem;
  margin: 0.3rem 0;
}
.article-submit .preview-list li {
  font-size: 0.88rem;
  line-height: 1.75;
  color: #2a2018;
  margin-bottom: 0.2rem;
}
.article-submit .preview-callout {
  padding: 0.9rem 1rem;
  margin: 0.5rem 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #2a2018;
}
.article-submit .preview-callout.note      { background: rgba(160, 200, 230, 0.12); border-left: 3px solid #3498db; }
.article-submit .preview-callout.tip       { background: rgba(39, 174, 96, 0.10);   border-left: 3px solid #27ae60; }
.article-submit .preview-callout.warning   { background: rgba(230, 180, 50, 0.10);  border-left: 3px solid #f39c12; }
.article-submit .preview-callout.important { background: rgba(192, 57, 43, 0.07);   border-left: 3px solid var(--accent); }
.article-submit .preview-divider {
  text-align: center;
  letter-spacing: 0.3em;
  color: var(--rule);
  font-size: 1.2rem;
  padding: 0.5rem 0;
}
.article-submit .preview-empty {
  font-size: 0.85rem;
  color: #b0a699;
  font-style: italic;
  padding: 2rem;
  text-align: center;
  border: 1px dashed var(--rule);
}
.article-submit .preview-empty-inline {
  color: #b0a699;
  font-style: italic;
}

/* AI usage disclosure (Step 4) */
.article-submit .ai-usage-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.25rem;
  background: rgba(26, 20, 16, 0.03);
  border: 1px solid var(--rule);
}
.article-submit .ai-usage-box .f-label {
  margin-bottom: 0.15rem;
}
.article-submit .ai-usage-hint {
  font-size: 0.78rem;
  color: #5a4a3a;
  line-height: 1.55;
}
.article-submit .ai-usage-hint a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Agreement */
.article-submit .agree-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 2rem;
  padding: 1.1rem;
  background: #fff;
  border: 1.5px solid var(--rule);
  cursor: pointer;
}
.article-submit .agree-row.checked { border-color: var(--ink); }
.article-submit .agree-checkbox {
  width: 18px; height: 18px;
  border: 1.5px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background 0.15s, border-color 0.15s;
}
.article-submit .agree-checkbox.checked {
  background: var(--ink);
  border-color: var(--ink);
}
.article-submit .agree-text {
  font-size: 0.82rem;
  color: #5a4a3a;
  line-height: 1.6;
}
.article-submit .agree-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Nav buttons */
.article-submit .step-nav-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  gap: 1rem;
  flex-wrap: wrap;
}
.article-submit .btn-back {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1.5px solid var(--rule);
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.article-submit .btn-back:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.article-submit .btn-next {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: none;
  padding: 0.75rem 2.25rem;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.article-submit .btn-next:hover { background: var(--accent); }
.article-submit .btn-next:disabled {
  background: #b0a699;
  cursor: not-allowed;
}
/* Step 4 Preview CTA - same neutral outline shape as btn-back, sits
   between Back and Submit. Anchor, not button (opens in a new tab so the
   author can flip back to the editor without losing scroll). */
.article-submit .btn-preview {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  margin-left: auto;
}
.article-submit .btn-preview:hover {
  background: var(--ink);
  color: var(--paper);
}
.article-submit .btn-submit {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--accent);
  border: none;
  padding: 0.75rem 2.5rem;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.article-submit .btn-submit:hover { background: #a93226; }
.article-submit .btn-submit:disabled {
  background: #b0a699;
  cursor: not-allowed;
}
.article-submit .submit-hint {
  font-size: 0.72rem;
  color: #b0a699;
  text-align: right;
  margin-top: 0.5rem;
}

/* Success screen */
.article-submit .success-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  min-height: 60vh;
}
.article-submit .success-screen {
  text-align: center;
  max-width: 520px;
}
.article-submit .success-icon-wrap {
  width: 72px;
  height: 72px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  animation: as-popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes as-popIn {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.article-submit .success-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.article-submit .success-desc {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 400px;
  margin: 0 auto 2rem;
}
.article-submit .success-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 1.25rem;
  margin-bottom: 2rem;
  text-align: left;
}
.article-submit .sm-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.article-submit .sm-label {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.article-submit .sm-value {
  font-size: 0.82rem;
  color: var(--ink);
  font-weight: 500;
}
.article-submit .success-actions {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
}
.article-submit .success-btn-primary {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: none;
  padding: 0.75rem 2rem;
  cursor: pointer;
  transition: background 0.2s;
}
.article-submit .success-btn-primary:hover { background: var(--accent); }
.article-submit .success-btn-ghost {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--rule);
  padding: 0.75rem 2rem;
  cursor: pointer;
  transition: border-color 0.2s;
}
.article-submit .success-btn-ghost:hover { border-color: var(--ink); }

/* ── Bootstrap loading + error states ── */
.article-submit .loading-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 4rem 2rem;
}
.article-submit .loading-spin-wrap { color: var(--muted); }
.article-submit .loading-spin {
  animation: article-submit-spin 0.9s linear infinite;
  display: inline-block;
}
@keyframes article-submit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.article-submit .bootstrap-error {
  font-size: 0.92rem;
  color: var(--accent);
  text-align: center;
  max-width: 480px;
}

/* ── Locked / read-only fields (Step 1 identity row) ── */
.article-submit .f-input.locked {
  background: rgba(26, 20, 16, 0.04);
  color: var(--muted);
  cursor: not-allowed;
  -webkit-text-fill-color: var(--muted); /* iOS keeps disabled text visible */
}
.article-submit .f-input.locked:focus {
  border-color: var(--rule);
  box-shadow: none;
}

/* ── In-step error banner (server validation, save failures, etc.) ── */
.article-submit .step-error {
  font-size: 0.82rem;
  color: var(--accent);
  background: rgba(192, 57, 43, 0.06);
  border: 1px solid rgba(192, 57, 43, 0.2);
  padding: 0.75rem 0.95rem;
  margin: 1.5rem 0 0;
}

/* ── Disabled sidebar steps (not yet reachable) ── */
.article-submit .step-item.disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.article-submit .step-item.disabled:hover { background: transparent; }

/* ── Hero palette picker (Step 2) ──────────────────────────────────────────
   A row of bg/accent swatches. Each tile shows the dark hero bg with the
   accent floating as a dot in the bottom-right corner - the same visual
   relationship the rendered article uses, so the author previews the pair
   not the individual colours. The currently-selected tile gets a darker
   outline + filled-corner check. */
.article-submit .palette-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.85rem;
  margin-top: 0.25rem;
}
.article-submit .palette-swatch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  padding: 0;
  background: none;
  border: 1.5px solid var(--rule);
  cursor: pointer;
  font-family: var(--sans);
  transition: border-color 0.15s, transform 0.15s;
  text-align: left;
}
.article-submit .palette-swatch:hover { border-color: var(--ink); }
.article-submit .palette-swatch.selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(26, 20, 16, 0.08);
}
.article-submit .palette-swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.article-submit .palette-swatch-bg {
  position: relative;
  display: block;
  height: 72px;
  background-color: currentColor;
}
.article-submit .palette-swatch-accent {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
}
.article-submit .palette-swatch-label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding: 0 0.65rem 0.55rem;
}
.article-submit .palette-swatch.selected .palette-swatch-label {
  font-weight: 500;
}

/* ════════════════════════════════════════
   Articles + Columns sidebar sections + views
   (Added when the multi-draft Articles list and Columns edit views landed.)
════════════════════════════════════════ */

/* Sidebar grouping: each top-level surface (Submit Article / Articles /
   Columns) lives in a `.sidebar-section`. The header is a clickable
   button; for Submit Article the step-nav is nested below it. */
.article-submit .sidebar-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.4rem;
}
.article-submit .sidebar-section-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  border: 0;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.55);
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}
.article-submit .sidebar-section-head:hover {
  background: rgba(245, 240, 232, 0.06);
  color: var(--paper);
}
.article-submit .sidebar-section.active > .sidebar-section-head {
  color: var(--paper);
}
.article-submit .sidebar-section-head svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.article-submit .sidebar-section.active > .sidebar-section-head svg {
  opacity: 1;
  color: var(--accent);
}

/* When Submit Article is NOT the active surface, the step-nav goes dim
   but stays clickable (clicking a step jumps back to submit view). */
.article-submit .step-nav.dim .step-item { opacity: 0.45; }
.article-submit .step-nav.dim .step-item:hover { opacity: 0.7; }
.article-submit .step-nav.dim .step-item.active { opacity: 0.7; background: transparent; }

/* Visual break between the Submit Article block (with its step-nav) and
   the management sections below (Articles, Columns). Articles + Columns
   stay tight to each other - they're a related pair. */
.article-submit [data-role="sidebar-section-submit"] {
  margin-bottom: 1.6rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(245, 240, 232, 0.08);
}

@media (max-width: 860px) {
  .article-submit .sidebar-section { margin-bottom: 0; flex-direction: row; }
  .article-submit .sidebar-section-head { padding: 0.55rem 0.85rem; }
  .article-submit [data-role="sidebar-section-submit"] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
    border-right: 1px solid rgba(245, 240, 232, 0.08);
    padding-right: 0.85rem;
    margin-right: 0.85rem;
  }
}

/* ── View shell (shared by Articles + Columns) ──────────────────────── */
.article-submit .view-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.article-submit .view-h1 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.article-submit .view-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 580px;
}
.article-submit .view-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.45rem;
}
.article-submit .view-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 0.25rem 0.5rem 0.25rem 0;
  margin-bottom: 1rem;
  cursor: pointer;
}
.article-submit .view-back:hover { color: var(--ink); }
.article-submit .view-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  color: var(--muted);
}
.article-submit .view-error {
  background: rgba(192, 57, 43, 0.06);
  border: 1px solid rgba(192, 57, 43, 0.18);
  padding: 1rem 1.25rem;
  border-radius: 4px;
  color: var(--accent);
  font-size: 0.88rem;
}

/* ── List toolbar (search + count) ──────────────────────────────────── */
.article-submit .list-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 640px) {
  .article-submit .list-toolbar { flex-direction: column; align-items: stretch; gap: 0.5rem; }
}
.article-submit .search-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.article-submit .search-input-wrap > svg {
  position: absolute;
  left: 0.85rem;
  color: var(--muted);
  pointer-events: none;
}
.article-submit .search-input {
  width: 100%;
  padding: 0.6rem 2.4rem 0.6rem 2.4rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.article-submit .search-input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}
.article-submit .search-input::-webkit-search-cancel-button { display: none; }
.article-submit .search-clear {
  position: absolute;
  right: 0.6rem;
  width: 22px;
  height: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.06);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
/* Always-rendered, shown only when the input has content. The wrap gets
   the `has-value` class added/removed via JS on every keystroke, which
   is far cheaper than re-rendering the whole toolbar. */
.article-submit .search-input-wrap.has-value .search-clear { display: flex; }
.article-submit .search-clear:hover {
  background: rgba(192, 57, 43, 0.12);
  color: var(--accent);
}
.article-submit .list-count {
  font-size: 0.74rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.article-submit .search-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  border: 1px dashed var(--rule);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.015);
}
.article-submit .search-empty strong {
  color: var(--ink);
  font-weight: 600;
}
.article-submit .list-showall-wrap {
  text-align: center;
  margin-top: 1.25rem;
}
.article-submit .list-showall {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--muted);
  padding: 0.6rem 1.4rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.article-submit .list-showall:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ── Articles list rows ─────────────────────────────────────────────── */
.article-submit .art-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.article-submit .art-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: start;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.article-submit .art-row:hover {
  border-color: rgba(192, 57, 43, 0.35);
  box-shadow: 0 1px 8px rgba(15, 10, 5, 0.04);
}
.article-submit .art-row-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 0.25rem;
}
.article-submit .art-row-sub {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 0.55rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-submit .art-row-meta {
  font-size: 0.74rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.article-submit .art-meta-sep { color: rgba(0, 0, 0, 0.18); }
.article-submit .art-meta-cat { font-weight: 500; color: #5a4a3a; }
.article-submit .art-meta-notes {
  color: var(--accent);
  font-weight: 500;
}
.article-submit .art-col-chip {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  font-size: 0.7rem;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.025);
}

.article-submit .art-row-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: stretch;
  min-width: 130px;
}
.article-submit .art-row-preview,
.article-submit .art-row-continue,
.article-submit .col-row-edit {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.article-submit .art-row-preview,
.article-submit .col-row-edit {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: var(--ink);
}
.article-submit .art-row-preview:hover,
.article-submit .col-row-edit:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.article-submit .art-row-continue {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
}
.article-submit .art-row-continue:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* Status pills - colour-coded by stage. */
.article-submit .status-pill {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink);
}
.article-submit .status-draft_stage_1,
.article-submit .status-draft_stage_2 { background: rgba(133, 100, 60, 0.15); color: #6a4f2c; }
.article-submit .status-pending_review { background: rgba(60, 100, 180, 0.12); color: #2d4d8a; }
.article-submit .status-needs_revision { background: rgba(192, 57, 43, 0.12); color: var(--accent); }
.article-submit .status-accepted       { background: rgba(39, 174, 96, 0.12);  color: #1e7c47; }
.article-submit .status-published      { background: rgba(39, 174, 96, 0.18);  color: #166434; }
.article-submit .status-rejected       { background: rgba(120, 120, 120, 0.18); color: #555; }
.article-submit .status-takedown       { background: rgba(127, 29, 29, 0.16); color: #7f1d1d; }

/* ── Article preview ────────────────────────────────────────────────── */
.article-submit .preview-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}
.article-submit .preview-subtitle {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 0.85rem;
}
.article-submit .preview-meta {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.article-submit .admin-notes-block {
  background: rgba(192, 57, 43, 0.06);
  border-left: 3px solid var(--accent);
  padding: 1.1rem 1.3rem;
  margin: 0 0 2rem;
  border-radius: 0 4px 4px 0;
}
.article-submit .admin-notes-label {
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.article-submit .admin-notes-body {
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.6;
  white-space: pre-wrap;
}
.article-submit .preview-excerpt {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--ink);
  line-height: 1.55;
  border-left: 2px solid var(--rule);
  padding-left: 1.25rem;
  margin: 0 0 2rem;
}
.article-submit .preview-body {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}
.article-submit .preview-empty {
  color: var(--muted);
  font-style: italic;
  padding: 1rem 0;
}
.article-submit .pv-p { margin: 0 0 1rem; }
.article-submit .pv-h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 1.6rem 0 0.6rem;
}
.article-submit .pv-h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 1.3rem 0 0.5rem;
}
.article-submit .pv-section {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: 1.5rem 0 0.4rem;
}
.article-submit .pv-lede {
  font-size: 1.15rem;
  font-style: italic;
  color: #3a2f25;
  line-height: 1.55;
  margin: 0 0 1.2rem;
}
.article-submit .pv-quote {
  border-left: 3px solid var(--accent);
  padding: 0.4rem 0 0.4rem 1.25rem;
  font-style: italic;
  font-size: 1.1rem;
  margin: 1.4rem 0;
}
.article-submit .pv-quote cite {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.4rem;
  letter-spacing: 0.04em;
}
.article-submit .pv-callout {
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid var(--rule);
  border-left-width: 3px;
  padding: 0.85rem 1.1rem;
  margin: 1.2rem 0;
  font-size: 0.95rem;
  border-radius: 0 4px 4px 0;
}
.article-submit .pv-callout-warning   { border-left-color: #d97706; background: rgba(217, 119, 6, 0.05); }
.article-submit .pv-callout-important { border-left-color: var(--accent); background: rgba(192, 57, 43, 0.05); }
.article-submit .pv-callout-tip       { border-left-color: #2d8a4f; background: rgba(45, 138, 79, 0.05); }
.article-submit .pv-list { padding-left: 1.5rem; margin: 0 0 1.2rem; }
.article-submit .pv-list li { margin-bottom: 0.4rem; }
.article-submit .pv-milestones { margin: 1.2rem 0; border-top: 1px solid var(--rule); }
.article-submit .pv-mile-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
}
.article-submit .pv-mile-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 500;
}
.article-submit .pv-mile-value { font-size: 0.95rem; }
.article-submit .pv-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin: 1.4rem 0;
  padding: 1.2rem;
  background: rgba(0, 0, 0, 0.025);
  border-radius: 4px;
}
.article-submit .pv-stat-value {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.article-submit .pv-stat-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.3rem;
}
.article-submit .pv-image {
  margin: 1.4rem 0;
}
.article-submit .pv-image-placeholder {
  background: rgba(0, 0, 0, 0.04);
  border: 1px dashed rgba(0, 0, 0, 0.15);
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  border-radius: 4px;
}
.article-submit .pv-image-placeholder p { margin-top: 0.4rem; }
.article-submit .pv-image figcaption {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.5rem;
  text-align: center;
  font-style: italic;
}
.article-submit .pv-outro {
  margin: 1.8rem 0;
  padding: 1.2rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.article-submit .pv-outro-summary {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink);
  line-height: 1.55;
}
.article-submit .pv-outro-punch {
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.article-submit .pv-divider {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 2rem auto;
  width: 40%;
}

/* ── Columns list rows ──────────────────────────────────────────────── */
.article-submit .col-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.article-submit .col-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.article-submit .col-row:hover {
  border-color: rgba(192, 57, 43, 0.35);
  box-shadow: 0 1px 8px rgba(15, 10, 5, 0.04);
}
.article-submit .col-row-name {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.article-submit .col-row-tagline {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.article-submit .col-row-empty {
  color: rgba(0, 0, 0, 0.32);
  font-style: italic;
}
.article-submit .col-row-meta {
  font-size: 0.74rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.article-submit .col-row-slug {
  font-family: var(--mono, monospace);
  font-size: 0.75rem;
  color: #5a4a3a;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
}
.article-submit .col-edit-slug {
  font-family: var(--mono, monospace);
  font-size: 0.78rem;
  color: var(--muted);
  margin-left: 0.45rem;
}

/* Cancel button on the column edit form pairs with the existing
   .btn-next. Restrained, secondary styling. */
.article-submit .btn-secondary {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: var(--ink);
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.article-submit .btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.article-submit .btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Settings view → Danger Zone ────────────────────────────────────────
 * Lives in the main content area (light surface), so styles deliberately
 * differ from the sidebar's dark palette. Mirrors the reader profile's
 * Danger Zone visually so the two surfaces feel like one product.
 */
.article-submit .settings-danger-zone {
  border: 1px solid rgba(192, 57, 43, 0.35);
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
  background: rgba(192, 57, 43, 0.04);
  max-width: 680px;
}
.article-submit .settings-danger-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.85rem;
}
.article-submit .settings-danger-desc {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--muted, #5a5048);
  line-height: 1.6;
  margin-bottom: 1.1rem;
  max-width: 60ch;
}
.article-submit .settings-danger-desc strong {
  color: var(--ink);
  font-weight: 600;
}

.article-submit .settings-delete-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper);
  background: var(--accent);
  padding: 0.3rem 0.65rem;
  margin-bottom: 0.85rem;
  border-radius: 2px;
}

.article-submit .settings-danger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

/* Shared button base for the danger-zone trio (delete / confirm / cancel /
   keep). Same envelope as the rest of the portal's secondary buttons but
   isolated under .settings- so they don't collide with the Submit Article
   flow's primary CTAs. */
.article-submit .settings-btn-danger,
.article-submit .settings-btn-danger-solid,
.article-submit .settings-btn-secondary {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.article-submit .settings-btn-danger {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.article-submit .settings-btn-danger:hover:not(:disabled) {
  background: var(--accent);
  color: var(--paper);
}
.article-submit .settings-btn-danger:disabled { opacity: 0.55; cursor: not-allowed; }

.article-submit .settings-btn-danger-solid {
  background: var(--accent);
  color: var(--paper);
  border: 1.5px solid var(--accent);
}
.article-submit .settings-btn-danger-solid:hover:not(:disabled) {
  background: #a02f23;
  border-color: #a02f23;
}
.article-submit .settings-btn-danger-solid:disabled { opacity: 0.55; cursor: not-allowed; }

.article-submit .settings-btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid rgba(0, 0, 0, 0.2);
}
.article-submit .settings-btn-secondary:hover:not(:disabled) {
  border-color: var(--ink);
  background: rgba(26, 20, 16, 0.04);
}
.article-submit .settings-btn-secondary:disabled { opacity: 0.55; cursor: not-allowed; }

.article-submit .settings-err-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.25);
  padding: 0.65rem 0.9rem;
  font-size: 0.8rem;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.article-submit .settings-err-banner svg { flex-shrink: 0; }

/* ════════════════════════════════════════
   The Sunset Ink - Column Page V1
   Dedicated column landing page: dark hero + tab content
   (issues grid / about) + always-visible dark about-panel.
   All selectors scoped under .column-page so .article-card / .card-title
   / .chip etc. don't collide with sibling components. Tokens come from
   src/styles/main.css.
════════════════════════════════════════ */

/* ── Column Hero ──
   The bg + accent come from the per-column palette via two CSS custom
   properties set inline on `.column-page` by the HTL:
     --col-hero-bg            base hero background (hex)
     --col-hero-accent-rgba   accent for the radial-gradient glow (rgba)
   Fallback values match the canonical "warm-brown" / original accent so
   any column without a saved palette still renders correctly. */
.column-page .column-hero {
  background: var(--col-hero-bg, var(--ink));
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 5.5rem) clamp(1.25rem, 5vw, 4rem) 0;
}
.column-page .column-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px,
    transparent 1px, transparent 18px
  );
  pointer-events: none;
}
.column-page .column-hero::after {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 60%;
  background: radial-gradient(ellipse at center, var(--col-hero-accent-rgba, rgba(192,57,43,0.15)) 0%, transparent 70%);
  pointer-events: none;
}
.column-page .column-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}

.column-page .column-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}
.column-page .column-breadcrumb a {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.4);
  text-decoration: none;
  transition: color 0.2s;
}
.column-page .column-breadcrumb a:hover { color: rgba(245,240,232,0.8); }
.column-page .column-breadcrumb span {
  font-size: 0.68rem;
  color: rgba(245,240,232,0.2);
}
.column-page .column-breadcrumb .current {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.column-page .column-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(192,57,43,0.4);
  padding: 0.3rem 0.75rem;
  margin-bottom: 1.4rem;
}
.column-page .column-label-dot {
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  animation: column-pulse 2.5s ease-in-out infinite;
}
@keyframes column-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

.column-page .column-name {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 400;
  font-style: italic;
  color: var(--paper);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.column-page .column-tagline {
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: rgba(245,240,232,0.55);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 2.5rem;
}

/* Author strip */
.column-page .column-author-strip {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
.column-page .column-author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(192,57,43,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--paper);
  flex-shrink: 0;
}
.column-page .column-author-meta { flex: 1; }
.column-page .column-author-meta-name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--paper);
  text-decoration: none;
  transition: color 0.2s;
}
.column-page .column-author-meta-name:hover { color: rgba(245,240,232,0.7); }
.column-page .column-author-meta-sub {
  font-size: 0.72rem;
  color: rgba(245,240,232,0.38);
  margin-top: 0.15rem;
}
.column-page .column-stats {
  display: flex;
  gap: 2rem;
}
.column-page .stat-item { text-align: right; }
.column-page .stat-num {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--paper);
  line-height: 1;
}
.column-page .stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.3);
  margin-top: 0.2rem;
}

/* Tab bar */
.column-page .column-tab-bar {
  display: flex;
  align-items: flex-end;
  gap: 0;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.column-page .tab-btn {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.4);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.85rem 1.25rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.column-page .tab-btn:hover { color: rgba(245,240,232,0.7); }
.column-page .tab-btn.active {
  color: var(--paper);
  border-bottom-color: var(--accent);
}
.column-page .tab-bar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
}
/* Follow was removed - see column/v1.html. Selectors retained as no-ops
   so any old SSR'd HTML still in a browser cache lays out reasonably. */
.column-page .btn-follow { display: none; }

/* Column-level Save pill, now the lone tab-bar action. Takes the solid
   accent-red look the Follow button used to own (default state = accent
   fill, white text). The `.saved` state keeps the same fill + text colour
   - the bookmark icon swap (outline → filled) is what signals state.
   Earlier the saved variant went transparent with a paper outline; over
   the hero's accent decoration the see-through fill bled into the letters
   and made the text look two-tone. */
.column-page .btn-column-save {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.column-page .btn-column-save:hover { background: #a93226; border-color: #a93226; }

/* ── Tab panels ── */
.column-page .tab-panel { display: none; }
.column-page .tab-panel.active { display: block; }

/* ── Content area ── */
.column-page .column-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem clamp(1.25rem, 5vw, 4rem);
}

.column-page .content-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  gap: 1rem;
}
.column-page .toolbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.column-page .toolbar-count {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.column-page .toolbar-count strong { color: var(--ink); }

.column-page .filter-chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.column-page .chip {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.column-page .chip:hover { border-color: var(--ink); color: var(--ink); }
.column-page .chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.column-page .sort-select {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background-color: transparent;
  border: 1px solid var(--rule);
  padding: 0.35rem 1.8rem 0.35rem 0.8rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%238a7f74%27 stroke-width=%272.5%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  outline: none;
}
.column-page .sort-select:hover { border-color: var(--ink); }

/* ── Article grid ── */
.column-page .article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 960px) { .column-page .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .column-page .article-grid { grid-template-columns: 1fr; } }

.column-page .article-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  background: var(--paper);
}
.column-page .article-card:hover {
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--rule);
}
.column-page .article-card.featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 700px) {
  .column-page .article-card.featured { grid-template-columns: 1fr; }
}

.column-page .card-image {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  background: var(--rule);
}
.column-page .article-card.featured .card-image {
  aspect-ratio: unset;
  height: 100%;
  min-height: 320px;
}
.column-page .card-image-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.4s ease;
}
.column-page .article-card:hover .card-image-inner { transform: scale(1.03); }
.column-page .card-image-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 32px);
}

/* Image pattern variants */
.column-page .img-pattern-1 { background: linear-gradient(135deg, #2c2420 0%, #1a1410 40%, #3d2b20 100%); }
.column-page .img-pattern-2 { background: linear-gradient(160deg, #1e2830 0%, #0d1a20 50%, #2a1e18 100%); }
.column-page .img-pattern-3 { background: linear-gradient(120deg, #1a1410 0%, #2e1f1a 50%, #1a1410 100%); }
.column-page .img-pattern-4 { background: linear-gradient(150deg, #1e1e2c 0%, #1a1410 60%, #2c1e14 100%); }
.column-page .img-pattern-5 { background: linear-gradient(130deg, #20201a 0%, #1a1814 100%); }

.column-page .card-image-number {
  font-family: var(--serif);
  font-size: clamp(4rem, 10vw, 7rem);
  font-weight: 700;
  font-style: italic;
  color: rgba(255,255,255,0.07);
  line-height: 1;
  user-select: none;
  position: relative;
  z-index: 1;
}
.column-page .article-card.featured .card-image-number {
  font-size: clamp(5rem, 14vw, 11rem);
}

.column-page .issue-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
  background: rgba(26,20,16,0.6);
  padding: 0.25rem 0.6rem;
  backdrop-filter: blur(4px);
  z-index: 2;
}

.column-page .card-body {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.column-page .article-card.featured .card-body {
  padding: 2rem 2.2rem;
  justify-content: center;
}

.column-page .card-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.column-page .card-category {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.column-page .card-dot {
  width: 3px;
  height: 3px;
  background: var(--rule);
  border-radius: 50%;
}
.column-page .card-date,
.column-page .card-read-time {
  font-size: 0.68rem;
  color: var(--muted);
}

.column-page .card-title {
  font-family: var(--serif);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 0.75rem;
  transition: color 0.2s;
}
.column-page .article-card.featured .card-title {
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  margin-bottom: 1rem;
}
.column-page .article-card:hover .card-title { color: var(--accent); }

.column-page .card-excerpt {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 1.25rem;
}
.column-page .article-card:not(.featured) .card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.column-page .card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.column-page .card-read-link {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.2s, gap 0.2s;
}
.column-page .card-read-link:hover { color: var(--accent); gap: 0.65rem; }
.column-page .card-save-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.column-page .card-save-btn:hover { color: var(--ink); }
.column-page .card-save-btn.saved { color: var(--accent); }

/* ── Load more ── */
.column-page .load-more-wrap {
  text-align: center;
  padding: 3rem 0 1rem;
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
}
.column-page .btn-load-more {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  padding: 0.75rem 2.5rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.column-page .btn-load-more:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}
.column-page .btn-load-more:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* ── About tab content ── */
.column-page .about-quote {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--ink);
  font-style: italic;
  margin-bottom: 1.5rem;
}
.column-page .about-attribution {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.column-page .about-divider {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2rem 0;
}
.column-page .about-prose {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 1rem;
}
.column-page .about-prose em {
  font-style: italic;
  color: var(--ink);
}

/* ── Bottom always-visible about panel ── */
.column-page .column-about-panel {
  background: var(--ink);
  color: var(--paper);
  padding: 2.5rem clamp(1.25rem, 5vw, 4rem);
  margin-top: 3rem;
  position: relative;
  overflow: hidden;
}
.column-page .column-about-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 22px);
  pointer-events: none;
}
.column-page .about-panel-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
  position: relative;
}
@media (max-width: 860px) {
  .column-page .about-panel-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .column-page .about-panel-inner { grid-template-columns: 1fr; gap: 2rem; }
}

.column-page .about-section-head {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.column-page .about-col p {
  font-size: 0.85rem;
  line-height: 1.75;
  color: rgba(245,240,232,0.55);
}
.column-page .about-col p + p { margin-top: 0.75rem; }

.column-page .about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
}
.column-page .about-tag {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.column-page .about-tag:hover {
  border-color: rgba(255,255,255,0.4);
  color: var(--paper);
}

/* Quiet empty-state copy on the dark about-panel - same muted hue as
   .about-col p so it doesn't read as "missing content" so much as a
   gentle nudge that the author hasn't filled the field yet. */
.column-page .about-empty {
  font-size: 0.85rem;
  color: rgba(245,240,232,0.35);
  font-style: italic;
}

.column-page .other-columns-list {
  list-style: none;
  margin-top: 0.25rem;
  padding: 0;
}
.column-page .other-columns-list li {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: padding-left 0.2s;
}
.column-page .other-columns-list li:last-child { border-bottom: none; }
.column-page .other-columns-list li:hover { padding-left: 0.35rem; }
.column-page .ocl-name {
  font-family: var(--serif);
  font-size: 0.88rem;
  font-style: italic;
  color: var(--paper);
  line-height: 1.3;
}
.column-page .ocl-sub {
  font-size: 0.68rem;
  color: rgba(245,240,232,0.3);
  margin-top: 0.15rem;
}

/* ── Article tile is now <article> (not <a>) ──
   Cards nest interactive children (save button + read-link), so the whole
   tile can't be an anchor - column-page.js handles whole-tile clicks via
   delegation and navigates to data-article-href. Keep the cursor + hover
   affordances so the tile still reads as clickable. */
.column-page article.article-card { cursor: pointer; }

/* ── Lazy-load sentinel + loading state ──
   The sentinel is a zero-content element the IntersectionObserver watches.
   1px tall so it sits silently at the bottom of the grid until it scrolls
   into the viewport - at which point column-page.js fires the next fetch. */
.column-page .lazy-sentinel {
  height: 1px;
  width: 100%;
  margin-top: 3rem;
}
.column-page .lazy-loading {
  text-align: center;
  padding: 2rem 0 3rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ── Missing column state ── */
.column-page--missing .column-hero {
  min-height: 240px;
}
.column-page--missing .column-name {
  margin-top: 0;
}

/*
 * Author Details V1 - The Sunset Ink
 * Styles extracted verbatim from static/blog-author-profile.html and
 * scoped under .author-details so the .tab-btn / .chip / .article-list-item
 * selectors don't leak into other components (the topic page reuses
 * some of these class names with its own variants).
 */

.author-details {
  /* ── Author Hero Banner ── */
}
.author-details .author-hero {
  background: var(--ink);
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 5.5rem) clamp(1.25rem, 5vw, 4rem) 0;
}
.author-details .author-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.025) 0px,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 18px
    );
  pointer-events: none;
}
.author-details .author-hero::after {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 60%;
  background: radial-gradient(ellipse at center, rgba(192,57,43,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.author-details .author-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}

/* Breadcrumb */
.author-details .author-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.author-details .author-breadcrumb a {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.4);
  text-decoration: none;
  transition: color 0.2s;
}
.author-details .author-breadcrumb a:hover { color: rgba(245,240,232,0.8); }
.author-details .author-breadcrumb span {
  font-size: 0.68rem;
  color: rgba(245,240,232,0.2);
}
.author-details .author-breadcrumb .current {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Profile header row */
.author-details .profile-header {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2rem;
}
@media (max-width: 600px) {
  .author-details .profile-header { flex-direction: column; align-items: center; text-align: center; }
}
.author-details .profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 3px solid rgba(192,57,43,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 2.2rem;
  font-style: italic;
  color: var(--paper);
  flex-shrink: 0;
}
.author-details .profile-info { flex: 1; }
.author-details .profile-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(192,57,43,0.4);
  padding: 0.25rem 0.7rem;
  margin-bottom: 0.85rem;
}
.author-details .profile-name {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: var(--paper);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.author-details .profile-role {
  font-size: clamp(0.88rem, 1.8vw, 1rem);
  color: rgba(245,240,232,0.5);
  margin-bottom: 1.25rem;
}
.author-details .profile-bio {
  font-size: clamp(0.88rem, 1.6vw, 0.95rem);
  color: rgba(245,240,232,0.5);
  line-height: 1.75;
  max-width: 560px;
}

/* Stats + Social row */
.author-details .profile-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
  gap: 1.25rem;
}
.author-details .profile-stats {
  display: flex;
  gap: 2rem;
}
.author-details .p-stat { text-align: center; }
.author-details .p-stat-num {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--paper);
  line-height: 1;
}
.author-details .p-stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.3);
  margin-top: 0.2rem;
}

/* Social links */
.author-details .social-links {
  display: flex;
  gap: 0.5rem;
}
.author-details .social-link {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  color: rgba(245,240,232,0.55);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.author-details .social-link:hover { border-color: var(--accent); background: var(--accent); color: white; }

/* Tab bar - prominent, pill-style toggle */
.author-details .author-tab-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.5rem;
  padding: 0.3rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  position: relative;
  width: fit-content;
}
.author-details .tab-btn {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.7rem 1.5rem;
  transition: color 0.25s, background 0.25s;
  white-space: nowrap;
  position: relative;
}
.author-details .tab-btn:hover { color: rgba(245,240,232,0.85); background: rgba(255,255,255,0.04); }
.author-details .tab-btn.active {
  color: var(--paper);
  background: var(--accent);
  font-weight: 500;
}
.author-details .tab-count {
  font-size: 0.68rem;
  font-weight: 400;
  opacity: 0.6;
  margin-left: 0.35rem;
}
.author-details .tab-btn.active .tab-count { opacity: 0.85; }

/* ── CONTENT AREA ── */
.author-details .author-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem clamp(1.25rem, 5vw, 4rem);
}

/* ── Tab Panels ── */
.author-details .tab-panel { display: none; animation: authorDetailsFadeIn 0.35s ease both; }
.author-details .tab-panel.visible { display: block; }
@keyframes authorDetailsFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── ARTICLES PANEL ── */
.author-details .content-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  gap: 1rem;
}
.author-details .toolbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.author-details .toolbar-count {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.author-details .toolbar-count strong { color: var(--ink); }
.author-details .filter-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.author-details .chip {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.author-details .chip:hover { border-color: var(--ink); color: var(--ink); }
.author-details .chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.author-details .sort-select {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  appearance: none;
  padding-right: 1.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%238a7f74%27 stroke-width=%272.5%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  outline: none;
}
.author-details .sort-select:hover { border-color: var(--ink); }

/* Article list (linear - not grid, for author page) */
.author-details .article-list-item {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 2rem;
  align-items: center;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: padding-left 0.25s;
}
.author-details .article-list-item:first-of-type { border-top: 1px solid var(--rule); }
.author-details .article-list-item:hover { padding-left: 0.5rem; }
@media (max-width: 700px) {
  .author-details .article-list-item { grid-template-columns: 1fr; gap: 0.75rem; }
  .author-details .ali-image { display: none; }
}

.author-details .ali-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}
.author-details .ali-category {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.author-details .ali-dot {
  width: 3px; height: 3px;
  background: var(--rule);
  border-radius: 50%;
}
.author-details .ali-date,
.author-details .ali-read {
  font-size: 0.68rem;
  color: var(--muted);
}
.author-details .ali-title {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 0.5rem;
  transition: color 0.2s;
}
.author-details .article-list-item:hover .ali-title { color: var(--accent); }
.author-details .ali-excerpt {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.author-details .ali-image {
  aspect-ratio: 3/2;
  overflow: hidden;
  position: relative;
  background: var(--rule);
}
.author-details .ali-image-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.4s ease;
}
.author-details .article-list-item:hover .ali-image-inner { transform: scale(1.04); }
.author-details .ali-image-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 32px),
                    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 32px);
}
.author-details .ali-image-letter {
  font-family: var(--serif);
  font-size: 3.5rem;
  font-weight: 700;
  font-style: italic;
  color: rgba(255,255,255,0.08);
  user-select: none;
  position: relative;
}

/* Placeholder image patterns */
.author-details .img-pattern-1 { background: linear-gradient(135deg, #2c2420 0%, #1a1410 40%, #3d2b20 100%); }
.author-details .img-pattern-2 { background: linear-gradient(160deg, #1e2830 0%, #0d1a20 50%, #2a1e18 100%); }
.author-details .img-pattern-3 { background: linear-gradient(120deg, #1a1410 0%, #2e1f1a 50%, #1a1410 100%); }
.author-details .img-pattern-4 { background: linear-gradient(150deg, #1e1e2c 0%, #1a1410 60%, #2c1e14 100%); }
.author-details .img-pattern-5 { background: linear-gradient(130deg, #20201a 0%, #1a1814 100%); }

.author-details .ali-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.85rem;
}
.author-details .ali-tag {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 0.2rem 0.5rem;
}
.author-details .ali-save-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  margin-left: auto;
}
.author-details .ali-save-btn:hover { color: var(--ink); }
.author-details .ali-save-btn.saved { color: var(--accent); }

/* Load more */
.author-details .load-more-wrap {
  text-align: center;
  padding: 3rem 0 1rem;
}
.author-details .btn-load-more {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  padding: 0.75rem 2.5rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.author-details .btn-load-more:hover { background: var(--ink); color: var(--paper); }
.author-details .btn-load-more:disabled { opacity: 0.4; cursor: default; }
.author-details .btn-load-more:disabled:hover { background: transparent; color: var(--ink); }

/* ── COLUMNS PANEL ── */
.author-details .columns-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (max-width: 700px) { .author-details .columns-grid { grid-template-columns: 1fr; } }

.author-details .column-card {
  background: var(--ink);
  color: var(--paper);
  padding: 2rem 1.75rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.author-details .column-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(26,20,16,0.15); }
.author-details .column-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 22px);
  pointer-events: none;
}
.author-details .column-card::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(192,57,43,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.author-details .cc-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  position: relative;
}
.author-details .cc-label-dot {
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  animation: authorDetailsPulse 2.5s ease-in-out infinite;
}
@keyframes authorDetailsPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}
.author-details .cc-name {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 400;
  font-style: italic;
  color: var(--paper);
  line-height: 1.2;
  margin-bottom: 0.75rem;
  position: relative;
}
.author-details .cc-tagline {
  font-size: 0.84rem;
  color: rgba(245,240,232,0.5);
  line-height: 1.65;
  margin-bottom: 1.25rem;
  position: relative;
}
.author-details .cc-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.author-details .cc-stat {
  font-size: 0.68rem;
  color: rgba(245,240,232,0.35);
}
.author-details .cc-stat strong {
  color: var(--paper);
  font-weight: 500;
}

/* ── EXPERTISE PANEL (Article types) ── */
.author-details .expertise-section {
  padding: 3rem clamp(1.25rem, 5vw, 4rem);
  background: #fff;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.author-details .expertise-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.author-details .expertise-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.author-details .expertise-title {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 400;
  color: var(--ink);
}
.author-details .expertise-title em { font-style: italic; color: var(--accent); }
.author-details .expertise-sub {
  font-size: 0.78rem;
  color: var(--muted);
}
/* Fixed 4-column grid. We deliberately draw rules via per-cell borders
   rather than via a coloured container background + gap, so unoccupied
   tracks (fewer expertise topics than 4) stay page-coloured instead
   of bleeding the rule colour across the empty space. */
.author-details .expertise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) { .author-details .expertise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .author-details .expertise-grid { grid-template-columns: 1fr 1fr; } }
.author-details .expertise-cell {
  background: #fff;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: background 0.2s;
  cursor: default;
  border: 1px solid var(--rule);
  /* The grid uses no gap, so adjacent cells would double-border.
     Collapse by hiding the left border on every cell except the first
     in each row. */
  border-left: none;
  border-top: none;
}
.author-details .expertise-cell:first-child,
.author-details .expertise-cell:nth-child(4n + 1) {
  border-left: 1px solid var(--rule);
}
.author-details .expertise-cell:nth-child(-n + 4) {
  border-top: 1px solid var(--rule);
}
@media (max-width: 900px) {
  .author-details .expertise-cell {
    border-left: none;
    border-top: none;
  }
  .author-details .expertise-cell:nth-child(2n + 1) { border-left: 1px solid var(--rule); }
  .author-details .expertise-cell:nth-child(-n + 2) { border-top: 1px solid var(--rule); }
}
.author-details .expertise-cell:hover { background: var(--paper); }
.author-details .ec-count {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.author-details .ec-count span { color: var(--accent); font-size: 0.7em; }
.author-details .ec-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.author-details .ec-bar {
  height: 3px;
  background: var(--rule);
  margin-top: 0.35rem;
  border-radius: 2px;
  overflow: hidden;
}
.author-details .ec-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.6s ease;
}

/* ── PERSONAL NOTE ── */
.author-details .personal-note {
  background: var(--ink);
  color: var(--paper);
  padding: 3.5rem clamp(1.25rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}
.author-details .personal-note::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 22px);
  pointer-events: none;
}
.author-details .personal-note::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 50%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(192,57,43,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.author-details .note-inner {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}
.author-details .note-quote-mark {
  font-family: var(--serif);
  font-size: 5rem;
  font-weight: 700;
  color: rgba(192,57,43,0.3);
  line-height: 0.5;
  margin-bottom: 1rem;
  user-select: none;
}
.author-details .note-label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.author-details .note-text {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.8vw, 1.6rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(245,240,232,0.8);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}
.author-details .note-author {
  font-size: 0.82rem;
  color: rgba(245,240,232,0.4);
}
.author-details .note-author strong {
  color: var(--paper);
  font-weight: 500;
}

/* ── Lazy-load sentinel + loading state ──
   Sentinel is a zero-content 1px tall element the IntersectionObserver
   watches. Sits silently below the article list until it scrolls into
   the viewport - at which point author-details.js fires the next fetch. */
.author-details .lazy-sentinel {
  height: 1px;
  width: 100%;
  margin-top: 3rem;
}
.author-details .lazy-loading {
  text-align: center;
  padding: 2rem 0 3rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ── Empty + missing state ── */
.author-details .author-empty {
  padding: 3rem 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
}
.author-details--missing .author-hero { min-height: 240px; }
.author-details--missing .profile-name { margin-top: 0; }

/*
 * Topic Page V1 - The Sunset Ink
 * Styles extracted verbatim from static/blog-topic-page.html and scoped
 * under .topic-page so the .tab-btn / .chip / .article-card / .sidebar
 * selectors don't leak into other components.
 */

/* ── Topic Hero Banner ── */
.topic-page .topic-hero {
  background: var(--ink);
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 5.5rem) clamp(1.25rem, 5vw, 4rem) 0;
}
.topic-page .topic-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 18px);
  pointer-events: none;
}
.topic-page .topic-hero::after {
  content: '';
  position: absolute;
  top: -30%;
  right: 5%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(192,57,43,0.14) 0%, transparent 70%);
  pointer-events: none;
}
.topic-page .topic-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

/* Breadcrumb */
.topic-page .topic-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.topic-page .topic-breadcrumb a {
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,240,232,0.4); text-decoration: none; transition: color 0.2s;
}
.topic-page .topic-breadcrumb a:hover { color: rgba(245,240,232,0.8); }
.topic-page .topic-breadcrumb span { font-size: 0.68rem; color: rgba(245,240,232,0.2); }
.topic-page .topic-breadcrumb .current {
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}

/* Topic label pill */
.topic-page .topic-label {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgba(192,57,43,0.4);
  padding: 0.3rem 0.75rem; margin-bottom: 1rem;
}
.topic-page .topic-label-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* Topic title & description */
.topic-page .topic-name {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--paper);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.topic-page .topic-description {
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  color: rgba(245,240,232,0.55);
  line-height: 1.7;
  max-width: 640px;
  margin-bottom: 2rem;
}

/* Stats row */
.topic-page .topic-stats {
  display: flex;
  gap: 2.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.topic-page .ts-num {
  font-family: var(--serif);
  font-size: 1.5rem; font-weight: 700; color: var(--paper); line-height: 1;
}
.topic-page .ts-label {
  font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(245,240,232,0.3); margin-top: 0.2rem;
}

/* Contributors strip */
.topic-page .topic-contributors {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0;
  padding-bottom: 2rem;
}
.topic-page .contributor-avatars {
  display: flex;
  margin-right: 0.25rem;
}
.topic-page .contributor-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 0.7rem; font-weight: 700;
  color: var(--paper); margin-left: -8px;
  position: relative;
}
.topic-page .contributor-avatar:first-child { margin-left: 0; }
.topic-page .contributor-text {
  font-size: 0.78rem;
  color: rgba(245,240,232,0.45);
}
.topic-page .contributor-text a {
  color: rgba(245,240,232,0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.topic-page .contributor-text a:hover { color: var(--paper); }

/* ── CONTENT AREA ── */
.topic-page .topic-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem clamp(1.25rem, 5vw, 4rem);
}

/* Tab content transition */
.topic-page .tab-panel { animation: topicPageFadeIn 0.35s ease both; }
@keyframes topicPageFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Content layout: main + sidebar. When the topic has no columns the HTL
   omits the <aside> entirely; in that case the main column expands to
   fill the row instead of leaving a 300px gap. :has() lets the layout
   self-collapse without a HTL-driven modifier class. */
.topic-page .content-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.topic-page .content-layout:not(:has(.sidebar)) {
  grid-template-columns: 1fr;
}
@media (max-width: 960px) { .topic-page .content-layout { grid-template-columns: 1fr; } }

/* Toolbar */
.topic-page .content-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2.5rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule); flex-wrap: wrap; gap: 1rem;
}
.topic-page .toolbar-left { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.topic-page .toolbar-count {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.topic-page .toolbar-count strong { color: var(--ink); }
.topic-page .filter-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.topic-page .chip {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 0.75rem; border: 1px solid var(--rule); background: transparent;
  color: var(--muted); cursor: pointer; transition: all 0.15s;
}
.topic-page .chip:hover { border-color: var(--ink); color: var(--ink); }
.topic-page .chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.topic-page .sort-select {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  background: transparent; border: 1px solid var(--rule); padding: 0.35rem 0.8rem;
  cursor: pointer; appearance: none; padding-right: 1.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%238a7f74%27 stroke-width=%272.5%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.5rem center; outline: none;
}
.topic-page .sort-select:hover { border-color: var(--ink); }

/* Article grid */
.topic-page .article-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (max-width: 700px) { .topic-page .article-grid { grid-template-columns: 1fr; } }

.topic-page .article-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule);
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.topic-page .article-card:hover {
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--rule);
}

/* Editor's Pick badge */
.topic-page .card-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: white;
  background: var(--accent);
  padding: 0.25rem 0.65rem;
}

.topic-page .card-image {
  aspect-ratio: 16/9; overflow: hidden; position: relative; background: var(--rule);
}
.topic-page .card-image-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: transform 0.4s ease;
}
.topic-page .article-card:hover .card-image-inner { transform: scale(1.03); }
.topic-page .card-image-inner::after {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 32px),
                    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 32px);
}
.topic-page .card-image-number {
  font-family: var(--serif); font-size: clamp(4rem, 10vw, 7rem);
  font-weight: 700; font-style: italic;
  color: rgba(255,255,255,0.07); line-height: 1; user-select: none; position: relative;
}
.topic-page .img-pattern-1 { background: linear-gradient(135deg, #2c2420 0%, #1a1410 40%, #3d2b20 100%); }
.topic-page .img-pattern-2 { background: linear-gradient(160deg, #1e2830 0%, #0d1a20 50%, #2a1e18 100%); }
.topic-page .img-pattern-3 { background: linear-gradient(120deg, #1a1410 0%, #2e1f1a 50%, #1a1410 100%); }
.topic-page .img-pattern-4 { background: linear-gradient(150deg, #1e1e2c 0%, #1a1410 60%, #2c1e14 100%); }
.topic-page .img-pattern-5 { background: linear-gradient(130deg, #20201a 0%, #1a1814 100%); }
.topic-page .img-pattern-6 { background: linear-gradient(145deg, #2a1e28 0%, #1a1410 100%); }

.topic-page .card-body {
  padding: 1.4rem; display: flex; flex-direction: column; flex: 1;
}
.topic-page .card-meta {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; flex-wrap: wrap;
}
.topic-page .card-category {
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}
.topic-page .card-dot { width: 3px; height: 3px; background: var(--rule); border-radius: 50%; }
.topic-page .card-date,
.topic-page .card-read-time,
.topic-page .card-author { font-size: 0.68rem; color: var(--muted); }
.topic-page .card-author a { color: var(--ink); text-decoration: none; font-weight: 500; transition: color 0.2s; }
.topic-page .card-author a:hover { color: var(--accent); }
.topic-page .card-title {
  font-family: var(--serif); font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: 400; line-height: 1.35; color: var(--ink);
  margin-bottom: 0.75rem; transition: color 0.2s;
}
.topic-page .article-card:hover .card-title { color: var(--accent); }
.topic-page .card-excerpt {
  font-size: 0.84rem; color: var(--muted); line-height: 1.7; flex: 1; margin-bottom: 1.25rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.topic-page .card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1rem; border-top: 1px solid var(--rule);
}
.topic-page .card-read-link {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; display: inline-flex; align-items: center;
  gap: 0.4rem; transition: color 0.2s, gap 0.2s;
}
.topic-page .card-read-link:hover { color: var(--accent); gap: 0.65rem; }
.topic-page .card-save-btn {
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 4px; display: flex; align-items: center; justify-content: center;
  transition: color 0.2s;
}
.topic-page .card-save-btn:hover { color: var(--ink); }
.topic-page .card-save-btn.saved { color: var(--accent); }

/* Load more */
.topic-page .load-more-wrap {
  text-align: center; padding: 3rem 0 1rem;
  border-top: 1px solid var(--rule); margin-top: 3rem;
}
.topic-page .btn-load-more {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  background: transparent; border: 1.5px solid var(--ink);
  padding: 0.75rem 2.5rem; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.topic-page .btn-load-more:hover { background: var(--ink); color: var(--paper); }
.topic-page .btn-load-more:disabled { opacity: 0.4; cursor: default; }
.topic-page .btn-load-more:disabled:hover { background: transparent; color: var(--ink); }

/* ── SIDEBAR ── */
.topic-page .sidebar { position: sticky; top: 140px; }

.topic-page .sidebar-block { margin-bottom: 2.5rem; }
.topic-page .sidebar-block-head {
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); font-weight: 500; margin-bottom: 0.85rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule);
}

/* ── SIDEBAR COLUMN CARDS (dark, vertical stack) ── */
.topic-page .sidebar-columns {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.topic-page .sc-card {
  background: var(--ink);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.topic-page .sc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,20,16,0.18);
}
.topic-page .sc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 18px);
  pointer-events: none;
}
.topic-page .sc-card::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 60%;
  height: 90%;
  background: radial-gradient(ellipse at center, rgba(192,57,43,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.topic-page .sc-card-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.65rem;
  position: relative;
}
.topic-page .sc-card-dot {
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  animation: topicPageScPulse 2.5s ease-in-out infinite;
}
@keyframes topicPageScPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}
.topic-page .sc-card-name {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--paper);
  line-height: 1.2;
  margin-bottom: 0.5rem;
  position: relative;
}
.topic-page .sc-card-tagline {
  font-size: 0.78rem;
  color: rgba(245,240,232,0.42);
  line-height: 1.6;
  margin-bottom: 1rem;
  position: relative;
}
.topic-page .sc-card-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.topic-page .sc-card-stat {
  font-size: 0.65rem;
  color: rgba(245,240,232,0.3);
}
.topic-page .sc-card-stat strong {
  color: var(--paper);
  font-weight: 500;
}
.topic-page .sc-card-author {
  font-size: 0.65rem;
  color: rgba(245,240,232,0.3);
  margin-top: 0.35rem;
  position: relative;
}
.topic-page .sc-card-author a {
  color: rgba(245,240,232,0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.topic-page .sc-card-author a:hover { color: var(--paper); }

/* ── EXPLORE OTHER TOPICS (bottom section) ── */
.topic-page .explore-topics-section {
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem);
  border-top: 1px solid var(--rule);
  background: #fff;
}
.topic-page .explore-topics-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.topic-page .explore-topics-header {
  margin-bottom: 2rem;
}
.topic-page .explore-label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.6rem;
}
.topic-page .explore-title {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 400;
  color: var(--ink);
}
.topic-page .explore-title em {
  font-style: italic;
  color: var(--accent);
}
/* Same rationale as .expertise-grid on the author page - draw rules via
   per-cell borders so unoccupied tracks (fewer "other topics" than the
   grid can hold) stay page-coloured rather than bleeding the rule colour. */
.topic-page .explore-topics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) { .topic-page .explore-topics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .topic-page .explore-topics-grid { grid-template-columns: 1fr; } }
.topic-page .explore-topic-card {
  background: #fff;
  padding: 1.4rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: background 0.2s, padding-left 0.25s;
  cursor: pointer;
  border: 1px solid var(--rule);
  border-left: none;
  border-top: none;
}
.topic-page .explore-topic-card:first-child,
.topic-page .explore-topic-card:nth-child(4n + 1) {
  border-left: 1px solid var(--rule);
}
.topic-page .explore-topic-card:nth-child(-n + 4) {
  border-top: 1px solid var(--rule);
}
@media (max-width: 900px) {
  .topic-page .explore-topic-card {
    border-left: none;
    border-top: none;
  }
  .topic-page .explore-topic-card:nth-child(2n + 1) { border-left: 1px solid var(--rule); }
  .topic-page .explore-topic-card:nth-child(-n + 2) { border-top: 1px solid var(--rule); }
}
@media (max-width: 480px) {
  .topic-page .explore-topic-card {
    border-left: 1px solid var(--rule);
    border-top: none;
  }
  .topic-page .explore-topic-card:first-child { border-top: 1px solid var(--rule); }
}
.topic-page .explore-topic-card:hover {
  background: var(--paper);
  padding-left: 1.5rem;
}
.topic-page .etc-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink);
  flex: 1;
  transition: color 0.2s;
}
.topic-page .explore-topic-card:hover .etc-name { color: var(--accent); }
.topic-page .etc-count {
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.topic-page .etc-arrow {
  font-size: 0.85rem;
  color: var(--rule);
  transition: color 0.2s, transform 0.2s;
}
.topic-page .explore-topic-card:hover .etc-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

/* ── Lazy-load sentinel + loading state ── */
.topic-page .lazy-sentinel {
  height: 1px;
  width: 100%;
  margin-top: 3rem;
}
.topic-page .lazy-loading {
  text-align: center;
  padding: 2rem 0 3rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ── Empty + missing state ── */
.topic-page .topic-empty {
  padding: 3rem 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
}
.topic-page .topic-empty-cta {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.topic-page .topic-empty-cta a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.topic-page .topic-empty-cta a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.topic-page--missing .topic-hero { min-height: 240px; }
.topic-page--missing .topic-name { margin-top: 0; }

/* The contributor-avatar inherits <a> styling once it carries an href - keep
   the placeholder text-colour stable so the avatar still reads as a glyph. */
.topic-page a.contributor-avatar { text-decoration: none; color: var(--paper); }

/* ════════════════════════════════════════
   The Sunset Ink - Authentication / Users V1
   Reader-side auth flow (login, register, OTP, forgot, reset, success).
   All selectors scoped under .users-auth. Tokens come from src/styles/main.css;
   the global `h1 em / h2 em / h3 em` rule there already handles italic+accent
   on key words, so we don't restate it locally.
════════════════════════════════════════ */

.users-auth {
  display: flex;
  width: 100%;
  font-family: var(--sans);
  color: var(--ink);
  min-height: calc(100vh - 220px);
}

.users-auth .auth-wrap {
  display: flex;
  width: 100%;
  min-height: inherit;
}

/* ── Left panel (editorial / brand) ── */
.users-auth .panel-left {
  flex: 1;
  background: var(--ink);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2rem, 5vw, 4rem);
  min-height: 320px;
}
.users-auth .panel-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 70% 60% at 80% 20%, rgba(192, 57, 43, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 70% at 10% 90%, rgba(192, 57, 43, 0.10) 0%, transparent 55%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 64px);
}
.users-auth .panel-content { position: relative; z-index: 1; }
.users-auth .panel-quote {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 400;
  font-style: italic;
  color: var(--paper);
  line-height: 1.25;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}
.users-auth .panel-quote strong {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}
.users-auth .panel-attr {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.4);
  margin-bottom: 3rem;
}
.users-auth .panel-features { display: flex; flex-direction: column; gap: 0.85rem; }
.users-auth .feat { display: flex; align-items: center; gap: 0.85rem; }
.users-auth .feat-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.users-auth .feat-text {
  font-size: 0.8rem;
  color: rgba(245, 240, 232, 0.55);
  line-height: 1.4;
}

/* ── Right panel (form column) ── */
.users-auth .panel-right {
  width: min(480px, 100%);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3rem);
  border-left: 1px solid var(--rule);
  position: relative;
  overflow-y: auto;
}

@media (max-width: 860px) {
  .users-auth .auth-wrap { flex-direction: column; }
  .users-auth .panel-left { min-height: 200px; justify-content: flex-end; }
  .users-auth .panel-features { display: none; }
  .users-auth .panel-right { width: 100%; border-left: none; border-top: 1px solid var(--rule); }
}

/* ── Screen transition ── */
.users-auth .screen { animation: users-auth-slide 0.3s ease both; }
@keyframes users-auth-slide {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Headings / typography ── */
.users-auth .eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.users-auth .f-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}
/* .f-title em handled by global "h2 em" rule in main.css */

.users-auth .f-sub {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 1.75rem;
}

/* ── Error banner (form-level) ── */
.users-auth .err-banner {
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.25);
  padding: 0.7rem 1rem;
  font-size: 0.8rem;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

/* ── Divider ("or sign in with email") ── */
.users-auth .divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.35rem 0;
}
.users-auth .div-line { flex: 1; height: 1px; background: var(--rule); }
.users-auth .div-text {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b0a699;
  white-space: nowrap;
}

/* ── Social buttons (Google) ── */
.users-auth .social-btns {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.25rem;
}
.users-auth .social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.72rem 1rem;
  border: 1.5px solid var(--rule);
  background: #fff;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  width: 100%;
}
.users-auth .social-btn:hover {
  border-color: var(--ink);
  background: var(--paper);
  box-shadow: 0 2px 8px rgba(26, 20, 16, 0.06);
}

/* ── Form layout / fields ── */
.users-auth .form-body { display: flex; flex-direction: column; gap: 1rem; }
.users-auth .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
@media (max-width: 400px) { .users-auth .row2 { grid-template-columns: 1fr; } }

.users-auth .field { display: flex; flex-direction: column; gap: 0.35rem; }
.users-auth .f-label {
  font-size: 0.65rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5a4a3a;
  font-weight: 500;
}
.users-auth .f-wrap { position: relative; }
.users-auth .f-input {
  width: 100%;
  border: 1.5px solid var(--rule);
  background: #fff;
  font-family: var(--sans);
  font-size: 0.88rem;
  padding: 0.68rem 0.9rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.users-auth .f-input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26, 20, 16, 0.06);
}
.users-auth .f-input.has-err { border-color: var(--accent); }
.users-auth .f-input.has-err:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.10); }
.users-auth .f-input::placeholder { color: #b8b0a8; }
.users-auth .f-input.pr { padding-right: 2.5rem; }
.users-auth .f-err  { font-size: 0.72rem; color: var(--accent); margin-top: 0.1rem; }
.users-auth .f-hint { font-size: 0.72rem; color: var(--muted);  margin-top: 0.1rem; }

/* ── Password show/hide toggle ── */
.users-auth .pw-tog {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 2px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.users-auth .pw-tog:hover { color: var(--ink); }

/* ── Password strength meter ── */
.users-auth .pw-str { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; }
.users-auth .pw-bars { display: flex; gap: 3px; }
.users-auth .pw-bar { flex: 1; height: 3px; background: var(--rule); border-radius: 2px; transition: background 0.3s; }
.users-auth .pw-bar.weak   { background: #c0392b; }
.users-auth .pw-bar.fair   { background: #e67e22; }
.users-auth .pw-bar.good   { background: #f1c40f; }
.users-auth .pw-bar.strong { background: #27ae60; }
.users-auth .pw-str-lbl { font-size: 0.68rem; color: var(--muted); }

/* ── Forgot-password link ── */
.users-auth .forgot-lnk {
  font-size: 0.75rem;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sans);
  align-self: flex-end;
  margin-top: -0.25rem;
  transition: color 0.15s;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.users-auth .forgot-lnk:hover { color: var(--accent); }

/* ── Primary submit button ── */
.users-auth .btn-p {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: none;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s;
  margin-top: 0.25rem;
  position: relative;
  overflow: hidden;
}
.users-auth .btn-p:hover { background: var(--accent); }
.users-auth .btn-p:disabled { background: #b0a699; cursor: not-allowed; }
.users-auth .btn-p .btext { display: block; }
.users-auth .btn-p .bspin {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: inherit;
}
.users-auth .btn-p.loading .btext { opacity: 0; }
.users-auth .btn-p.loading .bspin { display: flex; }
.users-auth .spin-svg { animation: users-auth-spin 0.7s linear infinite; }
@keyframes users-auth-spin { to { transform: rotate(360deg); } }

/* ── Switch row ("New here? Create an account") ── */
.users-auth .switch-row {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.users-auth .switch-lnk {
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: inherit;
}
.users-auth .switch-lnk:hover { color: var(--accent); }

/* ── Age-gate checkbox (COMP-110) ── */
.users-auth .age-gate { margin-top: 0.25rem; }
.users-auth .age-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.4;
}
.users-auth .age-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}
.users-auth .age-gate.has-err .age-check { color: var(--accent); }
.users-auth .age-gate .f-err { display: block; margin-top: 0.3rem; margin-left: 1.7rem; }

/* ── Terms-of-service line ── */
.users-auth .terms {
  font-size: 0.7rem;
  color: #b0a699;
  line-height: 1.5;
  text-align: center;
  margin-top: 0.75rem;
}
.users-auth .terms a { color: var(--muted); }

/* ── Back button (top-left of OTP / forgot screens) ── */
.users-auth .back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  padding: 0;
  margin-bottom: 1.5rem;
  transition: color 0.15s;
}
.users-auth .back-btn:hover { color: var(--ink); }

/* ── OTP entry ── */
.users-auth .otp-wrap {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin: 0.5rem 0;
}
.users-auth .otp-cell {
  width: 48px;
  height: 56px;
  text-align: center;
  border: 1.5px solid var(--rule);
  background: #fff;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  caret-color: transparent;
}
.users-auth .otp-cell:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26, 20, 16, 0.06);
}
.users-auth .otp-cell.filled { border-color: var(--ink); background: var(--paper); }
.users-auth .otp-cell.oerr   { border-color: var(--accent); }
@media (max-width: 400px) {
  .users-auth .otp-cell { width: 40px; height: 48px; font-size: 1.2rem; }
}
.users-auth .otp-timer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.75rem;
}
.users-auth .otp-resend {
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: inherit;
}
.users-auth .otp-resend:hover { color: var(--accent); }
.users-auth .email-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(192, 57, 43, 0.07);
  border: 1px solid rgba(192, 57, 43, 0.2);
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.users-auth .email-badge svg { color: var(--accent); flex-shrink: 0; }

/* ── Success screen ── */
.users-auth .success-wrap { text-align: center; padding: 2rem 0; }
.users-auth .success-icon {
  width: 64px;
  height: 64px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  animation: users-auth-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes users-auth-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.users-auth .success-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.users-auth .success-desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 300px;
  margin: 0 auto 1.75rem;
}
.users-auth .btn-center { max-width: 220px; margin: 0 auto; }

/* ════════════════════════════════════════
   The Sunset Ink - Authentication / Authors V1
   Closed-portal auth flow (login, magic link, forgot/reset, invite-code
   activation, dashboard). All selectors scoped under .authors-auth. Tokens
   come from src/styles/main.css; the global `h1 em / h2 em / h3 em` rule
   there already handles italic+accent on key words.
════════════════════════════════════════ */

.authors-auth {
  display: flex;
  width: 100%;
  font-family: var(--sans);
  color: var(--ink);
  min-height: calc(100vh - 220px);
}

.authors-auth .auth-wrap {
  display: flex;
  width: 100%;
  min-height: inherit;
  align-items: stretch;
}

/* ── Left panel (editorial / portal pitch) ── */
.authors-auth .panel-left {
  flex: 1;
  background: var(--ink);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2.5rem, 6vw, 5rem);
  min-height: 340px;
}
.authors-auth .panel-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 65% 55% at 85% 20%, rgba(192, 57, 43, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 10% 85%, rgba(192, 57, 43, 0.10) 0%, transparent 55%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 64px);
}
.authors-auth .panel-content { position: relative; z-index: 1; }
.authors-auth .panel-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.9rem;
}
.authors-auth .panel-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--paper);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
/* .panel-title em handled by global "h1 em" rule in main.css */

.authors-auth .panel-desc {
  font-size: clamp(0.85rem, 1.5vw, 0.98rem);
  color: rgba(245, 240, 232, 0.6);
  line-height: 1.7;
  max-width: 440px;
  margin-bottom: 2.5rem;
}
.authors-auth .panel-features { display: flex; flex-direction: column; gap: 0.8rem; }
.authors-auth .pf { display: flex; align-items: center; gap: 0.8rem; }
.authors-auth .pf-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.authors-auth .pf-text {
  font-size: 0.8rem;
  color: rgba(245, 240, 232, 0.5);
}

/* ── Right panel (form column) ── */
.authors-auth .panel-right {
  width: min(500px, 100%);
  background: var(--paper);
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.25rem);
  overflow-y: auto;
}

@media (max-width: 860px) {
  .authors-auth .auth-wrap { flex-direction: column; }
  .authors-auth .panel-left { min-height: 220px; justify-content: flex-end; }
  .authors-auth .panel-features,
  .authors-auth .panel-desc { display: none; }
  .authors-auth .panel-right { width: 100%; border-left: none; border-top: 1px solid var(--rule); }
}

/* ── Screen transition ── */
.authors-auth .screen { animation: authors-auth-fadeup 0.3s ease both; }
@keyframes authors-auth-fadeup {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Headings / typography ── */
.authors-auth .eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.authors-auth .f-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}
.authors-auth .f-sub {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

/* ── Status badges (locked / valid / expired) ── */
.authors-auth .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}
.authors-auth .badge-locked  { background: rgba(192, 57, 43, 0.08); border: 1px solid rgba(192, 57, 43, 0.20); color: var(--accent); }
.authors-auth .badge-valid   { background: rgba(39, 174, 96, 0.08); border: 1px solid rgba(39, 174, 96, 0.30); color: #1e7e34; }
.authors-auth .badge-expired { background: rgba(26, 20, 16, 0.06); border: 1px solid var(--rule);            color: var(--muted); }

/* ── Form layout / fields ── */
.authors-auth .form-body { display: flex; flex-direction: column; gap: 0.95rem; }
.authors-auth .field { display: flex; flex-direction: column; gap: 0.35rem; }
.authors-auth .f-label {
  font-size: 0.63rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5a4a3a;
  font-weight: 500;
}
.authors-auth .f-wrap { position: relative; }
.authors-auth .f-input {
  width: 100%;
  border: 1.5px solid var(--rule);
  background: #fff;
  font-family: var(--sans);
  font-size: 0.88rem;
  padding: 0.68rem 0.9rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.authors-auth .f-input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26, 20, 16, 0.05);
}
.authors-auth .f-input.err     { border-color: var(--accent); }
.authors-auth .f-input.success { border-color: #27ae60; }
.authors-auth .f-input::placeholder { color: #b8b0a8; }
.authors-auth .f-input.pr { padding-right: 2.5rem; }
.authors-auth .f-input.token-input {
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.authors-auth .f-err  { font-size: 0.7rem; color: var(--accent); margin-top: 0.1rem; }
.authors-auth .f-hint { font-size: 0.7rem; color: var(--muted);  line-height: 1.5; margin-top: 0.1rem; }

/* ── Password show/hide toggle ── */
.authors-auth .pw-tog {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 2px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.authors-auth .pw-tog:hover { color: var(--ink); }

/* ── Password strength meter ── */
.authors-auth .pw-str { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; }
.authors-auth .pw-bars { display: flex; gap: 3px; }
.authors-auth .pw-bar { flex: 1; height: 3px; background: var(--rule); border-radius: 2px; transition: background 0.3s; }
.authors-auth .pw-bar.weak   { background: var(--accent); }
.authors-auth .pw-bar.fair   { background: #e67e22; }
.authors-auth .pw-bar.good   { background: #f1c40f; }
.authors-auth .pw-bar.strong { background: #27ae60; }
.authors-auth .pw-str-lbl { font-size: 0.68rem; color: var(--muted); }

/* ── Divider ("or") ── */
.authors-auth .divider {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.3rem 0;
}
.authors-auth .div-line { flex: 1; height: 1px; background: var(--rule); }
.authors-auth .div-text {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b0a699;
  white-space: nowrap;
}

/* ── Primary button (filled, ink → accent on hover) ── */
.authors-auth .btn-p {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: none;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s;
  margin-top: 0.25rem;
  position: relative;
  overflow: hidden;
}
.authors-auth .btn-p:hover { background: var(--accent); }
.authors-auth .btn-p:disabled { background: #b0a699; cursor: not-allowed; }
.authors-auth .btn-p .bt { display: block; }
.authors-auth .btn-p .bs {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: inherit;
}
.authors-auth .btn-p.loading .bt { opacity: 0; }
.authors-auth .btn-p.loading .bs { display: flex; }
.authors-auth .spin-i { animation: authors-auth-spin 0.7s linear infinite; }
@keyframes authors-auth-spin { to { transform: rotate(360deg); } }

/* Buttons that stack icon + label */
.authors-auth .btn-p.btn-icon,
.authors-auth .btn-g.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

/* ── Ghost button (outlined, used for secondary actions) ── */
.authors-auth .btn-g {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--rule);
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.2s, background 0.2s;
  margin-top: 0.5rem;
}
.authors-auth .btn-g:hover { border-color: var(--ink); background: rgba(26, 20, 16, 0.03); }

/* ── Switch row ("Have an invite code?") ── */
.authors-auth .switch-row {
  text-align: center;
  margin-top: 1.2rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.authors-auth .switch-lnk {
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: inherit;
}
.authors-auth .switch-lnk:hover { color: var(--accent); }
.authors-auth .switch-lnk.muted { font-size: 0.75rem; color: var(--muted); }

/* ── Back button ── */
.authors-auth .back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  padding: 0;
  margin-bottom: 1.5rem;
  transition: color 0.15s;
}
.authors-auth .back-btn:hover { color: var(--ink); }

/* ── Invite-info callout (token entry screen) ── */
.authors-auth .invite-info {
  background: rgba(192, 57, 43, 0.05);
  border: 1px solid rgba(192, 57, 43, 0.15);
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
.authors-auth .invite-info-icon { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.authors-auth .invite-info-text { font-size: 0.8rem; color: #4a3a2a; line-height: 1.6; }
.authors-auth .invite-info-text strong { color: var(--ink); font-weight: 500; }
.authors-auth .invite-info-text a { color: var(--accent); }

/* ── Steps indicator (1 → 2 → 3) ── */
.authors-auth .steps-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 2rem;
}
.authors-auth .step-pip { display: flex; align-items: center; }
.authors-auth .step-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 500;
  flex-shrink: 0;
  transition: all 0.2s;
}
.authors-auth .step-circle.done   { background: var(--ink);    color: var(--paper); }
.authors-auth .step-circle.active { background: var(--accent); color: var(--paper); }
.authors-auth .step-circle.todo   { background: transparent;   border: 1.5px solid var(--rule); color: var(--muted); }
.authors-auth .step-line { flex: 1; height: 1px; background: var(--rule); min-width: 24px; }
.authors-auth .step-line.done { background: var(--ink); }

/* ── Success / meta block ── */
.authors-auth .success-wrap { text-align: center; padding: 1rem 0; }
.authors-auth .success-icon {
  width: 64px;
  height: 64px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  animation: authors-auth-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes authors-auth-pop {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.authors-auth .success-title {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.authors-auth .success-desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 340px;
  margin: 0 auto 2rem;
}
.authors-auth .success-meta {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 1rem 1.1rem;
  text-align: left;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.authors-auth .sm-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
.authors-auth .sm-l { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.authors-auth .sm-v { font-size: 0.82rem; color: var(--ink); font-weight: 500; }

/* ── Dashboard "sign out" footer link ── */
.authors-auth .dash-signout {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  text-align: center;
}

/* ── Dashboard action group ── */
.authors-auth .dash-actions { display: flex; flex-direction: column; gap: 0.65rem; }

/* ── Error banner (form-level) ── */
.authors-auth .err-banner {
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.25);
  padding: 0.7rem 1rem;
  font-size: 0.8rem;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

/* ── OTP entry ── */
.authors-auth .otp-wrap {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin: 0.5rem 0;
}
.authors-auth .otp-cell {
  width: 48px;
  height: 56px;
  text-align: center;
  border: 1.5px solid var(--rule);
  background: #fff;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  caret-color: transparent;
  padding: 0;
}
.authors-auth .otp-cell:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26, 20, 16, 0.06);
}
.authors-auth .otp-cell.filled { border-color: var(--ink); background: var(--paper); }
.authors-auth .otp-cell.oerr   { border-color: var(--accent); }
@media (max-width: 400px) {
  .authors-auth .otp-cell { width: 40px; height: 48px; font-size: 1.2rem; }
}
.authors-auth .otp-timer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.75rem;
}
.authors-auth .otp-resend {
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: inherit;
}
.authors-auth .otp-resend:hover { color: var(--accent); }

/* ── Email badge (shown on OTP / reset-sent screens) ── */
.authors-auth .email-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(192, 57, 43, 0.07);
  border: 1px solid rgba(192, 57, 43, 0.2);
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.authors-auth .email-badge svg { color: var(--accent); flex-shrink: 0; }

/* ════════════════════════════════════════
   The Sunset Ink - Authentication / Admin V1
   Admin back-office auth flow (login, OTP, forgot, reset, success).
   All selectors scoped under .admin-auth. Tokens come from src/styles/main.css;
   the global `h1 em / h2 em / h3 em` rule there already handles italic+accent
   on key words, so we don't restate it locally.

   Layout is intentionally NOT the two-panel marketing chrome used by users-
   auth and authors-auth - admin is a single centred card on paper, sober and
   focused, matching static/blog-admin-login.html.
════════════════════════════════════════ */

.admin-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 4rem) 1rem;
  min-height: calc(100vh - 220px);
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
}

.admin-auth .card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border: 1px solid var(--rule);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  position: relative;
}

/* Tiny "Admin" tag stacked above the title - keeps this surface visually
 * distinct from the reader / author auth screens at a glance. */
.admin-auth .admin-tag {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* ── Boot state ──
 * Brief "Checking session…" placeholder shown while /me runs. Centred and
 * muted so a logged-in admin's bounce-to-dashboard feels intentional
 * rather than like a content flash. */
.admin-auth .boot {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  padding: 1.5rem 0;
}

/* ── Screen transition ── */
.admin-auth .screen { animation: admin-auth-slide 0.25s ease both; }
@keyframes admin-auth-slide {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Headings / typography ── */
.admin-auth .f-title {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.8vw, 1.85rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}
/* .f-title em handled by global "h2 em" rule in main.css */

.admin-auth .f-sub {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

/* ── Error / info banners ── */
.admin-auth .err-banner,
.admin-auth .info-banner {
  padding: 0.7rem 0.9rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.admin-auth .err-banner {
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.25);
  color: var(--accent);
}
.admin-auth .info-banner {
  background: rgba(46, 125, 87, 0.06);
  border: 1px solid rgba(46, 125, 87, 0.25);
  color: #2e7d57;
}

/* ── Form fields ── */
.admin-auth .form-body { display: flex; flex-direction: column; gap: 1rem; }
.admin-auth .field { display: flex; flex-direction: column; gap: 0.35rem; }
.admin-auth .f-label {
  font-size: 0.65rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5a4a3a;
  font-weight: 500;
}
.admin-auth .f-wrap { position: relative; }
.admin-auth .f-input {
  width: 100%;
  border: 1.5px solid var(--rule);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 0.88rem;
  padding: 0.7rem 0.9rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-auth .f-input:focus {
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(26, 20, 16, 0.06);
}
.admin-auth .f-input.err { border-color: var(--accent); }
.admin-auth .f-input.err:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.10); }
.admin-auth .f-input::placeholder { color: #b8b0a8; }
.admin-auth .f-input.pr { padding-right: 2.5rem; }
.admin-auth .f-err  { font-size: 0.72rem; color: var(--accent); margin-top: 0.1rem; }
.admin-auth .f-hint { font-size: 0.72rem; color: var(--muted);  margin-top: 0.1rem; }

.admin-auth .userid-input {
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

/* ── Password show/hide toggle ── */
.admin-auth .pw-tog {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 2px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.admin-auth .pw-tog:hover { color: var(--ink); }

/* ── Password strength meter (reset screen only) ── */
.admin-auth .pw-str { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; }
.admin-auth .pw-bars { display: flex; gap: 3px; }
.admin-auth .pw-bar { flex: 1; height: 3px; background: var(--rule); border-radius: 2px; transition: background 0.3s; }
.admin-auth .pw-bar.weak   { background: #c0392b; }
.admin-auth .pw-bar.fair   { background: #e67e22; }
.admin-auth .pw-bar.good   { background: #f1c40f; }
.admin-auth .pw-bar.strong { background: #27ae60; }
.admin-auth .pw-str-lbl { font-size: 0.68rem; color: var(--muted); }

/* ── Primary submit button ── */
.admin-auth .btn-p {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: none;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s;
  margin-top: 0.25rem;
  position: relative;
  overflow: hidden;
}
.admin-auth .btn-p:hover { background: var(--accent); }
.admin-auth .btn-p:disabled { background: #b0a699; cursor: not-allowed; }
.admin-auth .btn-p .bt { display: block; }
.admin-auth .btn-p .bs {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: inherit;
}
.admin-auth .btn-p.loading .bt { opacity: 0; }
.admin-auth .btn-p.loading .bs { display: flex; }
.admin-auth .spin-i { animation: admin-auth-spin 0.7s linear infinite; }
@keyframes admin-auth-spin { to { transform: rotate(360deg); } }

/* ── Inline link button (forgot / resend / back) ── */
.admin-auth .lnk {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.admin-auth .lnk:hover { color: var(--accent); }
.admin-auth .lnk:disabled { color: #b8b0a8; cursor: not-allowed; text-decoration: none; }

.admin-auth .row-aux {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.admin-auth .row-aux.center { justify-content: center; }

/* ── Back button ── */
.admin-auth .back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  padding: 0;
  margin-bottom: 1.25rem;
  transition: color 0.15s;
}
.admin-auth .back-btn:hover { color: var(--ink); }

/* ── OTP entry ── */
.admin-auth .otp-wrap {
  display: flex;
  gap: 0.55rem;
  justify-content: center;
  margin: 0.75rem 0;
}
.admin-auth .otp-cell {
  width: 46px;
  height: 54px;
  text-align: center;
  border: 1.5px solid var(--rule);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  caret-color: transparent;
}
.admin-auth .otp-cell:focus {
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(26, 20, 16, 0.06);
}
.admin-auth .otp-cell.filled { border-color: var(--ink); background: #fff; }
.admin-auth .otp-cell.oerr   { border-color: var(--accent); }
@media (max-width: 400px) {
  .admin-auth .otp-cell { width: 40px; height: 48px; font-size: 1.15rem; }
  .admin-auth .otp-wrap { gap: 0.4rem; }
}
.admin-auth .otp-timer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.75rem;
}

/* ── Email badge (shown on reset-sent) ── */
.admin-auth .email-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(192, 57, 43, 0.07);
  border: 1px solid rgba(192, 57, 43, 0.2);
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.admin-auth .email-badge svg { color: var(--accent); flex-shrink: 0; }

/* ── Success screen ── */
.admin-auth .success-wrap { text-align: center; padding: 1.25rem 0 0.5rem; }
.admin-auth .success-icon {
  width: 60px;
  height: 60px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  animation: admin-auth-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes admin-auth-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.admin-auth .success-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.admin-auth .success-desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 320px;
  margin: 0 auto 1.5rem;
}

/* ════════════════════════════════════════
   The Sunset Ink - Admin Dashboard V1
   Sidebar-driven editorial control surface (overview / submissions /
   published / invites / authors / settings) plus a slide-in submission
   drawer. All selectors scoped under .admin-dashboard. Tokens come from
   src/styles/main.css; the global `h1 em / h2 em / h3 em` rule there
   already handles italic + accent on key words and the wordmark.
════════════════════════════════════════ */

.admin-dashboard {
  --sidebar-w: 220px;
  background: #f0ebe0;            /* slightly darker tint than --paper for the dashboard surround */
  color: var(--ink);
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

/* Boot state - "Checking session…" placeholder shown while /me runs at
 * page mount. Prevents the full dashboard chrome from flashing when an
 * unauthed visitor is about to be bounced to the login page. */
.admin-dashboard .admin-boot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.admin-dashboard .app { display: flex; flex: 1; min-height: 0; }
.admin-dashboard .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
/* Desktop sidebar grows with its content - no internal scrollbar. When the
   nav list is taller than the viewport, the whole page grows instead. When
   it's shorter, min-height:100vh keeps it filling the viewport so the ink
   background doesn't end mid-screen. Mobile re-instates overflow-y:auto in
   the @media block below because position:fixed pins the sidebar to the
   viewport height and tall nav content would otherwise be cut off. */
.admin-dashboard .sidebar {
  width: var(--sidebar-w);
  background: var(--ink);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-height: 100vh;
}
.admin-dashboard .sidebar-logo {
  padding: 1.6rem 1.4rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.admin-dashboard .sl-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -0.01em;
}
.admin-dashboard .sl-name em { font-style: italic; color: var(--accent); }
.admin-dashboard .sl-sub {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.3);
  margin-top: 0.15rem;
}
.admin-dashboard .sidebar-section { padding: 0.9rem 0; }
.admin-dashboard .sidebar-section-label {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.25);
  padding: 0.3rem 1.4rem 0.55rem;
  font-weight: 500;
}
.admin-dashboard .nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 1.4rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  color: rgba(245, 240, 232, 0.55);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 400;
  border-left: 2px solid transparent;
}
.admin-dashboard .nav-item:hover { background: rgba(245, 240, 232, 0.06); color: rgba(245, 240, 232, 0.85); }
.admin-dashboard .nav-item.active {
  background: rgba(245, 240, 232, 0.09);
  color: var(--paper);
  border-left-color: var(--accent);
  font-weight: 500;
}
.admin-dashboard .nav-item svg { flex-shrink: 0; opacity: 0.7; }
.admin-dashboard .nav-item.active svg { opacity: 1; }
.admin-dashboard .nav-badge {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
}
.admin-dashboard .sidebar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0.4rem 1.2rem;
}
.admin-dashboard .sidebar-user {
  padding: 1rem 1.4rem;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.admin-dashboard .su-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.admin-dashboard .su-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.admin-dashboard .su-name {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-dashboard .su-role {
  font-size: 0.62rem;
  color: rgba(245, 240, 232, 0.35);
  white-space: nowrap;
}
.admin-dashboard .su-sign-out {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(245, 240, 232, 0.3);
  padding: 2px;
  transition: color 0.15s;
  display: flex;
  align-items: center;
}
.admin-dashboard .su-sign-out:hover { color: rgba(245, 240, 232, 0.7); }

/* ── Mobile sidebar toggle ──────────────────────────────────────────────── */
.admin-dashboard .mob-top-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.admin-dashboard .mob-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--paper);
  padding: 4px;
  display: flex;
  align-items: center;
}
.admin-dashboard .mob-logo { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--paper); }
.admin-dashboard .mob-logo em { font-style: italic; color: var(--accent); }
.admin-dashboard .mob-spacer { width: 28px; }

.admin-dashboard .sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 98;
}

@media (max-width: 860px) {
  .admin-dashboard .mob-top-bar { display: flex; }
  .admin-dashboard .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 99;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    /* Pinned to viewport height on mobile (top:0 + bottom:0) - restore the
       internal scroll the desktop rule dropped, so tall nav content isn't
       cut off on small screens. */
    overflow-y: auto;
  }
  .admin-dashboard .sidebar.open { transform: translateX(0); }
  .admin-dashboard .sidebar-overlay.show { display: block; }
}

/* ── Pages ──────────────────────────────────────────────────────────────── */
.admin-dashboard .page {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) 3rem;
}
.admin-dashboard .page.active { display: flex; }

.admin-dashboard .page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.admin-dashboard .page-eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.35rem;
}
.admin-dashboard .page-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.admin-dashboard .page-subtitle {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 0.5rem;
  max-width: 60ch;
  line-height: 1.5;
}
.admin-dashboard .page-header-actions {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.admin-dashboard .btn-primary {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: none;
  padding: 0.62rem 1.4rem;
  cursor: pointer;
  transition: background 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.admin-dashboard .btn-primary:hover { background: var(--accent); }
.admin-dashboard .btn-ghost {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--rule);
  padding: 0.62rem 1.4rem;
  cursor: pointer;
  transition: border-color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.admin-dashboard .btn-ghost:hover { border-color: var(--ink); }
.admin-dashboard .btn-sm { font-size: 0.68rem; padding: 0.4rem 0.9rem; }

/* ── Stat cards ─────────────────────────────────────────────────────────── */
.admin-dashboard .stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.9rem;
  margin-bottom: 2rem;
}
@media (max-width: 1100px) { .admin-dashboard .stats-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .admin-dashboard .stats-row { grid-template-columns: repeat(2, 1fr); } }

.admin-dashboard .stat-card {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 1.1rem 1.2rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-dashboard .stat-card:hover {
  border-color: var(--ink);
  box-shadow: 0 4px 16px rgba(26, 20, 16, 0.07);
}
.admin-dashboard .stat-card.active-filter {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.12);
}
.admin-dashboard .sc-label {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.admin-dashboard .sc-num {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.03em;
}
.admin-dashboard .sc-num span { font-size: 1rem; color: var(--muted); }
.admin-dashboard .sc-trend { font-size: 0.68rem; color: var(--muted); margin-top: 0.3rem; }
.admin-dashboard .sc-trend.up { color: #27ae60; }

/* ── Status dots inside stat-card labels ────────────────────────────────── */
.admin-dashboard .sc-dot { display: inline-block; margin-right: 0.4rem; vertical-align: middle; }
.admin-dashboard .dot-draft     { background: #b0a699; }
.admin-dashboard .dot-pending   { background: #e67e22; }
.admin-dashboard .dot-revision  { background: #3498db; }
.admin-dashboard .dot-accepted  { background: #27ae60; }
.admin-dashboard .dot-published { background: #1a1410; }
.admin-dashboard .dot-rejected  { background: #c0392b; }

/* ── Filter + search bar ────────────────────────────────────────────────── */
.admin-dashboard .filter-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.admin-dashboard .search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}
.admin-dashboard .search-input-wrap svg {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.admin-dashboard .search-inp {
  width: 100%;
  border: 1.5px solid var(--rule);
  background: #fff;
  font-family: var(--sans);
  font-size: 0.84rem;
  padding: 0.58rem 0.8rem 0.58rem 2.25rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
}
.admin-dashboard .search-inp:focus { border-color: var(--ink); }
.admin-dashboard .search-inp::placeholder { color: #b0a699; }

.admin-dashboard .filter-select {
  border: 1.5px solid var(--rule);
  background: #fff;
  font-family: var(--sans);
  font-size: 0.8rem;
  padding: 0.55rem 0.8rem;
  color: var(--ink);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%279%27 height=%275%27 viewBox=%270 0 9 5%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1l3.5 3L8 1%27 stroke=%27%238a7f74%27 stroke-width=%271.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  padding-right: 2rem;
  min-width: 130px;
}
.admin-dashboard .result-count {
  font-size: 0.75rem;
  color: var(--muted);
  margin-left: auto;
}

/* ── Submissions / published table ──────────────────────────────────────── */
.admin-dashboard .table-wrap {
  background: #fff;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.admin-dashboard .table-scroll { overflow-x: auto; }
.admin-dashboard table { width: 100%; border-collapse: collapse; min-width: 680px; }
.admin-dashboard thead tr {
  background: rgba(26, 20, 16, 0.025);
  border-bottom: 1px solid var(--rule);
}
.admin-dashboard th {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.85rem 1rem;
  text-align: left;
  white-space: nowrap;
  user-select: none;
}
.admin-dashboard tbody tr {
  border-bottom: 1px solid rgba(212, 204, 192, 0.4);
  transition: background 0.12s;
  cursor: pointer;
}
.admin-dashboard tbody tr:last-child { border-bottom: none; }
.admin-dashboard tbody tr:hover { background: rgba(26, 20, 16, 0.025); }
.admin-dashboard tbody tr.selected { background: rgba(192, 57, 43, 0.04); }
.admin-dashboard td {
  padding: 0.9rem 1rem;
  font-size: 0.83rem;
  color: var(--ink);
  vertical-align: middle;
}
.admin-dashboard td.title-cell { max-width: 260px; }
.admin-dashboard td.td-muted { font-size: 0.78rem; color: var(--muted); }
.admin-dashboard td.td-num { font-variant-numeric: tabular-nums; }
.admin-dashboard td.td-nowrap { white-space: nowrap; }
.admin-dashboard .article-title {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-size: 0.85rem;
}
.admin-dashboard .article-excerpt {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  margin-top: 0.15rem;
}
.admin-dashboard .author-cell {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}
.admin-dashboard .author-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(26, 20, 16, 0.45);
  flex-shrink: 0;
}
.admin-dashboard .author-name { font-size: 0.8rem; color: var(--ink); }

/* Status pill */
.admin-dashboard .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  white-space: nowrap;
}
.admin-dashboard .pill-draft     { background: #f0ebe0; color: #8a7f74; border: 1px solid #d4ccc0; }
.admin-dashboard .pill-pending   { background: #fff4ec; color: #c0640a; border: 1px solid #f5c896; }
.admin-dashboard .pill-revision  { background: #eaf4fb; color: #1a6891; border: 1px solid #a8d4ec; }
.admin-dashboard .pill-accepted  { background: #eafbee; color: #1b7e30; border: 1px solid #9fe0b0; }
.admin-dashboard .pill-published { background: #1a1410; color: #f5f0e8; border: 1px solid #1a1410; }
.admin-dashboard .pill-rejected  { background: #fbeceb; color: #9a3a30; border: 1px solid #e8b8b0; }
.admin-dashboard .pill-takedown  { background: #2a1010; color: #fdebea; border: 1px solid #7f1d1d; }

.admin-dashboard .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Row actions */
.admin-dashboard .row-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.admin-dashboard tbody tr:hover .row-actions { opacity: 1; }
.admin-dashboard .row-act-btn {
  background: none;
  border: 1px solid var(--rule);
  padding: 0.3rem 0.55rem;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--sans);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.admin-dashboard .row-act-btn:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Pagination */
.admin-dashboard .pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.admin-dashboard .pagination-info { font-size: 0.75rem; color: var(--muted); }

/* ── Invite panel ───────────────────────────────────────────────────────── */
.admin-dashboard .lede-blurb {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: 2rem;
}
.admin-dashboard .invite-panel {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.admin-dashboard .invite-panel-head {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 1.1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-dashboard .invite-panel-head span { font-weight: 400; }
.admin-dashboard .invite-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 0.75rem;
  align-items: end;
}
@media (max-width: 860px) { .admin-dashboard .invite-form-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .admin-dashboard .invite-form-row { grid-template-columns: 1fr; } }

.admin-dashboard .if-group { display: flex; flex-direction: column; gap: 0.32rem; }
.admin-dashboard .if-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5a4a3a;
  font-weight: 500;
}
.admin-dashboard .if-input,
.admin-dashboard .if-select {
  border: 1.5px solid var(--rule);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 0.84rem;
  padding: 0.6rem 0.8rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}
.admin-dashboard .if-input:focus,
.admin-dashboard .if-select:focus { border-color: var(--ink); }
.admin-dashboard .if-input::placeholder { color: #b0a699; }
.admin-dashboard .if-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%279%27 height=%275%27 viewBox=%270 0 9 5%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1l3.5 3L8 1%27 stroke=%27%238a7f74%27 stroke-width=%271.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  padding-right: 1.9rem;
}

/* ── Tokens / invite list ───────────────────────────────────────────────── */
.admin-dashboard .tokens-list-head {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.admin-dashboard .tokens-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
  border: 1px solid var(--rule);
}
/* Grid (not flex) so columns line up across rows regardless of how many
   action buttons the row has - a USED row keeps only Copy code while a
   pending row carries Copy/Resend/Revoke, and flex was stretching the
   email column to fill the leftover space in the shorter rows. The
   actions column is sized to fit all three buttons; rows with fewer
   buttons just leave the slot blank, preserving alignment. */
.admin-dashboard .token-row {
  display: grid;
  grid-template-columns:
    minmax(180px, max-content)   /* code */
    minmax(120px, 1fr)           /* name */
    minmax(180px, 2fr)           /* email */
    100px                        /* status pill */
    minmax(260px, max-content);  /* actions */
  align-items: center;
  column-gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(212, 204, 192, 0.4);
  background: #fff;
}
.admin-dashboard .token-row:last-child { border-bottom: none; }
.admin-dashboard .tr-code {
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
}
.admin-dashboard .tr-name {
  font-size: 0.8rem;
  color: var(--ink);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-dashboard .tr-email {
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-dashboard .tr-status {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  justify-self: start;
  white-space: nowrap;
}
.admin-dashboard .tr-sent    { background: #eafbee; color: #1b7e30; border: 1px solid #9fe0b0; }
.admin-dashboard .tr-pending { background: #fff4ec; color: #c0640a; border: 1px solid #f5c896; }
.admin-dashboard .tr-used    { background: #f0ebe0; color: #8a7f74; border: 1px solid #d4ccc0; }
.admin-dashboard .tr-expired { background: #fbeceb; color: #9a3a30; border: 1px solid #e8b8b0; }
.admin-dashboard .tr-revoked { background: #f4e8e6; color: #7a2a22; border: 1px solid #d4a8a0; }
.admin-dashboard .tr-actions {
  display: flex;
  gap: 0.35rem;
  justify-self: end;
}

/* Below ~960px the five-column row would compress every cell into
   illegibility - collapse to a stacked card. Code on row 1; name + email
   on row 2; status + actions on row 3. */
@media (max-width: 960px) {
  .admin-dashboard .token-row {
    grid-template-columns: 1fr auto;
    row-gap: 0.45rem;
  }
  .admin-dashboard .tr-code    { grid-column: 1 / -1; }
  .admin-dashboard .tr-name    { grid-column: 1 / 2; }
  .admin-dashboard .tr-email   { grid-column: 2 / 3; text-align: right; }
  .admin-dashboard .tr-status  { grid-column: 1 / 2; justify-self: start; }
  .admin-dashboard .tr-actions { grid-column: 2 / 3; justify-self: end; }
}
.admin-dashboard .tr-btn {
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  background: #fff;
  border: 1px solid var(--rule);
  cursor: pointer;
  color: var(--muted);
  font-family: var(--sans);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.admin-dashboard .tr-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.admin-dashboard .tr-btn.copy:hover   { background: #1565c0; border-color: #1565c0; }
.admin-dashboard .tr-btn.revoke:hover { background: var(--accent); border-color: var(--accent); }

/* ── Drawer ─────────────────────────────────────────────────────────────── */
.admin-dashboard .drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 20, 16, 0.45);
  z-index: 200;
}
.admin-dashboard .drawer-overlay.open { display: block; }
.admin-dashboard .drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 100%);
  background: var(--paper);
  border-left: 1px solid var(--rule);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-dashboard .drawer.open { transform: translateX(0); }
.admin-dashboard .drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.admin-dashboard .drawer-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.admin-dashboard .drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.admin-dashboard .drawer-close:hover { color: var(--ink); }
.admin-dashboard .drawer-body { flex: 1; overflow-y: auto; padding: 1.5rem; }
.admin-dashboard .drawer-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.admin-dashboard .drawer-publish-btn { background: var(--accent); margin-left: auto; }
.admin-dashboard .drawer-publish-btn:hover { background: var(--ink); }

/* Drawer content */
.admin-dashboard .d-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}
.admin-dashboard .d-field { display: flex; flex-direction: column; gap: 0.2rem; }
.admin-dashboard .d-label {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.admin-dashboard .d-value { font-size: 0.84rem; color: var(--ink); line-height: 1.5; }
.admin-dashboard .d-value.mono { font-family: var(--serif); font-weight: 500; }
.admin-dashboard .d-excerpt {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.admin-dashboard .d-excerpt-label {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.admin-dashboard .d-excerpt-text { font-size: 0.84rem; color: #3a302a; line-height: 1.7; }
.admin-dashboard .d-tags {
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.admin-dashboard .d-tag {
  font-size: 0.68rem;
  background: #f0ebe0;
  border: 1px solid var(--rule);
  padding: 0.18rem 0.55rem;
  color: var(--muted);
}
.admin-dashboard .d-section-head {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-dashboard .d-section-head span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.72rem;
}
.admin-dashboard .d-block-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.admin-dashboard .d-block {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  background: #fff;
  border: 1px solid var(--rule);
  font-size: 0.78rem;
  color: var(--muted);
}
.admin-dashboard .d-block-type {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(26, 20, 16, 0.06);
  color: var(--ink);
  padding: 0.15rem 0.5rem;
  flex-shrink: 0;
}
.admin-dashboard .d-block-preview {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.78rem;
  color: #5a4a3a;
}

/* Status change buttons */
.admin-dashboard .status-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.admin-dashboard .status-action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--rule);
  background: #fff;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-align: left;
  color: var(--ink);
}
.admin-dashboard .status-action-btn:hover { border-color: var(--ink); }
.admin-dashboard .status-action-btn.current {
  border-color: var(--ink);
  background: rgba(26, 20, 16, 0.04);
}
.admin-dashboard .status-action-btn.accept:hover      { background: #eafbee; border-color: #27ae60; color: #1b7e30; }
.admin-dashboard .status-action-btn.reject:hover      { background: rgba(192, 57, 43, 0.06); border-color: var(--accent); color: var(--accent); }
.admin-dashboard .status-action-btn.publish:hover     { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Hard reject - terminal "no". Reads more decisive than .reject (which is
   the softer "request revision"): filled-red on hover, not just a wash. */
.admin-dashboard .status-action-btn.reject-hard:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.admin-dashboard .sa-left { display: flex; align-items: center; gap: 0.65rem; }
.admin-dashboard .sa-right { font-size: 0.65rem; color: var(--muted); font-weight: 400; }

/* Editorial notes */
.admin-dashboard .notes-textarea {
  width: 100%;
  border: 1.5px solid var(--rule);
  background: #fff;
  font-family: var(--sans);
  font-size: 0.84rem;
  padding: 0.65rem 0.85rem;
  color: var(--ink);
  outline: none;
  resize: vertical;
  min-height: 90px;
  line-height: 1.65;
  transition: border-color 0.2s;
}
.admin-dashboard .notes-textarea:focus { border-color: var(--ink); }
.admin-dashboard .notes-textarea::placeholder { color: #b8b0a8; }

/* ── Overview widgets ───────────────────────────────────────────────────── */
.admin-dashboard .widgets-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .admin-dashboard .widgets-row { grid-template-columns: 1fr; } }

.admin-dashboard .widget {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 1.25rem;
}
.admin-dashboard .widget-head {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-dashboard .widget-head span {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Recent list */
.admin-dashboard .recent-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(212, 204, 192, 0.4);
  cursor: pointer;
}
.admin-dashboard .recent-item:last-child { border-bottom: none; }
.admin-dashboard .ri-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.admin-dashboard .ri-info { flex: 1; min-width: 0; }
.admin-dashboard .ri-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-dashboard .ri-meta { font-size: 0.7rem; color: var(--muted); margin-top: 0.1rem; }
.admin-dashboard .ri-time { font-size: 0.68rem; color: #b0a699; flex-shrink: 0; white-space: nowrap; }

/* Category breakdown */
.admin-dashboard .cat-bar-item { margin-bottom: 0.75rem; }
.admin-dashboard .cat-bar-item:last-child { margin-bottom: 0; }
.admin-dashboard .cb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}
.admin-dashboard .cb-name { font-size: 0.78rem; font-weight: 500; color: var(--ink); }
.admin-dashboard .cb-count { font-size: 0.72rem; color: var(--muted); }
.admin-dashboard .cb-track {
  height: 5px;
  background: rgba(26, 20, 16, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.admin-dashboard .cb-fill {
  height: 100%;
  background: var(--ink);
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* ── Settings page ──────────────────────────────────────────────────────── */
.admin-dashboard .settings-col { max-width: 560px; }
.admin-dashboard .settings-widget { margin-bottom: 1.25rem; }
.admin-dashboard .settings-fields {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.admin-dashboard .settings-save { align-self: flex-start; }
.admin-dashboard .settings-blurb {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 1rem;
}
.admin-dashboard .settings-blurb strong { color: var(--ink); }
.admin-dashboard .settings-blurb code {
  background: rgba(26, 20, 16, 0.06);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.78rem;
  padding: 0.05rem 0.35rem;
}

/* ── Site Settings tab bar ──────────────────────────────────────────────
   Horizontal tab strip across the top of the Site Settings page body.
   Underlined-active treatment mirrors the user profile tabs on the reader
   side so the visual language stays consistent across portals. */
.admin-dashboard .ss-tabs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid var(--rule);
  margin: 1.25rem 0 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-dashboard .ss-tabs::-webkit-scrollbar { display: none; }
.admin-dashboard .ss-tab {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.85rem 0.6rem;
  white-space: nowrap;
  transition: color 0.2s;
}
.admin-dashboard .ss-tab::after {
  content: '';
  position: absolute;
  left: 0.6rem; right: 0.6rem;
  bottom: -1px;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s;
}
.admin-dashboard .ss-tab:hover { color: var(--ink); }
.admin-dashboard .ss-tab.active { color: var(--ink); }
.admin-dashboard .ss-tab.active::after { transform: scaleX(1); }
.admin-dashboard .ss-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Tab body wrapper - kept narrow like the other settings columns so
   inputs don't stretch edge-to-edge on wide screens. */
.admin-dashboard .ss-tab-body { max-width: 560px; }
.admin-dashboard .access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border: 1.5px solid var(--rule);
  background: #fff;
}
.admin-dashboard .access-row-title { font-size: 0.82rem; font-weight: 500; }
.admin-dashboard .access-row-sub { font-size: 0.72rem; color: var(--muted); margin-top: 0.1rem; }
.admin-dashboard .access-pill {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #27ae60;
  background: #eafbee;
  border: 1px solid #9fe0b0;
  padding: 0.25rem 0.7rem;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.admin-dashboard .empty-state { text-align: center; padding: 3.5rem 2rem; }
.admin-dashboard .empty-icon { font-size: 2rem; opacity: 0.25; margin-bottom: 0.9rem; }
.admin-dashboard .empty-h {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0.4rem;
}
.admin-dashboard .empty-p { font-size: 0.83rem; color: var(--muted); }

/* ── Toast ──────────────────────────────────────────────────────────────── */
.admin-dashboard .toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8rem;
  padding: 0.75rem 1.25rem;
  z-index: 999;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.admin-dashboard .toast.show { opacity: 1; transform: translateY(0); }

/* ── Mega-menu editor ───────────────────────────────────────────────────── */
.admin-dashboard .mm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 1100px) {
  .admin-dashboard .mm-grid { grid-template-columns: 1fr; }
}

.admin-dashboard .mm-col { display: flex; flex-direction: column; gap: 0.85rem; }

.admin-dashboard .mm-col-head { display: flex; flex-direction: column; gap: 0.35rem; }

.admin-dashboard .mm-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-dashboard .mm-item {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.55rem;
  border: 1px solid var(--rule);
  background: rgba(26, 20, 16, 0.02);
}

.admin-dashboard .mm-item-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}

.admin-dashboard .mm-item-inputs .if-input { font-size: 0.8rem; }

.admin-dashboard .mm-item-controls {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-shrink: 0;
}

.admin-dashboard .mm-icon-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.admin-dashboard .mm-icon-btn:hover:not([disabled]) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.admin-dashboard .mm-icon-btn[disabled] { opacity: 0.35; cursor: not-allowed; }

.admin-dashboard .mm-icon-btn-remove { color: var(--accent); }
.admin-dashboard .mm-icon-btn-remove:hover:not([disabled]) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

.admin-dashboard .mm-add-btn { align-self: flex-start; margin-top: 0.25rem; }

.admin-dashboard .mm-featured-widget { margin-bottom: 1.5rem; }
.admin-dashboard .mm-featured-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 860px) {
  .admin-dashboard .mm-featured-fields { grid-template-columns: 1fr; }
}

.admin-dashboard .mm-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.5rem;
}
.admin-dashboard .mm-save-btn { min-width: 160px; }

/* ── Messages inbox ─────────────────────────────────────────────────────── */

/* Star toggle. Used both in table rows and the drawer top-line. is-on
   tints with the accent so a starred row reads at a glance. */
.admin-dashboard .msg-star-btn {
  background: none;
  border: 1px solid transparent;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--muted);
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.admin-dashboard .msg-star-btn:hover { color: var(--accent); background: rgba(138, 127, 116, 0.08); }
.admin-dashboard .msg-star-btn.is-on { color: var(--accent); }
.admin-dashboard .msg-star-btn.drawer-star { margin-left: auto; }

/* Star column is narrow - no header label, just the icon column. */
.admin-dashboard .msg-th-star { width: 32px; padding-left: 0.5rem; padding-right: 0; }
.admin-dashboard .msg-td-star { width: 32px; padding-left: 0.5rem; padding-right: 0; }

/* New-message row emphasis. Left border + bold sender name. Reads as
   "needs attention" without shouting. */
.admin-dashboard .msg-row { cursor: pointer; }
.admin-dashboard .msg-row.is-new { box-shadow: inset 3px 0 0 var(--accent); }
.admin-dashboard .msg-row.is-new .msg-sender-name { font-weight: 700; color: var(--ink); }

.admin-dashboard .msg-sender {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  max-width: 360px;
}
.admin-dashboard .msg-sender-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
}
.admin-dashboard .msg-sender-email {
  font-size: 0.72rem;
  color: var(--muted);
}
.admin-dashboard .msg-sender-preview {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-dashboard .msg-anon {
  font-style: italic;
  opacity: 0.7;
}

/* Kind + status pills - share base shape with .status-pill / .tr-status
   but live under their own class so they can sit alongside the article
   STATUS_META palette without collision. */
.admin-dashboard .msg-kind-pill,
.admin-dashboard .msg-status-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.26rem 0.6rem;
  white-space: nowrap;
  border: 1px solid transparent;
}
.admin-dashboard .msg-kind-pill.mk-contact  { background: #eaf4fb; color: #1a6891; border-color: #a8d4ec; }
.admin-dashboard .msg-kind-pill.mk-feedback { background: #fff4ec; color: #c0640a; border-color: #f5c896; }

.admin-dashboard .msg-status-pill.ms-new       { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.admin-dashboard .msg-status-pill.ms-read      { background: #f0ebe0; color: #8a7f74; border-color: #d4ccc0; }
.admin-dashboard .msg-status-pill.ms-archived  { background: #faf6ee; color: #b0a699; border-color: #ece4d4; }

/* Rating stars inline (feedback rows). Inherits color so the row's
   td-muted parent tints them muted; the filled vs outline distinction
   comes from the SVG fill/stroke. */
.admin-dashboard .msg-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  color: var(--accent);
}

/* Starred-only toggle button. Sits in the filter bar alongside the
   selects; the active class swaps it to the inked variant so the
   filter state reads at a glance. */
.admin-dashboard .msg-starred-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.admin-dashboard .msg-starred-toggle.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.admin-dashboard .msg-starred-toggle.active .msg-starred-toggle-icon { color: var(--accent); }

/* Submissions "Flagged only" toggle - same shape as the Messages star
   toggle above; kept distinct so the two filters can drift if needed. */
.admin-dashboard .sub-flagged-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.admin-dashboard .sub-flagged-toggle.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.admin-dashboard .sub-flagged-toggle.active .sub-flagged-toggle-icon { color: var(--accent); }

/* Compact flag badge in the Submissions table - three visual tiers.
   Pending wears the accent (admin attention), resolved goes muted so it
   doesn't shout but the count is still legible. */
.admin-dashboard .flag-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 2px;
}
.admin-dashboard .flag-badge svg { width: 11px; height: 11px; }
.admin-dashboard .flag-badge-pending {
  background: rgba(176, 58, 46, 0.08);
  color: var(--accent, #b03a2e);
}
.admin-dashboard .flag-badge-resolved {
  background: rgba(0, 0, 0, 0.05);
  color: var(--muted);
}

/* Drawer flags section - list of reports + admin action buttons. */
.admin-dashboard .d-flags-wrap { margin: 0.5rem 0 1rem; }
.admin-dashboard .d-flag-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.admin-dashboard .d-flag-row {
  border-left: 3px solid var(--accent, #b03a2e);
  background: rgba(176, 58, 46, 0.04);
  padding: 0.55rem 0.75rem;
}
.admin-dashboard .d-flag-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.admin-dashboard .d-flag-reason {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.admin-dashboard .d-flag-meta {
  font-size: 0.72rem;
  color: var(--muted);
}
.admin-dashboard .d-flag-note {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--ink);
  line-height: 1.45;
  white-space: pre-wrap;
}
.admin-dashboard .d-flag-resolved-note {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0.25rem 0 0.5rem;
  font-style: italic;
}
.admin-dashboard .d-flag-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* ── Message drawer ─────────────────────────────────────────────────────── */
.admin-dashboard .msg-drawer-topline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.admin-dashboard .msg-readby-line {
  font-size: 0.72rem;
  color: var(--muted);
  margin: -0.6rem 0 1.2rem;
}
.admin-dashboard .msg-readby-line strong { color: var(--ink); font-weight: 500; }

.admin-dashboard .msg-full-wrap {
  background: #faf6ee;
  border: 1px solid #ece4d4;
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
}
.admin-dashboard .msg-full-body {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.admin-dashboard .msg-reply-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}
.admin-dashboard .msg-reply-item {
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 0.8rem 1rem;
}
.admin-dashboard .msg-reply-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
}
.admin-dashboard .msg-reply-head strong { color: var(--ink); font-weight: 600; }
.admin-dashboard .msg-reply-meta { color: var(--muted); font-size: 0.7rem; }
.admin-dashboard .msg-reply-body {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink);
  word-wrap: break-word;
}

.admin-dashboard .msg-composer-help {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0.4rem 0 0.8rem;
  line-height: 1.5;
}
.admin-dashboard .msg-composer-help strong { color: var(--ink); font-weight: 500; }

/* ── Analytics placeholder ─────────────────────────────────────────────── */
.admin-dashboard .analytics-coming-list {
  margin: 0.8rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--muted);
}
.admin-dashboard .analytics-coming-list li { padding-left: 0.2rem; }

/* ── Drawer: two-column variant (article triage) ────────────────────────────
   The article drawer carries an extra `drawer--two-col` modifier that
   widens the drawer and lays the body out as two columns: the existing
   editor surface on the left, the AI triage card on the right. The
   message drawer keeps the default single-column 520px width.

   Falls back to single column on viewports < 980px so the editor surface
   stays readable on smaller laptops. */
.admin-dashboard .drawer.drawer--two-col { width: min(1040px, 100%); }
.admin-dashboard .drawer-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 980px) {
  .admin-dashboard .drawer-two-col {
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  }
}
.admin-dashboard .drawer-col-triage { min-width: 0; }

/* ── Triage card ────────────────────────────────────────────────────────────
   Right-column AI editor-triage panel rendered by renderTriageCard() in
   admin-dashboard.js. Visually consistent with the rest of the drawer
   (paper / rule / muted tokens) but slightly tighter inner padding so the
   nine ratings + fact-check + flags + prose stack without scrolling for a
   typical piece. */
.admin-dashboard .tg-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 1.1rem 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.admin-dashboard .tg-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}
.admin-dashboard .tg-card-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.admin-dashboard .tg-card-title em { font-style: italic; color: var(--accent); }

.admin-dashboard .tg-badge {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--rule);
  background: #f0ebe0;
  color: var(--muted);
  white-space: nowrap;
}
.admin-dashboard .tg-badge-idle     { color: var(--muted); }
.admin-dashboard .tg-badge-pending  { color: #b8760e; background: #fdf4dc; border-color: #ebd9a3; }
.admin-dashboard .tg-badge-complete { color: #1d6f3a; background: #e6f4ea; border-color: #b8dec5; }
.admin-dashboard .tg-badge-failed   { color: #962a1d; background: #fbe6e3; border-color: #ecbab2; }

.admin-dashboard .tg-formline {
  font-size: 0.78rem;
  color: var(--muted);
}
.admin-dashboard .tg-formline strong { color: var(--ink); font-weight: 600; }

.admin-dashboard .tg-section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.admin-dashboard .tg-section-head {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.admin-dashboard .tg-section-sub {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.65rem;
  color: var(--muted);
  font-weight: 400;
}

/* Ratings - nine compact rows. Primary dimensions get a star + faint
   tint so the editor's eye lands on the form-aware reads first. */
.admin-dashboard .tg-dims {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.admin-dashboard .tg-dim {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid transparent;
}
.admin-dashboard .tg-dim.is-primary {
  background: #fbf6ec;
  border-color: #ead9b3;
}
.admin-dashboard .tg-dim-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.admin-dashboard .tg-dim-label {
  font-size: 0.82rem;
  color: var(--ink);
  font-weight: 500;
}
.admin-dashboard .tg-star {
  color: var(--accent);
  margin-right: 0.3rem;
  font-size: 0.8rem;
}
.admin-dashboard .tg-dim-score {
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.admin-dashboard .tg-dim-bar {
  display: flex;
  gap: 0.22rem;
}
.admin-dashboard .tg-dot {
  width: 12px;
  height: 6px;
  border-radius: 1px;
  background: #ece4d2;
}
.admin-dashboard .tg-dot.is-filled { background: var(--accent); }
.admin-dashboard .tg-dim-comment {
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0.15rem 0 0;
}

/* Fact-check - overall chip on the section head, claims as a list. */
.admin-dashboard .tg-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.18rem 0.5rem;
  border: 1px solid var(--rule);
  background: #f0ebe0;
  color: var(--muted);
}
.admin-dashboard .tg-fc-clean         { color: #1d6f3a; background: #e6f4ea; border-color: #b8dec5; }
.admin-dashboard .tg-fc-mixed         { color: #b8760e; background: #fdf4dc; border-color: #ebd9a3; }
.admin-dashboard .tg-fc-concerns      { color: #962a1d; background: #fbe6e3; border-color: #ecbab2; }
.admin-dashboard .tg-fc-na            { color: var(--muted); }

.admin-dashboard .tg-claim-validated  { color: #1d6f3a; background: #e6f4ea; border-color: #b8dec5; }
.admin-dashboard .tg-claim-unverified { color: #b8760e; background: #fdf4dc; border-color: #ebd9a3; }
.admin-dashboard .tg-claim-incorrect  { color: #962a1d; background: #fbe6e3; border-color: #ecbab2; }
.admin-dashboard .tg-claim-na         { color: var(--muted); }

.admin-dashboard .tg-pass-strength    { color: #1d6f3a; background: #e6f4ea; border-color: #b8dec5; }
.admin-dashboard .tg-pass-weakness    { color: #b8760e; background: #fdf4dc; border-color: #ebd9a3; }
.admin-dashboard .tg-pass-flag        { color: #962a1d; background: #fbe6e3; border-color: #ecbab2; }
.admin-dashboard .tg-pass-ai          { color: #2b5d8a; background: #e5eff8; border-color: #b6cce0; }
.admin-dashboard .tg-chip-flag        { color: #962a1d; background: #fbe6e3; border-color: #ecbab2; }

.admin-dashboard .tg-claim-list,
.admin-dashboard .tg-flag-list,
.admin-dashboard .tg-reply-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.admin-dashboard .tg-claim,
.admin-dashboard .tg-flag {
  border: 1px solid var(--rule);
  padding: 0.55rem 0.7rem 0.6rem;
  background: #fbf8f2;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.admin-dashboard .tg-claim-empty {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
  font-size: 0.78rem;
  padding: 0.7rem;
  text-align: center;
}
.admin-dashboard .tg-claim-head { display: flex; gap: 0.4rem; align-items: center; }
.admin-dashboard .tg-claim-quote {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
  border-left: 2px solid var(--rule);
  padding: 0.1rem 0 0.1rem 0.6rem;
}
.admin-dashboard .tg-claim-note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
}

.admin-dashboard .tg-reply {
  border: 1px solid var(--rule);
  background: #fbf8f2;
  padding: 0.5rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.admin-dashboard .tg-reply-label {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.admin-dashboard .tg-reply-text {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink);
}

.admin-dashboard .tg-prose {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #3a302a;
}
.admin-dashboard .tg-prose-em { font-style: italic; }

.admin-dashboard .tg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}
.admin-dashboard .tg-meta {
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Empty / failed state - the CTA is the dominant element. */
.admin-dashboard .tg-empty {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: flex-start;
}
.admin-dashboard .tg-empty-p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--muted);
}

.admin-dashboard .tg-error {
  background: #fbe6e3;
  border: 1px solid #ecbab2;
  padding: 0.55rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.admin-dashboard .tg-error-inline {
  margin-top: 0.3rem;
}
.admin-dashboard .tg-error-label {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #962a1d;
  font-weight: 600;
}
.admin-dashboard .tg-error-text {
  margin: 0;
  font-family: var(--mono, monospace);
  font-size: 0.72rem;
  line-height: 1.45;
  color: #5a1f15;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Loading overlay used during hydrate and during a POST run. Floats above
   the card content so the prior result stays visible behind it. */
.admin-dashboard .tg-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.admin-dashboard .tg-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: tg-spin 0.9s linear infinite;
}
@keyframes tg-spin {
  to { transform: rotate(360deg); }
}

.admin-dashboard .tg-cta[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Pending-state niceties. The inline spinner sits beside the "Triage
   running…" label without an overlay; that visual is reserved for the
   actively-loading (hydrate / POST in flight) state. */
.admin-dashboard .tg-running-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.admin-dashboard .tg-running-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.admin-dashboard .tg-spinner-inline {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
.admin-dashboard .tg-empty-meta {
  margin: 0;
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.admin-dashboard .tg-empty-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/*
 * The Sunset Ink - User Profile V1 styles
 *
 * Single-column profile layout: brand hero (avatar + name + email + joined),
 * three-tab navigation, and per-tab content sections. All selectors scoped
 * under .user-profile so the component stays self-contained.
 *
 * Brand variables (--ink, --paper, --accent, --muted, --rule, --serif, --sans)
 * are defined globally in styles/main.css.
 */

.user-profile {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem);
  font-family: var(--sans);
  color: var(--ink);
}

.user-profile .up-shell {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.user-profile .up-hero {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.user-profile .up-avatar {
  flex-shrink: 0;
  width:  clamp(64px, 10vw, 88px);
  height: clamp(64px, 10vw, 88px);
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

.user-profile .up-hero-text {
  flex: 1;
  min-width: 0;
}
.user-profile .up-name {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 0.2rem;
  word-break: break-word;
}
.user-profile .up-email {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 0.15rem;
  word-break: break-all;
}
.user-profile .up-joined {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */

.user-profile .up-tabs {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 2vw, 1.4rem);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.user-profile .up-tabs::-webkit-scrollbar { display: none; }

.user-profile .up-tab {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.85rem 0.4rem;
  white-space: nowrap;
  transition: color 0.2s;
}
.user-profile .up-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.25s;
}
.user-profile .up-tab:hover { color: var(--ink); }
.user-profile .up-tab.active { color: var(--ink); }
.user-profile .up-tab.active::after { transform: scaleX(1); }
.user-profile .up-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Body sections ─────────────────────────────────────────────────────── */

.user-profile .up-body { width: 100%; }
.user-profile .up-section { display: flex; flex-direction: column; }
.user-profile .up-section-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  color: var(--ink);
}

.user-profile .up-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
}
.user-profile .up-row:last-child { border-bottom: none; }

.user-profile .up-row-text { min-width: 0; }
.user-profile .up-row-label {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.user-profile .up-row-value {
  font-size: 0.95rem;
  color: var(--ink);
  word-break: break-word;
}
.user-profile .up-row-muted { color: var(--muted); }

.user-profile .up-row-action {
  align-items: center;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.user-profile .up-btn {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  position: relative;
  overflow: hidden;
}
.user-profile .up-btn:disabled { cursor: not-allowed; }

.user-profile .up-btn-primary {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}
.user-profile .up-btn-primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.user-profile .up-btn-primary:disabled { background: #b0a699; border-color: #b0a699; }

.user-profile .up-btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--rule);
}
.user-profile .up-btn-secondary:hover { border-color: var(--ink); background: rgba(26,20,16,0.04); }

.user-profile .up-btn-danger {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.user-profile .up-btn-danger:hover:not(:disabled) { background: var(--accent); color: var(--paper); }
.user-profile .up-btn-danger:disabled { opacity: 0.55; }

/* Solid red - used for the destructive "Yes, delete my account" confirm
 * button so the affirmative action visually outweighs the cancel option. */
.user-profile .up-btn-danger-solid {
  background: var(--accent);
  color: var(--paper);
  border: 1.5px solid var(--accent);
}
.user-profile .up-btn-danger-solid:hover:not(:disabled) { background: #a02f23; border-color: #a02f23; }

.user-profile .up-btn .up-btn-spin {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: inherit;
}
.user-profile .up-btn.loading .up-btn-label { opacity: 0; }
.user-profile .up-btn.loading .up-btn-spin  { display: flex; }

@keyframes up-spin { to { transform: rotate(360deg); } }
.user-profile .spin-svg { animation: up-spin 0.7s linear infinite; }

/* ── Change-password inline form ───────────────────────────────────────── */

.user-profile .up-cp-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.25rem;
  background: rgba(26, 20, 16, 0.03);
  border: 1px solid var(--rule);
  margin-bottom: 1rem;
}

.user-profile .up-field { display: flex; flex-direction: column; gap: 0.35rem; }
.user-profile .up-label {
  font-size: 0.65rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}

.user-profile .up-input-wrap { position: relative; }
.user-profile .up-input {
  width: 100%;
  border: 1.5px solid var(--rule);
  background: #fff;
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 0.65rem 2.5rem 0.65rem 0.85rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.user-profile .up-input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26, 20, 16, 0.06);
}
.user-profile .up-field.has-err .up-input { border-color: var(--accent); }
.user-profile .up-field.has-err .up-input:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12); }

.user-profile .up-pw-tog {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.user-profile .up-pw-tog:hover { color: var(--ink); }

.user-profile .up-field-err {
  font-size: 0.72rem;
  color: var(--accent);
}

.user-profile .up-err-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.25);
  padding: 0.65rem 0.9rem;
  font-size: 0.8rem;
  color: var(--accent);
}
.user-profile .up-err-banner svg { flex-shrink: 0; }

.user-profile .up-cp-actions { margin-top: 0.4rem; }

.user-profile .up-success-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: #2d6a4f;
  margin: 0.5rem 0 0.75rem;
}
.user-profile .up-success-row svg { stroke: #2d6a4f; }

/* ── Activity tab ──────────────────────────────────────────────────────── */

.user-profile .up-activity-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(0.85rem, 2.5vw, 1.25rem);
  align-items: center;
  padding: 1.25rem;
  border: 1px solid var(--rule);
  margin-bottom: 1rem;
  background: #fff;
}
.user-profile .up-activity-card:last-child { margin-bottom: 0; }

.user-profile .up-activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex-shrink: 0;
}

.user-profile .up-activity-text { min-width: 0; }
.user-profile .up-activity-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.user-profile .up-activity-desc {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.3rem;
  line-height: 1.5;
}
.user-profile .up-activity-empty {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--muted);
}

.user-profile .up-activity-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.user-profile .up-activity-cta:hover { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 540px) {
  .user-profile .up-activity-card {
    grid-template-columns: auto 1fr;
  }
  .user-profile .up-activity-cta {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

/* ── Settings tab ──────────────────────────────────────────────────────── */

.user-profile .up-danger-zone {
  border: 1px solid rgba(192, 57, 43, 0.35);
  padding: 1.25rem;
  background: rgba(192, 57, 43, 0.04);
}
.user-profile .up-danger-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.user-profile .up-danger-desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 1rem;
  max-width: 60ch;
}
.user-profile .up-danger-desc strong {
  color: var(--ink);
  font-weight: 600;
}

/* "Deletion scheduled" pill - sits at the top of the danger zone when the
 * account is in deletion_pending, ahead of the scheduled-date copy. */
.user-profile .up-delete-badge {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper);
  background: var(--accent);
  padding: 0.3rem 0.65rem;
  margin-bottom: 0.75rem;
  border-radius: 2px;
}

/* Stacks the danger-zone CTAs. Two-button cluster (confirm + keep) wraps
 * naturally on narrow screens. */
.user-profile .up-danger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.25rem;
}