@font-face { font-family: Manrope; src: url("/fonts/manrope.ttf") format("truetype"); font-style: normal; font-weight: 200 800; font-display: swap; } @font-face { font-family: "DM Sans"; src: url("/fonts/dm-sans.ttf") format("truetype"); font-style: normal; font-weight: 100 1000; font-display: swap; } :root { --scene-rgb: 13, 14, 16; --surface-rgb: 20, 22, 27; --panel-line: rgba(151, 163, 177, .18); --paper: #0d0e10; --ink: #f1f1f3; --muted: #a0a3ad; --line: #292b32; --accent: #ff4545; --accent-soft: #ff454518; --on-accent: #fff; --card: #14161b; --font: "DM Sans", Arial, sans-serif; --heading: Manrope, Arial, sans-serif; color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 110px; } body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } button, a { -webkit-tap-highlight-color: transparent; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; } ::selection { background: var(--accent); color: var(--on-accent); } .wrap { width: 100%; max-width: 1280px; margin: auto; padding-inline: 56px; } .skip-link { position: fixed; top: 10px; left: 10px; z-index: 30; padding: 8px 16px; background: var(--accent); color: var(--on-accent); transform: translateY(-160%); } .skip-link:focus { transform: none; } .template-notice { text-align: center; padding: 7px 20px; font-size: 11px; color: var(--muted); background: var(--card); } .header { display: flex; align-items: center; gap: 30px; padding-block: 23px; border-bottom: 1px solid var(--line); position: relative; z-index: 10; } .brand { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 650; line-height: 1.6; white-space: nowrap; } .header nav { display: flex; margin-left: auto; gap: 30px; font-size: 12px; color: var(--muted); } .header nav a { position: relative; padding-block: 5px; transition: color 0.2s; } .header nav a:after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--accent); transition: width 0.25s; } .header nav a:hover, .header nav a[aria-current] { color: var(--ink); } .header nav a:hover:after, .header nav a[aria-current]:after { width: 100%; } .header-actions { display: flex; align-items: center; gap: 8px; } .menu-button { display:none; } .menu-icon { position:relative; display:block; width:18px; height:13px; background:linear-gradient(var(--accent),var(--accent)) center / 100% 2px no-repeat; transition:background-size .24s ease; } .menu-icon:before, .menu-icon:after { content:""; position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:var(--accent); transition:top .28s cubic-bezier(.2,.75,.25,1), transform .28s cubic-bezier(.2,.75,.25,1), opacity .18s ease; } .menu-icon:before { top:0; } .menu-icon:after { top:11px; } .menu-button[aria-expanded="true"] .menu-icon { background-size:0 2px; } .menu-button[aria-expanded="true"] .menu-icon:before { top:5.5px; transform:rotate(45deg); } .menu-button[aria-expanded="true"] .menu-icon:after { top:5.5px; transform:rotate(-45deg); } .hero { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 50px; min-height: 660px; padding: 70px 0 80px; position: relative; } .hero-copy { animation: hero-enter 0.8s cubic-bezier(0.2, 0.65, 0.3, 1) both; } .eyebrow { font-size: 10px; line-height: 1.5; font-weight: 600; letter-spacing: 0.17em; margin: 0 0 25px; color: var(--muted); } .hero .eyebrow { display: flex; gap: 10px; align-items: center; color: var(--accent); font-size: 9px; letter-spacing: 0.2em; } .status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block; flex-shrink: 0; box-shadow: 0 0 10px var(--accent-soft); } h1, h2, h3, p { overflow-wrap: break-word; } h1, h2, h3 { font-family: var(--heading); font-weight: 600; margin: 0; letter-spacing: -0.045em; line-height: 1.15; } h1 { font-size: clamp(68px, 7.6vw, 104px); font-weight: 800; letter-spacing: -0.065em; line-height: 1.01; } h1::first-line { color: var(--accent); } .hero-title { font-size: 16px; font-weight: 500; letter-spacing: 0.025em; margin: 24px 0 0; color: var(--ink); } .hero-intro { font-size: 14px; line-height: 1.85; max-width: 445px; color: var(--muted); margin: 15px 0 28px; } .hero-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; } .button { display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; padding: 13px 18px; border-radius: 6px; border: 1px solid transparent; font-size: 11px; font-weight: 600; transition: transform 0.25s, box-shadow 0.25s; } .primary { background: var(--accent); color: var(--on-accent); } .button:hover { transform: translateY(-3px); box-shadow: 0 5px 24px var(--accent-soft); } .button span { transition: transform 0.25s; } .button:hover span { transform: translate(2px, -2px); } .location { font-size: 11px; color: var(--muted); margin-top: 20px; } .section-divider { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-block: 1px solid var(--line); padding: 15px 0; color: var(--muted); font-family: ui-monospace, monospace; letter-spacing: 0.12em; font-size: 9px; } .section-divider a { font-size: 18px; color: var(--accent); line-height: 1; } .section { display: grid; grid-template-columns: 1fr 1.7fr; gap: 65px; padding: 88px 0; border-bottom: 1px solid var(--line); } h2 { font-size: 36px; letter-spacing: -0.045em; } .accent { color: var(--accent); } .section-heading .eyebrow { margin-bottom: 22px; } .section-note { font-size: 12px; color: var(--muted); line-height: 1.8; margin-top: 20px; } .about-copy > p { font-size: 18px; line-height: 1.85; margin: 0 0 20px; } .about-copy > p + p { font-size: 14px; color: var(--muted); } .about-note { display: flex; align-items: center; gap: 18px; margin-top: 35px; } .about-note p { font-size: 11px; color: var(--muted); margin: 0; line-height: 1.7; } .mini-mark { font-size: 40px; color: var(--accent); line-height: 1; } .timeline { position: relative; } .timeline-item { position: relative; border-left: 1px solid var(--line); padding: 0 0 45px 28px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-item:before { content: ""; position: absolute; left: -4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 6px var(--paper); transition: background 0.3s, box-shadow 0.3s; } .timeline-item:first-child:before { background: var(--accent); box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--accent-soft); } .timeline-item:hover:before { background: var(--accent); } .role-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; } .role-heading h3 { font-size: 18px; letter-spacing: -0.025em; line-height: 1.5; } .period { font: 10px/1.7 ui-monospace, monospace; white-space: nowrap; color: var(--muted); } .company { color: var(--accent); font-size: 12px; font-weight: 500; margin: 5px 0 15px; } .job-summary, .timeline-item li { font-size: 13px; line-height: 1.85; color: var(--muted); } .job-summary { margin: 0 0 10px; } .timeline-item ul { padding-left: 17px; margin: 10px 0 18px; } .timeline-item li { padding-left: 2px; margin-bottom: 6px; } .timeline-item li::marker { color: var(--accent); } .role-details { margin-top: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .role-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px 0; list-style: none; cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 500; transition: color 0.2s; } .role-details > summary::-webkit-details-marker { display: none; } .role-details > summary:hover, .role-details[open] > summary { color: var(--ink); } .role-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; } .detail-label-open, .role-details[open] .detail-label-closed { display: none; } .role-details[open] .detail-label-open { display: inline; } .detail-toggle { position: relative; width: 12px; height: 12px; flex: none; } .detail-toggle:before, .detail-toggle:after { content: ""; position: absolute; background: currentColor; top: 5px; left: 0; width: 12px; height: 1px; } .detail-toggle:after { transform: rotate(90deg); transition: transform 0.2s; } .role-details[open] .detail-toggle:after { transform: rotate(0); } .role-detail-body { padding: 8px 0 24px; } .role-detail-group { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); } .role-detail-group:first-child { margin-top: 0; border-top: 0; } .role-detail-group h4 { font-size: 11px; font-weight: 600; color: var(--ink); letter-spacing: 0.025em; } .role-detail-group .topic-preview { margin: 5px 0 12px; } .role-detail-group ul { margin: 10px 0 0; } .role-detail-group li + li { margin-top: 10px; } .role-scan-highlight { color: var(--ink); font-weight: 700; box-shadow: inset 0 -.42em var(--accent-soft); border-bottom: 1px solid var(--accent); } @media (prefers-reduced-motion: reduce) { .detail-toggle:after { transition: none; } } @media print { .role-details { border: 0; margin-top: 12px; } .role-details > summary { display: none; } .role-details::details-content { content-visibility: visible; } .role-detail-body { display: block !important; padding: 0; } .role-detail-group { margin-top: 14px; } .role-detail-group h4 { font-size: 9pt; } .timeline-item:has(.role-details) { break-inside: auto; } .role-detail-group, .role-heading { break-inside: avoid; } } .tags { display: flex; gap: 7px; flex-wrap: wrap; } .tag { font-size: 9px; line-height: 1.6; letter-spacing: 0.015em; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); padding: 4px 8px; } .work-intro { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(440px, 31vw, 640px); padding: 44px clamp(30px, 3.8vw, 78px); overflow: hidden; border: 1px solid var(--panel-line); border-radius: 14px; background-color: rgb(var(--scene-rgb)); background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 78px 78px; color: #f4f5f6; } .work-intro:before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 90deg, rgba(var(--scene-rgb), 0.91) 0%, rgba(var(--scene-rgb), 0.851) 28%, rgba(var(--scene-rgb), 0.502) 43%, rgba(var(--scene-rgb), 0.031) 66% ); } .work-terrain { position: absolute; z-index: -2; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: .95; pointer-events: none; } .work-intro-copy { position: relative; z-index: 2; width: 45%; max-width: 660px; } .work-intro .eyebrow { font: 600 11px/1.5 ui-monospace, monospace; letter-spacing: 0.1em; color: #ff4545; margin: 0 0 24px; } .work-intro .eyebrow span { color: #aeb4be; } .work-intro h2 { font-size: clamp(48px, 4.5vw, 92px); font-weight: 700; line-height: 1.02; letter-spacing: -0.055em; } .work-intro h2 em { font-style: normal; color: #ff4545; } .work-intro-copy > p:not(.eyebrow) { font-size: clamp(15px, 1vw, 20px); line-height: 1.45; color: #b8c0c9; margin: 24px 0 0; max-width: 570px; } .work-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; } .work-topics span { padding: 7px 15px; border: 1px solid #35434d; border-radius: 5px; background: #0a131ac9; color: #c9d0d8; font-size: clamp(12px, .75vw, 15px); } .work-architecture { position: absolute; z-index: 1; right: 1%; bottom: 0; width: 45%; height: 100%; display: grid; place-items: center; pointer-events: none; } .work-architecture:before, .work-architecture:after { content: ""; position: absolute; pointer-events: none; } .work-architecture:before { inset: 0; background: radial-gradient(ellipse 44% 62% at 50% 48%, #02050755, #02050718 65%, transparent 100%); } .work-architecture:after { width: 55%; height: 12%; left: 22.5%; bottom: 8%; background: radial-gradient(ellipse at center, #ec25303b, #ec253018 48%, transparent 75%); } .work-stack-scene { position: relative; z-index: 1; width: min(26vw, 530px); height: calc(100% - 100px); scale: .9; transform-origin: 50% 100%; opacity: .92; } .work-stack-layer { position: absolute; left: calc((100% - var(--layer-width, 100%)) / 2); width: var(--layer-width, 100%); height: auto; overflow: visible; } .work-layer-art { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 8px #0005); } .work-stack-layer--cloud { bottom: 0; --hover-near: 1px; --hover-far: -1px; --rise-delay: 0s; --trace-delay: .65s; } .work-stack-layer--infrastructure { bottom: 21%; --layer-width: 98%; --hover-near: -2px; --hover-far: 2px; --rise-delay: .15s; --trace-delay: .8s; } .work-stack-layer--data { bottom: 42%; --layer-width: 98%; --hover-near: 2px; --hover-far: -2px; --rise-delay: .3s; --trace-delay: .95s; } .work-stack-layer--applications { bottom: 63%; --layer-width: 98%; --hover-near: -3px; --hover-far: 3px; --rise-delay: .45s; --trace-delay: 1.1s; } .work-layer-rim { opacity: .36; } .work-layer-material { filter: brightness(.76) saturate(.8); } .work-compute-lights { color: var(--accent); opacity: .78; pointer-events: none; } .work-compute-rail, .work-compute-led { fill: none; stroke: currentColor; stroke-linecap: round; } .work-compute-rail { stroke-width: .55; stroke-dasharray: 2 5; opacity: .22; } .work-compute-led { stroke-width: 2.6; opacity: .18; } .work-compute-node { fill: currentColor; opacity: .32; } .work-face-telemetry { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .09em; pointer-events: none; } .work-face-telemetry-rule { fill: none; stroke: currentColor; stroke-width: .65; opacity: .38; } .work-face-layer-id, .work-face-mode { font-size: 7.5px; font-weight: 600; } .work-face-layer-id { fill: currentColor; opacity: .72; } .work-face-mode { fill: #aeb4bc; opacity: .58; } .work-face-data-bit, .work-face-status { fill: currentColor; } .work-face-data-bit { opacity: .16; } .work-face-status { opacity: .45; } .work-hud, .work-sonar { position: absolute; pointer-events: none; overflow: visible; } .work-hud { inset: 0; width: 100%; height: 100%; opacity: .65; } .work-sonar { left: 0; bottom: 0; width: 100%; height: 34%; } .work-sonar-pulse { opacity: 0; transform-box: view-box; transform-origin: 50% 50%; } .work-layer-trail { --trace-offset: 8.8; --trace-peak: .62; opacity: 0; stroke-dasharray: 10 90; stroke-dashoffset: 100; } .work-layer-head { --trace-peak: .85; opacity: 0; stroke-dasharray: 1.2 98.8; stroke-dashoffset: 100; } @media (prefers-reduced-motion: no-preference) { .work-intro.is-pending .work-stack-layer { opacity: 0; } .work-intro.is-assembling .work-stack-layer { animation: work-stack-rise .65s cubic-bezier(.2,.72,.2,1) var(--rise-delay) both; } .work-intro.is-assembling .work-layer-float { animation: work-layer-hover 13.6s ease-in-out 2.65s infinite; will-change: transform; } .work-intro.is-assembling .work-layer-trail, .work-intro.is-assembling .work-layer-head { animation: work-perimeter-trace 1.5s linear var(--trace-delay) both; } .work-intro.is-assembling .work-stack-scene { animation: work-stack-float 6s ease-in-out 2.65s infinite alternate; } .work-intro.is-assembling .work-architecture:after { animation: work-stack-breathe 6s ease-in-out 2.65s infinite alternate; } .work-intro.is-assembling .work-sonar-pulse { animation: work-sonar-pulse 7s cubic-bezier(.2,.5,.3,1) 2.65s infinite; } .work-intro.is-assembling .work-sonar-pulse--echo { animation-delay: 6.15s; } .work-intro.is-assembling .work-compute-led, .work-intro.is-assembling .work-compute-node { animation: work-compute-pulse 4.8s steps(1, end) calc(1.15s + var(--trace-delay) + var(--compute-delay)) infinite; } .work-intro.is-assembling .work-face-data-bit, .work-intro.is-assembling .work-face-status { animation: work-face-data-pulse 4.8s steps(1, end) calc(1.35s + var(--trace-delay) + var(--face-delay, .8s)) infinite; } } @keyframes work-sonar-pulse { 0% { transform: scale(.32); opacity: 0; } 15% { opacity: .45; } 85%, 100% { transform: scale(1.04); opacity: 0; } } @keyframes work-stack-rise { from { opacity: 0; transform: translate3d(0,var(--work-rise,30px),0); } to { opacity: 1; transform: translate3d(0,0,0); } } @keyframes work-layer-hover { 0%, 50%, 100% { transform: translate3d(0,0,0); } 25% { transform: translate3d(0,var(--hover-near),0); } 75% { transform: translate3d(0,var(--hover-far),0); } } @keyframes work-stack-float { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-4px,0); } } @keyframes work-stack-breathe { from { opacity: .7; } to { opacity: 1; } } @keyframes work-perimeter-trace { 0% { opacity: 0; stroke-dashoffset: calc(100 + var(--trace-offset, 0)); } 12%, 82% { opacity: var(--trace-peak); } 100% { opacity: 0; stroke-dashoffset: var(--trace-offset, 0); } } @keyframes work-compute-pulse { 0%, 14%, 100% { opacity: .18; } 3%, 6% { opacity: .96; } 9% { opacity: .48; } } @keyframes work-face-data-pulse { 0%, 15%, 100% { opacity: .16; } 4%, 7% { opacity: .82; } 11% { opacity: .36; } } .projects { --work-fade: 44px; display: grid; grid-auto-flow: column; grid-auto-columns: min(252px, calc(100vw - 96px)); gap: 16px; width: 100%; margin: 14px auto 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 5px 0 16px; } .projects::-webkit-scrollbar { display: none; } .projects[data-scroll-edge="start"] { mask-image: linear-gradient( 90deg, #000 0, #000 calc(100% - var(--work-fade)), transparent ); } .projects[data-scroll-edge="middle"] { mask-image: linear-gradient( 90deg, transparent, #000 var(--work-fade), #000 calc(100% - var(--work-fade)), transparent ); } .projects[data-scroll-edge="end"] { mask-image: linear-gradient( 90deg, transparent, #000 var(--work-fade), #000 100% ); } .projects:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; } .project { position: relative; min-width: 0; overflow: hidden; scroll-snap-align: start; border: 1px solid var(--panel-line); border-radius: 13px; background: rgb(var(--scene-rgb)); color: #f4f5f6; box-shadow: 0 12px 30px #0004, inset 0 1px #fff08; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; } .project:before { content: ""; position: absolute; z-index: 3; top: 0; left: 22px; width: 36px; height: 3px; background: #ff4545; } .project:after { content: ""; position: absolute; z-index: 0; inset: 0; background: url("/images/work/glass-overlay.svg") center/100% 100% no-repeat; } .project:hover, .project:focus-within { border-color: #ff4545; transform: translateY(-4px); box-shadow: 0 18px 42px #0007, inset 0 1px #fff0a; } .project-art { position: absolute; inset: 0; background-size: auto 92%; background-position: center top; background-repeat: no-repeat; } .project-card-body { position: relative; z-index: 1; isolation: isolate; display: flex; flex-direction: column; min-height: 350px; padding: 21px 22px 20px; } .project-card-body:before { content: ""; position: absolute; z-index: -1; inset: 0 -1px -1px; background: radial-gradient(transparent 40%, #06101855 70%, #02070bcc); backdrop-filter: blur(11px); mask-image: radial-gradient(transparent 43%, #000 79%); box-shadow: inset 0 -50px 65px #02070bd9; } .project-number { font: 600 15px/1 ui-monospace, monospace; color: #e8edf2; letter-spacing: 0.08em; } .project-card-copy { margin-top: 24px; } .project-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 11px; border: 1px solid #ff3848; border-radius: 9px; background: #080f16dd; box-shadow: 60px #ff45451c; } .project-icon img { display: block; width: 27px; height: 27px; } .project h3 { max-width: 190px; font-size: 22px; line-height: 1.08; letter-spacing: -0.035em; font-weight: 700; } .project-card-copy > p { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: #d0d6dc; } .project-card-foot { display: flex; align-items: flex-end; gap: 10px; margin-top: auto; padding-top: 16px; } .project-card-foot .tags { flex: 1; gap: 6px; } .project-card-foot .tag { font: 10px/1.2 var(--font); padding: 5px 7px; border-color: var(--panel-line); background: #0d171fe8; color: #b7c0c9; } .project-open { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #53616b; border-radius: 50%; background: rgba(var(--scene-rgb), 0.6); color: #f4f5f6; font-size: 24px; line-height: 1; transition: background 0.2s, border-color 0.2s, transform 0.2s; } .project-open:hover, .project-open[aria-expanded="true"] { background: #ff4545; border-color: #ff4545; color: rgb(var(--scene-rgb)); transform: translateX(2px); } @media screen and (min-width: 1800px) { .projects { grid-auto-columns: calc((100% - 80px) / 6); overflow-x: hidden; padding-bottom: 0; } .project-card-body { min-height: 380px; } } .skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .skills-grid h3 { font: 600 12px/1.6 var(--font); letter-spacing: 0; margin-bottom: 18px; } .skills-grid ul { padding: 0; margin: 0; list-style: none; } .skills-grid li { font-size: 11px; line-height: 1.8; color: var(--muted); margin-bottom: 8px; } .education { margin-top: 35px; border-top: 1px solid var(--line); padding-top: 25px; } .education .eyebrow { font-size: 9px; margin-bottom: 18px; } .credential { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); } .credential-icon { width: 38px; height: 38px; border: 1px solid var(--accent); display: grid; place-items: center; color: var(--accent); font-size: 20px; border-radius: 10px; flex-shrink: 0; } .credential p { font-size: 10px; color: var(--muted); margin: 0 0 5px; } .credential h3 { font-size: 16px; letter-spacing: -0.02em; line-height: 1.5; } .education-item { display: flex; justify-content: space-between; gap: 20px; margin-top: 15px; } .education-item h3 { font-size: 14px; } .education-item p { font-size: 11px; color: var(--muted); } .interests { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .interests span { font-size: 11px; padding: 8px 13px; background: var(--card); border: 1px solid var(--line); border-radius: 30px; color: var(--muted); } .contact-section { --ink: #f4f5f6; --muted: #aeb4be; --accent: #ff4545; --line: #25313a; --card: rgb(var(--scene-rgb)); padding: 15px 36px 0; margin: 70px 0 35px; color: var(--ink); background-color: rgb(var(--scene-rgb)); background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px), radial-gradient(circle, #ff45452b 0 1px, transparent 1.5px); background-size: 82px 82px, 82px 82px, 82px 82px; border: 1px solid var(--line); border-radius: 12px; position: relative; overflow: hidden; isolation: isolate; color-scheme: dark; } .contact-section:before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgb(var(--scene-rgb)) 0%, rgba(var(--scene-rgb), 0.8) 25%, transparent 56%), radial-gradient(ellipse at 68% 55%, transparent 20%, rgba(var(--scene-rgb), 0.533) 95%); } .contact-section > * { position: relative; z-index: 1; } .contact-section > .contact-orbit { position: absolute; z-index: 0; top: -38px; left: 24%; width: min(850px, 72%); max-width: none; height: auto; pointer-events: none; opacity: 0.95; mask-image: linear-gradient( 90deg, transparent, #000 12%, #000 66%, transparent 96% ); animation: contact-orbit-float 16s ease-in-out infinite alternate; } @keyframes contact-orbit-float { from { transform: translateY(-4px); } to { transform: translateY(8px); } } .contact-topline { display: flex; justify-content: space-between; gap: 20px; align-items: center; } .contact-section .eyebrow { font: 600 11px/1.5 ui-monospace, monospace; letter-spacing: 0.12em; color: var(--accent); margin: 0; } .contact-section .eyebrow span { color: var(--muted); } .contact-topline > span, .contact-footer { font: 10px/1.6 ui-monospace, monospace; letter-spacing: 0.075em; color: var(--muted); } .channel-status { --channel-color: #ff4545; position: relative; display: inline-block; width: 7px; height: 7px; margin-left: 12px; border-radius: 50%; background: var(--channel-color); box-shadow: 0 0 8px color-mix(in srgb, var(--channel-color) 54%, transparent); vertical-align: 1px; } .channel-status:after { position: absolute; inset: -4px; border: 1px solid var(--channel-color); border-radius: 50%; content: ""; animation: channel-pulse 2.8s ease-out infinite; } :root[data-theme="studio"] .channel-status { --channel-color: #f5f5f2; } @keyframes channel-pulse { 0% { opacity: .6; transform: scale(.5); } 70%, 100% { opacity: 0; transform: scale(1.2); } } @media (prefers-reduced-motion: reduce) { .channel-status:after { animation: none; opacity: .35; transform: none; } } .contact-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(245px, 0.65fr); gap: 7%; align-items: center; padding: 14px 0 13px; } .contact-section h2 { font-size: clamp(38px, 4vw, 48px); max-width: 680px; letter-spacing: -0.055em; line-height: 1.08; } .contact-section em { font-style: normal; color: var(--accent); } .contact-message > p { font-size: 12px; line-height: 1.55; color: var(--muted); max-width: 440px; margin: 10px 0 0; } .contact-action { align-self: center; padding: 8px 0 6px; background: linear-gradient(90deg, rgba(var(--scene-rgb), 0.467), rgba(var(--scene-rgb), 0.851)); min-width: 0; } .contact-action:before { content: ""; display: block; width: 30px; height: 1px; background: #aeb4be; margin-bottom: 10px; } .contact-action-label { display: flex; justify-content: space-between; gap: 14px; font: 600 11px/1.6 ui-monospace, monospace; letter-spacing: 0.09em; color: var(--accent); } .contact-action-label span { font-size: 17px; line-height: 1; } .contact-links { display: flex; margin-top: 9px; } .contact-button { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 6px; width: 100%; background: none; border: 0; padding: 0; color: var(--ink); font-size: 12px; overflow-wrap: anywhere; } .contact-address { display: flex; align-items: center; min-width: 0; padding: 0 12px; min-height: 40px; background: #151e27; border: 1px solid var(--line); border-radius: 5px; font-weight: 600; } .contact-arrow { display: grid; place-items: center; min-height: 40px; background: var(--accent); color: rgb(var(--scene-rgb)); border-radius: 5px; font-size: 20px; line-height: 1; } .contact-button:hover { transform: none; box-shadow: none; } .contact-button:hover .contact-address { border-color: var(--accent); transform: none; } .contact-button:hover .contact-arrow { transform: translate(2px, -2px); } .contact-action > p { font-size: 11px; line-height: 1.5; color: var(--muted); margin: 8px 0 0; } .contact-footer { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0 11px; } .contact-placeholder { font-size: 11px; color: var(--muted); } .footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; font-size: 10px; color: var(--muted); padding-bottom: 30px; } .social-links { display: flex; gap: 9px; } .social-link { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--panel-line); border-radius: 50%; background: color-mix(in srgb, rgb(var(--surface-rgb)) 65%, transparent); color: var(--muted); transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; } .social-link svg { display: block; width: 17px; height: 17px; fill: currentColor; } .social-link:hover, .social-link:focus-visible { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-soft); transform: translateY(-2px); } .footer a:hover { color: var(--accent); } .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s, transform 0.7s cubic-bezier(0.2, 0.65, 0.3, 1); } .reveal.is-visible, .reveal:focus-within { opacity: 1; transform: none; } .page-hidden *, .page-hidden *:before, .page-hidden *:after { animation-play-state: paused !important; } @keyframes hero-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .career-chart { border: 1px solid var(--line); border-radius: 10px; padding: 25px 28px; background: linear-gradient(140deg, var(--card), var(--paper)); overflow: hidden; } .chart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 27px; } .focus-filters { display: flex; flex-wrap: wrap; gap: 6px; } .focus-filter { border: 1px solid transparent; border-radius: 5px; background: none; font-size: 10px; padding: 6px 10px; color: var(--muted); transition: color 0.2s, background 0.2s, border-color 0.2s; } .focus-filter:hover { color: var(--ink); border-color: var(--line); } .focus-filter[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); } .chart-count { font: 9px/1.5 ui-monospace, monospace; color: var(--muted); white-space: nowrap; } .career-axis, .career-row { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 24px; } .career-axis { color: var(--muted); font: 8px/1.5 ui-monospace, monospace; margin-bottom: 13px; padding-right: 3px; } .career-axis > div { height: 18px; position: relative; } .career-axis > div > span { position: absolute; left: var(--position); transform: translateX(-50%); } .career-axis > div > span:first-child { transform: none; } .career-axis > div > span:last-child { transform: translateX(-100%); } .career-row { align-items: center; position: relative; min-height: 62px; border-top: 1px solid var(--line); padding: 13px 0; border-radius: 2px; } .career-row[hidden] { display: none; } .career-label { min-width: 0; line-height: 1.5; } .career-label strong { font-size: 11px; font-weight: 500; display: block; transition: color 0.2s; } .career-label > span { font-size: 9px; color: var(--muted); display: block; margin-top: 3px; } .career-track { position: relative; display: block; height: 36px; background: repeating-linear-gradient( 90deg, var(--line) 0, var(--line) 1px, transparent 1px, transparent var(--tick-spacing) ); border-right: 1px solid var(--line); } .career-bar { display: block; position: absolute; left: var(--start); width: var(--length); height: 9px; top: 14px; border-radius: 2px; background: var(--muted); transform-origin: left center; transition: background 0.2s, box-shadow 0.2s; } .career-bar.current { background: var(--accent); box-shadow: 0 0 15px var(--accent-soft); } .career-bar.current:after { content: ""; position: absolute; right: -3px; top: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--paper); } .career-period { position: absolute; left: 0; bottom: 15px; white-space: nowrap; color: var(--ink); font: 9px/1.5 ui-monospace, monospace; opacity: 0; transform: translateY(3px); transition: opacity 0.2s, transform 0.2s; background: var(--card); padding: 1px 4px; border-radius: 3px; pointer-events: none; z-index: 2; } .current .career-period { left: auto; right: 0; } .career-row:hover .career-period, .career-row:focus-visible .career-period { opacity: 1; transform: none; } .career-row:hover .career-label strong, .career-row:focus-visible .career-label strong { color: var(--accent); } .career-row:hover .career-bar, .career-row:focus-visible .career-bar { background: var(--accent); box-shadow: 0 0 18px var(--accent-soft); } .career-mobile-date { display: none; } .chart-caption { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font: 9px/1.7 ui-monospace, monospace; margin: 20px 0 0; } .chart-key { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .chart-key i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; } .impact-panel { margin: 0; padding: 30px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); min-width: 0; } .signal-grid .eyebrow { font-size: 8px; margin-bottom: 22px; } .is-chart-visible .career-bar { animation: chart-draw 0.8s cubic-bezier(0.2, 0.7, 0.25, 1) var(--delay) both; } .timeline-item:target:before { background: var(--accent); box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--accent); animation: target-signal 1.4s ease-out 2; } .timeline-item:target .role-heading h3 { color: var(--accent); } @keyframes chart-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes target-signal { 50% { box-shadow: 0 0 0 6px var(--paper), 0 0 0 12px var(--accent-soft); } } @media (max-width: 1000px) { .career-axis, .career-row { grid-template-columns: 205px minmax(0, 1fr); gap: 20px; } .impact-panel { padding: 24px; } } @media (max-width: 720px) { .career-section { padding: 50px 0; } .career-chart { padding: 20px 16px; } .chart-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; } .focus-filter { font-size: 9px; padding: 6px 8px; } .career-axis, .career-row { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; } .career-axis { font-size: 7px; } .career-axis > span { font-size: 7px; } .career-label strong { font-size: 9px; } .career-label > span { font-size: 8px; } .career-row { padding: 12px 0 24px; min-height: 80px; } .career-bar { height: 6px; top: 15px; } .career-bar.current:after { width: 5px; height: 5px; top: 0.5px; } .chart-caption { font-size: 8px; flex-wrap: wrap; gap: 8px; } .signal-grid { grid-template-columns: 1fr; gap: 16px; } .impact-panel { padding: 25px; } } @media print { .career-section { padding: 24px 0; break-inside: avoid; } .career-section h2 { font-size: 19pt; } .career-chart { padding: 15px; background: #fff; } .chart-toolbar { display: none; } .career-axis, .career-row { grid-template-columns: 180px minmax(0, 1fr); gap: 15px; } .career-row { min-height: 46px; padding: 8px 0; } .career-row[hidden] { display: grid !important; } .career-label strong { font-size: 8pt; } .career-label > span { font-size: 7pt; } .career-mobile-date { display: none; } .career-period { opacity: 1; font-size: 6pt; bottom: 12px; background: #fff; } .career-bar { height: 6px; } .career-track { height: 25px; } .chart-caption { font-size: 7pt; } .signal-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .impact-panel { padding: 16px; background: #fff; break-inside: avoid; } .career-bar { transform: none !important; animation: none !important; } } @media (min-width: 1440px) { .hero { min-height: 720px; } } @media (max-width: 1050px) { .wrap { padding-inline: 35px; } .hero { gap: 30px; } .header { gap: 20px; } .header nav { gap: 20px; } .section { gap: 35px; grid-template-columns: 1fr 1.7fr; } .role-heading { display: block; } .period { display: block; margin-top: 5px; } .skills-grid { gap: 15px; } .contact-section { padding: 40px 30px; } .contact-links { align-items: flex-start; } } @media (max-width: 720px) { html { scroll-padding-top: 30px; } .wrap { padding-inline: 24px; } .header { padding-block: 19px; gap: 10px; } .header-actions { margin-left: auto; } .brand { font-size: 12px; } .brand small { font-size: 9px; } .header nav { display: none; position: absolute; right: 24px; top: 80px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 15px 30px #0003; min-width: 185px; padding: 20px; border-radius: 10px; z-index: 20; } .header nav.is-open { display: flex; flex-direction: column; gap: 15px; } .menu-button { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius:50%; background:color-mix(in srgb, var(--ink) 4%, transparent); color:var(--accent); cursor:pointer; } .hero { grid-template-columns: 1fr; gap: 35px; min-height: auto; padding: 60px 0 40px; } .hero-copy h1 { font-size: clamp(65px, 14vw, 90px); } .hero-title { font-size: 15px; margin-top: 20px; } .hero .eyebrow { font-size: 8px; } .hero-intro { font-size: 13px; max-width: 100%; } .hero-actions { gap: 17px; } .button { font-size: 10px; } .section { grid-template-columns: 1fr; gap: 30px; padding: 50px 0; } h2 { font-size: 32px; } .section-heading h2 br { display: none; } .section-heading .eyebrow { margin-bottom: 15px; } .section-note { font-size: 11px; margin-top: 15px; } .section-note br { display: none; } .about-copy > p { font-size: 16px; } .about-copy > p + p { font-size: 13px; } .role-heading { display: block; } .role-heading h3 { font-size: 17px; } .timeline-item { padding-left: 23px; padding-bottom: 35px; } .job-summary, .timeline-item li { font-size: 12px; } .skills-grid { grid-template-columns: 1fr 1fr; gap: 25px; } .credential { padding: 17px; } .credential h3 { font-size: 15px; } .interests-section { padding-top: 45px; } .contact-section { padding: 35px 24px; margin: 45px 0 25px; } .contact-section h2 { font-size: 43px; } .contact-section:after { right: -220px; top: -170px; } .contact-button { font-size: 11px; } .footer { flex-wrap: wrap; gap: 15px; font-size: 9px; } .section-divider { font-size: 8px; } } @media (max-width: 370px) { .wrap { padding-inline: 18px; } .brand small { display: none; } .header-actions { gap: 4px; } .hero-copy h1 { font-size: 60px; } .skills-grid { grid-template-columns: 1fr; } .contact-section h2 { font-size: 37px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *:before, *:after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } @media print { @page { margin: 16mm; } :root, :root[data-theme="dark"], :root[data-theme="studio"] { --paper: #fff; --ink: #17191e; --muted: #454953; --line: #ccc; --accent: #a51c25; --accent-soft: transparent; --card: #fff; color-scheme: light; } html { scroll-behavior: auto; } body { background: #fff; font-size: 10pt; } .wrap { max-width: none; padding: 0; } *, *:before, *:after { animation: none !important; transition: none !important; } .reveal { opacity: 1 !important; transform: none !important; } .header { padding: 0 0 12px; } .header nav, .header-actions, .hero-actions, .section-divider, .flow-transition, .about-note, .footer > a, .skip-link, .contact-section:after { display: none !important; } .hero { display: block; min-height: 0; padding: 24px 0; } .hero-copy h1 { font-size: 38pt; line-height: 1.05; } .hero-title { font-size: 13pt; margin-top: 12px; } .hero-intro { max-width: none; font-size: 10pt; margin: 12px 0; } .hero .eyebrow { margin-bottom: 12px; } h2 { font-size: 19pt; } .section { padding: 24px 0; gap: 25px; grid-template-columns: 1fr 2fr; } .section-heading .eyebrow { margin-bottom: 12px; } .about-copy > p, .about-copy > p + p { font-size: 10pt; } .role-heading { display: block; } .role-heading h3 { font-size: 12pt; } .period { font-size: 8pt; } .job-summary, .timeline-item li { font-size: 9pt; } .timeline-item { break-inside: avoid; padding-bottom: 22px; } .tags { gap: 5px; } .tag { font-size: 7pt; padding: 2px 5px; } .skills-grid { grid-template-columns: repeat(3, 1fr); } .skills-grid h3 { font-size: 9pt; } .skills-grid li { font-size: 8pt; } .education { margin-top: 20px; } .credential { break-inside: avoid; padding: 12px; } .credential h3 { font-size: 11pt; } .interests-section { padding-top: 24px; break-inside: avoid; } .interests-section h2 { font-size: 19pt; } .interests { gap: 5px; margin-top: 12px; } .interests span { font-size: 8pt; padding: 3px 7px; } .contact-section { background: #fff; padding: 18px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 25px 0 10px; break-inside: avoid; } .contact-section:before, .contact-section:after { display: none !important; } .contact-section h2 { font-size: 24pt; } .contact-section h2 br { display: none; } .contact-section .eyebrow { margin-bottom: 12px; } .contact-button { color: var(--ink); background: #fff; padding: 0; font-size: 9pt; } .footer { padding: 10px 0; } a[href^="https://"]:after { content: " (" attr(href) ")"; font-size: 8pt; } .social-links { flex-wrap: wrap; } } :root[data-theme="studio"] { --scene-rgb: 9, 9, 9; --surface-rgb: 16, 16, 16; --panel-line: rgba(180, 180, 180, .18); --paper: #090909; --ink: #f5f5f2; --muted: #a1a19c; --line: #30302f; --accent: #f5f5f2; --accent-soft: #ffffff0f; --card: #101010; --on-accent: #090909; color-scheme: dark; } .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; } .hero-actions { gap: 15px 20px; } h1::first-line { color: inherit; } .name-line { display: block; position: relative; width: fit-content; max-width: 100%; isolation: isolate; } .name-line:first-child { margin-bottom: 0.1em; } .name-line:first-child .name-text { background: var(--ink); color: var(--paper); padding: 0.055em 0.08em 0.09em; } .name-text { display: block; padding-bottom: 0.06em; clip-path: inset(0 0 0 0); } .intro-play .hero-title { animation: label-enter 0.65s 0.7s both; } [data-theme="studio"] .button, [data-theme="studio"] .project, [data-theme="studio"] .career-chart, [data-theme="studio"] .impact-panel, [data-theme="studio"] .contact-section, [data-theme="studio"] .credential, [data-theme="studio"] .tag, [data-theme="studio"] .focus-filter { border-radius: 0; } [data-theme="studio"] .contact-section { border-radius: 14px; } [data-theme="studio"] .project { border-radius: 13px; } [data-theme="studio"] .contact-address, [data-theme="studio"] .contact-arrow { border-radius: 5px; } [data-theme="studio"] .hero-copy h1 { font-weight: 800; letter-spacing: -0.07em; } [data-theme="studio"] .eyebrow { font-family: ui-monospace, monospace; letter-spacing: 0.15em; } .section-heading h2, .title-swipe { position: relative; width: fit-content; isolation: isolate; } .section-heading h2:after, .title-swipe:after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); opacity: 0; pointer-events: none; } .title-swipe.is-swipe-visible:after { animation: block-wipe 0.85s cubic-bezier(0.76, 0, 0.24, 1) both; } @keyframes block-wipe { 0% { transform: scaleX(0); transform-origin: left; opacity: 1; } 42% { transform: scaleX(1); transform-origin: left; opacity: 1; } 43%, 55% { transform: scaleX(1); transform-origin: right; opacity: 1; } 99% { transform: scaleX(0); transform-origin: right; opacity: 1; } 100% { transform: scaleX(0); transform-origin: right; opacity: 0; } } @keyframes type-unmask { 0%, 42% { clip-path: inset(0 100% 0 0); } 55%, 100% { clip-path: inset(0 0 0 0); } } @keyframes label-enter { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } @keyframes edge-scan { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 46% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } @media (max-width: 1050px) { .header { gap: 14px; } .header nav { gap: 15px; } .hero-actions { gap: 14px; } } @media (max-width: 420px) { .brand { gap: 0; } .header-actions { gap: 7px; } } @media (prefers-reduced-motion: reduce) { .name-text, .hero-title{ clip-path: none !important; opacity: 1 !important; } .section-heading h2:after, .title-swipe:after { display: none !important; } } @media print { .section-heading h2:after, .title-swipe:after { display: none !important; } .name-text { clip-path: none !important; } .name-line { width: auto; } .name-text { padding: 0; } .hero-title { clip-path: none !important; opacity: 1 !important; } .primary, .contact-button { --on-accent: #fff; } } @media print { :root[data-theme="studio"] { --paper: #fff; --ink: #17191e; --muted: #454953; --line: #ccc; --accent: #a51c25; --accent-soft: transparent; --card: #fff; --on-accent: #fff; color-scheme: light; } } .header { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; padding-block: 20px; } .header nav { margin-left: 0; } .header-actions { justify-self: end; } .brand { gap: 15px; width: fit-content; } .brand-mark { display: inline-flex; align-items: baseline; gap: 7px; font: 800 22px/1 var(--heading); letter-spacing: -0.055em; } .brand-mark > span { color: var(--accent); font-weight: 400; font-size: 20px; } @media (max-width: 900px) { .header { gap: 18px; } } @media (max-width: 720px) { .header { display: flex; padding-block: 18px; gap: 12px; } .header-actions { margin-left: auto; } .header nav { top: calc(100% + 8px); } .brand-mark { font-size: 21px; } .brand { gap: 0; } } @media (max-width: 420px) { .brand-mark { font-size: 20px; } } @media print { .header { display: flex; padding: 0 0 12px; } .brand-mark { font-size: 16pt; } } @media print { .name-line:first-child { width: fit-content; } .name-line:first-child .name-text { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } .signal-grid .impact-caption .eyebrow { margin: 0; } .role-metric { display: flex; flex-direction: column-reverse; gap: 8px; min-width: 0; } .role-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr)); gap: 10px; margin: 20px 0; } .role-metric { border: 1px solid var(--line); background: var(--card); border-radius: 5px; padding: 11px 13px; max-width: none; } .role-metric dd { font: 600 19px/1.15 var(--heading); margin: 0; letter-spacing: -0.035em; color: var(--accent); } .role-metric dd > span { font: 9px/1.5 ui-monospace, monospace; letter-spacing: 0; margin-left: 3px; } .role-metric dt { font-size: 9px; line-height: 1.5; color: var(--muted); } .role-metric-kind { display: table; width: fit-content; margin-top: 8px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 3px; background: color-mix(in srgb, var(--accent) 8%, var(--card)); font: 9px/1.4 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; } .role-metric.role-metric--text dd { font-size: 17px; line-height: 1.35; letter-spacing: -.02em; overflow-wrap: anywhere; } [data-theme="studio"] .role-metric { border-radius: 0; } @media (max-width: 720px) { .role-metric { padding: 10px 12px; } .role-metric dd { font-size: 18px; } } @media print { .role-metrics { gap: 8px; margin: 12px 0; } .role-metric { padding: 8px; break-inside: avoid; } .role-metric dd { font-size: 12pt; } .role-metric dt { font-size: 7pt; } } .signal-grid { align-items: start; } .impact-plot { display: block; width: 100%; height: auto; margin: 12px 0 0; overflow: visible; } .impact-plot-grid line { stroke: var(--line); stroke-width: 0.7; stroke-dasharray: 2 5; } .impact-plot-grid text, .impact-axis-label { fill: var(--muted); font: 8px ui-monospace, monospace; } .impact-baseline { stroke: var(--line); stroke-width: 1; } .impact-line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; } .impact-line.reduction { stroke: var(--muted); stroke-dasharray: 5 5; } .impact-origin { fill: var(--muted); stroke: var(--card); stroke-width: 2; } .impact-endpoint circle { fill: var(--accent); stroke: var(--card); stroke-width: 2; } .impact-endpoint text { fill: var(--accent); font: 600 12px var(--heading); letter-spacing: -0.03em; } .impact-endpoint.reduction circle { fill: var(--muted); } .impact-endpoint.reduction text { fill: var(--ink); } .impact-comparison-note { font: 7px/1.8 ui-monospace, monospace; color: var(--muted); margin: 8px 0 0; } .is-chart-visible .impact-line { animation: plot-reveal 1.2s cubic-bezier(0.2, 0.6, 0.3, 1) 0.1s both; } .is-chart-visible .impact-line.reduction { animation-delay: 0.2s; } .is-chart-visible .impact-endpoint { animation: plot-label 0.5s 0.95s both; } .is-chart-visible .impact-plot-area { animation: plot-label 0.8s 0.35s both; } @keyframes plot-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes plot-label { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .impact-line { clip-path: none !important; } .impact-endpoint, .impact-plot-area { opacity: 1 !important; } } @media print { .impact-story-heading { font-size: 17pt; } .impact-story-copy { font-size: 8pt; } .impact-legend strong { font-size: 7pt; } .impact-legend small { font-size: 6pt; } .impact-plot { max-height: 180px; } .impact-comparison-note, .impact-method { font-size: 6pt; } .impact-line { clip-path: none !important; } .impact-endpoint, .impact-plot-area { opacity: 1 !important; } } .github-reference { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; color: var(--muted); padding: 5px 0; border-bottom: 1px solid var(--line); } .github-reference:hover { color: var(--accent); border-color: var(--accent); } .learning-note { font-size: 13px; line-height: 1.9; max-width: 650px; color: var(--muted); margin: 20px 0 0; } .interests > a { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; padding: 8px 13px; background: var(--card); border: 1px solid var(--line); border-radius: 30px; color: var(--muted); transition: color 0.2s, border-color 0.2s; } .interests > a:hover { color: var(--ink); border-color: var(--accent); } .interests > a > span { font-size: 13px; padding: 0; background: none; border: 0; color: var(--accent); line-height: 1; } .interest-reference-note { font: 9px/1.8 ui-monospace, monospace; color: var(--muted); margin: 17px 0 0; } @media (max-width: 720px) { .learning-note { font-size: 12px; } .github-reference { font-size: 10px; } } @media print { .learning-note { font-size: 9pt; } .interests > a { font-size: 8pt; padding: 3px 7px; } .interests > a[href]:after { display: none; } .github-reference { font-size: 8pt; } .interest-reference-note { font-size: 7pt; } } .always-curious { --curiosity-accent: var(--accent); position: relative; isolation: isolate; overflow: hidden; width: min(1400px, calc(100vw - 80px)); left: 50%; transform: translateX(-50%); margin-top: 70px; padding: clamp(30px, 4.2vw, 62px); border: 1px solid rgba(222, 228, 239, .14); border-radius: 26px; background: rgb(var(--scene-rgb)); box-shadow: 0 30px 90px rgba(0, 0, 0, .32); } .always-curious.reveal { transform: translate(-50%, 20px); } .always-curious.reveal.is-visible, .always-curious.reveal:focus-within { transform: translateX(-50%); } .curiosity-background, .curiosity-scrim, .curiosity-effects { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .curiosity-background { z-index: 0; object-fit: cover; object-position: center 34%; opacity: .68; } .curiosity-scrim { z-index: 1; background: linear-gradient(90deg, rgba(var(--scene-rgb), .95) 0%, rgba(var(--scene-rgb), .82) 42%, rgba(var(--scene-rgb), .59) 100%), linear-gradient(0deg, rgba(var(--scene-rgb), .89), transparent 58%), radial-gradient(ellipse at 72% 54%, transparent 0%, rgba(var(--scene-rgb), .3) 75%); } .curiosity-effects { z-index: 2; opacity: .36; } .curiosity-effects::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(220, 230, 245, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(220, 230, 245, .035) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(90deg, transparent, #000 48%, #000); } .curiosity-crosshair { position: absolute; width: 18px; height: 18px; border: 1px solid rgba(255, 78, 82, .48); border-radius: 50%; } .curiosity-crosshair::before, .curiosity-crosshair::after { content: ""; position: absolute; background: rgba(255, 78, 82, .45); } .curiosity-crosshair::before { width: 1px; height: 29px; left: 8px; top: -7px; } .curiosity-crosshair::after { width: 29px; height: 1px; left: -7px; top: 8px; } .curiosity-crosshair--one { top: 26%; right: 21%; } .curiosity-crosshair--two { bottom: 18%; right: 8%; transform: scale(.65); } .curiosity-content { position: relative; z-index: 3; } .curiosity-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; } .curiosity-header .eyebrow { margin-bottom: 12px; font-size: 10px; letter-spacing: .18em; } .always-curious h2 { font-size: clamp(34px, 4vw, 54px); line-height: 1.08; letter-spacing: -.055em; } .always-curious h2 .accent { color: var(--curiosity-accent); } .always-curious .learning-note { margin-top: 12px; max-width: 580px; font-size: 14px; line-height: 1.7; } .always-curious .github-reference { flex: none; gap: 10px; padding: 10px 14px; border: 1px solid rgba(220, 228, 240, .17); border-radius: 999px; background: rgba(var(--scene-rgb), .58); color: #e3e7ef; } .always-curious .github-reference img { width: 19px; height: 19px; } .always-curious .interest-groups { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr); gap: 18px; margin-top: 0; } .always-curious .interest-group { min-width: 0; padding: 21px 23px 18px; border: 1px solid var(--panel-line); border-radius: 18px; background: rgba(var(--surface-rgb), .75); box-shadow: inset 0 1px rgba(255,255,255,.025); backdrop-filter: blur(12px); transition: border-color .24s ease, box-shadow .24s ease; } .always-curious .interest-group:hover { border-color: rgba(255, 69, 69, .42); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 32px rgba(255, 34, 44, .07); } .always-curious .interest-group h3 { gap: 11px; margin: 0; color: #f2f3f6; font-size: 17px; font-weight: 650; } .always-curious .interest-group h3 img { flex: none; opacity: .83; filter: invert(40%) sepia(90%) saturate(2000%) hue-rotate(326deg) brightness(102%); } .always-curious .interest-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 19px; margin: 15px 0 0; } .always-curious .interest-group li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 0; color: #c3c8d1; font-size: 12px; line-height: 1.45; } .always-curious .interest-group li > img { flex: none; opacity: .76; filter: invert(40%) sepia(90%) saturate(2000%) hue-rotate(326deg) brightness(102%); } .always-curious .interest-group li > span { min-width: 0; } .always-curious .interest-group a { display: inline; color: inherit; } .always-curious .interest-group a:hover { color: #fff; } .always-curious .interest-group a > span { color: var(--curiosity-accent); margin-left: 5px; } .always-curious .interest-group--hobby ul { gap: 9px; } .always-curious .interest-group--hobby li { min-height: 52px; padding: 9px 10px; border: 1px solid rgba(220, 228, 240, .09); border-radius: 11px; background: rgba(255,255,255,.025); font-size: 11px; } .always-curious .repo-collection { margin-top: 25px; } .always-curious .repo-collection + .repo-collection { margin-top: 30px; } .always-curious .repo-collection-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 12px; } .always-curious .repo-collection-heading p { margin: 0 0 5px; color: var(--curiosity-accent); font: 9px/1.4 ui-monospace, monospace; letter-spacing: .14em; } .always-curious .repo-collection-heading h3 { margin: 0; color: #f2f3f6; font-size: 19px; } .always-curious .repo-collection-heading > span { color: #9ca3ae; font-size: 10px; } .always-curious .repo-references { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .always-curious .repo-reference { position: relative; display: grid; grid-template-columns: 1fr 34px; grid-template-rows: 26px 1fr; gap: 7px 9px; min-height: 146px; padding: 16px; border: 1px solid var(--panel-line); border-radius: 15px; background: rgba(var(--surface-rgb), .78); backdrop-filter: blur(12px); transition: border-color .22s ease, background .22s ease, transform .22s ease; } .always-curious .repo-collection--owned .repo-reference { min-height: 184px; border-color: rgba(255, 69, 69, .24); background: linear-gradient(145deg, rgba(255, 69, 69, .07), rgba(var(--surface-rgb), .82) 45%); } .always-curious .repo-reference:hover { transform: translateY(-2px); border-color: rgba(255, 69, 69, .48); background: rgba(var(--surface-rgb), .9); } .repo-copy { grid-column: 1 / -1; grid-row: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; padding-right: 58px; } .repo-copy > span { color: #9ca3ae; font: 9px/1.4 ui-monospace, monospace; letter-spacing: .1em; } .repo-copy strong { color: #f1f2f5; font: 650 16px/1.3 var(--heading); } .repo-copy small { color: #b0b5bf; font-size: 11px; line-height: 1.45; } .repo-copy .repo-fork { color: #e8a8a8; } .repo-copy .repo-meta { margin-top: auto; color: #d5a3a7; font: 9px/1.4 ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; } .repo-action { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: transparent; color: #090909; font-size: 24px; transition: background .2s ease; } .repo-action > img, .repo-action > span { grid-area: 1 / 1; transition: opacity .2s ease, transform .2s ease; } .repo-action > img { width: 100%; height: 100%; object-fit: contain; } .repo-action > span { opacity: 0; transform: translate(-3px, 3px); } .repo-action:is(:hover, :focus-visible, :active) { background: var(--curiosity-accent); } .repo-action:is(:hover, :focus-visible, :active) > img { opacity: 0; transform: scale(.85); } .repo-action:is(:hover, :focus-visible, :active) > span { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .repo-action > img, .repo-action > span { transition: none; } } .always-curious .interest-reference-note { margin-top: 15px; color: #aeb3bd; font-size: 10px; } .always-curious a:focus-visible { outline: 2px solid #ff8585; outline-offset: 3px; } .always-curious.is-visible .curiosity-content { animation: curiosity-arrive .65s cubic-bezier(.2,.7,.2,1) both; } @keyframes curiosity-arrive { from { opacity: .2; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 980px) { .always-curious { width: min(100%, calc(100vw - 48px)); padding: 30px; } .always-curious .interest-groups { grid-template-columns: minmax(0, 1.35fr) minmax(265px, 1fr); } .always-curious .interest-group { padding: 18px; } .always-curious .interest-group li { font-size: 11px; } .always-curious .repo-reference { min-height: 138px; padding: 13px; } .repo-copy strong { font-size: 14px; } } @media (max-width: 720px) { .always-curious { left: auto; width: auto; transform: none; margin: 48px 0 0; padding: 23px 18px; border-radius: 19px; } .always-curious.reveal { transform: translateY(20px); } .always-curious.reveal.is-visible, .always-curious.reveal:focus-within { transform: none; } .curiosity-background { object-position: 62% center; opacity: .43; } .curiosity-scrim { background: linear-gradient(90deg, rgba(var(--scene-rgb),.91), rgba(var(--scene-rgb),.77)), linear-gradient(0deg, rgba(var(--scene-rgb),.82), transparent); } .curiosity-header { align-items: flex-start; flex-direction: column; gap: 17px; margin-bottom: 22px; } .always-curious h2 { font-size: 38px; } .always-curious .learning-note { font-size: 12px; } .always-curious .interest-groups { grid-template-columns: 1fr; gap: 12px; } .always-curious .interest-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .always-curious .interest-group--hobby ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .always-curious .repo-collection-heading { align-items: start; flex-direction: column; gap: 4px; } .always-curious .repo-references { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .always-curious .repo-reference { grid-column: span 1; min-height: 137px; } .always-curious .repo-reference:last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (max-width: 420px) { .always-curious .interest-group ul, .always-curious .interest-group--hobby ul { grid-template-columns: 1fr; } .always-curious .interest-group--hobby li { min-height: 46px; } .always-curious .repo-references { grid-template-columns: 1fr; } .always-curious .repo-reference, .always-curious .repo-reference:last-child:nth-child(odd) { grid-column: 1; min-height: 112px; } } @media (prefers-reduced-motion: reduce) { .always-curious.is-visible .curiosity-content { animation: none; } .always-curious .repo-reference, .always-curious .interest-group, .repo-action { transition: none; } } @media print { .always-curious { width: auto; left: auto; transform: none; padding: 20px; background: #090a0c; } .curiosity-background, .curiosity-effects { display: none; } .always-curious .interest-group, .always-curious .repo-reference { backdrop-filter: none; } } @media screen { :root { --muted: #b0b3bd; } :root[data-theme="studio"] { --muted: #b5b5af; } #experience { grid-template-columns: minmax(180px, 0.65fr) minmax(0, 2fr); gap: 56px; align-items: start; } #experience > .section-heading { position: sticky; top: 36px; } #experience .timeline-item { padding-bottom: 52px; padding-left: 30px; } #experience .timeline-item:last-child { padding-bottom: 0; } .job-summary, .timeline-item li { font-size: 15px; line-height: 1.8; } .role-heading h3 { font-size: 21px; } .company { font-size: 13px; } .period { font-size: 11px; } .role-metric dt { font-size: 11px; } .role-metric dd { font-size: 24px; } .role-metric dd > span { font-size: 12px; } .role-details > summary { font-size: 12px; min-height: 50px; } .role-detail-group h4 { font-size: 13px; } .tag { font-size: 11px; } .signal-grid { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); } .impact-panel { padding: 26px; } .signal-grid .eyebrow { font-size: 10px; margin-bottom: 18px; } .career-label strong { font-size: 12px; } .career-label > span { font-size: 11px; } .focus-filter, .chart-caption, .chart-count { font-size: 11px; } .skills-grid h3 { font-size: 14px; } .skills-grid li { font-size: 13px; } .learning-note { font-size: 15px; } .interest-reference-note { font-size: 11px; } } .role-topic { border-bottom: 1px solid var(--line); } .role-topic > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; padding: 20px 0; min-height: 52px; } .role-topic > summary::-webkit-details-marker { display: none; } .role-topic > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .role-topic > summary strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); } .topic-preview { display: block; font-size: 13px; line-height: 1.7; color: var(--muted); margin-top: 6px; max-width: 65ch; } .role-topic > summary:hover strong { color: var(--accent); } .role-topic[open] > summary .detail-toggle:after { transform: rotate(0); } .role-topic:not([open]) > summary .detail-toggle:after { transform: rotate(90deg); } .topic-content { padding: 0 12px 16px 0; } .role-context > summary strong { color: var(--muted); font-size: 12px; } .role-detail-body { padding-top: 0; } .project--cloud .project-art { background-image: url("/images/work/card-cloud.webp"); } .project--infrastructure .project-art { background-image: url("/images/work/card-infra.webp"); } .project--data .project-art { background-image: url("/images/work/card-data.webp"); } .project--automation .project-art { background-image: url("/images/work/card-auto.webp"); } .project--impact .project-art { background-image: url("/images/work/card-impact.webp"); } .project--engineers .project-art { background-image: url("/images/work/card-engineers.webp"); } .work-detail-rail { margin-top: 18px; } .work-detail-rail[hidden], .work-detail-panel[hidden] { display: none; } .work-detail-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 38px; padding: 34px 56px; border: 1px solid var(--panel-line); border-radius: 12px; background: rgb(var(--scene-rgb)); color: #f4f5f6; } .work-detail-panel:not(:has(.architecture-flow)) { grid-template-columns: minmax(0, 1fr); } .work-detail-panel .project-copy { max-width: 680px; min-width: 0; } .work-detail-panel .eyebrow { font: 600 10px/1.5 ui-monospace, monospace; color: #ff4545; margin: 0 0 11px; letter-spacing: 0.1em; } .work-detail-panel h3 { font-size: clamp(25px, 2.4vw, 38px); line-height: 1.15; } .work-detail-panel .project-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.7; color: #b8c0c9; margin: 17px 0; } .work-detail-panel .tag { border-color: var(--panel-line); color: #b8c0c9; } .project-detail-link { display: inline-flex; margin-top: 18px; font-size: 12px; color: #ff4545; } .work-detail-close { position: absolute; right: 22px; top: 18px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--panel-line); border-radius: 50%; background: none; color: #f4f5f6; font-size: 24px; line-height: 1; } .work-detail-close:hover { border-color: #ff4545; color: #ff4545; } .project-outcome { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); } .project-outcome strong { font: 600 23px/1.25 var(--heading); letter-spacing: -0.035em; color: var(--accent); } .project-outcome > span { font-size: 11px; line-height: 1.6; color: var(--muted); } .architecture-flow { margin: 0; align-self: center; padding: 24px; border: 1px solid var(--line); background: var(--paper); min-width: 0; } .work-detail-panel .architecture-flow { background: rgb(var(--scene-rgb)); border-color: var(--panel-line); color: #f4f5f6; } .work-detail-panel .architecture-flow figcaption, .work-detail-panel .architecture-flow li > span:last-child, .work-detail-panel .architecture-flow p, .work-detail-panel .project-outcome > span { color: #b8c0c9; } .architecture-flow figcaption { display: flex; justify-content: space-between; gap: 12px; font: 10px/1.6 ui-monospace, monospace; color: var(--muted); } .architecture-flow ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 35px 0 26px; } .architecture-flow li { position: relative; min-width: 0; } .flow-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--accent); background: var(--paper); color: var(--accent); margin-bottom: 18px; } .flow-icon svg { width: 22px; height: 22px; } .architecture-flow li:not(:last-child):after { content: ""; position: absolute; left: 42px; right: -12px; top: 21px; height: 1px; background: var(--line); } .architecture-flow li:not(:last-child):before { content: "›"; position: absolute; right: 0; top: 7px; color: var(--accent); z-index: 1; } .architecture-flow li > strong { display: block; font-size: 12px; line-height: 1.5; } .architecture-flow li > span:last-child { display: block; margin-top: 8px; font-size: 11px; line-height: 1.6; color: var(--muted); } .work-detail-panel .architecture-flow p { font-size: 11px; line-height: 1.7; border-top: 1px solid var(--line); padding-top: 18px; margin: 0; } .interest-groups { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; margin-top: 32px; } .interest-group { border-top: 1px solid var(--line); padding-top: 24px; } .interest-group h3 { display: flex; align-items: center; gap: 12px; font-size: 18px; letter-spacing: -0.025em; } .interest-group h3 svg { width: 22px; height: 22px; color: var(--accent); flex: none; } .interest-group ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 0; margin: 20px 0 0; } .interest-group:last-child ul { grid-template-columns: 1fr; } .interest-group li { font-size: 13px; line-height: 1.7; padding: 10px 0; color: var(--muted); } .interest-group a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .interest-group a:hover { color: var(--ink); } .interest-group a > span { color: var(--accent); } .repo-references { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; } .repo-reference { display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid var(--line); background: var(--card); transition: border-color 0.2s; } .repo-reference:hover { border-color: var(--accent); } .repo-reference > span { font: 9px/1.5 ui-monospace, monospace; color: var(--muted); letter-spacing: 0.06em; } .repo-reference strong { display: flex; justify-content: space-between; font: 600 21px/1.4 var(--heading); } .repo-reference small { font-size: 12px; line-height: 1.6; color: var(--muted); } @media screen and (max-width: 1050px) { #experience { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; } .signal-grid { grid-template-columns: 1fr; } .impact-plot { max-width: 480px; margin-inline: auto; } } @media screen and (max-width: 720px) { #experience { grid-template-columns: minmax(0, 1fr); gap: 30px; } #experience > .section-heading { position: static; } #experience .timeline-item { padding-left: 22px; padding-bottom: 42px; } .job-summary, .timeline-item li { font-size: 14px; } .role-heading h3 { font-size: 20px; } .role-metrics { gap: 8px; } .role-metric { max-width: none; padding: 12px; } .role-metric dd { font-size: 22px; } .architecture-flow { padding: 18px; } .architecture-flow figcaption { flex-wrap: wrap; } .architecture-flow ol { grid-template-columns: 1fr; margin: 24px 0; gap: 22px; } .architecture-flow li { padding-left: 58px; min-height: 65px; } .flow-icon { position: absolute; left: 0; top: 0; margin: 0; } .architecture-flow li:not(:last-child):after { left: 21px; top: 42px; bottom: -22px; width: 1px; height: auto; right: auto; } .architecture-flow li:not(:last-child):before { content: ""; } .architecture-flow li > strong { font-size: 14px; } .architecture-flow li > span:last-child { font-size: 12px; margin-top: 4px; } .interest-groups, .repo-references { grid-template-columns: 1fr; gap: 20px; } .interest-group ul { grid-template-columns: 1fr; } .repo-reference { padding: 20px; } .impact-panel { padding: 22px; } .career-label strong { font-size: 11px; } .career-label > span { font-size: 10px; } } @media screen and (max-width: 380px) { .impact-legend { grid-template-columns: 1fr; } .impact-method { flex-wrap: wrap; justify-content: flex-start; gap: 12px; } } @media print { #experience { grid-template-columns: 1fr; gap: 18px; } #experience > .section-heading { position: static; } .role-topic::details-content { content-visibility: visible; } .role-topic > summary { display: block; padding: 10px 0; list-style: none; } .role-topic .detail-toggle { display: none; } .topic-preview { font-size: 9pt; } .topic-content { display: block !important; animation: none !important; } .role-topic > summary strong { font-size: 10pt; } .project-outcome { margin-top: 10px; padding-top: 8px; } .project-outcome strong { font-size: 13pt; } .architecture-flow { margin-top: 18px; padding: 16px; break-inside: avoid; } .interest-groups { gap: 22px; } .interest-group li { font-size: 9pt; } .repo-references { gap: 10px; } .repo-reference { padding: 12px; } .repo-reference strong { font-size: 12pt; } } @media screen and (max-width: 1050px) { .contact-section { padding: 20px 30px 0; } .contact-layout { grid-template-columns: minmax(0, 1.45fr) minmax(225px, 0.7fr); gap: 6%; padding: 14px 0 13px; } .contact-section h2 { font-size: clamp(37px, 4.2vw, 46px); } } @media screen and (max-width: 720px) { .contact-section { padding: 22px 24px 0; } .contact-topline { padding-bottom: 0; } .contact-topline > span { font-size: 8px; text-align: right; } .contact-layout { display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding: 28px 0 26px; } .contact-message { align-self: stretch; } .contact-section h2 { font-size: clamp(34px, 8vw, 46px); } .contact-message > p { font-size: 12px; max-width: 42ch; margin-top: 13px; } .contact-action { align-self: stretch; max-width: 410px; } .contact-section > .contact-orbit { width: 560px; left: auto; right: -250px; top: -10px; opacity: 0.42; } .contact-footer { font-size: 8px; padding: 10px 0 18px; } .contact-footer span:last-child { display: none; } } @media screen and (max-width: 380px) { .contact-topline > span { display: none; } .contact-section h2 { font-size: 36px; } .contact-button { font-size: 11px; } } @media print { .contact-section { --ink: #17191e; --muted: #454953; --accent: #a51c25; --line: #ccc; --card: #fff; color: #17191e; background: #fff; } .contact-section > .contact-orbit { display: none; } .contact-topline { border: 0; padding: 0; } .contact-topline > span, .contact-footer { display: none; } .contact-layout { display: block; min-height: 0; padding: 10px 0 0; } .contact-message > p { font-size: 9pt; margin: 8px 0; } .contact-action { border: 0; padding: 0; background: transparent; } .contact-action-label, .contact-action > p { display: none; } .contact-links { margin: 0; } .contact-button { display: block; border: 0; width: auto; } .contact-address { display: block; background: transparent; color: #17191e; border: 0; padding: 0; min-height: 0; } .contact-arrow { display: none; } } @media screen and (max-width: 1500px) { .work-intro { min-height: clamp(380px, 31vw, 460px); padding-block: 34px; } .work-intro h2 { font-size: clamp(48px, 4.5vw, 68px); } .work-intro-copy { max-width: 540px; } .work-stack-scene { width: min(32vw, 420px); } .work-intro-copy > p:not(.eyebrow) { font-size: 14px; max-width: 450px; } .project { grid-column: auto; padding: 0; } } @media screen and (max-width: 900px) { .work-section { width: calc(100vw - 36px); padding: 56px 0 65px; } .work-intro { min-height: 360px; padding: 26px; } .work-intro h2 { font-size: clamp(40px, 5.5vw, 48px); } .work-intro-copy { width: 49%; max-width: 49%; } .work-intro-copy > p:not(.eyebrow) { font-size: 13px; } .work-topics { gap: 6px; } .work-topics span { font-size: 10px; padding: 4px 8px; } .work-architecture { width: 50%; right: 0; } .work-stack-scene { width: min(330px, 100%); height: calc(100% - 60px); } .project { grid-column: auto; padding: 0; } .project-card-body { padding: 21px 22px 20px; } .work-detail-panel { grid-template-columns: 1fr; gap: 25px; padding: 32px; } } @media screen and (max-width: 600px) { .work-section { width: calc(100vw - 32px); padding: 42px 0 52px; } .work-intro { min-height: 0; flex-direction: column; align-items: flex-start; padding: 26px 25px 18px; --work-rise: 20px; } .work-intro:before { background: linear-gradient(180deg, rgba(var(--scene-rgb), 0.961) 0%, rgba(var(--scene-rgb), 0.91) 33%, rgba(var(--scene-rgb), 0.314) 65%, transparent 100%); } .work-intro-copy { width: 100%; max-width: 100%; } .work-intro .eyebrow { font-size: 10px; margin-bottom: 17px; } .work-intro h2 { font-size: clamp(43px, 10vw, 57px); } .work-intro-copy > p:not(.eyebrow) { max-width: 43ch; font-size: 12px; line-height: 1.55; margin-top: 14px; } .work-topics { margin-top: 14px; } .work-architecture { position: relative; width: 100%; height: 340px; right: auto; bottom: auto; margin-top: 18px; padding: 0; place-items: center; } .work-stack-scene { width: min(325px, 110%); height: calc(100% - 70px); } .work-terrain { width: 100%; height: 65%; left: 0; top: auto; bottom: 0; opacity: .8; object-position: 70% bottom; mask-image: linear-gradient(180deg, transparent, #000 48%); } .work-hud { opacity: .4; } .projects { --work-fade: 28px; gap: 13px; } .project-card-body { min-height: 350px; } .project-card-copy { margin-top: 24px; } .work-detail-panel { padding: 28px 22px; } .work-detail-close { top: 12px; right: 12px; } .work-detail-panel .project-copy { padding-right: 20px; } } @media print { .work-section { width: 100%; margin: 0; transform: none; padding: 24px 0; } .work-intro { min-height: 0; display: block; padding: 0; border: 0; background: none; color: #17191e; } .work-intro:before, .work-terrain, .work-architecture, .work-topics, .projects { display: none !important; } .work-intro h2 { font-size: 19pt; color: #17191e; } .work-intro-copy > p:not(.eyebrow) { font-size: 9pt; color: #454953; margin: 8px 0; } .work-detail-rail, .work-detail-rail[hidden], .work-detail-panel, .work-detail-panel[hidden] { display: block !important; } .work-detail-panel { color: #17191e; background: #fff; border: 0; border-top: 1px solid #ccc; border-radius: 0; padding: 14px 0; break-inside: avoid; } .work-detail-panel h3 { font-size: 13pt; } .work-detail-panel .project-copy > p:not(.eyebrow), .work-detail-panel .project-outcome > span { font-size: 9pt; color: #454953; } .work-detail-panel .architecture-flow { background: #fff; color: #17191e; padding: 10px; margin-top: 12px; } .work-detail-panel .architecture-flow figcaption, .work-detail-panel .architecture-flow li > span:last-child, .work-detail-panel .architecture-flow p { color: #454953; } .work-detail-close { display: none; } } .impact-feature { grid-column: 1 / -1; position: relative; isolation: isolate; overflow: hidden; padding: clamp(26px, 2.7vw, 40px); border: 1px solid var(--panel-line); border-radius: 20px; background: rgb(var(--scene-rgb)); color: #f4f5f8; --accent: #ff2639; --muted: #aeb8c6; --ink: #f4f5f8; --line: #aeb8c621; --card: rgb(var(--surface-rgb)); } .impact-terrain { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; } .impact-feature:after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--scene-rgb), 0.6), rgba(var(--scene-rgb), 0.467) 37%, transparent 70%); pointer-events: none; } .impact-feature .impact-caption { margin-bottom: 22px; } .impact-feature .impact-caption .eyebrow { font-size: 11px; letter-spacing: .08em; color: #d8dde5; } .impact-feature .eyebrow span { color: var(--accent); } .impact-feature .eyebrow span:first-child { margin-right: 12px; } .impact-feature .impact-content { width: 49%; } .impact-feature .impact-story-heading { font-size: clamp(29px, 3.3vw, 48px); line-height: 1.04; letter-spacing: -.045em; white-space: nowrap; margin: 0; } .impact-feature .impact-story-heading em { color: var(--accent); font-style: normal; } .impact-feature .impact-story-copy { max-width: none; margin-top: 18px; font-size: 14px; line-height: 1.55; } .impact-feature .impact-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; } .impact-feature .impact-legend > div { display: flex; align-items: flex-start; min-width: 0; padding: 14px 12px; gap: 13px; border: 1px solid #68778550; border-radius: 9px; background: rgba(var(--surface-rgb), 0.722); backdrop-filter: blur(7px); } .impact-feature .impact-direction { font-size: 40px; line-height: 1.2; color: var(--accent); font-weight: 300; } .impact-feature .impact-legend > div:last-child .impact-direction { color: #dbe0ed; } .impact-feature .impact-legend strong { display: block; font-weight: 500; font-size: 11px; line-height: 1.4; color: #e7eaf0; } .impact-feature .impact-legend b { display: block; font: 600 29px/1.3 var(--heading); letter-spacing: -.04em; color: var(--accent); margin-top: 4px; } .impact-feature .impact-legend > div:last-child b { color: #f4f5f8; } .impact-feature .impact-legend small { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 1px; } .impact-feature .impact-plot { max-width: none; margin: 8px 0 0; } .impact-feature .impact-endpoint rect { fill: rgba(var(--surface-rgb), 0.722); stroke: #ff263966; stroke-width: .6; } .impact-feature .impact-endpoint.reduction rect { stroke: #b5c1d266; } .impact-feature .impact-plot-grid text, .impact-feature .impact-axis-label { font-size: 9px; } .impact-feature .impact-comparison-note { margin-top: 2px; font: 11px/1.5 var(--font); } .impact-feature .impact-method { list-style: none; width: 82%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin: 16px 0 0; padding: 0; border: 0; } .impact-feature .impact-method li { display: flex; align-items: center; position: relative; gap: 10px; padding: 9px; border: 1px solid #66748140; border-radius: 8px; background: rgba(var(--surface-rgb), 0.722); } .impact-feature .impact-method li:not(:last-child):after { content: "→"; position: absolute; right: -23px; font-size: 20px; color: #aeb8c6; } .impact-feature .impact-method svg { flex: 0 0 32px; width: 32px; height: 32px; padding: 5px; border: 1px solid #68778540; border-radius: 5px; fill: none; stroke: var(--accent); stroke-width: 1.6; } .impact-feature .impact-method strong { display: block; color: #edf0f5; font: 500 11px/1.5 var(--font); } .impact-feature .impact-method small { display: block; font: 10px/1.5 var(--font); margin-top: 3px; } .impact-feature .impact-terrain { transform: translate3d(0, var(--impact-depth, 0px), 0) scale(1.045); transform-origin: center; } .impact-feature :is(.impact-caption, .impact-content, .impact-method) { position: relative; z-index: 1; } .impact-tracers { opacity: 0; pointer-events: none; transition: opacity .35s ease .65s; } .impact-feature.is-chart-visible .impact-tracers { opacity: 1; } .impact-tracer { fill: var(--accent); stroke: #fff; stroke-width: 1; filter: drop-shadow(0 0 4px var(--accent)); } .impact-tracer.reduction { fill: #dbe0ed; stroke: var(--card); filter: drop-shadow(0 0 4px #dbe0ed); } .impact-feature .impact-method.is-visible li { animation: impact-step-enter .65s ease-out both; } .impact-feature .impact-method.is-visible li:nth-child(2) { animation-delay: .17s; } .impact-feature .impact-method.is-visible li:nth-child(3) { animation-delay: .34s; } .impact-feature .impact-method.is-visible li:nth-child(4) { animation-delay: .51s; } .impact-feature .impact-method li { transition: border-color .25s ease, transform .25s ease; } .impact-feature .impact-method li:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-3px); } @keyframes impact-step-enter { from { opacity: .45; transform: translateY(10px); border-color: var(--accent); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .impact-feature .impact-terrain { transform: none; } .impact-tracers { display: none; } .impact-feature .impact-method.is-visible li { animation: none; } .impact-feature .impact-method li { transition: none; } .impact-feature .impact-method li:hover { transform: none; } } @media (max-width: 1050px) { .impact-feature .impact-content { width: 62%; } .impact-feature .impact-story-heading { font-size: clamp(28px, 4vw, 42px); } .impact-feature .impact-method { width: 100%; gap: 22px; } .impact-feature .impact-method li:not(:last-child):after { right: -19px; } .impact-feature .impact-method li { gap: 7px; } } @media (max-width: 720px) { .impact-feature { padding: 26px 20px; border-radius: 14px; } .impact-feature .impact-content { width: 100%; } .impact-feature .impact-story-heading { font-size: clamp(24px, 6.6vw, 42px); } .impact-feature .impact-story-copy { font-size: 12px; } .impact-feature .impact-legend { gap: 8px; } .impact-feature .impact-legend > div { padding: 12px 9px; gap: 8px; } .impact-feature .impact-direction { font-size: 28px; } .impact-feature .impact-legend strong, .impact-feature .impact-legend small { display: block; color: var(--muted); font-size: 10px; } .impact-feature .impact-legend b { font-size: 26px; } .impact-feature .impact-method { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .impact-feature .impact-method li:not(:last-child):after { content: none; } .impact-feature:after { background: rgba(var(--scene-rgb), 0.659); } .impact-terrain { object-position: 65% center; opacity: .6; } } @media print { .impact-feature { background: white; color: #111; padding: 16px; --ink: #111; --muted: #444; } .impact-terrain, .impact-feature:after { display: none; } .impact-feature .impact-content, .impact-feature .impact-method { width: 100%; } .impact-feature .impact-story-heading { font-size: 24pt; } .impact-feature .impact-legend > div, .impact-feature .impact-method li { background: transparent; } .impact-feature .impact-legend strong, .impact-feature .impact-legend > div:last-child b, .impact-feature .impact-method strong { color: #111; } .impact-feature .impact-plot { max-width: 440px; } } [data-theme="studio"] :is(.impact-feature, .work-section, .contact-section) { filter: grayscale(1); } [data-theme="studio"] :is(.impact-feature, .contact-section) { --accent: #f5f5f2; } [data-theme="studio"] :is(.work-intro h2 em, .work-intro .eyebrow) { color: #f5f5f2; } .connected-card { grid-column: 1 / -1; position: relative; isolation: isolate; overflow: hidden; padding: 40px; border: 1px solid var(--panel-line); border-radius: 20px; background: rgb(var(--scene-rgb)); color: #eef2f5; --accent: #ff293f; } .connected-backdrop, .connected-backdrop img, .connected-backdrop > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .connected-backdrop { z-index: -1; background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px); background-size: 70px 70px; } .connected-globe { object-fit: cover; object-position: 65% center; opacity: .9; } .connected-particles { object-fit: cover; mix-blend-mode: screen; opacity: .35; } .connected-backdrop:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--scene-rgb), 0.6), rgba(var(--scene-rgb), 0.2) 45%, transparent 75%); } .connected-content { position: relative; width: 72%; } .connected-content header { max-width: 490px; margin-bottom: 24px; } .signal-grid .connected-content .eyebrow { font: 11px/1.6 ui-monospace, monospace; letter-spacing: .08em; margin: 0 0 24px; } .connected-content .eyebrow span, .connected-content h3 em { color: var(--accent); font-style: normal; } .connected-content .eyebrow span:first-child { margin-right: 12px; } .connected-content h3 { font: 700 clamp(42px, 4.4vw, 62px)/1.03 var(--heading); letter-spacing: -.045em; margin: 0; } .connected-description { font-size: 16px; line-height: 1.6; color: #c3cfd5; margin: 18px 0 0; } .connected-glass { padding: 16px; border: 1px solid var(--panel-line); border-radius: 12px; background: rgba(var(--surface-rgb), 0.922); backdrop-filter: blur(8px); margin-top: 12px; } .connected-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } .connected-panel-heading h4 { font-size: 15px; font-weight: 600; margin: 0; } .connected-panel-heading > span { font: 9px/1.5 ui-monospace, monospace; letter-spacing: .1em; color: #b8c7d0; } .connected-card ul { list-style: none; padding: 0; margin: 0; } .connected-platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .connected-platforms li, .connected-industries li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 10px; border: 1px solid var(--panel-line); border-radius: 8px; background: rgba(var(--surface-rgb), 0.659); font-size: 12px; line-height: 1.4; } .connected-platforms img { width: 58px; height: 56px; object-fit: contain; flex: 0 0 58px; border-radius: 9px; } .platform-monogram { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; color: #36a4ff; font: 700 13px var(--heading); } .connected-card .connected-capabilities { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; } .connected-capabilities li { padding: 6px 9px; border: 1px solid var(--panel-line); border-radius: 5px; font-size: 10px; color: #c3cfd5; } .connected-industries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; } .connected-industries li { padding: 6px 12px; gap: 16px; } .connected-industries img { flex: 0 0 24px; width: 24px; height: 24px; } [data-theme="studio"] .connected-card { filter: grayscale(1); --accent: #f5f5f2; } @media (prefers-reduced-motion: no-preference) { .connected-card.is-chart-visible .connected-globe { animation: connected-turn 48s ease-in-out infinite alternate; } .connected-card.is-chart-visible .connected-signal { animation: connected-transmit 6s linear infinite; animation-delay: var(--route-delay); } .connected-card.is-chart-visible .connected-particles { animation: connected-drift 11s ease-in-out infinite alternate-reverse; } } @keyframes connected-turn { from { transform: rotate(-3deg) scale(1.04); } to { transform: rotate(3deg) scale(1.04); } } @keyframes connected-transmit { from { stroke-dashoffset: 108; } to { stroke-dashoffset: 0; } } .connected-globe { transform-origin: 79% 50%; } .connected-network { color: var(--accent); } .connected-route { stroke-width: 1; opacity: .3; } .connected-signal { stroke-width: 2.5; stroke-dasharray: 5 103; stroke-dashoffset: 108; } .connected-card:not(.connected-active) :is(.connected-globe, .connected-signal, .connected-particles) { animation-play-state: paused; } @keyframes connected-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(3px, -3px, 0); } } @media (max-width: 1050px) { .connected-card { padding: 28px; } .connected-content { width: 86%; } .connected-platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .connected-card { padding: 26px 20px; border-radius: 14px; } .connected-content { width: 100%; } .connected-content h3 { font-size: 40px; } .connected-description { font-size: 13px; } .connected-glass { padding: 12px; } .connected-platforms li { gap: 9px; padding: 7px; font-size: 11px; } .connected-platforms img, .platform-monogram { width: 46px; height: 44px; flex-basis: 46px; } .connected-panel-heading h4 { font-size: 13px; } .connected-panel-heading > span { font-size: 8px; } .connected-industries { grid-template-columns: 1fr; } .connected-globe { object-position: 72% top; } .connected-backdrop { opacity: .45; } .connected-particles { animation: none !important; } } @media print { .connected-card { padding: 16px; background: white; color: #111; --accent: #111; } .connected-backdrop { display: none; } .connected-content { width: 100%; } .connected-content h3 { font-size: 24pt; } .connected-description, .connected-capabilities li, .connected-panel-heading > span { color: #444; } .connected-glass, .connected-platforms li, .connected-industries li { background: transparent; } } .beyond-card { grid-column: 1 / -1; position: relative; isolation: isolate; overflow: hidden; padding: 36px 28px 28px; border: 1px solid var(--panel-line); border-radius: 20px; background: rgb(var(--scene-rgb)); color: #eef2f5; --accent: #ff304b; } .beyond-backdrop, .beyond-backdrop > * { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .beyond-exact-landscape { inset: 0 auto auto 0 !important; width: 100% !important; height: auto !important; opacity: .92; object-fit: contain !important; mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%); } .beyond-backdrop { z-index: -1; } .beyond-backdrop img { object-fit: cover; } .beyond-backdrop:after { content: ""; position: absolute; z-index: 4; inset: 0; background: linear-gradient(90deg, rgba(var(--scene-rgb), 0.4), rgba(var(--scene-rgb), 0.094) 58%, transparent), linear-gradient(0deg, rgba(var(--scene-rgb), 0.333), transparent 70%); } .beyond-content { position: relative; } .signal-grid .beyond-heading .eyebrow { font: 11px/1.6 ui-monospace, monospace; letter-spacing: .08em; margin: 0 0 20px; } .beyond-heading .eyebrow span, .beyond-heading em { color: var(--accent); font-style: normal; } .beyond-heading h3 { margin: 0; font: 700 clamp(34px, 3.7vw, 50px)/1.1 var(--heading); letter-spacing: -.045em; } .beyond-description { max-width: 560px; margin: 16px 0 0; font-size: 14px; line-height: 1.65; color: #c3cfd5; } .beyond-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 30px; } .beyond-panel { min-width: 0; padding: 22px; border: 1px solid var(--panel-line); border-radius: 12px; background: linear-gradient(150deg, rgba(var(--surface-rgb), 0.333), transparent 45%), rgba(var(--surface-rgb), 0.922); backdrop-filter: blur(8px); transition: border-color .25s; } .beyond-panel:hover { border-color: #a5b3be99; } .beyond-panel header { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 14px; } .beyond-icon { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #ff304b66; border-radius: 10px; background: #ff304b08; transition: box-shadow .25s; } .beyond-panel:hover .beyond-icon { box-shadow: 0 0 18px #ff304b33; } .beyond-icon img { width: 30px; height: 30px; } .beyond-panel h4 { margin: 0; font: 600 18px/1.3 var(--heading); letter-spacing: -.02em; } .beyond-panel p { margin: 10px 0 0; color: #bdc7d0; font-size: 12px; line-height: 1.65; } .beyond-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; list-style: none; padding: 16px 0 0; margin: 20px 0 0; border-top: 1px solid var(--panel-line); } .beyond-capabilities li { position: relative; padding: 9px 0 9px 21px; border-left: 1px solid var(--panel-line); color: #d0d7dd; font-size: 12px; line-height: 1.5; } .beyond-capabilities li:before { content: ""; position: absolute; left: 10px; top: 15px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #ff304b12; } .beyond-capabilities li:after { content: ""; position: absolute; left: 0; top: 17px; width: 10px; border-top: 1px solid var(--panel-line); } [data-theme="studio"] .beyond-card { filter: grayscale(1); --accent: #f5f5f2; } [data-theme="studio"] .beyond-icon img { filter: brightness(2.4); } @media (prefers-reduced-motion: no-preference) { .beyond-card.is-chart-visible .beyond-heading { animation: beyond-reveal .7s ease-out both; } .beyond-card.is-chart-visible .beyond-panel { animation: beyond-reveal .7s ease-out var(--panel-delay) both; } .beyond-card.is-chart-visible .beyond-exact-landscape { animation: beyond-landscape-enter 1s ease-out both; } } @keyframes beyond-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes beyond-landscape-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: .92; transform: translateY(0); } } @media (max-width: 1050px) { .beyond-card { padding: 28px 22px; } .beyond-panels { gap: 14px; } .beyond-panel { padding: 18px; } .beyond-panel header { grid-template-columns: 1fr; } .beyond-panel h4 { font-size: 17px; } .beyond-capabilities { gap: 0 10px; } } @media (max-width: 720px) { .beyond-card { padding: 26px 20px; border-radius: 14px; } .beyond-panels { grid-template-columns: 1fr; margin-top: 24px; } .beyond-panel header { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; } .beyond-panel header > div { display: contents; } .beyond-panel p { grid-column: 1 / -1; margin-top: 2px; } .beyond-icon { width: 44px; height: 44px; } .beyond-heading h3 { font-size: clamp(29px, 7.7vw, 40px); } .beyond-description { font-size: 13px; } .beyond-backdrop { opacity: .45; } .beyond-exact-landscape { opacity: .55; } } @media (max-width: 440px) { .beyond-capabilities { grid-template-columns: 1fr; } } @media print { .beyond-card { background: white; color: #111; padding: 16px; --accent: #111; } .beyond-backdrop { display: none; } .beyond-description, .beyond-panel p, .beyond-capabilities li { color: #444; } .beyond-panel { background: transparent; break-inside: avoid; } .beyond-heading h3 { font-size: 24pt; } } .skills-section { position: relative; left: 50%; width: min(2000px, calc(100vw - 48px)); transform: translateX(-50%); isolation: isolate; overflow: hidden; grid-template-columns: minmax(250px, .8fr) minmax(0, 2fr); gap: clamp(34px, 4vw, 64px); padding: 48px 0 54px; } .toolkit-wave { position: absolute; z-index: -1; left: -2%; bottom: -2%; width: 104%; height: auto; max-width: none; opacity: .58; pointer-events: none; mix-blend-mode: screen; mask-image: radial-gradient(ellipse 78% 72% at 50% 62%, #000 32%, rgba(0, 0, 0, .82) 57%, rgba(0, 0, 0, .3) 76%, transparent 100%); } .skills-section > .section-heading, .skills-section > .section-body { position: relative; z-index: 1; } .skills-section .section-heading { align-self: start; } .skills-section .section-heading .eyebrow { margin-bottom: 24px; font-size: 15px; } .skills-section .section-heading h2 { font-size: clamp(48px, 3.55vw, 72px); line-height: 1.05; letter-spacing: -.055em; } .toolkit-intro { margin: 22px 0 0; max-width: 560px; font-size: clamp(16px, .98vw, 20px); line-height: 1.58; color: var(--muted); } .skills-section .section-body { min-width: 0; } .skills-section .skills-grid { align-items: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .skills-section .toolkit-card { min-width: 0; padding: 24px 22px; border: 1px solid var(--panel-line); border-radius: 12px; background: linear-gradient(145deg, rgba(var(--surface-rgb), 0.722), rgba(var(--surface-rgb), 0.925) 62%); box-shadow: inset 0 1px rgba(255, 255, 255, .035); backdrop-filter: blur(8px); transition: border-color .25s, box-shadow .25s; } .skills-section .toolkit-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: inset 0 1px rgba(255, 255, 255, .05); } .skills-section .toolkit-card header { min-height: 132px; display: grid; grid-template-columns: 68px minmax(0, 1fr); align-content: start; gap: 16px; } .toolkit-icon { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid var(--accent); border-radius: 12px; color: var(--accent); box-shadow: inset 0 0 14px #ff263920; } .toolkit-icon svg { width: 38px; height: 38px; } .skills-section .toolkit-card h3 { margin: 2px 0 0; font: 600 19px/1.35 var(--heading); } .skills-section .toolkit-card p { margin: 8px 0 0; color: #b8c1c9; font-size: 13px; line-height: 1.55; } .skills-section .toolkit-card ul { display: grid; gap: 17px; margin: 10px 0 0; padding: 17px 0 0; border-top: 1px solid #70808b3b; list-style: none; } .skills-section .toolkit-card li { position: relative; margin: 0; padding-left: 22px; color: #d0d6dc; font-size: 14px; line-height: 1.5; } .skills-section .toolkit-card li:before { content: ""; position: absolute; top: .48em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px #ff3344a0; } .skills-section .toolkit-card .toolkit-icon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 8px 6px; margin-top: 8px; padding-top: 12px; } .skills-section .toolkit-card .toolkit-icon-grid li { display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; padding: 0; color: #c9d0d7; font-size: 9px; line-height: 1.2; text-align: center; } .skills-section .toolkit-card .toolkit-icon-grid li:before { display: none; } .toolkit-icon-grid img { display: block; width: min(48px, 100%); height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 2px 2px #0005); } .skills-section .education { margin-top: 18px; padding: 19px 22px; border: 1px solid var(--panel-line); border-radius: 12px; background: rgba(var(--surface-rgb), 0.91); backdrop-filter: blur(8px); } .skills-section .education > .eyebrow { margin: 0 0 10px; color: #d0d6dc; font-size: 11px; } .skills-section .credential { padding: 14px 18px; border-color: var(--panel-line); background: rgba(var(--surface-rgb), 0.741); } .skills-section .credential-icon { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid var(--accent); border-radius: 12px; color: var(--accent); font-size: 32px; } .skills-section .credential p { font-size: 13px; } .skills-section .credential h3 { font-size: 22px; } [data-theme="studio"] .skills-section { filter: grayscale(1); } @media (max-width: 1050px) { .skills-section { left: auto; width: auto; transform: none; grid-template-columns: 1fr; gap: 26px; padding: 50px 0; } .skills-section .section-heading { max-width: 720px; } .toolkit-intro { max-width: 560px; margin-top: 14px; } .skills-section .section-heading h2 { font-size: clamp(42px, 6.5vw, 60px); } .skills-section .skills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skills-section .toolkit-card header { grid-template-columns: 56px minmax(0, 1fr); min-height: 112px; } .skills-section .skills-grid { gap: 10px; } .skills-section .toolkit-card { padding: 20px 18px; } .skills-section .toolkit-icon { width: 56px; height: 56px; } .skills-section .toolkit-icon svg { width: 32px; height: 32px; } .skills-section .toolkit-card h3 { font-size: 16px; } .skills-section .toolkit-card p { font-size: 11px; } .skills-section .toolkit-card li { font-size: 12px; } .toolkit-icon-grid img { width: min(46px, 100%); } } @media (max-width: 720px) { .toolkit-wave { width: 150%; left: -25%; opacity: .34; mask-image: radial-gradient(ellipse 72% 70% at 50% 62%, #000 28%, rgba(0, 0, 0, .72) 56%, transparent 100%); } .skills-section { padding: 42px 0; } .skills-section .section-heading .eyebrow { font-size: 11px; margin-bottom: 15px; } .toolkit-intro { font-size: 14px; } .skills-section .skills-grid { grid-template-columns: 1fr; gap: 12px; } .skills-section .toolkit-card { padding: 18px; } .skills-section .toolkit-card header { grid-template-columns: 46px minmax(0, 1fr); min-height: 0; } .skills-section .toolkit-icon { width: 46px; height: 46px; } .skills-section .toolkit-icon svg { width: 26px; height: 26px; } .skills-section .toolkit-card h3 { font-size: 15px; } .skills-section .toolkit-card p { font-size: 11px; } .skills-section .toolkit-card ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .skills-section .toolkit-card li { font-size: 11px; } .toolkit-icon-grid img { width: min(46px, 100%); } .skills-section .credential-icon { width: 46px; height: 46px; } .skills-section .credential h3 { font-size: 17px; } } @media (max-width: 420px) { .skills-section .toolkit-card ul { grid-template-columns: 1fr; } } @media print { .toolkit-wave { display: none; } .skills-section .toolkit-card, .skills-section .education { background: white; border-color: #999; box-shadow: none; } .skills-section .toolkit-card p, .skills-section .toolkit-card li { color: #444; } } .career-chart { --line: rgba(186, 199, 213, .14); --career-muted: #aab4c0; --career-accent: var(--accent); position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px, 2.8vw, 38px); border-color: rgba(228, 80, 90, .28); border-radius: 20px; background: rgb(var(--scene-rgb)); color: #eef2f6; box-shadow: inset 0 1px rgba(255, 255, 255, .07), inset 0 0 44px rgba(255, 45, 60, .035), 0 24px 70px rgba(0, 0, 0, .25); } .career-background { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .8; pointer-events: none; } .career-chart::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(var(--scene-rgb), .75), rgba(var(--scene-rgb), .5) 48%, rgba(var(--scene-rgb), .42)), linear-gradient(0deg, rgba(var(--scene-rgb), .78), transparent 34%, rgba(var(--scene-rgb), .35)); pointer-events: none; } .career-chart::after { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse 54% 26% at 78% 56%, color-mix(in srgb, var(--career-accent) 11%, transparent), transparent 75%), radial-gradient(ellipse 60% 30% at 18% 92%, color-mix(in srgb, var(--career-accent) 9%, transparent), transparent 82%), repeating-linear-gradient(0deg, rgba(240, 245, 250, .012) 0 1px, transparent 1px 4px); pointer-events: none; } .career-chart > :not(.career-background) { position: relative; z-index: 3; } .career-chart :is(.career-axis, .chart-count, .chart-caption) { color: var(--career-muted); } .career-chart .focus-filter { color: #adb7c2; } .career-chart .focus-filter:hover { color: #fff; border-color: rgba(213, 223, 234, .28); background: rgba(255, 255, 255, .035); } .career-chart .focus-filter[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 58%, transparent); background: color-mix(in srgb, var(--accent) 11%, transparent); } .career-axis, .career-row { grid-template-columns: minmax(250px, .34fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 34px); } .career-row { min-height: 92px; padding: 12px 10px; border-color: rgba(188, 202, 218, .11); border-radius: 9px; transition: background .22s ease, box-shadow .22s ease; } .career-row:hover, .career-row:focus-visible { background: linear-gradient(90deg, color-mix(in srgb, var(--career-accent) 13%, transparent), color-mix(in srgb, var(--career-accent) 4%, transparent) 58%, transparent); box-shadow: inset 2px 0 color-mix(in srgb, var(--career-accent) 62%, transparent); } .career-label { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 12px; } .career-label > .career-badge { display: block; width: 54px; height: 54px; margin: 0; color: inherit; line-height: 0; opacity: .9; transition: opacity .2s ease, transform .2s ease, filter .2s ease; } .career-badge img { display: block; width: 100%; height: 100%; object-fit: contain; } .career-label > .career-label-copy { display: block; min-width: 0; margin: 0; color: inherit; } .career-label-copy strong { overflow-wrap: anywhere; color: #eef2f6; font-size: 12px; font-weight: 620; } .career-label-copy > .career-company { display: block; margin-top: 3px; overflow: hidden; color: var(--career-muted); font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; } .career-topics { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; } .career-topics > span { padding: 2px 6px; border: 1px solid rgba(196, 209, 223, .15); border-radius: 4px; background: rgba(var(--surface-rgb), .66); color: #b8c1cc; font: 8px/1.35 ui-monospace, monospace; white-space: nowrap; } .career-row:hover .career-badge, .career-row:focus-visible .career-badge { opacity: 1; transform: scale(1.04); filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 34%, transparent)); } .career-track { border-color: rgba(188, 202, 218, .14); } .career-bar { height: 9px; border-radius: 999px; background: linear-gradient(90deg, #969da5b8, #f0f3f5b8 52%, #858f99b8); box-shadow: 0 0 12px rgba(195, 209, 222, .12); } .career-bar.current { background: linear-gradient(90deg, color-mix(in srgb, var(--career-accent) 57%, #151b21), color-mix(in srgb, var(--career-accent) 84%, #eef2f6) 22%, color-mix(in srgb, var(--career-accent) 92%, #eef2f6) 52%, color-mix(in srgb, var(--career-accent) 75%, #151b21) 82%, color-mix(in srgb, var(--career-accent) 56%, #151b21)); box-shadow: 0 0 15px color-mix(in srgb, var(--career-accent) 23%, transparent); } .career-bar::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border: 2px solid #071016; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 58%, transparent); opacity: 0; transform: translateY(-50%) scale(.65); transition: opacity .18s ease, transform .18s ease; } .career-bar::after { right: -4px; } .career-bar.current::after { top: 50%; right: -4px; width: 8px; height: 8px; opacity: 1; transform: translateY(-50%); animation: career-current-pulse 2.8s ease-in-out infinite; } .career-row:hover .career-bar:not(.current)::after, .career-row:focus-visible .career-bar:not(.current)::after { opacity: 1; transform: translateY(-50%) scale(1); } .career-row:hover .career-bar:not(.current), .career-row:focus-visible .career-bar:not(.current) { background: linear-gradient(90deg, #a7abb1cc, #e9dde0cc 50%, #bcc4cacc); box-shadow: 0 0 13px rgba(210, 206, 211, .18); } .career-row:hover .career-bar.current, .career-row:focus-visible .career-bar.current { background: linear-gradient(90deg, color-mix(in srgb, var(--career-accent) 58%, #151b21), color-mix(in srgb, var(--career-accent) 87%, #eef2f6) 45%, color-mix(in srgb, var(--career-accent) 58%, #151b21)); box-shadow: 0 0 17px color-mix(in srgb, var(--career-accent) 29%, transparent); } .career-row:hover .career-bar.current::after, .career-row:focus-visible .career-bar.current::after { opacity: 1; transform: translateY(-50%); } .career-period { bottom: 17px; padding: 3px 6px; border: 1px solid rgba(188, 202, 218, .14); background: rgba(5, 10, 14, .9); color: #eef2f6; } .career-chart .career-period { opacity: 0; visibility: hidden; } .career-chart .career-row:hover .career-period, .career-chart .career-row:focus-visible .career-period { opacity: 1; visibility: visible; } @media screen { .career-chart .career-bar.current .career-period { left: 0; right: auto; top: 18px; bottom: auto; } } .career-chart .chart-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 15px; border-top: 1px solid rgba(188, 202, 218, .15); font-size: 10px; } .chart-legend { display: inline-flex; align-items: center; gap: 17px; } .chart-key--previous i { background: #d3dbe1; box-shadow: 0 0 8px rgba(222, 234, 244, .17); } .chart-key--current i { background: var(--career-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--career-accent) 45%, transparent); } @keyframes career-current-pulse { 50% { opacity: .62; transform: translateY(-50%) scale(1.35); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 72%, transparent); } } [data-theme="studio"] .career-background, [data-theme="studio"] .career-badge img { filter: grayscale(1); } .career-section > .work-heading { position: relative; padding: 5px 0 16px; border-bottom: 1px solid rgba(186, 199, 213, .15); } .career-section > .work-heading::after { content: ""; position: absolute; right: 0; bottom: -1px; width: min(32%, 300px); height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent); } .career-section > .work-heading .section-note { position: relative; max-width: 320px; padding: 14px 18px; border-left: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); border-radius: 0 7px 7px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent); color: #c3cbd4; font-size: 14px; line-height: 1.55; } @media (max-width: 1000px) { .career-axis, .career-row { grid-template-columns: minmax(210px, .38fr) minmax(0, 1fr); gap: 18px; } .career-label { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; } .career-label > .career-badge { width: 48px; height: 48px; } } @media (max-width: 720px) { .career-chart { padding: 20px 16px; } .career-axis, .career-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } .career-axis > span { display: none; } .career-axis { padding-left: 0; margin-top: 4px; } .career-row { min-height: 0; padding: 13px 10px; } .career-label { grid-template-columns: 44px minmax(0, 1fr); } .career-label > .career-badge { width: 44px; height: 44px; } .career-label-copy strong { font-size: 11px; } .career-label-copy > .career-company { font-size: 9px; } .career-topics > span { font-size: 7px; } .career-track { height: 30px; } .career-bar { top: 12px; } .career-section > .work-heading .section-note { max-width: none; margin-top: 14px; } .career-chart .chart-caption { align-items: flex-start; flex-direction: column; } .chart-legend { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { .career-bar.current::after { animation: none; } .career-label > .career-badge, .career-bar::after { transition: none; } } @media print { .career-background, .career-chart::before { display: none; } .career-badge img { filter: grayscale(1); } } .flow-transition { height: 44px; position: relative; opacity: .48; } .flow-transition:before, .flow-transition:after { content: ""; position: absolute; width: 28%; height: 20px; border: solid var(--accent); } .flow-transition:before { left: 7%; border-width: 0 0 1px 1px; } .flow-transition:after { right: 8%; bottom: 0; width: 15%; border-width: 1px 1px 0 0; } .flow-transition--flip { transform: scaleX(-1); } .work-section { position: relative; } .impact-work-bridge { position: absolute; inset: 0 0 auto; height: var(--page-gap, 72px); pointer-events: none; color: var(--accent); opacity: .78; } .impact-work-bridge svg { display: block; width: 100%; height: 100%; overflow: visible; } .impact-work-bridge path { fill: none; vector-effect: non-scaling-stroke; } .impact-work-bridge .bridge-trace { stroke: currentColor; stroke-width: 1; opacity: .38; } .impact-work-bridge .bridge-faint { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 8; opacity: .23; } .impact-work-bridge .bridge-current { stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 24 520; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px currentColor); animation: bridge-charge 7s linear infinite; } .impact-work-bridge .bridge-core { stroke: currentColor; stroke-width: 1.2; filter: drop-shadow(0 0 6px currentColor); } .impact-work-bridge .bridge-heart, .impact-work-bridge .bridge-node { fill: currentColor; filter: drop-shadow(0 0 5px currentColor); } .impact-work-bridge .bridge-heart { animation: bridge-breathe 4s ease-in-out infinite; } @keyframes bridge-charge { to { stroke-dashoffset: -544; } } @keyframes bridge-breathe { 50% { opacity: .4; } } @media(max-width:600px) { .impact-work-bridge .bridge-faint { opacity: .1; } .impact-work-bridge .bridge-trace { opacity: .25; } } @media(prefers-reduced-motion:reduce) { .impact-work-bridge .bridge-current, .impact-work-bridge .bridge-heart { animation: none; } } @media print { .impact-work-bridge { display: none; } } @media screen { :root { --page-gap: clamp(44px, 5vw, 72px); --panel-radius: 20px; } .wrap { max-width: 1480px; padding-inline: clamp(20px, 3vw, 40px); } .section { padding-block: var(--page-gap); } .about-copy { max-width: 72ch; } .career-section { padding-block: var(--page-gap) 0; border-bottom: 0; } .career-section > .work-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; } .career-section > .work-heading .eyebrow { margin-bottom: 10px; } .career-section > .work-heading .section-note { margin: 0; } #experience { padding-block: var(--page-gap); border-bottom: 0; } .expertise-section .signal-grid { margin-top: 0; gap: 24px; } .work-section { width: 100%; margin-left: 0; transform: none; padding-block: var(--page-gap) 0; border-bottom: 0; } .work-intro, .always-curious, .contact-section { border-radius: var(--panel-radius); } .skills-section { left: auto; width: 100%; transform: none; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: var(--page-gap) 0; border-bottom: 0; } .skills-section > .section-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; column-gap: 48px; max-width: none; } .skills-section .section-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 14px; font-size: 11px; } .skills-section .section-heading h2 { font-size: clamp(36px, 3.6vw, 52px); } .skills-section .toolkit-intro { margin: 0; max-width: 54ch; font-size: 14px; line-height: 1.7; } .skills-section .skills-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; } .skills-section .toolkit-card header { min-height: 0; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; margin-bottom: 22px; } .skills-section .toolkit-icon { width: 48px; height: 48px; } .skills-section .toolkit-icon svg { width: 28px; height: 28px; } .skills-section .toolkit-card h3 { font-size: 18px; } .skills-section .toolkit-card p { font-size: 12px; } .skills-section .toolkit-card li { font-size: 13px; } .always-curious { left: auto; width: 100%; transform: none; margin-top: var(--page-gap); padding: clamp(24px, 3vw, 40px); } .always-curious.reveal { transform: translateY(20px); } .always-curious.reveal.is-visible, .always-curious.reveal:focus-within { transform: none; } .curiosity-header h2 { color: #f1f2f5; } .always-curious .learning-note, .always-curious .curiosity-header .eyebrow { color: #b5bdc9; } .always-curious .github-reference img { filter: invert(1); } [data-theme="studio"] .always-curious { filter: grayscale(1); } .contact-section { margin-block: var(--page-gap) 32px; } .footer { padding-bottom: 32px; } } @media screen { html { scroll-padding-top: 100px; } .header { position: sticky; top: 0; z-index: 100; background: var(--paper); padding-block: 14px; } .about-section { border-bottom: 0; } .proof-section { padding: 8px 0; } .proof-section .impact-panel { margin: 0; border-radius: var(--panel-radius); } .career-section { padding-top: var(--page-gap); } .career-chart { padding-block: 24px; } .career-row { min-height: 76px; padding-block: 8px; } .career-label-copy > .career-company { font-size: 11px; } .career-topics > span { font-size: 10px; } .career-current { position: absolute; top: 12px; right: 10px; z-index: 2; padding: 4px 7px; border: 1px solid var(--accent); color: var(--accent); font: 9px/1.2 ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; } .chart-key--previous i { background: transparent; border: 1px solid #d3dbe1; box-shadow: none; } .chart-key--current i { border-radius: 2px; } .earlier-roles { border-block: 1px solid var(--line); margin-top: 20px; } .earlier-roles > summary { cursor: pointer; padding: 20px 0; font-size: 16px; font-weight: 600; } .earlier-roles > summary span { display: block; padding-top: 5px; color: var(--muted); font-size: 12px; font-weight: 400; } .earlier-roles > div { padding-top: 28px; } .role-key-outcomes { padding-bottom: 12px; } .role-key-outcomes li { max-width: 75ch; } .role-topic > .tags { padding-block: 16px; } .project-open { width: 44px; height: 44px; } .beyond-backdrop:after { background: linear-gradient(90deg, rgba(var(--scene-rgb), 0.902), rgba(var(--scene-rgb), 0.4) 52%, transparent), linear-gradient(0deg, rgba(var(--scene-rgb), 0.333), transparent 70%); } .always-curious .repo-reference { min-height: 152px; } .repo-copy > span { font-size: 10px; } .repo-copy small { font-size: 12px; } .skills-section .toolkit-card .toolkit-icon-grid li { font-size: 11px; } } @media screen and (min-width: 1051px) { .skills-section .skills-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, .8fr); } .skills-section .toolkit-card .toolkit-icon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; } .always-curious .interest-group--hobby { display: flex; flex-direction: column; } .always-curious .interest-group--hobby ul { flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(52px, auto)); align-content: space-evenly; margin-block: 8px 0; } } @media screen and (max-width: 720px) { html { scroll-padding-top: 84px; } .hero { padding-block: 40px; gap: 28px; } .career-label-copy strong { font-size: 13px; } .career-label-copy > .career-company { font-size: 11px; } .career-topics { flex-wrap: wrap; } .career-topics > span { font-size: 10px; } .career-row { padding-inline: 6px; padding-bottom: 30px; } .career-row.current-role .career-label-copy { padding-right: 76px; } .career-mobile-date { display:block;position:absolute;left:auto;right:16px;bottom:8px;background:#050a0e;font-size:11px;opacity:0;pointer-events:none } .career-track:hover + .career-mobile-date,.career-row.is-period-visible .career-mobile-date { opacity:1 } .career-chart .focus-filter { min-height: 44px; } .career-chart .career-period { display: none; } .always-curious .repo-references { grid-template-columns: 1fr; } .always-curious .repo-reference:nth-child(n) { min-height: 145px; } .always-curious .interest-group li { font-size: 13px; } .repo-action { width: 44px; height: 44px; } } @media print { .earlier-roles > summary { display: none; } } @media screen and (min-width: 721px) and (max-width: 1050px) { .skills-section .skills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skills-section .toolkit-card:last-child { grid-column: 1 / -1; } .skills-section .toolkit-card:last-child ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media screen and (max-width: 720px) { .career-section > .work-heading { display: block; } .career-section > .work-heading .section-note { margin-top: 10px; } .expertise-section .signal-grid { gap: 18px; } .skills-section > .section-heading { grid-template-columns: 1fr; gap: 14px; } .skills-section .section-heading .eyebrow { margin-bottom: 0; } .skills-section .skills-grid { grid-template-columns: 1fr; gap: 14px; } .skills-section .toolkit-card header { margin-bottom: 16px; } .always-curious { padding: 24px 18px; } .always-curious .repo-references { grid-template-columns: 1fr; } .always-curious .interest-group--hobby ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-section { margin-bottom: 24px; } } @media screen and (min-width: 1280px) { .skills-section .toolkit-card .toolkit-icon-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } } @media screen { :root { --scene-strength: .62; --scene-base: rgb(var(--scene-rgb)); --scene-edge-fade: radial-gradient(ellipse 72% 76% at 56% 52%, #000 24%, rgba(0, 0, 0, .8) 51%, rgba(0, 0, 0, .35) 74%, transparent 100%); } .impact-feature, .work-intro, .career-chart, .connected-card, .beyond-card, .always-curious, .contact-section { background-color: var(--scene-base); border-color: var(--panel-line); } .impact-terrain, .career-background, .connected-backdrop, .beyond-backdrop, .curiosity-background { mask-image: var(--scene-edge-fade); } .impact-terrain { opacity: calc(var(--scene-strength) * .9); } .work-terrain { opacity: calc(var(--scene-strength) * .85); mask-image: var(--scene-edge-fade); } .career-background { opacity: calc(var(--scene-strength) * .85); } .connected-backdrop { opacity: calc(var(--scene-strength) * .9); } .beyond-backdrop { opacity: var(--scene-strength); } .toolkit-wave { opacity: calc(var(--scene-strength) * .55); } .curiosity-background { opacity: calc(var(--scene-strength) * .8); } .curiosity-effects { opacity: .2; } .contact-section > .contact-orbit { opacity: calc(var(--scene-strength) * .8); } .work-intro { background-image: linear-gradient(#ffffff03 1px, transparent 1px), linear-gradient(90deg, #ffffff03 1px, transparent 1px); } .career-chart, .always-curious { box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 12px 40px rgba(0, 0, 0, .12); } } @media screen and (max-width: 720px) { :root { --scene-strength: .48; } .work-terrain { mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .65) 38%, #000 66%, transparent); } } @media screen and (max-width: 720px) { .role-metric:last-child:nth-child(odd) { grid-column: 1 / -1; } } .impact-sea{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;mask-image:linear-gradient(90deg,transparent 12%,#0008 48%,#000 66%),linear-gradient(transparent,#000 15%,#000 85%,transparent);mask-composite:intersect} .impact-feature.has-impact-sea .impact-terrain{opacity:0} @media(max-width:720px){.impact-sea{opacity:.55;mask-image:linear-gradient(transparent 8%,#000 45%,#000 85%,transparent)}} @media print{.impact-sea{display:none}} .about-section{position:relative;isolation:isolate} .about-section:before{content:"";position:absolute;top:18%;bottom:15%;left:20%;right:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 60% 50%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 65%)} .about-section.is-chart-visible .about-copy>p{animation:about-arrive .7s ease-out both} .about-section.is-chart-visible .about-copy>p+p{animation-delay:.14s} .about-section.is-chart-visible .about-note{animation:about-arrive .7s ease-out .28s both} .about-section.is-chart-visible .mini-mark{animation:about-signal 1.1s ease-out .35s both} @keyframes about-arrive{from{opacity:.25;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} @keyframes about-signal{from{opacity:.25;transform:rotate(-80deg) scale(.8)}to{opacity:1;transform:rotate(0) scale(1)}} @media(prefers-reduced-motion:reduce){.about-section.is-chart-visible .about-copy>p,.about-section.is-chart-visible .about-note,.about-section.is-chart-visible .mini-mark{animation:none}} @media print{.about-section:before{display:none}}