@charset "UTF-8";
/* ==========================================================================
   Winter Wishes Training
   --------------------------------------------------------------------------
   Tokens are taken from the production NY Cares `teamleaders` Drupal theme
   (project-resources/nyc-theme-kit) and the New York Cares Brand & Style
   Guidelines v04.2024, so anything built here transfers back to the theme.

   Two brand rules this file obeys deliberately:
     · Type is left-justified, right-ragged. Never centred, never justified.
     · There is no dark mode. It was built in the theme and then switched off,
       so it does not exist on the live site. Every colour is painted
       explicitly rather than inherited from the viewer's preference.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   Tropiline is COMMERCIALLY LICENSED. It ships here for internal New York
   Cares project use. Do not redistribute this folder outside the engagement.
   Manrope is SIL OFL 1.1 and free to redistribute.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Tropiline';
  src: url('../fonts/Tropiline/Tropiline-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tropiline';
  src: url('../fonts/Tropiline/Tropiline-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Tropiline';
  src: url('../fonts/Tropiline/Tropiline-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tropiline';
  src: url('../fonts/Tropiline/Tropiline-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope/Manrope-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope/Manrope-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope/Manrope-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope/Manrope-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope/Manrope-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand primaries — Brand Book p.7 */
  --scarlet:        #CD212A;  /* Scarlet Flame */
  --scarlet-deep:   #A81B22;  /* hover / pressed */
  --scarlet-dark:   #80120A;  /* theme red-dark, for text on tint */
  --scarlet-tint:   #F9EDEE;
  --concrete:       #E4E2E1;
  --city-grey:      #434345;

  /* Brand accents — Brand Book p.7. Winter Wishes is the plum campaign. */
  --plum:           #8D238D;  /* as used by the live Winter Wishes portal */
  --plum-deep:      #6E1B6E;
  --plum-tint:      #F4EAF4;
  --taxi:           #F4D043;
  --orange:         #E76E24;
  --orange-deep:    #B8551A;
  --orange-tint:    #FDF2EA;
  --green:          #4CB860;
  --green-deep:     #2F7A45;
  --green-tint:     #EAF6ED;
  --broadway:       #45BCD2;
  --freedom:        #007484;

  /* Surfaces. The portal itself is stark white; the training doc sits on
     warm paper so it never reads as the live application. */
  --paper:          #FBFAF8;
  --surface:        #FFFFFF;
  --beige:          #F6F4F0;
  --beige-deep:     #E1DCD1;
  --ink:            #26262A;
  --line:           #E4E1DC;
  --line-soft:      #EFECE6;

  /* Type */
  --display: 'Tropiline', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Geometry — theme radii: rounded-ml 12, rounded-lg 14, rounded-xl 18 */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-hero: 24px;

  --rail-w: 286px;
  --topbar-h: 64px;
  --measure: 68ch;

  --shadow-sm: 0 1px 3px rgba(38, 38, 42, 0.05);
  --shadow: 0 4px 14px rgba(38, 38, 42, 0.07);
  --shadow-lg: 0 18px 48px rgba(38, 38, 42, 0.20);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html { color-scheme: light; -webkit-text-size-adjust: 100%; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;          /* theme text-base1 */
  line-height: 1.6;
  font-weight: 400;
  text-align: left;         /* brand rule: left-justified, right-ragged */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; margin: 0; line-height: 1.15; }
/* Section labels that are headings for the outline (an H2 per section) but
   keep their small-caps label look. Each sets its own size and weight;
   this undoes only what the heading defaults above would change. */
h2.tryit__label, h2.lookfor__label, h2.gtk__label, h2.doing__label {
  font-family: var(--sans); line-height: inherit;
}
h2.role-card__title { line-height: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--scarlet); text-decoration-thickness: 1px; text-underline-offset: 2px; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--scarlet);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Route changes move focus to the new <h1> so keyboard and screen-reader users
   land in the fresh content. That focus is programmatic, so it must not paint. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

.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;
}

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 300;
  background: var(--scarlet); color: #fff; font-weight: 700; font-size: 15px;
  padding: 10px 18px; border-radius: 999px; text-decoration: none;
  transition: top 120ms var(--ease);
}
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------------------
   3. Buttons — pill-shaped, per the theme's .btn-* family
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 12px 22px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 140ms var(--ease), color 140ms var(--ease),
              border-color 140ms var(--ease), transform 90ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; pointer-events: none; }

.btn--primary { background: var(--scarlet); color: #fff; }
.btn--primary:hover { background: var(--scarlet-deep); }

.btn--outline { background: transparent; color: var(--scarlet); border-color: var(--scarlet); }
.btn--outline:hover { background: var(--scarlet); color: #fff; }

.btn--quiet { background: transparent; color: var(--city-grey); border-color: var(--beige-deep); }
.btn--quiet:hover { border-color: var(--scarlet); color: var(--scarlet); }

.btn--plum { background: #fff; color: var(--plum-deep); }
.btn--plum:hover { background: var(--plum-tint); }

.btn--sm { font-size: 14px; padding: 9px 16px; }

/* Inline SVGs carry a viewBox but no intrinsic size, so they collapse to 0x0
   as flex items unless given one. */
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Text link with an arrow that underlines on hover — the theme's arrow-link */
.arrow-link {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-weight: 600; font-size: 15px; color: var(--scarlet);
  text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
}
.arrow-link span:first-child { position: relative; }
.arrow-link span:first-child::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 160ms var(--ease);
}
.arrow-link:hover span:first-child::after,
.arrow-link:focus-visible span:first-child::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   4. Shared bits
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--city-grey);
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  white-space: nowrap;
  background: var(--beige); color: var(--city-grey);
}
.pill--plum   { background: var(--plum-tint);    color: var(--plum-deep); }
.pill--green  { background: var(--green-tint);   color: var(--green-deep); }
.pill--orange { background: var(--orange-tint);  color: var(--orange-deep); }
.pill--outline-white { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45); }

.progress-track {
  display: block; height: 6px; border-radius: 999px;
  background: var(--beige-deep); overflow: hidden;
}
.progress-fill {
  display: block; height: 100%; border-radius: 999px; background: var(--green);
  transition: width 380ms var(--ease);
}

/* --------------------------------------------------------------------------
   5. Top bar
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 18px;
  height: var(--topbar-h); padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar__home {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit; margin-right: auto;
}
.topbar__logo { height: 34px; width: auto; }
.topbar__divider { width: 1px; height: 26px; background: var(--line); }
.topbar__label {
  font-family: var(--display); font-size: 19px; font-weight: 600;
  color: var(--city-grey); letter-spacing: 0.01em;
  white-space: nowrap;
}
/* "Training" is set in the same grey as the rest of the title — the em is kept
   only so the word stays addressable, not to colour it. */
.topbar__label em { font-style: normal; color: inherit; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line);
  color: var(--city-grey); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color 140ms var(--ease), color 140ms var(--ease), background-color 140ms var(--ease);
}
.icon-btn:hover { border-color: var(--scarlet); color: var(--scarlet); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn kbd {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  background: var(--beige); color: var(--city-grey);
  border-radius: 5px; padding: 3px 6px; letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   6. Layout — persistent contents rail + content column
   -------------------------------------------------------------------------- */
.layout {
  display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: 32px; align-items: start;
  max-width: 1440px; margin: 0 auto; padding: 26px 26px 90px;
}
.layout--solo { grid-template-columns: minmax(0, 1fr); max-width: 1120px; }

.content { min-width: 0; }

/* --------------------------------------------------------------------------
   7. The rail
   The plum header carries the Winter Wishes brand at all times, which frees
   every lesson page from having to re-state it in a hero.
   -------------------------------------------------------------------------- */
.rail {
  position: sticky; top: calc(var(--topbar-h) + 26px);
  max-height: calc(100vh - var(--topbar-h) - 52px);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm);
}

.rail__head {
  position: relative; overflow: hidden;
  background: var(--plum); color: #fff; padding: 20px 20px 18px;
  /* The rail is a flex column with a max-height. Without this the head shrinks
     when the contents overflow and clips the progress count. */
  flex: 0 0 auto;
}
/* This sits above .rail__flakes so the flake layer's `position: absolute`
   (equal specificity, declared later) still wins. */
.rail__head > * { position: relative; }
.rail__flakes {
  position: absolute; right: -30px; bottom: -40px; width: 168px; height: auto;
  opacity: 0.45; pointer-events: none; z-index: 0;
}
.rail__wordmark { height: 26px; width: auto; }
.rail__role {
  margin-top: 14px; font-family: var(--display); font-size: 22px;
  font-weight: 600; line-height: 1.1;
}
.rail__season { margin-top: 9px; }
.rail__progress { margin-top: 16px; }
.rail__progress .progress-track {
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.rail__progress .progress-fill { background: var(--green); }
.rail__count {
  margin-top: 7px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.85);
}

.rail__scroll { overflow-y: auto; padding: 6px 0 10px; flex: 1; }
.rail__section {
  padding: 16px 20px 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.11em;
  text-transform: uppercase; color: #7A7580;
}
.rail__list { list-style: none; }

.rail__item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 20px; background: none; border: 0; border-left: 3px solid transparent;
  text-align: left; font-size: 15px; font-weight: 500; color: var(--city-grey);
  cursor: pointer; text-decoration: none;
  transition: background-color 130ms var(--ease), color 130ms var(--ease);
}
.rail__item:hover { background: var(--beige); color: var(--ink); }
.rail__item[aria-current] {
  border-left-color: var(--scarlet); background: var(--scarlet-tint);
  color: var(--scarlet-dark); font-weight: 700;
}
.rail__num {
  flex: 0 0 auto; width: 25px; height: 25px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--beige-deep); color: var(--city-grey); background: var(--surface);
}
.rail__item[aria-current] .rail__num { border-color: var(--scarlet); color: var(--scarlet); }
.rail__item.is-done .rail__num {
  background: var(--green-deep); border-color: var(--green-deep); color: #fff;
}
.rail__num svg { width: 13px; height: 13px; }
.rail__item.is-guide .rail__num { border-style: none; background: var(--beige); }
.rail__item.is-guide .rail__num svg { width: 15px; height: 15px; color: var(--plum); }
.rail__label { min-width: 0; }

.rail__foot { flex: 0 0 auto; border-top: 1px solid var(--line-soft); padding: 14px 20px; }
/* Mirror of .arrow-link: the arrow leads, and the underline animates in from the
   right so it tracks the direction of travel. */
.rail__back {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; color: var(--scarlet); text-decoration: none;
}
.rail__back svg { width: 15px; height: 15px; flex: 0 0 auto; transition: transform 160ms var(--ease); }
.rail__back:hover svg, .rail__back:focus-visible svg { transform: translateX(-3px); }
.rail__back span { position: relative; }
.rail__back span::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 160ms var(--ease);
}
.rail__back:hover span::after, .rail__back:focus-visible span::after { transform: scaleX(1); }

/* Mobile: the rail becomes a disclosure above the content */
.rail__toggle { display: none; }

/* --------------------------------------------------------------------------
   8. Role picker (the entry screen)
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--plum); color: #fff;
  border-radius: var(--r-hero); padding: 46px 40px 44px;
}
/* Declared before .hero__flakes on purpose — see the note on .rail__head. */
.hero > * { position: relative; }
.hero__flakes {
  position: absolute; right: -8px; bottom: -24px; height: 300px; width: auto;
  opacity: 0.9; pointer-events: none; z-index: 0;
}
.hero__wordmark { height: 40px; width: auto; }
.hero__title {
  margin-top: 20px; font-size: clamp(2.1rem, 1.1rem + 3.4vw, 3.4rem);
  line-height: 1.02; max-width: 22ch;
}
.hero__lede {
  margin-top: 18px; max-width: 62ch; font-size: 18px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
.hero__season { margin-bottom: 4px; margin-top: 18px; }

.roles { margin-top: 38px; display: grid; gap: 16px; }
.role-card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 22px; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 24px 26px;
  box-shadow: var(--shadow-sm);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease), transform 150ms var(--ease);
}
.role-card:hover { border-color: var(--beige-deep); box-shadow: var(--shadow); transform: translateY(-1px); }
.role-card__icon {
  width: 56px; height: 56px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--plum-tint); color: var(--plum);
}
.role-card__icon svg { width: 28px; height: 28px; }
.role-card--soon .role-card__icon { background: var(--beige); color: #8E8992; }
/* Milestone 2 roles have nowhere to go yet. The card is dimmed and its hover
   lift removed, so nothing suggests it can be opened. */
.role-card--soon { opacity: 0.62; }
.role-card--soon:hover {
  border-color: var(--line); box-shadow: var(--shadow-sm); transform: none;
}
.role-card__title {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--display); font-size: 24px; font-weight: 600;
}
.role-card__body { margin-top: 8px; font-size: 16px; color: var(--city-grey); max-width: 58ch; }
.role-card__meta { margin-top: 12px; display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: #7A7580; }
.role-card__meta strong { color: var(--ink); font-weight: 700; }
.role-card__actions { display: flex; flex-direction: column; gap: 10px; min-width: 210px; }
.role-card__actions .btn { width: 100%; }

/* --------------------------------------------------------------------------
   9. Role landing — the contents overview
   -------------------------------------------------------------------------- */
.page-head { margin-bottom: 30px; }
.page-head h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); max-width: 26ch; }
.page-head__lede { margin-top: 14px; font-size: 19px; color: var(--city-grey); max-width: var(--measure); }

.resume {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-bottom: 30px; padding: 20px 24px;
  background: var(--beige); border: 1px solid var(--beige-deep);
  border-radius: var(--r-lg);
}
.resume__text { flex: 1 1 260px; min-width: 0; }
.resume__text strong { display: block; font-size: 17px; }
.resume__text span { font-size: 15px; color: var(--city-grey); }

.section-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin: 40px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.section-head h2 { font-size: 26px; }
.section-head .count { font-size: 14px; font-weight: 600; color: #7A7580; }

.chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 14px; }
.chapter-tile {
  display: flex; flex-direction: column; gap: 10px; text-align: left;
  padding: 18px 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  cursor: pointer; text-decoration: none; color: inherit;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease), transform 150ms var(--ease);
}
.chapter-tile:hover { border-color: var(--scarlet); box-shadow: var(--shadow); transform: translateY(-2px); }
.chapter-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chapter-tile__num {
  font-family: var(--display); font-size: 26px; font-weight: 700;
  color: var(--beige-deep); line-height: 1; font-variant-numeric: tabular-nums;
}
.chapter-tile.is-done .chapter-tile__num { color: var(--green-deep); }
.chapter-tile__check { width: 20px; height: 20px; color: var(--green-deep); }
.chapter-tile__title { font-size: 17px; font-weight: 600; line-height: 1.35; }

.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(296px, 1fr)); gap: 14px; }
.guide-tile {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px;
  text-align: left; padding: 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  cursor: pointer; text-decoration: none; color: inherit;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease), transform 150ms var(--ease);
}
.guide-tile:hover { border-color: var(--plum); box-shadow: var(--shadow); transform: translateY(-2px); }
.guide-tile__icon {
  width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--plum-tint); color: var(--plum);
}
.guide-tile__icon svg { width: 21px; height: 21px; }
.guide-tile__title { display: block; font-size: 17px; font-weight: 600; line-height: 1.35; }
.guide-tile__blurb { display: block; margin-top: 6px; font-size: 15px; color: var(--city-grey); }

.practice-card {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 26px 28px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.practice-card__icon {
  width: 52px; height: 52px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--green-tint); color: var(--green-deep); flex: 0 0 auto;
}
.practice-card__icon svg { width: 26px; height: 26px; }
.practice-card__text { flex: 1 1 240px; min-width: 0; }
.practice-card__text strong { display: block; font-size: 19px; font-family: var(--display); font-weight: 600; }
.practice-card__text span { font-size: 15px; color: var(--city-grey); }

/* --------------------------------------------------------------------------
   10. Lesson / guide article
   -------------------------------------------------------------------------- */
.article { max-width: 880px; }

.article__meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.article__meta .progress-track { flex: 1 1 140px; max-width: 220px; }

.transition {
  margin: 0 0 22px; padding-left: 18px; border-left: 2px solid var(--beige-deep);
  font-family: var(--display); font-style: italic; font-size: 19px;
  line-height: 1.5; color: #6B6670; max-width: 60ch;
}

.article h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem); max-width: 30ch; }

.prose { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.prose > p { font-size: 18px; line-height: 1.68; }
.prose b, .prose strong { font-weight: 700; color: var(--ink); }

/* Field lists inside chapter prose. Same scarlet disc as the Good to know
   asides, sized up to sit alongside 18px body copy. */
.prose > ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.prose > ul > li {
  position: relative; padding-left: 22px;
  font-size: 18px; line-height: 1.68; max-width: 66ch;
}
/* Absolutely positioned rather than a grid cell: these items mix <b> with
   running text, and a grid would treat each run as its own item. top is in
   em so the disc stays optically centred on the first line at any size. */
.prose > ul > li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--scarlet);
}

/* Sub-headings that break a long chapter into parts. The gap above is the
   prose gap plus a little, so a heading sits closer to what it introduces. */
.prose > h2 {
  margin-top: 12px; margin-bottom: -6px;
  font-family: var(--display); font-weight: 600; font-size: 25px; line-height: 1.25;
}

/* Numbered procedures inside prose — the same scarlet numerals as the quick
   guide steps, at body size. A nested <ul> takes the small scarlet disc. */
.prose > ol { list-style: none; counter-reset: pstep; display: flex; flex-direction: column; gap: 12px; }
.prose > ol:not(.flow) > li {
  counter-increment: pstep; position: relative; padding-left: 34px;
  font-size: 18px; line-height: 1.68; max-width: 66ch;
}
.prose > ol:not(.flow) > li::before {
  content: counter(pstep); position: absolute; left: 0; top: 0.2em;
  width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  background: var(--scarlet); color: #fff; font-size: 13px; font-weight: 800; line-height: 1;
}
.prose ol ul { list-style: none; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.prose ol ul > li { position: relative; padding-left: 18px; font-size: 16.5px; line-height: 1.55; }
.prose ol ul > li::before {
  content: ''; position: absolute; left: 2px; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--scarlet);
}

/* Callouts — one idea that must not be skimmed past. Tint + left rule, the
   same construction as Try it and What you're doing. */
.callout {
  padding: 16px 20px; border-radius: var(--r-lg); border-left: 4px solid;
  font-size: 17px; line-height: 1.6; max-width: 66ch;
}
.callout--good    { background: var(--green-tint);   border-color: var(--green);   color: #1F4F2D; }
.callout--warn    { background: var(--scarlet-tint); border-color: var(--scarlet); color: var(--scarlet-dark); }
.callout--example { background: var(--plum-tint);    border-color: var(--plum);    color: #4A1C4A; }
.prose .callout b { color: inherit; }

/* Reference tables. The wrapper scrolls sideways on a narrow screen so the
   table never forces the page wider than the viewport. */
.ref-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ref-table table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.ref-table th, .ref-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.ref-table th {
  background: var(--beige); font-size: 11px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--city-grey); white-space: nowrap;
}
.ref-table tr:last-child td { border-bottom: 0; }
.ref-table td:first-child { font-weight: 700; white-space: nowrap; }
.ref-table tr.is-sensitive td { background: var(--orange-tint); }

/* A flow — what happens next, drawn like the portal's Season timeline: a
   marker per stage on a thin grey rail, the stage on one line and an
   optional .flow__desc beneath it. Stages ahead are grey dots; .flow__end,
   where the journey lands, is the green check. */
.flow { list-style: none; display: flex; flex-direction: column; gap: 0; max-width: 62ch; }
.flow > li {
  position: relative; padding: 0 0 22px 42px;
  font-size: 18px; line-height: 1.45; color: var(--ink);
}
.flow > li:last-child { padding-bottom: 0; }
.flow > li::before {
  content: ''; position: absolute; left: 0; top: 0.06em;
  width: 24px; height: 24px; border-radius: 50%; background: var(--concrete);
}
.flow > li:not(:last-child)::after {
  content: ''; position: absolute; left: 11px; top: calc(0.06em + 24px); bottom: 0;
  width: 2px; background: var(--line);
}
.flow > li.flow__end::before {
  background: var(--green-deep) no-repeat center / 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6l4.6 4.6L19.5 6.8'/%3E%3C/svg%3E");
}
.flow__desc { display: block; margin-top: 2px; font-size: 16px; line-height: 1.5; color: var(--city-grey); }

/* A quick guide's reference blocks sit between What to look for and the figures. */
.prose--reference { margin-top: 30px; }

/* Figures ---------------------------------------------------------------- */
.figures { margin-top: 28px; display: flex; flex-direction: column; gap: 26px; }
.figure { margin: 0; }
.figure__frame {
  position: relative; display: block; width: 100%; padding: 0; cursor: zoom-in;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.figure__frame:hover { border-color: var(--beige-deep); box-shadow: var(--shadow); }
.figure__frame img { width: 100%; height: auto; }
.figure__zoom {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px;
  background: rgba(38, 38, 42, 0.72); color: #fff;
  opacity: 0; transition: opacity 150ms var(--ease);
}
.figure__frame:hover .figure__zoom,
.figure__frame:focus-visible .figure__zoom { opacity: 1; }
.figure__zoom svg { width: 17px; height: 17px; }
.figure figcaption {
  margin-top: 11px; display: flex; gap: 10px; align-items: baseline;
  font-size: 14.5px; line-height: 1.5; color: var(--city-grey); max-width: 72ch;
}
.figure__no {
  flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--plum);
}

/* Try it / What to look for ---------------------------------------------
   Both ask the reader to go and look at something in the portal — "Try it" in a
   chapter, "What to look for" in a quick guide — so they share one treatment.
   They never appear on the same screen: tryit is chapters only, lookfor guides only. */
.tryit, .lookfor {
  margin-top: 30px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px;
  padding: 20px 24px; border-radius: var(--r-lg);
  background: var(--orange-tint); border: 1px solid rgba(231, 110, 36, 0.34);
  border-left: 4px solid var(--orange);
}
.tryit__icon, .lookfor__icon {
  width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
  background: var(--orange); color: #fff;
}
.tryit__icon svg, .lookfor__icon svg { width: 20px; height: 20px; }
.tryit__label, .lookfor__label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--orange-deep);
}
.tryit__text, .lookfor__text { margin-top: 5px; font-size: 17px; line-height: 1.55; max-width: 62ch; }

/* Good to know ----------------------------------------------------------- */
.gtk { margin-top: 30px; padding: 22px 26px; border-radius: var(--r-lg); background: var(--beige); }
.gtk__label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--city-grey); margin-bottom: 12px;
}
.gtk ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.gtk li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 12px;
  font-size: 16.5px; line-height: 1.55; max-width: 66ch; }
/* The pseudo-element is the row's first grid cell. margin-top is in em so the
   disc stays optically centred on the first line at any font size. */
.gtk li::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--scarlet); margin-top: 0.42em; justify-self: center;
}

/* Steps (quick guides) --------------------------------------------------- */
.doing {
  margin-top: 22px; padding: 18px 22px; border-radius: var(--r-lg);
  background: var(--plum-tint); border-left: 4px solid var(--plum);
}
.doing__label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--plum-deep);
}
.doing__text { margin-top: 5px; font-size: 17.5px; line-height: 1.5; max-width: 62ch; }

.steps { margin-top: 30px; list-style: none; counter-reset: step; }
.steps li {
  position: relative; counter-increment: step;
  padding: 0 0 22px 52px; font-size: 17px; line-height: 1.6; max-width: 66ch;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -1px;
  width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center;
  background: var(--scarlet); color: #fff;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* The connecting rule between step markers */
/* The steps list ends with 22px of padding, so the shared 30px would be too much. */
.steps + .lookfor { margin-top: 8px; }

.steps li:not(:last-child)::after {
  content: ''; position: absolute; left: 15.5px; top: 36px; bottom: 6px;
  width: 1.5px; background: var(--beige-deep);
}

/* Cross-links between chapters and guides -------------------------------- */
.crosslink {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line);
}
.crosslink__label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.11em;
  text-transform: uppercase; color: #7A7580; margin-bottom: 12px;
}
.crosslink__list { display: flex; gap: 10px; flex-wrap: wrap; }
.crosslink__item {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; text-decoration: none;
  transition: border-color 140ms var(--ease), color 140ms var(--ease);
}
.crosslink__item:hover { border-color: var(--plum); color: var(--plum-deep); }
.crosslink__item svg { width: 16px; height: 16px; color: var(--plum); }

/* Prev / next ------------------------------------------------------------ */
.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line);
}
.pager__step { font-size: 14px; font-weight: 600; color: #7A7580; font-variant-numeric: tabular-nums; }
.pager__btns { display: flex; gap: 10px; margin-left: auto; }

/* --------------------------------------------------------------------------
   11. Practice quiz
   -------------------------------------------------------------------------- */
.quiz { max-width: 800px; display: flex; flex-direction: column; gap: 20px; margin-top: 30px; }
.qcard {
  padding: 26px 28px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.qcard__no {
  font-size: 11px; font-weight: 800; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--plum);
}
.qcard__q { margin-top: 8px; font-family: var(--display); font-size: 21px; font-weight: 600; line-height: 1.3; }
.qopts { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; list-style: none; }
.qopt {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start;
  width: 100%; text-align: left; padding: 14px 18px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r);
  font-size: 16.5px; line-height: 1.5; cursor: pointer;
  transition: border-color 130ms var(--ease), background-color 130ms var(--ease);
}
.qopt:hover:not(:disabled) { border-color: var(--beige-deep); background: var(--beige); }
.qopt__mark {
  width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  border: 1.5px solid var(--beige-deep); background: var(--surface);
  font-size: 12px; font-weight: 700; color: var(--city-grey);
}
.qopt.is-picked { border-color: var(--scarlet); background: var(--scarlet-tint); }
.qopt.is-picked .qopt__mark { border-color: var(--scarlet); background: var(--scarlet); color: #fff; }
.qopt.is-right { border-color: var(--green-deep); background: var(--green-tint); }
.qopt.is-right .qopt__mark { border-color: var(--green-deep); background: var(--green-deep); color: #fff; }
.qopt.is-wrong { border-color: var(--scarlet); background: var(--scarlet-tint); }
.qopt.is-wrong .qopt__mark { border-color: var(--scarlet); background: var(--scarlet); color: #fff; }
.qopt:disabled { cursor: default; }
.qopt__mark svg { width: 13px; height: 13px; }

.qexplain {
  margin-top: 16px; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px;
  font-size: 16px; line-height: 1.55;
}
.qexplain svg { width: 20px; height: 20px; margin-top: 2px; }
.qexplain--good { color: var(--green-deep); }
.qexplain--bad { color: var(--scarlet-dark); }

.quiz-foot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line);
}
.score {
  padding: 24px 28px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface);
}
.score--great { border-color: var(--green-deep); background: var(--green-tint); }
.score__value { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1; }
.score__msg { margin-top: 8px; font-size: 17px; color: var(--city-grey); max-width: 56ch; }

/* --------------------------------------------------------------------------
   12. Completion
   -------------------------------------------------------------------------- */
.done-card {
  max-width: 720px; padding: 44px 40px; border-radius: var(--r-hero);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.done-card__badge {
  width: 66px; height: 66px; border-radius: 999px; display: grid; place-items: center;
  background: var(--green-deep); color: #fff; margin-bottom: 24px;
}
.done-card__badge svg { width: 32px; height: 32px; }
.done-card h1 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem); max-width: 24ch; }
.done-card p { margin-top: 16px; font-size: 18px; line-height: 1.65; color: var(--city-grey); max-width: 62ch; }
.done-card__actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   13. Coming soon
   -------------------------------------------------------------------------- */
.soon-card {
  max-width: 760px; padding: 40px; border-radius: var(--r-hero);
  background: var(--surface); border: 1px solid var(--line);
}
.soon-card__icon {
  width: 58px; height: 58px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--beige); color: #8E8992; margin-bottom: 22px;
}
.soon-card__icon svg { width: 28px; height: 28px; }
.soon-card h1 { margin-top: 14px; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.4rem); }
.soon-card__body { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.soon-card__body p { font-size: 17.5px; line-height: 1.65; color: var(--city-grey); max-width: 66ch; }

/* --------------------------------------------------------------------------
   14. Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  /* Opaque on purpose: at any translucency the topbar's text ghosts through and
     collides with the figure caption sitting in the same strip. */
  background: #1A181B;
}
.lightbox[open], .lightbox.is-open { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox__bar {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  color: rgba(255, 255, 255, 0.86); font-size: 14px;
}
.lightbox__no {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,0.16); padding: 5px 10px; border-radius: 999px;
}
.lightbox__caption { min-width: 0; margin-right: auto; }
.lightbox__stage {
  display: flex; overflow: auto; padding: 0 18px 6px; min-height: 0;
  overscroll-behavior: contain;
}
.lightbox__stage img {
  flex: 0 0 auto; margin: auto;
  max-width: min(100%, 1400px); width: auto; height: auto;
  border-radius: var(--r); background: #fff; box-shadow: var(--shadow-lg);
}
.lightbox__foot {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 18px 22px;
}
.lb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff; font-size: 14px; font-weight: 600;
  transition: background-color 140ms var(--ease);
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.24); }
.lb-btn:disabled { opacity: 0.35; pointer-events: none; }
.lb-btn svg { width: 17px; height: 17px; }
.lb-btn--icon { width: 42px; padding: 0; justify-content: center; }
.lightbox__hint { font-size: 13px; color: rgba(255,255,255,0.55); margin-left: 8px; }

/* --------------------------------------------------------------------------
   15. Search palette
   -------------------------------------------------------------------------- */
.palette {
  position: fixed; inset: 0; z-index: 210; display: none;
  background: rgba(24, 22, 26, 0.42); padding: 12vh 20px 20px;
}
.palette.is-open { display: block; }
.palette__panel {
  max-width: 640px; margin: 0 auto; background: var(--surface);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden;
  display: flex; flex-direction: column; max-height: 66vh;
}
.palette__field { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.palette__field svg { width: 19px; height: 19px; color: #8E8992; flex: 0 0 auto; }
.palette__field input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--sans); font-size: 18px; color: var(--ink);
}
.palette__field input::placeholder { color: #9A959E; }
.palette__results { overflow-y: auto; padding: 8px; list-style: none; }
.palette__empty { padding: 26px 20px; font-size: 16px; color: var(--city-grey); }
.presult {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 13px; align-items: start;
  width: 100%; text-align: left; padding: 11px 13px; border: 0; border-radius: var(--r);
  background: transparent; cursor: pointer;
}
.presult:hover, .presult.is-active { background: var(--beige); }
.presult__kind {
  width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--plum-tint); color: var(--plum); font-size: 11px; font-weight: 800;
}
.presult__kind svg { width: 15px; height: 15px; }
.presult__kind--step { background: var(--scarlet-tint); color: var(--scarlet); }
.presult__title { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; }
.presult__where { display: block; margin-top: 2px; font-size: 13.5px; color: #7A7580; }
.presult mark { background: rgba(244, 208, 67, 0.5); color: inherit; border-radius: 2px; }
.palette__foot {
  border-top: 1px solid var(--line); padding: 10px 20px;
  font-size: 12.5px; color: #8E8992; display: flex; gap: 16px; flex-wrap: wrap;
}
.palette__foot kbd {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  background: var(--beige); border-radius: 4px; padding: 2px 5px;
}

/* --------------------------------------------------------------------------
   16. Responsive
   The theme's breakpoints are unusual (lg is 1200px, md is 588px); these
   follow the same thresholds so behaviour matches the portal.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 20px 70px; }
  .rail { position: static; max-height: none; }
  .rail__toggle {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 14px 20px; background: var(--surface); border: 0;
    border-top: 1px solid var(--line-soft);
    font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer;
  }
  .rail__toggle svg { width: 16px; height: 16px; }
  /* Only the trailing chevron is pushed right; the leading icon stays by the label. */
  .rail__toggle svg:last-child { margin-left: auto; transition: transform 180ms var(--ease); }
  .rail__toggle[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
  .rail__scroll { display: none; }
  .rail.is-open .rail__scroll { display: block; }
  .rail__foot { display: none; }
  .rail.is-open .rail__foot { display: block; }
  .article, .quiz { max-width: none; }
}

@media (max-width: 700px) {
  body { font-size: 17px; }
  .topbar { padding: 0 16px; gap: 10px; }
  .topbar__label { font-size: 16px; }
  .topbar__divider, .icon-btn kbd, .icon-btn span { display: none; }
  .icon-btn { width: 40px; padding: 0; justify-content: center; }
  .layout { padding: 16px 16px 60px; }
  .hero { padding: 30px 24px 28px; border-radius: var(--r-xl); }
  .hero__flakes { height: 170px; opacity: 0.5; }
  .role-card { grid-template-columns: 46px minmax(0, 1fr); gap: 16px; padding: 20px; }
  .role-card__icon { width: 46px; height: 46px; }
  .role-card__actions { grid-column: 1 / -1; min-width: 0; }
  .prose > p, .prose > ul > li, .prose > ol:not(.flow) > li, .steps li, .gtk li { font-size: 17px; }
  .callout { font-size: 16px; }
  .ref-table th, .ref-table td { padding: 10px 12px; }
  .tryit, .lookfor { grid-template-columns: minmax(0, 1fr); }
  .tryit__icon, .lookfor__icon { display: none; }
  .pager { flex-direction: column; align-items: stretch; }
  .pager__btns { display: grid; grid-template-columns: 1fr 1fr; }
  .done-card, .soon-card { padding: 28px 22px; }
  .palette { padding: 6vh 12px 12px; }
}

@media (max-width: 470px) {
  .topbar { gap: 8px; }
  .topbar__label-long { display: none; }
  .topbar__label { font-size: 17px; }
  .topbar__logo { height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   17. Print — the current lesson or guide, on its own
   -------------------------------------------------------------------------- */
@media print {
  :root { --measure: 100%; }
  body { background: #fff; font-size: 11pt; }
  /* Browsers drop CSS backgrounds when printing. Here the fills carry meaning —
     the scarlet step markers, the plum "what you're doing" panel, the status
     pills — so opt back in. Readers can still force greyscale in the dialog. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* A portal capture can be far taller than a page. Scale it to fit one instead
     of letting break-inside push it and then overflow. */
  .figure__frame img { max-height: 8in; width: auto; }
  .topbar, .rail, .pager, .lightbox, .palette, .figure__zoom,
  .crosslink, .resume, .skip-link, .no-print { display: none !important; }
  .layout { display: block; max-width: none; padding: 0; }
  .article, .quiz { max-width: none; }
  .article h1 { font-size: 22pt; }
  .figure { break-inside: avoid; page-break-inside: avoid; }
  .figure__frame { box-shadow: none; border-color: #ccc; }
  .figures { gap: 16pt; }
  .tryit, .gtk, .doing, .lookfor, .qcard, .callout, .ref-table, .flow { break-inside: avoid; page-break-inside: avoid; }
  a[href]::after { content: ''; }
}