:root {
  --ink: #17354b;
  --muted: #506b7d;
  --blue: #9dd8f4;
  --blue-deep: #2f769c;
  --blue-pale: #e8f7ff;
  --cream: #fffdf8;
  --white: #ffffff;
  --line: rgba(23, 53, 75, 0.14);
  --shadow: 0 24px 70px rgba(56, 119, 154, 0.14);
  --radius: 30px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --ink: #eaf4f8;
  --muted: #aec3ce;
  --blue: #75b9dc;
  --blue-deep: #83c8ea;
  --blue-pale: #172b37;
  --cream: #0d171e;
  --white: #14242e;
  --line: rgba(205, 232, 244, .18);
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: clip; scroll-behavior: smooth; }
body { width: 100%; max-width: 100%; margin: 0; color: var(--ink); background: var(--cream); font-family: "Manrope", sans-serif; overflow-x: clip; transition: color .25s, background-color .25s; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font: inherit; }
::selection { color: #0d171e; background: var(--blue); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.page-noise { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.cursor-glow { position: fixed; width: 360px; height: 360px; left: 0; top: 0; z-index: -1; border-radius: 50%; pointer-events: none; background: rgba(157, 216, 244, .17); filter: blur(30px); transform: translate(-50%, -50%); transition: opacity .3s; }
.section-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.site-header { width: min(1180px, calc(100% - 48px)); height: 92px; margin: auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 15; }
.wordmark { display: inline-flex; align-items: flex-end; font-family: "Playfair Display", serif; font-size: 27px; font-style: italic; font-weight: 600; letter-spacing: -2px; }
.wordmark-dot { width: 7px; height: 7px; margin: 0 0 5px 4px; border-radius: 50%; background: var(--blue-deep); }
nav { display: flex; gap: 36px; align-items: center; font-size: 13px; font-weight: 600; }
nav a { transition: color .25s; }
nav a:hover { color: var(--blue-deep); }
.nav-cta { padding: 5px 0; border-bottom: 1px solid var(--ink); }
.theme-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 5px 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; font: 500 10px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.theme-toggle:hover { color: var(--blue-deep); }
.theme-icon { width: 14px; color: var(--ink); font-size: 15px; line-height: 1; }
.theme-toggle:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 5px; }
.menu-button { display: none; border: 0; background: transparent; }

.hero { min-height: calc(100vh - 92px); display: grid; grid-template-columns: 1.1fr .9fr; gap: 6vw; align-items: center; padding: 80px 0 120px; }
.eyebrow { margin: 0 0 22px; font: 500 11px/1.2 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: #6cc899; box-shadow: 0 0 0 5px rgba(108,200,153,.13); }
h1, h2 { font-family: "Playfair Display", serif; font-weight: 600; letter-spacing: -.045em; }
h1 { margin: 0; max-width: 780px; font-size: clamp(55px, 6.2vw, 91px); line-height: .98; }
h1 em, h2 em { color: var(--blue-deep); font-weight: 500; }
.hero-intro { max-width: 570px; margin: 32px 0; color: var(--muted); font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 15px 20px; border: 1px solid var(--blue-deep); border-radius: 2px; font: 500 10px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; transition: color .2s, background-color .2s, border-color .2s; }
.button span { margin-left: 10px; font-size: 14px; line-height: 1; }
.button:hover { color: var(--ink); border-color: var(--ink); background: var(--blue-pale); }
.button-primary { color: var(--ink); background: rgba(255, 255, 255, .72); }
.text-link { display: inline-block; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--ink); padding-bottom: 4px; transition: color .2s, border-color .2s; }
.text-link span { margin-left: 4px; }
.text-link:hover { color: var(--blue-deep); border-color: var(--blue-deep); }

.hero-art { height: 520px; position: relative; display: grid; place-items: center; }
.hero-art::before { content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 5%, #dff4ff 42%, #bce5f8 100%); box-shadow: inset -25px -25px 70px rgba(77,154,194,.13), 0 35px 80px rgba(80,153,190,.13); }
.orbit { position: absolute; border: 1px solid rgba(95,174,216,.25); border-radius: 50%; }
.orbit-one { width: 510px; height: 235px; transform: rotate(-18deg); }
.orbit-two { width: 360px; height: 520px; transform: rotate(35deg); }
.browser-card { position: relative; width: 330px; height: 235px; border: 1px solid rgba(23,53,75,.16); border-radius: 18px; background: rgba(255,255,255,.72); box-shadow: var(--shadow); backdrop-filter: blur(10px); transform: rotate(-3deg); animation: float 5s ease-in-out infinite; overflow: hidden; }
.browser-bar { height: 42px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid var(--line); font: 10px "DM Mono", monospace; color: var(--muted); }
.browser-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.browser-bar span { margin-left: auto; margin-right: auto; }
.browser-body { padding: 42px 36px; }
.code-line { width: 100%; height: 8px; margin-bottom: 12px; border-radius: 10px; background: #d7ebf5; }
.line-short { width: 35%; background: var(--blue-deep); }
.line-mid { width: 70%; }
.code-pill { width: max-content; margin-top: 28px; padding: 8px 12px; border-radius: 7px; background: var(--ink); color: white; font: 9px "DM Mono", monospace; }
.cloud { position: absolute; width: 100px; height: 34px; background: rgba(255,255,255,.9); border-radius: 999px; filter: drop-shadow(0 10px 12px rgba(67,130,160,.1)); }
.cloud::before, .cloud::after { content: ""; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }
.cloud::before { width: 48px; height: 48px; left: 18px; }.cloud::after { width: 34px; height: 34px; right: 14px; }
.cloud-one { left: -3%; top: 28%; animation: float 6s ease-in-out infinite reverse; }.cloud-two { right: -3%; bottom: 23%; transform: scale(.75); }
.spark { position: absolute; color: var(--blue-deep); font-size: 28px; animation: twinkle 2.5s ease-in-out infinite; }.spark-one { top: 12%; right: 16%; }.spark-two { bottom: 8%; left: 24%; animation-delay: 1s; }
.art-label { position: absolute; font: 10px "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }.label-one { left: 4%; bottom: 10%; transform: rotate(-90deg); }.label-two { right: 0; top: 35%; transform: rotate(90deg); }
@keyframes float { 50% { transform: translateY(-12px) rotate(-1deg); } }
@keyframes twinkle { 50% { opacity: .3; transform: scale(.75) rotate(20deg); } }

.marquee { width: 100%; max-width: 100vw; overflow: hidden; border-block: 1px solid var(--line); background: var(--blue-pale); }
.marquee-track { display: flex; width: max-content; align-items: center; padding: 18px 0; animation: marquee 42s linear infinite; font: 500 11px "DM Mono", monospace; letter-spacing: .14em; }
.marquee-group { width: max-content; min-width: 100vw; display: flex; flex-shrink: 0; align-items: center; justify-content: space-around; gap: 42px; padding-inline: 21px; }
.marquee-track i { color: var(--blue-deep); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

.work { padding-block: 150px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 64px; }
.section-heading h2, .about h2, .contact h2 { margin: 0; font-size: clamp(46px, 5vw, 70px); line-height: 1; }
.section-heading > p { max-width: 430px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.featured-project { display: grid; grid-template-columns: 1.25fr .75fr; min-height: 530px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow); }
.project-visual { position: relative; overflow: hidden; }
.thesis-visual { min-height: 520px; background: radial-gradient(circle at 60% 50%, rgba(255,255,255,.85), transparent 38%), linear-gradient(145deg, #cbeeff, #eaf8ff); }
.thesis-visual::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(66,140,178,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(66,140,178,.09) 1px, transparent 1px); background-size: 34px 34px; }
.thesis-visual > p { position: absolute; left: 30px; bottom: 24px; font: 9px "DM Mono", monospace; letter-spacing: .16em; }
.route-map { position: absolute; width: 360px; height: 280px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.route { position: absolute; border: 2px dashed rgba(44,129,172,.45); border-radius: 50%; transform: rotate(-20deg); }.route-a { inset: 20px; }.route-b { inset: 65px 0; transform: rotate(28deg); }
.node { position: absolute; width: 17px; height: 17px; border: 4px solid white; border-radius: 50%; background: var(--blue-deep); box-shadow: 0 5px 12px rgba(31,95,128,.25); }.node-a { left: 15%; top: 24%; }.node-b { right: 11%; top: 34%; }.node-c { bottom: 12%; left: 47%; }.node-d { top: 46%; left: 44%; background: var(--ink); }
.data-card { position: absolute; z-index: 2; padding: 16px 18px; border: 1px solid rgba(23,53,75,.13); border-radius: 14px; background: rgba(255,255,255,.78); backdrop-filter: blur(8px); box-shadow: 0 12px 35px rgba(56,119,154,.12); }
.data-card span, .data-card small { display: block; color: var(--muted); font: 9px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }.data-card strong { display: block; margin: 5px 0; font-family: "Playfair Display", serif; font-size: 28px; }.data-card-a { top: 16%; left: 8%; transform: rotate(-4deg); }.data-card-b { right: 8%; bottom: 16%; transform: rotate(4deg); }
.project-copy { padding: 64px 52px; display: flex; flex-direction: column; justify-content: center; }
.project-number { margin: 0 0 18px; color: var(--blue-deep); font: 500 10px "DM Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.project-copy h3, .project-card h3 { margin: 0 0 20px; font-family: "Playfair Display", serif; font-size: 38px; letter-spacing: -.035em; }
.project-copy > p:not(.project-number), .project-card-copy > p:not(.project-number) { color: var(--muted); line-height: 1.75; font-size: 14px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 24px 0 32px; list-style: none; }.tags li { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 10px "DM Mono", monospace; }
.project-link { width: max-content; padding-bottom: 4px; border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 600; transition: color .2s, border-color .2s; }
.project-link:hover { color: var(--blue-deep); border-color: var(--blue-deep); }
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 24px; }
.project-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); transition: transform .3s, box-shadow .3s; }.project-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.project-card-top { height: 325px; position: relative; overflow: hidden; }
.project-card-copy { padding: 36px 38px 34px; }.project-card h3 { font-size: 32px; margin-bottom: 13px; }.project-card-copy > p:not(.project-number) { min-height: 74px; margin-bottom: 22px; }
.card-links { display: flex; gap: 24px; padding-top: 19px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 600; }.card-links a { padding-bottom: 3px; border-bottom: 1px solid transparent; }.card-links a:hover { color: var(--blue-deep); border-color: var(--blue-deep); }
.cookbook-visual { display: grid; place-items: center; background: #f4eee3; }.cookbook-visual::before { content: ""; position: absolute; width: 250px; height: 250px; border: 1px solid rgba(104, 125, 88, .16); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.16); }.recipe-book { position: relative; z-index: 2; width: 245px; height: 190px; transform: rotate(-4deg); filter: drop-shadow(0 24px 25px rgba(90, 78, 56, .16)); }.recipe-page { height: 100%; padding: 30px 34px; border-radius: 7px 17px 17px 7px; background: #fffdf7; }.recipe-page small { color: #546748; font: 9px "DM Mono", monospace; letter-spacing: .13em; }.recipe-page strong { display: block; margin: 12px 0 23px; color: #4b5944; font: 25px/1.08 "Playfair Display", serif; }.recipe-page span { display: block; width: 82%; height: 4px; margin-top: 7px; border-radius: 5px; background: #e5e2d7; }.recipe-page span:last-child { width: 55%; }.book-spine { position: absolute; width: 13px; inset: 0 auto 0 0; border-radius: 7px 0 0 7px; background: #9caf87; }.herb { position: absolute; z-index: 3; color: #829b70; font: 54px/1 serif; }.herb-a { left: 16%; bottom: 12%; transform: rotate(-30deg); }.herb-b { right: 15%; top: 12%; transform: rotate(145deg) scale(.75); }
.resource-visual { display: grid; place-items: center; background: #e7f5fb; }.mini-window { position: absolute; top: 25px; left: 30px; display: flex; gap: 5px; }.mini-window i { width: 7px; height: 7px; border-radius: 50%; background: #98cada; }.resource-stack { width: 270px; padding: 32px; border-radius: 18px; background: #fff; box-shadow: 18px 18px 0 #acddef, 0 20px 50px rgba(50,111,140,.1); transform: rotate(-3deg); }.resource-stack b { display: block; font: italic 600 40px "Playfair Display", serif; }.resource-stack span { display: block; margin: 6px 0 30px; color: var(--muted); font-size: 10px; }.resource-stack em { display: inline-block; padding: 6px 8px; margin-right: 5px; background: var(--blue-pale); border-radius: 5px; font: normal 8px "DM Mono", monospace; }
.salary-visual { display: grid; place-items: center; background: #d8f0ff; }.salary-slip { position: relative; z-index: 2; width: 250px; padding: 30px; border-radius: 16px; background: white; box-shadow: 0 24px 50px rgba(50,111,140,.16); transform: rotate(3deg); }.salary-slip small { font: 8px "DM Mono", monospace; color: var(--muted); }.salary-slip strong { display: block; margin: 8px 0 24px; font: 32px "Playfair Display", serif; }.salary-slip strong i { font: normal 10px "DM Mono", monospace; }.salary-slip > span { display: block; height: 6px; margin-top: 10px; border-radius: 6px; background: #edf3f5; }.salary-slip span b { display: block; width: 65%; height: 100%; background: var(--blue); border-radius: inherit; }.coin { position: absolute; display: grid; place-items: center; width: 54px; height: 54px; border: 5px double white; border-radius: 50%; color: white; background: var(--blue-deep); font: 20px "Playfair Display", serif; box-shadow: 0 10px 20px rgba(50,111,140,.18); }.coin-a { left: 16%; bottom: 14%; transform: rotate(-13deg); }.coin-b { right: 14%; top: 18%; transform: scale(.75) rotate(22deg); }
.movie-visual { display: flex; align-items: center; justify-content: center; gap: 14px; background: #162c3d; }.movie-poster { width: 128px; height: 205px; position: relative; border-radius: 8px; box-shadow: 0 18px 35px rgba(0,0,0,.28); overflow: hidden; }.movie-poster::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, transparent, rgba(7,15,22,.85)); }.movie-poster span { position: absolute; z-index: 1; left: 13px; bottom: 15px; color: white; font: 16px/1 "Playfair Display", serif; }.poster-a { transform: rotate(-5deg); background: linear-gradient(145deg,#c2efff,#5cabc4 48%,#26526b); }.poster-b { z-index: 2; transform: translateY(-10px); background: linear-gradient(145deg,#e8cbb2,#5d4d4b 48%,#121c26); }.poster-c { transform: rotate(5deg); background: linear-gradient(145deg,#d9c9f7,#866ca6 48%,#273549); }.play-button { position: absolute; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; color: white; background: rgba(255,255,255,.18); backdrop-filter: blur(8px); font-size: 12px; }
.follow-visual { background: radial-gradient(circle at 50% 50%, #fff, #e6f5fb); }.profile-bubble { position: absolute; display: grid; place-items: center; border: 5px solid white; border-radius: 50%; color: white; background: var(--blue-deep); box-shadow: 0 15px 30px rgba(49,111,142,.17); font: 18px "Playfair Display", serif; }.bubble-a { width: 96px; height: 96px; left: 14%; top: 20%; }.bubble-b { width: 65px; height: 65px; right: 15%; top: 15%; background: #527f75; }.bubble-c { width: 74px; height: 74px; right: 19%; bottom: 12%; background: #6f6398; }.compare-card { position: absolute; z-index: 2; left: 50%; top: 52%; transform: translate(-50%,-50%) rotate(-2deg); display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: var(--shadow); font: 10px "DM Mono", monospace; text-transform: uppercase; }.compare-card b { color: var(--blue-deep); font-size: 18px; }

.about { padding-block: 140px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 10vw; align-items: center; border-top: 1px solid var(--line); }
.portrait-frame { height: 470px; position: relative; display: grid; align-items: end; overflow: hidden; border-radius: 180px 180px 24px 24px; background: linear-gradient(#d5f1ff, #edf9ff); box-shadow: var(--shadow); }.portrait-frame::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.8); border-radius: 160px 160px 16px 16px; }.portrait-frame img { position: relative; z-index: 2; width: 73%; margin: 0 auto 23px; filter: drop-shadow(0 22px 25px rgba(67,130,160,.22)); }.portrait-sky span { position: absolute; color: white; font-size: 30px; }.portrait-sky span:nth-child(1) { left: 18%; top: 25%; }.portrait-sky span:nth-child(2) { right: 12%; top: 38%; font-size: 55px; }.portrait-sky span:nth-child(3) { right: 22%; top: 16%; }.about-portrait > p { color: var(--muted); text-align: center; font: 10px "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.about-copy { max-width: 610px; }.about-copy h2 { margin-bottom: 32px; }.about-copy > p:not(.eyebrow) { color: var(--muted); font-size: 15px; line-height: 1.85; }.about-copy .text-link { margin-top: 16px; }
.toolbox { padding-block: 120px; border-top: 1px solid var(--line); }.tool-groups { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--line); }.tool-groups > div { padding: 35px 35px 35px 0; }.tool-groups > div + div { border-left: 1px solid var(--line); padding-left: 35px; }.tool-groups h3 { margin: 0 0 14px; font: 20px "Playfair Display", serif; }.tool-groups p { margin: 0; color: var(--muted); font: 13px/1.85 "DM Mono", monospace; }

.contact { min-height: 570px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 80px; border-radius: 38px; text-align: center; background: linear-gradient(145deg, #d9f3ff, #edfaff); }.contact::before { content: ""; position: absolute; width: 400px; height: 400px; top: -55%; border: 1px solid rgba(95,174,216,.35); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.15), 0 0 0 140px rgba(255,255,255,.12); }.contact > *:not(.contact-cloud) { position: relative; z-index: 2; }.contact h2 { margin-bottom: 24px; }.contact > p:not(.eyebrow) { max-width: 540px; margin: 0 0 28px; color: var(--muted); line-height: 1.7; }.contact-cloud { z-index: 1; }.cloud-left { left: -10px; bottom: 19%; transform: scale(1.5); }.cloud-right { right: 3%; top: 18%; transform: scale(.8); }
.site-footer { display: flex; min-height: 110px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }.site-footer > div { display: flex; gap: 22px; }.site-footer a:hover { color: var(--blue-deep); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }.reveal.visible { opacity: 1; transform: translateY(0); }.project-grid .reveal:nth-child(2), .project-grid .reveal:nth-child(4) { transition-delay: .12s; }

[data-theme="dark"] .button-primary { background: #14242e; }
[data-theme="dark"] .hero-art::before { background: radial-gradient(circle at 35% 30%, #294857 0 5%, #19303c 42%, #10232e 100%); box-shadow: inset -25px -25px 70px rgba(0,0,0,.25), 0 35px 80px rgba(0,0,0,.2); }
[data-theme="dark"] .browser-card { border-color: var(--line); background: rgba(20,36,46,.84); }
[data-theme="dark"] .code-line { background: #294553; }
[data-theme="dark"] .line-short { background: var(--blue-deep); }
[data-theme="dark"] .code-pill { color: #eaf4f8; background: #091219; }
[data-theme="dark"] .cloud { background: rgba(189,216,229,.7); }
[data-theme="dark"] .thesis-visual { background: radial-gradient(circle at 60% 50%, rgba(56,91,108,.7), transparent 38%), linear-gradient(145deg, #173544, #102530); }
[data-theme="dark"] .thesis-visual::before { background-image: linear-gradient(rgba(131,200,234,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(131,200,234,.1) 1px, transparent 1px); }
[data-theme="dark"] .data-card { border-color: var(--line); background: rgba(14,29,38,.82); }
[data-theme="dark"] .node { border-color: #d9eef7; }
[data-theme="dark"] .resource-stack { color: #17354b; }
[data-theme="dark"] .resource-stack span { color: #506b7d; }
[data-theme="dark"] .resource-stack em { color: #17354b; background: #e8f7ff; }
[data-theme="dark"] .salary-slip { color: #17354b; }
[data-theme="dark"] .salary-slip small { color: #506b7d; }
[data-theme="dark"] .compare-card { color: #17354b; }
[data-theme="dark"] .portrait-frame { background: linear-gradient(#183544, #102732); }
[data-theme="dark"] .contact { background: linear-gradient(145deg, #16313f, #102631); }
[data-theme="dark"] .contact::before { border-color: rgba(131,200,234,.25); box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.018); }

@media (max-width: 900px) {
  .site-header nav { position: absolute; top: 75px; left: 0; right: 0; display: none; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,253,248,.96); box-shadow: var(--shadow); }
  .site-header nav.open { display: flex; }.menu-button { display: flex; width: 36px; height: 36px; flex-direction: column; justify-content: center; gap: 6px; }.menu-button > span:not(.sr-only) { display: block; width: 22px; height: 1px; background: var(--ink); transition: transform .2s; }
  .hero { grid-template-columns: 1fr; padding-top: 60px; text-align: center; }.hero-copy { display: flex; flex-direction: column; align-items: center; }.hero-art { height: 460px; }.section-heading { align-items: flex-start; gap: 30px; }.featured-project { grid-template-columns: 1fr; }.thesis-visual { min-height: 440px; }.project-grid { grid-template-columns: 1fr; }.about { grid-template-columns: 1fr; }.about-portrait { width: min(420px,100%); margin: auto; }.about-copy { text-align: center; margin: auto; }.tool-groups { grid-template-columns: 1fr; }.tool-groups > div + div { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }.tool-groups > div { padding: 28px 0; }
  [data-theme="dark"] .site-header nav { background: rgba(13,23,30,.97); }
}
@media (max-width: 620px) {
  .section-shell, .site-header { width: min(100% - 30px, 1180px); }.site-header { height: 72px; }.hero { min-height: auto; padding: 65px 0 80px; }.hero-intro { font-size: 15px; }.hero-actions { flex-direction: column; gap: 20px; }.hero-art { height: 350px; margin-top: 35px; }.hero-art::before { width: 290px; height: 290px; }.browser-card { width: 245px; height: 180px; }.browser-bar { height: 34px; }.browser-body { padding: 27px; }.orbit-one { width: 340px; }.orbit-two { width: 260px; height: 350px; }.cloud { transform: scale(.65); }.section-heading { display: block; }.section-heading > p { margin-top: 22px; }.work { padding-block: 100px; }.featured-project { min-height: auto; }.thesis-visual { min-height: 360px; }.route-map { transform: translate(-50%,-50%) scale(.72); }.data-card { transform: scale(.8) rotate(-4deg); }.data-card-b { transform: scale(.8) rotate(4deg); }.project-copy { padding: 40px 28px; }.project-card-top { height: 255px; }.project-card-copy { padding: 30px 25px; }.project-card-copy > p:not(.project-number) { min-height: auto; }.movie-poster { width: 95px; height: 165px; }.about { padding-block: 100px; }.portrait-frame { height: 390px; }.toolbox { padding-block: 90px; }.contact { width: calc(100% - 30px); min-height: 500px; padding: 35px 20px; }.site-footer { padding: 30px 0; flex-direction: column; gap: 20px; }.cursor-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }