/* ==========================================================================
   worse-by-design.css — worse-by-design.com landing
   Hero (title + tagline), get-notified signup, imprint. The scope, audience,
   table-of-contents, and CTA styles below are unused on this sparse page and
   kept only so the shared template stays diffable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: var(--s-9) 0 var(--s-8);
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr minmax(220px, 300px);
  gap: var(--s-6);
  align-items: start;
}

.hero-book {
  display: block;
  align-self: center;
  filter:
    drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.20))
    drop-shadow(12px 22px 24px rgba(0, 0, 0, 0.22));
  perspective: 1600px;
  perspective-origin: 8% -18%;
  transition: filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  animation: hero-rise 0.7s ease-out 0.15s both;
}
[data-theme="dark"] .hero-book {
  filter:
    drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.55))
    drop-shadow(14px 26px 30px rgba(0, 0, 0, 0.45));
}

/* Front cover face. */
.hero-book img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px 6px 6px 2px;
  border: 1px solid var(--line);
}

/* 3D book seen from slightly above and to the left: the cover tilts back and
   turns toward its binding, so the bound spine runs down the left edge and the
   stacked page block shows along the top edge, with the perspective vanishing
   toward the lower right. Every tint derives from --signal / --paper / --ink,
   so each site's accent flows through automatically. */
.book3d {
  --thick: 28px;
  display: block;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-5deg) rotateY(12deg);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Spine — the bound left edge, a real side face carrying the accent. */
.book3d::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: var(--thick);
  transform-origin: right center;
  transform: rotateY(-90deg);
  border-radius: 2px 0 0 2px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--signal) 55%, #000) 0%,
    color-mix(in srgb, var(--signal) 78%, #fff) 40%,
    color-mix(in srgb, var(--signal) 45%, #000) 72%,
    color-mix(in srgb, var(--signal) 62%, #000) 100%
  );
  box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.4);
}

/* Page block — stacked pages along the top fore-edge, seen from above.
   Pages stay paper-cream in both themes, as a physical book would. */
.book3d::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--thick);
  transform-origin: center top;
  transform: rotateX(-90deg);
  border-radius: 2px 2px 0 0;
  background: repeating-linear-gradient(
    to bottom,
    #f5f0e4 0, #f5f0e4 1px,
    #c8bda6 1px, #c8bda6 2px
  );
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.22);
}
[data-theme="dark"] .book3d::after {
  background: repeating-linear-gradient(
    to bottom,
    #e4ddcd 0, #e4ddcd 1px,
    #a99f88 1px, #a99f88 2px
  );
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero-book:hover .book3d {
    transform: rotateX(-2deg) rotateY(6deg) translateY(-8px);
  }
  .hero-book:hover {
    filter:
      drop-shadow(2px 6px 6px rgba(0, 0, 0, 0.22))
      drop-shadow(16px 34px 38px rgba(0, 0, 0, 0.26));
  }
  [data-theme="dark"] .hero-book:hover {
    filter:
      drop-shadow(2px 6px 7px rgba(0, 0, 0, 0.6))
      drop-shadow(18px 38px 46px rgba(0, 0, 0, 0.5));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-book,
  .book3d { transition: none; }
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-meta,
.hero-cover,
.hero h1,
.hero-tagline,
.hero-body > p,
.hero-author,
.hero-buy,
.hero-buttons {
  animation: hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.hero-cover              { animation-delay: 0s; }
.hero h1                 { animation-delay: 0.05s; }
.hero-tagline            { animation-delay: 0.18s; }
.hero-pitch              { animation-delay: 0.30s; }
.hero-author             { animation-delay: 0.38s; }
.hero-buy                { animation-delay: 0.46s; }
.hero-buttons            { animation-delay: 0.46s; }
.hero-meta               { animation-delay: 0.48s; }

.hero-meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  letter-spacing: 0.06em;
  line-height: 1.7;
}
.hero-meta .num { color: var(--signal); display: block; margin-bottom: 4px; }
.hero-meta .label { text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); }
.hero-meta .wink { display: block; margin-top: 10px; font-size: var(--t-xxs); color: var(--ink-4); }

.hero-body { min-width: 0; }

.hero-cover {
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 0 var(--s-4);
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 18px;
  box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--signal) 60%, transparent);
}

.hero h1 {
  font-family: var(--font-sans);
  font-size: clamp(48px, 7.5vw, 100px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

.hero-tagline {
  font-family: var(--font-sans);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink-2);
  margin: var(--s-5) 0 0;
  max-width: 46ch;
  text-wrap: balance;
}

.hero-pitch {
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--ink-2);
  margin: var(--s-5) 0 0;
  max-width: 62ch;
  text-wrap: pretty;
}

.hero-author {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin: var(--s-4) 0 0;
}
.hero-author strong { color: var(--ink-2); font-weight: 500; }

/* --------------------------------------------------------------------------
   2. Buy block (in hero)
   -------------------------------------------------------------------------- */

.hero-buy {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--paper-2);
  max-width: 620px;
}

.hero-price {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.price-now {
  font-family: var(--font-sans);
  font-size: var(--t-3xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.price-was {
  font-family: var(--font-mono);
  font-size: var(--t-md);
  color: var(--ink-3);
  text-decoration: line-through;
}

.price-tag {
  font-family: var(--font-mono);
  font-size: var(--t-xxs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--signal-ink);
  background: var(--signal-soft);
  border: 1px solid color-mix(in srgb, var(--signal) 35%, transparent);
  border-radius: var(--r-1);
  padding: 3px 8px;
  align-self: center;
}

.hero-buttons {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.hero-buy-note {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--ink-3);
  margin: var(--s-4) 0 0;
}

/* --------------------------------------------------------------------------
   4. Sections shared
   -------------------------------------------------------------------------- */

.toc-section,
.audience {
  padding: var(--s-9) 0 0;
}

/* inline code in prose */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 1px 5px;
  color: var(--signal-ink);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. Table of contents — collapsible parts
   -------------------------------------------------------------------------- */

.toc-preface {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--s-4);
  align-items: baseline;
  border-top: 1px solid var(--ink);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}

.toc-preface .toc-kicker {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--signal);
}

.toc-preface h3 {
  font-family: var(--font-sans);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.toc-part {
  border-bottom: 1px solid var(--line);
}

.toc-summary {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4) 0;
  cursor: pointer;
  list-style: none;
  transition: color 0.15s ease;
}

.toc-summary::-webkit-details-marker { display: none; }
.toc-summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.toc-part-num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--signal);
}

.toc-part-title {
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.toc-summary:hover .toc-part-title { color: var(--signal); }

.toc-part-aside {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  white-space: nowrap;
}

.toc-chevron {
  width: 12px;
  height: 12px;
  stroke: var(--ink-3);
  stroke-width: 1.6;
  fill: none;
  transition: transform 0.2s ease;
}

.toc-part[open] .toc-chevron { transform: rotate(180deg); }
.toc-summary:hover .toc-chevron { stroke: var(--signal); }

.toc-chapters {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--s-5) 92px;
  columns: 2;
  column-gap: var(--s-7);
}

.toc-chapters li {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  padding: 5px 0;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  color: var(--ink-2);
  break-inside: avoid;
}

.toc-chapters .ch-num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-4);
  min-width: 1.6em;
  text-align: right;
  flex-shrink: 0;
}

.toc-appendix .ch-num { text-transform: none; }

/* --------------------------------------------------------------------------
   6. Who it's for
   -------------------------------------------------------------------------- */

.audience-grid {
  border-top: 1px solid var(--ink);
  padding-top: var(--s-5);
}

.audience-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-4);
  color: var(--signal);
}

/* The three points run the full width as columns, matching the grid rhythm
   the rest of the page keeps. */
.audience-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--ink-2);
}

.audience-list li {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-5) var(--s-2) 0;
  border-right: 1px solid var(--line);
}
.audience-list li + li { padding-left: var(--s-5); }
.audience-list li:last-child { border-right: 0; padding-right: 0; }

.audience-list li::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--signal);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   7. Get-the-book CTA
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  margin-top: var(--s-9);
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-9) 0;
  overflow: hidden;
}

[data-theme="dark"] .cta { background: var(--paper-2); color: var(--ink); }

.cta::after {
  content: "";
  position: absolute;
  right: -10%;
  bottom: -40%;
  width: 55%;
  height: 100%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, #e078cd 18%, transparent) 0%, transparent 65%);
  pointer-events: none;
}

.cta .container { position: relative; z-index: 1; }

.cta-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6) var(--s-7);
  align-items: end;
}

.cta-content h2 {
  font-family: var(--font-sans);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  color: var(--paper);
}
[data-theme="dark"] .cta-content h2 { color: var(--ink); }

.cta-content p {
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--paper-3);
  margin: 0;
  max-width: 52ch;
}
[data-theme="dark"] .cta-content p { color: var(--ink-2); }

.cta-price {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  grid-column: 1 / -1;
}

.cta-price .now {
  font-family: var(--font-sans);
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #e078cd;
}
[data-theme="dark"] .cta-price .now { color: var(--signal); }

.cta-price .was {
  font-family: var(--font-mono);
  font-size: var(--t-base);
  color: var(--ink-3);
  text-decoration: line-through;
}

.cta-price .tag {
  font-family: var(--font-mono);
  font-size: var(--t-xxs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-3);
  background: transparent;
  border: 1px solid var(--ink-3);
  border-radius: var(--r-1);
  padding: 3px 8px;
  align-self: center;
}
[data-theme="dark"] .cta-price .tag { color: var(--ink-2); border-color: var(--line-strong); }

.cta-buttons {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-strong);
}

.cta .btn-primary {
  background: #e078cd;
  color: #2c0d25;
  border-color: #e078cd;
}
.cta .btn-primary:hover {
  background: #f0a9e0;
  border-color: #f0a9e0;
  color: #2c0d25;
}

.cta .btn-secondary {
  background: transparent;
  color: var(--paper);
  border-color: var(--ink-3);
}
.cta .btn-secondary:hover {
  background: var(--paper-3);
  color: var(--ink);
  border-color: var(--paper-3);
}
[data-theme="dark"] .cta .btn-secondary { color: var(--ink); border-color: var(--line-strong); }
[data-theme="dark"] .cta .btn-secondary:hover { background: var(--paper-3); border-color: var(--ink-3); }

.cta-reqs {
  grid-column: 1 / -1;
  font-size: var(--t-xs);
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--ink-4);
  margin-top: var(--s-3);
}
[data-theme="dark"] .cta-reqs { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   8. Imprint (subpage)
   -------------------------------------------------------------------------- */

.p-section { padding: var(--s-9) 0; }

.backlink {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.backlink:hover { color: var(--signal); }

.imprint-content {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-7);
  align-items: start;
}

.imprint-meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.imprint-details {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--ink-2);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6);
}

.imprint-details strong { font-weight: 600; color: var(--ink); }
.imprint-details a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.imprint-details a:hover { color: var(--signal); border-color: var(--signal); }
.imprint-details .detail-group { margin: 0; }

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero { padding: var(--s-7) 0 var(--s-7); }
  .hero-content { grid-template-columns: 1fr; gap: var(--s-4); }
  .hero-book { max-width: 240px; margin: 0 auto; }
  .hero h1 { font-size: clamp(40px, 11vw, 68px); }
  .hero-tagline { font-size: 20px; }

  .toc-section, .audience { padding-top: var(--s-7); }
  .cta { margin-top: var(--s-7); padding: var(--s-7) 0; }

  .toc-chapters { columns: 1; padding-left: 92px; }

  .audience-list { grid-template-columns: 1fr; }
  .audience-list li {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: var(--s-4) 0;
  }
  .audience-list li + li { padding-left: 0; }
  .audience-list li:last-child { border-bottom: 0; }

  .cta-content { grid-template-columns: 1fr; gap: var(--s-5); }

  .imprint-content { grid-template-columns: 1fr; gap: var(--s-4); }
  .imprint-details { grid-template-columns: 1fr; gap: var(--s-4); }
}

@media (max-width: 560px) {
  .toc-summary { grid-template-columns: 1fr auto; }
  .toc-part-num { grid-column: 1 / -1; }
  .toc-preface { grid-template-columns: 1fr; gap: var(--s-1); }
  .toc-chapters { padding-left: 0; }
  .hero-price { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   10. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero-meta, .hero-cover, .hero h1, .hero-tagline,
  .hero-body > p, .hero-author, .hero-buy, .hero-buttons {
    animation: none !important;
  }
  .toc-chevron { transition: none !important; }
}

/* ── Consulting note ─────────────────────────────────────────── */
.consulting {
    padding: 3rem 0;
    border-top: 1px solid var(--line);
}
.consulting-note {
    text-align: center;
    font-size: 1.05rem;
    color: var(--ink-2);
    max-width: 46rem;
    margin: 0 auto;
}
.consulting-note a {
    color: var(--signal);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Footer trademark note ───────────────────────────────────── */
.footer-trademark {
    font-size: 0.8rem;
    color: var(--ink-3, #8a8a8a);
    text-align: center;
    max-width: 44rem;
    margin: 0 auto 1.5rem;
}
.footer-trademark a { color: inherit; text-decoration: underline; }

/* ── Podman 6 version badge ──────────────────────────────────── */
.hero-version { margin: var(--s-4) 0 0; }

/* Solid fill: the book targets Podman 6, so the badge carries weight rather
   than reading as a footnote. --paper as the text color keeps it legible in
   both themes — --signal is dark purple on light, light purple on dark. */
.badge-v6 {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--paper);
    background: var(--signal);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
}

/* Listmonk signup forms */
/* Listmonk email signup — scoped, uses site design tokens */
    .lm-signup { padding: var(--s-9) 0; }
    .lm-card { max-width: 760px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--paper-2); padding: var(--s-7); }
    .lm-card h2 { font-family: var(--font-sans); font-size: clamp(26px, 3.5vw, 38px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin: 0; color: var(--ink); }
    .lm-card > p { font-family: var(--font-sans); font-size: var(--t-md); line-height: 1.5; color: var(--ink-2); margin: var(--s-3) 0 0; max-width: 54ch; }
    .lm-form { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; margin-top: var(--s-5); }
    .lm-form input[type="email"] { flex: 1 1 260px; min-width: 0; font-family: var(--font-sans); font-size: var(--t-base); color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-2); padding: 11px 14px; line-height: 1.2; }
    .lm-form input[type="email"]::placeholder { color: var(--ink-4); }
    .lm-form input[type="email"]:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
    .lm-form .btn-primary { flex: 0 0 auto; }
    .lm-micro { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.02em; color: var(--ink-3); margin: var(--s-4) 0 0; }
    @media (max-width: 560px) { .lm-form .btn-primary { width: 100%; justify-content: center; } .lm-form input[type="email"] { flex: 1 1 100%; } }

/* ── Coming-soon additions ───────────────────────────────────── */
.badge-soon {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--paper);
    background: var(--signal);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
}

/* No price and no status line on a planned title, so the CTA stands on its
   own instead of inside the .hero-buy frame, which would otherwise be an
   empty box around a single button. */
.hero-buttons { margin-top: var(--s-6); }

.hero-status {
    font-family: var(--font-sans);
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0 0 var(--s-4);
}
.hero-status strong { color: var(--ink); font-weight: 600; }
/* ── Planned scope (replaces the chapter TOC on planned titles) ── */
.scope-grid {
    border-top: 1px solid var(--ink);
    padding-top: var(--s-5);
}
.scope-label {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--s-5);
    color: var(--signal);
}
.scope-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--s-7);
    margin: 0;
    padding: 0;
    list-style: none;
}
.scope-list li {
    position: relative;
    padding: var(--s-4) 0 var(--s-4) var(--s-5);
    border-top: 1px solid var(--line);
    font-family: var(--font-sans);
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
}
.scope-list li::before {
    content: "+";
    position: absolute;
    left: 0;
    top: var(--s-4);
    font-family: var(--font-mono);
    color: var(--signal);
}
.scope-list li strong {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--t-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 3px;
}
@media (max-width: 900px) {
    .scope-list { grid-template-columns: 1fr; gap: 0; }
}

/* --------------------------------------------------------------------------
   Reader poll promo — strip below the hero, links to the Sysinit Press poll
   -------------------------------------------------------------------------- */

.poll-promo {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.poll-promo-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
}
.poll-promo-text {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 62ch;
  text-wrap: pretty;
}
.poll-promo-kicker {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  margin-right: var(--s-2);
}
.poll-promo-inner .btn-secondary { flex: 0 0 auto; }

/* ── Footer accents on the inverted field ────────────────────── */
/* `footer { background: var(--ink) }` inverts the field, but the shared
   template keeps the same-theme --signal for BOTH the link hover colour and
   the global `:focus-visible` outline. Either way a dark accent lands on a
   near-black footer in light mode and a bright one on a near-white footer in
   dark mode — 2.93 and 2.36 here, against 4.5 for the hover text and 3.0 for
   the focus ring (WCAG 1.4.11 non-text contrast). Keyboard focus matters more
   than hover: it is the only thing telling a keyboard user where they are.

   Use the accent tuned for the field the footer actually paints, which gives
   6.96 and 7.62 for both. The resting colour (--paper-3) is unaffected at
   15.84 and 14.60. Template-wide issue, see Chaku 611. */
.footer-links a:hover,
.footer-by a:hover { color: #e078cd; border-color: #e078cd; }
footer :focus-visible { outline-color: #e078cd; }

[data-theme="dark"] .footer-links a:hover,
[data-theme="dark"] .footer-by a:hover { color: #8a1170; border-color: #8a1170; }
[data-theme="dark"] footer :focus-visible { outline-color: #8a1170; }