/* Article pages — extends style.css + friendly.css.
   The brighter Nunito direction carries through headings; style.css's
   serif/mono stack is never actually loaded on this site. */

.essay { max-width: 76ch; margin: 0 auto; }

.essay-head { margin: 4px 0 30px; }
.essay h1 { font: 900 clamp(30px, 4.4vw, 44px)/1.08 'Nunito', sans-serif; letter-spacing: -1.2px; margin: 0 0 10px; text-wrap: balance; }
.essay-meta { font-size: 12px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: 6px 14px; }

.essay h2 { font: 900 26px/1.15 'Nunito', sans-serif; letter-spacing: -0.5px; text-transform: none; color: var(--text); border: 0; border-top: 2px solid var(--border); padding: 22px 0 0; margin: 42px 0 14px; }
.essay h3 { font: 900 19px/1.25 'Nunito', sans-serif; letter-spacing: -0.2px; margin: 30px 0 10px; }
.essay p { font-size: 17px; line-height: 1.7; margin: 0 0 1.15em; }
.essay ul { margin: 0 0 1.15em; padding-left: 1.15em; }
.essay li { margin-bottom: 0.45em; }
.essay li p { font-size: 17px; margin-bottom: 0.35em; }
.essay a { color: var(--purple); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.essay strong { font-weight: 900; }

.essay figure { margin: 26px 0; }
.essay figure img { display: block; width: 100%; height: auto; border: 2px solid var(--border); border-radius: 12px; box-shadow: 4px 4px 0 var(--border); background: var(--bg-card); }
.essay figcaption { font-size: 12.5px; font-weight: 700; line-height: 1.45; color: var(--text-secondary); margin-top: 9px; }

.figure-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; margin: 26px 0; align-items: start; }
.figure-row.square { grid-template-columns: repeat(auto-fit, minmax(170px, 320px)); justify-content: start; }
.figure-row.portrait { grid-template-columns: repeat(auto-fit, minmax(150px, 240px)); justify-content: start; }
.figure-row figure { margin: 0; }

.table-scroll { overflow-x: auto; margin: 20px 0 34px; border: 2px solid var(--border); border-radius: 12px; background: var(--bg-card); box-shadow: 4px 4px 0 var(--border); }
.essay table { border-collapse: collapse; width: 100%; font-size: 14px; }
.essay th, .essay td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.essay thead th { font-weight: 900; font-size: 11.5px; letter-spacing: 0.6px; text-transform: uppercase; background: var(--yellow); color: #292061; border-bottom: 2px solid var(--border); white-space: nowrap; }
.essay tbody tr:last-child td { border-bottom: 0; }
.essay td + td + td { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .essay p, .essay li p { font-size: 16px; }
  .essay h2 { font-size: 22px; margin-top: 34px; }
  .figure-row { gap: 14px; }
}

/* Compact illustrations, with related examples kept together. */
.essay > figure { max-width: 460px; margin: 24px auto; }
.essay .tooling-footnote > figure { margin: 24px auto; }
.essay .essay-image-row { display: grid; gap: 12px; align-items: center; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.essay .haaland-group { max-width: 100%; }
.essay .haaland-group .essay-image-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.essay .haaland-group img { max-height: 220px; object-fit: contain; background: transparent; border: 0; box-shadow: none; }
.essay .tiktok-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 440px; margin: 24px auto; }
.essay .tiktok-examples figure { margin: 0; min-width: 0; }
.essay .recipe-pair { max-width: 360px; }
.essay .recipe-single { max-width: 300px; }
.essay .essay-meta { font-size: 12px; margin: 12px 0 28px; }
.essay figure img { min-width: 0; }

.essay > figure:has(img[src$="01-tung-recognition.png"], img[src$="07-tung-sahur-recognition-comparison.avif"]) { max-width: 552px; }
.essay .tiktok-examples { max-width: 528px; }
.essay .haaland-group { width: 120%; max-width: calc(100vw - 48px); position: relative; left: 50%; transform: translateX(-50%); margin-left: 0; margin-right: 0; }
.essay .haaland-group img { max-height: 264px; }
.essay .recipe-comparison { max-width: 612px; }
.essay .pairing-example { max-width: 280px; }
.essay .hound-dog-example { max-width: 360px; }
.essay .venn-diagram { max-width: 620px; }
.essay .venn-diagram img { border: 0; box-shadow: none; }

.essay .haaland-group img { border: 2px solid var(--border); box-shadow: 4px 4px 0 var(--border); background: var(--bg-card); }
.essay .motion-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 580px; margin: 26px auto; align-items: start; }
.essay .motion-examples figure { margin: 0; min-width: 0; }
.essay .tooling-footnote { font-size: 14px; }
.essay .tooling-footnote p, .essay .tooling-footnote li p { font-size: 14px; line-height: 1.65; }
.essay .tooling-footnote h2 { font-size: 22px; }
.essay .tooling-footnote h3 { font-size: 17px; }
.essay .tooling-footnote table { font-size: 12px; }
.essay .tooling-footnote figcaption { font-size: 11px; }

.essay .retention-timeline { max-width: 399px; margin: 26px auto; }
.essay .retention-lexicon { max-width: 580px; margin: 26px auto; }
.essay .retention-lexicon .essay-image-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.essay .retention-lexicon img { width: 100%; min-width: 0; }

.essay .essay-meta { align-items: center; }
.essay-byline { text-transform: none; letter-spacing: 0; }
.copy-for-llms { margin-left: auto; padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); font: 800 12px/1.4 'Nunito', sans-serif; cursor: pointer; }
.copy-for-llms:hover { border-color: var(--text); }
.copy-for-llms:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }