/* ============================================================
   CONCEPTO P — THE MATERIALS, ON ONE MAP (rooms/matmap.js)
   The field is drawn in ink on the page's own white and has no box and
   no ground of its own. Above it, a line of words: the kinds, The whole
   map (only while the map is held away from home), Find, Index. Beside
   it, when a material is chosen, its entry, set as a catalogue sets one:
   type and air, no card, no rule, no box, every figure in the
   catalogue's numerals. In a narrow room the entry is a white sheet that
   rises from the foot of the window over the bloom. Under the map the
   shelf (stock-wall.css) and the index. Nothing sits under the
   letterhead: the page passes under it with nothing laid there. Lines
   only where the line is the thing: the text field's own baseline and
   the focus ring. No underline, at rest or under the hand.
   ============================================================ */
.mm{
  --mm-ink:26,24,20; --mm-ground:255,255,255;
  position:relative; display:block;
  width:100vw; margin-left:calc(50% - 50vw);
  background:transparent; color:rgba(var(--mm-ink),.88);
  -webkit-font-smoothing:antialiased;
}
.mm[data-tone="dark"]{ --mm-ink:236,231,222; }
/* the page changes its own height under the hand (a bloom, an entry laid beside it); it is moved only by the house's
   scroll, never re-anchored by the browser under the reader */
html:has(.mm){ overflow-anchor:none; }
.mm [hidden]{ display:none !important; }
.mm a{ color:inherit; text-decoration:none; }
.mm-vh, .mm-keys{
  position:absolute !important; left:0; top:0; width:1px; height:1px; margin:0; padding:0; list-style:none;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
/* the measures the field reads: the first screen under the letterhead (and a menu the room keeps above it) */
.mm-probe{ position:absolute; left:0; top:0; width:1px; height:calc(100svh - var(--nav-h) - var(--mm-menu, 0px)); visibility:hidden; pointer-events:none; }
.mm-probe.is-nav{ height:calc(var(--nav-h) + var(--mm-menu, 0px)); }

/* the stage, its words and the entry share one block: the stage keeps its place beside the entry while the entry is read,
   and no further (the shelf and the index come after it) */
.mm-top{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); }

/* ---------- the stage: the canvas, the chosen one lifted, the way back, its number, the tip under a work ---------- */
.mm-stage{
  grid-area:1 / 1; align-self:start; position:sticky; top:calc(var(--nav-h) + var(--mm-menu, 0px)); z-index:1;
  touch-action:pan-y; -webkit-user-select:none; user-select:none;
}
.mm-cv{ position:absolute; left:0; top:0; display:block; cursor:default; -webkit-tap-highlight-color:transparent; }
.mm-cv.is-point{ cursor:pointer; }
.mm-cv.is-moving{ cursor:grabbing; }
.mm-stage.is-held{ touch-action:none; }
/* the field drifts back while an entry is read over it (matmap.js drift): driven by the scroll, it eases home when the entry goes */
.mm-stage{ transition:translate var(--slow) var(--settle); }
.mm-stage.is-drift{ transition:none; }

/* the chosen material, off the paper (CP.StockWall.coin): over the canvas, under its number and the words */
.mm-hero{ position:absolute; left:0; top:0; z-index:1; pointer-events:none; opacity:0; transition:opacity var(--touch) var(--lift); }
.mm-hero.is-in{ opacity:1; transition:opacity var(--slow) var(--settle); }

/* one line of italic at the foot of the field that says what it is for; it goes once the hand has found the field */
.mm-invite{
  position:absolute; left:50%; bottom:clamp(14px, 2.4vh, 26px); z-index:2; margin:0; pointer-events:none;
  transform:translateX(-50%); white-space:nowrap;
  line-height:1.3;
  color:rgba(var(--mm-ink),.62);
  opacity:0; transition:opacity var(--slowest) var(--settle);
}
.mm-invite.is-in{ opacity:1; }
.mm-invite.is-gone, .mm.is-open .mm-invite{ opacity:0; transition:opacity var(--slow) var(--lift); }

/* ---------- the words: kinds at the left, The whole map, Find and Index at the right ---------- */
.mm-words{
  grid-area:1 / 1; align-self:start; position:relative; z-index:3;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px 32px;
  padding:clamp(18px, 2.6vh, 28px) var(--gutter) 0;
  pointer-events:none;
}
.mm-words > *{ pointer-events:auto; }
.mm-kinds{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px clamp(16px, 1.6vw, 26px); transition:opacity var(--slow) var(--settle) calc(var(--slow) * .8), visibility 0s linear 0s; }
.mm-k, .mm-t{
  appearance:none; -webkit-appearance:none; background:none; border:0; border-radius:0; margin:0; box-shadow:none;
  padding:4px 0 3px; cursor:pointer;
  line-height:1.2;
  color:rgba(var(--mm-ink),.56);
  transition:color var(--touch) var(--settle);
}
/* a kind's count: the catalogue's own figure, set small beside its word */
.mm-k-n{ margin-left:.42em; color:rgba(var(--mm-ink),.42); }
.mm-k[aria-pressed="true"], .mm-t[aria-expanded="true"]{ color:rgba(var(--mm-ink),.94); }
.mm-kinds:has(.mm-k[aria-pressed="true"]) .mm-k:not([aria-pressed="true"]){ color:rgba(var(--mm-ink),.3); }
.mm-tools{ display:flex; align-items:baseline; gap:clamp(18px, 2.2vw, 32px); transition:opacity var(--slow) var(--settle); }
.mm-find{ display:inline-flex; align-items:baseline; gap:14px; }
/* the text field's baseline is the field: the one line of the words */
.mm-find-in{
  appearance:none; -webkit-appearance:none; background:none; border:0; border-radius:0; padding:3px 0 4px;
  /* it sits on the line's baseline; the margin keeps its taller face from lowering the line, so the way back, set alone
     at the same height, stands on the same baseline as Find and Index */
  margin:-3px 0 0;
  width:0; opacity:0; visibility:hidden;
  border-bottom:1px solid rgba(var(--mm-ink),.3);
  color:rgba(var(--mm-ink),.92);
  transition:width var(--slow) var(--settle), opacity var(--slow) var(--settle), visibility 0s linear var(--slow), border-color var(--touch) var(--settle);
}
.mm-find.is-open .mm-find-in{ width:min(15em, 52vw); opacity:1; visibility:visible; transition:width var(--slow) var(--settle), opacity var(--slow) var(--settle), visibility 0s, border-color var(--touch) var(--settle); }
.mm-find-in::placeholder{ color:rgba(var(--mm-ink),.4); }
.mm-find-in::-webkit-search-cancel-button{ -webkit-appearance:none; }
.mm-find-in:focus{ outline:none; border-bottom-color:rgba(var(--mm-ink),.7); }
/* The whole map: the one word that takes the map home, there only while the map is away from it */
.mm-fit{ opacity:0; visibility:hidden; transition:opacity var(--slow) var(--lift), visibility 0s linear var(--slow); }
.mm.is-away .mm-fit{ opacity:1; visibility:visible; transition:opacity var(--slow) var(--settle), visibility 0s; }

/* open: the way back takes the kinds' place */
.mm-trail{
  position:absolute; z-index:3; left:var(--gutter); top:clamp(18px, 2.6vh, 28px);
  opacity:0; visibility:hidden; transition:opacity var(--slow) var(--lift), visibility 0s linear var(--slow);
}
/* the two never share the line: one word leaves, then the other arrives (each waits for the other to go) */
.mm.is-open .mm-trail{ opacity:1; visibility:visible; transition:opacity var(--slow) var(--settle) calc(var(--slow) * .8), visibility 0s; }
.mm.is-open .mm-kinds{ opacity:0; visibility:hidden; transition:opacity var(--slow) var(--lift), visibility 0s linear var(--slow); }

/* the keyboard's place is shown in ink, never by a box: the word it rests on darkens */
.mm-k:focus-visible, .mm-t:focus-visible, .mm a:focus-visible{ outline:none; color:rgba(var(--mm-ink),.94); }
@media (hover:hover){
  .mm-k:hover, .mm-t:hover{ color:rgba(var(--mm-ink),.9); }
}

/* under the chosen one: its record number and what it is; its name is the entry's, beside it */
.mm-name-host{
  position:absolute; left:0; top:0; z-index:2; text-align:center; pointer-events:none;
  opacity:0; transition:opacity var(--touch) var(--lift);
}
.mm-name-host.is-in{ opacity:1; transition:opacity var(--slow) var(--settle); }
.mm-name-no{ margin:0; color:rgba(var(--mm-ink),.78); }
.mm-name-k{ margin:4px 0 0; line-height:1.35; color:rgba(var(--mm-ink),.6); }

/* the tip under a work: its number, process and year, and the two ways to it; the page's white under it, no edge */
.mm-tip{
  position:absolute; left:0; top:0; z-index:4; padding:7px 10px 8px;
  background:rgba(var(--mm-ground),.96);
  white-space:nowrap; color:rgba(var(--mm-ink),.7);
}
.mm-tip p{ margin:0; line-height:1.5; }
.mm-tip-l{ display:flex; align-items:baseline; gap:10px; }
.mm-tip-no{ color:rgba(var(--mm-ink),.86); }
.mm-tip-w{ display:flex; gap:18px; margin-top:3px !important; }
.mm-way{ color:rgba(var(--mm-ink),.9); }

/* ---------- the entry: the near plane, in the page's flow over the far side of the bloom; the bloom stays while it is
   read and drifts back under it (NOT TWO HALVES, the field dissolves under the entry, no edge between) ---------- */
.mm-sheet-col{
  grid-area:1 / 1; position:relative; z-index:2; display:none;
  margin-left:56%; width:38%; max-width:600px;
  padding:clamp(72px, 11vh, 120px) 0 clamp(72px, 14vh, 160px);
}
.mm-sheet-col.is-shown{ display:block; }
/* it opens out of the chosen material: its edge drawn outward from the specimen's middle (c10), then its own again */
.mm-card{ opacity:0; color:rgba(var(--mm-ink),.9); }
.mm:not(.is-narrow) .mm-card{ clip-path:circle(var(--mm-r0, 0px) at var(--mm-ox, -30vw) var(--mm-oy, 40vh)); }
.mm:not(.is-narrow) .mm-card.is-in{
  opacity:1; clip-path:circle(var(--mm-or, 160vmax) at var(--mm-ox, -30vw) var(--mm-oy, 40vh));
  transition:clip-path var(--slower) var(--settle), opacity var(--slow) var(--settle);
}
/* once it is open its edge is the card's own again, however far the entry runs below the window */
.mm .mm-card.is-done, .mm .mm-card.is-out, .mm:not(.is-narrow) .mm-card.is-in.is-done{ clip-path:none; }
.mm-card.is-out{ opacity:0; transition:opacity var(--touch) var(--lift); }

.mm-e-head{ margin:0; }
.mm-e-kind{ margin:0 0 .5em; color:rgba(var(--mm-ink),.56); }
.mm-e-name{
  margin:0; line-height:.96; color:rgba(var(--mm-ink),.94); text-wrap:balance;
}
.mm-e-name.is-long{ line-height:1.02; }
.mm-e-who{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; margin:18px 0 0; }
.mm-e-rec{ color:rgba(var(--mm-ink),.8); }
.mm-e-mk{ color:rgba(var(--mm-ink),.66); }

/* how much it served: the entry's one large figure */
.mm-e-count{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin:clamp(30px, 5vh, 48px) 0 0; }
.mm-e-big{ font-family:var(--num); font-variant-numeric:lining-nums proportional-nums; font-weight:500; font-size:clamp(76px, 7vw, 124px); line-height:.86; letter-spacing:-.02em; color:rgba(var(--mm-ink),.94); }
.mm-e-big-w{ color:rgba(var(--mm-ink),.64); }
.mm-e-count.is-none{ display:block; line-height:1.45; color:rgba(var(--mm-ink),.62); }

/* the specification: the register's fields in the owner's order; a field it leaves empty is a dash */
.mm-e-spec{ margin:clamp(30px, 5vh, 46px) 0 0; }
.mm-e-spec > div{ display:grid; grid-template-columns:9.4em minmax(0,1fr); gap:18px; padding:6px 0; align-items:baseline; }
.mm-e-spec dt{ margin:0; color:rgba(var(--mm-ink),.5); }
.mm-e-spec dd{ margin:0; line-height:1.45; color:rgba(var(--mm-ink),.88); }
.mm-e-spec > div.is-gap dd{ color:rgba(var(--mm-ink),.28); }

.mm-e-sec{ margin-top:clamp(44px, 7vh, 72px); }
.mm-e-h{ margin:0 0 18px; color:rgba(var(--mm-ink),.5); }
.mm-e-none{ margin:0; line-height:1.5; color:rgba(var(--mm-ink),.62); }

/* where it enters the making: the six steps in a row, the ones it stands in inked, the rest left pale */
.mm-j{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px 18px; margin:0; padding:0; list-style:none; }
.mm-j li{ display:flex; flex-direction:column; gap:4px; opacity:.24; }
.mm-j li.is-on{ opacity:1; }
.mm-j li.is-laid{ opacity:.6; }
.mm-j-n{ color:rgba(var(--mm-ink),.62); }
.mm-j-name{ line-height:1.08; color:rgba(var(--mm-ink),.94); }
.mm-j-says{ margin-top:20px; }
.mm-j-say{ display:flex; align-items:baseline; gap:4px 14px; margin:0 0 8px; }
.mm-j-sn{ flex:0 0 2.2em; color:rgba(var(--mm-ink),.48); }
.mm-j-st{ flex:1 1 auto; line-height:1.5; color:rgba(var(--mm-ink),.8); }
.mm-j-say.is-general .mm-j-st{ color:rgba(var(--mm-ink),.56); }

/* the works made with it: plates, three to a row, each a print on the white with its own soft shadow */
.mm-plates{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:30px 20px; margin:0; padding:0; list-style:none; }
.mm-plate{ margin:0; min-width:0; }
.mm-plate-im{ display:block; aspect-ratio:1 / 1; overflow:hidden; background:#F4F3F0; box-shadow:0 12px 26px -16px rgba(30,22,10,.42), 0 2px 5px -2px rgba(30,22,10,.12); }
.mm-plate-im img{ display:block; width:100%; height:100%; object-fit:cover; }
.mm-plate-im.is-none{ display:grid; place-items:center; background:none; box-shadow:none; }
.mm-plate-im.is-none span{ color:rgba(var(--mm-ink),.55); text-align:center; padding:0 10px; }
.mm-plate-no{ margin:12px 0 0; color:rgba(var(--mm-ink),.86); }
.mm-plate-how{ margin:2px 0 0; line-height:1.35; color:rgba(var(--mm-ink),.66); }
.mm-plate-ways{ display:flex; flex-wrap:wrap; gap:4px 16px; margin:8px 0 0; }

/* what it met: each a name to go to, and the works that met them */
.mm-met-l{ margin:0; padding:0; list-style:none; }
.mm-met-l li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 18px; padding:7px 0; }
.mm-met-a, .mm-met-p{ line-height:1.12; color:rgba(var(--mm-ink),.94); }
.mm-met-v{ color:rgba(var(--mm-ink),.6); }

/* the others of its kind: a column of names to go to, each with its record number above it */
.mm-kin-l{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px 28px; margin:0; padding:0; list-style:none; }
.mm-kin-a{ display:flex; flex-direction:column; gap:1px; padding:7px 0; }
.mm-kin-no{ color:rgba(var(--mm-ink),.52); }
.mm-kin-n{ line-height:1.12; color:rgba(var(--mm-ink),.9); }

/* in general: what is true of such a material, never a fact of the register */
.mm-e-what{ margin:0 0 .85em; max-width:36em; line-height:1.62; color:rgba(var(--mm-ink),.78); }

/* ---------- under the map: the shelf, then the index ---------- */
.mm-stock{ position:relative; z-index:2; padding:clamp(88px, 13vh, 150px) var(--gutter) 0; }
.mm-index{ position:relative; z-index:2; padding:clamp(88px, 13vh, 150px) var(--gutter) clamp(96px, 16vh, 180px); }
.mm-ix-head{ margin:0 0 clamp(28px, 5vh, 48px); }
.mm-ix-k{ margin:0; color:rgba(var(--mm-ink),.52); }
/* the count stands as an object at the head, a plane behind its words (CP.depth), and the words say what it counts */
.mm-ix-t{
  display:flex; align-items:baseline; gap:0 clamp(18px, 2vw, 34px); flex-wrap:wrap;
  margin:.4em 0 0; color:rgba(var(--mm-ink),.94);
}
.mm-ix-big{ flex:0 0 auto; font-size:clamp(96px, 11vw, 176px); line-height:.82; color:rgba(var(--mm-ink),.94); }
.mm-ix-tw{
  flex:1 1 12em; max-width:13em; line-height:1.04;
  text-wrap:balance;
}

/* the index: a catalogue, kind by kind; each entry is its specimen, its number, its name, its maker, where it enters
   and what it served. No column, no rule: it is read */
.mm-ix-g{ margin-top:clamp(40px, 6.4vh, 68px); }
.mm-ix-gh{ display:flex; align-items:baseline; gap:12px; margin:0; }
.mm-ix-gw{ line-height:1; color:rgba(var(--mm-ink),.94); }
.mm-ix-gn{ color:rgba(var(--mm-ink),.44); }
.mm-ix-l{ display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:4px 36px; margin:20px 0 0; padding:0; list-style:none; }
.mm-ix-i{ min-width:0; }
.mm-ix-e{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:16px; align-items:start; padding:11px 0; }
.mm-ix-c{ display:block; width:40px; height:40px; margin-top:2px; }
.mm-ix-tx{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.mm-ix-no{ color:rgba(var(--mm-ink),.56); }
.mm-ix-n{ line-height:1.1; color:rgba(var(--mm-ink),.94); }
.mm-ix-m{ line-height:1.4; color:rgba(var(--mm-ink),.64); }
.mm-ix-at{ line-height:1.4; color:rgba(var(--mm-ink),.55); }
.mm-ix-none{ margin:28px 0 0; color:rgba(var(--mm-ink),.6); }

/* ---------- a narrow room: the map as tall as its dial is wide; open, the bloom stays and the entry is a sheet
   that rises from the foot of the window over it; the shelf and the index under both ---------- */
.mm.is-narrow .mm-stage{ position:relative; top:auto; }
.mm.is-narrow.is-open .mm-stage{ position:sticky; top:calc(var(--nav-h) + var(--mm-menu, 0px)); }
.mm.is-narrow .mm-words{ gap:8px 18px; }
.mm.is-narrow .mm-kinds{ flex:1 1 auto; gap:12px 16px; }
/* a thumb's area is padding given back by the margin: the words keep their close lines, the finger finds 44 px */
.mm.is-narrow .mm-k, .mm.is-narrow .mm-t{ min-height:0; padding-block:14px; margin-block:-14px; }
.mm.is-narrow.is-open .mm-kinds{ display:none; }   /* open, the way back takes the first line and the two words share it */
.mm.is-narrow .mm-tools{ margin-left:auto; }
.mm.is-narrow .mm-idx{ display:none; }   /* the index is always laid under the map: no word is needed to call it */
.mm.is-narrow .mm-invite{ bottom:10px; }
.mm.is-narrow .mm-sheet-col{
  grid-area:1 / 1; z-index:4; margin:var(--mm-stage-h, 62svh) 0 0; width:auto; max-width:none; padding:0;
}
.mm.is-narrow .mm-card{
  min-height:calc(100svh - var(--nav-h));
  padding:30px 16px clamp(64px, 12vh, 110px);
  /* no edge where the entry rises over the map: the map dissolves under it into the paper */
  background:linear-gradient(to bottom, rgba(var(--mm-ground),0) 0, rgb(var(--mm-ground)) 30px);
  transform:translate3d(0, var(--mm-rise, 64px), 0);
}
.mm.is-narrow .mm-card.is-in{ opacity:1; transform:none; transition:transform var(--slower) var(--settle), opacity var(--slow) var(--settle); }
.mm.is-narrow .mm-card.is-out{ transform:translate3d(0, 24px, 0); transition:transform var(--touch) var(--lift), opacity var(--touch) var(--lift); }
.mm.is-narrow .mm-e-big{ font-size:72px; }
.mm.is-narrow .mm-e-spec > div{ grid-template-columns:7.6em minmax(0,1fr); gap:12px; }
.mm.is-narrow .mm-j{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px 12px; }
.mm.is-narrow .mm-plates{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 14px; }
.mm.is-narrow .mm-kin-l{ gap:0 18px; }
.mm.is-narrow .mm-stock{ padding-top:clamp(64px, 10vh, 96px); }
.mm.is-narrow .mm-index{ padding-top:clamp(64px, 10vh, 96px); }
/* on a phone the count stands on its own line above its words: a flex line of .82 would let the glyph sit into them */
.mm.is-narrow .mm-ix-t{ display:block; margin-top:18px; }
.mm.is-narrow .mm-ix-big{ display:block; font-size:96px; line-height:1; margin:0 0 10px; }
.mm.is-narrow .mm-ix-tw{ display:block; max-width:none; }
.mm.is-narrow .mm-ix-l{ grid-template-columns:minmax(0,1fr); }

/* ---------- reduced motion: everything arrives, nothing travels ---------- */
@media (prefers-reduced-motion:reduce){
  .mm *, .mm *::before, .mm *::after{ transition:none !important; animation:none !important; }
  .mm-card, .mm.is-narrow .mm-card{ transform:none; clip-path:none !important; }
}