/* ================================================================
   KEMI KING — PRINCIPLES.CSS
   Standalone manifesto page. Layered on index.css.
   Dark espresso throughout. The most distinctive page on the site.
   ================================================================ */


/* ── BODY OVERRIDE ───────────────────────────────────────── */
.principles-body {
    background: var(--espresso);
    color: var(--cream);
  }
  
  /* Cursor in cream on dark background */
  .principles-body .cursor {
    border-color: rgba(255,253,249,.6);
  }
  .principles-body .cursor.is-hovering {
    border-color: var(--gold);
    background: rgba(193,154,107,.08);
  }
  .principles-body .cursor-dot {
    background: var(--gold);
  }
  
  
  /* ── NAV OVERRIDE — white logo and links on dark page ─────── */
  .nav-wrap--dark .nav__logo-name,
  .nav-wrap--dark .nav__logo-sub  { color: var(--cream); }
  .nav-wrap--dark .nav__logo-rule { background: rgba(255,253,249,.25); }
  .nav-wrap--dark .nav__link      { color: rgba(255,253,249,.65); }
  .nav-wrap--dark .nav__link:hover,
  .nav-wrap--dark .nav__link--active { color: var(--cream); }
  .nav-wrap--dark .nav__link--active::after { background: var(--gold); transform: scaleX(1); }
  .nav-wrap--dark .nav__cta {
    color: var(--espresso);
    background: var(--cream);
    border-color: var(--cream);
  }
  .nav-wrap--dark .nav__cta:hover {
    background: var(--cream-deep);
  }
  .nav-wrap--dark .nav__toggle-line { background: var(--cream); }
  
  /* Nav on scroll — slightly lighter dark glass */
  .nav-wrap--dark.is-scrolled {
    background: rgba(30,25,22,.88);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 1px 0 rgba(193,154,107,.15);
  }
  
  
  /* ── ACTIVE NAV ──────────────────────────────────────────── */
  .nav__link--active { color: var(--cream) !important; }
  .nav__link--active::after { transform: scaleX(1); background: var(--gold); }
  
  
  /* ── SCREEN-READER ONLY ──────────────────────────────────── */
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  
  
  /* ================================================================
     HERO
     ================================================================ */
  .pr-hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-top: var(--nav-h);
    background: var(--espresso);
    position: relative;
    overflow: hidden;
  }
  
  /* Grain overlay matching rest of site */
  .pr-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    opacity: .028;
    pointer-events: none;
    z-index: 0;
  }
  
  /* Large ghost serif number in background */
  .pr-hero::after {
    content: "50";
    position: absolute;
    right: -2rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-serif);
    font-size: clamp(18rem, 28vw, 32rem);
    font-weight: 300;
    color: rgba(255,253,249,.025);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
    user-select: none;
  }
  
  .pr-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--inner-w);
    margin: 0 auto;
    padding: 5rem var(--pad-x);
    width: 100%;
  }
  
  .pr-hero__eyebrow {
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.2rem;
    display: block;
  }
  
  .pr-hero__headline {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 300;
    line-height: 1.06;
    color: var(--cream);
    margin-bottom: 2rem;
    max-width: 18ch;
  }
  .pr-hero__headline em {
    font-style: italic;
    color: var(--gold);
  }
  
  .pr-hero__body {
    font-size: .96rem;
    color: rgba(255,253,249,.55);
    line-height: 1.9;
    max-width: 36rem;
    margin-bottom: 3rem;
  }
  
  /* Section jump nav */
  .pr-hero__nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
  
  .pr-nav-pill {
    padding: .45rem 1rem;
    border: 1px solid rgba(193,154,107,.3);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,253,249,.55);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
    white-space: nowrap;
  }
  .pr-nav-pill:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(193,154,107,.06);
  }
  
  
  /* ================================================================
     SECTION STRUCTURE
     Each section alternates background depth for rhythm
     ================================================================ */
  .pr-section {
    padding: 5rem 0 6rem;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(193,154,107,.12);
  }
  
  .pr-section--01 { background: var(--espresso); }
  .pr-section--02 { background: var(--espresso-mid); }
  .pr-section--03 { background: var(--espresso); }
  .pr-section--04 { background: var(--espresso-mid); }
  .pr-section--05 { background: var(--espresso); }
  
  /* Ghost category number in background */
  .pr-section::before {
    content: attr(data-bg-num);
    position: absolute;
    right: var(--pad-x);
    top: 2rem;
    font-family: var(--font-serif);
    font-size: clamp(8rem, 14vw, 18rem);
    font-weight: 300;
    color: rgba(255,253,249,.025);
    line-height: 1;
    pointer-events: none;
    user-select: none;
  }
  
  /* Section header */
  .pr-section__header {
    max-width: var(--inner-w);
    margin: 0 auto;
    padding: 0 var(--pad-x) 3.5rem;
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 1.2rem 2rem;
    align-items: start;
    border-bottom: 1px solid rgba(193,154,107,.12);
    margin-bottom: 0;
  }
  
  .pr-section__num {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--gold);
    line-height: 1;
    grid-row: 1 / 3;
    padding-top: .3rem;
  }
  
  .pr-section__title {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 300;
    color: var(--cream);
    line-height: 1.1;
    letter-spacing: .01em;
  }
  
  .pr-section__sub {
    font-size: .8rem;
    color: rgba(255,253,249,.4);
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  
  
  /* ================================================================
     PRINCIPLES LIST
     ================================================================ */
  .pr-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: var(--inner-w);
    margin: 0 auto;
    padding: 0 var(--pad-x);
  }
  
  .pr-item {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 0 2rem;
    align-items: baseline;
    padding: 1.6rem 0;
    border-bottom: 1px solid rgba(255,253,249,.055);
    position: relative;
    cursor: default;
  }
  .pr-item:last-child { border-bottom: none; }
  
  /* Gold left accent on hover */
  .pr-item::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 2px;
    background: var(--gold);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .3s var(--ease-smooth);
  }
  .pr-item:hover::before { transform: scaleY(1); }
  .pr-item:hover .pr-item__text { color: var(--cream); }
  
  .pr-item__num {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 300;
    color: rgba(193,154,107,.4);
    text-align: right;
    transition: color .2s ease;
    padding-top: .15rem;
    line-height: 1;
  }
  .pr-item:hover .pr-item__num { color: var(--gold); }
  
  .pr-item__text {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 300;
    color: rgba(255,253,249,.82);
    line-height: 1.3;
    letter-spacing: .01em;
    transition: color .2s ease;
  }
  
  /* Scroll reveal — items slide up from slight offset */
  .pr-item.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
  }
  .pr-item.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  
  /* ================================================================
     OPENING NOTE
     ================================================================ */
  .pr-note {
    padding: 5rem 0;
    background: var(--espresso-mid);
    border-bottom: 1px solid rgba(193,154,107,.08);
  }
  
  .pr-note__inner {
    max-width: 52rem;
    margin: 0 auto;
    padding: 0 var(--pad-x);
  }
  
  .pr-note__text {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
    line-height: 1.4;
    color: rgba(255,253,249,.9);
    font-weight: 300;
    margin-bottom: 1.4rem;
  }
  
  .pr-note__sign {
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
  }
  
  
  /* ================================================================
     CHAPTER HEADER — editorial two-column layout
     ================================================================ */
  .pr-chapter-hd {
    border-bottom: 1px solid rgba(193,154,107,.12);
    margin-bottom: 0;
  }
  
  .pr-chapter-hd__inner {
    max-width: var(--inner-w);
    margin: 0 auto;
    padding: 5rem var(--pad-x) 4rem;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem 4rem;
    align-items: start;
  }
  
  .pr-chapter-hd--reverse .pr-chapter-hd__inner {
    direction: rtl;
  }
  .pr-chapter-hd--reverse .pr-chapter-hd__inner > * {
    direction: ltr;
  }
  
  .pr-chapter-hd__meta {
    padding-top: .4rem;
  }
  
  .pr-chapter-hd__num {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    line-height: 1;
    font-weight: 300;
    color: var(--gold);
    margin-bottom: .6rem;
  }
  
  .pr-chapter-hd__label {
    font-size: .72rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255,253,249,.4);
  }
  
  .pr-chapter-hd__title {
    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    line-height: 1.1;
    font-weight: 300;
    color: var(--cream);
    max-width: 16ch;
    margin-bottom: 1rem;
  }
  
  .pr-chapter-hd__intro {
    font-size: .92rem;
    color: rgba(255,253,249,.55);
    line-height: 1.9;
    max-width: 38rem;
    margin-bottom: 1.6rem;
  }
  
  /* Enter pillar link */
  .pr-enter-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    border-bottom: 1px solid rgba(193,154,107,.35);
    padding-bottom: .25rem;
    transition: color .2s ease, border-color .2s ease, gap .2s ease;
  }
  .pr-enter-link svg { transition: transform .22s var(--ease-smooth); }
  .pr-enter-link:hover {
    color: var(--cream);
    border-color: rgba(255,253,249,.35);
    gap: .8rem;
  }
  .pr-enter-link:hover svg { transform: translateX(4px); }
  
  
  /* ================================================================
     BLOCKQUOTES — editorial pause between chapters
     ================================================================ */
  .pr-quote {
    padding: 3.5rem 0;
    background: rgba(255,253,249,.02);
    border-bottom: 1px solid rgba(193,154,107,.08);
    border-top: 1px solid rgba(193,154,107,.08);
  }
  
  .pr-quote__inner {
    max-width: 58rem;
    margin: 0 auto;
    padding: 0 var(--pad-x);
  }
  
  .pr-quote__inner blockquote {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.45rem, 2.8vw, 2.2rem);
    font-weight: 300;
    line-height: 1.35;
    color: rgba(255,253,249,.78);
    text-align: center;
    font-style: italic;
  }
  
  
  /* ================================================================
     RESPONSIVE — chapter header
     ================================================================ */
  @media (max-width: 900px) {
    .pr-chapter-hd__inner,
    .pr-chapter-hd--reverse .pr-chapter-hd__inner {
      grid-template-columns: 1fr;
      direction: ltr;
      gap: 1.2rem;
      padding-top: 3.5rem;
      padding-bottom: 3rem;
    }
    .pr-chapter-hd__num { font-size: 3.2rem; }
    .pr-chapter-hd__title { max-width: 100%; }
  }
  
  
  
  .pr-letter {
    background: rgba(193,154,107,.07);
    border-top: 1px solid rgba(193,154,107,.15);
    border-bottom: 1px solid rgba(193,154,107,.15);
    padding: 4rem 0;
    text-align: center;
  }
  
  .pr-letter__inner {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
  }
  
  .pr-letter__ornament {
    font-size: .75rem;
    color: var(--gold);
    letter-spacing: .3em;
    margin-bottom: .4rem;
  }
  
  .pr-letter__heading {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--cream);
    letter-spacing: .04em;
  }
  
  .pr-letter__sub {
    font-size: .82rem;
    color: rgba(255,253,249,.45);
    line-height: 1.8;
    margin-bottom: .8rem;
  }
  
  .pr-letter__form {
    display: flex;
    gap: .5rem;
    width: 100%;
    max-width: 380px;
  }
  
  .pr-letter__form input {
    flex: 1;
    padding: .75rem 1rem;
    background: rgba(255,253,249,.06);
    border: 1px solid rgba(193,154,107,.25);
    font-family: var(--font-sans);
    font-size: .82rem;
    color: var(--cream);
    outline: none;
    border-radius: 0;
    transition: border-color .18s ease, background .18s ease;
  }
  .pr-letter__form input::placeholder { color: rgba(255,253,249,.3); font-style: italic; }
  .pr-letter__form input:focus {
    border-color: var(--gold);
    background: rgba(255,253,249,.09);
  }
  
  .pr-letter__form button {
    padding: .75rem 1.4rem;
    background: var(--gold);
    color: var(--espresso);
    border: 1px solid var(--gold);
    font-family: var(--font-sans);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: none;
    border-radius: 0;
    transition: background .18s ease, box-shadow .18s ease;
    white-space: nowrap;
  }
  .pr-letter__form button:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    box-shadow: 0 8px 24px rgba(193,154,107,.2);
  }
  
  @media (max-width: 480px) {
    .pr-letter__form { flex-direction: column; }
    .pr-letter__form button { width: 100%; }
  }
  
  
  /* ================================================================
     PORTRAIT — full-width before closing CTA
     ================================================================ */
  .pr-portrait {
    position: relative;
    height: clamp(380px, 55vw, 620px);
    overflow: hidden;
  }
  
  .pr-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 12%;
    display: block;
    filter: saturate(.75) brightness(.88);
  }
  
  /* Dark gradient overlay — heavier at top and bottom, lighter in centre */
  .pr-portrait__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(20,15,12,.65) 0%,
      rgba(20,15,12,.18) 40%,
      rgba(20,15,12,.18) 60%,
      rgba(20,15,12,.72) 100%
    );
  }
  
  
  /* ================================================================
     CLOSING CTA
     ================================================================ */
  .pr-closing {
    background: linear-gradient(160deg,
      rgba(193,154,107,.12) 0%,
      rgba(193,154,107,.04) 50%,
      rgba(193,154,107,.08) 100%
    );
    border-top: 1px solid rgba(193,154,107,.2);
    padding: 7rem 0;
    text-align: center;
  }
  
  .pr-closing__inner {
    max-width: 620px;
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .pr-closing__ornament {
    font-size: .8rem;
    color: var(--gold);
    margin-bottom: 1.5rem;
    letter-spacing: .3em;
  }
  
  .pr-closing__kicker {
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
  }
  
  .pr-closing__title {
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 3.5vw, 3rem);
    font-weight: 300;
    color: var(--cream);
    line-height: 1.15;
    margin-bottom: 1.4rem;
  }
  .pr-closing__title em {
    font-style: italic;
    color: var(--gold);
  }
  
  .pr-closing__body {
    font-size: .9rem;
    color: rgba(255,253,249,.5);
    line-height: 1.9;
    margin-bottom: 2.4rem;
  }
  
  .pr-closing__actions {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .pr-ghost-link {
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,253,249,.45);
    text-decoration: none;
    transition: color .2s ease;
    border-bottom: 1px solid rgba(255,253,249,.15);
    padding-bottom: 2px;
  }
  .pr-ghost-link:hover { color: var(--cream); border-color: rgba(255,253,249,.4); }
  
  
  /* ================================================================
     FOOTER OVERRIDE — dark footer on dark page
     ================================================================ */
  .pr-footer {
    background: rgba(10,8,6,.7);
    border-top: 1px solid rgba(193,154,107,.1);
  }
  .pr-footer .footer__brand-name,
  .pr-footer .footer__brand-sub,
  .pr-footer .footer__col-title { color: var(--cream); }
  .pr-footer .footer__col ul a,
  .pr-footer .footer__brand a,
  .pr-footer .footer__col--contact a,
  .pr-footer .footer__cta { color: rgba(255,253,249,.5); }
  .pr-footer .footer__col ul a:hover,
  .pr-footer .footer__cta:hover { color: var(--cream); }
  .pr-footer .footer__socials a { color: rgba(255,253,249,.4); }
  .pr-footer .footer__socials a:hover { color: var(--gold); }
  .pr-footer .footer__base {
    border-top-color: rgba(193,154,107,.1);
    color: rgba(255,253,249,.25);
  }
  .pr-footer .footer__base a { color: rgba(255,253,249,.25); }
  .pr-footer .footer__base a:hover { color: rgba(255,253,249,.5); }
  
  
  /* ================================================================
     RESPONSIVE
     ================================================================ */
  @media (max-width: 960px) {
    .pr-section__header {
      grid-template-columns: 2.5rem 1fr;
      gap: 1rem 1.4rem;
    }
    .pr-item {
      grid-template-columns: 2.5rem 1fr;
      gap: 0 1.4rem;
    }
  }
  
  @media (max-width: 720px) {
    .pr-hero__headline { font-size: 2.8rem; }
    .pr-hero::after { display: none; }
    .pr-section__header {
      grid-template-columns: 1fr;
      gap: .6rem;
    }
    .pr-section__num { grid-row: auto; font-size: 2rem; }
    .pr-item {
      grid-template-columns: 2rem 1fr;
      gap: 0 1rem;
      padding: 1.2rem 0;
    }
    .pr-item__text { font-size: 1.15rem; }
    .pr-item__num { font-size: .82rem; }
  }
  
  @media (max-width: 480px) {
    .pr-hero__headline { font-size: 2.3rem; }
    .pr-item { grid-template-columns: 1fr; gap: .3rem; }
    .pr-item__num { display: none; }
    .pr-closing__actions { flex-direction: column; }
  }
  
  /* ================================================================
     PILLAR LANDING PAGES
     ================================================================ */
  
  /* Hero */
  .pr-pillar-hero {
    min-height: 72svh;
    display: flex;
    align-items: center;
    padding-top: var(--nav-h);
    position: relative;
    overflow: hidden;
  }
  .pr-pillar-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at top left, rgba(193,154,107,.10), transparent 34%),
      radial-gradient(circle at bottom right, rgba(193,154,107,.06), transparent 30%);
    pointer-events: none;
  }
  .pr-pillar-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--inner-w);
    margin: 0 auto;
    padding: 4rem var(--pad-x) 5rem;
    width: 100%;
  }
  .pr-pillar-hero__back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,253,249,.4);
    text-decoration: none;
    margin-bottom: 2.4rem;
    transition: color .2s ease;
  }
  .pr-pillar-hero__back:hover { color: var(--gold); }
  
  .pr-pillar-hero__num {
    font-family: var(--font-serif);
    font-size: clamp(5rem, 12vw, 14rem);
    font-weight: 300;
    line-height: 1;
    color: rgba(193,154,107,.15);
    position: absolute;
    right: var(--pad-x);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
  }
  
  .pr-pillar-hero__title {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 300;
    line-height: 1.0;
    color: var(--cream);
    margin-bottom: 1.6rem;
  }
  
  .pr-pillar-hero__position {
    font-size: .94rem;
    color: rgba(255,253,249,.5);
    line-height: 1.85;
    max-width: 38rem;
  }
  
  /* Chapter intro */
  .pr-pillar-chapter {
    background: var(--espresso-mid);
    border-bottom: 1px solid rgba(193,154,107,.1);
    padding: 4rem 0;
  }
  .pr-pillar-chapter__inner {
    max-width: var(--inner-w);
    margin: 0 auto;
    padding: 0 var(--pad-x);
  }
  .pr-pillar-chapter__title {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 300;
    color: rgba(255,253,249,.88);
    line-height: 1.25;
    max-width: 28ch;
  }
  
  /* Pillar principles list — larger text than overview */
  .pr-list--pillar .pr-item__text {
    font-size: clamp(1.45rem, 2.8vw, 2.1rem);
  }
  
  /* Related essays */
  .pr-pillar-essays {
    background: var(--espresso-mid);
    border-top: 1px solid rgba(193,154,107,.1);
    padding: 5rem 0;
  }
  .pr-pillar-essays__inner {
    max-width: var(--inner-w);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    flex-direction: column;
  }
  .pr-pillar-essays__kicker {
    font-size: .68rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .6rem;
  }
  .pr-pillar-essays__title {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 300;
    color: var(--cream);
    margin-bottom: 2rem;
  }
  .pr-pillar-essays__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .pr-essay-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid rgba(255,253,249,.07);
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    color: rgba(255,253,249,.75);
    text-decoration: none;
    transition: color .2s ease, padding-left .2s ease;
  }
  .pr-essay-link svg { flex-shrink: 0; opacity: 0; transition: opacity .2s ease, transform .2s ease; }
  .pr-essay-link:hover { color: var(--gold); padding-left: .5rem; }
  .pr-essay-link:hover svg { opacity: 1; transform: translateX(3px); }
  
  /* Pillar-to-pillar navigation */
  .pr-pillar-nav {
    background: var(--espresso);
    border-top: 1px solid rgba(193,154,107,.1);
    border-bottom: 1px solid rgba(193,154,107,.1);
    padding: 2rem 0;
  }
  .pr-pillar-nav__inner {
    max-width: var(--inner-w);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .pr-pillar-nav__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,253,249,.45);
    text-decoration: none;
    transition: color .2s ease;
  }
  .pr-pillar-nav__link:hover { color: var(--gold); }
  .pr-pillar-nav__all {
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(193,154,107,.3);
    padding-bottom: 2px;
    transition: color .2s ease, border-color .2s ease;
  }
  .pr-pillar-nav__all:hover { color: var(--cream); border-color: rgba(255,253,249,.3); }
  
  @media (max-width: 640px) {
    .pr-pillar-hero__num { display: none; }
    .pr-pillar-nav__inner { flex-direction: column; gap: .75rem; text-align: center; }
  }