:root {
  --ppd-cream: #fdf7ee;
  --ppd-cream-deep: #f0e6d7;
  --ppd-linen: #e4dac4;
  --ppd-navy: #1b2845;
  --ppd-navy-dark: #0f1628;
  --ppd-navy-lite: #4c5c7a;
  --ppd-green: #0b5a38;
  --ppd-oxblood: #6e2f2a;
  --ppd-gold: #c19953;
  --ppd-gold-deep: #a07a38;
  --ppd-sage: #93a58a;
  --ppd-display: "Fraunces", serif;
  --ppd-body: "Inter", sans-serif;
  --ppd-mono: "JetBrains Mono", monospace;
  --ppd-rule: 1px solid rgba(27, 40, 69, 0.2);
  --ppd-shadow: 16px 18px 34px rgba(27, 40, 69, 0.13);

  --ink: var(--ppd-navy);
  --ink-soft: var(--ppd-navy-lite);
  --paper: var(--ppd-cream);
  --paper-warm: var(--ppd-cream-deep);
  --surface: var(--ppd-cream);
  --pear: var(--ppd-green);
  --pear-deep: var(--ppd-green);
  --orange: var(--ppd-oxblood);
  --gold: var(--ppd-gold);
  --display: var(--ppd-display);
  --sans: var(--ppd-body);
}

html {
  background: var(--ppd-cream);
}

body {
  color: var(--ppd-navy);
  background: var(--ppd-cream);
  font-family: var(--ppd-body);
}

::selection {
  color: var(--ppd-cream);
  background: var(--ppd-oxblood);
}

a {
  color: inherit;
}

h1,
h2,
h3,
.brand span {
  font-family: var(--ppd-display);
  font-variation-settings: "opsz" 96, "WONK" 0;
  letter-spacing: -0.025em;
}

h1 em {
  color: var(--ppd-oxblood);
  font-weight: inherit;
  font-variation-settings: "opsz" 144, "WONK" 1;
}

.eyebrow,
.hero-kicker,
.guide-number,
.shelf-tag,
.edition-copy > span,
.breadcrumbs,
.trust-line,
.hero-proof,
.hero-caption {
  color: var(--ppd-oxblood);
  font-family: var(--ppd-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

.skip,
.skip-link {
  color: var(--ppd-cream);
  background: var(--ppd-navy);
}

.site-header {
  color: var(--ppd-navy);
  background: rgba(253, 247, 238, 0.97);
  border-bottom: 1px solid var(--ppd-gold);
  box-shadow: none;
  backdrop-filter: none;
}

.brand {
  color: var(--ppd-green);
  font-weight: 600;
  text-decoration: none;
}

.brand img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  object-position: center;
  background: var(--ppd-green);
  border: 1px solid var(--ppd-gold);
  border-radius: 50%;
}

.brand span {
  color: var(--ppd-green);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1;
}

.nav a {
  color: var(--ppd-navy);
  font-family: var(--ppd-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.nav a:hover,
.nav a:focus-visible,
.text-link:hover,
.text-link:focus-visible {
  color: var(--ppd-oxblood);
}

.button,
button.button,
.header-button,
.nav .button {
  min-height: 46px;
  padding: 0.82rem 1.1rem;
  color: var(--ppd-cream);
  background: var(--ppd-navy);
  border: 1px solid var(--ppd-navy);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--ppd-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.035em;
  line-height: 1.25;
  text-transform: lowercase;
}

.button:hover,
.button:focus-visible,
button.button:hover,
button.button:focus-visible,
.nav .button:hover,
.nav .button:focus-visible {
  color: var(--ppd-cream);
  background: var(--ppd-green);
  border-color: var(--ppd-green);
  transform: none;
}

.button.secondary,
.button.ghost,
.hero .button.ghost,
.systems .button,
.life .button {
  color: var(--ppd-navy);
  background: transparent;
  border-color: var(--ppd-navy);
}

.button.secondary:hover,
.button.secondary:focus-visible,
.button.ghost:hover,
.button.ghost:focus-visible,
.hero .button.ghost:hover,
.hero .button.ghost:focus-visible,
.systems .button:hover,
.systems .button:focus-visible,
.life .button:hover,
.life .button:focus-visible {
  color: var(--ppd-cream);
  background: var(--ppd-navy);
  border-color: var(--ppd-navy);
}

.text-link {
  color: var(--ppd-green);
  text-decoration-color: var(--ppd-gold);
  text-underline-offset: 0.28em;
}

.hero,
.guides-hero,
.article-hero {
  color: var(--ppd-navy);
  background: var(--ppd-cream);
  border-bottom: var(--ppd-rule);
}

.hero::before,
.hero-art::before,
.proof-image::before {
  display: none;
}

.home-page .hero {
  border-bottom: 1px solid var(--ppd-gold);
}

.home-page .hero-inner {
  min-height: 660px;
}

.home-page .hero-copy {
  padding-top: 1.25rem;
  border-top: 2px solid var(--ppd-gold);
}

.home-page .hero-kicker {
  color: var(--ppd-green);
}

.home-page .hero-kicker::before {
  width: 1.7rem;
  height: 1px;
  background: var(--ppd-oxblood);
  border-radius: 0;
  box-shadow: none;
}

.home-page h1 {
  max-width: 10ch;
  color: var(--ppd-green);
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 600;
  line-height: 0.9;
}

.home-page .hero-copy > p:not(.hero-kicker) {
  color: var(--ppd-navy-lite);
}

.home-page .hero-proof {
  color: var(--ppd-navy-lite);
}

.home-page .hero-proof li::before {
  width: 0.42rem;
  height: 0.42rem;
  background: var(--ppd-oxblood);
  border-radius: 50%;
}

.home-page .hero-paper {
  padding: 1rem;
  color: var(--ppd-navy);
  background: var(--ppd-cream-deep);
  border: 1px solid var(--ppd-gold);
  box-shadow: var(--ppd-shadow);
  transform: rotate(1.25deg);
}

.home-page .hero-caption {
  color: var(--ppd-oxblood);
}

.hero-grid,
.guides-hero .shell,
.article-hero .shell {
  position: relative;
}

.product-page .hero-grid,
.article-page .article-hero .shell,
.guide-hub .guides-hero .shell {
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.product-page .hero-grid > div,
.article-page .article-hero .shell,
.guide-hub .guides-hero .shell {
  border-top: 2px solid var(--ppd-gold);
  padding-top: 1.4rem;
}

.product-page .hero h1,
.article-page .article-hero h1,
.guide-hub .guides-hero h1 {
  color: var(--ppd-green);
  font-size: clamp(3.1rem, 7vw, 6rem);
  font-weight: 600;
  line-height: 0.94;
}

.lede,
.product-page .hero .lede,
.article-page .article-hero .lede,
.guide-hub .guides-hero .lede {
  color: var(--ppd-navy-lite);
}

.breadcrumbs,
.breadcrumbs a {
  color: var(--ppd-navy-lite);
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
  color: var(--ppd-oxblood);
}

.hero-art,
.proof-image,
.cta-art,
.method-art,
.edition-image {
  background: var(--ppd-cream-deep);
}

.hero-art,
.proof-image {
  border: 1px solid var(--ppd-gold);
  box-shadow: var(--ppd-shadow);
}

.proof-section,
.zones-section,
.article-body,
.intro,
.freebie,
.request {
  color: var(--ppd-navy);
  background: var(--ppd-cream);
}

.proof-section,
.zones-section,
.article-body,
.freebie,
.request {
  border-top: var(--ppd-rule);
}

.proof-copy,
.zones-heading,
.article-content,
.cta-copy {
  color: var(--ppd-navy);
}

.proof-copy h2,
.zones-heading h2,
.method-copy h2,
.files-copy h2,
.cta-copy h2,
.article-content h2,
.article-aside h2,
.intro h2,
.catalog-heading h2,
.freebie h2,
.request h2 {
  color: var(--ppd-navy);
  font-weight: 600;
}

.proof-copy h2::after,
.zones-heading h2::after,
.method-copy h2::after,
.files-copy h2::after,
.cta-copy h2::after,
.article-content h2::after,
.intro h2::after,
.catalog-heading h2::after,
.freebie h2::after,
.request h2::after {
  display: block;
  width: 3.4rem;
  height: 1px;
  margin-top: 0.75rem;
  content: "";
  background: var(--ppd-gold);
}

.zone-grid,
.example-sheet,
.guide-row,
.edition,
.article-aside,
form {
  color: var(--ppd-navy);
  background: var(--ppd-cream);
  border: 1px solid rgba(27, 40, 69, 0.22);
  border-radius: 0;
  box-shadow: none;
}

.zone-list li,
.guide-row,
.file-list li,
.article-content li {
  border-color: rgba(27, 40, 69, 0.2);
}

.zone-list li::marker,
.method-copy li::marker,
.article-content li::marker,
.priority-box li::marker {
  color: var(--ppd-oxblood);
}

.method-section,
.files-section {
  color: var(--ppd-navy);
  background: var(--ppd-cream-deep);
  border-top: 1px solid var(--ppd-gold);
  border-bottom: 1px solid var(--ppd-gold);
}

.method-copy,
.files-copy,
.files-note {
  color: var(--ppd-navy);
}

.method-art img {
  border-color: var(--ppd-cream);
}

.files-copy {
  background: var(--ppd-cream-deep);
  border-right: 1px solid var(--ppd-gold);
}

.file-list li::before {
  color: var(--ppd-oxblood);
}

.files-grid {
  background: transparent;
}

.files-art {
  background: var(--ppd-cream);
}

.cta-section {
  color: var(--ppd-cream);
  background: var(--ppd-navy);
  border-top: 1px solid var(--ppd-gold);
}

.cta-section .cta-copy,
.cta-section .cta-copy h2,
.cta-section .cta-copy p,
.cta-section .eyebrow,
.cta-section .trust-line {
  color: var(--ppd-cream);
}

.cta-section .cta-copy h2::after {
  background: var(--ppd-gold);
}

.cta-section .button {
  color: var(--ppd-navy);
  background: var(--ppd-cream);
  border-color: var(--ppd-cream);
}

.cta-section .button:hover,
.cta-section .button:focus-visible {
  color: var(--ppd-cream);
  background: var(--ppd-green);
  border-color: var(--ppd-green);
}

.guide-list {
  background: var(--ppd-cream);
}

.guide-row:hover,
.guide-row:focus-visible {
  color: var(--ppd-navy);
  background: var(--ppd-cream-deep);
  border-color: var(--ppd-gold);
  transform: none;
}

.guide-number,
.guide-arrow {
  color: var(--ppd-oxblood);
}

.article-content p,
.article-content li,
.article-aside p,
.proof-copy p,
.zones-heading p,
.method-copy li,
.files-note,
.cta-copy p {
  color: var(--ppd-navy-lite);
}

.priority-box {
  color: var(--ppd-navy);
  background: var(--ppd-cream-deep);
  border-top: 2px solid var(--ppd-gold);
}

.article-aside {
  border-top: 2px solid var(--ppd-gold);
}

.intro strong,
.request-note,
.form-heading h3 {
  color: var(--ppd-oxblood);
}

.shelves {
  gap: 1px;
  padding: 1px;
  background: var(--ppd-gold);
}

.shelf,
.shelf.systems,
.shelf.life {
  color: var(--ppd-navy);
  background: var(--ppd-cream);
  border-radius: 0;
}

.shelf.life {
  background: var(--ppd-cream-deep);
}

.shelf::after {
  border-color: rgba(27, 40, 69, 0.12);
  box-shadow: none;
}

.catalog {
  color: var(--ppd-navy);
  background: var(--ppd-cream-deep);
  border-top: 1px solid var(--ppd-gold);
  border-bottom: 1px solid var(--ppd-gold);
}

.catalog-heading p,
.edition-copy p,
.freebie-copy,
.request > .shell > .request-grid > div > p {
  color: var(--ppd-navy-lite);
}

.edition {
  background: var(--ppd-cream);
}

.edition:hover,
.edition:focus-visible {
  box-shadow: var(--ppd-shadow);
  transform: translateY(-2px);
}

.edition-arrow {
  color: var(--ppd-cream);
  background: var(--ppd-green);
}

.freebie-art {
  color: var(--ppd-navy);
  background: var(--ppd-cream-deep);
  border: 1px solid var(--ppd-gold);
  box-shadow: var(--ppd-shadow);
}

.freebie-art p {
  color: var(--ppd-navy);
}

form {
  box-shadow: var(--ppd-shadow);
}

input,
textarea,
select {
  color: var(--ppd-navy);
  background: var(--ppd-cream);
  border-color: var(--ppd-navy);
  border-radius: 0;
}

input::placeholder,
textarea::placeholder {
  color: var(--ppd-navy-lite);
}

.site-footer,
.footer {
  color: var(--ppd-cream);
  background: var(--ppd-navy-dark);
  border-top: 1px solid var(--ppd-gold);
}

.site-footer .brand,
.footer .brand {
  padding: 0.4rem 0.65rem 0.4rem 0.4rem;
  background: var(--ppd-cream);
}

.site-footer .brand span,
.footer .brand span {
  color: var(--ppd-green);
}

.site-footer p,
.footer-meta {
  color: rgba(253, 247, 238, 0.76);
}

.site-footer a:not(.brand),
.footer-meta a {
  color: var(--ppd-cream);
  text-decoration-color: var(--ppd-gold);
}

@media (max-width: 760px) {
  .site-header {
    position: static;
  }

  .brand img {
    width: 44px;
    height: 44px;
  }

  .brand span {
    font-size: 0.98rem;
  }

  .nav {
    border-top-color: rgba(27, 40, 69, 0.18);
  }

  .home-page .hero-inner {
    min-height: 0;
  }

  .home-page h1 {
    font-size: clamp(3.25rem, 16vw, 5.2rem);
  }

  .product-page .hero-grid,
  .article-page .article-hero .shell,
  .guide-hub .guides-hero .shell {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
  }

  .product-page .hero h1,
  .article-page .article-hero h1,
  .guide-hub .guides-hero h1 {
    font-size: clamp(2.9rem, 13vw, 4.6rem);
  }

  .site-footer .brand,
  .footer .brand {
    width: fit-content;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}