/* Palette: Mocha Brown · Platinum Silver · Pale Lavender */
:root {
  --bg: #ecebe8;            /* platinum */
  --tile: #f8f7f5;
  --tile2: #f0eef0;
  --line: #dcd9dd;
  --text: #2e211b;          /* deep mocha */
  --muted: #76675f;
  --orange: #7b5544;        /* mocha brown (primary accent) */
  --lime: #ddd3f5;          /* pale lavender (secondary accent) */
  --lav-ink: #5b4b8a;
  --silver: #c9c8cc;
  --on-mocha: #f6f2ee;
  --sans: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --r: 22px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #1b1512; --tile: #251c18; --tile2: #2e241f; --line: #3b2f29; --text: #efece9; --muted: #b3a79f;
  --orange: #b98a72; --lime: #cfc2f2; --lav-ink: #cfc2f2; --silver: #8d8a90; --on-mocha: #1b1512;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { background: var(--bg); color: var(--text); font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background .35s, color .35s; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--orange); color: #0d0d0f; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg .fill { fill: currentColor; stroke: none; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 16px; z-index: 99; background: var(--orange); color: #000; padding: 6px 10px; border-radius: 8px; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; position: relative; z-index: 1; }

.glow { position: fixed; left: 0; top: 0; width: 600px; height: 600px; margin: -300px 0 0 -300px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(190,170,240,.28), transparent 62%); transform: translate(var(--gx,-999px), var(--gy,-999px)); transition: transform .12s linear; }

/* header */
.top { position: sticky; top: 12px; z-index: 30; width: min(1200px, 100% - 32px); margin: 12px auto 0; display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 10px 18px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--tile) 80%, transparent); backdrop-filter: blur(14px); }
.logo { font: 600 14px var(--mono); } .logo span { color: var(--orange); }
.top nav { display: flex; align-items: center; gap: 4px; }
.top nav a { font-size: 14px; color: var(--muted); padding: 7px 12px; border-radius: 10px; transition: color .2s, background .2s; }
.top nav a:hover, .top nav a.here { color: var(--text); background: var(--tile2); }
.themebtn { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--tile2); color: var(--text); cursor: pointer; margin-left: 6px; }
.themebtn svg { width: 17px; height: 17px; }

/* bento grid */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(150px, auto); gap: 14px; margin-top: 14px; }
.c-1 { grid-column: span 1; } .c-2 { grid-column: span 2; } .c-3 { grid-column: span 3; } .c-4 { grid-column: span 4; }
.c-6 { grid-column: 1 / -1; }
.r-2 { grid-row: span 2; }
.tile { position: relative; overflow: hidden; background: var(--tile); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s; }
.tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.06), transparent 60%); opacity: 0; transition: opacity .3s; }
.tile:hover::after { opacity: 1; }
.tile:hover { border-color: color-mix(in srgb, var(--orange) 40%, var(--line)); }
a.tile:hover { transform: translateY(-4px); }
.accent-o { background: linear-gradient(140deg, var(--orange), color-mix(in srgb, var(--orange) 70%, #2e211b)); border-color: var(--orange); color: var(--on-mocha); }
.accent-l { background: linear-gradient(140deg, var(--lime), color-mix(in srgb, var(--lime) 70%, #ffffff)); border-color: var(--lime); color: #2e211b; }
.label { font: 500 12px var(--mono); letter-spacing: .04em; color: var(--muted); text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.label.dark, .small.dark { color: currentColor; opacity: .72; }
.small { font-size: 13px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: ping 1.8s infinite; display: inline-block; flex: none; }
@keyframes ping { 70%,100% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } }

/* intro */
.intro { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 32px; }
.eyebrow { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }
h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.035em; font-weight: 700; }
h1 .muted { color: var(--muted); font-weight: 600; }
.rot { color: var(--orange); }
.caret { display: inline-block; width: 4px; height: .85em; background: var(--orange); margin-left: 4px; vertical-align: -.06em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.bio { color: var(--muted); max-width: 60ch; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--tile2); font-weight: 500; font-size: 14px; transition: transform .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.icon { width: 42px; padding: 0; justify-content: center; }
.btn.icon svg { width: 18px; height: 18px; }

/* photo */
.photo { padding: 0; min-height: 320px; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform .6s; }
.photo:hover img { transform: scale(1.04); }
.photo figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(13,13,15,.72); backdrop-filter: blur(10px); color: #fff; display: flex; flex-direction: column; }
.photo figcaption b { font-size: 15px; } .photo figcaption span { font-size: 12.5px; color: #c9c9cf; }

/* location */
.loc { display: flex; flex-direction: column; justify-content: flex-end; }
.map { position: absolute; right: -10px; top: -6px; width: 62%; opacity: .9; }
.map .uk { fill: var(--tile2); stroke: var(--line); stroke-width: 1.5; }
.map .pin { fill: var(--orange); stroke: none; }
.map .ping { fill: none; stroke: var(--orange); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ring 2s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: 1; } to { transform: scale(5); opacity: 0; } }
.big-t { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 2px 0; }

/* stats */
.stat { display: flex; flex-direction: column; justify-content: space-between; }
.stat b { font-size: 46px; line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.stat span { font-size: 13px; font-weight: 500; }
.tests .pass { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin-top: 10px; }
.tests .ok { color: #22c55e; font-family: var(--mono); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chips li { font: 500 13px var(--mono); padding: 6px 12px; border-radius: 10px; background: var(--tile2); border: 1px solid var(--line); transition: all .2s; }
.chips li:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); }

/* section headings */
.sec { display: flex; align-items: center; gap: 12px; font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.03em; margin: 90px 0 0; }
.sec span { font: 500 13px var(--mono); color: var(--orange); border: 1px solid var(--line); padding: 4px 8px; border-radius: 8px; }

/* projects */
.proj { display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.proj h3 { font-size: 22px; letter-spacing: -.02em; }
.proj p { color: var(--muted); font-size: 14.5px; }
.proj p b { color: var(--text); }
.tag { font: 500 12px var(--mono); color: var(--orange); }
.mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.mini li { font: 12px var(--mono); padding: 3px 9px; border-radius: 8px; background: var(--tile2); border: 1px solid var(--line); color: var(--muted); }
.go { position: absolute; top: 20px; right: 22px; font-size: 18px; color: var(--muted); transition: transform .25s, color .25s; }
a.proj:hover .go { transform: translate(3px,-3px); color: var(--orange); }
.demo { height: 150px; margin: -6px -6px 10px; border-radius: 16px; background: var(--tile2); border: 1px solid var(--line); display: grid; place-items: center; }
.demo.sm { height: 80px; }
.demo svg { width: 92%; height: 90%; }
.demo text { fill: var(--muted); stroke: none; font: 11px var(--mono); }
.demo text.dark { fill: #111; font-weight: 600; }
.demo .links path { stroke: var(--lime); stroke-width: 2; stroke-dasharray: 5 6; animation: flow 1s linear infinite; }
.demo .lossy { stroke: var(--line) !important; }
@keyframes flow { to { stroke-dashoffset: -22; } }
.d1 .hub { fill: var(--lime); stroke: none; transform-box: fill-box; transform-origin: center; animation: hub 2.4s ease-in-out infinite; }
.d1 .dev { fill: var(--orange); stroke: none; }
.d1 .lost { animation: lost 2.4s ease-in-out infinite; }
.d1 text { fill: var(--orange); }
@keyframes hub { 50% { transform: scale(1.15); } }
@keyframes lost { 0%,40% { opacity: .25; } 50% { opacity: 1; } 60%,100% { opacity: .15; } }
.d2 .solid { fill: var(--orange); stroke: none; } .d2 .pill { fill: var(--lime); stroke: none; }
.d2 .svc rect { stroke: var(--lime); fill: transparent; animation: srv 3s ease-in-out infinite; }
.d2 .svc rect:nth-child(2) { animation-delay: .5s; } .d2 .svc rect:nth-child(3) { animation-delay: 1s; }
@keyframes srv { 0%,65%,100% { fill: transparent; } 78% { fill: rgba(190,170,240,.35); } }
.d3 rect { fill: var(--orange); stroke: none; transform-box: fill-box; transform-origin: bottom; animation: bar 2.6s ease-in-out infinite; }
.d3 rect:nth-child(2) { animation-delay: .2s; fill: var(--lime); } .d3 rect:nth-child(3) { animation-delay: .4s; } .d3 rect:nth-child(4) { animation-delay: .6s; fill: var(--lime); }
@keyframes bar { 50% { transform: scaleY(.5); } }
.d4 .shield { fill: var(--orange); stroke: none; transform-box: fill-box; transform-origin: center; animation: hub 2.4s ease-in-out infinite; }
.d4 .tick { stroke: #111; stroke-width: 3.5; stroke-dasharray: 30; animation: tick 2.4s ease-in-out infinite; }
@keyframes tick { 0%,20% { stroke-dashoffset: 30; } 50%,100% { stroke-dashoffset: 0; } }
.papers h3 { font-size: 22px; letter-spacing: -.02em; margin: 6px 0 10px; }
.plink { display: block; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; transition: color .2s; }
.plink em { font-style: normal; color: var(--muted); font-family: var(--mono); font-size: 12px; margin-left: 6px; }
.plink:hover { color: var(--orange); }

/* experience */
.path { position: relative; padding-left: 30px; }
.path::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.path::after { content: ""; position: absolute; left: 6px; top: 8px; width: 2px; height: var(--prog,0%); background: linear-gradient(var(--lime), var(--orange)); }
.path li { position: relative; padding-bottom: 24px; opacity: .4; transform: translateX(8px); transition: opacity .5s, transform .5s; }
.path li:last-child { padding-bottom: 0; }
.path li.on { opacity: 1; transform: none; }
.path li::before { content: ""; position: absolute; left: -30px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--tile); border: 3px solid var(--orange); z-index: 1; }
.path li.on::before { background: var(--orange); }
.path .yr { font: 600 12px var(--mono); color: var(--orange); }
.path b { display: block; font-size: 17px; margin: 2px 0 4px; }
.path p { color: var(--muted); font-size: 14px; }
.path .next::before { border-color: var(--lime); background: var(--lime); }
.path .next a { color: var(--orange); font-weight: 600; }
.edu .deg { padding: 12px 0; border-top: 1px solid var(--line); }
.edu .deg:first-of-type { margin-top: 10px; }
.edu .deg b { display: block; font-size: 15px; } .edu .deg span { font-size: 13px; color: var(--muted); }
.fact { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.quote { font-size: 19px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.quote.sm { font-size: 16px; }

/* terminal + contact */
.term { padding: 0; font-family: var(--mono); font-size: 13.5px; background: #2a1f1a; color: #ece7f7; min-height: 260px; display: flex; flex-direction: column; }
.tbar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid #3d2f28; color: #b9acc9; font-size: 12px; }
.tbar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .tbar i:nth-child(2) { background: #febc2e; } .tbar i:nth-child(3) { background: #28c840; }
.tbar span { margin-left: 8px; } .tbar b, .tout b { color: var(--lime); }
.tout { flex: 1; padding: 14px 16px 4px; max-height: 220px; overflow-y: auto; }
.tout p { margin-bottom: 6px; white-space: pre-wrap; } .tout .cmd { color: var(--orange); }
.tin { display: flex; gap: 10px; padding: 8px 16px 16px; color: var(--lime); }
.tin input { flex: 1; background: none; border: 0; outline: none; color: #fff; font: inherit; }
.contact { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.contact h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -.03em; }
.mail { font-size: 18px; font-weight: 700; border-bottom: 2px solid currentColor; align-self: flex-start; }

.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 50px 0 36px; font-size: 13px; color: var(--muted); }

/* entrance */
.bento > * { opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s cubic-bezier(.2,.7,.2,1), border-color .3s; }
.bento > .in { opacity: 1; transform: none; }
a.tile.in:hover { transform: translateY(-4px); }

@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .c-3, .c-4 { grid-column: span 4; } .c-2 { grid-column: span 2; }
  .r-2 { grid-row: auto; }
  .photo { min-height: 380px; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .c-2, .c-3, .c-4 { grid-column: span 2; } .c-1 { grid-column: span 1; }
  .top nav a { display: none; }
  .intro { padding: 24px; }
  .sec { margin-top: 64px; }
  .glow { display: none; }
}
@media (hover: none) { .glow { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bento > *, .path li { opacity: 1; transform: none; }
}
.r-4 { grid-row: span 4; }
@media (max-width: 980px) { .r-4 { grid-row: auto; } }
@media (max-width: 620px) { .tests { grid-column: span 2; } }
.photo.r-4 img { object-position: center 35%; }


/* ═════ Lively layer ═════ */
body { background:
  radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--lime) 55%, transparent), transparent 60%),
  radial-gradient(900px 500px at 110% 20%, color-mix(in srgb, var(--orange) 14%, transparent), transparent 60%),
  var(--bg); background-attachment: fixed; }
.aura { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aura i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: drift 22s ease-in-out infinite alternate; }
.aura i:nth-child(1) { width: 420px; height: 420px; left: -80px; top: 18%; background: var(--lime); }
.aura i:nth-child(2) { width: 360px; height: 360px; right: -60px; top: 48%; background: color-mix(in srgb, var(--orange) 45%, transparent); animation-duration: 28s; }
.aura i:nth-child(3) { width: 300px; height: 300px; left: 40%; bottom: -120px; background: var(--silver); animation-duration: 25s; }
@keyframes drift { to { transform: translate(60px, -50px) scale(1.15); } }
:root[data-theme="dark"] .aura i { opacity: .22; }

.tile { box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px -18px rgba(46,33,27,.35); }
:root[data-theme="dark"] .tile { box-shadow: 0 10px 30px -18px rgba(0,0,0,.6); }
.tile:hover { border-color: color-mix(in srgb, var(--lav-ink) 45%, var(--line)); box-shadow: 0 18px 40px -20px rgba(91,75,138,.45); }
a.tile:hover { transform: translateY(-6px) rotate(-.3deg); }

/* silver shimmer on the headline phrase */
.rot { background: linear-gradient(100deg, var(--orange) 0%, var(--lav-ink) 45%, var(--silver) 55%, var(--orange) 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }
.caret { background: var(--lav-ink); }
.btn.primary { background: var(--orange); border-color: var(--orange); color: var(--on-mocha); }
.btn.primary:hover { box-shadow: 0 10px 24px -10px var(--orange); }
.chips li { transition: transform .2s, background .2s; }
.chips li:hover { transform: translateY(-3px); background: var(--lime); color: #2e211b; }
.eyebrow { background: color-mix(in srgb, var(--lime) 45%, transparent); border-color: color-mix(in srgb, var(--lav-ink) 25%, var(--line)); color: var(--text); }
.sec span { color: var(--lav-ink); }
.logo span { color: var(--orange); }
::selection { background: var(--lime); color: #2e211b; }
.photo figcaption { background: rgba(46,33,27,.68); }

/* staggered entrance */
.bento > * { opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s; }
.bento > .in { opacity: 1; transform: none; }
.bento > *:nth-child(2) { transition-delay: .06s; } .bento > *:nth-child(3) { transition-delay: .12s; }
.bento > *:nth-child(4) { transition-delay: .18s; } .bento > *:nth-child(5) { transition-delay: .24s; }
.bento > *:nth-child(6) { transition-delay: .3s; }  .bento > *:nth-child(7) { transition-delay: .36s; }

/* SysDash demo */
.d5 .line { stroke: var(--lav-ink); stroke-width: 2.5; stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw 3.2s ease-in-out infinite; }
.d5 .area { fill: color-mix(in srgb, var(--lime) 60%, transparent); stroke: none; }
.d5 .gauge { stroke: var(--silver); stroke-width: 7; } .d5 .gval { stroke: var(--orange); stroke-width: 7; stroke-dasharray: 90 200; animation: gauge 3.2s ease-in-out infinite alternate; }
@keyframes draw { 60%,100% { stroke-dashoffset: 0; } }
@keyframes gauge { from { stroke-dasharray: 40 200; } to { stroke-dasharray: 110 200; } }

@media (prefers-reduced-motion: reduce) {
  .aura i, .rot, .d5 .line, .d5 .gval { animation: none; }
  .bento > * { opacity: 1; transform: none; transition: none; }
}