/* =========================================================================
   The GL Pod - oceanic design system
   -------------------------------------------------------------------------
   Two surfaces carry the whole site: deep-water chrome for headers, heroes
   and comparison banners, and a pale editorial surface for long-form reading.
   The artwork ranges from abyssal dark to arctic bright, so every image that
   sits on dark chrome is soft-masked into it rather than dropped on top.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */

:root {
    /* Deep water */
    --abyss: #04121f;
    --abyss-soft: #071c2d;
    --deep: #0a2c46;
    --deep-lift: #0e3a5c;
    --tide: #14577a;

    /* Accent - one primary, used sparingly */
    --turquoise: #2ad4c4;
    --turquoise-bright: #5fe8db;
    --turquoise-deep: #12a396;

    /* Editorial surface */
    --paper: #ffffff;
    --paper-sink: #f4f9fb;
    --foam: #e8f2f7;

    /* Ink */
    --ink: #0c2130;
    --ink-soft: #3d5768;
    --ink-mute: #6a8698;
    --line: #d9e6ed;
    --line-soft: #eaf2f6;

    /* Status */
    --stable: #1f9d76;
    --watch: #c98a1e;
    --risk: #d97036;
    --severe: #c53f2c;
    --unknown: #7b8f9c;

    /* Type */
    --display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Space */
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --section: clamp(3.5rem, 9vw, 7rem);

    /* Shape */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 28px;

    /* Depth */
    --shadow-sm: 0 1px 2px rgba(12, 33, 48, .06), 0 2px 8px rgba(12, 33, 48, .04);
    --shadow-md: 0 4px 12px rgba(12, 33, 48, .08), 0 12px 32px rgba(12, 33, 48, .06);
    --shadow-lg: 0 12px 28px rgba(4, 18, 31, .18), 0 40px 80px rgba(4, 18, 31, .22);
    --shadow-glow: 0 0 0 1px rgba(42, 212, 196, .28), 0 8px 32px rgba(42, 212, 196, .16);

    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------- foundation */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--tide);
    text-decoration-color: color-mix(in srgb, var(--tide) 35%, transparent);
    text-underline-offset: .18em;
    transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}

a:hover {
    color: var(--turquoise-deep);
    text-decoration-color: currentColor;
}

h1,
h2,
h3,
h4 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.015em;
    margin: 0 0 .5em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.1rem, 5.2vw, 3.6rem);
}

h2 {
    font-size: clamp(1.55rem, 3.2vw, 2.35rem);
}

h3 {
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}

h4 {
    font-size: 1.0625rem;
    font-family: var(--sans);
    font-weight: 650;
    letter-spacing: 0;
}

p {
    margin: 0 0 1.15em;
}

ul,
ol {
    margin: 0 0 1.15em;
    padding-left: 1.25em;
}

li {
    margin-bottom: .4em;
}

strong {
    font-weight: 650;
}

figure {
    margin: 0;
}

button {
    font: inherit;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--turquoise);
    outline-offset: 3px;
    border-radius: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--turquoise);
    color: var(--abyss);
    padding: .75rem 1.25rem;
    font-weight: 650;
    border-radius: 0 0 var(--r-sm) 0;
}

.skip-link:focus {
    left: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ----------------------------------------------------------------- layout */

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

.shell--wide {
    max-width: 1360px;
}

.shell--reading {
    max-width: 720px;
}

.section {
    padding-block: var(--section);
}

.section--sink {
    background: var(--paper-sink);
}

.section--tight {
    padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

.eyebrow {
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--turquoise-deep);
    margin: 0 0 .9rem;
}

.section-head {
    max-width: 60ch;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-head p {
    color: var(--ink-soft);
    font-size: 1.1rem;
    margin: 0;
}

.section-head--split {
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
}

.section-head--split > div {
    max-width: 56ch;
}

.lede {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.55;
    color: var(--ink-soft);
}

/* ------------------------------------------------------------ dark chrome */

.on-dark {
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(42, 212, 196, .16), transparent 60%),
        radial-gradient(900px 500px at 85% 0%, rgba(20, 87, 122, .5), transparent 65%),
        linear-gradient(180deg, var(--abyss) 0%, var(--abyss-soft) 55%, var(--deep) 100%);
    color: #dbeaf2;
    position: relative;
    isolation: isolate;
}

.on-dark h1,
.on-dark h2,
.on-dark h3 {
    color: #f2f9fc;
}

.on-dark .eyebrow {
    color: var(--turquoise);
}

/* Buttons are excluded because they carry their own colour. This selector is
   more specific than .btn--primary, so without the exception a primary button
   inside a dark section was painted bright turquoise on a turquoise gradient
   and the label all but disappeared. */
.on-dark a:not(.btn) {
    color: var(--turquoise-bright);
}

/* A faint speckle that reads as suspended particles in water. */
.on-dark::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .5;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1px 1px at 28% 68%, rgba(255, 255, 255, .35), transparent),
        radial-gradient(1.5px 1.5px at 47% 34%, rgba(255, 255, 255, .3), transparent),
        radial-gradient(1px 1px at 63% 78%, rgba(255, 255, 255, .35), transparent),
        radial-gradient(2px 2px at 78% 18%, rgba(255, 255, 255, .28), transparent),
        radial-gradient(1px 1px at 91% 56%, rgba(255, 255, 255, .3), transparent);
}

/* --------------------------------------------------------------- masthead */

.masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(4, 18, 31, .82);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.masthead__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 68px;
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex: 0 0 auto;
}

/* The wordmark carries the name, so the anchor holds no text of its own and
   the intrinsic size lives on the img attributes to reserve the right box
   before the file arrives. */
.brand__logo {
    display: block;
    height: 30px;
    width: auto;
    flex: 0 0 auto;
    filter: drop-shadow(0 2px 10px rgba(42, 212, 196, .35));
    transition: filter .18s var(--ease), transform .18s var(--ease);
}

.brand:hover .brand__logo {
    filter: drop-shadow(0 2px 14px rgba(42, 212, 196, .6));
    transform: translateY(-1px);
}

@media (max-width: 560px) {
    .brand__logo {
        height: 26px;
    }
}

.nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.nav a {
    color: #b9d2e0;
    font-size: .9375rem;
    font-weight: 520;
    text-decoration: none;
    padding: .5rem .8rem;
    border-radius: var(--r-sm);
    transition: color .16s var(--ease), background .16s var(--ease);
}

.nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.nav a[aria-current="page"] {
    color: var(--turquoise-bright);
    background: rgba(42, 212, 196, .1);
}

.nav-toggle {
    display: none;
    margin-left: auto;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #eaf4f8;
    border-radius: var(--r-sm);
    padding: .45rem .7rem;
    line-height: 1;
}

@media (max-width: 860px) {
    .nav-toggle {
        display: block;
    }

    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: rgba(4, 18, 31, .97);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        padding: .5rem var(--gutter) 1rem;
    }

    .nav[hidden] {
        display: none;
    }

    .nav a {
        padding: .8rem .25rem;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        border-radius: 0;
    }
}

/* ------------------------------------------------------------------- hero */

.hero {
    position: relative;
    overflow: clip;
    padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 8vw, 7rem);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.hero__copy {
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: clamp(2.35rem, 6vw, 4.35rem);
    letter-spacing: -.025em;
}

.hero h1 em {
    font-style: normal;
    color: var(--turquoise-bright);
}

.hero__lede {
    font-size: clamp(1.05rem, 1.7vw, 1.25rem);
    line-height: 1.6;
    color: #b9d2e0;
    max-width: 46ch;
    margin-bottom: 2rem;
}

/* The spotlight animal bleeds past the container and is masked into the
   background so bright arctic artwork does not read as a pasted rectangle. */
.hero__art {
    position: relative;
    margin-right: calc(var(--gutter) * -2);
}

/* One off-centre radial mask fades every edge, including the left side where
   the artwork meets the headline. A single mask avoids relying on
   mask-composite, which is still inconsistent across engines. */
.hero__art img {
    width: 100%;
    filter: saturate(108%) contrast(104%);
    mask-image: radial-gradient(118% 106% at 60% 50%, #000 40%, transparent 74%);
    -webkit-mask-image: radial-gradient(118% 106% at 60% 50%, #000 40%, transparent 74%);
}

.hero__art::before {
    content: "";
    position: absolute;
    inset: 8% 4%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(42, 212, 196, .3), transparent 72%);
    filter: blur(48px);
}

.hero__caption {
    position: absolute;
    left: 0;
    bottom: 4%;
    display: inline-flex;
    flex-direction: column;
    gap: .15rem;
    padding: .7rem 1rem;
    border-radius: var(--r-md);
    background: rgba(4, 18, 31, .58);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .12);
    text-decoration: none;
    max-width: 17rem;
}

.hero__caption strong {
    color: #f2f9fc;
    font-size: .95rem;
}

.hero__caption span {
    color: #93b4c6;
    font-size: .78rem;
    font-style: italic;
}

.hero__caption:hover {
    border-color: rgba(42, 212, 196, .45);
}

@media (max-width: 900px) {
    .hero__grid {
        grid-template-columns: 1fr;
    }

    .hero__art {
        order: -1;
        margin-inline: calc(var(--gutter) * -1);
    }

    .hero__caption {
        left: var(--gutter);
    }
}

/* ---------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: .9375rem;
    font-weight: 620;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease),
        background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}

/* The label is near-black rather than white: against a bright turquoise fill
   that direction gives far more contrast, and it keeps the accent reading as
   light rather than as a coloured slab. */
.btn--primary {
    background: linear-gradient(180deg, #7df0e4 0%, var(--turquoise) 48%, var(--turquoise-deep) 100%);
    color: #02201f;
    letter-spacing: -.005em;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .55) inset,
        0 -1px 0 rgba(2, 32, 31, .18) inset,
        0 6px 18px rgba(42, 212, 196, .28),
        0 12px 36px rgba(4, 18, 31, .35);
}

.btn--primary:hover {
    color: #02201f;
    background: linear-gradient(180deg, #93f5ea 0%, #38ded0 48%, #16b3a4 100%);
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .65) inset,
        0 -1px 0 rgba(2, 32, 31, .18) inset,
        0 10px 24px rgba(42, 212, 196, .4),
        0 18px 48px rgba(4, 18, 31, .4);
}

.btn--primary:active {
    transform: translateY(0);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .4) inset,
        0 4px 12px rgba(42, 212, 196, .3);
}

/* The arrow drifts forward on hover, which reads as forward motion without
   animating anything while the pointer is away. */
.btn__arrow {
    display: inline-block;
    transition: transform .18s var(--ease);
}

.btn:hover .btn__arrow {
    transform: translateX(3px);
}

.btn--ghost {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .2);
    color: #e4f1f7;
}

.btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(42, 212, 196, .5);
    color: #fff;
    transform: translateY(-2px);
}

.btn--quiet {
    background: var(--paper);
    border-color: var(--line);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.btn--quiet:hover {
    border-color: var(--turquoise-deep);
    color: var(--turquoise-deep);
    transform: translateY(-2px);
}

.btn--sm {
    padding: .55rem 1rem;
    font-size: .875rem;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

/* -------------------------------------------------------------- statistics */

.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.25rem, 4vw, 2.75rem);
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.stat__value {
    display: block;
    font-family: var(--display);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 600;
    color: #f2f9fc;
    line-height: 1;
}

.stat__label {
    display: block;
    margin-top: .35rem;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8fb0c3;
}

/* ------------------------------------------------------------ compare bar */

/* The picker floats over the boundary between the hero and the page body. */
.picker {
    position: relative;
    z-index: 5;
    margin-top: calc(clamp(2rem, 5vw, 3.5rem) * -1);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: clamp(1.25rem, 3vw, 1.9rem);
}

/* Used where the picker sits inside a normal section instead of overlapping a hero. */
.picker--inline {
    margin-top: 0;
    box-shadow: var(--shadow-md);
}

.picker__title {
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0 0 1rem;
}

.picker__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    align-items: end;
    gap: .85rem;
}

.picker__swap {
    align-self: end;
    margin-bottom: .3rem;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--paper-sink);
    color: var(--ink-soft);
    transition: transform .3s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}

.picker__swap:hover {
    transform: rotate(180deg);
    color: var(--turquoise-deep);
    border-color: var(--turquoise-deep);
}

@media (max-width: 760px) {
    .picker__row {
        grid-template-columns: 1fr;
    }

    .picker__swap {
        justify-self: center;
        margin: -.25rem 0;
        transform: rotate(90deg);
    }

    .picker__swap:hover {
        transform: rotate(270deg);
    }
}

/* ----------------------------------------------------------------- fields */

.field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
}

.field label {
    font-size: .8rem;
    font-weight: 620;
    color: var(--ink-soft);
}

.field select,
.field input {
    appearance: none;
    width: 100%;
    padding: .7rem 2.2rem .7rem .85rem;
    font: inherit;
    font-size: .9375rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}

.field input {
    padding-right: .85rem;
}

.field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236a8698' d='M6 8 0 1.4 1.4 0 6 4.6 10.6 0 12 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 11px;
}

.field select:focus,
.field input:focus {
    border-color: var(--turquoise-deep);
    box-shadow: 0 0 0 3px rgba(42, 212, 196, .16);
    outline: none;
}

/* ------------------------------------------------------------------ cards */

.grid {
    display: grid;
    gap: clamp(1rem, 2.2vw, 1.6rem);
}

.grid--species {
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}

.grid--pairs {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}

.grid--guides {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

/* Species card: the artwork is the object, the panel is only its setting. */
.s-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}

.s-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--turquoise-deep) 45%, var(--line));
    box-shadow: var(--shadow-md);
    color: inherit;
}

.s-card__art {
    position: relative;
    aspect-ratio: 3 / 2;
    background: linear-gradient(160deg, var(--deep), var(--abyss));
    overflow: hidden;
}

.s-card__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.s-card:hover .s-card__art img {
    transform: scale(1.05);
}

.s-card__group {
    position: absolute;
    top: .7rem;
    left: .7rem;
    z-index: 2;
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3rem .6rem;
    border-radius: 999px;
    color: #eaf7fa;
    background: rgba(4, 18, 31, .62);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .16);
}

.s-card__body {
    padding: 1.05rem 1.15rem 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.s-card__name {
    font-family: var(--display);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 .15rem;
}

.s-card__latin {
    font-size: .82rem;
    font-style: italic;
    color: var(--ink-mute);
    margin: 0 0 .7rem;
}

.s-card__summary {
    font-size: .9rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 1rem;
}

.s-card__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line-soft);
    font-size: .82rem;
    color: var(--ink-mute);
}

.s-card__metric strong {
    color: var(--ink);
    font-weight: 620;
}

/* Pair card for curated comparisons: two animals facing each other. */
.p-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--paper);
    border: 1px solid var(--line);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}

.p-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--turquoise-deep) 45%, var(--line));
    box-shadow: var(--shadow-md);
    color: inherit;
}

.p-card__art {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 2 / 1;
    background: var(--abyss);
}

.p-card__art figure {
    position: relative;
    overflow: hidden;
}

.p-card__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

/* The right animal is mirrored so the two face one another. */
.p-card__art figure:last-child img {
    transform: scaleX(-1);
}

.p-card:hover .p-card__art figure:first-child img {
    transform: scale(1.05);
}

.p-card:hover .p-card__art figure:last-child img {
    transform: scaleX(-1) scale(1.05);
}

.p-card__vs {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 2;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(4, 18, 31, .72);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(42, 212, 196, .45);
    color: var(--turquoise-bright);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 0 24px rgba(42, 212, 196, .3);
}

.p-card__body {
    padding: 1.1rem 1.2rem 1.25rem;
}

.p-card__angle {
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--turquoise-deep);
    margin: 0 0 .45rem;
}

.p-card__title {
    font-family: var(--display);
    font-size: 1.16rem;
    line-height: 1.25;
    margin: 0 0 .5rem;
}

.p-card__desc {
    font-size: .89rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
}

/* Guide card */
.g-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--paper);
    border: 1px solid var(--line);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}

.g-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--turquoise-deep) 45%, var(--line));
    box-shadow: var(--shadow-md);
    color: inherit;
}

.g-card__art {
    aspect-ratio: 16 / 9;
    background: linear-gradient(150deg, var(--tide), var(--abyss));
    overflow: hidden;
}

.g-card__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.g-card__body {
    padding: 1.15rem 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.g-card__body h3 {
    font-size: 1.22rem;
    margin: 0 0 .5rem;
}

.g-card__body p {
    font-size: .92rem;
    color: var(--ink-soft);
    margin: 0 0 1rem;
}

.g-card__meta {
    margin-top: auto;
    font-size: .8rem;
    color: var(--ink-mute);
}

/* ------------------------------------------------------------ group strips */

/* Deliberately not a uniform grid: each group is a wide band with a stack of
   sample artwork on one side. */
.group-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(1.25rem, 4vw, 3rem);
    padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
    border-bottom: 1px solid var(--line);
}

.group-band:last-child {
    border-bottom: 0;
}

.group-band:nth-child(even) > .group-band__art {
    order: -1;
}

.group-band__count {
    font-family: var(--display);
    font-size: .95rem;
    color: var(--turquoise-deep);
    font-weight: 600;
}

.group-band h3 {
    margin: .2rem 0 .5rem;
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
}

.group-band p {
    color: var(--ink-soft);
    margin: 0 0 1.1rem;
    max-width: 46ch;
}

.group-band__art {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
}

.group-band__art a {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--abyss);
    box-shadow: var(--shadow-sm);
}

.group-band__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s var(--ease);
}

.group-band__art a:hover img {
    transform: scale(1.07);
}

.group-band__art span {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.75rem .55rem .5rem;
    font-size: .74rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(transparent, rgba(4, 18, 31, .88));
    line-height: 1.25;
}

/* The middle sample lifts slightly to break the flat row. */
.group-band__art a:nth-child(2) {
    translate: 0 -12px;
}

@media (max-width: 820px) {
    .group-band {
        grid-template-columns: 1fr;
    }

    .group-band:nth-child(even) > .group-band__art {
        order: 0;
    }

    .group-band__art a:nth-child(2) {
        translate: 0;
    }
}

/* --------------------------------------------------------- species profile */

.profile-hero {
    position: relative;
    overflow: clip;
    padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 7vw, 5rem);
}

.profile-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.profile-hero h1 {
    margin-bottom: .3rem;
}

.profile-hero__latin {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: #9dbdcd;
    margin: 0 0 1.25rem;
}

.profile-hero__summary {
    color: #c3d9e5;
    font-size: 1.08rem;
    line-height: 1.6;
    max-width: 48ch;
}

.profile-hero__art {
    position: relative;
}

.profile-hero__art img {
    width: 100%;
    border-radius: var(--r-lg);
    mask-image: radial-gradient(126% 112% at 50% 50%, #000 46%, transparent 78%);
    -webkit-mask-image: radial-gradient(126% 112% at 50% 50%, #000 46%, transparent 78%);
}

.profile-hero__art::before {
    content: "";
    position: absolute;
    inset: 10%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(42, 212, 196, .26), transparent 70%);
    filter: blur(44px);
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0 0 1.4rem;
    padding: 0;
    list-style: none;
}

.tag {
    font-size: .78rem;
    font-weight: 560;
    padding: .32rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #cfe4ee;
}

.tag--light {
    background: var(--foam);
    border-color: var(--line);
    color: var(--ink-soft);
}

/* Measurement panel that straddles the dark hero and the light body. */
.measure-panel {
    position: relative;
    z-index: 5;
    margin-top: calc(clamp(2rem, 5vw, 3rem) * -1);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.measure-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: 1.1rem clamp(1.1rem, 3vw, 1.75rem);
    border-bottom: 1px solid var(--line);
    background: var(--paper-sink);
}

.measure-panel__head h2 {
    font-size: 1.15rem;
    margin: 0;
}

.measure-panel__note {
    font-size: .82rem;
    color: var(--ink-mute);
    margin: 0;
}

.measure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.measure {
    padding: 1.1rem clamp(1.1rem, 3vw, 1.75rem) 1.2rem;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

.measure__label {
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0 0 .35rem;
}

.measure__value {
    font-family: var(--display);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
}

.measure__alt {
    font-size: .82rem;
    color: var(--ink-mute);
    margin: .2rem 0 0;
}

.measure__hint {
    margin: .55rem 0 0;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* ------------------------------------------------------------ prose blocks */

.prose {
    max-width: 68ch;
}

.prose > h2 {
    margin-top: 2.4em;
}

.prose > h2:first-child {
    margin-top: 0;
}

.prose > h3 {
    margin-top: 1.9em;
}

.prose p,
.prose li {
    color: var(--ink-soft);
}

.prose strong {
    color: var(--ink);
}

.layout-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

@media (max-width: 980px) {
    .layout-split {
        grid-template-columns: 1fr;
    }
}

.rail {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (max-width: 980px) {
    .rail {
        position: static;
    }
}

.panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--shadow-sm);
}

.panel--sink {
    background: var(--paper-sink);
    box-shadow: none;
}

.panel h3,
.panel h4 {
    margin-top: 0;
}

.panel__title {
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0 0 .9rem;
}

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

.panel li + li {
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px solid var(--line-soft);
}

.fact-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: fact;
}

.fact-list li {
    position: relative;
    padding-left: 2.4rem;
    margin-bottom: 1.1rem;
    color: var(--ink-soft);
    counter-increment: fact;
}

.fact-list li::before {
    content: counter(fact);
    position: absolute;
    left: 0;
    top: -.05rem;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--foam);
    color: var(--turquoise-deep);
    font-family: var(--display);
    font-size: .85rem;
    font-weight: 650;
}

.callout {
    margin: 1.75rem 0;
    padding: 1.15rem 1.35rem;
    border-left: 3px solid var(--turquoise);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: linear-gradient(90deg, rgba(42, 212, 196, .09), rgba(42, 212, 196, .02));
}

.callout h4 {
    margin: 0 0 .4rem;
    color: var(--ink);
}

.callout p {
    margin: 0;
    color: var(--ink-soft);
}

.bullet-block {
    margin: 1.5rem 0;
    padding: 1.15rem 1.35rem;
    background: var(--paper-sink);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.bullet-block h4 {
    margin: 0 0 .6rem;
}

.bullet-block ul {
    margin: 0;
    padding-left: 1.15em;
}

/* ------------------------------------------------------------- status pill */

.status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    font-weight: 620;
    padding: .35rem .75rem;
    border-radius: 999px;
    border: 1px solid;
}

.status::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
}

.status--stable {
    color: var(--stable);
    border-color: color-mix(in srgb, var(--stable) 35%, transparent);
    background: color-mix(in srgb, var(--stable) 8%, transparent);
}

.status--watch {
    color: var(--watch);
    border-color: color-mix(in srgb, var(--watch) 35%, transparent);
    background: color-mix(in srgb, var(--watch) 8%, transparent);
}

.status--risk {
    color: var(--risk);
    border-color: color-mix(in srgb, var(--risk) 35%, transparent);
    background: color-mix(in srgb, var(--risk) 8%, transparent);
}

.status--severe {
    color: var(--severe);
    border-color: color-mix(in srgb, var(--severe) 38%, transparent);
    background: color-mix(in srgb, var(--severe) 9%, transparent);
}

.status--unknown {
    color: var(--unknown);
    border-color: color-mix(in srgb, var(--unknown) 35%, transparent);
    background: color-mix(in srgb, var(--unknown) 8%, transparent);
}

.on-dark .status {
    background: rgba(255, 255, 255, .08);
}

/* -------------------------------------------------------- comparison table */

.versus {
    position: relative;
    overflow: clip;
    padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(3rem, 6vw, 4.5rem);
}

.versus__head {
    text-align: center;
    max-width: 62ch;
    margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
}

.versus__head h1 {
    font-size: clamp(1.85rem, 4.4vw, 3rem);
}

.versus__stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(.5rem, 2vw, 1.5rem);
}

.versus__animal {
    text-align: center;
    text-decoration: none;
}

.versus__animal img {
    width: 100%;
    border-radius: var(--r-lg);
    mask-image: radial-gradient(122% 110% at 50% 50%, #000 44%, transparent 78%);
    -webkit-mask-image: radial-gradient(122% 110% at 50% 50%, #000 44%, transparent 78%);
    transition: transform .4s var(--ease);
}

.versus__animal:last-child img {
    transform: scaleX(-1);
}

.versus__animal:hover img {
    transform: scale(1.03);
}

.versus__animal:last-child:hover img {
    transform: scaleX(-1) scale(1.03);
}

.versus__name {
    font-family: var(--display);
    font-size: clamp(1.05rem, 2.2vw, 1.5rem);
    font-weight: 600;
    color: #f2f9fc;
    margin: .6rem 0 .15rem;
}

.versus__latin {
    font-size: .82rem;
    font-style: italic;
    color: #93b4c6;
    margin: 0;
}

.versus__pivot {
    display: grid;
    place-items: center;
    gap: .75rem;
}

.versus__badge {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(4, 18, 31, .6);
    border: 1px solid rgba(42, 212, 196, .45);
    color: var(--turquoise-bright);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 0 30px rgba(42, 212, 196, .32);
}

.versus__tools {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

@media (max-width: 700px) {
    .versus__stage {
        grid-template-columns: 1fr 1fr;
        gap: .75rem;
    }

    .versus__pivot {
        grid-column: 1 / -1;
        grid-row: 1;
        flex-direction: row;
    }

    .versus__tools {
        flex-direction: row;
    }
}

.highlight-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .85rem;
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.highlight {
    padding: .95rem 1.1rem;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #d8e9f2;
    font-size: .92rem;
    line-height: 1.5;
}

/* The comparison table proper */
.compare-table {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.compare-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.15rem;
    background: var(--paper-sink);
    border-bottom: 1px solid var(--line);
}

.compare-controls p {
    margin: 0;
    font-size: .85rem;
    color: var(--ink-mute);
}

.switch {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .875rem;
    font-weight: 560;
    color: var(--ink-soft);
    cursor: pointer;
}

.switch input {
    appearance: none;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--line);
    position: relative;
    transition: background .2s var(--ease);
    cursor: pointer;
}

.switch input::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    transition: translate .2s var(--ease);
}

.switch input:checked {
    background: var(--turquoise-deep);
}

.switch input:checked::after {
    translate: 18px 0;
}

.c-row {
    display: grid;
    grid-template-columns: 1fr minmax(150px, .8fr) 1fr;
    align-items: stretch;
    border-bottom: 1px solid var(--line-soft);
}

.c-row:last-child {
    border-bottom: 0;
}

.c-row__axis {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: .3rem;
    padding: 1rem .8rem;
    background: var(--paper-sink);
    border-inline: 1px solid var(--line-soft);
}

.c-row__axis strong {
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.c-row__note {
    font-size: .78rem;
    line-height: 1.4;
    color: var(--ink-soft);
    margin: 0;
}

.c-side {
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.c-side--right {
    text-align: right;
    align-items: flex-end;
}

.c-side__value {
    font-family: var(--display);
    font-size: 1.24rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
}

.c-side__alt {
    font-size: .8rem;
    color: var(--ink-mute);
}

.c-side__hint {
    font-size: .78rem;
    line-height: 1.45;
    color: var(--ink-mute);
    margin: .1rem 0 0;
}

.c-side--lead .c-side__value {
    color: var(--turquoise-deep);
}

.c-side--unknown .c-side__value {
    font-family: var(--sans);
    font-size: .92rem;
    font-weight: 500;
    color: var(--ink-mute);
}

/* Proportional indicator bar */
.bar {
    width: 100%;
    max-width: 240px;
    height: 7px;
    border-radius: 999px;
    background: var(--line-soft);
    overflow: hidden;
}

.c-side--right .bar {
    direction: rtl;
}

.bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--tide), var(--turquoise));
}

.c-side--lead .bar span {
    background: linear-gradient(90deg, var(--turquoise-deep), var(--turquoise-bright));
}

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

.c-side--right .chip-list {
    justify-content: flex-end;
}

.chip {
    font-size: .78rem;
    padding: .28rem .6rem;
    border-radius: 999px;
    background: var(--paper-sink);
    border: 1px solid var(--line);
    color: var(--ink-soft);
}

.chip--unique {
    background: color-mix(in srgb, var(--turquoise) 12%, transparent);
    border-color: color-mix(in srgb, var(--turquoise-deep) 40%, transparent);
    color: var(--turquoise-deep);
    font-weight: 560;
}

@media (max-width: 780px) {
    .c-row {
        grid-template-columns: 1fr;
    }

    .c-row__axis {
        border-inline: 0;
        border-block: 1px solid var(--line-soft);
        align-items: flex-start;
        text-align: left;
    }

    .c-side--right {
        text-align: left;
        align-items: flex-start;
    }

    .c-side--right .bar {
        direction: ltr;
    }

    .c-side--right .chip-list {
        justify-content: flex-start;
    }

    /* Name each column when they are no longer side by side. */
    .c-side::before {
        content: attr(data-animal);
        font-size: .72rem;
        font-weight: 650;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--ink-mute);
    }
}

/* Hides matching rows when the reader asks for differences only. */
.compare-table[data-differences-only="true"] .c-row[data-differs="false"] {
    display: none;
}

/* ------------------------------------------------------------- filter bar */

.filters {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.filters__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: .85rem;
    align-items: end;
}

.filters__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
}

.result-count {
    font-size: .9rem;
    color: var(--ink-mute);
    margin: 0;
}

.result-count strong {
    color: var(--ink);
}

.empty {
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    background: var(--paper-sink);
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
}

.empty h3 {
    margin-bottom: .5rem;
}

.empty p {
    color: var(--ink-soft);
    margin: 0 auto 1.25rem;
    max-width: 44ch;
}

/* ------------------------------------------------------------- breadcrumbs */

.crumbs {
    padding-block: 1rem;
    font-size: .84rem;
}

.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crumbs li:not(:last-child)::after {
    content: "/";
    margin-left: .4rem;
    color: var(--ink-mute);
    opacity: .6;
}

.crumbs a {
    color: var(--ink-mute);
    text-decoration: none;
}

.crumbs a:hover {
    color: var(--turquoise-deep);
}

.crumbs [aria-current="page"] {
    color: var(--ink-soft);
    font-weight: 560;
}

.on-dark .crumbs a {
    color: #93b4c6;
}

.on-dark .crumbs [aria-current="page"] {
    color: #cfe4ee;
}

.on-dark .crumbs li:not(:last-child)::after {
    color: #6d90a5;
}

/* ------------------------------------------------------------- source list */

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

.sources li {
    padding: .9rem 0;
    border-bottom: 1px solid var(--line-soft);
}

.sources li:last-child {
    border-bottom: 0;
}

.sources__title {
    font-weight: 620;
    color: var(--ink);
}

.sources__publisher {
    font-size: .875rem;
    color: var(--ink-soft);
}

.sources__note {
    font-size: .85rem;
    color: var(--ink-mute);
    margin: .3rem 0 0;
}

.review-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-size: .85rem;
    color: var(--ink-mute);
}

/* --------------------------------------------------------------- people */

.people {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.person {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.3rem 1.4rem;
    box-shadow: var(--shadow-sm);
}

.person h3 {
    font-size: 1.1rem;
    margin: 0 0 .2rem;
}

.person__role {
    font-size: .8rem;
    font-weight: 650;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--turquoise-deep);
    margin: 0 0 .8rem;
}

.person p {
    font-size: .92rem;
    color: var(--ink-soft);
    margin: 0 0 .9rem;
}

/* ----------------------------------------------------------------- footer */

.footer {
    margin-top: var(--section);
    padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
}

.footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: clamp(1.75rem, 4vw, 3rem);
    padding-bottom: 2.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.footer__blurb {
    color: #a8c6d6;
    font-size: .95rem;
    max-width: 40ch;
    margin: .85rem 0 0;
}

.footer h2 {
    font-family: var(--sans);
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7fa3b8;
    margin: 0 0 .9rem;
}

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

.footer li {
    margin-bottom: .55rem;
}

.footer a {
    color: #c3dbe8;
    font-size: .9rem;
    text-decoration: none;
}

.footer a:hover {
    color: var(--turquoise-bright);
}

.footer__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.75rem;
    font-size: .84rem;
    color: #7fa3b8;
}

.footer__base p {
    margin: 0;
}

/* -------------------------------------------------------------- utilities */

.stack > * + * {
    margin-top: 1.25rem;
}

.text-center {
    text-align: center;
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

/* ------------------------------------------------------------- motion pref */

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* -------------------------------------------------------------------- print */

@media print {
    .masthead,
    .footer,
    .picker,
    .compare-controls,
    .btn {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .on-dark {
        background: #fff !important;
        color: #000 !important;
    }
}