/* ==========================================================================
   Purple People Eaters — /history/purple-people-eaters/
   Pattern: exaggerated minimalism (oversized display type, heavy negative
   space, one accent) inside the existing Vikings purple/gold palette.
   All selectors prefixed ppe-. Nothing here touches shared site chrome.
   ========================================================================== */

.page-ppe{background:var(--purple-ink);color:#fff}

/* ---------- breadcrumbs ---------- */
.ppe-crumbs{background:var(--purple-ink);border-bottom:1px solid rgba(255,255,255,.11)}
.ppe-crumbs ol{
  list-style:none;margin:0;padding:14px 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.ppe-crumbs a{color:var(--gold)}
.ppe-crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.ppe-crumbs li[aria-current]{color:#fff}

/* ---------- page shell ---------- */
.ppe-main{background:var(--purple-ink);overflow-x:clip}
.ppe-sect{padding:clamp(54px,10vw,132px) 0}
.ppe-sect + .ppe-sect{border-top:1px solid rgba(255,255,255,.1)}

/* ---------- the single accent device ---------- */
.ppe-kicker{
  display:flex;align-items:center;gap:12px;
  margin:0 0 clamp(20px,3.4vw,38px);
  font-family:var(--display);font-weight:600;
  font-size:clamp(11px,1.4vw,12.5px);letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold)}
.ppe-kicker::before{content:"";flex:0 0 auto;width:28px;height:2px;background:var(--gold)}

/* ---------- hero poster ---------- */
.ppe-hero{padding:clamp(42px,8vw,104px) 0 clamp(50px,9vw,118px)}
.ppe-h1{
  margin:0;max-width:13ch;color:#fff;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.1rem,8.4vw,5.6rem);line-height:.94;letter-spacing:-.012em}
.ppe-lede{
  margin:clamp(20px,3.2vw,34px) 0 0;max-width:26ch;color:#fff;
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.2rem,3.4vw,2.1rem);line-height:1.2;letter-spacing:-.004em}

/* the four surnames, the poster itself */
.ppe-names{list-style:none;margin:clamp(38px,7vw,82px) 0 0;padding:0}
.ppe-names li{
  border-top:1px solid rgba(255,255,255,.15);
  padding:clamp(10px,1.4vw,18px) 0 clamp(14px,1.8vw,22px)}
.ppe-names li:last-child{border-bottom:1px solid rgba(255,255,255,.15)}
.ppe-name{
  display:block;margin:0;color:#fff;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.5rem,12.6vw,8.2rem);line-height:.9;letter-spacing:-.022em;
  overflow-wrap:normal;word-break:normal;hyphens:none}
.ppe-name-meta{
  display:flex;flex-wrap:wrap;gap:4px 20px;margin:clamp(4px,.8vw,10px) 0 0;
  font-family:var(--display);font-weight:600;
  font-size:clamp(10.5px,1.5vw,12.5px);letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.ppe-hof{color:var(--gold)}

/* ---------- headings + prose ---------- */
.ppe-h2{
  margin:0;max-width:17ch;color:#fff;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.85rem,5.8vw,4rem);line-height:.96;letter-spacing:-.016em}
.ppe-h3{
  margin:clamp(30px,4vw,52px) 0 12px;color:#fff;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.02rem,2.1vw,1.35rem);letter-spacing:.06em}
.ppe-prose{max-width:62ch;margin:clamp(22px,3.6vw,44px) 0 0}
.ppe-prose p{
  margin:0 0 1.15em;font-size:clamp(15px,1.7vw,17.5px);
  line-height:1.72;color:rgba(255,255,255,.84)}
.ppe-prose p:last-child{margin-bottom:0}
.ppe-prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.ppe-prose a:hover{text-decoration-thickness:2px}
.ppe-prose strong{color:#fff;font-weight:700}

/* ---------- oversized single figure ---------- */
.ppe-split{margin:clamp(28px,4.4vw,56px) 0 0}
.ppe-figure{margin:0}
.ppe-figure-n{
  display:block;margin:0;color:var(--gold);
  font-family:var(--display);font-weight:700;
  font-size:clamp(3.6rem,19vw,13rem);line-height:.84;letter-spacing:-.035em}
.ppe-figure-k{
  margin:clamp(10px,1.6vw,18px) 0 0;
  font-family:var(--display);font-weight:600;
  font-size:clamp(11px,1.5vw,13px);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.ppe-figure-c{max-width:52ch;margin:clamp(20px,3vw,30px) 0 0}
.ppe-figure-c p{
  margin:0 0 1.1em;font-size:clamp(15px,1.7vw,17.5px);
  line-height:1.72;color:rgba(255,255,255,.84)}
.ppe-figure-c p:last-child{margin-bottom:0}
.ppe-figure-c a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ---------- table ---------- */
.ppe-hint{
  margin:clamp(26px,4.6vw,52px) 0 0;
  font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.ppe-hint + .ppe-tablewrap{margin-top:14px}
@media (min-width:760px){.ppe-hint{display:none}}
.ppe-tablewrap{margin:clamp(26px,4.6vw,52px) 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ppe-table{width:100%;min-width:560px;border-collapse:collapse}
.ppe-table caption{
  text-align:left;padding:0 0 14px;
  font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.ppe-table th,.ppe-table td{
  padding:14px 18px 14px 0;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.13);
  font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.84)}
.ppe-table thead th{
  font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  border-bottom-color:rgba(68,206,227,.5)}
.ppe-table tbody th{color:#fff;font-weight:700;white-space:nowrap}

/* ---------- note / caveat ---------- */
.ppe-note{
  max-width:64ch;margin:clamp(22px,3.2vw,36px) 0 0;
  padding-left:16px;border-left:2px solid var(--gold);
  font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.74)}
.ppe-note a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ---------- sources ---------- */
.ppe-sources{list-style:none;margin:clamp(22px,3.2vw,36px) 0 0;padding:0;max-width:76ch}
.ppe-sources li{
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.11);
  font-size:14px;line-height:1.6;color:rgba(255,255,255,.74)}
.ppe-sources a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}

/* ---------- keep reading ---------- */
.ppe-more{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:clamp(26px,4vw,44px) 0 0;padding:0}
.ppe-more a{
  display:inline-block;padding:12px 18px;
  border:1px solid rgba(255,255,255,.3);color:#fff;
  font-family:var(--display);font-weight:600;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.ppe-more a:hover{background:var(--gold);border-color:var(--gold);color:#041c1f}

/* ---------- wide-screen split ---------- */
@media (min-width:900px){
  .ppe-split{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:clamp(32px,5vw,80px);align-items:start}
  .ppe-figure-c{margin-top:6px}
}

@media (prefers-reduced-motion:reduce){
  .ppe-more a{transition:none}
}