/* Top bar of every page: logo, menu, gold cord, search bar and plant bags. On the index the plant bags hang from the start; on the other pages, and on the index once the bar has stuck, they drop while the search bar has focus. */

:root {
    --night: rgb(7, 20, 48);
    --sun: rgb(235, 201, 91);
    --sun-pale: rgb(245, 226, 168);
    --brass: rgb(184, 145, 74);
    --paper: rgb(253, 246, 232);
    --paper-deep: rgb(244, 231, 204);
    --leaf: rgb(28, 86, 36);
    --leaf-deep: rgb(13, 44, 25);
    --search-button-color: rgb(135, 102, 0);
    --ink: rgb(42, 42, 24);
    --ink-soft: rgb(90, 85, 56);
    --serif: "Ibarra Real Nova", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --tea-bag-font: "Alegreya Sans", sans-serif;
    --menu-font: "Piazzolla", serif;
    --search-font: "Alegreya Sans", sans-serif;

    --gutter: clamp(16px, 3.6vw, 64px);
    --nav-h: clamp(62px, 9.2vh, 92px);
    --search-h: clamp(32.2px, min(4.9vh, 3.57vw), 47.6px);
    --search-w: min(1200px - 2 * var(--gutter), 78vw);
    --cord-y: calc(var(--nav-h) + var(--search-h) / 2 - clamp(0px, .45vh, 6px));
    --tag-w: round(clamp(94.5px, min(9.45vw, 15.75vh), 201.6px), 2px);
    --bead: 44px;
    --cord-gradient: linear-gradient(90deg, rgb(217, 178, 76), var(--sun-pale) 50%, rgb(217, 178, 76));
}

html,
body {
    margin: 0;
    background: var(--night);
}

body {
    color: rgb(255, 255, 255);
    font-family: var(--serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

.topBarSkipLink {
    position: fixed;
    z-index: 9;
    top: 8px;
    left: var(--gutter);
    padding: 8px 16px;
    border-radius: 6px;
    background: var(--paper);
    color: var(--leaf);
    font-family: var(--search-font);
    font-weight: 700;
    transform: translateY(-300%);
}

.topBarSkipLink:focus {
    transform: none;
}

/* ---------- The bar: it scrolls until only the search bar is left, and that part stays at the top ---------- */

.topBar {
    --topBarBandPad: 10px;
    --topBarHeight: calc(var(--cord-y) + var(--search-h) / 2 + var(--topBarBandPad));

    position: sticky;
    z-index: 30;
    top: calc(var(--topBarBandPad) + var(--search-h) / 2 - var(--cord-y));
    height: var(--topBarHeight);
    margin-bottom: calc(var(--topBarHeight) * -1);
    transition: background-color .25s ease, box-shadow .25s ease, translate .25s ease;
}

.topBarIsStuck {
    background-color: var(--night);
    box-shadow: 0 10px 28px rgba(4, 10, 28, .34);
}

/* Any scroll back up brings the menu row into the stuck area. */
.topBarIsRevealed {
    translate: 0 var(--topBarRevealY, 0);
}

html.topBarIsOpen .topBar {
    background-color: transparent;
    box-shadow: none;
}

/* ---------- Logo and menu ---------- */

.topBarNavRow {
    position: relative;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--nav-h);
    max-width: 1200px;
    margin-inline: auto;
    padding: 0 var(--gutter);
}

.topBarBrand {
    color: rgb(255, 255, 255);
    font-family: var(--serif);
    font-size: clamp(32px, 2.9vw, 35px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.012em;
    text-decoration: none;
}

.topBarMenuList {
    display: flex;
    gap: calc(clamp(16px, 2.1vw, 24px) + 2px);
    align-items: baseline;
    margin: 0;
    padding: 0;
    list-style: none;
}

.topBarMenuLink {
    position: relative;
    display: block;
    padding: 8px 0;
    color: rgb(255, 255, 255);
    font-family: var(--menu-font);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    text-decoration: none;
}

.topBarMenuLink::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    background: var(--sun);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform .3s ease;
}

.topBarMenuLink:hover::after {
    transform: scaleX(1);
}

/* While the menu is a row, the letters of "Pedidos" stand 5px taller than the other words, on the same bottom line. The negative margin keeps the row at its height, so the other words stay in place. */
@media (min-width: 1200px) {
    .topBarMenuLinkOrders {
        margin-top: -5px;
        font-size: 25.5px;
    }
}

/* Trims the text boxes to the visible letters, so centering the boxes makes the middle of the logo meet the middle of the menu text. */
@supports (text-box: trim-both cap alphabetic) {
    .topBarBrand {
        padding-block: .4em;
        text-box: trim-both ex alphabetic;
    }

    .topBarMenuLabel {
        text-box: trim-both cap alphabetic;
    }

    @media (min-width: 1200px) {
        .topBarMenuLink {
            padding-block: 12px;
            text-box: trim-both cap alphabetic;
        }

        .topBarMenuLink::after {
            bottom: 3px;
        }
    }
}

/* Browsers without text trimming get a fixed correction measured for the current fonts. */
@supports not (text-box: trim-both cap alphabetic) {
    .topBarBrand {
        position: relative;
        top: -.083em;
    }

    @media (max-width: 1199px) {
        .topBarBrand {
            top: -.094em;
        }
    }
}

.topBarBrand:focus-visible,
.topBarMenuLink:focus-visible,
.topBarMenuToggle:focus-visible {
    outline: 2px solid var(--sun);
    outline-offset: -2px;
    border-radius: 2px;
}

.topBarMenuToggle {
    display: none;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 2px;
    border: 0;
    background: none;
    color: rgb(255, 255, 255);
    font-family: var(--serif);
    font-size: 20px;
    cursor: pointer;
}

.topBarMenuIcon {
    display: block;
    width: 24px;
    height: 10px;
    border-top: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
}

/* Logo beside the search bar, only while the menu row has scrolled away. It covers the cord behind it. */
.topBarStuckBrand {
    position: absolute;
    z-index: 5;
    top: var(--cord-y);
    left: calc((100% - var(--search-w)) / 4);
    display: none;
    padding: 2px 14px 6px;
    background: var(--night);
    color: rgb(255, 255, 255);
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.012em;
    text-decoration: none;
    translate: -50% -50%;
}

@media (min-width: 1200px) {
    .topBarIsStuck .topBarStuckBrand {
        display: block;
    }

    html.topBarIsOpen .topBarIsStuck .topBarStuckBrand,
    .topBarIsRevealed .topBarStuckBrand {
        display: none;
    }
}

/* ---------- The page blurs behind the plant bags ---------- */

/* Where the lowest plant bag ends on the screen. The search script sets it, and registering it lets the fade move smoothly. */
@property --topBarBlurBottom {
    syntax: "<length>";
    inherits: true;
    initial-value: 420px;
}

.topBarLayer {
    position: fixed;
    inset: 0;
    z-index: 0;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    /* Full blur down to the end of the plant bags, then it fades out so the page below stays sharp. */
    -webkit-mask: linear-gradient(to bottom, rgb(0, 0, 0) var(--topBarBlurBottom), transparent calc(var(--topBarBlurBottom) + 150px));
    mask: linear-gradient(to bottom, rgb(0, 0, 0) var(--topBarBlurBottom), transparent calc(var(--topBarBlurBottom) + 150px));
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease .14s, visibility 0s linear .44s, --topBarBlurBottom .5s ease;
}

html.topBarIsOpen .topBarLayer {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease, visibility 0s, --topBarBlurBottom .5s ease;
}

/* After a scroll back up, the blur is measured from the bar instead of from the screen, so it needs the height of the screen. */
.topBarIsRevealed .topBarLayer {
    bottom: auto;
    height: 100vh;
}

/* After a scroll back up, the solid band stays behind the bar, so the white menu can be read over the blurred page. */
html.topBarIsOpen .topBarIsRevealed {
    background-color: var(--night);
}

/* A page with this class on its body blurs the whole screen while the search is open, instead of fading out below the plant bags. For the plants page and the products page. */
.topBarFullBlur .topBarLayer {
    -webkit-mask: none;
    mask: none;
}

/* On those pages the solid band also stays behind the bar while it is stuck at the top. */
html.topBarIsOpen .topBarFullBlur .topBarIsStuck {
    background-color: var(--night);
}

/* ---------- Cord and search bar ---------- */

.topBarCord {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: calc(var(--cord-y) - 1px);
    top: round(calc(var(--cord-y) - 1px), 1px);
    height: 2px;
    background: var(--cord-gradient);
    box-shadow: 0 0 10px rgba(235, 201, 91, .55);
    transition: box-shadow .6s ease;
    pointer-events: none;
}

.topBar:has(.topBarSearch:focus-within) .topBarCord {
    box-shadow: 0 0 18px 1px rgba(245, 214, 120, .9);
}

/* The light around the search bar. A separate layer below the plant bags, so the light never falls on them. */
.topBarSearchGlow {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: calc(var(--cord-y) - var(--search-h) / 2);
    width: var(--search-w);
    height: var(--search-h);
    margin: 0 auto;
    border-radius: 999px;
    box-shadow: 0 0 22px -4px rgba(246, 206, 132, .5);
    transition: box-shadow .5s ease;
    pointer-events: none;
}

.topBar:has(.topBarSearch:focus-within) .topBarSearchGlow {
    box-shadow: 0 0 36px 5px rgba(246, 206, 132, .75);
}

.topBarSearch {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: calc(var(--cord-y) - var(--search-h) / 2);
    display: flex;
    align-items: center;
    width: var(--search-w);
    height: var(--search-h);
    margin: 0 auto;
    padding: 0 0 0 calc(var(--search-h) * .42);
    border-radius: 999px;
    /* The last 40px match the Buscar button so no cream shows around its rounded end. */
    background: linear-gradient(95deg, rgb(255, 250, 239) 0%, rgb(250, 240, 217) 46%, rgb(241, 220, 175) calc(100% - 40px), var(--search-button-color) calc(100% - 40px));
    color: var(--leaf);
}

.topBarSearchIcon {
    flex: none;
    width: calc(var(--search-h) * .36);
    height: calc(var(--search-h) * .36);
    margin-right: calc(var(--search-h) * .22);
}

.topBarSearchInput {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--search-font);
    font-size: max(16px, calc(var(--search-h) * .46));
    font-weight: 700;
    letter-spacing: -.005em;
    appearance: none;
}

.topBarSearchInput::placeholder {
    color: var(--ink-soft);
    opacity: 1;
}

.topBarSearchInput::-webkit-search-cancel-button {
    display: none;
}

.topBarSearchClear {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0 6px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ink-soft);
    cursor: pointer;
}

.topBarSearchClear[hidden] {
    display: none;
}

.topBarSearchClear:hover {
    background: rgba(90, 85, 56, .12);
}

.topBarSearchClearIcon {
    width: 12.6px;
    height: 12.6px;
}

.topBarSearchCount {
    flex: none;
    margin: 0 clamp(14px, 1.6vw, 26px) 0 12px;
    color: var(--ink-soft);
    font-family: var(--search-font);
    font-size: max(12px, calc(var(--search-h) * .32));
    font-weight: 700;
    white-space: nowrap;
}

.topBarSearchGo {
    flex: none;
    height: 100%;
    padding: 0 clamp(15.4px, 1.75vw, 28px);
    border: 0;
    border-radius: 0 999px 999px 0;
    background: var(--search-button-color);
    color: var(--paper);
    font-family: var(--search-font);
    font-size: max(13.5px, calc(var(--search-h) * .39));
    font-weight: 700;
    cursor: pointer;
    transition: filter .25s ease;
}

.topBarSearchGo:hover {
    filter: brightness(.88);
}

.topBarSearchClear:focus-visible,
.topBarSearchGo:focus-visible {
    outline: 2px solid var(--leaf);
    outline-offset: -2px;
}

/* Arrows: only while the plant bags are hanging. */
.topBarBead {
    position: absolute;
    z-index: 5;
    top: calc(var(--cord-y) - var(--bead) / 2);
    display: grid;
    place-items: center;
    width: var(--bead);
    height: var(--bead);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--sun);
    color: rgb(27, 42, 18);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 6px 16px rgba(4, 10, 28, .45);
    visibility: hidden;
    transition: background-color .25s ease, color .25s ease;
}

html.topBarIsOpen .topBarBead,
html.topBarIsDeployed .topBarBead {
    visibility: visible;
}

/* Centers the middle of each arrow in the empty space between the screen edge and the search bar. */
.topBarBeadPrev {
    left: calc((100% - var(--search-w)) / 4 - var(--bead) / 2);
}

.topBarBeadNext {
    right: calc((100% - var(--search-w)) / 4 - var(--bead) / 2);
}

.topBarBeadIcon {
    width: 20px;
    height: 20px;
}

.topBarBead:hover:not(:disabled) {
    background: var(--sun-pale);
}

.topBarBead:disabled {
    background: rgb(44, 58, 90);
    color: rgba(245, 226, 168, .55);
    box-shadow: inset 0 0 0 1px rgba(245, 226, 168, .35);
    cursor: default;
}

.topBarBead:focus-visible {
    outline: 2px solid rgb(255, 255, 255);
    outline-offset: -2px;
}

.topBarBead[hidden] {
    display: none;
}

/* ---------- Plant bags hanging from the cord ---------- */

.topBarRail {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: var(--cord-y);
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    touch-action: pan-x;
    visibility: hidden;
    transition: visibility 0s linear .6s;
}

html.topBarIsOpen .topBarRail,
html.topBarIsDeployed .topBarRail {
    visibility: visible;
    transition: none;
}

/* The index is only as tall as its hero, so the line of plant bags must not make the page longer. */
.topBarOnIndex .topBarRail {
    height: calc(max(100svh, 600px) - var(--cord-y));
}

/* While the plant bags hang on the index, a finger on them can also scroll the page. */
html.topBarIsDeployed .topBarRail {
    touch-action: auto;
}

.topBarRail::-webkit-scrollbar {
    display: none;
}

.topBarRailIsDragging {
    cursor: grabbing;
}

.topBarRailIsDragging .topBarTag {
    cursor: grabbing;
}

/* Clipped so plant bags pulled out of a search don't keep the line scrollable. */
.topBarRailTrack {
    position: relative;
    min-width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overflow: clip;
    list-style: none;
}

/* Sizes every hanging tag takes from its width. */
.topBarTagHolder {
    --eye-y: calc(var(--tag-w) * .086);
    --hole: max(4px, calc(var(--tag-w) * .024));
    --cut: calc(var(--tag-w) * .1);
    --inset: calc(var(--tag-w) * .052);
    --s: 1;

    width: var(--tag-w);
}

.topBarHang {
    position: absolute;
    left: 0;
    top: 0;
    translate: var(--x, 0px) var(--y, 0px);
    transform-origin: 50% calc(var(--y, 0px) * -1);
    transition: translate .62s cubic-bezier(.3, 1.22, .4, 1), opacity .3s linear;
    will-change: translate, rotate;
}

.topBarHang:hover,
.topBarHang:focus-within {
    z-index: 5;
}

.topBarHangOut {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: translate .42s cubic-bezier(.55, 0, .85, .35), opacity .28s linear .1s, visibility 0s linear .42s;
}

.topBarRailIsPlacing .topBarHang {
    transition: none;
}

.topBarRailIsIntro .topBarHang {
    transition-duration: 1.05s, .4s;
    transition-delay: calc(var(--i, 0) * 46ms);
}

.topBarThread {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: calc(100% - var(--eye-y) * var(--s));
    width: 1px;
    height: 130vh;
    background: linear-gradient(to top, var(--brass) 0, var(--brass) calc(var(--eye-y) * var(--s)), var(--sun-pale) calc(var(--eye-y) * var(--s)));
    pointer-events: none;
    transition: bottom .55s ease;
}

.topBarTag {
    position: relative;
    display: block;
    color: var(--ink);
    text-decoration: none;
    scale: var(--s);
    transform-origin: 50% 0;
    /* A thin line of light along the edge, like the backlit plants in the photos. */
    filter: drop-shadow(0 0 .75px rgba(255, 238, 200, .95)) drop-shadow(0 16px 18px rgba(5, 12, 32, .38));
    transition: scale .55s cubic-bezier(.3, 1.1, .4, 1), filter .35s ease;
    -webkit-user-drag: none;
}

/* The hovered plant bag glows in the same warm color as the search bar. Plant bags sliding under a still mouse don't count as hovered. */
a.topBarTag:not(.topBarRailIsScrolling a):hover,
a.topBarTag:focus-visible {
    filter: drop-shadow(0 0 .75px rgba(255, 238, 200, .95)) drop-shadow(0 0 22px rgba(246, 206, 132, .95));
}

.topBarTag:focus-visible {
    outline: 3px solid var(--sun);
    outline-offset: -3px;
    border-radius: 6px;
}

.topBarPaper {
    position: relative;
    display: block;
    /* The search script sets this height on a plant bag and on the card of its product, so both end at the same line. */
    min-height: var(--topBarPairHeight, 0);
    padding: calc(var(--eye-y) * 2 - 2px) var(--inset) calc(var(--tag-w) * .07);
    border-radius: 0 0 6px 6px;
    background: linear-gradient(180deg, var(--paper), var(--paper-deep));
    box-shadow: inset 0 1px 0 rgb(255, 255, 255);
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut));
    -webkit-mask: radial-gradient(circle var(--hole) at 50% var(--eye-y), transparent 96%, rgb(0, 0, 0) 100%);
    mask: radial-gradient(circle var(--hole) at 50% var(--eye-y), transparent 96%, rgb(0, 0, 0) 100%);
    transform-origin: 50% var(--eye-y);
    transition: scale .48s cubic-bezier(.3, 1.3, .4, 1);
}

a.topBarTag:not(.topBarRailIsScrolling a):hover .topBarPaper,
a.topBarTag:focus-visible .topBarPaper {
    scale: 1.08;
}

.topBarEyelet {
    position: absolute;
    left: 50%;
    top: var(--eye-y);
    width: calc(var(--hole) * 2 + 5px);
    height: calc(var(--hole) * 2 + 5px);
    border: 2.5px solid var(--brass);
    border-radius: 50%;
    box-shadow: 0 1px 1px rgba(90, 60, 10, .3);
    transform: translate(-50%, -50%);
}

.topBarPhoto {
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 3px;
    background: rgb(239, 224, 195);
}

.topBarPhotoImage {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 1.1s cubic-bezier(.2, .7, .2, 1);
    -webkit-user-drag: none;
}

/* The photo grows when the plant bag is hovered. The photo on the card of a product beside a plant bag stays at its size. */
a.topBarTag:not(.topBarRailIsScrolling a):not(.topBarHangProduct a):hover .topBarPhotoImage {
    scale: 1.42;
}

.topBarTagName {
    display: block;
    margin-top: calc(var(--tag-w) * .05);
    text-align: center;
    font-family: var(--tea-bag-font);
    font-size: calc(max(13.5px, calc(var(--tag-w) * .122)) + 1px);
    font-weight: 700;
    line-height: 1.12;
}

.topBarScientificRow {
    display: block;
    margin: 0 calc(var(--inset) * -.8);
    font-family: var(--tea-bag-font);
    font-size: calc(max(10px, calc(var(--tag-w) * .08)) + 1px);
    line-height: 1;
    text-align: center;
}

.topBarScientificName {
    color: var(--ink-soft);
    font-family: var(--tea-bag-font);
    font-style: italic;
    font-weight: 700;
}

.topBarScientificAuthor {
    color: var(--ink-soft);
    font-family: var(--tea-bag-font);
    font-size: calc(max(9px, calc(var(--tag-w) * .066)) + 1px);
    font-weight: 700;
}

/* Price on the card of a product, to the right of its plant bag. */
.topBarProductPrice {
    display: block;
    margin-top: calc(var(--tag-w) * .02);
    color: var(--search-button-color);
    font-family: var(--tea-bag-font);
    font-size: max(13px, calc(var(--tag-w) * .11));
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.topBarProductCurrency {
    font-family: var(--tea-bag-font);
    font-size: max(10.5px, .72em);
    font-weight: 700;
    letter-spacing: .04em;
}

/* Shown when nothing matches. */
.topBarHangEmpty {
    width: calc(var(--tag-w) * 1.55);
}

.topBarPaperEmpty {
    padding: calc(var(--eye-y) * 2 + 8px) calc(var(--inset) * 2) calc(var(--tag-w) * .14);
    text-align: center;
}

.topBarEmptyTitle {
    display: block;
    color: var(--ink);
    font-family: var(--tea-bag-font);
    font-size: calc(max(15.5px, calc(var(--tag-w) * .14)) + 1px);
    font-weight: 700;
    line-height: 1.14;
    text-wrap: balance;
    user-select: text;
    cursor: text;
}

.topBarEmptyNote {
    display: block;
    margin-top: 10px;
    color: var(--ink-soft);
    font-family: var(--tea-bag-font);
    font-size: calc(max(11px, calc(var(--tag-w) * .092)) + 1px);
    font-weight: 700;
    line-height: 1.26;
    user-select: text;
    cursor: text;
}

/* ---------- Smaller screens ---------- */

@media (max-width: 1199px) {
    .topBarMenuToggle {
        display: inline-flex;
    }

    .topBarMenu {
        position: absolute;
        top: calc(var(--nav-h) - 4px);
        left: var(--gutter);
        right: var(--gutter);
        display: none;
        padding: 10px 22px;
        border: 1px solid rgba(245, 226, 168, .4);
        border-radius: 16px;
        background: rgb(10, 24, 54);
        box-shadow: 0 24px 60px rgba(3, 8, 24, .55);
    }

    .topBarMenuIsOpen {
        display: block;
    }

    .topBarMenuList {
        display: block;
    }

    .topBarMenuLink {
        padding: 13px 0;
        font-size: 23px;
    }

    .topBarMenuLink::after {
        bottom: 9px;
        right: auto;
        width: 34px;
    }
}

@media (max-width: 1100px) {
    :root {
        --tag-w: round(clamp(100.8px, 15.12vw, 138.6px), 2px);
        --search-w: 80vw;
    }
}

@media (max-width: 900px) {
    :root {
        --search-w: calc(100vw - 2 * var(--gutter));
    }

    .topBarBead {
        display: none;
    }
}

@media (max-width: 760px) {
    :root {
        --search-h: 33.6px;
        --tag-w: round(clamp(94.5px, 25.83vw, 123.3px), 2px);
    }

    .topBarSearchCount,
    .topBarSearchGo {
        display: none;
    }

    .topBarSearch {
        padding: 0 3px 0 14px;
        background: linear-gradient(95deg, rgb(255, 250, 239) 0%, rgb(250, 240, 217) 46%, rgb(241, 220, 175) 100%);
    }

    .topBarSearchIcon {
        width: 15.4px;
        height: 15.4px;
        margin-right: 8.4px;
    }

    .topBarSearchClear {
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topBarHang,
    .topBarHangOut,
    .topBarRailIsIntro .topBarHang,
    .topBarTag,
    .topBarPaper,
    .topBarPhotoImage,
    .topBarThread,
    .topBarLayer,
    .topBarSearchGlow,
    .topBar {
        transition: none !important;
    }
}

/* ---------- Footer ---------- */

.pageFooter {
    position: relative;
    background: var(--night);
    color: var(--sun-pale);
}

.pageFooter::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--cord-gradient);
    box-shadow: 0 0 10px rgba(235, 201, 91, .55);
}

.pageFooterInner {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px 40px;
    max-width: 1200px;
    margin-inline: auto;
    padding: clamp(32px, 4vw, 52px) var(--gutter);
}

.pageFooterBrand {
    color: rgb(255, 255, 255);
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.012em;
    text-decoration: none;
}

.pageFooterNav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px clamp(16px, 2.1vw, 24px);
}

.pageFooterLegal {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 8px clamp(16px, 2.1vw, 24px);
    padding-top: 16px;
    border-top: 1px solid rgba(245, 226, 168, .22);
}

.pageFooterLink {
    color: var(--sun-pale);
    font-family: var(--search-font);
    font-size: 21px;
    font-weight: 700;
    text-decoration: none;
}

.pageFooterLink:hover {
    color: rgb(255, 255, 255);
    font-family: var(--search-font);
}

/* Links of the bottom row of the footer: lighter than the main links above them. */
.pageFooterLegalLink {
    color: var(--sun-pale);
    font-family: var(--search-font);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
}

.pageFooterLegalLink:hover {
    color: rgb(255, 255, 255);
}

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

.pageFooterCopyright {
    color: rgba(245, 226, 168, .72);
    font-family: var(--search-font);
    font-size: 16px;
    font-weight: 400;
    user-select: text;
    cursor: text;
}

/* Credit at the right end of the bottom row of the footer. */
.pageFooterCredit {
    margin-left: auto;
}

/* Person responsible for the content: its own line at the left, below the links of the bottom row. */
.pageFooterResponsible {
    flex-basis: 100%;
}

@media only screen and (max-width: 600px) {
    .pageFooterCredit {
        margin-left: 0;
    }
}