/* jerryli.design
   Dark, warm, quiet. One accent. Mona Sans at different widths does all the work. */

:root {
  color-scheme: dark;
  --bg: #0b0a09;
  --bg-raise: #141210;
  --bg-sunk: #080706;
  --line: rgba(237, 232, 226, 0.09);
  --line-strong: rgba(237, 232, 226, 0.18);
  --text: #eee9e3;
  --text-2: #b8b0a7;
  --muted: #8c847b;
  --accent: #ff6b35;
  --accent-soft: rgba(255, 107, 53, 0.14);
  --radius: 14px;
  --radius-lg: 20px;
  --gutter: clamp(24px, 5vw, 96px); /* more room at the screen edges (Jerry, Sept 29) */
  --rx-edge: max(14px, calc(var(--gutter) * 0.66)); /* readouts and notes inside full-width stages */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --font: 'Mona Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01' on;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--accent); color: #140a05; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.label {
  font-size: 12px;
  font-weight: 600;
  font-stretch: 110%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ nav */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter) 16px;
  background: linear-gradient(var(--bg) 72%, rgba(11, 10, 9, 0));
}
.wordmark { font-weight: 650; font-stretch: 125%; font-size: 17px; letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); font-size: 14px; color: var(--text-2); }
.nav-links a { transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }
.nav-cta {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--text) !important;
  transition: background 0.2s, border-color 0.2s;
}
.nav-cta:hover { background: var(--text); color: var(--bg) !important; border-color: var(--text); }

/* sections */
.section { padding: 28px 0 40px; scroll-margin-top: 60px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; }
.section-head h2 { font-size: 13px; font-weight: 600; font-stretch: 110%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.section-head .count { color: var(--muted); font-weight: 500; margin-left: 8px; }
.section-note { font-size: 14px; color: var(--muted); }

/* contact card (the landing's about section is further down) */
.contact-card {
  margin-top: 36px; padding: 28px; border-radius: var(--radius-lg);
  background: var(--bg-raise); border: 1px solid var(--line);
}
.contact-card .links-inline { margin-top: 18px; }
.footer { padding: 40px 0 36px; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------ landing: Mars is the background */
.bg { position: fixed; inset: 0; z-index: 0; background: #2a1812; }
.bg-still, .bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* anchored on the point the 3D camera frames the drone on, so the fade from still to live lines up */
.bg-still { object-fit: cover; object-position: 73% 65%; transition: opacity 1s var(--ease); }
.bg-canvas { opacity: 0; display: block; transition: opacity 1s var(--ease); }
.bg.live .bg-canvas { opacity: 1; }
.bg.live .bg-still { opacity: 0; }
.veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 8, 7, 0.55) 0%, rgba(10, 8, 7, 0) 16%),
    linear-gradient(90deg, rgba(10, 8, 7, 0.93) 0%, rgba(10, 8, 7, 0.88) 38%, rgba(10, 8, 7, 0.6) 56%, rgba(10, 8, 7, 0.12) 70%, rgba(10, 8, 7, 0) 80%);
}
.home .nav {
  position: fixed; left: 0; right: 0; z-index: 30;
  background: linear-gradient(rgba(10, 8, 7, 0.72), rgba(10, 8, 7, 0));
  transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s; border-bottom: 1px solid transparent;
}
.home .nav.scrolled { background: rgba(10, 8, 7, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.nav-drive {
  padding: 7px 14px; border-radius: 999px; background: var(--accent); color: #1a0b04 !important; font-weight: 600;
  transition: background 0.2s, transform 0.2s var(--ease);
}
.nav-drive:hover { background: #ff8a5c; }
.veil-dim { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: #0a0807; opacity: 0; will-change: opacity; }
.content { position: relative; z-index: 2; }

/* first screen: intro + staggered featured work on the left, the live project on the right */
.hero {
  --left-w: max(min(47vw, 780px, calc((100svh - 490px) * 1.5)), 500px);
  min-height: 100vh; min-height: 100svh; padding: 84px var(--gutter) 40px; display: flex; flex-direction: column; justify-content: center; position: relative;
}
.hero-left { width: var(--left-w); max-width: 100%; }
.hello { padding: 0 0 24px; }
.name { font-size: clamp(40px, 4.2vw, 64px); font-weight: 800; font-stretch: 125%; letter-spacing: -0.035em; line-height: 0.92; }
.lede { margin-top: 12px; max-width: 54ch; font-size: clamp(15.5px, 1.15vw, 18px); line-height: 1.45; color: var(--text-2); font-weight: 450; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips li { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.chips b { font-weight: 700; font-stretch: 110%; color: var(--text); }
.chips li:has(> a) { padding: 0; }
.chips a { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: inherit; color: inherit; text-decoration: none; transition: background 0.15s, color 0.15s; }
.chips li:has(> a):hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); }
.chips a:hover { color: var(--text); }
.chips a::after { content: '\2192'; margin-left: -2px; opacity: 0.5; font-size: 12px; }
.chips a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* two columns, the right one dropped by a fifth of its width so the cards zig-zag */
.featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; }
.f-col { display: grid; gap: 18px; min-width: 0; }
.f-col-b { padding-top: 20%; }
.fcard { display: block; min-width: 0; }
.fcard-img { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--bg-raise); border: 1px solid rgba(255, 255, 255, 0.07); transition: border-color 0.25s, transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.fcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.fcard-body h3 { margin-top: 9px; font-size: 16px; font-weight: 700; font-stretch: 108%; letter-spacing: -0.01em; transition: color 0.2s; }
.fcard-body .meta { margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fcard-body .meta .yr { margin-right: 8px; }
.fcard-body .yr, .card-k { font-variant-numeric: tabular-nums; }
.fcard:hover .fcard-img, .fcard:focus-visible .fcard-img { border-color: rgba(255, 107, 53, 0.75); transform: translateY(-3px); box-shadow: 0 16px 36px -16px rgba(255, 107, 53, 0.5); }
.fcard:hover .fcard-img img { transform: scale(1.05); }
.fcard:hover .card-cta, .fcard:focus-visible .card-cta { opacity: 1; }
.fcard:hover h3 { color: var(--accent); }
.card-cta { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 10px; background: rgba(10, 8, 7, 0.55); opacity: 0; transition: opacity 0.25s var(--ease); }
.card-cta > span { padding: 7px 14px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 13.5px; font-weight: 650; white-space: nowrap; }

/* the project the live scene shows, top right over the scene. A media card: the photo fills the
   left column at the height of the title, text and buttons beside it, and a footer runs under both.
   On a narrow card the photo runs across the top instead (container queries on .scene-card). */
.scene-card {
  /* about four fifths of the space right of the text, so it covers little of the scene */
  position: absolute; z-index: 3; top: 86px; right: var(--gutter);
  width: min(calc((100vw - 2 * var(--gutter) - var(--left-w)) * 0.78), 760px);
  container-type: inline-size; border-radius: 18px; overflow: hidden;
  background: rgba(12, 10, 9, 0.64); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.sc-in {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); grid-template-areas: "media main" "foot foot";
  gap: 14px 18px; padding: 14px 16px 13px 14px;
}
.sc-media { grid-area: media; position: relative; min-height: 150px; border-radius: 12px; overflow: hidden; background: var(--bg-raise); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 12px 26px -14px rgba(0, 0, 0, 0.8); }
.sc-img { position: absolute; inset: 0; display: block; }
.sc-img img { width: 100%; height: 100%; object-fit: cover; object-position: 47% 45%; display: block; transition: transform 0.5s var(--ease); }
.sc-img:hover img { transform: scale(1.04); }
.sc-feat {
  position: absolute; top: 9px; left: 9px; pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 7px; border-radius: 999px;
  font-size: 12px; color: #f4c542; font-weight: 650; background: rgba(12, 10, 9, 0.74); border: 1px solid rgba(244, 197, 66, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sc-feat svg { width: 12px; height: 12px; }
.sc-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; padding-top: 2px; }
.scene-card h2 { font-size: clamp(22px, 1.8vw, 29px); font-weight: 800; font-stretch: 122%; letter-spacing: -0.03em; line-height: 1; text-wrap: balance; }
.sc-sub { margin-top: 6px; font-size: 13px; color: var(--muted); }
.sc-p { margin-top: 9px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.sc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; }
.sc-go { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 13.5px; font-weight: 650; transition: background 0.2s; }
.sc-actions .nav-drive { flex: none; padding: 8px 14px; font-size: 13.5px; }
.sc-go:hover { background: var(--accent); }
.sc-foot { grid-area: foot; min-width: 0; }
.sc-fact { padding: 7px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); }
.sc-fact b { color: var(--text); font-weight: 700; font-stretch: 110%; }
.sc-hint { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.sc-live { display: inline-flex; align-items: center; gap: 7px; margin-right: 2px; color: var(--text-2); }
.h-touch { display: none; }
.hero-live { display: none; }
@media (hover: none) { .h-fine { display: none; } .h-touch { display: inline; } }
/* a mid-width card (laptops): slightly tighter text, so the photo beside it stays wider than tall
   and shows the whole drone */
@container (max-width: 560px) {
  .sc-in { grid-template-columns: minmax(0, 0.84fr) minmax(0, 1fr); }
  .sc-p { font-size: 13.5px; line-height: 1.4; }
}
/* a short window: the fact repeats the "First author" chip on the left, so it gives way to the scene */
@media (max-height: 780px) and (min-width: 961px) {
  .sc-fact { display: none; }
  .sc-hint { margin-top: 0; }
}
/* a narrow card: the photo across the top, edge to edge, then the title, the buttons and the footer */
@container (max-width: 440px) {
  .sc-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "main" "foot"; gap: 11px; padding: 0 0 12px; }
  .sc-p, .sc-fact { display: none; } /* a narrow card keeps to the title and buttons, so the scene stays in view */
  .sc-media { min-height: 0; aspect-ratio: 2.6; border-radius: 0; box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .sc-img img { object-position: 47% 40%; }
  .sc-feat { top: 8px; left: 8px; font-size: 11.5px; padding: 2px 9px 2px 6px; }
  .sc-main, .sc-foot { padding: 0 15px; }
  .sc-main { padding-top: 0; }
  .sc-actions { padding-top: 11px; }
}

/* bottom right: a fanned hand of project photos and the count of what is below. Kept quiet:
   no motion unless hovered. */
.more {
  position: fixed; z-index: 4; right: var(--gutter); bottom: 22px;
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px 16px 22px; border-radius: 20px;
  background: rgba(12, 10, 9, 0.66); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.25s, opacity 0.2s linear;
}
.more.gone { pointer-events: none; }
.more:hover { border-color: rgba(230, 233, 237, 0.4); }
.more-fan { position: relative; flex: none; width: 206px; height: 84px; margin-left: 4px; }
.more-fan img {
  position: absolute; top: 6px; width: 96px; height: 72px; object-fit: cover; border-radius: 8px;
  border: 2px solid rgba(238, 233, 227, 0.9); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.8);
  transform-origin: 50% 130%; transition: transform 0.45s var(--ease);
}
.more-fan img:nth-child(1) { left: 0; transform: rotate(-12deg); }
.more-fan img:nth-child(2) { left: 27px; transform: rotate(-6deg); }
.more-fan img:nth-child(3) { left: 54px; transform: rotate(0deg); }
.more-fan img:nth-child(4) { left: 81px; transform: rotate(6deg); }
.more-fan img:nth-child(5) { left: 108px; transform: rotate(12deg); }
.more:hover .more-fan img:nth-child(1) { transform: translateX(-8px) rotate(-17deg); }
.more:hover .more-fan img:nth-child(2) { transform: translateX(-4px) rotate(-8deg); }
.more:hover .more-fan img:nth-child(4) { transform: translateX(4px) rotate(8deg); }
.more:hover .more-fan img:nth-child(5) { transform: translateX(8px) rotate(17deg); }
.more-txt { display: flex; align-items: center; gap: 12px; }
.more-n {
  font-size: 58px; font-weight: 800; font-stretch: 118%; letter-spacing: -0.04em; line-height: 1;
  background: linear-gradient(100deg, #ffffff 0%, #e6e9ed 38%, #b4bac2 72%, #eef0f3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.more-l { font-size: 16px; line-height: 1.25; font-weight: 550; color: var(--text-2); }
.more-arrow {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid rgba(255, 255, 255, 0.28); color: var(--text); font-size: 16px;
  transition: background 0.2s, color 0.2s;
}
.more:hover .more-arrow { background: var(--text); color: var(--bg); }
@media (prefers-reduced-motion: reduce) { .more-fan img { transition: none; } }

/* everything: one even grid, picture on top and words below, easy to scan */
.work { padding: 64px var(--gutter) 24px; scroll-margin-top: 56px; }
.work-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.work-head h2 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; font-stretch: 120%; letter-spacing: -0.025em; }
/* the sort: one segmented control; the pressed option only changes colour, so nothing shifts */
.sort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sort-l { font-size: 13.5px; color: var(--muted); }
.sort-g { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.02); }
.sort-g button { min-height: 32px; padding: 5px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; transition: background 0.2s, color 0.2s; }
.sort-g button:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.sort-g button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.sort-g button:focus-visible { outline-offset: 1px; }
/* the default order's groups; Concepts is the quieter subsection at the end */
.wgroup + .wgroup { margin-top: clamp(48px, 5vw, 72px); }
.wgroup-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 18px; }
.wgroup-head h3 { font-size: clamp(19px, 1.6vw, 24px); font-weight: 750; font-stretch: 115%; letter-spacing: -0.015em; }
.wgroup-head p { font-size: 14px; color: var(--muted); }
.wgroup-concepts { padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.wgroup-concepts .wgroup-head { margin-bottom: 16px; }
.wgroup-concepts .wgroup-head h3 { font-size: clamp(16px, 1.25vw, 18px); font-weight: 650; font-stretch: 110%; letter-spacing: 0; color: var(--text-2); }
.wgroup-concepts .wgroup-head p { font-size: 13.5px; }
.grid-concepts .card-img > img { filter: saturate(0.8) brightness(0.9); }
.grid-concepts .card:hover .card-img > img, .grid-concepts .card:focus-visible .card-img > img { filter: none; }
.grid-concepts .card-body b { font-size: 15.5px; color: var(--text-2); }
.grid-concepts .card:hover .card-body b { color: var(--accent); }
/* a quiet tag on short projects and concepts, only in the date-sorted list */
.card-g { display: none; position: absolute; z-index: 2; left: 10px; bottom: 10px; padding: 2px 9px; border-radius: 999px; background: rgba(10, 8, 7, 0.72); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--text-2); font-size: 12px; font-weight: 600; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.work-flat .card-g { display: block; }
.work-flat .pin { display: none; } /* pins order the default groups only */
.grid[hidden], .work-groups[hidden] { display: none; }
main [tabindex="-1"]:focus { outline: none; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 18px; }
@media (max-width: 1199px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } }
.card { display: block; min-width: 0; }
.card[hidden] { display: none; }
.card-img { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--bg-raise); border: 1px solid rgba(255, 255, 255, 0.07); isolation: isolate; transition: border-color 0.25s, transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.card-img > img, .card-img > .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-img > img { transition: transform 0.8s var(--ease), filter 0.4s; }
.card-body { display: grid; gap: 3px; margin-top: 11px; }
.card-k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
/* when it was made (months, else the year); on small cards it gets its own line */
.nw { white-space: nowrap; }
@media (max-width: 899px) { .card-d { display: block; margin-top: 1px; } .card-dot { display: none; } }
.card-body b { font-size: 16.5px; font-weight: 700; font-stretch: 106%; letter-spacing: -0.01em; line-height: 1.2; transition: color 0.2s; }
.card-s { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* phones: two-column cards are narrow, so the subtitle wraps to two lines instead of cutting off the key fact */
@media (max-width: 640px) { .card-s { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.35; } }
.card:hover .card-img, .card:focus-visible .card-img { border-color: rgba(255, 107, 53, 0.75); transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(255, 107, 53, 0.5); }
.card:hover .card-img > img { transform: scale(1.04); }
.card:hover .card-cta, .card:focus-visible .card-cta { opacity: 1; }
.card:hover b { color: var(--accent); }
.badge { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 2px 9px; border-radius: 999px; background: rgba(10, 8, 7, 0.72); border: 1px solid var(--accent); color: var(--accent); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); }
.badge.draft { left: auto; right: 10px; border-color: #e8c547; color: #e8c547; }
.pin {
  position: absolute; z-index: 2; top: 9px; right: 9px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #f4c542;
  background: rgba(10, 8, 7, 0.72); border: 1px solid rgba(244, 197, 66, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* archive: set apart below the main grid, photos muted until hovered */
.archive { margin: 80px var(--gutter) 0; padding: 48px 0 24px; border-top: 1px solid var(--line-strong); scroll-margin-top: 56px; }
.archive-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 24px; }
.archive-head h2 { font-size: clamp(22px, 2vw, 30px); font-weight: 800; font-stretch: 120%; letter-spacing: -0.02em; }
.archive-head p { font-size: 15px; color: var(--muted); }
.grid-archive .card-img > img { filter: saturate(0.7) brightness(0.85); }
.grid-archive .card:hover .card-img > img, .grid-archive .card:focus-visible .card-img > img { filter: none; }
/* prints and small models: photo prints at their own aspect ratio, tilted a little, title on the
   print's bottom margin; hovering straightens one. --ar, --tilt and --dy come from the build */
.collage { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px 30px; padding: 14px 0 26px; }
.pcard {
  --h: clamp(140px, 12vw, 185px);
  display: block; flex: none; width: calc(var(--h) * var(--ar) + 18px); max-width: min(100%, 420px);
  padding: 9px 9px 0; border-radius: 5px; background: #efe9e1; color: #3f3831;
  box-shadow: 0 22px 36px -22px rgba(0, 0, 0, 0.9), 0 2px 5px rgba(0, 0, 0, 0.3);
  transform: translateY(var(--dy, 0px)) rotate(var(--tilt, 0deg)); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.pcard-img { position: relative; display: block; aspect-ratio: var(--ar, 1.3333); border-radius: 2px; overflow: hidden; background: #d9d1c7; }
.pcard-img > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pcard-none { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #ddd5cb 0 9px, #d4cbc0 9px 18px); }
.pcard-t { display: block; padding: 8px 4px 11px; font-size: 13px; font-weight: 650; line-height: 1.25; text-align: center; text-wrap: balance; }
.pcard-d { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: #7d7267; font-variant-numeric: tabular-nums; }
.pcard:hover, .pcard:focus-visible { transform: translateY(calc(var(--dy, 0px) - 5px)) rotate(0deg) scale(1.04); box-shadow: 0 30px 44px -24px rgba(0, 0, 0, 0.95), 0 0 0 2px rgba(255, 107, 53, 0.7); }
.pcard:focus-visible { outline: none; }
@media (max-width: 640px) {
  .collage { gap: 26px 14px; padding-bottom: 12px; }
  .pcard { width: calc(50% - 8px); padding: 6px 6px 0; transform: translateY(calc(var(--dy, 0px) * 0.4)) rotate(calc(var(--tilt, 0deg) * 0.6)); }
  .pcard-t { font-size: 12px; padding: 6px 2px 8px; }
}
@media (prefers-reduced-motion: reduce) { .pcard { transition: none; } }
.about { margin: 80px var(--gutter) 0; padding: 56px 0 20px; border-top: 1px solid var(--line-strong); }
.home .footer { padding: 36px var(--gutter) 32px; }

.hud-go {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--bg);
  font-size: 14px; font-weight: 600; transition: background 0.2s;
}
.hud-go:hover { background: var(--accent); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); flex: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px; background: rgba(10, 8, 7, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 13px; color: var(--text-2); border: 1px solid rgba(255, 255, 255, 0.1);
}
.chip a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 3px; }
a.chip:hover { color: var(--text); border-color: var(--text-2); }

/* about (landing): the full width of the page (Jerry, Sept 27). A big title; the first paragraph as
   a lede across the text column, the rest in two columns; the contact card under the text; the
   portrait beside both */
.about-title { font-size: clamp(40px, 5.2vw, 76px); font-weight: 800; font-stretch: 122%; letter-spacing: -0.035em; line-height: 0.95; }
.about-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 23vw, 420px); grid-template-areas: "text photo" "contact photo";
  grid-template-rows: auto 1fr; gap: 0 clamp(28px, 4.5vw, 72px); align-items: start; margin-top: clamp(24px, 3vw, 40px);
}
.about-text { grid-area: text; columns: 2 280px; column-gap: clamp(28px, 3.6vw, 56px); orphans: 3; widows: 3; }
.about-text p { color: var(--text-2); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; }
.about-text p + p { margin-top: 14px; }
.about-text p:first-child { column-span: all; margin-bottom: 22px; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.3; font-weight: 550; letter-spacing: -0.01em; color: var(--text); max-width: 46ch; }
.about-text p:nth-child(2) { margin-top: 0; }
.portrait { grid-area: photo; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--bg-raise); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.contact-card { grid-area: contact; margin-top: 36px; padding: 26px 28px; border-radius: var(--radius-lg); background: rgba(20, 18, 16, 0.8); border: 1px solid var(--line); scroll-margin-top: 96px; }
/* the contact line: calm, not shouted (Jerry, Sept 28: "slightly less bold") */
.contact-card .contact-line { font-size: clamp(19px, 1.55vw, 23px); font-weight: 500; font-stretch: 104%; letter-spacing: -0.01em; line-height: 1.35; color: var(--text); max-width: 40ch; }
.contact-mail { display: grid; gap: 6px; margin-top: 16px; font-size: 16px; }
.contact-mail li { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.cm-l { min-width: 5.2em; color: var(--muted); }
.contact-mail a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.25); text-underline-offset: 4px; transition: color 0.2s, text-decoration-color 0.2s; overflow-wrap: anywhere; }
.contact-mail a:hover { color: var(--accent); text-decoration-color: currentColor; }
.footer-mail { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-mail a:hover { color: var(--text); }
.links-inline { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 15px; color: var(--text-2); }
.links-inline a { display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; }
.links-inline a:hover { color: var(--accent); }
.arrow { display: inline-block; transition: transform 0.25s var(--ease); }
a:hover .arrow { transform: translate(2px, -2px); }
.footer { padding: 36px 0 32px; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------ drive page */
.drive { overflow: hidden; height: 100vh; height: 100dvh; background: #2a1812; }
.drive-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.drive-hud { position: fixed; top: 16px; left: 16px; right: 16px; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.drive-keys { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 5; display: flex; gap: 16px; align-items: center; padding: 9px 16px; border-radius: 999px; background: rgba(10, 8, 7, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); font-size: 13px; color: var(--text-2); }
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-right: 3px; padding: 0 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); font: 600 12px var(--font); color: var(--text); }
.speed { color: var(--text); font-weight: 600; white-space: nowrap; }
kbd svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
kbd .ar-l { transform: rotate(-90deg); }
kbd .ar-d { transform: rotate(180deg); }
kbd .ar-r { transform: rotate(90deg); }
.drive-keys .dk-help { white-space: nowrap; }
.dk-grp { display: inline-flex; align-items: center; gap: 10px; }
.dk-grp b { color: var(--text); font-weight: 650; }
.dk-sep { align-self: stretch; width: 1px; margin: 2px 0; background: rgba(255, 255, 255, 0.16); }
.drive-load { position: fixed; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 8px; background: #1a100c; transition: opacity 0.8s var(--ease); }
.drive-load b { font-size: 26px; font-weight: 750; font-stretch: 118%; }
.drive-load span { color: var(--text-2); font-size: 14px; }
.drive-load.done { opacity: 0; pointer-events: none; }
/* undock / reattach */
.dock-bar { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: 10px; }
.dock-btn { white-space: nowrap; }
.dock-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border-radius: 999px;
  background: rgba(10, 8, 7, 0.62); border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--text); font-size: 14px; font-weight: 600; transition: border-color 0.2s, opacity 0.3s;
}
.dock-btn kbd { margin: 0; background: var(--text); color: var(--bg); border-color: var(--text); }
@media (pointer: coarse) { .dock-btn kbd { display: none; } } /* touch: the buttons say Tap, no key caps */
.dock-btn:hover { border-color: rgba(255, 255, 255, 0.5); }
/* one slow breath every two seconds (0.5 Hz) so the one thing to press is easy to find */
.dock-btn { animation: dock-pulse 2s ease-in-out infinite; }
@keyframes dock-pulse {
  0%, 100% { background-color: rgba(10, 8, 7, 0.62); border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 0 0 0 rgba(255, 244, 230, 0); }
  50% { background-color: rgba(92, 80, 70, 0.78); border-color: rgba(255, 255, 255, 0.55); box-shadow: 0 0 26px 2px rgba(255, 244, 230, 0.22); }
}
body[data-dock="detaching"] .dock-btn, body[data-dock="attaching"] .dock-btn, body[data-dock="lifting"] .dock-btn, body[data-dock="landing"] .dock-btn { animation: none; }
@media (prefers-reduced-motion: reduce) { .dock-btn { animation: none; } }
/* the dock buttons drop below the top-left chips wherever the two would meet */
@media (max-width: 1360px) { .dock-bar { top: 62px; } .view-label { top: 112px; } }
body[data-dock="detaching"] .dock-btn, body[data-dock="attaching"] .dock-btn, body[data-dock="lifting"] .f-btn, body[data-dock="landing"] .f-btn { opacity: 0.6; pointer-events: none; }
/* F only works while the two are latched; X only on the ground */
body[data-dock="split"] .f-btn, body[data-dock="detaching"] .f-btn, body[data-dock="attaching"] .f-btn,
body[data-dock="lifting"] .x-btn, body[data-dock="carried"] .x-btn, body[data-dock="landing"] .x-btn { display: none; }
.split-line { position: fixed; top: 0; bottom: 0; left: var(--split, 0%); width: 2px; margin-left: -1px; z-index: 3; background: rgba(238, 233, 227, 0.85); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
body.is-split .split-line { opacity: 1; }
.view-label {
  position: fixed; top: 64px; z-index: 5; display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-radius: 999px; background: rgba(10, 8, 7, 0.6); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 13px; color: var(--text-2); opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.view-label b { color: var(--text); font-weight: 700; }
.view-label kbd { margin-right: 2px; }
.vl-alt { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.16); }
body.split-wide .view-label { opacity: 1; }
.vl-drone { left: 16px; }
.vl-rover { left: calc(var(--split, 50%) + 16px); }
.dock-caption {
  position: fixed; left: 50%; bottom: 76px; z-index: 5; transform: translate(-50%, 8px);
  width: max-content; max-width: min(760px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 14px;
  background: rgba(10, 8, 7, 0.66); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 15px; line-height: 1.45; text-align: center; color: var(--text);
  opacity: 0; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); pointer-events: none;
}
.dock-caption.on { opacity: 1; transform: translate(-50%, 0); }
/* portrait screens stack the views: drone on top, rover below */
body.split-v .split-line { top: var(--split, 0%); bottom: auto; left: 0; right: 0; width: auto; height: 2px; margin: -1px 0 0; }
body.split-v .vl-rover { left: 12px; top: calc(var(--split, 50%) + 12px); }
body.split-v .vl-drone { left: 12px; top: 64px; }
@media (max-width: 1360px) { body.split-v .vl-drone { top: 112px; } } /* clear of the X button */
body.split-v .feed { width: 100%; bottom: auto; height: var(--split, 0%); }
@media (max-width: 640px) {
  .drive-keys .dk-help, .drive-keys .dk-help + .dk-sep { display: none; }
  .drive-keys { gap: 12px; }
  .dock-bar { flex-direction: column; align-items: center; gap: 8px; }
  body.is-split .drive-title { display: none; }
  .drive-keys { padding: 8px 14px; }
  .dock-caption { font-size: 14px; }
}
/* the belly camera feed and the AprilTag detection drawn over it */
.feed { position: fixed; z-index: 3; top: 0; bottom: 0; left: 0; width: var(--split, 0%); pointer-events: none; opacity: 0; transition: opacity 0.5s; box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.45); }
body.feed-on .feed { opacity: 1; }
.feed-l { position: absolute; left: 16px; bottom: 76px; font-size: 12px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: #9df0c0; }
.feed i { position: absolute; width: 26px; height: 26px; border: 2px solid rgba(157, 240, 192, 0.8); }
.feed i:nth-of-type(1) { left: 14px; top: 110px; border-right: 0; border-bottom: 0; }
.feed i:nth-of-type(2) { right: 14px; top: 110px; border-left: 0; border-bottom: 0; }
.feed i:nth-of-type(3) { left: 14px; bottom: 110px; border-right: 0; border-top: 0; }
.feed i:nth-of-type(4) { right: 14px; bottom: 110px; border-left: 0; border-top: 0; }
.tag-overlay { position: fixed; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tag-overlay polygon { fill: rgba(61, 220, 132, 0.12); stroke: #3ddc84; stroke-width: 2; stroke-linejoin: round; transition: stroke-width 0.2s; }
.tag-overlay circle { fill: #3ddc84; }
.tag-overlay line { stroke: #3ddc84; stroke-width: 1.5; }
.tag-overlay text { fill: #d9ffe9; font: 650 13px var(--font); paint-order: stroke; stroke: rgba(0, 0, 0, 0.55); stroke-width: 3px; }
body[data-tag="locked"] .tag-overlay polygon { stroke-width: 3.5; fill: rgba(61, 220, 132, 0.2); }
/* touch: one pad for the rover, a second for the drone once they are apart */
.pad { display: none; }
@media (hover: none) and (pointer: coarse) {
  .pad { position: fixed; z-index: 5; bottom: 16px; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
  .pad > div { display: flex; gap: 8px; }
  .pad button { pointer-events: auto; width: clamp(44px, 12.5vw, 56px); height: clamp(44px, 12.5vw, 56px); border-radius: 50%; background: rgba(10, 8, 7, 0.55); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--text); font-size: 18px; backdrop-filter: blur(8px); touch-action: none; }
  .pad button.on { background: var(--accent); color: #1a0b04; }
  .pad-l { font-size: 12px; font-weight: 650; color: var(--text-2); opacity: 0; }
  .pad-rover { right: 12px; }
  .pad-drone { left: 12px; display: none; }
  body[data-dock="split"] .pad-drone { display: grid; }
  body[data-dock="split"] .pad-l { opacity: 1; }
  .drive-keys { left: 12px; bottom: 16px; transform: none; } /* the corner the drone pad leaves free until the split */
  .drive-keys .dk-help, .drive-keys .dk-help + .dk-sep { display: none; }
  body.split-wide .drive-keys { display: none; } /* each view's own label carries its speed */
  .view-label .vl-keys { display: none; }
  body.split-v .vl-drone { top: 64px; }
  .dock-bar { top: auto; bottom: 178px; flex-direction: column; align-items: center; }
  .view-label { top: 64px; }
  .dock-caption { bottom: 236px; font-size: 14px; }
}

/* ------------------------------------------------------------ project page */
.page { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.p-head { padding: clamp(36px, 7vh, 80px) 0 28px; }
.p-kicker { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.p-kicker a { color: var(--text-2); }
.p-kicker a:hover { color: var(--accent); }
.p-title { font-size: clamp(40px, 6vw, 88px); font-weight: 800; font-stretch: 122%; letter-spacing: -0.035em; line-height: 0.92; }
.p-sub { margin-top: 14px; font-size: clamp(18px, 1.6vw, 22px); color: var(--text-2); font-weight: 450; }
.p-lede { margin-top: 22px; max-width: 46ch; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; color: var(--text); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; margin-top: 34px; background: var(--line); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.stat { background: var(--bg); padding: 18px 20px; }
.stat b { display: block; font-size: clamp(22px, 2.2vw, 30px); font-weight: 750; font-stretch: 115%; letter-spacing: -0.02em; line-height: 1.1; }
.stat span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.35; }
/* phones: two columns, and an odd last stat takes the full row so no empty cell shows */
@media (max-width: 560px) { .stats { grid-template-columns: 1fr 1fr; } .stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.hero-media { margin-top: 28px; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-raise); }
.hero-media video, .hero-media img { width: 100%; max-height: 78vh; object-fit: contain; background: var(--bg-sunk); }
.p-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 5vw, 80px); padding: 56px 0 24px; }
.prose h2 { font-size: 13px; font-weight: 600; font-stretch: 110%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.prose section + section { margin-top: 36px; }
.prose p { font-size: 17.5px; line-height: 1.65; color: var(--text); max-width: 64ch; }
.prose p + p { margin-top: 14px; }
.facts { position: sticky; top: 76px; align-self: start; display: grid; gap: 18px; font-size: 14.5px; }
.facts dt { font-size: 12px; font-weight: 600; font-stretch: 110%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.facts dd { margin: 0; color: var(--text-2); line-height: 1.45; }
.facts dl { margin: 0; display: grid; gap: 18px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { padding: 3px 10px; border-radius: 999px; background: var(--bg-raise); border: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }
.btn-row { display: grid; gap: 8px; }
.btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line-strong);
  font-size: 14.5px; font-weight: 550; transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.gallery { columns: 2; column-gap: 16px; padding: 24px 0 8px; }
.gallery figure { break-inside: avoid; margin: 0 0 16px; }
.gallery .m { border-radius: var(--radius); overflow: hidden; background: var(--bg-raise); }
.gallery video, .gallery img { width: 100%; height: auto; }
figcaption { margin-top: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.block-title { font-size: 13px; font-weight: 600; font-stretch: 110%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 40px; border-top: 1px solid var(--line); margin-top: 32px; }
.cad { margin-top: 16px; position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, #1c1814, var(--bg-sunk)); border: 1px solid var(--line); }
.cad iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cad-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; color: var(--text-2); font-size: 14px; }
.cad-load b { font-size: 20px; font-weight: 700; font-stretch: 112%; color: var(--text); }
.cad-load .hud-go { margin-top: 6px; }
.next {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 56px 0 0; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.next .label { display: block; margin-bottom: 6px; }
.next b { font-size: clamp(22px, 2.6vw, 36px); font-weight: 750; font-stretch: 118%; letter-spacing: -0.02em; transition: color 0.2s; }
.next:hover b { color: var(--accent); }
.next .big-arrow { font-size: 32px; color: var(--muted); transition: transform 0.3s var(--ease), color 0.2s; }
.next:hover .big-arrow { transform: translateX(6px); color: var(--accent); }
.pending { margin-top: 28px; padding: 36px; border-radius: var(--radius-lg); border: 1px dashed var(--line-strong); color: var(--muted); text-align: center; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .p-grid { grid-template-columns: 1fr; }
  .facts { position: static; }
  .hero { --left-w: min(56vw, 760px); }
}
@media (max-width: 960px) {
  .hero { min-height: auto; padding-top: max(46vh, 412px); padding-bottom: 120px; } /* the name starts below the featured card */
  .hero-left { width: 100%; }
  /* phones and small tablets: the top of the first screen, under the nav and above the name, is a
     clear window onto the live scene (world.js frames the vehicle at its centre); the featured card
     follows the chips instead of covering the scene (Jerry, Sept 29) */
  .veil { background: linear-gradient(180deg, rgba(10, 8, 7, 0.35) 0, rgba(10, 8, 7, 0.04) 90px, rgba(10, 8, 7, 0.04) calc(max(46vh, 412px) - 80px), rgba(10, 8, 7, 0.8) calc(max(46vh, 412px) + 24px), rgba(10, 8, 7, 0.9) 78%); }
  .bg-still { object-position: 52% 36%; transform: translateY(calc((62px + max(46vh, 412px)) / 2 - 35.4vh)); }
  .hero-left { display: contents; }
  .hello { order: 1; }
  .scene-card { order: 2; position: relative; top: auto; right: auto; width: auto; margin: 4px 0 28px; }
  .featured { order: 3; }
  .hero-live { display: block; position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); top: calc(max(46vh, 412px) - 44px); margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--text-2); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); pointer-events: none; }
  .scene-card .sc-hint { display: none; }
  .scene-card h2 { font-size: clamp(18px, 5.3vw, 22px); }
  .sc-hint { margin-top: 0; padding-top: 9px; }
  .more { right: auto; left: 50%; transform: translateX(-50%); bottom: 14px; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 16px; }
  .more-fan { width: 110px; height: 54px; margin-left: 0; }
  .more-fan img { width: 60px; height: 45px; top: 4px; }
  .more-fan img:nth-child(n + 4) { display: none; }
  .more-fan img:nth-child(2) { left: 24px; } .more-fan img:nth-child(3) { left: 48px; }
  .more-n { font-size: 36px; }
  .more-l { font-size: 13px; white-space: nowrap; }
}
@media (max-width: 640px) {
  .nav-links a:not(.nav-cta):not(.keep) { display: none; }
  .nav-links { gap: 8px; }
  .nav-drive, .nav-cta { padding: 6px 11px; font-size: 13px; }
  .featured { gap: 12px 10px; }
  .fcard-body p:not(.meta) { display: none; }
  .grid { gap: 20px 10px; }
  .card-body b { font-size: 14.5px; }
  .more-arrow { width: 30px; height: 30px; }
  .sort-l { display: none; }
  .sort-g button { padding: 5px 11px; font-size: 13px; }
  .card-g { left: 7px; bottom: 7px; padding: 1px 7px; font-size: 11px; }
  .card-cta { display: none; }
  .archive { margin-top: 48px; padding-top: 32px; }
  .about-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "photo" "contact"; }
  .portrait { aspect-ratio: 1; margin-top: 26px; } /* the full width, square: head to the rover he holds */
  .contact-card { margin-top: 28px; padding: 22px; }
  .gallery { columns: 1; }
  .next .big-arrow { display: none; }
  .chips li { font-size: 12.5px; }
}

.card-img > .placeholder { display: grid; place-items: center; padding-bottom: 36px; color: var(--muted); font-size: 12px; background: repeating-linear-gradient(135deg, var(--bg-raise) 0 10px, #171411 10px 20px); }

/* ------------------------------------------------------------ rich project pages
   Pages built from src/pages/<slug>.mjs (tools/rich.mjs) with the runtime in assets/js/project.js.
   Everything here is scoped to .rich / .rx-*, so the simple project pages are untouched. */
.rich { --nav-h: 58px; }
@media (max-width: 640px) { .rich { --gutter: 22px; } }
.rx { overflow-x: clip; }
.rx-w { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.rx-sec { padding-top: clamp(56px, 8vw, 104px); scroll-margin-top: var(--nav-h); }
.rx-h2 { max-width: 26ch; font-size: clamp(26px, 2.9vw, 40px); font-weight: 800; font-stretch: 118%; letter-spacing: -0.025em; line-height: 1.06; text-wrap: balance; }
.rx-h2 + * { margin-top: 20px; }
.rx-lead { margin-bottom: 24px; }
.rx-intro { padding-top: 48px; }
.rx-intro-facts { grid-template-columns: minmax(0, 1fr); }
.rx-intro-facts .facts { position: static; }
.rx-intro-facts .facts dl { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* text: the reading measure and the small block shapes page modules can use */
.rx-text { max-width: 68ch; }
/* the reading column: headings, prose and lead text sit centred, so text never hugs one side of a
   wide screen; pictures and 3D use the full width around it */
.rx-col { max-width: 720px; margin-inline: auto; }
.rx-col .rx-text { max-width: none; }
.rx-col > .rx-h2 { max-width: 30ch; }
.rx-inline-fig { margin: 26px 0; }
.rx-inline-fig.rx-bleed { width: min(1140px, calc(100vw - 2 * var(--gutter))); margin-left: 50%; transform: translateX(-50%); }
/* prose with media: each run of paragraphs with its picture beside it (pinned while the run is read) */
.rx-pm .rx-h2 + .rx-pm-row { margin-top: 28px; }
.rx-pm-row { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(28px, 4.2vw, 68px); align-items: start; }
.rx-pm-row + .rx-pm-row { margin-top: clamp(40px, 5.5vw, 76px); }
.rx-pm-row > .rx-text { max-width: 64ch; }
.rx-pm-fig { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 18px; }
.rx-pm-left .rx-pm-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.rx-pm-left .rx-pm-fig { order: -1; }
/* one picture beside its text fills the column (Jerry, Sept 27: no blank space around a small
   picture): as tall as the text beside it, up to the screen under the nav, cropped to fill (--focus
   keeps what matters in view; the lightbox shows it whole). Never cropped past about 45 % of either
   side: a very wide picture stays wider than tall and lines up with the top of its text. */
@media (min-width: 901px) {
  .rx-pm-one { align-items: stretch; }
  .rx-pm-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .rx-pm-left .rx-pm-wide { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .rx-pm-one .rx-pm-fig {
    container-type: inline-size; align-self: start; display: flex; flex-direction: column;
    height: min(100%, calc(100vh - var(--nav-h) - 48px)); height: min(100%, calc(100svh - var(--nav-h) - 48px));
  }
  .rx-pm-one .rx-pm-fig > .rx-fig { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .rx-pm-one .rx-pm-fig .rx-m {
    flex: 1 1 0; aspect-ratio: auto;
    min-height: min(calc(100cqw / var(--ar, 1.5) * 0.55), calc(100svh - var(--nav-h) - 110px));
    max-height: calc(100cqw / var(--ar, 1.5) / 0.55);
  }
}
/* a row of several pictures under its text, full width at a readable size */
.rx-pm-under { margin-top: clamp(22px, 3vw, 34px); }
.rx-pm-under .rx-row { margin-inline: auto; }
.rx-pm-row + .rx-pm-under, .rx-pm-solo + .rx-pm-row, .rx-pm-under + .rx-pm-row, .rx-pm-solo + .rx-pm-solo, .rx-pm-row + .rx-pm-solo { margin-top: clamp(40px, 5.5vw, 76px); }
.rx-pm-row + .rx-pm-under { margin-top: clamp(26px, 3.4vw, 40px); }
.rx-pm .rx-h2 + .rx-pm-solo, .rx-pm .rx-col + .rx-pm-solo { margin-top: 28px; }
.rx-pm-solo > .rx-text { max-width: 64ch; }
.rx-text p, .rx-text li { font-size: 17.5px; line-height: 1.65; color: var(--text); }
.rx-summary p { font-size: clamp(18px, 1.45vw, 20px); line-height: 1.6; color: var(--text-2); }
.rx-text > * + * { margin-top: 14px; }
.rx-text h3 { margin-top: 30px; font-size: 19px; font-weight: 700; font-stretch: 110%; letter-spacing: -0.01em; line-height: 1.25; }
.rx-text h3:first-child { margin-top: 0; }
.rx-text ul, .rx-text ol { padding-left: 1.3em; }
.rx-text ul { list-style: disc; }
.rx-text ol { list-style: decimal; }
.rx-text li + li { margin-top: 6px; }
.rx-text li::marker { color: var(--muted); }
.rx-text strong { font-weight: 700; color: var(--text); }
.rx-text a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(255, 107, 53, 0.4); text-underline-offset: 3px; }
.rx-text a:hover { text-decoration-color: var(--accent); }
.rx-text code, .rx-text pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; }
.rx-text code { padding: 1px 6px; border-radius: 6px; background: var(--bg-raise); border: 1px solid var(--line); }
.rx-text pre { max-width: 100%; overflow-x: auto; padding: 14px 16px; border-radius: 12px; background: var(--bg-sunk); border: 1px solid var(--line); line-height: 1.5; }
.rx-text pre code { padding: 0; border: 0; background: none; }
.rx-text blockquote { margin: 22px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); }
.rx-text blockquote p { font-size: 19px; color: var(--text); }
.rx-text cite { display: block; margin-top: 6px; font-style: normal; font-size: 14px; color: var(--muted); }
.rx-text .rx-note-p { font-size: 14.5px; color: var(--muted); }
/* problem (red) / fix (green) / next time (blue) markers in the engineering story */
.rx-flag { --flag: 255, 92, 92; margin: 16px 0 0; padding: 12px 16px 13px; border-radius: 12px; border: 1px solid rgba(var(--flag), 0.38); border-left-width: 4px; background: rgba(var(--flag), 0.08); }
.rx-flag-fix { --flag: 52, 199, 110; }
/* worked calculations */
.rx-calc { container-type: inline-size; margin: 16px 0 0; padding: 13px 16px 14px; border-radius: 12px; border: 1px solid rgba(255, 196, 64, 0.34); border-left-width: 4px; background: rgba(255, 196, 64, 0.06); }
.rx-text .rx-calc p { margin: 0; font-size: 16px; }
.rx-text .rx-calc .rx-calc-label { margin-bottom: 8px; font-size: 14.5px; color: var(--text); }
.rx-calc-label span { display: inline-block; margin-right: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(255, 196, 64); background: rgba(255, 196, 64, 0.14); border: 1px solid rgba(255, 196, 64, 0.4); vertical-align: 1px; }
.rx-calc-given { overflow-x: auto; }
.rx-calc-given table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rx-calc-given th, .rx-calc-given td { padding: 4px 10px 4px 0; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.rx-calc-given th { width: 32%; font-weight: 500; color: var(--text-2); }
.rx-calc-given td { color: var(--text); font-variant-numeric: tabular-nums; }
.rx-calc-given td.rx-calc-src { width: 28%; color: var(--muted); font-size: 13px; }
/* in a narrow box (beside a picture, in a split row or a step card, on a phone) each input is the
   name beside its value, with the source under the value */
@container (max-width: 560px) {
  .rx-calc-given table, .rx-calc-given tbody { display: block; }
  .rx-calc-given tr { display: grid; grid-template-columns: minmax(7.5em, 40%) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  .rx-calc-given th, .rx-calc-given td { width: auto; padding: 0; border: 0; }
  .rx-calc-given th { grid-row: span 2; }
  .rx-calc-given td.rx-calc-src { grid-column: 2; width: auto; padding-top: 1px; }
  .rx-calc-given td:empty { display: none; }
}
.rx-calc-work { margin: 10px 0 0; padding-left: 20px; font-variant-numeric: tabular-nums; }
.rx-text .rx-calc-work li { margin: 3px 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.rx-text .rx-calc .rx-calc-result { margin-top: 10px; font-weight: 600; color: var(--text); }
.rx-text .rx-calc .rx-calc-note { margin-top: 6px; font-size: 13.5px; color: var(--muted); }

.rx-flag-next { --flag: 72, 150, 255; }
.rx-flag + .rx-flag { margin-top: 8px; }
.rx-text .rx-flag p { margin: 0; font-size: 16px; }
.rx-text .rx-flag p + p { margin-top: 8px; }
.rx-text .rx-flag .rx-flag-label { margin-bottom: 6px; font-size: 14.5px; color: var(--text); }
.rx-flag-label span { display: inline-block; margin-right: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--flag)); background: rgba(var(--flag), 0.16); border: 1px solid rgba(var(--flag), 0.42); vertical-align: 1px; }
.rx-table { max-width: 100%; overflow-x: auto; }
.rx-table table { border-collapse: collapse; min-width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
.rx-table caption { caption-side: bottom; padding-top: 8px; text-align: left; font-size: 13.5px; color: var(--muted); }
.rx-table th, .rx-table td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rx-table th { font-size: 12px; font-weight: 600; font-stretch: 110%; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rx-table td { color: var(--text-2); }

/* media: figures keep their own aspect ratio (--ar, written by the build) */
.rx-fig { margin: 0; min-width: 0; }
.rx-m { position: relative; display: block; aspect-ratio: var(--ar, 16 / 9); border-radius: var(--radius); overflow: hidden; background: var(--bg-raise); }
.rx-m > video, .rx-m > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
a.rx-m { cursor: zoom-in; }
a.rx-m > img { transition: transform 0.6s var(--ease); }
a.rx-m:hover > img { transform: scale(1.02); }
.rx-fig figcaption, .rx-cap { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.rx-missing .rx-m { display: grid; place-items: center; padding: 12px; border: 1px dashed #e8c547; color: #e8c547; font-size: 13px; text-align: center; background: none; }
.rx-hero { margin-top: 28px; }
.rx-hero-single .rx-m { border-radius: var(--radius-lg); max-height: 78vh; aspect-ratio: auto; background: var(--bg-sunk); }
.rx-hero-single .rx-m > video, .rx-hero-single .rx-m > img { height: auto; max-height: 78vh; aspect-ratio: var(--ar); object-fit: contain; }
.rx-hero-row .rx-m { border-radius: var(--radius-lg); }
.rx-hero-row .rx-row { margin-inline: auto; }
/* one row, equal heights: each item grows in proportion to its aspect ratio (scaled up, since
   grow factors that sum below 1 would leave the row part empty); --sum, the row's total aspect
   ratio, caps the row so it is never taller than about three quarters of the screen */
/* gaps between pictures (Jerry, Sept 28: the e-bike "More pictures" were too close together): a
   row keeps 12 to 18 px between items, a grid 16 to 24 px across and 28 to 38 px down, room for
   each caption before the next picture */
.rx-row { display: flex; gap: clamp(12px, 1.25vw, 18px); align-items: flex-start; max-width: calc(var(--sum, 20) * min(72vh, 680px)); }
.rx-row > .rx-fig { flex: calc(var(--ar) * 100) 1 0%; }
/* a section heading with no lead text keeps the same room above its pictures as one with a lead */
.rx-col + .rx-row, .rx-col + .rx-grid, .rx-col + .rx-wide, .rx-col + .rx-collage { margin-top: 24px; }
.rx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 2.6vw, 38px) clamp(16px, 1.65vw, 24px); grid-auto-flow: dense; }
.rx-grid.rx-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rx-grid .rx-fig { display: flex; flex-direction: column; }
.rx-grid .rx-m { aspect-ratio: 4 / 3; }
.rx-grid .rx-tall { grid-row: span 2; }
.rx-grid .rx-tall .rx-m { flex: 1; aspect-ratio: auto; min-height: 280px; }
.rx-wide { display: grid; gap: 28px; }
.rx-wide .rx-m { border-radius: var(--radius-lg); }
/* collage: small prints as slightly tilted photo cards */
.rx-collage { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 24px; padding: 14px 0 6px; }
.rx-collage .rx-fig {
  width: clamp(150px, 21vw, 250px); padding: 9px 9px 11px; border-radius: 6px; background: #efe9e1;
  box-shadow: 0 22px 36px -22px rgba(0, 0, 0, 0.9); transform: rotate(var(--tilt, 0deg)); transition: transform 0.4s var(--ease);
}
.rx-collage .rx-m { border-radius: 3px; background: #d9d1c7; }
.rx-collage figcaption { margin-top: 8px; color: #4d453d; font-size: 12.5px; text-align: center; }
.rx-collage .rx-fig:hover, .rx-collage .rx-fig:focus-within { transform: rotate(0deg) translateY(-4px) scale(1.03); }

/* interactive blocks: a sized stage (the module's canvas fills it) and a controls strip */
.rx-demo { margin-top: 24px; }
.rx-h2 + .rx-demo, .rx-text + .rx-demo { margin-top: 24px; }
.rx-stage {
  position: relative; isolation: isolate; overflow: hidden; height: var(--h, clamp(320px, 62vh, 620px));
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 50% 40%, #2d2620, #110e0c 78%);
}
.rx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.rx-poster { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s var(--ease); }
[data-state="live"] .rx-poster { opacity: 0; pointer-events: none; }
.rx-status, .rx-note, .rx-hint {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 9px; margin: 0;
  padding: 6px 12px; border-radius: 999px; background: rgba(10, 8, 7, 0.66); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: var(--rx-ov-small); color: var(--text-2);
}
.rx-status { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
[data-state="loading"] .rx-status { opacity: 1; transition: opacity 0.3s 0.25s; }
.rx-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: var(--accent); animation: rx-spin 0.9s linear infinite; }
@keyframes rx-spin { to { transform: rotate(360deg); } }
.rx-note { left: var(--rx-edge); bottom: 12px; max-width: calc(100% - 2 * var(--rx-edge)); }
.rx-note[hidden] { display: none; }
.rx-load { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; }
[data-state="ask"] .rx-load { display: inline-flex; }
.rx-hint { left: var(--rx-edge); bottom: 12px; pointer-events: none; transition: opacity 0.6s; }
.rx-hint.gone { opacity: 0; }
.rx-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 14px; }
.rx-panel:empty { display: none; }
/* text beside the canvas */
.rx-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.rx-aside-right { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.rx-aside-right .rx-aside-txt { order: 2; }
.rx-aside .rx-demo { margin-top: 0; }

/* scrolly: a sticky stage the full width of the screen (Jerry, Sept 27: every scroll animation is
   full width). Each step owns a slot of scrolling (the li, --step-h tall): its card rises into
   place over the left of the stage, stays pinned (sticky) while its part of the animation runs,
   then leaves as the next card arrives and pins. project.js writes each card's pinned top, a
   longer slot for a tall card and the list's padding (so the first card is in place when the stage
   pins and the last lets go with it), and computes the progress from the same numbers. */
.rx-scrolly {
  margin-top: 28px;
  --rx-gap: 10vh;                                          /* between one card and the next */
  --rx-card-l: max(var(--gutter), calc((100vw - 1640px) / 2));  /* the cards' left edge */
  --rx-card-w: clamp(360px, 37vw, 540px);
}
.rx-scrolly-body { position: relative; }
.rx-scrolly-stage { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); }
.rx-scrolly .rx-stage { height: 100%; border-radius: 0; border-width: 1px 0; }
.rx-steps { position: relative; z-index: 5; margin: calc(-100vh + var(--nav-h)) 0 0; margin-top: calc(-100svh + var(--nav-h)); padding: 0 var(--gutter) 0 var(--rx-card-l); list-style: none; pointer-events: none; }
.rx-step { height: var(--step-h, 80vh); padding-bottom: var(--rx-gap); }
.rx-step:last-child { padding-bottom: 0; }
.rx-step-card {
  position: sticky; top: calc(var(--nav-h) + 14vh);
  pointer-events: auto; width: min(var(--rx-card-w), 100%); padding: 24px 28px; border-radius: 16px;
  background: rgba(12, 10, 9, 0.78); border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.9);
  opacity: 0.5; transition: opacity 0.35s var(--ease);
}
.rx-step.is-active .rx-step-card { opacity: 1; }
/* a card whose step has not come yet: hidden until the step before it has played out (project.js) */
.rx-steps .rx-step .rx-step-card.is-later { opacity: 0; pointer-events: none; }
/* once the runtime drives the cards, their fades follow the scroll (--o, written by project.js) */
.rx-steps.rx-linked .rx-step .rx-step-card { opacity: var(--o, 1); transition: none; }
.rx-step-card p, .rx-step-card li { font-size: 22px; line-height: 1.5; } /* 1.4x, Jerry Sept 26 */
.rx-step-card h3 { font-size: 25px; }
.rx-step-card .rx-h2 { font-size: clamp(26px, 2.4vw, 34px); }
.rx-step-card .rx-cap { margin-top: 16px; }
/* blocks inside a card keep their own sizes (the card's 22 px is for its paragraphs) */
.rx-step-card .rx-calc p { font-size: 17px; line-height: 1.5; }
.rx-step-card .rx-calc-given table { font-size: 15px; }
.rx-step-card .rx-calc-work li { font-size: 15.5px; }
.rx-step-card .rx-calc .rx-calc-note { font-size: 14px; }
/* a 2D scrolly draws in the part of the stage the cards leave free (project.js) */
.rx-free { position: absolute; top: 0; right: 0; bottom: 0; left: var(--rx-cover, 0px); }
/* the stage's own notes (WebGL off, could not load) sit clear of the cards */
@media (min-width: 901px) { .rx-scrolly:not(.rx-stepless) .rx-note { left: auto; right: var(--rx-edge); } }
/* a scrolly without steps: the stage stays pinned for --len of scrolling */
.rx-stepless .rx-scrolly-body { min-height: var(--len, 180vh); }

/* Readable overlays (Jerry, Sept 28: a popup was "too small. whenever you do popups like these
   make sure they are big enough"). The floors for everything drawn over a stage: readouts (.rx-hud),
   insets (.rx-inset: a diagram, a photo, a second view), legends and cards, labels pinned to the
   model. Page modules use these variables for overlay text, never a smaller px size of their own. */
:root {
  --rx-ov-text: 15px;    /* body text of a readout, inset, legend or card */
  --rx-ov-small: 13px;   /* the smallest text over a stage: notes, units, captions, uppercase heads */
  --rx-ov-label: 14px;   /* labels pinned to the model */
  --rx-ov-big: 30px;     /* a readout's headline number */
  --rx-hud-w: 400px;     /* a readout's width */
  --rx-inset-w: clamp(300px, 26vw, 460px);  /* an inset's width: at least a quarter of a 1200 px stage */
}
@media (max-width: 640px) {
  :root { --rx-ov-text: 13px; --rx-ov-small: 12px; --rx-ov-label: 12.5px; --rx-ov-big: 20px; --rx-inset-w: min(56%, 260px); }
}

/* a small instrument panel over a scroll-driven stage (numbers that follow the scroll) */
.rx-hud {
  position: absolute; top: 14px; right: var(--rx-edge); width: min(var(--rx-hud-w), calc(100% - 2 * var(--rx-edge))); padding: 13px 16px 14px;
  border-radius: 14px; background: rgba(10, 8, 7, 0.8); border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--rx-ov-text); line-height: 1.35; color: var(--text-2);
}
.rx-hud table, .rx-inset table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.rx-hud th, .rx-inset th { padding: 0 0 4px 10px; font-size: var(--rx-ov-small); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); text-align: right; }
.rx-hud td, .rx-inset td { padding: 5px 0 5px 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); text-align: right; font-weight: 650; color: var(--text); white-space: nowrap; }
.rx-hud td:first-child, .rx-inset td:first-child { padding-left: 0; text-align: left; font-weight: 550; color: var(--text-2); white-space: normal; }
.rx-hud small, .rx-inset small { display: block; font-size: var(--rx-ov-small); font-weight: 500; color: var(--muted); }
.rx-hud-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.rx-hud-row b, .rx-hud-bars b { color: var(--text); font-weight: 650; }
.rx-hud i, .rx-inset i { display: block; flex-basis: 100%; height: 6px; margin-top: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.rx-hud i em, .rx-inset i em { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--accent); }
.rx-hud-big { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.rx-hud-big b { font-size: var(--rx-ov-big); line-height: 1; }
.rx-hud-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.rx-hud-bars > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; }
.rx-hud-mini { display: none; }
/* an inset: a diagram, a photo or a second view of the scene, at least --rx-inset-w wide, in the
   bottom-right corner (clear of the step cards, which sit over the left of the stage) */
.rx-inset {
  position: absolute; right: var(--rx-edge); bottom: 14px; z-index: 2; width: var(--rx-inset-w); margin: 0; padding: 12px 14px;
  border-radius: 14px; background: rgba(10, 8, 7, 0.82); border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--rx-ov-text); line-height: 1.35; color: var(--text-2); pointer-events: none;
}
.rx-inset > img, .rx-inset > canvas, .rx-inset > svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.rx-inset figcaption { margin-top: 8px; font-size: var(--rx-ov-small); line-height: 1.4; color: var(--text-2); }
.rx-inset.rx-inset-photo { padding: 0; background: none; border: 0; }
.rx-inset.rx-inset-photo > img { border-radius: 12px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9); }
.rx-inset.rx-inset-photo figcaption { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(10, 8, 7, 0.8); }
@media (max-width: 640px) {
  .rx-hud { top: 8px; right: 8px; left: 8px; width: auto; padding: 8px 11px 9px; }
  .rx-hud .rx-hud-x, .rx-hud table, .rx-inset .rx-hud-x { display: none; }
  .rx-hud-mini { display: block; margin-top: 4px; color: var(--text); font-weight: 600; }
  .rx-hud-big { margin-top: 4px; padding-top: 4px; }
  .rx-inset { right: 8px; bottom: 8px; padding: 8px 10px; }
}

/* split: picture and text side by side, alternating */
.rx-split-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.rx-h2 + .rx-split-row { margin-top: 28px; }
.rx-split-row + .rx-split-row { margin-top: clamp(40px, 6vw, 72px); }
.rx-split-row.rx-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.rx-flip .rx-split-vis { order: 2; }
.rx-split-vis .rx-demo { margin-top: 0; }

/* iterations: a version timeline */
.rx-tl { position: relative; list-style: none; max-width: 960px; margin: 30px auto 0; padding: 0; }
.rx-tl::before { content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--line-strong), var(--line-strong) 85%, transparent); }
.rx-tl-item { position: relative; padding-left: 40px; }
.rx-tl-item + .rx-tl-item { margin-top: clamp(40px, 5vw, 60px); }
.rx-tl-item::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.rx-tl-label { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 650; letter-spacing: 0.02em; }
.rx-tl-title { margin-top: 10px; font-size: clamp(20px, 2vw, 26px); font-weight: 750; font-stretch: 112%; letter-spacing: -0.015em; line-height: 1.15; }
.rx-tl-item > .rx-text { margin-top: 10px; }
.rx-tl-media { margin-top: 18px; max-width: 900px; }

.rx-callout { max-width: 820px; margin-inline: auto; padding: 24px 26px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(255, 107, 53, 0.13), rgba(255, 107, 53, 0.03) 70%); border: 1px solid rgba(255, 107, 53, 0.34); }
.rx-callout-h { font-size: clamp(19px, 1.7vw, 23px); font-weight: 750; font-stretch: 112%; letter-spacing: -0.01em; }
.rx-callout-h + .rx-text { margin-top: 10px; }
.rx-stats { margin-top: 0; }
.rx-h2 + .rx-stats { margin-top: 22px; }
.rx-end .block-title { margin-top: 72px; }
.rx-cad-link { margin-top: 72px; font-size: 15px; }
.rx-cad-link a { color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.25); text-underline-offset: 4px; transition: color 0.2s, text-decoration-color 0.2s; }
.rx-cad-link a:hover, .rx-cad-link a:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
.rx-cad-link + .next { margin-top: 28px; }
.rx-err { margin-top: 24px; padding: 14px 16px; border-radius: 12px; border: 1px dashed #e8c547; color: #e8c547; font-size: 14px; }

/* shared controls (assets/js/lib/ui.js) */
.rx-ui-l { font-size: 13px; font-weight: 550; color: var(--text-2); white-space: nowrap; }
.rx-slider { flex: 1 1 300px; min-width: 0; display: grid; grid-template-columns: auto minmax(90px, 1fr) auto; align-items: center; gap: 12px; }
.rx-ui-v { min-width: 5.5ch; text-align: right; font-size: 14px; font-weight: 650; color: var(--text); }
.rx-slider input { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: none; cursor: pointer; --fill: 0%; }
.rx-slider input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--fill), rgba(255, 255, 255, 0.14) var(--fill)); }
.rx-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--text); border: 0; box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.28); transition: box-shadow 0.2s; }
.rx-slider input:active::-webkit-slider-thumb { box-shadow: 0 0 0 7px rgba(255, 107, 53, 0.32); }
.rx-slider input::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); }
.rx-slider input::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--accent); }
.rx-slider input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--text); border: 0; box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.28); }
@media (pointer: coarse) {
  .rx-slider input { height: 36px; }
  .rx-slider input::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; }
  .rx-slider input::-moz-range-thumb { width: 24px; height: 24px; }
}
.rx-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 13.5px; font-weight: 600; color: var(--text); transition: border-color 0.2s, background 0.2s; }
.rx-btn:hover { border-color: var(--accent); }
.rx-btn svg { width: 13px; height: 13px; fill: currentColor; }
.rx-play[aria-pressed="true"] { background: rgba(255, 255, 255, 0.06); }
.rx-seg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rx-seg-g { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-strong); }
.rx-seg-b { min-height: 30px; padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-2); transition: background 0.2s, color 0.2s; }
.rx-seg-b:hover { color: var(--text); }
.rx-seg-b[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.rx-readout { flex: 1 1 100%; }
.rx-readout-t { margin-bottom: 6px; font-size: 12px; font-weight: 600; font-stretch: 110%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rx-readout dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; margin: 0; overflow: hidden; border-radius: 12px; background: var(--line); border: 1px solid var(--line); }
.rx-readout dl > div { padding: 9px 13px; background: var(--bg); }
.rx-readout dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.rx-readout dd { margin: 3px 0 0; font-size: 17px; font-weight: 650; color: var(--text); }

/* lightbox */
.rx-lb { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 7, 6, 0.98); color: var(--text); }
.rx-lb::backdrop { background: rgba(0, 0, 0, 0.5); }
.rx-lb figure { height: 100%; margin: 0; padding: 56px 72px 34px; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 12px; }
.rx-lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.rx-lb figcaption { max-width: 70ch; text-align: center; font-size: 14px; color: var(--text-2); }
.rx-lb button { position: fixed; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 20px; color: var(--text); }
.rx-lb button:hover { background: rgba(255, 255, 255, 0.16); }
.rx-lb-x { top: 14px; right: 14px; font-size: 26px; }
.rx-lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.rx-lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.rx-lb.single .rx-lb-prev, .rx-lb.single .rx-lb-next { display: none; }
.rx-lb-n { position: fixed; top: 24px; left: 20px; font-size: 13px; color: var(--muted); }
html.rx-lb-open { overflow: hidden; }

@media (max-width: 900px) {
  /* phones and small tablets: the stage pins in the top half and each card pins just under it,
     never over the model (ctx.shift() is then [0, 0]); a card taller than the room there pins
     with its bottom at the screen's bottom, its top passing under the stage */
  .rx-scrolly { --rx-gap: 6svh; }
  .rx-scrolly-stage { z-index: 6; height: min(52svh, 520px); }
  .rx-steps { margin-top: 0; padding: 12px var(--gutter) 0; }
  .rx-step-card { top: calc(var(--nav-h) + min(52svh, 520px) + 12px); width: 100%; max-width: 640px; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 0.3; }
  .rx-step.is-active .rx-step-card { opacity: 1; }
  .rx-aside, .rx-aside-right, .rx-split-row, .rx-split-row.rx-flip { grid-template-columns: minmax(0, 1fr); }
  .rx-pm-row, .rx-pm-left .rx-pm-row { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rx-pm-fig { position: static; }
  .rx-pm-left .rx-pm-fig { order: 0; }
  .rx-stepless .rx-scrolly-stage { height: min(64svh, 600px); }
  .rx-aside-right .rx-aside-txt, .rx-flip .rx-split-vis { order: 0; }
  .rx-intro .facts { position: static; }
}
@media (max-width: 640px) {
  .rx-row.rx-stack-sm { flex-direction: column; gap: 18px; }
  .rx-row.rx-stack-sm > .rx-fig { flex: none; width: 100%; }
  .rx-grid.rx-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-grid { gap: 22px 12px; }
  /* two columns on a phone: an odd last picture takes the full width instead of leaving a hole */
  .rx-grid:not(:has(.rx-tall)) > .rx-fig:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rx-grid .rx-tall .rx-m { min-height: 220px; }
  .rx-collage { gap: 22px 14px; }
  .rx-collage .rx-fig { width: calc(50% - 10px); }
  .rx-text p, .rx-text li { font-size: 16.5px; }
  .rx-stage { height: var(--h, clamp(300px, 56vh, 480px)); }
  .rx-step-card p, .rx-step-card li { font-size: 20px; }
  .rx-step-card h3 { font-size: 22px; }
  .rx-lb figure { padding: 60px 12px 84px; }
  .rx-lb-prev, .rx-lb-next { top: auto; bottom: 18px; transform: none; }
  .rx-lb-prev { left: calc(50% - 56px); }
  .rx-lb-next { right: calc(50% - 56px); }
  .rx-slider { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .rx-collage .rx-fig, a.rx-m > img, .rx-poster, .rx-step-card, .rx-hint { transition: none; }
  .rx-collage .rx-fig:hover { transform: rotate(var(--tilt, 0deg)); }
  .rx-spin { animation-duration: 3s; }
}
/* r5 media start */
/* Hero layout 'stack' (tools/rich.mjs heroStack): videos stacked on the left, one tall photo (a
   poster) on the right, both columns exactly the same height. With the column gap g, the stack's
   summed height per unit width S, n stacked items and the photo's aspect P, the build writes
   --k1 = 1 + P(n - 1) and --k2 = 1 + P S: the stack column is (100% - g k1) / k2 wide and the photo
   takes the rest. --ka = 1/S + P and --kb = 1 - (n - 1)/S cap the whole hero at --hs-h tall, so it
   fits on one screen under the nav. The photo fills its cell (the maths makes the cell its aspect). */
.rx-hero-stack { --g: 12px; --hs-h: min(calc(100svh - var(--nav-h, 58px) - 44px), 900px);
  display: grid; grid-template-columns: calc((100% - var(--g) * var(--k1)) / var(--k2)) minmax(0, 1fr);
  column-gap: var(--g); row-gap: 8px; align-items: start;
  max-width: calc(var(--hs-h) * var(--ka) + var(--g) * var(--kb)); margin-inline: auto; }
.rx-hs-stack { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--g); min-width: 0; }
.rx-hs-stack .rx-fig { position: relative; }
.rx-hero-stack .rx-m { border-radius: var(--radius-lg); }
.rx-hs-stack figcaption { position: absolute; inset: auto 0 0 0; margin: 0; padding: 28px 16px 11px; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: linear-gradient(to top, rgba(8, 7, 6, 0.74), rgba(8, 7, 6, 0)); color: #f4efe7; font-size: 14px; pointer-events: none; }
.rx-hs-side { display: contents; }
.rx-hs-side > .rx-m { grid-column: 2; grid-row: 1; align-self: stretch; aspect-ratio: auto; background: #fff; }
.rx-hs-side > .rx-m > img { position: absolute; inset: 0; object-fit: cover; }
.rx-hs-side > figcaption { grid-column: 2; grid-row: 2; margin: 0; }
@media (max-width: 640px) {
  .rx-hero-stack { grid-template-columns: minmax(0, 1fr); max-width: none; row-gap: 0; }
  .rx-hs-stack { gap: 18px; }
  .rx-hs-stack figcaption { position: static; padding: 0; margin-top: 8px; border-radius: 0; background: none; color: var(--muted); font-size: 13.5px; }
  .rx-hs-side > .rx-m { grid-column: 1; grid-row: 2; margin-top: 18px; aspect-ratio: var(--ar); }
  .rx-hs-side > .rx-m > img { position: static; }
  .rx-hs-side > figcaption { grid-column: 1; grid-row: 3; margin-top: 8px; }
}
/* r5 media end */