/* ------------------------------------------------------------------
   Evan Lemoine — portfolio
   Dense, asymmetric, high contrast. 1px borders, square corners.
   No gradients, no glow, no floating cards.
   ------------------------------------------------------------------ */

:root {
  --bg: #ffffff;
  --bg-inset: #f4f5f7;
  --text: #14171c;        /* body */
  --text-strong: #05070a; /* headings */
  --muted: #4d5560;       /* >= 7:1 on --bg */
  --faint: #616975;       /* >= 4.5:1 on --bg and --bg-inset */
  --border: #d9dde3;
  --border-strong: #14171c;
  --accent: #1140d4;
  --accent-quiet: #eaeefb;
  --selection: #d7e0ff;

  --font-sans: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  --rail: 21rem;
  --gap: 4.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08090b;
    --bg-inset: #101216;
    --text: #d6dae0;
    --text-strong: #ffffff;
    --muted: #a2aab5;       /* >= 7:1 on --bg */
    --faint: #7e8794;       /* >= 4.5:1 on --bg */
    --border: #23272e;
    --border-strong: #d6dae0;
    --accent: #8fb0ff;
    --accent-quiet: #131926;
    --selection: #1e2a45;
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1;
}

::selection { background: var(--selection); }

img, svg { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg);
  color: var(--text-strong);
  border: 1px solid var(--border-strong);
  padding: 0.5rem 0.9rem;
  z-index: 50;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.skip:focus { left: 1rem; top: 1rem; }

.mono,
.label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

/* ---------------- shell: asymmetric two-column ---------------- */

.shell {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 62rem) {
  .shell {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
  }
}

/* ---------------- left rail ---------------- */

.rail { padding: 4.5rem 0 2rem; }

@media (min-width: 62rem) {
  .rail {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 5.5rem 0 2.5rem;
    display: flex;
    flex-direction: column;
  }
}

.avatar {
  /* 144px display against a 288px asset (2x for retina). The yellow ground is
     kept deliberately: one saturated disc against an otherwise monochrome
     page. No border — the colour defines its own edge in both themes. */
  display: block;
  width: 144px;
  height: 144px;
  margin: 0 0 1.5rem;
  object-fit: cover;
  border-radius: 50%;
}

.rail h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.1rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--text-strong);
  margin: 0 0 0.75rem;
  font-weight: 700;
}

.rail .role {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.01em;
  margin: 0 0 0.9rem;
  border-left: 2px solid var(--border-strong);
  padding-left: 0.7rem;
}

.rail .pitch {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 22rem;
  margin: 0 0 1.25rem;
}

.rail .locus {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 1.75rem;
}

/* rail nav — index-style, dense */

.rail-nav { margin: 0 0 auto; }

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

.rail-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: nav;
}

.rail-nav li { counter-increment: nav; }

.rail-nav a {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.3rem 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.rail-nav a::before {
  content: counter(nav, decimal-leading-zero);
  color: var(--border);
  font-size: 0.7rem;
}
.rail-nav a:hover,
.rail-nav a:focus-visible {
  color: var(--text-strong);
  text-decoration: none;
}
.rail-nav a:hover::before { color: var(--faint); }

.rail-nav a[aria-current="true"] { color: var(--text-strong); }
.rail-nav a[aria-current="true"]::before { color: var(--accent); }

/* nested track links under Case studies — must NOT continue the 01–09 counter */
.rail-sub {
  list-style: none;
  margin: 0.15rem 0 0.3rem;
  padding: 0 0 0 1.45rem;
}
.rail-sub li { counter-increment: none; }
.rail-sub a {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.18rem 0;
  gap: 0.5rem;
}
.rail-sub a::before {
  content: "";
  width: 0.6rem;
  height: 1px;
  background: var(--border-strong);
  opacity: 0.55;
  flex: none;
  align-self: center;
}
.rail-sub a:hover::before,
.rail-sub a[aria-current="true"]::before { background: var(--accent); opacity: 1; }

.rail-contact {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.9;
  color: var(--muted);
}
.rail-contact a { color: var(--text-strong); }
.rail-contact a:hover { color: var(--accent); }

.rail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.1rem;
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}
.rail-links a {
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}
.rail-links a:hover {
  color: var(--text-strong);
  border-bottom-color: var(--text-strong);
  text-decoration: none;
}

/* ---------------- main column ---------------- */

main { padding-bottom: 5rem; }

@media (min-width: 62rem) {
  main { padding: 5.5rem 0 7rem; }
}

section { margin-bottom: 4.5rem; }
section:last-child { margin-bottom: 0; }

.sec-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.sec-head .label {
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.sec-head h2 {
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  margin: 0;
  font-weight: 650;
}

/* sticky mini-header on small screens */
@media (max-width: 61.99rem) {
  .sec-head {
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 5;
    padding-top: 0.75rem;
  }
}

/* opening paragraph of the summary — the section's visual entry point */
.lede-para {
  font-size: 1.15rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  font-weight: 550;
}

/* group headings inside the numbers section */
.stat-group-h {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 1.75rem 0 0.6rem;
}
.stat-group-h:first-of-type { margin-top: 0; }

/* subsection heads splitting GTM work from RevOps work */
.work-subhead {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin: 2.75rem 0 0.35rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border-strong);
}
.work-subhead:first-child { margin-top: 0.5rem; }
.work-subhead h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.work-subhead .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.work-intro {
  margin: 0 0 1.25rem;
  max-width: 42rem;
  font-size: 0.93rem;
  color: var(--muted);
}

.prose { max-width: 42rem; }
.prose p { margin: 0 0 1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text-strong); font-weight: 620; }

.note-block {
  max-width: 42rem;
  margin-top: 1.5rem;
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-strong);
  padding: 1rem 1.1rem;
}
.note-block h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}
.note-block p { margin: 0; font-size: 0.95rem; }

/* ---------------- proof numbers ---------------- */

.figures {
  /* 8 figures — explicit 4 and 2 column tracks so the grid always fills
     evenly instead of orphaning the last stat on a row of its own */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-right: 0;
  border-bottom: 0;
}

@media (max-width: 34rem) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fig {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.9rem 1rem;
}

.fig b {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.fig b.good { color: var(--accent); }

.fig span {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* ---------------- case studies ---------------- */

.case {
  border: 1px solid var(--border);
  margin-bottom: 0.6rem;
}

/* ---- collapsed / expanded disclosure ---- */

.case > details > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 1.5rem 1.5rem;
  cursor: pointer;
  list-style: none;
  transition: background-color 120ms linear;
}
.case > details > summary::-webkit-details-marker { display: none; }
.case > details > summary::marker { content: ""; }

.case > details > summary:hover { background: var(--bg-inset); }
.case > details > summary:hover .sum-title { color: var(--accent); }
.case > details > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.case > details[open] > summary { border-bottom: 1px solid var(--border); }

.sum-main { min-width: 0; }

/* the result leads — the descriptive name supports it underneath */
.sum-title {
  display: block;
  font-size: 1.45rem;
  line-height: 1.24;
  letter-spacing: -0.02em;
  font-weight: 650;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
  margin: 0;
  max-width: 34rem;
  transition: color 120ms linear;
}

.sum-note {
  display: block;
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 36rem;
}

/* text affordance in place of a caret */
.view-link {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms linear;
}
.view-link::after { content: "View case study \2192"; }
.case > details[open] > summary .view-link::after { content: "Close \2191"; }
.case > details > summary:hover .view-link { border-bottom-color: var(--accent); }

/* on narrow screens the link drops under the text rather than squeezing it */
@media (max-width: 34rem) {
  .case > details > summary {
    grid-template-columns: 1fr;
    padding: 1.25rem 1.15rem;
  }
  .sum-title { font-size: 1.3rem; }
  .view-link { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .case > details > summary,
  .view-link,
  .sum-title { transition: none; }
}

/* body of an expanded case */
.case-body { padding: 1.35rem 1.25rem 1.5rem; }

.case-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

.idx {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--faint);
}

/* complexity tags */
.tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--border-strong);
  color: var(--text-strong);
  white-space: nowrap;
}
.tag-ent { border-color: var(--accent); color: var(--accent); }
.tag-adv { border-color: var(--border-strong); color: var(--text-strong); }
.tag-fnd { border-color: var(--border); color: var(--muted); }

.case h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin: 0 0 0.6rem;
  font-weight: 650;
  max-width: 38rem;
}

/* measured-results strip inside a case study */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-right: 0;
  border-bottom: 0;
  margin: 0.9rem 0 0.9rem;
}
@media (max-width: 34rem) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.metrics div {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.8rem 0.9rem;
}
.metrics b {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.metrics span {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--muted);
}
.metrics .good { color: var(--accent); }
.metrics-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 34rem) {
  .metrics-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* proportion bar — share of replies that were positive */
.propbar {
  display: flex;
  height: 12px;
  border: 1px solid var(--border-strong);
  background: var(--bg-inset);
  margin: 1rem 0 0.55rem;
}
.propbar i {
  display: block;
  background: var(--accent);
}

.propkey {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}
.propkey li { display: flex; align-items: center; }
.propkey .sw {
  width: 9px;
  height: 9px;
  margin-right: 0.45rem;
  border: 1px solid var(--border-strong);
  flex: none;
}
.propkey .sw.pos { background: var(--accent); }
.propkey .sw.rest { background: var(--bg-inset); }

.source-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--faint);
  margin: 0 0 0.9rem;
}

/* plain-English one-liner under each case title — the scannable layer */
.case-tldr {
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--text-strong);
  font-weight: 550;
  letter-spacing: -0.005em;
  max-width: 40rem;
  margin: 0 0 0.85rem;
}

/* who the work was for — first thing in an expanded case */
.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-strong);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
  margin: 0 0 1.25rem;
}
.case-meta span + span { color: var(--muted); }

.case h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 1.25rem 0 0.35rem;
  font-weight: 600;
}
.case h4:first-of-type { margin-top: 0; }

.case p { max-width: 42rem; margin: 0 0 0.7rem; font-size: 0.97rem; }
.case p:last-child { margin-bottom: 0; }
.case ul.plain { max-width: 42rem; margin: 0 0 0.7rem; padding-left: 1.05rem; font-size: 0.97rem; }
.case ul.plain li { margin-bottom: 0.25rem; }

/* logic flow / schema blocks — monospace, dense, bordered */

.flow {
  border: 1px solid var(--border);
  background: var(--bg-inset);
  padding: 0.85rem 1rem;
  margin: 0.75rem 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.85;
  color: var(--text);
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}
.flow .k { color: var(--faint); }
.flow .a { color: var(--accent); }

/* ---------------- flow diagrams ----------------
   Built in HTML, not SVG. Nodes wrap their own text, inherit the page's
   fonts, reflow at any width, and cannot clip their own borders the way a
   hand-laid `rect x="0"` did against the edge of its viewBox. */

.flowmap {
  margin: 1rem 0 1.1rem;
  max-width: 44rem;
}

.fm-node {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1rem;
  border: 1px solid var(--border-strong);
  background: var(--bg-inset);
  padding: 0.5rem 0.7rem 0.55rem;
}
.fm-title {
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text-strong);
}
.fm-tool {
  font-family: var(--font-mono);
  font-size: 0.67rem;
  line-height: 1.3;
  color: var(--accent);
  text-align: right;
}
.fm-desc {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 0.2rem;
}
/* the decisive step in each flow */
.fm-node.is-accent {
  border-color: var(--accent);
  background: var(--accent-quiet);
}
.fm-node.is-accent .fm-title { color: var(--accent); }

/* connector: 1px stem with a triangular head */
.fm-arrow {
  position: relative;
  height: 1.15rem;
}
.fm-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 5px;
  border-left: 1px solid var(--faint);
}
.fm-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--faint);
}

/* parallel paths sit side by side, bracketed in and out */
.fm-branch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
  gap: 0.5rem;
}
.fm-branch.has-in { padding-top: 1rem; }
.fm-branch.has-out { padding-bottom: 1rem; }
/* the rail spans first-node centre to last-node centre */
.fm-branch.has-in::before,
.fm-branch.has-out::after {
  content: "";
  position: absolute;
  left: calc(50% / var(--n));
  right: calc(50% / var(--n));
  border-top: 1px solid var(--faint);
}
.fm-branch.has-in::before { top: 0; }
.fm-branch.has-out::after { bottom: 0; }
/* short drops from the rail into each node */
.fm-branch.has-in > .fm-node::before,
.fm-branch.has-out > .fm-node::after {
  content: "";
  position: absolute;
  left: 50%;
  height: 1rem;
  border-left: 1px solid var(--faint);
}
.fm-branch.has-in > .fm-node::before { top: -1rem; }
.fm-branch.has-out > .fm-node::after { bottom: -1rem; }

.fm-branch + .fm-note { margin-top: 0.9rem; }
.fm-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--faint);
  text-align: center;
  margin: 0;
  max-width: none;
}

/* narrow columns: parallel paths stack, the rail becomes a left spine */
@media (max-width: 34rem) {
  .fm-branch {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
    padding: 0 0 0 0.7rem;
    border-left: 1px solid var(--faint);
  }
  .fm-branch.has-in,
  .fm-branch.has-out { padding-top: 0; padding-bottom: 0; }
  .fm-branch.has-in::before,
  .fm-branch.has-out::after,
  .fm-branch > .fm-node::before,
  .fm-branch > .fm-node::after { content: none; }
}

.diagram-wrap {
  border: 1px solid var(--border);
  padding: 1rem;
  margin: 0.9rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.diagram-wrap svg { display: block; min-width: 600px; }

.cap-line {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--faint);
  margin: 0.6rem 0 0;
}

/* svg diagram parts */
.diagram .node {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
}
.diagram .node-accent { stroke: var(--accent); }
.diagram .zone {
  fill: none;
  stroke: var(--faint);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.diagram text { font-family: var(--font-mono); font-size: 12px; fill: var(--text-strong); }
.diagram .t-sub { font-size: 10px; fill: var(--muted); }
.diagram .t-zone { font-size: 10px; fill: var(--faint); letter-spacing: 0.06em; }
.diagram .t-edge { font-size: 9.5px; fill: var(--muted); }
.diagram .edge { stroke: var(--faint); stroke-width: 1; fill: none; }
.diagram .arrowhead { fill: var(--faint); }

/* stack list */
.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--border);
}
.stack li {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.1rem 0.45rem;
}

/* testimonial inside a case */
.pull {
  margin: 1rem 0 0;
  border-left: 2px solid var(--accent);
  padding: 0.15rem 0 0.15rem 0.9rem;
  max-width: 42rem;
}
.pull p { font-size: 0.95rem; margin: 0 0 0.3rem; color: var(--text-strong); }
.pull cite {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--faint);
}

/* dense secondary work list */

.ledger { border-top: 1px solid var(--border); }

.ledger-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 40rem) {
  .ledger-row { grid-template-columns: 1fr; gap: 0.3rem; }
}

.ledger-row .when {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--faint);
  line-height: 1.7;
  padding-top: 0.15rem;
}

.ledger-row h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  color: var(--text-strong);
  letter-spacing: -0.01em;
  font-weight: 620;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.ledger-row p { margin: 0 0 0.5rem; font-size: 0.93rem; color: var(--muted); max-width: 42rem; }

/* compact problem -> solution pairs in the ledger */
.pair { margin: 0 0 0.5rem; max-width: 42rem; font-size: 0.93rem; }
.pair b {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
  display: inline-block;
  min-width: 4.6rem;
}
.pair span { color: var(--muted); }
.pair + .pair { margin-top: 0.3rem; }
.ledger-row .stack { margin-top: 0.4rem; padding-top: 0; border-top: 0; }

/* ---------------- capability map ---------------- */

.cap-map {
  border-top: 1px solid var(--border);
}

.cap-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 40rem) {
  .cap-row { grid-template-columns: 1fr; gap: 0.3rem; }
}

.cap-row dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 0.15rem;
}
.cap-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.9;
  color: var(--text);
}
.cap-row dd .sep { color: var(--border-strong); padding: 0 0.3rem; opacity: 0.5; }
.cap-row dd .q { color: var(--faint); }

/* ---------------- track record ---------------- */

.roles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }

.roles li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 40rem) {
  .roles li { grid-template-columns: 1fr; gap: 0.3rem; }
}

.roles .when {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--faint);
  padding-top: 0.2rem;
}
.roles h3 { margin: 0 0 0.3rem; font-size: 1rem; color: var(--text-strong); font-weight: 620; letter-spacing: -0.01em; }
.roles h3 .org { color: var(--muted); font-weight: 500; }
.roles p { margin: 0; font-size: 0.93rem; color: var(--muted); max-width: 42rem; }

/* ---------------- inbox screenshots ---------------- */

.shot {
  margin: 0 0 0.9rem;
  border: 1px solid var(--border);
  background: var(--bg-inset);
}

/* the image is a button so it is keyboard-reachable, not just clickable */
.shot-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
}
.shot-zoom img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--border);
}
.shot-zoom::after {
  content: "Click to expand";
  position: absolute;
  right: 0.55rem;
  bottom: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--bg);
  background: var(--text-strong);
  padding: 0.2rem 0.45rem;
  opacity: 0;
  transition: opacity 120ms linear;
  pointer-events: none;
}
.shot-zoom:hover::after,
.shot-zoom:focus-visible::after { opacity: 0.92; }
.shot-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.shot figcaption { padding: 0.85rem 1rem; }
.shot figcaption b {
  display: block;
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--text-strong);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.shot figcaption span {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--muted);
}

.shot.is-lead { border-color: var(--accent); border-left-width: 3px; }
.shot.is-lead figcaption b { color: var(--accent); }

/* ---- lightbox ---- */

#shotbox {
  border: 1px solid var(--border-strong);
  background: var(--bg);
  padding: 0;
  max-width: 96vw;
  max-height: 94vh;
  width: auto;
  overflow: visible;
}
#shotbox::backdrop { background: rgba(0, 0, 0, 0.82); }
#shotbox img {
  display: block;
  max-width: 96vw;
  max-height: 94vh;
  width: auto;
  height: auto;
}
.shotbox-close {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  width: 2rem;
  height: 2rem;
  line-height: 1;
  font-size: 1.25rem;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text-strong);
  cursor: pointer;
  z-index: 2;
}
.shotbox-close:hover { background: var(--text-strong); color: var(--bg); }
.shotbox-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* On a phone, fitting the screenshot to the viewport makes "expand" pointless —
   it lands at the same size it already was inline. Instead the dialog fills the
   screen and the image renders oversized inside it, so the email text is
   actually legible and the reader pans around it. */
@media (max-width: 46rem) {
  .shot-zoom::after { display: none; }
  #shotbox {
    border: 0;
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #shotbox img {
    width: 960px;
    max-width: none;
    max-height: none;
    height: auto;
  }
  .shotbox-close {
    position: fixed;
    top: 0.6rem;
    right: 0.6rem;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.4rem;
  }
  .shotbox-hint {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: var(--bg);
    background: var(--text-strong);
    padding: 0.3rem 0.6rem;
    pointer-events: none;
  }
}
@media (min-width: 46.01rem) {
  .shotbox-hint { display: none; }
}

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

/* ---------------- real email responses ---------------- */

.exchanges {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.exchange {
  margin: 0;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
}
.exchange p {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-strong);
  flex: 1;
}
.exchange footer {
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
}
.exchange cite {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--muted);
}
/* the standout: prospect asked for a meeting on their very first reply */
.exchange.is-first {
  border-left-width: 3px;
  background: var(--accent-quiet, var(--bg-inset));
}
.reply-tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.12rem 0.4rem;
}
.exchange .followup {
  font-size: 0.85rem;
  color: var(--muted);
  flex: none;
  margin-bottom: 0.9rem;
}

.exchange .outcome {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}

/* marks removed identifying detail, not an edit to meaning */
.redact {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--faint);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 0 0.25rem;
}

/* ---------------- role metric chart ---------------- */

.rolechart { display: block; min-width: 620px; }
.rolechart .rc-when {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  fill: var(--faint);
}
.rolechart .rc-role {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 650;
  fill: var(--text-strong);
}
.rolechart .rc-org {
  font-family: var(--font-mono);
  font-size: 10.5px;
  fill: var(--muted);
}
.rolechart .rc-track { fill: var(--bg-inset); stroke: var(--border); stroke-width: 1; }
.rolechart .rc-bar { fill: var(--border-strong); }
.rolechart .rc-bar.accent { fill: var(--accent); }
.rolechart .rc-val {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--bg);
}
.rolechart .rc-val.on-accent { fill: var(--bg); }

.role-notes {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
  max-width: 42rem;
}
.role-notes li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--muted);
}
.role-notes b {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-strong);
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.throughline {
  margin-top: 1.5rem;
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-strong);
  padding: 0.9rem 1.1rem;
  font-size: 0.95rem;
  max-width: 42rem;
}
.throughline strong { color: var(--text-strong); }

/* ---------------- testimonials ---------------- */

.quotes { border-top: 1px solid var(--border); }

.quotes blockquote {
  margin: 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  gap: 0 1.5rem;
  align-items: baseline;
}
@media (max-width: 48rem) {
  .quotes blockquote { grid-template-columns: 1fr; gap: 0.4rem; }
}

.quotes p { margin: 0; font-size: 0.96rem; color: var(--text-strong); }
.quotes cite {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--faint);
  line-height: 1.6;
}

.endorsements {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 2;
}
.endorsements .sep { color: var(--border-strong); padding: 0 0.25rem; opacity: 0.5; }

/* ---------------- contact ---------------- */

.contact-lede {
  font-size: 1.15rem;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  max-width: 34rem;
  margin: 0 0 1.5rem;
  font-weight: 550;
}

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--border-strong);
  color: var(--text-strong);
  background: none;
}
.btn:hover {
  text-decoration: none;
  background: var(--text-strong);
  color: var(--bg);
}

.contact-lines {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 2;
  color: var(--muted);
}
.contact-lines a { color: var(--text-strong); }

.contact-links {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.contact-links li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.75rem;
  padding: 0.3rem 0;
  border-top: 1px solid var(--border);
}
.contact-links li:first-child { border-top: 0; }
.contact-links .q { color: var(--faint); font-size: 0.72rem; }

.colophon {
  margin-top: 3.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--faint);
}

/* ---------------- small screens ---------------- */

@media (max-width: 61.99rem) {
  .rail { padding: 3.25rem 0 0; border-bottom: 1px solid var(--border); margin-bottom: 2.5rem; }
  .rail-contact { margin-top: 1.5rem; margin-bottom: 2rem; }
  section { margin-bottom: 3.5rem; }
  .case { padding: 1.15rem; }
}

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

@media print {
  .rail-nav, .btn { display: none; }
  body { background: #fff; color: #000; }
}