/* Contextualized Systems — stylesheet.
   Deliberately plain: server-rendered text, no frameworks, no webfonts beyond a system stack.
   A person should be able to read this in 60 seconds and an AI crawler should be able to parse it. */

:root {
  --ink: #14161a;
  --ink-soft: #4a5160;
  --ink-faint: #757d8c;
  --rule: #e2e5ea;
  --rule-strong: #c9ced8;
  --bg: #ffffff;
  --bg-soft: #f7f8fa;
  --accent: #b4451f;
  --measure: 44rem;

  /* One spacing scale. Section rhythm is stated once here rather than hand-tuned per element. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

/* padding-inline, NOT padding: a bare `padding: 0 1.5rem` here outranks `section`'s
   vertical padding (class beats type selector) and collapsed every section to 0px. */
.wrap { max-width: var(--measure); margin: 0 auto; padding-inline: 1.5rem; }

/* ---------- header ---------- */

header.site { padding: 0.8rem 0; }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-block: 1px solid var(--rule);
}

.site-nav nav.wrap { display: flex; gap: 1.6rem; }
.site-nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.9rem;
              padding-block: 0.75rem; }
.site-nav a:hover { color: var(--accent); }
section[id] { scroll-margin-top: 3.5rem; }

.brand {
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}

/* The CS monogram — brand/BRAND.md, decision 25. Inline SVG, not an <img>: the name stays the only
   accessible text, the mark inherits the ink, and it costs no request. Baselined by hand rather than by
   flex, which would change the anchor's own baseline and lift the wordmark off the nav row.
   1.55em, not the 1.1em Mark D used: the monogram's inner negative space is about one pixel at a 13.8px
   width, so the fold filled in and the accent merged with the form — it read as a smudge rather than as
   initials. At 1.55em (23.6px tall, 19.4px wide) both survive. The box carries the mark's own aspect
   (244:296) so a square box cannot letterbox it and leave dead space beside the wordmark, and
   vertical-align puts the ink's bottom edge where Mark D's sat. */
.brand .mark {
  width: 1.278em;
  height: 1.55em;
  vertical-align: -0.145em;
  margin-right: 0.42em;
}
.brand .mark path { fill: currentColor; }
.brand .mark path.accent { fill: var(--accent); }

/* ---------- type ---------- */

h1 {
  font-size: clamp(1.85rem, 4.6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 1.15rem;
  font-weight: 680;
}

h2 {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 660;
  margin: 0 0 1.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}

h3 { font-size: 1.22rem; font-weight: 640; margin: 0 0 0.45rem; letter-spacing: -0.015em;
     color: var(--ink); }

p { margin: 0 0 1rem; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 2px; }
a:hover { color: var(--accent); text-decoration-color: var(--accent); }

section { padding-block: var(--s8); border-bottom: 1px solid var(--rule); }
section:last-of-type { border-bottom: 0; }

/* ---------- hero ---------- */

.hero { padding-block: var(--s7) 0; }
.lede { font-size: 1.12rem; color: var(--ink-soft); }
.hero .meta {
  font-size: 0.86rem;
  color: var(--ink-faint);
  border-left: 2px solid var(--rule-strong);
  padding-left: 1rem;
  margin-top: var(--s6);
  line-height: 1.75;
}

.hero .meta .sep { margin-inline: 0.5rem; color: var(--rule-strong); }

/* ---------- cards ---------- */

ul.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.9rem; }
ul.cards li { padding-left: 1.1rem; border-left: 2px solid var(--rule); }
ul.cards h3 { margin-bottom: 0.5rem; }
ul.cards p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }

/* ---------- work entries ---------- */

article.work { margin-bottom: 3.25rem; }
article.work:last-child { margin-bottom: 0; }
article.work.secondary { padding-top: 0.4rem; }

.role {
  font-size: 0.86rem;
  color: var(--ink-faint);
  margin: 0 0 0.9rem;
}

.tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.12rem 0.42rem;
  margin-left: 0.3rem;
  vertical-align: 0.14em;
  white-space: nowrap;
}

article.work ul { margin: 0 0 1.1rem; padding-left: 1.15rem; }
article.work li { margin-bottom: 0.7rem; color: var(--ink-soft); line-height: 1.65; }
article.work li strong { color: var(--ink); font-weight: 620; }

.note {
  font-size: 0.88rem;
  color: var(--ink-faint);
  border-top: 1px dotted var(--rule-strong);
  padding-top: 0.7rem;
  margin: 0;
}

/* ---------- facts / timeline ---------- */

dl.facts { margin: 0; }
dl.facts dt { font-weight: 640; margin-top: 1.85rem; }
dl.facts dt:first-child { margin-top: 0; }
dl.facts dd { margin: 0.4rem 0 0; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.65; }

ul.timeline { list-style: none; margin: 0; padding: 0; }
ul.timeline li { display: flex; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); font-size: 0.96rem; }
ul.timeline li:last-child { border-bottom: 0; }
ul.timeline .when { flex: 0 0 7.5rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; font-size: 0.88rem; padding-top: 0.1rem; }
ul.timeline .what { color: var(--ink-soft); }
ul.timeline .what strong { color: var(--ink); font-weight: 620; }

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

.contact { font-size: 1.02rem; line-height: 1.9; margin-top: var(--s5); }

footer.wrap, footer .wrap { padding-top: 2rem; padding-bottom: 3rem; }
footer p { font-size: 0.84rem; color: var(--ink-faint); margin: 0; }

/* writing page */

.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); }
.post-list li:last-child { border-bottom: 0; }
.post-list .when { font-size: 0.85rem; color: var(--ink-faint); display: block; }

@media (max-width: 34rem) {
  body { font-size: 16px; }
  ul.timeline li { display: block; }
  ul.timeline .when { display: block; padding-bottom: 0.1rem; }
  section { padding: 2.25rem 0; }

  /* Five nav items at the desktop gap do not fit a phone: measured at 320px the row was
     53px wider than the content area, which pushed the page into horizontal scroll, and
     the longest label broke over three lines. Narrow the gap and the type together, and
     keep narrowing as the screen does — a single fixed pair of values fits 360px and still
     overflows at 320px (272px of content against a 303.8px row: 8px of scroll, half-hidden
     by the gutter, which is why it went unnoticed).

     The clamp rather than a second breakpoint: the rules in brand/BRAND.md allow exactly one
     content breakpoint. flex-wrap is the structural guarantee — if a client's system font is
     wider than the one this was measured in, the row wraps to two lines instead of producing
     a horizontal scrollbar. padding-block holds the 44px tap target the smaller type costs. */
  .site-nav nav.wrap { gap: clamp(0.6rem, 2.5vw, 1rem); flex-wrap: wrap; }
  .site-nav a { font-size: clamp(0.8rem, 3.6vw, 0.85rem); padding-block: 0.8rem; }
}

@media print {
  .site-nav, footer { display: none; }
  body { font-size: 11pt; }
}