@font-face {
  font-family: Cygre;
  src: url('./assets/Cygre-Black.ttf') format('truetype');
  font-style: normal;
  font-weight: 900;
  font-display: block;
}

@font-face {
  font-family: Cygre;
  src: url('./assets/Cygre-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: block;
}

:root {
  color-scheme: light;
  --red: #e94945;
  --blue: #18447f;
  --green: #0d9357;
  --yellow: #f4dd40;
  --pink: #d97eb2;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; background: #fff; }
body { color: var(--red); font-family: Cygre, sans-serif; }
.home { position: relative; width: 100%; height: 100svh; min-height: 400px; overflow: hidden; isolation: isolate; user-select: none; -webkit-user-select: none; }
/* No header stacking context: logo(1), trail(2), navigation text(3). */
.site-header { position: absolute; inset: 2.45vh 0 auto; }
.site-header nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 120px);
  align-items: center;
  justify-items: center;
  width: 52vw;
  max-width: 1040px;
  margin-inline: auto;
}
/* Match edge-to-edge gaps despite the two labels having different widths. */
.nav-work { justify-self: end; }
.nav-contact { justify-self: start; }
.nav-link {
  position: relative;
  z-index: 3;
  color: var(--red);
  font-weight: 700;
  font-size: 1.47vw;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-decoration: none;
}
.nav-link::after {
  content: '';
  position: absolute;
  height: 1.5px;
  background: currentColor;
  left: 0; right: 0; bottom: -2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms cubic-bezier(.22,.61,.36,1);
}
.nav-link[aria-current="page"]::after, .nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.brand { position: relative; z-index: 1; display: block; width: 9.6vw; max-width: 192px; }
.brand svg { display: block; width: 100%; height: auto; transform-origin: center; transition: transform 420ms cubic-bezier(.25,.1,.25,1); }
@media (hover: hover) and (pointer: fine) { .brand:hover svg { transform: scale(1.12); } }
.brand:focus-visible svg { transform: scale(1.12); }
.ladybug { position: absolute; top: 0; left: 0; width: 17.16px; height: 23.4px; margin: -10.92px 0 0 -7.8px; pointer-events: none; z-index: 5; transform-origin: center; }
.ladybug svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ladybug.walking .ladybug-legs { transform-origin: 9px 14px; animation: ladybug-step 170ms ease-in-out infinite alternate; }
@keyframes ladybug-step { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) { .ladybug-legs { animation: none !important; } }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 7px; }
.cursor-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.portfolio-title {
  position: absolute;
  left: 1.93vw;
  right: 1.93vw;
  bottom: 2.84vh;
  height: 12.01vw;
  margin: 0;
  z-index: 1;
  font-weight: 900;
  line-height: 1;
}
.portfolio-type { width: 100%; height: 100%; display: block; overflow: visible; fill: var(--red); pointer-events: none; }
.portfolio-type text { font-family: Cygre, sans-serif; font-weight: 900; font-size: 1000px; }
.title-fallback { position: absolute; bottom: 0; left: 0; font-size: 16.5vw; letter-spacing: -.055em; }
.type-ready .title-fallback { display: none; }
@media (prefers-reduced-motion: reduce) { .nav-link::after, .brand svg { transition: none; } .brand:hover svg, .brand:focus-visible svg { transform: none; } }