/* Nautical decorations: anchor icons, the wave line under the profile card and the sailboat on it. */
.brand{ display:flex; align-items:center; gap:8px; color:var(--header-text); }
.anchor-icon{ width:18px; height:18px; flex:none; }
.brand .anchor-icon{ color:var(--accent); }

/* The waves replace the line under the profile card. */
.hero{ border-bottom:none; }
.sea{ position:relative; height:56px; color:var(--heading); }
.sea .waves{ position:absolute; left:0; bottom:0; width:100%; height:28px; }
.sea .waves path{ fill:none; stroke:currentColor; stroke-width:1.5; }
.sea .waves .back{ opacity:0.25; }
.sea .waves .front{ opacity:0.55; }

.sailboat{
  position:absolute;
  right:12%;
  bottom:12px;
  width:56px;
  height:42px;
  animation:bob 4s ease-in-out infinite;
}
.sailboat .sail{ fill:var(--panel); stroke:var(--heading); stroke-width:1.5; stroke-linejoin:round; }
.sailboat .mast{ fill:var(--heading); }
.sailboat .hull{ fill:var(--accent); }
@keyframes bob{
  0%, 100%{ transform:translateY(0) rotate(-2deg); }
  50%{ transform:translateY(-4px) rotate(2deg); }
}
@media (prefers-reduced-motion:reduce){ .sailboat{ animation:none; } }

.footer-anchor{ order:2; display:flex; align-items:center; gap:10px; color:var(--muted); }
.footer-anchor .anchor-icon{ color:var(--heading); width:22px; height:22px; }

@media (max-width:640px){
  .sailboat{ right:8%; width:44px; height:33px; }
}