/* ============================================================================
   monkeys.css — mavericks-monkeys.html only.

   THE ONE SUB-PAGE WITH ITS OWN GROUND. Every work plate on the index shows a
   project in its own colours; this page extends that to a whole page, because
   the project's identity IS a colour relationship. The brand is a taijitu:
   RAID is yang — light, initiating, offense. FORTRESS is yin — dark, holding,
   defense. So the page splits light and dark and the mark sits on the seam,
   with each half of it landing on its opposite ground. That is the taijitu
   doing its own job rather than a logo dropped onto a background.

   Every literal comes from tokens.css (--mm-*). No hex, no numeric size, no
   numeric radius lives here — the coherence audit fails the build on any.
   ========================================================================= */

/* The page ground is bone, and the dark half is painted on top of it, so a
   short viewport never shows an unpainted strip below the fold. */
body.mm { background: var(--mm-bone); color: var(--mm-ink); }

/* ---- The hero: bone left, ink right, mark on the seam ------------------- */

.mm-hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  position: relative;
}
/* The dark half. A pseudo-element rather than a wrapper so the markup stays
   about content and the split stays a presentational fact. */
.mm-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 50%;
  background: var(--mm-ink);
  border-left: var(--rule-heavy) solid var(--mm-gold);
  z-index: 0;
}
.mm-hero > * { position: relative; z-index: 1; }

.mm-pair { text-align: right; }
.mm-pair dt {
  font-family: var(--font-display-thin);
  font-weight: var(--weight-black);
  font-size: var(--step-2);
  letter-spacing: var(--track-display);
}
.mm-pair dd {
  margin: 0 0 var(--space-3);
  color: var(--mm-muted);
  font-size: var(--step-0);
}

/* Bottom-left of the bone half, small and quiet. It fills the empty ground
   under the pair without competing with the mark on the seam. */
.mm-peel {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  width: var(--work-thumb);
  height: var(--work-thumb);
  background: url("assets/works/monkeys-peel.png") left bottom / contain no-repeat;
}

.mm-mark {
  width: var(--shelf-tile);
  height: var(--shelf-tile);
  background: url("assets/works/monkeys-mark.png") center / contain no-repeat;
}

.mm-say { color: var(--mm-bone); }
.mm-kicker {
  font-family: var(--font-util);
  letter-spacing: var(--track-util);
  color: var(--mm-muted-up);
  font-size: var(--step--1);
  text-transform: uppercase;
}
.mm-title {
  font-family: var(--font-display);
  font-size: var(--step-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  margin: var(--space-1) 0 var(--space-2);
}
/* The hook, in gold, straight under the name — the one line that says what all
   three do in order: find, take, hold. */
.mm-hook {
  font-family: var(--font-display-thin);
  font-weight: var(--weight-black);
  font-size: var(--step-1);
  letter-spacing: var(--track-display);
  color: var(--mm-gold);
  margin: 0 0 var(--space-2);
}
.mm-sub { max-width: var(--measure); font-size: var(--step-1); }

/* ---- The three tools --------------------------------------------------- */

/* NO ORPHAN IN THE LAST ROW. auto-fit gave two columns in the middle band,
   which left the console sitting alone in one of them looking like an
   afterthought rather than the third of three. The house rule: when the last
   row would hold a single card, it spans the full width instead.

   Explicit column counts rather than auto-fit, because the orphan rule has to
   know how many columns there are — `:last-child:nth-child(odd)` is only
   correct at two, and auto-fit never says. */
.mm-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
}
@media (min-width: 54rem) {
  .mm-tools { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 80rem) {
  /* The three packs read as the compass in one row. The console is not a
     pack — it is where all three are operated from — so it drops below and
     spans the full width. */
  .mm-tools { grid-template-columns: repeat(3, 1fr); }
  .mm-tools > .mm-tool--hinge { grid-column: 1 / -1; }
}

.mm-tool {
  border: var(--rule) solid var(--mm-rule);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Each tool wears its own half of the pair, so the card tells you which side
   it is on before you have read a word of it. */
.mm-tool--yin {
  background: var(--mm-ink);
  color: var(--mm-bone);
  border-color: var(--mm-rule-dark);
}
.mm-tool--yin .mm-tool-what { color: var(--mm-muted-up); }
.mm-tool--yang { background: var(--mm-bone-deep); }
.mm-tool--yang .mm-tool-what { color: var(--mm-muted); }
/* The console is neither half — it is where both are operated from. */
/* The console is neither half — it is where both are operated from — and gold
   says so on its own. It used to also carry a 2px left edge against 1px on its
   other three sides and on every other card; asymmetric by intent, but it read
   as a rendering fault rather than a signal, and once this card began spanning
   the full width the mismatch got louder. One cue, evenly applied. */
.mm-tool--hinge {
  background: var(--mm-bone);
  border-color: var(--mm-gold);
}
.mm-tool--hinge .mm-tool-what { color: var(--mm-muted); }
/* SCOUT is the needle — neither half, the third that reads the ground first.
   Ink ground so its gold needle carries, the way the SCOUT card reads dark
   with a gold name everywhere else it appears. */
.mm-tool--needle {
  background: var(--mm-ink-lift);
  color: var(--mm-bone);
  border-color: var(--mm-rule-dark);
}
.mm-tool--needle .mm-tool-what { color: var(--mm-muted-up); }
.mm-tool--needle .mm-tool-role { color: var(--mm-gold); }
.mm-tool--needle .mm-ico { background-color: var(--mm-gold); }

/* One mark per card, stating the card's job before the heading does.
   Chosen for what each tool IS, not for decoration: a lever for RAID, which
   is disproportion; a struck seal for FORTRESS, which refuses an unsourced
   claim; a signature for the console, which writes an order you sign.
   mask-image, not a background: one file then takes whichever colour the
   card's ground needs, so the dark card is not a second asset. */
.mm-ico {
  width: var(--anchor-offset);
  height: var(--anchor-offset);
  background-color: var(--mm-ink);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.mm-tool--yin .mm-ico { background-color: var(--mm-gold); }
.mm-ico--needle { -webkit-mask-image: url("assets/icons/mm-needle.png"); mask-image: url("assets/icons/mm-needle.png"); }
.mm-ico--lever { -webkit-mask-image: url("assets/icons/mm-lever.png"); mask-image: url("assets/icons/mm-lever.png"); }
.mm-ico--claim-broken { -webkit-mask-image: url("assets/icons/mm-claim-broken.png"); mask-image: url("assets/icons/mm-claim-broken.png"); }
.mm-ico--sign-pen { -webkit-mask-image: url("assets/icons/mm-sign-pen.png"); mask-image: url("assets/icons/mm-sign-pen.png"); }

.mm-tool-name {
  font-family: var(--font-display-thin);
  font-weight: var(--weight-black);
  font-size: var(--step-2);
  letter-spacing: var(--track-display);
  margin: 0;
}
.mm-tool-role {
  font-family: var(--font-util);
  font-size: var(--step--1);
  letter-spacing: var(--track-util);
  text-transform: uppercase;
  color: var(--mm-gold-deep);
}
.mm-tool--yin .mm-tool-role { color: var(--mm-gold); }
.mm-tool-what { margin: 0; line-height: var(--leading-body); }
.mm-tool-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---- How they fit: the workflow, as a numbered spine -------------------- */

.mm-flow { padding: var(--space-5) var(--space-4); background: var(--mm-bone-deep); }
.mm-flow ol {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  counter-reset: mm;
}
.mm-flow li {
  counter-increment: mm;
  display: grid;
  grid-template-columns: var(--anchor-offset) 1fr;
  gap: var(--space-3);
  align-items: baseline;
}
.mm-flow li::before {
  content: counter(mm);
  font-family: var(--font-util);
  color: var(--mm-gold-deep);
  font-size: var(--step-1);
}
.mm-flow b { font-weight: var(--weight-black); }
.mm-flow .mm-gate { color: var(--mm-gold-deep); font-weight: var(--weight-black); }

/* ---- Short viewports and phones ---------------------------------------- */

@media (max-width: 60rem) {
  /* Stacked, the vertical seam is meaningless, so the dark half becomes the
     bottom half and the mark sits between them — the same relationship
     rotated, rather than a split that no longer splits anything. */
  .mm-hero { grid-template-columns: 1fr; text-align: center; }
  .mm-hero::after { inset: 50% 0 0 0; border-left: 0; border-top: var(--rule-heavy) solid var(--mm-gold); }
  .mm-pair { text-align: center; }
  .mm-mark { margin: 0 auto; }
  /* Stacked, bottom-left of the section is the DARK half — where a
     black-outlined peel disappears. It moves to the top corner. */
  .mm-peel { bottom: auto; top: var(--space-2); left: var(--space-2); }
}