:root { --ink:#17202b; --muted:#596474; --paper:#f7f8f5; --white:#ffffff; --line:#dce2dd; --lime:#d8ef67; --sky:#b9e1ef; --coral:#ffb38c; --violet:#b9a8f2; --dark:#1b2c34; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Manrope,Arial,sans-serif; color:var(--ink); background:var(--paper); line-height:1.55; }
button,a { font:inherit; }
a { color:inherit; }
.skip-link { position:absolute; left:-999px; top:12px; background:var(--ink); color:#fff; padding:.75rem 1rem; z-index:10; border-radius:8px; }
.skip-link:focus { left:12px; }
.site-header { display:flex; align-items:center; justify-content:space-between; max-width:1250px; padding:1.3rem 2rem; margin:auto; }
.brand { text-decoration:none; font-size:1.35rem; letter-spacing:-.08em; font-weight:800; }.brand span { color:#e46938; }
nav { display:flex; gap:1.4rem; } nav a { text-decoration:none; font-size:.88rem; font-weight:700; } nav a:hover { text-decoration:underline; text-underline-offset:4px; }
.hero { max-width:1250px; min-height:560px; margin:auto; padding:5.2rem 2rem 4.5rem; position:relative; overflow:hidden; }.hero::after { content:""; position:absolute; width:420px; height:420px; background:var(--lime); border-radius:49% 51% 60% 40% / 42% 50% 50% 58%; right:-95px; top:55px; z-index:-1; opacity:.8; }
.eyebrow { text-transform:uppercase; letter-spacing:.12em; color:#40505c; font-family:"DM Mono",monospace; font-size:.7rem; font-weight:500; display:flex; align-items:center; gap:.45rem; margin:0 0 1.2rem; }.pulse { width:8px; height:8px; border-radius:50%; background:#e46938; display:inline-block; }
h1,h2,h3,p { margin-top:0; }h1,h2,h3 { line-height:1.05; letter-spacing:-.055em; } h1 { font-size:clamp(3rem,7vw,6.9rem); max-width:920px; margin-bottom:1.55rem; font-weight:800; } h1 em { font-family:Georgia,serif; letter-spacing:-.08em; font-weight:400; }.hero-copy { max-width:610px; color:var(--muted); font-size:1.08rem; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; margin-top:.6rem; }.primary-button { display:inline-flex; align-items:center; gap:.8rem; background:var(--ink); color:#fff; padding:.85rem 1.15rem; border-radius:3px; text-decoration:none; font-weight:800; font-size:.9rem; }.primary-button:hover { transform:translateY(-2px); }.primary-button span { color:var(--lime); font-size:1.2rem; }.resume-button { display:inline-flex; align-items:center; gap:.55rem; padding:.78rem .2rem; color:var(--ink); font-size:.86rem; font-weight:800; text-decoration:none; border-bottom:1px solid var(--ink); }.resume-button:hover { color:#e46938; border-color:#e46938; }
.stat-row { display:flex; gap:clamp(1.75rem,6vw,5.5rem); margin:4.2rem 0 0; }.stat-row div { display:grid; gap:.1rem; }.stat-row dt { font-size:1.75rem; letter-spacing:-.06em; font-weight:800; }.stat-row dd { margin:0; color:var(--muted); font-size:.78rem; }
.projects-section { background:var(--dark); color:#f5f7f2; padding:5.5rem max(2rem,calc((100vw - 1250px)/2)); }.section-heading { display:flex; gap:2rem; justify-content:space-between; align-items:end; margin-bottom:2rem; }.section-heading .eyebrow { color:#c7d1ca; }.section-heading h2,.approach h2 { font-size:clamp(2.2rem,4.2vw,4.3rem); max-width:750px; margin-bottom:0; }.project-count { color:#b9c6c0; font-family:"DM Mono",monospace; font-size:.75rem; white-space:nowrap; margin-bottom:.4rem; }
.filters { display:flex; gap:.55rem; flex-wrap:wrap; border-top:1px solid #42525a; padding:1.25rem 0 2.15rem; }.filter { cursor:pointer; border:1px solid #53636b; background:transparent; color:#eff3ef; border-radius:999px; padding:.48rem .82rem; font-size:.8rem; }.filter:hover,.filter.active { background:var(--lime); color:var(--ink); border-color:var(--lime); }
.project-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1rem; }.project-card { background:#f4f5f0; color:var(--ink); min-height:435px; grid-column:span 4; padding:1.35rem; display:flex; flex-direction:column; transition:transform .18s ease,opacity .18s ease; }.project-card:hover { transform:translateY(-4px); }.project-card.featured { grid-column:span 8; background:var(--sky); min-height:445px; }.project-card.hidden { display:none; }.card-topline { display:flex; justify-content:space-between; align-items:center; font-family:"DM Mono",monospace; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; }.label { background:rgba(23,32,43,.1); padding:.33rem .45rem; }.year { color:#56616a; }.project-card h3 { font-size:1.65rem; margin:1rem 0 .75rem; }.project-card p { color:#42505a; font-size:.9rem; margin-bottom:1rem; }.tags { list-style:none; padding:0; margin:.2rem 0 1.35rem; display:flex; flex-wrap:wrap; gap:.38rem; }.tags li { font-size:.68rem; border:1px solid rgba(23,32,43,.25); border-radius:999px; padding:.28rem .48rem; }.project-link { margin-top:auto; text-decoration:none; font-weight:800; font-size:.82rem; }.project-link span { font-size:1rem; margin-left:.25rem; }.project-link:hover { text-decoration:underline; text-underline-offset:4px; }
.chart-art { height:130px; margin:1.5rem 0 .2rem; position:relative; border-bottom:1px solid rgba(23,32,43,.25); color:#1b2c34; display:flex; align-items:end; gap:13px; padding:0 10px; }.chart-art .bar { width:10%; border-radius:3px 3px 0 0; background:#ff8b5d; opacity:.8; }.chart-art .one{height:32%}.chart-art .two{height:58%}.chart-art .three{height:44%}.chart-art .four{height:73%}.chart-art svg { position:absolute; inset:0; width:100%; height:100%; }.code-art { margin:1.4rem 0 .45rem; background:#243741; color:#e6efdd; padding:1rem; min-height:110px; font: .75rem/1.8 "DM Mono",monospace; }.code-art span { color:var(--lime); }.sheet-art { margin:1.45rem 0 .45rem; height:110px; background:linear-gradient(90deg,#ffffff 0 28%,#eef3e7 28% 55%,#ffffff 55%); display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:2px; position:relative; }.sheet-art i { background:#cad8bf; }.sheet-art b { background:#ffb38c; grid-column:2; grid-row:1; }.donut-art { width:112px; aspect-ratio:1; margin:1.35rem 0 .55rem; border-radius:50%; background:conic-gradient(var(--violet) 0 35%,var(--coral) 35% 62%,var(--lime) 62% 84%,#dde2dd 84%); display:grid; place-items:center; position:relative; }.donut-art::before { content:""; position:absolute; width:57%; height:57%; border-radius:50%; background:#f4f5f0; }.donut-art span { z-index:1; font-size:.65rem; font-family:"DM Mono",monospace; }.process-art { display:flex; align-items:center; gap:.42rem; margin:1.85rem 0 1.05rem; min-height:56px; font-size:.72rem; font-weight:800; }.process-art span { border:1px solid var(--ink); padding:.4rem; }.process-art i { height:1px; flex:1; background:var(--ink); opacity:.6; }.empty-state { color:#ced7d1; margin:1rem 0 0; }
.approach { max-width:1250px; padding:6.5rem 2rem; margin:auto; display:grid; grid-template-columns:1.05fr 1fr; gap:4rem; }.approach ol { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }.approach li { display:grid; grid-template-columns:48px 1fr; column-gap:.65rem; padding:1.3rem 0; border-bottom:1px solid var(--line); }.approach li span { font: .7rem "DM Mono",monospace; color:#698277; padding-top:.25rem; }.approach li strong { font-size:1.1rem; }.approach li p { grid-column:2; color:var(--muted); font-size:.88rem; margin:.3rem 0 0; }
footer { max-width:1250px; margin:auto; padding:1.4rem 2rem 2rem; display:flex; justify-content:space-between; font: .7rem "DM Mono",monospace; border-top:1px solid var(--line); color:#65717b; }
dialog { width:min(680px,calc(100% - 2rem)); color:var(--ink); border:0; padding:2.1rem; border-radius:6px; box-shadow:0 24px 75px rgba(0,0,0,.35); } dialog::backdrop { background:rgba(10,18,22,.72); backdrop-filter:blur(3px); }.close-dialog { float:right; border:0; background:none; font-size:2rem; line-height:.7; cursor:pointer; }.dialog-label { font: .68rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; color:#5d6b73; margin-bottom:.8rem; }.dialog-columns { display:grid; grid-template-columns:1.15fr .85fr; gap:1rem; padding-top:.8rem; }.dialog-columns h3 { font-size:.82rem; letter-spacing:0; }.dialog-columns ul:not(.tags) { padding-left:1.1rem; font-size:.85rem; color:#40505a; }.dialog-columns li { margin-bottom:.45rem; }.dialog-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; border-top:1px solid var(--line); margin-top:1rem; padding-top:1rem; }.copy-link { cursor:pointer; border:0; background:var(--ink); color:#fff; padding:.65rem .85rem; font-weight:700; }.github-link,.tableau-link { background:var(--lime); color:var(--ink); padding:.65rem .85rem; text-decoration:none; font-weight:800; font-size:.85rem; }.tableau-link { background:var(--sky); }.github-link:hover,.tableau-link:hover { text-decoration:underline; text-underline-offset:3px; }.copy-link:focus,.filter:focus-visible,.project-link:focus-visible,.github-link:focus-visible,.tableau-link:focus-visible { outline:3px solid #ffb38c; outline-offset:3px; } #copyStatus { font-size:.78rem; color:#526459; }
@media (max-width:780px) { .site-header{padding:1.1rem 1.25rem}.hero{padding:4.2rem 1.25rem 3.4rem;min-height:510px}.hero::after{width:260px;height:260px;right:-92px;top:45px;opacity:.5}.stat-row{gap:1.2rem;margin-top:3.2rem}.projects-section{padding:4rem 1.25rem}.section-heading{align-items:start;flex-direction:column;gap:.5rem}.project-grid{display:grid;grid-template-columns:1fr}.project-card,.project-card.featured{grid-column:auto;min-height:405px}.approach{padding:4rem 1.25rem;grid-template-columns:1fr;gap:2rem}footer{padding:1.25rem;gap:.8rem;flex-direction:column}.dialog-columns{grid-template-columns:1fr}.process-art{gap:.25rem}.process-art span{padding:.3rem;font-size:.62rem} }
@media (max-width:390px) { h1{font-size:2.75rem}.stat-row dt{font-size:1.45rem}.filter{font-size:.74rem;padding:.42rem .65rem} }