/* ============================================================================
   PICKAXE. One issue of a mining computer magazine whose cover is a live
   section of the ground. Measured off art/ref/analog-computing-1984-02.jpg:
   the issue line at 0..5.0% of the frame, the masthead plate 13.94% tall and
   4.72:1, the art field 45.9%, the hard horizon at 65.4%, the colour band
   34.6%, the code plate knocked into its lower left.
   One container, one scale, one meaning per ink (NOTE.md > Type and colour).
   ========================================================================== */

@font-face { font-family: "Audiowide"; src: url("/font/audiowide-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/font/fraunces-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/font/fraunces-black-italic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/font/manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/font/manrope-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/font/manrope-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Plex"; src: url("/font/plexmono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url("/font/plexmono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --mast: 748px;          /* the masthead lockup: a third off the 1120 it used to be */
  --black: #141318;
  --paper: #E7D7B6;
  --cyan: #2FA6D4;
  --ore: #F5C542;
  --clay: #B4452F;
  --seam: #4A978B;
  --navy: #26324B;

  --sky: #0E0D12;          /* the art field: his black star ground */
  --on-dark: #F3EFE4;      /* text on the field */
  --on-dark-dim: #B9B2A2;  /* one muted token, 5.6:1 on the field */
  --on-paper: #141318;
  --on-paper-dim: #574C37;
  --on-seam: #0E1A1C;

  --page: 1120px;
  --gut: 24px;

  --t16: 16px; --t20: 20px; --t24: 24px; --t32: 32px; --t48: 48px;
  --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px; --s24: 24px; --s32: 32px; --s48: 48px;

  --display: "Audiowide", "Trebuchet MS", sans-serif;
  --head: "Fraunces", Georgia, serif;
  --text: "Manrope", system-ui, sans-serif;
  --mono: "Plex", ui-monospace, "Courier New", monospace;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--sky); }
body {
  background: var(--sky);
  color: var(--on-dark);
  font: 400 var(--t16)/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.col { width: min(100% - (var(--gut) * 2), var(--page)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--ore); color: var(--black); padding: var(--s12) var(--s24);
  font: 600 var(--t16)/1.2 var(--text);
}
.skip:focus { left: var(--s16); top: var(--s16); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ore); outline-offset: 3px;
}

/* ---------------------------------------------------------------- the issue line (his 0..5.0%) */
.issue {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline;
  gap: var(--s16);
  padding-block: var(--s24) var(--s8);
  font: 600 var(--t16)/1.3 var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-dark-dim);
}
.issue b { color: var(--ore); font-weight: 600; }
.issue > :nth-child(2) { text-align: center; color: var(--on-dark); }
.issue > :nth-child(3) { text-align: right; }

/* ---------------------------------------------------------------- the tagline (his yellow caps) */
.tagline {
  margin: 0 0 var(--s12);
  text-align: center;
  font: 800 var(--t16)/1.3 var(--text);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ore);
}

/* ---------------------------------------------------------------- the masthead plate */
.mast { position: relative; aspect-ratio: 4.72; margin-bottom: 72px; }
.mast canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mast h1 {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  margin: 0; padding-inline: 3.5%;
  font-family: var(--display); font-weight: 400;
  font-size: calc(100cqw * 0.179);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ore);
  -webkit-text-stroke: 0.09em var(--black);
  paint-order: stroke fill;
  white-space: nowrap;
}
.mast-sub {
  position: absolute; left: 0; right: 0; bottom: -0.30em;
  text-align: center;
  font: italic 900 clamp(24px, 6.4cqw, 64px)/1 var(--head);
  color: var(--ore);
  -webkit-text-stroke: 0.1em var(--black);
  paint-order: stroke fill;
}
/* the issue line, the tagline and the plate are ONE lockup on one width, centred in the column:
   his review of 2026-11-03 read three elements on three different measures */
.cover-head { width: min(100%, var(--mast)); margin-inline: auto; container-type: inline-size; }

/* a smaller running head on the inside pages */
.runhead {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s24);
  padding-block: var(--s12) var(--s16);
}
.rule { height: 3px; background: var(--cyan); margin-bottom: var(--s32); }
.runhead a.rh-name {
  font-family: var(--display); font-size: var(--t32); line-height: 1;
  color: var(--ore); text-decoration: none;
  -webkit-text-stroke: 0.06em var(--black); paint-order: stroke fill;
}
.runhead .rh-page { font: 700 var(--t20)/1.2 var(--head); color: var(--on-dark); }

/* ---------------------------------------------------------------- the art field (his 19.5..65.4%) */
.field { position: relative; }
.field canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
.cover-field { min-height: 200px; height: clamp(200px, calc(65.4vh - 352px), 400px); }
.field-read {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end; gap: var(--s16);
  height: 100%; padding-bottom: var(--s24);
}
.field-read > * { max-width: 62%; }   /* the right third of the column belongs to the object */
.depth-read .lbl {
  display: block; font: 600 var(--t16)/1.3 var(--mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--on-dark-dim);
}
.depth-read .val {
  display: block; font: 600 var(--t48)/1 var(--mono); color: var(--clay);
  margin-top: var(--s8);
}
.depth-read .val.unset { font-size: var(--t32); color: var(--on-dark-dim); }
.depth-read .sub { display: block; font: 600 var(--t16)/1.4 var(--mono); color: var(--on-dark); margin-top: var(--s8); }
.max-read { display: grid; grid-template-columns: repeat(2, minmax(0, 230px)); gap: var(--s48); }
.max-read > span { display: block; }
.max-read .lbl { display: block; font: 600 var(--t16)/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-dim); }
.max-read .val { display: block; font: 600 var(--t20)/1.35 var(--mono); color: var(--on-dark); white-space: nowrap; }

/* ---------------------------------------------------------------- the surface band (his 65.4..100%) */
.surface {
  position: relative;
  background: var(--seam) url("/img/press.png") repeat;
  border-top: 4px solid var(--black);
  border-bottom: 4px solid var(--black);
  color: var(--on-seam);
  padding-block: var(--s32);
}
.surface-in { position: relative; z-index: 1; display: grid; grid-template-columns: 360px 1fr; gap: var(--s32); align-items: center; }

/* the nav: five spoil heaps scattered across the surface, not a row, a rail or a ladder */
.heaps { position: relative; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s16); align-items: end; margin: 0; padding: 0; list-style: none; }
.heaps li { display: flex; flex-direction: column; align-items: center; }
.heaps a {
  display: block; text-decoration: none; color: var(--on-seam); text-align: center;
  transition: transform .18s ease, filter .18s ease;
}
.heaps img { display: block; margin: 0 auto var(--s12); width: 112px; height: auto; }
.heaps .nm {
  display: block; text-align: center; width: 100%; font: 700 var(--t16)/1.2 var(--head);
  background: var(--paper); border: 2px solid var(--black);
  padding: var(--s8) var(--s16);
  white-space: nowrap;
}
.heaps .ct { display: block; font: 600 var(--t16)/1.4 var(--mono); margin-top: var(--s8); color: var(--on-seam); white-space: nowrap; }
.heaps a { width: 100%; }
.heaps a:hover, .heaps a:focus-visible { transform: translateY(-4px); filter: drop-shadow(0 0 10px rgba(245,197,66,.85)); }
.heaps a:active { transform: translateY(0); filter: none; }
.heaps a:active .nm { background: #D9C8A4; }
.heaps a[aria-current="page"] .nm { background: var(--ore); }

/* the code block: his barcode plate, knocked into the band's lower left */
.code {
  border: 14px solid transparent;
  border-image: url("/img/plate.png") 14 fill / 14px / 0 stretch;
  background: transparent; color: var(--on-paper);
  padding: var(--s32);
}
.code h2 {
  margin: 0 0 var(--s12); font: 600 var(--t16)/1.2 var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-paper-dim);
}
.code canvas { display: block; width: 100%; height: 44px; margin-bottom: var(--s12); }
.mint {
  font: 400 var(--t16)/1.5 var(--mono); color: var(--on-paper);
  overflow-wrap: anywhere; min-width: 0;
  background: rgba(20,19,24,.08); border: 2px solid rgba(20,19,24,.35);
  padding: var(--s8) var(--s16); user-select: all;
}
.mint:not(.empty) { word-break: break-all; }
.mint.empty { color: var(--on-paper-dim); user-select: none; }
.code-row { display: flex; gap: var(--s8); align-items: stretch; margin-bottom: var(--s16); }
.code-row .mint { flex: 1 1 auto; }
.code-row .key { flex: 0 0 auto; min-width: max-content; }
.keys { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s8); }

/* ---------------------------------------------------------------- printed keys */
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s8);
  min-height: 52px; padding: var(--s8) var(--s12);
  font: 600 var(--t16)/1.2 var(--text); color: var(--on-paper);
  text-decoration: none; text-align: center; min-width: 0; white-space: nowrap;
  cursor: pointer; background: transparent;
  border: 10px solid transparent; border-width: 10px 16px 16px 10px;
  border-image: url("/img/key.png") 10 16 16 10 fill / 10px 16px 16px 10px / 0 stretch;
  transition: transform .08s ease;
}
.key:hover { filter: brightness(1.05); }
.key:active { transform: translate(3px, 3px); border-image-source: url("/img/key-press.png"); }
.key[aria-disabled="true"], .key:disabled { opacity: .74; cursor: not-allowed; filter: grayscale(.4); }
.key-big { min-height: 68px; font-size: var(--t20); font-weight: 800; padding: var(--s12) var(--s16); }
.key-ore { color: var(--on-paper); }

/* ---------------------------------------------------------------- underground: the section */
.mine { background: var(--sky); padding-block: var(--s48); }
.section-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--s48); align-items: stretch; }
.section-grid > * { display: flex; flex-direction: column; gap: var(--s24); }
.section-grid > * > .plate:last-child { flex: 1 1 auto; }
#section { display: block; width: 100%; height: auto; }

.plate {
  border: 14px solid transparent;
  border-image: url("/img/plate.png") 14 fill / 14px / 0 stretch;
  color: var(--on-paper); padding: var(--s32);
}
.plate + .plate { margin-top: 0; }
.plate h2 {
  margin: 0 0 var(--s12); font: 600 var(--t16)/1.2 var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-paper-dim);
}
.plate h3 { margin: var(--s16) 0 var(--s8); font: 700 var(--t20)/1.3 var(--head); }
.plate p { margin: 0 0 var(--s12); }
.plate p:last-child { margin-bottom: 0; }

.rows { display: grid; gap: 0; margin: 0 calc(var(--s32) * -1); }
.rows div { min-width: 0; display: flex; justify-content: space-between; gap: var(--s16); align-items: baseline; border-bottom: 1px dashed rgba(20,19,24,.28); padding: var(--s12) var(--s32); }
.rows div:last-child { border-bottom: 0; }
.rows dt, .rows .k { font: 400 var(--t16)/1.5 var(--text); color: var(--on-paper-dim); min-width: 0; }
.rows dd, .rows .v { margin: 0; font: 600 var(--t16)/1.5 var(--mono); color: var(--on-paper); text-align: right; white-space: nowrap; }
.rows .v.big { font-size: var(--t24); }
.rows .v.ore { color: #8A6407; }
.rows .v.empty { color: var(--on-paper-dim); font-weight: 400; }

.pot-val { font: 600 var(--t32)/1.1 var(--mono); color: #8A6407; display: block; margin-bottom: var(--s8); }

/* a section title on the dark field */
.head {
  margin: var(--s48) 0 var(--s24);
  font: 700 var(--t32)/1.15 var(--head); color: var(--on-dark);
}
.head.first { margin-top: 0; }
.lede { max-width: 62ch; color: var(--on-dark); font-size: var(--t16); }
.note { color: var(--on-dark-dim); font-size: var(--t16); }

/* the strata table */
.strata { width: 100%; border-collapse: collapse; margin-top: var(--s16); }
.strata caption { text-align: left; font: 600 var(--t16)/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--on-paper-dim); padding-bottom: var(--s12); }
.strata th, .strata td { text-align: left; padding: var(--s12) var(--s16); border-bottom: 2px solid rgba(20,19,24,.25); }
.strata { table-layout: fixed; }
.strata col.c1 { width: 26%; } .strata col.c2 { width: 42%; } .strata col.c3 { width: 32%; }
.strata thead th { font: 700 var(--t16)/1.3 var(--head); }
.strata tbody th, .strata tbody td { font: 600 var(--t16)/1.3 var(--mono); }
.strata td { font: 600 var(--t16)/1.3 var(--mono); }
.strata td:last-child, .strata th:last-child { text-align: right; }
.strata tr[data-now="1"] { background: rgba(245,197,66,.45); }

/* a board */
.board { width: 100%; border-collapse: collapse; }
.board caption { text-align: left; font: 600 var(--t16)/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--on-paper-dim); padding-bottom: var(--s12); }
.board th, .board td { padding: var(--s12) var(--s16); border-bottom: 2px solid rgba(20,19,24,.22); text-align: left; }
.board thead th { font: 700 var(--t16)/1.3 var(--head); }
.board tbody th, .board tbody td { font: 600 var(--t16)/1.4 var(--mono); }
.board tbody td[colspan] { text-align: center; padding: var(--s32) var(--s16); font: 400 var(--t16)/1.5 var(--text); color: var(--on-paper-dim); }
.board td { font: 600 var(--t16)/1.4 var(--mono); }
.board td.addr { font-weight: 400; word-break: break-all; }
.board td.num, .board th.num { text-align: right; }

/* a form field */
.field-row { display: flex; gap: var(--s12); flex-wrap: wrap; align-items: stretch; }

.field-row input {
  flex: 1 1 200px; min-width: 0; min-height: 52px;
  font: 400 var(--t16)/1.4 var(--mono); color: var(--on-paper);
  padding: var(--s12) var(--s16);
  background: rgba(20,19,24,.06); border: 2px solid rgba(20,19,24,.5);
}
.field-row input::placeholder { color: var(--on-paper-dim); }
/* the field and the key it sits beside are one row of one height (his review of 2026-11-03) */
.field-row > input, .field-row > .key, .field-row > .key-big { min-height: 64px; height: 64px; }
.field-row > .key-big { padding: 0 var(--s24); font-size: var(--t20); }
.field-row > .key { padding: 0 var(--s16); }

.live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------------------------------------------------------------- phone */
@media (max-width: 1180px) {
  .surface-in { grid-template-columns: 1fr; gap: var(--s32); }
  .heaps img { width: 96px; }
}
@media (max-width: 900px) {
  :root { --gut: 16px; }
  .surface-in { grid-template-columns: 1fr; gap: var(--s32); }
  .section-grid { grid-template-columns: 1fr; }
  .heaps { grid-template-columns: repeat(2, 1fr); gap: var(--s24); }
  .heaps img { width: 88px; }
  .heaps img { max-width: 120px; }
  .cover-field { height: auto; min-height: 220px; }
  .field-read { padding-block: var(--s24); }
  .max-read { grid-template-columns: 1fr; gap: var(--s16); }
  .max-read .val { white-space: normal; }
  .field-read > * { max-width: 100%; }
  .mast { margin-bottom: 34px; }
  .mast-sub { bottom: -0.40em; }
}
@media (max-width: 420px) {
  .heaps { grid-template-columns: 1fr; }
  .heaps img { width: 76px; }
  .issue { grid-template-columns: 1fr; gap: var(--s4); }
  .issue > * { text-align: left !important; }
}

/* the phone's fixed pot and dig key, the brief's "котёл и кнопка копать закреплены внизу" */
.dock { display: none; }
@media (max-width: 900px) {
  .dock {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    align-items: center; gap: var(--s12);
    background: var(--paper); border-top: 4px solid var(--black);
    padding: var(--s12) var(--s24);
    padding-bottom: calc(var(--s12) + env(safe-area-inset-bottom));
  }
  .dock .amt { font: 600 var(--t16)/1.2 var(--mono); color: var(--on-paper); flex: 1 1 auto; }
  .dock .amt b { display: block; font: 600 var(--t24)/1.1 var(--mono); color: #8A6407; }
  body.has-dock { padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- the four steps of the method */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s24); align-items: stretch; }
.steps .step { display: grid; grid-template-rows: auto auto 1fr; }
.steps .n {
  display: block; font: 600 var(--t32)/1.1 var(--mono); color: #8A6407; margin-bottom: var(--s8);
}
.steps h3 { margin: 0 0 var(--s8); font: 700 var(--t20)/1.25 var(--head); }
.steps p { margin: 0; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* prose inside a plate */
.plate ul { margin: 0 0 var(--s12); padding-left: 1.2em; }
.plate li { margin-bottom: var(--s4); }
.plate code { font: 600 var(--t16)/1.5 var(--mono); color: #7A3A26; }
.plate a { color: #7A3A26; }
.board a { color: #7A3A26; }

/* ---------------------------------------------------------------- a table on a narrow screen
   stacks: the head goes, every row becomes a block and every cell carries its own label, so the
   page never scrolls sideways and nothing is clipped. */
@media (max-width: 760px) {
  .board, .strata, .board tbody, .strata tbody, .board tr, .strata tr { display: block; width: 100%; }
  .board thead, .strata thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .board tr, .strata tr { border-bottom: 3px solid rgba(20,19,24,.3); padding: var(--s8) 0; }
  .board tr:last-child, .strata tr:last-child { border-bottom: 0; }
  .board td, .board th, .strata td, .strata th {
    display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--s12);
    border: 0; padding: var(--s4) var(--s24); text-align: right; overflow-wrap: anywhere;
  }
  .board td::before, .board th::before, .strata td::before, .strata th::before {
    content: attr(data-l); color: var(--on-paper-dim); text-align: left;
    font: 400 var(--t16)/1.5 var(--text); overflow-wrap: anywhere;
  }
  .board td.addr { word-break: break-all; }
  .board caption, .strata caption { padding: 0 var(--s24) var(--s12); }
}

/* a narrow phone: the printed frames keep their air and give the content the rest */
@media (max-width: 560px) {
  .plate, .code { padding: var(--s24); }
  .rows { margin: 0 calc(var(--s24) * -1); }
  .rows div { padding: var(--s12) var(--s24); }
  .board td, .board th, .strata td, .strata th { padding: var(--s4) var(--s16); }
  .rows dd, .rows .v { white-space: normal; }
  .board caption, .strata caption { padding: 0 var(--s16) var(--s12); }
}

/* a grid child will not shrink past its content unless it is told it may */
.section-grid > *, .surface-in > *, .steps > * { min-width: 0; }
#section { max-width: 100%; }

/* the label of the calculator's own field, which is the one field with a visible label */
.calc-label { align-self: center; font: 600 var(--t16)/1.5 var(--text); color: var(--on-paper); }

/* the band behind the five ways in: more of his scattered plotted mountains, further off, carrying
   nothing and inviting nothing. They are what fills his own band, and they fill ours. */
.back-heaps { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.back-heaps img { position: absolute; width: 64px; opacity: .40; }
@media (max-width: 1180px) { .back-heaps { display: none; } }

.mine.short { padding-bottom: var(--s16); }

/* ---------------------------------------------------------------- the departure mark
   Every outward key wears the SAME printed mark, not a platform icon: pump.fun answers 403 to a
   datacentre so its own file cannot be fetched from here, and drawing a lookalike is a hard ban. A
   row where two keys wear a mark and two do not reads as a row that failed to load, so all four
   carry this one, which belongs to the page and means only "this leaves the page". */
.key .mark { width: 16px; height: 15px; flex: 0 0 auto; opacity: .72; }
.key[aria-disabled="true"] .mark, .key:disabled .mark { opacity: .4; }