/* =========================================================================
   MARMONT — per-paper layer for /signals/the-letter-to-marmont
   Loaded on top of wired.css + wired-article.css. Everything is prefixed
   `mm-` and scoped under .sig-article so nothing leaks.

   Doctrine carried over: amber = the system (chrome, structure), cyan = the
   data (decoded values), violet = the anomaly (readings proposed from
   context, not proven by the cipher), blood = failure, green = confirmation.
   ========================================================================= */

/* ---- masthead: two-line glitch title ------------------------------------ */
.mm-title {
  margin: 0;
  font-size: clamp(2.2rem, 6.4vw, 4.8rem);
  line-height: 1.02;
  font-weight: 400;
}
.mm-title .glitch { white-space: nowrap; }
.mm-title .l2 { display: block; }
.mm-sub {
  margin: 18px 0 0;
  font-family: var(--term);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  letter-spacing: 0.04em;
  color: var(--cyan-glow);
}
.mm-chips { justify-content: center; margin-top: 26px; }

/* ---- the one line in clear ----------------------------------------------- */
.mm-clear {
  position: relative;
  margin: 1.9em 0;
  padding: 26px 24px 20px;
  border: 1px solid var(--wire-2);
  background:
    linear-gradient(90deg, rgba(232, 220, 192, 0.04), transparent 60%),
    linear-gradient(180deg, rgba(16, 18, 22, 0.85), rgba(10, 11, 13, 0.6));
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55);
}
.mm-clear::before {
  content: "EN CLAIR";
  position: absolute;
  top: 7px; left: 14px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--phosphor-faint);
}
.mm-clear p {
  margin: 0;
  font-family: var(--term);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.35;
  color: var(--phosphor);
  text-shadow: 0 0 10px rgba(232, 220, 192, 0.2);
}
.mm-clear .rows {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--phosphor-faint);
}
.mm-clear .rows b { color: var(--amber); font-weight: 400; }

/* ---- source documents: a lighter CRT so the scans stay legible ---------- */
.mm-doc img { filter: contrast(1.06) brightness(0.94) saturate(0.7); }
.mm-doc::after {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 3px),
    radial-gradient(120% 120% at 50% 50%, transparent 66%, rgba(0, 0, 0, 0.45) 100%);
}
.mm-doc.plate img { max-width: 720px; margin: 0 auto; }
/* a book page in a window that scrolls */
.mm-scroll { max-height: 640px; overflow-y: auto; overscroll-behavior: contain; }
.mm-scroll::-webkit-scrollbar { width: 8px; }
.mm-scroll::-webkit-scrollbar-thumb { background: rgba(255, 179, 71, 0.25); }
.mm-scroll-hint {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 6px 0 2px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--phosphor-faint);
}

/* ---- the decoder strip: one sign per cell, value beneath ---------------- */
.mm-strip-wrap { overflow-x: auto; padding: 4px 0 10px; }
.mm-strip {
  display: grid;
  grid-template-columns: repeat(11, minmax(56px, 1fr));
  gap: 6px;
  min-width: 660px;
}
.mm-cell {
  position: relative;
  padding: 12px 4px 10px;
  border: 1px solid var(--wire-2);
  background: linear-gradient(180deg, rgba(16, 18, 22, 0.95), rgba(8, 9, 11, 0.85));
  text-align: center;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.mm-cell:hover { border-color: var(--amber-deep); box-shadow: 0 0 14px rgba(255, 179, 71, 0.18); }
.mm-cell .g {
  display: block;
  min-height: 2.1em;
  font-family: var(--term);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--amber);
  text-shadow: 0 0 12px rgba(255, 179, 71, 0.4);
}
.mm-cell .g.name {
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 0.4em;
}
.mm-cell .arrow { display: block; margin: 6px 0 4px; font-family: var(--mono); font-size: 0.6rem; color: var(--phosphor-faint); }
.mm-cell .v {
  display: block;
  font-family: var(--mono);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--cyan-glow);
  text-shadow: 0 0 10px rgba(79, 214, 214, 0.45);
}
.mm-cell .v.word { color: var(--sig-green); text-shadow: 0 0 10px rgba(79, 224, 138, 0.4); }
.mm-words {
  display: grid;
  grid-template-columns: repeat(11, minmax(56px, 1fr));
  gap: 6px;
  min-width: 660px;
  margin-top: 8px;
}
.mm-word {
  padding: 5px 0 3px;
  border-top: 1px solid var(--teal);
  text-align: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--phosphor-dim);
}
.mm-word.w1 { grid-column: span 1; }
.mm-word.w3 { grid-column: span 3; }
.mm-word.w6 { grid-column: span 6; }
.mm-strip-key {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--phosphor-faint);
}
.mm-strip-key i { display: inline-block; width: 10px; height: 10px; margin: 0 6px 0 14px; vertical-align: -1px; }
.mm-strip-key i.a { background: var(--amber); box-shadow: 0 0 8px rgba(255, 179, 71, 0.5); }
.mm-strip-key i.c { background: var(--cyan-glow); box-shadow: 0 0 8px rgba(79, 214, 214, 0.5); }
.mm-strip-key i.g { background: var(--sig-green); box-shadow: 0 0 8px rgba(79, 224, 138, 0.5); }

/* ---- violet bars: the open readings --------------------------------------- */
.sig-bar.vi .fill { background: linear-gradient(90deg, var(--violet-deep), var(--violet)); box-shadow: 0 0 12px rgba(154, 111, 208, 0.4); }
.sig-bar.vi .val { color: var(--violet); }
.sig-legend i.violet { background: var(--violet); box-shadow: 0 0 8px rgba(154, 111, 208, 0.5); }
.sig-metric.vi .val { color: var(--violet); text-shadow: 0 0 16px rgba(154, 111, 208, 0.4); }
.sig-metric.gr .val { color: var(--sig-green); text-shadow: 0 0 16px rgba(79, 224, 138, 0.4); }

/* ---- the decrypt: the letter itself ---------------------------------------- */
.mm-letter { margin: 2.4rem 0; }
.mm-letter .sig-fig-pane { padding: 28px clamp(18px, 4vw, 44px) 22px; }
.mm-letter-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--wire-2);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--phosphor-faint);
}
.mm-letter-status b { font-weight: 400; color: var(--cyan-glow); }
.mm-letter-status .vi { color: var(--violet); }
.mm-letter-body p {
  margin: 0 0 1.2em;
  font-size: 1.06rem;
  line-height: 1.85;
  color: var(--phosphor);
}
.mm-letter-body p:last-child { margin-bottom: 0; }
.mm-letter-body p::first-letter { color: var(--amber); }
/* a value proposed from context, not proven by the cipher */
.mm-br {
  color: var(--violet);
  border-bottom: 1px dotted rgba(154, 111, 208, 0.7);
  cursor: help;
}
.mm-sigline {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--wire);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 18px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--phosphor-faint);
}
.mm-sigline .vi { color: var(--violet); }

/* ---- the release placeholder --------------------------------------------- */
.mm-soon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 10px;
  border: 1px dashed rgba(255, 179, 71, 0.55);
  font-family: var(--mono);
  font-size: 0.78em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(255, 179, 71, 0.05);
  animation: pulse 2.4s ease-in-out infinite;
}

/* ---- timeline: the fortnight and the war ---------------------------------- */
.mm-tl { list-style: none; margin: 0; padding: 0 0 0 4px; }
.mm-tl li {
  position: relative;
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 18px;
  padding: 10px 0 12px 22px;
  border-left: 1px solid var(--wire-2);
}
.mm-tl li::before {
  content: "";
  position: absolute;
  left: -4px; top: 19px;
  width: 7px; height: 7px;
  background: var(--teal);
  box-shadow: 0 0 8px rgba(79, 214, 214, 0.5);
}
.mm-tl li.hot::before { background: var(--amber); box-shadow: 0 0 10px rgba(255, 179, 71, 0.7); }
.mm-tl li.bad::before { background: var(--blood); box-shadow: 0 0 10px rgba(181, 35, 31, 0.8); }
.mm-tl li.ok::before  { background: var(--sig-green); box-shadow: 0 0 10px rgba(79, 224, 138, 0.7); }
.mm-tl li.war { margin-top: 10px; border-left-color: var(--blood); }
.mm-tl li.war::after {
  content: "WAR";
  position: absolute;
  left: -1px; top: -9px;
  transform: translateX(-50%);
  padding: 0 6px;
  background: var(--void-2);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  color: #e05550;
}
.mm-tl .d {
  font-family: var(--term);
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: var(--amber);
  text-transform: uppercase;
}
.mm-tl li.bad .d { color: #e05550; }
.mm-tl li.ok .d  { color: var(--sig-green); }
.mm-tl .e { font-size: 0.92rem; line-height: 1.6; color: var(--phosphor-dim); }
.mm-tl .e b { font-weight: 500; color: var(--phosphor); }
.mm-tl .e q { color: var(--phosphor); quotes: "\201C" "\201D"; }
@media (max-width: 560px) {
  .mm-tl li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---- the gap: printed dots vs the cipher ---------------------------------- */
.mm-gap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 1.8em 0;
  border: 1px solid var(--wire-2);
  background: linear-gradient(180deg, rgba(16, 18, 22, 0.85), rgba(10, 11, 13, 0.6));
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55);
}
.mm-gap > div { padding: 18px 20px 16px; }
.mm-gap > div + div { border-left: 1px solid var(--wire-2); }
.mm-gap .k {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--phosphor-faint);
}
.mm-gap .q {
  font-family: var(--term);
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--phosphor);
}
.mm-gap .q .dots { color: var(--blood); letter-spacing: 0.2em; }
.mm-gap .q .found { color: var(--sig-green); text-shadow: 0 0 10px rgba(79, 224, 138, 0.35); }
.mm-gap .t { margin-top: 8px; font-family: var(--mono); font-size: 0.74rem; color: var(--phosphor-faint); }
@media (max-width: 560px) {
  .mm-gap { grid-template-columns: 1fr; }
  .mm-gap > div + div { border-left: 0; border-top: 1px solid var(--wire-2); }
}

/* ---- sources ---------------------------------------------------------------- */
.mm-further { font-size: 0.95rem; color: var(--phosphor-dim); }

/* ---- reduced motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mm-soon { animation: none; }
}

/* ---- title: the year cut large on its own line ----------------------------- */
.mm-title .yr { margin-top: 0.04em; font-size: 1.28em; letter-spacing: 0.08em; }

/* ---- lede: the abstract, unboxed ------------------------------------------- */
.mm-lede {
  max-width: 62ch;
  margin: 40px auto 0;
  font-size: 1.12rem;
  line-height: 1.75;
  color: var(--phosphor-dim);
  text-align: center;
}

/* ---- FR / EN radial on the clear line -------------------------------------- */
.mm-clear { padding-top: 44px; }
.mm-lang {
  position: absolute;
  top: 8px; right: 12px;
  display: inline-flex;
  border: 1px solid var(--wire-2);
  background: rgba(5, 5, 6, 0.6);
}
.mm-lang button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 4px 10px 3px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  color: var(--phosphor-faint);
  transition: color 160ms ease, background 160ms ease;
}
.mm-lang button + button { border-left: 1px solid var(--wire-2); }
.mm-lang button::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  transition: background 160ms ease, box-shadow 160ms ease;
}
.mm-lang button:hover { color: var(--phosphor-dim); }
.mm-lang button.on { color: var(--cyan-glow); background: rgba(79, 214, 214, 0.06); }
.mm-lang button.on::before { background: currentColor; box-shadow: 0 0 8px currentColor; }
.mm-clear p.en { color: var(--cyan-glow); text-shadow: 0 0 10px rgba(79, 214, 214, 0.25); }
.mm-clear p.en::after {
  content: "translation";
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--phosphor-faint);
  text-shadow: none;
}
@media (max-width: 560px) {
  .mm-lang { position: static; margin: -6px 0 12px; }
  .mm-clear { padding-top: 26px; }
}

/* ---- audit fixes: timeline dates on one line; printed dots never wrap ------- */
.mm-tl li { grid-template-columns: 150px 1fr; }
.mm-tl .d { white-space: nowrap; }
.mm-gap .q .dots { white-space: nowrap; letter-spacing: 0.08em; }

/* ---- page 358: scan / english view ------------------------------------------ */
.mm-view { position: relative; }
.mm-view-lang { position: absolute; top: 10px; right: 12px; z-index: 3; }
.mm-view-lang button { padding: 5px 12px 4px; background: rgba(5, 5, 6, 0.85); }
.mm-page { padding: 48px clamp(18px, 4vw, 44px) 24px; }
.mm-page p { margin: 0 0 1.1em; font-size: 1.02rem; line-height: 1.8; color: var(--phosphor); }
.mm-page .mm-page-hd, .mm-page .mm-page-src, .mm-page .mm-page-note {
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.6; color: var(--phosphor-faint);
}
.mm-page .mm-page-hd { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px dashed var(--wire-2); letter-spacing: 0.08em; text-transform: uppercase; }
.mm-page .mm-page-sig { margin-top: 1.4em; text-align: right; font-family: var(--term); font-size: 1.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); text-shadow: 0 0 12px rgba(255, 179, 71, 0.35); }
.mm-page .mm-page-src { text-align: right; }
.mm-page .mm-page-note { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--wire); }
.mm-page .dots { color: var(--blood); white-space: nowrap; letter-spacing: 0.08em; }

/* ---- timeline: years, tidy --------------------------------------------------- */
.mm-tl li { grid-template-columns: 178px 1fr; padding: 12px 0 14px 24px; }
.mm-tl .d small { font-size: 0.72em; letter-spacing: 0.1em; color: var(--phosphor-faint); }
.mm-tl li.bad .d small, .mm-tl li.ok .d small { color: var(--phosphor-faint); }
.mm-tl li::before { width: 9px; height: 9px; left: -5px; top: 21px; }
.mm-tl li.war { margin-top: 18px; padding-top: 18px; }
.mm-tl li.war::after { top: -1px; left: 44px; transform: none; padding: 0 8px; letter-spacing: 0.34em; }
@media (max-width: 560px) {
  .mm-tl li { grid-template-columns: 1fr; }
}

/* ---- decoder strip: the real signs, cut from the scan ---------------------- */
.mm-cell img.g {
  display: block;
  height: 46px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 179, 71, 0.45));
}
.mm-cell { padding: 10px 6px 10px; }
.mm-tl .d small { display: block; margin-top: 2px; font-size: 0.66em; }
.mm-tl li { grid-template-columns: 150px 1fr; }

/* ---- title: long first line sits smaller under the big year ---------------- */
.mm-title .glitch { white-space: normal; }
.mm-title > .glitch { display: block; font-size: 0.7em; letter-spacing: 0.04em; line-height: 1.1; }
.mm-title .yr { font-size: 1.34em; margin-top: 0.02em; }

/* ---- the loupe: a round magnifier over the letter (from The Fifth Family) --- */
.mm-loupe { position: relative; cursor: zoom-in; }
.mm-lens {
  position: absolute;
  z-index: 6;
  width: 235px;
  height: 235px;
  border-radius: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: #efe4c6;
  border: 2px solid var(--amber-deep);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.25) inset,
    0 10px 30px rgba(0, 0, 0, 0.55),
    0 0 0 4px rgba(0, 0, 0, 0.25),
    0 0 18px rgba(255, 179, 71, 0.25);
}
.mm-lens img { display: block; max-width: none; width: auto; height: auto; margin: 0; filter: none; }
@media (hover: none) {
  .mm-lens { display: none; }
  .mm-loupe { cursor: default; }
}
.mm-doc.plate .mm-lens img { max-width: none; margin: 0; }

/* ---- document scans shown clean: no CRT filter, scanlines or vignette ------ */
.mm-doc img { filter: none; }
.mm-doc::after { display: none; }

/* ---- FIG starting position: donut ------------------------------------------- */
.mm-donut { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 28px; align-items: center; }
.mm-donut svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 14px rgba(255, 179, 71, 0.18)); }
.mm-donut svg text.n { font-family: var(--term); font-size: 40px; fill: var(--phosphor); }
.mm-donut svg text.l { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; fill: var(--phosphor-faint); }
.mm-donut-key { list-style: none; margin: 0; padding: 0; font-family: var(--mono); }
.mm-donut-key li { display: grid; grid-template-columns: 14px auto 1fr; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--wire); }
.mm-donut-key li:last-child { border-bottom: 0; }
.mm-donut-key i { width: 14px; height: 14px; display: inline-block; align-self: center; }
.mm-donut-key i.c { background: var(--cyan-glow); box-shadow: 0 0 10px rgba(79, 214, 214, 0.5); }
.mm-donut-key i.a { background: var(--amber); box-shadow: 0 0 10px rgba(255, 179, 71, 0.5); }
.mm-donut-key b { font-family: var(--term); font-size: 2rem; font-weight: 400; line-height: 1; color: var(--phosphor); }
.mm-donut-key span { font-size: 0.78rem; color: var(--phosphor-dim); }
@media (max-width: 560px) { .mm-donut { grid-template-columns: 1fr; } .mm-donut svg { max-width: 240px; margin: 0 auto; } }

/* ---- FIG the key: the full chart --------------------------------------------- */
.mm-khd { margin: 22px 0 10px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--phosphor-faint); }
.mm-khd:first-child { margin-top: 0; }
.mm-kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.mm-kgrid.w { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mm-kcell { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 8px 8px 8px 10px; border: 1px solid var(--wire-2); background: linear-gradient(180deg, rgba(16, 18, 22, 0.95), rgba(8, 9, 11, 0.85)); }
.mm-kcell.w { grid-template-columns: 62px 1fr; }
.mm-kcell.vi { border-color: rgba(154, 111, 208, 0.5); }
.mm-kl { font-family: var(--term); font-size: 1.7rem; line-height: 1; color: var(--amber); text-shadow: 0 0 10px rgba(255, 179, 71, 0.35); }
.mm-kcell.w .mm-kl { font-size: 1.2rem; letter-spacing: 0.04em; }
.mm-kcell.vi .mm-kl { color: var(--violet); text-shadow: 0 0 10px rgba(154, 111, 208, 0.4); }
.mm-kl small { display: block; margin-top: 4px; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--phosphor-faint); text-shadow: none; }
.mm-ks { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
.mm-ks .k { font-family: var(--mono); font-size: 0.68rem; line-height: 1.2; padding: 3px 6px; border: 1px solid rgba(255, 179, 71, 0.3); color: var(--phosphor); background: rgba(255, 179, 71, 0.05); white-space: nowrap; cursor: help; }
.mm-ks .k.t { border-color: var(--teal); color: var(--cyan-glow); background: rgba(79, 214, 214, 0.06); box-shadow: inset 2px 0 0 var(--cyan-glow); }
.mm-ks .k.none { border-style: dashed; color: var(--phosphor-faint); background: none; }
.mm-kcell.vi .k { border-color: rgba(154, 111, 208, 0.5); color: var(--violet); background: rgba(154, 111, 208, 0.06); }
.mm-ks .k { white-space: normal; }

/* ---- the answer key: a decoder table ----------------------------------------- */
.mm-keytbl table { font-size: 0.9rem; }
.mm-keytbl td.pl { font-family: var(--term); font-size: 1.7rem; line-height: 1; color: var(--amber); text-shadow: 0 0 10px rgba(255, 179, 71, 0.35); width: 110px; white-space: nowrap; vertical-align: top; padding-top: 10px; }
.mm-keytbl td.pl.w { font-size: 1.25rem; letter-spacing: 0.04em; }
.mm-keytbl td.pl small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--phosphor-faint); text-shadow: none; }
.mm-keytbl td.sg { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 14px; }
.mm-keytbl tr.grp td { padding: 14px 14px 6px; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--phosphor-faint); border-bottom: 1px solid var(--amber-deep); background: rgba(255, 179, 71, 0.03); }
.mm-keytbl .g { font-family: var(--term); font-size: 1.25rem; line-height: 1; padding: 5px 9px 4px; border: 1px solid rgba(255, 179, 71, 0.4); color: var(--phosphor); background: rgba(255, 179, 71, 0.05); cursor: help; }
.mm-keytbl .g.d { font-family: var(--mono); font-size: 0.7rem; line-height: 1.25; padding: 6px 8px; border-style: dashed; color: var(--phosphor-dim); }
.mm-keytbl .g.t { border-color: var(--cyan-glow); color: var(--cyan-glow); background: rgba(79, 214, 214, 0.07); }
.mm-keytbl .g.none { border-style: dotted; color: var(--phosphor-faint); background: none; font-family: var(--mono); font-size: 0.7rem; padding: 6px 8px; }
.mm-keytbl tr.vi td.pl { color: var(--violet); text-shadow: 0 0 10px rgba(154, 111, 208, 0.4); }
.mm-keytbl tr.vi .g { border-color: rgba(154, 111, 208, 0.6); color: var(--violet); background: rgba(154, 111, 208, 0.06); }
.mm-keytbl tbody tr:hover { background: none; }
.mm-keynote { margin: -1.2em 0 2em; font-family: var(--mono); font-size: 0.74rem; line-height: 1.7; color: var(--phosphor-faint); }
.mm-keynote .sw { display: inline-block; width: 22px; height: 12px; vertical-align: -1px; margin-right: 6px; border: 1px solid rgba(255, 179, 71, 0.6); background: rgba(255, 179, 71, 0.08); }
.mm-keynote .sw.t { border-color: var(--cyan-glow); background: rgba(79, 214, 214, 0.1); }
.mm-keynote .sw.d { border-style: dashed; background: none; }
@media (max-width: 560px) { .mm-keytbl td.pl { width: 70px; font-size: 1.4rem; } }

/* ---- the answer key: real glyphs ------------------------------------------- */
.mm-keytbl td.sg { gap: 6px 8px; align-items: flex-end; padding: 10px 14px; }
.mm-keytbl .gl { display: inline-flex; align-items: flex-end; justify-content: center; min-width: 34px; padding: 6px 7px 5px; border: 1px solid rgba(255, 179, 71, 0.35); background: rgba(255, 179, 71, 0.04); cursor: help; }
.mm-keytbl .gl img { display: block; width: auto; image-rendering: auto; filter: drop-shadow(0 0 5px rgba(255, 179, 71, 0.45)); }
.mm-keytbl .gl.t { border-color: var(--cyan-glow); background: rgba(79, 214, 214, 0.06); }
.mm-keytbl .gl.t img { filter: drop-shadow(0 0 5px rgba(79, 214, 214, 0.55)) hue-rotate(140deg) saturate(0.7); }
.mm-keytbl .gl.vi { border-color: rgba(154, 111, 208, 0.6); background: rgba(154, 111, 208, 0.06); }
.mm-keytbl .gl.vi img { filter: drop-shadow(0 0 5px rgba(154, 111, 208, 0.55)) hue-rotate(230deg) saturate(0.6); }
.mm-keytbl .gl.none { border-style: dotted; color: var(--phosphor-faint); background: none; font-family: var(--mono); font-size: 0.7rem; padding: 12px 8px; }
.mm-cell img.g { height: 42px; }

/* ---- the answer key: collapsible letter tiles ------------------------------- */
.mm-kctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; font-family: var(--mono); font-size: 0.72rem; color: var(--phosphor-faint); }
.mm-kctl span { margin-right: auto; }
.mm-kctl button { appearance: none; font: inherit; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--wire-2); background: rgba(5,5,6,.6); color: var(--phosphor-dim); cursor: pointer; }
.mm-kctl button:hover { color: var(--amber); border-color: var(--amber-deep); }
.mm-kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.mm-kgrid.w { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
details.mm-kd { border: 1px solid var(--wire-2); background: linear-gradient(180deg, rgba(16,18,22,.95), rgba(8,9,11,.85)); }
details.mm-kd summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 9px 10px 8px; transition: background 140ms ease; }
details.mm-kd summary::-webkit-details-marker { display: none; }
details.mm-kd summary:hover { background: rgba(255,179,71,.05); }
details.mm-kd summary b { font-family: var(--term); font-size: 1.6rem; font-weight: 400; line-height: 1; color: var(--amber); text-shadow: 0 0 10px rgba(255,179,71,.35); }
.mm-kgrid.w details.mm-kd summary b { font-size: 1.15rem; letter-spacing: .04em; }
details.mm-kd summary small { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--phosphor-faint); }
details.mm-kd summary i { margin-left: auto; font-family: var(--mono); font-style: normal; font-size: .68rem; color: var(--cyan-glow); }
details.mm-kd summary i::after { content: " ▸"; color: var(--phosphor-faint); }
details.mm-kd[open] { grid-column: 1 / -1; border-color: var(--amber-deep); }
details.mm-kd[open] summary i::after { content: " ▾"; color: var(--cyan-glow); }
details.mm-kd.empty summary { cursor: default; opacity: .55; }
details.mm-kd.vi summary b { color: var(--violet); text-shadow: 0 0 10px rgba(154,111,208,.4); }
.mm-kd-body { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: flex-end; padding: 8px 10px 12px; border-top: 1px solid var(--wire); }
.mm-kd-body .gl { display: inline-flex; align-items: flex-end; justify-content: center; min-width: 26px; padding: 5px 6px 4px; border: 1px solid rgba(255,179,71,.35); background: rgba(255,179,71,.04); cursor: help; }
.mm-kd-body .gl img { display: block; width: auto; filter: drop-shadow(0 0 4px rgba(255,179,71,.45)); }
.mm-kd-body .gl.t { border-color: var(--cyan-glow); background: rgba(79,214,214,.06); }
.mm-kd-body .gl.t img { filter: drop-shadow(0 0 4px rgba(79,214,214,.55)) hue-rotate(140deg) saturate(.7); }
.mm-kd-body .gl.vi { border-color: rgba(154,111,208,.6); }
.mm-kd-body .gl.vi img { filter: drop-shadow(0 0 4px rgba(154,111,208,.55)) hue-rotate(230deg) saturate(.6); }
.mm-kd-body .gl.none { border-style: dotted; font-family: var(--mono); font-size: .7rem; color: var(--phosphor-faint); background: none; padding: 8px; }
.sig-fig .mm-keynote { margin: 16px 0 0; }
.mm-cell img.g { height: 34px; }
.mm-keynote .sw.vi { border-color: rgba(154, 111, 208, 0.7); background: rgba(154, 111, 208, 0.12); }
details.mm-kd.vi { border-color: rgba(154, 111, 208, 0.45); }
details.mm-kd.vi summary small { color: rgba(154, 111, 208, 0.85); text-transform: none; letter-spacing: 0.04em; font-size: 0.68rem; }

/* ---- key: tile labels on one line; unresolved as compact cards ------------- */
.mm-kgrid.w { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
details.mm-kd summary { flex-wrap: nowrap; }
details.mm-kd summary small { white-space: nowrap; }
details.mm-kd summary i { flex: none; white-space: nowrap; }
.mm-kunres { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.mm-ku { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 1px solid rgba(154, 111, 208, 0.45); background: linear-gradient(180deg, rgba(16,18,22,.95), rgba(8,9,11,.85)); cursor: help; }
.mm-ku .gl { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 5px 6px; border: 1px solid rgba(154, 111, 208, 0.5); background: rgba(154, 111, 208, 0.06); }
.mm-ku .gl img { display: block; width: auto; filter: drop-shadow(0 0 4px rgba(154, 111, 208, 0.6)); }
.mm-ku b { display: block; font-family: var(--term); font-size: 1.25rem; font-weight: 400; line-height: 1; letter-spacing: .04em; color: var(--violet); text-shadow: 0 0 10px rgba(154,111,208,.4); }
.mm-ku small { display: block; margin-top: 4px; font-family: var(--mono); font-size: .66rem; color: var(--phosphor-faint); }
/* a bracketed reading at the start of a paragraph stays wholly violet */
.mm-letter-body p:has(> .mm-br:first-child)::first-letter { color: var(--violet); }

/* ---- the decrypt: english / french radial ---------------------------------- */
.mm-letter .sig-fig-pane { position: relative; padding-top: 52px; }
.mm-letter-lang { position: absolute; top: 12px; right: 14px; z-index: 3; }
.mm-letter-body.fr p { font-style: normal; }
@media (max-width: 560px) { .mm-letter-lang { position: static; margin: -18px 0 14px; } .mm-letter .sig-fig-pane { padding-top: 28px; } }

/* ---- page 358 english: the passage that matters, the rest folded ---------- */
.mm-page-key { margin: 14px 0; padding: 18px clamp(16px, 3vw, 26px) 16px; border: 1px solid var(--amber-deep); border-left-width: 3px; background: linear-gradient(90deg, rgba(255, 179, 71, 0.06), transparent 70%); }
.mm-page-lbl { margin-bottom: 10px; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--amber); }
.mm-page-key p { margin: 0; font-size: 1.06rem; line-height: 1.8; }
.mm-page-fold { margin: 0; border: 1px solid var(--wire-2); background: rgba(16, 18, 22, 0.6); }
.mm-page-fold + .mm-page-fold { border-top: 0; }
.mm-page-fold summary { list-style: none; cursor: pointer; padding: 10px 14px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--phosphor-faint); }
.mm-page-fold summary::-webkit-details-marker { display: none; }
.mm-page-fold summary::before { content: "▸ "; color: var(--phosphor-faint); }
.mm-page-fold[open] summary::before { content: "▾ "; color: var(--cyan-glow); }
.mm-page-fold summary:hover { color: var(--phosphor-dim); background: rgba(255, 179, 71, 0.04); }
.mm-page-fold p { margin: 0; padding: 4px 14px 14px; font-size: 0.92rem; line-height: 1.7; color: var(--phosphor-dim); }
.mm-page-fold .mm-page-sig { padding-top: 10px; }
.mm-page-lead { font-weight: 600; color: var(--amber); background: none; text-shadow: 0 0 10px rgba(255, 179, 71, 0.25); }
.mm-packnote { margin: -1.2em 0 2.2em; font-family: var(--mono); font-size: 0.78rem; line-height: 1.7; color: var(--phosphor-faint); }
.mm-packnote a { color: var(--cyan-glow); }