/*
Theme Name:  Mission-Driven Field Notes
Theme URI:   https://patrickmclaughlin.com
Author:      Patrick McLaughlin
Description: A personal newsletter theme for Mission-Driven Field Notes. Features dynamic post filtering, custom Series taxonomy, Kit.com email opt-in integration, and a hand-crafted editorial aesthetic.
Version:     1.5.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mdfn
Tags:        blog, newsletter, one-column, custom-menu, custom-logo
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — DESIGN SYSTEM
============================================================ */
:root {
  --color-pencil-dark:     #131418;
  --color-oxblood:         #7A2318;
  --color-ruled-line:      #B89A6A;
  --color-gold-leaf:       #D4AF37;
  --color-field-parchment: #E8D5A3;
  --color-ledger-green:    #C6CC9E;
  --color-aged-paper:      #FAF4E4;
  --color-aged-paper-mid:  #F0E6C8;

  --font-display: 'Bebas Neue', sans-serif;
  --font-section: 'Oswald', sans-serif;
  --font-body:    'Libre Baskerville', serif;
  --font-mono:    'Space Mono', monospace;

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; scroll-behavior: smooth; }

body {
  background-color: var(--color-aged-paper);
  color: var(--color-pencil-dark);
  font-family: var(--font-body);
  line-height: 1.82;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   NAVIGATION
============================================================ */
.site-nav {
  background: var(--color-pencil-dark);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
}

.nav-logo {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-aged-paper);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: var(--space-6);
  list-style: none;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ruled-line);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active,
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a {
  color: var(--color-gold-leaf);
}

/* Hamburger button */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 200;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-aged-paper);
  transition: transform 0.25s, opacity 0.25s;
}

.nav-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.nav-mobile-drawer {
  display: none;
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  background: var(--color-pencil-dark);
  border-top: 1px solid rgba(184,154,106,0.2);
  z-index: 99;
  padding: var(--space-5) var(--space-6);
}

.nav-mobile-drawer.is-open { display: block; }

.nav-mobile-drawer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.nav-mobile-drawer ul a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ruled-line);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-mobile-drawer ul a:hover,
.nav-mobile-drawer .current-menu-item > a {
  color: var(--color-gold-leaf);
}

/* ============================================================
   HERO / HEADER
============================================================ */
.site-header {
  background-color: var(--color-field-parchment);
  background-image:
    repeating-linear-gradient(
      transparent,
      transparent 31px,
      rgba(184,154,106,0.18) 31px,
      rgba(184,154,106,0.18) 32px
    );
  background-position: 0 14px;
  border-bottom: 2px solid var(--color-gold-leaf);
  padding: var(--space-8) 0 var(--space-7);
}

.header-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.header-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.header-kicker-rule {
  width: 48px;
  height: 1px;
  background: var(--color-oxblood);
  flex-shrink: 0;
}

.header-kicker span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  
}

.header-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 9vw, 96px);
  line-height: 0.93;
  letter-spacing: 0.01em;
  color: var(--color-pencil-dark);
  margin-bottom: var(--space-6);
}

.header-tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
  color: var(--color-pencil-dark);
  
  margin-bottom: var(--space-5);
  max-width: 520px;
}

.header-meta {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.65;
}

.header-meta-sep {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--color-oxblood);
  transform: rotate(45deg);
  opacity: 0.5;
  flex-shrink: 0;
}

/* ============================================================
   SUBSCRIBE SECTION
============================================================ */
.subscribe-section {
  background: var(--color-gold-leaf);
  padding: var(--space-8) 0;
}

.subscribe-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.subscribe-pitch-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.55;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.subscribe-pitch-label::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--color-pencil-dark);
  opacity: 0.4;
}

.subscribe-pitch-headline {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 0.95;
  color: var(--color-pencil-dark);
  margin-bottom: var(--space-4);
}

.subscribe-pitch-body {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-pencil-dark);
  opacity: 0.7;
}

.subscribe-panel {
  background: var(--color-aged-paper);
  border: 1px solid rgba(19,20,24,0.15);
  padding: var(--space-5) var(--space-5) var(--space-4);
  position: relative;
}

.subscribe-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-oxblood);
}

.subscribe-label {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  margin-bottom: var(--space-4);
}

.subscribe-field-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.6;
  display: block;
  margin-bottom: var(--space-2);
}

.subscribe-input {
  width: 100%;
  border: 1px solid var(--color-ruled-line);
  background: white;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-pencil-dark);
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: var(--space-3);
}

.subscribe-input:focus-visible {
  border-color: var(--color-pencil-dark);
  outline: 2px solid var(--color-pencil-dark);
  outline-offset: 2px;
}

.subscribe-input::placeholder { color: var(--color-ruled-line); }

.subscribe-btn {
  width: 100%;
  background: var(--color-pencil-dark);
  color: var(--color-aged-paper);
  border: none;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: var(--space-3);
}

.subscribe-btn:hover { background: var(--color-oxblood); }

.subscribe-footnote {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--color-pencil-dark);
  opacity: 0.55;
  text-align: center;
  font-style: italic;
}

/* Kit.com / ActiveCampaign embed overrides —
   keeps third-party form elements on-brand */
.subscribe-panel .formkit-form,
.subscribe-panel form {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.subscribe-panel .formkit-input,
.subscribe-panel input[type="email"] {
  width: 100% !important;
  border: 1px solid var(--color-ruled-line) !important;
  background: white !important;
  padding: var(--space-3) var(--space-4) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--color-pencil-dark) !important;
  margin-bottom: var(--space-3) !important;
  border-radius: 0 !important;
}

.subscribe-panel .formkit-submit,
.subscribe-panel input[type="submit"],
.subscribe-panel button[type="submit"] {
  width: 100% !important;
  background: var(--color-pencil-dark) !important;
  color: var(--color-aged-paper) !important;
  border: none !important;
  padding: var(--space-3) var(--space-4) !important;
  font-family: var(--font-section) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  border-radius: 0 !important;
}

/* ============================================================
   CATEGORY FILTERS
============================================================ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.filter-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.75;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 18px;
  position: relative;
  transition: opacity 0.15s;
}

.filter-btn:hover { opacity: 0.9; }

.filter-btn.active {
  opacity: 1;
  color: var(--color-oxblood);
}

.filter-btn.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 42'%3E%3Cfilter id='rough'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.035' numOctaves='3' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='2.2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cellipse cx='55' cy='21' rx='50' ry='16' fill='none' stroke='%237A2318' stroke-width='1.6' stroke-linecap='round' pathLength='100' stroke-dasharray='92 8' stroke-dashoffset='4' filter='url(%23rough)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.filter-sep {
  width: 1px;
  height: 12px;
  background: var(--color-ruled-line);
  opacity: 0.4;
}

/* ============================================================
   LATEST ISSUE STAMP
============================================================ */
.latest-stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--color-oxblood);
  color: var(--color-aged-paper);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 7px;
  transform: rotate(1.5deg);
  z-index: 2;
  pointer-events: none;
}

/* ============================================================
   ARTICLES SECTION
============================================================ */
.articles-section {
  background: var(--color-aged-paper);
  padding: var(--space-7) 0 var(--space-8);
}

.section-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-ruled-line);
}

.section-title-group {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.section-rule {
  width: 36px;
  height: 2px;
  background: var(--color-oxblood);
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
}

.section-count {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.65;
}

/* ============================================================
   CARD GRID
============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-field-parchment);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-bottom: 3px solid var(--color-oxblood);
}

.card-body {
  padding: var(--space-5);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(19,20,24,0.12);
  z-index: 1;
}

.card--ledger { background-color: var(--color-ledger-green); }
.card--aged   { background-color: var(--color-aged-paper-mid); }

/* Paper grain texture */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--paper-texture);
  background-size: 200px 200px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.card-category {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 1;
}

.card-title {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.22;
  letter-spacing: 0.01em;
  color: var(--color-pencil-dark);
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 1;
}

.card-excerpt {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.72;
  color: var(--color-pencil-dark);
  opacity: 0.75;
  flex-grow: 1;
  position: relative;
  z-index: 1;
}

/* Edition watermark number */
.card-edition {
  position: absolute;
  bottom: 12px;
  right: 8px;
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  color: var(--color-pencil-dark);
  
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.card--tall .card-edition {
  font-size: 88px;
  bottom: 38px;
  right: 6px;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  margin-top: auto;
  border-top: 1px solid rgba(184,154,106,0.45);
  background-color: var(--color-field-parchment);
}

.card--ledger .card-footer { background-color: var(--color-ledger-green); }
.card--aged   .card-footer { background-color: var(--color-aged-paper-mid); }

.card-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.6;
}

.card-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.65;
  display: flex;
  align-items: center;
  gap: 5px;
}

.card-tag::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--color-oxblood);
  transform: rotate(45deg);
  flex-shrink: 0;
  opacity: 0.8;
}

/* ============================================================
   PAGINATION / SHOW ALL
============================================================ */
.articles-footer {
  text-align: center;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-ruled-line);
}

.showing-all {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.55;
}

/* WordPress pagination */
.nav-links-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-ruled-line);
}

.nav-links-pagination a,
.nav-links-pagination span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.2s;
}

.nav-links-pagination a:hover { opacity: 1; color: var(--color-oxblood); }
.nav-links-pagination .current { opacity: 1; color: var(--color-oxblood); }

/* ============================================================
   FOOTER
============================================================ */
.site-footer {
  background: var(--color-pencil-dark);
  padding: var(--space-7) 0 var(--space-5);
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(184,154,106,0.2);
  margin-bottom: var(--space-5);
}

.footer-brand-name {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-aged-paper);
  margin-bottom: var(--space-2);
}

.footer-brand-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ruled-line);
}

.footer-nav {
  display: flex;
  gap: var(--space-6);
  list-style: none;
}

.footer-nav a {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-leaf);
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer-nav a:hover { opacity: 0.7; }

.footer-bottom {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #b5a898;
  
  text-align: center;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 768px) {
  .nav-links    { display: none; }
  .nav-hamburger { display: flex; }

  .subscribe-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Reset JS tall-card layout on mobile */
  .card--tall,
  .card--tall ~ .card {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .footer-top {
    flex-direction: column;
    gap: var(--space-5);
  }

  .footer-nav {
    flex-wrap: wrap;
    gap: var(--space-4);
  }
}
/* ============================================================
   single-post.css
   Styles for single Field Note posts.
   Loaded only on is_singular('post') via functions.php.
   Source of truth: single-post.html design spec.
============================================================ */

/* ============================================================
   POST HEADER — Letterpress / stamp aesthetic
============================================================ */
.post-header {
  background-color: #e2cc97;
  padding: var(--space-8) 0 0;
  border-bottom: 2px solid var(--color-gold-leaf);
  position: relative;
  overflow: hidden;
}

/* Press shadow — asymmetric, like a block that wasn't level */
.post-header::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    inset  3px  3px 18px rgba(19,20,24,0.09),
    inset -2px -2px 12px rgba(19,20,24,0.06),
    inset  0    6px 32px rgba(19,20,24,0.07);
  pointer-events: none;
  z-index: 1;
}

/* Crop mark — top-left */
.post-header::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 14px;
  width: 18px;
  height: 18px;
  border-top:  1px solid rgba(122,35,24,0.3);
  border-left: 1px solid rgba(122,35,24,0.3);
  pointer-events: none;
  z-index: 3;
}

/* Crop mark — bottom-right */
.post-header-reg-br {
  position: absolute;
  bottom: 18px;
  right: 14px;
  width: 18px;
  height: 18px;
  border-bottom: 1px solid rgba(122,35,24,0.3);
  border-right:  1px solid rgba(122,35,24,0.3);
  pointer-events: none;
  z-index: 3;
}

/* Ink feather — top edge */
.post-header-ink-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to bottom, rgba(122,35,24,0.18), transparent);
  pointer-events: none;
  z-index: 3;
}

/* Ink feather — bottom edge */
.post-header-ink-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to top, rgba(19,20,24,0.10), transparent);
  pointer-events: none;
  z-index: 3;
}

.post-header-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  position: relative;
  z-index: 4;
}

/* Field labels (Title / Overview / Filed) */
.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  
  margin-bottom: 5px;
  margin-top: var(--space-4);
}

.post-header-rule {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--color-oxblood);
  margin-bottom: var(--space-4);
}

/* Category stamp — slightly rotated oxblood border */
.post-category-stamp {
  display: inline-block;
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  border: 1.5px solid var(--color-oxblood);
  padding: 4px 10px 3px;
  margin-bottom: var(--space-5);
  transform: rotate(-1.4deg);
  transform-origin: left center;
}

.post-headline {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.5vw, 64px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--color-pencil-dark);
  margin-bottom: 0;
}

.post-subhead {
  font-family: var(--font-section);
  font-weight: 300;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  color: var(--color-pencil-dark);
  opacity: 0.7;
  max-width: 560px;
  border-bottom: 1px solid rgba(184,154,106,0.45);
  padding-bottom: var(--space-3);
  margin-bottom: 0;
}

.post-dateline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: var(--space-7);
}

.post-dateline-item {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.65;
  white-space: nowrap;
}

.post-dateline-pip {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--color-oxblood);
  transform: rotate(45deg);
  opacity: 0.55;
  flex-shrink: 0;
}

/* ============================================================
   POST BODY
============================================================ */
.post-body {
  padding: var(--space-8) 0 var(--space-7);
}

.post-body-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Drop cap — auto-applied to first paragraph */
.has-drop-cap::first-letter {
  font-family: var(--font-body);
  font-size: 5.4em;
  line-height: 0.78;
  float: left;
  margin: 0.06em 0.08em 0 0;
  color: var(--color-oxblood);
}

/* Paragraphs */
.post-body-inner p {
  font-size: clamp(14.5px, 1.1vw, 15.5px);
  line-height: 1.82;
  margin-bottom: 1.4em;
}

/* Inline links */
.post-body-inner a {
  color: var(--color-oxblood);
  text-decoration: underline;
  text-decoration-color: rgba(122,35,24,0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
.post-body-inner a:hover { text-decoration-color: var(--color-oxblood); }

/* Inline text treatments */
.post-body-inner strong { font-weight: 700; }
.post-body-inner em     { color: var(--color-oxblood); }
.post-body-inner del    { text-decoration: line-through; color: var(--color-pencil-dark); opacity: 0.45; }

.post-body-inner code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: var(--color-field-parchment);
  color: var(--color-oxblood);
  padding: 1px 5px;
  border: 1px solid rgba(184,154,106,0.5);
}

.post-body-inner sup,
.post-body-inner sub {
  font-family: var(--font-mono);
  font-size: 0.65em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  bottom: -0.25em;
}
.post-body-inner sup { top: -0.5em; }

.post-body-inner sup a {
  font-family: var(--font-mono);
  font-size: 1em;
  color: var(--color-oxblood);
  text-decoration: none;
  border-bottom: 1px solid rgba(122,35,24,0.4);
  padding-bottom: 1px;
}
.post-body-inner sup a:hover { border-bottom-color: var(--color-oxblood); }

/* ============================================================
   HEADINGS
============================================================ */
.post-body-inner h2 {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: clamp(16px, 1.7vw, 19px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  margin-top: var(--space-7);
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.section-heading-text { order: 3; }
.section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-pencil-dark);
  opacity: 0.55;
  order: 2;
}
.section-rule-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-oxblood);
  order: 1;
}

.post-body-inner h3 {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: clamp(12px, 1.2vw, 13.5px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.7;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-ruled-line);
}

.post-body-inner h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(13px, 1.1vw, 14.5px);
  line-height: 1.5;
  color: var(--color-pencil-dark);
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
}

/* ============================================================
   LISTS
============================================================ */
.post-body-inner ul,
.post-body-inner ol {
  margin-bottom: 1.4em;
  padding-left: 0;
  list-style: none;
  counter-reset: ol-counter;
}

.post-body-inner ul li,
.post-body-inner ol li {
  font-size: clamp(14.5px, 1.1vw, 15.5px);
  line-height: 1.82;
  margin-bottom: 0.6em;
  padding-left: var(--space-6);
  position: relative;
}

/* Numbered list */

/* Diamond bullet */
.post-body-inner ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--color-oxblood);
  transform: rotate(45deg);
  opacity: 0.7;
}

.post-body-inner ol li { counter-increment: ol-counter; }
.post-body-inner ol li::before {
  content: counter(ol-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--color-oxblood);
  opacity: 0.8;
  line-height: 1.82;
}

/* Nested lists */
.post-body-inner ul ul,
.post-body-inner ol ol,
.post-body-inner ul ol,
.post-body-inner ol ul {
  margin-top: 0.5em;
  margin-bottom: 0;
  padding-left: var(--space-5);
}
.post-body-inner ul ul li::before {
  width: 4px;
  height: 4px;
  background: var(--color-ruled-line);
  opacity: 0.9;
}

/* ============================================================
   DEFINITION LIST
============================================================ */
.post-body-inner dl { margin-bottom: 1.4em; }
.post-body-inner dt {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin-bottom: 2px;
}
.post-body-inner dt + dt,
.post-body-inner dd + dt { margin-top: var(--space-4); }
.post-body-inner dd {
  font-size: clamp(14.5px, 1.1vw, 15.5px);
  line-height: 1.82;
  padding-left: var(--space-5);
  border-left: 2px solid rgba(184,154,106,0.5);
  margin-bottom: 0.4em;
}

/* ============================================================
   BLOCKQUOTE — ruled-paper lined background
============================================================ */
.post-body-inner blockquote {
  background-color: var(--color-field-parchment);
  background-image: repeating-linear-gradient(
    transparent,
    transparent 31px,
    rgba(184,154,106,0.22) 31px,
    rgba(184,154,106,0.22) 32px
  );
  background-position: 0 28px;
  border-left: 3px solid var(--color-oxblood);
  margin: var(--space-7) calc(-1 * var(--space-5));
  padding: 28px var(--space-6) var(--space-5);
}

.post-body-inner blockquote p {
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 0;
  color: var(--color-pencil-dark);
  opacity: 0.85;
}

.blockquote-attribution {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  
  display: block;
  margin-top: 32px;
  position: relative;
  top: 6px;
}

/* ============================================================
   ORNAMENT DIVIDER
============================================================ */
.post-ornament {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-7) 0;
}
.post-ornament-line {
  flex: 1;
  height: 1px;
  background: var(--color-ruled-line);
  opacity: 0.5;
}
.post-ornament-pip {
  width: 10px;
  height: 10px;
  background: var(--color-ruled-line);
  transform: rotate(45deg);
  opacity: 0.5;
}

/* HR fallback */
.post-body-inner hr {
  border: none;
  border-top: 1px solid var(--color-ruled-line);
  opacity: 0.4;
  margin: var(--space-7) 0;
}

/* ============================================================
   IMAGES
   WordPress outputs wp-block-image with native srcset/lazy.
   These styles support both raw HTML and WP block output.
============================================================ */
.post-image,
.post-body-inner figure.wp-block-image {
  margin: var(--space-7) calc(-1 * var(--space-5));
}
.post-image img,
.post-body-inner figure.wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
}

.post-image-caption,
.post-body-inner figure.wp-block-image figcaption,
.post-body-inner .wp-element-caption {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.6;
  margin-top: var(--space-3);
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-ruled-line);
  line-height: 1.6;
}

/* Two-column image pair */
.post-image-pair,
.post-body-inner .wp-block-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: var(--space-7) calc(-1 * var(--space-5));
}
.post-image-pair img,
.post-body-inner .wp-block-columns img {
  width: 100%;
  height: auto;
  display: block;
}
.post-image-pair figcaption,
.post-body-inner .wp-block-columns figcaption {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.6;
  margin-top: var(--space-2);
  line-height: 1.5;
}

/* ============================================================
   TABLE
============================================================ */
.table-wrapper {
  overflow-x: auto;
  margin: var(--space-7) 0;
  -webkit-overflow-scrolling: touch;
}
.post-body-inner table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(13px, 1vw, 14px);
  min-width: 480px;
}
.post-body-inner thead th {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  background: var(--color-field-parchment);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-ruled-line);
  text-align: left;
}
.post-body-inner tbody td {
  font-family: var(--font-body);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(184,154,106,0.3);
  vertical-align: top;
  line-height: 1.6;
}
.post-body-inner tbody tr:nth-child(even) td {
  background: rgba(232,213,163,0.18);
}
.post-body-inner tbody tr:last-child td {
  border-bottom: 2px solid var(--color-ruled-line);
}

/* ============================================================
   CODE BLOCK
============================================================ */
.code-block { margin: var(--space-7) 0; }
.code-block-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  
  background: var(--color-field-parchment);
  border: 1px solid rgba(184,154,106,0.5);
  border-bottom: none;
  padding: 5px var(--space-4);
  display: block;
}
.post-body-inner pre {
  background: var(--color-pencil-dark);
  padding: var(--space-5) var(--space-6);
  overflow-x: auto;
  margin: 0;
}
.post-body-inner pre code {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-aged-paper);
  background: none;
  border: none;
  padding: 0;
}

/* ============================================================
   CALLOUTS
============================================================ */
.callout {
  margin: var(--space-7) 0;
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--color-ruled-line);
  background: rgba(232,213,163,0.25);
  position: relative;
  overflow: hidden;
}

.callout-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  
  display: block;
  margin-bottom: var(--space-3);
}

.post-body-inner .callout > p {
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.72;
  margin-bottom: 0;
}

.callout--tip  { border-left-color: var(--color-ruled-line); }

.callout--warning {
  border-left-color: var(--color-oxblood);
  background: rgba(122,35,24,0.06);
}
.callout--warning .callout-label { color: var(--color-oxblood);  }

.callout--takeaway {
  border-left: none;
  border-top: 2px solid var(--color-gold-leaf);
  border-bottom: 1px solid rgba(212,175,55,0.3);
  background: rgba(212,175,55,0.08);
  padding: var(--space-5) var(--space-6);
}

/* ============================================================
   POST END MARKER
============================================================ */
.post-end-marker {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-7) 0 var(--space-6);
}
.post-end-rule {
  flex: 1;
  height: 1px;
  background: var(--color-ruled-line);
  opacity: 0.4;
}
.post-end-stamp {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  border: 2px solid var(--color-oxblood);
  padding: 4px 10px;
  white-space: nowrap;
}

/* ============================================================
   COLOPHON — Article record box
============================================================ */
.post-colophon {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-6);
  border: 1.5px solid var(--color-pencil-dark);
}

.colophon-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border-bottom: 1.5px solid var(--color-pencil-dark);
}

.colophon-header-title {
  padding: 7px var(--space-4);
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.colophon-header-title::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1.5px;
  background: var(--color-oxblood);
  flex-shrink: 0;
}

.colophon-edition {
  border-left: 1px solid var(--color-pencil-dark);
  padding: 4px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 72px;
}
.colophon-edition-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  
  line-height: 1;
}
.colophon-edition-number {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: var(--color-pencil-dark);
  letter-spacing: 0.02em;
}

.colophon-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.colophon-field { padding: 7px var(--space-4) 6px; }
.colophon-field:nth-child(odd):not(.colophon-field--full) {
  border-right: 1px solid rgba(19,20,24,0.18);
}
.colophon-field--row-border { border-bottom: 1px solid rgba(19,20,24,0.18); }
.colophon-field--full {
  grid-column: 1 / -1;
  border-right: none;
}

.colophon-field-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  display: block;
  margin-bottom: 3px;
  line-height: 1;
}
.colophon-field-value {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--color-pencil-dark);
  line-height: 1.4;
}

.colophon-note {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  padding: 6px 0 2px;
}
.colophon-note + .colophon-note {
  padding-top: var(--space-3);
  border-top: 1px solid rgba(19,20,24,0.1);
  margin-top: var(--space-2);
}
.colophon-note-num {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-oxblood);
  flex-shrink: 0;
  padding-top: 2px;
  letter-spacing: 0.08em;
}
.colophon-note-text {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  line-height: 1.65;
  color: var(--color-pencil-dark);
  opacity: 0.65;
}
.colophon-note-text a {
  color: var(--color-oxblood);
  text-decoration: none;
  border-bottom: 1px solid rgba(122,35,24,0.3);
  opacity: 1;
}
.colophon-note-text a:hover { border-bottom-color: var(--color-oxblood); }

.colophon-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.post-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  
  border: 1px solid rgba(19,20,24,0.25);
  padding: 2px 7px;
  background: rgba(250,244,228,0.6);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
a.post-tag:hover {
  color: var(--color-oxblood);
  border-color: var(--color-oxblood);
  opacity: 1;
}

/* ============================================================
   FURTHER READING
============================================================ */
.further-reading {
  background: var(--color-aged-paper);
  padding: var(--space-7) 0 var(--space-8);
  border-top: 1px solid var(--color-ruled-line);
}
.further-reading-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.further-label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.further-label-rule {
  width: 32px;
  height: 2px;
  background: var(--color-oxblood);
  flex-shrink: 0;
}
.further-label-text {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
}
.further-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 768px) {
  .post-image,
  .post-body-inner figure.wp-block-image { margin: var(--space-7) 0; }

  .post-image-pair,
  .post-body-inner .wp-block-columns {
    grid-template-columns: 1fr;
    margin: var(--space-7) 0;
  }

  .post-body-inner blockquote { margin: var(--space-7) 0; }

  .further-grid { grid-template-columns: 1fr; gap: 12px; }

  .colophon-fields       { grid-template-columns: 1fr; }
  .colophon-field:nth-child(odd):not(.colophon-field--full) { border-right: none; }
}

/* ============================================================
   404 PAGE
   .error404 is applied automatically by WordPress to <body>.
   Flex column layout vertically centers the paper stack
   between nav and footer without touching global body styles.
============================================================ */
body.error404 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.error404 .page-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-5);
}

/* ============================================================
   PAPER STACK
   Three layered sheets; decorative sheets peek out behind
   the top document at different rotations.
============================================================ */
.paper-stack {
  position: relative;
  width: 100%;
  max-width: 500px;
  padding-bottom: var(--space-4);
  animation: mdfn-arrive 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mdfn-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sheet 3 — bottom, field parchment */
.sheet-3 {
  position: absolute;
  inset: 0;
  background: var(--color-field-parchment);
  transform: rotate(2.8deg) translateY(6px);
  transform-origin: bottom center;
  box-shadow: 1px 2px 12px rgba(19,20,24,0.13);
  z-index: 1;
}

/* Sheet 2 — middle, aged paper mid */
.sheet-2 {
  position: absolute;
  inset: 0;
  background: var(--color-aged-paper-mid);
  transform: rotate(-1.6deg) translateY(3px);
  transform-origin: bottom center;
  box-shadow: 1px 2px 10px rgba(19,20,24,0.11);
  z-index: 2;
}

/* ============================================================
   DOCUMENT — top sheet, ledger green
============================================================ */
.document {
  position: relative;
  z-index: 3;
  background: var(--color-ledger-green);
  box-shadow:
    0 1px 3px rgba(19,20,24,0.10),
    0 4px 16px rgba(19,20,24,0.13);
}

/* Paper grain texture */
.document::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--paper-texture);
  background-size: 240px 240px;
  opacity: 0.09;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

/* Margin line */
.document::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--space-7);
  width: 1px;
  background: rgba(122,35,24,0.18);
  pointer-events: none;
  z-index: 1;
}

.document-inner {
  position: relative;
  z-index: 2;
  padding: var(--space-7) var(--space-7) var(--space-6) var(--space-8);
}

/* ============================================================
   STAMP — floated right, headline wraps naturally
============================================================ */
.stamp-wrap {
  float: right;
  margin: 0 0 var(--space-4) var(--space-5);
}

.stamp {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 2.5px solid var(--color-oxblood);
  transform: rotate(2.5deg);
  opacity: 0.9;
}

.stamp::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(122,35,24,0.18);
}

.stamp-number {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--color-oxblood);
  letter-spacing: 0.01em;
}

.stamp-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  
  margin-top: 3px;
}

/* ============================================================
   DOCUMENT COPY
============================================================ */
.doc-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.55;
  display: block;
  margin-bottom: var(--space-2);
}

h1.doc-headline {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 0.93;
  letter-spacing: 0.01em;
  color: var(--color-pencil-dark);
  margin-bottom: var(--space-5);
}

.observation { clear: both; }

.observation-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.55;
  display: block;
  margin-bottom: var(--space-2);
}

.observation p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-pencil-dark);
  opacity: 0.72;
}

.observation p + p { margin-top: 1em; }

.doc-rule {
  border: none;
  border-top: 1px solid rgba(19,20,24,0.12);
  margin: var(--space-6) 0 var(--space-5);
}

/* ============================================================
   RETURN HOME LINK
============================================================ */
.return-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  text-decoration: none;
  border-bottom: 1px solid rgba(122,35,24,0.35);
  padding-bottom: 2px;
  transition: border-color 0.2s, gap 0.18s;
}
.return-link:hover {
  border-color: var(--color-oxblood);
  gap: 13px;
}

/* ============================================================
   404 RESPONSIVE
============================================================ */
@media (max-width: 768px) {
  .document-inner {
    padding: var(--space-6) var(--space-5) var(--space-5);
  }
  .document::before { display: none; }
}

/* ============================================================
   SUBSCRIBE PAGE
============================================================ */

/* Header — ruled paper background with crop marks */
.subscribe-header {
  background-color: var(--color-field-parchment);
  background-image: repeating-linear-gradient(
    transparent,
    transparent 31px,
    rgba(184,154,106,0.18) 31px,
    rgba(184,154,106,0.18) 32px
  );
  background-position: 0 14px;
  border-bottom: 2px solid var(--color-gold-leaf);
  padding: var(--space-8) 0 var(--space-7);
  position: relative;
  overflow: hidden;
}

/* Crop mark — top-left */
.subscribe-header::before {
  content: '';
  position: absolute;
  top: 14px; left: 14px;
  width: 18px; height: 18px;
  border-top:  1px solid rgba(122,35,24,0.25);
  border-left: 1px solid rgba(122,35,24,0.25);
  pointer-events: none;
}

/* Crop mark — bottom-right */
.subscribe-header::after {
  content: '';
  position: absolute;
  bottom: 18px; right: 14px;
  width: 18px; height: 18px;
  border-bottom: 1px solid rgba(122,35,24,0.25);
  border-right:  1px solid rgba(122,35,24,0.25);
  pointer-events: none;
}

.subscribe-header .header-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.subscribe-header .header-kicker {
  justify-content: flex-start;
}

.subscribe-header .header-kicker-rule {
  width: 36px;
  height: 2px;
}

.subscribe-header .header-kicker span {
  font-size: 9px;
  letter-spacing: 0.2em;
}

.subscribe-header .header-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: end;
}

.subscribe-header .header-title {
  font-size: clamp(54px, 9vw, 96px);
  line-height: 0.92;
  margin-bottom: var(--space-4);
}

.subscribe-header .header-tagline {
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.75;
  max-width: 440px;
  margin-top: var(--space-5);
  margin-bottom: 0;
}

/* Pride stamp */
.header-issuance  { flex-shrink: 0; padding-bottom: 6px; }
.pride-stamp-wrap { transform: rotate(1.8deg); }
.pride-stamp-svg  { display: block; overflow: visible; }

/* ============================================================
   MAIN TWO-COLUMN LAYOUT
============================================================ */
.subscribe-main       { padding: var(--space-8) 0; }

.subscribe-main-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-8);
  align-items: start;
}

/* ============================================================
   LEFT — PITCH
============================================================ */
.pitch-section-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.pitch-section-rule {
  width: 28px;
  height: 2px;
  background: var(--color-oxblood);
  flex-shrink: 0;
}
.pitch-section-title {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.6;
}

.pitch-headline {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 54px);
  line-height: 0.95;
  color: var(--color-pencil-dark);
  margin-bottom: var(--space-5);
}

.pitch-body {
  font-size: clamp(14px, 1.1vw, 15px);
  line-height: 1.82;
  color: var(--color-pencil-dark);
  opacity: 0.82;
  margin-bottom: var(--space-6);
}
.pitch-body p + p { margin-top: 1.2em; }

/* What You Get ledger card */
.what-you-get {
  border: 1.5px solid rgba(19,20,24,0.14);
  background-color: var(--color-field-parchment);
  background-image: repeating-linear-gradient(
    transparent,
    transparent 31px,
    rgba(184,154,106,0.18) 31px,
    rgba(184,154,106,0.18) 32px
  );
  background-position: 0 8px;
  margin-bottom: var(--space-7);
}

.what-you-get-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--space-5);
  border-bottom: 1.5px solid rgba(19,20,24,0.14);
  background: var(--color-pencil-dark);
}
.what-you-get-title {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-aged-paper);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.what-you-get-title::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1.5px;
  background: var(--color-oxblood);
  flex-shrink: 0;
}
.what-you-get-freq {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ruled-line);
  opacity: 0.7;
}

.what-you-get-list {
  list-style: none;
  padding: var(--space-3) 0 var(--space-4);
}
.what-you-get-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: 10px var(--space-5);
  border-bottom: 1px solid rgba(184,154,106,0.3);
}
.what-you-get-list li:last-child { border-bottom: none; }

.item-num {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--color-oxblood);
  opacity: 0.7;
  flex-shrink: 0;
  padding-top: 2px;
}
.item-title {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  display: block;
  margin-bottom: 2px;
}
.item-desc {
  font-style: italic;
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-pencil-dark);
  opacity: 0.65;
}

/* Testimonials */
.testimonials {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.testimonial {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-ruled-line);
  background: rgba(232,213,163,0.22);
}
.testimonial-text {
  font-style: italic;
  font-size: 14px;
  line-height: 1.72;
  color: var(--color-pencil-dark);
  opacity: 0.8;
  margin-bottom: var(--space-2);
}
.testimonial-attr {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.5;
}

/* ============================================================
   RIGHT — FORM CARD
============================================================ */
.form-col {
  position: sticky;
  top: 60px;
}

.form-card {
  border: 1.5px solid var(--color-pencil-dark);
  background: var(--color-aged-paper);
  position: relative;
  animation: mdfn-form-arrive 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.1s;
}
@keyframes mdfn-form-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Oxblood accent bar across top */
.form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-oxblood);
}

.form-card-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border-bottom: 1.5px solid var(--color-pencil-dark);
  margin-top: 3px;
}
.form-card-header-title {
  padding: 10px var(--space-5);
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.form-card-header-title::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1.5px;
  background: var(--color-oxblood);
  flex-shrink: 0;
}

.form-card-header-edition {
  border-left: 1px solid var(--color-pencil-dark);
  padding: 6px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 64px;
}
.form-card-header-edition-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.65;
  line-height: 1;
}
.form-card-header-edition-num {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--color-pencil-dark);
  letter-spacing: 0.02em;
}

.form-card-body { padding: var(--space-5); }

.form-intro {
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--color-pencil-dark);
  opacity: 0.7;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(184,154,106,0.4);
}

/* Form fields */
.form-field { margin-bottom: var(--space-4); }

.form-field-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.55;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.form-field-label .required {
  color: var(--color-oxblood);
  font-size: 10px;
  line-height: 1;
  opacity: 1;
}
.form-field-label .optional {
  font-size: 9px;
  opacity: 0.5;
}

.form-input,
.form-select {
  width: 100%;
  border: 1px solid var(--color-ruled-line);
  background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23B89A6A'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding: 11px var(--space-4);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-pencil-dark);
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.form-input:focus-visible,
.form-select:focus-visible {
  border-color: var(--color-pencil-dark);
  outline: 2px solid var(--color-pencil-dark);
  outline-offset: 2px;
}
.form-input::placeholder { color: rgba(184,154,106,0.7); }
.form-input.error         { border-color: var(--color-oxblood); }

.form-select option { color: var(--color-pencil-dark); }

.form-error-msg {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--color-oxblood);
  margin-top: 5px;
  display: none;
}
.form-input.error + .form-error-msg { display: block; }

.form-divider {
  height: 1px;
  background: rgba(184,154,106,0.35);
  margin: var(--space-4) 0;
}

.form-submit-btn {
  width: 100%;
  background: var(--color-pencil-dark);
  color: var(--color-aged-paper);
  border: none;
  padding: 14px var(--space-4);
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
  overflow: hidden;
}
.form-submit-btn:hover    { background: var(--color-oxblood); }
.form-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.form-submit-btn.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12) 50%, transparent);
  animation: mdfn-shimmer 1.2s infinite;
}
@keyframes mdfn-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.form-footnote {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  font-style: italic;
  color: var(--color-pencil-dark);
  
  text-align: center;
  margin-top: var(--space-3);
}

/* Success state */
.form-success         { display: none; padding: var(--space-6) var(--space-5); text-align: center; }
.form-success.visible { display: block; }

.success-stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border: 2.5px solid var(--color-oxblood);
  position: relative;
  transform: rotate(-1.5deg);
  margin-bottom: var(--space-5);
}
.success-stamp::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(122,35,24,0.18);
}
.success-stamp-word {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  color: var(--color-oxblood);
  letter-spacing: 0.03em;
}
.success-stamp-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  opacity: 0.65;
  margin-top: 3px;
}
.success-headline {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  color: var(--color-pencil-dark);
  margin-bottom: var(--space-3);
}
.success-body {
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--color-pencil-dark);
  opacity: 0.7;
}

/* ============================================================
   SUBSCRIBE PAGE RESPONSIVE
============================================================ */
@media (max-width: 768px) {
  .subscribe-main-inner  { grid-template-columns: 1fr; }
  .form-col              { position: static; }
  .header-body           { grid-template-columns: 1fr; gap: var(--space-5); }
  .header-issuance       { display: none; }
}

/* ============================================================
   ABOUT PAGE
============================================================ */

/* Header — ruled paper, crop marks, press shadow */
.about-header {
  background-color: var(--color-field-parchment);
  background-image: repeating-linear-gradient(
    transparent,
    transparent 31px,
    rgba(184,154,106,0.18) 31px,
    rgba(184,154,106,0.18) 32px
  );
  background-position: 0 14px;
  border-bottom: 2px solid var(--color-gold-leaf);
  padding: var(--space-8) 0 0;
  position: relative;
  overflow: hidden;
}
.about-header::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    inset  3px  3px 18px rgba(19,20,24,0.07),
    inset -2px -2px 12px rgba(19,20,24,0.05);
  pointer-events: none;
  z-index: 1;
}
.about-header-crop-tl {
  position: absolute;
  top: 14px; left: 14px;
  width: 18px; height: 18px;
  border-top:  1px solid rgba(122,35,24,0.28);
  border-left: 1px solid rgba(122,35,24,0.28);
  pointer-events: none;
  z-index: 3;
}
.about-header-crop-br {
  position: absolute;
  bottom: 18px; right: 14px;
  width: 18px; height: 18px;
  border-bottom: 1px solid rgba(122,35,24,0.28);
  border-right:  1px solid rgba(122,35,24,0.28);
  pointer-events: none;
  z-index: 3;
}
.about-header-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: end;
  position: relative;
  z-index: 4;
}
.header-stamp-col {
  flex-shrink: 0;
  padding-bottom: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
}
.subject-stamp {
  display: flex;
  flex-direction: column;
  border: 2px solid rgba(122,35,24,0.5);
  min-width: 160px;
}
.subject-stamp-header {
  background: var(--color-pencil-dark);
  padding: 5px var(--space-4);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-aged-paper);
  
}
.subject-stamp-body {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.subject-field { display: flex; flex-direction: column; gap: 2px; }
.subject-field + .subject-field {
  padding-top: 7px;
  border-top: 1px solid rgba(184,154,106,0.35);
}
.subject-field-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  
  line-height: 1;
}
.subject-field-value {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--color-pencil-dark);
  line-height: 1.3;
}

/* Header text */
.header-text-col .header-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.header-text-col .header-kicker-rule {
  width: 36px; height: 2px;
  background: var(--color-oxblood);
  flex-shrink: 0;
}
.header-text-col .header-kicker span {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  
}
.header-text-col .header-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 96px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--color-pencil-dark);
  margin-bottom: var(--space-5);
}
.header-text-col .header-tagline {
  font-family: var(--font-section);
  font-weight: 300;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.55;
  color: var(--color-pencil-dark);
  
  max-width: 480px;
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(184,154,106,0.4);
}

/* ============================================================
   BIO SECTION
============================================================ */
.bio-section {
  padding: var(--space-8) 0;
  background: var(--color-aged-paper);
}
.bio-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-8);
  align-items: start;
}

/* Portrait card */
.portrait-card {
  background: var(--color-field-parchment);
  border-bottom: 3px solid var(--color-oxblood);
  position: relative;
  overflow: hidden;
}
.portrait-img-wrap {
  position: relative;
  width: 100%;
  padding-top: 120%;
  background: var(--color-aged-paper-mid);
  overflow: hidden;
}
.portrait-img-wrap img,
.portrait-img-wrap .about-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portrait-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: var(--color-aged-paper-mid);
  background-image: repeating-linear-gradient(
    transparent,
    transparent 31px,
    rgba(184,154,106,0.16) 31px,
    rgba(184,154,106,0.16) 32px
  );
  background-position: 0 8px;
}
.portrait-placeholder-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  opacity: 0.3;
  text-align: center;
}
.portrait-placeholder-icon {
  width: 52px; height: 52px;
  border: 1.5px solid rgba(19,20,24,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portrait-placeholder-icon svg { opacity: 0.25; }
.portrait-card-footer {
  position: relative;
  z-index: 1;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid rgba(184,154,106,0.45);
}
.portrait-name {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  margin-bottom: 3px;
}
.portrait-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  
  line-height: 1.5;
}
.sidebar-links {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  text-decoration: none;
  
  transition: opacity 0.15s, color 0.15s;
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(184,154,106,0.3);
}
.sidebar-link:hover { opacity: 1; color: var(--color-oxblood); }
.sidebar-link::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--color-oxblood);
  transform: rotate(45deg);
  flex-shrink: 0;
  opacity: 0.65;
}

/* Bio prose */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.section-label-rule {
  width: 32px; height: 2px;
  background: var(--color-oxblood);
  flex-shrink: 0;
}
.section-label-text {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  
}
.bio-headline {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 52px);
  line-height: 0.95;
  color: var(--color-pencil-dark);
  margin-bottom: var(--space-5);
}
.bio-lead {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.78;
  color: var(--color-pencil-dark);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(184,154,106,0.4);
}
.bio-body {
  font-size: clamp(14px, 1.1vw, 15px);
  line-height: 1.82;
  color: var(--color-pencil-dark);
  
}
.bio-body p + p { margin-top: 1.3em; }
.bio-body em { font-style: italic; color: var(--color-oxblood); }

/* ============================================================
   PULL QUOTE
============================================================ */
.pull-quote-section {
  background: var(--color-pencil-dark);
  padding: var(--space-7) 0;
  position: relative;
  overflow: hidden;
}
.pull-quote-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--color-gold-leaf);
}
.pull-quote-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--color-gold-leaf);
}
.pull-quote-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-6);
  align-items: start;
}
.pull-quote-mark {
  font-family: var(--font-display);
  font-size: 120px;
  line-height: 0.7;
  color: var(--color-gold-leaf);
  opacity: 0.55;
  user-select: none;
  padding-top: 8px;
}
.pull-quote-text {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(20px, 2.8vw, 28px);
  line-height: 1.5;
  color: var(--color-aged-paper);
  opacity: 0.92;
  margin-bottom: var(--space-4);
}
.pull-quote-attr {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-aged-paper);
  
}

/* ============================================================
   WORK RECORD TABLE
============================================================ */
.work-section {
  padding: var(--space-8) 0;
  background: var(--color-aged-paper);
}
.work-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.section-header-rule {
  width: 36px; height: 2px;
  background: var(--color-oxblood);
  flex-shrink: 0;
}
.section-header-title {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
}
.section-header-note {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  
  font-style: italic;
}
.work-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.work-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.work-table thead th {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  
  background: var(--color-field-parchment);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1.5px solid var(--color-ruled-line);
  text-align: left;
  font-weight: 400;
}
.work-table tbody td {
  padding: var(--space-4);
  border-bottom: 1px solid rgba(184,154,106,0.25);
  vertical-align: top;
}
.work-table tbody tr:last-child td { border-bottom: 2px solid var(--color-ruled-line); }
.work-table tbody tr:nth-child(even) td { background: rgba(232,213,163,0.15); }
.work-org {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  display: block;
  margin-bottom: 3px;
}
.work-org-type {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  
}
.work-focus {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--color-pencil-dark);
  opacity: 0.78;
}
.work-outcome {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--color-pencil-dark);
  opacity: 0.65;
  line-height: 1.55;
}
.work-outcome strong { font-weight: 700; color: var(--color-oxblood); opacity: 1; }
.work-year {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--color-pencil-dark);
  
  white-space: nowrap;
}

/* ============================================================
   APPROACH — PRINCIPLE CARDS
============================================================ */
.approach-section {
  padding: var(--space-8) 0;
  background: var(--color-field-parchment);
  background-image: repeating-linear-gradient(
    transparent,
    transparent 31px,
    rgba(184,154,106,0.14) 31px,
    rgba(184,154,106,0.14) 32px
  );
  background-position: 0 8px;
  border-top:    1px solid rgba(184,154,106,0.4);
  border-bottom: 1px solid rgba(184,154,106,0.4);
}
.approach-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.principle-card {
  background: var(--color-aged-paper);
  border-bottom: 3px solid var(--color-oxblood);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}
.principle-num {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  color: var(--color-pencil-dark);
  opacity: 0.06;
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  pointer-events: none;
  user-select: none;
}
.principle-label {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  display: block;
  margin-bottom: var(--space-3);
}
.principle-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--color-pencil-dark);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(184,154,106,0.6);
}
.principle-body {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--color-pencil-dark);
  opacity: 0.72;
  position: relative;
  z-index: 1;
}

/* ============================================================
   CREDENTIALS STRIP
============================================================ */
.credentials-section {
  padding: var(--space-7) 0;
  background: var(--color-aged-paper);
}
.credentials-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.credentials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(184,154,106,0.3);
  border: 1px solid rgba(184,154,106,0.3);
  margin-top: var(--space-6);
}
.credential-item {
  background: var(--color-aged-paper);
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.credential-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  
  line-height: 1;
}
.credential-value {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-pencil-dark);
  line-height: 1.3;
}
.credential-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--color-pencil-dark);
  opacity: 0.5;
  line-height: 1.4;
}

/* ============================================================
   CTA SECTION
============================================================ */
.about-cta-section {
  background: var(--color-gold-leaf);
  padding: var(--space-8) 0;
}
.about-cta-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: center;
}
.about-cta-pitch-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-pencil-dark);
  
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.about-cta-pitch-label::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--color-pencil-dark);
  opacity: 0.4;
}
.about-cta-headline {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 0.95;
  color: var(--color-pencil-dark);
  margin-bottom: var(--space-4);
}
.about-cta-body {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-pencil-dark);
  
  max-width: 440px;
}
.about-cta-buttons { flex-shrink: 0; }
.btn-primary {
  display: inline-block;
  background: var(--color-pencil-dark);
  color: var(--color-aged-paper);
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px var(--space-6);
  text-decoration: none;
  transition: background 0.2s;
  white-space: nowrap;
  text-align: center;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background: var(--color-oxblood); }

/* ============================================================
   ABOUT PAGE RESPONSIVE
============================================================ */
@media (max-width: 768px) {
  .about-header-inner  { grid-template-columns: 1fr; gap: var(--space-5); }
  .header-stamp-col    { display: none; }
  .header-text-col .header-tagline { padding-bottom: var(--space-5); }

  .bio-inner           { grid-template-columns: 1fr; gap: var(--space-6); }
  .portrait-card       { max-width: 240px; }

  .pull-quote-inner    { grid-template-columns: 1fr; }
  .pull-quote-mark     { display: none; }

  .approach-grid       { grid-template-columns: 1fr; }
  .credentials-grid    { grid-template-columns: 1fr; }

  .about-cta-inner     { grid-template-columns: 1fr; gap: var(--space-6); }

  .work-table thead    { display: none; }
  .work-table tbody td { display: block; padding: var(--space-2) var(--space-3); }
  .work-table tbody tr {
    display: block;
    border-bottom: 2px solid rgba(184,154,106,0.3);
    padding: var(--space-4) 0;
    margin-bottom: var(--space-3);
  }
  .work-table tbody tr td:last-child { border-bottom: none; }
}