/* ==========================================================================
   Jointure — brand directory stylesheet
   System: "assay ledger" — filled-band J badge, graded confidence.
   One type family (IBM Plex) across three optical styles stands in for the
   three things this product does: state a claim (serif), work quietly in
   the background (sans), grade it (mono). See internal/brand-directory.html for the
   full rationale and swatches.
   ========================================================================== */

/* Self-hosted (OFL) — only the weights this stylesheet actually sets.
   Files + licence text: assets/fonts/. No Google Fonts request. */
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-serif-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-serif-latin-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Audiowide";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/audiowide-latin-400-normal.woff2") format("woff2");
}

:root {
  /* -- Jointure palette: cotton/stone, ledger ink, brass, verdigris.
     Deliberately not the warm-cream + serif + terracotta default. -- */
  --canvas: #e7e1d3;       /* base ground — unbleached cotton, not cream */
  --canvas-alt: #ddd5c2;   /* panel / card ground, one step down */
  --canvas-line: #c7bda5;  /* hairline rules on light ground */
  --ink: #1e1b17;          /* primary text — warm near-black */
  --ink-soft: #4a443a;     /* secondary text */
  --ink-plate: #211d18;    /* dark band background (hero / closing) */
  --ink-plate-line: #3a352c;
  --on-plate: #e9e3d5;     /* text on dark band */
  --on-plate-soft: #b7ae9b;

  --ledger: #253647;       /* stamp-ink blue — primary accent, safe for text */
  --ledger-strong: #1b2836;
  --verdigris: #3f5b4e;    /* patina green — safe for text, "verified" */
  --brass: #a9793e;        /* struck-metal accent — decorative/large only */
  --brass-soft: #cf9c55;   /* brass on dark grounds */
  --grade-reported: #74582e; /* Reported grade; 5.07:1 on Canvas, 4.52:1 on Canvas Alt */
  --grade-flagged: #a13a2b;  /* Flagged grade and error text; 5.10:1 on Canvas */

  --radius: 3px;
  --measure: 62ch;

  --font-serif: "IBM Plex Serif", "Iowan Old Style", Georgia, serif;
  --font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  /* One scale, used everywhere — a section's rhythm is legible because
     every gap in it comes from this ladder, not a one-off value. Tightened
     against the old scale (space-4 topped out at 6rem of dead air per
     section boundary); the ladder still grows with viewport, but tops out
     sooner so height stops being the thing the page is made of. */
  --space-1: clamp(0.5rem, 0.46rem + 0.2vw, 0.7rem);
  --space-2: clamp(0.95rem, 0.86rem + 0.45vw, 1.35rem);
  --space-3: clamp(1.5rem, 1.2rem + 1.2vw, 2.4rem);
  --space-4: clamp(2.25rem, 1.7rem + 2.2vw, 3.75rem);
  --space-5: clamp(3rem, 2.1rem + 3.6vw, 5.5rem);

  /* Content ceiling: wide enough that 1440–1920 stops feeling like a
     letterboxed phone layout, without ever letting a line of text run
     past a comfortable measure — columns inside still cap themselves. */
  --wrap-max: 1280px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* -- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
b, strong { font-weight: 600; }
h1, h2, h3, p, ul, ol, table { margin: 0; }
ul, ol { padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

/* -- skip link -- */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--ink-plate);
  color: var(--on-plate);
  padding: 0.75em 1.25em;
  z-index: 100;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

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

/* -- type -- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 1.4em;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 1.7rem + 2vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 18ch;
}
h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 1.25rem + 0.8vw, 1.9rem);
  line-height: 1.25;
}
h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.35;
}
p.lede {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* -- layout -- */
.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 1.9em; }
.prose h2 + * { margin-top: 0.6em; }
main section + section { border-top: 1px solid var(--canvas-line); }
section.plate + section.plate { border-top-color: var(--ink-plate-line); }
.section-pad { padding-block: var(--space-5); }

/* -- entry layout --
   The ledger's own device: a reference column and an entry column, the
   same relationship as a date against its line item. Used wherever a
   section is one eyebrow standing over one block of prose — the pattern
   that was collapsing into a narrow, centred column with the rest of the
   viewport left empty. Stacks on narrow screens (reference sits above its
   entry, the way it would in a hand-kept ledger read top to bottom), and
   opens into two columns once there's width to spare. */
.entry {
  display: grid;
  gap: var(--space-2) var(--space-3);
}
.entry-head {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.entry-head h2 { max-width: 16ch; }
.entry-body { max-width: var(--measure); }
.entry-body > * + * { margin-top: 1.15em; }
@media (min-width: 680px) {
  .entry {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    align-items: start;
  }
  .entry-head {
    position: sticky;
    top: calc(var(--header-h, 4.5rem) + var(--space-3));
    padding-right: var(--space-2);
    border-right: 1px solid var(--canvas-line);
  }
  section.plate .entry-head { border-right-color: var(--ink-plate-line); }
}
@media (min-width: 900px) {
  .entry { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  .entry { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
}

/* -- split layout: reading column + sticky aside --
   The entry pattern's sibling for pages where the supporting material
   (a call-out, a short "next" note) should stand beside the main column
   rather than under a reference label. Wide column first, aside sticks
   on wide screens; stacks aside-under-main on narrow ones. */
.split {
  display: grid;
  gap: var(--space-3);
}
.split-main { max-width: var(--measure); }
.split-main > * + * { margin-top: 1.15em; }
.split-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.split-aside > .callout { margin-top: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem); align-items: start; }
  .split-aside {
    position: sticky;
    top: calc(var(--header-h, 4.5rem) + var(--space-3));
  }
}

/* -- privacy contents column --
   Reuses .entry (sticky reference column + wide body); the reference
   column here is a real nav of anchors instead of an eyebrow label. */
.privacy-toc ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  margin: 0.4em 0 0;
  padding: 0;
}
.privacy-toc a {
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--ink-soft);
  transition: color 0.15s var(--ease);
}
.privacy-toc a:hover,
.privacy-toc a:focus-visible { color: var(--ink); }

/* -- header -- */
.site-header {
  border-bottom: 1px solid var(--canvas-line);
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-2);
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.65em;
  text-decoration: none;
  color: var(--ink);
  transition: opacity 0.15s var(--ease);
}
.brand-lockup:hover { opacity: 0.72; }
.brand-mark { width: 34px; height: 34px; flex: none; color: var(--ledger); }
.brand-word {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
.endorsement {
  /* Deliberately in Fractional Direct's own system, not Jointure's — a
     visiting mark, not a repaint. See internal/brand-directory.html. */
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: "Audiowide", var(--font-sans);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f5f5f0;
  background: #1a1a2e;
  border-radius: 999px;
  padding: 0.42em 0.85em 0.38em;
  white-space: nowrap;
}
.endorsement .dot { width: 5px; height: 5px; border-radius: 50%; background: #c0392b; flex: none; }
.endorsement .from { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; opacity: 0.72; font-size: 0.94em; }

nav.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
nav.primary-nav ul { list-style: none; display: flex; gap: var(--space-2); }
nav.primary-nav a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.4em 0.1em;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
nav.primary-nav a:hover,
nav.primary-nav a[aria-current="page"] { border-bottom-color: var(--brass); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 0.5em;
}
.nav-toggle span {
  width: 20px;
  height: 2px;
  background: var(--ink);
  display: block;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile nav opens on a grid-rows trick rather than display:none/flex, so
   the panel eases open and shut instead of snapping — height is never a
   fixed guess, and it collapses to zero rows with no overflow to clip. */
@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  nav.primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--canvas);
    border-bottom: 1px solid var(--canvas-line);
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    opacity: 0;
    transition: grid-template-rows 0.22s var(--ease), opacity 0.18s var(--ease), visibility 0.22s;
  }
  nav.primary-nav > ul { min-height: 0; overflow: hidden; }
  nav.primary-nav.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
  }
  nav.primary-nav ul {
    flex-direction: column;
    gap: 0;
    padding: var(--space-1) clamp(1.25rem, 4vw, 3rem) var(--space-2);
  }
  nav.primary-nav a { display: block; padding: 0.75em 0; border-bottom: 1px solid var(--canvas-line); }
  .endorsement .from { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  nav.primary-nav { transition: none; }
}

/* -- plate (dark band) -- */
section.plate {
  background: var(--ink-plate);
  color: var(--on-plate);
}
section.plate .eyebrow { color: var(--brass-soft); }
section.plate .lede { color: var(--on-plate-soft); }
section.plate .brand-mark-large { color: var(--brass-soft); }

.hero {
  padding-block: var(--space-4);
  display: grid;
  gap: var(--space-3);
  position: relative;
}
.hero .brand-mark-large { width: 52px; height: 52px; margin-bottom: var(--space-1); }

/* The hero's Join (Brooke's brand device, Daniel's ruling of 10 Oct 2026):
   an unlabelled figure in the unused right half of the plate on wide
   viewports, hidden below 900px as the J seal was. Decorative only, so it
   is an img with empty alt; it is complete at rest, and the settle (if
   any) lives inside the SVG under prefers-reduced-motion: no-preference. */
.hero-join { display: none; }
@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    align-items: center;
    gap: var(--space-4);
  }
  .hero-join {
    display: block;
    width: 100%;
    height: auto;
    justify-self: end;
  }
}
/* The wide strip (Calls, 404): a single short figure under the hero copy,
   at every width. It never sits behind text. */
.hero-join--wide {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
}
@media (min-width: 900px) {
  .hero:has(.hero-join--wide) { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); }
}
/* Calls: the Join's strands run into "Sign in to Calls" (Daniel, 16 Oct
   2026). The strip's node sits 86% of the way across its SVG, so at 63% of
   the row the empty tail is 9% of the row, and the button's -7% margin
   brings it up to the node. The column keeps its 28rem, so the hero copy
   wraps as before. Below 600px the button drops under the strip. */
.calls-join { display: flex; align-items: center; width: 100%; }
.calls-join .hero-join--wide { width: 63%; max-width: none; flex: none; }
.calls-join .btn { flex: none; margin-left: -7%; position: relative; z-index: 1; }
@media (max-width: 600px) {
  .calls-join { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .calls-join .hero-join--wide { width: 100%; }
  .calls-join .btn { margin-left: 0; }
}

/* Spacing utilities — replace one-off inline margin-top on section content
   (callouts, step lists, grade legends following an intro paragraph). */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }

/* -- who-it's-for / Zoë callout -- */
.callout {
  background: var(--canvas-alt);
  border-left: 2px solid var(--ledger);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-2);
  max-width: var(--measure);
  transition: border-color 0.18s var(--ease);
}
.callout p { margin: 0; color: var(--ink); }
.callout a { color: var(--ledger); font-weight: 500; }

/* -- confidence grade badges --
   Fullness is the grade, not just the hue: a single-glance dot needs a
   channel that survives greyscale and colour-vision deficiency, and hue
   alone doesn't discriminate at this size. Verified is solid, assumed is
   an empty ring — the shape reads before the colour does. Colour is kept
   as reinforcement, not the only signal. */
.grade-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-top: var(--space-1) !important;
}
.grade {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.grade::before {
  content: "";
  --fill: 100;
  width: 8px;
  height: 8px;
  flex: none;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.4px solid currentColor;
  background: conic-gradient(currentColor calc(var(--fill) * 1%), transparent 0);
}
.grade--verified { color: var(--verdigris); }
.grade--documented { color: var(--ledger); --fill: 75; }
.grade--documented::before { --fill: 75; }
.grade--reported { color: var(--grade-reported); }
.grade--reported::before { --fill: 50; }
.grade--assumed { color: var(--ink-soft); border-style: dashed; }
.grade--assumed::before { --fill: 0; }

/* Warning is a flag riding on top of a grade, not a rung in the ladder —
   a different shape entirely so it can never be mistaken for a fifth grade. */
.grade--warning { color: var(--grade-flagged); border-style: solid; }
.grade--warning::before {
  border: none;
  border-radius: 0;
  background: none;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid currentColor;
}

/* -- CTA (mailto — never a form) -- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-plate);
  background: var(--ledger);
  border: 1px solid var(--brass-soft);
  border-radius: var(--radius);
  padding: 0.85em 1.4em;
  transition: background-color 0.18s var(--ease), transform 0.18s var(--ease), gap 0.18s var(--ease);
}
.btn:hover { background: var(--ledger-strong); gap: 0.85em; }
.btn:active { transform: translateY(1px); }
.btn::after { content: "→"; font-family: var(--font-sans); transition: transform 0.18s var(--ease); }
.btn:hover::after { transform: translateX(2px); }
.cta-band { padding-block: var(--space-4); }
.cta-band p.lede { color: var(--on-plate-soft); margin-bottom: var(--space-2) !important; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after { transition: none; }
}

/* -- hero verse (Home) --
   Daniel's own spoken cadence, one beat per line rather than a wrapped
   sentence. Size and weight step down through the shrug ("Whatever.") then
   land again on the reassurance ("Safely.") — rhythm carried by scale, not
   by extra ornament. */
.hero-verse {
  display: grid;
  gap: 0.22em;
  margin-top: var(--space-2);
}
.hero-verse .beat {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.hero-verse .beat-1 {
  font-size: clamp(2.3rem, 1.8rem + 2.4vw, 3.8rem);
}
.hero-verse .beat-2,
.hero-verse .beat-3 {
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.3rem);
  color: var(--on-plate-soft);
  font-weight: 500;
}
.hero-verse .beat-4 {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  font-style: italic;
  font-weight: 500;
  color: var(--on-plate-soft);
  opacity: 0.85;
  margin-top: 0.15em;
}
.hero-verse .beat-5 {
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem);
  color: var(--brass-soft);
  margin-top: 0.1em;
}
.hero .lede { margin-top: var(--space-2) !important; }
/* The lede's last line, in the brass of "Safely." (Daniel, 16 Oct 2026). */
.hero .lede-tagline { color: var(--brass-soft); }

/* -- confidence grading device, in prose context (Home §3) -- */
.grade-legend--section {
  margin-top: var(--space-2) !important;
}

/* -- calls tease (Home) — one line with a link, deliberately not a
   section: no eyebrow, no border-top, minimal vertical room. -- */
.calls-tease {
  padding-block: var(--space-3);
}
.calls-tease p {
  max-width: var(--measure);
  color: var(--ink-soft);
}
.calls-tease a {
  color: var(--ledger);
  font-weight: 500;
  white-space: nowrap;
}

/* -- CTA microcopy -- */
.cta-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--on-plate-soft);
  margin-top: var(--space-1) !important;
}

/* -- footer -- */
.site-footer {
  border-top: 1px solid var(--canvas-line);
  padding-block: var(--space-3);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.site-footer nav ul { list-style: none; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.site-footer nav a { text-decoration: none; font-size: 0.9rem; color: var(--ink-soft); }
.site-footer nav a:hover { color: var(--ink); }
.footer-mark { display: flex; align-items: center; gap: 0.6em; }
.footer-mark .brand-mark { width: 22px; height: 22px; color: var(--ink-soft); }
.footer-mark span { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.03em; }

/* -- entrance motion --
   Content is always fully visible at rest — a threshold that never fires
   (as happened on the assessment form) must never be able to hide
   anything. What's left is a short, subtle settle: a few px of drift into
   place, opacity untouched throughout. Reduced motion drops it entirely. */
[data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    transform: translateY(8px);
    transition: transform 0.5s var(--ease);
  }
  [data-reveal].is-visible { transform: none; }
}

/* -- hero load-in --
   The one orchestrated moment: the hero's own beats settle into place on
   first paint, staggered slightly, never gated on scroll or JS — pure CSS,
   so it always plays and never leaves anything invisible. */
@media (prefers-reduced-motion: no-preference) {
  .hero-verse .beat {
    animation: beat-in 1.2s var(--ease) both;
  }
  .hero-verse .beat:nth-child(1) { animation-delay: 0.0s; }
  .hero-verse .beat:nth-child(2) { animation-delay: 0.7s; }
  .hero-verse .beat:nth-child(3) { animation-delay: 1.4s; }
  .hero-verse .beat:nth-child(4) { animation-delay: 2.1s; }
  .hero-verse .beat:nth-child(5) { animation-delay: 2.8s; }
  .hero-verse .beat:nth-child(6) { animation-delay: 3.5s; }
  .hero-verse .beat:nth-child(7) { animation-delay: 4.2s; }
  .hero-verse .beat:nth-child(8) { animation-delay: 4.9s; }
  @keyframes beat-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
}

/* -- internal reference page (brand-directory) -- */
.internal-banner {
  background: repeating-linear-gradient(135deg, var(--brass) 0 10px, #96702f 10px 20px);
  color: #1a1408;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 0.6em 0;
  text-align: center;
}
.internal-banner strong { text-transform: uppercase; }

table.brand-table { width: 100%; border-collapse: collapse; margin-top: var(--space-2); }
table.brand-table th, table.brand-table td {
  text-align: left;
  padding: 0.9em 1em;
  border: 1px solid var(--canvas-line);
  vertical-align: top;
  font-size: 0.95rem;
}
table.brand-table th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--canvas-alt);
  width: 14ch;
}

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.swatch { border: 1px solid var(--canvas-line); }
.swatch-fill { height: 4.5rem; }
.swatch-label { padding: 0.6em 0.75em; font-family: var(--font-mono); font-size: 0.72rem; background: var(--canvas); }
.swatch-label strong { display: block; font-family: var(--font-sans); font-size: 0.85rem; margin-bottom: 0.15em; }

.type-specimen { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.type-specimen .row { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.type-specimen .row .label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); width: 9rem; flex: none; }

/* -- org chart (About) --
   Reads top to bottom as reporting structure: Daniel solo, Watson solo,
   the eight directors in a row, each director's specialists gathered in
   a dashed enclosure directly beneath their own card. A thin rule marks
   each step down the chain; a dashed enclosure marks a group rather than
   a hierarchy step, so the two kinds of line never look alike. */
.org-chart { margin-top: var(--space-3); }
.org-tier--solo { display: flex; justify-content: center; }
.org-connector {
  width: 1px;
  height: var(--space-3);
  background: var(--canvas-line);
  margin: 0 auto;
}
.org-directors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-3) var(--space-2);
  margin-top: var(--space-3);
}
.org-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 220px;
  max-width: 260px;
}
.org-cluster-specialists {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--canvas-line);
}

.org-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 220px;
}
.org-card--specialist { max-width: 168px; }

.org-pill {
  position: relative;
  z-index: 2;
  background: var(--ledger);
  color: var(--on-plate);
  border-radius: 999px;
  padding: 0.55em 1.15em;
  font-family: var(--font-sans);
  line-height: 1.3;
}
.org-pill .org-name { display: block; font-weight: 600; font-size: 0.95rem; }
.org-pill .org-role {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brass-soft);
  margin-top: 0.2em;
}
.org-card--lead .org-pill { background: var(--ink-plate); }
.org-card--specialist .org-pill { padding: 0.45em 0.9em; }
.org-card--specialist .org-pill .org-name { font-size: 0.85rem; }

.org-portrait {
  position: relative;
  z-index: 1;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-top: -1.35rem;
  overflow: hidden;
  background: var(--canvas-alt);
  border: 3px solid var(--canvas);
  box-shadow: 0 0 0 1px var(--canvas-line);
}
.org-card--lead .org-portrait { width: 132px; height: 132px; }
.org-card--specialist .org-portrait { width: 80px; height: 80px; margin-top: -1.1rem; }
.org-portrait img { width: 100%; height: 100%; object-fit: cover; }
.org-portrait--mono,
.org-portrait--mark {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ledger);
}
.org-portrait--mono span {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--on-plate);
}
.org-portrait--mark { background: var(--canvas-alt); }
.org-portrait--mark svg { width: 52%; height: 52%; color: var(--ledger); }

.ai-tag {
  position: absolute;
  z-index: 3;
  bottom: -1px;
  right: -1px;
  background: var(--brass);
  color: var(--ink-plate);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.15em 0.42em;
  border-radius: 999px;
  border: 2px solid var(--canvas);
}

.org-blurb {
  margin-top: 0.65em;
  width: 100%;
  background: var(--canvas-alt);
  border: 1px solid var(--canvas-line);
  border-radius: var(--radius);
  padding: 0.8em 0.95em;
}
.org-blurb p { margin: 0; color: var(--ink-soft); font-size: 0.87rem; line-height: 1.5; }
.org-card--specialist .org-blurb p { font-size: 0.82rem; }
.org-card--lead .org-blurb p { font-size: 0.92rem; color: var(--ink); }

.org-dotted {
  display: inline-flex;
  margin-top: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  color: var(--ledger);
  border: 1px dashed var(--brass);
  border-radius: 999px;
  padding: 0.25em 0.65em;
}

@media (max-width: 720px) {
  .org-directors { flex-direction: column; align-items: center; }
  .org-cluster { max-width: 320px; }
  .org-card, .org-card--specialist { max-width: 260px; }
}

/* About — wider chart and bigger portraits (Daniel, 24 Sept) */
.wrap--wide { max-width: 1680px; }
.org-portrait { width: 136px; height: 136px; margin-top: -1.5rem; }
.org-card--lead .org-portrait { width: 176px; height: 176px; }
.org-card--specialist .org-portrait { width: 108px; height: 108px; margin-top: -1.25rem; }
.org-card { max-width: 260px; }
.org-card--specialist { max-width: 220px; }
/* From tablet up the chart is one grid of rows (Daniel, 24 Sept: "these
   portraits are not lined up well"). Each director's column spans three rows:
   the director, then up to two specialists. The rows are shared across
   columns through subgrid, so every director sits on one line, every first
   specialist on the next, and every card in a row stretches to that row's
   height. Portraits and blurb boxes then line up across the page whatever
   the blurb lengths. */
@media (min-width: 900px) {
  .org-directors {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-2);
    row-gap: var(--space-2);
    align-items: stretch;
  }
  .org-cluster {
    max-width: none;
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    justify-items: center;
    gap: inherit;
  }
  .org-cluster-specialists { display: contents; }
  .org-cluster > .org-card,
  .org-cluster-specialists > .org-card { height: 100%; }
  .org-cluster-specialists > .org-card:first-child {
    border-top: 1px dashed var(--canvas-line);
    padding-top: var(--space-2);
    width: 100%;
    max-width: none;
  }
  .org-cluster-specialists > .org-card:first-child > * { max-width: 220px; }
  .org-card .org-blurb { flex: 1 1 auto; }
  /* Director pills share one height, so a role that wraps to three lines
     doesn't push that director's portrait below the rest of the row. */
  .org-cluster > .org-card > .org-pill {
    min-height: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
@media (min-width: 1680px) {
  .org-directors { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* -- assessment form (Assessment page) --
   Native fieldsets and radios throughout: no custom widgets, so the page
   works the same with a keyboard, a screen reader, or a stylus. */
/* Widens the form column beyond the reading measure, once there's a
   paired row or a multi-column radio group to fill it. The measure still
   governs prose, call-outs and the notice block — only the questions
   themselves get the extra width. */
.form-wide { max-width: 54rem; }
@media (min-width: 1100px) { .form-wide { max-width: 62rem; } }
.form-wide .form-question { max-width: none; }

.form-question {
  border: 0;
  padding: 0;
  margin: 0;
  max-width: var(--measure);
}
.form-question + .form-question {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--canvas-line);
}
.form-question legend {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.35;
  padding: 0;
}
.form-hint {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 0.5em;
}
/* Rows are spaced by their own margin, never by a rule that lands on a
   child — a sibling-margin selector can't tell a stacked field from one
   sitting beside another in a grid cell, which was throwing Name/Business
   name and Your role/Work email out of line with each other. Every field
   and radio-group column here carries zero margin of its own; `gap` on
   the row is the only thing that ever spaces them, so a pair in the same
   row always shares one top edge. */
.form-row { margin-top: var(--space-2); }
.form-row--split {
  display: grid;
  align-items: start;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.form-row--split > * { margin-top: 0; }
.field { display: flex; flex-direction: column; gap: 0.4em; margin: 0; }
.field-label.is-required::after { content: " *"; color: var(--ledger); font-weight: 600; }
.required-note { font-size: 0.8rem; color: var(--ink-soft); margin: 0.2em 0 0; }
.required-note span { color: var(--ledger); font-weight: 600; }
.field-label {
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.3;
}
.field-optional {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field input[type="tel"],
.field textarea {
  font: inherit;
  font-size: 0.98rem;
  padding: 0.65em 0.8em;
  border: 1px solid var(--canvas-line);
  border-radius: var(--radius);
  background: var(--canvas);
  color: var(--ink);
}
.field textarea { min-height: 4.5rem; resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--grade-flagged); }
.radio-list { list-style: none; display: grid; gap: 0.2em; margin: 0.6em 0 0; padding: 0; }
/* Short option lists flow into two columns once the form has the width
   to spare (only applied where reading order left-to-right, top-to-bottom
   still makes sense — long or heavily-qualified options stay single-file). */
@media (min-width: 640px) {
  .radio-list--cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-2);
  }
}
.radio-list li { display: block; }
.radio-list label {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: 0.95rem;
}
.radio-list input[type="radio"] {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.05em 0 0;
  accent-color: var(--ledger);
  cursor: pointer;
}
/* Each option is a full-width target with a quiet hover, not just the dot. */
.radio-list label {
  padding: 0.55em 0.75em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.radio-list label:hover { background: var(--canvas-alt); border-color: var(--canvas-line); }
.radio-list label:has(input:checked) { background: var(--canvas-alt); border-color: var(--ledger); }
.radio-list input[type="radio"]:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.field-error-text {
  display: block;
  color: var(--grade-flagged);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  min-height: 1em;
}
.honeypot-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.form-notice {
  background: var(--canvas-alt);
  border-left: 2px solid var(--ledger);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-2);
  max-width: var(--measure);
}
.form-notice h2 { font-size: 1.1rem; }
.form-notice p { color: var(--ink); font-size: 0.93rem; }
.form-notice p + p { margin-top: 0.8em; }
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin-top: var(--space-2);
  font-size: 0.93rem;
}
.form-consent input { margin-top: 0.3em; flex: none; }
.form-actions {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.form-status { font-family: var(--font-mono); font-size: 0.85rem; min-height: 1.2em; }
.form-status--error { color: var(--grade-flagged); }
.form-status--sending { color: var(--ink-soft); }
.zoe-callout { margin-top: var(--space-3); }

/* A heading short enough to hold one line drops the 18ch cap (About, Daniel 24 Sept). */
.h1--one-line { max-width: none; }
@media (min-width: 720px) { .h1--one-line { white-space: nowrap; } }

/* -- eyebrow trial (home page only, 10 Oct 2026) --
   The short leading line becomes a dotted leader ending in a small ring:
   the Join reduced to punctuation. CSS only; revert by removing this block. */
.home .eyebrow::before {
  box-sizing: content-box;
  width: 2.6em;
  padding-right: 0.7em;
  height: 0.7em;
  opacity: 0.8;
  background:
    radial-gradient(circle at 50% 50%, transparent 0.17em, currentColor 0.2em, currentColor 0.3em, transparent 0.33em) right center / 0.7em 0.7em no-repeat border-box,
    radial-gradient(circle, currentColor 0.07em, transparent 0.1em) left center / 0.5em 0.7em repeat-x content-box;
}

/* About: Zoë reports to Watson and sits beside him, not beneath him, so the
   chain from Watson to the directors stays unbroken and Watson stays on the
   chart's centre line (Daniel, 16 Oct 2026). */
.org-tier--with-aide { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; }
.org-tier--with-aide > * { grid-row: 1; }
.org-tier--with-aide > .org-card--lead { grid-column: 2; }
.org-aide {
  grid-column: 3;
  justify-self: start;
  margin-left: var(--space-3);
  padding-left: var(--space-3);
  border-left: 1px dashed var(--canvas-line);
}
@media (max-width: 720px) {
  .org-tier--with-aide { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
  .org-aide { margin-left: 0; padding-left: 0; border-left: 0; padding-top: var(--space-2); border-top: 1px dashed var(--canvas-line); }
  .org-tier--with-aide > * { grid-row: auto; }
}
.org-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 0.75rem;
  border-radius: 50%;
  background: var(--ledger);
  color: var(--canvas);
}
.org-call:hover { background: var(--ledger-strong); }
.org-call:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.org-call svg { width: 20px; height: 20px; }
/* The humans to come, on Watson's left (Daniel, 16 Oct 2026): an unfilled,
   dashed card, so it reads as a reserved seat rather than a member. */
.org-humans {
  grid-column: 1;
  justify-self: end;
  margin-right: var(--space-3);
  padding-right: var(--space-3);
  border-right: 1px dashed var(--canvas-line);
}
.org-card--placeholder .org-pill { background: transparent; color: var(--ledger); border: 1px dashed var(--ledger); }
.org-card--placeholder .org-pill .org-role { color: var(--ink-soft); }
.org-card--placeholder .org-portrait { border-style: dashed; border-color: var(--canvas-line); box-shadow: none; }
@media (max-width: 720px) {
  .org-humans { margin-right: 0; padding-right: 0; border-right: 0; padding-top: var(--space-2); border-top: 1px dashed var(--canvas-line); }
}
/* Footer: Jointure's LinkedIn and YouTube on every page (Daniel, 16 Oct
   2026), round deep-blue buttons like Zoë's call button on About. The marks
   are drawn locally, so nothing loads from either site. Every selector
   starts with .site-footer so the Drover build carries it into estate.css. */
.site-footer .footer-social { list-style: none; display: flex; gap: 0.5rem; margin: 0; padding: 0; }
.site-footer .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ledger);
  color: var(--canvas);
}
.site-footer .footer-social a:hover { background: var(--ledger-strong); }
.site-footer .footer-social a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.site-footer .footer-social svg { width: 18px; height: 18px; }