/*
 * Greg Lapinski — personal site
 * A dependency-free visual system built for local files and static hosting.
 */

:root {
    --ink: #07111d;
    --ink-soft: #0b1b2a;
    --ink-lift: #102437;
    --snow: #f4f5f2;
    --snow-muted: #aab6c4;
    --ice: #91c5f3;
    --blue: #6b8eff;
    --signal: #ff5b45;
    --signal-bright: #ff745d;
    --lime: #c8ff4d;
    --line: rgba(191, 218, 238, 0.16);
    --line-strong: rgba(191, 218, 238, 0.3);
    --paper: #ebeae4;
    --paper-ink: #111a21;
    --shell: min(1680px, calc(100vw - 96px));
    --header-h: 86px;
    --radius: 26px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ui-label-size: clamp(14px, .8vw, 16px);
    --ui-caption-size: clamp(14px, .8vw, 16px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scrollbar-color: var(--signal) var(--ink);
    scrollbar-width: thin;
    overflow-x: clip;
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: clip;
    background: var(--ink);
    color: var(--snow);
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
    opacity: .035;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
}

::selection { color: var(--ink); background: var(--lime); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--signal); border-radius: 999px; }

a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }

.shell { width: var(--shell); margin-inline: auto; }
.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; }

.skip-link {
    position: fixed;
    z-index: 20000;
    top: 12px;
    left: 12px;
    padding: 12px 18px;
    color: var(--ink);
    background: var(--lime);
    border-radius: 999px;
    transform: translateY(-160%);
    transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.scroll-progress {
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    pointer-events: none;
}
.scroll-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--signal), var(--signal-bright), var(--lime));
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

.cursor-glow {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(82, 135, 222, .08), rgba(7, 17, 29, 0) 68%);
    transform: translate3d(calc(var(--cursor-x, 50vw) - 50%), calc(var(--cursor-y, 50vh) - 50%), 0);
    transition: opacity .4s ease;
}

/* Entry sequence */
.boot {
    position: fixed;
    z-index: 15000;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 15px;
    color: var(--snow);
    background: var(--ink);
    transition: opacity .7s var(--ease), visibility .7s;
    animation: boot-failsafe .45s var(--ease) .72s forwards;
}
.boot__mark { font-size: clamp(54px, 7vw, 110px); font-weight: 800; letter-spacing: -.08em; line-height: .8; }
.boot__line { width: 180px; height: 2px; overflow: hidden; background: rgba(255, 255, 255, .14); }
.boot__line span { display: block; width: 100%; height: 100%; background: var(--signal); transform-origin: left; animation: boot-line .85s var(--ease) both; }
.boot__label { color: var(--snow-muted); font: 600 10px/1.2 Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; }
.is-ready .boot { opacity: 0; visibility: hidden; }
@keyframes boot-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes boot-failsafe { to { opacity: 0; visibility: hidden; } }
.no-js .boot { display: none; }
.no-js .title-line > span, .no-js [data-reveal] { opacity: 1; transform: none; }

/* Header */
.site-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    width: 100%;
    height: var(--header-h);
    padding: 0 max(48px, calc((100vw - 1680px) / 2));
    border-bottom: 1px solid transparent;
    transition: height .4s var(--ease), background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
.site-header.is-scrolled {
    height: 68px;
    background: rgba(7, 17, 29, .78);
    border-color: var(--line);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
.brand__mark {
    display: grid;
    place-items: center;
    width: 37px;
    aspect-ratio: 1;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--snow);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.05em;
    transition: color .3s ease, border-color .3s ease, transform .5s var(--ease);
}
.brand:hover .brand__mark { color: var(--signal); border-color: var(--signal); transform: rotate(-10deg); }
.brand__name { font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.site-nav { justify-self: center; display: flex; align-items: center; gap: clamp(20px, 2.2vw, 42px); }
.site-nav a {
    position: relative;
    padding: 7px 0;
    color: var(--snow-muted);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .02em;
    transition: color .25s ease;
}
.site-nav a::after { position: absolute; bottom: 1px; left: 0; width: 100%; height: 1px; content: ""; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.site-nav a:hover, .site-nav a.is-active { color: var(--snow); }
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.site-nav .nav-contact { color: var(--snow); }
.nav-contact span { color: var(--signal); margin-left: 4px; }
.motion-toggle {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(7, 17, 29, .35);
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease;
}
.motion-toggle:hover { border-color: var(--line-strong); background: rgba(145, 197, 243, .06); }
.motion-toggle__icon { display: flex; gap: 3px; width: 11px; height: 11px; align-items: center; justify-content: center; }
.motion-toggle__icon i { display: block; width: 2px; height: 9px; background: var(--ice); border-radius: 2px; transition: transform .25s ease; }
.motion-toggle__label { color: var(--snow-muted); font: 600 9px/1 Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.motion-toggle[aria-pressed="true"] .motion-toggle__icon { position: relative; }
.motion-toggle[aria-pressed="true"] .motion-toggle__icon i:first-child { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--ice); background: none; border-radius: 0; }
.motion-toggle[aria-pressed="true"] .motion-toggle__icon i:last-child { display: none; }
.menu-toggle { display: none; }

/* Hero */
.hero {
    position: relative;
    z-index: 1;
    min-height: max(850px, 100svh);
    overflow: hidden;
    background:
        radial-gradient(circle at 79% 34%, rgba(53, 92, 158, .25), transparent 31%),
        radial-gradient(circle at 30% 92%, rgba(255, 91, 69, .065), transparent 25%),
        var(--ink);
}
.system-field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .7; }
.hero__grid {
    position: absolute;
    inset: 0;
    opacity: .34;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 96px 96px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 88%);
    mask-image: linear-gradient(to bottom, #000 0, transparent 88%);
}
.hero__content {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(430px, .72fr);
    align-items: center;
    gap: clamp(45px, 6vw, 120px);
    min-height: max(820px, 100svh);
    padding: calc(var(--header-h) + 52px) 0 90px;
}
.hero__copy { position: relative; z-index: 2; padding-left: clamp(0px, 2vw, 36px); }
.eyebrow, .kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--snow-muted);
    font: 700 10px/1.2 Consolas, "Courier New", monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.hero__title { margin: clamp(24px, 4vh, 48px) 0 28px; font-size: clamp(72px, 7.1vw, 138px); font-weight: 760; letter-spacing: -.075em; line-height: .78; }
.title-line { display: block; overflow: hidden; padding: .08em .08em .22em 0; margin-bottom: -.11em; }
.title-line > span { display: block; transform: translateY(130%) rotate(2deg); opacity: 0; }
.is-ready .title-line > span { animation: title-in 1s var(--ease) forwards; }
.is-ready .title-line:nth-child(2) > span { animation-delay: .08s; }
.is-ready .title-line:nth-child(3) > span { animation-delay: .16s; }
.title-line--accent { color: var(--signal); font-size: .72em; line-height: .9; letter-spacing: -.06em; }
@keyframes title-in { to { transform: translateY(0) rotate(0); opacity: 1; } }
.hero__intro { max-width: 690px; margin: 0 0 34px; color: #bac5d1; font-size: clamp(17px, 1.2vw, 22px); line-height: 1.55; letter-spacing: -.018em; }
.hero__actions { display: flex; align-items: center; gap: 30px; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-width: 218px;
    padding: 17px 20px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 750;
    transition: color .3s ease, background .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.button--signal { color: var(--ink); background: var(--signal); border-color: var(--signal); box-shadow: 0 12px 35px rgba(255, 91, 69, .16); }
.button--signal:hover { background: var(--signal-bright); box-shadow: 0 16px 50px rgba(255, 91, 69, .28); }
.button--signal span:last-child { font-size: 17px; }
.text-link { position: relative; padding: 10px 0; color: var(--snow); font-size: 15px; font-weight: 700; }
.text-link::after { position: absolute; bottom: 5px; left: 0; width: 100%; height: 1px; background: var(--line-strong); content: ""; transition: background .2s ease; }
.text-link:hover::after { background: var(--signal); }
.text-link span { margin-left: 6px; color: var(--signal); }
.hero__facts { display: flex; gap: 0; max-width: 720px; margin: clamp(36px, 6vh, 72px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.hero__facts div { --fact-accent: var(--signal); --fact-bg: rgba(255,91,69,.08); position: relative; z-index: 0; flex: 1; padding: 18px 20px 16px; border-radius: 0 0 12px 12px; background-color: transparent; transition: transform .36s var(--ease), background-color .3s ease, border-radius .3s ease, box-shadow .36s var(--ease); }
.hero__facts div:nth-child(2) { --fact-accent: var(--ice); --fact-bg: rgba(145,197,243,.09); }
.hero__facts div:nth-child(3) { --fact-accent: var(--lime); --fact-bg: rgba(200,255,77,.075); }
.hero__facts div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.hero__facts dt { margin-bottom: 7px; color: #718092; font: 650 9px/1 Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; transition: color .3s ease, transform .36s var(--ease); }
.hero__facts dd { margin: 0; color: var(--snow); font-size: 16px; font-weight: 650; transition: color .3s ease, transform .36s var(--ease); }

@media (hover: hover) and (pointer: fine) {
    .hero__facts div:hover { z-index: 2; border-radius: 12px; background-color: var(--fact-bg); box-shadow: inset 0 2px var(--fact-accent), 0 16px 36px rgba(0,0,0,.22); transform: translateY(-4px) scale(1.025); }
    .hero__facts div:hover dt { color: var(--fact-accent); transform: translateX(2px); }
    .hero__facts div:hover dd { color: #fff; transform: translateX(2px) scale(1.025); transform-origin: left center; }
}

.portrait { position: relative; z-index: 2; justify-self: center; width: min(100%, 600px); margin: 0; perspective: 1200px; transform-style: preserve-3d; }
.portrait__backdrop { position: absolute; z-index: -1; inset: 5% -10% -5% 8%; border: 1px solid rgba(145, 197, 243, .22); border-radius: 26px 130px 26px 26px; transform: translateZ(-60px) rotate(3.5deg); background: linear-gradient(150deg, rgba(107, 142, 255, .14), transparent 55%); }
.portrait__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid rgba(218, 232, 245, .25); border-radius: 24px 120px 24px 24px; background: #bdd1e6; box-shadow: 0 40px 100px rgba(0, 0, 0, .4), 0 0 80px rgba(72, 123, 203, .1); transform: translateZ(12px); }
.portrait__frame::before { position: absolute; z-index: 3; inset: 14px; border: 1px solid rgba(255,255,255,.32); border-radius: 15px 101px 15px 15px; content: ""; pointer-events: none; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; filter: saturate(.88) contrast(1.04); transition: transform 1.2s var(--ease), filter .6s ease; }
.portrait:hover img { transform: scale(1.025); filter: saturate(1) contrast(1.02); }
.portrait__wash { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6, 21, 35, .02) 25%, rgba(7, 17, 29, .03) 60%, rgba(7, 17, 29, .46) 100%); pointer-events: none; }
.portrait__scan { position: absolute; inset: 0; opacity: .16; background: repeating-linear-gradient(to bottom, transparent 0, transparent 4px, rgba(7,17,29,.25) 5px); pointer-events: none; mix-blend-mode: multiply; }
.portrait__caption { display: flex; justify-content: space-between; gap: 18px; padding: 15px 5px 0; color: #77889a; font: 600 8px/1.4 Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.portrait__caption b { color: var(--snow); }
.portrait__caption i { display: inline-block; width: 4px; aspect-ratio: 1; margin: 0 6px; background: var(--signal); border-radius: 50%; vertical-align: middle; }

.hero__footer { position: absolute; z-index: 2; right: 0; bottom: 24px; left: 0; display: flex; align-items: center; gap: 14px; color: #65758a; font: 650 8px/1 Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.hero__scroll-line { position: relative; width: 76px; height: 1px; overflow: hidden; background: var(--line); }
.hero__scroll-line i { position: absolute; width: 30px; height: 100%; background: var(--ice); animation: scroll-hint 2.4s var(--ease-in-out) infinite; }
@keyframes scroll-hint { from { transform: translateX(-35px); } to { transform: translateX(85px); } }

/* Shared section typography */
.section { position: relative; z-index: 2; padding: clamp(110px, 12vw, 210px) 0; }
section[id] { scroll-margin-top: 68px; }
.section-heading { margin-bottom: clamp(58px, 7vw, 110px); }
.section-heading--split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .55fr); gap: 70px; align-items: end; }
.kicker { margin-bottom: 24px; }
.kicker span { display: inline-grid; place-items: center; width: 28px; aspect-ratio: 1; color: var(--signal); border: 1px solid rgba(255,91,69,.3); border-radius: 50%; font-size: 8px; }
.section-heading h2, .depth h2, .education h2, .contact h2 {
    margin: 0;
    max-width: 1050px;
    font-size: clamp(62px, 7.2vw, 136px);
    font-weight: 760;
    letter-spacing: -.075em;
    line-height: .83;
}
.section-heading__aside, .section-heading__lead { max-width: 550px; margin: 0; color: var(--snow-muted); font-size: clamp(16px, 1.25vw, 21px); line-height: 1.6; letter-spacing: -.012em; }
.section-heading__lead { margin-top: 32px; }

[data-reveal] { opacity: 0; transform: translateY(42px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Selected systems */
.systems { background: var(--ink-soft); border-top: 1px solid var(--line); }
.systems::before { position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .2; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 110px 110px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 85%); mask-image: linear-gradient(90deg, #000, transparent 85%); }
.case-grid { display: grid; gap: 0; width: 100%; }
.case {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, .72fr);
    grid-template-rows: auto minmax(490px, auto);
    column-gap: clamp(36px, 6vw, 100px);
    overflow: hidden;
    padding: clamp(52px, 5vw, 96px) clamp(24px, 5vw, 110px);
    border: 0;
    border-radius: 0;
    background: rgba(7, 17, 29, .72);
    transition: background .35s ease, box-shadow .4s ease;
}
.case:hover { background: rgba(10, 27, 42, .9); box-shadow: inset 0 0 100px rgba(45,91,145,.06); }
.case__header { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; color: #718196; font: 650 9px/1 Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.case__header p { display: flex; align-items: center; gap: 12px; margin: 0; }
.case__header p span { color: var(--signal); }
.case__visual { position: relative; align-self: center; height: min(30vw, 460px); min-height: 360px; margin-top: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #06121e; }
.case__copy { align-self: end; padding: 70px 0 20px; }
.case__eyebrow { margin: 0 0 19px; color: var(--signal); font: 650 9px/1.3 Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.case__copy h3 { max-width: 650px; margin: 0 0 24px; font-size: clamp(48px, 4.5vw, 86px); font-weight: 740; line-height: .92; letter-spacing: -.062em; }
.case__copy > p:not(.case__eyebrow) { max-width: 650px; margin: 0; color: var(--snow-muted); font-size: clamp(18px, 1.2vw, 22px); line-height: 1.62; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 34px 0 0; padding: 0; list-style: none; }
.tags li { padding: 8px 11px; color: #8fa0b3; border: 1px solid var(--line); border-radius: 999px; font: 600 8px/1 Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }

/* Queue visual */
.queue-visual { background: radial-gradient(circle at 48% 48%, rgba(107,142,255,.15), transparent 34%), linear-gradient(145deg, rgba(255,91,69,.035), transparent 48%), #06121e; }
.case--queue .case__visual { border: 0; border-radius: 0; }
.queue-visual::before { position: absolute; inset: 0; content: ""; opacity: .48; background-image: linear-gradient(rgba(145,197,243,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(145,197,243,.07) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 78%); mask-image: radial-gradient(circle, #000 12%, transparent 78%); }
.queue-visual svg { position: absolute; inset: 3%; width: 94%; height: 94%; overflow: visible; }
.queue-diagram__heading, .queue-diagram__note, .fair-queue text, .queue-governor text { font-family: Consolas, monospace; font-weight: 700; letter-spacing: .12em; }
.queue-diagram__heading { fill: #7d91a7; font-size: 12px; }
.queue-diagram__note { fill: #8c5c5a; font-size: 11px; }.queue-diagram__note--fair { fill: #72933a; }
.queue-wave { fill: none; stroke: var(--signal); stroke-width: 2.35; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(255,91,69,.42)); opacity: .94; vector-effect: non-scaling-stroke; will-change: d; }
.queue-wave--two { stroke: #ff8b76; stroke-width: 1.8; opacity: .78; }.queue-wave--three { stroke: #d94d42; stroke-width: 1.55; opacity: .66; }.queue-wave--four { stroke: #ffc0ae; stroke-width: 1.25; opacity: .58; }
.queue-impact { fill: var(--signal); filter: url(#queue-glow); transform-box: fill-box; transform-origin: center; animation: queue-impact 1.9s var(--ease-in-out) infinite; }
.queue-impact--two { animation-delay: -.55s; animation-duration: 1.25s; }.queue-impact--three { animation-delay: -1.1s; animation-duration: 2.6s; }.queue-impact--four { animation-delay: -.8s; animation-duration: 1.55s; }
@keyframes queue-impact { 0%,72%,100% { opacity: .28; transform: scale(.7); } 82% { opacity: 1; transform: scale(1.9); } }
.queue-governor__glow { fill: rgba(145,197,243,.03); stroke: url(#queue-governor); stroke-width: 7; opacity: .45; filter: url(#queue-glow); }
.queue-governor__body { fill: rgba(6,18,30,.94); stroke: url(#queue-governor); stroke-width: 1.4; }
.queue-governor__spine { fill: none; stroke: rgba(145,197,243,.24); stroke-width: 1; stroke-dasharray: 3 7; animation: governor-flow 3s linear infinite; }
@keyframes governor-flow { to { stroke-dashoffset: -40; } }
.queue-governor__ports rect { fill: #0a1c2b; stroke: rgba(145,197,243,.4); stroke-width: 1; }.queue-governor__ports rect:nth-child(even) { stroke: rgba(200,255,77,.56); }
.queue-governor circle { fill: #0d2638; stroke: rgba(200,255,77,.62); stroke-width: 1.4; filter: url(#queue-glow); }
.queue-governor path:not(.queue-governor__spine) { fill: none; stroke: var(--lime); stroke-width: 1.5; stroke-linecap: round; }
.queue-governor text { fill: #a8c56d; font-size: 10px; text-anchor: middle; }
.fair-queue text { fill: #73879b; font-size: 10px; }
.fair-queue__rail { fill: url(#queue-rail); stroke: rgba(145,197,243,.24); stroke-width: 1; }
.fair-queue { --lane-phase: 0s; }.fair-queue--two { --lane-phase: -.22s; }.fair-queue--three { --lane-phase: -.47s; }.fair-queue--four { --lane-phase: -.69s; }
.fair-queue__stream rect { --item-phase: 0s; fill: rgba(145,197,243,.22); stroke: rgba(145,197,243,.62); stroke-width: 1; animation: fair-service 4.8s linear infinite; animation-delay: calc(var(--lane-phase) + var(--item-phase)); }
.fair-queue__stream rect:nth-child(2) { --item-phase: -.8s; }.fair-queue__stream rect:nth-child(3) { --item-phase: -1.6s; fill: rgba(200,255,77,.62); stroke: var(--lime); filter: drop-shadow(0 0 4px rgba(200,255,77,.4)); }.fair-queue__stream rect:nth-child(4) { --item-phase: -2.4s; }.fair-queue__stream rect:nth-child(5) { --item-phase: -3.2s; fill: rgba(145,197,243,.3); }.fair-queue__stream rect:nth-child(6) { --item-phase: -4s; }
@keyframes fair-service { from { transform: translateX(0); } to { transform: translateX(330px); } }
.queue-diagram__arrow { fill: none; stroke: rgba(145,197,243,.23); stroke-width: 1; stroke-dasharray: 4 6; animation: governor-flow 3s linear infinite; }

/* SQL Server: isometric engine stack and contribution map. */
.case--engine {
    grid-template-columns: minmax(500px, .92fr) minmax(560px, 1fr);
    grid-template-rows: auto auto;
    color: #1c2228;
    background:
        radial-gradient(circle at 28% 31%, rgba(220,58,208,.11), transparent 31%),
        linear-gradient(115deg, #e9e7e2, #f8f7f3 54%, #eceae6);
    box-shadow: inset 0 1px rgba(255,255,255,.84);
}
.case--engine:hover { background: radial-gradient(circle at 28% 31%, rgba(220,58,208,.14), transparent 33%), linear-gradient(115deg, #eeece8, #fcfbf8 54%, #f0eeea); box-shadow: inset 0 0 90px rgba(199,73,213,.035); }
.case--engine .case__header { color: #6d6c70; }.case--engine .case__header p span { color: #b13fc6; }
.case--engine .case__visual { height: min(48vw, 720px); min-height: 660px; }
.case__copy--engine { align-self: stretch; padding-top: 48px; }
.case__copy--engine h3 { max-width: 720px; color: #171d23; font-size: clamp(50px, 3.7vw, 72px); }
.case__copy--engine .case__eyebrow { color: #b13fc6; }
.case__copy--engine > p:not(.case__eyebrow) { max-width: 690px; color: #50565d; }
.case--engine .tags li { color: #575b61; border-color: rgba(55,52,61,.2); background: rgba(255,255,255,.48); }

.engine-isometric { border: 0; border-radius: 0; background: radial-gradient(ellipse at 52% 42%, rgba(220,55,205,.24), transparent 43%), radial-gradient(circle at 69% 29%, rgba(99,109,233,.15), transparent 26%); }
.engine-isometric::before { position: absolute; inset: 0; content: ""; opacity: .7; background-image: linear-gradient(rgba(77,69,86,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(77,69,86,.075) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(circle, #000 22%, transparent 78%); mask-image: radial-gradient(circle, #000 22%, transparent 78%); }
.engine-isometric svg { position: absolute; inset: 1%; width: 98%; height: 98%; overflow: visible; filter: drop-shadow(0 20px 24px rgba(63,37,91,.14)); }
.iso-grid { fill: none; stroke: rgba(69,60,78,.13); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sql-architecture__layer polygon { stroke: rgba(255,255,255,.82); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sql-architecture__layer--sql .arch-top { fill: url(#sql-layer); }.sql-architecture__layer--sql .arch-left { fill: #782daf; }.sql-architecture__layer--sql .arch-right { fill: #933dc2; }
.sql-architecture__layer--windows .arch-top { fill: url(#windows-layer); }.sql-architecture__layer--windows .arch-left { fill: #c43a72; }.sql-architecture__layer--windows .arch-right { fill: #a83b9e; }
.sql-architecture__layer--pal .arch-top { fill: url(#pal-layer); }.sql-architecture__layer--pal .arch-left { fill: #6941b8; }.sql-architecture__layer--pal .arch-right { fill: #5549bd; }
.sql-architecture__layer--host .arch-top { fill: url(#host-layer); }.sql-architecture__layer--host .arch-left { fill: #4856b6; }.sql-architecture__layer--host .arch-right { fill: #3268a7; }
.sql-architecture__layer--linux .arch-top { fill: url(#linux-layer); }.sql-architecture__layer--linux .arch-left { fill: #255f91; }.sql-architecture__layer--linux .arch-right { fill: #247da2; }
.sql-architecture__layer .arch-title { fill: #fff; font: 800 17px/1 Arial, sans-serif; letter-spacing: -.01em; text-anchor: middle; }
.sql-architecture__flow path { fill: none; stroke: #8070df; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sql-architecture__annotations path { fill: none; stroke: rgba(86,74,96,.38); stroke-width: 1.2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.sql-architecture__annotations text, .sql-architecture__skip text { fill: #514958; font: 700 15px/1 Arial, sans-serif; letter-spacing: .015em; }
.sql-architecture__annotations text + text, .sql-architecture__skip text + text { fill: #716a74; font-weight: 600; }
.sql-architecture__skip path { fill: none; stroke: #ff6078; stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }

.engine-achievements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 34px; }
.engine-achievement { min-height: 150px; padding: 18px; border: 1px solid rgba(62,57,68,.16); border-radius: 12px; background: rgba(255,255,255,.62); box-shadow: inset 0 3px #c245d3; transition: border-color .3s ease, background .3s ease, transform .35s var(--ease), box-shadow .3s ease; }
.engine-achievement:nth-child(2) { box-shadow: inset 0 3px #6b72df; }.engine-achievement:nth-child(4) { box-shadow: inset 0 3px #ff526e; }.engine-achievement:nth-child(5) { box-shadow: inset 0 3px #8d54d5; }.engine-achievement:nth-child(6) { box-shadow: inset 0 3px #de7758; }
.engine-achievement:hover { border-color: rgba(167,62,208,.34); background: rgba(255,255,255,.92); transform: translateY(-3px); }
.engine-achievement > span { display: block; color: #746c78; font: 700 var(--ui-caption-size)/1.15 Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.engine-achievement h4 { margin: 13px 0 8px; color: #20242a; font-size: clamp(19px, 1.2vw, 23px); line-height: 1.05; letter-spacing: -.025em; }
.engine-achievement p { margin: 0; color: #5e6268; font-size: 15px; line-height: 1.5; }
.engine-achievement--performance { border-color: rgba(181,62,201,.24); background: linear-gradient(145deg, rgba(221,70,213,.1), rgba(255,255,255,.72) 58%); box-shadow: inset 0 3px #df45d4; }
.engine-achievement--performance h4 { color: #a62fbd; font-size: clamp(20px, 1.45vw, 27px); }

/* Tools visual */
.tools-visual { background: linear-gradient(135deg, rgba(255,91,69,.06), transparent 40%), #06121e; }
.tools-visual::before { position: absolute; inset: 0; content: ""; background-image: linear-gradient(rgba(145,197,243,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(145,197,243,.06) 1px, transparent 1px); background-size: 28px 28px; }
.tools-visual__source { position: absolute; top: 50%; left: 8%; display: grid; place-content: center; width: 100px; aspect-ratio: 1; color: var(--signal); border: 1px solid rgba(255,91,69,.35); border-radius: 50%; transform: translateY(-50%); font: 650 7px/1 Consolas, monospace; letter-spacing: .1em; }
.tools-visual__source i { position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: var(--signal); border-radius: 50%; transform-origin: 0 65px; animation: core-orbit 5s linear infinite; }
.tools-visual__source i:nth-of-type(2) { animation-delay: -1.25s; }.tools-visual__source i:nth-of-type(3) { animation-delay: -2.5s; }.tools-visual__source i:nth-of-type(4) { animation-delay: -3.75s; }
.tools-visual__beam { position: absolute; top: 50%; left: calc(8% + 100px); width: 29%; height: 1px; background: linear-gradient(90deg, var(--signal), var(--ice)); }
.tools-visual__beam i { position: absolute; top: -3px; width: 7px; height: 7px; background: var(--snow); border-radius: 50%; box-shadow: 0 0 16px var(--ice); animation: beam-run 2s linear infinite; }
@keyframes beam-run { from { left: 0; opacity: 0; } 20%,80% { opacity: 1; } to { left: 100%; opacity: 0; } }
.tools-visual__panels { position: absolute; top: 50%; right: 7%; display: grid; gap: 14px; width: 38%; transform: translateY(-50%); }
.tools-visual__panels > span { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 18px; border: 1px solid rgba(145,197,243,.22); border-radius: 8px; background: rgba(12,29,46,.84); box-shadow: 0 10px 25px rgba(0,0,0,.18); animation: panel-shift 5s var(--ease-in-out) infinite; }
.tools-visual__panels > span:nth-child(2) { transform: translateX(18px); animation-delay: -.8s; }.tools-visual__panels > span:nth-child(3) { animation-delay: -1.6s; }
.tools-visual__panels i { display: block; height: 3px; background: #29445d; border-radius: 3px; flex: 1; }.tools-visual__panels i:first-child { background: var(--ice); flex: .2; }
@keyframes panel-shift { 50% { transform: translateX(8px); border-color: rgba(145,197,243,.45); } }

/* Stack depth */
.depth { overflow: hidden; background: #081521; border-top: 1px solid var(--line); }
.depth::before { position: absolute; inset: 0; content: ""; opacity: .24; background-image: radial-gradient(rgba(145,197,243,.36) .7px, transparent .7px); background-size: 20px 20px; -webkit-mask-image: radial-gradient(circle at 75% 45%, #000, transparent 55%); mask-image: radial-gradient(circle at 75% 45%, #000, transparent 55%); }
.depth__layout { display: grid; grid-template-columns: minmax(350px, .62fr) minmax(600px, 1fr); gap: 8vw; align-items: center; min-height: 820px; }
.depth__intro > p:not(.kicker) { max-width: 560px; margin: 38px 0 0; color: var(--snow-muted); font-size: clamp(16px, 1.2vw, 20px); line-height: 1.65; }
.layer-detail { margin-top: 65px; padding: 25px 28px 24px; border: 1px solid transparent; border-top-color: var(--line); border-left: 2px solid var(--signal); border-radius: 0 0 14px 0; background-color: rgba(12,32,49,0); transform-origin: left center; }
.layer-detail.is-visible { transition: transform .38s var(--ease), background-color .3s ease, border-color .3s ease, border-radius .3s ease, box-shadow .38s var(--ease); }
.layer-detail__index { color: var(--signal); font: 650 8px/1 Consolas, monospace; letter-spacing: .12em; transition: color .3s ease, transform .38s var(--ease); }
.layer-detail h3 { margin: 13px 0 7px; font-size: 25px; letter-spacing: -.035em; transition: color .3s ease, transform .38s var(--ease); }
.layer-detail p { min-height: 52px; max-width: 520px; margin: 0 !important; color: #8999aa !important; font-size: 16px !important; line-height: 1.55 !important; transition: color .3s ease, transform .38s var(--ease); }
@media (hover: hover) and (pointer: fine) {
    .layer-detail.is-visible:hover { border-color: rgba(145,197,243,.34); border-left-color: var(--signal); border-radius: 14px; background-color: rgba(20,48,69,.94); box-shadow: 0 22px 52px rgba(0,0,0,.3), inset 0 0 64px rgba(145,197,243,.055); transform: translateY(-3px) scale(1.02); }
    .layer-detail:hover .layer-detail__index { color: var(--signal-bright); transform: translateX(3px); }
    .layer-detail:hover h3 { color: #fff; transform: translateX(3px) scale(1.025); transform-origin: left center; }
    .layer-detail:hover p { color: #b3c1cf !important; transform: translateX(3px); }
}
.stack-stage { position: relative; min-height: 730px; perspective: 1400px; }
.stack-stage__halo { position: absolute; top: 50%; left: 50%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(107,142,255,.18), rgba(107,142,255,0) 67%); transform: translate(-50%,-50%); filter: blur(12px); }
.stack-scene { position: absolute; top: 50%; left: 50%; width: min(80%, 680px); height: 530px; transform-style: preserve-3d; transform: translate(-50%,-48%) rotateX(54deg) rotateZ(-28deg); transition: transform .35s ease-out; }
.stack-layer {
    position: absolute;
    z-index: calc(10 - var(--i));
    top: calc(var(--i) * 84px);
    left: 0;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    width: 100%;
    height: 124px;
    padding: 0 30px;
    color: #8ba0b5;
    text-align: left;
    border: 1px solid rgba(145,197,243,.25);
    border-radius: 15px;
    background: rgba(10, 28, 44, .88);
    box-shadow: 0 18px 0 rgba(3, 11, 19, .55), 0 24px 35px rgba(0,0,0,.2);
    cursor: pointer;
    transform: translateZ(calc((4 - var(--i)) * 18px));
    transform-style: preserve-3d;
    transition: color .35s ease, background .35s ease, border-color .35s ease, transform .45s var(--ease), box-shadow .35s ease;
}
.stack-layer:hover, .stack-layer.is-active { color: var(--snow); border-color: var(--signal); background: rgba(20, 43, 62, .98); transform: translateZ(calc((4 - var(--i)) * 18px + 30px)) translateY(-4px); box-shadow: 0 18px 0 rgba(3, 11, 19, .72), 0 35px 50px rgba(0,0,0,.35), inset 0 0 45px rgba(255,91,69,.06); }
.stack-layer > span { color: var(--signal); font: 650 9px/1 Consolas, monospace; letter-spacing: .1em; }
.stack-layer b { font-size: clamp(16px, 1.4vw, 24px); letter-spacing: -.025em; }
.stack-layer small { color: #8195aa; font: 600 8px/1 Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.stack-stage__hint { position: absolute; right: 5%; bottom: 0; margin: 0; color: #65788b; font: 600 8px/1 Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.stack-stage__hint span { color: var(--ice); }

/* Career trajectory */
.trajectory { overflow: hidden; color: var(--paper-ink); background: var(--paper); }
.trajectory .kicker { color: #667078; }.trajectory .kicker span { color: #c43f31; border-color: rgba(196,63,49,.26); }
.trajectory .section-heading__aside { padding-right: clamp(70px, 6vw, 115px); color: #5e6870; }
.career-map { position: relative; height: 390px; margin: 20px 0 110px; }
.career-map__path { position: absolute; top: 30px; left: 0; width: 100%; height: 280px; overflow: visible; }
.career-path-shadow, .career-path-line, .career-path-acceleration, .career-braid-halo, .career-braid-strand, .career-braid-glint { fill: none; vector-effect: non-scaling-stroke; }
.career-path-shadow { stroke: rgba(17,26,33,.1); stroke-width: 18; }
.career-path-line { stroke: var(--signal); stroke-width: 3; }
.career-path-acceleration { stroke: url(#career-acceleration); stroke-width: 4; stroke-linecap: round; opacity: 0; transition: opacity .65s ease .35s; }
.career-map.is-visible .career-path-acceleration { opacity: 1; }
.career-braid-halo { stroke: rgba(137,168,55,.18); stroke-width: 23; stroke-linecap: round; opacity: 0; filter: blur(3px); transition: opacity 1.1s ease .65s; }
.career-braid-strand { stroke-linecap: round; opacity: 0; transition: opacity .8s ease; }
.career-braid-strand--a { stroke: #839f34; stroke-width: 3; transition-delay: .55s; }
.career-braid-strand--b { stroke: #b3d14a; stroke-width: 4.5; transition-delay: .72s; }
.career-braid-strand--c { stroke: #ddf78a; stroke-width: 2.5; transition-delay: .9s; }
.career-map.is-visible .career-braid-halo { opacity: 1; }
.career-map.is-visible .career-braid-strand { opacity: .96; }
.career-map.is-visible .career-braid-halo { animation: career-braid-breathe 2.4s ease-in-out 1.1s infinite; }
.career-braid-glint { stroke: #eaff9f; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 68 560; opacity: 0; filter: blur(2.5px); }
.career-map.is-visible .career-braid-glint { animation: career-braid-glint 2.4s ease-in-out 1.1s infinite; }
@keyframes career-braid-breathe { 50% { stroke-width: 29; stroke-opacity: .72; } }
@keyframes career-braid-glint { 0% { stroke-dashoffset: 620; opacity: 0; } 16% { opacity: .42; } 70% { opacity: .18; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.career-stop { position: absolute; display: grid; gap: 4px; min-width: 160px; }
.career-stop i { width: 14px; aspect-ratio: 1; margin-bottom: 10px; border: 3px solid var(--paper); border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 1px var(--signal), 0 8px 22px rgba(196,63,49,.25); }
.career-stop span { color: #84352f; font: 700 9px/1 Consolas, monospace; letter-spacing: .12em; }
.career-stop b { font-size: 19px; letter-spacing: -.02em; }.career-stop small { color: #515c63; font-size: 15px; }
.career-stop--one { top: 252px; left: 1%; }.career-stop--two { top: 101px; left: 27%; }.career-stop--three { top: 222px; left: 52%; }.career-stop--four { top: 115px; left: 75.8%; }.career-stop--now { top: 41px; right: 9.3%; min-width: 260px; text-align: right; justify-items: end; }.career-stop--now i { background: var(--lime); box-shadow: 0 0 0 1px #778e35, 0 0 0 8px rgba(136,163,55,.1), 0 8px 25px rgba(131,167,48,.28); }
.career-stop--now > span, .career-stop--now > b, .career-stop--now > small { transform: translateY(-96px); }
.career-stop--now > span { color: #718b29; }
.trajectory__statement { max-width: 1050px; margin: 0 0 clamp(70px, 8vw, 120px); font-size: clamp(38px, 4.4vw, 80px); font-weight: 720; letter-spacing: -.06em; line-height: .95; }
.trajectory__statement span { display: block; color: #98a2a9; }
.career-ledger { border-top: 1px solid rgba(17,26,33,.17); }
.career-ledger > article { position: relative; z-index: 0; display: grid; grid-template-columns: 160px minmax(240px, .8fr) minmax(300px, 1fr); gap: 50px; align-items: center; margin-inline: -18px; padding: 28px 18px; border: 1px solid transparent; border-bottom-color: rgba(17,26,33,.17); border-radius: 15px; background-color: rgba(255,255,255,0); }
.career-ledger > article.is-visible { transform: translate3d(0,0,0); transition: transform .22s var(--ease), background-color .22s var(--ease); will-change: transform; }
.career-ledger__year { color: #793a34; font: 650 10px/1 Consolas, monospace; letter-spacing: .08em; }
.career-ledger h3 { margin: 0 0 3px; font-size: 22px; letter-spacing: -.035em; }.career-ledger p { margin: 0; color: #4f5960; font-size: 15px; }
.career-ledger > article h3, .career-ledger > article p, .career-ledger__year { transition: color .22s var(--ease), transform .22s var(--ease); }
.career-ledger__insight { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0fr); align-items: center; justify-self: end; width: 100%; max-width: 820px; transition: grid-template-columns .32s var(--ease); }
.career-ledger__scope { display: grid; justify-items: end; gap: 9px; min-width: 0; }
.career-ledger__focus { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.career-ledger__toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0; color: #7a6861; border: 0; background: transparent; cursor: pointer; font: 700 14px/1 Consolas, monospace; letter-spacing: .09em; text-transform: uppercase; transition: color .22s var(--ease); }
.career-ledger__toggle i { color: #b43d32; font-size: 17px; font-style: normal; transition: transform .28s var(--ease); }
.career-ledger__toggle-close { display: none; }
.career-ledger__toggle:focus-visible { border-radius: 3px; outline: 2px solid rgba(196,63,49,.48); outline-offset: 5px; }
.career-ledger__detail { min-width: 0; max-height: 80px; overflow: hidden; opacity: 0; transform: translateX(-16px); transition: max-height .32s var(--ease), opacity .22s var(--ease), transform .32s var(--ease); }
.career-ledger__detail > div { display: grid; gap: 5px; width: min(clamp(400px,26vw,500px), calc(100% - 24px)); margin-left: 24px; padding-left: 18px; border-left: 2px solid rgba(196,63,49,.68); }
.career-ledger__detail span { position: relative; display: block; color: #465159; font-size: clamp(16px,.9vw,17px); line-height: 1.35; }
.career-ledger__detail span::before { position: absolute; top: .62em; left: -18px; width: 7px; height: 1px; content: ""; background: #c43f31; }
.career-ledger > article.is-expanded { z-index: 2; border-color: rgba(196,63,49,.2); background-color: rgba(255,255,255,.52); box-shadow: 0 18px 42px rgba(17,26,33,.1), inset 4px 0 rgba(196,63,49,.72); transform: translate3d(0,0,0); }
.career-ledger > article.is-expanded .career-ledger__year { color: #b43d32; transform: translateX(4px); }
.career-ledger > article.is-expanded h3 { color: #080e13; transform: translateX(4px) scale(1.025); transform-origin: left center; }
.career-ledger > article.is-expanded p { color: #303b43; }
.career-ledger > article.is-expanded .career-ledger__insight { grid-template-columns: minmax(230px,.42fr) minmax(0,1fr); }
.career-ledger > article.is-expanded .career-ledger__scope { justify-items: start; }
.career-ledger > article.is-expanded .career-ledger__focus { text-align: left; white-space: nowrap; }
.career-ledger > article.is-expanded .career-ledger__detail { max-height: 320px; opacity: 1; transform: translateX(0); }
.career-ledger > article.is-expanded .career-ledger__toggle-open { display: none; }
.career-ledger > article.is-expanded .career-ledger__toggle-close { display: inline; }
.career-ledger > article.is-expanded .career-ledger__toggle i { transform: rotate(180deg); }
.career-ledger__earlier { border-bottom: 1px solid rgba(17,26,33,.17); }
.career-ledger__earlier summary { display: flex; justify-content: space-between; gap: 30px; margin-inline: -18px; padding: 30px 18px; border: 1px solid transparent; border-radius: 15px; background-color: rgba(255,255,255,0); cursor: pointer; list-style: none; font-size: 16px; font-weight: 700; transition: transform .22s var(--ease), background-color .22s var(--ease); will-change: transform; }
.career-ledger__earlier summary::-webkit-details-marker { display: none; }.career-ledger__earlier summary span:last-child { color: #747d83; font-size: 14px; font-weight: 550; }.career-ledger__prompt { font-weight: inherit; }.career-ledger__prompt--close { display: none; }.career-ledger__earlier[open] .career-ledger__prompt--open { display: none; }.career-ledger__earlier[open] .career-ledger__prompt--close { display: inline; }.career-ledger__earlier summary i { display: inline-grid; place-items: center; width: 24px; aspect-ratio: 1; margin-left: 8px; color: var(--paper); background: var(--paper-ink); border-radius: 50%; font-size: 16px; font-style: normal; transition: transform .3s var(--ease); }.career-ledger__earlier[open] summary i { transform: rotate(45deg); }
.career-ledger__earlier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 32px; background: rgba(17,26,33,.14); }
.career-ledger__earlier-grid article { padding: 24px; background: var(--paper); }.career-ledger__earlier-grid article > span { color: #9f3b31; font: 650 8px/1 Consolas, monospace; }.career-ledger__earlier-grid h3 { margin-top: 14px; font-size: 18px; }.career-ledger__earlier-grid p { line-height: 1.55; }

@media (hover: hover) and (pointer: fine) {
    .career-ledger > article { height: 158px; min-height: 158px; }
    .career-ledger > article.is-visible.is-preview { z-index: 2; border-color: rgba(196,63,49,.2); border-radius: 15px; background-color: rgba(255,255,255,.52); box-shadow: 0 18px 42px rgba(17,26,33,.1), inset 4px 0 rgba(196,63,49,.72); transform: translate3d(0,0,0); }
    .career-ledger > article.is-preview .career-ledger__year { color: #b43d32; transform: translateX(4px); }
    .career-ledger > article.is-preview h3 { color: #080e13; transform: translateX(4px) scale(1.025); transform-origin: left center; }
    .career-ledger > article.is-preview p { color: #303b43; }
    .career-ledger > article.is-preview .career-ledger__insight { grid-template-columns: minmax(230px,.42fr) minmax(0,1fr); }
    .career-ledger > article.is-preview .career-ledger__scope { justify-items: start; }
    .career-ledger > article.is-preview .career-ledger__focus { text-align: left; white-space: nowrap; }
    .career-ledger > article.is-preview .career-ledger__detail { max-height: 320px; opacity: 1; transform: translateX(0); }
    .career-ledger > article.is-preview .career-ledger__toggle { color: #3d474d; }
    .career-ledger__earlier summary:hover, .career-ledger__earlier summary:focus-visible { border-color: rgba(196,63,49,.18); background-color: rgba(255,255,255,.48); box-shadow: 0 14px 34px rgba(17,26,33,.08), inset 4px 0 rgba(196,63,49,.65); outline: none; transform: translateY(-1px) scale(1.01); }
}

@media (hover: hover) and (pointer: fine) and (max-width: 1360px) {
    .career-ledger > article { height: 220px; min-height: 220px; }
}

@media (min-width: 801px) and (max-width: 1360px) {
    .career-ledger > article { grid-template-columns: 130px 1fr; column-gap: 24px; row-gap: 8px; }
    .career-ledger__insight { grid-column: 2; grid-template-columns: 1fr !important; gap: 10px; justify-self: start; max-width: none; }
    .career-ledger__scope { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .career-ledger__toggle { flex: none; }
    .career-ledger__focus, .career-ledger > article.is-expanded .career-ledger__focus { text-align: left; white-space: normal; }
    .career-ledger__detail { max-height: 0; opacity: 0; transform: translateY(-6px); }
    .career-ledger > article.is-expanded .career-ledger__detail,
    .career-ledger > article.is-preview .career-ledger__detail { max-height: 220px; opacity: 1; transform: translateY(0); }
    .career-ledger__detail > div { width: auto; margin-left: 0; padding-left: 14px; }
}

/* Open source */
.lab { overflow: hidden; background: #06101a; }
.lab::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 12% 26%, rgba(255,91,69,.1), transparent 27%), radial-gradient(circle at 88% 70%, rgba(107,142,255,.13), transparent 31%); pointer-events: none; }
.project-sections { display: grid; gap: 0; width: 100%; }
.project-section { position: relative; scroll-margin-top: 90px; }
.project {
    position: relative;
    display: block;
    width: 100%;
    min-height: clamp(680px, 74vh, 820px);
    overflow: hidden;
    padding: clamp(52px, 5vw, 96px) clamp(24px, 5vw, 110px);
    border: 0;
    border-radius: 0;
    background: rgba(10, 27, 42, .72);
    transition: background .35s ease;
}
.project:hover { background: rgba(13, 33, 51, .9); }
.project--termal { min-height: clamp(760px, 78vh, 900px); }
.project header { display: flex; justify-content: space-between; gap: 20px; color: #708196; font: 650 8px/1.3 Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.project__copy { position: absolute; right: clamp(26px,3.2vw,52px); bottom: clamp(26px,3.2vw,52px); left: clamp(26px,3.2vw,52px); max-width: 680px; }
.project__copy p { margin: 0 0 12px; color: var(--signal); font: 650 8px/1 Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.project__copy h3 { margin: 0 0 14px; font-size: clamp(48px, 5.2vw, 94px); line-height: .85; letter-spacing: -.07em; }
.project__copy > span { display: block; max-width: 580px; color: #8f9eae; font-size: 16px; line-height: 1.55; }
.project--phoenix .project__copy h3 { font-size: clamp(48px, 4.6vw, 86px); }
.project--starfish .project__copy h3 { font-size: clamp(48px, 4.4vw, 82px); }
.termal-body { display: grid; grid-template-columns: minmax(0, 1.34fr) minmax(360px, .66fr); gap: clamp(38px, 4.4vw, 84px); align-items: center; min-height: 610px; margin-top: 28px; }
.termal-visual { position: relative; width: 100%; height: 470px; }
.termal-visual::before { position: absolute; z-index: 0; inset: 22px -10px 18px; content: ""; opacity: .64; background-image: linear-gradient(rgba(145,197,243,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(145,197,243,.055) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 92%, transparent); }
.termal-tree { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }
.termal-edge { fill: none; stroke-width: 1.3; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: opacity .28s ease; animation: termal-edge-flow 8s linear infinite; }
.termal-edge--direct { stroke: rgba(145,197,243,.48); stroke-dasharray: 3 6; }
.termal-edge--spawn { stroke: rgba(200,255,77,.42); stroke-dasharray: 7 7; animation-duration: 5.6s; }
.termal-edge--terminal { stroke: rgba(255,91,69,.38); stroke-dasharray: 2 7; animation-duration: 4.4s; }
.termal-edge.is-retiring { opacity: .08; }
@keyframes termal-edge-flow { to { stroke-dashoffset: -90; } }
.termal-user { position: absolute; z-index: 3; top: 50%; left: 0; display: grid; justify-items: center; gap: 6px; width: 14%; color: var(--snow); font: 700 12px/1 Consolas, monospace; letter-spacing: .09em; transform: translateY(-50%); }
.termal-user small { color: #8293a5; font-size: 10px; letter-spacing: .08em; }
.termal-user__avatar { position: relative; display: block; width: 58px; aspect-ratio: 1; margin-bottom: 3px; border: 1px solid rgba(145,197,243,.46); border-radius: 50%; background: radial-gradient(circle, rgba(145,197,243,.08), rgba(5,18,29,.94) 68%); box-shadow: 0 0 28px rgba(145,197,243,.09); }
.termal-user__avatar::before { position: absolute; top: 13px; left: 50%; width: 12px; aspect-ratio: 1; content: ""; border: 1px solid var(--ice); border-radius: 50%; background: #0b1a29; transform: translateX(-50%); animation: termal-silhouette-head 2.4s ease-in-out infinite; }
.termal-user__avatar::after { position: absolute; bottom: 11px; left: 50%; width: 28px; height: 15px; content: ""; border: 1px solid var(--ice); border-bottom: 0; border-radius: 18px 18px 0 0; transform: translateX(-50%); animation: termal-silhouette-body 2.4s ease-in-out infinite; }
.termal-user__avatar i { position: absolute; z-index: 2; right: -3px; top: 8px; width: 8px; aspect-ratio: 1; border: 2px solid #091725; border-radius: 50%; background: var(--lime); }
@keyframes termal-silhouette-head { 0%, 100% { border-color: rgba(145,197,243,.72); box-shadow: 0 0 2px rgba(145,197,243,.12); } 50% { border-color: #d8efff; box-shadow: 0 0 7px rgba(145,197,243,.82), 0 0 15px rgba(145,197,243,.34); } }
@keyframes termal-silhouette-body { 0%, 100% { border-color: rgba(145,197,243,.72); filter: drop-shadow(0 0 1px rgba(145,197,243,.1)); } 50% { border-color: #d8efff; filter: drop-shadow(0 0 5px rgba(145,197,243,.9)) drop-shadow(0 0 9px rgba(145,197,243,.38)); } }
.termal-layer { position: absolute; z-index: 2; top: 0; bottom: 0; width: 20%; }
.termal-layer::before { position: absolute; top: 37px; bottom: 32px; left: -12%; width: 1px; content: ""; background: linear-gradient(to bottom, transparent, rgba(145,197,243,.16) 12%, rgba(145,197,243,.16) 88%, transparent); }
.termal-layer--primary { left: 20%; }
.termal-layer--spawned { left: 46%; }
.termal-layer--terminal { left: 72%; }
.termal-layer__label { position: absolute; top: 5px; left: 0; color: #7d8ea1; font: 700 10px/1 Consolas, monospace; letter-spacing: .1em; white-space: nowrap; }
.termal-layer--primary .termal-layer__label { color: var(--ice); }
.termal-layer--spawned .termal-layer__label { color: #a8c56d; }
.termal-layer--terminal .termal-layer__label { color: #bd7068; }
.termal-node { position: absolute; top: calc(50px + var(--slot) * 66px); left: 0; display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: center; gap: 9px; box-sizing: border-box; width: 100%; min-height: 46px; padding: 8px 10px; overflow: hidden; color: #d8e1e9; border: 1px solid rgba(145,197,243,.24); border-radius: 7px; background: linear-gradient(135deg, rgba(14,38,57,.96), rgba(7,22,35,.96)); box-shadow: 0 8px 22px rgba(0,0,0,.22); font-family: Consolas, monospace; line-height: 1; letter-spacing: .07em; transform-origin: left center; transition: opacity .32s ease, transform .38s var(--ease), border-color .3s ease, filter .3s ease; }
.termal-node > i { width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px var(--ice); }
.termal-node > span { min-width: 0; }
.termal-node b, .termal-node small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.termal-node b { font-size: 11px; }
.termal-node small { margin-top: 5px; color: #77899b; font-size: 10px; }
.termal-node--spawned { border-color: rgba(200,255,77,.25); }
.termal-node--spawned > i { background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.termal-node--terminal { border-color: rgba(255,91,69,.25); }
.termal-node--terminal > i { background: var(--signal); box-shadow: 0 0 10px var(--signal); }
.termal-node.is-entering { opacity: 0; transform: translateX(-15px) scale(.72); }
.termal-node.is-leaving { opacity: 0; filter: blur(2px); transform: translateX(13px) scale(.74); }
.termal-tree__legend { position: absolute; z-index: 3; right: 7%; bottom: 2px; display: flex; gap: 16px; color: #718398; font: 700 10px/1 Consolas, monospace; letter-spacing: .09em; }
.termal-tree__legend span { display: flex; align-items: center; gap: 6px; }
.termal-tree__legend i { width: 11px; height: 1px; background: var(--ice); }
.termal-tree__legend span:nth-child(2) i { background: var(--lime); }
.termal-tree__legend span:nth-child(3) i { background: var(--signal); }
.project--termal .project__copy { position: relative; inset: auto; width: 100%; max-width: 760px; padding-right: 0; }
.project--termal .project__copy p { margin-bottom: 16px; }
.project--termal .project__copy h3 { margin-bottom: 22px; font-size: clamp(68px, 6vw, 108px); }
.project--termal .project__copy > span { max-width: 690px; color: #a7b4c1; font-size: clamp(19px, 1.25vw, 23px); line-height: 1.55; }
.termal-capabilities { margin-top: 30px; border-top: 1px solid var(--line); }
.termal-capabilities > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); transition: padding .35s var(--ease), background .3s ease; }
.termal-capabilities > div:hover { padding-inline: 9px; background: rgba(145,197,243,.035); }
.termal-capabilities i { padding-top: 2px; color: var(--signal); font: 700 11px/1 Consolas, monospace; font-style: normal; letter-spacing: .08em; }
.termal-capabilities b { display: block; color: var(--snow); font-size: 16px; line-height: 1.1; }
.termal-capabilities small { display: block; margin-top: 6px; color: #8393a3; font-size: 14px; line-height: 1.45; }
.termal-runtimes { display: block; margin-top: 20px; color: #718397; font: 700 11px/1.5 Consolas, monospace; letter-spacing: .05em; }
.project--phoenix { min-height: clamp(790px, 80vh, 930px); }
.phoenix-body { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(560px, .92fr); gap: clamp(38px, 3.4vw, 68px); align-items: center; min-height: 650px; margin-top: 28px; }
.phoenix-visual { position: relative; width: 100%; height: 470px; }
.phoenix-visual::before { position: absolute; z-index: 0; inset: 18px -10px; content: ""; opacity: .7; background-image: linear-gradient(rgba(145,197,243,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(145,197,243,.06) 1px, transparent 1px); background-size: 30px 30px; mask-image: radial-gradient(ellipse, #000 25%, transparent 76%); }
.phoenix-map { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }
.phoenix-route { fill: none; stroke-width: 1.35; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 4 7; animation: phoenix-route-flow 5.8s linear infinite; }
.phoenix-route--client { stroke: rgba(145,197,243,.4); }
.phoenix-route--query { stroke: rgba(255,91,69,.62); animation-duration: 3.2s; }
.phoenix-route--answer { stroke: rgba(200,255,77,.62); animation-direction: reverse; animation-duration: 2.6s; }
.phoenix-project-graph path { fill: none; stroke: rgba(145,197,243,.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.phoenix-project-graph .phoenix-project-graph__hot { stroke: rgba(145,197,243,.66); stroke-width: 1.35; stroke-dasharray: 3 5; animation: phoenix-route-flow 4.2s linear infinite; }
.phoenix-project-graph circle { fill: #102b41; stroke: rgba(145,197,243,.32); stroke-width: 1; vector-effect: non-scaling-stroke; }
.phoenix-project-graph circle.is-hot { fill: var(--ice); stroke: #d9efff; filter: drop-shadow(0 0 6px rgba(145,197,243,.82)); animation: phoenix-cluster-proof 5.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.phoenix-project-graph circle.is-hot:nth-of-type(16) { animation-delay: -.65s; }.phoenix-project-graph circle.is-hot:nth-of-type(17) { animation-delay: -1.3s; }.phoenix-project-graph circle.is-hot:nth-of-type(18) { animation-delay: -1.95s; }.phoenix-project-graph circle.is-hot:nth-of-type(19) { animation-delay: -2.6s; }
@keyframes phoenix-route-flow { to { stroke-dashoffset: -110; } }
@keyframes phoenix-cluster-proof { 0%, 56%, 100% { opacity: .28; transform: scale(.72); } 68%, 82% { opacity: 1; transform: scale(1.18); } }
.phoenix-user { position: absolute; z-index: 4; top: 50%; left: 0; display: grid; justify-items: center; gap: 5px; width: 7%; color: #19313e; font: 700 11px/1 Consolas, monospace; letter-spacing: .07em; transform: translateY(-50%); }
.phoenix-user small { color: #617984; font-size: 10px; }
.phoenix-user__avatar { position: relative; display: block; width: 48px; aspect-ratio: 1; margin-bottom: 3px; border: 1px solid rgba(31,105,143,.48); border-radius: 50%; background: rgba(248,251,249,.88); box-shadow: 0 0 22px rgba(31,105,143,.13); }
.phoenix-user__avatar::before { position: absolute; top: 10px; left: 50%; width: 10px; aspect-ratio: 1; content: ""; border: 1px solid #17698f; border-radius: 50%; transform: translateX(-50%); }
.phoenix-user__avatar::after { position: absolute; bottom: 8px; left: 50%; width: 24px; height: 12px; content: ""; border: 1px solid #17698f; border-bottom: 0; border-radius: 16px 16px 0 0; transform: translateX(-50%); }
.phoenix-user__avatar i { position: absolute; top: 6px; right: 5px; width: 6px; aspect-ratio: 1; border-radius: 50%; background: #769d20; box-shadow: 0 0 8px rgba(118,157,32,.52); animation: phoenix-fresh-pulse 2.2s ease-in-out infinite; }
.phoenix-editor { position: absolute; z-index: 4; top: 50%; left: 9%; width: 25%; overflow: hidden; border: 1px solid rgba(31,83,110,.3); border-radius: 8px; background: rgba(252,253,251,.94); box-shadow: 0 15px 34px rgba(28,61,78,.14), inset 2px 0 rgba(31,114,155,.5); font-family: Consolas, monospace; transform: translateY(-50%); }
.phoenix-editor__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 8px 10px; color: #506975; border-bottom: 1px solid rgba(31,83,110,.16); background: rgba(226,236,238,.72); font-size: 11px; }.phoenix-editor__bar b { color: #17698f; font-size: inherit; }
.phoenix-code { display: grid; gap: 3px; padding: 12px 10px 10px; color: #2c3941; font-size: 11px; line-height: 1.25; }
.phoenix-code > span { display: grid; grid-template-columns: 18px minmax(0,1fr); }.phoenix-code i { color: #91a0a7; font-style: normal; }.phoenix-code code { overflow: hidden; font: inherit; white-space: nowrap; }
.phoenix-code b { font-weight: 700; }.phoenix-code .syntax-keyword { color: #a8426e; }.phoenix-code .syntax-type { color: #176f8e; }.phoenix-code .syntax-method { color: #7751a5; }
.phoenix-code mark { position: relative; color: #8a4722; background: rgba(244,190,89,.26); border-bottom: 1px solid #c26e30; animation: phoenix-symbol-focus 3.4s ease-in-out infinite; }
@keyframes phoenix-symbol-focus { 50% { color: #a83d2f; background: rgba(255,126,92,.2); box-shadow: 0 2px rgba(168,61,47,.22); } }
.phoenix-type-tip { margin: 0 10px 10px 28px; padding: 9px 10px; border: 1px solid rgba(31,83,110,.18); border-left: 3px solid #17698f; border-radius: 3px; background: #f4f8f6; box-shadow: 0 6px 14px rgba(28,61,78,.08); }
.phoenix-type-tip small { display: block; margin-bottom: 5px; color: #8a7270; font-size: 9px; letter-spacing: .08em; }.phoenix-type-tip b, .phoenix-type-tip code { display: block; font: 700 10px/1.35 Consolas, monospace; }.phoenix-type-tip b { color: #344852; }.phoenix-type-tip b span { color: #176f8e; }.phoenix-type-tip code { margin-top: 3px; color: #5c7921; }.phoenix-type-tip code i { color: #7751a5; font-style: normal; }.phoenix-type-tip code em { color: #a8426e; font-style: normal; }
.phoenix-core { position: absolute; z-index: 3; top: 50%; left: 41.5%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 108px; aspect-ratio: 1; text-align: center; border: 1px solid rgba(255,91,69,.5); border-radius: 50%; background: radial-gradient(circle, #102b40, #081827 70%); box-shadow: 0 0 46px rgba(255,91,69,.1); transform: translate(-50%,-50%); }
.phoenix-core::before { position: absolute; inset: 10px; content: ""; border: 1px dashed rgba(145,197,243,.3); border-radius: 50%; animation: phoenix-spin 15s linear infinite; }
.phoenix-core::after { position: absolute; inset: -7px; content: ""; border: 1px solid rgba(255,91,69,.1); border-radius: 50%; animation: phoenix-core-breathe 3.4s ease-in-out infinite; }
.phoenix-core span, .phoenix-core b { position: relative; z-index: 1; width: 100%; font: 700 10px/1 Consolas, monospace; letter-spacing: .1em; text-align: center; }.phoenix-core span { color: var(--signal); }.phoenix-core b { color: #8ba0b4; font-size: 9px; }
.phoenix-core i { position: absolute; z-index: 1; top: 16px; width: 6px; aspect-ratio: 1; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px rgba(200,255,77,.72); animation: phoenix-fresh-pulse 2.2s ease-in-out infinite; }
@keyframes phoenix-spin { to { transform: rotate(360deg); } }
@keyframes phoenix-core-breathe { 50% { inset: -13px; opacity: .25; } }
.phoenix-repo-label { position: absolute; z-index: 3; top: 54px; left: 48%; display: grid; gap: 4px; font-family: Consolas, monospace; letter-spacing: .07em; }.phoenix-repo-label span { color: var(--ice); font-size: 10px; }.phoenix-repo-label b { color: #9aabba; font-size: 10px; }.phoenix-repo-label small { color: #64768a; font-size: 9px; }
.phoenix-results { position: absolute; z-index: 3; top: 50%; right: 0; display: grid; gap: 13px; width: 22%; transform: translateY(-50%); }
.phoenix-results__label { margin-bottom: 1px; color: #7890a4; font: 700 10px/1 Consolas, monospace; letter-spacing: .09em; }
.phoenix-results > span:not(.phoenix-results__label) { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 10px; border: 1px solid rgba(145,197,243,.23); border-radius: 7px; background: rgba(7,22,35,.95); box-shadow: 0 8px 18px rgba(0,0,0,.2); animation: phoenix-result-proof 6s ease-in-out infinite; }
.phoenix-results > span:nth-child(3) { animation-delay: -4s; }.phoenix-results > span:nth-child(4) { animation-delay: -2s; }
.phoenix-results b, .phoenix-results i { font: 700 9px/1 Consolas, monospace; letter-spacing: .05em; }.phoenix-results b { color: #d7e1e9; }.phoenix-results i { color: var(--lime); font-style: normal; }.phoenix-results > span:last-child i { color: #d7a56e; }
@keyframes phoenix-result-proof { 0%, 24%, 100% { border-color: rgba(145,197,243,.23); transform: translateX(0); } 9%, 16% { border-color: rgba(200,255,77,.52); box-shadow: 0 0 18px rgba(200,255,77,.08); transform: translateX(4px); } }
.phoenix-fresh { position: absolute; z-index: 3; right: 24%; bottom: 47px; display: flex; align-items: center; gap: 7px; color: #7890a4; font: 700 10px/1 Consolas, monospace; letter-spacing: .08em; }.phoenix-fresh i { width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--lime); box-shadow: 0 0 9px rgba(200,255,77,.56); animation: phoenix-fresh-pulse 2.2s ease-in-out infinite; }
@keyframes phoenix-fresh-pulse { 50% { opacity: .35; transform: scale(.7); } }
.project--phoenix .project__copy { position: relative; inset: auto; width: 100%; max-width: 760px; padding-right: 0; }
.project--phoenix .project__copy p { margin-bottom: 16px; }
.project--phoenix .project__copy h3 { margin-bottom: 24px; font-size: clamp(56px, 4vw, 80px); line-height: .88; }
.project--phoenix .project__copy > span { max-width: 690px; color: #a7b4c1; font-size: clamp(19px, 1.25vw, 23px); line-height: 1.5; }
.phoenix-capabilities { margin-top: 28px; border-top: 1px solid var(--line); }
.phoenix-capabilities > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); transition: padding .35s var(--ease), background .3s ease; }
.phoenix-capabilities > div:hover { padding-inline: 9px; background: rgba(145,197,243,.035); }
.phoenix-capabilities i { padding-top: 2px; color: var(--ice); font: 700 11px/1 Consolas, monospace; font-style: normal; letter-spacing: .08em; }
.phoenix-capabilities b { display: block; color: var(--snow); font-size: 16px; line-height: 1.1; }
.phoenix-capabilities small { display: block; margin-top: 6px; color: #8393a3; font-size: 14px; line-height: 1.42; }
.phoenix-runtimes { display: block; margin-top: 18px; color: #718397; font: 700 11px/1.5 Consolas, monospace; letter-spacing: .04em; }
.starfish-visual { position: absolute; top: 82px; right: 6%; left: 6%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; height: 278px; padding: 8px; }
.starfish-visual::before { position: absolute; inset: -10px; content: ""; opacity: .55; background-image: linear-gradient(rgba(145,197,243,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(145,197,243,.055) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse, #000 25%, transparent 72%); }
.starfish-fabric { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; }
.starfish-fabric path { fill: none; stroke: rgba(145,197,243,.42); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; animation: starfish-fabric 4s linear infinite; }
.starfish-fabric circle { fill: var(--ice); filter: drop-shadow(0 0 5px var(--ice)); animation: starfish-node 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.starfish-numa { position: relative; z-index: 2; display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; padding: 13px; border: 1px solid rgba(145,197,243,.3); border-radius: 10px; background: linear-gradient(135deg, rgba(15,42,64,.96), rgba(7,22,35,.96)); box-shadow: 0 10px 24px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.025); }
.starfish-numa::before { position: absolute; top: 0; left: 13px; width: 45px; height: 1px; content: ""; background: var(--ice); box-shadow: 0 0 10px rgba(145,197,243,.65); }
.starfish-numa__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ice); font: 700 6px/1 Consolas, monospace; letter-spacing: .11em; }
.starfish-numa__label b { color: #708196; font-size: 5px; font-weight: 700; }
.starfish-core-stack { position: relative; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 3px; min-height: 0; margin-top: 8px; }
.starfish-core-stack::before { position: absolute; top: 12px; bottom: 12px; left: 14px; width: 1px; content: ""; background: rgba(145,197,243,.18); }
.starfish-core-row { display: grid; grid-template-columns: 29px minmax(0, 1fr); gap: 9px; align-items: center; min-width: 0; }
.starfish-reactor { position: relative; z-index: 1; display: grid; place-items: center; justify-self: center; width: 23px; aspect-ratio: 1; color: #91c5f3; border: 1px solid rgba(145,197,243,.42); border-radius: 3px; background: #0a1b2a; box-shadow: 0 0 16px rgba(145,197,243,.09); font: 700 3.5px/1 Consolas, monospace; letter-spacing: .04em; }
.starfish-reactor::before { position: absolute; top: 5px; left: -5px; width: 4px; height: 1px; content: ""; background: rgba(145,197,243,.46); box-shadow: 0 6px rgba(145,197,243,.46), 0 12px rgba(145,197,243,.46), 29px 0 rgba(145,197,243,.46), 29px 6px rgba(145,197,243,.46), 29px 12px rgba(145,197,243,.46); }
.starfish-reactor::after { position: absolute; top: -5px; left: 5px; width: 1px; height: 4px; content: ""; background: rgba(145,197,243,.46); box-shadow: 6px 0 rgba(145,197,243,.46), 12px 0 rgba(145,197,243,.46), 0 29px rgba(145,197,243,.46), 6px 29px rgba(145,197,243,.46), 12px 29px rgba(145,197,243,.46); }
.starfish-reactor span { position: relative; z-index: 2; }
.starfish-reactor i { position: absolute; inset: 4px; border: 1px dashed rgba(145,197,243,.28); border-radius: 1px; background: rgba(145,197,243,.05); animation: starfish-reactor-pulse 2.8s ease-in-out infinite; animation-delay: var(--phase); }
.starfish-reactor.is-working i { border-color: rgba(255,91,69,.82); background: rgba(255,91,69,.2); box-shadow: 0 0 9px rgba(255,91,69,.38); }
.starfish-queue { min-width: 0; }
.starfish-queue small { display: block; overflow: hidden; margin-bottom: 3px; color: #687b8f; font: 650 4px/1 Consolas, monospace; letter-spacing: .08em; white-space: nowrap; }
.starfish-queue small::before { color: var(--signal); content: "POP ← "; }.starfish-queue small::after { color: var(--lime); content: " ← ADD"; }
.starfish-queue > span { position: relative; display: flex; align-items: center; gap: 3px; min-width: 0; min-height: 16px; overflow: hidden; padding: 3px 5px; border: 1px solid rgba(145,197,243,.15); border-radius: 3px; background: linear-gradient(90deg, rgba(255,91,69,.05), rgba(2,12,20,.48) 18%, rgba(2,12,20,.48) 82%, rgba(200,255,77,.035)); box-shadow: inset 4px 0 7px -6px var(--signal), inset -4px 0 7px -6px var(--lime); }
.starfish-queue i { flex: 0 0 auto; width: 6px; height: 7px; border: 1px solid rgba(145,197,243,.34); border-radius: 1px; background: rgba(145,197,243,.16); transition: width .24s var(--ease), opacity .2s ease, transform .24s var(--ease), border-width .24s ease; }
.starfish-queue i:nth-last-child(-n+2) { border-color: rgba(200,255,77,.58); background: rgba(200,255,77,.4); box-shadow: 0 0 5px rgba(200,255,77,.18); }
.starfish-queue i.is-entering { width: 0; opacity: 0; border-width: 0; transform: translateX(6px); }
.starfish-queue i.is-leaving { width: 0; opacity: 0; border-width: 0; transform: translateX(-6px); }
@keyframes starfish-fabric { to { stroke-dashoffset: -110; } }
@keyframes starfish-node { 50% { opacity: .25; transform: scale(.55); } }
@keyframes starfish-reactor-pulse { 50% { border-color: rgba(121,214,208,.72); background: rgba(121,214,208,.14); box-shadow: 0 0 10px rgba(121,214,208,.26); } }

@media (min-width: 1001px) {
    .project--starfish .starfish-visual { top: 100px; right: 4%; left: auto; width: 64%; height: 350px; }
}

/* Education */
.education { color: var(--paper-ink); background: #dadfe3; }
.education::before { position: absolute; inset: 0; content: ""; opacity: .22; background-image: linear-gradient(rgba(17,26,33,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(17,26,33,.12) 1px, transparent 1px); background-size: 80px 80px; }
.education .kicker { color: #5f6a72; }.education .kicker span { color: #c43f31; border-color: rgba(196,63,49,.3); }
.education__layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(460px,.7fr); gap: 9vw; align-items: center; }
.education h2 { font-size: clamp(56px,6.3vw,118px); }
.education__card { position: relative; min-height: 570px; padding: clamp(35px,4vw,65px); overflow: hidden; border: 1px solid rgba(17,26,33,.2); border-radius: var(--radius); background: rgba(244,245,242,.65); box-shadow: 0 28px 70px rgba(17,26,33,.12); transform-style: preserve-3d; }
.education__year { color: #a33f36; font: 700 9px/1 Consolas, monospace; letter-spacing: .12em; }.education__card > p { margin: 60px 0 12px; color: #536069; font-size: 16px; }.education__card h3 { margin: 0; font-size: clamp(42px,4.2vw,72px); line-height: .94; letter-spacing: -.06em; }.education__card ul { margin: 12px 0 0; padding: 0; list-style: none; color: #5d6870; font-size: 16px; }.education__card li { padding: 11px 0; border-top: 1px solid rgba(17,26,33,.12); }.education__wave { position: absolute; right: 0; bottom: 0; left: 0; height: 68px; overflow: hidden; }.education__wave svg { width: 100%; height: 100%; }.education__wave line { stroke: rgba(196,63,49,.08); stroke-width: 1; vector-effect: non-scaling-stroke; }.education__wave path { fill: none; stroke: var(--signal); stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .68; filter: drop-shadow(0 0 3px rgba(255,91,69,.12)); }.education__wave path:nth-of-type(2) { opacity: .9; }.education__wave path:nth-of-type(3) { opacity: .74; }
.education__card .education__degree { margin: 20px 0 0; color: #2f3c45; font-size: clamp(19px, 1.6vw, 27px); font-weight: 680; letter-spacing: -.03em; }

/* Contact */
.contact { min-height: 900px; overflow: hidden; display: flex; align-items: center; background: var(--signal); color: #100c0b; }
.contact::before { position: absolute; inset: 0; content: ""; opacity: .24; background-image: linear-gradient(rgba(16,12,11,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(16,12,11,.16) 1px, transparent 1px); background-size: 96px 96px; }
.contact-field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .38; mix-blend-mode: multiply; }
.contact__inner { position: relative; z-index: 2; }
.contact .kicker { color: rgba(16,12,11,.8); }.contact .kicker span { color: #100c0b; border-color: rgba(16,12,11,.42); }
.contact h2 { max-width: 1250px; margin-top: 22px; font-size: clamp(90px, 12vw, 230px); line-height: .72; }
.contact__intro { max-width: 650px; margin: 56px 0 65px; color: rgba(16,12,11,.84); font-size: clamp(18px,1.5vw,25px); line-height: 1.55; }
.contact__email { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 28px 0; border-top: 2px solid rgba(16,12,11,.85); border-bottom: 2px solid rgba(16,12,11,.85); font-size: clamp(27px,4vw,72px); font-weight: 750; line-height: 1; letter-spacing: -.055em; transition: padding .5s var(--ease); }
.contact__email:hover { padding-inline: 20px; }.contact__email i { display: grid; place-items: center; width: .85em; aspect-ratio: 1; border: 2px solid currentColor; border-radius: 50%; font-size: .47em; font-style: normal; transition: transform .5s var(--ease); }.contact__email:hover i { transform: rotate(45deg); }
.contact__links { display: flex; gap: 35px; margin-top: 30px; }.contact__links a { padding: 8px 0; font-size: 12px; font-weight: 750; border-bottom: 1px solid rgba(16,12,11,.35); }.contact__links span { margin-left: 6px; }

/* Footer */
.site-footer { position: relative; z-index: 2; color: #79899c; background: #050c13; border-top: 1px solid rgba(145,197,243,.12); }
.site-footer .shell { display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 110px; font: 600 9px/1.4 Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.site-footer p { margin: 0; }.site-footer p span { color: #394c60; margin: 0 7px; }.site-footer a { color: var(--snow); }

/* Focus */
:focus-visible { outline: 2px solid var(--lime); outline-offset: 5px; }
.trajectory :focus-visible, .education :focus-visible, .contact :focus-visible { outline-color: var(--paper-ink); }

/* Readability floor for labels, metadata and diagram annotations. */
.boot__label,
.motion-toggle__label,
.eyebrow,
.kicker,
.hero__facts dt,
.case__header,
.case__eyebrow,
.layer-detail__index,
.stack-layer > span,
.career-stop span,
.career-ledger__year,
.education__year,
.site-footer .shell { font-size: var(--ui-label-size); }

.portrait__caption,
.hero__footer,
.kicker span,
.tags li,
.queue-visual__core,
.queue-visual__label,
.stack-layer small,
.stack-stage__hint,
.career-ledger__earlier-grid article > span,
.project header,
.project__copy p { font-size: var(--ui-caption-size); }

.site-nav a,
.contact__links a { font-size: var(--ui-label-size); }
.hero__eyebrow { font-size: clamp(18px, 1.05vw, 20px); letter-spacing: .08em; }
.career-stop small { font-size: 15px; }

.engine-ring--outer i,
.engine-ring--inner small,
.engine-orbit i,
.tools-visual__source,
.phoenix-core span,
.phoenix-core b,
.starfish-numa__label { font-size: 11px; }
.starfish-numa__label b { font-size: 10px; }
.starfish-reactor { font-size: 9px; }
.starfish-queue small { font-size: 10px; }

/* Motion pause */
.motion-paused { scroll-behavior: auto; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; transition-duration: .001ms !important; }

/* Responsive */
@media (max-width: 1280px) {
    :root { --shell: min(1180px, calc(100vw - 64px)); }
    .site-header { padding-inline: 32px; }
    .hero__content { grid-template-columns: minmax(0,1fr) minmax(390px,.62fr); gap: 45px; }
    .hero__title { font-size: clamp(68px, 7.2vw, 104px); }
    .portrait { width: min(100%, 500px); }
    .case { grid-template-columns: minmax(0,1fr) minmax(370px,.72fr); }
    .depth__layout { grid-template-columns: minmax(320px,.62fr) minmax(520px,1fr); gap: 4vw; }
}

@media (max-width: 1180px) {
    .case--engine { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
    .case--engine .case__visual { height: 560px; min-height: 0; }
    .case__copy--engine { padding-top: 38px; }
    .project--termal { min-height: 0; }
    .termal-body { grid-template-columns: 1fr; gap: 34px; min-height: 0; }
    .termal-visual { height: 430px; }
    .project--termal .project__copy { max-width: 760px; padding: 0 52px 42px 0; }
    .project--phoenix { min-height: 0; }.phoenix-body { grid-template-columns: 1fr; gap: 34px; min-height: 0; }.phoenix-visual { top: auto; right: auto; left: auto; width: 100%; height: 430px; }.project--phoenix .project__copy { width: auto; max-width: 760px; padding: 0 52px 42px 0; }.project--phoenix .project__copy h3 { font-size: clamp(52px, 7vw, 76px); }
}

@media (max-width: 1040px) {
    :root { --shell: calc(100vw - 48px); --header-h: 72px; }
    .brand__name, .motion-toggle__label { display: none; }
    .site-nav { gap: 22px; }
    .hero__content { grid-template-columns: minmax(0,1fr) minmax(330px,.62fr); padding-top: 120px; }
    .hero__title { font-size: clamp(62px, 7.6vw, 85px); }
    .hero__intro { font-size: 17px; }
    .case { grid-template-columns: 1fr 1fr; column-gap: 35px; }
    .case__visual { min-height: 330px; }.case__copy { padding-top: 50px; }
    .depth__layout { grid-template-columns: 1fr; min-height: auto; }.depth__intro { max-width: 780px; }.stack-stage { min-height: 700px; }.stack-scene { width: min(82%,680px); }
    .education__layout { grid-template-columns: 1fr; }.education__card { max-width: 760px; }
}

@media (max-width: 800px) {
    :root { --shell: calc(100vw - 36px); --radius: 20px; }
    .site-header { height: 66px; padding-inline: 18px; grid-template-columns: auto 1fr auto; }
    .site-header.is-scrolled { height: 60px; }
    .motion-toggle { grid-column: 2; grid-row: 1; justify-self: end; margin-right: 14px; }
    .menu-toggle { position: relative; z-index: 3; grid-column: 3; display: grid; gap: 5px; width: 40px; height: 40px; place-content: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(7,17,29,.65); cursor: pointer; }
    .menu-toggle span:not(.sr-only) { display: block; width: 16px; height: 1px; background: var(--snow); transition: transform .3s var(--ease); }.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
    .site-nav { position: fixed; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2vh; padding: 80px 9vw; background: rgba(7,17,29,.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .35s ease, visibility .35s, transform .35s var(--ease); }
    .site-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }.site-nav a { font-size: clamp(34px,9vw,62px); font-weight: 720; letter-spacing: -.05em; }.site-nav a::after { display: none; }.site-nav .nav-contact { margin-top: 20px; color: var(--signal); font-size: 18px; letter-spacing: -.02em; }
    .hero { min-height: auto; }
    .hero__grid { background-size: 64px 64px; }
    .hero__content { grid-template-columns: 1fr; min-height: auto; gap: 55px; padding: 110px 0 85px; }
    .hero__copy { padding: 0; }.hero__eyebrow { font-size: 16px; }
    .hero__title { margin: 24px 0 23px; font-size: clamp(60px,14.5vw,100px); line-height: .8; }.title-line--accent { font-size: .67em; }
    .hero__intro { max-width: 580px; margin-bottom: 26px; }
    .hero__facts { margin-top: 40px; }
    .portrait { width: min(92vw, 560px); }.portrait__frame { aspect-ratio: 4 / 5; }.portrait img { object-position: 50% 52%; }.portrait__caption { flex-wrap: wrap; }
    .hero__footer { display: none; }
    .section { padding-block: 110px; }
    .section-heading--split { grid-template-columns: 1fr; gap: 35px; }.section-heading__aside { max-width: 620px; }.trajectory .section-heading__aside { padding-right: 0; }
    .section-heading h2, .depth h2, .education h2 { font-size: clamp(54px,13vw,94px); }
    .trajectory__statement { margin-bottom: 65px; font-size: clamp(36px,9.5vw,64px); }
    .case { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }.case__header { grid-column: 1; }.case__visual { height: 430px; min-height: 0; }.case__copy { padding-top: 35px; }.case__copy h3 { font-size: clamp(44px,10vw,74px); }.case--engine .case__visual { height: 480px; }
    .depth__intro > p:not(.kicker) { margin-top: 28px; }.layer-detail { margin-top: 45px; }.stack-stage { min-height: 640px; margin-top: 30px; }.stack-scene { width: min(86%,600px); height: 470px; }.stack-layer { height: 115px; top: calc(var(--i) * 64px); padding-inline: 22px; }
    .career-map { height: 500px; margin-bottom: 70px; }.career-map::before { position: absolute; top: 34px; bottom: 22px; left: 50%; width: 7px; content: ""; background: linear-gradient(to bottom, var(--signal), rgba(196,63,49,.2) 76%, #8eaf37 90%, var(--lime)); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); transform: translateX(-50%); }.career-map__path { display: none; }.career-stop { left: auto !important; right: auto !important; top: auto !important; min-width: 180px; }.career-stop--one { top: 30px !important; left: 8% !important; }.career-stop--two { top: 125px !important; right: 7% !important; }.career-stop--three { top: 225px !important; left: 10% !important; }.career-stop--four { top: 330px !important; right: 6% !important; }.career-stop--now { top: 430px !important; left: 22% !important; justify-items: start; text-align: left; }.career-stop--now > span, .career-stop--now > b, .career-stop--now > small { transform: none; }
    .career-ledger > article { grid-template-columns: 110px 1fr; column-gap: 24px; row-gap: 8px; }.career-ledger > article.is-expanded { transform: none; }.career-ledger__insight { grid-column: 2; grid-template-columns: 1fr !important; gap: 10px; justify-self: start; max-width: none; }.career-ledger__scope { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.career-ledger__toggle { flex: none; }.career-ledger__focus, .career-ledger > article.is-expanded .career-ledger__focus { text-align: left; white-space: normal; }.career-ledger__detail { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-6px); transition: max-height .36s var(--ease), opacity .22s var(--ease), transform .32s var(--ease); }.career-ledger > article.is-expanded .career-ledger__detail { max-height: 300px; opacity: 1; transform: translateY(0); }.career-ledger__detail > div { width: auto; margin-left: 0; padding-left: 14px; }.career-ledger__earlier-grid { grid-template-columns: repeat(2,1fr); }
    .project-sections { gap: 0; }.project, .project--termal { min-height: 620px; }.termal-visual { top: 88px; right: 4%; left: 4%; width: auto; height: 320px; }.termal-node { top: calc(46px + var(--slot) * 52px); min-height: 42px; padding: 7px 8px; }.termal-layer__label { font-size: 9px; }.termal-user__avatar { width: 50px; }.termal-tree__legend { display: none; }.project__copy { max-width: calc(100% - 90px); }
    .project--termal { min-height: 0; }.termal-body { grid-template-columns: 1fr; gap: 34px; min-height: 0; margin-top: 28px; }.termal-visual { top: auto; right: auto; left: auto; width: 100%; height: 350px; }.project--termal .project__copy { width: auto; max-width: 680px; padding: 0 52px 38px 0; }.project--termal .project__copy h3 { font-size: clamp(64px, 13vw, 96px); }.termal-capabilities { max-width: 640px; }
    .phoenix-body { gap: 30px; margin-top: 28px; }.phoenix-visual { height: 350px; }.project--phoenix .project__copy { padding-right: 52px; }.phoenix-capabilities { max-width: 700px; }
    .education__layout { gap: 60px; }.education__card { min-height: 520px; }
    .contact { min-height: 780px; }.contact h2 { font-size: clamp(82px,19vw,150px); }.contact__email { font-size: clamp(23px,5vw,48px); }
    .site-footer .shell { flex-wrap: wrap; padding-block: 30px; }.site-footer p:nth-child(2) { order: 3; width: 100%; }
}

@media (max-width: 520px) {
    :root { --shell: calc(100vw - 28px); }
    .cursor-glow { display: none; }
    .hero__content { padding-top: 92px; gap: 42px; }
    .hero__title { font-size: clamp(53px,16vw,82px); }.title-line--accent { font-size: .66em; }
    .hero__intro { font-size: 16px; line-height: 1.5; }
    .hero__actions { gap: 18px; align-items: flex-start; flex-direction: column; }.button { width: 100%; min-width: 0; }
    .hero__facts { display: grid; grid-template-columns: repeat(3,1fr); }.hero__facts div { padding: 14px 8px 0 0; }.hero__facts div + div { padding-left: 8px; }.hero__facts dd { font-size: 14px; }.hero__facts dt { font-size: 14px; }
    .portrait { width: calc(100% - 18px); }.portrait__frame { border-radius: 16px 76px 16px 16px; aspect-ratio: 4 / 5; }.portrait__frame::before { border-radius: 10px 64px 10px 10px; }.portrait__backdrop { border-radius: 18px 82px 18px 18px; }.portrait__caption { flex-direction: column; gap: 6px; font-size: 14px; }
    .section { padding-block: 88px; }.section-heading { margin-bottom: 52px; }.kicker { margin-bottom: 18px; }.section-heading h2, .depth h2, .education h2 { font-size: clamp(48px,14.8vw,74px); }
    .case { padding: 22px; }.case__header { font-size: 14px; }.case__visual { height: 320px; margin-top: 22px; }.case__copy h3 { font-size: 12.5vw; }.case--queue .case__visual { height: 255px; }.case--queue .queue-diagram__heading, .case--queue .queue-diagram__note, .case--queue .fair-queue text { font-size: 24px; }.case--queue .queue-governor text { display: none; }.case--engine .case__visual { height: min(151vw, 590px); }.case--engine .engine-isometric svg { inset: 0 auto 0 50%; width: min(169vw, 660px); height: min(151vw, 590px); max-width: none; transform: translateX(-50%); }.case--engine .sql-architecture__annotations, .case--engine .sql-architecture__skip { display: none; }.engine-achievements { grid-template-columns: 1fr; }.engine-achievement { min-height: 0; }.tools-visual__source { left: 5%; width: 70px; }.tools-visual__beam { left: calc(5% + 70px); width: 25%; }.tools-visual__panels { right: 4%; width: 41%; }.tools-visual__panels > span { height: 43px; padding: 0 10px; }
    .stack-stage { min-height: 510px; }.stack-scene { width: 92%; height: 400px; transform: translate(-50%,-48%) rotateX(55deg) rotateZ(-23deg); }.stack-layer { grid-template-columns: 30px 1fr; height: 88px; top: calc(var(--i) * 58px); padding: 0 15px; border-radius: 9px; }.stack-layer:hover, .stack-layer.is-active { transform: translateZ(calc((4 - var(--i)) * 18px + 20px)) translateY(-2px); }.stack-layer b { font-size: 14px; }.stack-layer small { display: none; }.stack-stage__hint { bottom: -5px; }
    .career-map { height: 510px; }.career-stop b { font-size: 18px; }.career-stop small { font-size: 14px; }.career-stop--two,.career-stop--four { right: 0 !important; }.career-ledger > article { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }.career-ledger__insight { grid-column: 1; }.career-ledger__earlier summary span:last-child { font-size: 0; }.career-ledger__earlier summary span:last-child i { font-size: 14px; }.career-ledger__earlier-grid { grid-template-columns: 1fr; }
    .project-sections { gap: 0; }.project, .project--termal { min-height: 540px; padding: 22px; }.project header { font-size: 14px; }.project__copy { right: 22px; bottom: 24px; left: 22px; max-width: calc(100% - 66px); }.project__copy h3, .project--starfish .project__copy h3 { font-size: 48px; }.project--phoenix .project__copy h3 { font-size: clamp(35px, 10.5vw, 46px); }.project__copy > span { font-size: 15px; }.termal-visual { top: 76px; right: 1%; left: 1%; height: 275px; }.termal-visual::before { inset-inline: 0; }.termal-user { width: 15%; font-size: 10px; }.termal-user small { display: none; }.termal-user__avatar { width: 36px; }.termal-user__avatar::before { top: 8px; width: 8px; }.termal-user__avatar::after { bottom: 7px; width: 19px; height: 10px; }.termal-user__avatar i { top: 4px; width: 6px; }.termal-layer { width: 21%; }.termal-layer--primary { left: 19%; }.termal-layer--spawned { left: 45%; }.termal-layer--terminal { left: 71%; }.termal-layer__label { top: 7px; overflow: hidden; width: 100%; font-size: 0; text-overflow: ellipsis; }.termal-layer__label::after { content: attr(data-short); font-size: 9px; }.termal-node { top: calc(40px + var(--slot) * 43px); grid-template-columns: 6px minmax(0, 1fr); gap: 5px; min-height: 36px; padding: 6px; }.termal-node b { font-size: 0; }.termal-node b::after { content: attr(data-short); font-size: 10px; }.termal-node small { display: none; }.phoenix-visual { top: 68px; right: 4%; left: 4%; height: 245px; }.starfish-visual { top: 68px; right: 1%; left: 1%; gap: 7px; width: auto; height: 270px; padding: 0; }.starfish-numa { padding: 7px; }.starfish-numa::before { left: 7px; width: 30px; }.starfish-numa__label { font-size: 9px; }.starfish-numa__label b { font-size: 8px; }.starfish-core-stack { gap: 2px; margin-top: 6px; }.starfish-core-row { grid-template-columns: 25px minmax(0,1fr); gap: 5px; }.starfish-reactor { width: 19px; font-size: 8px; }.starfish-reactor::before { top: 4px; left: -4px; width: 3px; box-shadow: 0 5px rgba(145,197,243,.46), 0 10px rgba(145,197,243,.46), 23px 0 rgba(145,197,243,.46), 23px 5px rgba(145,197,243,.46), 23px 10px rgba(145,197,243,.46); }.starfish-reactor::after { top: -4px; left: 4px; height: 3px; box-shadow: 5px 0 rgba(145,197,243,.46), 10px 0 rgba(145,197,243,.46), 0 23px rgba(145,197,243,.46), 5px 23px rgba(145,197,243,.46), 10px 23px rgba(145,197,243,.46); }.starfish-reactor i { inset: 3px; }.starfish-queue small { display: none; }.starfish-queue > span { gap: 2px; padding: 2px; }.starfish-queue i { height: 7px; }
    .termal-body { gap: 22px; margin-top: 24px; }.termal-visual { top: auto; right: auto; left: auto; width: 100%; height: 275px; }.project--termal .project__copy { width: auto; max-width: none; padding: 0 36px 46px 0; }.project--termal .project__copy h3 { margin-bottom: 17px; font-size: 54px; }.project--termal .project__copy > span { font-size: 16px; }.termal-capabilities { margin-top: 24px; }.termal-capabilities > div { grid-template-columns: 25px minmax(0, 1fr); gap: 9px; padding: 13px 0; }.termal-capabilities b { font-size: 15px; }.termal-capabilities small { font-size: 14px; }.termal-runtimes { margin-top: 17px; font-size: 11px; }
    .phoenix-body { gap: 20px; margin-top: 24px; }.phoenix-visual { top: auto; right: auto; left: auto; width: 100%; height: 285px; }.phoenix-clients { top: 45px; bottom: 45px; width: 16%; }.phoenix-clients > span { display: grid; place-items: center; min-height: 42px; padding: 4px; }.phoenix-clients b, .phoenix-clients small { display: none; }.phoenix-clients i { grid-row: auto; width: 23px; }.phoenix-core { left: 31.5%; width: 62px; }.phoenix-core::before { inset: 6px; }.phoenix-core::after { inset: -4px; }.phoenix-core span { font-size: 8px; }.phoenix-core b, .phoenix-core i { display: none; }.phoenix-repo-label { top: 7px; left: 44%; }.phoenix-repo-label span { font-size: 8px; }.phoenix-repo-label b, .phoenix-repo-label small { display: none; }.phoenix-results { top: 44px; width: 24%; gap: 8px; }.phoenix-results__label { font-size: 8px; }.phoenix-results > span:not(.phoenix-results__label) { flex-direction: column; justify-content: center; gap: 5px; min-height: 44px; padding: 6px; }.phoenix-results b, .phoenix-results i { font-size: 8px; }.phoenix-fresh { right: 24%; bottom: 8px; font-size: 8px; }.project--phoenix .project__copy { max-width: none; padding: 0 36px 46px 0; }.project--phoenix .project__copy h3 { margin-bottom: 17px; font-size: clamp(37px, 10.4vw, 44px); }.project--phoenix .project__copy > span { font-size: 16px; }.phoenix-capabilities { margin-top: 24px; }.phoenix-capabilities > div { grid-template-columns: 25px minmax(0, 1fr); gap: 9px; padding: 13px 0; }.phoenix-capabilities b { font-size: 15px; }.phoenix-capabilities small { font-size: 14px; }.phoenix-runtimes { margin-top: 17px; font-size: 11px; }
    .education__card { min-height: 520px; padding: 28px; }.education__card > p { margin-top: 45px; }.education__card h3 { font-size: 42px; }.education__card ul { margin-top: 28px; font-size: 15px; }
    .contact { min-height: 680px; }.contact h2 { font-size: clamp(68px,20vw,110px); }.contact__intro { margin: 38px 0 48px; font-size: 16px; }.contact__email { padding-block: 20px; font-size: clamp(17px,5.2vw,29px); }.contact__email i { width: auto; border: 0; font-size: 1em; }.contact__links { flex-wrap: wrap; gap: 18px; }
    .site-footer .shell { display: grid; gap: 16px; }.site-footer p:nth-child(2) { order: initial; }.site-footer p span { margin: 0 3px; }
}

/* Each project keeps the portfolio typography, but owns a different visual system. */
.project--termal {
    --termal-paper: #f8f1e6;
    --termal-panel: #fffaf2;
    --termal-ink: #302c28;
    --termal-muted: #7a736b;
    --termal-line: #dfd1c1;
    --termal-teal: #4e8c7a;
    --termal-blue: #608797;
    --termal-coral: #d96f56;
    color: var(--termal-ink);
    border-radius: 0;
    background:
        radial-gradient(circle at 13% 46%, rgba(217,111,86,.11), transparent 31%),
        linear-gradient(112deg, #f5eadc, #fffaf1 50%, #f4eee5 82%);
    box-shadow: inset 3px 0 var(--termal-coral);
}
.project--termal:hover { background: radial-gradient(circle at 13% 46%, rgba(217,111,86,.14), transparent 33%), linear-gradient(112deg, #f8eddf, #fffdf7 50%, #f7f1e8 82%); }
.project--termal header { color: #81786f; }.project--termal header span:first-child { color: var(--termal-coral); }
.project--termal::before { position: absolute; top: 0; right: 72px; width: 170px; height: 1px; content: ""; background: linear-gradient(90deg, transparent, var(--termal-coral)); box-shadow: 0 0 18px rgba(217,111,86,.28); }
.project--termal .termal-visual::before { opacity: .86; background-image: linear-gradient(rgba(108,91,75,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(108,91,75,.075) 1px, transparent 1px); }
.project--termal .termal-edge--direct { stroke: rgba(96,135,151,.62); }.project--termal .termal-edge--spawn { stroke: rgba(78,140,122,.62); }.project--termal .termal-edge--terminal { stroke: rgba(217,111,86,.58); }
.project--termal .termal-user { color: var(--termal-ink); }.project--termal .termal-user small { color: var(--termal-muted); }
.project--termal .termal-user__avatar { border-color: rgba(96,135,151,.55); background: radial-gradient(circle, rgba(96,135,151,.12), rgba(255,250,242,.92) 68%); box-shadow: 0 0 24px rgba(96,135,151,.12); }
.project--termal .termal-user__avatar::before { border-color: var(--termal-blue); background: var(--termal-panel); animation-name: termal-product-head; }.project--termal .termal-user__avatar::after { border-color: var(--termal-blue); animation-name: termal-product-body; }.project--termal .termal-user__avatar i { border-color: var(--termal-panel); background: var(--termal-teal); }
@keyframes termal-product-head { 0%,100% { border-color: rgba(96,135,151,.72); box-shadow: 0 0 2px rgba(96,135,151,.12); } 50% { border-color: #3f8272; box-shadow: 0 0 7px rgba(78,140,122,.5), 0 0 14px rgba(78,140,122,.2); } }
@keyframes termal-product-body { 0%,100% { border-color: rgba(96,135,151,.72); filter: drop-shadow(0 0 1px rgba(96,135,151,.1)); } 50% { border-color: #3f8272; filter: drop-shadow(0 0 4px rgba(78,140,122,.46)); } }
.project--termal .termal-layer::before { background: linear-gradient(to bottom, transparent, rgba(108,91,75,.18) 12%, rgba(108,91,75,.18) 88%, transparent); }
.project--termal .termal-layer__label { color: #7c746c; }.project--termal .termal-layer--primary .termal-layer__label { color: var(--termal-blue); }.project--termal .termal-layer--spawned .termal-layer__label { color: var(--termal-teal); }.project--termal .termal-layer--terminal .termal-layer__label { color: var(--termal-coral); }
.project--termal .termal-node { color: var(--termal-ink); border-color: rgba(96,135,151,.28); background: rgba(255,250,242,.9); box-shadow: 0 8px 22px rgba(65,48,34,.09); }
.project--termal .termal-node b { color: var(--termal-ink); }.project--termal .termal-node small { color: var(--termal-muted); }
.project--termal .termal-node--primary { border-color: rgba(96,135,151,.36); }.project--termal .termal-node--primary > i { background: var(--termal-blue); box-shadow: 0 0 9px rgba(96,135,151,.55); }
.project--termal .termal-node--spawned { border-color: rgba(78,140,122,.38); }.project--termal .termal-node--spawned > i { background: var(--termal-teal); box-shadow: 0 0 9px rgba(78,140,122,.52); }
.project--termal .termal-node--terminal { border-color: rgba(217,111,86,.38); }.project--termal .termal-node--terminal > i { background: var(--termal-coral); box-shadow: 0 0 9px rgba(217,111,86,.48); }
.project--termal .termal-tree__legend { color: var(--termal-muted); }.project--termal .termal-tree__legend i { background: var(--termal-blue); }.project--termal .termal-tree__legend span:nth-child(2) i { background: var(--termal-teal); }.project--termal .termal-tree__legend span:nth-child(3) i { background: var(--termal-coral); }
.project--termal .termal-copy { padding-left: clamp(22px, 2vw, 34px); border-left: 1px solid var(--termal-line); }
.project--termal .termal-copy p { color: var(--termal-coral); }.project--termal .termal-copy h3 { color: var(--termal-ink); }.project--termal .termal-copy > span { color: #615a54; }
.project--termal .termal-capabilities { border-color: var(--termal-line); }.project--termal .termal-capabilities > div { border-color: var(--termal-line); }.project--termal .termal-capabilities > div:hover { background: rgba(217,111,86,.055); }
.project--termal .termal-capabilities i { color: var(--termal-coral); }.project--termal .termal-capabilities b { color: var(--termal-ink); }.project--termal .termal-capabilities small { color: var(--termal-muted); }.project--termal .termal-runtimes { color: #81786f; }

.project--phoenix {
    color: #132632;
    border-radius: 0;
    background:
        linear-gradient(rgba(29,78,105,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,78,105,.055) 1px, transparent 1px),
        linear-gradient(115deg, #d7e6ed, #edf3f3 58%, #dce9ed);
    background-size: 42px 42px, 42px 42px, auto;
    box-shadow: inset 0 1px rgba(255,255,255,.8);
}
.project--phoenix:hover { background: linear-gradient(rgba(29,78,105,.065) 1px, transparent 1px), linear-gradient(90deg, rgba(29,78,105,.065) 1px, transparent 1px), linear-gradient(115deg, #dcebf1, #f4f7f5 58%, #e1eef1); background-size: 42px 42px, 42px 42px, auto; }
.project--phoenix::before { position: absolute; z-index: 0; inset: 0; content: ""; pointer-events: none; opacity: .42; background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(24,74,101,.035) 7px 8px); mask-image: linear-gradient(90deg, #000, transparent 68%); }
.project--phoenix header { color: #5b7482; }.project--phoenix header span:first-child { color: #17698f; }
.project--phoenix .phoenix-copy {
    padding: clamp(24px, 2.2vw, 38px);
    border: 1px solid rgba(35,81,105,.2);
    border-radius: 4px 34px 4px 4px;
    background: rgba(250,252,250,.62);
    box-shadow: 0 18px 50px rgba(23,55,71,.1), inset 2px 0 rgba(31,114,155,.58);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.project--phoenix .phoenix-visual::before { opacity: .72; background-image: linear-gradient(rgba(25,78,107,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(25,78,107,.09) 1px, transparent 1px); }
.project--phoenix .phoenix-route--client { stroke: rgba(27,91,126,.58); }.project--phoenix .phoenix-route--query { stroke: rgba(186,61,48,.72); }.project--phoenix .phoenix-route--answer { stroke: rgba(92,124,31,.78); }
.project--phoenix .phoenix-project-graph path { stroke: rgba(28,72,95,.25); }.project--phoenix .phoenix-project-graph .phoenix-project-graph__hot { stroke: rgba(28,94,129,.74); }
.project--phoenix .phoenix-project-graph circle { fill: #d4e3e8; stroke: rgba(25,77,104,.46); }.project--phoenix .phoenix-project-graph circle.is-hot { fill: #2c85ad; stroke: #f7ffff; filter: drop-shadow(0 0 5px rgba(28,94,129,.52)); }
.project--phoenix .phoenix-clients > span { border-color: rgba(31,83,110,.28); background: rgba(248,251,249,.78); box-shadow: 0 8px 18px rgba(28,61,78,.09); }
.project--phoenix .phoenix-clients i { color: #17698f; border-color: rgba(31,105,143,.46); }.project--phoenix .phoenix-clients b { color: #19313e; }.project--phoenix .phoenix-clients small { color: #617984; }
.project--phoenix .phoenix-core { border-color: rgba(186,61,48,.58); background: radial-gradient(circle, #f6fbf9, #c9dce4 72%); box-shadow: 0 0 40px rgba(33,102,136,.14); }
.project--phoenix .phoenix-core::before { border-color: rgba(28,94,129,.38); }.project--phoenix .phoenix-core::after { border-color: rgba(186,61,48,.2); }.project--phoenix .phoenix-core span { color: #b63e31; }.project--phoenix .phoenix-core b { color: #536d79; }
.project--phoenix .phoenix-repo-label span { color: #17698f; }.project--phoenix .phoenix-repo-label b { color: #415e6b; }.project--phoenix .phoenix-repo-label small { color: #6a7e86; }
.project--phoenix .phoenix-results__label { color: #526d79; }.project--phoenix .phoenix-results > span:not(.phoenix-results__label) { border-color: rgba(31,83,110,.28); background: rgba(249,252,250,.78); box-shadow: 0 8px 18px rgba(28,61,78,.08); }.project--phoenix .phoenix-results b { color: #213a46; }.project--phoenix .phoenix-results i { color: #587a16; }.project--phoenix .phoenix-results > span:last-child i { color: #a75a22; }
.project--phoenix .phoenix-fresh { color: #526d79; }.project--phoenix .phoenix-fresh i { background: #769d20; box-shadow: 0 0 9px rgba(118,157,32,.52); }
.project--phoenix .project__copy p { color: #b63e31; }.project--phoenix .project__copy h3 { color: #132632; }.project--phoenix .project__copy > span { color: #425965; }
.project--phoenix .phoenix-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 0; background: rgba(35,81,105,.17); }
.project--phoenix .phoenix-capabilities > div { min-height: 132px; padding: 16px; border: 0; background: rgba(246,250,248,.88); }
.project--phoenix .phoenix-capabilities > div:hover { padding: 16px; background: rgba(255,255,253,.98); }
.project--phoenix .phoenix-capabilities i { color: #17698f; }.project--phoenix .phoenix-capabilities b { color: #172d38; }.project--phoenix .phoenix-capabilities small { color: #546a75; }.project--phoenix .phoenix-runtimes { color: #586f7a; }

.project--starfish {
    color: #f3e8d2;
    border-radius: 0;
    background:
        radial-gradient(circle at 74% 45%, rgba(33,111,124,.2), transparent 34%),
        linear-gradient(rgba(121,214,208,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(121,214,208,.035) 1px, transparent 1px),
        linear-gradient(145deg, #071a24, #06131d 68%, #030c13);
    background-size: auto, 38px 38px, 38px 38px, auto;
    box-shadow: inset 0 3px rgba(255,107,94,.78), inset 0 -1px rgba(121,214,208,.18);
}
.project--starfish:hover { background: radial-gradient(circle at 74% 45%, rgba(39,130,143,.25), transparent 36%), linear-gradient(rgba(121,214,208,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(121,214,208,.045) 1px, transparent 1px), linear-gradient(145deg, #09212c, #071824 68%, #041019); background-size: auto, 38px 38px, 38px 38px, auto; }
.project--starfish header { color: #9fb8b7; }
.project--starfish header span:first-child { color: #ff6b5e; }
.project--starfish::before { position: absolute; right: -13%; bottom: -48%; width: 72%; aspect-ratio: 1; content: ""; border: 1px solid rgba(121,214,208,.1); border-radius: 50%; box-shadow: 0 0 0 70px rgba(121,214,208,.022), 0 0 0 140px rgba(121,214,208,.014); }
.starfish-body { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(430px,.95fr) minmax(650px,1.35fr) minmax(430px,.95fr); gap: clamp(24px, 2vw, 38px); align-items: center; min-height: 540px; margin-top: 42px; }
.starfish-architecture { position: relative; min-width: 0; height: 560px; padding-right: 18px; border-right: 1px solid rgba(121,214,208,.16); }
.starfish-architecture__label { position: absolute; z-index: 2; top: 0; left: 0; color: #9fb8b7; font: 700 15px/1 Consolas, monospace; letter-spacing: .1em; }
.starfish-architecture svg { width: 100%; height: calc(100% - 28px); margin-top: 28px; overflow: visible; filter: drop-shadow(0 18px 25px rgba(0,0,0,.24)); }
.starfish-architecture__flow path { fill: none; stroke: rgba(121,214,208,.48); stroke-width: 1.4; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; animation: starfish-architecture-flow 5.2s linear infinite; }
.starfish-architecture__flow .starfish-architecture__branch { stroke: rgba(243,232,210,.42); stroke-dasharray: 3 5; animation: none; }
.starfish-architecture__joins circle { fill: rgba(243,232,210,.55); }
@keyframes starfish-architecture-flow { to { stroke-dashoffset: -80; } }
.starfish-architecture__layer polygon, .starfish-architecture__protocols polygon, .starfish-architecture__backend polygon { stroke: rgba(243,232,210,.68); stroke-width: 1; vector-effect: non-scaling-stroke; }
.starfish-architecture__layer--storage .layer-top { fill: url(#starfish-storage-layer); }.starfish-architecture__layer--storage .layer-left { fill: #be713e; }.starfish-architecture__layer--storage .layer-right { fill: #df924a; }
.starfish-architecture__layer--module .layer-top { fill: url(#starfish-module-layer); }.starfish-architecture__layer--module .layer-left { fill: #a94f49; }.starfish-architecture__layer--module .layer-right { fill: #c86158; }
.starfish-architecture__layer--reactor .layer-top { fill: url(#starfish-reactor-layer); }.starfish-architecture__layer--reactor .layer-left { fill: #23666c; }.starfish-architecture__layer--reactor .layer-right { fill: #267881; }
.starfish-architecture__layer text { fill: #092632; text-anchor: middle; }
.starfish-architecture__layer .layer-title { font: 800 16px/1 Arial, sans-serif; letter-spacing: .035em; }
.starfish-architecture__layer .layer-detail { font: 700 12px/1 Consolas, monospace; letter-spacing: .045em; }
.starfish-architecture__layer .layer-detail--long { font-size: 11px; letter-spacing: .02em; }
.starfish-architecture__note { fill: #8fa9a9; font: 700 15px/1 Consolas, monospace; letter-spacing: .055em; text-anchor: middle; paint-order: stroke; stroke: #071a24; stroke-width: 5px; stroke-linejoin: round; }
.starfish-architecture__runtime-note { fill: #b2c2bd; font-size: 13px; text-anchor: end; }
.starfish-architecture__module-note { fill: #91a5a2; font: 700 12px/1 Consolas, monospace; letter-spacing: .035em; text-anchor: middle; paint-order: stroke; stroke: #071a24; stroke-width: 5px; stroke-linejoin: round; }
.starfish-architecture__protocols polygon { fill: #93a2cf; }.starfish-architecture__protocols .backend-side { fill: #596b9b; }.starfish-architecture__protocols text { fill: #071a24; font: 800 13px/1 Consolas, monospace; text-anchor: middle; }
.starfish-architecture__backend polygon { fill: #123748; }.starfish-architecture__backend .backend-side { fill: #0a2431; }.starfish-architecture__backend text { fill: #f3e8d2; font: 700 14px/1 Consolas, monospace; text-anchor: middle; }
.starfish-architecture__platform { fill: #779294; font: 700 14px/1 Consolas, monospace; letter-spacing: .08em; text-anchor: middle; }
.project--starfish .starfish-visual { position: relative; top: auto; right: auto; left: auto; box-sizing: border-box; width: 100%; height: 460px; padding: 8px 20px; gap: 30px; border-right: 1px solid rgba(121,214,208,.16); }
.project--starfish .project__copy { position: relative; inset: auto; width: 100%; max-width: none; transform: none; }
.starfish-console { position: absolute; z-index: 4; top: -27px; right: 8px; left: 8px; display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; color: #9fb8b7; border-bottom: 1px solid rgba(121,214,208,.2); font: 700 11px/1 Consolas, monospace; letter-spacing: .1em; }
.starfish-console b { display: flex; align-items: center; gap: 7px; color: #79d6d0; font-size: 11px; }
.starfish-console i { width: 7px; aspect-ratio: 1; border-radius: 50%; background: #ff6b5e; box-shadow: 0 0 11px rgba(255,107,94,.8); animation: starfish-console-live 1.8s ease-in-out infinite; }
@keyframes starfish-console-live { 50% { opacity: .3; transform: scale(.65); } }
.project--starfish .starfish-visual::before { background-image: linear-gradient(rgba(121,214,208,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(121,214,208,.055) 1px, transparent 1px); }
.project--starfish .starfish-fabric path { stroke: rgba(255,107,94,.5); stroke-width: 1.5; }.project--starfish .starfish-fabric circle { fill: #ff6b5e; filter: drop-shadow(0 0 6px rgba(255,107,94,.85)); }
.starfish-fabric .handoff-bead, .project--starfish .starfish-fabric .handoff-bead { fill: var(--lime); filter: drop-shadow(0 0 5px rgba(200,255,77,.75)); animation: starfish-handoff 2.8s linear infinite; }
.starfish-fabric .handoff-bead--back, .project--starfish .starfish-fabric .handoff-bead--back { animation-direction: reverse; animation-delay: -1.4s; }
@keyframes starfish-handoff { 0% { transform: translateX(230px); opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateX(290px); opacity: 0; } }
.project--starfish .starfish-numa { border-color: rgba(121,214,208,.32); background: linear-gradient(135deg, rgba(13,43,56,.97), rgba(5,20,30,.98)); box-shadow: 0 16px 34px rgba(0,0,0,.25), inset 0 1px rgba(243,232,210,.035); }
.project--starfish .starfish-numa::before { background: #79d6d0; box-shadow: 0 0 11px rgba(121,214,208,.6); }.project--starfish .starfish-numa__label { color: #79d6d0; }.project--starfish .starfish-numa__label b { color: #89a5a6; }
.project--starfish .starfish-core-stack::before { background: rgba(121,214,208,.2); }
.project--starfish .starfish-reactor { color: #79d6d0; border-color: rgba(121,214,208,.5); background: #071a24; box-shadow: 0 0 16px rgba(121,214,208,.11); }
.project--starfish .starfish-reactor.is-working i { border-color: rgba(255,107,94,.86); background: rgba(255,107,94,.22); box-shadow: 0 0 10px rgba(255,107,94,.44); }
.project--starfish .starfish-queue small { color: #789397; }.project--starfish .starfish-queue small::before { color: #ff6b5e; }.project--starfish .starfish-queue small::after { color: #79d6d0; }
.project--starfish .starfish-queue > span { border-color: rgba(121,214,208,.18); background: linear-gradient(90deg, rgba(255,107,94,.08), rgba(3,15,23,.7) 18%, rgba(3,15,23,.7) 82%, rgba(121,214,208,.065)); box-shadow: inset 4px 0 8px -6px #ff6b5e, inset -4px 0 8px -6px #79d6d0; }.project--starfish .starfish-queue i { border-color: rgba(121,214,208,.4); background: rgba(121,214,208,.17); }
.project--starfish .starfish-queue i:nth-last-child(-n+2) { border-color: rgba(121,214,208,.68); background: rgba(121,214,208,.44); box-shadow: 0 0 6px rgba(121,214,208,.24); }
.starfish-copy { max-width: 760px; }
.starfish-copy > span { display: block; max-width: 700px; }
.starfish-specs { display: grid; gap: 1px; margin-top: 26px; overflow: hidden; border: 1px solid rgba(121,214,208,.18); border-radius: 4px; background: rgba(121,214,208,.16); }
.starfish-specs > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; padding: 13px 15px; background: rgba(5,22,31,.88); }
.starfish-specs small { grid-row: 1 / 3; padding-top: 3px; color: #ff8174; font: 700 10px/1 Consolas, monospace; letter-spacing: .1em; }
.starfish-specs b { color: #f3e8d2; font-size: 15px; line-height: 1.2; }
.starfish-specs span { margin-top: 4px; color: #8da9a9; font-size: 13px; line-height: 1.35; }
.project--starfish .project__copy p { color: #ff6b5e; }
.project--starfish .project__copy h3 { color: #f3e8d2; font-size: clamp(60px, 4.6vw, 90px); }
.project--starfish .project__copy > span { color: #a9bfbe; font-size: clamp(19px, 1.2vw, 22px); line-height: 1.55; }


@media (min-width: 1181px) {
    .termal-body { grid-template-columns: minmax(0, 1.08fr) minmax(560px, .92fr); gap: clamp(38px, 3.4vw, 68px); }
}

@media (min-width: 1600px) {
    .project--starfish { min-height: 800px; }
}

@media (min-width: 1001px) and (max-width: 1599px) {
    .project--starfish { min-height: 0; }
    .starfish-body { grid-template-columns: minmax(270px,.68fr) minmax(600px,1.32fr); }
    .project--starfish .starfish-visual { border-right: 0; }
    .project--starfish .project__copy { grid-column: 1 / -1; max-width: 780px; padding-bottom: 32px; }
}

@media (min-width: 801px) and (max-width: 1000px) {
    .project--starfish { min-height: 0; }
    .starfish-body { grid-template-columns: 1fr; gap: 46px; }
    .starfish-architecture { justify-self: center; width: min(520px, 100%); padding-right: 0; border-right: 0; }
    .project--starfish .starfish-visual { height: 430px; padding-inline: 0; border-right: 0; }
    .project--starfish .project__copy { max-width: 760px; padding-bottom: 32px; }
}

@media (max-width: 800px) {
    .project--phoenix .phoenix-copy { padding: 24px; }
    .project--phoenix .phoenix-capabilities { grid-template-columns: 1fr; }
    .project--phoenix .phoenix-capabilities > div { min-height: 0; }
    .phoenix-user { left: 0; width: 8%; }
    .phoenix-user b, .phoenix-user small { display: none; }
    .phoenix-user__avatar { width: 27px; }
    .phoenix-user__avatar::before { top: 5px; width: 6px; }
    .phoenix-user__avatar::after { bottom: 4px; width: 14px; height: 7px; }
    .phoenix-user__avatar i { top: 3px; right: 2px; width: 4px; }
    .phoenix-editor { left: 10%; width: 25%; border-radius: 4px; }
    .phoenix-editor__bar { justify-content: center; min-height: 26px; padding: 5px; font-size: 8px; }
    .phoenix-editor__bar span { display: none; }
    .phoenix-code { gap: 2px; padding: 7px 6px; font-size: 8px; }
    .phoenix-code > span { display: none; }
    .phoenix-code > span:nth-child(1), .phoenix-code > span:nth-child(2), .phoenix-code > span:nth-child(4) { display: block; }
    .phoenix-code i { display: none; }
    .phoenix-code code { display: block; text-overflow: ellipsis; }
    .phoenix-type-tip { margin: 0 5px 5px; padding: 5px; }
    .phoenix-type-tip small, .phoenix-type-tip b { display: none; }
    .phoenix-type-tip code { margin: 0; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
    .phoenix-core { left: 42%; }
    .phoenix-repo-label { top: 18px; left: 49%; }
    .phoenix-results { top: 50%; }
    .project--starfish { min-height: 0; }
    .starfish-body { grid-template-columns: 1fr; gap: 42px; min-height: 0; margin-top: 34px; }
    .starfish-architecture { justify-self: center; width: min(460px, 100%); height: 440px; padding-right: 0; border-right: 0; }
    .project--starfish .starfish-visual { height: 340px; padding-inline: 0; border-right: 0; }
    .project--starfish .project__copy { top: auto; right: auto; bottom: auto; left: auto; max-width: 680px; padding-bottom: 30px; }
}

@media (max-width: 520px) {
    .project--phoenix .phoenix-copy { padding: 18px; border-radius: 3px 24px 3px 3px; }
    .starfish-architecture { height: 405px; }
    .starfish-architecture__label { font-size: 12px; }
    .project--starfish .starfish-visual { height: 285px; }
    .starfish-console { top: -20px; font-size: 9px; }.starfish-console b { font-size: 9px; }
    .starfish-specs { margin-top: 18px; }.starfish-specs > div { grid-template-columns: 72px minmax(0,1fr); gap: 8px; padding: 10px; }.starfish-specs small { font-size: 9px; }.starfish-specs b { font-size: 14px; }.starfish-specs span { font-size: 12px; }
}

/* Desktop labels must remain readable at normal viewing distance. */
@media (min-width: 801px) {
    :root {
        --ui-label-size: clamp(18px, 1.02vw, 20px);
        --ui-caption-size: clamp(17px, .96vw, 19px);
    }

    .brand__mark { font-size: 16px; }
    .brand__name { font-size: 18px; }
    .button, .text-link { font-size: 17px; }
    .kicker span { width: 36px; }
    .site-footer .shell { font-size: 18px; }
    .hero__facts dd { font-size: 18px; }
    .layer-detail p { font-size: 18px !important; }
    .career-stop small, .career-ledger p, .career-ledger__earlier summary span:last-child { font-size: 17px; }

    .queue-diagram__heading { font-size: 19px; }
    .queue-diagram__note { font-size: 18px; }
    .queue-governor text, .fair-queue text { font-size: 17px; }

    .sql-architecture__layer .arch-title { font-size: 19px; }
    .sql-architecture__annotations text, .sql-architecture__skip text { font-size: 17px; }
    .engine-achievement p { font-size: 18px; }

    .termal-user { font-size: 19px; }
    .termal-user small { font-size: 16px; }
    .termal-layer__label { font-size: 17px; }
    .termal-node { min-height: 62px; padding: 11px 13px; }
    .termal-node b { font-size: 18px; }
    .termal-node small { font-size: 16px; }
    .termal-tree__legend { font-size: 17px; }
    .termal-capabilities i, .phoenix-capabilities i { font-size: 15px; }
    .termal-capabilities b { font-size: 19px; }
    .termal-capabilities small { font-size: 18px; }
    .termal-runtimes { font-size: 17px; }
    .phoenix-capabilities b { font-size: 19px; }
    .phoenix-capabilities small { font-size: 18px; }
    .phoenix-runtimes { font-size: 17px; }

    .phoenix-user { font-size: 16px; }
    .phoenix-user small { font-size: 15px; }
    .phoenix-user__avatar { width: 54px; }
    .phoenix-editor__bar { font-size: 15px; }
    .phoenix-code { font-size: 15px; }
    .phoenix-type-tip small { font-size: 13px; }
    .phoenix-type-tip b, .phoenix-type-tip code { font-size: 14px; }
    .phoenix-core span { font-size: 16px; }
    .phoenix-core b { font-size: 15px; }
    .phoenix-repo-label span, .phoenix-repo-label b { font-size: 16px; }
    .phoenix-repo-label small { font-size: 15px; }
    .phoenix-results__label, .phoenix-fresh { font-size: 15px; }
    .phoenix-results b, .phoenix-results i { font-size: 15px; }

    .starfish-console, .starfish-console b { font-size: 17px; }
    .starfish-architecture__label { font-size: 17px; }
    /* SVG text scales with the drawing itself — no font-size overrides here, they double-scale. */
    .starfish-numa__label { font-size: 17px; }
    .starfish-numa__label b { font-size: 15px; }
    .starfish-core-row { grid-template-columns: 36px minmax(0, 1fr); }
    .starfish-reactor { width: 29px; font-size: 15px; }
    .starfish-queue small { font-size: 16px; }
    .starfish-specs small { font-size: 15px; }
    .starfish-specs b { font-size: 18px; }
    .starfish-specs span { font-size: 17px; }
}

@media (min-width: 801px) and (max-width: 1450px) {
    .project--termal { min-height: 0; }
    .termal-body { grid-template-columns: 1fr; gap: 40px; min-height: 0; }
    .termal-visual { width: 100%; height: 470px; }
    .project--termal .project__copy { max-width: 800px; padding: 0 0 42px; }
}

/* Content and a usable contact route remain available if scripting is disabled. */
.no-js .motion-toggle, .no-js .menu-toggle { display: none; }
@media (max-width: 800px) {
    .no-js .site-header { position: absolute; grid-template-columns: auto 1fr; }
    .no-js .site-nav { position: static; justify-self: end; display: flex; flex-direction: row; width: auto; padding: 0; background: none; opacity: 1; visibility: visible; transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .no-js .site-nav a:not(.nav-contact) { display: none; }
    .no-js .site-nav .nav-contact { margin: 0; color: var(--signal); font-size: 14px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
    .title-line > span { opacity: 1; transform: none; }
    .boot { display: none; }
}

@media print {
    :root { --shell: calc(100% - 40px); }
    body { color: #111; background: #fff; }
    body::before, .boot, .site-header, .scroll-progress, .cursor-glow, canvas, .hero__grid, .hero__footer, .case__visual, .stack-stage, .career-map, .project::after, .termal-visual, .starfish-visual { display: none !important; }
    .hero, .systems, .depth, .lab, .education, .contact { min-height: 0; padding: 40px 0; color: #111; background: #fff; border-color: #ccc; }
    .hero__content, .section-heading--split, .depth__layout, .education__layout { display: block; min-height: 0; padding: 20px 0; }
    .portrait { width: 180px; margin: 20px 0; }.portrait__frame { border-radius: 4px; }.portrait__caption { color: #333; }
    .hero__title, .section-heading h2, .depth h2, .education h2, .contact h2 { color: #111; font-size: 54px; }
    .title-line--accent, .kicker span, .case__eyebrow, .project__copy p { color: #b73529; }
    .project-sections { grid-template-columns: repeat(2,1fr); }.project-section, .case, .project, .education__card { min-height: 0; color: #111; background: #fff; border: 1px solid #bbb; break-inside: avoid; }
    .case { display: block; margin-bottom: 15px; }.case__copy { padding: 25px 0 0; }
    .project { min-height: 250px; }.project__copy { position: static; margin-top: 50px; }.project__copy h3 { color: #111; }
    .contact__email { font-size: 28px; }.site-footer { color: #333; background: #fff; }
    [data-reveal] { opacity: 1; transform: none; }
}