/* ---------------------------------------------------------------------------
   isapollnik.github.io

   Loaded after the jekyll-theme-minimal stylesheet. Everything here is scoped
   to a class (.site, .sidebar, .content, ...) so it outranks the theme's
   element selectors on specificity alone - no !important needed, and no
   dependence on link order.

   Design intent: one background colour, one accent, hairline rules for
   structure. Nothing on the page competes with the text.
   --------------------------------------------------------------------------- */

:root {
  /* Surfaces. Deliberately a single tone - no card, no panel, no shadow. */
  --bg: #fbfbfa;
  --rule: #e7e5e0;
  --rule-soft: #efedea;

  /* Text, from primary to faintest. Every tone here clears WCAG AA (4.5:1)
     against --bg, checked at the smallest size it's used at - the secondary
     text carries real content (venues, paper status), so none of it is
     allowed to fade into decoration. */
  --ink: #1f2328;      /* 15.3:1 */
  --ink-soft: #414852; /* 8.9:1  */
  --muted: #5c636d;    /* 5.9:1  */
  --faint: #6b727c;    /* 4.7:1  */

  /* A single desaturated accent, dark enough to pass AA on --bg. */
  --accent: #2f5f7f;
  --accent-strong: #1e4560;
  --accent-wash: rgba(47, 95, 127, 0.09);
  --accent-rule: rgba(47, 95, 127, 0.45);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Two caps, because comfortable measure is counted in characters, not
     pixels. --measure is the content column: titles, meta and links are
     short lines and are happy to use it all. --measure-text is tighter and
     applies to running prose, which stays readable no matter how wide the
     window gets. Small type needs fewer pixels for the same character
     count, so the abstract caps tighter still (set on its own rule). */
  --measure: 44rem;      /* content column  */
  --measure-text: 38rem; /* ~70 characters of body prose at 17px */
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- layout --- */

/* Wider frame for large monitors. The number is the sum of its parts -
   17.5rem sidebar + 4rem gutter + 44rem content column - so the column ends
   where the frame does and no dead space opens up on the right. Prose inside
   is capped separately by --measure-text, so a wider window gives more room
   to titles and the map, not longer lines of text. */
.site {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 65.5rem;
  margin: 0 auto;
  background: none;
}

/* The theme sheet floats and fixes `header` / `section` and hard-codes their
   widths, including inside its own media queries. Every one of those is an
   element selector, so resetting them once here on the class is enough. */
.sidebar {
  position: sticky;
  top: 0;
  float: none;
  flex: 0 0 17.5rem;
  width: 17.5rem;
  max-height: 100vh;
  overflow-y: auto;
  padding: 4.5rem 3rem 3rem 0;
  border: 0;
  border-right: 1px solid var(--rule);
}

.content {
  position: static;
  float: none;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 4.5rem 0 6rem 4rem;
  border: 0;
}

.content-inner {
  max-width: var(--measure);
}

/* Pages that set `wide: true` in front matter (the map) opt out of the
   prose measure and run to the full content column. */
.content-inner--wide {
  max-width: none;
}

/* ----------------------------------------------------------------- links --- */

/* A quiet underline reads as a link without needing a loud colour. The
   offset keeps it clear of descenders. */
.site a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent-rule);
  text-underline-offset: 0.16em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.site a:hover,
.site a:focus {
  color: var(--accent-strong);
  text-decoration-color: currentColor;
  font-weight: inherit; /* the theme bolds links on hover; that shifts layout */
}

.site a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------- sidebar --- */

.sidebar img {
  display: block;
  width: 6rem;
  height: 6rem;
  margin: 0 0 1.75rem;
  border-radius: 50%;
  object-fit: cover;
}

/* On subpages the photo links home; hint at that on hover. */
.sidebar .logo-link {
  display: block;
  width: 6rem;
  text-decoration: none;
}

.sidebar .logo-link img {
  transition: opacity 0.15s ease;
}

.sidebar .logo-link:hover img {
  opacity: 0.82;
}

.sidebar .tagline {
  margin: 0 0 1.75rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.sidebar .site-nav {
  margin: 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}

/* The theme absolutely positions `header ul` at max-width:960px. */
@media (max-width: 960px) {
  .sidebar .site-nav {
    position: static;
    right: auto;
    top: auto;
  }
}

.sidebar .site-nav li + li {
  margin-top: 0.9375rem;
}

/* Nav labels sit in ink, not accent: four bright blue links stacked up is the
   busiest thing on a page this quiet. Accent is kept for hover. */
.sidebar .nav-link {
  display: block;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
  color: var(--accent);
  text-decoration: none;
}

.sidebar .nav-link small {
  display: block;
  margin-top: 0.125rem;
  color: var(--faint);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
}

.sidebar .nav-link:hover small {
  color: var(--muted);
}

/* -------------------------------------------------------------- headings --- */

.content h1 {
  margin: 0 0 2.5rem;
  color: var(--ink);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* Section labels are the skim targets: small, tracked, and each one opens with
   a hairline so the eye can find them running down the left edge. */
.content h2 {
  margin: 3.5rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.content h2:first-of-type {
  margin-top: 2.5rem;
}

.content h3 {
  margin: 0 0 0.375rem;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.005em;
}

/* ----------------------------------------------------------------- prose --- */

/* Running prose is capped tighter than the column it sits in. Lists and
   blockquotes are prose too. */
.content p,
.content ul,
.content ol,
.content blockquote {
  max-width: var(--measure-text);
}

.content p {
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.content p:last-child {
  margin-bottom: 0;
}

.content strong,
.content b {
  color: var(--ink);
  font-weight: 600;
}

.content em {
  font-style: italic;
}

/* --------------------------------------------------------------- research --- */

.research-item + .research-item {
  margin-top: 1.75rem;
}

.research-item h3 a {
  color: var(--ink);
  text-decoration-color: var(--rule);
}

.research-item h3 a:hover,
.research-item h3 a:focus {
  color: var(--accent);
}

/* Authors, venue and status all share one meta line so the title above it
   stays a clean, scannable single thought. */
.research-meta {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.research-note {
  color: var(--faint);
}

/* Spaced with a gap rather than typed separators: nothing decorative ends up
   inside a link's click target, and the markup holds only real links. */
.research-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.375rem;
  margin-top: 0.4375rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Abstracts are collapsed by default so the page stays skimmable.
   Built on <details>/<summary>: it toggles, takes focus and announces its
   state without any JavaScript, so it still works if a script fails. */
.research-abstract {
  margin-top: 0.5rem;
}

/* The toggle is a quiet text button, not a filled one - it sits inside a
   list of papers and shouldn't outweigh the titles. */
.research-abstract > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  list-style: none; /* Firefox */
  user-select: none;
  transition: color 0.15s ease;
}

/* Safari/Chrome draw their own marker; we supply the caret below. */
.research-abstract > summary::-webkit-details-marker {
  display: none;
}

.research-abstract > summary::marker {
  content: "";
}

.research-abstract > summary:hover {
  color: var(--accent-strong);
}

.research-abstract > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* A caret that rotates to point down when open: the affordance is the shape,
   so the label can stay a plain, stable word. */
.research-abstract > summary .caret {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: 60% 60%;
  transition: transform 0.18s ease;
}

.research-abstract[open] > summary .caret {
  transform: rotate(45deg);
}

.research-abstract-body {
  /* Left-aligned, not justified: justification at this measure opens rivers
     of whitespace, which is the opposite of easy to read. At 15px a line
     needs fewer pixels than body prose for the same character count, hence
     the tighter cap. */
  max-width: 34rem;
  margin-top: 0.625rem;
  padding-left: 0.875rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.72;
  text-align: left;
}

/* Kramdown may wrap block content in a <p>; keep the abstract's own type
   rather than inheriting the wider body-prose rule. */
.research-abstract-body p {
  max-width: none;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .research-abstract > summary .caret {
    transition: none;
  }
}

.jmp-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.125rem 0.4375rem;
  border-radius: 3px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.1em;
}

/* --------------------------------------------- markdown odds and ends ----- */

.content ul,
.content ol {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  color: var(--ink-soft);
}

.content li + li {
  margin-top: 0.375rem;
}

.content hr {
  height: 1px;
  margin: 2.5rem 0;
  border: 0;
  background: var(--rule);
}

.content blockquote {
  margin: 0 0 1.25rem;
  padding-left: 1.125rem;
  border-left: 2px solid var(--rule);
  color: var(--muted);
  font-style: normal;
}

.content code,
.content pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.875em;
}

.content code {
  padding: 0.1em 0.3em;
  border-radius: 3px;
  background: var(--rule-soft);
  color: var(--ink);
}

.content pre {
  margin: 0 0 1.25rem;
  padding: 0.875rem 1rem;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--rule-soft);
}

.content pre code {
  padding: 0;
  background: none;
}

.content table {
  width: 100%;
  margin: 0 0 1.25rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.content th,
.content td {
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}

.content th {
  color: var(--ink);
  font-weight: 600;
}

.content img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------ responsive --- */

@media (max-width: 860px) {
  .site {
    flex-direction: column;
    max-width: 40rem;
    padding: 0 1.75rem;
  }

  .sidebar {
    position: static;
    flex: none;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: 3rem 0 2rem;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  /* Horizontal nav on narrow screens: the links are short, and it keeps the
     photo and text above the fold. */
  .sidebar .site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
    padding-top: 1.25rem;
  }

  .sidebar .site-nav li + li {
    margin-top: 0;
  }

  .content {
    padding: 2.5rem 0 4rem;
  }

  /* Below the breakpoint the viewport is already the constraint, so the prose
     caps would only make some blocks narrower than their neighbours. */
  .content p,
  .content ul,
  .content ol,
  .content blockquote,
  .research-abstract-body {
    max-width: none;
  }

  .content h1 {
    font-size: 1.75rem;
    margin-bottom: 2rem;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 1rem;
  }

  .site {
    padding: 0 1.25rem;
  }

  .content h1 {
    font-size: 1.5rem;
  }

  .content h2 {
    margin-top: 2.75rem;
  }

  .content p,
  .content h3 {
    font-size: 1rem;
  }
}

/* ---------------------------------------------------------------- print --- */

@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .site {
    display: block;
    max-width: none;
    padding: 0;
  }

  .sidebar {
    position: static;
    width: auto;
    max-height: none;
    padding: 0 0 1rem;
    border-right: 0;
    border-bottom: 1px solid #ccc;
  }

  .sidebar img {
    display: none;
  }

  .content {
    padding: 1.5rem 0 0;
  }

  .content-inner {
    max-width: none;
  }

  /* Abstracts are forced open for printing by a beforeprint handler in the
     layout; this just drops the toggle and its indent rule from the page. */
  .research-abstract > summary {
    display: none;
  }

  .research-abstract-body {
    max-width: none;
    padding-left: 0;
    border-left: 0;
  }

  .site a {
    color: #000;
    text-decoration: underline;
  }
}