:root {
  color-scheme: dark;
  --color-page: #151619;
  --color-card: #2f6bdf;
  --color-card-deep: #2458be;
  --color-surface-glass: rgb(255 255 255 / 22%);
  --color-border-glass: rgb(255 255 255 / 24%);
  --color-text: #ffffff;
  --color-text-secondary: rgb(255 255 255 / 78%);
  --color-focus: #ffffff;
  --gradient-profile: linear-gradient(to bottom, rgb(47 107 223 / 0) 0%, rgb(47 107 223 / 15%) 45%, rgb(47 107 223 / 72%) 72%, var(--color-card) 100%);
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius-card: 1.5rem;
  --radius-row: 1.25rem;
  --radius-pill: 999px;
  --motion-fast: 140ms;
  --motion-base: 180ms;
  --motion-tab: 250ms;
  --motion-panel: 160ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --page-width: 32rem;
  --page-gutter: 1rem;
}


*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, p { margin: 0; }
button { font: inherit; }
img { display: block; max-width: 100%; }

body {
  min-width: 20rem;
  min-height: 100svh;
  overflow-x: hidden;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
::selection { background: rgb(255 255 255 / 28%); }

.skip-link {
  position: fixed;
  z-index: 10;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-row);
  background: var(--color-text);
  color: var(--color-card-deep);
  transform: translateY(-160%);
  transition: transform var(--motion-base) var(--ease-standard);
}
.skip-link:focus-visible { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; }
}


.link-page { background: var(--color-card); display: grid; gap: var(--space-4); margin-inline: auto; min-height: 100svh; overflow: hidden; padding-bottom: var(--space-5); position: relative; width: min(100%, var(--page-width)); }
.link-page__brand { align-items: center; display: flex; height: 2rem; justify-content: center; position: absolute; top: var(--space-4); left: 0; right: 0; z-index: 2; }
.link-page__brand img, .link-page__brand > span { border-radius: 0.5rem; height: 1.75rem; width: 1.75rem; }
.link-page__brand > span { align-items: center; background: var(--color-card-deep); color: var(--color-text); display: inline-flex; font-size: 0.75rem; font-weight: 750; justify-content: center; letter-spacing: -0.06em; }

.profile-card { height: clamp(29rem, 60svh, 37rem); isolation: isolate; position: relative; }
.profile-card__media, .profile-card__gradient { inset: 0; position: absolute; }
.profile-card__image, .profile-card__placeholder { height: 100%; width: 100%; }
.profile-card__image { object-fit: cover; object-position: var(--profile-object-position, 50% 50%); }
.profile-card__placeholder { align-items: center; background: var(--color-card-deep); color: var(--color-text-secondary); display: flex; flex-direction: column; gap: var(--space-2); justify-content: center; padding: var(--space-5); text-align: center; }
.profile-card__placeholder code { color: var(--color-text-secondary); font-family: var(--font-sans); font-size: 0.75rem; overflow-wrap: anywhere; }
.profile-card__gradient { background: var(--gradient-profile); z-index: 1; }
.profile-card__content { bottom: 0; display: grid; gap: var(--space-2); left: 0; padding: var(--space-8) var(--space-5) var(--space-5); position: absolute; right: 0; text-align: center; z-index: 2; }
.profile-card h1 { font-size: clamp(2rem, 8vw, 2.65rem); letter-spacing: -0.04em; line-height: 1.05; }
.profile-card__tagline { font-size: 0.9375rem; font-weight: 650; }
.profile-card__description { color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.5; margin-inline: auto; max-width: 29rem; }

.tab-switch { background: rgb(255 255 255 / 16%); border: 1px solid var(--color-border-glass); border-radius: var(--radius-pill); display: grid; gap: var(--space-1); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: var(--space-4); min-height: 3.5rem; padding: var(--space-1); position: relative; }
.tab-switch__indicator { background: var(--color-text); border-radius: var(--radius-pill); bottom: var(--space-1); left: var(--space-1); pointer-events: none; position: absolute; top: var(--space-1); transform: translateX(0); transition: transform var(--motion-tab) var(--ease-standard); width: calc(50% - 0.375rem); }
.tab-switch[data-active-tab="projects"] .tab-switch__indicator { transform: translateX(calc(100% + var(--space-1))); }
.tab-switch__tab { appearance: none; background: transparent; border: 0; border-radius: var(--radius-pill); color: var(--color-text-secondary); cursor: pointer; font-size: 0.9375rem; font-weight: 650; min-height: 2.75rem; padding-inline: var(--space-3); position: relative; transition: color var(--motion-tab) var(--ease-standard); z-index: 1; }
.tab-switch__tab[aria-selected="true"] { color: var(--color-card-deep); }
.tab-switch__tab:hover:not([aria-selected="true"]) { color: var(--color-text); }

.tab-panel { animation: panel-in var(--motion-panel) var(--ease-standard); margin-inline: var(--space-4); }
.tab-panel[hidden] { display: none; }
.item-list { display: grid; gap: var(--space-3); }
.item-row { align-items: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: var(--color-surface-glass); border: 1px solid var(--color-border-glass); border-radius: var(--radius-row); display: grid; grid-template-columns: 2rem 1fr 2rem; min-height: 4.5rem; padding: var(--space-3); text-decoration: none; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
a.item-row:hover { background: rgb(255 255 255 / 30%); border-color: rgb(255 255 255 / 40%); transform: translateY(-1px); }
a.item-row:active { transform: translateY(0); }
.item-row__icon { align-items: center; display: inline-flex; height: 1.9rem; justify-content: center; width: 1.9rem; }
.item-row__icon img { display: block; height: 1.375rem; width: 1.375rem; }
.item-row__icon > span { align-items: center; border: 1px solid var(--color-border-glass); border-radius: var(--radius-pill); color: var(--color-text-secondary); display: inline-flex; font-size: 0.625rem; font-weight: 750; height: 1.75rem; justify-content: center; letter-spacing: -0.03em; width: 1.75rem; }
.item-row__label { font-size: 1rem; font-weight: 650; text-align: center; }
.item-row__arrow { color: var(--color-text-secondary); font-size: 1rem; text-align: right; }
.project-row { column-gap: var(--space-3); grid-template-columns: 3rem minmax(0, 1fr) 1.5rem; }
.project-row--static { grid-template-columns: 3rem minmax(0, 1fr); }
.project-row__logo, .project-row__fallback { align-items: center; background: rgb(255 255 255 / 16%); border: 1px solid var(--color-border-glass); border-radius: 0.75rem; display: flex; height: 3rem; justify-content: center; min-width: 3rem; object-fit: contain; padding: 0.25rem; width: 3rem; }
.project-row__fallback { color: var(--color-text); font-size: 0.75rem; font-weight: 750; letter-spacing: -0.03em; }
.project-row__content { display: grid; gap: var(--space-1); min-width: 0; }
.project-row__title { font-size: 0.9375rem; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.project-row__status { border: 1px solid var(--color-border-glass); border-radius: var(--radius-pill); color: var(--color-text-secondary); font-size: 0.75rem; font-weight: 600; justify-self: start; line-height: 1.2; padding: 0.3rem 0.55rem; }

.site-footer { padding: var(--space-2) var(--space-4) 0; text-align: center; }
.site-footer p { color: var(--color-text-secondary); font-size: 0.75rem; }

@keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 34rem) {
  body { display: grid; place-items: center; padding: var(--space-6); }
  .link-page { border-radius: var(--radius-card); box-shadow: 0 1.25rem 3.5rem rgb(0 0 0 / 30%); }
  .profile-card { height: 35rem; }
}

@media (prefers-reduced-motion: reduce) { .tab-switch__indicator, .tab-switch__tab { transition: none; } .tab-panel { animation: none; } }


:root { --profile-object-position: center top; }