/* c0mp0und site. One file. Tokens are the app's (DESIGN 2.1), light only.
   No red. No web font. No framework. Units are rem so 200% zoom reflows. */

:root {
  color-scheme: light;
  --ground: #F5EFE3;
  --card: #FFFBF2;
  --sunk: #EAE2D1;
  --ink: #1B1812;      /* 15.46 on ground, 17.14 on card */
  --ink2: #453F34;     /* 9.11 / 10.10 */
  --ink3: #5A5345;     /* 6.65 / 7.37, the lightest text allowed */
  --moss: #1D4B38;     /* 8.67 / 9.61 */
  --moss-deep: #143A2B;
  --on-moss: #FFFBF2;  /* 9.61 on moss */
  --line: #857D6B;     /* borders and strokes only, never text */
  --ring: #8A5A00;     /* 5.18 on ground */
  --heads-bg: #F7E3A8; /* ink on it 13.92 */
  --heads-edge: #7A5A00;
  --measure: 40rem;
  --font: -apple-system, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* The page is a single column with a 16px gutter. */
.bar, main, .foot {
  width: 100%;
  max-width: calc(var(--measure) + 2rem);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* ---------- skip link ---------- */
.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--moss);
  padding: 0.5rem 1rem;
  z-index: 10;
}
.skip:focus { top: 0.5rem; }

/* ---------- links and focus ---------- */
a { color: var(--moss); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--moss); outline-offset: 2px; }

/* ---------- top bar: the mark and three links, nothing else ---------- */
.top { border-bottom: 2px solid var(--moss); background: var(--card); }
.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1.5rem;
  padding-block: 0.25rem;
}
.brand {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
}
.top ul, .foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: 1.25rem; }
.top a, .foot ul a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 1rem;
}
.top ul a[aria-current="page"] { font-weight: 700; text-decoration-thickness: 3px; }

/* ---------- reading ---------- */
main { padding-block: 2rem 3rem; }

.for {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink3);
}

h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.12; margin-bottom: 1.25rem; }
h2 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.2rem; margin-top: 1.5rem; margin-bottom: 0.4rem; }

p { margin: 0 0 1rem; }
.lede { font-size: 1.25rem; color: var(--ink2); }
.meta { color: var(--ink3); font-size: 1rem; }

ul.plain, ol.plain { margin: 0 0 1rem; padding-left: 1.4rem; }
ul.plain li, ol.plain li { margin-bottom: 0.5rem; }

dl.pools { margin: 0 0 1rem; }
dl.pools dt { font-weight: 700; margin-top: 1.25rem; }
dl.pools dd { margin: 0.2rem 0 0; }

/* ---------- the two equal doors on the home page ---------- */
.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.75rem 0 0.5rem;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 3.5rem;
  padding: 0.5rem 1rem;
  background: var(--moss);
  color: var(--on-moss);
  border: 2px solid var(--moss);
  border-radius: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}
.btn:hover { background: var(--moss-deep); border-color: var(--moss-deep); }
@media (max-width: 30rem) { .doors { grid-template-columns: 1fr; } }

.handoff { margin: 1.5rem 0; }
.handoff .btn { display: inline-flex; padding-inline: 2rem; }

/* ---------- the figure ---------- */
figure.flow { margin: 2.5rem 0 1rem; padding: 1rem; background: var(--card); border: 2px solid var(--moss); border-radius: 0.875rem; }
figure.flow svg { display: block; width: 100%; max-width: 22.5rem; height: auto; margin-inline: auto; }
figure.flow figcaption { margin-top: 1rem; font-size: 1rem; color: var(--ink2); }
.f-t { font-family: var(--font); font-size: 15px; fill: var(--ink3); }
.f-b { font-family: var(--font); font-size: 18px; font-weight: 700; fill: var(--ink); }
.f-onmoss { font-family: var(--font); font-size: 18px; font-weight: 700; fill: var(--on-moss); }
.f-stream { fill: none; stroke: var(--ink3); stroke-width: 2.5; stroke-linecap: round; }
.f-spine { fill: none; stroke: var(--ink3); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.f-pot { fill: var(--card); stroke: var(--moss); stroke-width: 3; }
.f-level { fill: var(--moss); }
.f-floor-in { stroke: var(--on-moss); stroke-width: 2.5; stroke-dasharray: 5 4; }
.f-floor-out { stroke: var(--ink); stroke-width: 2.5; }
.f-node { fill: var(--card); stroke: var(--ink); stroke-width: 2.5; }
.f-box { fill: var(--card); stroke: var(--ink); stroke-width: 3; }
.f-ring { fill: none; stroke: var(--ring); stroke-width: 3; }
.f-arrow { fill: var(--ink3); }

/* ---------- rules ---------- */
ol.rules { margin: 0 0 1rem; padding-left: 2.25rem; }
ol.rules li { margin-bottom: 1.1rem; padding-left: 0.25rem; }
ol.rules li:target { background: var(--sunk); outline: 2px solid var(--moss); outline-offset: 4px; }
.own { display: block; font-size: 0.95rem; color: var(--ink3); margin-top: 0.1rem; }

/* ---------- help ---------- */
.jump { list-style: none; margin: 0 0 1rem; padding: 0; }
.jump li a { display: inline-flex; align-items: center; min-height: 2.75rem; }
main section h2:first-child { margin-top: 2rem; }

/* ---------- notes ---------- */
.draft {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--heads-bg);
  color: var(--ink);
  border: 2px solid var(--heads-edge);
  border-radius: 0.75rem;
  font-size: 1rem;
}
.rule-ref { font-size: 0.95rem; color: var(--ink3); }

/* ---------- footer ---------- */
footer { border-top: 2px solid var(--moss); background: var(--card); margin-top: 1rem; }
.foot { padding-block: 1.25rem 2rem; }
.slot {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--heads-bg);
  color: var(--ink);
  border: 2px dashed var(--heads-edge);
  border-radius: 0.5rem;
  font-size: 1rem;
}

/* ---------- almost no motion, and none if asked ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .top, footer .foot ul, .skip { display: none; }
  body { background: #fff; }
}