:root {
  color-scheme: light;
  --paper: #f4f0e7;
  --ink: #252824;
  --muted: #50584f;
  --accent: #633b38;
  --green: #36534d;
  --wash: #e5e8dc;
  --rule: #9da295;
  --white: #fffdf8;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body-size: 1.125rem;
  --small-size: 1rem;
  --lead-size: 1.35rem;
  --title-size: clamp(2.6rem, 5.8vw, 5rem);
  --line: 1.7;
  --measure: 65ch;
  --outer-width: 76rem;
  --margin-width: 13rem;
  --gutter: clamp(2rem, 5vw, 5rem);
  --space-xs: .5rem;
  --space-s: .75rem;
  --space-m: 1.25rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-xxl: 5rem;
  --target: 2.75rem;
  --dock-width: 44rem;
  --dock-height: 4.25rem;
  --radius: .15rem;
  --border: 1px;
  --focus: 3px;
}

* { box-sizing: border-box; }
html {
  font-family: var(--font);
  font-size: 16px;
  background: var(--paper);
  color: var(--ink);
  scroll-padding-block: var(--space-l) calc(var(--dock-height) + var(--space-xl));
}
body {
  margin: 0;
  font-size: var(--body-size);
  line-height: var(--line);
  padding-block-end: calc(var(--dock-height) + var(--space-xxl));
}
a {
  color: var(--accent);
  text-decoration-thickness: var(--border);
  text-underline-offset: .2em;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target);
  max-inline-size: 100%;
  padding-block: var(--space-xs);
  gap: var(--space-xs);
  overflow-wrap: anywhere;
}
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus) solid var(--green); outline-offset: 4px; }
p { margin-block: 0 var(--space-m); }
ul, dl { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 500; margin: 0; text-wrap: balance; }
h1 {
  font-size: var(--title-size);
  line-height: 1.06;
  letter-spacing: -.05em;
  max-inline-size: 16ch;
  margin-block: var(--space-s) var(--space-l);
}
h2 { font-size: 1.4rem; line-height: 1.32; max-inline-size: 18ch; }
h3 { font-size: 1.15rem; line-height: 1.45; margin-block: var(--space-l) var(--space-xs); }
main, #imprint {
  max-inline-size: var(--outer-width);
  margin-inline: auto;
  padding-inline: clamp(var(--space-m), 6vw, var(--space-xxl));
}
#imprint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-m);
  padding-block: var(--space-m);
  font-size: var(--small-size);
}
#imprint a { color: var(--ink); font-weight: 600; text-decoration: none; }
#imprint p { margin: 0; color: var(--muted); }
#skip {
  position: absolute;
  inset-block-start: var(--space-s);
  inset-inline-start: var(--space-s);
  z-index: 3;
  transform: translateY(-200%);
  padding: var(--space-s);
  background: var(--white);
}
#skip:focus { transform: none; }
#page-head {
  border-block-start: var(--border) solid var(--ink);
  padding-block: var(--space-xl) var(--space-l);
}
#page-head > p {
  color: var(--green);
  font-size: var(--small-size);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 0;
}
#page-head > div {
  max-inline-size: var(--measure);
  margin-inline-start: calc(var(--margin-width) + var(--gutter));
  font-size: var(--lead-size);
  line-height: 1.55;
}
article > section {
  display: grid;
  grid-template-columns: var(--margin-width) minmax(0, 1fr);
  gap: var(--gutter);
  padding-block: var(--space-xl);
  border-block-start: var(--border) solid var(--rule);
}
article > section > div { max-inline-size: var(--measure); min-inline-size: 0; }
article > section > div > :last-child { margin-block-end: 0; }
[data-attribution] { color: var(--muted); font-size: var(--small-size); }
[data-attribution] a { color: var(--green); }
dl > div {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr);
  gap: var(--space-l);
  padding-block: var(--space-m);
  border-block-end: var(--border) solid var(--rule);
  align-items: center;
}
dl > div:first-child { padding-block-start: 0; }
dl > div:last-child { border-block-end: 0; }
dt a { font-size: 1.35rem; justify-content: space-between; inline-size: 100%; }
dd { margin: 0; font-size: var(--body-size); }
figure {
  margin: var(--space-s) 0 var(--space-l);
  padding-block: var(--space-m);
  border-block: var(--border) solid var(--rule);
}
figure ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-l);
  margin-block: var(--space-m);
}
figure li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 5.5rem;
  padding: var(--space-s);
  border: var(--border) solid var(--green);
  color: var(--green);
  background: var(--wash);
  font-size: var(--small-size);
  text-align: center;
  line-height: 1.4;
}
figure li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--space-l));
  inline-size: var(--space-l);
  block-size: var(--border);
  background: var(--green);
}
figure[data-diagram="chain"] li { border-radius: 50%; }
figure[data-diagram="bill"] ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-m); }
figure[data-diagram="bill"] li + li::before {
  content: "+";
  inset-inline-start: calc(-1 * var(--space-m));
  inline-size: var(--space-m);
  block-size: auto;
  background: transparent;
}
figcaption { color: var(--muted); font-size: var(--small-size); line-height: 1.6; margin-block-start: var(--space-m); }
#evidence, #read-on, footer {
  margin-inline-start: calc(var(--margin-width) + var(--gutter));
  max-inline-size: var(--measure);
}
#evidence { margin-block: var(--space-l) var(--space-xl); }
summary { cursor: pointer; min-block-size: var(--target); }
#evidence summary { padding-block: var(--space-s); border-block: var(--border) solid var(--green); color: var(--green); }
#evidence details > div { padding-block-start: var(--space-m); }
#evidence ul, dialog ul { list-style: none; }
#evidence li a, dialog li a { display: flex; inline-size: 100%; min-block-size: var(--target); }
#read-on { display: flex; justify-content: space-between; gap: var(--space-l); margin-block: var(--space-xl); }
#read-on a { flex-wrap: wrap; max-inline-size: 48%; line-height: 1.5; padding-block: var(--space-m); border-block-start: var(--border) solid var(--accent); }
#read-on a > span:first-child { flex-basis: 100%; font-size: var(--small-size); color: var(--muted); }
footer { border-block-start: var(--border) solid var(--rule); padding-block-start: var(--space-l); font-size: var(--small-size); }
footer p { max-inline-size: var(--measure); }
footer a { font-size: var(--small-size); }
#dock {
  position: fixed;
  inset-block-end: max(var(--space-s), env(safe-area-inset-bottom));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: min(var(--dock-width), calc(100% - var(--space-m)));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: var(--space-xs);
  min-block-size: var(--dock-height);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 .25rem 1.5rem #25282418;
  z-index: 2;
  font-size: var(--small-size);
  line-height: 1.3;
}
#dock > a, #guide-index > summary {
  justify-content: center;
  min-block-size: 3.125rem;
  min-inline-size: 0;
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  padding-inline: var(--space-xs);
  border-radius: var(--radius);
}
#guide-index > summary { display: flex; align-items: center; list-style: none; }
#guide-index > summary::-webkit-details-marker { display: none; }
#guide-index > summary::after { content: " +"; white-space: pre; }
#guide-index[open] > summary::after { content: " −"; }
#guide-index:not([open]) #contents { display: none; }
#dock [aria-current] { color: var(--green); background: var(--wash); font-weight: 600; }
#contents {
  position: absolute;
  inset-block-end: calc(100% + var(--space-s));
  inset-inline: 0;
  inline-size: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  padding: var(--space-m);
  border: var(--border) solid var(--ink);
  background: var(--white);
  border-radius: var(--radius);
  max-block-size: calc(100dvh - var(--dock-height) - var(--space-xl));
  overflow-y: auto;
}
#contents a { padding-inline: var(--space-s); min-block-size: var(--target); min-inline-size: var(--target); }
dialog {
  inline-size: min(36rem, calc(100% - var(--space-m)));
  max-block-size: calc(100dvh - var(--space-l));
  margin-block: auto;
  margin-inline: auto var(--space-m);
  padding: var(--space-l);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--body-size);
}
dialog::backdrop { background: #252824a8; }
dialog > header { display: flex; justify-content: space-between; align-items: start; gap: var(--space-m); margin-block-end: var(--space-l); }
dialog h2 { font-size: 1.8rem; max-inline-size: 16ch; }
button {
  font: inherit;
  min-block-size: var(--target);
  min-inline-size: var(--target);
  padding: var(--space-xs) var(--space-s);
  border: var(--border) solid var(--green);
  border-radius: var(--radius);
  color: var(--green);
  background: var(--white);
  cursor: pointer;
}
dialog li { border-block-end: var(--border) solid var(--rule); }
dialog a { font-size: var(--small-size); }
@media (max-width: 760px) {
  :root { --lead-size: 1.2rem; --gutter: var(--space-m); --space-xxl: 3rem; }
  #imprint { flex-wrap: wrap; gap: 0 var(--space-m); padding-block: var(--space-s); }
  #imprint p { flex-basis: 100%; }
  #page-head { padding-block-start: var(--space-l); }
  #page-head > div, #evidence, #read-on, footer { margin-inline-start: 0; }
  article > section { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); padding-block: var(--space-l); }
  h2 { max-inline-size: 28ch; }
  dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  dt a { justify-content: start; gap: var(--space-m); }
  figure ul { gap: var(--space-m); }
  figure li + li::before { inset-inline-start: calc(-1 * var(--space-m)); inline-size: var(--space-m); }
  figure[data-diagram="bill"] ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  figure[data-diagram="bill"] li:nth-child(3)::before { content: none; }
  #read-on { gap: var(--space-m); }
  dialog { margin-inline: auto; padding: var(--space-m); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; animation: none; transition: none; }
}
@media print {
  body { padding-block-end: 0; background: white; }
  #dock, #skip, #guide-index, dialog { display: none; }
  #imprint, main { padding-inline: 0; }
  article > section { break-inside: avoid; }
  #evidence details > div { display: block; }
  a { color: var(--ink); }
}