:root {
  color-scheme: dark;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  --space: #040303;
  --space-soft: #0b0908;
  --paper: #eee9e1;
  --paper-muted: #bdb6ad;
  --line: rgba(238, 233, 225, .17);
  --line-strong: rgba(238, 233, 225, .32);
  --ember: #d7a46d;
  --ember-soft: #9a6948;
  --danger: #ffb8ad;
  --gutter: clamp(1.25rem, 5.8vw, 7rem);
  --content: 92rem;
}

* { box-sizing: border-box; }
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-width: min(20rem, 100%);
  overflow-x: clip;
  background: var(--space);
  color: var(--paper);
}
html::-webkit-scrollbar { width: .72rem; }
html::-webkit-scrollbar-track {
  background: rgba(140, 137, 132, .16);
  box-shadow: inset 0 0 .38rem rgba(255, 255, 255, .07);
}
html::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb:hover {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(255, 252, 244, .76);
  background-clip: padding-box;
  box-shadow: inset 0 0 .35rem rgba(255, 255, 255, .9), 0 0 .45rem rgba(255, 248, 218, .54);
}
html::-webkit-scrollbar-button:single-button {
  height: .72rem;
  background-color: rgba(140, 137, 132, .12);
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 .22rem rgba(255, 248, 218, .8));
}
html::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image:
    linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, .9) 47% 57%, transparent 58%),
    linear-gradient(225deg, transparent 46%, rgba(255, 255, 255, .9) 47% 57%, transparent 58%);
  background-position: calc(50% - .12rem) 55%, calc(50% + .12rem) 55%;
  background-size: .38rem .38rem;
}
html::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image:
    linear-gradient(45deg, transparent 46%, rgba(255, 255, 255, .9) 47% 57%, transparent 58%),
    linear-gradient(315deg, transparent 46%, rgba(255, 255, 255, .9) 47% 57%, transparent 58%);
  background-position: calc(50% - .12rem) 45%, calc(50% + .12rem) 45%;
  background-size: .38rem .38rem;
}
body::selection { color: var(--space); background: var(--paper); }
a { color: inherit; }

@media (min-width: 93.75rem) {
  html { font-size: 1.0666667vw; }
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 20;
  padding: .75rem 1rem;
  background: var(--paper);
  color: var(--space);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  overflow: visible;
  padding: 0 var(--gutter) max(1.5rem, 4svh);
  background: transparent;
}
.hero__art {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: var(--space);
  opacity: 1;
  will-change: opacity;
}
.hero__placeholder,
.hero__detail {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.hero__detail {
  z-index: 1;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(.22, 1, .36, 1);
}
.hero__detail--loaded { opacity: 1; }
.hero__compact-mark { display: none; }

footer a {
  text-decoration: none;
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.wordmark {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .13em;
}
.wordmark__dot { color: var(--ember); }
footer a:hover,
footer a:focus-visible { color: var(--paper); }

.hero__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: min(43vw, 46rem);
  padding-block: clamp(5rem, 10svh, 7rem) clamp(3rem, 8svh, 7rem);
}
.kicker,
.section-label,
.panel__eyebrow,
.memo-result__label {
  margin: 0;
  color: var(--paper-muted);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
}
.kicker { margin: 0 0 1.75rem clamp(.25rem, .35vw, .45rem); color: rgba(238, 233, 225, .82); }
h1,
.hero__compact-mark {
  margin: 0;
  font-size: clamp(3rem, calc(1rem + 5.3vw), 8.5rem);
  font-weight: 300;
  letter-spacing: .075em;
  line-height: 1.02;
  text-transform: uppercase;
  text-shadow:
    0 0 .035em rgb(255 240 219 / .7),
    0 0 .12em rgb(244 223 197 / .7),
    0 0 .36em rgb(205 158 126 / .55),
    0 0 .75em rgb(155 106 78 / .35);
}
h1 { max-width: 100%; scroll-margin-top: calc(clamp(5rem, 10svh, 7rem) + 2.77rem); }
h1 span { display: block; width: max-content; max-width: 100%; overflow-wrap: anywhere; }
h1 span:first-child { margin-bottom: .13em; }
.hero__lead {
  max-width: 35rem;
  margin: clamp(1.75rem, 4vh, 3.25rem) 0 0;
  color: rgba(238, 233, 225, .78);
  font-size: clamp(.88rem, 1.12vw, 1rem);
  line-height: 1.7;
}
.hero__action {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  margin-top: clamp(1.75rem, 4vh, 3rem);
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(238, 233, 225, .55);
  text-decoration: none;
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero__action span { color: var(--ember); font-size: 1rem; }
.hero__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  align-self: flex-end;
  gap: clamp(.75rem, 1.8vw, 2rem);
}
.hero__facts a {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  min-height: 44px;
  color: rgba(238, 233, 225, .68);
  font-size: .62rem;
  line-height: 1.5;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
}
.hero__facts a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: .3em; }
.hero__facts a:focus-visible,
.project-detail:focus-visible,
.project-detail__links a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}
.hero__facts { text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.hero__facts span { min-width: 0; overflow-wrap: anywhere; }
.hero__fact-icon { flex: none; width: 24px; height: 24px; object-fit: contain; }
/* The official ICP favicon includes transparent clear space around the wide
   infinity. A 44px box displays its unchanged mark at about 39 × 20px. */
.hero__fact-icon--wide { width: 44px; height: 44px; }

@keyframes hero-art-scroll-fade {
  from { opacity: 1; }
  to { opacity: .14; }
}
@supports (animation-timeline: scroll()) and (animation-range: 0 100svh) {
  .hero__art {
    animation: hero-art-scroll-fade 1ms linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100svh;
  }
}

main { position: relative; overflow: hidden; }
main::before {
  position: absolute;
  top: 15rem;
  right: -25rem;
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(132, 82, 49, .11), transparent 68%);
  content: "";
  pointer-events: none;
}
.manifesto,
.section,
.project-detail,
.instances-note,
footer {
  width: min(var(--content), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}
.manifesto {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(18rem, 2.4fr) minmax(16rem, 1.4fr);
  gap: clamp(1.5rem, 4vw, 5rem);
  padding-block: clamp(6rem, 12vw, 12rem);
  border-bottom: 1px solid var(--line);
}
.manifesto h2,
.section__header h2,
.instances-note h2 {
  margin: 0;
  font-size: clamp(2.15rem, 4.4vw, 5.4rem);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1;
}
.manifesto > p:last-child,
.section__header > div > p,
.instances-note > div > p {
  margin: 0;
  color: var(--paper-muted);
  font-size: .98rem;
  line-height: 1.75;
}

.section { padding-block: clamp(5.5rem, 10vw, 10rem); border-bottom: 1px solid var(--line); }
.section__header {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(18rem, 3.9fr);
  gap: clamp(1.5rem, 4vw, 5rem);
  margin-bottom: clamp(3rem, 6vw, 6rem);
}
.section__header > div {
  display: grid;
  grid-template-columns: minmax(18rem, 2.5fr) minmax(15rem, 1fr);
  gap: clamp(2rem, 5vw, 7rem);
  align-items: end;
}

.network-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.panel { min-width: 0; padding: clamp(1.5rem, 3.4vw, 3.5rem); background: rgba(10, 8, 7, .92); }
.panel__topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--paper-muted);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.status__light { width: .35rem; height: .35rem; border-radius: 50%; background: var(--ember); box-shadow: 0 0 .65rem var(--ember); }
.field {
  display: grid;
  gap: .65rem;
  color: var(--paper-muted);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.field--select { margin: 2rem 0; }
input,
select {
  width: 100%;
  min-height: 3.5rem;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  outline: 0;
  background: rgba(238, 233, 225, .035);
  color: var(--paper);
  padding: .85rem 1rem;
  font: inherit;
  font-size: .94rem;
  letter-spacing: 0;
  text-transform: none;
}
select { cursor: pointer; }
input::placeholder { color: rgba(238, 233, 225, .35); }
input:hover,
select:hover { border-color: rgba(238, 233, 225, .55); }
input:focus-visible,
select:focus-visible { border-color: var(--ember); box-shadow: 0 1px 0 var(--ember); }
input:disabled,
select:disabled { cursor: not-allowed; opacity: .45; }
.instance-info {
  overflow-wrap: anywhere;
  color: var(--paper-muted);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .72rem;
  line-height: 1.9;
}
.instance-info strong { color: var(--paper); font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-size: .9rem; font-weight: 500; }
.pricing { padding-block: 1.1rem; color: var(--paper); font-size: .88rem; line-height: 1.75; }
.pricing p { margin: 1.1rem 0; }
.pricing strong { color: var(--ember); font-weight: 500; }
.pricing.error { color: var(--danger); }
.panel__note { margin: 1.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--paper-muted); font-size: .78rem; line-height: 1.7; }

.builder-card {
  display: grid;
  grid-template-columns: minmax(12rem, .65fr) minmax(0, 1.55fr);
  column-gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(1.5rem, 4vw, 4.5rem);
  background: var(--paper);
  color: var(--space);
}
.builder-card__intro { padding-right: clamp(0rem, 2vw, 2rem); }
.builder-card .panel__eyebrow,
.builder-card .memo-result__label { color: #6e665d; }
.builder-card__intro > p:last-child { margin: 1.5rem 0 0; color: #5c554e; font-size: .88rem; line-height: 1.75; }
form { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.75rem; }
.builder-card .field { color: #5e5750; }
.builder-card input,
.builder-card select { border-color: rgba(4, 3, 3, .28); background: rgba(4, 3, 3, .035); color: var(--space); }
.builder-card input::placeholder { color: rgba(4, 3, 3, .38); }
.builder-card input:hover,
.builder-card select:hover { border-color: rgba(4, 3, 3, .58); }
.builder-card input:focus-visible,
.builder-card select:focus-visible { border-color: #8a5c3d; box-shadow: 0 1px 0 #8a5c3d; }
.field--wide { grid-column: 1 / -1; }
.account-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; grid-column: 1 / -1; }
.account-fields[hidden],
.range-fields[hidden],
#single-field[hidden] { display: none; }
.range-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.memo-result { grid-column: 2; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(4, 3, 3, .18); }
.memo {
  display: block;
  min-height: 4rem;
  margin-top: 1rem;
  padding: 1.15rem 1.25rem;
  overflow-wrap: anywhere;
  background: var(--space);
  color: var(--paper);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .82rem;
  line-height: 1.55;
}
.help { min-height: 1.5em; margin: 1rem 0 0; color: #5c554e; font-size: .75rem; line-height: 1.6; }
.help.error { color: #9c3028; }
.builder-card__footnote { grid-column: 2; margin: 2.25rem 0 0; color: #6e665d; font-size: .72rem; line-height: 1.7; }

.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.principle { min-height: 23rem; padding: clamp(1.5rem, 3.6vw, 3.75rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.principle__number { margin: 0 0 clamp(3rem, 8vw, 8rem); color: var(--ember); font-size: .65rem; letter-spacing: .16em; }
.principle h3 { margin: 0 0 1.25rem; font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 400; }
.principle > p:last-child { max-width: 34rem; margin: 0; color: var(--paper-muted); font-size: .88rem; line-height: 1.75; }
code { color: #e6c8a6; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .88em; }

.instances-note { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(18rem, 3.9fr); gap: clamp(1.5rem, 4vw, 5rem); padding-block: clamp(5.5rem, 10vw, 10rem); }
.project-detail { display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 6rem); padding-block: clamp(3rem, 6vw, 6rem); border-bottom: 1px solid var(--line); scroll-margin-top: 2rem; }
.project-detail h2 { margin: 0; font-size: clamp(1.7rem, 2.6vw, 2.8rem); font-weight: 300; line-height: 1.15; letter-spacing: -.025em; }
.project-detail p { max-width: 65ch; margin: 0 0 1rem; color: var(--paper-muted); font-size: .98rem; line-height: 1.75; }
.project-detail p:last-child { margin-bottom: 0; }
.project-detail__links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; padding-top: .5rem; }
.project-detail__links a { color: var(--paper); text-underline-offset: .25em; }
.project-detail__links a:hover { color: var(--ember); }
.instances-note > div { display: grid; grid-template-columns: minmax(17rem, 1fr) minmax(17rem, 1.15fr); gap: clamp(2rem, 6vw, 8rem); }
footer { position: relative; isolation: isolate; display: flex; min-height: 9rem; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); color: var(--paper-muted); }
footer::before { position: absolute; inset: 0; z-index: -1; background: rgba(4, 3, 3, .94); box-shadow: 0 0 0 100vmax rgba(4, 3, 3, .94); clip-path: inset(0 -100vmax); content: ""; }
footer p { margin: 0; font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 64rem) {
  .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem; }
  .project-detail { grid-template-columns: 1fr; gap: 1.5rem; }
  .manifesto { grid-template-columns: 9rem 1fr; }
  .manifesto > p:last-child { grid-column: 2; }
  .section__header > div { grid-template-columns: 1fr; }
  .network-grid { grid-template-columns: 1fr; }
  .builder-card { grid-template-columns: 1fr; }
  .builder-card__intro { margin-bottom: 3rem; }
  .memo-result,
  .builder-card__footnote { grid-column: 1; }
  .instances-note > div { grid-template-columns: 1fr; }
}

@media (max-width: 81.25rem), (max-aspect-ratio: 1/1) {
  /* Restore the pre-counter art-first layout (41e088f): its cropped height is
     941 / (1672 * .7) of the viewport width. The large title, lead and CTA must
     begin below that artwork; shrinking this space makes them cover the ring.
     The ledger gets its own first-row region, so it does not move down with them. */
  .hero {
    --hero-art-height: calc(100vw * 941 / (1672 * .7));
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(var(--hero-art-height), auto) auto auto;
    min-height: 0; padding-top: 0; overflow: visible; background: transparent;
  }
  .hero__art {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: calc(1672 * .7) / 941;
    margin: 0;
  }
  .hero__detail { object-position: 100% 50%; }
  .hero__body { width: 100%; padding-block: 0 clamp(2.5rem, 8svh, 5rem); }
  .hero__facts { align-self: stretch; padding-bottom: 1.5rem; }
  h1 { font-size: clamp(2.75rem, calc(1rem + 8.9vw), 5.25rem); }
  .hero__lead { max-width: 40rem; }
}

@supports (animation-timeline: scroll()) and (animation-range: 0 100svh) {
  @media (max-width: 81.25rem), (max-aspect-ratio: 1/1) {
    .hero__art { animation-range: 0 80.398vw; }
  }
}

/* Use the SAME eligibility as the art-first layout. The former landscape-only
   condition hid EVH on near-square/tall windows regardless of heading tolerance. */
@media (max-width: 81.25rem), (max-aspect-ratio: 1/1) {
  .hero__compact-mark {
    position: absolute;
    top: var(--gutter);
    left: var(--gutter);
    padding-bottom: .21em;
    z-index: 2;
    color: var(--paper);
    text-decoration: none;
    text-shadow:
      0 0 .035em rgb(255 240 219 / .48),
      0 0 .12em rgb(244 223 197 / .45),
      0 0 .36em rgb(205 158 126 / .34),
      0 0 .75em rgb(155 106 78 / .2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .hero__compact-arrow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% - .075em);
    height: .18em;
    /* Keep the glow on an unclipped wrapper. Applying filter to the clipped
       polygon itself clips away the halo that should match the lettering. */
    filter:
      drop-shadow(0 0 .035em rgb(255 240 219 / .48))
      drop-shadow(0 0 .12em rgb(244 223 197 / .45))
      drop-shadow(0 0 .36em rgb(205 158 126 / .34))
      drop-shadow(0 0 .75em rgb(155 106 78 / .2));
    transition: filter .45s ease-out;
    pointer-events: auto;
  }
  .hero__compact-arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--paper);
    clip-path: polygon(0 0, 100% 0, 100% 28%, 50% 100%, 0 28%);
  }
  /* EVH fits the dark corner without covering the ring. Width/aspect alone
     cannot prove the full title is below view (tall viewports, zoom and reflow).
     Keep the observer gate: a bounded bottom-edge title reveal is tolerated;
     a substantially visible full heading replaces the compact brand. */
  /* Keep display gated by JS so no-script and observer failures stay closed.
     Opacity smooths real viewport/zoom transitions; visibility waits for the
     fade while JS removes the hidden link from focus/accessibility immediately. */
  .hero__compact-mark--ready {
    display: block;
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .7s, text-shadow .45s ease-out;
  }
  .hero__compact-mark--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .hero__compact-mark:focus-visible {
    outline: 1px solid var(--paper);
    outline-offset: .2em;
  }
  .hero__compact-mark:is(:hover, :focus-visible) {
    text-shadow:
      0 0 .035em rgb(255 240 219 / .67),
      0 0 .12em rgb(244 223 197 / .64),
      0 0 .36em rgb(205 158 126 / .48),
      0 0 .75em rgb(155 106 78 / .3);
  }
  .hero__compact-mark:is(:hover, :focus-visible) .hero__compact-arrow {
    filter:
      drop-shadow(0 0 .035em rgb(255 240 219 / .67))
      drop-shadow(0 0 .12em rgb(244 223 197 / .64))
      drop-shadow(0 0 .36em rgb(205 158 126 / .48))
      drop-shadow(0 0 .75em rgb(155 106 78 / .3));
  }
}

@media (max-width: 44rem) {
  :root { --gutter: 1.25rem; }
  .hero__facts { grid-template-columns: 1fr; gap: .7rem; }
  .manifesto,
  .section__header,
  .instances-note { grid-template-columns: 1fr; }
  .manifesto > p:last-child { grid-column: 1; }
  .manifesto h2 { margin-block: .5rem 1rem; }
  .section__header { gap: 1.5rem; }
  .section__header > div { gap: 1.5rem; }
  .section__header h2,
  .instances-note h2 { font-size: clamp(2.25rem, 12vw, 3.65rem); }
  .panel { padding: 1.35rem; }
  .panel__topline { align-items: flex-start; }
  form,
  .account-fields,
  .range-fields { grid-template-columns: 1fr; }
  .field--wide { grid-column: auto; }
  .builder-card { padding: 1.35rem; }
  .principles { grid-template-columns: 1fr; }
  .principle { min-height: 19rem; }
  footer { flex-wrap: wrap; padding-block: 2rem; }
  footer p { order: 3; width: 100%; }
}

@media (forced-colors: active), (prefers-contrast: more) {
  h1 { text-shadow: none; }
  .hero__art { display: none; }
  .hero { min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__detail { transition: none; }
  .hero__compact-mark--ready,
  .hero__compact-arrow { transition: none; }
}

/* Unboxed lower-right typography: above the fourth hero link on wide desktop, in a separate
   artwork region on compact screens. Long values/errors expand normal flow. */
.hero__stat-region { display: contents; }
.hero__bottom { display: flex; flex-direction: column; gap: 1.25rem; margin-top: auto; min-width: 0; }
.ledger-stat { align-self: flex-end; width: min(100%, 40rem); text-align: right; text-shadow: 0 1px 2px rgb(0 0 0 / .98), 0 0 8px rgb(0 0 0 / .95), 0 0 20px rgb(0 0 0 / .82), 0 0 36px rgb(0 0 0 / .6); }
.ledger-stat h2 {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--paper-muted);
  letter-spacing: .13em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  /* The small label crosses the brightest part of the artwork. Give it a
     tighter, denser shadow than the larger rate and total without adding a panel. */
  text-shadow:
    -1px -1px 1px #000,
    1px -1px 1px #000,
    -1px 1px 1px #000,
    1px 1px 1px #000,
    0 2px 4px #000,
    0 0 10px #000,
    0 0 22px #000,
    0 0 40px rgb(0 0 0 / .95);
}
.ledger-stat__reading { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: .25rem .8rem; margin: .35rem 0; font-variant-numeric: tabular-nums; }
.ledger-stat__number { margin: 0; min-height: 1.15em; max-width: 100%; font-size: clamp(2rem, 4.1vw, 4rem); font-weight: 400; line-height: 1.15; overflow-wrap: anywhere; }
#ledger-rate { text-align: right; min-width: 9ch; min-height: 1.5em; color: var(--paper-muted); font-size: .95rem; overflow-wrap: anywhere; max-width: 100%; }
#ledger-status, #ledger-checked { margin: .35rem 0; font-size: .72rem; line-height: 1.5; color: var(--paper-muted); overflow-wrap: anywhere; }
/* Reserve two notice lines even when its paragraph is hidden: showing/clearing
   a transient warning must not move the bottom-aligned count or its label. */
.ledger-stat__notice { min-height: 3em; font-size: .72rem; line-height: 1.5; }
#ledger-status { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 81.251rem) and (min-aspect-ratio: 1/1) {
  .hero__body { padding-bottom: 1rem; }
}
@media (max-width: 81.25rem), (max-aspect-ratio: 1/1) {
  .hero__body { padding-bottom: 1.5rem; }
  .hero__facts { padding-bottom: 0; }
}
@media (max-width: 44rem) {
  .hero__lead { margin-top: 1rem; }
  .hero__action { margin-top: 1rem; }
  .hero__bottom { gap: 1rem; }
  .hero__facts { text-align: right; }
  .hero__facts a { justify-content: flex-end; }
  .kicker { margin-bottom: 1rem; }
}
/* Compact artwork is separate from the full-text flow on every compact size,
   not just short landscape. Keep the counter in the artwork’s lower-right first
   view; long values/errors grow the row rather than colliding with body text. */
@media (max-width: 81.25rem), (max-aspect-ratio: 1/1) {
  .hero__bottom { display: contents; }
  .hero__stat-region {
    grid-row: 1; grid-column: 1; align-self: start;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-width: 0; min-height: min(var(--hero-art-height), 100svh);
    padding-block: 6rem clamp(2rem, 7svh, 4rem);
  }
  .hero__body { grid-row: 2; grid-column: 1; margin-top: 2rem; }
  .hero__facts { grid-row: 3; grid-column: 1; }
}

.operating-status { margin: 1.5rem 0 2rem; padding-block: 1.25rem; border-block: 1px solid var(--line); }
.operating-status__heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; }
.operating-status h3 { margin: 0; font-size: .72rem; color: var(--paper-muted); letter-spacing: .1em; text-transform: uppercase; }
#operating-tier { color: var(--ember); font-size: .9rem; }
.operating-status p { margin: .65rem 0 0; line-height: 1.6; font-size: .78rem; overflow-wrap: anywhere; }
.operating-status__balance { display: flex; align-items: baseline; gap: .65rem; flex-wrap: wrap; color: var(--paper-muted); }
#operating-balance { color: var(--paper); font-size: clamp(1.6rem, 3vw, 2.25rem); font-variant-numeric: tabular-nums; }
.operating-status progress { display: block; width: 100%; height: .45rem; margin-top: 1rem; border: 0; accent-color: var(--ember); background: var(--line); }
.operating-status progress[hidden] { display: none; }
.operating-status progress::-webkit-progress-bar { background: var(--line); }
.operating-status progress::-webkit-progress-value { background: var(--ember); }
.operating-status .operating-status__note { color: var(--paper-muted); font-size: .67rem; }