.pst-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pst-cta-gap);
  width: min(100%, 20.75rem);
  min-height: var(--pst-cta-min-height);
  max-width: 100%;
  padding: 0 var(--pst-cta-padding-inline);
  border: 1px solid transparent;
  font-family: var(--pst-font-body);
  font-size: var(--pst-cta-font-size);
  font-weight: var(--pst-cta-font-weight);
  line-height: 1;
  letter-spacing: var(--pst-cta-tracking);
  text-transform: none;
  white-space: nowrap;
  transition:
    background-color var(--pst-motion-fast) var(--pst-ease-standard),
    border-color var(--pst-motion-fast) var(--pst-ease-standard),
    color var(--pst-motion-fast) var(--pst-ease-standard);
}

.pst-cta::after {
  content: "";
  display: inline-block;
  flex: 0 0 var(--pst-cta-rule-width);
  width: var(--pst-cta-rule-width);
  height: 1px;
  background: currentColor;
  opacity: 0.9;
}

.pst-cta--primary {
  background: var(--pst-color-tally);
  border-color: var(--pst-cta-border-primary);
  color: var(--pst-color-white);
}

.pst-cta--primary:hover {
  background: var(--pst-color-tally-bright);
}

.pst-cta--inverse {
  background: transparent;
  border-color: var(--pst-cta-border-inverse);
  color: var(--pst-color-ivory);
}

.pst-cta--inverse:hover {
  background: var(--pst-color-ivory);
  color: var(--pst-color-tally);
}

.pst-cta:focus-visible {
  outline: var(--pst-focus-width) solid currentColor;
  outline-offset: var(--pst-focus-offset);
}

@media (max-width: 479.98px) {
  .pst-cta {
    min-height: 3.125rem;
    gap: 0.625rem;
    padding-inline: 1.125rem;
    font-size: 0.71875rem;
    letter-spacing: 0.14em;
  }

  .pst-cta::after {
    flex-basis: 0.875rem;
    width: 0.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pst-cta { transition: none; }
}

.pst-nav-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  font-family: var(--pst-font-body);
  font-size: var(--pst-type-utility);
  font-weight: var(--pst-weight-semibold);
  line-height: var(--pst-leading-utility);
  letter-spacing: var(--pst-tracking-utility);
  text-transform: uppercase;
  transition: color var(--pst-motion-fast) var(--pst-ease-standard);
}

.pst-nav-control::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  bottom: 0.375rem;
  left: 0.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.42;
  transition: opacity var(--pst-motion-fast) var(--pst-ease-standard);
}

.pst-nav-control:hover::after,
.pst-nav-control:focus-visible::after { opacity: 1; }

.pst-nav-control:focus-visible {
  outline: var(--pst-focus-width) solid currentColor;
  outline-offset: var(--pst-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  .pst-nav-control,
  .pst-nav-control::after { transition: none; }
}

/* ---------- Global navigation: header control + site drawer ---------- */
/*
 * Shared chrome for every pst436 surface. The anatomy is canonical here; only
 * the surface colour is context-specific, per the Review 32 component audit:
 * "Menu sits over the hero; Close sits in the black drawer." A page family
 * that needs a different Menu colour overrides `.menu-btn` in its own sheet.
 */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pst-space-4);
}

.site-header > * { pointer-events: auto; }

.menu-btn {
  color: var(--pst-color-ivory);
  background: rgba(14, 12, 9, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--pst-radius-none);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.72);
  cursor: pointer;
}

.menu-btn:hover,
.menu-btn:focus-visible { color: var(--pst-color-tally-bright); outline: none; }

/*
 * Light-field surfaces (the contact form panel, the story-received receipt)
 * put the control over paper rather than a hero image. It drops the scrim and
 * reads as ink — the same context rule the brand mark already follows there.
 */
.menu-btn--ink {
  color: var(--pst-color-ink);
  background: none;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: none;
}

.menu-btn--ink:hover,
.menu-btn--ink:focus-visible { color: var(--pst-color-tally); outline: none; }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  background: #0b0a08;
  color: var(--pst-color-ivory);
  transform: translateY(-100%);
  transition:
    transform var(--pst-motion-slow) var(--pst-ease-standard),
    visibility 0s linear var(--pst-motion-slow);
  visibility: hidden;
}

.drawer[aria-hidden="false"] {
  transform: translateY(0);
  transition-delay: 0s;
  visibility: visible;
}

.drawer-inner {
  width: min(100%, var(--pst-width-shell));
  min-height: 100%;
  margin: 0 auto;
  padding: 20px var(--pst-page-gutter) clamp(30px, 4vw, 58px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.drawer-top {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 1px solid rgba(237, 226, 202, 0.11);
}

.drawer-close {
  color: var(--pst-color-ivory);
  background: none;
  border: 0;
  border-radius: var(--pst-radius-none);
  cursor: pointer;
}

.drawer-close:hover,
.drawer-close:focus-visible { color: var(--pst-color-tally-soft); outline: none; }

.drawer-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1.02fr) minmax(520px, 1.72fr);
  gap: clamp(72px, 10vw, 170px);
  align-items: center;
  padding: clamp(64px, 10vh, 120px) 0;
}

.drawer-brand-link { display: block; width: min(100%, 330px); }

.drawer-brand-mark { width: 100%; height: auto; object-fit: contain; }

.drawer-brand-link:focus-visible {
  outline: var(--pst-focus-width) solid var(--pst-focus-color-dark);
  outline-offset: var(--pst-focus-offset);
}

.drawer-groups {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.82fr);
  gap: clamp(72px, 9vw, 150px);
}

.drawer-heading {
  margin: 0 0 clamp(30px, 4vh, 48px);
  font-family: var(--pst-font-body);
  font-size: var(--pst-type-eyebrow);
  font-weight: var(--pst-weight-semibold);
  line-height: var(--pst-leading-utility);
  letter-spacing: var(--pst-tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(237, 226, 202, 0.64);
}

.drawer-list {
  display: grid;
  gap: clamp(22px, 3vh, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawer-list a {
  display: inline-block;
  font-family: var(--pst-font-body);
  font-size: clamp(24px, 2.15vw, 34px);
  font-weight: var(--pst-weight-regular);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: rgba(237, 226, 202, 0.94);
  text-decoration: none;
  transition: color var(--pst-motion-fast) var(--pst-ease-standard);
}

.drawer-list a:hover,
.drawer-list a:focus-visible { color: var(--pst-color-tally-soft); outline: none; }

.drawer-base {
  padding-top: 22px;
  border-top: 1px solid rgba(237, 226, 202, 0.08);
  font-size: var(--pst-type-interface);
  line-height: 1.4;
  color: rgba(237, 226, 202, 0.56);
}

body.drawer-open { overflow: hidden; }

@media (max-width: 899.98px) {
  .drawer-inner { padding-inline: 24px; }
  .drawer-layout { grid-template-columns: 1fr; gap: 54px; align-content: start; padding: 46px 0 64px; }
  .drawer-brand-link { width: min(68vw, 250px); }
  .drawer-groups { grid-template-columns: 1fr 1fr; gap: 46px; }
}

@media (max-width: 559.98px) {
  .drawer-top { min-height: 62px; }
  .drawer-layout { gap: 42px; padding: 36px 0 52px; }
  .drawer-brand-link { width: min(62vw, 210px); }
  .drawer-groups { grid-template-columns: 1fr; gap: 44px; }
  .drawer-heading { margin-bottom: 22px; }
  .drawer-list { gap: 18px; }
  .drawer-list a { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; }
  .drawer-list a { transition: none; }
}