/* Torch & Anvil: "the smith's handbook" (redesign of 2026-10-07).
   Parchment, soot ink and one copper accent; Alegreya for reading, Alegreya
   Sans for the working parts (navigation, forms, tables). Hierarchy comes from
   size, weight and hairline rules, not boxes. Every colour is a token below:
   page markup carries no hex values, and the calculators read the tokens at
   draw time (js/ore-distribution-calculator.js, js/circle-generator.js), so
   those names stay put. */

:root {
  color-scheme: light;

  --parchment: #f3ecdf;
  --plate: #faf6ee;        /* figures (plates) and tool panels */
  --field: #ffffff;        /* form fields */
  --ink: #241c15;          /* soot ink: text, rules that carry structure */
  --ink-soft: #5e5245;     /* secondary text, 6.5:1 on parchment */
  --ink-faint: #7a6d5d;    /* disabled controls only */
  --rule: #d9ccb4;         /* hairlines between rows */
  --copper: #b4632b;       /* the accent: numerals, marks, underlines (large text only) */
  --copper-ink: #97501f;   /* copper for running text and links, 5.1:1 */
  --moss: #5c7f2b;
  --moss-light: #a9bc8a;
  --bedrock: #c8c4bc;      /* the grey bedrock band in the ore plate */

  /* read by the calculators' canvases */
  --torch: #b4632b;
  --torch-hot: #8e4a1d;
  --torch-glow: rgba(180, 99, 43, 0.16);
  --slab-edge: #c8c4bc;
  --grid-line: rgba(36, 28, 21, 0.14);
  --od-s1: #b4632b;        /* ore plate series: copper */
  --od-s2: #241c15;        /*   hatched (ink lines on the plate) */
  --od-s3: #241c15;        /*   solid ink */
  --od-s4: #a9bc8a;        /*   light moss */
  --line: #d9ccb4;

  --serif: "Alegreya", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Alegreya Sans", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  --mono: "Cascadia Mono", Consolas, "Courier New", monospace;

  --wrap: 1200px;
  --pad: clamp(16px, 4vw, 40px);
  --gutter: 120px;         /* the margin column: chapter marks and section numerals */
  --gutter-gap: 40px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  font-kerning: normal;
}

[hidden] { display: none !important; }

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

a {
  color: var(--copper-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { color: var(--ink); text-decoration-color: var(--copper); }

:focus-visible {
  outline: 2px solid var(--copper-ink);
  outline-offset: 2px;
}

::selection { background: #ead3b4; color: var(--ink); }

code {
  font-family: var(--mono);
  font-size: 0.84em;
  padding: 0.05em 0.3em;
  background: rgba(36, 28, 21, 0.06);
  border-radius: 2px;
}

strong, b { font-weight: 700; }

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

.masthead-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 16px var(--pad) 14px;
}

.masthead--bar .masthead-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 32px;
  border-bottom: 1px solid var(--ink);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.wordmark:hover { color: var(--ink); }

.wordmark-text {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 27px;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.amp { font-style: italic; font-weight: 400; }

.anvil-mark { display: block; flex: none; }
.anvil-body { fill: var(--ink); }
.anvil-flame { fill: var(--copper); }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 30px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}

.site-nav a {
  display: inline-block;
  padding: 3px 0;
  color: var(--ink);
  text-decoration: none;
  text-decoration-color: var(--copper);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { text-decoration-line: underline; }

/* the home page carries the full masthead: mark over name over tagline */
.masthead--home .masthead-inner {
  padding-top: 44px;
  padding-bottom: 0;
  text-align: center;
}

.masthead--home .wordmark { flex-direction: column; gap: 12px; }
.masthead--home .wordmark-text { font-size: clamp(38px, 5vw, 52px); }

.tagline {
  margin: 12px 0 0;
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.masthead--home .site-nav {
  justify-content: center;
  gap: 2px 40px;
  margin-top: 28px;
  padding: 8px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* ---------------------------------------------------- page frame and gutter */

main {
  display: block;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 40px var(--pad) 56px;
  overflow-wrap: break-word;   /* a long source address breaks rather than widening a phone screen */
}

/* The chapter mark sits in the margin column beside a tool's title. It is
   page furniture written by build.py from the registry, outside <main>. */
.running-head {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.chapter-mark {
  margin: 0;
  padding-top: 24px;
  font-style: italic;
  font-size: 18px;
  line-height: 1.35;
  color: var(--copper-ink);
}

.page-tool main { padding-top: 6px; }

@media (min-width: 960px) {
  .page-tool main,
  .page-guide main,
  .page-doc main,
  .page-index main,
  .page-404 main {
    padding-left: calc(var(--pad) + var(--gutter) + var(--gutter-gap));
  }

  .page-tool main { padding-top: 40px; }

  .running-head { height: 0; }

  .chapter-mark {
    position: absolute;
    top: 46px;
    left: var(--pad);
    width: var(--gutter);
    padding-top: 0;
  }
}

/* ------------------------------------------------------------- type scale */

main h1 {
  margin: 0;
  max-width: 820px;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1.08;
}

main h2 {
  margin: 52px 0 0;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(26px, 2.8vw, 31px);
  line-height: 1.2;
}

main h3 {
  margin: 28px 0 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.3;
}

main p { margin: 14px 0 0; max-width: 38em; }

main ul,
main ol { margin: 14px 0 0; padding-left: 1.3em; max-width: 38em; }

main li + li { margin-top: 6px; }

main li::marker { color: var(--copper); }

.lede {
  margin-top: 18px;
  max-width: 820px;
  font-size: 20px;
  line-height: 1.65;
}

main h1 + .lede { margin-top: 18px; }

.small {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* the stamp line under a title: editions, verification, updates */
.version-stamp {
  margin: 14px 0 0;
  max-width: 820px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

.review-line {
  margin: 4px 0 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Numbered sections. The numeral hangs in the margin column on wide screens
   and sits over the heading on narrow ones; it is generated here, so the
   page text is untouched. */
.page-tool main,
.page-guide main,
.page-doc main { counter-reset: sec; }

.page-tool main h2,
.page-guide main h2,
.page-doc main h2 { position: relative; }

.page-tool main h2::before,
.page-guide main h2::before,
.page-doc main h2::before {
  counter-increment: sec;
  content: counter(sec);
  content: counter(sec) / "";
  display: block;
  margin-bottom: 6px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  color: var(--copper);
  font-variant-numeric: lining-nums tabular-nums;
}

.page-tool main .related-tools h2::before,
.page-guide main .related-tools h2::before { content: none; }

@media (min-width: 960px) {
  .page-tool main h2::before,
  .page-guide main h2::before,
  .page-doc main h2::before {
    position: absolute;
    top: -2px;
    left: calc(-1 * (var(--gutter) + var(--gutter-gap)));
    width: var(--gutter);
    margin: 0;
  }

  .page-doc main .editor-box h2::before {
    left: calc(-1 * (var(--gutter) + var(--gutter-gap)) - 23px);
  }
}

/* ------------------------------------------------------------ tool panels */

.anvil-card { margin: 0; }

.tool-panel {
  margin: 18px 0 0;
  padding: 18px 20px 20px;
  background: var(--plate);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* Rows of fields stack; the share button closes the last row when it fits. */
.tool-panel form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 20px;
  margin: 0;
}

.tool-panel form > * { flex: 1 1 520px; min-width: 0; }
.tool-panel form > .btn-row { flex: 0 0 auto; }
.tool-panel .field-row:has(> [hidden]:only-child) { display: none; }

.field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 20px;
  margin: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 150px;
  min-width: 0;
}

.field:has(> select) { flex: 2 1 220px; }
.field:has(> input[type="number"]) { max-width: 280px; }

.tool-panel label {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.tool-panel input:not([type="checkbox"]):not([type="radio"]),
.tool-panel select {
  display: block;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 12px;
  font-family: var(--sans);
  font-size: 18px;
  color: var(--ink);
  background: var(--field);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
}

.tool-panel input[type="number"] {
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}

.tool-panel input:focus-visible,
.tool-panel select:focus-visible { outline: 2px solid var(--copper-ink); outline-offset: 1px; }

.tool-panel input:disabled,
.tool-panel select:disabled {
  color: var(--ink-soft);
  background: var(--parchment);
  border-color: var(--ink-faint);
}

/* checkboxes: the label wraps the box */
.tool-panel label.check,
.tool-panel label.small,
.tool-panel .check-field label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

.tool-panel .check-field { flex: 0 1 auto; justify-content: flex-end; }

.tool-panel input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--copper-ink);
}

/* rows the designers add at run time (banner layers, enchantment pickers) */
.layer-row,
.picker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 10px 0 0;
}

.tool-panel .layer-row select,
.tool-panel .picker-row select { width: auto; flex: 1 1 170px; }

.tool-panel .picker-row input:not([type="checkbox"]) { width: 96px; flex: 0 0 96px; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0;
}

button.quiet,
button.keystone,
a.keystone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
}

button.quiet:hover { color: var(--plate); background: var(--ink); }

button.keystone,
a.keystone { color: var(--plate); background: var(--ink); }

button.keystone:hover,
a.keystone:hover { color: var(--plate); background: var(--copper-ink); border-color: var(--copper-ink); }

/* -------------------------------------------------------------- read-outs */

.result-slab { margin: 22px 0 0; }
.result-slab:empty { display: none; }
.result-slab > :first-child { margin-top: 0; }

.result-slab .headline,
.result-big {
  margin: 0;
  max-width: none;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(32px, 4.6vw, 46px);
  line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
}

.result-slab .headline small {
  display: inline-block;
  font-size: 21px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
}

#od-result .headline { font-size: clamp(44px, 6vw, 64px); line-height: 1; }

.result-detail,
.result-slab > p:not(.headline):not(.result-big) {
  margin: 8px 0 0;
  max-width: 46em;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
}

.result-detail b,
.result-slab b { font-variant-numeric: lining-nums tabular-nums; }

.result-slab .btn-row { margin-top: 14px; }

.result-slab .small { font-size: 15px; }

ol.chain-steps {
  margin: 10px 0 0;
  padding-left: 1.4em;
  font-family: var(--sans);
  font-size: 17px;
}

/* Minecraft chat colours read against the game's dark chat ground */
#cc-preview,
#cc-grad-preview {
  display: inline-block;
  padding: 2px 10px;
  color: #ffffff;
  background: #2b2621;
  border-radius: 2px;
  font-family: var(--sans);
}

#cc-preview:empty,
#cc-grad-preview:empty { display: none; }

/* ------------------------------------------------------------------ plates */

.plot-wrap {
  margin: 22px 0 0;
  padding: 14px;
  overflow: auto;
  max-height: 75vh;
  background: var(--plate);
  border: 1px solid var(--ink);
}

.plot-wrap canvas { display: block; margin: 0 auto; image-rendering: pixelated; }

figure.plate {
  margin: 24px 0 0;
  padding: 20px 22px 18px;
  background: var(--plate);
  border: 1px solid var(--ink);
}

.plate-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 20px;
}

.plate-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
}

.plate-title b { font-weight: 700; }

.plate .plot-wrap {
  margin: 12px 0 0;
  padding: 0;
  max-height: none;
  background: none;
  border: 0;
}

.plate figcaption {
  margin: 12px 0 0;
  max-width: 46em;
  font-size: 16px;
  line-height: 1.55;
}

.od-legend {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
}

.od-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.od-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: none;
}

.od-s1 { background: var(--od-s1); }
.od-s2 {
  background: repeating-linear-gradient(-45deg, var(--od-s2) 0 1.5px, var(--plate) 1.5px 4px);
  box-shadow: inset 0 0 0 1px var(--od-s2);
}
.od-s3 { background: var(--od-s3); }
.od-s4 { background: var(--od-s4); box-shadow: inset 0 0 0 1px var(--moss); }

/* the static circle on the circle generator page */
.circle-figure { margin: 24px 0 0; max-width: 300px; }

.circle-figure svg {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px;
  background: var(--plate);
  border: 1px solid var(--ink);
}

.circle-figure .cg-in { fill: var(--rule); }
.circle-figure .cg-ring { fill: var(--copper); }
.circle-figure figcaption { margin-top: 8px; }

/* ------------------------------------------------------------------ tables */

.data-table-wrap {
  margin: 16px 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.slab-table {
  width: auto;
  min-width: min(100%, 36em);
  margin: 0;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  font-variant-numeric: lining-nums tabular-nums;
}

/* four columns or more take the full measure; narrower tables keep their natural width */
table.slab-table:has(th:nth-child(4)) { width: 100%; }

.slab-table th {
  padding: 9px 14px 9px 0;
  text-align: left;
  vertical-align: bottom;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  border-bottom: 1.5px solid var(--ink);
}

.slab-table td {
  padding: 7px 14px 7px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}

.slab-table th:last-child,
.slab-table td:last-child { padding-right: 0; }

.slab-table td:first-child { font-weight: 500; }

.slab-table th.num,
.slab-table td.num { text-align: right; white-space: nowrap; }

/* a static table with no all-number column mixes figures and words in each
   column: set it flush left throughout */
main > .data-table-wrap > .slab-table:not(:has(th.num)) td.num { text-align: left; }

#od-features td:nth-child(3) { white-space: nowrap; }

.slab-table tr.num td { font-weight: 700; background: var(--plate); }

.slab-table tbody tr:last-child td { border-bottom-color: var(--ink); }

.slab-table code { font-size: 0.82em; }

/* ------------------------------------------------- notes, FAQs, related */

.honesty-note {
  margin: 28px 0 0;
  padding: 14px 0;
  max-width: 40em;
  font-size: 17px;
  line-height: 1.6;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

details.faq-item {
  margin: 0;
  padding: 12px 0;
  max-width: 40em;
  border-top: 1px solid var(--rule);
}

h2 + details.faq-item { margin-top: 14px; border-top-color: var(--ink); }

details.faq-item:last-of-type { border-bottom: 1px solid var(--rule); }

details.faq-item summary {
  position: relative;
  padding-left: 30px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

details.faq-item summary::-webkit-details-marker { display: none; }

details.faq-item summary::before {
  content: "+";
  position: absolute;
  left: 0;
  top: -1px;
  width: 20px;
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--copper-ink);
}

details.faq-item[open] > summary::before { content: "\2212"; }

details.faq-item p { margin: 8px 0 2px 30px; font-size: 18px; }

.related-tools { margin: 44px 0 0; max-width: 40em; }

.related-tools h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.related-tools ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.related-tools li {
  margin: 0;
  padding: 7px 0;
  font-size: 17px;
  line-height: 1.5;
  border-bottom: 1px solid var(--rule);
}

/* the canonical editor section on About and How this site is made */
.editor-box {
  margin: 40px 0 0;
  padding: 20px 22px 22px;
  max-width: 44em;
  background: var(--plate);
  border: 1px solid var(--ink);
}

.editor-box h2 { margin-top: 0; }
.editor-box p { max-width: none; }

/* contact and 404 blocks */
.page-doc main > .anvil-card,
.page-404 main > .anvil-card {
  margin-top: 28px;
  padding-top: 4px;
  max-width: 40em;
  border-top: 1px solid var(--ink);
}

/* ---------------------------------------------------------------- glossary */

dl.term-list {
  margin: 28px 0 0;
  border-top: 1px solid var(--ink);
}

dl.term-list dt {
  margin: 0;
  padding-top: 12px;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
}

dl.term-list dd {
  margin: 2px 0 0;
  padding-bottom: 12px;
  max-width: 38em;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 760px) {
  dl.term-list {
    display: grid;
    grid-template-columns: minmax(10em, 15em) minmax(0, 1fr);
  }

  dl.term-list dt {
    grid-column: 1;
    padding: 12px 24px 12px 0;
    border-bottom: 1px solid var(--rule);
  }

  dl.term-list dd {
    grid-column: 2;
    margin: 0;
    padding: 12px 0;
    max-width: none;
  }
}

/* ------------------------------------------------------------ guide index */

.page-index .guide-cards {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-width: none;
  columns: 2 380px;
  column-gap: 56px;
  border-top: 1px solid var(--ink);
}

.page-index .guide-cards > li {
  margin: 0;
  padding: 10px 0 11px;
  break-inside: avoid;
  border-bottom: 1px solid var(--rule);
}

.page-index .guide-cards > li > a { color: var(--ink); text-decoration: none; }

.page-index .guide-cards h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
}

.page-index .guide-cards > li > a:hover h3 {
  text-decoration: underline;
  text-decoration-color: var(--copper);
  text-underline-offset: 4px;
}

.page-index .guide-cards p {
  margin: 3px 0 0;
  font-size: 16px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-soft);
}

.page-index .guide-cards p.small { font-style: normal; font-size: 15px; }

/* -------------------------------------------------------------- home page */

.page-home main { padding-top: 36px; }

.intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 36px 72px;
}

.intro-text { flex: 1 1 520px; min-width: 0; }

.intro h1 {
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.12;
}

.intro .lede { max-width: 640px; }

.newest {
  flex: 1 1 360px;
  min-width: 0;
  max-width: 460px;
  margin: 0;
  padding: 18px 20px 16px;
  background: var(--plate);
  border: 1px solid var(--ink);
}

.newest-kicker {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.newest-title {
  margin: 2px 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.newest-title a {
  color: var(--ink);
  text-decoration-color: var(--copper);
  text-underline-offset: 4px;
}

.newest svg { display: block; width: 100%; height: auto; }

.newest figcaption {
  margin-top: 10px;
  font-size: 16px;
  font-style: italic;
  line-height: 1.5;
}

.pl-ore { fill: var(--copper); }
.pl-bed { fill: var(--bedrock); }
.pl-axis { stroke: var(--ink); stroke-width: 1; fill: none; }
.pl-text { fill: var(--ink); font-family: var(--sans); font-size: 12.5px; }

.contents { margin-top: 40px; }

.contents-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
  padding-top: 26px;
  border-top: 1px solid var(--ink);
}

.contents-head h2 {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 40px);
  line-height: 1.1;
}

.contents-head p {
  margin: 0;
  max-width: none;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink-soft);
}

.chapters {
  columns: 2 440px;
  column-gap: 72px;
  counter-reset: chapter;
}

.chapter {
  padding-top: 22px;
  break-inside: avoid;
  counter-increment: chapter;
}

.chapter-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
}

.chapter-num {
  flex: 0 0 52px;
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  color: var(--copper);
}

.chapter-num::before { content: counter(chapter, upper-roman); }

.chapter-head h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

ol.toc {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

ol.toc > li {
  margin: 0;
  padding: 8px 0 9px;
  border-bottom: 1px solid var(--rule);
}

.toc-row { display: flex; align-items: baseline; gap: 10px; }

.toc a {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
}

.toc-row a { flex: 0 1 auto; }

.toc a:hover {
  text-decoration: underline;
  text-decoration-color: var(--copper);
  text-underline-offset: 4px;
}

.leader {
  flex: 1 1 24px;
  min-width: 24px;
  position: relative;
  top: -5px;
  border-bottom: 1.5px dotted var(--ink-soft);
}

.toc-ed {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-soft);
  white-space: nowrap;
}

ol.toc p {
  margin: 1px 0 0;
  max-width: none;
  font-size: 15.5px;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-soft);
}

.chapter-note {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.rules {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--ink);
}

.rules h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 34px);
  line-height: 1.15;
}

.rules-sub {
  margin: 6px 0 0;
  font-size: 18px;
  font-style: italic;
  color: var(--ink-soft);
}

.rules-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px 48px;
  margin-top: 18px;
}

.rules-list p { margin: 0; font-size: 17px; line-height: 1.6; }

.rules-list strong {
  display: block;
  margin-bottom: 6px;
  font-size: 21px;
  line-height: 1.3;
}

/* ------------------------------------------------------------------ footer */

.site-foot { margin-top: 8px; }

.foot-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad) 30px;
  text-align: center;
}

.foot-inner::before {
  content: "";
  display: block;
  margin-bottom: 24px;
  border-top: 1px solid var(--ink);
}

.foot-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.foot-mark .wordmark-text { font-size: 22px; }

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 36px;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

.foot-nav p { margin: 0; }

.foot-group {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
}

.foot-nav a {
  display: inline-block;
  padding: 2px 0;
  color: var(--ink);
  text-decoration: none;
}

.foot-nav a:hover { text-decoration: underline; text-decoration-color: var(--copper); }

.foot-about {
  max-width: 640px;
  margin: 14px auto 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.legal-line {
  margin: 6px 0 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

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

@media (max-width: 640px) {
  body { font-size: 18px; }

  .wordmark-text { font-size: 24px; }
  .masthead--bar .anvil-mark { width: 34px; height: 21px; }
  .site-nav { gap: 2px 22px; }
  .masthead--home .site-nav { gap: 2px 24px; }

  .lede { font-size: 19px; }
  .tool-panel { padding: 16px 14px 18px; }
  figure.plate { padding: 16px 14px 14px; }
  .result-slab .headline small { font-size: 19px; }
  table.slab-table { font-size: 15px; }
  /* wide tables keep their columns and scroll sideways inside their wrapper */
  table.slab-table:has(th:nth-child(5)) { min-width: 620px; }
  table.slab-table:has(th:nth-child(7)) { min-width: 760px; }
  details.faq-item p { margin-left: 0; }
}

/* ------------------------------------------------------------------- print */

@media print {
  .masthead,
  .running-head,
  .site-foot,
  .btn-row,
  .tool-panel form { display: none; }

  body { background: #ffffff; }
  main { padding: 0 !important; max-width: none; }
  .tool-panel { padding: 0; border: 0; background: none; }
  .plot-wrap { max-height: none; overflow: visible; border: 0; }
  .page-tool main h2::before,
  .page-guide main h2::before,
  .page-doc main h2::before { position: static; display: inline; margin-right: 0.4em; font-size: 1em; }
}