/* Hallmark · shape: Offer-led shop page (home), Long Document (guides) · genre: editorial · theme: brand · redesign: full
 * paper: oklch(99.5% 0.005 78) · accent: oklch(53.6% 0.125 244) · display: Switzer 500 · body: Switzer 400 · hero: Counter (/), Banner (/pbs-composition/, /pbs-vs-dpbs/, /pbs-uses/, /pbs-storage-shelf-life/), Ledge (/404) · nav: edge-aligned bar, serif wordmark, four guide links and a quiet Buy action, a disclosure menu under 60rem · footer: mast, the wordmark over two link lists and the operator paragraph · signature: the price list set as the hero beside the vial
 * axes: light/grotesk-sans/cool · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: P, a reagent page argues little; led with the lot's own lab numbers instead of adjectives */
/* Hallmark · waive 78 · guide h2s at 31px inside a 70ch prose column · the four PBS guides are Long Document reference articles, heads as inline section marks */
/* Hallmark · waive 44c · Banner posture, guide banners end at 452 to 540px of a 900px screen · each PBS guide is a reference article that starts above the fold */
/* Hallmark · waive 44a · Ledge posture, the 404 head rests at the base of its screen · a missing page should send the visitor straight back to the PBS page */
/* Hallmark · dismissed 77 · the PBS guides are Long Document articles: banner, the article with its buy aside, the buy band, the footer */
/* Hallmark · dropped #lab · the old hero's second button jumped to the lab section, the new hero keeps one action and the lab numbers follow directly below */
/* Hallmark · reworded "Buy phosphate buffered saline" to "the hero price table" · 58, the offer moved into the hero */
/* Hallmark · reworded "Tested, lot by lot" to "Lab results for lot PBS102607-100B" · 38i named the italic word */
/* Hallmark · reworded "What researchers use it for" to "Rinse, dilute, wash, stain" · the head now names the four uses */
/* Hallmark · reworded "All PBS uses" to "All uses, and when to skip PBS" · 3, the dark tile became a text link */
/* Hallmark · reworded "What is phosphate buffered saline?" to "the FAQ question of the same words" · 58, the explainer folded into the FAQ */
/* Hallmark · reworded "Questions, answered" to "Ordering the 10 mL vial" · 38i named the italic word */
/* Hallmark · reworded "Ready when your bench is." to "Order from lot PBS102607-100B" · 38i named the italic word */
/* Hallmark · reworded "PBS vs DPBS: what's the difference?" to "How PBS and DPBS differ" · 38i named the italic word and the colon title */
/* Hallmark · reworded "PBS composition & recipe" to "PBS composition and recipe" · 38i named the italic word */
/* Hallmark · reworded "PBS storage & shelf life" to "PBS storage and shelf life" · 38i named the italic word */
/* Hallmark · reworded "FAQ" to "Questions" · 67, a capitals label */
/* Hallmark · reworded "Guides and Bluum Peptides footer h4" to "footer paragraphs" · F21, heading levels step one at a time */
/* Hallmark · dropped Tissue handling, Guides, Bluum Peptides · the home grid holds four uses under 58 with tissue handling kept on /pbs-uses/, and the footer column titles became paragraphs for heading order under F21 */
/* Hallmark · dropped pbs-800.webp, #buy · the hero now uses pbs-1200.webp and the price table replaces the old #buy section */
/* Hallmark · dismissed 25 · .act p is a two-line delivery caption beside the button and .statement p is one sentence set at section size */
@import url("./tokens.css");
@import url("./base.css");

.skip { position: absolute; left: var(--space-md); top: var(--space-xs); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-btn); transform: translateY(-200%); z-index: var(--z-tooltip); }
.skip:focus-visible { transform: none; }

/* nav */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; }
.mark { font-family: var(--font-outlier); font-style: italic; font-size: var(--text-lg); color: var(--color-ink); text-decoration: none; white-space: nowrap; letter-spacing: -0.01em; }
.links { display: flex; align-items: center; gap: var(--space-lg); }
.links a:not(.btn) { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; }
.links a:not(.btn):hover { color: var(--color-ink); text-decoration: underline; }
.links a[aria-current="page"] { color: var(--color-ink); text-decoration: underline; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; padding-inline: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-btn); font-size: var(--text-md); }
.menu summary::-webkit-details-marker { display: none; }
.menu ul { position: absolute; right: 0; top: calc(100% + var(--space-xs)); margin: 0; padding: var(--space-xs); list-style: none; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-btn); min-width: 220px; z-index: var(--z-dropdown); }
.menu li a { display: block; padding: var(--space-sm) var(--space-md); text-decoration: none; color: var(--color-ink); }

/* controls: one filled primary, one quiet outline */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-inline: var(--space-lg); border-radius: var(--radius-btn); border: var(--rule-hair) solid var(--color-ink); font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn-primary { background: var(--color-ink); color: var(--color-paper); }
.btn-primary:hover { background: var(--color-ink-2); border-color: var(--color-ink-2); }
.btn-quiet { background: var(--color-paper); color: var(--color-ink); min-height: 44px; }
.btn-quiet:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.on-ink .btn-primary { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper); }
.on-ink .btn-primary:hover { background: var(--color-paper-2); border-color: var(--color-paper-2); }
.on-ink :focus-visible { outline-color: var(--color-mist); }
.text-link { color: var(--color-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-muted); }
.text-link:hover { text-decoration-color: var(--color-accent); }
a:active { opacity: 0.8; }

/* hero: Counter, the price list is the action */
.hero .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; min-height: calc(100svh - 73px); padding-block: var(--space-2xl); }
.hero h1 { max-width: 12ch; }
.hero .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.prices { width: 100%; max-width: 30rem; margin-top: var(--space-xl); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prices th, .prices td { text-align: left; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-md); }
.prices thead th { font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; padding-top: 0; }
.prices tbody th { font-weight: 500; }
.prices td:last-child, .prices th:last-child { text-align: right; color: var(--color-ink-2); }
.prices s { color: var(--color-muted); font-size: var(--text-sm); margin-left: var(--space-xs); }
.act { display: flex; align-items: center; gap: var(--space-lg); margin-top: var(--space-lg); flex-wrap: wrap; }
.act p { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 32ch; }
.vial { justify-self: start; width: min(100%, 640px); aspect-ratio: 1 / 1; max-height: 72svh; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-3); margin: 0; }
.vial img { width: 100%; height: 100%; object-fit: cover; }

/* sections */
.sec { padding-block: var(--section-gap); }
.sec-s { padding-block: var(--section-gap-s); }
.sec-l { padding-block: var(--section-gap-l); }
.lab { padding-top: var(--space-2xl); }
.well { background: var(--color-paper-2); }
.ink { background: var(--color-ink); color: var(--color-paper); }
.head { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.head .lead { color: var(--color-ink-2); }

/* lab figures */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.figures div { display: flex; flex-direction: column-reverse; gap: var(--space-xs); padding-inline: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.figures div:first-child { padding-left: 0; border-left: 0; }
.figures dd { margin: 0; font-size: var(--text-display-s); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.figures dt { color: var(--color-ink-2); font-size: var(--text-md); }
.caption { margin-top: var(--space-2xl); display: flex; gap: var(--space-lg); flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-ink-2); }

/* spec rows */
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.split .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.rows { margin: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); }
.rows dt, .rows dd { margin: 0; padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.rows dt { font-weight: 500; padding-right: var(--space-lg); }
.rows dd { color: var(--color-ink-2); }

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

/* statement */
.statement { margin-top: var(--space-3xl); padding-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.statement p { font-size: var(--text-section); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1.1; max-width: 28ch; text-wrap: balance; }
.statement .text-link { display: inline-block; margin-top: var(--space-xl); }

/* recipe table */
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th, .table td { text-align: left; padding: var(--space-md) var(--space-lg) var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.table thead th { font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; white-space: nowrap; }
.table tbody th { font-weight: 500; }
.table td { color: var(--color-ink-2); }
.scroll { overflow-x: auto; }

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

/* close band */
.close .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
.close h2 { color: var(--color-paper); }
.close p { color: var(--color-paper-3); margin-top: var(--space-md); }
.close a:not(.btn) { color: var(--color-paper); }

/* guides */
.banner { padding-block: var(--space-3xl) var(--space-2xl); background: var(--color-paper-2); }
.lost { min-height: calc(100svh - 73px); display: grid; align-content: end; }
.crumbs { font-size: var(--text-sm); color: var(--color-ink-2); margin-bottom: var(--space-lg); }
.crumbs a { color: var(--color-ink-2); }
.banner .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.article { padding-block: var(--space-2xl) var(--section-gap); }
.article .container { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-3xl); }
.prose { max-width: 70ch; line-height: 1.7; }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-2xl); margin-bottom: var(--space-md); max-width: none; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--color-ink-2); }
.prose p + p, .prose p + .scroll, .prose .scroll + p { margin-top: var(--space-md); }
.prose ul { padding-left: var(--space-lg); margin: var(--space-md) 0 0; }
.prose li + li { margin-top: var(--space-xs); }
.prose strong { color: var(--color-ink); font-weight: 500; }
.prose .table { margin-top: var(--space-md); }
.note { margin-top: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-btn); font-size: var(--text-sm); }
.aside { position: sticky; top: 96px; align-self: start; border-top: 2px solid var(--color-ink); padding-top: var(--space-lg); }
.aside h2 { font-size: var(--text-title); }
.aside dl { margin: var(--space-lg) 0; display: grid; grid-template-columns: auto minmax(0, 1fr); }
.aside dt, .aside dd { margin: 0; padding-block: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.aside dd { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.aside .btn { width: 100%; }
.next { margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.next li { border-top: var(--rule-hair) solid var(--color-rule); }
.next li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.next a { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-md); text-decoration: none; color: var(--color-ink); font-weight: 500; }
.next a span { color: var(--color-ink-2); font-weight: 400; }
.next a:hover { text-decoration: underline; }

/* footer: mast */
.foot { background: var(--color-paper-2); padding-block: var(--space-3xl) var(--space-xl); margin-top: 0; }
.foot .mark { font-size: var(--text-2xl); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--gap-columns); margin-top: var(--space-xl); }
.foot-grid p { color: var(--color-ink-2); font-size: var(--text-sm); }
.foot-grid p + p { margin-top: var(--space-sm); }
.foot-h { font-weight: 500; color: var(--color-ink); font-size: var(--text-sm); }
.foot ul { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.foot li + li { margin-top: var(--space-xs); }
.foot li a { color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; }
.foot li a:hover { color: var(--color-ink); text-decoration: underline; }
.ruo { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 65ch; }
.ruo strong { color: var(--color-ink); font-weight: 500; }
.legal { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); max-width: none; }

@media (max-width: 60rem) {
  .links a:not(.btn) { display: none; }
  .menu { display: block; }
  .hero .container, .head, .split, .close .container, .article .container, .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .hero .container { min-height: 0; gap: var(--space-xl); }
  .vial { justify-self: stretch; width: 100%; max-height: none; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .figures div:nth-child(3) { padding-left: 0; border-left: 0; }
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .uses li { min-height: 0; }
  .rows { grid-template-columns: minmax(0, 1fr); }
  .rows dd { border-top: 0; padding-top: 0; }
  .aside { position: static; }
}
@media (max-width: 40rem) {
  .uses { grid-template-columns: minmax(0, 1fr); }
  .links > .btn { display: none; }
  .mark { font-size: var(--text-sm); }
  .foot .mark { font-size: var(--text-xl); }
  .nav .container { gap: var(--space-sm); }
}