/* nels.city on the Studio design system (/ds/ds.css, copied in from studio/websites/design-system). The system sets
   the page, the type, the header, the menu, the footer, and both themes; this sheet styles what is the site's own,
   from the system's tokens. Its rules: system fonts, square corners, no gray or faded text, nothing under 14px, and
   color only where it means something. */
:root { --ds-font-title: var(--ds-font-serif); }   /* page titles in the system serif */

/* One reading column, the old site's 700px or so, with the header and footer lined up to it. A page with wide: true
   in its front matter (a tool or a gallery) widens all three to the system's full width. */
.ds-container { max-width: calc(42rem + 2 * var(--ds-gutter)); }
.ds-prose { max-width: none; }
.nl-wide-page .ds-container { max-width: calc(var(--ds-max) + 2 * var(--ds-gutter)); }
.nl-wide > :first-child { margin-top: 0; }

/* The home page: the watch, a line about me, then each list's first ten with the rest a click away. */
.nl-watch { display: flex; justify-content: center; margin: 0 0 var(--ds-space-8); }
.nl-watch iframe { display: block; width: 400px; height: 400px; max-width: 100%; aspect-ratio: 1; border: 0; background: transparent; overflow: hidden; }
.nl-section { margin-top: var(--ds-space-12); }
.nl-section > h2 { margin-top: 0; }
.nl-list { margin: var(--ds-space-3) 0 0; padding: 0; list-style: none; }
.nl-list > li { margin: 0; padding: var(--ds-space-3) 0; border-top: 1px solid var(--ds-rule); }
.nl-list > li:last-child { border-bottom: 1px solid var(--ds-rule); }
.nl-list > li[hidden] { display: none; }
/* Each list ends in "See more", an underlined link: a real link to the full microposts page, or a button drawn as one
   that shows the rest of the list in place. */
.nl-more { display: block; margin: var(--ds-space-3) 0 0; font-size: var(--ds-text-ui); }
.nl-more--button { min-height: 0; padding: 0; border: 0; background: none; text-align: left; color: var(--ds-link); font-weight: var(--ds-weight-regular);
  line-height: var(--ds-leading); text-decoration-line: underline; text-decoration-color: var(--ds-link-line);
  text-decoration-thickness: 1px; text-underline-offset: 0.25em; cursor: pointer; }
.nl-more--button:hover { background: none; text-decoration-color: currentColor; }
/* The footer is one line: the mark and name at the left, the profiles and the feed at the right. The icons are drawn at
   16px, which reads as the same size as the 20px mark, an open drawing of thin points. */
.nl-footer { align-items: center; justify-content: space-between; }
.nl-social { display: flex; gap: var(--ds-space-1); margin-right: calc(-1 * var(--ds-space-2)); }
.nl-social .ds-icon-btn svg { width: 16px; height: 16px; }

/* Recent microposts: a square thumbnail, then the text. */
.nl-posts > li { display: flex; gap: var(--ds-space-3); align-items: flex-start; }
.nl-posts .nl-thumb { flex: none; width: 56px; height: 56px; object-fit: cover; background: var(--ds-sunken); }
.nl-posts .nl-logo { object-fit: contain; padding: 6px; }
/* The fallback mark is black, so dark mode inverts it, and the invert takes the tile's gray with it: gray-150 inverts
   to gray-900, the dark theme's sunken gray. */
:root[data-theme="dark"] .nl-posts .nl-logo { filter: invert(1); background: var(--ds-gray-150); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nl-posts .nl-logo { filter: invert(1); background: var(--ds-gray-150); } }
.nl-posts .nl-post { min-width: 0; overflow-wrap: anywhere; }

/* Pieces a few older pages use: the public domain gallery, the link page's thumbnails, and the markdown cleaner. */
.gallery { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.thumbnail { position: relative; width: calc(33.33% - 7px); height: 200px; overflow: hidden; }
.thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.main-content { width: 100%; margin: var(--ds-space-5) 0; }
.controls { margin: var(--ds-space-5) 0; padding: var(--ds-space-5) 0; text-align: center; }
.description { margin-top: var(--ds-space-8); padding: var(--ds-space-5); background: var(--ds-surface); box-shadow: 0 0 0 1px var(--ds-rule); }

/* Plain fields and buttons look like the system's, so pages written before it need no classes. The :where() keeps
   these at element strength, under any class a page sets. */
textarea:where(:not([class*="ds-"])) {
  width: 100%; margin-bottom: var(--ds-space-5); padding: 0.75rem; border: 0; background: var(--ds-surface);
  box-shadow: inset 0 0 0 1px var(--ds-control-line); color: var(--ds-heading); font-family: var(--ds-font-mono);
  font-size: var(--ds-text-ui); line-height: 1.5; resize: vertical;
}
textarea:where(:not([class*="ds-"])):focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -1px; }
button:where(:not([class*="ds-"])) {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.5rem 0.875rem;
  border: 0; background: var(--ds-fill); color: var(--ds-heading); font-size: var(--ds-text-ui); font-weight: var(--ds-weight-strong);
  line-height: var(--ds-leading-ui); cursor: pointer;
}
button:where(:not([class*="ds-"])):hover { background: var(--ds-fill-hover); }
input[type="checkbox"] { margin-right: 0.5rem; vertical-align: middle; cursor: pointer; }
label { vertical-align: middle; cursor: pointer; }

/* Tables in running text (older articles write bare tables) scroll sideways inside themselves on a phone, as the
   system's ds-table-wrap does, instead of widening the page. */
.ds-prose table { display: block; max-width: 100%; overflow-x: auto; font-size: var(--ds-text-ui); line-height: var(--ds-leading-ui); }
.ds-prose th, .ds-prose td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--ds-rule); text-align: left; vertical-align: top; }
.ds-prose th { border-bottom-color: var(--ds-rule-strong); color: var(--ds-heading); font-weight: var(--ds-weight-strong); }

/* An article's opening image, above its title, full column width, with an optional caption. */
.nl-cover { margin: 0 0 var(--ds-space-8); }
.nl-cover img { display: block; width: 100%; height: auto; }
.nl-cover figcaption { margin-top: var(--ds-space-2); color: var(--ds-text); font-size: var(--ds-text-sm); line-height: 1.5; }