/* GriftMatrix hub test page (stage 3, 9 Oct 2026). Page-only styles on top of shared/ratc.css.
   The page is a literal matrix: Rachel's eight investigations down the side, every month across, one square
   per month, brighter for more pieces. Counted from the posts, never typed (her ruling: the GriftMatrix count is
   generated; "Ten years of it" comes off). Motion: once, when the matrix comes into view, the squares switch on
   left to right like a scan. Still, reduced motion, scripts off: finished. */

/* ---------- 1. Opening ---------------------------------------------------- */
.gm-open { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }
.gm-open__inner { display: grid; gap: 14px; justify-items: start; }
.gm-kicker, .gm-title { margin: 0; }
.gm-big { margin: 6px 0 0; max-width: 16em; font: 400 clamp(2rem, 1.3rem + 2.6vw, 3.75rem)/1 var(--font-display); color: var(--display); text-wrap: balance; }
.gm-line { margin: 0; max-width: 52ch; }
.gm-count { margin: 4px 0 6px; }
/* doors, as on the homepage's GriftMatrix room */
.doors { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; }
.door {
  position: relative; display: flex; align-items: flex-end;
  width: clamp(6.5rem, 5rem + 4vw, 9rem); height: clamp(8.5rem, 7rem + 4vw, 11rem);
  padding: 12px 14px; border: 2px solid var(--cream); border-radius: 0;
  background: rgb(14 8 13 / .2);
  font: 400 clamp(1.125rem, 1rem + .5vw, 1.5rem)/1 var(--font-display); text-transform: uppercase; color: var(--cream);
  text-decoration: none;
}
.door::before { content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: 38%; border: 2px solid rgb(247 216 165 / .35); }
.door__knob { position: absolute; right: 12px; top: 54%; width: 9px; height: 9px; border-radius: 50%; background: var(--mustard); border: 1.5px solid var(--cream); }
.door:hover { background: var(--cream); color: var(--ink-plum); }
.door:hover::before { border-color: rgb(27 15 25 / .35); }
/* Her review, 10 Oct 2026: "move the doors over and make them bigger - it took me a minute to even realize that they
   were doors". The text and the doors are two columns on a computer: the doors stand on the right, about twice the
   height they were. Each label is sized from its own door's width, so "By investigation" always fits inside. */
.gm-open__text { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.gm-doorway { min-width: 0; }
.gm-doorway__h { margin: 0 0 14px; font: 400 clamp(1.25rem, 1rem + .8vw, 1.75rem)/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; color: var(--display); }   /* her review, 10 Oct: "add over them - Choose Your Door" */
.gm-doors li { container-type: inline-size; width: clamp(6.5rem, 5rem + 4vw, 9rem); }
.gm-doors .door { width: 100%; font-size: clamp(.875rem, 12cqi, 2rem); }
@media (min-width: 900px) {
  .gm-open__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(32px, 4vw, 72px); }
  .gm-doors { flex-wrap: nowrap; gap: clamp(14px, 1.6vw, 22px); }
  .gm-doors li { width: clamp(8.5rem, 3rem + 9vw, 12rem); }
  .gm-doors .door { height: clamp(14rem, 6rem + 13vw, 19.5rem); padding: 16px 16px 18px; }
  .gm-doors .door::before { left: 12px; right: 12px; top: 12px; }
  .gm-doors .door__knob { right: 16px; width: 14px; height: 14px; border-width: 2px; }
}

/* ---------- 2. The matrix ------------------------------------------------- */
.gm-mx__h { margin: 0 0 1.75rem; }
.mx { --mx-name: 330px; --mx-gap: 28px; }
.mx__axis, .mx__row { display: grid; grid-template-columns: var(--mx-name) minmax(0, 1fr); column-gap: var(--mx-gap); }
.mx__axis { margin-bottom: 10px; }
.mx__months { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 4px; }
.mx__mo { grid-column: calc(var(--k) + 1) / span 3; font: 600 .875rem/1 var(--font-mono); letter-spacing: .04em; color: var(--text); white-space: nowrap; border-left: 2px solid var(--bone); padding-left: 5px; }
.mx__rows { list-style: none; border-top: 2px solid var(--bone); }
.mx__row { grid-template-rows: auto auto; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--dusk-violet); }
.mx__name { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.mx__h { margin: 0; font: 400 clamp(1.25rem, 1rem + .7vw, 1.75rem)/1.05 var(--font-display); text-transform: uppercase; }
.mx__h a { color: var(--display); text-decoration: none; }
.mx__h a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: .12em; }
.mx__n { margin: 0; color: var(--text); }
.mx__line { grid-column: 1; grid-row: 2; margin: 6px 0 0; font-size: .9375rem; line-height: 1.45; max-width: 40ch; }
.mx__cells { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 4px; }
.mx__c { display: block; aspect-ratio: 1; max-width: 100%; border-radius: 2px; }
.mx__c[data-t="0"] { box-shadow: inset 0 0 0 1px var(--dusk-violet); }
.mx__c[data-t="1"] { background: rgb(217 140 66 / .32); }
.mx__c[data-t="2"] { background: rgb(217 140 66 / .62); }
.mx__c[data-t="3"] { background: var(--mustard); }
.mx__c[data-t="4"] { background: var(--bone); }
.mx__key { margin: 18px 0 0 calc(var(--mx-name) + var(--mx-gap)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.mx__key-s { display: inline-grid; grid-template-columns: repeat(5, 14px); gap: 4px; }

/* ---------- 3. The Epstein Files ------------------------------------------ */
.gm-ep__inner { display: grid; gap: 16px; justify-items: start; }
.gm-ep__inner p { margin: 0; max-width: 54ch; }

/* ---------- 4. Also in the GriftMatrix (protected rooms: plain links, no motion) ---------- */
.gm-also__h { margin: 0 0 16px; }
.gm-also__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gm-also__card { display: grid; gap: 8px; height: 100%; padding: 22px 24px; border: 2px solid var(--bone); color: var(--text); text-decoration: none; }
.gm-also__name { font: 400 var(--fs-h2)/1 var(--font-display); text-transform: uppercase; color: var(--display); }
.gm-also__card:hover .gm-also__name { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: .12em; }

/* ---------- Motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="still"]) .mx.is-armed .mx__c:not([data-t="0"]) {
    animation: mx-on 1ms step-end both paused;
    animation-delay: calc(var(--k, 0) * 42ms + var(--r, 0) * 30ms);
  }
  :root:not([data-motion="still"]) .mx.is-armed.is-in .mx__c { animation-play-state: running; }
}
@keyframes mx-on { from { background: transparent; box-shadow: inset 0 0 0 1px var(--dusk-violet); } }

/* ---------- Phone and tablet -------------------------------------------------- */
@media (max-width: 1099px) { .mx { --mx-name: 260px; --mx-gap: 20px; } }
@media (max-width: 899px) {
  .doors { gap: 10px; width: 100%; }
  .doors li { flex: 1 1 0; min-width: 0; }
  .door { width: 100%; height: 8.5rem; padding: 10px; font-size: 1.0625rem; }
  .gm-doors .door { height: 11rem; font-size: clamp(.875rem, 12cqi, 1.25rem); }   /* taller on a phone too (her review, 10 Oct) */
  .mx { --mx-name: 0px; --mx-gap: 0px; }
  .mx__axis, .mx__row { grid-template-columns: minmax(0, 1fr); }
  .mx__axis-pad { display: none; }
  .mx__months, .mx__cells { gap: 2px; }
  .mx__mo { padding-left: 3px; }
  .mx__mo:nth-child(even) { visibility: hidden; }
  .mx__cells { grid-column: 1; grid-row: 3; margin-top: 10px; }
  .mx__key { margin-left: 0; }
  .gm-also__list { grid-template-columns: minmax(0, 1fr); }
}