/* Dan Grafham · Field Notes — shared chrome.
   Canonical palette + structural styles for every page. Each page links this once;
   per-essay <style> blocks carry ONLY their bespoke component CSS (cards, tables,
   grids, etc.). Deliberate per-page deviations (e.g. a narrower reading column, a
   title-length-tuned h1 size) live as explicit overrides in that page's own <style>. */

:root {
  --bg: #0a0a0a;
  --surface: #111111;
  --border: #1e1e1e;
  --amber: #f5a623;
  --amber-dim: #a86f12;
  --amber-faint: rgba(245,166,35,0.06);
  --text: #d4d0c8;
  --muted: #666;
  --white: #f0ece0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  line-height: 1.75;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(245,166,35,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,166,35,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* Canonical content column. Pages that want a narrower reading measure (the newest
   essays) or a tighter bio column (about) set their own .container max-width override. */
.container {
  max-width: 860px;
  margin: 0 auto;
  padding: 60px 24px 100px;
  position: relative;
  z-index: 1;
}

header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 48px;
  margin-bottom: 64px;
}

.byline-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.05em;
}

.byline-top strong { color: var(--text); font-weight: 700; }

.avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.top-nav, .bottom-nav {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.top-nav { margin-bottom: 32px; }
.bottom-nav { margin-top: 48px; margin-bottom: 24px; }

.top-nav a, .bottom-nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.top-nav a:hover, .bottom-nav a:hover { color: var(--amber); }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Canonical h1 scale. Individual essays tune font-size to their title length via a
   one-line override in their own <style>; everything else here is shared. */
h1 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(40px, 7vw, 76px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  padding-bottom: 0.1em;
}

h1 span { color: var(--amber); }

.subtitle {
  color: var(--muted);
  font-size: 15px;
  max-width: 620px;
  line-height: 1.7;
}

/* Index essay listing */
.essays {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.month-heading {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--amber);
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 32px;
  margin-bottom: 12px;
}

.month-heading:first-child { margin-top: 0; }

.essay-link {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  padding: 28px 32px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, background 0.2s;
}

.essay-link:hover {
  border-left-color: var(--amber);
  background: #161616;
}

.essay-title {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 10px;
}

.essay-dek {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  max-width: 640px;
}

/* Article body */
.section { margin-bottom: 52px; }

.section-label {
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.section-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 22px;
}

.prose { margin-bottom: 20px; }
.prose:last-child { margin-bottom: 0; }
.prose em { color: var(--white); font-style: italic; }
.prose strong { color: var(--white); font-weight: 700; }

.pull {
  border-left: 3px solid var(--amber);
  padding: 24px 32px;
  margin: 40px 0;
  background: var(--amber-faint);
}

.pull-text {
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  line-height: 1.4;
  color: var(--white);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pull-text em { color: var(--amber); font-style: italic; }

.ladder {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  padding: 26px 32px;
  margin: 32px 0;
  font-size: 13px;
  line-height: 2;
  color: var(--text);
}

.ladder .rung { color: var(--white); }
.ladder .sep { color: var(--amber-dim); }
.ladder .arrow { color: var(--amber); }
.ladder .final { color: var(--amber); font-weight: 700; }

.closing {
  border-top: 1px solid var(--border);
  padding-top: 48px;
  margin-top: 64px;
}

.closing-pull {
  font-family: 'Inter', sans-serif;
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-bottom: 24px;
}

.closing-pull em { color: var(--amber); font-style: italic; }

.closing-prose {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
  max-width: 640px;
}

footer {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
  padding-top: 40px;
  border-top: 1px solid var(--border);
  margin-top: 48px;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.byline-top a, footer a, .prose a, .closing-prose a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(245,166,35,0.3);
}

.sep { color: var(--border); margin: 0 4px; }