/* Sections: brand and state tokens, document defaults, type, focus and motion. */ /* Cascade: document defaults, shared controls, then page geometry. */ @layer mhp-base, mhp-components, mhp-layout; /* Tokens: the existing MHillPhoto magenta, teal and neutral palette. */ :root { /* Brand and neutral colors: current product primitives. */ --magenta: #E64FA7; --teal: #5BA5B0; --white: #ffffff; --black: #000000; --transparent: transparent; --magenta-cta: color-mix(in srgb, var(--magenta) 70%, var(--black)); --magenta-cta-hover: color-mix(in srgb, var(--magenta) 55%, var(--black)); --teal-text: color-mix(in srgb, var(--teal) 55%, var(--black)); --text: #1a1a1a; --border: #e5e5e5; --shimmer-highlight: var(--bg); --muted: #6b7177; --footer-text: #3f3f3f; --footer-muted: #555555; --footer-link: var(--surface-dark-border); --footer-caption-link: #444444; --staging-banner-border: #ffb36b; --size-choice: 20px; --staging-banner-line-height: var(--size-choice); --toggle-travel: var(--size-choice); --staging-banner-mobile-height: 52px; --footer-border: #d9d8d5; --control-accent: color-mix(in srgb, var(--teal) 62%, var(--black)); --select-arrow: url("data:image/svg+xml;utf8,"); --image-choice-accent: #cc2366; /* State colors and photographic surfaces: current product primitives. */ --bg: #fafafa; --surface-cool: #f6f7f8; --surface: var(--white); --surface-hover: #f5f5f5; --control-primary: var(--magenta-cta); --control-primary-hover: var(--magenta-cta-hover); --control-ink: var(--text); --control-border: #676767; --control-hover: #f4edf1; --control-selected: var(--teal-text); --control-disabled-bg: #e3e3e3; --control-disabled-ink: #5c5c5c; --control-disabled-border: #a3a3a3; --control-placeholder: #595959; --control-invalid: #dc3545; --color-error: #c62828; --color-error-bg: #fce4ec; --color-success: #2e7d32; --color-success-bg: #e8f5e9; --color-warning: #805400; --color-warning-bg: #fff8e1; --color-info: #1565c0; --color-info-bg: #e3f2fd; --color-refund: #a33900; --color-refund-bg: #fff3e0; --color-critical: #bf360c; --color-critical-bg: #fbe9e7; --color-neutral-bg: var(--surface-hover); --surface-stage: var(--black); --surface-dark-text: #cccccc; --surface-dark-muted: #999999; --surface-dark-border: #333333; --ink: #1a1d1f; --swatch-red: #dc2626; --swatch-orange: #ea580c; --swatch-yellow: #eab308; --swatch-green: #16a34a; --swatch-cyan: #06b6d4; --swatch-blue: #2563eb; --swatch-purple: #9333ea; --swatch-pink: #db2777; --footer-bg: #f1f0ee; --staging-banner-bg: #6b2100; --control-edit-line: 18px; --drawer-backdrop: rgb(0 0 0 / 40%); --control-spinner-size: 14px; --control-gap: var(--space-sm); --dialog-backdrop: rgb(0 0 0 / 55%); --photo-color-10: rgba(0, 0, 0, 0.35); --photo-frame-2: 6px; --photo-frame-3: 10px; --ink-inverse-muted: rgba(255,255,255,0.7); --ink-inverse: rgba(255,255,255,0.9); --photo-control-surface: rgb(255 255 255 / 12%); --photo-control-hover: rgb(255 255 255 / 20%); --photo-toolbar-gradient: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0) 100%); --photo-badge-surface: rgb(0 0 0 / 78%); --image-choice-gradient: linear-gradient(45deg, #f09433, #dc2743, #bc1888); /* Typography: current product primitives. */ --text-dim: #4a4a4a; --text-heading: 1.5rem; --text-eyebrow: 0.7rem; --text-nav: 0.8rem; --tracking-nav: 0.08em; --text-display: clamp(2.2rem, 5vw, 4rem); --text-fluid-lg: clamp(1.8rem, 4vw, 3rem); --text-fluid-md: clamp(1.8rem, 3.5vw, 2.8rem); --text-3xl: 2.2rem; --text-section-title: 1.8rem; --text-edition-heading: 1.15rem; --text-field: 0.95rem; --text-caption: 0.78rem; --tracking-display: -0.03em; --tracking-heading: -0.02em; --weight-light: 300; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --text-xs: 0.75rem; --text-sm: 0.85rem; --text-button: 0.9rem; --text-base: 1rem; --text-md: 1.1rem; --text-lg: 1.3rem; --text-subsection: 1.17rem; --text-xl: 1.6rem; --text-2xl: 2rem; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.6; --leading-compact: 1.5; --leading-relaxed: 1.8; --tracking-button: 0.02em; --brand-compact-size: clamp(1rem, 4.8vw, 1.2rem); --tracking-caption: 0.01em; --text-section: 1.4rem; --text-promo-display: clamp(2rem, 6vw, 4.5rem); --leading-promo: 1.05; --text-promo-lead: clamp(1rem, 2vw, 1.5rem); --leading-label: 1.35; --tracking-promo: 0.14em; --text-promo-eyebrow: clamp(0.72rem, 1.4vw, 0.85rem); --text-promo-title: clamp(1.4rem, 4vw, 2.75rem); --text-promo-caption: clamp(0.9rem, 1.8vw, 1.15rem); --leading-summary: 1.4; --tracking-eyebrow: 0.12em; --tracking-badge: 0.06em; --text-micro: 0.72rem; --text-note: 0.875rem; --tracking-wide: 0.1em; --case-upper: uppercase; --tracking-label: 0.05em; --text-label: 0.82rem; --text-assistance: 0.8125rem; --text-summary: 1.05rem; --text-hero: 5rem; --leading-single: 1; --text-display-fixed: 2.4rem; --tracking-title: -0.01em; --leading-double: 2; --text-dialog-title: 1.625rem; --leading-copy: 1.55; --text-fine-label: 0.68rem; --text-fluid: clamp(1.45rem, 3vw, 2.2rem); --text-description: 0.88rem; --leading-reading: 1.7; --font-mono: ui-monospace, monospace; --leading-detail: 1.45; --text-detail: 0.86rem; --text-status: 0.92rem; --font-code: ui-monospace, SFMono-Regular, Menlo, monospace; --text-page-title: 1.7rem; --leading-title: 1.2; --text-article: clamp(1.5rem, 3.5vw, 2.2rem); --case-title: capitalize; --text-compact-label: 0.76rem; --font-terminal: monospace; --text-relative: 0.85em; --tracking-action: 0.04em; --font-document: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --text-callout: clamp(1.05rem, 1.4vw, 1.25rem); /* Spacing and dimensions: current product primitives. */ --staging-banner-height: 0px; --space-2xs: 2px; --space-xs: 4px; --space-sm: 8px; --space-control: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --control-target: 44px; --nav-height: 64px; --container: 1200px; --container-wide: 1400px; --container-ultrawide: 1800px; --space-px-negative-1: -1px; --space-px-5: 5px; --space-px-7: 7px; --space-px-9: 9px; --space-px-11: 11px; --space-px-13: 13px; --space-px-22: 22px; --space-px-28: 28px; --space-px-40: 40px; --space-px-48: 48px; --space-px-60: 60px; --space-px-80: 80px; --space-px-120: 120px; --space-rem-0-1: 0.1rem; --space-rem-0-15: 0.15rem; --space-rem-0-18: 0.18rem; --space-rem-0-2: 0.2rem; --space-rem-0-25: .25rem; --space-rem-0-28: 0.28rem; --space-rem-0-3: 0.3rem; --space-rem-0-32: 0.32rem; --space-rem-0-35: 0.35rem; --space-rem-0-4: 0.4rem; --space-rem-0-45: 0.45rem; --space-rem-0-5: 0.5rem; --space-rem-0-55: 0.55rem; --space-rem-0-6: 0.6rem; --space-rem-0-65: 0.65rem; --space-rem-1-2: 1.2rem; --space-rem-1-25: 1.25rem; --space-rem-1-35: 1.35rem; --space-rem-1-75: 1.75rem; --space-rem-2-25: 2.25rem; --space-rem-2-5: 2.5rem; --space-rem-2-75: 2.75rem; --space-rem-3: 3rem; --space-rem-3-25: 3.25rem; --space-rem-3-5: 3.5rem; --space-rem-4: 4rem; --space-rem-6: 6rem; --space-vw-2: 2vw; --space-vw-3: 3vw; --space-vw-4: 4vw; --space-vw-5: 5vw; /* Borders and elevation: current product primitives. */ --line-choice: 1.5px; --border-card-none: 0; --shadow-drawer: -4px 0 24px rgb(0 0 0 / 15%); --line-thin: 1px; --focus-width: 3px; --radius-sm: var(--space-2xs); --radius-pill: 30px; --radius-full: 9999px; --control-radius: var(--radius-pill); --control-field-radius: var(--space-xs); --shadow: 0 2px 12px rgb(0 0 0 / 10%); --shadow-photo-action: 0 2px 12px rgb(0 0 0 / 25%); --shadow-auth: 0 4px 24px rgb(0 0 0 / 6%); --shadow-toolbar: 0 1px 4px rgb(0 0 0 / 4%); --shadow-purchase: 0 -4px 24px rgb(0 0 0 / 30%); /* Motion and layers: current product primitives. */ --transition: 0.2s ease; --spinner-duration: 0.8s; --layer-10: 10; --layer-1000: 1000; --layer-10000: 10000; --layer-10001: 10001; --layer-10010: 10010; --layer-1100: 1100; --layer-1200: 1200; --layer-2000: 2000; --layer-3: 3; --layer-5: 5; --layer-9000: 9000; --layer-9100: 9100; --layer-9200: 9200; --layer-9999: 9999; --layer-99999: 99999; /* Semantic aliases: border, focus, field and radius roles share existing primitives. */ --line-strong: var(--space-2xs); --focus-offset: var(--focus-width); --radius-md: var(--space-xs); --radius-lg: var(--control-gap); --radius-panel: var(--space-control); --radius-auth: var(--space-md); --radius-xl: var(--control-spinner-size); --control-surface: var(--white); --control-selected-ink: var(--white); --control-focus: var(--teal-text); /* Photo focus: two opaque rings separate the target from light and dark images. */ --control-focus-inverse: var(--white); --shadow-photo-focus: 0 0 0 calc(var(--focus-width) + var(--focus-offset) + var(--line-strong)) var(--black); /* Spacing aliases: document spacing shares primitives without using text names in layout. */ --space-2rem: var(--text-2xl); --space-0-75rem: var(--text-xs); --space-1rem: var(--text-base); --space-1-5rem: var(--text-heading); --space-1-4rem: var(--text-section); --space-0-85rem: var(--text-sm); --space-0-9rem: var(--text-button); --space-0-7rem: var(--text-eyebrow); --space-0-8rem: var(--text-nav); --space-10px: var(--photo-frame-3); --space-6px: var(--photo-frame-2); --space-14px: var(--control-spinner-size); --space-1-8rem: var(--text-section-title); --space-5rem: var(--text-hero); --space-1-1rem: var(--text-md); --space-2-2rem: var(--text-3xl); --space-1-6rem: var(--text-xl); /* Photo tools: established translucent footer control surface. */ --photo-tool-surface: rgb(255 255 255 / 10%); /* Native action type: existing browser editing button face. */ --font-native: Arial, sans-serif; /* Native text roles: retain browser action and authentication field metrics. */ --text-entry: 0.9375rem; --text-native-tab: calc(5rem / 6); } /* Element base: consistent box sizing without changing photo placement. */ @layer mhp-base { /* Document reset: elements and generated boxes use border sizing. */ :where(*, *::before, *::after) { box-sizing: border-box; } /* Document reset: standard document children keep their original zero spacing. */ .mhp-document--reset :where(*, *::before, *::after) { margin: 0; padding: 0; } /* Document type: retain the current system font and readable scale. */ :where(html) { font-family: var(--font); -webkit-text-size-adjust: 100%; } /* Document surface: current public neutral background and ink. */ :where(body) { margin: 0; color: var(--text); background: var(--bg); font-size: var(--text-base); line-height: var(--leading-normal); } /* Cool document: retain the existing standalone neutral surface and rhythm. */ .mhp-document--cool { background: var(--surface-cool); color: var(--ink); line-height: var(--leading-compact); } /* Links: inherit context until a named action or navigation component applies. */ :where(a) { color: inherit; text-decoration: none; } /* Lists: navigation and document layouts retain their existing list treatment. */ :where(ul, ol) { list-style: none; } /* Controls: inherit readable system type rather than browser specific fonts. */ :where(button, input, select, textarea) { font: inherit; } /* Textarea geometry: allow vertical resizing within the page layout. */ :where(textarea) { resize: vertical; } /* Plain buttons: remove native chrome before the named component is applied. */ :where(button) { background: var(--transparent); border: 0; cursor: pointer; } /* Media: retain responsive intrinsic dimensions. */ :where(img, video) { max-inline-size: 100%; } /* Headings: document hierarchy uses the existing weight and type scale. */ :where(h1, h2, h3, h4) { font-weight: var(--weight-bold); line-height: inherit; } /* Document headings and matching type utilities: default size on the shared scale. */ :where(h1) { font-size: var(--text-2xl); } /* Document type roles: equal sizes share one definition. */ :where(h2), .mhp-text--heading { font-size: var(--text-heading); } /* Document headings and matching type utilities: default size on the shared scale. */ :where(h3) { font-size: var(--text-subsection); } /* Emphasized heading: keep the explicit larger document role. */ .mhp-type--heading { font-size: var(--text-lg); } /* Document type roles: equal sizes share one definition. */ :where(small), .mhp-type--xs { font-size: var(--text-xs); } /* Supporting document text: compact scale. */ .mhp-type--small, .mhp-footer-text { font-size: var(--text-sm); } /* Body document text: standard scale. */ .mhp-type--body { font-size: var(--text-base); } /* Subsection title: intermediate document scale. */ .mhp-type--title { font-size: var(--text-xl); } /* Strong text: reusable emphasis within document content. */ .mhp-weight--strong { font-weight: var(--weight-semibold); } /* Muted text: readable supporting information. */ .mhp-text--muted { color: var(--text-dim); } /* Success text: feedback after a completed action. */ .mhp-text--success { color: var(--color-success); } /* Error text: feedback for an unsuccessful action. */ .mhp-text--error { color: var(--color-error); } /* Warning text: readable caution without changing the action hierarchy. */ .mhp-text--warning { color: var(--color-warning); } /* Document footer: retain the existing warm neutral palette. */ :where(footer) { background: var(--footer-bg); color: var(--footer-text); border-block-start: var(--line-thin) solid var(--footer-border); } /* Brand wordmark: retain the current bold system font identity. */ .mhp-brand { font-weight: var(--weight-extrabold); font-size: var(--text-xl); color: var(--text); } /* Document headings and matching type utilities: default size on the shared scale. */ .mhp-brand :where(span), .mhp-text--brand { color: var(--magenta); } /* Compact wordmark: narrow layouts retain the existing compact identity. */ .mhp-brand--compact { font-size: var(--brand-compact-size); } /* All keyboard targets: visible focus independent of pointer hover. */ :where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible { outline: var(--focus-width) solid var(--control-focus); outline-offset: var(--focus-offset); } } /* Visibility utilities: a hidden task cannot be reopened by page layout rules. */ :where([hidden], .hidden, .is-hidden) { display: none; } /* Reduced motion: remove document scrolling and decorative animation. */ @media (prefers-reduced-motion: reduce) { /* Every surface: motion preferences override page transitions and animation. */ :where(html) { scroll-behavior: auto !important; } /* Every element: remove nonessential movement, including loading animation. */ :where(*, *::before, *::after) { animation: none !important; transition: none !important; } /* Loading marker: a complete ring remains visible without rotation. */ .mhp-button[aria-busy="true"]::after { border-inline-end-color: currentColor; } } /* Forced colors: keyboard focus uses the selected system palette. */ @media (forced-colors: active) { /* All keyboard targets: a system focus outline survives color substitution. */ :where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible { outline-color: Highlight; } /* All named controls: preserve a system colored boundary. */ :is(.mhp-button, .mhp-input, .mhp-select, .mhp-textarea, .mhp-segment, .mhp-tab, .mhp-chip) { border-color: ButtonText; } /* Selected control: system fill remains different from hover. */ .mhp-segment__input:checked + :where(.mhp-segment), :is(.mhp-segment, .mhp-tab, .mhp-chip, .mhp-nav-item):is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"]), .mhp-toggle__input:checked + :where(.mhp-toggle__track), .mhp-table :where(tr[aria-selected="true"]), .mhp-card:has(> :where(input):checked) { background: Highlight; color: HighlightText; border-color: Highlight; forced-color-adjust: none; } /* Selected photo: a system outline preserves selection without changing normal framing. */ .mhp-image-control[aria-pressed="true"] { outline: var(--line-strong) solid Highlight; outline-offset: var(--space-2xs); } /* Selected toggle thumb: use the system selection ink. */ :where(.mhp-toggle__input:checked) + .mhp-toggle__track::before { background: HighlightText; } /* Disabled control: the system disabled color remains distinct. */ .mhp-segment__input:disabled + :where(.mhp-segment), :is(.mhp-button, .mhp-input, .mhp-select, .mhp-textarea, .mhp-segment, .mhp-tab, .mhp-chip, .mhp-nav-item):is(:disabled, [aria-disabled="true"]), .mhp-card:has(> :where(input):disabled) { color: GrayText; border-color: GrayText; background: Canvas; } /* Disabled toggle: system disabled fill wins over checked selection. */ :where(.mhp-toggle__input:disabled) + .mhp-toggle__track { background: Canvas; border-color: GrayText; } /* Disabled toggle thumb: retain a readable system marker in either position. */ :where(.mhp-toggle__input:disabled) + .mhp-toggle__track::before { background: GrayText; } } /* Document type utilities: existing values shared by prose hooks. */ @layer mhp-base { /* Text white: retain the established document metrics. */ .mhp-text--white { color: var(--white); } /* Text note: retain the established document metrics. */ .mhp-text--note { font-size: var(--text-note); } /* Text caption: retain the established document metrics. */ .mhp-text--caption { font-size: var(--text-caption); } /* Text inverse muted: retain the established document metrics. */ .mhp-text--inverse-muted { color: var(--ink-inverse-muted); } /* Tracking wide: retain the established document metrics. */ .mhp-tracking--wide { letter-spacing: var(--tracking-wide); } /* Text inverse: retain the established document metrics. */ .mhp-text--inverse { color: var(--ink-inverse); } /* Text action: retain the established document metrics. */ .mhp-text--action { font-size: var(--text-button); } /* Text field: retain the established document metrics. */ .mhp-text--field { font-size: var(--text-field); } /* Leading compact: retain the established document metrics. */ .mhp-leading--compact { line-height: var(--leading-compact); } /* Weight bold: retain the established document metrics. */ .mhp-weight--bold { font-weight: var(--weight-bold); } /* Leading snug: retain the established document metrics. */ .mhp-leading--snug { line-height: var(--leading-snug); } /* Tracking nav: retain the established document metrics. */ .mhp-tracking--nav { letter-spacing: var(--tracking-nav); } /* Case upper: retain the established document metrics. */ .mhp-case--upper { text-transform: var(--case-upper); } /* Tracking label: retain the established document metrics. */ .mhp-tracking--label { letter-spacing: var(--tracking-label); } /* Text accent: retain the established document metrics. */ .mhp-text--accent { color: var(--magenta-cta); } /* Weight display: retain the established document metrics. */ .mhp-weight--display { font-weight: var(--weight-extrabold); } /* Text ink: retain the established document metrics. */ .mhp-text--ink { color: var(--text); } /* Text label: retain the established document metrics. */ .mhp-text--label { font-size: var(--text-label); } /* Leading normal: retain the established document metrics. */ .mhp-leading--normal { line-height: var(--leading-normal); } /* Text teal: retain the established document metrics. */ .mhp-text--teal { color: var(--teal-text); } /* Text stage muted: retain the established document metrics. */ .mhp-text--stage-muted { color: var(--surface-dark-text); } /* Text assistance: retain the established document metrics. */ .mhp-text--assistance { font-size: var(--text-assistance); } /* Text brand teal: retain the established document metrics. */ .mhp-text--brand-teal, .mhp-brand--teal :where(span) { color: var(--teal); } /* Face inherit: retain the established document metrics. */ .mhp-face--inherit { font-family: inherit; } /* Text meta: retain the established document metrics. */ .mhp-text--meta { font-size: var(--text-nav); } /* Text summary: retain the established document metrics. */ .mhp-text--summary { font-size: var(--text-summary); } /* Text hero: retain the established document metrics. */ .mhp-text--hero { font-size: var(--text-hero); } /* Tracking heading: retain the established document metrics. */ .mhp-tracking--heading { letter-spacing: var(--tracking-heading); } /* Leading single: retain the established document metrics. */ .mhp-leading--single { line-height: var(--leading-single); } /* Text display: retain the established document metrics. */ .mhp-text--display { font-size: var(--text-display-fixed); } /* Tracking title: retain the established document metrics. */ .mhp-tracking--title { letter-spacing: var(--tracking-title); } /* Weight medium: retain the established document metrics. */ .mhp-weight--medium { font-weight: var(--weight-medium); } /* Text micro: retain the established document metrics. */ .mhp-text--micro { font-size: var(--text-micro); } /* Case natural: retain the established document metrics. */ .mhp-case--natural { text-transform: none; } /* Tracking body: retain the established document metrics. */ .mhp-tracking--body { letter-spacing: var(--tracking-button); } /* Document type roles: equal sizes share one definition. */ .mhp-text--subheading, .mhp-panel-title { font-size: var(--text-edition-heading); } /* Leading relaxed: retain the established document metrics. */ .mhp-leading--relaxed { line-height: var(--leading-relaxed); } /* Leading double: retain the established document metrics. */ .mhp-leading--double { line-height: var(--leading-double); } /* Tracking eyebrow: retain the established document metrics. */ .mhp-tracking--eyebrow { letter-spacing: var(--tracking-eyebrow); } /* Text dialog title: retain the established document metrics. */ .mhp-text--dialog-title { font-size: var(--text-dialog-title); } /* Leading copy: retain the established document metrics. */ .mhp-leading--copy { line-height: var(--leading-copy); } /* Text fine label: retain the established document metrics. */ .mhp-text--fine-label { font-size: var(--text-fine-label); } /* Document text: default font size uses clamp(1.45rem, 3vw, 2.2rem). */ .mhp-title--fluid { font-size: var(--text-fluid); } /* Leading tight: retain the established document metrics. */ .mhp-leading--tight { line-height: var(--leading-tight); } /* Text description: retain the established document metrics. */ .mhp-text--description { font-size: var(--text-description); } /* Weight regular: retain the established document metrics. */ .mhp-weight--regular { font-weight: var(--weight-regular); } /* Tracking normal: retain the established document metrics. */ .mhp-tracking--normal { letter-spacing: var(--border-card-none); } /* Leading reading: retain the established document metrics. */ .mhp-leading--reading { line-height: var(--leading-reading); } /* Face mono: retain the established document metrics. */ .mhp-face--mono { font-family: var(--font-mono); } /* Leading detail: retain the established document metrics. */ .mhp-leading--detail { line-height: var(--leading-detail); } /* Text detail: retain the established document metrics. */ .mhp-text--detail { font-size: var(--text-detail); } /* Text status: retain the established document metrics. */ .mhp-text--status { font-size: var(--text-status); } /* Face code: retain the established document metrics. */ .mhp-face--code { font-family: var(--font-code); } /* Text eyebrow: retain the established document metrics. */ .mhp-text--eyebrow { font-size: var(--text-eyebrow); } /* Tracking badge: retain the established document metrics. */ .mhp-tracking--badge { letter-spacing: var(--tracking-badge); } /* Text page title: retain the established document metrics. */ .mhp-text--page-title { font-size: var(--text-page-title); } /* Leading title: retain the established document metrics. */ .mhp-leading--title { line-height: var(--leading-title); } /* Leading label: retain the established document metrics. */ .mhp-leading--label { line-height: var(--leading-label); } /* Document text: default font size uses clamp(1.5rem, 3.5vw, 2.2rem). */ .mhp-title--article { font-size: var(--text-article); } /* Text section: retain the established document metrics. */ .mhp-text--section { font-size: var(--text-section); } /* Case title: retain the established document metrics. */ .mhp-case--title { text-transform: var(--case-title); } /* Text compact label: retain the established document metrics. */ .mhp-text--compact-label { font-size: var(--text-compact-label); } /* Tracking caption: retain the established document metrics. */ .mhp-tracking--caption { letter-spacing: var(--tracking-caption); } /* Face terminal: retain the established document metrics. */ .mhp-face--terminal { font-family: var(--font-terminal); } /* Leading summary: retain the established document metrics. */ .mhp-leading--summary { line-height: var(--leading-summary); } /* Text relative: retain the established document metrics. */ .mhp-text--relative { font-size: var(--text-relative); } /* Tracking action: retain the established document metrics. */ .mhp-tracking--action { letter-spacing: var(--tracking-action); } /* Face document: retain the established document metrics. */ .mhp-face--document { font-family: var(--font-document); } /* Text document: retain the established document metrics. */ .mhp-text--document { color: var(--ink); } /* Text document muted: retain the established document metrics. */ .mhp-text--document-muted { color: var(--muted); } /* Document text: default font size uses clamp(1.05rem, 1.4vw, 1.25rem). */ .mhp-title--callout { font-size: var(--text-callout); } /* Eyebrow heading: original compact group labels in document navigation. */ .mhp-eyebrow { font-size: var(--text-eyebrow); font-weight: var(--weight-bold); color: var(--text-dim); letter-spacing: var(--tracking-eyebrow); text-transform: var(--case-upper); } /* Footer document links: original underlined legal and contact links. */ :where(.mhp-footer-text, .mhp-footer-caption) a { text-decoration: underline; text-underline-offset: var(--space-2xs); } /* Footer paragraph links: original stronger ink separates links from prose. */ .mhp-footer-text :where(a) { color: var(--footer-link); } /* Footer fine print links: original stronger ink separates links from captions. */ .mhp-footer-caption :where(a) { color: var(--footer-caption-link); } /* Ruled document heading: original section separator above compact lists. */ .mhp-rule-heading { border-block-end: var(--line-thin) solid var(--border); } /* Metric value: original prominent brand colored account totals. */ .mhp-metric { font-size: var(--text-2xl); color: var(--magenta-cta); } /* Display title: original large brand heading and tight rhythm. */ .mhp-display-title { font-size: var(--text-display); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); } /* Large fluid type: reusable display size grows from the narrow screen minimum. */ .mhp-type--fluid-lg { font-size: var(--text-fluid-lg); } /* Medium fluid type: reusable heading size grows more slowly than the large scale. */ .mhp-type--fluid-md { font-size: var(--text-fluid-md); } /* Extra large type: fixed size for prominent headings and short display text. */ .mhp-type--3xl { font-size: var(--text-3xl); } /* Section title: original document emphasis and rhythm. */ .mhp-section-title { font-size: var(--text-section-title); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-heading); color: var(--text); } /* Section title marker: original small brand accent below the title. */ .mhp-section-title::after { background: var(--magenta); border-radius: var(--space-2xs); } /* Lead tagline: original quiet supporting brand text. */ .mhp-tagline { font-size: var(--text-edition-heading); color: var(--text-dim); font-weight: var(--weight-light); letter-spacing: var(--tracking-button); } /* Document canvas: white editorial surface remains independent of controls. */ .mhp-document-surface { background: var(--white); } /* Footer caption: preserve the original fine print and footer links. */ .mhp-footer-caption { font-size: var(--text-caption); color: var(--footer-muted); } /* Compact wordmark: original standalone header size. */ .mhp-brand--small, .mhp-type--lead { font-size: var(--text-md); } /* Document title: strong collection, overview and catalog titles share one type role. */ .mhp-title { font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-heading); } }