/* ============================================================================
   The Style Library
   Same family as the glossary — pill radius, uppercase micro-type, sand
   fill, the hard ink shadow — because they are two rooms in one building.
   What is new here is the stuff the glossary has no need of: the view tabs,
   the discipline stripe, the two-column lineage, the palette swatches and
   the timeline.
   ========================================================================== */

/* The controls are the point of this page, so it opens tight — the same
   16px the glossary gives its rail, so the two pages start at the same
   distance under their mastheads. */
.slib { padding-block: var(--s2) var(--s8); }

/* ---------------------------------------------------------- view tabs ---- */
/* Six entity types, one dataset. These are not filters — they change WHAT
   you are looking at, so they get the strongest control on the page and sit
   above the browse rail. */
.slib__views {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  /* Tighter under the strip than over it: the rail below belongs to the
     tabs, and the space between them should read as smaller than the space
     around the pair. */
  margin-bottom: var(--s2);
  padding-bottom: var(--s2);
  border-bottom: var(--ringer);
}

.slib-view {
  font: inherit;
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-weight: 900;
  font-size: 1.0625rem;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 40px;
  padding: 8px var(--s3);
  color: var(--ink);
  background: none;
  border: var(--ringer);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-slide),
              color var(--dur-fast) var(--ease-slide),
              transform var(--dur-fast) var(--ease-peel),
              box-shadow var(--dur-fast) var(--ease-peel);
}
.slib-view small {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.slib-view:hover {
  background: var(--paper-warm);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}
.slib-view[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper-warm);
}
.slib-view[aria-pressed="true"]:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}
.slib-view:focus-visible { outline: var(--ringer); outline-offset: 3px; }

/* --------------------------------------------------------- browse rail -- */
/* Sticks under the nav so browsing never strands you: at S you can still
   reach B without scrolling back. --slib-nav is measured by style-lib.js —
   the nav's height is not a constant, the wordmark reflows when Fraunces
   lands. */
.slib__browse {
  position: sticky;
  top: var(--slib-nav, 56px);
  z-index: 50;                    /* under the nav's 100, over the entries */
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  background: var(--paper);
  /* ONE RULE, NOT TWO. The tab strip already closes itself with a border;
     boxing the rail top and bottom as well put a second line a few pixels
     under it with a sliver of paper between, which reads as a mistake
     rather than a division. The bottom border is the one doing work — it
     separates the rail from the entries scrolling under it while it is
     stuck — so the top one goes and the tabs' own line stands alone. */
  border-bottom: var(--ringer);
  padding-block: var(--s2);
  margin-bottom: var(--s4);
}
.slib__browselabel { flex: none; color: var(--ink-soft); margin: 0; }
.slib__count { flex: none; margin-left: auto; color: var(--ink-soft); }

.slib__az {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}
/* The category rails (principles, materials) hold words rather than
   letters, so they wrap as chips instead of pretending to be an alphabet. */
.slib-az__key {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  min-height: 30px;
  padding: 0 8px;
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-weight: 900;
  font-size: 1.0625rem;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: 8px;
  transition: background var(--dur-fast) var(--ease-slide),
              color var(--dur-fast) var(--ease-slide);
}
.slib__az--alpha .slib-az__key { padding: 0 4px; }
a.slib-az__key:hover { background: var(--ink); color: var(--paper-warm); }
a.slib-az__key:focus-visible { outline: var(--ringer); outline-offset: 2px; }
a.slib-az__key[aria-current="location"] {
  background: var(--gold);
  border-color: var(--ink);
}
/* Nothing under this key with the current filter on — kept in place so the
   rail never changes shape, and so the row reads as a summary of what the
   filter did. */
.slib-az__key.is-off { color: var(--ink-soft); opacity: 0.3; }

/* ------------------------------------------------------------- refine --- */
.slib__refine { margin-bottom: var(--s4); }

.slib__row {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
}
.slib__row + .slib__row { margin-top: var(--s3); }
.slib__row[hidden] { display: none; }

.slib__rowlabel {
  flex: none;
  width: 5.5rem;
  color: var(--ink-soft);
  margin: 0;
}

.slib__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  flex: 1 1 16rem;
}
/* The disclosed quality list takes a line of its own rather than sharing
   the row with the state pills — 60-odd words need the full width, and a
   flex-basis of 100% is what puts them on the next line without a wrapper.
   No cap and no scrollbar: it is either closed or it is all there. */
.slib__pills--tags { flex: 1 0 100%; margin-top: var(--s2); }
.slib__pills--tags[hidden] { display: none; }

/* The disclosure. Dressed as the "Clear all" link rather than a pill —
   it does not filter anything, it shows you the filters. */
.slib__more {
  font: inherit;
  font-size: var(--type-fine);
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--gold);
  padding: 0 0 1px;
  margin-left: var(--s1);
  cursor: pointer;
  align-self: center;
}
.slib__more:hover { color: var(--rust-deep); border-bottom-color: var(--rust); }
.slib__more:focus-visible { outline: var(--ringer); outline-offset: 3px; }

.slib-pill {
  font: inherit;
  min-height: 24px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  background: var(--sand);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-slide),
    color var(--dur-fast) var(--ease-slide),
    transform var(--dur-fast) var(--ease-peel),
    box-shadow var(--dur-fast) var(--ease-peel);
}
/* The discipline dot is the same colour the stripe uses on every row, so
   the filter and the thing it filters are visibly the same idea. */
.slib-pill__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.35);
  flex: none;
}
.slib-pill:hover {
  background: var(--paper-warm);
  border-color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}
.slib-pill[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper-warm);
  border-color: var(--ink);
}
.slib-pill[aria-pressed="true"]:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}
.slib-pill:focus-visible { outline: var(--ringer); outline-offset: 3px; }

.slib__row--search { margin-top: var(--s3); }
.slib__search {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: 1 1 16rem;
  max-width: 30rem;
}
.slib__search input {
  font: inherit;
  font-size: 0.9375rem;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
  background: var(--paper-warm);
  border: 2px solid var(--ink-soft);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}
.slib__search input::placeholder { color: var(--ink-soft); opacity: 0.8; }
.slib__search input:focus-visible {
  border-color: var(--ink);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.slib__clear {
  font: inherit;
  font-size: var(--type-fine);
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--gold);
  padding: 0 0 1px;
  cursor: pointer;
  flex: none;
}
.slib__clear:hover { color: var(--rust-deep); border-bottom-color: var(--rust); }

/* ------------------------------------------------------------ entries ---- */
/* The entries ARE the About page's accordion: .accord__item / __head /
   __chevron / __panel come from components.css, so the chevron badge, the
   hard shadow, the hover lift and the eased open/close are shared, not
   re-implemented. Only the inside of the panel is library-specific. */

/* The gap rides the TRAILING edge, never the leading one: scroll-margin-top
   offsets from the border box, so a margin above a heading lands an anchor
   jump that much too low — which also makes the rail report the previous
   group. Learned on the glossary. */
.slib-group { margin-bottom: var(--s6); }
.slib-group:last-child { margin-bottom: 0; }

/* An anchor jump must not land under the sticky stack. base.css sets
   html { scroll-padding-top } for the nav alone; here the stack is the nav
   PLUS the browse rail, so the page-level padding is RE-STATED rather than
   adding a per-element scroll-margin on top of it — the two compound. This
   stylesheet loads only on this page, so overriding html is contained. */
html { scroll-padding-top: calc(var(--slib-stick, 120px) + var(--s3)); }

.slib-group__mark {
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-weight: 900;
  font-size: 2.25rem;
  line-height: 1.05;
  color: var(--gold-deep);
  border-bottom: var(--ringer);
  padding-bottom: var(--s2);
  margin: 0 0 var(--s3);
}

.slib-group__items { max-width: var(--col-break); }
.slib-entry + .slib-entry { margin-top: var(--s2); }

/* THE ROW. Stripe, name, and one right-aligned fact — era for a style,
   dates for a person, a count for a principle. The fact is what makes a
   list of 110 scannable without opening anything. */
.slib-row__title {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
  min-width: 0;
}
.slib-row__name { font-weight: 600; }
.slib-row__era {
  margin-left: auto;
  font-size: var(--type-fine);
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}
.slib-row__flag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 1px 6px;
}
.slib-row__num {
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-weight: 900;
  color: var(--gold-deep);
  font-feature-settings: "tnum" 1;
}

/* The discipline stripe: one bar per discipline, in the discipline's own
   colour. Colour alone is never the message — the same disciplines are
   spelled out as filter tags inside the panel — but at a glance it is how
   you see that a style is both graphic AND digital. */
.slib-stripe {
  display: inline-flex;
  gap: 2px;
  flex: none;
  align-self: center;
}
.slib-stripe i {
  display: block;
  width: 5px;
  height: 18px;
  border-radius: 2px;
}

/* Landing from a pivot: border, background AND a rule — never hue alone,
   which would be invisible to a chunk of the people this page is for. */
.slib-entry.is-landed {
  border-color: var(--gold-deep);
  background: var(--paper-butter);
  box-shadow: var(--shadow-hard);
}
.slib-entry:target { border-color: var(--gold-deep); }

.slib-entry .accord__panelInner > * { padding: 0 var(--s4); }
.slib-entry .accord__panelInner > :last-child { padding-bottom: var(--s4); }
/* Direct children already carry the inset; nested paragraphs must not
   double it. */
.slib-entry .slib-sec p,
.slib-entry .slib-era__walk p { padding: 0; }

.slib-entry__aka {
  margin: 0 0 var(--s1);
  font-size: var(--type-fine);
  color: var(--ink-soft);
}
.slib-entry__aka .eyebrow { margin-right: var(--s1); }
.slib-sep { padding: 0 6px; opacity: 0.6; }

.slib-entry__meta {
  margin: 0 0 var(--s2);
  font-size: var(--type-fine);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.slib-entry__def {
  margin: 0;
  color: var(--ink);
  max-width: 62ch;
}
/* "Why it happened" is the argument, not the record, so it is set apart —
   a rule down the left rather than another paragraph in the flow. */
.slib-entry__why {
  margin: var(--s2) 0 0;
  padding-left: var(--s3) !important;
  border-left: 3px solid var(--gold);
  color: var(--ink-soft);
  max-width: 62ch;
}
.slib-entry__why .eyebrow { color: var(--gold-deep); margin-right: 6px; }
.slib-prose { margin: 0; color: var(--ink-soft); max-width: 66ch; }
.slib-none { margin: 0; color: var(--ink-soft); }

.slib-sec { margin-top: var(--s3); }
.slib-sec__label { color: var(--ink-soft); margin: 0 0 var(--s1); }
.slib-key {
  margin: var(--s1) 0 0;
  font-size: var(--type-fine);
  color: var(--ink-soft);
  opacity: 0.85;
}

.slib-bullets {
  margin: 0;
  padding-left: 1.1em;
  color: var(--ink-soft);
  max-width: 62ch;
}
.slib-bullets li { margin-bottom: 4px; }
.slib-words { margin: 0; color: var(--ink-soft); }

/* --------------------------------------------------- chips vs. filters --- */
/* Two species, and the difference must read BEFORE the click: a CHIP
   navigates to another entry (rounded, arrowed), a TAG filters the list
   (square-ish, sand). Same family, different shape, different verb. */
.slib-chips { display: flex; flex-wrap: wrap; gap: var(--s1); }

.slib-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-warm);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  transition: transform var(--dur-fast) var(--ease-peel),
              box-shadow var(--dur-fast) var(--ease-peel),
              background var(--dur-fast) var(--ease-slide);
}
.slib-chip::after { content: "\2192"; color: var(--rust-deep); }
a.slib-chip:hover {
  background: var(--gold);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}
a.slib-chip:focus-visible { outline: var(--ringer); outline-offset: 3px; }
/* A reference to something the library does not hold. Dashed and inert —
   an edge with a missing node, shown rather than hidden. */
.slib-chip.is-dead {
  border-style: dashed;
  border-color: var(--ink-soft);
  color: var(--ink-soft);
  background: none;
}
.slib-chip.is-dead::after { content: none; }

.slib-tags { display: flex; flex-wrap: wrap; gap: var(--s1); }
.slib-tag {
  font: inherit;
  min-height: 24px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sand);
  border: 2px solid transparent;
  border-radius: 6px;                 /* square-ish: filters, not journeys */
  padding: 3px 10px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-slide),
              border-color var(--dur-fast) var(--ease-slide);
}
.slib-tag--mood { background: var(--sky); }
.slib-tag:hover { border-color: var(--ink); background: var(--paper-warm); }
.slib-tag:focus-visible { outline: var(--ringer); outline-offset: 3px; }

/* ------------------------------------------------------------ lineage --- */
/* Two columns with the axis between them: what a style came from on the
   left, what it led to on the right. Reading left to right is reading
   forward in time, which is the only orientation anybody has to learn. */
.slib-line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s3);
  align-items: start;
}
.slib-line__axis {
  width: 2px;
  align-self: stretch;
  background: var(--sand);
  border-radius: 1px;
}
.slib-line__col--right { text-align: right; }
.slib-line__cap {
  margin: 0 0 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.slib-line__cap--against { margin-top: var(--s2); color: var(--rust-deep); }
.slib-line__stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.slib-line__col--right .slib-line__stack { align-items: flex-end; }

.slib-node {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 1px;
}
a.slib-node:hover { color: var(--rust-deep); border-bottom-color: var(--rust); }
a.slib-node:focus-visible { outline: var(--ringer); outline-offset: 3px; }
.slib-node.is-dead {
  color: var(--ink-soft);
  border-bottom: 2px dashed var(--ink-soft);
  cursor: help;
}
.slib-node.is-none { border: 0; color: var(--ink-soft); }

/* ------------------------------------------------------------ palette --- */
.slib-pal { display: flex; flex-wrap: wrap; gap: var(--s2); }
.slib-swatch {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 7.5rem;
}
.slib-swatch i {
  display: block;
  height: 40px;
  border: var(--ringer);
  border-radius: 6px;
}
.slib-swatch b { font-size: var(--type-fine); font-weight: 600; }
.slib-swatch small {
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --------------------------------------------------------- era walking -- */
.slib-era__walk {
  display: flex;
  gap: var(--s2);
  justify-content: space-between;
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 2px solid var(--sand);
}
.slib-step {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
}
.slib-step--next { text-align: right; margin-left: auto; }
.slib-step__dir {
  font-size: var(--type-fine);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.slib-step__name { font-weight: 600; }
a.slib-step:hover .slib-step__name { color: var(--rust-deep); }
.slib-step.is-end { color: var(--ink-soft); }

/* ----------------------------------------------------------- timeline --- */
/* 110 bars on one 1100–2030 axis. It exists to answer the questions a list
   cannot: what overlapped with what, and how much of design history is
   crammed into the last seventy years. */
.slib-tl { max-width: var(--col-max); }
.slib-tl__cap { margin: 0 0 var(--s2); }
.slib-tl__scale {
  position: relative;
  height: 1.4rem;
  margin-left: 9.5rem;
  margin-right: 4rem;
  border-bottom: 2px solid var(--sand);
}
.slib-tl__scale span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.slib-tl__rows { padding-block: var(--s1); }

.slib-tl__row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 30px;
  padding: 2px 0;
  text-decoration: none;
  color: var(--ink);
  border-radius: 4px;
}
.slib-tl__row:hover { background: var(--sand); }
.slib-tl__row:focus-visible { outline: var(--ringer); outline-offset: 2px; }
.slib-tl__name {
  flex: none;
  width: 9.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slib-tl__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 12px;
  background: repeating-linear-gradient(
    to right, transparent 0 calc(10% - 1px), rgba(42, 32, 24, 0.08) calc(10% - 1px) 10%);
}
.slib-tl__bar {
  position: absolute;
  top: 0;
  height: 12px;
  min-width: 3px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.3);
}
.slib-tl__yrs {
  flex: none;
  width: 4rem;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ------------------------------------------------------------- states --- */
.slib__empty {
  border: var(--ringer);
  border-radius: var(--radius-card);
  background: var(--paper-warm);
  padding: var(--s5);
  max-width: var(--col-read);
}
.slib__empty p { margin: 0 0 var(--s3); }
.slib__empty p:last-child { margin: 0; }
.slib-error { color: var(--rust-deep); }

.slib__provenance {
  margin-top: var(--s7);
  padding-top: var(--s3);
  border-top: 2px solid var(--sand);
  max-width: 78ch;
  color: var(--ink-soft);
}

/* The no-JS list, same treatment as the glossary's. */
.slib noscript dl { max-width: var(--col-read); }
.slib noscript dt { font-weight: 700; margin-top: var(--s3); }
.slib noscript dd { margin: 4px 0 0; color: var(--ink-soft); }
.slib noscript small { display: block; margin-top: 2px; opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
  .slib-view, .slib-pill, .slib-chip, .slib-tag { transition: none; }
  .slib-view:hover, .slib-pill:hover, a.slib-chip:hover { transform: none; }
}

/* ============================================================================
   MOBILE — the same phone pass the rest of the site had
   ============================================================================
   Every register here matches docs/USER-GUIDE.md § "What the phone gets":
   body 22, secondary 20, eyebrow 17, quiet floor 16, and no tap target
   under 44px. Nothing on this page is set smaller than its desktop value.
   The three structural changes are the rail (a swipeable strip rather than
   a four-row wall), the lineage (one column, because two 150px columns of
   names is neither), and the timeline (which stops pretending it has room
   for a name column).
   ========================================================================== */
@media (max-width: 767px) {

  /* --- view tabs: a swipeable strip -------------------------------------
     Six tabs wrap to three rows on a phone and eat the screen above the
     content. One row that scrolls sideways keeps them one thumb-flick
     apart. min-width: 0 is load-bearing — without it a nowrap row of six
     demands its full width, the flex item takes it, and the PAGE scrolls
     sideways instead of the strip. */
  .slib__views {
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--s2);
  }
  .slib__views::-webkit-scrollbar { display: none; }
  .slib-view {
    flex: none;
    min-height: 44px;
    font-size: 1.125rem;
    padding: 8px var(--s3);
  }
  .slib-view small { font-size: 1rem; }

  /* --- the jump rail, same treatment ----------------------------------- */
  .slib__az {
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .slib__az::-webkit-scrollbar { display: none; }
  .slib-az__key {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.375rem;
    flex: none;
  }
  .slib__browselabel { width: auto; }
  .slib__count { margin-left: 0; width: 100%; }

  /* --- refine: readable, and big enough to hit -------------------------- */
  .slib__rowlabel { width: 100%; }
  .slib-pill { font-size: 1.0625rem; min-height: 44px; padding: 10px 18px; }
  .slib-tag  { font-size: 1rem;      min-height: 40px; padding: 8px 14px; }
  .slib-chip { font-size: 1.125rem;  min-height: 44px; padding: 8px 16px; }
  .slib__more { font-size: 1.125rem; min-height: 44px; }
  /* 16px is the floor on a field: below it iOS Safari zooms the page the
     moment it takes focus. That is a defect, not a preference. */
  .slib__search input { font-size: 1.125rem; min-height: 48px; }

  /* --- entries ---------------------------------------------------------- */
  .slib-group__mark { font-size: 2.5rem; }
  .slib-row__flag { font-size: 1rem; padding: 2px 8px; }
  .slib-tl__scale span { font-size: 1rem; }
  .slib-row__title { gap: var(--s1); }
  .slib-row__name { font-size: 1.5rem; }
  .slib-row__era { font-size: 1rem; }
  .slib-entry__meta { font-size: 1rem; }
  .slib-entry__def { font-size: 1.375rem; }
  .slib-entry__why,
  .slib-prose,
  .slib-bullets,
  .slib-words,
  .slib-none { font-size: 1.25rem; }
  .slib-sec__label { font-size: 1rem; }
  .slib-key { font-size: 1rem; }
  .slib-entry .accord__panelInner > * { padding-inline: var(--s3); }
  .slib-entry .accord__panelInner > :last-child { padding-bottom: var(--s3); }

  /* --- lineage: one column ---------------------------------------------
     Two columns of style names inside a 327px panel gives each about 150px,
     which wraps every name to three lines and reads as a jumble. Stacked,
     with the captions doing the work the axis did. */
  .slib-line { grid-template-columns: 1fr; gap: var(--s3); }
  .slib-line__axis { display: none; }
  .slib-line__col--right { text-align: left; }
  .slib-line__col--right .slib-line__stack { align-items: flex-start; }
  .slib-line__cap { font-size: 1rem; }
  .slib-line__cap--against { margin-top: var(--s3); }
  .slib-node { font-size: 1.25rem; }
  .slib-line__stack { gap: 10px; }

  /* --- palette: two up --------------------------------------------------- */
  .slib-swatch { width: calc(50% - var(--s1)); }
  .slib-swatch b { font-size: 1.0625rem; }
  .slib-swatch small { font-size: 1rem; }

  /* --- era walk ---------------------------------------------------------- */
  .slib-step__dir { font-size: 1rem; }
  .slib-step__name { font-size: 1.125rem; }

  /* --- timeline: the name column goes ----------------------------------
     9.5rem of name plus 4rem of years leaves under 100px of axis on a
     phone, which is not a timeline, it is a rounding error. The name moves
     above its own bar and the axis gets the whole width. */
  .slib-tl__scale { margin-inline: 0; }
  .slib-tl__scale .is-dense { display: none; }
  .slib-tl__row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name yrs" "track track";
    gap: 2px var(--s2);
    min-height: 44px;
    padding: 6px 0;
  }
  .slib-tl__name {
    grid-area: name;
    width: auto;
    text-align: left;
    font-size: 1.125rem;
    /* The name has its own row down here, so there is no reason to clip
       it — "1990s Minimalism (fashion)" should not end in an ellipsis when
       the line is empty to its right. */
    white-space: normal;
    overflow: visible;
  }
  .slib-tl__yrs { grid-area: yrs; width: auto; font-size: 1rem; }
  .slib-tl__track { grid-area: track; }

  .slib__provenance { font-size: 1rem; }
  .slib noscript dd { font-size: 1.25rem; }
}