/* --- one-line announcement ------------------------------------------------
   Sits between the shortcuts and the recommendations. Deliberately one line
   tall and the same width as the cards below it, so adding it moves nothing
   that was already on the page. */
.home-notice {
  margin: 0 auto 14px;
  max-width: 780px;
  padding: 0 18px;
}

.home-notice__link {
  align-items: center;
  background: #fffaf0;
  border: 1px solid #e0cfa4;
  border-radius: 6px;
  color: #29251f;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 9px 14px;
  text-decoration: none;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.home-notice__link:hover {
  border-color: #b99c60;
  box-shadow: 0 6px 16px rgba(62, 47, 25, 0.12);
  color: #29251f;
}

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

.home-notice__badge {
  background: #a53a2a;
  border-radius: 3px;
  color: #fff;
  flex: none;
  font-size: 0.78em;
  letter-spacing: 0.05em;
  padding: 2px 7px;
}

.home-notice__text {
  flex: 1 1 auto;
  min-width: 0;
}

.home-notice__hint {
  color: #6d6350;
  font-size: 0.85em;
  /* On a phone the hint drops under the name rather than truncating it. */
  display: block;
}

@media screen and (min-width: 640px) {
  .home-notice__hint {
    display: inline;
    margin-left: 8px;
  }
}

.home-notice__arrow {
  color: #a53a2a;
  flex: none;
}

.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: 10px;
  /* No bottom margin: the weibo card below brings its own 12px top margin, and
     the two collapsing left the pair floating away from the card they head. */
  margin: 12px auto 0;
  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: 14px;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  overflow: hidden;
  padding: 9px 14px 9px 10px;
  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: 1rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1.2;
  padding: 6px;
  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.15rem;
  letter-spacing: 0;
  line-height: 1.25;
}

.site-recommendation__description {
  color: #665d50;
  font-size: 0.84rem;
  line-height: 1.4;
  margin-top: 1px;
}

.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 {
    padding: 0 12px;
  }

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

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

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

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

  .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: 2px 11px;
    grid-template-columns: 54px minmax(0, 1fr);
    padding: 10px;
  }

  /* 54px of square holds three characters at 0.88rem; a size up and 火莲花
       wraps - the mark is a logo, and a wrapped logo reads as two words. */
  .site-recommendation__mark {
    font-size: 0.88rem;
  }

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

  .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;
  }
}

/* ===== Friend sites ===== */
/* Two rows of bare logos, half of them captioned and half not, sized only by a
   45px inline style: a reader who did not already know the mark could not tell
   what any of them was. One grid of equal tiles, each with the site's name under
   its logo, under a title that says what the block is. The logos rest desaturated
   so fourteen brand palettes do not shout over the page, and come back to full
   colour under the pointer. */
.site-links-more {
  margin: 34px auto 10px;
  max-width: 900px;
  padding: 0 18px;
}

/* The same frontispiece rule the wordmark's caption uses, so the two bands on
   the page are set in one voice. */
.site-links-more__heading {
  align-items: center;
  color: #7a6a58;
  display: grid;
  font-family: "Noto Serif CJK SC", "Songti SC", "Source Han Serif SC", serif;
  font-size: 0.84rem;
  font-weight: 700;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  letter-spacing: 0.22em;
  margin: 0 auto 16px;
  max-width: 560px;
  text-indent: 0.22em;
}

.site-links-more__heading::before,
.site-links-more__heading::after {
  background: linear-gradient(90deg, rgba(165, 58, 42, 0), rgba(165, 58, 42, 0.38));
  content: "";
  height: 1px;
}

.site-links-more__heading::after {
  background: linear-gradient(90deg, rgba(165, 58, 42, 0.38), rgba(165, 58, 42, 0));
}

/* Equal tiles rather than a wrapped line of anchors: the old flex row sized every
   cell by its own logo, so a wide mark and a narrow one sat in the same row at
   different weights and a wrapped line had nothing to line up on. */
.site-links {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

.site-link {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #6b6154;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-height: 96px;
  padding: 12px 10px;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.site-link:hover,
.site-link:focus-visible {
  background: #fff;
  border-color: #e2d6bc;
  color: #a53a2a;
  text-decoration: none;
  transform: translateY(-2px);
}

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

/* Height, not width: the marks are different shapes, and a shared box width would
   letterbox the square ones. `object-fit` keeps the wide ones from stretching. */
/* The logos stay in their own colours: greying them out read as disabled, and
   several of these marks are only recognisable by their colour. The name below
   carries the hover instead. */
.site-link__logo {
  height: 40px;
  max-width: 100%;
  object-fit: contain;
}

.site-link__name {
  font-size: 0.78rem;
  line-height: 1.3;
  transition: color 160ms ease;
}

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

  .site-links {
    gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }

  .site-link {
    min-height: 84px;
    padding: 10px 6px;
  }

  .site-link__logo {
    height: 34px;
  }

  .site-link__name {
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-link,
  .site-link__name {
    transition: none;
  }
}

/* ===== 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;
}