/* Shared site styles, loaded by every page (after the page's own <style> tokens).
   Social links: icons are the OFFICIAL monochrome files from LinkedIn and Instagram brand pages.
   LinkedIn allows only blue, black or white; Instagram black, white or gradient. Do not recolour. */
.socials{display:inline-flex; gap:8px; vertical-align:middle; flex-wrap:wrap;}
a.social{display:inline-flex; align-items:center; gap:7px; padding:.38em .8em .38em .6em; border:1px solid var(--border-strong, var(--border));
  border-radius:999px; text-decoration:none !important; color:var(--ink) !important; font-size:.82rem; font-weight:500; line-height:1.2;
  transition:border-color .15s ease, background .15s ease;}
a.social:hover{border-color:var(--brand); background:var(--surface, transparent);}
a.social::before{content:""; width:16px; height:16px; flex:none; background:center/contain no-repeat;}
a.social.li::before{background-image:url("img/linkedin-black.png");}
a.social.ig::before{background-image:url("img/instagram-black.svg");}
/* Dark mode: white versions (system setting, unless the visitor chose light; or an explicit dark choice). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) a.social.li::before{background-image:url("img/linkedin-white.png");}
  :root:not([data-theme="light"]) a.social.ig::before{background-image:url("img/instagram-white.svg");}
}
:root[data-theme="dark"] a.social.li::before{background-image:url("img/linkedin-white.png");}
:root[data-theme="dark"] a.social.ig::before{background-image:url("img/instagram-white.svg");}