/* ==========================================================================
   emmanuelakbi.com theme for the free courses under /learn.

   The courses are built in GradSphereHub with their own quiet design system
   (Inter, one blue accent, light and dark). scripts/learn/sync.mjs copies them
   here and links this file last, so everything below overrides that system to
   match the blog: src/styles/blog.css for prose and code, footer.css,
   subscribe.css and reading.css for the chrome. Values are copied from those
   files rather than approximated; keep them in step when those change.

   Code is coloured as the blog's Shiki themes colour it: github-dark-dimmed on
   the ink blocks, github-light-default for inline code on the white page.

   Light only, as the rest of the site is. `html:root` outranks the courses'
   own `:root` inside their prefers-color-scheme: dark blocks, so a reader on a
   dark system still gets the site's look.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/fraunces-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/space-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-mono-700-latin.woff2') format('woff2');
}

/* ---------- Tokens -------------------------------------------------------- */

html:root {
  color-scheme: light;

  /* The site's palette, from src/index.css. */
  --ink: #0b0b0b;
  --ink-2: #1a1a1a;
  --paper: #ffffff;
  --bone: #f2f2f2;
  --grey-90: #171717;
  --grey-60: #6b6b6b;
  --grey-45: #8f8f8f;
  --grey-30: #b6b6b6;
  --line-site: rgba(11, 11, 11, 0.14);
  --line-invert: rgba(255, 255, 255, 0.16);
  --display: 'Fraunces', 'Times New Roman', serif;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* The course system's tokens, pointed at the site's palette. */
  --bg: #ffffff;
  --bg-subtle: #f2f2f2;
  --bg-sunken: #e6e6e6;
  --bg-code: #0b0b0b;
  --fg: #0b0b0b;
  --fg-muted: #6b6b6b;
  --fg-faint: #6b6b6b;
  --line: rgba(11, 11, 11, 0.14);
  --line-strong: #d6d6d6;
  --border-control: #8f8f8f;
  --accent: #0b0b0b;
  --accent-hover: #1a1a1a;
  --accent-fg: #ffffff;
  --accent-subtle: #f2f2f2;
  --ok: #17734b;
  --ok-subtle: #eaf6ef;
  --warn: #a3341f;
  --warn-subtle: #fdefec;

  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Space Mono', 'Courier New', monospace;

  --shell: 880px;
  --radius: 12px;
  --radius-sm: 6px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* github-dark-dimmed, the blog's block theme. */
  --gh-fg: #adbac7;
  --gh-comment: #768390;
  --gh-keyword: #f47067;
  --gh-string: #96d0ff;
  --gh-constant: #6cb6ff;
  --gh-function: #dcbdfb;
  --gh-type: #f69d50;
  --gh-line-no: #636e7b;

  /* github-light-default, the blog's inline-code theme. */
  --ghl-fg: #1f2328;
  --ghl-comment: #6e7781;
  --ghl-keyword: #cf222e;
  --ghl-string: #0a3069;
  --ghl-constant: #0550ae;
  --ghl-function: #8250df;
  --ghl-type: #953800;
}

html body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Headings (blog.css: .blogpost__title, .prose h2, .prose h3) --- */

.hero__title,
main h1,
main h2,
main h3,
main h4,
.lesson__title {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.hero__title {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.02;
}

/* Section pages' first heading is promoted from h2 to h1 at sync time (one h1 per page);
   it keeps the course's .sec h2 layout. */
.sec h1 {
  margin: 0 0 var(--s2);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s3);
}
main h1:not(.hero__title),
main .sec h2,
main .page > header h2 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.08;
}

main h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.12;
}

.lesson__title {
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  line-height: 1.12;
}

main h3:not(.lesson__title),
main h4 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.15;
}

/* Lesson numbers sit above the title as a mono label ("LESSON 10"), the way
   the site labels its sections. */
.lesson__n {
  display: block;
  margin: 0 0 0.7rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--grey-60);
}
.lesson__n::before {
  content: 'Lesson ';
}

/* "all 4 written" is the author's progress marker, not something a reader needs. */
.tag--done {
  display: none;
}

.tag {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-60);
  background: transparent;
  border: 1px solid var(--line-site);
  border-radius: 40px;
}

.hero__facts,
.hero__facts li {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-60);
}

/* ---------- Prose (blog.css .prose) -------------------------------------- */

main p,
main li {
  color: var(--ink-2);
}

/* Plain paragraphs and list items only: classed paragraphs are labels (code
   panel names, lesson meta, goal boxes) and keep their own sizes. */
main p:not([class]):not(.code p):not(.note p):not(.callout p),
main li:not([class]):not(.code li) {
  font-size: clamp(1.05rem, 1.35vw, 1.15rem);
  line-height: 1.8;
}

.lede,
.lesson__lede,
.hero__lede {
  color: var(--grey-60) !important;
  line-height: 1.6;
}

main strong {
  font-weight: 600;
  color: var(--ink);
}

main ul li::marker {
  color: var(--grey-45);
}
main ol li::marker {
  color: var(--grey-60);
  font-family: var(--mono);
}

main blockquote {
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.3;
  color: var(--ink);
  border: 0;
  padding-inline: clamp(0.5rem, 3vw, 2rem);
}

main hr {
  border: none;
  border-top: 1px solid var(--line-site);
}

main a:not(.btn):not([class*='card']):not([class*='pager']):not([class*='toc']) {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity 0.3s;
}
main a:not(.btn):hover {
  opacity: 0.6;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Inline code: the blog's white chip, coloured with github-light-default by
   learn.js (the same token classes as the blocks, light palette). */
main :not(pre) > code:not(.code__src) {
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--ghl-fg);
  background: var(--paper) !important;
  border: 1px solid var(--line-site) !important;
  padding: 0.12em 0.4em;
  border-radius: 4px;
}

:not(pre) > code .t-key { color: var(--ghl-keyword); }
:not(pre) > code .t-str { color: var(--ghl-string); }
:not(pre) > code .t-num,
:not(pre) > code .t-this { color: var(--ghl-constant); }
:not(pre) > code .t-fn { color: var(--ghl-function); }
:not(pre) > code .t-cls,
:not(pre) > code .t-priv { color: var(--ghl-type); }
:not(pre) > code .t-com { color: var(--ghl-comment); }
:not(pre) > code .t-prop,
:not(pre) > code .t-pun { color: var(--ghl-fg); }

/* ---------- Notes and callouts ------------------------------------------- */

/* The site has no boxed notes; these follow the subscribe panel's bone
   surface and the site's mono labels. */
.note {
  background: var(--bone);
  border: 0;
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
}
.note__title {
  font-family: var(--mono) !important;
  font-size: 0.66rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-60);
}
.note--warn,
.callout--warn {
  box-shadow: inset 2px 0 0 var(--warn);
}
.note--key,
.callout--point {
  box-shadow: inset 2px 0 0 var(--ink);
}

.callout {
  border-left: 0;
  background: var(--bone);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
}
.callout p {
  color: var(--ink-2);
}

/* ---------- Buttons ------------------------------------------------------ */

.btn {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  transition:
    background 0.3s var(--ease-out),
    color 0.3s var(--ease-out);
}

.btn:hover:not([disabled]) {
  background: var(--ink);
  color: var(--paper);
}

/* Primary: subscribe__submit. */
.btn--accent {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--accent:hover:not([disabled]) {
  background: var(--paper);
  color: var(--ink);
}

.btn--lg {
  padding: 0.95rem 1.6rem;
}

/* ---------- Course header ------------------------------------------------ */

/* Two rows: the course name with its place in the site, then every section as
   one scrollable strip of chips, styled as the blog's tag chips. */
.site-header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(11, 11, 11, 0.08);
}

.site-header__inner {
  max-width: var(--shell);
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  padding: 0.85rem var(--s5) 0.7rem;
}

.wordmark {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.wordmark__dot {
  display: none;
}

.lx-crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.lx-crumb__up {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-45);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s;
}
.lx-crumb__up:hover {
  color: var(--ink);
}

.lx-crumb__sep {
  color: var(--grey-45);
  font-family: var(--mono);
  font-size: 0.64rem;
}

.site-header nav {
  position: relative;
  margin-inline: calc(var(--s5) * -1);
}

.site-header nav::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 80%);
}

.site-nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0.45rem;
  padding: 0.15rem calc(var(--s5) + 40px) 0.15rem var(--s5);
}
.site-nav::-webkit-scrollbar {
  display: none;
}

/* blog.css .blog__tag */
.site-nav a {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-60);
  border: 1px solid var(--line-site);
  border-radius: 40px;
  padding: 0.45rem 0.8rem;
  transition:
    color 0.3s,
    border-color 0.3s,
    background-color 0.3s;
}
.site-nav a:hover {
  color: var(--ink);
  background: transparent;
  border-color: var(--ink);
}
.site-nav a[aria-current='page'] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

/* ---------- Code panels: blog.css .prose pre ----------------------------- */

/* The panel re-declares the tokens its children read, so the bar, the
   numbers, the output and the editor all go dark together. */
.code {
  --bg-code: var(--ink);
  --bg-subtle: var(--ink);
  --bg-sunken: var(--ink-2);
  --fg: var(--gh-fg);
  --fg-muted: var(--grey-30);
  --fg-faint: var(--grey-45);
  --line: var(--line-invert);
  --line-strong: var(--line-invert);
  --border-control: var(--grey-60);
  --ok: #8ddb8c;
  --ok-subtle: transparent;
  --warn: var(--gh-keyword);
  --warn-subtle: transparent;
  --accent: var(--paper);
  --accent-fg: var(--ink);

  color: var(--gh-fg);
  background: var(--ink);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
}

/* The bar is the blog's filename tab: [data-rehype-pretty-code-title]. */
.code__bar {
  background: var(--ink-2);
  border-bottom: 1px solid var(--line-invert);
  padding: 0.5rem 0.55rem 0.5rem 1.6rem;
  min-height: 2.75rem;
}

.code__bar > :last-child:not(.code__name) {
  margin-left: auto;
}

.code__name {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--grey-30);
}

/* Status tags ("ran at build time") as quiet mono labels, like the blog's
   copy control, not coloured badges. */
.code__tag,
.code__tag--py,
.code__tag--sh,
.code__tag--ran,
.code__tag--both,
.code__tag--fails {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-30);
  background: transparent;
  border: 1px solid var(--line-invert);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
}
.code__tag--fails {
  color: var(--gh-keyword);
}

/* Run, Reset and friends: the blog's .codeblock__copy. */
.code .btn {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink-2);
  border: 1px solid var(--line-invert);
  border-radius: 6px;
  min-height: 28px;
  padding: 0.3rem 0.7rem;
  transition:
    background-color 0.2s var(--ease-out),
    color 0.2s var(--ease-out);
}
.code .btn:hover:not([disabled]) {
  background: var(--paper);
  color: var(--ink);
}
.code .btn:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
.code .btn svg {
  width: 10px;
  height: 10px;
}

/* Multi-file panels: a mono filename over each file, a hairline between files. */
.code__file + .code__file {
  border-top: 1px solid var(--line-invert);
}
.code__path {
  padding: 1rem 1.6rem 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--grey-45);
}
.code__path + .code__body {
  padding-top: 0.6rem;
}

.code__body {
  padding: 1.4rem 0;
  font-family: var(--mono);
  font-size: 0.83rem;
  line-height: 1.65;
}

.code__nums {
  padding-inline: 1.6rem 1rem;
  color: var(--gh-line-no);
  opacity: 1;
}

.code__src {
  padding-right: 1.6rem;
  color: var(--gh-fg);
}

.code__edit {
  color: var(--gh-fg);
  background: transparent;
  font-family: var(--mono);
  font-size: 0.83rem;
  line-height: 1.65;
  padding: 1.4rem 1.6rem;
  caret-color: var(--paper);
}

.code ::selection {
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
}

/* github-dark-dimmed token colours. */
.code .t-key { color: var(--gh-keyword); }
.code .t-this { color: var(--gh-constant); font-style: normal; }
.code .t-cls,
.code .t-priv { color: var(--gh-type); }
.code .t-str { color: var(--gh-string); }
.code .t-num { color: var(--gh-constant); }
.code .t-com { color: var(--gh-comment); font-style: normal; }
.code .t-fn { color: var(--gh-function); }
.code .t-prop,
.code .t-pun { color: var(--gh-fg); }

/* Output: same ink surface, a hairline above, a mono label. */
.out {
  background: var(--ink);
  border-top: 1px solid var(--line-invert);
}
.out__label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-45);
  padding: 0.9rem 1.6rem 0.4rem;
}
.out__body {
  font-family: var(--mono);
  font-size: 0.83rem;
  line-height: 1.65;
  color: var(--gh-fg);
  padding: 0 1.6rem 1.4rem;
}
.out__body:empty::after {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--grey-45);
}
.ln--ret {
  color: var(--grey-45);
}
.out__prompt {
  color: var(--grey-45);
}
.out__cmd {
  color: var(--paper);
}

.code--fails .code__bar {
  background: var(--ink-2);
}

/* ---------- Site bar: PageNav -------------------------------------------- */

.lx-bar {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem var(--gutter);
  background: var(--paper);
  color: var(--ink);
}

.lx-bar a {
  color: inherit;
  text-decoration: none;
}

.lx-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.lx-brand svg {
  display: block;
  height: 1.5rem;
  width: auto;
}

.lx-brand span {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.lx-links {
  display: flex;
  gap: 1.8rem;
}

.lx-link {
  position: relative;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 2px;
}

.lx-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}

.lx-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.lx-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.lx-toggle i {
  display: grid;
  gap: 4px;
}

.lx-toggle i::before,
.lx-toggle i::after {
  content: '';
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
}

/* Drawer: slides in over the page from the right, never pushing it down. */
.lx-drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
  pointer-events: none;
}

.lx-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.lx-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 11, 0.45);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.lx-drawer.is-open .lx-drawer__backdrop {
  opacity: 1;
}

.lx-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 380px);
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.5rem 2rem;
  background: var(--ink);
  color: var(--paper);
  transform: translateX(100%);
  transition: transform 0.55s var(--ease);
  overflow-y: auto;
}

.lx-drawer.is-open .lx-drawer__panel {
  transform: translateX(0);
}

.lx-drawer__close {
  align-self: flex-end;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.lx-drawer__label {
  margin: 1.6rem 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.lx-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lx-drawer__list a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.55rem;
  letter-spacing: -0.02em;
}

.lx-drawer__list a em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
}

.lx-drawer__list--small a {
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: 0;
}

.lx-drawer__list a[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

body.lx-locked {
  overflow: hidden;
}

@media (max-width: 860px) {
  .lx-links {
    display: none;
  }
  .lx-toggle {
    display: inline-flex;
  }
  .lx-brand span {
    font-size: 0.74rem;
  }
}

/* ---------- Reading chrome: reading.css ---------------------------------- */

.lx-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 300;
  pointer-events: none;
}
.lx-progress > span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

.lx-totop {
  position: fixed;
  right: clamp(1.1rem, 3vw, 2rem);
  bottom: clamp(1.1rem, 3vw, 2rem);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-site);
  background: var(--paper);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.4s var(--ease-out),
    background-color 0.35s var(--ease-out),
    color 0.35s var(--ease-out),
    visibility 0s linear 0.4s;
  z-index: 80;
}
.lx-totop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.lx-totop:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.lx-totop:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- Newsletter: subscribe.css ------------------------------------ */

.lx-sub {
  margin-top: 6rem;
  border-top: 1px solid var(--line-site);
  background: var(--bone);
}
.lx-sub__wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.lx-sub__eyebrow,
.lx-sub__label {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey-60);
}
.lx-sub__label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  margin-bottom: 0.75rem;
}
.lx-sub__head {
  margin: 1.1rem 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.lx-sub__promise {
  margin: 1.1rem 0 0;
  max-width: 42ch;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--grey-60);
}
.lx-sub__row {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}
.lx-sub__input {
  flex: 1;
  min-width: 0;
  padding: 0.95rem 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  border-radius: 0;
}
.lx-sub__input::placeholder {
  color: var(--grey-60);
}
.lx-sub__input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.lx-sub__submit {
  flex: 0 0 auto;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  transition:
    background 0.3s var(--ease-out),
    color 0.3s var(--ease-out);
}
.lx-sub__submit:hover:not(:disabled) {
  background: var(--paper);
  color: var(--ink);
}
.lx-sub__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.lx-sub__status {
  min-height: 1.3rem;
  margin: 0.85rem 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink);
}
.lx-sub__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.lx-sub__done {
  border-top: 1px solid var(--ink);
  padding-top: 1.4rem;
}
.lx-sub__done-head {
  margin: 0;
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.2;
}
.lx-sub__done-body {
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--grey-60);
}
@media (max-width: 860px) {
  .lx-sub__wrap {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
}
@media (max-width: 520px) {
  .lx-sub__row {
    flex-direction: column;
    gap: 1.1rem;
  }
  .lx-sub__submit {
    width: 100%;
  }
}

/* ---------- Footer: footer.css ------------------------------------------- */

.lx-footer {
  background: var(--ink);
  color: var(--grey-30);
  padding: 0 0 2.5rem;
}
.lx-footer a {
  text-decoration: none;
}
.lx-footer__shell {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.lx-footer__top {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line-invert);
  padding-top: 2.5rem;
}
.lx-footer__meta p {
  margin: 0;
  color: var(--grey-45);
  font-size: 0.85rem;
  line-height: 1.5;
}
.lx-footer__nav {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  align-items: center;
}
.lx-footer__nav a {
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.lx-footer__nav a:hover {
  color: var(--grey-45);
}
.lx-footer__wordmark {
  overflow: hidden;
  text-align: center;
  margin: clamp(1rem, 2.5vw, 2rem) 0 1.1rem;
  line-height: 0.8;
  container-type: inline-size;
}
.lx-footer__wordmark span {
  display: inline-block;
  font-family: var(--display);
  font-optical-sizing: none;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 9.5vw, 9rem);
  font-size: 11.15cqi;
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--grey-60);
  white-space: nowrap;
  transition: -webkit-text-stroke-color 0.35s var(--ease-out);
}
.lx-footer__wordmark:hover span {
  -webkit-text-stroke-color: var(--paper);
}
.lx-footer__base {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line-invert);
  padding-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-45);
}

/* The course's own footer is replaced at sync time; this only guards against
   a page that still carries one. */
.site-footer {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .lx-drawer__panel,
  .lx-drawer__backdrop,
  .lx-totop,
  .btn,
  .lx-link::after {
    transition: none;
  }
}

/* ---------- Exercises course --------------------------------------------- */

/* Each exercise: a numbered mono label, a Fraunces title, the difficulty as a
   blog-style tag chip, then the ask. */
.drill {
  border-top: 1px solid var(--line-site);
  padding-top: 2.2rem;
  margin-block: 3rem;
}
.drill__head {
  align-items: baseline;
  gap: 1rem;
}
.drill__title {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem) !important;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.drill__n {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-60);
}
.drill__n::before {
  content: 'Exercise ';
}
.drill__level {
  flex: none;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-60);
  background: transparent;
  border: 1px solid var(--line-site);
  border-radius: 40px;
  padding: 0.35rem 0.7rem;
}
.drill__level--hard {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.drill__level--fair,
.drill__level--medium {
  color: var(--ink);
  border-color: var(--ink);
}
.drill__ask p {
  font-size: clamp(1.05rem, 1.35vw, 1.15rem);
  line-height: 1.8;
  color: var(--ink-2);
}
.drill__source {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-60);
}
.drill__source strong {
  font-weight: 400;
  color: var(--ink);
}

/* Hints and "more" folds: a bone panel with a mono summary. */
.hints,
.more,
.solution {
  background: var(--bone);
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  margin-block: 1.2rem;
}
.hints > summary,
.more > summary,
.solution > summary {
  padding: 0.95rem 1.3rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.hints > summary:hover,
.more > summary:hover,
.solution > summary:hover {
  color: var(--grey-60);
}
.hints__list,
.more__body,
.solution__body {
  padding: 0 1.3rem 1.1rem;
}
.hints__list li,
.more__body p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-2);
}

/* Page lists: "Pick a set" on each track page and the track cards on the
   contents page, as the blog's tag chips. */
.starters h2 {
  font-family: var(--mono) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-60);
  margin-bottom: 1rem;
}
.starters ul {
  gap: 0.5rem;
}
.starters a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink) !important;
  text-decoration: none !important;
  border: 1px solid var(--line-site);
  border-radius: 40px;
  padding: 0.5rem 0.85rem;
  transition:
    border-color 0.3s,
    background-color 0.3s,
    color 0.3s;
}
.starters a span {
  color: var(--grey-45);
}
.starters a:hover {
  opacity: 1 !important;
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper) !important;
}

.tcard {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-site);
  border-radius: 0;
  padding: 1.8rem 0 0.5rem;
}
.tcard h3 {
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
}
.tcard h3 a {
  text-decoration: none !important;
}
.tcard__rows a {
  text-decoration: none !important;
}
.tcard__rows li {
  border-color: var(--line-site) !important;
}
.tcard__rows span,
.bar__text {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--grey-60);
}
.bar {
  background: var(--bone);
  border: 0;
}
.bar__fill {
  background: var(--ink);
}
.head__meta {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-60);
}

/* "Exercises 1 to 40 of 150" under each page title. */
.lx-exrange {
  margin: 0.8rem 0 0;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-60);
}

/* Previous / All / Next between exercise pages. */
.lx-expager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-site);
}
.lx-expager a {
  color: var(--ink) !important;
  text-decoration: none !important;
}
.lx-expager__link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.2;
}
.lx-expager__link span {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-60);
}
.lx-expager__link--next {
  text-align: right;
  align-items: flex-end;
}
.lx-expager__link:hover {
  opacity: 0.6 !important;
}
.lx-expager__all {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  border-radius: 40px;
  padding: 0.55rem 1rem;
  transition:
    background-color 0.3s,
    color 0.3s;
}
.lx-expager__all:hover {
  background: var(--ink);
  color: var(--paper) !important;
}
@media (max-width: 640px) {
  .lx-expager {
    grid-template-columns: 1fr 1fr;
  }
  .lx-expager__all {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
  }
}

/* Credit for the exercise lists the questions answer. */
.lx-credit {
  margin-top: 2.5rem !important;
  padding: 1.1rem 1.3rem;
  background: var(--bone);
  border-radius: var(--radius);
  font-size: 0.9rem !important;
  line-height: 1.6;
  color: var(--grey-60) !important;
}
.lx-credit a {
  color: var(--ink) !important;
}