/* arang: the theme of mcanzi.de. Three themes, switched in turn with the button in the navigation bar:
   forest (the default, a rainforest at night, as theme-dark.css in ws26_statistics), glacier (slate
   blue with buttercups, as theme-buttercup.css in ss27_advanced_statistics) and sunset (the colours of a
   sunset over Almaty, with oranges); plus the hidden purple theme (css/theme-purple.css). Bricolage Grotesque, Atkinson Hyperlegible, JetBrains Mono. */

:root {
  --floor:      #0b110e;   /* rainforest at night: green-black, darker than the glacier theme */
  --understory: #111a16;
  --raised:     #17221d;
  --vine:       #24332c;
  --mist:       #e3e8e1;   /* moonlit text */
  --muted:      #8e9e96;
  --pandan:     #72c699;   /* leaf green: headings, primary */
  --hornbill:   #f2d45c;   /* moon yellow: accents, cv button, cursor */
  --kingfisher: #72c699;   /* leaf green: links */
  --orchid:     #c3b6d6;
  --moss:       #6f8a7a;
  --leaf:       #88c9a8;
  /* chart colours: stronger than the accents, so that groups in figures are easy to tell apart */
  --c1:         #5cc48a;   /* leaf green */
  --c2:         #f2d45c;   /* moon yellow */
  --c3:         #5aa0e0;   /* moonlit blue */
  --c4:         #e08ab8;   /* night orchid */
  --title-top:    #ece07e;   /* page titles and the name: moonlight above, leaf green below */
  --title-bottom: #5cc48a;

  /* colours that depend on the theme but are not part of the palette */
  --nav-bg:      rgba(11, 17, 14, 0.9);
  --glow-1:      rgba(220, 230, 225, 0.08);   /* moonlight */
  --glow-2:      rgba(136, 201, 168, 0.04);
  --strong:      #fff;
  --shadow:      0 18px 50px rgba(0, 0, 0, 0.35);
  --primary-hi:  #95d5b2;
  --cv-hi:       #f6df85;
  --dot-red:     #e0675f;
  --hit:         rgba(227, 232, 225, 0.05);
  color-scheme: dark;

  --f-head: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --w-text: 46rem;
  --w-wide: 72rem;
  --radius: 10px;
}

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

/* charts drawn with fixed colours in the templates follow the theme */
svg [fill="#a3abb3"] { fill: var(--muted); }
svg [fill="#e4e7d8"] { fill: var(--mist); }
svg [stroke="#343a42"] { stroke: var(--vine); }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }  /* jump links land below the sticky navigation bar */

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--floor);
  background-image:
    radial-gradient(1100px 600px at 85% -120px, var(--glow-1), transparent 70%),
    radial-gradient(900px 500px at 0% 420px, var(--glow-2), transparent 70%);
  background-repeat: no-repeat;
  color: var(--mist);
  font-family: var(--f-body);
  font-size: 1.08rem;
  line-height: 1.65;
}

main { flex: 1; width: 100%; padding: 0 16px; }

.mono { font-family: var(--f-mono); font-variant-ligatures: none; }
.center { text-align: center; }

a { color: var(--kingfisher); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pandan); }

h1, h2, h3, h4 {
  font-family: var(--f-head);
  color: var(--pandan);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* page titles and the name on the home page: a gradient from --title-top to --title-bottom, set by each
   theme (forest: moonlight to leaf green; glacier: ice white to ice blue; purple: the logo's pink to violet) */
h1 {
  background: linear-gradient(180deg, var(--title-top) 8%, var(--title-bottom) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-suffix { -webkit-text-fill-color: var(--muted); }
h1::selection, h1 ::selection { -webkit-text-fill-color: var(--floor); }
@media print { h1 { background: none; -webkit-text-fill-color: currentColor; } }

::selection { background: var(--hornbill); color: var(--floor); }

/* ---- navigation ------------------------------------------------------ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--vine);
}

.nav-inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 60px;
}

.brand {
  font-family: var(--f-mono);
  font-weight: 600;
  color: var(--mist);
  text-decoration: none;
  white-space: nowrap;
}
.brand .prompt { color: var(--pandan); }
.brand:hover { color: var(--mist); }

.cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--hornbill);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }
/* keyboard focus: the same ring everywhere (links, buttons, cards, chart elements) */
:focus-visible { outline: 2px solid var(--pandan); outline-offset: 2px; }
/* "skip to content": the first thing the Tab key reaches, shown only then */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 8px 14px; border-radius: 8px;
  background: var(--pandan); color: var(--floor); font-family: var(--f-mono); font-size: 0.9rem; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--floor); }
/* visitors who ask their system for less motion get no zooms, fades or slides */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.site-nav nav { flex: 1; min-width: 0; }

.nav-links, .nav-icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.nav-links { gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }

.nav-links a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--f-mono);
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--mist); background: var(--raised); }
.nav-links a.active { color: var(--pandan); background: var(--raised); }

.nav-icons { gap: 4px; }
.nav-icons > li { display: flex; align-items: center; }
.nav-icons a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  color: var(--muted);
}
.nav-icons a:hover { color: var(--mist); background: var(--raised); }

@media (max-width: 760px) {
  .nav-inner { flex-wrap: wrap; gap: 0 12px; padding-top: 8px; }
  .site-nav nav { order: 3; flex-basis: 100%; margin: 0 -8px; padding-bottom: 6px; }
  .nav-links { flex-wrap: wrap; gap: 0 2px; overflow: visible; }
  .nav-links a { padding: 5px 8px; font-size: 0.85rem; }
  .nav-icons { margin-left: auto; }
  .console pre:not(.say) { white-space: pre-wrap; font-size: 0.8rem; padding: 14px 14px 16px; }
  .pangolinsay .say { padding: 16px 12px 60px; }
}

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

.site-footer {
  border-top: 1px solid var(--vine);
  margin-top: 72px;
}
.footer-inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 22px 16px 28px;
  color: var(--muted);
  font-size: 0.82rem;
}
.footer-inner a { color: var(--muted); }
.footer-inner a:hover { color: var(--mist); }
.sep { color: var(--vine); margin: 0 6px; }

/* ---- buttons --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--vine);
  border-radius: 8px;
  background: var(--raised);
  color: var(--mist);
  font-family: var(--f-mono);
  font-size: 0.88rem;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.btn:hover { color: var(--pandan); border-color: var(--pandan); }
.btn-primary { background: var(--pandan); border-color: var(--pandan); color: var(--floor); font-weight: 600; }
.btn-primary:hover { background: var(--primary-hi); border-color: var(--primary-hi); color: var(--floor); }

/* ---- home ------------------------------------------------------------ */

.hero {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 72px 0 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}

.kicker {
  margin: 0 0 10px;
  color: var(--hornbill);
  font-size: 0.9rem;
}

.hero-name {
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  letter-spacing: -0.025em;
}

.hero-role {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.hero-intro { margin-top: 22px; font-size: 1.12rem; }
.hero-intro p { margin: 0 0 12px; }

.hero-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.console {
  background: var(--understory);
  border: 1px solid var(--vine);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
}
.console-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--vine);
  background: var(--raised);
}
.console-bar em {
  margin-left: auto;
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 0.75rem;
  color: var(--muted);
}
.console pre {
  margin: 0;
  padding: 18px 20px 20px;
  overflow-x: auto;
  font-family: var(--f-mono);
  font-variant-ligatures: none;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--mist);
}

.cards {
  max-width: var(--w-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
  background: var(--understory);
  border: 1px solid var(--vine);
  border-radius: var(--radius);
  color: var(--mist);
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s;
}
.card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--card-accent, var(--pandan));
}
.card:hover { transform: translateY(-2px); border-color: var(--card-accent, var(--pandan)); color: var(--mist); }
.accent-pandan     { --card-accent: var(--pandan); }
.accent-hornbill   { --card-accent: var(--hornbill); }
.accent-kingfisher { --card-accent: var(--kingfisher); }

.card-label { margin: 0 0 6px; font-size: 0.78rem; color: var(--card-accent, var(--hornbill)); text-transform: lowercase; }
.card h3, .card .card-title { margin: 0 0 8px; font-size: 1.22rem; color: var(--mist); }
.card p { margin: 0 0 14px; color: var(--muted); font-size: 0.98rem; }
.card-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--card-accent, var(--pandan)); }

.photo-strip { max-width: var(--w-wide); margin: 56px auto 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.section-head h2 { margin: 0 0 16px; font-size: 1.5rem; }
.section-head a { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; text-decoration: none; }
.section-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  /* on phones the links go under the heading, in one row that wraps */
  .section-head { flex-direction: column; align-items: flex-start; gap: 0; }
  .section-head h2 { margin-bottom: 8px; }
  .section-links { justify-content: flex-start; gap: 6px 18px; margin-bottom: 14px; }
}
.strip-shuffle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--kingfisher); font-size: 0.85rem;
}
.strip-shuffle:hover { color: var(--pandan); }
.strip-shuffle[hidden], .strip-lucky[hidden] { display: none; }
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.strip a { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; border: 1px solid var(--vine); }
.strip figure { margin: 0; width: 100%; height: 100%; }
.strip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.strip img:not([src]) { display: none; }  /* the script gives each photo its source; without JavaScript the noscript copy shows */
/* text for screen readers and reader modes only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.strip a:hover img { transform: scale(1.04); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 44px; gap: 32px; }
  .cards { grid-template-columns: 1fr; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- pages ----------------------------------------------------------- */

.page { max-width: var(--w-text); margin: 0 auto; padding-top: 56px; }
.page-wide { max-width: var(--w-wide); }
/* every page uses the wide column, aligned with the navigation bar; running text keeps the reading
   width, while charts, fact cards and the co-author network can use the whole column */
.page-wide .prose > :is(p, ul, ol, h2, h3, h4, blockquote, pre, table, details, hr, .jump, .pubs, .cv-box) { max-width: var(--w-text); }
/* demo charts and fact cards: wider than the text, as wide as the interactive plot (.rtoy), so chart labels keep their size */
.facts, .mchange { max-width: 52rem; }
/* the list of taught courses uses the whole column, so on a computer each course fits on one line; narrower screens still wrap */
.page-wide .prose > #modules + ul { max-width: none; }

.page-header { margin-bottom: 30px; }
.page-header h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  letter-spacing: -0.02em;
}
.lead { margin: 14px 0 0; color: var(--muted); font-size: 1.15rem; max-width: var(--w-text); }

.prose { overflow-wrap: break-word; }
.prose h2 {
  margin: 2.4em 0 0.7em;
  font-size: 1.55rem;
}
.prose h2::before {
  content: "## ";
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 0.75em;
  color: var(--moss);
}
.prose h3 { margin: 1.8em 0 0.5em; font-size: 1.2rem; color: var(--mist); }
.prose p, .prose li { color: var(--mist); }
.prose strong { color: var(--strong); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: 0 0 0.65em; }
.prose li::marker { color: var(--moss); }
.prose ul ul { margin-top: 0.5em; }
.prose ul ul li { margin-bottom: 0.2em; color: var(--muted); }

.prose code {
  font-family: var(--f-mono);
  font-size: 0.88em;
  color: var(--hornbill);
  background: var(--understory);
  padding: 1px 5px;
  border-radius: 4px;
}
.prose pre {
  background: var(--understory);
  border: 1px solid var(--vine);
  border-radius: var(--radius);
  padding: 16px;
  overflow-x: auto;
}
.prose pre code { background: none; padding: 0; color: var(--mist); }

.prose hr {
  border: 0;
  margin: 3em 0;
  text-align: center;
  overflow: visible;
}
.prose hr::after {
  content: "~";
  font-family: var(--f-mono);
  color: var(--moss);
  font-size: 1.4rem;
}

.prose blockquote {
  margin: 1.5em 0;
  padding: 4px 20px;
  border-left: 3px solid var(--pandan);
  color: var(--muted);
}

.prose img { max-width: 100%; height: auto; border-radius: 8px; }

.prose table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.prose th, .prose td { border-bottom: 1px solid var(--vine); padding: 8px 10px; text-align: left; }
.prose th { color: var(--pandan); }

/* ---- teaching -------------------------------------------------------- */

.course {
  background: var(--understory);
  border: 1px solid var(--vine);
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 40px;
}
.course-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.course-head > div { flex: 1 1 28rem; }
.course-head p { margin: 8px 0 0; color: var(--muted); max-width: var(--w-text); }
.course-title { margin: 0; font-size: 1.9rem; }
.course-links { margin: 0; }

/* tabs above the course box: one course at a time (layouts/_default/teaching.html) */
.course-tabs { scroll-margin-top: 88px; }
.course-tablist + .course-panel { scroll-margin-top: 170px; }
.course-tablist { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; margin-bottom: -1px; }
.course-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 18px 11px; font: inherit; text-align: left; color: var(--muted); background: transparent; border: 1px solid var(--vine); border-radius: 12px 12px 0 0; cursor: pointer; transition: color 0.15s, background 0.15s; }
.course-tab:hover { color: var(--mist); background: var(--hit); }
.course-tab[aria-selected="true"] { color: var(--mist); background: var(--understory); border-bottom-color: var(--understory); box-shadow: inset 0 3px 0 var(--pandan); }
.course-tab:focus-visible { outline: 2px solid var(--pandan); outline-offset: 2px; }
.course-tab-kind { font-size: 0.72rem; color: var(--hornbill); text-transform: lowercase; }
.course-tab-name { font-family: var(--f-head); font-size: 1.02rem; }
.course-tablist + .course-panel .course { border-top-left-radius: 0; }
.course-tabs .course-panel[hidden] { display: none; }
/* on narrow screens the tabs would wrap, so they become separate buttons above the box */
@media (max-width: 640px) {
  .course-tablist { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 8px; margin-bottom: 14px; }
  .course-tab { padding: 9px 12px 10px; border-radius: 10px; }
  .course-tab[aria-selected="true"] { border-color: var(--pandan); box-shadow: none; }
  .course-tab-name { font-size: 0.92rem; }
  .course-tablist + .course-panel .course { border-top-left-radius: 14px; }
}

/* key to the parts above the lecture grid */
.parts-key { list-style: none; margin: 22px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 0.88rem; color: var(--mist); }
.parts-key li { display: inline-flex; align-items: baseline; gap: 8px; }
.parts-key .mono { color: var(--muted); font-size: 0.78rem; }
/* without a key (one part), the cards still keep a line's distance from the text */
.course-head + .lectures { margin-top: 24px; }

/* one grid of equal cards: every row as tall as the tallest */
.lectures {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(12.5rem, 100%), 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
}
.lectures > li { display: flex; min-width: 0; }
/* each lecture card looks like its slides, in every theme of the site ("theme" in data/course.yaml,
   fss.yaml, advanced.yaml): dark is ws26_statistics (moonlight), sunset ws27_fss, glacier
   ss27_advanced_statistics; colours copied from each repository's theme CSS */
.theme-dark    { --lec-top: #ece07e; --lec-bottom: #5cc48a; --lec: #72c699; --lec-bg: #0b110e; --lec-fg: #e3e8e1; --lec-muted: #8e9e96; --lec-line: #24332c; --lec-code: #f2d45c; }
.theme-sunset  { --lec-top: #fdf0c4; --lec-bottom: #ec6a0f; --lec: #f28a1e; --lec-bg: #13151c; --lec-fg: #f3e7da; --lec-muted: #a9978f; --lec-line: #3a3240; --lec-code: #f6c445; }
.theme-glacier { --lec-top: #eef6fa; --lec-bottom: #8dbbd8; --lec: #a9cbe0; --lec-bg: #1e2830; --lec-fg: #dfe6ea; --lec-muted: #8a9aa6; --lec-line: #34444f; --lec-code: #f2917a; }

.lecture {
  position: relative;
  flex: 1;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
  padding: 11px 12px;
  padding-left: 14px;
  border: 1px solid var(--lec-line, var(--vine));
  border-radius: 7px;
  background: var(--lec-bg);
  color: var(--lec-fg, var(--mist));
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.15s, border-color 0.15s;
}
.lecture:hover { transform: translateY(-2px); border-color: var(--lec); color: var(--lec-fg, var(--mist)); }
.lecture-n { color: var(--lec); font-size: 0.75rem; padding-top: 2px; }
.lecture-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; position: relative; z-index: 1; padding-right: 14px; }
.lecture-title { font-family: var(--f-head); font-weight: 800; font-size: 0.98rem; line-height: 1.2; }
.lecture-title p, .lecture-sub p { margin: 0; }
.lecture-title code { font-family: var(--f-mono); font-size: 0.9em; color: var(--lec-code, var(--hornbill)); }
.lecture-sub { color: var(--lec-muted, var(--muted)); font-size: 0.78rem; line-height: 1.35; }
/* the slides' own background drawings behind the text (img/motifs/slides-*.svg, copied from each
   repository's theme CSS, with their opacity built in): rafflesias, oranges, buttercups */
.lecture { isolation: isolate; }
.lecture::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-repeat: repeat; background-position: 0 0;
}
.theme-dark .lecture::before    { background-image: url("../img/motifs/slides-rafflesia.svg"); background-size: 300px 300px; }
.theme-sunset .lecture::before  { background-image: url("../img/motifs/slides-oranges.svg"); background-size: 260px 260px; }
.theme-glacier .lecture::before { background-image: url("../img/motifs/slides-buttercup.svg"); background-size: 260px 260px; }
/* the accent bar on the left: the same top-to-bottom gradient as the titles of each slide theme */
.lecture::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; pointer-events: none;
  background: linear-gradient(180deg, var(--lec-top, var(--lec)) 8%, var(--lec-bottom, var(--lec)) 92%);
}
/* parts of the course have no colour of their own: the key just lists them */

/* ---- photography ----------------------------------------------------- */

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(12.5rem, calc(50% - 6px)), 1fr)); gap: 14px 12px; }
.gallery figure { margin: 0; min-width: 0; }
.gallery-item {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--vine);
  border-radius: 8px;
  overflow: hidden;
  background: var(--understory);
  cursor: zoom-in;
}
.gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.4s; }
.gallery-item:hover img { transform: scale(1.03); }
.gallery-item:focus-visible { outline: 2px solid var(--pandan); outline-offset: 2px; }
.gallery figcaption { padding: 6px 2px 0; font-size: 0.88rem; line-height: 1.35; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.gallery figcaption strong { color: var(--mist); font-weight: 400; }

.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 24px 64px;
  border: 0;
  background: rgba(10, 11, 13, 0.96);
  color: var(--mist);
}
.lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(10, 11, 13, 0.9); }
.lightbox img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 6px; }
.lb-caption { margin: 14px 0 0; text-align: center; font-size: 0.95rem; }
.lb-caption span { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: var(--mist);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 8px;
}
.lightbox button:hover { color: var(--pandan); background: var(--raised); }
.lb-close { top: 12px; right: 14px; }
.lb-prev  { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next  { right: 10px; top: 50%; transform: translateY(-50%); }

@media (max-width: 600px) {
  .lightbox { padding: 56px 8px 24px; }
  .lb-prev, .lb-next { top: auto; bottom: 10px; transform: none; }
  .course { padding: 20px; }
}

/* pangolinsay: a cowsay-style pangolin reading out one of my papers */
.pangolinsay { margin: 0; position: relative; }
.pangolinsay .say {
  white-space: pre;
  font-size: clamp(9px, 2.45vw, 0.84rem);
  line-height: 1.3;
  padding: 20px 20px 64px;
}
.pangolinsay .say-bubble { color: var(--mist); }
.pangolinsay .say-art { color: var(--pandan); }
.say-next { position: absolute; right: 16px; bottom: 16px; font-size: 0.78rem; padding: 6px 12px; cursor: pointer; }

/* ---- 404 ------------------------------------------------------------- */

.console-404 { max-width: 36rem; margin: 40px auto 28px; }
.console-404 .say { padding-bottom: 20px; }

/* course evaluation chart on the CV (shortcode: evaluations) */
.evals { max-width: 760px; margin: 28px 0 32px; padding: 18px 18px 14px; background: var(--understory); border: 1px solid var(--vine); border-radius: var(--radius); }
.evals-head { margin-bottom: 10px; }
.evals-title { font-family: var(--f-head); color: var(--mist); font-weight: 600; }
.evals-scroll { position: relative; overflow-x: auto; }
.evals-svg { display: block; width: 100%; min-width: 340px; height: auto; font-family: var(--f-mono); }
.evals-grid { stroke: var(--vine); stroke-width: 1; }
.evals-tick { fill: var(--muted); font-size: 13px; }
.evals-best { fill: var(--muted); font-size: 11px; }
.evals-n { fill: var(--muted); font-size: 11px; }
.evals-mark { stroke: var(--understory); stroke-width: 2; }
.evals-hit { cursor: default; }
.evals-hit.on { fill: var(--hit); }
.evals-tip { position: absolute; top: 4px; z-index: 2; padding: 8px 10px; background: var(--raised); border: 1px solid var(--vine); border-radius: 8px; font-size: 0.75rem; line-height: 1.5; color: var(--mist); pointer-events: none; white-space: nowrap; }
.evals-tip span { color: var(--muted); }
.evals-tip em { font-style: normal; color: var(--hornbill); }
.evals-note { margin: 10px 0 0; font-size: 0.8rem; color: var(--muted); }
.evals-table summary { margin-top: 8px; font-size: 0.78rem; color: var(--muted); cursor: pointer; }
.evals-table table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.evals-table th, .evals-table td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--vine); }
.evals-table th { color: var(--muted); font-weight: 400; }

/* photo gallery filters: two rows of pills */
.gallery-filters { display: grid; gap: 10px; margin: 0 0 26px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-label { font-size: 0.72rem; color: var(--muted); width: 4.5rem; }
.pill {
  font: inherit; font-size: 0.82rem; line-height: 1; color: var(--muted); background: transparent;
  border: 1px solid var(--vine); border-radius: 999px; padding: 6px 12px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.pill:hover { color: var(--mist); border-color: var(--muted); }
.pill[aria-pressed="true"] { color: var(--floor); background: var(--pandan); border-color: var(--pandan); }
.pill:focus-visible { outline: 2px solid var(--pandan); outline-offset: 2px; }
.gallery-count { font-size: 0.75rem; color: var(--muted); margin-left: 4.5rem; }
.gallery figure[hidden] { display: none; }
@media (max-width: 640px) {
  .filter-label { width: 100%; }
  .gallery-count { margin-left: 0; }
}

/* interactive regression demo (shortcode: media-toy) */
.rtoy { max-width: 52rem; margin: 28px 0 36px; padding: 22px 22px 18px; background: var(--understory); border: 1px solid var(--vine); border-radius: var(--radius); }
.rtoy-controls { display: grid; gap: 8px; margin-bottom: 12px; }
.rtoy-reset { margin-left: auto; }
.rtoy-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.75rem; color: var(--muted); margin-bottom: 4px; }
.rtoy-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rtoy-svg { display: block; max-width: 100%; font-family: var(--f-mono); touch-action: none; user-select: none; -webkit-user-select: none; }
.rtoy-grid { stroke: var(--vine); stroke-width: 1; }
.rtoy-zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.7; }
.rtoy-tick { fill: var(--muted); font-size: 12px; }
.rtoy-axis { fill: var(--muted); font-size: 12px; }
.rtoy-hint { fill: var(--muted); font-size: 11px; }
.rtoy-fit { opacity: 0.9; }
.rtoy-pt { cursor: grab; }
.rtoy-pt circle:not(.rtoy-hit), .rtoy-pt rect { stroke: var(--understory); stroke-width: 2; transition: stroke 0.12s; }
.rtoy-pt:hover circle:not(.rtoy-hit), .rtoy-pt:hover rect, .rtoy-pt.on circle:not(.rtoy-hit), .rtoy-pt.on rect { stroke: var(--mist); }
.rtoy-pt.on { cursor: grabbing; }
.rtoy-status { min-height: 1.4em; margin: 6px 0 10px; font-size: 0.75rem; color: var(--muted); }
.rtoy-stats { display: grid; gap: 6px; }
.rtoy-stat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 0.85rem; color: var(--mist); }
.rtoy-stat .mono { font-size: 0.8rem; color: var(--muted); }
.rtoy-gname { display: inline-flex; align-items: center; gap: 8px; min-width: 9.5rem; }
.rtoy-key { width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
.rtoy-note { margin: 12px 0 0; font-size: 0.8rem; color: var(--muted); }
.rtoy-note code { font-size: 0.78rem; }
@media (max-width: 640px) {
  .rtoy { padding: 16px 14px; }
  .rtoy-reset { margin-left: 0; }
  .rtoy-gname { min-width: 0; width: 100%; }
  .rtoy-stat { margin-bottom: 4px; }
}

/* demo page: study facts and before/after chart */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 12px; margin: 24px 0 8px; }
.facts > div { padding: 14px 14px 12px; background: var(--understory); border: 1px solid var(--vine); border-radius: var(--radius); }
.facts strong { display: block; font-family: var(--f-head); font-size: 1.45rem; color: var(--pandan); line-height: 1.1; margin-bottom: 6px; }
.facts span { display: block; font-size: 0.85rem; line-height: 1.4; color: var(--muted); }
.mchange { margin: 20px 0 24px; padding: 18px; background: var(--understory); border: 1px solid var(--vine); border-radius: var(--radius); }
.mchange-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.75rem; color: var(--muted); margin-bottom: 8px; }
.mchange-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mchange-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 18px; }
.mchange-panel { margin: 0; min-width: 0; }
.mchange-panel figcaption { margin-bottom: 4px; }
.mchange-title { font-family: var(--f-head); color: var(--mist); font-weight: 600; }
.mchange-eg { font-size: 0.75rem; color: var(--muted); margin-left: 6px; }
.mchange-panel svg { display: block; width: 100%; height: auto; font-family: var(--f-mono); }
.mchange-stat { margin: 4px 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--muted); }
.mchange-note { margin: 14px 0 0; font-size: 0.78rem; color: var(--muted); }

/* output page: jump links, abstracts, co-author network */
.jump { font-size: 0.82rem; color: var(--muted); margin: 0 0 8px; }
.page > .jump { margin-bottom: 20px; }  /* teaching page: the bar sits right above the course box */
.pub-abstract { margin: -4px 0 6px; }
.pub-abstract summary { font-size: 0.75rem; color: var(--kingfisher); cursor: pointer; width: max-content; }
.pub-abstract summary:hover .pub-toggle, .pub-demo:hover { color: var(--pandan); }
.pub-demo { color: var(--kingfisher); text-decoration: none; }
.pub-links { font-size: 0.75rem; }
.pub-abstract[open] { padding: 10px 14px 4px; background: var(--understory); border: 1px solid var(--vine); border-radius: 8px; }
.pub-abstract[open] summary { margin-bottom: 8px; }
.pub-abstract p { font-size: 0.9rem; color: var(--muted); }
.coauth { margin: 18px 0 8px; padding: 18px; background: var(--understory); border: 1px solid var(--vine); border-radius: var(--radius); }
.coauth-svg { display: block; max-width: 100%; margin-top: 10px; font-family: var(--f-mono); user-select: none; -webkit-user-select: none; }
.coauth-link { stroke: var(--vine); transition: stroke 0.15s, opacity 0.15s; }
.coauth-link.on { stroke: var(--c1); }
.coauth-link.dim { opacity: 0.25; }
.coauth-node { cursor: pointer; outline: none; }
.coauth-node circle:first-child { fill: var(--c3); stroke: var(--understory); stroke-width: 2; transition: opacity 0.15s; }
.coauth-node.me circle:first-child { fill: var(--c2); }
.coauth-node text { fill: var(--muted); font-size: 11px; transition: opacity 0.15s; }
.coauth-node.me text { fill: var(--mist); font-size: 12px; }
.coauth-node.on circle:first-child { stroke: var(--mist); }
.coauth-node.on text { fill: var(--mist); }
.coauth-node:focus-visible circle:first-child { stroke: var(--c1); }
.coauth-node.dim circle:first-child, .coauth-node.dim text { opacity: 0.3; }
.coauth-info { margin-top: 8px; min-height: 3em; }
.coauth-sum { margin: 0; font-size: 0.88rem; color: var(--muted); }
.coauth-sum strong { color: var(--mist); font-weight: 600; }
.coauth-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.coauth-list li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 8px; font-size: 0.85rem; line-height: 1.4; color: var(--mist); }
.coauth-list .mono { font-size: 0.72rem; color: var(--muted); padding-top: 2px; }
.coauth-node.lab-hidden text { opacity: 0; }
.coauth-node.lab-hidden.near text, .coauth-node.lab-hidden:hover text { opacity: 1; }
.coauth-node.near text { fill: var(--mist); }
@media (max-width: 520px) { .coauth-list li { grid-template-columns: 1fr; gap: 0; } }

/* language switcher in the header */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-family: var(--f-mono); font-size: 0.78rem; }
.nav-icons .lang-switch a, .lang-switch span { display: inline-block; width: auto; height: auto; padding: 5px 7px; border-radius: 6px; line-height: 1; text-decoration: none; }
.lang-switch a { color: var(--muted); }
.lang-switch a:hover { color: var(--pandan); background: var(--raised); }
.lang-current { color: var(--floor); background: var(--pandan); }

/* background motif: rafflesias and their buds all over the page, very faint (img/motifs/rafflesia.svg);
   the glacier theme has buttercups instead, the sunset theme oranges, the purple theme toadstools */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/motifs/rafflesia.svg") repeat 0 0 / 640px 640px;
  opacity: 0.2;
  filter: saturate(0.55) brightness(0.85);   /* the rafflesias at night */
}
main, .site-footer { position: relative; z-index: 1; }
@media (max-width: 700px) { body::before { background-size: 420px 420px; opacity: 0.18; } }
@media print { body::before { display: none; } }

/* terminal around the pangolin: the log scrolls, the input line stays at the bottom */
.term .term-log { height: 30rem; overflow-y: auto; overscroll-behavior: contain; }  /* room for the wizard dog too (purple theme), so the terminal is the same size in every theme */
.term .term-log .say { padding: 14px 20px 6px; overflow-x: visible; }
.term .term-cmd { color: var(--muted); }
.term-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--vine);
  font-family: var(--f-mono);
  font-size: 0.86rem;
}
.term-input[hidden] { display: none; }
.term-prompt { color: var(--pandan); flex: none; }
.term-input input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--mist);
  font: inherit;
  caret-color: var(--pandan);
}
.term-input input::placeholder { color: var(--muted); opacity: 1; }
/* the input has no outline of its own, so keyboard focus is shown on the whole input line */
.term-input:focus-within { box-shadow: inset 0 0 0 2px var(--pandan); }
.term .say-next { position: static; flex: none; }
@media (max-width: 760px) {
  .term .term-log { height: 22rem; }
  .term .term-log .say { padding: 12px 12px 6px; }
  .term-input input { font-size: 16px; }
}
.term .term-out { white-space: pre-wrap; overflow-wrap: anywhere; display: inline-block; max-width: 100%; }
/* chess in the terminal (js/chess/terminal-chess.js): white pieces in capitals, black in lower case */
/* the board fills the terminal: as large as its height allows (10 lines of the board plus two lines of text
   in the 30rem/22rem terminal), unless the width runs out first (container units, .term-log is the container) */
.term .chess-board { display: block; width: max-content; margin: 0 auto; font-size: min(7cqi, calc(26rem / 12)); line-height: 1.2; }
@media (max-width: 760px) { .term .chess-board { font-size: min(8cqi, calc(18.5rem / 12)); } }
.term .chess-board .cw { color: var(--strong); font-weight: 700; }
.term .chess-board .cb { color: var(--kingfisher); font-weight: 700; }
.term .chess-board .ce { color: var(--muted); opacity: 0.55; }
/* pieces: one character wide like the letters around them, drawn a little larger so they read as well as the coordinates */
.term .chess-board .pc { position: relative; display: inline-block; width: 0.6em; text-align: center; font-family: "Chess Pieces", var(--f-mono); font-weight: 400; font-synthesis: none; transform: scale(1.35); transform-origin: 50% 62%; }
/* each piece is the solid symbol in its side's colour, stroked in the other side's colour; the font's outline
   symbols are drawn at other sizes and positions, so they cannot be laid over the solid ones */
.term .chess-board .pc { -webkit-text-stroke: 0.08em var(--o); paint-order: stroke fill; }
/* the white pieces are outlined in the colour that fills the black ones */
.term .chess-board { --pc-dark: color-mix(in srgb, var(--kingfisher) 50%, var(--floor)); }
.term .chess-board .pc.cw { color: var(--strong); --o: var(--pc-dark); }
.term .chess-board .pc.cb { color: var(--pc-dark); --o: var(--strong); }   /* black: a dark inside, so the light outline gives the shape */
.term .chess-board .clast { background: color-mix(in srgb, var(--hornbill) 30%, transparent); border-radius: 2px; }
.term .chess-board .ccheck { background: color-mix(in srgb, var(--pandan) 45%, transparent); border-radius: 2px; }

/* CV download: amber so it stands apart from the green primary button */
.btn-cv { display: inline-flex; align-items: center; gap: 8px; background: var(--hornbill); border-color: var(--hornbill); color: var(--floor); font-weight: 600; }
.btn-cv:hover { background: var(--cv-hi); border-color: var(--cv-hi); color: var(--floor); }
.btn-cv svg { flex: none; }
.cv-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin: 18px 0 8px;
  padding: 16px 18px;
  background: var(--understory);
  border: 1px solid var(--vine);
  border-left: 3px solid var(--hornbill);
  border-radius: var(--radius);
}
.cv-box p { margin: 0; flex: 1 1 18rem; }
.prose .cv-box a.btn-cv { color: var(--floor); text-decoration: none; }

/* lectures not yet online */
.lecture-planned { cursor: default; }
.lecture-planned:hover { transform: none; border-color: var(--lec-line, var(--vine)); }
.lecture-planned .lecture-title, .lecture-planned .lecture-sub { opacity: 0.7; }
.lecture-soon { margin-top: 2px; font-size: 0.68rem; color: var(--lec); letter-spacing: 0.02em; }

/* coloured ASCII portrait (whoami): sized so all columns fit the terminal */
.term .term-log { container-type: inline-size; position: relative; }
.term .term-portrait {
  display: block;
  white-space: pre;
  font-size: min(7px, calc((100cqw - 40px) / var(--pcols, 45.6)));
  line-height: 1;
  letter-spacing: 0;
  font-weight: 600;
  margin: 4px 0 8px;
}
@media (max-width: 760px) { .term .term-portrait { font-size: min(7px, calc((100cqw - 24px) / var(--pcols, 45.6))); } }

/* terminal text scales so the pangolin (51 columns) and its bubble fill the width */
.term .term-log .say { font-size: clamp(8px, calc((100cqw - 40px) / 30.6), 16px); }
@media (max-width: 760px) { .term .term-log .say { font-size: clamp(7px, calc((100cqw - 24px) / 30.6), 15px); } }
.hero-suffix { font-size: 0.42em; font-weight: 600; color: var(--muted); letter-spacing: 0; white-space: nowrap; }

/* teaching page: evaluation chart and student comments (partials/student-comments.html) side by side */
.teach-evals { margin-top: 8px; }
.teach-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; margin-top: 18px; }
.teach-duo .evals { margin: 0; max-width: none; }
.comments-box { margin: 0; position: relative; display: flex; flex-direction: column; min-height: 18rem; }
.comments-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 28px 32px 68px;
  font-family: var(--f-mono);
  font-size: 0.86rem;
  line-height: 1.6;
}
.comment-text { margin: 0; max-width: 46ch; color: var(--mist); }
.comment-tr { margin: 14px 0 0; max-width: 46ch; color: var(--muted); }
.comment-by { margin: 16px 0 0; color: var(--kingfisher); font-size: 0.78rem; }
.comment-tr[hidden] { display: none; }
@media (max-width: 900px) {
  .teach-duo { grid-template-columns: minmax(0, 1fr); }
}
/* compact list of taught modules (teaching page) */
.prose-teaching > ul > li { margin-bottom: 0.15em; }

/* ---- glacier theme ---------------------------------------------------- */
/* Slate blue and ice, salmon for accents, glacier buttercups in the background (img/motifs/buttercup.svg).
   The website version of the buttercup slide theme of Advanced Statistics; the other theme of the site
   next to forest (the default). Switched with the button in the navigation bar and remembered in the
   browser (partials/head.html). */

:root[data-theme="glacier"] {
  --floor:      #1e2830;   /* slate blue */
  --understory: #22303a;
  --raised:     #283844;
  --vine:       #34444f;
  --mist:       #dfe6ea;   /* ice white text */
  --muted:      #98a8b3;   /* light enough for 4.5:1 contrast on the raised panels */
  --pandan:     #a9cbe0;   /* ice blue: headings, primary */
  --hornbill:   #f2917a;   /* salmon: accents, cv button, cursor */
  --kingfisher: #f6b8a4;   /* pale salmon: links */
  --orchid:     #d9b56a;   /* stamen gold */
  --moss:       #7a90a1;   /* 4.5:1 on the background, like the other themes */
  --leaf:       #8fb8a8;
  --c1: #a9cbe0; --c2: #f2917a; --c3: #d9b56a; --c4: #8fb8a8;   /* chart colours */
  --title-top:    #eef6fa;   /* page titles and the name: ice white above, ice blue below */
  --title-bottom: #8dbbd8;

  --nav-bg:      rgba(30, 40, 48, 0.9);
  --glow-1:      rgba(169, 203, 224, 0.10);
  --glow-2:      rgba(242, 145, 122, 0.05);
  --strong:      #fff;
  --shadow:      0 18px 50px rgba(0, 0, 0, 0.35);
  --primary-hi:  #c3dbea;
  --cv-hi:       #f6aa97;
  --dot-red:     #f2917a;
  --hit:         rgba(223, 230, 234, 0.05);
  color-scheme: dark;
}
:root[data-theme="glacier"] body::before {
  background: url("../img/motifs/buttercup.svg") repeat 0 0 / 600px 600px;
  opacity: 0.2;
  filter: none;
}
@media (max-width: 700px) { :root[data-theme="glacier"] body::before { background-size: 400px 400px; opacity: 0.18; } }

/* ---- sunset theme ----------------------------------------------------- */
/* The colours of a sunset over Almaty (photography page, 0H2A0442.jpg): the city in shadow for the
   background, the plum haze for borders, warm haze for the text, the orange sky for headings, the sun for
   accents and the light around it for the name. Oranges in the background, drawn in ink like the
   toadstools of the purple theme (img/motifs/oranges.svg). Comes after glacier with the button in the
   navigation bar and is remembered in the browser like the other themes. */

:root[data-theme="sunset"] {
  --floor:      #13151c;   /* the city in shadow */
  --understory: #191b24;
  --raised:     #20222d;
  --vine:       #3a3240;   /* plum haze: borders */
  --mist:       #f3e7da;   /* warm haze: text */
  --muted:      #a9978f;   /* 5.6:1 on the raised panels */
  --pandan:     #f28a1e;   /* the orange sky: headings, primary */
  --hornbill:   #f6c445;   /* the sun: accents, cv button, cursor */
  --kingfisher: #f6ad7b;   /* apricot: links */
  --orchid:     #c98da4;   /* mauve haze */
  --moss:       #97807a;
  --leaf:       #e39abd;
  --c1: #f28a1e; --c2: #f6c445; --c3: #5f86d6; --c4: #e39abd;   /* chart colours: orange, sun, dusk blue, pink haze */
  --title-top:    #fdf0c4;   /* page titles and the name: the pale light next to the sun above, the horizon below */
  --title-bottom: #ec6a0f;

  --nav-bg:      rgba(19, 21, 28, 0.9);
  --glow-1:      rgba(242, 138, 30, 0.14);   /* the sun, top right */
  --glow-2:      rgba(181, 75, 51, 0.07);
  --strong:      #fff;
  --shadow:      0 18px 50px rgba(0, 0, 0, 0.4);
  --primary-hi:  #f6a54d;
  --cv-hi:       #f8d26e;
  --dot-red:     #e0675f;
  --hit:         rgba(243, 231, 218, 0.05);
  color-scheme: dark;
}
:root[data-theme="sunset"] body::before {
  background: url("../img/motifs/oranges.svg") repeat 0 0 / 600px 600px;
  opacity: 0.2;
  filter: none;
}
@media (max-width: 700px) { :root[data-theme="sunset"] body::before { background-size: 400px 400px; opacity: 0.18; } }

/* theme switch in the navigation bar: shows the theme it switches to (snowflake + "glacier mode" on the forest
   and purple themes, sun + "sunset mode" on the glacier one, tree + "forest mode" on the sunset one) */
.theme-toggle {
  display: inline-flex; align-items: center; height: 36px; padding: 0 8px;
  border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: var(--muted); font-family: var(--f-mono); font-size: 0.78rem; line-height: 1;
}
.theme-toggle:hover { color: var(--mist); background: var(--raised); }
.theme-toggle[hidden] { display: none; }
.theme-toggle .to-dark, .theme-toggle .to-glacier, .theme-toggle .to-sunset { display: none; align-items: center; gap: 7px; }
.theme-toggle svg { display: block; flex: none; }
.theme-toggle .to-glacier { display: inline-flex; }
:root[data-theme="glacier"] .theme-toggle .to-glacier,
:root[data-theme="sunset"] .theme-toggle .to-glacier { display: none; }
:root[data-theme="glacier"] .theme-toggle .to-sunset { display: inline-flex; }
:root[data-theme="sunset"] .theme-toggle .to-dark { display: inline-flex; }
/* the label is the button's name for screen readers (it says which theme comes next), so on small screens it is
   hidden only from sight */
@media (max-width: 560px) { .theme-toggle .theme-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* trips on TravelMap (photography page, data/trips.yaml) */
.trips-jump { margin: 10px 0 0; font-size: 0.85rem; }
.trips-jump a { text-decoration: none; }
.trips { margin-top: 64px; }
.trips-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 8px; }
.trips h2 { margin: 0; font-size: 1.5rem; }
.trips > p { margin: 0 0 18px; color: var(--muted); }
.trip-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px 12px; grid-template-columns: repeat(auto-fill, minmax(min(12.5rem, calc(50% - 6px)), 1fr)); }
.trip { display: flex; flex-direction: column; gap: 2px; color: var(--mist); text-decoration: none; }
.trip-cover { display: block; aspect-ratio: 3 / 2; margin-bottom: 8px; border-radius: 8px; overflow: hidden; border: 1px solid var(--vine); background: var(--understory); }
.trip-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.trip:hover .trip-cover img { transform: scale(1.04); }
.trip-name { font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.trip:hover .trip-name { color: var(--pandan); }
.trip-year { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; color: var(--muted); }
.trip-year svg { width: 12px; height: 12px; }
.lb-trip { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--kingfisher); }
.lb-trip[hidden] { display: none; }

/* CRediT roles as coloured tags (output page; data/credit.yaml) */
.credit {
  --c: var(--muted);
  display: inline-block; margin: 0 0 0 4px; padding: 1px 6px; border-radius: 5px;
  font-family: var(--f-mono); font-size: 0.68rem; font-weight: 600; line-height: 1.5; letter-spacing: 0.02em;
  text-decoration: none; vertical-align: 1px; cursor: help;
  color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent);
}
.credits { white-space: nowrap; }
/* one colour per role */
.credit[data-r="C"]  { --c: #e8a33d; }
.credit[data-r="DC"] { --c: #45b4c8; }
.credit[data-r="FA"] { --c: #a8cf78; }
.credit[data-r="I"]  { --c: #e39ac0; }
.credit[data-r="M"]  { --c: #b39ddb; }
.credit[data-r="S"]  { --c: #7fc8a9; }
.credit[data-r="SU"] { --c: #a3abb3; }
.credit[data-r="V"]  { --c: #e4716a; }
.credit[data-r="W"]  { --c: #e4e7d8; }
.credit-legend { list-style: none; margin: 8px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.85rem; color: var(--muted); }
.credit-legend .credit { margin: 0 4px 0 0; }

/* face-mask demo (static/js/mask-demo.js, shortcode mask-lab) */
.mlab { position: relative; max-width: 52rem; margin: 24px 0 32px; padding: 22px 22px 18px; background: var(--understory); border: 1px solid var(--vine); border-radius: var(--radius); }
.mlab-controls { display: grid; gap: 8px; margin-bottom: 12px; }
.mlab-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.75rem; color: var(--muted); margin-bottom: 6px; }
.mlab-legend span, .mlab-rs span { display: inline-flex; align-items: center; gap: 6px; }
.mlab-plot { position: relative; }
.mlab-svg { display: block; max-width: 100%; font-family: var(--f-mono); user-select: none; -webkit-user-select: none; }
.mlab-grid { stroke: var(--vine); stroke-width: 1; }
.mlab-zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.7; }
.mlab-tick, .mlab-axis { fill: var(--muted); font-size: 12px; }
.mlab-hint { fill: var(--muted); font-size: 11px; }
.mlab-cat { fill: var(--mist); font-size: 15px; font-family: var(--f-body); }
.mlab-diff { font-size: 12px; font-weight: 600; }
.mlab-label { fill: var(--mist); font-size: 12px; font-style: italic; pointer-events: none; }
.mlab-status { min-height: 1.4em; margin: 8px 0 0; font-size: 0.78rem; color: var(--muted); }
.mlab-cap { margin: 10px 0 4px; font-size: 0.75rem; color: var(--muted); }
.mlab-rs { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.75rem; color: var(--muted); margin-top: 4px; }
.mlab-tip { position: absolute; z-index: 5; pointer-events: none; max-width: 16rem; padding: 8px 10px; font-size: 0.8rem; line-height: 1.45; color: var(--mist); background: var(--raised); border: 1px solid var(--vine); border-radius: 8px; box-shadow: var(--shadow); }
.mlab-pt, .mlab-word, .mlab-cell { cursor: pointer; }
.mlab-pt:hover .mlab-dot, .mlab-pt.on .mlab-dot { stroke: var(--mist); stroke-width: 2; }
.mlab-word:hover line:first-child { opacity: 1; stroke-width: 2.5; }
.mlab-cell:hover .mlab-cell-fill, .mlab-cell.on .mlab-cell-fill { stroke: var(--mist); stroke-width: 2; }
.mlab-cell-ring { pointer-events: none; }
.mlab-cell-txt { fill: var(--mist); font-size: 13px; pointer-events: none; }
.mlab-cell:focus-visible { outline: none; }
.mlab-cell:focus-visible .mlab-cell-ring { stroke: var(--pandan); stroke-width: 3; }
.mlab-svg rect[role="img"]:focus-visible { outline: none; stroke: var(--pandan); stroke-width: 2; }
.mlab-words { margin: 6px 0 0; font-size: 0.85rem; color: var(--mist); min-height: 1.4em; }
.mlab-words .mono { font-size: 0.75rem; color: var(--muted); }
.mlab-q { margin: 0 0 12px; color: var(--mist); }
.mlab-guess { display: flex; flex-wrap: wrap; gap: 8px; }
.mlab-guess-btn { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; }
.mlab-guess-btn .mlab-ipa { font-size: 1.05rem; }
.mlab-guess-btn .mlab-eg { font-size: 0.78rem; }
.mlab-guess-btn[aria-pressed="true"] { background: var(--c); border-color: var(--c); }
.mlab-guess-out { margin-top: 16px; }
.mlab-guess-out p { margin: 12px 0 0; font-size: 0.95rem; }
.mlab-bars { display: grid; gap: 6px; }
.mlab-bar { display: grid; grid-template-columns: 2.6rem 1fr 6.5rem; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--muted); }
.mlab-bar .mlab-ipa { color: var(--mist); }
.mlab-bar .mono { font-size: 0.8rem; text-align: right; }
.mlab-bar.picked .mlab-ipa, .mlab-bar.picked .mono { color: var(--mist); font-weight: 700; }
.mlab-bar-track { height: 12px; background: var(--raised); border-radius: 6px; overflow: hidden; }
.mlab-bar-track span { display: block; height: 100%; border-radius: 6px; }

/* power analysis demo (js/power-demo.js): the mlab figures, with sliders */
.plab { --plab-ns: color-mix(in srgb, var(--muted) 45%, var(--understory)); }
.plab-slider { display: grid; grid-template-columns: 12rem 1fr 6.5rem; gap: 12px; }
.plab-slider .filter-label { width: auto; }
.plab-slider output { font-size: 0.8rem; color: var(--mist); text-align: right; }
.plab-slider input[type="range"] { width: 100%; margin: 0; accent-color: var(--pandan); cursor: pointer; }
.plab-slider input[type="range"]:focus-visible { outline: 2px solid var(--pandan); outline-offset: 4px; }
.plab-run { margin-top: 4px; }
.plab-rs { margin-top: 8px; font-size: 0.8rem; }
.plab-rs span { display: inline-block; }
.plab-rs strong { color: var(--mist); }
@media (max-width: 560px) { .plab-slider { grid-template-columns: 1fr auto; } .plab-slider input[type="range"] { grid-column: 1 / -1; grid-row: 2; } }
.mlab-bar.picked .mlab-bar-track { outline: 2px solid var(--mist); outline-offset: 1px; }
.mlab-search { width: 14rem; max-width: 100%; padding: 5px 10px; font-size: 0.8rem; color: var(--mist); background: var(--floor); border: 1px solid var(--vine); border-radius: 999px; }
.mlab-search:focus-visible { outline: 2px solid var(--pandan); outline-offset: 2px; }
.mlab-card { margin-top: 10px; padding: 12px 14px; background: var(--raised); border-radius: 8px; font-size: 0.85rem; }
.mlab-card p { margin: 6px 0 0; font-size: 0.78rem; color: var(--muted); }
.mlab-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.mlab-card-head .mono { font-size: 0.75rem; color: var(--muted); }
.mlab-card-tab { margin-top: 8px; border-collapse: collapse; font-size: 0.78rem; }
.mlab-card-tab th, .mlab-card-tab td { padding: 3px 14px 3px 0; text-align: left; font-weight: 400; color: var(--mist); }
.mlab-card-tab th, .mlab-card-tab td:first-child { color: var(--muted); }
@media (max-width: 640px) {
  .mlab { padding: 16px 14px; }
  .mlab-bar { grid-template-columns: 2.4rem 1fr 5.5rem; }
}

/* demo pages: one demo, with the list of demos in the right column (partials/demo-page.html) */
.demo-layout { display: grid; grid-template-columns: minmax(0, 52rem) 15.5rem; justify-content: space-between; gap: 0 3rem; align-items: start; }
.demo-main { grid-column: 1; grid-row: 1; min-width: 0; }
.demo-nav { grid-column: 2; grid-row: 1; position: sticky; top: 88px; }
.demo-nav-head { margin: 0 0 10px; font-size: 0.75rem; color: var(--muted); }
.demo-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.demo-nav a { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 12px 16px; background: var(--understory); border: 1px solid var(--vine); border-radius: var(--radius); color: var(--mist); text-decoration: none; transition: border-color 0.15s; overflow: hidden; }
.demo-nav a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--card-accent, var(--pandan)); opacity: 0.35; }
.demo-nav a:hover { border-color: var(--card-accent, var(--pandan)); color: var(--mist); }
.demo-nav a.on { border-color: var(--card-accent, var(--pandan)); }
.demo-nav a.on::before { opacity: 1; }
.demo-nav-label { font-size: 0.72rem; color: var(--card-accent, var(--hornbill)); text-transform: lowercase; }
.demo-nav-title { font-family: var(--f-head); font-size: 1rem; line-height: 1.25; }
.demo-nav-card { font-size: 0.8rem; line-height: 1.4; color: var(--muted); }
@media (max-width: 1080px) {
  .demo-layout { grid-template-columns: minmax(0, 1fr); }
  .demo-nav { grid-column: 1; grid-row: 1; position: static; margin-bottom: 28px; }
  .demo-main { grid-row: 2; }
  .demo-nav ul { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .demo-nav-card { display: none; }
}