/* Layout, rhythm, and theme — visual primitives come from vendored modest-ui;
   everything site-specific lives here and nowhere else.

   Foundation rules:
   1. The text face flows from modest-ui's container rule via the
      --mdst-font-text token — prose, tables, and lists inherit it;
      components keep --mdst-font-ui (sans) and code keeps --mdst-font-mono.
   2. Vertical spacing comes ONLY from the flow rules below. Elements never
      carry their own margins — add a block to any page and it spaces itself.

   Theme: warm paper and ink, Charter/Georgia text face, two accents —
   burgundy works (--accent: links, hover, focus), royal green highlights
   (--highlight: selection, series pill). All colour flows through
   light-dark() tokens; the scheme follows the system or the toggle. */

:root {
  color-scheme: light dark;

  /* Reading face: transitional serif stack — ships with every OS, zero
     bytes. One token; buttons and inputs stay sans via --mdst-font-ui. */
  --mdst-font-text: Charter, "Bitstream Charter", "Sitka Text", Cambria,
    Georgia, serif;

  /* Each colour carries both schemes via light-dark(); the active one
     follows color-scheme — the system preference by default, or the
     data-theme override set by the <theme-toggle> component.

     Two accents: burgundy works (links, hover, focus), royal green
     highlights (selection, series pill). All pairs clear WCAG AA on
     their paper. */
  --accent: light-dark(#6e2435, #d495a3);
  --highlight: light-dark(#134e36, #8cc7a4);
  --mdst-color-fg: light-dark(#211f1c, #e9e4da);
  --mdst-color-bg: light-dark(#faf8f4, #1a1814);
  --mdst-color-muted: light-dark(#6f6a60, #a39c8e);
  --mdst-color-subtle: light-dark(#ece7de, #2a261f);
  --mdst-color-surface: light-dark(#f2eee6, #242019);
  --mdst-color-border: light-dark(#b9b1a3, #57503f);
  --mdst-color-focus: light-dark(#6e2435, #d495a3);
  --mdst-line-height: 1.6;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

body {
  background: var(--mdst-color-bg);
  color: var(--mdst-color-fg);
  max-inline-size: 42rem;
  margin-inline: auto;
  padding: var(--mdst-space-xl) var(--mdst-space-md);
}

body > * + * {
  margin-block-start: var(--mdst-space-xl);
}

:where(main, article, section) > * + * {
  margin-block-start: var(--mdst-space-md);
}

:where(main, article, section) > :where(h2, h3) {
  margin-block-start: var(--mdst-space-xl);
}

/* modest-ui's classless pre and blockquote declare their own margins at
   (0,0,1), beating the zero-specificity flow rules above. Re-assert at
   equal specificity — this sheet loads later, so it wins on order. */
:where(main, article, section) > * + pre,
:where(main, article, section) > * + blockquote {
  margin-block-start: var(--mdst-space-md);
}

/* Title furniture hugs the title; site furniture after an article gets
   extra air. */
.kicker + h1 {
  margin-block-start: var(--mdst-space-xs);
}

h1 + .dateline {
  margin-block-start: var(--mdst-space-xs);
}

main > article + * {
  margin-block-start: var(--mdst-space-xl);
}

/* Chrome — site furniture, styled once here */

:where(h1, h2, h3) {
  letter-spacing: -0.015em;
}

/* The masthead is an h1 on the homepage, a linked p everywhere else;
   one class styles both identically. */
.masthead {
  font-size: var(--mdst-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mdst-color-muted);
}

.masthead a {
  color: inherit;
}

thead th {
  font-size: var(--mdst-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  color: var(--mdst-color-muted);
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent);
}

::selection {
  background: var(--highlight);
  color: var(--mdst-color-bg);
}

footer {
  border-block-start: var(--mdst-border-width) solid var(--mdst-color-border);
  padding-block-start: var(--mdst-space-md);
  color: var(--mdst-color-muted);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

:where(h2, h3) {
  scroll-margin-block-start: var(--mdst-space-md);
}

header a {
  text-decoration: none;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

theme-toggle button {
  border: none;
  background: none;
  padding: var(--mdst-space-xs);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--mdst-color-muted);
}

theme-toggle button:hover {
  background: none;
  color: var(--accent);
}

small {
  color: var(--mdst-color-muted);
}

.note-list {
  list-style: none;
  padding: 0;
}

.note-list > li + li {
  margin-block-start: var(--mdst-space-lg);
}

.note-title a {
  font-size: var(--mdst-text-xl);
  font-weight: 600;
}

/* The series pill: modest-ui's subtle tag shrunk to a badge, riding the
   title's top-right like a notification dot. */
.series-pill {
  margin-inline-start: var(--mdst-space-xs);
  vertical-align: super;
  border-radius: 999px;
  padding: 0.3em 0.65em;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--highlight);
  background: color-mix(in srgb, var(--highlight) 12%, transparent);
}

.note-tags {
  display: flex;
  gap: var(--mdst-space-xs);
  /* tucked under the title to read as its annotation */
  margin-block: 0.125rem var(--mdst-space-xs);
  /* below --mdst-text-xs; no smaller token exists */
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.note-tags span + span::before {
  /* the empty alt text keeps screen readers from announcing "middle dot"
     between every tag */
  content: "·" / "";
  margin-inline-end: var(--mdst-space-xs);
}

.note-list .series-parts {
  margin-block-start: var(--mdst-space-sm);
}

.dateline {
  font-size: var(--mdst-text-sm);
  color: var(--mdst-color-muted);
}

.kicker {
  font-size: var(--mdst-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mdst-color-muted);
}

.series-overview {
  background: var(--mdst-color-surface);
  padding: var(--mdst-space-md);
  /* the list's last line is small text, which reads tighter than the top
     edge; a little extra below balances the box */
  padding-block-end: var(--mdst-space-lg);
}

.series-overview > * + * {
  margin-block-start: var(--mdst-space-sm);
}

.series-overview [aria-current] {
  font-weight: 600;
}

.series-overview ol {
  padding-inline-start: 1.25em;
}

/* On the landing, each part's description sits on its own line under the
   link, so long descriptions never share a line with the title. */
.series-overview li small {
  display: block;
}

.post-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--mdst-space-md);
  font-size: var(--mdst-text-sm);
}

/* Components — custom elements authored in markdown, enriched by the
   build (lib/components.js). CSS-only until one needs real behaviour. */

/* <terminal-window title="...">literal command text</terminal-window>
   Deliberately dark in both colour schemes; the traffic lights match the
   terminal on marcusmichaels.com. */
terminal-window {
  position: relative;
  display: block;
  background: #1a1a1a;
  border-radius: 0.5rem;
  padding-block-start: 2.5rem;
}

/* The inner pre (added by the build) scrolls; the header chrome above
   stays put. Neutralises modest-ui's classless pre styling. */
terminal-window pre {
  margin: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: #e6e2da;
  font-family: var(--mdst-font-mono);
  font-size: var(--mdst-text-sm);
  white-space: pre;
  overflow-x: auto;
  padding: var(--mdst-space-md);
  padding-block-start: 0;
}

terminal-window::before {
  content: "";
  position: absolute;
  inset-block-start: 0.9rem;
  inset-inline-start: var(--mdst-space-md);
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #ff5f56;
  box-shadow: 1.2rem 0 0 #ffbd2e, 2.4rem 0 0 #27ca40;
}

terminal-window::after {
  content: attr(title);
  position: absolute;
  inset-block-start: 0.7rem;
  inset-inline-end: var(--mdst-space-md);
  font-family: var(--mdst-font-mono);
  font-size: var(--mdst-text-xs);
  color: #8d877b;
}