/* ============================================================
   Warm editorial — ink on cream, terracotta and teal accents
   ============================================================ */

:root {
  --cream: #FDF8F3;
  --paper: #FFFDFB;
  --ink: #1B1B1E;
  --muted: #5F5A55;
  --terracotta: #C65F3E;
  --terracotta-soft: rgba(198, 95, 62, 0.10);
  --teal: #17786F;
  --teal-soft: rgba(23, 120, 111, 0.10);
  --sand: #EFE4D8;
  --line: rgba(27, 27, 30, 0.12);
  --shadow: 0 1px 2px rgba(27, 27, 30, .04), 0 8px 24px rgba(27, 27, 30, .05);
}

body {
  background: var(--cream);
  color: var(--ink);
}

/* ---------- headings ---------- */
h1, h2, h3, h4, .navbar-brand, .quarto-title-banner {
  font-family: Fraunces, Georgia, serif;
  letter-spacing: -0.015em;
}

h1.title { font-size: 2.5rem; line-height: 1.15; }

h2 {
  margin-top: 2.8rem;
  font-size: 1.6rem;
  position: relative;
  padding-left: 1rem;
}
h2::before {
  content: "";
  position: absolute;
  left: 0; top: .25em; bottom: .25em;
  width: 4px;
  border-radius: 2px;
  background: var(--terracotta);
}

h3 { font-size: 1.2rem; margin-top: 2rem; }

/* ---------- navbar ---------- */
.navbar {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line);
  font-family: Inter, system-ui, sans-serif;
}
.navbar-brand { font-weight: 600; font-size: 1.15rem; }
.navbar .nav-link { font-weight: 500; }

/* Quarto marks the navbar as a dark theme, which turns its text white —
   force it back to ink on our cream/paper bar. */
.navbar[data-bs-theme="dark"] .navbar-brand,
.navbar[data-bs-theme="dark"] .nav-link,
.navbar[data-bs-theme="dark"] .navbar-nav .nav-link,
.navbar[data-bs-theme="dark"] .quarto-navbar-tools a,
.navbar[data-bs-theme="dark"] .aa-DetachedSearchButtonIcon,
.navbar[data-bs-theme="dark"] .aa-DetachedSearchButtonPlaceholder {
  color: var(--ink) !important;
  opacity: 1;
}
.navbar[data-bs-theme="dark"] .nav-link:hover,
.navbar[data-bs-theme="dark"] .quarto-navbar-tools a:hover {
  color: var(--terracotta) !important;
}
.navbar .aa-DetachedSearchButton { border-color: var(--line); }

/* ---------- links ---------- */
a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--teal) !important; }

/* ============================================================
   Homepage hero
   ============================================================ */
.hero {
  background: linear-gradient(135deg, var(--sand) 0%, var(--cream) 55%, #F6E7DD 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2.6rem 2.4rem 2.2rem;
  margin: .5rem 0 3rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,95,62,.16), transparent 70%);
}
.hero .kicker {
  font-family: Inter, system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: .8rem;
}
.hero h1 {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.08;
  margin: 0 0 .9rem;
  max-width: 20ch;
}
.hero p {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 62ch;
  margin: 0;
}
.hero .hero-meta {
  margin-top: 1.4rem;
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-family: Inter, system-ui, sans-serif;
  font-size: .9rem;
  color: var(--muted);
}
.hero .hero-meta b { color: var(--ink); }

/* section label above the feed */
.feed-label {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.4rem;
}
.feed-label::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* ============================================================
   Listing (the feed)
   ============================================================ */
.quarto-listing { margin-top: .5rem; }

.quarto-post {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.1rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.quarto-post:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(198, 95, 62, .45);
}
.quarto-post .listing-title {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.45rem;
  line-height: 1.2;
  margin-bottom: .35rem;
}
.quarto-post .listing-title a { color: var(--ink) !important; text-decoration: none; }
.quarto-post:hover .listing-title a { color: var(--terracotta) !important; }
.quarto-post .listing-description {
  font-size: 1.02rem;
  color: var(--muted);
  line-height: 1.6;
}
.quarto-post .listing-date, .quarto-post .listing-author {
  font-family: Inter, system-ui, sans-serif;
  font-size: .82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* category pills, on cards and in the filter row */
.quarto-category, .listing-category {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: .74rem !important;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: lowercase;
  background: var(--teal-soft) !important;
  color: var(--teal) !important;
  border: none !important;
  border-radius: 20px !important;
  padding: .2rem .7rem !important;
  opacity: 1 !important;
}
.quarto-category:hover, .listing-category:hover {
  background: var(--terracotta-soft) !important;
  color: var(--terracotta) !important;
}

/* ============================================================
   Inside a post
   ============================================================ */
.quarto-title-block .quarto-title-banner { background: transparent; }

#title-block-header .description {
  font-size: 1.15rem;
  color: var(--muted);
  line-height: 1.55;
}

/* the one-line intuition box */
.intuition {
  border: none;
  border-left: 4px solid var(--teal);
  background: var(--teal-soft);
  padding: 1.1rem 1.3rem;
  margin: 1.8rem 0;
  font-size: 1.14rem;
  line-height: 1.6;
  border-radius: 0 10px 10px 0;
}

blockquote {
  border-left: 3px solid var(--sand);
  color: var(--muted);
  font-style: italic;
  padding-left: 1.1rem;
}

/* tables */
table {
  font-family: Inter, system-ui, sans-serif;
  font-size: .95rem;
}
thead th {
  border-bottom: 2px solid var(--line) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .78rem;
  color: var(--muted);
}
tbody tr:hover { background: rgba(239, 228, 216, .45); }

/* code */
code:not(.sourceCode) {
  background: var(--teal-soft);
  color: var(--teal);
  padding: .1rem .35rem;
  border-radius: 4px;
  font-size: .9em;
}
div.sourceCode {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* callouts — whiteboard check etc. */
.callout {
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  border-left-width: 4px !important;
  background: var(--paper);
  font-family: inherit;
}
.callout.callout-note { border-left-color: var(--terracotta) !important; }
.callout.callout-tip { border-left-color: var(--teal) !important; }
.callout-title {
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* prev / next */
.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 3.2rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  font-family: Inter, system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 500;
}
.chapter-nav p { margin: 0; }

/* table of contents */
#TOC, .sidebar nav[role="doc-toc"] {
  font-family: Inter, system-ui, sans-serif;
  font-size: .88rem;
}
nav[role="doc-toc"] ul > li > a.active {
  color: var(--terracotta) !important;
  border-left-color: var(--terracotta) !important;
}

/* footer */
.nav-footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
  font-family: Inter, system-ui, sans-serif;
  font-size: .85rem;
  color: var(--muted);
}

/* interactive widgets */
.cell-output-display .observablehq { margin: 1rem 0; }
form.oi-inputs, .observablehq input[type="range"] { max-width: 100%; }

@media (max-width: 600px) {
  .hero { padding: 1.8rem 1.4rem; border-radius: 14px; }
  h1.title { font-size: 2rem; }
}