/*
 * ==========================================================================
 * File:     styles/style.css
 * Site:     Rimba Kita, COS10026 Web Technology Project, Assignment 1
 *           (Semester 2, 2026)
 * Author:   Tiong Shun Tai (104408996) and the Rimba Kita team.
 *           September 2026 "Liquid Glass" and "living taxonomy" redesigns
 *           produced with AI assistance (Claude); see submission.html.
 * Purpose:  The single external stylesheet for every page of the site.
 *           It holds all presentation; the HTML contains no style markup
 *           and the site uses no JavaScript.
 *
 * Design:   "Living taxonomy, under glass". The collection is one tree:
 *           four families, eight genera, sixteen species. The home page
 *           draws that tree and lets the visitor light up a branch; every
 *           Explore page shows where it sits on the tree; each species is
 *           mounted like a specimen between panes of glass. The team's
 *           rainforest photographs are the scenery; menus, controls and
 *           sheets float above them as translucent glass (a web
 *           approximation of Apple's Liquid Glass: backdrop-filter, layered
 *           highlights and pre-blurred photographs). Reading content stays
 *           on calm, solid "mist" surfaces. One typeface, Mona Sans.
 *           Light and dark themes follow the visitor's system setting.
 *
 * Contents: 01 Font files
 *           02 Design tokens (colours, glass materials, type, shape)
 *           03 Base elements and typography
 *           04 Shared pieces: container, buttons, links, tags, captions
 *           05 Site header and main menu (floating glass bar, drop-down)
 *           06 Home page: hero, taxonomy tree, family chapters, team
 *           07 Page headers: heights, glass tags, level map
 *           08 Explorer pages: paths, families, genera, next step
 *           09 Plant cards and the species filter
 *           10 Species record pages: the glass specimen plate
 *           11 Field notes with the assessed <aside>
 *           12 Tables
 *           13 Identify and community pages
 *           14 Forms and validation feedback
 *           15 Team and individual profile pages
 *           16 Documentation pages: enhancements, sources, sitemap
 *           17 Site footer
 *           18 Motion
 *           19 Dark theme
 *           20 Accessibility preferences: motion, transparency, contrast
 *           21 Responsive layout
 * ==========================================================================
 */


/* ==========================================================================
   01 / Font files
   Mona Sans (SIL Open Font License) is stored in styles/fonts/. One file
   holds every weight (200-900) and width (75%-125%); a second holds the
   true italic used for Latin plant names.
   ========================================================================== */
@font-face {
    font-family: "Mona Sans";
    font-style: normal;
    font-weight: 200 900;
    font-stretch: 75% 125%;
    font-display: swap;
    src: url("fonts/mona-sans-latin-wdth-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Mona Sans";
    font-style: italic;
    font-weight: 200 900;
    font-stretch: 75% 125%;
    font-display: swap;
    src: url("fonts/mona-sans-latin-wdth-italic.woff2") format("woff2");
}


/* ==========================================================================
   02 / Design tokens
   Every colour on the site comes from these custom properties. To change
   the colour scheme, edit the values here; the dark theme (section 19)
   redefines the same names.
   ========================================================================== */
:root {
    color-scheme: light dark;

    /* Canvas and surfaces: a cool mist green, never cream */
    --mist: #eef2ef;
    --mist-2: #e2e9e4;
    --surface: #fbfcfb;

    /* Text */
    --ink: #0e1a14;
    --ink-2: #4a5a52;

    /* Brand greens: canopy for primary buttons, leaf for links and focus */
    --canopy: #0f2e21;
    --canopy-2: #184a35;
    --leaf: #1e6b47;
    --leaf-soft: rgb(30 107 71 / 11%);

    /* Primary button (swapped to light in the dark theme) */
    --btn-bg: #0f2e21;
    --btn-bg-hover: #1b4d37;
    --btn-ink: #f4f8f5;

    /* Hairlines */
    --line: rgb(14 26 20 / 9%);
    --line-strong: rgb(14 26 20 / 18%);

    /* Text on photographs, form states */
    --on-photo: #f4f8f5;
    --error: #b3261e;
    --error-soft: #fbeeed;
    --ok: #1e6b47;
    --focus: #1e6b47;

    /* One colour per plant family: tree branches, tags, filters, tables.
       Change these four to re-colour every family marker on the site. */
    --dipt: #58781a;
    --laur: #0f6c5e;
    --burs: #8c5813;
    --myri: #9a3450;

    /* Liquid Glass materials (web approximation).
       --glass: regular glass for the menu and popovers
       --glass-thick: heavier glass for sheets that hold a lot of text
       --glass-rim: bright top edge and inner outline, like light catching
       the edge of a pane; --glass-lift: soft shadow tinted to the canopy */
    --glass: rgb(248 251 249 / 60%);
    --glass-thick: rgb(248 251 249 / 82%);
    --glass-rim: inset 0 1px 0 rgb(255 255 255 / 85%), inset 0 0 0 1px rgb(255 255 255 / 40%), inset 0 -1px 0 rgb(255 255 255 / 25%);
    --glass-lift: 0 1px 2px rgb(14 26 20 / 8%), 0 18px 42px -14px rgb(14 26 20 / 30%);
    --glass-blur: blur(22px) saturate(190%);

    /* Hover "lens": the brighter glass that forms under the pointer, and
       the translucent fill a solid button turns into on hover */
    --lens: rgb(255 255 255 / 55%);
    --lens-rim: inset 0 1px 0 rgb(255 255 255 / 85%), inset 0 0 0 1px rgb(255 255 255 / 38%);
    --btn-glass: rgb(15 46 33 / 74%);

    /* Clear glass used directly over photographs (same in both themes) */
    --glass-clear: rgb(255 255 255 / 15%);
    --glass-smoke: rgb(8 20 14 / 30%);
    --rim-clear: inset 0 1px 0 rgb(255 255 255 / 50%), inset 0 0 0 1px rgb(255 255 255 / 20%);

    /* Type */
    --sans: "Mona Sans", "Segoe UI", system-ui, sans-serif;

    /* Shape: pills for controls, 24px for cards, 32px for large sheets */
    --r-card: 1.5rem;
    --r-sheet: 2rem;
    --shadow-card: 0 1px 2px rgb(14 26 20 / 5%), 0 14px 34px -20px rgb(14 26 20 / 32%);
    --shadow-card-hover: 0 2px 4px rgb(14 26 20 / 6%), 0 26px 50px -22px rgb(14 26 20 / 40%);

    /* Layout and easing. --spring overshoots slightly, like a spring
       settling; --ease decelerates smoothly. */
    --wrap: 78rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --ease: cubic-bezier(.22, 1, .36, 1);
    --spring: cubic-bezier(.34, 1.3, .64, 1);
}

/* Family accent: any element with a family class picks up its colour */
.dipterocarpaceae {
    --accent: var(--dipt);
}

.lauraceae {
    --accent: var(--laur);
}

.burseraceae {
    --accent: var(--burs);
}

.myristicaceae {
    --accent: var(--myri);
}


/* ==========================================================================
   03 / Base elements and typography
   Apple-style type: tracking tightens as size grows, leading loosens as
   size shrinks. Width (font-stretch) widens slightly for headings.
   ========================================================================== */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Anchored sections stop below the floating menu */
    scroll-padding-top: 6.5rem;
    /* The scroll bar in the site's own green */
    scrollbar-color: color-mix(in srgb, var(--leaf) 55%, transparent) transparent;
}

body {
    margin: 0;
    background-color: var(--mist);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.0625rem;
    font-weight: 420;
    line-height: 1.6;
    font-synthesis: none;
}

/* Index page requirement: a background graphic. A faint topographic map
   (styles/images/contours-dark.svg) lies under the home page sections. */
.home-page {
    background-image: url("images/contours-dark.svg");
    background-position: center top;
    background-size: 100rem auto;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

figure {
    margin: 0;
}

figcaption {
    margin-top: .6rem;
    color: var(--ink-2);
    font-size: .8125rem;
    line-height: 1.45;
}

figcaption a {
    color: inherit;
}

/* Service pages requirement: <h1> set with the shorthand font property.
   Order: font-style font-variant font-weight font-size/line-height family */
h1 {
    margin: 0 0 1.1rem;
    font: normal normal 720 clamp(2.7rem, 6vw, 5.4rem) / 1 "Mona Sans", "Segoe UI", system-ui, sans-serif;
    font-stretch: 110%;
    letter-spacing: -.035em;
    text-wrap: balance;
}

h2,
h3 {
    margin: 0 0 .85rem;
    text-wrap: balance;
}

h2 {
    font-size: clamp(1.85rem, 3.3vw, 2.9rem);
    font-stretch: 106%;
    font-weight: 680;
    letter-spacing: -.032em;
    line-height: 1.06;
}

h3 {
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    font-weight: 640;
    letter-spacing: -.012em;
    line-height: 1.25;
}

p {
    margin: 0 0 1rem;
    text-wrap: pretty;
}

/* Latin plant names in their true italic */
i,
em {
    font-style: italic;
}

a {
    color: var(--leaf);
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
    transition: color .2s, text-decoration-color .2s;
}

a:hover {
    color: var(--canopy-2);
    text-decoration-thickness: 2px;
}

/* Keyboard focus: a clear leaf-green ring everywhere */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

::selection {
    background-color: #bfe3cc;
    color: #0e1a14;
}

code {
    padding: .1em .38em;
    border-radius: .4em;
    background-color: var(--mist-2);
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: .86em;
}

blockquote {
    margin: 0;
}

.lead {
    max-width: 40rem;
    color: var(--ink-2);
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.5;
}

.source-note {
    color: var(--ink-2);
    font-size: .875rem;
    line-height: 1.5;
}

.source-note a {
    color: inherit;
}

.required {
    margin-left: .1rem;
    color: var(--error);
}


/* ==========================================================================
   04 / Shared pieces: container, buttons, links, tags, captions
   ========================================================================== */
.container {
    width: min(100% - clamp(2rem, 8vw, 5rem), var(--wrap));
    margin-inline: auto;
}

.section-space {
    padding-block: clamp(3.5rem, 8vw, 7rem);
}

/* Two spaced sections in a row share one gap instead of doubling it */
.section-space + .section-space {
    padding-top: 0;
}

/* Skip link: hidden above the page until it receives keyboard focus */
.skip-link {
    position: absolute;
    top: -5rem;
    left: 1rem;
    z-index: 100;
    padding: .7rem 1.1rem;
    border-radius: 999px;
    background-color: var(--btn-bg);
    color: var(--btn-ink);
    font-weight: 650;
}

.skip-link:focus {
    top: 1rem;
}

.skip-link:hover {
    color: var(--btn-ink);
}

/* Section heading: title, then a short introduction underneath */
.section-head {
    max-width: 46rem;
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.section-head h2 {
    margin-bottom: .6rem;
}

.section-intro {
    margin: 0;
    color: var(--ink-2);
    font-size: 1.08rem;
}

/* Buttons: pill shape. On hover every button turns to Liquid Glass: it
   swells slightly like a lens, its fill becomes translucent and blurs what
   is behind it, a specular highlight forms along the top edge (::before)
   and a band of light sweeps across once (::after). Press feedback is
   instant (scale on :active). */
.button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .82rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background-color: var(--btn-bg);
    color: var(--btn-ink);
    font: 620 .96rem / 1.2 var(--sans);
    letter-spacing: .005em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .35s, color .2s, border-color .3s, box-shadow .35s, scale .3s var(--ease);
}

.button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image:
        radial-gradient(120% 80% at 50% -10%, rgb(255 255 255 / 55%), rgb(255 255 255 / 0%) 58%),
        linear-gradient(0deg, rgb(255 255 255 / 14%), rgb(255 255 255 / 0%) 40%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 75%), inset 0 -1px 0 rgb(255 255 255 / 22%), inset 0 0 0 1px rgb(255 255 255 / 22%);
    opacity: 0;
    transition: opacity .35s var(--ease);
}

.button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 55%;
    background-image: linear-gradient(100deg, rgb(255 255 255 / 0%) 15%, rgb(255 255 255 / 42%) 50%, rgb(255 255 255 / 0%) 85%);
    translate: -130% 0;
}

.button:hover {
    background-color: var(--btn-glass);
    color: var(--btn-ink);
    box-shadow: 0 14px 30px -12px rgb(15 46 33 / 60%);
    scale: 1.04;
    backdrop-filter: blur(14px) saturate(180%);
}

.button:hover::before {
    opacity: 1;
}

/* The light sweep plays on the way in only */
.button:hover::after {
    translate: 260% 0;
    transition: translate .9s var(--ease);
}

.button:active {
    scale: .97;
    transition-duration: .1s;
}

.button-secondary {
    border-color: var(--line-strong);
    background-color: transparent;
    color: var(--ink);
}

.button-secondary:hover {
    border-color: transparent;
    background-color: var(--lens);
    color: var(--ink);
    box-shadow: 0 12px 28px -14px rgb(14 26 20 / 40%);
}

.button-secondary::after,
.button-quiet::after {
    background-image: linear-gradient(100deg, rgb(30 107 71 / 0%) 15%, rgb(30 107 71 / 14%) 50%, rgb(30 107 71 / 0%) 85%);
}

.button-small {
    padding: .56rem 1.05rem;
    font-size: .88rem;
}

.button-quiet {
    background-color: transparent;
    color: var(--ink-2);
}

.button-quiet:hover {
    background-color: var(--lens);
    color: var(--ink);
    box-shadow: 0 10px 24px -14px rgb(14 26 20 / 35%);
}

/* On photographs: a solid light button and a clear glass button */
.button-light,
.page-hero .button,
.cta-glass .button,
.search-panel .button {
    background-color: var(--on-photo);
    color: #0f2e21;
}

.button-light:hover,
.page-hero .button:hover,
.cta-glass .button:hover,
.search-panel .button:hover {
    background-color: rgb(255 255 255 / 62%);
    color: #0f2e21;
    box-shadow: 0 14px 32px -10px rgb(0 0 0 / 50%);
}

.button-glass,
.page-hero .button-ghost {
    border-color: transparent;
    background-color: var(--glass-clear);
    color: #ffffff;
    box-shadow: var(--rim-clear);
    backdrop-filter: blur(18px) saturate(170%);
}

.button-glass:hover,
.page-hero .button-ghost:hover {
    background-color: rgb(255 255 255 / 28%);
    color: #ffffff;
    box-shadow: var(--rim-clear), 0 14px 32px -12px rgb(0 0 0 / 50%);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    margin-top: 1.6rem;
}

/* Text link: underline grows from the left on hover */
.text-link {
    display: inline-block;
    padding-bottom: 2px;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1.5px;
    color: var(--leaf);
    font-weight: 620;
    text-decoration: none;
    transition: background-size .35s var(--ease), color .2s;
}

.text-link:hover {
    background-size: 100% 1.5px;
}

/* Family name with a small colour dot */
.family-tag {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--accent);
    font-size: .875rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
}

.family-tag::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background-color: var(--accent);
}

a.family-tag:hover {
    color: var(--accent);
    text-decoration: underline;
}

.family-tagline {
    margin-bottom: .6rem;
    color: var(--accent);
    font-weight: 650;
}

/* Photo captions over an image: a small pane of clear glass in the lower
   corner holds what the photograph shows and who took it (the credit the
   assignment asks for, immediately after the material) */
.card-media,
.family-photo,
.feature-media,
.related-media,
.chapter-media,
.video-media,
.story-media,
.hero-media {
    position: relative;
}

.card-media figcaption,
.family-photo figcaption,
.feature-media figcaption,
.related-media figcaption,
.chapter-media figcaption,
.video-media figcaption,
.story-media figcaption {
    position: absolute;
    bottom: .75rem;
    left: .75rem;
    max-width: calc(100% - 1.5rem);
    margin: 0;
    padding: .45rem .8rem .5rem;
    border-radius: 1rem;
    background-color: rgb(8 20 14 / 52%);
    color: #ffffff;
    box-shadow: var(--rim-clear);
    backdrop-filter: blur(14px) saturate(170%);
}

figcaption .cap {
    display: block;
    font-size: .8125rem;
    font-weight: 650;
    line-height: 1.35;
}

figcaption .credit {
    display: block;
    font-size: .78rem;
    line-height: 1.4;
    opacity: .88;
}

figcaption .credit a {
    color: inherit;
}


/* ==========================================================================
   05 / Site header and main menu
   The menu has its own styles: a floating capsule of glass that stays at the
   top of the window while the page scrolls underneath it. The logo is the
   only link back to the home page. The glass is drawn by ::before so that
   the Profiles drop-down can blur the page behind it too.
   ========================================================================== */
.site-header {
    position: fixed;
    top: .85rem;
    left: 50%;
    z-index: 50;
    width: max-content;
    max-width: calc(100% - 1.5rem);
    translate: -50% 0;
}

.header-bar {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: .25rem;
    max-width: 100%;
    padding: .34rem;
    border-radius: 999px;
}

/* Menu background colour: the glass capsule itself */
.header-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--glass);
    box-shadow: var(--glass-rim), var(--glass-lift);
    backdrop-filter: var(--glass-blur);
}

/* Logo: drawn by a CSS background image (styles/images/rimba-mark.svg) */
.brand {
    display: flex;
    flex: none;
    align-items: center;
    gap: .55rem;
    padding: .28rem .85rem .28rem .28rem;
    border-radius: 999px;
    color: var(--ink);
    font-size: .98rem;
    font-stretch: 118%;
    font-weight: 760;
    letter-spacing: -.03em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .3s, box-shadow .3s, scale .3s var(--ease);
}

.brand-mark {
    width: 2.05rem;
    height: 2.05rem;
    background: url("images/rimba-mark.svg") center / contain no-repeat;
    transition: rotate .4s var(--ease);
}

.brand:hover {
    background-color: var(--lens);
    color: var(--ink);
    box-shadow: var(--lens-rim);
    scale: 1.03;
}

.brand:hover .brand-mark {
    rotate: -14deg;
}

.main-nav {
    padding-left: .35rem;
    border-left: 1px solid var(--line-strong);
}

.nav-list {
    display: flex;
    gap: .1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-list a {
    display: block;
    padding: .56rem .95rem;
    border-radius: 999px;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 560;
    letter-spacing: .005em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .3s, color .2s, box-shadow .3s, scale .3s var(--ease);
}

/* Hover: a small lens of brighter glass forms under the pointer */
.nav-list a:hover {
    background-color: var(--lens);
    color: var(--ink);
    box-shadow: var(--lens-rim);
    scale: 1.04;
}

/* Current page (and current section): a brighter lens inside the glass */
.nav-list a[aria-current] {
    background-color: rgb(255 255 255 / 78%);
    color: var(--leaf);
    font-weight: 660;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 90%), 0 1px 4px rgb(14 26 20 / 14%);
}

/* CSS-only drop-down under Profiles */
.nav-dropdown {
    position: relative;
}

.nav-dropdown > a::after {
    content: "";
    display: inline-block;
    width: .34em;
    height: .34em;
    margin-left: .5em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    rotate: 45deg;
    translate: 0 -.22em;
    opacity: .7;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + .75rem);
    left: 50%;
    min-width: 12.5rem;
    margin: 0;
    padding: .4rem;
    border-radius: 1.4rem;
    background-color: var(--glass-thick);
    box-shadow: var(--glass-rim), 0 26px 50px -14px rgb(14 26 20 / 34%);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    translate: -50% -.4rem;
    scale: .94;
    transform-origin: 50% 0;
    backdrop-filter: blur(26px) saturate(190%);
    transition: opacity .2s var(--ease), translate .22s var(--ease), scale .22s var(--ease), visibility .2s;
}

/* Invisible bridge so the pointer can cross the gap into the menu */
.dropdown-menu::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: .9rem;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    visibility: visible;
    opacity: 1;
    translate: -50% 0;
    scale: 1;
}

.nav-list .dropdown-menu a {
    padding: .66rem .9rem;
    border-radius: 1rem;
}

.nav-list .dropdown-menu a:hover {
    scale: 1.02;
}

.account-links {
    display: flex;
    flex: none;
    align-items: center;
    gap: .2rem;
    margin-left: .2rem;
    padding-left: .45rem;
    border-left: 1px solid var(--line-strong);
}

.login-link {
    padding: .56rem .8rem;
    border-radius: 999px;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 560;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .3s, box-shadow .3s;
}

.login-link:hover {
    background-color: var(--lens);
    color: var(--ink);
    box-shadow: var(--lens-rim);
}

.login-link[aria-current] {
    color: var(--leaf);
    font-weight: 660;
}


/* ==========================================================================
   06 / Home page (index.html)
   ========================================================================== */

/* Hero: the rainforest fills the window; the project name is set in
   frosted glass letters, like the clock on a phone's lock screen */
.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 100svh;
    overflow: hidden;
    background-color: #0c2017;
    color: var(--on-photo);
    --focus: #bfe9cf;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Photo credit for the hero: a small line in the lower right corner */
.hero-media figcaption {
    position: absolute;
    right: var(--gutter);
    bottom: 1rem;
    z-index: 2;
    margin: 0;
    padding: .2rem .65rem;
    border-radius: 999px;
    background-color: rgb(8 20 14 / 48%);
    color: #f4f8f5;
}

/* Scrims: a light shade at the top for the menu, deeper at the bottom
   where the text sits */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(180deg, rgb(6 18 12 / 38%) 0%, rgb(6 18 12 / 0%) 22%),
        linear-gradient(0deg, rgb(6 18 12 / 78%) 0%, rgb(6 18 12 / 30%) 38%, rgb(6 18 12 / 0%) 62%);
}

.hero-content {
    padding-block: 7rem clamp(3.75rem, 9vh, 6rem);
}

/* The glass letters. Fallback: pale solid letters. Where background-clip:
   text is supported, the letters are filled with a frosted copy of the same
   photograph (styles/images/frost-hero.jpg, fixed to the window so it lines
   up with the real photograph) plus a specular sheen across the top. */
.hero .glass-title {
    width: fit-content;
    margin: 0;
    padding: .04em .05em .02em 0;
    color: #e9f3ec;
    font-size: clamp(4.2rem, 15.1vw, 16.5rem);
    font-stretch: 125%;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: .84;
    white-space: nowrap;
    filter: drop-shadow(0 0 .6px rgb(255 255 255 / 95%)) drop-shadow(0 -1px 0 rgb(255 255 255 / 45%)) drop-shadow(0 24px 40px rgb(3 14 8 / 55%));
}

@supports (background-clip: text) {
    .hero .glass-title {
        background:
            linear-gradient(174deg, rgb(255 255 255 / 75%) 0%, rgb(255 255 255 / 12%) 34%, rgb(255 255 255 / 0%) 60%, rgb(255 255 255 / 30%) 100%),
            url("images/frost-hero.jpg") center / cover fixed;
        background-clip: text;
        color: transparent;
    }
}

.hero-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2.5rem;
    margin-top: clamp(1.25rem, 3vw, 2.25rem);
    padding-left: .3rem;
}

.hero .lead {
    max-width: 30rem;
    margin: 0;
    color: rgb(244 248 245 / 90%);
}

.hero .button-row {
    margin: 0;
}

/* The living taxonomy: one tree for the whole collection. Nested lists
   form the tree; grid columns line the three levels up under their
   headings; ::before and ::after draw the branch lines. :has() lets a
   branch react to the pointer or keyboard focus anywhere inside it. */
.tree-section {
    padding-block: clamp(4rem, 8vw, 6.5rem);
    background:
        linear-gradient(rgb(6 18 12 / 48%), rgb(6 18 12 / 48%)),
        var(--mist-2) url("images/canopy-blur.jpg") center / cover;
}

.tree-head {
    max-width: 44rem;
    margin-bottom: 1.6rem;
    color: #ffffff;
}

.tree-head .section-intro {
    color: rgb(255 255 255 / 88%);
}

/* The sheet of glass that holds the tree; the right-hand strip is kept
   free for the card that describes the family under the pointer */
.tree-frame {
    --col-f: 13.5rem;
    --col-g: 11rem;
    --gap: 3rem;
    --pad: clamp(1.5rem, 3vw, 2.5rem);
    position: relative;
    padding: var(--pad) calc(var(--pad) * 2 + 20rem) var(--pad) var(--pad);
    border-radius: var(--r-sheet);
    background-color: var(--glass-thick);
    box-shadow: var(--glass-rim), 0 40px 80px -40px rgb(4 20 12 / 60%);
}

/* Level headings: 4 families, 8 genera, 16 species */
.tree-levels {
    display: grid;
    grid-template-columns: var(--col-f) var(--col-g) auto;
    column-gap: var(--gap);
    margin: 0 0 1rem;
    padding: 0 0 .8rem;
    border-bottom: 1px solid var(--line-strong);
    list-style: none;
}

.tree-levels a {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    color: var(--ink-2);
    font-weight: 620;
    text-decoration: none;
}

.tree-levels strong {
    color: var(--canopy);
    font-variant-numeric: tabular-nums;
    font-size: 2.4rem;
    font-stretch: 125%;
    font-weight: 780;
    letter-spacing: -.04em;
    line-height: 1;
    transition: color .3s;
}

.tree-levels a:hover strong {
    color: var(--leaf);
}

.tree {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A family row: its node, then its two genera */
.tree-family {
    --branch: color-mix(in srgb, var(--accent) 40%, transparent);
    display: grid;
    grid-template-columns: var(--col-f) auto;
    column-gap: var(--gap);
    align-items: center;
    transition: opacity .3s var(--ease);
}

.tree-branch {
    position: relative;
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Stub from the parent node to the branch's vertical line */
.tree-branch::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--gap) * -1);
    width: calc(var(--gap) / 2);
    border-top: 2px solid var(--branch);
    transition: border-color .4s;
}

.tree-genus,
.tree-species {
    position: relative;
    padding-block: .12rem;
    transition: opacity .4s var(--ease);
}

.tree-genus {
    display: grid;
    grid-template-columns: var(--col-g) auto;
    column-gap: var(--gap);
    align-items: center;
}

/* Stub from the vertical line to each child */
.tree-genus::before,
.tree-species::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--gap) / -2);
    width: calc(var(--gap) / 2);
    border-top: 2px solid var(--branch);
    transition: border-color .4s;
}

/* The vertical line, drawn one child at a time */
.tree-genus::after,
.tree-species::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--gap) / -2);
    border-left: 2px solid var(--branch);
    transition: border-color .4s;
}

.tree-genus:first-child::after,
.tree-species:first-child::after {
    top: 50%;
}

.tree-genus:last-child::after,
.tree-species:last-child::after {
    bottom: 50%;
}

/* Nodes: family pills, genus pills, species names */
.node {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.2;
    transition: background-color .3s, color .3s, box-shadow .3s, scale .3s var(--ease);
}

.node-family {
    padding: .62rem .95rem;
    background-color: var(--surface);
    font-size: 1rem;
    font-weight: 700;
    box-shadow: var(--shadow-card);
}

.node-family::before {
    content: "";
    flex: none;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background-color: var(--accent);
}

.node-genus {
    padding: .48rem .9rem;
    background-color: color-mix(in srgb, var(--accent) 10%, var(--surface));
    font-size: .95rem;
    font-weight: 620;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

.node-species {
    width: fit-content;
    padding: .24rem .7rem;
    color: var(--ink-2);
    font-size: .92rem;
}

/* Lighting a branch. Other families dim; within the lit family the other
   genus dims when one genus is chosen, and likewise for species. */
.tree:has(.tree-family:is(:hover, :focus-within)) .tree-family:not(:hover, :focus-within) {
    opacity: .22;
}

.tree-family:has(.tree-genus:is(:hover, :focus-within)) .tree-genus:not(:hover, :focus-within),
.tree-genus:has(.tree-species:is(:hover, :focus-within)) .tree-species:not(:hover, :focus-within) {
    opacity: .32;
}

.tree-family:is(:hover, :focus-within) {
    --branch: var(--accent);
}

.tree-family:is(:hover, :focus-within) .node-family {
    background-color: var(--accent);
    color: #ffffff;
    scale: 1.03;
}

.tree-family:is(:hover, :focus-within) .node-family::before {
    background-color: #ffffff;
}

.tree-genus:is(:hover, :focus-within) .node-genus {
    background-color: color-mix(in srgb, var(--accent) 24%, var(--surface));
    box-shadow: inset 0 0 0 1.5px var(--accent);
}

.node-species:hover,
.node-species:focus-visible {
    background-color: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-card);
}

/* The card that describes the family under the pointer, and the hint
   shown when nothing is chosen. Both sit in the strip on the right. */
.tree-card,
.tree-hint {
    position: absolute;
    top: var(--pad);
    right: var(--pad);
    width: 20rem;
    padding: 1.6rem 1.6rem 1.4rem;
    border-radius: var(--r-card);
    background-color: var(--surface);
    box-shadow: var(--shadow-card-hover);
    transition: opacity .3s var(--ease), translate .3s var(--ease), visibility .3s;
}

.tree-card {
    opacity: 0;
    visibility: hidden;
    translate: 0 .6rem;
}

.tree-card p,
.tree-hint p {
    margin-bottom: .7rem;
    font-size: .95rem;
}

.tree-card-name {
    color: var(--ink);
    font-size: 1.45rem;
    font-stretch: 108%;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.tree-card .tree-card-name {
    font-size: 1.45rem;
}

.tree-card-tagline {
    color: var(--accent);
    font-weight: 650;
}

.tree-card .tree-card-count {
    margin: 0;
    color: var(--ink-2);
    font-size: .875rem;
}

.tree-family:is(:hover, :focus-within) .tree-card {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
}

.tree-frame:has(.tree-family:is(:hover, :focus-within)) .tree-hint {
    opacity: 0;
}

/* Four family chapters. Each card sticks below the menu; the next card
   scrolls up and settles over it, a little lower, so the edges of the
   earlier cards stay visible like a stack. */
.chapters {
    padding-block: clamp(4rem, 9vw, 7rem) clamp(2rem, 5vw, 4rem);
}

.chapter-stack {
    display: grid;
    gap: 14svh;
    padding-bottom: 6svh;
}

.chapter {
    --i: 0;
    position: sticky;
    top: calc(6rem + var(--i) * 1.25rem);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    min-height: min(70svh, 40rem);
    overflow: hidden;
    border-radius: var(--r-sheet);
    background-color: var(--surface);
    box-shadow: 0 -10px 30px -22px rgb(14 26 20 / 30%), 0 40px 70px -40px rgb(14 26 20 / 45%);
}

.chapter:nth-child(2) {
    --i: 1;
}

.chapter:nth-child(3) {
    --i: 2;
}

.chapter:nth-child(4) {
    --i: 3;
}

.chapter-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chapter-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4vw, 3.5rem);
}

.chapter-copy h3 {
    margin-bottom: .45rem;
    font-size: clamp(2.2rem, 3.6vw, 3.3rem);
    font-stretch: 108%;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.02;
}

.chapter-copy .family-tagline {
    margin-bottom: 1.1rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.chapter-copy > p:not(.family-tagline, .source-note) {
    max-width: 34rem;
    color: var(--ink-2);
}

.chapter-copy .button {
    align-self: flex-start;
    margin-top: .5rem;
}

/* The identification clue: set off by a hairline, not a box inside the card */
.chapter-clue {
    padding-top: .9rem;
    border-top: 1px solid var(--line);
    font-size: .98rem;
}

.chapter-clue strong {
    color: var(--accent);
}

.genus-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.genus-chips li {
    padding: .25rem .8rem;
    border-radius: 999px;
    background-color: var(--mist);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    font-size: .9rem;
}

/* How an observation begins: sticky copy beside three stacked steps */
.how-section {
    padding-block: clamp(3rem, 7vw, 6rem);
}

.how-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(2rem, 6vw, 6rem);
}

.how-copy {
    position: sticky;
    top: 7rem;
}

.how-copy > p:first-of-type {
    color: var(--ink-2);
    font-size: 1.12rem;
}

/* The three steps hang from one branch, drawn like the lines of the
   taxonomy tree: a numbered node per step, a line joining them */
.step-list {
    display: grid;
    margin: 0;
    padding: .4rem 0 0;
    list-style: none;
    counter-reset: step;
}

.step-list li {
    position: relative;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: .35rem 1.5rem;
    padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
    counter-increment: step;
}

.step-list li:last-child {
    padding-bottom: 0;
}

.step-list li::before {
    content: counter(step);
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--surface);
    box-shadow: inset 0 0 0 2px var(--leaf), 0 10px 24px -14px rgb(15 46 33 / 55%);
    color: var(--leaf);
    font-size: 1.15rem;
    font-weight: 720;
    font-variant-numeric: tabular-nums;
}

.step-list li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 3.6rem;
    bottom: .6rem;
    left: calc(1.5rem - 1px);
    width: 2px;
    border-radius: 1px;
    background-color: color-mix(in srgb, var(--leaf) 35%, transparent);
}

.step-list h3 {
    margin: .55rem 0 0;
    font-size: clamp(1.3rem, 1.9vw, 1.6rem);
    font-weight: 660;
    letter-spacing: -.02em;
}

.step-list p {
    max-width: 30rem;
    margin: 0;
    color: var(--ink-2);
}

/* Call to action: glass panel over sunlit Horsfieldia leaves */
.cta-band {
    padding-bottom: clamp(3.5rem, 8vw, 7rem);
}

.cta-band .container {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(24rem, 40vw, 32rem);
    padding: clamp(1rem, 4vw, 3.5rem);
    border-radius: var(--r-sheet);
    background: #1d3a1c url("images/cta-leaves.jpg") 60% 45% / cover no-repeat;
    box-shadow: var(--shadow-card);
}

.cta-glass {
    max-width: 29rem;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    border-radius: 1.6rem;
    background-color: rgb(10 26 18 / 34%);
    color: #ffffff;
    box-shadow: var(--rim-clear), 0 24px 50px -18px rgb(0 0 0 / 55%);
    backdrop-filter: blur(24px) saturate(160%);
    --focus: #bfe9cf;
}

.cta-glass p {
    color: rgb(255 255 255 / 86%);
}

.cta-glass .button {
    margin-top: .6rem;
}

/* Credit lines that sit on a photograph (CTA band, page headers) */
.cta-credit,
.hero-credit {
    position: absolute;
    right: clamp(1rem, 2vw, 1.5rem);
    bottom: .9rem;
    z-index: 2;
    margin: 0;
    padding: .2rem .65rem;
    border-radius: 999px;
    background-color: rgb(8 20 14 / 48%);
    color: #ffffff;
    font-size: .78rem;
}

.cta-credit a,
.hero-credit a {
    color: inherit;
}

/* Form pages: the form sheet rises over the bottom of the header, so the
   header's photo credit sits above the sheet */
.hero-join .hero-credit {
    bottom: 5.75rem;
}

/* The people behind the guide, beside the video demonstration */
.behind {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: stretch;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.behind-team {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.team-strip {
    display: grid;
    gap: .6rem;
    width: 100%;
    margin: 1.75rem 0 1.5rem;
    padding: 0;
    list-style: none;
}

.team-strip a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem .9rem .7rem .7rem;
    border-radius: 1.25rem;
    background-color: var(--surface);
    color: var(--ink);
    text-decoration: none;
    box-shadow: var(--shadow-card);
    transition: box-shadow .3s, translate .3s var(--ease);
}

.team-strip a:hover {
    box-shadow: var(--shadow-card-hover);
    translate: .25rem 0;
}

.team-strip img {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    object-fit: cover;
}

.team-strip span {
    display: grid;
}

.team-strip em {
    color: var(--ink-2);
    font-size: .9rem;
    font-style: normal;
}

.video-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 30rem;
    overflow: hidden;
    border-radius: var(--r-sheet);
    background-color: #1b3025;
    box-shadow: var(--shadow-card-hover);
}

.video-media {
    position: absolute;
    inset: 0;
}

.video-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-media figcaption {
    top: .75rem;
    bottom: auto;
}

.video-copy {
    position: relative;
    margin: .9rem;
    padding: 1.4rem 1.5rem;
    border-radius: 1.5rem;
    background-color: rgb(8 20 14 / 40%);
    color: #ffffff;
    box-shadow: var(--rim-clear);
    backdrop-filter: blur(22px) saturate(160%);
    --focus: #bfe9cf;
}

.video-copy p {
    color: rgb(255 255 255 / 86%);
}

/* Play symbol drawn with CSS: a triangle inside a glass circle */
.play-mark {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 18%);
    box-shadow: var(--rim-clear);
}

.play-mark::before {
    content: "";
    translate: .12rem 0;
    border-top: .55rem solid transparent;
    border-bottom: .55rem solid transparent;
    border-left: .9rem solid #ffffff;
}


/* ==========================================================================
   07 / Page headers
   Every inner page opens with its own header, and the heights keep a
   rhythm: the home page fills the window, Explore is tall, the three
   levels are medium, species and team pages are medium-short, forms are
   short and documentation pages are a low band of text without a photo.
   ========================================================================== */
.page-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    padding-block: 7.5rem clamp(3rem, 6vw, 4.75rem);
    background-color: #0d2419;
    background-position: center;
    background-size: cover;
    color: var(--on-photo);
    --focus: #bfe9cf;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(180deg, rgb(6 18 12 / 42%) 0%, rgb(6 18 12 / 5%) 26%),
        linear-gradient(0deg, rgb(6 18 12 / 86%) 0%, rgb(6 18 12 / 40%) 45%, rgb(6 18 12 / 0%) 75%);
}

.hero-tall {
    min-height: 78svh;
}

.hero-mid {
    min-height: 60svh;
}

.hero-short {
    min-height: 46svh;
    padding-bottom: 7rem;
}

/* Team page: the heading is centred over the photograph */
.hero-centred {
    min-height: 56svh;
    text-align: center;
}

.hero-centred .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-centred .lead {
    margin-inline: auto;
}

/* Photographs behind the headers (styles/images/) */
.hero-explore {
    background-image: url("images/hero-explore.jpg");
}

.hero-families {
    background-image: url("images/hero-families.jpg");
}

.hero-genera {
    background-image: url("images/hero-genera.jpg");
}

.hero-species {
    background-image: url("images/hero-species.jpg");
}

.hero-identify {
    background-image: url("images/hero-identify.jpg");
    background-position: 60% 40%;
}

.hero-community {
    background-image: url("images/hero-community.jpg");
}

.hero-join {
    background-image: url("images/hero-join.jpg");
    background-position: center 75%;
}

.hero-team {
    background-image: url("images/hero-team.jpg");
}

.page-hero h1 {
    max-width: 17ch;
}

.page-hero .lead {
    margin-bottom: 0;
    color: rgb(244 248 245 / 86%);
}

.page-hero .button-row {
    margin-top: 1.75rem;
}

.page-hero a:not(.button) {
    color: #ffffff;
}

/* Documentation pages: a low band of text on the mist, with the
   topographic lines and no photograph */
.hero-docs {
    min-height: 0;
    padding-block: 8.25rem 3rem;
    border-bottom: 1px solid var(--line);
    background-color: var(--mist-2);
    background-image: url("images/contours-dark.svg");
    background-position: center 40%;
    background-size: 100rem auto;
    color: var(--ink);
    --focus: #1e6b47;
}

.hero-docs::before {
    background-image: radial-gradient(50rem 18rem at 88% 0%, rgb(30 107 71 / 12%), rgb(30 107 71 / 0%));
}

.hero-docs h1 {
    max-width: none;
    font-size: clamp(2.5rem, 4.4vw, 3.9rem);
}

.hero-docs .lead {
    color: var(--ink-2);
}

/* Species pages: the classification as a capsule of clear glass, each
   level a link back up the tree */
.breadcrumbs ol {
    display: inline-flex;
    align-items: center;
    margin: 0 0 1.1rem;
    padding: .42rem .9rem;
    border-radius: 999px;
    background-color: var(--glass-clear);
    color: #ffffff;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: var(--rim-clear);
    backdrop-filter: blur(16px) saturate(170%);
}

/* The level map: where this page sits on the tree. Families, genera and
   species joined by a line; the current level is lit. */
.level-map ol {
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 2rem 0 0;
    padding: .35rem;
    border-radius: 999px;
    background-color: var(--glass-clear);
    box-shadow: var(--rim-clear);
    list-style: none;
    backdrop-filter: blur(18px) saturate(170%);
}

.level-map li {
    display: flex;
    align-items: center;
}

.level-map li + li::before {
    content: "";
    width: 2rem;
    height: 2px;
    margin-inline: .15rem;
    background-image: linear-gradient(90deg, rgb(255 255 255 / 25%), rgb(255 255 255 / 70%));
}

.level-map a {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .3s, color .3s, scale .3s var(--ease);
}

.level-map strong {
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
    font-stretch: 125%;
    font-weight: 780;
    letter-spacing: -.03em;
}

.page-hero .level-map a:hover {
    background-color: rgb(255 255 255 / 18%);
    color: #ffffff;
    scale: 1.04;
}

.page-hero .level-map a[aria-current] {
    background-color: var(--on-photo);
    color: #0f2e21;
    box-shadow: 0 6px 18px -6px rgb(0 0 0 / 45%);
}

/* Identify page: three numbered steps that overlap the header edge */
.discovery-steps {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .25rem;
    max-width: 44rem;
    margin-top: -1.75rem;
    padding: .3rem;
    border-radius: 999px;
    background-color: var(--glass-thick);
    box-shadow: var(--glass-rim), var(--glass-lift);
    backdrop-filter: var(--glass-blur);
}

.discovery-steps a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .66rem .9rem;
    border-radius: 999px;
    color: var(--ink);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .3s, box-shadow .3s;
}

.discovery-steps a:hover {
    background-color: var(--lens);
    color: var(--ink);
    box-shadow: var(--lens-rim);
}

.discovery-steps span {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: var(--leaf-soft);
    color: var(--leaf);
    font-size: .8rem;
    font-weight: 700;
}


/* ==========================================================================
   08 / Explorer pages: paths, families, genera, next step
   ========================================================================== */

/* explore.html: the page divides the guide into its three levels. Each
   tile shows the photograph that heads that level's own page. */
.path-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(17rem, 21vw));
    gap: clamp(.75rem, 1.5vw, 1.1rem);
}

.path-card {
    display: flex;
    align-items: flex-end;
    padding: clamp(.7rem, 1.4vw, .95rem);
    border-radius: var(--r-sheet);
    background-color: #1b3025;
    background-position: center;
    background-size: cover;
    color: #ffffff;
    box-shadow: var(--shadow-card);
    --focus: #bfe9cf;
}

.path-families {
    grid-row: span 2;
    background-image: url("images/hero-families.jpg");
}

.path-genera {
    background-image: url("images/hero-genera.jpg");
}

.path-species {
    background-image: url("images/hero-species.jpg");
}

.path-glass {
    width: 100%;
    padding: clamp(1.1rem, 2vw, 1.5rem);
    border-radius: 1.4rem;
    background-color: var(--glass-smoke);
    box-shadow: var(--rim-clear), 0 12px 30px -12px rgb(0 0 0 / 45%);
    backdrop-filter: blur(20px) saturate(170%);
}

.path-card h3 {
    margin-bottom: .3rem;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-stretch: 110%;
}

.path-card p {
    max-width: 30rem;
    margin-bottom: 1rem;
    color: rgb(255 255 255 / 88%);
}

.path-credit {
    margin: .9rem 0 0;
    color: var(--ink-2);
    font-size: .8125rem;
}

.path-credit a {
    color: inherit;
}

/* Text beside a photograph */
.split-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}

.split-feature > div > p:not(.source-note) {
    color: var(--ink-2);
    font-size: 1.08rem;
}

.feature-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-sheet);
    object-fit: cover;
    box-shadow: var(--shadow-card-hover);
}

/* explore1.html: the four families as large cards, two per row */
.family-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.family-detail {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r-sheet);
    background-color: var(--surface);
    box-shadow: var(--shadow-card);
}

.family-photo img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.family-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.4rem clamp(1.4rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.2rem);
}

.family-copy h2 {
    margin-bottom: .2rem;
}

.family-copy .button-row {
    margin-top: auto;
    padding-top: .75rem;
}

/* explore2.html: a labelled row of chips to jump between genera */
.genus-index {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-top: 3rem;
}

.genus-index p {
    margin: 0;
    color: var(--ink-2);
    font-weight: 620;
}

.genus-index ul {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.genus-index a {
    display: block;
    padding: .42rem .95rem;
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--accent);
    font-weight: 620;
    text-decoration: none;
    box-shadow: var(--shadow-card);
    transition: box-shadow .3s, translate .3s var(--ease);
}

.genus-index a:hover {
    box-shadow: var(--shadow-card-hover);
    translate: 0 -2px;
}

/* Eight genus panels, two per row. Each lists its two species. */
.genus-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding-block: 2rem clamp(3.5rem, 8vw, 6rem);
}

.genus-panel {
    padding: clamp(1.4rem, 2.5vw, 2rem);
    border-radius: var(--r-sheet);
    background-color: var(--surface);
    box-shadow: var(--shadow-card);
}

.genus-head h2 {
    margin-bottom: .45rem;
    font-size: clamp(1.9rem, 3vw, 2.5rem);
}

.genus-line {
    color: var(--ink-2);
    font-size: .98rem;
}

.genus-species {
    display: grid;
    gap: 1.1rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.species-row {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}

.row-media img {
    width: 8rem;
    height: 8rem;
    border-radius: 1.1rem;
    object-fit: cover;
}

.row-media figcaption {
    width: 8rem;
    margin-top: .4rem;
    font-size: .75rem;
}

.species-row h3 {
    margin-bottom: .15rem;
    font-size: 1.2rem;
}

.species-row h3 a {
    color: var(--ink);
    text-decoration: none;
}

.species-row h3 a:hover {
    color: var(--leaf);
}

.row-desc {
    margin-bottom: .5rem;
    font-size: .95rem;
    line-height: 1.55;
}

/* Next step: a single wide link at the end of each Explore page */
.next-step {
    padding-block: clamp(3rem, 7vw, 5rem);
}

.next-step a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 1.5rem;
    padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3.5vw, 2.8rem);
    border-radius: var(--r-sheet);
    background-color: var(--btn-bg);
    color: var(--btn-ink);
    text-decoration: none;
    transition: background-color .35s, box-shadow .35s, scale .3s var(--ease);
}

.next-step a:hover {
    background-color: var(--btn-bg-hover);
    color: var(--btn-ink);
    box-shadow: 0 24px 50px -24px rgb(15 46 33 / 70%);
    scale: 1.01;
}

.next-step a:active {
    scale: .99;
}

.next-step span {
    font-weight: 620;
    opacity: .75;
}

.next-step strong {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-stretch: 110%;
    font-weight: 700;
    letter-spacing: -.03em;
}

.next-step em {
    font-style: normal;
    opacity: .8;
}


/* ==========================================================================
   09 / Plant cards and the species filter
   ========================================================================== */
.plant-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r-card);
    background-color: var(--surface);
    box-shadow: var(--shadow-card);
    transition: box-shadow .3s, translate .3s var(--ease);
}

.plant-card:hover {
    box-shadow: var(--shadow-card-hover);
    translate: 0 -4px;
}

.card-media {
    overflow: hidden;
}

.card-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: scale .7s var(--ease);
}

.plant-card:hover .card-media img {
    scale: 1.04;
}

.card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1rem 1.2rem 1.25rem;
}

.card-meta {
    margin-bottom: .45rem;
}

.card-body h3 {
    margin-bottom: .15rem;
    font-size: 1.3rem;
}

.card-body h3 a {
    color: var(--ink);
    text-decoration: none;
}

.card-body h3 a:hover {
    color: var(--leaf);
}

.common-name {
    margin-bottom: .6rem;
    color: var(--ink-2);
    font-size: .95rem;
    font-weight: 560;
}

.card-text {
    font-size: .95rem;
    line-height: 1.55;
}

/* Region line with a small pin (styles/images/pin.svg) */
.location {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--ink-2);
    font-size: .9rem;
}

.location::before {
    content: "";
    flex: none;
    width: .95rem;
    height: .95rem;
    background: url("images/pin.svg") center / contain no-repeat;
    opacity: .7;
}

.card-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: auto 0 0;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}

.card-links .source-note {
    font-size: .8125rem;
}

/* explore3.html: the family filter drawn as a row of pills */
.species-filter {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.species-filter legend {
    margin-bottom: .9rem;
    padding: 0;
    color: var(--ink-2);
    font-size: .95rem;
    font-weight: 600;
}

/* The radio buttons stay in the page for keyboard use but are not drawn */
.filter-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.species-filter label {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 .3rem .55rem 0;
    padding: .6rem 1rem .6rem .85rem;
    border-radius: 999px;
    background-color: var(--surface);
    box-shadow: var(--shadow-card);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .25s, color .25s, box-shadow .25s, scale .3s var(--ease);
}

.species-filter label:hover {
    box-shadow: var(--shadow-card-hover);
    scale: 1.03;
}

.species-filter label:active {
    scale: .97;
    transition-duration: .1s;
}

.species-filter label::before {
    content: "";
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background-color: var(--accent);
}

/* "All species" shows the four family colours in one dot */
.species-filter label[for="family-all"]::before {
    background-image: conic-gradient(var(--dipt) 0 25%, var(--laur) 0 50%, var(--burs) 0 75%, var(--myri) 0);
}

.species-filter label span {
    padding: .05rem .45rem;
    border-radius: 999px;
    background-color: var(--mist-2);
    color: var(--ink-2);
    font-size: .8rem;
}

.filter-input:checked + label {
    background-color: var(--btn-bg);
    color: var(--btn-ink);
}

.filter-input:checked + label span {
    background-color: rgb(255 255 255 / 18%);
    color: inherit;
}

.filter-input:focus-visible + label {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.filter-status {
    margin: .75rem 0 1.75rem;
    color: var(--ink-2);
    font-weight: 600;
}

.filter-status span {
    display: none;
}

#family-all:checked ~ .filter-status .status-all,
#family-dipterocarpaceae:checked ~ .filter-status .status-dipterocarpaceae,
#family-lauraceae:checked ~ .filter-status .status-lauraceae,
#family-burseraceae:checked ~ .filter-status .status-burseraceae,
#family-myristicaceae:checked ~ .filter-status .status-myristicaceae {
    display: inline;
}

/* The status line takes the colour of the chosen family */
#family-dipterocarpaceae:checked ~ .filter-status {
    color: var(--dipt);
}

#family-lauraceae:checked ~ .filter-status {
    color: var(--laur);
}

#family-burseraceae:checked ~ .filter-status {
    color: var(--burs);
}

#family-myristicaceae:checked ~ .filter-status {
    color: var(--myri);
}

/* Hide every card that does not belong to the chosen family */
#family-dipterocarpaceae:checked ~ .species-grid .plant-card:not(.dipterocarpaceae),
#family-lauraceae:checked ~ .species-grid .plant-card:not(.lauraceae),
#family-burseraceae:checked ~ .species-grid .plant-card:not(.burseraceae),
#family-myristicaceae:checked ~ .species-grid .plant-card:not(.myristicaceae) {
    display: none;
}

/* Intrinsic grid: 4 to 1 columns by available width */
.species-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
    gap: clamp(.9rem, 2vw, 1.3rem);
}

.filter-input:checked ~ .species-grid .plant-card {
    animation: card-in .3s var(--ease) both;
}


/* ==========================================================================
   10 / Species record pages
   The header is the plant's own photograph blurred into a colour field
   (styles/images/field-*.jpg), the way a music player uses album art. The
   sharp photograph then rises out of it, mounted like a specimen between
   two panes of glass, and is never enlarged beyond its original size.
   ========================================================================== */
.species-hero {
    min-height: 52svh;
    padding-bottom: clamp(7rem, 12vw, 9rem);
    background-color: #1a2b21;
}

.species-hero::before {
    background-image: linear-gradient(180deg, rgb(6 16 11 / 50%) 0%, rgb(6 16 11 / 22%) 30%, rgb(6 16 11 / 58%) 100%);
}

.species-hero h1 {
    max-width: none;
    font-size: clamp(2.8rem, 7vw, 6rem);
    font-stretch: 100%;
    letter-spacing: -.035em;
}

.field-vatica-rassak {
    background-image: url("images/field-vatica-rassak.jpg");
}

.field-vatica-mangachapoi {
    background-image: url("images/field-vatica-mangachapoi.jpg");
}

.field-dipterocarpus-grandiflorus {
    background-image: url("images/field-dipterocarpus-grandiflorus.jpg");
}

.field-dipterocarpus-kerrii {
    background-image: url("images/field-dipterocarpus-kerrii.jpg");
}

.field-actinodaphne-malaccensis {
    background-image: url("images/field-actinodaphne-malaccensis.jpg");
}

.field-actinodaphne-pruinosa {
    background-image: url("images/field-actinodaphne-pruinosa.jpg");
}

.field-beilschmiedia-madang {
    background-image: url("images/field-beilschmiedia-madang.jpg");
}

.field-beilschmiedia-kunstleri {
    background-image: url("images/field-beilschmiedia-kunstleri.jpg");
}

.field-canarium-odontophyllum {
    background-image: url("images/field-canarium-odontophyllum.jpg");
}

.field-canarium-littorale {
    background-image: url("images/field-canarium-littorale.jpg");
}

.field-dacryodes-rostrata {
    background-image: url("images/field-dacryodes-rostrata.jpg");
}

.field-dacryodes-laxa {
    background-image: url("images/field-dacryodes-laxa.jpg");
}

.field-horsfieldia-irya {
    background-image: url("images/field-horsfieldia-irya.jpg");
}

.field-horsfieldia-superba {
    background-image: url("images/field-horsfieldia-superba.jpg");
}

.field-myristica-fragrans {
    background-image: url("images/field-myristica-fragrans.jpg");
}

.field-myristica-iners {
    background-image: url("images/field-myristica-iners.jpg");
}

/* Breadcrumbs: the classification path in one glass capsule */
.breadcrumbs ol {
    flex-wrap: wrap;
    gap: .15rem .5rem;
    list-style: none;
}

.breadcrumbs li + li::before {
    content: "/";
    margin-right: .5rem;
    opacity: .55;
}

.breadcrumbs a {
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs [aria-current] {
    opacity: .8;
}

/* Photograph on the left rises into the header; the record sits beside it */
.species-detail {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.75rem, 5vw, 4.5rem);
    margin-top: clamp(-6rem, -8vw, -4.5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* The glass specimen plate: a pane of glass with a bright rim, a mat of
   space around the photograph and a museum-style label underneath */
.specimen-plate {
    position: sticky;
    top: 6rem;
    justify-self: center;
    width: fit-content;
    max-width: 100%;
    padding: .9rem .9rem 1rem;
    border-radius: 2rem;
    background-color: rgb(250 252 250 / 70%);
    box-shadow: var(--glass-rim), 0 2px 6px rgb(14 26 20 / 10%), 0 40px 80px -30px rgb(14 26 20 / 55%);
    backdrop-filter: blur(20px) saturate(170%);
}

.specimen-plate img {
    width: auto;
    max-height: 72svh;
    border-radius: 1.35rem;
    box-shadow: 0 0 0 1px rgb(14 26 20 / 8%);
}

.specimen-plate figcaption {
    margin: .8rem .35rem 0;
}

.specimen-plate .cap {
    color: var(--ink);
}

.specimen-label {
    margin-top: clamp(5.5rem, 9vw, 7.5rem);
}

.specimen-label h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

.specimen-label .lead {
    color: var(--ink);
}

/* Record facts: label and value pairs in a soft panel */
.record-facts {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    margin: 1.5rem 0;
    padding: .5rem 1.3rem;
    border-radius: var(--r-card);
    background-color: var(--surface);
    box-shadow: var(--shadow-card);
}

.record-facts dt,
.record-facts dd {
    margin: 0;
    padding: .8rem 0;
    border-bottom: 1px solid var(--line);
}

.record-facts dt {
    color: var(--ink-2);
    font-size: .92rem;
    font-weight: 600;
}

.record-facts dt:last-of-type,
.record-facts dd:last-of-type {
    border-bottom: 0;
}

/* Reading sections: comfortable measure for longer text */
.reading-section {
    max-width: 46rem;
    margin-inline: max(var(--gutter), (100% - var(--wrap)) / 2);
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.reading-section h2 {
    margin-top: 2.2rem;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.reading-section h2:first-child {
    margin-top: 0;
}

.reading-section ul {
    padding-left: 1.2rem;
}

.reading-section li {
    margin-bottom: .45rem;
}

details {
    margin-top: .75rem;
    border-radius: 1.1rem;
    background-color: var(--surface);
    box-shadow: var(--shadow-card);
}

summary {
    padding: 1rem 1.25rem;
    font-weight: 620;
    cursor: pointer;
}

summary::marker {
    color: var(--leaf);
}

details p,
details ol {
    margin: 0;
    padding: 0 1.25rem 1.1rem;
}

details ol {
    padding-left: 2.6rem;
}

/* Sister species: text and photograph in one card */
.related-species {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin-bottom: clamp(3.5rem, 8vw, 6rem);
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border-radius: var(--r-sheet);
    background-color: var(--surface);
    box-shadow: var(--shadow-card);
}

.related-species > div > p {
    color: var(--ink-2);
}

.related-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-card);
    object-fit: cover;
}


/* ==========================================================================
   11 / Field notes with the assessed <aside>
   Explorer, identify and contributor pages requirement: the aside is 30% of
   the page width and floats right, with a coloured border, margin and
   padding. The parent section is full width, so 30% here equals 30% of the
   window width. Each page has its own notes; the aside is a glass pane over
   a blurred forest photograph (styles/images/canopy-blur.jpg).
   ========================================================================== */
.field-notes {
    display: flow-root;
    width: 100%;
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
    background-color: var(--mist-2);
}

.field-aside {
    float: right;
    width: 30%;
    margin: 0 var(--gutter) 2rem 2.5rem;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    border: 2px solid #8fcca7;
    border-radius: var(--r-sheet);
    background:
        linear-gradient(165deg, rgb(255 255 255 / 30%) 0%, rgb(255 255 255 / 0%) 45%),
        linear-gradient(rgb(6 22 14 / 56%), rgb(6 22 14 / 56%)),
        url("images/canopy-blur.jpg") center / cover;
    color: rgb(255 255 255 / 92%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), 0 30px 60px -28px rgb(14 26 20 / 55%);
    --focus: #bfe9cf;
}

.field-aside h3 {
    color: #ffffff;
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    font-stretch: 108%;
}

.field-aside a {
    color: #ffffff;
}

/* The section heading spans the page; below it the main text flows in
   the remaining width beside the aside */
.notes-title,
.notes-copy {
    padding-left: max(var(--gutter), (100% - var(--wrap)) / 2);
}

.notes-title {
    margin-bottom: 1.6rem;
    padding-right: var(--gutter);
}

.notes-copy {
    display: flow-root;
}

.notes-copy > p:not(.source-note) {
    max-width: 44rem;
}

.notes-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-block: 2rem 1.5rem;
}

.notes-columns > div {
    padding: 1.5rem;
    border-radius: var(--r-card);
    background-color: var(--surface);
    box-shadow: var(--shadow-card);
}

/* Numbered steps */
.step-count {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: note;
}

.step-count li {
    display: flex;
    gap: .8rem;
    counter-increment: note;
}

.step-count li::before {
    content: counter(note);
    display: grid;
    flex: none;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background-color: var(--leaf-soft);
    color: var(--leaf);
    font-size: .82rem;
    font-weight: 700;
}

.glossary {
    margin: 0;
}

.glossary dt {
    font-weight: 650;
}

.glossary dd {
    margin: .1rem 0 .85rem;
    color: var(--ink-2);
    font-size: .95rem;
}


/* ==========================================================================
   12 / Tables
   ========================================================================== */

/* Wide tables scroll inside their own rounded frame on small screens */
.table-scroll {
    overflow-x: auto;
    border-radius: var(--r-card);
    background-color: var(--surface);
    box-shadow: var(--shadow-card);
}

.table-scroll + p {
    margin-top: 1.25rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .98rem;
}

caption {
    padding: 1.2rem 1.3rem .6rem;
    font-weight: 650;
    text-align: left;
}

th,
td {
    padding: .85rem 1.3rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

thead th {
    background-color: var(--mist);
    color: var(--ink-2);
    font-size: .875rem;
    font-weight: 620;
}

tbody tr:last-child > * {
    border-bottom: 0;
}

/* Rows that carry a family class show their family colour */
.data-table tbody th a {
    color: var(--accent, var(--leaf));
    font-weight: 650;
}


/* ==========================================================================
   13 / Identify and community pages
   ========================================================================== */

/* The upload panel and the search panel share one height */
.identify-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(1.25rem, 3vw, 2rem);
}

.identify-layout .form-panel {
    display: flex;
    flex-direction: column;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    border-radius: var(--r-sheet);
    background-color: var(--surface);
    box-shadow: var(--shadow-card);
}

.upload-area {
    display: grid;
    justify-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    padding: 2rem 1.25rem;
    border: 2px dashed var(--line-strong);
    border-radius: var(--r-card);
    background-color: var(--mist);
    text-align: center;
}

.upload-area:has(input:valid) {
    border-color: var(--ok);
    border-style: solid;
}

/* Upload symbol drawn with CSS: an arrow rising from a line */
.upload-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background-color: var(--leaf-soft);
    color: var(--leaf);
}

.upload-icon::before,
.upload-icon::after {
    content: "";
    grid-area: 1 / 1;
}

.upload-icon::before {
    width: .7rem;
    height: .7rem;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    rotate: 45deg;
    translate: 0 -.3rem;
}

.upload-icon::after {
    width: 2px;
    height: 1.2rem;
    background-color: currentColor;
    translate: 0 .15rem;
}

.upload-area label {
    font-weight: 650;
}

.upload-area p,
.upload-area small {
    margin: 0;
    color: var(--ink-2);
    font-size: .92rem;
}

.file-ready {
    display: none;
}

.upload-area:has(input:valid) .file-ready {
    display: block;
    color: var(--ok);
    font-weight: 600;
}

/* Name search: a dark glass panel over a blurred photograph */
.search-panel {
    display: flex;
    flex-direction: column;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    border-radius: var(--r-sheet);
    background:
        linear-gradient(rgb(6 22 14 / 58%), rgb(6 22 14 / 58%)),
        url("images/community-blur.jpg") center / cover;
    color: rgb(255 255 255 / 90%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 40%), var(--shadow-card);
    --focus: #bfe9cf;
}

.search-panel h2 {
    color: #ffffff;
}

.search-panel a:not(.button) {
    color: #ffffff;
}

.search-panel details {
    margin-top: auto;
    background-color: rgb(255 255 255 / 12%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%);
}

.search-panel summary::marker {
    color: #bfe9cf;
}

.search-form label {
    display: block;
    margin-bottom: .45rem;
    font-weight: 620;
}

.search-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.search-row input {
    flex: 1 1 12rem;
    min-width: 0;
    padding: .8rem 1rem;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 999px;
    background-color: rgb(255 255 255 / 92%);
    color: #0e1a14;
    font: inherit;
}

.search-row input:focus {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* Fixed teaching example: record card beside the photograph */
.split-feature .specimen-label {
    margin: 0;
}

/* Community notebook: three illustrative observations */
.observation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.9rem, 2vw, 1.3rem);
}

.observation-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r-card);
    background-color: var(--surface);
    box-shadow: var(--shadow-card);
}

.observer {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.2rem;
}

.observer h3 {
    margin: 0;
    font-size: 1.05rem;
}

.observer p {
    margin: 0;
    color: var(--ink-2);
    font-size: .875rem;
}

.avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .85rem;
    background-color: var(--accent);
    color: #ffffff;
    font-size: .82rem;
    font-weight: 700;
}

.observation-card blockquote {
    margin: .5rem 0 .9rem;
    font-size: 1.02rem;
    line-height: 1.55;
}

.observation-card .card-body > .text-link {
    align-self: flex-start;
    margin-top: auto;
}


/* ==========================================================================
   14 / Forms and validation feedback
   Each form is a thick glass sheet that rises into the page header and
   rests on a blurred photograph (styles/images/join-blur.jpg). Because the
   photograph is already blurred, the sheet needs no live blur.
   ========================================================================== */
.form-stage {
    padding-bottom: clamp(3.5rem, 8vw, 6rem);
    background: #173524 url("images/join-blur.jpg") center / cover;
}

.form-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    margin-top: -5rem;
}

.form-stage .form-panel {
    padding: clamp(1.4rem, 3.5vw, 2.75rem);
    border-radius: var(--r-sheet);
    background-color: var(--glass-thick);
    box-shadow: var(--glass-rim), 0 40px 80px -40px rgb(4 20 12 / 60%);
    backdrop-filter: blur(18px) saturate(160%);
}

.form-instructions {
    color: var(--ink-2);
    font-size: .92rem;
}

/* Honest demonstration notice with an "i" badge */
.notice {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 1rem;
    border-radius: 1rem;
    background-color: var(--leaf-soft);
    font-size: .92rem;
}

.notice::before {
    content: "i";
    display: grid;
    flex: none;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background-color: var(--leaf);
    color: #ffffff;
    font-size: .8rem;
    font-weight: 750;
}

/* The dialog is shown inline; closing it (on valid submit) reveals the receipt */
.form-dialog {
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: inherit;
}

.form-dialog[open] ~ .form-receipt {
    display: none;
}

.form-receipt {
    padding: 2.5rem 1rem 1rem;
    text-align: center;
    animation: rise .6s var(--ease) both;
}

.form-receipt .button-row {
    justify-content: center;
}

.success-mark {
    display: grid;
    place-items: center;
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background-color: var(--ok);
    color: #ffffff;
    font-size: 1.9rem;
    box-shadow: 0 0 0 .6rem var(--leaf-soft);
    animation: pop .6s var(--spring) .15s both;
}

fieldset {
    min-width: 0;
    margin: 0 0 1.75rem;
    padding: 0;
    border: 0;
}

legend {
    margin-bottom: 1rem;
    padding: 0;
    font-size: 1.12rem;
    font-weight: 660;
    letter-spacing: -.01em;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem 1.1rem;
}

.full-width {
    grid-column: 1 / -1;
}

.form-group {
    display: grid;
    align-content: start;
    gap: .38rem;
}

.form-group label,
.group-label {
    margin: 0;
    font-size: .95rem;
    font-weight: 620;
}

.form-group small {
    color: var(--ink-2);
    font-size: .85rem;
    line-height: 1.45;
}

/* Inputs are recessed wells in the glass */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: .95rem;
    background-color: #ffffff;
    color: #0e1a14;
    font: inherit;
    box-shadow: inset 0 1px 2px rgb(14 26 20 / 8%);
    caret-color: #1e6b47;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.form-group textarea {
    min-height: 9rem;
    resize: vertical;
}

/* Custom arrow for the drop-down lists */
.form-group select {
    padding-right: 2.75rem;
    background: #ffffff url("images/chevron.svg") right .9rem center / 1.1rem no-repeat;
    appearance: none;
    cursor: pointer;
}

.form-group :is(input, select, textarea):hover {
    border-color: rgb(14 26 20 / 34%);
}

/* Focus: the outline becomes a soft leaf halo */
.form-group :is(input, select, textarea):focus {
    border-color: var(--leaf);
    outline: none;
    box-shadow: 0 0 0 4px rgb(30 107 71 / 22%);
}

/* File inputs: a pill-shaped "Choose files" button */
.form-group input[type="file"],
.upload-area input[type="file"] {
    padding: .5rem;
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    margin-right: 1rem;
    padding: .55rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--btn-bg);
    color: var(--btn-ink);
    font: 620 .88rem / 1.2 var(--sans);
    cursor: pointer;
}

/* Feedback only after the visitor has interacted */
.field-error {
    display: none;
    color: var(--error);
    font-size: .875rem;
    font-weight: 620;
}

/* The same round badge as the "i" in the demonstration notice */
.field-error::before {
    content: "!";
    display: inline-grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: .45rem;
    border-radius: 50%;
    background-color: var(--error);
    color: #ffffff;
    font-size: .72rem;
    font-weight: 800;
    vertical-align: .1em;
}

.form-group input:user-invalid,
.form-group select:user-invalid,
.form-group textarea:user-invalid {
    border-color: var(--error);
    background-color: var(--error-soft);
}

.form-group input:user-invalid ~ .field-error,
.form-group select:user-invalid ~ .field-error,
.form-group textarea:user-invalid ~ .field-error {
    display: block;
}

/* Valid text-style fields receive a quiet tick (styles/images/check.svg) */
.form-group input:not([type="file"], [type="date"]):user-valid {
    padding-right: 2.75rem;
    border-color: var(--ok);
    background: #ffffff url("images/check.svg") right .9rem center / 1.15rem no-repeat;
}

.form-group select:user-valid,
.form-group textarea:user-valid,
.form-group input[type="date"]:user-valid {
    border-color: var(--ok);
}

/* Radio choices drawn as selectable tiles */
.choice-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    margin-top: .5rem;
}

.choice {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: .95rem;
    background-color: #ffffff;
    color: #0e1a14;
    font-weight: 560;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, scale .3s var(--ease);
}

.choice:hover {
    border-color: var(--leaf);
}

.choice:active {
    scale: .98;
    transition-duration: .1s;
}

.choice:has(input:checked) {
    border-color: var(--leaf);
    background-color: #e4f3ea;
}

.choice input,
.check-label input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--leaf);
}

.check-label {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-size: .95rem;
}

.check-label input {
    flex: none;
    margin-top: .2rem;
}

/* Login extras: remember for 30 days, and the forgotten-password link */
.login-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding: .85rem 1rem;
    border-radius: 1rem;
    background-color: var(--leaf-soft);
}

.forgot-link {
    font-size: .95rem;
    font-weight: 620;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: .5rem;
}

.form-aside-links {
    color: var(--ink-2);
    font-size: .95rem;
}

/* Side column: a smoked glass pane with a photograph and white text; it
   travels beside the form while the form is filled in */
.form-story {
    position: sticky;
    top: 6.5rem;
    padding: clamp(1rem, 2vw, 1.25rem) clamp(1rem, 2vw, 1.25rem) clamp(1.4rem, 3vw, 2rem);
    border-radius: var(--r-sheet);
    background-color: rgb(6 22 14 / 50%);
    color: rgb(255 255 255 / 90%);
    box-shadow: var(--rim-clear), 0 30px 60px -30px rgb(4 20 12 / 60%);
    --focus: #bfe9cf;
}

.story-media {
    margin-bottom: 1.4rem;
}

.story-media img {
    width: 100%;
    aspect-ratio: 16 / 11;
    border-radius: 1.4rem;
    object-fit: cover;
}

.form-story > h2,
.form-story > p,
.form-story > dl {
    margin-inline: clamp(.4rem, 1vw, .8rem);
}

.form-story h2 {
    color: #ffffff;
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
}

.form-story a {
    color: #ffffff;
}

.story-facts {
    margin-block: 1.5rem 0;
    padding-top: 1.2rem;
    border-top: 1px solid rgb(255 255 255 / 22%);
}

.story-facts dt {
    color: #ffffff;
    font-weight: 650;
}

.story-facts dd {
    margin: 0 0 .8rem;
    color: rgb(255 255 255 / 80%);
}

.story-facts dd:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   15 / Team and individual profile pages
   ========================================================================== */
.team-stage,
.profile-stage {
    background: #22301f url("images/team-blur.jpg") center / cover;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.9rem, 2vw, 1.3rem);
}

.team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.25rem 1.75rem;
    border-radius: var(--r-sheet);
    background-color: var(--glass-thick);
    text-align: center;
    box-shadow: var(--glass-rim), 0 30px 60px -30px rgb(20 20 4 / 55%);
    transition: translate .3s var(--ease);
}

.team-card:hover {
    translate: 0 -4px;
}

.team-card img {
    width: 8rem;
    height: 9.33rem;
    margin-bottom: 1.25rem;
    border-radius: 1.4rem;
    object-fit: cover;
    box-shadow: 0 0 0 4px rgb(255 255 255 / 80%), var(--shadow-card);
}

.team-card h2 {
    font-size: 1.5rem;
}

.team-card p {
    flex: 1;
    color: var(--ink-2);
}

/* One glass card holds the whole profile table */
.profile-card {
    max-width: 58rem;
    padding: clamp(1.1rem, 3.5vw, 2.75rem);
    border-radius: var(--r-sheet);
    background-color: var(--glass-thick);
    box-shadow: var(--glass-rim), 0 40px 80px -40px rgb(20 20 4 / 60%);
}

/* Profile requirement: name centred to the page, bold, font size 200% */
.profile-name {
    margin-bottom: 1.25rem;
    font-size: 200%;
    font-weight: bold;
    text-align: center;
}

.profile-card .table-scroll {
    box-shadow: none;
}

.profile-table caption {
    text-align: center;
}

/* Profile requirement: student number in Arial (sans-serif fallback) */
.student-number {
    font-family: Arial, sans-serif;
    letter-spacing: .04em;
}

/* Profile requirement: course colour given as an RGB number */
.profile-course {
    color: rgb(30, 107, 71);
    font-weight: 650;
}

/* The first row holds the photograph and introduction */
.profile-intro {
    min-width: 16rem;
}

.profile-intro p {
    margin: 0;
}

/* Profile requirement: floating photo, groove border, 20px padding */
.profile-photo {
    float: left;
    width: 11rem;
    margin: 0 1.5rem .75rem 0;
    padding: 20px;
    border: 8px groove #a8c9b4;
    border-radius: .5rem;
    background-color: #ffffff;
}

/* Profile table requirement: centred bold headings, hex cell colour */
.profile-table th {
    width: 12rem;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

.profile-table td {
    background-color: #f6f9f6;
    color: #0e1a14;
}

/* Profile requirement: mailto link centred at the bottom of the table */
.profile-table tfoot td {
    padding-block: 1.1rem;
    border-bottom: 0;
    background-color: #e2efe6;
    font-weight: 650;
    text-align: center;
}

.profile-table tfoot a {
    color: #1e6b47;
}


/* ==========================================================================
   16 / Documentation pages: enhancements, sources, sitemap
   ========================================================================== */

/* Screenshots of this website and other documentation figures */
/* Screenshots are shown at their natural size at most, never enlarged */
.screenshot img {
    width: auto;
}

.screenshot img,
.doc-figure img {
    border-radius: var(--r-card);
    box-shadow: 0 0 0 1px var(--line), var(--shadow-card-hover);
}

.screenshot,
.doc-figure {
    margin-block: 1.5rem;
}

.screenshot .cap,
.doc-figure .cap {
    color: var(--ink);
}

.enhancement-toc ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
}

.enhancement-toc a {
    display: grid;
    gap: .2rem;
    height: 100%;
    padding: 1.1rem 1.2rem;
    border-radius: 1.2rem;
    background-color: var(--surface);
    color: var(--ink);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    box-shadow: var(--shadow-card);
    transition: box-shadow .3s, translate .3s var(--ease);
}

.enhancement-toc a:hover {
    box-shadow: var(--shadow-card-hover);
    translate: 0 -3px;
}

.enhancement-toc span {
    color: var(--leaf);
    font-size: 1.5rem;
    font-stretch: 125%;
    font-weight: 780;
}

.enhancement-section {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 1.5rem;
    padding-block: clamp(2.75rem, 6vw, 4.5rem);
    border-bottom: 1px solid var(--line-strong);
}

.enhancement-number {
    position: sticky;
    top: 7rem;
    align-self: start;
    margin: 0;
    color: var(--leaf);
    font-size: 4.5rem;
    font-stretch: 125%;
    font-weight: 780;
    letter-spacing: -.04em;
    line-height: .9;
}

/* Each enhancement shows a screenshot of itself, alternating sides */
.enhancement-shot {
    max-width: 58rem;
}

.enhancement-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
}

.enhancement-columns h3 {
    margin-top: 1.4rem;
    font-size: 1.08rem;
}

.enhancement-columns h3:first-child {
    margin-top: 0;
}

.code-sample {
    overflow-x: auto;
    margin: 0 0 1rem;
    padding: 1.25rem 1.4rem;
    border-radius: var(--r-card);
    background-color: #0c1a13;
    color: #d6eadc;
    font-size: .875rem;
    line-height: 1.6;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
}

.code-sample code {
    padding: 0;
    background-color: transparent;
    color: inherit;
}

/* Further techniques: three shorter entries side by side */
.further-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.further-item {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border-radius: var(--r-card);
    background-color: var(--surface);
    box-shadow: var(--shadow-card);
}

.further-item p {
    font-size: .95rem;
}

.further-item .text-link {
    align-self: flex-start;
    margin-top: auto;
}

/* Sources: one card per photograph, marked with its family colour */
.source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding-bottom: clamp(2rem, 5vw, 3rem);
}

.source-entry {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: var(--r-card);
    background-color: var(--surface);
    font-size: .95rem;
    box-shadow: var(--shadow-card);
}

.source-entry img {
    width: 7rem;
    height: 7rem;
    border-radius: 1rem;
    object-fit: cover;
}

.source-entry h2 {
    margin-bottom: .6rem;
    font-size: 1.3rem;
}

.source-entry h2 a {
    color: var(--ink);
    text-decoration: none;
}

.source-entry h2 a:hover {
    color: var(--leaf);
}

.source-entry dl {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: .3rem .75rem;
    margin: 0;
}

.source-entry dt {
    color: var(--ink-2);
    font-weight: 600;
}

.source-entry dd {
    margin: 0;
}

/* Sitemap: three columns of indented trees */
.sitemap-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: clamp(1rem, 3vw, 1.5rem);
}

.sitemap-block {
    padding: clamp(1.4rem, 3vw, 2.25rem);
    border-radius: var(--r-sheet);
    background-color: var(--surface);
    box-shadow: var(--shadow-card);
}

.sitemap-block h2 {
    font-size: 1.4rem;
}

.sitemap-block .site-tree + h2 {
    margin-top: 1.75rem;
}

.site-tree,
.species-tree,
.site-tree ul,
.species-tree ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-tree ul,
.species-tree ul {
    margin: .3rem 0 .3rem .55rem;
    padding-left: 1rem;
    border-left: 2px solid var(--line-strong);
}

.site-tree li,
.species-tree li {
    padding-block: .25rem;
}

.site-tree > li > a {
    font-weight: 620;
}

.species-tree > li > a {
    color: var(--accent);
    font-weight: 650;
}

.species-tree ul {
    border-left-color: color-mix(in srgb, var(--accent) 45%, transparent);
}


/* ==========================================================================
   17 / Site footer
   Requirements: the footer covers the full page width on every page. On
   the index page its text is italic and centred; inner pages use a
   compact, upright version of the same footer.
   ========================================================================== */
.site-footer {
    width: 100%;
    padding-block: clamp(2.75rem, 5vw, 3.5rem) 1.75rem;
    background-color: #0a1811;
    color: rgb(230 240 233 / 74%);
    font-size: .95rem;
    --focus: #bfe9cf;
}

.footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    gap: 2rem;
    width: min(100% - clamp(2rem, 8vw, 5rem), var(--wrap));
    margin-inline: auto;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgb(230 240 233 / 12%);
}

.footer-name {
    margin: 0 0 .5rem;
    color: #eef6f0;
    font-size: 1.5rem;
    font-stretch: 118%;
    font-weight: 780;
    letter-spacing: -.035em;
    line-height: 1;
}

.footer-brand p:last-child {
    margin: 0;
}

.site-footer h2 {
    margin-bottom: .8rem;
    color: #bfe9cf;
    font-size: .95rem;
    font-stretch: 100%;
    font-weight: 620;
    letter-spacing: 0;
}

.site-footer ul {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer a {
    color: #eef6f0;
    text-decoration: none;
}

.site-footer a:hover {
    color: #bfe9cf;
    text-decoration: underline;
}

.footer-note,
.footer-top {
    width: min(100% - clamp(2rem, 8vw, 5rem), var(--wrap));
    margin: 1.4rem auto 0;
    font-size: .9rem;
}

.footer-top {
    margin-top: .5rem;
}

.site-footer .footer-note a {
    color: #bfe9cf;
}

/* Index page requirement: footer text in italic, centred in the footer */
.home-page .site-footer {
    padding-block: clamp(4rem, 8vw, 6rem) 2.5rem;
    font-style: italic;
    text-align: center;
}

.home-page .footer-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 2rem;
    padding-bottom: 2.75rem;
}

.home-page .footer-brand {
    grid-column: 1 / -1;
    margin-bottom: 1rem;
}

.home-page .footer-name {
    margin-bottom: .75rem;
    font-size: clamp(3rem, 10vw, 7.5rem);
    font-stretch: 125%;
    font-style: normal;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: .9;
}

.home-page .footer-brand p:last-child {
    font-size: 1.1rem;
}


/* ==========================================================================
   18 / Motion
   One orchestrated moment on arrival: the glass "materialises" (blur and
   opacity settle together) and the heading rises into place. Everything
   else moves only in answer to the visitor: hover, press, open, filter,
   lighting a branch of the tree. Hover and open states settle without
   overshoot; the one spring is the success mark after a form is sent.
   ========================================================================== */
@keyframes materialise {
    from {
        opacity: 0;
        filter: blur(18px) drop-shadow(0 0 .6px rgb(255 255 255 / 0%)) drop-shadow(0 -1px 0 rgb(255 255 255 / 0%)) drop-shadow(0 24px 40px rgb(3 14 8 / 0%));
    }

    to {
        opacity: 1;
        filter: blur(0) drop-shadow(0 0 .6px rgb(255 255 255 / 95%)) drop-shadow(0 -1px 0 rgb(255 255 255 / 45%)) drop-shadow(0 24px 40px rgb(3 14 8 / 55%));
    }
}

@keyframes glass-in {
    from {
        opacity: 0;
        scale: .94;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

@keyframes rise {
    from {
        opacity: 0;
        translate: 0 18px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes settle {
    from {
        scale: 1.05;
    }

    to {
        scale: 1;
    }
}

@keyframes card-in {
    from {
        opacity: 0;
        scale: .97;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

@keyframes pop {
    from {
        opacity: 0;
        scale: .6;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

.header-bar {
    animation: glass-in .7s var(--ease) .1s both;
}

.hero-media img {
    animation: settle 1.8s var(--ease) both;
}

.hero .glass-title {
    animation: materialise 1.4s var(--ease) .25s both;
}

.hero-row {
    animation: rise .9s var(--ease) .75s both;
}

.page-hero .container > * {
    animation: rise .8s var(--ease) both;
}

.page-hero .container > :nth-child(2) {
    animation-delay: .08s;
}

.page-hero .container > :nth-child(3) {
    animation-delay: .16s;
}

.page-hero .container > :nth-child(4) {
    animation-delay: .24s;
}


/* ==========================================================================
   19 / Dark theme
   Follows the visitor's system setting. The same token names get night
   values; glass turns smoky instead of milky. Photographs are unchanged.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --mist: #09110d;
        --mist-2: #0e1813;
        --surface: #131e18;
        --ink: #e5eee8;
        --ink-2: #9db0a5;
        --canopy: #d9ebdf;
        --canopy-2: #a9dcbd;
        --leaf: #7fd3a2;
        --leaf-soft: rgb(127 211 162 / 13%);
        --btn-bg: #e5eee8;
        --btn-bg-hover: #ffffff;
        --btn-ink: #0b1a12;
        --line: rgb(229 238 232 / 9%);
        --line-strong: rgb(229 238 232 / 17%);
        --error: #ff8f86;
        --error-soft: #3a1714;
        --ok: #7fd3a2;
        --focus: #7fd3a2;
        --dipt: #b6d56c;
        --laur: #6fd3bf;
        --burs: #e6b673;
        --myri: #f08fa6;
        --glass: rgb(26 38 31 / 56%);
        --glass-thick: rgb(17 28 22 / 80%);
        --glass-rim: inset 0 1px 0 rgb(255 255 255 / 16%), inset 0 0 0 1px rgb(255 255 255 / 9%);
        --glass-lift: 0 1px 2px rgb(0 0 0 / 30%), 0 20px 46px -14px rgb(0 0 0 / 65%);
        --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 16px 36px -22px rgb(0 0 0 / 70%);
        --shadow-card-hover: 0 2px 4px rgb(0 0 0 / 35%), 0 28px 54px -22px rgb(0 0 0 / 80%);
        --lens: rgb(255 255 255 / 12%);
        --lens-rim: inset 0 1px 0 rgb(255 255 255 / 24%), inset 0 0 0 1px rgb(255 255 255 / 10%);
        --btn-glass: rgb(229 238 232 / 70%);
    }

    /* The logo mark and the topographic lines switch to light versions */
    .brand-mark {
        background-image: url("images/rimba-mark-light.svg");
    }

    .home-page,
    .hero-docs {
        background-image: url("images/contours-light.svg");
    }

    .hero-docs {
        --focus: #7fd3a2;
    }

    .nav-list a[aria-current] {
        background-color: rgb(255 255 255 / 13%);
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%);
    }

    .button:hover {
        box-shadow: 0 14px 30px -12px rgb(0 0 0 / 80%);
    }

    .button:not(.button-light, .button-glass)::after {
        background-image: linear-gradient(100deg, rgb(255 255 255 / 0%) 15%, rgb(255 255 255 / 20%) 50%, rgb(255 255 255 / 0%) 85%);
    }

    /* Lit family node: dark text on the light night accent */
    .tree-family:is(:hover, :focus-within) .node-family {
        color: #0b1a12;
    }

    .tree-family:is(:hover, :focus-within) .node-family::before {
        background-color: #0b1a12;
    }

    /* Initials on the light night accents */
    .avatar {
        color: #0b1a12;
    }

    .specimen-plate {
        background-color: rgb(19 30 24 / 72%);
    }

    ::selection {
        background-color: #2e6b49;
        color: #ffffff;
    }

    /* Form wells and choice tiles take the night surface */
    .form-group input,
    .form-group select,
    .form-group textarea,
    .choice {
        border-color: rgb(229 238 232 / 18%);
        background-color: #0c1611;
        color: var(--ink);
    }

    .form-group select {
        background: #0c1611 url("images/chevron.svg") right .9rem center / 1.1rem no-repeat;
    }

    .form-group input:not([type="file"], [type="date"]):user-valid {
        background: #0c1611 url("images/check.svg") right .9rem center / 1.15rem no-repeat;
    }

    .choice:has(input:checked) {
        background-color: #173427;
    }

    .team-card img {
        box-shadow: 0 0 0 4px rgb(255 255 255 / 14%), var(--shadow-card);
    }

    /* Profile table cells keep their hexadecimal colours, in night tones */
    .profile-table td {
        background-color: #16231c;
        color: #e5eee8;
    }

    .profile-table tfoot td {
        background-color: #1c3327;
    }

    .profile-table tfoot a {
        color: #7fd3a2;
    }

    .profile-course {
        color: rgb(127, 211, 162);
    }
}


/* ==========================================================================
   20 / Accessibility preferences
   Reduced motion: a still page. Reduced transparency and more contrast:
   every glass surface becomes solid, with a clear edge.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Touch screens have no pointer to hover with: a tap would leave a lift
   or a zoom stuck on, so hover movement is switched off there. Press
   feedback (:active) and hover colours are unchanged. */
@media (hover: none) {
    .button:hover:not(:active),
    .brand:hover,
    .nav-list a:hover,
    .nav-list .dropdown-menu a:hover,
    .page-hero .level-map a:hover,
    .next-step a:hover:not(:active),
    .species-filter label:hover:not(:active),
    .plant-card:hover .card-media img {
        scale: none;
    }

    .brand:hover .brand-mark {
        rotate: none;
    }

    .team-strip a:hover,
    .genus-index a:hover,
    .plant-card:hover,
    .team-card:hover,
    .enhancement-toc a:hover {
        translate: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .header-bar::before,
    .dropdown-menu,
    .discovery-steps,
    .tree-frame,
    .specimen-plate {
        background-color: var(--surface);
        backdrop-filter: none;
    }

    .breadcrumbs ol,
    .level-map ol,
    .button-glass,
    .page-hero .button-ghost,
    .path-glass,
    .cta-glass,
    .video-copy,
    .card-media figcaption,
    .family-photo figcaption,
    .feature-media figcaption,
    .related-media figcaption,
    .chapter-media figcaption,
    .video-media figcaption,
    .story-media figcaption {
        background-color: rgb(8 20 14 / 88%);
        backdrop-filter: none;
    }

    .form-stage .form-panel,
    .team-card,
    .profile-card {
        background-color: var(--surface);
        backdrop-filter: none;
    }

    .form-story {
        background-color: rgb(6 22 14 / 92%);
    }
}

@media (prefers-contrast: more) {
    .header-bar::before,
    .dropdown-menu,
    .discovery-steps,
    .tree-frame,
    .specimen-plate,
    .form-stage .form-panel,
    .team-card,
    .profile-card {
        border: 2px solid var(--ink);
        background-color: var(--surface);
        backdrop-filter: none;
    }

    .breadcrumbs ol,
    .level-map ol,
    .button-glass,
    .page-hero .button-ghost,
    .path-glass,
    .cta-glass,
    .video-copy,
    .form-story {
        border: 2px solid #ffffff;
        background-color: rgb(4 12 8 / 94%);
        backdrop-filter: none;
    }

    .tree-family:not(:hover, :focus-within) {
        opacity: 1;
    }
}


/* ==========================================================================
   21 / Responsive layout
   The design is tuned for desktop windows (1280-1920 px). Fluid clamp()
   sizes and intrinsic grids keep it working on smaller screens, and these
   queries restructure layouts for tablets (64em), the phone menu (52em),
   phones (44em) and small phones (30em).
   ========================================================================== */
@media (max-width: 64em) {
    /* The tree drops its side card and narrows its columns */
    .tree-frame {
        --col-f: 11rem;
        --col-g: 9rem;
        --gap: 2rem;
        padding-right: var(--pad);
    }

    .tree-card,
    .tree-hint {
        display: none;
    }

    .how-layout,
    .form-layout,
    .identify-layout,
    .enhancement-columns,
    .behind {
        grid-template-columns: minmax(0, 1fr);
    }

    .how-copy,
    .form-story {
        position: static;
    }

    .observation-grid,
    .further-grid,
    .sitemap-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .path-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-rows: minmax(19rem, 50vw);
    }

    .path-families {
        grid-row: auto;
    }
}

/* Phone menu: the capsule spans the window and scrolls sideways; the
   drop-down links join the row as ordinary items */
@media (max-width: 52em) {
    .site-header {
        top: .6rem;
        width: calc(100% - 1.2rem);
        max-width: none;
    }

    .header-bar {
        width: 100%;
        overflow-x: auto;
        background-color: var(--glass-thick);
        box-shadow: var(--glass-rim), var(--glass-lift);
        backdrop-filter: var(--glass-blur);
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    /* The glass moves from ::before to the scrolling bar itself */
    .header-bar::before {
        display: none;
    }

    .dropdown-menu {
        display: contents;
        visibility: visible;
    }

    .nav-dropdown {
        display: contents;
    }

    .nav-dropdown > a::after {
        display: none;
    }

    .nav-list .dropdown-menu a {
        display: block;
        padding: .56rem .95rem;
        border-radius: 999px;
    }

    /* Family chapters stop stacking and simply follow one another */
    .chapter {
        position: relative;
        top: auto;
        grid-template-columns: minmax(0, 1fr);
    }

    .chapter-stack {
        gap: 1.25rem;
    }

    .chapter-media img {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 44em) {
    .hero-content {
        padding-bottom: 3rem;
    }

    .hero .glass-title {
        font-size: clamp(3.6rem, 23vw, 9rem);
        line-height: .88;
        white-space: normal;
    }

    .hero-media figcaption {
        right: auto;
        left: var(--gutter);
    }

    /* The tree becomes an indented list without branch lines */
    .tree-frame {
        padding: 1.25rem;
    }

    .tree-levels {
        grid-template-columns: repeat(3, auto);
        column-gap: 1rem;
    }

    .tree-levels strong {
        font-size: 1.6rem;
    }

    .tree-family,
    .tree-genus {
        grid-template-columns: minmax(0, 1fr);
        row-gap: .4rem;
    }

    .tree-branch {
        margin-left: 1rem;
    }

    .tree-branch::before,
    .tree-genus::before,
    .tree-species::before,
    .tree-genus::after,
    .tree-species::after {
        display: none;
    }

    .observation-grid,
    .team-grid,
    .family-sections,
    .genus-grid,
    .species-detail,
    .related-species,
    .split-feature,
    .notes-columns,
    .sitemap-layout,
    .source-grid,
    .further-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Field notes: the aside stacks above the text at full width */
    .field-aside {
        float: none;
        width: auto;
        margin: 0 var(--gutter) 2rem;
    }

    .notes-title,
    .notes-copy {
        padding-inline: var(--gutter);
    }

    .species-detail {
        margin-top: -4rem;
    }

    .specimen-plate {
        position: relative;
        top: auto;
    }

    .specimen-label {
        margin-top: 0;
    }

    .level-map a {
        padding: .45rem .65rem;
        font-size: .9rem;
    }

    .level-map strong {
        font-size: 1.05rem;
    }

    .level-map li + li::before {
        width: .9rem;
    }

    .discovery-steps {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 1.4rem;
    }

    .discovery-steps a {
        justify-content: flex-start;
        border-radius: 1.1rem;
    }

    .enhancement-section {
        grid-template-columns: minmax(0, 1fr);
        gap: .5rem;
    }

    .enhancement-number {
        position: static;
        font-size: 3rem;
    }

    .enhancement-toc ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

    .record-facts dt {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .next-step a {
        grid-template-columns: minmax(0, 1fr);
        gap: .3rem;
    }

    .cta-band .container {
        align-items: flex-end;
        background-position: 65% center;
    }

    .footer-inner,
    .home-page .footer-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Profile table: narrower heading column so the table fits the phone */
    .profile-table th,
    .profile-table td {
        padding-inline: .8rem;
    }

    .profile-table th {
        width: 7.5rem;
    }

    .profile-intro {
        min-width: 0;
    }

    .profile-photo {
        width: 8.5rem;
    }
}

@media (max-width: 30em) {
    /* Small phones: the logo shows its mark only (its link name stays) */
    .brand-name {
        display: none;
    }

    .brand {
        padding-right: .28rem;
    }

    .profile-photo {
        float: none;
        margin: 0 auto 1rem;
    }

    .button-row .button {
        flex: 1 1 auto;
    }
}