/* Layout: twelve desktop columns, four narrow columns, 8px spacing scale.
   Decoration follows the illustrated paper; only the chart retains time guides. */
@font-face { font-family:'Spumoni'; src:url('fonts/custom/Spumoni.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Handwriting'; src:url('fonts/custom/My handwriting.ttf') format('truetype'); font-display:swap; }
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
 --ink:#112414; --paper:#F7F4EA; --card:#FFFDF5; --navy:#132F3B;
 --coral:#DF6E74; --coral-deep:#B8555C; --pale-olive:#D2CF90;
 --yellow:#EBD97B; --olive:#8A9146; --green:#4F6B4A;
 --mint:#CCE1AF; --grey:#B3B7B4; --warm:#726F5C; --muted:#5F5C4C;
 --space:8px; --gap:24px; --small:.875rem; --body:1rem; --heading:2.25rem;
}
html { background:var(--paper); scrollbar-width:thin; scrollbar-color:var(--warm) transparent; }
body { max-width:1320px; margin:auto; padding:24px 24px 64px; background:var(--paper); color:var(--ink); font:var(--body)/1.55 'Space Grotesk',system-ui,sans-serif; }
main, header, section { min-width:0; }
a { color:var(--navy); text-underline-offset:4px; overflow-wrap:anywhere; }
a:hover { text-decoration-thickness:2px; }
button,[role="button"],.mm-hint,.mm-node,.mm-axis text {
 user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.mm-head { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:32px; align-items:center; margin-bottom:32px; }
.mm-title-frame { display:grid; position:relative; aspect-ratio:1.6; align-items:center; }
.mm-title-frame img { width:100%; height:auto; display:block; grid-area:1/1;  pointer-events:none; }
.mm-title { grid-area:1/1; position:relative; text-align:center; font:400 clamp(2rem,1rem + 3.6vw,4rem)/1.05 'Spumoni',Georgia,serif; padding:0 21%; color:var(--ink); }
.mm-head-copy { min-width:0; }
.mm-dek { max-width:62ch; font-size:1rem; line-height:1.6; }
.mm-meta { margin-top:16px; font-size:.875rem; color:var(--muted); }
.mm-controls { display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px 24px; padding:16px 0 24px; }
.mm-ctl-group { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.mm-ctl-label { font-size:var(--small); color:var(--muted); }
.mm-chips { display:flex; flex-wrap:wrap; gap:8px; }
.mm-chip,.mm-btn { border:0; border-radius:0; color:var(--ink); background:transparent; font:inherit; font-size:var(--small); padding:8px 12px; min-height:44px; cursor:pointer; }
.mm-chip:hover,.mm-btn:hover { background:#e8e7ce; }
.mm-chip.is-on { background:var(--ink); color:var(--card); border-radius:47% 4% 43% 5% / 5% 46% 7% 44%; }
.mm-btn { text-decoration:underline; text-underline-offset:5px; }
.mm-ctl-grow { flex:1 1 100%; }
/* The field is real text, so it keeps its selection while the chips beside it
   do not. Width is in ch so the placeholder never truncates. */
.mm-ctl-search { flex:0 1 auto; }
.mm-search { font:inherit; font-size:var(--small); min-height:44px; width:26ch; max-width:100%;
 padding:8px 12px; color:var(--ink); background:var(--card); border:0;
 border-bottom:2px solid var(--ink); border-radius:0; }
.mm-search::placeholder { color:var(--muted); }
.mm-search:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.mm-search-count { font-size:var(--small); color:var(--muted); min-width:9ch; }
.mm-controls > .mm-ctl-group:last-child { margin-left:auto; }
.mm-stage { display:flex; align-items:stretch; background:var(--card); overflow:hidden; }
.mm-gutter { flex:0 0 176px; position:relative; background:var(--paper); }
.mm-gutter-item { position:absolute; left:0; right:0; padding:8px 16px 8px 0; display:flex; flex-direction:column; justify-content:center; gap:8px; cursor:pointer; border:0; background:transparent; text-align:left; font:inherit; color:var(--ink); }
.mm-gutter-item:hover { background:#e8e7ce; }
.mm-gutter-item:focus-visible { outline-offset:-3px; }
.mm-gutter-row { display:flex; align-items:center; gap:8px; }
.mm-gutter-name { font:400 var(--body)/1.3 Georgia,serif; }
.mm-gutter-actor { font-size:.75rem; color:var(--muted); }
.mm-gutter-item.is-dim { opacity:.5; }
.mm-gutter-swatch { flex:0 0 auto; width:12px; height:12px; border:1px solid var(--ink); border-radius:50% 40% 45% 38%; }
.mm-canvas { position:relative; flex:1 1 auto; min-width:0; }
#mm-svg { display:block; width:100%; touch-action:pan-y; cursor:grab; }
#mm-svg.is-dragging { cursor:grabbing; }
.mm-hint { position:absolute; right:8px; bottom:8px; max-width:90%; font-size:.75rem; color:var(--ink); background:var(--card); padding:8px; pointer-events:none; }
.mm-axis text { fill:var(--muted); font-size:12px; }
.mm-axis line { stroke:#D8D3C0; stroke-dasharray:1 7; }
.mm-divider-label { fill:var(--muted); font-size:12px; }
.mm-link { stroke:none; }
.mm-specimen,.mm-ring { stroke-linejoin:round; stroke-linecap:round; }
.mm-node { cursor:pointer; }
.mm-node:focus { outline:none; }
.mm-node:focus-visible .mm-halo { stroke:var(--ink); stroke-width:2.5; opacity:1; }
.mm-node-label { font-size:12px; fill:var(--ink); }
.mm-node-date { font-size:12px; fill:var(--muted); }
.mm-label-plate { fill:var(--card); stroke:var(--ink); stroke-width:1; }
.mm-faded { opacity:.16; }
.mm-link-strong { opacity:.95 !important; }
.mm-legend { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:32px; margin-top:32px; }
.mm-legend-h { font:400 1.75rem/1.2 'Spumoni',Georgia,serif; margin-bottom:16px; }
.mm-legend-list { list-style:none; display:flex; flex-direction:column; gap:8px; }
.mm-legend-list li { display:flex; gap:8px; align-items:baseline; font-size:var(--small); }
.mm-legend-list svg { flex:0 0 auto; align-self:center; }
.mm-legend-note { color:var(--muted); }
.mm-dossier { position:fixed; top:0; right:0; bottom:0; width:min(440px,92vw); background:var(--card); padding:32px 24px 40px; overflow-y:auto; z-index:60; }
.mm-close { position:absolute; top:8px; right:8px; width:44px; height:44px; border:0; background:var(--paper); color:var(--ink); font-size:1rem; cursor:pointer; }
.mm-close:hover { background:var(--ink); color:var(--card); }
.mm-scrim { position:fixed; inset:0; background:rgba(17,36,20,.42); z-index:55; }
.mm-d-chain {
  font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.mm-d-chain::before {
  content: ''; flex: 0 0 auto;
  width: 12px; height: 12px;
  background: var(--swatch, var(--warm));
  border: 1.5px solid var(--ink);
}
.mm-d-title { font-family: 'Spumoni', Georgia, serif; font-size: 27px; line-height: 1.12; margin: 8px 0 4px; font-weight: 400; }
.mm-d-date { font-size: 13px; color: var(--muted); }
.mm-d-what { margin-top: 16px; }
.mm-d-rows { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.mm-d-row { display: grid; grid-template-columns: 92px 1fr; gap: 12px; font-size: 13px; }
.mm-d-key { color: var(--muted); }
.mm-d-h { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px; font-weight: 500; }
.mm-d-links { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.mm-d-rel { color: var(--muted); }
.mm-d-jump {
  border: 0; background: transparent; padding: 0;
  font: inherit; font-size: 13px; color: var(--navy);
  cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px;
}
.mm-d-sources { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.mm-d-mechs { margin-top: 4px; }
.mm-d-back { margin-top: 22px; }


.mm-d-title { font-size:var(--heading); }
.mm-d-h { text-transform:none; letter-spacing:0; font-size:var(--body); }
.mm-d-chain { text-transform:none; letter-spacing:0; }
.mm-d-sources,.mm-d-links,.mm-d-date,.mm-d-jump,.mm-d-row { font-size:var(--small); }
.mm-d-jump { min-height:24px; }
.mm-d-row { grid-template-columns:88px minmax(0,1fr); }
.mm-inbox { margin-top:48px; }
.mm-inbox-h,.mm-foot-h { font:400 var(--heading)/1.2 'Spumoni',Georgia,serif; }
.mm-inbox-note { margin-top:16px; color:var(--muted); font-size:var(--small); max-width:65ch; }
.mm-taxonomy { margin-top:24px; max-width:75ch; font-size:var(--small); }
.mm-taxonomy-credit { margin-top:8px; color:var(--muted); }
.mm-inbox-list { margin-top:24px; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:24px; }
.mm-inbox-item { padding:16px 0; }

.mm-inbox-src { font-size:.75rem; color:var(--muted); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
.mm-inbox-title { margin-top:8px; font:1.125rem/1.4 Georgia,serif; }
.mm-inbox-risk,.mm-inbox-sum { margin-top:8px; font-size:var(--small); color:var(--muted); }
/* The footer runs the width of the page, so the copy is set in columns: one
   1270px line of 14px text is about 135 characters and nobody reads it twice.
   The width is the cap, not the count, so the browser drops to a single column
   on its own once there is no room for two. The heading and the register list
   span every column — a definition list chopped down the middle is unreadable. */
.mm-foot { margin-top:48px; font-size:var(--small); columns:34em; column-gap:48px; }
.mm-foot-h { margin-bottom:16px; column-span:all; }
.mm-foot p { color:var(--muted); margin-bottom:16px; }
.mm-trackers,.mm-tracker-list { margin-top:16px; }
.mm-trackers { margin-bottom:16px; }
/* Block, not flex: a flex container fragments unpredictably across a column
   break, and each register has to survive one whole or not at all. */
.mm-tracker-list > div { break-inside:avoid; }
.mm-tracker-list > div + div { margin-top:16px; }
.mm-tracker-list dd { margin-top:8px; color:var(--muted); }
@media (min-width:721px) { body.mm-has-panel { padding-right:464px; } .mm-has-panel .mm-head { grid-template-columns:1fr; } }
@media (max-width:900px) {
 .mm-foot { columns:auto; max-width:75ch; }
 .mm-head { grid-template-columns:1fr; gap:24px; }
 .mm-title-frame { max-width:680px; width:100%; }
 .mm-head-copy { max-width:68ch; }
}
@media (max-width:720px) {
 body { padding:16px 16px 48px; }
 .mm-head { gap:16px; margin-bottom:24px; }
 .mm-title { font-size:clamp(2rem,1rem + 4.8vw,3rem); }
 .mm-gutter { flex-basis:112px; }
 .mm-gutter-item { padding-right:8px; }
 .mm-gutter-name { font-size:var(--small); }
 .mm-hint { display:none; }
 .mm-dossier { top:auto; width:100%; max-height:82vh; }
 .mm-controls > .mm-ctl-group:last-child { margin-left:0; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }

.mm-mobile-clusters { display:none; }
@media (max-width:720px) and (hover:none) and (pointer:coarse) {
 .mm-stage,.mm-legend,#mm-fit { display:none; }
 .mm-mobile-clusters { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
 .mm-cluster { min-width:0; border:2px solid var(--ink); border-radius:11px 17px 12px 19px / 17px 10px 20px 12px; padding:16px; }
 .mm-cluster:nth-child(even) { border-radius:18px 10px 19px 12px / 11px 19px 12px 17px; }
 .mm-cluster summary { cursor:pointer; min-height:44px; display:flex; align-items:center; gap:12px; list-style:none; }
 .mm-cluster summary::-webkit-details-marker { display:none; }
 .mm-cluster summary::before { content:''; width:12px; height:12px; flex:0 0 12px; border:1px solid var(--ink); border-radius:42% 54% 45% 51%; background:var(--cluster-color); }
 .mm-cluster summary::after { content:'+'; font-size:1.5rem; margin-left:auto; }
 .mm-cluster[open] summary::after { content:'−'; }
 .mm-cluster summary:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
 .mm-cluster h2 { font:400 1.5rem/1.2 'Spumoni',Georgia,serif; overflow-wrap:anywhere; }
 .mm-cluster-count { color:var(--muted); font-size:.875rem; }
 .mm-cluster-events { list-style:none; display:grid; gap:16px; margin-top:24px; }
 .mm-event-card { min-width:0; background:var(--card); border:1px solid var(--ink); border-radius:8px 12px 9px 14px / 12px 8px 13px 9px; padding:16px; }
 .mm-event-open { display:block; width:100%; text-align:left; font:inherit; color:var(--ink); border:0; background:none; cursor:pointer; min-height:44px; }
 .mm-event-date { display:block; color:var(--muted); font-size:.75rem; margin-bottom:8px; }
 .mm-event-title { display:block; font:1.125rem/1.4 Georgia,serif; overflow-wrap:anywhere; }
 .mm-card-connections { list-style:none; display:grid; gap:12px; margin-top:16px; }
 .mm-card-connections li { min-width:0; padding-left:12px; border-left:2px solid var(--cluster-color); border-radius:12% 0 0 5%; }
 .mm-card-relation { display:block; color:var(--muted); font-size:.75rem; }
 .mm-card-jump { display:block; min-height:44px; width:100%; padding:4px 0; text-align:left; border:0; background:none; color:var(--navy); font:inherit; font-size:.875rem; line-height:1.45; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; cursor:pointer; }
}

@media (max-width:720px) {
 .mm-event-card { background:var(--cluster-color); color:var(--card-ink); }
 .mm-event-open,.mm-event-date,.mm-card-relation,.mm-card-jump { color:var(--card-ink); }
 .mm-card-connections li { border-left-color:var(--card-ink); }
 .mm-event-card button:focus-visible { outline-color:var(--card-ink); }
}

/* The botanical collage stays on the rail; only the plain pale thumb moves. */
.mm-time-scroll { position:sticky; top:0; z-index:25; display:grid; grid-template-columns:80px minmax(0,1fr) 80px; align-items:center; gap:16px; padding:16px 8px; background:var(--paper); }
.mm-time-scroll > span { font:italic .875rem/1.3 Georgia,serif; color:var(--ink); }
.mm-time-scroll > span:last-child { text-align:right; }
#mm-time-range { --thumb-width:clamp(48px,14vw,160px); appearance:none; -webkit-appearance:none; width:100%; min-width:0; height:44px; background:transparent; cursor:ew-resize; }
#mm-time-range::-webkit-slider-runnable-track { height:28px; border:0; border-radius:999px; background:var(--ink) url('assets/timeline-ivy.png') center / 300px 100px repeat-x; }
#mm-time-range::-moz-range-track { height:28px; border:0; border-radius:999px; background:var(--ink) url('assets/timeline-ivy.png') center / 300px 100px repeat-x; }
#mm-time-range::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:var(--thumb-width); box-sizing:border-box; height:28px; margin-top:0; border:5px solid var(--ink); border-radius:999px; background:var(--mint); background-clip:padding-box; box-shadow:none; }
#mm-time-range::-moz-range-thumb { width:var(--thumb-width); box-sizing:border-box; height:28px; border:5px solid var(--ink); border-radius:999px; background:var(--mint); background-clip:padding-box; box-shadow:none; }
#mm-time-range:focus-visible { outline:2px solid var(--green); outline-offset:2px; border-radius:999px; }
#mm-time-range:disabled { opacity:.5; cursor:default; }
@media (max-width:720px) and (hover:none) and (pointer:coarse) { .mm-time-scroll { display:none; } }


.mm-controls .mm-chip,.mm-controls .mm-btn { display:inline-flex; align-items:center; gap:8px; text-align:left; }
.mm-menu-icon { display:inline-block; width:32px; height:32px; flex:0 0 32px; background:currentColor; -webkit-mask:var(--menu-icon) center / contain no-repeat; mask:var(--menu-icon) center / contain no-repeat; pointer-events:none; }

.mm-search-row { flex:1 0 100%; min-width:0; }
.mm-search-bar { position:relative; isolation:isolate; width:100%; display:flex; align-items:center; gap:8px; min-height:64px; padding:8px 24px; color:var(--paper); }
.mm-search-bar::before { content:''; position:absolute; inset:0; z-index:-1; background:#6F6D47; clip-path:polygon(.35% 3%,18% 1.4%,43% 0,69% 1.8%,99.7% 3.2%,100% 45%,99.65% 96.5%,76% 98%,49% 100%,23% 98.5%,0 96%,.2% 49%); pointer-events:none; }
.mm-search-bar label { flex:none; color:var(--paper); font:italic 1.125rem/1.3 Georgia,serif; cursor:text; white-space:nowrap; }
#mm-search { text-overflow:ellipsis; min-width:0; flex:1; width:100%; border:0; border-radius:0; outline:0; background:transparent; color:var(--paper); font:italic 1.125rem/1.5 Georgia,serif; min-height:44px; padding:0; }
#mm-search::placeholder { color:var(--paper); opacity:1; }
.mm-search-bar:focus-within { outline:2px solid var(--ink); outline-offset:3px; }
@media (max-width:720px) {
 .mm-search-bar { padding:8px 16px; }
 .mm-search-bar label,#mm-search { font-size:1rem; }
}

@media (max-width:720px) and (pointer:fine) { .mm-time-scroll { grid-template-columns:60px minmax(0,1fr) 60px; gap:8px; } }