/* ══════════════════════════════════════════════════════════════════════════
   AXON ISSUE ARTICLE
   rod/assets/css/axon-issue.css
   Loads AFTER global.css. Every rule is scoped to .axon-issue.

   The article is LIGHT. The masthead band is the single dark moment and it is
   the publication nameplate, which is what earns it. Nothing else on this
   page gets darkened.

   Deliberately absent, do not add them back:
     - the email's 3px accent bar at the top of the frame (a colour strip)
     - bordered verdict chips (Issue 02 had them; they are badges)
     - any "No. 01" micro label stacked above a heading
     - any rule of the form .axon-issue__h em { font-style: italic }, which is
       the mechanism that put the two-style heading formula on six pages of
       another site. Headings here are one face, one style, full stop.

   Progressive enhancement note: the citation coupling, the pathway lighting
   and the evidence dimming are all written twice, once in pure CSS with
   :has() and once against the classes axon-issue.js sets. With JS off the
   page keeps its coupling; with JS on, focus and keyboard get it too.
   ══════════════════════════════════════════════════════════════════════════ */

/* global.css sets scroll-snap on <html>. A long article must not snap. */
html:has(.axon-issue) { scroll-snap-type: none; }

/* global.js appends .nav__progress-wrap to the nav on EVERY page, and this
   article carries its own reading position measured against the article body
   rather than the whole document, which is the honest number here. Two 2px
   teal bars stacked under one another is a bug, so the generic one goes. */
body:has(.axon-issue) .nav__progress-wrap { display: none; }

.axon-issue {
  --axon-measure:   66ch;
  --axon-rail:      190px;
  --axon-gutter:    clamp(1.25rem, 5vw, 4rem);
  --axon-step-gap:  2.4rem;
  --axon-node:      44px;
  --axon-lens:      180px;
  --axon-rule:      rgba(11, 15, 46, 0.13);
  --axon-rule-soft: rgba(11, 15, 46, 0.07);
  --axon-prose:     rgba(11, 15, 46, 0.84);
  /* --teal is #0EA5E9, which measures 2.77:1 on white and fails AA as text.
     Anywhere the accent is REAL TEXT on light paper it uses this deepened
     tone instead (4.94:1 on white, 4.66:1 on --card-2). --teal stays for
     fills, rules, tints, hover states and aria-hidden ornament. */
  --axon-teal-ink:  #0A76B2;
  --axon-serif:     'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  background: var(--white);
  color: var(--ink);
}
.axon-issue ::selection { background: var(--teal-dim-2); color: var(--ink); }

/* ── reading position ─────────────────────────────────────────────────── */
.axon-issue__progress {
  position: fixed;
  top: calc(var(--nav-top) + var(--nav-h));
  left: 0;
  right: 0;
  height: 2px;
  z-index: 99;
  pointer-events: none;
}
.axon-issue__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ── 1. masthead, the one dark moment ─────────────────────────────────── */
.axon-issue__masthead {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding:
    calc(var(--nav-top) + var(--nav-h) + clamp(2.6rem, 7vw, 5rem))
    var(--axon-gutter)
    clamp(2rem, 4vw, 3rem);
}
/* Same engraved grid as the newsletter hero, so the page reads as the same
   publication rather than a one off. Fades out before it reaches the type. */
.axon-issue__masthead::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
}
.axon-issue__masthead-inner {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
}
.axon-issue__wordmark {
  display: block;
  font-family: 'Bebas Neue', var(--display);
  font-weight: 400;
  font-size: clamp(2.9rem, 9vw, 5.6rem);
  line-height: 0.92;
  letter-spacing: 0.30em;
  text-indent: 0.30em;          /* cancels the trailing track so it centres true */
  color: #ffffff;
  /* tracking expands on hover, the same move .nav__links a makes, so the
     nameplate answers the cursor in the site's own grammar */
  transition: color 0.25s ease, letter-spacing 0.5s cubic-bezier(0.16,1,0.3,1),
              text-indent 0.5s cubic-bezier(0.16,1,0.3,1);
}
.axon-issue__wordmark:hover,
.axon-issue__wordmark:focus-visible {
  color: var(--teal);
  letter-spacing: 0.345em;
  text-indent: 0.345em;
}
.axon-issue__wordmark:focus-visible { outline: 2px solid var(--teal); outline-offset: 8px; }
.axon-issue__rules {
  height: 6px;
  max-width: 760px;
  margin: clamp(0.9rem, 2vw, 1.3rem) auto 0;
  border-top: 3px solid rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.92);
}
.axon-issue__meta {
  margin-top: 0.9rem;
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
}
.axon-issue__meta a {
  color: rgba(255, 255, 255, 0.74);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.axon-issue__meta a:hover { color: var(--teal); border-bottom-color: var(--teal); }

/* ── 2. banner ────────────────────────────────────────────────────────── */
/* The banner artwork has the headline, the dek and the byline typeset INTO
   the pixels at 1200px wide, so two rules protect it:
     1. it is never scaled above its native 1200px, because upscaling
        typeset text softens it and that is visible;
     2. if a short viewport ever forces a crop, object-position sits low,
        because the byline and the AXON kicker live in the bottom left of the
        frame and a centred crop clips them. */
.axon-issue__banner { background: var(--ink); }
.axon-issue__banner-img {
  display: block;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  height: auto;
  aspect-ratio: 1200 / 560;
  max-height: 68vh;
  object-fit: cover;
  object-position: center 62%;
}

/* ── 3. shell ─────────────────────────────────────────────────────────── */
.axon-issue__shell {
  display: grid;
  grid-template-columns: var(--axon-rail) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--axon-gutter) clamp(3rem, 7vw, 6rem);
}

.axon-issue__rail {
  position: sticky;
  top: calc(var(--nav-top) + var(--nav-h) + 2.5rem);
  /* a long issue must not push its own index off the bottom of the screen */
  max-height: calc(100vh - var(--nav-top) - var(--nav-h) - 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.axon-issue__rail-list { list-style: none; margin: 0; padding: 0; }
.axon-issue__rail-item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-top: 1px solid var(--axon-rule-soft);
  color: var(--text-2);
  transition: color 0.22s ease;
}
.axon-issue__rail-item--ref { grid-template-columns: minmax(0, 1fr); }
.axon-issue__rail-num {
  font-family: var(--axon-serif);
  font-weight: 600;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  transition: color 0.22s ease;
}
.axon-issue__rail-label {
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.35;
}
.axon-issue__rail-item:hover,
.axon-issue__rail-item:focus-visible,
.axon-issue__rail-item.is-current { color: var(--ink); }
.axon-issue__rail-item:hover .axon-issue__rail-num { color: var(--axon-teal-ink); }
.axon-issue__rail-item.is-current .axon-issue__rail-num { color: var(--axon-teal-ink); }
.axon-issue__rail-item.is-current .axon-issue__rail-label { font-weight: 600; }
.axon-issue__rail-item:focus-visible { outline: 2px solid var(--axon-teal-ink); outline-offset: 2px; }

/* The measure lives on the text, not on the column, so figures and tables run
   wider than the prose with no negative margins anywhere. The h1 is
   deliberately NOT capped: the display line runs the full column, the dek
   does not, and that difference is the hierarchy. */
.axon-issue__dek,
.axon-issue__lead,
.axon-issue__p,
.axon-issue__evidence-note,
.axon-issue__fig-cap,
.axon-issue__verdicts,
.axon-issue__author,
.axon-issue__refs,
.axon-issue__h2 { max-width: var(--axon-measure); }

/* ── 4. headline block ────────────────────────────────────────────────── */
.axon-issue__h {
  font-family: var(--axon-serif);
  font-weight: 600;
  font-size: clamp(2.35rem, 5.4vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.axon-issue__dek {
  margin-top: 1.1rem;
  font-family: var(--axon-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}
.axon-issue__byline {
  position: relative;
  margin-top: 1.7rem;
  padding-top: 1.1rem;
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
}
.axon-issue__byline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 1px;
  background: var(--ink);
  opacity: 0.45;
}

/* ── 5. prose ─────────────────────────────────────────────────────────── */
.axon-issue__p,
.axon-issue__lead {
  margin-top: 1.2rem;
  font-family: var(--sans);
  font-size: 1.075rem;
  line-height: 1.78;
  color: var(--axon-prose);
  text-wrap: pretty;
}
.axon-issue__lead { margin-top: clamp(1.8rem, 3vw, 2.6rem); font-size: 1.16rem; }
/* CSS drop cap. There is no span and no Outlook fallback letter: hand coding
   the first letter is what makes the first word render twice. */
.axon-issue__lead::first-letter {
  float: left;
  font-family: var(--axon-serif);
  font-weight: 600;
  font-size: 4.5em;
  line-height: 0.74;
  padding: 0.05em 0.1em 0 0;
  color: var(--axon-teal-ink);
}
.axon-issue__p b,
.axon-issue__lead b { font-weight: 600; color: var(--ink); }
.axon-issue__p i,
.axon-issue__lead i { font-style: italic; }

/* reference marker inside running prose */
.axon-issue__refmark {
  font-family: var(--sans);
  font-size: 0.64em;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
  padding: 0 0.1em 0 0.12em;
  color: var(--axon-teal-ink);
  transition: color 0.15s ease;
}
/* an activated marker goes to full ink, so "hot" reads as darker, not lighter */
.axon-issue__refmark:hover,
.axon-issue__refmark:focus-visible,
.axon-issue__refmark.is-hot { color: var(--ink); }

/* ── 6. numbered section ──────────────────────────────────────────────── */
.axon-issue__section {
  margin-top: clamp(3rem, 6vw, 4.6rem);
  scroll-margin-top: calc(var(--nav-top) + var(--nav-h) + 2rem);
}
.axon-issue__h2 {
  position: relative;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--axon-rule);
  font-family: var(--axon-serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
.axon-issue__section-num {
  margin-right: 0.55rem;
  font-family: var(--axon-serif);
  font-weight: 500;
  font-size: 0.66em;
  font-variant-numeric: tabular-nums;
  color: var(--axon-teal-ink);
}
@media (min-width: 1200px) {
  /* hang the numeral out in the gutter beside the heading, never above it.
     A number stacked over a heading is an eyebrow wearing a costume. */
  .axon-issue__section-num {
    position: absolute;
    right: calc(100% + 0.9rem);
    top: 0.06em;
    margin: 0;
    font-size: 1em;
    color: rgba(11, 15, 46, 0.17);
    transition: color 0.3s ease;
  }
  .axon-issue__section.is-active .axon-issue__section-num { color: var(--axon-teal-ink); }
}

/* ── 7. plate ─────────────────────────────────────────────────────────── */
.axon-issue__plate {
  margin: clamp(2.2rem, 4.5vw, 3.4rem) 0 0;
  border: 1px solid var(--axon-rule);
  background: var(--card-2);
  transition: border-color 0.3s ease, box-shadow 0.35s ease;
}
/* the frame acknowledges the cursor before the lens opens, so the zoom is
   discoverable rather than a hidden feature */
.axon-issue__plate:hover {
  border-color: rgba(11, 15, 46, 0.24);
  box-shadow: 0 14px 34px rgba(11, 15, 46, 0.07);
}
.axon-issue__plate-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.65rem 0.95rem;
  border-bottom: 1px solid var(--axon-rule);
}
.axon-issue__plate-label {
  font-family: var(--axon-serif);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--legacy-gold-ink);
}
.axon-issue__plate-subject {
  font-family: var(--sans);
  font-size: 0.78rem;
  text-align: right;
  color: var(--text-2);
}
.axon-issue__plate-stage { position: relative; overflow: hidden; padding: 0.95rem; }
.axon-issue__plate-img { width: 100%; height: auto; }
.axon-issue__plate[data-loupe] .axon-issue__plate-stage { cursor: zoom-in; }
.axon-issue__plate-lens {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--axon-lens);
  height: var(--axon-lens);
  border-radius: 50%;
  border: 1px solid rgba(11, 15, 46, 0.35);
  box-shadow: 0 12px 34px rgba(11, 15, 46, 0.22), inset 0 0 0 4px rgba(255, 255, 255, 0.92);
  background-color: var(--white);
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.axon-issue__plate.is-lensing .axon-issue__plate-lens { opacity: 1; transform: scale(1); }
@media (hover: none), (pointer: coarse) {
  .axon-issue__plate-lens { display: none; }
  .axon-issue__plate[data-loupe] .axon-issue__plate-stage { cursor: auto; }
  .axon-issue__plate:hover { border-color: var(--axon-rule); box-shadow: none; }
}
.axon-issue__plate-cap {
  padding: 0.8rem 0.95rem 1rem;
  border-top: 1px solid var(--axon-rule);
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.62;
  color: var(--text-2);
}
.axon-issue__plate-cap b { font-weight: 600; color: var(--ink); }
.axon-issue__plate-credit {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-2);
}
.axon-issue__plate-credit a { color: var(--axon-teal-ink); border-bottom: 1px solid var(--teal-dim-2); }
.axon-issue__plate-credit a:hover { border-bottom-color: var(--teal); }

/* ── 8. pull quote ────────────────────────────────────────────────────── */
.axon-issue__quote {
  max-width: 44rem;             /* wider than the measure, so it breaks it */
  margin: clamp(2.6rem, 5.5vw, 4.2rem) 0;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-top: 1px solid var(--axon-rule);
  border-bottom: 1px solid var(--axon-rule);
  text-align: center;
}
.axon-issue__quote-mark {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.72rem;
  color: var(--teal);
}
.axon-issue__quote p {
  font-family: var(--axon-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}

/* ── 9. evidence table ────────────────────────────────────────────────── */
.axon-issue__evidence { margin: clamp(2.4rem, 5vw, 3.6rem) 0 0; }
.axon-issue__evidence-table { width: 100%; border-collapse: collapse; }
.axon-issue__evidence-table thead th {
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--axon-rule);
  font-family: var(--display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: left;
  color: var(--axon-teal-ink);
}
.axon-issue__evidence-table tbody th,
.axon-issue__evidence-table tbody td {
  padding: 1.05rem 0.9rem 1.05rem 0;
  border-bottom: 1px solid var(--axon-rule);
  vertical-align: top;
  text-align: left;
  font-weight: 400;
}
.axon-issue__evidence-table tbody tr:last-child th,
.axon-issue__evidence-table tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
.axon-issue__evidence-table tbody tr { transition: background 0.18s ease, opacity 0.18s ease; }
.axon-issue__evidence-year {
  width: 5.8rem;
  font-family: var(--axon-serif);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1.12;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: color 0.2s ease;
}
.axon-issue__evidence-study { width: 32%; }
.axon-issue__evidence-author {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink);
}
.axon-issue__evidence-journal {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--axon-serif);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--text-2);
}
.axon-issue__evidence-finding {
  font-family: var(--sans);
  font-size: 0.93rem;
  line-height: 1.62;
  color: var(--axon-prose);
}
/* One study at a time. Written twice: the :has() pair works with JS off, the
   class pair is what axon-issue.js drives from the prose markers too. */
.axon-issue__evidence-table tbody tr:hover,
.axon-issue__evidence-table tbody tr.is-hot { background: var(--teal-dim); }
.axon-issue__evidence-table tbody tr:hover .axon-issue__evidence-year,
.axon-issue__evidence-table tbody tr.is-hot .axon-issue__evidence-year { color: var(--axon-teal-ink); }
.axon-issue__evidence-table tbody:has(tr:hover) tr:not(:hover),
.axon-issue__evidence.is-coupled tbody tr:not(.is-hot) { opacity: 0.42; }
.axon-issue__evidence-table tbody tr:focus-visible { outline: 2px solid var(--axon-teal-ink); outline-offset: -2px; }
.axon-issue__evidence-note {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.62;
  color: var(--text-2);
}

/* Below 720px the SAME DOM is re-laid out as stacked records. This is the
   layout, not a fallback: no horizontal scroll, and no repeated "Year:" /
   "Finding:" prefixes, which are a template fingerprint. */
@media (max-width: 719px) {
  .axon-issue__evidence-table,
  .axon-issue__evidence-table tbody,
  .axon-issue__evidence-table tbody th,
  .axon-issue__evidence-table tbody td { display: block; width: auto; }
  .axon-issue__evidence-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .axon-issue__evidence-table tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.85rem;
    align-items: baseline;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--axon-rule);
  }
  .axon-issue__evidence-table tbody tr:first-child { border-top: 2px solid var(--ink); }
  .axon-issue__evidence-table tbody tr:last-child { border-bottom: 2px solid var(--ink); }
  .axon-issue__evidence-table tbody th,
  .axon-issue__evidence-table tbody td { padding: 0; border: 0; }
  .axon-issue__evidence-table tbody tr:last-child th,
  .axon-issue__evidence-table tbody tr:last-child td { border-bottom: 0; }
  .axon-issue__evidence-year { grid-column: 1; grid-row: 1; width: auto; font-size: 2rem; }
  .axon-issue__evidence-study { grid-column: 2; grid-row: 1; width: auto; }
  .axon-issue__evidence-finding { grid-column: 1 / -1; grid-row: 2; margin-top: 0.55rem; font-size: 0.95rem; }
  /* a tinted row with no padding looks like a mistake once it is a record */
  .axon-issue__evidence-table tbody tr:hover,
  .axon-issue__evidence-table tbody tr.is-hot { background: none; }
}

/* ── 10. pathway ──────────────────────────────────────────────────────── */
.axon-issue__pathway-wrap { margin: clamp(2.4rem, 5vw, 3.6rem) 0 0; }
.axon-issue__pathway {
  display: grid;
  gap: var(--axon-step-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.axon-issue__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--axon-node) minmax(0, 1fr);
  column-gap: clamp(0.9rem, 2vw, 1.5rem);
  align-items: start;
  transition: opacity 0.25s ease;
}
/* The connector between two numbered nodes of a sequence diagram. It runs on
   the centreline of the node column, node to node. It is not an accent bar on
   the edge of a card and it must never be allowed to become one. */
.axon-issue__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(var(--axon-node) / 2 - 1px);
  top: var(--axon-node);
  bottom: calc(-1 * var(--axon-step-gap));
  width: 2px;
  background: var(--axon-rule);
  transition: background 0.3s ease;
}
.axon-issue__step-node {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: var(--axon-node);
  height: var(--axon-node);
  border: 1px solid var(--axon-rule);
  border-radius: 50%;
  background: var(--white);
  font-family: var(--axon-serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--axon-teal-ink);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
              transform 0.25s ease, box-shadow 0.25s ease;
}
.axon-issue__step-title {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.42;
  color: var(--ink);
}
.axon-issue__step-sub {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0.32rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.62;
  color: var(--text-2);
}
/* A real break in the sequence, written into the connector. Optional.
   READ THIS BEFORE ADDING data-phase: the label draws on the connector BELOW
   the step that carries it, so it marks where a phase ENDS. Put it on the LAST
   step of a phase, not the first. For Issue 02 that means data-phase="Day one"
   belongs on step 02, which is the last thing that happens on day one. */
.axon-issue__step[data-phase]::after {
  content: attr(data-phase);
  position: absolute;
  left: 0;
  top: calc(var(--axon-node) + 0.5rem);
  width: var(--axon-node);
  padding: 0.25rem 0;
  background: var(--white);
  text-align: center;
  font-family: var(--display);
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}
/* The email inverts its final row. On light paper the inversion is the node. */
.axon-issue__step--end .axon-issue__step-node {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}
.axon-issue__step--end .axon-issue__step-title { font-size: 1.14rem; }

/* Hovering a step lights the path UP TO it and dims the rest. The :has()
   forms do that with no JS at all: a step that has a later hovered sibling is
   a step the reader has already passed. */
.axon-issue__pathway:has(.axon-issue__step:hover) .axon-issue__step:not(:hover),
.axon-issue__pathway.is-focused .axon-issue__step:not(.is-on) { opacity: 0.42; }
.axon-issue__step:hover .axon-issue__step-node,
.axon-issue__step.is-on .axon-issue__step-node {
  transform: scale(1.06);
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-dim);
}
.axon-issue__step:has(~ .axon-issue__step:hover)::before,
.axon-issue__step.is-lit::before { background: var(--teal); }
.axon-issue__step:focus-visible { outline: none; }
.axon-issue__step:focus-visible .axon-issue__step-node { outline: 2px solid var(--axon-teal-ink); outline-offset: 3px; }

.axon-issue__fig-cap {
  margin-top: 1.1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.62;
  color: var(--text-2);
}
.axon-issue__fig-cap b { font-weight: 600; color: var(--ink); }
.axon-issue__fig-cap i { font-style: italic; }

/* ── 11. verdicts ─────────────────────────────────────────────────────── */
.axon-issue__verdicts { margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.axon-issue__verdict {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.2rem;
  align-items: baseline;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--axon-rule);
}
.axon-issue__verdict:first-child { border-top: 1px solid var(--axon-rule); }
.axon-issue__verdict-claim {
  font-family: var(--axon-serif);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.3vw, 1.5rem);
  line-height: 1.3;
  color: var(--ink);
}
/* Type hierarchy, no container. There is no chip here and there must not be. */
.axon-issue__verdict-mark {
  font-family: 'Bebas Neue', var(--display);
  font-weight: 400;
  font-size: clamp(0.98rem, 1.8vw, 1.22rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--axon-teal-ink);
  white-space: nowrap;
}
.axon-issue__verdict-note {
  grid-column: 1 / -1;
  max-width: var(--axon-measure);
  margin-top: 0.55rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.66;
  color: var(--text-2);
}
@media (max-width: 560px) {
  .axon-issue__verdict { grid-template-columns: minmax(0, 1fr); }
  .axon-issue__verdict-mark { margin-top: 0.4rem; white-space: normal; }
}

/* ── 12. closing statement ────────────────────────────────────────────── */
.axon-issue__close {
  position: relative;
  margin: clamp(2.8rem, 6vw, 4.2rem) 0 0;
  padding: clamp(1.8rem, 3.5vw, 2.7rem) 0;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  font-family: var(--axon-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  line-height: 1.42;
  text-align: center;
  text-wrap: pretty;
  color: var(--ink);
}
/* the inner hairlines make it an engraved double rule, not two plain lines */
.axon-issue__close::before,
.axon-issue__close::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
}
.axon-issue__close::before { top: 5px; }
.axon-issue__close::after { bottom: 5px; }

/* ── 13. author ───────────────────────────────────────────────────────── */
.axon-issue__author {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 1.4rem;
  align-items: center;
  margin-top: clamp(2.6rem, 5vw, 3.8rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--axon-rule);
}
.axon-issue__author-photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.axon-issue__author-name {
  font-family: var(--axon-serif);
  font-weight: 600;
  font-size: 1.32rem;
  line-height: 1.2;
  color: var(--ink);
}
.axon-issue__author-bio {
  margin-top: 0.3rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-2);
}
/* sentence case on purpose. An all caps letter spaced micro link here would
   be the fourth one on the page and they start to read as a template. */
.axon-issue__author-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--axon-teal-ink), var(--axon-teal-ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: color 0.2s ease, background-size 0.4s cubic-bezier(0.16,1,0.3,1);
}
.axon-issue__author-link:hover,
.axon-issue__author-link:focus-visible { color: var(--axon-teal-ink); background-size: 100% 2px; }
@media (max-width: 480px) {
  .axon-issue__author { grid-template-columns: 64px minmax(0, 1fr); gap: 1rem; }
  .axon-issue__author-photo { width: 64px; height: 64px; }
}

/* ── 14. references ───────────────────────────────────────────────────── */
.axon-issue__refs {
  margin-top: clamp(2.6rem, 5vw, 3.8rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--axon-rule);
  scroll-margin-top: calc(var(--nav-top) + var(--nav-h) + 2rem);
}
.axon-issue__refs-title {
  font-family: var(--axon-serif);
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--ink);
}
.axon-issue__refs-list { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: axonref; }
.axon-issue__ref {
  position: relative;
  padding: 0.6rem 0.6rem 0.6rem 2.2rem;
  margin-left: -0.6rem;
  border-radius: 3px;
  scroll-margin-top: calc(var(--nav-top) + var(--nav-h) + 3rem);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.62;
  color: var(--text-2);
  transition: background 0.25s ease, color 0.25s ease;
}
.axon-issue__ref::before {
  counter-increment: axonref;
  content: counter(axonref) ".";
  position: absolute;
  left: 0.6rem;
  top: 0.55rem;
  font-family: var(--axon-serif);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--axon-teal-ink);
}
.axon-issue__ref a {
  color: var(--ink);
  border-bottom: 1px solid var(--axon-rule);
  word-break: break-word;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.axon-issue__ref a:hover { color: var(--axon-teal-ink); border-bottom-color: var(--axon-teal-ink); }
/* :target catches an arrival from an external link or a shared anchor, which
   the JS coupling never sees */
.axon-issue__ref.is-hot,
.axon-issue__ref:target { background: var(--teal-dim); color: var(--ink); }
.axon-issue__refs-figure {
  margin-top: 1.1rem;
  font-family: var(--sans);
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--text-2);
}
.axon-issue__refs-figure b { font-weight: 600; color: var(--ink); }
.axon-issue__refs-figure a { color: var(--axon-teal-ink); }

/* ── 15. next and previous ────────────────────────────────────────────── */
.axon-issue__nextprev {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--axon-rule);
}
.axon-issue__nextprev a {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
  transition: color 0.2s ease;
}
.axon-issue__nextprev a:hover { color: var(--axon-teal-ink); }
.axon-issue__nextprev a:focus-visible { outline: 2px solid var(--axon-teal-ink); outline-offset: 3px; }

/* ── narrow screens ───────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .axon-issue__shell { grid-template-columns: minmax(0, 1fr); }
  .axon-issue__rail { display: none; }
}
@media (max-width: 480px) {
  .axon-issue { --axon-node: 38px; --axon-step-gap: 2rem; }
  .axon-issue__step-node { font-size: 0.95rem; }
  .axon-issue__lead::first-letter { font-size: 4em; }
  .axon-issue__plate-head { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .axon-issue__plate-subject { text-align: left; }
  .axon-issue__quote p { font-size: 1.4rem; }
}

/* ── motion ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html:has(.axon-issue) { scroll-behavior: auto; }
  .axon-issue__wordmark:hover,
  .axon-issue__wordmark:focus-visible { letter-spacing: 0.30em; text-indent: 0.30em; }
  .axon-issue__step:hover .axon-issue__step-node,
  .axon-issue__step.is-on .axon-issue__step-node { transform: none; }
  .axon-issue *,
  .axon-issue *::before,
  .axon-issue *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── print ────────────────────────────────────────────────────────────── */
@media print {
  .axon-issue__progress,
  .axon-issue__rail,
  .axon-issue__plate-lens,
  .axon-issue__nextprev { display: none !important; }
  .axon-issue__masthead { background: none; padding: 0 0 1rem; }
  .axon-issue__masthead::before { display: none; }
  .axon-issue__wordmark,
  .axon-issue__meta,
  .axon-issue__meta a { color: #000; }
  .axon-issue__rules { border-color: #000; }
  .axon-issue__banner { background: none; }
  .axon-issue__shell { display: block; padding: 0; }
  .axon-issue__ref a::after { content: " (" attr(href) ")"; font-size: 0.78em; color: #555; }
  .axon-issue__step { break-inside: avoid; }
  .axon-issue__evidence-table tbody tr { break-inside: avoid; }
  .axon-issue__plate { break-inside: avoid; }
}