/* HyperPrior, the hybrid build: the home page, the 404 and the footer every page shares.
   0 entry card (entry.css) · 1 header (shell.css) · 2 hero (07's hero A, white, in the rain) · then black to
   the end (the liquid chrome, story mode): 3 the definition and the question · 4 research, the compact index ·
   5 engagements, the terms and the seal · 6 who we are (Repricing) · 7 contact (HPR-C3) · 8 the dark footer with the
   chrome nameplate.
   Every section is padded by the one frame (shell.css --frame) and laid on its 12 columns, 32px apart.
   Sizes, gaps, durations, easings and colours all come from shell.css :root. */

/* ------------------------------------------------------------------ 2. hero: 07's hero A, without the rod
   "Priors over priors." standing on the horizon, reflected in a floor of mercury (/assets/js/hero.js
   and mirror.js). The sky stays pale at the horizon: the mercury reflects a pale room. A screen-sized set
   piece, centred on the viewport. */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; max-height: 1100px; --horizon: 52%; --measure: 0.84; }
.hero-sky { position: absolute; inset: 0 0 calc(100% - var(--horizon)) 0; background: var(--paper); }
.pool { position: absolute; left: 0; right: 0; top: var(--horizon); bottom: 0; overflow: hidden; background: linear-gradient(180deg, var(--pool-top), var(--pool-low)); }
.pool-canvas { display: block; width: 100%; height: 100%; }
.headline {
  position: absolute; left: 50%; translate: -50% 0; margin: 0; max-width: none;
  font-family: var(--display); font-weight: 400; line-height: 1; letter-spacing: var(--ls-headline); white-space: nowrap; color: var(--ink);
}
.hl { display: inline; }
/* the field never touches an edge: the mercury dissolves into the page on the shared ramp */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none;
  background: var(--paper); -webkit-mask-image: var(--ramp); mask-image: var(--ramp);
}
/* the 404's pool runs straight into the footer: it dissolves into the footer's silver instead */
.nf::after { background: var(--silver); }
/* the wordmark without JavaScript; with it, the bar's link is the one wordmark (it rests centred here) */
.hero-mark {
  position: absolute; z-index: 2; top: calc(var(--bar-h) / 2); left: 50%; translate: -50% -50%; max-width: none;
  font-family: var(--display); font-size: var(--fs-mark); line-height: 1; letter-spacing: var(--ls-mark); white-space: nowrap; color: var(--ink);
}
html.js .hero-mark { visibility: hidden; }
/* without WebGL: a still reflection (echo.js) */
.headline-echo {
  position: absolute; pointer-events: none; user-select: none; transform: scaleY(-1);
  color: var(--echo); opacity: 0.34; filter: blur(0.6px);
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 60%); mask-image: linear-gradient(0deg, transparent 0, #000 60%);
}
/* without JavaScript the headline still stands on the waterline (hero.js sizes it otherwise), and the pool
   holds a still reflection of it: echo.js's output, written into the page. The sky is clipped at the
   waterline so nothing of the headline's descenders strays onto the pool. */
html:not(.js) .headline { top: auto; bottom: -0.213em; font-size: min(15.38vw, 230px); }
html:not(.js) .nf .headline { font-size: min(12.96vw, 230px); }
html:not(.js) .hero-sky { overflow: clip; }
.headline-echo--nojs { display: none; }
html:not(.js) .headline-echo--nojs { display: block; bottom: calc(100% - 0.213em); transform-origin: 50% calc(100% - 0.213em); }

/* ------------------------------------------------------------------ 3–7. the black run, in the research page's design
   After the hero the page is black to the end (the liquid chrome in story mode, liquid.css and story.js). Each
   part is as tall as its text, which sits on columns 1–6 or 7–12 (.part--r) on clean black, and one part's text
   follows the last's after the same short run of black (--part-top and --part-foot, about a fifth of a screen), so
   the story keeps one pace from the definition to Contact. The definition sits close under the hero. Each part is
   held (where a link lands, and where the camera has arrived) with its text --part-top under the screen's top;
   its world grows beside it, the full height of the screen, and the camera eases between parts, arriving as the
   text comes up. On a phone each part's world grows in its plate above the text. No text in the black is under
   16px (the research page's floor; shell.css's smallest step). */
.story {
  --label: var(--dark-dim);
  color: var(--dark-text);
  --error: #ff9d90;
}
.story ::selection { background: var(--select); color: var(--select-ink); }
/* the white hero's pool runs straight into the black */
.home .hero::after { background: var(--dark-bg); }
/* past the middle of the home page the root is the black, so a bounce past the dark footer shows black, not paper
   (page.js sets html.low; at the top the root stays paper, under the white hero) */
html.low:has(.foot--dark) { background: var(--dark-bg); }
.story { --part-top: 13vh; --part-foot: 8vh; --first-top: 4vh; }
.part {
  position: relative; outline: none;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-content: start;
  padding: var(--part-top) var(--frame) var(--part-foot);
  scroll-margin-top: 0;              /* a link lands on the part's hold: its top at the screen's, its text under the bar */
}
/* the definition starts almost as soon as the black does; held, its text stands where every part's does */
.part--first { padding-top: var(--first-top); scroll-margin-top: calc(var(--part-top) - var(--first-top)); }
/* Contact runs straight into the footer */
.part.contact { padding-bottom: var(--s4); }
/* the black's last stretch: the stage dissolves into the floor on the shared ramp just before the dark footer, so the
   metal never meets the footer as a hard cut (above the stage, under the parts' text); short, so Contact's chrome
   stays on screen to the foot of the page */
.story::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: min(16vh, 140px); pointer-events: none;
  background: var(--dark-bg); -webkit-mask-image: var(--ramp); mask-image: var(--ramp);
}
.part > .blk { grid-column: 1 / span 6; min-width: 0; }
.part--r > .blk { grid-column: 7 / span 6; }
/* a part with more than one block of text (engagements and its terms): they stack in its columns */
.part > .blk + .blk { margin-top: var(--space-head); }
/* a section a link lands on takes focus (page.js, or the browser's own jump): its heading marks the place, never a ring
   round a screen of black */
[data-bar="dark"] .part:focus-visible { outline: none; }
.part-head .label + .sec-title { margin-top: var(--s3); }
.sec-title { font-family: var(--display); font-size: var(--d5); line-height: var(--d5-lh); letter-spacing: var(--d5-ls); color: var(--dark-head); text-wrap: balance; }
.lede { margin-top: var(--s4); font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--dark-2); text-wrap: pretty; }
/* the rows of the black (research, engagements): a button the width of the column, its parts on a grid */
.rx-h, .ex-h { margin: 0; font: inherit; }
.rx-row, .ex-row {
  display: grid; align-items: baseline; width: 100%; margin: 0; border: 0; border-radius: 2px; background: none;
  font: inherit; text-align: left; color: var(--dark-text); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rx-row:focus-visible, .ex-row:focus-visible { outline: var(--ring-light); outline-offset: 3px; }

/* ---------------------------------------------------------------- the definition: a dictionary entry. The headword is a
   key: pressed, the entry opens fully, the usage example under sense 1 in italics, the origin and the cross references
   (rows.js); the etymology bracket stands in for the origin while it is shut */
.hw { max-width: none; font-family: var(--display); font-size: var(--d5); line-height: 1; letter-spacing: var(--d5-ls); color: var(--dark-head); }
.hw dfn { font-style: normal; }
.hw-key {
  display: inline; margin: 0; padding: 0 0 0.06em; border: 0; border-radius: 2px; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: inherit; text-align: left; -webkit-tap-highlight-color: transparent;
  text-decoration: underline dotted 2px; text-decoration-color: rgba(134, 227, 211, 0); text-underline-offset: 0.14em;
  transition: text-decoration-color var(--t-fast) var(--ease);
}
.hw-key:hover, .hw-key[aria-expanded="true"] { text-decoration-color: rgba(134, 227, 211, 0.75); }
.hw-key:focus-visible { outline: var(--ring-light); outline-offset: 6px; text-decoration-color: rgba(134, 227, 211, 0.75); }
.pron { margin-top: var(--s3); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s4); font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--dark-2); }
.pron i { color: var(--dark-dim); }
.pron .ja { letter-spacing: var(--ls-ja); color: var(--dark-2); }
.senses { margin-top: var(--s5); }
.senses li { display: grid; grid-template-columns: 2em minmax(0, 1fr); max-width: var(--read); font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--dark-text); text-wrap: pretty; }
.senses li + li { margin-top: var(--s3); }
.senses i { color: var(--dark-dim); }
.sn { color: var(--phos); }
.sense-ex { display: block; margin-top: var(--s1); color: var(--dark-2); }
.sense-ex i { color: inherit; }
.entry-full { margin-top: var(--s4); padding-left: calc(var(--fs-lede) * 2); }
/* the etymology bracket stands under the pronunciation, above the senses, as a dictionary sets it */
.etym { margin-top: var(--s2); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--dark-dim); }
.ef-row { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--dark-text); text-wrap: pretty; }
.ef-row + .ef-row { margin-top: var(--s2); }
.ef-k { margin-right: 0.4em; font-style: italic; color: var(--dark-dim); }
.ef-act { margin-top: var(--s4); }
html.js .dict:not(.is-full) [data-full] { display: none; }
html.js .dict.is-full .etym { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .dict.is-full [data-full] { animation: hp-lift var(--t-move) var(--ease) both; }
}
@keyframes hp-lift { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

/* ---------------------------------------------------------------- the question, its support line and three beats */
.question { max-width: none; font-family: var(--display); font-size: var(--d4); line-height: var(--d4-lh); letter-spacing: var(--d4-ls); color: var(--dark-head); text-wrap: balance; }
.q-support { margin-top: var(--s5); }
.q-support p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--dark-text); text-wrap: pretty; }
.q-support p:first-child { font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--dark-head); }
.q-support p + p { margin-top: var(--s4); }
.q-beat { display: block; }
.q-beat + .q-beat { margin-top: var(--s2); }

/* ---------------------------------------------------------------- research: the compact index (CONCEPTS-3 option A)
   Seven rows, each its number and the glyph the metal forms for it, its title and its gloss. On a wide screen the open
   row's paragraph sits in the slot under the rows (rows.js moves the paragraphs there; they share one cell, so the
   slot is as tall as the longest and nothing below it moves); hover, focus or a press opens a row. On a phone each
   paragraph opens under its own row (Read more, Less). Without JavaScript every paragraph shows, in place. */
.rx-wrap { margin-top: var(--s5); }
.rx { border-top: 1px solid var(--dark-rule); }
.rx-item { border-bottom: 1px solid var(--dark-rule); }
.rx-row {
  grid-template-columns: 4.4em minmax(0, 1fr); grid-template-areas: "no t" "no g" "no more"; column-gap: var(--s2);
  padding: 12px 0 13px;
}
.rx-no { grid-area: no; display: flex; align-items: baseline; gap: 10px; }
.rx-no .num { color: var(--phos); }
.rx-g { width: 1.1em; font-family: var(--display); font-size: 21px; line-height: 1; text-align: center; color: var(--dark-dim); transition: color var(--t-fast) var(--ease); }
.rx-t { grid-area: t; font-family: var(--display); font-size: var(--d1); line-height: var(--d1-lh); letter-spacing: var(--d1-ls); color: var(--dark-text); transition: translate var(--t-move) var(--ease), color var(--t-fast) var(--ease); }
.rx-gloss { grid-area: g; margin-top: 3px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--dark-2); }
.rx-more { grid-area: more; display: none; margin-top: var(--s1); }
.rx-row[aria-expanded="true"] .rx-t, .rx-row:hover .rx-t { color: var(--dark-full); }
.rx-row[aria-expanded="true"] .rx-g, .rx-row:hover .rx-g, .rx-row:focus-visible .rx-g { color: var(--phos); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .rx-row:hover .rx-t { translate: var(--nudge) 0; } }
.rx-text p { max-width: var(--read); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--dark-text); text-wrap: pretty; }
.rx-item > .rx-text { padding: 0 0 var(--s3) 4.4em; }
.rx-slot { display: none; }
@media (min-width: 821px) {
  html.js .rx-slot { display: grid; margin-top: var(--s4); }
  html.js .rx-slot > .rx-text { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--t-fast) var(--ease), visibility 0s linear var(--t-fast); }
  html.js .rx-slot > .rx-text.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-fast) var(--ease); }
}
.papers-line { max-width: none; margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--dark-rule); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--dark-2); }
.papers-line a { color: var(--dark-head); }

/* ---------------------------------------------------------------- engagements: the intro, six rows (each opens on what
   the client gets), then the terms with the seal on the Calibration row, and the way to the communicator */
.ex { margin-top: var(--s5); border-top: 1px solid var(--dark-rule); }
.ex-item { border-bottom: 1px solid var(--dark-rule); }
.ex-row { grid-template-columns: 4em minmax(0, 1fr) auto; grid-template-areas: "no t more" "no sub sub"; column-gap: var(--s3); padding: 12px 0 13px; }
.ex-row .num { grid-area: no; }
.ex-t { grid-area: t; font-family: var(--display); font-size: var(--d1); line-height: var(--d1-lh); letter-spacing: var(--d1-ls); color: var(--dark-text); transition: translate var(--t-move) var(--ease), color var(--t-fast) var(--ease); }
.ex-sub { grid-area: sub; margin-top: 3px; }
.ex-more { grid-area: more; justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-style: normal; white-space: nowrap; color: var(--dark-2); }
.ex-more::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1px 1px 0; rotate: 45deg; translate: 0 -3px; transition: rotate var(--t-move) var(--ease), translate var(--t-move) var(--ease); }
.ex-row[aria-expanded="true"] .ex-more::after { rotate: -135deg; translate: 0 2px; }
.ex-row:hover .ex-t, .ex-row[aria-expanded="true"] .ex-t { color: var(--dark-full); }
.ex-row:hover .ex-more { color: var(--dark-head); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .ex-row:hover .ex-t { translate: var(--nudge) 0; } }
.ex-text { padding: 0 0 var(--s4) 4em; }
.ex-text p { max-width: var(--read); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--dark-text); text-wrap: pretty; }
html.js .ex-text:not(.is-open) { display: none; }
html.js .ex-row .ex-more { display: inline-flex; }
html:not(.js) .ex-more { display: none; }
@media (prefers-reduced-motion: no-preference) { html.js .ex-text.is-open { animation: hp-lift var(--t-move) var(--ease) both; } }

/* the terms: a term and its value on a 10em column, the rows at a 40px pitch */
.terms-title { font-size: var(--d4); line-height: var(--d4-lh); letter-spacing: var(--d4-ls); }
.terms { margin-top: var(--s4); border-top: 1px solid var(--dark-rule); }
.term { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); column-gap: var(--s3); align-items: baseline; padding: 9px 0 10px; border-bottom: 1px solid var(--dark-rule); }
.term dt { font-style: italic; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--dark-dim); }
.term dd { font-size: var(--fs-ui); line-height: var(--lh-line); color: var(--dark-head); text-wrap: pretty; }
/* the Calibration row carries the seal, stuck half over the row's rule at its right end */
.term--seal { position: relative; padding-right: 214px; }
.term--seal .seal { position: absolute; right: 6px; top: calc(100% - 50px); }
.eng-cta { margin-top: 96px; max-width: calc(100% - 220px); font-family: var(--display); font-size: var(--d2); line-height: var(--d2-lh); letter-spacing: var(--d2-ls); color: var(--dark-head); }

/* the seal: the holographic inspection seal, die-cut, glossy laminate, one corner lifted (the pick mark), and the
   calibrator's trigger. Its print is a printed object (exempt from the type scale). */
.sticker {
  --c: 13px;                        /* the lifted corner */
  position: relative; display: block; flex: none; width: 186px; height: 112px;
  padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; text-shadow: none;
  rotate: -3.2deg; transform-origin: 50% 60%;
  filter: drop-shadow(0 0.6px 0.4px rgba(0, 0, 0, 0.6)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
  transition: translate var(--t-move) var(--ease), rotate var(--t-move) var(--spring), filter var(--t-move) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.seal-body {
  position: absolute; inset: 0; border-radius: 6px; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%);
  transition: clip-path var(--t-move) var(--spring);
}
/* the corner, peeled back on itself: the white of the adhesive side, with its shadow on the foil */
.seal-lift {
  position: absolute; top: 0; right: 0; width: var(--c); height: var(--c); pointer-events: none;
  border-radius: 0 0 0 4px;
  background: linear-gradient(225deg, transparent 50%, #c7ccd1 50%, #f3f4f5 66%, #e2e5e8 100%);
  filter: drop-shadow(-1.5px 1.5px 1.2px rgba(0, 0, 0, 0.45));
  transition: width var(--t-move) var(--spring), height var(--t-move) var(--spring);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sticker:hover { translate: 0 -2px; rotate: -1.6deg; --c: 20px; }
}
.sticker:focus-visible { --c: 20px; }
@media (prefers-reduced-motion: no-preference) { .sticker:active { translate: 0 1px; } }
.story .sticker:focus-visible { outline: var(--ring-light); outline-offset: 6px; }
.sticker-foil, .sticker-print, .seal-gloss { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; }
.sticker-foil {
  display: block;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0 2px, rgba(255, 255, 255, 0) 2px 5px),
    conic-gradient(from 200deg at 60% 40%, #c9d3dc, #d9ccd9, #d2dccb, #dcd6c2, #c9d3dc);
}
.sticker-print {
  display: flex; flex-direction: column; overflow: hidden; color: #121417; text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
/* the gloss laminate: a hard specular streak that slides with the light (foil.js sets --gx) */
.seal-gloss {
  pointer-events: none; mix-blend-mode: screen;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.42) 47%, rgba(255, 255, 255, 0.08) 52%, rgba(255, 255, 255, 0) 60%) var(--gx, 60%) 0 / 260% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%);
}
.st-band { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 10px; background: #111317; color: #e8eaed; }
.st-mark { width: 22px; height: 20px; flex: none; }
.st-mark path { fill: none; stroke: currentColor; stroke-width: 0.075; stroke-linecap: round; stroke-linejoin: round; }
.st-k { font-family: var(--display); font-size: 19px; line-height: 1; letter-spacing: -0.02em; }
.st-void { padding: 9px 12px 0; font-size: 13.5px; line-height: 1.2; letter-spacing: -0.01em; }
.st-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding: 6px 4px 8px; border-top: 1px solid rgba(17, 19, 23, 0.55); margin-inline: 8px; font-size: 11.5px; line-height: 1; }
.st-test { display: inline-flex; align-items: center; gap: 4px; }
.st-test svg { width: 10px; height: 8px; }
/* Xanh Mono has no ≤: the label prints its own */
.st-brier { display: inline-flex; align-items: center; gap: 4px; }
.st-le { width: 6.5px; height: 8.5px; translate: 0 0.5px; }

/* ---------------------------------------------------------------- who we are: the founder's line leads, in the display
   face; behind the part, Exchange (assets/hybrid/repricing/), chrome units talking in electricity */
.about-body { margin-top: var(--s5); }
.about-body p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--dark-text); text-wrap: pretty; }
.about-body p + p { margin-top: var(--s3); }
.about-body .about-lead { margin-bottom: var(--s5); font-family: var(--display); font-size: var(--d3); line-height: var(--d3-lh); letter-spacing: var(--d3-ls); color: var(--dark-head); }
.about-body .about-pos { max-width: none; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--dark-rule); color: var(--dark-2); }
/* Exchange's layer (repricing.js puts it first in the section): under the text at z-index -1 inside the story's
   stacking context, above the liquid's stage; its height is the part's on a wide screen and the plate's on a phone
   (set by the script). The field is ornament: forced colours take it away. */
.rp-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden; }
.rp-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity var(--t-scene, 1100ms) var(--ease, ease); }
.rp-layer.is-ready .rp-canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rp-canvas { transition: none; } }
@media (forced-colors: active) { .rp-layer { display: none; } }
.about-pos a { color: var(--dark-head); }

/* without JavaScript no world grows beside the text: the parts close up, and a link lands with its heading under the bar
   (pages.css shows the data sheet in place of the story) */
html:not(.js) .part:not(.part--first) { min-height: 0; padding-block: var(--space-section) 0; }
html:not(.js) .contact { padding-bottom: var(--space-section); }
html:not(.js) .part { scroll-margin-top: var(--bar-h); }
/* the first screen of the black without JavaScript: the story's still behind the definition */
html:not(.js) .part--first { min-height: 100vh; padding-top: 16vh; scroll-margin-top: 0; background: url("/assets/hybrid/liquid/story-poster.jpg") center / cover no-repeat; }
html:not(.js) .part--first::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none; z-index: 0;
  background: var(--dark-bg); -webkit-mask-image: var(--ramp); mask-image: var(--ramp);
}
html:not(.js) .part--first > .blk { position: relative; z-index: 1; }
@media (max-width: 820px) {
  /* the phone still (780 by 1328) across the top, its black foot dissolving into the page's */
  html:not(.js) .part--first {
    min-height: 0; padding-top: var(--bar-h);
    background: linear-gradient(rgb(6 10 11 / 0) 45%, var(--dark-bg) 80%) center top / 100% 170.26vw no-repeat,
      var(--dark-bg) url("/assets/hybrid/liquid/story-poster-m.jpg") center top / 100% auto no-repeat;
  }
  html:not(.js) .part--first::after { display: none; }
  html:not(.js) .part:not(.part--first) { padding-top: var(--space-block); }
  html:not(.js) .part:not(.part--first) .lq-plate { display: none; }
}

/* ------------------------------------------------------------------ 7. contact: the invite, and HPR-C3 (comm/comm.css) */
.contact-invite { margin-top: var(--s4); font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--dark-2); text-wrap: pretty; }
.contact-invite a { color: var(--dark-head); }
.hc3-host { margin-top: var(--space-head); }
/* without JavaScript the <noscript> stands where the device would */
.form-nojs { margin-top: var(--space-head); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--dark-text); }

/* ------------------------------------------------------------------ 8. footer and the chrome nameplate
   The footer continues the page's last surface: silver on the light pages (the 404, the papers), the black on
   the home page (.foot--dark). The nameplate is the same on both, its ink fitted to the frame (page.js). */
.foot { position: relative; overflow: hidden; padding: var(--space-head) var(--frame) 0; background: linear-gradient(180deg, var(--silver), var(--silver-deep)); }
.foot-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3) var(--s5); flex-wrap: wrap; font-size: var(--fs-ui); line-height: var(--lh-line); color: var(--quiet); }
.foot-row p { max-width: none; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
/* chrome links: colour only, with a taller hit area that leaves the row's rhythm alone */
.foot-links a { display: inline-block; padding-block: var(--s2); margin-block: calc(-1 * var(--s2)); color: var(--graphite); text-decoration: none; }
.foot-links a:hover, .foot-links a[aria-current] { color: var(--ink); }
.foot--dark { --label: var(--dark-dim); background: var(--dark-bg); }
.foot--dark .foot-row { color: var(--dark-dim); }
.foot--dark .foot-links a { color: var(--dark-text); }
.foot--dark .foot-links a:hover, .foot--dark .foot-links a[aria-current] { color: var(--dark-full); }
/* 03's chrome nameplate: before the metal pours (and without WebGL) the text itself is chrome */
.nameplate {
  background: linear-gradient(180deg, #ffffff 0%, #c8cfd5 26%, #6d767d 46%, #0f1113 50%, #2d3339 56%, #8a939a 74%, #dfe4e8 92%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.5px rgba(10, 11, 12, 0.3);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.75)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.12));
}
.chrome-host { position: relative; }
.chrome-canvas { position: absolute; z-index: 1; pointer-events: none; }
.chromed { background: none !important; -webkit-text-stroke: 0; filter: none; color: transparent; -webkit-text-fill-color: transparent; }
.chromed::selection, .chromed ::selection { background: var(--hair); }
.nameplate {
  display: block; margin: var(--space-head) auto 0; padding-bottom: var(--s5); width: max-content; max-width: none;
  font-family: var(--display); font-size: 17.4vw; line-height: 0.8; letter-spacing: var(--ls-plate); white-space: nowrap;
}

/* ------------------------------------------------------------------ 404: the pool, quieter. The headline has the stage;
   the copy and the way home sit low on the pool, where it has turned to the footer's silver */
.nf { --horizon: 60%; --measure: 0.56; outline: none; }
.nf-copy { position: absolute; z-index: 2; left: 50%; bottom: clamp(24px, 4.5vh, 56px); translate: -50% 0; width: min(30em, calc(100% - 2 * var(--gutter))); text-align: center; }
.nf-copy p { margin-inline: auto; }
.nf-p { margin-top: var(--s2); font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--graphite); text-wrap: balance; }
.nf-home { margin-top: var(--s4); }

/* ------------------------------------------------------------------ 821 to 1024 (a small laptop, a tablet on its side): each
   part's text takes eight columns (1–8, or 5–12 on the right); the world grows in the other four */
@media (min-width: 821px) and (max-width: 1024px) {
  .part > .blk { grid-column: 1 / span 8; }
  .part--r > .blk { grid-column: 5 / span 8; }
}

/* ------------------------------------------------------------------ 820 and under (tablets and phones): one column inside
   the gutter; each part a plate (its world) above its text */
@media (max-width: 820px) {
  .part { display: block; min-height: 0; padding: 0 var(--frame) 6svh; scroll-margin-top: 0; }
  .part--first { padding-top: 0; min-height: 0; scroll-margin-top: 0; }
  /* Contact's world grows under the communicator (its plate is the part's last child, liquid.css .lq-plate--foot), so
     its chrome is still on screen at the foot of the page; the part keeps a short run of black after Who we are, and
     its plate runs down to the story's foot, where the stage's ramp is kept short so the chrome reaches the footer */
  .part.contact { padding-top: 6svh; padding-bottom: 0; }
  .part.contact > .lq-plate--foot { margin-top: var(--s4); }
  .story::after { height: 48px; }
  /* no slot under the research rows here: the list's last rule closes it, and the papers line takes none of its own */
  .papers-line { border-top: 0; padding-top: 0; }
  /* the text sits on a scrim of the black, edge to edge, so a frame of metal that has not yet caught up with a fast
     flick can never show behind it */
  .part > .blk { position: relative; }
  .part > .blk::before { content: ""; position: absolute; z-index: -1; inset: calc(-1 * var(--s4)) -100vw calc(-1 * var(--s4)) calc(-1 * var(--frame)); background: var(--dark-bg); pointer-events: none; }
  .about-body .about-lead { margin-bottom: var(--s4); }
  /* research on a phone: each paragraph opens under its own row (Read more, Less), one at a time */
  html.js .rx-more { display: block; }
  html.js .rx-item > .rx-text:not(.is-open) { display: none; }
  .rx-row { grid-template-columns: 3.9em minmax(0, 1fr); }
  .rx-item > .rx-text, .ex-text { padding-left: 0; }
  .nf { --horizon: 66%; --measure: 0.6; }
}
/* 601 to 820: a tablet keeps the reading measure (eight columns' worth) */
@media (min-width: 601px) and (max-width: 820px) {
  .part > .blk { max-width: 36em; }
}
/* 700 and under: the headline stands in two lines at the left, and the wordmark with it */
@media (max-width: 700px) {
  .hero { --horizon: 62%; --measure: 0.88; }
  .headline { left: var(--gutter); translate: none; line-height: 0.84; }
  .hl { display: block; }
  .hl + .hl { padding-left: 0.42em; }
  .hero-mark { left: var(--gutter); translate: 0 -50%; }
  html:not(.js) .headline { bottom: -0.133em; font-size: 22.8vw; }
  html:not(.js) .headline-echo--nojs { bottom: calc(100% - 0.133em); transform-origin: 50% calc(100% - 0.133em); }
  /* the 404's short headline stays on one line, so the way home fits on the pool under its reflection */
  .nf { --horizon: 56%; --measure: 0.9; }
  .nf .headline { line-height: 1; }
  .nf .hl { display: inline; }
  .nf .hl + .hl { padding-left: 0; }
  /* ...and its copy goes to the left with it (above 700 both stay centred) */
  .nf-copy { left: var(--gutter); translate: none; width: calc(100% - 2 * var(--gutter)); text-align: left; }
  .nf-copy p { margin-inline: 0; }
  html:not(.js) .nf .headline { bottom: -0.213em; font-size: 15vw; }
  html:not(.js) .nf .headline-echo--nojs { bottom: calc(100% - 0.213em); transform-origin: 50% calc(100% - 0.213em); }
}
/* 600 and under: the phone; the beats run on, the seal hangs under the Calibration row, the footer row stacked */
@media (max-width: 600px) {
  .q-beat { display: inline; }
  .q-beat + .q-beat { margin-top: 0; }
  .sticker { width: 178px; height: 106px; }
  .st-void { font-size: 12.5px; }
  .term { grid-template-columns: 7.6em minmax(0, 1fr); }
  .term--seal { padding-right: 0; }
  .term--seal .seal { top: calc(100% - 12px); right: 4px; }
  .eng-cta { margin-top: 124px; max-width: none; }
  .ex-row { grid-template-columns: 3.4em minmax(0, 1fr); grid-template-areas: "no t" "no sub" "no more"; }
  .ex-more { justify-self: start; margin-top: var(--s1); }
  .foot-row { flex-direction: column; align-items: flex-start; }
  .foot-links { gap: var(--s1) var(--s4); }
}

/* ------------------------------------------------------------------ reduced motion: no hover travel, no spring */
@media (prefers-reduced-motion: reduce) {
  .sticker { transition: none; }
}

/* ------------------------------------------------------------------ the hidden layer (hidden.js): two printed slips, and x-ray
   The slips are paper, in the manual's register: the Bayes entry (type bayes) and the keys (press ?). */
.slip-dlg {
  width: min(440px, calc(100vw - 2 * var(--gutter))); max-height: min(86vh, 720px); padding: 0; border: 0; overflow: auto;
  background: none; color: #16181b;
  opacity: 0; translate: 0 8px;
  transition: opacity var(--t-fast) var(--ease), translate var(--t-fast) var(--ease), overlay var(--t-fast) var(--ease) allow-discrete, display var(--t-fast) var(--ease) allow-discrete;
}
.slip-dlg[open] { opacity: 1; translate: 0 0; transition-duration: var(--t-ui); }
@starting-style { .slip-dlg[open] { opacity: 0; translate: 0 14px; } }
.slip-dlg::backdrop { background: rgba(4, 7, 8, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.slip-paper {
  position: relative; padding: var(--s5) var(--s5) var(--s4);
  background: linear-gradient(180deg, #fbfaf6, #f1efe8); border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 30px 60px -24px rgba(0, 0, 0, 0.7), 0 6px 14px -8px rgba(0, 0, 0, 0.5);
  /* a torn top edge, as a slip pulled from a pad */
  -webkit-mask: radial-gradient(4px 3px at 50% 0, transparent 98%, #000) 0 0 / 8px 100% repeat-x;
  mask: radial-gradient(4px 3px at 50% 0, transparent 98%, #000) 0 0 / 8px 100% repeat-x;
}
.slip-paper p { max-width: none; }
.slip-act { margin-top: var(--s4); }
.be-hw { font-family: var(--display); font-size: var(--d3); line-height: var(--d3-lh); letter-spacing: var(--d3-ls); }
.be-hw b { font-weight: 400; }
.be-hw .ipa, .be-dates { font-family: var(--text); font-size: var(--fs-lede); letter-spacing: 0; color: #3b4046; }
.be-text { margin-top: var(--s3); font-size: var(--fs-body); line-height: var(--lh-body); color: #24282d; text-wrap: pretty; }
.be-see { margin-top: var(--s3); font-size: var(--fs-body); line-height: var(--lh-body); color: #24282d; }
.be-see i { color: #4d535a; }
.ks-title { font-family: var(--display); font-size: var(--d3); line-height: 1; letter-spacing: var(--d3-ls); }
.ks-list { margin-top: var(--s3); border-top: 1.5px solid #16181b; }
.ks-row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); column-gap: var(--s3); padding: 7px 0 8px; border-bottom: 1px dashed rgba(22, 24, 27, 0.32); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.ks-row kbd { font-family: var(--text); font-size: var(--fs-meta); color: #0b6b66; }
.ks-words-h { margin-top: var(--s4); font-style: italic; font-size: var(--fs-meta); line-height: var(--lh-meta); color: #4d535a; }
.ks-words { margin-top: var(--s1); font-size: var(--fs-meta); line-height: var(--lh-meta); }
@media (prefers-reduced-motion: reduce) { .slip-dlg { transition: none; } }

/* x-ray: the mechanism in place of the surfaces. The reveal boundaries dashed in the teal, the text holes the metal keeps
   clear of in red (as the liquid tints them), the legend on paper at the lower left. */
html.xray [data-reveal] { outline: 1px dashed rgba(92, 211, 194, 0.7); outline-offset: 5px; }
html.xray [data-hole] { box-shadow: 0 0 0 1px rgba(255, 96, 86, 0.55), 0 0 0 10px rgba(255, 96, 86, 0.06); }
.xr-legend {
  position: fixed; z-index: 70; left: var(--gutter); bottom: var(--s4); width: min(380px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100vh - var(--bar-h) - 2 * var(--s4)); overflow: auto; overscroll-behavior: contain; outline: none;
  padding: var(--s4) var(--s4) var(--s3); border-radius: 3px; color: #16181b;
  background: linear-gradient(180deg, #fbfaf6, #efede6);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8), 0 6px 14px -8px rgba(0, 0, 0, 0.6);
}
.xr-legend[hidden] { display: none; }
.xr-legend p { max-width: none; }
.xr-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s2); border-bottom: 1.5px solid #16181b; }
.xr-title { font-family: var(--display); font-size: var(--d2); line-height: 1; letter-spacing: var(--d2-ls); }
.xr-layers { margin-top: var(--s2); }
.xr-layers li { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; font-size: var(--fs-meta); line-height: var(--lh-meta); }
.xr-sw { flex: none; width: 14px; height: 10px; border-radius: 1px; translate: 0 1px; }
[data-layer="0"] .xr-sw { background: linear-gradient(90deg, #2a2f33, #9aa3a8); }
[data-layer="1"] .xr-sw { background: #86e3d3; }
[data-layer="2"] .xr-sw { background: repeating-linear-gradient(0deg, #59636a 0 1px, #c9cfd3 1px 3px); }
[data-layer="3"] .xr-sw { border: 1px dashed #0b6b66; }
[data-layer="4"] .xr-sw { height: 2px; background: #0b6b66; translate: 0 -3px; }
.xr-cam { display: block; width: 100%; height: 56px; margin-top: var(--s1); overflow: visible; }
.xr-cam-hold { stroke: rgba(22, 24, 27, 0.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.xr-cam-z { fill: none; stroke: #0b6b66; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.xr-cam-x { fill: none; stroke: rgba(22, 24, 27, 0.45); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.xr-cam-now { stroke: #c2342c; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.xr-cam-t { font-family: var(--text); font-size: 9px; fill: #4d535a; text-anchor: middle; }
.xr-devs { margin-top: var(--s3); border-top: 1px solid rgba(22, 24, 27, 0.3); }
.xr-dev { border-bottom: 1px solid rgba(22, 24, 27, 0.18); }
.xr-dev summary { padding: 8px 0; cursor: pointer; font-size: var(--fs-meta); line-height: var(--lh-meta); }
.xr-dev summary b { font-weight: 400; font-family: var(--display); font-size: 19px; margin-right: 6px; }
.xr-dev summary:focus-visible { outline: var(--ring); outline-offset: 2px; }
.xr-dev .fig { margin: 0 0 var(--s2); overflow: clip; }
.xr-dev .fig-art { width: calc(100% / var(--kk, 1)); max-width: none; margin-left: calc(-100% * var(--k0, 0) / var(--kk, 1)); }
.xr-dev .fig-cap, .xr-dev .fig-name { display: none; }
.xr-dev .fig-call b { width: 17px; height: 17px; font-size: 10.5px; }
.xr-parts { padding-bottom: var(--s2); columns: 2; column-gap: var(--s3); }
.xr-parts li { display: flex; gap: 6px; break-inside: avoid; font-size: 14px; line-height: 1.35; padding: 1px 0; }
.xr-parts .num { flex: none; width: 1.4em; font-size: 14px; color: #0b6b66; }
.xr-hint { margin-top: var(--s3); font-style: italic; font-size: var(--fs-meta); line-height: var(--lh-meta); color: #4d535a; }
@media (max-width: 600px) {
  .xr-legend { left: var(--s2); right: var(--s2); width: auto; bottom: var(--s2); max-height: 52vh; }
  .xr-parts { columns: 1; }
}
/* HPR-C3 in pieces: the planes spread along the depth and the object leans back to show them; the manual's numbers sit
   on its parts (hidden.js) */
.hc3-host { position: relative; }
html.xray .hc3-obj { transform: rotateX(46deg) rotateZ(-18deg) scale(0.78) !important; transition: transform var(--t-move) var(--ease); }
html.xray .hc3-stage { perspective: 2200px; }
html.xray .hc3-under { transform: translateZ(calc(-1 * var(--hc3-T) - 110px)); }
html.xray .hc3-board { transform: translateZ(calc(-0.6 * var(--hc3-T) - 62px)); }
html.xray .hc3-walls { opacity: 0.35; }
html.xray .hc3-in { transform: translateZ(54px); }
html.xray .hc3-gloss { transform: translateZ(96px); }
.hc3-under, .hc3-board, .hc3-in, .hc3-gloss { transition: transform var(--t-move) var(--ease); }
.xr-marks { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.xr-marks b {
  position: absolute; display: grid; place-items: center; width: 22px; height: 22px; translate: -50% -50%; border-radius: 50%;
  font-family: var(--text); font-weight: 400; font-size: 12.5px; line-height: 1; color: #16181b;
  background: #f4f2ec; box-shadow: 0 0 0 1.5px #0b6b66, 0 4px 10px rgba(0, 0, 0, 0.6);
}
/* HPR-C2 in pieces, in its dialog */
html.xray .c2-obj { transform: rotateX(40deg) rotateZ(-14deg) scale(0.8); transition: transform var(--t-move) var(--ease); }
html.xray .c2-body { transform: translateZ(calc(-26 * var(--mm))); }
html.xray .c2-race { transform: translateZ(calc(16 * var(--mm))); }
html.xray .c2-balls { transform: translateZ(calc(14 * var(--mm))); }
html.xray .c2-track { transform: translateZ(calc(9 * var(--mm))); }
@media (prefers-reduced-motion: reduce) {
  html.xray .hc3-obj, .hc3-under, .hc3-board, .hc3-in, .hc3-gloss, html.xray .c2-obj { transition: none; }
}