:root {
  --pp-paper: #f6f3ec;
  --pp-paper-raised: #fffdf8;
  --pp-ink-90: #201d16;
  --pp-ink-70: #4d4738;
  --pp-ink-50: #8b8471;
  --pp-rule: #d9d2bf;
  --pp-rule-strong: #c2b99f;
  --pp-accent: #7a2e22;
  --pp-accent-soft: #a8543f;

  --pp-serif: "Source Serif 4", "PT Serif", Georgia, "Times New Roman", serif;
  --pp-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --pp-mono: "IBM Plex Mono", "JetBrains Mono", "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--pp-paper);
  color: var(--pp-ink-90);
  font-family: var(--pp-serif);
  min-height: 100%;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.pp-section, .pp-masthead { scroll-margin-top: 1.25rem; }

/* ---------- READING PROGRESS ---------- */

.pp-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 30;
  background: transparent;
}
.pp-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--pp-accent);
}

a { color: inherit; }

/* ---------- HOME BUTTON ---------- */

.pp-home-btn {
  position: fixed;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--pp-sans);
  font-size: 0.78rem;
  color: #fff;
  text-decoration: none;
  background: rgba(20, 18, 14, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50px;
  padding: 0.45rem 0.95rem 0.45rem 0.65rem;
  backdrop-filter: blur(6px);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pp-home-btn svg { width: 15px; height: 15px; }
.pp-home-btn:hover { background: rgba(20, 18, 14, 0.65); border-color: rgba(255, 255, 255, 0.6); }

/* ---------- HERO / COVER (image only; title lives in the masthead below) ---------- */

.pp-hero {
  position: relative;
  width: 100%;
  height: 46vh;
  min-height: 19rem;
  max-height: 30rem;
  overflow: hidden;
  background: #14120e;
}
.pp-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(0.9) contrast(1.02);
}
.pp-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 9, 7, 0.12) 0%, rgba(10, 9, 7, 0.05) 55%, rgba(10, 9, 7, 0.55) 100%);
}
.pp-hero-caption {
  position: absolute;
  right: 0.9rem;
  bottom: 0.8rem;
  z-index: 2;
  font-family: var(--pp-sans);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: rgba(247, 244, 236, 0.88);
  background: rgba(12, 10, 8, 0.5);
  border-radius: 3px;
  padding: 0.3rem 0.6rem;
  backdrop-filter: blur(3px);
}

/* ---------- MASTHEAD (title block, on paper for guaranteed contrast) ---------- */

.pp-masthead {
  width: 80vw;
  max-width: 78rem;
  margin: 0 auto;
  padding: 2.5rem 1.75rem 0;
  text-align: left;
}
.pp-doctype {
  display: inline-block;
  font-family: var(--pp-sans);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pp-accent);
  border: 1px solid var(--pp-rule-strong);
  border-radius: 3px;
  padding: 0.3rem 0.7rem;
  margin-bottom: 1.2rem;
}
.pp-masthead h1 {
  font-family: var(--pp-serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 5.6vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 0.9rem;
  color: var(--pp-ink-90);
}
.pp-masthead h1 em {
  display: block;
  color: var(--pp-ink-70);
  font-style: italic;
  font-weight: 500;
  font-size: 0.62em;
  margin-top: 0.35rem;
}
.pp-hero-sub {
  font-family: var(--pp-serif);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--pp-ink-70);
  max-width: 38rem;
  margin: 0 0 1.5rem;
}
.pp-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 1.5rem;
  font-family: var(--pp-mono);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: var(--pp-ink-50);
  border-top: 1px solid var(--pp-rule);
  border-bottom: 1px solid var(--pp-rule);
  padding: 0.9rem 0;
  margin-bottom: 0.5rem;
}

/* ---------- TABLE OF CONTENTS / SECTION NAV ---------- */

.pp-toc-wrap {
  width: 80vw;
  max-width: 78rem;
  margin: 0 auto;
  padding: 1.5rem 1.75rem 0;
}
.pp-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--pp-sans);
}
.pp-toc li { width: 50%; }
.pp-toc a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--pp-ink-70);
  font-size: 0.86rem;
  padding: 0.3rem 0.6rem 0.3rem 0;
  border-left: 2px solid transparent;
  padding-left: 0.6rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.pp-toc a:hover { color: var(--pp-accent); }
.pp-toc a.pp-toc-active { color: var(--pp-accent); border-left-color: var(--pp-accent); font-weight: 600; }
.pp-toc-num { font-family: var(--pp-mono); color: var(--pp-ink-50); font-size: 0.8rem; flex: none; }
@media (max-width: 30rem) {
  .pp-toc li { width: 100%; }
}

/* ---------- PAPER BODY ---------- */

.pp-paper {
  width: 80vw;
  max-width: 78rem;
  margin: 0 auto;
  padding: 3.5rem 1.75rem 2rem;
}

.pp-section { margin-bottom: 3.75rem; }

.pp-section h2 {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  font-family: var(--pp-serif);
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: -0.005em;
  color: var(--pp-ink-90);
  margin: 0 0 0.4rem;
  padding-bottom: 0.6rem;
  border-bottom: 1.5px solid var(--pp-ink-90);
}
.pp-num {
  font-family: var(--pp-mono);
  font-size: 0.95rem;
  color: var(--pp-accent);
  font-weight: 600;
}

.pp-lede {
  color: var(--pp-ink-70);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 1.1rem 0 1.75rem;
}

.pp-section p { line-height: 1.7; color: var(--pp-ink-70); }

.pp-abstract {
  font-size: 1.01rem;
  line-height: 1.75;
  color: var(--pp-ink-70);
  margin: 1.1rem 0 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--pp-rule-strong);
}

/* ---------- FIGURE / DIAGRAM ---------- */

.pp-figure {
  margin: 1.5rem 0 0.75rem;
}
.pp-figure-frame {
  background: #ffffff;
  border: 1px solid var(--pp-rule-strong);
  border-radius: 6px;
  padding: 1.25rem;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 0 rgba(32, 29, 22, 0.03), 0 8px 24px -18px rgba(32, 29, 22, 0.35);
}
.pp-figure-frame { cursor: zoom-in; }
/* Diagrams scale to fit the viewport (no horizontal/vertical scroll needed to
   see the whole chart) while preserving aspect ratio via each SVG's viewBox.
   Click-to-zoom (lightbox) is where full-resolution detail inspection happens. */
.mb-svg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(78vh, 46rem);
  margin: 0 auto;
  pointer-events: none;
}
.mb-svg-ffbd {
  max-height: min(82vh, 52rem);
}
.pp-figure-hint {
  font-family: var(--pp-sans);
  font-size: 0.74rem;
  color: var(--pp-ink-50);
  text-align: center;
  margin: 0.6rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.pp-figure-hint svg { width: 13px; height: 13px; opacity: 0.7; }

/* ---------- LIGHTBOX (tap/click a diagram to enlarge + zoom) ---------- */

.pp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(12, 10, 8, 0.92);
  padding: 3.5rem 1rem 1rem;
}
.pp-lightbox.pp-lightbox-open { display: flex; }
.pp-lightbox-stage {
  background: #ffffff;
  border-radius: 8px;
  max-width: 96vw;
  max-height: 100%;
  overflow: auto;
  padding: 1.5rem;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
}
.pp-lightbox-stage svg {
  display: block;
  min-width: 46rem;
  height: auto;
  transform-origin: top left;
  transition: transform 0.15s ease;
  pointer-events: auto;
}
.pp-lightbox-bar {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  left: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--pp-sans);
}
.pp-lightbox-caption {
  color: rgba(247, 244, 236, 0.85);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pp-lightbox-controls { display: flex; gap: 0.5rem; flex: none; }
.pp-lightbox-btn {
  font-family: var(--pp-sans);
  font-size: 0.95rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.1);
  color: #f7f4ec;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}
.pp-lightbox-btn:hover { background: rgba(255, 255, 255, 0.2); }
.pp-lightbox-btn:focus-visible { outline: 2px solid #d8cba8; outline-offset: 1px; }
figcaption {
  font-family: var(--pp-sans);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--pp-ink-70);
  margin-top: 0.9rem;
}
figcaption strong { color: var(--pp-ink-90); }

.pp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-family: var(--pp-mono);
  font-size: 0.72rem;
  color: var(--pp-ink-50);
  margin: 0.9rem 0 0;
}
.pp-legend span { white-space: nowrap; }

/* ---------- SVG diagram theme (mirrors an actual MBSE/SysML tool export) ---------- */

.mb-frame { fill: none; stroke: #6a5acd; stroke-width: 1.25; }
.mb-frame-tab { fill: #6a5acd; }
.mb-frame-label {
  font-family: var(--pp-mono);
  font-size: 10.5px;
  font-weight: 600;
  fill: #ffffff;
}
.mb-box { fill: #ffffff; stroke: #2b2b2b; stroke-width: 1; }
.mb-div { stroke: #2b2b2b; stroke-width: 1; }
.mb-stereo {
  font-family: var(--pp-mono);
  font-size: 9px;
  font-weight: 700;
  fill: #2b2b2b;
  text-anchor: middle;
  dominant-baseline: middle;
}
.mb-name {
  font-family: var(--pp-mono);
  font-size: 11.5px;
  fill: #17150f;
  text-anchor: middle;
  dominant-baseline: middle;
}
.mb-line { stroke: #2b2b2b; stroke-width: 1; fill: none; }
.mb-line-dashed { stroke: #7a7461; stroke-width: 1; stroke-dasharray: 4 3; fill: none; }
.mb-arrowhead { fill: #2b2b2b; }
.mb-node-apex .mb-box { fill: #f6f1e6; }
.vm-axis-label {
  font-family: var(--pp-sans);
  font-size: 12px;
  font-weight: 600;
  fill: var(--pp-ink-50);
  text-anchor: middle;
}
.vm-axis-center { fill: var(--pp-accent-soft); font-style: italic; font-weight: 500; }

/* ---------- Context diagram (actor boxes + I/O labels) ---------- */

.ctx-actor-box { fill: #fbf9f3; }
.ctx-center-box { fill: var(--pp-ink-90); stroke: var(--pp-ink-90); }
.ctx-center-box + .mb-div { stroke: #55503f; }
.ctx-adversary-box { fill: #f3e6e2; stroke: var(--pp-accent); }
.ctx-label-box { fill: none; stroke: none; }
.ctx-label-send, .ctx-label-recv {
  font-family: var(--pp-sans);
  font-size: 8.6px;
  text-anchor: middle;
}
.ctx-label-send { fill: #5a6b4a; font-weight: 600; }
.ctx-label-recv { fill: var(--pp-accent-soft); font-weight: 600; }

/* the center system box needs white text since its fill is dark */
g.mb-node:has(.ctx-center-box) .mb-stereo,
g.mb-node:has(.ctx-center-box) .mb-name { fill: #f6f3ec; }

/* ---------- OODA / activity diagram (decisions, forks, initial/final) ---------- */

.mb-decision { fill: #fbf9f3; stroke: #2b2b2b; stroke-width: 1; }
.mb-dec-text {
  font-family: var(--pp-mono);
  font-size: 9.5px;
  fill: #17150f;
  text-anchor: middle;
  dominant-baseline: middle;
}
.mb-fork { fill: #2b2b2b; }
.mb-initial { fill: #2b2b2b; }
.mb-final-ring { fill: none; stroke: #2b2b2b; stroke-width: 1.5; }
.mb-final-dot { fill: #2b2b2b; }
.mb-edge-label {
  font-family: var(--pp-sans);
  font-size: 10px;
  font-weight: 600;
  fill: var(--pp-accent-soft);
  text-anchor: middle;
}
.mb-edge-label-italic { font-style: italic; font-weight: 500; fill: var(--pp-ink-50); }

/* ---------- Risk matrix ---------- */

.risk-grid-border { fill: none; stroke: #2b2b2b; stroke-width: 1.25; }
.risk-cell { stroke: #ffffff; stroke-width: 2; }
.risk-low { fill: #cfe0bd; }
.risk-med { fill: #f0dd9a; }
.risk-high { fill: #eab08a; }
.risk-extreme { fill: #d98a7a; }
.risk-axis-label {
  font-family: var(--pp-sans);
  font-size: 11px;
  fill: var(--pp-ink-70);
  text-anchor: middle;
}
.risk-axis-title {
  font-family: var(--pp-sans);
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--pp-ink-50);
  text-anchor: middle;
}
.risk-point { fill: #201d16; stroke: #ffffff; stroke-width: 2; }
.risk-point-label {
  font-family: var(--pp-mono);
  font-size: 10px;
  font-weight: 700;
  fill: #ffffff;
  text-anchor: middle;
  dominant-baseline: middle;
}
.risk-legend-label {
  font-family: var(--pp-sans);
  font-size: 10.5px;
  fill: var(--pp-ink-70);
}
.risk-legend-title {
  font-family: var(--pp-sans);
  font-size: 11px;
  font-weight: 700;
  fill: var(--pp-ink-90);
}

/* ---------- MISSIONS (Concept of Operations) ---------- */

.pp-missions {
  margin-top: 0.5rem;
}
.pp-mission {
  padding: 1.4rem 0;
  border-top: 1px solid var(--pp-rule);
}
.pp-mission:first-child { border-top: none; padding-top: 0.5rem; }
.pp-mission h3 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--pp-serif);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--pp-ink-90);
  margin: 0 0 0.55rem;
}
.pp-mission-num {
  font-family: var(--pp-mono);
  font-size: 0.82rem;
  color: var(--pp-accent-soft);
}
.pp-mission-tag {
  font-family: var(--pp-sans);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-ink-50);
  font-weight: 600;
}
.pp-mission p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.72;
}

/* ---------- STAKEHOLDERS ---------- */

.pp-stake-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--pp-rule);
  margin-top: 0.5rem;
}
.pp-stake-col {
  padding: 1.1rem 1.5rem 1.1rem 0;
  border-bottom: 1px solid var(--pp-rule);
}
.pp-stake-col:nth-child(odd) {
  border-right: 1px solid var(--pp-rule);
  padding-right: 1.5rem;
}
.pp-stake-col:nth-child(even) { padding-left: 1.5rem; }
@media (max-width: 34rem) {
  .pp-stake-grid { grid-template-columns: 1fr; }
  .pp-stake-col:nth-child(odd) { border-right: none; padding-right: 0; }
  .pp-stake-col:nth-child(even) { padding-left: 0; }
}
.pp-stake-head {
  font-family: var(--pp-sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--pp-accent);
  margin: 0 0 0.4rem;
}
.pp-stake-desc {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--pp-ink-70);
}
.pp-list { list-style: none; margin: 0; padding: 0; }
.pp-list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.55rem;
  color: var(--pp-ink-70);
  line-height: 1.55;
  font-size: 0.93rem;
}
.pp-list li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--pp-ink-50);
}

/* ---------- MOBILE TUNING ---------- */

@media (max-width: 40rem) {
  .pp-hero { height: 34vh; min-height: 13rem; }
  /* Full-width content on phones -- the 80vw/78rem desktop measure just eats
     the screen as dead side margins once the viewport is this narrow. */
  .pp-masthead, .pp-toc-wrap, .pp-paper, .pp-footer { width: 100%; }
  .pp-masthead { padding: 1.75rem 1.1rem 0; }
  .pp-toc-wrap { padding: 1.25rem 1.1rem 0; }
  .pp-paper { padding: 2.25rem 1.1rem 1.5rem; }
  .pp-footer { padding: 0 1.1rem 3rem; }
  .pp-section h2 { font-size: 1.22rem; gap: 0.5rem; }
  .pp-lede { font-size: 0.96rem; }
  .pp-mission h3 { flex-wrap: wrap; gap: 0.35rem 0.6rem; }

  /* Diagrams: phones have far less usable vh once browser chrome, the home
     button, and figure captions are accounted for, so cap shorter than the
     desktop 78/82vh and shrink the frame padding so more of the figure's
     width goes to the actual chart. Tap-to-zoom (lightbox) is still the way
     to read fine print. */
  .pp-figure-frame { padding: 0.65rem; border-radius: 5px; }
  .mb-svg { max-height: 56vh; }
  .mb-svg-ffbd { max-height: 62vh; }
  .pp-figure-hint { font-size: 0.68rem; }
  figcaption { font-size: 0.82rem; }

  /* Lightbox: desktop forces a 46rem svg min-width so detail diagrams don't
     look tiny in the overlay, but that same floor forces horizontal
     scrolling on a phone-width screen before the user even touches the zoom
     controls. Let it start at native width (zoom buttons do the rest). */
  .pp-lightbox { padding: 3.25rem 0.5rem 0.5rem; }
  .pp-lightbox-stage { padding: 0.75rem; max-width: 98vw; }
  .pp-lightbox-stage svg { min-width: 0; width: 100%; }
}

/* ---------- DATA TABLES (requirements, verification matrix) ---------- */

.pp-table-wrap {
  overflow-x: auto;
  margin: 1.25rem 0 0.5rem;
  border: 1px solid var(--pp-rule-strong);
  border-radius: 6px;
}
.pp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--pp-sans);
  font-size: 0.84rem;
  background: var(--pp-paper-raised);
}
.pp-table caption { display: none; }
.pp-table th, .pp-table td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--pp-rule);
  vertical-align: top;
  line-height: 1.45;
}
.pp-table thead th {
  background: var(--pp-ink-90);
  color: var(--pp-paper);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.pp-table tbody tr:last-child td { border-bottom: none; }
.pp-table tbody tr:nth-child(even) { background: rgba(122, 46, 34, 0.035); }
.pp-req-id {
  font-family: var(--pp-mono);
  font-weight: 600;
  color: var(--pp-accent);
  white-space: nowrap;
}
.pp-verif-tag {
  display: inline-block;
  font-family: var(--pp-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.12rem 0.45rem;
  border-radius: 3px;
  background: #ece7d8;
  color: var(--pp-ink-70);
  white-space: nowrap;
}
@media (max-width: 40rem) {
  .pp-table { font-size: 0.78rem; }
  .pp-table th, .pp-table td { padding: 0.5rem 0.6rem; }
}

/* ---------- PULL QUOTE / CALLOUT ---------- */

.pp-callout {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: rgba(122, 46, 34, 0.06);
  border-left: 3px solid var(--pp-accent);
  border-radius: 0 4px 4px 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--pp-ink-70);
}
.pp-callout strong { color: var(--pp-ink-90); }

/* ---------- GLOSSARY / ABBREVIATIONS ---------- */

.pp-glossary {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
}
.pp-glossary dt {
  font-family: var(--pp-mono);
  font-weight: 700;
  color: var(--pp-accent);
  font-size: 0.86rem;
}
.pp-glossary dd {
  margin: 0;
  font-size: 0.9rem;
  color: var(--pp-ink-70);
  line-height: 1.5;
}
@media (max-width: 34rem) {
  .pp-glossary { grid-template-columns: 1fr; }
  .pp-glossary dd { margin-bottom: 0.4rem; }
}

/* ---------- REFERENCES ---------- */

.pp-refs {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  counter-reset: refnum;
}
.pp-refs li {
  counter-increment: refnum;
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: 0.7rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--pp-ink-70);
}
.pp-refs li::before {
  content: "[" counter(refnum) "]";
  position: absolute;
  left: 0;
  font-family: var(--pp-mono);
  color: var(--pp-ink-50);
  font-size: 0.82rem;
}
.pp-refs a { color: var(--pp-accent-soft); text-decoration: none; }
.pp-refs a:hover { text-decoration: underline; }

/* ---------- FOOTER ---------- */

.pp-footer {
  width: 80vw;
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 1.75rem 4rem;
  border-top: 1px solid var(--pp-rule);
  padding-top: 1.75rem;
  font-family: var(--pp-sans);
  font-size: 0.78rem;
  color: var(--pp-ink-50);
  line-height: 1.65;
}
.pp-footer a { color: var(--pp-accent-soft); text-decoration: none; }
.pp-footer a:hover { text-decoration: underline; }
.pp-footer p { margin: 0 0 0.6rem; }