:root {
  --ink: #172441;
  --muted: #485773;
  --line: #dbe4f1;
  --accent: #1456ed;
  --surface: #f2f6ff;
  --sky: #dceaff;
}
* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: white;
  font-family: "Segoe UI", system-ui, sans-serif;
  line-height: 1.55;
}
a { color: var(--accent); text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.035em; }
h1 { font-size: clamp(2.75rem, 7vw, 5.75rem); }
h2 { font-size: clamp(1.65rem, 4vw, 2.5rem); }
.wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.skip { position: absolute; inset: 8px auto auto 8px; z-index: 4; padding: 8px; background: white; }
.skip:not(:focus) { clip-path: inset(50%); }
.masthead { --nav-pad: clamp(14px, 2.6vw, 34px); background: #fff; border-bottom: 1px solid var(--line); }
.masthead .wrap, nav, .actions { display: flex; flex-wrap: wrap; align-items: center; }
.masthead .wrap { justify-content: space-between; gap: 4px 24px; padding-block: var(--nav-pad); }
.brand { font-size: 1.25rem; font-weight: 750; letter-spacing: -.04em; }
nav { gap: 0 clamp(12px, 3vw, 28px); font-size: .875rem; }
.masthead a { color: var(--ink); text-decoration: none; }
.masthead a:hover, .masthead a[aria-current="page"] { color: var(--accent); }
nav a { padding-block: 8px; }
.nav-panel a:hover { text-decoration: underline; }

.actions { justify-content: center; gap: 12px; }
.actions a { padding: 10px 20px; border: 1px solid var(--accent); border-radius: 999px; text-decoration: none; }
.actions a:first-child, .actions a:hover { color: white; background: var(--accent); }
.actions a:focus-visible { outline-color: var(--accent); }

body > main { flex: 1; }
.page-intro {
  padding-block: clamp(42px, 7vw, 92px);
  background: var(--surface);
}
.page-intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(24px, 6vw, 72px);
}
.page-kicker {
  margin: 0 0 12px;
  color: #0753ba;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.page-intro h1, .project-hero h1 {
  margin: 0;
  font-size: clamp(2.75rem, 6vw, 5.4rem);
  font-weight: 550;
  overflow-wrap: break-word;
}
.page-lead { margin: 0 0 16px; color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.4rem); }
.page-jumps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.page-jumps a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid #b9cdf0;
  border-radius: 999px;
  background: #fff;
  color: #0753ba;
  font-size: .875rem;
  text-decoration: none;
}
.page-jumps a:hover { background: var(--sky); }
.page-content { padding-block: clamp(40px, 7vw, 88px); }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(245px, 100%), 1fr)); gap: 16px; }
.contact-grid section {
  margin: 0;
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  overflow-wrap: anywhere;
}
.contact-grid section h2 { font-size: 1.45rem; }
main section + section { margin-top: clamp(32px, 6vw, 64px); }
main section h2 { margin: 0 0 16px; }
main section > :last-child { margin-bottom: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.card {
  display: block;
  padding: clamp(24px, 5vw, 48px);
  border-radius: 22px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.card h3 { margin: 0 0 12px; font-size: clamp(1.45rem, 3vw, 2.2rem); }
.card p { margin: 0; color: var(--muted); }
a.card:hover h3 { text-decoration: underline; }
a.card:focus-visible { outline-color: var(--accent); }
.site-footer {
  padding-block: clamp(32px, 5vw, 64px) 24px;
  color: var(--muted);
  background: #f3f4f6;
}
.footer-links { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; }
.footer-links a { color: var(--ink); text-decoration: none; }
.footer-links a:hover { color: var(--accent); text-decoration: underline; }
.footer-group { display: grid; gap: 7px; justify-items: start; }
.footer-group p { margin: 0; color: var(--ink); font-weight: 650; }
.footer-caption { margin: 32px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: .875rem; }
.masthead .brand { color: #080b11; text-transform: uppercase; letter-spacing: .18em; }
.masthead nav { gap: 0 clamp(12px, 4vw, 56px); font-size: .95rem; }
.featured-strip { color: #fff; background: #050608; }
.featured-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 12px;
}
.featured-strip p { margin: 0; color: #c3ccdb; font-size: .9rem; }
.featured-strip span { display: block; color: #fff; font-size: 1.05rem; }
.featured-strip a {
  padding: 9px 22px;
  border-radius: 999px;
  background: #005fc9;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.featured-strip a:hover { background: #004caa; }
.home .hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(420px, 70svh, 720px);
  padding-block: 72px;
  overflow: hidden;
  background: radial-gradient(ellipse at 56% 28%, #164a60, #0b2035 45%, #070d18 80%);
  color: #fff;
  text-align: center;
}
.route-graphic {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}
.home .hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse, #080e1ced 3%, #080e1ca3 34%, transparent 78%);
  content: "";
}
.hero h1 { margin: 0; font-size: clamp(3.6rem, 8vw, 7rem); font-weight: 550; }
.hero-label { margin: 0 0 14px; color: #a7e7ff; font-size: .85rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.hero-subtitle { margin: 14px 0 26px; color: #e5eef9; font-size: clamp(1.1rem, 2.5vw, 1.6rem); }
.home .hero .actions a { border-color: #a9cbe5; background: #071628b3; color: #fff; }
.home .hero .actions a:first-child { border-color: #fff; background: #fff; color: #142640; }
.home .hero .actions a:hover { border-color: #91e4ff; background: #123f57; color: #fff; }
.home .hero .actions a:focus-visible { outline-color: #a7e7ff; }
.home-intro { padding-block: clamp(40px, 7vw, 84px); }
.home-intro h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.home-intro h2 + p { margin: 12px 0 0; color: var(--muted); font-size: 1.2rem; }
.home-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(1120px, calc(100% - 40px));
  gap: 16px;
  margin: 0 auto clamp(40px, 7vw, 84px);
}
.feature {
  padding: clamp(28px, 5vw, 60px);
  border-radius: 28px;
  background: var(--surface);
}
.feature h2 { margin: 0 0 12px; font-size: clamp(2rem, 4vw, 3.25rem); }
.feature p { margin: 0 0 16px; color: var(--muted); }
.feature-dark { background: var(--sky); }
@media (max-width: 640px) {
  .home-features { grid-template-columns: 1fr; }
}


.project-group h2 { font-size: 1.45rem; }
.project-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
  align-items: center;
  gap: 20px;
  padding: 24px;
  border-radius: 18px;
  color: var(--ink);
  background: var(--surface);
  text-decoration: none;
}
.project-row h3, .project-row p { margin: 0; }
.project-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.project-title img {
  flex: 0 0 auto;
  object-fit: contain;
  object-position: left center;
}
.project-title h3 { flex: 1 1 8rem; }
.project-title .discord-logo {
  padding: 8px;
  border-radius: 10px;
  background: var(--ink);
  object-position: center;
}
.project-row p { color: var(--muted); }
.project-row span { color: var(--accent); font-size: 1.35rem; }
.project-row:hover h3 { text-decoration: underline; text-underline-offset: .2em; }
.project-hero {
  padding-block: clamp(42px, 7vw, 92px);
  border-bottom: 1px solid var(--line);
}
.project-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  gap: clamp(24px, 6vw, 72px);
}
.project-hero-copy > p:not(.page-kicker) { margin: 14px 0 24px; color: var(--muted); font-size: 1.15rem; }
.project-hero .actions { justify-content: flex-start; }
.project-artwork {
  display: grid;
  place-items: center;
  min-height: clamp(150px, 24vw, 320px);
  padding: clamp(26px, 5vw, 60px);
  border-radius: 42% 24% 42% 24% / 48% 34% 48% 34%;
  background: #142642;
}
.project-hero-light .project-artwork { background: var(--surface); }
.project-hero-logo { display: block; width: min(100%, 360px); height: auto; }
.project-hero-logo-square { width: min(100%, 170px); border-radius: 14px; }
@media (max-width: 700px) {
  .page-intro-layout, .project-hero-layout { grid-template-columns: minmax(0, 1fr); }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-links > .brand { grid-column: 1 / -1; }
}
.project-story {
  max-width: 760px;
  padding-block: clamp(40px, 7vw, 88px);
}
.project-story section + section { padding-top: 28px; border-top: 1px solid var(--line); }
.project-subsection h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 600;
}
@media (max-width: 640px) {
  .project-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .project-row p { grid-row: 2; grid-column: 1; }
  .project-row span { grid-row: 1 / span 2; grid-column: 2; }
}

.education-logo {
  display: block;
  width: min(100%, 240px);
  height: auto;
  margin-bottom: 18px;
}

.experience-logo {
  display: block;
  width: 96px;
  height: 64px;
  max-width: 100%;
  margin-bottom: 16px;
  object-fit: contain;
  object-position: left center;
}

.secondary-education { margin-top: 14px; }
.secondary-education h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }


.experience-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 16px;
}
.experience-logos .experience-logo { margin-bottom: 0; }

.study-figure { min-width: 0; margin: 24px 0; }
.study-figure img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 14px; }
.study-figure figcaption { margin-top: 10px; color: var(--muted); font-size: .9rem; }
.study-hardware { max-width: 360px; }
.study-table { overflow-x: auto; }
.study-table table { width: 100%; border-collapse: collapse; }
.study-table caption { text-align: left; font-weight: 650; padding-bottom: 10px; }
.study-table th, .study-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.study-table td { white-space: nowrap; }

.masthead { position: relative; z-index: 3; }
.nav-item { display: inline-flex; align-items: center; }
.masthead nav > a, .nav-item > a { position: relative; }
.masthead nav > a::before, .nav-item > a::before {
  position: absolute;
  inset: calc(-1 * var(--nav-pad)) 0 auto;
  height: 4px;
  background: #000;
  opacity: 0;
  content: "";
}
.masthead nav > a:hover::before,
.masthead nav > a[aria-current]::before,
.nav-item > a:hover::before,
.nav-item > a[aria-current]::before,
.nav-item > a[aria-expanded="true"]::before { opacity: 1; }
.nav-panel {
  position: absolute;
  inset: 100% 0 auto;
  max-height: 68vh;
  overflow: auto;
  background: #fff;
}
.masthead .nav-panel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .65fr);
  align-items: start;
  gap: 24px;
  padding-block: clamp(24px, 4vw, 48px);
  border-top: 1px solid var(--ink);
}
.nav-panel h2 { margin: 0; font-size: clamp(1.85rem, 4vw, 3rem); font-weight: 550; }
.nav-panel-copy p { margin: 0 0 12px; font-size: clamp(1rem, 2vw, 1.35rem); }
.nav-panel-copy ul { margin: 0; padding: 0; list-style: none; }
.nav-panel-copy a { display: inline-block; padding-block: 5px; }
.nav-panel img { width: min(100%, 200px); max-height: 135px; align-self: center; justify-self: end; object-fit: contain; }
.nav-backdrop { position: fixed; inset: 0; z-index: 2; background: #131c3a77; }
@media (max-width: 680px) {
  .masthead nav > a::before, .nav-item > a::before { top: 0; height: 3px; }
  .masthead .nav-panel-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .nav-panel img { display: none; }
}