/* The Desk: the blog index and posts */

    /* ---------- Index ---------- */
    .desk-intro { padding-bottom: 24px; }
    .desk-index { padding: 24px var(--gutter) 110px; }
    .desk-list { display: grid; gap: 56px; max-width: 1100px; margin: 0 auto; }
    .desk-card { display: flex; flex-direction: column; }
    .desk-pic { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: var(--taupe); }
    .desk-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
    .desk-card:hover .desk-pic img { transform: scale(1.03); }
    .desk-tag { margin-top: 20px; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rosewood-ink); }
    .desk-title { margin-top: 10px; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.25; }
    .desk-sum { margin-top: 12px; color: var(--stone-ink); max-width: 34em; }
    .desk-read { align-self: flex-start; margin-top: 18px; font-size: 14px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
    @media (min-width: 900px) {
      .desk-list { grid-template-columns: 1fr 1fr; gap: 72px 56px; }
      .desk-list > .desk-card:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: 7fr 5fr; column-gap: 56px; align-items: center; }
      .desk-list > .desk-card:only-child .desk-pic { grid-row: 1 / span 5; }
      .desk-list > .desk-card:only-child .desk-tag { margin-top: 0; }
      .desk-title { font-size: 2rem; }
    }

    /* ---------- Post ---------- */
    .post { padding: 72px var(--gutter) 40px; }
    .post-head, .post-body, .post-foot { max-width: 720px; margin: 0 auto; }
    .post-head .eyebrow a { border-bottom: 1px solid currentColor; }
    .post-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.12; margin: 18px 0 20px; }
    .post-meta { font-size: 14px; color: var(--stone-ink); }
    .post-cover { max-width: 1100px; margin: 48px auto 56px; }
    .post-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }

    /* The summary card: white linen, right under the cover, three points at most */
    .post-tldr { max-width: 720px; margin: -16px auto 64px; padding: 28px 32px 30px; background: var(--white) url(images/linen-light.svg); background-size: 360px 360px; border: 1px solid rgba(65, 28, 50, 0.12); border-radius: 6px; }
    .tldr-label { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rosewood-ink); margin: 0 0 14px; }
    .post-tldr ul { margin: 0; padding-left: 1.2em; font-size: 16px; line-height: 1.7; }
    .post-tldr li + li { margin-top: 10px; }
    .post-tldr li::marker { color: var(--rosewood-ink); }
    @media (max-width: 600px) { .post-tldr { padding: 22px 20px 24px; margin-bottom: 48px; } }

    .post-body { font-size: 17px; line-height: 1.8; }
    .post-body > * + * { margin-top: 22px; }
    .post-body h2 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.2; margin-top: 64px; scroll-margin-top: 90px; }
    .post-body h3 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.3; margin-top: 40px; }
    .post-body h2 + *, .post-body h3 + * { margin-top: 16px; }
    .post-body ol, .post-body ul { padding-left: 1.3em; }
    .post-body li + li { margin-top: 10px; }
    .post-body li::marker { color: var(--rosewood-ink); }
    .post-body strong { font-weight: 500; }

    /* Tables: a clean grid on wide screens, stacked cards on phones */
    .table-wrap { margin-top: 28px; }
    .post-body table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
    .post-body th { text-align: left; font-weight: 400; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rosewood-ink); padding: 0 16px 12px 0; border-bottom: 1px solid rgba(65, 28, 50, 0.25); }
    .post-body td { vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid rgba(65, 28, 50, 0.12); }
    .post-body td:first-child { font-family: var(--serif); font-size: 16px; }
    @media (max-width: 699px) {
      .post-body thead { display: none; }
      .post-body table, .post-body tbody, .post-body tr, .post-body td { display: block; }
      .post-body tr { padding: 16px 0; border-bottom: 1px solid rgba(65, 28, 50, 0.15); }
      .post-body td { border: 0; padding: 2px 0; }
      .post-body td:first-child { font-size: 17px; margin-bottom: 6px; }
      .post-body td:not(:first-child)::before { content: attr(data-label) ': '; color: var(--rosewood-ink); }
    }

    /* The copy-paste prompt, and other code */
    .prompt-block { margin-top: 32px; border-radius: 6px; background: var(--white); border: 1px solid rgba(65, 28, 50, 0.12); overflow: hidden; }
    .prompt-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; background: var(--plum); color: var(--paper); }
    .prompt-bar span { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--taupe); }
    .copy-prompt { font: inherit; font-size: 14px; color: var(--white); background: #8a6465; border: 0; padding: 10px 18px; min-height: 44px; cursor: pointer; }
    .copy-prompt:hover { background: #74504f; }
    .prompt-block pre { max-height: 460px; overflow: auto; padding: 20px 18px; }
    .post-body pre code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; line-height: 1.65; white-space: pre; color: var(--plum); }
    pre.code { padding: 18px; border-radius: 6px; background: var(--white); border: 1px solid rgba(65, 28, 50, 0.12); overflow: auto; }

    .post-cta { margin-top: 36px !important; }
    .post-foot { padding: 64px 0 40px; font-size: 15px; }

    .desk-more { background: var(--white); padding: 90px var(--gutter) 110px; }
    .desk-more-inner { max-width: 1100px; margin: 0 auto; }
    .desk-more .eyebrow { margin-bottom: 36px; }
    @media (max-width: 699px) { .post-body pre code { white-space: pre-wrap; word-break: break-word; } }

    /* A row of numbered parts: [[parts: Caption ;; Name | line ;; ...]] */
    .parts { margin-top: 32px; }
    .parts figcaption { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rosewood-ink); margin-bottom: 16px; }
    .parts ol { list-style: none; padding: 0; display: grid; gap: 12px; }
    .parts li { margin: 0; padding: 18px 18px 20px; border: 1px solid rgba(65, 28, 50, 0.16); border-radius: 6px; background: var(--white); display: flex; flex-direction: column; gap: 4px; }
    .parts li + li { margin-top: 0; }
    .parts .n { font-family: var(--serif); font-size: 1.6rem; line-height: 1; color: var(--rosewood-ink); }
    .parts .nm { font-family: var(--serif); font-size: 1.1rem; margin-top: 6px; }
    .parts .tx { font-size: 14px; line-height: 1.55; color: var(--stone-ink); }
    @media (min-width: 700px) { .parts ol { grid-template-columns: repeat(4, 1fr); } }

    /* Polaroids: a person's photo in an even white frame, slightly tilted */
    .post-body h2, .post-body h3 { clear: both; }
    .polaroid { background: var(--white); padding: 10px; box-shadow: 0 1px 2px rgba(20, 10, 16, 0.08), 0 14px 30px -14px rgba(20, 10, 16, 0.35); width: 64%; max-width: 260px; margin: 18px auto 8px; transform: rotate(-1.5deg); }
    .polaroid.l { transform: rotate(1.5deg); }
    .polaroid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; background: var(--paper); }
    .polaroid figcaption { padding: 10px 4px 2px; text-align: center; font-family: var(--serif); font-size: 14px; line-height: 1.4; color: var(--plum); }
    /* Room between people: each name starts well clear of the photo above it */
    .post-body:has(.polaroid) h3 { margin-top: 72px; }
    .polaroid { margin-bottom: 28px; }
    @media (min-width: 700px) {
      .polaroid { width: 230px; margin: 10px 0 56px 36px; float: right; }
      .polaroid.l { float: left; margin: 10px 36px 56px 0; }
    }