/* Карточка сорта: общие стили всех сортов (были встроены в каждую страницу). */
:root{--bg:var(--surface-paper);--paper:var(--surface-card);--ink:var(--text-primary);--ink2:var(--text-secondary);--ink3:var(--text-secondary);--rule:var(--border-subtle);--soft:var(--surface-mint);
--sel:var(--brand-sand);--grape:var(--brand-teal-deep);--leaf:var(--brand-olive);
--ok:var(--color-success);--ok-bg:var(--surface-mint);--mid:var(--color-warning);--mid-bg:var(--brand-sand);--disp:var(--brand-coral);--disp-bg:var(--surface-paper);--few:var(--text-secondary);--few-bg:var(--surface-mint);
--bad:var(--color-error);--bad-bg:var(--surface-paper);--hang:var(--brand-teal);--wait:var(--text-secondary);
--serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--hand:"Segoe Print","Segoe Script","Bradley Hand","Comic Sans MS",cursive;}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans);}
a{color:inherit;}
img{max-width:100%;height:auto;display:block;}
button{font:inherit;color:inherit;}
.vswitch{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;padding:4px 32px;font-size:12px;color:var(--ink3);background:var(--soft);}
.vs-links{display:flex;flex-wrap:wrap;gap:2px;}
.vs-links a{padding:2px 9px;border-radius:999px;text-decoration:none;color:var(--ink2);}
.vs-links a:hover{background:var(--paper);}
.vs-links a[aria-current]{background:var(--ink);color:#fff;}

/* site header (menu from the page prototype; sections that do not exist yet are greyed out) */
.site{position:relative;z-index:2;display:flex;align-items:center;gap:40px;max-width:1240px;margin:0 auto;padding:18px 32px;border-bottom:1px solid var(--rule);}
.logo{position:relative;z-index:2;font:700 30px/1 var(--serif);letter-spacing:-.02em;text-decoration:none;color:var(--ink);}
.menu{position:relative;z-index:2;display:flex;gap:30px;font-size:15px;white-space:nowrap;}
.menu a{text-decoration:none;color:var(--ink);font-weight:500;}
.menu a[aria-current]{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:7px;text-decoration-thickness:2px;}
.menu [aria-disabled]{color:var(--ink3);opacity:.6;cursor:default;}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;width:300px;height:44px;padding:0 16px;border:1px solid var(--rule);border-radius:999px;background:rgba(255,253,248,.72);color:var(--ink3);position:relative;z-index:2;cursor:default;}
.search svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;}
.search input{flex:1;min-width:0;border:0;background:none;font:14px var(--sans);color:inherit;opacity:.8;}
.search input::placeholder{color:var(--ink3);}

/* hero */
/* The art is one layer under the header and the hero text, as in the prototype: the cane rises into the gap
   between the menu and the search, the trellis shows through the header, the facts run left of the cluster.
   It is placed in % of the column (.top), so it scales with it; the text alone sets the height of the hero.
   The art box spans the grid row of the text only (from the top of .top down to the facts row), so the cluster,
   whose height is capped by that box, can never come down onto the facts, whatever the tagline or the picture. */
.topwrap{overflow-x:clip;}  /* the trellis runs past the column up to the window edge, no further */
.top{position:relative;max-width:1240px;margin:0 auto;container-type:inline-size;}  /* cqw: % of the column */
.hero{display:grid;grid-template-columns:minmax(0,1fr);max-width:1240px;margin:0 auto;padding:22px 32px 0;position:relative;}
.htext{grid-row:1;grid-column:1;position:relative;z-index:2;min-height:calc(29cqw - 22px);}  /* a short tagline does not squeeze the cluster too much */
.crumbs{display:flex;align-items:center;gap:10px;margin:0 0 30px;font-size:14px;color:var(--ink3);}
.crumbs a{text-decoration:none;color:var(--ink3);}
.crumbs a:hover{color:var(--ink);}
.crumbs svg{width:18px;height:18px;display:block;fill:none;stroke:var(--ink2);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;}
.hero h1{font:700 min(clamp(56px,7.4vw,98px),calc((50.5cqw - 44px) / var(--nm,6)))/.95 var(--serif);margin:0;letter-spacing:-.02em;}
/* --nm: the name's width in em (tools/variety_page.py): a long name gets a smaller size and ends before the cluster */
/* переход по ссылке на блок этапа (#cvetenie-pogoda): не прятать начало под прилипшей лентой (card.js);
   у панели этапа отступ задан в stage-panel.css */
.sb-block{scroll-margin-top:72px;}
.lat{font:italic 400 clamp(32px,4vw,52px)/1.1 var(--serif);color:var(--ink2);margin:4px 0 26px;}
.tag{font-size:19px;line-height:1.5;color:var(--ink2);max-width:min(23em,calc(49cqw - 48px));margin:0 0 30px;}  /* ends before the cluster */
.hart{position:absolute;grid-row:1/2;grid-column:1/2;inset:-22px -32px 0;margin:0;pointer-events:none;}  /* the text row + the hero padding */
.hart img{position:absolute;max-width:none;height:auto;user-select:none;}
.hb,.hf{mix-blend-mode:multiply;}
.hb{left:53%;top:10.5cqw;width:51%;opacity:.85;}  /* smaller and paler, the right edge where it was; its ground meets the numbers row */
.hf{opacity:.95;}
.hf1{left:39%;top:6cqw;width:35%;}  /* ends before the first trellis post */
.hf2{left:36cqw;top:21cqw;width:31cqw;rotate:-34deg;opacity:.75;}
.hf3{left:61cqw;top:21cqw;width:17cqw;rotate:30deg;opacity:.7;}
.hf.flip{scale:-1 1;}
.hart .hc{left:49%;top:10px;width:23.5%;height:calc(100% - 18px);object-fit:contain;object-position:50% 0;filter:drop-shadow(0 18px 24px rgba(60,50,40,.08));}
/* everything drawn under the menu is faded with a veil of the page colour (under the menu text, over the art) */
.hart::after{content:"";position:absolute;top:0;left:-50vw;right:-50vw;height:110px;
 background:linear-gradient(rgb(246 241 231/.86) 0,rgb(246 241 231/.86) 70px,rgb(246 241 231/0) 110px);}
.hnote{position:absolute;z-index:3;left:74%;top:27cqw;display:flex;flex-direction:column;align-items:flex-start;}
.hnote[hidden]{display:none;}
.hnote p{margin:0;font:21px/1.15 var(--hand);color:var(--ink2);transform:rotate(-8deg);max-width:9em;}
.hnote .arrow{width:62px;height:28px;margin:6px 0 0 -42px;}
.ico{display:inline-block;flex:none;width:32px;height:32px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;}
.hfacts{grid-row:2;grid-column:1;justify-self:start;position:relative;z-index:2;list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(4,auto);}
.hfacts li{display:flex;gap:10px;align-items:flex-start;padding:2px 11px;border-left:1px solid var(--rule);}
.hfacts li:first-child{border-left:0;padding-left:0;}
.hfacts .ico{color:var(--ink);margin-top:4px;}
.hfacts .fl{display:block;font-size:13px;color:var(--ink2);margin-bottom:3px;white-space:nowrap;}
.hfacts b{display:block;font:400 20px/1.2 var(--serif);white-space:nowrap;}
.hfacts div>span:last-child{display:block;font-size:11.5px;line-height:1.3;color:var(--ink3);margin-top:3px;max-width:11.5em;}
.hnums{grid-row:3;grid-column:1;position:relative;z-index:2;list-style:none;margin:0;padding:22px 0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--bg);}
.hnums li{padding:0 22px;border-left:1px solid var(--rule);text-align:center;}
.hnums li:first-child{border-left:0;}
.hnums b{display:block;font:600 40px/1.1 var(--serif);}
.hnums span{font-size:14.5px;color:var(--ink2);}

main{max-width:1240px;margin:0 auto;padding:0 32px;}

/* season */
.season{margin-top:44px;background:var(--paper);border:1px solid var(--rule);border-radius:22px;overflow:hidden;}
.shead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:24px 28px 0;}
.shead h2{font:400 30px/1.15 var(--serif);margin:0 0 4px;}
.shead p{margin:0;color:var(--ink2);font-size:14.5px;}
.arrows{display:flex;gap:8px;}
.arrows[hidden]{display:none;}
.arrows button{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer;}
.arrows button svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.arrows button:hover{background:var(--soft);}
.strip{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;border-bottom:1px solid var(--rule);}
.strip::-webkit-scrollbar{display:none;width:0;height:0;}
.strip-in{position:relative;min-width:1120px;padding:4px 0;}
.sr{--sr-muted:var(--ink3);}
.strip-hint{display:none;margin:10px 16px 0;font-size:12px;color:var(--ink3);}
.strip-hint span{margin-left:6px;}
@media(max-width:1185px){.strip-hint{display:block;}}
/* the season line: a dot per stage, its name under it */
.tabs{position:relative;height:84px;margin-top:0;}
.sline{position:absolute;left:3%;right:3%;top:8px;height:1px;opacity:.22;}
.stg{position:absolute;top:0;transform:translateX(-50%);border:0;background:none;width:11%;min-height:48px;padding:20px 0 0;font:400 15px/1.2 var(--serif);color:var(--ink2);text-align:center;cursor:pointer;}
.stg i{position:absolute;left:50%;top:8px;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 3px var(--paper);transition:transform .15s;}
.stg span{position:relative;display:block;padding:2px 0;}
.stg small{display:block;margin-top:3px;font:400 10px/1.35 var(--sans);color:var(--ink3);}
.stg:hover i{transform:scale(1.3);}
.stg:hover span{color:var(--grape);}
.stg:focus-visible{outline:0;}
.stg:focus-visible span{outline:2px solid var(--ink);outline-offset:1px;}
.stg[aria-selected=true]{color:var(--grape);font-weight:600;}
.stg[aria-selected=true] i{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;background:var(--dot);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--dot),0 0 0 6px rgba(166,142,91,.12);transform:none;}
.stg[aria-selected=true] span::before{content:"";position:absolute;left:14%;right:14%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--dot),transparent);}
.stg.now small::after{content:" · сейчас";color:var(--brand-coral);white-space:nowrap;}
/* Этап без наблюдений: серый, не нажимается, место на рисунке лозы тоже (build_stage_panels.disable_stage) */
.stg.off{cursor:default;opacity:.42;filter:grayscale(1);}
.stg.off:hover i{transform:none;}
.stg.off:hover span{color:inherit;}
.sr-hl.off{pointer-events:none;}
.panels-empty{margin:20px 0 4px;font:400 17px/1.5 var(--serif);color:var(--ink2);text-align:center;}

.panels{padding:8px 28px 28px;}
.panel{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;padding-top:22px;}
.js .panel[data-hide]{display:none;}
.phead{display:flex;gap:16px;align-items:center;}
.sicon{width:66px;height:96px;flex:none;background:var(--soft);border-radius:16px;object-fit:contain;padding:8px;box-sizing:border-box;}
.sicon.wood{width:88px;object-fit:contain;padding:5px;background:none;border-radius:0;}
.phead h3{font:400 44px/1.05 var(--serif);margin:0;}
.per{margin:6px 0 0;font:18px/1.4 var(--serif);color:var(--ink2);display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;}
.plead{font-size:16.5px;color:var(--ink);margin:18px 0 20px;max-width:46em;}
.boxes{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.box{background:var(--paper);border:1px solid var(--rule);border-radius:16px;padding:16px 18px;}
.box h4{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:600 15.5px/1.3 var(--sans);}
.box h4 svg{width:26px;height:26px;stroke:var(--leaf);}
.box h4.r svg{stroke:var(--bad);}
.dots{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:14.5px;line-height:1.45;}
.dots li{position:relative;padding-left:18px;}
.dots li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--ok);}
.dots.chk li::before{background:var(--brand-teal);}
.dots.bad li::before{background:var(--bad);}
.env{display:grid;gap:8px;}
.env div{background:var(--bg);border-radius:12px;padding:10px 12px;}
.env b{font-size:13.5px;}
.env p{margin:4px 0 0;font-size:13.5px;color:var(--ink2);line-height:1.45;}
.rel{margin:16px 0 0;font-size:13px;color:var(--ink3);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;}
.rel a{text-decoration:none;color:var(--ink2);display:inline-flex;gap:6px;align-items:center;border:1px solid var(--rule);border-radius:999px;padding:2px 4px 2px 10px;background:var(--paper);}
.rel a:hover{border-color:var(--ink3);}
.pill{display:inline-flex;align-items:center;gap:5px;font:600 12px/1 var(--sans);border-radius:999px;padding:4px 9px;white-space:nowrap;}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor;}
.pill.sure{background:var(--ok-bg);color:var(--text-primary);}.pill.likely{background:var(--mid-bg);color:var(--text-primary);}
.pill.disp{background:var(--disp-bg);color:var(--brand-teal);}.pill.few{background:var(--few-bg);color:var(--text-secondary);}
.rel .pill{padding:3px 7px;font-size:11px;}

.pside{display:grid;gap:14px;align-content:start;}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.stat{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:10px 12px;}
.stat b{display:block;font:400 26px/1.1 var(--serif);}
.stat span{font-size:12px;color:var(--ink2);line-height:1.3;display:block;}
.statnote{margin:-8px 0 0;font-size:12px;color:var(--ink3);}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:16px;padding:14px 16px;}
.card header{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.card h4{margin:0 0 6px;font:600 15px/1.3 var(--sans);}
.cnt{font-size:12px;color:var(--ink3);}
.chart{display:block;width:100%;height:auto;margin-top:4px;}
.chart .gl{stroke:var(--rule);}
.chart .row{stroke:var(--border-subtle);}
.chart .ax,.chart .yl{font:11px var(--sans);fill:var(--ink3);}
.chart .band{fill:var(--surface-card);}
.chart .band.risk{fill:var(--bad-bg);}
.chart .bandl{font:10.5px var(--sans);fill:var(--brand-coral);}
.chart .pt{stroke:#fff;stroke-width:1;}
.chart .pt.ok{fill:var(--ok);}.chart .pt.mid{fill:var(--mid);}.chart .pt.wait{fill:var(--wait);}.chart .pt.bad{fill:var(--bad);}.chart .pt.hang{fill:var(--hang);}.chart .pt.leaf{fill:var(--leaf);}
.chart .pt.hollow{fill:var(--paper)!important;stroke-width:2;}
.chart .pt.hollow.ok{stroke:var(--ok);}.chart .pt.hollow.mid{stroke:var(--mid);}.chart .pt.hollow.wait{stroke:var(--wait);}.chart .pt.hollow.hang{stroke:var(--hang);}.chart .pt.hollow.leaf{stroke:var(--leaf);}
.chart .ser{fill:none;stroke:var(--leaf);stroke-width:1.4;stroke-dasharray:3 3;opacity:.7;}
.chart .rng{stroke:var(--leaf);stroke-width:2;opacity:.5;}
.chart .hangbar{stroke:var(--brand-teal);stroke-width:8;stroke-linecap:round;}
.chart .endl{font:600 11px var(--sans);fill:var(--hang);}
.leg{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;padding:0;font-size:12px;color:var(--ink2);}
.leg.col{display:grid;gap:3px;}
.sw{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:var(--ink3);}
.sw.ok{background:var(--ok);}.sw.mid{background:var(--mid);}.sw.wait{background:var(--wait);}.sw.bad{background:var(--bad);}.sw.hang{background:var(--hang);}.sw.disp{background:var(--disp);}.sw.leaf{background:var(--leaf);}
.sw.sq{border-radius:2px;}.sw.ho{background:none!important;border:2px solid var(--leaf);width:10px;height:10px;}
.leg li:nth-child(n) .sw.sq:not(.leaf){background:var(--ink3);}
.leg .sw.ho:not(.leaf){border-color:var(--ink3);}
.sw.line{width:18px;height:0;border-radius:0;border-top:1.5px dashed var(--leaf);background:none;}
.sw.bar{width:18px;height:7px;border-radius:4px;background:var(--surface-paper);}
.sw.typ{background:var(--grape);border-radius:3px;width:14px;}.sw.all{background:var(--surface-paper);border-radius:3px;width:14px;}.sw.ext{background:repeating-linear-gradient(90deg,var(--surface-paper) 0 3px,transparent 3px 5px);border-radius:3px;width:14px;}
.obar{margin-top:14px;border-top:1px solid var(--rule);padding-top:12px;}
.oh{margin:0 0 6px;font-size:13px;color:var(--ink2);}
.bar{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px;}
.bar span.ok{background:var(--ok);}.bar span.mid{background:var(--mid);}.bar span.disp{background:var(--disp);}.bar span.wait{background:var(--wait);}.bar span.bad{background:var(--bad);}
.known{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:9px;}
.known li{display:grid;grid-template-columns:150px 1fr 34px;gap:10px;align-items:center;font-size:13.5px;}
.kb{height:10px;background:var(--soft);border-radius:5px;overflow:hidden;}
.kb i{display:block;height:100%;border-radius:5px;}
.kb i.sure{background:var(--ok);}.kb i.likely{background:var(--mid);}.kb i.disp{background:var(--disp);}.kb i.few{background:var(--few);}
.kn{text-align:right;color:var(--ink2);font-variant-numeric:tabular-nums;}
.note{font-size:12.5px;color:var(--ink3);margin:10px 0 0;}
.sub{font-size:12.5px;color:var(--ink2);margin:14px 0 0;}
.wgrid{display:grid;gap:10px;margin-top:6px;}
.wrow{display:grid;grid-template-columns:96px 1fr;gap:4px 10px;align-items:center;}
.wl{font-size:13.5px;font-weight:600;}
.units{display:flex;flex-wrap:wrap;gap:3px;}
.u{width:14px;height:14px;border-radius:3px;background:var(--wait);}
.u.ok{background:var(--ok);}.u.mid{background:var(--mid);}.u.bad{background:var(--bad);}
.wn{grid-column:2;font-size:12px;color:var(--ink2);}
.rrow{margin:10px 0 18px;}
.rh{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font-size:13.5px;}
.rh span{color:var(--ink2);font-size:12.5px;}
.rtrack{position:relative;height:16px;background:var(--soft);border-radius:8px;margin-top:6px;}
.rg{position:absolute;top:0;bottom:0;border-radius:8px;}
.rg.all{background:var(--surface-paper);}.rg.typ{background:var(--grape);top:3px;bottom:3px;}
.rg.ext{background:repeating-linear-gradient(90deg,var(--surface-paper) 0 4px,transparent 4px 7px);}
.rticks{position:relative;height:16px;font-size:11px;color:var(--ink3);}
.tk{position:absolute;transform:translateX(-50%);top:2px;}
.olist{list-style:none;margin:6px 0 0;padding:0;}
.olist li{display:grid;grid-template-columns:86px 1fr auto;gap:12px;padding:11px 0;border-top:1px solid var(--rule);align-items:start;}
.obs .olist li:has(> .ob:first-child){grid-template-columns:1fr auto;}
.olist li:first-child{border-top:0;}
.od{font-size:12.5px;color:var(--ink2);padding-top:2px;}
.ob p{margin:0;font-size:14px;line-height:1.45;}
.ob .om{font-size:12.5px;color:var(--ink3);margin-top:3px;}
.st{font:600 11.5px/1 var(--sans);border-radius:999px;padding:5px 9px;white-space:nowrap;background:var(--few-bg);color:var(--text-secondary);}
.st.ok{background:var(--ok-bg);color:var(--text-primary);}.st.mid{background:var(--mid-bg);color:var(--text-primary);}.st.bad{background:var(--bad-bg);color:var(--brand-coral);}
.st.hang{background:var(--surface-card);color:var(--brand-teal);}.st.leaf{background:var(--surface-mint);color:var(--text-primary);}
.inferred{color:var(--ink3);cursor:help;}
.more summary{cursor:pointer;color:var(--grape);font-size:13.5px;font-weight:600;padding:8px 0 2px;list-style:none;}
.more summary::-webkit-details-marker{display:none;}
.more[open] summary{color:var(--ink3);}

.summary{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:28px;margin:48px 0 0;padding:28px 0;border-top:1px solid var(--rule);}
.summary h3,.how h3{font:400 24px/1.2 var(--serif);margin:0 0 12px;}
.dlist{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px;color:var(--ink2);}
.dlist b{color:var(--ink);font-weight:600;}
.dlist a{text-decoration:none;}
.how{border-top:1px solid var(--rule);padding:24px 0 8px;max-width:58em;}
.how p{color:var(--ink2);font-size:14.5px;}
.foot{max-width:1240px;margin:24px auto 0;padding:20px 32px 40px;font-size:13px;color:var(--ink3);border-top:1px solid var(--rule);}

/* Сильные стороны и риски — итог под наблюдениями (docs/SEO_GEO.md, §2.3) */
.vs-card{background:var(--paper);border:1px solid var(--rule);border-radius:22px;padding:24px 28px;}
.vplus{margin:28px 0 56px;}
.vs-card h2{font:400 30px/1.15 var(--serif);margin:0 0 16px;}
.vs-pros{display:grid;grid-template-columns:1fr 1fr;gap:12px 48px;}
.vs-pros h3{font:400 22px/1.2 var(--serif);margin:0 0 12px;}
.vs-list{list-style:none;margin:0;padding:0;font-size:15.5px;line-height:1.45;}
.vs-list li{position:relative;padding-left:22px;margin:0 0 9px;}
.vs-list li::before{content:"";position:absolute;left:2px;top:.52em;width:9px;height:9px;border-radius:50%;background:var(--ok);}
.vs-list.risk li::before{background:var(--disp);}
.vs-fit{margin:14px 0 0;padding-top:16px;border-top:1px solid var(--rule);font-size:16.5px;line-height:1.55;max-width:52em;}
.vs-meta{display:flex;flex-wrap:wrap;gap:4px 22px;margin:10px 0 0;font-size:14px;color:var(--ink2);}
.vs-meta a{color:var(--ink2);text-underline-offset:3px;}

@media (max-width:1060px){
 .panel{grid-template-columns:minmax(0,1fr);}
 .stats{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:1239px){
 /* the menu leaves no room for the cane: the cluster drops below the header line */
 .search{width:240px;}
 .hart .hc{top:56px;width:21%;height:calc(100% - 64px);}
}
@media (max-width:860px){
 .vswitch{padding:4px 16px;}
 .site{flex-wrap:wrap;gap:10px 24px;padding:14px 16px 10px;}
 .logo{font-size:26px;}
 .menu{order:3;width:100%;gap:20px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;font-size:14.5px;}
 .search{width:auto;flex:1;max-width:240px;height:38px;}
 .hero{grid-template-columns:minmax(0,1fr);padding:16px 16px 0;}
 .htext,.hart,.hfacts,.hnums{grid-column:1;grid-row:auto;}
 .htext{min-height:0;}
 .hfacts{justify-self:stretch;}
 .crumbs{margin-bottom:18px;}
 .tag{font-size:17px;margin-bottom:8px;max-width:23em;}
 .hero h1{font-size:min(56px,calc((100cqw - 32px) / var(--nm,6)));}
 .hart{position:relative;inset:auto;margin:0 -16px;height:min(118vw,520px);}
 .hb{display:none;}
 .hf1{left:-6%;top:10%;width:96%;}
 .hf2,.hf3{display:none;}
 .hart .hc{left:50%;top:0;transform:translateX(-50%);width:auto;height:100%;}
 .hart::after{display:none;}
 .hnote{left:auto;top:auto;right:2%;bottom:8%;}
 .hnote p{font-size:17px;}
 .hfacts{grid-template-columns:1fr 1fr;gap:18px 0;margin:18px 0 24px;}
 .hfacts li:nth-child(3){border-left:0;padding-left:0;}
 .hnums{grid-template-columns:1fr 1fr;gap:16px 0;padding:18px 0;}
 .hnums li:nth-child(3){border-left:0;}
 .hnums b{font-size:32px;}
 main{padding:0 16px;}
 .shead{padding:18px 16px 0;}
 .panels{padding:4px 16px 20px;}
 .boxes{grid-template-columns:minmax(0,1fr);}
 .stats{grid-template-columns:1fr 1fr;}
 .summary{grid-template-columns:minmax(0,1fr);gap:20px;}
 .phead h3{font-size:36px;}
 .foot{padding-left:16px;padding-right:16px;}
 .vs-card{padding:20px 18px;border-radius:18px;}
 .vs-card h2{font-size:25px;}
 .vs-pros{grid-template-columns:1fr;}
}
@media (max-width:480px){
 .known li{grid-template-columns:110px 1fr 28px;}
 .olist li{grid-template-columns:1fr auto;}
 .olist .od{grid-column:1/-1;padding:0;}
 .arrows button{width:36px;height:36px;}
}
@media print{.vswitch,.site .search,.arrows{display:none;}.js .panel[data-hide]{display:grid;}}