/* ============================================================================
   Latent Mail - public page redesign
   Overrides listmonk's default public styles. Loaded after style.css, so plain
   cascade wins. Light, editorial, restrained. One accent, real hierarchy.
   ========================================================================== */

:root {
  --paper:    #f4f1ea;   /* warm off-white ground */
  --card:     #ffffff;
  --ink:      #14151a;   /* near-black, never pure */
  --muted:    #6c6a63;
  --line:     #e6e2d8;
  --accent:   #1b2a4a;   /* deep slate, the single colour */
  --accent-2: #2f4372;
  --radius:   14px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  /* barely-there depth, not a blob: a soft light from top */
  background-image: radial-gradient(1200px 520px at 50% -8%, #fbf9f4 0%, rgba(251,249,244,0) 70%);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 18px 56px;
}

/* kill listmonk's boxy defaults */
.container, .wrap {
  max-width: none; width: auto; margin: 0; padding: 0;
  border: 0; box-shadow: none; background: none;
}

/* ---- header / brand ---- */
.header {
  width: 100%;
  max-width: 520px;
  margin: 40px auto 22px;
  text-align: center;
  padding: 0;
  border: 0;
  background: none;
}
.header .logo { margin: 0; }
.header .logo a { display: inline-block; }
.header .logo img {
  height: 30px; width: auto; max-width: 200px;
  opacity: .92;
  transition: opacity .25s ease, transform .25s ease;
}
.header .logo a:hover img { opacity: 1; transform: translateY(-1px); }

/* ---- the card that holds the form ----
   Only <section> becomes a card. The data-form is a transparent wrapper around its own
   section, so styling only sections avoids a card-inside-a-card. */
section, .section {
  width: 100%;
  max-width: 520px;
  margin: 0 auto 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 34px 30px;
  box-shadow: 0 1px 0 rgba(20,21,26,.02), 0 18px 40px -28px rgba(20,21,26,.28);
  animation: rise .5s cubic-bezier(.2,.7,.2,1) both;
}
.data-form { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* the privacy/data block is a GDPR utility, not the main action: make it visually secondary */
.data-form section {
  background: #faf8f3;
  box-shadow: none;
  padding: 24px 26px 22px;
  animation-delay: .06s;
}
.data-form h2 {
  font-family: var(--sans);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0 0 14px;
}

/* headings */
h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.lists h2 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 24px 0 10px;
}

/* form fields */
.form > div > p, .unsub-form p, .data-form .row { margin: 0 0 16px; }
label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px; font-weight: 500; }
input[type=email], input[type=text] {
  width: 100%;
  font: inherit; font-size: 15px;
  padding: 12px 14px;
  color: var(--ink);
  background: #fcfbf8;
  border: 1px solid var(--line);
  border-radius: 9px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input[type=email]:focus, input[type=text]:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(47,67,114,.12);
}
input::placeholder { color: #b6b1a5; }

/* lists as clean rows */
.lists { list-style: none; margin: 4px 0 20px; padding: 0; }
.lists li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 12px; margin: 0 0 8px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fcfbf8;
  transition: border-color .18s ease, background .18s ease;
}
.lists li:hover { border-color: #d8d3c6; background: #fff; }
.lists li input[type=checkbox] {
  margin: 3px 0 0; width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto;
}
.lists li label { margin: 0; color: var(--ink); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.lists .description { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; font-weight: 400; }

/* the unsubscribe blocklist checkbox row */
.unsub-form input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); margin-right: 8px; vertical-align: -2px; }
.unsub-form label { display: inline; font-size: 14px; color: var(--ink); }

/* privacy/data radios */
.data-form .row {
  border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; background: #fcfbf8;
  font-size: 13px; color: var(--muted);
}
.data-form .row label { display: inline; }
.data-form .row strong { color: var(--ink); font-size: 14.5px; }
.data-form input[type=radio] { accent-color: var(--accent); margin-right: 8px; vertical-align: -2px; }

/* buttons */
.button, button[type=submit], input[type=submit] {
  -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 15px; font-weight: 600;
  color: #fff; background: var(--accent);
  border: 1px solid var(--accent); border-radius: 10px;
  padding: 12px 22px; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  box-shadow: 0 10px 22px -14px rgba(27,42,74,.7);
}
.button:hover, button[type=submit]:hover, input[type=submit]:hover {
  background: var(--accent-2); transform: translateY(-1px);
  box-shadow: 0 16px 30px -16px rgba(27,42,74,.75);
}
.button.button-outline, input.button-outline {
  background: transparent; color: var(--accent); box-shadow: none;
}
.button.button-outline:hover { background: rgba(27,42,74,.06); color: var(--accent); }

/* secondary links */
.right, .unsub-form a, section a:not(.button) {
  font-size: 13.5px;
}
.right { margin-top: 12px; }
a { color: var(--accent-2); text-decoration: none; }
a:not(.logo a):not(.button) { background-image: linear-gradient(var(--accent-2), var(--accent-2)); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .22s ease; padding-bottom: 1px; }
a:not(.logo a):not(.button):hover { background-size: 100% 1px; }

/* the "Manage preferences" and archive links sit apart */
.unsub-form > div > a[href*="manage"] { display: inline-block; margin-top: 14px; color: var(--muted); }

/* ---- footer: subtle Latent Mail credit ---- */
footer.container {
  width: 100%; max-width: 520px; margin: 8px auto 0;
  text-align: center; font-size: 12.5px; color: var(--muted);
  background: none; border: 0; padding: 10px 0 0;
}
.lm-credit { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.lm-credit img { height: 13px; width: auto; opacity: .55; transition: opacity .2s ease; }
.lm-credit:hover img { opacity: .85; }
.lm-credit b { font-weight: 600; color: #57544c; }
.lm-tag { display: block; margin-top: 4px; font-size: 11.5px; color: #9a968b; letter-spacing: .02em; }

/* ---- unsubscribe sign-off: a tasteful platform pitch to the reader ---- */
.lm-pitch {
  display: block; width: 100%; max-width: 520px; margin: 6px auto 0;
  padding: 22px 26px 20px; text-decoration: none;
  background: linear-gradient(180deg, #fbfaf6, #f7f4ec);
  border: 1px solid var(--line); border-radius: var(--radius);
  position: relative; overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.lm-pitch:hover {
  transform: translateY(-2px);
  border-color: #d8d3c6;
  box-shadow: 0 16px 34px -24px rgba(20,21,26,.4);
}
/* a single quiet mark, not a row of icons: a faint outgoing-arc in the corner */
.lm-pitch::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 120px; height: 120px; border-radius: 50%;
  border: 1.5px solid rgba(27,42,74,.10);
  box-shadow: 0 0 0 14px rgba(27,42,74,.035);
}
.lm-pitch__eyebrowless {
  display: block; font-family: var(--serif); font-size: 18px; line-height: 1.25;
  color: var(--ink); font-weight: 600; letter-spacing: -.005em; margin: 0 0 6px;
  position: relative; z-index: 1; max-width: 32ch;
}
.lm-pitch__body {
  display: block; font-size: 13.5px; line-height: 1.55; color: var(--muted);
  position: relative; z-index: 1; max-width: 42ch;
}
.lm-pitch__cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 13.5px; font-weight: 600; color: var(--accent-2);
  position: relative; z-index: 1;
}
.lm-pitch__cta i {
  width: 14px; height: 8px; display: inline-block; position: relative;
  transition: transform .22s ease;
}
.lm-pitch__cta i::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 12px; height: 1.5px;
  background: var(--accent-2);
}
.lm-pitch__cta i::after {
  content: ""; position: absolute; right: 0; top: 0; width: 7px; height: 7px;
  border-top: 1.5px solid var(--accent-2); border-right: 1.5px solid var(--accent-2);
  transform: rotate(45deg);
}
.lm-pitch:hover .lm-pitch__cta i { transform: translateX(4px); }

/* ---- unsubscribe: two-column on desktop, single column on mobile ---- */
.page-unsub .lm-grid {
  display: grid;
  grid-template-columns: 1fr;      /* mobile: one column, same narrow feel as before */
  gap: 18px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.page-unsub .lm-col-right { display: grid; gap: 18px; align-content: start; }
/* inside the grid, cards fill their column instead of the fixed 520 centre */
.page-unsub .lm-grid section,
.page-unsub .lm-grid .data-form,
.page-unsub .lm-grid .data-form section,
.page-unsub .lm-grid .lm-pitch {
  max-width: none; width: auto; margin: 0;
}
@media (min-width: 900px) {
  .page-unsub .lm-grid {
    grid-template-columns: 1.08fr 0.92fr;   /* primary a touch wider */
    gap: 26px;
    max-width: 960px;
    align-items: start;
  }
  .page-unsub .lm-col-left, .page-unsub .lm-col-right { min-width: 0; }
  /* the primary card gets a little more presence on desktop */
  .page-unsub .lm-col-left > section { padding: 40px 38px 34px; }
  .page-unsub .lm-col-left h2 { font-size: 34px; }
}

/* =====================================================================
   unsubscribe page: a further 100x lift (visual + dynamic + interactive)
   scoped entirely to .page-unsub. light theme, no slop.
   ===================================================================== */

/* THE SIGNAL: a living slate signal-wave in its own band under the intro copy.
   It flows and reacts to the cursor, and calms to a flat line as the visitor moves
   to unsubscribe. Latent Media is "slate signal"; leaving quiets the transmission. */
.page-unsub .lm-col-left > section { position: relative; }
.page-unsub .signal-band {
  position: relative;
  height: 66px;
  margin: 10px 0 22px;
}
.page-unsub .signal-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; display: block;
}
.page-unsub .lm-col-left > section > h2 {
  letter-spacing: -.02em;
  line-height: 1.02;
}

/* the button states what it will actually do: JS rewrites the label when
   "all future e-mails" is chosen. clarity, not friction: always one tap.
   the checkbox box already carries the explanatory helper, so no extra note. */
.page-unsub .unsub-form .button {
  transition: background-color .2s ease, transform .16s ease, box-shadow .2s ease;
}

/* ============================================================
   root marketing landing (mail.latentmedia.com/)
   matched to the latentmedia.com design system
   ============================================================ */
body.page-landing {
  --lm-paper: #F2EDE3; --lm-ink: #161310; --lm-ink2: #4a453d; --lm-ink3: #8b8375;
  --lm-signal: #64748B; --lm-signal-deep: #475569; --lm-line: #DED6C6; --lm-line-strong: #C9BFAC;
  --lm-disp: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lm-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --lm-mono: "Space Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --lm-ease: cubic-bezier(.2,.7,.2,1);
  background: var(--lm-paper);
  background-image: radial-gradient(1200px 620px at 78% -6%, #fbf8f1 0%, rgba(251,248,241,0) 66%);
}
.page-landing .header { margin: 32px auto 0; }
.page-landing footer.container { margin-top: 30px; }

.lm-land { position: relative; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 26px; }
.lm-field { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
.lm-land > *:not(.lm-field) { position: relative; z-index: 1; }

.lm-mono { font-family: var(--lm-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--lm-ink3); }
.lm-mono-signal { color: var(--lm-signal); }

.lm-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; padding: 26px 0 60px; }
.lm-hero-lede { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--lm-ease), transform .7s var(--lm-ease); }
.lm-hero-lede.in { opacity: 1; transform: none; }

.lm-display { font-family: var(--lm-disp); font-weight: 600; color: var(--lm-ink);
  font-size: clamp(2.5rem, 5.2vw, 4.3rem); line-height: 1.0; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.lm-under { position: relative; font-style: normal; display: inline-block; }
.lm-under::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .07em;
  background: var(--lm-signal); transform: scaleX(0); transform-origin: left; transition: transform .8s .25s var(--lm-ease); }
.lm-display.in .lm-under::after, .lm-close.in .lm-under::after { transform: scaleX(1); }

.lm-lead { font-family: var(--lm-sans); font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.62;
  color: var(--lm-ink2); max-width: 46ch; margin: 24px 0 0; }

.lm-ctas { display: flex; align-items: center; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.lm-btn { position: relative; display: inline-flex; align-items: center; overflow: hidden;
  font-family: var(--lm-sans); font-weight: 600; font-size: 15px; letter-spacing: -.01em;
  padding: 14px 24px; border-radius: 2px; background: var(--lm-ink); color: var(--lm-paper);
  transition: color .3s var(--lm-ease), transform .4s var(--lm-ease); }
.lm-btn span { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; }
.lm-btn::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--lm-signal);
  transform: translateY(101%); transition: transform .45s var(--lm-ease); }
.lm-btn:hover::before { transform: translateY(0); }
.lm-btn:hover { color: #fff; transform: translateY(-1px); }
.lm-btn-signal { background: var(--lm-signal); color: #fff; }
.lm-btn-signal::before { background: var(--lm-ink); }
.lm-btn-ghost { background: transparent; color: var(--lm-ink); border: 1px solid var(--lm-line-strong); }
.lm-btn-ghost::before { background: var(--lm-ink); }
.lm-btn-ghost:hover { color: var(--lm-paper); border-color: var(--lm-ink); }
.lm-btn-lg { padding: 16px 30px; font-size: 16px; }
.lm-arw { transition: transform .35s var(--lm-ease); }
.lm-btn:hover .lm-arw { transform: translate(3px, -3px); }

.lm-stats { display: flex; align-items: flex-end; gap: 40px; margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--lm-line); flex-wrap: wrap; }
.lm-stat { display: flex; flex-direction: column; gap: 6px; }
.lm-num { font-family: var(--lm-disp); font-weight: 500; font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: .85; letter-spacing: -.04em; color: var(--lm-signal); font-variant-numeric: tabular-nums; }
.lm-stat-2 .lm-num { color: var(--lm-ink); }
.lm-stat .lm-mono { font-size: 10.5px; }
.lm-scroll { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-family: var(--lm-mono);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--lm-ink3); align-self: center; }
.lm-scroll span { width: 34px; height: 1px; background: var(--lm-line-strong); display: inline-block; }

.lm-fig { position: relative; aspect-ratio: 1 / 1.02; background: #FBF8F1;
  border: 1px solid var(--lm-line); border-radius: 3px; padding: 18px 20px;
  display: flex; flex-direction: column; box-shadow: 0 30px 60px -40px rgba(22,19,16,.4);
  opacity: 0; transform: translateY(16px); transition: opacity .7s .1s var(--lm-ease), transform .7s .1s var(--lm-ease); }
.lm-fig.in { opacity: 1; transform: none; }
.lm-b { position: absolute; width: 12px; height: 12px; border: 1px solid var(--lm-ink3); }
.lm-b-tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.lm-b-tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.lm-b-bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.lm-b-br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.lm-fig-top, .lm-fig-foot { display: flex; justify-content: space-between; align-items: baseline; }
.lm-fig-canvas { flex: 1; width: 100%; min-height: 0; }
.lm-fig-foot { border-top: 1px solid var(--lm-line); padding-top: 10px; margin-top: 6px; }
.lm-fig-cap { font-family: var(--lm-disp); font-size: 15px; color: var(--lm-ink); letter-spacing: -.01em; }

.lm-values { max-width: 760px; margin: 4px auto 0; }
.lm-vhead { display: flex; justify-content: space-between; border-top: 1px solid var(--lm-ink); padding: 12px 0 22px;
  opacity: 0; transform: translateY(10px); transition: opacity .6s var(--lm-ease), transform .6s var(--lm-ease); }
.lm-vhead.in { opacity: 1; transform: none; }
.lm-value { display: flex; gap: 26px; align-items: flex-start; padding: 30px 2px; border-top: 1px solid var(--lm-line);
  opacity: 0; transform: translateY(14px); transition: opacity .6s var(--lm-ease), transform .6s var(--lm-ease); }
.lm-value.in { opacity: 1; transform: none; }
.lm-vn { font-family: var(--lm-mono); font-size: 12px; color: var(--lm-signal); letter-spacing: .1em; padding-top: 6px; min-width: 30px; }
.lm-vbody h3 { font-family: var(--lm-disp); font-weight: 500; font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  color: var(--lm-ink); margin: 0 0 8px; letter-spacing: -.02em; }
.lm-vbody p { font-family: var(--lm-sans); font-size: 15.5px; line-height: 1.6; color: var(--lm-ink2); margin: 0; max-width: 52ch; }

.lm-close { text-align: center; margin: 66px auto 4px; opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--lm-ease), transform .6s var(--lm-ease); }
.lm-close.in { opacity: 1; transform: none; }
.lm-close .lm-display { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 26px; }
.lm-close .lm-btn { margin: 0 auto; }

.lm-login-row { text-align: center; margin: 30px auto 0; }
.lm-login-row a { font-family: var(--lm-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--lm-ink3); }
.lm-login-row a:hover { color: var(--lm-signal); }

@media (max-width: 860px) {
  .lm-hero { grid-template-columns: 1fr; gap: 30px; }
  .lm-fig { max-width: 440px; margin: 0 auto; width: 100%; }
}
@media (max-width: 560px) {
  .lm-value { gap: 16px; padding: 24px 2px; }
  .lm-stats { gap: 26px; }
  .lm-scroll { display: none; }
  .lm-fig-foot { flex-direction: column; align-items: flex-start; gap: 3px; }
  .lm-fig-cap { font-size: 13.5px; }
}

/* graceful empty state for the (now non-public) subscription form */
.page-empty .empty-lead {
  font-size: 15px; line-height: 1.6; color: var(--muted);
  margin: 10px 0 0; max-width: 44ch;
}
.page-empty .empty-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 20px;
  font-size: 14px; font-weight: 600; color: var(--accent-2);
}
.page-empty .empty-cta i {
  width: 14px; height: 8px; display: inline-block; position: relative;
  transition: transform .22s ease;
}
.page-empty .empty-cta i::before { content: ""; position: absolute; left: 0; top: 3px; width: 12px; height: 1.5px; background: var(--accent-2); }
.page-empty .empty-cta i::after { content: ""; position: absolute; right: 0; top: 0; width: 7px; height: 7px; border-top: 1.5px solid var(--accent-2); border-right: 1.5px solid var(--accent-2); transform: rotate(45deg); }
.page-empty .empty-cta:hover i { transform: translateX(4px); }

/* small screens */
@media (max-width: 560px) {
  section, .section { padding: 26px 20px 24px; border-radius: 12px; }
  h2 { font-size: 24px; }
  .header { margin-top: 30px; }
  .lm-pitch { padding: 20px; }
}


/* ============================================================
   SUBSCRIBE PAGE  .page-subscribe
   Final QA build. The e-mail is the hero; the list picker is a
   recessed, tappable panel with a live counter, a progress meter,
   select all / clear, and custom rows. The submit CTA arms when the
   e-mail is valid and a list is chosen. Light theme throughout.
   Every selector is scoped under .page-subscribe. Function preserved.
   ============================================================ */

.page-subscribe{
  --lm-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --lm-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}

/* ---- card title: the dominant note, with a short editorial rule ---- */
.page-subscribe section > h2{
  font-family:var(--lm-serif);
  font-size:clamp(1.9rem,4.5vw,2.4rem);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--ink,#14151a);
  margin:0 0 26px;
}
.page-subscribe section > h2::after{
  content:"";
  display:block;
  width:46px;
  height:2px;
  margin-top:15px;
  border-radius:2px;
  background:var(--accent,#1b2a4a);
  transform-origin:left center;
  transform:scaleX(.55);
  opacity:.55;
  transition:transform .5s cubic-bezier(.2,.8,.3,1), opacity .5s ease;
}
.page-subscribe section:hover > h2::after,
.page-subscribe section:focus-within > h2::after{
  transform:scaleX(1);
  opacity:.9;
}

.page-subscribe .form{ margin-top:2px; }

/* base paragraph rhythm inside the form */
.page-subscribe .form p{
  position:relative;
  margin:0 0 20px;
}

/* ---- field labels (robust to a missing for attribute) ---- */
.page-subscribe .form p:has(#email) > label{
  display:block;
  margin:0 0 9px;
  font-family:var(--lm-sans);
  font-size:.94rem;
  font-weight:600;
  letter-spacing:.005em;
  color:var(--ink,#14151a);
  transition:color .2s ease;
}
.page-subscribe .form p:has(#name) > label{
  display:block;
  margin:0 0 7px;
  font-family:var(--lm-sans);
  font-size:.85rem;
  font-weight:500;
  color:var(--muted,#6c6a63);
}

/* ---- the focal input: e-mail (the hero of the page) ---- */
.page-subscribe #email{
  font-family:var(--lm-sans);
  font-size:1.16rem;
  padding:15px 46px 15px 17px;
  border:1.6px solid var(--line,#e6e2d8);
  border-radius:11px;
  background:#fff;
  color:var(--ink,#14151a);
  caret-color:var(--accent,#1b2a4a);
  box-shadow:0 2px 6px rgba(20,21,26,.05);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.page-subscribe #email:focus{
  outline:none;
  border-color:var(--accent,#1b2a4a);
  box-shadow:0 0 0 4px rgba(27,42,74,.13), 0 10px 24px rgba(27,42,74,.12);
  transform:translateY(-1px);
}

/* secondary input: name (visibly lighter than the e-mail) */
.page-subscribe #name{
  font-family:var(--lm-sans);
  font-size:1rem;
  padding:12px 15px;
  border:1px solid var(--line,#e6e2d8);
  border-radius:10px;
  background:#fbfaf7;
  color:var(--ink,#14151a);
  box-shadow:none;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.page-subscribe #name:focus{
  outline:none;
  border-color:var(--accent-2,#2f4372);
  background:#fff;
  box-shadow:0 0 0 3px rgba(27,42,74,.10);
}

.page-subscribe input::placeholder{ color:#a8a498; }

.page-subscribe .form p:has(#email){ margin-bottom:26px; }
.page-subscribe .form p:has(#email:focus) > label{ color:var(--accent,#1b2a4a); }

/* live valid affordance inside the e-mail field (positioned by JS) */
.page-subscribe .form p:has(#email) > .email-ok{
  position:absolute;
  right:14px;
  z-index:2;
}
.page-subscribe .email-ok{
  width:24px; height:24px;
  border-radius:50%;
  background:var(--accent,#1b2a4a);
  box-shadow:0 3px 9px rgba(27,42,74,.28);
  display:grid;
  place-items:center;
  opacity:0;
  transform:translateY(-50%) scale(.4);
  transition:opacity .24s ease, transform .32s cubic-bezier(.2,.9,.35,1.5);
  pointer-events:none;
}
.page-subscribe .email-ok::after{
  content:"";
  width:6px; height:11px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg) translateY(-1px);
}
.page-subscribe .email-ok.show{
  opacity:1;
  transform:translateY(-50%) scale(1);
}

/* ============================================================
   the list picker: a recessed, considered panel
   ============================================================ */
.page-subscribe .lists{
  position:relative;
  margin:34px 0 10px;
  padding:20px 18px 18px;
  list-style:none;
  background:#faf8f3;
  border:1px solid var(--line,#e6e2d8);
  border-radius:16px;
  box-shadow:inset 0 1px 3px rgba(20,21,26,.05);
}

.page-subscribe .lists > h2{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  font-family:var(--lm-serif);
  font-size:1.16rem;
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--ink,#14151a);
  margin:0 0 11px;
}

/* live selected counter (injected by JS from real checkbox state) */
.page-subscribe .ls-count{
  font-family:var(--lm-sans);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--muted,#6c6a63);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.page-subscribe .ls-count b{
  display:inline-block;
  color:var(--accent-2,#2f4372);
  font-weight:700;
}
@keyframes lsPop{ 0%{transform:scale(1)} 45%{transform:scale(1.22)} 100%{transform:scale(1)} }
.page-subscribe .ls-count.bump b{ animation:lsPop .32s cubic-bezier(.2,.8,.3,1.3); }

/* progress meter + select all / clear, a real toolbar for the module */
.page-subscribe .ls-head{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:0 0 15px;
}
.page-subscribe .ls-progress{
  position:relative;
  height:4px;
  border-radius:99px;
  background:rgba(20,21,26,.08);
  overflow:hidden;
}
.page-subscribe .ls-progress > i{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--ls-progress,0%);
  border-radius:99px;
  background:var(--accent,#1b2a4a);
  transition:width .42s cubic-bezier(.2,.8,.3,1);
}
.page-subscribe .ls-actions{ align-self:flex-end; }
.page-subscribe .ls-selectall{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  background:none;
  padding:2px 0;
  cursor:pointer;
  font-family:var(--lm-sans);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--muted,#6c6a63);
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.page-subscribe .ls-selectall:hover{
  color:var(--accent,#1b2a4a);
  border-bottom-color:var(--accent,#1b2a4a);
}
.page-subscribe .ls-selectall:focus-visible{
  outline:none;
  color:var(--accent,#1b2a4a);
  box-shadow:0 0 0 3px rgba(27,42,74,.18);
  border-radius:3px;
}

/* each list is a real, raised, tappable row */
.page-subscribe .lists li{
  display:grid;
  grid-template-columns:22px 1fr;
  column-gap:14px;
  row-gap:5px;
  align-items:center;
  padding:13px 16px;
  margin:0 0 9px;
  background:#fff;
  border:1px solid var(--line,#e6e2d8);
  border-radius:11px;
  box-shadow:0 1px 2px rgba(20,21,26,.045);
  cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.page-subscribe .lists li:last-child{ margin-bottom:0; }
.page-subscribe .lists li:hover{
  border-color:#cfc8b8;
  background:#fff;
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(20,21,26,.09);
}
.page-subscribe .lists li:has(input[name="l"]:checked){
  border-color:rgba(27,42,74,.4);
  background:rgba(27,42,74,.05);
  box-shadow:0 2px 12px rgba(27,42,74,.10);
}
.page-subscribe .lists li:has(input[name="l"]:checked):hover{
  box-shadow:0 7px 20px rgba(27,42,74,.14);
}

.page-subscribe .lists li > input[type="checkbox"]{ grid-column:1; grid-row:1; }
.page-subscribe .lists li > label{ grid-column:2; grid-row:1; }
.page-subscribe .lists li > .description{ grid-column:2; grid-row:2; }

/* custom checkbox with a checkmark that pops in, plus a ripple on select */
.page-subscribe .lists li > input[type="checkbox"]{
  -webkit-appearance:none;
  appearance:none;
  width:20px; height:20px;
  margin:0; padding:0;
  border:1.6px solid #c7c0b0;
  border-radius:6px;
  background:#fff;
  position:relative;
  cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.page-subscribe .lists li:hover > input[type="checkbox"]{ border-color:var(--accent-2,#2f4372); }
.page-subscribe .lists li > input[type="checkbox"]:checked{
  background:var(--accent,#1b2a4a);
  border-color:var(--accent,#1b2a4a);
}
/* state driven ripple: expands once when the row becomes selected */
.page-subscribe .lists li > input[type="checkbox"]::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:20px; height:20px;
  border-radius:7px;
  transform:translate(-50%,-50%) scale(1);
  background:rgba(27,42,74,.30);
  opacity:0;
  pointer-events:none;
}
.page-subscribe .lists li > input[type="checkbox"]:checked::before{
  animation:lsRipple .52s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes lsRipple{
  0%{ opacity:.45; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(2.5); }
}
.page-subscribe .lists li > input[type="checkbox"]::after{
  content:"";
  position:absolute;
  left:6px; top:2.5px;
  width:5px; height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);
  transform-origin:center;
  transition:transform .2s cubic-bezier(.2,.9,.35,1.5);
}
.page-subscribe .lists li > input[type="checkbox"]:checked::after{ transform:rotate(45deg) scale(1); }
.page-subscribe .lists li > input[type="checkbox"]:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(27,42,74,.18);
}

.page-subscribe .lists li > label{
  font-family:var(--lm-sans);
  font-size:.98rem;
  font-weight:500;
  line-height:1.35;
  color:var(--ink,#14151a);
  cursor:pointer;
  user-select:none;
  transition:color .18s ease;
}
.page-subscribe .lists li:has(input[name="l"]:checked) > label{ font-weight:600; }

.page-subscribe .lists li > .description{
  margin:0;
  font-family:var(--lm-sans);
  font-size:.83rem;
  line-height:1.4;
  color:var(--muted,#6c6a63);
}

/* ---- the call to action: coupled to the whole form's state ---- */
.page-subscribe .form p:has(> .button){ margin:18px 0 0; }
.page-subscribe .button{
  position:relative;
  display:block;
  width:100%;
  margin:0;
  padding:16px 30px;
  border:0;
  border-radius:11px;
  cursor:pointer;
  font-family:var(--lm-sans);
  font-size:1.06rem;
  font-weight:600;
  letter-spacing:.012em;
  color:#fff;
  text-align:center;
  background:var(--accent,#1b2a4a);
  box-shadow:0 8px 22px rgba(27,42,74,.24);
  transition:transform .16s ease, box-shadow .2s ease, background-color .2s ease, letter-spacing .2s ease;
}
/* readiness tick: completes the form's checkmark motif when armed */
.page-subscribe .button::before{
  content:"";
  position:absolute;
  left:24px; top:50%;
  width:8px; height:15px;
  border:solid #fff;
  border-width:0 2.5px 2.5px 0;
  opacity:0;
  transform:translateY(-72%) rotate(45deg) scale(.35);
  transform-origin:center;
  transition:opacity .28s ease, transform .34s cubic-bezier(.2,.9,.35,1.5);
  pointer-events:none;
}
.page-subscribe .button.is-ready{
  letter-spacing:.02em;
  background:var(--accent-2,#2f4372);
  box-shadow:0 12px 30px rgba(27,42,74,.30);
  animation:lmReady .5s ease;
}
.page-subscribe .button.is-ready::before{
  opacity:.92;
  transform:translateY(-72%) rotate(45deg) scale(1);
}
@keyframes lmReady{
  0%{ box-shadow:0 8px 22px rgba(27,42,74,.24); }
  45%{ box-shadow:0 16px 36px rgba(27,42,74,.36); }
  100%{ box-shadow:0 12px 30px rgba(27,42,74,.30); }
}
.page-subscribe .button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(27,42,74,.30);
  background:var(--accent-2,#2f4372);
}
.page-subscribe .button:active{
  transform:translateY(0);
  box-shadow:0 5px 14px rgba(27,42,74,.22);
}
.page-subscribe .button:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(27,42,74,.20), 0 10px 26px rgba(27,42,74,.26);
}

/* archive link: quiet, with an underline that draws in */
.page-subscribe .right{ margin:16px 0 0; text-align:center; }
.page-subscribe .right a{
  font-family:var(--lm-sans);
  font-size:.86rem;
  color:var(--muted,#6c6a63);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:color .18s ease, border-color .18s ease;
}
.page-subscribe .right a:hover{
  color:var(--accent,#1b2a4a);
  border-bottom-color:var(--accent,#1b2a4a);
}

/* ---- mobile ---- */
@media (max-width:650px){
  .page-subscribe section > h2{ font-size:clamp(1.7rem,7vw,2rem); margin-bottom:22px; }
  .page-subscribe #email{ font-size:1.1rem; }
  .page-subscribe .lists{ padding:16px 13px 14px; }
  .page-subscribe .lists li{ padding:12px 13px; column-gap:12px; }
  .page-subscribe .button{ padding:15px 24px; }
  .page-subscribe .button::before{ left:20px; }
}

/* ---- respect reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .page-subscribe *,
  .page-subscribe *::before,
  .page-subscribe *::after{
    transition:none !important;
    animation:none !important;
  }
  .page-subscribe .button:hover,
  .page-subscribe .lists li:hover,
  .page-subscribe #email:focus{ transform:none !important; }
  .page-subscribe .email-ok.show{ transform:translateY(-50%) scale(1) !important; }
  .page-subscribe section > h2::after{ transform:scaleX(1) !important; opacity:.85 !important; }
  .page-subscribe .button.is-ready::before{
    opacity:.9 !important;
    transform:translateY(-72%) rotate(45deg) scale(1) !important;
  }
}

/* ============================================================
   UNSUBSCRIBE  (.page-unsub)  pass 3 of 3
   All scoped under .page-unsub. Composes with the shell.
   ============================================================ */

.page-unsub {
  --u-accent:  var(--accent, #1b2a4a);
  --u-accent2: var(--accent-2, #2f4372);
  --u-ink:     var(--ink, #14151a);
  --u-muted:   var(--muted, #6c6a63);
  --u-line:    var(--line, #e6e2d8);
  --u-paper:   var(--paper, #f4f1ea);
  --u-card:    var(--card, #ffffff);
  --u-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

.page-unsub .section > h2,
.page-unsub section:has(> .unsub-form) > h2 {
  font-family: var(--u-serif);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.95rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--u-ink);
  margin: 0 0 0.55rem;
}

.page-unsub section:has(> .unsub-form) > p,
.page-unsub .unsub-form > p:not(:has(input)):not(:has(button)):not(:has(a)) {
  font-size: clamp(1.02rem, 2.4vw, 1.18rem);
  line-height: 1.5;
  color: var(--u-muted);
  max-width: 38ch;
  margin: 0 0 1.7rem;
}

.page-unsub .unsub-form { position: relative; }

.page-unsub .u-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 1.5rem;
  padding: 15px 18px;
  border: 1px solid var(--u-line);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #fdfbf7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(20, 21, 26, 0.04),
    0 12px 26px -20px rgba(27, 42, 74, 0.3);
  transition: border-color 0.25s, background 0.35s, box-shadow 0.35s, transform 0.2s;
}
.page-unsub .u-choice:hover {
  border-color: #d9d3c6;
  background: linear-gradient(180deg, #ffffff, #faf7f1);
}
.page-unsub .u-choice:has(#privacy-blocklist:focus-visible) {
  border-color: var(--u-accent);
}
.page-unsub .u-choice:has(#privacy-blocklist:checked),
.page-unsub .unsub-form.is-full .u-choice {
  border-color: var(--u-accent);
  background: color-mix(in srgb, var(--u-accent) 4%, #ffffff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 4px rgba(20, 21, 26, 0.05),
    0 16px 30px -18px rgba(27, 42, 74, 0.5);
}

.page-unsub #privacy-blocklist {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 1.5px solid var(--u-line);
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(20, 21, 26, 0.05);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.page-unsub #privacy-blocklist:hover { border-color: var(--u-accent); }
.page-unsub #privacy-blocklist:focus { border-color: var(--u-accent); }
.page-unsub #privacy-blocklist:focus-visible {
  outline: 2px solid var(--u-accent2);
  outline-offset: 2px;
}
.page-unsub #privacy-blocklist::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.5L19 7'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.5L19 7'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.5), opacity 0.18s ease;
}
.page-unsub #privacy-blocklist:checked {
  border-color: var(--u-accent);
  background-color: var(--u-accent);
  animation: u-check-pop 0.28s ease;
}
.page-unsub #privacy-blocklist:checked::after { transform: scale(1); opacity: 1; }
@keyframes u-check-pop {
  0%   { transform: scale(1); }
  42%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}

.page-unsub .u-choice label[for="privacy-blocklist"] {
  flex: 1 1 auto;
  font-weight: 600;
  color: var(--u-ink);
  line-height: 1.35;
  cursor: pointer;
}
.page-unsub .u-choice label[for="privacy-blocklist"]::after {
  content: "This unsubscribes you from this list only.";
  display: block;
  margin-top: 7px;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--u-muted);
  transition: color 0.35s ease;
}
.page-unsub .u-choice:has(#privacy-blocklist:checked) label[for="privacy-blocklist"]::after,
.page-unsub .unsub-form.is-full .u-choice label[for="privacy-blocklist"]::after {
  content: "This removes you from every future email.";
  color: var(--u-accent);
  font-weight: 500;
}

.page-unsub #btn-unsub {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  overflow: hidden;
  margin-top: 2px;
  background: linear-gradient(180deg, var(--u-accent2), var(--u-accent));
  color: #fff;
  border: 0;
  border-radius: 9px;
  padding: 15px 34px;
  min-width: 180px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(20, 21, 26, 0.18),
    0 10px 24px -14px rgba(27, 42, 74, 0.7);
  transition: filter 0.2s, box-shadow 0.3s, transform 0.12s;
}
.page-unsub #btn-unsub::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(130px 130px at var(--bx, 50%) var(--by, -30%),
              rgba(255, 255, 255, 0.34), transparent 60%);
  opacity: 0;
  mix-blend-mode: soft-light;
  transition: opacity 0.35s ease;
}
.page-unsub #btn-unsub:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 4px rgba(20, 21, 26, 0.2),
    0 16px 32px -14px rgba(27, 42, 74, 0.85);
}
.page-unsub #btn-unsub:hover::after { opacity: 1; }
.page-unsub #btn-unsub:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(20, 21, 26, 0.2);
}
.page-unsub #btn-unsub:focus-visible {
  outline: 2px solid var(--u-accent2);
  outline-offset: 3px;
}
.page-unsub .unsub-form.is-full #btn-unsub,
.page-unsub .unsub-form:has(#privacy-blocklist:checked) #btn-unsub {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 5px rgba(20, 21, 26, 0.22),
    0 18px 36px -14px rgba(27, 42, 74, 0.9);
}

.page-unsub .unsub-form a[href="?manage=true"] {
  display: inline-block;
  margin-top: 22px;
  color: var(--u-accent2);
  font-weight: 500;
  text-decoration: none;
  background-image: linear-gradient(var(--u-accent2), var(--u-accent2));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s ease, color 0.2s, font-weight 0.2s;
}
.page-unsub .unsub-form a[href="?manage=true"]::after {
  content: "\203A";
  display: inline-block;
  margin-left: 6px;
  font-weight: 600;
  transition: transform 0.25s ease;
}
.page-unsub .unsub-form a[href="?manage=true"]:hover,
.page-unsub .unsub-form a[href="?manage=true"]:focus-visible {
  color: var(--u-accent);
  background-size: 100% 1.5px;
}
.page-unsub .unsub-form a[href="?manage=true"]:hover::after,
.page-unsub .unsub-form a[href="?manage=true"]:focus-visible::after {
  transform: translateX(4px);
}
.page-unsub .unsub-form.is-full a[href="?manage=true"],
.page-unsub .unsub-form:has(#privacy-blocklist:checked) a[href="?manage=true"] {
  color: var(--u-accent);
  font-weight: 600;
  background-size: 34% 1.5px;
}

.page-unsub .u-manage-note {
  display: block;
  max-width: 34ch;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--u-muted);
  transition: max-height 0.4s ease, opacity 0.35s ease,
              transform 0.4s ease, margin 0.4s ease;
}
.page-unsub .unsub-form a[href="?manage=true"]:hover + .u-manage-note,
.page-unsub .unsub-form a[href="?manage=true"]:focus-visible + .u-manage-note,
.page-unsub .u-manage-note:hover {
  max-height: 4em;
  opacity: 1;
  transform: translateY(0);
  margin-top: 10px;
}

.page-unsub .data-form { position: relative; display: block; }
.page-unsub .data-form::before {
  content: "";
  display: block;
  height: 1px;
  width: min(280px, 58%);
  margin: 30px auto 34px;
  background: linear-gradient(90deg, transparent, var(--u-line) 22%,
              var(--u-line) 78%, transparent);
}

.page-unsub .data-form section {
  margin-top: 0;
  padding: 28px 26px;
  background-color: #f6f3ec;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  background-blend-mode: soft-light;
  border: 1px solid var(--u-line);
  border-radius: 16px;
  box-shadow: inset 0 1px 3px rgba(20, 21, 26, 0.05);
}
.page-unsub .data-form h2 {
  font-family: var(--u-serif);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--u-ink);
  margin: 0 0 0.35rem;
}
.page-unsub .data-form h2::after {
  content: "Optional. Export a copy of your data, or remove it entirely.";
  display: block;
  margin-top: 4px;
  font-family: inherit;
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--u-muted);
}
.page-unsub .data-form h2 { margin-bottom: 1.1rem; }

.page-unsub .data-form .row {
  position: relative;
  margin: 0 0 12px;
  padding: 15px 16px 15px 48px;
  border: 1px solid var(--u-line);
  border-radius: 12px;
  background: var(--u-card);
  color: var(--u-muted);
  font-size: 0.9rem;
  line-height: 1.45;
  transition: border-color 0.22s, background 0.25s, box-shadow 0.25s,
              opacity 0.3s ease, transform 0.22s ease;
}
.page-unsub .data-form .row:hover {
  background: #fbf9f4;
  border-color: #d9d3c6;
}
.page-unsub .data-form .row:has(input:focus-visible) { border-color: var(--u-accent); }
.page-unsub .data-form .row.is-selected,
.page-unsub .data-form .row:has(input:checked) {
  border-color: var(--u-accent);
  background: var(--u-card);
  box-shadow: 0 8px 20px -12px rgba(27, 42, 74, 0.55);
  transform: translateY(-1px);
}
.page-unsub .data-form.has-choice .row:not(.is-selected),
.page-unsub .data-form section:has(input[name="data-action"]:checked) .row:not(:has(input:checked)) {
  opacity: 0.6;
}
.page-unsub .data-form.has-choice .row:not(.is-selected):hover,
.page-unsub .data-form section:has(input[name="data-action"]:checked) .row:not(:has(input:checked)):hover {
  opacity: 1;
}
.page-unsub .data-form .row label {
  font-size: 1rem;
  color: var(--u-ink);
}
.page-unsub .data-form .row label strong { font-weight: 600; }

.page-unsub .data-form input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 16px;
  top: 17px;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--u-line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.page-unsub .data-form input[type="radio"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--u-accent);
  transform: scale(0);
  transition: transform 0.24s cubic-bezier(0.2, 0.85, 0.3, 1.45);
}
.page-unsub .data-form input[type="radio"]:hover { border-color: var(--u-accent); }
.page-unsub .data-form input[type="radio"]:focus { border-color: var(--u-accent); }
.page-unsub .data-form input[type="radio"]:focus-visible {
  outline: 2px solid var(--u-accent2);
  outline-offset: 2px;
}
.page-unsub .data-form input[type="radio"]:checked { border-color: var(--u-accent); }
.page-unsub .data-form input[type="radio"]:checked::after { transform: scale(1); }

.page-unsub .data-form .button {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  margin-top: 6px;
  padding: 12px 26px;
  border: 1.5px solid var(--u-accent);
  border-radius: 8px;
  background: transparent;
  color: var(--u-accent);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.25s, transform 0.12s;
}
.page-unsub .data-form .button:hover,
.page-unsub .data-form.has-choice .button,
.page-unsub .data-form section:has(input[name="data-action"]:checked) .button {
  background: var(--u-accent);
  color: #fff;
  box-shadow: 0 8px 20px -12px rgba(27, 42, 74, 0.6);
}
.page-unsub .data-form .button:active { transform: translateY(1px); }
.page-unsub .data-form .button:focus-visible {
  outline: 2px solid var(--u-accent2);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .page-unsub .section > h2,
  .page-unsub section:has(> .unsub-form) > h2 { font-size: 2rem; }
  .page-unsub #btn-unsub { width: 100%; }
  .page-unsub .u-manage-note { max-width: none; }
  .page-unsub .data-form section { padding: 22px 18px; }
  .page-unsub .data-form .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .page-unsub *,
  .page-unsub *::before,
  .page-unsub *::after { transition: none !important; animation: none !important; }
  .page-unsub #btn-unsub::after { display: none; }
  .page-unsub #privacy-blocklist:checked::after { transform: scale(1); opacity: 1; }
  .page-unsub .data-form input[type="radio"]:checked::after { transform: scale(1); }
}

/* ============================================================
   OPT-IN CONFIRMATION  (.page-optin)  pass 3, QA-cleaned
   Same content, same warm light theme. Every selector scoped
   under .page-optin; keyframes namespaced optin* so nothing
   leaks. No em/en dashes. JS-independent (works without JS).
   ============================================================ */

.page-optin section{
  /* local aliases resolve against the shared shell, with safe fallbacks */
  --ink-c:    var(--ink,    #14151a);
  --muted-c:  var(--muted,  #6c6a63);
  --line-c:   var(--line,   #e6e2d8);
  --accent-c: var(--accent, #1b2a4a);
  --accent-2c:var(--accent-2,#2f4372);
  --serif-c:  var(--serif, "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.75rem, 4.5vw, 3rem) clamp(1.5rem, 4vw, 2.9rem) clamp(1.9rem, 4vw, 2.6rem);
}

/* Concentric postmark stamped into the top right corner.
   Thin ring strokes at low alpha read as texture, not a blob.
   Drifts a few pixels toward the pointer (set by JS). */
.page-optin section::before{
  content:"";
  position:absolute;
  z-index:0;
  top:-150px; right:-150px;
  width:440px; height:440px;
  background: repeating-radial-gradient(circle at center,
     transparent 0 27px,
     rgba(27,42,74,0.055) 27px 28px);
  -webkit-mask: radial-gradient(circle at center, #000 0 52%, transparent 74%);
          mask: radial-gradient(circle at center, #000 0 52%, transparent 74%);
  transform: translate(var(--px,0px), var(--py,0px));
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}

/* Second, fainter postmark low in the opposite corner. It drifts
   further and against the first layer, so the two read as depth
   rather than a flat pattern. Still one quiet background motif. */
.page-optin section::after{
  content:"";
  position:absolute;
  z-index:0;
  bottom:-200px; left:-180px;
  width:420px; height:420px;
  background: repeating-radial-gradient(circle at center,
     transparent 0 31px,
     rgba(27,42,74,0.038) 31px 32px);
  -webkit-mask: radial-gradient(circle at center, #000 0 50%, transparent 72%);
          mask: radial-gradient(circle at center, #000 0 50%, transparent 72%);
  transform: translate(var(--px2,0px), var(--py2,0px));
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}

/* keep real content above the texture */
.page-optin section > h2,
.page-optin section > p,
.page-optin section > form{
  position: relative;
  z-index: 1;
}

/* ---- Focal read: the arrival headline ---- */
.page-optin section > h2{
  position: relative;
  font-family: var(--serif-c);
  font-size: clamp(1.95rem, 5vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink-c);
  margin: 0 0 1rem;
  max-width: 16ch;
}

/* Postmark cancellation flourish under the headline. Two soft waves,
   thematically the lines a postmark cancels a stamp with, not a UI
   accent bar. Draws in on load (reduced-motion shows it settled). */
.page-optin section > h2::after{
  content:"";
  position:absolute;
  left:2px;
  top: calc(100% - 0.15rem);
  width: min(56%, 208px);
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14' fill='none' stroke='%232f4372' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 5 q11 -4 22 0 t22 0 t22 0 t22 0 t22 0 t22 0 t22 0 t22 0 t22 0'/%3E%3Cpath d='M2 10 q11 -4 22 0 t22 0 t22 0 t22 0 t22 0 t22 0 t22 0 t22 0 t22 0' stroke-opacity='0.45'/%3E%3C/svg%3E") left center / contain no-repeat;
  opacity: 0.62;
  clip-path: inset(0 0 0 0);
  pointer-events: none;
}

/* ---- Confirm text: short, muted, comfortable measure ---- */
.page-optin section > p{
  color: var(--muted-c);
  font-size: 1.03rem;
  line-height: 1.55;
  max-width: 44ch;
  margin: 0 0 1.7rem;
}

.page-optin .optin-form{ margin: 0; }

/* ---- The lists you are joining, as a tangible receipt panel ---- */
.page-optin .optin-form ul{
  position: relative;
  overflow: hidden;
  list-style: none;
  margin: 0 0 1.9rem;
  padding: 0.35rem 1.15rem 0.5rem;
  display: grid;
  gap: 0;
  /* faint warm panel sitting inside the white card, for layering */
  background: linear-gradient(180deg,
     rgba(255,255,255,0.65),
     rgba(244,241,234,0.60));
  border: 1px solid var(--line-c);
  border-radius: 14px;
  box-shadow:
     inset 0 1px 0 rgba(255,255,255,0.75),
     0 2px 4px -3px rgba(20,25,45,0.30),
     0 16px 34px -24px rgba(20,25,45,0.40);
  transition: box-shadow .3s ease, transform .3s ease;
}

/* real warm paper grain, so the panel is textured rather than flat */
.page-optin .optin-form ul::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events:none;
}

/* soft light that travels the receipt with the cursor (JS sets --lx/--ly).
   Off until the receipt is hovered, so motion always RESPONDS to the user. */
.page-optin .optin-form ul::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: radial-gradient(200px 200px at var(--lx,50%) var(--ly,0%),
     rgba(255,255,255,0.60), rgba(255,255,255,0) 62%);
  opacity: 0;
  mix-blend-mode: soft-light;
  transition: opacity .35s ease;
  pointer-events:none;
}
.page-optin .optin-form ul:hover::after{ opacity: 1; }

/* rows read as line items, separated by hairlines */
.page-optin .optin-form li{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.72rem 0.45rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink-c);
  border-bottom: 1px solid rgba(230,226,216,0.85);
  transition: color .2s ease, transform .2s ease, background-color .2s ease;
}
.page-optin .optin-form li:last-child{ border-bottom: 0; }

/* the confirmation seal: one consistent, meaningful glyph (not an icon row) */
.page-optin .optin-form li::before{
  content:"";
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background:
     rgba(27,42,74,0.10)
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2a4a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.4L19 7'/%3E%3C/svg%3E")
     center / 15px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(27,42,74,0.18);
  transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.page-optin .optin-form li:hover{
  color: var(--accent-2c);
  transform: translateX(3px);
  background-color: rgba(27,42,74,0.035);
}
.page-optin .optin-form li:hover::before{
  background-color: rgba(27,42,74,0.16);
  box-shadow: inset 0 0 0 1px rgba(27,42,74,0.30);
  transform: scale(1.06);
}

/* when the action is focused OR armed by a hover of the confirm button,
   the receipt settles as one object and the seals brighten together. */
.page-optin .optin-form:focus-within ul,
.page-optin .optin-form.is-armed ul{
  box-shadow:
     inset 0 1px 0 rgba(255,255,255,0.85),
     0 3px 6px -3px rgba(20,25,45,0.34),
     0 20px 40px -22px rgba(20,25,45,0.46);
  transform: translateY(-2px);
}
.page-optin .optin-form.is-armed li::before{
  background-color: rgba(27,42,74,0.16);
  box-shadow: inset 0 0 0 1px rgba(27,42,74,0.30);
}

/* ---- The single focal action ---- */
.page-optin .optin-form > p{
  margin: 0;
  text-align: left;
}
.page-optin #btn-unsub{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: inherit;
  font-size: 1.06rem;
  font-weight: 650;
  letter-spacing: 0.005em;
  color: #fff;
  padding: 1rem 2rem 1rem 1.55rem;
  border-radius: 13px;
  /* cursor sheen (white, subtle) layered over a single-hue tonal slate */
  background:
     radial-gradient(140px 140px at var(--mx,50%) var(--my,50%),
        rgba(255,255,255,0.20), transparent 62%),
     linear-gradient(180deg, var(--accent-2c), var(--accent-c));
  box-shadow:
     inset 0 1px 0 rgba(255,255,255,0.14),
     0 12px 26px -14px rgba(20,25,45,0.65),
     0 3px 8px -3px rgba(20,25,45,0.38);
  transform: translate(var(--btx,0px), var(--bty,0px));
  transition: box-shadow .25s ease, transform .12s ease, filter .2s ease;
  will-change: transform;
}

/* light sweep across the button face on hover.
   Painted above the base gradient, below the label and stamp. */
.page-optin #btn-unsub::after{
  content:"";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(105deg,
     transparent 32%,
     rgba(255,255,255,0.22) 48%,
     transparent 64%);
  transform: translateX(-120%);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.page-optin #btn-unsub:hover::after{ transform: translateX(120%); }

/* leading confirm stamp inside the button (fills on submit) */
.page-optin #btn-unsub::before{
  content:"";
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  background:
     rgba(255,255,255,0.08)
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.4L19 7'/%3E%3C/svg%3E")
     center / 13px no-repeat;
  transition: background-color .25s ease, border-color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.page-optin #btn-unsub:hover{
  box-shadow:
     inset 0 1px 0 rgba(255,255,255,0.2),
     0 18px 34px -14px rgba(20,25,45,0.7),
     0 5px 12px -4px rgba(20,25,45,0.42);
}
.page-optin #btn-unsub:hover::before{
  border-color: rgba(255,255,255,0.92);
  background-color: rgba(255,255,255,0.18);
  transform: scale(1.08) rotate(-6deg);
}
.page-optin #btn-unsub:active{
  transform: translate(var(--btx,0px), calc(var(--bty,0px) + 1px)) scale(.985);
  box-shadow:
     inset 0 1px 0 rgba(255,255,255,0.1),
     0 8px 18px -12px rgba(20,25,45,0.6);
}

/* the satisfying confirm moment on submit: the stamp fills instantly
   (feedback even under reduced motion). Motion layered separately. */
.page-optin #btn-unsub.is-confirming{
  filter: saturate(1.06) brightness(1.02);
}
.page-optin #btn-unsub.is-confirming::before{
  border-color: #fff;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2a4a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.4L19 7'/%3E%3C/svg%3E");
  transform: scale(1.14);
}
.page-optin #btn-unsub:focus-visible{
  outline: 3px solid rgba(27,42,74,0.35);
  outline-offset: 3px;
}

/* ---- Short, coordinated arrival (welcome moment) ---- */
@media (prefers-reduced-motion: no-preference){
  .page-optin section > h2{ animation: optinRise .5s .02s both cubic-bezier(.2,.7,.2,1); }
  .page-optin section > h2::after{ animation: optinDraw .7s .42s both cubic-bezier(.2,.7,.2,1); }
  .page-optin section > p { animation: optinRise .5s .09s both cubic-bezier(.2,.7,.2,1); }
  /* backwards (not both): the entrance still plays, but the final
     transform is NOT held afterward, so the .is-armed / :focus-within
     receipt lift is not clobbered by a filling animation. */
  .page-optin .optin-form ul{ animation: optinRise .55s .14s backwards cubic-bezier(.2,.7,.2,1); }
  .page-optin .optin-form li{ animation: optinFade .45s .22s both ease; }
  .page-optin .optin-form li:nth-child(2){ animation-delay: .27s; }
  .page-optin .optin-form li:nth-child(3){ animation-delay: .32s; }
  .page-optin .optin-form li:nth-child(n+4){ animation-delay: .37s; }
  /* backwards (not both) so :hover scale on the seal keeps working */
  .page-optin .optin-form li::before{ animation: optinSeal .55s .26s backwards cubic-bezier(.2,.8,.25,1); }
  .page-optin .optin-form li:nth-child(2)::before{ animation-delay: .34s; }
  .page-optin .optin-form li:nth-child(3)::before{ animation-delay: .42s; }
  .page-optin .optin-form li:nth-child(n+4)::before{ animation-delay: .48s; }
  .page-optin .optin-form > p{ animation: optinRise .55s .38s both cubic-bezier(.2,.7,.2,1); }

  /* the stamp landing: a single expanding seal ring plus one settle */
  .page-optin #btn-unsub.is-confirming{
    animation: optinPop .34s ease both, optinStampRing .58s cubic-bezier(.2,.7,.2,1) both;
  }
}
@keyframes optinRise{
  from{ opacity: 0; transform: translateY(10px); }
  to  { opacity: 1; transform: none; }
}
@keyframes optinFade{
  from{ opacity: 0; }
  to  { opacity: 1; }
}
@keyframes optinDraw{
  from{ opacity: 0; clip-path: inset(0 100% 0 0); }
  to  { opacity: 0.62; clip-path: inset(0 0 0 0); }
}
@keyframes optinSeal{
  0%  { opacity: 0; transform: scale(0) rotate(-22deg); }
  60% { opacity: 1; transform: scale(1.12) rotate(4deg); }
  100%{ opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes optinPop{
  0%  { transform: scale(1); }
  42% { transform: scale(.965); }
  100%{ transform: scale(1); }
}
@keyframes optinStampRing{
  0%{
    box-shadow:
       inset 0 1px 0 rgba(255,255,255,0.2),
       0 18px 34px -14px rgba(20,25,45,0.7),
       0 5px 12px -4px rgba(20,25,45,0.42),
       0 0 0 0 rgba(27,42,74,0.42);
  }
  100%{
    box-shadow:
       inset 0 1px 0 rgba(255,255,255,0.2),
       0 18px 34px -14px rgba(20,25,45,0.7),
       0 5px 12px -4px rgba(20,25,45,0.42),
       0 0 0 22px rgba(27,42,74,0);
  }
}

/* ---- Mobile: keep the focal action comfortable ---- */
@media (max-width: 480px){
  .page-optin #btn-unsub{
    width: 100%;
    justify-content: center;
    padding: 1rem 1.25rem;
  }
  .page-optin section > h2{ max-width: none; }
  .page-optin .optin-form ul{ padding: 0.35rem 0.9rem 0.5rem; }
}

/* ===================== Newsletter archive : .page-archive (PASS 2) ===================== */
/* Builds on pass 1's editorial issue index. New in pass 2:                              */
/*  - the latest issue becomes a real focal PANEL (depth, soft shadow, oversized serif   */
/*    numeral, a tint that tracks the cursor) instead of just a larger first row.         */
/*  - a genuine client-side FILTER: type to narrow the index, live count, graceful        */
/*    "no match" state, "/" to focus, Escape to clear. The one thing the user can DO.      */
/*  - state transitions animate: the focal panel morphs back to a plain ledger row while   */
/*    searching, the count bumps as it changes, the search underline draws on focus.       */
/* Light theme kept. One accent (slate) only. Pass 1's spotlight + empty state retained.   */

.page-archive {
  --arc-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --arc-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Self-contained light-theme tokens so the component never renders with invalid   */
  /* colours if an earlier pass's globals are absent. Values match the slate accent   */
  /* and warm paper this component already hardcodes in its tints and search icon.    */
  --ink: #14151a;
  --muted: #6c6a63;
  --line: #e6e2d8;
  --accent: #1b2a4a;
  --accent-2: #3a5c9a;
}

/* ---- Masthead heading ---- */
.page-archive section > h2 {
  font-family: var(--arc-serif);
  font-weight: 600;
  font-size: clamp(1.85rem, 1.15rem + 2.7vw, 2.7rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 0.1rem;
  max-width: 20ch;
}

/* ---- Header row : meta on the left, filter on the right (asymmetric) ---- */
.page-archive .archive-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.9rem 1.5rem;
  margin-top: 0.6rem;
}

/* meta line : real data (count + year span) */
.page-archive .archive-meta {
  margin: 0;
  font-family: var(--arc-sans);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.page-archive .archive-meta strong {
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-right: 0.35em;
  display: inline-block;
}
.page-archive .archive-meta .dot {
  color: var(--line);
  margin: 0 0.6em;
  font-size: 1.1em;
  line-height: 1;
}
/* count bump : replays whenever the number changes */
.page-archive .archive-meta.is-bumped strong {
  animation: arc-bump 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes arc-bump {
  0% { opacity: 0; transform: translateY(0.4rem); }
  100% { opacity: 1; transform: none; }
}

/* ---- Filter : a slim editorial search with a drawn underline ---- */
.page-archive .archive-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.page-archive .archive-search {
  font-family: var(--arc-sans);
  font-size: 0.9rem;
  color: var(--ink);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0.42rem 1.5rem 0.42rem 1.55rem;
  width: 15rem;
  max-width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236c6a63'%20stroke-width='2'%20stroke-linecap='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cline%20x1='20.5'%20y1='20.5'%20x2='16.5'%20y2='16.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 15px 15px;
  transition: border-color 0.3s ease;
}
.page-archive .archive-search::placeholder { color: var(--muted); }
.page-archive .archive-search:focus { outline: none; border-bottom-color: var(--muted); }
/* drawn accent underline on focus, echoing the link motif */
.page-archive .archive-search-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.page-archive .archive-search-wrap:focus-within::after { transform: scaleX(1); }

/* clear control : a real removable action, shown only when there is a query */
.page-archive .archive-clear {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.page-archive .archive-search-wrap.has-value .archive-clear {
  opacity: 1;
  pointer-events: auto;
}
.page-archive .archive-clear:hover,
.page-archive .archive-clear:focus-visible { color: var(--accent); outline: none; }

/* ---- The index list ---- */
.page-archive .archive {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
  counter-reset: issue;
  position: relative;
  --mx: 50%;
  --my: -220px;
}
.page-archive .archive:empty { display: none; }
.page-archive.is-empty .archive { display: none; }
.page-archive.is-noresults ul.archive { display: none; }

/* cursor reading spotlight : subtle, light, only while the pointer is over the list */
.page-archive .archive::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: radial-gradient(200px circle at var(--mx) var(--my),
              rgba(27, 42, 74, 0.05), rgba(27, 42, 74, 0) 72%);
}
.page-archive .archive.is-live::before { opacity: 1; }

/* rows */
.page-archive .archive li {
  counter-increment: issue;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1.15rem;
  padding: 1rem 1.9rem 1rem 0.15rem;
  border-top: 1px solid var(--line);
  transition: padding 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              background-color 0.3s ease,
              box-shadow 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-radius 0.4s ease,
              border-color 0.3s ease,
              transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.page-archive .archive li:last-child { border-bottom: 1px solid var(--line); }
.page-archive .archive li.is-miss { display: none; }

/* index numeral (01, 02 ...) : fixed by data-num, counter as no-JS fallback */
.page-archive .archive li::before {
  content: counter(issue, decimal-leading-zero);
  font-family: var(--arc-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  opacity: 0.6;
  transition: color 0.3s ease, opacity 0.3s ease, font-size 0.4s ease;
}
.page-archive .archive li[data-num]::before { content: attr(data-num); }

/* subject link : the dominant type */
.page-archive .archive li a {
  grid-column: 2;
  font-family: var(--arc-serif);
  font-size: 1.12rem;
  line-height: 1.28;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              color 0.3s ease, font-size 0.4s ease;
}

/* date : muted meta */
.page-archive .archive li .date {
  grid-column: 3;
  font-family: var(--arc-sans);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 0.3s ease;
}

/* reading affordance : one arrow, revealed on intent only */
.page-archive .archive li::after {
  content: "\2192";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translate(8px, -50%);
  font-family: var(--arc-sans);
  font-size: 0.95rem;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* hover / focus state : responds on every channel */
.page-archive .archive li:hover,
.page-archive .archive li:focus-within {
  background-color: rgba(27, 42, 74, 0.035);
  padding-left: 0.55rem;
}
.page-archive .archive li:hover a,
.page-archive .archive li:focus-within a {
  background-size: 100% 1px;
  color: var(--accent);
}
.page-archive .archive li:hover::before,
.page-archive .archive li:focus-within::before {
  color: var(--accent);
  opacity: 1;
}
.page-archive .archive li:hover .date,
.page-archive .archive li:focus-within .date { color: var(--ink); }
.page-archive .archive li:hover::after,
.page-archive .archive li:focus-within::after {
  opacity: 1;
  transform: translate(0, -50%);
}
.page-archive .archive li a:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============ Featured latest issue : the focal PANEL ============ */
/* Applies to the first row while NOT searching (JS also tags it .is-featured). During a  */
/* search the panel morphs back into a plain ledger row so matches read as equals.        */
.page-archive:not(.is-searching) .archive li:first-child,
.page-archive .archive li.is-featured {
  --fx: 82%;
  --fy: 6%;
  padding: 1.5rem 1.65rem;
  margin-bottom: 0.55rem;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 12px;
  background:
    radial-gradient(260px 210px at var(--fx) var(--fy), rgba(27, 42, 74, 0.09), rgba(27, 42, 74, 0) 68%),
    linear-gradient(178deg, #ffffff, #faf8f2);
  box-shadow: 0 1px 0 rgba(20, 21, 26, 0.03), 0 22px 42px -30px rgba(20, 21, 26, 0.34);
}
.page-archive:not(.is-searching) .archive li:first-child::before,
.page-archive .archive li.is-featured::before {
  font-family: var(--arc-serif);
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
  opacity: 0.85;
}
.page-archive:not(.is-searching) .archive li:first-child a,
.page-archive .archive li.is-featured a {
  font-size: clamp(1.4rem, 1.02rem + 1.45vw, 1.9rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
}
.page-archive:not(.is-searching) .archive li:first-child .date,
.page-archive .archive li.is-featured .date {
  color: var(--ink);
  font-weight: 500;
}
.page-archive:not(.is-searching) .archive li:first-child::after,
.page-archive .archive li.is-featured::after { right: 1.1rem; }

/* focal panel hover : it lifts, deepens, keeps its tint (does not flatten to a row bg) */
.page-archive:not(.is-searching) .archive li:first-child:hover,
.page-archive:not(.is-searching) .archive li:first-child:focus-within,
.page-archive .archive li.is-featured:hover,
.page-archive .archive li.is-featured:focus-within {
  background-color: transparent;
  padding-left: 1.65rem;
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(20, 21, 26, 0.03), 0 30px 54px -30px rgba(20, 21, 26, 0.42);
}

/* ---- No-match state (built by JS) ---- */
.page-archive .archive-noresults { display: none; }
.page-archive.is-noresults .archive-noresults {
  display: block;
  margin-top: 1.4rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--line);
  animation: arc-fade 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes arc-fade {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}
.page-archive .archive-noresults__msg {
  font-family: var(--arc-serif);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.45rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 1rem;
  max-width: 32ch;
}
.page-archive .archive-noresults__clear {
  font-family: var(--arc-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 0;
  padding: 0 0 2px;
  cursor: pointer;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.page-archive .archive-noresults__clear:hover,
.page-archive .archive-noresults__clear:focus-visible {
  background-size: 100% 1px;
  outline: none;
}

/* ---- Graceful empty state (built by JS from the localized message) ---- */
.page-archive .archive-empty {
  margin-top: 1.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.page-archive .archive-empty__msg {
  font-family: var(--arc-serif);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 1.4rem;
  max-width: 26ch;
}
.page-archive .archive-empty__ghost {
  display: grid;
  gap: 0.9rem;
  max-width: 340px;
}
.page-archive .archive-empty__ghost span {
  display: block;
  height: 0.8rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--line), rgba(230, 226, 216, 0.2));
}
.page-archive .archive-empty__ghost span:nth-child(1) { width: 72%; }
.page-archive .archive-empty__ghost span:nth-child(2) { width: 50%; }
.page-archive .archive-empty__ghost span:nth-child(3) { width: 63%; }

/* ---- Footer action row : Subscribe primary, RSS secondary ---- */
.page-archive .right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.1rem;
  margin-top: 1.7rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  font-family: var(--arc-sans);
}
.page-archive .right a { text-decoration: none; }
.page-archive .right a:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}
.page-archive .right a:first-child:hover,
.page-archive .right a:first-child:focus-visible {
  border-color: var(--accent);
  background-color: rgba(27, 42, 74, 0.05);
  transform: translateY(-1px);
  outline: none;
}
.page-archive .right .feed {
  display: block;
  width: 15px;
  height: 15px;
  opacity: 0.65;
  transition: opacity 0.3s ease;
}
.page-archive .right a:first-child:hover .feed { opacity: 1; }
.page-archive .right a:last-child {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.page-archive .right a:last-child:hover,
.page-archive .right a:last-child:focus-visible {
  background-size: 100% 1px;
  outline: none;
}

/* ---- Pagination (only when more than one page) ---- */
.page-archive .pagination {
  margin-top: 1.4rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-family: var(--arc-sans);
  font-size: 0.85rem;
}
.page-archive .pagination a,
.page-archive .pagination span {
  color: var(--muted);
  text-decoration: none;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  transition: color 0.25s ease, background-color 0.25s ease;
}
.page-archive .pagination a:hover {
  color: var(--accent);
  background-color: rgba(27, 42, 74, 0.05);
}

/* ---- Mobile : search goes full width, date drops under the subject, arrow retired ---- */
@media (max-width: 540px) {
  .page-archive .archive-head { align-items: stretch; }
  .page-archive .archive-search-wrap { width: 100%; }
  .page-archive .archive-search { width: 100%; }

  .page-archive .archive li {
    grid-template-columns: 2rem minmax(0, 1fr);
    column-gap: 0.9rem;
    row-gap: 0.1rem;
    padding-right: 0.15rem;
  }
  .page-archive .archive li a { grid-column: 2; }
  .page-archive .archive li .date { grid-column: 2; grid-row: 2; }
  .page-archive .archive li::after { display: none; }
  .page-archive .archive li:hover,
  .page-archive .archive li:focus-within { padding-left: 0.15rem; }

  .page-archive:not(.is-searching) .archive li:first-child,
  .page-archive .archive li.is-featured { padding: 1.25rem 1.15rem; }
  .page-archive:not(.is-searching) .archive li:first-child:hover,
  .page-archive .archive li.is-featured:hover { padding-left: 1.15rem; }
}

/* ---- Reduced motion : hold everything still ---- */
@media (prefers-reduced-motion: reduce) {
  .page-archive *,
  .page-archive *::before,
  .page-archive *::after { transition: none !important; animation: none !important; }
  .page-archive .archive::before { display: none; }
  .page-archive:not(.is-searching) .archive li:first-child,
  .page-archive .archive li.is-featured { transform: none !important; }
}

/* ===================== Newsletter archive : .page-archive (PASS 3) ===================== */
/* Builds on pass 2. Pushes all three axes further while staying restrained:              */
/*  INTERACTIVE: the index is now OPERABLE by keyboard. Up/Down (or j/k) move a real       */
/*    focus through the visible issues, Home/End jump, Enter opens, Escape returns to      */
/*    the search, and ArrowDown from the search drops into the list. A quiet, honest       */
/*    keycap hint makes it discoverable. This is a genuine new thing the user can DO.       */
/*  VISUAL: relative age is derived from each date and disclosed as real data. The latest   */
/*    issue states it inline in the accent ("Sent 3 weeks ago"); every other row reveals    */
/*    its age on hover/focus without shifting layout. Facts become readable, living detail. */
/*  DYNAMIC: the age slides in on intent, the hint brightens while the list holds focus,    */
/*    keyboard focus reads as a crisp inset ring distinct from the mouse hover. Pass 2's     */
/*    cursor spotlight + focal-panel parallax + animated filter states are all kept.        */

/* relative age : stack the date, hold the age just beneath it */
.page-archive .archive li .date {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.22;
}
.page-archive .archive li .ago {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 3px;
  font-family: var(--arc-sans);
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity 0.32s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.page-archive .archive li:hover .ago,
.page-archive .archive li:focus-within .ago {
  opacity: 1;
  transform: none;
}
/* featured : the age is permanent, sentence-like, in the accent */
.page-archive .archive li.is-featured .ago {
  position: static;
  margin-top: 5px;
  opacity: 1;
  transform: none;
  color: var(--accent);
  font-weight: 500;
  font-size: 0.74rem;
}
.page-archive .archive li.is-featured .ago::before { content: "Sent "; }

/* keyboard hint : quiet keycaps, honest and discoverable, brighter on list focus */
.page-archive .archive-hint {
  margin: 0.5rem 0 0;
  font-family: var(--arc-sans);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.5;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: opacity 0.35s ease, color 0.35s ease;
}
.page-archive.is-listfocus .archive-hint { opacity: 1; color: var(--accent); }
.page-archive .archive-hint .sep { color: var(--line); }
.page-archive .archive-hint kbd {
  font-family: var(--arc-sans);
  font-size: 0.7rem;
  line-height: 1;
  min-width: 1.15em;
  text-align: center;
  padding: 0.2em 0.4em;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #ffffff;
  color: var(--ink);
}
.page-archive.is-listfocus .archive-hint kbd { border-color: rgba(27, 42, 74, 0.28); }

/* keyboard selection : a crisp inset ring, distinct from the mouse hover tint */
.page-archive .archive.is-keyboarding li:focus-within:not(.is-featured) {
  box-shadow: inset 0 0 0 1px rgba(27, 42, 74, 0.16);
  border-radius: 8px;
}

/* mobile : retire the hint (touch input), realign the age to the left */
@media (max-width: 540px) {
  .page-archive .archive-hint { display: none; }
  .page-archive .archive li .date { align-items: flex-start; }
  .page-archive .archive li .ago { right: auto; left: 0; }
}