@view-transition { navigation: auto; }

:root {
  --ground: #ebe9e3;
  --ground-2: #e2dfd7;
  --card: #fbfaf7;
  --ink: #151515;
  --ink-2: #4a4843;
  --line: #cdc9be;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --c: #151515;
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: -999px; background: var(--ink); color: var(--ground); padding: .5rem 1rem; font-size: 1rem; z-index: 60; }
.skip:focus { left: 1rem; top: 1rem; }

/* Top bar shared by every page */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; pointer-events: none; }
.bar > * { pointer-events: auto; }
.bar-name { font-family: var(--serif); font-size: 1.75rem; line-height: 1; background: var(--ground); padding: .35rem .7rem; border-radius: 999px; box-shadow: 0 1px 0 var(--line); transition: transform .3s var(--ease); }
.bar-name:hover { transform: translateY(-1px); }
.bar-nav { display: flex; gap: .25rem; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .25rem; }
.bar-nav a { padding: .35rem .8rem; border-radius: 999px; font-size: 1rem; transition: background .25s var(--ease), color .25s var(--ease); }
.bar-nav a:hover { background: var(--ground-2); }
.bar-nav a[aria-current="page"] { background: var(--ink); color: var(--card); }
@media (max-width: 34rem) { .bar-name { font-size: 1.35rem; } .bar-nav a { padding: .35rem .55rem; } .bar-nav a.opt { display: none; } }

/* Field: the pan and zoom canvas */
.field { position: fixed; inset: 0; overflow: hidden; touch-action: none; cursor: grab; background-color: var(--ground);
  background-image: radial-gradient(circle, #c4bfb2 1px, transparent 1.4px); background-size: 28px 28px; }
.field.dragging { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.cluster-head { position: absolute; width: 1020px; }
.cluster-head h2 { font-family: var(--serif); font-weight: 400; font-size: 64px; line-height: 1; margin: 0; color: var(--c); }
.cluster-head p { margin: .5rem 0 0; font-size: 22px; color: var(--ink-2); max-width: 44ch; }
.card { position: absolute; width: 320px; height: 262px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px -12px rgba(0, 0, 0, .18);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); }
.card:hover, .card:focus-visible { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 22px 40px -16px rgba(0, 0, 0, .3); border-color: var(--c); }
.card .thumb { height: 170px; background: var(--c); overflow: hidden; position: relative; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.card:hover .thumb img { transform: scale(1.04); }
.card .thumb figure, .tile .thumb figure { margin: 0; height: 100%; background: var(--card); }
.ph { height: 100%; display: flex; align-items: flex-end; padding: 14px 16px; background: var(--c) repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 14px); }
.ph span { font-family: var(--serif); font-size: 40px; line-height: 1; color: #fbfaf7; }
.field.far .ph span { visibility: hidden; }
.card .thumb svg { width: 100%; height: 100%; display: block; background: var(--card); }
.card .thumb svg text { display: none; }
.card .meta { padding: 12px 16px; }
.card .meta b { display: block; font-size: 20px; line-height: 1.2; font-weight: 600; }
.card .meta span { display: block; font-size: 16px; color: var(--ink-2); margin-top: 4px; }
.card .live { position: absolute; top: 10px; right: 10px; background: var(--card); border-radius: 999px; padding: 2px 10px; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.card .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2f9e5a; }
.hub { position: absolute; width: 640px; text-align: center; }
.hub h1 { font-family: var(--serif); font-weight: 400; font-size: 120px; line-height: .95; margin: 0; }
.hub p { font-size: 26px; color: var(--ink-2); margin: 16px auto 0; max-width: 30ch; }
.hub .proof { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; text-align: left; }
.hub .proof div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.hub .proof b { font-family: var(--serif); font-size: 44px; font-weight: 400; display: block; line-height: 1; }
.hub .proof span { font-size: 18px; color: var(--ink-2); }
.field.far .card .meta, .field.far .card .live, .field.far .cluster-head, .field.far .hub .proof, .field.far .hub p { visibility: hidden; }
.field.far .hub h1 { visibility: hidden; }

.labels { position: absolute; inset: 0; pointer-events: none; }
.label { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .85rem; font-size: 1rem; white-space: nowrap; display: flex; align-items: center; gap: .45rem; cursor: pointer; transition: opacity .3s var(--ease), background .25s var(--ease), transform .25s var(--ease); }
.label::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c); }
.label:hover { background: var(--ground-2); transform: translate(-50%, -100%) scale(1.04); }
.label.center { font-family: var(--serif); font-size: 1.5rem; padding: .35rem 1rem; }
.label.center::before { display: none; }
.field:not(.far) .label { opacity: 0; pointer-events: none; }
.tip { position: fixed; z-index: 45; pointer-events: none; background: var(--ink); color: var(--card); font-size: 1rem; padding: .35rem .7rem; border-radius: 8px; opacity: 0; transform: translateY(4px); transition: opacity .2s var(--ease), transform .2s var(--ease); max-width: 18rem; }
.tip.show { opacity: 1; transform: none; }

.dock { position: fixed; z-index: 40; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; gap: .35rem; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .3rem; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .4); max-width: calc(100vw - 2rem); overflow-x: auto; }
.dock button, .dock a { flex: none; border: 0; background: transparent; border-radius: 999px; padding: .4rem .75rem; font-size: 1rem; cursor: pointer; display: flex; align-items: center; gap: .4rem; transition: background .25s var(--ease); }
.dock button:hover, .dock a:hover { background: var(--ground-2); }
.dock .sw { width: .7rem; height: .7rem; border-radius: 50%; background: var(--c); }
.dock .sep { width: 1px; background: var(--line); margin: .2rem .15rem; flex: none; }
@media (max-width: 48rem) { .dock .cl span.t { display: none; } .dock .cl { padding: .55rem; } }
.mini { position: fixed; z-index: 40; right: 1rem; bottom: 4.6rem; width: 170px; height: 120px; background: rgba(251, 250, 247, .9); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; }
.mini i { position: absolute; border-radius: 2px; background: var(--c); opacity: .8; }
.mini .vp { position: absolute; border: 2px solid var(--ink); border-radius: 3px; transition: none; }
@media (max-width: 48rem) { .mini { display: none; } }
.hint { position: fixed; z-index: 40; left: 1rem; bottom: 4.6rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .8rem; font-size: 1rem; color: var(--ink-2); transition: opacity .6s var(--ease); max-width: 20rem; }
.hint.gone { opacity: 0; pointer-events: none; }

/* Regular scrolling pages */
.page { padding: 5.5rem 1rem 4rem; width: min(100%, 76rem); margin: 0 auto; }
@media (min-width: 48rem) { .page { padding: 6.5rem 2rem 5rem; } }
.eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: 1rem; color: var(--ink-2); }
.eyebrow::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c); }
.title { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 9vw, 7rem); line-height: .95; margin: .5rem 0 0; letter-spacing: -.01em; }
.lede { font-size: 1.3rem; color: var(--ink-2); max-width: 40rem; margin: 1rem 0 0; line-height: 1.45; }
.groups { margin-top: 2.5rem; display: grid; gap: 3rem; }
.group h2 { font-family: var(--serif); font-weight: 400; font-size: 2.6rem; margin: 0; color: var(--c); }
.group > p { margin: .25rem 0 1rem; color: var(--ink-2); }
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.tile:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(0, 0, 0, .35); border-color: var(--c); }
.tile .thumb { aspect-ratio: 16 / 10; background: var(--c); overflow: hidden; }
.tile .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.tile:hover .thumb img { transform: scale(1.04); }
.tile .thumb svg { width: 100%; height: 100%; display: block; background: var(--card); }
.tile .thumb svg text { display: none; }
.tile .meta { padding: .8rem 1rem 1rem; }
.tile .meta b { display: block; font-size: 1.15rem; }
.tile .meta span { display: block; color: var(--ink-2); margin-top: .25rem; font-size: 1rem; }

.p-hero { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 64rem) { .p-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.p-hero > * { min-width: 0; }
.neighbors { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1rem; }
.neighbors p { margin: 0 0 .6rem; font-size: 1rem; color: var(--ink-2); }
.neighbors ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.neighbors a { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .75rem; font-size: 1rem; transition: background .25s var(--ease), border-color .25s var(--ease); }
.neighbors a::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--c); }
.neighbors a:hover { background: var(--ground-2); border-color: var(--c); }
.neighbors a[aria-current="page"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.facts span { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; font-size: 1rem; }
.p-shot { margin: 2rem 0 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.p-body { display: grid; gap: 2.5rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 64rem) { .p-body { grid-template-columns: 17rem minmax(0, 1fr); } }
.p-body > * { min-width: 0; }
.stats { display: grid; gap: .75rem; align-content: start; }
@media (min-width: 64rem) { .stats { position: sticky; top: 5.5rem; } }
.stats div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; }
.stats b { font-family: var(--serif); font-weight: 400; font-size: 2.6rem; line-height: 1; display: block; color: var(--c); }
.stats span { font-size: 1rem; color: var(--ink-2); }
.stats ul { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.stats li { font-size: 1rem; border: 1px solid var(--line); border-radius: 6px; padding: 0 .4rem; }
.chap { margin-bottom: 2rem; max-width: 44rem; }
.chap h2 { font-family: var(--serif); font-weight: 400; font-size: 2.1rem; margin: 0 0 .5rem; line-height: 1.1; }
.chap p { margin: 0 0 .9rem; }
.chap ul { padding-left: 1.2rem; margin: 0 0 .9rem; }
.chap li { margin-bottom: .35rem; }
.chap li::marker { color: var(--c); }
.live-panel { margin: 2rem 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.live-panel header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.live-panel header b { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }
.live-panel header p { margin: .2rem 0 0; color: var(--ink-2); font-size: 1rem; }
.live-panel header a { align-self: center; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; font-size: 1rem; transition: background .25s var(--ease); }
.live-panel header a:hover { background: var(--ground-2); }
.live-panel iframe { display: block; width: 100%; height: min(76vh, 46rem); border: 0; background: #fff; }
.fig { margin: 2rem 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem; }
.fig h2 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; margin: 0; }
.fig > p { color: var(--ink-2); margin: .3rem 0 1rem; }
.fig-scroll { overflow-x: auto; }
.fig-scroll svg { min-width: 42rem; width: 100%; height: auto; display: block; }
.story-figure { margin: 0; }
.limit { border-left: 3px solid var(--c); padding: .2rem 0 .2rem 1rem; color: var(--ink-2); margin: 1.5rem 0; max-width: 44rem; }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; }
.pn a { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.pn a:hover { border-color: var(--ink); transform: translateY(-2px); }
.pn a:last-child { text-align: right; }
.pn span { display: block; font-size: 1rem; color: var(--ink-2); }
.pn b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.btn { display: inline-flex; align-items: center; gap: .4rem; background: var(--ink); color: var(--card); border: 0; border-radius: 999px; padding: .6rem 1.1rem; font-size: 1rem; cursor: pointer; transition: transform .25s var(--ease), background .25s var(--ease); }
.btn:hover { transform: translateY(-2px); background: #333; }

/* Figures drawn by figures.mjs */
.figure-svg text { font-family: var(--sans); fill: var(--ink); }
.fig-label, .fig-node-title, .fig-hub-label, .fig-wheel-note { font-size: 26px; font-weight: 600; }
.fig-node-sub, .fig-axis, .fig-note, .fig-value, .fig-tag, .fig-lane { font-size: 24px; }
.fig-node-sub, .fig-axis, .fig-note { fill: var(--ink-2); }
.fig-lane { fill: var(--c); transform: translateY(-12px); font-weight: 600; }
.fig-node rect, .fig-layer rect { fill: var(--ground); stroke: var(--line); stroke-width: 2; }
.fig-node.is-hi rect, .fig-layer.is-hi rect { stroke: var(--c); stroke-width: 3; fill: var(--card); }
.fig-edge, .fig-spoke { stroke: var(--ink-2); stroke-width: 2; fill: none; }
.fig-arrowhead { fill: var(--ink-2); }
.fig-grid { stroke: var(--line); }
.fig-bar rect, .fig-tally-bar, .fig-dot, .fig-cell { fill: #9d998e; }
.fig-bar.is-hi rect, .fig-tally-bar.is-hi, .fig-dot.is-after, .fig-hubdot.is-hi, .fig-cell.is-hi { fill: var(--c); }
.fig-marker { stroke: var(--c); stroke-dasharray: 6 6; stroke-width: 2; }
.fig-tally-track { fill: var(--ground); }
.fig-track { stroke: var(--line); stroke-width: 6; }
.fig-span { stroke: var(--c); stroke-width: 6; }
.fig-ring, .fig-disk { fill: none; stroke: var(--line); stroke-width: 2; }
.fig-hubdot { fill: var(--ink); }
.fig-hub { fill: var(--ink); }
.fig-hub ~ .fig-hub-label, .fig-hub + text { fill: var(--card); }
.fig-orbit-node, .fig-triad-node { fill: var(--card); stroke: var(--line); stroke-width: 3; }
.fig-night { fill: #121212; }
.fig-star { fill: #f5f3ee; }
.fig-sky-arc { fill: none; stroke: #5a574f; stroke-dasharray: 4 8; }
.fig-treeline { fill: #050505; }
.fig-note.is-light { fill: #eae7df; }
.fig-geodesic { fill: none; stroke: var(--ink); stroke-width: 2; }
.fig-geodesic.is-fine { stroke: var(--line); }
.fig-cellmark rect { fill: var(--ground); stroke: var(--line); }
.fig-cellmark circle { fill: none; stroke-width: 3; }
.fig-trail { fill: none; stroke-width: 2.5; }
.fig-origin { fill: var(--ink); }
.fig-wedge { stroke: var(--card); stroke-width: 3; }
.fig-tag { fill: var(--c); }

/* About and contact */
.two { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 60rem) { .two { grid-template-columns: 1fr 1fr; } }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem; }
.panel h2 { font-family: var(--serif); font-weight: 400; font-size: 2rem; margin: 0 0 .5rem; }
.panel p { margin: 0 0 .8rem; }
.panel ul { padding-left: 1.2rem; margin: 0; }
.svc { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); margin-top: 1rem; }
.svc div { border-top: 1px solid var(--line); padding-top: .75rem; }
.svc b { font-size: 1.1rem; }
.svc p { margin: .3rem 0 0; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0 1rem; }
.chips span { border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; font-size: 1rem; }
.form { display: grid; gap: 1rem; }
.form label { display: grid; gap: .35rem; font-size: 1rem; color: var(--ink-2); }
.form input, .form textarea { background: var(--ground); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .85rem; font-size: 1.0625rem; transition: border-color .25s var(--ease), background .25s var(--ease); }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--ink); background: #fff; }
.form textarea { min-height: 10rem; resize: vertical; }
.form .btn { justify-self: start; }

/* Scroll reveal and page transitions */
.rv { opacity: 0; transform: translateY(16px) scale(.99); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
::view-transition-old(root) { animation: .3s var(--ease) both d3-out; }
::view-transition-new(root) { animation: .5s var(--ease) both d3-in; }
@keyframes d3-out { to { opacity: 0; transform: scale(.98); } }
@keyframes d3-in { from { opacity: 0; transform: scale(1.02); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
}