/* Field notes: a designer's notebook. Editorial column on the left, handwritten margin notes on the right. */
:root {
  --paper: #F3EEE4;
  --ink: #1F2A22;
  --moss: #4F5E42;
  --note: #B0372A;
  --blush: #EBD5CF;
  --rule: #C4C1B2;
  --band: #1F2A22;
  --band-fg: #F3EEE4;
  --band-muted: #EBD5CF;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-note: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --gutter: 20px;
  --leading: 1.75;
  --max: 1200px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171E19; --ink: #ECE6D8; --moss: #A9B49A; --note: #E58A78; --blush: #2E2724;
    --rule: #3A453C; --band: #222B24; --band-fg: #ECE6D8; --band-muted: #E9C9C0;
    --leading: 1.85;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #171E19; --ink: #ECE6D8; --moss: #A9B49A; --note: #E58A78; --blush: #2E2724;
  --rule: #3A453C; --band: #222B24; --band-fg: #ECE6D8; --band-muted: #E9C9C0;
  --leading: 1.85;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 300;
  line-height: var(--leading);
}
img { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--note); outline-offset: 3px; border-radius: 2px; }
p, ul, ol, dl, h1, h2, h3, figure { margin: 0; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 20;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 4px;
}
.skip:focus { top: calc(16px + env(safe-area-inset-top, 0px)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type */
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
h1 { font-size: clamp(3rem, 7.2vw, 6rem); line-height: 1; letter-spacing: -0.02em; }
h2, .h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
h3 { font-size: clamp(1.6rem, 2.4vw, 2.125rem); line-height: 1.15; }
em { font-style: italic; }
.lead { font-size: 1.25rem; line-height: 1.65; max-width: 42rem; }
.label { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em; color: var(--moss); line-height: 1.4; }
.note {
  font-family: var(--font-note); font-weight: 500; font-size: 1.65rem; line-height: 1.15;
  color: var(--note); transform: rotate(-2deg); transform-origin: left center; max-width: 18rem;
}
strong { font-weight: 500; }

/* header + footer */
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 32px; flex-wrap: wrap; }
.brand { font-family: var(--font-display); font-size: 1.75rem; text-decoration: none; }
.site-nav ul { list-style: none; padding: 0; display: flex; gap: 28px; font-weight: 500; font-size: 1rem; }
.site-nav a { text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; }
.site-footer .wrap { padding-block: 0 56px; }
.site-footer .inner { border-top: 1px solid var(--ink); padding-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.site-footer ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; }

/* buttons */
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px;
  border-radius: 999px; border: 1px solid var(--ink); text-decoration: none;
  font-weight: 500; font-size: 1rem;
}
.btn.primary { background: var(--ink); color: var(--paper); }
.btn:hover { text-decoration: underline; }
.email { font-size: 1rem; color: var(--moss); user-select: all; }

/* homepage */
.hero .wrap { display: grid; gap: 36px; padding-block: 112px 152px; }
.hero h1 { max-width: 15ch; }
.hero .note { margin-left: clamp(0px, 16vw, 220px); }
.section { padding-block: 0 152px; }
.section > .wrap { display: grid; gap: 64px; }
.card {
  position: relative; border-top: 1px solid var(--ink); padding-top: 56px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; align-items: start;
}
.card-text { display: grid; gap: 22px; min-width: 0; }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card:hover h3 a { text-decoration: underline; }
.card .more { font-weight: 500; font-size: 1rem; text-decoration: underline; }
.card .note { font-size: 1.5rem; }

.principles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.principles li { border-top: 1px solid var(--ink); padding-top: 32px; display: grid; gap: 16px; align-content: start; }

.band { background: var(--band); color: var(--band-fg); }
.band .wrap { padding-block: 144px; display: grid; gap: 28px; }
.band .label { color: var(--band-muted); }
.band p:not(.label) { max-width: 36rem; }

.closing .wrap { padding-block: 144px 152px; display: grid; gap: 32px; }
.closing .h2 { max-width: 24ch; }

/* diagrams */
.diagram {
  background: var(--blush); border-radius: 4px; padding: 36px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; min-width: 0;
}
.diagram .col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.diagram ul, .diagram ol { list-style: none; padding: 0; display: grid; gap: 10px; }
.field {
  border: 1px solid var(--moss); border-radius: 4px; padding: 8px 12px;
  font-size: 0.9375rem; background: var(--paper); color: var(--moss);
}
.after .field { border: 2px solid var(--ink); color: var(--ink); font-weight: 500; }
.chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.chips span { aspect-ratio: 1.4; border: 1px solid var(--moss); border-radius: 3px; background: var(--paper); }
.qs li { counter-increment: q; }
.diagram figcaption { grid-column: 1 / -1; font-size: 0.9375rem; }
.diagram .note { font-size: 1.4rem; }

/* case studies */
.cs-head .wrap { padding-block: 72px 120px; display: grid; gap: 32px; }
.back { font-weight: 500; font-size: 1rem; }
.cs-head h1 { max-width: 18ch; font-size: clamp(2.75rem, 6vw, 5.25rem); }
.glance { border-top: 1px solid var(--rule); max-width: var(--max); }
.glance div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 24px; padding-block: 18px; border-bottom: 1px solid var(--rule); }
.glance dt { font-size: 0.875rem; font-weight: 500; color: var(--moss); padding-top: 3px; }
.glance dd { margin: 0; }
.cs-figure .wrap { padding-block: 0 136px; }

.cs-sec .wrap { padding-block: 0 128px; }
.cs-grid {
  border-top: 1px solid var(--ink); padding-top: 56px;
  display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); column-gap: 80px; row-gap: 32px;
  grid-template-areas: "title aside" "body aside";
}
.cs-grid h2 { grid-area: title; }
.cs-grid .aside { grid-area: aside; padding-top: 24px; }
.cs-grid .body { grid-area: body; display: grid; gap: 26px; min-width: 0; }
.body ul, .body ol { padding-left: 1.4em; display: grid; gap: 14px; }
.body h3 { margin-top: 20px; }
.callout { background: var(--blush); border-radius: 4px; padding: 28px 28px; display: grid; gap: 12px; }
.callout h4 { margin: 0; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
th, td { text-align: left; vertical-align: top; padding: 16px 16px 16px 0; border-top: 1px solid var(--rule); }
th { font-size: 0.875rem; font-weight: 500; color: var(--moss); }
tbody th { color: var(--ink); font-size: 1rem; font-weight: 500; }
.next .wrap { padding-block: 0 152px; }
.next .inner { border-top: 1px solid var(--ink); padding-top: 56px; display: grid; gap: 16px; }
.next a.h2 { text-decoration: none; }
.next a.h2:hover { text-decoration: underline; }

/* about */
.timeline { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.timeline li { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 24px; padding-block: 18px; border-bottom: 1px solid var(--rule); }

@media (max-width: 900px) {
  .card { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .principles { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cs-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "aside" "body"; }
  .cs-grid .aside { padding-top: 0; }
}
@media (max-width: 560px) {
  .hero .wrap { padding-block: 64px 104px; }
  .section, .cs-sec .wrap, .cs-figure .wrap { padding-bottom: 104px; }
  .band .wrap, .closing .wrap { padding-block: 104px; }
  .diagram { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .glance div, .timeline li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .site-nav ul { gap: 20px; }
  .hero .note { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* case study hierarchy: chapters (h2) hold sub-sections (h3) */
.in-short .wrap { padding-block: 0 104px; }
.short-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.short-grid > div { border-top: 1px solid var(--ink); padding-top: 24px; display: grid; gap: 12px; align-content: start; }
.short-grid h2.label { font-family: var(--font-body); font-size: 0.875rem; }
.toc .wrap { padding-block: 0 120px; display: grid; gap: 16px; }
.toc ol { counter-reset: part; list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 32px; font-family: var(--font-display); font-size: 1.75rem; line-height: 1.2; }
.toc li { counter-increment: part; display: flex; gap: 10px; align-items: baseline; }
.toc li::before { content: "Part " counter(part); font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; color: var(--moss); }
.toc a { text-decoration-thickness: 1px; }
.chapter { scroll-margin-top: 24px; }
.chapter .wrap { padding-block: 0 144px; display: grid; gap: 80px; }
.chapter-head { border-top: 3px solid var(--ink); padding-top: 40px; display: grid; gap: 16px; }
.chapter-head h2 { font-size: clamp(3rem, 6vw, 4.75rem); line-height: 1; }
.chapter-head .lead { max-width: 40rem; }
.sub.cs-grid { border-top-color: var(--rule); padding-top: 40px; }
.cs-grid > h3 { grid-area: title; font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.chapter .sub + .sub { margin-top: -16px; }
@media (max-width: 900px) {
  .short-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .chapter .wrap { gap: 56px; }
}
@media (max-width: 560px) {
  .chapter .wrap { padding-bottom: 104px; }
  .in-short .wrap { padding-bottom: 72px; }
  .toc .wrap { padding-bottom: 88px; }
  .toc ol { flex-direction: column; font-size: 1.5rem; }
}

/* sub-sub headings inside a section: heading then paragraph */
.body h4 { font-family: var(--font-body); font-weight: 500; font-size: 1.125rem; line-height: 1.4; margin: 12px 0 -14px; }
.callout h4 { margin: 0; }