/* Portable language flags: SVG artwork in HTML, not platform-dependent emoji. */
.languages{flex-shrink:0;gap:2px}
.languages a{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:auto;min-width:48px;min-height:44px;padding:0 4px;white-space:nowrap;line-height:1}
.languages .language-flag{display:block;flex:0 0 20px;width:20px;height:14px;overflow:hidden;fill:none;stroke:none;stroke-linecap:butt;stroke-linejoin:miter}

/* Studio Aura / demo_kampaamo portfolio badge, adapted to this sticky header.
   Anchoring below the header keeps the demo notice from overlapping navigation.
   The badge stays at the right edge as the sticky header follows the viewport. */
.portfolio-badge{
  position:absolute;
  top:calc(100% + 12px);
  right:max(16px,env(safe-area-inset-right));
  z-index:90;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.48rem .72rem;
  border:1px solid rgba(42,33,30,.14);
  border-radius:999px;
  background:rgba(255,253,249,.9);
  color:var(--ink);
  box-shadow:0 8px 24px rgba(71,47,36,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:800;
  line-height:1.7;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
}
.portfolio-badge span{color:var(--muted);font-weight:700}
.mobile-nav:not([hidden]) ~ .portfolio-badge{visibility:hidden}
@media(max-width:700px){
  .portfolio-badge{top:calc(100% + 8px);right:max(10px,env(safe-area-inset-right));padding:.4rem .6rem;font-size:.61rem}
}
@media(max-width:370px){
  .languages{gap:0}
  .languages a{min-width:44px;gap:4px;padding:0 2px}
  .languages .language-flag{flex-basis:18px;width:18px}
}
@media print{.portfolio-badge{display:none!important}}