/* ════════════════════════════════════════════════════════════════
   BAROS GLOBAL — Design System
   ════════════════════════════════════════════════════════════════

   Aesthetic: editorial / refined institutional
   Reference: Berkshire Hathaway letters, Brookfield AM, Pershing Square

   USAGE RULES:
   1. Never introduce new colors. Use only --variables below.
   2. Never introduce new fonts. Three families only.
   3. Oxblood is the ONLY accent on bone sections.
   4. Brass is the ONLY accent on ink sections.
   5. Never use bold. Use italics for emphasis.
   6. Roman numerals for section numbering.
   7. Generous whitespace is the design. Don't compress it.
   ════════════════════════════════════════════════════════════════ */


/* ─── DESIGN TOKENS ─────────────────────────────────────────── */

:root {
  /* Surfaces */
  --bone:        #F1ECE0;   /* primary background */
  --bone-warm:   #ECE6D7;   /* alternating section */
  --ink:         #14110E;   /* primary text, dark sections */
  --ink-soft:    #1F1B16;   /* body text */
  --charcoal:    #2A2620;   /* secondary text */

  /* Quiet text */
  --stone:       #807A6F;   /* tertiary, eyebrows on light */
  --stone-soft:  #A39C8E;   /* tertiary on dark */

  /* Accents — use sparingly */
  --oxblood:      #6B1F2A;  /* primary accent (light surfaces) */
  --oxblood-deep: #4E1620;  /* depth variant */
  --brass:        #9C7F3F;  /* accent on dark surfaces only */

  /* Hairlines */
  --rule:       rgba(20, 17, 14, 0.18);
  --rule-soft:  rgba(20, 17, 14, 0.08);
  --rule-dark:  rgba(241, 236, 224, 0.18);
  --rule-dark-soft: rgba(241, 236, 224, 0.12);

  /* Typography */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body:    "EB Garamond", "Georgia", serif;
  --font-mono:    "JetBrains Mono", "Courier New", monospace;

  /* Layout */
  --max-w:  1240px;
  --gutter: clamp(20px, 5vw, 56px);

  /* Section rhythm */
  --section-y: clamp(80px, 12vh, 160px);
}


/* ─── RESET / BASE ─────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  font-feature-settings: "kern", "liga", "onum";
  position: relative;
  overflow-x: hidden;
}

/* Paper grain — adds material weight, never remove */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }


/* ─── TYPOGRAPHY ─────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
}
.eyebrow .num { color: var(--oxblood); margin-right: 0.6em; }

/* Dark-section eyebrow variant */
.on-dark .eyebrow { color: var(--stone-soft); }
.on-dark .eyebrow .num { color: var(--brass); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.04;
  color: var(--ink);
  font-feature-settings: "kern", "liga", "ss01";
  margin: 0;
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--bone); }

.display-1 {
  font-size: clamp(48px, 7.5vw, 108px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.display-2 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.018em;
}
.display-3 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 400;
  line-height: 1.1;
}

.accent { color: var(--oxblood); font-style: italic; font-weight: 400; }
.on-dark .accent { color: var(--brass); }

.body-lg {
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.6;
  color: var(--ink-soft);
}
.on-dark .body-lg { color: var(--stone-soft); }

.body { font-size: 18px; line-height: 1.6; }

p em { font-style: italic; color: var(--charcoal); }
.on-dark p em { color: var(--bone); font-style: italic; }


/* ─── LAYOUT ─────────────────────────────────────────── */

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 2;
}

section { padding: var(--section-y) 0; position: relative; }
section + section { border-top: 1px solid var(--rule-soft); }
section.on-dark + section.on-dark,
section.on-dark + section.bone-warm,
.on-dark + section { border-top: 0; }

.bone-warm { background: var(--bone-warm); }
.on-dark { background: var(--ink); color: var(--bone); }


/* ─── RULES ─────────────────────────────────────────── */

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule-hair { height: 1px; background: var(--rule); width: 100%; }
.rule-short {
  width: 56px;
  height: 1px;
  background: var(--oxblood);
  margin: 0 0 28px 0;
  border: 0;
}
.on-dark .rule-short { background: var(--brass); }


/* ─── NAVIGATION ─────────────────────────────────────────── */

nav.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 280ms ease, border-color 280ms ease, padding 280ms ease;
  border-bottom: 1px solid transparent;
}
nav.top.scrolled {
  background: rgba(241, 236, 224, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--rule-soft);
  padding-top: 16px;
  padding-bottom: 16px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.32em;
  color: var(--ink);
  text-transform: uppercase;
}
.wordmark .dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--oxblood);
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 0.5em 0.18em 0.4em;
}
.on-dark .wordmark { color: var(--bone); }
.on-dark .wordmark .dot { background: var(--brass); }

nav ul.nav-links {
  display: flex;
  gap: 36px;
  margin: 0; padding: 0;
  list-style: none;
}
nav ul.nav-links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal);
  transition: color 200ms;
  position: relative;
  padding: 6px 0;
}
nav ul.nav-links a:hover { color: var(--oxblood); }
nav ul.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--oxblood);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms ease;
}
nav ul.nav-links a:hover::after,
nav ul.nav-links a.is-current::after { transform: scaleX(1); }

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
  z-index: 102;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform 220ms ease, opacity 220ms ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bone);
  z-index: 101;
  display: none;
  padding: 100px var(--gutter) 60px;
  flex-direction: column;
  justify-content: center;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu ul {
  list-style: none;
  padding: 0; margin: 0;
}
.mobile-menu li { border-bottom: 1px solid var(--rule-soft); }
.mobile-menu li:first-child { border-top: 1px solid var(--rule-soft); }
.mobile-menu a {
  display: block;
  padding: 24px 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.mobile-menu a .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--oxblood);
  letter-spacing: 0.22em;
  margin-right: 18px;
  vertical-align: 6px;
}

@media (max-width: 820px) {
  nav ul.nav-links { display: none; }
  .nav-toggle { display: block; }
}


/* ─── HERO ─────────────────────────────────────────── */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}

.hero-eyebrow { margin-bottom: 40px; opacity: 0; animation: rise 800ms 100ms ease forwards; }
.hero h1 { max-width: 16ch; margin: 0 0 48px 0; opacity: 0; animation: rise 1000ms 280ms ease forwards; }
.hero .lede {
  max-width: 52ch;
  font-size: clamp(18px, 1.5vw, 21px);
  color: var(--charcoal);
  margin: 0 0 56px 0;
  opacity: 0;
  animation: rise 900ms 520ms ease forwards;
}
.hero .lede em {
  color: var(--ink);
  font-style: normal;
  border-bottom: 1px solid var(--oxblood);
  padding-bottom: 1px;
}

.hero-foot {
  display: flex;
  align-items: center;
  gap: 24px;
  opacity: 0;
  animation: rise 900ms 760ms ease forwards;
  flex-wrap: wrap;
}
.hero-foot .stamp {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--stone);
  text-transform: uppercase;
}
.hero-foot .vbar { width: 1px; height: 14px; background: var(--rule); }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Page-level hero (smaller than homepage hero) */
.page-hero {
  min-height: 60vh;
  padding-top: 160px;
  padding-bottom: 80px;
  display: flex;
  align-items: flex-end;
}
.page-hero h1 { max-width: 18ch; margin: 32px 0 0 0; }
.page-hero .eyebrow { margin-bottom: 0; }

/* Decorative monogram (hero corner) */
.monogram {
  position: absolute;
  right: var(--gutter);
  bottom: 60px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(140px, 18vw, 240px);
  line-height: 0.8;
  color: var(--oxblood);
  opacity: 0.06;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}


/* ─── EDITORIAL CONTENT BLOCKS ─────────────────────────────── */

.doctrine-block .grid {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 80px;
}
.doctrine-block .label-col { padding-top: 8px; }
.pulled {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 48px 0;
}
.pulled em {
  font-style: italic;
  color: var(--oxblood);
  font-weight: 400;
}
.attribution {
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}

@media (max-width: 820px) {
  .doctrine-block .grid { grid-template-columns: 1fr; gap: 32px; }
}


/* Section heads with split layout */
.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 80px;
}
.section-head h2 { max-width: 14ch; }
.section-head p { max-width: 48ch; margin: 0; color: var(--charcoal); }
@media (max-width: 820px) {
  .section-head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
}


/* ─── VERTICAL LIST (portfolio items, principle items) ─────── */

.vert-list { display: grid; gap: 0; }
.vert {
  display: grid;
  grid-template-columns: 80px 1fr 1.5fr;
  gap: 48px;
  padding: 56px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
  transition: background-color 300ms ease;
}
.vert:last-child { border-bottom: 1px solid var(--rule); }
.vert:hover { background: rgba(107, 31, 42, 0.025); }
.vert .roman {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 44px;
  color: var(--oxblood);
  letter-spacing: 0.04em;
  padding-top: 4px;
}
.vert h3 {
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 38px);
  margin: 0 0 12px 0;
  line-height: 1.05;
}
.vert .meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}
.vert .desc { margin: 0; color: var(--charcoal); }
.vert .holdings,
.vert .criteria {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--stone);
  line-height: 1.7;
}
.vert .holdings strong,
.vert .criteria strong {
  color: var(--charcoal);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  display: block;
  margin-bottom: 8px;
}
.vert ul.criteria-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  letter-spacing: 0;
  color: var(--charcoal);
  text-transform: none;
}
.vert ul.criteria-list li {
  padding: 8px 0 8px 24px;
  position: relative;
  border-bottom: 1px solid var(--rule-soft);
}
.vert ul.criteria-list li:last-child { border-bottom: 0; }
.vert ul.criteria-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--oxblood);
}

@media (max-width: 820px) {
  .vert { grid-template-columns: 1fr; gap: 16px; padding: 40px 0; }
  .vert .roman { font-size: 32px; }
}


/* ─── PRINCIPLES (dark section) ─────────────────────── */

.principle-list { display: grid; gap: 0; max-width: 920px; }
.principle {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid var(--rule-dark-soft);
  align-items: baseline;
}
.principle:last-child { border-bottom: 1px solid var(--rule-dark-soft); }
.principle .roman {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  color: var(--brass);
}
.principle h4 {
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  margin: 0 0 8px 0;
  color: var(--bone);
  letter-spacing: -0.01em;
}
.principle p {
  margin: 0;
  color: var(--stone-soft);
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.6;
}
.principle .practice {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--stone-soft);
  border-left: 1px solid var(--brass);
  padding-left: 16px;
}
@media (max-width: 820px) {
  .principle { grid-template-columns: 1fr; gap: 8px; padding: 32px 0; }
}


/* ─── THREE DOORS ─────────────────────────────────────────── */

.three-doors h2 { margin-bottom: 16px; }
.three-doors .intro {
  color: var(--stone-soft);
  max-width: 52ch;
  margin: 0 0 80px 0;
  font-size: clamp(18px, 1.4vw, 20px);
}

.doors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.door {
  border-top: 1px solid var(--rule-dark);
  padding-top: 24px;
}
.door .label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 18px;
}
.door h4 {
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 14px 0;
  color: var(--bone);
  letter-spacing: -0.01em;
}
.door p {
  color: var(--stone-soft);
  font-size: 16px;
  margin: 0 0 24px 0;
  line-height: 1.55;
}
.door a.email,
.door a.link {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--bone);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px;
  transition: color 200ms;
  display: inline-block;
}
.door a.email:hover,
.door a.link:hover { color: var(--brass); }

@media (max-width: 820px) {
  .doors-grid { grid-template-columns: 1fr; gap: 40px; }
}


/* ─── INLINE CTA LINK ─────────────────────────────── */

.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--oxblood);
  padding-bottom: 4px;
  transition: gap 220ms ease, color 200ms;
  margin-top: 32px;
}
.cta-link::after { content: "→"; font-family: var(--font-body); font-size: 17px; }
.cta-link:hover { gap: 18px; color: var(--oxblood); }
.on-dark .cta-link { color: var(--bone); border-bottom-color: var(--brass); }
.on-dark .cta-link:hover { color: var(--brass); }


/* ─── FORMS ─────────────────────────────────────────── */

.form-wrap {
  max-width: 640px;
  margin-top: 60px;
}
.field { margin-bottom: 28px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 10px;
}
.field label .req { color: var(--oxblood); margin-left: 4px; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink);
  transition: border-color 200ms;
  -webkit-appearance: none;
  appearance: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--oxblood);
}
.field textarea { min-height: 140px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%236B1F2A' stroke-width='1.2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Honeypot — must be hidden but accessible to bots */
.field-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 640px) {
  .form-grid-2 { grid-template-columns: 1fr; gap: 0; }
}

.btn-submit {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--bone);
  border: 0;
  padding: 18px 36px;
  cursor: pointer;
  transition: background 200ms, transform 200ms;
  margin-top: 16px;
}
.btn-submit:hover:not(:disabled) { background: var(--oxblood); }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.form-success,
.form-error {
  display: none;
  padding: 24px;
  border: 1px solid;
  margin-top: 20px;
}
.form-success {
  border-color: var(--oxblood);
  background: rgba(107, 31, 42, 0.04);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
}
.form-error {
  border-color: var(--oxblood-deep);
  background: rgba(78, 22, 32, 0.04);
  color: var(--oxblood-deep);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.05em;
}
.form-success.is-visible,
.form-error.is-visible { display: block; }


/* ─── LETTER ARCHIVE ───────────────────────────────────────── */

.letter-list { list-style: none; padding: 0; margin: 48px 0 0 0; }
.letter-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.letter-item:last-child { border-bottom: 1px solid var(--rule); }
.letter-item .num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--oxblood);
  text-transform: uppercase;
}
.letter-item h4 {
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  margin: 0;
  letter-spacing: -0.01em;
}
.letter-item.is-forthcoming { opacity: 0.55; }
.letter-item.is-forthcoming .status {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
}


/* ─── PROSE (long-form pages: doctrine, legal) ────────────── */

.prose {
  max-width: 64ch;
  margin: 0 auto;
}
.prose h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  margin-top: 72px;
  margin-bottom: 24px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: clamp(22px, 2.2vw, 28px);
  margin-top: 48px;
  margin-bottom: 16px;
}
.prose p {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 24px 0;
}
.prose .lede-para {
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 40px;
}
.prose .closing-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.3;
  color: var(--oxblood);
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
  text-align: center;
}


/* ─── FOOTER ─────────────────────────────────────────── */

footer.bottom {
  background: var(--ink);
  color: var(--stone-soft);
  padding: 48px var(--gutter) 36px;
  border-top: 1px solid var(--rule-dark-soft);
}
footer.bottom .row {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
footer.bottom .wordmark { color: var(--bone); font-size: 17px; }
footer.bottom .wordmark .dot { background: var(--brass); }
footer.bottom .meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
footer.bottom .meta span + span { margin-left: 24px; }
footer.bottom .legal-row {
  max-width: var(--max-w);
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--rule-dark-soft);
  display: flex;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
footer.bottom .legal-row a { color: var(--stone-soft); transition: color 200ms; }
footer.bottom .legal-row a:hover { color: var(--brass); }


/* ─── SCROLL REVEAL ─────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease, transform 800ms ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}


/* ─── 404 ─────────────────────────────────────────── */

.error-hero {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 120px;
}
.error-hero h1 { max-width: 14ch; margin-bottom: 32px; }
.error-hero .lede { max-width: 48ch; color: var(--charcoal); }


/* ─── PRINT ─────────────────────────────────────────── */

@media print {
  nav.top, .monogram, .mobile-menu, .nav-toggle, .form-wrap { display: none; }
  body { background: white; color: black; }
  body::before { display: none; }
  section { page-break-inside: avoid; padding: 40px 0; }
  .on-dark { background: white; color: black; }
  .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: black; }
}


/* ─── ACCESSIBILITY ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}