/* ============================================================
   THE MATERIALS, AS A BOOK THAT TEACHES (rooms/matbook.js)    P, 19 October 2026
   White, one column of reading, a chapter rail at the head; each material a line with its specimen.
   ============================================================ */
.mb{ position:relative; max-width:1180px; margin:0 auto; padding:clamp(28px, 7vh, 90px) var(--margin, 5vw) 22vh; background:#FFFFFF; }
.mb-head{ max-width:760px; }
.mb-title{ margin:0; }
.mb-lead{ margin:.8em 0 0; max-width:34em; }
/* the chapters, as titles, the one being read in full ink. 20 October: they never run over what is read. On a desk
   they stand in a column of their own at the left, held there while the chapters pass beside them; on a narrower
   screen they stand at the head of the book and go with it. No band is laid under them. */
.mb-rail{
  position:relative; z-index:3; display:flex; flex-wrap:wrap; gap:.4em 1.6em;
  margin:clamp(28px, 6vh, 64px) 0 clamp(20px, 4vh, 40px); padding:.7em 0;
}
@media (min-width:1280px){
  /* the column of chapter words is laid in the page's own margin, so the reading keeps its full measure */
  .mb.mb-book{
    display:grid; grid-template-columns:120px minmax(0, 1fr); column-gap:36px;
    max-width:calc(1180px + 156px); margin-left:calc(max(0px, (100% - 1180px) / 2) - 156px); margin-right:auto;
  }
  .mb.mb-book > *{ grid-column:2; }
  .mb.mb-book > .mb-head{ grid-row:1; }
  .mb.mb-book > .mb-rail{
    grid-column:1; grid-row:2 / span 20; align-self:start;
    position:sticky; top:calc(var(--nav-h, 72px) + 16vh);
    flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:.5em; margin:clamp(56px, 12vh, 150px) 0 0; padding:0;
  }
}

.mb-rail-w{ opacity:.34; transition:opacity var(--slow) var(--settle); padding:.2em 0; cursor:pointer; }
.mb-rail-w:hover, .mb-rail-w.is-on{ opacity:1; }

.mb-ch{ margin-top:clamp(56px, 12vh, 150px); }
.mb-ch-head{ display:grid; grid-template-columns:auto 1fr; gap:clamp(18px, 3vw, 44px); align-items:start; max-width:900px; }
.mb-ch-n{ margin:0; font-size:clamp(64px, 8vw, 128px) !important; line-height:.82; }
/* 26 October (smooth): a glossy line is as wide as its words, not its column. The house's vinyl (an SVG filter, lit by
   house/lumen.js) is drawn over the whole box of the thing it is on, and the lamp's walk draws it again on every step,
   so a name in a column of 400 px drew the gloss over four times its own letters. The words keep their place (each
   line starts where it did; a long name still breaks where it did), so the letters, the lamp on them and their
   shadow are drawn exactly as before. */
.mb-ch-title, .mb-name, .mb-maker, .mbr-mm .mbr-title{ width:fit-content; }
.mb-ch-title{ margin:0; }
.mb-ch-lead{ margin:.6em 0 0; max-width:30em; }
.mb-ch-go{ display:inline-block; margin-top:.9em; opacity:.7; }
.mb-ch-go:hover{ opacity:1; }

.mb-list{ list-style:none; margin:clamp(28px, 5vh, 56px) 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(22px, 4vh, 44px) clamp(28px, 5vw, 80px); }
.mb-row{ display:grid; grid-template-columns:88px minmax(0, 1fr); gap:22px; align-items:start; scroll-margin-top:30vh; }
.mb-spec{ width:88px; height:88px; display:block; }
.mb-name{ margin:.2em 0 0; }
.mb-maker{ margin:.35em 0 0; opacity:.6; }
.mb-note{ margin:.5em 0 0; max-width:30em; opacity:.85; }
/* a name and one line: the note's first line (its maker only where it has no note); the rest opens when chosen */
.mb-row.has-note .mb-maker{ display:none; }
.mb-row-t{ min-width:0; }
.mb-row .mb-note{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.mb-row.is-open .mb-name{ text-decoration:none; }
.mb-row.is-open{ outline:none; }
.mb-row.is-open .mb-spec{ transform:scale(1.08); transition:transform var(--slow) var(--settle); }

/* comes up as it is reached: the specimen lifts out of a breath of blur; the words ink in one after another.
   26 October (smooth): the waiting offset is a flat translate, not translate3d: each of the three hundred words still to
   come was its own layer on the compositor before it moved (217 layers on the page); the move itself is the same,
   and a word is lifted onto a layer only while it is moving, as before. */
@media (prefers-reduced-motion:no-preference){
  .mb-row .mb-spec, .mb-ch-n{ opacity:0; filter:blur(8px) brightness(1.2); transform:translate(0, 16px) scale(.94);
    transition:opacity .6s var(--settle), filter .7s var(--settle), transform .7s var(--settle); transition-delay:calc(var(--i, 0) * 40ms); }
  .mb-row.is-up .mb-spec, .mb-ch-head.is-up .mb-ch-n{ opacity:1; filter:none; transform:none; }
  .mb-w{ display:inline-block; opacity:0; filter:blur(5px); transform:translate(0, .32em);
    transition:opacity .5s var(--settle), filter .6s var(--settle), transform .6s var(--settle);
    transition-delay:calc(min(var(--wi, 0), 24) * var(--ws, 28ms) * .55 + 40ms); }
  .is-up .mb-w{ opacity:1; filter:none; transform:none; }
  .mb-maker, .mb-ch-go{ opacity:0; transition:opacity .6s var(--settle) .2s; }
  .is-up .mb-maker{ opacity:.6; }
  .is-up .mb-ch-go{ opacity:.7; }
}
/* the one material of a chapter (the beetroot) is shown large, as a plate of its own */
.mb-list.is-one{ grid-template-columns:1fr; }
.mb-list.is-one .mb-row{ grid-template-columns:168px 1fr; gap:36px; align-items:center; }
.mb-list.is-one .mb-spec{ width:168px; height:168px; }
.mb-row{ cursor:default; }
.mb-row:hover .mb-name{ letter-spacing:.005em; }
@media (max-width:759px){
  .mb{ padding:24px 16px 18vh; }
  .mb-list{ grid-template-columns:1fr; }
  .mb-row{ grid-template-columns:64px minmax(0, 1fr); gap:14px; }
  .mb-spec{ width:64px; height:64px; }
  .mb-rail{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .mb-rail::-webkit-scrollbar{ display:none; }
  .mb-rail-w{ white-space:nowrap; }
}

/* ---------- One by one (rooms/matbook.js plate), P, 19 October 2026 ----------
   The material alone on white under the letterhead: the chapters and the count at the left, the specimen
   large in the middle, its words at the right. The outgoing specimen lifts into a breath of blur, the
   next develops up out of it. */
.mb-modes{ margin-top:clamp(14px, 2.4vh, 26px); }
.mb-row{ cursor:pointer; }
.mbp{
  position:fixed; inset:0; z-index:44; background:#FFFFFF;
  display:grid; grid-template-columns:minmax(180px, 22vw) 1fr minmax(260px, 30vw); align-items:center; gap:clamp(20px, 3vw, 56px);
  padding:calc(var(--nav-h, 72px) + 4vh) var(--margin, 5vw) 6vh; box-sizing:border-box;
  opacity:0; transition:opacity var(--slow) var(--settle);
}
.mbp.is-open{ opacity:1; }
html.mb-one{ overflow:hidden; }
.mbp-side{ align-self:start; display:flex; flex-direction:column; gap:clamp(16px, 4vh, 44px); }
.mbp-chs{ display:flex; flex-direction:column; align-items:flex-start; gap:.2em; }
.mbp-ch-w{ opacity:.32; padding:.15em 0; transition:opacity var(--slow) var(--settle); cursor:pointer; }
.mbp-ch-w:hover, .mbp-ch-w.is-on{ opacity:1; }
.mbp-count{ margin:0; display:flex; align-items:baseline; gap:.35em; }
.mbp-i{ font-size:clamp(56px, 7vw, 112px) !important; line-height:.82; }
.mbp-n{ opacity:.5; }
.mbp-back{ align-self:flex-start; }
.mbp-stage{ position:relative; height:100%; min-height:240px; display:grid; place-items:center; cursor:pointer; }
.mbp-spec{ position:absolute; left:50%; top:50%; translate:-50% -50%;
  transition:opacity .6s var(--settle), filter .7s var(--settle), transform .8s var(--settle); }
.mbp-spec.is-coming{ opacity:0; filter:blur(14px) brightness(1.25); transform:translate3d(0, calc(var(--dir, 1) * 48px), 0) scale(.94); }
.mbp-spec.is-leaving{ opacity:0; filter:blur(12px) brightness(1.2); transform:translate3d(0, calc(var(--dir, 1) * -48px), 0) scale(1.04);
  transition:opacity .4s var(--lift), filter .45s var(--lift), transform .5s var(--lift); }
.mbp-text{ align-self:center; }
.mbp-chn{ margin:0 0 .8em; opacity:.6; }
.mbp-name{ margin:0; font-size:clamp(38px, 4vw, 72px) !important; line-height:1; overflow-wrap:break-word; }
.mbp-name.is-long{ font-size:clamp(30px, 2.8vw, 50px) !important; }
.mbp-text{ min-width:0; }
.mbp-maker{ margin:.9em 0 0; opacity:.6; }
.mbp-note{ margin:.9em 0 0; max-width:24em; }
@media (prefers-reduced-motion:no-preference){
  .mbp-text :is(.mbp-chn, .mbp-maker){ opacity:0; transition:opacity .5s var(--settle) .15s; }
  .mbp-text.is-up .mbp-chn, .mbp-text.is-up .mbp-maker{ opacity:.6; }
}
@media (max-width:759px){
  .mbp{ grid-template-columns:1fr; grid-template-rows:auto 1fr auto; align-items:start; gap:10px; padding:calc(var(--nav-h, 64px) + 2vh) 16px 4vh; }
  .mbp-side{ flex-direction:row; align-items:baseline; justify-content:space-between; gap:10px; }
  .mbp-chs{ display:none; }
  .mbp-i{ font-size:44px !important; }
  .mbp-stage{ min-height:46vh; }
  .mbp-name{ font-size:34px !important; }
}

/* ============================================================
   28 OCTOBER: THE FIELD (rooms/matfield.js), at the head of the book
   Every material a point of ink, the points of a chapter gathered in a loose round, the rounds in the order a print
   is made, each with its number and its name under it. The hand near a point sets its name beside it.
   ============================================================ */
.mf{ position:relative; margin:clamp(26px, 5vh, 64px) 0 0; }
.mf-stage{ position:relative; height:clamp(340px, 54vh, 560px); }
.mf-cv{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y; }
.mf-words{ position:absolute; inset:0; pointer-events:none; }
.mf-ch{
  position:absolute; transform:translate(-50%, 0); pointer-events:auto;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  margin:0; padding:4px 8px; border:0; background:none; cursor:pointer; color:var(--ink, #1A1814);
  opacity:0; transition:opacity .7s var(--settle), transform .7s var(--settle);
}
.mf-ch-n{ font-family:var(--num, var(--display)); font-size:13px; letter-spacing:.08em; font-variant-numeric:lining-nums; }
.mf-ch-t{ font-family:var(--display); font-style:italic; font-size:clamp(20px, 1.7vw, 26px); line-height:1; white-space:nowrap; }
.mf.is-in .mf-ch{ opacity:1; }
.mf.is-in .mf-ch:nth-child(2){ transition-delay:.12s; } .mf.is-in .mf-ch:nth-child(3){ transition-delay:.24s; } .mf.is-in .mf-ch:nth-child(4){ transition-delay:.36s; }
.mf.is-hot .mf-ch{ opacity:.35; }
@media (hover:hover){ .mf-ch:hover{ opacity:1 !important; } }
.mf-tip{
  position:absolute; z-index:2; transform:translate(16px, -50%); opacity:0; pointer-events:none;
  display:flex; flex-direction:column; align-items:flex-start; gap:3px; max-width:min(320px, 60vw);
  margin:0; padding:2px 0; border:0; background:none; color:var(--ink, #1A1814); text-align:left; white-space:nowrap;
  transition:opacity .2s var(--settle);
}
.mf-tip.is-left{ transform:translate(calc(-100% - 16px), -50%); align-items:flex-end; text-align:right; }
.mf-tip-n{ font-family:var(--display); font-size:clamp(22px, 1.9vw, 30px); line-height:1.02; white-space:normal; }
.mf-tip-k{ font-family:var(--serif); font-style:italic; font-size:14px; }
.mf.is-hot .mf-tip{ opacity:1; }
@media (pointer:coarse){ .mf.is-hot .mf-tip{ pointer-events:auto; } }
.mf-cap{ margin:10px 0 0; text-align:center; font-style:italic; }
@media (max-width:699px){ .mf-stage{ height:clamp(360px, 58svh, 520px); } }
@media (prefers-reduced-motion:reduce){ .mf-ch, .mf-tip{ transition:none; } }