/* Hizashikan — the only stylesheet additions since the approved build
 *
 * styles.css is frozen and byte-identical to hizashikan-site/assets/css/styles.css.
 * Anything genuinely new therefore lives here, loaded after it, so the original file
 * stays diffable against the design hand-off forever.
 *
 * Keep this file small. If it starts growing, that is a sign the design is changing and
 * the change belongs in a conversation, not in a stylesheet.
 */

/* ------------------------------------------------------------------
   Footer legal row

   A quieter third row, between the 13-link footer nav and the base line carrying
   the copyright. Sized between the two — smaller and dimmer than .site-footer__nav,
   a touch more present than .site-footer__base — so the policies are findable
   without competing with the real navigation.

   Values are taken from the existing footer rules rather than invented: the same
   rgba washi tints, the same hover treatment, the same flex-wrap behaviour.
   ------------------------------------------------------------------ */
.site-footer__legal {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  font-size: 12.5px;
}

.site-footer__legal a {
  color: rgba(246, 240, 227, .5);
  text-decoration: none;
  transition: color .2s;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: rgba(246, 240, 227, .85);
}

/* ------------------------------------------------------------------
   Friends of Hizashikan  (縁)

   Reuses the testimonial card wholesale — .letter already provides the washi
   surface, border, radius, padding and shadow — and only changes what a card
   about a dojo needs that a card about a quotation does not:

     - .letter::before injects a 「 opening quote mark. A club's name is not a
       quotation, so it is suppressed here and replaced by the name itself.
     - A name needs to lead the card, in the label register the design uses for
       .letter__who, but at the top and in ink rather than stone.
     - Logos are optional and constrained. The design system has no logo-wall
       pattern; a friend is a name and a sentence, and any mark is incidental.

   Every value below is an existing token or copied from the rule it sits beside.
   ------------------------------------------------------------------ */
.friends .letter::before {
  content: none;
}

.friends .friend__name {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.3;
  color: var(--sumi);
  margin-bottom: 12px;
}

.friends .friend p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--sumi-soft);
}

.friends .friend .textlink {
  margin-top: 18px;
}

/* Small, and never taller than the name it sits above. */
.friends .friend__logo {
  margin-bottom: 14px;
}

.friends .friend__logo-img {
  max-height: 40px;
  width: auto;
  border-radius: 0;
  box-shadow: none;
  background: none;
  object-fit: contain;
}

/* The association section is prose, not cards — hold it to the same measure as
   the rest of the site's body copy. */
.friends .friends__prose {
  margin-top: 18px;
  max-width: var(--measure);
}

.friends .friends__prose > * + * {
  margin-top: 1.1em;
}

.friends .friends__grid {
  margin-top: clamp(28px, 4vw, 44px);
}

/* One friend should not be stretched across three columns. */
.friends .friends__grid--single {
  grid-template-columns: minmax(0, 420px);
}