.site-recommendation {
    /* Grid rather than a bare block: the aside holds more than one card now, and
       stacking them needs a gap the cards themselves must not carry. */
    display: grid;
    gap: 12px;
    margin: 14px auto 28px;
    max-width: 780px;
    padding: 0 18px;
}

.site-recommendation__link {
    align-items: center;
    background:
        linear-gradient(90deg, rgba(184, 134, 45, 0.1), transparent 34%),
        #fff;
    border: 1px solid #d9c7a0;
    border-left: 5px solid #a53a2a;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(62, 47, 25, 0.12);
    color: #29251f;
    display: grid;
    gap: 18px;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    overflow: hidden;
    padding: 16px 20px 16px 16px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.site-recommendation__link::before {
    background: #d7ad45;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    top: 0;
    transform: scaleX(0.18);
    transform-origin: left;
    transition: transform 260ms ease;
    width: 100%;
}

.site-recommendation__link:hover {
    border-color: #b99c60;
    box-shadow: 0 12px 30px rgba(62, 47, 25, 0.18);
    color: #29251f;
    text-decoration: none;
    transform: translateY(-2px);
}

.site-recommendation__link:hover::before {
    transform: scaleX(1);
}

.site-recommendation__link:focus-visible {
    outline: 3px solid #14756d;
    outline-offset: 3px;
}

.site-recommendation__mark {
    align-items: center;
    aspect-ratio: 1;
    background: #146c65;
    border: 1px solid #0c4d48;
    border-radius: 4px;
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.12);
    color: #fff;
    display: flex;
    font-family: "Noto Serif CJK SC", "Songti SC", serif;
    font-size: 1.2rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1.2;
    padding: 10px;
    text-align: center;
}

/* Same card, its own colour: two identical marks side by side read as one
   repeated logo rather than two different sites. */
.site-recommendation__link--firelotus {
    border-left-color: #c2611f;
}

.site-recommendation__link--firelotus .site-recommendation__mark {
    background: #a83a1c;
    border-color: #7d2a12;
}

.site-recommendation__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.site-recommendation__eyebrow {
    align-items: center;
    color: #a53a2a;
    display: flex;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 6px;
    letter-spacing: 0;
    margin-bottom: 2px;
}

.site-recommendation__eyebrow .fa-star {
    color: #c39120;
}

.site-recommendation__title {
    color: #1f1c18;
    font-family: "Noto Serif CJK SC", "Songti SC", serif;
    font-size: 1.45rem;
    letter-spacing: 0;
    line-height: 1.35;
}

.site-recommendation__description {
    color: #665d50;
    font-size: 0.92rem;
    line-height: 1.5;
    margin-top: 2px;
}

.site-recommendation__action {
    align-items: center;
    color: #146c65;
    display: flex;
    font-size: 0.88rem;
    font-weight: 700;
    gap: 9px;
    white-space: nowrap;
}

.site-recommendation__action .fa-arrow-right {
    transition: transform 180ms ease;
}

.site-recommendation__link:hover .site-recommendation__action .fa-arrow-right {
    transform: translateX(4px);
}

@media screen and (max-width: 640px) {
    .site-recommendation {
        margin-bottom: 22px;
        padding: 0 12px;
    }

    .site-recommendation__link {
        gap: 13px;
        grid-template-columns: 64px minmax(0, 1fr);
        padding: 14px;
    }

    .site-recommendation__mark {
        font-size: 1rem;
        padding: 7px;
    }

    .site-recommendation__title {
        font-size: 1.25rem;
    }

    .site-recommendation__description {
        font-size: 0.86rem;
    }

    .site-recommendation__action {
        grid-column: 2;
        justify-content: space-between;
        margin-top: -5px;
    }
}

/* Two recommendations, one row. Full-width each, they spent most of a desktop
   row on empty gradient and pushed the second card below everything else on the
   page; side by side they read as the pair they are. Half a row no longer fits
   mark | text | action on one line, so the action drops under the text - the
   same rearrangement the narrow layout already makes. */
@media screen and (min-width: 900px) {
    .site-recommendation {
        gap: 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* The 900px track of .home-start above it, so the pair lines up with the
           shortcut grid rather than sitting narrower than it. */
        max-width: 900px;
    }

    .site-recommendation__link {
        /* Start-aligned, with the action pushed to the floor of the card: the two
           descriptions are different lengths, and a centred pair puts the two
           site addresses on different lines beside each other. */
        align-items: start;
        gap: 6px 14px;
        grid-template-columns: 72px minmax(0, 1fr);
        padding: 16px;
    }

    /* 72px of square holds three characters at 1rem and four at 1.2rem would
       wrap - the mark is a logo, and a wrapped logo reads as two words. */
    .site-recommendation__mark {
        font-size: 1rem;
    }

    .site-recommendation__title {
        font-size: 1.3rem;
    }

    .site-recommendation__action {
        align-self: end;
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-recommendation__link,
    .site-recommendation__link::before,
    .site-recommendation__action .fa-arrow-right {
        transition: none;
    }
}

/* External-site logo rows. These used to be inline anchors separated by
   ` ` inside a `.text-center` block: horizontal spacing worked, but a
   wrapped line got no vertical spacing at all, because the 45px images set the
   line-box height and there was no leading left over. Flex wrapping gives both
   axes their own gap. */
.site-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 30px;
    justify-content: center;
}

/* Some of these anchors carry a text label beside the logo -- inline-flex keeps
   the pair on one baseline and spaces them without a literal space character. */
.site-links a {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

@media screen and (max-width: 640px) {
    .site-links {
        gap: 14px 20px;
        padding: 0 12px;
    }
}

/* ===== The wordmark: the site's name, then a caption ===== */
/* One 1.3em ochre string said the name and the tagline in the same voice and at
   the same weight. Split in two: the mark is set in a serif, in the maroon the
   rest of the page already uses, and the line under it is small, spaced and
   flanked by hairlines - the way a frontispiece is set, not a headline. */
.home-mark {
    margin: 0 auto;
    max-width: 900px;
    padding: 2px 18px 6px;
    text-align: center;
}

.home-mark__name {
    align-items: baseline;
    color: #4e0d0d;
    display: flex;
    flex-wrap: wrap;
    font-family: "Noto Serif CJK SC", "Songti SC", "Source Han Serif SC", serif;
    /* Smaller than the old 1.3em run at the narrow end, and it grows with the
       page rather than staying one fixed size on every screen. */
    font-size: clamp(1.25rem, 1rem + 1.1vw, 1.7rem);
    font-weight: 700;
    gap: 0.45em;
    justify-content: center;
    line-height: 1.25;
    margin: 0;
}

.home-mark__latin {
    letter-spacing: 0.14em;
    /* The tracking pushes the last letter off centre; this puts it back. */
    text-indent: 0.14em;
}

/* Two scripts on one line do not sit right by their baselines alone. A CJK glyph
   fills its em box - ink from roughly 0.88em above the baseline to 0.12em below -
   so 不离 hung low next to Latin caps that stop at the baseline, and read bigger
   than them at the same nominal size. 0.76em brings its ink height down to the
   cap height of Buli, and the shift lifts its optical centre onto the centre of
   the caps beside it. */
.home-mark__cn {
    color: #a53a2a;
    font-size: 0.76em;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    transform: translateY(-0.21em);
}

.home-mark__tagline {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    margin: 10px auto 0;
    max-width: 560px;
}

/* Hairlines that fade out towards the edges, so the caption sits in a band
   rather than inside a box. */
.home-mark__rule {
    background: linear-gradient(90deg, rgba(165, 58, 42, 0), rgba(165, 58, 42, 0.38));
    height: 1px;
}

.home-mark__tagline .home-mark__rule:last-child {
    background: linear-gradient(90deg, rgba(165, 58, 42, 0.38), rgba(165, 58, 42, 0));
}

.home-mark__words {
    align-items: center;
    color: #7a6a58;
    display: inline-flex;
    flex-wrap: wrap;
    font-size: 0.82rem;
    gap: 0.75em;
    justify-content: center;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
}

/* A gold lozenge between the two halves: the · was carrying the join
   in body-text grey and disappeared into the words on either side of it. */
.home-mark__sep {
    background: #d7ad45;
    display: inline-block;
    height: 5px;
    rotate: 45deg;
    width: 5px;
}

@media screen and (max-width: 480px) {
    .home-mark__tagline {
        gap: 10px;
    }

    .home-mark__words {
        font-size: 0.76rem;
        letter-spacing: 0.16em;
        text-indent: 0.16em;
    }
}

/* ===== Home entry points: search + shortcuts into the actual content ===== */
.home-start {
    margin: 0 auto;
    max-width: 900px;
    padding: 4px 18px 8px;
}

.home-search {
    display: grid;
    gap: 8px;
    justify-items: center;
    margin: 0 auto 20px;
    max-width: 560px;
}

.home-search__row {
    display: flex;
    gap: 8px;
    width: 100%;
}

/* A fieldset so the whole group can be disabled in one move at submit time, which
   is what keeps `scope` out of the query string. */
.home-search__scopes {
    border: none;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.home-search__scope {
    align-items: center;
    background: #fff;
    border: 1px solid #d9c7a0;
    border-radius: 999px;
    color: #6b5f50;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.85rem;
    gap: 6px;
    padding: 4px 14px;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.home-search__scope input {
    /* The chip is the control; the dot only carries the state to assistive tech. */
    height: 12px;
    margin: 0;
    width: 12px;
}

.home-search__scope:hover {
    border-color: #b99c60;
}

.home-search__scope:has(input:checked) {
    background: #4e0d0d;
    border-color: #4e0d0d;
    color: #f5efdf;
}

.home-search__scope:has(input:focus-visible) {
    outline: 3px solid #14756d;
    outline-offset: 2px;
}

.home-search__input {
    background: #fff;
    border: 1px solid #c3b596;
    border-radius: 6px;
    flex: 1 1 auto;
    font-size: 1em;
    min-width: 0;
    padding: 10px 14px;
}

.home-search__input:focus-visible {
    border-color: #a58b4f;
    outline: 3px solid #14756d;
    outline-offset: 1px;
}

.home-search__button {
    background: #4e0d0d;
    border: none;
    border-radius: 6px;
    color: #f5efdf;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 1em;
    padding: 10px 20px;
    white-space: nowrap;
}

.home-search__button:hover {
    background: #6b1414;
}

.home-shortcuts {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Six shortcuts: two rows of three once there is room, so the grid never
   leaves a single orphan card on the last row. */
@media screen and (min-width: 640px) {
    .home-shortcuts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.home-shortcut {
    align-items: center;
    background: #fff;
    border: 1px solid #d9c7a0;
    border-radius: 6px;
    color: #29251f;
    display: flex;
    gap: 10px;
    min-height: 56px;
    padding: 12px 14px;
    text-align: left;
    text-decoration: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.home-shortcut:hover {
    border-color: #b99c60;
    box-shadow: 0 8px 20px rgba(62, 47, 25, 0.15);
    color: #29251f;
    transform: translateY(-2px);
}

.home-shortcut:focus-visible {
    outline: 3px solid #14756d;
    outline-offset: 3px;
}

.home-shortcut__icon {
    color: #a53a2a;
    flex: 0 0 auto;
    font-size: 1.15em;
    width: 1.3em;
    text-align: center;
}

.home-shortcut__label {
    font-size: 1em;
    line-height: 1.3;
}

.home-shortcut__hint {
    color: #8a7a6a;
    display: block;
    font-size: 0.8em;
    line-height: 1.3;
}