/* The PILF Matrix, /matrix/ (templates/pilf_matrix.html, static/matrix.js). Tokens only (static/pilf.css › :root); type sizes are the Design
   System's type styles (name-h1 32, heading 22, subheading 18, name-card 15, label 10.5, eyebrow 11, toggle-label 11, button-label 12.5, body-sm 16,
   caption 14, ed-latin 17). Written Tue Oct 20, 2026 by the site-matrix build [C]. */

/* ---------- the head: his words [M Oct 20, r2-mx-words] ---------- */
.mxp-top { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-2); }
.mxp-h { font-family: var(--font-name); font-size: var(--t-num); line-height: 1.05; font-weight: 600; letter-spacing: -0.025em; margin: 0; }
.mxp-sub { margin: 0; color: var(--ink-75); text-wrap: balance; }   /* type: .ed-hook, the index's subtitle (design review #8) */
.mxp-d { font-size: var(--t-body); line-height: 1.55; font-weight: 300; max-width: var(--measure); }
.mxp-how { white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--tap); }   /* type and colour: .textlink, the one link style [M Oct 26 3:02 PM, site call 1] */
.mxp-how:hover { border-bottom-color: var(--forest); }
.mxp-how span { display: inline-block; transition: transform var(--dur-beat) var(--ease-settle); }
.mxp-how:hover span { transform: translateY(2px); }

/* ---------- the stage: closed (the tag) and open (the tool) ---------- */
.mxp { margin-top: calc(-1 * var(--space-6)); position: relative; }
.mxp-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.mxp:not([data-state="closed"]):not([data-state="opening"]) .mxp-stage { grid-template-columns: minmax(0, 1fr); }
.mxp-mapcol { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.mxp:not([data-state="closed"]):not([data-state="opening"]) .mxp-mapcol { margin-inline: calc(var(--space-3) - var(--gutter)); align-items: center; }
.mxp-map { min-height: 120px; }
.mxs { display: block; overflow: visible; font-family: var(--font-name); -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mxp[data-state="closed"] .mxs { cursor: zoom-in; }

/* the closed side: Ease and Presence as the tag prints them, x/5 */
.mxp-side { min-width: 0; }
.mxp-sc { display: grid; gap: var(--space-4); padding-top: var(--space-1); transition: opacity var(--dur-out) var(--ease-leave); }
.mxp-sc > div { border-left: 1px solid var(--ink-30); padding-left: var(--space-3); }
.mxp-k { font-family: var(--font-name); font-size: var(--t-label); font-weight: 700; letter-spacing: .18em; color: var(--ink); }
.mxp-v { font-family: var(--font-name); font-size: var(--t-num); line-height: 1; font-weight: 600; letter-spacing: -0.025em; margin: var(--space-1) 0 2px; }
.mxp-v i { font-family: var(--font-editorial); font-weight: 300; font-style: italic; letter-spacing: 0; }
.mxp-v small { font-size: var(--t-small); font-weight: 500; color: var(--ink-66); margin-left: 2px; letter-spacing: 0; }
.mxp-kd { font-size: var(--t-small); line-height: 1.4; color: var(--ink-75); }
.mxp[data-state="opening"] .mxp-sc { opacity: 0; }
.mxp:not([data-state="closed"]):not([data-state="opening"]) .mxp-sc { display: none; }

/* the expand: subtle [M Oct 20, r2-matrix] */
.mxp-exp { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-1); margin-left: calc(-1 * var(--space-1)); font-family: var(--font-name); font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-66); transition: color var(--dur-tap); }
.mxp-exp:hover { color: var(--ink); }
.mxp-exp:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mxp-exp svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; transition: transform var(--dur-beat) var(--ease-settle); }
.mxp-exp:hover svg { transform: scale(1.12); }
.mxp-exp .i, .mxp-exp .b { display: none; }
.mxp:not([data-state="closed"]):not([data-state="opening"]) .mxp-exp .o, .mxp:not([data-state="closed"]):not([data-state="opening"]) .mxp-exp .a { display: none; }
.mxp:not([data-state="closed"]):not([data-state="opening"]) .mxp-exp .i { display: block; }
.mxp:not([data-state="closed"]):not([data-state="opening"]) .mxp-exp .b { display: inline; }
.mxp:not([data-state="closed"]):not([data-state="opening"]) .mxp-exp { align-self: flex-end; margin-right: var(--space-3); }
.t-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .t-touch { display: none; } .t-mouse { display: inline; } }

/* ---------- the map ---------- */
.mxs .qr { fill: transparent; transition: fill var(--dur-in) var(--ease-settle); }
.mxs .qr.grey { fill: var(--ink-05); }
.mxs .frame { fill: none; stroke: var(--ink-30); stroke-width: 1; }
.mxs .mid { stroke: var(--ink-30); stroke-width: 1; }
/* the corner words, the emblems' colour and the tag's axis words are the small map's rules (static/pilf.css › .b-mx), shared, so /matrix/ looks like
   the tag and every other map [M Oct 23 owner2-11: "low/high in lower case and thinner font"; C left-1023]; only the motion is this page's */
.mxs .cu { transition: opacity var(--dur-beat) var(--ease-settle), color var(--dur-beat); }
.mxs .ce { overflow: visible; }
.mxs .cw { transition: fill var(--dur-beat); }
.mxs .cu.off { opacity: .45; }
/* the tag's axis words, and the personality words: never both at once; the tag's leave first [M Oct 20, r2-axes] */
.mxs .ax-tag { opacity: 0; transition: opacity var(--dur-out) var(--ease-leave); }
.mxp[data-state="closed"] .mxs .ax-tag { opacity: 1; transition: opacity var(--dur-in) var(--ease-settle); }
.mxs .pw { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: var(--t-body); letter-spacing: 0; fill: var(--ink-75); text-anchor: middle; }
.mxs .ax-pw { opacity: 0; transition: opacity var(--dur-out) var(--ease-leave); }
.mxp[data-state="open"] .mxs .ax-pw { opacity: 1; transition: opacity var(--dur-dissolve) var(--ease-settle); }
/* dots: placement first, colour second (CornerMark) */
.mxs .dt.pre { opacity: 0; }
.mxs .dc { stroke: var(--ground); stroke-width: 1; transform-box: fill-box; transform-origin: center; transition: transform var(--dur-beat) var(--ease-settle), fill var(--dur-beat) var(--ease-settle), stroke var(--dur-beat); }
.mxs .c-forever .dc { fill: var(--corner-forever); }
.mxs .c-friend .dc { fill: var(--corner-friend); }
.mxs .c-fling .dc { fill: var(--corner-fling); }
.mxs .c-foe .dc { fill: var(--corner-foe); }
/* the one emphasis rule [M Oct 20, mx2-mascots]: the chosen keep size and colour; the rest shrink and grey */
.mxs .dt.mute .dc { fill: var(--ink-30); transform: scale(.55); }
.mxs .dt.sel .dc { transform: scale(1.7); stroke: var(--ink); stroke-width: 1; }
.mxs .dl { font-size: var(--t-label); font-weight: 600; letter-spacing: .01em; fill: var(--ink); paint-order: stroke; stroke: var(--ground); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; animation: mx-lab var(--dur-in) var(--ease-settle) both; }
.mxs .dl.on { font-size: var(--t-label); font-weight: 700; }
.mxs .ping { fill: none; stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: mx-ping calc(var(--dur-in) * 3) var(--ease-settle) forwards; pointer-events: none; }
.mxs .ping.c-forever { stroke: var(--corner-forever); } .mxs .ping.c-friend, .mxs .ping.c-fling { stroke: var(--corner-friend); } .mxs .ping.c-foe { stroke: var(--corner-foe); }
.mxs .ring { fill: none; stroke: var(--ink); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: mx-ring calc(var(--dur-in) * 4) var(--ease-settle) forwards; pointer-events: none; }
.mxs.plotting .frame { stroke: var(--ink-45); }
@keyframes mx-lab { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes mx-ping { from { opacity: .7; transform: scale(.6); } to { opacity: 0; transform: scale(2.6); } }
@keyframes mx-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }

/* ---------- the finder: search, lists, count, results [M Oct 20] ---------- */
.mxp-tools[hidden], .mxp-res[hidden], .mxp-rh[hidden] { display: none; }
.mxp-tools { display: flex; flex-direction: column; gap: var(--space-3); animation: mx-rise var(--dur-in) var(--ease-settle) both; }
.mxp-find { display: flex; align-items: center; gap: var(--space-2); border: 1px solid var(--ink-30); padding: 0 var(--space-3); min-height: var(--tap); transition: border-color var(--dur-tap); }
.mxp-find:focus-within { border-color: var(--ink); }
.mxp-find svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ink-45); stroke-width: 1.4; stroke-linecap: round; }
.mxp-find input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; height: var(--tap); font-family: var(--font-body); font-size: var(--t-body); font-weight: 300; color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; border-radius: var(--radius-none); }
.mxp-find input::placeholder { color: var(--ink-45); font-style: italic; }
.mxp-find input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.mxp-count { font-family: var(--font-name); font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; color: var(--ink-45); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mxp-count b { color: var(--ink); font-weight: 700; }
/* the lists as Toggles: caps text, a count, a sage underline when on (DESIGN.md › Toggle); one at a time */
/* a phone: one row that swipes, its far edge fading; a wide screen: they wrap */
.mxp-lists { display: flex; flex-wrap: nowrap; gap: 0 var(--space-4); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--ink) var(--gutter), var(--ink) calc(100% - var(--gutter) * 2), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, var(--ink) var(--gutter), var(--ink) calc(100% - var(--gutter) * 2), transparent 100%); }
.mxp-lists::-webkit-scrollbar { display: none; }
.mxp-chip { flex: none; white-space: nowrap; }
.mxp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); font-family: var(--font-name); font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-66); border-bottom: 2px solid transparent; transition: color var(--dur-tap), border-color var(--dur-beat) var(--ease-settle); }
.mxp-chip .n { color: var(--ink-45); letter-spacing: 0; font-weight: 500; }
.mxp-chip:hover { color: var(--ink); }
.mxp-chip[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--sage); }
.mxp-chip:focus-visible, .mxp-q:focus-visible, .mxp-res button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mxp-res { border-top: 1px solid var(--ink-15); padding-top: var(--space-2); animation: mx-rise var(--dur-in) var(--ease-settle) both; }
.mxp-rh { font-size: var(--t-small); line-height: 1.4; color: var(--ink-75); padding: var(--space-1) 0 var(--space-2); }
.mxp-rh b { font-family: var(--font-name); font-size: var(--t-label); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin-right: var(--space-1); }
.mxp-res ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--space-4); }
.mxp-res li { break-inside: avoid; }
.mxp-res button { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 36px; text-align: left; font-size: var(--t-small); line-height: 1.25; color: var(--ink); padding: var(--space-1) 0; }
.mxp-res button:hover, .mxp-res button[aria-current="true"] { color: var(--forest); text-decoration: underline; text-decoration-color: var(--ink-30); text-underline-offset: .16em; }
.mxp-res i { width: 8px; height: 8px; flex: none; border-radius: var(--radius-dot); }
i.c-forever, .mxm-dot.c-forever, .mxm-mk.c-forever { background: var(--corner-forever); }
i.c-friend, .mxm-dot.c-friend, .mxm-mk.c-friend { background: var(--corner-friend); }
i.c-fling, .mxm-dot.c-fling, .mxm-mk.c-fling { background: var(--corner-fling); }
i.c-foe, .mxm-dot.c-foe, .mxm-mk.c-foe { background: var(--corner-foe); }
@keyframes mx-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- the four corners ---------- */
.mxp-legend { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--space-4); margin-top: var(--space-4); }
.mxp-q { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: var(--space-2); row-gap: 2px; align-items: start; text-align: left; padding: var(--space-3) 0; border-top: 1px solid var(--ink-15); min-width: 0; transition: border-color var(--dur-beat); }
.mxp-q .emb { grid-row: span 2; width: 26px; height: 26px; color: var(--ink-45); transition: color var(--dur-beat), transform var(--dur-beat) var(--ease-settle); }
.mxp-q .w { font-family: var(--font-name); font-size: var(--t-label); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-75); }
.mxp-q .w .n { font-weight: 500; letter-spacing: 0; color: var(--ink-45); margin-left: 2px; }
.mxp-q .l { font-size: var(--t-small); line-height: 1.35; color: var(--ink-66); text-wrap: balance; }
.mxp-q:hover .emb { color: var(--ink); transform: rotate(-6deg); }
.mxp-q[aria-pressed="true"] { border-top-color: var(--ink); }
.mxp-q[aria-pressed="true"] .emb, .mxp-q[aria-pressed="true"] .w { color: var(--ink); }

/* ---------- the card: rises at the bottom [M Oct 19, matrix-tap; M Oct 20] ---------- */
.mxc { position: fixed; left: var(--space-2); right: var(--space-2); bottom: var(--space-2); z-index: 40; max-width: 560px; margin-inline: auto; background: var(--ground); border: 1px solid var(--ink-15); box-shadow: 0 -12px 40px var(--ink-15), 0 2px 6px var(--ink-05); transform: translateY(calc(100% + var(--space-6))); transition: transform var(--dur-in) var(--ease-settle); }
.mxc.on { transform: none; }
.mxc[hidden] { display: none; }
.mxc-in { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: var(--space-3); padding: var(--space-3) var(--space-3) 0; }
.mxc-in.swap { animation: mx-swap var(--dur-beat) var(--ease-settle); }
@keyframes mx-swap { from { opacity: .35; } to { opacity: 1; } }
.mxc-x { position: absolute; top: 0; right: 0; width: var(--tap); height: var(--tap); font-size: var(--t-title); line-height: 1; color: var(--ink-66); }
.mxc-x:hover { color: var(--ink); }
.mxc-dr { grid-row: span 1; width: 92px; height: 104px; display: flex; align-items: flex-end; justify-content: center; color: var(--ink); }
.mxc-dr svg { width: 100%; height: 100%; display: block; }
.mxc-dr .mxc-emb { width: 56px; height: 56px; align-self: center; color: var(--ink-30); }
.mxc-t { min-width: 0; padding-right: var(--space-6); display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); }
.mxc-c { display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--space-2); font-family: var(--font-name); font-size: var(--t-label); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.mxc-ce { width: 18px; height: 18px; flex: none; color: var(--ink); }
.mxc-c .s { font-weight: 500; letter-spacing: .04em; text-transform: none; font-size: var(--t-label); color: var(--ink-66); font-variant-numeric: tabular-nums; }
.mxc-c .s b { font-weight: 700; color: var(--ink); }
.mxc-n { font-family: var(--font-name); font-size: var(--t-ed); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.mxc-l { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: var(--t-body); line-height: 1.3; color: var(--ink); }
.mxc-l.fact { font-family: var(--font-body); font-style: normal; font-size: var(--t-small); line-height: 1.4; color: var(--ink-75); }
.mxc-g { grid-column: 1 / -1; list-style: none; margin: var(--space-3) 0 0; padding: var(--space-2) 0 0; border-top: 1px solid var(--ink-15); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.mxc-g li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.mxc-g .gi { color: var(--forest); line-height: 0; }
.mxc-g .gi svg { width: 34px; height: 26px; }
.mxc-g .gw { font-size: var(--t-small); line-height: 1.25; color: var(--ink); }
/* "more" made obvious [M Oct 20, mx2-sheet: "I didn't realize until after playing with it for 10 minutes that there was a 'more'"] */
.mxc-more { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--tap); margin: var(--space-3) calc(-1 * var(--space-3)) 0; padding: 0 var(--space-3); border-top: 1px solid var(--ink-15); font-family: var(--font-name); font-size: var(--t-strong); font-weight: 600; color: var(--forest); text-decoration: none; transition: background var(--dur-tap); }
.mxc-more .ar { font-size: var(--t-ed); transition: transform var(--dur-beat) var(--ease-settle); }
.mxc-more:hover { background: var(--ink-05); color: var(--forest); }
.mxc-more:hover .ar { transform: translateX(4px); }
.mxc-more:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ---------- How PILF scores plants: open, and alive [M Oct 19, matrix-method] ---------- */
.mxm { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--ink-15); display: flex; flex-direction: column; gap: var(--space-4); scroll-margin-top: 72px; }
.mxm-anchor { display: block; position: relative; top: -72px; }
.mxm-h { font-family: var(--font-name); font-size: var(--t-title); line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.mxm-pick { display: flex; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--ink-30); align-self: flex-start; max-width: 100%; }
.mxm-dot { width: 10px; height: 10px; border-radius: var(--radius-dot); flex: none; }
.mxm-pick select { font-family: var(--font-name); font-size: var(--t-body); font-weight: 600; color: var(--ink); border: 0; background: none; min-height: var(--tap); padding: 0 var(--space-4) 0 0; border-radius: var(--radius-none); cursor: pointer; max-width: 100%; }
.mxm-g { display: grid; gap: var(--space-6); }
.mxm-gh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.mxm-gh h3 { font-family: var(--font-name); font-size: var(--t-ed); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.mxm-sc { font-family: var(--font-name); font-variant-numeric: tabular-nums; }
.mxm-sc b { font-size: var(--t-num); font-weight: 600; letter-spacing: -0.025em; }
.mxm-sc small { font-size: var(--t-small); color: var(--ink-66); font-weight: 500; }
.mxm-lede { font-size: var(--t-small); line-height: 1.4; color: var(--ink-75); margin: var(--space-1) 0 var(--space-3); max-width: var(--measure); }
.mxm-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: var(--space-2) 0; }
.mxm-pn { font-family: var(--font-name); font-size: var(--t-label); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-75); }
.mxm-tr { position: relative; height: 6px; background: var(--ink-05); border-top: 1px solid var(--ink-15); border-bottom: 1px solid var(--ink-15); margin: var(--space-1) 7px; }
.mxm-tick { position: absolute; top: -5px; width: 1px; height: 14px; background: var(--ink-45); }
.mxm-tick.k { position: static; display: inline-block; vertical-align: -2px; margin-right: var(--space-2); }
.mxm-mk { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: var(--radius-dot); border: 2px solid var(--ground); box-shadow: 0 0 0 1px var(--ink-30); transition: left var(--dur-in) var(--ease-settle), background var(--dur-beat); }
.mxm-ends { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--t-small); line-height: 1.3; color: var(--ink-66); }
.mxm-ends span:last-child { text-align: right; }
.mxm-key { font-size: var(--t-small); color: var(--ink-66); }
.mxm-foot { font-size: var(--t-small); line-height: 1.4; color: var(--ink-66); max-width: var(--measure); }
.mxm .btn.fit { align-self: flex-start; }

/* ---------- wider screens: the map on the left, the finder on the right ---------- */
@media (min-width: 900px) {
  .mxp-stage, .mxp:not([data-state="closed"]):not([data-state="opening"]) .mxp-stage { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); }
  .mxp:not([data-state="closed"]):not([data-state="opening"]) .mxp-mapcol { margin-inline: 0; align-items: flex-start; }
  .mxp-side { padding-top: var(--space-6); max-width: 440px; }
  .mxp-sc { grid-template-columns: 1fr 1fr; }
  .mxp-legend { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mxm-g { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .mxp:not([data-state="closed"]):not([data-state="opening"]) .mxp-side { align-self: stretch; display: flex; flex-direction: column; gap: var(--space-4); }
  .mxp-lists { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; margin: 0; padding: 0; }
  /* docked beside the map (static/matrix.js › placeCard): it sits at the column's foot and stays in view while the column does */
  .mxp-side > .mxc { position: sticky; left: auto; right: auto; top: auto; bottom: var(--space-6); width: auto; max-width: none; margin: auto 0 0; z-index: 2; opacity: 0; transform: translateY(var(--space-3)); transition: transform var(--dur-in) var(--ease-settle), opacity var(--dur-in) var(--ease-settle); box-shadow: 0 12px 40px var(--ink-15); }
  .mxp-side > .mxc.on { opacity: 1; transform: none; }
}
@media (max-width: 359px) {
  .mxp-sc > div { padding-left: var(--space-2); }
  .mxp-v { font-size: var(--t-title); }
  .mxc-in { grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--space-2); }
  .mxc-dr { width: 64px; height: 80px; }
  .mxc-l { font-size: var(--t-body); }
  .mxc-c .s { flex-basis: 100%; }
}

/* reduced motion: things are simply there */
@media (prefers-reduced-motion: reduce) {
  .mxc, .mxs .dc, .mxs .qr, .mxs .cu, .mxs .ax-tag, .mxs .ax-pw, .mxm-mk, .mxp-sc { transition: none !important; }
  .mxs .dl, .mxp-tools, .mxp-res, .mxc-in.swap { animation: none; }
  .mxs .ping, .mxs .ring { display: none; }
}

/* color [M Oct 22 5:01 PM: "Can we add some color here? Maybe the ease/presence could have a solid fill background?"]: the two score boxes in forest,
   the corners tinted in their own color (forest, sage, sage, clay) [C] */
.mxp-sc > .mxp-box { border-left: 1px solid var(--ink-15); background: none; color: var(--ink); padding: 0 0 0 var(--space-3); }   /* quiet: the loudest thing on the page said what the map already says (design review #8; taste.md 3) [C Oct 26]; was a forest fill */
.mxp-box .mxp-k, .mxp-box .mxp-v { color: var(--ink); }
.mxp-box .mxp-kd, .mxp-box .mxp-v small { color: var(--ink-66); }
.mxp-v.mxp-of { font-size: var(--t-ed); letter-spacing: -0.01em; line-height: 1.2; }
.mxp-v.mxp-of small { display: block; font-size: var(--t-small); margin: 2px 0 0; }
.mxp-q { padding-inline: var(--space-2); border-top: 0; border-left: 4px solid var(--qc, var(--ink-15)); background: color-mix(in srgb, var(--qc, transparent) 12%, transparent); margin-top: var(--space-1); }
.mxp-q.q-forever { --qc: var(--corner-forever); } .mxp-q.q-friend { --qc: var(--corner-friend); } .mxp-q.q-fling { --qc: var(--corner-fling); } .mxp-q.q-foe { --qc: var(--corner-foe); }
.mxp-q .emb { color: var(--qc, var(--ink-45)); }

/* the expand control is the site's + [C Oct 26, design review #8; D2-02]: it turns to an x when the map is open */
.mxp-exp .plus { font-family: var(--font-name); font-size: var(--t-ed); font-weight: 300; line-height: 1; letter-spacing: 0; transition: transform var(--dur-out) var(--ease-settle); }
.mxp:not([data-state="closed"]):not([data-state="opening"]) .mxp-exp .plus { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .mxp-exp .plus { transition: none; } }