/* EXPLORE (#708, docs/design/explore.md): every series and listed lesson, by topic, on the paper itself. Rides on the
   book kit (book.css: the shelf, the head, the tokens). Drawings sit flush on the paper: no plates, frames or mats.
   Dark is the site's ONE root transform (nothing here is redefined for it). */

.xshelf { width: min(1180px, 100% - 40px); gap: 34px; padding-top: 40px; }
.xhead h1 { margin-bottom: .45rem; }
.xhead .dek { max-width: 37rem; font-size: 1.14rem; line-height: 1.5; text-wrap: pretty; }

/* the search (the same look the index's box had, now left in the column under the intro) */
.sfind { display: flex; align-items: center; gap: 8px; width: min(440px, 100%); box-sizing: border-box; margin: -12px 0 0; min-height: var(--hit, 44px); padding: 0 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--e1); color: var(--ink-2); }
.sfind svg { width: 18px; height: 18px; flex: none; }
.sfind input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-family: var(--read-face); font-size: 1rem; color: var(--ink); }
.sfind input::placeholder { color: var(--ink-3); }
.sfind:focus-within { outline: 2.5px solid var(--blueberry); outline-offset: 2px; }
.sstatus { margin: -8px 0 0; font-size: 1rem; color: var(--ink-2); }
.sstatus a { color: var(--ink); font-weight: 700; }

.xrows { display: grid; gap: 52px; min-width: 0; }
.xshelf > *, .xrows > *, .xrow { min-width: 0; }
.xrow[hidden], .xc[hidden] { display: none !important; }

/* a row's head: the topic, its one line, and what's in it */
.xrh { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 22px; border-bottom: 1px solid var(--hair); }
.xrh h2 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.6rem); line-height: 1.15; }
.xrh .xb { margin: .3rem 0 0; font-size: .98rem; line-height: 1.4; color: var(--ink-2); max-width: 40rem; }
.xn { margin: 0; display: flex; align-items: center; gap: 14px; font-size: .9rem; color: var(--ink-3); white-space: nowrap; }
.xall { font: inherit; font-weight: 700; color: var(--ink); background: none; border: 0; cursor: pointer; min-height: var(--hit, 44px); padding: 0 2px; text-decoration: underline; text-decoration-color: var(--hair2); text-underline-offset: 4px; }
.xall:hover { text-decoration-color: var(--accent); }

/* the cards: the drawing, then what it is, its title and its two ways in */
.xlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 28px; align-items: start; }
.xc { display: grid; align-content: start; gap: 10px; min-width: 0; position: relative; } /* the containing block of its hidden labels (.vh), so none leaks past a scroller */
.xart { display: block; border-radius: 6px; }
.xth { display: block; width: 100%; aspect-ratio: 400 / 250; }
.xth svg { display: block; width: 100%; height: 100%; }
svg.xth.thumb { height: auto; }
.xth.board { opacity: 0; transition: opacity .6s ease; }
.xth.board.on { opacity: 1; }
.xw { display: grid; gap: 3px; min-width: 0; }
.xk { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.xs .xk { color: var(--ink-2); }
.xt { margin: 0; font-family: var(--read-face); font-weight: 700; font-size: 1.05rem; line-height: 1.3; letter-spacing: 0; text-wrap: balance; }
.xt a { text-decoration: none; color: var(--ink); }
.xc:hover .xt a, .xt a:hover { color: var(--accent); }
.xd { margin: 2px 0 0; font-size: .93rem; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.xm { margin: 0; font-size: .86rem; color: var(--ink-3); }
.xa { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.xa a { display: inline-flex; align-items: center; min-height: var(--hit, 44px); font-size: .95rem; text-decoration: none; }
.xgo { font-weight: 700; color: var(--ink); }
.xrd { color: var(--ink-2); text-decoration: underline !important; text-decoration-color: var(--hair2) !important; text-underline-offset: 4px; }
.xgo:hover { color: var(--accent); }
.xrd:hover { color: var(--ink); text-decoration-color: var(--accent) !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* a series: two cells, its drawing beside its words (more to say: its parts and its answer) */
.xs { grid-column: span 2; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.xs .xt { font-size: 1.18rem; }
/* a hand-written page's small figure is drawn on a 400 x 250 stage: it sits in the same frame */
.xtop .xlist .xs { grid-column: auto; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.xtop .xs .xt { font-size: 1.05rem; }
.xtop .xd { display: none; }

/* past the row's first cells, the rest wait behind "See all" (only with script: without it every card is shown) */
.x-js .xrow:not(.open) .xlist > .later { display: none; }
.x-js .xrows.searching .xrow .xlist > .later { display: grid; }
.x-js .searching .xall, .searching .xcount { display: none; }
/* without script the drawings never come: the cards are their words */
html:not(.x-js) .xart { display: none; }

@media (max-width: 1000px) {
  .xlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xtop .xlist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* a phone: a row is a sideways card scroller inside its own band (the page itself never scrolls sideways); "See all"
   lays the whole row out as a grid instead */
@media (max-width: 700px) {
  .xshelf { gap: 28px; padding-top: 28px; }
  .xrows { gap: 40px; }
  .xrh { margin-bottom: 14px; align-items: flex-start; flex-direction: column; }
  .xn { justify-content: space-between; width: 100%; }
  .xlist, .xtop .xlist { display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 6px; scroll-padding-inline: 20px; scrollbar-width: none; }
  .xlist::-webkit-scrollbar { display: none; }
  .xlist > .xc { flex: 0 0 64%; scroll-snap-align: start; }
  .xlist > .xs { flex-basis: 82%; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .xrow.open .xlist, .searching .xlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 22px 16px; }
  .xrow.open .xlist > .xs, .searching .xlist > .xs { grid-column: span 2; }
  .xt { font-size: 1rem; }
  .xs .xt { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .xth.board, svg.xth.thumb { transition: none; }
  .xlist { scroll-behavior: auto; }
}