/* casella.dev — "sticky split" (design 4c, after brandur.org): name, bio, nav and
   "now" pinned in a left column; the page's content scrolls on the right.
   Shared by index.html, projects.html and the blog posts. */

:root {
  --pn-bg: oklch(0.15 0.01 250);
  --pn-fg: oklch(0.9 0.008 250);
  --pn-accent: oklch(0.82 0.1 200);
  --pn-line: oklch(0.26 0.015 250);
  --pn-rule: oklch(0.3 0.015 250);
  --pn-quiet: oklch(0.62 0.015 250);
  --pn-dim: oklch(0.7 0.012 250);
  --pn-hover: oklch(0.21 0.014 250);
  --pn-raise: oklch(0.19 0.012 250);
  --pn-plate: #f6f5f1;
  --pn-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --pn-side: 360px;
  --pn-top: 96px;
  color-scheme: dark;
}

.pn-body {
  margin: 0;
  background: var(--pn-bg);
  color: var(--pn-fg);
  font-family: var(--pn-mono);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
.pn-body *, .pn-body *::before, .pn-body *::after { box-sizing: border-box; }
.pn-body a { color: inherit; }
.pn-body a:hover { opacity: 0.8; }
.pn-body :focus-visible { outline: 2px solid var(--pn-accent); outline-offset: 2px; }
.posts, .rows, .proj-list { list-style: none; margin: 0; padding: 0; }
.accent { color: var(--pn-accent); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── the split ──────────────────────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: var(--pn-side) minmax(0, 1fr);
  min-height: 100vh;
}

.side {
  padding: var(--pn-top) 40px 48px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 56px;
  border-right: 1px solid var(--pn-line);
}
.side__pin {
  position: sticky;
  z-index: 1;
  top: var(--pn-top);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.side__name {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.side__name a { text-decoration: none; }
.side__bio { margin: 0; font-size: 15px; text-wrap: pretty; }
.side__nav { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.side__nav a { text-decoration: none; }
.side__nav a::before { content: '\00a0\00a0'; }
.side__nav a[aria-current] { color: var(--pn-accent); }
.side__nav a[aria-current]::before { content: '→\00a0'; }
.side__now {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 20px;
  border-top: 1px solid var(--pn-line);
}
.side__now span { font-size: 13px; color: var(--pn-quiet); }
.side__now p { margin: 0; font-size: 14px; line-height: 1.65; }
.side__links { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--pn-quiet); }
.side__links a { text-decoration: none; }
.side__links a:hover { color: var(--pn-accent); opacity: 1; }

/* The loss-landscape figure above the name, in the accent cyan; the ball and
   its trail are set bolder so they read against the terrain. */
.side__art { margin: -40px 0 -4px; }
.side .side__art pre {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  height: 220px;
  overflow: hidden;
  font: 10px/10px var(--pn-mono);
  color: var(--pn-accent);
  white-space: pre;
  user-select: none;
}
.side .side__art pre b { font-weight: 600; color: var(--pn-accent); }

/* The art: loss-landscape contours pinned to the bottom of the left column,
   a 1–100 grid with the collapse picks lit, and a slow terminal cursor. */
.side::before {
  content: '';
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: var(--pn-side);
  height: 100vh;
  background: url("/https:/casella.dev/assets/art/contours.svg") center bottom / 100% auto no-repeat;
  pointer-events: none;
}
.side__grid {
  display: grid;
  grid-template-columns: repeat(10, 5px);
  gap: 6px;
  width: max-content;
  margin-bottom: 18px;
}
.side__grid i { width: 5px; height: 5px; border-radius: 50%; background: oklch(0.9 0.008 250 / 0.1); }
.side__grid i.on { background: oklch(0.82 0.1 200 / 0.8); }
.side__grid:hover { opacity: 1; }
.side__grid:hover i.on { background: var(--pn-accent); box-shadow: 0 0 6px oklch(0.82 0.1 200 / 0.6); }
@media (prefers-reduced-motion: no-preference) {
  .side__name .accent { animation: pn-blink 1.2s infinite; }
}
@keyframes pn-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.split__main {
  min-width: 0;
  padding: var(--pn-top) 56px 56px 48px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.flow { display: flex; flex-direction: column; gap: 56px; min-width: 0; }
.flow > section { display: flex; flex-direction: column; min-width: 0; max-width: 800px; }

/* Quiet section label: `models`, or `projects ... all 22 →` */
.label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--pn-quiet);
}
.label .label__aside { color: var(--pn-quiet); text-decoration: none; white-space: nowrap; }
.label a.label__aside:hover { color: var(--pn-accent); opacity: 1; }

/* ── home ───────────────────────────────────────────────────────────────── */
.posts { display: flex; flex-direction: column; gap: 40px; }
.posts a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; max-width: 760px; }
.posts a:hover { opacity: 1; }
.posts a:hover .posts__title { color: var(--pn-accent); }
.posts__kicker { font-size: 13px; color: var(--pn-accent); }
.posts__title { font-size: 22px; line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; text-wrap: pretty; }
.posts__dek { color: var(--pn-dim); text-wrap: pretty; }
.posts__scope { font-size: 13px; line-height: 1.6; color: var(--pn-quiet); text-wrap: pretty; }
/* A project's other stages: nested under the lead on the research index, one
   quiet line each on the home page. */
.posts--stages { margin-top: 20px; padding-left: 20px; border-left: 1px solid var(--pn-line); gap: 24px; }
.posts--stages .posts__title { font-size: 17px; }
.posts__rel { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--pn-quiet); text-wrap: pretty; }
.posts .posts__rel a { display: inline; color: var(--pn-dim); text-decoration: underline; text-decoration-color: var(--pn-rule); text-underline-offset: 3px; }
.posts .posts__rel a:hover { color: var(--pn-accent); }

.rows { display: flex; flex-direction: column; }
.rows a { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 6px 0; text-decoration: none; font-size: 14px; }
.rows a span:first-child { overflow-wrap: anywhere; min-width: 0; }
.rows a span:last-child { flex: none; color: var(--pn-quiet); }
.rows a:hover { opacity: 1; color: var(--pn-accent); }

/* ── projects ───────────────────────────────────────────────────────────── */
.proj-main { gap: 64px; }
.proj-head { display: flex; flex-direction: column; gap: 8px; }
.proj-head h1 { margin: 0; font-size: 30px; line-height: 1.3; font-weight: 600; }
.proj-head p { margin: 0; font-size: 13px; color: var(--pn-quiet); }
.proj-head__hint { display: none; }
@media (hover: hover) and (pointer: fine) {
  .proj-head__hint { display: inline; }
}
.proj-group { scroll-margin-top: 32px; }
.proj-group .label { padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--pn-line); }
.proj-group .label > span:first-child { color: var(--pn-accent); }
.proj-list a { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 32px; padding: 9px 0; text-decoration: none; }
.proj-list a:hover, .proj-list a.is-hot { opacity: 1; }
.proj-list a:hover .proj__name, .proj-list a.is-hot .proj__name { color: var(--pn-accent); }
.proj__name { font-weight: 500; overflow-wrap: anywhere; }
.proj__repo { display: block; font-size: 12px; font-weight: 400; color: var(--pn-quiet); }
.proj__desc { font-size: 14px; line-height: 1.6; color: var(--pn-dim); }
.proj__meta { display: block; margin-top: 4px; font-size: 12px; color: var(--pn-quiet); }
.proj__meta--note { margin-top: 0; }

/* ── featured software and model adapters (home) ──────────────────────── */
.feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.feat { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 32px; }
.feat p { margin: 0; }
.feat__name { font-weight: 500; }
.feat__name a { text-decoration: none; }
.feat__name a:hover { color: var(--pn-accent); opacity: 1; }
.feat__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feat__desc { font-size: 14px; line-height: 1.6; color: var(--pn-dim); text-wrap: pretty; }
.feat__why { font-size: 13px; line-height: 1.6; color: var(--pn-dim); text-wrap: pretty; }
.feat__meta { font-size: 12px; line-height: 1.6; color: var(--pn-quiet); overflow-wrap: anywhere; }
.feat__meta code, .feat__actions code { font-family: var(--pn-mono); font-size: 12px; background: var(--pn-hover); padding: 1px 5px; overflow-wrap: anywhere; }
.feat__id { color: var(--pn-quiet); }
.feat__actions { margin-top: 4px !important; font-size: 13px; color: var(--pn-quiet); }
.feat__actions a { color: var(--pn-accent); text-decoration: none; }
.posts--quiet .posts__title { font-size: 17px; }

/* Home: selected research and selected software side by side, so the first
   software entries are on the first screen. Each column is about 450px at
   1440, so the post title steps down and the repo card flattens to one
   column with its Needs line and actions; Sends and credits stay on
   projects.html. Below 1100px the columns stack, software first. */
.home-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
.home-cols > section { max-width: none; }
.home-cols .posts { gap: 28px; }
.home-cols .posts a { gap: 6px; }
.home-cols .posts__kicker { font-size: 12px; }
.home-cols .posts__title { font-size: 19px; }
.home-cols .posts__dek { font-size: 13px; line-height: 1.6; }
.home-cols .feats { gap: 22px; }
.home-cols .feat { display: flex; flex-direction: column; gap: 4px; }
.home-cols .feat__desc { font-size: 13px; }
.home-cols .feat__actions { margin-top: 0 !important; font-size: 12px; }
@media (max-width: 1100px) {
  .home-cols { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .home-cols > .home-cols__software { order: -1; }
}
.posts--quiet .posts__kicker { color: var(--pn-quiet); }

/* ── contact (home) ─────────────────────────────────────────────────────── */
.contact p { margin: 0 0 12px; max-width: 680px; text-wrap: pretty; }
.contact .contact__link { color: var(--pn-accent); text-decoration: none; }
.contact .contact__aside { margin: 0; font-size: 13px; color: var(--pn-quiet); }

.preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5;
  width: 320px;
  pointer-events: none;
  background: var(--pn-raise);
  border: 1px solid var(--pn-accent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.preview[hidden] { display: none; }
.preview__img {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, oklch(0.24 0.015 250) 0 1px, oklch(0.2 0.012 250) 1px 9px);
  font-size: 12px;
  color: var(--pn-quiet);
}
.preview__img img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
.preview__cap { padding: 10px 14px; font-size: 12px; line-height: 1.6; color: var(--pn-dim); }

/* ── footer ─────────────────────────────────────────────────────────────── */
.pn-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
  font-family: var(--pn-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--pn-quiet);
}
.pn-foot p { margin: 0; }

/* ── blog posts ─────────────────────────────────────────────────────────
   The posts keep their own inline styles and markup; these overrides re-point
   their palette at the site tokens. Figures keep their light-theme colours, so
   they sit on a light plate the way thumbnails do. */
.panes-post {
  --bg: var(--pn-bg);
  --paper: var(--pn-raise);
  --fg: var(--pn-fg);
  --fg-mute: var(--pn-dim);
  --fg-faint: var(--pn-quiet);
  --rule: var(--pn-rule);
  --hi: var(--pn-hover);
  --link: var(--pn-accent);
  --link-visited: var(--pn-accent);
  --font-sans: var(--pn-mono);
  --font-mono: var(--pn-mono);
  font-size: 15px;
  line-height: 1.75;
}
.post-main { display: block; min-width: 0; }
.panes-post article.post {
  max-width: 800px;
  margin: 0;
  padding: 0;
}
.post > p.meta:first-of-type { display: none; }
.panes-post h1,
.panes-post h2,
.panes-post h3 { color: var(--pn-fg); font-family: var(--pn-mono); }
.panes-post .post h1 { font-size: 34px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; text-wrap: pretty; margin: 0 0 24px; }
.post-byline { margin: 0 0 24px !important; font-size: 13px; line-height: 1.6 !important; color: var(--pn-quiet); }
.panes-post .post .subtitle { color: var(--pn-dim); font-size: 15px; line-height: 1.75; margin: 0 0 24px; font-style: normal; }
.panes-post .paper-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 48px; }
.panes-post .paper-links .btn-pill {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pn-accent);
  text-decoration: none;
}
.panes-post .paper-links .btn-pill::before { content: '↗ '; }
.panes-post .paper-links .btn-pill:hover { background: none; }

.panes-post .post h2 { font-size: 21px; line-height: 1.4; font-weight: 600; margin: 56px 0 18px; scroll-margin-top: 24px; }
.panes-post .post h2::before { content: '## '; color: var(--pn-accent); font-weight: 400; }
.panes-post .post h3 { font-size: 16px; margin: 36px 0 12px; }
.panes-post .post p { margin: 0 0 20px; line-height: 1.75; text-wrap: pretty; }
.panes-post .post li { line-height: 1.75; margin-bottom: 8px; }
.panes-post .post ul, .panes-post .post ol { margin: 0 0 20px; }
.panes-post a { text-decoration-color: color-mix(in oklch, var(--pn-accent) 45%, transparent); }
.panes-post .post .tldr,
.panes-post .post .callout {
  margin: 0 0 40px;
  padding: 24px 28px;
  background: var(--pn-raise);
  border: 0;
  border-radius: 0;
}
.panes-post .post .tldr p,
.panes-post .post .callout p { margin: 0 0 12px; line-height: 1.75; font-size: 15px; }
.panes-post .post .tldr p:last-child,
.panes-post .post .callout p:last-child { margin-bottom: 0; }
.panes-post .tldr .label,
.panes-post .tldr-label,
.panes-post .callout-label { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--pn-accent); }
.panes-post .tldr strong,
.panes-post .callout strong { color: var(--pn-accent); }
.panes-post .post blockquote {
  margin: 32px 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--pn-accent);
  color: var(--pn-fg);
}
.panes-post .post blockquote p { font-size: 18px; line-height: 1.65; font-style: italic; margin: 0; }
.panes-post code { background: var(--pn-hover); color: var(--pn-fg); overflow-wrap: anywhere; }
.panes-post pre { background: var(--pn-raise); color: var(--pn-fg); border-color: var(--pn-rule); }
.panes-post table { margin: 28px 0 32px; }
.panes-post th { border-bottom-color: var(--pn-rule); color: var(--pn-quiet); }
.panes-post td { border-bottom-color: transparent; }
.panes-post tr.hl td,
.panes-post tr.highlight td { background: none; color: var(--pn-accent); }
.panes-post details.glossary { border-color: var(--pn-rule); border-radius: 0; margin: 32px 0; }

/* Figures on a light plate, filling the text column. */
.panes-post .post figure { margin: 40px 0; }
.panes-post .post > figure.chart { width: auto; max-width: none; margin-left: 0; transform: none; }
.panes-post figure svg,
.panes-post figure img { background: var(--pn-plate) !important; border-color: var(--pn-rule) !important; }
.panes-post .post figcaption { margin-top: 20px; font-size: 12px; line-height: 1.6; color: var(--pn-quiet); }

.post-next {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--pn-rule);
}
.post-next a { display: flex; flex-direction: column; gap: 6px; text-decoration: none !important; color: var(--pn-fg) !important; }
.post-next a span:first-child { color: var(--pn-quiet); font-size: 13px; }
.post-next a span:last-child { font-weight: 600; }
.post-next a.post-next__all { font-size: 13px; color: var(--pn-quiet) !important; }
.post-next a.post-next__all:hover { color: var(--pn-accent) !important; opacity: 1; }

/* The reproducibility panel every post carries before its limitations. */
.panes-post table.repro { width: 100%; border-collapse: collapse; font-size: 14px; }
.panes-post table.repro th { width: 8.5em; padding: 8px 16px 8px 0; text-align: left; vertical-align: top; font-weight: 500; color: var(--pn-quiet); border-bottom: 1px solid var(--pn-line); }
.panes-post table.repro td { padding: 8px 0; vertical-align: top; line-height: 1.6; border-bottom: 1px solid var(--pn-line); overflow-wrap: anywhere; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .side { padding-right: 36px; }
  .split__main { padding-right: 48px; }
}

/* On short screens the pinned column (figure, name, bio, nav, now) would run
   past the bottom of the viewport, so it scrolls with the page instead. */
@media (min-width: 901px) and (max-height: 860px) {
  .side__pin { position: static; }
}

/* Below this the column stops being pinned and becomes a header. On inner
   pages it shrinks to name + nav so the content starts on the first screen. */
@media (max-width: 900px) {
  :root { --pn-top: 48px; }
  .split { display: block; }
  .side {
    padding: 40px 16px 32px;
    border-right: 0;
    border-bottom: 1px solid var(--pn-line);
    gap: 24px;
  }
  .side__pin { position: static; gap: 20px; }
  .side__name { font-size: 30px; }
  .side__nav { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
  .side__nav a::before { content: none; }
  .side__nav a[aria-current]::before { content: '→\00a0'; }
  .side__links { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
  .side::before { content: none; }
  .side__art { margin: 0; }
  .split--inner .side__art { display: none; }
  .side__grid { flex-basis: 100%; margin-bottom: 8px; }
  .split--inner .side { padding-top: 24px; padding-bottom: 20px; }
  .split--inner .side__name { font-size: 22px; }
  .split--inner .side__name br { display: none; }
  .split--inner .side__bio,
  .split--inner .side__now,
  .split--inner .side__links { display: none; }
  .split__main { padding: 40px 16px 40px; gap: 56px; }
  .flow { gap: 56px; }
  .posts { gap: 32px; }
  .posts__title { font-size: 19px; }
  .proj-main { gap: 48px; }
  .proj-head h1 { font-size: 26px; }
  .proj-list a { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rows a { gap: 16px; }
  .feat { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .panes-post .post h1 { font-size: 25px; }
  .panes-post .post h2 { font-size: 18px; margin-top: 44px; }
  .panes-post .post .tldr, .panes-post .post .callout { padding: 22px 20px; }
  .panes-post .paper-links { margin-bottom: 36px; }
  .panes-post .post table { display: block; overflow-x: auto; }
  .panes-post .post table.repro { display: table; }
  .panes-post table.repro th { width: 6.5em; padding-right: 10px; }
}