:root {
  --paper: #fafafa;
  --graphite: #595959;
  --ink: #1c1c1c;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --text-caption: 13px;
  --text-body: 21px;
  --gap: 29px;
  --section-gap: 48px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--graphite);
  font: 600 var(--text-body)/1.55 var(--font);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 520px;
  margin: 0 auto;
  padding: 96px 16px var(--section-gap);
}

/* Headings stay semantic but read as body text: hierarchy comes from colour, not size. */
h1, h2 { font: inherit; color: var(--ink); margin: 0 0 var(--gap); }
p, ul { margin: 0 0 var(--gap); }
strong { color: var(--ink); font-weight: 600; }

a { color: var(--ink); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--graphite); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

footer {
  margin-top: var(--section-gap);
  font-size: var(--text-caption);
  font-weight: 400;
  letter-spacing: -0.002em;
}

/* Key terms: thin underline that turns into a rolling wave on hover. The SVG stroke hard-codes --ink (%231c1c1c); data URIs cannot read CSS variables. */
.term {
  padding-bottom: 6px;
  background: linear-gradient(var(--graphite), var(--graphite)) no-repeat 0 calc(100% - 3px) / 100% 1px;
}
.term:hover, .term.open {
  color: var(--ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='6'%3E%3Cpath d='M0 3 Q5 0 10 3 T20 3' fill='none' stroke='%231c1c1c' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x 0 100% / 20px 6px;
  animation: wave 0.6s linear infinite;
}
@keyframes wave { to { background-position: 20px 100%; } }
@media (prefers-reduced-motion: reduce) { .term:hover, .term.open { animation: none; } }

/* Mark: three tree hieroglyphs (U+131AD). Shape depends on the visitor's font. */
.trees { font-size: 36px; line-height: 1; font-weight: 400; color: var(--graphite); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Tooltip on a .term: ink card below the word, shown on hover or keyboard focus. */
.tip { position: relative; outline: none; }
.tip-text {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 1;
  width: min(340px, calc(100vw - 32px));
  padding: 12px 14px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.tip-text > span { display: block; }
.tip-list { width: max-content; }
.tip-text b { font-weight: 600; font-size: 15px; }
.tip-text .def-quote { margin: 10px 0 4px; }
/* Only one card at a time: hover and focus previews switch off while a card is pinned open. */
.tip.open .tip-text,
main:not(:has(.tip.open)) .tip:is(:hover, :focus-visible) .tip-text { opacity: 1; transform: none; }