/* Contrast was low and the page monotone — everything sat within one violet at similar
    lightness. Body text moves to near-white, secondary copy lightens well clear of the ground,
    and each panel family gets its own hue so the eye can tell aroma from ancestry from
    mechanism at a glance. Operator 2026-08-24: "the contrast is a bit low and a bit monotone". */
 :root{--lit:#c9a6ff;--e:#453a63;--el:#655389;--s0:#07060d;--s1:#100d1c;--s2:#191430;
        --tx:#f7f4ff;--tx2:#cdc2e8;--tx3:#a99ec9;
        --teal:#6fe3d2;--amber:#f2c078;--rose:#f29ec4;--lime:#a9e06a}
 *{box-sizing:border-box}
 /* Two roles. The cultivar name is set as a REGISTER ENTRY — uppercase, wide-tracked, in the
    same grotesque as the body — because that is what this page is: an accession record, not a
    magazine feature. A display serif was tried and rejected on sight ("that western font"); it
    fought the ACC-number, letterspaced-label identity the rest of the site already has.
    JetBrains Mono carries every figure and label so numerals align in columns. */
 body{margin:0;background:var(--s0);color:var(--tx);
   font:15.5px/1.65 Inter,ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
   -webkit-font-smoothing:antialiased}
 .wrap{max-width:1140px;margin:0 auto;padding:20px 16px 90px}
 /* The label is the only ornament: small, widely tracked, and the same weight everywhere.
    Hierarchy comes from space and rule, not from size or colour. */
 .lbl{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--tx3)}
 /* The operator asked whether this keeps "the background and slick look of the cards".
    It does: same ground, same 1px seam, same soft violet bloom behind the header — the parts
    that made the cards feel built. What it does NOT take is the coloured rail down the left
    edge, which is the machine tell he spotted. Slick container, silent edge. */
 .panel{background:var(--s1);border:1px solid var(--e);border-radius:8px;
   margin:8px 0;overflow:hidden;scroll-margin-top:74px;position:relative}
 .panel[open]::before{content:"";position:absolute;top:-60px;left:-40px;width:230px;height:170px;
   background:radial-gradient(circle at 35% 40%,rgba(201,166,255,.13),transparent 70%);
   pointer-events:none}
 .panel>*{position:relative}
 .panel>.head{padding:10px 14px;background:var(--s2);display:flex;justify-content:space-between;
    gap:10px;cursor:pointer;list-style:none;align-items:baseline}
 .panel[open]>.head{border-bottom:1px solid var(--e)}
 /* NO coloured rail down the left of each card. It is one of the most recognisable
    machine-design tells — accent bar on a rounded card — and the operator named it on sight:
    "a weierd ai design artifcat, i want this to look elite". Differentiation now comes from
    typography and from the DATA's own semantic colour (aroma, terpene, landrace chips keep
    their hues); the frame around it stays silent. A quiet frame is what makes the content
    look expensive. */
 .panel>.head::-webkit-details-marker{display:none}
 .panel>.head::after{content:"";width:7px;height:7px;border-right:1px solid var(--tx3);
   border-bottom:1px solid var(--tx3);transform:rotate(45deg) translateY(-2px);
   transition:transform .18s ease;flex:0 0 auto}
 .panel[open]>.head::after{transform:rotate(225deg) translateY(-2px)}
 .panel>.head:hover .lbl{color:var(--lit)}
 .note{font-size:12.5px;color:var(--tx3);margin-left:auto;margin-right:8px}
 .allbtn{background:transparent;border:0;border-bottom:1px solid var(--el);color:var(--tx3);font:inherit;
   font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 0;cursor:pointer;flex:0 0 auto}
 .allbtn:hover{color:var(--tx)}
 .panel>.body{padding:12px 14px 13px}
 /* No gradient wash, no radial glow. Both are decoration standing in for design. */
 /* Two columns, not a stack. Operator 2026-08-24: "its a bit tall ... can we make it less
    vertical and more like the card?" Identity on the left, the numbers on the right, so the
    hero is one band instead of five stacked rows. Type comes down to the CARD's scale — the
    card's stat strip sets 18px figures against 13px labels and reads fine; there was no reason
    for this page to shout at 26px. */
 .hero{border:1px solid var(--el);border-radius:10px;padding:16px 18px;position:relative;
   overflow:hidden;background:var(--s1);display:grid;
   grid-template-columns:minmax(0,1fr) minmax(300px,42%);gap:26px;align-items:center}
 .heroL{min-width:0} .heroR{min-width:0}
 .hero::before{content:"";position:absolute;top:-110px;right:-70px;width:340px;height:280px;
   background:radial-gradient(circle at 60% 40%,rgba(201,166,255,.16),transparent 72%);pointer-events:none}
 .hero>*{position:relative}
 /* Mirrors the card's own header row: identifier left, generation chip right, same 13px
    mono at .16em that the TYPE FLOOR sets on .ac-id. */
 /* .16em tracking on a long breeder name ("ACC 31776 · GENETIC DESIGNER") overflowed a 500px
    hero and wrapped, stranding "DESIGNER" alone on a second line under a right-floated chip.
    Tracking is the part to spend here, not the words: .1em keeps the mono/institutional read
    and fits, and nowrap on the label means if it ever still cannot fit it ellipses cleanly
    instead of breaking the row. */
 .acc{display:flex;justify-content:space-between;align-items:center;gap:10px;
   font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;letter-spacing:.1em;
   color:var(--tx3);text-transform:uppercase}
 .acc>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
 .acc .gen{color:var(--lit);background:rgba(139,92,246,.14);border:1px solid rgba(185,140,255,.3);
   border-radius:3px;padding:2px 6px;font-weight:700;flex:0 0 auto}
 /* The card's name is 20px BOLD at letter-spacing:-.024em in MIXED case. The hero was set
    uppercase at +.07em — the opposite treatment on every axis, which is why it read as a
    different product. Operator 2026-08-25: "the top section doesnt look like the cards at
    all". Same treatment, one step up in size because this is the page's title. */
 h1{margin:8px 0 3px;font-size:27px;line-height:1.1;letter-spacing:-.024em;font-weight:700;
   text-transform:none}
 .cross{font-size:14.5px;color:var(--tx2);line-height:1.45}
 .acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center;
   border-top:2px solid var(--el);background:var(--s2);padding:10px 12px;border-radius:3px}
 .acts.bare{border-top:1px solid var(--e);background:none;padding:11px 0 0;border-radius:0}
 .notlisted{margin-right:auto;font-size:13.5px;color:var(--tx3)}
 .price{font-size:22px;font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--tx);
   margin-right:auto}
 .price i{font-style:normal;font-size:14px;color:var(--tx2);margin-right:1px;vertical-align:2px}
 .price em{display:block;font-style:normal;font-size:13px;letter-spacing:.12em;
   text-transform:uppercase;color:var(--tx3);font-weight:400;margin-top:3px}
 /* These were landing-page sized on a reference page. A record has an acquire action; it is
    not the point of the page. Card-button scale. */
 .buy{background:var(--tx);color:#0b0813;font-weight:600;text-decoration:none;padding:6px 13px;
   border-radius:2px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
 .ghost{background:transparent;border:1px solid var(--e);color:var(--tx2);padding:6px 12px;
   border-radius:2px;font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
 .badges{display:flex;flex-wrap:wrap;gap:0;margin-top:7px;align-items:baseline}
 .badge{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;
   text-transform:uppercase;padding:0;border:0;color:var(--tx3);cursor:default}
 .badge+.badge::before{content:"·";margin:0 7px;color:var(--el)}
 .badge.on{color:var(--lit)} .badge.ok{color:var(--teal)} .badge.warn{color:#f2a0a0}
 .cite{color:var(--lit);text-decoration:none;border-bottom:1px dotted var(--el)}
 .pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;font-size:12px}
 .pill{font-size:12.5px;padding:0;border:0;color:var(--tx2);background:transparent;letter-spacing:.04em}
 .pill+.pill::before{content:"·";margin:0 9px;color:var(--el)}
 .bar{height:9px;border-radius:5px;overflow:hidden;display:flex;border:1px solid var(--el);margin-top:0}
 .bar i{display:block;height:100%} .bar .i{background:linear-gradient(90deg,#8b5cf6,#b98cff)}
 .bar .s{background:linear-gradient(90deg,#2f6f66,#7fe3d4)}
 .splitrow{display:flex;justify-content:space-between;font-size:13px;margin-top:6px;color:var(--tx2)}
 .splitrow b{color:var(--tx);font-size:14px;font-family:'JetBrains Mono',ui-monospace,monospace;
   font-variant-numeric:tabular-nums}
 /* Operator 2026-08-25: "why does the chart that says indica/flower/gen/landrace look like
    excel spreadsheet". Because it WAS one — a 4-column grid with a filled ground, a rule top
    and bottom, and a hairline between every cell is the definition of a table, and centring
    the figures inside those cells finished the impression. Ruled cells are for data a reader
    COMPARES ACROSS ROWS; there is only one row here, so the walls carry no information and
    only supply the spreadsheet. It reads as one quiet spec line now: baseline-aligned
    figure+label pairs on an open ground, a single hairline above to seat it against the
    price band. Same five facts, no furniture. */
 .stats{display:flex;flex-wrap:wrap;gap:3px 24px;margin:13px 0 0;padding:11px 0 1px;
   border-top:1px solid var(--e)}
 .stats div{display:flex;align-items:baseline;gap:6px}
 .stats b{font-size:15px;font-weight:600;color:var(--tx);letter-spacing:-.01em;
   font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
 .stats span{font-size:11.5px;letter-spacing:.055em;text-transform:uppercase;color:var(--tx3)}
 /* The index was one horizontal scroller holding 18 links plus the Expand-all button: 3,414px
   of content in a 625px strip, hard-cut at both ends, with the button scrolling away out of
   reach. Operator 2026-08-24: "the expand bar is a bit werid and cuts off on the ends and is
   fitted werid". Nothing is hidden now — the control is pinned, the links wrap, and the row is
   inset instead of bleeding past the page edge. */
/* ONE LINE, at every width. First it was a horizontal scroller hiding 2,789px with a hard cut
   at both ends and the Expand-all button scrolling out of reach; wrapping the links instead
   fixed the cut but grew the sticky bar to 333px over 9 rows, which is worse — a third of the
   screen permanently spent on navigation. The index folds into one control that opens over the
   page, so the bar is a fixed 44px and nothing is hidden or clipped. */
/* SCOPED to .topbar, not bare `nav`. It was written as a type selector and there are two navs
   on this page — the leak cost two separate bugs in the bottom tab bar: `top:0` pinned it to
   the TOP of the screen while its own `bottom:0` computed correctly, and `margin:0 -16px` made
   it 422px wide inside a 390px viewport with the first tab sitting at x=-12 (the operator saw
   "VERVIEW"). A type selector for a component is a trap the moment a second one appears. */
 /* Flush with the content column. This used to bleed `margin:0 -16px` and pad 16px back —
    a guess at the container's inset that did not match where the cards actually end, so the
    rule under it started and stopped at neither the card edge nor the viewport edge.
    Operator 2026-08-25: "the expand all line is weird and doesnt end on the left or the
    right, the card or row." Aligning it to the same box as the panels means it lines up by
    construction instead of by a number that has to be kept in sync. */
 .topbar{position:sticky;top:0;z-index:20;background:rgba(16,13,28,.97);backdrop-filter:blur(10px);
      border-bottom:1px solid var(--e);margin:0 0 6px;padding:0;height:44px;
      display:flex;align-items:center;gap:14px}
 .navname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
   font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.18em;
   text-transform:uppercase;color:var(--tx3)}
 .navjump{flex:0 0 auto;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;
   letter-spacing:.16em;text-transform:uppercase;color:var(--tx2);text-decoration:none;
   border-bottom:1px solid var(--el);padding:5px 0}
 .navjump:hover{color:var(--tx)}
 /* A CHART, not a scroller and not a dropdown. Operator 2026-08-24: "can you make it not a
    scroll but a chart so its easily accessible?" Every section is visible at once in a fixed
    grid — nothing hidden behind an overflow, a hover, or a disclosure. */
 /* ── TWO SHELLS, ONE PAGE ───────────────────────────────────────────────────────
    Operator 2026-08-24: "lets make the page feel like both a mobile app with buttons on the
    bottom and a fully functional desltop experience". So the navigation is not one component
    made responsive — it is two, each native to its context, and only one is ever mounted:
      desktop  a persistent left rail carrying every section, always visible while reading
      phone    a fixed bottom tab bar with five destinations, thumb-height, safe-area inset
    Both are driven by the same scrollspy, so the bar always answers "where am I".            */
 /* Single column. The 212px contents rail listed the same four destinations as the header
    and the tab bar, and reserved its column down the whole page to do it. */
 .shell{display:block}
 /* Section links live in the sticky header now. They collapse out on a phone, where the
    bottom tab bar is the navigation and repeating it up here would just crowd the name. */
 .topnav{display:flex;gap:16px;flex:1;min-width:0;overflow:hidden}
 .topnav a{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
   letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);text-decoration:none;
   white-space:nowrap;border-bottom:1px solid transparent;padding-bottom:2px}
 .topnav a:hover{color:var(--tx);border-bottom-color:var(--el)}
 @media(max-width:860px){ .topnav{display:none} }
 .col{min-width:0}
 .contents{border:1px solid var(--e);border-radius:9px;background:var(--s1);
   padding:16px 18px 6px;margin:14px 0 4px;scroll-margin-top:56px}
 .clbl{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.22em;
   text-transform:uppercase;color:var(--tx3);margin-bottom:12px}
 .cgrid{display:grid;grid-template-columns:1fr;gap:0}
 .cgrid a.on{color:var(--tx)}
 .cgrid a.on::before{color:var(--lit)}

 /* ── the phone shell ─────────────────────────────────────────────────────────── */
 .tabbar{display:none}
 @media(max-width:860px){
   .shell{grid-template-columns:1fr;gap:0}
   .rail{display:none}                       /* the rail's job is done by the tab bar */
   .wrap{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
   /* top:auto is load-bearing. The generic `nav{position:sticky;top:0}` rule above also
      matches this element, and on a FIXED box with both top and bottom set, top wins — so the
      tab bar pinned itself to the top of the screen while its computed `bottom` read 0px. */
   .tabbar{display:flex;position:fixed;left:0;right:0;top:auto;bottom:0;z-index:40;margin:0;
     background:rgba(16,13,28,.97);backdrop-filter:blur(14px);
     border-top:1px solid var(--el);
     padding:7px 4px calc(7px + env(safe-area-inset-bottom,0px))}
   .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
     text-decoration:none;color:var(--tx3);font-family:'JetBrains Mono',ui-monospace,monospace;
     font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 2px;
     border-radius:8px;-webkit-tap-highlight-color:transparent}
   .tabbar a .ti{font-size:13px;line-height:1;opacity:.55}
   .tabbar a.on{color:var(--tx)}
   .tabbar a.on .ti{opacity:1;color:var(--lit)}
   .topbar .allbtn{display:none}             /* Expand-all lives in the tab flow on a phone */
 }
 .cgrid a{display:flex;align-items:baseline;gap:8px;font-size:13.5px;color:var(--tx2);
   text-decoration:none;padding:7px 0;border-bottom:1px solid var(--e)}
 .cgrid a:hover{color:var(--tx)}
 .cgrid a::before{content:counter(cidx,decimal-leading-zero);counter-increment:cidx;
   font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;color:var(--el);flex:0 0 auto}
 .cgrid{counter-reset:cidx}
 .idx{position:relative;flex:0 0 auto}
 .idx>summary{list-style:none;cursor:pointer;font-family:'JetBrains Mono',ui-monospace,monospace;
   font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx2);
   padding:5px 0;border-bottom:1px solid var(--el);white-space:nowrap}
 .idx>summary::-webkit-details-marker{display:none}
 .idx>summary::after{content:" BE";color:var(--tx3)}
 .idx[open]>summary::after{content:" B4"}
 .idx[open]>summary{color:var(--tx)}
 .navlinks{position:absolute;top:38px;left:0;z-index:21;display:grid;
   grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:2px 20px;
   background:var(--s2);border:1px solid var(--el);border-radius:8px;padding:14px 16px;
   width:min(78vw,620px);box-shadow:0 18px 44px -18px rgba(0,0,0,.85)}
 .topbar a{flex:0 0 auto;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);
        text-decoration:none;padding:5px 0;white-space:nowrap;border-bottom:1px solid transparent}
 .topbar a:hover{color:var(--tx);border-bottom-color:var(--lit)}
 .kv{display:flex;gap:12px;align-items:flex-start;padding:6px 0;border-bottom:1px dashed var(--e)}
 .kv:last-child{border-bottom:0}
 .kvl{flex:0 0 150px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;
   letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);padding-top:4px}
 /* was max-width:64ch — the operator saw lines breaking early with empty space to the right.
    Prose reads to the panel edge now; only the long RECORD keeps a measure. */
 .kvp{margin:0;color:var(--tx2)} .kvp.small{font-size:13.5px;margin-top:4px}
 .chips{display:flex;flex-wrap:wrap;gap:5px}
 .chip{font-size:12.5px;padding:4px 10px;border-radius:2px;letter-spacing:.02em}
 .top{background:rgba(139,92,246,.55);border:1px solid rgba(185,140,255,.5);color:#fff;font-weight:600}
 .mid{background:rgba(139,92,246,.15);border:1px solid rgba(185,140,255,.25);color:var(--lit)}
 .base{border:1px dashed rgba(171,159,203,.4);color:var(--tx2)}
 .terp{color:var(--teal);background:rgba(111,227,210,.1);border:1px solid rgba(111,227,210,.28)}
 /* a note the breeder stated himself, marked in place rather than in a separate box */
 .chip.byop{border-bottom:2px solid var(--lit)}
 .opnote{margin-top:10px;color:var(--tx3);font-size:13px}
 .land{color:var(--tx2);background:rgba(255,255,255,.04);border:1px solid var(--e)}
 .sib{color:var(--tx2);background:transparent;border:1px solid var(--e)}
 /* Scoped deliberately. The bare component classes in this block (.top/.mid/.sib/.land) are
    the same hazard that let a stale `.gen` rule stretch the hero's F1 chip into an empty box;
    new ones get qualified so they can only ever style a chip. Descendants take the teal — the
    split bar's downstream colour — so lineage reads upstream-purple, downstream-teal. */
 .chip.kid{color:var(--teal);background:rgba(111,227,210,.08);
   border:1px solid rgba(111,227,210,.3)}
 .meter{display:flex;gap:3px} .meter i{width:26px;height:6px;border-radius:3px;background:var(--e)}
 .meter i.on{background:var(--lit)}
 .callout{border:0;border-top:1px solid var(--el);background:transparent;border-radius:0;padding:12px 0 0;margin-top:12px}
 .cotag{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
   color:var(--lit);border:0;padding:0;margin-bottom:8px}
 .callout p{margin:0;color:var(--tx);font-size:15px}
 .quote{border:0;border-top:1px solid var(--e);background:transparent;padding:12px 0 0;font-size:16.5px;color:var(--tx)}
 .prov{margin-top:12px;font-size:12.5px;color:var(--tx3);border-top:1px solid var(--e);padding-top:8px}
 .prov em{font-style:normal;opacity:.8}
 /* The chart scales to its column rather than overflowing it. `width:100%` against the
    viewBox does the scaling; `max-width` stops it inflating past its natural size on a wide
    screen, where a blown-up diagram would look crude. `--pedw` carries the natural width from
    the generator so this rule needs no per-strain CSS. */
 /* The live tree occupies the panel once it has actually drawn; until then it is zero
    height and the static SVG below carries the section. */
 .livetree{display:none}
 .livetree.on{display:block;position:relative;
   border:1px solid var(--e);border-radius:4px;background:var(--s2);overflow:hidden}
 .pedwrap[hidden]{display:none}
 .pedwrap{overflow-x:auto;padding:2px 0 6px}
 .ped{display:block;width:100%;height:auto;max-width:var(--pedw,100%)}
 /* Sized in viewBox units, not screen pixels: at a 430px viewport the chart scales to about
    0.6, so 11.5px rendered at ~7px and the names were unreadable. */
 .ped .pn{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:17px;fill:var(--tx2);
   letter-spacing:.02em;dominant-baseline:middle}
 .ped .pn.me{fill:var(--tx);font-weight:600}
 .ped .pe{fill:none;stroke:var(--el);stroke-width:1}
 /* DEAD CSS REMOVED, and it was not harmless. `.ribbon`/`.gen`/`.arrow` styled the old text
    ancestry ribbon that the SVG pedigree chart replaced; the markup went, the rules stayed.
    Because `.gen` is a bare class rather than a scoped one, it kept matching the F1
    generation chip in the hero and forced `min-width:148px` and card padding onto it — a
    small chip rendered as a stretched empty box. Verified 0 markup uses of ribbon/arrow/
    who/kids/gen-card before deleting. Same failure as the `nav{top:0}` leak earlier: a
    generic selector owning a name that a component also wants. */
 /* ── SPECIFICATION TABLE ───────────────────────────────────────────────────────────
    The registry surface. Row labels are a fixed column so values line up and a grower can
    scan down them; digits are tabular so figures compare vertically. Rules are horizontal
    only — vertical rules between two columns are what made the earlier four-cell strip read
    as a spreadsheet, and here there genuinely ARE rows to compare, so the horizontal ones
    carry information. */
 .tablewrap{overflow-x:auto}
 table.spec{width:100%;border-collapse:collapse;font-size:13.5px;
   font-variant-numeric:tabular-nums}
 table.spec th, table.spec td{text-align:left;vertical-align:top;padding:7px 10px 7px 0;
   border-bottom:1px solid var(--e)}
 table.spec tr:last-child th, table.spec tr:last-child td{border-bottom:0}
 table.spec th{width:38%;max-width:190px;font-weight:400;color:var(--tx3);
   font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding-top:9px}
 table.spec td{color:var(--tx);line-height:1.5}
 table.spec td .chip{margin:0 5px 4px 0;display:inline-block}
 @media(max-width:430px){ table.spec th{width:44%} }
 .subhead{margin:16px 0 7px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);padding-top:12px;border-top:1px solid var(--e)}
 .prose p{margin:0 0 13px;max-width:78ch;color:var(--tx2);font-size:16px;line-height:1.7}
 .foot{font-size:13px;color:var(--tx3);text-align:center;margin-top:26px}
 @media(max-width:860px){ .hero{grid-template-columns:1fr;gap:14px} }
 /* The stat strip stays FOUR across at every width. Dropping to 2x2 turned a tidy card strip
    into a lumpy block of stacked pairs — operator 2026-08-25: "56% INDICA 9-11 FLOWER 14 GEN 10
    LANDRACE looks ugly". The values are 2-4 characters; four fit 390px with room, and the card
    itself never stacked them. */
 @media(max-width:700px){h1{font-size:22px}
   .stats b{font-size:16px} .stats span{font-size:11px;letter-spacing:.05em}
   .stats div{padding:8px 2px}
   .kv{flex-direction:column;gap:5px} .kvl{flex-basis:auto}}