/* ── Sidenotes — V4 ────────────────────────────────── */
/* Tufte-style margin notes, CSS-only mobile toggle.    */

.sidenote-toggle {
  counter-increment: sidenote-counter;
  cursor: pointer;
}

.sidenote-toggle::after {
  content: counter(sidenote-counter);
  font-size: 0.6rem;
  vertical-align: super;
  line-height: 0;
  color: var(--accent);
  margin-left: 0.06rem;
  margin-right: 0.1rem;
  font-weight: 500;
}

.sidenote-toggle-check { display: none; }

.sidenote {
  position: absolute;
  right: -15rem;
  width: 13rem;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--text-muted);
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
  font-weight: 300;
}

.sidenote::before {
  content: counter(sidenote-counter) ". ";
  font-weight: 500;
  color: var(--accent);
  font-size: 0.66rem;
}

.sidenote em { font-style: italic; }
.sidenote a {
  color: var(--accent);
  font-size: inherit;
}

/* ── Responsive: collapse to inline ───────────────── */
@media (max-width: 1100px) {
  .sidenote {
    position: relative;
    right: auto;
    display: none;
    width: auto;
    max-width: 100%;
    margin: 0.3rem 0 1rem 0.8rem;
    padding: 0.6rem 0.9rem;
    border-left: 2px solid var(--accent-light);
    background: var(--bg-warm);
    font-size: 0.78rem;
  }

  .sidenote-toggle { cursor: pointer; }

  .sidenote-toggle::after {
    background: rgba(156, 106, 60, 0.1);
    padding: 0.04rem 0.28rem;
    border-radius: 3px;
    font-weight: 600;
  }

  .sidenote-toggle-check:checked + .sidenote {
    display: block;
  }
}