@charset "utf-8";
/* =============================================================================
hv- design system
A one-off application microsite, drawn in the visual language of harvey.ai.
Independent work. Not affiliated with, endorsed by, or produced for Harvey.
No Harvey logo, wordmark, imagery or proprietary typeface is used here.
Tokens below were read out of Harvey's production CSS bundles
(/_next/static/chunks/*.css, fetched 2026-08-13) and re-expressed under the
hv- prefix. Sources and deviations are documented in COMPONENTS.md.
Font loading (one link, in , before this file):
Contents
01 Fallback metrics
02 Tokens (:root)
03 Section themes
04 Reset + base
05 Layout: shell, container, section, rule
06 Notice bar
07 Header + no-JS mobile nav
08 Typography
09 Links, arrow link
10 Buttons
11 Verdict chips
12 Requirement-to-evidence ledger
13 Tooling proficiency
14 Case-study card
15 Feature row
16 Process / timeline
17 Pull quote
18 Footnotes
19 CTA band
20 Footer
21 Utilities
22 Reduced motion
23 Print
========================================================================== */
/* -----------------------------------------------------------------------------
01 Fallback metrics
Harvey ships metric-matched local(Arial) fallbacks so the swap does not
reflow. Same technique, recomputed for our substitute faces.
-------------------------------------------------------------------------- */
@font-face {
font-family: "Inter Tight Fallback";
src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
size-adjust: 105.27%;
ascent-override: 92.02%;
descent-override: 22.91%;
line-gap-override: 0%;
}
@font-face {
font-family: "Source Serif Fallback";
src: local("Georgia"), local("Times New Roman"), local("Liberation Serif");
size-adjust: 98.66%;
ascent-override: 105.01%;
descent-override: 33.95%;
line-gap-override: 0%;
}
/* -----------------------------------------------------------------------------
02 Tokens
-------------------------------------------------------------------------- */
:root {
color-scheme: light;
/* --- Raw palette. Harvey's warm neutral ramp, verbatim hex. ------------- */
--hv-ink: #0f0e0d; /* gray-950-ink */
--hv-graphite: #1f1d1a; /* gray-900 */
--hv-slate: #33312c; /* gray-800 */
--hv-stone: #524f49; /* gray-700 */
--hv-clay: #706d66; /* gray-600 */
--hv-ash: #8f8b85; /* gray-500 */
--hv-silver: #adaba5; /* gray-400 */
--hv-mist: #cccac6; /* gray-300 */
--hv-fog: #e5e5e3; /* gray-200 */
--hv-paper: #f2f1f0; /* gray-100 */
--hv-ivory: #fafaf9; /* gray-50-ivory */
--hv-white: #ffffff;
/* Harvey's four muted brand accents. Used sparingly, never as fills. */
--hv-casal: #333f40;
--hv-velvet: #373340;
--hv-bronze: #593d3a;
--hv-blush: #d9cdcc;
/* --- Type families ------------------------------------------------------ */
--hv-font-sans: "Inter Tight", "Inter Tight Fallback", "Inter",
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--hv-font-serif: "Source Serif 4", "Source Serif Fallback", "Source Serif Pro",
"Iowan Old Style", Georgia, "Times New Roman", serif;
--hv-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
"Liberation Mono", "Courier New", monospace;
/* --- Type scale. Harvey's --text-* ramp, verbatim. ---------------------- */
--hv-text-xs: 0.75rem;
--hv-text-sm: 0.875rem;
--hv-text-base: 1rem;
--hv-text-md: 1.25rem;
--hv-text-lg: 1.5rem;
--hv-text-xl: 1.75rem;
--hv-text-2xl: 2rem;
--hv-text-3xl: 2.25rem;
--hv-text-4xl: 2.5rem;
--hv-text-5xl: 3rem;
--hv-text-6xl: 3.5rem;
--hv-text-7xl: 4rem;
/* Role sizes. Fluid between Harvey's mobile and desktop anchors. */
--hv-size-display: clamp(2.75rem, 2rem + 3.1vw, 4.5rem); /* 44 -> 72 */
--hv-size-h2: clamp(2rem, 1.5625rem + 1.8vw, 3rem); /* 32 -> 48 */
--hv-size-h3: clamp(1.375rem, 1.21rem + 0.68vw, 1.75rem);
--hv-size-h4: clamp(1.0625rem, 1.02rem + 0.19vw, 1.25rem);
--hv-size-lead: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
--hv-size-body: 1rem;
--hv-size-small: 0.875rem;
--hv-size-fine: 0.8125rem;
--hv-size-micro: 0.75rem;
/* Line heights. Harvey heads run 1.05; their body runs 1.3, which we
loosen for long-form reading (see COMPONENTS.md, "Deviations"). */
--hv-lh-display: 1.05;
--hv-lh-head: 1.1;
--hv-lh-lead: 1.4;
--hv-lh-body: 1.6;
--hv-lh-compact: 1.45;
--hv-lh-flat: 1.3;
/* Tracking. Harvey: -.0125em on h1, -.01em on h2/h3/h4. */
--hv-ls-display: -0.0125em;
--hv-ls-head: -0.01em;
--hv-ls-body: -0.003em;
--hv-ls-label: 0.02em;
--hv-weight-regular: 400;
--hv-weight-medium: 500;
--hv-weight-semi: 600;
/* --- Spacing. Harvey's semantic ramp, verbatim mobile values. ---------- */
--hv-u: 0.25rem; /* Harvey --spacing */
--hv-space-3xs: 0.25rem;
--hv-space-2xs: 0.5rem;
--hv-space-xs: 0.4375rem;
--hv-space-sm: 0.875rem;
--hv-space-md: 1.75rem;
--hv-space-lg: 3.5rem;
--hv-space-xl: 7rem;
--hv-space-2xl: 8.75rem;
/* Section rhythm: Harvey's xl step, dialled back for a document-density
page so ten ledger rows and a footnote block still read as one argument. */
--hv-section-y: clamp(3.5rem, 2.5rem + 4vw, 7rem);
--hv-gutter: clamp(1.25rem, 0.85rem + 1.7vw, 2.5rem);
/* --- Measure and containers. Harvey: post 675px, media 1092px. --------- */
--hv-measure: 42rem; /* 672px, matches their --max-width-post */
--hv-container: 68.25rem; /* 1092px, matches their --max-width-media */
--hv-container-wide: 78rem;
/* --- Radii. Harvey is near-square: 4px on buttons, cards, inputs. ------ */
--hv-radius-xs: 0.125rem; /* 2px - chips, meter caps */
--hv-radius-sm: 0.25rem; /* 4px - buttons, cards */
--hv-radius-md: 0.375rem;
--hv-radius-lg: 0.5rem;
--hv-hairline: 1px;
/* --- Motion. Harvey's easing curves, verbatim. ------------------------- */
--hv-ease-out: cubic-bezier(0, 0.7, 0.3, 1);
--hv-ease-io: cubic-bezier(0.7, 0, 0.3, 1);
--hv-ease-soft: cubic-bezier(0.3, 0.3, 0.3, 1);
--hv-dur-1: 0.15s;
--hv-dur-2: 0.2s;
--hv-dur-3: 0.3s;
/* --- Chrome ------------------------------------------------------------ */
--hv-header-h: 4.5rem; /* Harvey --base-header-height */
--hv-notice-h: 2.75rem; /* Harvey --base-header-banner-height */
--hv-nav-blur: 16px; /* Harvey --nav-blur-amount */
--hv-z-header: 100;
/* --- Focus ------------------------------------------------------------- */
--hv-focus-w: 2px;
--hv-focus-offset: 2px;
}
/* Harvey steps the spacing ramp at 1025 / 1445 / 1730. Same breakpoints. */
@media (min-width: 1025px) {
:root {
--hv-space-xs: 0.5rem; --hv-space-sm: 1rem; --hv-space-md: 2rem;
--hv-space-lg: 4rem; --hv-space-xl: 8rem; --hv-space-2xl: 10rem;
}
}
@media (min-width: 1445px) {
:root {
--hv-space-xs: 0.5625rem; --hv-space-sm: 1.125rem; --hv-space-md: 2.25rem;
--hv-space-lg: 4.5rem; --hv-space-xl: 9rem; --hv-space-2xl: 11.25rem;
}
}
@media (min-width: 1730px) {
:root {
--hv-space-xs: 0.625rem; --hv-space-sm: 1.25rem; --hv-space-md: 2.5rem;
--hv-space-lg: 5rem; --hv-space-xl: 10rem; --hv-space-2xl: 12.5rem;
}
}
/* -----------------------------------------------------------------------------
03 Section themes
Harvey does not switch on prefers-color-scheme. It authors per-section
themes (data-theme="white" | "gray" | "black"). Mirrored here as classes.
Every themed block re-declares the full set, so themes nest safely.
-------------------------------------------------------------------------- */
:root,
.hv-theme-ivory {
--hv-bg: var(--hv-ivory);
--hv-bg-2: var(--hv-paper);
--hv-bg-3: var(--hv-fog);
--hv-bg-inverse: var(--hv-ink);
--hv-text: var(--hv-ink);
--hv-text-2: var(--hv-slate);
--hv-text-muted: var(--hv-stone);
--hv-text-faint: var(--hv-clay);
--hv-text-inverse: var(--hv-ivory);
--hv-border: var(--hv-mist);
--hv-border-2: var(--hv-fog);
--hv-border-strong: var(--hv-silver);
--hv-rule: var(--hv-mist);
--hv-focus: var(--hv-ink);
--hv-tint: color-mix(in srgb, var(--hv-ink) 4%, transparent);
--hv-nav-tint: rgb(250 250 249 / 0.78);
--hv-btn-primary-bg: var(--hv-ink);
--hv-btn-primary-fg: var(--hv-ivory);
--hv-btn-primary-bg-hover: var(--hv-stone);
--hv-btn-primary-bg-active: var(--hv-slate);
--hv-btn-secondary-fg: var(--hv-ink);
--hv-btn-secondary-border: var(--hv-ink);
--hv-btn-secondary-fg-hover: var(--hv-stone);
--hv-btn-secondary-bd-hover: var(--hv-clay);
--hv-btn-secondary-bg-hover: color-mix(in srgb, var(--hv-ink) 4%, transparent);
--hv-meter-on: var(--hv-ink);
--hv-meter-off: var(--hv-mist);
--hv-chip-strong-bg: #eaf1ec;
--hv-chip-strong-bd: #c2d5c8;
--hv-chip-strong-fg: #1d4a33;
--hv-chip-strong-dot: #1f6f43;
--hv-chip-partial-bg: #f6f1e4;
--hv-chip-partial-bd: #ded0ae;
--hv-chip-partial-fg: #5a4408;
--hv-chip-partial-dot: #8a6a10;
--hv-chip-gap-bg: #f5eeed;
--hv-chip-gap-bd: #dfcbc9;
--hv-chip-gap-fg: #4d3330;
--hv-chip-gap-dot: var(--hv-bronze);
--hv-mark-bg: #efe9d9;
--hv-mark-bd: var(--hv-bronze);
}
.hv-theme-paper {
--hv-bg: var(--hv-paper);
--hv-bg-2: var(--hv-ivory);
--hv-bg-3: var(--hv-fog);
--hv-bg-inverse: var(--hv-ink);
--hv-text: var(--hv-ink);
--hv-text-2: var(--hv-slate);
--hv-text-muted: var(--hv-stone);
--hv-text-faint: var(--hv-stone);
--hv-text-inverse: var(--hv-ivory);
--hv-border: var(--hv-mist);
--hv-border-2: var(--hv-fog);
--hv-border-strong: var(--hv-silver);
--hv-rule: var(--hv-mist);
--hv-focus: var(--hv-ink);
--hv-nav-tint: rgb(242 241 240 / 0.78);
--hv-btn-primary-bg: var(--hv-ink);
--hv-btn-primary-fg: var(--hv-ivory);
--hv-btn-primary-bg-hover: var(--hv-stone);
--hv-btn-primary-bg-active: var(--hv-slate);
--hv-btn-secondary-fg: var(--hv-ink);
--hv-btn-secondary-border: var(--hv-ink);
--hv-btn-secondary-fg-hover: var(--hv-stone);
--hv-btn-secondary-bd-hover: var(--hv-clay);
--hv-btn-secondary-bg-hover: color-mix(in srgb, var(--hv-ink) 4%, transparent);
--hv-meter-on: var(--hv-ink);
--hv-meter-off: var(--hv-mist);
--hv-chip-strong-bg: #e8efe9;
--hv-chip-strong-bd: #c2d5c8;
--hv-chip-strong-fg: #1d4a33;
--hv-chip-strong-dot: #1f6f43;
--hv-chip-partial-bg: #f4efe1;
--hv-chip-partial-bd: #ded0ae;
--hv-chip-partial-fg: #5a4408;
--hv-chip-partial-dot: #8a6a10;
--hv-chip-gap-bg: #f2ebea;
--hv-chip-gap-bd: #dfcbc9;
--hv-chip-gap-fg: #4d3330;
--hv-chip-gap-dot: var(--hv-bronze);
--hv-mark-bg: #ece5d3;
--hv-mark-bd: var(--hv-bronze);
}
.hv-theme-ink {
color-scheme: dark;
--hv-bg: var(--hv-ink);
--hv-bg-2: var(--hv-graphite);
--hv-bg-3: var(--hv-slate);
--hv-bg-inverse: var(--hv-ivory);
--hv-text: var(--hv-ivory);
--hv-text-2: var(--hv-mist);
--hv-text-muted: var(--hv-silver);
--hv-text-faint: var(--hv-ash);
--hv-text-inverse: var(--hv-ink);
--hv-border: var(--hv-slate);
--hv-border-2: #262421;
--hv-border-strong: var(--hv-stone);
--hv-rule: var(--hv-slate);
--hv-focus: var(--hv-ivory);
--hv-tint: color-mix(in srgb, var(--hv-ivory) 6%, transparent);
--hv-nav-tint: rgb(15 14 13 / 0.66);
--hv-btn-primary-bg: var(--hv-ivory);
--hv-btn-primary-fg: var(--hv-ink);
--hv-btn-primary-bg-hover: var(--hv-mist);
--hv-btn-primary-bg-active: var(--hv-silver);
--hv-btn-secondary-fg: var(--hv-ivory);
--hv-btn-secondary-border: var(--hv-silver);
--hv-btn-secondary-fg-hover: var(--hv-mist);
--hv-btn-secondary-bd-hover: var(--hv-ivory);
--hv-btn-secondary-bg-hover: color-mix(in srgb, var(--hv-ivory) 7%, transparent);
--hv-meter-on: var(--hv-ivory);
--hv-meter-off: var(--hv-slate);
--hv-chip-strong-bg: #17211c;
--hv-chip-strong-bd: #354a3c;
--hv-chip-strong-fg: #cfe6d8;
--hv-chip-strong-dot: #4fae7c;
--hv-chip-partial-bg: #201d15;
--hv-chip-partial-bd: #4e442b;
--hv-chip-partial-fg: #ebdcb2;
--hv-chip-partial-dot: #d7a52a;
--hv-chip-gap-bg: #201917;
--hv-chip-gap-bd: #52403d;
--hv-chip-gap-fg: #e7cfcc;
--hv-chip-gap-dot: #c08b84;
--hv-mark-bg: #2b2317;
--hv-mark-bd: #c08b84;
}
/* A themed block paints its own background and text. */
.hv-theme-ivory,
.hv-theme-paper,
.hv-theme-ink {
background-color: var(--hv-bg);
color: var(--hv-text);
}
/* -----------------------------------------------------------------------------
04 Reset + base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
overscroll-behavior-y: none;
}
body.hv-page {
margin: 0;
/* Harvey clips the x axis at the document root; so do we. */
overflow-x: clip;
background-color: var(--hv-bg);
color: var(--hv-text);
font-family: var(--hv-font-sans);
font-size: var(--hv-size-body);
font-weight: var(--hv-weight-regular);
line-height: var(--hv-lh-body);
letter-spacing: var(--hv-ls-body);
font-variant-numeric: proportional-nums;
font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol[class], ul[class] { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:where(a) { color: inherit; }
/* One consistent focus treatment across the whole system. */
:where(a, button, summary, [tabindex], input, select, textarea):focus-visible {
outline: var(--hv-focus-w) solid var(--hv-focus);
outline-offset: var(--hv-focus-offset);
border-radius: var(--hv-radius-xs);
}
::selection { background: var(--hv-fog); color: var(--hv-ink); }
.hv-theme-ink ::selection { background: var(--hv-slate); color: var(--hv-ivory); }
/* Anything anchored must clear the sticky header. */
:where([id]) { scroll-margin-top: calc(var(--hv-header-h) + var(--hv-space-sm)); }
/* -----------------------------------------------------------------------------
05 Layout
-------------------------------------------------------------------------- */
.hv-container {
width: 100%;
max-width: var(--hv-container);
margin-inline: auto;
padding-inline: var(--hv-gutter);
}
.hv-container--measure { max-width: calc(var(--hv-measure) + 2 * var(--hv-gutter)); }
.hv-container--wide { max-width: var(--hv-container-wide); }
.hv-section { padding-block: var(--hv-section-y); }
.hv-section--tight { padding-block: calc(var(--hv-section-y) * 0.6); }
.hv-section--flush-top { padding-top: 0; }
.hv-section--flush-bottom { padding-bottom: 0; }
/* A section that sits directly on another of the same theme gets a hairline. */
.hv-section--ruled { border-top: var(--hv-hairline) solid var(--hv-rule); }
/* Vertical rhythm inside a section: children stack on a single scale. */
.hv-stack > * + * { margin-top: var(--hv-space-sm); }
.hv-stack-md > * + * { margin-top: var(--hv-space-md); }
.hv-stack-lg > * + * { margin-top: var(--hv-space-lg); }
/* Section header block: kicker, heading, lead. */
.hv-section-head { max-width: var(--hv-measure); }
.hv-section-head > * + * { margin-top: var(--hv-space-sm); }
.hv-section-head .hv-kicker + * { margin-top: calc(var(--hv-space-xs) + 2px); }
.hv-rule {
height: 0;
margin: 0;
border: 0;
border-top: var(--hv-hairline) solid var(--hv-rule);
}
.hv-rule--section { margin-block: var(--hv-space-md); }
/* -----------------------------------------------------------------------------
06 Notice bar
Thin, muted, sits above the header. Modelled on Harvey's 2.75rem banner.
-------------------------------------------------------------------------- */
.hv-notice {
background-color: var(--hv-paper);
color: var(--hv-stone);
border-bottom: var(--hv-hairline) solid var(--hv-mist);
}
.hv-notice__inner {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: 0.25rem 0.5rem;
min-height: var(--hv-notice-h);
padding-block: 0.5rem;
text-align: center;
}
.hv-notice__label {
flex: none;
font-size: var(--hv-size-micro);
font-weight: var(--hv-weight-medium);
letter-spacing: var(--hv-ls-label);
text-transform: uppercase;
color: var(--hv-stone);
}
.hv-notice__text {
font-size: var(--hv-size-fine);
line-height: var(--hv-lh-compact);
color: var(--hv-stone);
text-wrap: balance;
}
.hv-notice a {
color: var(--hv-ink);
text-decoration: underline;
text-decoration-color: var(--hv-silver);
text-underline-offset: 0.18em;
}
/* -----------------------------------------------------------------------------
07 Header
Sticky, hairline-bottomed, blurred tint. Nav wraps on small screens, so the
mobile treatment needs no JavaScript and no disclosure widget.
-------------------------------------------------------------------------- */
.hv-header {
position: sticky;
top: 0;
z-index: var(--hv-z-header);
background-color: var(--hv-nav-tint);
border-bottom: var(--hv-hairline) solid var(--hv-border-2);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.hv-header {
-webkit-backdrop-filter: blur(var(--hv-nav-blur));
backdrop-filter: blur(var(--hv-nav-blur));
}
}
.hv-header__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem var(--hv-space-sm);
padding-block: 0.75rem;
min-height: var(--hv-header-h);
}
/* Text wordmark. Serif, tight, never an image, never Harvey's mark. */
.hv-wordmark {
display: inline-flex;
align-items: baseline;
gap: 0.4em;
flex: none;
min-height: 1.75rem;
padding-block: 0.25rem;
font-family: var(--hv-font-serif);
font-size: 1.125rem;
font-weight: var(--hv-weight-regular);
line-height: 1;
letter-spacing: -0.015em;
color: var(--hv-text);
text-decoration: none;
}
.hv-wordmark__sub {
font-family: var(--hv-font-sans);
font-size: var(--hv-size-micro);
letter-spacing: var(--hv-ls-label);
text-transform: uppercase;
color: var(--hv-text-faint);
transition: color var(--hv-dur-3) var(--hv-ease-soft);
}
.hv-wordmark:hover .hv-wordmark__sub { color: var(--hv-text-2); }
.hv-nav {
flex: 1 1 100%;
order: 3;
min-width: 0;
}
.hv-nav__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem var(--hv-space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.hv-nav__link {
/* 24px minimum hit area without changing the visual rhythm. */
display: inline-flex;
align-items: center;
min-height: 1.5rem;
padding-block: 0.125rem;
font-size: var(--hv-size-fine);
color: var(--hv-text-muted);
text-decoration: none;
transition: color var(--hv-dur-3) var(--hv-ease-soft);
}
.hv-nav__link:hover,
.hv-nav__link[aria-current="page"] { color: var(--hv-text); }
.hv-nav__link[aria-current="page"] { font-weight: var(--hv-weight-medium); }
.hv-header__actions { display: flex; align-items: center; gap: var(--hv-space-2xs); flex: none; }
@media (min-width: 48rem) {
.hv-header__inner { flex-wrap: nowrap; gap: var(--hv-space-md); }
.hv-nav { flex: 1 1 auto; order: 0; }
.hv-nav__list { justify-content: flex-end; gap: var(--hv-space-md); }
.hv-nav__link { font-size: var(--hv-size-small); }
}
/* -----------------------------------------------------------------------------
08 Typography
Harvey sets h1-h3 in their serif at weight 400 and h4 in the sans at 500.
-------------------------------------------------------------------------- */
.hv-display,
.hv-h2,
.hv-h3 {
font-family: var(--hv-font-serif);
font-weight: var(--hv-weight-regular);
font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
color: var(--hv-text);
text-wrap: pretty;
}
.hv-display {
font-size: var(--hv-size-display);
line-height: var(--hv-lh-display);
letter-spacing: var(--hv-ls-display);
text-wrap: balance;
}
.hv-h2 {
font-size: var(--hv-size-h2);
line-height: var(--hv-lh-display);
letter-spacing: var(--hv-ls-head);
}
.hv-h3 {
font-size: var(--hv-size-h3);
line-height: var(--hv-lh-head);
letter-spacing: var(--hv-ls-head);
}
.hv-h4 {
font-family: var(--hv-font-sans);
font-size: var(--hv-size-h4);
font-weight: var(--hv-weight-medium);
line-height: var(--hv-lh-head);
letter-spacing: var(--hv-ls-head);
color: var(--hv-text);
text-wrap: pretty;
}
/* Kicker. Harvey does not use tracked-out uppercase eyebrows anywhere on
their site; their kicker is small sentence-case sans in a muted grey.
This follows them, with an optional hairline for structure. */
.hv-kicker {
display: flex;
align-items: flex-start;
gap: 0.625rem;
font-family: var(--hv-font-sans);
font-size: var(--hv-size-small);
font-weight: var(--hv-weight-regular);
line-height: var(--hv-lh-compact);
color: var(--hv-text-muted);
}
.hv-kicker::before {
content: "";
flex: none;
width: 1.5rem;
height: var(--hv-hairline);
/* Sits on the first line's mid-x-height, not the middle of a wrapped block. */
margin-top: 0.68em;
background-color: var(--hv-border-strong);
}
.hv-kicker--bare { display: block; }
.hv-kicker--bare::before { content: none; }
.hv-lead {
font-size: var(--hv-size-lead);
line-height: var(--hv-lh-lead);
letter-spacing: -0.006em;
color: var(--hv-text-2);
text-wrap: pretty;
max-width: var(--hv-measure);
}
.hv-body {
font-size: var(--hv-size-body);
line-height: var(--hv-lh-body);
color: var(--hv-text-2);
max-width: var(--hv-measure);
text-wrap: pretty;
}
.hv-body--wide { max-width: none; }
.hv-small {
font-size: var(--hv-size-small);
line-height: var(--hv-lh-compact);
color: var(--hv-text-muted);
max-width: var(--hv-measure);
}
.hv-fine {
font-size: var(--hv-size-fine);
line-height: var(--hv-lh-compact);
color: var(--hv-text-muted);
max-width: var(--hv-measure);
}
.hv-prose > * + * { margin-top: var(--hv-space-sm); }
.hv-prose strong { font-weight: var(--hv-weight-medium); color: var(--hv-text); }
.hv-prose em { font-style: italic; }
/* Inline code: artefact names, repo paths, field names. */
.hv-code, code {
font-family: var(--hv-font-mono);
font-size: 0.88em;
letter-spacing: 0;
padding: 0.1em 0.3em;
border: var(--hv-hairline) solid var(--hv-border-2);
border-radius: var(--hv-radius-xs);
background-color: var(--hv-bg-2);
color: var(--hv-text-2);
overflow-wrap: anywhere;
}
.hv-ledger__src code,
.hv-fine code { background-color: transparent; border-color: transparent; padding-inline: 0.1em; }
/* Highlight used for the footnote jump target and nothing else. */
mark, .hv-mark {
background-color: var(--hv-mark-bg);
color: var(--hv-text);
padding: 0.05em 0.15em;
border-radius: 1px;
}
/* -----------------------------------------------------------------------------
09 Links
-------------------------------------------------------------------------- */
.hv-link {
color: var(--hv-text);
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: var(--hv-border-strong);
text-underline-offset: 0.18em;
transition: text-decoration-color var(--hv-dur-3) var(--hv-ease-soft),
color var(--hv-dur-3) var(--hv-ease-soft);
}
.hv-link:hover { text-decoration-color: currentColor; }
/* Inline link inside body copy, inherits the muted body colour. */
.hv-body .hv-link,
.hv-small .hv-link,
.hv-fine .hv-link { color: var(--hv-text); }
.hv-arrow {
display: inline-flex;
align-items: baseline;
min-height: 1.5rem;
gap: 0.45em;
font-size: var(--hv-size-small);
font-weight: var(--hv-weight-medium);
color: var(--hv-text);
text-decoration: none;
transition: color var(--hv-dur-3) var(--hv-ease-soft);
}
.hv-arrow::after {
content: "\2192";
display: inline-block;
transition: transform var(--hv-dur-3) var(--hv-ease-out);
}
.hv-arrow > span {
border-bottom: 1px solid var(--hv-border-strong);
transition: border-color var(--hv-dur-3) var(--hv-ease-soft);
}
.hv-arrow:hover { color: var(--hv-text); }
.hv-arrow:hover::after { transform: translateX(var(--hv-space-xs)); }
.hv-arrow:hover > span { border-color: currentColor; }
/* -----------------------------------------------------------------------------
10 Buttons
Harvey: 4px radius, 48px tall (h-12) with 20px inline padding, or 32px
(h-8) with 12px, sans medium, colour-only transitions at 300ms.
-------------------------------------------------------------------------- */
.hv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
min-height: 3rem;
padding-inline: 1.25rem;
border: var(--hv-hairline) solid transparent;
border-radius: var(--hv-radius-sm);
font-family: var(--hv-font-sans);
font-size: var(--hv-size-body);
font-weight: var(--hv-weight-medium);
line-height: 1;
letter-spacing: -0.004em;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
background: transparent;
transition: background-color var(--hv-dur-3) var(--hv-ease-soft),
border-color var(--hv-dur-3) var(--hv-ease-soft),
color var(--hv-dur-3) var(--hv-ease-soft);
}
.hv-btn--primary {
background-color: var(--hv-btn-primary-bg);
border-color: var(--hv-btn-primary-bg);
color: var(--hv-btn-primary-fg);
}
.hv-btn--primary:hover {
background-color: var(--hv-btn-primary-bg-hover);
border-color: var(--hv-btn-primary-bg-hover);
}
.hv-btn--primary:active {
background-color: var(--hv-btn-primary-bg-active);
border-color: var(--hv-btn-primary-bg-active);
}
.hv-btn--secondary {
color: var(--hv-btn-secondary-fg);
border-color: var(--hv-btn-secondary-border);
}
.hv-btn--secondary:hover {
color: var(--hv-btn-secondary-fg-hover);
border-color: var(--hv-btn-secondary-bd-hover);
background-color: var(--hv-btn-secondary-bg-hover);
}
.hv-btn--sm {
min-height: 2rem;
padding-inline: 0.75rem;
font-size: var(--hv-size-small);
}
.hv-btn[aria-disabled="true"], .hv-btn:disabled {
pointer-events: none;
opacity: 0.45;
}
.hv-btn-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--hv-space-2xs) var(--hv-space-sm);
}
@media (max-width: 25.9375rem) {
.hv-btn-row > .hv-btn { flex: 1 1 100%; }
}
/* -----------------------------------------------------------------------------
11 Verdict chips
Three states. "Gap" is bronze, not red: it is a candid disclosure, not an
error. Every chip carries a dot so state is never colour-only, and the
label text itself names the state.
-------------------------------------------------------------------------- */
.hv-chip {
display: inline-flex;
align-items: center;
gap: 0.4375rem;
padding: 0.1875rem 0.5rem 0.1875rem 0.4375rem;
border: var(--hv-hairline) solid var(--hv-border);
border-radius: var(--hv-radius-xs);
background-color: var(--hv-bg-2);
color: var(--hv-text-2);
font-family: var(--hv-font-sans);
font-size: var(--hv-size-micro);
font-weight: var(--hv-weight-medium);
line-height: 1.35;
letter-spacing: var(--hv-ls-label);
white-space: nowrap;
}
.hv-chip__dot {
flex: none;
width: 0.4375rem;
height: 0.4375rem;
border-radius: 50%;
background-color: currentColor;
}
.hv-chip--strong {
background-color: var(--hv-chip-strong-bg);
border-color: var(--hv-chip-strong-bd);
color: var(--hv-chip-strong-fg);
}
.hv-chip--strong .hv-chip__dot { background-color: var(--hv-chip-strong-dot); }
.hv-chip--partial {
background-color: var(--hv-chip-partial-bg);
border-color: var(--hv-chip-partial-bd);
color: var(--hv-chip-partial-fg);
}
.hv-chip--partial .hv-chip__dot { background-color: var(--hv-chip-partial-dot); }
.hv-chip--gap {
background-color: var(--hv-chip-gap-bg);
border-color: var(--hv-chip-gap-bd);
color: var(--hv-chip-gap-fg);
}
.hv-chip--gap .hv-chip__dot { background-color: var(--hv-chip-gap-dot); }
/* Partial reads as a half-filled dot, gap as an open ring. Shape, not colour. */
.hv-chip--partial .hv-chip__dot {
background-image: linear-gradient(to right,
currentColor 0 50%, transparent 50% 100%);
background-color: transparent;
box-shadow: inset 0 0 0 1px var(--hv-chip-partial-dot);
color: var(--hv-chip-partial-dot);
}
.hv-chip--gap .hv-chip__dot {
background-color: transparent;
box-shadow: inset 0 0 0 1.5px var(--hv-chip-gap-dot);
}
/* Chip legend, for a key above the ledger. */
.hv-chip-legend {
display: flex;
flex-wrap: wrap;
gap: var(--hv-space-2xs) var(--hv-space-sm);
align-items: center;
}
.hv-chip-legend__item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: var(--hv-size-fine);
color: var(--hv-text-muted);
}
/* -----------------------------------------------------------------------------
12 Requirement-to-evidence ledger
Semantic of - , each holding a
. No table, no display:block
table hack. Column labels are real - s, visually hidden on wide screens
where a single sticky legend row carries them instead.
-------------------------------------------------------------------------- */
.hv-ledger {
counter-reset: hv-ledger;
margin: 0;
padding: 0;
list-style: none;
border-top: var(--hv-hairline) solid var(--hv-border);
}
/* Legend row. Decorative duplicate of the per-row
- s, so it is hidden
from assistive tech. Only appears once the grid layout kicks in. */
.hv-ledger__legend { display: none; }
.hv-ledger__row {
counter-increment: hv-ledger;
position: relative;
padding-block: var(--hv-space-sm);
border-bottom: var(--hv-hairline) solid var(--hv-border-2);
transition: background-color var(--hv-dur-3) var(--hv-ease-soft);
}
.hv-ledger__row:last-child { border-bottom-color: var(--hv-border); }
.hv-ledger__row:hover { background-color: var(--hv-tint); }
.hv-ledger__dl {
display: grid;
grid-template-columns: 1.875rem minmax(0, 1fr);
column-gap: var(--hv-space-2xs);
row-gap: 0.375rem;
margin: 0;
align-items: start;
}
/* The index sits in the first column, drawn from the list counter. */
.hv-ledger__dl::before {
content: counter(hv-ledger, decimal-leading-zero);
grid-column: 1;
grid-row: 1;
align-self: start;
line-height: var(--hv-lh-compact);
font-size: var(--hv-size-micro);
font-variant-numeric: tabular-nums;
font-weight: var(--hv-weight-medium);
letter-spacing: var(--hv-ls-label);
color: var(--hv-text-faint);
padding-top: 0.22em;
}
.hv-ledger__dl > dt { margin: 0; }
.hv-ledger__dl > dd { margin: 0; min-width: 0; }
.hv-ledger__req {
grid-column: 2;
font-size: var(--hv-size-body);
font-weight: var(--hv-weight-medium);
line-height: var(--hv-lh-compact);
letter-spacing: -0.006em;
color: var(--hv-text);
overflow-wrap: anywhere;
}
.hv-ledger__ev {
grid-column: 2;
font-size: var(--hv-size-small);
line-height: var(--hv-lh-compact);
color: var(--hv-text-muted);
overflow-wrap: anywhere;
}
.hv-ledger__ev .hv-link { color: var(--hv-text-2); }
.hv-ledger__verdict {
grid-column: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem 0.625rem;
padding-top: 0.125rem;
}
/* Artefact reference: the thing the row points at. Mono-ish, quiet. */
.hv-ledger__src {
font-family: var(--hv-font-sans);
font-size: var(--hv-size-micro);
font-variant-numeric: tabular-nums;
color: var(--hv-text-faint);
overflow-wrap: anywhere;
}
/* Wide layout: four real columns. */
@media (min-width: 62rem) {
.hv-ledger__legend {
display: grid;
grid-template-columns: 2.25rem minmax(0, 1fr) minmax(0, 1.3fr) 9.25rem;
column-gap: var(--hv-space-sm);
padding-bottom: 0.5rem;
border-bottom: var(--hv-hairline) solid var(--hv-border);
font-size: var(--hv-size-micro);
font-weight: var(--hv-weight-medium);
letter-spacing: var(--hv-ls-label);
text-transform: uppercase;
color: var(--hv-text-faint);
}
.hv-ledger { border-top: 0; }
.hv-ledger__dl {
grid-template-columns: 2.25rem minmax(0, 1fr) minmax(0, 1.3fr) 9.25rem;
column-gap: var(--hv-space-sm);
row-gap: 0.375rem;
align-items: start;
}
.hv-ledger__dl::before { grid-row: 1; align-self: start; }
.hv-ledger__req { grid-column: 2; grid-row: 1; }
.hv-ledger__ev { grid-column: 3; grid-row: 1; }
.hv-ledger__verdict {
grid-column: 4; grid-row: 1;
flex-direction: column;
align-items: flex-start;
gap: 0.375rem;
padding-top: 0;
}
/* Source lines sit under their own column. */
.hv-ledger__src--under-ev { grid-column: 3; grid-row: 2; }
}
/* Optional: a compact footnote line under a row, full width at every size. */
.hv-ledger__note {
grid-column: 2 / -1;
font-size: var(--hv-size-micro);
line-height: var(--hv-lh-compact);
color: var(--hv-text-faint);
}
/* -----------------------------------------------------------------------------
13 Tooling proficiency
A named tool, a five-segment depth meter, a word for the depth, and one
honest sentence. The meter is the point: it is a measuring rule, not a
progress bar, so the segments are square and hairline-separated.
-------------------------------------------------------------------------- */
.hv-tools {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
border-top: var(--hv-hairline) solid var(--hv-border);
}
.hv-tool {
padding-block: var(--hv-space-sm);
border-bottom: var(--hv-hairline) solid var(--hv-border-2);
min-width: 0;
}
.hv-tool__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.25rem 0.75rem;
}
.hv-tool__name {
font-family: var(--hv-font-sans);
font-size: var(--hv-size-body);
font-weight: var(--hv-weight-medium);
line-height: var(--hv-lh-head);
letter-spacing: -0.008em;
color: var(--hv-text);
overflow-wrap: anywhere;
}
.hv-tool__depth {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex: none;
}
.hv-tool__label {
font-size: var(--hv-size-micro);
font-weight: var(--hv-weight-medium);
letter-spacing: var(--hv-ls-label);
text-transform: uppercase;
color: var(--hv-text-faint);
white-space: nowrap;
}
.hv-tool__meter {
display: inline-flex;
gap: 2px;
flex: none;
align-items: center;
}
.hv-tool__meter > i {
display: block;
width: 0.875rem;
height: 0.1875rem;
border-radius: 0.5px;
background-color: var(--hv-meter-off);
}
.hv-tool[data-hv-depth="1"] .hv-tool__meter > i:nth-child(-n+1),
.hv-tool[data-hv-depth="2"] .hv-tool__meter > i:nth-child(-n+2),
.hv-tool[data-hv-depth="3"] .hv-tool__meter > i:nth-child(-n+3),
.hv-tool[data-hv-depth="4"] .hv-tool__meter > i:nth-child(-n+4),
.hv-tool[data-hv-depth="5"] .hv-tool__meter > i:nth-child(-n+5) {
background-color: var(--hv-meter-on);
}
.hv-tool__note {
margin-top: 0.375rem;
font-size: var(--hv-size-small);
line-height: var(--hv-lh-compact);
color: var(--hv-text-muted);
max-width: 44ch;
text-wrap: pretty;
}
@media (min-width: 48rem) {
.hv-tools {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--hv-space-md);
}
/* Keep the top hairline continuous across both columns. */
.hv-tool { padding-block: var(--hv-space-sm); }
}
/* A short honest caveat line under the whole set. */
.hv-tools-note {
margin-top: var(--hv-space-sm);
font-size: var(--hv-size-fine);
line-height: var(--hv-lh-compact);
color: var(--hv-text-faint);
max-width: var(--hv-measure);
}
/* -----------------------------------------------------------------------------
14 Case-study card
Quiet: hairline, 4px radius, no shadow. Harvey almost never uses shadow.
-------------------------------------------------------------------------- */
.hv-case {
display: flex;
flex-direction: column;
gap: var(--hv-space-2xs);
padding: var(--hv-space-sm);
border: var(--hv-hairline) solid var(--hv-border);
border-radius: var(--hv-radius-sm);
background-color: var(--hv-bg-2);
transition: border-color var(--hv-dur-3) var(--hv-ease-soft),
background-color var(--hv-dur-3) var(--hv-ease-soft);
}
.hv-case:hover { border-color: var(--hv-border-strong); }
.hv-case__kicker {
font-size: var(--hv-size-micro);
font-weight: var(--hv-weight-medium);
letter-spacing: var(--hv-ls-label);
text-transform: uppercase;
color: var(--hv-text-faint);
}
.hv-case__title {
font-family: var(--hv-font-serif);
font-size: var(--hv-size-h3);
font-weight: var(--hv-weight-regular);
line-height: var(--hv-lh-head);
letter-spacing: var(--hv-ls-head);
color: var(--hv-text);
text-wrap: pretty;
}
.hv-case__body {
font-size: var(--hv-size-small);
line-height: var(--hv-lh-body);
color: var(--hv-text-muted);
text-wrap: pretty;
}
.hv-case__meta {
display: flex;
flex-wrap: wrap;
gap: 0.25rem var(--hv-space-2xs);
margin-top: auto;
padding-top: var(--hv-space-2xs);
border-top: var(--hv-hairline) solid var(--hv-border-2);
font-size: var(--hv-size-micro);
color: var(--hv-text-faint);
}
.hv-case__meta > * + *::before {
content: "";
display: inline-block;
width: 1px;
height: 0.75em;
margin-right: 0.5rem;
vertical-align: -0.05em;
background-color: var(--hv-border-strong);
}
.hv-case__foot { padding-top: var(--hv-space-2xs); }
@media (min-width: 48rem) {
.hv-case { padding: var(--hv-space-md); gap: 0.625rem; }
}
/* -----------------------------------------------------------------------------
15 Feature row
-------------------------------------------------------------------------- */
.hv-feature {
display: grid;
grid-template-columns: 1fr;
gap: var(--hv-space-md);
align-items: start;
}
.hv-feature > * { min-width: 0; }
.hv-feature__col > * + * { margin-top: var(--hv-space-2xs); }
.hv-feature__col > .hv-kicker + * { margin-top: 0.5rem; }
@media (min-width: 48rem) {
.hv-feature {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: var(--hv-space-lg);
}
.hv-feature--lead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hv-feature--trail { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
/* A stack of feature rows, hairline separated. */
.hv-feature-set > .hv-feature + .hv-feature {
margin-top: var(--hv-space-md);
padding-top: var(--hv-space-md);
border-top: var(--hv-hairline) solid var(--hv-border-2);
}
/* -----------------------------------------------------------------------------
16 Process / timeline
-------------------------------------------------------------------------- */
.hv-steps {
counter-reset: hv-step;
margin: 0;
padding: 0;
list-style: none;
}
.hv-step {
counter-increment: hv-step;
position: relative;
padding-left: 2.75rem;
padding-bottom: var(--hv-space-md);
min-width: 0;
}
.hv-step:last-child { padding-bottom: 0; }
.hv-step::before {
content: counter(hv-step, decimal-leading-zero);
position: absolute;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border: var(--hv-hairline) solid var(--hv-border);
border-radius: 50%;
background-color: var(--hv-bg);
font-size: var(--hv-size-micro);
font-variant-numeric: tabular-nums;
font-weight: var(--hv-weight-medium);
letter-spacing: 0;
color: var(--hv-text-2);
}
/* Connector rule between markers. */
.hv-step::after {
content: "";
position: absolute;
left: calc(0.875rem - 0.5px);
top: 1.75rem;
bottom: 0.25rem;
width: 1px;
background-color: var(--hv-border-2);
}
.hv-step:last-child::after { content: none; }
.hv-step__title {
font-family: var(--hv-font-sans);
font-size: var(--hv-size-h4);
font-weight: var(--hv-weight-medium);
line-height: var(--hv-lh-head);
letter-spacing: -0.008em;
color: var(--hv-text);
padding-top: 0.1875rem;
}
.hv-step__text {
margin-top: 0.375rem;
font-size: var(--hv-size-small);
line-height: var(--hv-lh-body);
color: var(--hv-text-muted);
max-width: 58ch;
text-wrap: pretty;
}
.hv-step__meta {
margin-top: 0.375rem;
font-size: var(--hv-size-micro);
letter-spacing: var(--hv-ls-label);
text-transform: uppercase;
color: var(--hv-text-faint);
}
@media (min-width: 48rem) {
.hv-step { padding-left: 3.5rem; }
.hv-step::before { width: 2rem; height: 2rem; }
.hv-step::after { left: calc(1rem - 0.5px); top: 2rem; }
}
/* -----------------------------------------------------------------------------
17 Pull quote
Serif, hung punctuation. Harvey nudges quotes by -0.51ch; same trick here.
-------------------------------------------------------------------------- */
.hv-quote {
margin: 0;
max-width: 34ch;
border-left: 0;
}
.hv-quote__text {
font-family: var(--hv-font-serif);
font-size: var(--hv-size-h3);
font-weight: var(--hv-weight-regular);
line-height: 1.25;
letter-spacing: var(--hv-ls-head);
color: var(--hv-text);
text-indent: -0.51ch;
text-wrap: pretty;
}
@supports (hanging-punctuation: first) {
.hv-quote__text { text-indent: 0; hanging-punctuation: first last; }
}
.hv-quote__cite {
display: block;
margin-top: var(--hv-space-2xs);
font-family: var(--hv-font-sans);
font-size: var(--hv-size-fine);
font-style: normal;
line-height: var(--hv-lh-compact);
color: var(--hv-text-faint);
}
.hv-quote__cite b {
display: block;
font-weight: var(--hv-weight-medium);
color: var(--hv-text-2);
}
.hv-quote--rule { padding-top: var(--hv-space-sm); border-top: var(--hv-hairline) solid var(--hv-border); }
/* -----------------------------------------------------------------------------
18 Footnotes
-------------------------------------------------------------------------- */
.hv-fn-ref {
font-size: 0.7em;
line-height: 0;
/* vertical-align: super overshoots on both faces; a fixed rise sits
level with the cap line instead. */
vertical-align: 0.42em;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
font-weight: var(--hv-weight-medium);
margin-left: 0.06em;
}
.hv-fn-ref a {
color: var(--hv-text-muted);
text-decoration: none;
/* Grow the hit box without moving anything on the line. */
padding: 0.7em 0.5em;
margin: -0.7em -0.38em;
border-radius: 1px;
transition: color var(--hv-dur-3) var(--hv-ease-soft);
}
.hv-fn-ref a:hover { color: var(--hv-text); }
.hv-footnotes {
counter-reset: hv-fn;
margin: 0;
padding: 0;
list-style: none;
border-top: var(--hv-hairline) solid var(--hv-border);
max-width: var(--hv-measure);
}
.hv-footnotes__title {
font-size: var(--hv-size-micro);
font-weight: var(--hv-weight-medium);
letter-spacing: var(--hv-ls-label);
text-transform: uppercase;
color: var(--hv-text-faint);
margin-bottom: var(--hv-space-2xs);
}
/* Hanging indent rather than a grid: the back-link must stay inline at the
end of the note, and a grid turns it into its own row. */
.hv-footnote {
counter-increment: hv-fn;
position: relative;
padding: 0.625rem 0.5rem 0.625rem 2.375rem;
margin-inline: -0.5rem;
border-bottom: var(--hv-hairline) solid var(--hv-border-2);
border-left: 2px solid transparent;
font-size: var(--hv-size-fine);
line-height: var(--hv-lh-compact);
color: var(--hv-text-muted);
overflow-wrap: anywhere;
transition: background-color var(--hv-dur-3) var(--hv-ease-soft),
border-left-color var(--hv-dur-3) var(--hv-ease-soft);
}
.hv-footnote::before {
content: counter(hv-fn) ".";
position: absolute;
left: 0.5rem;
width: 1.375rem;
font-variant-numeric: tabular-nums;
color: var(--hv-text-faint);
text-align: right;
}
.hv-footnote:last-child { border-bottom: 0; }
.hv-footnote a { color: var(--hv-text-2); }
/* Visible target highlight on jump. */
.hv-footnote:target {
background-color: var(--hv-mark-bg);
border-left-color: var(--hv-mark-bd);
}
.hv-footnote:target::before { color: var(--hv-text-2); }
.hv-footnote__back {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
min-height: 1.5rem;
margin-left: 0.15em;
vertical-align: -0.45em;
font-size: 0.95em;
text-decoration: none;
color: var(--hv-text-faint);
white-space: nowrap;
}
.hv-footnote__back:hover { color: var(--hv-text); }
/* A referenced anchor elsewhere in the page gets the same treatment. */
.hv-fn-ref a:target,
.hv-target:target {
background-color: var(--hv-mark-bg);
box-shadow: 0 0 0 2px var(--hv-mark-bg);
border-radius: 1px;
}
/* -----------------------------------------------------------------------------
19 CTA band
-------------------------------------------------------------------------- */
.hv-cta { padding-block: var(--hv-section-y); }
.hv-cta__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--hv-space-sm);
align-items: end;
}
.hv-cta__title {
font-family: var(--hv-font-serif);
font-size: var(--hv-size-h2);
font-weight: var(--hv-weight-regular);
line-height: var(--hv-lh-display);
letter-spacing: var(--hv-ls-head);
color: var(--hv-text);
text-wrap: balance;
max-width: 20ch;
}
.hv-cta__text {
font-size: var(--hv-size-small);
line-height: var(--hv-lh-body);
color: var(--hv-text-2);
max-width: 48ch;
}
.hv-cta__actions { margin-top: var(--hv-space-2xs); }
@media (min-width: 48rem) {
.hv-cta__inner {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--hv-space-lg);
}
.hv-cta__actions { margin-top: 0; }
}
/* -----------------------------------------------------------------------------
20 Footer
-------------------------------------------------------------------------- */
.hv-footer {
padding-block: var(--hv-space-md);
border-top: var(--hv-hairline) solid var(--hv-border);
}
.hv-footer__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--hv-space-sm);
}
.hv-footer__brand {
font-family: var(--hv-font-serif);
font-size: 1.0625rem;
letter-spacing: -0.015em;
color: var(--hv-text);
}
.hv-footer__nav ul {
display: flex;
flex-wrap: wrap;
gap: 0.375rem var(--hv-space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.hv-footer__nav a {
display: inline-flex;
align-items: center;
min-height: 1.5rem;
font-size: var(--hv-size-fine);
color: var(--hv-text-muted);
text-decoration: none;
transition: color var(--hv-dur-3) var(--hv-ease-soft);
}
.hv-footer__nav a:hover { color: var(--hv-text); }
.hv-footer__note {
font-size: var(--hv-size-micro);
line-height: var(--hv-lh-compact);
color: var(--hv-text-faint);
max-width: 62ch;
}
/* The independence disclaimer. Quiet but never hidden. */
.hv-disclaimer {
padding-top: var(--hv-space-sm);
margin-top: var(--hv-space-sm);
border-top: var(--hv-hairline) solid var(--hv-border-2);
font-size: var(--hv-size-micro);
line-height: var(--hv-lh-compact);
color: var(--hv-text-faint);
max-width: 78ch;
}
@media (min-width: 48rem) {
.hv-footer { padding-block: var(--hv-space-md); }
.hv-footer__inner {
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
align-items: baseline;
column-gap: var(--hv-space-lg);
}
.hv-footer__nav ul { justify-content: flex-end; }
.hv-footer__note, .hv-disclaimer { grid-column: 1 / -1; }
}
/* -----------------------------------------------------------------------------
21 Utilities
-------------------------------------------------------------------------- */
.hv-vh {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.hv-skip {
position: absolute;
left: 0.5rem;
top: -4rem;
z-index: calc(var(--hv-z-header) + 1);
padding: 0.625rem 0.875rem;
border-radius: var(--hv-radius-sm);
background-color: var(--hv-ink);
color: var(--hv-ivory);
font-size: var(--hv-size-small);
text-decoration: none;
transition: top var(--hv-dur-2) var(--hv-ease-out);
}
.hv-skip:focus { top: 0.5rem; }
.hv-measure { max-width: var(--hv-measure); }
.hv-nowrap { white-space: nowrap; }
.hv-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.hv-mt-sm { margin-top: var(--hv-space-sm); }
.hv-mt-md { margin-top: var(--hv-space-md); }
.hv-mt-lg { margin-top: var(--hv-space-lg); }
.hv-mt-2xs { margin-top: var(--hv-space-2xs); }
/* -----------------------------------------------------------------------------
22 Reduced motion
The system is already close to motionless: colour fades, one 8px arrow
nudge, one skip-link slide. Under reduced-motion all of it stops, and
smooth scrolling is dropped so :target jumps land instantly.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.hv-arrow:hover::after { transform: none; }
.hv-skip { transition: none; }
}
/* -----------------------------------------------------------------------------
23 Print — US Letter
-------------------------------------------------------------------------- */
@page {
size: Letter portrait;
margin: 0.7in 0.75in 0.85in;
}
@media print {
:root,
.hv-theme-ivory,
.hv-theme-paper,
.hv-theme-ink {
--hv-bg: #ffffff;
--hv-bg-2: #ffffff;
--hv-bg-3: #ffffff;
--hv-text: #000000;
--hv-text-2: #1a1a1a;
--hv-text-muted: #333333;
--hv-text-faint: #4d4d4d;
--hv-border: #999999;
--hv-border-2: #cccccc;
--hv-border-strong: #666666;
--hv-rule: #999999;
--hv-tint: transparent;
--hv-meter-on: #000000;
--hv-meter-off: #cccccc;
--hv-chip-strong-bg: #ffffff; --hv-chip-strong-bd: #666666; --hv-chip-strong-fg: #000000; --hv-chip-strong-dot: #000000;
--hv-chip-partial-bg: #ffffff; --hv-chip-partial-bd: #666666; --hv-chip-partial-fg: #000000; --hv-chip-partial-dot: #000000;
--hv-chip-gap-bg: #ffffff; --hv-chip-gap-bd: #666666; --hv-chip-gap-fg: #000000; --hv-chip-gap-dot: #000000;
--hv-mark-bg: transparent;
--hv-section-y: 1.5rem;
--hv-gutter: 0;
}
html, body.hv-page {
background: #fff !important;
color: #000 !important;
font-size: 10.5pt;
line-height: 1.42;
overflow: visible;
}
.hv-theme-ivory, .hv-theme-paper, .hv-theme-ink {
background: #fff !important;
color: #000 !important;
}
/* Chrome that carries no meaning on paper. */
.hv-header, .hv-skip, .hv-btn, .hv-cta__actions,
.hv-footnote__back { display: none !important; }
/* The notice stays: it is a statement about the document. */
.hv-notice {
border: 0;
border-bottom: 0.5pt solid #999;
background: #fff !important;
}
.hv-notice__inner { min-height: 0; padding-block: 0 6pt; justify-content: flex-start; text-align: left; }
.hv-container, .hv-container--measure, .hv-container--wide {
max-width: none;
padding-inline: 0;
}
.hv-section, .hv-cta { padding-block: 14pt; }
.hv-section--ruled { border-top: 0.5pt solid #999; }
.hv-display { font-size: 24pt; }
.hv-h2 { font-size: 16pt; }
.hv-h3, .hv-case__title, .hv-cta__title { font-size: 13pt; }
.hv-h4, .hv-step__title, .hv-tool__name { font-size: 11pt; }
.hv-lead { font-size: 11.5pt; }
.hv-body { font-size: 10.5pt; }
.hv-small, .hv-ledger__ev, .hv-tool__note, .hv-step__text, .hv-case__body { font-size: 9.5pt; }
.hv-fine, .hv-footnote, .hv-ledger__src, .hv-footer__note, .hv-disclaimer { font-size: 8.5pt; }
/* Keep records intact across page breaks. */
.hv-ledger__row, .hv-tool, .hv-step, .hv-case, .hv-quote, .hv-footnote,
.hv-feature {
break-inside: avoid;
page-break-inside: avoid;
}
h1, h2, h3, .hv-display, .hv-h2, .hv-h3 { break-after: avoid; page-break-after: avoid; }
.hv-ledger__row:hover { background: none; }
.hv-ledger, .hv-tools, .hv-footnotes { border-top-color: #999; }
.hv-ledger__row, .hv-tool { border-bottom: 0.5pt solid #ccc; }
.hv-chip { border: 0.5pt solid #666; }
/* Show the destination of real links on paper. */
.hv-body a[href^="http"]::after,
.hv-footnote a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.85em;
color: #4d4d4d;
word-break: break-all;
}
.hv-footer { border-top: 0.5pt solid #999; padding-block: 10pt 0; }
.hv-disclaimer { border-top: 0.5pt solid #ccc; }
}