/* ── The map (/map/). Uses the site tokens from /styles.css.
   Layout: a dial of topics (ring, six domains) beside a reading panel,
   then the record (timeline) and the index. No red here: the rail is
   the one red line on the page. ── */

.page-head.map-head{padding-block:clamp(28px, 4vw, 56px) 0; display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:12px clamp(24px, 5vw, 72px); align-items:end}
.map-head > .label{grid-column:1 / -1}
.page-head.map-head h1.display{font-size:clamp(36px, 4.4vw, 64px); line-height:.98; margin-top:6px; max-width:16ch}
.map-head .pull{font-size:clamp(22px, 2.2vw, 30px); margin-top:14px}
.map-head .body{color:var(--smoke); max-width:58ch}
.map-stats{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:18px; padding-top:14px; border-top:1px solid var(--iron)}
@media (max-width:860px){ .page-head.map-head{grid-template-columns:1fr} }
.map-stats b{font:500 12px/1.4 var(--mono); letter-spacing:var(--track); text-transform:uppercase; color:var(--bone); font-variant-numeric:tabular-nums}
.map-stats span{font:500 12px/1.4 var(--mono); letter-spacing:var(--track); text-transform:uppercase; color:var(--smoke)}

.map-sec{padding-block:clamp(28px, 4vw, 44px) 0; scroll-margin-top:calc(var(--header-h) + 8px)}

/* Controls */
.map-bar{display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px 32px; padding-bottom:16px; border-bottom:1px solid var(--iron)}
.map-ctl{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.map-ctl > .label{margin-right:6px}
.mchip{display:inline-flex; align-items:center; gap:9px; font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--smoke); background:transparent; border:1px solid var(--iron); padding:9px 11px; cursor:pointer; transition:color .2s, border-color .2s, background .2s}
.mchip:hover{color:var(--bone); border-color:var(--smoke)}
.mchip[aria-pressed="true"]{color:var(--bone); border-color:var(--bone)}
.mchip--thread[aria-pressed="true"]{background:var(--bone); color:var(--ash)}
.mchip[aria-pressed="false"] svg{opacity:.45}
.mchip svg{width:14px; height:14px; flex:none; overflow:visible}

/* Glyphs: on air = filled, in print = ring, ahead = dashed ring */
.g-air{fill:var(--bone)}
.g-print{fill:none; stroke:var(--bone); stroke-width:1.5}
.g-ahead{fill:none; stroke:var(--smoke); stroke-width:1.2; stroke-dasharray:2.2 2.2}
.g-line{stroke:var(--smoke); stroke-width:1.4; fill:none}

.map-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(300px, 380px); gap:clamp(24px, 4vw, 56px); margin-top:clamp(20px, 3vw, 32px); align-items:start}
.map-fig{margin:0; min-width:0}
.map-ring{display:block; width:100%; height:auto; max-width:100%; overflow:visible; touch-action:manipulation}
.map-caption{min-height:3.4em; margin-top:6px; font:400 13px/1.6 var(--mono); color:var(--smoke); max-width:none}
.map-caption b{font-weight:500; color:var(--bone)}
.map-keys{display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:10px}
.map-keys span{display:inline-flex; align-items:center; gap:8px; font:500 11px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--smoke)}
.map-keys svg{width:28px; height:8px}

/* Ring drawing */
.r-orbit{fill:none; stroke:var(--iron); stroke-width:1}
.r-arc{fill:none; stroke:var(--iron); stroke-width:1}
.r-dom{font:500 14px var(--mono); letter-spacing:.3em; text-transform:uppercase; fill:var(--smoke)}
.r-chord{fill:none; stroke:var(--iron); stroke-width:1.1; transition:stroke .25s, stroke-width .25s, opacity .25s}
.r-chord.tension{stroke-dasharray:5 5}
.r-chord.lineage{stroke-dasharray:.5 4.5; stroke-linecap:round; stroke-width:1.7}
.r-hit{fill:none; stroke:transparent; stroke-width:12; cursor:help}
.r-chord.on{stroke:var(--bone); stroke-width:1.4; opacity:.95}
.r-chord.lineage.on{stroke-width:2.2}
.r-chord.path{stroke:var(--bone); stroke-width:2; opacity:1; stroke-dasharray:none}
.r-chord.hot{stroke:var(--bone); stroke-width:2; opacity:1}
.has-focus .r-chord:not(.on):not(.path):not(.hot){opacity:.12}

.r-node{cursor:pointer; outline:none}
.r-node .hit{fill:transparent}
.r-node .dot{transition:r .25s}
.r-node .lab{font:500 16px var(--mono); letter-spacing:.08em; text-transform:uppercase; fill:var(--smoke); transition:fill .2s, opacity .25s}
.r-node:hover .lab, .r-node:focus-visible .lab{fill:var(--bone)}
.r-node:focus-visible .ring-focus{stroke:var(--bone)}
.ring-focus{fill:none; stroke:transparent; stroke-width:1}
.r-node.is-sel .lab{fill:var(--bone); font-weight:600}
.r-node.is-sel .sel{opacity:1}
.sel{opacity:0; fill:none; stroke:var(--bone); stroke-width:1; transition:opacity .25s}
.r-node.is-near .lab{fill:var(--bone)}
.has-focus .r-node:not(.is-sel):not(.is-near):not(.is-step) .lab{opacity:.62}
.r-node.is-dim{opacity:.18}
.r-node.is-dim .lab{opacity:1 !important}
.r-step{font:500 11px var(--mono); fill:var(--ash); text-anchor:middle; dominant-baseline:central; pointer-events:none}
.r-stepdot{fill:var(--bone)}

.r-q-label{font:500 12px var(--mono); letter-spacing:.32em; text-transform:uppercase; fill:var(--smoke); text-anchor:middle}
.r-q{font:italic 400 40px var(--display); fill:var(--bone); text-anchor:middle}
.r-q-label, .r-q{paint-order:stroke; stroke:var(--ash); stroke-width:10px; stroke-linejoin:round}

@media (prefers-reduced-motion:no-preference){
  .r-node{animation:dial-in .5s cubic-bezier(.2,.8,.25,1) both; animation-delay:calc(var(--i) * 18ms)}
  .r-chords{animation:fade-in 1s ease .7s both}
}
@keyframes dial-in{from{opacity:0; transform:translate(var(--dx), var(--dy))}}
@keyframes fade-in{from{opacity:0}}

/* Panel */
.map-panel{position:sticky; top:calc(var(--header-h) + 24px); min-width:0; border:1px solid var(--iron); background:var(--char); padding:clamp(20px, 2.4vw, 30px); max-height:calc(100vh - var(--header-h) - 48px); overflow:auto}
.map-panel > * + *{margin-top:18px}
.p-meta{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center}
.p-meta .on{color:var(--bone)}
.p-title{font:700 clamp(28px, 2.6vw, 38px)/1.02 var(--display); text-wrap:balance; margin:0}
.p-desc{font:400 14px/1.7 var(--mono); color:var(--bone)}
.p-quote{margin:0; padding:18px 0 0; border-top:1px solid var(--iron)}
.p-quote p{font:italic 400 clamp(20px, 1.7vw, 24px)/1.3 var(--display); text-wrap:pretty}
.p-quote figcaption{margin-top:12px; font:400 11px/1.6 var(--mono); letter-spacing:var(--track); text-transform:uppercase; color:var(--smoke)}
.p-quote a, .p-src a{text-decoration:none; border-bottom:1px solid var(--iron)}
.p-quote a:hover, .p-src a:hover{color:var(--bone); border-color:var(--bone)}
.p-ahead{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px dashed var(--smoke); font:400 12.5px/1.6 var(--mono); color:var(--bone)}
.p-ahead svg{width:14px; height:14px; flex:none; margin-top:4px; overflow:visible}
.p-h{padding-top:16px; border-top:1px solid var(--iron)}
.p-links{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:2px}
.p-links button{display:grid; grid-template-columns:22px 1fr; gap:4px 10px; width:100%; text-align:left; background:none; border:0; color:inherit; padding:9px 0; cursor:pointer; border-bottom:1px solid rgba(58,54,49,.6)}
.p-links li:last-child button{border-bottom:0}
.p-links svg{width:22px; height:8px; margin-top:7px}
.p-links .t{font:500 12px/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--bone)}
.p-links .b{grid-column:2; font:400 13px/1.55 var(--mono); color:var(--smoke)}
.p-links .k{font:400 10px/1 var(--mono); letter-spacing:.16em; color:var(--smoke); margin-left:8px}
.p-links button:hover .t{text-decoration:underline; text-underline-offset:4px}
.p-src{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:9px}
.p-src li{display:grid; grid-template-columns:14px 1fr; gap:10px; font:400 12.5px/1.5 var(--mono); color:var(--bone)}
.p-src li svg{width:12px; height:12px; margin-top:4px; overflow:visible}
.p-src small{display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--smoke)}

/* Thread stepper */
.p-thread{padding-bottom:18px; border-bottom:1px solid var(--iron)}
.p-thread .row{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.p-thread .nar{margin-top:12px; font:italic 400 clamp(21px, 1.9vw, 26px)/1.25 var(--display); color:var(--bone); text-wrap:balance}
.p-steps{display:flex; gap:4px; margin-top:14px}
.p-steps i{flex:1; height:2px; background:var(--iron)}
.p-steps i.done{background:var(--bone)}
.p-nav{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap}
.p-nav .btn{padding:10px 14px; font-size:11px}
.p-nav .btn[disabled]{opacity:.35; pointer-events:none}

/* The record (timeline) */
.tl-scroll{overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:4px}
.tl{display:block; width:100%; min-width:760px; height:auto}
.tl-axis{stroke:var(--iron); stroke-width:1}
.tl-year{font:500 12px var(--mono); letter-spacing:.14em; fill:var(--smoke); text-anchor:middle}
.tl-band{font:500 11px var(--mono); letter-spacing:.24em; text-transform:uppercase; fill:var(--smoke)}
.tl-now{stroke:var(--bone); stroke-width:1; stroke-dasharray:3 3}
.tl-nowl{font:500 11px var(--mono); letter-spacing:.24em; fill:var(--bone); text-anchor:middle}
.tl-ahead{fill:url(#tl-hatch)}
.tl-hatch-line{stroke:var(--iron); stroke-width:1}
.tl-item{cursor:pointer; outline:none}
.tl-item .hit{fill:transparent}
.tl-item:hover .mk, .tl-item:focus-visible .mk, .tl-item.is-sel .mk{stroke:var(--bone); stroke-width:2.5}
.tl-item.is-sel .mk{r:8}
.tl-stem{stroke:var(--iron); stroke-width:1}
.tl-cap{min-height:1.7em; margin-top:10px; font:400 13px/1.6 var(--mono); color:var(--smoke); max-width:none}
.tl-cap b{font-weight:500; color:var(--bone)}

/* The index */
.idx{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px)}
.idx-col h3{margin:0; font:700 28px/1 var(--display)}
.idx-col .pull{margin-top:6px; font-size:17px; color:var(--smoke)}
.idx-col ul{list-style:none; margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--iron); display:grid; gap:2px}
.idx-col button{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:0; padding:7px 0; color:var(--bone); cursor:pointer;
  font:400 13.5px/1.4 var(--mono)}
.idx-col button:hover, .idx-col button[aria-current="true"]{text-decoration:underline; text-underline-offset:5px}
.idx-col button svg{width:14px; height:14px; flex:none; overflow:visible}
.map-note{margin-top:clamp(40px, 6vw, 64px); padding-top:18px; border-top:1px solid var(--iron); font:400 12px/1.7 var(--mono); color:var(--smoke); max-width:80ch}

@media (max-width:1020px){
  .map-grid{grid-template-columns:1fr}
  .map-panel{position:static; max-height:none}
  .map-fig{max-width:760px; margin-inline:auto; width:100%}
  .idx{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:640px){
  .r-node .lab{display:none}
  .r-node .dots{transform:scale(1.35)}
  .r-node .hit{r:28}
  .sel{r:26}
  .r-node.is-sel .lab{display:none}
  .r-dom{font-size:22px; letter-spacing:.2em}
  .r-q{font-size:52px}
  .r-q-label{font-size:18px}
  .idx{grid-template-columns:1fr}
  .map-bar{gap:14px}
}