/* ==========================================================================
   tmux-book.css — tmux-book.com landing
   Hero (title + buy), spec bar, collapsible table of contents, audience,
   get-the-book CTA, imprint.
   ========================================================================== */

/* --------------------------------------------------------------------------
   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: 200px 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 — the real image (podman) or the CSS placeholder. */
.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 {
  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-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, #fbbf24 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: #fbbf24;
}
[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: #fbbf24;
  color: #33230a;
  border-color: #fbbf24;
}
.cta .btn-primary:hover {
  background: #fcd34d;
  border-color: #fcd34d;
  color: #33230a;
}

.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 {
    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;
}

/* CSS-rendered cover placeholder until the real cover art exists */
.cover-ph {
    aspect-ratio: 496 / 702;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--s-5);
    border-radius: 2px 6px 6px 2px;
    border: 1px solid var(--line);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--signal) 16%, var(--paper)) 0%,
        var(--paper-2) 65%);
}

.cover-ph-press {
    font-family: var(--font-mono);
    font-size: var(--t-xxs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
}
.cover-ph-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}
.cover-ph-title small {
    display: block;
    margin-top: 10px;
    font-weight: 400;
    font-size: var(--t-xs);
    color: var(--ink-2);
    line-height: 1.5;
}
.cover-ph-soon {
    font-family: var(--font-mono);
    font-size: var(--t-xxs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    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: flex-start;
}
.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; }