:root {
  color-scheme: dark;
  --page: #15161d;
  --shell: #1b1c25;
  --sidebar: #20212b;
  --panel: #252631;
  --panel-soft: #22232d;
  --text: #f1f1ed;
  --muted: #999ba6;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.15);
  --accent: #f5bd32;
  --accent-soft: rgba(245,189,50,.12);
  --max: 1480px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--page); color: var(--text); font: 400 16px/1.65 "Manrope", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; z-index: 99; top: -100px; left: 1rem; padding: .75rem 1rem; background: var(--accent); color: #181818; font-weight: 700; }.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.portfolio-shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); width: min(calc(100% - 48px), var(--max)); height: calc(100vh - 48px); margin: 24px auto; overflow: hidden; background: var(--shell); box-shadow: 0 24px 80px rgba(0,0,0,.34); }
.profile-sidebar { display: grid; grid-template-rows: auto minmax(0,1fr) 58px; min-height: 0; border-right: 1px solid var(--line); background: var(--sidebar); }
.profile-head { padding: 30px 28px 24px; text-align: center; border-bottom: 1px solid var(--line); }
.avatar-wrap { position: relative; width: 94px; height: 94px; margin: 0 auto 17px; overflow: hidden; border-radius: 50%; border: 3px solid #2b2c37; box-shadow: 0 0 0 1px var(--line-strong); }
.avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
.avatar-wrap span { position: absolute; right: 2px; bottom: 8px; width: 14px; height: 14px; border: 3px solid var(--sidebar); border-radius: 50%; background: var(--accent); }
.profile-head h1 { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }.profile-head p { margin: .5rem 0 0; color: var(--muted); font-size: .73rem; line-height: 1.6; }
.sidebar-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #353641 transparent; padding: 24px 28px; }
.location-list { display: grid; gap: .35rem; margin: 0; padding: 0 0 24px; border-bottom: 1px solid var(--line); }
.location-list div { display: flex; justify-content: space-between; gap: 1rem; }.location-list dt { font-size: .72rem; font-weight: 700; }.location-list dd { margin: 0; color: var(--muted); font-size: .72rem; }
.skill-block, .toolbox { padding: 24px 0; border-bottom: 1px solid var(--line); }.toolbox { border: 0; }
.skill-block h2, .toolbox h2 { margin: 0 0 1rem; color: #d8d8d4; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.skill { margin-top: 1rem; }.skill > div { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .42rem; font-size: .68rem; }.skill > div span:last-child { color: var(--muted); font: 400 .58rem/1.5 "DM Mono", monospace; }
.skill i { display: block; position: relative; height: 3px; background: #363743; }.skill i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--level); background: var(--accent); }
.toolbox ul { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .75rem; margin: 0; padding: 0; list-style: none; }.toolbox li { position: relative; padding-left: .85rem; color: var(--muted); font-size: .65rem; }.toolbox li::before { content: ""; position: absolute; top: .7em; left: 0; width: 4px; height: 4px; background: var(--accent); }
.social-bar { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }.social-bar a { display: grid; place-items: center; border-right: 1px solid var(--line); color: var(--muted); font: 500 .65rem/1 "DM Mono", monospace; }.social-bar a:last-child { border-right: 0; }.social-bar a:hover, .social-bar a:focus-visible { background: var(--accent); color: #1a1a1a; }

.content-panel { min-width: 0; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #3b3c47 transparent; background: var(--shell); }
.topbar { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 68px; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(27,28,37,.91); backdrop-filter: blur(16px); }
.mini-brand { display: none; }.topbar nav { display: flex; gap: 2rem; color: var(--muted); font: 400 .68rem/1 "DM Mono", monospace; }.topbar nav a { padding: .7rem 0; border-bottom: 1px solid transparent; }.topbar nav a:hover, .topbar nav a:focus-visible, .topbar nav a.active { color: var(--text); border-color: var(--accent); }
.topbar-cta { justify-self: end; padding: .32rem 0; border-bottom: 1px solid var(--accent); font-size: .72rem; font-weight: 700; }

.mountain-hero { position: relative; min-height: 510px; margin: 32px; overflow: hidden; background: url("./assets/technology-hero.png") center/cover no-repeat; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24,25,34,.45) 0%, rgba(24,25,34,.18) 55%, rgba(24,25,34,.08) 100%), linear-gradient(0deg, rgba(24,25,34,.45), transparent 52%); }
.hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-height: 510px; width: min(650px, 70%); padding: clamp(3rem, 5vw, 5rem); }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.6rem; color: #c3c3c4; font: 500 .65rem/1.4 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.mountain-hero h2 { margin: 0; font-size: clamp(2.35rem, 3.9vw, 4rem); font-weight: 700; line-height: 1.06; letter-spacing: -.047em; }.work-banner h2 { margin: 0; font-size: clamp(2.8rem, 5.1vw, 5.2rem); font-weight: 700; line-height: 1.02; letter-spacing: -.055em; }.mountain-hero h2 em, .work-banner h2 em { color: var(--accent); font-style: normal; }
.code-line { margin: 1.55rem 0 0; color: #d1d1d0; font: 400 clamp(.75rem,1vw,.9rem)/1.7 "DM Mono", monospace; }.code-line span { color: var(--accent); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }.primary-button, .dark-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.25rem; border: 1px solid var(--accent); background: var(--accent); color: #171717; font-size: .72rem; font-weight: 800; transition: transform 180ms ease, background 180ms ease; }.primary-button:hover, .primary-button:focus-visible, .dark-button:hover, .dark-button:focus-visible { transform: translateY(-2px); background: #ffd25b; }
.ghost-link { padding: .3rem 0; border-bottom: 1px solid var(--line-strong); color: #d1d1d0; font-size: .72rem; }.ghost-link:hover { border-color: var(--accent); }
.hero-status { position: absolute; z-index: 2; left: clamp(3rem,6vw,6rem); right: 2rem; bottom: 1.7rem; display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.18); color: #aaabb0; font: 400 .6rem/1.3 "DM Mono", monospace; text-transform: uppercase; }.hero-status strong { color: #ddd; font-weight: 400; }

.content-section { margin: 0 32px; padding: clamp(4.5rem, 7vw, 7rem) 0; border-top: 1px solid var(--line); }
.section-title { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,5vw,6rem); align-items: end; margin-bottom: 3rem; }.section-title > div { display: flex; align-items: baseline; gap: 1rem; }.section-title span { color: var(--accent); font: 400 .62rem/1 "DM Mono", monospace; }.section-title h2 { margin: 0; font-size: clamp(2rem,3.5vw,3.5rem); line-height: 1; letter-spacing: -.045em; }.section-title > p { max-width: 580px; margin: 0; color: var(--muted); font-size: .86rem; }
.service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }.service-grid article { display: flex; flex-direction: column; min-height: 320px; padding: 28px; border: 1px solid var(--line); background: var(--panel); transition: transform 180ms ease, border-color 180ms ease; }.service-grid article:hover { transform: translateY(-4px); border-color: rgba(245,189,50,.35); }
.service-icon { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(245,189,50,.45); color: var(--accent); font: 500 .65rem/1 "DM Mono", monospace; }.service-grid h3 { margin: 2.4rem 0 .8rem; font-size: 1.05rem; }.service-grid p { margin: 0; color: var(--muted); font-size: .77rem; }.service-grid ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: auto 0 0; padding: 2rem 0 0; list-style: none; }.service-grid li { padding: .38rem .5rem; border: 1px solid var(--line); color: #b6b7bf; font: 400 .56rem/1 "DM Mono", monospace; }
.commercial-strip { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; margin-top: 16px; padding: 20px 24px; border-left: 3px solid var(--accent); background: var(--panel-soft); }.commercial-strip div { display: grid; gap: .25rem; }.commercial-strip span { color: var(--accent); font: 500 .58rem/1 "DM Mono", monospace; text-transform: uppercase; }.commercial-strip strong { font-size: .78rem; font-weight: 600; }.commercial-strip a { padding-bottom: .2rem; border-bottom: 1px solid var(--accent); font-size: .68rem; font-weight: 700; }

.experience-section { background: transparent; }.experience-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }.experience-list li { display: grid; grid-template-columns: .55fr 1.35fr .8fr; gap: clamp(1rem,3vw,3rem); padding: 1.55rem 0; border-bottom: 1px solid var(--line); }.experience-list time { color: var(--accent); font: 400 .62rem/1.4 "DM Mono", monospace; }.experience-list div span { color: var(--muted); font-size: .67rem; }.experience-list h3 { margin: .25rem 0 0; font-size: .95rem; }.experience-list li > p { margin: .1rem 0 0; color: var(--muted); font-size: .72rem; }

.preview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }.preview-grid > a { min-width: 0; }.preview-image { overflow: hidden; aspect-ratio: 4/3; margin-bottom: 1rem; background: var(--panel); }.preview-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.78); transition: transform 400ms ease, filter 250ms ease; }.preview-grid a:hover img { transform: scale(1.03); filter: saturate(.95) brightness(.9); }.preview-grid a > span { color: var(--accent); font: 400 .58rem/1 "DM Mono", monospace; text-transform: uppercase; }.preview-grid h3 { margin: .4rem 0 0; font-size: 1.05rem; }
.archive-link { display: flex; justify-content: space-between; gap: 2rem; margin-top: 2.5rem; padding: 1.15rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.archive-link span { color: var(--muted); font-size: .7rem; }.archive-link strong { border-bottom: 1px solid var(--accent); font-size: .7rem; }

.contact-panel { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: end; margin: 32px; padding: clamp(3rem,5vw,5rem); background: var(--accent); color: #171717; }.contact-panel > div > span { font: 500 .62rem/1 "DM Mono", monospace; text-transform: uppercase; }.contact-panel h2 { max-width: 780px; margin: 1rem 0; font-size: clamp(2.2rem,4.4vw,4.2rem); line-height: 1.03; letter-spacing: -.05em; }.contact-panel p { max-width: 700px; margin: 0; color: rgba(23,23,23,.7); font-size: .82rem; }.dark-button { border-color: #191a21; background: #191a21; color: var(--text); white-space: nowrap; }.compact-contact h2 { margin-bottom: 0; font-size: clamp(2rem,3.5vw,3.4rem); }
.page-footer { display: flex; justify-content: space-between; gap: 2rem; margin: 0 32px; padding: 28px 0 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: .65rem; }.page-footer p { margin: 0; }.page-footer nav { display: flex; gap: 1.25rem; }.page-footer a:hover { color: var(--accent); }

/* Work page */
.work-banner { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(2rem,6vw,7rem); align-items: end; margin: 32px; padding: clamp(4rem,7vw,7rem); border: 1px solid var(--line); background: linear-gradient(135deg, #262732, #1e1f28); }.work-banner > p { margin: 0 0 .6rem; color: var(--muted); font-size: .86rem; }.project-archive { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 16px; margin: 0 32px; padding: 32px 0 7rem; border-top: 1px solid var(--line); }
.project-row { display: block; }.project-row.project-featured { grid-column: span 2; display: grid; grid-template-columns: 1.3fr .7fr; border: 1px solid var(--line); background: var(--panel-soft); }.project-visual { overflow: hidden; aspect-ratio: 16/10; background: var(--panel); }.project-featured .project-visual { aspect-ratio: 16/7; }.project-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.68) brightness(.78); transition: transform 450ms ease, filter 250ms ease; }.project-row:hover img { transform: scale(1.025); filter: saturate(.95) brightness(.9); }
.project-info { padding: 1.2rem 0 0; }.project-featured .project-info { display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; }.project-info > span { color: var(--accent); font: 400 .58rem/1.3 "DM Mono", monospace; text-transform: uppercase; }.project-info h3 { margin: .55rem 0 .45rem; font-size: clamp(1.25rem,2vw,2rem); }.project-info p { max-width: 480px; margin: 0; color: var(--muted); font-size: .75rem; }.project-info strong { align-self: flex-start; margin-top: 1.3rem; padding-bottom: .15rem; border-bottom: 1px solid var(--accent); font-size: .65rem; }
.abstract-project { border: 1px solid var(--line); background: var(--panel-soft); }.abstract-project .project-info { padding: 1.3rem; }.abstract-mark { display: grid; place-items: center; background: radial-gradient(circle, rgba(245,189,50,.16), transparent 55%), #20212a; }.abstract-mark span { color: var(--accent); font: 500 clamp(3.5rem,7vw,7rem)/1 "DM Mono", monospace; letter-spacing: -.1em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 1050px) {
  .portfolio-shell { grid-template-columns: 250px minmax(0,1fr); width: calc(100% - 24px); height: calc(100vh - 24px); margin: 12px auto; }.profile-head { padding-inline: 20px; }.sidebar-scroll { padding-inline: 20px; }
  .service-grid { grid-template-columns: 1fr; }.service-grid article { min-height: 250px; }.preview-grid { grid-template-columns: 1fr 1fr; }.preview-grid a:last-child { grid-column: span 2; }.preview-grid a:last-child .preview-image { aspect-ratio: 16/7; }
  .experience-list li { grid-template-columns: .6fr 1.4fr; }.experience-list li > p { grid-column: 2; }
}
@media (max-width: 760px) {
  body { background: var(--shell); }.portfolio-shell { display: block; width: 100%; height: auto; margin: 0; overflow: visible; box-shadow: none; }
  .profile-sidebar { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; border-right: 0; }.profile-head { display: grid; grid-template-columns: 74px 1fr; gap: .25rem 1rem; align-items: center; padding: 22px 18px; text-align: left; }.avatar-wrap { grid-row: span 2; width: 74px; height: 74px; margin: 0; }.profile-head h1 { align-self: end; }.profile-head p { align-self: start; margin: 0; }
  .sidebar-scroll { display: none; }.social-bar { position: absolute; top: 31px; right: 18px; width: 120px; height: 40px; border: 1px solid var(--line); }
  .content-panel { overflow: visible; }.topbar { min-height: 58px; padding: 0 18px; grid-template-columns: auto 1fr auto; }.mini-brand { display: block; color: var(--accent); font: 500 .7rem/1 "DM Mono", monospace; }.topbar nav { justify-content: center; gap: 1.1rem; }.topbar-cta { display: none; }
  .mountain-hero { min-height: 520px; margin: 16px; background-position: 62% center; }.hero-content { min-height: 520px; width: 100%; padding: 2rem; }.mountain-hero h2 { font-size: clamp(2.35rem,10vw,3.35rem); max-width: 520px; }.code-line { font-size: .68rem; max-width: 310px; }.hero-status { left: 2rem; }.hero-status strong { display: none; }
  .content-section { margin-inline: 16px; padding: 4.5rem 0; }.section-title { grid-template-columns: 1fr; gap: 1.2rem; }.service-grid { grid-template-columns: 1fr; }.commercial-strip { grid-template-columns: 1fr; gap: .8rem; }.preview-grid { grid-template-columns: 1fr; }.preview-grid a:last-child { grid-column: auto; }.preview-grid a:last-child .preview-image, .preview-image { aspect-ratio: 4/3; }
  .experience-list li { grid-template-columns: 1fr; gap: .6rem; }.experience-list li > p { grid-column: 1; }.contact-panel { grid-template-columns: 1fr; margin: 16px; padding: 3rem 1.5rem; }.dark-button { width: 100%; }.page-footer { margin-inline: 16px; }
  .work-banner { grid-template-columns: 1fr; margin: 16px; padding: 3.5rem 1.5rem; }.work-banner h2 { font-size: clamp(2.8rem,12vw,4.2rem); }.project-archive { grid-template-columns: 1fr; margin-inline: 16px; }.project-row.project-featured { grid-column: auto; display: block; border: 0; background: transparent; }.project-featured .project-visual, .project-visual { aspect-ratio: 4/3; }.project-featured .project-info, .project-info { padding: 1.2rem 0 0; }.abstract-project .project-info { padding: 1.2rem; }
}
@media (max-width: 460px) {
  .social-bar { display: none; }.profile-head { grid-template-columns: 64px 1fr; }.avatar-wrap { width: 64px; height: 64px; }.topbar nav { font-size: .59rem; gap: .8rem; }.hero-actions { align-items: stretch; flex-direction: column; }.primary-button { width: 100%; }.ghost-link { align-self: center; }.page-footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html, .content-panel { scroll-behavior: auto; } *,*::before,*::after { transition-duration: .01ms !important; } }