:root {
    --paper: #f6f4ef;
    --ink: #292927;
    --muted: #6f716d;
    --line: rgba(41, 41, 39, 0.16);
    --rose: #9a4a4a;
    --rose-bright: #c45f5a;
    --kelp: #5f6954;
    --sea: #647a77;
    --white: #fffdf9;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Lato", sans-serif;
    font-weight: 300;
    line-height: 1.55;
    /* The hero video bleeds to the viewport edge using 100vw, which counts the
       scrollbar; clip the few stray pixels rather than show a scrollbar.
       `clip` (not `hidden`) avoids creating a scroll container. */
    overflow-x: clip;
}

body:has(dialog[open]) {
    overflow: hidden;
}

a,
button {
    color: inherit;
}

button {
    font: inherit;
}

img {
    display: block;
    width: 100%;
}

.site-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.2rem 1.1rem;
    padding: 2.35rem 1rem 1.2rem;
}

.site-nav a {
    position: relative;
    padding: 0.5rem 0.2rem;
    color: var(--muted);
    font-size: 1.02rem;
    font-weight: 300;
    text-decoration: none;
}

.site-nav a::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: var(--rose-bright);
    content: "";
    opacity: 0;
    transform: scaleX(0.4);
    transition: 180ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
    color: var(--rose);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current="page"]::after {
    opacity: 1;
    transform: scaleX(1);
}

main,
footer {
    width: min(1380px, calc(100% - 3rem));
    margin-inline: auto;
}

.study-hero {
    display: grid;
    grid-template-columns: minmax(13rem, 0.55fr) minmax(31rem, 1.45fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    min-height: calc(100vh - 7rem);
    padding: clamp(3rem, 7vw, 7rem) 0 clamp(5rem, 9vw, 9rem);
}

.eyebrow {
    margin: 0 0 1rem;
    color: var(--rose);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

h1,
h2 {
    font-family: "Newsreader", Georgia, serif;
    font-weight: 300;
    line-height: 0.98;
}

h1 {
    margin: 0 0 1.7rem;
    font-size: clamp(4.8rem, 10.5vw, 10.5rem);
    letter-spacing: -0.055em;
}

h2 {
    margin: 0;
    font-size: clamp(2.5rem, 4.5vw, 5.2rem);
    letter-spacing: -0.035em;
}

.lede {
    max-width: 34rem;
    margin: 0;
    color: #4e504d;
    font-family: "Newsreader", Georgia, serif;
    font-size: clamp(1.45rem, 2.2vw, 2.1rem);
    line-height: 1.25;
}

.hero-note {
    max-width: 30rem;
    margin: 2rem 0;
    color: var(--muted);
    font-size: 0.94rem;
}

.jump-link,
.text-button {
    display: inline-flex;
    gap: 0.75rem;
    align-items: center;
    border: 0;
    border-bottom: 1px solid currentColor;
    padding: 0 0 0.2rem;
    background: none;
    color: var(--rose);
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 400;
    text-decoration: none;
}

.jump-link span,
.text-button span {
    transition: transform 180ms ease;
}

.jump-link:hover span,
.text-button:hover span {
    transform: translate(0.18rem, 0.16rem);
}

/* Hero video. Shot in portrait; laid on its side at desktop widths so it spans
   the full width of the hero column. The container is landscape, and the video
   is given the container's swapped dimensions (width = container height,
   height = container width) before being rotated about its centre, so the
   rotated frame fills the container exactly with no letterboxing. */
.hero-video {
    position: relative;
    container-type: size;
    overflow: hidden;
    aspect-ratio: 1024 / 576;
    background: #d9d7d0;
    /* Bleed off the right edge of the viewport. The hero column keeps its
       grid position, but the footage runs past the page gutter to the screen
       edge, which reads as framing rather than as a full-bleed video header. */
    margin-right: calc(-1 * max(1.5rem, (100vw - 1380px) / 2));
}

/* Autoplay is only permitted while muted, so the video starts silent and this
   toggle unmutes it on a user gesture. */
.sound-toggle {
    position: absolute;
    z-index: 2;
    right: clamp(0.75rem, 1.4vw, 1.35rem);
    bottom: clamp(0.75rem, 1.4vw, 1.35rem);
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    border: 0;
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    background: rgba(20, 22, 21, 0.55);
    color: #f4f2ec;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 300;
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
    transition: background 200ms ease, opacity 200ms ease;
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
    background: rgba(20, 22, 21, 0.78);
}

.sound-icon {
    display: inline-flex;
}

/* Slash shown only while muted; waves only once sound is on. */
.sound-toggle[aria-pressed="false"] .wave-1,
.sound-toggle[aria-pressed="false"] .wave-2 {
    display: none;
}

.sound-toggle[aria-pressed="true"] .muted-slash {
    display: none;
}

/* Swap the container's own dimensions onto the video, then rotate about its
   centre. Using cq units (rather than fixed percentages) keeps this correct
   at any container aspect ratio, so the hero can be resized freely. */
.hero-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100cqh;
    height: 100cqw;
    transform: translate(-50%, -50%) rotate(90deg);
    object-fit: cover;
    opacity: 0.94;
}

.featured-specimen {
    display: grid;
    grid-template-columns: minmax(20rem, 1.12fr) minmax(18rem, 0.88fr);
    gap: clamp(2.5rem, 7vw, 7.5rem);
    align-items: center;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: clamp(5rem, 10vw, 10rem) 0;
}

.featured-image {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--white);
}

.featured-image img {
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
}

.featured-copy p:not(.eyebrow) {
    max-width: 31rem;
    margin: 2rem 0;
    color: var(--muted);
    font-size: 1.08rem;
}

.specimen-section {
    padding: clamp(6rem, 11vw, 11rem) 0;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    align-items: end;
    margin-bottom: 3rem;
}

.section-heading > p {
    max-width: 23rem;
    margin: 0 0 0.4rem;
    color: var(--muted);
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

.filter {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.55rem 0.95rem;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    transition: 160ms ease;
}

.filter:hover,
.filter:focus-visible,
.filter.is-active {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
}

.specimen-grid {
    display: grid;
    grid-auto-flow: dense;
    grid-auto-rows: 7px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.specimen-card {
    position: relative;
    grid-row: span 39;
    overflow: hidden;
    border: 0;
    padding: 0;
    background: #e8e5dd;
    cursor: pointer;
    text-align: left;
}

.specimen-card:nth-child(5n + 2),
.specimen-card:nth-child(5n + 4) {
    grid-row: span 50;
}

.specimen-card:nth-child(7n) {
    grid-column: span 2;
    grid-row: span 47;
}

.specimen-card[hidden] {
    display: none;
}

.specimen-card img {
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9);
    transition: transform 550ms cubic-bezier(.2, .65, .3, 1), filter 220ms ease;
}

.specimen-card::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(16, 18, 17, 0.72), transparent 48%);
    content: "";
    opacity: 0;
    transition: opacity 200ms ease;
}

.card-label {
    position: absolute;
    z-index: 1;
    right: 1rem;
    bottom: 0.9rem;
    left: 1rem;
    color: white;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: 200ms ease;
}

.card-label em {
    display: block;
    font-family: "Newsreader", Georgia, serif;
    font-size: 1.45rem;
    line-height: 1.05;
}

.card-label span {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.specimen-card:hover img,
.specimen-card:focus-visible img {
    filter: saturate(1.08);
    transform: scale(1.035);
}

.specimen-card:hover::after,
.specimen-card:focus-visible::after,
.specimen-card:hover .card-label,
.specimen-card:focus-visible .card-label {
    opacity: 1;
}

.specimen-card:hover .card-label,
.specimen-card:focus-visible .card-label {
    transform: translateY(0);
}

.containment-note {
    display: grid;
    grid-template-columns: 0.35fr 0.65fr;
    gap: 4rem;
    border-top: 1px solid var(--line);
    padding: clamp(5rem, 10vw, 9rem) 0;
}

.containment-note .eyebrow {
    grid-column: 1;
}

.containment-note h2,
.containment-note > p:last-child {
    grid-column: 2;
}

.containment-note > p:last-child {
    max-width: 46rem;
    margin: 1.5rem 0 0;
    color: var(--muted);
    font-size: 1.06rem;
}

footer {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    border-top: 1px solid var(--line);
    padding: 2rem 0 4rem;
    color: var(--muted);
    font-size: 0.76rem;
}

footer p {
    max-width: 46rem;
    margin: 0;
}

footer a {
    color: var(--rose);
}

dialog {
    width: min(1120px, calc(100% - 2rem));
    max-width: none;
    max-height: min(88vh, 900px);
    overflow: auto;
    border: 0;
    padding: 0;
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 1.5rem 7rem rgba(20, 24, 23, 0.3);
}

dialog::backdrop {
    background: rgba(27, 31, 30, 0.76);
    backdrop-filter: blur(5px);
}

.dialog-close {
    position: fixed;
    z-index: 3;
    top: max(1rem, calc(6vh + 0.75rem));
    right: max(1rem, calc((100vw - min(1120px, 100vw - 2rem)) / 2 + 0.75rem));
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 253, 249, 0.88);
    color: var(--ink);
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
}

.dialog-layout {
    display: grid;
    grid-template-columns: minmax(20rem, 1.03fr) minmax(20rem, 0.97fr);
    min-height: 660px;
}

.dialog-figure {
    position: relative;
    min-height: 500px;
    margin: 0;
    background: #e5e2da;
}

.dialog-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dialog-figure figcaption {
    position: absolute;
    right: 0.8rem;
    bottom: 0.7rem;
    max-width: calc(100% - 1.6rem);
    padding: 0.28rem 0.48rem;
    background: rgba(255, 253, 249, 0.82);
    color: #444;
    font-size: 0.66rem;
}

.dialog-copy {
    align-self: center;
    padding: clamp(3rem, 7vw, 6.5rem);
}

.dialog-copy h2 {
    font-size: clamp(2.8rem, 5vw, 5.2rem);
    overflow-wrap: anywhere;
}

.common-name {
    margin: 0.7rem 0 2rem;
    color: var(--rose);
    font-size: 0.84rem;
    font-weight: 400;
}

#dialog-description {
    color: var(--muted);
    font-size: 1rem;
}

.culture-facts {
    margin: 2.2rem 0;
    border-top: 1px solid var(--line);
}

.culture-facts div {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
    padding: 0.8rem 0;
}

.culture-facts dt {
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.culture-facts dd {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.dialog-links {
    display: grid;
    gap: 0.6rem;
}

.dialog-links a {
    color: var(--rose);
    font-size: 0.82rem;
    text-underline-offset: 0.2rem;
}

#dialog-sourcing {
    display: grid;
    gap: 0.45rem;
}

@media (max-width: 980px) {
    .study-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    /* Single-column hero: stand the video back up, unrotated, and let it fill
       the column width so it reads as a tall vertical piece rather than a
       small box with dead space beside it. */
    .hero-video {
        aspect-ratio: 576 / 1024;
        width: 100%;
        max-height: none;
        margin-right: 0;
    }

    .hero-video video {
        position: static;
        width: 100%;
        height: 100%;
        transform: none;
    }

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

    .dialog-layout {
        grid-template-columns: 0.9fr 1.1fr;
    }
}

@media (max-width: 720px) {
    main,
    footer {
        width: min(100% - 1.5rem, 42rem);
    }

    .site-nav {
        gap: 0 0.45rem;
        padding-top: 1.25rem;
    }

    .site-nav a {
        font-size: 0.82rem;
    }

    .study-hero {
        gap: 3rem;
        padding-top: 4rem;
    }

    h1 {
        font-size: clamp(4.7rem, 25vw, 7rem);
    }

    .hero-video {
        max-height: 62vh;
    }

    .featured-specimen,
    .dialog-layout {
        grid-template-columns: 1fr;
    }

    .section-heading,
    footer {
        display: grid;
    }

    .specimen-grid {
        grid-auto-rows: 5px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .specimen-card {
        grid-row: span 38;
    }

    .specimen-card:nth-child(5n + 2),
    .specimen-card:nth-child(5n + 4) {
        grid-row: span 47;
    }

    .specimen-card:nth-child(7n) {
        grid-column: auto;
        grid-row: span 42;
    }

    .card-label {
        right: 0.7rem;
        bottom: 0.65rem;
        left: 0.7rem;
    }

    .card-label em {
        font-size: 1.05rem;
    }

    .containment-note {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .containment-note .eyebrow,
    .containment-note h2,
    .containment-note > p:last-child {
        grid-column: 1;
    }

    .dialog-layout {
        min-height: 0;
    }

    .dialog-figure {
        min-height: 48vh;
    }

    .dialog-copy {
        padding: 2.3rem 1.4rem 3rem;
    }

    .dialog-close {
        position: fixed;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}