/* =========================================================
   WRITING DASHBOARD
   Lifted from the static writing.html template — pagehead,
   featured flagship card, dashboard strip, sticky toolbar,
   filter chips, grid/list view, pagination, newsletter, footer.
   ========================================================= */

/* ---------- PAGEHEAD overrides ---------- */
.pagehead.writing {
  padding: 80px 0 40px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.pagehead.writing .head-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
}
.pagehead.writing h1 {
  font-size: clamp(40px, 5.4vw, 78px);
  letter-spacing: -0.025em;
  line-height: 1.02;
  max-width: 18ch;
}
.pagehead.writing h1 .accent { color: var(--sunrise); font-style: italic; font-weight: 500; }
.pagehead.writing .head-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-muted);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 12px;
}
.pagehead.writing .head-meta .row { display: flex; justify-content: space-between; gap: 24px; }
.pagehead.writing .head-meta .row span:last-child { color: var(--fg); font-weight: 600; }
.pagehead.writing .head-meta hr {
  margin: 0;
  border: 0;
  border-top: 1px dashed var(--border);
}

/* ---------- FEATURED — flagship card ---------- */
.featured-flag {
  padding: 48px 0 16px;
}
.flag-card {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 48px;
}
.flag-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.flag-grid-empty { grid-template-columns: 1fr 1fr; }
.flag-art {
  background: var(--ink);
  color: var(--on-ink);
  padding: 56px 48px;
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flag-art .topo-bg {
  position: absolute; inset: 0;
  opacity: 0.08;
  pointer-events: none;
}
.flag-art .topo-bg svg { width: 100%; height: 100%; }
.flag-art .topo-bg path { stroke: var(--on-ink); }
.flag-art .ribbon {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sunrise);
}
.flag-art .ribbon::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sunrise);
  box-shadow: 0 0 0 4px rgba(226, 100, 26, 0.18);
}
.flag-art .glyph {
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(80px, 14vw, 168px);
  line-height: 0.85;
  font-weight: 600;
  color: var(--on-ink);
  letter-spacing: -0.04em;
}
.flag-art .glyph .sup {
  display: inline-block;
  vertical-align: top;
  margin-top: 0.15em;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--sunrise);
  text-transform: uppercase;
  margin-left: 8px;
}
.flag-art .glyph em {
  font-style: italic;
  font-weight: 500;
  color: var(--sunrise);
}
.flag-art .stamp {
  position: relative;
  display: flex;
  gap: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--on-ink-muted);
  flex-wrap: wrap;
}
.flag-art .stamp span strong { color: var(--on-ink); font-weight: 600; }

.flag-body {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.flag-body .pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.flag-body h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.flag-body p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
  max-width: 50ch;
}
.flag-body .toc {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 12px;
  display: grid;
  gap: 6px;
}
.flag-body .toc-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-2);
}
.flag-body .toc-row .n {
  font-family: var(--font-mono);
  color: var(--fg-muted);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.flag-body .actions { margin-top: 4px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- DASHBOARD STRIP — stats ---------- */
.dash-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  margin-top: 48px;
}
.dash-strip-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.dash-cell {
  padding: 28px 24px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-cell:first-child { border-left: 0; }
.dash-cell .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-muted);
}
.dash-cell .val {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.015em;
  line-height: 1;
}
.dash-cell .val .num { font: inherit; color: inherit; }
.dash-cell.last .val .num { font-size: 22px; }
.dash-cell .val .unit {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dash-cell.accent .val { color: var(--sunrise-deep); }
.dash-cell .sub {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-muted);
}
.dash-cell .spark {
  display: flex; gap: 3px; align-items: end; height: 22px; margin-top: 4px;
}
.dash-cell .spark span {
  width: 4px; background: var(--midnight-200); border-radius: 1px;
}
[data-theme="dark"] .dash-cell .spark span { background: var(--midnight-400); }
.dash-cell .spark span.hot { background: var(--sunrise); }

/* ---------- TOOLBAR — search + sort + view ---------- */
.toolbar-wrap {
  padding: 48px 0 12px;
  position: sticky;
  top: var(--nav-height, 64px);
  background: var(--bg);
  z-index: 20;
}
.toolbar {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1.6fr auto auto auto;
  gap: 12px;
  align-items: center;
}
.search {
  position: relative;
  display: flex;
  align-items: center;
}
.search input {
  font: inherit;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 14px 16px 14px 44px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  outline: none;
  transition: border-color var(--dur-state) var(--ease-paper),
              background var(--dur-state) var(--ease-paper);
}
.search input::placeholder { color: var(--fg-muted); }
.search input:focus { border-color: var(--fg); background: var(--bg); }
.search svg {
  position: absolute; left: 14px; width: 18px; height: 18px;
  color: var(--fg-muted); pointer-events: none;
}
.search .kbd {
  position: absolute; right: 12px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 2px);
  letter-spacing: 0.05em;
}

.tb-select {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 4px 0 14px;
  background: var(--bg-2);
}
.tb-select select {
  font: inherit;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  border: 0;
  background: transparent;
  color: var(--fg);
  padding: 12px 12px 12px 4px;
  cursor: pointer;
  outline: none;
}
.tb-select label { color: var(--fg-muted); }

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
}
.view-toggle button {
  background: transparent; border: 0;
  padding: 12px 12px;
  color: var(--fg-muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.view-toggle button:hover { color: var(--fg); }
.view-toggle button.on {
  background: var(--ink); color: var(--on-ink);
}
.view-toggle svg { width: 16px; height: 16px; }

/* ---------- FILTER CHIPS ---------- */
.filter-bar {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 16px 48px 8px;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-group .glabel {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-muted);
  margin-right: 4px;
}
.chip {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg-2);
  cursor: pointer;
  transition: all var(--dur-state) var(--ease-paper);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip:hover { border-color: var(--fg); color: var(--fg); }
.chip.on {
  background: var(--ink); color: var(--on-ink); border-color: var(--ink);
}
.chip.on .ct { color: var(--sunrise); }
.chip .ct {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
  letter-spacing: 0.1em;
}

.filter-bar .clear {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 500;
  color: var(--fg-muted);
  background: none; border: 0;
  cursor: pointer;
  padding: 6px 0;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
}
.filter-bar .clear:hover { color: var(--fg); }

/* ---------- RESULT META ---------- */
.result-meta {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 20px 48px 0;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-muted);
  gap: 16px;
  flex-wrap: wrap;
}
.result-meta strong { color: var(--fg); font-weight: 600; }

/* ---------- ARTICLE GRID — cards ---------- */
.archive-wrap {
  padding: 32px 0 64px;
}
.archive {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 48px;
}

/* GRID VIEW */
.grid-view {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.grid-view .card-art {
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 320px;
  transition: background var(--dur-state) var(--ease-paper);
  position: relative;
}
.grid-view .card-art:hover { background: var(--bg-2); }
.grid-view .card-art .meta-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.grid-view .card-art h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.grid-view .card-art p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}
.grid-view .card-art .foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.grid-view .card-art .foot .lang {
  display: inline-flex; align-items: center; gap: 6px;
}
.grid-view .card-art .foot .lang span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--midnight-300);
}
.grid-view .card-art .foot .lang span.live { background: var(--sunrise); }
.grid-view .card-art .arrow {
  position: absolute; top: 24px; right: 24px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted);
  transition: all var(--dur-state) var(--ease-paper);
}
.grid-view .card-art:hover .arrow {
  background: var(--sunrise); border-color: var(--sunrise); color: #fff;
  transform: translate(2px, -2px);
}
.grid-view .card-art .arrow svg { width: 12px; height: 12px; }

/* Visual swatch / cover — lightweight, no real artwork */
.cover {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm, 2px);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.cover[data-pillar="01"] { background: linear-gradient(135deg, var(--midnight-700) 0%, var(--midnight-500) 100%); }
.cover[data-pillar="02"] { background: linear-gradient(135deg, var(--sunrise-600) 0%, var(--sunrise-400) 100%); }
.cover[data-pillar="03"] { background: linear-gradient(135deg, var(--midnight-600) 0%, var(--midnight-300) 100%); }
.cover[data-pillar="04"] { background: linear-gradient(135deg, var(--saffron-700) 0%, var(--saffron-300) 100%); }
.cover[data-pillar="05"] { background: linear-gradient(135deg, var(--midnight-800) 0%, var(--sunrise-700) 110%); }
.cover[data-pillar="06"] { background: var(--paper-3); }
[data-theme="dark"] .cover[data-pillar="06"] { background: var(--midnight-600); }
.cover .cover-label {
  position: absolute; left: 12px; bottom: 10px;
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.cover[data-pillar="06"] .cover-label { color: var(--fg-muted); }
.cover .topo-mini {
  position: absolute; inset: 0; opacity: 0.16;
}
.cover .glyph-num {
  position: absolute; right: 14px; top: 10px;
  font-family: var(--font-serif); font-size: 44px; font-weight: 600;
  color: rgba(255,255,255,0.95); letter-spacing: -0.02em; line-height: 1;
}
.cover[data-pillar="06"] .glyph-num { color: var(--midnight-700); }

/* Custom uploaded image cover (overrides pillar gradient) */
.cover.cover-custom {
  background-size: cover;
  background-position: center;
  background-color: var(--midnight-700);
}
.cover.cover-custom .glyph-num {
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.cover.cover-custom .cover-label {
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.cover.cover-custom .topo-mini { opacity: 0.10; }

/* ----- Featured-card art panel cover overrides ----- */
.flag-art.flag-art-custom {
  background-size: cover;
  background-position: center;
}
.flag-art.flag-art-custom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,16,28,0.35) 0%, rgba(8,16,28,0.75) 100%);
  z-index: 0;
  pointer-events: none;
}
.flag-art.flag-art-custom > *,
.flag-art.flag-art-gradient > * { position: relative; z-index: 1; }

.flag-art.flag-art-gradient[data-cover="01"] { background: linear-gradient(135deg, var(--midnight-700) 0%, var(--midnight-500) 100%); }
.flag-art.flag-art-gradient[data-cover="02"] { background: linear-gradient(135deg, var(--sunrise-600)  0%, var(--sunrise-400)  100%); }
.flag-art.flag-art-gradient[data-cover="03"] { background: linear-gradient(135deg, var(--midnight-600) 0%, var(--midnight-300) 100%); }
.flag-art.flag-art-gradient[data-cover="04"] { background: linear-gradient(135deg, var(--saffron-700)  0%, var(--saffron-300)  100%); }
.flag-art.flag-art-gradient[data-cover="05"] { background: linear-gradient(135deg, var(--midnight-800) 0%, var(--sunrise-700)  110%); }
.flag-art.flag-art-gradient[data-cover="06"] { background: var(--paper-3); color: var(--midnight-700); }

/* Light "Capability" variant — invert text + decorative colors so the ribbon
   and stamp remain legible against cream. */
.flag-art.flag-art-gradient[data-cover="06"] .ribbon { color: var(--sunrise-deep); }
.flag-art.flag-art-gradient[data-cover="06"] .ribbon::before { background: var(--sunrise); }
.flag-art.flag-art-gradient[data-cover="06"] .glyph { color: var(--midnight-700); }
.flag-art.flag-art-gradient[data-cover="06"] .glyph em,
.flag-art.flag-art-gradient[data-cover="06"] .glyph .sup { color: var(--sunrise-deep); }
.flag-art.flag-art-gradient[data-cover="06"] .stamp { color: var(--midnight-500); }
.flag-art.flag-art-gradient[data-cover="06"] .stamp strong { color: var(--midnight-700); }
.flag-art.flag-art-gradient[data-cover="06"] .topo-bg path { stroke: var(--midnight-700); }

/* LIST VIEW */
.list-view {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.list-view .row {
  background: var(--bg);
  text-decoration: none; color: inherit;
  display: grid;
  grid-template-columns: 60px 100px 1fr 130px 100px 28px;
  gap: 24px;
  align-items: center;
  padding: 22px 28px;
  transition: background var(--dur-state) var(--ease-paper);
}
.list-view .row:hover { background: var(--bg-2); }
.list-view .row .num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-muted); letter-spacing: 0.14em;
  text-transform: uppercase;
}
.list-view .row .pillar-pill {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-2);
}
.list-view .row .pillar-pill::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; margin-right: 8px;
  border-radius: 50%;
  background: var(--sunrise);
  vertical-align: middle;
}
.list-view .row .pillar-pill[data-p="01"]::before { background: var(--midnight-500); }
.list-view .row .pillar-pill[data-p="02"]::before { background: var(--sunrise); }
.list-view .row .pillar-pill[data-p="03"]::before { background: var(--midnight-300); }
.list-view .row .pillar-pill[data-p="04"]::before { background: var(--saffron); }
.list-view .row .pillar-pill[data-p="05"]::before { background: var(--sunrise-600); }
.list-view .row .pillar-pill[data-p="06"]::before { background: var(--stone-400); }

.list-view .row h3 {
  font-family: var(--font-serif);
  font-size: 19px; font-weight: 600;
  color: var(--fg); margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.list-view .row .sub {
  font-family: var(--font-sans);
  font-size: 13px; color: var(--fg-2);
  margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.list-view .row .date,
.list-view .row .read {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.list-view .row .read { text-align: right; }
.list-view .row .icon {
  width: 28px; height: 28px;
  border-radius: 50%; border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted);
  transition: all var(--dur-state) var(--ease-paper);
}
.list-view .row:hover .icon {
  background: var(--sunrise); border-color: var(--sunrise); color: #fff;
}
.list-view .row .icon svg { width: 12px; height: 12px; }

/* Empty state */
.empty {
  padding: 80px 24px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.empty h3 {
  font-family: var(--font-serif);
  font-size: 24px; color: var(--fg);
  margin: 0 0 8px;
}
.empty p {
  font-family: var(--font-sans);
  font-size: 14px; color: var(--fg-2);
  margin: 0;
}

/* ---------- PAGINATION ---------- */
.pagination {
  max-width: var(--container-wide);
  margin: 32px auto 0;
  padding: 0 48px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.pagination .summary {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-muted);
}
.pagination .summary strong { color: var(--fg); font-weight: 600; }
.pages { display: inline-flex; gap: 4px; }
.pages button {
  font-family: var(--font-mono); font-size: 12px;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg-2);
  border-radius: var(--radius-sm, 2px);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-state) var(--ease-paper);
}
.pages button:hover:not(:disabled) {
  border-color: var(--fg); color: var(--fg);
}
.pages button.on {
  background: var(--ink); color: var(--on-ink); border-color: var(--ink);
}
.pages button:disabled { opacity: 0.4; cursor: not-allowed; }
.pages button svg { width: 14px; height: 14px; }
.pages .ellipsis {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 36px;
  font-family: var(--font-mono); font-size: 14px;
  color: var(--fg-muted);
}

/* ---------- NEWSLETTER ---------- */
.newsletter-cta {
  background: var(--ink); color: var(--on-ink);
  padding: 88px 0;
  position: relative; overflow: hidden;
}
.newsletter-cta .topo-bg { opacity: 0.08; }
.newsletter-cta .topo-bg path { stroke: var(--on-ink); }
.newsletter-cta-inner {
  position: relative;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.newsletter-cta .ribbon {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--sunrise); margin-bottom: 16px;
}
.newsletter-cta h2 {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1; font-weight: 600;
  color: var(--on-ink);
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.newsletter-cta p {
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.6;
  color: var(--on-ink-2);
  margin: 16px 0 0;
  max-width: 44ch;
}
.signup {
  display: flex; gap: 8px; margin-top: 28px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius);
  padding: 4px;
}
.signup input {
  font: inherit; font-family: var(--font-sans);
  font-size: 15px; flex: 1;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  color: var(--on-ink);
  outline: none;
}
.signup input::placeholder { color: var(--on-ink-muted); }
.signup button {
  background: var(--sunrise); color: #fff; border: 0;
  border-radius: var(--radius);
  padding: 0 22px;
  font-family: var(--font-sans); font-weight: 500; font-size: 14px;
  cursor: pointer;
}
.signup button:hover { background: var(--sunrise-deep); }

.format-list { display: grid; gap: 12px; }
.format-list .fl {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-border);
  align-items: baseline;
}
.format-list .fl .n {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--sunrise); letter-spacing: 0.14em;
}
.format-list .fl p {
  font-family: var(--font-sans); font-size: 14px;
  color: var(--on-ink); margin: 0;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .grid-view { grid-template-columns: repeat(2, 1fr); }
  .dash-strip-inner { grid-template-columns: repeat(3, 1fr); }
  .dash-cell:nth-child(3n+1) { border-left: 0; }
  .dash-cell { border-top: 1px solid var(--border); }
  .dash-cell:nth-child(-n+3) { border-top: 0; }
  .list-view .row { grid-template-columns: 60px 1fr 110px 28px; }
  .list-view .row .pillar-pill,
  .list-view .row .read { display: none; }
}
@media (max-width: 900px) {
  .pagehead.writing .head-grid { grid-template-columns: 1fr; gap: 28px; }
  .flag-grid { grid-template-columns: 1fr; }
  .flag-art { padding: 40px 28px; min-height: auto; }
  .flag-body { padding: 36px 28px; }
  .flag-card { padding: 0 20px; }
  .toolbar { padding: 0 20px; grid-template-columns: 1fr; gap: 8px; }
  .filter-bar { padding: 14px 20px; gap: 12px; }
  .result-meta { padding: 16px 20px 0; }
  .archive { padding: 0 20px; }
  .pagination { padding: 0 20px; }
  .newsletter-cta-inner { padding: 0 20px; grid-template-columns: 1fr; gap: 40px; }
  .dash-strip-inner { padding: 0 20px; }
}
@media (max-width: 640px) {
  .pagehead.writing { padding: 44px 0 28px; }
  .featured-flag { padding: 28px 0 8px; }
  .flag-art .glyph { font-size: 72px; }
  .flag-art .stamp { gap: 16px; }
  .grid-view { grid-template-columns: 1fr; }
  .dash-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .dash-cell:nth-child(odd) { border-left: 0; }
  .dash-cell:nth-child(2n+1) { border-left: 0; }
  .dash-cell .val { font-size: 26px; }
  .pagination { flex-direction: column; align-items: flex-start; gap: 12px; }
  .toolbar-wrap { position: static; padding: 28px 0 8px; }
  .filter-group .glabel { display: none; }
  .signup { flex-wrap: wrap; }
  .signup input { width: 100%; }
  .signup button { width: 100%; padding: 12px; }
  .list-view .row {
    grid-template-columns: 1fr 28px;
    grid-template-areas:
      "num icon"
      "title icon"
      "date icon";
    gap: 6px;
    padding: 18px 18px;
  }
  .list-view .row .num { grid-area: num; }
  .list-view .row > div:nth-child(3) { grid-area: title; }
  .list-view .row .date { grid-area: date; text-align: left; }
  .list-view .row .icon { grid-area: icon; align-self: start; }
}

/* ---------- Newsletter form messages ---------- */
.captcha-attribution a { text-decoration: underline; }
.captcha-attribution a:hover { color: var(--sunrise) !important; }

/* Newsletter "Format" eyebrow on the right column */
.newsletter-cta .format-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--on-ink-muted, rgba(255,255,255,0.55));
  margin-bottom: 16px;
}