:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

@font-face { font-family: "Jost"; src: url("fonts/jost.a05f65e01c.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "STIX Two Text"; src: url("fonts/stix-two-text.9a8654ff31.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "STIX Two Text"; src: url("fonts/stix-two-text-italic.a143fe2424.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
/* Layout: a figure plate you can operate. Text is left-aligned on a label/content
   grid, figures run the full measure, and colour appears only where it encodes depth.
   The neutrals lean toward the logo's navy; the logo's blue is the far end of the depth code. */
:root {
  --paper: #F6F7FA;      /* cool white, faint navy bias */
  --paper-2: #E9ECF3;    /* quiet fills, table stripes */
  --ink: #0A1436;        /* navy-black, all text and UI */
  --ink-2: #515B78;      /* secondary text, drawing lines */
  --line: #C9CEDC;       /* rules and gridlines */
  --near: #C2410C;       /* depth code: in front of focus (orange) */
  --far: #004CFD;        /* depth code: behind focus (the logo's blue) */
  --sensor: #000000;     /* camera-image panels */
  --sensor-line: #0A1436;
  --logo-ink: #001A5E;   /* the logo's navy: "123" and the ring */
  --logo-blue: #004CFD;  /* the logo's blue: "D" and the dots */
  --display: "Jost", "Futura", "Century Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
  --text: "STIX Two Text", "STIXGeneral", "Times New Roman", Times, serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A0F1E; --paper-2: #131A2D; --ink: #E9ECF5; --ink-2: #9AA4BE; --line: #28324B;
    --near: #FF9358; --far: #6E9CFF; --sensor: #000000; --sensor-line: #28324B;
    --logo-ink: #E9ECF5; --logo-blue: #4A80FF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0A0F1E; --paper-2: #131A2D; --ink: #E9ECF5; --ink-2: #9AA4BE; --line: #28324B;
  --near: #FF9358; --far: #6E9CFF; --sensor: #000000; --sensor-line: #28324B;
  --logo-ink: #E9ECF5; --logo-blue: #4A80FF;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--text); font-size: 1.1875rem; line-height: 1.55;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1[tabindex="-1"]:focus { outline: none; }
p { margin: 0 0 1em; }
h1, h2, h3 { text-wrap: balance; }
sup { font-size: 0.7em; line-height: 0; }
sup a { text-decoration: none; padding: 0 0.1em; }
sup a:hover { text-decoration: underline; }

.nb { white-space: nowrap; }

.wrap { max-width: 74rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.measure { max-width: 34rem; }

/* ---------- header ---------- */
.site-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 2rem; padding-block: 1.1rem 0.9rem;
}
.wordmark { display: block; line-height: 0; }
.logo { display: block; height: 2.75rem; width: auto; aspect-ratio: 1246.62 / 325.26; }
.logo-ink { fill: var(--logo-ink); }
.logo-blue { fill: var(--logo-blue); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { font-family: var(--display); font-size: 1.0625rem; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; }

/* ---------- hero: the signal chain ---------- */
.hero { padding-block: clamp(1rem, 3vw, 2.25rem) 0; }
.hero h1 {
  font-family: var(--display); font-weight: 400; font-size: 1.125rem; line-height: 1.3;
  color: var(--ink-2); margin: 0 0 1.1rem;
}
.chain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr) 2rem minmax(0, 1fr);
  column-gap: 0.75rem; row-gap: 0.875rem; align-items: start;
}
.chain-head { font-family: var(--display); font-weight: 400; margin: 0; grid-row: 1; }
.chain-head .num { display: block; font-weight: 300; font-size: clamp(3.75rem, 7.4vw, 6.25rem); line-height: 0.92; letter-spacing: -0.02em; }
.chain-head .noun { display: block; font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.2; margin-top: 0.2em; }
.chain-panel { grid-row: 2; }
.chain-cap { grid-row: 3; font-size: 1.0625rem; line-height: 1.45; color: var(--ink-2); margin: 0; }
.chain-arrow { grid-row: 2; align-self: center; justify-self: center; width: 2rem; height: 1rem; color: var(--ink); }
.c1 { grid-column: 1; } .c2 { grid-column: 3; } .c3 { grid-column: 5; }
.a1 { grid-column: 2; } .a2 { grid-column: 4; }

.panel { position: relative; aspect-ratio: 1 / 1; width: 100%; border: 1px solid var(--line); background: var(--paper); }
.panel--sensor { background: var(--sensor); border-color: var(--sensor-line); }
#mask-el { transition: opacity 0.3s; }
.mask-out #mask-el { opacity: 0.12; }
.panel canvas, .panel svg { display: block; width: 100%; height: 100%; }
.fig-svg { color: var(--ink); }
.fig-svg text { font-family: var(--display); font-size: 13px; fill: currentColor; }
.fig-main text { font-size: 14px; }
.area-fig { display: block; width: 100%; max-width: 12.5rem; height: auto; margin-top: 1.1rem; }
.area-fig text { font-size: 10.5px; }
.fig-svg .soft { stroke: var(--ink-2); }
.fig-svg .softfill { fill: var(--ink-2); }
.fig-svg .softtext { fill: var(--ink-2); }

.depth-key { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-family: var(--display); font-size: 0.9375rem; color: var(--ink-2); }
.depth-key i { display: block; flex: 0 0 5.5rem; height: 0.5rem; background: linear-gradient(to right, var(--near), var(--ink-2) 50%, var(--far)); }

.fig-controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 2rem; margin-top: 1.25rem; padding-top: 0.875rem; border-top: 1px solid var(--line);
}
.fig-controls .group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.fig-controls .label { font-family: var(--display); font-size: 1rem; }
.seg { display: inline-flex; border: 1px solid var(--ink); }
.seg button {
  font-family: var(--display); font-weight: 400; font-size: 1rem; line-height: 1.2;
  padding: 0.4rem 0.95rem; background: transparent; color: var(--ink); border: 0; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.link-btn {
  font-family: var(--display); font-size: 1rem; background: none; border: 0; padding: 0.4rem 0;
  color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px;
}
.link-btn:hover { text-decoration-thickness: 2px; }
.fig-note { font-size: 0.9375rem; line-height: 1.4; font-style: italic; color: var(--ink-2); margin: 0; max-width: 34rem; }

.intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 4rem; align-items: start; padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.lead { font-size: 1.4375rem; line-height: 1.42; max-width: 31em; }
.lead:last-child { margin-bottom: 0; }
.intro .actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; padding-top: 0.35rem; }
.btn {
  display: inline-block; font-family: var(--display); font-weight: 500; font-size: 1.0625rem; line-height: 1.2;
  padding: 0.75rem 1.3rem; background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: transparent; color: var(--ink); }
.text-link { font-family: var(--display); font-size: 1.0625rem; }

/* ---------- sections ---------- */
.section {
  display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); column-gap: 3rem; row-gap: 1.25rem;
  padding-block: clamp(2.25rem, 5vw, 4rem); scroll-margin-top: 1rem;
}
.section > h2 { font-family: var(--display); font-weight: 400; font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.005em; margin: 0; align-self: start; position: sticky; top: 1.25rem; }
.section-body { min-width: 0; }
.section-body > p { max-width: 34rem; }
figure { margin: 0; }
figcaption { font-size: 1rem; line-height: 1.45; color: var(--ink-2); margin-top: 0.75rem; max-width: 40rem; }
figcaption b { font-weight: 600; color: var(--ink); }

/* depth strips (Fig. 2) */
.strips { margin-top: 1.75rem; }
.strip-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 1rem; align-items: center; margin-bottom: 0.5rem; }
.strip-row .name { font-family: var(--display); font-size: 1rem; }
.strip-row canvas { display: block; width: 100%; height: auto; aspect-ratio: 984 / 104; }
.strip-axis { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 1rem; }
.strip-axis .scale { display: flex; align-items: center; gap: 0.75rem; font-family: var(--display); font-size: 0.9375rem; color: var(--ink-2); }
.strip-axis .scale i { flex: 1 1 auto; height: 1px; background: var(--line); }
.strip-axis .scale .n { color: var(--near); }
.strip-axis .scale .f { color: var(--far); }

/* range chart (Fig. 3) */
.ranges { margin-top: 1.75rem; }
.range-axis, .range-row { display: grid; grid-template-columns: 13rem minmax(0, 1fr); column-gap: 1.25rem; align-items: center; }
.range-axis .axis-name { font-family: var(--display); font-size: 0.9375rem; color: var(--ink-2); }
.ticks { position: relative; height: 1.6rem; }
.tick {
  position: absolute; left: calc(var(--p) * 100%); bottom: 0.3rem; transform: translateX(-50%);
  font-family: var(--display); font-size: 0.9375rem; line-height: 1; color: var(--ink-2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tick:first-child { transform: none; }
.tick:last-child { transform: translateX(-100%); }
.range-row { border-top: 1px solid var(--line); }
.range-row:last-of-type { border-bottom: 1px solid var(--line); }
.range-row .name { font-family: var(--display); font-size: 1.0625rem; line-height: 1.25; padding-block: 0.55rem; }
.range-row .name a { text-decoration-color: var(--ink-2); }
.range-row .name small { display: block; font-size: 0.875rem; color: var(--ink-2); margin-top: 0.1rem; }
.track {
  position: relative; height: 2.6rem; align-self: stretch;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 11) 100%;
  border-right: 1px solid var(--line);
}
.bar { position: absolute; top: 50%; height: 0.95rem; margin-top: -0.475rem; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); background: var(--ink); }
.bar--emerging { background: var(--paper); border: 1.5px dashed var(--ink); }
/* a dashed extension of a solid bar: expected or simulated beyond what is demonstrated */
.bar--ext { border-left: 0; }
.bar--open { border-right: 0; }
.bar--open::after {
  content: ""; position: absolute; right: 1px; top: 50%; width: 0.5rem; height: 0.5rem;
  border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink);
  transform: translateY(-50%) rotate(45deg);
}
.bar--all { background: transparent; height: 0.7rem; margin-top: -0.35rem; border-inline: 1.5px solid var(--ink); }
.bar--all::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid var(--ink); }

/* application areas */
.areas { margin-top: 2.5rem; }
.area {
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 0.5rem 2.5rem;
  padding-block: 1.9rem; border-top: 1px solid var(--line); scroll-margin-top: 1rem;
}
.area h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1.15; margin: 0; }
.area .tag { font-style: italic; font-size: 1.0625rem; line-height: 1.4; color: var(--ink-2); margin: 0.4rem 0 0; }
.area .status { display: inline-block; font-family: var(--display); font-size: 0.9375rem; line-height: 1.2; border: 1.5px dashed var(--ink); padding: 0.15rem 0.55rem; margin-top: 0.7rem; }
.area .brand-note { font-family: var(--display); font-size: 0.9375rem; line-height: 1.35; color: var(--ink-2); margin: 0.7rem 0 0; }
.area-body { min-width: 0; }
.area-body p { max-width: 34rem; margin-bottom: 0.75em; }
.area-body ul { max-width: 34rem; margin: 0 0 0.9em; padding-left: 1.15em; }
.area-body li { margin-bottom: 0.2em; }
.area-body .for { font-size: 1.0625rem; color: var(--ink-2); }
.area-body p:last-child { margin-bottom: 0; }

/* how we work */
.kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 3rem; margin: 1.5rem 0 2.25rem; max-width: 52rem; }
.kinds h3, .people h3 { font-family: var(--display); font-weight: 400; font-size: 1.375rem; line-height: 1.2; margin: 0 0 0.35rem; }
.kinds p { font-size: 1.0625rem; margin: 0; }
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; padding: 0; margin: 0 0 2rem; }
.steps li { counter-increment: step; min-width: 0; }
.steps li::before { content: counter(step); display: block; font-family: var(--display); font-weight: 300; font-size: 2.75rem; line-height: 1; margin-bottom: 0.45rem; }
.steps b { display: block; font-family: var(--display); font-weight: 500; font-size: 1.125rem; line-height: 1.25; }
.steps span { display: block; font-size: 1.0625rem; line-height: 1.45; margin-top: 0.3rem; }
.seeking { font-size: 1.4375rem; line-height: 1.42; max-width: 31em; margin: 0; }

/* people */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; margin-top: 1.75rem; max-width: 60rem; }
.person { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1.25rem; align-items: start; }
.portrait { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); border: 1px solid var(--line); }
.people .role { font-style: italic; color: var(--ink-2); margin: 0 0 0.6rem; font-size: 1.0625rem; }
.people p { font-size: 1.0625rem; margin: 0; }

/* references */
.refs { margin: 0; padding-left: 1.7em; max-width: 44rem; font-size: 1.0625rem; line-height: 1.45; }
.refs li { margin-bottom: 0.7em; padding-left: 0.2em; scroll-margin-top: 1.5rem; }
.refs li::marker { font-family: var(--display); color: var(--ink-2); }
.refs i { font-style: italic; }

/* contact */
.contact-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 1.25rem 0 0.75rem; }
.address { font-family: var(--display); font-weight: 300; font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.15; letter-spacing: -0.005em; overflow-wrap: anywhere; user-select: all; }
.btn--outline { background: transparent; color: var(--ink); padding: 0.5rem 1rem; font-weight: 400; }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.contact-who { font-size: 1.0625rem; color: var(--ink-2); margin: 0; }

/* footer */
.site-foot { border-top: 1px solid var(--ink); margin-top: 1rem; padding-block: 1.5rem 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; font-size: 1rem; color: var(--ink-2); }
.site-foot p { margin: 0; max-width: 40rem; }

/* ---------- flow imaging page ---------- */
.crumb { font-family: var(--display); font-size: 1rem; color: var(--ink-2); margin: clamp(1rem, 3vw, 2rem) 0 0; }
.page-title { font-family: var(--display); font-weight: 300; font-size: clamp(2.25rem, 5.2vw, 4rem); line-height: 1.04; letter-spacing: -0.012em; margin: 0.6rem 0 1.25rem; max-width: 14em; }
.page-lead { font-size: 1.4375rem; line-height: 1.42; max-width: 33em; margin: 0; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 2.5rem; margin: 2rem 0 0; padding: 1.1rem 0; border-block: 1px solid var(--line); }
.facts div { min-width: 0; }
.facts dt { font-family: var(--display); font-size: 0.9375rem; color: var(--ink-2); }
.facts dd { margin: 0.15rem 0 0; font-size: 1.0625rem; line-height: 1.4; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 1.75rem; max-width: 52rem; }
.pair figure { min-width: 0; }
.pair svg { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.pair figcaption { margin-top: 0.5rem; }
.table-scroll { overflow-x: auto; margin-top: 2rem; }
.compare { border-collapse: collapse; width: 100%; max-width: 56rem; min-width: 34rem; font-size: 1.0625rem; line-height: 1.4; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 0.6rem 1.25rem 0.6rem 0; border-top: 1px solid var(--line); }
.compare thead th { font-family: var(--display); font-weight: 500; font-size: 1.0625rem; border-top: 0; border-bottom: 1px solid var(--ink); }
.compare tbody th { font-family: var(--display); font-weight: 400; font-size: 1rem; color: var(--ink-2); width: 11.5rem; }
.compare tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.plain-list { max-width: 34rem; margin: 0 0 1em; padding-left: 1.15em; }
.plain-list li { margin-bottom: 0.4em; }
.videos { list-style: none; padding: 0; margin: 1.25rem 0 0.75rem; max-width: 40rem; border-top: 1px solid var(--line); }
.videos li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.15rem 1.5rem; padding-block: 0.6rem; border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
.videos span { font-family: var(--display); font-size: 0.9375rem; color: var(--ink-2); }
.closing { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.5rem; }

/* figures reproduced from the paper: photographs and plots on a white plate */
.plate { margin-block: 1.75rem; }
.plate img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #fff; }
.plate figcaption { margin-top: 0.6rem; }
.section-body > .plate:last-child { margin-bottom: 0; }

/* the two processing modes, beside the camera frame they start from */
.modes-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: 1.5rem 3rem; align-items: start; margin-block: 1.75rem; max-width: 56rem; }
.modes-grid .plate { grid-column: 2; grid-row: 1; margin: 0; }
.modes { grid-column: 1; grid-row: 1; min-width: 0; }
.modes > div + div { margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.modes h3 { font-family: var(--display); font-weight: 400; font-size: 1.375rem; line-height: 1.2; margin: 0 0 0.35rem; }
.modes p { font-size: 1.0625rem; margin: 0; max-width: 31rem; }
.modes .tested { font-family: var(--display); font-size: 0.9375rem; line-height: 1.3; color: var(--ink-2); margin-top: 0.5rem; }
.section-body > .after-grid { margin-bottom: 0; }

.results tbody th { width: 9.5rem; }
.results--scenes { max-width: 40rem; }
.results--scenes tbody th { width: 16rem; }
.section-body > .table-note { font-size: 1rem; line-height: 1.45; color: var(--ink-2); max-width: 40rem; margin: 0.75rem 0 1.75rem; }

/* the stage: one pair of looping clips at a time, what the camera recorded beside what
   was measured from it. Each case sets --cols so that both clips come out equally tall. */
.motion { margin-block: 1.75rem 2rem; }
.stage-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--line); }
.seg--cases { gap: 1px; background: var(--ink); }
.seg--cases button { background: var(--paper); }
.seg--cases button[aria-pressed="true"] { background: var(--ink); }
.stage-note { font-size: 1.0625rem; line-height: 1.45; margin: 0.875rem 0 1rem; max-width: 40rem; }
.motion-pair { display: grid; grid-template-columns: var(--cols, minmax(0, 2fr) 2rem minmax(0, 3fr)); column-gap: 0.75rem; }
.motion-label { font-family: var(--display); font-size: 0.9375rem; line-height: 1.3; color: var(--ink-2); margin: 0 0 0.4rem; align-self: end; }
.motion-pair > .m-l1 { grid-column: 1; grid-row: 1; }
.motion-pair > .m-b1 { grid-column: 1; grid-row: 2; }
.motion-pair > .motion-arrow { grid-column: 2; grid-row: 2; align-self: center; justify-self: center; }
.motion-pair > .m-l2 { grid-column: 3; grid-row: 1; }
.motion-pair > .m-b2 { grid-column: 3; grid-row: 2; }
.clip { display: block; width: 100%; height: auto; align-self: start; border: 1px solid var(--line); }
.clip--raw { background: #000; border-color: var(--sensor-line); }
.clip--plot { background: #fff; }
.motion-arrow { width: 2rem; height: 1rem; color: var(--ink); }
.motion--still [data-motion-toggle] { display: none; }
.motion figcaption { margin-top: 1rem; }

/* ---------- pieces shared by the area pages ---------- */
.page-sub { font-family: var(--display); font-weight: 300; font-size: clamp(1.375rem, 2.8vw, 2rem); line-height: 1.2; color: var(--ink-2); margin: -0.6rem 0 1.25rem; }
.section-body > .sub { font-family: var(--display); font-weight: 400; font-size: 1.375rem; line-height: 1.2; margin: 2.25rem 0 0.5rem; }
.section-body > .sub:first-child { margin-top: 0; }
.section-body > .after-fig { margin-top: 1.5rem; }
.section-body > .after-fig:last-child { margin-bottom: 0; }

/* range chart on a five-decade axis; the page's own method is the last row */
.ranges--5 .track { background-size: calc(100% / 5) 100%; }
.bar--other { background: var(--ink-2); }
.range-row--own .name { font-weight: 500; }
.range-row--own .name small { font-weight: 400; }

/* two figures side by side */
.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; align-items: start; margin-block: 1.75rem; max-width: 56rem; }
.plates > .plate { margin: 0; min-width: 0; }
.section-body > .plates:last-child { margin-bottom: 0; }
.plate--drawn svg { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.plate-label { font-family: var(--display); font-size: 0.9375rem; line-height: 1.3; color: var(--ink-2); margin: 0 0 0.4rem; }
.compare-fig { margin-block: 1.75rem; }
.compare-fig .plates { margin-block: 0; gap: 1.1rem 1rem; }
.compare-fig > figcaption { margin-top: 0.75rem; }

/* rows of small images with a label under each */
.tiles-fig, .photos-fig { margin-block: 1.75rem; }
.tiles { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 0.5rem; max-width: 46rem; }
.tiles--wide { gap: 0.75rem; }
.tile { min-width: 0; }
.tile img { display: block; width: 100%; height: auto; border: 1px solid var(--sensor-line); background: #000; }
.tile-label { font-family: var(--display); font-size: 0.9375rem; line-height: 1.3; color: var(--ink-2); margin: 0.35rem 0 0; }
.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 56rem; }
.photos .tile img, .hero-photo img { border-color: var(--line); background: var(--paper-2); }
.photos--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 38rem; }

/* a page that opens with a photograph beside its headline (the Rapid Optics Fab front door) */
.page-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: 1.5rem 3rem; align-items: end; }
.hero-photo { margin: 0; }
.section-body > .photos-fig:last-child { margin-bottom: 0; }

/* a stage with one clip per case */
.motion-single { max-width: var(--w, 46rem); }

/* process steps, each with a drawing */
.steps--drawn { margin-top: 0.5rem; }
.step-fig { display: block; width: 100%; max-width: 13rem; height: auto; margin-bottom: 0.7rem; }
.step-fig text { font-size: 12px; }


/* ---------- small screens ---------- */
@media (max-width: 1040px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .page-hero { grid-template-columns: minmax(0, 1fr); }
  .hero-photo { max-width: 24rem; }
  .section { grid-template-columns: minmax(0, 1fr); }
  .section > h2 { position: static; }
  .intro { grid-template-columns: minmax(0, 1fr); }
  .intro .actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body { font-size: 1.125rem; }
  .chain { display: flex; flex-direction: column; gap: 0.75rem; }
  .chain-head { margin-top: 0.75rem; }
  .chain-head .num { font-size: 4.25rem; }
  .chain-head .noun { font-size: 1.375rem; }
  .area-fig { max-width: 11rem; margin-top: 0.75rem; }
  .chain-arrow { align-self: center; transform: rotate(90deg); margin-block: 0.4rem; }
  .panel--schematic { aspect-ratio: 360 / 258; }
  .lead, .page-lead, .seeking { font-size: 1.25rem; }
  .strip-row, .strip-axis { grid-template-columns: minmax(0, 1fr); row-gap: 0.3rem; }
  .strip-row { margin-bottom: 0.9rem; }
  .strip-axis > :first-child { display: none; }
  .range-axis, .range-row { grid-template-columns: minmax(0, 1fr); }
  .range-axis .axis-name { display: none; }
  .range-row .name { padding-block: 0.6rem 0; }
  .track { height: 2rem; }
  .tick.opt { display: none; }
  .area { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .kinds, .people, .pair { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .modes-grid { grid-template-columns: minmax(0, 1fr); }
  .modes-grid .plate, .modes { grid-column: auto; grid-row: auto; }
  .modes-grid .plate { max-width: 19rem; }
  .seg--cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .seg--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plates { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photos, .photos--two { grid-template-columns: minmax(0, 1fr); max-width: 22rem; }
  .step-fig { max-width: 11rem; }
  .seg--cases button { padding-inline: 0.5rem; }
  .motion-pair { grid-template-columns: minmax(0, 1fr); }
  .motion-pair > .m-l1, .motion-pair > .m-b1, .motion-pair > .m-l2, .motion-pair > .m-b2, .motion-pair > .motion-arrow { grid-column: 1; grid-row: auto; }
  .motion-pair > .motion-arrow { justify-self: start; margin: 0.9rem 0 0.9rem 1rem; transform: rotate(90deg); }
  .motion-pair > .m-b1 { max-width: 16rem; }
  .results { min-width: 0; }
  .results th, .results td { padding-right: 0.75rem; }
  .results tbody th { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html, html:focus-within { scroll-behavior: auto; }
  #mask-el { transition: none; }
}

/* ---------- additions for the public site ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; padding: 0.5rem 0.9rem; background: var(--ink); color: var(--paper);
  font-family: var(--display); font-size: 1rem; text-decoration: none; }
a.address { text-decoration: none; user-select: text; }
a.address:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.nf { padding-block: clamp(1rem, 4vw, 3rem) clamp(3rem, 8vw, 6rem); }
.nf-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; margin: 2rem 0 0; padding: 0;
  font-family: var(--display); font-size: 1.125rem; }