/* ================================================================
   Human Systems Studio · site styles
   Palette: Warm Terracotta · Instrument Serif + Inter
   ================================================================ */

:root {
  --paper: #F7F1E8;
  --soft:  #F0E5D2;
  --line:  #E4D6C2;
  --ink:   #1A1411;
  --muted: #6B5F53;
  --accent:#B8563F;
  --accent-dark: #9e4934;
  --on-accent: #FFFFFF;

  --dark-bg: #1A1411;
  --dark-soft: #2d2420;
  --dark-muted: #B8A794;
  --dark-accent: #D8886F;

  --max: 1200px;
  --gutter: 32px;
  --radius: 6px;
  --rule: 1px solid var(--line);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--on-accent); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Type helpers ---------- */
.eyebrow, .label, .meta {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.serif { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; }

.display {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(48px, 6.6vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin: 0;
}
.h1 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}
.h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0;
}
.h3 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
}
@media (min-width: 900px) { .h3 { font-size: 26px; } }

.body { font-size: 15px; line-height: 1.65; color: var(--ink); max-width: 60ch; }
.body.muted { color: var(--muted); }
.body.lede  { font-size: 17px; line-height: 1.6; color: var(--ink); max-width: 54ch; }
.small      { font-size: 13px; line-height: 1.6; color: var(--muted); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  border-bottom: var(--rule);
}
.nav-inner {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 22px 0;
}
.brand {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--ink);
  transition: color .2s ease;
}
.brand em { font-style: italic; }
.brand:hover { color: var(--accent); }

.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  color: var(--ink);
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav-links a:hover { color: var(--accent); border-color: var(--accent); }
.nav-links a[aria-current="page"] { border-color: var(--ink); }
.nav-links a[aria-current="page"]:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 700px) {
  .nav-links { gap: 18px; }
  .nav-links a:nth-child(n+5) { display: none; }
}

/* ---------- HERO (home, 80/20 split) ---------- */
.hero { padding: clamp(56px, 9vw, 120px) 0 clamp(64px, 10vw, 140px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.hero-kicker { display: flex; gap: 14px; align-items: center; margin-bottom: 28px; }
.hero-kicker .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--accent); display: inline-block; }
.hero-display { max-width: 18ch; }
.hero-display em { font-style: italic; color: var(--accent); }
.hero-body {
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 52ch;
}
.hero-ctas { display: flex; gap: 28px; margin-top: 40px; flex-wrap: wrap; align-items: center; }

.cta-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: var(--on-accent);
  padding: 14px 22px; border-radius: var(--radius);
  font-size: 13px; letter-spacing: 0.06em; font-weight: 500;
  transition: transform .15s ease, background .2s ease;
}
.cta-primary:hover { background: var(--accent-dark); transform: translateY(-1px); }
.cta-primary .arr { transition: transform .2s ease; }
.cta-primary:hover .arr { transform: translateX(3px); }

.cta-link {
  font-size: 13px; letter-spacing: 0.06em; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.cta-link:hover { color: var(--accent); border-color: var(--accent); }

/* Hero right rail */
.hero-rail {
  border-left: var(--rule);
  padding-left: clamp(20px, 2vw, 28px);
  padding-top: 8px;
}
.rail-block + .rail-block { margin-top: 28px; padding-top: 28px; border-top: var(--rule); }
.rail-label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; margin-bottom: 12px;
}
.rail-statement {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}
.rail-list { list-style: none; padding: 0; margin: 0; }
.rail-list li { font-size: 13px; line-height: 1.55; color: var(--ink); padding: 5px 0; }
.rail-currently { font-size: 13px; line-height: 1.55; color: var(--ink); margin: 0; }
.rail-currently strong { font-weight: 500; }
.status-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 99px;
  background: var(--accent); margin-right: 8px; vertical-align: middle;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-rail { border-left: 0; padding-left: 0; padding-top: 28px; border-top: var(--rule); }
  .hero-body { font-size: 17px; }
}

/* ---------- PAGE HERO (work, about — single column) ---------- */
.page-hero { padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 88px); }
.page-hero .page-kicker { display: flex; gap: 14px; align-items: center; margin-bottom: 28px; }
.page-hero .page-kicker .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--accent); display: inline-block; }
.page-hero-display {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 5.6vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 20ch;
}
.page-hero-display em { font-style: italic; color: var(--accent); }
.page-hero-body {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 58ch;
}

/* ---------- Section scaffold ---------- */
.section { padding: clamp(72px, 9vw, 128px) 0; border-top: var(--rule); }
.section-head {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(32px, 5vw, 56px);
  align-items: start;
}
.section-head .num { font-size: 11px; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }
.section-head .section-title { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(32px, 4vw, 46px); line-height: 1.05; margin: 0 0 14px; letter-spacing: -0.005em; max-width: 20ch; }
.section-head .section-lede { font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 58ch; margin: 0; }
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- Approach (pillars) ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: var(--rule); }
.pillar { padding: 32px 28px 40px; border-left: var(--rule); }
.pillar:first-child { border-left: 0; }
.pillar .num { font-size: 11px; letter-spacing: 0.16em; color: var(--accent); text-transform: uppercase; font-weight: 500; margin-bottom: 18px; }
.pillar .t { font-family: "Instrument Serif", Georgia, serif; font-size: 22px; line-height: 1.2; margin: 0 0 10px; }
.pillar .d { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillar { border-left: 0; border-top: var(--rule); }
  .pillar:nth-child(2) { border-left: var(--rule); }
  .pillar:first-child, .pillar:nth-child(2) { border-top: 0; }
}
@media (max-width: 560px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar:nth-child(2) { border-left: 0; border-top: var(--rule); }
  .pillar:first-child { border-top: 0; }
}

/* ---------- Section dark modifier ---------- */
/* Apply to any .section to flip it to the ink-background treatment.
   Usage: <section class="section section-dark" id="approach">... */
.section-dark {
  background: var(--dark-bg);
  color: var(--paper);
  border-top: 0;
}
.section-dark .section-head .num { color: var(--dark-muted); }
.section-dark .section-head .section-title { color: var(--paper); }
.section-dark .section-head .section-lede { color: var(--dark-muted); }

.section-dark .pillars { border-top-color: var(--dark-soft); }
.section-dark .pillar { border-left-color: var(--dark-soft); }
.section-dark .pillar .num { color: var(--dark-accent); }
.section-dark .pillar .t { color: var(--paper); }
.section-dark .pillar .d { color: var(--dark-muted); }

@media (max-width: 900px) {
  .section-dark .pillar { border-top-color: var(--dark-soft); }
  .section-dark .pillar:nth-child(2) { border-left-color: var(--dark-soft); }
}
@media (max-width: 560px) {
  .section-dark .pillar, .section-dark .pillar:nth-child(2) { border-top-color: var(--dark-soft); }
}

/* ---------- Selected work (home preview rows) ---------- */
.case {
  display: grid; grid-template-columns: 100px minmax(0, 1fr) 260px;
  gap: clamp(24px, 4vw, 56px);
  padding: 40px 0;
  border-top: var(--rule);
  align-items: start;
}
.case:last-child { border-bottom: var(--rule); }
.case .case-num { font-family: "Instrument Serif", Georgia, serif; font-size: 36px; line-height: 1; color: var(--accent); padding-top: 6px; }
.case .case-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.case .case-meta .tag { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.case .case-title { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.08; margin: 0 0 14px; letter-spacing: -0.005em; }
.case .case-body { font-size: 15px; line-height: 1.65; color: var(--ink); margin: 0 0 18px; max-width: 56ch; }
.case .case-link { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; transition: color .2s ease, border-color .2s ease; }
.case .case-link:hover { color: var(--accent); border-color: var(--accent); }
.case .case-outcomes { font-size: 13px; line-height: 1.65; color: var(--muted); padding-top: 6px; }
.case .case-outcomes .k { font-family: "Instrument Serif", Georgia, serif; color: var(--accent); font-size: 28px; line-height: 1; display: block; margin-bottom: 4px; }
.case .case-outcomes li { margin-bottom: 14px; list-style: none; }
.case .case-outcomes ul { padding: 0; margin: 0; }
@media (max-width: 900px) {
  .case { grid-template-columns: 1fr; gap: 20px; }
  .case .case-num { font-size: 24px; }
  .case .case-outcomes { border-top: var(--rule); padding-top: 18px; }
}

/* ---------- CASE STUDY DETAIL (work page) ---------- */
.case-detail { padding: clamp(56px, 7vw, 96px) 0; border-top: var(--rule); }
.case-detail .case-index {
  font-family: "Instrument Serif", Georgia, serif;
  color: var(--accent);
  font-size: 36px; line-height: 1;
  margin-bottom: 18px;
}
.case-detail .case-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.case-detail .case-meta .tag {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.case-detail-header {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 5vw, 72px); align-items: start;
  padding-bottom: clamp(32px, 5vw, 56px);
  border-bottom: var(--rule);
  margin-bottom: clamp(32px, 5vw, 56px);
}
.case-detail-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  max-width: 18ch;
}
.case-detail-title em { font-style: italic; color: var(--accent); }
.case-detail-lede { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0; max-width: 48ch; }

.case-outcomes-card {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 28px;
}
.case-outcomes-card .oc-label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.case-outcomes-card ul { list-style: none; padding: 0; margin: 0; }
.case-outcomes-card li { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.case-outcomes-card li:last-child { border-bottom: 0; padding-bottom: 0; }
.case-outcomes-card .k { font-family: "Instrument Serif", Georgia, serif; color: var(--ink); font-size: 24px; line-height: 1; display: block; margin-bottom: 6px; }
.case-outcomes-card .d { font-size: 13px; line-height: 1.5; color: var(--muted); }

.case-block {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  padding: clamp(28px, 4vw, 48px) 0;
  border-top: var(--rule);
}
.case-block:first-of-type { border-top: 0; padding-top: 0; }
.case-block .block-label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}
.case-block .block-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 32px);
  line-height: 1.15;
  margin: 10px 0 0; max-width: 14ch;
}
.case-block .block-body p {
  font-size: 15px; line-height: 1.7; color: var(--ink); margin: 0 0 18px;
  max-width: 62ch;
}
.case-block .block-body p:last-child { margin-bottom: 0; }
.case-block .block-body ul {
  font-size: 15px; line-height: 1.7; color: var(--ink);
  padding-left: 20px; margin: 14px 0; max-width: 60ch;
}
.case-block .block-body li { padding: 3px 0; }

@media (max-width: 900px) {
  .case-detail-header { grid-template-columns: 1fr; gap: 28px; }
  .case-block { grid-template-columns: 1fr; gap: 14px; }
  .case-block .block-title { max-width: 24ch; }
}

/* Pullquote inline (light variant) */
.pullquote-light {
  border-left: 3px solid var(--accent);
  padding: 8px 0 8px 24px;
  margin: 28px 0;
  max-width: 54ch;
}
.pullquote-light p {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}

/* ---------- Writing teaser + reading card ---------- */
.writing-teaser {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(32px, 5vw, 64px);
  align-items: stretch;
}
.writing-teaser .col { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 8px; }
.writing-teaser p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0 0 22px; max-width: 48ch; }

.reading-card {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  position: relative;
}
.reading-card .rc-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.reading-card .rc-label .pip { width: 6px; height: 6px; border-radius: 99px; background: var(--accent); }
.reading-card .rc-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 24px; line-height: 1.22; margin: 0 0 4px;
}
.reading-card .rc-author { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.reading-card .rc-note {
  font-size: 13px; line-height: 1.55; color: var(--ink);
  padding-top: 14px; border-top: 1px dashed var(--line);
  margin: 0;
}
@media (max-width: 900px) {
  .writing-teaser { grid-template-columns: 1fr; gap: 24px; }
}

/* ================================================================
   WRITING PAGE
   ================================================================ */

/* Writing stream section (essays, thinking, currently enjoying) */
.writing-stream { padding: clamp(64px, 7vw, 112px) 0; border-top: var(--rule); }
.writing-stream .stream-head {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(28px, 4vw, 48px);
  align-items: start;
}
.writing-stream .stream-head .num { font-size: 11px; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }
.writing-stream .stream-head .stream-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
  max-width: 20ch;
}
.writing-stream .stream-head .stream-title em { font-style: italic; color: var(--accent); }
.writing-stream .stream-head .stream-lede { font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 58ch; margin: 0; }
.writing-stream .stream-footer { padding-top: 24px; margin-top: clamp(24px, 3vw, 40px); border-top: var(--rule); }
@media (max-width: 900px) {
  .writing-stream .stream-head { grid-template-columns: 1fr; gap: 16px; }
}

/* Reading list cards */
.reading-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.reading-item {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.reading-item .rl-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
  padding-bottom: 12px; margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.reading-item .rl-status .pip { width: 6px; height: 6px; border-radius: 99px; background: var(--accent); }
.reading-item .rl-status.done { color: var(--muted); }
.reading-item .rl-status.done .pip { background: var(--muted); }
.reading-item .rl-status.next { color: var(--muted); }
.reading-item .rl-status.next .pip { background: transparent; border: 1px solid var(--muted); }
.reading-item .rl-status.learning { color: var(--accent); }
.reading-item .rl-status.learning .pip {
  background: transparent; border: 1px solid var(--accent);
  box-shadow: inset 0 0 0 2px var(--paper);
}
.reading-item .rl-status.event { color: var(--accent); }
.reading-item .rl-status.event .pip {
  background: var(--accent); border-radius: 1px;
}
.reading-item .rl-kind {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.reading-item .rl-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 22px; line-height: 1.22;
  margin: 0;
}
.reading-item .rl-author {
  font-size: 13px; color: var(--muted); margin: 0;
}
.reading-item .rl-note {
  font-size: 13px; line-height: 1.55; color: var(--ink);
  padding-top: 12px; border-top: 1px dashed var(--line);
  margin: 8px 0 0;
}

@media (max-width: 900px) {
  .reading-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .reading-list { grid-template-columns: 1fr; }
}

/* Thinking notes — sticky-note aesthetic */
.note-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 12px 0 28px;
}
.note {
  position: relative;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 40px 24px 26px;
  box-shadow:
    0 1px 0 rgba(26, 20, 17, 0.04),
    0 10px 24px -12px rgba(26, 20, 17, 0.18);
  transition: transform .28s ease, box-shadow .28s ease;
}
.note:nth-child(4n+1) { transform: rotate(-0.8deg); background: var(--soft); }
.note:nth-child(4n+2) { transform: rotate(0.6deg); background: #F3EADA; }
.note:nth-child(4n+3) { transform: rotate(-0.4deg); background: var(--paper); }
.note:nth-child(4n)   { transform: rotate(0.9deg); background: #EFE2CC; }
.note:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow:
    0 2px 0 rgba(26, 20, 17, 0.05),
    0 18px 36px -14px rgba(26, 20, 17, 0.22);
}
/* paper-tape strip at top */
.note::before {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 64px; height: 18px;
  background: rgba(184, 86, 63, 0.18);
  border: 1px solid rgba(184, 86, 63, 0.22);
  border-radius: 1px;
  box-shadow: 0 1px 3px rgba(26, 20, 17, 0.08);
}
.note:nth-child(4n+2)::before { transform: translateX(-50%) rotate(1.5deg); left: 38%; }
.note:nth-child(4n+3)::before { transform: translateX(-50%) rotate(-2deg); left: 62%; }
.note:nth-child(4n)::before   { transform: translateX(-50%) rotate(0.5deg); left: 42%; }
.note .n-date {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.note .n-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 22px; line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
  color: var(--ink);
}
.note .n-body {
  font-size: 14px; line-height: 1.6; color: var(--ink);
  margin: 0;
}
@media (max-width: 900px) {
  .note-list { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
  .note-list { grid-template-columns: 1fr; gap: 28px; }
  .note { transform: rotate(0deg) !important; }
}

/* Essay cards */
.essay-list { display: grid; gap: 0; }
.essay-card {
  display: grid; grid-template-columns: 140px minmax(0, 1fr) 120px;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 4vw, 40px) 0;
  border-top: var(--rule);
  align-items: start;
}
.essay-card:last-child { border-bottom: var(--rule); }
.essay-card .e-date {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); padding-top: 10px;
}
.essay-card .e-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
}
.essay-card .e-title a {
  transition: color .2s ease;
}
.essay-card .e-title a:hover { color: var(--accent); }
.essay-card .e-excerpt {
  font-size: 15px; line-height: 1.65; color: var(--ink);
  margin: 0 0 14px; max-width: 58ch;
}
.essay-card .e-meta {
  font-size: 12px; color: var(--muted);
  padding-top: 12px; text-align: right;
}
.essay-card .e-meta .arrow {
  display: inline-block;
  margin-top: 8px; font-size: 14px;
  color: var(--accent);
  transition: transform .2s ease;
}
.essay-card:hover .e-meta .arrow { transform: translateX(4px); }
.essay-card .draft-tag {
  display: inline-block;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
  padding: 3px 8px; border: 1px solid var(--accent); border-radius: 99px;
  margin-right: 10px;
}
@media (max-width: 700px) {
  .essay-card { grid-template-columns: 1fr; gap: 10px; }
  .essay-card .e-meta { padding-top: 0; text-align: left; }
}

/* ================================================================
   POST DETAIL PAGE
   ================================================================ */
.post-wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.post-head { padding: clamp(56px, 8vw, 96px) 0 clamp(32px, 4vw, 56px); }
.post-head .back-link {
  display: inline-block;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 40px;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px; transition: color .2s ease, border-color .2s ease;
}
.post-head .back-link:hover { color: var(--accent); border-color: var(--accent); }
.post-head .post-meta {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 24px;
}
.post-head .post-meta .draft-tag {
  font-size: 10px; color: var(--accent); font-weight: 500;
  padding: 3px 8px; border: 1px solid var(--accent); border-radius: 99px;
}
.post-head .post-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  max-width: 24ch;
}
.post-head .post-title em { font-style: italic; color: var(--accent); }
.post-head .post-subtitle {
  font-size: 18px; line-height: 1.55; color: var(--muted);
  margin: 0; max-width: 56ch;
}

.post-body { padding-bottom: clamp(56px, 7vw, 96px); border-bottom: var(--rule); }
.post-body p {
  font-size: 17px; line-height: 1.75; color: var(--ink);
  margin: 0 0 22px; max-width: 62ch;
}
.post-body h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 32px);
  line-height: 1.15;
  margin: 48px 0 18px;
  max-width: 28ch;
}
.post-body h3 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 22px; line-height: 1.2;
  margin: 36px 0 14px;
}
.post-body blockquote {
  margin: 32px 0;
  padding: 8px 0 8px 24px;
  border-left: 3px solid var(--accent);
  max-width: 56ch;
}
.post-body blockquote p {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 22px; line-height: 1.4;
  margin: 0; color: var(--ink);
}
.post-body em { font-style: italic; }
.post-body strong { font-weight: 500; }
.post-body ul, .post-body ol {
  font-size: 17px; line-height: 1.7; color: var(--ink);
  padding-left: 22px; margin: 0 0 22px; max-width: 60ch;
}
.post-body li { padding: 3px 0; }
.post-body hr {
  border: 0; height: 1px; background: var(--line);
  margin: 48px 0; max-width: 120px;
}

.post-foot {
  padding: clamp(40px, 5vw, 64px) 0;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}
.post-foot .ft-label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.post-foot .ft-link {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 18px; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.post-foot .ft-link:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- About prose ---------- */
.about-prose {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(32px, 5vw, 56px) 0;
}
.about-prose + .about-prose { border-top: var(--rule); }
.about-prose .ap-label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.about-prose .ap-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.12;
  margin: 10px 0 0;
  max-width: 18ch;
}
.about-prose .ap-body p {
  font-size: 16px; line-height: 1.7; color: var(--ink);
  margin: 0 0 18px; max-width: 62ch;
}
.about-prose .ap-body p:last-child { margin-bottom: 0; }
.about-prose .ap-body ul { font-size: 15px; line-height: 1.7; color: var(--ink); padding-left: 20px; }
.about-prose .ap-body li { padding: 4px 0; }

@media (max-width: 900px) {
  .about-prose { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- Dark band (pull-quote / CTA slab) ---------- */
.dark-slab {
  background: var(--dark-bg);
  color: var(--paper);
  padding: clamp(72px, 9vw, 128px) 0;
  border-top: var(--rule);
}
.dark-slab .eyebrow { color: var(--dark-muted); }
.dark-slab .ds-quote {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 24px 0 0;
  max-width: 22ch;
}
.dark-slab .ds-quote em { font-style: italic; color: var(--dark-accent); }
.dark-slab .ds-attrib {
  font-size: 13px; color: var(--dark-muted);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: 32px;
}
.dark-slab .ds-attrib span { color: var(--paper); }

/* ---------- Contact band ---------- */
.contact {
  background: var(--dark-bg);
  color: var(--paper);
  padding: clamp(72px, 9vw, 128px) 0;
  border-top: var(--rule);
}
.contact .eyebrow { color: var(--dark-muted); }
.contact .title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: 18px 0 36px;
  max-width: 22ch;
}
.contact .title em { font-style: italic; color: var(--dark-accent); }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  border-top: 1px solid var(--dark-soft);
  padding-top: 40px; margin-top: 40px;
}
.contact-block .label { color: var(--dark-muted); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.contact-block .link {
  display: inline-block;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 24px; line-height: 1.2;
  color: var(--paper);
  margin-top: 12px;
  border-bottom: 1px solid var(--dark-accent);
  padding-bottom: 3px;
  word-break: break-word;
  transition: color .2s ease;
}
.contact-block .link:hover { color: var(--dark-accent); }
.contact-block .sub { color: var(--dark-muted); font-size: 13px; line-height: 1.55; margin-top: 10px; max-width: 36ch; }
@media (max-width: 700px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ================================================================
   WORK INDEX · two feature cards side-by-side
   ================================================================ */
.work-index { padding: clamp(56px, 7vw, 96px) 0; border-top: var(--rule); }
.work-index .wi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
}
.work-feature-card {
  position: relative;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(36px, 4vw, 56px);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.work-feature-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -28px rgba(26, 20, 17, 0.28);
}
.work-feature-card .wfc-num {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(140px, 18vw, 220px);
  line-height: 0.85;
  color: var(--line);
  position: absolute;
  top: -12px; right: 8px;
  letter-spacing: -0.04em;
  user-select: none;
  pointer-events: none;
  transition: color .25s ease;
}
.work-feature-card:hover .wfc-num { color: var(--accent); opacity: 0.32; }
.work-feature-card .wfc-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px;
  position: relative; z-index: 1;
}
.work-feature-card .wfc-meta .tag {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.work-feature-card .wfc-meta .tag + .tag::before {
  content: "·"; margin-right: 16px; color: var(--line);
}
.work-feature-card .wfc-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.005em;
  margin: 0 0 18px;
  max-width: 18ch;
  position: relative; z-index: 1;
}
.work-feature-card .wfc-title em { font-style: italic; color: var(--accent); }
.work-feature-card .wfc-lede {
  font-size: 15px; line-height: 1.65; color: var(--ink);
  margin: 0 0 28px;
  max-width: 38ch;
  position: relative; z-index: 1;
}
.work-feature-card .wfc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 22px 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  margin-bottom: 28px;
  position: relative; z-index: 1;
}
.work-feature-card .wfc-stat .k {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1;
  color: var(--ink);
  display: block; margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.work-feature-card .wfc-stat .d {
  font-size: 11px; line-height: 1.4;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.work-feature-card .wfc-link {
  margin-top: auto;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 18px; color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px; align-self: flex-start;
  transition: color .2s ease, border-color .2s ease;
  position: relative; z-index: 1;
}
.work-feature-card .wfc-link:hover { color: var(--accent); border-color: var(--accent); }
.work-feature-card .wfc-link .arr {
  display: inline-block; margin-left: 6px; color: var(--accent);
  transition: transform .2s ease;
}
.work-feature-card:hover .wfc-link .arr { transform: translateX(4px); }

@media (max-width: 900px) {
  .work-index .wi-grid { grid-template-columns: 1fr; }
  .work-feature-card .wfc-num { font-size: 160px; top: -6px; }
  .work-feature-card .wfc-stats { grid-template-columns: 1fr 1fr; }
}

/* More work note */
.work-more {
  padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 96px);
  border-top: var(--rule);
}
.work-more-grid {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.work-more-grid .wm-label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.work-more-grid .wm-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15;
  margin: 0 0 14px;
  max-width: 28ch;
}
.work-more-grid p {
  font-size: 15px; line-height: 1.65; color: var(--muted);
  margin: 0 0 18px; max-width: 56ch;
}
@media (max-width: 900px) {
  .work-more-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ================================================================
   CASE DETAIL PAGE · editorial hero + artifacts slab + next-case
   ================================================================ */
.case-hero {
  padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 72px);
  position: relative;
  overflow: hidden;
}
.case-hero .ch-back {
  display: inline-block;
  font-size: 12px; letter-spacing: 0.08em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  margin-bottom: 40px;
  transition: color .2s ease, border-color .2s ease;
}
.case-hero .ch-back:hover { color: var(--accent); border-color: var(--accent); }
.case-hero .ch-num {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(160px, 22vw, 280px);
  line-height: 0.82;
  color: var(--soft);
  position: absolute;
  top: clamp(20px, 4vw, 60px); right: clamp(-20px, -1vw, 20px);
  letter-spacing: -0.04em;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
.case-hero .wrap { position: relative; z-index: 1; }
.case-hero .ch-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.case-hero .ch-meta .tag {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.case-hero .ch-meta .tag + .tag::before {
  content: "·"; margin-right: 16px; color: var(--line);
}
.case-hero .ch-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  max-width: 20ch;
}
.case-hero .ch-title em { font-style: italic; color: var(--accent); }
.case-hero .ch-lede {
  font-size: 18px; line-height: 1.6; color: var(--ink);
  margin: 0; max-width: 58ch;
}

/* Outcomes strip under hero */
.outcomes-strip {
  padding: clamp(32px, 4vw, 48px) 0;
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.outcomes-strip .os-grid {
  display: grid; grid-template-columns: 200px repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px); align-items: baseline;
}
.outcomes-strip .os-label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.outcomes-strip .os-stat .k {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(32px, 3.4vw, 44px); line-height: 1;
  color: var(--ink);
  display: block; margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.outcomes-strip .os-stat .d {
  font-size: 13px; line-height: 1.5; color: var(--muted);
}
@media (max-width: 900px) {
  .outcomes-strip .os-grid { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
  .outcomes-strip .os-label { grid-column: 1 / -1; }
}

/* Artifacts produced — dark editorial slab, no imagery needed */
.artifacts-slab {
  background: var(--dark-bg);
  color: var(--paper);
  padding: clamp(64px, 8vw, 112px) 0;
  border-top: var(--rule);
}
.artifacts-slab .as-head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.artifacts-slab .as-label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dark-muted); font-weight: 500;
  margin-bottom: 16px;
}
.artifacts-slab .as-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 48px); line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 18ch;
}
.artifacts-slab .as-title em { font-style: italic; color: var(--dark-accent); }
.artifacts-slab .as-lede {
  font-size: 15px; line-height: 1.7; color: var(--dark-muted);
  margin: 0; max-width: 46ch;
}
.artifacts-list {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--dark-soft);
}
.artifact-item {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--dark-soft);
  align-items: start;
}
.artifact-item:nth-child(odd) { padding-right: clamp(24px, 4vw, 56px); border-right: 1px solid var(--dark-soft); }
.artifact-item:nth-child(even) { padding-left: clamp(24px, 4vw, 56px); }
.artifact-item .a-num {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 34px; line-height: 1;
  color: var(--dark-accent);
  letter-spacing: -0.01em;
}
.artifact-item .a-name {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 22px; line-height: 1.2;
  margin: 0 0 8px;
  color: var(--paper);
}
.artifact-item .a-desc {
  font-size: 14px; line-height: 1.6;
  color: var(--dark-muted);
  margin: 0;
}
@media (max-width: 800px) {
  .artifacts-slab .as-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 32px; }
  .artifacts-list { grid-template-columns: 1fr; }
  .artifact-item:nth-child(odd),
  .artifact-item:nth-child(even) { padding-left: 0; padding-right: 0; border-right: 0; }
}

/* Next case footer */
.next-case {
  padding: clamp(56px, 7vw, 96px) 0;
  border-top: var(--rule);
}
.next-case .nc-grid {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}
.next-case .nc-label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.next-case .nc-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 24ch;
}
.next-case .nc-title em { font-style: italic; color: var(--accent); }
.next-case .nc-title a { transition: color .2s ease; }
.next-case .nc-title a:hover { color: var(--accent); }
.next-case .nc-arrow {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 40px; color: var(--accent);
  line-height: 1;
  transition: transform .25s ease;
}
.next-case:hover .nc-arrow { transform: translateX(6px); }
@media (max-width: 800px) {
  .next-case .nc-grid { grid-template-columns: 1fr; gap: 14px; }
  .next-case .nc-arrow { display: none; }
}

/* ---------- Footer ---------- */
.foot { padding: 36px 0; font-size: 12px; color: var(--muted); }
.foot-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: baseline; }
.foot-brand { font-family: "Instrument Serif", Georgia, serif; font-size: 15px; color: var(--ink); }
.foot-brand em { font-style: italic; }
.foot-links { display: flex; gap: 20px; }
.foot-links a { color: var(--muted); transition: color .2s ease; }
.foot-links a:hover { color: var(--accent); }