/* Compare two (/compare/<a>-<b>/; the intelligent site's build plan item 14, round 4). Cards,
   "what the extra buys" and the table are notes that only inform: no edge, a soft shadow.
   The gap under the heading is in proportion: the same as between the page's other parts
   (owner, 22 Oct). */
.two-up .tool-head .sw{padding-block:24px 8px}
.two-up .tool-head .lede{margin-bottom:0;max-width:62ch}
.two-up .tool-head + .sec{padding-top:14px}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.pcard{background:var(--paper);padding:20px;box-shadow:0 8px 20px var(--shadow);display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start}
.pcard .mount{height:150px}
.pcard h2{font-family:var(--display);font-weight:var(--dw);font-size:22px;line-height:1.15;margin:0 0 6px}
.pcard h2 a{color:var(--ink);text-decoration:none}
.pcard h2 a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.pcard .pricelink{margin-top:6px}
.pcard .diarynote{margin-top:10px;white-space:nowrap}  /* its arrow stays with its words */
.extra{background:var(--butter);padding:22px 26px;margin-top:26px;box-shadow:0 8px 20px var(--shadow)}
.extra h2{font-family:var(--display);font-weight:var(--dw);font-size:clamp(24px,2.6vw,32px);line-height:1.15;margin:0 0 8px}
.extra h2.then{font-size:clamp(20px,2vw,24px);margin-top:18px}
.extra .xp{margin:0 0 10px;font-size:15px}
.extra ul{margin:0;padding-left:20px}.extra li{margin:4px 0;line-height:1.45}
.extra .small{margin:12px 0 0}
.cmp2{width:100%;border-collapse:collapse;margin-top:26px;background:var(--paper);box-shadow:0 8px 20px var(--shadow);table-layout:fixed}
.cmp2 th,.cmp2 td{padding:12px 16px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top;font-size:15px}
.cmp2 thead th{font-family:var(--display);font-weight:var(--dw);font-size:17px;background:var(--blue)}
.cmp2 thead th a{color:var(--ink);text-decoration:none}
.cmp2 tbody th{font-family:var(--label);font-weight:400;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);width:26%}
.cmp2 .cs th{background:var(--ground);color:var(--ink)}
.cmp2 td a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yarn);text-underline-offset:3px}
.cmp2 .gap{color:var(--ink2);font-style:italic}
.csrc{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;font-size:14px;color:var(--ink2)}
.csrc .q{color:var(--ink)}
.c-small{margin-top:18px;padding-bottom:clamp(30px,4vw,56px);max-width:80ch}
@media (max-width:900px){
  .pair{grid-template-columns:minmax(0,1fr)}
  .pcard{grid-template-columns:100px minmax(0,1fr)}.pcard .mount{height:100px}
  .cmp2 th,.cmp2 td{padding:10px;font-size:14px}
  .cmp2 tbody th{width:30%}
}
@media (max-width:520px){  /* a phone: a smaller photo, the table's names and labels fit */
  .pcard{grid-template-columns:72px minmax(0,1fr);gap:14px;padding:16px}.pcard .mount{height:72px}
  .cmp2 thead th{font-size:15px;line-height:1.2}
  .cmp2 th,.cmp2 td{padding:8px}
  .cmp2 tbody th{width:28%;letter-spacing:.06em;font-size:10.5px}
}
/* no photo from the shop: its words take the card's whole width (owner, 22 Oct) */
.pcard.nophoto{grid-template-columns:minmax(0,1fr)}