/* VARÐA: the hub and the rooms. The eva house grammar (heavy mincho titles, all-caps condensed grotesque for the
   instruments, orange and red line work on black), from eva-coast's world, alert, enter and cards vignettes. */

* { box-sizing: border-box; }
html { background: var(--k); color: var(--w); scrollbar-color: var(--o-line) var(--k); }
body { margin: 0; font: 15px/1.5 var(--sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
::selection { background: var(--o); color: var(--k); }
:focus-visible { outline: 2px solid var(--o); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
button { font: inherit; color: inherit; }
kbd { font: 700 10px/1 var(--cn); letter-spacing: .04em; padding: 2px 4px; border: 1px solid currentColor; opacity: .75; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; font-weight: 400; } /* no bold face fetched for unseen text */
.cn { font-family: var(--cn); text-transform: uppercase; letter-spacing: .05em; }
.panel { background: #000; border: 1px solid var(--o-line); }
.tab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 10px 4px; background: var(--o); color: var(--k); font: 700 12px/1.1 var(--cn); text-transform: uppercase; letter-spacing: .05em; }
.tab h2 { font: inherit; }
.tab span:last-child { font-weight: 400; }
.tab.red { background: var(--r); }
.ico { width: .8em; height: .8em; vertical-align: -.02em; }
.anchor { width: 10px; height: 12px; flex: none; vertical-align: -1px; color: currentColor; }
/* the fiction, riding along after the plain word (Projects · stations; This week's planet · Angel 81): the same
   colour, a size and a weight down */
.tag { margin-left: .6em; font-size: .8em; font-weight: 400; letter-spacing: .1em; white-space: nowrap; }
.tag:empty { display: none; }

/* live text */
.typed { position: relative; }
.typed[data-ghost]::before { content: attr(data-ghost); position: absolute; inset: 0; color: inherit; opacity: 0; pointer-events: none; animation: ghost .42s ease-out; }
@keyframes ghost { from { opacity: .45; filter: blur(.4px); } to { opacity: 0; filter: blur(1.5px); } }
.tail { white-space: nowrap; }
.cursor { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -.16em; background: var(--o); animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* the alert grammar: a strip of honeycomb cells */
.hexes { display: block; flex: none; }
.hexes polygon { fill: none; stroke: var(--r); stroke-width: 1.6; }
.hexes text { fill: var(--r); font: 700 9.5px var(--cn); letter-spacing: .04em; }
.hexes.orange polygon { stroke: var(--o); }
.hexes.orange text { fill: var(--o); }

/* ------------------------------------------------------------------ the display */
.display { position: relative; height: 100vh; min-height: 720px; overflow: hidden; background: #000; --halo: 0 0 2px #000, 0 0 3px #000, 0 0 6px rgba(0, 0, 0, .85); }
.stage { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease-out; }
.stage.on { opacity: 1; } /* the map fades in once it can draw (hub.js) */
.stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#fx { pointer-events: none; }
.stage.over-angel { cursor: pointer; }
.overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.overlay .hidden { display: none; }
.labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.gl-note { display: none; }
.no-gl .gl-note { display: block; position: absolute; top: 44%; left: calc(var(--edge) + 380px); right: calc(var(--edge) + 520px); font: 700 13px/1.4 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: var(--o-text); text-align: center; }
.no-gl .feed.live .scr::before { content: attr(data-off); position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px/1 var(--cn); text-transform: uppercase; letter-spacing: .2em; color: var(--o-dim); }
.no-gl .scopes, .no-gl .scale { display: none; }

/* the bar */
.bar { position: absolute; z-index: 8; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 20px; padding: 16px var(--edge) 0; pointer-events: none; }
.bar a, .bar button { pointer-events: auto; }
.ident { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mark { width: 30px; height: 30px; color: var(--o); flex: none; display: block; }
.org { font: 700 15px/1 var(--cn); letter-spacing: .26em; color: var(--o); padding-right: 12px; border-right: 1px solid var(--o-line); }
.who { font: 900 27px/1 var(--mincho); text-transform: uppercase; color: #fff; display: inline-block; transform: scaleX(.78); transform-origin: 0 60%; margin-right: -2.6em; white-space: nowrap; }
.sector { flex: 1; font: 400 12px/1.2 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: var(--o-text); text-align: center; white-space: nowrap; text-shadow: var(--halo); }
.sector .tag { color: var(--o-dim); }
.cond { margin-left: auto; display: flex; align-items: baseline; gap: 9px; font: 400 11px/1 var(--cn); text-transform: uppercase; letter-spacing: .08em; color: var(--o-dim); white-space: nowrap; text-shadow: var(--halo); }
.cond b { padding: 6px 10px 5px; border: 1px solid var(--o); background: var(--o); font: 700 13px/1 var(--cn); letter-spacing: .12em; color: var(--k); text-shadow: none; } /* steady holds still */
.cond .tag { margin-left: -2px; font-size: 11px; color: var(--o-text); }
body[data-cond="alert"] .cond b { animation: lamp .5s steps(1) infinite; }
@keyframes lamp { 50% { background: #000; color: var(--o); } }
body[data-cond="emergency"] .cond b { background: var(--r); border-color: var(--r); animation: lamp-r .5s steps(1) infinite; } /* red: the week's Angel, racing */
@keyframes lamp-r { 50% { background: #000; color: var(--r); } }
.radio, .resume, .help { padding: 6px 10px 5px; border: 1px solid var(--o-line); background: #000; color: var(--o-text); font: 700 11.5px/1 var(--cn); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; text-decoration: none; white-space: nowrap; }
.radio b { color: var(--o-dim); margin-left: 4px; }
.radio[aria-pressed="true"] { border-color: var(--o); color: #fff; }
.radio[aria-pressed="true"] b { color: var(--o); }
.resume { color: #fff; border-color: var(--o); }
.help { width: 30px; padding-inline: 0; font-size: 14px; letter-spacing: 0; color: #fff; } /* the 30-second tour, again (js/hub/tour.js) */
.radio:hover, .resume:hover, .help:hover { background: var(--o-wash); }
.clock { display: flex; align-items: center; gap: 10px; }
.clock-label { font: 400 11px/1 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: var(--o-dim); text-shadow: var(--halo); }
.seg { width: 142px; height: 27px; display: block; contain: strict; }
.seg .s { fill: var(--o); opacity: .09; }
.seg .s.on { opacity: 1; }
.seg .cc .s.on { opacity: .55; }
.seg .colon { fill: var(--o); }

/* ------------------------------------------------------------------ the index */
.index, .track, .feeds { position: absolute; z-index: 6; }
.index { top: 72px; left: var(--edge); width: 350px; max-height: calc(100vh - 72px - 150px); display: flex; flex-direction: column; }
.list { overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.rows { list-style: none; margin: 0; padding: 2px 0 4px; }
.rows .grp { padding: 8px 10px 2px; font: 700 10px/1 var(--cn); text-transform: uppercase; letter-spacing: .14em; color: var(--o-dim); }
.row { width: 100%; display: grid; grid-template-columns: 9px 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 10px 3px; border: 0; background: none; color: #fff; font: 700 12.5px/1.15 var(--cn); text-transform: uppercase; letter-spacing: .04em; text-align: left; text-decoration: none; cursor: pointer; }
.row .no { color: var(--o-dim); font-size: 11px; }
.row .nm { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; }
.row .nm small:where(:not(.tag)) { flex-basis: 100%; font: 400 10.5px/1.2 var(--cn); letter-spacing: .04em; color: var(--o-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .nm .tag { margin-left: 0; }
.row .nm em, .tl em { font-style: normal; font-size: 9.5px; padding: 1px 4px 0; background: var(--o); color: var(--k); letter-spacing: .08em; }
.row .st { display: flex; align-items: center; gap: 7px; color: var(--o-text); font-weight: 400; font-size: 11px; white-space: nowrap; }
.row .st .ico { width: 10px; height: 10px; color: var(--o); opacity: .6; transition: translate .2s cubic-bezier(.16, 1, .3, 1), opacity .2s; } /* one click opens it: a room, or its own site */
a.row:hover .st .ico, a.row:focus-visible .st .ico { opacity: 1; translate: 2px 0; }
.row[aria-current] .st .ico { color: var(--k); }
.row .anchor { color: var(--o-dim); }
.lamp { display: block; width: 7px; height: 7px; background: #3a1f08; transform: rotate(45deg); }
.lamp[data-c="W"] { background: #fff4de; }
.lamp[data-c="R"] { background: var(--r); }
.lamp[data-c="G"] { background: #46d27e; }
.row.angel .lamp { animation: lamp-dot 1.2s steps(1) infinite; }
@keyframes lamp-dot { 50% { background: #3a1f08; } }
.row.angel .nm { color: var(--r); }
.row:is(.s-dormant, .s-paused) .nm { color: var(--o-dim); } /* paused (set by hand) looks quiet, and holds still */
.row.s-dormant .lamp { animation: fade 2.3s steps(1) infinite; }
.row.s-coming { color: var(--o-dim); }
.row.s-coming .lamp { background: none; border: 1px dashed var(--o-dim); }
.row.k-hq .lamp { transform: none; width: 9px; height: 8px; background: var(--o); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.row:hover { background: var(--o-wash); }
.row[aria-current] { background: var(--o); color: var(--k); }
.row[aria-current] .no, .row[aria-current] .st, .row[aria-current] small, .row[aria-current] .nm, .row[aria-current] .anchor { color: var(--k); }
.row[aria-current] .nm em { background: var(--k); color: var(--o); } /* no orange chip on the orange row */
.rows .grp .tag { color: var(--o-dim); }
.row:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.legend { display: flex; justify-content: space-between; gap: 14px; padding: 6px 10px 7px; border-top: 1px solid var(--o-line); font: 400 10.5px/1.2 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: var(--o-dim); }
.legend span { display: flex; align-items: center; gap: 7px; }
.lamp-key { display: inline-block; width: 7px; height: 7px; background: #fff4de; transform: rotate(45deg); }

/* ------------------------------------------------------------------ the monitors */
.feeds { top: 72px; right: var(--edge); width: 500px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.feed { position: relative; min-width: 0; border: 1px solid var(--o-line); background: #000; }
.feed .scr { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.feed .scr > * { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.feed.painted video, .feed:not(.painted) .clip { opacity: 0; } /* a playing loop is painted into the canvas over it (hub.js) */
.feeds .feed:not(.watched) video { display: none; } /* till a monitor's watched it's its poster (hub.js) */
.feeds .feed.later { content-visibility: hidden; visibility: hidden; } /* not laid out till the map's first frame is up (hub.js) */
@media (min-width: 901px) { html.unpicked .track { display: none; } } /* the first look at the display: no card till something's picked (hub.js); a phone's sheet keeps its peek */
.feed .scr::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); pointer-events: none; }
.feed.cut .scr::before { content: ""; position: absolute; inset: 0; z-index: 2; background: #d8d0c0; mix-blend-mode: difference; animation: cut .16s steps(2) forwards; }
@keyframes cut { to { opacity: 0; } }
.feed figcaption { display: flex; align-items: baseline; gap: 8px; padding: 3px 6px 2px; border-top: 1px solid var(--o-line); font: 700 10px/1.2 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: var(--o-dim); white-space: nowrap; overflow: hidden; }
.feed figcaption b { color: var(--o); overflow: hidden; text-overflow: ellipsis; }
.feed time { margin-left: auto; font-weight: 400; flex: none; }
/* every monitor is a way in (js/hub/hub.js): the whole screen is the button */
.door { position: absolute; inset: -1px; z-index: 3; display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.door[hidden] { display: none; }
.door span { position: absolute; top: 6px; right: 6px; padding: 3px 6px 2px; background: var(--o); color: #050505; font: 700 10px/1 var(--cn); text-transform: uppercase; letter-spacing: .08em; opacity: 0; }
.door span::after { content: ""; display: inline-block; width: .3em; height: .56em; margin: 0 .14em 0 .48em; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); } /* its ▸, drawn where the glyph stood: no face here has it (js/hub/hub.js, labelDoor) */
.door:hover, .door:focus-visible { box-shadow: inset 0 0 0 1px var(--o); }
.door:hover span, .door:focus-visible span { opacity: 1; }
.door:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

/* ------------------------------------------------------------------ the tracking card */
.track { right: var(--edge); width: 500px; top: 390px; max-height: calc(100vh - 390px - var(--edge)); display: flex; flex-direction: column; }
.t-body { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.t-body > * { flex-shrink: 0; }
.t-hex:empty { display: none; }
.t-hex .hexes { height: 30px; width: auto; }
.t-name { font: 900 38px/.92 var(--mincho); color: #fff; text-transform: uppercase; display: inline-block; transform: scaleX(.8); transform-origin: 0 50%; white-space: nowrap; }
.t-name.long { font-size: 30px; }
.t-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 400 11.5px/1.3 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: var(--o-dim); }
.t-sub b { color: var(--o-text); font-weight: 700; }
.t-sub .tag { margin-left: 0; }
.t-sub .tag.blue { color: #7fb4ff; }
.t-sub .dot { width: 4px; height: 4px; background: var(--o-line); }
.t-sub .anchor { color: var(--o-text); margin-right: -3px; }
.t-visual { display: block; width: 100%; height: 118px; border-top: 1px solid var(--o-line); border-bottom: 1px solid var(--o-line); }
.t-visual[hidden] { display: none; }
.t-plain { font-size: 15px; line-height: 1.45; color: #fff; text-wrap: pretty; } /* what it is, in plain words; the lore under it in the watch's own */
.t-plain:empty { display: none; }
.t-lore { font-size: 14px; line-height: 1.45; color: var(--w); min-height: 4.35em; }
.t-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px 14px; padding-top: 9px; border-top: 1px solid var(--o-line); }
.t-stats dt { font: 400 10px/1.2 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: var(--o-dim); }
.t-stats dd { font: 700 13px/1.25 var(--cn); color: #fff; overflow-wrap: anywhere; }
.t-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.t-act:empty { display: none; }
.go { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 7px; border: 0; background: var(--o); color: var(--k); font: 700 12.5px/1 var(--cn); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; cursor: pointer; white-space: nowrap; }
.go:hover { background: #fff; }
.go kbd { opacity: .7; }
.note { font: 400 11px/1.3 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: var(--o-dim); }
.track.angel .t-name { color: #fff; }
.track.angel { border-color: var(--r); }

/* ------------------------------------------------------------------ the lower left: view, alert, status, scale */
.scopes { position: absolute; z-index: 6; left: calc(var(--edge) + 362px); bottom: 120px; display: flex; border: 1px solid var(--o-line); background: #000; }
.scopes button { padding: 6px 10px 5px; border: 0; background: none; color: var(--o-text); font: 700 11px/1 var(--cn); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.scopes button + button { border-left: 1px solid var(--o-line); }
.scopes button[aria-pressed="true"] { background: var(--o); color: var(--k); }
.scopes button:hover:not([aria-pressed="true"]) { background: var(--o-wash); }
.status { position: absolute; z-index: 5; left: calc(var(--edge) + 362px); bottom: 90px; right: 540px; font-size: 12px; color: var(--o-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; text-shadow: var(--halo); }
.scale { position: absolute; z-index: 5; left: calc(var(--edge) + 362px); bottom: 64px; display: flex; align-items: center; gap: 12px; font: 400 11px/1 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: var(--o-dim); pointer-events: none; text-shadow: var(--halo); }
.scale svg { overflow: visible; }
.scale path { fill: none; stroke: var(--o-text); stroke-width: 1.2; }
.alert { position: absolute; z-index: 7; right: var(--edge); top: 72px; width: 500px; display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 10px; border: 1px solid var(--o); background: rgba(0, 0, 0, .92); color: #fff; text-align: left; cursor: pointer; }
.alert[hidden] { display: none; }
.alert .hexes { height: 44px; width: auto; }
body:not([data-cond="contact"]) .alert .alert-hex { animation: honey 1s steps(1) infinite; }
@keyframes honey { 50% { opacity: .3; } }
.alert-txt { display: grid; gap: 3px; }
.alert b { font: 700 14px/1.1 var(--cn); text-transform: uppercase; letter-spacing: .06em; color: var(--o); }
.alert-txt span { font: 400 12px/1.25 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: var(--o-text); }
.alert:hover { background: #1a0c03; }
/* an emergency sounds with the edge flashing for four seconds, then holds it lit (a race week holds it all week) */
body[data-cond="emergency"] .display::after { content: ""; position: absolute; inset: 0; z-index: 9; border: 4px solid var(--r); pointer-events: none; animation: edge .5s steps(1) 8; }
@keyframes edge { 50% { border-color: transparent; } }

/* the timeline: the record, replayed (hub.js). A tick a week, its height the miles run; a race week white; a bright
   notch where a project first formed */
.replay { position: absolute; z-index: 6; left: var(--edge); right: calc(var(--edge) + 514px); bottom: 22px; height: 30px; display: flex; align-items: stretch; border: 1px solid var(--o-line); background: #000; }
.replay.on { border-color: var(--o); }
.replay button { flex: none; padding: 0 10px; border: 0; background: none; color: var(--o-text); font: 700 11px/1 var(--cn); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.replay button:hover:not(:disabled) { background: var(--o-wash); color: #fff; }
.replay button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.replay .tl-play { width: 34px; border-right: 1px solid var(--o-line); }
.replay .tl-play svg { display: block; width: 10px; height: 10px; margin: auto; fill: currentColor; }
.replay .tl-now { border-left: 1px solid var(--o-line); }
.replay .tl-now:disabled { color: var(--o-line); cursor: default; }
.replay.on .tl-now { background: var(--o); color: var(--k); }
.tl-track { position: relative; flex: 1; min-width: 0; margin: 0 12px; }
.tl-weeks { position: absolute; left: 1.5px; top: 4px; width: calc(100% - 3px); height: calc(100% - 8px); overflow: visible; }
.tl-weeks rect { fill: #6b3a14; }
.tl-weeks rect.race { fill: #fff4de; }
.tl-weeks rect.formed { fill: var(--o); }
.tl-track input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.tl-track input::-webkit-slider-runnable-track { height: 100%; background: none; }
.tl-track input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 3px; height: 28px; background: var(--o); box-shadow: 0 0 0 1px #000; }
.tl-track input::-moz-range-thumb { width: 3px; height: 28px; border: 0; border-radius: 0; background: var(--o); }
.tl-track input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tl-read { flex: none; align-self: center; min-width: 128px; padding-right: 10px; font: 700 11px/1 var(--cn); text-transform: uppercase; letter-spacing: .06em; color: var(--o-dim); white-space: nowrap; }
.replay.on .tl-read { color: #fff; }
.tl-label { position: absolute; left: -1px; bottom: calc(100% + 7px); font: 400 11px/1 var(--cn); text-transform: uppercase; letter-spacing: .06em; color: var(--o-dim); white-space: nowrap; pointer-events: none; text-shadow: var(--halo); }
.tl-label b { color: var(--o-text); font-weight: 700; }

/* ------------------------------------------------------------------ on the map */
/* every label reads on a black plate (stations, HQ, the sector) or inside a black halo (lights, summits, places,
   water); a selected label is an orange plate with black type (red is the Angel's alone); no orange or red type ever
   sits on an orange/red fill */
.tl { position: absolute; left: 0; top: 0; display: flex; align-items: baseline; gap: 6px; padding: 3px 6px 2px; background: rgba(0, 0, 0, .88); border: 1px solid var(--o-line); color: var(--o-text); font: 700 11px/1.1 var(--cn); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; pointer-events: auto; cursor: pointer; will-change: transform; }
.tl b { color: var(--o-dim); }
.tl i { font-style: normal; font-weight: 400; color: var(--o-dim); }
.tl.hover { border-color: var(--o); color: #fff; }
.tl.hidden { visibility: hidden; }
.tl.k-station, .tl.k-hq { display: grid; gap: 1px; padding: 3px 7px 3px; }
.tl .p { display: flex; align-items: baseline; gap: 6px; color: #fff; }
.tl .s { display: flex; gap: 6px; font-size: 10px; font-weight: 400; color: var(--o-dim); }
.tl .anchor { color: var(--o-text); align-self: center; }
.tl.k-hq { border-color: var(--o); }
.tl.k-hq .p b { color: var(--o); }
.tl.s-shipped { border-color: #7a4a1c; }
/* decay (hub.js): fading flickers, dim and damaged go dark, a lost station is struck through (its wreck is drawn) */
.tl.d-1 { animation: decay 3.1s steps(1) infinite; }
.tl:is(.s-dormant, .s-paused) .p { color: var(--o-dim); }
.tl.d-2, .tl.d-3 { border-color: #3a1f08; color: #8a5a2c; }
.tl.d-2 .p, .tl.d-3 .p { color: #9a6232; }
@keyframes decay { 0%, 61%, 66%, 100% { opacity: 1; } 62%, 64% { opacity: .15; } 63% { opacity: .7; } 85% { opacity: .45; } 86% { opacity: 1; } }
.tl.lost { opacity: .5; text-decoration: line-through; }
.tl.s-coming { border-style: dashed; background: rgba(0, 0, 0, .82); }
.tl.s-coming .p { color: var(--o-dim); }
.tl.s-coming em { background: none; border: 1px solid var(--o-dim); color: var(--o-dim); }
.tl.on { background: var(--o); border-color: var(--o); }
.tl.on .p, .tl.on .s, .tl.on .p b, .tl.on i, .tl.on .anchor { color: #050505; }
.tl.on em { background: #050505; border-color: #050505; color: var(--o); }
.tl.k-light { padding: 0 0 3px 5px; background: none; border: 0; font-size: 10px; font-weight: 400; color: var(--o-dim); pointer-events: none; text-shadow: var(--halo); }
.tl.k-light:not(.major) { display: none; }
.tl.k-summit { padding: 0 0 2px 4px; background: none; border: 0; font-size: 10px; font-weight: 400; letter-spacing: .08em; color: #b8743a; pointer-events: none; text-shadow: var(--halo); }
.tl.k-place { padding: 0; background: none; border: 0; font-size: 11px; font-weight: 400; letter-spacing: .22em; color: #b06c30; pointer-events: none; text-shadow: var(--halo); }
.tl.k-place[data-id="Maine"], .tl.k-place[data-id="New Hampshire"] { font-size: 13px; letter-spacing: .5em; color: #a8662c; }
.tl.k-water { padding: 0; background: none; border: 0; font-size: 11.5px; font-weight: 400; letter-spacing: .36em; color: #ad6a30; pointer-events: none; text-shadow: var(--halo); }
.tl.k-sector { display: grid; gap: 1px; background: rgba(0, 0, 0, .88); border: 1px dashed var(--o-dim); color: var(--o-text); }
.tl.k-sector:hover { border-color: var(--o); }
.lead { stroke: var(--o-dim); stroke-width: 1; }
.lead.k-hq { stroke: var(--o); }
.lead.k-light, .lead.k-summit { stroke: #6b3a14; }
.glyph { fill: none; stroke: var(--o); stroke-width: 1.4; }
.glyph.k-hq { stroke: var(--o); stroke-width: 1.6; fill: rgba(255, 138, 31, .18); }
.glyph.t-fort { stroke: var(--o-text); }
.glyph.t-mountain { stroke: var(--o); fill: rgba(255, 138, 31, .16); }
.glyph.k-light { stroke: #8a4a16; }
.glyph.k-summit { stroke: #8a4a16; fill: none; }
.glyph.s-shipped { fill: rgba(255, 138, 31, .28); }
.glyph.new { stroke: #fff4de; stroke-width: 1.8; }
.glyph.d-1 { animation: decay 3.1s steps(1) infinite; stroke-dasharray: 3 2; }
.glyph.d-2 { stroke: #8a4a16; }
.glyph.d-3 { stroke: #8a4a16; stroke-dasharray: 2 3; }
.glyph.lost, .overlay .lamp.lost { display: none; }
.overlay .lamp.d-2 { opacity: .4; }
.glyph.s-coming { stroke: var(--o-dim); stroke-dasharray: 2 2; }
.overlay .lamp { fill: #3a1f08; }
.overlay .lamp[data-c="W"] { fill: #fff4de; }
.overlay .lamp[data-c="R"] { fill: var(--r); }
.overlay .lamp[data-c="G"] { fill: #46d27e; }
.overlay .lamp.s-coming { fill: none; }

.overlay .contact-track { stroke: var(--r); stroke-width: 1.2; stroke-dasharray: 6 5; opacity: .8; }
.reticle { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none; will-change: transform; }
.reticle.big { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
.reticle.hidden { visibility: hidden; }
.reticle i { position: absolute; width: 10px; height: 10px; border: 0 solid var(--o); }
.reticle.big i { border-color: var(--r); } /* locked on the Angel: red is its alone */
.reticle i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.reticle i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.reticle i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.reticle i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.reticle b { position: absolute; left: calc(100% + 8px); top: 4px; padding: 2px 5px 1px; background: rgba(0, 0, 0, .88); font: 700 10.5px/1 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: var(--r); white-space: nowrap; }
.reticle.flip b { left: auto; right: calc(100% + 8px); } /* the side that's clear (map.js) */
.reticle .frame { position: absolute; inset: 0; }
.reticle.acquire .frame { animation: acquire .38s cubic-bezier(.16, 1, .3, 1); }
@keyframes acquire { from { transform: scale(2.6); opacity: .2; } }
@keyframes fade { 50% { opacity: .25; } }

/* ------------------------------------------------------------- entering: the dive, then the beats */
body.diving .index, body.diving .feeds, body.diving .track, body.diving .scopes, body.diving .alert, body.diving .status, body.diving .scale, body.diving .labels, body.diving .overlay { opacity: 0; transition: opacity .25s; }
.beat { position: fixed; inset: 0; z-index: 40; background: #000; }
.beat[hidden] { display: none; }
.sync { display: grid; grid-template-rows: auto 1fr auto; padding: 22px var(--edge) 26px; gap: 20px; }
.sync.iris { animation: iris .34s cubic-bezier(.55, 0, .85, .35) both; }
@keyframes iris { from { clip-path: circle(0 at var(--ox, 50%) var(--oy, 50%)); } to { clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 50%)); } }
.sync-bar { display: flex; justify-content: space-between; gap: 20px; padding: 6px 10px 5px; background: var(--o); color: var(--k); font: 700 13px/1.1 var(--cn); text-transform: uppercase; letter-spacing: .06em; }
.sync-main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; min-height: 0; }
.sync-left { display: grid; gap: 10px; }
.sync-label { font-size: 12px; color: var(--o-dim); }
.ratio { font: 700 184px/.82 var(--cn); color: #fff; letter-spacing: -.02em; }
.ratio span { font-size: 64px; color: var(--o); margin-left: 6px; }
.harm { display: block; width: 100%; height: 110px; border-top: 1px solid var(--o-line); border-bottom: 1px solid var(--o-line); }
.sync .legend { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; color: #fff; justify-content: flex-start; }
.sync .legend i { display: inline-block; width: 18px; height: 2px; margin-left: 8px; }
.sync .legend i:first-child { margin-left: 0; }
.sync .legend span { color: var(--o-dim); }
.h-run { background: #ff8a1f; } .h-lift { background: #f3eee6; } .h-yoga { background: #c9772f; }
.roll { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font: 700 17px/1.2 var(--cn); text-transform: uppercase; letter-spacing: .06em; color: var(--o-text); }
.roll li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; white-space: nowrap; }
.roll li span:first-child { color: var(--o-dim); font-weight: 400; }
.roll li span:last-child { overflow: hidden; text-overflow: ellipsis; }
.roll li.ok span:last-child { color: #fff; }
.cells { display: grid; grid-template-columns: repeat(32, minmax(0, 1fr)); gap: 4px; height: 20px; }
.cells i { background: var(--o-line); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.cells i.on { background: var(--o); }
.complete { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 26px var(--edge) 22px; background: var(--o); overflow: hidden; }
.complete[hidden] { display: none; }
.complete b { display: block; font: 900 min(120px, 7.4vw)/.86 var(--mincho); text-transform: uppercase; color: var(--k); transform: scaleX(.72); transform-origin: 0 50%; white-space: nowrap; }

/* title cards: classic entry (black) and red emergency */
.card { display: flex; align-items: center; padding-left: 12vw; overflow: hidden; }
.card svg { display: block; overflow: visible; position: relative; z-index: 1; }
.card text { fill: #fff; }
.card .mincho { font-family: var(--mincho); font-weight: 900; }
.card .heros { font-family: var(--cn); font-weight: 700; }
.card.invert { background: #fff; }
.card.invert text { fill: #000; }
.alarm-word, .alarm-rail { display: none; }
.card.red { background: var(--r); }
.card.red text { fill: #000; }
.card.red text.ep, .card.red text.foot { fill: #fff; }
.card.red .alarm-word { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; color: rgba(0, 0, 0, .11); font: 900 min(26vw, 330px)/1 var(--cn); text-transform: uppercase; letter-spacing: -.04em; transform: scaleX(.76); white-space: nowrap; pointer-events: none; }
.card.red .alarm-rail { display: flex; position: absolute; left: 0; right: 0; bottom: 0; height: 31px; align-items: center; overflow: hidden; background: #000; color: #fff; font: 700 12px/1 var(--cn); letter-spacing: .15em; white-space: nowrap; }
.card.red .alarm-rail span { min-width: max-content; animation: rail 9s linear infinite; }
@keyframes rail { to { transform: translateX(-100%); } }
.card.red.invert { background: #fff; }

/* ------------------------------------------------------------------ rooms */
.room-page { display: flex; flex-direction: column; min-height: 100vh; }
.room-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 20px; padding: 10px var(--edge); border-bottom: 1px solid var(--o-line); background: #000; font: 400 13px/1.2 var(--cn); text-transform: uppercase; letter-spacing: .05em; }
.room-bar .mark { width: 26px; height: 26px; }
.room-id { display: flex; align-items: baseline; gap: 10px; color: var(--o-dim); white-space: nowrap; }
.room-id b { color: #fff; }
.room-where { color: var(--o-text); font-size: 12px; white-space: nowrap; }
.room-cam { display: flex; align-items: center; gap: 7px; padding: 4px 8px 3px; border: 1px solid var(--o-line); color: var(--o); font-size: 11.5px; letter-spacing: .06em; white-space: nowrap; }
.room-cam i { width: 6px; height: 6px; border-radius: 50%; background: var(--r); }
.room-state { flex: 1; color: var(--o-dim); font-size: 12px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-out { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 5px; border: 1px solid var(--o); color: var(--o); font: 700 12px/1 var(--cn); text-transform: uppercase; letter-spacing: .05em; text-decoration: none; white-space: nowrap; }
.room-out:hover, .room-out:focus-visible { background: var(--o); color: var(--k); }
.room-out .ico { width: 10px; height: 10px; }
.return { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px 6px; border: 0; background: var(--o); color: var(--k); font: 700 13px/1 var(--cn); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.return:hover { background: #fff; }
.return:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.room-body { position: relative; flex: 1; min-height: 0; }
body.in-frame { height: 100vh; overflow: hidden; }
.room-body .live-frame { position: absolute; inset: 0; }
.room-body .live-frame iframe.live { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
/* the still an exhibit carries holds its frame while the build starts — a live build is a whole app, and the frame is
   paper until it paints — and goes when the build has (base.js's data-pc-painted, watched in js/hub/room.js). It takes
   the pointer so the app underneath is untouched while it starts */
.room-body .live-frame .live-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; transition: opacity .7s ease; }
.room-body .live-frame.painted .live-still { opacity: 0; }
/* how to play a live build, a line over its frame (its manifest's howto: js/hub/room.js) */
.howto { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; height: 30px; margin: 0; padding: 0 var(--edge); overflow: hidden; border-bottom: 1px solid var(--o-line); background: #000; font: 400 13px/1 var(--sans); color: var(--w); white-space: nowrap; }
.howto b { flex: none; font: 700 11px/1 var(--cn); text-transform: uppercase; letter-spacing: .08em; color: var(--o); }
.howto + .live-frame { top: 30px; }
.room-id .tag { font-size: .75em; } /* a draft, beside its title in the bar */
.brief { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; max-width: 1360px; margin: 0 auto; padding: 40px var(--edge) 64px; }
.brief-ep { display: flex; align-items: baseline; gap: 12px; font: 700 12px/1 var(--cn); text-transform: uppercase; letter-spacing: .12em; color: var(--o); }
.brief-ep .k { font: 900 30px/1 var(--mincho); letter-spacing: 0; color: #fff; }
.brief-title { margin-top: 16px; font: 900 clamp(64px, 9vw, 132px)/.8 var(--mincho); letter-spacing: -.02em; text-transform: uppercase; color: #fff; transform: scaleX(.74); transform-origin: 0 50%; width: 135%; }
.brief-eng { margin-top: 18px; padding-top: 10px; border-top: 2px solid #fff; font: 700 clamp(13px, 1.4vw, 18px)/1.15 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: #fff; max-width: 60ch; }
.brief-lore { margin-top: 26px; font-size: 19px; line-height: 1.5; max-width: 58ch; }
.brief-plain { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--o-text); max-width: 62ch; }
.brief-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--o-line); }
.brief-stats dt, .brief-station dt { font: 400 10.5px/1.2 var(--cn); text-transform: uppercase; letter-spacing: .06em; color: var(--o-dim); }
.brief-stats dd { margin-top: 3px; font: 700 17px/1.2 var(--cn); color: #fff; }
.brief-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.go.ghost { border: 1px solid var(--o-line); background: none; color: var(--o-text); }
.go.ghost:hover { border-color: var(--o); background: var(--o-wash); color: #fff; }
.brief-side { display: grid; gap: 14px; align-content: start; }
.brief-station { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; padding: 12px 14px; border: 1px solid var(--o-line); }
.brief-station dd { margin-top: 2px; font: 700 14px/1.3 var(--cn); color: #fff; }
.brief-station .wide { grid-column: 1 / -1; }
.brief-station .wide dd { font: 400 14px/1.45 var(--sans); color: var(--w); }
.brief-status { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--o-line); }
.brief-status p { display: flex; align-items: center; gap: 8px; font: 700 13px/1.2 var(--cn); text-transform: uppercase; letter-spacing: .06em; color: var(--o-text); }
.brief-status.s-live b { color: #fff; }
.brief-status.s-dormant b { color: var(--o-dim); }
.field span { font-weight: 400; font-size: 11px; color: var(--o-dim); }
.field i { flex: 1; height: 8px; background: linear-gradient(90deg, var(--o) var(--f), var(--o-line) var(--f)); }
/* an exhibit's real work, at a room's side or open on its shelf (js/hub/room.js): a plain frame, not a camera's, with
   its title and years under it, and why, when it's shown in place of a live build this browser can't run */
.x-media { margin: 0; border: 1px solid var(--o-line); background: #000; }
.x-scr { position: relative; aspect-ratio: 16 / 9; background: #000; }
.x-scr > * { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
/* a video waits under its loop, playing, till it's asked for: then the loop goes, and the video plays with its sound */
.x-play { padding: 0; border: 0; background: #000; cursor: pointer; }
.x-play video { display: block; width: 100%; height: 100%; object-fit: contain; }
.x-play span { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px 6px; background: var(--o); color: var(--k); font: 700 12px/1 var(--cn); text-transform: uppercase; letter-spacing: .06em; }
.x-play:is(:hover, :focus-visible) span { background: #fff; }
.x-play:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.x-media figcaption { display: flex; align-items: center; gap: 10px; padding: 5px 8px 4px; border-top: 1px solid var(--o-line); font: 700 11px/1.2 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: var(--o-dim); }
.x-media figcaption b { flex: 1; min-width: 0; color: var(--o); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-media figcaption .tag { margin-left: 0; }
.x-step { display: flex; align-items: center; gap: 6px; }
.x-step button { width: 24px; height: 20px; padding: 0; border: 1px solid var(--o-line); background: none; color: var(--o-text); font: 700 15px/1 var(--cn); cursor: pointer; }
.x-step button:hover, .x-step button:focus-visible { border-color: var(--o); color: #fff; }
.x-step output { min-width: 3.4em; font-weight: 400; text-align: center; }
.x-note { padding: 9px 10px; border-top: 1px solid var(--o-line); font: 400 13.5px/1.45 var(--sans); color: var(--w); }
.brief-side > .x-note { border: 1px solid var(--o-line); }
/* a shelf (the Gallery's, the Arcade's, the Workshop's): a card for each exhibit, which opens in place or links out */
.shelf { max-width: 1360px; margin: 0 auto; padding: 0 var(--edge) 64px; }
.shelf-h { padding-top: 14px; border-top: 1px solid var(--o-line); font: 700 12.5px/1.2 var(--cn); text-transform: uppercase; letter-spacing: .1em; color: var(--o); }
.exs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 16px 0 0; padding: 0; list-style: none; }
.ex { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--o-line); background: #000; color: var(--w); text-decoration: none; }
.ex:hover, .ex:focus-visible { border-color: var(--o); }
.ex:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ex-pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--o-line); background: #0a0a0a; }
.ex-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ex-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; } /* its video, while it's pointed at (room.js, preview) */
.ex-clip.on { opacity: 1; }
.ex-kind { display: flex; align-items: center; gap: 6px; margin: 11px 12px 0; font: 700 10.5px/1 var(--cn); text-transform: uppercase; letter-spacing: .08em; color: var(--o); }
.ex-kind .ico { width: 11px; height: 11px; }
.ex-title { margin: 7px 12px 0; font: 700 19px/1.1 var(--cn); text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.ex:hover .ex-title { text-decoration: underline; text-underline-offset: .18em; }
.ex-meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; margin: 5px 12px 0; font: 400 12px/1.2 var(--cn); letter-spacing: .06em; color: var(--o-dim); }
.ex-meta .tag { padding: 2px 5px 1px; border: 1px solid var(--o-line); color: var(--o-text); text-transform: uppercase; }
/* a draft: only on this Mac till Ryan says it can go (scripts/site-build.mjs leaves it out), marked red wherever it shows */
.tag.draft, .ex-meta .tag.draft { padding: 2px 5px 1px; border: 1px solid var(--r); color: var(--r); text-transform: uppercase; }
.ex-plain { margin: 9px 12px 14px; font: 400 13.5px/1.45 var(--sans); color: var(--w); }
/* a series on its shelf (Iris's sites), together under its label */
.exs .ser { grid-column: 1 / -1; padding: 12px 14px 14px; border: 1px solid var(--o-line); }
.ser-h { font: 700 12.5px/1.2 var(--cn); text-transform: uppercase; letter-spacing: .1em; color: var(--o-text); }
.ser .exs { margin-top: 12px; }
.shelf-more { margin-top: 22px; font: 400 14.5px/1.5 var(--sans); color: var(--o-text); }
/* an exhibit open on its shelf (#<shelf>/<exhibit>), when it isn't running in the frame */
.view { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; align-items: start; max-width: 1360px; margin: 0 auto; padding: 32px var(--edge) 64px; }
.view-title { margin-top: 14px; font: 900 clamp(34px, 3.6vw, 58px)/.92 var(--mincho); text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.view-note { margin-top: 10px; font: 400 13.5px/1.5 var(--sans); color: var(--o-text); max-width: 62ch; }
@media (max-width: 900px) {
  .room-bar { flex-wrap: wrap; gap: 8px 14px; padding: 10px 12px; }
  .room-where, .room-state { display: none; }
  .room-cam { order: 9; flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; }
  .room-id { flex: 1; }
  .brief { grid-template-columns: 1fr; gap: 28px; padding: 24px 16px 48px; }
  .brief-title { font-size: 64px; }
  .brief-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf { padding: 0 16px 48px; }
  .exs { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  .view { grid-template-columns: 1fr; gap: 20px; padding: 16px 16px 48px; }
}

/* ------------------------------------------------------------------ the front
   Who I am, the way in, four projects and the shelves' doors, over the live map, which is itself the way in: click it,
   a project on it, or the planet. html.quiet is set in index.html before the first paint, from the visitor's last
   choice. hub.js wakes the display (html.waking: the panel steps aside, a frame opens out of whatever was pressed, and
   the panels power on in turn) and puts it back to sleep (html.sleeping, then html.returning). Only the Angel and the
   lights move here: the map neither sweeps, pings nor drifts (js/hub/map.js), and the fields and the decay hold still. */
.display { --qw: 520px; }
.q-panel, .q-foot, .q-map, .q-lead, .tour-go, .q-band, .q-tip, .q-chip .touch { display: none; }
.q-top, .q-rest { display: contents; } /* a phone's two halves around its band of map (css/hub-mobile.css) */
html:is(.quiet, .waking) :is(.q-panel, .q-foot) { display: flex; }
html.quiet :is(.q-map, .q-lead) { display: block; }
html.quiet .q-tip:not([hidden]) { display: block; }
html.quiet .tour-go { display: inline-flex; }
html.quiet :is(.sheet, .alert, .scale, .replay, .bar > :not(.ident, .tour-go), .who) { display: none; }
html.quiet .org { padding-right: 0; border-right: 0; }
html.quiet .display::after { content: none; } /* a race week keeps its red edge for the full display */
html.quiet .stage { cursor: pointer; } /* the map is the way in */
html.quiet :is(.tl.d-1, .glyph.d-1) { animation: none; }
html.quiet .no-gl .gl-note { left: calc(var(--edge) + var(--qw) + 40px); right: 40px; }

.q-panel { position: absolute; z-index: 6; top: 76px; bottom: var(--edge); left: var(--edge); width: var(--qw); flex-direction: column; padding: 30px 32px 24px;
  background: #000; border: 1px solid var(--o-line); overflow: hidden auto; scrollbar-width: thin; container-type: inline-size; }
.q-name { width: 125%; font: 900 15.2cqi/.84 var(--mincho); text-transform: uppercase; color: #fff; white-space: nowrap; transform: scaleX(.8); transform-origin: 0 50%; } /* the resume's hero, one line */
.q-line { margin-top: 20px; max-width: 42ch; font-size: 19px; line-height: 1.42; color: var(--w); text-wrap: pretty; }
.q-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.q-acts .go { flex: 1 1 auto; justify-content: center; min-height: 42px; padding: 0 16px; font-size: 13px; }
.q-acts .tag { margin-left: -3px; }
/* the column's way in: a row of its own, its arrow moving off as it's pointed at */
#q-work { flex-basis: 100%; justify-content: space-between; min-height: 48px; padding: 0 18px; font-size: 14.5px; letter-spacing: .1em; }
#q-work::after { content: ""; width: 9px; height: 9px; margin-right: 3px; border: solid currentColor; border-width: 2px 2px 0 0; rotate: 45deg; transition: translate .3s cubic-bezier(.16, 1, .3, 1); }
#q-work:is(:hover, :focus-visible)::after { translate: 4px 0; }
.q-orb { width: 18px; height: 18px; margin: 0 -2px 0 -6px; }
.q-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 34px; padding-bottom: 8px; border-bottom: 1px solid var(--o-line); }
.q-head h2 { flex: none; font: 700 12.5px/1.2 var(--cn); text-transform: uppercase; letter-spacing: .1em; color: var(--o); }
.q-head h2 .tag { color: var(--o-dim); }
.q-head p { font: 400 11px/1.25 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: var(--o-dim); text-align: right; }
.q-list { list-style: none; margin: 0; padding: 0; }
.q-list li + li { border-top: 1px solid var(--o-line); }
.q-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 5px 14px; margin: 0 -12px; padding: 13px 12px 12px; color: var(--w); text-decoration: none; }
.q-row b { font: 700 17px/1.1 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: #fff; }
.q-row em { margin-left: 10px; padding: 2px 5px 1px; border: 1px solid var(--o-dim); font: 700 10px/1 var(--cn); font-style: normal; letter-spacing: .08em; color: var(--o-text); vertical-align: 2px; } /* in progress */
.q-row .k { display: flex; align-items: center; gap: 8px; font: 400 11px/1 var(--cn); text-transform: uppercase; letter-spacing: .06em; color: var(--o-dim); }
.q-row .ico { width: 11px; height: 11px; color: var(--o); transition: translate .25s cubic-bezier(.16, 1, .3, 1); }
.q-row .d { grid-column: 1 / -1; font-size: 14.5px; line-height: 1.42; text-wrap: pretty; }
.q-row small { grid-column: 1 / -1; font: 400 11px/1.25 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: var(--o-dim); }
.q-row:hover { background: var(--o-wash); }
.q-row:hover b { color: var(--o-text); }
.q-row:is(:hover, :focus-visible) .ico { translate: 3px 0; }
.q-row:focus-visible { outline-offset: -2px; }
/* a door to each shelf, under the four: a strip of its newest posters (data/make.mjs), its name and how many are on it */
.q-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.q-door { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 7px 6px; height: 100%; padding: 7px 8px 6px; border: 1px solid var(--o-line); color: var(--w); text-decoration: none; }
.q-door img { grid-column: 1 / -1; display: block; width: 100%; height: auto; background: #0a0a0a; }
.q-door b { overflow: hidden; font: 700 13px/1.1 var(--cn); text-transform: uppercase; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.q-door small { font: 400 11px/1 var(--cn); letter-spacing: .05em; color: var(--o-dim); }
.q-door:hover { border-color: var(--o); background: var(--o-wash); }
.q-door:hover b { color: var(--o-text); }
.q-door:focus-visible { outline-offset: -2px; }
.q-contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: auto; padding-top: 20px; font: 400 13px/1.3 var(--cn); letter-spacing: .03em; }
.q-contact span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--o-dim); }
.q-contact a { color: var(--o-text); text-decoration-color: rgba(255, 160, 74, .4); }
.q-contact a:hover { color: #fff; text-decoration-color: currentColor; }
/* on the map: its invitation (a real button, lit while the map is pointed at: a click anywhere there goes the same way),
   its key under it, the frame round the map while it's pointed at or the invitation has the keyboard, what a click on a
   station or the planet does, and the line from a row in the column out to its station (hub.js) */
.q-foot { position: absolute; z-index: 6; left: calc((100% + var(--edge) + var(--qw)) / 2); bottom: 22px; translate: -50% 0; width: max-content; max-width: calc(100% - var(--edge) - var(--qw) - 48px); flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.q-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 9px 13px; border: 1px solid var(--o); background: rgba(0, 0, 0, .88); color: var(--o-text);
  font: 700 13px/1 var(--cn); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; pointer-events: auto; transition: background-color .2s, color .2s; }
.q-chip svg { width: 10px; height: 13px; fill: currentColor; }
.q-chip:is(:hover, :focus-visible), html.quiet .display.over-map .q-chip { background: var(--o); color: var(--k); } /* .over-map, .over-chip: js/hub/hub.js */
.q-chip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.q-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 1em; padding: 6px 10px 5px; background: rgba(0, 0, 0, .8); font-size: 13px; line-height: 1.35; color: var(--w); }
.q-key svg { width: 10px; height: 10px; margin-right: 7px; fill: none; stroke-width: 1.6; }
.q-key .o { color: var(--o); stroke: var(--o); }
.q-key .r { color: var(--r); stroke: var(--r); }
.q-map { position: absolute; z-index: 5; left: calc(var(--edge) + var(--qw) + 14px); right: 14px; top: 62px; bottom: 12px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.q-map i { position: absolute; width: 26px; height: 26px; border: 0 solid var(--o); }
.q-map i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.q-map i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.q-map i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.q-map i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
html.quiet .display:is(.over-map, .over-chip) .q-map { opacity: 1; }
.q-tip { position: fixed; z-index: 20; left: 0; top: 0; padding: 4px 8px 3px; background: var(--o); color: var(--k); font: 700 11px/1.1 var(--cn); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; pointer-events: none; }
html.quiet .tl:is(.k-station, .k-hq).hover { border-color: var(--o); background: #000; }
html.quiet .tl.hover .p { text-decoration: underline; text-underline-offset: .2em; }
html.quiet .stage.over-angel .reticle b { background: var(--r); color: var(--k); }
.q-lead { position: fixed; z-index: 5; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.q-lead polyline { fill: none; stroke: var(--o); stroke-width: 1.6; stroke-linejoin: round; }
.simple svg { width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 1.6; } /* back to the front */
/* the tour, asked for: in the bar, on the front only (the full display has its ? for it) */
.tour-go { margin-left: auto; align-items: center; gap: 9px; padding: 7px 12px 6px 11px; border: 1px solid var(--o-line); background: #000; color: var(--o-text);
  font: 700 11.5px/1 var(--cn); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.tour-go svg { width: 7px; height: 9px; fill: var(--o); }
.tour-go:hover { border-color: var(--o); background: var(--o-wash); color: #fff; }

/* waking: the frame opens from what was pressed out to the screen's edge (hub.js places it), the panel steps aside,
   and the console powers on panel by panel, each a tube coming up from a bright line */
.q-frame { position: fixed; z-index: 45; pointer-events: none; border: 1px solid rgba(255, 138, 31, .5);
  transition: top .62s cubic-bezier(.16, 1, .3, 1), right .62s cubic-bezier(.16, 1, .3, 1), bottom .62s cubic-bezier(.16, 1, .3, 1), left .62s cubic-bezier(.16, 1, .3, 1), opacity .4s .42s ease-out; }
.q-frame i { position: absolute; width: 28px; height: 28px; border: 0 solid var(--o); }
.q-frame i:nth-child(1) { left: -2px; top: -2px; border-width: 3px 0 0 3px; }
.q-frame i:nth-child(2) { right: -2px; top: -2px; border-width: 3px 3px 0 0; }
.q-frame i:nth-child(3) { left: -2px; bottom: -2px; border-width: 0 0 3px 3px; }
.q-frame i:nth-child(4) { right: -2px; bottom: -2px; border-width: 0 3px 3px 0; }
@keyframes boot { from { scale: 1 .008; opacity: .3; filter: brightness(3.2); } 45% { opacity: 1; filter: brightness(1.8); } to { scale: 1 1; opacity: 1; filter: none; } }
@keyframes unboot { to { scale: 1 .008; opacity: 0; filter: brightness(3); } }
@keyframes flick { 0% { opacity: 0; } 22% { opacity: .9; } 38% { opacity: .1; } 54%, 100% { opacity: 1; } }
@keyframes q-out { to { clip-path: inset(0 100% 0 0); translate: -28px 0; opacity: .2; filter: blur(3px); } }
@keyframes q-in { from { clip-path: inset(0 100% 0 0); translate: -28px 0; } }
@keyframes q-gone { to { opacity: 0; } }
.index { --boot: .2s; } .track { --boot: .58s; } .replay { --boot: .66s; }
.feed:nth-child(1) { --boot: .32s; } .feed:nth-child(2) { --boot: .38s; } .feed:nth-child(3) { --boot: .44s; } .feed:nth-child(4) { --boot: .5s; }
.who { --boot: .06s; } .sector { --boot: .12s; } .cond { --boot: .18s; } .radio { --boot: .24s; } .resume { --boot: .28s; } .simple { --boot: .32s; } .help { --boot: .34s; } .clock { --boot: .36s; }
.scopes, .status, .scale { --boot: .74s; }
html.waking .q-panel { animation: q-out .44s cubic-bezier(.55, 0, .85, .35) forwards; pointer-events: none; }
html.waking .q-foot { animation: q-gone .2s ease-in forwards; }
html.waking :is(.index, .feed, .track, .replay) { animation: boot .52s var(--boot, 0s) cubic-bezier(.16, 1, .3, 1) both; }
html.waking .replay { transform-origin: 50% 100%; }
html.waking :is(.bar > :not(.ident), .who, .scopes, .status, .scale) { animation: flick .5s var(--boot, 0s) steps(1, end) both; }
html.sleeping :is(.index, .feed, .track, .replay, .alert) { animation: unboot .24s cubic-bezier(.55, 0, .85, .35) forwards; }
html.sleeping :is(.bar > :not(.ident), .who, .scopes, .status, .scale) { animation: q-gone .2s forwards; }
html.returning .q-panel { animation: q-in .56s cubic-bezier(.16, 1, .3, 1) both; }
html.returning .q-foot { animation: flick .5s .32s steps(1, end) both; }

/* ------------------------------------------------------------------ the 30-second tour (js/hub/tour.js)
   Over the open map, between the list and the monitors. While it talks, whatever the beat doesn't need steps out of the
   way entirely, nothing left ghosting through: the list stays, and the card comes up for the project and the planet. */
.tour { position: absolute; z-index: 12; left: calc(var(--edge) + 364px); right: calc(var(--edge) + 514px); bottom: 70px; max-width: 540px; margin: 0 auto; border: 1px solid var(--o); background: #000; }
.tour:focus { outline: none; } /* focus lands on the tour itself; its buttons carry the ring */
.tour:not([hidden]) { animation: unfold .55s cubic-bezier(.16, 1, .3, 1); } /* its tab first, then the rest drops open */
@keyframes unfold { from { clip-path: inset(0 0 calc(100% - 22px) 0); } to { clip-path: inset(0); } }
.tour [hidden] { display: none; }
.tour-body { display: grid; gap: 8px; padding: 14px 18px 16px; }
.tour-title { width: 125%; font: 900 34px/.95 var(--mincho); text-transform: uppercase; color: #fff; transform: scaleX(.8); transform-origin: 0 50%; text-wrap: balance; }
.tour-sub { font: 400 11.5px/1.3 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: var(--o-text); }
.tour-sub:empty, #tour-more:empty { display: none; }
.tour-text { max-width: 60ch; min-height: 4.5em; font-size: 15.5px; line-height: 1.5; color: var(--w); }
.tour-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 4px; }
#tour-skip { margin-left: auto; }
body.touring :is(.feeds, .replay, .scopes, .status, .scale, .alert, .sector, .cond, .radio, .clock), body[data-beat="1"] .track { opacity: 0; visibility: hidden; }
:where(.feeds, .replay, .scopes, .status, .scale, .alert, .sector, .cond, .radio, .clock, .track) { transition: opacity .45s ease-out, visibility .45s; }
/* beat 2's click, shown: the row flashes as if pressed, then holds as the tracked one while the map flies in */
.row.pressed { animation: press .7s cubic-bezier(.16, 1, .3, 1); }
@keyframes press { from { background: #fff; } }

/* ------------------------------------------------------------------ narrower screens */
@media (max-width: 1280px) {
  .display { --qw: 470px; }
  .q-acts .go { padding: 0 12px; font-size: 12.5px; }
  .tour { left: calc(var(--edge) + 334px); right: calc(var(--edge) + 454px); }
  .index { width: 320px; }
  .feeds, .track { width: 440px; }
  .track { top: 356px; max-height: calc(100vh - 356px - var(--edge)); }
  .scopes, .status, .scale { left: calc(var(--edge) + 332px); }
  .alert { width: 440px; }
  .status { right: 480px; }
  .replay { right: calc(var(--edge) + 454px); }
  .sector { display: none; }
  .no-gl .gl-note { left: calc(var(--edge) + 340px); right: calc(var(--edge) + 460px); }
}
/* a narrow desktop: the bar sheds its captions, and the tour takes the width it needs over the card */
@media (max-width: 1180px) {
  .cond > span, .clock-label { display: none; }
  .tour { right: var(--edge); max-width: 480px; margin: 0; }
}
/* a shorter screen: the same front, closer set, so the four projects, the shelves' doors and how to reach me stay in
   view. The rows drop their station line (pointing at a row still lights its station on the map) */
@media (max-height: 1040px) and (min-width: 901px) {
  .q-panel { padding: 26px 30px 20px; }
  .q-line { margin-top: 16px; font-size: 18px; }
  .q-acts { margin-top: 20px; }
  .q-head { margin-top: 22px; }
  .q-row { padding-block: 9px 8px; }
  .q-row small { display: none; }
  .q-contact { padding-top: 14px; }
}
@media (max-height: 820px) and (min-width: 901px) {
  .q-panel { top: 66px; padding: 20px 28px 14px; }
  .q-name { font-size: 12cqi; }
  .q-line { margin-top: 10px; font-size: 16.5px; }
  .q-acts { margin-top: 14px; }
  #q-work { min-height: 42px; }
  .q-acts .go { min-height: 38px; }
  .q-head { margin-top: 14px; }
  .q-row { padding-block: 7px 6px; }
  .q-row .d { font-size: 14px; }
  .q-doors { margin-top: 4px; }
  .q-door { gap: 5px 6px; padding-block: 6px 5px; }
  .q-contact { padding-top: 8px; }
}
/* phones (≤ 900 px): css/hub-mobile.css */

@media (prefers-reduced-motion: reduce) {
  .cursor, .typed[data-ghost]::before, .cond b, .row.angel .lamp, .row.s-dormant .lamp, .tl.d-1, .glyph.d-1, .reticle.acquire .frame, .feed.cut .scr::before,
  .alert .alert-hex, body[data-cond="emergency"] .display::after, .card.red .alarm-rail span, .sync.iris,
  html:is(.waking, .sleeping, .returning) *, .q-frame, .tour, .row.pressed { animation: none !important; }
  .stage, .row .st .ico, .q-row .ico, .tour-go, #q-work::after, .q-chip, .q-map, :where(.feeds, .replay, .scopes, .status, .scale, .alert, .sector, .cond, .radio, .clock, .track) { transition: none; }
}