/* / — one viewport, never more. The page has a fixed amount to say and must not
 * be able to grow a scrollbar. */

.page {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 24px; overflow: hidden;
}

/* No masthead here. The mark is in the lockup at the centre of the page, and repeating it
   in a corner is the same brand said twice on a page whose whole discipline is saying
   things once. Every other route keeps the header — this is the one page that already
   introduces itself. */

.hero {
  /* Carries the top spacing the masthead used to hold. */
  flex: 1; min-height: 0; width: 100%; max-width: 620px; padding-top: 26px;
  display: flex; flex-direction: column; justify-content: center;
  /* Optically above true centre — the footer weights the bottom. */
  padding-bottom: clamp(16px, 5vh, 52px);
  /* The lockup introduces the page and the instrument demonstrates it; they are two moments,
     not one block, and the gap is what says so. Scales with the viewport so a tall window
     spends its extra height here rather than on a larger bar. */
  gap: clamp(32px, 10vh, 104px);
}

.lockup { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.lockup h1 {
  display: inline-flex; align-items: center; gap: 15px; margin: 0;
  /* The mark is the only branding on this page — there is no masthead — so it carries the
     introduction on its own and is set to be looked at rather than noticed. The page has
     height to spare at every viewport it is designed for, so it spends it here. */
  font-size: clamp(33px, 7vw, 47px); font-weight: 600;
  letter-spacing: -0.03em; color: var(--fg); user-select: none;
}
.lockup h1 svg { display: block; flex: none; width: 1.13em; height: 1.13em; }
.positioning { margin: 0; font-size: 16px; color: var(--muted); text-wrap: balance; }

/* --- The instrument ----------------------------------------------------- */

.instrument { display: flex; flex-direction: column; gap: 10px; }

/* Height reserved always, so the readout cannot shift the layout. */
.readout {
  height: 18px; margin: 0;
  font-family: var(--mono); font-size: 12px;
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
  /* The readout exists only because you touched the bar, so it is the accent's
     to own. Cyan marks what responds to you, never what the document did. */
  color: var(--signal); text-align: center;
  opacity: 0; transition: opacity 0.14s ease;
}
.readout .region { color: var(--faint); }
.instrument:hover .readout, .instrument:focus-within .readout { opacity: 1; }

.bar {
  position: relative; height: 34px; border-radius: 3px;
  background: var(--well); box-shadow: var(--inset-hi), var(--drop);
  overflow: hidden; cursor: crosshair; outline: none;
  transition: box-shadow 0.18s ease;
  clip-path: inset(0 0 0 0);
}
/* A hairline of accent on hover — the only cue that the instrument is live.
   Declared before :focus-visible so focus still wins when both apply. */
.bar:hover { box-shadow: inset 0 0 0 1px var(--signal-line), var(--inset-hi), var(--drop); }
.bar:focus-visible {
  box-shadow: var(--inset-hi), 0 0 0 2px var(--paper), 0 0 0 4px var(--signal);
}

/* Fixed geometry of the sample, expressed in the stylesheet rather than as
   inline style attributes, which the Content-Security-Policy forbids. */
.bar .s1 { left: 0; width: 65.994%; }
.bar .s2 { left: 65.994%; width: 19.159%; }
.bar .s3 { left: 85.153%; width: 6.769%; }
.bar .s4 { left: 91.922%; width: 8.078%; }

.cursor {
  position: absolute; top: 0; bottom: 0; width: 1px; background: var(--signal);
  opacity: 0; transition: opacity 0.14s ease; pointer-events: none;
}
.instrument:hover .cursor, .instrument:focus-within .cursor { opacity: 1; }

.rail {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11.5px;
  font-variant-numeric: tabular-nums; color: var(--faint);
}
.instrument .legend { margin-top: 2px; }

/* --- The finding -------------------------------------------------------- */

.finding { display: flex; flex-direction: column; gap: 14px; }
.statement {
  margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg); text-wrap: pretty;
}
.oid {
  display: inline-block; margin: 0; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.02em; color: var(--muted); align-self: flex-start;
}
.oid:hover { color: var(--fg); }

/* Both readings. Same type, same weight, same surface, fixed order. Neither is
   the answer — BRAND.md §1. */
.readings {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  padding-top: 15px; border-top: 1px solid var(--line);
}
.readings h2 { margin: 0 0 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
.readings p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--body); }


/* This page is one viewport and never more, so the footer shares the hero's 620px measure
   rather than the site's 760px — which leaves four links and a version line competing for
   140px less than they have anywhere else. They are set a step smaller here so the whole
   thing stays one line: two rows would read as an accident on the one page that is composed
   rather than scrolled. Measured at 1280×900, the row needs ~594px of the 620. */
.page .foot {
  width: 100%; max-width: 620px; flex: none;
  margin-top: 0; border-top: 0; padding: 16px 0 22px; padding-inline: 0;
  font-size: 14px;
}
.page .foot nav { gap: 14px; flex-wrap: nowrap; white-space: nowrap; }
.page .foot .provenance { font-size: 10px; letter-spacing: -0.01em; }

/* --- Short viewports: shed the optional before anything overflows -------- */

@media (max-height: 760px) { .hero { gap: 26px; } .instrument .legend { display: none; } }
@media (max-height: 640px) { .readings, .positioning { display: none; } }
@media (max-width: 560px) {
  .readings { grid-template-columns: 1fr; gap: 14px; }
  .page .foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* --- Load sequence: one orchestrated moment, then stillness -------------- */

@media (prefers-reduced-motion: no-preference) {
  .bar { animation: draw 620ms var(--ease) 260ms both; }
  .lockup { animation: rise 620ms var(--ease) both; }
  .rail, .instrument .legend { animation: fade 500ms ease 820ms both; }
  .finding { animation: rise 620ms var(--ease) 900ms both; }
  .page .foot { animation: fade 500ms ease 1080ms both; }
}
@keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }