/*
Theme Name: Cris Portfolio
Theme URI: https://le8ton.com
Author: Cristian Leyton
Description: A modern, editorial portfolio for digital transformation, web and marketing leadership.
Version: 1.0.0
Text Domain: cris-portfolio
*/

:root {
	--ink: #0b0d0c;
	--panel: #121513;
	--panel-2: #181c19;
	--paper: #f0f1ea;
	--muted: #9ca49d;
	--line: rgba(255,255,255,.11);
	--accent: #c7ff45;
	--accent-2: #70e9d1;
	--radius: 22px;
	--shadow: 0 30px 80px rgba(0,0,0,.28);
}

/* Native WordPress blog */
.profile-actions .profile-blog-button { grid-column: 1 / -1; border-color: rgba(199,255,69,.42); color: var(--accent); background: rgba(199,255,69,.055); }
.profile-actions .profile-blog-button:hover, .profile-actions .profile-blog-button.active { background: var(--accent); color: var(--ink); box-shadow: 0 12px 30px rgba(199,255,69,.16); }
.status-row .profile-blog-button { min-height: 42px; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0 5px; padding: 8px 12px; border: 1px solid rgba(199,255,69,.42); border-radius: 999px; background: rgba(199,255,69,.055); color: var(--paper); font-size: .66rem; font-weight: 800; transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; }
.status-row .profile-blog-button span { color: var(--accent); }
.status-row .profile-blog-button:hover, .status-row .profile-blog-button.active { transform: translateY(-2px); background: var(--accent); color: var(--ink); box-shadow: 0 12px 28px rgba(199,255,69,.18); }
.status-row .profile-blog-button:hover span, .status-row .profile-blog-button.active span { color: var(--ink); }
.blog-page, .article-page { min-width: 0; }
.blog-archive-hero { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; }
.blog-title { max-width: 1050px; margin: 42px 0 28px; font-size: clamp(4rem,8vw,8.5rem); line-height: .86; letter-spacing: -.075em; }
.blog-title em { color: var(--accent); font-style: normal; }
.blog-intro { max-width: 720px; margin: 0; color: var(--muted); font-size: clamp(1.05rem,1.5vw,1.35rem); line-height: 1.65; }
.blog-listing { border-top: 1px solid var(--line); }
.blog-discovery { display: grid; gap: 18px; margin-bottom: 46px; }
.blog-search { display: grid; grid-template-columns: minmax(0,1fr) auto; max-width: 760px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.025); }
.blog-search input { min-width: 0; padding: 10px 16px; border: 0; outline: 0; background: transparent; color: var(--paper); }
.blog-search input::placeholder { color: var(--muted); }
.blog-search button { padding: 10px 20px; border: 0; border-radius: 999px; background: var(--accent); color: var(--ink); font-weight: 800; cursor: pointer; }
.blog-categories { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-categories a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .7rem; }
.blog-categories a span { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.07); font-size: .58rem; }
.blog-categories a:hover, .blog-categories a.active { border-color: var(--accent); background: var(--accent); color: var(--ink); }
.blog-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.blog-section-heading .eyebrow { margin: 0; }
.blog-section-heading > span { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; }
.blog-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.blog-card { min-width: 0; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: linear-gradient(145deg,rgba(20,24,21,.96),rgba(199,255,69,.06)); transition: transform .35s ease,border-color .35s ease,box-shadow .35s ease; }
.blog-card:hover { transform: translateY(-6px); border-color: rgba(199,255,69,.42); box-shadow: 0 26px 60px rgba(0,0,0,.24); }
.blog-card:first-child { grid-column: auto; }
.blog-card-link { height: 100%; display: flex; flex-direction: column; color: inherit; }
.blog-card-media { aspect-ratio: 16/10; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 70% 20%,rgba(199,255,69,.2),transparent 35%),#111512; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.blog-card:hover .blog-card-media img { transform: scale(1.035); }
.blog-card-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--accent); font-size: clamp(3rem,7vw,7rem); font-weight: 900; letter-spacing: -.08em; }
.blog-card-body { flex: 1; display: flex; flex-direction: column; padding: 19px; }
.blog-card-kicker { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 22px; color: var(--muted); font-size: .66rem; line-height: 1.4; text-transform: uppercase; letter-spacing: .11em; }
.blog-card-kicker span { color: var(--accent); }
.blog-card h2 { margin: 0 0 12px; font-size: clamp(1.25rem,1.55vw,1.8rem); line-height: 1; letter-spacing: -.04em; }
.blog-card p { margin: 0 0 26px; color: var(--muted); line-height: 1.65; }
.blog-read-more { margin-top: auto; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.blog-empty { padding: clamp(36px,7vw,90px); border: 1px solid var(--line); border-radius: 26px; text-align: center; background: linear-gradient(145deg,rgba(20,24,21,.96),rgba(199,255,69,.055)); }
.blog-empty > span { color: var(--accent); font-weight: 900; }
.blog-empty h2 { margin: 16px 0 12px; font-size: clamp(2rem,4vw,4rem); }
.blog-empty p { color: var(--muted); }
.navigation.pagination, .blog-pagination { margin-top: 36px; }
.blog-pagination .page-numbers { margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; }
.blog-pagination .page-numbers li { margin: 0; }
.blog-pagination .page-numbers li > a, .blog-pagination .page-numbers li > span { min-width: 44px; min-height: 44px; padding: 10px 14px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.blog-pagination .page-numbers li > .current, .blog-pagination .page-numbers li > a:hover { border-color: var(--accent); background: var(--accent); color: var(--ink); }
.nav-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; }
.nav-links .page-numbers { min-width: 44px; min-height: 44px; padding: 10px 14px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.nav-links .page-numbers.current, .nav-links .page-numbers:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.article-header { padding-bottom: 54px; }
.article-back-blog { position: absolute; top: 90px; right: clamp(24px,5vw,82px); z-index: 3; min-width: 154px; background: rgba(18,21,19,.86); backdrop-filter: blur(12px); }
.article-back-blog:hover { background: var(--accent); color: var(--ink); }
.article-breadcrumb { display: flex; align-items: center; gap: 10px; max-width: 100%; margin-bottom: clamp(60px,10vw,140px); color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; }
.article-breadcrumb a { color: var(--accent); }
.article-breadcrumb span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-header h1 { max-width: 1100px; margin: 20px 0 26px; font-size: clamp(3.2rem,7vw,7.5rem); line-height: .9; letter-spacing: -.07em; }
.article-deck { max-width: 800px; color: var(--muted); font-size: clamp(1.15rem,1.8vw,1.55rem); line-height: 1.55; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 34px; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.article-featured { margin: 0 24px; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; background: #111512; }
.article-featured img { display: block; width: 100%; max-height: 760px; object-fit: cover; }
.article-content { max-width: 920px; margin-inline: auto; font-size: clamp(1.04rem,1.2vw,1.18rem); line-height: 1.8; }
.article-content > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.article-content > .alignwide { max-width: 1000px; }
.article-content > .alignfull { max-width: none; }
.article-content h2, .article-content h3 { color: var(--paper); line-height: 1.05; letter-spacing: -.04em; }
.article-content h2 { margin-top: 2.2em; font-size: clamp(2rem,4vw,3.8rem); }
.article-content h3 { margin-top: 1.8em; font-size: clamp(1.55rem,2.6vw,2.5rem); }
.article-content p, .article-content li { color: #bdc3bc; }
.article-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.article-content blockquote { padding: 24px 28px; border-left: 3px solid var(--accent); background: rgba(199,255,69,.05); }
.article-content img { border-radius: 18px; }
.article-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 0 24px 48px; }
.article-tags a { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .72rem; }
.article-navigation { margin: 0 24px 36px; padding: 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; border: 1px solid var(--line); border-radius: 22px; }
.article-navigation div:last-child { text-align: right; }
.article-navigation div a { color: var(--muted); }
.article-navigation div a:hover { color: var(--accent); }
.article-reading-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,300px); align-items: start; gap: clamp(26px,4vw,58px); padding: 0 clamp(24px,5vw,82px); }
.article-reading-layout .article-content { width: 100%; padding-left: 0; padding-right: 0; }
.related-posts { min-width: 0; padding: 110px 0 70px; }
.related-posts-inner { position: sticky; top: 28px; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg,rgba(20,24,21,.97),rgba(199,255,69,.055)); }
.related-posts .eyebrow { margin-bottom: 10px; font-size: .62rem; }
.related-posts h2 { margin: 0 0 22px; font-size: 1.7rem; line-height: 1; letter-spacing: -.045em; }
.related-post-list { display: grid; }
.related-post { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.related-post:not(:has(.related-post-image)) { grid-template-columns: 1fr; }
.related-post-image { width: 54px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--ink); }
.related-post-image img { width: 100%; height: 100%; object-fit: cover; }
.related-post small { display: block; margin-bottom: 3px; color: var(--muted); font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; }
.related-post strong { display: block; font-size: .82rem; line-height: 1.25; }
.related-post:hover strong { color: var(--accent); }
.related-empty { color: var(--muted); font-size: .82rem; line-height: 1.6; }
.related-all { display: flex; justify-content: center; margin-top: 18px; padding: 11px 14px; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: .7rem; font-weight: 800; }
.article-author-share { margin: 0 clamp(24px,5vw,82px) 48px; padding: 26px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.025); }
.article-author { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 18px; align-items: center; }
.article-author img { width: 74px; height: 74px; object-fit: cover; border-radius: 50%; border: 2px solid var(--accent); }
.article-author .eyebrow { margin: 0 0 5px; font-size: .58rem; }
.article-author h2 { margin: 0; font-size: 1.35rem; }
.article-author p:last-child { max-width: 620px; margin: 5px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.article-share { min-width: 180px; padding-left: 26px; border-left: 1px solid var(--line); }
.article-share > strong { display: block; margin-bottom: 10px; color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; }
.article-share > div { display: flex; gap: 7px; }
.article-share a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--paper); font-size: .72rem; font-weight: 800; }
.article-share a:hover { border-color: var(--accent); background: var(--accent); color: var(--ink); transform: translateY(-2px); }
.error-page { width: min(980px,calc(100% - 40px)); min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
.error-page h1 { max-width: 850px; margin: 0 0 24px; font-size: clamp(3.5rem,9vw,8rem); line-height: .88; letter-spacing: -.07em; }
.error-page > p:not(.eyebrow) { max-width: 650px; margin-bottom: 30px; color: var(--muted); font-size: 1.12rem; }

@media (max-width:1120px) {
	.blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.article-reading-layout { grid-template-columns: 1fr; }
	.related-posts { padding: 0 0 70px; }
	.related-posts-inner { position: static; }
}
@media (max-width:1380px) {
	.article-reading-layout { grid-template-columns: 1fr; }
	.related-posts { padding: 0 0 70px; }
	.related-posts-inner { position: static; }
}
@media (max-height:950px) and (min-width:801px) {
	.profile-card { padding: 16px; }
	.portrait { height: clamp(138px,18vh,175px); margin-bottom: 10px; }
	.profile-identity { padding: 4px 5px 12px; }
	.profile-name { font-size: 1.42rem; }
	.profile-skills { margin-top: 13px; }
	.profile-skills span { padding: 5px 8px; }
	.profile-facts { margin-top: 11px; padding-block: 10px; }
	.profile-languages { margin-top: 10px; gap: 8px; }
	.profile-socials { margin-top: 10px; }
	.profile-actions { padding-top: 11px; }
}
@media (max-width:800px) {
	.status-row .profile-blog-button { display: none; }
	.blog-grid { grid-template-columns: 1fr; }
	.blog-card:first-child { grid-column: auto; }
	.blog-archive-hero { min-height: auto; }
	.blog-title { margin-top: 28px; font-size: clamp(3.4rem,16vw,6rem); }
	.article-header h1 { font-size: clamp(3rem,14vw,5.5rem); }
	.article-breadcrumb { margin-bottom: 70px; }
	.article-back-blog { position: static; width: fit-content; margin: 0 0 34px auto; }
	.article-featured { margin-inline: 10px; border-radius: 18px; }
	.article-navigation { margin-inline: 10px; grid-template-columns: 1fr 1fr; }
	.article-navigation .button { grid-column: 1/-1; grid-row: 1; }
	.blog-search { border-radius: 20px; }
	.article-author-share { grid-template-columns: 1fr; margin-inline: 10px; }
	.article-share { padding: 20px 0 0; border-top: 1px solid var(--line); border-left: 0; }
}
@media (max-width:520px) {
	.blog-search { grid-template-columns: 1fr; }
	.blog-search button { width: 100%; }
	.blog-categories { justify-content: center; }
	.article-author { grid-template-columns: 1fr; text-align: center; }
	.article-author img { margin-inline: auto; }
	.article-share { text-align: center; }
	.article-share > div { justify-content: center; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.site-shell { width: min(1540px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: 290px minmax(0,1fr) 76px; gap: 24px; }
.profile-card { position: sticky; top: 20px; height: 827px; max-height: calc(100vh - 40px); margin-top: 20px; padding: 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 28px; background: linear-gradient(165deg, rgba(28,33,29,.96), rgba(14,17,15,.96)); backdrop-filter: blur(18px); display: flex; flex-direction: column; z-index: 5; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 24px 60px rgba(0,0,0,.18); overflow: hidden; }
.profile-card { view-transition-name: profile-panel; }
.profile-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -70px; top: -70px; border-radius: 50%; background: var(--accent); filter: blur(70px); opacity: .09; pointer-events: none; }
.brand { display: flex; align-items: center; gap: 12px; font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; }
.brand-mark { width: 34px; aspect-ratio: 1; border: 1px solid var(--accent); display: grid; place-items: center; transform: rotate(45deg); }
.brand-mark span { transform: rotate(-45deg); color: var(--accent); font-weight: 800; }
.portrait { height: clamp(148px,20vh,188px); flex: 0 0 auto; margin: 0 0 12px; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 70% 25%, rgba(199,255,69,.12), transparent 45%), linear-gradient(145deg, #252a25, #101210); border: 1px solid rgba(255,255,255,.06); position: relative; }
.portrait::before { content: "CL"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 5.5rem; font-weight: 800; letter-spacing: -.08em; color: rgba(199,255,69,.9); }
.portrait.has-image::before { content: none; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.profile-name { margin: 0; font-size: 1.55rem; font-weight: 800; line-height: 1; letter-spacing: -.045em; }
.profile-identity { text-align: center; padding: 6px 5px 17px; border-bottom: 1px solid var(--line); }
.role { color: var(--muted); font-size: .72rem; margin: 8px 0 0; min-height: 1.5em; white-space: nowrap; }
.typing-cursor { display: inline-block; width: 1px; height: 1em; margin-left: 3px; background: var(--accent); vertical-align: -.12em; animation: cursor-blink .75s steps(1) infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
.status { align-self: flex-start; display: flex; gap: 9px; align-items: center; margin: 16px 5px 0; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.025); color: #cdd4cd; font-size: .67rem; }
.status::before { content: ""; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 6px rgba(199,255,69,.08); }
.profile-skills { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 5px 0; }
.profile-skills::before { content: "Core Expertise"; width: 100%; margin-bottom: 3px; color: #747d75; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.profile-skills span { padding: 6px 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; background: rgba(255,255,255,.025); color: #b8c0b9; font-size: .61rem; line-height: 1.15; }
.profile-skills span::before { content: none; }
.profile-facts { display: grid; gap: 5px; margin: 15px 5px 0; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.profile-facts > div { display: flex; justify-content: space-between; gap: 12px; font-size: .65rem; }
.profile-facts strong { color: var(--paper); }
.profile-facts span { color: var(--muted); }
.profile-languages { display: grid; gap: 11px; margin: 13px 5px 0; }
.language-item > div { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-size: .61rem; }
.language-item strong { color: var(--paper); }
.language-item span { color: var(--muted); }
.language-item i { display: block; height: 3px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.08); }
.language-item i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--accent),var(--accent-2)); }
.profile-socials { display: flex; justify-content: center; gap: 8px; margin: 14px 5px 0; }
.profile-socials a { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.025); color: var(--muted); font-size: .68rem; font-weight: 800; transition: .2s ease; }
.profile-socials a:hover { color: var(--ink); border-color: var(--accent); background: var(--accent); transform: translateY(-2px); }
.status-row { display: flex; align-items: flex-start; gap: 7px; }
.status-row .status { min-width: 0; }
.language-switcher { flex: 0 0 auto; display: flex; gap: 3px; margin: 16px 5px 0 auto; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(11,13,12,.78); }
.language-switcher a, .language-switcher span { min-width: 28px; height: 25px; display: grid; place-items: center; border-radius: 999px; color: var(--muted); font-size: .58rem; font-weight: 800; }
.language-switcher .active { color: var(--ink); background: var(--accent); }
.language-switcher a:hover { color: var(--paper); background: rgba(255,255,255,.08); }
.language-switcher .language-pending { opacity: .48; cursor: not-allowed; }
.profile-actions { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.profile-actions .button { min-height: 43px; padding: 9px 10px; font-size: .7rem; }
.profile-actions .button[download] { border-color: var(--accent); color: var(--paper); animation: resume-attention 6s ease-in-out infinite; }
.profile-actions .button[download]:hover { animation: none; border-color: var(--accent); background: rgba(199,255,69,.12); color: var(--accent); box-shadow: 0 0 0 1px rgba(199,255,69,.35), 0 0 18px rgba(199,255,69,.38), 0 0 42px rgba(199,255,69,.2); }
@keyframes resume-attention {
	0%, 7%, 13%, 100% { background: transparent; box-shadow: 0 0 0 0 rgba(199,255,69,0); }
	9%, 11% { background: rgba(199,255,69,.12); box-shadow: 0 0 0 4px rgba(199,255,69,.12), 0 0 24px rgba(199,255,69,.28); }
	10%, 12% { background: rgba(199,255,69,.04); box-shadow: 0 0 0 1px rgba(199,255,69,.32); }
}
.button { min-height: 48px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; justify-content: center; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; transition: .25s ease; }
.button:hover { transform: translateY(-2px); border-color: var(--accent); }
.button.primary { background: var(--accent); color: #10120f; border-color: var(--accent); }

.side-nav { position: sticky; top: 20px; height: calc(100vh - 40px); margin-top: 20px; border: 1px solid var(--line); border-radius: 999px; background: rgba(18,21,19,.9); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 9px; z-index: 10; }
.side-nav { view-transition-name: section-navigation; }
.side-nav a { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; position: relative; color: var(--muted); transition: .2s; font-size: .68rem; font-weight: 800; letter-spacing: .04em; }
.side-nav a:hover, .side-nav a.active { color: var(--ink); background: var(--accent); }
.side-nav a span { position: absolute; right: calc(100% + 10px); padding: 6px 10px; border-radius: 7px; background: var(--paper); color: var(--ink); opacity: 0; pointer-events: none; transform: translateX(8px); transition: .2s; white-space: nowrap; }
.side-nav a:hover span { opacity: 1; transform: none; }
.side-nav a.active span { opacity: 1; transform: none; background: var(--accent); box-shadow: 0 10px 25px rgba(0,0,0,.22); }
.side-nav a.active span::after { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-left-color: var(--accent); }
.side-nav.is-scrolling a.journey-current span { opacity: 1; background: var(--accent); color: var(--ink); transform: translateX(6px); }
.side-nav.is-scrolling a.journey-current span::after { border-left-color: var(--accent); }
.side-nav.is-scrolling a.journey-next span { opacity: 1; background: var(--paper); color: var(--ink); transform: none; box-shadow: 0 10px 25px rgba(0,0,0,.22); }
.side-nav.is-scrolling a.journey-next span::after { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-left-color: var(--paper); }

.content { min-width: 0; animation: global-content-in 1s cubic-bezier(.22,.61,.36,1); transition: opacity 1s cubic-bezier(.4,0,.2,1), filter 1s cubic-bezier(.4,0,.2,1); will-change: opacity, filter; }
.content.is-fading-out { opacity: 0; filter: blur(20px); pointer-events: none; }
@keyframes global-content-in { from { opacity: 0; filter: blur(20px); } to { opacity: 1; filter: blur(0); } }
.section { padding: 110px clamp(24px,5vw,82px); border-bottom: 1px solid var(--line); position: relative; }
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.mobile-hero-profile { display: none; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 800; margin: 0 0 22px; }
.hero h1 { max-width: 1060px; margin: 0; font-size: clamp(3.2rem, 6.6vw, 7.7rem); line-height: .91; letter-spacing: -.075em; font-weight: 720; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero-copy { max-width: 670px; margin: 36px 0; color: #b8c0b9; font-size: clamp(1rem,1.4vw,1.25rem); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.orb { position: absolute; width: min(32vw, 430px); aspect-ratio: 1; right: -8%; top: 18%; border: 1px solid rgba(199,255,69,.28); border-radius: 50%; box-shadow: inset 0 0 100px rgba(112,233,209,.06), 0 0 100px rgba(199,255,69,.04); animation: drift 9s ease-in-out infinite; }
.orb::before, .orb::after { content: ""; position: absolute; inset: 15%; border: 1px dashed rgba(112,233,209,.25); border-radius: 50%; }
.orb::after { inset: 36%; background: var(--accent); filter: blur(28px); opacity: .16; }
@keyframes drift { 50% { transform: translateY(22px) rotate(18deg); } }

.stats { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 70px; border-top: 1px solid var(--line); }
.stat { padding: 24px 20px 0 0; }
.stat strong { display: block; font-size: 2.2rem; color: var(--accent); letter-spacing: -.06em; }
.stat span { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; }
.hero-projects { display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: stretch; gap: 20px; margin-top: 64px; padding-top: 18px; border-top: 1px solid var(--line); overflow: hidden; }
.hero-projects-label { display: flex; flex-direction: column; justify-content: center; padding-right: 18px; border-right: 1px solid var(--line); }
.hero-projects-label strong { color: var(--accent); font-size: 2.1rem; line-height: 1; letter-spacing: -.06em; }
.hero-projects-label span { margin-top: 8px; color: var(--muted); font-size: .65rem; line-height: 1.35; text-transform: uppercase; letter-spacing: .12em; }
.project-marquee { min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.project-marquee-track { width: max-content; display: flex; gap: 12px; animation: project-marquee 38s linear infinite; }
.project-marquee:hover .project-marquee-track { animation-play-state: paused; }
.marquee-project { width: 180px; height: 98px; padding: 0; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); display: block; overflow: hidden; transition: border-color .2s, background .2s; }
.marquee-project:hover { border-color: var(--accent); background: rgba(199,255,69,.05); }
.marquee-project img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.marquee-project:hover img { transform: scale(1.04); }
@keyframes project-marquee { to { transform: translateX(calc(-50% - 6px)); } }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 55px; }
.section-head h2 { margin: 0; max-width: 760px; font-size: clamp(2.2rem,4vw,4.8rem); line-height: 1; letter-spacing: -.06em; }
.section-index { color: var(--muted); font-size: .78rem; letter-spacing: .15em; }
.section-head-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.section-head-actions .button { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.intro-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; }
.lead { margin: 0; font-size: clamp(1.5rem,2.6vw,2.6rem); line-height: 1.25; letter-spacing: -.035em; }
.muted { color: var(--muted); }
.capability-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 60px; }
.card { padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); transition: .25s ease; }
.card:hover { transform: translateY(-5px); border-color: rgba(199,255,69,.45); }
.card-number { color: var(--accent); font-size: .73rem; letter-spacing: .13em; }
.testimonial-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 28px; }
.testimonial-card { margin: 0; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.025); }
.testimonial-card > p { margin: 0; color: #cbd1cb; font-size: 1rem; }
.testimonial-card footer { display: flex; flex-direction: column; gap: 3px; margin-top: 24px; }
.testimonial-card footer strong { color: var(--paper); }
.testimonial-card footer span { color: var(--muted); font-size: .72rem; }
.card h3 { margin: 50px 0 12px; font-size: 1.35rem; }

.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; align-items: stretch; }
.project { min-height: 500px; padding: 20px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); display: grid; grid-template-rows: auto 170px minmax(0,1fr); gap: 18px; position: relative; overflow: hidden; transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease; }
.home .project-grid .project { opacity: 0; transform: translateY(22px) scale(.988); }
.home .reveal.visible .project-grid .project { opacity: 1; transform: none; }
.home .reveal.visible .project-grid .project:nth-child(2) { transition-delay: .08s; }
.home .reveal.visible .project-grid .project:nth-child(3) { transition-delay: .16s; }
.home .reveal.visible .project-grid .project:nth-child(4) { transition-delay: .06s; }
.home .reveal.visible .project-grid .project:nth-child(5) { transition-delay: .14s; }
.home .reveal.visible .project-grid .project:nth-child(6) { transition-delay: .22s; }
.project::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: -80px; bottom: -100px; background: var(--project-color, var(--accent)); filter: blur(80px); opacity: .15; transition: .3s; }
.project:hover, .home .reveal.visible .project-grid .project:hover { transform: translateY(-5px); border-color: rgba(199,255,69,.38); box-shadow: 0 24px 55px rgba(0,0,0,.22); transition-delay: 0s; }
.project:hover::after { opacity: .26; }
.project-top { display: flex; justify-content: space-between; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; z-index: 1; }
.project-preview { position: relative; inset: auto; display: grid; place-items: center; min-width: 0; padding: 26px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--project-color) 18%, transparent), transparent 55%), #0d100e; overflow: hidden; z-index: 1; }
.project-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.035), transparent 45%); pointer-events: none; }
.project-preview img { width: min(76%,320px); height: 100%; max-height: 125px; object-fit: contain; filter: drop-shadow(0 14px 24px rgba(0,0,0,.38)); transition: .35s ease; z-index: 1; }
.project:hover .project-preview img { transform: scale(1.05); }
.project-content { margin: 0; min-width: 0; max-width: none; display: flex; flex-direction: column; z-index: 1; }
.project h3 { margin: 0 0 12px; font-size: clamp(1.55rem,2vw,2.15rem); line-height: 1.02; letter-spacing: -.045em; }
.project p { margin: 0; color: #abb3ac; max-width: 620px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.tag-list { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; padding-top: 18px; }
.tag { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: #c4cbc4; font-size: .68rem; }
.all-projects { margin: 30px 0 0; display: flex; justify-content: center; }
.education-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.education-card { padding: 30px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.education-card time { color: var(--accent); font-size: .78rem; letter-spacing: .12em; }
.education-card h3 { margin: 38px 0 12px; font-size: 1.35rem; line-height: 1.2; }
.education-place { font-size: .78rem; color: var(--paper); min-height: 44px; }
.certifications-block { margin-top: 42px; }
.certification-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.certification-card { padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.025); }
.certification-card time { color: var(--accent); font-size: .72rem; }
.certification-card h3 { margin: 24px 0 8px; font-size: 1.15rem; line-height: 1.2; }
.certification-card p, .certification-card div { color: var(--muted); font-size: .78rem; }

.timeline { border-top: 1px solid var(--line); }
.timeline-item { display: grid; grid-template-columns: 140px 1fr 1.2fr; gap: 28px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.timeline-item time { color: var(--accent); font-size: .82rem; }
.timeline-item h3 { margin: 0; font-size: 1.18rem; }
.timeline-item h3 span { display: block; margin-top: 5px; color: var(--muted); font-size: .82rem; font-weight: 400; }
.timeline-item p { margin: 0; color: var(--muted); }
.technical-focus-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 28px; }
.technical-focus-card { position: relative; min-height: 310px; padding: clamp(26px,3vw,42px); border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg,rgba(199,255,69,.07),rgba(255,255,255,.02)); overflow: hidden; }
.technical-focus-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; bottom: -90px; border-radius: 50%; background: var(--accent); filter: blur(75px); opacity: .13; pointer-events: none; }
.technical-focus-card h3 { max-width: 520px; margin: 54px 0 18px; font-size: clamp(1.65rem,2.5vw,2.55rem); line-height: 1.02; letter-spacing: -.045em; }
.technical-focus-card p { position: relative; z-index: 1; margin: 0; color: var(--muted); }
.skill-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.skill-cloud span { padding: 13px 18px; border: 1px solid var(--line); border-radius: 999px; color: #cbd1cb; background: rgba(255,255,255,.02); }
.contact-card { padding: clamp(28px,5vw,70px); border-radius: var(--radius); color: #0c0e0b; background: var(--accent); }
.contact-card h2 { margin: 0 0 20px; max-width: 850px; font-size: clamp(2.4rem,5vw,5.5rem); line-height: .96; letter-spacing: -.065em; }
.contact-card a { display: inline-block; border-bottom: 2px solid currentColor; font-weight: 800; }
.case-hero { min-height: 420px; margin-bottom: 55px; border-radius: var(--radius); border: 1px solid var(--line); background: radial-gradient(circle at 70% 30%, rgba(199,255,69,.16), transparent 40%), var(--panel); display: grid; place-items: center; overflow: hidden; }
.case-hero img { width: min(55%,520px); max-height: 220px; object-fit: contain; filter: drop-shadow(0 25px 35px rgba(0,0,0,.4)); }
.case-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 55px; }
.project-page { min-width: 0; }
.project-page-inner { overflow: hidden; }
.project-header { padding-bottom: 65px; }
.project-breadcrumb { display: flex; gap: 10px; margin-bottom: 70px; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.project-breadcrumb a:hover { color: var(--accent); }
.project-header h1 { max-width: 1050px; margin: 0; font-size: clamp(4rem,8vw,8rem); line-height: .88; letter-spacing: -.075em; }
.project-intro { max-width: 820px; margin: 35px 0 0; color: #b8c0b9; font-size: clamp(1.1rem,1.8vw,1.45rem); }
.project-tags { margin-top: 30px; }
.project-featured-wrap { padding: 0 clamp(24px,5vw,82px); }
.project-featured { min-height: 520px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at 70% 25%, rgba(199,255,69,.16), transparent 42%), var(--panel); display: grid; place-items: center; overflow: hidden; }
.project-featured img { width: min(62%,680px); max-height: 300px; object-fit: contain; filter: drop-shadow(0 28px 45px rgba(0,0,0,.45)); }
.project-story { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(35px,7vw,100px); }
.project-details { align-self: start; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.project-details .eyebrow { margin-bottom: 25px; }
.project-details dl { margin: 0; }
.project-details dl > div { display: grid; grid-template-columns: 85px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.project-details dl > div:last-child { border-bottom: 0; }
.project-details dt { color: var(--paper); font-size: .75rem; font-weight: 700; }
.project-details dd { margin: 0; color: var(--muted); font-size: .75rem; text-align: right; }
.project-story-label span { display: block; color: var(--accent); font-size: .72rem; text-transform: uppercase; letter-spacing: .15em; }
.project-story-label strong { display: block; margin-top: 14px; max-width: 260px; font-size: 1.5rem; line-height: 1.2; }
.project-prose h2 { margin: 0 0 15px; font-size: clamp(1.7rem,2.6vw,2.6rem); letter-spacing: -.04em; }
.project-prose h2:not(:first-child) { margin-top: 48px; }
.project-prose p { color: var(--muted); font-size: 1.02rem; }
.project-gallery-section { padding-top: 35px; }
.project-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.gallery-item { min-height: 390px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow: hidden; position: relative; }
.gallery-item img { width: 100%; height: 100%; max-height: 560px; object-fit: cover; object-position: top; transition: transform .45s ease; }
.gallery-item:hover img { transform: scale(1.025); }
.gallery-item span { position: absolute; right: 14px; bottom: 14px; padding: 8px 11px; border-radius: 999px; background: rgba(11,13,12,.88); color: var(--paper); font-size: .65rem; opacity: 0; transform: translateY(5px); transition: .25s; }
.gallery-item:hover span { opacity: 1; transform: none; }
.glightbox-container { background: rgba(7,9,8,.97); backdrop-filter: blur(16px); }
.glightbox-container .goverlay { background: rgba(7,9,8,.94); }
.glightbox-container .gcontainer { width: min(1180px,calc(100% - 80px)); height: min(820px,calc(100% - 70px)); top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: #101310; box-shadow: 0 35px 90px rgba(0,0,0,.55); overflow: hidden; }
.glightbox-container .gslider { height: 100%; }
.glightbox-container .gslide-inner-content { padding: 28px 150px 28px 32px; }
.glightbox-container .ginner-container { width: 100%; max-width: 900px; margin: auto; }
.glightbox-container .gslide-media { max-width: 860px !important; max-height: 690px !important; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: #0a0c0a; }
.glightbox-container .gslide-image img { width: auto; max-width: 100%; max-height: 650px; border-radius: 10px; box-shadow: 0 22px 55px rgba(0,0,0,.4); object-fit: contain; }
.glightbox-container .gslide-description { background: transparent; color: var(--paper); text-align: center; }
.glightbox-container .gdesc-inner { padding: 12px; }
.glightbox-container .gslide-title { margin: 0; color: var(--paper); font-size: .75rem; letter-spacing: .08em; }
.glightbox-container .gclose, .glightbox-container .gnext, .glightbox-container .gprev { border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background-color: rgba(18,21,19,.88); }
.glightbox-container .gclose:hover, .glightbox-container .gnext:hover, .glightbox-container .gprev:hover { background-color: var(--accent); }
.glightbox-container .gcontainer > .gclose { position: absolute; top: 16px; right: 53px; left: auto; width: 42px; height: 42px; margin: 0; padding: 0; display: grid !important; place-items: center; opacity: 1; color: var(--paper); border: 1px solid rgba(255,255,255,.22); background: rgba(11,13,12,.96); box-shadow: 0 10px 28px rgba(0,0,0,.45); z-index: 1000001; cursor: pointer; }
.glightbox-container .gcontainer > .gclose svg { display: none; }
.glightbox-container .gcontainer > .gclose::before { content: "×"; display: block; font-size: 27px; font-weight: 300; line-height: 1; transform: translateY(-1px); }
.glightbox-container .gcontainer > .gclose:hover { color: var(--ink); border-color: var(--accent); background: var(--accent); transform: rotate(6deg); }
.glightbox-thumbnails { position: absolute; z-index: 999999; top: 72px; right: 18px; bottom: 24px; width: 112px; display: flex; flex-direction: column; gap: 9px; padding: 8px; overflow-y: auto; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(18,21,19,.92); scrollbar-width: thin; }
.glightbox-thumbnails button { flex: 0 0 82px; padding: 3px; border: 1px solid transparent; border-radius: 10px; overflow: hidden; background: transparent; cursor: pointer; opacity: .55; transition: .2s ease; }
.glightbox-thumbnails button:hover, .glightbox-thumbnails button.active { opacity: 1; border-color: var(--accent); transform: translateX(-2px); }
.glightbox-thumbnails img { width: 100%; height: 100%; border-radius: 7px; object-fit: cover; object-position: top; }
.project-highlights { padding-top: 35px; }
.highlight-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.highlight-grid article { padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.highlight-grid article > span { color: var(--accent); font-size: .72rem; }
.highlight-grid h3 { margin: 42px 0 10px; font-size: 1.25rem; }
.highlight-grid p { margin: 0; color: var(--muted); font-size: .82rem; }
.project-metrics { margin: 0 clamp(24px,5vw,82px); padding: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.project-metrics div { display: flex; gap: 12px; align-items: center; }
.project-metrics strong { color: var(--accent); font-size: 1.65rem; letter-spacing: -.05em; }
.project-metrics span { color: var(--muted); font-size: .65rem; line-height: 1.25; text-transform: uppercase; letter-spacing: .09em; }
.project-cta-section { padding-top: 30px; }
.project-cta { padding: clamp(35px,6vw,75px); border-radius: var(--radius); background: var(--accent); color: var(--ink); }
.project-cta .eyebrow { color: #405015; }
.project-cta h2 { max-width: 900px; margin: 0; font-size: clamp(2.6rem,5vw,5.5rem); line-height: .94; letter-spacing: -.065em; }
.project-cta > p:not(.eyebrow) { max-width: 640px; margin: 24px 0 0; }
.project-cta .case-actions { margin-top: 35px; }
.cta-dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cta-outline { border-color: rgba(11,13,12,.35); }
.cta-outline:hover { border-color: var(--ink); background: rgba(11,13,12,.08); }
.live-project-wrap { position: relative; display: inline-flex; }
.live-site-preview { position: absolute; left: 50%; bottom: calc(100% + 16px); width: 270px; height: 175px; padding: 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: var(--ink); box-shadow: 0 22px 55px rgba(0,0,0,.38); opacity: 0; pointer-events: none; transform: translate(-50%,12px) scale(.96); transform-origin: bottom center; transition: .25s ease; z-index: 20; }
.live-site-preview::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: var(--ink); }
.live-site-preview img { width: 100%; height: 140px; border-radius: 8px; object-fit: cover; object-position: top; }
.live-site-preview small { display: block; padding-top: 5px; color: var(--muted); font-size: .58rem; text-align: center; text-transform: uppercase; letter-spacing: .1em; }
.live-project-wrap:hover .live-site-preview, .live-project-wrap:focus-within .live-site-preview { opacity: 1; transform: translate(-50%,0) scale(1); }
.project-pagination { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; padding: 28px; border: 1px solid var(--line); border-radius: 14px; margin-top: 20px; color: var(--muted); font-size: .8rem; }
.project-pagination > :last-child { text-align: right; }
.project-pagination a:hover { color: var(--accent); }
.archive-title { font-size: clamp(3.5rem,8vw,8rem); line-height: .9; letter-spacing: -.07em; margin: 0; }
.archive-intro { max-width: 760px; margin: 28px 0 52px; color: var(--muted); font-size: clamp(1rem,1.4vw,1.22rem); line-height: 1.65; }
.post-type-archive-project .section-head > .button { flex: 0 0 auto; min-width: 118px; width: auto; padding-inline: 20px; white-space: nowrap; border-radius: 999px; }
.post-type-archive-project .section-head { align-items: flex-end; }
.archive-topline { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.archive-topline .eyebrow { margin: 0; }
.archive-home { position: relative; z-index: 50; flex: 0 0 auto; min-width: 118px; width: auto; min-height: 42px; padding: 9px 20px; white-space: nowrap; background: var(--panel); }
@keyframes page-slide-in { from { opacity: 0; transform: translateX(55px); } to { opacity: 1; transform: none; } }
@keyframes project-fade-in { from { opacity: 0; filter: blur(20px); } to { opacity: 1; filter: blur(0); } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes drill-out { to { opacity: .25; transform: scale(.88); filter: blur(3px); } }
@keyframes drill-in { from { opacity: 0; transform: scale(.82); clip-path: circle(3% at 83% 22%); filter: blur(5px); } to { opacity: 1; transform: scale(1); clip-path: circle(140% at 83% 22%); filter: blur(0); } }
.site-footer { padding: 28px clamp(24px,5vw,82px); display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1120px) {
	.site-shell { grid-template-columns: 230px minmax(0,1fr); }
	.project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.side-nav { position: fixed; left: 50%; bottom: 14px; top: auto; transform: translateX(-50%); width: auto; height: 66px; margin: 0; flex-direction: row; }
	.side-nav a { position: relative; width: 46px; height: 46px; }
	.side-nav a span { position: absolute; left: 50%; bottom: calc(100% + 13px); display: block; min-width: max-content; padding: 7px 12px; border: 1px solid rgba(11,13,12,.12); border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: 0 10px 28px rgba(0,0,0,.28); font-size: .66rem; font-weight: 800; letter-spacing: .02em; opacity: 0; pointer-events: none; transform: translate(-50%,7px); transition: opacity .25s ease, transform .25s ease; }
	.side-nav a span::after, .side-nav a.active span::after { content: ""; position: absolute; left: 50%; top: 100%; width: 0; height: 0; background: transparent; border: 6px solid transparent; border-top-color: var(--accent); transform: translateX(-50%); }
	.side-nav a.active span { opacity: 1; transform: translate(-50%,0); }
	.side-nav.is-scrolling a.journey-current span { transform: translate(calc(-50% + 6px),0); }
	.side-nav.is-scrolling a.journey-next span { transform: translate(-50%,0); }
	.side-nav.is-scrolling a.journey-current span::after { border-top-color: var(--accent); border-left-color: transparent; }
	.side-nav.is-scrolling a.journey-next span::after { left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--paper); }
	.profile-card { padding: 20px; }
}
@media (max-width: 800px) {
	.site-shell { width: min(100% - 20px, 720px); display: block; }
	.home .site-shell > .profile-card { display: none; }
	.mobile-hero-profile { position: relative; z-index: 3; display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 14px; align-items: center; margin: 0 0 34px; padding: 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: linear-gradient(145deg,rgba(28,33,29,.97),rgba(14,17,15,.97)); box-shadow: 0 18px 45px rgba(0,0,0,.24); }
	.mobile-hero-photo .portrait { width: 92px; height: 108px; margin: 0; border-radius: 14px; }
	.mobile-hero-profile-content { min-width: 0; display: grid; gap: 10px; }
	.mobile-hero-profile-content > strong { font-size: 1rem; }
	.mobile-hero-profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
	.mobile-hero-profile-actions .button { min-width: 0; min-height: 38px; padding: 7px 9px; font-size: .66rem; line-height: 1.15; text-align: center; white-space: normal; }
	.mobile-hero-profile-content .language-switcher { justify-self: end; margin: 0; }
	.profile-card { position: relative; top: auto; height: auto; margin: 10px 0 0; display: grid; grid-template-columns: 58px minmax(110px,1fr) auto auto; grid-template-areas: "portrait identity languages actions"; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; }
	.profile-card .role, .profile-card .status, .profile-card .profile-skills, .profile-card .profile-facts, .profile-card .profile-languages, .profile-card .profile-socials, .profile-actions .button:not(.primary) { display: none; }
	.portrait { grid-area: portrait; width: 58px; height: 58px; margin: 0; border-radius: 12px; }
	.portrait::before { font-size: 1.3rem; }
	.profile-identity { grid-area: identity; min-width: 0; padding: 0 12px; border: 0; text-align: left; }
	.profile-name { margin: 0; font-size: 1rem; white-space: nowrap; }
	.status-row { grid-area: languages; display: block; }
	.language-switcher { margin: 0; }
	.profile-actions { grid-area: actions; display: block; margin: 0; padding: 0; border: 0; }
	.profile-actions .button { min-width: 96px; min-height: 42px; padding: 8px 16px; white-space: nowrap; }
	.hero-projects { grid-template-columns: 95px minmax(0,1fr); gap: 12px; }
	.hero-projects-label { padding-right: 10px; }
	.hero-projects-label strong { font-size: 1.7rem; }
	.marquee-project { width: 145px; height: 88px; }
	.section { padding: 80px 18px; }
	.hero { min-height: calc(100vh - 95px); }
	.hero h1 { font-size: clamp(3rem,14vw,5.4rem); }
	.orb { width: 70vw; right: -32%; top: 10%; }
	.intro-grid, .capability-grid, .education-grid, .technical-focus-grid, .testimonial-grid, .certification-grid { grid-template-columns: 1fr; gap: 14px; }
	.project-grid { grid-template-columns: 1fr; }
	.section-head { align-items: flex-start; }
	.section-head-actions { align-items: flex-start; }
	.project { min-height: 500px; }
	.post-type-archive-project .project { min-height: 0; grid-template-rows: auto 170px auto; }
	.post-type-archive-project .project .tag-list { justify-content: center; margin-top: 18px; padding-top: 0; }
	.home .project .tag-list { justify-content: center; }
	.project-story { grid-template-columns: 1fr; gap: 32px; }
	.project-gallery, .highlight-grid { grid-template-columns: 1fr; }
	.gallery-item { min-height: 330px; }
	.project-metrics { grid-template-columns: repeat(2,1fr); margin: 0 18px; padding: 22px 0; }
	.project-featured-wrap { padding: 0 18px; }
	.project-featured { min-height: 330px; }
	.project-featured img { width: 72%; max-height: 190px; }
	.glightbox-container .gslide-inner-content { padding: 0 10px 105px; }
	.glightbox-container .gcontainer { width: calc(100% - 20px); height: calc(100% - 30px); border-radius: 16px; }
	.glightbox-container .ginner-container { max-width: 100%; }
	.glightbox-container .gslide-media { max-width: calc(100vw - 45px) !important; max-height: calc(100vh - 150px) !important; }
	.glightbox-container .gslide-image img { max-height: calc(100vh - 180px); }
	.glightbox-thumbnails { top: auto; right: 10px; bottom: 10px; left: 10px; width: auto; height: 82px; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
	.glightbox-thumbnails button { flex-basis: 64px; }
	.timeline-item { grid-template-columns: 1fr; gap: 10px; }
	.card h3 { margin-top: 25px; }
	.site-footer { padding-bottom: 100px; }
}
@media (max-width: 520px) {
	.mobile-hero-profile { grid-template-columns: 78px minmax(0,1fr); gap: 11px; margin-bottom: 28px; padding: 10px; }
	.mobile-hero-photo .portrait { display: block; width: 78px; height: 96px; }
	.mobile-hero-profile-actions { grid-template-columns: 1fr; }
	.profile-card { grid-template-columns: minmax(0,1fr) auto auto; grid-template-areas: "identity languages actions"; gap: 9px; }
	.profile-card .portrait { display: none; }
	.profile-identity { padding-left: 4px; }
	.profile-actions .button { min-width: 88px; padding-inline: 12px; }
	.side-nav { width: calc(100% - 28px); justify-content: space-between; z-index: 1000; background: rgba(18,21,19,.98); backdrop-filter: blur(16px); }
	.side-nav a { width: 42px; height: 42px; }
	.side-nav a span { padding: 6px 8px; font-size: .58rem; }
	.side-nav.is-scrolling a.journey-current span { transform: translate(calc(-50% + 3px),0); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }