/* ============================================================================
   MycoWorld · FIELD GUIDE skin (2026-10-23)
   Loaded after storm.css / circle.css / stalk.css. The site is pinned to the light theme and
   this sheet re-tokens it to cream paper, then restyles the shared shell (header, footer,
   buttons, cards) and adds the Field Guide homepage pieces (fg-*). The hero keeps the storm
   eyepiece exactly as it shipped: nothing here touches .hero's own look.
   ========================================================================== */
html[data-theme=light]{
  --base:#F6F1E8; --base-2:#EEE7DA; --card:#FFFFFF; --card-2:#FBF8F2; --well:#F1EBE0; --field:#FFFFFF; --ph:#8F86A3;
  --bg:#F6F1E8; --bg-2:#EEE7DA;
  --ink:#17131F; --ink-2:#443C52; --ink-mut:#7D7489; --ink-soft:#AFA7BD; --ink-on:#FFFFFF;
  --line:rgba(23,19,31,.12); --line-2:rgba(23,19,31,.18); --line-3:rgba(23,19,31,.30);
  --teal:#6D3DD8; --teal-2:#4C1A8F; --teal-fill:#22E0C8; --violet:#8224E3; --purple:#6D3DD8; --violet-lt:#6D3DD8; --cyan:#0D6B61; --moss:#6D3DD8; --pine:#6D3DD8;
  --gold:#8A5B00; --gold-fill:#F3DFAE; --ok:#2F7A2A; --bad:#C2412D;
  --grad:linear-gradient(120deg,#8224E3,#4C1A8F); --grad-2:linear-gradient(120deg,#8224E3,#4C1A8F); --grad-blue:linear-gradient(120deg,#8224E3,#4C1A8F); --grad-soft:linear-gradient(120deg,rgba(130,36,227,.10),rgba(76,26,143,.06));
  --shadow-xs:0 1px 2px rgba(23,19,31,.05); --shadow:0 1px 2px rgba(23,19,31,.04),0 10px 28px rgba(23,19,31,.06); --shadow-md:0 14px 36px rgba(23,19,31,.10); --shadow-lg:0 26px 70px rgba(23,19,31,.16);
  --shadow-brand:0 10px 30px rgba(130,36,227,.16); --shadow-brand-lg:0 16px 44px rgba(130,36,227,.22); --glow:none; --ring:0 0 0 3px rgba(130,36,227,.18);
  --rule:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='8' viewBox='0 0 52 8'%3E%3Cpath d='M0 4h26' stroke='%238224E3' stroke-width='2'/%3E%3C/svg%3E");
  --ticks:none; --rule-strong:#17131F; --scroll-thumb:#C9BFD9;
  --r:14px; --r-sm:10px; --r-lg:20px; --r-xl:26px;
  --lav:#E6DCF8; --lav-2:#CDBDF0; --mint:#D9F1EA; --amber:#F3DFAE; --amber-ink:#6B4A08; --sage:#DCE7D2; --sage-ink:#2F5A2A; --teal-bg:#D6EEF0; --teal-ink:#0D6B61; --realm:#1C0F3A; --realm-2:#2A1455; --cy:#22E0C8;
}
html[data-theme=light] body::before,html[data-theme=light] body::after{display:none}
html[data-theme=light] body{background:var(--base)}
html[data-theme=light] ::selection{background:rgba(130,36,227,.18)}
/* display type: Field Guide uses wide uppercase Archivo for section titles and page heads;
   the hero h1 keeps the storm setting (it is a dark-band child and matched nowhere below) */
.sec-head h2,.pagehead h1,.fg-h2,.fg-h1{text-transform:uppercase;letter-spacing:-.035em;line-height:.94;font-weight:900;font-stretch:100%}
.sec-head h2 .g,.pagehead h1 .g{color:var(--violet)}
.sec-head{border-bottom:0;padding-bottom:0;margin-bottom:30px}
.sec-head .eyebrow::before{width:22px;height:2px;background:currentColor}
.eyebrow{color:var(--violet);letter-spacing:.16em;font-weight:600}
.eyebrow::before{width:22px;height:2px;background:currentColor;opacity:1}
.sec{padding:84px 0 0}
@media(max-width:760px){.sec{padding-top:58px}}
.wrap{max-width:1240px}

/* ---------- buttons: pills, no hard shadow (the storm look stays inside .hero) ---------- */
.btn{background:var(--ink);color:#fff;border:2px solid transparent;border-radius:999px;box-shadow:none;font-family:var(--sans);font-size:14.5px;font-weight:700;letter-spacing:0;text-transform:none;padding:13px 22px;transition:transform .15s var(--ease),background .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(23,19,31,.16);background:#000}
.btn:active{transform:none;box-shadow:none}
.btn.lg{padding:16px 28px;font-size:15.5px}.btn.sm{padding:9px 15px;font-size:13px;box-shadow:none}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line-2);box-shadow:none}
.btn.ghost:hover{border-color:var(--ink);color:var(--ink);background:#fff;transform:translateY(-1px)}
.btn.gold{background:var(--cy);color:var(--ink);box-shadow:none}.btn.gold:hover{background:#4CF0DC;box-shadow:0 8px 22px rgba(34,224,200,.3)}
.btn.sm.ghost{box-shadow:none}
.btn-dark{background:var(--ink);color:#fff;border-color:transparent}
.hero .btn{background:var(--teal-fill);color:#07050E;border:1px solid #07050E;border-radius:4px;box-shadow:4px 4px 0 #B98BFF;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.hero .btn.lg{padding:16px 28px;font-size:13px}
.hero .btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #B98BFF;background:#4CF0DC}
.hero .btn.ghost{background:transparent;color:#F4EFFF;border:1px solid rgba(185,139,255,.4);box-shadow:none}
.hero .btn.ghost:hover{border-color:#22E0C8;color:#22E0C8;background:rgba(34,224,200,.06);transform:none;box-shadow:none}

/* ---------- header ---------- */
#mr-header,.hd{--base:#F6F1E8;--base-2:#EEE7DA;--bg:#F6F1E8;--bg-2:#EEE7DA;--well:#F1EBE0;--card:#fff;--ink:#17131F;--ink-2:#443C52;--ink-mut:#7D7489;--line:rgba(23,19,31,.12);--line-2:rgba(23,19,31,.18);--line-3:rgba(23,19,31,.3);--teal:#6D3DD8;color:var(--ink);color-scheme:light}
.hd{background:rgba(246,241,232,.92);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.hd.scrolled{box-shadow:0 10px 30px rgba(23,19,31,.08)}
.fg-strip{background:#1C0F3A;color:#E8DFFA;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.fg-strip .in{max-width:1240px;margin:0 auto;display:flex;justify-content:center;gap:26px;padding:7px 24px}
.fg-strip span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.fg-strip i{width:6px;height:6px;border-radius:50%;background:#22E0C8;flex:none}
.fg-bar .in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:10px 24px}
.fg-brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;flex:none}
.fg-brand .m{width:46px;height:46px;border-radius:14px;background:#1C0F3A;display:grid;place-items:center;padding:5px;flex:none}
.fg-brand .m img{width:100%;height:100%;object-fit:contain}
.fg-brand b{display:block;font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:.02em;line-height:1;color:var(--ink)}
.fg-brand small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-mut);margin-top:4px}
.fg-nav{display:flex;gap:2px;flex-wrap:nowrap}
.fg-nav a{font-weight:600;font-size:14px;color:var(--ink-2);padding:9px 12px;border-radius:999px;white-space:nowrap;text-decoration:none}
.fg-nav a:hover,.fg-nav a.on{background:var(--base-2);color:var(--ink)}
.fg-sp{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.fg-pill{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;font-weight:700;font-size:13.5px;color:var(--ink);cursor:pointer;text-decoration:none;position:relative;font-family:var(--sans);line-height:1}
.fg-pill:hover{border-color:var(--ink)}
.fg-pill.ic{width:42px;padding:0;justify-content:center}
.fg-pill.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.fg-pill .flg{width:22px;height:15px;border-radius:2px;display:block;box-shadow:0 0 0 1px var(--line)}
.fg-pill .mri{width:17px;height:17px}
.fg-pill .cur{font-family:var(--mono);font-size:10.5px;color:var(--ink-mut);letter-spacing:.06em;font-weight:500}
.fg-pill.dark .cart-c{position:static;background:#22E0C8;color:#17131F;min-width:20px;height:20px;border-radius:10px;display:none;place-items:center;font:800 11px var(--mono);padding:0 6px;margin-left:2px}
.fg-pill.dark .cart-c.show{display:grid}
.fg-pill.acct .ini{width:24px;height:24px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}
.burger{display:none}
.mobnav{background:#F6F1E8;border-left:1px solid var(--line);color:var(--ink);--ink:#17131F;--ink-2:#443C52;--teal:#6D3DD8;--line:rgba(23,19,31,.12);--line-2:rgba(23,19,31,.18)}
.mobnav a{font-family:var(--display);font-size:22px;letter-spacing:-.02em;text-transform:uppercase;font-weight:900;color:var(--ink);padding:14px 0;border-bottom:1px solid var(--line)}
.mobnav a:hover{color:var(--violet)}
.scrim{background:rgba(23,19,31,.4)}
@media(max-width:1180px){.fg-nav a{padding:9px 9px;font-size:13px}.fg-pill.s{display:none}}
@media(max-width:960px){
  .fg-nav{display:none}.burger{display:inline-flex}.fg-pill.s,.fg-pill.acct{display:none}
  .fg-bar .in{padding:9px 14px;gap:10px}.fg-brand .m{width:40px;height:40px}.fg-brand b{font-size:14px}.fg-brand small{font-size:8px;letter-spacing:.22em}
  .fg-pill{height:40px;padding:0 11px;font-size:13px}.fg-pill .cur{display:none}
  .fg-strip .in{gap:16px;overflow:hidden;white-space:nowrap;justify-content:flex-start;padding:7px 14px}.fg-strip span:nth-child(2){display:none}
}
@media(max-width:380px){.fg-brand small{display:none}}

/* ---------- product cards: keep the live porthole thumbnail, new body ---------- */
.pgrid{gap:30px 22px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:18px 14px 16px;box-shadow:var(--shadow);transition:transform .3s var(--ease-out),box-shadow .3s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.pcard .imw{margin:0 6px}
.pcard .im{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 0 7px #fff,0 0 0 8px var(--line-2)}
.pcard:hover .im{box-shadow:0 0 0 1px #22E0C8,0 0 0 7px #fff,0 0 0 8px rgba(130,36,227,.45),var(--shadow-md)}
.pcard:hover .imw{transform:none}
.pcard .tag{background:#22E0C8;color:#17131F;border-color:transparent;border-radius:999px;letter-spacing:.12em}
.pcard .tag.iso{background:var(--violet);color:#fff}
.pcard .out{background:#fff;color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px}
.qadd{background:#22E0C8;border-color:transparent;box-shadow:0 6px 16px rgba(23,19,31,.25);color:#17131F}
.pcard .bd{padding:14px 2px 0;text-align:left;align-items:stretch}
.pcard .cat-l{color:var(--ink-mut);letter-spacing:.14em;font-size:10px}
.pcard h3{font-size:1.04rem;line-height:1.2;margin-top:6px;letter-spacing:-.02em}
.pcard h3 a:hover{color:var(--violet)}
.pcard .row{justify-content:space-between;margin-top:12px;gap:10px;align-items:center}
.pcard .pr{font-family:var(--display);font-weight:900;font-size:1.35rem;letter-spacing:-.03em;color:var(--ink)}
.pcard .pr s,.pcard .pr .was{font-family:var(--mono);font-size:11.5px;color:var(--ink-mut);font-weight:500;margin-right:6px;text-decoration:line-through}
.pcard .pr small,.pcard .pr span{font-family:var(--mono);font-size:10px;color:var(--ink-mut);letter-spacing:.06em}
.fg-add{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;background:var(--ink);color:#fff;border:0;font:700 13px var(--sans);cursor:pointer;white-space:nowrap;transition:background .15s,transform .15s}
.fg-add:hover{background:#000;transform:translateY(-1px)}
.fg-add .mri{width:14px;height:14px}
.fg-add.off{background:var(--base-2);color:var(--ink-mut);cursor:default}
.pcard .row .btn.sm.ghost{display:none}
@media(max-width:600px){
  .pgrid{grid-template-columns:repeat(2,1fr);gap:14px 10px}
  .pcard{padding:12px 10px 12px;border-radius:18px}.pcard .imw{margin:0 2px}
  .pcard .im{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 0 5px #fff,0 0 0 6px var(--line-2)}
  .pcard h3{font-size:.9rem}.pcard .pr{font-size:1.15rem}.pcard .pr s,.pcard .pr .was{display:none}
  .pcard .row{flex-wrap:wrap;gap:8px}.fg-add{height:36px;padding:0 12px;font-size:12.5px;width:100%;justify-content:center}
  .pcard .cat-l{font-size:9px;letter-spacing:.1em}
}

/* ---------- Field Guide homepage pieces ---------- */
.fg-tick{background:var(--base-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:14px 0}
.fg-tick .t{display:flex;gap:34px;white-space:nowrap;font-family:var(--display);font-weight:900;font-size:21px;letter-spacing:-.02em;text-transform:uppercase;width:max-content;animation:fgtk 40s linear infinite;color:var(--ink)}
.fg-tick .t span{display:inline-flex;align-items:center;gap:34px}.fg-tick .t .mri{color:var(--violet);width:18px;height:18px}
@keyframes fgtk{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.fg-tick .t{animation:none}}
.fg-strata{height:20px;background:linear-gradient(180deg,#2A1455 0 25%,#8224E3 25% 45%,#CDBDF0 45% 70%,#22E0C8 70% 100%)}
.fg-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fg-fact{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 22px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow)}
.fg-fact .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;flex:none;padding:8px}
.fg-fact .ic img{width:36px;height:36px;max-width:36px;object-fit:contain;display:block}
.fg-fact b{display:block;font-family:var(--display);font-size:1.5rem;letter-spacing:-.03em;line-height:1;font-weight:900}
.fg-fact small{display:block;font-size:13px;color:var(--ink-2);margin-top:4px;line-height:1.35}
/* search (from Lab Bench) */
.fg-search{background:#fff;border:1px solid var(--line);border-radius:26px;padding:26px 26px 22px;box-shadow:var(--shadow)}
.fg-search .k{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mut);font-weight:600;margin-bottom:12px}
.fg-search form{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line-2);border-radius:999px;padding:0 8px 0 18px;height:58px}
.fg-search form:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(130,36,227,.14)}
.fg-search form .mri{color:var(--ink-mut);flex:none}
.fg-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 16px var(--sans);color:var(--ink)}
.fg-search input::placeholder{color:var(--ph)}
.fg-search button[type=submit]{background:var(--violet);color:#fff;border:0;border-radius:999px;height:42px;padding:0 20px;font:700 14px var(--sans);cursor:pointer;flex:none}
.fg-search button[type=submit]:hover{background:#6D1EC2}
.fg-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fg-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;background:#fff;border:1.5px solid var(--line-2);font-weight:600;font-size:13.5px;color:var(--ink);text-decoration:none}
.fg-chip:hover{border-color:var(--ink)}
.fg-chip.on{background:var(--violet);border-color:var(--violet);color:#fff}
.fg-chip em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-mut)}.fg-chip.on em{color:#E9E2F8}
/* shelves */
.fg-shelves{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fg-shelf{position:relative;border-radius:28px;padding:24px 22px 20px;min-height:250px;display:flex;flex-direction:column;border:1.5px solid var(--line);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .3s var(--ease-out),box-shadow .3s}
.fg-shelf:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.fg-shelf .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;max-width:70%}
.fg-shelf h3{font-family:var(--display);font-weight:900;font-size:1.65rem;letter-spacing:-.03em;text-transform:uppercase;line-height:.95;margin:10px 0 8px}
.fg-shelf p{font-size:14px;color:var(--ink-2);line-height:1.55;max-width:20ch}
.fg-shelf .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px;padding-top:16px}
.fg-shelf .go .mri{width:16px;height:16px}
.fg-shelf .count{position:absolute;right:16px;top:16px;background:#fff;border:1.5px solid var(--line);border-radius:999px;font:700 12px var(--mono);padding:6px 10px}
.fg-shelf .art{position:absolute;right:-4px;bottom:-8px;width:96px;height:auto;max-width:96px;opacity:.95;pointer-events:none}
.fg-shelf.c-lav{background:var(--lav)}.fg-shelf.c-amber{background:var(--amber)}.fg-shelf.c-teal{background:var(--teal-bg)}.fg-shelf.c-sage{background:var(--sage)}.fg-shelf.c-mint{background:var(--mint)}.fg-shelf.c-lav2{background:var(--lav-2)}
.fg-shelf.c-lav .k,.fg-shelf.c-lav2 .k{color:var(--violet)}.fg-shelf.c-amber .k{color:var(--amber-ink)}.fg-shelf.c-teal .k,.fg-shelf.c-mint .k{color:var(--teal-ink)}.fg-shelf.c-sage .k{color:var(--sage-ink)}
/* steps */
.fg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fg-st{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}
.fg-st .n{width:44px;height:44px;border-radius:14px;background:#1C0F3A;color:#22E0C8;display:grid;place-items:center;font:800 15px var(--mono);margin-bottom:16px}
.fg-st h4{font-family:var(--display);font-weight:900;font-size:1.2rem;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:6px}
.fg-st p{font-size:14px;color:var(--ink-2);line-height:1.6}
/* crests */
.fg-crests{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fg-cr{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;display:flex;gap:16px;align-items:center;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .25s var(--ease-out)}
.fg-cr:hover{transform:translateY(-3px)}
.fg-cr img{width:64px;height:64px;border-radius:50%;flex:none;object-fit:cover;background:#1C0F3A}
.fg-cr b{display:block;font-family:var(--display);font-weight:900;font-size:1.05rem;text-transform:uppercase;letter-spacing:-.01em}
.fg-cr small{display:block;font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.4}
.fg-cr .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mut);margin-top:5px;display:block}
/* journal strip (existing markup) */
.jstrip{padding-top:84px}
.jstrip a.jsc{border-radius:24px;border-color:var(--line);box-shadow:var(--shadow)}
.jstrip a.jsc:hover{border-color:var(--line-2)}
.jstrip .jsc small{color:var(--violet)}
.jstrip .all .btn{margin-top:10px}
/* compliance + trust */
.fg-comp{margin-top:74px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fg-comp .in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:26px 24px}
.fg-comp .badge{width:64px;height:64px;border-radius:18px;background:#1C0F3A;color:#22E0C8;display:grid;place-items:center}
.fg-comp h5{font-family:var(--display);font-weight:900;font-size:1.1rem;text-transform:uppercase;letter-spacing:-.01em}
.fg-comp p{font-size:13.5px;color:var(--ink-2);line-height:1.6;max-width:90ch;margin-top:4px}
.fg-trust{background:var(--base-2);border-bottom:1px solid var(--line)}
.fg-trust .in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:22px 24px}
.fg-trust div{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;align-items:center}
.fg-trust .mri{grid-row:span 2;color:var(--violet);width:22px;height:22px}
.fg-trust b{font-size:14px;color:var(--ink)}.fg-trust small{font-size:12.5px;color:var(--ink-mut)}
@media(max-width:960px){.fg-facts,.fg-steps,.fg-crests,.fg-shelves{grid-template-columns:1fr 1fr}.fg-trust .in{grid-template-columns:1fr 1fr}.fg-comp .in{grid-template-columns:auto 1fr}.fg-comp .in .btn{grid-column:1/-1;justify-self:start}}
@media(max-width:560px){.fg-facts,.fg-steps,.fg-crests,.fg-shelves{grid-template-columns:1fr}.fg-trust .in{grid-template-columns:1fr}.fg-shelf{min-height:0;padding:20px 18px}.fg-shelf .art{width:84px}.fg-comp .in{grid-template-columns:1fr}.fg-search{padding:18px 16px 16px}.fg-search form{height:50px;padding-left:14px}.fg-search input{font-size:15px}.fg-search button[type=submit]{height:38px;padding:0 14px;font-size:13px}.fg-tick .t{font-size:17px;gap:24px}.fg-tick .t span{gap:24px}}

/* ---------- footer (dark ink, as the Field Guide) ---------- */
#mr-footer,.ft{--base:#17131F;--card:#1F1A2A;--ink:#F3EEFF;--ink-2:#CFC7D9;--ink-mut:#9A9286;--line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.16);--teal:#C9B8FF}
.ft{background:#17131F;border-top:0;margin-top:0;padding:0 0 26px}
.ft::before{display:none}
.ft .in{padding:48px 24px 30px;max-width:1240px;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.ft h4{letter-spacing:.18em;color:#fff}
.ft a{color:#CFC7D9}.ft a:hover{color:#fff;transform:none}
.ft .about{color:#CFC7D9;font-size:13.5px;max-width:34em;line-height:1.65}
.ft .fg-brand b{color:#fff}.ft .fg-brand small{color:#9A9286}.ft .fg-brand .m{background:#2A1455}
.ft-seals{color:#9A9286}.ft-seals .mri{color:#22E0C8}
.ft-legal{padding:22px 24px 0;max-width:1240px}
.ft-pay{color:#CFC7D9}
.ft-comp{border:1px solid rgba(255,255,255,.12);border-radius:16px;color:#9A9286;font-size:12.5px;line-height:1.65}
.ft .bar{max-width:1240px;color:#9A9286;border-top:1px solid rgba(255,255,255,.12);margin-top:22px;padding-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.ft .bar a{color:#CFC7D9}
@media(max-width:860px){.ft .in{grid-template-columns:1fr 1fr}.ft .in>div:first-child{grid-column:1/-1}}

/* ---------- inner pages: soften the storm chrome on paper ---------- */
.crumb{color:var(--ink-mut)}.crumb a:hover{color:var(--violet)}
.pagehead{border-bottom:0;margin-bottom:22px}
.pagehead h1{font-size:clamp(2.2rem,5vw,3.8rem)}
.lib-stats div b,.counters b{color:var(--violet)}
.tape{border-bottom:1px solid var(--line)}.tape .mri{color:var(--violet)}
.searchbar,.sortsel,.facet-toggle,input.input,select.input,textarea.input,.input{border-radius:12px}
.chip{border-radius:999px}
.facets{border-radius:20px}
.band,.about-head,.ct-head,.lin-head{border-radius:var(--r-xl)}
.notice-band{border-radius:var(--r-xl)}
/* the breeders' floating handle sits in the bottom corner instead of over the hero copy */
/* the geneticists menu handle: a solid cyan pill with ink text so it reads on the dark hero and on cream alike */
.stalk-handle{left:auto;right:16px;transform:none;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);height:50px;padding:0 18px 0 8px;gap:10px;
  background:#22E0C8;color:#17131F;border:2px solid #17131F;border-radius:999px;font-family:var(--sans);font-size:14px;font-weight:800;letter-spacing:0;text-transform:none;
  box-shadow:0 6px 0 #17131F,0 16px 34px rgba(23,19,31,.35)}
.stalk-handle:hover{transform:translateY(-2px);border-color:#17131F;box-shadow:0 8px 0 #17131F,0 20px 40px rgba(23,19,31,.4);background:#4CF0DC}
.stalk-handle:active{transform:translateY(3px);box-shadow:0 3px 0 #17131F}
.stalk-handle .sh-ic{width:34px;height:34px;background:#1C0F3A;border:2px solid #17131F}
.stalk-handle .sh-ic img{width:28px;height:28px}
.stalk-handle b{color:#17131F;font-weight:800;letter-spacing:0}
.stalk-handle .k{background:#17131F;color:#22E0C8;border-color:#17131F;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.08em;border-radius:6px}
@media(max-width:760px){.stalk-handle{right:12px;height:46px;font-size:13px;padding:0 14px 0 6px;gap:8px}.stalk-handle .sh-ic{width:30px;height:30px}.stalk-handle .sh-ic img{width:24px;height:24px}}
/* hide the dark/light toggle: the site is light only now */
.themebtn{display:none!important}

/* ---------- iOS Safari: no sideways panning ----------
   Safari ignores an overflow clip set on the viewport (body alone), so content that is wider
   than the screen but clipped by the page (the ticker, the top strip, the off-screen menu drawer)
   still lets the page drift left and right while scrolling. Clipping html AND body at element
   level is what Safari honours; `clip` makes no scroll container, so the window keeps scrolling
   and sticky headers, scroll progress and reveal observers all keep working. */
html{overflow-x:clip}
body{overflow-x:clip}
.mobnav:not(.open){visibility:hidden}
.fg-tick,.fg-strip .in,.hero,.fg-shelf{overflow-x:clip;overflow-y:hidden}
.fg-tick .t{will-change:transform}