/* ============================================================
   Learn library (learn-index.html)
   The front door of the Learn pages: a shelf of six questions,
   a box that finds a page by a word in it, four pages to read
   first, then every page under its question as a row you can
   click anywhere on. Nothing here looks clickable without being
   clickable, and every page is listed with scripts off.
   Fonts come from the site's tokens (Ivy Presto and Geist live).
   ============================================================ */

/* On the root, because scroll-padding-top is read there.
   scripts/learn-index.js sets the real header height. */
html:has(main.lix) {
  --hc-nav-h: 64px;
  --hc-bar-h: 52px;
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 20px);
}

.lix {
  --lix-ease: cubic-bezier(.16, 1, .3, 1);
  --lix-gutter: clamp(20px, 5vw, 56px);
  background: var(--white);
  color: var(--ink);
  font-size: 17px; line-height: 1.6;
  padding: 0;
  overflow-x: clip;
}

/* colors_and_type.css caps every bare <p> at 42rem and underlines every <a>
   with a border. Text here fills its column and links draw their own states. */
.lix p { max-width: none; text-wrap: pretty; }
.lix :where(p) { margin: 0; }
.lix a:not(.btn) { border-bottom: 0; text-decoration: none; }
.lix :where(ol, ul) { list-style: none; margin: 0; padding: 0; }
.lix [hidden] { display: none !important; }
main.lix :where(h1, h2) { margin: 0; }
.lix h1, .lix h2 { font-family: var(--font-display); font-weight: 300; letter-spacing: -.01em; color: var(--ink); }

.lix-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--lix-gutter); }
.lix-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.lix-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lix svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.lix a:focus-visible, .lix button:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }

.lix-arrow, .lix-link span[aria-hidden], .lix .btn span { display: inline-block; transition: transform .35s var(--lix-ease); }

/* ---------- a text link that underlines itself ---------- */
.lix-link {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 16px; font-weight: 500; color: var(--accent-blue);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 3px;
  transition: background-size .45s var(--lix-ease), color .2s;
}
.lix-link:hover { background-size: 100% 1px; color: var(--accent-blue-hover); }
.lix-link:hover span[aria-hidden] { transform: translateX(5px); }
.lix-link--inline { display: inline; font-size: inherit; padding-bottom: 1px; background-size: 100% 1px; }
.lix-link--inline:hover { background-size: 100% 2px; }
.lix-link--on-dark { color: #fff; }
.lix-link--on-dark:hover { color: var(--accent-ice); }

/* ============ HERO: the words, the box, the shelf ============ */
.lix-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 80px); }
.lix-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(40px, 7vw, 112px); align-items: end;
  margin-top: clamp(22px, 2.6vw, 34px);
}
.lix-hero__h1 { font-size: clamp(2.05rem, 4.1vw, 3.3rem); line-height: 1.06; }
.lix-line { display: inline-block; vertical-align: top; overflow: hidden; padding: 0 .08em .14em 0; margin: 0 -.08em -.14em 0; }
.lix-line > span { display: block; }
.lix-line + .lix-line { font-style: italic; color: var(--accent-blue); }
.lix-hero__sub { font-size: clamp(1.08rem, 1.45vw, 1.28rem); line-height: 1.55; color: var(--ink-soft); }
.lix-hero__ask { margin-top: 18px; font-size: 16px; color: var(--ink-soft); }
.lix-hero__seen { margin-top: 10px; font-size: 15px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---------- the box ---------- */
.lix-find { margin-top: clamp(26px, 3vw, 38px); }
.lix-find__label { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.lix-find__box { position: relative; display: flex; align-items: center; }
.lix-find__glass { position: absolute; left: 18px; width: 22px; height: 22px; color: var(--ink-muted); pointer-events: none; transition: color .2s, transform .5s var(--lix-ease); }
.lix-find__q {
  width: 100%; height: 60px; padding: 0 56px 0 52px;
  font: 400 18px/1.2 var(--font-body); color: var(--ink);
  background: var(--white); border: 1.5px solid var(--border-strong); border-radius: 8px;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .3s;
}
.lix-find__q::placeholder { color: var(--ink-muted); opacity: 1; }
.lix-find__q::-webkit-search-cancel-button { -webkit-appearance: none; }
.lix-find__q:hover { border-color: var(--ink-muted); }
.lix-find__q:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 4px rgba(45, 110, 177, .18); }
.lix-find__box:focus-within .lix-find__glass { color: var(--accent-blue); transform: scale(1.08) rotate(-8deg); }
.lix-find__key {
  position: absolute; right: 16px; display: none; min-width: 26px; height: 26px; padding: 0 7px;
  font: 500 14px/24px var(--font-body); text-align: center; color: var(--ink-muted);
  border: 1px solid var(--border-strong); border-radius: 5px; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) { .lix-find__key { display: block; } }
.lix-find__box:focus-within .lix-find__key, .lix-find.has-q .lix-find__key { display: none; }
.lix-find__clear {
  position: absolute; right: 8px; width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 6px; color: var(--ink-muted); cursor: pointer;
  transition: color .2s, transform .35s var(--lix-ease);
}
.lix-find__clear svg { width: 18px; height: 18px; }
.lix-find__clear:hover { color: var(--ink); transform: rotate(90deg); }
.lix-find__count { min-height: 1.6em; margin-top: 10px; font-size: 15px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.lix-find__count.is-new { animation: lix-count .45s var(--lix-ease); }
.lix mark { background: none; color: var(--accent-blue); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent-ice); }
.lix-compare mark { color: #fff; }

/* ---------- the shelf: six books, one per question ---------- */
.lix-shelf ol {
  display: flex; align-items: flex-end; gap: 7px;
  padding: 0 14px; border-bottom: 4px solid var(--ink);
}
.lix-book {
  --h: 250px;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  width: 66px; height: var(--h); padding: 18px 0 12px;
  background: var(--navy-brand); color: #fff;
  border: 1.5px solid var(--navy-brand); border-bottom: 0; border-radius: 4px 4px 0 0;
  transition: transform .45s var(--lix-ease), opacity .3s, box-shadow .45s var(--lix-ease);
}
/* the two bands every spine has */
.lix-book::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 74px; height: 7px;
  border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: .45;
}
.lix-book__t { writing-mode: vertical-rl; font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.lix-book__icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid currentColor; border-radius: 50%; }
.lix-book svg { width: 22px; height: 22px; }
.lix-shelf li:nth-child(1) .lix-book { --h: 244px; }
.lix-shelf li:nth-child(2) .lix-book { --h: 206px; width: 60px; background: var(--white); color: var(--ink); border-color: var(--ink); }
.lix-shelf li:nth-child(3) .lix-book { --h: 262px; background: var(--accent-blue); border-color: var(--accent-blue); }
.lix-shelf li:nth-child(4) .lix-book { --h: 226px; width: 72px; background: var(--ink); border-color: var(--ink); }
.lix-shelf li:nth-child(5) .lix-book { --h: 250px; width: 62px; background: var(--white); color: var(--ink); border-color: var(--ink); }
.lix-shelf li:nth-child(6) .lix-book { --h: 232px; background: var(--navy-mid); border-color: var(--navy-mid); }
/* the last book leans on its neighbour, the way the end of a shelf does */
.lix-shelf li:nth-child(6) { margin-left: 24px; }
.lix-shelf li:nth-child(6) .lix-book { transform: rotate(-6deg); transform-origin: 0 100%; }
.lix .lix-book:hover, .lix .lix-book:focus-visible { color: #fff; transform: translateY(-14px); box-shadow: 0 14px 0 -8px rgba(11, 29, 58, .12); }
.lix .lix-shelf li:nth-child(2) .lix-book:hover, .lix .lix-shelf li:nth-child(5) .lix-book:hover,
.lix .lix-shelf li:nth-child(2) .lix-book:focus-visible, .lix .lix-shelf li:nth-child(5) .lix-book:focus-visible { color: var(--ink); }
.lix .lix-shelf li:nth-child(6) .lix-book:hover, .lix .lix-shelf li:nth-child(6) .lix-book:focus-visible { transform: rotate(0) translateY(-14px); }
.lix .lix-book:active { transition-duration: .12s; transform: translateY(-6px); }
.lix .lix-shelf li:nth-child(6) .lix-book:active { transform: rotate(-2deg) translateY(-6px); }
/* a search that finds nothing in a question pushes its book back */
.lix-book.is-empty { opacity: .26; pointer-events: none; }

/* ============ THE BAR THAT FOLLOWS THE READER ============ */
.hc-bar {
  position: fixed; left: 0; right: 0; top: var(--hc-nav-h); z-index: 49;
  height: var(--hc-bar-h);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 260ms, transform 360ms var(--lix-ease), visibility 0s 360ms;
}
.hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--lix-ease); }
body.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.hc-bar__track {
  max-width: 1240px; margin: 0 auto; padding: 0 var(--lix-gutter);
  height: 100%; display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 32px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px;
}
.hc-bar__track::-webkit-scrollbar { display: none; }
.lix .hc-bar__track a {
  position: relative; flex: none; display: flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  transition: color 200ms;
}
.hc-bar__track a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--lix-ease);
}
.lix .hc-bar__track a:hover, .lix .hc-bar__track a[aria-current] { color: var(--ink); }
.hc-bar__track a:hover::after { transform: scaleX(.3); }
.hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.lix .hc-bar__track a:focus-visible { outline-offset: -4px; }
.hc-bar__progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0));
}

/* ============ WHERE TO START: the one tinted band ============
   Four pages in order, joined by a line. A stop the reader has opened
   this visit is ticked, and the line is filled as far as they have got. */
.lix-start { padding: clamp(44px, 5.5vw, 76px) 0 clamp(48px, 6vw, 84px); background: var(--accent-wash); }
.lix-start h2 { font-size: clamp(1.7rem, 2.7vw, 2.5rem); line-height: 1.12; }
.lix-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 44px); margin-top: clamp(28px, 3.4vw, 44px); }
.lix-path li { position: relative; }
/* the line runs from this stop's node to the next one's, and stops there */
.lix-path li:not(:last-child)::before, .lix-path li:not(:last-child)::after {
  content: ""; position: absolute; top: 23px; left: 48px; height: 2px;
  width: calc(100% - 48px + clamp(20px, 3vw, 44px));
  background: var(--border-strong); transform-origin: left; pointer-events: none;
}
.lix-path li::after { background: var(--accent-blue); transform: scaleX(0); transition: transform .8s var(--lix-ease); }
.lix-path li.is-done::after { transform: scaleX(1); }
.lix-path a { position: relative; display: grid; row-gap: 4px; color: var(--ink); padding-right: 8px; }
.lix-path__node {
  position: relative; z-index: 1; display: block; width: 48px; height: 48px; margin-bottom: 14px; overflow: visible;
  border-radius: 50%; transition: transform .45s var(--lix-ease), box-shadow .3s;
}
.lix-path__node circle { fill: var(--white); stroke: var(--accent-blue); stroke-width: 2; transition: fill .3s; }
.lix-path__node path { stroke: var(--white); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--lix-ease) .15s; }
.lix-path__t { font-family: var(--font-display); font-size: clamp(1.25rem, 1.75vw, 1.6rem); line-height: 1.18; transition: color .2s; }
.lix-path__d { font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
.lix-path a:hover .lix-path__node, .lix-path a:focus-visible .lix-path__node { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(45, 110, 177, .16); }
.lix-path a:hover .lix-path__t { color: var(--accent-blue-hover); }
.lix-path a.is-seen .lix-path__node circle { fill: var(--accent-blue); }
.lix-path a.is-seen .lix-path__node path { stroke-dashoffset: 0; }

/* ============ THE FIVE SECTIONS ============ */
.lix-q { padding: clamp(48px, 6vw, 84px) 0; border-top: 1px solid var(--border); }
.lix-q:first-child { border-top: 0; }
.lix-q__head { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 22px; align-items: start; }
.lix-q__icon, .lix-ref__icon {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px;
  border: 1.5px solid var(--border-strong); border-radius: 50%; color: var(--accent-blue);
  transition: border-color .3s, transform .45s var(--lix-ease);
}
.lix-q__icon { grid-row: 1 / span 2; margin-top: 2px; }
.lix-q__icon svg, .lix-ref__icon svg { width: 26px; height: 26px; }
.lix-q__icon::after { content: ""; position: absolute; inset: -1.5px; border: 1.5px solid var(--accent-blue); border-radius: 50%; opacity: 0; pointer-events: none; }
.lix-q__head h2 { font-size: clamp(1.75rem, 2.9vw, 2.7rem); line-height: 1.12; }
.lix-q__head h2 a { display: inline-block; padding: 7px 0; margin: -7px 0; color: var(--ink); transition: color .2s; }
/* the whole head opens the section page: the drawing and the line under it are part of the link */
.lix-q__head { position: relative; }
.lix-q__head h2 a::after { content: ""; position: absolute; inset: -6px -10px; }
.lix-q__head h2 .lix-arrow { font-family: var(--font-body); font-size: .55em; font-weight: 400; color: var(--accent-blue); vertical-align: .18em; margin-left: .15em; }
.lix-q__head h2 a:hover { color: var(--accent-blue-hover); }
.lix-q__head h2 a:hover .lix-arrow { transform: translateX(6px); }
.lix-q__head:has(h2 a:hover) p { color: var(--ink); }
.lix-q__head:has(h2 a:hover) .lix-q__icon, .lix-q__head:has(h2 a:focus-visible) .lix-q__icon { border-color: var(--accent-blue); transform: scale(1.05); }
.lix-q__head p { margin-top: 8px; font-size: clamp(1rem, 1.25vw, 1.12rem); color: var(--ink-soft); }

.lix-q__list { margin: clamp(26px, 3vw, 40px) 0 0 78px; columns: 2; column-gap: clamp(32px, 5vw, 72px); }
.lix-q__list li { break-inside: avoid; border-top: 1px solid var(--border); }
.lix-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 24px; column-gap: 20px; row-gap: 5px; align-items: start;
  padding: 19px 4px 21px 0; color: var(--ink);
}
.lix-row__t {
  justify-self: start; font-size: 19px; font-weight: 500; line-height: 1.3;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--lix-ease), color .2s;
}
.lix-row__d { grid-column: 1; font-size: 15.5px; line-height: 1.5; color: var(--ink-muted); }
.lix-go { grid-column: 2; grid-row: 1; width: 22px; height: 22px; margin-top: 2px; color: var(--ink-muted); transition: transform .35s var(--lix-ease), color .2s; }
.lix-go__c { stroke-dasharray: 1; stroke-dashoffset: 1; stroke-width: 2; }
.lix-row:hover { color: var(--ink); }
.lix-row:hover .lix-row__t { color: var(--accent-blue-hover); background-size: 100% 1px; }
.lix-row:hover .lix-go { transform: translateX(5px); color: var(--accent-blue); }
/* a press is answered before the next page arrives */
.lix-row:active .lix-row__t { color: var(--accent-blue); }
.lix-row:active .lix-go { transform: translateX(9px); transition-duration: .1s; }
.lix a.lix-ref__card:active { transform: translateY(-1px); transition-duration: .1s; }
/* opened this visit: the arrow becomes a drawn tick */
.is-seen .lix-go { color: var(--accent-blue); }
.is-seen .lix-go__a { opacity: 0; }
.is-seen .lix-go__c { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--lix-ease) .1s; }
.lix-row.is-seen .lix-row__t { color: var(--ink-soft); }
.lix-row.is-seen:hover .lix-go { transform: none; }
/* the page the reader has just come back from */
.lix-row.is-last::before { content: ""; position: absolute; inset: 4px -14px; border: 1.5px solid var(--accent-blue); border-radius: 8px; opacity: 0; pointer-events: none; animation: lix-ring 1.8s ease-out .2s; }

/* ============ COMPARISONS: the navy band ============ */
.lix-compare { padding: clamp(52px, 6.5vw, 92px) 0; background: var(--navy-brand); color: #fff; }
.lix-compare__grid { display: grid; grid-template-columns: clamp(120px, 14vw, 176px) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: center; }
.lix-scale { width: 100%; height: auto; color: var(--accent-ice); stroke-width: 2; overflow: visible; }
.lix-scale__beam, .lix-scale__pan { transform-box: view-box; }
.lix-scale__beam { transform-origin: 80px 28px; }
.lix-scale__pan--l { transform-origin: 24px 40px; }
.lix-scale__pan--r { transform-origin: 136px 40px; }
.lix-compare h2 { font-size: clamp(1.8rem, 3.1vw, 2.9rem); line-height: 1.1; }
.lix-compare h2 a { display: inline-block; padding: 7px 0; margin: -7px 0; color: #fff; transition: color .2s; }
.lix-compare__text > div:first-child { position: relative; }
.lix-compare h2 a::after { content: ""; position: absolute; inset: -6px -10px; }
.lix-compare h2 .lix-arrow { font-family: var(--font-body); font-size: .55em; font-weight: 400; color: var(--accent-ice); vertical-align: .18em; margin-left: .15em; }
.lix-compare h2 a:hover { color: var(--accent-ice); }
.lix-compare h2 a:hover .lix-arrow { transform: translateX(6px); }
.lix-compare p { margin-top: 12px; font-size: clamp(1.02rem, 1.35vw, 1.2rem); color: var(--fg-on-dark-muted); }
.lix-compare__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: clamp(24px, 2.8vw, 34px); }
.lix-compare .btn:hover span { transform: translateX(5px); }
.lix-compare a:focus-visible { outline-color: var(--accent-ice); }
.lix-compare__ctas .lix-link { min-height: 44px; align-items: center; background-position: 0 calc(100% - 9px); }

/* ============ REFERENCE: four cards, parts aligned across the row ============ */
.lix-ref { padding: clamp(52px, 6.5vw, 92px) 0 clamp(36px, 4vw, 56px); }
.lix-ref__h2 { font-size: clamp(1.7rem, 2.7vw, 2.5rem); line-height: 1.12; }
.lix-ref__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 0 clamp(16px, 1.8vw, 24px); margin-top: clamp(26px, 3vw, 40px); }
.lix-ref__card {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  padding: 26px 24px 28px; color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: 10px;
  transition: border-color .25s, transform .45s var(--lix-ease), box-shadow .45s var(--lix-ease);
}
/* the page's own link reset (.lix a:not(.btn)) takes the bottom edge off every link; a card is a box, so put it back */
.lix a.lix-ref__card { border-bottom: 1px solid var(--border-strong); }
@supports not (grid-template-rows: subgrid) { .lix-ref__card { grid-template-rows: auto auto 1fr; } }
.lix-ref__t { margin-top: 20px; font-family: var(--font-display); font-size: clamp(1.3rem, 1.7vw, 1.55rem); line-height: 1.18; transition: color .2s; }
.lix-ref__d { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--ink-muted); }
.lix a.lix-ref__card:hover { color: var(--ink); border-color: var(--accent-blue); transform: translateY(-4px); box-shadow: 0 16px 34px -18px rgba(11, 29, 58, .28); }
.lix-ref__card:hover .lix-ref__icon { border-color: var(--accent-blue); transform: rotate(-6deg) scale(1.05); }
.lix-ref__card:hover .lix-ref__t { color: var(--accent-blue-hover); }
.lix-ref__card.is-seen .lix-ref__icon { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }

/* ============ NOTHING FOUND ============ */
.lix-none { padding: clamp(40px, 6vw, 80px) 0; }
.lix-none__t { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15; color: var(--ink); }
.lix-none p + p { margin-top: 10px; color: var(--ink-soft); }
.lix-none .btn { margin-top: 24px; min-height: 44px; }

/* ============ CLOSE ============ */
.lix-close { padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 8vw, 120px); }
.lix-close .lix-wrap { border-top: 1px solid var(--border); padding-top: clamp(44px, 5vw, 72px); }
.lix-close h2 { font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: 1.08; }
.lix-close p { margin-top: 16px; font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: var(--ink-soft); }
.lix-close div { margin-top: clamp(24px, 2.8vw, 34px); }

/* while a search is on, the four-to-read-first step aside: they are not results */
.lix.is-finding .lix-start { display: none; }
.lix.is-finding .lix-q { padding: clamp(32px, 4vw, 52px) 0; }

/* ============ MOTION ============
   Hidden only once scripts/learn-index.js has put .js on main, so no script
   means no hidden text. Each part arrives its own way: the heading rises out
   of its line, books are set on the shelf, the path draws stop to stop, each
   section's drawing is inked and its rows file in, the scale tips and
   settles, the cards are dealt. */
@keyframes lix-rise   { from { transform: translateY(105%); } to { transform: none; } }
@keyframes lix-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes lix-up     { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lix-book   { from { opacity: 0; translate: 0 -46px; } 70% { opacity: 1; translate: 0 3px; } to { opacity: 1; translate: 0 0; } }
@keyframes lix-board  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lix-line   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lix-line-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lix-pop    { from { opacity: 0; transform: scale(.5); } 70% { transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes lix-draw   { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lix-row    { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes lix-tip    { 0% { transform: rotate(-9deg); } 38% { transform: rotate(6deg); } 66% { transform: rotate(-3deg); } 86% { transform: rotate(1deg); } 100% { transform: rotate(0); } }
@keyframes lix-hang   { 0% { transform: rotate(9deg); } 38% { transform: rotate(-6deg); } 66% { transform: rotate(3deg); } 86% { transform: rotate(-1deg); } 100% { transform: rotate(0); } }
@keyframes lix-deal   { from { opacity: 0; transform: translateY(26px) rotate(-2.5deg); } to { opacity: 1; transform: none; } }
@keyframes lix-ring   { 0% { opacity: 0; transform: scale(.98); } 20% { opacity: .9; } 100% { opacity: 0; transform: scale(1.02); } }
@keyframes lix-halo   { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.45); } }
@keyframes lix-count  { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* hero: hidden only until the entrance starts, so nothing here outlives it */
.lix.js:not(.is-ready) .lix-line > span { transform: translateY(105%); }
.lix.js:not(.is-ready) :is(.lix-hero__sub, .lix-find, .lix-hero__ask, .lix-hero__seen, .lix-book) { opacity: 0; }
.lix.js:not(.is-ready) .lix-shelf ol { clip-path: inset(0 100% 0 0); }
.lix.js.is-ready .lix-line > span { animation: lix-rise 1s var(--lix-ease) backwards; }
.lix.js.is-ready .lix-line + .lix-line > span { animation-delay: .12s; }
.lix.js.is-ready .lix-hero__sub { animation: lix-up .8s var(--lix-ease) .35s backwards; }
.lix.js.is-ready .lix-find { animation: lix-up .8s var(--lix-ease) .5s backwards; }
.lix.js.is-ready .lix-hero__ask, .lix.js.is-ready .lix-hero__seen { animation: lix-fade .8s ease .75s backwards; }
.lix.js.is-ready .lix-shelf ol { animation: lix-board .7s var(--lix-ease) .25s backwards; }
.lix.js.is-ready .lix-book { animation: lix-book .7s cubic-bezier(.3, 1.2, .5, 1) backwards; animation-delay: calc(.5s + var(--n, 0) * 90ms); }

/* everything below the hero */
.lix.js [data-rv] { opacity: 0; }
.lix.js [data-rv].is-in { opacity: 1; animation: lix-up .8s var(--lix-ease) backwards; animation-delay: calc(var(--rv-i, 0) * 90ms); }

/* the path: the line draws, then each stop lands in turn */
.lix.js .lix-path.is-in { animation: none; }
.lix.js .lix-path:not(.is-in) li { opacity: 0; }
.lix.js .lix-path.is-in li { animation: lix-fade .5s ease backwards; animation-delay: calc(var(--n, 0) * 180ms); }
.lix.js .lix-path.is-in li::before { animation: lix-line .7s var(--lix-ease) backwards; animation-delay: calc(.15s + var(--n, 0) * 180ms); }
.lix.js .lix-path.is-in .lix-path__node { animation: lix-pop .55s var(--lix-ease) backwards; animation-delay: calc(var(--n, 0) * 180ms); }

/* a section: its drawing is inked, its rows file in from the margin */
.lix.js .lix-q__head.is-in .lix-q__icon svg { stroke-dasharray: 1; animation: lix-draw 1.3s ease-out .15s backwards; }
.lix.js .lix-q__list.is-in { animation: none; }
.lix.js .lix-q__list:not(.is-in) li { opacity: 0; }
.lix.js .lix-q__list.is-in li { animation: lix-row .6s var(--lix-ease) backwards; animation-delay: calc(var(--n, 0) * 55ms); }
/* a jump lands: the drawing is inked again and its ring goes out once */
.lix-q.is-landed .lix-q__icon svg { stroke-dasharray: 1; animation: lix-draw 1.1s ease-out both; }
.lix-q.is-landed .lix-q__icon::after { animation: lix-halo 1.3s ease-out; }

/* the scale tips one way, then the other, and comes level */
.lix.js .lix-scale.is-in { stroke-dasharray: none; animation: lix-fade .5s ease backwards; }
.lix.js .lix-scale.is-in .lix-scale__beam { animation: lix-tip 2.6s cubic-bezier(.4, 0, .2, 1) .2s backwards; }
.lix.js .lix-scale.is-in .lix-scale__pan { animation: lix-hang 2.6s cubic-bezier(.4, 0, .2, 1) .2s backwards; }

/* the cards are dealt */
.lix.js .lix-ref__card.is-in { animation: lix-deal .75s var(--lix-ease) backwards; animation-delay: calc(var(--rv-i, 0) * 110ms); }

/* back from a page: the library as it was left, no entrance again */
.lix.is-settled *, .lix.is-settled *::before, .lix.is-settled *::after { animation-duration: 1ms !important; animation-delay: 0s !important; }
.lix.is-settled .lix-row.is-last::before { animation-duration: 1.8s !important; animation-delay: .3s !important; }
/* a search is not an entrance either */
.lix.is-finding [data-rv], .lix.is-finding .lix-q__list li { animation: none !important; opacity: 1; }

/* ============ SMALLER SCREENS ============ */
@media (max-width: 1180px) {
  .lix-ref__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: clamp(16px, 1.8vw, 24px); }
  .lix-ref__card { grid-row: auto; grid-template-rows: auto auto 1fr; }
}
@media (max-width: 1020px) {
  .lix-hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .lix-shelf ol { justify-content: flex-start; }
  .lix-q__list { columns: 1; }
}
@media (max-width: 860px) {
  .hc-bar__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
  .lix-path { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .lix-path li { padding-bottom: 26px; }
  .lix-path li:last-child { padding-bottom: 0; }
  .lix-path li:not(:last-child)::before, .lix-path li:not(:last-child)::after { top: 48px; left: 23px; width: 2px; height: calc(100% - 48px); transform-origin: top; }
  .lix-path li::after { transform: scaleY(0); }
  .lix-path li.is-done::after { transform: scaleY(1); }
  .lix.js .lix-path.is-in li::before { animation-name: lix-line-y; }
  .lix-path a { grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; min-height: 44px; }
  .lix-path__node { grid-row: 1 / span 2; margin-bottom: 0; }
  .lix-path__t { align-self: end; padding-top: 4px; }
  .lix-path__d { grid-column: 2; }
}
@media (max-width: 640px) {
  html:has(main.lix) { --hc-bar-h: 48px; }
  .hc-bar__track { gap: 22px; }
  .lix-hero { padding-top: 28px; }
  .lix-find__q { height: 56px; font-size: 17px; }
  .lix-shelf ol { gap: 4px; padding: 0 2px; }
  .lix-shelf li { flex: 1 1 0; min-width: 0; }
  .lix-shelf li:nth-child(n) .lix-book { width: 100%; height: calc(var(--h) * .86); padding: 14px 0 9px; }
  .lix-shelf li:nth-child(6) { margin-left: 16px; }
  .lix-shelf li:nth-child(6) .lix-book { transform: rotate(-4deg); }
  .lix-book__t { font-size: 14px; }
  .lix-book::before { bottom: 66px; }
  .lix-book svg { width: 20px; height: 20px; }
  .lix-q__head { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .lix-q__icon { grid-row: auto; margin: 0 0 16px; }
  .lix-q__list { margin-left: 0; }
  .lix-row__t { font-size: 18px; }
  .lix-row { padding: 15px 2px 16px 0; row-gap: 3px; }
  .lix-row__d, .lix-ref__d { font-size: 15px; }
  .lix-q { padding: 40px 0 28px; }
  .lix-ref__card { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; padding: 18px 18px 20px; }
  .lix-ref__icon { grid-row: 1 / span 2; width: 48px; height: 48px; }
  .lix-ref__t { margin-top: 0; }
  .lix-ref__d { grid-column: 2; margin-top: 4px; }
  .lix-compare__grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .lix-scale { width: 104px; }
  .lix-compare .btn { width: 100%; justify-content: center; }
  .lix-compare__ctas .lix-link { display: block; padding: 10px 0; background: none; }
  .lix-ref__grid { grid-template-columns: minmax(0, 1fr); }
  .lix-close .btn { width: 100%; justify-content: center; }
}

/* ============ REDUCED MOTION: every end state, nothing moving ============ */
@media (prefers-reduced-motion: reduce) {
  .lix *, .lix *::before, .lix *::after { animation: none !important; transition: none !important; }
  .lix.js .lix-line > span { transform: none !important; }
  .lix.js :is(.lix-hero__sub, .lix-find, .lix-hero__ask, .lix-hero__seen, [data-rv], .lix-path li, .lix-q__list li) { opacity: 1 !important; }
  .lix.js .lix-book:not(.is-empty) { opacity: 1 !important; }
  .lix.js .lix-shelf ol { clip-path: none !important; }
  .hc-bar { transition: none; }
}

/* ============ PRINT: the list, and where each page lives ============ */
@media print {
  .hc-bar, .lix-find, .lix-shelf, .lix-none, .lix-scale, .lix-go, .lix-arrow, .lix-q__icon, .lix-ref__icon, .lix-path__node, .lix-path li::before, .lix-path li::after { display: none !important; }
  .lix *, .lix *::before, .lix *::after { animation: none !important; transition: none !important; }
  .lix.js .lix-line > span { transform: none !important; }
  .lix.js [data-rv], .lix.js .lix-path li, .lix.js .lix-q__list li, .lix.js .lix-hero__sub, .lix.js .lix-hero__ask { opacity: 1 !important; }
  .lix-start, .lix-compare { background: none; color: var(--ink); }
  .lix-compare h2 a, .lix-compare p, .lix-link--on-dark { color: var(--ink); }
  .lix-q__list { columns: 1; margin-left: 0; }
  .lix-row::after, .lix-ref__card::after, .lix-path a::after { content: "celva.com" attr(href); font-size: 9pt; color: #4A6480; }
  .lix-q, .lix-start, .lix-compare, .lix-ref, .lix-close { padding: 14pt 0; }
}