/* ============================================================
   Elouan Salaün — portfolio
   Palette lives in :root; dark mode overrides only the tokens.
   ============================================================ */

:root {
  --bg:        #fbfbf9;
  --bg-raised: #ffffff;
  --text:      #1b1b1a;
  --muted:     #6d6b66;
  --faint:     #93908a;
  --border:    #e4e1db;
  --border-strong: #d2cec6;
  --accent:    #2f6285;
  --accent-soft: #eaf1f6;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --measure: 46rem;
  --pad: clamp(1.25rem, 5vw, 2.5rem);
}

[data-theme="dark"] {
  --bg:        #131312;
  --bg-raised: #1a1a19;
  --text:      #e9e7e2;
  --muted:     #9b978f;
  --faint:     #7a766e;
  --border:    #2b2a27;
  --border-strong: #3a3835;
  --accent:    #8ab6d6;
  --accent-soft: #1d2733;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #131312;
    --bg-raised: #1a1a19;
    --text:      #e9e7e2;
    --muted:     #9b978f;
    --faint:     #7a766e;
    --border:    #2b2a27;
    --border-strong: #3a3835;
    --accent:    #8ab6d6;
    --accent-soft: #1d2733;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--bg-raised); color: var(--text);
  padding: .6rem 1rem; border: 1px solid var(--border); border-radius: 6px;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 20; }

/* ---------- header / nav ---------- */

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.scrolled { border-bottom-color: var(--border); }

.nav {
  max-width: var(--measure);
  margin: 0 auto;
  padding: .85rem var(--pad);
  display: flex; align-items: center; gap: 1.25rem;
}
.nav-home {
  font-family: var(--serif);
  font-size: 1.05rem; font-weight: 600;
  color: var(--text); letter-spacing: .02em;
}
.nav-links {
  list-style: none; display: flex; gap: 1.35rem;
  margin: 0 0 0 auto; padding: 0;
  font-size: .875rem;
}
.nav-links a { color: var(--muted); }
.nav-links a:hover, .nav-links a.active { color: var(--text); text-decoration: none; }

.cv-button {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid var(--border); border-radius: 999px;
  padding: .3rem .7rem; line-height: 1;
  font-size: .8rem; color: var(--muted);
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.cv-button:hover { color: var(--text); border-color: var(--border-strong); text-decoration: none; }

.theme-toggle {
  background: none; border: 1px solid var(--border);
  color: var(--muted); border-radius: 999px;
  width: 30px; height: 30px; line-height: 1;
  font-size: .9rem; cursor: pointer; padding: 0;
  display: grid; place-items: center;
  transition: color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); }

.lang-switch {
  border: 1px solid var(--border); border-radius: 999px;
  height: 30px; padding: 0 .6rem; line-height: 1;
  display: inline-flex; align-items: center;
  font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  color: var(--muted);
  transition: color .15s ease, border-color .15s ease;
}
.lang-switch:hover { color: var(--text); border-color: var(--border-strong); text-decoration: none; }

@media (max-width: 34rem) {
  .nav-links { gap: .8rem; font-size: .78rem; }
  .nav { gap: .55rem; }
  .cv-button { padding: .28rem .55rem; font-size: .75rem; }
  .lang-switch { padding: 0 .45rem; }
}
/* Very narrow phones: links drop to their own row instead of overflowing. */
@media (max-width: 25rem) {
  .nav { flex-wrap: wrap; row-gap: .35rem; }
  .nav-home { margin-right: auto; }
  .nav-links { order: 3; width: 100%; margin: 0; justify-content: space-between; }
}

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

main { max-width: var(--measure); margin: 0 auto; padding: 0 var(--pad) 5rem; }

.intro { padding: clamp(3.5rem, 12vw, 6.5rem) 0 0; }
.intro-head {
  display: flex; align-items: center;
  gap: clamp(1rem, 4vw, 1.6rem);
  margin-bottom: 1.6rem;
}
.intro-head .tagline { margin-bottom: 0; }
.avatar {
  flex: none;
  width: clamp(4.5rem, 18vw, 7rem); height: auto;
  border-radius: 50%;
}
.intro h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 7vw, 3.1rem);
  font-weight: 600; letter-spacing: -.015em;
  line-height: 1.1; margin: 0 0 .9rem;
}
.tagline {
  font-size: clamp(1.05rem, 2.6vw, 1.2rem);
  color: var(--muted); max-width: 34rem; margin: 0 0 1.6rem;
}
.tagline em { color: var(--text); font-style: italic; }

.intro-links {
  list-style: none; display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin: 0; padding: 0; font-size: .9rem;
}
.intro-links a {
  color: var(--muted);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 2px;
}
.intro-links a:hover { color: var(--text); border-color: currentColor; text-decoration: none; }

.section { padding-top: clamp(3rem, 9vw, 4.5rem); }

.section > h2 {
  font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--faint);
  margin: 0 0 1.5rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.section p { margin: 0 0 1rem; }
.section-note { font-size: .85rem; color: var(--faint); margin-top: -.75rem !important; }

/* ---------- projects ---------- */

.project {
  border-bottom: 1px solid var(--border);
}
.project:first-of-type { border-top: 1px solid var(--border); }

.project-heading { margin: 0; font-size: inherit; font-weight: inherit; }

.project-head {
  display: block; position: relative; width: 100%;
  background: none; border: 0; padding: 1.4rem 10rem 1.4rem 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.project-head:hover .project-name { color: var(--accent); }

.project-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.18rem; font-weight: 600; line-height: 1.3;
  letter-spacing: -.005em;
  transition: color .15s ease;
}
.project-meta {
  display: block;
  font-family: var(--mono);
  font-size: .74rem; color: var(--faint);
  letter-spacing: .01em;
  margin-top: .35rem;
}
.project-summary {
  display: block;
  color: var(--muted); font-size: .93rem;
  margin-top: .55rem; max-width: 38rem;
}

.chevron {
  position: absolute; right: .35rem; top: 1.75rem;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: rotate(45deg);
  transition: transform .3s ease, border-color .15s ease;
}
.project-head:hover .chevron { border-color: var(--accent); }
.project.open .chevron { transform: rotate(-135deg); }

/* Stack pictogram, sitting just left of the chevron. The marks are drawn in
   black line art, so flip them on the dark background like the school logos. */
.project-icon {
  position: absolute; right: 2rem; top: 1.2rem;
  width: 7rem; height: 2.3rem;
  object-fit: contain; object-position: right center;
  opacity: .72; pointer-events: none;
  transition: opacity .15s ease;
}
.project-head:hover .project-icon { opacity: 1; }
[data-theme="dark"] .project-icon { filter: invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .project-icon { filter: invert(1); }
}
@media (max-width: 34rem) {
  .project-head { padding-right: 2.5rem; }
  .project-icon { display: none; }
}

/* Animated schematic shown under a project heading, outside the panel, so it
   is visible before the project is opened. It carries its own opaque
   background, so it is left as is under the dark theme. */
.project-preview {
  display: block;
  width: 100%; height: auto;
  margin: -.2rem 0 1.4rem;
  border-radius: 4px;
}

/* Collapse animation: 0fr -> 1fr on a grid row.
   Panels are open by default so the page still works without JS;
   the .js class (set inline in <head>) closes them. */
.panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s ease; }
.js .panel { grid-template-rows: 0fr; }
.js .project.open .panel { grid-template-rows: 1fr; }
.panel > .panel-inner { overflow: hidden; }

.panel-inner > *:first-child { margin-top: 0; }
.panel-inner { padding-bottom: .5rem; }
.js .project.open .panel-inner { padding-bottom: 2.2rem; }

.panel-inner h4 {
  font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .11em;
  color: var(--faint); margin: 2rem 0 .7rem;
}
.panel-inner p { margin: 0 0 1rem; }

.project-links {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin-top: 1.75rem !important; font-size: .875rem;
}

/* ---------- category carousel ----------
   Without JS the categories simply stack, each under its own label.
   With JS they sit side by side on a horizontal scroll-snap track; the track
   takes the height of the visible category (set in main.js). */

.cat-bar { display: none; }
.cat-label {
  font-family: var(--mono); font-size: .74rem; color: var(--faint);
  margin: 2rem 0 .75rem !important;
}
.cat-slide:first-child .cat-label { margin-top: 0 !important; }
/* "Selected projects" only holds placeholders that main.js fills in. */
html:not(.js) #cat-selected { display: none; }
html:not(.js) #cat-selected + .cat-slide .cat-label { margin-top: 0 !important; }

.js .cat-label { display: none; }
.js .cat-bar {
  display: flex; align-items: center; gap: .4rem;
  margin: 0 0 1.25rem;
}

.cat-tabs {
  display: flex; gap: .4rem; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }

.cat-tab {
  flex: none;
  display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: 1px solid var(--border); border-radius: 999px;
  height: 32px; padding: 0 .85rem; line-height: 1;
  font: inherit; font-size: .85rem; color: var(--muted);
  white-space: nowrap; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.cat-tab:hover { color: var(--text); border-color: var(--border-strong); }
.cat-tab[aria-selected="true"] {
  color: var(--accent); border-color: var(--accent); background: var(--accent-soft);
}
.cat-count { font-family: var(--mono); font-size: .72rem; color: var(--faint); }
.cat-tab[aria-selected="true"] .cat-count { color: inherit; }

.cat-arrow {
  flex: none; position: relative;
  width: 32px; height: 32px; padding: 0;
  background: none; border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s ease, opacity .15s ease;
}
.cat-arrow:hover:not(:disabled) { border-color: var(--border-strong); }
.cat-arrow:disabled { opacity: .35; cursor: default; }
/* Same stroke as the project chevron, pointing left / right. */
.cat-arrow span {
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
}
.cat-prev span { transform: translate(-30%, -50%) rotate(135deg); }
.cat-next span { transform: translate(-70%, -50%) rotate(-45deg); }
.cat-arrow:hover:not(:disabled) span { border-color: var(--accent); }

/* The gap keeps a sliver of the neighbouring slide out of view: slide widths
   are often fractional while scroll positions are whole pixels, which showed
   the edge of the full-width preview images next door as a thin line. */
.js .cat-track {
  display: flex; align-items: flex-start; gap: 2rem;
  position: relative;               /* offsetParent for the slides */
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.js .cat-track::-webkit-scrollbar { display: none; }
.js .cat-slide {
  flex: 0 0 100%; min-width: 0;
  scroll-snap-align: start; scroll-snap-stop: always;
}

@media (max-width: 34rem) {
  .cat-arrow { display: none; }
  .cat-tab { padding: 0 .7rem; font-size: .8rem; }
}

/* ---------- figures, tables, equations ---------- */

.fig {
  margin: 1.75rem 0;
  padding: 1.25rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.fig img, .fig svg { display: block; width: 100%; height: auto; }
.fig figcaption {
  margin-top: .9rem; padding-top: .75rem;
  border-top: 1px solid var(--border);
  font-size: .8rem; color: var(--faint);
}

/* inline SVG diagrams inherit the theme */
.d-box rect { fill: var(--accent-soft); stroke: var(--border-strong); stroke-width: 1; }
.d-line path { stroke: var(--border-strong); stroke-width: 1.25; fill: none; }
.d-text text { fill: var(--muted); font-family: var(--sans); font-size: 11.5px; }

table {
  width: 100%; border-collapse: collapse;
  font-size: .875rem; margin: 1.25rem 0 1.5rem;
}
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--border); }
th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint); font-weight: 600;
  border-bottom-color: var(--border-strong);
}
td:not(:first-child), th:not(:first-child) { font-variant-numeric: tabular-nums; }

/* KaTeX display blocks scroll rather than pushing the page wide */
.katex-display { overflow-x: auto; overflow-y: hidden; padding: .35rem 0; }
.katex { font-size: 1em; }

/* ---------- education ---------- */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1.5rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--border);
}
.timeline > li:first-child { border-top: 1px solid var(--border); }
.tl-when {
  font-family: var(--mono); font-size: .78rem;
  color: var(--faint); padding-top: .25rem; white-space: nowrap;
  /* wide layout: date on top, school logo underneath */
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
}
.tl-logo {
  display: block;
  width: auto; height: auto;
  max-width: 7rem; max-height: 2.4rem;
  object-fit: contain; object-position: left center;
}
/* The Polytechnique mark is drawn in pure white: flip it on light backgrounds. */
.tl-logo--invert { filter: invert(1); }
[data-theme="dark"] .tl-logo--invert { filter: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tl-logo--invert { filter: none; }
}
.tl-logo--square { max-width: 2.4rem; border-radius: 3px; }
.tl-logo--wide { max-width: 8rem; }
/* The Arts et Metiers plum reads too dark on the dark background: sit it on a
   light plate, which is invisible against the light theme's off-white. */
.tl-logo--plate {
  background: #fbfbf9; border-radius: 3px;
  padding: .2rem .3rem; box-sizing: content-box;
}
.tl-what h3 {
  font-family: var(--serif); font-size: 1.08rem;
  font-weight: 600; margin: 0 0 .2rem;
}
.tl-where { color: var(--muted); font-size: .88rem; margin: 0 0 .5rem !important; }
.tl-what p:last-child { margin-bottom: 0 !important; font-size: .93rem; color: var(--muted); }

@media (max-width: 34rem) {
  .timeline > li { grid-template-columns: 1fr; gap: .4rem; }
  /* narrow layout: not enough width to stack, so the logo sits right of the date */
  .tl-when {
    padding-top: 0;
    flex-direction: row; align-items: center; gap: .7rem;
  }
  .tl-logo { max-width: 5.5rem; max-height: 1.7rem; }
  .tl-logo--square { max-width: 1.7rem; }
}

/* ---------- skills ---------- */

.skills { margin: 0; }
.skills > div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.5rem;
  padding: .8rem 0; border-bottom: 1px solid var(--border);
}
.skills > div:first-child { border-top: 1px solid var(--border); }
.skills dt {
  font-family: var(--mono); font-size: .78rem;
  color: var(--faint);
}
.skills dd { margin: 0; font-size: .93rem; }

@media (max-width: 34rem) {
  .skills > div { grid-template-columns: 1fr; gap: .2rem; }
}

/* ---------- contact ---------- */

.contact-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.contact-list li {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.5rem;
  padding: .65rem 0; border-bottom: 1px solid var(--border);
  font-size: .93rem;
}
.contact-list li:first-child { border-top: 1px solid var(--border); }
.contact-list span { font-family: var(--mono); font-size: .78rem; color: var(--faint); }

@media (max-width: 34rem) {
  .contact-list li { grid-template-columns: 1fr; gap: .15rem; }
}

/* ---------- footer ---------- */

.site-footer {
  max-width: var(--measure);
  margin: 0 auto; padding: 2rem var(--pad) 3rem;
  border-top: 1px solid var(--border);
  font-size: .8rem; color: var(--faint);
}
.site-footer p { margin: 0; }




/* ============================================================
   RISK KIT — scoped styles for the expanded "Portfolio
   Optimization with Python" panel.
   Everything lives under .rk so it cannot leak into the rest of
   the page; the palette is re-derived from the site tokens, so
   the whole block follows the light/dark switch for free.
   ============================================================ */

.rk {
  --paper:   var(--bg);
  --surface: var(--bg-raised);
  --surface-2: var(--accent-soft);
  --ink:     var(--text);
  --dim:     var(--muted);
  --line:    var(--border);
  --line-strong: var(--border-strong);
  --hedge:   #0f6e66;
  --perf:    #9e6a15;
  --risk:    #98382b;
  --rk-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 8px 24px -18px rgb(0 0 0 / .28);
  color: var(--ink);
}
[data-theme="dark"] .rk {
  --hedge: #54b9a9;
  --perf:  #d8a544;
  --risk:  #dc806b;
  --rk-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 28px -20px rgb(0 0 0 / .9);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rk {
    --hedge: #54b9a9;
    --perf:  #d8a544;
    --risk:  #dc806b;
    --rk-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 28px -20px rgb(0 0 0 / .9);
  }
}

.rk a { color: var(--hedge); }
.rk p { margin: 0 0 .85rem; }
.rk .rk-col { max-width: 68ch; }

.rk h4 {
  font-family: var(--serif);
  font-size: 1.15rem; font-weight: 600; line-height: 1.25;
  letter-spacing: -.005em; text-transform: none; color: var(--ink);
  margin: 0 0 .5rem;
}
.rk h5 {
  font-family: var(--serif);
  font-size: 1rem; font-weight: 600; color: var(--ink);
  margin: 1.5rem 0 .3rem;
}
.rk .rk-blocks h5 { margin: 0 0 .2rem; }

.rk code, .rk .rk-mono {
  font-family: var(--mono); font-size: .86em;
}
.rk code {
  background: var(--surface-2);
  padding: .1em .34em; border-radius: 3px;
}

.rk .rk-eyebrow,
.rk .rk-kicker {
  display: block;
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 .6rem;
}
.rk .rk-eyebrow { color: var(--faint); }
.rk .rk-kicker  { color: var(--hedge); }

/* ---------- header strip: the key numbers ---------- */

.rk .rk-top { padding-bottom: .25rem; }
.rk .rk-facts {
  display: flex; flex-wrap: wrap;
  margin: .5rem 0 0;
  border-top: 1px dashed var(--line);
}
.rk .rk-fact {
  flex: 1 1 8rem;
  padding: .8rem 1.2rem .7rem;
  border-right: 1px solid var(--line);
}
.rk .rk-fact:last-child { border-right: none; }
.rk .rk-fact b {
  display: block;
  font-family: var(--serif);
  font-size: 1.35rem; font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.rk .rk-fact span {
  display: block; margin-top: 2px;
  font-size: .78rem; line-height: 1.3; color: var(--dim);
}

/* ---------- sections ---------- */

.rk .rk-sec {
  padding-top: 2.2rem;
  margin-top: 2rem;
  border-top: 1px dashed var(--line);
}

/* ---------- figures ---------- */

.rk figure { margin: 1.5rem 0 1.75rem; padding: 0; }
.rk .rk-frame {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.25rem 1.1rem 1rem;
  overflow-x: auto;
  box-shadow: var(--rk-shadow);
}
.rk .rk-frame svg { display: block; width: 100%; height: auto; min-width: 520px; }
.rk figcaption {
  margin-top: .6rem;
  font-size: .84rem; line-height: 1.5; color: var(--dim);
  max-width: 70ch;
}
.rk figcaption b { color: var(--ink); font-weight: 600; }

/* raster / exported-SVG figures: kept on a light plate so line drawings and
   application screenshots stay readable under the dark theme too */
.rk .rk-frame--img { padding: .75rem; overflow-x: visible; }
.rk .rk-frame--img img {
  display: block; width: 100%; height: auto;
  background: #fff; border-radius: 4px;
}
/* the opening schematic: one image summarising the whole project, first thing
   in the panel, with no frame and no caption. It takes the full width of the
   block and sets its own height from its aspect ratio. */
.rk > .rk-resume {
  display: block;
  width: 100%; height: auto;
  margin: 0 0 1.75rem;
}

/* These exports are transparent-background line art drawn in the same palette
   as the page, so inverting is enough under the dark theme and no light plate
   is needed: hue-rotate puts the accents back where invert sent them, and the
   near-black ink lands on the text colour while the canvas stays transparent. */
[data-theme="dark"] .rk > .rk-resume { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rk > .rk-resume { filter: invert(1) hue-rotate(180deg); }
}

.rk .rk-shots {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  margin: 1.5rem 0 1.75rem;
}
.rk .rk-shots figure { margin: 0; }
@media (max-width: 720px) {
  .rk .rk-shots { grid-template-columns: 1fr; }
}

/* very tall screenshots scroll inside their frame instead of pushing the
   section metres down the page */
.rk .rk-frame--scroll { max-height: 34rem; overflow-y: auto; }
.rk .rk-frame--scroll img { max-width: 32rem; margin-inline: auto; }
.rk .rk-frame--scroll:focus-visible { outline: 2px solid var(--hedge); outline-offset: 2px; }

/* ---------- notebook index ---------- */

.rk .rk-blocks {
  display: grid; margin: 1.25rem 0 .25rem;
  border-top: 1px solid var(--line);
}
.rk .rk-block {
  display: grid; grid-template-columns: 5rem 1fr; gap: 1.25rem;
  padding: .85rem 0; align-items: start;
  border-bottom: 1px solid var(--line);
}
.rk .rk-nb {
  font-family: var(--mono); font-size: .76rem;
  color: var(--faint); padding-top: .3rem;
}
.rk .rk-block p { margin: 0; font-size: .92rem; color: var(--dim); }

/* ---------- tables ---------- */

.rk .rk-tablewrap {
  overflow-x: auto; margin: 1.25rem 0 .5rem;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface);
}
.rk table {
  border-collapse: collapse; width: 100%; min-width: 34rem;
  font-size: .875rem; margin: 0;
}
.rk th, .rk td {
  padding: .5rem .85rem; text-align: right;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.rk th:first-child, .rk td:first-child {
  text-align: left; font-variant-numeric: normal;
}

/* prose tables: text columns read left-aligned, unlike the numeric default */
.rk table.rk-prose th, .rk table.rk-prose td {
  text-align: left; font-variant-numeric: normal;
}
.rk thead th {
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); font-weight: 500;
  border-bottom: 1px solid var(--line-strong);
}
.rk tbody tr:last-child td { border-bottom: none; }
.rk tr.rk-hero td { background: var(--surface-2); font-weight: 600; }
.rk td.rk-good { color: var(--hedge); font-weight: 600; }
.rk td.rk-bad  { color: var(--risk);  font-weight: 600; }
.rk caption {
  caption-side: bottom; text-align: left;
  font-size: .82rem; color: var(--dim);
  padding: .55rem .85rem; line-height: 1.5;
}

/* ---------- callouts ---------- */

.rk .rk-note {
  border-left: 3px solid var(--hedge);
  background: var(--surface);
  padding: .9rem 1.25rem;
  margin: 1.4rem 0;
  box-shadow: var(--rk-shadow);
}
.rk .rk-note.rk-warn { border-left-color: var(--risk); }
.rk .rk-note p:last-child { margin-bottom: 0; }
.rk .rk-note .rk-eyebrow { color: var(--hedge); }
.rk .rk-note.rk-warn .rk-eyebrow { color: var(--risk); }

/* ---------- code blocks ---------- */

.rk pre.rk-code {
  margin: 1.1rem 0 1.35rem;
  padding: .95rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 4px;
  overflow-x: auto;
  box-shadow: var(--rk-shadow);
  font-family: var(--mono);
  font-size: .8rem; line-height: 1.6;
  color: var(--ink);
  tab-size: 4;
}
.rk pre.rk-code code {
  background: none; padding: 0; border-radius: 0;
  font-size: inherit; font-family: inherit;
}
.rk pre.rk-code .c { color: var(--faint); }

/* ---------- bare lists ---------- */

.rk ul.rk-plain {
  list-style: none; padding: 0; margin: 1.1rem 0 0;
  display: grid; gap: .55rem;
}
.rk ul.rk-plain li {
  position: relative; padding-left: 1.25rem;
  font-size: .92rem; color: var(--dim);
}
.rk ul.rk-plain li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 1px; background: var(--line-strong);
}
.rk ul.rk-plain li b { color: var(--ink); font-weight: 600; }

/* ---------- closing note ---------- */

.rk .rk-foot {
  margin: 2.5rem 0 0; padding-top: 1.1rem;
  border-top: 1px dashed var(--line);
  font-size: .82rem; color: var(--faint);
}

@media (max-width: 34rem) {
  .rk .rk-block { grid-template-columns: 1fr; gap: .15rem; }
  .rk .rk-nb { padding-top: 0; }
  .rk .rk-fact { flex-basis: 100%; border-right: none; border-bottom: 1px dashed var(--line); }
}