/* #region Page shell & thesis */
.research-page {
    --research-nav-offset: 78px;
    --research-rail-width: 260px;
    --flag-1: var(--gold);
    --flag-2: var(--white);
    --flag-3: var(--gold);
    --flag-stops: var(--flag-1) 0 33.33%, var(--flag-2) 33.33% 66.66%, var(--flag-3) 66.66%;
}

    .research-page [hidden] {
        display: none !important;
    }

    .research-page .research-shell {
        overflow: clip;
        background: var(--black);
    }

        .research-page .research-shell > section:not(.hero-cinematic),
        .research-page .research-shell > nav,
        .research-page .research-shell > aside {
            border-bottom: 1px solid var(--line);
        }

        /* Except the concierge, which is followed by the Filmable band — and that band draws its own
           gilded rule across the top. Two lines a hair apart are not a seam, they are a fault. */
        .research-page .research-shell > .core-interface {
            border-bottom: 0;
        }

        .research-page .research-shell .container:not(.hero-content) {
            width: min(90vw, var(--section-content-max));
            max-width: none;
            margin-inline: auto;
            padding-inline: 0;
        }

    .research-page .hero-cinematic--research .h-title {
        max-width: 11ch;
    }

    .research-page .research-exhibit .hero-exhibit-stage {
        background: linear-gradient(158deg, var(--black-mid), var(--black-deep));
    }

    .research-page .research-standard {
        position: absolute;
        inset: 5%;
        overflow: hidden;
        isolation: isolate;
        background: var(--black-deep);
    }

    .research-page .research-standard-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        filter: var(--photo-mute) var(--photo-at-rest);
    }

    .research-page .research-standard-field {
        position: absolute;
        inset: 0;
        background: linear-gradient(158deg, color-mix(in srgb, var(--black-deep) 62%, transparent), color-mix(in srgb, var(--black-deep) 88%, transparent)), radial-gradient(88% 72% at 88% 8%, color-mix(in srgb, var(--flag-1) 26%, transparent), transparent 62%), radial-gradient(70% 62% at 6% 96%, color-mix(in srgb, var(--flag-3) 20%, transparent), transparent 60%);
    }

    .research-page .research-standard-frame {
        position: absolute;
        inset: 7%;
        border: 1px solid var(--hairline-mid);
    }

        .research-page .research-standard-frame::before {
            position: absolute;
            inset: 4%;
            content: "";
            border: 1px solid var(--hairline-faint);
        }

    .research-page .research-standard-bars {
        position: absolute;
        top: 7%;
        bottom: 7%;
        left: 7%;
        width: 14px;
        overflow: hidden;
        background: linear-gradient(180deg, var(--flag-stops));
        opacity: .82;
    }

        .research-page .research-standard-bars i {
            display: none;
        }

    .research-page .research-thesis {
        padding-block: var(--section-space);
        background: var(--surface-editorial);
    }

    /* Two columns where there are two blocks — the report page still stands its context beside its
       register. The index has one block since the methodology went, and rather than switching the
       grid by page (or by :has, which selects a container by what is inside it), the block itself
       says it is alone: see :only-child below. */
    .research-page .research-thesis-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(3rem, 6vw, 7rem);
    }

    .research-page .research-thesis-block {
        position: relative;
        padding-top: 2.6rem;
        border-top: 1px solid var(--line);
    }

        .research-page .research-thesis-block::before {
            position: absolute;
            top: -1px;
            left: 0;
            width: 52px;
            height: 1px;
            content: "";
            background: var(--gold);
        }

        /* A rule and its gold tick divide two blocks from each other. A block standing alone has nothing
           to be divided from, and the line then reads as a stray element above the eyebrow — no other
           heading on the site has one. Written as :only-child rather than as a modifier class, so it
           comes back by itself on the day a second block does; the report page still has two. */
        /* A block standing alone takes the whole row rather than the left half of it, and loses the
           rule and its gold tick, which exist to divide it from a neighbour it does not have. */
        .research-page .research-thesis-grid > .research-thesis-block:only-child {
            grid-column: 1 / -1;
            padding-top: 0;
            border-top: 0;
        }

            .research-page .research-thesis-grid > .research-thesis-block:only-child::before {
                content: none;
            }

        /* The second block follows the first rather than arriving with it, so the pair reads in the
           order it is numbered. The delay is written here, not in the markup, like the legal nav's. */
        .research-page .research-thesis-block.reveal-elem:nth-child(2) {
            transition-delay: .12s;
        }

    .research-page .research-thesis-number {
        display: block;
        margin-bottom: 2rem;
        color: rgba(245, 245, 245, .5);
        font-family: var(--font);
        font-size: .62rem;
        font-weight: 500;
        letter-spacing: .18em;
    }


    .research-page .research-thesis h2 {
        max-width: 14ch;
        color: var(--white);
        font-family: var(--font-display);
        font-size: var(--section-title-size);
        font-weight: 300;
        letter-spacing: -.035em;
        line-height: var(--section-title-line-height);
        /* No hyphenation in a display heading — see the same note in segment.css. */
        overflow-wrap: break-word;
    }

    .research-page .research-thesis p {
        max-width: 58ch;
        margin-top: 2.2rem;
        color: var(--text-muted);
        font-family: var(--font);
        font-size: clamp(1rem, 1.1vw, 1.1rem);
        font-weight: 300;
        line-height: 1.9;
    }

    /* Squares, because every picture in this house is one. Three across on a desk and two on a phone:
       six kinds of place read as a set at three, and as a list again at four. */
    .research-page .research-category-tiles {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(.8rem, 1.6vw, 1.4rem);
        /* The house's own distance from a heading block to what the section shows, rather than a figure
           written out here. At 2.2rem the tiles sat almost against the lead paragraph, while every other
           section on the site breathes by this token. */
        margin-top: var(--section-head-gap);
        padding: 0;
        list-style: none;
    }

    .research-page .research-category-tile {
        position: relative;
        overflow: hidden;
        aspect-ratio: 1;
        border: 1px solid var(--hairline);
    }

        /* One box for both states, so an open tile and a waiting one are the same object in two
           conditions rather than two components that happen to look alike. */
        .research-page .research-category-tile > a,
        .research-page .research-category-tile > span {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            gap: .35rem;
            padding: clamp(.9rem, 1.6vw, 1.3rem);
            color: var(--white);
            text-decoration: none;
        }

        .research-page .research-category-tile img {
            position: absolute;
            inset: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: var(--photo-under-type);
            transition: filter var(--motion-slow) var(--ease-house), transform 1.8s var(--ease-house);
        }

        .research-page .research-category-tile > a:hover img {
            filter: var(--photo-as-ground);
            transform: scale(1.025);
        }

    /* The name sits inside the mount, not under it: the house's hairline is set in from the tile's edge
       (product-sections.css draws it, this tile only joins that rule's selector list), so the padding
       has to clear it or the words run across the line. */
    .research-page .research-category-tile > a,
    .research-page .research-category-tile > span {
        padding: clamp(1.6rem, 2.4vw, 2rem);
    }

    .research-page .research-category-name {
        position: relative;
        z-index: 3;
        font-family: var(--font-display);
        font-size: clamp(1rem, 1.5vw, 1.35rem);
        font-weight: 300;
        line-height: 1.2;
    }

    /* A kind of place the index does not hold yet. It keeps its square and its name and loses what the
       page cannot honour: the link, the arrow and the photograph. The house lattice takes the picture's
       place — the same two diagonals as the hero, at a tighter raster because the field is smaller —
       which is what an entry with nothing behind it should look like. */
    .research-page .research-category-tile.is-upcoming {
        border-color: var(--line);
        background-color: var(--black);
        background-image: linear-gradient(45deg, transparent calc(50% - .5px), var(--hairline-strong) 50%, transparent calc(50% + .5px)), linear-gradient(-45deg, transparent calc(50% - .5px), var(--hairline-strong) 50%, transparent calc(50% + .5px));
        background-position: center;
        background-size: 48px 48px;
    }

        .research-page .research-category-tile.is-upcoming .research-category-name {
            color: var(--text-muted);
        }

    .research-page .research-category-soon {
        position: relative;
        z-index: 3;
        color: rgba(245, 245, 245, .5);
        font-family: var(--font);
        font-size: .55rem;
        letter-spacing: .2em;
        opacity: .8;
        text-transform: uppercase;
    }

@media (max-width: 760px) {
    .research-page .research-category-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

    /* Air on both sides of the tiles. What follows this section is the concierge, not the Filmable
       strip — the strip comes after that — so taking the bottom measure away left the last row of
       squares sitting directly on „Masz pytanie o badania?". */
    .research-page .research-atlas {
        padding-block: var(--section-space);
        background: var(--black);
    }

    /* A shelf. The ribbons stand side by side with a hairline of page between them, in the house
       gutter like every other block on this page. Run edge to edge and welded by a one-pixel gap over a
       ruled background, it is a table, not a shelf. */
    .research-page .research-atlas-flags {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: clamp(.35rem, .8vw, .7rem);
        width: min(90vw, var(--section-content-max));
        margin-inline: auto;
        padding: 0;
        list-style: none;
    }

    /* One spine: the bands above, the country's name beneath, and nothing else — no photograph, no
       code, no caption plate. */
    .research-page .research-flag-spine {
        display: flex;
        flex-direction: column;
        gap: .7rem;
        text-decoration: none;
    }

    /* The flag itself, drawn from the palette rather than fetched: three tones and the proportion of
       that country's bands, which is all a flag is once it is this small. Tall and narrow, so twelve
       of them read as volumes on a shelf. At rest they are held back to a little over a third — a row
       of twelve national colours at full strength is the loudest thing the house would ever print. */
    .research-page .research-flag-band {
        display: block;
        aspect-ratio: 1 / 3.4;
        background: linear-gradient(180deg, var(--flag-stops));
        box-shadow: inset 0 0 0 1px rgba(245, 245, 245, .06);
        opacity: .38;
        filter: saturate(.7);
        transition: opacity var(--motion-quick) var(--ease-house), filter var(--motion-quick) var(--ease-house), transform var(--motion-quick) var(--ease-house);
    }

    .research-page .research-flag-name {
        color: var(--text-muted);
        font-family: var(--font);
        font-size: .58rem;
        letter-spacing: .14em;
        line-height: 1.3;
        text-transform: uppercase;
        overflow-wrap: anywhere;
        transition: color var(--motion-quick) var(--ease-house);
    }

    /* The country being read stands out of the shelf: full colour, a gold hairline, and a step forward
       of two pixels. The one under a pointer does the same, so the shelf answers a hand before it is
       clicked. */
    .research-page .research-flag-spine:hover .research-flag-band,
    .research-page .research-flag-spine.is-active .research-flag-band {
        opacity: 1;
        filter: saturate(1);
        transform: translateY(-2px);
    }

    .research-page .research-flag-spine.is-active .research-flag-band {
        box-shadow: inset 0 0 0 1px var(--gold);
    }

    .research-page .research-flag-spine:hover .research-flag-name,
    .research-page .research-flag-spine.is-active .research-flag-name {
        color: var(--gold);
    }

/* Twelve abreast only once a column is wider than „SZWAJCARIA" or „DEUTSCHLAND". */
@media (max-width: 1279px) {
    .research-page .research-atlas-flags {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        row-gap: clamp(1.2rem, 3vw, 2rem);
    }
}

@media (max-width: 520px) {
    .research-page .research-atlas-flags {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Four columns of 70px split „SZWAJCARIA" in the middle. */
@media (max-width: 400px) {
    .research-page .research-atlas-flags {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

    /* No photographic flag tiles here: the shelf of spines above needs no swatch, no scrim and no caption
       plate. */

    .research-page .filmable-callout {
        margin-top: var(--section-space);
    }

    .research-page.research-report .filmable-callout {
        margin-top: 0;
    }

    /* The book line now stands between the conversation and this banner, and it carries its own air
       above and below. A full section's margin measured from a single line of text put that whole
       space under the strip as well, so the line floated in a void twice its own height. Where the
       strip is there, it is the separation. */
    .research-page .home-book-strip + .filmable-callout {
        margin-top: 0;
    }

    /* And where the conversation is what the band follows — the category page, which carries no book
       line — the same margin would be paid twice: the concierge already ends with a full section of its own
       padding, and a margin here adds another on top of it. Zero, like the two exceptions above,
       because the separation is the conversation's own foot; anything less than that foot takes air
       away from the chat rather than from the seam. */
    .research-page .core-interface + .filmable-callout {
        margin-top: 0;
    }

    /* The same tiles as the kinds of place on the research index, in the same rhythm: separate squares
       with air between them and a hairline of their own. Six across, welded into a mesh by a one-pixel gap
       over a ruled background, twelve countries arrive as two dense bands — a table of contents rather
       than a set of places, beside a page whose every other block is spaced. Three across, the same as the
       kinds of place, so the twelve countries fall into four full rows: a ragged last row is what makes a
       grid look like a leftover. */
    .research-page .research-country-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(.8rem, 1.6vw, 1.4rem);
        padding: 0;
        margin-block: 0;
        list-style: none;
    }

@media (max-width: 760px) {
    .research-page .research-country-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* #endregion */

/* #region Country tiles */
/* Square, like every picture in this house. 4:3 is the one proportion the visual system does not use. */
.research-page .research-country-tile {
    position: relative;
    display: flex;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--hairline);
    text-decoration: none;
    background: var(--black);
    isolation: isolate;
}

.research-page .research-country-photo {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--photo-mute) var(--photo-under-type);
    transition: transform 1.8s var(--ease-house), filter var(--motion-slow) var(--ease-house), opacity var(--motion) var(--ease-house);
}

.research-page .research-country-tile::before {
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
    background: linear-gradient(180deg, rgba(5, 5, 5, .1), rgba(5, 5, 5, .82) 78%);
    transition: background var(--motion) var(--ease-house);
}

/* The flag is the whole square now, not a badge in its corner. It lies under the photograph, so at rest
   the tile is the house's black and only a wash of the country's own colour comes through; under the
   pointer the photograph steps back and the flag rises to meet it. Twelve flags at full strength would
   be more colour than this house spends in a whole page, which is why the resting state shows almost
   none of it. */
.research-page .research-country-flag {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

    .research-page .research-country-flag img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(.75) brightness(.85);
        transform: scale(1.025);
        transition: transform 1.8s var(--ease-house);
    }

.research-page .research-country-caption {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    width: 100%;
    margin-top: auto;
    /* Clear of the mount, the same distance the kinds of place on the research index keep from theirs. */
    padding: clamp(1.6rem, 2.4vw, 2rem);
}

    /* The country is set at the size a kind of place is set at on the index — the two screens name the
       same sort of thing in the same voice. A full step smaller, the country looks like a caption under a
       picture rather than the thing the tile is about. */
    .research-page .research-country-name {
        color: var(--white-bright);
        font-family: var(--font-display);
        font-size: clamp(1rem, 1.5vw, 1.35rem);
        font-weight: 300;
        line-height: 1.2;
        transition: color var(--motion-quick) var(--ease-house);
    }

    /* And the count beneath it, in the micro type the index uses for „w przygotowaniu" and for its own
       counts: one sentence, one style, on both screens. */
    .research-page .research-country-count {
        color: rgba(245, 245, 245, .5);
        font-family: var(--font);
        font-size: .55rem;
        letter-spacing: .2em;
        opacity: .8;
        text-transform: uppercase;
    }

/* The photograph withdraws and the flag comes forward: one movement in two layers, rather than a zoom
   and a badge growing in the corner. */
.research-page .research-country-tile:hover .research-country-photo {
    opacity: .28;
    transform: scale(1.025);
    filter: var(--photo-as-ground);
}

.research-page .research-country-tile:hover .research-country-flag img {
    transform: scale(1);
}

.research-page .research-country-tile:hover::before {
    background: linear-gradient(180deg, rgba(5, 5, 5, .05), rgba(5, 5, 5, .82) 74%);
}

.research-page .research-country-tile:hover .research-country-name {
    color: var(--gold);
}

/* #endregion */

/* #region Catalog & search rail */
.research-page .research-catalog {
    padding-block: var(--section-space) 0;
    background: var(--black);
}

.research-page .research-catalog-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 3rem;
    padding-bottom: 2.6rem;
}

    .research-page .research-catalog-heading h2 {
        position: relative;
        padding-top: 1.6rem;
        color: var(--white);
        font-family: var(--font-display);
        font-size: var(--section-title-size);
        font-weight: 300;
        letter-spacing: -.035em;
        line-height: var(--section-title-line-height);
    }

        .research-page .research-catalog-heading h2::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 84px;
            height: 2px;
            content: "";
            background: linear-gradient(90deg, var(--flag-stops));
        }

.research-page .research-catalog-total {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    color: var(--gold);
}

    .research-page .research-catalog-total span {
        font-family: var(--font-display);
        font-size: clamp(2.8rem, 5vw, 5rem);
        font-weight: 300;
        letter-spacing: -.04em;
        font-variant-numeric: tabular-nums;
    }

    .research-page .research-catalog-total small {
        color: var(--white-faint);
        font-family: var(--font);
        font-size: .56rem;
        font-weight: 500;
        letter-spacing: .15em;
        text-transform: uppercase;
    }

.research-page .research-rail-search {
    margin-bottom: 2.6rem;
}

.research-page .research-rail-search-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--hairline-mid);
    transition: border-color .3s var(--ease-house);
}

    .research-page .research-rail-search-field:focus-within {
        border-color: var(--gold);
    }

    .research-page .research-rail-search-field svg {
        width: 15px;
        flex: 0 0 auto;
        fill: none;
        stroke: rgba(245, 245, 245, .5);
        stroke-width: 1.5;
        transition: stroke .3s var(--ease-house);
    }

    .research-page .research-rail-search-field:focus-within svg {
        stroke: var(--gold);
    }

    .research-page .research-rail-search-field input {
        min-width: 0;
        width: 100%;
        padding: 0;
        padding-right: 1.4rem;
        color: var(--white);
        background: transparent;
        border: 0;
        outline: 0;
        font-family: var(--font);
        font-size: .8rem;
        font-weight: 300;
    }

        .research-page .research-rail-search-field input::placeholder {
            color: var(--white-ghost);
        }

        .research-page .research-rail-search-field input::-webkit-search-cancel-button {
            display: none;
        }

.research-page .research-rail-search-clear {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    color: var(--white-faint);
    font-size: 1rem;
    line-height: 1;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color .3s var(--ease-house);
}

    .research-page .research-rail-search-clear:hover {
        color: var(--gold);
    }

.research-page .research-catalog-body {
    display: grid;
    grid-template-columns: var(--research-rail-width) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2.5rem, 5vw, 5rem);
    padding-block: clamp(4rem, 7vw, 7rem) var(--section-space);
}

.research-page .research-rail {
    position: sticky;
    top: calc(var(--research-nav-offset) + 3rem);
    max-height: calc(100vh - var(--research-nav-offset) - 6rem);
    overflow-y: auto;
    /* Thin rather than none: on a short laptop the rail holds fewer regions than the country has, and a
       hidden scrollbar gives no sign there are more. */
    scrollbar-width: thin;
}

.research-page .research-rail-label {
    display: block;
    padding-bottom: 1.2rem;
    color: rgba(245, 245, 245, .5);
    font-family: var(--font);
    font-size: .55rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
}

.research-page .research-rail-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .research-page .research-rail-list a {
        display: grid;
        grid-template-columns: 10px minmax(0, 1fr) auto;
        align-items: center;
        gap: .9rem;
        padding: .85rem 0;
        color: var(--white-faint);
        font-family: var(--font);
        font-size: .76rem;
        font-weight: 300;
        text-decoration: none;
        border-bottom: 1px solid var(--line);
        transition: color var(--motion-quick) var(--ease-house);
    }

    .research-page .research-rail-list span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .research-page .research-rail-list i {
        width: 6px;
        aspect-ratio: 1;
        border: 1px solid var(--hairline-strong);
        transform: rotate(45deg);
        transition: background var(--motion-quick) var(--ease-house), border-color var(--motion-quick) var(--ease-house);
    }

    .research-page .research-rail-list b {
        color: var(--white-dim);
        font-size: .58rem;
        font-weight: 500;
        letter-spacing: .1em;
        font-variant-numeric: tabular-nums;
        transition: color var(--motion-quick) var(--ease-house);
    }

    .research-page .research-rail-list a:hover,
    .research-page .research-rail-list li.is-active a {
        color: var(--white);
    }

        .research-page .research-rail-list a:hover i {
            background: var(--gold);
            border-color: var(--gold);
        }

    .research-page .research-rail-list li.is-active i {
        background: var(--gold);
        border-color: var(--gold);
    }

    .research-page .research-rail-list li.is-active b {
        color: var(--gold);
    }

.research-page .research-rail-source {
    margin: 1.6rem 0 0;
    padding-top: 1.4rem;
    color: var(--white-ghost);
    font-family: var(--font);
    font-size: .64rem;
    font-weight: 300;
    line-height: 1.7;
    border-top: 1px solid var(--line);
}

    /* An attribution is a duty, not an offer. In gold it is the brightest thing in the rail and reads as
       somewhere we want the reader to go; it keeps the sentence's own colour and says it is a link by being
       underlined. */
    .research-page .research-rail-source a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: .2em;
    }

        .research-page .research-rail-source a:hover {
            color: var(--gold);
        }

/* #endregion */

/* #region Ledger */
.research-page .research-ledger {
    min-width: 0;
}

.research-page .ledger-region {
    position: relative;
    scroll-margin-top: calc(var(--research-nav-offset) + 2rem);
}

    .research-page .ledger-region + .ledger-region {
        margin-top: clamp(4rem, 7vw, 7rem);
    }

.research-page .ledger-region-head {
    position: sticky;
    top: var(--research-nav-offset);
    z-index: 5;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 1.6rem;
    padding-block: 1.4rem 1.6rem;
    background: var(--black);
    border-bottom: 1px solid var(--hairline-mid);
    box-sizing: border-box;
}

    .research-page .ledger-region-head::before {
        position: absolute;
        top: -3rem;
        right: 0;
        left: 0;
        height: 3rem;
        content: "";
        background: var(--black);
    }

.research-page .ledger-region-mark {
    width: 8px;
    aspect-ratio: 1;
    align-self: center;
    background: var(--gold);
    transform: rotate(45deg);
}

.research-page .ledger-region-head h2 {
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.7vw, 2.7rem);
    font-weight: 300;
    letter-spacing: -.025em;
    line-height: 1.1;
}

.research-page .ledger-region-count {
    color: var(--white-faint);
    font-family: var(--font);
    font-size: .55rem;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    white-space: nowrap;
}

    .research-page .ledger-region-count b {
        color: var(--white);
        font-weight: 500;
        font-variant-numeric: tabular-nums;
    }

.research-page .ledger-city {
    margin-top: 3rem;
}

.research-page .ledger-city-name {
    position: sticky;
    top: calc(var(--research-nav-offset) + var(--region-head-h, 4.7rem));
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: 1rem;
    color: var(--white-soft);
    font-family: var(--font);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    background: var(--black);
}

    .research-page .ledger-city-name::after {
        flex: 1 1 auto;
        height: 1px;
        content: "";
        background: var(--line);
    }

    .research-page .ledger-city-name i {
        order: 1;
        color: rgba(245, 245, 245, .5);
        font-size: .58rem;
        font-style: normal;
        font-weight: 500;
        letter-spacing: .12em;
        font-variant-numeric: tabular-nums;
    }

.research-page .ledger-rows {
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
}

/* Two columns now: the row carries the name and the stars, and the call to action moved to the
   foot of the region so it appears once instead of on every hotel. */
.research-page .ledger-row-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    align-items: center;
    gap: 1.5rem;
    padding: 1.15rem 1.2rem 1.15rem 0;
    border-bottom: 1px solid var(--line);
    transition: background var(--motion-quick) var(--ease-house), padding-left var(--motion-quick) var(--ease-house);
}

    .research-page .ledger-row-inner::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 2px;
        content: "";
        background: linear-gradient(180deg, var(--flag-stops));
        transform: scaleY(0);
        transform-origin: top;
        transition: transform var(--motion-quick) var(--ease-house);
    }

.research-page .ledger-row:hover .ledger-row-inner,
.research-page .ledger-row:focus-within .ledger-row-inner {
    padding-left: 1.2rem;
    background: var(--gold-dim);
}

    .research-page .ledger-row:hover .ledger-row-inner::before,
    .research-page .ledger-row:focus-within .ledger-row-inner::before {
        transform: scaleY(1);
    }

.research-page .ledger-name {
    overflow: hidden;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.35vw, 1.35rem);
    font-weight: 300;
    letter-spacing: -.005em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.research-page .ledger-stars-marks {
    display: inline-flex;
    gap: .28rem;
}

    .research-page .ledger-stars-marks i {
        width: 5px;
        aspect-ratio: 1;
        background: var(--gold);
        transform: rotate(45deg);
    }

.research-page .ledger-stars-empty {
    color: var(--white-dim);
    font-size: .7rem;
}

/* #endregion */

/* #region Empty state */
.research-page .research-empty {
    min-height: 320px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1.8rem;
    text-align: center;
}

    .research-page .research-empty span {
        width: 54px;
        aspect-ratio: 1;
        border: 1px solid var(--hairline-strong);
        transform: rotate(45deg);
    }

    .research-page .research-empty p {
        color: var(--text-muted);
        font-family: var(--font);
        font-size: .86rem;
        font-weight: 300;
    }

/* #endregion */

/* #region Responsive */
@media (max-width: 900px) {
    /* Stacked, the rail sits right above the first region heading, whose 3rem black band
       (.ledger-region-head::before) would cover the rail's last line — the source note — under a
       smaller gap. */
    .research-page .research-catalog-body {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 4rem;
    }

    .research-page .research-rail {
        position: static;
        max-height: none;
        overflow-y: visible;
    }

    .research-page .research-rail-search-field input {
        font-size: 1rem;
    }

    .research-page .research-rail-search-clear {
        width: 2.75rem;
        height: 2.75rem;
        right: -.5rem;
    }

    /* Stacked, the rail stands before the ledger, and as a column of rows it put a screen or two of
       region names between the search and the first hotel. The same links as a wrapping row of names
       take a few lines and still say where everything is. */
    .research-page .research-rail-label {
        padding-bottom: .9rem;
        border-bottom: 0;
    }

    .research-page .research-rail-list {
        display: flex;
        flex-wrap: wrap;
        gap: .45rem;
    }

        .research-page .research-rail-list a {
            display: inline-flex;
            gap: .45rem;
            min-height: 40px;
            padding: .5rem .8rem;
            border: 1px solid var(--line);
            font-size: .72rem;
        }

        .research-page .research-rail-list span {
            white-space: normal;
        }

        .research-page .research-rail-list i {
            display: none;
        }

        .research-page .research-rail-list li.is-active a {
            border-color: var(--gold-border);
        }

    .research-page .research-rail-source {
        margin-top: 1.2rem;
    }
}

/* 780px matches the point where site.css switches --section-title-size to its mobile scale,
   so the thesis columns collapse before the enlarged headings can overflow them. */
@media (max-width: 780px) {
    .research-page .research-thesis-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .research-page .research-catalog-heading {
        flex-wrap: wrap;
        align-items: start;
        row-gap: 1.5rem;
        padding-bottom: 2rem;
    }

    /* Header + region head + city name stacked sticky ate a third of a phone screen. */
    .research-page .ledger-city-name {
        position: static;
    }
}

/* A phone held sideways: the header, a region head and a city name stuck together took half the
   screen. Only the header stays. */
@media (max-height: 520px) {
    .research-page .ledger-region-head,
    .research-page .ledger-city-name {
        position: static;
    }
}

/* iOS zooms into a field set under 16px, and an iPad in landscape is wider than the phone rule above. */
@media (hover: none) {
    .research-page .research-rail-search-field input {
        font-size: 1rem;
    }
}

@media (max-width: 520px) {
    .research-page .ledger-row-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: .7rem 1rem;
        padding-block: 1rem;
    }

    .research-page .ledger-name {
        grid-column: 1 / -1;
        white-space: normal;
    }

}

/* Touch devices never hover: show the shelf and the country tiles in their revealed state. A spine on a
   phone is at a little over half rather than at full colour — twelve at once would be the loudest thing on
   the page — and never at the near-invisible third that a pointer is expected to wake. */
@media (hover: none) {
    .research-page .research-flag-band {
        opacity: .62;
        filter: saturate(.85);
    }

    .research-page .research-country-photo {
        filter: var(--photo-mute) var(--photo-under-type);
    }
}
/* #endregion */

/* #region Hero exhibit */
/* One photograph per Research screen, fixed with the page rather than handed in by the view. The index is
   not among them: its hero is the shared partial, which renders the same file as a real element the preload
   scanner can see, so a background rule for it would be a second address for one picture. The category page
   builds its own hero and keeps its rule. */
.research-page .hero-exhibit-image.is-category {
    background-image: url('/img/segment/hotel.webp');
}
/* #endregion */