/* Liquid glass layer: kept separate so the visual direction is easy to revise. */
:root {
  --glass-line: rgba(255,255,255, .74);
  --glass-shadow: 0 24px 70px rgba(77,88,97, .12), 0 5px 18px rgba(77,88,97, .06);
  --glass-fill: linear-gradient(145deg, rgba(255,255,255, .72), rgba(249,250,252, .38) 56%, rgba(226,229,235, .43));
  --glass-blur: blur(24px) saturate(135%);
}

html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body { background: #f4f4ee; }
::selection { background: #bcc0cb; color: #2a3239; }

/* Entry: a pearlescent lens surrounded by slow, low-contrast color fields. */
.gateway {
  background:
    radial-gradient(ellipse 31% 48% at 81% 16%, rgba(183,191,198, .58), transparent 75%),
    radial-gradient(ellipse 44% 44% at 84% 76%, rgba(198,197,212, .48), transparent 75%),
    radial-gradient(ellipse 35% 42% at 13% 83%, rgba(229,204,194, .47), transparent 75%),
    linear-gradient(122deg, #fbf8f2 2%, #eaebed 54%, #e5e5e7 100%);
}
.gateway::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(62vw, 950px);
  aspect-ratio: 1.25;
  right: -14%;
  top: -19%;
  border-radius: 43% 57% 63% 37% / 51% 39% 61% 49%;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.8), rgba(205,208,215,.3) 51%, rgba(181,194,201,.18) 70%, transparent);
  filter: blur(40px);
  transform: rotate(-19deg);
  pointer-events: none;
}
.gateway::after {
  background: linear-gradient(92deg, rgba(255,255,255,.2), transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 109px, rgba(75,81,94,.035) 110px 111px);
}
.gateway-art { perspective: 1100px; transform-style: preserve-3d; }
.gateway-art::before {
  content: "";
  position: absolute;
  left: 60%;
  top: 82%;
  width: min(66vw, 750px);
  height: 115px;
  border-radius: 50%;
  transform: translateX(-50%) rotate(-12deg);
  background: radial-gradient(ellipse, rgba(73,87,99,.24), rgba(97,112,126,.08) 49%, transparent 72%);
  filter: blur(19px);
  pointer-events: none;
}
.gateway-art::after {
  content: "";
  position: absolute;
  left: 60%;
  top: 48%;
  width: min(61vw, 720px);
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.65);
  border-left-color: rgba(113,127,140,.25);
  border-bottom-color: rgba(113,127,140,.5);
  border-radius: 50%;
  transform: translate(-50%,-50%) rotate(-24deg) rotateX(68deg);
  box-shadow: 0 13px 23px rgba(79,96,110,.13), inset 0 0 18px rgba(255,255,255,.53);
  pointer-events: none;
}
.gateway-top, .gateway-bottom { position: relative; z-index: 5; }
.gateway { padding-top: 88px; }
.gateway-top {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 20;
  min-height: 70px;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 24px;
  background: linear-gradient(130deg, rgba(255,255,255,.75), rgba(249,250,252,.42) 70%, rgba(220,223,231,.5));
  box-shadow: 0 14px 40px rgba(70,81,90,.1), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
}
.gateway-top-link {
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 999px;
  background: rgba(255,255,255,.33);
  box-shadow: inset 0 1px rgba(255,255,255,.88), 0 8px 25px rgba(71,82,91,.08);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.gateway-halo {
  border-color: rgba(255,255,255,.64);
  box-shadow: 0 0 32px rgba(255,255,255,.45), inset 0 0 32px rgba(146,153,169,.14);
}
.halo-outer {
  border-style: dashed;
  border-color: rgba(135,147,158,.27);
  animation: glass-orbit 28s linear infinite;
}
.halo-mid {
  border-width: 2px;
  border-top-color: rgba(255,255,255,.95);
  border-right-color: rgba(245,247,251,.68);
  border-bottom-color: rgba(103,118,132,.27);
  border-left-color: rgba(255,255,255,.35);
  animation: glass-breathe 8s ease-in-out infinite;
}
.halo-inner { border-color: rgba(255,255,255,.85); box-shadow: 0 0 70px rgba(141,151,160,.4), inset 0 0 50px rgba(255,255,255,.38); }
.gateway-core {
  background:
    radial-gradient(circle at 29% 22%, rgba(255,255,255,.94) 0 5%, transparent 23%),
    radial-gradient(circle at 41% 36%, #f8f8ee 0, #dee0e6 21%, #b8bcc6 47%, #9ea6ad 70%, #7b8894 100%);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: inset 19px 21px 34px rgba(255,255,255,.8), inset -26px -31px 42px rgba(68,82,94,.35),
    0 24px 34px rgba(63,75,86,.17), 0 0 100px rgba(142,149,167,.4);
}
.gateway-core::after {
  inset: 5%;
  background: linear-gradient(135deg, rgba(255,255,255,.77), rgba(255,255,255,0) 42%, rgba(255,255,255,.17) 65%, transparent);
  filter: blur(7px);
}
.gateway-core::before {
  inset: -26%;
  border: 2px solid rgba(255,255,255,.6);
  border-right-color: rgba(93,110,125,.34);
  transform: rotateX(72deg) rotate(-22deg);
  box-shadow: 0 15px 30px rgba(91,108,122,.13), inset 0 0 18px rgba(255,255,255,.36);
}
.gateway-scan { opacity: .7; transform: translate(-50%,-50%) rotate(-28deg); }
.gateway-kicker {
  align-self: flex-start;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  background: rgba(255,255,255,.33);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.gateway h1 { text-shadow: 0 2px 26px rgba(255,255,255,.9); }
.gateway h1 span { color: #75808a; }
.enter-button {
  border-radius: 24px;
  border: 1px solid var(--glass-line);
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow), inset 0 2px rgba(255,255,255,.9), inset 0 -1px rgba(155,161,175,.2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.enter-button:hover { background: rgba(226,229,237,.81); transform: translateY(-4px); }
.enter-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.54);
}

/* Portfolio: an editorial hero with one large glass lens. */
.site-header { position: fixed; border: 0; padding-top: 18px; }
.nav-wrap {
  min-height: 70px;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 24px;
  background: linear-gradient(130deg, rgba(255,255,255,.75), rgba(249,250,252,.42) 70%, rgba(220,223,231,.5));
  box-shadow: 0 14px 40px rgba(70,81,90,.1), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
}
.primary-nav { gap: clamp(15px, 2vw, 34px); }
.primary-nav .nav-contact {
  border: 1px solid rgba(255,255,255,.77);
  border-radius: 999px;
  background: linear-gradient(140deg, rgba(213,217,227,.96), rgba(169,175,189,.82));
  box-shadow: inset 0 1px rgba(255,255,255,.85), 0 6px 18px rgba(81,88,105,.13);
}
.hero {
  background:
    radial-gradient(ellipse 38% 47% at 79% 34%, rgba(175,186,195,.63), transparent 79%),
    radial-gradient(ellipse 28% 46% at 97% 85%, rgba(186,188,207,.51), transparent 75%),
    radial-gradient(ellipse 36% 41% at 12% 83%, rgba(225,201,190,.34), transparent 75%),
    linear-gradient(125deg, #fbf9f3, #eaebee 57%, #e3e6e9);
}
.hero::before {
  content: "";
  position: absolute;
  width: min(55vw, 800px);
  aspect-ratio: 1.1;
  right: -16%;
  bottom: -37%;
  border-radius: 61% 39% 35% 65% / 58% 58% 42% 42%;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.46);
  box-shadow: inset 18px 20px 60px rgba(255,255,255,.5), 0 0 90px rgba(110,123,134,.15);
  transform: rotate(24deg);
  pointer-events: none;
}
.hero-grid { opacity: .09; }
.hero-glow { background: radial-gradient(circle, rgba(148,163,176,.45), transparent 64%); filter: blur(43px); }
.hero h1 { color: #2a333a; text-shadow: 0 4px 28px rgba(255,255,255,.75); }
.outlined-word { -webkit-text-stroke: 1px #6a7782; }
.hero-lede {
  width: fit-content;
  max-width: 610px;
  padding: 18px 23px;
  border: 1px solid rgba(255,255,255,.69);
  border-radius: 20px;
  background: rgba(255,255,255,.31);
  box-shadow: inset 0 1px rgba(255,255,255,.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.hero-visual::before {
  background: radial-gradient(circle, rgba(237,239,244,.94) 0, rgba(179,190,200,.51) 38%, rgba(218,223,227,.17) 62%, transparent 72%);
  filter: blur(21px);
}
.visual-frame::before {
  content: "";
  position: absolute;
  inset: 15% 14%;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 50%;
  background: radial-gradient(circle at 31% 22%, rgba(255,255,255,.63), rgba(255,255,255,.1) 42%, rgba(126,140,153,.16) 78%, rgba(255,255,255,.48));
  box-shadow: inset 14px 18px 32px rgba(255,255,255,.48), inset -16px -18px 40px rgba(103,117,130,.18), 0 25px 60px rgba(91,103,114,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.visual-frame svg { position: relative; filter: drop-shadow(0 3px 18px rgba(86,94,113,.2)); }
.visual-frame::after {
  content: "";
  position: absolute;
  width: 57%;
  height: 7%;
  left: 23%;
  bottom: 6%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(78,92,105,.18), rgba(78,92,105,.06) 53%, transparent 75%);
  filter: blur(15px);
  z-index: -1;
}
.button-lime {
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 999px;
  background: linear-gradient(145deg, #d7dbe3, #b3b9c6);
  box-shadow: inset 0 1px rgba(255,255,255,.8), 0 10px 28px rgba(92,101,123,.18);
}
.button-lime:hover { background: linear-gradient(145deg, #d1d5df, #a4aab8); transform: translateY(-3px); }

/* Quiet glass surfaces keep long-form content legible. */
.about {
  background: radial-gradient(ellipse 29% 39% at 8% 62%, rgba(204,207,215,.44), transparent 80%),
    radial-gradient(ellipse 26% 30% at 95% 14%, rgba(227,209,200,.31), transparent 80%), #f8f8f3;
}
.portrait-panel {
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 28px;
  box-shadow: var(--glass-shadow), inset 0 1px rgba(255,255,255,.6);
}
.portrait-panel img,
.portrait-panel:hover img { filter: none; }
.portrait-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(142deg, rgba(255,255,255,.26), transparent 30%, transparent 65%, rgba(255,255,255,.12));
}
.about-copy { min-width: 0; }
.about-stats {
  padding: 22px 18px;
  border: 1px solid var(--glass-line);
  border-radius: 22px;
  background: var(--glass-fill);
  box-shadow: 0 13px 35px rgba(77,83,97,.08), inset 0 1px rgba(255,255,255,.85);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.about-stats strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.experience-strip { border-top-color: rgba(110,117,133,.25); }
.experience-item { padding: 5px 0; }

.journey {
  background: radial-gradient(ellipse 34% 48% at 86% 35%, rgba(194,207,219,.43), transparent 81%),
    linear-gradient(135deg, #e9eaed, #e3e5e8 55%, #ebecef);
}
.education-map {
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 32px;
  background: radial-gradient(circle at 15% 80%, rgba(224,204,194,.36), transparent 34%),
    radial-gradient(circle at 84% 13%, rgba(181,191,200,.43), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.77), rgba(242,243,246,.48) 49%, rgba(227,230,233,.58));
  box-shadow: var(--glass-shadow), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.education-map::before { background-image: linear-gradient(rgba(96,102,117,.065) 1px, transparent 1px), linear-gradient(90deg, rgba(96,102,117,.065) 1px, transparent 1px); }
.education-path-base { stroke: #a1a7b4; }
.education-path-progress { stroke: #646e84; }
.education-plane-halo { fill: rgba(252,252,253,.93); stroke: #abb2c3; }
.education-node {
  border: 1px solid rgba(255,255,255,.87);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.83), rgba(240,242,247,.53));
  box-shadow: 0 12px 28px rgba(72,79,95,.14), inset 0 1px rgba(255,255,255,.95);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}
.education-node:hover, .education-node:focus-visible {
  border-color: rgba(126,136,158,.75);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 34px rgba(72,79,95,.18), inset 0 1px #fff;
}

.projects {
  background: radial-gradient(ellipse 35% 25% at 3% 14%, rgba(218,198,191,.35), transparent 76%),
    radial-gradient(ellipse 35% 35% at 95% 63%, rgba(182,190,197,.4), transparent 81%), #ecedef;
}
.project-card {
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 28px;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow), inset 0 1px rgba(255,255,255,.88);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.project-media { border-radius: 26px 26px 12px 12px; }
.project-info { background: linear-gradient(150deg, rgba(255,255,255,.42), rgba(234,236,240,.12)); }
.project-open {
  flex: 0 0 auto;
  border-color: rgba(255,255,255,.87);
  background: rgba(255,255,255,.45);
  box-shadow: inset 0 1px rgba(255,255,255,.88), 0 8px 20px rgba(82,89,107,.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.project-open:hover { background: rgba(203,207,218,.88); }

.strengths {
  background: radial-gradient(ellipse 38% 55% at 10% 60%, rgba(199,202,210,.42), transparent 82%),
    radial-gradient(ellipse 40% 52% at 98% 3%, rgba(207,204,219,.3), transparent 76%), #f8f8f4;
}
.strength-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 25px;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.strength-card::after {
  content: "";
  position: absolute;
  right: -62px;
  top: -76px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.73), rgba(185,190,201,.16) 62%, transparent 72%);
  pointer-events: none;
}
.strength-card:hover { background: rgba(255,255,255,.73); box-shadow: 0 28px 65px rgba(79,85,100,.18), inset 0 1px #fff; }

.honors {
  background: radial-gradient(ellipse 32% 54% at 82% 36%, rgba(185,193,200,.49), transparent 80%),
    linear-gradient(135deg, #eaeaec, #e8e9e3 60%, #f1f0eb);
}
.honors::before { opacity: .42; }
.honors-list { border-color: rgba(124,131,146,.25); }
.honor-item { border-color: rgba(124,131,146,.25); border-radius: 16px; }
.honor-item:hover { background: rgba(255,255,255,.46); box-shadow: inset 0 1px rgba(255,255,255,.75); }

.contact {
  background: radial-gradient(ellipse 42% 63% at 83% 23%, rgba(226,229,236,.85), transparent 76%),
    radial-gradient(ellipse 34% 55% at 10% 90%, rgba(198,204,216,.42), transparent 76%),
    linear-gradient(130deg, #dee1e7, #ccd0d9 68%, #dcdee3);
}
.contact::before { border-color: rgba(255,255,255,.42); box-shadow: 0 0 0 95px rgba(255,255,255,.11), 0 0 0 190px rgba(255,255,255,.07); }
.contact-main-link {
  padding-inline: 24px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 22px;
  background: rgba(255,255,255,.28);
  box-shadow: inset 0 1px rgba(255,255,255,.8), 0 14px 35px rgba(77,85,103,.08);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.contact-main-link:hover { background: rgba(255,255,255,.48); }
.site-footer { background: #eaecef; }
.project-dialog {
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 27px;
  background: linear-gradient(145deg, rgba(249,249,251,.96), rgba(233,235,239,.95));
  box-shadow: 0 35px 110px rgba(28,39,48,.36), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}
.project-dialog::backdrop { background: rgba(41,50,58,.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.dialog-close { background: rgba(52,58,73,.83); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

@keyframes glass-orbit {
  to { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes glass-breathe {
  50% { transform: translate(-50%,-51%) scale(1.035); opacity: .77; }
}

@media (max-width: 940px) {
  .site-header { padding-top: 14px; }
  .gateway-top { top: 14px; }
  .nav-wrap { position: relative; }
  .primary-nav {
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    padding: 16px 23px 22px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 22px;
    background: rgba(247,247,249,.9);
    box-shadow: 0 18px 42px rgba(62,69,85,.15), inset 0 1px #fff;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 98px; }
  .gateway { padding-top: 78px; }
  .gateway-top { min-height: 64px; padding: 0 18px; border-radius: 20px; }
  .gateway-art { opacity: .86; }
  .nav-wrap { min-height: 64px; padding: 0 18px; border-radius: 20px; }
  .hero { min-height: 800px; }
  .hero-visual { opacity: .49; }
  .hero-lede { padding: 15px 17px; max-width: 490px; }
  .education-map { border-radius: 24px; }
  .project-card, .portrait-panel { border-radius: 23px; }
  .project-media { border-radius: 21px 21px 9px 9px; }
  .strength-card { border-radius: 21px; }
  .contact-main-link { padding-inline: 18px; }
  .gateway-art::before { left: 67%; top: 75%; width: 92vw; }
  .gateway-art::after { left: 67%; top: 43%; width: 77vw; }
}
@media (max-width: 480px) {
  .gateway-art { opacity: .77; }
  .gateway::before { width: 115vw; right: -58%; top: 7%; }
  .gateway h1 { text-shadow: 0 2px 18px rgba(255,255,255,.96); }
  .gateway-kicker { font-size: 9px; }
  .enter-button { border-radius: 19px; }
  .enter-arrow { width: 28px; height: 28px; }
  .hero { min-height: 790px; }
  .hero-lede { font-size: 14px; line-height: 1.7; }
  .hero-visual { opacity: .34; }
  .about-stats { padding: 17px 13px; }
  .education-node { border-radius: 13px; }
  .contact-main-link { border-radius: 18px; }
  .project-dialog { width: calc(100vw - 18px); border-radius: 20px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-wrap, .primary-nav, .enter-button, .education-node, .project-card, .strength-card, .about-stats, .contact-main-link {
    background: rgba(249,249,251,.94);
  }
}
@media (prefers-reduced-motion: reduce) {
  .enter-button:hover, .button-lime:hover { transform: none; }
  .halo-outer, .halo-mid { animation: none; }
}