/* =========================================================================
   THE SASH AND FRAME LEDGER (handhdoubleglazing.co.uk)
   Design system "workshop ledger", prefix ldg-. Rhabillage of the skeleton
   guide-sommaire (sticky index at left, numbered sections at right), with a
   portal home: cover with the photo beside the h1, three numbered heading
   tiles, the register of restored addresses, one band per heading with its
   entries, the read-first list, the doorstep strip, the contact band.
   Vocabulary: shell (width), masthead (site header), mark (wordmark), tabs
   (navigation), cover (home hero), tally (three figures), band (home
   section), tile (heading tile), register (restored addresses), stamp
   (address in monospace), card (entry card), strip (photo row), crumbs
   (breadcrumb), entry (page head), plate (lead photo), desk (two columns),
   margin (left column), index (sticky table of contents), page (reading
   column), line (numbered section), onward (continue reading), shelf (entries
   of a section), foot (footer). System fonts only, no external request.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- palette: putty grey, oak, safety orange -------------------------- */
  --ldg-ground: #e4e0d7;        /* putty: page ground                          */
  --ldg-ground-deep: #d5cfc2;   /* deeper putty: panels, index, alternate bands */
  --ldg-paper: #f5f2ec;         /* card faces, reading column, figure plates   */
  --ldg-ink: #1e1811;           /* text                                       */
  --ldg-ink-soft: #5d544a;      /* meta, descriptions, captions                */
  --ldg-rule: #c3bbac;          /* hairlines                                   */
  --ldg-rule-strong: #8b7f6e;   /* heavier rules                               */
  --ldg-oak: #5a3d22;           /* oak: emphasis, borders, secondary buttons   */
  --ldg-oak-dark: #33220f;      /* oak dark: the register band, the footer     */
  --ldg-oak-light: #a67c52;     /* oak light: rules on oak, small labels       */
  --ldg-on-oak: #f1e9dc;        /* text on oak bands, FIXED in both schemes    */
  --ldg-on-oak-soft: #cbbda6;   /* soft text on oak bands, FIXED               */
  --ldg-oak-rule: #5c4630;      /* hairlines on oak bands, FIXED               */
  --ldg-orange: #ee6a12;        /* safety orange: numerals, rules, buttons     */
  --ldg-orange-ink: #a63d05;    /* orange for text links on putty (4.5:1)      */
  --ldg-orange-soft: #f6c7a3;   /* tint for selection and marks                */
  --ldg-on-orange: #1e1811;     /* text on orange                              */

  /* ---- type: condensed grotesque for headings, serif for reading --------- */
  --ldg-head: "Avenir Next Condensed", "Helvetica Neue Condensed", "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", "DejaVu Sans Condensed", Bahnschrift, "Franklin Gothic Medium", "Segoe UI", sans-serif;
  --ldg-text: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", Georgia, serif;
  --ldg-mono: "Andale Mono", Menlo, "Cascadia Mono", Consolas, "Courier New", monospace;

  --ldg-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
  --ldg-leading: 1.62;
  --ldg-h1: clamp(2.3rem, 1.4rem + 3vw, 3.7rem);
  --ldg-h2: clamp(1.6rem, 1.25rem + 1.3vw, 2.5rem);
  --ldg-h3: clamp(1.18rem, 1.06rem + 0.5vw, 1.5rem);

  /* ---- rhythm ------------------------------------------------------------ */
  --ldg-measure: 66ch;
  --ldg-max: 78rem;
  --ldg-gutter: clamp(1rem, 4vw, 2.8rem);
  --ldg-step: clamp(1.4rem, 3.2vw, 2.6rem);
  --ldg-margin-w: 15.5rem;
  --ldg-hair: 1px;
  --ldg-thick: 3px;
}

/* ---- 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(--ldg-ground);
  color: var(--ldg-ink);
  font-family: var(--ldg-text);
  font-size: var(--ldg-size);
  line-height: var(--ldg-leading);
  overflow-wrap: break-word;
}
img, svg, picture { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--ldg-head);
  font-stretch: condensed;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--ldg-h1); }
h2 { font-size: var(--ldg-h2); }
h3 { font-size: var(--ldg-h3); }
p, ul, ol, dl, figure, table, blockquote { margin: 0 0 1.15em; }
a { color: var(--ldg-orange-ink); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--ldg-oak); }
:focus-visible { outline: 3px solid var(--ldg-orange); outline-offset: 3px; }
::selection { background: var(--ldg-orange-soft); color: var(--ldg-ink); }
strong { font-weight: 700; }
hr { border: 0; border-top: var(--ldg-hair) solid var(--ldg-rule); margin: var(--ldg-step) 0; }
.ldg-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ldg-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ldg-orange); color: var(--ldg-on-orange);
  font-family: var(--ldg-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.7rem 1.1rem; z-index: 60; text-decoration: none;
}
.ldg-skip:focus { left: 0.6rem; top: 0.6rem; }
.ldg-shell { width: 100%; max-width: var(--ldg-max); margin-inline: auto; padding-inline: var(--ldg-gutter); }

/* the small capital label used everywhere: kickers, column titles, tags */
.ldg-kicker {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--ldg-head); font-stretch: condensed;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ldg-orange-ink); margin: 0 0 0.55rem;
}
.ldg-kicker::before { content: ""; width: 1.6rem; height: var(--ldg-thick); background: var(--ldg-orange); flex: none; }
.ldg-kicker--plain::before { display: none; }

/* ---- masthead: the site header ------------------------------------------ */
.ldg-masthead {
  background: var(--ldg-paper);
  border-bottom: var(--ldg-thick) solid var(--ldg-oak);
  position: relative;
}
.ldg-masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--ldg-orange);
}
.ldg-masthead__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.6rem 2rem; padding-block: 0.85rem;
}
.ldg-mark { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--ldg-ink); }
.ldg-mark svg { width: 2.6rem; height: 2.6rem; flex: none; }
.ldg-mark__name {
  display: block; font-family: var(--ldg-head); font-stretch: condensed; font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem); letter-spacing: -0.01em; line-height: 1;
}
.ldg-mark__line {
  display: block; font-family: var(--ldg-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ldg-ink-soft); margin-top: 0.3rem;
}
.ldg-tabs { position: relative; }
.ldg-tabs__toggle { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ldg-tabs__handle {
  display: none; cursor: pointer; font-family: var(--ldg-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.85rem; border: 2px solid var(--ldg-oak); padding: 0.5rem 0.9rem; min-height: 44px; align-items: center; gap: 0.5rem;
}
.ldg-tabs__handle::after { content: "+"; color: var(--ldg-orange); font-size: 1.1rem; }
.ldg-tabs__toggle:checked + .ldg-tabs__handle::after { content: "\2212"; }
.ldg-tabs__toggle:focus-visible + .ldg-tabs__handle { outline: 3px solid var(--ldg-orange); outline-offset: 3px; }
.ldg-tabs ul { display: flex; flex-wrap: wrap; gap: 0.2rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.ldg-tabs a {
  display: inline-block; font-family: var(--ldg-head); font-stretch: condensed; font-weight: 600;
  font-size: 0.98rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ldg-ink);
  text-decoration: none; padding: 0.5rem 0; border-bottom: var(--ldg-thick) solid transparent;
}
.ldg-tabs a:hover { border-bottom-color: var(--ldg-oak-light); color: var(--ldg-oak); }
.ldg-tabs a[aria-current="page"] { border-bottom-color: var(--ldg-orange); color: var(--ldg-ink); }

/* ---- cover: the home first screen ---------------------------------------- */
.ldg-cover {
  border-bottom: var(--ldg-hair) solid var(--ldg-rule);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2.2rem - 1px), rgba(139, 127, 110, 0.22) calc(2.2rem - 1px), rgba(139, 127, 110, 0.22) 2.2rem);
}
.ldg-cover__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  padding-block: clamp(0.9rem, 1.8vw, 1.3rem) clamp(0.8rem, 1.6vw, 1.1rem);
}
.ldg-cover h1 { max-width: 15ch; margin-bottom: 0.7rem; }
.ldg-cover__deck { font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem); max-width: 46ch; color: var(--ldg-ink-soft); margin-bottom: 0.9rem; }
.ldg-cover__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.4rem; margin-bottom: 0.9rem; }
.ldg-button {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 46px;
  background: var(--ldg-orange); color: var(--ldg-on-orange);
  font-family: var(--ldg-head); font-stretch: condensed; font-weight: 700; font-size: 1rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  padding: 0.6rem 1.25rem; border: 2px solid var(--ldg-orange);
}
.ldg-button::after { content: "\2193"; }
.ldg-button:hover { background: var(--ldg-oak-dark); border-color: var(--ldg-oak-dark); color: var(--ldg-on-oak); }
.ldg-cover__alt { font-family: var(--ldg-head); font-stretch: condensed; font-weight: 600; letter-spacing: 0.02em; }
.ldg-tally {
  display: flex; flex-wrap: wrap; gap: 0.4rem 2.2rem; list-style: none; margin: 0; padding: 0.8rem 0 0;
  border-top: 2px solid var(--ldg-oak);
}
.ldg-tally li { display: flex; align-items: baseline; gap: 0.5rem; }
.ldg-tally b {
  font-family: var(--ldg-head); font-stretch: condensed; font-weight: 700; font-size: 1.45rem; line-height: 1;
  color: var(--ldg-orange-ink); font-variant-numeric: tabular-nums;
}
.ldg-tally span { font-family: var(--ldg-head); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ldg-ink-soft); }
.ldg-cover__plate { margin: 0; min-width: 0; }
.ldg-cover__plate img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-top: 6px solid var(--ldg-orange); background: var(--ldg-ground-deep);
}
.ldg-cover__plate figcaption {
  font-family: var(--ldg-mono); font-size: 0.7rem; line-height: 1.5; letter-spacing: 0.02em;
  color: var(--ldg-ink-soft); background: var(--ldg-paper); padding: 0.55rem 0.8rem;
  border-left: var(--ldg-thick) solid var(--ldg-oak);
}

/* ---- bands: the home sections ------------------------------------------ */
.ldg-band { padding-block: clamp(1.4rem, 3vw, 2.4rem); border-bottom: var(--ldg-hair) solid var(--ldg-rule); }
.ldg-band--putty { background: var(--ldg-ground-deep); }
.ldg-band__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: end; gap: 0.5rem 2.5rem;
  border-bottom: 2px solid var(--ldg-oak); padding-bottom: 0.55rem; margin-bottom: clamp(0.9rem, 2vw, 1.3rem);
}
.ldg-band__note { margin: 0; color: var(--ldg-ink-soft); font-size: 0.95rem; text-align: right; }
.ldg-band__note a { white-space: nowrap; }

/* oak bands: colours FIXED on purpose, whatever the colour scheme */
.ldg-band--oak { background: var(--ldg-oak-dark); color: var(--ldg-on-oak); border-bottom: 0; }
.ldg-band--oak .ldg-kicker { color: var(--ldg-orange); }
.ldg-band--oak .ldg-band__head { border-bottom-color: var(--ldg-oak-rule); }
.ldg-band--oak .ldg-band__note { color: var(--ldg-on-oak-soft); }
.ldg-band--oak a { color: var(--ldg-on-oak); }
.ldg-band--oak a:hover { color: var(--ldg-orange); }
.ldg-band--oak h2, .ldg-band--oak h3 { color: var(--ldg-on-oak); }

/* heading tiles: three numbered photos */
.ldg-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.6rem); list-style: none; margin: 0; padding: 0; }
.ldg-tile { position: relative; background: var(--ldg-paper); border-bottom: var(--ldg-thick) solid var(--ldg-oak); }
.ldg-tile__view { position: relative; }
.ldg-tile__view img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ldg-tile__no {
  position: absolute; left: 0; bottom: 0; background: var(--ldg-orange); color: var(--ldg-on-orange);
  font-family: var(--ldg-head); font-stretch: condensed; font-weight: 700; font-size: 1.6rem; line-height: 1;
  padding: 0.45rem 0.7rem 0.35rem; font-variant-numeric: tabular-nums;
}
.ldg-tile__body { padding: 0.9rem 1rem 1.1rem; }
.ldg-tile h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); margin-bottom: 0.4rem; }
.ldg-tile h3 a { color: var(--ldg-ink); text-decoration: none; }
.ldg-tile h3 a::after { content: ""; position: absolute; inset: 0; }
.ldg-tile:hover { border-bottom-color: var(--ldg-orange); }
.ldg-tile:hover h3 a { color: var(--ldg-oak); }
.ldg-tile p { margin: 0; font-size: 0.95rem; color: var(--ldg-ink-soft); }

/* register of restored addresses */
.ldg-register { list-style: none; margin: 0; padding: 0; border-top: var(--ldg-hair) solid var(--ldg-oak-rule); }
.ldg-register li {
  display: grid; grid-template-columns: 15rem minmax(0, 1fr) 11rem; gap: 0.3rem 1.5rem; align-items: baseline;
  padding: 0.85rem 0; border-bottom: var(--ldg-hair) solid var(--ldg-oak-rule);
}
.ldg-stamp {
  font-family: var(--ldg-mono); font-size: 0.82rem; letter-spacing: 0.02em; color: var(--ldg-orange);
  border: 1px solid var(--ldg-oak-rule); padding: 0.2rem 0.5rem; display: inline-block; max-width: 100%; overflow-wrap: anywhere;
}
.ldg-register h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); font-weight: 600; }
.ldg-register h3 a { text-decoration: none; }
.ldg-register h3 a:hover { text-decoration: underline; }
.ldg-register__where { font-family: var(--ldg-head); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ldg-on-oak-soft); text-align: right; }

/* entry cards, one band per heading */
.ldg-slips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.8rem) clamp(0.9rem, 2vw, 1.6rem); list-style: none; margin: 0; padding: 0; }
.ldg-slip { position: relative; background: var(--ldg-paper); border-top: 2px solid var(--ldg-oak); display: flex; flex-direction: column; }
.ldg-slip img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ldg-slip__body { padding: 0.8rem 0.95rem 1.05rem; display: flex; flex-direction: column; gap: 0.35rem; }
.ldg-slip__tag { font-family: var(--ldg-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ldg-orange-ink); margin: 0; }
.ldg-slip h3 { font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem); }
.ldg-slip h3 a { color: var(--ldg-ink); text-decoration: none; }
.ldg-slip h3 a::after { content: ""; position: absolute; inset: 0; }
.ldg-slip:hover { border-top-color: var(--ldg-orange); }
.ldg-slip:hover h3 a { color: var(--ldg-oak); }
.ldg-slip p:last-child { margin: 0; font-size: 0.93rem; color: var(--ldg-ink-soft); }

/* read-first list */
.ldg-first { list-style: none; margin: 0; padding: 0; counter-reset: first; border-top: 2px solid var(--ldg-oak); }
.ldg-first li {
  counter-increment: first; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0.2rem 1rem;
  padding: 0.95rem 0; border-bottom: var(--ldg-hair) solid var(--ldg-rule-strong);
}
.ldg-first li::before {
  content: counter(first, decimal-leading-zero); grid-row: 1 / span 2;
  font-family: var(--ldg-head); font-stretch: condensed; font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--ldg-orange-ink);
  font-variant-numeric: tabular-nums;
}
.ldg-first h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem); }
.ldg-first h3 a { text-decoration: none; color: var(--ldg-ink); }
.ldg-first h3 a:hover { color: var(--ldg-orange-ink); text-decoration: underline; }
.ldg-first p { margin: 0; color: var(--ldg-ink-soft); font-size: 0.95rem; max-width: 70ch; }

/* the doorstep strip */
.ldg-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.8rem; list-style: none; margin: 0; padding: 0; }
.ldg-strip figure { margin: 0; background: var(--ldg-paper); }
.ldg-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ldg-strip figcaption { font-size: 0.8rem; line-height: 1.45; color: var(--ldg-ink-soft); padding: 0.5rem 0.65rem 0.65rem; border-top: 2px solid var(--ldg-oak-light); }

/* the contact band */
.ldg-contact { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(1.2rem, 3vw, 3rem); align-items: center; }
.ldg-contact img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-top: 6px solid var(--ldg-orange); }
.ldg-contact h2 { margin-bottom: 0.6rem; }
.ldg-contact p { max-width: 56ch; }
.ldg-address {
  display: inline-block; font-family: var(--ldg-mono); font-size: 1.05rem; letter-spacing: 0.01em;
  background: var(--ldg-paper); border: 2px solid var(--ldg-oak); padding: 0.55rem 0.9rem; margin: 0.3rem 0 1rem; text-decoration: none; color: var(--ldg-ink);
}
.ldg-address:hover { border-color: var(--ldg-orange); color: var(--ldg-orange-ink); }

/* ---- inner pages: crumbs, entry head, plate ------------------------------ */
.ldg-crumbs { padding-block: 0.9rem 0; }
.ldg-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; list-style: none; margin: 0; padding: 0; font-family: var(--ldg-mono); font-size: 0.74rem; color: var(--ldg-ink-soft); }
.ldg-crumbs li + li::before { content: "/"; margin-right: 0.6rem; color: var(--ldg-rule-strong); }
.ldg-crumbs a { color: var(--ldg-ink-soft); text-decoration: none; }
.ldg-crumbs a:hover { color: var(--ldg-orange-ink); text-decoration: underline; }
.ldg-crumbs [aria-current="page"] { color: var(--ldg-ink); }

.ldg-entry { padding-block: clamp(1.4rem, 3.5vw, 2.6rem) clamp(1rem, 2.4vw, 1.6rem); }
.ldg-entry h1 { max-width: 20ch; margin-bottom: 0.8rem; }
.ldg-entry__lead { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem); color: var(--ldg-ink-soft); max-width: var(--ldg-measure); margin-bottom: 0.9rem; }
.ldg-meta {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; list-style: none; margin: 0; padding: 0.7rem 0 0;
  border-top: 2px solid var(--ldg-oak); font-family: var(--ldg-head); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ldg-ink-soft);
  max-width: 60rem;
}
.ldg-meta li { display: flex; align-items: center; gap: 0.45rem; }
.ldg-meta li::before { content: ""; width: 0.5rem; height: 0.5rem; background: var(--ldg-orange); flex: none; }
.ldg-meta a { color: var(--ldg-ink); }
.ldg-meta .ldg-stamp { color: var(--ldg-orange-ink); border-color: var(--ldg-rule-strong); text-transform: none; letter-spacing: 0.02em; }

.ldg-plate { margin: 0 0 clamp(1.2rem, 3vw, 2.2rem); }
.ldg-plate img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-top: 6px solid var(--ldg-orange); background: var(--ldg-ground-deep); }
.ldg-plate figcaption {
  font-family: var(--ldg-mono); font-size: 0.7rem; line-height: 1.5; color: var(--ldg-ink-soft);
  background: var(--ldg-paper); padding: 0.5rem 0.8rem; border-left: var(--ldg-thick) solid var(--ldg-oak);
}

/* ---- the desk: sticky index at left, numbered page at right -------------- */
.ldg-desk {
  display: grid; grid-template-columns: var(--ldg-margin-w) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.6rem);
  /* NOT align-items: start, the left column must stretch or the sticky index has no run */
  align-items: stretch;
  padding-block: 0 clamp(2.4rem, 6vw, 4.5rem);
}
.ldg-margin { min-width: 0; align-self: stretch; }
.ldg-index {
  position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto;
  background: var(--ldg-ground-deep); border-top: var(--ldg-thick) solid var(--ldg-orange);
  padding: 0.9rem 1rem 1.1rem;
}
.ldg-index__key {
  font-family: var(--ldg-head); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
}
.ldg-index__key::-webkit-details-marker { display: none; }
.ldg-index__key::after { content: "\2212"; color: var(--ldg-orange-ink); font-size: 1.1rem; }
.ldg-index:not([open]) .ldg-index__key::after { content: "+"; }
.ldg-index ol { list-style: none; margin: 0.7rem 0 0; padding: 0; counter-reset: row; }
.ldg-index li { border-top: var(--ldg-hair) solid var(--ldg-rule-strong); }
.ldg-index li:first-child { border-top: 0; }
.ldg-index a {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.4rem; align-items: baseline;
  padding: 0.5rem 0.3rem; color: var(--ldg-ink); text-decoration: none; font-size: 0.9rem; line-height: 1.35;
  font-family: var(--ldg-head); font-stretch: condensed; font-weight: 600; letter-spacing: 0.01em;
  border-left: var(--ldg-thick) solid transparent; margin-left: -1rem; padding-left: 0.75rem;
}
.ldg-index a::before { counter-increment: row; content: counter(row, decimal-leading-zero); font-family: var(--ldg-mono); font-size: 0.75rem; color: var(--ldg-orange-ink); }
.ldg-index a:hover { background: var(--ldg-paper); color: var(--ldg-orange-ink); }
.ldg-index a[aria-current="true"] { background: var(--ldg-paper); border-left-color: var(--ldg-orange); }
.ldg-note {
  margin: 1rem 0 0; padding: 0.85rem 0.95rem; font-size: 0.88rem; color: var(--ldg-ink-soft);
  background: var(--ldg-paper); border: var(--ldg-hair) dashed var(--ldg-rule-strong);
}
.ldg-note p { margin: 0 0 0.5rem; }
.ldg-note p:last-child { margin: 0; }
.ldg-note .ldg-address { display: block; margin: 0.4rem 0 0.2rem; font-size: 0.88rem; overflow-wrap: anywhere; }

.ldg-page { min-width: 0; max-width: var(--ldg-measure); }
.ldg-page > p:first-child { font-size: 1.08em; }
.ldg-page p { margin-bottom: 1.05em; }
.ldg-page ul, .ldg-page ol { padding-left: 1.2rem; }
.ldg-page li { margin-bottom: 0.4rem; }
.ldg-page a { text-decoration-thickness: 1px; }
.ldg-line { padding-block: 0 clamp(1.3rem, 3vw, 2rem); scroll-margin-top: 1rem; }
.ldg-line + .ldg-line { border-top: var(--ldg-hair) solid var(--ldg-rule-strong); padding-top: clamp(1.3rem, 3vw, 2rem); }
.ldg-line h2 {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0.3rem; align-items: start;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2.1rem); margin: 0 0 0.85rem;
}
.ldg-line__no {
  font-family: var(--ldg-mono); font-size: 0.95rem; font-weight: 400; letter-spacing: 0.04em;
  color: var(--ldg-orange-ink); padding-top: 0.4em; font-variant-numeric: tabular-nums;
}
.ldg-line > p, .ldg-line > ul, .ldg-line > ol, .ldg-line > figure, .ldg-line > div, .ldg-line > blockquote, .ldg-line > h3, .ldg-line > table { margin-left: 3.4rem; }
.ldg-line > h3 { margin-top: 1.4rem; margin-bottom: 0.5rem; }
.ldg-table { overflow-x: auto; border: var(--ldg-hair) solid var(--ldg-rule); background: var(--ldg-paper); margin: 0 0 1.2rem 3.4rem; }
.ldg-table table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 0.94rem; margin: 0; }
.ldg-table th, .ldg-table td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: var(--ldg-hair) solid var(--ldg-rule); vertical-align: top; }
.ldg-table thead th { font-family: var(--ldg-head); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--ldg-ground-deep); }

/* continue reading */
.ldg-onward { margin-top: clamp(1.6rem, 4vw, 2.6rem); border-top: 2px solid var(--ldg-oak); padding-top: 1rem; }
.ldg-onward h2 { font-size: 1.05rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ldg-ink-soft); margin-bottom: 0.8rem; }
.ldg-onward ul { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.ldg-onward a { display: block; padding: 0.8rem 0.95rem; background: var(--ldg-paper); border-left: var(--ldg-thick) solid var(--ldg-oak); text-decoration: none; color: var(--ldg-ink); }
.ldg-onward a:hover { border-left-color: var(--ldg-orange); color: var(--ldg-orange-ink); }
.ldg-onward small { display: block; font-family: var(--ldg-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ldg-ink-soft); margin-bottom: 0.25rem; }
.ldg-onward b { font-family: var(--ldg-head); font-stretch: condensed; font-weight: 700; font-size: 1.08rem; line-height: 1.2; }

/* the shelf: entries of a section, on the section page */
.ldg-shelf { margin-top: clamp(1.4rem, 3vw, 2.2rem); scroll-margin-top: 1rem; }
.ldg-shelf h2 { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0.3rem; font-size: clamp(1.45rem, 1.2rem + 1vw, 2.1rem); margin-bottom: 1rem; }
.ldg-shelf .ldg-slips { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 3.4rem; }

/* ---- footer -------------------------------------------------------------- */
.ldg-foot { background: var(--ldg-oak-dark); color: var(--ldg-on-oak); border-top: 6px solid var(--ldg-orange); margin-top: 0; }
.ldg-foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; padding-block: clamp(1.8rem, 4vw, 3rem) 1.4rem; }
.ldg-foot h2 { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ldg-orange); margin-bottom: 0.8rem; }
.ldg-foot p { font-size: 0.93rem; color: var(--ldg-on-oak-soft); max-width: 40ch; margin-bottom: 0.7rem; }
.ldg-foot ul { list-style: none; margin: 0; padding: 0; }
.ldg-foot li { margin-bottom: 0.45rem; font-size: 0.95rem; }
.ldg-foot a { color: var(--ldg-on-oak); text-decoration: none; border-bottom: var(--ldg-hair) solid var(--ldg-oak-rule); }
.ldg-foot a:hover { color: var(--ldg-orange); border-bottom-color: var(--ldg-orange); }
.ldg-foot__name { font-family: var(--ldg-head); font-stretch: condensed; font-weight: 700; font-size: 1.5rem; color: var(--ldg-on-oak); margin-bottom: 0.3rem; }
.ldg-foot__sign { font-family: var(--ldg-mono); font-size: 0.78rem; color: var(--ldg-on-oak); }
.ldg-foot__bottom { border-top: var(--ldg-hair) solid var(--ldg-oak-rule); padding-block: 0.9rem 1.4rem; font-family: var(--ldg-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--ldg-on-oak-soft); }

/* ---- 404 ----------------------------------------------------------------- */
.ldg-lost { padding-block: clamp(2rem, 6vw, 4rem); max-width: var(--ldg-measure); }
.ldg-lost h1 { margin-bottom: 1rem; }

/* ---- dark scheme: page tokens change, oak bands keep their fixed tokens --- */
@media (prefers-color-scheme: dark) {
  :root {
    --ldg-ground: #1b1712;
    --ldg-ground-deep: #262019;
    --ldg-paper: #241e17;
    --ldg-ink: #ece5d8;
    --ldg-ink-soft: #b3a894;
    --ldg-rule: #3f362b;
    --ldg-rule-strong: #5e5140;
    --ldg-oak: #b58a5c;
    --ldg-oak-light: #8b6a48;
    --ldg-orange-ink: #f39a5a;
    --ldg-orange-soft: #6a3410;
  }
  .ldg-cover { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2.2rem - 1px), rgba(179, 168, 148, 0.16) calc(2.2rem - 1px), rgba(179, 168, 148, 0.16) 2.2rem); }
  .ldg-button:hover { background: var(--ldg-paper); border-color: var(--ldg-oak); color: var(--ldg-ink); }
}

/* ---- widths -------------------------------------------------------------- */
@media (max-width: 64rem) {
  .ldg-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ldg-slips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ldg-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ldg-register li { grid-template-columns: 12rem minmax(0, 1fr); }
  .ldg-register__where { grid-column: 2; text-align: left; }
  .ldg-desk { grid-template-columns: minmax(0, 1fr); }
  .ldg-index { position: static; max-height: none; overflow: visible; }
  .ldg-shelf .ldg-slips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ldg-foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 48rem) {
  .ldg-tabs__handle { display: inline-flex; }
  .ldg-tabs { width: 100%; }
  .ldg-tabs ul { display: none; flex-direction: column; gap: 0; padding-top: 0.4rem; border-top: var(--ldg-hair) solid var(--ldg-rule); margin-top: 0.4rem; }
  .ldg-tabs__toggle:checked ~ ul { display: flex; }
  .ldg-tabs a { display: block; padding: 0.65rem 0; border-bottom: var(--ldg-hair) solid var(--ldg-rule); font-size: 1.05rem; }
  .ldg-tabs a[aria-current="page"] { border-bottom-color: var(--ldg-orange); }
  .ldg-cover__grid { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .ldg-cover h1 { max-width: none; }
  .ldg-cover__plate { order: -1; }
  .ldg-cover__plate img { aspect-ratio: 16 / 9; }
  .ldg-band__head { grid-template-columns: minmax(0, 1fr); }
  .ldg-band__note { text-align: left; }
  .ldg-tiles { grid-template-columns: minmax(0, 1fr); }
  .ldg-tile__view img { aspect-ratio: 16 / 9; }
  .ldg-slips { grid-template-columns: minmax(0, 1fr); }
  .ldg-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ldg-contact { grid-template-columns: minmax(0, 1fr); }
  .ldg-register li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .ldg-register__where { grid-column: 1; }
  .ldg-line h2, .ldg-shelf h2 { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .ldg-line > p, .ldg-line > ul, .ldg-line > ol, .ldg-line > figure, .ldg-line > div, .ldg-line > blockquote, .ldg-line > h3, .ldg-line > table, .ldg-table, .ldg-shelf .ldg-slips { margin-left: 0; }
  .ldg-shelf .ldg-slips { grid-template-columns: minmax(0, 1fr); }
  .ldg-foot__grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .ldg-first li { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .ldg-first li::before { font-size: 1.6rem; }
}

/* ---- print --------------------------------------------------------------- */
@media print {
  .ldg-masthead, .ldg-foot, .ldg-margin, .ldg-onward, .ldg-skip { display: none; }
  .ldg-desk { display: block; }
  body { background: #fff; color: #000; }
  .ldg-page { max-width: none; }
}