/* layout: boxes, grid and spacing only. Type lives in type.css, colour and shape in skin.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
.site-head {
  max-width: 74rem; margin: 0 auto; padding: 1.5rem 1rem 0.5rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem;
}
.site-name { display: inline-flex; align-items: center; min-height: 44px; }
.framing { flex: 1 1 18rem; margin: 0; }
.jump-index { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; }
.page-grid {
  max-width: 74rem; margin: 0 auto; padding: 0 1rem 3rem;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem;
}
.page-body { min-width: 0; max-width: 44rem; }
.page-body > * + * { margin-top: 1.5rem; }
.page-body h1 { margin: 1.25rem 0 0; }
.belief, .puppy-gap, .vet-turn, .margin-note, .emergency, .budget-note, .report-note, .ask-sheet {
  padding: 1.5rem 1.25rem; margin-top: 2.5rem;
}
.belief > * + *, .verdict-block > * + *, .ask-sheet > * + * { margin-top: 1rem; }
.belief h2, .puppy-gap h2, .vet-turn h2, .margin-note h2, .emergency h2, .budget-note h2, .report-note h2, .ask-sheet h2 { margin: 0; }
.heard { padding: 0.75rem 1rem; }
.verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; }
.verdict-label { padding: 0.15rem 0.75rem; }
.source-line { padding-top: 0.75rem; }
.source-line ul { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.source-line a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.25rem 0; }
.reveal-toggle, .reveal-all { min-height: 48px; padding: 0.6rem 1.25rem; }
.reveal-bar:empty { display: none; }
.ask-list { margin: 1rem 0 0; padding-left: 1.5rem; }
.ask-item + .ask-item { margin-top: 1.25rem; }
.ask-item p { margin: 0; }
.ask-item .ask-why { margin-top: 0.35rem; }
.diagram { margin: 2rem 0 0; }
.diagram-art { display: block; width: 100%; height: auto; }
.diagram figcaption { margin-top: 0.75rem; }
.next-notes { margin-top: 2.5rem; }
.next-notes a { display: flex; align-items: center; min-height: 56px; padding: 0.5rem 1.25rem; }
.side-index { min-width: 0; padding: 1.25rem; align-self: start; }
.side-index ol { list-style: none; margin: 0.25rem 0 1.25rem; padding: 0; }
.side-index ol:last-child { margin-bottom: 0; }
.side-index a { display: flex; align-items: center; min-height: 44px; padding: 0.35rem 0.75rem; }
.index-label { margin: 0; }
.site-foot { max-width: 74rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
.foot-line { margin: 0 0 0.5rem; max-width: 44rem; }
.foot-top { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 60rem) {
  .site-head { padding: 2rem 2rem 0.5rem; }
  .jump-index { display: none; }
  .page-grid { grid-template-columns: 16rem minmax(0, 1fr); grid-template-areas: "index body"; gap: 3.5rem; padding: 0 2rem 4rem; }
  .page-body { grid-area: body; }
  .side-index { grid-area: index; position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; margin-top: 1.5rem; }
  .belief, .puppy-gap, .vet-turn, .margin-note, .emergency, .budget-note, .report-note, .ask-sheet { padding: 2rem 2.25rem; }
  .site-foot { padding: 2rem 2rem 3rem 21.5rem; }
}
