/* ===========================================================================
   Anthropic Capital Markets. One terminal plate, rebuilt to his review.

   The composition still comes off art/ref/reference.jpg: the two inks, the
   sage plate with a black field cut into it, the one box grammar of a 2 px
   paper ring over a 2 px void ring, the strip above and the band below, the
   dash-flanked heads, the striped wall. What his review of 2026-10-27
   changed, and why:

     the right column was a small window with its own scrollbar, hiding 278 px
       at 1920 and 502 px at 1024   -> gone. Nothing on this page scrolls but
       the page. Its content is panels that run down the work area, and the
       audit now fails on any inner scroller.
     the page sat in a 1120 column with 400 px of stripes each side, 41.7% of
       the window                   -> 1520, and the stripe is a narrow frame
       down each edge instead of two thirds of a screen of wallpaper.
     three columns of three different logics  -> two: a sticky rail that holds
       the files, and the work area beside it.
     slot rows 84 px tall, the fifth under the fold at 1280x720  -> 44 px.
     the key's dark chip meant nothing and its label was pressed right -> the
       chip is gone and the label reads from the left.
     value rows wandered and wrapped  -> label left, value right, on one right
       line, every row the same height.
     the dash rules were as long as the head was short -> 48 px each side, the
       same on every head on the site.
     the dimmest ink measured 5.39 : 1, which passes 4.5 but is the dimmest
       thing on the page             -> 6.13 : 1 and 6.49 : 1.
     type and spacing                -> his scale, and nothing off it.
   =========================================================================== */

@font-face {
  font-family: "Ark Pixel";
  src: url("../assets/fonts/ark-pixel-12.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Lilex";
  src: url("../assets/fonts/lilex-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Lilex";
  src: url("../assets/fonts/lilex-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Lilex";
  src: url("../assets/fonts/lilex-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --wall: #081a19;
  --wall-line: #485a4a;
  --paper: #9ac290;
  --ink: #103233;
  --void: #000000;
  /* the two muted tokens, raised on his review: they measured 5.39 and 4.99 */
  --paper-dim: #9abb93; /* 6.49 : 1 on --ink */
  --ink-dim: #1b3b34;   /* 6.13 : 1 on --paper */
  --live: #e8b23a;      /* 10.9 : 1 on --void, and it means one thing only */
  --paper-lit: #b0d2a6;
  --paper-hit: #8ab47f;
  --hair: #27443f;

  --page: 1520px;
  --rail: 264px;

  /* his spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* his type scale. 12 is not used here: his order of 2026-10-19 puts the
     floor at 14 px on a dark theme. */
  --t-label: 14px;
  --t-body: 16px;
  --t-value: 20px;
  --p-key: 24px;
  --p-head: 32px;
  --p-display: 48px;

  --pix: "Ark Pixel", "Courier New", monospace;
  --mono: "Lilex", ui-monospace, "SF Mono", "Consolas", monospace;

  --t-fast: 0.08s;
  --t-hover: 0.18s;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--wall);
}

body {
  margin: 0;
  padding: var(--s5) 0 var(--s7);
  min-height: 100vh;
  background-color: var(--wall);
  /* the wall is flat, and the stripe survives as a narrow frame down each
     edge of the window: 3 px on 13 px, the period measured off his picture */
  background-image:
    repeating-linear-gradient(to bottom, var(--wall-line) 0, var(--wall-line) 3px, transparent 3px, transparent 13px),
    repeating-linear-gradient(to bottom, var(--wall-line) 0, var(--wall-line) 3px, transparent 3px, transparent 13px);
  background-size: 22px 100%, 22px 100%;
  background-position: left top, right top;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--live);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip:focus {
  left: var(--s4);
  top: var(--s4);
  z-index: 9;
  background: var(--paper);
  color: var(--ink);
  padding: var(--s3) var(--s5);
  font-size: var(--t-body);
}

/* --- the plate ---------------------------------------------------------- */

.stage {
  width: min(var(--page), 100vw - 76px);
  margin: 0 auto;
}

.plate {
  width: 100%;
  background: var(--paper);
  padding: var(--s3);
}

/* --- the strip above ---------------------------------------------------- */

.strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s5);
  min-height: 48px;
  padding: 0 var(--s3);
  color: var(--ink);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.strip .states {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--s5);
  align-self: start;
  margin-top: var(--s3);
  padding-top: var(--s2);
}
.strip .states::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--ink);
}
.strip .state {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}
.strip .k {
  color: var(--ink-dim);
}
.strip .v {
  font-weight: 700;
}
.strip .state.is-live .v {
  background: var(--ink);
  color: var(--live);
  padding: 1px var(--s2);
}

/* --- the field: the hole cut into the plate, now two columns ------------- */

.field {
  background: var(--void);
  padding: var(--s6);
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: var(--s6);
  align-items: start;
}

/* --- the one box grammar, measured on five boxes of his picture --------- */

.box {
  position: relative;
  border: 2px solid var(--void);
  outline: 2px solid var(--paper);
}
.box--paper {
  background: var(--paper);
  color: var(--ink);
}
.box--ink {
  background: var(--ink);
  color: var(--paper);
}

/* --- the rail: the files, following the page ---------------------------- */

.rail {
  position: sticky;
  top: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}

.wordmark {
  padding: var(--s4) var(--s5);
  font-family: var(--pix);
  font-size: var(--p-key);
  line-height: 1.26;
  letter-spacing: 0.02em;
}
.wordmark::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--paper);
  pointer-events: none;
}
.wordmark .tick {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-top: var(--s1);
}

.sheet {
  padding: var(--s4) 0 var(--s2);
}
.sheet h2 {
  margin: 0 var(--s5) var(--s3);
  font-size: var(--t-label);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.slots {
  list-style: none;
  margin: 0;
  padding: 0;
}
.slots li + li {
  border-top: 1px solid var(--ink-dim);
}
.slot {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: var(--s3);
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: var(--s3) var(--s5);
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover);
}
.slot .n {
  font-family: var(--pix);
  font-size: var(--t-value);
  line-height: 1.1;
  text-align: right;
  color: var(--ink-dim);
}
.slot .nm {
  font-family: var(--pix);
  font-size: var(--t-value);
  line-height: 1.1;
}
.slot:hover {
  background: var(--paper-hit);
}
.slot:focus-visible {
  outline-offset: -3px;
}
/* the open file INVERTS: this page has two states and says which with ink */
.slot[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
  cursor: default;
}
.slot[aria-current="page"] .n {
  color: var(--paper-dim);
}
.slot[aria-current="page"]:hover {
  background: var(--ink);
}

/* --- the work area ------------------------------------------------------ */

.work {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

/* the one reading of the screen, kept short */
.display {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s7);
  padding: var(--s5) var(--s6);
}
.display .cap {
  grid-column: 1;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.display .value {
  grid-column: 1;
  font-family: var(--pix);
  font-size: var(--p-display);
  line-height: 1.08;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  margin-top: var(--s2);
}
.display .value.is-small {
  font-size: var(--p-head);
}
.display .sub {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: min(360px, 40vw);
  border-collapse: collapse;
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
}
.display .sub th,
.display .sub td {
  padding: var(--s1) 0;
  vertical-align: baseline;
}
.display .sub th {
  text-align: left;
  font-weight: 400;
  color: var(--ink-dim);
  white-space: nowrap;
}
.display .sub td {
  text-align: right;
  font-weight: 500;
  padding-left: var(--s4);
}
.display .art {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 196px;
  height: auto;
  justify-self: end;
}

/* the three keys, in one row, read from the left */
.keys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
}
.key {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: var(--s4) var(--s5);
  font-family: var(--pix);
  font-size: var(--p-key);
  line-height: 1.15;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-hover), transform var(--t-fast);
}
.key:hover {
  background: var(--paper-hit);
}
.key:active {
  transform: translateY(2px);
}
.key[aria-disabled="true"],
.key:disabled {
  cursor: not-allowed;
  color: var(--ink-dim);
}
.key[aria-disabled="true"]:hover,
.key:disabled:hover {
  background: var(--paper);
}
.key[aria-disabled="true"]:active,
.key:disabled:active {
  transform: none;
}

/* --- the panels: they run down the work area, none of them scrolls ------ */

.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--s5);
  /* every panel in a row is the same height: a short box beside a tall one
     reads as an unfinished page, which is his order of 2026-09-20 */
  align-items: stretch;
}
.panel {
  padding: var(--s5);
  min-width: 0;
}
.panel--wide {
  grid-column: 1 / -1;
}

/* every head on the site carries the same two 48 px dashed rules */
.panel h2,
.ident h2 {
  display: grid;
  grid-template-columns: minmax(0, 48px) auto minmax(0, 48px);
  justify-content: center;
  align-items: center;
  column-gap: var(--s3);
  margin: 0 0 var(--s4);
  font-family: var(--pix);
  font-size: var(--p-key);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
}
.panel h2::before,
.panel h2::after,
.ident h2::before,
.ident h2::after {
  content: "";
  height: 2px;
  background-image: repeating-linear-gradient(
    to right,
    var(--paper-dim) 0,
    var(--paper-dim) 6px,
    transparent 6px,
    transparent 12px
  );
}

/* a value row: label left, value right, on one right line, equal heights */
.rows {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s5);
}
.rows dt {
  grid-column: 1;
  min-height: 34px;
  display: flex;
  align-items: center;
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.rows dd {
  grid-column: 2;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  font-size: var(--t-value);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}
.rows dd.is-live {
  color: var(--live);
}
.rows .wide {
  grid-column: 1 / -1;
  justify-content: flex-start;
  text-align: left;
}

.panel p {
  margin: 0 0 var(--s3);
  font-size: var(--t-body);
}
.panel p:last-child {
  margin-bottom: 0;
}
.panel .note {
  color: var(--paper-dim);
  font-size: var(--t-label);
  line-height: 1.5;
}
.panel a {
  color: var(--paper);
  text-underline-offset: 3px;
}
.panel a:hover {
  color: var(--live);
}
.panel .empty {
  color: var(--paper-dim);
  font-size: var(--t-body);
  margin: 0;
}
.panel .terms ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.panel .terms li {
  position: relative;
  padding-left: var(--s4);
  font-size: var(--t-body);
  line-height: 1.5;
}
.panel .terms li + li {
  margin-top: var(--s2);
}
.panel .terms li::before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0;
}
.panel .rows + .note,
.panel .terms + .note,
.panel .rows + p {
  margin-top: var(--s4);
}

/* an entry in a ledger panel */
.entry {
  margin: 0;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--hair);
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--s4);
  align-items: baseline;
}
.entry:last-child {
  border-bottom: 0;
}
.entry dt {
  grid-column: 1;
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.entry dd {
  grid-column: 2;
  margin: 0;
  font-size: var(--t-value);
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.entry dd.note {
  grid-column: 1 / -1;
  text-align: left;
  font-size: var(--t-label);
  font-weight: 400;
  color: var(--paper-dim);
  margin-top: var(--s1);
}

/* --- the $ACM panel: its own panel, never part of a scrolling list ------ */

.ident {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s6);
  row-gap: var(--s3);
  align-items: center;
}
.ident h2 {
  grid-column: 1 / -1;
}
.mint {
  grid-column: 1;
  margin: 0;
  background: var(--void);
  color: var(--paper);
  padding: var(--s3) var(--s4);
  font-size: var(--t-body);
  line-height: 1.5;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  user-select: all;
}
.mint.is-empty {
  color: var(--paper-dim);
  user-select: auto;
}
.copy {
  grid-column: 2;
  min-height: 56px;
  min-width: 170px;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  padding: 0 var(--s5);
  font-family: var(--pix);
  font-size: var(--p-key);
  cursor: pointer;
  transition: background var(--t-hover), transform var(--t-fast);
}
.copy:hover {
  background: var(--paper-lit);
}
.copy:active {
  transform: translateY(2px);
}
.copy:disabled {
  background: var(--ink);
  color: var(--paper-dim);
  cursor: not-allowed;
  box-shadow: inset 0 0 0 2px var(--paper-dim);
}
.marks {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: var(--s3);
}
.mark {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  background: var(--void);
  box-shadow: inset 0 0 0 2px var(--paper);
  color: var(--paper);
  text-decoration: none;
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 var(--s4);
  transition: background var(--t-hover), transform var(--t-fast);
}
.mark img {
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}
/* each official mark sized by its own visible ink on black, so the four read
   at one optical weight: X 26%, pump 45%, dexscreener 40%, solscan 56% */
.mark--x img { width: 18px; height: 18px; }
.mark--pump img { width: 18px; height: 18px; }
.mark--dex img { width: 20px; height: 20px; }
.mark--solscan img { width: 17px; height: 17px; }
.mark:hover {
  background: var(--ink);
}
.mark:active {
  transform: translateY(2px);
}
.mark[aria-disabled="true"] {
  cursor: not-allowed;
  box-shadow: inset 0 0 0 2px var(--paper-dim);
  color: var(--paper-dim);
}
.mark[aria-disabled="true"] img {
  opacity: 0.74;
}
.mark[aria-disabled="true"]:hover {
  background: var(--void);
}
.mark[aria-disabled="true"]:active {
  transform: none;
}

/* --- the band below ----------------------------------------------------- */

.band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s5);
  min-height: 48px;
  padding: 0 var(--s3);
  color: var(--ink);
  font-size: var(--t-label);
}
.band .legal {
  position: relative;
  padding-top: var(--s2);
  align-self: start;
  margin-top: var(--s3);
  letter-spacing: 0.02em;
}
.band .legal::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--ink);
}
.band .cmd {
  display: flex;
  gap: var(--s5);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.band .cmd b {
  font-weight: 700;
}
.band .cmd .k {
  color: var(--ink-dim);
  margin-right: var(--s2);
}

/* --- narrower windows: the rail lies down above the work ---------------- */

@media (max-width: 1120px) {
  .field {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s5);
    padding: var(--s5);
  }
  .rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .rail .wordmark {
    flex: 1 1 260px;
  }
  .rail .sheet {
    flex: 2 1 420px;
  }
  .rail .slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  }
  .slots li + li {
    border-top: 0;
  }
  .slots li {
    border-top: 1px solid var(--ink-dim);
  }
}

@media (max-width: 760px) {
  .stage {
    width: min(var(--page), 100vw - 40px);
  }
  .field {
    padding: var(--s4);
  }
  .display {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s4);
    padding: var(--s5) var(--s6);
  }
  .display .sub,
  .display .art {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }
  .display .art {
    max-width: 220px;
    justify-self: center;
  }
  .keys {
    grid-template-columns: minmax(0, 1fr);
  }
  .ident {
    grid-template-columns: minmax(0, 1fr);
  }
  .copy {
    grid-column: 1;
    width: 100%;
  }
  .rail .slots {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  }
}

@media (max-width: 440px) {
  :root {
    --p-display: 40px;
  }
  .panel h2,
  .ident h2 {
    grid-template-columns: minmax(0, 20px) auto minmax(0, 20px);
    white-space: normal;
  }
  .rows {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  .rows dt,
  .rows dd {
    grid-column: 1;
    min-height: 0;
    justify-content: flex-start;
    text-align: left;
  }
  .rows dt {
    padding-top: var(--s2);
  }
  .rows dd {
    position: relative;
    padding-bottom: var(--s3);
    margin-bottom: var(--s2);
  }
  .rows dd::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--hair);
  }
  .rows dd:last-of-type {
    margin-bottom: 0;
  }
  .rows dd:last-of-type::after {
    display: none;
  }
  .entry {
    grid-template-columns: minmax(0, 1fr);
  }
  .entry dt,
  .entry dd {
    grid-column: 1;
    text-align: left;
  }
  .stage {
    width: min(var(--page), 100vw - 24px);
  }
  .rail .slots {
    grid-template-columns: minmax(0, 1fr);
  }
  .marks {
    grid-template-columns: minmax(0, 1fr);
  }
  .strip,
  .band {
    grid-template-columns: minmax(0, 1fr);
    white-space: normal;
    padding: var(--s3);
  }
  .strip .states {
    margin-top: 0;
    padding-top: 0;
    flex-wrap: wrap;
    gap: var(--s1) var(--s4);
  }
  .strip .states::before {
    display: none;
  }
  .band .legal {
    margin-top: 0;
  }
  .band .cmd {
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* At 440 and under, the reading's own table has no room for two columns
   either, so the label sits over its value like every other row does there. */
@media (max-width: 440px) {
  .display .sub,
  .display .sub tbody,
  .display .sub tr,
  .display .sub th,
  .display .sub td {
    display: block;
    width: 100%;
  }
  .display .sub th {
    white-space: normal;
    padding-top: var(--s2);
  }
  .display .sub td {
    text-align: left;
    padding-left: 0;
    padding-bottom: var(--s2);
  }
}

/* a numbered list, for a panel whose content is prose rather than readings */
.panel .steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.panel .steps li {
  counter-increment: step;
  position: relative;
  padding-left: var(--s6);
  font-size: var(--t-body);
  line-height: 1.5;
}
.panel .steps li + li {
  margin-top: var(--s3);
}
.panel .steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--pix);
  font-size: var(--t-value);
  line-height: 1.2;
  color: var(--paper-dim);
}