/* ============================================================================
   Aulas — the platform's course, and one lesson of it.

   Two surfaces in one sheet because they are one thing read twice: the index
   is the syllabus, the article is a page of it, and the number that locates a
   lesson has to look the same in both.

   The index is a register, not a grid and not a stack of cards. These rows
   have an order — that is the whole claim a numbered course makes — so they
   are hairline-separated rows inside one panel, threaded by a rule that runs
   down the number gutter. Six bordered cards with a gap between them read as
   six unrelated things. The number is set in the mono face like every other
   machine value on this site: a position is data.

   Almost no accent: orange is money and the primary action, and a lesson is
   not money. The single orange on the page is the button that starts the
   course, which is the primary action by definition. The level is drawn as a
   greyscale ordinal rather than tinted — the state hues here mean a state,
   and a reader's level is not one. Written in logical properties throughout;
   this page is served under `dir="rtl"` too.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Index.
   ------------------------------------------------------------------------ */

.lessons {
  padding-block: var(--sp-10) var(--sp-16);
}

/* Sized against the row, which is the reading measure plus the number gutter,
   the reading-time column and the chevron. The page container's 1280px leaves
   half of every row empty to the end of the line. */
.lessons .lessons__frame {
  max-width: 54rem;
}

.lessons__head {
  margin-block-end: var(--sp-6);
}

.lessons__title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--ink-050);
  margin: 0;
  text-wrap: balance;
}

.lessons__lede {
  color: var(--ink-300);
  max-width: 58ch;
  margin: var(--sp-3) 0 0;
  text-wrap: pretty;
}

/* The house strip, holding what the syllabus is worth reading for: how many
   articles there are and how long the whole thing takes. Capped well short of
   the measure — two cells stretched across 54rem put a one-digit figure in
   the middle of an empty field, and these are small numbers stated plainly,
   not headline totals. */
.lessons__ledger {
  max-inline-size: 30rem;
  margin-block-end: var(--sp-5);
}

/* ---------------------------------------------------------------------------
   The way in, and on every visit after the first, the way back in.

   One panel that says the same four things in every state — a label, an
   article, where that article sits, and a button that opens it — so that the
   browser correcting the server's guess is a change of words and never a
   change of shape. The meter is on it at rest reading zero for the same
   reason: a strip that appears when there is something to report is a strip
   that shoves the rest of the page down the moment a returning reader
   arrives.

   This holds the page's only orange. The register below is deliberately
   colourless, and the one thing on a syllabus you most want clicked is the
   article the reader is actually up to.
   ------------------------------------------------------------------------ */

.lessons__resume {
  margin-block-end: var(--sp-5);
}

.lessons__resume-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-5);
}

.lessons__resume-body {
  flex: 1 1 22rem;
  min-inline-size: 0;
}

/* The article's name, at the size the module titles are set at: this is the
   one row of the register that has been lifted out of it, and it should read
   as the same kind of thing. */
.lessons__resume-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--ink-050);
  margin: var(--sp-2) 0 0;
  text-wrap: pretty;
}

/* Where it sits, under the name rather than over it. The label above already
   says what this panel is for; this line is the address, and an address is
   what you check after you have recognised the thing, not before. */
.lessons__resume-where {
  font-size: var(--fs-xs);
  color: var(--ink-400);
  margin: var(--sp-2) 0 0;
}

.lessons__resume-go {
  flex: 0 0 auto;
}

/* The measurement, on its own floor under the panel's hairline. Figure and
   bar on one line, the bar taking whatever the sentence does not. */
.lessons__meter {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-block-start: 1px solid var(--line);
}

.lessons__meter-bar {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: block;
  block-size: 4px;
  /* The fill grows from the inline start, which is the other edge under
     `dir="rtl"`. Same device the ratings bars use. */
  transform: scaleX(var(--bar-dir, 1));
}

[dir="rtl"] .lessons__meter-bar {
  --bar-dir: -1;
}

.lessons__meter-track {
  fill: var(--ink-800);
}

/* Grey, not orange: what a reader has read is not money and not the primary
   action, and the button a few pixels above it is both. The exception is the
   end of the course — at that point the bar is a total, and a total on this
   site is allowed to be orange. It happens exactly once.

   Served at zero and given its real width a frame later, so it grows rather
   than appears. The only motion on the page. */
.lessons__meter-fill {
  fill: var(--ink-300);
  transition: width var(--dur-3) var(--ease-out);
}

.lessons__meter--done .lessons__meter-fill {
  fill: var(--accent);
}

.lessons__meter-count {
  font-size: var(--fs-xs);
  color: var(--ink-400);
  margin: 0;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   The contents. Ten modules in one look, and ten ways into the register.

   The syllabus below is eight thousand pixels long and says nothing about its
   own shape while you are inside it; this is the shape. No state and no
   JavaScript — it is the same list for every reader, which is what lets it be
   the thing a crawler indexes and the first thing a keyboard reaches.

   Columns rather than one list, because the tracks are parallel: three runs
   of modules, and a reader is inside one run at a time.
   ------------------------------------------------------------------------ */

.lessons__contents {
  margin-block-end: var(--sp-10);
}

/* No panel header band. The resume panel above states what it is the same
   way — a label at the top of its own body — and two chrome bars stacked a
   few pixels apart would make the top of the page read as a stack of
   containers rather than as two things. */
.lessons__contents-label {
  padding: var(--sp-4) var(--sp-5) 0;
}

.lessons__contents-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
}

.lessons__contents-level {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-200);
  margin: 0 0 var(--sp-1);
}

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

/* The number and the name, and a hit area that is the whole line rather than
   the words in it. Negative inline margin so the fill on hover reads as the
   row lighting up and not as a box appearing inside the column. */
.lessons__contents-link {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-2);
  margin-inline: calc(var(--sp-2) * -1);
  color: var(--ink-300);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.lessons__contents-link:hover {
  color: var(--ink-050);
  background: var(--ink-800);
}

.lessons__contents-link:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.lessons__contents-num {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--ink-400);
  padding-block-start: 0.125rem;
}

.lessons__contents-link:hover .lessons__contents-num {
  color: var(--ink-300);
}

/* Two lines at most. A module title that runs to three turns the column into
   paragraphs and the ten entries stop reading as a list of ten. */
.lessons__contents-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* The track is a band over the modules that belong to it, not a box around
   them. It used to be the panel, back when a level held one flat list; now
   the module is the panel, and a panel inside a panel would draw two borders
   around one thing. What is left of the track is what a heading is: a name, a
   line saying who it is for, and air. */
.lessons__track + .lessons__track {
  margin-block-start: var(--sp-12);
}

.lessons__track-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-block-end: var(--sp-5);
}

.lessons__track-headings {
  min-inline-size: 0;
}

/* The track name is content here, not a panel's chrome label, so it keeps the
   section-heading size rather than the uppercase micro title. */
.lessons__track-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--ink-050);
  margin: 0;
}

.lessons__track-note {
  font-size: var(--fs-sm);
  color: var(--ink-400);
  margin: var(--sp-1) 0 0;
  max-width: 52ch;
  text-wrap: pretty;
}

.lessons__track-count {
  font-size: var(--fs-xs);
  color: var(--ink-400);
  margin: 0;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   The module — the unit a reader finishes, and so the unit that gets a box.
   ------------------------------------------------------------------------ */

.lessons__module + .lessons__module {
  margin-block-start: var(--sp-5);
}

/* An article's crumb points back at the module it came out of, and the header
   is fixed: without this the browser puts the anchor's top edge at the top of
   the viewport, which is behind the header, and a reader returning from
   lesson 4 lands in the middle of a run of rows with the module's number and
   name hidden above them. The whole promise of pointing the crumb at the
   chapter rather than at the top of the page is this line. The contents block
   above depends on it too. */
.lessons__module {
  scroll-margin-block-start: calc(var(--h-header) + var(--sp-4));
}

/* A chapter with nothing left in it: the border comes up one step and the
   mark on the cost line appears. Nothing dims and nothing collapses — a
   finished module is still a module a reader goes back into, and greying it
   out would say it was spent. */
.lessons__module--done {
  border-color: var(--line-hi);
}

.lessons__module-mark {
  display: none;
  color: var(--ink-200);
}

.lessons__module--done .lessons__module-mark {
  display: block;
}

.lessons__module-head {
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
}

.lessons__module-headings {
  min-inline-size: 0;
}

/* The number, set above the name rather than glued in front of it. It is how
   the module is addressed — "estou no módulo 4" — and in the label face it
   reads as the machine value it is instead of as part of the title. */
.lessons__module-eyebrow {
  display: block;
  margin: 0 0 var(--sp-1);
  color: var(--ink-400);
}

.lessons__module-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--ink-050);
  margin: 0;
  text-wrap: pretty;
}

.lessons__module-note {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-400);
  margin: var(--sp-1) 0 0;
  max-width: 56ch;
  text-wrap: pretty;
}

/* What the chapter costs, in the same two units the strip at the top of the
   page uses. One line, never wrapped: it is a pair of figures, and a figure
   that falls to a second line stops being a column. */
.lessons__module-cost {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-400);
  margin: 0;
  white-space: nowrap;
}

.lessons__module-dot {
  color: var(--ink-600);
}

/* The register. The counter is the browser's, but the printed number is the
   record's own position, so the marker is suppressed and the number is drawn
   as content. A gap in the numbering is a real editorial state and the page
   shows it. */
.lessons__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The spine: one hairline down the centre of the number gutter, from the
   track header's rule to the panel's floor, with each number seated over it.
   It is the only thing on the page that says "in this order" without words.
   `inset-inline-start` keeps it in the gutter under `dir="rtl"`, where the
   gutter is on the other side.

   Lifted over the rows rather than left under them: a row's hover fill paints
   over anything its parent drew, so at rest the thread ran the height of the
   register and the moment a reader pointed at a row it snapped in two. The
   node lifts one step further so the rule passes behind the digit, not
   through it. */
.lessons__list::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block: 0;
  inset-inline-start: calc(var(--sp-5) + 0.875rem);
  inline-size: 1px;
  background: var(--line);
}

.lessons__row + .lessons__row {
  border-block-start: 1px solid var(--line);
}

.lessons__link {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease);
}

.lessons__link:hover {
  background: var(--ink-800);
}

/* The ring is drawn outside the row, so the row has to paint over its
   neighbours' fills and the panel's border while it holds focus. */
.lessons__link:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  z-index: 3;
  border-radius: var(--r-xs);
}

/* The last row closes the panel, so it takes the panel's own corner back —
   one hairline in, which is where the fill actually ends. */
.lessons__row:last-child .lessons__link {
  border-end-start-radius: calc(var(--r-lg) - 1px);
  border-end-end-radius: calc(var(--r-lg) - 1px);
}

/* A node on the spine, not a badge: the lesson's place in its track, round
   because it is a counter, opaque because the rule runs behind it. Fixed size
   so two- and three-digit positions keep every title on one vertical. */
.lessons__num {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-300);
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
}

/* One step above the row's own hover fill, so the node stays a node while the
   row lights up under it. */
.lessons__link:hover .lessons__num {
  color: var(--ink-050);
  background: var(--ink-750);
  border-color: var(--line-hard);
}

/* Read: the node fills in.

   The number stays. A checkmark in its place would take the position away,
   and the position is the content of this page — a reader who has read
   fourteen articles still needs to know that this one is the third of its
   chapter. What changes is the ground under it, from a well darker than the
   panel to a plate lighter than it, so a glance down the spine finds the
   filled run without reading a single digit. That is also why the state is
   drawn on the thread rather than on the title: dimming the titles of the
   articles a reader has read would make the part of the course they know
   best the hardest part to scan. */
.lessons__row--read .lessons__num {
  color: var(--ink-050);
  background: var(--ink-600);
  border-color: var(--line-hard);
}

/* The hover fill is a step *up* from the resting node, and a read node is
   already two steps up — without this, pointing at an article you have read
   would darken its number. */
.lessons__row--read .lessons__link:hover .lessons__num {
  background: var(--ink-500);
}

/* And the one they are up to. Orange, on a page whose register is otherwise
   colourless, because on a return visit this row and the button at the top of
   the page are the same instruction — and this is the half of it a reader
   meets while scrolling. The wash is a fill, not a glow: no offsetless ring,
   no border heavier than the hairline it replaces. */
.lessons__row--current .lessons__link {
  background: var(--accent-wash);
}

.lessons__row--current .lessons__link:hover {
  background: var(--accent-wash-hi);
}

.lessons__row--current .lessons__num {
  color: var(--accent);
  background: var(--ink-900);
  border-color: var(--accent-dim);
}

.lessons__row--current .lessons__link:hover .lessons__num {
  border-color: var(--accent);
}

.lessons__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-inline-size: 0;
  padding-block-start: 0.1875rem;
}

.lessons__row-title {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink-050);
  text-wrap: pretty;
}

/* Two lines, clamped. A summary that runs to three or four lines turns the
   register back into a stack of paragraphs and the numbers stop reading as a
   column. */
.lessons__row-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-300);
  max-width: 74ch;
}

.lessons__row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-1);
}

/* A column, so the figures line up and a reader can pick an article by the
   time they have. Tabular via `.num`; end-aligned so the unit stays on one
   vertical whether the figure is one digit or three.

   It also replaces the chevron this row used to end on. A chevron repeats
   what a whole tappable row already says, and beside a figure it reads as a
   second, weaker end column — the row's own fill and its number lighting up
   are the affordance. */
.lessons__time {
  font-size: var(--fs-xs);
  color: var(--ink-400);
  white-space: nowrap;
  text-align: end;
  padding-block-start: 0.3125rem;
  transition: color var(--dur-1) var(--ease);
}

/* Not only for the lift: `--ink-400` is 4.71:1 on the panel and 4.31:1 on the
   row's hover fill, so left alone the figure would fall under 4.5:1 exactly
   while a reader is pointing at it. `--ink-300` is 6.5:1 there. */
.lessons__link:hover .lessons__time {
  color: var(--ink-300);
}

/* Under 480px the reading time drops out of the end column and sits under the
   summary instead: a 3rem column taken out of a 320px row is width the title
   needs more than the figure does. */
/* The chapter's cost sits beside its headings while there is a column to sit
   in. Under about 44rem there is not: `align-items: center` was floating "6
   aulas · 24 min" at the mid-height of a four-line summary, level with the
   middle of a sentence and attached to nothing. Below that width it goes
   under the headings and reads as the last line of them. */
@media (max-width: 44rem) {
  .lessons__module-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }

  .lessons__module-cost {
    justify-content: flex-start;
  }
}

@media (max-width: 30rem) {
  .lessons__resume-main {
    padding: var(--sp-4);
  }

  .lessons__contents-label {
    padding: var(--sp-4) var(--sp-4) 0;
  }

  .lessons__contents-body {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
  }

  /* Nothing else on the row to balance against, and a primary button that
     ends halfway across a phone reads as an afterthought. */
  .lessons__resume-go {
    inline-size: 100%;
  }

  .lessons__meter {
    padding: var(--sp-3) var(--sp-4);
  }

  .lessons__module-head {
    padding: var(--sp-4);
  }

  .lessons__list::before {
    inset-inline-start: calc(var(--sp-4) + 0.875rem);
  }

  .lessons__link {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-4);
  }

  .lessons__time {
    grid-column: 2;
    text-align: start;
    padding-block-start: 0;
  }
}

/* ---------------------------------------------------------------------------
   One lesson. An article: prose at a reading measure, and nothing beside it.
   ------------------------------------------------------------------------ */

.lesson {
  padding-block: var(--sp-8) var(--sp-20);
}

.lesson .lesson__frame {
  max-width: 46rem;
}

.lesson__crumb {
  margin-block-end: var(--sp-6);
}

.lesson__crumb-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-300);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}

.lesson__crumb-link:hover {
  color: var(--ink-050);
}

.lesson__crumb-link:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

/* The crumb names the chapter the article belongs to, which is two parts: the
   number that addresses it and the name. The number is set like every other
   position on this page — mono, quieter than the words beside it — and the
   whole thing wraps rather than pushing a long module title off the line. */
.lesson__crumb-link {
  flex-wrap: wrap;
  row-gap: var(--sp-1);
}

.lesson__crumb-module {
  color: var(--ink-400);
}

.lesson__crumb-dot {
  color: var(--ink-600);
}

/* The arrow points back, so under `dir="rtl"` it has to point the other way.
   The icon is drawn once and mirrored here rather than shipped twice. */
[dir="rtl"] .lesson__crumb-link .icon,
[dir="rtl"] .lesson__step-go {
  transform: scaleX(-1);
}

.lesson__head {
  margin-block-end: var(--sp-8);
}

.lesson__where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-4);
}

.lesson__number {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-200);
}

.lesson__time {
  font-size: var(--fs-xs);
  color: var(--ink-400);
}

.lesson__title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--ink-050);
  margin: 0;
  text-wrap: balance;
}

.lesson__lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--ink-300);
  margin: var(--sp-4) 0 0;
  max-width: var(--w-prose);
  text-wrap: pretty;
}

.lesson__draft {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-200);
  background: var(--danger-wash);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-5) 0 0;
}

.lesson__draft .icon {
  color: var(--danger);
  flex-shrink: 0;
}

/* The article. `.prose` already sets the measure and the paragraph rhythm;
   this raises the line height, because a lesson is read straight through
   where the site's other prose is scanned. */
.lesson__prose {
  color: var(--ink-100);
  line-height: var(--lh-body);
}

.lesson__prose p {
  margin: 0;
}

.lesson__prose p + p {
  margin-block-start: var(--sp-5);
}

/* A picture set among the paragraphs.

   It runs the reading measure exactly rather than breaking wider than it: the
   article is one column read straight down, and a figure that bleeds past the
   text is a second column the eye has to come back from. It also means no
   negative margins to get wrong under `dir="rtl"`.

   The border and the sunken fill are the empty box, drawn before the bytes
   arrive — the `width`/`height` on the image reserve the space, and this is
   what occupies it while the file loads. */
.lesson__figure {
  margin-block: var(--sp-8);
  margin-inline: 0;
}

.lesson__figure-image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* The caption is the picture's description, not a second paragraph: set small
   and in tertiary ink so it reads as a label under the frame rather than as
   prose the reader has to work through. */
.lesson__figure-caption {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink-400);
  margin-block-start: var(--sp-3);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   The way on. Only within the reader's own track.
   ------------------------------------------------------------------------ */

.lesson__pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-12);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--line);
}

.lesson__step {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1 1 15rem;
  min-inline-size: 0;
  padding: var(--sp-4);
  color: inherit;
  text-decoration: none;
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.lesson__step:hover {
  background: var(--ink-800);
  border-color: var(--line-hi);
}

.lesson__step:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* The next step is the one the reader wants, so it is the one that reads
   forward: label and title flush to the end edge, arrow last. */
.lesson__step--next {
  text-align: end;
}

.lesson__step-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-inline-size: 0;
  flex: 1 1 auto;
}

.lesson__step-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--ink-400);
}

.lesson__step-title {
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink-050);
  text-wrap: pretty;
}

.lesson__step-go {
  color: var(--ink-500);
  flex-shrink: 0;
  transition: color var(--dur-1) var(--ease);
}

.lesson__step:hover .lesson__step-go {
  color: var(--ink-200);
}

.lesson__end {
  flex: 1 1 15rem;
  align-self: center;
  font-size: var(--fs-sm);
  color: var(--ink-400);
  margin: 0;
  text-wrap: pretty;
}

.lesson__end-link {
  color: var(--ink-200);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lesson__end-link:hover {
  color: var(--ink-050);
}