/* Why local (#local): three beats in normal flow on the dark stage, colour warming from teal and indigo at the top to
   magenta and orange at the bottom. --R is the loop's radius as a share of its box (30%, or 21% in a narrow box), set on
   the field's children so local.mjs can read it and place the grains on the same ring. */
.local{position:relative;isolation:isolate;box-sizing:border-box;padding-block:var(--mish-section);padding-inline:max(var(--mish-gutter),calc((100% - var(--mish-max))/2));
 background:linear-gradient(180deg,rgba(102,204,194,.07),rgba(128,161,218,.05) 30%,rgba(161,84,238,.05) 55%,rgba(255,63,134,.06) 78%,rgba(255,127,58,.09)),var(--mish-surface)}
.local-intro{display:grid;gap:var(--mish-space-4);max-width:46rem}
.local-beat{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--mish-space-6);align-items:center;margin-top:var(--mish-space-8);padding-top:var(--mish-space-6)}
.local-beat::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(102,204,194,.5),rgba(161,84,238,.4) 55%,rgba(255,127,58,.45))}
.local-copy{display:grid;gap:var(--mish-space-4);align-content:start;max-width:34rem}
.local-figure{position:relative;justify-self:center;width:100%;max-width:680px;margin:0}
.local-figure>figcaption{margin-top:var(--mish-space-3);text-align:center;font:var(--mish-weight-regular) var(--mish-step-small)/1.4 var(--mish-font-body);color:var(--mish-text-dim)}

/* Beat A: the loop. The box is square and is the container, so narrow boxes get their own radius. */
.local-box{position:relative;width:100%;aspect-ratio:1;container-type:inline-size}
.local-field{position:absolute;inset:0;overflow:hidden}
.local-field>*{--R:30%;position:absolute}
.local-ring{left:50%;top:50%;width:calc(var(--R) * 2);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid rgba(193,180,208,.22);border-radius:50%}
.local-arrow{inset:0;transform:rotate(var(--a))}
.local-arrow::before{content:'';position:absolute;left:50%;top:calc(50% - var(--R));width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-top:2px solid rgba(222,215,234,.8);border-right:2px solid rgba(222,215,234,.8);transform:rotate(45deg)}
.local-grains{inset:0;width:100%;height:100%;pointer-events:none}
.local-station{width:0;height:0;left:calc(50% + var(--R) * var(--sx));top:calc(50% + var(--R) * var(--sy))}
.local-station[data-i="0"]{--sx:0;--sy:-1;--c:#66CCC2}
.local-station[data-i="1"]{--sx:.866;--sy:-.5;--c:#80A1DA}
.local-station[data-i="2"]{--sx:.866;--sy:.5;--c:#a154ee}
.local-station[data-i="3"]{--sx:0;--sy:1;--c:#ff3f86}
.local-station[data-i="4"]{--sx:-.866;--sy:.5;--c:#ff7f3a}
.local-station[data-i="5"]{--sx:-.866;--sy:-.5;--c:#ff5f9e}
.local-node{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--c);transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(5,6,7,.85);opacity:.35;transition:opacity var(--mish-dur-3) var(--mish-ease),box-shadow var(--mish-dur-3) var(--mish-ease)}
.local-station.is-past .local-node{opacity:.9}
.local-station.is-on .local-node{opacity:1;box-shadow:0 0 0 4px rgba(5,6,7,.85),0 0 18px 4px var(--c)}
/* Upcoming labels stay at .6 of --mish-light (6.8:1 on the brightest tint, 7:1 on the stage); grains passing under a label get a dark halo. */
.local-label{position:absolute;width:max-content;font:600 var(--mish-step-small)/1.25 var(--mish-font-body);color:var(--mish-text);opacity:.6;text-wrap:balance;text-shadow:0 0 6px rgba(5,6,7,.9);transition:opacity var(--mish-dur-3) var(--mish-ease)}
.local-station:is([data-i="1"],[data-i="2"],[data-i="4"],[data-i="5"]) .local-label{max-width:calc(24cqi - 20px)}
.local-label small{display:block;margin-top:2px;font-weight:400;font-size:.86em;color:var(--mish-text-dim)}
.local-station.is-past .local-label{opacity:.85}
.local-station.is-on .local-label{opacity:1}
.local-station[data-i="0"] .local-label,.local-station[data-i="3"] .local-label{left:50%;transform:translateX(-50%);text-align:center}
.local-station[data-i="0"] .local-label{bottom:18px}
.local-station[data-i="0"] .local-label,.local-station[data-i="3"] .local-label{max-width:16em}
.local-station[data-i="3"] .local-label{top:18px}
.local-station[data-i="1"] .local-label,.local-station[data-i="2"] .local-label{left:18px;top:50%;transform:translateY(-50%)}
.local-station[data-i="4"] .local-label,.local-station[data-i="5"] .local-label{right:18px;top:50%;transform:translateY(-50%);text-align:right}
.local-brain{left:50%;top:50%;width:26%;aspect-ratio:4/3;transform:translate(-50%,-50%);overflow:visible}
.local-brain-line{fill:rgba(128,161,218,.07);stroke:url(#local-mn-fill);stroke-width:2.4;stroke-linejoin:round}
.local-brain-fissure{fill:none;stroke:rgba(222,215,234,.4);stroke-width:1.6;stroke-linecap:round}
/* The logo letters; styles.css sets every svg path to a thin currentColor stroke, so these restate the mark. */
.local-brain :is(.local-mn-m,.local-mn-n){fill:none;stroke-width:22;stroke-linecap:round;stroke-linejoin:round}
.local-brain .local-mn-m{stroke:#fbe9f2}
.local-brain .local-mn-n{stroke:url(#local-mn-n)}
.local-core{position:absolute;left:50%;top:calc(50% + 12.25%);transform:translateX(-50%);margin:0;max-width:none;font:600 var(--mish-step-small)/1.2 var(--mish-font-body);color:var(--mish-text);white-space:nowrap}

/* Beat B: the climbing coil. local.mjs keeps it whirling on its own. */
.local-curve{display:block;width:100%;height:auto;aspect-ratio:3/2}

/* Beat C: the frontier statement, a quiet closing note. */
.local-frontier{position:relative;margin:var(--mish-space-9) 0 0;padding-top:var(--mish-space-5);max-width:58ch;font:var(--mish-weight-regular) var(--mish-step-small)/1.7 var(--mish-font-body);color:var(--mish-text-muted)}
.local-frontier::before{content:'';position:absolute;top:0;left:0;width:56px;height:2px;background:linear-gradient(90deg,#ff3f86,#ff7f3a)}

@container (max-width:460px){
 .local-field>*{--R:21%}
 .local-brain{width:22%}
 .local-core{top:calc(50% + 10%)}
 .local-station:is([data-i="1"],[data-i="2"],[data-i="4"],[data-i="5"]) .local-label{max-width:calc(31.8cqi - 20px)}
}
@media (min-width:68.75em){
 .local-beat{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--mish-space-8);margin-top:var(--mish-space-9)}
 .local-beat--curve{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
 .local-beat--curve .local-copy{order:2}
}