/*
 * Quennell Hand & Wrist: HOME layout. Values from assets/tokens.css only.
 *
 * The chart (desktop): two rows on the left (the hero, then "Tap where it hurts" with the consult
 * note) beside ONE plate on the right, which stays put while the left column moves. The plate is
 * the signature: the drawing is finished at load; a marker dot pulses on the thumb base; the
 * eight places appear when the tap row arrives, and a marked place draws its stroke on.
 * Phones: a cropped copy of the hand above the headline, the full plate after the tap intro, the
 * note as a bottom sheet.
 */

/* ── the chart ────────────────────────────────────────────────────────────────────────── */
.qh-chart {
    display: grid;
    grid-template-columns: var(--s-chart-col) var(--s-plate-col);
    grid-template-rows: auto auto;
    column-gap: var(--s-space-2xl);
    max-width: var(--s-max); margin-inline: auto;
    padding-inline: var(--s-gutter);
}
.qh-crop { display: none; }

/* Row 1: the hero. Everything sits above y=900 at 1440x900. */
.qh-hero {
    grid-column: 1; grid-row: 1;
    min-height: var(--s-first-h);
    display: flex; flex-direction: column; justify-content: center; gap: var(--s-space-m);
    padding-block: var(--s-space-l);
}
.qh-hero > .qh-kicker { margin-bottom: calc(var(--s-space-xs) * -1); }
.qh-hero__name { display: flex; flex-direction: column; gap: var(--s-wordmark-gap); }
.qh-hero__a {
    font: var(--s-weight-display) var(--s-size-wordmark)/var(--s-leading-display) var(--s-font-display);
    letter-spacing: var(--s-track-display);
}
.qh-hero__b {
    display: flex; align-items: center; gap: var(--s-space-s);
    font: var(--s-weight-semi) var(--s-size-wordmark-2)/var(--s-leading-tight) var(--s-font-display);
    letter-spacing: var(--s-track-h2); color: var(--s-muted);
}
/* A ruled line runs from "Hand & Wrist" toward the drawing: the name points at the hand. */
.qh-hero__b::after { content: ""; flex: 1; height: var(--s-rule-w); background: var(--s-rule-strong); }
.qh-hero__line {
    font: var(--s-weight-display) var(--s-size-line)/var(--s-leading-tight) var(--s-font-display);
    letter-spacing: var(--s-track-h2); max-width: 16ch; text-wrap: balance;
}
.qh-hero__proof { color: var(--s-muted); max-width: var(--s-measure); text-wrap: pretty; }
.qh-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-m) var(--s-space-l); }

/* The facts: figures on one row, labels on the next, so a wrapped label never lifts its figure. */
.qh-facts {
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto;
    column-gap: var(--s-space-m);
    padding-top: var(--s-space-s); border-top: var(--s-rule-w) solid var(--s-rule);
}
.qh-facts li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--s-space-3xs); }
.qh-facts__fig {
    display: flex; align-items: baseline; gap: var(--s-space-3xs);
    font: var(--s-weight-display) var(--s-size-fig)/var(--s-leading-display) var(--s-font-display);
    letter-spacing: var(--s-track-h2); font-variant-numeric: tabular-nums;
}
.qh-facts__unit { font: var(--s-weight-semi) var(--s-size-small)/var(--s-leading-snug) var(--s-font-display); color: var(--s-muted); letter-spacing: 0; }
.qh-facts__label { font-size: var(--s-size-small); color: var(--s-muted); line-height: var(--s-leading-snug); }

/* Row 2: tap where it hurts. A full stage of its own, so the plate has a reason to stay. */
.qh-tap {
    grid-column: 1; grid-row: 2;
    min-height: var(--s-stage-h);
    display: flex; flex-direction: column; justify-content: center; gap: var(--s-space-xs);
    padding-block: var(--s-space-xl);
    border-top: var(--s-rule-w) solid var(--s-rule);
}
.qh-tap .qh-kicker { margin-bottom: 0; }
.qh-tap .qh-h2 { font-size: var(--s-size-h2-tap); max-width: none; }
.qh-tap__hint { order: 2; }
.qh-tap__lede { color: var(--s-muted); max-width: var(--s-measure); }
.qh-tap__lede strong { color: var(--s-ink); font-weight: var(--s-weight-strong); }
.qh-tap__hint { font-size: var(--s-size-small); color: var(--s-muted); }

/* ── the consult note: a page of the clinic's own note pad ────────────────────────────── */
.qh-note { display: grid; margin-top: var(--s-space-xs); max-width: var(--s-note-w); }
.qh-note__page {
    grid-area: 1 / 1;
    display: flex; flex-direction: column; gap: var(--s-space-s);
    padding: var(--s-space-m) var(--s-space-m) var(--s-space-m) var(--s-space-xl);
    background-color: var(--s-wash);
    /* a single marker margin rule, as on the clinic's note pad */
    background-image: linear-gradient(90deg, transparent calc(var(--s-space-l) - var(--s-rule-w)), var(--s-marker) calc(var(--s-space-l) - var(--s-rule-w)), var(--s-marker) var(--s-space-l), transparent var(--s-space-l));
    border-top: var(--s-space-2xs) solid var(--s-ink);
    visibility: hidden; opacity: 0; transform: translateX(var(--s-note-shift));
    transition: opacity var(--s-dur-note) var(--s-ease-out), transform var(--s-dur-note) var(--s-ease-out), visibility 0s linear var(--s-dur-note);
}
.qh-note__page.is-active {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity var(--s-dur-note) var(--s-ease-out), transform var(--s-dur-note) var(--s-ease-out), visibility 0s;
}
.qh-note__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-space-s); }
.qh-note__label {
    font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body);
    letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-muted);
}
.qh-note__close {
    min-height: var(--s-hit); padding: 0 var(--s-space-xs);
    border: 0; background: transparent; color: var(--s-ink); cursor: pointer;
    font: var(--s-weight-strong) var(--s-size-small)/var(--s-leading-snug) var(--s-font-body);
    text-decoration: underline; text-underline-offset: var(--s-space-3xs);
}
.qh-note__title { font: var(--s-weight-display) var(--s-size-h3)/var(--s-leading-snug) var(--s-font-display); letter-spacing: var(--s-track-h2); }
.qh-note__marked {
    display: inline-block; margin-right: var(--s-space-3xs);
    color: var(--s-marker-deep);
    border-bottom: var(--s-mark-w) solid var(--s-marker);
}
.qh-note__empty { color: var(--s-muted); }
.qh-note__rules { display: grid; gap: var(--s-space-s); padding-top: var(--s-space-2xs); }
.qh-note__rules span { height: var(--s-rule-w); background: var(--s-wash-line); }
.qh-note__body { display: grid; gap: var(--s-space-3xs); }
.qh-note__body dt {
    padding-top: var(--s-space-2xs); border-top: var(--s-rule-w) solid var(--s-wash-line);
    font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body);
    letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-muted);
}
.qh-note__body dd { font-size: var(--s-size-small); line-height: var(--s-leading-snug); margin-bottom: var(--s-space-2xs); }
.qh-note__likely { display: flex; flex-wrap: wrap; gap: var(--s-space-3xs) var(--s-space-s); }
.qh-note__likely li { font: var(--s-weight-display) var(--s-size-body)/var(--s-leading-snug) var(--s-font-display); }
.qh-note__likely li + li::before { content: ""; display: inline-block; width: var(--s-space-3xs); height: var(--s-space-3xs); margin-right: var(--s-space-s); border-radius: 50%; background: var(--s-muted); vertical-align: middle; }
.qh-note__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-space-s); }
.qh-note__links > a:first-child { display: inline-flex; align-items: center; min-height: var(--s-hit); font-weight: var(--s-weight-strong); }
.qh-note__foot { font-size: var(--s-size-micro); color: var(--s-muted); font-style: italic; }

/* ── the plate ────────────────────────────────────────────────────────────────────────── */
.qh-plate {
    grid-column: 2; grid-row: 1 / span 2;
    align-self: start;
    position: sticky; top: var(--s-nav-h);
    height: var(--s-first-h);
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--s-space-s);
    container-type: inline-size;
}
.qh-plate__sheet {
    position: relative;
    height: min(var(--s-plate-h), calc(100cqw / (var(--s-plate-ratio))));
    aspect-ratio: var(--s-plate-ratio);
}
.qh-plate__art { width: 100%; height: 100%; overflow: visible; }
.qh-leader { fill: none; stroke: var(--s-ink); stroke-width: var(--s-stroke-crease); stroke-dasharray: var(--s-dash-leader); }
.qh-plate__elbow {
    position: absolute; left: var(--x); top: var(--y);
    transform: translate(-50%, var(--s-space-2xs));
    font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body);
    letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-muted);
}

/* The marker strokes, drawn on like a pen across skin (pathLength="1"), at a surgeon's weight,
   with a lettered label written beside the mark once the pen lifts. */
.qh-plate .qh-markpath {
    stroke-width: var(--s-stroke-surgical);
    stroke-dasharray: 1 1; stroke-dashoffset: 1;
    transition: stroke-dashoffset var(--s-dur-mark) var(--s-ease-pen);
}
.qh-plate .qh-markset.is-marked .qh-markpath { stroke-dashoffset: 0; }
.qh-marklabel {
    fill: var(--s-marker-deep);
    font: var(--s-weight-semi) var(--s-size-marklabel) var(--s-font-display);
    letter-spacing: var(--s-track-h2);
    paint-order: stroke; stroke: var(--s-bone); stroke-width: var(--s-label-halo); stroke-linejoin: round;
    opacity: 0;
    transition: opacity var(--s-dur-base) var(--s-ease-out);
}
.qh-marklabel__tag { font-size: var(--s-size-marktag); text-transform: uppercase; letter-spacing: var(--s-track-label); fill: var(--s-ink); }
.qh-plate .qh-markset.is-marked .qh-marklabel { opacity: 1; transition-delay: var(--s-dur-label-delay); }

/* The soft pulse on the thumb base: the drawing's only movement before you touch it. */
.qh-pulse__dot { fill: var(--s-marker); }
.qh-pulse__ring {
    fill: var(--s-marker); opacity: 0;
    transform-box: fill-box; transform-origin: center;
    animation: qh-pulse var(--s-dur-pulse) var(--s-ease-out) infinite;
}
@keyframes qh-pulse {
    0% { opacity: 0.45; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(var(--s-pulse-scale)); }
}
.qh-plate[data-state="marked"] .qh-pulse__dot,
.qh-plate[data-state="marked"] .qh-pulse__ring { opacity: 0; animation: none; transition: opacity var(--s-dur-base) var(--s-ease-out); }

/* The eight places: 44px buttons, each a small crosshair ring until marked. */
.qh-spots { position: absolute; inset: 0; z-index: var(--s-z-spots); }
.qh-spot {
    position: absolute; left: var(--x); top: var(--y);
    width: var(--s-hit); height: var(--s-hit); margin: 0; padding: 0;
    transform: translate(-50%, -50%);
    border: 0; border-radius: 50%; background: transparent; cursor: pointer;
    transition: opacity var(--s-dur-spots-in) var(--s-ease-out) calc(var(--i) * var(--s-stagger-spots)), transform var(--s-dur-spots-in) var(--s-ease-out) calc(var(--i) * var(--s-stagger-spots));
}
.qh-spot::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: var(--s-spot-ring); height: var(--s-spot-ring);
    transform: translate(-50%, -50%);
    border: var(--s-btn-border) solid var(--s-ink); border-radius: 50%;
    background: var(--s-bone);
    transition: border-color var(--s-dur-fast) var(--s-ease-out), transform var(--s-dur-base) var(--s-ease-out);
}
.qh-spot::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: var(--s-space-3xs); height: var(--s-space-3xs);
    transform: translate(-50%, -50%); border-radius: 50%; background: var(--s-ink);
}
.qh-spot:hover::before { border-color: var(--s-marker); transform: translate(-50%, -50%) scale(1.25); }
.qh-spot:focus-visible { outline-offset: 0; }
.qh-spot[aria-pressed="true"]::before { border-color: transparent; background: transparent; }
.qh-spot[aria-pressed="true"]::after { background: var(--s-marker); width: var(--s-space-2xs); height: var(--s-space-2xs); }
/* The thumb-base spot lies under the pulse: it needs no ring of its own. */
.qh-spot--invite::before, .qh-spot--invite::after { opacity: 0; }
.qh-plate[data-state="marked"] .qh-spot--invite::before,
.qh-plate[data-state="marked"] .qh-spot--invite::after { opacity: 1; }
/* While the hero is on screen the places wait; with JS they appear as the tap row arrives. */
.qh-js .qh-plate[data-state="invite"] .qh-spot { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
.qh-js .qh-plate[data-state="invite"] .qh-spot:focus-visible { opacity: 1; transform: translate(-50%, -50%); }

.qh-plate__title {
    display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--s-space-3xs) var(--s-space-m);
    width: min(100%, var(--s-measure-wide));
    padding-top: var(--s-space-xs); border-top: var(--s-rule-w) solid var(--s-ink);
}
.qh-plate__num { grid-column: 1; grid-row: 1; font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body); letter-spacing: var(--s-track-label); text-transform: uppercase; }
.qh-plate__name { grid-column: 2; grid-row: 1; font: var(--s-weight-display) var(--s-size-h3)/var(--s-leading-snug) var(--s-font-display); letter-spacing: var(--s-track-h2); }
.qh-plate__scale { grid-column: 3; grid-row: 1; justify-self: end; font-size: var(--s-size-micro); color: var(--s-muted); font-style: italic; }
.qh-plate__cap { grid-column: 2 / -1; grid-row: 2; font-size: var(--s-size-small); color: var(--s-muted); }

/* ── who you will see: a contact sheet of drawn clinicians ────────────────────────────── */
.qh-people {
    max-width: var(--s-max); margin-inline: auto;
    padding: var(--s-section) var(--s-gutter) calc(var(--s-section) / 2); /* the journey band follows close behind */
    border-top: var(--s-rule-w) solid var(--s-rule);
}
.qh-people__head {
    display: grid; grid-template-columns: 7fr 5fr; align-items: end; gap: var(--s-space-s) var(--s-space-2xl);
    margin-bottom: var(--s-space-2xl);
}
.qh-people__head .qh-kicker { grid-column: 1 / -1; margin-bottom: 0; }
.qh-people__title { max-width: 20ch; }
.qh-people__lede { color: var(--s-muted); max-width: var(--s-measure); }
.qh-contact {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--s-space-xl) var(--s-space-l);
    padding-bottom: var(--s-stagger-y);
}
.qh-contact__frame { position: relative; display: grid; gap: var(--s-space-s); align-content: start; }
/* Every other frame drops, as if laid out by hand on the light box. */
.qh-contact__frame:nth-child(3n + 2) { translate: 0 var(--s-stagger-y); }
.qh-contact__frame figure {
    position: relative;
    padding: var(--s-space-m) var(--s-space-m) var(--s-space-s);
    background: var(--s-paper);
    border: var(--s-rule-w) solid var(--s-rule);
}
.qh-contact__no {
    position: absolute; top: var(--s-space-xs); left: var(--s-space-s);
    font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body);
    letter-spacing: var(--s-track-label); color: var(--s-muted); font-variant-numeric: tabular-nums;
}
.qh-bust { height: var(--s-bust-h); width: auto; margin-inline: auto; }
.qh-bust__line { fill: none; stroke: var(--s-ink); stroke-width: var(--s-stroke-bust); stroke-linecap: round; stroke-linejoin: round; }
.qh-bust__object { fill: none; stroke: var(--s-muted); stroke-width: var(--s-stroke-object); stroke-linecap: round; stroke-linejoin: round; }
.qh-contact__frame figcaption {
    display: grid; gap: var(--s-space-3xs);
    margin-top: var(--s-space-s); padding-top: var(--s-space-xs);
    border-top: var(--s-rule-w) solid var(--s-rule);
}
.qh-contact__name { font: var(--s-weight-display) var(--s-size-h3)/var(--s-leading-snug) var(--s-font-display); letter-spacing: var(--s-track-h2); }
.qh-contact__role { font-size: var(--s-size-small); color: var(--s-muted); }
/* The margin note: written beside the frame, slightly off the square. */
.qh-margin {
    display: flex; align-items: flex-start; gap: var(--s-space-2xs);
    max-width: var(--s-measure-narrow);
    font: italic var(--s-weight-body) var(--s-size-margin)/var(--s-leading-snug) var(--s-font-body);
    color: var(--s-ink);
    rotate: var(--s-tilt-note); transform-origin: left top;
}
.qh-contact__frame:nth-child(even) .qh-margin { rotate: var(--s-tilt-note-alt); }
.qh-margin__lead {
    flex: none; width: var(--s-space-xl); height: auto;
    fill: none; stroke: var(--s-marker); stroke-width: var(--s-stroke-icon); stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1 1; stroke-dashoffset: 0;
}
.qh-js .qh-contact__frame[data-qh-reveal] .qh-margin__lead path { stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset var(--s-dur-mark) var(--s-ease-pen) var(--s-dur-base); }
.qh-js .qh-contact__frame.is-in .qh-margin__lead path { stroke-dashoffset: 0; }
.qh-people__note { margin-top: var(--s-space-xl); font-size: var(--s-size-small); color: var(--s-muted); font-style: italic; }

/* ── from first visit to full grip: the ink band, pinned for one screen ───────────────── */
.qh-journey {
    position: relative;
    background: var(--s-ink); color: var(--s-on-ink);
}
.qh-js .qh-journey { height: var(--s-journey-run); }
.qh-journey__pin {
    position: sticky; top: var(--s-nav-h);
    min-height: var(--s-stage-h);
    max-width: var(--s-max); margin-inline: auto;
    padding: var(--s-space-2xl) var(--s-gutter) var(--s-space-xl);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "head dial" "track track";
    gap: var(--s-space-xl) var(--s-space-2xl);
    align-content: center;
}
.qh-journey__head { grid-area: head; align-self: center; }
.qh-journey__head .qh-h2 { color: var(--s-on-ink); }
.qh-journey__lede { margin-top: var(--s-space-s); color: var(--s-on-ink-muted); max-width: var(--s-measure); }

.qh-dial { grid-area: dial; display: grid; grid-template-columns: var(--s-dial) auto; align-items: center; gap: var(--s-space-l); }
.qh-dial__face { width: var(--s-dial); height: var(--s-dial); overflow: visible; }
.qh-dial__rim { fill: var(--s-ink-soft); stroke: var(--s-on-ink-rule); stroke-width: var(--s-stroke-object); }
.qh-dial__tick { stroke: var(--s-on-ink-muted); stroke-width: var(--s-stroke-bone); stroke-linecap: round; }
.qh-dial__tick--major { stroke: var(--s-on-ink); stroke-width: var(--s-stroke-object); }
.qh-dial__num { fill: var(--s-on-ink-muted); font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body); text-anchor: middle; dominant-baseline: middle; }
.qh-dial__needle {
    stroke: var(--s-marker-on-ink); stroke-width: var(--s-stroke-icon); stroke-linecap: round;
    transform-box: view-box; transform-origin: var(--qh-cx) var(--qh-cy);
    transform: rotate(calc(var(--qh-angle) * 1deg));
    transition: transform var(--s-dur-needle) var(--s-ease-needle);
}
.qh-dial__hub { fill: var(--s-on-ink); }
.qh-dial__read { display: grid; gap: var(--s-space-2xs); max-width: var(--s-measure-narrow); }
.qh-dial__label { font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-on-ink-muted); }
.qh-dial__value { font: var(--s-weight-display) var(--s-size-dial)/var(--s-leading-display) var(--s-font-display); letter-spacing: var(--s-track-h2); font-variant-numeric: tabular-nums; }
.qh-dial__unit { font: var(--s-weight-semi) var(--s-size-h3)/var(--s-leading-snug) var(--s-font-display); color: var(--s-on-ink-muted); }
.qh-dial__caption { font-size: var(--s-size-micro); color: var(--s-on-ink-muted); font-style: italic; }

.qh-track { grid-area: track; position: relative; --qh-progress: 1; }
.qh-track__rail {
    position: absolute; left: 0; right: 0; top: calc(var(--s-glyph) / 2);
    height: var(--s-mark-w); background: var(--s-on-ink-rule);
}
.qh-track__fill {
    position: absolute; inset: 0; background: var(--s-marker-on-ink);
    transform-origin: left center; transform: scaleX(var(--qh-progress));
    transition: transform var(--s-dur-needle) var(--s-ease-out);
}
.qh-track__stages { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-space-m); }
.qh-stage { display: grid; gap: var(--s-space-2xs); align-content: start; opacity: var(--s-stage-dim); transition: opacity var(--s-dur-base) var(--s-ease-out); }
.qh-stage.is-on { opacity: 1; }
.qh-stage__icon {
    width: var(--s-glyph); height: var(--s-glyph); margin-bottom: var(--s-space-xs);
    padding: var(--s-space-2xs); background: var(--s-ink);
    border: var(--s-btn-border) solid var(--s-on-ink-rule); border-radius: 50%;
    fill: none; stroke: var(--s-on-ink); stroke-width: var(--s-stroke-icon); stroke-linecap: round; stroke-linejoin: round;
    transition: border-color var(--s-dur-base) var(--s-ease-out);
}
.qh-stage.is-current .qh-stage__icon { border-color: var(--s-marker-on-ink); }
.qh-stage__when { font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-marker-on-ink); }
.qh-stage__name { font: var(--s-weight-display) var(--s-size-h3)/var(--s-leading-snug) var(--s-font-display); letter-spacing: var(--s-track-h2); }
.qh-stage__text { font-size: var(--s-size-small); color: var(--s-on-ink-muted); }

/* ── what we treat: a clinical index ──────────────────────────────────────────────────── */
.qh-index {
    max-width: var(--s-max); margin-inline: auto;
    padding: var(--s-section) var(--s-gutter);
    display: grid; grid-template-columns: var(--s-index-col) 1fr; gap: var(--s-space-2xl);
    align-items: start;
}
.qh-index__head { position: sticky; top: calc(var(--s-nav-h) + var(--s-space-xl)); display: grid; gap: var(--s-space-s); justify-items: start; }
.qh-index__head .qh-kicker { margin-bottom: 0; }
.qh-index__title {
    font: var(--s-weight-display) var(--s-size-h1)/var(--s-leading-display) var(--s-font-display);
    letter-spacing: var(--s-track-display);
}
.qh-index__lede { color: var(--s-muted); }
.qh-index__body {
    columns: 2; column-gap: var(--s-space-2xl); column-rule: var(--s-rule-w) solid var(--s-rule);
    border-top: var(--s-btn-border) solid var(--s-ink);
    padding-top: var(--s-space-s);
}
.qh-index__group {
    break-inside: avoid;
    display: grid; grid-template-columns: var(--s-space-2xl) 1fr;
    padding-bottom: var(--s-space-m);
}
.qh-index__letter {
    font: var(--s-weight-display) var(--s-size-index-letter)/var(--s-leading-display) var(--s-font-display);
    color: var(--s-rule-strong); letter-spacing: var(--s-track-h2);
}
.qh-entry {
    display: flex; gap: var(--s-space-s); align-items: flex-start;
    padding: var(--s-space-xs) 0;
    border-bottom: var(--s-rule-w) solid var(--s-rule);
}
.qh-entry__text { display: grid; gap: var(--s-space-3xs); }
.qh-entry__name {
    display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-space-2xs);
    font: var(--s-weight-display) var(--s-size-body)/var(--s-leading-snug) var(--s-font-display);
    text-decoration: none;
}
a.qh-entry__name { min-height: var(--s-hit); align-items: center; }
a.qh-entry__name:hover { text-decoration: underline; text-decoration-color: var(--s-marker); text-decoration-thickness: var(--s-mark-w); }
.qh-entry__read {
    font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body);
    letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-marker-deep);
}
.qh-entry__line { font-size: var(--s-size-small); color: var(--s-muted); line-height: var(--s-leading-snug); }

/* ── for GPs: a referral letter header ───────────────────────────────────────────────── */
.qh-gp {
    max-width: var(--s-max); margin-inline: auto;
    padding: var(--s-section) var(--s-gutter);
    display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-space-2xl); align-items: center;
    border-top: var(--s-rule-w) solid var(--s-rule);
}
.qh-gp__intro { display: grid; gap: var(--s-space-m); justify-items: start; }
.qh-gp__intro p:not(.qh-kicker) { color: var(--s-muted); max-width: var(--s-measure); }
.qh-gp__intro .qh-kicker { margin-bottom: 0; }

/* ── finding us: the practical close ─────────────────────────────────────────────────── */
.qh-find {
    max-width: var(--s-max); margin-inline: auto;
    padding: var(--s-section) var(--s-gutter);
    display: grid;
    grid-template-columns: 7fr 5fr;
    grid-template-areas: "head head" "week map" "notes act";
    gap: var(--s-space-xl) var(--s-space-2xl);
    border-top: var(--s-rule-w) solid var(--s-rule);
}
.qh-find__head { grid-area: head; }
.qh-find__head .qh-h2 { max-width: 22ch; }
.qh-week { grid-area: week; overflow-x: auto; }
.qh-week__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.qh-week__cap {
    text-align: left; caption-side: top; padding-bottom: var(--s-space-xs);
    font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body);
    letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-muted);
}
.qh-week__table th, .qh-week__table td {
    padding: var(--s-space-s) var(--s-space-2xs);
    border-bottom: var(--s-rule-w) solid var(--s-rule);
    text-align: left; vertical-align: top; font-size: var(--s-size-small);
}
.qh-week__table thead th {
    font: var(--s-weight-display) var(--s-size-body)/var(--s-leading-snug) var(--s-font-display);
    border-bottom: var(--s-btn-border) solid var(--s-ink);
}
.qh-week__table tbody th { font-weight: var(--s-weight-strong); white-space: nowrap; padding-right: var(--s-space-m); }
.qh-week__table .is-today { background: var(--s-wash); }
.qh-week__table thead .is-today { box-shadow: inset 0 calc(var(--s-mark-w) * -1) 0 var(--s-marker); }
.qh-week__table--days { display: none; }
/* The times are set in the display face: Atkinson's slashed zero, small, makes 8:00 read struck through. */
.qh-week__table td { font-family: var(--s-font-figures); font-weight: var(--s-weight-semi); font-feature-settings: var(--s-figures-features); }
.qh-week__table--days tbody th { font: var(--s-weight-display) var(--s-size-body)/var(--s-leading-snug) var(--s-font-display); }
.qh-week__table--days tbody tr.is-today th, .qh-week__table--days tbody tr.is-today td { background: var(--s-wash); }
.qh-week__table--days tbody tr.is-today th { box-shadow: inset var(--s-mark-w) 0 0 var(--s-marker); }
.qh-week__today {
    display: block;
    font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body);
    letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-marker-deep);
}
.qh-map { grid-area: map; display: grid; gap: var(--s-space-xs); max-width: var(--s-map-max); }
.qh-map__art { width: 100%; height: auto; background: var(--s-paper); border: var(--s-rule-w) solid var(--s-rule); }
.qh-map__casing { fill: none; stroke: var(--s-rule-strong); stroke-width: calc(var(--qh-road) + var(--s-stroke-map-road) * 2); stroke-linecap: round; stroke-linejoin: round; }
.qh-map__road { fill: none; stroke: var(--s-paper); stroke-width: var(--qh-road); stroke-linecap: round; stroke-linejoin: round; }
.qh-map__rail { fill: none; stroke: var(--s-ink); stroke-width: var(--s-stroke-map-road); }
.qh-map__rail--ties { stroke-width: var(--s-space-2xs); stroke-dasharray: var(--s-rule-w) var(--s-space-2xs); }
.qh-map__bldg { fill: var(--s-bone-deep); stroke: var(--s-rule-strong); stroke-width: var(--s-rule-w); }
.qh-map__bldg--park { fill: none; stroke-dasharray: var(--s-dash-leader); }
.qh-map__bldg--clinic { fill: var(--s-wash); stroke: var(--s-ink); stroke-width: var(--s-stroke-object); }
.qh-map__route { fill: none; stroke: var(--s-ink); stroke-width: var(--s-stroke-object); stroke-dasharray: var(--s-dash-leader); stroke-linecap: round; }
.qh-map__mark {
    fill: none; stroke: var(--s-marker); stroke-width: var(--s-stroke-mark); stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1 1; stroke-dashoffset: 0;
}
.qh-js .qh-map:not(.is-in) .qh-map__mark { stroke-dashoffset: 1; }
.qh-js .qh-map .qh-map__mark { transition: stroke-dashoffset var(--s-dur-mark) var(--s-ease-pen) var(--s-dur-base); }
.qh-map__stop { fill: var(--s-ink); }
.qh-map__label { fill: var(--s-ink); font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body); }
.qh-map__label--clinic { font: var(--s-weight-display) var(--s-size-body)/var(--s-leading-snug) var(--s-font-display); text-anchor: middle; }
.qh-map__street { fill: var(--s-muted); font: italic var(--s-weight-body) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body); }
.qh-map__route-note { display: flex; align-items: center; gap: var(--s-space-xs); font-size: var(--s-size-small); color: var(--s-muted); }
.qh-map__key { width: var(--s-space-l); height: 0; border-top: var(--s-btn-border) dashed var(--s-ink); }
.qh-find__notes { grid-area: notes; }
.qh-find__small {
    margin-bottom: var(--s-space-xs);
    font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body);
    letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-muted);
}
.qh-find__notes dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-space-l); }
.qh-find__notes dl div { padding-top: var(--s-space-s); border-top: var(--s-btn-border) solid var(--s-ink); }
.qh-find__notes dt { font: var(--s-weight-display) var(--s-size-body)/var(--s-leading-snug) var(--s-font-display); margin-bottom: var(--s-space-2xs); }
.qh-find__notes dd { font-size: var(--s-size-small); color: var(--s-muted); }
.qh-find__act {
    grid-area: act; display: grid; gap: var(--s-space-xs); align-content: start;
    padding: var(--s-space-l); background: var(--s-bone-deep);
}
.qh-find__address { display: grid; font-style: normal; margin-bottom: var(--s-space-xs); }
.qh-find__address span:first-child { font-weight: var(--s-weight-strong); }

/* ── tablet ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
    .qh-track__stages { gap: var(--s-space-s); }
    .qh-dial { grid-template-columns: var(--s-dial); }
    .qh-find__notes dl { grid-template-columns: 1fr; gap: var(--s-space-s); }
}

/* ── phones and small tablets: a composition of its own ──────────────────────────────── */
@media (max-width: 1023px) {
    .qh-chart { display: flex; flex-direction: column; padding-inline: var(--s-gutter); }

    /* The cropped hand comes first: fingers and palm at 70vw, the pulse on the thumb base. */
    .qh-crop {
        display: flex; justify-content: flex-end;
        margin: var(--s-space-s) calc(var(--s-gutter) * -1) 0 0;
        border-bottom: var(--s-rule-w) solid var(--s-ink);
    }
    .qh-crop { position: relative; }
    .qh-crop__label {
        position: absolute; left: var(--s-gutter); bottom: var(--s-space-s);
        display: grid; gap: var(--s-space-3xs); max-width: calc(100% - var(--s-hand-crop) - var(--s-space-s));
    }
    .qh-crop__label > * { grid-column: auto; grid-row: auto; }
    .qh-crop__label .qh-plate__num { font-size: var(--s-size-micro); color: var(--s-muted); }
    .qh-crop__label .qh-plate__name { font-size: var(--s-size-small); line-height: var(--s-leading-snug); }
    .qh-crop__art { width: var(--s-hand-crop); max-height: var(--s-hand-crop-h); height: auto; overflow: hidden; }
    .qh-hero { min-height: 0; padding-block: var(--s-space-s) var(--s-space-xl); gap: var(--s-space-xs); }
    .qh-hero__b::after { display: none; }
    .qh-hero__cta { flex-direction: column; align-items: stretch; gap: var(--s-space-xs); }
    .qh-hero__cta .qh-btn { width: calc(100% - var(--s-btn-offset)); }
    .qh-hero__cta .qh-link-btn { justify-content: center; border-bottom-width: var(--s-rule-w); }
    .qh-facts { margin-top: var(--s-space-xs); }

    .qh-tap { min-height: 0; padding-block: var(--s-space-xl) var(--s-space-m); }
    .qh-tap__hint { display: none; }
    /* The plate rides above the veil, so a mark is seen being drawn while the sheet is up and the
       other places stay tappable. */
    .qh-plate {
        position: relative; top: auto; z-index: calc(var(--s-z-sheet) - 1); align-self: stretch; height: auto; padding-bottom: var(--s-space-xl);
    }
    .qh-plate__sheet { height: auto; width: 100%; }
    .qh-plate__title { grid-template-columns: auto 1fr; }
    .qh-plate__scale { grid-column: 2; grid-row: 3; justify-self: start; }

    /* The note becomes a bottom sheet over a veil; the empty page is never shown here. */
    .qh-note {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--s-z-sheet);
        max-width: none; max-height: var(--s-sheet-h); margin: 0; overflow-y: auto; overscroll-behavior: contain;
        box-shadow: var(--s-sheet-shadow);
        transform: translateY(100%);
        transition: transform var(--s-dur-note) var(--s-ease-out);
    }
    .qh-note.is-open { transform: none; }
    .qh-note__page { padding-bottom: calc(var(--s-space-xl) + env(safe-area-inset-bottom)); transform: none; }
    .qh-note__page--empty { display: none; }
    .qh-note__body { grid-template-columns: 1fr; gap: var(--s-space-3xs); }
    .qh-note__body dd { margin-bottom: var(--s-space-2xs); }
    .qh-note__links { flex-direction: column; align-items: stretch; }
    .qh-note__links .qh-btn { width: calc(100% - var(--s-btn-offset)); }
    .qh-tap::after {
        content: ""; position: fixed; inset: 0; z-index: calc(var(--s-z-sheet) - 2);
        background: var(--s-veil); opacity: 0; pointer-events: none;
        transition: opacity var(--s-dur-note) var(--s-ease-out);
    }
    html.qh-note-open .qh-tap::after { opacity: 1; pointer-events: auto; }
    html.qh-note-open .qh-plate { background: var(--s-bone); }

    .qh-people__head { grid-template-columns: 1fr; margin-bottom: var(--s-space-xl); }
    .qh-contact { grid-template-columns: repeat(2, 1fr); gap: var(--s-space-l) var(--s-space-s); }
    .qh-contact__frame:nth-child(3n + 2) { translate: none; }
    .qh-contact__frame:nth-child(even) { translate: 0 var(--s-stagger-y); }
    .qh-contact__frame figure { padding: var(--s-space-l) var(--s-space-xs) var(--s-space-xs); }
    .qh-margin { font-size: var(--s-size-small); }
    .qh-margin__lead { width: var(--s-space-l); }

    .qh-js .qh-journey { height: auto; }
    .qh-journey__pin {
        position: static; min-height: 0;
        grid-template-columns: 1fr; grid-template-areas: "head" "dial" "track";
        padding-block: var(--s-section);
    }
    .qh-dial { grid-template-columns: var(--s-dial-sm) 1fr; gap: var(--s-space-m); }
    .qh-dial__face { width: var(--s-dial-sm); height: var(--s-dial-sm); }
    .qh-track__rail { left: calc(var(--s-glyph) / 2 - var(--s-rule-w)); right: auto; top: 0; bottom: 0; width: var(--s-mark-w); height: auto; }
    .qh-track__fill { transform-origin: center top; transform: scaleY(var(--qh-progress)); }
    .qh-track__stages { grid-template-columns: 1fr; gap: var(--s-space-l); }
    .qh-stage { grid-template-columns: var(--s-glyph) 1fr; column-gap: var(--s-space-s); }
    .qh-stage__icon { grid-row: span 3; margin-bottom: 0; }

    .qh-index { grid-template-columns: 1fr; gap: var(--s-space-l); }
    .qh-index__head { position: static; }
    .qh-index__body { columns: 1; }

    .qh-gp { grid-template-columns: 1fr; }

    .qh-find { grid-template-columns: 1fr; grid-template-areas: "head" "act" "week" "map" "notes"; }
    .qh-week__table--grid { display: none; }
    .qh-week__table--days { display: table; }
}
@media (max-width: 479px) {
    .qh-contact { grid-template-columns: 1fr 1fr; }
    .qh-letter__head { grid-template-columns: auto 1fr; }
    .qh-letter__ref { grid-column: 1 / -1; text-align: left; }
    .qh-week__table th, .qh-week__table td { padding-inline: var(--s-space-3xs); }
}

/* ── reduced motion: the finished drawing, a still dot, a still needle ───────────────── */
@media (prefers-reduced-motion: reduce) {
    .qh-pulse__ring { display: none; }
    .qh-js .qh-plate[data-state="invite"] .qh-spot { opacity: 1; transform: translate(-50%, -50%); }
    .qh-js .qh-contact__frame[data-qh-reveal] .qh-margin__lead path,
    .qh-js .qh-map:not(.is-in) .qh-map__mark { stroke-dashoffset: 0; }
    .qh-js .qh-journey { height: auto; }
    .qh-journey__pin { position: static; }
}