@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/manrope-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/sora-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

body { margin: 0; background: #0A0E0E; }
* { box-sizing: border-box; }
sc-if, sc-for { display: contents; }
html { scroll-behavior: smooth; }
[data-theme="dark"] { --bg: #0A0A0A; --surface: #111111; --surface-2: #171717; --line: #242424; --line-strong: #383838; --text: #EDEDED; --muted: #A1A1A1; --accent: #EDEDED; --accent-ink: #0A0A0A; --accent-soft: rgba(237,237,237,.08); --grid: rgba(237,237,237,.04); --nav: rgba(10,10,10,.76); --viz: #1E1E1E; --viz-2: #2E2E2E; --st-live: #EDEDED; --st-live-bg: rgba(237,237,237,.10); --st-blue: #A1A1A1; --st-blue-bg: rgba(161,161,161,.10); --st-amber: #A1A1A1; --st-amber-bg: rgba(161,161,161,.10); --st-gray: #A1A1A1; --st-gray-bg: rgba(161,161,161,.10); color-scheme: dark; }
[data-theme="light"] { --bg: #F4F4F4; --surface: #FFFFFF; --surface-2: #ECECEC; --line: #E0E0E0; --line-strong: #C4C4C4; --text: #0A0A0A; --muted: #5C5C5C; --accent: #0A0A0A; --accent-ink: #FFFFFF; --accent-soft: rgba(10,10,10,.06); --grid: rgba(10,10,10,.05); --nav: rgba(244,244,244,.8); --viz: #E4E4E4; --viz-2: #CFCFCF; --st-live: #0A0A0A; --st-live-bg: rgba(10,10,10,.07); --st-blue: #5C5C5C; --st-blue-bg: rgba(92,92,92,.08); --st-amber: #5C5C5C; --st-amber-bg: rgba(92,92,92,.08); --st-gray: #5C5C5C; --st-gray-bg: rgba(92,92,92,.08); color-scheme: light; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
.lnk { transition: color .2s ease; }
.lnk:hover { color: var(--accent) !important; }
.yc-root ::selection { background: var(--accent); color: var(--accent-ink); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button { font: inherit; cursor: pointer; }
.btn { transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-1px); }
.navlink { transition: color .2s ease; }
.navlink:hover { color: var(--text) !important; }
.card { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease; }
.card:hover { transform: translateY(-4px); border-color: var(--line-strong) !important; box-shadow: 0 28px 56px -32px rgba(0,0,0,.55); }
.chip-f { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.chip-f:hover { border-color: var(--line-strong) !important; color: var(--text) !important; }
.chip-f.on { background: var(--text) !important; border-color: var(--text) !important; color: var(--bg) !important; }
.grid-bg { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; }
.pulse { animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 70% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.track { scrollbar-width: none; -ms-overflow-style: none; }
.track::-webkit-scrollbar { display: none; }
.track .card { flex: 0 0 404px; scroll-snap-align: start; }
.navbtn:disabled { opacity: .3; cursor: default; transform: none !important; }
.logo-row svg { display: block; }
.logo-item { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
@keyframes logos-enter { 0% { transform: translateY(40px); filter: blur(4px); opacity: 0; } 100% { transform: translateY(0); filter: blur(0); opacity: 1; } }
@keyframes logos-exit { 0% { transform: translateY(0); filter: blur(0); opacity: 1; } 100% { transform: translateY(-40px); filter: blur(4px); opacity: 0; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes curve { from { stroke-dashoffset: 560; } to { stroke-dashoffset: 0; } }
.draw { stroke-dasharray: 560; animation: curve 3.2s cubic-bezier(.35,.1,.25,1) infinite alternate; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.blink { animation: blink 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pulse, .draw, .blink { animation: none; } .card, .btn { transition: none; } html { scroll-behavior: auto; } }
@media (max-width: 1100px) { .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .navlinks { display: none !important; } .split { grid-template-columns: minmax(0, 1fr) !important; } .h1 { font-size: 124px !important; } .h-cta { font-size: 72px !important; } .logo-row { gap: 28px !important; } .logo-row svg { width: 28px !important; height: 28px !important; } }
@media (max-width: 760px) { .wrap { padding-left: 20px !important; padding-right: 20px !important; } .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr) !important; } .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .stack-sm { flex-direction: column !important; align-items: stretch !important; } .h1 { font-size: 64px !important; } .h2 { font-size: 36px !important; } .h-cta { font-size: 42px !important; } .lead { font-size: 22px !important; } .panel { padding: 28px 20px !important; border-radius: 22px !important; } .hide-sm { display: none !important; } .phones { transform: scale(.62); transform-origin: top center; height: 370px !important; } .tl-row { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; } .tl-rail { display: none !important; } .pipe { flex-direction: column !important; align-items: stretch !important; } .pipe-arrow { transform: rotate(90deg); align-self: center; } .track { padding-left: 20px !important; padding-right: 20px !important; scroll-padding-left: 20px !important; } .track .card { flex-basis: 84vw; } .logo-row svg { width: 26px !important; height: 26px !important; } .hero-min { min-height: 0 !important; } .hero-in { gap: 40px !important; padding-top: 22px !important; padding-bottom: 28px !important; } .m2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .tile { padding: 20px 16px !important; min-height: 0 !important; gap: 6px !important; } .metric { font-size: 30px !important; } .tile-l { font-size: 14px !important; margin-top: 4px !important; } .m3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 20px !important; } .fact-v { font-size: 26px !important; } .sx { gap: 40px !important; } .filters { flex-wrap: nowrap !important; overflow-x: auto; margin-left: -20px; margin-right: -20px; padding: 0 20px 4px; scrollbar-width: none; } .filters button { flex: none; } .tl-date { padding: 0 !important; } .tl-body { padding: 0 0 28px !important; } .about-photo { width: 160px; } .logo-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; row-gap: 28px !important; column-gap: 8px !important; } .logo-name { font-size: 10.5px !important; white-space: normal !important; } .logo-item { gap: 10px !important; } .role { font-size: 19px !important; } .hero-in .lead { font-size: 18px !important; } .sx-p { font-size: 15.5px !important; } .sx-beat { font-size: 14px !important; } .tl-p { font-size: 14.5px !important; } .tl-body { padding: 0 0 22px !important; } .sec { padding-top: 64px !important; } #work-title { font-size: 30px !important; } .navbtn { width: 44px !important; height: 44px !important; } .email { font-size: 21px !important; } #about .lead { font-size: 19px !important; } .track .card li { font-size: 13.5px !important; } }

/* ---- static-site additions ---- */
html[data-theme="dark"] .ic-moon, html[data-theme="light"] .ic-sun { display: none; }
.lang-opt { background: transparent; color: var(--muted); transition: background-color .2s ease, color .2s ease; }
.lang-opt[aria-current="true"] { background: var(--surface-2); color: var(--text); }
.lang-opt:hover { color: var(--text); }
article[hidden] { display: none !important; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.skip:focus { top: 12px; }
@media (max-width: 760px) { .lang-group { height: 40px !important; } .lang-group .lang-opt { height: 32px !important; padding: 0 10px !important; } }
/* Selected work spans the full viewport width (title, filters, carousel and smaller builds stay aligned) */
#work .wrap { max-width: none !important; }
#work .track { padding-left: 48px !important; padding-right: 48px !important; scroll-padding-left: 48px !important; }
@media (max-width: 760px) { #work .track { padding-left: 20px !important; padding-right: 20px !important; scroll-padding-left: 20px !important; } }
/* Mobile navigation drawer */
.menu-btn { display: none; }
@media (max-width: 1100px) { .menu-btn { display: flex; } }
@media (max-width: 760px) { .cv-head { display: none !important; } }
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer[hidden] { display: none; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s ease; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 88vw); display: flex; flex-direction: column; gap: 32px; padding: 16px 20px max(24px, env(safe-area-inset-bottom)); background: var(--bg); color: var(--text); border-left: 1px solid var(--line); box-shadow: -24px 0 64px -24px rgba(0,0,0,.6); transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.7,.2,1); overflow-y: auto; }
.drawer.open .drawer-backdrop { opacity: 1; }
.drawer.open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.drawer-title { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.drawer-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-link { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; transition: color .2s ease; }
.drawer-link:first-child { border-top: 1px solid var(--line); }
.drawer-link:hover { color: var(--muted); }
.drawer-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.drawer-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.drawer-cv { height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 700; }
.drawer-cv + .drawer-cv { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.drawer-mail { margin-top: 8px; text-align: center; font-size: 15px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .drawer-backdrop, .drawer-panel { transition: none; } }