/* =============================================================
   source.css — the source surface's component family: the pages that
   publish source trees and the essays beside them. Token-only, like
   every file in this family; the theme it builds on is loaded first.

   Provides:
     .ls-src          an index page on the sheet grid. Each h2 is set in
                      the margin, where the grid places it beside the
                      first thing in its section; everything else runs
                      down the main column.
     .ls-essay        an essay: one reading column at 18px, aligned with
                      the main column of the pages around it
     .ls-essay-byline who wrote it, one quiet line under the title, in the
                      faint mono of a version label
     .ls-essay-code   an essay's code block, and
     .ls-essay-table  an essay's table: each scrolls sideways on its own
                      rather than widening the page, and each is a wrapper
                      so that its measure is taken in the text face and it
                      ends where the paragraphs do — a pre measures `ch`
                      in its own smaller monospace face
     .ls-essay-figure an essay's picture and its caption: the picture
                      takes the column's width and keeps its proportions
     .ls-essay-opening the picture every essay opens with, under the byline
     .ls-essay-book   the free book that closes an essay, a section of its
                      own before any Read on
     .ls-src-notice   a statement every page of a host carries
     .ls-src-support  one quiet closing line, below what a reader came for
     .ls-src-list     projects, hosts and essays: a name and what it is
     .ls-src-meta     an essay entry's reading time, programs and module,
                      in the faint mono of a version label
     .ls-src-contents an index's groups in one wrapping row, each with
                      how many it holds
     .ls-src-files    a release's files, in as many columns as fit
   ============================================================= */

.ls-src,.ls-essay{max-width:1280px;margin:0 auto;padding:clamp(3.5rem,8vw,7rem) 2rem 0;
  display:grid;grid-template-columns:var(--ls-margin) minmax(0,1fr);column-gap:var(--ls-gap);row-gap:1rem;align-items:start}
.ls-src>*,.ls-essay>*{grid-column:2;max-width:66ch;min-width:0}
/* The last block of a page carries the theme's .ls-close, which leaves the
   footer its space. An index that follows an essay on the same page sits
   closer to it than a page's first block sits to the nav. */
.ls-essay+.ls-src{padding-top:clamp(3rem,6vw,5rem)}

/* --- Index pages --------------------------------------------- */
.ls-src>h1{margin-bottom:.5rem}
.ls-src>h2{grid-column:1;font-style:italic;font-weight:400;font-size:1.17rem;line-height:1.3;
  color:var(--ls-text-2);text-wrap:balance;margin-top:3rem;padding-top:.1em}
.ls-src>h2+*{margin-top:3rem}
.ls-src p,.ls-src li{color:var(--ls-text-2);line-height:1.65}
.ls-src strong{color:var(--ls-text);font-weight:600}
.ls-src code,.ls-essay code{font-size:.9em}
.ls-src pre,.ls-essay pre{max-width:100%;background:var(--ls-surface);border-radius:var(--ls-radius-sm);
  padding:1rem 1.2rem;overflow-x:auto;font-size:.88rem;line-height:1.6}
.ls-src pre code,.ls-essay pre code{font-size:inherit}

.ls-src-notice{border-left:2px solid var(--ls-border-strong);padding-left:1rem}
.ls-src .ls-src-notice{color:var(--ls-text)}

.ls-src-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:1.1rem}
.ls-src-list>li>a:first-child{font-weight:600;color:var(--ls-text)}
.ls-src-list .ls-src-version{white-space:nowrap;font-family:var(--ls-font-mono);font-size:.9em;color:var(--ls-text-faint);font-variant-numeric:tabular-nums}
.ls-src-list .ls-src-notice{margin-top:.5rem}
.ls-src-list .ls-src-meta,.ls-src-contents .ls-src-version{font-family:var(--ls-font-mono);font-size:.9em;color:var(--ls-text-faint);font-variant-numeric:tabular-nums}
.ls-src-list .ls-src-meta{margin-top:.35rem}
.ls-src-contents{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.ls-src-projects{margin-top:.4rem}
.ls-src .ls-src-support{margin-top:2rem;font-size:.875rem;color:var(--ls-text-faint)}

.ls-src>.ls-src-files{max-width:none;list-style:none;padding:0;columns:3 16rem;column-gap:var(--ls-gap)}
.ls-src-files li{break-inside:avoid;margin-bottom:.35rem;font-family:var(--ls-font-mono);font-size:.9rem;line-height:1.5}

/* --- Essays -------------------------------------------------- */
.ls-essay>h1{margin-bottom:1rem}
.ls-essay>.ls-essay-byline{margin-top:-.25rem;font-family:var(--ls-font-mono);font-size:.9rem;color:var(--ls-text-faint)}
.ls-essay>h2{font-size:1.5rem;line-height:1.3;margin-top:2rem}
.ls-essay>h3{font-size:1.2rem;margin-top:1.25rem}
.ls-essay p,.ls-essay li{font-size:1.125rem;line-height:1.7;color:var(--ls-text-2)}
.ls-essay strong,.ls-essay em{color:var(--ls-text)}
.ls-essay strong{font-weight:600}
.ls-essay ul,.ls-essay ol{padding-left:1.4rem;display:flex;flex-direction:column;gap:.5rem}
/* A quote is a claim the essay stands on, so it takes the text colour and
   the notice's rule rather than being set back. */
.ls-essay blockquote{border-left:2px solid var(--ls-border-strong);padding-left:1.1rem}
.ls-essay blockquote p{color:var(--ls-text)}
.ls-essay hr{border:0;border-top:1px solid var(--ls-border);margin-block:1.5rem}
.ls-essay-code pre{margin:0}
.ls-essay-table{overflow-x:auto}
.ls-essay table{border-collapse:collapse;width:100%}
.ls-essay th,.ls-essay td{text-align:left;vertical-align:top;padding:.6rem 1.2rem .6rem 0;
  border-bottom:1px solid var(--ls-border);font-size:1.05rem;line-height:1.55}
.ls-essay th{color:var(--ls-text);font-weight:600;border-bottom-color:var(--ls-border-strong)}
.ls-essay td{color:var(--ls-text-2)}
/* A picture is drawn at the column's width and no wider than its own. The page
   states its width and height, so with height:auto its box is held at the
   picture's proportions before it loads, and nothing below it moves. The caption
   is set back, as the text that names the picture rather than the essay's own. */
.ls-essay-figure{margin-block:.5rem}
.ls-essay-figure img{display:block;max-width:100%;height:auto;border-radius:var(--ls-radius-sm)}
.ls-essay-figure figcaption{margin-top:.6rem;font-size:.95rem;font-style:italic;line-height:1.5;color:var(--ls-text-faint)}
.ls-essay>.ls-essay-opening{margin-block:.5rem 1rem}
.ls-essay-book p{font-size:1.05rem;line-height:1.65;color:var(--ls-text-2)}
.ls-essay-book cite{color:var(--ls-text)}

@media(max-width:900px){
  .ls-src,.ls-essay{grid-template-columns:minmax(0,1fr)}
  .ls-src>*,.ls-essay>*,.ls-src>h2{grid-column:1}
  .ls-src>h2{font-size:1rem;margin-top:2.5rem;padding-top:0}
  .ls-src>h2+*{margin-top:0}
}
@media(max-width:640px){
  .ls-src,.ls-essay{padding-inline:1rem}
}