/* Miller Advisory Partners: the M6 system (paper ground, navy ink, ember
   accent, navy logo) in Geist and Geist Mono. One stylesheet for every page:
   the homepage, the Writing pages and the privacy policy. Light only, by
   design. */

/* Geist and Geist Mono, served from this site (SIL Open Font License 1.1,
   see /assets/fonts/OFL.txt). Variable fonts: one file covers every weight.
   Latin subset only; anything outside it falls back to the system font. */
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --paper: #F8F7F3;
  --surface: #EFEDE7;
  --card: #FCFBF8;
  --line: #DEDAD0;
  --navy: #0D2045;
  --deep: #0A1938;
  --ink: #0D2045;
  --body: #2B3652;
  --muted: #4E5872;
  --sep: #CFCABD;
  --ember: #C2410C;          /* fills and large type; white text on it */
  --ember-text: #A8380A;     /* ember as running text on paper */
  --tint: #FBE5D8;
  --on-tint: #8F300A;
  --signal: #FF7A45;         /* buttons on navy, with navy text */
  --on-navy: #F8F7F3;
  --on-navy-body: #E4E8F1;
  --on-navy-muted: #A9B4CB;
  --on-navy-accent: #FF8A5B; /* ember on navy: links, eyebrows, emphasis */
  --console-text: #D6DDEC;
  --console-time: #94A1BF;
  --ok: #3FCB82;
  --input-border: #7D879D;
  --headshot-ground: #13295A;
  --grid-line: rgba(13, 32, 69, 0.05);
  --grid-line-on-navy: rgba(248, 247, 243, 0.04);
  --rule: rgba(13, 32, 69, 0.16);
  --rule-on-navy: rgba(248, 247, 243, 0.09);
  --foot-rule: rgba(248, 247, 243, 0.08);
  --sans: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(20px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* The graph-paper ground shows behind the nav and the page head only:
   everything from the navy band down paints its own background. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; display: flex; flex-direction: column; }
main > article { flex: 1 0 auto; display: flex; flex-direction: column; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 2px; }

.wrap {
  width: 100%;
  max-width: calc(1200px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 10;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--navy);
  color: var(--on-navy);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* Visually hidden, still read by screen readers */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Logo mark, option A ("Node M"): the SVG draws its own tile. Navy-logo
   rule: a navy tile with a paper M on light grounds, a paper tile with a
   navy M on navy grounds. The ember node is the light ember on the navy
   tile and the deep ember on the paper one. */
.mark { flex: none; display: inline-flex; }
.mark svg { display: block; width: 100%; height: 100%; }
.mark__tile { fill: var(--navy); }
.mark__m { fill: var(--paper); }
.mark__node { fill: var(--on-navy-accent); }
.mark--on-navy .mark__tile { fill: var(--paper); }
.mark--on-navy .mark__m { fill: var(--navy); }
.mark--on-navy .mark__node { fill: var(--ember); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}
.btn--navy { background: var(--navy); color: var(--on-navy); }
.btn--signal { min-height: 48px; padding: 0 20px; background: var(--signal); color: var(--navy); font-size: 15px; }
.btn--ember { background: var(--ember); color: #FFFFFF; }
.btn--lg { min-height: 50px; padding: 0 22px; font-size: 16px; }

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--ember);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

/* Site nav */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  padding-block: 20px;
  border-bottom: 1px solid var(--rule);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.brand .mark { width: 32px; height: 32px; }
.nav__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.nav__links a:not(.btn) { padding: 10px 2px; color: var(--muted); text-decoration: none; font-size: 15px; }
.nav__links a:not(.btn):hover { color: var(--ink); }
.nav__links a[aria-current] {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ember);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
.nav__toggle { display: none; }

/* Phones: the links fold into a Menu button. Only with JavaScript running
   (site.js sets .js on <html>); without it the links stay out and wrap. */
@media (max-width: 760px) {
  /* Icon only, so it fits on the brand's row at phone width; its name
     ("Menu") is in a visually hidden span. */
  .js .nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.65);
    color: var(--ink);
    cursor: pointer;
  }
  .js .nav__toggle svg { flex: none; width: 18px; height: 18px; }
  .js .nav__toggle .nav__close { display: none; }
  .js .nav[data-open] .nav__toggle .nav__open { display: none; }
  .js .nav[data-open] .nav__toggle .nav__close { display: block; }
  .js .nav__links { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .js .nav[data-open] .nav__links { display: flex; }
  .js .nav__links a:not(.btn) { padding: 13px 2px; border-top: 1px solid var(--rule); font-size: 16px; }
  .js .nav__links .btn { margin-top: 14px; justify-content: center; min-height: 48px; font-size: 15.5px; }
}

/* Section scaffolding shared by the homepage, the Writing index and the
   privacy page */
.eyebrow,
.kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--ember-text); }
.eyebrow::before,
.kicker::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--ember); }
.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow--on-navy { color: var(--on-navy-accent); }
.eyebrow--on-navy::before { background: var(--on-navy-accent); }
.lede { flex: 1 1 340px; min-width: 0; max-width: 30em; margin: 0; font-size: 18px; line-height: 1.6; color: var(--muted); }

/* Page heads: the article title block, the Writing index head and the
   privacy page head */
.article-head { display: flex; flex-direction: column; gap: 28px; padding-block: 72px 80px; }
.article-head h1,
.page-head h1 {
  margin: 0;
  max-width: 1040px;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1;
  letter-spacing: -0.048em;
  font-weight: 600;
  text-wrap: balance;
}
.crumbs {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.crumbs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs__sep { color: var(--sep); }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
/* The ring keeps the paper-backdrop photo from dissolving into the page. */
.byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--line); box-shadow: 0 0 0 1px var(--line); }
.byline__text { display: flex; flex-direction: column; gap: 2px; }
.byline__name { font-size: 16px; font-weight: 600; }
.byline__meta,
.card__meta,
.page-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-meta { margin: 0; }
/* Kicker, date and read time each stay whole; lines break at the dots. */
.byline__meta > *,
.card__meta > * { white-space: nowrap; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 64px; padding-block: 72px 80px; }
.page-head__title { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.page-head h1 em { font-style: normal; color: var(--ember); }

/* The navy band that closes every page head, with its ember stripe */
.band { position: relative; flex: none; height: 12px; background: var(--navy); }
.band::before { content: ""; position: absolute; left: 0; top: 0; width: 30%; max-width: 384px; height: 4px; background: var(--ember); }

/* Article body */
.article-body {
  flex: 1 0 auto;
  background: var(--paper);
  padding-block: clamp(56px, 7vw, 88px) clamp(72px, 9vw, 112px);
}
.prose {
  max-width: calc(680px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 19px;
  line-height: 1.7;
  color: var(--body);
}
.prose > * { min-width: 0; }
.prose p { margin: 0; }
.prose h2,
.prose h3 { margin: 24px 0 0; color: var(--ink); font-weight: 600; text-wrap: balance; scroll-margin-top: 24px; }
.prose h2 { font-size: clamp(26px, 3vw, 32px); line-height: 1.15; letter-spacing: -0.03em; }
.prose h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose :is(p, li) a { color: var(--ember-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.pullquote {
  margin: 16px 0;
  padding: 28px 0 30px;
  border-top: 2px solid var(--navy);
  border-bottom: 1px solid var(--line);
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}
.pullquote__accent { color: var(--ember); }

/* The dek: a standfirst that opens the body, set larger than the prose
   and closed off from it by a rule. */
.prose .dek {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(21px, 2.4vw, 24px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
}

.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.rows li { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.rows__n {
  flex: none;
  width: 32px;
  padding-top: 3px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ember-text);
}
.rows__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 17px; line-height: 1.65; }
.rows__title { font-size: 20px; line-height: 1.35; letter-spacing: -0.015em; }

.bullets { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 10px; }
.bullets li::marker { color: var(--ember); }

.tags { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--on-tint);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.4;
}

.also { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; }
.prose .also a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-weight: 500; }
.prose .also a:hover { text-decoration: underline; }

.author {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 24px;
  padding: 28px;
  border-radius: 20px;
  background-color: var(--navy);
  background-image:
    linear-gradient(var(--grid-line-on-navy) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-on-navy) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--on-navy);
}
.author img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--headshot-ground); }
.author__text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; line-height: 1.4; }
.author__name { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.author__role {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-navy-muted);
}
.author__line { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--on-navy-body); }
.author__bio { font-size: 14px; line-height: 1.5; color: var(--on-navy-muted); }
.author .btn { flex: none; }

/* An article's "In short" box, above the body, and its "Where to start"
   note, before the author box. Paper callouts with an ember edge. */
.takeaways,
.next-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px;
  border-radius: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--ember);
  background: var(--card);
}
.takeaways__label,
.next-step__label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ember-text);
}
.takeaways { margin-bottom: 16px; }
.takeaways ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; font-size: 17px; line-height: 1.6; color: var(--ink); }
.takeaways li::marker { color: var(--ember); }
.next-step { margin-top: 16px; font-size: 17px; line-height: 1.6; }
.prose .next-step__more a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; text-decoration: none; }
.prose .next-step__more a:hover { text-decoration: underline; }

/* The privacy policy: the article measure, with its lists, callout and
   contact block */
.prose .legal-intro { font-size: clamp(20px, 2.2vw, 22px); line-height: 1.55; color: var(--ink); }
.prose ul:not([class]) { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 10px; }
.prose ul:not([class]) li::marker { color: var(--ember); }
.prose .callout {
  padding: 22px 24px;
  border-radius: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--ember);
  background: var(--card);
}
.prose .contact-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 14px;
  background: var(--surface);
}

/* Writing cards: the Writing index and the homepage's latest three */
.listing {
  flex: 1 0 auto;
  background: var(--paper);
  padding-block: clamp(56px, 7vw, 88px) clamp(72px, 9vw, 112px);
}
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card);
}
.card:focus-within { outline: 2px solid var(--ember); outline-offset: 3px; }
.card__thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--line); background: var(--paper); }
.card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 6px; }
.card__meta { font-size: 11.5px; }
.card__kicker { color: var(--ember-text); }
.card__title { margin: 0; font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; text-wrap: balance; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:focus-visible { outline: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.card__excerpt { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.card__cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 18px;
  color: var(--ember-text);
  font-size: 14.5px;
  font-weight: 600;
}
.card:hover .card__title a { text-decoration: underline; text-decoration-color: var(--ember); text-underline-offset: 4px; }

/* Index layout. Phones: one column of stacked cards. 600–899px: one column
   of side-by-side cards (cover left, text right). 900px up: the featured
   first card stays side by side across the full width, and the rest sit
   three across. The side-by-side declarations are repeated in both blocks
   on purpose: one applies to every card, the other only to the featured.
   Side by side, the cover fills its column's height: the covers are set
   from the bottom (title, then the navy bar), so the paper above extends
   them without cropping anything. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .card {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: 1fr auto;
  }
  .card .card__thumb { grid-row: 1 / 3; height: 100%; aspect-ratio: auto; object-fit: contain; object-position: center bottom; border-bottom: 0; border-right: 1px solid var(--line); }
  .card .card__body { align-self: center; padding-top: 22px; }
}
@media (min-width: 600px) {
  .card--featured {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: 1fr auto;
  }
  .card--featured .card__thumb { grid-row: 1 / 3; height: 100%; aspect-ratio: auto; object-fit: contain; object-position: center bottom; border-bottom: 0; border-right: 1px solid var(--line); }
  .card--featured .card__body { align-self: center; padding-top: 22px; }
}
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--featured { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .card--featured .card__body { gap: 12px; padding: 32px 36px 8px; }
  .card--featured .card__title { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.03em; }
  .card--featured .card__excerpt { font-size: 17px; }
  .card--featured .card__cta { min-height: 64px; padding: 0 36px; }
}

/* ---------------------------------------------------------------- homepage */

.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-block: 80px 104px; }
.hero__copy { flex: 1.4 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.pill {
  margin: 0;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pill__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.hero__title { margin: 0; font-size: clamp(42px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 600; text-wrap: balance; }
.hero__title em { display: block; font-style: normal; color: var(--ember); }
.hero__lede { margin: 0; max-width: 34em; font-size: 19px; line-height: 1.55; color: var(--muted); }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.stats { margin: 8px 0 0; display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule); }
.stats > div { flex: 1 1 150px; display: flex; flex-direction: column-reverse; gap: 8px; padding: 22px 24px 0 0; }
.stats > div:last-child { padding-right: 0; }
.stats dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.stats dd { margin: 0; font-size: 36px; line-height: 1; font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.hero__console { flex: 1 1 420px; min-width: 0; }

/* The illustrative agent run. Its gate panel switches between waiting,
   approved and held (home.js sets data-gate); without JavaScript it rests
   on waiting. */
.console {
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--navy);
  border: 1px solid var(--navy);
  box-shadow: 0 48px 96px -44px rgba(13, 32, 69, 0.55);
  color: var(--console-text);
  font-family: var(--mono);
}
.console__bar { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--rule-on-navy); font-size: 13px; }
.console__live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(63, 203, 130, 0.18); }
.console__name { color: var(--on-navy); font-weight: 500; }
.console__when { margin-left: auto; color: var(--console-time); }
.console__log { list-style: none; margin: 0; padding: 12px 20px 8px; display: flex; flex-direction: column; font-size: 13px; line-height: 1.5; }
.console__log li { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; }
.console__log svg { flex: none; margin-top: 2px; }
.console__log .is-held { color: var(--on-navy-accent); }
.console__t { flex: none; width: 66px; color: var(--console-time); font-variant-numeric: tabular-nums; }
.console__gate { margin: 6px 20px 18px; padding: 16px; border-radius: 12px; border: 1px solid rgba(255, 138, 91, 0.40); background: rgba(255, 138, 91, 0.10); }
.gate { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.gate__text { flex: 1 1 190px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gate__label { margin: 0; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-navy-accent); }
.gate__label--ok { color: var(--ok); }
.gate__q { margin: 0; font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--on-navy); }
.gate__actions { display: flex; gap: 8px; }
.gbtn {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(248, 247, 243, 0.26);
  border-radius: 9px;
  background: transparent;
  color: var(--on-navy);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.gbtn--go { border: 0; background: var(--signal); color: var(--navy); font-weight: 600; }
.console figcaption { padding: 12px 20px 14px; border-top: 1px solid var(--rule-on-navy); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--console-time); }
.console:not([data-gate="waiting"]) .when-waiting,
.console:not([data-gate="approved"]) .when-approved,
.console:not([data-gate="held"]) .when-held { display: none; }

/* The run plays out (home.js sets data-run to playing, merging, then done).
   Until it starts, its lines and the gate wait hidden, holding their space
   so nothing below moves. With reduced motion the run is skipped, and
   without JavaScript there is no .js class, so the console rests fully drawn.
   The dot pulses while the agent works and turns ember while it waits on a
   person. */
.console__log { font-variant-numeric: tabular-nums; }
.console__log li.is-busy svg { display: none; }
.console__spin { flex: none; width: 15px; height: 15px; margin-top: 2px; border-radius: 50%; border: 1.6px solid rgba(148, 161, 191, 0.3); border-top-color: var(--console-time); animation: console-spin 0.8s linear infinite; }
.console[data-run="done"][data-gate="waiting"] .console__live,
.console[data-gate="held"] .console__live { background: var(--on-navy-accent); box-shadow: 0 0 0 4px rgba(255, 138, 91, 0.18); }
/* The merge's progress runs along the gate's bottom edge, so the panel keeps its height. */
.console__gate { position: relative; overflow: hidden; }
.gate__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(63, 203, 130, 0.18); }
.gate__bar span { display: block; width: 0; height: 100%; background: var(--ok); }
@media (prefers-reduced-motion: no-preference) {
  .js .console:not([data-run="done"]) .console__log li:not(.is-shown) { visibility: hidden; }
  .js .console:not([data-run="done"]):not([data-run="merging"]) .console__gate { visibility: hidden; opacity: 0; transform: translateY(8px); }
  .console__gate { transition: opacity 0.35s ease-out, transform 0.35s ease-out; }
  .console__log li.is-shown { animation: console-land 0.32s ease-out both; }
  .console[data-run="playing"] .console__live,
  .console[data-run="merging"] .console__live { animation: console-pulse 1.4s ease-out infinite; }
}
@keyframes console-land { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes console-pulse { from { box-shadow: 0 0 0 0 rgba(63, 203, 130, 0.5); } to { box-shadow: 0 0 0 10px rgba(63, 203, 130, 0); } }
@keyframes console-spin { to { transform: rotate(360deg); } }

/* Homepage sections */
.section { padding-block: clamp(72px, 9vw, 120px); background: var(--paper); }
.section--surface { background: var(--surface); }
.section__inner { display: flex; flex-direction: column; gap: 48px; }
.section__inner--roomy { gap: 52px; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 64px; }
.section-head__title { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.section-head h2,
.about h2,
.contact h2 { margin: 0; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 600; text-wrap: balance; }
.section-head h2 em,
.about h2 em { font-style: normal; color: var(--ember); }
.contact h2 em { font-style: normal; color: var(--on-navy-accent); }

/* What I build */
.feature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 56px;
  padding: clamp(28px, 4vw, 52px);
  border-radius: 22px;
  background-color: var(--navy);
  background-image:
    linear-gradient(var(--grid-line-on-navy) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-on-navy) 1px, transparent 1px);
  background-size: 48px 48px;
  color: var(--on-navy);
}
.feature__copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.feature h3 { margin: 0; font-size: clamp(28px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 600; }
.feature__copy > p:not(.eyebrow) { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--on-navy-muted); }
.chips { list-style: none; margin: auto 0 0; padding: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 5px 11px; border-radius: 999px; background: var(--tint); color: var(--on-tint); font-size: 13px; font-weight: 500; line-height: 1.4; }
.chips--on-navy { margin-top: 4px; padding: 0; }
.chips--on-navy li { border: 1px solid rgba(248, 247, 243, 0.18); background: transparent; color: var(--on-navy-body); }
.stack { flex: 1 1 360px; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.stack li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 15px 18px;
  border-radius: 12px;
  border: 1px solid rgba(248, 247, 243, 0.14);
  background: rgba(248, 247, 243, 0.04);
}
.stack__name { font-size: 16px; font-weight: 600; }
.stack__note { font-family: var(--mono); font-size: 12.5px; color: var(--on-navy-muted); }
.stack .is-gate { border: 1.5px solid var(--on-navy-accent); background: rgba(255, 138, 91, 0.10); }
.stack .is-gate .stack__name,
.stack .is-gate .stack__note { color: var(--on-navy-accent); }
.stack .is-base { padding-block: 17px; border: 0; background: var(--paper); color: var(--navy); }
.stack .is-base .stack__note { color: var(--muted); }
.offer-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.offer {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--line);
}
.offer h3 { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; }
.offer > p:not(.eyebrow) { margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted); }

/* How an engagement runs */
.stages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 24px; }
.stage { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.stage__head { display: flex; align-items: center; gap: 12px; }
.stage__n {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
}
.stage__n--start { border: 0; background: var(--ember); color: #FFFFFF; }
.stage__label { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.stage__rule { flex: 1 1 auto; height: 1px; min-width: 24px; background: var(--sep); }
.stage__card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
}
.stage__title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.stage h3 { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; }
.badge {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--ember);
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stage__card > p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted); }
.stage__get { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.stage__get span { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.stage__get strong { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }

/* Who I am */
.about { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px 72px; }
.about__photo { flex: 1 1 300px; max-width: 400px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.about__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 20px; background: var(--line); }
.about__photo figcaption { display: flex; flex-direction: column; gap: 4px; padding-left: 2px; }
.about__name { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.about__role { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.about__copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.about__text { display: flex; flex-direction: column; gap: 16px; max-width: 38em; font-size: 17px; line-height: 1.65; color: var(--muted); }
.about__text p { margin: 0; }

/* Writing, on the homepage */
.more { margin: 0; }

/* Get in touch */
.contact {
  padding-block: clamp(72px, 9vw, 120px);
  background-color: var(--navy);
  background-image:
    linear-gradient(var(--grid-line-on-navy) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-on-navy) 1px, transparent 1px);
  background-size: 64px 64px;
  color: var(--on-navy);
}
.contact__inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px 72px; }
.contact__copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.contact__lede { margin: 0; max-width: 30em; font-size: 18px; line-height: 1.6; color: var(--on-navy-muted); }
.contact__email {
  align-self: flex-start;
  padding-block: 10px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--on-navy-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  overflow-wrap: anywhere;
}
.contact__where { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-navy-muted); }
.contact__panel { flex: 1 1 400px; min-width: 0; padding: clamp(24px, 3vw, 36px); border-radius: 20px; background: var(--paper); color: var(--ink); }
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; font-weight: 600; }
.field__opt { font-weight: 400; color: var(--muted); }
.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.field textarea { min-height: 128px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #6B7489; }
.form__submit { align-self: flex-start; border: 0; cursor: pointer; font-family: inherit; }
.form__submit:disabled { opacity: 0.7; cursor: progress; }
/* The honeypot: off-screen, not display:none (some bots skip hidden fields). */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__note { margin: 0; font-size: 17px; line-height: 1.55; }
.form__note a { color: var(--ember-text); }

/* Footer */
.foot { background: var(--deep); color: var(--on-navy-muted); border-top: 1px solid var(--foot-rule); }
.foot__inner {
  padding-block: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  font-size: 14px;
}
.foot__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.foot__id .mark { width: 26px; height: 26px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 24px; min-width: 0; }
.foot__links a { padding-block: 10px; color: var(--on-navy); text-decoration: none; overflow-wrap: anywhere; }
.foot__links a:hover { text-decoration: underline; }

@media (max-width: 520px) {
  .nav { gap: 8px 24px; padding-block: 16px; }
  .nav__links { gap: 0 18px; }
  .article-head,
  .page-head { gap: 22px; padding-block: 44px 52px; }
  .prose { font-size: 18px; gap: 22px; }
  .rows li { gap: 14px; }
  .author { padding: 22px; }
  .hero { gap: 44px; padding-block: 44px 64px; }
  .stage__card { padding: 22px; }
}