/* ============================================================
   Doodles -- page-specific positioning for the ink clips Step 8's
   move 6 and move 7 wire into index.html, process.html and
   products.html (steps/step8-motion-spec.md). F2's file: markup
   placement sizing only, never a float.css rule (F1 owns .float).

   Two jobs:
   1. Two child-selector rules the old .doodle sprite system relied
      on (process.css .pr-art-tiffin .doodle, v3.css .doodle
      sprite styling) that a plain class swap to .ink-clip would
      otherwise drop, since .ink-clip must NOT carry the old
      ".doodle svg :is(path,...) { fill:none; stroke:currentColor }"
      rule -- that rule is right for the old stroke-only line icons,
      but it would blank out the new filled vtracer paths (ink.css's
      .ink-draw sets fill:currentColor on purpose).
   2. Placement for the two brand-new standalone marks the spec adds
      (the founders pull-quote companion, the manifesto margin mark)
      that have no existing layout hook at all.
   ============================================================ */

/* ---- process.html #began: the tiffin drawing's old box (process.css
   .pr-art-tiffin .doodle { max-width: 13rem }) keyed on the class this
   swap removes. Same number, new selector. ---- */
.pr-art-tiffin .ink-clip { max-width: 13rem; }

/* ---- index.html / partials.html #began: a small ink mark beside the
   Nishant Jain pull-quote. No existing hook reserves space for it, so
   it gets an explicit cap here (CLS 0 from the first frame). ---- */
.founders__ink {
  max-width: 6rem;
  margin-top: var(--s-md);
}

/* ---- index.html / partials.html #manifesto: 15-pinch-of-salt sits in
   the margin beside "No maida.", never over the line itself (Haldi
   Stain / Focus Is Ink both reserve the line for ink-black type only).
   .manifesto-box already sets position:relative (v3.css); this only
   adds the one absolute placement, at inline-icon scale (1.5em of the
   ambient body font-size, not the display size the heading itself
   sets). Desktop only -- on a narrow viewport there is no margin left
   of the line to sit in. ---- */
.manifesto-salt {
  position: absolute;
  top: 0.2em;
  left: calc(100% + var(--s-sm));
}
@media (max-width: 899.98px) {
  .manifesto-salt { display: none; }
}

/* ---- process.html #train: three measurement notes sit inside the
   "ours" list rows as a third flex child (the row is already
   display:flex; justify-content:space-between from process.css, so a
   third item lands after the percentage, pinned to that line). On a
   phone, keep at most two notes on this one screen (the existing
   cap step4-motion.md 1 interaction 3 sets): the salt note (the row
   lowest on the list, so least likely to still be the one thing a
   parent is reading) steps aside. ---- */
@media (max-width: 899.98px) {
  .pr-note--salt { display: none; }
}

/* ---- Marginalia (2026-10-09): every ink clip sits beside the sentence it illustrates,
   at one of three sizes. A margin mark lands in the ledger's margin column (it carries
   ledger__margin); a float mark sits in the text column with the paragraph wrapping it;
   a plate is the one larger drawing an aside is built around. The hand line under a mark
   ties it to the copy in the same voice as the notes. ---- */
.ink-mark { width: 9rem; max-width: 100%; margin: 0; }
.ink-mark--plate { width: 12rem; }
.ink-mark--float { float: right; width: 8rem; margin: 0.25rem 0 var(--s-sm) var(--s-lg); shape-outside: margin-box; }
.ink-mark__hand {
  display: block;
  margin-top: var(--s-xs);
  font-family: var(--font-hand);
  font-size: var(--t-hand);
  font-weight: 400;
  line-height: 1.2;
  color: var(--accent-text);
  transform: rotate(-3deg);
  transform-origin: 0 50%;
}
.founders__lead::after { content: ""; display: block; clear: both; }

/* The share line carries the grandparent-and-child drawing as a stamp beside the link. */
.share--stamp { display: flex; align-items: center; gap: var(--s-md); flex-wrap: wrap; }
.share--stamp .ink-mark--stamp { flex: none; width: 7.5rem; }

/* Under the Daily Bread slip: its ingredients, drawn, with their names by hand. */
.ink-legend { display: flex; flex-wrap: wrap; gap: var(--s-lg); margin: var(--s-xl) 0 var(--s-lg); padding: 0; list-style: none; }
.ink-legend li { width: 7rem; }
.ink-legend .ink-mark__hand { font-size: var(--t-hand); transform: none; text-align: center; }

@media (max-width: 599px) {
  .ink-mark { width: 7rem; }
  .ink-mark--plate { width: 9rem; }
  .ink-mark--float { width: 6rem; }
  .share--stamp .ink-mark--stamp { width: 6rem; }
}

/* Aside marks (2026-10-20): a drawing that sits beside the line it illustrates. On a phone it is a
   block between paragraphs; from 900px it floats into the right of the text column, the paragraph
   wrapping it, like the float mark. The aspect-ratio on the wrapper keeps its box, so nothing shifts. */
.ink-mark.ink-mark--aside { display: block; width: 7rem; margin: var(--s-md) 0; }
@media (min-width: 900px) {
  .ink-mark.ink-mark--aside { float: right; width: 8rem; margin: 0.25rem 0 var(--s-sm) var(--s-lg); shape-outside: margin-box; }
}