:root {
  --bg: #f6f3ec;
  --ink: #1f1d1a;
  --muted: #6b6660;
  --accent: #6b3e2e;
  --rule: #d9d3c4;
  --code-bg: #ebe6d8;
  --draft-bg: #f4e4b5;
  --subtitle: #6b6034;     /* warm olive */
  --geom: #962828;         /* brighter rich red — proof */
  --tile: #5a3a26;         /* warm umber sepia — margin tilings */
  --star-blue: #3b6ea8;    /* cool counterpoint — blue giants */
  --title: var(--tile);    /* title matches tiling lines */
  --heading: var(--title); /* post h2/h3 — defaults to title color */
  --text: var(--ink);      /* body-text alias for post-card excerpt */
  --measure: 46.4rem;
}

[data-theme="dark"] {
  --bg: #1c1a17;
  --ink: #e8e1d2;
  --muted: #b0a89e;
  --accent: #d4a577;
  --rule: #3a3530;
  --code-bg: #26221d;
  --draft-bg: #3a2f17;
  --subtitle: #b4a878;     /* warm muted olive */
  --geom: #d04438;         /* warm red — proof */
  --tile: #9d7d5f;         /* warm parchment sepia — margin tilings */
  --star-blue: #88b8e4;    /* cool counterpoint — blue giants, brighter for dark */
}

* { box-sizing: border-box; }

html { font-size: 18px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  line-height: 1.55;
  transition: background-color 0.15s ease, color 0.15s ease;
}

main, .site-header, .site-footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1rem 1.25rem;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header { padding-top: 0.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); margin-bottom: 2rem; }
.site-title { font-size: 1.6rem; margin: 0; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
.site-title a { color: var(--title); }
.site-tagline { color: var(--subtitle); font-style: italic; margin: 0.25rem 0 0; font-size: 0.95rem; }
.site-quote {
  margin: 0.7rem 0 0;
  font-style: italic;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}
.site-quote[data-translation] { cursor: pointer; }

.site-footer { color: var(--muted); border-top: 1px solid var(--rule); margin-top: 4rem; padding-top: 1rem; font-size: 0.85rem; }

.site-nav {
  max-width: var(--measure);
  margin: -1rem auto 2rem;
  padding: 0 1.25rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--muted);
  letter-spacing: 0.02em;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--accent); text-decoration: underline; }
.site-nav .site-nav-links span { margin: 0 0.4rem; opacity: 0.6; }

.site-nav-bottom {
  margin: 4rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  justify-content: center;
}
.site-nav-bottom .site-nav-links {
  text-align: center;
}
.site-footer {
  /* bottom nav already supplies the rule above the outro */
  border-top: none;
  margin-top: 0.5rem;
}

.post-meta { color: var(--muted); font-size: 0.85rem; font-style: italic; margin: 0; }

.post-card {
  padding: 1.35rem 0 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.post-card h2 { margin: 0; font-size: 1.35rem; }
.post-card h2 a { color: var(--heading); text-decoration: none; }
.post-card h2 a:hover { text-decoration: underline; }
.post-card time {
  display: block;
  margin-top: 0.25rem;
  font-style: italic;
  color: var(--muted);
}
.post-card .excerpt {
  max-width: var(--measure);
  margin-top: 0.75rem;
  line-height: 1.55;
  color: var(--text);
}
.post-card .tags {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.post-card .tags a {
  margin-right: 0.7rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule);
}
.post-card .tags a:hover {
  color: var(--heading);
  border-bottom-color: var(--heading);
}
.post-note a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule);
}
.post-note a:hover {
  color: var(--heading);
  border-bottom-color: var(--heading);
}

.post-header h1 { font-size: 1.7rem; margin: 0 0 0.25rem; line-height: 1.2; }

.about-contact {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
  font-style: italic;
}
.about-contact a {
  color: var(--accent);
  font-style: normal;
}

/* Analemma break: knot-tangle ornament + analemma + mirrored knot ornament.
   The analemma is the actual figure (EoT + solar declination, one year).
   The ornaments thread a trefoil-knot strand through stars of varying
   brightness, each star rendered with Newtonian-reflector diffraction spikes
   and a slow twinkle on its own phase. */
.analemma-break {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2.75rem 0 2.25rem;
  color: var(--tile);
}
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.analemma {
  width: 5.5rem;
  height: 6.5rem;
  opacity: 0.78;
  transition: opacity 0.15s ease, transform 0.4s ease;
  flex: 0 0 auto;
}
.analemma-break:hover .analemma { opacity: 1; }
.analemma-var-1 .analemma { transform: rotate(-90deg); }
.analemma-var-2 .analemma { transform: rotate(-97deg); }
.analemma-var-3 .analemma { transform: rotate(-82deg); }

.ornament {
  width: 11rem;
  height: 7.5rem;
  flex: 0 0 auto;
  color: var(--tile);  /* strand color comes through currentColor */
}
.strand {
  /* stroke + opacity already in markup */
}
.star {
  transform-box: fill-box;
  transform-origin: center;
}
/* Each star uses its own brand-palette color via CSS `color`.
   The use'd <symbol> resolves currentColor from this. */
.star-accent   { color: var(--accent); }
.star-geom     { color: var(--geom); }
.star-subtitle { color: var(--subtitle); }
.star-tile     { color: var(--tile); }
.star-muted    { color: var(--muted); }
.star-blue     { color: var(--star-blue); }

/* Two twinkle modes: pop stars breathe between bright and full presence;
   subtle stars stay dim and flicker more, so they read as distant. */
@keyframes twinkle-pop {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@keyframes twinkle-subtle {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.55; }
}
.star          { animation: twinkle-pop 5s ease-in-out infinite; }
.star-subtle   { animation-name: twinkle-subtle; }

@media (prefers-reduced-motion: reduce) {
  .star         { animation: none; opacity: 0.8; }
  .star-subtle  { opacity: 0.4; }
}

/* Mobile: the side ornaments overflow narrow viewports and crowd the
   analemma. Shrink at the same breakpoints the rest of the layout uses,
   then drop them altogether below 500px so the analemma stands alone. */
@media (max-width: 700px) {
  .analemma-break { gap: 0.5rem; }
  .ornament       { width: 6.5rem; height: 4.6rem; }
}
@media (max-width: 500px) {
  .ornament       { display: none; }
}

/* Illuminated drop cap: first letter of the first body paragraph on About
   (and anywhere else this class is applied). Style cue is the manuscript
   tradition: large, upright, in the rich-red --geom palette slot. */
.dropcap::first-letter {
  float: left;
  font-size: 3.6em;
  line-height: 0.86;
  margin: 0.05em 0.12em 0 0;
  padding-top: 0.05em;
  color: var(--geom);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

/* About coda: the closing aphorism gets its own emphasized block. */
.about-coda {
  margin: 2rem auto 1rem;
  max-width: 32rem;
  text-align: center;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--accent);
  padding: 0 1rem;
}
.post-body {
  margin-top: 2rem;
  line-height: 1.68;
  font-size: 1.05rem;
}
.post-body p { margin: 1.1rem 0; }
.post-body h2 { margin-top: 2.3rem; font-size: 1.25rem; color: var(--heading); }
.post-body h3 { margin-top: 1.5rem; font-size: 1.05rem; color: var(--heading); }

.post-body pre, .highlight {
  background: var(--code-bg);
  padding: 0.75rem 1rem;
  overflow-x: auto;
  border-radius: 3px;
  font-size: 0.95rem;
  line-height: 1.45;
}
.post-body code { background: var(--code-bg); padding: 0.05rem 0.3rem; border-radius: 2px; font-size: 0.92em; }
.post-body pre code { background: transparent; padding: 0; }

.post-body blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 680px) {
  .katex-display,
  .MathJax_Display,
  mjx-container[display="true"] {
    overflow-x: auto;
    padding: 0.75rem 0;
  }
}

.scriptorium-year {
  margin-top: 2rem;
  font-size: 1.4rem;
  color: var(--heading);
}
.scriptorium-list {
  list-style: none;
  padding: 0;
}
.scriptorium-list li {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px dotted var(--rule);
}
.scriptorium-date {
  color: var(--muted);
  font-style: italic;
}

.scriptorium-filter {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 1.75rem;
  font-size: 0.9rem;
  font-style: italic;
  letter-spacing: 0.02em;
}
.scriptorium-filter a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}
.scriptorium-filter a:hover {
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}
.scriptorium-filter a.active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}
.scriptorium-filter .count {
  opacity: 0.7;
  font-style: normal;
  font-size: 0.85em;
  margin-left: 0.15rem;
}

.scriptorium-item-fragment .scriptorium-date,
.scriptorium-item-fragment .scriptorium-entry a {
  color: var(--tile);
}
.scriptorium-item-fragment .scriptorium-entry a:hover {
  color: var(--accent);
}
.scriptorium-kind {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.7rem;
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--tile);
  border: 1px solid var(--tile);
  border-radius: 2px;
  vertical-align: 0.1em;
  opacity: 0.85;
}
[data-theme="dark"] .scriptorium-filter a.active {
  color: var(--bg);
}

.draft-banner {
  background: var(--draft-bg);
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  border-left: 3px solid var(--accent);
}

.post-note {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9rem;
  font-style: italic;
}

.pagination { margin-top: 2rem; display: flex; gap: 1rem; }

.notebook-embed {
  display: block;
  width: 100%;
  height: 720px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  margin: 1.5rem 0;
  background: var(--bg);
}

/* Theme toggle previews the destination theme — on light it looks dark, on dark it looks light. */
.theme-toggle {
  flex: 0 0 auto;
  padding: 0.2rem 0.6rem;
  font-family: inherit;
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  /* Default (light theme on page): show dark-theme styling */
  background: #1c1a17;
  color: #b0a89e;
  border: 1px solid #3a3530;
}
.theme-toggle:hover {
  color: #d4a577;
  border-color: #d4a577;
}
[data-theme="dark"] .theme-toggle {
  background: #f6f3ec;
  color: #6b6660;
  border: 1px solid #d9d3c4;
}
[data-theme="dark"] .theme-toggle:hover {
  color: #6b3e2e;
  border-color: #6b3e2e;
}

mjx-container { font-size: 1.02em !important; color: var(--ink); }

.site-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.site-title-block {
  flex: 1 1 auto;
  min-width: 0;
}
.site-banner-wrap {
  flex: 0 0 auto;
}
.site-banner {
  display: block;
  width: auto;
  height: 10rem;
  margin: 0;
  color: var(--geom);
  opacity: 0.42;
  overflow: visible;
  transform: scale(0.9);
  transform-origin: center;
}

.penrose-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 97px;
  pointer-events: none;
  background-color: var(--tile);
  opacity: 0.42;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: 97px 100vh, 100% 100%;
          mask-size: 97px 100vh, 100% 100%;
  -webkit-mask-position: center top, center center;
          mask-position: center top, center center;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  z-index: 0;
}
.penrose-rail-left {
  left: calc(50% - var(--measure) / 2 - 97px);
  -webkit-mask-image: url("img/ab-strip.57ba8d9758f7.svg"), linear-gradient(to right, transparent, black 70%);
          mask-image: url("img/ab-strip.57ba8d9758f7.svg"), linear-gradient(to right, transparent, black 70%);
}
.penrose-rail-right {
  left: calc(50% + var(--measure) / 2);
  -webkit-mask-image: url("img/ab-strip.57ba8d9758f7.svg"), linear-gradient(to left, transparent, black 70%);
          mask-image: url("img/ab-strip.57ba8d9758f7.svg"), linear-gradient(to left, transparent, black 70%);
}

/* Fade rails out as viewport narrows. */
@media (max-width: 1200px) { .penrose-rail { opacity: 0.30; } }
@media (max-width: 1080px) { .penrose-rail { opacity: 0.20; } }
@media (max-width:  980px) { .penrose-rail { opacity: 0.10; } }
@media (max-width:  900px) { .penrose-rail { opacity: 0;    } }

/* Below 700px: drop the banner so the title block has full width. */
@media (max-width: 700px) {
  .site-banner-wrap { display: none; }
}
/* Below 500px: shrink the title and let it wrap if it really must. */
@media (max-width: 500px) {
  .site-title { font-size: 1.35rem; white-space: normal; }
}


.site-header, main, .site-footer { position: relative; z-index: 1; }

/* --- Tag cloud (size + color encode usage) ----------------------------- */

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  align-items: baseline;
  max-width: var(--measure);
  margin: 2rem auto 1.5rem;
  padding: 1.25rem 0 1.5rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  line-height: 1.4;
}
.tag-cloud-item {
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.12s ease;
}
.tag-cloud-item:hover {
  text-decoration: underline;
  color: var(--accent);
}
.tag-cloud-item.weight-1 { font-size: 0.9rem;  color: var(--muted);    font-weight: normal; }
.tag-cloud-item.weight-2 { font-size: 1.05rem; color: var(--subtitle); font-weight: normal; }
.tag-cloud-item.weight-3 { font-size: 1.25rem; color: var(--ink);      font-weight: normal; }
.tag-cloud-item.weight-4 { font-size: 1.45rem; color: var(--ink);      font-weight: 600; }
.tag-cloud-item.weight-5 { font-size: 1.7rem;  color: var(--accent);   font-weight: 600; }

/* --- Fragments --------------------------------------------------------- */

.fragment-card {
  padding: 1rem 0 1.25rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid var(--tile);
  margin-left: -0.9rem;
  padding-left: 0.9rem;
}
.fragment-card-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.fragment-card-header h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}
.fragment-card-header h2 a { color: var(--heading); }
h2.untitled-date,
h1.untitled-date {
  font-style: italic;
  font-weight: 500;
}
h2.untitled-date a,
h2.untitled-date time,
h1.untitled-date time {
  color: var(--heading);
  text-decoration: none;
}
h2.untitled-date a:hover { text-decoration: underline; }
.fragment-card-header time {
  font-style: italic;
  color: var(--muted);
  font-size: 0.85rem;
}
.fragment-body {
  margin-top: 0.5rem;
  line-height: 1.6;
  font-size: 1rem;
}
.fragment-body p { margin: 0.6rem 0; }
.fragment-body p:first-child { margin-top: 0; }
.fragment-body p:last-child { margin-bottom: 0; }
.fragment-card .tags,
.fragment-detail .tags {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.fragment-card .tags a,
.fragment-detail .tags a {
  margin-right: 0.7rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule);
}
.fragment-card .tags a:hover,
.fragment-detail .tags a:hover {
  color: var(--heading);
  border-bottom-color: var(--heading);
}

.fragment-header h1 {
  font-size: 1.45rem;
  margin: 0 0 0.25rem;
  line-height: 1.2;
}
.fragment {
  padding-left: 0.9rem;
  border-left: 2px solid var(--tile);
}