/* Plant page, design B: the field of the plant with one large plant bag, then sections in a central column of at most 1200px, separated by thin strips of the field photo of the same plant. */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .plantInfoSubmenu {
        transition: none;
    }

    .plantInfoFieldBag {
        animation: none;
        transition: none;
    }
}

.plantInfo,
.plantInfo *,
.plantInfo *::before,
.plantInfo *::after {
    box-sizing: border-box;
}

.plantInfoMain {
    /* Height of the row of buttons. The field uses it so the row shows at the bottom of the first screen. */
    --plantInfoSubmenuH: 58px;
    --plantInfoSectionPad: clamp(56px, 6.4vw, 96px);
    --plantInfoEarth: rgb(111, 53, 3);
    --plantInfoHairline: rgba(184, 145, 74, .42);
    --plantInfoCardFill: rgb(255, 251, 242);

    background: var(--paper);
    color: var(--ink);
}

/* ---------- Field of the plant with one large plant bag ---------- */

.plantInfoField {
    /* From the gold cord to the top of the plant bag. This value only clears the search bar: plant_field.js replaces it with the length that hangs the bag in the middle of the field. */
    --plantInfoFieldBagDrop: calc(var(--search-h) / 2 + clamp(14px, 2.2vh, 24px));

    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: calc(100vh - var(--plantInfoSubmenuH));
    height: calc(100svh - var(--plantInfoSubmenuH));
    min-height: 600px;
    padding-top: var(--cord-y);
    overflow: hidden;
    overflow: clip;
    background: var(--night);
}

.plantInfoFieldImage {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

/* Deepens the sky behind the top bar so stars don't land on the letters. */
.plantInfoField::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: calc(var(--nav-h) * 1.45);
    background: linear-gradient(to bottom, rgba(4, 11, 32, .92), rgba(4, 11, 32, .78) 58%, rgba(4, 11, 32, 0));
    pointer-events: none;
}

/* Same design as the plant bags of the index page, at a larger width. It is let down from the cord when the page opens. */
.plantInfoFieldBag {
    --tag-w: round(clamp(232px, min(23vw, 44vh), 460px), 2px);

    position: relative;
    margin-top: var(--plantInfoFieldBagDrop);
    transform-origin: 50% calc(var(--plantInfoFieldBagDrop) * -1);
    transition: translate .9s cubic-bezier(.3, 1.22, .4, 1);
    animation: plantInfoFieldBagLetDown 1.05s cubic-bezier(.3, 1.22, .4, 1) 138ms backwards;
}

@keyframes plantInfoFieldBagLetDown {
    from {
        translate: 0 -120vh;
    }
}

/* While the search is open the plant bag is pulled back up, so the search results have the field to themselves. */
html.topBarIsOpen .plantInfoFieldBag {
    translate: 0 -120vh;
    transition: translate .42s cubic-bezier(.55, 0, .85, .35);
}

.plantInfoFieldBagThread {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: calc(100% - var(--eye-y));
    width: 1px;
    height: calc(var(--plantInfoFieldBagDrop) + var(--eye-y));
    background: linear-gradient(to top, var(--brass) 0, var(--brass) var(--eye-y), var(--sun-pale) var(--eye-y));
    pointer-events: none;
}

.plantInfoFieldBagNames {
    margin: 0;
    font: inherit;
}

.plantInfoFieldBag .topBarTagName,
.plantInfoFieldBag .topBarScientificRow {
    user-select: text;
    cursor: text;
}

/* ---------- Row of buttons of the plant: it stays under the search bar while scrolling ---------- */

.plantInfoSubmenu {
    position: sticky;
    z-index: 20;
    top: calc(var(--search-h) + 20px);
    height: var(--plantInfoSubmenuH);
    background: var(--night);
    transition: top .25s ease;
}

/* The gold line under the row, the same as the gold cord of the top bar. */
.plantInfoSubmenu::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--cord-gradient);
    box-shadow: 0 0 10px rgba(235, 201, 91, .55);
}

/* When a scroll up brings the menu row into the top bar, the row of buttons moves down with it. */
.topBarIsRevealed ~ .plantInfoMain .plantInfoSubmenu {
    top: calc(var(--search-h) + 20px + var(--topBarRevealY, 0px));
}

.plantInfoSubmenuList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--gutter) 2px;
    overflow-x: auto;
    list-style: none;
}

/* The row scrolls sideways on small screens, without showing a scrollbar. */
@supports selector(::-webkit-scrollbar) {
    .plantInfoSubmenuList::-webkit-scrollbar {
        display: none;
    }
}

@supports not selector(::-webkit-scrollbar) {
    .plantInfoSubmenuList {
        scrollbar-width: none;
    }
}

.plantInfoSubmenuItem {
    flex: none;
}

.plantInfoSubmenuLink {
    display: block;
    padding: 8px 14px 9px;
    border-radius: 999px;
    background: rgba(245, 226, 168, .1);
    color: var(--sun-pale);
    font-family: var(--tea-bag-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.plantInfoSubmenuLink:hover {
    background: rgba(245, 226, 168, .26);
    color: rgb(255, 255, 255);
}

.plantInfoSubmenuLink:focus-visible {
    outline: 2px solid var(--sun);
    outline-offset: -2px;
}

.plantInfoSubmenuLinkActive,
.plantInfoSubmenuLinkActive:hover {
    background: var(--sun);
    color: var(--night);
}

/* ---------- Central column and shared text ---------- */

.plantInfoContainer {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* A section reached from the row of buttons starts right below the search bar and the row. Each section has its own space at the top. */
.plantInfoPaper [id] {
    scroll-margin-top: calc(var(--search-h) + 20px + var(--plantInfoSubmenuH));
}

.plantInfoHeading {
    margin: 0;
    color: var(--leaf-deep);
    font-family: var(--serif);
    font-size: clamp(38px, 4.4vw, 60px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.016em;
    text-wrap: balance;
    user-select: text;
    cursor: text;
}

.plantInfoHeadingAccent {
    color: var(--search-button-color);
    font-family: var(--serif);
    font-style: italic;
}

.plantInfoHeadingAccentEarth {
    color: var(--plantInfoEarth);
    font-family: var(--serif);
    font-style: italic;
}

.plantInfoSubheading {
    margin: 0;
    color: var(--leaf-deep);
    font-family: var(--serif);
    font-size: clamp(32px, 3.4vw, 46px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.012em;
    text-wrap: balance;
    user-select: text;
    cursor: text;
}

.plantInfoParagraph {
    margin: 8px 0 0;
    font-family: var(--serif);
    font-size: clamp(20px, 1.5vw, 22px);
    line-height: 1.38;
    text-wrap: pretty;
    user-select: text;
    cursor: text;
}

/* Badges: dashed border and no fill, so they are never taken for buttons. */
.plantInfoBadges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.plantInfoBadge {
    display: inline-block;
    padding: 4px 11px 5px;
    border: 1.5px dashed var(--brass);
    border-radius: 999px;
    color: var(--ink);
    font-family: var(--tea-bag-font);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    user-select: text;
    cursor: text;
}

.plantInfoBadgeWarning {
    border-color: var(--plantInfoEarth);
    color: var(--plantInfoEarth);
    font-family: var(--tea-bag-font);
    font-size: clamp(19px, 1.5vw, 22px);
    font-weight: 700;
}

.plantInfoBadgeOnDark {
    border-color: var(--sun-pale);
    color: var(--paper);
    font-family: var(--tea-bag-font);
    font-size: clamp(18px, 1.4vw, 20px);
    font-weight: 700;
}

/* ---------- What the plant is like ---------- */

.plantInfoIntro {
    padding-block: var(--plantInfoSectionPad);
}

.plantInfoIntroColumns {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5.6vw, 72px);
    align-items: start;
}

.plantInfoIntroName {
    color: var(--search-button-color);
}

.plantInfoDescription {
    /* Keeps the large first letter inside the first paragraph, even when that paragraph is short. */
    display: flow-root;
    margin: clamp(16px, 1.8vw, 26px) 0 0;
    font-family: var(--serif);
    font-size: clamp(21px, 1.72vw, 25px);
    line-height: 1.42;
    text-wrap: pretty;
    user-select: text;
    cursor: text;
}

.plantInfoDescription + .plantInfoDescription {
    margin-top: clamp(12px, 1.1vw, 16px);
}

.plantInfoDescription:first-of-type::first-letter {
    float: left;
    padding: .07em .05em 0 0;
    color: var(--leaf);
    font-family: var(--serif);
    font-size: 3.5em;
    font-weight: 500;
    line-height: .8;
}

/* How to recognize the plant, beside a round photo of it. */
.plantInfoRecognize {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: clamp(16px, 1.8vw, 24px);
    align-items: center;
    margin-top: clamp(16px, 1.8vw, 24px);
    padding: clamp(16px, 1.6vw, 22px);
    border: 1px solid var(--plantInfoHairline);
    border-radius: 16px;
    background: var(--plantInfoCardFill);
}

.plantInfoRecognizePhoto {
    display: block;
    width: 92px;
    height: 92px;
    border: 2px solid var(--sun);
    border-radius: 50%;
    object-fit: cover;
}

.plantInfoRecognizeTitle {
    margin: 0;
    color: var(--search-button-color);
    font-family: var(--tea-bag-font);
    font-size: clamp(20px, 1.5vw, 22px);
    font-weight: 700;
    line-height: 1.2;
    user-select: text;
    cursor: text;
}

.plantInfoRecognizeText {
    margin: 4px 0 0;
    font-family: var(--serif);
    font-size: clamp(19px, 1.4vw, 21px);
    line-height: 1.3;
    text-wrap: pretty;
    user-select: text;
    cursor: text;
}

/* Botanical sheet: a paper tag with the same cut corners and metal ring as the plant bags, hanging from the row of buttons. */
.plantInfoSheet {
    --plantInfoSheetEyeY: 32px;
    --plantInfoSheetCut: 34px;
    --plantInfoSheetHole: 7px;

    position: relative;
    filter: drop-shadow(0 18px 24px rgba(70, 48, 12, .2));
}

.plantInfoSheetThread {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: calc(100% - var(--plantInfoSheetEyeY));
    width: 1px;
    height: calc(var(--plantInfoSectionPad) + var(--plantInfoSheetEyeY));
    background: linear-gradient(to top, var(--brass) 0, var(--brass) var(--plantInfoSheetEyeY), var(--sun) var(--plantInfoSheetEyeY));
    pointer-events: none;
}

.plantInfoSheetPaper {
    padding: calc(var(--plantInfoSheetEyeY) * 2 + 2px) clamp(22px, 2.6vw, 36px) clamp(20px, 2.2vw, 30px);
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, rgb(255, 252, 245), var(--paper-deep));
    clip-path: polygon(var(--plantInfoSheetCut) 0, calc(100% - var(--plantInfoSheetCut)) 0, 100% var(--plantInfoSheetCut), 100% 100%, 0 100%, 0 var(--plantInfoSheetCut));
    -webkit-mask: radial-gradient(circle var(--plantInfoSheetHole) at 50% var(--plantInfoSheetEyeY), transparent 96%, rgb(0, 0, 0) 100%);
    mask: radial-gradient(circle var(--plantInfoSheetHole) at 50% var(--plantInfoSheetEyeY), transparent 96%, rgb(0, 0, 0) 100%);
}

.plantInfoSheetEyelet {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: var(--plantInfoSheetEyeY);
    width: calc(var(--plantInfoSheetHole) * 2 + 6px);
    height: calc(var(--plantInfoSheetHole) * 2 + 6px);
    border: 2.5px solid var(--brass);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.plantInfoSheetTitle {
    margin: 0;
    color: var(--search-button-color);
    font-family: var(--tea-bag-font);
    font-size: clamp(19px, 1.5vw, 22px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    user-select: text;
    cursor: text;
}

.plantInfoSheetLatin {
    margin: 2px 0 0;
    color: var(--leaf-deep);
    font-family: var(--serif);
    font-size: clamp(26px, 2.3vw, 33px);
    font-style: italic;
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    text-wrap: balance;
    user-select: text;
    cursor: text;
}

.plantInfoSheetAuthor {
    color: var(--ink-soft);
    font-family: var(--serif);
    font-size: .68em;
    font-style: normal;
    font-weight: 400;
}

.plantInfoSheetRows {
    margin: 12px 0 0;
}

.plantInfoSheetRow {
    padding-block: 12px;
    border-top: 1px solid var(--plantInfoHairline);
}

.plantInfoSheetRow:last-child {
    padding-bottom: 0;
}

.plantInfoSheetTerm {
    margin-bottom: 5px;
    color: var(--ink-soft);
    font-family: var(--tea-bag-font);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    user-select: text;
    cursor: text;
}

.plantInfoSheetValue {
    margin: 0;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.22;
    user-select: text;
    cursor: text;
}

.plantInfoSheetNote {
    display: block;
    color: var(--ink-soft);
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 400;
}

.plantInfoSpeciesList {
    margin: 0;
    padding: 0;
    list-style: none;
}

.plantInfoSpeciesItem {
    color: var(--ink);
    font-family: var(--serif);
    font-size: 21px;
    font-style: italic;
    line-height: 1.25;
    user-select: text;
    cursor: text;
}

/* Quick facts of the plant, below the description and the botanical sheet. */
.plantInfoFacts {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(14px, 1.6vw, 20px);
    margin: clamp(36px, 4.4vw, 60px) 0 0;
    padding: 0;
    list-style: none;
}

.plantInfoFact {
    flex: 1 1 210px;
    padding: clamp(18px, 1.8vw, 24px);
    border: 1px solid var(--plantInfoHairline);
    border-radius: 16px;
    background: var(--plantInfoCardFill);
}

.plantInfoFactWide {
    flex: 1.7 1 320px;
}

.plantInfoFactIcon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--leaf);
    color: var(--sun-pale);
}

.plantInfoFactIconImage {
    width: 24px;
    height: 24px;
}

.plantInfoFactLabel {
    margin: 12px 0 0;
    color: var(--search-button-color);
    font-family: var(--tea-bag-font);
    font-size: clamp(19px, 1.5vw, 21px);
    font-weight: 700;
    line-height: 1.2;
    user-select: text;
    cursor: text;
}

.plantInfoFactValue {
    margin: 4px 0 0;
    font-family: var(--serif);
    font-size: clamp(20px, 1.5vw, 22px);
    line-height: 1.26;
    text-wrap: pretty;
    user-select: text;
    cursor: text;
}

.plantInfoFactSubLabel {
    margin: 12px 0 7px;
    color: var(--ink-soft);
    font-family: var(--tea-bag-font);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    user-select: text;
    cursor: text;
}

/* ---------- Thin strips with the field photo of this plant ---------- */

.plantInfoStrip {
    height: clamp(58px, 7.2vw, 118px);
    overflow: hidden;
    border-block: 2px solid var(--sun);
    background: var(--leaf);
}

.plantInfoStripPicture {
    display: block;
    height: 100%;
}

.plantInfoStripImage {
    --plantInfoStripY: 75%;

    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% var(--plantInfoStripY);
}

/* Each strip shows a different band of the plants in the photo, and every other strip is mirrored, so no two strips look alike. Every band stays below the horizon of all the field photos. */
.plantInfoStripBand1 .plantInfoStripImage {
    --plantInfoStripY: 66%;
}

.plantInfoStripBand2 .plantInfoStripImage {
    --plantInfoStripY: 88%;
    transform: scaleX(-1);
}

.plantInfoStripBand3 .plantInfoStripImage {
    --plantInfoStripY: 76%;
}

/* The photo inside each strip moves slightly while the strip crosses the screen. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .plantInfoStripImage {
            animation: plantInfoStripDrift linear both;
            animation-timeline: view();
        }
    }
}

@keyframes plantInfoStripDrift {
    from {
        object-position: 50% calc(var(--plantInfoStripY) - 4%);
    }

    to {
        object-position: 50% calc(var(--plantInfoStripY) + 4%);
    }
}

/* ---------- What it has been used for, on the night color of the index page ---------- */

.plantInfoNight {
    padding-block: var(--plantInfoSectionPad);
    background: radial-gradient(1100px 460px at 50% 0, rgb(18, 42, 88), transparent), var(--night);
}

.plantInfoNightHeading {
    margin: 0;
    color: rgb(255, 255, 255);
    font-family: var(--serif);
    font-size: clamp(38px, 4.4vw, 60px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.016em;
    text-wrap: balance;
    user-select: text;
    cursor: text;
}

.plantInfoNightAccent {
    color: var(--sun-pale);
    font-family: var(--serif);
    font-style: italic;
}

.plantInfoNightLead {
    margin: 10px 0 0;
    color: var(--paper);
    font-family: var(--search-font);
    font-size: clamp(19px, 1.5vw, 22px);
    font-weight: 700;
    line-height: 1.25;
    user-select: text;
    cursor: text;
}

/* Columns of different lengths fit together with no empty holes, even with many body systems. */
.plantInfoGroups {
    columns: 3 280px;
    column-gap: clamp(14px, 1.6vw, 20px);
    margin-top: clamp(24px, 3vw, 40px);
}

.plantInfoGroup {
    break-inside: avoid;
    margin-bottom: clamp(14px, 1.6vw, 20px);
    padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 24px);
    border: 1px solid rgba(245, 226, 168, .24);
    border-radius: 16px;
    background: rgba(255, 255, 255, .045);
}

.plantInfoGroupName {
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(245, 226, 168, .3);
    color: var(--sun);
    font-family: var(--tea-bag-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.14;
    user-select: text;
    cursor: text;
}

.plantInfoGroupList {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.plantInfoGroupItem {
    position: relative;
    padding: 3px 0 3px 16px;
    color: var(--paper);
    font-family: var(--serif);
    font-size: 21px;
    line-height: 1.22;
    user-select: text;
    cursor: text;
}

.plantInfoGroupItem::before {
    content: "";
    position: absolute;
    left: 0;
    top: .72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sun);
}

/* ---------- Before using the plant ---------- */

.plantInfoWarnings {
    padding-block: clamp(44px, 5vw, 76px);
    background: var(--paper-deep);
}

/* With no strip above, a gold line marks the change of color. */
.plantInfoCompoundSection + .plantInfoWarnings {
    border-top: 2px solid var(--sun);
}

.plantInfoWarningPanel {
    padding: clamp(24px, 3.4vw, 48px);
    border: 1.5px solid var(--plantInfoEarth);
    border-radius: 20px;
    background: var(--plantInfoCardFill);
    box-shadow: 0 18px 40px rgba(90, 60, 10, .14);
}

.plantInfoWarningGroups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(20px, 2.4vw, 32px) clamp(26px, 3.4vw, 48px);
    margin-top: clamp(22px, 2.6vw, 34px);
    padding-top: clamp(20px, 2.4vw, 32px);
    border-top: 1px solid rgba(111, 53, 3, .3);
}

.plantInfoWarningHeading {
    margin: 0 0 10px;
    color: var(--plantInfoEarth);
    font-family: var(--tea-bag-font);
    font-size: clamp(22px, 1.8vw, 26px);
    font-weight: 700;
    line-height: 1.15;
    user-select: text;
    cursor: text;
}

/* ---------- What the research says: properties attributed to the plant ---------- */

.plantInfoResearch {
    padding-block: var(--plantInfoSectionPad);
}

/* With no strip above, a gold line marks the change of color. */
.plantInfoNight + .plantInfoResearch {
    border-top: 2px solid var(--sun);
}

.plantInfoResearchNote {
    max-width: 46em;
    margin: 16px 0 0;
    font-family: var(--serif);
    font-size: clamp(20px, 1.5vw, 22px);
    line-height: 1.38;
    text-wrap: pretty;
    user-select: text;
    cursor: text;
}

.plantInfoPropertiesTitle {
    margin-top: clamp(32px, 3.8vw, 54px);
}

.plantInfoProperties {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: clamp(14px, 1.6vw, 20px);
    margin: clamp(18px, 2vw, 26px) 0 0;
    padding: 0;
    list-style: none;
}

.plantInfoProperty {
    padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 24px);
    border: 1px solid var(--plantInfoHairline);
    border-radius: 16px;
    background: var(--plantInfoCardFill);
}

.plantInfoPropertyName {
    margin: 0;
    color: var(--leaf);
    font-family: var(--tea-bag-font);
    font-size: clamp(22px, 1.7vw, 25px);
    font-weight: 700;
    line-height: 1.15;
    user-select: text;
    cursor: text;
}

.plantInfoPropertyText {
    margin: 5px 0 0;
    font-family: var(--serif);
    font-size: clamp(19px, 1.4vw, 21px);
    line-height: 1.28;
    text-wrap: pretty;
    user-select: text;
    cursor: text;
}

.plantInfoPropertyBadge {
    margin-top: 10px;
}

/* ---------- What the plant acts against, on dark green ---------- */

.plantInfoAgentBand {
    padding-block: var(--plantInfoSectionPad);
    background: radial-gradient(1100px 460px at 50% 0, rgb(24, 74, 42), transparent), var(--leaf-deep);
}

.plantInfoAgentHeading {
    margin: 0;
    color: rgb(255, 255, 255);
    font-family: var(--serif);
    font-size: clamp(38px, 4.4vw, 60px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.016em;
    user-select: text;
    cursor: text;
}

.plantInfoAgentLead {
    margin: 10px 0 0;
    color: var(--paper);
    font-family: var(--search-font);
    font-size: clamp(19px, 1.5vw, 22px);
    font-weight: 700;
    line-height: 1.25;
    user-select: text;
    cursor: text;
}

.plantInfoAgents {
    margin-top: clamp(20px, 2.6vw, 34px);
}

/* One row per kind of organism: its name on the left and its organisms on the right, so a kind with many organisms only makes its own row taller. */
.plantInfoAgentGroup {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 6px clamp(20px, 2.8vw, 40px);
    padding-block: 18px 20px;
    border-top: 1px solid rgba(245, 226, 168, .3);
}

.plantInfoAgentLabel {
    margin: 0;
    color: var(--sun);
    font-family: var(--tea-bag-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.14;
    user-select: text;
    cursor: text;
}

.plantInfoAgentList {
    columns: 3 220px;
    column-gap: clamp(20px, 2.8vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.plantInfoAgentItem {
    break-inside: avoid;
    padding-block: 2px;
    color: var(--paper);
    font-family: var(--serif);
    font-size: clamp(20px, 1.5vw, 22px);
    line-height: 1.24;
    user-select: text;
    cursor: text;
}

.plantInfoLatinName {
    font-family: var(--serif);
    font-style: italic;
}

.plantInfoAgentNote {
    display: block;
    color: var(--sun-pale);
    font-family: var(--serif);
    font-size: 18px;
    user-select: text;
    cursor: text;
}

/* ---------- What the plant contains ---------- */

.plantInfoCompoundSection {
    padding-block: var(--plantInfoSectionPad);
}

/* With no strip above, a gold line marks the change of color. */
.plantInfoAgentBand + .plantInfoCompoundSection {
    border-top: 2px solid var(--sun);
}

.plantInfoCompounds {
    columns: 3 280px;
    column-gap: clamp(14px, 1.6vw, 20px);
    margin-top: clamp(18px, 2vw, 26px);
}

.plantInfoCompoundRoot {
    break-inside: avoid;
    margin-bottom: clamp(14px, 1.6vw, 20px);
    padding: clamp(14px, 1.4vw, 18px) clamp(18px, 1.8vw, 24px);
    border: 1px solid var(--plantInfoHairline);
    border-radius: 16px;
    background: var(--plantInfoCardFill);
}

.plantInfoCompoundRootName {
    margin: 0;
    color: var(--leaf);
    font-family: var(--tea-bag-font);
    font-size: clamp(22px, 1.7vw, 25px);
    font-weight: 700;
    line-height: 1.15;
    user-select: text;
    cursor: text;
}

.plantInfoCompoundAloneTitle {
    margin-bottom: 10px;
    font-family: var(--tea-bag-font);
    font-weight: 700;
}

/* A class shown only to hold the compounds under it. */
.plantInfoCompoundRootOnlyClass {
    color: var(--ink-soft);
    font-family: var(--tea-bag-font);
    font-style: italic;
    font-weight: 700;
}

.plantInfoCompoundList {
    margin: 6px 0 0 3px;
    padding: 0 0 0 16px;
    border-left: 1px solid var(--brass);
    list-style: none;
}

.plantInfoCompoundItem {
    position: relative;
    padding-block: 2px;
}

.plantInfoCompoundItem::before {
    content: "";
    position: absolute;
    left: -16px;
    top: .85em;
    width: 11px;
    height: 1px;
    background: var(--brass);
}

.plantInfoCompoundName {
    color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(20px, 1.5vw, 22px);
    font-weight: 500;
    line-height: 1.2;
    user-select: text;
    cursor: text;
}

.plantInfoCompoundOnlyClass {
    color: var(--ink-soft);
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
}

/* ---------- More plants, hanging from a gold cord ---------- */

.plantInfoMore {
    padding-block: var(--plantInfoSectionPad) clamp(44px, 5vw, 72px);
    background: radial-gradient(1100px 460px at 50% 0, rgb(18, 42, 88), transparent), var(--night);
}

/* With no strip above, a gold line marks the change of color. */
.plantInfoWarnings + .plantInfoMore {
    border-top: 2px solid var(--sun);
}

.plantInfoMoreHanger {
    position: relative;
    margin-top: clamp(22px, 2.6vw, 34px);
}

.plantInfoMoreCord {
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    height: 2px;
    background: var(--cord-gradient);
    box-shadow: 0 0 10px rgba(235, 201, 91, .55);
}

.plantInfoMoreLine {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--gutter) 22px;
    overflow-x: auto;
    list-style: none;
}

@supports selector(::-webkit-scrollbar) {
    .plantInfoMoreLine::-webkit-scrollbar {
        display: none;
    }
}

@supports not selector(::-webkit-scrollbar) {
    .plantInfoMoreLine {
        scrollbar-width: none;
    }
}

.plantInfoMoreItem {
    flex: none;
}

.plantInfoMoreBag {
    --tag-w: round(clamp(118px, 11.4vw, 138px), 2px);
    --plantInfoMoreDrop: 34px;

    position: relative;
    margin-top: var(--plantInfoMoreDrop);
    transform-origin: 50% calc(var(--plantInfoMoreDrop) * -1);
}

.plantInfoMoreItem:nth-child(even) .plantInfoMoreBag {
    --plantInfoMoreDrop: 66px;
}

.plantInfoMoreThread {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: calc(100% - var(--eye-y));
    width: 1px;
    height: calc(var(--plantInfoMoreDrop) + var(--eye-y));
    background: linear-gradient(to top, var(--brass) 0, var(--brass) var(--eye-y), var(--sun-pale) var(--eye-y));
    pointer-events: none;
}

/* ---------- Tablets ---------- */

@media only screen and (max-width: 860px) {
    .plantInfoIntroColumns {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The botanical sheet is below the description here, so it has no row of buttons to hang from. */
    .plantInfoSheetThread {
        display: none;
    }

    .plantInfoAgentGroup {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Phones ---------- */

@media only screen and (max-width: 600px) {
    .plantInfoFieldBag {
        --tag-w: round(min(64vw, 40vh), 2px);
    }

    .plantInfoContainer {
        padding-inline: 16px;
    }

    .plantInfoSubmenuList {
        padding-inline: 16px;
    }

    .plantInfoMoreLine {
        justify-content: flex-start;
        padding-inline: 16px;
    }

    .plantInfoHeading,
    .plantInfoNightHeading,
    .plantInfoAgentHeading {
        font-size: clamp(31px, 8.6vw, 36px);
    }

    .plantInfoSubheading {
        font-size: clamp(28px, 7.6vw, 32px);
    }

    .plantInfoRecognize {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .plantInfoRecognizePhoto {
        width: 68px;
        height: 68px;
    }
}