/* ESPECTROBERTO shell.
   Build target is Onyx (Fire tablet, Chromium 88 WebView, 2 GB RAM).
   Banned here and enforced by build/lint-c88.mjs: backdrop-filter, :has(),
   container queries, dvh/svh/lvh, :is()/:where(), color-mix(), nesting,
   @layer, WebGL on the shell. Motion is transform and opacity only. */

/* Self-hosted (OFL, licenses in /fonts). No third-party request from the shell. */
@font-face { font-family: "Gloock"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/gloock-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Gloock"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/gloock-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #000000;          /* true black: the screen is off where nothing is */
  --face: #e9ebee;         /* body text */
  --dim: #9097a1;          /* secondary text, 7.0:1 on black */
  --rule: #262a30;         /* hairlines and outlines */
  --raise: #0d0f12;        /* the one raised surface: the open band */

  --r: #e5484d;            /* names */
  --o: #f07a2e;            /* letters */
  --y: #f5c518;            /* wine */
  --g: #3dba6e;            /* language */
  --b: #3e8ef7;            /* machines */
  --i: #7b6cf6;            /* music */
  --v: #b663ea;            /* personas */

  --serif: "Gloock", "Georgia", serif;
  --sans: "Bricolage Grotesque", "Segoe UI", "Roboto", sans-serif;

  --gutter: 16px;
  --rail: 10px;
  --measure: 34rem;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --slow: 520ms;
}

@media (min-width: 760px) {
  :root { --gutter: 40px; --rail: 14px; }
}

/* The site is dark on purpose. A light viewer theme does not flip it. */
html { background: var(--ink); color: var(--face); color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--face);
  outline-offset: 3px;
}
img { max-width: 100%; height: auto; display: block; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--face); color: var(--ink); padding: 6px 10px; z-index: 20; }

/* ---------- The spectrum rail (every page but the splash) ---------- */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail);
  display: flex; flex-direction: column; z-index: 10;
}
.rail a { flex: 1 1 0; display: block; position: relative; }
.rail a span {
  position: absolute; left: calc(var(--rail) + 8px); top: 50%;
  transform: translateY(-50%); white-space: nowrap; font-size: 13px;
  background: var(--ink); color: var(--face); padding: 2px 8px;
  border: 1px solid var(--rule); opacity: 0; pointer-events: none;
  transition: opacity 160ms linear;
}
.rail a:hover span, .rail a:focus-visible span { opacity: 1; }
.rail a[aria-current="true"] { flex-grow: 3; }
.rail .home { flex: 0 0 auto; height: 28px; background: var(--face); }
.rail .home span { color: var(--face); }
@media (max-width: 759px) {
  .rail { right: 0; bottom: auto; width: auto; height: var(--rail); flex-direction: row; }
  .rail a span { display: none; }
  .rail .home { width: 28px; height: auto; }
}
.has-rail { padding-left: calc(var(--rail) + var(--gutter)); padding-right: var(--gutter); }
@media (max-width: 759px) {
  .has-rail { padding-left: var(--gutter); padding-top: var(--rail); }
}

/* ---------- Splash ---------- */
.splash { min-height: 100vh; display: flex; flex-direction: column; }
.mast { padding: 28px var(--gutter) 22px; }
.word {
  margin: 0; line-height: 1;
}
.word .spectrum-logo { max-height: 260px; }
.lede { max-width: var(--measure); margin: 18px 0 0; color: var(--dim); font-size: 18px; }
.lede strong { color: var(--face); font-weight: 600; }

.bands {
  flex: 1 1 auto; display: flex; min-height: 62vh;
  border-top: 1px solid var(--rule);
}
.band {
  flex: 1 1 0; position: relative; overflow: hidden; display: flex; flex-direction: column;
  border-right: 1px solid var(--ink);
  transition: flex-grow var(--slow) var(--ease);
}
.band:last-child { border-right: 0; }
.band > .tab {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end;
  width: 100%; padding: 16px 12px; border: 0; margin: 0; cursor: pointer;
  background: var(--hue); color: var(--ink); text-align: left; font: inherit;
}
.band > .tab .glyph { width: 40px; height: 40px; margin-bottom: auto; }
.band > .tab .glyph * { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: square; }
.band > .tab .name { font-family: var(--serif); font-size: 26px; line-height: 1; }
.band > .tab .what { font-size: 14px; line-height: 1.3; margin-top: 6px; max-width: 14ch; min-height: 2.6em; }
.band > .panel { display: none; }

/* An open band takes the room; the rest collapse to a rail of their hue. */
.bands.is-open .band { flex-grow: 0; flex-basis: var(--rail); }
.bands.is-open .band > .tab .glyph,
.bands.is-open .band > .tab .name,
.bands.is-open .band > .tab .what { opacity: 0; }
.bands.is-open .band.open { flex-grow: 1; flex-basis: 0; background: var(--raise); }
.bands.is-open .band.open > .tab {
  flex: 0 0 auto; height: 8px; padding: 0; cursor: pointer;
}
.bands.is-open .band.open > .panel { display: block; }

.panel { padding: 22px var(--gutter) 40px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.panel h2 { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.05; margin: 0 0 6px; }
.panel .blurb { color: var(--dim); max-width: var(--measure); margin: 0 0 24px; }
.panel .close {
  background: none; border: 1px solid var(--rule); color: var(--face); font: inherit; font-size: 14px;
  padding: 6px 12px; cursor: pointer; margin-bottom: 18px;
}
.works { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.works li { border-top: 1px solid var(--rule); }
.works li:last-child { border-bottom: 1px solid var(--rule); }
.works a { display: flex; align-items: baseline; padding: 14px 0; text-decoration: none; }
.works a:hover .t, .works a:focus-visible .t { text-decoration: underline; }
.works .t { font-size: 20px; font-weight: 600; flex: 0 1 auto; }
.works .k { margin-left: auto; padding-left: 16px; color: var(--dim); font-size: 14px; white-space: nowrap; }
.works .d { display: block; color: var(--dim); font-size: 15px; margin: -8px 0 14px; max-width: var(--measure); }
.works .held { color: var(--dim); font-size: 13px; border: 1px dashed var(--dim); padding: 1px 6px; margin-left: 8px; }

/* Columns need room for the band names; under 1024px (phones, Onyx in
   portrait) the spectrum stacks as rows instead. */
@media (max-width: 1023px) {
  .bands { flex-direction: column; min-height: 0; flex: 0 0 auto; }
  .band { flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--ink); }
  .band > .tab { flex-direction: row; align-items: center; justify-content: flex-start; padding: 14px var(--gutter); min-height: 64px; }
  .band > .tab .glyph { width: 30px; height: 30px; margin: 0 14px 0 0; }
  .band > .tab .name { font-size: 22px; }
  .band > .tab .what { margin: 0 0 0 auto; text-align: right; max-width: 18ch; min-height: 0; }
  .bands.is-open .band { flex-basis: auto; }
  .bands.is-open .band.open { flex: 0 0 auto; }
  .bands.is-open .band > .tab { min-height: 0; height: var(--rail); padding: 0; }
  .bands.is-open .band.open > .tab { height: 8px; }
}

.foot {
  padding: 18px var(--gutter) 28px; color: var(--dim); font-size: 14px;
  display: flex; flex-wrap: wrap; gap: 8px 22px; border-top: 1px solid var(--rule);
}
.foot a { color: var(--face); }

/* The one orchestrated moment: white light splits into seven bands. */
@media (prefers-reduced-motion: no-preference) {
  .js .bands .band { transform: scaleY(0); transform-origin: 50% 0; opacity: 0; }
  .js .bands.lit .band { transform: none; opacity: 1; transition: transform 900ms var(--ease), opacity 400ms linear, flex-grow var(--slow) var(--ease); }
  .js .bands.lit .band:nth-child(2) { transition-delay: 60ms, 60ms, 0ms; }
  .js .bands.lit .band:nth-child(3) { transition-delay: 120ms, 120ms, 0ms; }
  .js .bands.lit .band:nth-child(4) { transition-delay: 180ms, 180ms, 0ms; }
  .js .bands.lit .band:nth-child(5) { transition-delay: 240ms, 240ms, 0ms; }
  .js .bands.lit .band:nth-child(6) { transition-delay: 300ms, 300ms, 0ms; }
  .js .bands.lit .band:nth-child(7) { transition-delay: 360ms, 360ms, 0ms; }
}
@media (prefers-reduced-motion: reduce) {
  .band { transition: none; }
}

/* ---------- Work viewer: the original app, untouched, one at a time ---------- */
.viewer { height: 100vh; display: flex; flex-direction: column; }
.viewer header {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px var(--gutter) 10px 0; border-bottom: 2px solid var(--hue);
}
.viewer h1 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0; }
.viewer header p { margin: 0; color: var(--dim); font-size: 14px; flex: 1 1 18rem; }
.viewer header .out { font-size: 14px; }
.viewer iframe { flex: 1 1 auto; width: 100%; border: 0; background: var(--ink); }
.viewer .note { padding: 40px 0; max-width: var(--measure); }
.viewer .note h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; }

/* ---------- Reading pages (CV, letters) ---------- */
.read { max-width: 44rem; padding-top: 40px; padding-bottom: 64px; }
.read h1 { font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: 1; margin: 0 0 8px; }
.read .sub { color: var(--dim); margin: 0 0 36px; }
.read h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 48px 0 6px; padding-top: 14px; border-top: 2px solid var(--hue, var(--rule)); }
.read h3 { font-size: 19px; margin: 26px 0 0; }
.read h3 .when { font-weight: 400; color: var(--dim); font-size: 15px; margin-left: 8px; white-space: nowrap; }
.read .where { color: var(--dim); font-size: 15px; margin: 0 0 6px; }
.read p, .read li { max-width: var(--measure); }
.read ul { padding-left: 1.1em; margin: 6px 0; }
.read li { margin: 4px 0; }
.read .pair { border-left: 2px dashed var(--dim); padding-left: 12px; }
.read .pair .alt { color: var(--dim); }
.read .pair .alt::before { content: "or: "; font-size: 13px; }
.read .print { font-size: 14px; color: var(--dim); }
.read blockquote { margin: 18px 0; padding-left: 16px; border-left: 2px solid var(--rule); color: var(--dim); }
.prose p { font-size: 18px; line-height: 1.65; }
.prose .center { text-align: center; color: var(--dim); }

@media print {
  .rail, .foot, .read .print { display: none; }
  html, body { background: #fff; color: #000; }
  .has-rail { padding: 0; }
  .read h2 { border-top-color: #000; }
  .read .where, .read h3 .when { color: #333; }
}

.prose code, .read code { font-size: .92em; background: var(--raise); padding: 1px 5px; border: 1px solid var(--rule); }
.table { overflow-x: auto; margin: 18px 0; }
.read table { border-collapse: collapse; font-size: 15px; min-width: 32rem; }
.read th, .read td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--rule); }
.read th { color: var(--dim); font-weight: 600; }
.prose h3 { font-size: 20px; margin-top: 34px; }
.held { color: var(--dim); font-size: 13px; border: 1px dashed var(--dim); padding: 1px 6px; }

/* ---------- The CV map (/cv/) ----------
   The network is monochrome: every system ridden, drawn the same grey.
   Hue only arrives with a direction, in its band's colour, and only on that
   direction's route and stops. Motion is opacity only. */
.mapcv { padding-top: 34px; padding-bottom: 40px; }
.mhead h1 { font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: 1; margin: 0 0 8px; }
.mhead .sub { color: var(--dim); margin: 0 0 14px; }
.mhead .intro { max-width: var(--measure); margin: 0 0 22px; }
.mhead .pair { border-left: 2px dashed var(--dim); padding-left: 12px; display: block; }
.mhead .pair .alt { color: var(--dim); }
.mhead .pair .alt::before { content: "or: "; font-size: 13px; }

.dirs { display: flex; flex-wrap: wrap; margin: 0 -6px 14px; }
.dir {
  display: flex; align-items: center; margin: 0 6px 10px; padding: 9px 14px 9px 10px;
  background: var(--ink); color: var(--face); border: 1px solid var(--rule); border-radius: 999px;
  font: inherit; font-size: 15px; cursor: pointer; transition: opacity 200ms linear;
}
.dir .sw { width: 14px; height: 14px; border-radius: 50%; background: var(--hue); margin-right: 10px; flex: 0 0 auto; }
.dir .dc { color: var(--dim); font-size: 13px; margin-left: 10px; }
.dir[aria-pressed="true"] { background: var(--hue); color: var(--ink); border-color: var(--hue); }
.dir[aria-pressed="true"] .sw { background: var(--ink); }
.dir[aria-pressed="true"] .dc { color: var(--ink); }

.mapwrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule); background: var(--ink);
  margin: 0 calc(-1 * var(--gutter)) 0 0;
}
@media (max-width: 759px) { .mapwrap { margin: 0 calc(-1 * var(--gutter)); border-left: 0; border-right: 0; } }
.map { display: block; width: 100%; min-width: 980px; height: auto; }
.maphint { color: var(--dim); font-size: 13px; margin: 8px 0 26px; }

.map .plate { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.map .city { fill: var(--dim); font-family: var(--serif); font-size: 30px; }
.map .net { fill: none; stroke: #5b616a; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.map .net.web { stroke: #3a3f47; stroke-width: 3; stroke-dasharray: 2 9; }
.map .lname { fill: var(--dim); font-size: 17px; font-style: italic; }
.map .lname.web { font-size: 15px; }
.map .trunkname { fill: var(--face); font-style: normal; font-size: 19px; font-weight: 600; }
.map .trunk-out { stroke: #8f96a0; stroke-width: 12; stroke-linecap: butt; fill: none; }
.map .trunk-in { stroke: var(--ink); stroke-width: 5; fill: none; }
.map .gapmark { stroke: var(--face); stroke-width: 3; fill: none; }
.map .gaplabel { fill: var(--dim); font-size: 15px; font-style: italic; text-anchor: middle; }

.map .route { fill: none; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 320ms linear; pointer-events: none; }
.map .route.on { opacity: .95; }

.map .stn { cursor: pointer; outline: none; }
.map .stn .hit { fill: transparent; }
.map .stn .dot { fill: var(--ink); stroke: var(--face); stroke-width: 4; }
.map .stn.ix .dot.x { fill: var(--ink); stroke: var(--face); stroke-width: 4; }
.map .stn.ix .dot:not(.x) { fill: var(--face); stroke: none; }
.map .stn text { fill: var(--face); font-size: 17px; transition: opacity 320ms linear; }
.map .stn, .map .net, .map .trunk-out, .map .lname { transition: opacity 320ms linear; }
.has-dir .map .stn { opacity: .28; }
.has-dir .map .stn.on, .has-dir .map .stn.here { opacity: 1; }
.has-dir .map .net, .has-dir .map .lname { opacity: .55; }
.map .stn:hover .dot, .map .stn:focus .dot.x, .map .stn:focus .dot { stroke-width: 6; }
.map .stn:focus text, .map .stn.here text { font-weight: 700; }
.map .stn.here .dot { stroke-width: 7; }
.map .stn:focus .hit { stroke: var(--face); stroke-width: 2; stroke-dasharray: 3 4; }

.board { display: flex; align-items: flex-start; }
.board .side { flex: 0 0 320px; margin-right: 40px; }
.board .dossier { flex: 1 1 auto; min-width: 0; max-width: 44rem; border-top: 3px solid var(--hue, var(--rule)); padding-top: 4px; }
@media (max-width: 899px) {
  .board { display: block; }
  .board .side { margin: 0 0 30px; }
}
.tt h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 0 0 6px; padding-top: 12px; border-top: 3px solid var(--hue, var(--rule)); }
.tt h3 { font-size: 15px; color: var(--dim); font-weight: 600; margin: 22px 0 8px; }
.tt .lede-dir { color: var(--dim); margin: 0 0 16px; }
.tt ol { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 4px solid var(--hue); }
.tt li { margin: 0; }
.tt li button {
  display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--face);
  font: inherit; padding: 8px 0 8px 14px; cursor: pointer; position: relative;
}
.tt li button::before {
  content: ""; position: absolute; left: -21px; top: 15px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--face);
}
.tt li[aria-current] button::before { background: var(--hue); border-color: var(--hue); }
.tt li[aria-current] .tn { font-weight: 700; }
.tt .tn { display: block; }
.tt .tw { display: block; color: var(--dim); font-size: 14px; }
.systems { list-style: none; padding: 0; margin: 0; }
.systems li { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.systems .sn { font-weight: 600; }
.systems .sf { color: var(--dim); font-size: 14px; }
.systems .sw2 { display: block; color: var(--dim); font-size: 14px; }

.dos h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; margin: 12px 0 4px; }
.dos .sect { color: var(--dim); font-size: 14px; margin: 14px 0 0; }
.dos .when { color: var(--hue, var(--dim)); margin: 0; font-weight: 600; }
.dos .where { color: var(--dim); font-size: 15px; margin: 2px 0 12px; }
.dos p, .dos li { max-width: var(--measure); }
.dos ul { padding-left: 1.1em; }
.dos li { margin: 4px 0; }
.dos .pair { border-left: 2px dashed var(--dim); padding-left: 12px; display: inline-block; }
.dos .pair .alt { color: var(--dim); }
.dos .pair .alt::before { content: "or: "; font-size: 13px; }
.dos .go { font-weight: 600; }
.dos.empty p { color: var(--dim); margin: 16px 0; }
.ride { display: flex; margin-top: 22px; }
.ride button {
  font: inherit; font-size: 15px; background: var(--ink); color: var(--face); border: 1px solid var(--rule);
  padding: 8px 14px; margin-right: 10px; cursor: pointer;
}
.ride button:disabled { opacity: .35; cursor: default; }
.ride[hidden] { display: none; }

@media print {
  .mapcv .dirs, .mapcv .mapwrap, .mapcv .maphint, .ride { display: none; }
  .mapcv .tt, .mapcv .dos { display: block !important; }
}

/* Map views and the wider network (Europe, airport trains, intercity trips). */
.views { display: flex; flex-wrap: wrap; margin: 0 0 10px; }
.view {
  font: inherit; font-size: 14px; background: var(--ink); color: var(--dim); border: 1px solid var(--rule);
  padding: 6px 12px; margin: 0 8px 6px 0; cursor: pointer;
}
.view[aria-pressed="true"] { color: var(--face); border-color: var(--face); }
.mapwrap[data-view="us"] .map { min-width: 1100px; }
.mapwrap[data-view="eu"] .map { min-width: 900px; }
.mapwrap[data-view="all"] .map { min-width: 1400px; }
.map .net.mover { stroke-width: 5; stroke-dasharray: 14 6; }
.map .net.hazy { stroke-width: 5; stroke-dasharray: 3 10; opacity: .6; }
.map .net.road { stroke: #5b616a; stroke-width: 3; stroke-dasharray: 10 8; }
.map .net.atlantic { stroke: var(--rule); stroke-width: 2; stroke-dasharray: 6 10; }
.map .lname.k-note { font-size: 15px; }
.map .lname.k-atlantic { font-size: 18px; letter-spacing: .1em; }
.map .ic-out { fill: none; stroke: #8f96a0; stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }
.map .ic-in { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.map .hub { fill: var(--ink); stroke: #8f96a0; stroke-width: 4; }
.map .town circle { fill: var(--ink); stroke: #8f96a0; stroke-width: 3; }
.map .town text { fill: var(--dim); font-size: 16px; }
.has-dir .map .town, .has-dir .map .hub, .has-dir .map .ic-out { opacity: .4; }
.tt h2.sr { font-size: 22px; margin-top: 26px; }
.systems .sv { display: block; color: var(--dim); font-size: 14px; margin-top: 2px; }

/* New York, up close: weight by where Rob lived and worked; the rest fades. */
.map .closeup .cl { fill: none; stroke: #9aa1ab; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.map .closeup .cl.core { stroke: var(--face); stroke-width: 15; }
.map .closeup .walk { stroke: var(--dim); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; fill: none; }
.map .closeup .walklab { fill: var(--dim); font-size: 15px; font-style: italic; }
.map .closeup .bullet circle { fill: var(--face); }
.map .closeup .bullet text { fill: var(--ink); font-size: 20px; font-weight: 700; text-anchor: middle; }
.map .m-lived { fill: var(--ink); stroke: var(--face); stroke-width: 5; }
.map .m-lived-in { fill: var(--face); }
.map .m-worked { fill: var(--face); stroke: var(--ink); stroke-width: 3; }
.map .m-pass { fill: var(--ink); stroke: var(--face); stroke-width: 3; }
.map .cstn text { fill: var(--face); font-size: 17px; }
.mapwrap[data-view="nyc"] .map { min-width: 1000px; }
.mapwrap[data-view="all"] .map { min-width: 1800px; }

/* Hong Kong and Macau (preview only): fiction spines, the ferry, Tom Savage. */
.map .asia .spine { fill: none; stroke: #9aa1ab; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.map .asia .spine-ribs { fill: none; stroke: #9aa1ab; stroke-width: 34; stroke-dasharray: 3 22; stroke-linejoin: round; opacity: .8; }
.map .asia .spine-name { fill: var(--face); font-style: normal; font-family: var(--serif); font-size: 24px; }
.map .asia .ferry { fill: none; stroke: var(--face); stroke-width: 3; stroke-dasharray: 10 8; }
.mapwrap[data-view="asia"] .map { min-width: 1000px; }

/* ---------- The globe ---------- */
.globe { margin: 0 0 30px; }
.gwrap { position: relative; margin: 0 calc(-1 * var(--gutter)) 0 0; }
.gstage { position: relative; background: #000; border: 1px solid var(--rule); overflow: hidden; }
@media (max-width: 759px) { .gwrap { margin: 0 calc(-1 * var(--gutter)); } .gstage { border-left: 0; border-right: 0; } }
#globe { display: block; touch-action: none; cursor: grab; }
#globe:active { cursor: grabbing; }
#globe:focus-visible { outline: 2px solid var(--face); outline-offset: -2px; }
.ghud { position: absolute; left: 12px; bottom: 12px; display: flex; }
.gz {
  font: inherit; font-size: 15px; min-width: 38px; height: 38px; margin-right: 6px; padding: 0 10px;
  background: rgba(0,0,0,.72); color: var(--face); border: 1px solid var(--rule); cursor: pointer;
}
.gpanel {
  position: absolute; right: 12px; top: 12px; width: 300px; max-width: calc(100% - 24px); max-height: calc(100% - 24px);
  overflow-y: auto; background: rgba(0,0,0,.82); border: 1px solid var(--rule); padding: 0 16px 12px;
  opacity: 0; pointer-events: none; transition: opacity 240ms linear;
}
.gpanel.open { opacity: 1; pointer-events: auto; }
@media (max-width: 599px) {
  .gpanel { position: static; width: auto; max-width: none; max-height: none; border-left: 0; border-right: 0; opacity: 1; pointer-events: auto; display: none; }
  .gpanel.open { display: block; }
}
.gcard h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 4px 0 8px; }
.gcard .sect { color: var(--dim); font-size: 13px; margin: 12px 0 4px; }
.gcard ul { list-style: none; padding: 0; margin: 0; }
.gcard .gsys li { padding: 3px 0; font-size: 15px; }
.gcard .gstops li { margin: 2px 0; }
.gcard .gmarks li { padding: 2px 0; font-size: 15px; color: var(--dim); }
.gcard .gmarks li.heavy { color: var(--face); font-weight: 600; }
.gstop, .gboard {
  font: inherit; font-size: 15px; background: none; color: var(--face); border: 0; padding: 3px 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
.gboard { border: 1px solid var(--face); text-decoration: none; padding: 6px 12px; margin-top: 6px; }
.gcities { display: flex; flex-wrap: wrap; margin-top: 14px; }
.gcredit { color: var(--dim); font-size: 12px; margin: 10px 0 0; }
.ggroup { margin: 0 34px 10px 0; }
.ggroup h3 { font-size: 14px; color: var(--dim); font-weight: 600; margin: 0 0 6px; }
.ggroup p { margin: 0; display: flex; flex-wrap: wrap; max-width: 40rem; }
.gcity {
  font: inherit; font-size: 14px; background: var(--ink); color: var(--dim); border: 1px solid var(--rule);
  padding: 5px 10px; margin: 0 6px 6px 0; cursor: pointer;
}
.gcity.w2 { color: var(--face); }
.gcity.w3 { color: var(--face); border-color: var(--face); font-weight: 600; }
.gcity[aria-pressed="true"] { background: var(--face); color: var(--ink); }
.boards-h { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 34px 0 10px; }

/* Immersive CV. Rob authorized a freer visual direction on 20 Oct 2026.
   The original portfolio shell and the one-page CV keep their own layout. */
.atlas-page { --face: #eeeae2; --dim: #a5b0b2; --rule: #263136; background: #05090b; }
.atlas-page button, .atlas-page a { -webkit-tap-highlight-color: transparent; }
.atlas-page a:focus-visible, .atlas-page button:focus-visible, .atlas-page summary:focus-visible { outline: 2px solid #f5c518; outline-offset: 5px; }
.atlas-page .atlas-skip { position: fixed; top: -80px; left: 20px; z-index: 30; padding: 12px 20px; background: var(--face); color: #000; }
.atlas-page .atlas-skip:focus { top: 12px; }
.atlas-nav { min-height: 76px; padding: 0 4.5%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #243034; background: #05090b; }
.atlas-wordmark { display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-decoration: none; }
.wordmark-note { color: #8a999d; font-size: 10px; margin-left: 14px; letter-spacing: .13em; }
.spectrum-mark { width: 22px; height: 22px; margin-right: 12px; border-radius: 50%; background: conic-gradient(var(--r) 0deg 51deg, var(--o) 51deg 103deg, var(--y) 103deg 154deg, var(--g) 154deg 206deg, var(--b) 206deg 257deg, var(--i) 257deg 309deg, var(--v) 309deg); box-shadow: inset 0 0 0 7px #05090b; }
.atlas-links { display: flex; align-items: center; gap: 30px; font-size: 13px; }
.atlas-links a { text-decoration: none; color: #b4bfc1; }
.atlas-links a:hover { color: #fff; }
.atlas-links .contact-link { padding: 9px 14px; border: 1px solid #405056; color: var(--face); }
.atlas-page .mapcv { padding: 0; }
.atlas-page .journey-hero { margin: 0; position: relative; background: #030608; }
.atlas-page .gwrap { margin: 0; }
.atlas-page .gstage { border: 0; background: radial-gradient(ellipse at 72% 50%, #0c1920, #030608 68%); }
.atlas-page #globe { position: relative; z-index: 1; }
.hero-shade { position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, #030608 0%, rgba(3,6,8,.80) 24%, rgba(3,6,8,.05) 55%, transparent 65%); pointer-events: none; }
.hero-chrome { position: absolute; z-index: 3; top: 30px; left: 4.5%; right: 4.5%; display: flex; justify-content: space-between; align-items: center; font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .18em; color: #99aeb6; pointer-events: none; }
.hero-chrome i { display: inline-block; width: 5px; height: 5px; background: #a5c7bb; border-radius: 50%; margin-right: 10px; box-shadow: 0 0 12px #80a99a; }
.atlas-page .mhead { position: absolute; z-index: 4; top: 19%; left: 6%; width: 42%; max-width: 580px; transition: opacity 350ms ease; }
.hero-kicker { font-size: 11px; letter-spacing: .19em; color: #ccd2cc; margin: 0 0 28px; }
.hero-kicker span { color: #73858b; }
.atlas-page .mhead h1 { font-size: clamp(64px, 7.7vw, 126px); letter-spacing: -.055em; line-height: .96; margin: 0 0 30px; font-weight: 400; }
.atlas-page .mhead h1 span { display: block; }
.hero-tagline { font-size: 19px; line-height: 1.55; color: #b0c0c5; max-width: 360px; margin: 0 0 30px; }
.hero-start { display: inline-flex; align-items: center; justify-content: space-between; min-width: 215px; padding: 13px 0; border-bottom: 1px solid #96b3b9; color: #e9e8de; font-size: 14px; text-decoration: none; }
.hero-start span { font-size: 23px; margin-left: 40px; transition: transform 180ms ease; }
.hero-start:hover span { transform: translateY(4px); }
.hero-note { font-size: 11px; letter-spacing: .03em; color: #809297; margin-top: 22px; }
.hero-note span { margin: 0 7px; }
.atlas-page .ghud { z-index: 5; left: 4.5%; right: 4.5%; bottom: 24px; align-items: center; justify-content: space-between; pointer-events: none; }
.atlas-page .ghud > div { display: flex; pointer-events: auto; }
.globe-help { font-size: 11px; color: #859ba4; letter-spacing: .04em; }
.globe-help span { margin: 0 10px; }
.atlas-page .gz { background: #0b151bcc; border-color: #34454c; height: 44px; min-width: 44px; margin: 0 0 0 6px; font-size: 13px; }
.atlas-page .gz[data-z="home"] { min-width: 130px; }
.atlas-page .gz:hover { border-color: #a4bcc3; }
.explore-context { position: absolute; z-index: 3; top: 85px; left: 4.5%; font-family: var(--serif); font-size: 40px; pointer-events: none; opacity: 0; max-width: 42%; line-height: 1.1; transition: opacity 250ms ease; }
.exploring .mhead { opacity: 0; visibility: hidden; pointer-events: none; }
.exploring .hero-shade { opacity: 0; }
.exploring .explore-context { opacity: 1; }
.atlas-page .gpanel { z-index: 7; right: 4.5%; top: 120px; width: 330px; max-height: calc(100% - 200px); background: #0a1217f5; border: 1px solid #3b4f59; border-top: 2px solid #96b3b9; padding: 20px 24px; box-shadow: 0 22px 90px #0008; visibility: hidden; }
.atlas-page .gpanel.open { visibility: visible; }
.close-city { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; background: none; border: 0; color: var(--dim); font: inherit; font-size: 26px; cursor: pointer; }
.atlas-page .gcard h3 { font-size: 34px; padding-right: 18px; }
.atlas-page .gcard .sect { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; margin-top: 22px; }
.atlas-page .gstop { padding: 8px 0; font-size: 14px; text-decoration-color: #45565c; }
.atlas-page .gboard { padding: 11px 14px; font-size: 13px; border-color: #5b727c; }
.route-deck, .places-section, .schematic-section { padding: 70px 6%; scroll-margin-top: 18px; }
.route-deck { background: #0b1114; border-top: 1px solid #344148; }
.section-intro { position: relative; margin-bottom: 34px; }
.section-number, .route-label { font-size: 10px; font-weight: 600; letter-spacing: .17em; color: #94a8af; margin: 0 0 14px; }
.section-intro h2 { font-family: var(--serif); font-size: clamp(30px, 3.8vw, 54px); font-weight: 400; letter-spacing: -.035em; line-height: 1.15; margin: 0 0 14px; }
.section-intro > p:last-child { margin: 0; font-size: 15px; color: #9bafb6; }
.atlas-page .dirs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0 0 44px; border-top: 1px solid #34434a; border-bottom: 1px solid #34434a; }
.atlas-page .dir { position: relative; margin: 0; min-height: 98px; border: 0; border-right: 1px solid #34434a; border-radius: 0; background: transparent; padding: 17px 14px; text-align: left; color: var(--face); }
.atlas-page .dir:last-child { border-right: 0; }
.atlas-page .dir::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: var(--hue); opacity: .45; transition: opacity 200ms ease; }
.atlas-page .dir:hover, .atlas-page .dir[aria-pressed="true"] { background: #172127; }
.atlas-page .dir[aria-pressed="true"]::after { opacity: 1; height: 4px; }
.atlas-page .dir .sw { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: none; border: 1px solid var(--hue); color: var(--hue); font-size: 11px; font-weight: 600; margin-right: 11px; }
.atlas-page .dir[aria-pressed="true"] .sw { background: var(--hue); color: #000; box-shadow: 0 0 22px -8px var(--hue); }
.dir-copy { display: block; flex: 1; }
.atlas-page .dir .dn { display: block; font-size: 14px; line-height: 1.3; }
.atlas-page .dir .dc { display: block; font-size: 11px; color: #93a6ac; margin: 7px 0 0; letter-spacing: .02em; }
.dir-arrow { font-size: 16px; margin-left: 5px; color: var(--hue); }
.atlas-page .board { gap: 50px; min-height: 440px; }
.atlas-page .board .side { flex: 0 0 29%; margin: 0; }
.atlas-page .tt h2 { font-family: var(--sans); font-size: 23px; font-weight: 500; border: 0; padding: 0; margin: 0 0 16px; letter-spacing: -.03em; }
.atlas-page .tt .lede-dir { font-size: 14px; line-height: 1.7; color: #9bafb6; margin-bottom: 26px; }
.atlas-page .tt ol { margin-left: 9px; padding-left: 12px; border-left-width: 1px; }
.atlas-page .tt li button { padding: 12px 0 12px 16px; }
.atlas-page .tt li button::before { left: -18px; top: 19px; width: 7px; height: 7px; border: 2px solid #a9b7b9; background: #0b1114; }
.atlas-page .tt li[aria-current] button::before { border-color: var(--hue); background: var(--hue); box-shadow: 0 0 12px -2px var(--hue); }
.atlas-page .tt .tn { font-size: 15px; }
.atlas-page .tt .tw { font-size: 11px; margin-top: 3px; color: #91a6ae; }
.atlas-page .tt li[aria-current] .tn { color: var(--hue); font-weight: 500; }
.atlas-page .board .dossier { max-width: none; border: 1px solid #2c3b43; border-top: 2px solid var(--hue, #53696f); background: #0e181e; padding: 32px 42px; scroll-margin-top: 24px; }
.atlas-page .dos h3 { font-size: clamp(29px, 3.1vw, 45px); letter-spacing: -.03em; line-height: 1.12; margin: 14px 0 17px; max-width: 720px; }
.atlas-page .dos .sect { margin-top: 0; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.atlas-page .dos .when { color: var(--hue, var(--dim)); font-size: 13px; font-weight: 500; }
.atlas-page .dos .where { font-size: 13px; margin: 4px 0 25px; }
.atlas-page .dos > p:not(.sect):not(.when):not(.where) { line-height: 1.85; font-size: 16px; color: #bac9cd; }
.atlas-page .dos li { line-height: 1.75; font-size: 15px; margin: 10px 0; color: #bac9cd; }
.atlas-page .dos.empty { padding-top: 26px; }
.atlas-page .dos.empty h3 { font-size: 43px; }
.atlas-page .dos.empty p { max-width: 400px; }
.empty-route { display: flex; align-items: center; width: 200px; height: 35px; margin-bottom: 22px; position: relative; }
.empty-route::before { content: ""; height: 1px; position: absolute; left: 0; right: 0; top: 17px; background: #60757c; }
.empty-route span { position: relative; width: 9px; height: 9px; border: 1px solid #93adb5; border-radius: 50%; background: #0e181e; margin-right: 36px; }
.empty-route span:last-child { margin-right: 0; border-color: var(--face); background: var(--face); }
.atlas-page .ride { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; border-top: 1px solid #32434b; padding-top: 22px; margin-top: 32px; }
.atlas-page .ride[hidden] { display: none; }
.ride-position { font-size: 10px; color: #93a7b0; letter-spacing: .15em; }
.atlas-page .ride button { font-size: 12px; min-height: 44px; background: transparent; margin: 0 0 0 8px; border-color: #3f555e; padding: 9px 12px; }
.text-link { font-size: 13px; text-decoration-color: #678089; }
.places-section { background: #050b0f; border-bottom: 1px solid #293b43; }
.atlas-page .gcities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 46px; margin: 0; }
.atlas-page .ggroup { margin: 0; }
.atlas-page .ggroup h3 { font-size: 11px; letter-spacing: .1em; color: #93abb4; font-weight: 400; margin-bottom: 18px; }
.atlas-page .ggroup p { max-width: none; }
.atlas-page .gcity { font-size: 14px; padding: 10px 13px; margin: 0 8px 8px 0; min-height: 44px; background: none; border: 1px solid #2a3b44; color: #b4c6ce; }
.atlas-page .gcity.w3 { border-color: #59737f; color: #e4eff0; font-weight: 500; }
.atlas-page .gcity:hover { background: #14232c; color: #fff; }
.atlas-page .gcity[aria-pressed="true"] { background: #b7d1d8; color: #091015; }
.atlas-page .gcredit { margin-top: 30px; max-width: 750px; font-size: 10px; line-height: 1.6; }
.schematic-section { background: #080d11; }
.atlas-page .views { margin-bottom: 15px; }
.atlas-page .view { font-size: 13px; padding: 10px 17px; min-height: 44px; background: transparent; border-color: #34454e; }
.atlas-page .view[aria-pressed="true"] { background: #dee6e6; color: #071015; border-color: #dee6e6; }
.atlas-page .mapwrap { margin: 0; border: 1px solid #34454e; background: #080d11; }
.atlas-page .maphint { font-size: 11px; margin: 14px 0 30px; }
.system-ledger { border-top: 1px solid #293b43; border-bottom: 1px solid #293b43; padding: 20px 0; }
.system-ledger summary { cursor: pointer; font-size: 14px; }
.system-ledger summary span { color: #8ba0a9; font-size: 11px; margin-left: 16px; }
.system-columns { columns: 3; column-gap: 36px; margin: 28px 0; }
.system-columns h3 { font-size: 12px; color: #9cb2bb; margin-top: 0; }
.system-columns ul { break-inside: avoid; margin-bottom: 24px; font-size: 14px; }
.system-columns .systems .sf, .system-columns .systems .sw2, .system-columns .systems .sv { font-size: 12px; }
.atlas-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 35px 6%; border-top: 1px solid #293b43; color: #94a8b1; font-size: 12px; }
.atlas-footer .atlas-wordmark { color: #d2dedf; font-size: 12px; }
.atlas-footer a:last-child { text-decoration: none; }
@media (min-width: 1500px) { .atlas-page .mhead { top: 20%; } }
@media (max-width: 1100px) {
  .wordmark-note, .atlas-links .contact-link { display: none; }
  .atlas-links { gap: 20px; }
  .atlas-page .dir { padding: 14px 10px; }
  .atlas-page .dir .sw { width: 25px; height: 25px; margin-right: 8px; font-size: 10px; }
  .atlas-page .dir .dn { font-size: 12px; }
  .dir-arrow { display: none; }
  .atlas-page .board { gap: 28px; }
  .atlas-page .board .dossier { padding: 28px; }
}
@media (min-width: 760px) and (max-width: 899px) {
  .atlas-page .board { display: flex; }
  .atlas-page .board .side { flex-basis: 32%; }
  .atlas-page .mhead { top: 22%; }
  .hero-tagline { font-size: 17px; max-width: 270px; }
}
@media (max-width: 759px) {
  .atlas-nav { padding: 0 6%; min-height: 64px; }
  .atlas-wordmark { font-size: 11px; letter-spacing: .08em; }
  .spectrum-mark { width: 18px; height: 18px; box-shadow: inset 0 0 0 6px #05090b; margin-right: 8px; }
  .atlas-links { font-size: 11px; }
  .atlas-links a[href^="#"] { display: none; }
  .hero-chrome { top: 22px; left: 6%; right: 6%; font-size: 8px; letter-spacing: .12em; }
  .hero-chrome .globe-position { font-size: 8px; }
  .atlas-page .mhead { top: 66px; left: 6%; width: 88%; max-width: none; }
  .hero-kicker { font-size: 9px; margin-bottom: 17px; }
  .atlas-page .mhead h1 { font-size: clamp(55px, 12vw, 88px); margin-bottom: 18px; }
  .atlas-page .mhead h1 span { display: inline; }
  .atlas-page .mhead h1 span::before { content: " "; }
  .hero-tagline { font-size: 15px; max-width: 310px; margin-bottom: 10px; }
  .hero-start { min-width: 180px; font-size: 12px; padding: 8px 0; }
  .hero-start span { font-size: 18px; }
  .hero-note { display: none; }
  .hero-shade { background: linear-gradient(180deg, #030608 0%, rgba(3,6,8,.85) 25%, transparent 52%); }
  .atlas-page .ghud { left: 6%; right: 6%; bottom: 18px; }
  .globe-help { max-width: 95px; font-size: 10px; }
  .globe-help span { display: none; }
  .atlas-page .gz { font-size: 11px; }
  .atlas-page .gz[data-z="home"] { min-width: 100px; }
  .explore-context { top: 68px; font-size: 29px; max-width: 85%; left: 6%; }
  .atlas-page .gpanel { position: absolute; left: 6%; right: 6%; top: auto; bottom: 78px; width: auto; max-width: none; max-height: 46%; margin: 0; display: none; padding: 20px; }
  .atlas-page .gpanel.open { display: block; }
  .route-deck, .places-section, .schematic-section { padding: 45px 6%; }
  .section-intro { margin-bottom: 26px; }
  .section-number { font-size: 9px; }
  .section-intro > p:last-child { font-size: 13px; }
  .atlas-page .dirs { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 0; margin-bottom: 30px; scroll-snap-type: x proximity; }
  .atlas-page .dir { flex: 0 0 172px; min-height: 80px; scroll-snap-align: start; padding: 14px 10px; }
  .atlas-page .dir .dn { font-size: 13px; }
  .atlas-page .dir .sw { width: 27px; height: 27px; }
  .atlas-page .board { display: block; }
  .atlas-page .board .side { margin-bottom: 26px; }
  .atlas-page .tt ol { display: flex; overflow-x: auto; overflow-y: hidden; border-left: 0; border-top: 1px solid var(--hue); margin: 0; padding: 12px 0 6px; }
  .atlas-page .dirs::-webkit-scrollbar, .atlas-page .tt ol::-webkit-scrollbar { height: 3px; }
  .atlas-page .dirs::-webkit-scrollbar-thumb, .atlas-page .tt ol::-webkit-scrollbar-thumb { background: #6b858d; }
  .atlas-page .tt li { flex: 0 0 155px; }
  .atlas-page .tt li button { padding: 10px 14px 10px 0; }
  .atlas-page .tt li button::before { left: 0; top: -17px; }
  .atlas-page .tt .tn { font-size: 13px; }
  .atlas-page .tt .tw { font-size: 10px; }
  .atlas-page .tt .lede-dir { font-size: 13px; }
  .atlas-page .board .dossier { padding: 25px 22px; }
  .atlas-page .dos.empty h3 { font-size: 32px; }
  .atlas-page .dos > p:not(.sect):not(.when):not(.where) { font-size: 15px; line-height: 1.8; }
  .atlas-page .ride { gap: 12px; }
  .atlas-page .ride button { margin-left: 0; margin-right: 6px; }
  .atlas-page .gcities { display: block; }
  .atlas-page .ggroup { margin-bottom: 25px; }
  .atlas-page .gcity { font-size: 12px; padding: 9px 12px; }
  .atlas-page .mapwrap { margin: 0 -6.82%; border-left: 0; border-right: 0; }
  .atlas-page .view { font-size: 12px; padding: 9px 12px; }
  .system-columns { columns: 1; }
  .system-ledger summary span { display: block; margin: 6px 0 0 18px; }
  .atlas-footer { flex-direction: column; align-items: flex-start; padding: 28px 6%; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-page *, .atlas-page *::before, .atlas-page *::after { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .atlas-nav, .journey-hero, .atlas-page .dirs, .places-section, .schematic-section, .atlas-footer, .atlas-page .side { display: none !important; }
  .atlas-page .route-deck { padding: 0; border: 0; background: #fff; }
  .atlas-page .board .dossier { border: 0; padding: 0; background: #fff; }
  .atlas-page .dos { break-inside: avoid; margin-bottom: 30px; }
  .atlas-page .dos.empty { display: none !important; }
  .atlas-page .ride { display: none !important; }
  .atlas-page .dos h3, .atlas-page .dos p, .atlas-page .dos li { color: #000 !important; }
}

.place-key { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 11px; color: #a6bdc5; margin: 0 0 30px; }
.world-deck { padding: 42px 6% 30px; background: #081219; border-top: 1px solid #30434e; border-bottom: 1px solid #30434e; }
.world-heading { display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; margin-bottom: 25px; }
.world-heading h2 { font-family: var(--serif); font-size: 33px; font-weight: 400; margin: 0; }
.world-heading p { font-size: 12px; color: #adc0c7; margin: 0; }
.world-heading .section-number { font-size: 9px; letter-spacing: .14em; }
.hub-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid #344954; border-left: 1px solid #344954; }
.ghub { font: inherit; text-align: left; background: #0b1820; color: #e1edef; border: 0; padding: 22px 24px; cursor: pointer; min-width: 0; border-bottom: 1px solid #344954; border-right: 1px solid #344954; position: relative; }
.ghub::before { content: ''; position: absolute; top: 23px; bottom: 23px; left: 0; width: 2px; background: var(--hue); opacity: .75; }
.ghub:hover, .ghub[aria-pressed="true"] { background: #182a34; }
.hub-place { display: block; color: #a8bdc7; font-size: 10px; line-height: 1.5; margin: 0 0 10px; }
.hub-name { display: flex; justify-content: space-between; gap: 15px; font-family: var(--serif); font-size: 27px; line-height: 1.15; }
.hub-name > span { font-family: var(--sans); color: var(--hue); font-size: 17px; }
.home-anchors { display: flex; align-items: center; gap: 20px; padding-top: 28px; }
.home-anchors > span:first-child { font-size: 9px; color: #9db3bd; letter-spacing: .08em; }
.home-anchors > span:first-child span { padding: 0 9px; }
.atlas-page .home-anchors .gcity { border: 0; font-size: 19px; margin: 0; padding: 8px 6px; color: #e3edef; text-align: left; }
.home-anchors .gcity::before { content: '◉'; padding-right: 9px; font-size: 14px; }
.home-anchors small { display: block; color: #9bb5c1; font-size: 10px; margin-left: 25px; padding-top: 5px; }
.anchor-track { width: 45px; height: 2px; background: #839ca8; }
.city-anchor { display: block; font-size: 10px; opacity: .75; margin-top: 5px; }
.hub-related { display: block; width: 100%; margin: 12px 0; border: 1px solid #334b58; padding: 14px; }
.hub-related .hub-name { font-size: 22px; }
.hub-related .hub-place { display: none; }
.hub-card h3 { color: var(--hue); }
.atlas-page #hub-enterprise h3 { font-size: 28px; letter-spacing: -.03em; }
.hub-action { display: block; width: 100%; color: #c8dce4; background: none; border: 0; border-bottom: 1px solid #2b424e; text-align: left; font: inherit; font-size: 13px; padding: 13px 0; cursor: pointer; text-decoration: none; }
.hub-action:hover { color: #fff; }
.atlas-page .hub-cities .gcity { font-size: 12px; padding: 8px 10px; margin: 0 5px 6px 0; }
.place-history { margin: 18px 0; font-size: 12px; color: #a9bec7; }
.place-history summary { cursor: pointer; min-height: 30px; color: #d0dfe4; }
.place-history p { font-size: 12px; line-height: 1.7; }
.place-history a { font-size: 10px; white-space: nowrap; }
.map .town.hometown circle { stroke-width: 3; }
.map .town.hometown text { font-weight: 650; font-size: 17px; }
@media (max-width:759px) {
  .world-deck { padding: 30px 6%; }
  .world-heading { display: block; }
  .world-heading h2 { font-size: 29px; margin: 12px 0; }
  .hub-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ghub { padding: 18px 14px; }
  .hub-name { font-size: 22px; gap: 8px; }
  .ghub[data-hub="enterprise"] .hub-name { font-size: clamp(17px,4.4vw,22px); letter-spacing: -.02em; }
  .hub-place { font-size: 9px; min-height: 28px; }
  .hub-name > span { display: none; }
  .home-anchors { gap: 12px; flex-wrap: wrap; }
  .home-anchors > span:first-child { flex: 0 0 100%; line-height: 1.8; }
  .atlas-page .home-anchors .gcity { font-size: 17px; }
  .anchor-track { width: 22px; }
}
.atlas-page .gcity.family { border-style: dashed; }
.atlas-page .gcity.visited-family { border-style: double; border-width: 3px; padding: 8px 11px; }
.place-connection { font-size: 11px; color: #b4cfd6; letter-spacing: .04em; margin: 0 0 12px; }
.place-note { font-size: 14px; color: #c9d6d9; line-height: 1.6; margin: 10px 0 18px; }

.map-layers { position: absolute; z-index: 5; right: 4.5%; top: 64px; }
.map-layers button { display: flex; align-items: center; min-height: 38px; padding: 8px 12px; background: #0b151be6; color: #b5c7ce; border: 1px solid #34454c; font: inherit; font-size: 11px; cursor: pointer; }
.map-layers button[aria-pressed="true"] { color: #a0dfeb; border-color: #517984; }
.flight-swatch { width: 24px; height: 0; border-top: 1px dashed currentColor; margin-right: 9px; }
.flight-ledger { margin-top: 35px; border-top: 1px solid #34454e; border-bottom: 1px solid #34454e; padding: 20px 0; }
.flight-ledger summary { cursor: pointer; font-size: 14px; }
.flight-ledger summary > span { font-size: 11px; color: #91a6af; margin-left: 18px; }
.flight-ledger > p { font-size: 12px; color: #a5bbc3; max-width: 640px; margin: 18px 0; }
.flight-ledger ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 32px; }
.gflight { width: 100%; min-height: 50px; display: grid; grid-template-columns: 1fr 25px 1fr; align-items: center; text-align: left; background: none; border: 0; border-bottom: 1px solid #26363e; color: #b7cbd4; font: inherit; font-size: 12px; padding: 10px 0; cursor: pointer; }
.gflight span:nth-child(2) { color: #8bd5df; }
.gflight[aria-pressed="true"] { color: #8bd5df; }
@media (max-width:759px) {
  .map-layers { top: auto; bottom: 78px; right: 6%; }
  .exploring .map-layers { top: 62px; bottom: auto; }
  .exploring .explore-context { top: 116px; }
  .flight-ledger ul { grid-template-columns: 1fr; }
  .flight-ledger summary > span { display: block; margin: 6px 0 0 18px; }
}

.atlas-modebar { display: flex; align-items: center; gap: 8px; padding: 12px 4.5%; border-bottom: 1px solid #354653; background: #080e16; }
.map-mode { font: inherit; font-size: 12px; padding: 10px 17px; background: transparent; border: 1px solid transparent; color: #9db3c3; cursor: pointer; min-height: 42px; }
.map-mode[aria-pressed="true"] { color: #f2e6d4; border-color: #7a6d69; background: #27242b; }
.mode-caption { margin-left: auto; color: #869bad; font-size: 11px; }
.gravity-lab[hidden], .journey-hero[hidden] { display: none !important; }
.gravity-stage { position: relative; background: #03060e; overflow: hidden; isolation: isolate; }
#gravity-canvas { display: block; width: 100%; touch-action: pan-y; }
.gravity-heading { position: absolute; left: 5%; top: 62px; max-width: 370px; pointer-events: none; }
.gravity-heading .section-number { font-size: 10px; color: #c4aecb; letter-spacing: .18em; }
.gravity-heading h2 { font-family: var(--serif); font-size: clamp(40px,4.3vw,67px); line-height: 1.01; letter-spacing: -.035em; font-weight: 400; margin: 24px 0; text-shadow: 0 3px 30px #03060e; }
.gravity-heading h2 em { color: #e6b989; font-style: normal; }
.gravity-heading > p:last-child { max-width: 260px; font-size: 13px; line-height: 1.7; color: #bbc0d0; text-shadow: 0 2px 10px #000; }
.gravity-controls { position: absolute; top: 24px; right: 4.5%; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; color: #b5c3d8; font-size: 11px; }
.gravity-controls label { display: flex; align-items: center; gap: 9px; }
.constellation-nav { position: absolute; top: 470px; left: 5%; width: 240px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.constellation-nav button { text-align: left; background: #0a1222de; border: 1px solid #6a607b; color: #ead9c7; padding: 10px; font: inherit; font-size: 12px; cursor: pointer; }
.constellation-nav small { display: block; color: #adbbd1; font-size: 8px; margin-top: 5px; line-height: 1.4; }
.constellation-nav button:hover { border-color: #edcca2; background: #293044; }
.southasia-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #080e18; padding: 24px 5%; border-top: 1px solid #344354; }
.southasia-nav > span { font-size: 9px; letter-spacing: .12em; color: #bdacc9; margin-right: 18px; }
.southasia-nav button { background: #101a2b; color: #e1d4c7; border: 1px solid #4f536d; padding: 12px; font: inherit; font-size: 12px; cursor: pointer; }
.southasia-nav small { display: block; font-size: 9px; color: #aebed0; margin-top: 5px; }
.ancestry-nav { border-color: #7a644c; }
.ancestry-nav > span, .ancestry-nav button { color: #e3bf94; }
.ancestry-nav > small { font-size: 10px; color: #c4b7a6; }
.lineage-deck { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); background: #12151c; padding: 32px 5%; gap: 32px; border-top: 1px solid #79634a; }
.lineage-card { border-left: 1px solid #b19675; padding-left: 22px; }
.lineage-card > p:first-child { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #c5ad91; }
.lineage-card h3 { font: 32px var(--serif); margin: 14px 0; color: #ebd2ae; }
.lineage-card p { font-size: 11px; line-height: 1.7; color: #b2bbcb; }
.lineage-card .family-names { font-size: 15px; color: #e2d3c2; }
.lineage-card .ancestry-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.lineage-card button { background: #1b2330; color: #e9d4b6; border: 1px solid #7d705f; padding: 10px; font: inherit; font-size: 11px; cursor: pointer; }
.wine-world-picker { padding: 24px 5%; background: #101421; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; border-top: 1px solid #41405a; }
.wine-world-picker label { font-size: 9px; letter-spacing: .12em; color: #d4b9d8; }
.wine-world-picker select { min-width: 220px; max-width: 100%; padding: 12px; background: #0a101d; color: #d8ddec; font: inherit; font-size: 12px; border: 1px solid #625573; }
.wine-world-picker details { color: #aebbd1; font-size: 11px; max-width: 650px; line-height: 1.7; }
.wine-world-picker a { color: #d6b9da; }
.gravity-controls input { width: 100px; accent-color: #e1b78f; }
.gravity-controls select, .gravity-controls button { background: #0c1523e6; color: #d1dce8; border: 1px solid #536179; font: inherit; padding: 8px 10px; min-height: 38px; }
.gravity-readout { position: absolute; right: 4.5%; bottom: 82px; width: 295px; padding: 24px; border: 1px solid #7f695e; border-top: 2px solid #efc79b; background: #080d18ed; box-shadow: 0 16px 60px #0007; }
.gravity-rank { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #e0b792; margin: 0 0 12px; }
.gravity-readout h3 { font-family: var(--serif); font-size: 36px; letter-spacing: -.025em; margin: 0 0 14px; font-weight: 400; }
.gravity-readout > p:not(.gravity-rank) { font-size: 11px; color: #aabbd0; line-height: 1.7; }
.gravity-readout label { display: flex; align-items: center; gap: 10px; font-size: 10px; margin: 16px 0; color: #b2c4d6; }
.gravity-readout select { min-width: 0; max-width: 100%; color: #dce5f1; background: #101d2c; border: 1px solid #536277; font: inherit; padding: 9px; }
.gravity-readout a { font-size: 11px; color: #efd2b2; }
.gravity-legend { position: absolute; bottom: 20px; left: 5%; display: flex; flex-wrap: wrap; gap: 12px 25px; font-size: 10px; color: #b3bed0; }
.gravity-model { padding: 65px 6%; background: #080e18; border-top: 1px solid #344354; }
.gravity-model .section-intro { padding: 0; }
.gravity-model h2 { font-family: var(--serif); font-size: clamp(32px,4vw,52px); font-weight: 400; margin: 16px 0; }
.gravity-model .section-intro > p:last-child { font-size: 14px; color: #aebed0; }
.gravity-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 35px 0 40px; border: 1px solid #344658; }
.gravity-metrics > div { padding: 24px; border-right: 1px solid #344658; }
.gravity-metrics > div:last-child { border: 0; }
.gravity-metrics span { display: block; color: #a3afc5; font-size: 9px; letter-spacing: .09em; }
.gravity-metrics strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 32px; margin: 15px 0 8px; color: #e8ccaa; }
.gravity-metrics small { font-family: var(--sans); font-size: 10px; color: #a4b9cd; }
.gravity-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.model-small-title { font-family: var(--sans); font-size: 18px; font-weight: 500; margin: 0 0 12px; }
.model-caption { color: #a1b3c7; font-size: 12px; line-height: 1.7; margin: 12px 0 24px; }
.gravity-city { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 28px 1fr 42px; gap: 12px; align-items: center; width: 100%; min-height: 50px; padding: 12px 16px; border: 0; border-bottom: 1px solid #334252; background: transparent; color: #d7e3eb; text-align: left; font: inherit; font-size: 14px; cursor: pointer; }
.gravity-city::before { content: ''; position: absolute; z-index: -1; left: 0; bottom: 0; top: 0; width: var(--pull); background: linear-gradient(90deg,#314461aa,#18243755); }
.gravity-city[aria-pressed="true"]::before { background: linear-gradient(90deg,#73533c99,#67493422); }
.gravity-city[aria-pressed="true"] { outline: 1px solid #b8946b; outline-offset: -1px; color: #ffe3be; }
.gravity-city span { font-size: 11px; color: #b4c0ce; }
.gravity-city strong { font-weight: 400; }
.gravity-score { text-align: right; }
.gravity-inputs > label, .model-pair label { display: block; font-size: 11px; color: #b3c3d5; margin-bottom: 20px; line-height: 1.6; }
.gravity-inputs input:not([type="checkbox"]), .gravity-inputs select { display: block; width: 100%; min-width: 0; margin-top: 8px; padding: 10px 12px; background: #0e1b2a; border: 1px solid #3f536c; border-radius: 0; color: #e7eaf0; font: inherit; font-size: 14px; min-height: 42px; }
.gravity-inputs input[type="range"] { padding: 0; border: 0; background: none; accent-color: #dcb78b; }
.gravity-inputs output { color: #e7c59e; }
.model-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; }
.model-capacity { border-top: 1px solid #344658; border-bottom: 1px solid #344658; padding: 20px 0; margin: 25px 0; }
.model-capacity summary, .model-method summary { cursor: pointer; font-size: 13px; color: #d1dfeb; }
.model-capacity p { font-size: 12px; color: #a9bdd1; line-height: 1.7; }
.model-check { display: flex; gap: 10px; font-size: 12px; color: #cbd7e4; }
.model-check input { width: 17px; height: 17px; accent-color: #dfbb91; flex: 0 0 auto; }
.model-result { padding: 25px; border: 1px solid #786651; background: #29221e60; margin: 24px 0; }
.model-result > p { font-size: 12px; color: #c2cbd2; line-height: 1.7; }
.model-result strong { display: block; font-size: 34px; color: #f3d3a7; font-family: var(--serif); font-weight: 400; }
.model-result small { font-family: var(--sans); font-size: 11px; line-height: 1.7; color: #aebfd0; }
#model-reset { font: inherit; font-size: 12px; min-height: 44px; padding: 10px 16px; border: 1px solid #57687c; color: #dce4ef; background: none; cursor: pointer; }
.model-method { padding: 24px 0; border-top: 1px solid #344658; margin-top: 45px; }
.model-method > p { max-width: 900px; color: #aebed0; font-size: 13px; line-height: 1.8; }
.model-evidence { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin: 30px 0; }
.model-evidence section { border: 1px solid #344658; padding: 22px; }
.model-evidence h3 { font-size: 16px; font-weight: 500; margin-top: 0; }
.model-evidence h3 span { float: right; color: #e3c097; }
.model-evidence p, .model-evidence li { font-size: 12px; color: #aebed0; line-height: 1.8; }
.model-evidence ul { padding-left: 16px; }
.model-evidence li { margin-bottom: 12px; }
.model-evidence small { display: block; color: #8aa0b7; }
@media(max-width:1100px) {
  .hub-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gravity-columns { gap: 28px; }
  .gravity-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gravity-metrics > div { border-bottom: 1px solid #344658; }
  .gravity-heading { max-width: 300px; }
  .gravity-heading h2 { font-size: 44px; }
}
@media(max-width:759px) {
  .atlas-modebar { padding: 8px 5%; gap: 2px; }
  .map-mode { font-size: 11px; padding: 9px 12px; }
  .mode-caption { display: none; }
  .gravity-controls { top: 16px; right: 6%; left: 6%; gap: 8px 12px; font-size: 9px; }
  .gravity-controls input { width: 65px; }
  .gravity-controls select, .gravity-controls button { padding: 7px; min-height: 35px; }
  .gravity-heading { top: 95px; left: 6%; max-width: 88%; }
  .gravity-heading .section-number { font-size: 8px; }
  .gravity-heading h2 { font-size: 39px; margin: 16px 0; }
  .gravity-heading h2 br { display: none; }
  .gravity-heading h2 br::after { content:' '; }
  .constellation-nav { top: 330px; left: 6%; right: 6%; width: auto; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
  .constellation-nav button { font-size: 10px; padding: 8px 6px; }
  .constellation-nav small { font-size: 7px; }
  .gravity-heading > p:last-child { font-size: 11px; max-width: 250px; }
  .gravity-readout { width: auto; right: 6%; left: 6%; bottom: 83px; padding: 18px; }
  .gravity-readout h3 { font-size: 30px; }
  .gravity-legend { left: 6%; right: 6%; gap: 8px 12px; bottom: 14px; font-size: 9px; }
  .gravity-model { padding: 35px 6%; }
  .gravity-metrics > div { padding: 18px 14px; }
  .gravity-metrics strong { font-size: 26px; }
  .gravity-metrics span { font-size: 8px; }
  .gravity-columns, .model-evidence { grid-template-columns: 1fr; }
  .lineage-deck { grid-template-columns: 1fr; }
  .gravity-columns { gap: 45px; }
  .model-result strong { font-size: 30px; }
}

/* A digital starting point beside the geographic chapters. */
.hub-nav .ghub[data-hub="ai-progress"] { grid-column: 1 / -1; background: #101c25; }
.hub-nav .ghub[data-hub="ai-progress"]:hover,
.hub-nav .ghub[data-hub="ai-progress"][aria-pressed="true"] { background: #1a2c39; }
#hub-ai-progress .progress-source { color: var(--hue); font-weight: 600; }
.progress-stage { margin-top: 22px; }
.progress-stage h4 { margin: 0 0 8px; font-size: 12px; color: var(--hue); }
.progress-stage p, .progress-credit { font-size: 13px; line-height: 1.65; }
.gcard .progress-examples { margin: 18px 0; border-top: 1px solid #344954; }
.progress-examples li { padding: 10px 0; border-bottom: 1px solid #344954; }
.progress-examples strong { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #a8bdc7; }
.progress-examples span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.6; }
.progress-credit { color: #b4c5cb; }
.gcard .progress-ledger { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid #344954; }
.progress-ledger li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid #344954; font-size: 12px; line-height: 1.55; }
.progress-ledger .ledger-date { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #a8bdc7; padding-top: 2px; white-space: nowrap; }
.progress-ledger li.quiet { color: #8d989d; font-style: italic; }
.progress-ledger li.quiet .ledger-date { color: #8d989d; font-style: normal; }
.gcard .progress-ledger .ledger-place { display: inline; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-style: italic; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: #5b6a70; text-underline-offset: 3px; }
.gcard .progress-ledger .ledger-place:focus-visible { outline: 2px solid var(--hue); outline-offset: 2px; }
.place-obituary { margin: 16px 0 6px; padding-top: 10px; border-top: 1px solid #2c3438; }
.place-obituary p { font-size: 13px; line-height: 1.6; margin: 4px 0; }
.place-obituary .obit-source, .place-obituary cite { font-size: 11px; color: #a8b3b7; font-style: normal; }
.place-obituary a { color: inherit; }
@media(max-width:759px) {
  .hub-nav .ghub[data-hub="ai-progress"] .hub-place { min-height: 0; }
}

.hub-nav .ghub[data-hub="roots"] { grid-column: 1 / -1; }