/* The round-up as a row of finds (owner, 7 Oct, option B of the round-up mock-up,
   artifact 5wcayHqcraQmdeL5UwAPPa): each product on its own card with
   its folder tabs, the shop's photo, its price links, the diary note and a postmark. */
.rf-list{gap:34px;padding-block:26px 14px}
/* The tabs tilt with their stamp and sit on its dashed line's inset, as on the home page
   (owner, 17 Oct: "the same fix ... also need[s] to go on the roundups page") */
.rf{position:relative}
.rf .ftabs{padding-inline:10px}
.rf .card{filter:drop-shadow(0 8px 18px var(--shadow))}
.rf:nth-child(odd){transform:rotate(-.4deg)}
.rf:nth-child(even){transform:rotate(.35deg)}
.rf .face{position:relative;background:var(--paper);padding:22px 26px;overflow:hidden}
.rf .face::after{content:"";position:absolute;inset:10px;border:1.4px dashed color-mix(in srgb,var(--ink) 22%,transparent);pointer-events:none}
.rf .grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;align-items:center;position:relative;z-index:1}
.rf .grid.bare{grid-template-columns:minmax(0,1fr)}
.rf .txt{min-width:0}
.rf h2{font-size:clamp(24px,2.4vw,30px);padding-right:80px;overflow-wrap:break-word;margin:0}
.rf .note{margin:8px 0 12px;max-width:56ch}
.rf .offers{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rf .pm{position:absolute;right:18px;top:12px;width:72px;height:72px;z-index:2}
.rf .washi{left:46%;top:-12px;width:96px;height:24px;transform:rotate(3deg)}
.rf:nth-child(even) .washi{left:18%;transform:rotate(-4deg)}
.rf .pml{right:0;bottom:0;width:55%;height:96px}
.rf .diarynote{margin-top:14px;display:inline-block}
@media (max-width:900px){
  .rf .grid{grid-template-columns:minmax(0,1fr)}
  .rf h2{padding-right:70px}
  .rf .ftabs span{padding:8px 10px calc(9px + var(--ftuck))}
  .rf .ftabs span b{font-size:15px}
  .rf:nth-child(n){transform:none}
  .rf .mount{margin:76px 0 0}  /* the postmark's corner stays clear of the photo (§11) */
}
@media (max-width:520px){.rf .ftabs span{padding-inline:9px}}  /* as every page's tabs */
@media (max-width:380px){.rf .ftabs span{padding-inline:7px}}
@media (prefers-reduced-motion:no-preference){.rf .card{transition:transform .5s cubic-bezier(.16,1,.3,1)}}
.rf .offers li{border-top:0;padding-top:0}

/* ---------- the comparison table (U52 groundwork; engine.hub.compare) ---------- */
/* A white ledger sheet under the head: products across (each headed by its number, its
   name and its category's colour on its top edge), our readings, then the listings' facts,
   each linked to the listing's own words quoted under the table. On phones every row is a
   short list keyed by the products' numbers, so five products never need a sideways scroll. */
.cmp{padding-block:6px 18px}
.cmp-sheet{background:var(--white);border-top:2px solid var(--ink);padding:24px clamp(16px,3vw,32px) 22px;filter:drop-shadow(0 8px 18px var(--shadow))}
.cmp-h{font-size:clamp(26px,2.8vw,34px);margin:0}
.cmp-lede{margin:10px 0 0;max-width:62ch;color:color-mix(in srgb,var(--ink) 80%,transparent)}
.cmp-t{width:100%;border-collapse:collapse;margin-top:20px;table-layout:fixed;font-variant-numeric:tabular-nums lining-nums}
.cmp-t th,.cmp-t td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--rule)}
.cmp-corner{width:15%;border-bottom:1px solid var(--rule)}
.cmp-t.c4 .cmp-corner,.cmp-t.c5 .cmp-corner{width:19%}  /* long row labels room at four and five products */
.cmp-t thead th.cmp-corner{border-top:0;background:none}
/* a cell's hidden product name: for the list layout below 900 px; a table has its headers */
@media (min-width:901px){.cmp-t td > .vh:first-child{display:none}}
.cmp-t thead th{border-top:5px solid var(--tint);background:color-mix(in srgb,var(--tint) 35%,var(--white));padding-top:12px}
.cmp-t thead th + th{border-left:3px solid var(--white)}
.cmp-t thead a{display:grid;gap:7px;justify-items:start;text-decoration:none;font:var(--dw) 16px/1.15 var(--display);letter-spacing:var(--dtrack);overflow-wrap:break-word}
.cmp-t thead a:hover .cmp-name{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
.cmp-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.3px solid var(--ink);font:500 12px/1 var(--label);letter-spacing:0}
.cmp-sec th{font:500 11px/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 74%,transparent);padding:20px 12px 8px;border-bottom:1px solid color-mix(in srgb,var(--ink) 40%,transparent)}
.cmp-row th{overflow-wrap:break-word;font:400 11.5px/1.35 var(--label);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 74%,transparent);padding-top:12px}
.cmp-row td{font-size:15.5px;line-height:1.35;overflow-wrap:break-word}
.cmp-row td a{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 70%,transparent);text-underline-offset:3px}
.cmp-row td a:hover{text-decoration-color:var(--ink2)}
.cmp-ours .cmp-row td:first-of-type,.cmp-ours .cmp-row td{font-weight:500}
.cmp-sub{display:block;margin-top:3px;font:400 10.5px/1.4 var(--label);letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 74%,transparent);font-weight:400}
.cmp-row td.gap,.cmp-gap{font:400 11px/1.4 var(--label);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 74%,transparent)}
.cmp-gf{font-size:22px;line-height:1.1;display:block;transform:rotate(-1deg)}
.cmp-good td,.cmp-good th{border-bottom:0;padding-top:16px}
.cmp-src{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px dashed color-mix(in srgb,var(--ink) 25%,transparent);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:10px 28px;font-size:14px;color:color-mix(in srgb,var(--ink) 84%,transparent)}
.cmp-src li{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:start}
.cmp-src p{margin:2px 0 0}
.cmp-src .when{display:block;margin-top:3px}
.cmp-q{scroll-margin-top:16px}
.cmp-q:target{background:color-mix(in srgb,var(--butter) 70%,transparent)}
.cmp-small{margin:14px 0 0;font-size:13px;color:color-mix(in srgb,var(--ink) 74%,transparent)}
/* lists below 900 px: five names across need more room than a tablet gives */
@media (max-width:900px){
  .cmp-t,.cmp-t tbody,.cmp-t thead,.cmp-t tr,.cmp-t th,.cmp-t td{display:block;width:auto}
  .cmp-corner{display:none!important}
  /* the products as a numbered key */
  .cmp-t thead tr{display:grid;gap:6px}
  .cmp-t thead th,.cmp-t thead th + th{border:0;border-left:5px solid var(--tint);padding:8px 10px}
  .cmp-t thead a{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
  .cmp-t th,.cmp-t td{border-bottom:0}
  .cmp-sec th{padding:22px 0 6px}
  .cmp-row{padding:10px 0;border-bottom:1px solid var(--rule)}
  .cmp-row th{padding:0 0 6px}
  .cmp-row td{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:baseline;padding:3px 0}
  .cmp-row td::before{content:attr(data-n);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.2px solid var(--ink);font:500 11px/1 var(--label);color:var(--ink);grid-row:span 2;align-self:start}
  .cmp-sub{grid-column:2}
  .cmp-gf{font-size:21px}
}