.fana-affiliation { position: relative; z-index: 1; flex: none; }
.fana-affiliation a { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; color: inherit; font: 400 12px/1.5 var(--font-inter), sans-serif; text-decoration: none; }
.fana-affiliation strong { font-weight: 600; }
.fana-affiliation a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.fana-affiliation a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

/* A quiet credit opposite the motion control, within the coastal page. */
[data-coast-theme] .fana-affiliation { position: absolute; left: max(35px, 5vw); bottom: 20px; color: #245a71; }
[data-coast-theme] .fana-affiliation a { padding: 4px 10px; border: 1px solid #ffffffb3; border-radius: 9px; background: #f3fcffe8; box-shadow: 0 2px 12px #0732561a; }
[data-coast-theme] .fana-affiliation strong { color: #075386; }
[data-coast-theme="sunset"] .fana-affiliation { color: #ead5c4; }
[data-coast-theme="sunset"] .fana-affiliation a { background: #242638eb; border-color: #cfb1a14d; box-shadow: 0 2px 12px #10112226; }
[data-coast-theme="sunset"] .fana-affiliation strong { color: #f4d5a8; }

/* Share the brand row and its theme colors in the constellation layout. */
.advanced-site header .fana-affiliation { padding-left: 16px; border-left: 1px solid var(--color-edge2); color: var(--color-muted); }
.advanced-site .fana-affiliation strong { color: var(--color-gold2); font-family: Georgia, 'Times New Roman', serif; font-size: 13px; font-weight: 400; }
.advanced-site .fana-affiliation a { font-size: 11px; padding: 4px 10px; border: 1px solid var(--color-edge2); border-radius: 8px; background: var(--color-panel); }

@media (max-width: 760px) {
  .advanced-site header .fana-affiliation { padding-left: 10px; }
  .advanced-site .fana-affiliation a { position: relative; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding-right: 22px; font-size: 10px; }
  .advanced-site .fana-affiliation a > [aria-hidden] { position: absolute; right: 8px; bottom: 8px; }
  .advanced-site .fana-affiliation strong { font-size: 12px; }
}
@media (max-width: 690px) {
  [data-coast-theme] .fana-affiliation { left: 25px; }
  [data-coast-theme] .fana-affiliation a { position: relative; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding-right: 22px; font-size: 11px; }
  [data-coast-theme] .fana-affiliation a > [aria-hidden] { position: absolute; right: 8px; bottom: 8px; }
}
@media (max-width: 360px) {
  [data-coast-theme] .fana-affiliation a { padding-left: 8px; padding-right: 14px; }
  [data-coast-theme] .fana-affiliation a > [aria-hidden] { right: 4px; }
}

.fana-social-links { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.fana-social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--color-edge2); border-radius: 10px; color: var(--color-gold2); background: var(--color-panel); text-decoration: none; }
.fana-social-link svg { width: 18px; height: 18px; fill: currentColor; }
.fana-social-link:hover { border-color: currentColor; }
.fana-social-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[data-coast-theme] .fana-social-link { color: #175570; background: #f3fcffdb; border-color: #ffffffbd; box-shadow: 0 2px 8px #07325610; }
[data-coast-theme="sunset"] .fana-social-link { color: #f4d5a8; background: #29283de8; border-color: #cfb1a14d; }
[data-coast-theme] > header > .fana-social-links { margin-right: auto; }
.advanced-site header > div > div:has(> .fana-social-links) { flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 760px) {
  .advanced-site header > div > div:has(> .fana-social-links) { flex-basis: 100%; gap: 6px; }
}
@media (max-width: 520px) {
  [data-coast-theme] > header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; }
  [data-coast-theme] > header > .fana-social-links { justify-self: end; margin: 0; }
  [data-coast-theme] > header > nav { grid-column: 1 / -1; justify-self: end; }
}