/* ==========================================================================
   ethanjfarrar.com — styles
   Vanilla CSS. Custom properties for theming. Mobile-first.
   Headings: Source Serif 4. Body/UI: Inter. One accent: deep blue-gray.

   Design language: a single accent device recurs as the site's signature —
   a thin rule at the top of the page, a short marker that anchors the hero
   and each section heading, the phase numbers, and the closing divider.
   Restraint is the statement; the accent is used sparingly and on purpose.
   ========================================================================== */

/* --- Fonts (self-hosted, latin subset, variable) ------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-serif-4-latin.woff2") format("woff2");
}

/* --- Design tokens ------------------------------------------------------- */

:root {
  /* Type families */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  /* Two-typeface system: small tracked-uppercase labels render in Inter,
     not a third (monospace) face. Kept as a named token so every label
     stays in one place; repoint here to reintroduce a label face. */
  --font-mono: var(--font-sans);

  /* Type scale */
  --fs-body: 1.125rem;                        /* 18px */
  --fs-lead: 1.1875rem;                       /* 19px */
  --fs-small: 0.9375rem;                      /* 15px */
  --fs-label: 0.8125rem;                      /* 13px */
  --fs-h3: 1.25rem;                           /* 20px */
  --fs-h2: 1.75rem;                           /* 28px */
  --fs-h1: clamp(2.25rem, 4.5vw + 1rem, 3.5rem);   /* 36 -> 56px */
  --fs-price: clamp(1.875rem, 2.5vw + 0.75rem, 2.25rem);

  /* Line heights */
  --lh-body: 1.65;
  --lh-heading: 1.2;
  --lh-hero: 1.05;

  /* Color */
  --bg: #faf9f7;
  --text: #1f1f1f;
  --text-secondary: #595754;
  --border: #e4e1db;
  --hairline: #ebe8e2;
  --accent: #213a54;
  --accent-hover: #152737;
  --accent-muted: color-mix(in srgb, var(--accent) 48%, var(--bg));
  --card-bg: #f4f2ed;
  --divider: #d9d5cc;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  /* Layout */
  --page-width: 50rem;     /* 800px page frame */
  --measure: 42rem;        /* ~672px prose measure */
  --section-pad: clamp(4rem, 7vw, 6rem);

  /* The recurring accent marker */
  --marker-width: 2.5rem;

  /* Card / control radius */
  --radius: 4px;
  --radius-card: 0.5rem;   /* 8px — crisper editorial card corners */

  /* Motion — one professional ease (expo-out) for every micro-interaction */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Reset / base -------------------------------------------------------- */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  border-top: 3px solid var(--accent);   /* page signature rule */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.06em;
  transition: color 0.18s var(--ease), text-decoration-color 0.18s var(--ease);
}

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

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

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

/* --- Button (primary CTA) ------------------------------------------------ */

.button {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.1s var(--ease);
}

.button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--bg);
}

.button:active {
  transform: scale(0.98);
}

/* --- Utilities ----------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 3rem);
}

/* Constrain prose to a comfortable measure, flush-left within the frame */
.measure > * {
  max-width: var(--measure);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--text);
  color: var(--bg);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  z-index: 10;
}

.skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
}

/* --- Header -------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.site-header__name {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

.site-header__name::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  background: var(--accent);
  border-radius: 2px;
}

.site-header__name:hover {
  color: var(--accent);
}

.site-nav {
  display: flex;
  gap: var(--space-5);
}

.site-nav a {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: currentColor;
}

/* --- Sections + the recurring marker ------------------------------------- */

.section > .container {
  position: relative;
  border-top: 1px solid var(--divider);
  padding-block: var(--section-pad);
}

.section__heading {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-5);
}

/* Short accent rule that anchors the hero and each section heading */
.section__heading::before {
  content: "";
  display: block;
  width: var(--marker-width);
  height: 2px;
  margin-bottom: var(--space-4);
  background: var(--accent);
}

/* --- Hero ---------------------------------------------------------------- */

.hero > .container {
  padding-block: clamp(5rem, 12vw, 8.5rem) clamp(3.5rem, 7vw, 5rem);
}

/* Centered hero block — equal whitespace both sides */
.hero__body {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
}

/* Mono kicker above the headline, in the site's label voice */
.hero__eyebrow {
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero__headline {
  font-size: var(--fs-h1);
  line-height: var(--lh-hero);
  letter-spacing: -0.028em;
  max-width: 18ch;
  margin-inline: auto;
}

.hero__subhead {
  margin-top: var(--space-5);
  max-width: 33rem;
  margin-inline: auto;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Hero social proof — a short testimonial pull: serif quote + mono
   attribution, matching the Proven testimonial without the left rule. */
.hero__proof {
  margin: var(--space-6) auto 0;
  max-width: 36rem;
}

.hero__proof blockquote {
  margin: 0;
}

.hero__proof p {
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--text);
}

.hero__proof figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.hero__actions {
  margin-top: var(--space-6);
}

/* --- Background (lead-in) ------------------------------------------------ */

.section--background p {
  font-size: var(--fs-lead);
}

.section--background p + p {
  margin-top: var(--space-4);
}

.section--background .bio__links {
  font-size: var(--fs-small);
}

/* Bio photo — sits beside the paragraphs on desktop, above them once
   the column narrows. flow-root contains the float without disturbing
   the divider pseudo-elements. */
.section--background > .container {
  display: flow-root;
}

.bio__photo {
  float: right;
  width: 10.5rem;
  margin: 0 0 var(--space-4) var(--space-5);
}

.bio__photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

@media (max-width: 640px) {
  .bio__photo {
    float: none;
    margin: 0 0 var(--space-4);
  }
}

/* --- Pillars ------------------------------------------------------------- */

.pillars {
  display: block;
}

/* "Why work with us" — three parallel reasons as aligned rows: the serif
   title (with the accent marker) on the left, the reason on the right, split
   by hairlines. The same row rhythm as "How we build it" and the FAQ, held to
   the prose frame so it lines up with the heading. */
.pillar {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: var(--space-5);
  align-items: start;
  padding-block: var(--space-5);
  border-top: 1px solid var(--hairline);
}

.pillar:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Workflow cards keep the accent marker above the card */
.workflow::before {
  content: "";
  display: block;
  width: var(--marker-width);
  height: 2px;
  margin-bottom: var(--space-4);
  background: var(--accent);
}

.pillar__title {
  font-size: var(--fs-h3);
  margin: 0;
}

/* The same accent marker, here anchoring each reason's title */
.pillar__title::before {
  content: "";
  display: block;
  width: var(--marker-width);
  height: 2px;
  margin-bottom: var(--space-3);
  background: var(--accent);
}

.pillar p {
  margin: 0;
  color: var(--text-secondary);
  /* Aligns the body's first line with the title text, which the marker
     above the title pushes down; reset when the row stacks on mobile. */
  padding-top: calc(var(--space-3) + 2px);
}

/* The core-claim phrase in each reason — dark against the secondary body */
.pillar__key {
  font-weight: 500;
  color: var(--text);
}

/* Stack the title above the reason once the two columns get tight */
@media (max-width: 38em) {
  .pillar {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .pillar p {
    padding-top: 0;
  }
}

/* --- Testimonial ---------------------------------------------------------- */

/* Serif quote against the accent rule; muted mono attribution. */
.testimonial {
  margin: var(--space-6) 0 0;
  border-left: 2px solid var(--accent);
  padding-left: var(--space-5);
}

.testimonial__quote {
  margin: 0;
}

.testimonial__quote p {
  font-family: var(--font-serif);
  font-size: 1.3125rem;
  line-height: 1.55;
  letter-spacing: -0.005em;
}

.testimonial__attr {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

/* --- Workflows ----------------------------------------------------------- */

.workflows__intro {
  margin-bottom: var(--space-5);
}

.workflows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.workflows__note {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.workflow {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: box-shadow 0.2s var(--ease);
}

.workflow:hover {
  box-shadow: 0 2px 10px rgba(31, 31, 31, 0.05);
}

.workflow__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}

.workflow__timeline {
  margin-top: auto;
  padding-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text-secondary);
}

/* --- Pricing ------------------------------------------------------------- */

/* Pricing — a filled panel led by the no-cost entry (the first conversation
   and scoping), so the section invites the free call rather than fronting a
   large build price. The build figure sits quietly in the terms. */
.pricing {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.pricing__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.pricing__what {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  letter-spacing: -0.005em;
}

.pricing__free {
  font-family: var(--font-serif);
  font-size: var(--fs-price);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--accent);
  white-space: nowrap;
}

.pricing__body {
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 30em) {
  .pricing__head {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* --- How it works -------------------------------------------------------- */

.phases {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: phase;
}

.phase {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) 2.75rem;
  border-top: 1px solid var(--hairline);
}

.phase:first-child {
  border-top: 0;
  padding-top: 0;
}

.phase::before {
  counter-increment: phase;
  content: counter(phase);
  position: absolute;
  left: 0;
  top: var(--space-4);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}

.phase:first-child::before {
  top: 0;
}

/* Step name on its own line — serif lead above the description, the
   same grammar as the methodology run-in leads. The descriptions sit
   secondary, like FAQ answers. */
.phase {
  color: var(--text-secondary);
}

.phase__name {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: -0.005em;
  color: var(--text);
}

.phase__nocost {
  font-size: var(--fs-small);
  font-style: italic;
}

/* The takeaway line beneath the four steps — a serif pull-line that lands
   the result, set apart from the body without a blockquote's accent rule. */
.phases__close {
  margin-top: var(--space-6);
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 1.1vw + 1.05rem, 1.625rem);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
  text-wrap: balance;
}

/* --- FAQ ----------------------------------------------------------------- */

.faq {
  display: flex;
  flex-direction: column;
}

.faq__item {
  padding-block: var(--space-5);
  border-top: 1px solid var(--hairline);
}

.faq__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.faq__question {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
}

.faq__answer {
  color: var(--text-secondary);
}

.methodology-link {
  margin-top: var(--space-6);
  font-size: var(--fs-small);
}

/* --- CTA (the close) ----------------------------------------------------- */

.section--cta > .container {
  border-top-width: 2px;
  border-top-color: var(--accent);
  padding-block: var(--section-pad) var(--space-5);
  text-align: center;
}

/* the close is anchored by the accent rule above, so it skips the marker */
.section--cta .section__heading::before {
  display: none;
}

.section--cta p {
  margin-top: var(--space-3);
  max-width: 34rem;
  margin-inline: auto;
}

/* The close mirrors the hero: the page's second (and only other)
   button, with the address still visible beneath it. */
.section--cta .cta__actions {
  margin-top: var(--space-5);
}

.cta__email {
  margin-top: var(--space-5);
}

.cta__email a {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  text-underline-offset: 0.2em;
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  margin-top: var(--space-8);
  border-top: 1px solid var(--divider);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-6) var(--space-5);
}

.site-footer__brand {
  max-width: 24rem;
}

.site-footer__name {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--text);
}

.site-footer__name::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  background: var(--accent);
  border-radius: 2px;
}

.site-footer__tagline {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.site-footer__base {
  display: flex;
  justify-content: space-between;
  padding-block: var(--space-4);
  border-top: 1px solid var(--border);
}

.site-footer__copy {
  margin: 0;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 640px) {
  body {
    font-size: 1rem;
  }

  .hero__subhead {
    font-size: 1.125rem;
  }

  .workflows {
    grid-template-columns: 1fr;
  }
}

/* --- Motion preferences -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .button:active {
    transform: none;
  }
}

/* --- Methodology document ------------------------------------------------ */

.doc > .container {
  padding-block: clamp(3rem, 7vw, 4.5rem) var(--space-7);
}

.doc__title {
  font-size: clamp(1.875rem, 4vw + 0.5rem, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.doc__title::before,
.doc h2::before {
  content: "";
  display: block;
  width: var(--marker-width);
  height: 2px;
  margin-bottom: var(--space-4);
  background: var(--accent);
}

.doc h2 {
  font-size: var(--fs-h2);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.doc p {
  margin-top: var(--space-4);
}

.doc__title + p {
  margin-top: var(--space-5);
  font-size: 1.3125rem;
  line-height: 1.5;
}

/* Run-in principle leads — the named principles and case-study components
   read as sub-headings, structuring the document for a scanning reviewer. */
.doc p > strong:first-child {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: -0.005em;
  margin-bottom: var(--space-2);
}

/* Lining, tabular figures so numbers read like a financial exhibit. */
.doc p,
.doc__list li {
  font-variant-numeric: lining-nums tabular-nums;
}

/* Downloadable-PDF affordance — mono meta label, ties the motif across pages. */
.doc__download {
  margin-top: var(--space-5);
}

.doc__download a {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.doc__download a::before {
  content: "\2193\00a0";
}

.doc__list {
  margin-top: var(--space-4);
  padding-left: 1.25rem;
}

.doc__list li {
  margin-top: var(--space-3);
  padding-left: 0.25rem;
}

.doc__list li::marker {
  color: var(--accent);
}

.doc__rule {
  margin-top: var(--space-8);
  border: 0;
  border-top: 1px solid var(--border);
}

.doc__note {
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-style: italic;
}

/* Workflow figure — left-aligned to the section heading, extending right
   of the prose measure on wide screens so the diagram labels stay
   legible. The diagram itself (.flow) is an HTML/CSS component that
   reflows instead of scaling. */
.doc__figure {
  max-width: none;
  width: clamp(100%, calc(100% + (100vw - var(--page-width)) / 2 - 1.5rem), 60rem);
  margin: var(--space-4) 0 0;
}

/* Homepage variant: the figure breaks out of the page frame
   symmetrically (centered) instead of extending right from the heading. */
.doc__figure--center {
  --figure-width: min(60rem, 92vw);
  width: var(--figure-width);
  margin-inline: calc((100% - var(--figure-width)) / 2);
}

/* Workflow diagram. All internal sizes are in em so one font-size scales
   the whole component: fluid on mid-width screens, compact in print.
   Horizontal grid by default (and in print); stacks below 60em. */
.flow {
  font-size: clamp(0.75rem, 0.85vw + 0.3rem, 1rem);
  font-family: var(--font-sans);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.3;
  color: #25303b;
  display: grid;
  grid-template-columns: max-content 2.1em minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) 3.1em minmax(0, 1.7fr) 2.1em minmax(0, 1fr);
  row-gap: 0.55em;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Lane labels — zone headers inside their panels */
.flow__lane {
  justify-self: start;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 0.72em;
  letter-spacing: 0.15em;
  color: #6f665a;
  white-space: nowrap;
}

.flow__lane--assembly { grid-row: 1; grid-column: 1 / -1; }
.flow__lane--judgment { color: #5b6b7d; }

/* Main row: systems → assembly box → divide → review → deliverable */
.flow__systems {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45em;
}

.flow__title {
  font-family: var(--font-serif);
  font-size: 0.94em;
}

.flow__meta {
  font-family: var(--font-mono);
  font-size: 0.59em;
  letter-spacing: 0.02em;
  color: #9b9080;
  white-space: nowrap;
}

/* The assembly box subgrids onto the capture/build/draft tracks, so the
   model bar (and the "builds" connector) can align to the Build track.
   Its lane label sits inside, as the zone header. */
.flow__box {
  grid-row: 1;
  grid-column: 3 / 6;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr;
  row-gap: 0.4em;
  align-items: center;
  padding: 0.8em 0.5em;
  background: #fbf8f1;
  border: 1px solid #d8d0c2;
  border-radius: var(--radius);
}

.flow__box .flow__step { grid-row: 2; }

.flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35em;
  min-width: 0;
}

/* Step chevrons, drawn on the shared track boundary */
.flow__step + .flow__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.45em;
  height: 0.45em;
  border-top: 0.11em solid #213a54;
  border-right: 0.11em solid #213a54;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* The BUILD step holds two bordered sub-boxes that otherwise reach its
   track edges, where the inter-step chevrons sit — inset them so the
   chevrons land in clear gaps (Capture › [Set steps → AI] › Draft)
   instead of colliding with the box borders. */
.flow__step--build {
  padding-inline: 1em;
}

.flow__num {
  font-family: var(--font-mono);
  font-size: 0.625em;
  letter-spacing: 0.05em;
  color: #aaa094;
  white-space: nowrap;
}

.flow__steptitle {
  font-family: var(--font-serif);
  font-size: 1em;
}

.flow__desc {
  font-size: 0.69em;
  color: #837a6e;
  max-width: 8.5em;
}

.flow__subrow {
  display: flex;
  align-items: center;
  gap: 0.35em;
}

.flow__sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  padding: 0.45em 0.55em;
  background: #fffdf9;
  border: 1px solid #d8d0c2;
  border-radius: 3px;
}

.flow__sub--ai {
  background: #f4ede3;
  border-color: #c3b9a8;
}

.flow__subtitle {
  font-family: var(--font-serif);
  font-size: 0.69em;
  white-space: nowrap;
}

.flow__subdesc {
  font-size: 0.53em;
  color: #837a6e;
}

.flow__motto {
  font-family: var(--font-mono);
  font-size: 0.53em;
  letter-spacing: 0.035em;
  color: #5b6b7d;
  white-space: nowrap;
}

/* Parallel descriptor on the human side — the zone panel's footer line */
.flow__motto--judgment {
  align-self: flex-start;
  white-space: normal;
  text-align: left;
}

.flow__node {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.4em;
  padding: 0.9em 1em;
  border-radius: var(--radius);
}

/* Human territory — a bounded judgment zone: light cool panel with the
   navy border and the navy Review block as its focal mass. The finished
   package sits OUTSIDE the zone as its output. (.flow__package is the
   homepage's name for the node; methodology.html still uses
   .flow__deliverable until its own copy pass.) */
.flow__human {
  grid-row: 1;
  grid-column: 7;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  padding: 0.8em;
  background: #eef1f6;
  border: 1px solid #213a54;
  border-radius: var(--radius);
}

.flow__review {
  flex: 1;
  background: #213a54;
}

.flow__review .flow__title { font-size: 1.06em; color: #f6f2eb; }

.flow__deliverable,
.flow__package {
  grid-row: 1;
  grid-column: 9;
  align-self: center;
  background: #fffdf9;
  border: 1px solid #d8d0c2;
}

.flow__deliverable .flow__desc,
.flow__package .flow__desc { max-width: none; }

/* Connectors — drawn in CSS so they can rotate when the flow stacks */
.flow__arrow {
  position: relative;
  align-self: center;
}

.flow__arrow--in { grid-row: 1; grid-column: 2; }
.flow__arrow--out { grid-row: 1; grid-column: 8; }

.flow__arrow--in,
.flow__arrow--out {
  width: 2.1em;
  height: 0.9em;
}

.flow__arrow--in::before,
.flow__arrow--out::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0.45em;
  height: 0.1em;
  transform: translateY(-50%);
  background: #213a54;
}

.flow__arrow--in::after,
.flow__arrow--out::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border: 0.3em solid transparent;
  border-right: 0;
  border-left: 0.48em solid #213a54;
}

.flow__arrow--sub {
  flex: none;
  width: 1.05em;
  height: 0.8em;
}

.flow__arrow--sub::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0.4em;
  height: 0.09em;
  transform: translateY(-50%);
  background: #213a54;
}

.flow__arrow--sub::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border: 0.26em solid transparent;
  border-right: 0;
  border-left: 0.42em solid #213a54;
}

/* The divide between automated assembly and human judgment */
.flow__divide {
  grid-row: 1;
  grid-column: 6;
  position: relative;
  align-self: center;
  width: 3.1em;
  height: 1em;
}

.flow__divide::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0.45em;
  height: 0.1em;
  transform: translateY(-50%);
  background: #213a54;
}

.flow__divide::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border: 0.3em solid transparent;
  border-right: 0;
  border-left: 0.48em solid #213a54;
}

.flow__diamond {
  position: absolute;
  top: 50%;
  left: 42%;
  width: 0.58em;
  height: 0.58em;
  margin: -0.29em 0 0 -0.29em;
  background: #213a54;
  transform: rotate(45deg);
}

/* Down-links into the model bar */
.flow__link {
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 0.45em;
}

/* "builds" originates at the Build step: centered beneath it (Build is
   the middle step of the box) with the connector contacting the box
   edge directly below it, so Draft doesn't read as a model-builder. */
.flow__link--builds { grid-column: 4; justify-self: center; margin-top: -0.55em; }
.flow__link--builds .flow__larrow { height: 2.65em; }
.flow__link--traces { grid-column: 9; justify-self: center; }

.flow__llabel {
  font-family: var(--font-mono);
  font-size: 0.53em;
  color: #5b6b7d;
}

.flow__link--traces .flow__llabel {
  max-width: 9em;
  text-align: right;
}

.flow__larrow {
  position: relative;
  flex: none;
  width: 0.9em;
  height: 2.1em;
}

.flow__larrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0.42em;
  width: 0.09em;
  transform: translateX(-50%);
  background: #213a54;
}

.flow__larrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border: 0.28em solid transparent;
  border-bottom: 0;
  border-top: 0.45em solid #213a54;
}

/* The model bar — single source of truth */
/* The bar starts at the Build track — Capture precedes the model */
.flow__model {
  grid-row: 3;
  grid-column: 4 / 10;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3em 0.55em;
  padding: 0.6em 1.7em;
  background: #e9edf2;
  border: 1px solid #cdd6e0;
  border-radius: 5px;
}

/* "THE MODEL" — the same short mono/caps label on the desktop bar and
   the stacked rail; the source-of-truth line lives in the caption. */
.flow__modeltitle {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.72em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #213a54;
}

/* Figure caption — horizontal, beneath the figure in both layouts */
.flow__caption {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.53rem;
  letter-spacing: 0.035em;
  color: #5b6b7d;
  text-align: center;
}

/* Stacked flow on narrow screens (screen-only: print keeps the
   horizontal layout). DOM order is the stack order. */
@media screen and (max-width: 60em) {
  .doc__figure {
    width: 100%;
  }

  .doc__figure--center {
    margin-inline: 0;
  }

  /* Stacked: the process flows down the first column while the model
     runs as a skinny vertical bar down the right side, spanning the
     assembly through the deliverable — the desktop arrangement rotated
     90°. The middle column holds the two connectors, which auto-place
     beside their sources (builds beside the assembly box, traces-back
     beside the deliverable) and point right into the bar. */
  .flow {
    font-size: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content 2.2em;
    column-gap: 0;
    row-gap: 0.7em;
    align-items: center;
  }

  .flow > * {
    grid-area: auto / 1 / auto / auto;
    justify-self: center;
  }

  /* The box spans four rows (label / capture / build / draft) via
     subgrid, so the rail can start at the Build row — Capture and the
     zone header sit above it. */
  .flow__box {
    grid-row: span 4;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    justify-self: stretch;
    padding: 1.1em 1em;
  }

  .flow__box .flow__step {
    grid-row: auto;
    padding-block: 0.3em;
  }

  /* The human zone stacks as a single panel; the deliverable follows
     below it as its output. */
  .flow__human {
    justify-self: stretch;
    padding: 1em;
  }

  .flow__step + .flow__step::before {
    left: 50%;
    top: -0.35em;
    transform: translate(-50%, -50%) rotate(135deg);
  }

  .flow__node {
    justify-self: stretch;
    padding: 1em;
  }

  .flow__subrow {
    flex-direction: column;
    gap: 0.4em;
  }

  .flow__motto {
    white-space: normal;
    text-align: center;
  }

  .flow__arrow--sub {
    width: 0.8em;
    height: 1.05em;
  }

  .flow__arrow--sub::before {
    left: 50%;
    top: 0;
    bottom: 0.4em;
    right: auto;
    width: 0.09em;
    height: auto;
    transform: translateX(-50%);
  }

  .flow__arrow--sub::after {
    left: 50%;
    top: auto;
    right: auto;
    bottom: 0;
    transform: translateX(-50%);
    border: 0.26em solid transparent;
    border-bottom: 0;
    border-top: 0.42em solid #213a54;
  }

  /* Connectors: full-gutter tie-lines — the line runs from the box/card
     edge into the rail, with its label above. Both connectors share the
     same anatomy. */
  .flow__link {
    grid-column: 2;
    flex-direction: column;
    gap: 0.3em;
    margin-top: 0;
    justify-self: stretch;
  }

  .flow__link--builds {
    flex-direction: column-reverse;
  }

  .flow__link--builds {
    grid-row: 5;
  }

  .flow__link--traces {
    grid-row: 10;
  }

  .flow__link--builds .flow__larrow {
    height: 0.9em;
  }

  .flow__llabel,
  .flow__link--traces .flow__llabel {
    text-align: center;
  }

  .flow__link--traces .flow__llabel {
    max-width: 8em;
  }

  .flow__larrow {
    width: 100%;
    height: 0.9em;
  }

  .flow__larrow::before {
    left: 0;
    right: 0.45em;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 0.09em;
    transform: translateY(-50%);
  }

  .flow__larrow::after {
    left: auto;
    right: 0;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border: 0.28em solid transparent;
    border-right: 0;
    border-left: 0.45em solid #213a54;
  }

  /* The model: a skinny vertical rail spanning the rows from the
     assembly box through the finished deliverable. Sideways short label
     reading bottom-to-top (vertical-rl flipped 180° — Safari has no
     sideways-lr); the full source-of-truth line moves to the caption. */
  .flow__model {
    grid-column: 3;
    grid-row: 5 / 11;
    justify-self: stretch;
    align-self: stretch;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.55em;
    padding: 1.2em 0.5em;
  }

  .flow__arrow--in,
  .flow__arrow--out {
    width: 0.9em;
    height: 1.9em;
  }

  .flow__arrow--in::before,
  .flow__arrow--out::before {
    top: 0;
    bottom: 0.42em;
    left: 50%;
    right: auto;
    width: 0.1em;
    height: auto;
    transform: translateX(-50%);
  }

  .flow__arrow--in::after,
  .flow__arrow--out::after {
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border: 0.3em solid transparent;
    border-bottom: 0;
    border-top: 0.48em solid #213a54;
  }

  .flow__divide {
    width: 1em;
    height: 2.6em;
    margin-block: 0.25em;
  }

  .flow__divide::before {
    top: 0;
    bottom: 0.45em;
    left: 50%;
    right: auto;
    width: 0.1em;
    height: auto;
    transform: translateX(-50%);
  }

  .flow__divide::after {
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border: 0.3em solid transparent;
    border-bottom: 0;
    border-top: 0.48em solid #213a54;
  }

  .flow__diamond {
    left: 50%;
    top: 42%;
  }
}

/* --- Print (clean "Save as PDF" for the methodology page) ---------------- */

@media print {
  body {
    border-top: 0;
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.5;
  }

  .site-header,
  .site-footer,
  .skip-link {
    display: none !important;
  }

  .container {
    max-width: none;
    padding-inline: 0;
  }

  .measure > * {
    max-width: none;
  }

  .doc > .container {
    padding: 0;
  }

  .doc__title::before,
  .doc h2::before {
    display: none;
  }

  .doc__title {
    font-size: 22pt;
  }

  .doc h2 {
    font-size: 14pt;
    margin-top: 18pt;
    break-after: avoid;
  }

  .doc p,
  .doc__list li {
    orphans: 3;
    widows: 3;
  }

  .doc__list li::marker {
    color: #000;
  }

  .doc__note {
    color: #333;
  }

  .doc__figure {
    width: 100%;
    margin: 8pt 0 0;
    break-inside: avoid;
  }

  /* Compact horizontal flow so the diagram fits the print page width.
     The stacked layout is screen-only, so the grid layout holds here. */
  .flow {
    font-size: 0.66rem;
  }

  .doc__download {
    display: none;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  @page {
    margin: 2cm;
  }
}