/* =========================================================================
   The Plug Ledger (tattoostackle.com)
   Reskin of the "grille-annuaire" skeleton: card grid on the directory,
   dense ruled list on a family page, two column entry page.
   Workshop vocabulary, prefix lth-. Dark ground, system fonts only,
   zero network request, no automatic light scheme.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. VARIABLES
   ------------------------------------------------------------------------- */
:root {
  /* Colour: wet jetty stone at night, acid chartreuse accent, steel and
     copper as the two family tints. */
  --lth-ground: #0f1512;
  --lth-plate: #171f1a;
  --lth-hollow: #1e2822;
  --lth-ink: #e9e7dc;
  --lth-ink-soft: #9ba79b;
  --lth-rule: #2c3830;
  --lth-accent: #b7c94a;
  --lth-accent-bright: #d3e36c;
  --lth-accent-veil: #232d16;
  --lth-second: #6fa3b8;
  --lth-third: #cf8a4a;

  /* Type: geometric sans for signs and headings, old style serif for
     reading, mono for stamps, figures and table cells. */
  --lth-face-sign: "Avenir Next", Avenir, "Segoe UI", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --lth-face-read: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Bitstream Charter", Charter, Georgia, serif;
  --lth-face-mark: "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", Consolas, "Courier New", monospace;

  /* Measure */
  --lth-span: 68rem;
  --lth-measure: 33rem;
  --lth-step: 16.5rem;
  --lth-beat: 1.35rem;
  --lth-corner: 5px;
  --lth-hair: 1px solid var(--lth-rule);
  --lth-tint: var(--lth-accent);
}

/* -------------------------------------------------------------------------
   2. 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; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--lth-ground);
  color: var(--lth-ink);
  font-family: var(--lth-face-read);
  font-size: clamp(1.0125rem, .98rem + .2vw, 1.09rem);
  line-height: 1.66;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--lth-face-sign);
  line-height: 1.18;
  margin: 0 0 .55em;
  font-weight: 600;
  letter-spacing: .005em;
}
h1 { font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.45rem); }
h2 { font-size: clamp(1.22rem, 1.1rem + .6vw, 1.55rem); }
h3 { font-size: 1.06rem; }
p, ul, ol, dl, table { margin: 0 0 var(--lth-beat); }

a { color: var(--lth-accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--lth-accent-bright); }

:focus-visible {
  outline: 2px solid var(--lth-accent-bright);
  outline-offset: 2px;
}

/* The only width container. Never replace with a fixed width. */
.lth-span { width: min(100% - 1.8rem, var(--lth-span)); margin-inline: auto; }

.lth-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--lth-accent); color: var(--lth-ground);
  padding: .6rem 1rem; z-index: 20; font-family: var(--lth-face-sign);
}
.lth-skip:focus { left: .5rem; top: .5rem; }

/* -------------------------------------------------------------------------
   3. MASTHEAD
   ------------------------------------------------------------------------- */
.lth-masthead { background: var(--lth-plate); border-bottom: var(--lth-hair); }
.lth-masthead__rule { height: 3px; background: linear-gradient(90deg, var(--lth-accent) 0 55%, var(--lth-second) 55% 80%, var(--lth-third) 80% 100%); }
.lth-masthead__inner {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .4rem 1.4rem; padding: 1rem 0 .95rem;
}
.lth-signboard {
  font-family: var(--lth-face-sign); font-size: 1.28rem; font-weight: 600;
  color: var(--lth-ink); text-decoration: none; letter-spacing: .01em;
}
.lth-signboard:hover { color: var(--lth-accent); }
.lth-strapline {
  margin: 0; color: var(--lth-ink-soft); font-size: .86rem;
  font-family: var(--lth-face-sign);
}
.lth-routes { margin-left: auto; }
.lth-routes ul { display: flex; flex-wrap: wrap; gap: .35rem 1.05rem; list-style: none; margin: 0; padding: 0; }
.lth-routes__link {
  color: var(--lth-ink-soft); text-decoration: none;
  font-family: var(--lth-face-mark); font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: .15rem;
}
.lth-routes__link:hover, .lth-routes__link[aria-current] { color: var(--lth-accent); }
.lth-routes__link[aria-current] { box-shadow: inset 0 -2px 0 var(--lth-accent); }

@media (max-width: 44rem) {
  .lth-strapline { flex-basis: 100%; }
  .lth-routes { margin-left: 0; flex-basis: 100%; padding-top: .3rem; }
}

/* -------------------------------------------------------------------------
   4. PREFACE + GAUGES
   ------------------------------------------------------------------------- */
.lth-preface { padding: calc(var(--lth-beat) * 2.1) 0 var(--lth-beat); }
.lth-preface p { max-width: var(--lth-measure); color: var(--lth-ink-soft); }
.lth-preface h1 { max-width: 20ch; }

.lth-gauges {
  display: flex; flex-wrap: wrap; gap: 0; list-style: none;
  margin: calc(var(--lth-beat) * 1.1) 0 0; padding: 0;
  border-top: 2px solid var(--lth-accent);
  border-bottom: var(--lth-hair);
}
.lth-gauges__cell { flex: 1 1 9rem; padding: .7rem 1rem .75rem 0; }
.lth-gauges__figure {
  display: block; font-family: var(--lth-face-mark);
  font-size: 1.3rem; color: var(--lth-accent-bright); letter-spacing: -.01em;
}
.lth-gauges__label {
  display: block; font-family: var(--lth-face-sign); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--lth-ink-soft);
}

/* -------------------------------------------------------------------------
   5. RACKS (family filter)
   ------------------------------------------------------------------------- */
.lth-racks {
  display: flex; flex-wrap: wrap; gap: 0 1.5rem;
  padding: var(--lth-beat) 0 0;
  border-bottom: var(--lth-hair);
}
.lth-rack {
  font: inherit; font-family: var(--lth-face-sign); font-size: .82rem;
  display: inline-block; padding: .35rem 0 .5rem;
  border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--lth-ink-soft);
  text-decoration: none; cursor: pointer;
}
.lth-rack:hover { color: var(--lth-accent); }
.lth-rack--live, .lth-rack[aria-current="true"] {
  color: var(--lth-ink); border-bottom-color: var(--lth-accent);
}

/* -------------------------------------------------------------------------
   6. SHELF (section) + BIN (card grid)
   ------------------------------------------------------------------------- */
.lth-shelf { padding: calc(var(--lth-beat) * 1.7) 0 0; }
.lth-shelf--last { padding-bottom: calc(var(--lth-beat) * 1.7); }
.lth-shelf__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .4rem 1rem; margin-bottom: var(--lth-beat);
}
.lth-shelf__head h2 { margin: 0; }
.lth-shelf__count {
  font-family: var(--lth-face-mark); font-size: .76rem;
  color: var(--lth-ink-soft); letter-spacing: .03em;
}
.lth-shelf__head .lth-jump { margin-left: auto; }
.lth-shelf__lede { max-width: var(--lth-measure); color: var(--lth-ink-soft); }

.lth-bin {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--lth-step), 100%), 1fr));
  gap: .85rem;
}

/* The family tint sits on the RIGHT edge of a card: the skeleton puts it on
   top, and the two other sites built from this skeleton use left and bottom. */
.lth-plug {
  display: flex; flex-direction: column;
  background: var(--lth-plate);
  border: var(--lth-hair);
  border-right: 3px solid var(--lth-tint);
  border-radius: var(--lth-corner);
  padding: .85rem .95rem .9rem;
}
.lth-plug:hover { border-color: var(--lth-tint); }
/* One tint per family. */
.lth-plug[data-family="surface"] { --lth-tint: var(--lth-accent); }
.lth-plug[data-family="swimmers"] { --lth-tint: var(--lth-second); }
.lth-plug[data-family="current"] { --lth-tint: var(--lth-third); }

.lth-plug__stamp {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin: 0 0 .45rem;
}
.lth-stamp {
  font-family: var(--lth-face-mark); font-size: .72rem;
  letter-spacing: .05em; color: var(--lth-ink-soft);
}
.lth-chip {
  font-family: var(--lth-face-sign); font-size: .66rem;
  letter-spacing: .11em; text-transform: uppercase;
  background: var(--lth-accent-veil); color: var(--lth-accent-bright);
  padding: .12rem .45rem; border-radius: var(--lth-corner);
}
.lth-plug__date {
  margin-left: auto; font-family: var(--lth-face-mark); font-size: .72rem;
  color: var(--lth-ink-soft);
}
.lth-plug__name { margin: 0 0 .35rem; font-size: 1.04rem; }
.lth-plug__name a { color: var(--lth-ink); text-decoration: none; }
.lth-plug__name a:hover { color: var(--lth-accent); text-decoration: underline; }
.lth-plug__gist { font-size: .89rem; color: var(--lth-ink-soft); margin: 0 0 .7rem; }

.lth-plug__specs {
  margin: 0 0 .75rem; padding: .5rem 0 0;
  border-top: var(--lth-hair); font-size: .8rem;
}
.lth-spec { display: flex; gap: .5rem; justify-content: space-between; padding: .1rem 0; }
.lth-spec dt { color: var(--lth-ink-soft); font-family: var(--lth-face-sign); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
.lth-spec dd { margin: 0; font-family: var(--lth-face-mark); font-size: .76rem; text-align: right; }

.lth-plug__jump { margin: auto 0 0; }
.lth-jump {
  font-family: var(--lth-face-sign); font-size: .8rem; font-weight: 600;
  text-decoration: none; color: var(--lth-accent);
}
.lth-jump:hover { text-decoration: underline; color: var(--lth-accent-bright); }
.lth-jump span { margin-left: .25rem; }

/* -------------------------------------------------------------------------
   7. NOTICE (short editorial block)
   ------------------------------------------------------------------------- */
.lth-notice {
  background: var(--lth-hollow); border: var(--lth-hair);
  border-top: 2px solid var(--lth-second);
  border-radius: var(--lth-corner);
  padding: 1rem 1.15rem;
}
.lth-notice h2 { font-size: 1.08rem; }
.lth-notice p, .lth-notice li { font-size: .93rem; }
.lth-notice p:last-child, .lth-notice ul:last-child { margin-bottom: 0; }
.lth-notice ul { padding-left: 1.05rem; }
.lth-notice li { margin-bottom: .3rem; }

/* -------------------------------------------------------------------------
   8. LEDGER (dense ruled list: family page)
   ------------------------------------------------------------------------- */
.lth-ledger { list-style: none; margin: 0 0 var(--lth-beat); padding: 0; border-top: var(--lth-hair); }
.lth-row {
  display: grid; gap: .2rem 1rem;
  grid-template-columns: 1fr;
  padding: 1rem 0;
  border-bottom: var(--lth-hair);
}
.lth-row__stamp { font-family: var(--lth-face-mark); font-size: .72rem; color: var(--lth-ink-soft); }
.lth-row__name { margin: 0 0 .2rem; font-size: 1.06rem; }
.lth-row__name a { color: var(--lth-ink); text-decoration: none; }
.lth-row__name a:hover { color: var(--lth-accent); text-decoration: underline; }
.lth-row__gist { margin: 0; font-size: .92rem; color: var(--lth-ink-soft); max-width: var(--lth-measure); }
.lth-row__specs { margin: .25rem 0 0; font-size: .8rem; display: grid; gap: .08rem; }

@media (min-width: 54rem) {
  .lth-row { grid-template-columns: 5.5rem minmax(0, 1fr) 13rem; align-items: start; }
  .lth-row__stamp { grid-row: span 2; padding-top: .3rem; }
  .lth-row__specs { grid-column: 3; grid-row: 1 / span 2; }
}

/* -------------------------------------------------------------------------
   9. ENTRY PAGE: backtrack, head, body + rail
   ------------------------------------------------------------------------- */
.lth-backtrack { padding: var(--lth-beat) 0 0; font-family: var(--lth-face-mark); font-size: .74rem; color: var(--lth-ink-soft); }
.lth-backtrack ol { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.lth-backtrack li::after { content: "/"; margin-left: .3rem; color: var(--lth-rule); }
.lth-backtrack li:last-child::after { content: ""; }

.lth-head { padding: var(--lth-beat) 0 calc(var(--lth-beat) * .8); border-bottom: 2px solid var(--lth-rule); }
.lth-head h1 { margin-bottom: .35rem; }
.lth-lede { font-size: 1.06rem; color: var(--lth-ink-soft); max-width: var(--lth-measure); }
.lth-stamped { font-family: var(--lth-face-mark); font-size: .72rem; color: var(--lth-ink-soft); margin: 0; }

.lth-pair { display: grid; gap: calc(var(--lth-beat) * 1.5); padding: calc(var(--lth-beat) * 1.5) 0; }
/* min-width: 0 is load bearing. Without it a grid item refuses to shrink below
   the min-content of a wide table and the whole page scrolls sideways. */
.lth-body, .lth-rail { min-width: 0; }
@media (min-width: 62rem) {
  .lth-pair { grid-template-columns: minmax(0, 1fr) 17.5rem; align-items: start; }
  .lth-rail { position: sticky; top: 1rem; }
}

.lth-body > * { max-width: var(--lth-measure); }
.lth-body h2 {
  margin-top: calc(var(--lth-beat) * 1.8);
  border-left: 3px solid var(--lth-accent);
  padding-left: .65rem;
}
.lth-body h3 { margin-top: var(--lth-beat); color: var(--lth-ink); }
.lth-body ul, .lth-body ol { padding-left: 1.15rem; }
.lth-body li { margin-bottom: .32rem; }
.lth-body figure, .lth-body .lth-wide, .lth-body .lth-terms { max-width: 100%; }

/* Figures */
.lth-figure {
  margin: var(--lth-beat) 0; border: var(--lth-hair);
  background: var(--lth-hollow); border-radius: var(--lth-corner);
}
.lth-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lth-figure figcaption {
  font-size: .8rem; color: var(--lth-ink-soft);
  padding: .5rem .8rem; border-top: var(--lth-hair);
}

/* Plate: the characteristics box in the rail */
.lth-plate {
  background: var(--lth-plate); border: var(--lth-hair);
  border-top: 2px solid var(--lth-tint);
  border-radius: var(--lth-corner);
  padding: .3rem .9rem .9rem;
}
.lth-plate h2 { font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; color: var(--lth-ink-soft); margin: .8rem 0 .45rem; }
.lth-plate table { width: 100%; border-collapse: collapse; font-size: .84rem; margin: 0; }
.lth-plate th, .lth-plate td { text-align: left; padding: .4rem 0; border-bottom: var(--lth-hair); vertical-align: top; }
.lth-plate tr:last-child th, .lth-plate tr:last-child td { border-bottom: 0; }
.lth-plate th { font-weight: 400; color: var(--lth-ink-soft); width: 46%; font-family: var(--lth-face-sign); font-size: .78rem; }
.lth-plate td { font-family: var(--lth-face-mark); font-size: .78rem; }

/* Marks: the numbered contents of an entry */
.lth-marks { margin: 0 0 var(--lth-beat); }
.lth-marks h2 { font-family: var(--lth-face-sign); font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; color: var(--lth-ink-soft); margin-bottom: .3rem; }
.lth-marks ol { list-style: none; margin: 0; padding: 0; counter-reset: mark; }
.lth-marks li { counter-increment: mark; border-top: var(--lth-hair); }
.lth-marks__link { display: block; padding: .42rem 0; font-size: .88rem; text-decoration: none; color: var(--lth-ink); font-family: var(--lth-face-sign); }
.lth-marks__link::before {
  content: counter(mark, decimal-leading-zero) "  ";
  font-family: var(--lth-face-mark); font-size: .72rem; color: var(--lth-accent);
  white-space: pre;
}
.lth-marks__link:hover { color: var(--lth-accent); }

/* Wide table: always scrolls inside its own box, never pushes the page */
.lth-wide { overflow-x: auto; border: var(--lth-hair); border-radius: var(--lth-corner); background: var(--lth-plate); max-width: 100%; margin: 0 0 var(--lth-beat); }
.lth-wide table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: .86rem; margin: 0; }
.lth-wide caption { text-align: left; padding: .65rem .9rem; font-size: .8rem; color: var(--lth-ink-soft); font-family: var(--lth-face-sign); }
.lth-wide th, .lth-wide td { padding: .5rem .9rem; border-bottom: var(--lth-hair); text-align: left; }
.lth-wide thead th { background: var(--lth-hollow); font-family: var(--lth-face-sign); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--lth-ink-soft); }
.lth-wide tbody th { font-family: var(--lth-face-sign); font-size: .84rem; font-weight: 600; }
.lth-wide tbody tr:last-child th, .lth-wide tbody tr:last-child td { border-bottom: 0; }
.lth-wide td { font-family: var(--lth-face-mark); font-size: .78rem; color: var(--lth-ink-soft); }
.lth-wide:focus-visible { outline: 2px solid var(--lth-accent-bright); }

/* Glossary terms */
.lth-terms { margin: 0 0 var(--lth-beat); border-top: var(--lth-hair); }
.lth-terms > div { padding: .7rem 0; border-bottom: var(--lth-hair); }
.lth-terms dt { font-family: var(--lth-face-sign); font-weight: 600; font-size: .95rem; color: var(--lth-ink); }
.lth-terms dd { margin: .1rem 0 0; font-size: .93rem; color: var(--lth-ink-soft); max-width: var(--lth-measure); }
@media (min-width: 54rem) {
  .lth-terms > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 0 1.2rem; }
  .lth-terms dd { margin-top: 0; }
}

/* Nearby entries at the foot of a page */
.lth-nearby { border-top: var(--lth-hair); padding: calc(var(--lth-beat) * 1.5) 0; }
.lth-nearby .lth-bin { --lth-step: 14rem; }

/* -------------------------------------------------------------------------
   10. FOOT
   ------------------------------------------------------------------------- */
.lth-foot { background: var(--lth-plate); border-top: var(--lth-hair); padding: calc(var(--lth-beat) * 1.6) 0; margin-top: calc(var(--lth-beat) * 1.6); }
.lth-foot__cols { display: grid; gap: var(--lth-beat); grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }
.lth-foot h2 { font-family: var(--lth-face-sign); font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; color: var(--lth-ink-soft); }
.lth-foot ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.lth-foot li { margin-bottom: .28rem; }
.lth-foot__note { border-top: var(--lth-hair); margin-top: var(--lth-beat); padding-top: .85rem; font-size: .8rem; color: var(--lth-ink-soft); max-width: 46rem; }

/* -------------------------------------------------------------------------
   11. UTILITIES
   ------------------------------------------------------------------------- */
.lth-offscreen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }