:root {
  --paper: #ffffff;
  --paper-2: #f5f4f1;
  --ink: #161616;
  --ink-soft: #55534f;
  --rule: #e4e2dd;
  --pencil: #c8231a;
  --accent: #ff6a4d;
  --bp: #112a57;
  --bp-deep: #0c1f42;
  --bp-line: #3f62a3;
  --bp-ink: #eef2fa;
  --bp-soft: #b4c3e0;
  --split: 50%;
  --gutter: clamp(16px, 3vw, 44px);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, Menlo, monospace;
  --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  /* One blueprint grid for the hero and its run-off */
  --grid: 32px;
  --grid-lines: linear-gradient(var(--bp-line) 1px, transparent 1px), linear-gradient(90deg, var(--bp-line) 1px, transparent 1px);
  --grid-veil: color-mix(in srgb, var(--bp) 72%, transparent);
  --name-size: 34px;
  --base: 17px;
  --motion: 1;               /* reveal durations x this */
  --curve: clamp(40px, 7vw, 110px);
  --curve-fill: #f3f1ec;
}
@property --split { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--bp-soft) var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--base); line-height: 1.55; }
::selection { background: var(--pencil); color: #fff; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--pencil); outline-offset: 3px; }
.bp :focus-visible, .bp-band :focus-visible, .contact .r :focus-visible { outline-color: var(--bp-ink); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 8px; background: var(--ink); color: #fff; padding: 6px 10px; z-index: 20; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Top bar: floats over both halves ---------- */
.top {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px var(--gutter); pointer-events: none;
}
.top > * { pointer-events: auto; }
.top .name { justify-self: start; font-family: var(--serif); font-size: var(--name-size); text-decoration: none; color: var(--ink); }
.top nav { grid-column: 3; justify-self: end; display: flex; gap: 20px; font-family: var(--mono); font-size: 12px; color: var(--bp-ink); }
.js .top nav {
  --cut: 9999px;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, var(--ink) var(--cut), var(--bp-ink) var(--cut));
}
.top nav a { text-decoration: none; white-space: nowrap; padding-block: 12px; margin-block: -12px; } /* 44px hit area, same layout */
.contact .r a, .idx .t a { padding-block: 8px; }
@media (max-width: 1199px) {
  .top { grid-template-columns: auto 1fr auto; column-gap: 16px; }
  .top nav { gap: 14px; }
}
.top nav a:hover { text-decoration: underline; text-decoration-color: var(--pencil); }
.top nav :focus-visible { outline-color: var(--pencil); }

/* ---------- Split hero (C's composition) ---------- */
.split {
  --colw: clamp(280px, 30vw, 440px);        /* each half's copy column */
  --rest: calc(50vw - 2 * var(--gutter));   /* a half's content width at an even split */
  position: relative; display: grid; grid-template-columns: var(--split) 1fr;
  min-height: max(min(90svh, 860px), 640px); overflow: hidden;
}
.half {
  position: relative; container-type: inline-size; overflow: clip;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(104px, 17svh, 170px) var(--gutter) 72px;
}
/* C's offset: the systems title sits high, the writer's sits lower; both are pinned from the top so switching ledes never moves them */
.writer { padding-top: clamp(150px, 25svh, 240px); }
.writer { align-items: flex-end; text-align: right; }
.writer .col { padding-right: max(0px, calc(42px - var(--gutter))); }
.bp .col { padding-left: max(0px, calc(42px - var(--gutter))); }
.bp {
  background-color: var(--bp); color: var(--bp-ink);
  background-image: var(--grid-lines);
  background-size: var(--grid) var(--grid); background-position: right 0 bottom 0; /* anchored to the page edge and the hero's foot, so the seam uncovers it and the run-off continues it */
}
.bp::before { content: ""; position: absolute; inset: 0; background: var(--grid-veil); pointer-events: none; }
.bp > * { position: relative; }

/* Titles: the mono title sets at about half its column (c8-c10's size, capped at 60px), the serif fills more of its own. --fit is the room a title has:
   the column's width now, but never more than at an even split (the opening side holds its size, the closing side
   shrinks), so neither can reach the seam. Divisors come from each face's measured width of its longest line per 1px
   of font size: "specialist>" 7.26em fills ~55% of --fit; "strategist" 3.06em fills ~59%. */
h1, .sys { margin: 0; font-weight: 400; }
.half { --colpad: max(0px, 42px - var(--gutter)); --fit: min(100cqi - var(--colpad), 50vw - 2 * var(--gutter) - var(--colpad), 640px); }
.col { width: min(max(var(--colw), var(--fit)), 100%); }
.writer .col, .bp .col { width: min(var(--colw), 100%); }
.part { display: block; line-height: 1.2; }
.word, .ln { display: block; }
.writer .part { font-family: var(--serif); font-size: clamp(18px, calc(var(--fit) * 0.045), 28px); }
.writer .word { font-family: var(--serif); font-style: italic; font-size: max(24px, calc(var(--fit) / 5.2)); line-height: 0.92; letter-spacing: -0.02em; padding-right: 0.06em; }
.bp .part { font-family: var(--mono); font-size: clamp(12px, calc(var(--fit) * 0.03), 18px); color: var(--bp-soft); margin-bottom: 0.6em; }
.bp .word { font-family: var(--mono); font-size: max(11px, min(60px, calc(var(--fit) * 0.076))); font-weight: 500; line-height: 1.12; letter-spacing: -0.045em; }
.bp .br { color: var(--bp-soft); }

.lede { margin: 26px 0 0; max-width: 34ch; font-size: clamp(16px, calc(var(--fit) * 0.036), 19px); text-wrap: pretty; }
.writer .lede { color: var(--ink-soft); margin-left: auto; }
[data-lede="B"] .lede, [data-lede="C"] .lede { max-width: 27ch; }
[data-lede="E"] .lede { display: none; }

/* Margin notes (writer side). Static by default; the live hero pins them to the far edge */
.notes { list-style: none; margin: 34px 0 0; padding: 0; font-family: var(--hand); font-weight: 500; font-size: clamp(25px, 2vw, 32px); line-height: 1.1; color: var(--pencil); }
.note { max-width: 15em; margin: 0 0 18px auto; transform: rotate(var(--r, 0deg)); }
.ink { display: block; text-wrap: balance; }
.u { position: relative; white-space: nowrap; }
.notes svg { position: absolute; overflow: visible; pointer-events: none; }
.u svg { left: -3%; width: 106%; bottom: -0.34em; height: 0.4em; }
.notes path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* Typed lines (systems side): one short statement each, a dash hung in the margin */
.lines { list-style: none; margin: 30px 0 0; padding: 0; max-width: 70ch; font-family: var(--mono); font-size: 12px; line-height: 1.75; color: var(--bp-ink); }
.lines li { position: relative; padding-left: 2ch; }
.lines li + li { margin-top: 14px; }
.lines li::before { content: "–"; position: absolute; left: 0; color: var(--bp-soft); }
.lines .tx { display: block; }

/* Systems side at rest: two role lines, company first, then the bridge drawing right under them as one block.
   Roles shrink with a closing half, then break after the company. */
.quals { list-style: none; margin: 28px 0 0; padding: 0; font-family: var(--mono); font-size: max(9px, min(13px, calc(var(--fit) / 42))); line-height: 1.85; color: var(--bp-soft); }
.quals .co { color: var(--bp-ink); font-weight: 500; }
.viz { display: block; width: min(100%, 520px); height: auto; margin-top: 18px; overflow: visible; }
.viz .e { fill: none; stroke: var(--bp-soft); stroke-width: 1; opacity: 0.5; vector-effect: non-scaling-stroke; }
.viz .e.o { stroke: var(--accent); opacity: 0.75; }
.viz .e.f { opacity: 0.3; }
.viz .e.s { stroke: var(--bp-ink); opacity: 0.6; }
.viz .n { fill: var(--bp); stroke: var(--bp-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.viz .n .t { stroke: var(--bp-soft); }
.viz .hub { fill: var(--accent); }
.viz .pk { fill: #ffd2c7; }
.viz .pk rect, .viz .pk.sq circle { display: none; }
.viz .pk.sq rect { display: inline; }
.viz text { font-family: var(--mono); font-size: 12px; fill: var(--bp-ink); }
.viz .lb { opacity: var(--lb, 1); }
.viz .me { fill: var(--pencil); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; } /* the seam handle, small */
.live .viz { opacity: var(--gv, 1); }
/* the lines again, in the drawing's place, once the writer side has squeezed this side; script sets top, width and opacity */
.mini { display: none; }
.live .mini { display: block; position: absolute; left: 0; top: 0; list-style: none; margin: 28px 0 0; padding: 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--bp-ink); pointer-events: none; }
.live .mini li { position: relative; padding-left: 2ch; opacity: 0; }
.live .mini li + li { margin-top: 22px; }
.live .mini li::before { content: "–"; position: absolute; left: 0; color: var(--bp-soft); }

/* The seam and its knob */
.seam { position: absolute; top: 0; bottom: 0; left: var(--split); width: 0; z-index: 4; touch-action: none; }
.seam::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--pencil); }
.handle {
  position: absolute; top: 50%; left: 0; z-index: 1; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: ew-resize;
  background: var(--pencil); color: #fff; display: none; place-items: center;
  box-shadow: 0 6px 18px rgba(12, 31, 66, 0.35); touch-action: none;
  transition: transform 160ms ease;
}
.handle:hover, .dragging .handle { transform: translate(-50%, -50%) scale(1.06); }
.handle svg { width: 24px; height: 24px; }
.handle:focus-visible { outline: 3px solid var(--bp-ink); outline-offset: 3px; }
.dragging { cursor: ew-resize; user-select: none; }
.tap { display: none; }

/* Live hero: desktop, JS, motion allowed */
@media (min-width: 1000px) {
  .live .handle { display: grid; }
  .live .seam::after { content: ""; position: absolute; top: 0; bottom: 0; left: -14px; width: 28px; cursor: ew-resize; }
  .live .drawer { position: static; }

  /* script places each note in the open white area at its threshold */
  .live .notes { position: absolute; inset: 0; margin: 0; text-align: left; pointer-events: none; }
  .live .note { position: absolute; left: 0; top: 0; margin: 0; width: max-content; max-width: 16em; transform-origin: left center; opacity: 0; transition: opacity calc(280ms * var(--motion)) ease; }
  .live .note.on { opacity: 1; }
  .live .note .ink { clip-path: inset(-40% 100% -40% -8%); }
  .live .note.drawn .ink { clip-path: inset(-40% -8% -40% -8%); transition: clip-path calc(1000ms * var(--motion)) cubic-bezier(.45, .05, .3, 1); }
  .live .note path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .live .note.drawn path { stroke-dashoffset: 0; transition: stroke-dashoffset calc(650ms * var(--motion)) ease-out calc(900ms * var(--motion)); }

  /* script sets each line's width (its left edge lands on a grid line) and top (on a grid row) */
  .live .lines { position: absolute; inset: 0; margin: 0; max-width: none; font-size: 12px; line-height: 22px; pointer-events: none; }
  /* script sets each line's opacity and slide from the drag; it is hidden outright while fully faded */
  .live .lines li { position: absolute; top: 0; right: 32px; width: max-content; margin: 0; text-align: left; opacity: 0; visibility: hidden; transition: opacity 90ms linear, transform 90ms linear, visibility 0s 90ms; }
  .live .lines li.on { visibility: visible; transition: opacity 90ms linear, transform 90ms linear; }
}


/* ---------- Sections ---------- */
.wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: clamp(72px, 12vh, 128px) clamp(56px, 9vh, 96px); }
.h2 { margin: 0 0 36px; font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.75rem); line-height: 1; letter-spacing: -0.01em; }
/* Pencil underline, same stroke as the hero's notes; draws once in view */
.ul { position: relative; display: inline-block; }
.ul .hl { position: absolute; left: -2%; bottom: -0.2em; width: 104%; height: 0.16em; overflow: visible; pointer-events: none; }
.ul path { fill: none; stroke: var(--pencil); stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ul.pre .hl { clip-path: inset(-50% 100% -50% -2%); }
.ul.in .hl { clip-path: inset(-50% -2% -50% -2%); transition: clip-path calc(700ms * var(--motion)) cubic-bezier(.45, .05, .3, 1) calc(150ms * var(--motion)); }


/* Writing index, grouped by employer */
.emp { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 20px; flex-wrap: wrap; margin: 0 0 14px; }
.emp + .idx { margin-bottom: 64px; }
.idx:last-child { margin-bottom: 0; }
.emp h3 { margin: 0; font-size: 17px; font-weight: 600; }
.emp h3 span { font-weight: 400; color: var(--ink-soft); }
.emp p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.idx { width: 100%; border-collapse: collapse; }
.idx td { border-top: 1px solid var(--rule); padding: 14px 16px 14px 0; vertical-align: baseline; }
.idx tr:last-child td { border-bottom: 1px solid var(--rule); }
.idx .d { width: 8rem; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.idx .t a { text-decoration: none; font-family: var(--serif); font-size: 1.35rem; line-height: 1.3; }
.idx .t a:hover { color: var(--pencil); text-decoration: underline; }

/* Blueprint band */
.bp-band { background: var(--bp); color: var(--bp-ink); }
/* Experience: just the heading and the table, so even padding and a tighter heading gap */
.bp-band .sec { padding-block: clamp(64px, 10vh, 112px); }
.bp-band .h2 { margin-bottom: 28px; }
/* Roles: dates | role, company | one or two highlights, lighter */
.roles { width: 100%; border-collapse: collapse; border-top: 1px solid var(--bp-line); }
.roles td { padding: 14px var(--gutter) 14px 0; border-bottom: 1px solid var(--bp-line); vertical-align: baseline; }
.roles td:last-child { padding-right: 0; }
.roles .y { width: 9rem; font-family: var(--mono); font-size: 12px; color: var(--bp-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.roles .r { width: 38%; }
.roles .h { font-size: 15px; color: var(--bp-soft); }
.roles strong { font-weight: 600; }

/* Contact: the ask on white, the two ways to reach me on navy */
.contact { display: grid; grid-template-columns: 1fr 1fr; }
.contact > div { padding: clamp(56px, 10vh, 110px) var(--gutter); }
.contact .l { text-align: right; }
.contact h2 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: 1; }
.contact .r { background: var(--bp); color: var(--bp-ink); display: flex; flex-direction: column; justify-content: center; }
.contact .r a { font-family: var(--mono); font-size: clamp(14px, 1.6vw, 19px); }
.contact .r p { margin: 0; overflow-wrap: anywhere; }
.contact .r p + p { margin-top: 12px; }
footer { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); padding: 18px var(--gutter) 28px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }



/* ---------- Hero stacks below 1000px: no drag, tap to expand ---------- */
@media (max-width: 999px) {
  .split { grid-template-columns: 1fr; min-height: 0; }
  .seam { display: none; }
  .top nav, .js .top nav { color: var(--ink); background: none; }
  .half { justify-content: flex-start; padding: 96px var(--gutter) 32px; }
  .bp { padding-top: 32px; border-top: 2px solid var(--pencil); }
  .writer { align-items: flex-start; text-align: left; }
  .col, .writer .col, .bp .col { width: 100%; max-width: 600px; padding: 0 !important; }
  .quals { font-size: 12px; }
  .half { --colpad: 0px; --fit: min(100cqi, 520px); }
  .writer .word { font-size: max(24px, calc(var(--fit) / 4.2)); }
  .lede, .writer .lede { margin-left: 0; font-size: 17px; }
  .notes { margin-top: 0; }
  .viz { width: 100%; }
  .note { margin: 0 0 16px; max-width: 18em; transform-origin: left center; }
  .lines { margin-top: 0; }
  /* Reveal toggles: a full-width bordered row, a plus that turns to a cross when open */
  .tap {
    display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 22px; padding: 12px 14px; min-height: 48px;
    border: 1px solid currentColor; border-radius: 4px; background: none; text-align: left;
    font-family: var(--mono); font-size: 13px; color: var(--pencil); cursor: pointer; transition: background-color 160ms ease;
  }
  .tap::before {
    content: ""; flex: none; width: 13px; height: 13px; transition: transform 220ms ease;
    background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  }
  .tap[aria-expanded="true"]::before { transform: rotate(45deg); }
  .tap:hover { background-color: color-mix(in srgb, currentColor 7%, transparent); }
  .bp .tap { color: var(--bp-ink); border-color: var(--bp-soft); }
  .js .drawer { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 360ms ease, opacity 360ms ease, visibility 0s 360ms; }
  .js .half.open .drawer { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows 360ms ease, opacity 420ms ease 80ms; }
  .js .drawer > * { min-height: 0; overflow: hidden; padding: 18px 6px 4px; margin-inline: -6px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .top { grid-template-columns: auto 1fr auto; column-gap: 16px; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .top { position: static; grid-template-columns: 1fr auto; row-gap: 6px; background: var(--paper); }
  .top nav { grid-column: 1 / -1; grid-row: 2; justify-self: start; gap: 16px; margin-left: -4px; }
  .top nav a { padding: 12px 3px; margin-block: 0; font-size: 12px; }
  .half { padding-top: 28px; }
  .viz text { font-size: 14px; }
  .quals { font-size: 12px; }

  .contact { grid-template-columns: 1fr; }
  .contact .l { text-align: left; }
  .top nav { flex-wrap: wrap; column-gap: 6px; }
  .roles tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--bp-line); }
  .roles td, .roles .y, .roles .r { display: block; width: auto; padding: 0; border: 0; }
  .roles .r { margin-top: 4px; }
  .roles .h { margin-top: 4px; }
  .roles .h:empty { display: none; }
  .idx .d { width: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}
.nw { white-space: nowrap; }

/* Selected work on off-white: a flat top edge that slopes down gently on the left (the old wide curve, left half only). Behind that corner the
   hero carries on (white | navy grid, split at the live seam, with the seam line) for the corner's full depth, so the
   area outside the curve always shows the hero. --curve sets its depth. */
.cs { --strip: var(--split); --seam-c: var(--pencil); position: relative; isolation: isolate; }
.cs::before, .cs::after { content: ""; position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.cs::after {
  z-index: -2; height: var(--curve);
  background:
    linear-gradient(90deg, transparent calc(var(--strip) - 1.5px), var(--seam-c) 0, var(--seam-c) calc(var(--strip) + 1.5px), transparent 0),
    linear-gradient(90deg, var(--paper) var(--strip), transparent var(--strip)), linear-gradient(var(--grid-veil), var(--grid-veil)), var(--grid-lines), var(--bp);
  background-size: auto, auto, auto, var(--grid) var(--grid), var(--grid) var(--grid), auto;
  background-position: 0 0, 0 0, 0 0, right 0 top 0, right 0 top 0, 0 0; /* the hero's grid, one period on */
}
.cs::before { z-index: -1; bottom: 0; background: var(--curve-fill); border-radius: 50% 0 0 0 / var(--curve) 0 0 0; }
@media (max-width: 999px) { .cs { --strip: 0%; --seam-c: transparent; } } /* stacked: no seam, the hero ends on navy */