:root {
  --surface:          #f9f9f7;
  --surface-dim:      #dadad8;
  --surface-low:      #f4f4f2;
  --surface-highest:  #e2e3e1;
  --surface-lowest:   #ffffff;
  --primary:          #000000;
  --primary-container:#3c3b3b;
  --primary-fixed:    #5f5e5e;
  --on-primary:       #e5e2e1;
  --on-surface:       #1a1a1a;
  --outline:          #777777;
  --highlight-rgb:    26, 26, 26;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface:          #111110;
    --surface-dim:      #2a2a28;
    --surface-low:      #1a1a18;
    --surface-highest:  #333331;
    --surface-lowest:   #0d0d0c;
    --primary:          #f0ede8;
    --primary-container:#c8c5c0;
    --primary-fixed:    #a8a5a0;
    --on-primary:       #111110;
    --on-surface:       #e8e5e0;
    --outline:          #888885;
    --highlight-rgb:    240, 237, 232;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 125%; } /* 20px base — scales all rem values including Shadow DOM */

body {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1rem;
  line-height: 1.8;
  font-feature-settings: "ss01" 1;
  max-width: 860px;
  margin: 3rem auto;
  padding: 0 2rem;
  color: var(--on-surface);
  background: var(--surface);
}

a { color: var(--primary); }
a:hover { color: var(--primary-fixed); }

.entry-body a[href^="http"]::after {
  content: "↗";
  font-size: 0.65em;
  vertical-align: super;
  margin-left: 0.15em;
  opacity: 0.5;
}

/* ── Header ─────────────────────────────────────── */
header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 3.5rem;
}

header h1 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

header h1 a { text-decoration: none; color: var(--primary); }

header nav a {
  margin-left: 1.5rem;
  font-family: 'Newsreader', Georgia, serif;
  font-variant-caps: all-small-caps;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--outline);
}

header nav a:hover,
header nav a.active { color: var(--primary); }

/* ── Entries ─────────────────────────────────────── */
.entry { margin-bottom: 4.5rem; }

.entry-meta {
  font-family: 'Newsreader', Georgia, serif;
  font-variant-caps: all-small-caps;
  font-size: 0.75rem;
  color: var(--outline);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}

.entry-meta a { color: var(--outline); text-decoration: none; }
.entry-meta a:hover { text-decoration: underline; }

.entry-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0.2rem 0 0.75rem;
}

.entry-title a { text-decoration: none; color: var(--primary); }
.entry-title a:hover { text-decoration: underline; }

.entry-body { font-size: 1rem; line-height: 1.8; }
.entry-body p:first-child { margin-top: 0; }
.entry-body p:last-child { margin-bottom: 0; }

/* Blockquotes — Paper Blocks with ambient "desk" shadow */
.entry-body blockquote {
  margin: 2rem 0;
  padding: 2rem;
  background: var(--surface-lowest);
  box-shadow: 0 2px 32px rgba(26,26,26,0.04);
  border-left: none;
  font-style: italic;
}

.entry-body blockquote p:first-child { margin-top: 0; }
.entry-body blockquote p:last-child  { margin-bottom: 0; }

/* Tags */
.tags {
  margin-top: 0.9rem;
  font-family: 'Newsreader', Georgia, serif;
  font-variant-caps: all-small-caps;
  font-size: 0.75rem;
  color: var(--outline);
}

.tags .tag { margin-right: 0.6rem; }
.tags a { color: var(--outline); text-decoration: none; }
.tags a:hover { text-decoration: underline; }

/* ── Pagination ──────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  padding: 1.25rem 1.5rem;
  background: var(--surface-low);
  font-family: 'Newsreader', Georgia, serif;
  font-variant-caps: all-small-caps;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.pagination a { text-decoration: none; color: var(--primary); }
.pagination a:hover { color: var(--primary-fixed); }
.pagination .placeholder { visibility: hidden; }

/* ── Search page ─────────────────────────────────── */
.search-page-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.75rem;
  color: var(--primary);
}

/* Bottom-stroke only, no box — mirrors title scale, greyed out */
#search-input {
  width: 100%;
  padding: 0.6rem 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  border: none;
  border-bottom: 1px solid var(--outline);
  border-radius: 0;
  margin-bottom: 2rem;
  background: transparent;
  outline: none;
  color: var(--outline);
}

#search-input::placeholder { color: var(--surface-dim); }
#search-input:focus { border-bottom: 2px solid var(--primary); color: var(--on-surface); }

#search-results .result { margin-bottom: 2.5rem; }

#search-results .result-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#search-results .result-date {
  font-family: 'Newsreader', Georgia, serif;
  font-variant-caps: all-small-caps;
  font-size: 0.75rem;
  color: var(--outline);
  margin-bottom: 0.25rem;
}

#search-results mark { background: rgba(var(--highlight-rgb), 0.15); color: inherit; padding: 0 2px; }

/* ── Footer ──────────────────────────────────────── */
footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 5rem;
  margin-left: -2rem;
  margin-right: -2rem;
  padding: 1.5rem 2rem;
  background: var(--surface-low);
  font-family: 'Newsreader', Georgia, serif;
  font-variant-caps: all-small-caps;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--outline);
}

footer p {
  margin: 0;
  line-height: 1.6;
}

footer .footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

footer a {
  color: var(--outline);
  text-decoration: underline;
}

footer a:hover { color: var(--primary); }

/* ── Citations ───────────────────────────────────── */
.cite {
  cursor: pointer;
  border-bottom: 1px dotted var(--outline);
}

#cite-dialog {
  max-width: 36rem;
  width: calc(100% - 2rem);
  padding: 1.25rem 1.5rem;
  background: var(--surface-lowest);
  color: var(--on-surface);
  border: 1px solid #c6c6c6;
  border-radius: 0;
  box-shadow: 0 2px 32px rgba(26,26,26,0.07);
}

#cite-dialog::backdrop {
  background: rgba(0,0,0,0.25);
}

#cite-ref p {
  margin: 0;
  line-height: 1.6;
  font-size: 0.9rem;
}

#cite-ref p + p {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--surface-highest);
}

.cite-close {
  float: right;
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  color: var(--outline);
}

.cite-close:hover { color: var(--primary); }

/* ── Entry footer & feed separator ──────────────── */
.feed-entry { margin-bottom: 0; }
.feed-entry:last-of-type { margin-bottom: 2rem; }

.entry-footer {
  display: flex;
  gap: 1.5rem;
  padding: 1rem 0 2.5rem;
}

article:only-of-type .entry-footer {
  border-bottom: 1px solid var(--outline);
}

.feed-entry + .feed-entry {
  border-top: 1px solid var(--outline);
  padding-top: 2.5rem;
}

.entry-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  padding: 0;
  font-family: 'Newsreader', Georgia, serif;
  font-variant-caps: all-small-caps;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--outline);
  cursor: pointer;
}

.entry-action:hover { color: var(--primary); }

.entry-action svg {
  width: 0.8rem;
  height: 0.8rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ── Shared dialog chrome ────────────────────────── */
dialog {
  border-radius: 0;
  border: 1px solid #c6c6c6;
  box-shadow: 0 2px 32px rgba(26,26,26,0.07);
  background: var(--surface-lowest);
  color: var(--on-surface);
  width: calc(100% - 2rem);
  padding: 1.5rem;
}

dialog::backdrop { background: rgba(26,26,26,0.35); }

.dialog-close {
  float: right;
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  color: var(--outline);
}
.dialog-close:hover { color: var(--primary); }

.dialog-label {
  font-family: 'Newsreader', Georgia, serif;
  font-variant-caps: all-small-caps;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--outline);
  margin: 0 0 1rem;
  display: block;
}

.dialog-input {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--outline);
  border-radius: 0;
  outline: none;
  padding: 0.4rem 0;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1rem;
  color: var(--on-surface);
  margin-bottom: 1.5rem;
}
.dialog-input:focus { border-bottom: 2px solid var(--primary); }

.dialog-textarea {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--outline);
  border-radius: 0;
  outline: none;
  padding: 0.4rem 0;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--on-surface);
  resize: vertical;
  margin-bottom: 1.5rem;
}
.dialog-textarea:focus { border-bottom: 2px solid var(--primary); }
.dialog-textarea::placeholder { color: var(--outline); }

.dialog-action {
  background: linear-gradient(var(--primary), var(--primary-container));
  border: none;
  border-radius: 0;
  box-shadow: 0px 2px 0px rgba(0,0,0,0.1);
  padding: 0.5rem 1rem;
  font-family: 'Newsreader', Georgia, serif;
  font-variant-caps: all-small-caps;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--on-primary);
  cursor: pointer;
}
.dialog-action:hover { background: var(--primary-fixed); }

/* ── Share dialog ────────────────────────────────── */
#share-dialog { max-width: 32rem; }

/* ── Reply dialog ────────────────────────────────── */
#reply-dialog { max-width: 36rem; }

/* ── Heatmap ─────────────────────────────────────── */
a.hm {
  background: rgba(var(--highlight-rgb), var(--s));
  border-radius: 0;
  padding: 0 1px;
  text-decoration: none;
  color: inherit;
}
a.hm:hover { text-decoration: underline; }