:root {
  --espresso: #070504;
  --ink: #100b09;
  --clay: #654331;
  --clay-light: #9b735b;
  --sand: #1a120e;
  --paper: #0c0907;
  --cream: #ece8e4;
  --muted: #9b938e;
  --line: rgba(236, 232, 228, .13);
  --line-light: rgba(236, 232, 228, .15);
  --display: "Sora", sans-serif;
  --serif: "Sora", sans-serif;
  --body: "Inter", sans-serif;
  --mono: "JetBrains Mono", monospace;
  --offwhite: #e9e4dd;
  --offwhite-2: #ddd6ce;
  --dark-text: #1b1512;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--cream); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body.dialog-open, body.nav-open { overflow: hidden; }
a { color: inherit; }
button, input, textarea { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); }
em { font-family: var(--display); font-style: normal; font-weight: 500; }

.noise { position: fixed; inset: 0; z-index: 90; opacity: .045; 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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); pointer-events: none; }
.scroll-progress { position: fixed; top: 0; left: 0; z-index: 120; width: 0; height: 4px; background: var(--clay-light); }
.system-rail { position: fixed; inset: 0 auto 0 0; z-index: 60; display: flex; width: 42px; align-items: center; justify-content: space-between; padding: 22px 0; border-right: 1px solid rgba(255,250,242,.12); background: var(--espresso); color: var(--sand); writing-mode: vertical-rl; }.system-rail span, .system-rail small { font-size: 9px; letter-spacing: .12em; }.system-rail i { width: 1px; height: 80px; background: var(--clay); }
.custom-cursor { position: fixed; top: 0; left: 0; z-index: 200; display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid var(--clay); border-radius: 50%; background: rgba(152,92,63,.12); color: var(--cream); opacity: 0; pointer-events: none; transform: translate(-50%,-50%); transition: width .2s ease,height .2s ease,opacity .2s ease,background .2s ease; backdrop-filter: blur(3px); }.custom-cursor span { font-size: 8px; font-weight: 700; }.custom-cursor.is-visible { opacity: 1; }.custom-cursor.is-link { width: 72px; height: 72px; background: var(--clay); }

.boot-screen { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--espresso); color: var(--cream); transition: opacity .55s ease,visibility .55s ease; }.boot-screen.is-hidden { visibility: hidden; opacity: 0; }.boot-screen > div { width: min(calc(100% - 45px),520px); }.boot-screen span { color: var(--clay-light); font-size: 12px; }.boot-screen strong { display: block; margin: 18px 0 8px; font-family: var(--display); font-size: clamp(30px,5vw,55px); line-height: 1; }.boot-screen p { color: #9c8375; font-size: 12px; }.boot-screen i { display: block; width: 100%; height: 3px; margin-top: 28px; overflow: hidden; background: rgba(255,255,255,.1); }.boot-screen i::after { display: block; width: 45%; height: 100%; background: var(--clay); content: ""; animation: bootLoad .8s ease forwards; }
@keyframes bootLoad { from { transform: translateX(-100%); } to { transform: translateX(222%); } }

.site-header { position: fixed; top: 0; right: 0; left: 42px; z-index: 50; display: flex; height: 88px; align-items: center; justify-content: space-between; padding: 0 clamp(22px,5vw,78px); border-bottom: 1px solid transparent; color: var(--cream); transition: .3s ease; }.site-header.is-scrolled { height: 70px; border-color: var(--line-light); background: rgba(27,16,12,.9); backdrop-filter: blur(16px); }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }.logo__mark { display: block; width: 50px; height: 50px; flex: 0 0 50px; object-fit: contain; }.logo__text { font-family: var(--display); font-size: 11px; font-weight: 800; line-height: .95; letter-spacing: .12em; }
.main-nav { display: flex; align-items: center; gap: 29px; }.main-nav a { position: relative; font-size: 11px; font-weight: 700; text-decoration: none; text-transform: uppercase; }.main-nav a:not(.nav-contact)::before { margin-right: 6px; color: var(--clay-light); content: "./"; }.nav-contact { display: flex; min-height: 42px; align-items: center; gap: 24px; padding: 0 15px; border: 1px solid var(--clay-light); color: var(--cream); }.nav-contact:hover { background: var(--clay); }.nav-toggle,.nav-backdrop { display: none; }

.hero { position: relative; display: grid; min-height: 100svh; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(40px,6vw,100px); padding: 135px clamp(24px,6vw,100px) 58px calc(clamp(24px,6vw,100px) + 42px); overflow: hidden; background: var(--espresso); color: var(--cream); }.hero::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,250,242,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,250,242,.035) 1px,transparent 1px); background-size: 58px 58px; content: ""; mask-image: linear-gradient(to right,black,transparent 76%); }.hero::after { position: absolute; top: 10%; right: -10%; width: 650px; height: 650px; border: 1px solid rgba(200,142,109,.16); border-radius: 50%; box-shadow: 0 0 0 90px rgba(200,142,109,.025),0 0 0 180px rgba(200,142,109,.018); content: ""; }
.hero__copy,.hero-visual,.hero__meta { position: relative; z-index: 2; }.availability { display: inline-flex; min-height: 34px; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--line-light); color: var(--sand); font-size: 10px; text-transform: uppercase; }.availability::before { content: "["; }.availability::after { content: "]"; }.availability i { width: 7px; height: 7px; border-radius: 50%; background: var(--clay-light); box-shadow: 0 0 13px var(--clay-light); }
.eyebrow,.section-index,.code-label { color: var(--clay); font-size: 12px; font-weight: 700; letter-spacing: .08em; }.eyebrow { margin: 31px 0 14px; color: var(--clay-light); }
h1 { max-width: 890px; margin-bottom: 28px; font-size: clamp(55px,6.3vw,96px); line-height: .87; letter-spacing: -.07em; }.hero h1 em { display: inline-block; margin-top: 7px; color: var(--clay-light); font-size: 1.05em; line-height: .82; }.hero__lead { max-width: 680px; margin-bottom: 35px; color: #c4afa2; font-family: var(--display); font-size: 18px; line-height: 1.65; }
.hero__actions { display: flex; align-items: center; gap: 28px; }.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 38px; padding: 0 19px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; font-size: 11px; font-weight: 700; text-decoration: none; text-transform: uppercase; }.button--dark { border-color: var(--clay); background: var(--clay); color: var(--cream); }.button--dark:hover { background: var(--clay-light); }.button--outline:hover { background: var(--ink); color: var(--cream); }.text-link { display: inline-flex; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: 13px; font-weight: 700; text-decoration: none; }
.hero-signature { position: absolute; right: -1vw; bottom: 20px; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; color: transparent; font-family: var(--display); font-size: clamp(90px,15vw,220px); font-weight: 800; line-height: .65; letter-spacing: -.09em; -webkit-text-stroke: 1px rgba(255,250,242,.07); pointer-events: none; }.hero-signature strong { font: inherit; }.hero-signature i { margin: 14px 80px; color: rgba(200,142,109,.35); font-family: var(--mono); font-size: 10px; font-style: normal; letter-spacing: .1em; -webkit-text-stroke: 0; }
.hero-visual { overflow: hidden; border: 1px solid rgba(200,142,109,.38); background: #120b08; box-shadow: 18px 18px 0 rgba(152,92,63,.2); transform: rotate(1deg); }.hero-visual__bar { display: flex; min-height: 43px; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--line-light); color: var(--clay-light); font-size: 10px; }.hero-visual__bar > span::before { content: "~/portfolio/"; color: #74594b; }.hero-visual__bar > div { display: flex; gap: 6px; }.hero-visual__bar i { width: 7px; height: 7px; border-radius: 50%; background: #705347; }.hero-visual__body { padding: clamp(20px,2.5vw,34px); }.metric > span { color: #8d6f60; font-size: 10px; letter-spacing: .1em; }.metric strong { display: block; margin: 5px 0 2px; font-family: var(--display); font-size: clamp(48px,5vw,74px); letter-spacing: -.06em; }.metric strong small { color: var(--clay-light); font-size: .42em; }.metric p { color: #8b7163; font-size: 9px; }.metric p i { color: var(--clay-light); font-style: normal; }
.hero-code { margin: 19px 0 5px; padding: 15px 17px; overflow: hidden; border: 1px solid var(--line-light); background: rgba(255,255,255,.025); color: #dbcabe; font-size: 9px; line-height: 1.75; white-space: pre-wrap; }.hero-code span { display: inline-block; width: 28px; color: #6c5145; user-select: none; }.hero-code i { display: inline-block; width: 7px; height: 13px; margin-left: 3px; background: var(--clay-light); font-style: normal; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
.chart-wrap { position: relative; margin-top: 17px; padding-left: 28px; }.chart-axis { position: absolute; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; color: #5f483e; font-size: 7px; }.chart-wrap svg { display: block; width: 100%; }.chart-grid { fill: none; stroke: rgba(255,250,242,.07); }.chart-area { fill: rgba(152,92,63,.18); }.chart-line { fill: none; stroke: var(--clay-light); stroke-width: 2; }.chart-points circle { fill: var(--espresso); stroke: var(--clay-light); stroke-width: 2; }.hero-visual__footer { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-light); color: #70584c; font-size: 7px; }
.hero__meta { display: flex; grid-column: 1/-1; align-self: end; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--line-light); color: #80675a; font-size: 9px; }
.code-ticker { overflow: hidden; border-block: 1px solid var(--espresso); background: var(--clay); color: var(--cream); }.code-ticker > div { display: flex; width: max-content; gap: 30px; padding: 16px 0; font-size: 12px; animation: ticker 25s linear infinite; }.code-ticker span,.code-ticker i { flex: 0 0 auto; }.code-ticker i { color: var(--espresso); font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } } @keyframes blink { 50% { opacity: 0; } }

.section { position: relative; padding: clamp(85px,10vw,155px) clamp(24px,7vw,115px) clamp(85px,10vw,155px) calc(clamp(24px,7vw,115px) + 42px); }.section-head { display: grid; grid-template-columns: 1.25fr .55fr; align-items: end; gap: 60px; margin-bottom: 58px; }.section-head h2,.about h2,.resume__sticky h2,.contact h2 { margin: 15px 0 0; font-size: clamp(46px,5.6vw,82px); line-height: .9; letter-spacing: -.065em; }.section-head h2 em,.method h2 em,.contact h2 em { color: var(--clay); }.section-head > p { max-width: 530px; margin: 0 0 5px; color: var(--muted); font-family: var(--display); font-size: 17px; line-height: 1.65; }

.projects { background: var(--cream); }.projects::before { position: absolute; top: 30px; right: 3vw; color: rgba(38,23,17,.035); content: "{ }"; font-family: var(--display); font-size: 260px; font-weight: 800; }.filter-row { position: relative; z-index: 1; display: flex; gap: 8px; margin-bottom: 28px; overflow-x: auto; scrollbar-width: none; }.filter-row::-webkit-scrollbar { display: none; }.filter-row button { min-height: 43px; padding: 0 16px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 700; text-transform: uppercase; }.filter-row button::before { content: "[ "; }.filter-row button::after { content: " ]"; }.filter-row button:hover,.filter-row button.is-active { border-color: var(--espresso); background: var(--espresso); color: var(--cream); }.filter-row button span { opacity: .55; }
.projects-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 14px; }.project-card { grid-column: span 6; min-width: 0; animation-delay: var(--delay); }.project-card:nth-child(4n+1),.project-card:nth-child(4n+4) { grid-column: span 7; }.project-card:nth-child(4n+2),.project-card:nth-child(4n+3) { grid-column: span 5; }.project-card > a { display: block; height: 100%; overflow: hidden; border: 1px solid var(--line); background: var(--paper); color: inherit; text-decoration: none; transition: transform .25s ease,box-shadow .25s ease; }.project-card > a:hover { box-shadow: 10px 10px 0 var(--clay); transform: translate(-5px,-5px); }.project-card__visual { position: relative; min-height: 310px; overflow: hidden; border-bottom: 1px solid var(--line); background-color: var(--sand); background-image: linear-gradient(rgba(38,23,17,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(38,23,17,.055) 1px,transparent 1px); background-size: 32px 32px; }.project-card:nth-child(even) .project-card__visual { background-color: var(--ink); color: var(--cream); }.project-card__metric { position: absolute; top: 24px; left: 24px; z-index: 2; display: flex; flex-direction: column; }.project-card__metric strong { font-family: var(--display); font-size: 48px; letter-spacing: -.06em; }.project-card__metric span { max-width: 155px; color: currentColor; font-size: 10px; line-height: 1.45; opacity: .62; text-transform: uppercase; }.project-card__number { position: absolute; right: 18px; bottom: 15px; font-size: 11px; opacity: .4; }
.project-card__visual > svg { position: absolute; right: 0; bottom: 0; width: 75%; }.v-grid { fill: none; stroke: rgba(38,23,17,.12); }.v-area { fill: rgba(152,92,63,.2); }.v-line { fill: none; stroke: var(--clay); stroke-width: 2.5; }.project-card:nth-child(even) .v-grid { stroke: rgba(255,250,242,.1); }.project-card:nth-child(even) .v-line { stroke: var(--clay-light); }.bar-chart { position: absolute; right: 7%; bottom: 0; display: flex; width: 60%; height: 78%; align-items: flex-end; gap: 8px; }.bar-chart i { flex: 1; background: var(--clay-light); opacity: .25; }.bar-chart i:nth-child(4),.bar-chart i:nth-child(6) { opacity: .85; }.scatter { position: absolute; right: 7%; bottom: 10%; width: 62%; height: 72%; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .8; }.scatter i { position: absolute; width: 10px; height: 10px; border: 2px solid var(--clay); border-radius: 50%; }.matrix { position: absolute; right: 8%; bottom: 13%; display: grid; width: 55%; grid-template-columns: repeat(7,1fr); gap: 7px; }.matrix i { aspect-ratio: 1; border: 1px solid currentColor; opacity: .18; }.matrix i.on { background: var(--clay-light); border-color: var(--clay-light); opacity: 1; }.flow { position: absolute; right: 6%; bottom: 31%; display: flex; width: 65%; align-items: center; justify-content: space-between; color: var(--clay-light); font-size: 9px; }.flow span { padding: 15px 10px; border: 1px solid currentColor; }.donut { position: absolute; right: 12%; bottom: 11%; display: grid; width: 170px; max-width: 42%; aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(var(--clay) 0 76%,rgba(152,92,63,.14) 76%); }.donut::after { position: absolute; width: 67%; aspect-ratio: 1; border-radius: 50%; background: var(--sand); content: ""; }.donut span { z-index: 1; color: var(--ink); font-family: var(--display); font-size: 28px; }.donut small { font-size: 11px; }.columns { position: absolute; right: 7%; bottom: 0; display: flex; width: 62%; height: 76%; align-items: flex-end; gap: 5px; }.columns i { position: relative; flex: 1; background: rgba(200,142,109,.25); }.columns i:nth-child(4),.columns i:nth-child(6),.columns i:nth-child(8) { background: var(--clay-light); }.columns span { position: absolute; right: 0; bottom: 4px; left: 0; font-size: 6px; font-style: normal; text-align: center; }.checks { position: absolute; right: 8%; bottom: 14%; display: flex; width: 58%; flex-direction: column; gap: 8px; }.checks span { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid currentColor; font-size: 9px; opacity: .75; }.checks i { display: grid; width: 20px; height: 20px; place-items: center; background: var(--clay); color: var(--cream); font-style: normal; }
.project-card__body { padding: 25px; }.project-card__meta,.project-card__footer { display: flex; align-items: center; justify-content: space-between; color: var(--clay); font-size: 11px; font-weight: 700; text-transform: uppercase; }.project-card h3 { margin: 20px 0 10px; font-size: 32px; letter-spacing: -.045em; }.project-card__body > p { min-height: 68px; margin-bottom: 23px; color: var(--muted); font-family: var(--display); font-size: 15px; line-height: 1.65; }.project-card__footer { padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; text-transform: none; }.project-card__footer i { color: var(--clay); font-style: normal; font-weight: 700; }

.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(50px,9vw,150px); overflow: hidden; background: var(--clay); color: var(--cream); }.about::after { position: absolute; bottom: -130px; left: -80px; color: rgba(27,16,12,.12); content: "?"; font-family: var(--serif); font-size: 600px; line-height: .6; }.about__intro,.about__content { position: relative; z-index: 1; }.about .section-index { color: var(--espresso); }.about h2 { font-size: clamp(48px,5.7vw,86px); }.about h2 em { color: var(--espresso); }.about__content { padding-top: 25px; }.about__lead { margin-bottom: 45px; color: var(--cream); font-family: var(--serif); font-size: clamp(27px,2.5vw,39px); line-height: 1.3; }.about__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }.about__columns p { color: #eedcd0; font-family: var(--display); font-size: 15px; line-height: 1.75; }.about__stats { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 52px; padding-top: 25px; border-top: 1px solid rgba(27,16,12,.24); }.about__stats article { display: flex; align-items: center; gap: 13px; }.about__stats strong { color: var(--espresso); font-family: var(--display); font-size: 43px; }.about__stats span { color: #ead3c5; font-size: 9px; line-height: 1.5; }

.method { background: var(--paper); }.method-flow { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--espresso); }.method-flow article { min-height: 295px; padding: 25px; border-right: 1px solid var(--espresso); }.method-flow article:last-child { border: 0; }.method-flow article > span { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--clay); border-radius: 50%; color: var(--clay); font-size: 10px; }.method-flow small { display: block; margin-top: 48px; color: var(--clay); font-size: 10px; }.method-flow h3 { margin: 10px 0; font-size: 27px; }.method-flow p { color: var(--muted); font-family: var(--display); font-size: 14px; line-height: 1.7; }
.data-terminal { margin-top: 16px; overflow: hidden; border: 1px solid var(--espresso); background: var(--espresso); color: var(--cream); box-shadow: 12px 12px 0 var(--clay); }.data-terminal__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 17px; border-bottom: 1px solid var(--line-light); color: #a68777; font-size: 11px; }.data-terminal__bar > div { display: flex; gap: 6px; }.data-terminal__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--clay); }.data-terminal__bar small { justify-self: end; font-size: 10px; }.data-terminal__body { padding: 27px; font-size: 13px; }.terminal-command,.terminal-cursor { display: flex; gap: 12px; }.terminal-command > span,.terminal-cursor > span { color: var(--clay-light); }.terminal-command code { color: var(--cream); }.terminal-output { display: grid; grid-template-columns: 45px 1fr auto; gap: 12px; margin-top: 17px; color: #92786b; }.terminal-output p { margin: 0; }.terminal-output strong { color: var(--clay-light); font-size: 11px; }.terminal-cursor { margin-top: 22px; }.terminal-cursor i { width: 8px; height: 15px; background: var(--clay-light); animation: blink 1s steps(1) infinite; }
.stack { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; margin-top: 28px; padding: 37px; border: 1px solid var(--espresso); background: var(--cream); }.stack__copy h3 { max-width: 450px; margin: 15px 0 0; font-size: 27px; line-height: 1.2; }.stack__list { display: flex; flex-wrap: wrap; align-content: center; gap: 8px; }.stack__list span { padding: 11px 14px; border: 1px solid var(--line); color: var(--muted); font-size: 11px; }.stack__list span::before { color: var(--clay); content: "#"; }

.resume { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(55px,9vw,140px); background: var(--cream); }.resume__sticky { position: sticky; top: 110px; align-self: start; }.resume__sticky h2 { font-size: clamp(45px,4.8vw,73px); }.resume__sticky > p { margin: 27px 0 30px; color: var(--muted); font-family: var(--display); font-size: 16px; line-height: 1.7; }.timeline { border-top: 2px solid var(--espresso); }.timeline > article { display: grid; grid-template-columns: 135px 1fr; gap: 30px; padding: 38px 0; border-bottom: 1px solid var(--line); }.timeline > article > div { display: flex; align-items: flex-start; justify-content: space-between; color: var(--clay); font-size: 10px; }.timeline > article > div i { width: 9px; height: 9px; margin-top: 3px; border-radius: 50%; background: var(--clay); }.timeline small { color: var(--muted); font-size: 10px; }.timeline h3 { margin: 9px 0 4px; font-size: 25px; }.timeline strong { color: var(--clay); font-family: var(--display); font-size: 14px; }.timeline p { margin: 15px 0 0; color: var(--muted); font-family: var(--display); font-size: 14px; line-height: 1.7; }

.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(55px,10vw,160px); overflow: hidden; background: var(--espresso); color: var(--cream); }.contact::before { position: absolute; top: -120px; right: -80px; color: transparent; content: "</>"; font-family: var(--display); font-size: 300px; font-weight: 800; -webkit-text-stroke: 1px rgba(255,250,242,.06); }.contact__copy,.contact-form { position: relative; z-index: 1; }.contact .section-index { color: var(--clay-light); }.contact h2 { font-size: clamp(48px,5.2vw,76px); }.contact h2 em { color: var(--clay-light); }.contact__copy > p { max-width: 550px; margin: 28px 0 40px; color: #bda79a; font-family: var(--display); font-size: 16px; line-height: 1.7; }.contact__links { display: flex; flex-direction: column; border-top: 1px solid var(--line-light); }.contact__links a { display: flex; align-items: center; justify-content: space-between; padding: 17px 0; border-bottom: 1px solid var(--line-light); font-size: 14px; text-decoration: none; }.contact__links a:hover { color: var(--clay-light); }.contact__links i { font-style: normal; }
.contact-form { align-self: center; padding: 37px; border: 1px solid rgba(200,142,109,.4); background: rgba(152,92,63,.08); box-shadow: 12px 12px 0 rgba(152,92,63,.18); }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.contact-form label { display: block; margin-bottom: 22px; }.contact-form label > span { display: block; margin-bottom: 8px; color: var(--clay-light); font-size: 10px; }.contact-form input,.contact-form textarea { width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid rgba(255,250,242,.3); outline: 0; background: transparent; color: var(--cream); font-family: var(--display); font-size: 15px; resize: vertical; }.contact-form input::placeholder,.contact-form textarea::placeholder { color: rgba(255,250,242,.4); }.contact-form input:focus,.contact-form textarea:focus { border-color: var(--clay-light); }.contact-form .button { width: 100%; }.form-status { min-height: 18px; margin: 13px 0 0; color: var(--sand); font-size: 10px; }

.site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; padding: 48px clamp(22px,7vw,108px) 48px calc(clamp(22px,7vw,108px) + 42px); background: #100806; color: var(--cream); }.site-footer > p { max-width: 350px; margin: 0 auto; color: #947b6e; font-family: var(--display); font-size: 13px; text-align: center; }.site-footer > div { display: flex; justify-content: flex-end; gap: 25px; color: #947b6e; font-size: 10px; }.site-footer a { text-decoration: none; }

/* Case study */
.project-page { background: var(--cream); }.project-page .site-header { color: var(--ink); }.project-page .site-header.is-scrolled { border-color: var(--line); background: rgba(255,250,242,.92); }.back-link { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; text-decoration: none; text-transform: uppercase; }.case-hero { padding: 145px clamp(24px,7vw,115px) 80px calc(clamp(24px,7vw,115px) + 42px); background: var(--paper); background-image: linear-gradient(rgba(38,23,17,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(38,23,17,.04) 1px,transparent 1px); background-size: 58px 58px; }.case-hero__top { display: flex; gap: 10px; }.case-hero__top span { padding: 8px 11px; border: 1px solid var(--line); background: var(--cream); color: var(--clay); font-size: 10px; }.case-hero__heading { display: grid; grid-template-columns: 1.25fr .65fr; align-items: end; gap: 65px; margin: 45px 0; }.case-hero__heading > div > p { color: var(--clay); font-size: 11px; font-weight: 700; }.case-hero__heading h1 { margin: 13px 0 0; color: var(--ink); font-size: clamp(60px,8vw,125px); }.case-hero__heading > p { margin: 0 0 10px; color: var(--muted); font-family: var(--display); font-size: 19px; line-height: 1.65; }.case-hero__visual { min-height: clamp(430px,50vw,660px); border: 2px solid var(--espresso); background-color: var(--sand); }.case-hero__visual > svg { right: 4%; bottom: 5%; width: 75%; height: 75%; }.case-hero__visual .project-card__metric { top: 48px; left: 48px; }.case-hero__visual .project-card__metric strong { font-size: clamp(65px,8vw,120px); }.case-hero__visual .project-card__metric span { max-width: 200px; font-size: 12px; }.case-watermark { position: absolute; right: 30px; bottom: 22px; font-size: 12px; opacity: .35; }.case-meta { display: grid; grid-template-columns: .6fr 1.2fr 1fr; margin-top: 13px; border: 1px solid var(--espresso); background: var(--cream); }.case-meta div { display: flex; min-height: 105px; flex-direction: column; justify-content: center; gap: 8px; padding: 23px; border-right: 1px solid var(--espresso); }.case-meta div:last-child { border: 0; }.case-meta span { color: var(--clay); font-size: 10px; }.case-meta strong { font-family: var(--display); font-size: 15px; }
.case-story { display: grid; grid-template-columns: .3fr .7fr; gap: clamp(50px,9vw,150px); padding: 115px clamp(24px,7vw,115px) 115px calc(clamp(24px,7vw,115px) + 42px); }.case-story__nav { position: sticky; top: 105px; display: flex; height: fit-content; flex-direction: column; border-top: 2px solid var(--espresso); }.case-story__nav > span { padding: 17px 0; color: var(--clay); font-size: 10px; }.case-story__nav a { padding: 15px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; text-decoration: none; }.case-story__nav a:hover { padding-left: 8px; color: var(--clay); }.case-story__content > article { padding: 0 0 95px; scroll-margin-top: 100px; }.case-story__content article > span { color: var(--clay); font-size: 11px; font-weight: 700; }.case-story__content h2 { max-width: 850px; margin: 16px 0 30px; font-size: clamp(42px,5vw,75px); line-height: .95; letter-spacing: -.06em; }.case-story__content article > p { max-width: 780px; color: var(--muted); font-family: var(--display); font-size: 19px; line-height: 1.8; }.case-story blockquote { margin: 37px 0 0; padding: 28px 32px; border-left: 5px solid var(--clay); background: var(--paper); font-family: var(--serif); font-size: 28px; line-height: 1.4; }.case-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; margin-top: 42px; }.case-steps div { display: flex; min-height: 115px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--espresso); }.case-steps b { color: var(--clay); font-family: var(--display); font-size: 28px; }.case-steps span { font-size: 9px; }.case-steps > i { padding: 0 8px; color: var(--clay); font-style: normal; }.case-result { position: relative; display: flex; min-height: 260px; flex-direction: column; justify-content: center; margin-top: 40px; padding: 38px; overflow: hidden; background: var(--espresso); color: var(--cream); box-shadow: 12px 12px 0 var(--clay); }.case-result::after { position: absolute; right: -70px; width: 290px; height: 290px; border: 1px solid rgba(200,142,109,.3); border-radius: 50%; box-shadow: 0 0 0 55px rgba(200,142,109,.04),0 0 0 110px rgba(200,142,109,.025); content: ""; }.case-result strong { color: var(--clay-light); font-family: var(--display); font-size: 90px; line-height: 1; }.case-result span { font-family: var(--display); font-size: 19px; }.case-result small { margin-top: 25px; color: #8a6d5e; font-size: 10px; }.case-code { margin: 38px 0 0; padding: 32px; overflow-x: auto; border: 1px solid var(--espresso); background: var(--espresso); color: #e5d4c8; font-size: 14px; line-height: 2.1; box-shadow: 10px 10px 0 var(--clay); }.case-code::before { display: block; margin-bottom: 15px; color: var(--clay-light); content: "nelson@data-lab $ python project.py"; }.case-code span { display: inline-block; width: 44px; color: #76594a; user-select: none; }.next-case { padding: 85px clamp(24px,7vw,115px) 85px calc(clamp(24px,7vw,115px) + 42px); background: var(--clay); color: var(--cream); }.next-case > span { font-size: 11px; }.next-case a { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(255,250,242,.3); text-decoration: none; }.next-case strong { font-family: var(--display); font-size: clamp(42px,6vw,90px); letter-spacing: -.06em; }.next-case i { font-size: 42px; font-style: normal; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease,transform .75s ease; }.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 145px; }.hero__copy { max-width: 850px; }.hero-visual { width: min(100%,700px); }.hero-signature { display: none; }.section-head,.about,.resume,.contact,.case-hero__heading,.case-story { grid-template-columns: 1fr; }.section-head { gap: 22px; }.about,.resume,.contact { gap: 60px; }.method-flow { grid-template-columns: 1fr 1fr; }.method-flow article:nth-child(2) { border-right: 0; }.method-flow article:nth-child(-n+2) { border-bottom: 1px solid var(--espresso); }.resume__sticky,.case-story__nav { position: static; }.contact-form { width: min(100%,720px); }.case-story { gap: 55px; }.case-story__nav a { display: none; }.case-meta { grid-template-columns: 1fr; }.case-meta div { border-right: 0; border-bottom: 1px solid var(--espresso); }
}

@media (max-width: 860px) {
  .system-rail { display: none; }.site-header { left: 0; height: 72px; padding-inline: 18px; }.site-header .logo { transition: opacity .2s ease; }.nav-open .site-header .logo { opacity: 0; pointer-events: none; }.nav-toggle { position: relative; z-index: 5; display: flex; width: 44px; height: 44px; flex: 0 0 44px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--clay-light); background: var(--espresso); }.nav-toggle span { width: 18px; height: 1px; background: var(--cream); transition: transform .25s ease; }.nav-open .nav-toggle span:first-child { transform: translateY(4px) rotate(45deg); }.nav-open .nav-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }.nav-backdrop { position: fixed; inset: 0; z-index: 2; display: block; border: 0; background: rgba(7,5,4,.64); opacity: 0; pointer-events: none; transition: opacity .35s ease; backdrop-filter: blur(3px); }.main-nav { position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 3; display: flex; width: min(86vw,390px); flex-direction: column; align-items: flex-start; justify-content: center; gap: 25px; padding: 105px 32px 55px; overflow-y: auto; border-left: 1px solid rgba(200,142,109,.38); background: linear-gradient(145deg,#21150f 0%,#0b0806 72%); box-shadow: -22px 0 60px rgba(0,0,0,.38); visibility: hidden; transform: translateX(105%); transition: transform .38s cubic-bezier(.22,.8,.24,1),visibility 0s linear .38s; }.main-nav::before { position: absolute; top: 30px; left: 32px; color: var(--clay-light); content: "NF // MENU"; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; }.nav-open .main-nav { visibility: visible; transform: translateX(0); transition-delay: 0s; }.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }.main-nav a { width: 100%; padding-bottom: 12px; border-bottom: 1px solid rgba(233,228,221,.14); font-family: var(--display); font-size: clamp(25px,8vw,34px); line-height: 1; text-transform: none; }.main-nav a::before { display: none; }.main-nav .nav-contact { width: auto; min-height: 52px; margin-top: 12px; padding: 0 18px; border: 1px solid var(--clay-light); font-family: var(--mono)!important; font-size: 11px!important; text-transform: uppercase!important; }
  .hero { padding: 115px 18px 50px; }.hero h1 { font-size: clamp(53px,15vw,74px); }.hero__lead { font-size: 16px; }.hero__actions { align-items: flex-start; flex-direction: column; gap: 20px; }.hero-code { font-size: 8px; }.hero__meta span:nth-child(2) { display: none; }.section { padding: 85px 18px; }.section-head { margin-bottom: 40px; }.projects-grid { grid-template-columns: 1fr; }.project-card,.project-card:nth-child(n) { grid-column: 1; }.project-card__visual { min-height: 260px; }.about__columns { grid-template-columns: 1fr; gap: 6px; }.about__stats { gap: 12px; }.about__stats article { align-items: flex-start; flex-direction: column; }.method-flow { grid-template-columns: 1fr; }.method-flow article { min-height: 240px; border-right: 0; border-bottom: 1px solid var(--espresso); }.method-flow article:nth-child(3) { border-bottom: 1px solid var(--espresso); }.data-terminal__bar { grid-template-columns: 1fr; }.data-terminal__bar span,.data-terminal__bar small { display: none; }.data-terminal__body { padding: 20px 14px; font-size: 10px; }.terminal-output { grid-template-columns: 32px 1fr; }.terminal-output strong { grid-column: 2; }.stack { grid-template-columns: 1fr; gap: 30px; padding: 25px; }.timeline > article { grid-template-columns: 1fr; gap: 18px; }.timeline > article > div { justify-content: flex-start; gap: 15px; }.form-row { grid-template-columns: 1fr; gap: 0; }.contact-form { padding: 26px 20px; }.site-footer { grid-template-columns: 1fr; gap: 28px; padding: 42px 18px; }.site-footer > p { margin: 0; text-align: left; }.site-footer > div { justify-content: flex-start; }.custom-cursor { display: none; }
  .project-page .site-header { color: var(--ink); background: rgba(255,250,242,.92); }.back-link { font-size: 9px; }.case-hero { padding: 110px 18px 58px; }.case-hero__top { flex-wrap: wrap; }.case-hero__heading { margin: 37px 0; }.case-hero__heading h1 { font-size: 59px; }.case-hero__heading > p { font-size: 16px; }.case-hero__visual { min-height: 340px; }.case-hero__visual .project-card__metric { top: 25px; left: 25px; }.case-hero__visual .project-card__metric strong { font-size: 52px; }.case-story { padding: 78px 18px; }.case-story__content > article { padding-bottom: 70px; }.case-story__content article > p { font-size: 17px; }.case-story blockquote { margin-left: 0; font-size: 22px; }.case-steps { grid-template-columns: 1fr 1fr; gap: 8px; }.case-steps > i { display: none; }.case-result strong { font-size: 65px; }.case-code { padding: 20px 15px; font-size: 10px; }.next-case { padding: 65px 18px; }
}

@media (pointer: coarse),(prefers-reduced-motion: reduce) { .custom-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; }.boot-screen { display: none; }.code-ticker > div { animation: none; } }

/* Monochromatic technology theme */
body {
  background:
    radial-gradient(circle at 82% 8%, rgba(101,67,49,.18), transparent 28%),
    linear-gradient(145deg, #070504 0%, #0e0907 48%, #090605 100%);
}

.main-nav a,
.availability,
.eyebrow,
.section-index,
.code-label,
.hero-visual,
.hero__meta,
.filter-row button,
.project-card__meta,
.project-card__footer,
.method-flow small,
.data-terminal,
.stack__list,
.timeline > article > div,
.timeline small,
.contact-form label > span,
.site-footer > div,
.back-link,
.case-hero__top,
.case-hero__heading > div > p,
.case-meta span,
.case-story__nav,
.case-story__content article > span,
.case-code,
.next-case > span { font-family: var(--mono); }

.hero {
  background:
    radial-gradient(circle at 78% 42%, rgba(101,67,49,.27), transparent 27%),
    radial-gradient(circle at 18% 86%, rgba(70,43,31,.16), transparent 32%),
    linear-gradient(125deg, #060403 0%, #0c0806 48%, #17100c 100%);
}
.system-rail { color: #8f8179; }
.availability { border-color: rgba(155,115,91,.42); color: #aaa09a; background: rgba(101,67,49,.06); }
.hero::before { opacity: .72; }
.hero h1 { text-transform: uppercase; }
.hero h1 em { color: var(--clay-light); font-weight: 500; line-height: .9; }
.hero__lead { font-family: var(--body); color: #aaa19b; }
.hero-signature { -webkit-text-stroke-color: rgba(236,232,228,.055); }
.button { font-family: var(--mono); }
.button--dark { background: linear-gradient(135deg, #4d3124, #79513c); border-color: #79513c; }
.button--dark:hover { background: linear-gradient(135deg, #76503c, #9b735b); }
.hero-visual { background: linear-gradient(145deg, rgba(25,16,12,.97), rgba(7,5,4,.98)); box-shadow: 18px 18px 45px rgba(0,0,0,.34), 18px 18px 0 rgba(101,67,49,.13); }
.code-ticker { border-color: var(--line); background: linear-gradient(90deg, #2a1b14, #563725 50%, #2a1b14); }

.section { color: var(--cream); }
.section-head > p,
.project-card__body > p,
.method-flow p,
.resume__sticky > p,
.timeline p,
.contact__copy > p,
.case-hero__heading > p,
.case-story__content article > p { font-family: var(--body); color: var(--muted); }

.projects {
  background:
    radial-gradient(circle at 10% 12%, rgba(101,67,49,.17), transparent 23%),
    linear-gradient(150deg, #0d0907 0%, #15100d 48%, #0a0706 100%);
}
.projects::before { color: rgba(236,232,228,.022); }
.projects .section-head h2 em { color: var(--clay-light); }
.filter-row button { border-color: var(--line); color: #a89f99; }
.filter-row button:hover,
.filter-row button.is-active { border-color: var(--clay-light); background: linear-gradient(135deg, #302017, #60402f); }
.project-card > a {
  border-color: var(--line);
  background: linear-gradient(155deg, rgba(25,17,13,.96), rgba(10,7,6,.98));
  color: var(--cream);
}
.project-card > a:hover { border-color: var(--clay-light); box-shadow: 10px 10px 0 rgba(101,67,49,.55); }
.project-card__visual,
.project-card:nth-child(even) .project-card__visual {
  background-color: #130d0a;
  background-image:
    linear-gradient(rgba(236,232,228,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(236,232,228,.045) 1px,transparent 1px),
    radial-gradient(circle at 72% 30%, rgba(101,67,49,.32), transparent 35%),
    linear-gradient(145deg,#1b120e,#0b0806);
  color: var(--cream);
}
.v-grid { stroke: rgba(236,232,228,.08); }
.v-area { fill: rgba(155,115,91,.16); }
.v-line { stroke: var(--clay-light); }
.donut::after { background: #130d0a; }
.donut span { color: var(--cream); }
.project-card h3 { color: var(--cream); }

.about {
  background:
    radial-gradient(circle at 18% 65%, rgba(112,74,54,.3), transparent 32%),
    linear-gradient(135deg, #15100d 0%, #25170f 48%, #0b0806 100%);
}
.about::after { color: rgba(155,115,91,.055); }
.about .section-index,
.about h2 em,
.about__stats strong { color: var(--clay-light); }
.about__lead { color: var(--cream); font-family: var(--display); font-weight: 500; }
.about__columns p { color: #aaa19a; font-family: var(--body); }
.about__stats { border-color: var(--line); }
.about__stats span { color: #8d827b; }

.method {
  background:
    linear-gradient(180deg, #0b0806 0%, #110c09 48%, #17100c 100%);
}
.method-flow { border-color: var(--line); background: rgba(8,5,4,.38); }
.method-flow article { border-color: var(--line); background: linear-gradient(145deg, rgba(255,255,255,.018), transparent); }
.method-flow article:nth-child(even) { background: linear-gradient(145deg, rgba(101,67,49,.1), transparent); }
.data-terminal { border-color: rgba(155,115,91,.4); background: linear-gradient(145deg,#090605,#160e0a); box-shadow: 12px 12px 35px rgba(0,0,0,.3), 12px 12px 0 rgba(101,67,49,.25); }
.stack { border-color: var(--line); background: linear-gradient(120deg, rgba(29,19,14,.9), rgba(10,7,5,.95)); }
.stack__list span { border-color: var(--line); color: #a99f99; }

.resume {
  background:
    radial-gradient(circle at 80% 35%, rgba(101,67,49,.14), transparent 28%),
    linear-gradient(145deg,#17100c 0%,#0d0907 52%,#080605 100%);
}
.timeline { border-color: var(--clay); }
.timeline > article { border-color: var(--line); }
.timeline__period { display: block; margin-top: 7px; color: var(--clay-light); font-family: var(--display); font-size: 12px; line-height: 1.5; }
.timeline-courses { display: grid; gap: 16px; margin-top: 26px; }
.timeline-courses article { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(135deg,rgba(101,67,49,.13),rgba(255,255,255,.015)); }
.timeline-courses h4 { margin: 0; color: var(--cream); font-family: var(--display); font-size: 18px; line-height: 1.35; }
.timeline-courses span { display: block; margin-top: 7px; color: var(--clay-light); font-size: 9px; line-height: 1.5; text-transform: uppercase; }
.timeline-courses p { margin-top: 13px; }

.contact {
  background:
    radial-gradient(circle at 75% 20%, rgba(101,67,49,.3), transparent 30%),
    linear-gradient(120deg,#080504 0%,#17100c 52%,#0a0705 100%);
}
.contact-form { background: linear-gradient(145deg,rgba(101,67,49,.12),rgba(7,5,4,.55)); box-shadow: 12px 12px 40px rgba(0,0,0,.28); }
.site-footer { background: linear-gradient(90deg,#050302,#100a07,#050302); }

.project-page { background: #090605; color: var(--cream); }
.project-page .site-header { color: var(--cream); background: rgba(7,5,4,.72); }
.project-page .site-header.is-scrolled { border-color: var(--line); background: rgba(7,5,4,.92); }
.case-hero {
  background-color: #0b0806;
  background-image:
    linear-gradient(rgba(236,232,228,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(236,232,228,.035) 1px,transparent 1px),
    radial-gradient(circle at 78% 24%, rgba(101,67,49,.24), transparent 28%),
    linear-gradient(145deg,#0b0806,#15100d);
}
.case-hero__top span { border-color: var(--line); background: rgba(17,11,9,.8); color: var(--clay-light); }
.case-hero__heading h1 { color: var(--cream); text-transform: uppercase; }
.case-hero__visual {
  border-color: rgba(155,115,91,.55);
  background-color: #130d0a;
  background-image:
    linear-gradient(rgba(236,232,228,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(236,232,228,.045) 1px,transparent 1px),
    radial-gradient(circle at 70% 35%,rgba(101,67,49,.26),transparent 40%),
    linear-gradient(145deg,#1a110d,#090605);
}
.case-meta { border-color: var(--line); background: linear-gradient(120deg,#17100c,#0d0907); }
.case-meta div { border-color: var(--line); }
.case-meta strong { color: var(--cream); }
.case-story { background: linear-gradient(180deg,#090605,#110b08 55%,#080504); }
.case-story__nav { border-color: var(--clay); }
.case-story__nav a { border-color: var(--line); }
.case-story blockquote { background: linear-gradient(120deg,#18100c,#0c0806); color: #c8bfb9; font-family: var(--display); font-weight: 500; }
.case-steps div { border-color: var(--line); background: rgba(101,67,49,.07); }
.case-result { background: linear-gradient(135deg,#090605,#21150f); box-shadow: 12px 12px 40px rgba(0,0,0,.32); }
.case-code { border-color: rgba(155,115,91,.4); background: linear-gradient(145deg,#070504,#17100c); box-shadow: 10px 10px 30px rgba(0,0,0,.3); }
.next-case { background: linear-gradient(110deg,#1a110d,#4c3022 50%,#17100c); }

@media (max-width: 720px) {
  .project-page .site-header { color: var(--cream); background: rgba(7,5,4,.94); }
  .method-flow article:nth-child(-n+3) { border-color: var(--line); }
}

/* Alternating light surfaces */
.projects {
  color: var(--dark-text);
  background:
    radial-gradient(circle at 88% 12%, rgba(101,67,49,.13), transparent 25%),
    linear-gradient(145deg, var(--offwhite) 0%, #f0ece6 52%, var(--offwhite-2) 100%);
}
.projects::before { color: rgba(27,21,18,.04); }
.projects .section-index { color: var(--clay); }
.projects .section-head h2 { color: var(--dark-text); }
.projects .section-head h2 em { color: var(--clay); }
.projects .section-head > p { color: #665d57; }
.projects .filter-row button { border-color: rgba(27,21,18,.2); color: #645a54; }
.projects .filter-row button:hover,
.projects .filter-row button.is-active { border-color: var(--dark-text); background: linear-gradient(135deg,#231914,#654431); color: var(--cream); }
.projects .project-card > a { border-color: rgba(27,21,18,.2); background: rgba(247,243,238,.82); color: var(--dark-text); }
.projects .project-card > a:hover { border-color: var(--clay); box-shadow: 10px 10px 0 rgba(101,67,49,.48); }
.projects .project-card h3 { color: var(--dark-text); }
.projects .project-card__body > p { color: #675e58; }
.projects .project-card__footer { border-color: rgba(27,21,18,.16); color: #6d625c; }

.method {
  color: var(--dark-text);
  background:
    radial-gradient(circle at 12% 88%, rgba(101,67,49,.11), transparent 28%),
    linear-gradient(155deg,#eee9e2 0%,#e5ded6 48%,#f2eee8 100%);
}
.method .section-head h2 { color: var(--dark-text); }
.method .section-head h2 em { color: var(--clay); }
.method .section-head > p { color: #665d57; }
.method-flow { border-color: rgba(27,21,18,.42); background: rgba(255,255,255,.2); }
.method-flow article { border-color: rgba(27,21,18,.2); background: linear-gradient(145deg,rgba(255,255,255,.3),transparent); }
.method-flow article:nth-child(even) { background: linear-gradient(145deg,rgba(101,67,49,.08),rgba(255,255,255,.18)); }
.method-flow p { color: #675e58; }
.method .stack { border-color: rgba(27,21,18,.24); background: linear-gradient(125deg,rgba(255,255,255,.52),rgba(221,214,206,.72)); }
.method .stack__copy h3 { color: var(--dark-text); }
.method .stack__list span { border-color: rgba(27,21,18,.17); color: #5f5650; background: rgba(255,255,255,.24); }

.contact {
  color: var(--dark-text);
  background:
    radial-gradient(circle at 82% 20%, rgba(101,67,49,.13), transparent 30%),
    linear-gradient(135deg,#f0ece6 0%,#e5ded6 53%,#eee9e2 100%);
}
.contact::before { -webkit-text-stroke-color: rgba(27,21,18,.055); }
.contact .section-index { color: var(--clay); }
.contact h2 { color: var(--dark-text); }
.contact h2 em { color: var(--clay); }
.contact__copy > p { color: #665d57; }
.contact__links { border-color: rgba(27,21,18,.2); }
.contact__links a { border-color: rgba(27,21,18,.2); }
.contact__links a:hover { color: var(--clay); }
.contact-form { color: var(--cream); border-color: rgba(101,67,49,.42); background: linear-gradient(145deg,#100b09,#211610); box-shadow: 12px 12px 0 rgba(101,67,49,.26); }

.case-meta { color: var(--dark-text); background: linear-gradient(120deg,#eee9e2,#ddd6ce); }
.case-meta div { border-color: rgba(27,21,18,.22); }
.case-meta strong { color: var(--dark-text); }
.case-story {
  color: var(--dark-text);
  background:
    radial-gradient(circle at 80% 40%,rgba(101,67,49,.09),transparent 27%),
    linear-gradient(150deg,#eee9e2,#e2dbd3 55%,#f1ede7);
}
.case-story__content h2 { color: var(--dark-text); }
.case-story__content article > p { color: #645b55; }
.case-story__nav { border-color: var(--clay); }
.case-story__nav a { border-color: rgba(27,21,18,.18); color: #6b625c; }

@media (max-width: 860px) {
  .site-header { z-index: 150; }
  .nav-toggle {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 5;
    display: flex !important;
  }
}
.case-story blockquote { background: rgba(255,255,255,.4); color: #413630; }
.case-steps div { border-color: rgba(27,21,18,.22); background: rgba(255,255,255,.24); }

@media (max-width: 720px) {
  .method-flow article:nth-child(-n+3) { border-color: rgba(27,21,18,.2); }
}

/* Profile portrait */
.about { grid-template-columns: minmax(300px,.78fr) minmax(0,1.22fr); align-items: center; }
.about__intro { align-self: stretch; display: flex; flex-direction: column; }
.about-profile { width: min(100%,510px); margin: 28px 0 0; }
.about-profile__image { position: relative; aspect-ratio: 4/5; overflow: hidden; border: 1px solid rgba(200,142,109,.48); background: #0d0907; box-shadow: 14px 14px 0 rgba(101,67,49,.34); }
.about-profile__image::after { position: absolute; inset: 0; background: linear-gradient(110deg,transparent 42%,rgba(255,255,255,.055) 49%,transparent 56%); content: ""; transform: translateX(-100%); animation: profileScan 7s ease-in-out infinite; pointer-events: none; }
.about-profile__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(.58) sepia(.12) contrast(1.08) brightness(.9); }
.about-profile figcaption { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; margin-top: 14px; padding: 18px 0; border-top: 1px solid rgba(200,142,109,.36); border-bottom: 1px solid rgba(200,142,109,.36); }
.about-profile figcaption span { color: #8f8178; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.about-profile figcaption strong { color: var(--cream); font-family: var(--display); font-size: clamp(15px,1.4vw,20px); font-weight: 600; }
@keyframes profileScan { 0%,65% { transform: translateX(-110%); } 88%,100% { transform: translateX(110%); } }

@media (max-width: 980px) {
  .about { grid-template-columns: minmax(260px,.7fr) minmax(0,1fr); gap: 55px; }
}

@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; }
  .about-profile { width: min(100%,500px); }
}

@media (prefers-reduced-motion: reduce) {
  .about-profile__image::after { animation: none; }
}

/* Horizontal hero */
.hero {
  grid-template-columns: 1fr;
  align-content: center;
  align-items: initial;
  gap: 0;
  padding-top: clamp(130px,14vh,180px);
}
.hero__copy { width: 100%; max-width: 1380px; }
.hero .availability { margin-bottom: clamp(25px,4vh,48px); }
.hero .eyebrow { margin: 0 0 18px; }
.hero h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(62px,5.5vw,105px);
  line-height: .86;
  letter-spacing: -.065em;
}
.hero h1 em { white-space: nowrap; }
.hero__lower {
  display: grid;
  grid-template-columns: minmax(360px,660px) auto;
  align-items: end;
  justify-content: space-between;
  gap: clamp(40px,8vw,130px);
  margin-top: clamp(38px,6vh,65px);
}
.hero__lower .hero__lead { margin: 0; }
.hero__lower .hero__actions { justify-self: end; }
.hero__meta { margin-top: clamp(55px,9vh,95px); }
.hero-signature { right: -3vw; bottom: -5px; opacity: .72; }

@media (max-width: 1100px) {
  .hero h1 em { white-space: normal; }
  .hero__lower { grid-template-columns: 1fr; gap: 30px; }
  .hero__lower .hero__actions { justify-self: start; }
}

@media (max-width: 860px) {
  .hero { padding-top: 115px; }
  .hero h1 { font-size: clamp(52px,13vw,78px); }
  .hero__lower { margin-top: 32px; }
  .hero__meta { margin-top: 58px; }
}

/* Hard skills */
.hard-skills {
  color: var(--dark-text);
  border-top: 1px solid rgba(27,21,18,.14);
  background:
    radial-gradient(circle at 88% 10%,rgba(101,67,49,.11),transparent 26%),
    linear-gradient(145deg,#f1ede7 0%,#e4ddd5 54%,#eee9e2 100%);
}
.hard-skills::before { position: absolute; top: 18px; right: 4vw; color: rgba(27,21,18,.04); content: "</>"; font-family: var(--display); font-size: clamp(110px,17vw,250px); font-weight: 800; }
.hard-skills__head { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr .55fr; align-items: end; gap: 70px; margin-bottom: 55px; }
.hard-skills__head h2 { max-width: 900px; margin: 15px 0 0; color: var(--dark-text); font-size: clamp(46px,5.6vw,82px); line-height: .9; letter-spacing: -.065em; }
.hard-skills__head h2 em { color: var(--clay); }
.hard-skills__head > p { max-width: 500px; margin: 0 0 5px; color: #625953; font-family: var(--display); font-size: 16px; line-height: 1.7; }
.skills-board { position: relative; z-index: 1; display: grid; grid-template-columns: .78fr 1.22fr; overflow: hidden; border: 1px solid rgba(101,67,49,.5); background: linear-gradient(135deg,#0b0806,#1c120d 64%,#100a07); color: var(--cream); box-shadow: 14px 14px 0 rgba(101,67,49,.22); }
.skills-group--languages { border-right: 1px solid rgba(200,142,109,.3); }
.skills-group__head { display: grid; min-height: 75px; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 0 25px; border-bottom: 1px solid rgba(200,142,109,.3); }
.skills-group__head > span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--clay); border-radius: 50%; color: var(--clay-light); font-size: 9px; }
.skills-group__head strong { font-family: var(--display); font-size: 20px; }
.skills-group__head small { color: #78665c; font-size: 8px; letter-spacing: .1em; }
.language-list > div { display: grid; min-height: 125px; grid-template-columns: 42px 1fr; align-items: center; gap: 17px; padding: 22px 25px; border-bottom: 1px solid rgba(233,228,221,.11); }
.language-list > div:last-child { border-bottom: 0; }
.language-list b { align-self: start; padding-top: 6px; color: var(--clay-light); font-size: 9px; }
.language-list h3 { margin: 0 0 7px; font-size: clamp(27px,2.5vw,38px); }
.language-list p { margin: 0; color: #968980; font-family: var(--body); font-size: 12px; line-height: 1.5; }
.tools-grid { display: grid; grid-template-columns: repeat(2,1fr); }
.tools-grid > div { position: relative; min-height: 125px; padding: 23px; border-right: 1px solid rgba(233,228,221,.11); border-bottom: 1px solid rgba(233,228,221,.11); background: linear-gradient(145deg,rgba(255,255,255,.018),transparent); }
.tools-grid > div:nth-child(2n) { border-right: 0; }
.tools-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.tools-grid > div:hover { background: rgba(101,67,49,.18); }
.tools-grid span { display: block; color: var(--clay-light); font-size: 8px; letter-spacing: .1em; }
.tools-grid h3 { margin: 18px 0 5px; font-size: clamp(18px,1.7vw,25px); }
.tools-grid p { margin: 0; color: #897c74; font-family: var(--body); font-size: 11px; }

@media (max-width: 980px) {
  .hard-skills__head { grid-template-columns: 1fr; gap: 24px; }
  .skills-board { grid-template-columns: 1fr; }
  .skills-group--languages { border-right: 0; border-bottom: 1px solid rgba(200,142,109,.3); }
  .language-list { display: grid; grid-template-columns: repeat(3,1fr); }
  .language-list > div { grid-template-columns: 1fr; align-content: start; border-right: 1px solid rgba(233,228,221,.11); border-bottom: 0; }
  .language-list > div:last-child { border-right: 0; }
}

@media (max-width: 620px) {
  .language-list,.tools-grid { grid-template-columns: 1fr; }
  .language-list > div { border-right: 0; border-bottom: 1px solid rgba(233,228,221,.11); }
  .language-list > div:last-child { border-bottom: 0; }
  .tools-grid > div,.tools-grid > div:nth-child(2n),.tools-grid > div:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid rgba(233,228,221,.11); }
  .tools-grid > div:last-child { border-bottom: 0; }
}

/* Social contact — form-free layout */
.contact { display: block; overflow: hidden; color: var(--dark-text); text-align: center; background: radial-gradient(circle at 50% 18%,rgba(255,255,255,.7),transparent 34%),linear-gradient(145deg,#f3f0ec 0%,#e6e0da 54%,#f0ece7 100%); }
.contact::before { display: none; }
.contact__copy { width: min(100%,1080px); margin: 0 auto; }
.contact .section-index { display: block; margin-bottom: 30px; color: #6d625c; }
.contact h2 { max-width: 900px; margin: 0 auto; color: var(--dark-text); font-size: clamp(54px,6.2vw,94px); line-height: .96; letter-spacing: -.065em; }
.contact h2 em { display: inline-block; color: var(--clay); }
.contact__copy > p { max-width: 610px; margin: 34px auto 0; color: #756b65; font-size: clamp(16px,1.35vw,19px); line-height: 1.75; }
.contact__divider { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 54px auto 34px; color: var(--clay); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.contact__divider::before,.contact__divider::after { width: 72px; height: 1px; background: rgba(27,21,18,.3); content: ""; }
.contact-socials { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(16px,3vw,38px); }
.contact-socials > a { display: flex; min-width: 0; flex-direction: column; align-items: center; padding: 20px 10px 18px; border: 1px solid transparent; border-radius: 22px; color: var(--dark-text); text-decoration: none; transition: border-color .25s ease,background .25s ease,transform .25s ease; }
.contact-socials > a:hover { border-color: rgba(101,67,49,.24); background: rgba(255,255,255,.38); transform: translateY(-5px); }
.contact-socials__icon { display: grid; width: 76px; height: 76px; margin-bottom: 18px; place-items: center; border: 1px solid rgba(101,67,49,.35); border-radius: 20px; background: rgba(255,255,255,.22); color: #352821; box-shadow: 0 12px 30px rgba(60,42,32,.06); }
.contact-socials__icon svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.contact-socials__icon .social-icon-fill { fill: currentColor; stroke: none; }
.contact-socials strong { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.contact-socials small { display: block; max-width: 100%; margin-top: 9px; overflow: hidden; color: #837972; font-family: var(--display); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 720px) {
  .contact { padding-inline: 18px; }
  .contact h2 { font-size: clamp(46px,13vw,66px); line-height: 1; }
  .contact__copy > p { font-size: 16px; }
  .contact-socials { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 8px; }
  .contact-socials > a { padding-inline: 4px; }
  .contact-socials__icon { width: 66px; height: 66px; border-radius: 18px; }
  .contact-socials__icon svg { width: 34px; height: 34px; }
  .contact-socials small { font-size: 10px; }
}

/* Skills presentation inspired by the visual reference */
.skills-showcase { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(55px,9vw,145px); }
.hard-skill-list > p { max-width: 430px; margin: 0 0 24px; color: #766b64; font-family: var(--mono); font-size: 10px; line-height: 1.7; }
.hard-skill-list article { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 2px 0; padding: 14px 0 12px; }
.hard-skill-list article > span { color: var(--clay); font-size: 9px; }
.hard-skill-list article > strong { color: var(--dark-text); font-family: var(--mono); font-size: clamp(13px,1.2vw,17px); font-weight: 600; }
.hard-skill-list article > i { position: relative; display: block; height: 3px; grid-column: 1/-1; margin-top: 10px; overflow: hidden; background: rgba(27,21,18,.13); }
.hard-skill-list article > i::after { display: block; width: var(--fill); height: 100%; background: linear-gradient(90deg,var(--dark-text),var(--clay)); content: ""; }
.technology-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(25px,4vw,55px) 30px; }
.technology-grid figure { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 13px; margin: 0; text-align: center; }
.technology-grid img,.technology-grid__dax > span { width: 54px; height: 54px; object-fit: contain; transition: transform .25s ease,filter .25s ease; }
.technology-grid figure:hover img,.technology-grid figure:hover > span { transform: translateY(-5px); }
.technology-grid img { filter: saturate(.72) contrast(.96); }
.technology-grid figcaption { color: var(--dark-text); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.technology-grid__dax > span { display: grid; place-items: center; border: 2px solid var(--clay); color: var(--clay); font-family: var(--display); font-size: 17px; font-weight: 700; }

@media (max-width: 900px) {
  .skills-showcase { grid-template-columns: 1fr; }
  .technology-grid { width: min(100%,680px); }
}

@media (max-width: 520px) {
  .technology-grid { grid-template-columns: repeat(3,1fr); gap: 32px 12px; }
  .technology-grid img,.technology-grid__dax > span { width: 45px; height: 45px; }
  .technology-grid figcaption { font-size: 9px; }
}

/* Uniform project cards */
.projects-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
}
.project-card,
.project-card:nth-child(n) {
  grid-column: auto;
  height: 100%;
}
.project-card > a {
  display: flex;
  height: 100%;
  flex-direction: column;
}
.project-card__visual {
  min-height: 0;
  aspect-ratio: 16/8.7;
}
.project-card__body {
  display: flex;
  min-height: 285px;
  flex: 1;
  flex-direction: column;
}
.project-card__body > p { min-height: 0; }
.project-card__footer { margin-top: auto; }

@media (max-width: 760px) {
  .projects-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .project-card__visual { aspect-ratio: 16/9; }
  .project-card__body { min-height: 270px; }
}

/* Skills system — technological variation */
.skills-showcase {
  position: relative;
  grid-template-columns: 1.08fr .92fr;
  align-items: stretch;
  gap: 0;
  padding: 82px 28px 30px;
  overflow: hidden;
  border: 1px solid rgba(101,67,49,.55);
  background:
    linear-gradient(rgba(233,228,221,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(233,228,221,.035) 1px,transparent 1px),
    radial-gradient(circle at 80% 20%,rgba(101,67,49,.28),transparent 30%),
    linear-gradient(145deg,#080605 0%,#17100c 55%,#0a0705 100%);
  background-size: 42px 42px,42px 42px,auto,auto;
  box-shadow: 14px 14px 0 rgba(101,67,49,.22),0 28px 65px rgba(27,21,18,.18);
}
.skills-showcase::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: 52px;
  align-items: center;
  padding: 0 22px;
  border-bottom: 1px solid rgba(200,142,109,.28);
  color: #8f7769;
  background: rgba(5,3,2,.64);
  content: "~/nelson/capabilities/skills.json     •     SYSTEM_ONLINE";
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
}
.skills-showcase::after {
  position: absolute;
  top: 52px;
  bottom: 0;
  left: -20%;
  width: 16%;
  background: linear-gradient(90deg,transparent,rgba(200,142,109,.07),transparent);
  content: "";
  pointer-events: none;
  animation: skillsScan 8s ease-in-out infinite;
}
.hard-skill-list { padding: 8px 38px 4px 6px; border-right: 1px solid rgba(200,142,109,.24); }
.hard-skill-list > p { color: #8d8179; }
.hard-skill-list article { position: relative; padding: 13px 13px 12px; border-left: 1px solid transparent; transition: background .2s ease,border-color .2s ease; }
.hard-skill-list article:hover { border-left-color: var(--clay-light); background: rgba(101,67,49,.14); }
.hard-skill-list article > span { color: var(--clay-light); }
.hard-skill-list article > strong { color: var(--cream); }
.hard-skill-list article > i { height: 2px; background: rgba(233,228,221,.1); }
.hard-skill-list article > i::after { position: relative; background: linear-gradient(90deg,#493025,var(--clay-light)); }
.hard-skill-list article > i::before { position: absolute; z-index: 1; top: -3px; left: calc(var(--fill) - 3px); width: 7px; height: 7px; border: 1px solid var(--clay-light); border-radius: 50%; background: #120c09; box-shadow: 0 0 12px rgba(200,142,109,.55); content: ""; }
.technology-grid { align-content: center; gap: 10px; padding-left: 28px; counter-reset: tech-module; }
.technology-grid figure { position: relative; min-height: 128px; gap: 10px; overflow: hidden; border: 1px solid rgba(233,228,221,.1); background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(101,67,49,.055)); counter-increment: tech-module; transition: border-color .25s ease,background .25s ease,transform .25s ease; }
.technology-grid figure::before { position: absolute; top: 9px; left: 10px; color: #70594d; content: "0" counter(tech-module); font-family: var(--mono); font-size: 7px; }
.technology-grid figure::after { position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-top: 1px solid var(--clay); border-right: 1px solid var(--clay); content: ""; opacity: .45; }
.technology-grid figure:hover { z-index: 2; border-color: rgba(200,142,109,.65); background: rgba(101,67,49,.18); transform: translateY(-4px); }
.technology-grid img { filter: saturate(.62) brightness(.92); }
.technology-grid figcaption { color: #c5b8af; font-size: 10px; }
.technology-grid__dax > span { border-color: #8d6048; color: var(--clay-light); }
@keyframes skillsScan { 0%,18% { transform: translateX(0); } 72%,100% { transform: translateX(760%); } }

@media (max-width: 900px) {
  .skills-showcase { grid-template-columns: 1fr; padding: 76px 22px 25px; }
  .hard-skill-list { padding-right: 6px; padding-bottom: 30px; border-right: 0; border-bottom: 1px solid rgba(200,142,109,.24); }
  .technology-grid { width: 100%; padding: 28px 0 0; }
}

@media (max-width: 520px) {
  .skills-showcase { padding-inline: 14px; }
  .skills-showcase::before { padding-inline: 14px; content: "skills.json  •  SYSTEM_ONLINE"; }
  .hard-skill-list article { padding-inline: 5px; }
  .technology-grid { grid-template-columns: repeat(2,1fr); }
  .technology-grid figure { min-height: 115px; }
}

@media (prefers-reduced-motion: reduce) {
  .skills-showcase::after { animation: none; }
}

/* Project detail — clear case-study layout */
.project-detail-hero {
  position: relative;
  padding: 138px clamp(24px,7vw,112px) 70px calc(clamp(24px,7vw,112px) + 42px);
  overflow: hidden;
  background:
    linear-gradient(rgba(236,232,228,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(236,232,228,.035) 1px,transparent 1px),
    radial-gradient(circle at 86% 18%,rgba(101,67,49,.28),transparent 32%),
    #090605;
  background-size: 52px 52px,52px 52px,auto,auto;
  color: var(--cream);
}
.project-detail-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 38px; }
.project-detail-hero__meta span { padding: 8px 11px; border: 1px solid rgba(200,142,109,.34); background: rgba(17,11,9,.72); color: var(--clay-light); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }
.project-detail-hero__grid { display: grid; grid-template-columns: minmax(0,1.03fr) minmax(390px,.72fr); align-items: center; gap: clamp(48px,7vw,110px); }
.project-detail-kicker { margin-bottom: 17px; color: var(--clay-light); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }
.project-detail-hero h1 { max-width: 780px; margin: 0; color: var(--cream); font-size: clamp(48px,5.4vw,82px); line-height: .94; letter-spacing: -.055em; text-transform: none; }
.project-detail-summary { max-width: 690px; margin: 28px 0 0; color: #bdb3ad; font-size: clamp(17px,1.5vw,20px); line-height: 1.7; }
.project-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 34px; }
.project-github-button { display: inline-flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 30px; padding: 0 20px; border: 1px solid var(--clay-light); background: var(--clay); color: var(--cream); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-decoration: none; transition: background .2s ease,transform .2s ease; }
.project-github-button:hover { background: #7b513a; transform: translateY(-2px); }
.project-github-button i { font-size: 17px; font-style: normal; }
.project-back-button { color: #a39891; font-family: var(--mono); font-size: 10px; text-decoration: none; }
.project-back-button:hover { color: var(--cream); }
.project-detail-visual { min-height: 0; aspect-ratio: 1.12/1; border: 1px solid rgba(200,142,109,.4); background-color: #15100d; box-shadow: 16px 16px 0 rgba(101,67,49,.18); }
.project-detail-visual > svg { right: 4%; bottom: 3%; width: 76%; }
.project-detail-metric { position: absolute; top: 25px; left: 25px; z-index: 3; display: flex; flex-direction: column; }
.project-detail-metric small { color: #8e776a; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
.project-detail-metric strong { margin-top: 8px; color: var(--cream); font-family: var(--display); font-size: clamp(44px,4.5vw,68px); line-height: .9; letter-spacing: -.05em; }
.project-detail-metric span { max-width: 155px; margin-top: 7px; color: #a79a92; font-size: 10px; line-height: 1.4; text-transform: uppercase; }
.project-detail-visual__id { position: absolute; right: 18px; bottom: 15px; color: #7c6960; font-family: var(--mono); font-size: 8px; }
.project-detail-facts { display: grid; grid-template-columns: .7fr 1.3fr .8fr; margin-top: 55px; border-block: 1px solid rgba(236,232,228,.14); }
.project-detail-facts > div { display: flex; min-height: 90px; flex-direction: column; justify-content: center; gap: 8px; padding: 17px 25px; border-right: 1px solid rgba(236,232,228,.14); }
.project-detail-facts > div:first-child { padding-left: 0; }
.project-detail-facts > div:last-child { border-right: 0; }
.project-detail-facts span { color: #776b65; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.project-detail-facts strong { color: #d6cec8; font-family: var(--display); font-size: 14px; font-weight: 600; }

.project-detail-body { display: grid; grid-template-columns: 210px minmax(0,820px); justify-content: center; gap: clamp(55px,9vw,135px); padding: 105px clamp(24px,7vw,112px) 115px calc(clamp(24px,7vw,112px) + 42px); background: var(--offwhite); color: var(--dark-text); }
.project-detail-index { position: sticky; top: 105px; display: flex; height: fit-content; flex-direction: column; border-top: 2px solid var(--clay); }
.project-detail-index > span { padding: 18px 0; color: var(--clay); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }
.project-detail-index a { display: flex; align-items: center; gap: 13px; padding: 15px 0; border-top: 1px solid rgba(27,21,18,.15); color: #6d635d; font-size: 12px; text-decoration: none; transition: color .2s ease,padding .2s ease; }
.project-detail-index a:hover { padding-left: 6px; color: var(--clay); }
.project-detail-index b { color: #a78e80; font-family: var(--mono); font-size: 8px; }
.project-detail-section { padding: 0 0 74px; scroll-margin-top: 100px; }
.project-detail-section + .project-detail-section { padding-top: 74px; border-top: 1px solid rgba(27,21,18,.17); }
.project-detail-section > span { color: var(--clay); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .09em; }
.project-detail-section h2 { max-width: 720px; margin: 14px 0 23px; color: var(--dark-text); font-size: clamp(32px,3.4vw,48px); line-height: 1.04; letter-spacing: -.04em; }
.project-detail-section > p { max-width: 760px; margin-bottom: 0; color: #5f5752; font-size: 17px; line-height: 1.8; }
.project-process { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 38px; border: 1px solid rgba(27,21,18,.22); }
.project-process > div { display: flex; min-height: 128px; flex-direction: column; padding: 18px; border-right: 1px solid rgba(27,21,18,.18); }
.project-process > div:last-child { border-right: 0; }
.project-process b { color: var(--clay); font-family: var(--mono); font-size: 9px; }
.project-process strong { margin-top: auto; font-family: var(--display); font-size: 17px; }
.project-process small { margin-top: 5px; color: #81766f; font-size: 10px; }
.project-result-card { display: grid; min-height: 170px; grid-template-columns: 1fr auto; align-items: center; margin-top: 38px; padding: 30px 34px; overflow: hidden; border-left: 5px solid var(--clay); background: linear-gradient(125deg,#110b08,#25170f); color: var(--cream); }
.project-result-card small { align-self: end; color: #8f786b; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.project-result-card strong { grid-row: span 2; color: var(--clay-light); font-family: var(--display); font-size: clamp(48px,6vw,78px); line-height: 1; }
.project-result-card span { align-self: start; color: #c6bbb4; font-size: 13px; }
.project-code { margin: 34px 0 0; padding: 25px 27px; overflow-x: auto; border: 1px solid rgba(155,115,91,.38); background: #0c0806; color: #d9cec7; font-size: 12px; line-height: 2; box-shadow: none; }
.project-code::before { display: block; margin-bottom: 14px; color: var(--clay-light); content: "nelson@data-lab $ project.py"; font-family: var(--mono); font-size: 9px; }
.project-code span { display: inline-block; width: 38px; color: #71594c; user-select: none; }
.project-github-button--inline { margin-top: 22px; }
.project-detail-next { display: grid; grid-template-columns: .55fr 1fr; align-items: center; gap: 50px; padding: 65px clamp(24px,7vw,112px) 65px calc(clamp(24px,7vw,112px) + 42px); background: linear-gradient(115deg,#100a07,#3a2419 58%,#120c09); color: var(--cream); }
.project-detail-next > div { display: flex; flex-direction: column; gap: 7px; }
.project-detail-next > div span { color: var(--clay-light); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.project-detail-next > div small { color: #8f8178; font-size: 11px; }
.project-detail-next > a { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-block: 1px solid rgba(236,232,228,.17); text-decoration: none; }
.project-detail-next strong { font-family: var(--display); font-size: clamp(29px,4vw,49px); font-weight: 600; letter-spacing: -.04em; }
.project-detail-next i { color: var(--clay-light); font-size: 30px; font-style: normal; }

@media (max-width: 980px) {
  .project-detail-hero__grid { grid-template-columns: 1fr; }
  .project-detail-visual { width: min(100%,650px); aspect-ratio: 16/10; }
  .project-detail-body { grid-template-columns: 1fr; gap: 55px; }
  .project-detail-index { position: static; display: grid; grid-template-columns: repeat(4,1fr); }
  .project-detail-index > span { grid-column: 1/-1; }
  .project-detail-index a { border-right: 1px solid rgba(27,21,18,.15); padding-inline: 10px; }
  .project-detail-index a:last-child { border-right: 0; }
}

@media (max-width: 680px) {
  .project-page .site-header .logo__text { display: none; }
  .project-detail-hero { padding: 108px 18px 50px; }
  .project-detail-hero__meta { margin-bottom: 30px; }
  .project-detail-hero h1 { font-size: clamp(42px,13vw,60px); }
  .project-detail-summary { margin-top: 22px; font-size: 16px; }
  .project-detail-actions { align-items: stretch; flex-direction: column; }
  .project-github-button { width: 100%; }
  .project-detail-visual { aspect-ratio: 1/1; box-shadow: 8px 8px 0 rgba(101,67,49,.18); }
  .project-detail-facts { grid-template-columns: 1fr; margin-top: 42px; }
  .project-detail-facts > div,.project-detail-facts > div:first-child { min-height: 76px; padding: 15px 0; border-right: 0; border-bottom: 1px solid rgba(236,232,228,.14); }
  .project-detail-facts > div:last-child { border-bottom: 0; }
  .project-detail-body { padding: 75px 18px 85px; }
  .project-detail-index { grid-template-columns: 1fr 1fr; }
  .project-detail-index a { font-size: 10px; }
  .project-detail-section { padding-bottom: 58px; }
  .project-detail-section + .project-detail-section { padding-top: 58px; }
  .project-detail-section h2 { font-size: 34px; }
  .project-detail-section > p { font-size: 16px; }
  .project-process { grid-template-columns: 1fr 1fr; }
  .project-process > div:nth-child(2) { border-right: 0; }
  .project-process > div:nth-child(-n+2) { border-bottom: 1px solid rgba(27,21,18,.18); }
  .project-result-card { grid-template-columns: 1fr; gap: 8px; padding: 27px 24px; }
  .project-result-card strong { grid-row: auto; }
  .project-code { padding: 20px 15px; font-size: 10px; }
  .project-detail-next { grid-template-columns: 1fr; gap: 25px; padding: 52px 18px; }
}

/* Simplified hero identity */
.hero::after { display: none; }
.hero__meta { justify-content: center; text-align: center; }
.hero__meta span { letter-spacing: .2em; }

/* Business analytics hero */
.hero { background: radial-gradient(circle at 77% 45%,#21130e 0%,#0d0806 34%,#070504 72%); }
.hero::before { z-index: 0; opacity: .72; mask-image: linear-gradient(to right,black 0%,rgba(0,0,0,.75) 54%,transparent 100%); }
.hero__copy { max-width: 1060px; }
.hero h1 { max-width: 1000px; font-size: clamp(51px,4.65vw,76px); line-height: .98; letter-spacing: -.055em; }
.hero h1 em { white-space: normal; }
.hero__lead { max-width: 650px; }
.hero__analytics-bg { position: absolute; right: 0; bottom: 35px; z-index: 1; width: min(52vw,820px); color: var(--clay-light); opacity: .5; pointer-events: none; mask-image: linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 18%,black 42%,black 100%); }
.hero__analytics-bg svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-chart-grid path { fill: none; stroke: rgba(200,142,109,.1); stroke-width: 1; }
.hero-chart-bars rect { fill: rgba(101,67,49,.11); }
.hero-chart-area { fill: url(#heroAnalyticsArea); }
.hero-chart-line { fill: none; stroke: url(#heroAnalyticsLine); stroke-width: 3; }
.hero-chart-points circle { fill: #17100c; stroke: #9b735b; stroke-width: 3; }
.hero-chart-labels { fill: #80675a; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
.button,.nav-contact,.nav-toggle { border-radius: 10px; }
.button { padding-inline: 23px; }

@media (max-width: 900px) {
  .hero__analytics-bg { right: -10%; bottom: 48px; width: 95vw; opacity: .27; mask-image: linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 22%,black 48%); }
}

@media (max-width: 620px) {
  .hero h1 { font-size: clamp(40px,11.5vw,56px); line-height: 1.02; }
  .hero { padding-bottom: 235px; }
  .hero__analytics-bg { right: -22%; bottom: 52px; width: 125vw; opacity: .3; mask-image: linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.7) 24%,black 48%,black 100%); }
  .hero__actions .button { border-radius: 12px; }
}

.filter-row button::before,
.filter-row button::after { content: none; }

/* Full-screen business analytics backdrop */
.hero__legacy-chart { display: none!important; }
.hero__analytics-bg { position: absolute; inset: 0; z-index: 1; width: 100%; opacity: 1; pointer-events: none; mask-image: none; }
.hero-data-backdrop { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 86% 31%,rgba(255,126,56,.12) 0%,transparent 15%),radial-gradient(circle at 72% 53%,rgba(194,83,34,.2) 0%,transparent 32%),radial-gradient(circle at 55% 68%,rgba(116,51,26,.12),transparent 28%); }
.hero-data-backdrop::before { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 86.4% 38%,rgba(255,166,102,.18) 0 2px,rgba(229,103,44,.12) 3px,transparent 23px),radial-gradient(circle at 73% 49%,rgba(255,150,83,.14) 0 2px,transparent 26px),radial-gradient(circle at 65% 61%,rgba(231,105,48,.11) 0 2px,transparent 22px); content: ""; filter: blur(.2px); }
.hero-data-backdrop::after { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(7,5,4,.84) 0%,rgba(7,5,4,.52) 43%,rgba(7,5,4,.08) 76%,rgba(7,5,4,.18) 100%); content: ""; }
.hero-data-desktop { display: block; width: 100%!important; height: 100%!important; }
.hero-data-mobile { display: none!important; }
.data-network path,.mobile-network path { fill: none; stroke: rgba(180,112,70,.23); stroke-width: 1.2; }
.data-network circle,.mobile-network circle { fill: #d16e38; opacity: .78; filter: drop-shadow(0 0 7px rgba(239,113,50,.68)); }
.data-scatter > path { fill: none; stroke: rgba(164,102,64,.15); stroke-width: 1; }.data-scatter .data-regression { stroke: rgba(231,145,88,.58); stroke-width: 2; }.data-scatter circle { fill: #c87948; opacity: .72; }
.data-bars rect,.mobile-bars rect { fill: url(#dataBars); stroke: rgba(190,115,70,.26); stroke-width: 1; }.mobile-bars rect { fill: rgba(126,75,46,.24); }
.data-trend,.mobile-trend { fill: none; stroke: url(#dataTrend); stroke-width: 2.7; filter: url(#dataGlow); }.mobile-trend { stroke: url(#mobileTrend); filter: url(#mobileGlow); }
.data-trend-points circle,.mobile-points circle { fill: #ffad73; stroke: rgba(255,221,193,.88); stroke-width: 2; filter: url(#dataGlow); }.mobile-points circle { filter: url(#mobileGlow); }
.data-wave path { fill: none; stroke: rgba(227,112,54,.48); stroke-width: 1.3; stroke-dasharray: 2 7; }.mobile-wave { fill: none; stroke: rgba(227,112,54,.48); stroke-width: 1.2; stroke-dasharray: 2 6; }
.data-particles circle,.mobile-particles circle { fill: #ef7e3e; opacity: .82; filter: drop-shadow(0 0 5px rgba(255,121,51,.72)); }
.data-copy { fill: rgba(180,115,76,.42); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }.mobile-data-label { fill: rgba(202,132,87,.58); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; }
.data-network,.data-scatter,.data-wave,.data-particles,.data-copy,.mobile-network,.mobile-wave,.mobile-particles,.mobile-data-label { display: none; }
.hero-data-backdrop { background: radial-gradient(circle at 87% 46%,rgba(103,61,40,.1),transparent 28%); }
.hero-data-backdrop::before { display: none; }
.hero-data-backdrop::after { background: linear-gradient(90deg,rgba(7,5,4,.98) 0%,rgba(7,5,4,.91) 43%,rgba(7,5,4,.58) 66%,rgba(7,5,4,.2) 100%); }
.data-bars rect { fill: rgba(105,66,45,.27); stroke: rgba(133,86,58,.18); }
.data-trend { stroke: rgba(125,80,56,.72); stroke-width: 2.2; filter: none; }
.data-trend-points circle { fill: #0a0705; stroke: rgba(126,80,55,.8); stroke-width: 3; filter: none; }
.hero__meta { display: flex!important; width: 100%; justify-content: center; text-align: center; }

@media (max-width: 900px) {
  .hero-data-backdrop::after { background: linear-gradient(180deg,rgba(7,5,4,.9) 0%,rgba(7,5,4,.58) 50%,rgba(7,5,4,.12) 100%); }
  .hero-data-desktop { opacity: .65; transform: translateX(-9%); }
}

@media (max-width: 620px) {
  .hero { min-height: 100svh; align-content: start; padding-top: 115px; padding-bottom: 70px; }
  .hero__analytics-bg { inset: 0; width: 100%; height: 100%; opacity: 1; }
  .hero-data-backdrop { background: radial-gradient(circle at 90% 47%,rgba(103,61,40,.1),transparent 30%); }
  .hero-data-backdrop::before { display: none; }
  .hero-data-backdrop::after { background: linear-gradient(90deg,rgba(7,5,4,.99) 0%,rgba(7,5,4,.94) 52%,rgba(7,5,4,.68) 78%,rgba(7,5,4,.45) 100%),linear-gradient(180deg,rgba(7,5,4,.8),rgba(7,5,4,.32) 48%,rgba(7,5,4,.64)); }
  .hero-data-desktop { display: none!important; }
  .hero-data-mobile { position: absolute; top: 54%; left: 0; display: block!important; width: 100%!important; height: auto!important; opacity: .4; transform: none; transform-origin: right top; }
  .mobile-bars rect { fill: rgba(105,66,45,.23); stroke: rgba(133,86,58,.15); }
  .mobile-trend { stroke: rgba(125,80,56,.62); stroke-width: 2; filter: none; }
  .mobile-points circle { fill: #0a0705; stroke: rgba(126,80,55,.72); stroke-width: 2.5; filter: none; }
}

/* Rounded interface system */
.availability,
.project-detail-hero__meta span { border-radius: 999px; }

.filter-row button,
.button,
.nav-contact,
.nav-toggle,
.project-github-button { border-radius: 12px; }

.project-card > a,
.about-profile__image,
.skills-showcase,
.contact-form,
.project-detail-visual,
.project-detail-facts,
.project-process,
.project-result-card,
.project-code { border-radius: 20px; }

.project-card > a,
.project-detail-facts,
.project-process { overflow: hidden; }

.technology-grid figure,
.technology-grid__dax > span { border-radius: 14px; }

.filter-row button { padding-inline: 19px; }

/* Reliable mobile side drawer */
@media (max-width: 860px) {
  .site-header,
  .site-header.is-scrolled {
    overflow: visible;
    backdrop-filter: none;
  }

  .main-nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 152;
    display: flex !important;
    width: min(88vw,390px) !important;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 22px;
    padding: 100px 30px 45px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-left: 1px solid rgba(200,142,109,.38);
    border-radius: 22px 0 0 22px;
    background: linear-gradient(155deg,#27180f 0%,#110b08 48%,#070504 100%);
    box-shadow: -24px 0 65px rgba(0,0,0,.48);
    visibility: hidden;
    transform: translate3d(102%,0,0) !important;
    transition: transform .38s cubic-bezier(.22,.8,.24,1),visibility 0s linear .38s;
    overscroll-behavior: contain;
    will-change: transform;
  }

  .nav-open .main-nav {
    visibility: visible;
    transform: translate3d(0,0,0) !important;
    transition-delay: 0s;
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 151;
    display: block;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    background: rgba(5,3,2,.72);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    backdrop-filter: blur(4px);
  }

  .nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

  .nav-toggle {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 154;
  }

  .main-nav a {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
  }

  .main-nav .nav-contact {
    align-self: flex-start;
    width: auto;
  }
}

/* Reference-locked hero composition — 1600 × 900 */
@media (min-width: 901px) {
  .site-header { left: 0; padding-inline: clamp(58px,4.4vw,70px); }
  .hero { min-height: 900px; align-content: start; padding: 192px 4.4vw 55px; }
  .hero__copy { max-width: 1100px; }
  .hero .availability { margin-bottom: 40px; }
  .hero .eyebrow { margin-bottom: 32px; }
  .hero h1 { width: 1040px; max-width: none; font-size: clamp(64px,4.5vw,72px); line-height: 1.12; letter-spacing: -.055em; }
  .hero h1 > span { display: block; }
  .hero__lower { grid-template-columns: 1fr; align-items: start; gap: 40px; margin-top: 34px; }
  .hero__lead { max-width: 650px; font-size: 19px; line-height: 1.7; }
  .hero__lower .hero__actions { justify-self: start; margin-top: 0; transform: none; }
  .hero__actions .button { min-width: 254px; min-height: 72px; padding-inline: 30px; border-radius: 12px; }
  .hero__actions .text-link { white-space: nowrap; }
  .hero__meta { display: flex!important; width: 100%; justify-content: center; transform: none; }
  .hero__meta span { align-self: center; font-size: 9px; letter-spacing: .2em; }
  .hero__meta strong { color: rgba(155,115,91,.72); font-family: var(--display); font-size: 20px; letter-spacing: -.04em; }
  .hero__meta small { grid-column: 2; color: rgba(155,115,91,.24); font-family: var(--display); font-size: 14px; letter-spacing: -.025em; }
  .hero__meta { transform: none; }
  .data-bars,.data-trend,.data-trend-points { transform: none; }
  .data-wave { transform: translateY(-112px); }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0,1fr); }
  .hero,.hero__copy,.hero__lower,.hero h1,.hero__lead { min-width: 0; max-width: 100%; }
  .hero__meta { display: flex!important; justify-content: center; }
  .hero__meta strong { color: rgba(155,115,91,.72); font-family: var(--display); font-size: 15px; }
  .hero__meta small { grid-column: 1/-1; color: rgba(155,115,91,.3); font-family: var(--display); font-size: 10px; }
  .hero h1 > span,.hero h1 > em { display: block; max-width: 100%; }
}

@media (max-width: 620px) {
  .hero { padding-inline: 18px; padding-bottom: 70px; }
  .hero__copy,.hero__lower,.hero__lead { width: calc(100vw - 36px); }
  .hero h1 { width: 100%; font-size: clamp(37px,10vw,42px); line-height: 1.08; overflow-wrap: normal; }
  .hero .eyebrow { max-width: 100%; font-size: 9px; line-height: 1.6; }
  .hero__lead { width: min(310px,calc(100vw - 72px)); max-width: min(310px,calc(100vw - 72px)); font-size: 15px; line-height: 1.7; }
  .hero__analytics-bg { height: 100%; }
  .hero__meta { width: 100%; min-width: 0; margin-top: 58px; }
  .hero__meta span,.hero__meta strong,.hero__meta small { grid-column: 1; min-width: 0; overflow-wrap: anywhere; }
}

/* Editorial footer */
.site-footer { position: relative; display: block; padding: 76px clamp(24px,6vw,96px) 34px calc(clamp(24px,6vw,96px) + 42px); overflow: hidden; border-top: 1px solid rgba(200,142,109,.22); background: radial-gradient(circle at 12% 30%,rgba(101,67,49,.24),transparent 27%),linear-gradient(135deg,#080504 0%,#160e0a 52%,#080504 100%); color: var(--cream); }
.footer__main { position: relative; z-index: 2; display: grid!important; grid-template-columns: minmax(360px,1.5fr) minmax(150px,.55fr) minmax(220px,.75fr); align-items: start; gap: clamp(45px,7vw,110px)!important; color: inherit!important; font-size: inherit!important; }
.footer__identity .logo { margin-bottom: 26px; }
.footer__identity > p { margin: 0 0 13px; color: var(--clay-light); font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.footer__identity h2 { max-width: 650px; margin: 0; font-size: clamp(38px,4vw,64px); line-height: .98; letter-spacing: -.06em; }
.footer__identity h2 em { color: var(--clay-light); }
.footer__availability { display: inline-flex; align-items: center; gap: 9px; margin-top: 27px; color: #a99d96; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.footer__availability i { width: 7px; height: 7px; border-radius: 50%; background: var(--clay-light); box-shadow: 0 0 12px rgba(155,115,91,.75); }
.footer__nav,.footer__contact { display: flex; min-width: 0; flex-direction: column; }
.footer__nav > span,.footer__contact > span { margin-bottom: 17px; color: var(--clay-light); font-family: var(--mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.footer__nav a,.footer__contact a { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(236,232,228,.12); color: #b8ada6; font-family: var(--display); font-size: 13px; text-decoration: none; transition: color .2s ease,padding .2s ease; }
.footer__nav a:hover,.footer__contact a:hover { padding-left: 7px; color: var(--cream); }
.footer__nav i,.footer__contact i,.footer__bottom i { color: var(--clay-light); font-style: normal; }
.footer__bottom { position: relative; z-index: 2; display: grid!important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px!important; margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(236,232,228,.14); color: #776a63!important; font-family: var(--mono); font-size: 9px!important; letter-spacing: .05em; }
.footer__bottom span:nth-child(2) { text-align: center; text-transform: uppercase; }
.footer__bottom a { justify-self: end; color: #a99d96; }
.footer__wordmark { position: absolute; right: -22px; bottom: -26px; z-index: 0; color: transparent!important; font-family: var(--display); font-size: clamp(90px,12vw,190px)!important; font-weight: 800; line-height: .7; letter-spacing: -.08em; opacity: .32; -webkit-text-stroke: 1px rgba(200,142,109,.15); pointer-events: none; }

@media (max-width: 850px) {
  .site-footer { padding: 62px 24px 30px; }
  .footer__main { grid-template-columns: 1fr 1fr; gap: 48px 34px!important; }
  .footer__identity { grid-column: 1/-1; }
  .footer__bottom { grid-template-columns: 1fr auto; }
  .footer__bottom span:nth-child(2) { display: none; }
}

@media (max-width: 520px) {
  .footer__main { grid-template-columns: 1fr; gap: 42px!important; }
  .footer__identity { grid-column: auto; }
  .footer__identity h2 { font-size: clamp(36px,11vw,48px); }
  .footer__bottom { grid-template-columns: 1fr; gap: 13px!important; margin-top: 50px; }
  .footer__bottom a { justify-self: start; }
  .footer__wordmark { right: -8px; bottom: 24px; font-size: 78px!important; }
}

/* Compact institutional footer */
.site-footer { padding: 48px clamp(24px,6vw,96px) 24px calc(clamp(24px,6vw,96px) + 42px); background: linear-gradient(110deg,#080504 0%,#15100d 58%,#0b0806 100%); }
.footer__compact { position: relative; z-index: 2; display: grid!important; grid-template-columns: minmax(280px,1.1fr) minmax(220px,.75fr) minmax(190px,.65fr); align-items: start; gap: clamp(40px,7vw,105px)!important; color: inherit!important; font-size: inherit!important; }
.footer__brand .logo { margin-bottom: 18px; }
.footer__brand > strong { display: block; color: var(--clay-light); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.footer__brand > p { max-width: 370px; margin: 12px 0 0; color: #8f837c; font-family: var(--display); font-size: 13px; line-height: 1.65; }
.footer__group h3 { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(236,232,228,.2); color: var(--cream); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.footer__line { display: flex; align-items: center; gap: 12px; color: #b9aea7; font-family: var(--display); font-size: 13px; text-decoration: none; }
.footer__line svg { width: 23px; height: 23px; flex: 0 0 23px; fill: none; stroke: var(--clay-light); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.footer__line:hover { color: var(--cream); }
.footer__socials { display: flex; flex-direction: column; gap: 11px; }
.footer__socials a { display: flex; align-items: center; gap: 11px; color: #b9aea7; font-family: var(--display); font-size: 13px; text-decoration: none; }
.footer__socials a > span { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border: 1px solid rgba(155,115,91,.55); border-radius: 7px; color: var(--clay-light); font-family: var(--mono); font-size: 9px; font-weight: 700; }
.footer__socials a:hover { color: var(--cream); }
.footer__bottom { display: flex!important; align-items: center; justify-content: space-between; gap: 24px!important; margin-top: 38px; padding-top: 21px; color: #756a64!important; }
.footer__bottom a { justify-self: auto; color: #9a8e87; text-decoration: none; }
.footer__wordmark { display: none; }

@media (max-width: 820px) {
  .site-footer { padding: 44px 24px 24px; }
  .footer__compact { grid-template-columns: 1fr 1fr; gap: 38px 30px!important; }
  .footer__brand { grid-column: 1/-1; }
}

@media (max-width: 540px) {
  .footer__compact { grid-template-columns: 1fr; gap: 34px!important; }
  .footer__brand { grid-column: auto; }
  .footer__bottom { align-items: flex-start; flex-direction: column; gap: 12px!important; margin-top: 36px; }
}

/* Brighter analytics background — mobile only */
@media (max-width: 620px) {
  .hero-data-backdrop { background: radial-gradient(circle at 78% 67%,rgba(151,88,54,.3),transparent 43%),radial-gradient(circle at 94% 48%,rgba(116,68,44,.22),transparent 34%); }
  .hero-data-backdrop::after { background: linear-gradient(180deg,rgba(7,5,4,.76) 0%,rgba(7,5,4,.54) 42%,rgba(7,5,4,.16) 66%,rgba(7,5,4,.2) 100%),linear-gradient(90deg,rgba(7,5,4,.83) 0%,rgba(7,5,4,.52) 48%,rgba(7,5,4,.08) 100%); }
  .hero-data-mobile { top: 50%; opacity: .84; }
  .mobile-network { display: block; }
  .mobile-network path { stroke: rgba(181,115,77,.58); stroke-width: 1.35; }
  .mobile-network circle { fill: #9b735b; opacity: .88; filter: drop-shadow(0 0 4px rgba(192,138,104,.55)); }
  .mobile-bars rect { fill: rgba(144,91,60,.38); stroke: rgba(192,138,104,.34); }
  .mobile-trend { stroke: rgba(200,142,109,.92); stroke-width: 2.5; filter: url(#mobileGlow); }
  .mobile-points circle { fill: #c89473; stroke: rgba(245,211,188,.9); stroke-width: 2; filter: url(#mobileGlow); }
}

/* Mobile hero: bar chart only, aligned to the DATA divider */
@media (max-width: 620px) {
  .mobile-network,.mobile-trend,.mobile-points,.mobile-wave,.mobile-particles,.mobile-data-label { display: none!important; }
  .mobile-bars { display: block; transform: translateY(-108px); }
}

/* Project media uploaded through the admin panel */
.project-card__cover { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.project-card__visual--image::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg,rgba(10,7,5,.08),rgba(10,7,5,.5)); content: ""; pointer-events: none; }
.project-card__visual--image .project-card__metric,.project-card__visual--image .project-card__number { z-index: 2; color: var(--cream); text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.project-not-found { min-height: 75svh; padding: 180px clamp(24px,8vw,130px) 90px; background: #090605; color: var(--cream); }
.project-not-found span { color: var(--clay-light); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }
.project-not-found h1 { max-width: 900px; margin: 20px 0; font-size: clamp(45px,7vw,100px); }
.project-not-found p { color: #a89e97; }.project-not-found a { display: inline-block; margin-top: 28px; color: var(--clay-light); }
.project-cover { margin: 0; padding: 0 clamp(24px,7vw,115px) 80px calc(clamp(24px,7vw,115px) + 42px); background: #090605; }
.project-cover img { display: block; width: 100%; max-height: 760px; border: 1px solid rgba(200,142,109,.3); border-radius: 18px; object-fit: cover; }
.project-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 30px; }
.project-gallery figure { margin: 0; overflow: hidden; border: 1px solid rgba(200,142,109,.22); border-radius: 15px; background: #120c09; }
.project-gallery img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .35s ease; }
.project-gallery figure:hover img { transform: scale(1.025); }
@media (max-width: 860px) {
  .project-cover { padding: 0 18px 55px; }
  .project-cover img { max-height: 520px; border-radius: 13px; }
  .project-gallery { grid-template-columns: 1fr; }
}