/* =========================================================================
   THE LABEL READER (drugratingz.com) : the reference-desk dossier.
   Prefix tlr-. Vocabulary of the archive desk: desk (masthead bar),
   wordmark, shelf (navigation), folder (the page container), cover (the
   home opening, photo facing the title), tab (kicker), cabinet (the three
   section tiles), file (a section band with its rule lines), slip (one
   entry of a file), method (how the desk reads), pinned (the sheets kept
   inside the cover), reading (the long column with its left gutter),
   crumbs (breadcrumb), head, plate (photograph), sheet (the body, with
   numbered rules), contents (end table of contents), onward (read next),
   note (the desk address), colophon (footer).
   Palette: paper white, archive grey, oxblood rule lines. System fonts
   only, no request outside the site. One light identity; the colophon is
   the only dark band and carries its own fixed tokens.
   Inherits the column-and-gutter idea of the colonne-longue skeleton
   (reading column of 41rem, 9rem gutter for numbers and dates at 64rem+),
   rewritten for photographs on the home.
   ========================================================================= */

:root {
  color-scheme: light;

  --tlr-paper: #f6f4ee;          /* page ground                         */
  --tlr-paper-deep: #ece9e0;     /* tinted bands, cards                 */
  --tlr-grey: #cbc6bb;           /* archive grey rules and frames       */
  --tlr-grey-soft: #dedad0;      /* lighter rules                       */
  --tlr-meta: #5c5952;           /* meta, notes, captions (5.6:1)       */
  --tlr-ink: #1f1d1a;            /* text                                */
  --tlr-ox: #6b1420;             /* oxblood: rules, numbers, links      */
  --tlr-ox-deep: #4a0d16;        /* hover                               */
  --tlr-ox-wash: #efe1e0;        /* faint oxblood tint                  */

  --tlr-slate: #2a2825;          /* colophon ground, fixed              */
  --tlr-slate-ink: #efece4;      /* colophon text, fixed                */
  --tlr-slate-meta: #b9b4a8;     /* colophon meta, fixed                */
  --tlr-slate-rule: #4b4842;     /* colophon rules, fixed               */

  --tlr-serif: "Iowan Old Style", "Charter", "Bitstream Charter", Georgia, "Times New Roman", serif;
  --tlr-text: "Charter", "Bitstream Charter", "Iowan Old Style", Georgia, "Noto Serif", serif;
  --tlr-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;

  --tlr-measure: 41rem;
  --tlr-gutter: 9rem;
  --tlr-wide: 74rem;
  --tlr-pad: clamp(1.1rem, 3vw, 2.4rem);
  --tlr-space: clamp(2.2rem, 4.5vw, 3.8rem);
  --tlr-body: clamp(1.03rem, 0.98rem + 0.25vw, 1.15rem);
  --tlr-lh: 1.62;
  --tlr-rule: 1px solid var(--tlr-grey);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  background: var(--tlr-paper);
  color: var(--tlr-ink);
  font-family: var(--tlr-text);
  font-size: var(--tlr-body);
  line-height: var(--tlr-lh);
  overflow-x: clip;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
}
img, svg, picture { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--tlr-serif);
  font-weight: 600;
  line-height: 1.16;
  margin: 0;
  letter-spacing: -0.008em;
  text-wrap: balance;
}
p, ul, ol, figure, blockquote, table { margin: 0; }
a { color: var(--tlr-ox); text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
a:hover { color: var(--tlr-ox-deep); }
:focus-visible { outline: 3px solid var(--tlr-ox); outline-offset: 3px; }
::selection { background: var(--tlr-ox); color: var(--tlr-paper); }

.tlr-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--tlr-ink); color: var(--tlr-paper);
  font-family: var(--tlr-mono); font-size: 0.85rem;
  padding: 0.7rem 1rem; z-index: 40;
}
.tlr-skip:focus { left: 0.6rem; top: 0.6rem; }

/* The folder: every page lives in it. */
.tlr-folder {
  width: min(100% - 2 * var(--tlr-pad), var(--tlr-wide));
  margin-inline: auto;
}

/* Typed labels: tabs, numbers, dates, crumbs. */
.tlr-tab {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--tlr-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tlr-ox);
  font-variant-numeric: tabular-nums;
}
.tlr-tab::before { content: ""; width: 1.6rem; border-top: 2px solid var(--tlr-ox); flex: none; }
.tlr-tab a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--tlr-grey); }
.tlr-tab a:hover { border-bottom-color: currentColor; }

.tlr-button {
  display: inline-block;
  background: var(--tlr-ox);
  color: var(--tlr-paper);
  font-family: var(--tlr-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.3rem;
  border: 1px solid var(--tlr-ox);
}
.tlr-button:hover { background: var(--tlr-ox-deep); border-color: var(--tlr-ox-deep); color: var(--tlr-paper); }

/* ---------------------------------------------------------------- desk */
.tlr-desk {
  border-top: 5px solid var(--tlr-ox);
  border-bottom: var(--tlr-rule);
  background: var(--tlr-paper);
}
.tlr-desk__row {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 0.6rem 2rem;
  padding-block: 0.85rem;
}
.tlr-wordmark { text-decoration: none; color: var(--tlr-ink); display: block; }
.tlr-wordmark__name {
  display: block;
  font-family: var(--tlr-serif);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.tlr-wordmark__mention {
  display: block;
  font-family: var(--tlr-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tlr-meta);
  margin-top: 0.3rem;
}
.tlr-wordmark:hover .tlr-wordmark__name { color: var(--tlr-ox); }

.tlr-shelf { position: relative; }
.tlr-shelf__toggle { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.tlr-shelf__handle {
  display: inline-block;
  font-family: var(--tlr-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tlr-ink);
  border: 1px solid var(--tlr-grey);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  user-select: none;
}
.tlr-shelf__toggle:focus-visible + .tlr-shelf__handle { outline: 3px solid var(--tlr-ox); outline-offset: 3px; }
.tlr-shelf__toggle:checked + .tlr-shelf__handle { background: var(--tlr-ink); color: var(--tlr-paper); border-color: var(--tlr-ink); }
.tlr-shelf__list {
  display: none;
  list-style: none; margin: 0; padding: 0.6rem 0 0.2rem;
  flex-direction: column;
  gap: 0.15rem;
}
.tlr-shelf__toggle:checked ~ .tlr-shelf__list { display: flex; }
.tlr-shelf__list a {
  display: inline-block;
  font-family: var(--tlr-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--tlr-meta);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.tlr-shelf__list a:hover { color: var(--tlr-ink); border-bottom-color: var(--tlr-grey); }
.tlr-shelf__list a[aria-current] { color: var(--tlr-ink); border-bottom-color: var(--tlr-ox); }
@media (min-width: 56rem) {
  .tlr-shelf__handle { display: none; }
  .tlr-shelf__list, .tlr-shelf__toggle:checked ~ .tlr-shelf__list {
    display: flex; flex-direction: row; flex-wrap: wrap;
    gap: 0.2rem 1.25rem; padding: 0;
  }
}

/* --------------------------------------------------------------- cover */
.tlr-cover {
  display: grid;
  gap: 1.6rem 3rem;
  padding-block: clamp(1.4rem, 3vw, 2.4rem) clamp(1.2rem, 2.6vw, 2rem);
  border-bottom: var(--tlr-rule);
}
@media (min-width: 56rem) {
  .tlr-cover { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: center; }
}
.tlr-cover__text > * + * { margin-top: 0.95rem; }
.tlr-cover h1 {
  font-size: clamp(2.1rem, 1.35rem + 2.7vw, 3.6rem);
  max-width: 16ch;
}
.tlr-cover__deck {
  font-family: var(--tlr-serif);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  line-height: 1.35;
  color: var(--tlr-ink);
  max-width: 30ch;
}
.tlr-cover__lead { color: var(--tlr-meta); max-width: 52ch; }
.tlr-cover__quick {
  list-style: none; padding: 0.9rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem;
  font-family: var(--tlr-mono); font-size: 0.74rem; letter-spacing: 0.04em;
  border-top: var(--tlr-rule);
}
.tlr-cover__quick li:first-child { color: var(--tlr-meta); text-transform: uppercase; letter-spacing: 0.12em; }
.tlr-cover__quick a { color: var(--tlr-ink); text-decoration: none; border-bottom: 1px solid var(--tlr-grey); }
.tlr-cover__quick a:hover { color: var(--tlr-ox); border-bottom-color: var(--tlr-ox); }
.tlr-cover__photo { margin: 0; }
.tlr-cover__photo img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid var(--tlr-grey);
  padding: 0.35rem; background: var(--tlr-paper-deep);
}
.tlr-cover__photo figcaption,
.tlr-plate figcaption,
.tlr-method__plate figcaption {
  font-family: var(--tlr-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--tlr-meta);
  margin-top: 0.55rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--tlr-ox);
}

/* ------------------------------------------------------------- cabinet */
.tlr-cabinet { padding-top: var(--tlr-space); }
.tlr-cabinet__head, .tlr-file__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.4rem 2rem;
  padding-bottom: 0.7rem;
  margin-bottom: 1.4rem;
  border-bottom: 2px solid var(--tlr-ink);
}
.tlr-cabinet__head h2, .tlr-file__head h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); }
.tlr-cabinet__note, .tlr-file__note {
  font-family: var(--tlr-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--tlr-meta);
  max-width: 62ch;
}
.tlr-cabinet__row {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.6rem;
}
@media (min-width: 40rem) { .tlr-cabinet__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tlr-tile { position: relative; }
.tlr-tile__frame {
  position: relative;
  border: 1px solid var(--tlr-grey);
  background: var(--tlr-paper-deep);
  overflow: hidden;
}
.tlr-tile__frame img { width: 100%; aspect-ratio: 7 / 4; object-fit: cover; }
.tlr-tile__no {
  position: absolute; left: 0; top: 0;
  background: var(--tlr-paper);
  color: var(--tlr-ox);
  font-family: var(--tlr-mono);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  padding: 0.4rem 0.7rem;
  border-right: 1px solid var(--tlr-grey);
  border-bottom: 1px solid var(--tlr-grey);
}
.tlr-tile__text { padding-top: 0.85rem; }
.tlr-tile h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.tlr-tile h3 a { color: var(--tlr-ink); text-decoration: none; border-bottom: 2px solid transparent; }
.tlr-tile h3 a:hover { color: var(--tlr-ox); border-bottom-color: var(--tlr-ox); }
.tlr-tile p { color: var(--tlr-meta); font-size: 0.96rem; line-height: 1.5; }

/* ---------------------------------------------------------------- file */
.tlr-file {
  margin-top: var(--tlr-space);
  border-top: 3px double var(--tlr-ox);
  padding-top: 1.3rem;
}
.tlr-file__head { border-bottom: var(--tlr-rule); }
.tlr-file__no {
  display: block;
  font-family: var(--tlr-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tlr-ox);
  margin-bottom: 0.45rem;
}
.tlr-slips { list-style: none; margin: 0; padding: 0; }
.tlr-slip {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  grid-template-areas: "meta meta" "thumb text";
  gap: 0.5rem 1rem;
  padding-block: 1.1rem;
  border-bottom: var(--tlr-rule);
}
.tlr-slip:last-child { border-bottom: 0; }
.tlr-slip__meta {
  grid-area: meta;
  font-family: var(--tlr-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--tlr-meta);
  font-variant-numeric: tabular-nums;
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem;
}
.tlr-slip__kind { color: var(--tlr-ox); text-transform: uppercase; }
.tlr-slip__thumb { grid-area: thumb; display: block; border: 1px solid var(--tlr-grey); background: var(--tlr-paper-deep); }
.tlr-slip__thumb img { width: 100%; aspect-ratio: 7 / 4; object-fit: cover; }
.tlr-slip__thumb:hover { border-color: var(--tlr-ox); }
.tlr-slip__text { grid-area: text; min-width: 0; }
.tlr-slip h3 { font-size: clamp(1.12rem, 1rem + 0.5vw, 1.34rem); margin-bottom: 0.4rem; }
.tlr-slip h3 a { color: var(--tlr-ink); text-decoration: none; }
.tlr-slip h3 a:hover { color: var(--tlr-ox); text-decoration: underline; }
.tlr-slip__text p { color: var(--tlr-meta); font-size: 0.97rem; line-height: 1.52; max-width: 60ch; }
@media (min-width: 64rem) {
  .tlr-slip {
    grid-template-columns: var(--tlr-gutter) minmax(0, 30%) minmax(0, 1fr);
    grid-template-areas: "meta thumb text";
    gap: 0 1.6rem;
    padding-block: 1.4rem;
  }
  .tlr-slip__meta { flex-direction: column; gap: 0.3rem; padding-top: 0.2rem; padding-right: 1rem; }
}

/* -------------------------------------------------------------- method */
.tlr-method {
  margin-top: var(--tlr-space);
  padding-block: clamp(1.8rem, 4vw, 3rem);
  background: var(--tlr-paper-deep);
  box-shadow: 0 0 0 100vmax var(--tlr-paper-deep);
  clip-path: inset(0 -100vmax);
  display: grid; gap: 2rem 3rem;
}
@media (min-width: 56rem) { .tlr-method { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.tlr-method__text h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin: 0.7rem 0 1.2rem; }
.tlr-method__steps { list-style: none; margin: 0; padding: 0; counter-reset: tlr-step; }
.tlr-method__steps li {
  position: relative;
  padding: 0.85rem 0 0.85rem 3.1rem;
  border-top: 1px solid var(--tlr-grey);
  counter-increment: tlr-step;
  max-width: 58ch;
}
.tlr-method__steps li::before {
  content: counter(tlr-step, decimal-leading-zero);
  position: absolute; left: 0; top: 0.95rem;
  font-family: var(--tlr-mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--tlr-ox);
}
.tlr-method__note {
  margin-top: 1rem;
  font-family: var(--tlr-mono);
  font-size: 0.74rem;
  color: var(--tlr-meta);
  padding-top: 0.8rem;
  border-top: 2px solid var(--tlr-ox);
  max-width: 52ch;
}
.tlr-method__plates { display: grid; gap: 1.2rem; }
@media (min-width: 40rem) { .tlr-method__plates { grid-template-columns: 1fr 1fr; } }
@media (min-width: 56rem) { .tlr-method__plates { grid-template-columns: 1fr; } }
.tlr-method__plate { margin: 0; }
.tlr-method__plate img { width: 100%; aspect-ratio: 7 / 4; object-fit: cover; border: 1px solid var(--tlr-grey); background: var(--tlr-paper); padding: 0.3rem; }

/* -------------------------------------------------------------- pinned */
.tlr-pinned {
  margin-top: var(--tlr-space);
  border-top: 3px double var(--tlr-ox);
  padding-top: 1.4rem;
  display: grid; gap: 1.4rem 3rem;
}
@media (min-width: 56rem) { .tlr-pinned { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.tlr-pinned h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); margin: 0.7rem 0 0.8rem; }
.tlr-pinned__lead { color: var(--tlr-meta); max-width: 40ch; }
.tlr-pinned__list { list-style: none; margin: 0; padding: 0; border-top: var(--tlr-rule); }
.tlr-pinned__list li { padding: 0.85rem 0; border-bottom: var(--tlr-rule); }
.tlr-pinned__list a { font-family: var(--tlr-serif); font-size: 1.12rem; color: var(--tlr-ink); text-decoration: none; }
.tlr-pinned__list a:hover { color: var(--tlr-ox); text-decoration: underline; }
.tlr-pinned__note { display: block; color: var(--tlr-meta); font-size: 0.94rem; margin-top: 0.25rem; }

/* ------------------------------------------------------------- reading */
.tlr-reading {
  width: min(100% - 2 * var(--tlr-pad), 52rem);
  margin-inline: auto;
  position: relative;
}
@media (min-width: 64rem) {
  .tlr-reading {
    width: min(100% - 4rem, calc(var(--tlr-measure) + var(--tlr-gutter)));
    padding-left: var(--tlr-gutter);
  }
}
.tlr-crumbs { padding: 0.9rem 0 1.4rem; }
.tlr-crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.55rem;
  font-family: var(--tlr-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--tlr-meta);
}
.tlr-crumbs li + li::before { content: "/"; margin-right: 0.55rem; color: var(--tlr-grey); }
.tlr-crumbs a { color: var(--tlr-meta); text-decoration: none; }
.tlr-crumbs a:hover { color: var(--tlr-ox); text-decoration: underline; }
.tlr-crumbs [aria-current] { color: var(--tlr-ink); }

.tlr-head > * + * { margin-top: 0.9rem; }
.tlr-head h1 { font-size: clamp(1.95rem, 1.35rem + 2.2vw, 3rem); }
.tlr-head__chapo {
  font-family: var(--tlr-serif);
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.32rem);
  line-height: 1.42;
  color: var(--tlr-meta);
}
.tlr-head__line {
  font-family: var(--tlr-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--tlr-meta);
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem;
  padding-top: 0.9rem;
  border-top: var(--tlr-rule);
}
.tlr-head__line span::after { content: "·"; margin-left: 0.9rem; color: var(--tlr-grey); }
.tlr-head__line span:last-child::after { content: ""; margin: 0; }
.tlr-head__line a { color: var(--tlr-ox); text-decoration: none; }
.tlr-head__line a:hover { text-decoration: underline; }

.tlr-plate { margin: 1.6rem 0 0; }
@media (min-width: 64rem) { .tlr-plate { margin-left: calc(-1 * var(--tlr-gutter)); } }
.tlr-plate img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid var(--tlr-grey);
  padding: 0.35rem; background: var(--tlr-paper-deep);
}

/* The sheet: the body text, its rules numbered in the gutter. */
.tlr-sheet { counter-reset: tlr-rule; padding-top: 1.6rem; }
.tlr-sheet p { margin-bottom: 1.15rem; max-width: var(--tlr-measure); }
.tlr-sheet ul, .tlr-sheet ol { margin: 0 0 1.4rem; padding-left: 1.3rem; max-width: var(--tlr-measure); }
.tlr-sheet li { margin-bottom: 0.5rem; }
.tlr-sheet li::marker { color: var(--tlr-ox); }
.tlr-sheet a { color: var(--tlr-ox); text-decoration: underline; }
.tlr-sheet a:hover { color: var(--tlr-ox-deep); }
.tlr-sheet > p:first-child::first-letter {
  float: left;
  font-family: var(--tlr-serif);
  font-size: 3.4em;
  line-height: 0.8;
  padding: 0.08em 0.12em 0 0;
  color: var(--tlr-ox);
}
.tlr-sheet h2 {
  position: relative;
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.62rem);
  margin: 2.4rem 0 0.9rem;
  padding-top: 1rem;
  border-top: 2px solid var(--tlr-ink);
  max-width: var(--tlr-measure);
  counter-increment: tlr-rule;
}
.tlr-sheet h2::before {
  content: counter(tlr-rule, decimal-leading-zero);
  display: block;
  font-family: var(--tlr-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  color: var(--tlr-ox);
  margin-bottom: 0.45rem;
}
@media (min-width: 64rem) {
  .tlr-sheet h2::before {
    position: absolute;
    left: calc(-1 * var(--tlr-gutter));
    top: 1.3rem;
    width: calc(var(--tlr-gutter) - 1.6rem);
    text-align: right;
    margin: 0;
  }
}
.tlr-sheet h3 {
  font-family: var(--tlr-mono);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 1.8rem 0 0.7rem;
  max-width: var(--tlr-measure);
}
/* The reference card at the end of a guide: the paragraphs that open on a bold name. */
.tlr-sheet p:has(> strong:first-child),
.tlr-sheet p:has(> strong:first-child) ~ p {
  background: var(--tlr-paper-deep);
  padding: 0 1.1rem 1rem;
  margin-bottom: 0;
}
.tlr-sheet p:has(> strong:first-child) {
  margin-top: 2.4rem;
  padding-top: 1rem;
  border-top: 3px double var(--tlr-ox);
}
.tlr-sheet p:has(> strong:first-child) > strong { font-family: var(--tlr-serif); color: var(--tlr-ox); }
.tlr-sheet p:has(> strong:first-child) ~ p:last-child { padding-bottom: 1.1rem; }

.tlr-note {
  margin-top: 1.8rem;
  background: var(--tlr-paper-deep);
  border-left: 4px solid var(--tlr-ox);
  padding: 1rem 1.2rem;
  max-width: var(--tlr-measure);
}
.tlr-note h2 { font-family: var(--tlr-mono); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tlr-ox); margin-bottom: 0.5rem; }
.tlr-note p { margin: 0; }
.tlr-note p + p { margin-top: 0.4rem; }
.tlr-note a { font-family: var(--tlr-mono); font-size: 0.95em; }

.tlr-contents { margin-top: 2.6rem; padding-top: 1.2rem; border-top: var(--tlr-rule); max-width: var(--tlr-measure); }
.tlr-contents h2, .tlr-onward h2 {
  font-family: var(--tlr-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tlr-meta);
  margin-bottom: 0.9rem;
}
.tlr-contents ol { list-style: none; margin: 0; padding: 0; counter-reset: tlr-toc; }
.tlr-contents li { counter-increment: tlr-toc; padding: 0.35rem 0; border-bottom: 1px dotted var(--tlr-grey); }
.tlr-contents a {
  display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline;
  color: var(--tlr-ink); text-decoration: none; font-family: var(--tlr-serif); font-size: 0.98rem;
}
.tlr-contents a::before { content: counter(tlr-toc, decimal-leading-zero); font-family: var(--tlr-mono); font-size: 0.74rem; letter-spacing: 0.1em; color: var(--tlr-ox); }
.tlr-contents a:hover { color: var(--tlr-ox); }

.tlr-onward { margin-top: 2.8rem; padding-top: 1.2rem; border-top: 3px double var(--tlr-ox); }
.tlr-onward ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
@media (min-width: 40rem) { .tlr-onward ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tlr-onward__thumb { display: block; border: 1px solid var(--tlr-grey); background: var(--tlr-paper-deep); margin-bottom: 0.6rem; }
.tlr-onward__thumb img { width: 100%; aspect-ratio: 7 / 4; object-fit: cover; }
.tlr-onward__thumb:hover { border-color: var(--tlr-ox); }
.tlr-onward__kind { display: block; font-family: var(--tlr-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tlr-ox); margin-bottom: 0.3rem; }
.tlr-onward h3 { font-size: 1.08rem; }
.tlr-onward h3 a { color: var(--tlr-ink); text-decoration: none; }
.tlr-onward h3 a:hover { color: var(--tlr-ox); text-decoration: underline; }
.tlr-onward__more { margin-top: 1.2rem; font-family: var(--tlr-mono); font-size: 0.76rem; }

/* A file inside the reading column keeps the gutter for the meta. */
.tlr-reading .tlr-file { margin-top: 2.8rem; }
@media (min-width: 64rem) {
  .tlr-reading .tlr-file { margin-left: calc(-1 * var(--tlr-gutter)); }
}

/* ------------------------------------------------------------ colophon */
.tlr-colophon {
  margin-top: calc(var(--tlr-space) * 1.4);
  background: var(--tlr-slate);
  color: var(--tlr-slate-ink);
  border-top: 5px solid var(--tlr-ox);
  padding: 2.4rem 0 2rem;
  font-size: 0.95rem;
}
.tlr-colophon__grid { display: grid; gap: 1.8rem 3rem; }
@media (min-width: 56rem) { .tlr-colophon__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); } }
.tlr-colophon h2 {
  font-family: var(--tlr-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tlr-slate-meta);
  margin-bottom: 0.8rem;
}
.tlr-colophon__name { font-family: var(--tlr-serif); font-size: 1.35rem; color: var(--tlr-slate-ink); margin-bottom: 0.4rem; }
.tlr-colophon__col p { color: var(--tlr-slate-meta); margin-bottom: 0.7rem; max-width: 36ch; }
.tlr-colophon__sign { font-family: var(--tlr-serif); font-style: italic; color: var(--tlr-slate-ink); }
.tlr-colophon ul { list-style: none; margin: 0; padding: 0; }
.tlr-colophon li { padding: 0.28rem 0; }
.tlr-colophon a { color: var(--tlr-slate-ink); text-decoration: none; border-bottom: 1px solid var(--tlr-slate-rule); }
.tlr-colophon a:hover { color: #fff; border-bottom-color: var(--tlr-slate-ink); }
.tlr-colophon__foot {
  margin-top: 1.8rem; padding-top: 1rem;
  border-top: 1px solid var(--tlr-slate-rule);
  font-family: var(--tlr-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--tlr-slate-meta);
}

/* ---------------------------------------------------------------- print */
@media print {
  .tlr-shelf, .tlr-skip, .tlr-onward, .tlr-colophon { display: none; }
  .tlr-reading { width: auto; padding-left: 0; }
  .tlr-sheet h2::before { position: static; text-align: left; }
  a { color: inherit; text-decoration: none; }
}