/* learn.css (owner: builder C): shared by every learning and story page.
   Plates, prose extras, ingredient portraits and cards, the pack frame, the static graph, and the ingredient atlas.
   Colours come from theme tokens only (product neon arrives as --c from the data).
   Easing: settle (arrivals that brake hard), recede (stepping back), draw (lines drawing out), all from base.css. */

/* ---------------------------------------------------------------- plates (page heroes on a photograph) */
.plate { position: relative; isolation: isolate; display: grid; align-items: end; min-height: clamp(420px, 62vh, 640px); overflow: hidden; border-bottom: 1px solid var(--line); }
.plate-media { position: absolute; inset: 0; z-index: -1; }
.plate-img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; filter: var(--world-filter); }
.plate-media::after { content: ''; position: absolute; inset: 0; background: var(--atmos-hero), linear-gradient(0deg, var(--bg), transparent 34%); }
.plate-in { position: relative; padding-bottom: clamp(48px, 6vw, 84px); }
.plate .crumbs { position: absolute; top: 0; left: var(--gut); }
.plate-copy { max-width: 760px; padding-top: 110px; }
.plate-h { margin-top: 20px; }
.plate-lede { margin-top: 22px; color: var(--text); opacity: .86; max-width: 52ch; }
.plate.is-quiet { min-height: clamp(320px, 44vh, 460px); }
.plate.is-quiet .plate-img { opacity: .8; }

/* prose extras used by writer blocks */
.prose blockquote.pull, blockquote.pull { margin: 1.6em 0; padding: 4px 0 4px 26px; border-left: 1px solid var(--accent); }
.pull p { margin: 0; font: 300 clamp(24px, 2.2vw, 32px)/1.3 var(--display); color: var(--text); }
.pull cite { display: block; margin-top: 12px; font: 500 13px/1 var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.prose .fig, .fig { margin: 2em 0; }
.fig img { width: 100%; height: auto; border-radius: var(--radius); }
.fig figcaption { margin-top: 10px; font-size: 14px; color: var(--text-2); }
.callout { margin: 1.6em 0; padding: 22px 24px; background: var(--bg-2); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--radius); }
.callout-h { margin: 0 0 8px; font: 600 13px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.callout p:last-child { margin-bottom: 0; }
.facts { margin: 1.2em 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 500 13px/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.facts dd { margin: 0; }
.fb-note { margin-top: 10px !important; }
.ichips { display: flex; flex-wrap: wrap; gap: 8px; }

/* owner notes that are whole sentences wrap instead of running off the page */
.owner.owner-long { white-space: normal; line-height: 1.45; max-width: 100%; }
.owner-line { margin: 1em 0 0; }
.owner-word { font-size: .86em; color: var(--text-2); }
html.hide-owner .owner-line:has(.owner:only-child) { display: none; }
.pf-link { display: block; text-decoration: none; }

/* ---------------------------------------------------------------- portraits */
.por { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: radial-gradient(80% 60% at 50% 70%, rgb(var(--key) / .14), transparent 70%), var(--bg-deep); }
.por img { width: 100%; height: 100%; object-fit: cover; }
.por-layer img { object-fit: contain; padding: 16% 12% 10%; filter: drop-shadow(0 18px 18px color-mix(in srgb, var(--bg-deep) 90%, transparent)); }
.por-layer::after { content: ''; position: absolute; inset: auto 0 0; height: 26%; background: linear-gradient(0deg, color-mix(in srgb, var(--bg-3) 90%, transparent), transparent); }
.por-plate img { filter: brightness(.82) saturate(.9); }

/* ---------------------------------------------------------------- the pack frame (product in its world) */
.pf { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--bg-deep); isolation: isolate; container-type: size; }
.pf-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.8) saturate(.95); transition: transform 1.2s var(--settle), filter .6s; }
.pf-key { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(46% 38% at var(--px) calc(var(--py) - 14%), rgb(var(--key) / .22), transparent 70%), linear-gradient(0deg, color-mix(in srgb, var(--bg-deep) 55%, transparent), transparent 30%); }
/* the pack alone in its world: its real height eased (solo), never wider than about half the frame (.pk, packs.mjs) */
.pf-stand { position: absolute; z-index: 2; left: var(--px); top: var(--py); height: min(calc(var(--pk-solo) * 56cqh * var(--pf-k, 1)), calc(46cqw / var(--pk-car))); translate: -50% -100%; transition: translate .8s var(--settle); }
.pf-pack { filter: contrast(1.03); }
a:hover > .pf .pf-bg, a:focus-visible > .pf .pf-bg { transform: scale(1.04); filter: brightness(.9) saturate(1); }
a:hover > .pf .pf-stand { translate: -50% calc(-100% - 4px); }

/* the pack alone on wet stone */
.ps { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.ps-pk { z-index: 2; height: calc(var(--pk-solo) * 76%); }
.ps-glow { position: absolute; z-index: 1; left: 50%; bottom: 4%; width: 90%; height: 60%; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(var(--key) / .16), transparent 72%); }

/* compact product card */
.prow { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; margin: 1.6em 0; }
.pm { display: flex; flex-direction: column; }
.pm-media { display: block; border: 1px solid var(--line); text-decoration: none; }
.pm-cap { padding-top: 14px; }
.pm-type { margin: 0; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c, var(--text-2)); }
.pm-name { margin: 8px 0 0; font: 400 24px/1.1 var(--display); }
.pm-name a { text-decoration: none; }
.pm-sub { margin: 4px 0 0; font-size: 14.5px; color: var(--text-2); }
.pm-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pm-add { margin-left: auto; }

/* ---------------------------------------------------------------- ingredient cards */
.icard { position: relative; display: block; overflow: hidden; text-decoration: none; color: var(--text); background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .4s; }
.icard .por { transition: transform 1.1s var(--settle); }
.icard .por img { transition: transform 1.1s var(--settle), filter .5s; }
.icard:hover, .icard:focus-visible { border-color: var(--line-2); }
.icard:hover .por img, .icard:focus-visible .por img { transform: scale(1.045); }
.icard::before { content: ''; position: absolute; inset: 0 0 auto; height: 46%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 82%, transparent), transparent); }
/* round 7 (WCAG 1.4.3): the names sit on a backing that grows with them, at least 85% ink under every line, so a pale photo
   (tremella, oyster, cinnamon) can't wash them out on a narrow card; it fades out below the last line */
.icard-txt { --tp: 22px; position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 16px var(--tp);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 90%, transparent), color-mix(in srgb, var(--bg-deep) 85%, transparent) calc(100% - var(--tp)), transparent); }
.icard-name { font: 400 clamp(19px, 1.45vw, 22px)/1.12 var(--display); letter-spacing: -.005em; overflow-wrap: anywhere; }
.icard-inci { font-size: 11.5px; line-height: 1.35; color: var(--text-2); overflow-wrap: anywhere; }
.icard-foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; padding: 30px 16px 14px; background: linear-gradient(0deg, color-mix(in srgb, var(--bg-deep) 88%, transparent), transparent); }
.icard-dots { display: flex; gap: 6px; }
.icard-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent); }
.icard-line { font-size: 13.5px; line-height: 1.45; color: var(--text); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--settle), opacity .4s; }
.icard:hover .icard-line, .icard:focus-visible .icard-line { max-height: 6em; opacity: .92; }
.icard.is-compact .icard-txt { --tp: 18px; padding: 12px 12px var(--tp); }
.icard.is-compact .icard-name { font-size: 17px; }
.icard.is-compact .icard-inci { display: none; }
.icard.is-compact .icard-foot { padding: 20px 12px 10px; }

/* ---------------------------------------------------------------- static graph (MHGraph fallback) */
.sg { position: relative; width: 100%; aspect-ratio: 16 / 11; }
.sg-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sg-lines line { stroke: color-mix(in srgb, var(--c) 70%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.js .sg-lines line { stroke-dasharray: 600; stroke-dashoffset: 600; animation: sg-draw 1.1s var(--draw) .15s forwards; }
@keyframes sg-draw { to { stroke-dashoffset: 0; } }
.sg-center { position: absolute; left: 50%; top: 50%; z-index: 2; width: 24%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 10px; text-align: center; }
.sg-center .por { width: 100%; border-radius: 50%; aspect-ratio: 1; box-shadow: 0 0 0 1px var(--line-2), 0 0 0 10px color-mix(in srgb, var(--bg) 80%, transparent), 0 0 60px rgb(var(--key) / .22); }
.sg-c-txt { display: grid; gap: 4px; }
.sg-c-txt b { font: 400 20px/1.15 var(--display); }
.sg-c-txt small { font-size: 11.5px; color: var(--text-2); }
.sg-node { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; transform: translate(-50%, -50%); text-decoration: none; padding: 8px 14px 8px 8px; background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); border-radius: var(--radius); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .3s, transform .5s var(--settle); }
.sg-node:hover { border-color: var(--c); transform: translate(-50%, -52%); }
.sg-n-img { display: grid; place-items: center; width: 40px; height: 52px; }
.sg-n-img img { max-height: 52px; width: auto; filter: drop-shadow(0 3px 4px rgb(var(--shade) / .55)); }
.sg-n-txt { display: grid; gap: 3px; white-space: nowrap; }
.sg-n-txt b { font: 400 17px/1.1 var(--display); }
.sg-n-txt small { font: 400 12px/1 var(--mono); color: var(--text-2); }
.sg-node.is-hero { box-shadow: 0 0 0 1px var(--c), 0 0 22px color-mix(in srgb, var(--c) 30%, transparent); }
.js .sg-node { animation: sg-in .9s var(--settle) both; }
.js .sg-node:nth-of-type(2) { animation-delay: .06s; } .js .sg-node:nth-of-type(3) { animation-delay: .12s; } .js .sg-node:nth-of-type(4) { animation-delay: .18s; } .js .sg-node:nth-of-type(5) { animation-delay: .24s; }
@keyframes sg-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.85); } }
@media (prefers-reduced-motion: reduce) { .js .sg-lines line { animation: none; stroke-dashoffset: 0; } .js .sg-node { animation: none; } }

/* ================================================================ the atlas */
.atlas-hero { position: relative; isolation: isolate; display: grid; grid-template-rows: 1fr auto; min-height: clamp(620px, 88vh, 860px); overflow: hidden; }
.ah-media { position: absolute; inset: 0; z-index: -1; }
.ah-img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; filter: var(--world-filter) brightness(.86); }
.ah-media::after { content: ''; position: absolute; inset: 0; background: var(--atmos-hero), linear-gradient(0deg, var(--bg) 2%, transparent 40%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 60%, transparent), transparent 22%); }
.ah-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; padding-top: 20px; padding-bottom: 40px; }
.ah-in > nav { position: absolute; top: 0; left: var(--gut); }
.ah-copy { max-width: 780px; padding-top: 120px; }
.ah-title { margin: 0; font: 300 clamp(48px, 6.1vw, 100px)/.95 var(--display); letter-spacing: -.028em; }   /* "named and explained." holds one line under "Every ingredient," */
.ah-lede { margin-top: 26px; max-width: 50ch; color: var(--text); text-shadow: 0 0 2px rgb(var(--bg-rgb) / .9), 0 0 16px rgb(var(--bg-rgb) / .9); }
.ah-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.ah-stats { display: grid; grid-template-columns: repeat(2, minmax(118px, auto)); margin: 0; border-top: 1px solid var(--line-2); }
.ah-stats div { padding: 16px 24px 14px 0; border-bottom: 1px solid var(--line); }
.ah-stats div:nth-child(odd) { border-right: 1px solid var(--line); margin-right: 24px; }
.ah-stats dt { font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.ah-stats dd { margin: 10px 0 0; font-size: 34px; line-height: 1; color: var(--text); }
.ah-fams { display: flex; flex-wrap: wrap; gap: 6px 26px; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid var(--line); }
.ah-fams a { font: 500 13.5px/1.6 var(--sans); letter-spacing: .06em; text-decoration: none; color: var(--text); text-shadow: 0 0 2px rgb(var(--bg-rgb) / .9), 0 0 12px rgb(var(--bg-rgb) / .9); transition: color .3s; }
.ah-fams a:hover { color: var(--accent); }
.ah-fams small { color: var(--text-2); margin-left: 4px; }

/* the standard */
.std { padding: clamp(70px, 8vw, 110px) 0; background-color: var(--bg-2); background-image: var(--atmos-band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.std-in { display: block; }
.std-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 18px 60px; align-items: end; padding-bottom: 30px; margin-bottom: 8px; }
.std-head .eyebrow { grid-column: 1; }
.std-head .h2 { grid-column: 1; margin: 0; }
.std-intro { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; font-size: 17px; line-height: 1.65; color: var(--text); opacity: .86; }
.std-more { grid-column: 2; justify-self: start; }
.std-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 30px; }
.std-list li { display: flex; flex-direction: column; padding: 22px 0 26px; border-top: 1px solid var(--line-2); }
.std-list h3 { margin: 0 0 8px; font: 400 21px/1.2 var(--display); }
.std-list p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.6; }
.std-proof { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-top: auto !important; padding-top: 16px; }
.std-th { display: block; width: 38px; height: 38px; margin-right: -9px; overflow: hidden; border-radius: 50%; border: 2px solid var(--bg-2); background: var(--bg-deep); transition: transform .35s var(--settle); }
.std-th img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 82%; transform: scale(1.5); transform-origin: 50% 80%; }
.std-th:hover, .std-th:focus-visible { transform: translateY(-3px); position: relative; z-index: 2; }
.std-proof span { flex-basis: 100%; margin-top: 8px; font-size: 13px; color: var(--text-2); }
.std-honest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 20px 60px; margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--line); }
.std-honest .h3 { font-weight: 300; font-size: clamp(26px, 2.2vw, 32px); }
.std-honest-body { columns: 2 300px; column-gap: 40px; }
.std-honest-body p { margin: 0 0 1em; break-inside: avoid; font-size: 15px; line-height: 1.65; color: var(--text-2); }
.std-honest-body p:first-child { color: var(--text); }

/* the chart */
.chart-sec { padding-top: clamp(64px, 6.5vw, 96px); }
.ch-tools { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr) auto auto; align-items: center; gap: 14px 22px; margin-bottom: 18px; }
.ch-tools .ch-fams { grid-column: 1 / -1; grid-row: 2; }
.ch-tools .ch-fn { grid-column: 3; }
.ch-tools .ch-count { grid-column: 4; }
.ch-search { position: relative; }
.ch-search svg { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); fill: none; stroke: var(--text-2); stroke-width: 1.5; }
.ch-search input { width: 100%; height: 46px; padding: 0 14px 0 42px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 2px; font-size: 15.5px; }
.ch-search input:focus { outline: none; border-color: var(--accent); }
.ch-search input::placeholder { color: var(--text-3); }
.ch-fams { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-fams .chip { height: 34px; padding: 0 12px; font-size: 13.5px; }
.ch-fn { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.ch-fn select { height: 38px; padding: 0 30px 0 12px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 2px; color: var(--text); font-size: 14.5px; }
.ch-count { margin: 0 0 0 auto; font-size: 13px; color: var(--text-2); }
.ch-wrap { position: relative; }
.ch { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.ch col { width: auto; }
.ch thead th { position: sticky; top: 61px; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line-2); vertical-align: bottom; text-align: left; font-weight: 500; }
.ch-h-name { width: 25%; padding: 0 16px 14px 0; font: 500 13px/1.2 var(--sans) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.ch-h-name small { display: block; margin-top: 6px; font: 400 12px/1 var(--sans); letter-spacing: .04em; text-transform: none; color: var(--text-3); }
.ch-h-note { padding: 0 20px 14px 0; font: 500 13px/1.2 var(--sans) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.ch-h-p { width: calc(42% / var(--cols)); padding: 0; }
.ch-h-go { width: 46px; }
.ch-pbtn { display: grid; justify-items: center; align-content: end; gap: 6px; width: 100%; padding: 14px 2px 12px; border-left: 1px solid var(--line); color: var(--text-2); transition: color .3s, background .3s; position: relative; }
.ch-pbtn::after { content: ''; position: absolute; left: 16%; right: 16%; bottom: -1px; height: 2px; background: var(--c); box-shadow: 0 0 10px var(--c); transform: scaleX(0); transition: transform .4s var(--settle); }
.ch-pimg { display: grid; place-items: end center; height: 60px; transition: transform .5s var(--settle); }
.ch-pimg img { max-height: 60px; width: auto; max-width: 54px; object-fit: contain; filter: drop-shadow(0 3px 4px rgb(var(--shade) / .55)); transition: filter .4s; }
.ch-pname { font: 500 12.5px/1.2 var(--sans); text-align: center; }
.ch-pbtn small { font-size: 11px; color: var(--text-3); }
.ch-pbtn:hover, .ch-pbtn:focus-visible, .ch-h-p.is-lit .ch-pbtn { color: var(--text); background: color-mix(in srgb, var(--c) 7%, transparent); }
.ch-pbtn:hover::after, .ch-pbtn:focus-visible::after, .ch-h-p.is-lit .ch-pbtn::after { transform: scaleX(1); }
.ch-pbtn:hover .ch-pimg, .ch-h-p.is-lit .ch-pimg { transform: translateY(-4px); }
.ch-pbtn:hover .ch-pimg img, .ch-h-p.is-lit .ch-pimg img { filter: drop-shadow(0 7px 6px rgb(var(--shade) / .6)) brightness(1.06); }
.ch-fam th { padding: 34px 0 12px; text-align: left; border-bottom: 1px solid var(--line); }
.ch-fam-in { display: flex; align-items: baseline; gap: 16px; }
.ch-fam-name { font: 300 28px/1.1 var(--display); color: var(--text); }
.ch-fam-blurb { font-size: 15px; font-weight: 400; color: var(--text-2); }
.ch-fam-n { margin-left: auto; font-size: 13px; color: var(--text-3); font-weight: 400; }
.ch-r th, .ch-r td { border-bottom: 1px solid var(--line); vertical-align: middle; transition: background .25s; }
.ch-r { cursor: pointer; }
.ch-r:hover th, .ch-r:hover td, .ch-r.is-on th, .ch-r.is-on td { background: rgb(var(--key) / .05); }
.ch-name { padding: 8px 16px 8px 0; text-align: left; font-weight: 400; }
.ch-name { display: table-cell; }
.ch-name > * { vertical-align: middle; }
.ch-thumb { display: inline-block; width: 40px; height: 50px; margin-right: 14px; overflow: hidden; border-radius: 2px; background: var(--bg-deep); }
.ch-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ch-nm { display: inline-grid; gap: 4px; width: calc(100% - 58px); }
.ch-nm a { font: 400 18px/1.2 var(--display); text-decoration: none; }
.ch-nm a:hover { color: var(--accent); }
.ch-nm small { font-size: 11.5px; line-height: 1.3; color: var(--text-2); overflow-wrap: anywhere; }
.ch-note { padding: 10px 22px 10px 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.ch-c { text-align: center; border-left: 1px solid color-mix(in srgb, var(--line) 45%, transparent); }
.ch-c .dot { display: inline-block; vertical-align: middle; }
.dot { width: var(--s, 11px); height: var(--s, 11px); border-radius: 50%; background: var(--c, var(--text-2)); box-shadow: 0 0 10px color-mix(in srgb, var(--c, var(--text-2)) 55%, transparent); transition: transform .35s var(--settle), opacity .3s; }
.dot.is-hero { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--c, var(--text-2)), 0 0 16px color-mix(in srgb, var(--c, var(--text-2)) 50%, transparent); }
.ch.hl-col .ch-c:not(.is-hl) .dot { opacity: .18; }
.ch.hl-col .ch-c.is-hl { background: color-mix(in srgb, var(--c-hl, var(--accent)) 5%, transparent); }
.ch-r:hover .dot { transform: scale(1.18); }
.ch-go { text-align: right; }
.ch-graph { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 2px; color: var(--text-2); transition: color .3s, border-color .3s; }
.ch-graph svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.ch-graph circle { fill: currentColor; stroke: none; }
.ch-r:hover .ch-graph, .ch-graph:focus-visible { color: var(--text); border-color: var(--line-2); }
.ch-sum .ch-nm a { font-size: 20px; }
.ch-open { margin-left: 6px; font-size: 14px; }
.ch-mush-rows[data-collapsed] { display: none; }
.ch-r[hidden], .ch-g[hidden] { display: none; }
.ch-empty { padding: 30px 0; color: var(--text-2); }
.ch-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 20px; font-size: 14px; color: var(--text-2); }
.ch-legend span { display: inline-flex; align-items: center; gap: 10px; }
.ch-legend .dot { --c: var(--text-2); box-shadow: none; }
.ch-legend .dot.is-hero { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--text-2); }
.ch-legend-note { color: var(--text-3); }

/* the field guide */
.fg { padding-top: clamp(90px, 10vw, 150px); }
.fg-nav { position: sticky; top: 61px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 12px 0; margin-bottom: 8px; background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.fg-sort { display: flex; gap: 6px; }
.fg-sort .chip { height: 34px; padding: 0 12px; font-size: 13.5px; }
.fg-az { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.fg-az a, .fg-az span { display: inline-grid; place-items: center; min-width: 28px; height: 32px; font: 400 14px/1 var(--mono); text-decoration: none; border-radius: 2px; }
.fg-az a { color: var(--text); }
.fg-az a:hover, .fg-az a.is-on { background: var(--text); color: var(--bg); }
.fg-az span { color: var(--text-3); opacity: .5; }
.fg-g { padding-top: 46px; scroll-margin-top: 130px; }
.fg-gh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 20px; }
.fg-gh p { margin: 0; color: var(--text-2); font-size: 15.5px; }
.fg-gh .arrow-link { margin-left: auto; }
.fg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px; }
.fg-mush .fg-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.fg-az-list .fg-letter { padding-top: 40px; scroll-margin-top: 130px; }
.fg-letter h3 { margin: 0 0 18px; font: 300 44px/1 var(--display); color: var(--text); }
.fg.is-az .fg-groups { display: none; }
.js .fg:not(.is-az) .fg-az-list { display: none; }
.no-js .fg-az-list { margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--line); }

/* mushroom band */
.mband { margin-top: clamp(90px, 10vw, 150px); padding: clamp(60px, 7vw, 100px) 0; background-color: var(--bg-2); background-image: var(--atmos-band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mband-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.mband .h2 { margin-top: 20px; }
.mband .lede { margin: 20px 0 30px; }
.mband-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mband-tile .por { border-radius: var(--radius); }

/* the graph dialog */
.agx { width: min(1280px, 94vw); height: min(800px, 90vh); max-width: none; max-height: none; margin: auto; padding: 0; border: 1px solid var(--line-2); border-radius: var(--radius); background-color: var(--bg-2); background-image: var(--atmos-band); color: var(--text); overflow: hidden; }
.agx::backdrop { background: color-mix(in srgb, var(--bg-deep) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.agx[open] { animation: agx-in .55s var(--settle); }
@keyframes agx-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.agx-in { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); height: 100%; }
.agx-stage { position: relative; display: grid; place-items: center; padding: 30px; background: radial-gradient(60% 55% at 50% 52%, rgb(var(--key) / .12), transparent 70%), var(--bg-deep); border-right: 1px solid var(--line); overflow: hidden; }
.agx-graph { width: 100%; }
.agx-stage:has(.mg) { padding: 0; place-items: stretch; }
.agx-stage:has(.mg) .agx-graph { height: 100%; --mg-h: 100%; }
.agx .mg--page { border: 0; border-radius: 0; }
.agx-toggle { position: absolute; z-index: 6; left: 18px; top: 18px; display: flex; border: 1px solid var(--line-2); border-radius: 2px; background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.agx-toggle button { height: 34px; padding: 0 14px; font: 500 13px/1 var(--sans); color: var(--text-2); transition: color .3s, background .3s; }
.agx-toggle button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.agx-toggle button:not([aria-pressed="true"]):hover { color: var(--text); }
.sg-pack { display: grid; place-items: end center; height: 180px; }
.sg-pack img { max-height: 180px; width: auto; filter: drop-shadow(0 14px 12px rgb(var(--shade) / .6)); }
.agx-side { display: flex; flex-direction: column; padding: 28px 30px; overflow: auto; }
.agx-top { display: flex; justify-content: space-between; align-items: center; }
.agx-kind { margin: 0; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c, var(--accent)); }
.agx-title { margin: 22px 0 0; font: 300 clamp(36px, 3.4vw, 52px)/1.02 var(--display); letter-spacing: -.015em; }
.agx-sub { margin: 10px 0 0; font-size: 13px; color: var(--text-2); }
.agx-line { margin: 18px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--text); opacity: .88; }
.agx-list { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); }
.agx-list li { border-bottom: 1px solid var(--line); }
.agx-list a { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 0; text-decoration: none; }
.agx-list a:hover b { color: var(--accent); }
.agx-list img { width: 42px; height: 52px; object-fit: cover; border-radius: 2px; }
.agx-list .is-pack img { object-fit: contain; }
.agx-list b { display: block; font: 400 17px/1.2 var(--display); }
.agx-list small { display: block; margin-top: 3px; font-size: 13px; color: var(--text-2); }
.agx-list .mono { font-size: 12px; color: var(--text-2); }
.agx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.agx-pn { display: flex; justify-content: space-between; margin-top: auto; padding-top: 22px; }

/* ================================================================ small screens: never broken */
@media (max-width: 1100px) {
  .std-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .std-honest { grid-template-columns: 1fr; gap: 20px; }
  .ch-note { display: none; }
  .ch-h-note { display: none; }
  .ch-h-name { width: 34%; }
}
@media (max-width: 860px) {
  .plate-copy { padding-top: 80px; }
  .ah-in { grid-template-columns: 1fr; }
  .ah-copy { padding-top: 70px; }
  .ah-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ah-stats div, .ah-stats div:nth-child(odd) { margin-right: 0; padding-right: 10px; border-right: 0; }
  .ah-stats dd { font-size: 24px; }
  .ah-stats dt { font-size: 10.5px; letter-spacing: .1em; }
  .ah-fams { gap: 4px 16px; }
  .mband-in { grid-template-columns: 1fr; }
  .std-head { grid-template-columns: 1fr; }
  .std-intro, .std-more { grid-column: 1; grid-row: auto; }
  .std-list { grid-template-columns: 1fr; }
  .ch-tools { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .ch-tools .ch-search { grid-column: 1 / -1; }
  .ch-tools .ch-fams { grid-row: auto; }
  .ch-tools .ch-fn { grid-column: 1; }
  .ch-tools .ch-count { grid-column: 2; }
  .ch-fams { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); scrollbar-width: none; }
  .ch-fams .chip { flex: none; }
  .ch-count { margin: 0; }
  .ch-h-name { width: 34%; padding-right: 8px; } /* round 7: a definite share; with width: auto the fixed-layout table split the row evenly and long names ran under the product dots */
  .ch-h-name small { display: none; }
  .ch-h-go, .ch-go { display: none; }
  .ch-pname, .ch-pbtn small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* hidden, still the button's name */
  .ch-h-p { width: max(26px, calc(64% / var(--cols))); } /* a 24 px target at least (WCAG 2.5.8); the table is fixed-layout, so min-width would not hold */
  .ch-pimg { height: 40px; }
  .ch-pimg img { max-height: 40px; max-width: 28px; }
  .ch-pbtn { padding: 10px 0 8px; }
  .ch-thumb { display: none; }
  .ch-nm { width: 100%; }
  .ch-nm a { font-size: 15.5px; overflow-wrap: anywhere; }
  .ch-nm small { font-size: 10.5px; }
  .ch-name { padding-right: 8px; }
  .ch-fam-in { flex-wrap: wrap; gap: 4px 12px; }
  .ch-fam-name { font-size: 22px; }
  .ch-fam-blurb { font-size: 13.5px; }
  .dot { --s: 9px !important; }
  .fg-nav { top: 61px; }
  .fg-az { margin-left: 0; }
  .fg-az a, .fg-az span { min-width: 22px; height: 28px; font-size: 12.5px; }
  .fg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fg-mush .fg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .icard-line { display: none; }
  .mband-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .agx { width: 100vw; height: 100%; max-height: 100%; border: 0; border-radius: 0; }
  .agx-in { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow: auto; }
  .agx-stage { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px; }
  .agx-side { overflow: visible; padding: 20px var(--gut) 28px; }
  .sg-node { padding: 4px 8px 4px 4px; gap: 6px; }
  .sg-n-img { width: 24px; height: 32px; }
  .sg-n-img img { max-height: 32px; }
  .sg-n-txt b { font-size: 13px; }
  .sg-n-txt small { display: none; }
  .sg-center { width: 26%; }
  .sg-c-txt b { font-size: 14px; }
  .sg-c-txt small { display: none; }
  .facts div { grid-template-columns: 1fr; gap: 4px; }
}