/**
 * Peptogenesis V2 — base layer.
 * Reset, document defaults, typography, surfaces, containers, utilities, focus, reveal motion.
 * Consumes tokens.css only.
 */

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--pg-bg);
	color: var(--pg-fg);
	font-family: var(--pg-font-body);
	font-size: var(--pg-fs-body);
	line-height: var(--pg-lh-normal);
	font-weight: var(--pg-fw-regular);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
	min-height: 100vh;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--pg-link); text-decoration: none; transition: color var(--pg-d-fast) var(--pg-ease-out); }
a:hover { color: var(--pg-link-hover); }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--pg-line); margin: var(--pg-s-8) 0; }
[hidden] { display: none !important; }
::selection { background: var(--pg-gold-500); color: var(--pg-navy-950); }

/* ----------------------------------------------------------- typography */
h1, h2, h3, h4, h5, h6, .pg-h1, .pg-h2, .pg-h3, .pg-h4 {
	font-family: var(--pg-font-display);
	font-weight: var(--pg-fw-bold);
	line-height: var(--pg-lh-snug);
	letter-spacing: var(--pg-ls-heading);
	color: var(--pg-fg);
	margin: 0 0 0.5em;
	text-wrap: balance;
}
h1, .pg-h1 { font-size: var(--pg-fs-h1); font-weight: var(--pg-fw-extrabold); line-height: var(--pg-lh-tight); letter-spacing: var(--pg-ls-display); }
h2, .pg-h2 { font-size: var(--pg-fs-h2); font-weight: var(--pg-fw-extrabold); line-height: 1.1; }
h3, .pg-h3 { font-size: var(--pg-fs-h3); }
h4, .pg-h4 { font-size: var(--pg-fs-h4); }
h5 { font-size: var(--pg-fs-body); }
h6 { font-family: var(--pg-font-mono); font-size: var(--pg-fs-micro); letter-spacing: var(--pg-ls-caps); text-transform: uppercase; font-weight: var(--pg-fw-medium); }
.pg-display { font-family: var(--pg-font-display); font-size: var(--pg-fs-display); font-weight: var(--pg-fw-extrabold); line-height: 0.98; letter-spacing: var(--pg-ls-display); }
p { margin: 0 0 1em; color: var(--pg-fg-2); }
p:last-child { margin-bottom: 0; }
.pg-lead { font-size: var(--pg-fs-lead); line-height: var(--pg-lh-relaxed); color: var(--pg-fg-2); }
.pg-small, small { font-size: var(--pg-fs-sm); }
.pg-mono { font-family: var(--pg-font-mono); font-feature-settings: "tnum" 1; }
strong, b { font-weight: var(--pg-fw-semibold); color: var(--pg-fg); }
em { font-style: italic; }
.pg-eyebrow {
	display: inline-flex; align-items: center; gap: var(--pg-s-3);
	font-family: var(--pg-font-mono); font-size: var(--pg-fs-micro); font-weight: var(--pg-fw-medium);
	letter-spacing: var(--pg-ls-caps); text-transform: uppercase; color: var(--pg-accent-fg); margin: 0 0 var(--pg-s-4);
}
.pg-eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }
.pg-eyebrow--plain::before { display: none; }
.pg-section-head { max-width: 720px; margin-bottom: var(--pg-s-10); }
.pg-section-head--center { margin-inline: auto; text-align: center; }
.pg-section-head--center .pg-eyebrow { justify-content: center; }
.pg-section-head h2 { margin-bottom: var(--pg-s-4); }
.pg-section-head .pg-lead { margin: 0; }

/* WordPress block typography defaults on our surfaces */
.wp-block-heading { color: var(--pg-fg); }
.has-text-align-center { text-align: center; }

p.is-style-pg-eyebrow, .is-style-pg-eyebrow {
	font-family: var(--pg-font-mono); font-size: var(--pg-fs-micro); letter-spacing: var(--pg-ls-caps); text-transform: uppercase; color: var(--pg-accent-fg); font-weight: var(--pg-fw-medium);
}

/* ------------------------------------------------------------- surfaces */
.pg-surface-light { background: var(--pg-bg); color: var(--pg-fg); }
.pg-surface-dark { background: var(--pg-bg); color: var(--pg-fg); }
.pg-surface-deep { background: var(--pg-navy-950); }
.pg-surface-white { background: var(--pg-white); }

/* ----------------------------------------------------------- containers */
.pg-container, .pg-container--wide, .pg-container--narrow, .pg-container--text {
	width: 100%; margin-inline: auto; padding-inline: var(--pg-gutter);
}
.pg-container { max-width: calc(var(--pg-container) + var(--pg-gutter) * 2); }
.pg-container--wide { max-width: calc(var(--pg-container-wide) + var(--pg-gutter) * 2); }
.pg-container--narrow { max-width: calc(var(--pg-container-narrow) + var(--pg-gutter) * 2); }
.pg-container--text { max-width: calc(var(--pg-container-text) + var(--pg-gutter) * 2); }
.pg-section { padding-block: var(--pg-section); position: relative; }
/* section language (from the hero, restrained): a champagne rule where two sections of the same surface meet, a slightly deeper
   navy step for a dark section that follows a dark one, and the eyebrow's line drawing in as its section reveals */
.pg-section--rule::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--pg-gold-line-strong) 28%, var(--pg-gold-line-strong) 72%, transparent 100%); pointer-events: none; }
.pg-surface-light.pg-section--rule::before, .pg-section--rule.pg-surface-white::before { background: linear-gradient(90deg, transparent 0%, var(--pg-gold-line) 28%, var(--pg-gold-line) 72%, transparent 100%); }
.pg-section--deep { background: var(--pg-navy-950); }
.pg-section--tight { padding-top: calc(var(--pg-section) * .72); }
[data-reveal] .pg-eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform var(--pg-d-cine) var(--pg-ease-out) 160ms; }
[data-reveal].is-in .pg-eyebrow::before, .no-js .pg-eyebrow::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { [data-reveal] .pg-eyebrow::before { transform: scaleX(1); transition: none; } }
.pg-section--sm { padding-block: var(--pg-section-sm); }
.pg-section--flush-top { padding-top: 0; }
.pg-section--flush-bottom { padding-bottom: 0; }
main.wp-block-group > .wp-block-group.is-layout-constrained { padding-inline: 0; }

/* Constrained block content inside page templates gets the site gutter. */
.pg-page-body { padding-block: var(--pg-section); }

/* ----------------------------------------------------------------- grid */
.pg-grid { display: grid; gap: var(--pg-s-6); grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
@media (min-width: 782px) { .pg-grid { --cols: var(--cols-md, 2); } }
@media (min-width: 1024px) { .pg-grid { --cols: var(--cols-lg, 3); } }
@media (min-width: 1280px) { .pg-grid { --cols: var(--cols-xl, var(--cols-lg, 3)); } }

/* ---------------------------------------------------------------- focus */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 2px solid var(--pg-focus);
	outline-offset: 3px;
	border-radius: var(--pg-r-xs);
}
.skip-link { position: absolute; left: var(--pg-s-4); top: -100px; z-index: 100000; background: var(--pg-gold-500); color: var(--pg-navy-950); padding: var(--pg-s-3) var(--pg-s-5); border-radius: var(--pg-r-sm); font-weight: var(--pg-fw-semibold); }
.skip-link:focus { top: var(--pg-s-4); }
.screen-reader-text { 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; }

/* ------------------------------------------------------------ utilities */
.pg-hide-mobile { display: none !important; }
@media (min-width: 782px) { .pg-hide-mobile { display: revert !important; } .pg-hide-desktop { display: none !important; } }
.pg-text-center { text-align: center; }
.pg-muted { color: var(--pg-fg-3); }
.pg-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-flow > * + * { margin-top: var(--flow, var(--pg-s-4)); }
.pg-cluster { display: flex; flex-wrap: wrap; gap: var(--pg-s-3); align-items: center; }
.pg-stack { display: flex; flex-direction: column; gap: var(--pg-s-4); }
.pg-row { display: flex; align-items: center; gap: var(--pg-s-4); }
.pg-hairline { height: 1px; background: var(--pg-line); border: 0; margin: 0; }
.pg-gold-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--pg-gold-line-strong), transparent); border: 0; }

/* ------------------------------------------------------- reveal motion */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--pg-d-cine) var(--pg-ease-out), transform var(--pg-d-cine) var(--pg-ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }
[data-reveal-group] > * { --i: 0; }
[data-reveal-group] > :nth-child(2) { --reveal-delay: 70ms; }
[data-reveal-group] > :nth-child(3) { --reveal-delay: 140ms; }
[data-reveal-group] > :nth-child(4) { --reveal-delay: 210ms; }
[data-reveal-group] > :nth-child(5) { --reveal-delay: 280ms; }
[data-reveal-group] > :nth-child(6) { --reveal-delay: 350ms; }
[data-reveal-group] > :nth-child(n+7) { --reveal-delay: 400ms; }

@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; }
	[data-reveal] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------- body state classes */
body.pg-lock { overflow: hidden; }

/* Root block gap: header, main, and footer butt together; sections manage their own spacing. */
.wp-site-blocks > * + * { margin-block-start: 0; }
/* Sections inside main carry their own padding; WooCommerce's (usually empty) notice block must not add a gap. */
main.pg-main.is-layout-flow > * + * { margin-block-start: 0; }
main.pg-main > .wc-block-store-notices:empty { display: none; }