/* PaceOut semantic type and surface roles.
 * Tokens live only in paceout-primitives.css. Shared controls live only in
 * paceout-shared-shell.css. This file provides page-level reading hierarchy.
 */
html {
  background: var(--po-ink);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--po-ink);
  color: var(--po-text);
  font-family: var(--po-font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--po-orange);
  color: var(--po-ink);
}

.page-wrap,
.wrap,
.po-page-frame {
  width: min(var(--po-max), calc(100% - 64px));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: var(--po-z-skip);
  top: 12px;
  left: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--po-orange);
  color: var(--po-ink);
  font-weight: var(--po-weight-bold);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--po-duration-micro) var(--po-ease);
}

.skip-link:focus { transform: translateY(0); }

h1,
h2,
h3,
h4 {
  margin-top: 0;
  color: var(--po-white);
  font-weight: var(--po-weight-semibold);
  letter-spacing: -.045em;
  line-height: 1.04;
}

p { color: var(--po-text-soft); }

.section-band--paper h1,
.section-band--paper h2,
.section-band--paper h3,
.section-band--paper h4,
.section-band--warm h1,
.section-band--warm h2,
.section-band--warm h3,
.section-band--warm h4 {
  color: var(--po-paper-text);
}

.section-band--paper p,
.section-band--warm p { color: var(--po-paper-dim); }

.eyebrow,
.po-eyebrow,
.label {
  margin: 0 0 18px;
  color: var(--po-orange);
  font-size: var(--po-font-eyebrow);
  font-weight: var(--po-weight-extrabold);
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.section,
.po-section,
.section-band { padding-block: clamp(48px, 6vw, 88px); }

.section-heading { margin-bottom: 40px; }
.section-heading h2 { margin: 0 0 16px; font-size: clamp(2rem, 4.8vw, 4rem); }
.section-heading > p { max-width: 620px; margin: 0; font-size: 1rem; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--po-white);
  font-size: .93rem;
  font-weight: var(--po-weight-bold);
  text-decoration: none;
}

.text-link span { color: var(--po-orange); transition: transform var(--po-duration-micro) var(--po-ease); }
.text-link:hover span { transform: translateX(3px); }
.section-band--paper .text-link,
.section-band--warm .text-link { color: var(--po-paper-text); }

@media (max-width: 820px) {
  .page-wrap,
  .wrap,
  .po-page-frame { width: min(100% - 40px, 620px); }
  .section,
  .po-section,
  .section-band { padding-block: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}