/* Scoped Tufte-inspired typography + sidenotes for Fluid.
   Activate per-post by setting front-matter: tufte: true
*/

.post-content.tufte-enabled {
  counter-reset: tufte-sidenote-counter;
}

@media (min-width: 1200px) {
  .post-content.tufte-enabled {
    --tufte-text-width: 760px;
    --tufte-note-width: 300px;
    --tufte-note-gap: 32px;
    --tufte-shell-pad: 24px;
    --tufte-total-width: calc(
      var(--tufte-text-width) +
      var(--tufte-note-width) +
      var(--tufte-note-gap) +
      var(--tufte-shell-pad) * 2
    );

    max-width: var(--tufte-total-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--tufte-shell-pad);
    padding-right: var(--tufte-shell-pad);
  }
}

.post-content.tufte-enabled .markdown-body {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-family: "Noto Serif SC", "Noto Serif", "Georgia", serif;
  font-size: 1.05rem;
  line-height: 1.75;
}

@media (min-width: 1200px) {
  .post-content.tufte-enabled .markdown-body {
    max-width: var(--tufte-text-width);
    margin-left: 0;
    margin-right: calc(var(--tufte-note-width) + var(--tufte-note-gap));
  }
}

.post-content.tufte-enabled .markdown-body h1,
.post-content.tufte-enabled .markdown-body h2,
.post-content.tufte-enabled .markdown-body h3,
.post-content.tufte-enabled .markdown-body h4,
.post-content.tufte-enabled .markdown-body h5,
.post-content.tufte-enabled .markdown-body h6 {
  font-family: inherit;
  letter-spacing: 0.01em;
}

.post-content.tufte-enabled .markdown-body p {
  margin: 1.1rem 0;
}

/* Notes markup. */
.post-content.tufte-enabled input.margin-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.post-content.tufte-enabled label.margin-toggle {
  cursor: pointer;
}

/* Hide the marginnote toggle (plus icon) on desktop; show on mobile only. */
.post-content.tufte-enabled label.margin-toggle:not(.sidenote-number) {
  display: none;
}

.post-content.tufte-enabled label.margin-toggle.sidenote-number {
  counter-increment: tufte-sidenote-counter;
}

.post-content.tufte-enabled label.margin-toggle.sidenote-number::after {
  content: counter(tufte-sidenote-counter);
  vertical-align: super;
  font-size: 0.75em;
  line-height: 1;
  margin-left: 0.1em;
}

.post-content.tufte-enabled .sidenote,
.post-content.tufte-enabled .marginnote {
  float: right;
  clear: right;
  width: 300px;
  margin-right: -332px;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  font-size: 0.92rem;
  line-height: 1.55;
  opacity: 0.92;
  color: var(--sec-text-color, #718096);
}

@media (min-width: 1200px) {
  .post-content.tufte-enabled .sidenote,
  .post-content.tufte-enabled .marginnote {
    width: var(--tufte-note-width);
    margin-right: calc(-1 * (var(--tufte-note-width) + var(--tufte-note-gap)));
  }
}

.post-content.tufte-enabled .sidenote::before {
  content: counter(tufte-sidenote-counter) " ";
  vertical-align: super;
  font-size: 0.75em;
  line-height: 1;
}

/* Mobile and tablet: fold notes behind toggles */
@media (max-width: 1199.98px) {
  .post-content.tufte-enabled .markdown-body {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .post-content.tufte-enabled label.margin-toggle:not(.sidenote-number) {
    display: inline;
  }

  .post-content.tufte-enabled .sidenote,
  .post-content.tufte-enabled .marginnote {
    float: none;
    clear: none;
    width: 100%;
    margin: 0.75rem 0;
    display: none;
  }

  .post-content.tufte-enabled input.margin-toggle:checked + .sidenote,
  .post-content.tufte-enabled input.margin-toggle:checked + .marginnote {
    display: block;
  }
}

.post-content.tufte-enabled .sidenote p,
.post-content.tufte-enabled .marginnote p {
  margin: 0.6rem 0;
}

.post-content.tufte-enabled .sidenote p:first-child,
.post-content.tufte-enabled .marginnote p:first-child {
  margin-top: 0;
}

.post-content.tufte-enabled .sidenote p:last-child,
.post-content.tufte-enabled .marginnote p:last-child {
  margin-bottom: 0;
}

@media (min-width: 1200px) {
  .tufte-board-shell.container {
    max-width: min(1540px, 98vw);
  }

  .tufte-board-shell #board {
    padding-left: clamp(2.75rem, 5vw, 5rem);
    padding-right: clamp(2.75rem, 5vw, 5rem);
  }
}

/* Tufte full-width media inside article body (text + sidenote lane width). */
@media (min-width: 1200px) {
  .post-content.tufte-enabled .markdown-body figure.fullwidth {
    width: calc(100% + var(--tufte-note-width) + var(--tufte-note-gap));
    max-width: none;
    margin-left: 0;
    margin-right: calc(-1 * (var(--tufte-note-width) + var(--tufte-note-gap)));
  }

  .post-content.tufte-enabled .markdown-body figure.fullwidth > img,
  .post-content.tufte-enabled .markdown-body figure.fullwidth > a > img {
    width: 100%;
    max-width: 100%;
    display: block;
  }

  .post-content.tufte-enabled .markdown-body figure.fullwidth > figcaption {
    display: block;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--sec-text-color, #718096);
  }
}

@media (min-width: 1200px) {
  .post-content.tufte-enabled .markdown-body img.fullwidth,
  .post-content.tufte-enabled .markdown-body video.fullwidth {
    display: block;
    width: calc(100% + var(--tufte-note-width) + var(--tufte-note-gap));
    max-width: none;
    margin-left: 0;
    margin-right: calc(-1 * (var(--tufte-note-width) + var(--tufte-note-gap)));
  }
}

/* 20260208e: avoid note/fullwidth overlap + note media + math polish */
@media (min-width: 1200px) {
  .post-content.tufte-enabled .markdown-body figure.fullwidth,
  .post-content.tufte-enabled .markdown-body img.fullwidth,
  .post-content.tufte-enabled .markdown-body video.fullwidth {
    clear: right;
  }
}

.post-content.tufte-enabled .sidenote img,
.post-content.tufte-enabled .marginnote img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0.45rem 0;
}

.post-content.tufte-enabled .markdown-body .math.display {
  display: block;
  margin: 1.25rem 0 1.35rem;
  text-align: center;
  font-family: "STIX Two Text", "Times New Roman", "Noto Serif", serif;
  font-size: 1.06rem;
  line-height: 1.6;
  letter-spacing: 0.005em;
}

.post-content.tufte-enabled .markdown-body .math.inline {
  font-family: "STIX Two Text", "Times New Roman", "Noto Serif", serif;
}

.post-content.tufte-enabled .markdown-body .math.display sub,
.post-content.tufte-enabled .markdown-body .math.display sup {
  font-size: 0.78em;
}

/* 20260208m: Quote rhythm tuned smaller than body, with explicit author-line detection. */
.post-content.tufte-enabled .markdown-body blockquote {
  border-left: 2px solid rgba(66, 84, 108, 0.42) !important;
  padding: 0.45rem 0 0.45rem 0.95rem !important;
  margin: 2rem 0 !important;
  background: linear-gradient(90deg, rgba(66, 84, 108, 0.06), rgba(66, 84, 108, 0) 60%);
  color: color-mix(in srgb, var(--post-text-color, #2c3e50) 94%, #1d2735 6%);
  font-size: 0.97rem;
  line-height: 1.7;
}

.post-content.tufte-enabled .markdown-body blockquote p {
  margin: 0.65rem 0 !important;
}

@media (min-width: 1200px) {
  .post-content.tufte-enabled .markdown-body blockquote p {
    width: 100%;
    margin-right: 0 !important;
  }

  .post-content.tufte-enabled .markdown-body blockquote p + p:last-child,
  .post-content.tufte-enabled .markdown-body blockquote cite:last-child {
    width: 100%;
    display: block;
    margin-top: 0.45rem !important;
    text-align: right;
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    opacity: 0.72;
    font-style: normal;
  }
}

@media (max-width: 1199.98px) {
  .post-content.tufte-enabled .markdown-body blockquote {
    padding-left: 0.78rem !important;
    background: linear-gradient(90deg, rgba(66, 84, 108, 0.05), rgba(66, 84, 108, 0) 72%);
  }

  .post-content.tufte-enabled .markdown-body blockquote p {
    width: 100%;
    margin-right: 0 !important;
  }

  .post-content.tufte-enabled .markdown-body blockquote p + p:last-child,
  .post-content.tufte-enabled .markdown-body blockquote cite:last-child {
    font-size: 0.82rem;
  }
}

/* 20260208n-extra: reserve left TOC lane on very wide desktop for tufte posts. */
@media (min-width: 1500px) {
  .post-content.tufte-enabled.tufte-left-toc-ready {
    --tufte-left-toc-width: clamp(240px, 15vw, 320px);
    --tufte-left-toc-gap: clamp(20px, 2vw, 36px);

    max-width: calc(var(--tufte-total-width) + var(--tufte-left-toc-width) + var(--tufte-left-toc-gap));
    padding-left: calc(var(--tufte-shell-pad) + var(--tufte-left-toc-width) + var(--tufte-left-toc-gap));
    padding-right: var(--tufte-shell-pad);
  }
}

/* 20260208n-extra: tighten desktop paragraph line rhythm while keeping paragraph spacing. */
@media (min-width: 1200px) {
  .post-content.tufte-enabled .markdown-body {
    line-height: 1.66;
  }

  .post-content.tufte-enabled .markdown-body p {
    margin-top: 1.05rem;
    margin-bottom: 1.05rem;
  }
}