/* Reusable pieces, used across sections: accent word, eyebrow label, buttons, brand icons, stickers,
   tags and chips. Reach for these before styling something new, so the site stays consistent */

.accent-word { position: relative; display: inline-block; color: var(--accent); font-family: var(--font-magic); font-size: 1.12em; line-height: .9; }
.accent-word svg { position: absolute; top: -.18em; right: -.42em; width: .38em; height: .38em; fill: var(--color-3); stroke: var(--ink); stroke-width: 1.4px; }

.eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 5px 14px;
  border: 2.5px solid var(--ink);
  border-radius: 99px;
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border: var(--line);
  border-radius: 99px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.button-primary { background: var(--accent); color: var(--on-accent); }
.button-secondary { background: var(--paper); color: var(--ink); }
.button-light { background: var(--paper); color: var(--ink); }
.button-color-1 { background: var(--color-1); color: var(--ink); }
.button-color-2 { background: var(--color-2); color: var(--ink); }

/* Socials: round outlined logo buttons (#icon-instagram, #icon-x) and the email as a plain pill */
.socials { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; padding: 0; list-style: none; }
.social-link, .social-email { display: inline-flex; align-items: center; justify-content: center; height: 54px; border: var(--line); border-radius: 99px; box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.social-link { width: 54px; background: var(--color-1); }
.socials li:nth-child(2) .social-link { background: var(--color-2); }
.social-link svg { width: 26px; height: 26px; fill: var(--ink); stroke: var(--ink); }
.social-email { padding: 0 22px; background: var(--paper); font-weight: 800; }
.social-link:active, .social-email:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }

/* Brand icons: sprite at the top of index.html (outline and shadow built in), white unless colored */
.icon { display: block; flex: 0 0 auto; aspect-ratio: 1; height: auto; }
.icon-shadow { fill: var(--ink); stroke: var(--ink); }
.icon-body { fill: var(--icon-fill, var(--paper)); stroke: var(--ink); paint-order: stroke; }
/* Line icons (the swirl): an ink stroke under a thinner colored one reads as an outlined ribbon */
.icon-line, .icon-line-body { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon-line { stroke: var(--ink); stroke-width: 9px; }
.icon-line-body { stroke: var(--icon-fill, var(--paper)); stroke-width: 6px; }
.icon-swirl { aspect-ratio: 200 / 130; }
.fill-accent { --icon-fill: var(--accent); }
.fill-color-1 { --icon-fill: var(--color-1); }
.fill-color-2 { --icon-fill: var(--color-2); }
.fill-color-3 { --icon-fill: var(--color-3); }

.sticker { position: absolute; pointer-events: none; }

.tag { flex: 0 0 auto; padding: 3px 12px; border: 2px solid var(--ink); border-radius: 99px; background: var(--card, var(--background)); font-size: .78rem; font-weight: 800; }

/* Chips: a labelled row of pill words (skills, tools) */
.chip-group { margin-top: 24px; }
.chip-label { margin-bottom: 10px; font-size: .8rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }
.chip-label-spaced { margin-top: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 6px 14px; border: 2.5px solid var(--ink); border-radius: 99px; background: var(--paper); box-shadow: 3px 3px 0 var(--ink); font-weight: 800; font-size: .92rem; }
.chips em { font-style: normal; font-weight: 600; color: var(--ink-soft); }
.chips-soft li { background: var(--color-1); }
.chips-soft li:nth-child(3n+2) { background: var(--color-2); }
.chips-soft li:nth-child(3n) { background: var(--color-3); }

/* Hover effects only where there's a mouse: on phones a tap would leave them stuck on. Every section file
   keeps its own hover effects in a block like this one */
@media (hover: hover) {
  .button:hover, .social-link:hover, .social-email:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
  .social-link:hover { background: var(--color-3); }
  /* After the hovers, so a press still shows while hovered */
  .button:active, .social-link:active, .social-email:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
}

@media (min-width: 681px) {
  .button { min-height: 54px; padding: 0 26px; font-size: 1.2rem; }
}