/* Everything in Korea family look (owner decision, 12-13 November 2026): the same
   frame on every family site, each site in its own colour. Copied from NatureinKorea's
   family.css; here in EatKFoods' lacquer band and EatKFoods' own fonts. */
nav.fam-band {
  --fam-ink: #1c0f08; --body: "richmond-display", Georgia, serif; --serif: "richmond-display", Georgia, serif;
  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; }
.family-look ul { list-style: none; margin: 0; padding: 0; }
.family-look li { margin: 0; }
.family-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 26px; }
.family-mark { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 .76rem/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #e8b765; }
.family-mark span { width: 34px; height: 2px; background: linear-gradient(90deg, #268cff, #ada5ff, #e8a93a, #ed562f); }
.family-head h2 { margin: 0; color: #f8f2e4; font: 600 clamp(1.55rem, 2.6vw, 2.35rem)/1.15 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.family-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.family-site { --site: #e0533a; position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 16px 14px; border: 1px solid rgba(233, 222, 180, .16); border-top: 3px solid var(--site); border-radius: 10px; background: linear-gradient(160deg, color-mix(in srgb, var(--site) 13%, #2a1810), #140a05 72%); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.family-site:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--site) 55%, transparent); box-shadow: 0 12px 30px -16px var(--site); }
.family-site.is-current { border-color: var(--site); box-shadow: 0 0 0 1px var(--site), 0 16px 34px -18px var(--site); }
.family-top { display: flex; align-items: center; gap: 12px; min-height: 50px; }
.family-top img { flex: none; width: 44px; height: 44px; border-radius: 11px; object-fit: contain; }
.family-top > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
nav.fam-band .family-name { display: block; color: #f8f2e4; font: 400 1.08rem/1.2 "bc-vajgar", Arial, sans-serif; font-synthesis: none; text-decoration: none; overflow-wrap: normal; }
.family-name span { color: #b8b09a; font-weight: 400; white-space: nowrap; }
nav.fam-band .family-name:hover { color: var(--site); }
.family-here { align-self: flex-start; padding: 4px 7px 3px; border-radius: 20px; background: var(--site); color: #1c0f08; font: 600 .62rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.family-site > p { margin: 12px 0 10px; color: #d5cbb1; font: 400 .9rem/1.5 var(--body); text-wrap: balance; }
.family-links { display: flex; flex-direction: column; gap: 2px; margin-top: auto !important; padding-top: 10px !important; border-top: 1px solid rgba(233, 222, 180, .14); }
nav.fam-band .family-links a { display: flex; align-items: center; min-height: 44px; color: #f4efe3; font: 400 .86rem/1.35 var(--body); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--site) 70%, transparent); text-underline-offset: 4px; text-wrap: balance; }
nav.fam-band .family-links a:hover { color: var(--site); }
.family-look a:focus-visible { outline: 2px solid #e8b765; outline-offset: 3px; }
.family-companies { margin-top: 30px; }
.family-companies h3 { margin: 0 0 12px; color: #b8b09a; font: 600 .74rem/1.4 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.family-companies ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
nav.fam-band .family-companies a { display: flex; gap: 12px; align-items: flex-start; height: 100%; padding: 14px 16px; border: 1px solid rgba(233, 222, 180, .14); border-radius: 10px; background: rgba(255, 250, 240, .03); color: inherit; text-decoration: none; transition: border-color .25s ease; }
nav.fam-band .family-companies a:hover { border-color: rgba(232, 183, 101, .45); }
.family-companies img { flex: none; width: 36px; height: 36px; border-radius: 9px; object-fit: contain; background: #fff; }
nav.fam-band .family-companies b { display: block; color: #f8f2e4; font: 600 .92rem/1.25 var(--serif); overflow-wrap: anywhere; }
nav.fam-band .family-companies b i { font-style: normal; font-weight: 400; color: #b8b09a; }
.family-companies strong { display: block; margin-top: 4px; color: #e8b765; font: 600 .84rem/1.35 var(--body); }
.family-companies small { display: block; margin-top: 3px; color: #b8b09a; font: 400 .8rem/1.45 var(--body); text-wrap: balance; }
@media (max-width: 1150px) { .family-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .family-companies ul { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .family-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .family-site { padding: 12px 14px 10px; }
  .family-top { min-height: 40px; gap: 10px; }
  .family-top img { width: 36px; height: 36px; border-radius: 9px; }
  .family-site > p { margin: 6px 0 4px; }
  .family-links { flex-direction: row; flex-wrap: wrap; gap: 0 16px; padding-top: 6px !important; }
}
@media (prefers-reduced-motion: reduce) { .family-site, .family-look a { transition: none; } .family-site:hover { transform: none; } }
@media print { nav.fam-band { display: none; } }