/* Hallmark · shape: Stat-Led · genre: editorial · theme: brand · redesign: full · brand: Bluum Peptides (spec 2026-11-10) · draw: 0177ff
 * paper: oklch(99.2% 0.005 78) · accent: oklch(53.6% 0.125 244), signal only; buttons in the brand charcoal oklch(24.8% 0.006 34) · display: BluumSwitzer · body: BluumSwitzer · hero: Poster · nav: banner over a sticky bar · footer: statement · signature: the per-vial price set large in Bluum's Baskerville italic over Bluum's blue vial photograph
 * axes: light/grotesk-sans/neutral · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: P, a buying page has little to argue; it argues with the lab report itself, shown as the document */
/* Hallmark · reworded "Where to buy BAC water: your options" to "Where to buy BAC water" · 19 names the colon title */
/* Hallmark · reworded "2–8 °C" ranges to "2 to 8 °C" and dropped the em dash from the hero button · 19 names en and em dashes */
/* Hallmark · dismissed 58 · the words are the owner's search copy for the exact-match query; redesign keeps them, and the FAQ answers sit collapsed */
/* Hallmark · draw swap · the close is a Band of Bluum blue holding the offer again, so the brand colour returns after the hero; the finish review asked for it */
/* Hallmark · hero-review: fix · 5 findings · 4 resolved 1 kept (headline is the exact-match query the domain targets) */
/* Hallmark · finish-review: subagent · fix · 6 findings · 6 resolved · gap: none */
@font-face { font-family: "BluumSwitzer"; src: url("switzer.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("baskerville-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(99.2% 0.005 78); --color-paper-2: oklch(94.4% 0.007 248); --color-paper-3: oklch(87.9% 0.027 241);
  --color-ink: oklch(24.8% 0.006 34); --color-ink-2: oklch(38% 0.007 40); --color-muted: oklch(48% 0.008 49); --color-ink-hover: oklch(34% 0.008 34);
  --color-rule: oklch(86% 0.008 60); --color-rule-strong: oklch(70% 0.008 60); --color-on-ink-muted: oklch(82% 0.008 60);
  --color-accent: oklch(53.6% 0.125 244); --color-accent-ink: oklch(99.2% 0.005 78); --color-button: oklch(24.8% 0.006 34); --color-button-ink: oklch(99.2% 0.005 78); --color-focus: oklch(53.6% 0.125 244); --color-focus-on-ink: oklch(80% 0.09 241);
  --font-display: "BluumSwitzer", ui-sans-serif, system-ui, sans-serif; --font-body: "BluumSwitzer", ui-sans-serif, system-ui, sans-serif; --font-outlier: "Libre Baskerville", Georgia, serif;
  --radius-card: 16px; --radius-control: 13px; --display-weight: 500; --body-weight: 400; --bar-h: 64px; --radius-pill: 999px; --rule-hair: 1px; --shadow-card: none;
  --tracking-display: -0.04em;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

body { font-weight: var(--body-weight); letter-spacing: -0.01em; }
a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--color-accent); }
a:active { color: var(--color-ink-2); }
.section { padding-block: var(--section-gap); }
.section + .section { border-top: var(--rule-hair) solid var(--color-rule); }
.section.tight-top { padding-top: var(--section-gap-s); }
.section.loose { padding-block: var(--section-gap-l); }
.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.head p { color: var(--color-ink-2); }
.muted { color: var(--color-muted); }

/* chrome */
.banner { background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); }
.banner .container { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); }
.banner p { color: var(--color-on-ink-muted); }
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--bar-h); }
.logo { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--color-ink); font-size: var(--text-sm); white-space: nowrap; }
.logo img { height: 26px; width: auto; }
.logo span { padding-left: var(--space-sm); border-left: var(--rule-hair) solid var(--color-rule-strong); line-height: 1.2; }
.bar nav { display: flex; align-items: center; gap: var(--space-lg); }
.bar nav .link { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; transition: color var(--dur-micro) var(--ease-out); }
.bar nav .link:hover { color: var(--color-ink); text-decoration: underline; }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding-inline: var(--space-lg); border-radius: var(--radius-control); background: var(--color-button); color: var(--color-button-ink); font-weight: var(--display-weight); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); color: var(--color-button-ink); }
.btn.quiet { min-height: 44px; padding-inline: var(--space-md); background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-ink); font-size: var(--text-sm); }
.btn.quiet:hover { background: var(--color-paper-2); }
.textlink { font-weight: var(--display-weight); white-space: nowrap; }

/* hero: poster */
.hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: calc(100dvh - var(--bar-h) - var(--space-2xl)); background: var(--color-paper-3); }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
.hero .container { padding-block: var(--space-3xl) var(--space-2xl); }
.hero-copy { display: grid; gap: var(--space-lg); max-width: 640px; }
.hero h1 { max-width: 11ch; line-height: 0.98; }
.hero .lead { color: var(--color-ink-2); max-width: 36ch; }
.buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) var(--space-xl); margin-top: var(--space-sm); }
.price-fig { display: block; font-family: var(--font-outlier); font-style: italic; font-size: clamp(4rem, 6vw + 1rem, 7rem); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price-fig small { display: block; margin-top: var(--space-xs); font-family: var(--font-body); font-style: normal; font-size: var(--text-sm); letter-spacing: 0; color: var(--color-ink-2); }
.price-link { display: grid; order: -1; color: var(--color-ink); text-decoration: none; }
.price-link:hover .per { text-decoration: underline; }
.per { display: block; margin-top: var(--space-xs); font-size: var(--text-md); color: var(--color-ink); }

/* splits */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.split.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.media img { width: 100%; border-radius: min(1vw, var(--radius-card)); }
.media.sticky { position: sticky; top: calc(var(--bar-h) + var(--space-lg)); }
figure { margin: 0; }
figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.doc img { box-shadow: 0 0 0 var(--rule-hair) var(--color-rule); }

/* tables and lists */
table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
th, td { text-align: left; padding: var(--space-md) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
th:first-child, td:first-child { padding-left: 0; }
thead th { font-size: var(--text-sm); font-weight: var(--display-weight); color: var(--color-ink-2); white-space: nowrap; }
tbody th { font-weight: var(--display-weight); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tablewrap { overflow-x: auto; }
.packs { margin-bottom: var(--space-lg); }
.packs td.save { color: var(--color-muted); }
.offer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.offer-note { color: var(--color-ink-2); max-width: 60ch; }
.specs { margin-top: var(--space-2xl); }
.specs h3 { margin-bottom: var(--space-md); }
dl.facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap-columns); margin: 0; }
dl.facts div { padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
dl.facts dt { font-size: var(--text-sm); color: var(--color-muted); }
dl.facts dd { margin: 0; }

/* rows */
.rows { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); }
.rows .head { margin-bottom: 0; align-content: start; }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.row:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.row p { color: var(--color-ink-2); }
.checks { margin-top: var(--space-2xl); padding-top: var(--space-xl); }
.checks h3 { margin-bottom: var(--space-xl); font-size: var(--text-3xl); max-width: 24ch; }
.checks ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); margin: 0 0 var(--space-lg); padding: 0; list-style: none; }
.checks li { padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }
.checks li strong { display: block; color: var(--color-ink); font-weight: var(--display-weight); }

/* lab */
.lab-links { margin-top: var(--space-lg); }

/* compare */
.def { display: grid; gap: var(--space-md); }
.def p:not(.lead) { color: var(--color-ink-2); }
.close-offer p.price-link { color: var(--color-ink); }
.compare { margin-top: var(--space-2xl); }
.compare h3 { margin-bottom: var(--space-md); }
.compare td, .compare th { width: 36%; }
.compare td:first-child, .compare th:first-child { width: 28%; }
.aside-note { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 70ch; }

/* storage */
.care { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.care li { display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.care p { color: var(--color-ink-2); }

/* faq */
details { border-top: var(--rule-hair) solid var(--color-rule); }
details:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
summary { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); font-size: var(--text-lg); font-weight: var(--display-weight); cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-weight: var(--body-weight); color: var(--color-muted); transition: transform var(--dur-short) var(--ease-out); }
details[open] summary::after { transform: rotate(45deg); }
summary:hover { color: var(--color-ink-2); }
details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }

/* close: the offer again */
.close-band { background: var(--color-paper-3); }
.section + .close-band { border-top: 0; }
.close-offer { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: var(--space-3xl); }
.close-offer h2 { max-width: 20ch; }
.close-offer p { color: var(--color-ink-2); margin-top: var(--space-xs); }
.close-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-lg) var(--space-xl); }
.ruo { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-strong); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 90ch; }

/* footer: statement */
footer { background: var(--color-ink); color: var(--color-paper); padding-block: var(--section-gap-s) var(--space-2xl); }
footer .statement { font-size: var(--text-section); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1.05; max-width: 22ch; text-wrap: balance; }
footer .links a { white-space: nowrap; }
footer .links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); margin-top: var(--space-2xl); }
footer a { color: var(--color-paper); }
footer a:active { color: var(--color-on-ink-muted); }
footer :focus-visible { outline-color: var(--color-focus-on-ink); }
footer .legal { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink-2); font-size: var(--text-sm); color: var(--color-on-ink-muted); display: grid; gap: var(--space-xs); }
footer .legal p { max-width: 72ch; }
.notfound { padding-block: var(--section-gap); }
.notfound p { margin-top: var(--space-lg); }

@media (max-width: 60rem) {
  .bar nav .link { display: none; }
  .logo span { display: none; }
  .hero { display: block; min-height: 0; }
  .hero-media { position: static; z-index: auto; aspect-ratio: 800 / 812; max-height: 34svh; width: 100%; }
  .hero .container { padding-block: var(--space-lg) var(--space-xl); }
  .hero-copy { gap: var(--space-md); }
  .hero h1 { font-size: clamp(2.5rem, 9vw, 3.5rem); }
  .buy-row { gap: var(--space-md) var(--space-lg); margin-top: 0; }
  .price-fig { font-size: clamp(3rem, 12vw, 4rem); }
  .split, .split.rev, .split.even, .rows, .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .row { gap: var(--space-xs); }
  .media.sticky { position: static; }
  .rev .media { order: 2; }
  .close-offer { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .close-buy { justify-content: flex-start; }
  .care { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .checks ul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .banner p + p { display: none; }
  dl.facts, .checks ul, .care { grid-template-columns: minmax(0, 1fr); }

  .close-buy { flex-wrap: wrap; gap: var(--space-lg); }
}