/* ==========================================================================
   Post Mundane — v2.1
   The site is a drawing set. Grey is what exists, blue is what we install,
   orange is the people it is installed for.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
/* The light palette is defined on bare :root so it applies in the un-stamped
   "system" state. Dark redefines TOKENS ONLY, never component colours. */
:root {
  --paper:      #ffffff;
  --sheet:      #f3f4f6;
  --sheet-deep: #e9ebef;
  --ink:        #0d1117;
  --graphite:   #5b6472;   /* cool-biased neutral, not a default mid-grey */
  --faint:      #8a94a3;
  --hair:       #dcdfe5;
  --hair-soft:  #ebedf1;

  --blue:       #0b3df5;   /* the intervention */
  --blue-deep:  #0730c4;
  --blue-wash:  #e7ecfe;
  --orange:     #ff4d1c;   /* the people */
  --orange-wash:#ffe9e2;

  --on-blue:    #ffffff;
  --on-orange:  #1a0700;

  /* type */
  --display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif:   "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* measure + rhythm */
  --gutter: clamp(20px, 4.5vw, 64px);
  --rule: 1px;
  --sheet-pad: clamp(56px, 8vw, 128px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #0b0d11;
    --sheet:      #12151b;
    --sheet-deep: #191d25;
    --ink:        #eef1f5;
    --graphite:   #98a1b0;
    --faint:      #6c7686;
    --hair:       #262b34;
    --hair-soft:  #1b1f27;

    --blue:       #4b73ff;
    --blue-deep:  #6b8bff;
    --blue-wash:  #131b3a;
    --orange:     #ff6b42;
    --orange-wash:#2a1109;

    --on-blue:    #060a18;
    --on-orange:  #180500;
  }
}

:root[data-theme="dark"] {
  --paper:      #0b0d11;
  --sheet:      #12151b;
  --sheet-deep: #191d25;
  --ink:        #eef1f5;
  --graphite:   #98a1b0;
  --faint:      #6c7686;
  --hair:       #262b34;
  --hair-soft:  #1b1f27;

  --blue:       #4b73ff;
  --blue-deep:  #6b8bff;
  --blue-wash:  #131b3a;
  --orange:     #ff6b42;
  --orange-wash:#2a1109;

  --on-blue:    #060a18;
  --on-orange:  #180500;
}

/* --- base --------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* The viewer paints its own ground behind the page — this must be explicit. */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--blue); color: var(--on-blue); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; font-family: var(--mono); font-size: 12px;
}
.skip:focus { left: 8px; top: 8px; }

/* --- typographic scale -------------------------------------------------- */
.t-display {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.15rem, 4.5vw, 3.85rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: pretty;
  margin: 0;
}
.t-h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-wrap: balance;
  margin: 0;
}
.t-h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}
/* The one editorial signature: a single italic serif word per headline. */
.em {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  /* Instrument Serif runs small against Archivo at the same size. */
  font-size: 1.1em;
  line-height: 0.9;
}
.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.5;
  color: var(--graphite);
  max-width: 46ch;
  margin: 0;
  text-wrap: pretty;
}
.body { max-width: 62ch; color: var(--graphite); margin: 0; text-wrap: pretty; }
.body strong { color: var(--ink); font-weight: 600; }

/* Mono spec label — the drawing-set voice. */
.spec {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}
.spec--ink { color: var(--ink); }
.spec--blue { color: var(--blue); }

.num { font-variant-numeric: tabular-nums; }

/* --- layout ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A sheet is a section of the drawing set: hairline top, title block, content. */
.sheet {
  border-top: var(--rule) solid var(--hair);
  padding-block: var(--sheet-pad);
  position: relative;
}
.sheet--flush { padding-block: 0; }
.sheet--tint { background: var(--sheet); }

/* Title block: sheet number + name, mono, in a left rail where there is room. */
.titleblock {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.titleblock__row {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 10px;
  border-bottom: var(--rule) solid var(--hair);
}
.titleblock__no { color: var(--blue); }
.titleblock__name { color: var(--ink); }
.titleblock__scale { margin-left: auto; }

/* --- header ------------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: var(--rule) solid var(--hair);
}
.top__in {
  display: flex; align-items: center; gap: 24px;
  height: 62px;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand__mark {
  width: 15px; height: 15px; flex: none;
  border: 1.5px solid var(--blue);
  position: relative;
}
.brand__mark::after {
  content: ""; position: absolute; inset: 3px 3px auto auto;
  width: 5px; height: 5px; background: var(--orange);
}
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; color: var(--graphite);
  padding: 7px 11px; border-radius: 2px;
  transition: color .16s ease, background-color .16s ease;
}
.nav a:hover { color: var(--ink); background: var(--sheet); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after {
  content: ""; display: block; height: 1.5px; background: var(--blue); margin-top: 5px;
}
/* Below 860 the nav became a second row rather than disappearing — hiding it
   with no replacement left phones with no way to reach four of five pages. */
@media (max-width: 860px) {
  .top__in { height: auto; flex-wrap: wrap; gap: 0; padding-block: 11px 0; }
  .brand { width: 100%; }
  .nav {
    width: 100%; margin-left: 0; gap: 0;
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 8px 12px 8px 0; white-space: nowrap; }
  .nav a[aria-current="page"]::after { margin-top: 3px; }
}

/* --- buttons ------------------------------------------------------------ */
/* Declare background-color, never the `background` shorthand — transitioning
   the shorthand makes every computed-style read land mid-flight. */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.07em;
  text-transform: uppercase; text-decoration: none;
  padding: 14px 20px; border: var(--rule) solid transparent;
  background-color: var(--ink); color: var(--paper);
  cursor: pointer; border-radius: 2px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { background-color: var(--blue); transform: translateY(-1px); }
.btn__arrow { transition: transform .18s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  background-color: transparent; color: var(--ink); border-color: var(--hair);
}
.btn--ghost:hover {
  background-color: transparent; color: var(--blue); border-color: var(--blue);
}

/* --- hero --------------------------------------------------------------- */
.hero { border-top: 0; padding-block: clamp(48px, 6vw, 92px) clamp(40px, 5vw, 72px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
.hero__copy { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.hero__title { max-width: 21ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* The drawing sits in a plate with a faint construction grid. */
.plate {
  position: relative;
  background: var(--sheet);
  border: var(--rule) solid var(--hair);
  border-radius: 2px;
  overflow: hidden;
}
.plate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--hair-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair-soft) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .9;
}
.plate__canvas { position: relative; display: block; width: 100%; height: auto; }
.plate__tag {
  position: absolute; z-index: 2;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint);
}
.plate__tag--tl { top: 12px; left: 14px; }
.plate__tag--br { bottom: 12px; right: 14px; }

/* Legend that names the drawing's colour code. This is the FRM-6 argument. */
.legend { display: flex; flex-wrap: wrap; gap: 18px 26px; }
.legend__item { display: flex; align-items: center; gap: 8px; }
.legend__key { width: 11px; height: 11px; flex: none; border: 1.5px solid var(--faint); }
.legend__key--blue { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 26%, transparent); }
.legend__key--orange { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 34%, transparent); }
.legend__text { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--graphite); }
.legend__text b { color: var(--ink); font-weight: 500; }

/* --- the stat ----------------------------------------------------------- */
.stat__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
@media (max-width: 900px) { .stat__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.stat__figure {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(4.5rem, 13vw, 10rem); line-height: 0.82;
  letter-spacing: -0.05em; color: var(--blue);
  display: block;
}
.stat__figure sup { font-size: 0.32em; vertical-align: super; letter-spacing: 0; }
.stat__cite {
  margin-top: 22px; padding-top: 14px;
  border-top: var(--rule) solid var(--hair);
}
.stat__copy { display: flex; flex-direction: column; gap: 20px; }

/* Bar that shows 95 / 5 without a chart library. */
.bar { display: flex; height: 16px; border: var(--rule) solid var(--hair); border-radius: 2px; overflow: hidden; }
.bar__fail { flex: 95; background-image:
  repeating-linear-gradient(135deg, var(--faint) 0 1px, transparent 1px 6px); }
.bar__win { flex: 5; background-color: var(--blue); }
.bar__key { display: flex; margin-top: 9px; }
.bar__key span { flex: 95; }
.bar__key span + span { flex: 5; text-align: right; color: var(--blue); }

/* --- exploded layers (the leverage diagram) ------------------------------ */
.layers__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
@media (max-width: 980px) { .layers__grid { grid-template-columns: minmax(0, 1fr); } }
.layers__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.layers__item {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px;
  padding: 18px 0; border-bottom: var(--rule) solid var(--hair);
  cursor: pointer; background: none; border-inline: 0; border-top: 0;
  text-align: left; width: 100%; font: inherit; color: inherit;
  transition: opacity .2s ease;
}
.layers__item:first-child { border-top: var(--rule) solid var(--hair); }
.layers__no { font-family: var(--mono); font-size: 11px; color: var(--faint); padding-top: 3px; letter-spacing: .06em; }
.layers__item[aria-selected="true"] .layers__no { color: var(--blue); }
.layers__item[aria-selected="true"] .layers__name { color: var(--ink); }
.layers__name { font-weight: 600; font-size: 1rem; letter-spacing: -0.015em; color: var(--graphite); transition: color .2s ease; }
.layers__note {
  font-size: 0.9rem; color: var(--graphite); margin: 6px 0 0;
  max-width: 48ch; display: none;
}
.layers__item[aria-selected="true"] .layers__note { display: block; }

/* --- studio index (District 9 device) ------------------------------------ */
.index {
  background-color: var(--blue);
  color: var(--on-blue);
  border-radius: 2px;
  overflow: hidden;
}
.index__head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: clamp(24px, 3vw, 38px) clamp(20px, 3vw, 36px);
}
.index__title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1;
  letter-spacing: -0.03em; margin: 0; color: var(--on-blue);
}
.index__sheet { margin-left: auto; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; opacity: .72; }
.index__rows { display: grid; }
.index__row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) auto;
  gap: 20px; align-items: baseline;
  padding: 15px clamp(20px, 3vw, 36px);
  border-top: var(--rule) solid color-mix(in srgb, var(--on-blue) 22%, transparent);
  text-decoration: none; color: var(--on-blue);
  transition: background-color .16s ease;
}
.index__row:hover { background-color: color-mix(in srgb, var(--on-blue) 10%, transparent); }
.index__cat {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; opacity: .66;
}
.index__name { font-weight: 500; font-size: 1.02rem; letter-spacing: -0.015em; }
.index__desc { display: block; font-weight: 400; font-size: .86rem; opacity: .74; margin-top: 3px; max-width: 54ch; }
.index__status {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  border: var(--rule) solid color-mix(in srgb, var(--on-blue) 40%, transparent);
  padding: 4px 8px; white-space: nowrap; opacity: .9;
}
.index__status--live { background-color: var(--orange); color: var(--on-orange); border-color: var(--orange); opacity: 1; }
@media (max-width: 780px) {
  .index__row { grid-template-columns: minmax(0, 1fr) auto; }
  .index__cat { grid-column: 1 / -1; }
}

/* --- ladder ------------------------------------------------------------- */
.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
@media (max-width: 1080px) { .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .ladder { grid-template-columns: minmax(0, 1fr); } }
.rung {
  padding: 26px 24px 30px;
  border-top: 2px solid var(--hair);
  border-right: var(--rule) solid var(--hair-soft);
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
}
.rung:last-child { border-right: 0; }
.rung--paid { border-top-color: var(--blue); }
.rung__price {
  font-family: var(--display); font-weight: 500; letter-spacing: -0.03em;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1; color: var(--ink); margin: 0;
}
.rung--paid .rung__price { color: var(--blue); }
.rung__body { font-size: .92rem; color: var(--graphite); margin: 0; }
.rung__flag {
  margin-top: auto; padding-top: 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--orange);
}

/* --- three-up (Hylix spec cards) ---------------------------------------- */
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
@media (max-width: 880px) { .three { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.three__col { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid var(--ink); }
.three__col p { margin: 0; font-size: .92rem; color: var(--graphite); }

/* --- form --------------------------------------------------------------- */
.form { display: grid; gap: 16px; max-width: 560px; }
.form .btn { justify-self: start; }
.field { display: grid; gap: 7px; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.field input, .field textarea, .field select {
  font: inherit; font-size: .95rem;
  padding: 12px 14px; border-radius: 2px;
  border: var(--rule) solid var(--hair);
  background-color: var(--paper); color: var(--ink);
  transition: border-color .16s ease;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); }
.field textarea { min-height: 132px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: .82rem; color: var(--faint); margin: 0; }
.form__status { font-family: var(--mono); font-size: 12px; margin: 0; min-height: 1.4em; }
.form__status[data-state="ok"]  { color: var(--blue); }
.form__status[data-state="err"] { color: var(--orange); }

/* --- footer ------------------------------------------------------------- */
.foot { border-top: 2px solid var(--ink); padding-block: clamp(40px, 5vw, 72px) 32px; }
.foot__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
@media (max-width: 880px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: minmax(0, 1fr); } }
.foot__col { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.foot__col a { font-size: .92rem; color: var(--graphite); text-decoration: none; transition: color .16s ease; }
.foot__col a:hover { color: var(--blue); }
.foot__base {
  margin-top: clamp(36px, 5vw, 64px); padding-top: 18px;
  border-top: var(--rule) solid var(--hair);
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline;
}
.foot__base .spec:last-child { margin-left: auto; }

/* --- reveal ------------------------------------------------------------- */
/* Scroll-linked, so it only moves while the reader moves. Kept under
   reduced-motion; only autonomous animation is dropped. */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { transition-duration: .01ms; }
  .btn:hover { transform: none; }
}
.no-js .rise { opacity: 1; transform: none; }

/* --- page header -------------------------------------------------------- */
.phead { padding-block: clamp(34px, 4.5vw, 64px) clamp(28px, 3.5vw, 48px); }
.phead__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: end;
}
@media (max-width: 900px) { .phead__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.phead__copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }

/* --- spec card (Hylix title-block treatment) ---------------------------- */
.spec-card {
  border-top: 2px solid var(--ink);
  padding-top: 20px;
  display: grid; gap: 14px;
  scroll-margin-top: 84px;
}
.spec-card--build { border-top-color: var(--hair); }
.spec-card__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.spec-card__status {
  margin-left: auto;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  border: var(--rule) solid var(--hair); padding: 4px 8px; color: var(--graphite);
}
.spec-card__status--live {
  background-color: var(--orange); border-color: var(--orange); color: var(--on-orange);
}
.spec-card__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); }
@media (max-width: 820px) { .spec-card__body { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.spec-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px;
  padding: 9px 0; border-bottom: var(--rule) solid var(--hair-soft);
  font-size: .88rem; color: var(--graphite);
}
.spec-list li::before {
  content: attr(data-state); font-family: var(--mono); font-size: 10px;
  letter-spacing: .08em; color: var(--faint); padding-top: 3px; min-width: 62px;
}
.spec-list li[data-state="DONE"]::before { color: var(--blue); }

.stack-gap { display: grid; gap: clamp(40px, 5vw, 72px); }

/* --- report list -------------------------------------------------------- */
.reports { display: grid; max-width: 1020px; }
.report {
  display: grid; grid-template-columns: 148px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  padding: 26px 0; border-top: var(--rule) solid var(--hair);
}
.reports .report:last-child { border-bottom: var(--rule) solid var(--hair); }
@media (max-width: 720px) { .report { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.report__body { display: grid; gap: 8px; }

/* --- hero drawing caption ----------------------------------------------- */
.axo-cap {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  max-width: min(320px, calc(100% - 120px));
  background: var(--paper);
  border: var(--rule) solid var(--blue);
  border-radius: 2px;
  padding: 10px 12px;
  display: grid; gap: 3px;
  pointer-events: none;
}
.axo-cap[hidden] { display: none; }
.axo-cap__name {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue);
}
.axo-cap__note { font-size: .84rem; line-height: 1.35; color: var(--ink); }

/* --- image plates ------------------------------------------------------- */
/* These are white-ground drawings, so the plate is a sheet of paper and is
   white in BOTH themes — in dark it reads as a lit drawing board, which is
   the point. Two things were destroying the artwork here and both are gone:
   mix-blend-mode dragged the crisp whites down into grey, and the plate's
   construction grid was showing straight through the drawing. */
.plate--image {
  margin: 0;
  background: #ffffff;
  border-color: rgba(0, 0, 0, .14);
}
.plate--image::before { display: none; }
.plate--image .plate__img { display: block; width: 100%; height: auto; }
.plate--image .plate__tag { color: #96a0ae; z-index: 2; }

/* The corner tags were printing over the drawing. On an image plate they
   drop into a title block beneath it, the way a real sheet is labelled. */
.plate--image {
  display: grid;
  grid-template-areas: "img" "bar";
  grid-template-rows: auto auto;
}
.plate--image .plate__img {
  grid-area: img;
  border-bottom: var(--rule) solid rgba(0, 0, 0, .12);
}
.plate--image .plate__tag {
  position: static;
  grid-area: bar;
  padding: 9px 13px;
  color: #8a94a3;
  align-self: center;
}
.plate--image .plate__tag--tl { justify-self: start; }
.plate--image .plate__tag--br { justify-self: end; }