/* The HARI Treaty page (/hari-treaty/).
   The page loads css/brand.css, so every token below is defined on it; each var() still carries
   the fallback it would need on a page that did not (scripts/check-css-tokens.py). Layout follows
   the After Control page, the other named destination in the primary bar: one reading column,
   figures at the column's width, phones co-equal at 390 px. Colours come from the brand's
   accessible text tokens (--gold-text and --green-text clear 4.5:1 on every paper surface).
   The page animates nothing, so it needs no reduced-motion rule. */

.ht-main {
  /* One reading measure for every text block: max-width in ch resolves against each element's own font, so a
     paragraph, a quote and a card stopped at nine different right edges; rem is one length. */
  --ht-measure: 40rem;
  max-width: 820px;
  margin: 0 auto;
  padding: 36px 24px 64px;
  overflow-wrap: break-word;
  color: var(--ink, #1c1c19);
}

.ht-eyebrow {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-text, #7a5a0e);
  margin: 0 0 8px;
}

.ht-main h1 {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.12;
  margin: 0 0 12px;
  color: var(--ink, #1c1c19);
}

.ht-main p.ht-lede {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.1rem;
  line-height: 1.7;
  color: #3d3d36;
  max-width: var(--ht-measure);
  margin: 0 0 1.1rem;
}

.ht-main p,
.ht-main li {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: .97rem;
  line-height: 1.72;
  color: #3b3b34;
}

.ht-main p {
  max-width: var(--ht-measure);
  margin: 0 0 .9rem;
}

.ht-main a {
  color: var(--accent-link, #2c5f78);
  text-underline-offset: .15em;
}

.ht-main a:hover {
  color: var(--accent-link-hover, #1d4459);
}

.ht-main a:focus-visible {
  outline: 2px solid var(--gold, #b07d1f);
  outline-offset: 2px;
  border-radius: 3px;
}

.ht-main h2 {
  max-width: var(--ht-measure);
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.36rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink, #1c1c19);
  margin: 2.6rem 0 .7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline, #e7e5e0);
  scroll-margin-top: 5.5rem;
}

.ht-main h3 {
  max-width: var(--ht-measure);
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.3;
  color: #2b2b24;
  margin: 1.5rem 0 .5rem;
}

/* the three status cards under the lede: what it is, what it is not, what comes next */
.ht-status {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
  margin: 1.2rem 0 1.4rem;
}

@media (min-width: 860px) {
  .ht-status {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.ht-card {
  border: 1px solid var(--border, #d9d3c4);
  border-left: 3px solid var(--gold, #b07d1f);
  border-radius: var(--radius-sm, 7px);
  background: var(--paper-card, #ffffff);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(28, 28, 25, .06));
  padding: .85rem 1rem;
}

.ht-card.ht-card-not {
  border-left-color: #9b3b2a;
}

.ht-card.ht-card-next {
  border-left-color: var(--green, #2d7a55);
}

.ht-k {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5d5d52;
  margin: 0 0 .35rem;
}

.ht-main .ht-card p {
  font-size: .88rem;
  line-height: 1.6;
  margin: 0;
}

/* the one sentence the page stands on */
.ht-main p.ht-line {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.6;
  color: #2b2b24;
  max-width: var(--ht-measure);
  margin: 1.4rem 0 1.6rem;
  padding-left: .9rem;
  border-left: 3px solid var(--green, #2d7a55);
}

/* quotations from the book and the registration: marked, credited, and set apart */
.ht-quote {
  margin: 1rem 0 1.2rem;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--gold, #b07d1f);
  border-radius: 0 var(--radius-sm, 7px) var(--radius-sm, 7px) 0;
  background: var(--gold-bg, rgba(196, 140, 46, .1));
  max-width: var(--ht-measure);
}

.ht-main .ht-quote p {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1rem;
  line-height: 1.65;
  color: #2b2b24;
  margin: 0 0 .45rem;
}

.ht-quote cite,
.ht-main p.ht-credit {
  display: block;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: .82rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: #4b4638;
}

/* the book's title inside a credit stays on the credit's line (a reader's finding, 27 September 2026) */
.ht-quote cite cite {
  display: inline;
  font-style: italic;
}

/* the six articles */
.ht-articles {
  list-style: none;
  margin: .6rem 0 1rem;
  padding: 0;
  max-width: var(--ht-measure);
}

.ht-main .ht-articles li {
  margin: 0 0 .7rem;
  padding: .7rem .9rem;
  border: 1px solid var(--border, #d9d3c4);
  border-radius: var(--radius-sm, 7px);
  background: var(--paper-card, #ffffff);
}

.ht-art {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-text, #7a5a0e);
  margin: 0 0 .2rem;
}

.ht-main p.ht-note {
  font-size: .86rem;
  line-height: 1.62;
  color: #55604f;
  max-width: var(--ht-measure);
}

.ht-mechs {
  list-style: none;
  margin: .6rem 0 1rem;
  padding: 0;
}

.ht-main .ht-mechs li {
  margin: 0 0 .8rem;
  padding-left: .9rem;
  border-left: 3px solid var(--gold, #b07d1f);
  max-width: var(--ht-measure);
}

.ht-mechs strong {
  color: #2b2b24;
}

/* figures: legible at every width. Up to 1099 px the phone twin serves, drawn 360 units wide so a unit prints at
   about a pixel on a phone, and shown no wider than 480 px, so its type prints at 10 to 13 px on a tablet. From 1100 px
   the desktop artwork, drawn 1240 wide, leaves the reading column for up to 1240 px, so its type prints near the size
   it is drawn; held to the column's 772 px it printed at 0.62 of it, body text near 7 px (a read of the page at 1440 px,
   27 September 2026). The caption stays on the column. */
.ht-fig {
  margin: 1.4rem 0 1.8rem;
}

.ht-fig img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--border, #d9d3c4);
  border-radius: var(--radius, 10px);
  background: #fbfaf5;
}

@media (min-width: 1100px) {
  .ht-fig {
    --fig-w: min(1240px, calc(100vw - 64px));
    width: var(--fig-w);
    margin-left: calc((100% - var(--fig-w)) / 2);
  }

  .ht-fig img {
    max-width: none;
  }
}

.ht-fig figcaption {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: .85rem;
  line-height: 1.55;
  color: #4f4a3d;
  margin-top: .55rem;
  max-width: 480px;
  margin-inline: auto;
}

/* from 1100 px the caption returns to the reading column, after the rule above so it wins (a reader's finding) */
@media (min-width: 1100px) {
  .ht-fig figcaption {
    max-width: var(--ht-measure);
    margin-left: calc((var(--fig-w) - 772px) / 2);
    margin-right: auto;
  }
}

/* the evidence table: a table on wide screens, one card per row on phones */
.ht-table {
  width: 100%;
  border-collapse: collapse;
  margin: .8rem 0 1rem;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: .86rem;
  line-height: 1.5;
}

.ht-table th,
.ht-table td {
  text-align: left;
  vertical-align: top;
  padding: .6rem .55rem;
  border-bottom: 1px solid var(--hairline, #e7e5e0);
  color: #3b3b34;
}

.ht-table th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5d5d52;
  border-bottom: 1px solid var(--border-strong, #c9c1ae);
}

.ht-table td:first-child {
  font-weight: 600;
  color: #2b2b24;
}

.ht-table .ht-standing {
  color: #55604f;
}

@media (max-width: 720px) {
  .ht-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ht-table,
  .ht-table tbody,
  .ht-table tr,
  .ht-table td {
    display: block;
    width: 100%;
  }

  .ht-table tr {
    margin: 0 0 .8rem;
    padding: .6rem .8rem;
    border: 1px solid var(--border, #d9d3c4);
    border-radius: var(--radius-sm, 7px);
    background: var(--paper-card, #ffffff);
  }

  .ht-table td {
    border: 0;
    padding: .2rem 0;
  }

  .ht-table td::before {
    content: attr(data-label);
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6b6b60;
  }
}

/* the dated record */
.ht-record {
  margin: .6rem 0 1rem;
  padding: 0;
  max-width: var(--ht-measure);
}

.ht-record dt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gold-text, #7a5a0e);
  margin: .8rem 0 .15rem;
}

.ht-record dd {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: .93rem;
  line-height: 1.65;
  color: #3b3b34;
}

/* read on */
.ht-read {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .45rem;
}

@media (min-width: 640px) {
  .ht-read {
    grid-template-columns: 1fr 1fr;
  }
}

.ht-main .ht-read a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .8rem;
  border: 1px solid var(--border, #d9d3c4);
  border-radius: var(--radius-sm, 7px);
  background: var(--paper-card, #ffffff);
  text-decoration: none;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: .9rem;
}

.ht-main .ht-read a:hover {
  border-color: var(--gold, #b07d1f);
}

@media (max-width: 640px) {
  .ht-main {
    padding: 24px 16px 48px;
  }
}

/* The Eden Mark seal beside its heading (27 September 2026): the author's tree-and-chip logo in a gold ring.
   It sits in the heading's own row, so no float can collide with a figure below; smaller on a phone. */
.ht-main h2.ht-has-seal { display: flex; align-items: center; gap: .85rem; }
.ht-main h2.ht-has-seal .ht-seal { flex: 0 0 72px; width: 72px; height: 72px; }
@media (max-width: 480px) {
  .ht-main h2.ht-has-seal .ht-seal { flex-basis: 56px; width: 56px; height: 56px; }
}


/* The page's top follows the ARC Theory page (the operator, 27 September 2026, with a phone screenshot of
   each): the same panel, fonts, sizes and colours, and the same order: the mark at the right, the eyebrow,
   the title, the subtitle, the byline, the thesis, the epigram, then the epistemic status. The values are
   the ARC page's own (.at-* in arc-theory/index.html), measured in a browser at 390 and 1440 px. Every
   selector here outweighs .ht-main p (0,1,1), the rule that had silently beaten the old eyebrow's single
   class (0,1,0) and printed it large and grey instead of small and gold. */
.ht-main .ht-hero {
  background: #fafaf8;
  margin: -36px -24px 1.6rem;
  padding: 3.2rem 24px 1.4rem;
}

.ht-main .ht-hero::after {
  content: "";
  display: block;
  clear: both;
}

.ht-main .ht-hero .ht-hero-mark {
  float: right;
  width: 84px;
  height: auto;
  margin: 0 0 .8rem 1.2rem;
}

.ht-main .ht-hero p.ht-hero-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.65;
  color: #8a6508;
  max-width: none;
  margin: 0 0 .7rem;
}

.ht-main .ht-hero p.ht-hero-eyebrow a {
  color: inherit;
}

.ht-main .ht-hero h1 {
  font-family: 'Source Serif 4', serif;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.08;
  margin: 0 0 .9rem;
  color: #1c1c19;
}

.ht-main .ht-hero p.ht-hero-long {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: .95rem;
  line-height: 1.65;
  color: #57574e;
  max-width: var(--ht-measure);
  margin: 0 0 .4rem;
}

.ht-main .ht-hero p.ht-hero-def {
  font-family: 'Source Serif 4', serif;
  font-size: clamp(1.08rem, 2.6vw, 1.35rem);
  font-style: italic;
  line-height: 1.55;
  color: #3d3d36;
  max-width: var(--ht-measure);
  margin: .2rem 0 1rem;
}

/* Train 32: the motto in the site's serif line (the Recursive Dynamics and ARC Theory pattern), not monospace. */
.ht-main .ht-hero p.ht-hero-epigram {
  font-family: 'Source Serif 4', serif;
  font-size: 1.12rem;
  letter-spacing: 0;
  line-height: 1.5;
  color: #1c1c19;
  max-width: var(--ht-measure);
  margin: .9rem 0 0;
  border-left: 3px solid #b8860b;
  padding: .1rem 0 .1rem 1rem;
  text-wrap: balance;
}

.ht-main .ht-hero p.ht-hero-status {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: .95rem;
  line-height: 1.7;
  color: #1f292d;
  max-width: var(--ht-measure);
  margin: 1.1rem 0;
  padding: .85rem 1.05rem;
  border: 1px solid #e0ddd5;
  border-left: 3px solid #123a31;
  border-radius: 0 8px 8px 0;
  background: #fbfaf7;
}

/* Train 32: the one published-drafts line, above the hero prose in place of the two boxed buttons, as the
   Eden Protocol and ARC Theory heroes carry their papers. Its title links open the shared popup cards. */
.ht-main .ht-hero p.ht-hero-next {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: .92rem;
  line-height: 1.65;
  color: #3b3b34;
  max-width: var(--ht-measure);
  margin: 1rem 0 1.1rem;
}


@media (max-width: 720px) {
  .ht-main .ht-hero {
    padding-top: 2rem;
  }

  .ht-main .ht-hero .ht-hero-mark {
    width: 64px;
    margin-left: .9rem;
  }
}

/* The column's own padding narrows at 640 px (above), so the panel follows it there: flush with the
   column on a phone, as the ARC page's panel is. */
@media (max-width: 640px) {
  .ht-main .ht-hero {
    margin: -24px 0 1.4rem;
    padding: 2rem 0 1.2rem;
  }
}

/* The byline's ORCID link, as the ARC page draws it: the iD icon inline with the number, never split
   from it, and the external-link arrow the site prints after a link that opens a new tab. */
.ht-main .mde-byline .orcid-id {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.ht-main .mde-byline .orcid-id img {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
}

.ht-main .mde-byline .orcid-id:hover,
.ht-main .mde-byline .orcid-id:focus-visible {
  text-decoration: underline;
}

.ht-main .mde-byline a[target=_blank]::after {
  content: "\2197\FE0E";
  font-variant-emoji: text;
  display: inline;
  font-size: .72em;
  line-height: 0;
  margin-left: .15em;
  opacity: .72;
}

/* ------------------------------------------------------------------------------------------------------------
   Layout rules. Markup and styles only: no word on the page changed.
   ------------------------------------------------------------------------------------------------------------ */

/* 1. The status block was the one section here with no .ht-* padding rule, so it took the global
   section{padding:var(--space-5xl) 0} and the alternating tint of section:nth-child(even) and stood as a pale slab
   128px too tall at each end. It is a plain block in the reading column now. */
.ht-main section.ht-status-map,
.ht-main > section:not(.ht-hero) {
  padding: 0 0 .4rem;
  background: transparent;
}
/* Train 32 (30 September 2026): the two-layers section added on 29 September took the same global 128px padding
   and tint (the "gaps" the author saw above and below it); every section after the hero now follows the rule above. */

/* Train 32: a DOI inside a sentence reads as a word, not a button. The site-wide rule stamped by stamp-site-nav.py
   (a[href*="doi.org"]{display:inline-block;padding:.35rem .2rem}) is right for a DOI standing alone and wrong inside
   prose: it pushed apart the lines carrying a DOI and opened a gap before the punctuation after it (the author's
   "gaps" and "stray spaces"). Inside this page's paragraphs and list items the DOI is inline again, and an overlay
   centred on it keeps the 44px touch target without taking space in the flow (::before, because the external-link
   glyph already holds ::after). */
.ht-main p a[href*="doi.org"],
.ht-main p a[href*="10.17605"],
.ht-main li a[href*="doi.org"],
.ht-main li a[href*="10.17605"],
.ht-main dd a[href*="doi.org"],
.ht-main dd a[href*="10.17605"] {
  display: inline;
  padding: 0;
  position: relative;
}
.ht-main p a[href*="doi.org"]::before,
.ht-main p a[href*="10.17605"]::before,
.ht-main li a[href*="doi.org"]::before,
.ht-main li a[href*="10.17605"]::before,
.ht-main dd a[href*="doi.org"]::before,
.ht-main dd a[href*="10.17605"]::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

/* 2. Bare lists in the column had no left padding and hung their markers outside it, against the screen edge on a
   phone. Classed lists (.ht-articles, .ht-mechs, .ht-read) keep their own rules. */
.ht-main ul:not([class]),
.ht-main ol:not([class]) {
  margin: .6rem 0 1rem;
  padding-left: 1.25rem;
  list-style-position: outside;
}

.ht-main ul:not([class]) li,
.ht-main ol:not([class]) li {
  margin: 0 0 .45rem;
  max-width: var(--ht-measure);
}

/* 3. The commands are a box, in the page's code face, that scrolls sideways rather than breaking a URL, with air
   before and after it. */
.ht-main .verify-maths > p:first-child {
  margin-bottom: .4rem;
}

.ht-main .verify-maths pre {
  max-width: var(--ht-measure);
  margin: .5rem 0 1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--border, #d9d3c4);
  border-radius: var(--radius-sm, 7px);
  background: #f1eee6;
  overflow-x: auto;
  white-space: pre;
}

.ht-main .verify-maths pre code {
  font-family: 'IBM Plex Mono', Menlo, ui-monospace, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.6;
  color: #2b2b24;
}

.ht-main .verify-maths pre + p {
  margin-top: 1rem;
}

/* 5. The byline shares the column's left edge and measure; its inline centring is gone. */
.ht-main .ht-hero .mde-byline {
  max-width: var(--ht-measure);
}

/* 6 and 7. One credit style for every quotation (the boxed quotes, and the loose credit under a quotation set in a
   paragraph), a link that never breaks across lines, and a 44px target on a phone: the padding widens the hit area
   and an equal negative margin leaves the line where it was. A first-published date has a place in the credit
   (<time>) that does not break. */
.ht-quote cite time,
.ht-main p.ht-credit time {
  white-space: nowrap;
}

.ht-main .ht-credit {
  margin: -.4rem 0 1rem;
}

.ht-quote cite a.eden-book-link,
.ht-main p.ht-credit a.eden-book-link {
  white-space: nowrap;
  font-size: inherit;
}

@media (max-width: 640px) {
  .ht-quote cite a.eden-book-link,
  .ht-main p.ht-credit a.eden-book-link {
    display: inline-block;
    padding: .9rem .35rem;
    margin: -.9rem -.35rem;
  }
}

/* 8. The hero. The eyebrow is three parts, each unbreakable: on a wide screen the first two share a line and the
   link stands on its own line by design; on a phone each part has its own line beside the seal, and the middle dots
   go. The byline's two links stack on a phone rather than leave a dot at the end of a line. */
.ht-main .ht-hero p.ht-hero-eyebrow .ht-eb {
  white-space: nowrap;
}

.ht-main .ht-hero p.ht-hero-eyebrow .ht-eb-link {
  display: block;
}

.ht-main .ht-hero p.ht-hero-eyebrow .ht-eb-sep:last-of-type {
  display: none;
}

@media (max-width: 640px) {
  .ht-main .ht-hero p.ht-hero-eyebrow {
    letter-spacing: .08em;
  }

  .ht-main .ht-hero p.ht-hero-eyebrow .ht-eb {
    display: block;
  }

  .ht-main .ht-hero p.ht-hero-eyebrow .ht-eb-sep {
    display: none;
  }
}

.ht-main .mde-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.ht-main .mde-links .mde-sep {
  margin: 0 .5em;
}

@media (max-width: 560px) {
  .ht-main .mde-links {
    flex-direction: column;
    align-items: flex-start;
  }

  .ht-main .mde-links .mde-sep {
    display: none;
  }
}

/* 14. The three mechanisms lead alike: the Eden Seal's lead-in is a link to its section, and it reads as the same
   bold lead-in as the other two (colour and no underline; the underline returns on hover and focus). */
.ht-mechs strong a {
  color: inherit;
  text-decoration: none;
}

.ht-mechs strong a:hover,
.ht-mechs strong a:focus-visible {
  text-decoration: underline;
}