/* Daylight Lab — styles */
:root {
  --paper: #ffffff;
  --ink: #0a0a0a;
  /* Greys, ink and the orange "signal" taken from speridlabs.com */
  --graphite: #2e2e2e;
  --mute: #6b6b6b;
  --rule: #dddddd;
  --wash: #f7f7f7;
  --sun: #f5a300;      /* the sun and its light in drawings, sliders, focus */
  --signal: #d94a1f;   /* speridlabs orange; kept for small accents, not used yet (owner kept amber in the top bar) */
  --night: #0a0a0a;
  --night-rule: #2a2a2a;
  --night-text: #9a9a9a;
  --night-hover: #1a1a1a;
  --hover: #fafafa;        /* row tint on hover */
  --hover-2: #ececec;      /* thumbnail tint on hover */
  --nav-bg: rgba(255,255,255,.92);

  /* Like speridlabs.com: a round geometric grotesk for headlines (Plus Jakarta Sans,
     a free stand-in for their Brockmann), Inter for text and buttons, IBM Plex Mono for labels */
  --display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(72px, 10vw, 136px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}

/* Dark theme. The head script sets data-theme from the visitor's saved choice,
   or from their system setting; the nav switch flips it. Amber stays the same. */
:root[data-theme="dark"] {
  --paper: #111111;
  --ink: #ededed;
  --graphite: #c2c2c2;
  --mute: #8c8c8c;
  --rule: #2b2b2b;
  --wash: #181818;
  --night: #1a1a1a;
  --night-rule: #303030;
  --night-text: #9a9a9a;
  --night-hover: #262626;
  --hover: #161616;
  --hover-2: #242424;
  --nav-bg: rgba(17,17,17,.9);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
a, button, input[type=range] { touch-action: manipulation; }
button, .btn { -webkit-user-select: none; user-select: none; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
/* Selected text takes the site's light: a soft amber wash, same in both themes */
::selection { background: rgba(245, 163, 0, .32); color: inherit; }
a { color: inherit; }
section[id] { scroll-margin-top: 72px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; color: var(--ink); text-wrap: balance; }
p { margin: 0; }
p, dd, .ref li span { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

/* Type scale */
/* Plus Jakarta Sans has a narrow word space; at tight tracking the words run together */
h1, h2 { word-spacing: .06em; }
h1 { font-size: clamp(44px, 6.4vw, 84px); line-height: .98; letter-spacing: -.045em; }
h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -.035em; }
h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.01em; }
/* Two tones in one headline, as on speridlabs.com: the grey part sets it up, the black part lands it */
h1 .dim, h2 .dim { color: var(--mute); font-weight: 500; }
.lede { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--graphite); max-width: 36em; }

/* Buttons: square, like the reference */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; border: 1px solid var(--ink);
  font: 500 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; border-radius: 0;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform 160ms var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-line:active { border-color: var(--ink); }
.btn-sm { padding: 10px 14px; font-size: 12px; }
.btn-lg { padding: 18px 24px; }
.ico { width: 15px; height: 15px; }

/* Copy-email button, joined to the email button. The two labels share one grid cell
   and crossfade with a light blur, so the swap reads as one change, not two. */
.copy-group { display: inline-flex; }
.btn-copy { display: inline-grid; place-items: center; background: var(--paper); color: var(--ink); border-color: var(--ink); border-left: 0; cursor: pointer; }
.btn-copy > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; transition: opacity 200ms ease, filter 200ms ease, transform 200ms var(--ease-out); }
.btn-copy .copy-done { opacity: 0; filter: blur(2px); transform: translateY(4px); }
.btn-copy.copied .copy-label { opacity: 0; filter: blur(2px); transform: translateY(-4px); }
.btn-copy.copied .copy-done { opacity: 1; filter: none; transform: none; }
.link { font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
/* Arrow links, as on speridlabs.com: the arrow moves 6px further out on hover */
.link::after, .topbar-go::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform 200ms var(--ease-out); }

/* Hover styles only for a real mouse, so they never stick after a tap */
@media (hover: hover) and (pointer: fine) {
  .btn-solid:hover { background: var(--paper); color: var(--ink); }
  .btn-line:hover { border-color: var(--ink); }
  .btn-copy:hover { background: var(--wash); }
  .link:hover { border-color: var(--ink); }
  .topbar a:hover .topbar-go { text-decoration: underline; }
  .nav-links a:hover { color: var(--ink); }
  .row a:hover .arr, .link:hover::after, .topbar a:hover .topbar-go::after { transform: translateX(6px); }
  .row a:hover { background-color: var(--hover); }
  .row a:hover > * { transform: translateX(8px); }
  .row a:hover canvas { background: var(--hover-2); }
  .topbar a:hover { background-color: var(--night-hover); }
  .theme-switch:hover { border-color: var(--ink); }
  .seg button:not([aria-pressed="true"]):hover { color: var(--ink); }
  .spec a:hover span:last-child { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .row a:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
  .footer li a:hover { text-decoration: underline; }
}

/* Press feedback for every input type */
.spec a, .row a, .footer li a, .nav-links a, .topbar a { transition: opacity 100ms ease; }
.spec a:active, .row a:active, .footer li a:active, .nav-links a:active, .topbar a:active { opacity: .6; }
.seg button:not([aria-pressed="true"]):active { background: var(--wash); }

/* Topbar */
.topbar { background: var(--night); color: #d9d9d9; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.topbar a { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 10px var(--gutter); text-decoration: none; }
.topbar a { transition: background-color 150ms ease, opacity 100ms ease; }
.topbar-new { color: var(--sun); white-space: nowrap; flex: none; }
#topbar-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.topbar-go { color: #fff; white-space: nowrap; flex: none; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled { border-bottom-color: var(--rule); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 17px/1 var(--display); letter-spacing: -.02em; }
.brand-mark { width: 26px; height: 26px; }
.brand-mark.lg { width: 36px; height: 36px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--graphite); }
.nav-links a.is-current { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.nav-menu-cta, .nav-toggle { display: none; }
.nav-end { display: flex; align-items: center; gap: 10px; }

/* Light / dark switch, square like the buttons. The knob carries the icon of the theme in use. */
.theme-switch {
  position: relative; flex: none; width: 60px; height: 34px; padding: 0;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 0; cursor: pointer;
  transition: border-color .15s ease, transform 160ms var(--ease-out);
}
.theme-switch:active { transform: scale(.97); }
.theme-knob {
  position: absolute; top: 3px; left: 3px; width: 26px; height: 26px;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  transition: transform 220ms var(--ease-out);
}
.theme-switch[aria-checked="true"] .theme-knob { transform: translateX(26px); }
.theme-knob svg { grid-area: 1 / 1; width: 14px; height: 14px; transition: opacity 180ms ease, transform 220ms var(--ease-out); }
.theme-switch .ico-moon { opacity: 0; transform: rotate(-60deg); }
.theme-switch[aria-checked="true"] .ico-sun { opacity: 0; transform: rotate(60deg); }
.theme-switch[aria-checked="true"] .ico-moon { opacity: 1; transform: none; }
.nav-toggle {
  min-height: 44px; padding: 0 16px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 0; cursor: pointer;
  font: 500 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase;
  transition: transform 160ms var(--ease-out);
}
.nav-toggle:active { transform: scale(.97); }
.nav-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); }

/* Story: the opening figure. Text on the left, the district figure on the right (same parts as "Try it"). */
.story { padding: clamp(32px, 5vw, 64px) 0 var(--section); border-bottom: 1px solid var(--rule); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.story-text h1 { max-width: 9.5em; }
.story-text .lede { margin-top: 28px; max-width: 30em; }
#story-svg { display: block; width: 100%; aspect-ratio: 1 / .66; touch-action: pan-y; }
#story-svg * { vector-effect: non-scaling-stroke; }
.story-panel .sky-readout .ink { color: var(--ink); }
.story-figcap { margin-top: 12px; color: var(--mute); font-size: 11px; text-transform: none; letter-spacing: .02em; }
.story-panel .slider-k { width: 3.6em; }
#story-s2[hidden], #story-toggle[hidden] { display: none; }
#story-play:not([aria-pressed="true"]) { color: var(--ink); }
/* Overlays fade out while the view glides, so labels never scale */
.s-overlay, .s-overlay-under { transition: opacity 200ms ease; }
.story-fig.is-gliding .s-overlay, .story-fig.is-gliding .s-overlay-under { opacity: 0; }

.sky { position: relative; }
.sky-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sky-place { color: var(--mute); font-size: 11px; }
.sky-stage { position: relative; }
/* Never taller than the screen under the sticky header (a phone held sideways): the
   drawing narrows instead and stays centred, so the whole sun path is in view while dragging. */
.sky-stage canvas {
  display: block; width: min(100%, (100svh - 88px) / .82); margin-inline: auto;
  aspect-ratio: 1 / .82; touch-action: pan-y;
}
.sky-stage canvas[hidden] { display: none; }
#sky-canvas { cursor: ew-resize; }
#map-canvas { cursor: grab; }
#map-canvas:active { cursor: grabbing; }
.map-credit { margin: 6px 0 0; color: var(--mute); font-size: 11px; line-height: 1.4; text-align: right; }
.map-credit a { color: inherit; }
.map-credit.is-off { visibility: hidden; }
.sky-panel { border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 8px; display: grid; gap: 12px; }
.sky-readout { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--mute); font-size: 11px; }
.sky-readout b { color: var(--ink); font-weight: 500; }
#sky-time { color: var(--ink); }
.sky-hint { color: var(--mute); font-size: 11px; text-transform: none; letter-spacing: .02em; }
.sky-controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--rule); }
.seg button { background: none; border: 0; padding: 8px 12px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
#sky-now { color: var(--ink); }
.slider { display: flex; align-items: center; gap: 14px; }
.slider-k { width: 3.2em; flex: none; color: var(--mute); font-size: 11px; }
.slider input { flex: 1; min-width: 0; width: 100%; accent-color: var(--ink); }
.try-note { margin-top: 16px; color: var(--mute); font-size: 15px; max-width: 26em; }
input[type=range] { -webkit-appearance: none; appearance: none; height: 20px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
input[type=range]::-moz-range-track { height: 1px; background: var(--ink); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--sun); border: 2px solid var(--ink); margin-top: -7px; }
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--sun); border: 2px solid var(--ink); }

/* The four studies of the opening figure, in words: four columns like "How a study runs" */
.chapters { padding: clamp(48px, 6vw, 88px) 0; border-bottom: 1px solid var(--rule); background: var(--wash); }   /* the grey of the contact section */
.chapters-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.chapter { padding: 24px 28px 0 0; display: flex; flex-direction: column; }
.chapter + .chapter { padding-left: 28px; border-left: 1px solid var(--rule); }
.chapter .tag { margin-bottom: 14px; min-height: 2.8em; }   /* two lines for every tag, so the headlines line up */
.chapter h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.15; letter-spacing: -.02em; }
.chapter h3 .dim { color: var(--mute); font-weight: 500; }
.chapter p:not(.tag) { margin-top: 10px; color: var(--graphite); font-size: 15px; }
.chapter .link { margin-top: auto; padding-top: 16px; align-self: flex-start; }

/* Statement */
.statement { padding: var(--section) 0; border-bottom: 1px solid var(--rule); }
/* The statement is the section's heading (h2), set as a sentence: wraps like body text, not balanced */
.big { font: 500 clamp(26px, 3vw, 40px)/1.18 var(--display); letter-spacing: -.025em; max-width: 24em; text-wrap: pretty; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); margin-top: clamp(48px, 6vw, 80px); }
.statement .two-col { margin-left: auto; max-width: 820px; }
.two-col h3 { margin-bottom: 12px; }
.two-col p { color: var(--graphite); }

/* Services */
.services { padding: var(--section) 0; border-bottom: 1px solid var(--rule); }
.services-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(32px, 5vw, 80px); }
.services-head { align-self: start; position: sticky; top: 104px; }
.services-head p { margin-top: 18px; color: var(--graphite); max-width: 20em; }
.cards { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.card { padding: 28px 28px 30px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; }
.card p { color: var(--graphite); font-size: 15px; }
.card-wide { grid-column: 1 / -1; }
.card-wide p:not(.tools) { max-width: 40em; }
.card .tools { margin-top: auto; padding-top: 12px; color: var(--mute); font-size: 11px; text-transform: none; letter-spacing: .02em; }

/* Process */
.process { padding: var(--section) 0; border-bottom: 1px solid var(--rule); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 48px; border-top: 1px solid var(--ink); }
.steps li { padding: 24px 32px 0 0; }
.steps li + li { padding-left: 32px; border-left: 1px solid var(--rule); }
.step-n { display: block; color: var(--mute); margin-bottom: 28px; }
.steps h3 { margin-bottom: 10px; }
.steps p { color: var(--graphite); font-size: 15px; max-width: 24em; }

/* Try it: the interactive sun dome, after "How a study runs" */
.try { padding: var(--section) 0; border-bottom: 1px solid var(--rule); }
.try-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.try h2 { max-width: 10em; }
.try .lede { margin-top: 22px; max-width: 26em; }

/* Feature */
.feature { padding: var(--section) 0; }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.zones-svg { display: block; width: 100%; height: auto; max-height: calc(100svh - 88px); }
.zones-panel { margin-top: 16px; }
.zones-panel .slider-k { width: 4.4em; }
.contour figcaption { margin-top: 12px; color: var(--mute); font-size: 11px; text-transform: none; letter-spacing: .02em; }
.tag { color: var(--mute); margin-bottom: 20px; }
.tag::before { content: "["; margin-right: .5em; }
.tag::after { content: "]"; margin-left: .5em; }
.feature-copy h2 { max-width: 11em; }
.feature-copy .lede { margin-top: 22px; }
.spec { margin-top: 32px; border-top: 1px solid var(--rule); }
.spec a { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 15px; color: var(--graphite); }
.spec .mono { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 13px; padding-top: 2px; }

/* Dark band */
.band { background: var(--night); color: #fff; padding: var(--section) 0 clamp(48px, 6vw, 80px); }
.band h2 { color: #fff; text-align: center; font-size: clamp(36px, 5.6vw, 76px); letter-spacing: -.045em; max-width: 12em; margin: 0 auto; }
.band-cols { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--night-rule); border-bottom: 1px solid var(--night-rule); }
.band-cols > div { padding: 36px 32px 40px 0; }
.band-cols > div + div { padding-left: 32px; border-left: 1px solid var(--night-rule); }
.band h3 { color: #fff; margin-bottom: 12px; }
.band p { color: var(--night-text); font-size: 15px; }
.band-rings { color: #5a5a5a; width: min(560px, 100%); margin: 48px auto 0; }

/* Latest (repos) */
.latest { padding: var(--section) 0; }
.latest-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.rows { border-top: 1px solid var(--rule); }
.row { border-bottom: 1px solid var(--rule); }
.row-loading { padding: 32px 0; color: var(--mute); }
.row a { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 40px); align-items: center; padding: 24px 0; text-decoration: none; transition: background-color 150ms ease, opacity 100ms ease; }
/* On hover the row tints and its content slides 8px in (transform, not padding: no relayout) */
.row a > * { transition: transform 200ms var(--ease-out); }
.row canvas { width: 220px; height: 132px; background: var(--wash); transition: background-color 200ms ease; }
.row-go .arr { display: inline-block; margin-left: 8px; transition: transform 200ms var(--ease-out); }
.row-meta { display: flex; align-items: center; gap: 12px; color: var(--mute); font-size: 11px; margin-bottom: 10px; flex-wrap: wrap; }
.row-meta .pill { border: 1px solid var(--ink); color: var(--ink); padding: 3px 6px; }
.row h3 { font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.03em; }
.row p { margin-top: 8px; color: var(--graphite); font-size: 15px; max-width: 40em; }
.row-go { color: var(--ink); white-space: nowrap; }

/* Research */
.research { padding: var(--section) 0; border-top: 1px solid var(--rule); }
.now { margin-top: 48px; padding: 32px; background: var(--wash); max-width: 820px; }
.now h3 { font-size: 24px; letter-spacing: -.02em; margin-bottom: 12px; }
.now p:last-child { color: var(--graphite); }
.lists { margin-top: 64px; }
.ref li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--graphite); }
.ref li:first-child { border-top: 1px solid var(--ink); }
.ref .mono { color: var(--mute); padding-top: 3px; font-size: 11px; }
.ref i { color: var(--ink); font-style: normal; font-weight: 500; }
.lists h3 { margin-bottom: 18px; }

/* About */
.about { padding: var(--section) 0; border-top: 1px solid var(--rule); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.about .lede { margin-top: 24px; color: var(--ink); }
.about .lede + p { margin-top: 16px; color: var(--graphite); max-width: 36em; }
/* The three About buttons stay on one row: the compact button size, no wrapping */
@media (min-width: 721px) {
  .about .actions { flex-wrap: nowrap; gap: 8px; }
  .about .actions .btn { padding: 11px 14px; font-size: 12px; gap: 8px; white-space: nowrap; }
}
@media (max-width: 1100px) {
  .about-grid { grid-template-columns: 1fr; }
}
.facts { margin: 0; border-top: 1px solid var(--ink); }
.facts > div { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--mute); padding-top: 3px; font-size: 11px; }
.facts dd { margin: 0; font-size: 15px; }

/* Contact */
.contact { padding: var(--section) 0; border-top: 1px solid var(--rule); background: var(--wash); }
.contact h2 { font-size: clamp(40px, 6vw, 84px); letter-spacing: -.045em; }
.contact .lede { margin-top: 22px; }

/* Footer */
.footer { border-top: 1px solid var(--rule); padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand p { margin-top: 16px; color: var(--ink); font: 700 clamp(19px, 1.8vw, 23px)/1.2 var(--display); letter-spacing: -.02em; }
.footer-h { color: var(--mute); margin-bottom: 14px; font-size: 11px; }
.footer li { margin-bottom: 8px; }
.footer li a { text-decoration: none; font-size: 14px; }
.footer-ver { text-transform: none; }
.footer-base { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--mute); font-size: 11px; }

/* Responsive */
@media (max-width: 960px) {
  .chapters-grid { grid-template-columns: 1fr 1fr; }
  .chapter:nth-child(3) { padding-left: 0; border-left: 0; }
  .chapter:nth-child(n+3) { border-top: 1px solid var(--rule); margin-top: 24px; }
  .feature-grid, .services-grid, .about-grid, .try-grid { grid-template-columns: 1fr; }
  .services-head { position: static; }
  .row a { grid-template-columns: 140px minmax(0, 1fr); }
  .row canvas { width: 140px; height: 96px; }
  .row-go { display: none; }
}
/* Phone and upright-tablet menu. The full link row needs about 800px; below that the links
   become a panel under the header (main.js closes it again above 799px). */
@media (max-width: 799px) {
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-inner { gap: 12px; }
  .nav-end { gap: 8px; }
  .brand { white-space: nowrap; }
  .nav-toggle { padding: 0 14px; }
  .theme-switch { height: 44px; width: 64px; }
  .theme-knob { width: 36px; height: 36px; }
  .theme-switch[aria-checked="true"] .theme-knob { transform: translateX(20px); }
  .nav.open { border-bottom-color: var(--rule); }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 4px var(--gutter) 20px;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
  }
  .nav.open .nav-links {
    opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s;
  }
  .nav-links a {
    display: block; padding: 16px 0; border-bottom: 1px solid var(--rule);
    font: 600 24px/1.1 var(--display); letter-spacing: -.02em; color: var(--ink);
  }
  .nav-menu-cta { display: block; margin-top: 20px; }
  .nav-menu-cta a {
    border: 1px solid var(--ink); background: var(--ink); color: var(--paper); text-align: center;
    font: 500 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 18px 20px;
  }
}
@media (max-width: 720px) {
  .chapters-grid { grid-template-columns: 1fr; }
  .chapter, .chapter + .chapter { padding: 20px 0 0; border-left: 0; }
  .chapter + .chapter { border-top: 1px solid var(--rule); margin-top: 20px; }

  .two-col, .cards, .steps, .band-cols { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .band-cols > div, .band-cols > div + div { padding: 28px 0; border-left: 0; }
  .band-cols > div + div { border-top: 1px solid var(--night-rule); }

  /* Repo rows: small square thumbnail beside the text, description cut to 3 lines */
  .row a { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 0; }
  .row canvas { width: 88px; height: 88px; }
  .row h3 { font-size: 22px; }
  .row p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

  /* Story on a phone: text first, then the figure at full width */
  .story-grid { grid-template-columns: 1fr; gap: 36px; }
  .story-text h1 { font-size: clamp(30px, 9.5vw, 44px); }
  .story-text .lede { margin-top: 16px; font-size: 16px; }

  .spec a { grid-template-columns: 1fr; gap: 4px; }
  .topbar-new { display: none; }

  /* Buttons in a row share the width, so stacked buttons line up */
  .actions .btn { flex: 1 1 auto; justify-content: center; }
  .actions .copy-group { flex: 1 1 auto; }
  .actions .btn-copy { flex: 0 0 auto; padding-left: 18px; padding-right: 18px; }
  .btn-copy .copy-text { display: none; }               /* icon only, so the address fits on one line */
  .copy-group .btn-solid { white-space: nowrap; padding-left: 14px; padding-right: 14px; }

  /* Footer: brand on top, link groups in two columns */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 400px) {
  .story-text .actions .btn { padding: 12px; font-size: 12px; }
  /* the four chapter buttons as a 2 × 2 grid with single hairlines */
  .story-chapters { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .story-chapters button + button { border-left: 0; }
  .story-chapters button:nth-child(even) { border-left: 1px solid var(--rule); }
  .story-chapters button:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 360px) {
  /* the smallest phones: the switch shrinks to its knob, so the logo stays on one line */
  .theme-switch, .theme-switch[aria-checked="true"] { width: 44px; }
  .theme-switch .theme-knob, .theme-switch[aria-checked="true"] .theme-knob { transform: none; }
  .story-text .actions { gap: 8px; }
  .story-text .actions .btn { font-size: 11px; letter-spacing: .04em; }
}
@media (max-width: 370px) {
  .copy-group .btn-solid { font-size: 11px; letter-spacing: .02em; }
}

/* Touch screens: every tap target at least 44px tall */
@media (pointer: coarse) {
  .topbar a { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .btn { min-height: 44px; }
  .brand { padding: 9px 0; }
  .seg button { min-height: 44px; padding: 0 14px; }
  .slider input { height: 44px; }
  input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -12px; }
  input[type=range]::-moz-range-thumb { width: 20px; height: 20px; }
  /* the arrow links keep their underline at the text; the extra height goes above it */
  .link { display: inline-flex; align-items: flex-end; min-height: 44px; padding-top: 0; }
  .footer li { margin-bottom: 0; }
  .footer li a { display: block; padding: 12px 0; }
}
/* Touch tablets and laptops with the full link row: the switch gets the phone size too */
@media (pointer: coarse) and (min-width: 800px) {
  .theme-switch { height: 44px; width: 64px; }
  .theme-knob { width: 36px; height: 36px; }
  .theme-switch[aria-checked="true"] .theme-knob { transform: translateX(20px); }
}

/* Fade-in on scroll. The class is added by JS only. */
/* Values from speridlabs.com: 16px rise over 650ms */
.js-fade .fade { opacity: 0; transform: translateY(16px); }
.js-fade .fade.in {
  opacity: 1; transform: none;
  transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
}
@media print { .js-fade .fade { opacity: 1; transform: none; } }

/* Theme switch (main.js). Sweep: the old page holds still, the new one is revealed by a
   moving clip-path. Fade: the reduced-motion version, a short crossfade. */
.theme-sweep::view-transition-old(root),
.theme-sweep::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-fade::view-transition-group(root),
.theme-fade::view-transition-old(root),
.theme-fade::view-transition-new(root) { animation-duration: 200ms; }

/* Less motion: nothing moves, but colour and fade feedback stay (hover tints, "Copied ✓"). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-property: opacity, color, background-color, border-color, fill, stroke, visibility !important;
  }
}

/* Dark theme for the drawings. The story and the zones room write fixed colours into their
   SVG; these rules repaint them by value (CSS beats an SVG attribute). Amber is left alone. */
:root[data-theme="dark"] {
  --d-top: #2a2a2a;      /* white roofs and tops */
  --d-south: #212121;    /* #f2f2f2 faces */
  --d-east: #1a1a1a;     /* #e6e6e6 faces */
  --d-line: #e6e6e6;     /* ink outlines */
  --d-text: #8c8c8c;     /* grey labels */
  --d-text-2: #c2c2c2;   /* dark grey labels */
  --d-sun-text: #f0b440; /* dark amber labels */
}
:root[data-theme="dark"] :is(#story-svg, #zones-svg) [fill="#ffffff"] { fill: var(--d-top); }
:root[data-theme="dark"] :is(#story-svg, #zones-svg) [fill="#f2f2f2"] { fill: var(--d-south); }
:root[data-theme="dark"] :is(#story-svg, #zones-svg) [fill="#e6e6e6"] { fill: var(--d-east); }
:root[data-theme="dark"] :is(#story-svg, #zones-svg) [fill="#0a0a0a"] { fill: var(--d-line); }
:root[data-theme="dark"] :is(#story-svg, #zones-svg) [stroke="#0a0a0a"] { stroke: var(--d-line); }
:root[data-theme="dark"] :is(#story-svg, #zones-svg) [stroke="#ffffff"] { stroke: var(--paper); }
:root[data-theme="dark"] :is(#story-svg, #zones-svg) [fill="#6b6b6b"] { fill: var(--d-text); }
:root[data-theme="dark"] :is(#story-svg, #zones-svg) [fill="#2e2e2e"] { fill: var(--d-text-2); }
:root[data-theme="dark"] :is(#story-svg, #zones-svg) [fill="#8a5c00"] { fill: var(--d-sun-text); }
/* shadows stay dark: deeper, since they now fall on a dark ground */
:root[data-theme="dark"] #story-svg .s-shadow { opacity: .5; }
:root[data-theme="dark"] #zones-svg [clip-path="url(#zc-floor)"] > [fill="#0a0a0a"] { fill: #000; }