/* The Jolly Geographer — tokens from the design system */
:root {
  --paper: #f5f2e9; --paper-raised: #fcfaf4; --line: #dcd6c6;
  --ink: #15211a; --ink-muted: #56625a;
  --pin: #3a9447; --pin-core: #15211a;
  --estuary: #1d6b70; --forest: #23683f; --moss: #4a8229; --meadow: #6f8f14;
  --sun: #b8740e; --river: #1f6fa3; --clay: #b4532a;
  --focus-ring: var(--river); --on-forest: #f5f2e9; --on-accent: #fcfaf4;
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-sans: Overpass, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Overpass Mono", ui-monospace, Menlo, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px; --space-7: 112px;
  --radius-sm: 10px; --radius-md: 18px; --radius-lg: 32px; --radius-full: 999px;
  --shadow-soft: 0 1px 2px rgba(21,33,26,.06), 0 8px 24px rgba(21,33,26,.06);
  --shadow-lift: 0 2px 4px rgba(21,33,26,.06), 0 24px 48px -12px rgba(21,33,26,.22);
  --ease-spring: cubic-bezier(.3, 1.4, .5, 1); --ease-out: cubic-bezier(.2, .8, .2, 1);
  --gutter: clamp(16px, 5vw, 80px);
  /* one content edge for every section, header and footer: 1320px wide, centred, never tighter than the gutter */
  --container: 1320px; --edge: max(var(--gutter), calc((100vw - var(--container)) / 2));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e1511; --paper-raised: #16201a; --line: #2a372f;
    --ink: #eef0e6; --ink-muted: #a3ae9f;
    --pin: #76ce6e;
    --estuary: #4fb3ad; --forest: #55ad76; --moss: #8cc257; --meadow: #c6dc6e;
    --sun: #f2b84b; --river: #62ade0; --clay: #e38a5c; --on-forest: #0e1511; --on-accent: #0e1511;
    --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.4), 0 24px 48px -12px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/26px var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper-raised); padding: 8px 14px; border-radius: var(--radius-sm); z-index: 50; }
.skip:focus { left: 16px; }

.eyebrow { font: 700 13px/18px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-2); }
.coord { font: 500 13px/18px var(--font-mono); letter-spacing: .02em; color: var(--ink-muted); margin: 0; }
.coord a { color: inherit; text-underline-offset: 3px; }
.lede { font-size: 19px; line-height: 30px; color: var(--ink); max-width: 34em; }
.link { font-weight: 700; color: var(--estuary); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  padding-bottom: 2px; transition: background-size .35s var(--ease-out); }
.link::after { content: " →"; display: inline-block; transition: transform .35s var(--ease-spring); }
.link:hover { background-size: 0 2px; background-position: 100% 100%; }
.link:hover::after { transform: translateX(4px); }

.button { display: inline-flex; align-items: center; gap: 10px; background: var(--forest); color: var(--on-forest); text-decoration: none; font: 700 16px/20px var(--font-sans);
  padding: 14px 26px; border-radius: var(--radius-full); border: 0; cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease-spring), box-shadow .35s; }
.button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--estuary); transform: translateY(101%); border-radius: inherit; transition: transform .45s var(--ease-out); }
.button:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.button:hover::before { transform: translateY(0); }
.button-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.button-ghost::before { background: var(--paper-raised); }
.button.is-copied { background: var(--pin); color: var(--on-forest); }

/* ---------- header ---------- */
.bar { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 14px var(--edge); border-bottom: 1px solid transparent; transition: transform .5s var(--ease-out), background .3s, border-color .3s; }
.bar.is-scrolled, .page .bar { background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
.bar.is-tucked { transform: translateY(-110%); }
.bar-logo { display: block; line-height: 0; }
.bar nav { display: flex; gap: clamp(12px, 2.4vw, 32px); }
.bar nav a { position: relative; font: 700 13px/18px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--ink-muted); padding: 6px 0; transition: color .2s; }
.bar nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--pin); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-out); }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--ink); }
.bar nav a:hover::after, .bar nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle { display: none; font: 700 13px/18px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius-full); padding: 8px 14px; cursor: pointer; }

/* ---------- hero ---------- */
/* the first view: copy on the left, a living globe bleeding off the right that tours Sam's places */
.hero { --globe: min(calc(100svh - 150px), 56vw); min-height: 100svh; display: grid; align-items: center; padding: 110px var(--edge) 120px; position: relative; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -2; width: calc(var(--globe) * 1.3); aspect-ratio: 1; right: calc(var(--globe) * -.33); top: 50%; transform: translateY(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--estuary) 22%, transparent), color-mix(in srgb, var(--forest) 8%, transparent) 60%, transparent); pointer-events: none; }
.hero-globe { position: absolute; z-index: -1; width: var(--globe); height: var(--globe); right: calc(var(--globe) * -.14); top: calc(50% + 36px); transform: translateY(-50%); cursor: grab;
  animation: globeIn 1.4s var(--ease-out) both; }
.hero-globe.is-dragging { cursor: grabbing; }
.hero-globe canvas { display: block; touch-action: pan-y; }
@keyframes globeIn { from { opacity: 0; transform: translateY(-46%) scale(.94); } }
.hero-copy { max-width: 640px; position: relative; }
.hero-logo { display: block; margin-bottom: var(--space-5); }
.hero-logo svg { max-width: 100%; height: auto; }
.hero-title { font: 900 clamp(60px, 7.6vw, 132px)/.88 var(--font-display); text-transform: uppercase; margin: 0 0 var(--space-4); letter-spacing: -.005em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; }
.hero-readout { position: absolute; right: var(--edge); bottom: 88px; width: min(340px, 34vw); background: color-mix(in srgb, var(--paper-raised) 96%, transparent);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 24px 0; box-shadow: var(--shadow-lift); overflow: hidden; animation: layerIn .9s var(--ease-out) .6s both; }
.hero-readout-head { display: flex; justify-content: space-between; align-items: baseline; }
.hero-readout .eyebrow { display: flex; align-items: center; gap: 8px; color: var(--pin); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pin); box-shadow: 0 0 0 0 var(--pin); animation: live 1.8s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pin) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.hero-place { font: 900 40px/1 var(--font-display); text-transform: uppercase; margin: 6px 0 4px; }
.hero-what { margin: var(--space-2) 0 var(--space-3); color: var(--ink-muted); font-size: 15px; line-height: 22px; min-height: 44px; }
.hero-readout.is-changing .hero-place, .hero-readout.is-changing .coord, .hero-readout.is-changing .hero-what { animation: layerIn .6s var(--ease-out) both; }
.hero-readout-foot { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--space-3); }
.hero-nav { display: flex; gap: 6px; }
.hero-step { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; font: 700 15px/1 var(--font-sans);
  transition: transform .3s var(--ease-spring), border-color .2s, background .2s; }
.hero-step:hover { transform: scale(1.1); border-color: var(--pin); background: color-mix(in srgb, var(--pin) 12%, transparent); }
.hero-bar { height: 3px; margin: 0 -24px; background: var(--line); }
.hero-bar span { display: block; height: 100%; width: 100%; background: var(--pin); transform-origin: left; transform: scaleX(0); }
.hero-readout.is-changing .hero-bar span { animation: heroBar 6s linear forwards; }
@keyframes heroBar { to { transform: scaleX(1); } }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.scroll-cue svg { animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- geography on the ground ---------- */
.iso { position: relative; height: 420svh; --accent: var(--estuary); background: var(--paper); border-top: 1px solid var(--line); }
.iso[data-station="1"] { --accent: var(--forest); }
.iso[data-station="2"] { --accent: var(--sun); }
.iso[data-station="3"] { --accent: var(--river); }
.iso-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.iso-stage { position: absolute; inset: 0; }
.iso-svg { display: block; width: 100%; height: 100%; }
.iso-ui { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 96px var(--edge) var(--gutter); pointer-events: none; }
.iso-ui > * { pointer-events: auto; }
.pills { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(4px, .6vw, 10px); --pill-h: clamp(52px, 7.2vw, 108px); justify-self: start; }
.pill-row { display: flex; gap: inherit; }
.pill { display: inline-flex; align-items: center; height: var(--pill-h); padding: 0 calc(var(--pill-h) * .36); border-radius: var(--radius-full); background: var(--paper-raised);
  font: 900 calc(var(--pill-h) * .7)/1 var(--font-display); text-transform: uppercase; letter-spacing: -.01em; color: var(--ink); box-shadow: var(--shadow-soft); white-space: nowrap; }
.pill-accent { background: var(--accent); color: var(--on-accent); transition: background .6s var(--ease-out); }
.pill-dot { width: var(--pill-h); padding: 0; justify-content: center; }
.pill-dot svg { width: 44%; height: auto; overflow: visible; animation: pinbob 2.6s var(--ease-spring) infinite; }
.pill-pin { fill: var(--accent); transition: fill .6s var(--ease-out); }
.pill-core { fill: var(--pin-core); }
@keyframes pinbob { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 55% { transform: translateY(1px); } }
.iso-card { justify-self: end; width: min(380px, 100%); background: var(--paper-raised); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-lift); }
.iso-step p:not(.coord):not(.eyebrow) { font-size: 15px; line-height: 23px; }
.iso-steps { display: grid; }
.iso-step { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .35s, transform .5s var(--ease-out), visibility .35s; }
.iso-step.is-active { opacity: 1; visibility: visible; transform: none; }
.iso-step h3 { font: 800 clamp(26px, 2.2vw, 32px)/1 var(--font-display); text-transform: uppercase; margin: 0 0 var(--space-2); }
.iso-step .eyebrow { color: var(--accent); transition: color .6s; }
.iso-step .coord { margin-bottom: var(--space-3); }
.iso-step p { margin: 0 0 var(--space-3); }
.iso-dots { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; gap: 6px; align-items: center; }
.iso-dot { display: block; padding: 10px 0; border: 0; background: none; cursor: pointer; }
.iso-dot span { display: block; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--line); overflow: hidden; position: relative; transition: width .45s var(--ease-out), background .3s; }
.iso-dot span::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--fill, 0)); transition: background .6s; }
.iso-dot[aria-current="true"] span { width: 96px; }
.iso-dot:hover span { background: color-mix(in srgb, var(--accent) 35%, var(--line)); }

/* the drawing: line art, one accent per station */
.iso-svg * { vector-effect: non-scaling-stroke; }
.iso-grid { stroke: var(--line); stroke-width: .7; }
.iso-t, .iso-l, .iso-r, .iso-water, .iso-canopy, .iso-drone, .iso-panel, .iso-pixel { stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.iso-t { fill: var(--paper-raised); }
.iso-l { fill: color-mix(in srgb, var(--ink) 7%, var(--paper-raised)); }
.iso-r { fill: color-mix(in srgb, var(--ink) 15%, var(--paper-raised)); }
.iso-slab.g0.iso-t { fill: color-mix(in srgb, var(--estuary) 9%, var(--paper-raised)); }
.iso-slab.g1.iso-t { fill: color-mix(in srgb, var(--forest) 9%, var(--paper-raised)); }
.iso-slab.g2.iso-t { fill: color-mix(in srgb, var(--sun) 13%, var(--paper-raised)); }
.iso-slab.g3.iso-t { fill: color-mix(in srgb, var(--river) 9%, var(--paper-raised)); }
.iso-water { fill: color-mix(in srgb, var(--estuary) 28%, var(--paper-raised)); }
.iso-ripple { stroke: var(--paper-raised); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 14; animation: ripple 3s linear infinite; }
@keyframes ripple { to { stroke-dashoffset: -48; } }
.iso-canopy.c0 { fill: color-mix(in srgb, var(--estuary) 34%, var(--paper-raised)); }
.iso-canopy.c0b { fill: color-mix(in srgb, var(--estuary) 20%, var(--paper-raised)); }
.iso-canopy.c1 { fill: color-mix(in srgb, var(--forest) 40%, var(--paper-raised)); }
.iso-canopy.c1x { fill: color-mix(in srgb, var(--moss) 36%, var(--paper-raised)); }
.iso-canopy.c1b, .iso-canopy.c1xb { fill: color-mix(in srgb, var(--forest) 22%, var(--paper-raised)); }
.iso-canopy.c2 { fill: color-mix(in srgb, var(--meadow) 38%, var(--paper-raised)); }
.iso-canopy.c2b { fill: color-mix(in srgb, var(--meadow) 20%, var(--paper-raised)); }
.iso-canopy.c3 { fill: color-mix(in srgb, var(--moss) 45%, var(--paper-raised)); }
.iso-stroke { stroke: var(--ink); stroke-width: 1.2; fill: none; stroke-linecap: round; }
.iso-trunk { stroke-width: 2; }
.iso-roof.iso-t, .iso-roof.iso-l { fill: color-mix(in srgb, var(--clay) 45%, var(--paper-raised)); }
.iso-roof.iso-r { fill: color-mix(in srgb, var(--clay) 62%, var(--paper-raised)); }
.iso-rubble.iso-t { fill: color-mix(in srgb, var(--line) 70%, var(--paper-raised)); }
.iso-mesa.iso-t { fill: color-mix(in srgb, var(--sun) 24%, var(--paper-raised)); }
.iso-mesa.iso-l { fill: color-mix(in srgb, var(--sun) 34%, var(--paper-raised)); }
.iso-mesa.iso-r { fill: color-mix(in srgb, var(--sun) 46%, var(--paper-raised)); }
.iso-tent.iso-t, .iso-tent.iso-l { fill: color-mix(in srgb, var(--river) 40%, var(--paper-raised)); }
.iso-road { fill: color-mix(in srgb, var(--ink) 10%, var(--paper-raised)); stroke: var(--ink); stroke-width: .8; }
.iso-boat.iso-t, .iso-boat.iso-l, .iso-boat.iso-r { fill: color-mix(in srgb, var(--sun) 40%, var(--paper-raised)); }
.iso-cliff.iso-t { fill: color-mix(in srgb, var(--moss) 28%, var(--paper-raised)); }
.iso-cliff.iso-l { fill: color-mix(in srgb, var(--ink) 16%, var(--paper-raised)); }
.iso-cliff.iso-r { fill: color-mix(in srgb, var(--ink) 26%, var(--paper-raised)); }
.iso-berg.iso-t { fill: var(--paper-raised); }
.iso-berg.iso-l { fill: color-mix(in srgb, var(--river) 14%, var(--paper-raised)); }
.iso-berg.iso-r { fill: color-mix(in srgb, var(--river) 26%, var(--paper-raised)); }
.iso-stump.iso-t { fill: color-mix(in srgb, var(--sun) 30%, var(--paper-raised)); }
.iso-drone { fill: var(--paper-raised); }
.iso-panel { fill: color-mix(in srgb, var(--river) 50%, var(--paper-raised)); }
.iso-rotor { fill: color-mix(in srgb, var(--estuary) 30%, transparent); stroke: var(--ink); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: rotor .18s linear infinite; }
.iso-rotor-big { fill: none; animation-duration: .12s; }
@keyframes rotor { 50% { transform: scaleX(.25); } }
.iso-scan { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 5; animation: scan 2.4s ease-in-out infinite; }
@keyframes scan { 50% { opacity: .45; } }
.iso-tide { animation: tide 7s ease-in-out infinite; }
@keyframes tide { 50% { transform: translateY(-7px); } }
.iso-bob { animation: bob 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes bob { 50% { transform: translateY(-3px); } }
.iso-hover { animation: hover 3s ease-in-out infinite; }
@keyframes hover { 50% { transform: translate(6px, -8px); } }
.iso-orbit { animation: orbit 9s ease-in-out infinite alternate; }
@keyframes orbit { from { transform: translate(-60px, 30px); } to { transform: translate(70px, -36px); } }
.iso-heli { animation: heli 10s linear infinite; }
@keyframes heli { 0% { transform: translate(-70px, 40px); } 25% { transform: translate(90px, -40px); } 50% { transform: translate(40px, 10px); } 75% { transform: translate(-100px, 0); } 100% { transform: translate(-70px, 40px); } }
.iso-glide { animation: glide 14s ease-in-out infinite; }
@keyframes glide { 50% { transform: translate(-160px, -40px); } }
.iso-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 5s ease-in-out infinite alternate; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
/* each station's layer switches on when the camera arrives */
/* opacity only: a CSS transform here would override the SVG transform that places each chip */
.iso-over > * { opacity: 0; transition: opacity .25s; }
.iso-zone.is-active .iso-over > * { opacity: 1; transition: opacity .7s var(--ease-out) calc(var(--d, 0s) * .6); }
@keyframes layerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.iso-pixel { fill: color-mix(in srgb, var(--estuary) 62%, transparent); stroke-width: .8; }
.iso-loss { fill: color-mix(in srgb, var(--clay) 70%, transparent); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { fill-opacity: .45; } }
.iso-chip rect { fill: var(--paper-raised); stroke: var(--ink); stroke-width: 1.1; }
.iso-chip text { font: 600 11px var(--font-mono); letter-spacing: .04em; fill: var(--ink); }
.iso-chip-stem { stroke: var(--ink); stroke-width: 1.1; stroke-dasharray: 2 3; }
.iso-chip-warn rect { fill: var(--clay); stroke: var(--clay); }
.iso-chip-warn text { fill: var(--on-accent); }
.iso-mark circle { fill: color-mix(in srgb, var(--pin) 80%, transparent); stroke: var(--ink); stroke-width: 1.1; }
.iso-mark-hit circle { fill: var(--clay); }
.iso-mark .iso-mark-ring { fill: none; stroke: var(--clay); transform-box: fill-box; transform-origin: center; animation: ring 1.8s ease-out infinite; }
.iso-mark:not(.iso-mark-hit) .iso-mark-ring { stroke: var(--pin); }
.iso-route { fill: none; stroke: var(--sun); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 7; animation: march 1s linear infinite; }
@keyframes march { to { stroke-dashoffset: -14; } }
.iso-flight { stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; }
.iso-zone.is-active .iso-flight { animation: draw 1.4s var(--ease-out) calc(var(--d, 0s) * .6) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.iso-flight.f0 { stroke: var(--estuary); } .iso-flight.f1 { stroke: var(--forest); } .iso-flight.f2 { stroke: var(--moss); } .iso-flight.f3 { stroke: var(--meadow); }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }

/* ---------- the drawn landscapes (inner-page heroes) ---------- */
.jw-biome { will-change: opacity; }
.jw-shimmer { animation: shimmer 4s ease-in-out infinite; opacity: .15; }
@keyframes shimmer { 50% { opacity: .75; } }
.jw-fog { animation: fog 18s ease-in-out infinite alternate; }
@keyframes fog { to { transform: translateX(-220px); } }
.jw-vine { animation: vine 5s ease-in-out infinite alternate; }
@keyframes vine { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
.jw-rain { animation: fall 0.9s linear infinite; }
.jw-snow { animation: fall 14s linear infinite; }
@keyframes fall { from { transform: translateY(0); } to { transform: translateY(900px); } }
.jw-sun { animation: glow 6s ease-in-out infinite alternate; transform-origin: 420px 300px; }
@keyframes glow { to { transform: scale(1.05); } }
.jw-bird { animation: fly 16s linear infinite; }
@keyframes fly { from { transform: translateX(-400px); } to { transform: translateX(1900px); } }
.jw-berg { animation: bergbob 5s ease-in-out infinite alternate; }
@keyframes bergbob { to { transform: translateY(6px); } }
.jw-aurora { animation: aurora 9s ease-in-out infinite alternate; }
@keyframes aurora { to { opacity: .2; transform: translateY(18px); } }
.jw-pin { animation: pinfall .7s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes pinfall { from { transform: translateY(-160px); opacity: 0; } 30% { opacity: 1; } }
.jw-ring { transform-box: fill-box; transform-origin: center; animation: jwring 1.6s ease-out .45s both; }
.jw-ring2 { animation-delay: .6s; }
@keyframes jwring { from { transform: scale(.2); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }

/* ---------- sections ---------- */
.section { padding: var(--space-7) var(--edge); }
.section-head { max-width: 52rem; margin-bottom: var(--space-5); }
.section-title { font: 800 clamp(40px, 6vw, 80px)/.92 var(--font-display); text-transform: uppercase; margin: 0 0 var(--space-3); max-width: 16em; text-wrap: balance; }
.hero-title, .page-title, .foot-title, .card h3, .iso-step h3, .atlas-name { text-wrap: balance; }
.section-cta { margin: var(--space-5) 0 0; }

[data-reveal] { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); }

/* ---------- cards: lean toward the pointer, lift, catch the light ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
/* fixed column counts (set per grid with --cols) so rows always fill: 6 cards → 3 × 2, 8 → 4 × 2 */
.cards-media, .cards-posts { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
@media (max-width: 1000px) { .cards-media, .cards-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards-media, .cards-posts { grid-template-columns: 1fr; } }
.card { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; display: block; text-decoration: none; color: var(--ink); background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); overflow: hidden; isolation: isolate;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0);
  transition: transform .6s var(--ease-spring), box-shadow .4s, border-color .3s; }
.card::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, #ffffff 22%, transparent), transparent 55%); }
.card::after { content: ""; position: absolute; left: var(--space-4); right: var(--space-4); bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--pin);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.card:hover, .card:focus-visible { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--pin) 40%, var(--line)); }
.card.is-tilting { transition: transform .12s linear, box-shadow .4s, border-color .3s; }
.card:hover::before { opacity: 1; }
.card:hover::after { transform: scaleX(1); }
.card h3 { font: 700 36px/1 var(--font-display); text-transform: uppercase; margin: 4px 0 10px; transition: color .3s; }
.card[href] h3::after { content: "→"; display: inline-block; margin-left: .25em; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .45s var(--ease-spring); }
.card[href]:hover h3::after { opacity: 1; transform: none; }
.card p { margin: 0; color: var(--ink-muted); }
.card .label { font: 700 13px/18px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--estuary); }
.card-post { display: flex; flex-direction: column; padding: 0 0 var(--space-4); }
.card-post > :not(.card-media) { padding-inline: var(--space-4); }
.card-media { aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--estuary) 14%, var(--paper-raised)); margin-bottom: var(--space-3); display: grid; place-items: center; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .9s var(--ease-out); }
.card-post:hover .card-media img { transform: scale(1.09); }
.card-pin { width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--pin); box-shadow: inset 0 0 0 8px var(--pin), inset 0 0 0 28px var(--pin-core); transition: transform .5s var(--ease-spring); }
.card-post:hover .card-pin { transform: rotate(-45deg) translate(4px, -4px) scale(1.15); }
.card-post h3 { font-size: 30px; }

/* ---------- the atlas ---------- */
/* toolbar on top; map and list side by side at exactly the map's height; the place card pops up on the map */
.atlas { display: block; }
.atlas-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.atlas-body { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(260px, 1fr); gap: var(--space-4); align-items: stretch; }
.atlas-map { position: relative; align-self: start; background: color-mix(in srgb, var(--river) 7%, var(--paper-raised)); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.atlas-svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.atlas-svg * { vector-effect: non-scaling-stroke; }
.atlas-sphere { fill: color-mix(in srgb, var(--river) 9%, var(--paper-raised)); stroke: var(--line); }
.atlas-grat { fill: none; stroke: var(--line); stroke-width: .6; }
.atlas-coast { fill: none; stroke-linejoin: round; }
.atlas-coast.c1 { stroke: var(--estuary); stroke-width: 11; opacity: .1; }
.atlas-coast.c2 { stroke: var(--forest); stroke-width: 6; opacity: .18; }
.atlas-coast.c3 { stroke: var(--moss); stroke-width: 2.5; opacity: .35; }
.atlas-land { fill: var(--paper); stroke: var(--ink); stroke-width: .7; }
.atlas-arc { fill: none; stroke: var(--pin); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .85; transition: stroke-dashoffset 1.6s var(--ease-out) var(--d, 0s), opacity .3s, stroke-width .3s; }
.atlas-arc.kind-remote { stroke: var(--clay); }
.atlas.is-in .atlas-arc { stroke-dashoffset: 0; }
.atlas.is-hovering .atlas-arc { opacity: .25; }
.atlas .atlas-arc.is-hot, .atlas .atlas-arc.is-selected { opacity: 1; stroke-width: 3; }
.atlas-route { fill: none; stroke: var(--sun); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--ease-out) 1.2s; }
.atlas.is-in .atlas-route { stroke-dashoffset: 0; }
.atlas-pin { cursor: pointer; outline: none; }
.atlas-hit { fill: transparent; }
.atlas-pin-body { fill: var(--pin); stroke: var(--pin-core); stroke-width: 6; }
.atlas-pin-core { fill: var(--pin-core); }
.kind-home .atlas-pin-body { fill: var(--sun); }
.atlas-ring-mark { fill: var(--paper-raised); stroke: var(--clay); stroke-width: 2; }
.atlas-dot { fill: var(--clay); }
.atlas-drop { opacity: 0; }
.atlas.is-in .atlas-drop { animation: pinDrop .8s var(--ease-spring) var(--d, 0s) both; }
.atlas-pin.kind-remote { opacity: 0; transition: opacity .5s var(--d, 0s); }
.atlas.is-in .atlas-pin.kind-remote { opacity: 1; }
@keyframes pinDrop { from { opacity: 0; transform: translateY(-46px); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
.atlas-lift { transition: transform .4s var(--ease-spring); }
.atlas-pin.is-hot .atlas-lift, .atlas-pin:focus-visible .atlas-lift, .atlas-pin.is-selected .atlas-lift { transform: translateY(-5px) scale(1.3); }
.atlas-pin.is-selected .atlas-pin-body { fill: var(--estuary); }
.atlas-ripple { fill: none; stroke: var(--pin); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.atlas-pin.is-hot .atlas-ripple, .atlas-pin.is-selected .atlas-ripple { animation: ring 1.4s ease-out infinite; }
.atlas-pulse { fill: none; stroke: var(--sun); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ring 2.4s ease-out infinite; }
.atlas-pulse2 { animation-delay: 1.2s; }
.atlas-pin.is-hot.kind-remote .atlas-ring-mark { stroke-width: 3.5; }
.atlas[data-filter="field"] .kind-remote, .atlas[data-filter="remote"] .kind-field { display: none; }
.atlas-tip { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 30px)); background: var(--ink); color: var(--paper); padding: 6px 12px; border-radius: var(--radius-full);
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s; }
.atlas-tip.show { opacity: 1; }
.atlas-back { position: absolute; top: 14px; left: 14px; font: 700 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; background: var(--paper-raised);
  color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-full); padding: 9px 14px; cursor: pointer; box-shadow: var(--shadow-soft); }
.atlas-back::before { content: "← "; }
/* the panel takes its height from the map (contain: size), and the list scrolls inside it */
/* contain: size — the list column takes its height from the map, never the other way round */
.atlas-panel { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; contain: size; }
.atlas-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.atlas-filters .chip { white-space: nowrap; cursor: pointer; background: transparent; }
.atlas-filters .chip[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--on-forest); }
.atlas-stats { display: flex; gap: var(--space-4); margin: 0; font: 600 14px/20px var(--font-sans); color: var(--ink-muted); }
.atlas-stats span { display: inline-flex; align-items: baseline; gap: 8px; padding-top: 4px; border-top: 2px solid var(--pin); }
.atlas-stats .s-remote { border-top-color: var(--clay); }
.atlas-stats strong { font: 900 32px/1 var(--font-display); color: var(--ink); }
.atlas-hint { flex: none; margin: 0; }
.atlas-detail { position: absolute; left: 14px; bottom: 14px; z-index: 4; width: min(360px, calc(100% - 28px)); max-height: calc(100% - 76px); overflow: auto;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 20px; box-shadow: var(--shadow-lift); }
.atlas-detail.is-fresh { animation: layerIn .45s var(--ease-out); }
.atlas-detail p { margin: 0 0 var(--space-2); }
.atlas-name { font: 800 34px/1 var(--font-display); text-transform: uppercase; margin: 0 0 var(--space-2); }
.atlas-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: var(--space-3) 0 0 !important; }
.atlas-list { list-style: none; margin: 0; padding: 0 0 var(--space-4); flex: 1 1 0; min-height: 0; overflow: auto; border-top: 1px solid var(--line); scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); }
.atlas-list button { width: 100%; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; text-align: left; font: 600 15px/20px var(--font-sans); color: var(--ink);
  background: none; border: 0; border-bottom: 1px solid var(--line); padding: 10px 4px; cursor: pointer; transition: background .2s, padding .3s var(--ease-spring); }
.atlas-list button .coord { font-size: 11px; }
.atlas-list button:hover, .atlas-list button.is-hot, .atlas-list button.is-selected { background: color-mix(in srgb, var(--pin) 10%, transparent); padding-left: 10px; }
.atlas-li-mark { width: 10px; height: 10px; border-radius: 50%; background: var(--pin); justify-self: center; }
.kind-home .atlas-li-mark { background: var(--sun); }
.kind-remote .atlas-li-mark { background: transparent; box-shadow: inset 0 0 0 2px var(--clay); }

.globe { width: clamp(150px, 18vw, 230px); aspect-ratio: 1; cursor: grab; }
.globe svg { width: 100%; height: 100%; overflow: visible; }
.globe-sphere { fill: color-mix(in srgb, var(--river) 12%, var(--paper-raised)); stroke: var(--ink); stroke-width: 1.2; }
.globe-grat { fill: none; stroke: var(--line); stroke-width: .6; }
.globe-land { fill: var(--paper-raised); stroke: var(--ink); stroke-width: .8; }
.globe-arc { fill: none; stroke: var(--pin); stroke-width: 2; stroke-dasharray: 4 4; animation: march 1.2s linear infinite; }
.globe-pin .atlas-drop { opacity: 1; }
.globe.is-in .globe-pin .atlas-drop { animation: pinDrop .8s var(--ease-spring) both; }

/* ---------- services accordion ---------- */
.accordion { display: flex; gap: var(--space-3); height: clamp(460px, 56vh, 560px); }
.acc-panel { --tone: var(--estuary); position: relative; flex: 0 0 92px; min-width: 0; border-radius: var(--radius-lg); overflow: hidden;
  background: color-mix(in srgb, var(--tone) 11%, var(--paper-raised)); border: 1px solid color-mix(in srgb, var(--tone) 22%, var(--line));
  transition: flex .7s var(--ease-out), background .4s; }
.acc-panel.is-open { flex: 1 1 auto; background: color-mix(in srgb, var(--tone) 8%, var(--paper-raised)); }
.acc-panel:not(.is-open):hover { background: color-mix(in srgb, var(--tone) 20%, var(--paper-raised)); }
.acc-tab { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; background: none; border: 0;
  cursor: pointer; color: var(--tone); text-align: left; font: inherit; }
.acc-num { font: 500 13px/18px var(--font-mono); color: var(--ink-muted); }
.acc-title { font: 800 clamp(28px, 2.6vw, 40px)/1 var(--font-display); text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.acc-panel.is-open .acc-tab { inset: 0 0 auto 0; flex-direction: row; align-items: baseline; padding: var(--space-5) var(--space-5) 0; cursor: default; }
.acc-panel.is-open .acc-title { writing-mode: horizontal-tb; transform: none; font-size: clamp(32px, 3.2vw, 52px); white-space: normal; }
.acc-body { overflow: auto; scrollbar-width: thin; }
@media (max-width: 1200px) and (min-width: 821px) {
  .accordion { height: 580px; }
  .acc-panel { flex-basis: 68px; }
  .acc-title { font-size: 28px; }
  .acc-panel.is-open .acc-tab { padding: var(--space-4) var(--space-4) 0; }
  .acc-body { padding: calc(var(--space-4) + 56px) var(--space-4) var(--space-4); gap: var(--space-4); }
  .acc-copy p:not(.acc-h) { font-size: 15px; line-height: 23px; }
}
.acc-body { position: absolute; inset: 0; padding: calc(var(--space-5) + 64px) var(--space-5) var(--space-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(120px, .8fr);
  gap: var(--space-5); align-items: start; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.acc-panel.is-open .acc-body { opacity: 1; visibility: visible; transition: opacity .5s .25s, visibility 0s .25s; }
.acc-panel.is-open .acc-copy { animation: layerIn .6s var(--ease-out) .3s both; }
.acc-panel.is-open .acc-copy + .acc-copy { animation-delay: .4s; }
.acc-h { font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tone); margin: 0 0 var(--space-2); }
.acc-copy p:not(.acc-h) { margin: 0 0 var(--space-4); font-size: 17px; line-height: 27px; }
.acc-copy ul { list-style: none; margin: 0; padding: 0; }
.acc-copy li { border-top: 1px solid color-mix(in srgb, var(--tone) 25%, var(--line)); }
.acc-copy li a { display: block; padding: 10px 0; text-decoration: none; font-weight: 600; transition: padding .3s var(--ease-spring), color .2s; }
.acc-copy li a::after { content: " →"; opacity: 0; transition: opacity .2s; }
.acc-copy li a:hover { padding-left: 8px; color: var(--tone); }
.acc-copy li a:hover::after { opacity: 1; }
.acc-art { width: 100%; max-width: 200px; justify-self: end; align-self: end; fill: none; stroke: var(--tone); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; overflow: visible; }
.acc-panel.is-open .art-layers .l1 { animation: lift1 3.6s ease-in-out infinite; }
.acc-panel.is-open .art-layers .l2 { animation: lift2 3.6s ease-in-out infinite; }
.art-layers .l1 path { fill: color-mix(in srgb, var(--tone) 22%, transparent); }
.art-layers circle { fill: var(--tone); }
@keyframes lift1 { 50% { transform: translateY(-14px); } }
@keyframes lift2 { 50% { transform: translateY(-6px); } }
.art-orbit .planet { fill: color-mix(in srgb, var(--tone) 18%, transparent); }
.art-orbit .path { stroke-dasharray: 3 6; stroke-width: 1.5; }
.art-orbit .sat { fill: var(--paper-raised); offset-path: path("M16 80a64 24 0 1 0 128 0a64 24 0 1 0 -128 0"); offset-rotate: 0deg; animation: orbitpath 7s linear infinite; }
@keyframes orbitpath { to { offset-distance: 100%; } }
.art-drone .drone { animation: hover 2.6s ease-in-out infinite; }
.art-drone .rotor { transform-box: fill-box; transform-origin: center; animation: rotor .16s linear infinite; }
.art-drone .beam { fill: color-mix(in srgb, var(--tone) 15%, transparent); stroke-dasharray: 4 5; stroke-width: 1.5; }
.art-drone .scanline { animation: scanline 2.2s ease-in-out infinite; }
@keyframes scanline { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-50px); opacity: .3; } }
.art-cam .lens { fill: var(--tone); }
.art-cam .led { fill: var(--clay); stroke: none; animation: blink 1.2s steps(2) infinite; }
.art-target .ping { fill: var(--tone); stroke: none; transform-box: fill-box; transform-origin: center; animation: ping 1.8s ease-out infinite; }
@keyframes ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(3); opacity: 0; } }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.4fr); gap: var(--space-6); align-items: center; border-top: 1px solid var(--line); }
.about-portrait { --rx: 0deg; --ry: 0deg; position: relative; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s var(--ease-spring); }
.about-portrait.is-tilting { transition: transform .12s linear; }
.about-portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.about-portrait .about-pin { position: absolute; right: -24px; bottom: -28px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
.stats div { border-top: 2px solid var(--pin); padding-top: var(--space-3); display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.stats dt { font: 600 13px/18px var(--font-sans); color: var(--ink-muted); }
.stats dd { margin: 0 0 6px; font: 900 clamp(44px, 5vw, 72px)/.9 var(--font-display); color: var(--ink); }

/* ---------- inner pages ---------- */
.page-hero { position: relative; min-height: min(78svh, 720px); display: grid; align-items: end; padding: 140px var(--edge) var(--space-6); overflow: hidden; isolation: isolate; }
.page-hero-world { position: absolute; inset: 0; z-index: -2; }
.page-hero-world .jw-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 30%, transparent) 0%, color-mix(in srgb, var(--paper) 5%, transparent) 45%, var(--paper) 100%); }
.page-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: end; }
/* no backdrop blur here: blurring over the animated landscape repaints every frame */
.page-hero-card { background: color-mix(in srgb, var(--paper-raised) 94%, transparent);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-lift); max-width: 52rem; animation: layerIn .9s var(--ease-out) both; }
.page-hero-card .eyebrow a { text-decoration: none; color: var(--estuary); }
.page-title { font: 900 clamp(48px, 7vw, 104px)/.9 var(--font-display); text-transform: uppercase; margin: 0 0 var(--space-3); overflow-wrap: anywhere; }
.page-hero .lede { margin: 0 0 var(--space-3); }
.globe-wrap { display: grid; justify-items: center; gap: var(--space-2); animation: layerIn 1s var(--ease-out) .2s both; }
.globe-wrap .coord { background: var(--paper-raised); padding: 4px 12px; border-radius: var(--radius-full); box-shadow: var(--shadow-soft); }
.page-body { padding: var(--space-6) var(--edge) var(--space-7); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; }
.chip { font: 700 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--ink-muted);
  border: 1px solid var(--line); border-radius: var(--radius-full); padding: 7px 12px; transition: color .2s, border-color .2s, background .2s, transform .3s var(--ease-spring); }
.chip:hover { color: var(--ink); border-color: var(--pin); transform: translateY(-2px); }
.chip[aria-current="page"] { background: var(--forest); border-color: var(--forest); color: var(--on-forest); }

.prose { max-width: 46rem; margin: 0 auto; font-size: 18px; line-height: 30px; overflow-wrap: break-word; }
.prose > * { margin: 0 0 var(--space-4); }
.prose h2 { font: 800 clamp(32px, 4vw, 44px)/1 var(--font-display); text-transform: uppercase; margin-top: var(--space-6); }
.prose h3 { font: 800 28px/1.05 var(--font-display); text-transform: uppercase; margin-top: var(--space-5); }
.prose h4 { font: 700 18px/26px var(--font-sans); margin-top: var(--space-4); }
.prose a { color: var(--estuary); font-weight: 600; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--pin); }
.prose blockquote { border-left: 4px solid var(--pin); margin-left: 0; padding: var(--space-2) 0 var(--space-2) var(--space-4); font-size: 20px; line-height: 32px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-5) 0; }
.prose mark { background: color-mix(in srgb, var(--meadow) 28%, transparent); color: inherit; padding: 0 .15em; border-radius: 3px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; display: block; overflow-x: auto; }
.prose td, .prose th { border-bottom: 1px solid var(--line); padding: var(--space-2) var(--space-3) var(--space-2) 0; text-align: left; vertical-align: top; }
.prose img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); margin-inline: auto; transition: transform .6s var(--ease-out), box-shadow .4s; }
.prose figure { margin-inline: 0; }
.prose figure img:hover { transform: scale(1.015); box-shadow: var(--shadow-lift); }
.prose figcaption, .gallery-cap { font: 500 13px/20px var(--font-mono); color: var(--ink-muted); margin-top: var(--space-2); text-align: center; }
.prose .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.prose .gallery > figure { margin: 0; overflow: hidden; border-radius: var(--radius-sm); }
.prose .gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.prose .gallery > .gallery-cap { grid-column: 1 / -1; }
.embed { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); background: var(--paper-raised); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 1100px) { .prose .embed, .prose .gallery { margin-inline: -8rem; } }
.prose .card { color: var(--ink); font-weight: 400; text-decoration: none; }
.prose .card h3 { font: 700 36px/1 var(--font-display); margin: 4px 0 10px; }
.prose .card p { margin: 0; }
/* inner-page blocks sit on the same edge as everything else, with the same rhythm as home sections */
.wide { margin: 0; }
.wide + .wide, .about-grid + .wide, .contact-grid + .wide { margin-top: var(--space-7); }

.pager { max-width: 46rem; margin: var(--space-6) auto 0; padding-top: var(--space-4); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.pager a { display: flex; flex-direction: column; gap: var(--space-1); text-decoration: none; font: 800 24px/1.05 var(--font-display); text-transform: uppercase; transition: color .2s, transform .4s var(--ease-spring); }
.pager-prev:hover { color: var(--forest); transform: translateX(-6px); }
.pager-next:hover { color: var(--forest); transform: translateX(6px); }
.pager-next { text-align: right; }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-4); }
.contact-card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }
/* the contact form */
.contact-title { font: 900 clamp(34px, 3.6vw, 52px)/.95 var(--font-display); text-transform: uppercase; margin: 0 0 var(--space-4); }
.contact-form { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field { display: grid; gap: 6px; min-width: 0; border: 0; margin: 0; padding: 0; }
.field label, .field legend { font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); padding: 0; }
.field input, .field textarea { width: 100%; font: 400 16px/24px var(--font-sans); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--pin) 45%, var(--line)); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--pin); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pin) 22%, transparent); border-radius: var(--radius-sm); }
.field [aria-invalid="true"] { border-color: var(--clay); }
.field-error { margin: 0; min-height: 0; font: 600 13px/18px var(--font-sans); color: var(--clay); }
.field-error:empty { display: none; }
.topics { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.topics legend { margin-bottom: 6px; }
.topic { position: relative; cursor: pointer; }
.topic input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.topic span { display: inline-block; font: 700 14px/18px var(--font-sans); border: 1.5px solid var(--line); border-radius: var(--radius-full); padding: 9px 16px;
  transition: background .2s, border-color .2s, color .2s, transform .3s var(--ease-spring); }
.topic:hover span { border-color: var(--pin); transform: translateY(-2px); }
.topic input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--on-forest); }
.topic input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.form-status { margin: 0; font: 600 14px/20px var(--font-sans); color: var(--ink-muted); }
.form-status.is-error { color: var(--clay); }
.form-status.is-sent { color: var(--pin); }
.contact-form.is-sending .button { opacity: .7; cursor: progress; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.social-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.social-pills a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; border: 1.5px solid var(--line); border-radius: var(--radius-full); padding: 10px 18px;
  transition: transform .35s var(--ease-spring), border-color .2s, background .2s; }
.social-pills a:hover { transform: translateY(-3px) rotate(-2deg); border-color: var(--pin); background: color-mix(in srgb, var(--pin) 10%, transparent); }
.help-list { list-style: none; margin: 0; padding: 0; counter-reset: h; }
.help-list li { counter-increment: h; display: grid; grid-template-columns: 40px 1fr; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.help-list li::before { content: counter(h, decimal-leading-zero); font: 500 13px/26px var(--font-mono); color: var(--estuary); }
.help-list a { font-weight: 700; text-decoration: none; }
.help-list a:hover { color: var(--estuary); }

/* about page */
.about-grid { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.5fr); gap: var(--space-6); align-items: start; }
.about-grid .prose { margin: 0; }
.about-grid .about-portrait { position: sticky; top: 110px; }

/* ---------- footer ---------- */
.foot { position: relative; background: color-mix(in srgb, var(--forest) 9%, var(--paper)); overflow: hidden; isolation: isolate; }
.foot-land { display: block; width: 100%; height: clamp(80px, 12vw, 180px); margin-bottom: -2px; background: var(--paper); }
.foot-land path { stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.foot-land .h1 { fill: color-mix(in srgb, var(--estuary) 24%, var(--paper)); }
.foot-land .h2 { fill: color-mix(in srgb, var(--forest) 20%, var(--paper)); }
.foot-land .h3 { fill: color-mix(in srgb, var(--moss) 16%, var(--paper)); }
.foot-land .h4 { fill: color-mix(in srgb, var(--forest) 9%, var(--paper)); }
.foot-land g { animation: drift 16s ease-in-out infinite alternate; }
.foot-land .g2 { animation-duration: 22s; } .foot-land .g3 { animation-duration: 28s; }
@keyframes drift { to { transform: translateX(-40px); } }
.foot-inner { padding: var(--space-6) var(--edge) var(--space-5); }
.foot-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: end; padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.foot-title { font: 900 clamp(56px, 10vw, 150px)/.86 var(--font-display); text-transform: uppercase; margin: 0; }
.foot-title span { color: var(--forest); }
.foot-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); padding: var(--space-6) 0 var(--space-5); }
.foot-h { font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-3); }
.foot-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.foot-col a { text-decoration: none; font-weight: 600; transition: transform .35s var(--ease-spring), color .2s; }
.foot-col a:hover { color: var(--forest); transform: translateX(4px); }
.foot-brand .coord { margin-top: var(--space-3); }
.foot-place { font: 800 32px/1 var(--font-display); text-transform: uppercase; margin: 0 0 6px; }
.foot-time { font: 900 48px/1 var(--font-display); color: var(--forest); margin: var(--space-2) 0 0; }
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.to-top { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-full); padding: 8px 16px 8px 10px; cursor: pointer; transition: transform .35s var(--ease-spring), box-shadow .3s; }
.to-top svg { width: 18px; height: 26px; overflow: visible; }
.to-top .pin-body { fill: var(--pin); }
.to-top .pin-core { fill: var(--pin-core); }
.to-top:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.to-top:hover svg { animation: pinbob 1s var(--ease-spring) infinite; }
.to-top.is-launching svg { animation: launch .9s cubic-bezier(.5, 0, .75, 0) both; }
@keyframes launch { 30% { transform: translateY(4px) scaleY(.85); } to { transform: translateY(-160px); opacity: 0; } }

/* ---------- small screens ---------- */
@media (max-width: 1000px) {
  .atlas-body { grid-template-columns: 1fr; }
  .atlas-panel { contain: none; }
  .atlas-list { flex: none; max-height: 260px; }
  .atlas-detail { position: relative; left: auto; bottom: auto; width: auto; max-height: none; margin: 12px; box-shadow: none; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-body { grid-template-columns: 1fr 1fr; }
  .acc-art { display: none; }
}
@media (max-width: 820px) {
  .menu-toggle { display: inline-block; }
  .bar { flex-wrap: wrap; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .bar nav { display: none; width: 100%; flex-direction: column; gap: 0; padding: var(--space-2) 0; }
  .bar.open nav { display: flex; }
  .bar nav a { padding: 12px 0; border-top: 1px solid var(--line); }
  .bar nav a::after { display: none; }
  .hero { grid-template-columns: 1fr; gap: var(--space-4); padding-top: 104px; align-content: center; }
  .hero { --globe: min(92vw, 520px); display: flex; flex-direction: column; align-items: stretch; padding-bottom: var(--space-5); }
  .hero::before { right: 50%; transform: translate(50%, -50%); top: 62%; }
  .hero-globe { position: relative; right: auto; top: auto; transform: none; align-self: center; order: 2; margin: var(--space-4) 0 calc(var(--space-6) * -1); }
  @keyframes globeIn { from { opacity: 0; transform: scale(.94); } }
  .hero-readout { position: relative; right: auto; bottom: auto; width: 100%; order: 3; }
  .scroll-cue { display: none; }
  .iso { height: 360svh; }
  .iso-ui { padding: 84px 16px 16px; }
  .iso-card { padding: var(--space-4); width: 100%; }
  .iso-step p:not(.coord):not(.eyebrow) { font-size: 15px; line-height: 23px; }
  .accordion { flex-direction: column; height: auto; }
  .acc-panel { flex: none; }
  .acc-tab { position: relative; flex-direction: row; align-items: baseline; padding: var(--space-3) var(--space-4); }
  .acc-title { writing-mode: horizontal-tb; transform: none; font-size: 28px; }
  .acc-panel.is-open .acc-tab { padding: var(--space-4) var(--space-4) 0; }
  .acc-body { position: relative; display: none; padding: var(--space-3) var(--space-4) var(--space-4); grid-template-columns: 1fr; gap: 0; }
  .acc-panel.is-open .acc-body { display: grid; }
  .about, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .about-portrait { max-width: 320px; }
  .about-grid .about-portrait { position: relative; top: 0; }
  .page-hero { min-height: 62svh; padding-top: 110px; }
  .page-hero-inner { grid-template-columns: 1fr; }
  .globe-wrap { justify-items: start; }
  .page-hero-card { padding: var(--space-4); }
  .prose { font-size: 17px; line-height: 28px; }
  .pager { grid-template-columns: 1fr; }
  .pager-next { text-align: left; }
  .foot-cta { grid-template-columns: 1fr; }
}

/* animated scenes rest while they are off screen */
.is-paused, .is-paused * { animation-play-state: paused !important; }

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .iso-flight { stroke-dashoffset: 0; }
  .js [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
}