/* /answers — answer library. Builds on scrapbook-v3.css + handmade.css +
   podcast.css (shared nav, hero, headings, footer). */

/* Short answer: an index card taped to the page. This is the quotable part. */
.a-art .p-hero { margin-bottom: 0; padding-bottom: 18px; }
.a-short { --lh: 34px; position: relative; max-width: 760px; margin: 6px 0 40px; padding: 26px 30px 22px; background: #fbf8f0 repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px), rgba(43,90,160,.13) calc(var(--lh) - 1px) var(--lh)); background-position: 0 52px; border-radius: 3px; box-shadow: 0 2px 5px rgba(60,45,20,.18), 0 12px 26px rgba(60,45,20,.10); transform: rotate(-.4deg); }
.a-short::before { content: ""; position: absolute; top: -14px; left: 40px; width: 110px; height: 28px; transform: rotate(-2deg); background: url("tape-2.webp") center / 100% 100% no-repeat; }
.a-short .a-label { margin: 0 0 6px; line-height: 20px; font-family: "Courier Prime", ui-monospace, monospace; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #6b6455; }
.a-short p.a-tldr { margin: 0; font-family: var(--hand); font-size: 25px; line-height: var(--lh); color: #171717; }

/* Long answer: a typed sheet. */
.a-body { max-width: 760px; margin: 0 0 34px; padding: 30px 34px 18px; background: #fbf8f0; border-radius: 3px; box-shadow: 0 2px 5px rgba(60,45,20,.16), 0 12px 26px rgba(60,45,20,.09); transform: rotate(.2deg); }
.a-body p, .a-body li { font-family: var(--hand); font-size: 22px; line-height: 1.45; color: var(--ink); }
.a-body p { margin: 0 0 18px; }
.a-body h2 { margin: 12px 0 16px; font-size: 27px; }
.a-body ul, .a-body ol { margin: 0 0 20px; padding-left: 1.2em; }
.a-body li { margin: 0 0 8px; }
.a-body li::marker { color: var(--pen-ink); }
.a-body b, .a-body strong { color: #171717; }
.a-body a { color: var(--pen-ink) !important; text-decoration: none !important; border-bottom: 2px solid rgba(43,90,160,.45); }
.a-body a:hover { border-bottom-style: wavy; }

.a-source { max-width: 760px; margin: 0 0 40px; font-family: "Courier Prime", ui-monospace, monospace; font-size: 13.5px; line-height: 1.6; letter-spacing: .04em; color: #6b6455; }

/* Defined term callout (earned exposure) */
.a-def { max-width: 760px; margin: 0 0 34px; padding: 22px 28px; background: #f3ead2; border-left: 5px solid var(--rust, #b5532d); border-radius: 2px; transform: rotate(-.25deg); box-shadow: 0 2px 5px rgba(60,45,20,.15); }
.a-def dfn { font-style: normal; font-family: var(--sharpie); font-size: 26px; color: #161616; }
.a-def p { margin: 6px 0 0; font-family: var(--hand); font-size: 23px; line-height: 1.4; color: #171717; }

/* Related + index lists */
.a-list { margin: 0 0 10px; padding: 10px 26px 6px; list-style: none; background: #fbf8f0; border-radius: 3px; box-shadow: 0 2px 5px rgba(60,45,20,.16), 0 12px 26px rgba(60,45,20,.09); transform: rotate(-.3deg); }
.a-list li { padding: 16px 0 12px; border-bottom: 2px dashed #d8d2c2; }
.a-list li:last-child { border-bottom: 0; }
.a-list h3 { margin: 0 0 4px; font-family: "Shadows Into Light", var(--hand), cursive; font-weight: 400; font-size: 28px; line-height: 1.15; }
.a-list h3 a { color: #171717 !important; text-decoration: none !important; }
.a-list h3 a:hover { text-decoration: underline wavy !important; text-underline-offset: 4px; }
.a-list p { margin: 0; font-family: var(--hand); font-size: 20.5px; line-height: 1.38; color: var(--ink); }
.a-list.featured { background: #f3ead2; }

.a-crumbs { margin: 40px 0 0; font-family: "Courier Prime", ui-monospace, monospace; font-size: 13.5px; letter-spacing: .05em; color: #6b6455; }
.a-crumbs a { color: var(--pen-ink) !important; }

@media (max-width: 760px) {
  .a-short { --lh: 30px; padding: 22px 18px 18px; background-position: 0 48px; }
  .a-short p.a-tldr { font-size: 22px; }
  .a-body { padding: 22px 18px 10px; transform: none; }
  .a-body p, .a-body li { font-size: 20px; }
  .a-def { padding: 18px 16px; }
  .a-def p { font-size: 21px; }
  .a-list { padding: 6px 16px 4px; }
  .a-list h3 { font-size: 25px; }
  .a-list p { font-size: 19px; }
}

.a-body pre { margin: 0 0 20px; padding: 16px 18px; overflow-x: auto; background: #f1ebdd; border: 1px dashed #c9bfa8; border-radius: 3px; }
.a-body code { font-family: "Courier Prime", ui-monospace, monospace; font-size: 15px; line-height: 1.55; color: #2b2a24; white-space: pre-wrap; }