/* Refinement scale */
 :root {
 --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem;
 --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem;
 --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;
 --surface: var(--gold-a04); --surface-2: rgba(13,10,6,0.72);
 --hairline: var(--gold-a18);
 --ease: cubic-bezier(0.22, 1, 0.36, 1);
 --t-fast: 150ms; --t-med: 300ms; --t-slow: 500ms;
 --fs-display: clamp(2.5rem, 6vw, 4.25rem);
 --fs-h1: clamp(1.9rem, 4vw, 2.6rem); --fs-h2: 1.55rem;
 --fs-h3: 1.15rem; --fs-body: 1.15rem; --fs-small: 0.85rem; --fs-tiny: 0.72rem;
 --card-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.28);
 }

 

 /* Editorial entrances and reader controls */
 #home-entrance { max-width: var(--maxw); margin: 0 auto; color: var(--ink-soft); font-family: var(--serif-body); }
 #home-entrance .entrance-lead { text-align: center; font-style: italic; margin-bottom: var(--sp-6); }
 #home-entrance h2, #essays-start h2 { color: var(--gold); font-size: var(--fs-body); }
 #home-entrance h3 { font-family: var(--serif-display); color: var(--parchment); font-size: 1.2rem; line-height: 1.4; }
 #home-entrance a, #essays-start a { color: var(--parchment); text-decoration-color: var(--gold); text-underline-offset: 0.2em; }
 #home-entrance a:hover, #essays-start a:hover { color: var(--gold); }
 #home-entrance .entrance-featured { border-block: 1px solid var(--gold-hair); padding: var(--sp-5) 0; margin-bottom: var(--sp-6); text-align: center; }
 #home-entrance .entrance-featured p { margin-top: var(--sp-3); }
 #home-entrance .entrance-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
 #home-entrance .entrance-path ul { list-style: none; padding: 0; margin: var(--sp-4) 0; }
 #home-entrance .entrance-path li { margin-bottom: var(--sp-3); line-height: 1.5; }
 #home-entrance .entrance-browse { text-align: center; border-top: 1px solid var(--gold-hair); padding-top: var(--sp-5); }
 #essays-start { border-block: 1px solid var(--gold-hair); padding: var(--sp-4) 0; margin-bottom: var(--sp-5); font: 0.95rem/1.6 var(--serif-body); color: var(--ink-soft); }
 #essays-start p { margin: var(--sp-2) 0; }
 #essays-start strong { color: var(--gold); }
 .essay-search-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); font-size: 0.9rem; color: var(--ink-soft); }
 #essay-search-empty { color: var(--ink-soft); font-size: 1rem; }
 #essay-search-clear, .essay-copy-link, #reader-top { font: 0.9rem var(--serif-display); color: var(--parchment); background: var(--bg); border: 1px solid var(--gold); padding: 0.55rem var(--sp-3); cursor: pointer; }
 .essay-copy-link { display: block; margin: var(--sp-3) auto var(--sp-5); }
 #reader-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; }
 #reader-top[hidden] { display: none; }
 @media (max-width: 768px) { #home-entrance .entrance-paths { grid-template-columns: 1fr; gap: var(--sp-4); } }

 /* Charter prose */
 .charter-prose { max-width: 680px; margin: 0 auto; }
 .charter-prose p { margin-bottom: var(--sp-5); font-size: var(--fs-body); line-height: 1.9; color: var(--ink); }
 .charter-prose .dropcap::first-letter {
 font-family: var(--serif-display); font-size: 4.2rem; line-height: 0.7;
 float: left; padding: 0.06em 0.1em 0 0; color: var(--gold-bright);
 }
 /* Ornamental drop cap on the first body paragraph of each essay */
 .charter-prose h3:first-of-type + p::first-letter {
 font-family: var(--serif-display); font-size: 3.7rem; line-height: 0.66;
 float: left; padding: 0.05em 0.12em 0 0; color: var(--gold-bright);
 text-shadow: 0 0 14px var(--gold-a18);
 }
 /* Decorative fleuron dividing each Roman-numeral section within an essay */
 .charter-prose h3:not(:first-of-type)::before {
 content: "\2767";
 display: block; text-align: center;
 color: var(--gold); opacity: 0.55;
 font-family: var(--serif-display); font-size: var(--fs-body); font-weight: normal;
 line-height: 1; margin: var(--sp-2) 0 var(--sp-5);
 }
 .charter-prose .seal {
 text-align: center; font-style: italic; color: var(--gold);
 border-top: 1px solid var(--gold-hair); padding-top: var(--sp-5); margin-top: var(--sp-6);
 }
 /* Venture cards */
 .ventures-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); max-width: 900px; margin: 0 auto; }
 .venture-card {
 border: 1px solid var(--gold-faint); border-radius: var(--radius);
 padding: var(--sp-6); background: rgba(13,10,6,0.5);
 transition: border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
 }
 .venture-card:hover { border-color: var(--gold-bright); transform: translateY(-2px); }
 .venture-icon { font-size: 1.8rem; margin-bottom: var(--sp-3); color: var(--gold-bright); }
 .venture-card h3 { font-family: var(--serif-display); color: var(--parchment); font-size: 1.4rem; margin-bottom: var(--sp-1); }
 .venture-dest { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold-deep); margin-bottom: var(--sp-3); }
 .venture-card p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.7; margin-bottom: var(--sp-4); }
 .venture-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
 .venture-tags span {
 font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em;
 color: var(--gold); border: 1px solid var(--gold-faint);
 padding: 0.15rem var(--sp-2); border-radius: var(--radius);
 }
 /* Video placeholders */
 .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-5); max-width: 900px; margin: 0 auto; }
 .video-placeholder { text-align: center; }
 .video-frame {
 aspect-ratio: 16/9; background: rgba(15,25,34,0.3);
 border: 1px solid var(--gold-faint); border-radius: var(--radius);
 display: flex; align-items: center; justify-content: center;
 margin-bottom: var(--sp-3); transition: border-color var(--t-med) var(--ease);
 }
 .video-placeholder:hover .video-frame { border-color: var(--gold); }
 .video-play { font-size: 2.4rem; color: var(--gold); opacity: 0.5; transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
 .video-placeholder:hover .video-play { opacity: 1; transform: scale(1.15); }
 .video-placeholder h3 { font-family: var(--serif-display); color: var(--parchment); font-size: 1.1rem; margin-bottom: 0.2rem; }
 .video-label { font-size: 0.74rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.1em; }
 /* Essay search */
 .essay-search {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: rgba(13,10,6,0.6);
  border: 1px solid var(--gold-faint);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 1rem;
  margin-bottom: var(--sp-3);
  transition: border-color var(--t-med) var(--ease);
 }
 .essay-search:focus {
  outline: none;
  border-color: var(--gold);
 }
 .essay-search::placeholder {
  color: var(--ink-faint);
  font-style: italic;
 }
 .essay-index-link .reading-time {
  float: right;
  color: var(--ink-faint);
  font-size: var(--fs-tiny);
  font-style: italic;
  margin-left: var(--sp-2);
  white-space: nowrap;
  clear: none;
 }
 .essay-index-link.no-match { display: none; }
 .essay-index-link .byline {
  display: block;
  font-size: 0.6rem;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 0.1rem;
 }
 /* Nav active state */
 .topnav nav a.active { color: var(--gold-bright); }
 .topnav nav a.active::after { width: 100%; }

/* ============================================================
 PALETTE & TOKENS
 ============================================================ */
 :root {
 --bg: #0d0a06;
 --bg-2: #110d08;
 --gold: #c9a961;
 --gold-bright: #d4af37;
 --gold-deep: var(--gold);
 --gold-faint: var(--gold-a18);
 --gold-hair: var(--hairline);
 --parchment: #f4e4c1;
 --parchment-dim: #cdb896;
 --ink: #e8d9b5;
 --ink-soft: #b9a982;
 --ink-faint: #b8a878;

 /* 1670s Fell Types, direct from Van Dijck's Dutch punches */
 --serif-display: 'IM Fell French Canon', 'Cormorant Garamond VOC', "Garamond", "Hoefler Text", "Baskerville Old Face", serif;
 --serif-head: 'IM Fell English', 'Cormorant Garamond VOC', "Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
 --serif-body: 'Cormorant Garamond VOC', 'IM Fell English', "Garamond", "Iowan Old Style", Georgia, serif;
 --serif-script: 'Pinyon Script', 'Tangerine', 'Apple Chancery', cursive;

 --maxw: 720px;
 --ease: cubic-bezier(0.22, 1, 0.36, 1);
 --ease-out: var(--ease);
 }

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

 html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }

 body {
 background: var(--bg);
 color: var(--ink);
 font-family: var(--serif-body);
 line-height: 1.7;
 overflow-x: hidden;
 position: relative;
 min-height: 100vh;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
 font-kerning: normal;
 font-feature-settings: "kern" 1, "liga" 1, "onum" 1, "calt" 1;
 font-variant-numeric: oldstyle-nums;
 }

 [hidden] { display: none !important; }

 /* Ambient background: warm vignette + VOC-era photograph textures */
 body::before {
 content: "";
 position: fixed;
 inset: 0;
 z-index: -4;
 background:
 url(/img/texture-chart.webp) center/cover no-repeat;
 opacity: 0.08;
 mix-blend-mode: soft-light;
 }
 body::after {
 content: "";
 position: fixed;
 inset: 0;
 z-index: -3;
 background:
 radial-gradient(ellipse 80% 60% at 50% -10%, rgba(74,21,21,0.35), transparent 60%),
 radial-gradient(ellipse 60% 50% at 100% 100%, rgba(15,25,34,0.42), transparent 55%),
 radial-gradient(ellipse 100% 80% at 0% 80%, rgba(40,13,13,0.28), transparent 60%);
 }

 #motes {
 position: fixed;
 inset: 0;
 z-index: -1;
 pointer-events: none;
 }

 /* ============================================================
 TYPOGRAPHY
 ============================================================ */
 h1, h2, h3, .display { font-family: var(--serif-display); font-weight: 400; letter-spacing: 0.03em; font-variant-numeric: oldstyle-nums; }
 ::selection { background: var(--gold-deep); color: var(--bg); }

 a { color: var(--gold-bright); text-decoration: none; transition: color var(--t-med) var(--ease); }
 a:hover { color: var(--parchment); }

 :focus-visible {
 outline: 2px solid var(--gold-bright);
 outline-offset: 3px;
 border-radius: var(--radius);
 }

 /* Skip link */
 .skip-link {
 position: absolute;
 left: 50%;
 top: -60px;
 transform: translateX(-50%);
 z-index: 200;
 background: var(--bg-2);
 border: 1px solid var(--gold);
 color: var(--parchment);
 padding: var(--sp-2) var(--sp-4);
 font-family: var(--serif-head);
 letter-spacing: 0.18em;
 text-transform: uppercase;
 font-size: 0.74rem;
 transition: top var(--t-med) var(--ease);
 }
 .skip-link:focus { top: 12px; }

 /* ============================================================
 NAV , compass mark + jump links, nothing more
 ============================================================ */
 .topnav {
 position: fixed;
 top: 0; left: 0; right: 0;
 z-index: 50;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0.85rem clamp(var(--sp-4), 4vw, var(--sp-6));
 background: rgba(13,10,6,0);
 border-bottom: 1px solid transparent;
 transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), backdrop-filter var(--t-med) var(--ease), padding var(--t-med) var(--ease);
 }
 .topnav.scrolled {
 background: rgba(13,10,6,0.82);
 border-bottom: 1px solid var(--gold-faint);
 backdrop-filter: blur(12px) saturate(1.2);
 padding-top: var(--sp-2);
 padding-bottom: var(--sp-2);
 }
 .topnav .brand {
 display: inline-flex;
 align-items: center;
 gap: var(--sp-2);
 }
 .topnav .brand .brand-mark {
 width: 26px; height: 26px;
 display: block;
 opacity: 0.92;
 transition: transform var(--t-slow) var(--ease), opacity var(--t-med) var(--ease);
 }
 .topnav .brand:hover .brand-mark { transform: rotate(45deg); opacity: 1; }
 .topnav nav { display: flex; gap: var(--sp-5); align-items: center; }
 .topnav nav a {
  font-family: var(--serif-head);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.82rem;
  color: var(--ink-soft);
  position: relative;
  padding: 0.2rem 0;
 }
 .topnav nav a::after {
 content: "";
 position: absolute;
 left: 0; bottom: -3px;
 width: 0; height: 1px;
 background: var(--gold-bright);
 transition: width var(--t-med) var(--ease);
 }
 .topnav nav a:hover { color: var(--parchment); }
 .topnav nav a:hover::after { width: 100%; }

 /* ============================================================
 ORNAMENTAL HELPERS
 ============================================================ */
 .gold-rule {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: var(--sp-4);
 margin: 0 auto;
 max-width: 320px;
 color: var(--gold);
 }
 .gold-rule .line {
 flex: 1;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--gold), transparent);
 }
 .gold-rule .diamond {
 width: 8px; height: 8px;
 background: var(--gold-bright);
 transform: rotate(45deg);
 box-shadow: 0 0 12px var(--gold-a60);
 flex: 0 0 auto;
 }

 .eyebrow {
 font-family: var(--serif-head);
 text-transform: uppercase;
 letter-spacing: 0.4em;
 font-size: 0.78rem;
 color: var(--gold-deep);
 text-align: center;
 display: block;
 padding-left: 0.4em;
 }

 /* ============================================================
 HERO , just the emblem and a wordmark
 ============================================================ */
 main { position: relative; z-index: 1; }

 
  

.hero {
 min-height: 88vh;
 min-height: 88svh;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 padding: 8rem 1.5rem 3rem;
 position: relative;
 }
 
 /* ============================================================
    HASH ROUTING, show/hide pages
    ============================================================ */
 .page { display: none; }
 .page.active { display: block; }
.page:not(#page-home) .hero {
 min-height: 40vh;
 min-height: 40svh;
 padding-top: 4rem;
 padding-bottom: 2rem;
 }
.page:not(#page-home) .hero .crest-wrap {
 max-width: min(140px, 20svh);
 max-height: min(140px, 20svh);
 margin-bottom: 1.25rem;
 }
@media (max-width: 480px) {
 .page:not(#page-home) .hero {
  padding-top: 3.5rem;
  padding-bottom: 1.5rem;
  }
 }

.hero::before {
 content: "";
 position: absolute;
 inset: 0;
 z-index: -1;
 background: radial-gradient(ellipse 58% 44% at 50% 42%, var(--gold-a10), transparent 70%);
 }

 /* ============================================================
    PER-PAGE ATMOSPHERES, each page its own image(s).
    Fixed, low-opacity, soft-light over the chart/vignette.
    Only the active page renders (inactive .page is display:none).
    ============================================================ */
 .page::before, .page::after {
 content: "";
 position: fixed;
 inset: 0;
 z-index: -2;
 pointer-events: none;
 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
 mix-blend-mode: soft-light;
 opacity: 0.16;
 }
 .page::after { content: none; } /* second layer enabled only where needed */

 /* Home / Essays, merchant's study (left) + navigation desk (right) */
 #page-home::before {
 background-image: url(/img/a-17th-century-merchant-s-study.jpg);
 -webkit-mask-image: linear-gradient(100deg, #000 5%, transparent 62%);
 mask-image: linear-gradient(100deg, #000 5%, transparent 62%);
 }
 #page-home::after {
 content: "";
 background-image: url(/img/antique-maritime-navigation-desk-setup.jpg);
 -webkit-mask-image: linear-gradient(280deg, #000 5%, transparent 62%);
 mask-image: linear-gradient(280deg, #000 5%, transparent 62%);
 }

 /* Ventures, colonial harbor at golden hour */
 #page-ventures::before {
 background-image: url(/img/bustling-colonial-harbor-at-golden-hour.jpg);
 opacity: 0.18;
 }

 /* Videos, majestic galleon (top) + merchant's treasures (bottom) */
 #page-videos::before {
 background-image: url(/img/majestic-galleon-in-turbulent-seas.jpg);
 -webkit-mask-image: linear-gradient(to bottom, #000 8%, transparent 72%);
 mask-image: linear-gradient(to bottom, #000 8%, transparent 72%);
 opacity: 0.18;
 }
 #page-videos::after {
 content: "";
 background-image: url(/img/texture-treasures.webp);
 -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 72%);
 mask-image: linear-gradient(to top, #000 8%, transparent 72%);
 opacity: 0.16;
 }

 .crest-wrap {
 position: relative;
 cursor: pointer;
 width: clamp(140px, 24vw, 196px);
 height: clamp(140px, 24vw, 196px);
 margin-bottom: 2.2rem;
 user-select: none;
 opacity: 0;
 animation: crestIn 1.4s var(--ease-out) 0.15s forwards;
 }
 .crest-wrap svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 34px var(--gold-a35)); animation: compassSpin 120s linear infinite; }
 @keyframes compassSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 .crest-wrap:hover svg { animation-duration: 20s; }
 @media (prefers-reduced-motion: reduce) { .crest-wrap svg { animation: none; } }

 .ripple {
 position: absolute;
 top: 50%; left: 50%;
 width: 20px; height: 20px;
 margin: -10px 0 0 -10px;
 border: 2px solid var(--gold-bright);
 border-radius: 50%;
 pointer-events: none;
 animation: rippleOut 1.1s var(--ease) forwards;
 }
 @keyframes rippleOut {
 0% { transform: scale(0.4); opacity: 0.9; }
 100% { transform: scale(9); opacity: 0; }
 }

 .charter-heading {
 text-align: center;
 margin-bottom: var(--sp-6);
 opacity: 0;
 animation: fadeUp 1s var(--ease-out) 0.5s forwards;
 }
 .charter-heading h1 {
 font-family: var(--serif-display);
 font-size: clamp(1.5rem, 4.5vw, 2.4rem);
 color: var(--parchment);
 letter-spacing: 0.22em;
 text-transform: uppercase;
 line-height: 1.2;
 text-shadow: 0 2px 18px rgba(0,0,0,0.5);
 margin: var(--sp-2) 0;
 }
 .charter-rule {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0;
 max-width: 320px;
 margin: 0 auto;
 }
 .chr-line {
 flex: 1;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--gold), transparent);
 }
 .chr-diamond {
 width: 6px; height: 6px;
 background: var(--gold-bright);
 transform: rotate(45deg);
 flex: 0 0 auto;
 margin: 0 var(--sp-3);
 box-shadow: 0 0 8px var(--gold-a60);
 }
 .chr-fleuron {
 color: var(--gold);
 font-size: var(--fs-small);
 flex: 0 0 auto;
 margin: 0 var(--sp-1);
 opacity: 0.7;
 }
 .hero h1 {
 font-family: var(--serif-display);
 font-size: clamp(1.5rem, 4.5vw, 2.4rem);
 color: var(--parchment);
 letter-spacing: 0.22em;
 text-transform: uppercase;
 line-height: 1.2;
 text-shadow: 0 2px 18px rgba(0,0,0,0.5);
 margin: 0.6rem 0;
 }
 .hero .subtitle {
 font-family: var(--serif-head);
 font-size: clamp(0.92rem, 2.4vw, 1.12rem);
 letter-spacing: 0.34em;
 text-transform: uppercase;
 color: var(--gold);
 margin-top: 1.2rem;
 padding-left: 0.34em;
 opacity: 0;
 animation: fadeUp 1s var(--ease-out) 0.7s forwards;
 }
 .hero .tagline {
 max-width: 540px;
 margin: 1.4rem auto 0;
 font-size: clamp(1.04rem, 2.2vw, 1.18rem);
 color: var(--ink-soft);
 font-style: italic;
 font-family: var(--serif-head);
 text-wrap: pretty;
 opacity: 0;
 animation: fadeUp 1s var(--ease-out) 0.88s forwards;
 } } }

 /* ============================================================
 SECTIONS
 ============================================================ */
 .section {
 max-width: var(--maxw);
 margin: 0 auto;
 padding: var(--sp-8) var(--sp-5);
 }
 .section-head { text-align: center; margin-bottom: var(--sp-7); }
 .section-head .eyebrow { margin-bottom: var(--sp-4); }
 .section-title {
 font-size: clamp(1.9rem, 5vw, 2.6rem);
 color: var(--parchment);
 line-height: 1.1;
 text-wrap: balance;
 margin-bottom: var(--sp-5);
 }

 /* ============================================================
 FOOTER
 ============================================================ */
 footer {
 border-top: 1px solid var(--gold-faint);
 text-align: center;
 padding: var(--sp-7) var(--sp-5) var(--sp-7);
 background: linear-gradient(0deg, rgba(74,21,21,0.20), transparent);
 position: relative;
 z-index: 1;
 }
 footer::before {
 content: "";
 position: absolute;
 inset: 0;
 z-index: -1;
 background: url(/img/texture-treasures.webp) center/cover no-repeat;
 opacity: 0.10;
 mask-image: linear-gradient(to top, black 30%, transparent 100%);
 }
 footer .mini-crest { width: 42px; height: 42px; margin: 0 auto var(--sp-4); opacity: 0.8; }
 footer .colophon {
 font-family: var(--serif-head);
 color: var(--ink-soft);
 letter-spacing: 0.12em;
 font-size: 0.9rem;
 line-height: 1.9;
 }
 footer .colophon .gold { color: var(--gold); }
 footer .motto {
  font-family: var(--serif-script);
  color: var(--gold-deep);
  margin-top: 0.7rem;
  font-size: 1.05rem;
 }

 /* ============================================================
 REDUCED MOTION
 ============================================================ */
 @media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
 .ripple { animation: none; }
 #motes { display: none !important; }
 .hero h1, .hero .subtitle, .hero .tagline, .crest-wrap { opacity: 1 !important; animation: none !important; }
 }

 /* ============================================================
    RESPONSIVE, Tablet
    ============================================================ */
 @media (max-width: 768px) {
   :root { --maxw: 92vw; }
   .topnav { padding: 0.7rem 5vw; }
   section { padding: var(--sp-7) 5vw; }
   .hero { padding-top: 5rem; }
   .charter-heading h1, .hero h1 { font-size: clamp(1.2rem, 4vw, 1.6rem); }


   .section-title { font-size: 1.6rem; }
   .charter-prose { font-size: 0.95rem; }
   .charter-prose h2 { font-size: 1.3rem; }
   .charter-prose h3 { font-size: 1rem; }
   }

 /* ============================================================
    RESPONSIVE, Mobile
    ============================================================ */
 @media (max-width: 480px) {
   :root { --maxw: 94vw; }
   .topnav { padding: var(--sp-2) 4vw; }
   .topnav nav { gap: var(--sp-4); }
   .topnav nav a { font-size: 0.65rem; letter-spacing: 0.12em; }
   .hero { padding-top: 3.5rem; }
   .charter-heading h1, .hero h1 { font-size: clamp(1rem, 4vw, 1.3rem); }


   .hero .subtitle { font-size: 0.65rem; letter-spacing: 0.18em; }
   .hero .tagline { font-size: 0.82rem; max-width: 100%; }
   section { padding: var(--sp-6) 4vw; }
   .section-title { font-size: 1.3rem; }
   .charter-prose { font-size: var(--fs-small); line-height: 1.75; }
   .charter-prose p { font-size: 1.05rem; }
   .charter-prose h2 { font-size: var(--fs-body); }
   .charter-prose h3 { font-size: 0.9rem; }
   .colophon { font-size: 0.7rem; }
   .motto { font-size: var(--fs-small); }
   footer { padding: var(--sp-6) 4vw; }
   .brand-mark { width: 24px; height: 24px; }
   .crest-wrap { width: clamp(90px, 28vw, 140px); height: clamp(90px, 28vw, 140px); }
   .gold-rule { margin: var(--sp-4) 0; }
   .ventures-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }
   #page-contact a { min-height: 44px; display: inline-flex; align-items: center; padding: var(--sp-2) 0; }
   /* Touch-friendly */
   .topnav nav a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
   /* Prevent horizontal overflow */
   body, main, section, .hero { overflow-x: hidden; max-width: 100vw; }
 }

 /* ============================================================
    RESPONSIVE, Narrow Phone (< 400px)
    ============================================================ */
 @media (max-width: 480px) {
   .discourse-select-wrap select { font-size: 0.78rem; padding: var(--sp-2) var(--sp-4); letter-spacing: 0.08em; }
   .charter-prose { font-size: 0.82rem; }
   .charter-prose p { font-size: 1rem; }
   .charter-prose h2 { font-size: 1.05rem; }
   .hero .subtitle { font-size: 0.6rem; }
   .crest-wrap { width: clamp(80px, 24vw, 110px); height: clamp(80px, 24vw, 110px); }
 }

 /* ============================================================
    ESSAY INDEX, scrollable sidebar
    ============================================================ */
 .essay-index {
  position: fixed; left: calc(50% - 532px);
  top: 6rem; width: 320px; max-height: calc(100vh - 8rem);
  overflow-y: auto; z-index: 10;
  background: rgba(13,10,6,0.92); border: 1px solid var(--gold-hair);
  border-radius: var(--radius); padding: var(--sp-4) var(--sp-3);
  scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent;
 }
 .essay-index::-webkit-scrollbar { width: 4px; }
 .essay-index::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: var(--radius); }
 .essay-index-title {
  font-family: var(--serif-display); color: var(--parchment);
  font-size: 0.9rem; letter-spacing: 0.15em; text-transform: uppercase;
  text-align: center; margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--gold-hair);
 }
 .essay-index-link {
  display: block; font-family: var(--serif-body); color: var(--ink-soft);
  font-size: 0.9rem; line-height: 1.7; padding: 0.35rem var(--sp-2);
  text-decoration: none; cursor: pointer; border-left: 2px solid transparent;
  transition: color var(--t-med) var(--ease), background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease); overflow: hidden; text-overflow: ellipsis;
 }
 .essay-index-link:hover, .essay-index-link.active {
  color: var(--parchment); border-left-color: var(--gold);
 }
 .essay-index-link .num { color: var(--gold-deep); font-size: 0.65rem; margin-right: 0.35rem; }

 @media (width < 1200px) {
  .essay-index {
   position: static; width: 100%; max-height: none; margin: 0 0 var(--sp-6) 0;
   display: none; border: 1px solid var(--gold-hair);
   background: rgba(13,10,6,0.96);
  }
  .essay-index.open { display: block; }
  .essay-index-list { max-height: 50vh; overflow-y: auto; }
  .essay-index-toggle {
   display: block; width: 100%; max-width: 400px; margin: 0 auto var(--sp-4);
   padding: var(--sp-2) var(--sp-4); background: none; border: 1px solid var(--gold);
   color: var(--parchment); font-family: var(--serif-display);
   font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
   cursor: pointer; text-align: center;
  }
  .essay-index-toggle:hover { background: var(--gold); color: #0d0a06; }
  .essay-index-toggle .arrow { display: inline-block; margin-left: var(--sp-2); transition: transform var(--t-med) var(--ease); }
  .essay-index-toggle.open .arrow { transform: rotate(180deg); }
 }
 @media (min-width: 1200px) {
  .essay-index-toggle { display: none; }
 }

 /* Center a 1064px layout: 320px sidebar + 24px gap + 720px section.
    Both columns share the same origin, so the fixed sidebar cannot drift. */
 @media (min-width: 1200px) {
  #essays-main, #beyond-section { width: 720px; margin-left: calc(50% - 188px); margin-right: 0; }
 }

@font-face {
 font-family: 'Cormorant Garamond VOC';
 src: url('/assets/CormorantGaramond-Regular.d201c49498db.woff2') format('woff2');
 font-weight: 400; font-style: normal; font-display: swap;
 }
 @font-face {
  font-family: 'Cormorant Garamond VOC';
  src: url('/assets/CormorantGaramond-Bold.1ce5b14078d4.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
 }
 @font-face {
  font-family: 'Cormorant Garamond VOC';
  src: url('/assets/CormorantGaramond-Italic.1258196fd6b8.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
 }
 /* 1670s Oxford Fell Types, direct digitization of Christoffel van Dijck's Dutch punches */
 @font-face {
  font-family: 'IM Fell English';
  src: url('/assets/IMFeEN-roman.e708753cc125.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
 }
 @font-face {
  font-family: 'IM Fell English';
  src: url('/assets/IMFeEN-italic.e970c73b2d6b.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
 }
 /* Display cut of the Fell types, for headings */
 @font-face {
  font-family: 'IM Fell French Canon';
  src: url('/assets/IMFeFC-roman.90f71cb3c134.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
 }
 @font-face {
  font-family: 'IM Fell French Canon';
  src: url('/assets/IMFeFC-italic.5b125db8de26.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
 }
 /* Formal 17th-century clerk's hand, for motto, subtitles */
 @font-face {
  font-family: 'Pinyon Script';
  src: url('/assets/PinyonScript.586cc622be99.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
 }

/* ============================================================
   DISCOURSE NAV, horizontal scroll nav for Secret Discourses
   ============================================================ */
.discourse-nav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-2);
  max-width: 780px; margin: var(--sp-6) auto 0;
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--gold-hair);
  border-bottom: 1px solid var(--gold-hair);
}
.discourse-nav-link {
  font-family: var(--serif-display); color: var(--ink-faint);
  font-size: 0.78rem; letter-spacing: 0.08em;
  padding: var(--sp-2) var(--sp-4); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: color var(--t-med) var(--ease), background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease); white-space: nowrap;
  text-transform: uppercase;
}
.discourse-nav-link:hover {
  color: var(--parchment);
  border-color: var(--gold-faint);
  background: var(--gold-a04);
}
.discourse-nav-link.active {
  color: var(--gold-bright);
  border-color: var(--gold);
  background: var(--gold-a10);
}
@media (max-width: 768px) {
  .discourse-nav {
    gap: var(--sp-1); padding: var(--sp-2) var(--sp-2);
    border: 1px solid var(--gold-hair); border-radius: var(--radius);
  }
  .discourse-nav-link {
    font-size: 0.68rem; padding: var(--sp-1) var(--sp-2); letter-spacing: 0.04em;
  }
}


/* === DISCOURSE GATE (compass lock) === */
#discourse-gate {
  max-width: 560px; margin: var(--sp-7) auto; padding: var(--sp-6) var(--sp-6) var(--sp-6);
  text-align: center; border: 1px solid var(--gold-hair);
  background: rgba(13,10,6,0.88); position: relative;
  transition: opacity 0.8s ease, max-height 0.8s ease, margin 0.8s ease, padding 0.8s ease;
}
#discourse-gate.gone {
  opacity: 0; pointer-events: none; max-height: 0; overflow: hidden;
  margin: 0; padding: 0; border: none;
}
.gate-title {
  font-family: var(--serif-display); color: var(--gold);
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.22em; margin-bottom: 0.25rem;
}
.gate-subtitle {
  font-family: var(--serif-body); color: var(--ink-faint);
  font-size: 0.72rem; font-style: italic; margin-bottom: 2rem;
}
.gate-riddle {
  font-family: var(--serif-body); color: var(--parchment);
  font-size: 0.8rem; line-height: 1.75; margin-bottom: 1.8rem;
  text-align: left; max-width: 440px; margin-left: auto; margin-right: auto;
}
.gate-riddle p { margin: 0.4rem 0; }
.gate-riddle .rn {
  color: var(--gold); font-family: var(--serif-display);
  margin-right: 0.3rem; font-size: 0.68rem;
}
/* compass rose buttons */
.compass-lock {
  position: relative; width: 240px; height: 240px; margin: 0 auto 1.8rem;
}
.compass-lock .cl-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%); width: 36px; height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f4e4c1, #7c5e20 80%);
  border: 2px solid #c9a961; z-index: 2;
  transition: background 0.4s;
}
.compass-lock .cl-center.warn {
  background: radial-gradient(circle at 40% 35%, #e88, #5a1010 80%);
  border-color: #8b2020;
}
.cl-btn {
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--gold-hair); background: rgba(13,10,6,0.92);
  color: var(--ink-faint); font-family: var(--serif-display);
  font-size: 0.7rem; cursor: pointer; transition: all 0.25s;
  z-index: 1; display: flex; align-items: center; justify-content: center;
  user-select: none; outline: none;
}
.cl-btn:hover { border-color: var(--gold); color: var(--parchment); background: var(--gold-a10); }
.cl-btn:focus-visible { box-shadow: 0 0 0 2px var(--gold); }
.cl-btn.hit  { border-color: var(--gold); color: var(--gold); background: var(--gold-a18); box-shadow: 0 0 14px var(--gold-a35); }
.cl-btn.miss { border-color: #8b2020; color: #c44; animation: clShake 0.45s ease; }
@keyframes clShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(6px); }
  50% { transform: translateX(-5px); }
  75% { transform: translateX(3px); }
}
/* sequence tracker dots */
.gate-tracker { display: flex; justify-content: center; gap: 0.65rem; margin-bottom: 1.2rem; }
.gate-dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--gold-hair); background: transparent; transition: all 0.35s;
}
.gate-dot.set { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 7px var(--gold-a35); }
.gate-reset-btn {
  font-family: var(--serif-display); color: var(--ink-faint); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer;
  background: none; border: none; padding: 0.3rem 0.6rem; transition: color 0.3s;
}
.gate-reset-btn:hover { color: var(--gold); }
.gate-feedback {
  font-family: var(--serif-body); font-size: 0.72rem; font-style: italic;
  min-height: 1.4em; margin-top: 0.4rem; transition: color 0.3s;
}
.gate-feedback.win { color: var(--gold); }
.gate-feedback.lose { color: #c44; }
/* hide content while locked */
#discourse-content.locked { display: none; }

.book-zigzag {
    display: flex;
    align-items: center;
    padding: var(--sp-6) 0;
    max-width: 820px;
    margin: 0 auto;
}
.book-text-col {
    flex: 1 1 58%;
    padding: 0 var(--sp-5);
    min-width: 0;
}
.book-btn-col {
    flex: 0 0 auto;
    padding: 0 var(--sp-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 190px;
}
.book-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(to bottom, transparent, #3a2a1a 15%, #3a2a1a 85%, transparent);
    flex-shrink: 0;
}
.book-text-col h2 {
    font-family: var(--serif-display);
    color: var(--parchment);
    font-size: var(--fs-h2);
    margin-bottom: var(--sp-2);
    text-align: left;
}
.book-text-col p[style*="italic"] {
    font-family: var(--serif-body);
    color: var(--ink-soft);
    font-size: 0.92rem;
    font-style: italic;
    margin-bottom: var(--sp-4);
    text-align: left;
}
.book-text-col p[style*="line-height"] {
    font-family: var(--serif-body);
    color: var(--ink-faint);
    font-size: 0.86rem;
    line-height: 1.75;
    text-align: left;
    margin: 0;
    max-width: none;
}
.book-text-col p[style*="margin-top:2rem"] {
    margin-top: var(--sp-5);
    text-align: left;
}
.book-btn-col a {
    display: inline-block;
    font-family: var(--serif-display);
    font-size: 0.95rem;
    color: var(--bg);
    background: var(--gold);
    padding: var(--sp-3) var(--sp-6);
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--gold);
    transition: color var(--t-med) var(--ease), background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
    white-space: nowrap;
}
.book-btn-col a:hover {
    background: transparent;
    color: var(--gold);
}
.book-btn-col p[style*="0.72rem"] {
    font-family: var(--serif-body);
    color: var(--ink-faint);
    font-size: var(--fs-tiny);
    margin-top: var(--sp-4);
    text-align: center;
}
@media (max-width: 768px) {
    .book-zigzag {
        flex-direction: column !important;
        padding: var(--sp-6) 0;
    }
    .book-divider {
        width: 60%;
        height: 1px;
        margin: var(--sp-4) 0;
        background: linear-gradient(to right, transparent, #3a2a1a 20%, #3a2a1a 80%, transparent);
        align-self: center;
    }
    .book-text-col, .book-btn-col {
        flex: unset;
        padding: 0 var(--sp-3);
        width: 100%;
    }
    .book-text-col h2, .book-text-col p {
        text-align: center !important;
    }
}


.book-entry {
    padding: var(--sp-7) 0 var(--sp-6) 0;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}
.book-entry h2 {
    font-family: var(--serif-display);
    color: var(--parchment);
    font-size: 1.7rem;
    margin: 0 0 var(--sp-2) 0;
    font-weight: normal;
    letter-spacing: 0.02em;
}
.book-subtitle {
    font-family: var(--serif-body);
    color: var(--ink-soft);
    font-size: 0.95rem;
    font-style: italic;
    margin: 0 0 var(--sp-5) 0;
}
.book-desc {
    font-family: var(--serif-body);
    color: var(--ink-faint);
    font-size: 0.88rem;
    line-height: 1.8;
    text-align: justify;
    margin: 0 0 var(--sp-6) 0;
}
.book-dl {
    display: inline-block;
    font-family: var(--serif-display);
    font-size: 0.95rem;
    color: var(--bg);
    background: var(--gold);
    padding: var(--sp-3) var(--sp-6);
    text-decoration: none;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--gold);
    transition: color var(--t-med) var(--ease), background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
    margin-bottom: var(--sp-3);
}
.book-dl:hover {
    background: transparent;
    color: var(--gold);
}
.book-meta {
    font-family: var(--serif-body);
    color: var(--ink-faint);
    font-size: 0.7rem;
    margin: 0;
}
.book-extra {
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--gold-a10);
}
.book-extra a {
    font-family: var(--serif-display);
    font-size: 0.82rem;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-hair);
    padding-bottom: 0.1rem;
    letter-spacing: 0.05em;
}
.book-extra a:hover {
    color: var(--parchment);
    border-bottom-color: var(--parchment);
}
.book-extra span {
    display: block;
    font-family: var(--serif-body);
    color: var(--ink-faint);
    font-size: 0.65rem;
    margin-top: var(--sp-2);
}
.book-sep {
    text-align: center;
    font-size: 10pt;
    color: #3a2a1a;
    letter-spacing: 0.6em;
    padding: var(--sp-1) 0;
}


 /* Key details: lamplight, gold leaf, and editorial hierarchy */
 #voc-grain, #voc-vignette { position: fixed; inset: 0; pointer-events: none; user-select: none; }
 #voc-grain {
 z-index: 202; opacity: 0.04;
 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h200v200H0z'/%3E%3C/svg%3E") repeat;
 }
 #voc-vignette { z-index: 201; background: radial-gradient(ellipse at center, transparent 48%, rgba(13,10,6,0.4) 100%); }
 #home-entrance .entrance-lead { font-size: clamp(1.2rem, 2.5vw, 1.4rem); letter-spacing: 0.02em; }
 #home-entrance .entrance-lead::before, #home-entrance .entrance-lead::after {
 content: "\2767"; display: block; width: min(100%, 280px); margin: var(--sp-4) auto;
 color: #c9a961; font: 1rem/1 var(--serif-display); text-align: center;
 background: linear-gradient(90deg, transparent, var(--gold-hair)) left center / 42% 1px no-repeat,
 linear-gradient(90deg, var(--gold-hair), transparent) right center / 42% 1px no-repeat;
 }
 #home-entrance h2.charter-heading, #essays-start h2.charter-heading {
 color: #c9a961; font-size: 0.82rem; font-variant: small-caps; text-transform: uppercase;
 letter-spacing: 0.18em; line-height: 1.6; margin: 0 0 var(--sp-4); text-shadow: none;
 }
 #home-entrance h2.charter-heading::before, #essays-start h2.charter-heading::before {
 content: ""; display: inline-block; width: 1.2rem; height: 1px;
 margin: 0 var(--sp-3) 0.25em 0; background: #c9a961;
 }
 #home-entrance .entrance-featured, #essays-start {
 border: 1px solid var(--gold-hair); background: var(--gold-a04);
 padding: clamp(var(--sp-5), 4vw, var(--sp-6));
 }
 #home-entrance .entrance-featured { transition: border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
 #home-entrance .entrance-featured::before {
 content: "\2767"; display: block; margin-bottom: var(--sp-3); color: #c9a961; font: 1.35rem/1 var(--serif-display);
 }
 #home-entrance .entrance-path {
 border-top: 1px solid var(--gold-hair); padding: var(--sp-5) var(--sp-3) var(--sp-2);
 background: var(--gold-a04); transition: transform var(--t-med) var(--ease);
 }
 #home-entrance .entrance-path h3 { transition: color var(--t-med) var(--ease); }
 #home-entrance .entrance-browse a {
 display: inline-block; border: 1px solid #c9a961; padding: var(--sp-3) var(--sp-5);
 font: small-caps 0.95rem/1.5 var(--serif-display); letter-spacing: 0.12em; text-decoration: none;
 transition: color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
 }
 #home-entrance a:is(:hover, :focus-visible), #essays-start a:is(:hover, :focus-visible) { color: #d4af37; }
 #home-entrance .entrance-browse a:is(:hover, :focus-visible) {
 border-color: #d4af37; background: var(--gold-a10); box-shadow: 0 0 18px var(--gold-a10);
 }
 #home-entrance a:focus-visible, #essays-start a:focus-visible { outline: 1px solid #d4af37; outline-offset: 4px; }
 .charter-prose .dropcap::first-letter {
 font-family: var(--serif-display); font-size: 3.7em; line-height: 0.75;
 padding: 0.06em 0 0; margin: 0.02em 0.14em 0 0; color: var(--parchment);
 }
 #home-entrance .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
 #home-entrance .reveal.revealed, #home-entrance .reveal:focus-within { opacity: 1; transform: translateY(0); }
 @media (hover: hover) {
 #home-entrance .entrance-featured:hover { border-color: #d4af37; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
 #home-entrance .entrance-path:hover { transform: translateY(-2px); }
 #home-entrance .entrance-path:hover h3 { color: #d4af37; }
 }
 @media (max-width: 768px) {
 .charter-prose .dropcap::first-letter { font-size: 3.2em; margin-right: 0.12em; }
 }
 @media (prefers-reduced-motion: reduce) {
 #home-entrance .entrance-featured, #home-entrance .entrance-path, #home-entrance .entrance-path h3,
 #home-entrance .entrance-browse, #home-entrance .entrance-browse a, #home-entrance .reveal {
 animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important;
 }
 }

 /* Coherent type, surfaces and interaction states */
 html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "liga" 1, "onum" 1; scrollbar-color: var(--gold-deep) var(--bg); }
 body { font-size: var(--fs-body); background: radial-gradient(ellipse at top left, var(--gold-a04), transparent 55%), radial-gradient(ellipse at bottom right, rgba(184,148,58,0.04), transparent 55%), var(--bg); }
 h1, h2, h3, .display, .hero h1, .charter-heading h1, .section-title { font-weight: 400; letter-spacing: 0.01em; line-height: 1.15; }
 .display { font-size: var(--fs-display); }
 .hero h1, .charter-heading h1, .section-title { font-size: var(--fs-h1); }
 h2, .book-entry h2 { font-size: var(--fs-h2); }
 h3, #home-entrance h3, .venture-card h3, .video-placeholder h3 { font-size: var(--fs-h3); }
 .charter-prose { max-width: min(680px, 68ch); }
 .essay-index-link .reading-time, .essay-index-link .byline, .essay-index-link .num,
 #essay-search-count, .essay-nav-counter, .venture-dest, .venture-tags span, .video-label, .book-meta {
 font-size: var(--fs-tiny); letter-spacing: 0.08em; text-transform: uppercase; font-style: normal;
 }
 .topnav.scrolled { border-bottom: 1px solid var(--hairline); }
 .topnav nav a { font-size: var(--fs-tiny); letter-spacing: 0.14em; }
 .topnav nav a::after { width: 100%; transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease); }
 .topnav nav a:is(:hover, :focus-visible, .active)::after { transform: scaleX(1); }
 :focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: var(--radius); }
 .essay-search:focus-visible { outline: 2px solid var(--gold-bright); }
 ::selection { background: var(--bg-2); color: var(--gold-bright); }
 .venture-card, #home-entrance .entrance-featured, #home-entrance .entrance-path {
 border: 1px solid var(--hairline); background: var(--surface); box-shadow: var(--card-shadow);
 transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
 }
 .venture-card { background: var(--surface-2); }
 #essays-start { background: var(--surface); }
 #home-entrance .entrance-path { padding: var(--sp-5); }
 #home-entrance .reveal { transition: opacity var(--t-slow) var(--ease), transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
 .venture-card:focus-within, #home-entrance .entrance-featured:focus-within, #home-entrance .entrance-path:focus-within { border-color: var(--gold-bright); }
 @media (hover: hover) {
 .venture-card:hover, #home-entrance .entrance-featured:hover, #home-entrance .entrance-path:hover { transform: translateY(-2px); border-color: var(--gold-bright); box-shadow: var(--card-shadow); }
 }
 :where(button, .book-dl, .book-btn-col a, .entrance-browse a) { transition: transform var(--t-fast) var(--ease), color var(--t-med) var(--ease), background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
 button:active, .book-dl:active, .book-btn-col a:active, #home-entrance .entrance-browse a:active { transform: translateY(0) scale(0.98); }
 #page-home .hero h1 { font-size: var(--fs-display); letter-spacing: 0.28em; max-width: 100%; overflow-wrap: normal; }
 #page-home .hero .subtitle { font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: none; font-style: italic; padding-left: 0; }
 #page-home .hero .subtitle::before { content: "\25C6"; display: block; width: min(100%, 12rem); margin: 0 auto var(--sp-3); color: var(--gold); font-size: var(--fs-tiny); line-height: 1; background: linear-gradient(var(--gold-hair), var(--gold-hair)) left center / 44% 1px no-repeat, linear-gradient(var(--gold-hair), var(--gold-hair)) right center / 44% 1px no-repeat; }
 #page-home .crest-wrap::before { content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none; background: radial-gradient(circle, var(--gold-a04), transparent 70%); }
 ::-webkit-scrollbar { width: 10px; height: 10px; }
 ::-webkit-scrollbar-track { background: var(--bg); border-left: 1px solid var(--hairline); }
 ::-webkit-scrollbar-thumb { background: var(--gold-deep); border: 3px solid var(--bg); border-radius: var(--radius); }
 #reader-top { display: grid; place-items: center; width: var(--sp-8); height: var(--sp-8); padding: var(--sp-2); border: 1px solid var(--gold); border-radius: 50%; background: transparent; font-size: var(--fs-tiny); line-height: 1.15; opacity: 1; visibility: visible; transition: opacity var(--t-med) var(--ease), visibility var(--t-med), background-color var(--t-med) var(--ease), transform var(--t-fast) var(--ease); }
 #reader-top[hidden] { display: grid !important; opacity: 0; visibility: hidden; pointer-events: none; }
 #reader-top:hover { background: var(--surface); }
 .gold-rule .line, .chr-line { height: 1px; background: linear-gradient(90deg, transparent, var(--gold-hair), transparent); }
 .book-divider { background: var(--gold-hair); }
 .book-sep { color: var(--gold-hair); letter-spacing: 0; display: flex; align-items: center; justify-content: center; gap: var(--sp-4); max-width: 320px; margin: 0 auto; }
 .book-sep::before, .book-sep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-hair), transparent); }
 @media (max-width: 480px) {
 .topnav nav { gap: var(--sp-2); }
 #page-home .hero h1 { font-size: clamp(1.5rem, 6vw, 1.9rem); }
 }
 @media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { transition: none !important; }
 .charter-heading { opacity: 1 !important; animation: none !important; }
 button:active, .book-dl:active, .book-btn-col a:active, #home-entrance .entrance-browse a:active, .venture-card:hover { transform: none !important; }
 }

/* Reading-first refinements. Shared palette and original compass art are preserved. */
:root { --ink-soft: #d4c49e; --ink-faint: #c8b98f; --fs-tiny: .85rem; --header-height: 72px; }
html { scroll-padding-top: calc(var(--header-height) + 5rem); }
body { overflow-x: clip; }
[hidden] { display: none !important; }
a { text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.topnav, .topnav.scrolled { min-height: var(--header-height); padding: .5rem clamp(1rem,4vw,2rem); background: #100d08; border-bottom: 1px solid var(--gold-hair); z-index: 100; }
.topnav .brand { min-width: 44px; min-height: 44px; justify-content: center; }
.topnav nav { display:flex; flex-wrap:wrap; justify-content:center; gap:0 clamp(8px,1vw,16px); min-width:0; }
.topnav nav a { font-size: clamp(11px,.8vw,13px); letter-spacing:.035em; min-height:44px; display:flex; align-items:center; white-space:nowrap; margin:0; padding:0 2px; }

.page.active { display: block; min-height: 60vh; padding-top: var(--header-height); }
.page .hero { min-height: 0; padding: 2.5rem 1rem 1.5rem; }
.page .hero .crest-wrap { width: 100px; height: 100px; margin: 0 auto 1.25rem; }
.page .hero .charter-heading { margin: 0 auto; }
.page .hero .charter-rule { margin: .6rem auto; }
.page .section { padding: 2rem 1.5rem 4rem; }
#page-home .hero { min-height: 610px; height: auto; padding: 3rem 1.5rem 2.5rem; justify-content: center; gap: 0; }
#page-home .hero .crest-wrap { width: 150px; height: 150px; margin-bottom: 1.5rem; }
#page-home .hero h1 { font-size: clamp(2rem,5vw,4rem); letter-spacing: .12em; }
#page-home .subtitle { font-size: 1.25rem; margin: 1.25rem auto; color: var(--ink); }
#page-home .hero > .gold-rule { display: none; }
.hero-actions, .book-actions, .channel-link { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.button { display: inline-flex; min-height: 44px; padding: .65rem 1.1rem; align-items: center; justify-content: center; gap: .5rem; border: 1px solid var(--gold); color: var(--parchment); background: var(--surface-1); text-decoration: none; font: 1rem/1.3 var(--serif-body); cursor: pointer; }
.button.primary { background: var(--gold); color: #100d08; }
.button:hover { background: #302611; color: var(--parchment); }
.button.primary:hover { background: var(--parchment); color: #100d08; }
#home-entrance .entrance-lead { margin-bottom: 1.5rem; }
#home-entrance .entrance-lead::before, #home-entrance .entrance-lead::after { display: none; }
#home-entrance .entrance-featured { max-width: 760px; margin: 0 auto 2.5rem; }
#home-entrance .entrance-featured h3 { font-size: 1.5rem; }
#home-entrance .entrance-path { background: var(--surface-1); border: 1px solid var(--gold-hair); padding: 1.5rem; }
#home-entrance .entrance-path h3 { font-size: 1.35rem; }
#home-entrance .entrance-path a { font-size: 1.1rem; }
#home-entrance .entrance-browse { margin: 1.5rem 0 0; }
.author-note { padding-block: 2.5rem 4rem; border-top: 1px solid var(--gold-hair); }
.author-note h2 { color: var(--parchment); font-size: 1.8rem; margin: .6rem 0 1rem; }
.author-note p { line-height: 1.7; color: var(--ink); margin-bottom: 1rem; }
.author-note a, .footer-links a, .collection-links a { color: var(--parchment); }
.contact-profile { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 3rem; align-items: center; }
.contact-headshot { display: block; width: 100%; height: auto; border: 1px solid var(--gold-hair); }
.contact-profile-copy { min-width: 0; }
@media (max-width: 768px) {
 .contact-profile { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
 .contact-headshot { max-width: 280px; margin: 0 auto; }
}
footer { padding: 2rem 1rem; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.5rem auto 0; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; font-size: 1rem; }
.eyebrow { color: var(--ink-soft); font-size: .85rem; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }
.section-intro { margin: 0 auto 2rem; color: var(--ink); font-size: 1.2rem; line-height: 1.7; text-align: center; }
.library-tools { display: grid; grid-template-columns: 2fr 1.3fr 1.2fr auto; gap: 1rem; align-items: end; padding: 1.5rem; background: var(--surface-1); border: 1px solid var(--gold-hair); }
.library-tools label { color: var(--ink); font-size: 1rem; display: grid; gap: .5rem; }
.library-tools input, .library-tools select { width: 100%; min-width: 0; min-height: 48px; padding: .65rem; border: 1px solid var(--gold-deep); border-radius: 0; background: #0d0a06; color: var(--parchment); font: 1rem var(--serif-body); }
.library-tools input::placeholder { color: var(--ink-soft); opacity: 1; }
#library-status { margin: 1.5rem 0; color: var(--ink-soft); }
.essay-grid { list-style: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 2.5rem; padding: 0; }
.essay-card { padding: 1.5rem 0; border-top: 1px solid var(--gold-hair); }
.essay-card h2 { font-size: 1.55rem; line-height: 1.3; margin: .5rem 0; }
.essay-card h2 a { color: var(--parchment); text-decoration: none; }
.essay-card h2 a:hover { text-decoration: underline; }
.essay-card p:not(.eyebrow) { color: var(--ink-soft); font-size: 1.1rem; line-height: 1.65; }
.collection-links { display: flex; flex-wrap: wrap; gap: 1.5rem; border-top: 1px solid var(--gold-hair); padding-top: 2rem; margin-top: 2rem; }
.reader-toolbar { position: sticky; top: var(--header-height); z-index: 40; background: #100d08; border-bottom: 1px solid var(--gold-hair); display: flex; gap: 1rem; align-items: center; padding-block: .6rem; }
.reader-toolbar > a { color: var(--parchment); margin-right: auto; white-space: nowrap; }
.reader-toolbar > span { white-space: nowrap; font-size: .95rem; color: var(--ink-soft); }
.reader-layout { display: grid; margin-block: 2.5rem; }
.reader-layout aside { font-size: 1rem; line-height: 1.5; align-self: start; position: sticky; top: calc(var(--header-height) + 5.5rem); max-height: calc(100vh - var(--header-height) - 7rem); overflow-y: auto; padding: 0 .5rem 1rem 0; }
.reader-contents summary { color: var(--parchment); cursor: pointer; padding: .75rem 0; }
.reader-contents ol { padding-left: 1.3rem; }
.reader-contents a { color: var(--ink-soft); display: block; padding: .4rem 0; }
.reader-byline { margin: 1rem 0; color: var(--ink-soft); }
.reader-layout .charter-prose { width: 100%; margin: 0; }
.reading-page .charter-prose h1 { color: var(--parchment); font-size: clamp(2rem,3vw,2.7rem); line-height: 1.2; margin: 0 0 1.2rem; text-align: left; }
.reading-page .charter-prose h1 + p:not(#x) { text-align: left; color: var(--ink-soft); font-size: var(--t-body); line-height: 1.6; margin-bottom: 2rem; }
.reading-page .charter-prose h2 { font-size: 1.45rem; color: var(--gold); margin: 2rem 0 .75rem; line-height: 1.3; }
.reading-page .charter-prose p { font-size: 1.25rem; line-height: 1.8; text-align: left; }
.reading-page::before, .reading-page::after { opacity: .2; }
.adjacent-essays { display: flex; justify-content: space-between; gap: 2rem; margin-block: 2rem 4rem; border-top: 1px solid var(--gold-hair); }
.adjacent-essays a { color: var(--parchment); flex: 1; max-width: 45%; }
.adjacent-essays a:last-child { text-align: right; }

.book-row { display: grid; grid-template-columns: 220px 1fr; gap: 3rem; align-items: start; padding: 2rem 0 3rem; margin-bottom: 2rem; border-bottom: 1px solid var(--gold-hair); }
.book-cover { min-height: 310px; padding: 1.5rem; border: 1px solid var(--gold); box-shadow: inset 5px 0 #211a0e, 4px 5px 0 var(--gold-a35); background: var(--surface-1); color: var(--parchment); text-decoration: none; display: flex; flex-direction: column; text-align: center; justify-content: space-between; gap: 1rem; }
.book-cover > span { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.book-cover strong { font-size: 1.65rem; line-height: 1.2; font-weight: 400; }
.book-cover .cover-ornament { font-size: 2rem; color: var(--gold); }
.cover-1,.cover-4 { background: #24201b; }
.cover-2,.cover-5 { background: var(--surface-1); }
.book-row h2 { color: var(--parchment); font-size: 1.9rem; margin: 0 0 .5rem; }
.book-row p { margin: 0 0 1rem; line-height: 1.7; color: var(--ink); }
.book-row .book-subtitle { color: var(--ink-soft); font-style: italic; }
.book-row .book-meta { color: var(--ink-soft); font-size: .9rem; }
.book-actions { justify-content: start; margin: 1.5rem 0; }
.video-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.video-card a { color: var(--parchment); text-decoration: none; }
.video-card img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; background: var(--surface-1); border: 1px solid var(--gold-hair); }
.video-card h2 { margin: .5rem 0; font-size: 1.35rem; line-height: 1.4; }
.video-card .eyebrow { display: block; margin-top: 1rem; }
.video-card a:hover h2 { text-decoration: underline; }
@media (max-width: 1024px) {
 .library-tools { grid-template-columns: 1fr 1fr; }
 .reader-layout aside { position: static; max-height: none; }
 .reader-contents { border-bottom: 1px solid var(--gold-hair); }
 .reader-byline { display: inline-block; margin-right: 1rem; }
}
.menu-toggle { display:none; }
/* Compact rows on tablets; the home page uses a disclosure on mobile. */
@media (max-width: 1200px) {
 :root { --header-height:0px; }
 .topnav,.topnav.scrolled { position:relative; padding:8px 12px; gap:8px; align-items:flex-start; }
 .topnav .brand { flex:0 0 28px; min-width:28px; }
 .topnav nav { flex:1; gap:0 12px; }
 .topnav nav a { font-size:12px; letter-spacing:.015em; min-height:36px; }
}
@media (max-width: 768px) {
 body[data-page="home"] .topnav { flex-wrap:wrap; align-items:center; }
 .menu-toggle { display:block; margin-left:auto; min-height:44px; padding:0 1rem; color:var(--gold-bright); background:transparent; border:1px solid var(--gold-hair); font:inherit; cursor:pointer; }
 .topnav nav.mobile-menu { display:none; flex-basis:100%; }
 .menu-toggle[aria-expanded="true"] + nav.mobile-menu { display:flex; justify-content:flex-start; }
 .topnav nav.mobile-menu a { min-height:44px; }
}
@media (max-width: 768px) {
 #page-home .hero { min-height: 500px; padding: 2rem 1.25rem; }
 #page-home .hero .crest-wrap { width: 112px; height: 112px; margin-bottom: 1rem; }
 #page-home .hero h1 { font-size: clamp(1.7rem,7vw,2.5rem); letter-spacing: .1em; }
 #page-home .subtitle { max-width: 26ch; font-size: 1.1rem; line-height: 1.5; }
 .hero-actions { gap: .6rem; }
 .hero-actions .button { padding: .65rem .8rem; }
 .page .hero { padding-top: 1.5rem; }
 .page .section { padding: 1.5rem 1.25rem 3rem; }
 .reader-toolbar { gap: .5rem; padding: .5rem .75rem; }
 .reader-toolbar > span { display: none; }
 .reader-toolbar .button { padding: .5rem .65rem; font-size: .95rem; }
 .reader-toolbar > a { font-size: 1rem; }
 .reader-layout { margin-top: 1rem; padding: 0 1.25rem; }
 .reading-page .charter-prose p { font-size: 1.2rem; }
 .essay-grid { grid-template-columns: 1fr; }
 .library-tools { padding: 1rem; gap: 1rem; }
 .library-tools label:first-child { grid-column: 1/-1; }
 .library-tools .button { grid-column: 1/-1; }
 .book-row { grid-template-columns: 1fr; gap: 1.5rem; }
 .book-cover { width: 210px; margin: auto; }
 .book-row h2 { font-size: 1.7rem; }
 .video-grid { grid-template-columns: 1fr; }
 .video-card { max-width: 420px; margin: 0 auto; }
}
@media print {
 .topnav,.reader-toolbar,.reader-layout aside,.adjacent-essays,footer { display: none !important; }
 .page.active { padding: 0; }
 .reader-layout { display: block; }
}
/* Keep controls attached to the viewport, not an overflow-clipped main element. */
main { overflow: visible; }
.page:not(#page-home) .hero { min-height: 0; padding: 2rem 1rem 1rem; }
.hero .charter-heading, .hero .subtitle { opacity: 1; animation: none; transform: none; }
#page-home .hero .subtitle { font-size: 1.15rem; color: var(--ink); }
#page-home .hero .subtitle::before { display: none; }
#home-entrance .entrance-featured { background: var(--surface-1); }
@media (max-width: 768px) {
 .page:not(#page-home) .hero { padding-top: 1.5rem; }
}
/* Reading navigation is immediate, so section jumps cannot compete with Top. */
html { scroll-behavior: auto; }

/* Catalog thumbnails are rendered from the actual PDF cover pages. */
.book-cover.actual-cover{padding:0;min-height:0;display:block;border:0;background:transparent;box-shadow:3px 5px 0 var(--gold-a35)}
.actual-cover img{display:block;width:100%;height:auto}
#page-books>.hero{padding-bottom:1.5rem}
#page-books .section-intro{margin-bottom:2rem}

/* Illustrated collection surfaces, in the site's existing typography and palette. */
body { -webkit-font-smoothing: antialiased; }
h1,h2,h3 { text-wrap: balance; }
.button { transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out; }
.collection-drawing { width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.5; }
.collection-drawing .drawing-faint { opacity:.25;stroke-dasharray:3 5; }
.collection-drawing .drawing-dot { fill:currentColor; }
#page-home::before,#page-home::after { display:none; }
#page-home .hero { display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4rem;padding-block:4rem;min-height:650px; }
.home-hero-copy { text-align:left;min-width:0; }
#page-home .hero .crest-wrap { width:90px;height:90px;margin:0 0 2rem; }
#page-home .hero .charter-heading { text-align:left; }
#page-home .hero .charter-rule { display:none; }
#page-home .hero h1 { font-size:clamp(2.8rem,4.7vw,4.8rem);letter-spacing:.025em;line-height:1.08;max-width:11ch;overflow-wrap:normal;background:none;color:var(--parchment);font-weight:400; }
#page-home .hero .subtitle { font-size:1.3rem;line-height:1.6;text-align:left;max-width:30ch;margin:1.5rem 0;color:var(--ink); }
#page-home .hero-actions { justify-content:flex-start; }
.collection-discover { padding-block:4rem;border-top:1px solid var(--gold-hair); }
.collection-discover>header { display:flex;justify-content:space-between;gap:2rem;align-items:end;margin-bottom:2.5rem; }
.collection-discover h2 { font:400 clamp(2.5rem,4vw,4rem)/1.05 var(--serif-display);color:var(--parchment);margin:.75rem 0 0;letter-spacing:-.02em; }
.collection-discover h2 em { color:var(--gold); }
.collection-discover>header>p { color:var(--ink-soft);font-size:1.2rem;line-height:1.6; }
.collection-paths { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem; }
.collection-path { min-width:0;color:var(--parchment);text-decoration:none;border:1px solid var(--gold-hair);background:var(--surface-1);transition:border-color 150ms ease-out; }
.collection-path:nth-child(2) { background:var(--surface-1); }
.collection-path:nth-child(3) { background:var(--surface-1); }
.collection-path:hover { border-color:var(--gold); }
.collection-path-art { height:280px;overflow:hidden;border-bottom:1px solid var(--gold-hair); }
.collection-path-art img { width:100%;height:100%;object-fit:cover;display:block;outline:1px solid rgb(255 255 255 / .1);outline-offset:-1px; }
.portrait-art { background:#dfcfad; }
.portrait-art img { object-position:center 30%; }
.geometry-art { display:flex;align-items:center;justify-content:center;color:#d9c89b;background:radial-gradient(circle at center,var(--surface-2),transparent 70%); }
.geometry-art svg { max-width:350px; }
.collection-path-copy { padding:1.5rem; }
.collection-path h3 { font:400 1.9rem/1.15 var(--serif-display);margin:.7rem 0;color:var(--parchment); }
.collection-path-copy>p:not(.eyebrow) { color:var(--ink-soft);font-size:1.1rem;line-height:1.6;margin:.8rem 0 1.3rem; }
.collection-path-copy>span { font-size:1rem;color:var(--gold);display:block;min-height:30px; }
.collection-credit { font-size:.8rem;line-height:1.6;color:var(--ink-soft);margin:1rem 0 0; }
.collection-credit a { color:inherit; }
#home-entrance .entrance-featured { max-width:none;text-align:left;padding:2.5rem 3rem;border-left:3px solid var(--gold);background:var(--surface-1); }
#home-entrance .entrance-featured::before { display:none; }
#home-entrance .entrance-featured .charter-heading { text-align:left; }
#home-entrance .entrance-featured h3 { font-size:2rem;max-width:30ch;line-height:1.2; }
#home-entrance .entrance-featured p { max-width:65ch; }
#home-entrance .entrance-path { position:relative;padding-top:1rem;background:var(--surface-1); }
#home-entrance .entrance-path>.collection-drawing { width:100px;height:86px;color:var(--gold);display:block;margin-bottom:1rem; }
#page-home>.author-note { display:grid;grid-template-columns:180px 1fr;gap:2.5rem;align-items:center;padding:3rem 0 4rem; }
.home-author-portrait { width:180px;height:225px;object-fit:cover;border:1px solid var(--gold-hair); }
.page:not(#page-home) .hero.illustrated-hero { display:grid;grid-template-columns:1fr 1fr;gap:3rem;padding-block:3rem;align-items:center;min-height:380px; }
.illustrated-hero .illustrated-heading { min-width:0;text-align:left; }
.page .illustrated-hero .crest-wrap { width:65px;height:65px;margin:0 0 1.5rem; }
.illustrated-hero .charter-rule { display:none; }
.illustrated-hero .charter-heading { text-align:left; }
.illustrated-hero h1 { font-size:clamp(2.3rem,3.6vw,3.5rem);line-height:1.12;letter-spacing:.035em; }
.illustrated-hero .subtitle { text-align:left;margin:1rem 0;max-width:35ch; }
.collection-hero-art { margin:0;position:relative; }
.collection-hero-art>img { display:block;width:100%;height:280px;object-fit:cover;outline:1px solid rgb(255 255 255 / .1);outline-offset:-1px; }
.collection-hero-art figcaption { font-size:.85rem;color:var(--ink-soft);margin-top:.7rem; }
.collection-line-art { color:var(--gold);border:1px solid var(--gold-hair);background:var(--surface-2); }
.collection-line-art>svg { display:block;height:275px; }
.collection-cover-stack { display:flex;justify-content:center;align-items:center;padding:1rem 1rem 1.5rem;min-height:300px; }
.collection-cover-stack img { display:block;width:32%;height:auto;max-height:290px;object-fit:contain;box-shadow:8px 12px 20px #0006; }
.collection-cover-stack img:first-child { transform:rotate(-9deg) translateX(12px); }
.collection-cover-stack img:nth-child(2) { z-index:1;transform:translateY(-10px); }
.collection-cover-stack img:last-child { transform:rotate(9deg) translateX(-12px); }
.collection-library-note { display:grid;grid-template-columns:120px 1fr;gap:2rem;align-items:center;padding:1.5rem;margin:0 0 2.5rem;background:var(--surface-1);border:1px solid var(--gold-hair); }
.collection-library-note img { width:120px;height:150px;object-fit:cover;object-position:center 25%; }
.collection-library-note h2 { color:var(--parchment);font:400 1.75rem/1.2 var(--serif-display);margin:.5rem 0; }
.collection-library-note p:not(.eyebrow) { font-size:1.1rem;color:var(--ink-soft);line-height:1.6;margin:.5rem 0; }
.collection-library-note a { display:inline-block;padding:.5rem 0;color:var(--gold); }
.essay-card .eyebrow::before { content:'';width:8px;height:8px;border:1px solid var(--gold);display:inline-block;transform:rotate(45deg);margin-right:10px; }
.essay-card h2 a { text-decoration-thickness:1px; }
.venture-card>.collection-drawing { display:block;height:180px;color:var(--gold);border-bottom:1px solid var(--gold-hair);margin-bottom:1.5rem;background:var(--surface-2); }
.book-row { padding-top:2.5rem; }

.video-card { border-bottom:1px solid var(--gold-hair);padding-bottom:1.5rem; }
.video-card a { position:relative;display:block; }
.video-card a::after { content:'▶';position:absolute;top:1rem;left:1rem;width:40px;height:40px;display:grid;place-items:center;background:#100d08e8;border:1px solid var(--gold);color:var(--gold);font-size:14px;padding-left:2px;pointer-events:none; }
.contact-profile { border:1px solid var(--gold-hair);padding:2.5rem;background:var(--surface-1); }
footer { border-top:1px solid var(--gold-hair);background:#0f0c07; }
@media(max-width:1024px) { #page-home .hero { gap:2rem;padding-block:3rem; } .collection-path-art { height:220px; } }
@media(max-width:768px) {
 #page-home .hero { grid-template-columns:1fr;gap:2.5rem;padding-block:2rem;min-height:0; }
 #page-home .hero h1 { font-size:clamp(2.4rem,9vw,4rem);max-width:none; }
 #page-home .hero .crest-wrap { width:72px;height:72px;margin-bottom:1.25rem; }
 #page-home .hero .subtitle { font-size:1.2rem;max-width:30ch;margin:1.2rem 0; }
 .collection-discover { padding-block:3rem; }
 .collection-discover>header { display:block; }
 .collection-discover>header>p { margin-top:1.25rem; }
 .collection-paths { grid-template-columns:1fr; }
 .collection-path-art { height:280px; }
 .portrait-art img { object-fit:contain; }
 .collection-path-copy { padding:1.25rem; }
 #home-entrance .entrance-featured { padding:1.5rem; }
 #home-entrance .entrance-featured h3 { font-size:1.65rem; }
 #page-home>.author-note { grid-template-columns:100px 1fr;gap:1.25rem;margin:0 1.25rem;padding:2rem 0;align-items:start; }
 .home-author-portrait { width:100px;height:125px; }
 #page-home>.author-note h2 { font-size:1.5rem; }
 .page:not(#page-home) .hero.illustrated-hero { grid-template-columns:1fr;gap:1.5rem;padding-block:2rem;min-height:0; }
 .collection-hero-art>img { height:220px; }
 .collection-line-art>svg { height:200px; }
 .collection-cover-stack { min-height:220px;max-width:380px;margin:auto; }
 .collection-cover-stack img { max-height:240px; }
 .collection-library-note { grid-template-columns:75px 1fr;gap:1rem;padding:1rem; }
 .collection-library-note img { width:75px;height:100px; }
 .collection-library-note h2 { font-size:1.45rem; }
 .contact-profile { padding:1.5rem; }
}
@media(prefers-reduced-motion:reduce) { .button,.collection-path { transition:none; } }
@media print { .collection-hero-art,.home-hero-compass,.collection-cover-stack,.collection-discover,.collection-library-note { display:none; } }
#page-home .home-hero-copy>.gold-rule { display:none; }
/* Second pass: quieter home, page-specific artwork, compact reading paths. */
.page::before,.page::after { display:none; }
#page-home .hero { min-height:620px;grid-template-columns:1.05fr 1fr;gap:5rem;padding-block:3.5rem; }
#page-home .hero .crest-wrap { width:54px;height:54px;margin-bottom:1.6rem; }
#page-home .home-overline { color:var(--ink-soft);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;text-align:left;margin:0 0 1.3rem; }
#page-home .hero h1 { font-family:var(--serif-body);text-transform:none;font-size:clamp(4.4rem,7vw,7.2rem);letter-spacing:-.045em;line-height:.92;max-width:none; }
#page-home .hero h1 em { font-weight:400;color:var(--gold); }
#page-home .hero .subtitle { max-width:32ch;font-size:1.25rem;line-height:1.5;margin:1.6rem 0; }
#page-home .hero-actions .button { padding:.8rem 1.2rem;font-size:1rem; }
#page-home .hero-actions .button:not(.primary) { border-color:transparent;background:transparent;text-decoration:underline;text-underline-offset:6px; }
.collection-discover h2 { font-family:var(--serif-body);font-size:clamp(2.5rem,3.8vw,3.5rem); }
.collection-paths { gap:2rem; }
.collection-path,.collection-path:nth-child(2),.collection-path:nth-child(3) { border:0;background:transparent; }
.collection-path-art { height:235px;border-bottom:0; }
.collection-path-copy { padding:1.25rem 0;border-bottom:1px solid var(--gold-hair); }
.collection-path-copy .eyebrow { text-align:left;font-size:.75rem; }
.collection-path h3 { font-family:var(--serif-body);font-size:1.8rem; }
.collection-path:hover h3 { color:var(--gold); }
.history-art { background:var(--surface-2);display:grid;place-items:center;color:var(--gold); }
.history-art svg { max-width:330px;max-height:235px; }
#home-entrance .entrance-lead { text-align:left;font-size:1.2rem;margin-bottom:1rem; }
#home-entrance .entrance-featured { border:0;border-top:1px solid var(--gold-hair);border-bottom:1px solid var(--gold-hair);background:transparent;padding:2rem 0;margin-bottom:2rem; }
#home-entrance .entrance-featured h3 { font-family:var(--serif-body);font-size:2rem;max-width:40ch; }
#home-entrance>.charter-heading { text-align:left;font-size:.8rem;letter-spacing:.12em; }
#home-entrance .entrance-paths { display:block; }
#home-entrance .entrance-path { background:transparent;border:0;border-bottom:1px solid var(--gold-hair);padding:0; }
#home-entrance .entrance-path summary { cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font:1.35rem var(--serif-body);color:var(--parchment);padding:1.2rem 0; }
#home-entrance .entrance-path summary::-webkit-details-marker { display:none; }
#home-entrance .entrance-path summary>span { color:var(--gold); }
#home-entrance .entrance-path[open] summary>span { transform:rotate(45deg); }
#home-entrance .entrance-path ul { margin:0;padding:0 0 1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 2rem; }
#home-entrance .entrance-path li { padding:.3rem 0; }
#page-home>.author-note { display:block; }
#page-home>.author-note>p,#page-home>.author-note>h2 { max-width:680px; }
.collection-library-note>.collection-drawing { color:var(--gold);max-height:150px; }
@media(max-width:1024px) { #page-home .hero { gap:2.5rem; } }
@media(max-width:768px) {
 #page-home .hero { grid-template-columns:1fr;gap:2rem;padding-block:2rem;min-height:0; }
 #page-home .hero h1 { font-size:clamp(4.5rem,15vw,6rem); }
 #page-home .hero .crest-wrap { width:44px;height:44px;margin-bottom:1.3rem; }
 #page-home .home-overline { font-size:.7rem; }
 .collection-paths { gap:2rem; }
 .collection-path { display:grid;grid-template-columns:115px 1fr;gap:1.2rem;align-items:start; }
 .portrait-art img { object-fit:cover; }
 .collection-path-copy { padding:0 0 1rem; }
 .collection-path h3 { font-size:1.6rem; }
 .collection-path-copy>p:not(.eyebrow) { font-size:1rem;line-height:1.5;margin:.6rem 0; }
 .collection-path-copy>span { font-size:.9rem; }
 #home-entrance .entrance-featured { padding:1.5rem 0; }
 #home-entrance .entrance-featured h3 { font-size:1.75rem; }
 #home-entrance .entrance-path ul { grid-template-columns:1fr; }
 
}

/* ============================================================
   DESIGN SYSTEM, phase 1
   One container, one type scale, one button, one radius.
   Loaded last so these primitives win over earlier passes.
   Palette, fonts and compass artwork are unchanged.
   ============================================================ */
:root {
 /* Container. Every top-level block uses this and nothing else. */
 --shell: 1240px;
 --gutter: clamp(1.25rem, 4vw, 3rem);

 /* Type scale, eight roles. Nothing outside this set. */
 --t-label: 0.8rem;                        /* eyebrows, meta, captions   */
 --t-ui: 1rem;                             /* buttons, nav, forms, footer */
 --t-body: 1.15rem;                        /* default body copy           */
 --t-read: 1.25rem;                        /* long-form prose, leads      */
 --t-h3: 1.5rem;                           /* card and sub headings       */
 --t-h2: 1.9rem;                           /* section headings            */
 --t-h1: clamp(2.2rem, 3.4vw, 3rem);       /* page titles                 */
 --t-display: clamp(3.4rem, 6.8vw, 6.2rem);/* home hero only              */

 /* Line length. Prose is capped by role, never by pixel width. */
 --measure-prose: 68ch;
 --measure-lead: 52ch;
 --measure-card: 42ch;

 --radius: 2px;
}

/* ============================================================
   THE CONTAINER
   ============================================================ */
.shell,
#page-home .hero,
.page:not(#page-home) .hero.illustrated-hero,
.collection-discover,
#home-entrance,
#page-home > .author-note,
.page .section,
.library,
.book-shelf,
.video-section,
.contact-profile,
.author-note,
#beyond-section,
.adjacent-essays,
.reader-layout {
 width: 100%;
 max-width: var(--shell);
 margin-inline: auto;
 padding-inline: var(--gutter);
}

/* Blocks that carry their own vertical padding keep it; only the
   horizontal axis is claimed by the container. */
.page .section { padding-block: 2rem 4rem; }
.collection-discover { padding-block: 3rem; }
#page-home > .author-note { padding-block: 2rem 3rem; }
.adjacent-essays { padding-block: 1.5rem; }

/* The reading grid centres inside the container instead of hugging
   the left edge and leaving the right rail dead. */
.reader-layout {
 grid-template-columns: minmax(0, 250px) minmax(0, 700px);
 justify-content: center;
 gap: 3rem;
}
.reader-toolbar { padding-inline: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter))); }

/* ============================================================
   TYPE SCALE, applied
   ============================================================ */
.eyebrow,
.collection-path-copy .eyebrow,
.essay-card .eyebrow,
.chr-fleuron,
footer .colophon,
footer .motto,
.collection-credit,
.home-hero-image figcaption,
.collection-hero-art figcaption,
.book-row .book-meta,
.reader-toolbar > span,
#page-home .home-overline,
#home-entrance > .charter-heading,
#home-entrance h2.charter-heading { font-size: var(--t-label); }

.button,
.topnav nav a,
.footer-links a,
.library-tools label,
.library-tools input,
.library-tools select,
.collection-path-copy > span { font-size: var(--t-ui); }

body,
#home-entrance .entrance-path a,
.footer-links a,
.author-note p,
.book-row p,
.essay-card p:not(.eyebrow),
.collection-path-copy > p:not(.eyebrow),
.collection-library-note p:not(.eyebrow) { font-size: var(--t-body); }

.section-intro,
.entrance-lead,
#home-entrance .entrance-lead,
.collection-discover > header > p,
#page-home .hero .subtitle,
.reading-page .charter-prose p { font-size: var(--t-read); }

.collection-path h3,
.video-card h2,
.essay-card h2,
.collection-library-note h2,
#home-entrance .entrance-path summary,
.reading-page .charter-prose h2 { font-size: var(--t-h3); }

.author-note h2,
.book-row h2,
.section-title,
#home-entrance .entrance-featured h3 { font-size: var(--t-h2); }

.illustrated-hero h1,
.reading-page .charter-prose h1,
.collection-discover h2 { font-size: var(--t-h1); }

#page-home .hero h1 { font-size: var(--t-display); }

/* ============================================================
   MEASURE
   ============================================================ */
.author-note p,
.book-row p,
.reading-page .charter-prose p,
#page-home > .author-note > p,
#page-home > .author-note > h2,
#home-entrance .entrance-featured p { max-width: var(--measure-prose); }

.section-intro,
#home-entrance .entrance-lead,
.collection-discover > header > p,
#page-home .hero .subtitle,
.illustrated-hero .subtitle { max-width: var(--measure-lead); }

.collection-path-copy > p:not(.eyebrow),
.collection-library-note p:not(.eyebrow),
.essay-card p:not(.eyebrow) { max-width: var(--measure-card); }

.collection-discover > header > p { flex: 0 1 var(--measure-lead); }
.section-intro { margin-inline: auto; }

/* ============================================================
   BUTTONS, three tiers, one component
   ============================================================ */
.button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: .5rem;
 min-height: 46px;
 padding: .7rem 1.25rem;
 border: 1px solid var(--gold);
 border-radius: var(--radius);
 background: #151109;
 color: var(--parchment);
 font: var(--t-ui)/1.3 var(--serif-body);
 text-decoration: none;
 cursor: pointer;
}
.button.primary { background: var(--gold); border-color: var(--gold); color: #100d08; }
.button.tertiary {
 min-height: 0;
 padding: 0;
 border: 0;
 border-radius: 0;
 background: transparent;
 color: var(--gold);
 text-decoration: underline;
 text-decoration-color: transparent;
 text-underline-offset: .35em;
}
.button:hover { background: #302611; color: var(--parchment); }
.button.primary:hover { background: var(--parchment); border-color: var(--parchment); color: #100d08; }
.button.tertiary:hover { background: transparent; color: var(--gold-bright); text-decoration-color: currentColor; }

/* The home hero's second action is a real button, not a bare underline. */
#page-home .hero-actions .button { padding: .7rem 1.25rem; font-size: var(--t-ui); }
#page-home .hero-actions .button:not(.primary) {
 border-color: var(--gold);
 background: #151109;
 text-decoration: none;
}
#page-home .hero-actions .button:not(.primary):hover { background: #302611; }

/* Card links read as one tier across the site. */
.collection-path-copy > span,
#home-entrance .entrance-browse a {
 color: var(--gold);
 text-decoration: underline;
 text-decoration-color: transparent;
 text-underline-offset: .35em;
}
#home-entrance .entrance-browse a {
 display: inline-block;
 min-height: 0;
 padding: 0;
 border: 0;
 background: transparent;
 font: var(--t-ui)/1.3 var(--serif-body);
}
.collection-path:hover .collection-path-copy > span,
#home-entrance .entrance-browse a:hover { text-decoration-color: currentColor; }

/* ============================================================
   RADIUS, one value everywhere a corner is softened
   ============================================================ */
.library-tools input,
.library-tools select,
.venture-card,
.venture-tags span,
.essay-search,
.video-frame,
.collection-path-art,
.contact-profile { border-radius: var(--radius); }

/* ============================================================
   NAVIGATION, five items and a full index
   ============================================================ */
.topnav nav { justify-content: flex-end; gap: 0 clamp(14px, 1.6vw, 30px); flex-wrap: wrap; }
.topnav nav a { letter-spacing: .14em; padding: 0 2px; }

.nav-index { position: relative; }
.nav-index > summary {
 display: flex;
 align-items: center;
 gap: .45rem;
 min-height: 44px;
 list-style: none;
 cursor: pointer;
 color: var(--ink-soft);
 font-family: var(--serif-head);
 font-size: var(--t-ui);
 letter-spacing: .14em;
 text-transform: uppercase;
 white-space: nowrap;
}
.nav-index > summary::-webkit-details-marker { display: none; }
.nav-index > summary::after {
 content: "+";
 color: var(--gold);
 font-size: 1.1em;
 line-height: 1;
}
.nav-index[open] > summary::after { content: "\00d7"; }
.nav-index > summary:hover { color: var(--parchment); }

.nav-index-panel {
 position: absolute;
 right: 0;
 top: calc(100% + .55rem);
 z-index: 120;
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 1.5rem 2.25rem;
 width: min(92vw, 660px);
 padding: 1.6rem 1.8rem;
 background: #100d08;
 border: 1px solid var(--gold-faint);
 border-radius: var(--radius);
 box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 18px 44px -18px rgba(0,0,0,.85);
 text-align: left;
}
.nav-index-panel h2 {
 margin: 0 0 .55rem;
 color: var(--gold-deep);
 font-family: var(--serif-head);
 font-size: var(--t-label);
 letter-spacing: .16em;
 text-transform: uppercase;
}
.nav-index-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.topnav nav .nav-index-panel a {
 display: flex;
 align-items: center;
 min-height: 34px;
 padding: .25rem 0;
 color: var(--parchment);
 font-family: var(--serif-body);
 font-size: var(--t-ui);
 letter-spacing: normal;
 text-transform: none;
 text-align: left;
 white-space: normal;
 line-height: 1.35;
}
.topnav nav .nav-index-panel a:hover { color: var(--gold-bright); }

@media (max-width: 1024px) {
 .nav-index-panel {
  position: static;
  width: 100%;
  max-width: none;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-top: .6rem;
  box-shadow: none;
 }
}
@media (max-width: 768px) {
 .topnav nav { justify-content: flex-start; }
 .nav-index { width: 100%; }
}

/* ============================================================
   RESPONSIVE, one breakpoint set: 768 / 1024 / 1200
   ============================================================ */
@media (max-width: 1024px) {
 .reader-layout { grid-template-columns: minmax(0, 700px); justify-content: center; gap: 1rem; }
 .reader-layout aside { position: static; max-height: none; }
}
@media (max-width: 768px) {
 #page-home .hero .subtitle,
 .illustrated-hero .subtitle { max-width: 30ch; }
 .collection-discover > header > p { flex: 1 1 auto; }
}

/* ============================================================
   TOUCH TARGETS, nothing interactive under 24px
   ============================================================ */
#home-entrance .entrance-path li { padding-block: .35rem; }
#home-entrance .entrance-path a,
.collection-credit a,
.author-note a,
.reader-contents a { display: inline-block; min-height: 24px; padding-block: .2rem; }
#home-entrance .entrance-browse a { min-height: 24px; padding-block: .25rem; }

/* ============================================================
   HEADER AND FOOTER ON THE SAME GRID AS THE CONTENT
   ============================================================ */
.topnav, .topnav.scrolled,
footer { padding-inline: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter))); }

/* ============================================================
   ALIGNMENT, one axis per block
   Eyebrows and section links follow their block, they do not
   centre themselves while the heading beside them ranges left.
   ============================================================ */
.author-note .eyebrow,
#page-home > .author-note .eyebrow,
.collection-path-copy .eyebrow,
.collection-discover .eyebrow { text-align: left; }
#home-entrance .entrance-browse { text-align: left; }

/* Every block ranges left on the container axis. Centred text inside a
   left-ranged block was the mixed-axis tell on home, essays and books. */
.section-intro,
.collection-library-note .eyebrow,
.venture-dest,
.book-shelf .eyebrow,
.video-section .eyebrow { text-align: left; }
.section-intro { margin-inline: 0; }

/* The brand mark starts on the container edge rather than centring
   itself inside its own 44px hit area. */
.topnav .brand { justify-content: flex-start; }

/* Ventures shares the container. Empty tracks are kept so two cards
   read as a shelf with room, not as two items centred in a wide page. */
.ventures-grid,
.video-grid { max-width: none; margin-inline: 0; }
.ventures-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }

/* Shared prose components that sit outside the reading pages but use the
   same charter markup: companion essays, Beyond, the discourses. */
.charter-prose h2 { font-size: var(--t-h3); }
.charter-prose p { font-size: var(--t-read); max-width: var(--measure-prose); }
.venture-dest { font-size: var(--t-label); }
.venture-card p { font-size: var(--t-body); max-width: var(--measure-card); }
#page-contact p, #page-contact a { font-size: var(--t-body); }
.venture-tags span { font-size: var(--t-label); border-radius: var(--radius); }
#page-ventures .section > p:last-child { font-size: var(--t-label); }
#page-contact p, #page-contact a, #page-contact li { font-size: var(--t-body); }

/* ============================================================
   HOME HERO COMPASS
   The compass rose is the hero visual. It keeps its existing
   artwork, glow and click behaviour, at reading scale.
   ============================================================ */
.home-hero-compass {
 margin: 0;
 align-self: center;
 display: grid;
 justify-items: center;
 gap: 1.75rem;
 /* The compass glow is ink, not layout, and the SVG filter region scales
    with the artwork. Reserving a proportional gutter keeps the glow from
    spilling past the column and adding to the document scroll width. */
 padding-inline: 12%;
}
#page-home .hero .home-hero-compass .crest-wrap {
 width: min(100%, 440px);
 height: auto;
 aspect-ratio: 1;
 margin: 0;
}
/* Only the duration changes, so the reduced-motion rule that clears
   animation-name on this SVG still wins. */
#page-home .home-hero-compass .crest-wrap svg {
 animation-duration: 60s;
 filter: drop-shadow(0 4px 24px var(--gold-a35));
}
#page-home .home-hero-compass .crest-wrap:hover svg { animation-duration: 20s; }
/* The click ripple is sized to the compass it comes from. */
.home-hero-compass .ripple { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.home-hero-compass figcaption {
 font-size: var(--t-label);
 color: var(--ink-soft);
 line-height: 1.6;
 letter-spacing: .025em;
 text-align: center;
 max-width: min(100%, 46ch);
}
@media (max-width: 1024px) {
 #page-home .hero .home-hero-compass .crest-wrap { width: min(100%, 360px); }
}
@media (max-width: 768px) {
 .home-hero-compass { gap: 1.25rem; padding-inline: 10%; }
 #page-home .home-hero-compass .crest-wrap svg { filter: drop-shadow(0 3px 16px var(--gold-a35)); }
 #page-home .hero .home-hero-compass .crest-wrap { width: min(72vw, 300px); }
}

/* ============================================================
   PHASE 3, MATERIAL AND DETAIL
   ============================================================ */
:root {
 /* Gold: one accent plus a highlight, and a five-step alpha ramp that
    replaces the twenty-six ad-hoc rgba values. */
 --gold-a04: rgb(201 169 97 / .04);
 --gold-a10: rgb(201 169 97 / .10);
 --gold-a18: rgb(201 169 97 / .18);
 --gold-a35: rgb(201 169 97 / .35);
 --gold-a60: rgb(201 169 97 / .60);

 /* Two raised surfaces above the page ground, so cards sit on the page
    instead of being drawn on it. */
 --surface-1: #16110a;
 --surface-2: #1d1710;
 --shadow-1: 0 1px 2px rgb(0 0 0 / .45);
 --shadow-2: 0 1px 2px rgb(0 0 0 / .45), 0 18px 40px -20px rgb(0 0 0 / .85);
 --edge-light: inset 0 1px 0 rgb(201 169 97 / .10);

 /* One motion pattern. Everything that enters does so the same way, and
    everything that responds to a pointer takes the same time. */
 --motion-rise: 8px;
 --motion-time: 400ms;
 --motion-stagger: 60ms;
 --t-ui: 180ms;
 --t-fast: var(--t-ui);
 --t-med: var(--t-ui);
 --t-slow: var(--motion-time);
 --hairline: var(--gold-a18);
}

/* ------------------------------------------------------------
   ELEVATION, spent by role
   Cards and panels lift. Prose, essay lists and the footer stay flat,
   so the lift still means something.
   ------------------------------------------------------------ */
.venture-card,
.collection-library-note,
.library-tools,
.contact-profile,
#home-entrance .entrance-featured {
 background: var(--surface-1);
 border: 1px solid var(--gold-a18);
 border-radius: var(--radius);
 box-shadow: var(--shadow-1), var(--edge-light);
}
.nav-index-panel {
 background: var(--surface-2);
 box-shadow: var(--shadow-2), var(--edge-light);
}
.venture-card:hover { border-color: var(--gold-a35); box-shadow: var(--shadow-2), var(--edge-light); }
.book-cover.actual-cover { box-shadow: 5px 8px 0 var(--gold-a18), var(--shadow-2); }

/* The featured essay keeps its gold rule, now on a raised ground. */
#home-entrance .entrance-featured {
 border-left: 3px solid var(--gold);
 padding: 2rem 2.25rem;
}

/* ------------------------------------------------------------
   MOTION, one pattern
   Fade and rise 8px over 400ms, staggered 60ms. Nothing else.
   ------------------------------------------------------------ */
@keyframes riseIn {
 from { opacity: 0; transform: translateY(var(--motion-rise)); }
 to { opacity: 1; transform: none; }
}
#page-home .hero .crest-wrap,
#page-home .home-overline,
#page-home .hero .charter-heading,
#page-home .hero .subtitle,
#page-home .hero-actions {
 opacity: 0;
 animation: riseIn var(--motion-time) var(--ease) forwards;
}
#page-home .home-overline { animation-delay: calc(var(--motion-stagger) * 1); }
#page-home .hero .charter-heading { animation-delay: calc(var(--motion-stagger) * 2); }
#page-home .hero .subtitle { animation-delay: calc(var(--motion-stagger) * 3); }
#page-home .hero-actions { animation-delay: calc(var(--motion-stagger) * 4); }
#page-home .hero .home-hero-compass .crest-wrap { animation-delay: calc(var(--motion-stagger) * 2); }

/* Pointer response is one duration everywhere. */
.button,
.collection-path,
.venture-card,
.topnav nav a,
.nav-index-panel a,
.essay-card h2 a,
.video-card a,
.footer-links a {
 transition-duration: var(--t-ui);
 transition-timing-function: var(--ease);
}

@media (prefers-reduced-motion: reduce) {
 #page-home .hero .crest-wrap,
 #page-home .home-overline,
 #page-home .hero .charter-heading,
 #page-home .hero .subtitle,
 #page-home .hero-actions { opacity: 1; animation: none; }
}

/* ------------------------------------------------------------
   NUMERALS AND PUNCTUATION
   The body sets oldstyle figures, which is right for prose and wrong
   for anything a reader compares. Counts, durations and metadata get
   lining, tabular figures.
   ------------------------------------------------------------ */
.reader-toolbar > span,
.essay-card .eyebrow,
.book-row .book-meta,
#library-status,
.reading-time,
.collection-path-copy .eyebrow,
time { font-variant-numeric: lining-nums tabular-nums; }

/* Opening quotes hang into the margin rather than indenting the line. */
blockquote, .charter-prose blockquote {
 hanging-punctuation: first last;
 text-indent: -0.4em;
}
@supports (hanging-punctuation: first) {
 blockquote, .charter-prose blockquote { text-indent: 0; }
}

/* The older crestIn and fadeUp entrances are folded into the one pattern,
   so every page enters the same way. */
.crest-wrap, .charter-heading, .hero .subtitle, .hero .tagline {
 animation-name: riseIn;
 animation-duration: var(--motion-time);
 animation-timing-function: var(--ease);
}
@media (prefers-reduced-motion: reduce) {
 .crest-wrap, .charter-heading, .hero .subtitle, .hero .tagline { animation-name: none; opacity: 1; }
}

/* ============================================================
   PHASE 2, COMPOSITION
   ============================================================ */

/* ------------------------------------------------------------
   ONE VERTICAL RHYTHM
   Sections stopped contributing margin in phase 1 and each set its
   own padding. One scale now governs the gap between every band.
   ------------------------------------------------------------ */
:root { --section-space: clamp(3.25rem, 5.5vw, 5.25rem); }
#page-home .hero,
.collection-discover,
#home-entrance,
.page .section,
.author-note,
#page-home > .author-note { padding-block: var(--section-space); }
#page-home .hero { padding-block: var(--section-space) calc(var(--section-space) * 1.15); }
.collection-discover { border-top: 1px solid var(--gold-a10); }

/* ------------------------------------------------------------
   ONE CARD
   The three doors read as a set: one ground, one ratio, one edge.
   ------------------------------------------------------------ */
.collection-path-art {
 height: auto;
 aspect-ratio: 4 / 3;
 display: grid;
 place-items: center;
 overflow: hidden;
 background: var(--surface-1);
 border: 1px solid var(--gold-a10);
 border-radius: var(--radius);
}
.portrait-art,
.geometry-art,
.history-art { background: var(--surface-1); }
.geometry-art { color: var(--gold); }
.history-art { color: var(--gold); }
.collection-path-art img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 outline: 0;
 /* The engraving arrives on white paper. Toning it to the palette stops it
    reading as a bright rectangle pasted onto a dark page. */
 filter: sepia(.62) saturate(1.15) hue-rotate(-8deg) contrast(1.04) brightness(.82);
}
.collection-path-art svg { max-width: 76%; max-height: 76%; }
/* A grid item will not shrink below its own content by default, so the
   engraving and the drawings kept their intrinsic height, overflowed a short
   frame, and were clipped by the overflow rule above. They fit the frame. */
.collection-path-art > * { min-width: 0; min-height: 0; }
.collection-path:hover .collection-path-art { border-color: var(--gold-a35); }
.collection-path-copy { padding: 1.15rem 0 1.25rem; border-bottom: 1px solid var(--gold-a10); }

/* Card art elsewhere follows the same rule. */
.collection-line-art,
.venture-card > .collection-drawing,
.collection-hero-art > img { border-radius: var(--radius); }

/* ------------------------------------------------------------
   ONE BAND HEADER
   The split header was the strongest of the three languages on the
   home page. The charter block and the author note now use it too,
   so the page reads as one publication rather than three.
   ------------------------------------------------------------ */
.band-head,
.collection-discover > header {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: end;
 gap: 1.25rem 3rem;
 margin-bottom: 2.5rem;
}
.band-head > div,
.collection-discover > header > div { min-width: 0; }
.band-head h2,
#home-entrance .band-head h2,
.collection-discover h2 {
 font-family: var(--serif-body);
 font-size: var(--t-h1);
 line-height: 1.06;
 letter-spacing: -.02em;
 color: var(--parchment);
 margin: .55rem 0 0;
}
.band-head h2 em,
#home-entrance .band-head h2 em,
.collection-discover h2 em { color: var(--gold); font-style: italic; }
.band-head > p,
#home-entrance .band-head > p,
.collection-discover > header > p {
 flex: 0 1 var(--measure-lead);
 max-width: var(--measure-lead);
 margin: 0;
 color: var(--ink-soft);
 font-size: var(--t-read);
 line-height: 1.6;
}
/* The old charter lead is replaced by the band header. */
#home-entrance .entrance-lead { display: none; }
#home-entrance > h2.charter-heading,
#home-entrance .entrance-featured h2.charter-heading { color: var(--gold-deep); }

/* Balance the three doors: the drawings fill their frame the way the
   engraving fills its own, so the set reads at one density. */
.collection-path-art svg { max-width: 92%; max-height: 92%; }
.portrait-art img { transform: scale(1.1); transform-origin: center 34%; }

/* On a phone the card is a compact row: a 115px column of art beside the copy.
   A 4:3 frame is 86px tall there, too short for a portrait engraving and for
   drawings a third again as tall as they are wide, both of which then read as
   half-loaded pictures. The three doors keep one ratio at this width too, and
   at this size square is the ratio that suits all three. */
@media (max-width: 768px) {
 .collection-path-art { aspect-ratio: 1 / 1; }
}

/* ------------------------------------------------------------
   THE READING PAGE
   A two-column grid left the prose right of the page axis and the
   rail empty. A third, balancing track centres the column, and the
   section outline opens so the rail carries something real.
   ------------------------------------------------------------ */
.reader-layout {
 /* The middle track is the measure itself, so the paragraphs fill it and
    the column centres on the page axis rather than ranging left inside a
    wider track. */
 grid-template-columns: minmax(0, 190px) minmax(0, 620px) minmax(0, 190px);
 gap: 2.5rem;
 justify-content: center;
}
/* The section headings already carry Roman numerals; decimal markers on
   top of them read as "1. I." and wrap under the text. */
.reader-contents ol { margin: 0; padding-left: 0; list-style: none; }
.reader-contents a { line-height: 1.4; }

.essay-standfirst {
 text-align: left;
 font-style: italic;
 font-size: var(--t-read);
 line-height: 1.55;
 color: var(--ink-soft);
 max-width: var(--measure-prose);
 margin-bottom: 2rem;
}
@media (max-width: 1024px) {
 .reader-layout { grid-template-columns: minmax(0, 700px); justify-content: center; }
}

/* Inside the reader the track already enforces the measure. */
.reading-page .charter-prose p,
.reading-page .charter-prose .essay-standfirst { max-width: none; }