/* Sherman Continuum — site.css
   Implements the persona-sites v2 design language (docs/design/PERSONA-SITES-V2-DESIGN.md),
   salvaged from the old generator's design system: Libre Caslon Display / Newsreader / Manrope,
   micro-label typography, paper/ink/deep/accent palette, ghost-initial hero, treated photography.
   Theme: iron. */

@import url("fonts/fonts.css");

:root {
  --paper: #e4e3df;
  --ink: #242727;
  --deep: #202526;
  --accent: #745e50;
  --wash: #beb6ae;
  --max: 1180px;
  --hairline: color-mix(in srgb, var(--ink) 26%, transparent);
  --serif-display: "Libre Caslon Display", Georgia, serif;
  --serif-text: "Newsreader", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: #c7b79f; color: #1f211e; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ── micro-label system ─────────────────────────────────────────── */
.kicker, .nav-label, .footer p, .footer small, .facts span, .chapter-label,
.legal-note, .photo-cap, .plaque small {
  font-size: 0.59rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ── nav ────────────────────────────────────────────────────────── */
.site-nav {
  position: absolute;
  z-index: 30;
  inset: 0 0 auto;
  height: 84px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 max(24px, 4vw);
  color: #eeeae1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.wordmark {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.68rem;
  font-weight: 600;
}
.wordmark b { color: #d4c8b5; }
.site-nav nav { display: flex; gap: 26px; }
.site-nav nav a {
  position: relative;
  text-decoration: none;
  font-size: 0.59rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #ddd8cd;
}
.site-nav nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -9px;
  height: 1px;
  background: #b7a892;
  transition: right 0.2s ease;
}
.site-nav nav a:hover::after, .site-nav nav a.active::after { right: 0; }
.nav-cta {
  justify-self: end;
  text-decoration: none;
  font-size: 0.59rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #d4c8b5;
  border: 1px solid rgba(212, 200, 181, 0.5);
  padding: 9px 14px;
}
.nav-cta:hover { background: rgba(212, 200, 181, 0.12); }
.nav-toggle { display: none; }

/* ── hero (folio) ────────────────────────────────────────────────── */
.folio-hero {
  position: relative;
  min-height: calc(100vh - 84px);
  padding: clamp(80px, 10vw, 140px) max(28px, 7vw) 96px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.56fr);
  gap: 8vw;
  align-items: center;
  background: var(--deep);
  color: #f2eee6;
  overflow: hidden;
}
.folio-hero::before {                 /* iron grid motif */
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(110deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 34px 34px;
}
.ghost-mark {
  position: absolute;
  right: -3%;
  bottom: -0.16em;
  font: 400 min(49vw, 720px) / 1 var(--serif-display);
  letter-spacing: -0.1em;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  user-select: none;
}
.folio-intro { position: relative; z-index: 2; max-width: 760px; }
.folio-intro .kicker { color: #d8cbb7; margin: 0 0 24px; }
.folio-intro h1 {
  margin: 0;
  font: 400 clamp(3.2rem, 6.6vw, 6.9rem) / 0.9 var(--serif-display);
  letter-spacing: -0.038em;
  max-width: 820px;
}
.folio-lede {
  max-width: 640px;
  margin: 34px 0 0;
  color: #d4d0c8;
  font: 400 1.16rem / 1.7 var(--serif-text);
}
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 40px; flex-wrap: wrap; }
.button {
  display: inline-flex;
  align-items: center;
  padding: 13px 18px;
  border: 1px solid currentColor;
  text-decoration: none;
  font-size: 0.59rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #e8dfd1;
}
.button:hover { background: rgba(232, 223, 209, 0.1); }
.hero-actions .quiet-link {
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #d5c9b7;
  text-underline-offset: 5px;
}
.hero-plate { margin: 0; position: relative; z-index: 2; }
.hero-plate img {
  width: 100%;
  height: min(56vh, 540px);
  object-fit: cover;
  filter: grayscale(0.7) sepia(0.08) contrast(1.02);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.hero-plate figcaption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 11px;
  color: #aaa69e;
  font-size: 0.51rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.domain-plaque {
  position: absolute;
  left: max(28px, 7vw);
  bottom: 26px;
  display: flex;
  gap: 14px;
  align-items: baseline;
  color: #9d9b95;
  font-size: 0.49rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.domain-plaque strong { font: 400 0.85rem var(--serif-text); color: #e8dfd1; }

/* ── concept strip ───────────────────────────────────────────────── */
.concept-strip {
  max-width: 1260px;
  margin: auto;
  padding: 58px 34px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--hairline);
}
.concept-strip article { padding: 0 38px; border-right: 1px solid var(--hairline); }
.concept-strip article:first-child { padding-left: 0; }
.concept-strip article:last-child { border-right: 0; padding-right: 0; }
.concept-strip span {
  display: block;
  margin-bottom: 14px;
  color: var(--accent);
  font-size: 0.53rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.concept-strip h2 { margin: 0 0 10px; font: 400 1.55rem / 1.05 var(--serif-text); }
.concept-strip p { margin: 0; color: color-mix(in srgb, var(--ink) 74%, transparent); font-size: 0.78rem; line-height: 1.7; }

/* ── overview statement ──────────────────────────────────────────── */
.overview-statement { max-width: 1030px; margin: auto; padding: clamp(90px, 12vw, 160px) 34px; }
.overview-statement .kicker { color: var(--accent); margin: 0 0 26px; }
.overview-statement blockquote {
  max-width: 980px;
  margin: 0 0 50px;
  font: 400 clamp(2.1rem, 4.6vw, 4.4rem) / 1.04 var(--serif-display);
  letter-spacing: -0.028em;
}
.overview-statement > p:last-child {
  max-width: 660px;
  margin: 0 0 0 auto;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  font-size: 0.92rem;
  line-height: 1.85;
}

/* ── facts ribbon ────────────────────────────────────────────────── */
.facts-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--deep);
  color: #eeeae2;
}
.facts-ribbon div {
  min-height: 180px;
  padding: 40px 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.facts-ribbon div:last-child { border-right: 0; }
.facts strong { font: 400 2.3rem / 1 var(--serif-text); }
.facts span { color: #bbb7ae; }

/* ── route index ─────────────────────────────────────────────────── */
.route-index {
  max-width: 1200px;
  margin: auto;
  padding: clamp(90px, 12vw, 150px) 34px;
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(420px, 1.22fr);
  gap: 9vw;
}
.route-heading .kicker { color: var(--accent); margin: 0 0 24px; }
.route-heading h2 {
  margin: 0;
  font: 400 clamp(2.3rem, 4.6vw, 4.4rem) / 0.99 var(--serif-display);
  letter-spacing: -0.03em;
}
.route-list { border-top: 1px solid color-mix(in srgb, var(--ink) 32%, transparent); }
.route-list a {
  padding: 24px 0;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 28px;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 32%, transparent);
  text-decoration: none;
}
.route-list a > span, .route-list a > b {
  font-size: 0.52rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--accent);
}
.route-list h3 { margin: 0 0 6px; font: 400 1.48rem var(--serif-text); }
.route-list p { margin: 0; color: color-mix(in srgb, var(--ink) 70%, transparent); font-size: 0.73rem; line-height: 1.55; }
.route-list a:hover h3 { font-style: italic; }

/* ── closing band ────────────────────────────────────────────────── */
.closing {
  padding: clamp(90px, 11vw, 140px) max(28px, calc((100vw - var(--max)) / 2 + 28px));
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 8vw;
  background: var(--accent);
  color: #f3efe8;
}
.closing .kicker { color: #f3efe8; opacity: 0.72; margin: 0 0 24px; }
.closing h2 {
  margin: 0;
  max-width: 860px;
  font: 400 clamp(2rem, 3.9vw, 3.9rem) / 1.02 var(--serif-display);
  letter-spacing: -0.025em;
}
.closing > div:last-child { align-self: end; }
.closing > div:last-child p { font-size: 0.84rem; line-height: 1.75; color: #eee8df; }
.closing a {
  display: inline-block;
  margin-top: 18px;
  border: 1px solid #f3efe8;
  padding: 13px 18px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  text-decoration: none;
}
.closing a:hover { background: rgba(243, 239, 232, 0.12); }

/* ── footer ─────────────────────────────────────────────────────── */
.footer {
  padding: 36px max(28px, 4vw);
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 30px;
  align-items: end;
  background: #151815;
  color: #a9aaa5;
}
.footer strong { color: #eeeae2; font: 400 0.9rem var(--serif-text); }
.footer p, .footer small { margin: 0; color: #8b8d88; }
.footer span { color: #c5b59e; }
.footer nav { display: flex; gap: 22px; }
.footer nav a { font-size: 0.49rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: #a9aaa5; text-decoration: none; }
.footer nav a:hover { color: #eeeae2; }

/* ── subpages ───────────────────────────────────────────────────── */
.subpage-head {
  padding: clamp(100px, 12vw, 150px) max(28px, calc((100vw - var(--max)) / 2 + 28px)) 76px;
  background: var(--deep);
  color: #eeeae2;
  position: relative;
  overflow: hidden;
}
.subpage-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(110deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 34px 34px;
}
.subpage-head .kicker { color: #d3c5b2; margin: 0 0 22px; }
.subpage-head h1 {
  margin: 0;
  font: 400 clamp(3.4rem, 8vw, 7.8rem) / 0.88 var(--serif-display);
  letter-spacing: -0.045em;
}
.subpage-head > p:last-child {
  max-width: 640px;
  margin: 38px 0 0 auto;
  color: #cbc8c0;
  font: 400 1.02rem / 1.7 var(--serif-text);
  position: relative;
}

.biography-layout {
  max-width: 1120px;
  margin: auto;
  padding: clamp(85px, 11vw, 145px) 34px;
  display: grid;
  grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1fr);
  gap: 9vw;
  align-items: start;
}
.biography-layout figure { margin: 0; position: sticky; top: 30px; }
.biography-layout img {
  width: 100%;
  max-height: 620px;
  object-fit: cover;
  filter: grayscale(0.68) sepia(0.08) contrast(1.02);
}
.biography-layout figcaption, .record-band figcaption {
  margin-top: 10px;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  font-size: 0.52rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.biography-layout .bio-copy > p {
  color: color-mix(in srgb, var(--ink) 80%, transparent);
  font-size: 0.92rem;
  line-height: 1.9;
  margin: 0 0 22px;
}
.bio-copy .pull {
  margin: 34px 0 44px;
  font: 400 clamp(1.7rem, 3vw, 2.6rem) / 1.1 var(--serif-display);
  letter-spacing: -0.02em;
}

.chronology {
  padding: clamp(85px, 10vw, 130px) max(28px, calc((100vw - 1120px) / 2 + 28px));
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.2fr);
  gap: 9vw;
  background: color-mix(in srgb, var(--paper) 76%, var(--wash) 24%);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.chronology .kicker { color: var(--accent); margin: 0 0 20px; }
.chronology h2 { margin: 0; font: 400 clamp(2.2rem, 4.4vw, 4.2rem) / 0.98 var(--serif-display); letter-spacing: -0.03em; }
.chronology ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 34%, transparent); }
.chronology li {
  padding: 22px 0;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 28px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 34%, transparent);
}
.chronology time { color: var(--accent); font: 500 1.02rem var(--serif-text); }
.chronology li p { margin: 0; font-size: 0.82rem; line-height: 1.68; color: color-mix(in srgb, var(--ink) 82%, transparent); }

/* approach: chapters + principles */
.chapter-band { padding: clamp(85px, 11vw, 140px) max(28px, calc((100vw - var(--max)) / 2 + 28px)); }
.chapter-heading { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 60px; align-items: start; margin-bottom: 56px; }
.chapter-heading .kicker { color: var(--accent); margin: 0; }
.chapter-heading h2 { margin: 0; font: 400 clamp(2.6rem, 5vw, 4.6rem) / 0.98 var(--serif-display); letter-spacing: -0.03em; }
.chapter-list { max-width: 940px; margin: 0 0 0 auto; border-top: 1px solid var(--hairline); }
.chapter-list article {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 34px;
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline);
}
.chapter-list .chapter-label { color: var(--accent); }
.chapter-list h3 { margin: 0 0 10px; font: 400 1.5rem / 1.1 var(--serif-text); }
.chapter-list p { max-width: 650px; margin: 0; color: color-mix(in srgb, var(--ink) 74%, transparent); font-size: 0.82rem; line-height: 1.72; }

.principles {
  padding: clamp(85px, 10vw, 130px) max(28px, calc((100vw - 1160px) / 2 + 28px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 8vw;
  align-items: start;
  background: var(--deep);
  color: #ece8df;
}
.principles .kicker { color: #cdbda4; margin: 0 0 20px; }
.principles h2 { margin: 0 0 8px; font: 400 clamp(2.4rem, 4.8vw, 4.4rem) / 0.98 var(--serif-display); letter-spacing: -0.03em; color: #f0ece4; }
.principles .principle-list { margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.principles .principle-list article { padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.principles .principle-list h3 { margin: 0 0 11px; font: 400 1.62rem / 1.1 var(--serif-text); color: #f0ece4; }
.principles .principle-list p { max-width: 560px; margin: 0; color: #c2c0ba; font-size: 0.84rem; line-height: 1.72; }
.principles figure { margin: 0; }
.principles img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  filter: grayscale(0.7) sepia(0.08) contrast(1.02);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.principles figcaption { margin-top: 10px; color: #8f8e88; font-size: 0.51rem; text-transform: uppercase; letter-spacing: 0.1em; }

/* services: enterprise grid */
.enterprise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--deep);
  color: #ece8df;
  padding: 0 max(28px, calc((100vw - 1160px) / 2 + 28px));
}
.enterprise-grid article {
  min-height: 330px;
  padding: 56px 48px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-direction: column;
}
.enterprise-grid article:nth-child(even) { border-right: 0; }
.enterprise-grid article:nth-last-child(-n+2) { border-bottom: 0; }
.enterprise-grid span { color: #c8b89f; font-size: 0.53rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; }
.enterprise-grid h3 {
  max-width: 420px;
  margin: auto 0 16px;
  font: 400 clamp(1.8rem, 3vw, 2.9rem) / 1.05 var(--serif-text);
  color: #f0ece4;
}
.enterprise-grid p { max-width: 500px; margin: 0; color: #bbb9b2; font-size: 0.8rem; line-height: 1.75; }

.record-band {
  max-width: 1120px;
  margin: auto;
  padding: clamp(90px, 11vw, 145px) 34px;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 0.8fr);
  gap: 10vw;
  align-items: center;
}
.record-band .kicker { color: var(--accent); margin: 0 0 20px; }
.record-band h2 { margin: 0 0 18px; font: 400 clamp(2.2rem, 4.2vw, 4rem) / 1 var(--serif-display); letter-spacing: -0.03em; }
.record-band > div > p { color: color-mix(in srgb, var(--ink) 76%, transparent); font-size: 0.88rem; line-height: 1.85; }
.record-band img { width: 100%; max-height: 620px; object-fit: cover; filter: grayscale(0.68) sepia(0.08); }

/* fees / practice note band */
.practice-band {
  padding: clamp(80px, 10vw, 120px) max(28px, calc((100vw - 1160px) / 2 + 28px));
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(460px, 1.2fr);
  gap: 9vw;
  background: color-mix(in srgb, var(--paper) 74%, var(--wash) 26%);
  border-top: 1px solid var(--hairline);
}
.practice-band .kicker { color: var(--accent); margin: 0 0 18px; }
.practice-band h2 { margin: 0; font: 400 clamp(2rem, 4vw, 3.6rem) / 1 var(--serif-display); letter-spacing: -0.03em; }
.practice-band ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 32%, transparent); }
.practice-band li {
  padding: 18px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 32%, transparent);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: baseline;
}
.practice-band li b { font: 500 1rem var(--serif-text); color: var(--accent); }
.practice-band li p { margin: 0; font-size: 0.8rem; line-height: 1.7; color: color-mix(in srgb, var(--ink) 78%, transparent); }

/* contact */
.domain-room {
  padding: clamp(90px, 11vw, 145px) max(28px, calc((100vw - 1160px) / 2 + 28px));
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 9vw;
  align-items: end;
}
.domain-room .kicker { color: var(--accent); margin: 0 0 24px; }
.domain-room h2 {
  margin: 0;
  font: 400 clamp(2.6rem, 6vw, 6rem) / 0.95 var(--serif-display);
  overflow-wrap: anywhere;
  letter-spacing: -0.035em;
}
.domain-room > div > p:last-of-type {
  max-width: 630px;
  margin: 30px 0 0;
  color: color-mix(in srgb, var(--ink) 74%, transparent);
  font-size: 0.82rem;
  line-height: 1.75;
}
.contact-cards { display: grid; gap: 26px; }
.contact-card {
  padding: 28px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  display: grid;
  gap: 8px;
}
.contact-card span { margin-top: 8px; color: var(--accent); font-size: 0.49rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; }
.contact-card span:first-child { margin-top: 0; }
.contact-card strong { font: 400 0.98rem var(--serif-text); }
.contact-card a { font: 400 1.12rem var(--serif-text); color: var(--ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ink) 34%, transparent); }
.contact-card a:hover { border-color: var(--accent); }

.email-band {
  padding: clamp(90px, 11vw, 145px) max(28px, calc((100vw - 1160px) / 2 + 28px));
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(460px, 1.2fr);
  gap: 9vw;
  background: var(--deep);
  color: #ede9e1;
}
.email-band .kicker { color: #cdbda4; margin: 0 0 20px; }
.email-band h2 { margin: 0; font: 400 clamp(2.4rem, 4.6vw, 4.2rem) / 0.98 var(--serif-display); letter-spacing: -0.03em; color: #f0ece4; }
.email-band > div:first-child > p:last-child { max-width: 500px; color: #bdbbb4; font-size: 0.8rem; line-height: 1.75; margin-top: 22px; }
.email-list { border-top: 1px solid rgba(255, 255, 255, 0.22); }
.email-list article { position: relative; padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.email-list span { display: block; color: #cdbda4; font-size: 0.49rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; }
.email-list strong { display: block; margin: 10px 0 8px; font: 400 clamp(1.2rem, 2.4vw, 2rem) var(--serif-text); overflow-wrap: anywhere; color: #f0ece4; }
.email-list p { margin: 0; color: #aaa9a3; font-size: 0.72rem; line-height: 1.62; }

.routing-note {
  padding: clamp(80px, 10vw, 125px) max(28px, calc((100vw - 1160px) / 2 + 28px));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9vw;
}
.routing-note .kicker { color: var(--accent); margin: 0 0 20px; }
.routing-note h2 { margin: 0; font: 400 clamp(2.2rem, 4vw, 3.8rem) / 1 var(--serif-display); letter-spacing: -0.03em; }
.routing-note > div:last-child { align-self: end; }
.routing-note > div:last-child p { max-width: 560px; margin: 0 0 26px; color: color-mix(in srgb, var(--ink) 74%, transparent); font-size: 0.82rem; line-height: 1.75; }

.legal-note { color: color-mix(in srgb, var(--ink) 52%, transparent); letter-spacing: 0.09em; font-size: 0.55rem; line-height: 1.7; }
.photo-cap { color: color-mix(in srgb, var(--ink) 55%, transparent); }

/* ── 404 ─────────────────────────────────────────────────────────── */
.err-page { min-height: 100vh; background: var(--deep); color: #eeeae2; display: grid; place-content: center; text-align: center; padding: 60px 28px; }
.err-page h1 { margin: 0 0 18px; font: 400 clamp(4rem, 12vw, 9rem) / 0.9 var(--serif-display); letter-spacing: -0.04em; }
.err-page p { margin: 0 0 34px; color: #b9b6ae; font: 400 1.05rem var(--serif-text); }
.err-page a { color: #d4c8b5; font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none; border: 1px solid #d4c8b5; padding: 13px 18px; }

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .concept-strip { grid-template-columns: 1fr; }
  .concept-strip article { border-right: 0; border-bottom: 1px solid var(--hairline); padding: 0 0 26px; margin-bottom: 26px; }
  .concept-strip article:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
  .principles { grid-template-columns: 1fr; }
  .principles figure { max-width: 460px; }
  .record-band { grid-template-columns: 1fr; }
  .enterprise-grid article { min-height: 260px; padding: 44px 34px; }
}
@media (max-width: 680px) {
  .site-nav { position: fixed; height: 66px; background: rgba(32, 37, 38, 0.97); }
  .site-nav nav, .nav-cta { display: none; }
  .nav-toggle { display: block; justify-self: end; }
  .nav-toggle button {
    background: none; border: 1px solid rgba(212, 200, 181, 0.5); color: #d4c8b5;
    font: 600 0.59rem/1 var(--sans); text-transform: uppercase; letter-spacing: 0.13em;
    padding: 9px 13px; cursor: pointer;
  }
  .site-nav.open nav {
    display: flex; flex-direction: column; gap: 18px;
    position: absolute; top: 66px; left: 0; right: 0;
    background: rgba(32, 37, 38, 0.98); padding: 24px max(24px, 4vw) 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }
  .folio-hero { grid-template-columns: 1fr; min-height: 0; padding: 120px 22px 70px; }
  .folio-intro h1 { font-size: clamp(3rem, 14.5vw, 4.6rem); }
  .hero-plate { max-width: 420px; }
  .hero-plate img { height: 380px; }
  .domain-plaque { display: none; }
  .concept-strip, .overview-statement, .route-index, .chapter-band, .principles,
  .biography-layout, .chronology, .record-band, .domain-room, .email-band,
  .routing-note, .practice-band, .closing { padding-left: 22px; padding-right: 22px; }
  .route-index { grid-template-columns: 1fr; }
  .facts-ribbon { grid-template-columns: 1fr 1fr; }
  .facts-ribbon div { min-height: 140px; padding: 28px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .facts-ribbon div:nth-child(2n) { border-right: 0; }
  .closing { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; gap: 18px; }
  .biography-layout { grid-template-columns: 1fr; }
  .biography-layout figure { position: static; max-width: 460px; }
  .chronology { grid-template-columns: 1fr; }
  .chapter-list article { grid-template-columns: 88px 1fr; gap: 18px; }
  .chapter-heading { grid-template-columns: 1fr; gap: 26px; }
  .enterprise-grid { grid-template-columns: 1fr; }
  .enterprise-grid article { border-right: 0; }
  .enterprise-grid article:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
  .enterprise-grid article:last-child { border-bottom: 0; }
  .domain-room, .email-band, .routing-note, .practice-band { grid-template-columns: 1fr; }
  .practice-band li { grid-template-columns: 1fr; gap: 8px; }
  .subpage-head h1 { font-size: clamp(3rem, 15vw, 4.8rem); }
  .subpage-head > p:last-child { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-nav nav a::after { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SLOT GEOMETRY + MOTION — added 2026-11-09 (photo-stretch fix)

   BUG THIS FIXES: every slot took its box from layout (height:min(56vh,540px) on the
   hero, max-height:620px on the bio figure, max-height:480px on principles) while the
   <img> declared a different intrinsic ratio. Live measurement on the fleet before the
   fix: a 1920×1080 hero (ratio 1.78) rendered in a 477×540 box (ratio 0.88) and a
   1200×1025 file declared as 1:1 → landscape photography chopped into portrait slivers.

   NOW: the slot owns the ratio, the photo only ever *covers* it (never stretches).
   Rule order matters: this block sits at the end of the file on purpose — equal
   specificity, later wins, including over the mobile override at the bottom of the
   layout section.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --radius: 2px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lift: 0 8px 26px rgba(10, 9, 8, 0.22);
}

/* — slots own the aspect ratio — */
.slot { display: block; width: 100%; height: auto; object-fit: cover; object-position: center; }
.slot-headshot { aspect-ratio: 4 / 5; object-position: center 38%; }
.slot-hero     { aspect-ratio: 16 / 9; }
.slot-meeting  { aspect-ratio: 3 / 2; }
.slot-desk     { aspect-ratio: 4 / 3; }

/* kill the old hard heights that fought the ratio */
.hero-plate img { height: auto; max-height: none; }
.biography-layout img { max-height: none; }
.principles img { max-height: none; }
.record-band img { max-height: none; }

/* frames clip the hover zoom + get a whisper of depth */
.hero-plate,
.biography-layout figure,
.principles figure,
.record-band figure {
  overflow: hidden;
  border-radius: var(--radius);
  transform: translateZ(0);
}
.hero-plate img,
.biography-layout img,
.principles img,
.record-band img {
  transition: transform 900ms var(--ease-out), filter 600ms ease;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .hero-plate:hover img,
  .biography-layout figure:hover img,
  .principles figure:hover img,
  .record-band figure:hover img {
    transform: scale(1.022);
  }
  .folio-hero:hover .hero-plate { box-shadow: var(--lift); }
}

/* — life in the chrome: buttons, quiet links, strip cards, facts — */
.button,
.nav-cta,
.quiet-link,
.expert-card,
.concept-strip article,
.facts-ribbon div,
.principle-list article,
.services-grid article {
  transition: background-color 260ms var(--ease-out), border-color 260ms var(--ease-out),
              color 260ms var(--ease-out), transform 260ms var(--ease-out),
              box-shadow 260ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover,
  .nav-cta:hover { transform: translateY(-1px); box-shadow: var(--lift); }
  .quiet-link:hover { transform: translateX(2px); }
  .concept-strip article:hover,
  .services-grid article:hover,
  .principle-list article:hover { background-color: color-mix(in srgb, currentColor 4%, transparent); }
  .facts-ribbon div:hover strong { color: #f0ece4; }
}

/* — entrance: sections ease in once, no library, no markup changes — */
html.js-reveal .reveal { opacity: 0; transform: translateY(16px); }
html.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
}

@media (max-width: 760px) {
  .hero-plate img { height: auto; }
  .slot-headshot { aspect-ratio: 1 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal,
  html.js-reveal .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .hero-plate img,
  .biography-layout img,
  .principles img,
  .record-band img,
  .button,
  .nav-cta,
  .quiet-link { transition: none; }
  .hero-plate:hover img,
  .biography-layout figure:hover img,
  .principles figure:hover img,
  .record-band figure:hover img,
  .button:hover,
  .nav-cta:hover,
  .quiet-link:hover { transform: none; }
}

/* caption row: two spans used to butt against each other ("THOMAS ASHWORTHNORTH OF ENGLAND") */
.biography-layout figcaption,
.record-band figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: space-between;
}