/* Jog's type: Source Serif 4 for display, Inter for text, IBM Plex Mono for labels and code. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&family=Inter:ital,wght@0,400..700;1,400..700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..600;1,8..60,400..600&display=swap");

/* Jog's light palette, copied from usejog.com. */
:root {
  --jog-paper: #f5f0e7;
  --jog-surface: #f4ebda;
  --jog-surface-2: #ebdfca;
  --jog-line: #d9cdb9;
  --jog-line-2: #bfb096;
  --jog-ink: #2a2119;
  --jog-ink-2: #4b4036;
  --jog-ink-3: #574a3e;
  --jog-green: #4e6b2e;
  --jog-green-bar: #5f7f3a;
  --jog-green-deep: #3a5520;
  --jog-green-mark: #5f7f3a3d;
  --jog-green-wash: #5f7f3a1f;
  --jog-key: #76593a;
  --jog-red: #a33024;
  --jog-del: #a14a2c;
  --jog-hover: #3428120d;
  --jog-rim: #ffffffb3;
  --jog-shade-near: #34281212;
  --jog-shade: #34281233;
  --jog-shadow-card: inset 0 1px 0 var(--jog-rim), 0 1px 2px var(--jog-shade-near),
    0 18px 40px -22px var(--jog-shade);
  --jog-shadow-window: 0 0 0 1px #3428121a, 0 2px 4px var(--jog-shade-near),
    0 40px 90px -40px var(--jog-shade);
  --font-jog-serif: "Source Serif 4", Georgia, serif;
  --font-jog-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-jog-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    monospace;
}

body.theme-light,
body.theme-dark {
  color-scheme: light;
  --background-primary: var(--jog-paper);
  --background-primary-alt: var(--jog-surface);
  --background-secondary: var(--jog-paper);
  --background-secondary-alt: var(--jog-surface);
  --background-modifier-border: var(--jog-line);
  --background-modifier-border-hover: var(--jog-line-2);
  --background-modifier-hover: var(--jog-hover);
  --background-modifier-border-focus: var(--jog-green-bar);
  --background-modifier-form-field: var(--jog-surface);
  --background-modifier-form-field-hover: var(--jog-surface);
  --text-normal: var(--jog-ink-2);
  --text-muted: var(--jog-ink-3);
  --text-faint: var(--jog-ink-3);
  --text-on-accent: var(--jog-paper);
  --text-accent: var(--jog-green);
  --text-accent-hover: var(--jog-green-deep);
  --text-selection: var(--jog-green-mark);
  --interactive-accent: var(--jog-green-bar);
  --interactive-accent-hover: var(--jog-green);
  --interactive-normal: var(--jog-surface);
  --interactive-hover: var(--jog-surface-2);
  --bold-color: var(--jog-ink);
  --tag-color: var(--jog-ink-2);
  --tag-color-hover: var(--jog-green);
  --tag-background: var(--jog-surface-2);
  --tag-background-hover: var(--jog-green-wash);
  --code-normal: var(--jog-ink);
  --code-background: var(--jog-surface);
  --code-comment: var(--jog-ink-3);
  --code-function: var(--jog-key);
  --code-important: var(--jog-red);
  --code-keyword: var(--jog-green);
  --code-operator: var(--jog-ink-3);
  --code-property: var(--jog-ink-2);
  --code-punctuation: var(--jog-ink-3);
  --code-string: var(--jog-del);
  --code-tag: var(--jog-green);
  --code-value: var(--jog-red);
  --table-border-width: 0px;
  --table-text-size: 0.875rem;
  /* Callout colors are RGB triplets; these default to Obsidian blue. */
  --callout-default: 95, 127, 58;
  --callout-info: 95, 127, 58;
  --callout-todo: 95, 127, 58;
  --font-text: var(--font-jog-sans);
  --font-interface: var(--font-jog-sans);
  --font-monospace: var(--font-jog-mono);
  --font-text-size: 18px;
  --line-height-normal: 1.65;
  --h1-font: var(--font-jog-serif);
  --h2-font: var(--font-jog-serif);
  --h3-font: var(--font-jog-serif);
  --h4-font: var(--font-jog-sans);
  --h5-font: var(--font-jog-sans);
  --h6-font: var(--font-jog-sans);
  --h1-color: var(--jog-ink);
  --h2-color: var(--jog-ink);
  --h3-color: var(--jog-ink);
  --h4-color: var(--jog-ink);
  --h5-color: var(--jog-ink);
  --h6-color: var(--jog-ink);
  --h1-weight: 500;
  --h2-weight: 500;
  --h3-weight: 500;
  --h4-weight: 600;
  --h5-weight: 600;
  --h6-weight: 600;
}

html,
body {
  background: var(--jog-paper);
}

body {
  font-family: var(--font-jog-sans);
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: var(--jog-ink);
  background: var(--jog-green-mark);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--jog-green-bar);
  outline-offset: 2px;
}

.published-container {
  --page-width: 840px;
  --page-side-padding: 56px;
  --page-title-color: var(--jog-ink);
  --page-title-font: var(--font-jog-serif);
  --page-title-line-height: 1.06;
  --page-title-size: clamp(2.25rem, 1.3rem + 2.2vw, 3.25rem);
  --page-title-weight: 500;
  --component-title-color: var(--jog-ink-3);
  --component-title-font: var(--font-jog-mono);
  --component-title-size: 12px;
  --component-title-transform: none;
  --component-title-weight: 500;
  --sidebar-font-size: 14px;
  --sidebar-left-width: 270px;
  --sidebar-left-background: var(--jog-paper);
  --sidebar-left-border-width: 1px;
  --sidebar-left-border-color: var(--jog-line);
  --sidebar-right-width: 300px;
  --sidebar-right-background: var(--jog-paper);
  --site-name-color: var(--jog-ink);
  --site-name-color-hover: var(--jog-green);
  --site-name-size: 24px;
  --site-name-weight: 500;
  --site-menu-icon-color: var(--jog-ink-3);
  --site-menu-icon-color-hover: var(--jog-ink);
  --nav-collapse-icon-color: var(--jog-ink-3);
  --nav-collapse-icon-color-hover: var(--jog-ink);
  --nav-parent-item-color: var(--jog-ink);
  --nav-parent-item-color-active: var(--jog-ink);
  --nav-parent-item-weight: 500;
  --nav-item-color: var(--jog-ink-2);
  --nav-item-color-hover: var(--jog-ink);
  --nav-item-color-active: var(--jog-ink);
  --nav-item-border-color: transparent;
  --nav-item-border-color-hover: transparent;
  --nav-item-border-color-active: transparent;
  --nav-item-weight-active: 500;
  --outline-heading-color: var(--jog-ink-3);
  --outline-heading-color-hover: var(--jog-ink);
  --outline-heading-color-active: var(--jog-ink);
  --outline-heading-weight-active: 500;
}

.site-body-left-column {
  padding-top: 38px;
}

/* Publish declares --site-name-font but never reads it. */
.site-body-left-column-site-name {
  padding: 4px 32px 30px 2px;
  font-family: var(--font-jog-serif);
  letter-spacing: -0.018em;
}

/* Jog's wordmark dots its j in green; the site name ends on the same dot. Publish renders
   the element empty when the site options have no name, and a lone dot would remain. */
.site-body-left-column-site-name:not(:empty)::after,
.site-header-text:not(:empty)::after {
  content: "";
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-inline-start: 0.06em;
  border-radius: 50%;
  background: var(--jog-green-bar);
}

.site-body-left-column-site-theme-toggle {
  display: none;
}

.site-header {
  height: 64px;
  padding: 12px 24px;
  border-color: var(--jog-line);
  background: color-mix(in srgb, var(--jog-paper) 88%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
}

.site-header-text {
  font-family: var(--font-jog-serif);
  font-weight: 500;
  letter-spacing: -0.018em;
}

/* Publish's input focus rules outrank this one, so focus still draws its green ring. */
.search-view-container .search-bar {
  height: 36px;
  border: 1px solid var(--jog-line-2);
  border-radius: 6px;
  color: var(--jog-ink);
  box-shadow: inset 0 1px 0 var(--jog-rim), 0 1px 2px var(--jog-shade-near);
}

.nav-view-outer .tree-item-self {
  min-height: 36px;
  align-items: center;
  border-radius: 8px;
  font-family: var(--font-jog-sans);
  font-size: 14px;
  letter-spacing: -0.005em;
}

/* The active page mirrors Jog's selected segment: a raised paper chip, not a colored bar.
   Its edge is an inset shadow because the nav scrolls, and the scroll container clips
   anything painted outside the item's box. */
.nav-view-outer .tree-item-self.mod-active {
  background: var(--jog-surface);
  box-shadow: inset 0 0 0 1px var(--jog-line-2), inset 0 2px 0 var(--jog-rim);
}

.nav-view-outer .tree-item-self:hover:not(.mod-collapsible):not(.mod-active) {
  background: var(--jog-hover);
}

.outline-view-outer .tree-item-self {
  font-family: var(--font-jog-sans);
  font-size: 13px;
}

.published-container.has-graph .graph-view-outer,
.site-footer {
  display: none;
}

.markdown-preview-view {
  padding-top: 42px;
  color: var(--jog-ink-2);
}

.published-container .markdown-rendered h1.page-header {
  margin: 44px 0 40px;
  letter-spacing: -0.018em;
}

.markdown-rendered :is(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

/* Publish spaces headings under .published-container; these rules match that specificity. */
.published-container .markdown-rendered h2 {
  margin: 3.4rem 0 0.8rem;
  border-top: 1px solid var(--jog-line);
  border-bottom: 0;
  padding: 1.4rem 0 0;
  font-size: clamp(1.625rem, 1.15rem + 1.25vw, 2.25rem);
  line-height: 1.16;
  letter-spacing: -0.012em;
}

.published-container .markdown-rendered h3 {
  margin: 2.6rem 0 0.5rem;
  font-size: clamp(1.375rem, 1.2rem + 0.45vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.008em;
}

.published-container .markdown-rendered h4 {
  margin: 2.2rem 0 0.4rem;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.markdown-rendered :is(p, li) {
  color: var(--jog-ink-2);
  letter-spacing: -0.006em;
}

.markdown-rendered p {
  margin-block: 1.1em;
}

.markdown-rendered strong {
  color: var(--jog-ink);
  font-weight: 600;
}

.markdown-rendered a {
  color: var(--jog-green);
  text-decoration-line: underline;
  text-decoration-color: var(--jog-green-mark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.12s, text-decoration-color 0.12s;
}

.markdown-rendered a:hover {
  color: var(--jog-green-deep);
  text-decoration-color: currentColor;
}

.markdown-rendered a.tag {
  border: 1px solid var(--jog-line);
  border-radius: 999px;
  padding: 0.18em 0.6em;
  color: var(--jog-ink-2);
  background: var(--jog-surface-2);
  font-family: var(--font-jog-mono);
  font-size: 0.75em;
  text-decoration: none;
}

.markdown-rendered a.tag:hover {
  color: var(--jog-green);
  background: var(--jog-green-wash);
}

.markdown-rendered hr {
  margin: 3.6rem 0;
  border-color: var(--jog-line);
}

.markdown-rendered blockquote {
  margin: 2.4rem 0;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-inline-start: 2px solid var(--jog-green-bar);
  color: var(--jog-ink);
  font-family: var(--font-jog-serif);
  font-size: 1.375rem;
  line-height: 1.45;
  letter-spacing: -0.008em;
}

.markdown-rendered blockquote p {
  color: inherit;
  letter-spacing: inherit;
}

.markdown-rendered :not(pre) > code {
  border: 1px solid var(--jog-line);
  border-radius: 4px;
  padding: 0.1em 0.38em;
  color: var(--jog-ink);
  background: var(--jog-surface-2);
  font-family: var(--font-jog-mono);
  font-size: 0.85em;
}

.markdown-rendered pre {
  margin: 2rem 0;
  border: 1px solid var(--jog-line);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
  background: var(--jog-surface);
  box-shadow: inset 0 1px 0 var(--jog-rim), 0 1px 2px var(--jog-shade-near),
    0 4px 12px -6px var(--jog-shade-near);
  font-family: var(--font-jog-mono);
  font-size: 0.875rem;
  line-height: 1.75;
}

.markdown-rendered pre code {
  font-family: inherit;
}

.markdown-rendered pre .copy-code-button {
  border: 1px solid var(--jog-line);
  border-radius: 4px;
  color: var(--jog-ink-3);
  background: var(--jog-surface-2);
  box-shadow: none;
  font-family: var(--font-jog-mono);
  font-size: 12px;
}

.markdown-rendered table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

/* Jog labels columns in small mono sentence case rather than tracked capitals. */
.markdown-rendered th {
  color: var(--jog-ink-3);
  font-family: var(--font-jog-mono);
  font-size: 0.75rem;
  font-weight: 400;
  text-align: start;
}

.markdown-rendered :is(th, td) {
  padding: 0.55rem 0.75rem 0.55rem 0;
}

.markdown-rendered td {
  border-top: 1px solid var(--jog-line);
}

.markdown-rendered img {
  border-radius: 10px;
}

.markdown-rendered .callout {
  margin: 2rem 0;
  border: 1px solid var(--jog-line);
  border-radius: 12px;
  background: var(--jog-surface);
  box-shadow: var(--jog-shadow-card);
}

.markdown-rendered .callout-title {
  color: var(--jog-ink);
  font-family: var(--font-jog-sans);
  font-size: 0.9375rem;
  font-weight: 600;
}

.markdown-rendered .footnotes {
  color: var(--jog-ink-3);
  font-size: 0.875rem;
}

.blog-home .page-header {
  display: none;
}

/* Home's headings are HTML, so Publish's outline column stays empty there; the page takes
   that width instead of reserving it. */
.published-container.is-readable-line-width .markdown-preview-view.blog-home .markdown-preview-sizer {
  max-width: 1180px;
}

.published-container:has(.markdown-preview-view.blog-home) .site-body-right-column {
  display: none;
}

@media screen and (min-width: 1000px) {
  body:not(.sliding-windows)
    .published-container.is-readable-line-width.has-navigation
    .publish-renderer
    > .markdown-preview-view.blog-home
    > .markdown-preview-sizer {
    margin-inline: auto;
  }
}

/* The hero is Jog's painting window: art on the right, a paper wash under the text. */
.blog-home-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(20rem, 44svh, 26rem);
  margin-top: 0.5rem;
  border-radius: 14px;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 5vw, 4.5rem);
  overflow: hidden;
  background: var(--jog-surface);
  box-shadow: var(--jog-shadow-window);
}

/* The URL is relative to publish.css, which Publish serves beside the site's other files.
   The .jpg holds JPEG XL; see PUBLISHING.md. */
.blog-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--jog-paper) 88%, transparent) 0%,
      color-mix(in srgb, var(--jog-paper) 80%, transparent) 40%,
      color-mix(in srgb, var(--jog-paper) 46%, transparent) 56%,
      color-mix(in srgb, var(--jog-paper) 12%, transparent) 68%,
      transparent 78%
    ),
    url("static/gare-saint-lazare.jpg") 62% 58% / cover no-repeat;
}

.blog-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.16;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.13  0 0 0 0 0.1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.blog-home-hero > * {
  max-width: min(34rem, 52%);
}

.published-container .markdown-rendered .blog-home-hero h1 {
  margin: 0;
  border: 0;
  padding: 0;
  font-size: clamp(2.25rem, 0.8rem + 3vw, 3.5rem);
  letter-spacing: -0.022em;
  line-height: 1.04;
}

.blog-home-hero .blog-home-deck {
  margin: 1.6rem 0 0;
  color: var(--jog-ink-2);
  font-size: clamp(1.1875rem, 0.9rem + 0.85vw, 1.5rem);
  letter-spacing: -0.014em;
  line-height: 1.45;
  text-wrap: pretty;
}

.blog-home .blog-home-credit {
  margin: 0.9rem 2px 0;
  color: var(--jog-ink-3);
  font-size: 0.8125rem;
  text-align: end;
}

.blog-home .blog-home-credit a {
  color: inherit;
  text-decoration-color: var(--jog-line-2);
}

.blog-home .blog-home-credit a:hover {
  color: var(--jog-ink);
  text-decoration-color: currentColor;
}

/* The bio and Explore share a row on wide screens, split 7:5 like Jog's 12-column grid. */
.blog-home .blog-home-intro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: 2rem 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.published-container .markdown-rendered .blog-home-about h2 {
  margin: 0;
  border: 0;
  padding: 0;
}

.blog-home .blog-home-about p {
  margin: 0.9rem 0 0;
  color: var(--jog-ink-2);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
  letter-spacing: -0.012em;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Jog labels sections in small mono sentence case. */
.published-container .markdown-rendered .blog-home-explore h2 {
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--jog-ink-3);
  font-family: var(--font-jog-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}

.blog-home .blog-home-explore ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.blog-home .blog-home-explore li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  border: 1px solid var(--jog-line);
  border-radius: 12px;
  padding: 1rem 1.25rem 1.1rem;
  background: var(--jog-surface);
  box-shadow: var(--jog-shadow-card);
}

.blog-home .blog-home-explore li:hover {
  border-color: var(--jog-line-2);
}

.blog-home .blog-home-explore li > a {
  color: var(--jog-ink);
  font-family: var(--font-jog-serif);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.2;
  text-decoration-color: transparent;
}

/* The whole card is the link's hit area. */
.blog-home .blog-home-explore li > a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.blog-home .blog-home-explore li:hover > a {
  color: var(--jog-ink);
  text-decoration-color: currentColor;
}

.blog-home .blog-home-explore li > span {
  color: var(--jog-ink-2);
  font-size: 0.9375rem;
  letter-spacing: -0.006em;
  line-height: 1.5;
}

@media screen and (max-width: 1000px) {
  .published-container {
    --page-width: 800px;
    --page-side-padding: 40px;
  }

  /* Below this width the sidebar leaves the hero too narrow for side-by-side text, so the
     text sits above the art and the wash runs top to bottom. The wash stops are measured
     from the bottom so the text keeps its cover however many lines it wraps to. */
  .blog-home-hero {
    justify-content: flex-start;
    min-height: 0;
    padding: 2.25rem 1.5rem 11rem;
  }

  .blog-home-hero::before {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--jog-paper) 90%, transparent) 0%,
        color-mix(in srgb, var(--jog-paper) 82%, transparent) calc(100% - 11rem),
        color-mix(in srgb, var(--jog-paper) 24%, transparent) calc(100% - 7rem),
        transparent calc(100% - 3.5rem)
      ),
      url("static/gare-saint-lazare.jpg") 62% 100% / cover no-repeat;
  }

  .blog-home-hero > * {
    max-width: none;
  }

  .blog-home .blog-home-intro {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 750px) {
  body.theme-light,
  body.theme-dark {
    --font-text-size: 17px;
  }

  .published-container {
    --page-side-padding: 22px;
  }

  .site-header {
    height: 60px;
    padding-inline: 18px;
  }

  .markdown-preview-view {
    padding-top: 22px;
  }

  .published-container .markdown-rendered h1.page-header {
    margin: 28px 0 30px;
  }

  .markdown-rendered pre {
    margin-inline: -12px;
    border-radius: 8px;
    padding: 1.1rem 1rem;
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

@media print {
  body,
  body.theme-light,
  body.theme-dark {
    background: white;
  }

  .site-body-left-column,
  .site-body-right-column,
  .site-header {
    display: none;
  }

  .markdown-preview-view {
    padding: 0;
  }

  .blog-home-hero {
    box-shadow: none;
  }

  .blog-home-hero::before,
  .blog-home-hero::after {
    display: none;
  }
}