/* Site styles. */

:root {
  --bg: #FAFAF7;
  --fg: #16170E;
  --fg-soft: #5A5C50;
  --rule: #D5D4C9;
  --accent: #C2410C;     /* oxblood */
  --ink: #3D49A6;        /* cobalt-ultramarine */

  --display: "Crimson Pro", Georgia, serif;
  --serif: "Lora", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  --ease-paper: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.dark {
  --bg: #0E0E10;
  --fg: #EBEBE3;
  --fg-soft: #8A8C7E;
  --rule: #2A2A2C;
  --accent: #E55E26;
  --ink: #7B8AE0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
}

body {
  font: 18px/1.7 var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 35%, transparent);
  transition: color 220ms var(--ease-paper), border-color 220ms var(--ease-paper);
}
a:not(.tag):hover { color: var(--accent); border-bottom-color: var(--accent); }

sup.fn { font: 11px/1 var(--mono); color: var(--accent); vertical-align: super; }
sup.fn a { border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* Page frame */
.page { max-width: 1440px; margin: 0 auto; padding: 40px 56px 0; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }

/* Top bar */
.topbar {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 36px;
}
.topbar .name { font: italic 700 22px/1 var(--display); }
.topbar .name em { color: var(--accent); font-style: italic; }
.topbar .name a { border: 0; color: inherit; }
.topbar .name a:hover { color: var(--accent); }
.topbar .nav {
  font: 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  display: flex;
  gap: 28px;
}
.topbar .nav a { border: 0; color: var(--fg-soft); }
.topbar .nav a.active { color: var(--accent); }
.topbar .nav a:hover { color: var(--accent); }
.topbar .toggle {
  font: 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
}
.topbar .toggle svg { display: block; color: var(--fg); }
.topbar .toggle .icon-sun { display: none; }
:root.dark .topbar .toggle .icon-moon { display: none; }
:root.dark .topbar .toggle .icon-sun { display: block; }

/* Actions cluster (toggle + burger) */
.topbar .actions { display: flex; align-items: center; gap: 16px; }
.topbar .burger {
  display: none; /* desktop shows inline nav; burger only on mobile */
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  color: var(--fg);
  align-items: center;
}
.topbar .burger svg { display: block; color: var(--fg); }
.topbar .burger .icon-close { display: none; }
.topbar.nav-open .burger .icon-burger { display: none; }
.topbar.nav-open .burger .icon-close { display: block; }

/* Home page-level title */
.page-head {
  grid-column: 1 / span 12;
  padding-bottom: 32px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
}
.page-head .ht { grid-column: 1; min-width: 0; }
.page-head h1 {
  font: italic 800 64px/1 var(--display);
  margin: 0;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.page-head h1 em { color: var(--accent); font-style: italic; }
.page-head .sub {
  font: 18px/1.5 var(--serif);
  color: var(--fg-soft);
  max-width: 56ch;
  margin: 16px 0 0;
}

/* Solo pages (about/archive/toys/tags) reuse the home page-head shape with
   the post header's "← home" crumb above the title and a gol in the right
   slot. */
.solo-head .crumb {
  font: 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: 16px;
}
.solo-head .crumb a { color: var(--fg-soft); border: 0; }
.solo-head .crumb a:hover { color: var(--accent); }

/* About rail (home left column) */
.marg { grid-column: 1 / span 4; padding-right: 32px; }
.about { padding-top: 4px; position: relative; }
.about .label {
  font: 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.about p { font: 17px/1.6 var(--serif); margin: 0 0 14px; color: var(--fg); max-width: 38ch; }
.about p.muted { color: var(--fg-soft); }
.about ul {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  font: 13px/1.7 var(--mono);
  color: var(--fg-soft);
}
.about ul li { display: flex; gap: 8px; }
.about ul li .k { color: var(--fg-soft); width: 8ch; }
.about ul li a { color: var(--ink); border-bottom: 1px solid color-mix(in oklab, var(--ink) 35%, transparent); }
.about ul li a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.gol-vert { display: block; margin: 32px 0 0; }

/* Home main feed */
.main { grid-column: 6 / span 7; }
.post {
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: baseline;
}
.post:first-child { padding-top: 0; }
.post .body h2 {
  font: italic 700 32px/1.15 var(--display);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}
.post .body h2 a {
  color: var(--ink);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 40%, transparent);
}
.post .body h2 a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.post .body .date { font: 13px/1.4 var(--mono); color: var(--fg-soft); }
.post .body .dek { font: 16px/1.55 var(--serif); color: var(--fg-soft); margin: 8px 0 0; max-width: 50ch; }

/* Category labels — editorial "filed under" index, mono uppercase in accent */
.tags { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; }
.tag {
  font: 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 120ms var(--ease-paper);
}
/* Color + reset of the inherited link underline. Scoped to .tags/.meta so it
   beats higher-specificity layout link rules like `.simple a` on the archive. */
.tags .tag, .meta .tag { color: var(--accent); border-bottom: 0; text-decoration: none; }
.tags a.tag:hover, .meta a.tag:hover { color: var(--fg); border-bottom: 0; }
/* Middot between consecutive category labels (DANCE · SOFTWARE) */
.tags .tag:not(:first-child)::before {
  content: "·";
  color: var(--fg-soft);
  margin: 0 .5em;
}

/* Home feed section header */
.feed-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.feed-head .label {
  font: 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.feed-head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}

/* Home feed → archive link */
.feed-more {
  margin-top: 28px;
  display: flex;
  justify-content: flex-end;
}
.feed-more a {
  font: 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.feed-more a span { color: var(--ink); transition: transform 220ms var(--ease-paper); }
.feed-more a:hover { color: var(--accent); }
.feed-more a:hover span { transform: translateX(4px); }

/* Pagination */
.pager {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  font: 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.pager-link { border: 0; color: var(--ink); }
.pager-link:hover { color: var(--accent); }
.pager-link.is-off { color: var(--rule); pointer-events: none; }
.pager-pos { color: var(--fg-soft); letter-spacing: .1em; }
.pager-pos em { color: var(--accent); font-style: normal; margin: 0 4px; }

/* Archive (dense post index) */
.archive { margin: 0; }
.archive + .pager { margin-top: 8px; }
.pager + .archive { margin-top: 28px; }
.arch-item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 6px 24px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.arch-item .date { font: 12px/1.5 var(--mono); color: var(--fg-soft); white-space: nowrap; }
.arch-item .t { min-width: 0; }
.arch-item .t a {
  font: italic 600 21px/1.3 var(--display);
  letter-spacing: -0.01em;
  color: var(--ink);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 30%, transparent);
}
.arch-item .t a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.arch-item .tags { justify-content: flex-end; }

/* Site footer */
.site-footer {
  grid-column: 1 / -1;
  margin-top: 96px;
  padding: 20px 0 32px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.footer-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  text-align: right;
}
.footer-nav {
  font: 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  display: flex;
  gap: 28px;
}
.footer-nav a { border: 0; color: var(--fg-soft); }
.footer-nav a:hover { color: var(--accent); }
.colophon { font: 11px/1.5 var(--mono); letter-spacing: .04em; color: var(--fg-soft); max-width: 60ch; }
.colophon .acc { color: var(--accent); }
.colophon .ink { color: var(--ink); }
canvas#gol-h { display: block; }
canvas[data-interactive] { cursor: crosshair; touch-action: none; }

/* ===== Note page ===== */
.essay-head {
  grid-column: 1 / -1;
  padding-bottom: 28px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
}
.essay-head .ht { grid-column: 1; }
/* Keep the gol decoration anchored to the bottom of the header while the
   title block top-aligns, so the gap below the topbar stays consistent
   regardless of title length. */
.page-head .gol-vert,
.essay-head .gol-vert { align-self: end; }
.essay-head .crumb {
  font: 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: 16px;
}
.essay-head .crumb a { color: var(--fg-soft); border: 0; }
.essay-head .crumb a:hover { color: var(--accent); }
.essay-head h1 {
  font: italic 800 72px/0.98 var(--display);
  margin: 0;
  letter-spacing: -0.025em;
}
.essay-head h1 em { color: var(--accent); font-style: italic; }
.essay-head .meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 20px;
  font: 13px/1.4 var(--mono);
  color: var(--fg-soft);
}
.essay-head .meta .date { letter-spacing: .04em; }

/* Note content wrapper: nested 2-col grid so notes ride alongside paragraphs */
.content { grid-column: 3 / span 10; }
.block { display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 40px; }
.block > .cnt { min-width: 0; }
.block > .notes { padding-top: 6px; }
.sn {
  font: 12px/1.5 var(--mono);
  color: var(--fg-soft);
  margin-bottom: 18px;
  padding-left: 14px;
  border-left: 1px solid var(--rule);
}
.sn:last-child { margin-bottom: 0; }
.sn .h {
  font: 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.sn .h .num { color: var(--accent); margin-right: 4px; }
.sn em { color: var(--ink); font-style: italic; }

/* Note body */
.cnt p { margin: 0 0 28px; max-width: 60ch; }
.cnt h2 {
  font: italic 700 36px/1.15 var(--display);
  margin: 56px 0 24px;
  letter-spacing: -0.015em;
}
.cnt h2 .num { color: var(--accent); margin-right: 8px; font-style: italic; }
.cnt h3 {
  font: italic 600 24px/1.3 var(--display);
  margin: 40px 0 16px;
  color: var(--ink);
}
.cnt ul, .cnt ol { margin: 0 0 28px; padding-left: 24px; max-width: 60ch; }
.cnt li { margin-bottom: 8px; }
.cnt blockquote {
  margin: 28px 0;
  padding-left: 20px;
  border-left: 2px solid var(--rule);
  color: var(--fg-soft);
  font-style: italic;
  max-width: 56ch;
}
.cnt code {
  font: 14px/1.5 var(--mono);
  background: color-mix(in oklab, var(--fg) 6%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
}
.cnt pre {
  font: 14px/1.55 var(--mono);
  background: color-mix(in oklab, var(--fg) 6%, transparent);
  padding: 16px 20px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 0 0 28px;
}
.cnt pre code { background: none; padding: 0; }
.cnt img { max-width: 100%; height: auto; }
.cnt a { color: var(--ink); border-bottom: 1px solid color-mix(in oklab, var(--ink) 35%, transparent); }
.cnt a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Figure */
figure.img { margin: 40px 0; }
figure.img .ph {
  background: repeating-linear-gradient(45deg, color-mix(in oklab, var(--fg) 5%, transparent) 0 6px, transparent 6px 12px);
  border: 1px solid var(--rule);
  aspect-ratio: 16/9;
  display: grid;
  place-items: center;
}
figure.img .ph span { font: 11px/1 var(--mono); letter-spacing: .04em; color: var(--fg-soft); }
figure.img figcaption {
  font: italic 16px/1.5 var(--serif);
  color: var(--fg-soft);
  margin-top: 12px;
  max-width: 56ch;
}

/* Bottom footnotes section (hand-authored .footnotes OR eleventy-plugin-footnotes .Footnotes) */
.footnotes,
.Footnotes {
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  margin-top: 56px;
}
.footnotes h3,
.Footnotes__title {
  font: italic 700 22px/1 var(--display);
  color: var(--accent);
  margin: 0 0 16px;
}
.footnotes ol,
.Footnotes__list { font: 14px/1.55 var(--sans); color: var(--fg-soft); padding-left: 24px; }
.footnotes li,
.Footnotes__list-item { margin-bottom: 12px; }
.footnotes a,
.Footnotes a { color: var(--ink); }

/* Inline footnote marker — matches sup.fn used in the design's marginalia. */
a.Footnotes__ref {
  font: 11px/1 var(--mono);
  color: var(--accent);
  vertical-align: super;
  border: 0;
  margin-left: 1px;
}
a.Footnotes__ref:hover { color: var(--accent); filter: brightness(0.9); }
a.Footnotes__back-link {
  font: 12px/1 var(--mono);
  color: var(--fg-soft);
  border: 0;
  margin-left: 6px;
}

/* Divider glyphs */
.divider {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 0;
  font: 28px var(--display);
  color: var(--fg-soft);
  letter-spacing: 1em;
}
.divider .heavy { color: var(--accent); font-size: 36px; }

/* ===== Generic single-column page (about/toys/tag-index) ===== */
.simple { grid-column: 3 / span 8; }
.simple h1 {
  font: italic 800 56px/1 var(--display);
  margin: 0 0 32px;
  letter-spacing: -0.025em;
}
.simple h2 {
  font: italic 700 32px/1.15 var(--display);
  margin: 48px 0 16px;
  letter-spacing: -0.015em;
}
.simple h3 {
  font: italic 600 22px/1.3 var(--display);
  margin: 32px 0 12px;
  color: var(--ink);
}
.simple p { margin: 0 0 24px; max-width: 60ch; }
.simple ul, .simple ol { margin: 0 0 24px; padding-left: 24px; max-width: 60ch; }
.simple li { margin-bottom: 8px; }
.simple a { color: var(--ink); border-bottom: 1px solid color-mix(in oklab, var(--ink) 35%, transparent); }
.simple a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.simple .crumb {
  font: 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: 24px;
}
.simple .crumb a { color: var(--fg-soft); border: 0; }
.simple .crumb a:hover { color: var(--accent); }

/* Image modal (preserved from earlier site) */
.clickable-image { cursor: zoom-in; }
#imageModal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  animation: fadeIn 0.2s ease-in-out;
}
#imageModal.hidden { display: none; animation: none; }
#imageModal img { max-width: 90vw; max-height: 90vh; animation: scaleIn 0.2s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ===== Mobile (single breakpoint) ===== */
@media (max-width: 720px) {
  .page { padding: 24px 20px 0; }
  .grid { display: block; }
  .topbar { padding-bottom: 16px; margin-bottom: 32px; }
  .topbar .burger { display: inline-flex; }
  /* Nav becomes a dropdown anchored under the burger. */
  .topbar .nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    flex-direction: column;
    gap: 0;
    min-width: 184px;
    padding: 6px;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: 0 12px 32px color-mix(in oklab, var(--fg) 16%, transparent);
    z-index: 30;
  }
  .topbar.nav-open .nav { display: flex; }
  .topbar .nav a {
    color: var(--fg);
    padding: 11px 14px;
    border-radius: 6px;
  }
  .topbar .nav a.active { color: var(--accent); }

  /* Home — keep the title and GOL side by side on mobile. The GOL holds its
     fixed size (auto grid track) and overflows past the right edge only when
     the title leaves it no room. */
  .page-head { gap: 16px; margin-bottom: 32px; padding-bottom: 20px; }
  .page-head h1 { font-size: 36px; line-height: 1.05; }
  .page-head .sub { font-size: 16px; }
  .page-head .gol-vert { margin: 0; }

  .marg { padding-right: 0; margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--rule); }
  .about p { font-size: 16px; }
  .about .gol-vert { display: none; }
  .gol-vert { margin: 24px auto 0; }

  .post { display: block; padding: 20px 0; }
  .post .body h2 { font-size: 24px; }
  .post .tags { justify-content: flex-start; margin-top: 12px; }
  .post .body .dek { font-size: 15px; }

  /* Note */
  .essay-head { display: block; padding-bottom: 20px; margin-bottom: 32px; }
  .essay-head h1 { font-size: 42px; line-height: 1.0; max-width: none; }
  .essay-head .meta { gap: 8px; flex-wrap: wrap; font-size: 12px; }
  .essay-head .gol-vert { display: none; }

  .block { display: block; }
  .block > .notes { padding-top: 0; margin: 0 0 28px; }
  .block > .notes:empty { display: none; }
  .sn { margin-bottom: 12px; font-size: 12px; padding-left: 12px; }

  .cnt p { font-size: 17px; max-width: none; }
  .cnt h2 { font-size: 28px; margin: 40px 0 16px; }
  .cnt h3 { font-size: 20px; }

  figure.img figcaption { font-size: 14px; }
  .footnotes h3 { font-size: 20px; }
  .footnotes ol { font-size: 13px; padding-left: 20px; }

  .divider { padding: 32px 0; font-size: 22px; letter-spacing: 0.6em; }
  .divider .heavy { font-size: 28px; }

  .simple { }
  .simple h1 { font-size: 36px; }

  /* Archive + pagination */
  .arch-item { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .arch-item .t a { font-size: 19px; }
  .arch-item .tags { justify-content: flex-start; margin-top: 8px; }
  .feed-more { justify-content: flex-start; }

  .site-footer { margin-top: 48px; flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-end { align-items: flex-start; text-align: left; }
  .footer-nav { gap: 20px; }
}