/*
 * NOTE: sections/header/navs.css ships a global `a{text-decoration:none!important}`, so every
 * underline the design calls for has to carry !important of its own.
 */
/* Asset-freshness marker: the e2e spec fetches whatever stylesheet URL the served page names
   (WP Rocket rewrites it to cache/min/...) and asserts this custom property carries the current
   theme asset version. WP Rocket's minify cache is keyed by file path, NOT by ?ver=, so a stale
   minified copy is invisible to a version bump alone (session 40 root cause). Keep the value in
   lockstep with the enqueue version in functions.php. */
/*
 * keto-hub.css: recipe portal and category hub pages (design D, "Orange Line, iterated").
 * Ported from docs/superpowers/specs/2026-08-18-recipe-portal-redesign/designs/D-iterated/build.py.
 * Everything is scoped under the .rrh wrapper so it cannot reach the Genesis header, nav or footer.
 * Fonts: Open Sans only (loaded by the theme, weights 400/500/600/700/800).
 */

.rrh{
  --rrh-asset-v:"1.9.3";
  --ink:#343434; --body:#4a4a4a; --mute:#676767; --line:#e6e6e6;
  --wash:#f7f7f7; --orange:#e67e22; --orange-hover:#d47b05; --orange-lt:#eb974e;
  --tint:#fdf2e6; --tint-2:#fbe6d0; --green:#66cc8f;
}
.rrh,.rrh *,.rrh *::before,.rrh *::after{box-sizing:border-box}
.rrh{margin:0;background:#fff;color:var(--body);font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
.rrh p,.rrh ul,.rrh ol,.rrh li,.rrh form,.rrh figure,.rrh blockquote,.rrh fieldset{margin:0;padding:0}
.rrh input,.rrh select,.rrh textarea{font-family:inherit}
.rrh img{display:block;max-width:100%}
.rrh h1,.rrh h2,.rrh h3,.rrh h4{color:var(--ink);font-weight:700;letter-spacing:-.01em;margin:0}
.rrh a{color:var(--orange)}
.rrh button{font:inherit}
.rrh :focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}
.rrh .shell{max-width:1200px;margin:0 auto;padding:0 20px}
.rrh .ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rrh [hidden]{display:none!important}
.rrh .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- hero: full-bleed photo, LIGHT wash, dark text (feedback #3) ---------- */
.rrh .hero{position:relative;isolation:isolate;background:#f2f2f2;overflow:hidden;border-bottom:1px solid var(--line)}
.rrh .hero-bg{position:absolute;top:0;left:var(--heroleft,0%);height:100%;width:calc(100% + var(--heroshift,0%));object-fit:cover;object-position:var(--heropos,center 42%);z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%);mask-image:linear-gradient(90deg,transparent,#000 14%)}
.rrh .hero-wash{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,rgba(255,255,255,.975) 0%,rgba(255,255,255,.955) 34%,rgba(255,255,255,.86) 56%,rgba(255,255,255,.5) 78%,rgba(255,255,255,.26) 100%)}
.rrh .hero-in{position:relative;z-index:2;padding-top:46px;padding-bottom:42px;min-height:286px;display:flex;flex-direction:column;justify-content:center}
.rrh .hero-in>*{max-width:640px}
.rrh .crumb{font-size:12.5px;color:#5f5f5f;letter-spacing:.02em;margin:0 0 12px}
.rrh .crumb a{color:#5f5f5f;text-decoration:none}
.rrh .crumb a:hover{color:var(--orange);text-decoration:underline!important}
.rrh .crumb i{font-style:normal;padding:0 7px;color:#9b9b9b}
.rrh .titleline{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:12px}
.rrh .hero h1{font-size:clamp(31px,4.3vw,48px);line-height:1.05;font-weight:800;color:#2f2f2f}
.rrh .count{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--orange);background:rgba(255,255,255,.92);color:var(--ink);border-radius:999px;padding:5px 13px;font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap}
.rrh .count .ic{width:15px;height:15px;color:var(--orange)}
.rrh .hero .lede{font-size:17px;line-height:1.55;margin:0;color:#3d3d3d;max-width:56ch}
.rrh .hero .lede+.lede{margin-top:12px}
.rrh .hero .lede a{color:var(--orange);text-decoration:underline!important;text-underline-offset:2px;font-weight:600}
.rrh .byline{font-size:13px;color:#5f5f5f;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rrh .byline b{color:var(--ink);font-weight:700}
.rrh .hnote{font-size:12.5px;color:#5f5f5f;margin:11px 0 0;max-width:74ch;line-height:1.45}

/* ---------- category strip: A's layout, C's vertical items (feedback #4 + #6) ---------- */
.rrh .strip{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,#fdfdfd,#f5f5f5);
  border-bottom:1px solid #e2e2e2;box-shadow:none;transition:box-shadow .18s ease,border-color .18s ease}
.rrh .strip.is-stuck{border-bottom-color:#d4d4d4;box-shadow:0 4px 14px rgba(0,0,0,.09)}
.rrh .strip-sentinel{height:1px;margin-bottom:-1px}
.rrh .strip .shell{display:flex;align-items:stretch;gap:8px}
.rrh .strip-scroll{position:relative;flex:1 1 auto;min-width:0;display:flex}
.rrh .strip-track{flex:1 1 auto;min-width:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.rrh .strip-track::-webkit-scrollbar{display:none}
.rrh .cat{flex:1 0 108px;max-width:170px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:9px 6px 8px;text-decoration:none;color:var(--body);border-radius:9px 9px 0 0;position:relative;transition:background .15s ease,color .15s ease}
.rrh .cat .ic{width:27px;height:27px;color:#8c8c8c;stroke-width:1.8;transition:color .15s ease}
.rrh .cat b{font-size:12px;font-weight:700;color:#3f3f3f;white-space:nowrap;line-height:1.3}
.rrh .cat span{font-size:10.5px;color:#8c8c8c;line-height:1.2;letter-spacing:.02em}
.rrh .cat::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:2px 2px 0 0;background:transparent;transition:background .15s ease}
.rrh .cat:hover{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.09)}
.rrh .cat:hover .ic{color:var(--orange)}
.rrh .cat:hover b{color:var(--ink)}
.rrh .cat:hover span{color:#7a7a7a}
.rrh .cat:hover::after{background:var(--orange-lt)}
.rrh .cat:focus-visible{outline-offset:-2px}
.rrh .cat.is-active{background:var(--tint);box-shadow:0 2px 8px rgba(230,126,34,.14)}
.rrh .cat.is-active .ic{color:var(--orange)}
.rrh .cat.is-active b{color:var(--ink)}
.rrh .cat.is-active span{color:var(--mute)}
.rrh .cat.is-active::after{background:var(--orange)}
.rrh .strip-fade{position:absolute;right:0;top:0;bottom:0;width:30px;pointer-events:none;display:none;background:linear-gradient(90deg,rgba(247,247,247,0),rgba(247,247,247,.96))}
.rrh .strip-tools{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding-left:14px;margin-left:2px;border-left:1px solid #e2e2e2}
.rrh .selwrap{position:relative;display:flex;align-items:center}
.rrh .selwrap .ic{position:absolute;right:9px;width:14px;height:14px;color:#8c8c8c;pointer-events:none;stroke-width:2.4}
.rrh .sortsel{appearance:none;-webkit-appearance:none;border:1px solid #dcdcdc;background:#fff;border-radius:8px;
  padding:8px 30px 8px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;line-height:1.2}
.rrh .sortsel:hover{border-color:var(--orange)}
.rrh .fbtn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--orange);background:#fff;color:var(--ink);
  border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700;cursor:pointer;line-height:1.2;white-space:nowrap}
.rrh .fbtn .ic{width:16px;height:16px;color:var(--orange);stroke-width:2.1}
.rrh .fbtn:hover{background:var(--tint)}
.rrh .fbtn.is-on{background:var(--orange);border-color:var(--orange);color:#fff}
.rrh .fbtn.is-on .ic{color:#fff}
.rrh .fbtn .pill{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:#fff;color:var(--ink);font-size:11px;font-weight:800}

/* ---------- sections ---------- */
.rrh .sec{max-width:1200px;margin:0 auto;padding:44px 20px 8px}
.rrh .sec.tight{padding-top:30px}
.rrh .sec-alt{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:44px;padding-bottom:22px}
.rrh .sechead{display:flex;align-items:center;gap:14px}
.rrh .sechead .shic{width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
/* 26 px, not the 24 the line icons used: Set D's section-head icons are multi-colour
   illustration, and at 24 they read small and thin inside the 42 px box. 27, the strip size,
   starts to crowd the corners. The mobile rule below keeps the same ratio in the 36 px box. */
.rrh .sechead .shic .ic{width:26px;height:26px;color:var(--orange);stroke-width:1.9}
.rrh .sechead h2{font-size:23px;line-height:1.2}
.rrh .sechead .rule{flex:1;height:1px;background:var(--line);position:relative;min-width:24px}
.rrh .sechead .rule::before{content:"";position:absolute;left:0;top:-1px;width:64px;height:3px;background:var(--orange)}
.rrh .sechead .more{font-size:13.5px;font-weight:700;text-decoration:underline!important;text-underline-offset:3px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.rrh .sechead .more .ic{width:15px;height:15px;stroke-width:2.4}
.rrh .sechead .more:hover{text-decoration:underline!important}
.rrh .arws{display:flex;gap:6px}
.rrh .arw{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:50%;color:var(--mute);display:flex;align-items:center;justify-content:center;cursor:pointer}
.rrh .arw:hover{border-color:var(--orange);color:var(--orange)}
.rrh .arw .ic{width:17px;height:17px;stroke-width:2.4}
.rrh .sec-blurb{margin:10px 0 0;color:var(--mute);font-size:14.5px;max-width:70ch}

/* ---------- cards (C, unchanged, feedback #7) ---------- */
.rrh .row{display:grid;grid-auto-flow:column;grid-auto-columns:224px;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px 2px 20px;scrollbar-width:thin}
.rrh .row>*{scroll-snap-align:start}
.rrh .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:18px 0 4px;float:none}
.rrh .card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:box-shadow .18s ease,transform .18s ease}
.rrh .card:hover{box-shadow:0 10px 24px rgba(0,0,0,.10);transform:translateY(-2px)}
.rrh .card-media{position:relative;display:block;aspect-ratio:3/2;background:#f0f0f0}
.rrh .card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* pins row: the Pinterest portrait art (620x900). Cards with no portrait art keep the same
   column width and box, with the landscape photo centre-cropped by object-fit:cover, so a
   mixed row still lines up on both edges. */
.rrh .row.is-pins{grid-auto-columns:228px}
.rrh .card-media.is-portrait{aspect-ratio:620/900}
.rrh .card-media.is-portrait img{object-position:center}
.rrh .badge{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.82);backdrop-filter:blur(2px);color:var(--ink);border-radius:5px;padding:4px 8px;font-size:11.5px;font-weight:700;line-height:1.3;letter-spacing:.01em;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.rrh .ribbon{position:absolute;top:8px;left:8px;background:var(--green);color:#1f3a2b;border-radius:4px;padding:3px 8px;font-size:10px;font-weight:800;letter-spacing:.1em}
.rrh .card-b{padding:12px 14px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.rrh .card-t{font-size:14.5px;line-height:1.34;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rrh .card-t a{color:var(--ink);text-decoration:none}
.rrh .card:hover .card-t a{color:var(--orange)}
.rrh .card-m{margin:0;font-size:12.5px;color:var(--mute);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rrh .card-m .ic{width:14px;height:14px;stroke-width:2.2;color:var(--mute)}
.rrh .card-m i{font-style:normal;color:#c2c2c2;padding:0 6px}
.rrh .card-m .mtag{white-space:nowrap}
.rrh .card-s{margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rrh .endcap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:1px dashed var(--line);border-radius:12px;text-decoration:none;color:var(--orange);background:var(--wash);font-weight:700;font-size:15px;text-align:center;padding:20px}
.rrh .endcap .ic{width:30px;height:30px;color:var(--orange);stroke-width:1.8}
.rrh .endcap:hover{border-color:var(--orange);background:var(--tint)}

/* ---------- start-here tiles ---------- */
.rrh .tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:18px 0 4px}
.rrh .tile{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:12px;background:#fff;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.rrh .tile .ic{width:30px;height:30px;color:var(--orange);stroke-width:1.8}
.rrh .tile b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px}
.rrh .tile span{font-size:13.5px;color:var(--mute);line-height:1.5}
.rrh .tile:hover{border-color:var(--orange);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.rrh .tile.is-cta{background:var(--tint);border-color:var(--orange-lt)}

/* ---------- collections aside (portal: inside the closing .sec-alt band) ----------
   Stacked compact cards, white on the wash background, one per shortcut. */
.rrh .collside{display:flex;flex-direction:column;gap:13px}
.rrh .collside h3{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
.rrh .coll{display:flex;align-items:flex-start;gap:11px;padding:15px 17px;border:1px solid var(--line);border-radius:11px;background:#fff;text-decoration:none}
.rrh .coll>.ic{width:19px;height:19px;color:var(--orange);stroke-width:2;margin-top:2px}
.rrh .coll-b{display:block;flex:1;min-width:0}
.rrh .coll-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rrh .coll b{font-size:15px;line-height:1.3;color:var(--ink)}
.rrh .coll-n{font-size:11.5px;font-weight:700;color:var(--orange);white-space:nowrap}
.rrh .coll-d{display:block;font-size:12.5px;color:var(--mute);line-height:1.45;margin-top:3px}
.rrh .coll:hover{border-color:var(--orange);box-shadow:0 6px 16px rgba(0,0,0,.07)}
.rrh .coll:hover b{color:var(--orange)}

/* ---------- results bar + active filters ---------- */
.rrh .rbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 0 2px}
.rrh .rcount{font-size:14.5px;color:var(--mute);margin:0}
.rrh .rcount b{color:var(--ink);font-weight:700}
.rrh .actfil{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0 0}
.rrh .actfil .aflabel{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.rrh .afchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--orange);background:var(--tint);color:var(--ink);
  border-radius:999px;padding:5px 11px 5px 13px;font-size:13px;font-weight:600;cursor:pointer;line-height:1.3}
.rrh .afchip .ic{width:12px;height:12px;stroke-width:2.6;color:var(--orange)}
.rrh .afchip:hover{background:var(--tint-2)}
.rrh .linkbtn{display:inline-block;border:0;background:none;color:var(--orange);font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:underline!important;padding:6px 2px}
.rrh a.afchip{text-decoration:none}
.rrh .loadwrap{display:flex;justify-content:center;padding:26px 0 4px}
.rrh .loadmore{border:1.5px solid var(--orange);background:#fff;color:var(--orange);border-radius:999px;padding:12px 30px;font-size:15px;font-weight:700;cursor:pointer}
.rrh .loadmore:hover{background:var(--tint)}
.rrh .empty{padding:40px 0;text-align:center;color:var(--mute)}

/* ---------- filter modal (feedback #5) ---------- */
.rrh .fscrim{position:fixed;inset:0;background:rgba(38,32,26,.46);z-index:10040;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s}
.rrh .fscrim.open{opacity:1;visibility:visible}
.rrh .fmodal{position:fixed;z-index:10050;background:#fff;display:flex;flex-direction:column;overflow:hidden;
  left:50%;top:50%;transform:translate(-50%,-48%) scale(.985);width:min(700px,calc(100vw - 36px));max-height:min(86vh,760px);
  border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.28);opacity:0;visibility:hidden;
  transition:opacity .2s ease,transform .2s ease,visibility .2s}
.rrh .fmodal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.rrh .fm-h{display:flex;align-items:center;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--line)}
.rrh .fm-h h2{font-size:19px;flex:1}
.rrh .fm-x{border:1px solid var(--line);background:#fff;border-radius:50%;width:34px;height:34px;color:var(--mute);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.rrh .fm-x .ic{width:15px;height:15px;stroke-width:2.4}
.rrh .fm-x:hover{border-color:var(--orange);color:var(--orange)}
.rrh .fm-b{overflow-y:auto;padding:6px 22px 18px;flex:1}
.rrh .fslide{padding:18px 0 4px;border-bottom:1px solid var(--line)}
.rrh .fslide-h{display:flex;align-items:baseline;gap:10px;margin-bottom:2px}
.rrh .fslide-h .fl{font-size:14.5px;font-weight:700;color:var(--ink);flex:1}
.rrh .fslide-h .fv{font-size:13.5px;font-weight:700;color:var(--ink);background:var(--tint);border:1px solid var(--orange);border-radius:999px;padding:2px 11px}
.rrh .fslide-sub{margin:0 0 10px;font-size:12.5px;color:var(--mute)}
.rrh .rng{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:none;cursor:pointer;display:block;margin:0}
.rrh .rng::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:#e8e8e8}
.rrh .rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;
  background:#fff;border:3px solid var(--orange);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.rrh .rng::-moz-range-track{height:6px;border-radius:999px;background:#e8e8e8}
.rrh .rng::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--orange);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.rrh .rng:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.rrh .fticks{position:relative;height:17px;font-size:11.5px;color:var(--mute);font-weight:600;margin:1px 0 6px}
.rrh .fticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.rrh .fticks span:first-child{transform:none;left:0}
.rrh .fticks span:last-child{transform:none;left:auto;right:0}
.rrh .fsort{display:none}
.rrh .fsort h3{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--mute);margin:0 0 9px}
.rrh .segs{display:flex;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.rrh .seg{flex:1;border:0;border-left:1px solid var(--line);background:#fff;padding:11px 6px;font-size:13px;
  font-weight:600;color:var(--body);cursor:pointer;line-height:1.2;min-height:44px}
.rrh .seg:first-child{border-left:0}
.rrh .seg[aria-pressed="true"]{background:var(--tint);color:var(--ink);font-weight:700;box-shadow:inset 0 -3px 0 var(--orange)}
.rrh .fgrp{padding:16px 0 4px;border-bottom:1px solid var(--line)}
.rrh .fgrp:last-child{border-bottom:0}
.rrh .fgrp h3{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.rrh .fchips{display:flex;gap:9px;flex-wrap:wrap}
.rrh .chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--body);cursor:pointer;line-height:1.3;min-height:40px}
.rrh .chip .ic{width:15px;height:15px;color:#9a9a9a;stroke-width:2.1}
.rrh .chip .n{font-size:11.5px;color:#9a9a9a;font-weight:700}
.rrh .chip:hover{border-color:var(--orange);color:var(--ink)}
.rrh .chip:hover .ic{color:var(--orange)}
.rrh .chip[aria-pressed="true"]{border-color:var(--orange);background:var(--tint);color:var(--ink);box-shadow:inset 0 0 0 1px var(--orange)}
.rrh .chip[aria-pressed="true"] .ic{color:var(--orange)}
.rrh .chip[aria-pressed="true"] .n{color:var(--ink)}
.rrh .chip[disabled]{opacity:.42;cursor:not-allowed}
.rrh .fm-f{display:flex;align-items:center;gap:14px;padding:14px 22px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
.rrh .fm-f .linkbtn{flex:none}
.rrh .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--orange);color:#fff;text-decoration:none;
  border-radius:999px;padding:13px 26px;font-size:14.5px;font-weight:700;border:0;cursor:pointer}
.rrh .btn:hover{background:var(--orange-hover)}
.rrh .btn .ic{width:17px;height:17px;stroke-width:2.3}
.rrh .btn[disabled]{background:#c9c9c9;cursor:not-allowed}
.rrh .fm-f .btn{flex:1}

/* ---------- editorial ---------- */
.rrh .editorial{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:44px;padding:22px 0 8px;align-items:start}
.rrh .editorial.is-solo{grid-template-columns:minmax(0,1fr)}
.rrh .editorial h2{font-size:23px;margin-bottom:12px}
.rrh .editorial p{margin:0 0 14px;font-size:16px;max-width:70ch}
.rrh .editorial p a{text-decoration:underline!important;text-underline-offset:2px}
.rrh .picks{border:1px solid var(--line);border-radius:12px;background:#fff;padding:18px 20px}
.rrh .picks h3{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.rrh .picks ol{margin:0;padding-left:20px}
.rrh .picks li{margin-bottom:11px;font-size:14px;line-height:1.5}
.rrh .picks li a{font-weight:700;text-decoration:none;color:var(--ink)}
.rrh .picks li a:hover{color:var(--orange);text-decoration:underline!important}
/* Session 40, operator item 8: a "›" after each pick title so the lines read as links.
   display:inline is load-bearing: the generic `.picks li span{display:block}` (the meta line
   below) would otherwise catch this span and drop the arrow onto its own line. */
.rrh .picks li a .pk-go{display:inline;color:var(--orange);font-weight:800;margin-left:3px}
.rrh .picks li span{display:block;color:var(--mute);font-size:13px}
.rrh .picks.stats{margin-top:18px}
.rrh .picks.stats ul{list-style:none;margin:0;padding:0}
.rrh .picks.stats li{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;font-size:13.5px;color:var(--mute);line-height:1.4}
.rrh .picks.stats li:last-child{margin-bottom:0}
.rrh .picks.stats .ic{width:19px;height:19px;color:var(--orange);stroke-width:2;margin-top:1px}
.rrh .picks.stats b{color:var(--ink);font-size:15px}
.rrh .picks.stats li span{display:inline;color:var(--mute)}
.rrh .clampbox{position:relative;margin:0 0 6px}
.rrh .readmore{display:none}


/* ---------- cta: the app + newsletter pair (round 6, art re-cut in round 8) ----------
   Two short cards of equal height (198 px at 1366), content vertically centred, sitting in a
   band whose own padding is even above and below. The app card's art is a variant class, see
   the block below; since round 9 dev renders `is-photo` (round 10: the Tuscan soup photo). The newsletter card
   is decorated with inline SVG only: six layered diagonal wavy bands running top-left to
   bottom-right, near-white where the copy sits and light orange at the far right edge, plus a
   sparse scatter of outline food glyphs over the right edge, all clear of the pill and the note.
   The band overrides live on .sec-alt.is-ctaband so the editorial band keeps its own rhythm. */
.rrh .sec-alt.is-ctaband{padding-bottom:0}
.rrh .sec-alt.is-ctaband>.sec{padding:0 20px}
.rrh .sec-alt.is-ctaband .cta{padding:34px 0}
.rrh .cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;padding:22px 0 6px;align-items:stretch}
.rrh .ctacard{position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;padding:20px 24px;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.045)}
.rrh .ctacard>*{position:relative;z-index:2}
.rrh .ctacard h3{font-size:17.5px;line-height:1.26;margin-bottom:5px}
.rrh .ctacard p{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--body);max-width:52ch}

/* ---- app card art: the photo treatment (is-photo; the round-8 phones/dark/glyph variants
   and their CSS were pruned in the session-40 optimization pass, nothing rendered them) ----
   The card is far wider than the 3:2 source, so cover scales the photo to the card WIDTH and
   the whole crop is vertical: object-position's second value is the only one that moves
   anything at this size. */
.rrh .ctacard.is-app{border-color:var(--tint-2)}
.rrh .ctacard.is-app h3,.rrh .ctacard.is-app>p{max-width:70%}
.rrh .ctacard.is-app>p{margin-bottom:11px}
.rrh .ctacard .ctabg{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:100% 48%}
.rrh .ctacard .ctawash{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(93deg,rgba(255,255,255,.975) 0%,rgba(255,255,255,.962) 50%,
    rgba(255,255,255,.885) 65%,rgba(255,255,255,.48) 83%,rgba(255,255,255,.14) 100%)}
/* four short bullets in two columns: half the height of a single stack, and it keeps the
   right third of the photo clear */
.rrh .ctalist{list-style:none;margin:0 0 14px;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;max-width:82%}
.rrh .ctalist li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.35;color:var(--ink)}
.rrh .ctalist .ic{width:16px;height:16px;color:var(--orange);stroke-width:2.1;margin-top:1px}
.rrh .ctacard.is-app .btn{align-self:flex-start;padding:10px 20px;font-size:13.5px;
  box-shadow:0 6px 16px rgba(230,126,34,.26)}
.rrh .ctacard.is-app .btn:hover{box-shadow:0 8px 20px rgba(230,126,34,.32)}

/* newsletter card: layered diagonal wavy bands (round 9). Six overlapping organic bands flow
   top-left to bottom-right, palest at the left where the copy sits and building to a light
   orange at the far right edge, with a sparse scatter of small outline food glyphs over the
   right edge only. Palette classes only, no fill/stroke attributes in the markup.
   The bands overlap, so each swatch below is what that band ADDS over the ones behind it. */
.rrh .ctacard.is-nl .ctaorg{position:absolute;inset:0;z-index:0;pointer-events:none}
/* direct child only: the scatter's nested <svg> has its own x/y/width/height and must not be
   stretched to the card by this rule */
.rrh .ctacard.is-nl .ctaorg>svg{display:block;width:100%;height:100%}
.rrh .ctaorg .w-1{fill:var(--tint);opacity:.7}
.rrh .ctaorg .w-2{fill:var(--tint);opacity:.85}
.rrh .ctaorg .w-3{fill:var(--tint-2);opacity:.55}
.rrh .ctaorg .w-4{fill:var(--tint-2);opacity:.75}
.rrh .ctaorg .w-5{fill:var(--orange-lt);opacity:.22}
.rrh .ctaorg .w-6{fill:var(--orange);opacity:.33}
/* the icon scatter. A nested svg, so it keeps its own aspect ratio inside a parent that does
   not; see the note in partials/keto-hub/cta.php. Kept low so it reads as texture, not content.
   fill/stroke go on the <use> and the loose marks, never on the glyph paths: fill, stroke and
   stroke-width all inherit, and inheritance is the one thing that reaches into a <use> shadow
   tree in every engine. vector-effect does not inherit, so that one is an attribute in cta.php. */
.rrh .ctaorg .sc{overflow:hidden}
.rrh .ctaorg .sc-o,.rrh .ctaorg .sc-g{fill:none;stroke-width:1;
  stroke-linecap:round;stroke-linejoin:round}
/* the orange glyphs have to survive sitting ON the two orange bands, which is where half of
   them land, so they run a little stronger than the green ones would need */
.rrh .ctaorg .sc-o{stroke:var(--orange);opacity:.34}
.rrh .ctaorg .sc-g{stroke:var(--green);opacity:.4}
.rrh .ctaorg .sc-m{opacity:.3}
.rrh .ctaorg .sc-g.sc-m{opacity:.44}
.rrh .ctacard.is-nl h3,.rrh .ctacard.is-nl>p{max-width:70%}
.rrh .ctacard.is-nl .nlform{max-width:400px}
.rrh .formnote{font-size:12.5px;color:var(--mute);margin:10px 0 0}
.rrh .ctacard p.formnote{font-size:12.5px;margin:9px 0 0;max-width:70%}
/* style.css does not italicise <em> everywhere; the operator asked for this line in italic. */
.rrh .ctacard p.formnote em{font-style:italic}

/* ---------- related hubs ---------- */
.rrh .hubs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:18px 0 4px}
.rrh .hub{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:14px;text-decoration:none;background:#fff}
.rrh .hub .ic{width:26px;height:26px;color:var(--mute);stroke-width:1.8}
.rrh .hub b{display:block;font-size:14px;color:var(--ink)}
.rrh .hub span{font-size:12.5px;color:var(--mute)}
.rrh .hub:hover{border-color:var(--orange)}
.rrh .hub:hover .ic{color:var(--orange)}
.rrh .hub:hover b{color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .rrh .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rrh .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rrh .hubs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
  .rrh .editorial{grid-template-columns:minmax(0,1fr);gap:26px}
  .rrh .cta{grid-template-columns:minmax(0,1fr)}
  .rrh .hero-in{min-height:250px;padding-top:36px;padding-bottom:34px}
}
@media (max-width:760px){
  .rrh .shell{padding:0 16px}
  .rrh .sec{padding:32px 16px 6px}
  .rrh .sec-alt.is-ctaband>.sec{padding:0 16px}
  .rrh .sec-alt.is-ctaband .cta{padding:28px 0}
  /* stacked cards: the copy needs the full width, so the app photo drops to a texture under a
     near-flat wash and the bullets go back to one column */
  .rrh .cta{gap:18px}
  .rrh .ctacard{padding:19px 20px}
  .rrh .ctacard.is-app h3,.rrh .ctacard.is-app>p,.rrh .ctalist,
  .rrh .ctacard.is-nl h3,.rrh .ctacard.is-nl>p,.rrh .ctacard p.formnote{max-width:none}
  /* Session 40 close (operator, on-phone review): "slightly less wash on the food portion".
     The ramp's food end opens from .88@80/.68@100 to .82@76/.45@100; the copy zone stays put. */
  .rrh .ctacard .ctawash{background:linear-gradient(152deg,rgba(255,255,255,.972) 0%,
    rgba(255,255,255,.955) 52%,rgba(255,255,255,.82) 76%,rgba(255,255,255,.45) 100%)}
  .rrh .ctalist{grid-template-columns:minmax(0,1fr);gap:7px;margin-bottom:13px}
  .rrh .ctacard.is-nl .nlform{max-width:none}
  /* stacked, the copy runs the full width of the card, so there is no right half left to
     scatter into: the glyphs would land under the pill and the note. They come off entirely
     rather than being faded to the point of being dirt. */
  .rrh .ctaorg .sc{display:none}
  /* the same bands are a much bigger share of a narrow card, and every one of them now passes
     behind type, so the whole ramp drops back, the two orange ones hardest */
  .rrh .ctaorg .w-1{opacity:.5}
  .rrh .ctaorg .w-2{opacity:.62}
  .rrh .ctaorg .w-3{opacity:.4}
  .rrh .ctaorg .w-4{opacity:.5}
  .rrh .ctaorg .w-5{opacity:.16}
  .rrh .ctaorg .w-6{opacity:.24}
  /* narrow card: the crop turns horizontal (358 px card vs the 3:2 source), so the first value
     matters here; 64% keeps the soup bowl in the visible right half under the stacked wash */
  .rrh .ctacard .ctabg{object-position:64% 54%}
  .rrh .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .rrh .row{grid-auto-columns:72vw;gap:14px;padding:16px 0 18px}
  .rrh .row.is-pins{grid-auto-columns:58vw}
  .rrh .seg{padding:11px 4px;font-size:12.5px}
  .rrh .hubs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rrh .tiles{gap:12px}
  .rrh .sechead h2{font-size:19px}
  .rrh .sechead .shic{width:36px;height:36px;border-radius:9px}
  .rrh .sechead .shic .ic{width:22px;height:22px}
  .rrh .sechead .rule{display:none}
  .rrh .sechead{flex-wrap:wrap;gap:10px}
  .rrh .sechead .more{margin-left:auto}
  /* Session 40, operator item 4: the "Recipe index" more-link wraps under the long
     "Check out our other recipes" heading at 390 and lands misaligned; the operator ruled it
     can come off on mobile. Desktop keeps it (it aligns fine there). */
  .rrh .sec-otherhubs .sechead .more{display:none}
  .rrh .arws{display:none}
  .rrh .card-b{padding:11px 12px 13px}
  .rrh .card-t{font-size:14px}
  /* Session 40, operator item 3: the mobile hero gets the DESKTOP treatment scaled down,
     not the old full-photo-under-a-flat-wash look. Zoomed photo (base 118% plus the per-hub
     --heroshift-m), washed hard to the left where the type sits, clearing to real food at the
     right edge. Focal point per hub via --heropos-m in config/hubs.php. */
  /* max-width:none: the base `.rrh img{max-width:100%}` would silently cap the zoom back to
     the hero's own width (the 118% would never render). Mobile only; the desktop hero keeps
     its approved framing, where --heroshift stays inert under the same cap. */
  .rrh .hero-bg{object-position:var(--heropos-m,var(--heropos,center 42%));width:calc(118% + var(--heroshift-m,0%));max-width:none;left:var(--heroleft-m,0%)}
  .rrh .hero-wash{background:linear-gradient(97deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.945) 40%,rgba(255,255,255,.86) 62%,rgba(255,255,255,.62) 82%,rgba(255,255,255,.32) 100%)}
  .rrh .hero-in{min-height:300px;padding-top:26px;padding-bottom:26px}
  .rrh .hero-in>*{max-width:none}
  .rrh .hero h1{text-shadow:0 1px 0 rgba(255,255,255,.9),0 0 18px rgba(255,255,255,.75)}
  .rrh .hero .lede{font-size:15.5px}
  .rrh .hero .lede,.rrh .hero .crumb,.rrh .hero .byline,.rrh .hero .hnote{text-shadow:0 1px 0 rgba(255,255,255,.85),0 0 12px rgba(255,255,255,.7)}
  /* the 8 categories become a scroll-snap rail; ONE 44px Filter button is pinned right,
     and Sort moves into the sheet (see .fsort) */
  .rrh .cat{flex:0 0 86px;padding:8px 4px 7px;scroll-snap-align:start}
  .rrh .cat .ic{width:23px;height:23px}
  .rrh .cat b{font-size:11px}
  .rrh .cat span{font-size:10px}
  .rrh .strip-track{scroll-snap-type:x proximity}
  .rrh .strip-tools{padding-left:9px;gap:0;align-items:center}
  .rrh .selwrap{display:none}
  .rrh .fbtn{width:44px;height:44px;padding:0;gap:0;border-radius:12px;justify-content:center;position:relative;flex:none}
  .rrh .fbtn .lbl{display:none}
  .rrh .fbtn .ic{width:20px;height:20px}
  .rrh .fbtn .pill{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;font-size:10.5px;
    background:var(--orange);color:#fff;border:2px solid #f7f7f7;padding:0 4px}
  .rrh .fbtn.is-on .pill{background:#fff;color:var(--ink);border-color:#fff}
  .rrh .strip-fade{display:block;width:26px}
  .rrh .clamped{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  .rrh .readmore{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--orange);font-weight:700;font-size:14px;cursor:pointer;padding:6px 0;text-decoration:underline!important}
  .rrh .picks{padding:16px}
  /* modal becomes a bottom sheet */
  .rrh .fmodal{left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;transform:translateY(102%);
    border-radius:18px 18px 0 0;max-height:88vh}
  .rrh .fmodal.open{transform:translateY(0)}
  .rrh .fm-h,.rrh .fm-b,.rrh .fm-f{padding-left:16px;padding-right:16px}
  .rrh .fm-h::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:2px;background:#dcdcdc}
  .rrh .fm-h{position:relative;padding-top:20px}
  .rrh .fsort{display:block;padding:14px 0 6px;border-bottom:1px solid var(--line)}
}
@media (max-width:560px){
  .rrh .tiles{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  .rrh .cat{flex:0 0 80px}
  .rrh .cat b{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){.rrh,.rrh *{transition:none!important;scroll-behavior:auto!important}}

/* ---------- server-rendered pagination (no-JS + crawlers; JS hides it) ---------- */
/* style.css ships a global .pagination clearfix; neutralise it inside the hub. */
.rrh .pagination{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:0;padding:26px 0 4px;clear:none}
.rrh .pagination::before,.rrh .pagination::after{content:none;display:none}
.rrh .pagination .pagelink{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--orange);background:#fff;color:var(--ink);border-radius:999px;padding:11px 22px;font-size:14.5px;font-weight:700;text-decoration:none;line-height:1.2}
.rrh .pagination .pagelink:hover{background:var(--tint)}
.rrh .pagination .pagelink .ic{width:16px;height:16px;color:var(--orange);stroke-width:2.3}
.rrh .pagination .pagenum{font-size:13.5px;color:var(--mute);font-weight:600}

/* ---------- collection cards (collections hub) ---------- */
.rrh .collgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:18px 0 4px}
/* Round 16: the grid is split around the CTA band, so the half below it resumes without a
   second section head. It keeps a little air under the band's bottom rule but nothing like the
   44 px a fresh section opens with, so the two halves still read as one grid. */
.rrh .sec.collgrid-more{padding-top:14px}
.rrh .collcard{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:box-shadow .18s ease,transform .18s ease}
.rrh .collcard:hover{box-shadow:0 10px 24px rgba(0,0,0,.10);transform:translateY(-2px)}
.rrh .collcard-media{position:relative;display:block;aspect-ratio:3/2;background:#f0f0f0}
.rrh .collcard-media img{width:100%;height:100%;object-fit:cover}
.rrh .collcard-b{padding:14px 16px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.rrh .collcard-t{font-size:16px;line-height:1.32;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rrh .collcard-t a{color:var(--ink);text-decoration:none}
.rrh .collcard:hover .collcard-t a{color:var(--orange)}
.rrh .collcard-s{margin:0;font-size:13.5px;line-height:1.5;color:var(--body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- newsletter: the site's real Mailchimp for WP form (28436), styled as one pill ----
   Markup is fixed by mc4wp: <form class="mc4wp-form"><div class="mc4wp-form-fields">
   <input type=email class=splash__email><input type=submit class=splash__button></div>
   <label style="display:none"> honeypot ...</label><input type=hidden ...>
   <div class="mc4wp-response"></div></form>. The two controls are conjoined into a single
   rounded pill: the wrapper draws the border and the focus ring, the controls draw nothing.
   `display:contents` on any <p> keeps this working if mc4wp ever wpautop's the form content. */
.rrh .nlform{display:block}
.rrh .nlform .mc4wp-form{width:100%}
.rrh .nlform .mc4wp-form-fields{display:flex;flex-wrap:nowrap;align-items:stretch;gap:0;background:#fff;
  border:1.5px solid var(--line);border-radius:999px;overflow:hidden;
  transition:border-color .15s ease,box-shadow .15s ease}
.rrh .nlform .mc4wp-form-fields:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px rgba(230,126,34,.20)}
.rrh .nlform .mc4wp-form-fields p{margin:0;display:contents}
.rrh .nlform input[type=email],.rrh .nlform input[type=text]{flex:1 1 auto;width:auto;min-width:0;
  border:0;background:transparent;border-radius:999px 0 0 999px;padding:13px 8px 13px 20px;
  font:inherit;font-size:14.5px;line-height:1.2;color:var(--ink)}
.rrh .nlform input[type=email]::placeholder,.rrh .nlform input[type=text]::placeholder{color:#8b8b8b}
.rrh .nlform input[type=email]:focus,.rrh .nlform input[type=text]:focus,
.rrh .nlform input[type=email]:focus-visible,.rrh .nlform input[type=text]:focus-visible{outline:none;box-shadow:none}
.rrh .nlform input[type=submit],.rrh .nlform button[type=submit]{flex:0 0 auto;border:0;
  border-radius:0 999px 999px 0;background:var(--green);color:#1f3a2b;padding:13px 22px;font:inherit;
  font-size:14px;font-weight:700;line-height:1.2;cursor:pointer;white-space:nowrap;
  -webkit-appearance:none;appearance:none}
.rrh .nlform input[type=submit]:hover,.rrh .nlform button[type=submit]:hover{background:#7ad6a0}
.rrh .nlform input[type=submit]:focus-visible,.rrh .nlform button[type=submit]:focus-visible{
  outline:2px solid var(--orange);outline-offset:-3px;border-radius:0 999px 999px 0}
.rrh .nlform label[style]{display:none!important}
.rrh .nlform .mc4wp-response{font-size:13px;color:var(--body)}
.rrh .nlform .mc4wp-response p{margin:8px 0 0}
/* sections/splash/splash.css ships `#mc4wp-form-1 > div.mc4wp-form-fields > input.splash__email`
   (and .splash__button) inside a <=480px block. That is an ID selector, so it outranks
   everything above and would round every corner of the email input and blow the submit label up
   to 4.2vmin. These four declarations are the only place in this file that needs !important. */
@media (max-width:480px){
  .rrh .nlform .mc4wp-form-fields>input[type=email]{border-radius:999px 0 0 999px!important;
    font-size:14px!important;padding:13px 4px 13px 16px!important}
  .rrh .nlform .mc4wp-form-fields>input[type=submit]{font-size:12.5px!important;padding:13px 13px}
}

/* ---------- Genesis integration: the loop is removed on hub pages, so the empty
     content column must not open a gap between the page and the footer ---------- */
body.rrh-hub #wrap>#inner{margin:0;padding:0;width:auto;max-width:none}
body.rrh-hub #content-sidebar-wrap>#content:empty{display:none}
body.rrh-hub .siteFooter{margin-top:56px}

@media (max-width:1100px){
  .rrh .collgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .rrh .collgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .rrh .pagination{padding:20px 0 4px}
}
@media (max-width:560px){
  .rrh .collgrid{grid-template-columns:minmax(0,1fr)}
}