/* ================================================================== *
 *  QUIET — the calm document.
 *
 *  Notion-adjacent, but stripped to the bone. Crisp white, a friendly
 *  humanist grotesque (Hanken Grotesk), generous air, soft gray
 *  furniture, a single restrained blue. Looks like it took ten minutes;
 *  secretly measured to the pixel.
 * ================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Newsreader:ital,opsz@1,6..72&display=swap");

:root {
  --bg: #ffffff;
  --bg-soft: #f7f7f5;
  --text: #2c2c2b;
  --text-soft: #6b6b67;
  --text-faint: #9b9b96;
  --rule: #ededea;
  --accent: #2f6feb;
  --accent-soft: #bcd2fb;
  --accent-wash: #2f6feb14;
  --accent-contrast: #ffffff;
  --selection-bg: #d7e6fd;
  --selection-text: #2c2c2b;

  --font-display: "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-ui: "Hanken Grotesk", system-ui, sans-serif;
  /* a single italic serif accent — for deks/sidenotes only, a Notion-ish touch */
  --sidenote-font: "Hanken Grotesk", system-ui, sans-serif;

  --measure: 35rem;
  --gutter: 14rem;
  --gutter-gap: 3rem;

  --name-size: 2.5rem;
  --name-weight: 700;
  --name-tracking: -0.025em;
  --title-size: 2.3rem;
  --title-weight: 700;
  --title-tracking: -0.025em;
  --wordmark-weight: 700;
  --wordmark-tracking: -0.02em;
  --prose-size: 1.08rem;
  --prose-leading: 1.75;
  --dek-style: normal;

  --ui-bg: #ffffff;
  --ui-text: #2c2c2b;
  --ui-border: #e6e6e2;
  --ui-radius: 8px;
  --ui-shadow: 0 10px 28px -8px #1d1d1d1f, 0 2px 6px -2px #1d1d1d14;
}

html.dark {
  --bg: #191919;
  --bg-soft: #202020;
  --text: #e9e8e6;
  --text-soft: #a3a29e;
  --text-faint: #74736f;
  --rule: #2e2e2c;
  --accent: #6f9cff;
  --accent-soft: #38455f;
  --accent-wash: #6f9cff1a;
  --accent-contrast: #15151a;
  --selection-bg: #2c3a52;
  --selection-text: #e9e8e6;

  --ui-bg: #252523;
  --ui-text: #e9e8e6;
  --ui-border: #383836;
  --ui-shadow: 0 12px 36px -10px #00000066;
}

/* the dek gets a touch of serif italic — the one warm note in a cool room */
.article-dek,
.index-intro {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--text-soft);
}

/* Notion-ish: roomy paragraphs, soft hover on list rows */
.post-item a {
  border-radius: 8px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin: 0 -0.75rem;
  border-top: none;
}
.post-list {
  border-top: 1px solid var(--rule);
  padding-top: 0.4rem;
}
.post-item:last-child a {
  border-bottom: none;
}
.post-item a:hover {
  background: var(--bg-soft);
}

/* a slim accent block to the left of the essay title — Notion callout DNA */
.article-title {
  position: relative;
}

/* sidenote as a soft gray note, no fuss */
.sidenote {
  font-size: 0.8rem;
  color: var(--text-faint);
}
.sidenote-num {
  font-weight: 600;
}

.prose a:not(.rw) {
  color: var(--accent);
  text-decoration-color: var(--accent-soft);
  text-underline-offset: 3px;
}

.fn {
  font-weight: 600;
}