:root {
  --bg: #1a1c21;
  --page-background:
    radial-gradient(circle at 14% 12%, rgba(51, 56, 65, 0.26) 0%, transparent 38%),
    radial-gradient(circle at 82% 84%, rgba(43, 47, 55, 0.24) 0%, transparent 40%),
    linear-gradient(168deg, #1b1e24 0%, #20242b 48%, #252a32 100%);
  --surface: #23262d;
  --surface-elevated: #292d35;
  --surface-soft: #2f3440;
  --text-main: #eef1f7;
  --text-muted: #aeb5c3;
  --accent: #69b8ff;
  --accent-soft: #9dd2ff;
  --border: rgba(255, 255, 255, 0.08);
  --shadow:
    12px 12px 26px rgba(11, 13, 17, 0.62),
    -10px -10px 22px rgba(53, 58, 68, 0.34);
  --shadow-inset:
    inset 1px 1px 0 rgba(255, 255, 255, 0.08),
    inset -1px -1px 0 rgba(12, 14, 18, 0.42);
  --radius-xl: 28px;
  --radius-lg: 18px;
  --radius-md: 12px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background-color: #1b1e24;
  overscroll-behavior-y: auto;
}

body {
  background: var(--page-background);
  color: var(--text-main);
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.5;
}

a {
  color: inherit;
}

.page-shell {
  width: min(740px, 100% - 1.5rem);
  margin: 0 auto;
  padding: 1.1rem 0 4rem;
}

.profile-card,
.project-card,
.project-detail-card {
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), var(--surface);
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow), var(--shadow-inset);
}

.profile-card {
  background:
    radial-gradient(circle at 16% 18%, rgba(120, 220, 255, 0.19) 0%, transparent 42%),
    radial-gradient(circle at 52% 8%, rgba(158, 132, 255, 0.14) 0%, transparent 38%),
    radial-gradient(circle at 84% 82%, rgba(104, 212, 196, 0.17) 0%, transparent 44%),
    linear-gradient(156deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    var(--surface);
  padding: 1.55rem;
  margin-bottom: 1.4rem;
  text-align: center;
}

.profile-avatar {
  width: 108px;
  height: 108px;
  border-radius: 28px;
  border: none;
  margin-bottom: 1rem;
  background: var(--surface-soft);
  box-shadow:
    8px 8px 18px rgba(10, 11, 14, 0.5),
    -6px -6px 14px rgba(69, 75, 88, 0.28);
}

h1,
h2,
p {
  margin: 0;
}

h1,
h2 {
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(1.6rem, 5.1vw, 2.05rem);
}

.tagline {
  margin-top: 0.75rem;
  color: var(--text-muted);
}

.focus-list {
  margin: 1rem 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
}

.focus-list li {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
}

.focus-list li + li::before {
  content: "|";
  color: rgba(165, 181, 209, 0.55);
  margin-right: 0.45rem;
}

.email-link {
  color: var(--accent-soft);
  text-underline-offset: 0.25rem;
}

.profile-socials {
  margin-top: 0.72rem;
  justify-content: center;
}

.projects-block {
  margin-top: 1.8rem;
}

.publications-block {
  margin-top: 2.2rem;
}

.section-header {
  margin-bottom: 0.8rem;
}

.sub-section-header {
  margin-top: 1.2rem;
  margin-bottom: 0.5rem;
}

.sub-section-header h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--text-main);
}

.eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: rgba(175, 205, 235, 0.9);
}

.project-list {
  display: flex;
  flex-direction: column;
  gap: 0.92rem;
}

.project-card {
  overflow: visible;
  padding: 0.9rem;
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.project-card:hover {
  transform: translateY(-2px);
  box-shadow:
    16px 16px 30px rgba(10, 12, 16, 0.68),
    -10px -10px 24px rgba(61, 67, 79, 0.34),
    var(--shadow-inset);
}

.project-card:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

.project-visual {
  position: relative;
}

.project-banner-link,
.project-banner {
  display: block;
  width: 100%;
}

.project-banner {
  aspect-ratio: 16 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: none;
  margin-bottom: 0.8rem;
  box-shadow:
    10px 10px 22px rgba(11, 13, 17, 0.52),
    -8px -8px 16px rgba(57, 62, 73, 0.24);
}

.project-main {
  display: flex;
  align-items: center;
  gap: 0.82rem;
  margin-top: 1.35rem;
}

.project-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: none;
  box-shadow:
    6px 6px 14px rgba(10, 12, 16, 0.55),
    -5px -5px 12px rgba(60, 65, 76, 0.3);
}

.project-icon-overlap {
  position: absolute;
  right: 0.9rem;
  bottom: -1.35rem;
  width: 76px;
  height: 76px;
  border-radius: 18px;
  border: none;
  box-shadow:
    10px 10px 24px rgba(9, 11, 14, 0.58),
    -8px -8px 18px rgba(62, 68, 80, 0.26);
  background: var(--surface-soft);
}

.award-badge {
  position: absolute;
  right: 0.65rem;
  top: 0.65rem;
  min-height: 1.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 222, 164, 0.78);
  background: rgba(73, 56, 24, 0.86);
  color: #ffebc0;
  font-size: 0.62rem;
  line-height: 1;
  padding: 0.26rem 0.58rem;
  display: inline-flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.award-badge[data-variant="users"] {
  border-color: rgba(134, 234, 177, 0.85);
  background: rgba(23, 78, 53, 0.9);
  color: #c8ffe0;
}

.project-headline {
  flex: 1;
}

.project-title {
  text-decoration: none;
  font-weight: 700;
  font-size: 1.06rem;
}

.project-title:hover,
.project-title:focus-visible {
  color: var(--accent-soft);
}

.project-date {
  color: var(--text-muted);
  font-size: 0.84rem;
  margin-top: 0.08rem;
}

.project-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: none;
  padding: 0.08rem 0.55rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 3px 3px 9px rgba(9, 11, 15, 0.4);
}

.status-tag[data-status="live"] {
  border-color: rgba(90, 219, 207, 0.65);
  color: #97fff4;
  background: rgba(90, 219, 207, 0.14);
}

.status-tag[data-status="concept"] {
  border-color: rgba(170, 168, 255, 0.66);
  color: #cdc9ff;
  background: rgba(170, 168, 255, 0.16);
}

.status-tag[data-status="prototype"] {
  border-color: rgba(255, 204, 128, 0.66);
  color: #ffe0af;
  background: rgba(255, 204, 128, 0.14);
}

.project-one-liner {
  color: var(--text-muted);
  margin-top: 0.72rem;
}

.project-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.46rem;
  margin-top: 0.86rem;
}

.project-detail-card .project-actions {
  margin-top: 1rem;
  gap: 0.55rem;
}

.pill-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 999px;
  border: none;
  color: var(--accent-soft);
  background: linear-gradient(150deg, rgba(103, 186, 255, 0.2), rgba(103, 186, 255, 0.08));
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.32rem 0.72rem;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  box-shadow:
    5px 5px 12px rgba(11, 13, 17, 0.44),
    -4px -4px 10px rgba(63, 69, 81, 0.24);
}

.pill-link:hover,
.pill-link:focus-visible {
  transform: translateY(-1px);
  background: linear-gradient(150deg, rgba(103, 186, 255, 0.28), rgba(103, 186, 255, 0.13));
  box-shadow:
    7px 7px 14px rgba(10, 12, 16, 0.52),
    -5px -5px 12px rgba(66, 72, 84, 0.28);
}

.pill-link.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.deck-link {
  gap: 0.28rem;
}

.icon-only-link {
  width: 34px;
  height: 34px;
  padding: 0;
}

.deck-link svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pill-link.subtle {
  color: var(--text-main);
  background: linear-gradient(150deg, rgba(170, 178, 194, 0.16), rgba(170, 178, 194, 0.08));
}

.detail-action-link {
  gap: 0.38rem;
  padding: 0.34rem 0.74rem;
}

.detail-action-icon {
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.detail-action-icon svg {
  width: 15px;
  height: 15px;
}

.detail-action-icon svg.line-icon {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.detail-action-icon svg:not(.line-icon) {
  fill: currentColor;
}

.detail-action-label {
  line-height: 1;
}

.social-links {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.social-link {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: none;
  background: linear-gradient(140deg, rgba(159, 168, 184, 0.16), rgba(159, 168, 184, 0.07));
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  box-shadow:
    4px 4px 10px rgba(10, 12, 16, 0.42),
    -3px -3px 8px rgba(60, 66, 77, 0.24);
}

.social-link:hover,
.social-link:focus-visible {
  transform: translateY(-1px);
  background: linear-gradient(140deg, rgba(137, 202, 255, 0.26), rgba(137, 202, 255, 0.1));
  box-shadow:
    6px 6px 13px rgba(9, 11, 14, 0.52),
    -4px -4px 10px rgba(67, 73, 84, 0.25);
}

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

.publication-list {
  display: flex;
  flex-direction: column;
  gap: 0.58rem;
}

.publication-item {
  border-bottom: 1px solid rgba(201, 212, 232, 0.12);
  padding: 0.56rem 0.15rem 0.72rem;
}

.publication-item:last-child {
  border-bottom: none;
}

.publication-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}

.publication-title {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.publication-title::after {
  content: " ↗";
  color: var(--accent-soft);
  font-size: 0.86em;
}

.publication-title.is-disabled::after {
  content: "";
}

.publication-title:hover,
.publication-title:focus-visible {
  color: var(--accent-soft);
}

.publication-meta {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: right;
  white-space: nowrap;
}

.publication-one-liner {
  margin-top: 0.26rem;
  color: var(--text-muted);
  font-size: 0.91rem;
}

.back-link {
  display: inline-block;
  margin-bottom: 0.95rem;
  color: var(--accent-soft);
  text-decoration: none;
}

.project-detail-card {
  overflow: hidden;
  padding: 0.92rem;
}

.detail-banner {
  margin-bottom: 0.95rem;
}

.project-details,
.supporting-copy {
  color: var(--text-muted);
  margin-top: 0.85rem;
}

.project-detail-media {
  margin-top: 0.95rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.72rem;
}

.project-inline-media {
  display: block;
  width: min(100%, 680px);
  margin: 0.95rem auto 0;
  border: none;
  box-shadow: none;
}

.project-inline-media.is-half {
  width: min(50%, 340px);
}

.project-inline-media.is-half-plus {
  width: min(62.5%, 425px);
}

.project-inline-media.is-70 {
  width: min(70%, 320px);
}

.project-inline-media.is-full {
  width: 100%;
  max-width: none;
}

@media (max-width: 700px) {
  .project-inline-media.is-half,
  .project-inline-media.is-half-plus {
    width: min(100%, 520px);
  }
}

.project-media-card {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)), var(--surface-elevated);
}

.project-media-card.is-full-width {
  grid-column: 1 / -1;
}

.project-media-card.is-placeholder {
  border-style: dashed;
}

.project-media-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.project-media-video {
  overflow: hidden;
}

.project-video-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.project-media-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.project-media-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(206, 216, 232, 0.78);
  background:
    radial-gradient(circle at 20% 24%, rgba(105, 184, 255, 0.2) 0%, transparent 42%),
    radial-gradient(circle at 78% 72%, rgba(168, 156, 255, 0.19) 0%, transparent 45%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

.project-media-placeholder .line-icon {
  width: 34px;
  height: 34px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-media-caption {
  margin: 0;
  padding: 0.6rem 0.7rem 0.7rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 400ms ease, transform 400ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 700px) {
  .page-shell {
    padding-top: 2.2rem;
  }

  .profile-card,
  .project-card,
  .project-detail-card {
    border-radius: 30px;
  }

  .project-card {
    padding: 1rem;
  }

  .project-actions {
    gap: 0.55rem;
  }

  .project-detail-media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .publication-item {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
}

@media (max-width: 520px) {
  .publication-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }

  .publication-meta {
    text-align: left;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .project-card,
  .pill-link {
    transition: none;
  }
}