/* Hallmark · shape: Report of findings · genre: editorial · theme: custom · job: book · idea: "MŪV promises Boulder's most detailed exam, so the page is the report a new patient takes home: history, examination, findings, plan, notes, next appointment" · vibe: "precise, premium, warm, two doctors, Boulder movement"
 * paper: oklch(99% 0.003 250) · accent: oklch(72% 0.07 88), the gold of their logo's macron · display: Michroma (their own wide brand face) · body: Manrope · hero: their exam-room photograph with the first-visit report ticking itself off beside the headline · nav: logo, five chapters, one action · footer: charcoal, white logo, three menus, legal line · imagery: photographs, all their own · signature: the first-visit report checking itself off
 * axes: light/wide-grotesk/chromatic-yellow · posture: composed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: E, the two doctors' portraits on the live site are not captioned, so the team photo carries the history */
/* Hallmark · waive 38iii · each section head opens with one gold report field name before the colon · the report-of-findings idea needs History, Examination, Findings, Plan, Notes and Next read as fields of one MŪV document */
/* Hallmark · dismissed 23 · the gold 700+ sits on charcoal at over 7:1 · it is MŪV's own headline proof, the single display use of the gold */
/* Hallmark · dismissed 41 · accent-ink is never set on the accent anywhere on the MŪV page; the gold carries ink only in the proof band */
/* Hallmark · answered F4 · the .menu-btn spans are the two hamburger bars, not a second filled button */
/* Hallmark · dismissed 58 · 85 words where the three exam chapters begin, one screen only on the MŪV report */
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 88px; --text-hero: clamp(2.25rem, 2.6vw + 1rem, 3.5rem); }
.skip { position: absolute; left: var(--space-md); top: -80px; z-index: var(--z-toast); padding: var(--space-sm) var(--space-lg); background: var(--color-ink); color: var(--color-on-dark); font-weight: 600; }
.skip:focus { top: var(--space-md); }
.h2 { font-size: var(--text-section); font-weight: 400; line-height: 1.15; letter-spacing: var(--tracking-display); }
.field { color: var(--color-accent-ink); }
.exam .field, .proof .field { color: var(--color-accent); }
.num { font-variant-numeric: tabular-nums; }

/* buttons + links: one primary style */
.btn { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 48px; padding: var(--space-sm) var(--space-lg); border: 0; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-on-dark); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.btn svg { width: 20px; height: 20px; color: var(--color-accent); transition: transform var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--lg { min-height: 52px; padding: var(--space-sm) var(--space-xl); font-size: var(--text-lg); }
.link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--color-accent); transition: color var(--dur-short); }
.link:hover { color: var(--color-accent-ink); }

/* header */
.hdr { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); transition: box-shadow var(--dur-short); }
.hdr.is-scrolled { box-shadow: 0 1px 0 var(--color-rule); }
.hdr__in { display: flex; align-items: center; gap: var(--space-xl); height: var(--nav-h); }
.hdr__logo img { width: 120px; }
.hdr nav { margin-left: auto; }
.hdr nav ul { display: flex; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.hdr nav a { font-weight: 600; text-decoration: none; color: var(--color-ink-2); transition: color var(--dur-short); }
.hdr nav a:hover { color: var(--color-accent-ink); }
.hdr__act { display: flex; align-items: center; gap: var(--space-lg); }
.hdr__tel { font-weight: 600; text-decoration: none; }
.menu-btn { display: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--color-paper-2); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-xs); }
.menu-btn span { width: 20px; height: 2px; background: var(--color-ink); transition: transform var(--dur-short) var(--ease-out); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-5px) rotate(-45deg); }
.menu { display: none; }

/* hero: the report beside the headline */
.hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; }
.h1 { font-size: var(--text-hero); font-weight: 400; line-height: 1.12; letter-spacing: var(--tracking-display); }
.hero__lede { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-muted); max-width: 30ch; }
.hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
.hero__media { position: relative; }
.hero__photo { margin: 0; border-radius: var(--radius-photo); overflow: hidden; }
.hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 50%; }
.report { position: relative; z-index: var(--z-raised); margin-top: var(--space-xl); margin-right: calc(var(--space-2xl) * -1.5); width: min(380px, 100%); padding: var(--space-lg); border: 1px solid var(--color-rule); border-top: 3px solid var(--color-accent); border-radius: 0; background: var(--color-paper); }
.report__title { font-size: var(--text-md); font-weight: 400; letter-spacing: 0; padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.report__who { display: block; margin-top: var(--space-2xs); font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); }
.report__list { margin: var(--space-md) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.report__list li { display: flex; align-items: center; gap: var(--space-sm); padding-block: var(--space-2xs); border-bottom: 1px solid var(--color-rule); font-weight: 600; }
.report__list svg { flex: none; width: 20px; height: 20px; color: var(--color-accent-ink); }

/* proof */
.proof { background: var(--color-paper-3); color: var(--color-on-dark); }
.proof__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2xl); align-items: center; padding-block: var(--space-2xl); }
.proof__big { font-family: var(--font-display); font-size: clamp(4rem, 8vw, 8rem); line-height: 1; color: var(--color-accent); }
.proof__text { font-size: var(--text-xl); max-width: 28ch; color: var(--color-on-dark-2); }
.proof__awards { display: flex; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.proof__awards img { width: 224px; border-radius: 4px; }

/* history */
.history { padding-block: var(--section-gap); }
.history__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.history__copy p { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-muted); }
.years { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.years li { padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.years li:last-child { border-top-color: var(--color-accent); }
.years__y { display: block; font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; }
.years__y--now { color: var(--color-accent-ink); }
.years p { margin-top: var(--space-md); color: var(--color-muted); }
.history__photo { margin-top: var(--space-3xl); }
.history__photo img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; object-position: 50% 45%; border-radius: var(--radius-photo); }

/* exam: a pinned stage with chapters scrolling past */
.exam { background: var(--color-paper-3); color: var(--color-on-dark); padding-block: var(--section-gap); }
.exam__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }
.exam__stage { position: sticky; top: calc(var(--nav-h) + var(--space-xl)); aspect-ratio: 4 / 3; border-radius: var(--radius-photo); overflow: hidden; background: var(--color-ink-2); }
.exam__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.exam__img.is-on { opacity: 1; }
.exam__head { margin-bottom: var(--space-2xl); }
.chapter { min-height: 36vh; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-dark); }
.chapter h3 { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-title); font-weight: 400; color: var(--color-accent); }
.chapter__tick { flex: none; width: 24px; height: 24px; color: var(--color-accent); opacity: .25; transition: opacity var(--dur-long) var(--ease-out); }
.chapter.is-done .chapter__tick { opacity: 1; }
.chapter__img { display: none; }
.chapter p { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-on-dark-2); max-width: 36ch; }

/* findings: the conditions set as type */
.findings { padding-block: var(--section-gap); }
.findings__head { margin-bottom: var(--space-2xl); }
.clusters { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .8fr); gap: var(--space-2xl) var(--gap-columns); }
.clusters h3 { font-family: var(--font-body); font-size: var(--text-md); font-weight: 700; color: var(--color-accent-ink); padding-bottom: var(--space-sm); margin-bottom: var(--space-md); border-bottom: 2px solid var(--color-ink); }
.cloud { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.cloud li { font-family: var(--font-display); font-size: clamp(1rem, .6vw + .8rem, 1.375rem); line-height: 1.35; color: var(--color-ink-2); }

/* plan */
.plan { padding-block: var(--section-gap); background: var(--color-paper-2); }
.plan__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.plan__photo { margin: 0; border-radius: var(--radius-photo); overflow: hidden; }
.plan__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.plan__lede { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-muted); }
.plan__list { margin: var(--space-xl) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg) var(--gap-columns); }
.plan__list li { display: flex; flex-direction: column; gap: var(--space-2xs); }
.plan__list b { font-size: var(--text-lg); }
.plan__list span { color: var(--color-muted); }

/* notes */
.notes { padding-block: var(--section-gap); }
.notes__head { margin-bottom: var(--space-2xl); }
.notes__list { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.note { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-photo); background: var(--color-paper-2); }
.note--lead { grid-row: span 2; justify-content: flex-start; padding: var(--space-xl) 0 0; border-top: 3px solid var(--color-accent); border-radius: 0; background: transparent; }
.note blockquote { margin: 0; }
.note blockquote p { font-size: var(--text-lg); line-height: 1.5; }
.note--lead blockquote p { font-size: var(--text-3xl); font-weight: 600; line-height: 1.3; }
.note__src { font-weight: 600; color: var(--color-muted); }
.note--lead .note__src { color: var(--color-accent-ink); }

/* visit */
.visit { padding-block: var(--section-gap); border-top: 1px solid var(--color-rule); }
.visit__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: stretch; }
.addr { margin-top: var(--space-xl); font-size: var(--text-xl); font-weight: 600; line-height: 1.35; }
.hours { margin-top: var(--space-xl); width: 100%; max-width: 440px; border-collapse: collapse; }
.hours th, .hours td { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); text-align: left; font-weight: 400; }
.hours td { text-align: right; color: var(--color-muted); }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 700; color: var(--color-ink); }
.visit__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
.visit__map { border-radius: var(--radius-photo); overflow: hidden; min-height: 460px; background: var(--color-paper-2); }
.visit__map iframe { width: 100%; height: 100%; min-height: 460px; border: 0; }
.visit__map iframe:focus, .visit__map iframe:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -4px; }
.visit__map:focus-within { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* footer */
.ftr { background: var(--color-paper-3); color: var(--color-on-dark-2); padding-block: var(--space-3xl) var(--space-xl); }
.ftr__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-2xl); }
.ftr__logo { width: 150px; }
.ftr__menus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.ftr h3 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; color: var(--color-accent); margin-bottom: var(--space-md); }
.ftr ul { margin: 0; padding: 0; list-style: none; }
.ftr li { margin-bottom: var(--space-sm); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ftr a { text-decoration: none; transition: color var(--dur-short); }
.ftr a:hover { color: var(--color-on-dark); }
.ftr__legal { grid-column: 1 / -1; padding-top: var(--space-xl); border-top: 1px solid var(--color-rule-dark); font-size: var(--text-sm); }

/* responsive */
@media (max-width: 68rem) {
  .hdr nav, .hdr__tel { display: none; }
  .hdr__act { margin-left: auto; }
  .menu-btn { display: flex; }
  .menu { position: fixed; inset: var(--nav-h) 0 0; z-index: var(--z-modal); background: var(--color-paper); padding: var(--space-xl) var(--gutter); flex-direction: column; gap: var(--space-xl); }
  .menu.is-open { display: flex; }
  .menu ul { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
  .menu a:not(.btn) { display: block; padding: var(--space-sm) 0; font-family: var(--font-display); font-size: var(--text-xl); text-decoration: none; }
  .hero__grid, .history__grid, .exam__grid, .plan__grid, .visit__grid, .ftr__in { grid-template-columns: minmax(0, 1fr); }
  .hero__grid { min-height: 0; }
  .report { margin-right: 0; }
  .proof__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .exam__stage { display: none; }
  .chapter__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-photo); margin-bottom: var(--space-md); }
  .chapter { min-height: 0; padding-block: var(--space-lg); }
  .notes__list { grid-template-columns: minmax(0, 1fr); }
  .clusters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .note--lead { grid-row: auto; }
}
@media (max-width: 40rem) {
  :root { --nav-h: 72px; }
  .hdr__logo img { width: 96px; }
  .hdr__act .btn { display: none; }
  .hero { padding-top: var(--space-lg); }
  .report { width: 100%; }
  .years, .plan__list, .ftr__menus, .clusters { grid-template-columns: minmax(0, 1fr); }
  .history__photo img { aspect-ratio: 4 / 3; }
  .note { padding: var(--space-lg); }
  .note--lead blockquote p { font-size: var(--text-xl); }
  .visit__map, .visit__map iframe { min-height: 320px; }
}

/* dark bands draw the focus ring in the light gold so it clears 3:1 on charcoal */
.proof, .exam, .ftr { --color-focus: var(--color-accent); }