:root {
  color-scheme: dark;
  background: #101217;
}

body.portfolio {
  display: block;
  padding: clamp(0.75rem, 3vw, 2rem);
  background:
    linear-gradient(180deg, #0e101644, #0e1016 50rem),
    #101217 url("img/OrbitalSunrise.jpg") center top no-repeat;
  background-size: auto, max(100%, 62rem) auto;
  font-family: Inter, "Segoe UI", sans-serif;
  color: #f5f6f8;
}

.wrap { width: min(100%, 68rem); margin-inline: auto; }

.skip-link {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-200%);
  padding: 0.75rem;
  background: #d5eaff;
  color: #111820;
}

.skip-link:focus { transform: none; }
.portfolio a:focus-visible { outline-color: #b5daff; }

.site-header { margin-bottom: clamp(1rem, 3vw, 2rem); }

.header-inner,
.panel {
  border: 1px dashed #929baa;
  border-radius: 0.75rem;
  background: #272b32ed;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  padding: 0.65rem clamp(0.75rem, 3vw, 1.5rem);
}

.header-inner nav a,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.5rem clamp(0.55rem, 2vw, 0.9rem);
  border: 1px dashed #929baa;
  border-radius: 0.5rem;
  background: #363d49;
  color: #f5f6f8;
  text-decoration: none;
}

.header-inner nav a:hover { background: #485368; }

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2rem, 6vw, 4.25rem) 1.1rem;
  text-align: center;
  border: 1px dashed #929baa;
  border-radius: 0.75rem;
  background: linear-gradient(180deg, #22262abf, #151920e8);
}

.portfolio h1, .portfolio h2, .portfolio h3, .button {
  font-family: Audiowide, sans-serif;
}

.portfolio h1 { font-size: clamp(2.15rem, 7vw, 4rem); line-height: 1.1; }
.portfolio .pfp-SC {
  display: block;
  width: clamp(5.5rem, 18vw, 8rem);
  height: auto;
  padding: 0.3rem;
  border: 2px dashed #b1c1d2;
  background: #20252e;
}

.hero h2 { font-size: clamp(1.1rem, 4.6vw, 1.65rem); margin-bottom: 0.35rem; }
.hero p { color: #e0e5ed; margin-bottom: 1.5rem; }
.button { background: #d5eaff; border-color: #42617d; color: #111820; }
.button:hover { background: #f0f7ff; }

.projects {
  margin-top: clamp(1rem, 3vw, 2rem);
  padding: clamp(1rem, 4vw, 2rem);
}

.project {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1rem;
  border: 1px solid #515b6b;
  border-radius: 0.5rem;
  background: #1b1f26;
}

.project h3 { margin: 0; font-size: 1.1rem; }
.project p { margin: 0.375rem 0 0; color: #ced6e3; }
.project a, .footer a { color: #b5daff; text-underline-offset: 0.2em; }
.footer { padding: 1.25rem 0; color: #b8c3d2; }


.header-inner nav .social-link {
  width: 44px;
  padding: 0;
}

.social-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}