/* Sister sites band — same structure as Jangteoro's; full-bleed dark band
   inside the footer (box-shadow + clip-path, so no horizontal overflow). */
nav.fam-band {
  --fam-ink: #13241c;
  position: relative; display: block; width: auto; margin: 0 0 clamp(2rem, 4vw, 3.5rem); padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(2rem, 3.5vw, 2.8rem);
  background: var(--fam-ink); box-shadow: 0 0 0 100vmax var(--fam-ink); clip-path: inset(0 -100vmax);
  color: #f4efe3; border: 0;
}
.fam-inner { position: relative; }
.fam-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.fam-head h2 { margin: 0; color: #f8f2e4; font: 600 clamp(1.55rem, 2.7vw, 2.4rem)/1.1 var(--serif); letter-spacing: -.035em; }
.fam-hearts { position: relative; width: 46px; height: 40px; flex: none; }
.fam-hearts i { position: absolute; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 94'%3E%3Cpath d='M50 88C20 66 6 50 6 32 6 17 17 6 31 6c9 0 15 5 19 12 4-7 10-12 19-12 14 0 25 11 25 26 0 18-14 34-44 56Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 94'%3E%3Cpath d='M50 88C20 66 6 50 6 32 6 17 17 6 31 6c9 0 15 5 19 12 4-7 10-12 19-12 14 0 25 11 25 26 0 18-14 34-44 56Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: fam-hop 2.4s cubic-bezier(.3, .7, .4, 1) infinite; }
.fam-hearts i:nth-child(1) { left: 14px; top: 0; color: #ff7a3d; }
.fam-hearts i:nth-child(2) { left: 2px; top: 19px; color: #5fbf84; animation-delay: .2s; }
.fam-hearts i:nth-child(3) { left: 26px; top: 19px; color: #f2b640; animation-delay: .4s; }
@keyframes fam-hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

.fam-group { margin-top: 22px; }
.fam-group h3 { margin: 0 0 12px; color: #b8b09a; font: 600 .76rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; }
nav.fam-band ul.fam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.fam-grid li { margin: 0; min-width: 0; }
.fam-band .fam-tile { box-sizing: border-box; width: 100%; height: 100%; }
.fam-tile { position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 250, 240, .07), rgba(255, 250, 240, .02)); border: 1px solid rgba(233, 222, 180, .16);
  color: #f4efe3; text-decoration: none; transition: transform .35s cubic-bezier(.2, .75, .2, 1), border-color .3s, background .3s, box-shadow .3s; }
.fam-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(214, 246, 111, .12) 50%, transparent 70%); background-size: 260% 100%; background-position: 130% 0; transition: background-position .9s ease; }
.fam-tile:hover, .fam-tile:focus-visible { transform: translateY(-4px); border-color: rgba(214, 246, 111, .5); background: linear-gradient(160deg, rgba(255, 250, 240, .12), rgba(255, 250, 240, .04)); box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .9); outline: none; }
.fam-tile:focus-visible { box-shadow: 0 0 0 2px var(--citron); }
.fam-tile:hover::before { background-position: -30% 0; }
.fam-ico { flex: none; width: 48px; height: 48px; border-radius: 13px; background: #fffaf0; display: grid; place-items: center; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .8); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.fam-ico img { width: 40px; height: 40px; border-radius: 9px; display: block; }
.fam-tile:hover .fam-ico { transform: translateY(-3px) scale(1.08); }
.fam-txt { position: relative; min-width: 0; display: grid; gap: 2px; }
nav.fam-band .fam-txt b { color: #f8f2e4; font: 600 1.02rem/1.3 var(--serif); letter-spacing: -.01em; text-decoration: none; }
nav.fam-band .fam-txt b i { font-style: normal; font-weight: 400; color: #b8b09a; }
nav.fam-band .fam-txt small { color: #d5cbb1; font: 400 .82rem/1.3 var(--body); }
.fam-planned { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; color: #9d9580; font-size: .8rem; }
.fam-planned > span { display: inline-flex; align-items: center; gap: 7px; }
.fam-planned i { width: 18px; height: 18px; border-radius: 5px; border: 1px dashed #77705e; }

body.motion-paused .fam-hearts i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .fam-hearts i, .fam-tile, .fam-ico, .fam-tile::before { animation: none; transition: none; } }
@media (max-width: 700px) {
  nav.fam-band ul.fam-grid { grid-template-columns: 1fr 1fr; }
  .fam-tile { padding: 12px; gap: 10px; min-height: 64px; }
  .fam-ico { width: 40px; height: 40px; } .fam-ico img { width: 32px; height: 32px; }
  nav.fam-band .fam-txt b { font-size: .9rem; }
}
@media (max-width: 420px) { nav.fam-band ul.fam-grid { grid-template-columns: 1fr; } }