* { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
    body {
      margin: 0;
      padding: 0;
      background-color: #ffffff;
      color: #1a1a1a;
      font-family: 'Libre Baskerville', Georgia, serif;
      font-size: 13px;
      line-height: 1.75;
    }

    .layout {
      max-width: 984px;
      margin: 0 auto;
      padding: 56px 28px 0;
      display: flex;
      align-items: flex-start;
      gap: 46px;
    }
    .article { flex: 1 1 auto; min-width: 0; max-width: 680px; padding-bottom: 48px; }

    .side {
      flex: 0 0 208px;
      width: 208px;
      position: sticky;
      top: 40px;
      max-height: calc(100vh - 64px);
      overflow-y: auto;
      padding-right: 6px;
      scrollbar-width: none; /* still scrollable — just no visible bar */
    }
    .side::-webkit-scrollbar { display: none; }
    .site-nav { display: flex; flex-direction: row; gap: 20px; margin: 0; padding: 26px 28px 0; }
    .site-nav a { font-size: 0.78rem; color: #595959; text-decoration: none; letter-spacing: 0.02em; }
    .site-nav a:hover { color: #1a1a1a; }
    .toc-label { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #a9a29a; margin-bottom: 12px; }
    .last-updated { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #a9a29a; margin-bottom: 28px; }
    a { color: #1a54d6; text-decoration: none; }
    a:hover { color: #123fa8; }

    .page-title {
      font-size: 2rem;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.01em;
      margin: 0 0 0.6em;
    }
    .page-description:empty { display: none; }

    h1, h2, h3, h4 { font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
    h2 { font-size: 1.4rem; margin: 2.2em 0 0.2em; padding-top: 0.6em; border-top: 1px solid #ece8e1; }
    h3 { font-size: 1.15rem; margin: 1.8em 0 0.2em; }
    h4 { font-size: 1.02rem; margin: 1.6em 0 0.2em; }
    h1 strong, h2 strong, h3 strong, h4 strong { font-weight: 700; }

    p { margin: 0.7em 0; }
    p:empty { margin: 0.35em 0; }

    ul, ol { margin: 0.5em 0; padding-left: 1.5em; }
    li { margin: 0.28em 0; padding-left: 0.15em; }
    li > ul, li > ol { margin: 0.28em 0; }
    ul.toggle, ul.to-do-list { list-style: none; padding-left: 0; }

    blockquote {
      margin: 1.1em 0;
      padding: 0.2em 0 0.2em 1.1em;
      border-left: 3px solid #d8d2c8;
      color: #555;
      font-style: italic;
    }
    blockquote p { margin: 0.5em 0; }

    figure { margin: 1.6em 0; text-align: center; }
    figure img { max-width: 100%; height: auto; border-radius: 4px; display: block; margin: 0 auto; }
    img { max-width: 100%; height: auto; }
    figcaption { font-size: 0.82rem; color: #8a8a8a; margin-top: 0.6em; font-style: italic; line-height: 1.5; }

    .source { display: block; border: 1px solid #e6e1d8; border-radius: 6px; padding: 0.7em 0.95em; margin: 1em 0; font-size: 0.82rem; word-break: break-word; }
    .source a { color: #1a54d6; }

    .video-embed { margin: 1.6em auto; max-width: 560px; text-align: center; }
    .video-embed .frame { position: relative; width: 100%; padding-top: 56.25%; border-radius: 4px; overflow: hidden; background: #000; }
    .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    .video-embed a { display: inline-block; margin-top: 0.55em; font-size: 0.9em; }

    nav.table_of_contents { margin: 0; padding: 0; }
    .table_of_contents-item { display: block; font-size: 0.8rem; line-height: 1.35; padding: 0.22rem 0; }
    .table_of_contents-indent-1 { margin-left: 0.85rem; }
    .table_of_contents-indent-2 { margin-left: 1.7rem; }
    .table_of_contents-link { color: #6a6a6a; text-decoration: none; border-bottom: none; }
    .table_of_contents-link:hover { color: #1a1a1a; }
    .table_of_contents-link.active { color: #1a1a1a; font-weight: 700; }

    .column-list { display: flex; gap: 22px; }
    .column { min-width: 0; flex: 1; }
    .column > figure:first-child { margin-top: 0; }

    details { margin: 1em 0; }
    summary { cursor: pointer; font-weight: 700; padding: 0.15em 0; }
    summary:hover { color: #000; }
    details[open] > summary { margin-bottom: 0.4em; }
    /* Indent a toggle's content (everything except its summary) a little,
       so open toggles read as nested under their heading. Nested toggles
       indent further, cumulatively. */
    details > *:not(summary) { margin-left: 1.2em; }

    hr { border: none; border-bottom: 1px solid #ece8e1; margin: 2em 0; }

    .comments { margin-top: 72px; padding-top: 20px; border-top: 1px solid #ece8e1; }
    .comments-title { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #a9a29a; font-weight: 700; margin-bottom: 22px; }

    .comment-field {
      display: block; width: 100%;
      font-family: inherit; font-size: 0.85rem; line-height: 1.6; color: #1a1a1a;
      background: #ffffff; border: 1px solid #e6e1d8; border-radius: 6px;
      padding: 0.55em 0.85em; margin: 0 0 10px;
    }
    .comment-field:focus { outline: none; border-color: #b9b2a6; }
    .comment-field::placeholder { color: #a9a29a; opacity: 1; }
    input.comment-field { max-width: 240px; }
    .comment-text { resize: vertical; min-height: 84px; }
    .comment-actions { display: flex; align-items: baseline; gap: 16px; }
    .comment-submit {
      font-family: inherit; font-size: 0.72rem; letter-spacing: 0.08em;
      color: #595959; background: none; border: 1px solid #d8d2c8; border-radius: 6px;
      padding: 0.5em 1.2em; cursor: pointer;
    }
    .comment-submit:hover { border-color: #1a1a1a; color: #1a1a1a; }
    .comment-submit[disabled] { opacity: 0.45; cursor: default; }
    .comment-cancel, .comment-reply, .comment-more { font-family: inherit; font-size: 0.72rem; color: #8a8a8a; background: none; border: none; padding: 0; cursor: pointer; }
    .comment-cancel:hover, .comment-reply:hover, .comment-more:hover { color: #1a1a1a; }
    .comment-status { font-size: 0.78rem; font-style: italic; color: #8a8a8a; }
    .comment-list { margin-top: 34px; }
    .comment { margin-bottom: 26px; }
    .comment-meta { font-size: 0.75rem; margin-bottom: 1px; }
    .comment-author { font-weight: 700; color: #1a1a1a; }
    .comment-author-badge {
      font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: #a9a29a; border: 1px solid #ece8e1; border-radius: 4px;
      padding: 0.05em 0.5em; margin-left: 8px;
    }
    .comment-date { color: #a9a29a; margin-left: 10px; }
    .comment-body { overflow-wrap: break-word; }
    .comment-body p { margin: 0.35em 0; }
    .comment-reply { color: #a9a29a; }
    .comment .comment-form { margin: 14px 0 4px; }
    .comment-replies { margin: 16px 0 0 4px; padding-left: 16px; border-left: 2px solid #ece8e1; }
    .comment-replies .comment { margin-bottom: 18px; }
    .comment-more { font-size: 0.78rem; }

    .footer-nav { margin: 0; padding: 24px 28px 48px; border-top: 1px solid #ece8e1; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; }
    .footer-nav-links { display: flex; flex-direction: row; gap: 20px; align-items: center; }
    .footer-nav a { font-size: 0.76rem; color: #595959; text-decoration: none; letter-spacing: 0.02em; }
    .footer-nav a:hover { color: #1a1a1a; }

    @media (min-width: 1140px) {
      .layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr);
        max-width: none;
        gap: 0;
        padding: 56px 28px 0;
        align-items: start;
      }
      .side {
        grid-column: 1;
        justify-self: start;
        width: 180px;
      }
      .article {
        grid-column: 2;
        margin: 0;
      }
    }

    @media (max-width: 880px) {
      .layout { flex-direction: column; gap: 0; padding: 48px 22px 0; }
      .side { position: static; width: auto; flex: none; max-height: none; overflow: visible; margin-bottom: 4px; padding-right: 0; }
      .site-nav { flex-direction: row; gap: 18px; margin-bottom: 10px; padding-bottom: 0; border-bottom: none; }
      .toc-label, .side nav.table_of_contents { display: none; }
      .article { max-width: none; padding-bottom: 48px; }
    }
    @media (max-width: 640px) {
      body { font-size: 13px; }
      .layout { padding: 44px 18px 0; }
      .page-title { font-size: 1.6rem; }
      .column-list { flex-direction: column; gap: 0; }
    }
  

    /* content images: smaller, centered — not full column width */
    figure.image img { max-width: min(100%, 420px); }