@charset "UTF-8";

/* ─────────────────────────────────────────────────────────────────────────
   Home (umbrella landing page) component sheet — layered over the shared
   Tufte core (assets/wax-tufte.css; home is the only site-root page, so the
   core link has no ../). Home uses its own token vocabulary (--ink-soft/
   --ink-faint/--chip-bg) for the exploration-list components; the core's
   tokens (--muted/--faint/--chip) coexist unused. Loaded AFTER the core.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --paper:#ffffff; --ink:#111111; --ink-soft:#333333; --ink-faint:#565656;
  --rule:#e3e3e3; --accent:#3a5e8c;
  --chip-bg:#f4f4f2;
  --serif:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}

html{ background:var(--paper); }
body{ background:var(--paper); color:var(--ink); font-family:var(--serif); }
h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); }
p,li{ color:var(--ink); }
.numeral{ font-family:var(--serif); }
.sidenote-number:after,.sidenote:before{ font-family:var(--serif); }
a:link,a:visited{ color:var(--accent); }
hr{ border-color:var(--rule); }
code{ font-family:var(--mono); font-size:.86em; background:var(--chip-bg);
      padding:.05rem .3rem; border-radius:3px; }

/* home has no margin notes or wide tables, so it keeps Tufte's full measure —
   neutralise the core's article right-gutter (added there for pages that do). */
article{ padding-right:0; }
/* masthead */
h1{ margin-bottom:.2rem; }
p.subtitle{ color:var(--ink-soft); font-style:italic; max-width:40rem; }

/* the explorations list — Tufte prose entries, NOT wrapping-anchor cards
   (the old dark theme nested <a> inside the card <a>, which is invalid HTML:
   the browser auto-closed the outer anchor before the title, dropping the
   title/desc below the box). Here the title IS the only link. */
/* one readable measure for the whole list, so the subtitle, the .xpl
   separator rules, and the footer don't run the full (very wide) article
   width on a big screen. max-width is responsive-safe — no mobile reset. */
.explorations{ margin-top:2.5rem; max-width:40rem; }
.xpl{ padding:1.4rem 0; border-top:1px solid var(--rule); }
/* no border-bottom on the last entry — the footer's own border-top is the
   single closing rule (two adjacent rules read as a doubled separator). */
.xpl__slug{ font-family:var(--mono); font-size:.74rem; color:var(--ink-faint);
            letter-spacing:.04em; }
.xpl__title{ font-size:1.45rem; font-weight:400; line-height:1.2;
             margin:.15rem 0 .5rem; }
.xpl__title a:link,.xpl__title a:visited{ color:var(--ink); text-decoration:none; }
.xpl__title a:hover{ color:var(--accent); text-decoration:underline; }
.xpl__desc{ width:100%; max-width:38rem; margin:0 0 .6rem; color:var(--ink-soft); }
.xpl__parts{ width:100%; margin:0; font-family:var(--mono); font-size:.8rem; }
.xpl__parts a{ white-space:nowrap; }
.xpl__parts .sep{ color:var(--ink-faint); margin:0 .5rem; }
/* On a narrow screen the inline parts line can't fit on one row and, with no
   whitespace between the anchors and · separators, has nowhere to break — so it
   overflows. Stack the links and drop the · separators (the row gap and each
   link's own underline keep them distinct). */
@media (max-width: 760px){
  .xpl__parts{ display:flex; flex-wrap:wrap; column-gap:1.1rem; row-gap:.15rem; }
  .xpl__parts .sep{ display:none; }
}

footer.site{ margin-top:3rem; padding-top:1rem; border-top:1px solid var(--rule);
             color:var(--ink-faint); font-size:.85rem; max-width:40rem; }
footer.site code{ background:none; padding:0; color:var(--ink-faint); }