/* LayerLog — ink on warm paper.
 *
 * The bench notebook is a ledger, not a magazine: hairline rules, square
 * corners, dates set in the margin, and one accent colour that only ever marks
 * something that came off a printer. Nothing floats, nothing lifts on hover,
 * nothing is rounded into a card.
 *
 * Naming follows the two nouns the site is built from: a SPOOL is a machine's
 * run of logs (chrome, navigation, the shell) and a LOG is one entry (its
 * spine, its record, its chain).
 */

:root {
  /* spool: the palette and the frame */
  --spool-cream: #faf6ef;
  --spool-paper: #fffdf8;
  --spool-ink: #2b2b2b;
  --spool-graphite: #2b2b2b;
  --spool-orange: #e2622a;
  --spool-orange-soft: rgba(226, 98, 42, 0.09);
  --spool-rule: #c9d8e4;
  --spool-mute: #8d7f6d;
  --spool-faint: #efe9dd;
  --spool-shell: 1180px;
  --spool-gutter: 28px;
  --spool-rail-w: 132px;
  --spool-spine-w: 138px;

  /* layer: the vertical rhythm, named after the thing it measures */
  --layer-lh: 1.72;
  --layer-1: 4px;
  --layer-2: 8px;
  --layer-3: 12px;
  --layer-4: 18px;
  --layer-5: 26px;
  --layer-6: 38px;
  --layer-7: 56px;

  --display: "Fraunces", "Iowan Old Style", Georgia, "Songti SC", serif;
  --text: "Karla", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--spool-cream);
  color: var(--spool-ink);
  font-family: var(--text);
  font-size: 16.5px;
  line-height: var(--layer-lh);
  /* A very faint extrusion ruling, drawn in the rule colour. */
  background-image: linear-gradient(to bottom, var(--spool-faint) 1px, transparent 1px);
  background-size: 100% var(--layer-6);
}

a { color: var(--spool-ink); text-decoration: none; border-bottom: 1px solid var(--spool-rule); }
a:hover { color: var(--spool-orange); border-bottom-color: var(--spool-orange); }
a:focus-visible { outline: 2px solid var(--spool-orange); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }

.spool-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--spool-ink); color: var(--spool-cream);
  padding: var(--layer-2) var(--layer-3); border: 0; z-index: 40;
}
.spool-skip:focus { left: var(--layer-3); top: var(--layer-3); color: var(--spool-cream); }

/* ------------------------------------------------------------- masthead --- */

.spool-head {
  max-width: var(--spool-shell);
  margin: 0 auto;
  padding: var(--layer-5) var(--spool-gutter) var(--layer-3);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--layer-3) var(--layer-4);
  border-bottom: 2px solid var(--spool-ink);
}
.spool-head__brand { display: inline-flex; align-items: center; gap: var(--layer-2); border: 0; }
.spool-head__brand img { display: block; }
.spool-head__name {
  font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -0.015em;
}
.spool-head__zh {
  font-size: 15px; color: var(--spool-mute); margin-left: var(--layer-1); letter-spacing: 0.16em;
}
.spool-head__tag {
  margin: 0; font-size: 13.5px; color: var(--spool-mute);
  letter-spacing: 0.02em; max-width: 46ch;
}
.spool-head__lang { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------------------------------------------------------------- shell --- */

.spool-shell {
  max-width: var(--spool-shell);
  margin: 0 auto;
  padding: var(--layer-7) var(--spool-gutter) var(--layer-7);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--spool-rail-w);
  gap: var(--layer-7);
}
.spool-shell--log { grid-template-columns: var(--spool-spine-w) minmax(0, 1fr); }
.spool-main { min-width: 0; }

.spool-foot {
  max-width: var(--spool-shell);
  margin: 0 auto;
  padding: var(--layer-6) var(--spool-gutter) var(--layer-7);
  border-top: 1px solid var(--spool-rule);
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: var(--layer-6) var(--layer-7);
  font-size: 14px;
}
.spool-foot__h {
  font-family: var(--text); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--spool-mute);
  margin: 0 0 var(--layer-3);
}
.spool-foot ul { list-style: none; margin: 0; padding: 0; }
.spool-foot li { padding: 2px 0; }
.spool-foot__n { color: var(--spool-mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.spool-foot__meta { margin: var(--layer-3) 0 0; color: var(--spool-mute); font-size: 13px; }
.spool-foot__col--wide p { margin: 0 0 var(--layer-2); }
/* The editorial disclaimer closes the footer on every page, in the same muted
   register as the rest of the footer meta so it is read, not skipped. */
.spool-foot__disclaimer {
  margin: var(--layer-4) 0 0; padding-top: var(--layer-3);
  border-top: 1px solid var(--spool-faint);
  font-size: 12.5px; line-height: 1.6; color: var(--spool-mute);
  max-width: 46em;
}

/* ----------------------------------------------------- the river (home) --- */

.log-lede {
  margin: 0 0 var(--layer-6);
  padding-bottom: var(--layer-4);
  border-bottom: 1px solid var(--spool-rule);
  font-size: 15px; color: var(--spool-mute); letter-spacing: 0.01em;
}
.log-lede__n { font-family: var(--display); font-size: 22px; color: var(--spool-ink); }
.log-lede__sep { color: var(--spool-rule); margin: 0 var(--layer-2); }

.log-month { margin: 0 0 var(--layer-7); }
.log-month__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--spool-orange);
  margin: 0 0 var(--layer-2);
  padding-bottom: var(--layer-2);
  border-bottom: 2px solid var(--spool-orange);
}
.log-month__n { color: var(--spool-mute); font-variant-numeric: tabular-nums; letter-spacing: 0; }

.log-list { list-style: none; margin: 0; padding: 0; }
.log-list--tight { border-top: 1px solid var(--spool-rule); }

.log-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 168px;
  gap: var(--layer-4) var(--layer-5);
  padding: var(--layer-5) 0;
  border-bottom: 1px solid var(--spool-rule);
}
.log-row__spine { font-size: 12px; color: var(--spool-mute); padding-top: 5px; }
.log-row__spine time { display: block; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.log-row__kind {
  display: inline-block; margin-top: var(--layer-2);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--spool-mute);
}
.log-row__kind--tune-profile { color: var(--spool-orange); }
.log-row__kind--tune-profile::before,
.log-row__kind--print-log::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px;
  background: currentColor; vertical-align: 1px;
}
.log-row__title { margin: 0 0 var(--layer-2); font-size: 22px; line-height: 1.28; }
.log-row__title a { border-bottom: 0; }
.log-row__title a:hover { color: var(--spool-orange); }
.log-row__intro { margin: 0 0 var(--layer-3); color: #4a4640; font-size: 15.5px; }
.log-row__facts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--layer-1) var(--layer-4);
  font-size: 13px; color: var(--spool-ink);
}
.log-row__thumb { border: 0; align-self: start; }
.log-row__thumb img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--spool-rule); background: var(--spool-paper);
}
.log-k {
  display: inline-block; margin-right: 6px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--spool-mute);
}

/* ------------------------------------------------------ the timeline rail -- */

.spool-rail { position: relative; }
.spool-rail__h,
.spool-rail__note {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--spool-mute); margin: 0;
}
.spool-rail__note { text-transform: none; letter-spacing: 0; font-size: 12px; margin-top: var(--layer-3); }
.spool-rail__list {
  list-style: none; margin: var(--layer-3) 0 0; padding: 0;
  position: sticky; top: var(--layer-5);
}
.spool-rail__item a {
  display: grid; grid-template-columns: 14px 1fr auto; align-items: center;
  gap: var(--layer-2); padding: 3px 0; border: 0;
  font-size: 12.5px; color: var(--spool-mute);
}
.spool-rail__item a:hover { color: var(--spool-orange); }
.spool-rail__tick {
  height: 1px; width: 14px; background: var(--spool-rule); display: block;
}
.spool-rail__item.is-current .spool-rail__tick { background: var(--spool-orange); height: 2px; }
.spool-rail__item.is-current a { color: var(--spool-orange); }
.spool-rail__n { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- the entry spine --- */

.log-spine {
  font-size: 12.5px; color: var(--spool-mute);
  border-right: 1px solid var(--spool-rule);
  padding-right: var(--layer-4);
}
.log-spine__date { display: block; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
/* The desk byline: set as a second line of the date block, in the same muted
   register, so it reads as part of the record rather than as a stray label. */
.log-spine__byline {
  display: block; margin-top: var(--layer-1);
  font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--spool-ink); text-decoration: none;
  border-bottom: 1px solid var(--spool-rule); padding-bottom: 2px;
}
.log-spine__byline:hover { color: var(--spool-orange); border-bottom-color: var(--spool-orange); }
.log-spine__kind {
  display: inline-block; margin-top: var(--layer-2);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
}
.log-spine__kind--tune-profile { color: var(--spool-orange); }
.log-spine__printer {
  display: block; margin-top: var(--layer-3); color: var(--spool-ink); font-size: 13.5px;
}
.log-spine__series { margin: var(--layer-2) 0 0; font-size: 12px; }

.log-title { font-size: 40px; line-height: 1.14; margin: 0 0 var(--layer-4); }
.log-intro {
  font-size: 19px; line-height: 1.6; color: #3d3933;
  margin: 0 0 var(--layer-5);
  padding-left: var(--layer-4);
  border-left: 3px solid var(--spool-orange);
}

/* The sticky parameter strip. It follows the reader down the entry so the
   numbers a log is about are never more than a glance away. */
.log-params {
  position: sticky; top: 0; z-index: 12;
  display: flex; flex-wrap: wrap; gap: var(--layer-1) var(--layer-5);
  padding: var(--layer-3) var(--layer-3) var(--layer-3) 0;
  margin: 0 0 var(--layer-6);
  background: var(--spool-cream);
  border-top: 2px solid var(--spool-ink);
  border-bottom: 1px solid var(--spool-rule);
  font-size: 13.5px;
}
.log-params__item { white-space: nowrap; }

.log-block { margin: 0 0 var(--layer-6); }
.log-h {
  font-family: var(--text); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--spool-ink);
  margin: 0 0 var(--layer-4);
  padding-bottom: var(--layer-2);
  border-bottom: 1px solid var(--spool-rule);
}
.log-h__note {
  display: block; margin-top: var(--layer-1);
  text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--spool-mute); font-size: 13px;
}

/* -------------------------------------------------------------- figures --- */

.log-figs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layer-4); }
.log-fig { margin: 0; }
.log-fig img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--spool-rule); background: var(--spool-paper);
}
.log-fig figcaption {
  margin-top: var(--layer-2); font-size: 12.5px; color: var(--spool-mute); line-height: 1.5;
}

/* --------------------------------------------------------------- record --- */

.log-record {
  margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 var(--layer-5);
}
.log-record__pair {
  display: grid; grid-template-columns: 1fr; gap: 0;
  padding: var(--layer-2) 0; border-bottom: 1px dotted var(--spool-rule);
}
.log-record dt {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--spool-mute);
}
.log-record dd { margin: 0; font-size: 15px; }

.log-prose p { margin: 0 0 var(--layer-4); max-width: 68ch; }
.log-prose h2 { font-size: 23px; }

/* ---------------------------------------------------------- failure chain -- */

/* Three columns, one row per attempt, framed in the accent: this is the part
   of an entry that a reader standing at the machine actually needs. */
.log-chain { list-style: none; margin: 0; padding: 0; }
.log-chain__row {
  border: 1px solid var(--spool-orange);
  border-left-width: 3px;
  background: var(--spool-paper);
  padding: var(--layer-4);
  margin-bottom: var(--layer-4);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--layer-4);
}
.log-chain__n {
  grid-column: 1 / -1;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--spool-orange);
}
.log-chain__cell h3 {
  font-family: var(--text); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--spool-mute);
  margin: 0 0 var(--layer-2);
}
.log-chain__cell p { margin: 0; font-size: 14.5px; line-height: 1.62; }

/* ------------------------------------------------------- dimensional check -- */

.log-dims { margin: 0; }
.log-dims__pair {
  display: grid; grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--layer-4); padding: var(--layer-2) 0;
  border-bottom: 1px dotted var(--spool-rule);
}
.log-dims dt {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--spool-mute); padding-top: 3px;
}
.log-dims dd { margin: 0; font-size: 15px; }
.log-dims__delta {
  margin-left: var(--layer-2); font-size: 12.5px; color: var(--spool-mute);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ sweep table -- */

.log-sweep { overflow-x: auto; }
.log-sweep table { width: 100%; border-collapse: collapse; font-size: 14px; }
.log-sweep th, .log-sweep td {
  text-align: left; vertical-align: top;
  padding: var(--layer-3) var(--layer-3) var(--layer-3) 0;
  border-bottom: 1px solid var(--spool-rule);
}
.log-sweep thead th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--spool-mute); font-weight: 600; border-bottom: 2px solid var(--spool-ink);
}
.log-sweep tbody th { font-weight: 600; white-space: nowrap; }
.log-sweep__chosen { color: var(--spool-orange); font-weight: 600; }

.log-yaml {
  margin: 0; padding: var(--layer-4);
  background: var(--spool-paper);
  border: 1px solid var(--spool-rule);
  border-left: 3px solid var(--spool-ink);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.62;
  overflow-x: auto; white-space: pre; tab-size: 2;
}

.log-take ul { margin: 0; padding-left: var(--layer-4); max-width: 66ch; }
.log-take li { margin-bottom: var(--layer-2); }

.log-verdict p {
  margin: 0; padding: var(--layer-4);
  background: var(--spool-orange-soft);
  border-left: 3px solid var(--spool-orange);
  font-size: 16.5px; max-width: 70ch;
}

/* ------------------------------------------------------------- entry nav -- */

.log-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--layer-4);
  margin: var(--layer-7) 0 var(--layer-6);
  padding-top: var(--layer-4);
  border-top: 2px solid var(--spool-ink);
}
.log-nav__link { display: block; border: 0; font-size: 15px; line-height: 1.4; }
.log-nav__link--next { text-align: right; }
.log-nav__link--none { color: var(--spool-mute); font-size: 13px; }
.log-nav__link .log-k { display: block; margin: 0 0 var(--layer-1); }

/* ------------------------------------------------------------- machines --- */

.machine-head {
  border-bottom: 2px solid var(--spool-ink);
  padding-bottom: var(--layer-4);
  margin-bottom: var(--layer-6);
}
.machine-head__name { font-size: 34px; margin: 0 0 var(--layer-3); }
.machine-head__note { margin: 0 0 var(--layer-4); max-width: 68ch; color: #4a4640; }
.machine-spec {
  margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 var(--layer-5);
}
.machine-spec__pair { padding: var(--layer-2) 0; border-bottom: 1px dotted var(--spool-rule); }
.machine-spec dt {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--spool-mute);
}
.machine-spec dd { margin: 0; font-size: 14.5px; }
.machine-others ul { list-style: none; margin: 0; padding: 0; }

/* -------------------------------------------------------------- documents -- */

.doc-main { max-width: 74ch; }
.doc-head { border-bottom: 2px solid var(--spool-ink); padding-bottom: var(--layer-4); margin-bottom: var(--layer-6); }
.doc-head__title { font-size: 36px; margin: 0 0 var(--layer-2); }
.doc-head__kicker { margin: 0 0 var(--layer-2); color: var(--spool-mute); font-size: 16px; }
.doc-head__stamp {
  margin: 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--spool-mute);
}
.doc-block { margin-bottom: var(--layer-5); }
.doc-h { font-size: 20px; margin: 0 0 var(--layer-3); }
.doc-block p { margin: 0 0 var(--layer-3); }
.doc-list { margin: 0 0 var(--layer-3); padding-left: var(--layer-4); }
.doc-list li { margin-bottom: var(--layer-1); }
.doc-foot {
  margin-top: var(--layer-6); padding-top: var(--layer-4);
  border-top: 1px solid var(--spool-rule); font-size: 13.5px; color: var(--spool-mute);
}

/* ---------------------------------------------------------------- small --- */

@media (max-width: 1000px) {
  .spool-shell, .spool-shell--log { grid-template-columns: minmax(0, 1fr); }
  .spool-rail { order: -1; }
  .spool-rail__list { position: static; display: flex; flex-wrap: wrap; gap: 0 var(--layer-4); }
  .log-spine {
    border-right: 0; border-bottom: 1px solid var(--spool-rule);
    padding: 0 0 var(--layer-3); margin-bottom: var(--layer-4);
    display: flex; flex-wrap: wrap; gap: 0 var(--layer-4); align-items: baseline;
  }
  .log-spine__printer, .log-spine__series, .log-spine__byline { margin-top: 0; }
  .log-row { grid-template-columns: 84px minmax(0, 1fr); }
  .log-row__thumb { display: none; }
  .spool-foot { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .spool-head { grid-template-columns: 1fr auto; }
  .spool-head__tag { grid-column: 1 / -1; }
  .log-title { font-size: 29px; }
  .log-intro { font-size: 17px; }
  .log-figs__grid { grid-template-columns: 1fr; }
  .log-chain__row { grid-template-columns: 1fr; }
  .log-nav { grid-template-columns: 1fr; }
  .log-nav__link--next { text-align: left; }
  .log-dims__pair { grid-template-columns: 1fr; gap: 0; }
  .spool-foot { grid-template-columns: 1fr; }
}

@media print {
  .spool-rail, .spool-head__lang, .log-params { display: none; }
  body { background: #fff; }
}