/* ==========================================================================
   ARDO — guide.css
   Long-form guides under /guides/. Loaded after base.css, tool.css and
   mvp-tool.css, so it only adds what an article needs and a tool page does
   not: a lead photo, a readable measure, a worked-example block, a callout.
   ========================================================================== */

.guide-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 22rem;
  object-fit: cover;
  border-radius: var(--radius);
  margin: 0 0 var(--s-8);
}

.guide-meta {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-mute);
  margin: var(--s-4) 0 0;
}

.guide .card { max-width: 46rem; }
.guide .card p, .guide .card li { max-width: 40rem; }
.guide .card ul, .guide .card ol { padding-left: var(--s-6); margin: var(--s-4) 0 0; }
.guide .card li + li { margin-top: var(--s-2); }

/* Arithmetic laid out so a reader can follow every line. */
.sum {
  font-family: var(--mono);
  font-size: var(--t-sm);
  background: var(--paper-sunk);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-6);
  margin: var(--s-4) 0 0;
  list-style: none;
}
.sum li { display: flex; justify-content: space-between; gap: var(--s-4); margin: 0; }
.sum li + li { margin-top: var(--s-2); }
.sum .total { border-top: 1px solid var(--rule-strong); padding-top: var(--s-2); font-weight: 600; }

.callout {
  border-left: 3px solid var(--amber);
  background: var(--paper-card);
  padding: var(--s-4) var(--s-6);
  margin: var(--s-6) 0 0;
}

.next { max-width: 46rem; }