/* ==========================================================================
   p-museum.css — page styles for museum.html ONLY.
   Prefix: .mu-. Token-fed like every section builder: no colour that is not
   a shell token; the only literals are terminal-scoped phosphor glows, the
   same device p-practice.css uses on its warning card.

   FORM (founder rulings, 2026-08-26): the museum is a descending TIMELINE —
   newest at the top, the first design at the bottom; the scroll is the time
   machine. The screenshot IS the exhibit and the text is its caption, so
   plates run large (~1000px on desktop). The chronological rail sits to the
   RIGHT of the work — a quiet hairline with date markers beside the designs,
   not a structural divider crowding them. Era markers are quiet rail labels,
   not section boxes.

   Green budget is zero — an archive is not a verified state, so nothing
   here reaches for --pass. The screenshots are of light AND dark old
   designs, so each sits on a neutral --card plate behind a hairline
   (a mounted print, not a floating glare); shots rest slightly dimmed and
   come to full light on approach — on the tube the affordance is light.
   ========================================================================== */

/* the jump at the hero and the return at the foot travel smoothly unless the
   visitor asked for no motion; exhibits clear the sticky header on arrival */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth;}
}

/* --------------------------------------------------------------------------
   entrance plaque + the one boxed control (start at the oldest design)
   -------------------------------------------------------------------------- */
.mu-plaque{
  margin:2rem 0 0;max-width:66ch;
  border:1px solid var(--hair);border-radius:var(--radius);
  padding:.95rem 1.15rem 1rem;
}
.mu-plaque p{margin:0;font-family:var(--mono);font-size:.75rem;line-height:1.7;color:var(--muted);}
.mu-plaque b{color:var(--ink);font-weight:500;letter-spacing:.06em;text-transform:uppercase;}
html[data-theme="terminal"] .mu-plaque{box-shadow:inset 0 0 32px rgba(43,255,111,.04);}

.mu-start{margin:1.7rem 0 0;}

/* --------------------------------------------------------------------------
   the hero, rebalanced (founder, 2026-08-27): stacked left, the statement is
   a narrow ragged column with the right half of the viewport dead. At >=1000px
   the hero splits into two banks — the statement (kicker/H1/lead) on the left,
   and a catalog PLACARD on the right carrying the counts, the entry control
   and the curator's note — so the right field is no longer empty and the block
   reads as a composed whole. Below 1000px the placard is a plain stack and the
   hero is one column, exactly as it was. The placard is the mu-plaque device
   grown to hold the group: one hairline box with the same terminal phosphor
   inset glow, radius 0 on the tube. Green budget stays zero — an entrance is
   not a verified state.
   -------------------------------------------------------------------------- */
@media (min-width:1000px){
  .mu-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 20rem;
    column-gap:clamp(2.6rem,3.4vw,3.6rem);
    align-items:start;
  }
  .mu-hero-main{min-width:0;}     /* let the H1/lead shrink to the bank */

  /* the placard: one mounted label boxing the group */
  .mu-hero-aside{
    display:flex;flex-direction:column;gap:1.25rem;
    border:1px solid var(--hair);border-radius:var(--radius);
    padding:1.35rem 1.4rem 1.45rem;
  }
  html[data-theme="terminal"] .mu-hero-aside{box-shadow:inset 0 0 32px rgba(43,255,111,.04);}

  /* the counts, restacked as a specimen list inside the placard */
  .mu-hero-aside .facts{
    margin:0;flex-direction:column;align-items:flex-start;gap:.42rem;
    font-size:.8rem;
  }

  /* the entry control spans the placard as its one action bar */
  .mu-hero-aside .mu-start{margin:0;}
  .mu-hero-aside .mu-start .btn{width:100%;}

  /* the note folds into the placard: it drops its own box (it is inside one
     now) and its measure opens to the placard column. The separator is DRAWN
     (a ::before hairline), not a border on the note — so the note carries no
     boundary of its own and its text keeps the placard's own inset. */
  .mu-hero-aside .mu-plaque{
    position:relative;
    margin:0;max-width:none;box-shadow:none;
    /* zero the note's own frame with longhands (the `border` shorthand does
       not clear the decomposed side widths in every parser) */
    border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;
    border-radius:0;
    padding:1.15rem 0 0;
  }
  .mu-hero-aside .mu-plaque::before{
    content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair);
  }
  html[data-theme="terminal"] .mu-hero-aside .mu-plaque{box-shadow:none;}
}

/* --------------------------------------------------------------------------
   the timeline. Geometry (desktop): [work minmax(0,1fr)] [gap 2.6rem with the
   spine 1.3rem in] [dates 6.2rem] — content left, rail right.
   -------------------------------------------------------------------------- */
.mu-tl{
  --mu-rail:6.2rem;                          /* the date column, right bank  */
  --mu-spine-r:calc(var(--mu-rail) + 1.3rem);/* spine offset from the right  */
  position:relative;
}
.mu-tl::before{
  content:"";position:absolute;top:.6rem;bottom:.4rem;
  right:var(--mu-spine-r);width:1px;background:var(--hair);
}

/* era markers: quiet rail labels — the name ends at the rail, a tick crosses
   the spine. Mono, mixed case: the label voice without kicker tracking. */
.mu-era{
  position:relative;margin:5.4rem 0 3rem;
  max-width:none;   /* opt out of craft 3e's prose measure: a rail label is not a sentence */
  text-align:right;
  padding-right:calc(var(--mu-spine-r) + 1.5rem);
  font-family:var(--mono);font-size:.75rem;line-height:1.5;
  letter-spacing:.02em;font-weight:600;color:var(--ink);
}
.mu-era:first-child{margin-top:.2rem;}
.mu-era::before{
  content:"";position:absolute;right:calc(var(--mu-spine-r) - 10px);top:.62em;
  width:21px;height:1px;background:var(--hair-strong);
}
.mu-era span{color:var(--muted);font-weight:400;padding-left:.55em;display:inline-block;white-space:nowrap;}

/* one exhibit hanging off the rail */
.mu-item{
  position:relative;margin:4.6rem 0;
  display:grid;grid-template-columns:minmax(0,1fr) var(--mu-rail);
  column-gap:2.6rem;align-items:start;
  scroll-margin-top:96px;
}
.mu-item::before{ /* the node on the spine */
  content:"";position:absolute;right:calc(var(--mu-spine-r) - 2px);top:.5em;
  width:5px;height:5px;background:var(--hair-strong);
}

/* the date, on the far bank of the spine */
.mu-when{
  margin:0;text-align:left;padding-top:.15rem;
  font-family:var(--mono);font-size:.75rem;line-height:1.5;
  letter-spacing:.02em;color:var(--muted);
}

/* the work: a large mounted plate, caption beneath */
.mu-work{min-width:0;}
.mu-shot{
  display:block;padding:10px;
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.mu-shot img{
  display:block;width:100%;height:auto;
  border:1px solid var(--hair);background:var(--card);
  filter:brightness(.86) saturate(.97);
  transition:filter .18s ease;
}
.mu-item:hover .mu-shot,
.mu-item:focus-within .mu-shot{border-color:var(--hair-strong);}
.mu-item:hover .mu-shot img,
.mu-item:focus-within .mu-shot img{filter:none;}
html[data-theme="terminal"] .mu-item:hover .mu-shot,
html[data-theme="terminal"] .mu-item:focus-within .mu-shot{box-shadow:0 0 24px rgba(43,255,111,.12);}
@media (prefers-reduced-motion: reduce){
  .mu-shot,.mu-shot img{transition:none;}
}

/* caption: name, one line, the door in */
.mu-caption{margin-top:1.05rem;}
.mu-item h3{margin:0 0 .45rem;font-size:1.08rem;line-height:1.4;}
/* the terminal theme uppercases every h3 at (0,2,1); the museum's titles are
   specimen labels and stay mixed case, links or not */
html[data-theme="terminal"] .mu-item h3,
.mu-item h3{text-transform:none;}
.mu-item h3 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair-strong);}
.mu-item h3 a:hover{border-bottom-color:var(--signal);}
.mu-desc{
  margin:0;max-width:72ch;
  font-family:var(--prose);font-size:.98rem;line-height:1.6;color:var(--ink-60);
  text-wrap:pretty;
}
.mu-open{margin:.8rem 0 0;max-width:none;font-family:var(--mono);font-size:.78rem;line-height:1.6;}
.mu-open a{color:var(--ink-60);text-decoration:none;padding-bottom:2px;border-bottom:1px solid var(--hair-strong);}
.mu-open a:hover{color:var(--signal);border-bottom-color:var(--signal);}
.mu-open .mu-k-sep{color:var(--hair-strong);padding:0 .4em;}

/* the ballot (founder, 2026-08-27): every ARCHIVED exhibit takes one quiet
   vote — "i like this one more" — in the caption row's own mono voice,
   bracketed the way the tube brackets its controls. The living entry is not
   a candidate. The page script injects the button (a dead control without JS
   would be worse than none), remembers the vote per exhibit in localStorage,
   and counts it in PostHog. The settled state reads --muted, never --pass:
   a vote is taste, not a verified state, and the green budget here stays
   zero. The no-layout-shift width lock lives in the script (min-width fixed
   at click), not here. */
.mu-vote{
  appearance:none;border:0;background:none;margin:0;padding:0 0 2px;
  font:inherit;font-family:var(--mono);font-size:.78rem;line-height:1.6;
  letter-spacing:.01em;color:var(--ink-60);
  cursor:pointer;white-space:nowrap;text-align:left;
}
.mu-vote::before{content:"[ ";color:var(--hair-strong);}
.mu-vote::after{content:" ]";color:var(--hair-strong);}
.mu-vote:hover{color:var(--signal);}
.mu-vote:hover::before,.mu-vote:hover::after{color:var(--signal);}
.mu-vote[disabled]{color:var(--muted);cursor:default;}
.mu-vote[disabled]:hover{color:var(--muted);}
.mu-vote[disabled]:hover::before,.mu-vote[disabled]:hover::after{color:var(--hair-strong);}

/* --------------------------------------------------------------------------
   the living exhibit: no screenshot — the plate shows the thing itself
   -------------------------------------------------------------------------- */
.mu-now::before{background:var(--signal);}
.mu-live{
  grid-column:1;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:2.4rem;align-items:center;
  background:var(--card);border:1px solid var(--hair-strong);border-radius:var(--radius);
  padding:2rem 2.1rem;
}
html[data-theme="terminal"] .mu-live{box-shadow:inset 0 0 48px rgba(43,255,111,.05);}
.mu-live h3{margin:0 0 .55rem;font-size:1.08rem;}
.mu-live .mu-desc{max-width:56ch;}

/* the self-portrait: a paper-ground plate rendering the current theme live */
.mu-live-shot{
  align-self:stretch;min-height:200px;
  display:flex;flex-direction:column;justify-content:center;gap:.75rem;
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius);
  padding:1.6rem 1.5rem;
}
.mu-live-line{
  font-family:var(--mono);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.2;letter-spacing:.02em;
  color:var(--signal);
}
.mu-live-chev{color:var(--hair-strong);}
.mu-cursor{
  display:inline-block;width:.5em;height:.8em;margin-left:.18em;
  background:var(--signal);vertical-align:baseline;transform:translateY(.08em);
  animation:mu-blink 1.1s steps(1) infinite;
}
@keyframes mu-blink{50%{opacity:0;}}
@media (prefers-reduced-motion: reduce){
  .mu-cursor{animation:none;}
}
.mu-live-sub{
  font-family:var(--mono);font-size:.75rem;line-height:1.6;letter-spacing:.02em;
  color:var(--muted);
}

/* the two quiet exits at the foot of the timeline */
.mu-foot{margin:3.6rem 0 0;max-width:none;font-family:var(--mono);font-size:.8rem;}
.mu-foot .mu-k-sep{color:var(--hair-strong);padding:0 .55em;}

/* heading for assistive tech only: the rail carries the visual structure */
.mu-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

/* --------------------------------------------------------------------------
   breakpoints. ≤1080 narrows the rail; ≤900 stacks to one clean column with
   a minimal left spine and the date above each plate (the phone form — 375
   must read as a single-column timeline).
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .mu-tl{--mu-rail:5rem;--mu-spine-r:calc(var(--mu-rail) + 1.1rem);}
  .mu-item{column-gap:2.2rem;}
}
@media (max-width:900px){
  .mu-tl::before{left:5px;right:auto;}
  .mu-item{display:flex;flex-direction:column;margin:3.4rem 0;padding-left:26px;}
  .mu-item::before{left:3px;right:auto;top:.4em;}
  .mu-when{order:-1;margin:0 0 .6rem;padding-top:0;}
  .mu-caption{margin-top:.95rem;}
  .mu-era{text-align:left;padding-right:0;padding-left:26px;margin:4rem 0 2.4rem;}
  .mu-era::before{left:0;right:auto;width:16px;}
  .mu-live{grid-template-columns:1fr;padding:1.5rem 1.3rem;gap:1.8rem;}
  .mu-live-shot{min-height:160px;}
  .mu-item{scroll-margin-top:84px;}
}