/* ============================================================================
   SADDLE HILL PARTNERS — DESIGN SYSTEM
   Plain CSS. No framework, no build step. Edit the tokens below to restyle
   the entire site. Every page uses this one file.
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  /* Colour */
  --paper:        #ffffff;
  --paper-2:      #f5f7f9;
  --paper-3:      #e9edf1;
  --ink:          #0f1419;
  --ink-2:        #3b444d;
  --ink-3:        #6f7883;
  --line:         #dde3e9;
  --accent:       #1f4e79;
  --accent-2:     #2e6ba8;
  --accent-wash:  #eef3f9;

  /* Type */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --t--1: clamp(0.80rem, 0.78rem + 0.10vw, 0.86rem);
  --t-0:  clamp(1.00rem, 0.97rem + 0.15vw, 1.09rem);
  --t-1:  clamp(1.20rem, 1.12rem + 0.38vw, 1.42rem);
  --t-2:  clamp(1.50rem, 1.32rem + 0.85vw, 2.00rem);
  --t-3:  clamp(1.95rem, 1.60rem + 1.65vw, 2.90rem);
  --t-4:  clamp(2.40rem, 1.75rem + 3.10vw, 4.10rem);

  /* Space */
  --s1: 0.375rem;  --s2: 0.75rem;   --s3: 1.25rem;   --s4: 2rem;
  --s5: 3rem;      --s6: 4.5rem;    --s7: 6.5rem;    --s8: 9rem;

  /* Layout */
  --measure: 34rem;      /* comfortable reading width */
  --wide:    100rem;     /* page container */
  --radius:  3px;
  --nav-h:   4.5rem;
  --ease:    cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- 3. BASE ------------------------------------------------------ */
body {
  font-family: var(--font-body);
  font-size: var(--t-0);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--t-4); }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-1); }

p { max-width: var(--measure); }
p + p { margin-top: var(--s3); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

::selection { background: var(--accent); color: var(--paper); }

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

/* ---------- 4. LAYOUT ---------------------------------------------------- */
.wrap { width: min(100% - 3rem, var(--wide)); margin-inline: auto; }

.section       { padding-block: var(--s7); }
.section--tight{ padding-block: var(--s5); }
.section--tint { background: var(--paper-2); }
.section + .section { border-top: 1px solid var(--line); }
.section--tint + .section--tint { border-top: none; }

.eyebrow {
  font-size: var(--t--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s3);
}

.lede { font-size: var(--t-1); line-height: 1.5; color: var(--ink-2); max-width: 40rem; }

.rule { height: 1px; background: var(--line); border: 0; margin-block: var(--s5); }

.grid { display: grid; gap: var(--s5); }
@media (min-width: 46rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--split { grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: var(--s6); }
}

/* ---------- 5. HEADER + DROPDOWN NAV ------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); min-height: var(--nav-h); flex-wrap: wrap;
}
/* Below 68rem the tabs drop to their own full-width row rather than vanishing. */
@media (max-width: 68rem) {
  .site-header__inner { min-height: 3.75rem; }
  .nav { order: 3; width: 100%; border-top: 1px solid var(--line); }
  .nav__list { justify-content: flex-start; margin-left: -.95rem; }
}

.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); flex: 0 0 auto; }
.brand__logo { width: 2.1rem; height: auto; color: var(--accent); flex: none; }
.brand__mark { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -0.02em; }
.brand__sub {
  font-size: var(--t--1); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.brand:hover { color: var(--ink); }

.nav { display: block; }
@media (max-width: 52rem) { .nav { display: none; } }

.nav__list { display: flex; align-items: center; gap: 0; list-style: none; flex-wrap: wrap; }
.nav__item { position: relative; }

.nav__link {
  display: inline-block;
  padding: .8rem .95rem;
  font-size: var(--t--1); font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav__link:hover { color: var(--ink); border-bottom-color: var(--line); }
.nav__link[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* Mobile */
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.25rem; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; width: 1.5rem; margin-inline: auto;
  background: var(--ink); border-radius: 2px;
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 52.01rem) { .nav-toggle { display: none; } }

.mobile-nav {
  display: none; border-top: 1px solid var(--line);
  padding-block: var(--s3); background: var(--paper);
}
.mobile-nav[data-open="true"] { display: block; }
@media (min-width: 52.01rem) { .mobile-nav { display: none !important; } }
.mobile-nav ul { list-style: none; }
.mobile-nav > ul > li { border-bottom: 1px solid var(--line); }
.mobile-nav > ul > li:last-child { border-bottom: 0; }
.mobile-nav a { display: block; padding: .7rem .2rem; color: var(--ink); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.mobile-nav ul ul a { padding-left: var(--s3); color: var(--ink-2); font-size: var(--t--1); }

/* ---------- 6. HERO ------------------------------------------------------ */
.hero { padding-block: var(--s8) var(--s7); }
.hero h1 { max-width: 18ch; }
.hero .lede { margin-top: var(--s4); }
.hero__actions { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---------- 7. BUTTONS --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.5rem; border-radius: var(--radius);
  font-size: var(--t--1); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { color: var(--paper); opacity: .86; transform: translateY(-1px); }
.btn--ghost { background: none; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { color: var(--ink); border-color: var(--ink); opacity: 1; }

/* ---------- 8. CARDS, STATS, BIOS ---------------------------------------- */
.card {
  padding: var(--s4); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.card h3 { margin-bottom: var(--s2); }
.card p { max-width: none; }

.stat { border-top: 2px solid var(--accent); padding-top: var(--s3); }
.stat__figure {
  font-family: var(--font-display); font-size: var(--t-3);
  color: var(--ink); line-height: 1; letter-spacing: -0.02em;
}
.stat__label { margin-top: var(--s2); font-size: var(--t--1); color: var(--ink-3); max-width: 24rem; }

.bio { display: grid; gap: var(--s4); }
.bio__name { margin-bottom: .2rem; }
.bio__role { font-size: var(--t--1); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s3); }

.facts { list-style: none; display: grid; gap: var(--s2); }
.facts li { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s3); padding-block: .6rem; border-bottom: 1px solid var(--line); }
.facts dt, .facts b { font-size: var(--t--1); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }

/* ---------- 9. PLACEHOLDER ----------------------------------------------
   Anything not yet written by Roger wears this. It must be impossible to
   mistake for finished copy. Delete the class when the real words arrive.  */
.ph {
  position: relative;
  border: 1px dashed var(--accent-2);
  background: var(--accent-wash);
  border-radius: var(--radius);
  padding: var(--s4) var(--s3) var(--s3);
  color: var(--ink-3);
  font-style: italic;
  max-width: none;
}
.ph::before {
  content: "PLACEHOLDER — NOT REAL COPY";
  position: absolute; top: 0; left: 0;
  padding: .15rem .5rem;
  font-family: var(--font-body); font-style: normal;
  font-size: .65rem; font-weight: 600; letter-spacing: .12em;
  background: var(--accent); color: #fff;
  border-radius: var(--radius) 0 var(--radius) 0;
}
.ph p { max-width: none; }
.ph + .ph { margin-top: var(--s3); }

/* ---------- 10. FOOTER --------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  padding-block: var(--s6) var(--s4);
  font-size: var(--t--1);
}
.site-footer__grid { display: grid; gap: var(--s4); }
@media (min-width: 46rem) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--s5); } }
.site-footer h4 { font-family: var(--font-body); font-size: var(--t--1); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s2); }
.site-footer ul { list-style: none; display: grid; gap: .4rem; }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--accent); }
.site-footer__base { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; }

/* ---------- 11. UTILITIES ------------------------------------------------ */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper); padding: .7rem 1.2rem;
}
.skip:focus { left: .5rem; top: .5rem; color: var(--paper); }
.stack > * + * { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); }
.narrow { max-width: var(--measure); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 12. AUDIENCE ROUTING ----------------------------------------
   "Who are you?" cards. The pattern every serious acquirer uses to send a
   banker, an owner and an investor to different pages.                    */
.route { display: grid; gap: var(--s3); }
@media (min-width: 46rem) { .route { grid-template-columns: repeat(3, 1fr); } }
.route__card {
  display: block; padding: var(--s4);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink-2);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.route__card:hover { border-color: var(--accent); color: var(--ink-2); transform: translateY(-2px); }
.route__card h3 { margin-bottom: var(--s2); }
.route__card p { max-width: none; font-size: var(--t--1); }
.route__card .go { display: inline-block; margin-top: var(--s3); font-size: var(--t--1); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* ---------- 13. NUMBERED PROCESS ---------------------------------------- */
.steps { list-style: none; counter-reset: step; display: grid; gap: 0; }
.steps > li {
  counter-increment: step; position: relative;
  padding: var(--s4) 0 var(--s4) 4.25rem;
  border-bottom: 1px solid var(--line);
}
.steps > li:first-child { padding-top: 0; }
.steps > li:last-child { border-bottom: 0; }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: var(--s4);
  font-family: var(--font-display); font-size: var(--t-1);
  color: var(--accent); line-height: 1;
}
.steps > li:first-child::before { top: 0; }
.steps h3 { margin-bottom: var(--s2); }
.steps p { max-width: 44rem; }

/* ---------- 14. FAQ (no JavaScript) ------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--t-1); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: var(--t-1); line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > *:not(summary) { padding-bottom: var(--s4); }

/* ---------- 15. CRITERIA TABLE ------------------------------------------ */
.criteria { width: 100%; border-collapse: collapse; }
.criteria th, .criteria td { text-align: left; padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.criteria th {
  width: 14rem; font-size: var(--t--1); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.criteria td { color: var(--ink); }
@media (max-width: 40rem) { .criteria th, .criteria td { display: block; width: auto; border: 0; padding-block: .2rem; } .criteria tr { display: block; padding-block: var(--s3); border-bottom: 1px solid var(--line); } }

/* ---------- 16. QUOTE ---------------------------------------------------- */
.quote {
  border-left: 2px solid var(--accent);
  padding: var(--s2) 0 var(--s2) var(--s4);
  font-family: var(--font-display); font-size: var(--t-2);
  line-height: 1.35; color: var(--ink); max-width: 40rem;
}
.quote__by { display: block; margin-top: var(--s3); font-family: var(--font-body); font-size: var(--t--1); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- 17. NEWS LIST ------------------------------------------------ */
.news { list-style: none; border-top: 1px solid var(--line); }
.news li { display: grid; gap: var(--s1); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 46rem) { .news li { grid-template-columns: 10rem 1fr; gap: var(--s4); } }
.news time { font-size: var(--t--1); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.news h3 { margin-bottom: var(--s2); }

/* ---------- 18. FORM ----------------------------------------------------- */
.form { display: grid; gap: var(--s3); max-width: 34rem; }
.form label { display: grid; gap: .4rem; font-size: var(--t--1); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.form input, .form select, .form textarea {
  padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font-size: var(--t-0);
  letter-spacing: normal; text-transform: none;
}
.form textarea { min-height: 8rem; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); }

/* ---------- 19. CONTACT BLOCK ------------------------------------------- */
.contact-card { padding: var(--s4); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--radius); background: var(--paper); }
.contact-card h3 { margin-bottom: var(--s2); }
.contact-card a { font-size: var(--t-1); font-family: var(--font-display); }

/* ---------- 20. DRAFT MARKER --------------------------------------------
   A dotted underline on any specific Claude drafted rather than took from
   Roger — numbers, dates, descriptions. Subtle enough to publish by
   accident without embarrassment, visible enough to find and check.
   Delete the class as each one is confirmed.                             */
.draft { border-bottom: 1px dotted var(--accent-2); }

/* ---------- 21. RIDGE ARTWORK -------------------------------------------
   Original inline SVG. A saddle-shaped ridge — two peaks with a low col
   between them. Stylised, not a survey of any particular mountain.       */
.ridge { display: block; width: 100%; height: auto; color: var(--accent); }
.ridge--hero { margin-top: var(--s6); opacity: .9; }
.hero--art { padding-bottom: 0; }
.band-art { background: var(--paper-2); border-top: 1px solid var(--line); }
.band-art svg { display: block; width: 100%; height: auto; }

/* ---------- 22. HERO PHOTOGRAPH ------------------------------------------
   Roger, 2026-09-14: he wanted a real mountain range in the background of
   the home page, "with class" — not a picture taped onto the page.

   The photograph is the Chiricahua Mountains, Arizona. Licence CC0 — the
   photographer waived every right, so it is free for commercial use with no
   fee and NO ATTRIBUTION REQUIRED. Nothing has to be printed on the site.
   Source: commons.wikimedia.org/wiki/File:Chiricahua_Mountains_(10-21-2019)_(48952747716).jpg

   Two earlier attempts were rejected by Roger on 2026-09-14. The Gallatin
   Range: snow-covered — "we're from Monterrey, haven't seen snow in years down
   there." The Coxcomb Mountains: read as flat desert — "the symbol for a
   desert... something cowboy or Utah." What he wants is the Sierra Madre
   Oriental: SERRATED RIDGES LAYERING BACK INTO HAZE. He sent photographs of
   the Monterrey ranges as the reference. No snow, no flat desert, no postcards.
   The stock photographs he sent are Alamy and Google results and cannot be
   used without buying a licence.
   Stored locally at assets/img/ridge.jpg — nothing is loaded from the web,
   so the site still works with no internet connection.

   The treatment is what keeps it quiet: colour stripped out, held at low
   opacity, and masked so it emerges from the page at the top and dissolves
   back into it at the bottom. It reads as texture behind the words rather
   than as a photograph stuck on the page.                               */
.hero-band {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

/* The photograph occupies the LOWER part of the band only. Roger, 2026-09-14:
   the words must sit on pure white — a picture behind type greys the letters
   and costs the headline its sharpness. So the type gets clean paper and the
   mountains begin underneath it. The generous bottom padding on .hero is what
   reserves that space; do not reduce one without the other.

   The image is mirrored (scaleX) so its heavy ridge falls on the RIGHT and the
   left side stays low, which is what Roger asked for. It is a landscape, so
   flipping it misrepresents nothing. */
.hero-band::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  background-image: url("../img/ridge.jpg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  transform: scaleX(-1);
  filter: grayscale(1) contrast(.94);
  opacity: .38;
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 26%, #000 62%, #000 88%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 26%, #000 62%, #000 88%, rgba(0,0,0,0) 100%);
}
.hero-band > .wrap { position: relative; z-index: 1; }
.hero-band .hero { padding-block: var(--s6) calc(var(--s8) * 1.6); }

@media (min-width: 60rem) {
  .hero-band .hero { padding-block: var(--s7) calc(var(--s8) * 2.1); }
}

/* Anyone who has asked their machine to stop moving things, and anyone
   printing the page, gets the words on plain paper.                     */
@media print {
  .hero-band::before { display: none; }
}

/* ---------- 23. BIOGRAPHY PHOTOGRAPHS -------------------------------------
   Roger, 2026-09-16: the photographs are being produced elsewhere. Drop the
   files into assets/img/ as roger.jpg and guillermo.jpg and run build.py.
   Until a file exists, build.py emits the empty .bio__portrait box instead,
   so a missing photograph can never show as a broken image.

   Both partners must be cropped the same way or the Team page reads as two
   LinkedIn profiles rather than one firm. Square-ish, shoulders up.         */
.bio__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--radius);
  background: var(--paper-2);
  filter: grayscale(1) contrast(1.02);
}

/* ---------- 24. HOME PAGE TOP --------------------------------------------
   Roger, 2026-09-16: "too much white space... bring the firm section right
   under Saddle Hill Partners... then the mountain ridge image."

   So the photograph is no longer behind the type at all. It is its own band,
   sitting between the opening block and the figures, and it dissolves into the
   page at top and bottom so it reads as a break rather than a picture stuck on
   the page. Section 22 (.hero-band) is now unused and kept only so the earlier
   treatment can be restored.                                              */
.hero--tight { padding-block: var(--s6) var(--s5); }
.hero--tight h1 { max-width: none; }

.photo-band {
  position: relative;
  height: clamp(190px, 30vh, 360px);
  overflow: hidden;
  background: var(--paper);
}
.photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/ridge.jpg");
  background-size: cover;
  background-position: center 58%;
  background-repeat: no-repeat;
  transform: scaleX(-1);
  filter: grayscale(1) contrast(.94);
  opacity: .42;
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, #000 34%, #000 74%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, #000 34%, #000 74%, rgba(0,0,0,0) 100%);
}
@media print { .photo-band { display: none; } }

/* ---------- 25. ONE-PAGE LAYOUT ------------------------------------------
   Roger, 2026-09-16. Four instructions, all here:
     - The firm name appears ONCE, in the header, and it is bigger.
     - The figures sit above the ridge, in thin-lined boxes overlapping it.
     - Tabs and sections are the same six things in the same order.
     - The tab for whatever you are reading is shaded, like a filing-cabinet
       tab. nav.js moves it as you scroll.                                  */

/* --- The wordmark carries the page now, so it grows. --- */
.site-header__inner { min-height: 5.5rem; }
.brand { gap: .8rem; }
.brand__logo { width: 3.1rem; }
.brand__mark { font-size: 2rem; }
.brand__sub { font-size: .8rem; letter-spacing: 0.22em; }
@media (max-width: 44rem) {
  .site-header__inner { min-height: 4.25rem; }
  .brand__logo { width: 2.3rem; }
  .brand__mark { font-size: 1.45rem; }
  .brand__sub { font-size: .68rem; }
}

/* --- The opening statement is the h1; the firm name is the logo.
       Three spans lock the line breaks. The 12ch measure is what keeps
       Acquire / Operate / Hold long-term from reflowing with the window. --- */
.h-lead { font-size: var(--t-3); }
#firm .h-lead { max-width: 12ch; }
.h-lead__line { display: block; white-space: nowrap; }

/* --- Anchors must clear the sticky header when a tab is clicked. --- */
.section--anchor { scroll-margin-top: 6.5rem; }
@media (max-width: 68rem) { .section--anchor { scroll-margin-top: 8.5rem; } }

/* --- Figures: thin-lined boxes that sit down over the ridge. --- */
.figures {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
  margin-top: var(--s5);
}
@media (max-width: 40rem) { .figures { grid-template-columns: 1fr; } }
.figure {
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: var(--s4) var(--s4) calc(var(--s4) - .35rem);
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.figure__num {
  font-family: var(--font-display);
  font-size: var(--t-3);
  line-height: 1;
  color: var(--ink);
}
.figure__label {
  font-size: var(--t--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* The ridge slides up behind the lower edge of the boxes. */
.photo-band { margin-top: calc(var(--s5) * -1); }

/* --- The tab for the section being read. --- */
.nav__link[aria-current="page"] {
  color: var(--accent);
  background: transparent;
  border-bottom-color: var(--accent);
  border-radius: 0;
}
.mobile-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* ---------- 26. THE TOP, REWORKED ----------------------------------------
   Roger, 2026-09-17, five changes:
     - less air between the opening paragraph and the figures
     - no boxes: a thin rule above each figure instead
     - the ridge sits higher and blends up into the white and the text, so it
       reads as the background of the page rather than a picture in a slot
     - a hairline and real space before Investment Criteria, so the eye knows
       the top section has ended
     - the footer is dark, so the end of the site looks like the end        */

/* --- Figures: rules, not boxes. The ridge shows through behind them. --- */
.figures {
  margin-top: var(--s3);
  gap: var(--s5);
}
.figure {
  border: 0;
  border-top: 1px solid var(--ink);
  background: none;
  border-radius: 0;
  padding: var(--s3) 0 0;
  gap: .3rem;
}

/* --- The ridge climbs behind the figures and the paragraph above them. --- */
.photo-band {
  height: clamp(280px, 42vh, 520px);
  margin-top: calc(var(--s8) * -1);
  z-index: 0;
}
.photo-band::before {
  background-position: center 62%;
  opacity: .40;
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 26%, rgba(0,0,0,.62) 48%,
      #000 66%, #000 84%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 26%, rgba(0,0,0,.62) 48%,
      #000 66%, #000 84%, rgba(0,0,0,0) 100%);
}
/* The opening block has to sit above the ridge that is climbing into it. */
#firm .hero, #firm .figures { position: relative; z-index: 2; }
#firm { position: relative; overflow: hidden; padding-bottom: var(--s5); }

/* --- A hairline and room before the criteria. --- */
#criteria {
  border-top: 1px solid var(--line);
  padding-top: var(--s8);
}

/* --- The footer is the end of the site, not another band of it. --- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
  padding-block: var(--s6) var(--s4);
}
.site-footer .brand,
.site-footer .brand__mark { color: var(--paper); }
.site-footer .brand__logo { color: var(--paper); opacity: .75; }
.site-footer .brand__sub { color: color-mix(in srgb, var(--paper) 62%, transparent); }
.site-footer p { color: color-mix(in srgb, var(--paper) 72%, transparent) !important; }
.site-footer h4 { color: color-mix(in srgb, var(--paper) 55%, transparent); }
.site-footer a { color: color-mix(in srgb, var(--paper) 82%, transparent); }
.site-footer a:hover { color: var(--paper); }
.site-footer__base {
  border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}

/* ---------- 27. THE BOTTOM EDGE OF THE RIDGE ------------------------------
   Roger, 2026-09-17: the foot of the image looked blurry, with a pale bar
   under the mountains, and the rule beneath it floated in white.

   Both were the same mistake: the mask faded the photograph to nothing at the
   bottom. The image now rises out of the white at the top and STOPS at the
   bottom, on a hard edge, with the rule sitting directly on it.

   The top fade stays. It is the blend into the page that Roger asked for.  */
.photo-band::before {
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 26%, rgba(0,0,0,.62) 48%, #000 70%, #000 100%);
          mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 26%, rgba(0,0,0,.62) 48%, #000 70%, #000 100%);
}

/* No gap between the foot of the image and the rule. */
#firm { padding-bottom: 0; }
.photo-band { margin-bottom: 0; }

/* A heavier rule than the hairlines above the figures, so it reads as the end
   of a section rather than another caption line. */
#criteria {
  border-top: 2px solid var(--ink);
  padding-top: var(--s8);
}

/* Roger, 2026-09-17: at 2px the near-black read as blue. Back to a hairline,
   same weight as the rules above the figures. The hard bottom edge stays. */
#criteria { border-top: 1px solid var(--ink); }

/* Roger, 2026-09-17: the first section wanted about two inches more height,
   without touching the spacing at the top of the page or the image itself.
   Taken in two steps, as he described: the figures drop about half an inch,
   and the ridge drops a further inch on top of that. Nothing is stretched —
   the image keeps its proportions and simply starts lower.                */
.figures { margin-top: var(--s5); }
.photo-band {
  margin-top: calc(var(--s4) * -1);
  height: clamp(300px, 44vh, 540px);
}

/* Roger, 2026-09-17, on a smaller screen: the first section is too tall, and
   the gap between the opening statement and the figure rules is the culprit.

   Made responsive rather than simply smaller, so it stays roomy on a large
   display and tightens where there is less height to spend. The ridge follows
   the figures up, so the overlap between them does not change.            */
.figures { margin-top: var(--s4); }

@media (max-height: 900px), (max-width: 68rem) {
  .hero--tight { padding-block: var(--s5) var(--s4); }
  .figures { margin-top: var(--s3); }
  .photo-band { height: clamp(240px, 38vh, 420px); }
}

@media (max-height: 740px), (max-width: 44rem) {
  .hero--tight { padding-block: var(--s4) var(--s3); }
  .figures { margin-top: var(--s2); }
  .photo-band { height: clamp(190px, 32vh, 330px); }
  #criteria { padding-top: var(--s6); }
}

/* Roger, 2026-09-17: PARTNERS sat too small against Saddle Hill. Raised, with
   its letter-spacing eased slightly so the wider setting does not crowd. */
.brand__sub { font-size: 1rem; letter-spacing: 0.2em; }
@media (max-width: 44rem) { .brand__sub { font-size: .82rem; } }

/* Roger, 2026-09-17: the paragraph on the right sat higher than the heading on
   the left. Optical alignment - the cap height of a large display face does not
   line up with the x-height of body text on its own.                        */
@media (min-width: 60rem) {
  .stack--aligned { padding-top: .55rem; }
}

/* The real cause of the misalignment: the left column carries a kicker above
   the heading and the right column starts at the top of the row, so the
   paragraph was lining up with "THE FIRM" rather than with the heading.
   The offset is the kicker's own line box plus its margin, less the difference
   in half-leading between a large display face and body text.
   It applies from the breakpoint where the two columns actually appear.   */
@media (min-width: 46rem) {
  .stack--aligned { padding-top: calc(var(--s3) + 1.15rem); }
}
@media (max-width: 46rem) {
  .stack--aligned { padding-top: 0; }
}

/* ---------- 28. INVESTMENT CRITERIA --------------------------------------
   Roger, 2026-09-18: the table read as a separate section. The criteria are
   the paragraph above spelled out, so they sit directly under it as grouped
   bullets with the numbers in them, in a tighter block.                   */
.crit {
  display: grid;
  gap: var(--s4) var(--s6);
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
}
@media (min-width: 52rem) { .crit { grid-template-columns: repeat(2, 1fr); } }
.crit__group { break-inside: avoid; }
.crit__label {
  font-family: var(--font-body);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .55rem;
}
.crit ul { list-style: none; display: grid; gap: .35rem; }
.crit li {
  position: relative;
  padding-left: 1rem;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 34rem;
}
.crit li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: .3rem; height: 1px;
  background: var(--ink-3);
}

/* Roger, 2026-09-18: back to a table, label on the left and the points on the
   right, sitting under the paragraph with no rule between them so it reads as
   one section rather than two.                                            */
.crit { border-top: 0; padding-top: 0; }
.crit-table ul { list-style: none; display: grid; gap: .3rem; margin: 0; }
.crit-table li {
  position: relative;
  padding-left: 1rem;
  line-height: 1.5;
  max-width: 34rem;
}
.crit-table li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: .3rem; height: 1px;
  background: var(--ink-3);
}

/* Roger, 2026-09-18: the criteria table boxed, centred and lifted off the page
   on a pale ground, so it reads as the criteria set out rather than as more
   body copy.                                                              */
.crit-table {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  max-width: 58rem;
  margin-inline: auto;
}
@media (max-width: 44rem) {
  .crit-table { padding: var(--s3) var(--s3); }
}
.crit-table th, .crit-table td { background: none; }

/* Roger, 2026-09-18: "make it beautiful. Spacing is weird on the left side,
   maybe middle. Rows a different heights, maybe all the same."

   A fixed left column so every label starts on the same line, both cells
   centred vertically against each other, a floor on row height so the short
   rows stop looking cramped next to the long ones, and hairlines between rows
   rather than under the last one.                                         */
.crit-table { table-layout: fixed; }
.crit-table th,
.crit-table td {
  vertical-align: middle;
  border-bottom: 0;
  padding-block: var(--s3);
}
.crit-table tr + tr th,
.crit-table tr + tr td { border-top: 1px solid var(--line); }
.crit-table th {
  width: 15rem;
  padding-right: var(--s4);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1.35;
}
.crit-table td { padding-right: 0; }
.crit-table tr { min-height: 5.25rem; }
.crit-table th, .crit-table td { height: 5.25rem; }

@media (max-width: 44rem) {
  .crit-table { table-layout: auto; }
  .crit-table th, .crit-table td { height: auto; }
}
@media (max-width: 40rem) {
  .crit-table th, .crit-table td { border-top: 0; padding-block: .25rem; }
  .crit-table tr { padding-block: var(--s3); }
  .crit-table tr + tr { border-top: 1px solid var(--line); border-bottom: 0; }
}

/* ---------- 29. THE THREE PILLARS ----------------------------------------
   Roger, 2026-09-18. Three boxes, a title and a blurb in each, sitting between
   the opening paragraph and the financial criteria.                       */
.pillars { display: grid; gap: var(--s4); }
@media (min-width: 52rem) { .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
.pillar { border-top: 2px solid var(--accent); padding-top: var(--s3); }
.pillar__title {
  font-family: var(--font-display);
  font-size: var(--t-1);
  margin-bottom: .5rem;
}
.pillar p { font-size: var(--t--1); line-height: 1.6; color: var(--ink-2); max-width: none; }

/* --- The financial table: tighter, centred labels, round bullets. --- */
.crit-table {
  max-width: 44rem;
  padding: var(--s4) var(--s5);
}
.crit-table th {
  width: 11rem;
  text-align: center;
  padding: var(--s3) var(--s4);
  font-size: var(--t--1);
  letter-spacing: .1em;
}
.crit-table td { padding: var(--s3) 0; font-size: var(--t--1); }
.crit-table th, .crit-table td { height: 4.5rem; }
.crit-table li { padding-left: .95rem; line-height: 1.55; max-width: none; }
.crit-table li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: .3rem; height: .3rem;
  border-radius: 50%;
  background: var(--accent);
}
@media (max-width: 44rem) {
  .crit-table th { text-align: left; padding-inline: 0; }
  .crit-table th, .crit-table td { height: auto; }
}

/* ---------- 30. THE 2x2 --------------------------------------------------
   Roger, 2026-09-18. Horizontal axis: resistance to automation. Vertical axis:
   resistance to online retail, which is where the e-commerce test moved once
   it was cut as a criterion of its own. Top right is the target; the other
   three quadrants are left flat and unmarked.                             */
.matrix { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 60rem) {
  .matrix { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); }
}
.matrix__chart svg { display: block; width: 100%; height: auto; max-width: 34rem; margin-inline: auto; }
.matrix__key { display: grid; gap: var(--s4); }
.matrix__axis h4 {
  font-family: var(--font-body);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .5rem;
}
.matrix__axis p {
  font-size: var(--t--1);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: none;
}
.matrix__axis p + p { margin-top: .5rem; }
.matrix__axis strong { color: var(--ink); font-weight: 600; }

/* The chart's colours live here rather than on the shapes, because a presentation
   attribute carrying var() does not resolve everywhere. */
.q-flat   { fill: var(--paper-2); }
.q-target { fill: var(--accent-wash); }
.q-edge   { fill: none; stroke: var(--accent); stroke-width: 2; }
.m-split  { stroke: var(--line); stroke-width: 1; }
.m-axis   { stroke: var(--ink-3); stroke-width: 1.5; }
.m-tick   {
  fill: none; stroke: var(--accent); stroke-width: 9;
  stroke-linecap: round; stroke-linejoin: round;
}
.m-sign {
  fill: var(--ink-3); font-family: var(--font-body);
  font-size: 21px; font-weight: 600;
}
.m-title {
  fill: var(--ink-2); font-family: var(--font-body);
  font-size: 15px; letter-spacing: 1.4px;
}

/* ---------- 31. PILLARS, CHART AND SUB-HEADINGS --------------------------
   Roger, 2026-09-18: three pillars should be three blocks, not three plus a
   fourth. The chart belongs to the third pillar, so it sits inside it. The
   third pillar therefore runs the full width beneath the other two.       */
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }

.section-sub {
  font-family: var(--font-display);
  font-size: var(--t-2);
  margin-bottom: var(--s4);
}

@media (min-width: 52rem) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .pillar--wide { grid-column: 1 / -1; }
  .pillar--wide > p { max-width: var(--measure); }
}

.matrix { margin-top: var(--s4); display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 52rem) {
  .matrix { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: var(--s6); }
}
.matrix svg { display: block; width: 100%; height: auto; }
.matrix__note {
  font-size: var(--t--1);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 30rem;
}

/* The target quadrant is shaded and labelled. No tick. */
.m-target {
  fill: var(--accent);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 3px;
}
.m-cat {
  fill: var(--ink-2);
  font-family: var(--font-body);
  font-size: 16px;
}
.m-title {
  fill: var(--ink-3);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 1.6px;
}


/* ---------- 32. THREE ACROSS ---------------------------------------------
   Roger, 2026-09-18: the three pillars must sit side by side. The chart is
   therefore small, with a disclosure beneath it for the detail.          */
@media (min-width: 52rem) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
  .pillar--wide { grid-column: auto; }
  .pillar--wide > p { max-width: none; }
  .matrix { grid-template-columns: 1fr; gap: var(--s3); }
}
.matrix svg { max-width: 22rem; margin-inline: auto; }
.matrix__more { margin-top: .4rem; }
.matrix__more summary {
  cursor: pointer;
  font-size: var(--t--1);
  color: var(--accent);
  letter-spacing: .04em;
}
.matrix__more summary::marker { color: var(--ink-3); }
.matrix__more p {
  font-size: var(--t--1);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: none;
  margin-top: .5rem;
}

/* Bigger type inside the drawing, because the drawing itself is now small. */
.m-cat    { font-size: 26px; }
.m-title  { font-size: 22px; letter-spacing: 2px; }
.m-target { font-size: 24px; letter-spacing: 4px; }
.m-sign   { font-size: 28px; }

/* ---------- 33. THE DETAIL SHEET -----------------------------------------
   Roger, 2026-09-18: the chart in the pillar is symbolic, axis titles and the
   signs only. A Details button opens the whole thing at page size, with the
   categories and the examples, and an X at the top right.                */
.matrix__mini { max-width: 20rem; }
.detail-btn {
  display: inline-block;
  margin-top: var(--s2);
  padding: .5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--t--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.detail-btn:hover { border-color: var(--accent); color: var(--accent); }

dialog.sheet {
  width: min(100vw, 100%);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
}
dialog.sheet::backdrop { background: rgba(15, 20, 25, .55); }
.sheet__inner {
  position: relative;
  height: 100%;
  overflow-y: auto;
  padding: var(--s6) var(--s4) var(--s6);
  max-width: var(--wide);
  margin-inline: auto;
}
.sheet__close {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.sheet__close:hover { border-color: var(--accent); color: var(--accent); }
.sheet__title { font-size: var(--t-2); margin-bottom: var(--s5); }
.sheet__body { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 60rem) {
  .sheet__body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s6); }
  .sheet__inner { padding-inline: var(--s6); }
}
.sheet__body svg { display: block; width: 100%; height: auto; max-width: 38rem; margin-inline: auto; }
.sheet__notes h3 {
  font-family: var(--font-body);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .5rem;
}
.sheet__notes h3 + p { margin-bottom: var(--s4); }
.sheet__notes p { color: var(--ink-2); line-height: 1.6; }

/* The full chart can carry smaller type than the miniature. */
.sheet__body .m-cat   { font-size: 21px; }
.sheet__body .m-title { font-size: 18px; letter-spacing: 1.6px; }
.sheet__body .m-target{ font-size: 20px; letter-spacing: 3.5px; }
.sheet__body .m-sign  { font-size: 24px; }

/* ---------- 34. PILLAR MARKS ---------------------------------------------
   Roger, 2026-09-18: all three pillars carry a symbol, the 2x2 among them is
   symbolic only and smaller, and the Details control has to look like a
   button.                                                                */
.mark, .matrix__mini {
  display: block;
  width: 100%;
  max-width: 17rem;
  height: auto;
  margin: var(--s3) 0 0;
}
.mark__panel  { fill: var(--paper-2); stroke: var(--line); stroke-width: 3; }
.mark__scale  { stroke: var(--ink-3); stroke-width: 3; opacity: .5; }
.mark__track  { stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
.mark__knob   { fill: var(--accent); }
.mark__cap    { stroke: var(--paper); stroke-width: 2.5; }
.mark__bar      { fill: var(--paper-3); }
.mark__bar--on  { fill: var(--accent); }

/* The miniature carries only the axis titles, so the type comes right down. */
.matrix__mini .m-title  { font-size: 15px; letter-spacing: 1.2px; }
.matrix__mini .m-sign   { font-size: 20px; }

.detail-btn {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 500;
  padding: .55rem 1.3rem;
}
.detail-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* The miniature needs its own size for the label, since the quadrant is small. */
.matrix__mini .m-target { font-size: 17px; letter-spacing: 2.4px; }


/* Roger, 2026-09-18: the three symbols must start at the same height. Subgrid
   lines up title, paragraph and symbol across all three columns, whatever the
   length of the words above them.                                         */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 52rem) {
    .pillars { grid-template-rows: auto auto auto; }
    .pillar { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 0; }
    .pillar__title { align-self: start; }
    .pillar > p { align-self: start; margin-bottom: var(--s3); }
    .mark, .matrix { align-self: start; margin-top: 0; }
  }
}

/* ---------- 35. THE PROFILE PANEL ----------------------------------------
   Roger, 2026-09-18: the financial table read as a bad slide and sat at the
   foot of the section. It becomes a compact panel in the white space beside
   the opening paragraph, ungrouped, in smaller type.                     */
.grid--aside { display: grid; gap: var(--s5); }
@media (min-width: 60rem) {
  .grid--aside { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: start; }
}
.profile {
  border-left: 2px solid var(--accent);
  padding: .2rem 0 .2rem var(--s4);
}
.profile__label {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s2);
}
.profile ul { list-style: none; display: grid; gap: .55rem; }
.profile li {
  position: relative;
  padding-left: .95rem;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.profile li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: .28rem; height: .28rem;
  border-radius: 50%;
  background: var(--accent);
}

/* Roger, 2026-09-18: the profile sat too low and too far from what follows.
   It lifts to meet the paragraph, and the gap to Three pillars closes. */
.profile { padding-top: 0; margin-top: -.35rem; }
.grid--aside { gap: var(--s4); }
@media (min-width: 60rem) { .grid--aside { gap: var(--s6); } }
.section-sub { margin-bottom: var(--s3); }


/* Roger, 2026-09-18: on a wide window the page sat in the middle with large
   empty margins. The container now runs to 100rem instead of 72rem, and the
   reading measures inside it still cap the line length, so the text stays
   readable while the layout uses the screen.                              */
@media (min-width: 100rem) {
  .grid--split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .lede { max-width: 46rem; }
}
@media (max-width: 30rem) {
  .wrap { width: min(100% - 2rem, var(--wide)); }
  .site-header__inner { min-height: 3.9rem; }
}