/* site.css — innie's design, settled (I46). Classless, phone first, written for innie (I22, I28); no motion. Every page
   is one column: the search bar, then the page's own content, at one width. The type pairing's faces and sizes come
   from type.css (--face-text, --face-label, --size-text, --size-label, --leading, --weight-strong).

   Citrinitas (I46, I48): a near-black ink and a near-white ground, a quiet ink between them, a hairline, and citrine.
   Colours are named by role, and the same roles set an eidographic plate's pens (I37). Citrine is the reader's colour:
   what they select, the words their search found, the links they can follow and the dot on a note kept in view, and
   never a field behind the interface. It takes three measured lightnesses, chosen per theme on the same idea (the
   colour study allows tints and shades): citrine itself, as a field under text; a faint citrine, a band barely apart
   from the ground that text stays legible on; and a strong citrine that stands at 3:1 or more on the ground, for the
   dot. Both themes do the same things; only the values change. Values are OKLCH written as sRGB hex; ratios are WCAG
   2.2 against the ground. */

:root {
  color-scheme: light dark;
  --ground: #fafafa;       /* oklch(0.985 0 0) */
  --ink: #171614;          /* oklch(0.200 0.004 60): 17.3:1 */
  --quiet: #5d5a59;        /* oklch(0.470 0.004 60), dates, counts, labels and the search line: 6.5:1 */
  --rule: #d9d7d5;         /* oklch(0.880 0.004 60), hairlines and an author's highlight, under ink: 12.6:1 */
  --citrine: #f6ee91;      /* oklch(0.935 0.115 104), a field under ink: 15.1:1 */
  --on-citrine: var(--ink);
  --citrine-faint: var(--citrine);   /* the link band, 1.15:1 on the ground; ink on it 15.1:1 */
  --citrine-strong: #9f8d0e;         /* oklch(0.640 0.130 100), the dot: 3.2:1 */
  --measure: 36rem;
  --gutter: 1rem;
  --tab: 4.5rem;           /* the one narrow column every list turns on: a date, a label, a letter */
  --turn: .75rem;
  --search-size: clamp(1.25rem, .3rem + 4.4vw, 2.25rem);
  --pen-sil: 1.6; --pen-sec: 1; --pen-fine: .6; --pen-hatch: .7; --pen-env: .8; --pen-axis: .6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #141211;     /* oklch(0.185 0.004 60) */
    --ink: #eae9e7;        /* oklch(0.935 0.003 90): 15.4:1 */
    --quiet: #a5a4a2;      /* oklch(0.720 0.004 90): 7.5:1 */
    --rule: #2f2d2c;       /* oklch(0.300 0.004 60), under ink: 11.6:1 */
    --citrine: #f4e151;    /* oklch(0.900 0.160 102), a field under the ground's colour: 14.0:1 */
    --on-citrine: var(--ground);
    --citrine-faint: #453e08;          /* oklch(0.360 0.070 102), the link band, 1.7:1 on the ground; ink on it 8.9:1 */
    --citrine-strong: var(--citrine);  /* the dot: 14.0:1 */
  }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--ground);
  color: var(--ink);
  font: var(--size-text)/var(--leading) var(--face-text);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter) 5rem;
  overflow-wrap: break-word;
}
::selection { background: var(--citrine); color: var(--on-citrine); }

/* links (I48): a band of faint citrine reaching up into the lower part of the letters, and beneath it a faint line of
   quiet ink. On hover or keyboard focus the line darkens to ink, and nothing else moves. The leaving sign ↗, like the
   dot, is a quiet indicator standing a word space after the link, outside its line and band. */
a {
  color: var(--ink);
  text-decoration: underline .3em var(--citrine-faint);
  text-decoration-skip-ink: none;
  text-underline-offset: -.04em;
  border-bottom: 1px solid var(--quiet);
}
a:hover, a:focus-visible { border-bottom-color: var(--ink); outline: 0; }
a[href^="http"], a[rel~="external"] { margin-right: 1em; }
a[href^="http"]::after, a[rel~="external"]::after { content: "↗"; position: absolute; margin-left: .3em; font-size: .8em; color: var(--quiet); }

/* the header (I48): the mark on its own line, then the search bar across the full row. The mark is one line of the
   search type square (1.2 em, the field's line height), so always larger than ↵; quiet at rest, ink under the pointer
   or keyboard focus. */
body > header { padding: 2.25rem 0 0; }
body > header > a { display: block; width: fit-content; margin-bottom: calc(var(--search-size) / 2); border: 0; text-decoration: none; font-size: var(--search-size); line-height: 0; }
body > header > a > svg { width: 1.2em; height: 1.2em; margin: 0; fill: var(--quiet); }
body > header > a:hover > svg, body > header > a:focus-visible > svg { fill: var(--ink); }

/* the search bar: the line above, the field in large type, ↵. No field, frame, ring or line, at rest or in focus;
   the caret and the words are the field. */
search form { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: baseline; column-gap: var(--turn); }
search label { grid-column: 1 / -1; font: .75rem/1.5 var(--face-label); color: var(--quiet); }
search input, search button {
  margin: 0; padding: .1rem 0; border: 0; border-radius: 0; background: none;
  color: var(--ink); font: 400 var(--search-size)/1.2 var(--face-text);
  -webkit-appearance: none; appearance: none;
}
search input { width: 100%; min-width: 0; outline: 0; }
search input::placeholder { color: var(--quiet); opacity: 1; }
/* the clear button, drawn as a hairline ×, sized to the field's type */
search input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: .5em; height: .5em; margin-left: .4em; cursor: pointer;
  background: var(--quiet);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1L1 9' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1L1 9' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
}
search button { color: var(--quiet); cursor: pointer; outline: 0; }
search button:hover, search button:focus-visible { color: var(--ink); }

/* text */
main { padding-top: 3.25rem; }
h1, h2, h3, h4, h5, h6 { font-weight: var(--weight-strong); line-height: 1.2; margin: 2.25rem 0 .7rem; text-wrap: balance; }
h1 { margin-top: 0; font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3, h4, h5, h6 { font-size: 1rem; }
p, ul, ol, dl, blockquote, pre, table { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; }
li { margin: .25rem 0; }
li > p { margin: .25rem 0; }
b, strong { font-weight: var(--weight-strong); }
small, time { font: var(--size-label)/1.5 var(--face-label); color: var(--quiet); }
/* the dot: a note kept in view (I47, I48). A disc of strong citrine as tall as the lowercase of the text it follows,
   on the baseline a word space after it. */
span[role="img"] { display: inline-block; width: 1ex; height: 1ex; margin-left: .3em; border-radius: 50%; background: var(--citrine-strong); }
mark { padding: 0 .08em; background: var(--rule); color: var(--ink); }
hr { margin: 2.25rem 0; border: 0; border-top: 1px solid var(--rule); }
blockquote { padding-left: 1rem; border-left: 1px solid var(--quiet); }
blockquote > :last-child { margin-bottom: 0; }
code, kbd, samp, pre { font-family: var(--face-label); font-size: .875em; }
pre { overflow-x: auto; overflow-wrap: normal; }
table { display: block; overflow-x: auto; border-collapse: collapse; overflow-wrap: normal; }
th, td { padding: .3rem .75rem .3rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }

/* drawings sit on the page as drawn: no frame, edge, ground or shadow (I37) */
img, svg { display: block; max-width: 100%; height: auto; margin: 1.5rem 0; }
p > img:only-child { margin: 0; }
body > svg { position: absolute; width: 0; height: 0; margin: 0; }
@media (prefers-color-scheme: dark) { article img { filter: url(#contour); } }
feFlood { flood-color: var(--ink); }

/* an eidographic plate, inline: its pens set by role from the page's ink and paper */
svg[role="img"] { overflow: visible; }
svg [data-pen] { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
svg [data-pen="sil"] { stroke-width: var(--pen-sil); }
svg [data-pen="sec"] { stroke-width: var(--pen-sec); }
svg [data-pen="fine"] { stroke-width: var(--pen-fine); }
svg [data-pen="hatch"] { stroke-width: var(--pen-hatch); }
svg [data-pen="env"] { stroke-width: var(--pen-env); stroke-dasharray: 6 4; }
svg [data-pen="axis"] { stroke-width: var(--pen-axis); stroke-dasharray: 12 3 2 3; }
svg [data-fill="white"] { fill: var(--ground); }
svg [data-fill="black"] { fill: var(--ink); }
svg [data-text] { fill: var(--ink); font-family: var(--face-label); }
svg [data-text="num"] { font-size: 66px; }
svg [data-text="cap"] { font-size: 64px; }

/* a note: its dateline, title and body; marginalia stand after the passage they speak to */
article > header { margin-bottom: .4rem; }
article > header p { margin: 0; font: var(--size-label)/1.5 var(--face-label); color: var(--quiet); }
aside { margin: -.25rem 0 1.25rem 1.25rem; padding-left: .75rem; border-left: 1px solid var(--quiet); font-size: .9em; }
aside > :last-child { margin-bottom: 0; }

/* the tab: one narrow column at the content's left edge, where every list turns. A label, a letter or a date
   stands in it; what is named starts beside it. */
article > footer { margin-top: 3rem; padding-top: .9rem; border-top: 1px solid var(--rule); }
article > footer dl, main > section > dl {
  display: grid; grid-template-columns: var(--tab) minmax(0, 1fr); gap: .35rem var(--turn); margin: 0;
}
dt, main > section:has(> dl) > h2 { font: var(--size-label)/1.9 var(--face-label); color: var(--quiet); text-transform: uppercase; letter-spacing: .06em; }
dt { grid-column: 1; }
dd { grid-column: 2; margin: 0; }

/* lists of notes: the date in the tab, then the title, then the description's lead */
main > section { margin-top: 3rem; }
main > section > h2 { margin: 0 0 1rem; font: var(--size-label)/1.5 var(--face-label); color: var(--quiet); }
main > section > h2 small { margin-left: .5em; }
main > section > ol { list-style: none; padding: 0; margin: 0; }
main > section > ol > li { margin: 0 0 1.1rem; }
main > section > ol > li > time { display: block; white-space: nowrap; }
main > section > ol > li > small { margin-left: .5em; }
main > section > ol > li > p { margin: .1rem 0 0; font-size: .92em; line-height: 1.45; color: var(--quiet); }
main > section > ol mark { padding: 0 .08em; background: var(--citrine); color: var(--on-citrine); }
a mark { display: inline-block; }   /* a found word in a title stands clear of the link's band */

/* while a search has results, the page's other content steps aside */
main:has(> section[aria-live]:not([hidden])) > :not(section[aria-live]) { display: none; }
main > section[aria-live] { margin-top: 0; }

/* the landing page's list numbered, each number ahead of its entry on the date's line, two figures wide (I47) */
#kept + ol { counter-reset: kept; }
#kept + ol > li { counter-increment: kept; position: relative; padding-left: calc(1.5 * var(--size-label) + var(--turn)); }
#kept + ol > li::before { content: counter(kept); position: absolute; left: 0; width: calc(1.5 * var(--size-label)); white-space: nowrap; text-align: right; font: var(--size-label)/1.5 var(--face-label); font-variant-numeric: tabular-nums; color: var(--quiet); }
@media (min-width: 48rem) {
  #kept + ol > li > time { position: static; line-height: 1.5; }
}

/* the landing page */
main > header { margin-bottom: 3rem; }
main > header h1 { margin-bottom: .5rem; }
main > header p { margin: 0; font: var(--size-label)/1.6 var(--face-label); color: var(--quiet); }

@media (min-width: 48rem) {
  :root { --gutter: 2rem; --tab: 5.5rem; }
  main > section > ol > li { position: relative; margin-bottom: .9rem; padding-left: calc(var(--tab) + var(--turn)); }
  main > section > ol > li > time { position: absolute; left: 0; line-height: calc(var(--leading) * var(--size-text) / var(--size-label)); }
  body > header { padding-top: 3.5rem; }
  main { padding-top: 4rem; }
  h1 { font-size: 1.85rem; }
  svg [data-text="num"] { font-size: 34px; }
  svg [data-text="cap"] { font-size: 40px; }
}