/* ==========================================================================
   Homepage — "Open Spread"
   The notebook lies open: the intro on the left page, Fig. 1 (every post as a
   point in a 3D figure, built by scripts/post_map.py) on the right page, and
   the blog feed on its own wide sheet below. Graph paper, ink, a red margin.

   Loaded only by index.qmd (body class .home). The site tokens from
   styles.css are re-pointed at the notebook palette here, so the navbar and
   footer blend into the page.
   ========================================================================== */

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

/* ── Tokens: dark "night lab" is the default, like the rest of the site ─── */

body.home {
  --nb-bg: #0b0f17;
  --nb-paper: #111725;
  --nb-grid: #192133;
  --nb-fg: #e4e8f0;
  --nb-muted: #a7b0c0;
  --nb-meta: #6f7a8d;
  --nb-line: #28324a;
  --nb-ink: #8fa8ff;
  --nb-red: #ff8a7a;
  --nb-hl: #2a2d16;
  --nb-k1: #8fa8ff;
  --nb-k2: #ff8a7a;
  --nb-k3: #5fd3bd;
  --nb-k4: #f0c160;
  --nb-k5: #d59cf0;
  --nb-k6: #9fd36a;
  --nb-shadow: rgba(0, 0, 0, 0.45);
  --nb-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --nb-cell: 24px;

  /* point the site tokens at the notebook palette */
  --bg-primary: var(--nb-bg);
  --bg-nav: color-mix(in srgb, var(--nb-bg) 92%, transparent);
  --bg-footer: var(--nb-bg);
  --border-soft: var(--nb-line);
  --text-primary: var(--nb-fg);
  --text-muted: var(--nb-muted);
  --text-meta: var(--nb-meta);
  --accent: var(--nb-ink);
  --accent-strong: var(--nb-fg);
  --rail: var(--nb-red);
  --cell: color-mix(in srgb, var(--nb-ink) 12%, transparent);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body.home {
    --nb-bg: #eef1f4;
    --nb-paper: #fbfcfd;
    --nb-grid: #e3e9f0;
    --nb-fg: #1b2130;
    --nb-muted: #4a5466;
    --nb-meta: #858e9e;
    --nb-line: #cfd6df;
    --nb-ink: #2a4bb3;
    --nb-red: #c43d2f;
    --nb-hl: #fff3b0;
    --nb-k1: #2a4bb3;
    --nb-k2: #c43d2f;
    --nb-k3: #1d7f6e;
    --nb-k4: #a8740c;
    --nb-k5: #8a3fa3;
    --nb-k6: #4f7d1c;
    --nb-shadow: rgba(20, 30, 60, 0.14);
  }
}

:root[data-theme="light"] body.home {
  --nb-bg: #eef1f4;
  --nb-paper: #fbfcfd;
  --nb-grid: #e3e9f0;
  --nb-fg: #1b2130;
  --nb-muted: #4a5466;
  --nb-meta: #858e9e;
  --nb-line: #cfd6df;
  --nb-ink: #2a4bb3;
  --nb-red: #c43d2f;
  --nb-hl: #fff3b0;
  --nb-k1: #2a4bb3;
  --nb-k2: #c43d2f;
  --nb-k3: #1d7f6e;
  --nb-k4: #a8740c;
  --nb-k5: #8a3fa3;
  --nb-k6: #4f7d1c;
  --nb-shadow: rgba(20, 30, 60, 0.14);
}

/* ── Page ───────────────────────────────────────────────────────────────── */

html:has(body.home) { background: var(--nb-bg); }
body.home { background: var(--nb-bg); }

body.home #quarto-content { padding-top: 1.2rem; }
body.home main.content { margin-top: 0; }
body.home main.content > * { grid-column: screen-start-inset / screen-end-inset; }

.home .spread,
.home .nb-feed {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

.home .nb-page {
  position: relative;
  background-color: var(--nb-paper);
  background-image:
    linear-gradient(var(--nb-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--nb-grid) 1px, transparent 1px);
  background-size: var(--nb-cell) var(--nb-cell);
  border: 1px solid var(--nb-line);
  color: var(--nb-fg);
  font-family: var(--nb-serif);
}

.home .nb-page p,
.home .nb-page li {
  font-family: var(--nb-serif);
  color: var(--nb-fg);
  font-size: 1.08rem;
  line-height: 1.65;
}

.home .nb-page a:not(.nb-post) { color: var(--nb-ink); }

/* the notebook has its own cell numbers, so drop the site's § heading marks */
.home #quarto-document-content h2::before { content: none; }

.home .nb-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 0.72rem var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--nb-meta);
}

.home .nb-num {
  font: 500 0.78rem var(--font-mono);
  color: var(--nb-red);
}

/* ── The spread: intro | Fig. 1 ─────────────────────────────────────────── */

.home .spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  filter: drop-shadow(0 20px 30px var(--nb-shadow));
}

.home .spread .nb-page { min-height: min(640px, calc(100vh - 120px)); }

.home .nb-left {
  padding: 44px 48px 40px 92px;
  border-right: 0;
  border-radius: 2px 0 0 2px;
}

/* the red margin rule */
.home .nb-left::before,
.home .nb-feed::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 68px;
  width: 1.5px;
  background: var(--nb-red);
  opacity: 0.55;
}

.home .nb-left > p:has(.nb-head) { margin: 0; }
.home .nb-left > p:has(.nb-num) { position: absolute; left: 18px; top: 112px; width: 40px; text-align: right; margin: 0; }

.home .nb-name {
  font-family: var(--nb-serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--nb-fg);
  margin: 26px 0 10px;
}

.home .nb-aff {
  display: flex;
  align-items: center;
  gap: 12px;
  font-style: italic;
  color: var(--nb-muted);
  margin-bottom: 8px;
}

.home .nb-profile {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--nb-line);
  margin: 0;
}

.home .nb-left p { max-width: 52ch; }

.home .nb-right {
  display: flex;
  flex-direction: column;
  padding: 44px 44px 36px;
  border-radius: 0 2px 2px 0;
  /* the gutter's shadow where the pages meet */
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.07), transparent 28px),
    linear-gradient(var(--nb-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--nb-grid) 1px, transparent 1px);
  background-size: 100% 100%, var(--nb-cell) var(--nb-cell), var(--nb-cell) var(--nb-cell);
}

.home .nb-right .nb-head { margin-bottom: 14px; }

.home .nb-fig {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.home .nb-plate {
  position: relative;
  flex: 1;
  min-height: 340px;
  border: 1px solid var(--nb-line);
  background: var(--nb-paper);
}

.home .nb-plate canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home .nb-right.is-empty .nb-plate::after {
  content: "Fig. 1 could not load.";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: italic 1rem var(--nb-serif);
  color: var(--nb-meta);
}

.home .nb-tip {
  position: absolute;
  z-index: 3;
  max-width: 260px;
  padding: 8px 11px;
  background: var(--nb-paper);
  border: 1px solid var(--nb-fg);
  font: 0.92rem/1.3 var(--nb-serif);
  color: var(--nb-fg);
  pointer-events: none;
  transform: translate(14px, -50%);
}

.home .nb-tip small {
  display: block;
  margin-top: 4px;
  font: 0.7rem var(--font-mono);
  color: var(--nb-meta);
}

.home .nb-fig figcaption {
  margin-top: 10px;
  font: 0.92rem/1.45 var(--nb-serif);
  color: var(--nb-muted);
}

.home .nb-fig figcaption b { color: var(--nb-fg); }

.home .nb-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font: 0.72rem var(--font-mono);
}

.home .nb-key button {
  all: unset;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--nb-muted);
  cursor: pointer;
}

.home .nb-key button:hover,
.home .nb-key button[aria-pressed="true"] { color: var(--nb-fg); }
.home .nb-key button[aria-pressed="true"] { text-decoration: underline; }
.home .nb-key button:focus-visible { outline: 2px solid var(--nb-ink); outline-offset: 2px; }
.home .nb-key i { display: block; width: 8px; height: 8px; border-radius: 50%; }

/* ── The feed sheet ─────────────────────────────────────────────────────── */

.home .nb-feed {
  margin-top: 56px;
  margin-bottom: 40px;
  padding: 40px 56px 48px 92px;
  border-radius: 2px;
  box-shadow: 0 20px 30px -10px var(--nb-shadow);
  max-width: 1200px;
}

.home .nb-feed > p:has(.nb-num) { position: absolute; left: 18px; top: 50px; width: 40px; text-align: right; margin: 0; }

.home .nb-feed h2 {
  font-family: var(--nb-serif);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  color: var(--nb-fg);
  margin: 0 0 6px;
  border: 0;
  padding: 0;
}

.home .nb-feed > p { max-width: 64ch; color: var(--nb-muted); }

.home .notebook-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  margin-top: 12px;
}

.home .nb-post {
  display: flex;
  flex-direction: column;
  padding: 20px 8px 20px 0;
  border-top: 1px solid var(--nb-line);
  color: var(--nb-fg);
  text-decoration: none;
  min-width: 0;
  overflow-wrap: anywhere;
  transition: background 0.15s ease;
}

.home .nb-title {
  font: 600 1.12rem/1.3 var(--nb-serif);
  text-wrap: balance;
}

.home .nb-sub {
  margin-top: 2px;
  font: italic 1rem/1.35 var(--nb-serif);
  color: var(--nb-muted);
}

.home .nb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 5px;
  font: 0.74rem var(--font-mono);
  color: var(--nb-meta);
}

.home .nb-topic {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nb-line);
}

.home .nb-ex {
  margin-top: 6px;
  font: 0.95rem/1.5 var(--nb-serif);
  color: var(--nb-muted);
}

.home .nb-ex p { display: inline; margin: 0; font: inherit; color: inherit; }
.home .nb-ex::before { content: "↳ "; font-family: var(--font-mono); color: var(--nb-red); }

.home .nb-post:hover .nb-title,
.home .nb-post:focus-visible .nb-title,
.home .nb-post.is-hovered .nb-title { color: var(--nb-ink); }
.home .nb-post.is-hovered { background: color-mix(in srgb, var(--nb-hl) 70%, transparent); }
.home .nb-post:focus-visible { outline: 2px solid var(--nb-ink); outline-offset: 2px; }

/* ── Narrow screens: the pages stack ────────────────────────────────────── */

@media (max-width: 900px) {
  .home .spread { grid-template-columns: 1fr; gap: 12px; }
  .home .spread .nb-page { min-height: 0; }
  .home .nb-left { padding: 30px 22px 30px 62px; border-right: 1px solid var(--nb-line); border-radius: 2px; }
  .home .nb-left::before, .home .nb-feed::before { left: 44px; }
  .home .nb-left > p:has(.nb-num), .home .nb-feed > p:has(.nb-num) { left: 0; }
  .home .nb-right { padding: 24px 18px; border-radius: 2px; background-image: linear-gradient(var(--nb-grid) 1px, transparent 1px), linear-gradient(90deg, var(--nb-grid) 1px, transparent 1px); background-size: var(--nb-cell) var(--nb-cell); }
  .home .nb-plate { flex: none; min-height: 0; aspect-ratio: 1 / 1; }
  .home .nb-feed { padding: 30px 22px 36px 62px; margin-top: 28px; }
  .home .notebook-feed { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .home .nb-post { transition: none; }
}