/* fontspy: stark black and white in the Swiss and Bauhaus spirit. Lowercase Helvetica display type,
   thin rules, square corners, no accent colour.
   The fonts are the only decoration. Light and dark follow the system and simply invert. */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --ink: #000000;
  --muted: #6b6b6b;
  --hair: #e6e6e6;
  /* The marks that lead text fields (see Inputs), one per theme since an image can't take the ink colour */
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='black'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='black' stroke-width='1.9'/%3E%3C/svg%3E");
  /* System sans only, nothing to download: Helvetica Neue on Apple devices, Segoe UI Variable on
     Windows 11 (Segoe UI before it), Roboto on Android, Arial elsewhere */
  --ui: "Helvetica Neue", Helvetica, "Segoe UI Variable Text", "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Helvetica Neue", Helvetica, "Segoe UI Variable Display", "Segoe UI", Roboto, Arial, sans-serif;
}
/* Dark follows the system unless the reader picked light with the header toggle; picking dark
   works on any system. The toggle stores the choice and theme.js applies it before paint. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --ink: #ffffff;
    --muted: #9a9a9a;
    --hair: #262626;
    --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='white'/%3E%3C/svg%3E");
    --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='white' stroke-width='1.9'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --ink: #ffffff;
  --muted: #9a9a9a;
  --hair: #262626;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='white'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='white' stroke-width='1.9'/%3E%3C/svg%3E");
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
h1 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -0.045em; line-height: 0.92; }
h2 { margin: 0 0 16px; font-size: 0.95rem; font-weight: 700; text-transform: lowercase; letter-spacing: 0; }
.wrap { width: 100%; max-width: 90rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 900px) { .wrap { padding: 0 40px; } }
.muted { color: var(--muted); }
.lede { font-size: 1.25rem; line-height: 1.4; max-width: 40rem; margin: 24px 0 0; }

/* Header */
.site-header { background: var(--bg); border-bottom: 12px solid var(--ink); position: sticky; top: 0; z-index: 10; }
.header-row { display: flex; align-items: center; gap: 28px; min-height: 64px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.wordmark { text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.03em; line-height: 1; }
.header-search { flex: 1; min-width: 160px; position: relative; }
/* Quick results: a ruled list that drops from the header, live as you type */
.quick-results { position: absolute; left: 0; right: 0; top: calc(100% + 22px); background: var(--bg); border: 1px solid var(--ink); border-top: 0; z-index: 20; }
.quick, .quick-all { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--ink); text-decoration: none; }
.quick:hover, .quick-all:hover, .quick:focus, .quick-all:focus { background: var(--ink); color: var(--bg); outline: none; }
.quick-name { font: 700 1.05rem var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-meta { font-size: 0.85rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick:hover .quick-meta, .quick:focus .quick-meta { color: var(--bg); }
.quick-all { font-weight: 700; justify-content: flex-start; }
.header-nav { display: flex; gap: 24px; font-size: 0.95rem; font-weight: 700; letter-spacing: 0; text-transform: lowercase; }
.header-nav a { text-decoration: none; }
.header-nav a:hover { text-decoration: underline; }
.theme-toggle { order: 3; display: inline-flex; padding: 6px; margin: -6px -6px -6px 0; background: none; border: 0; color: var(--ink); cursor: pointer; }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Inputs are bare text led by a small solid triangle: half a square cut on the diagonal, its right-angle
   corner pointing right (▸), vertically centred in the field. The clear mark (below) waits in the same spot
   at zero size. While typing, a rule appears above and below, and the mark sits halfway between them. */
input[type="search"], input[type="text"] {
  width: 100%; font: inherit; color: var(--ink); border: 0; border-radius: 0; outline: none; -webkit-appearance: none; appearance: none;
  background:
    var(--input-mark) 0.125em 50% / 0.25em 0.5em no-repeat,
    var(--input-clear) 0.25em 50% / 0 0 no-repeat;
  transition: background-size 0.18s ease, background-position 0.18s ease;
  border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px 0 10px 0.95em;
}
/* With text in the field the triangle becomes an ×: two crossed strokes of one even weight, about a text
   stem's, cut square at the ends. Clicking it clears the field (app.js). It replaces the browser's own clear button.
   The swap is animated: the triangle shrinks away as the × grows from the same centre, and back again when cleared. */
input[type="search"]:not(:placeholder-shown), input[type="text"]:not(:placeholder-shown) {
  background-position: 0.25em 50%, 0 50%;
  background-size: 0 0, 0.5em 0.5em;
}
@media (prefers-reduced-motion: reduce) { input[type="search"], input[type="text"] { transition: none; } }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
input[type="search"]::placeholder, input[type="text"]::placeholder { color: var(--muted); }
input[type="search"]:focus, input[type="text"]:focus { border-color: var(--ink); }
/* In the header the thick bar is the only line, even while typing */
.header-search input, .header-search input:focus { border-color: transparent; padding-block: 8px; }
/* The home search sits right under the headline, so it is bare text too */
/* On focus it gains a rule above and below that run into the button's edges: field and button become one bar */
.hero-search input, .hero-search input:focus { padding-block: 12px; padding-right: 16px; }
.hero-search .button { flex: none; }

/* Buttons and badges */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 1rem var(--display); letter-spacing: 0; text-transform: lowercase; text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink); border-radius: 0; padding: 16px 32px;
}
.button:hover { background: var(--bg); color: var(--ink); }
/* A quiet button is filled with the muted grey rather than outlined */
.button-quiet { background: var(--hair); color: var(--ink); border-color: var(--hair); }
.button-quiet:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* Licenses: a free one is plain text; commercial, the case to notice, is a solid block */
.badge { display: inline-block; font-size: 0.85rem; letter-spacing: 0; text-transform: lowercase; white-space: nowrap; }
.badge-free { color: var(--muted); }
.badge-paid { padding: 3px 7px; font-weight: 700; background: var(--ink); color: var(--bg); }
.sheet-meta .badge-free { font-size: inherit; color: var(--ink); }

/* Asymmetric two-column grid in the manner of Tschichold: a narrow column of facts on the left,
   the main matter wide on the right, both hung from a heavy bar. Stacks on small screens. */

/* Home */
/* A big gap below sets the hero apart from the grid */
.hero { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 56px 0 clamp(64px, 10vw, 144px); }
/* Tight leading: the first line has no descenders, so the lines can nearly touch */
.hero h1 { font-size: clamp(4rem, 14vw, 11rem); line-height: 0.8; }
.hero-stats { margin: 0; order: 2; }
.hero-stats dt { font-size: 0.85rem; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--ink); }
.hero-stats dd { margin: 2px 0 16px; font: 700 2rem/1.1 var(--display); letter-spacing: -0.02em; }
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(15rem, 1fr) 3fr; column-gap: 56px; }
  .hero-stats { order: 0; padding-top: 16px; }
}
.hero-search { display: flex; align-items: stretch; gap: 0; margin-top: 48px; max-width: 48rem; }
.hero-search input { font-size: clamp(1.25rem, 3vw, 2rem); }
.more { margin: 40px 0 80px; }

/* Popular right now: the card grid, in the hero's two columns */
.popular { display: grid; grid-template-columns: 1fr; }
/* The label is set large and stacked, one word to a line, like the hero's title */
.popular h2 { margin: 0; padding-top: 28px; font: 700 clamp(2.75rem, 4.6vw, 4.25rem)/0.92 var(--display); letter-spacing: -0.04em; text-transform: none; }
.popular-list { min-width: 0; }
@media (max-width: 959px) { .popular h2 { margin-bottom: 32px; } }
/* An arrow pointing at the list, drawn with straight lines of one even weight (the stroke doesn't scale
   with the drawing): beside the label on phones, long beneath it on wide screens */
.popular .arrow { display: inline-block; width: 1.4em; height: 0.7em; margin-left: 0.3em; vertical-align: 0; overflow: visible; }
.popular .arrow path { stroke-width: 0.09em; stroke-linejoin: miter; }
@media (min-width: 960px) {
  .popular { grid-template-columns: minmax(15rem, 1fr) 3fr; column-gap: 56px; }
  /* Set flush right, so the label and its arrow sit against the list they point to */
  .popular h2 { position: sticky; top: 96px; align-self: start; text-align: right; }
  .popular .arrow { display: block; width: 2em; height: 1em; margin: 0.4em 0 0 auto; }
}

/* Cards: no lines at rest, just the type. On hover or keyboard focus the card draws its border out of the
   top-left corner: the top and left lines run out from it while the bottom and right lines draw in.
   Four lines, each a one-colour gradient whose length animates. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.card {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 20px 16px 24px; text-decoration: none; outline: none;
  background:
    linear-gradient(var(--ink), var(--ink)) left top / 0 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left top / 1px 0 no-repeat,
    linear-gradient(var(--ink), var(--ink)) right top / 1px 0 no-repeat,
    linear-gradient(var(--ink), var(--ink)) left bottom / 0 1px no-repeat;
  transition: background-size 0.25s ease;
}
.card:hover, .card:focus-visible { background-size: 100% 1px, 1px 100%, 1px 100%, 100% 1px; }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }
.card-name { font-family: var(--display); }
.card-sample { font-size: 2.6rem; line-height: 1.15; min-height: 3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { display: flex; flex-direction: column; min-width: 0; margin-top: auto; }
.card-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-author { color: var(--muted); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .badge { align-self: flex-start; }

/* List pages */
.page-head { padding: 56px 0 48px; }
.page-head h1 { font-size: clamp(3.25rem, 10vw, 8rem); }
/* Result lists: the count on the left and the pages on the right, over the grid; the pages again under it */
.results-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 28px 0 16px; scroll-margin-top: 120px; }
.results-head p { margin: 0; font-size: 0.95rem; font-weight: 700; letter-spacing: 0; text-transform: lowercase; }
.page-head + .results-head { margin-top: 0; }
.list-end { height: 80px; }
/* Pager: "← page 2 of 25 →" with drawn arrows; an arrow nudges toward its page on hover and goes pale at either end */
.pager { display: flex; align-items: center; gap: 16px; font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pager-bottom { justify-content: flex-end; margin-top: 40px; }
.pager-arrow { display: inline-flex; padding: 8px 4px; color: var(--ink); background: none; border: 0; cursor: pointer; }
.pager-arrow .arrow { width: 1.75em; height: 0.875em; overflow: visible; transition: transform 0.15s ease; }
.pager-arrow .arrow path { stroke-width: 2px; stroke-linejoin: miter; }
.pager-prev:not([aria-disabled="true"]):not(:disabled):hover .arrow { transform: translateX(-4px); }
.pager-next:not([aria-disabled="true"]):not(:disabled):hover .arrow { transform: translateX(4px); }
.pager-arrow[aria-disabled="true"], .pager-arrow:disabled { color: var(--hair); cursor: default; }
.pager-arrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pager-arrow .arrow { transition: none; } }

/* Font page: the sheet */
.font-page { padding: 14px 0 96px; }
.crumbs { display: flex; gap: 10px; font-size: 0.95rem; font-weight: 700; letter-spacing: 0; text-transform: lowercase; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.sheet { display: grid; grid-template-columns: 1fr; grid-template-areas: "title" "meta" "body"; margin-top: 0; }
.sheet-head { grid-area: title; min-width: 0; padding: 14px 0 24px; }
/* The small name above the title; it is also the preview box, bare until focused */
.sheet-name { font-size: 0.95rem; font-weight: 700; }
/* At rest it reads like the other labels: small, bold, lowercase, muted. Typed text shows in full ink. */
input.sheet-name::placeholder { color: var(--muted); text-transform: lowercase; }
/* The title and the style samples run on one line, cropped at the page edge rather than shrunk or wrapped.
   Only the sideways overflow is clipped, so tall swashes and deep descenders stay whole. */
.sheet-title { --title-size: clamp(3.5rem, 12vw, 10rem); font-size: var(--title-size); padding-top: 0; }
.sheet-title, .sample { white-space: nowrap; overflow: hidden; overflow-x: clip; overflow-y: visible; margin-right: -16px; }
@media (min-width: 900px) { .sheet-title, .sample { margin-right: -40px; } }
/* Once its font loads and can draw the name, the title switches to it: its own weight (no faux bold),
   normal spacing, room for tall glyphs. Until then, or if it can't, the title stays in the house face. */
/* --preview-size is the size slider's setting (app.js); unset, the title keeps its default size */
.sheet-title.font-loaded { font-size: var(--preview-size, var(--title-size)); font-weight: 400; font-synthesis: none; letter-spacing: 0; line-height: 1.05; }
.sheet-meta { grid-area: meta; }
.sheet-body { grid-area: body; min-width: 0; }
.sheet-meta dl { margin: 0; }
.sheet-meta dt { font-size: 0.85rem; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--ink); }
.sheet-meta dt:first-of-type { border-top: 0; padding-top: 0; }
.sheet-meta dd { margin: 2px 0 14px; font-size: 1.1rem; font-weight: 700; overflow-wrap: anywhere; }
.sheet-meta dd a { text-decoration: none; }
.sheet-meta dd a:hover { text-decoration: underline; }
.sheet-meta .button { width: 100%; margin-bottom: 24px; }
/* In the download button's place when a font has no download: the same block, muted and inert */
.unavailable { margin: 0 0 24px; padding: 16px 32px; background: var(--hair); color: var(--muted); font-weight: 700; text-align: center; }
/* Preview size: the value reads like the other facts, and the slider is the rule under it, a square turned
   on its corner riding the line */
.size-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; }
.size-row output { font-variant-numeric: tabular-nums; }
.size-row input { grid-column: 1 / -1; width: 100%; min-width: 0; height: 22px; margin: 2px 0 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.size-row input::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
.size-row input::-moz-range-track { height: 1px; background: var(--ink); }
.size-row input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 11px; height: 11px; margin-top: -5px;
  background: var(--ink); border: 0; border-radius: 0; transform: rotate(45deg); transition: transform 0.12s ease;
}
.size-row input::-moz-range-thumb { width: 11px; height: 11px; background: var(--ink); border: 0; border-radius: 0; transform: rotate(45deg); transition: transform 0.12s ease; }
.size-row input:active::-webkit-slider-thumb { transform: rotate(45deg) scale(1.25); }
.size-row input:active::-moz-range-thumb { transform: rotate(45deg) scale(1.25); }
.size-row input:focus { outline: none; }
.size-row input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ink); outline-offset: 3px; }
.size-row input:focus-visible::-moz-range-thumb { outline: 2px solid var(--ink); outline-offset: 3px; }
.size-reset { padding: 0; font: inherit; font-size: 0.85rem; font-weight: 400; color: var(--muted); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.size-reset:hover { color: var(--ink); }
.meta-tags { margin-top: 32px; }
.sheet-body > section { margin-top: 56px; max-width: 52rem; }
.sheet-body > .styles { margin-top: 8px; max-width: none; }
.styles[data-single] .style { display: none; }
@media (min-width: 960px) {
  .sheet { grid-template-columns: minmax(15rem, 1fr) 3fr; grid-template-areas: "meta title" "meta body"; column-gap: 56px; }
  .sheet-meta { padding-top: 26px; position: sticky; top: 96px; align-self: start; }
}
.preview-controls { display: flex; gap: 32px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.preview-controls input[type="text"] { flex: 1; min-width: 220px; font-size: 1.25rem; }
.size-control { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; font-weight: 700; letter-spacing: 0; text-transform: lowercase; }
.size-control input { accent-color: var(--ink); }
.style { margin: 0; padding: 32px 0; border-bottom: 1px solid var(--hair); }
.style figcaption { font-size: 0.95rem; font-weight: 700; letter-spacing: 0; text-transform: lowercase; color: var(--muted); margin-bottom: 12px; }
.sample { font-size: var(--preview-size, 88px); line-height: 1.1; min-height: 1.1em; }
[data-font-url].loading { opacity: 0.25; }
[data-font-url].failed { color: var(--muted); }
.family-list { columns: 2 16rem; list-style: none; padding: 0; margin: 0; }
.family-list li { padding: 10px 0; border-bottom: 1px solid var(--hair); break-inside: avoid; }
.prose { white-space: pre-wrap; margin: 0; font-size: 1.1rem; line-height: 1.6; }
/* Designer's notes, formatted from their readme: paragraphs, small bold headings, lists marked with en dashes,
   links underlined. Long notes keep the rest behind "more", opened by the fields' triangle, which turns. */
.notes { font-size: 1.1rem; line-height: 1.6; }
.notes p, .notes ul { margin: 0 0 1em; }
.notes h3 { margin: 1.5em 0 0.35em; font-size: 0.95rem; font-weight: 700; }
.notes > h3:first-child, .notes > :first-child { margin-top: 0; }
.notes ul { list-style: none; padding: 0; }
.notes li { padding-left: 1.2em; text-indent: -1.2em; }
.notes li::before { content: "–"; display: inline-block; width: 1.2em; text-indent: 0; }
.notes a { overflow-wrap: anywhere; }
.more > summary { display: inline-flex; align-items: center; gap: 0.55em; margin-bottom: 1em; cursor: pointer; list-style: none; font-size: 0.95rem; font-weight: 700; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: ""; width: 0.25em; height: 0.5em; background: var(--input-mark) 0 0 / 100% 100% no-repeat; transition: transform 0.15s ease; }
.more[open] > summary::before { transform: rotate(90deg); }
.more[open] > summary .when-closed, .more:not([open]) > summary .when-open { display: none; }
@media (prefers-reduced-motion: reduce) { .more > summary::before { transition: none; } }
.tags { display: flex; gap: 4px 14px; flex-wrap: wrap; margin: 0; }
/* Tags are written as you'd search for them, #techno, and run that search */
.tag { font-weight: 700; text-decoration: none; }
.tag .hash { color: var(--muted); font-weight: 400; }
.tag:hover { text-decoration: underline; }
.source { margin-top: 64px; font-size: 0.95rem; font-weight: 700; letter-spacing: 0; text-transform: lowercase; color: var(--muted); }

/* Search: the title and field over the results in the wide column; filters and tags in the narrow left
   column, starting level with the title like the home page's figures. On phones they sit in rows between
   the field and the results. */
.search-page { display: grid; grid-template-columns: 1fr; grid-template-areas: "head" "side" "body"; padding-bottom: 96px; }
.search-head { grid-area: head; min-width: 0; padding-top: 56px; }
.search-head h1 { font-size: clamp(3.25rem, 10vw, 8rem); margin-bottom: 40px; }
.search-head input { font-size: clamp(1.5rem, 4vw, 2.5rem); padding-block: 8px; }
/* Under the big title only the rule below shows while typing */
.search-head input:focus { border-top-color: transparent; }
.search-side { grid-area: side; min-width: 0; margin-top: 28px; }
.search-body { grid-area: body; min-width: 0; }
@media (min-width: 960px) {
  .search-page { grid-template-columns: minmax(15rem, 1fr) 3fr; grid-template-areas: "side head" "side body"; column-gap: 56px; }
  .search-side { align-self: start; margin-top: 0; padding-top: 67px; }
}
/* Facets: set like an index. A small label, then names flush left in bold with their counts ranged right in
   even-width figures; a rule above each label after the first, as in a font page's details. The chosen
   ones are in ink, marked by the fields' triangle hung outside the column's edge. */
.facet-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.facet-group + .facet-group { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--ink); }
.facet-title { padding: 0; margin: 0 0 6px; font-size: 0.85rem; font-weight: 400; color: var(--muted); text-transform: none; }
.facets { display: flex; flex-wrap: wrap; column-gap: 24px; }
.facet {
  position: relative; display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; cursor: pointer;
  font: 700 1.05rem/1.5 var(--ui); color: var(--muted); background: none; border: 0; text-align: left;
}
.facet:hover { color: var(--ink); }
.facet:has(input:checked), .facet[aria-pressed="true"] { color: var(--ink); }
.facet:has(input:checked)::before, .facet[aria-pressed="true"]::before {
  content: ""; position: absolute; left: -0.95em; top: 50%; width: 0.25em; height: 0.5em; margin-top: -0.25em;
  background: var(--input-mark) 0 0 / 100% 100% no-repeat;
}
.facet:has(input:focus-visible), .facet:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.facet input { position: absolute; opacity: 0; pointer-events: none; }
.facet .count { font-weight: 400; font-variant-numeric: tabular-nums; }
.facet-hint { margin: 16px 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--muted); }
@media (min-width: 960px) {
  .facets { flex-direction: column; }
  .facet { width: 100%; }
}
/* On phones the facets sit above the results, so they stay short: smaller, and only the top six tags */
@media (max-width: 959px) {
  .facet { font-size: 1rem; }
  #tags .facet:nth-child(n+7) { display: none; }
}


/* Colour pairs: a font page takes one from its tags (PAIRS in site/src/main.rs). Flat 70s grounds with
   chocolate or cream ink, in the Bauhaus poster manner. Every colour on the page comes from these values,
   so the layout is untouched; main text is at least 5.5:1 against the ground and grey text at least 4.6:1.
   In dark mode a pair swaps ground and ink. Generated with contrast checks; edit the pairs, not the mixes. */
/* horror: rust and cream */
.pair-horror { color-scheme: dark; --bg: #7f2c17; --ink: #f4e6cb; --muted: #d3b299; --hair: #99553f;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%23f4e6cb'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23f4e6cb' stroke-width='1.9'/%3E%3C/svg%3E"); }
/* picture: sage and deep green */
.pair-picture { color-scheme: light; --bg: #b4d1c9; --ink: #22322f; --muted: #455854; --hair: #94aea7;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%2322322f'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%2322322f' stroke-width='1.9'/%3E%3C/svg%3E"); }
/* techno: teal and cream */
.pair-techno { color-scheme: dark; --bg: #234f49; --ink: #f3e7cf; --muted: #b9bca9; --hair: #517066;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%23f3e7cf'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23f3e7cf' stroke-width='1.9'/%3E%3C/svg%3E"); }
/* grunge: olive and cream */
.pair-grunge { color-scheme: dark; --bg: #545033; --ink: #f2e8d2; --muted: #ccc4ac; --hair: #777156;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%23f2e8d2'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23f2e8d2' stroke-width='1.9'/%3E%3C/svg%3E"); }
/* script: dusty pink and chocolate */
.pair-script { color-scheme: light; --bg: #ecc0a8; --ink: #3a2214; --muted: #684b3a; --hair: #c59d87;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%233a2214'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%233a2214' stroke-width='1.9'/%3E%3C/svg%3E"); }
/* retro: mustard and chocolate */
.pair-retro { color-scheme: light; --bg: #e3a733; --ink: #33200f; --muted: #5a3e17; --hair: #bc892b;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%2333200f'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%2333200f' stroke-width='1.9'/%3E%3C/svg%3E"); }
/* pop: burnt orange and chocolate */
.pair-pop { color-scheme: light; --bg: #e86f33; --ink: #2a170b; --muted: #412210; --hair: #be5c2a;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%232a170b'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%232a170b' stroke-width='1.9'/%3E%3C/svg%3E"); }
/* deco: cream and terracotta */
.pair-deco { color-scheme: light; --bg: #f2e4c6; --ink: #7a3420; --muted: #90543e; --hair: #d8bda1;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%237a3420'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%237a3420' stroke-width='1.9'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pair-horror { color-scheme: light; --bg: #f4e6cb; --ink: #7f2c17; --muted: #96513b; --hair: #dabda3;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%237f2c17'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%237f2c17' stroke-width='1.9'/%3E%3C/svg%3E"); }
  :root:not([data-theme="light"]) .pair-picture { color-scheme: dark; --bg: #22322f; --ink: #b4d1c9; --muted: #859e98; --hair: #425551;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%23b4d1c9'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23b4d1c9' stroke-width='1.9'/%3E%3C/svg%3E"); }
  :root:not([data-theme="light"]) .pair-techno { color-scheme: light; --bg: #f3e7cf; --ink: #234f49; --muted: #4d6d64; --hair: #c5c6b2;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%23234f49'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23234f49' stroke-width='1.9'/%3E%3C/svg%3E"); }
  :root:not([data-theme="light"]) .pair-grunge { color-scheme: light; --bg: #f2e8d2; --ink: #545033; --muted: #6d684c; --hair: #cfc7af;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%23545033'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23545033' stroke-width='1.9'/%3E%3C/svg%3E"); }
  :root:not([data-theme="light"]) .pair-script { color-scheme: dark; --bg: #3a2214; --ink: #ecc0a8; --muted: #af8a76; --hair: #614535;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%23ecc0a8'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23ecc0a8' stroke-width='1.9'/%3E%3C/svg%3E"); }
  :root:not([data-theme="light"]) .pair-retro { color-scheme: dark; --bg: #33200f; --ink: #e3a733; --muted: #b5842a; --hair: #5a3e17;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%23e3a733'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23e3a733' stroke-width='1.9'/%3E%3C/svg%3E"); }
  :root:not([data-theme="light"]) .pair-pop { color-scheme: dark; --bg: #2a170b; --ink: #e86f33; --muted: #d5662f; --hair: #542a14;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%23e86f33'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23e86f33' stroke-width='1.9'/%3E%3C/svg%3E"); }
  :root:not([data-theme="light"]) .pair-deco { color-scheme: dark; --bg: #7a3420; --ink: #f2e4c6; --muted: #d3b69b; --hair: #945b45;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%23f2e4c6'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23f2e4c6' stroke-width='1.9'/%3E%3C/svg%3E"); }
}
:root[data-theme="dark"] .pair-horror { color-scheme: light; --bg: #f4e6cb; --ink: #7f2c17; --muted: #96513b; --hair: #dabda3;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%237f2c17'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%237f2c17' stroke-width='1.9'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .pair-picture { color-scheme: dark; --bg: #22322f; --ink: #b4d1c9; --muted: #859e98; --hair: #425551;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%23b4d1c9'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23b4d1c9' stroke-width='1.9'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .pair-techno { color-scheme: light; --bg: #f3e7cf; --ink: #234f49; --muted: #4d6d64; --hair: #c5c6b2;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%23234f49'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23234f49' stroke-width='1.9'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .pair-grunge { color-scheme: light; --bg: #f2e8d2; --ink: #545033; --muted: #6d684c; --hair: #cfc7af;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%23545033'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23545033' stroke-width='1.9'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .pair-script { color-scheme: dark; --bg: #3a2214; --ink: #ecc0a8; --muted: #af8a76; --hair: #614535;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%23ecc0a8'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23ecc0a8' stroke-width='1.9'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .pair-retro { color-scheme: dark; --bg: #33200f; --ink: #e3a733; --muted: #b5842a; --hair: #5a3e17;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%23e3a733'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23e3a733' stroke-width='1.9'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .pair-pop { color-scheme: dark; --bg: #2a170b; --ink: #e86f33; --muted: #d5662f; --hair: #542a14;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%23e86f33'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23e86f33' stroke-width='1.9'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .pair-deco { color-scheme: dark; --bg: #7a3420; --ink: #f2e4c6; --muted: #d3b69b; --hair: #945b45;
  --input-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5z' fill='%23f2e4c6'/%3E%3C/svg%3E");
  --input-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23f2e4c6' stroke-width='1.9'/%3E%3C/svg%3E"); }

/* Footer */
.footer-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 32px; font-size: 0.95rem; font-weight: 700; letter-spacing: 0; text-transform: lowercase; }
.footer-row span + span { color: var(--muted); font-weight: 400; letter-spacing: 0.04em; text-transform: none; font-size: 0.85rem; }

@media (max-width: 640px) {
  .header-row { gap: 16px; }
  .header-nav { width: 100%; gap: 20px; order: 4; }
  .hero-search { flex-direction: column; align-items: stretch; }
  .sample { font-size: var(--preview-size, 56px); }
}
.hero-plain { display: block; }