/* Whole-page direction based on the reference. Overrides the earlier study. */
:root { --paper:#f8f9fb; --tile:#fff; --ink:#111827; --muted:#60646d; --rule:#e5e7eb; --accent:#b94563; --tint:#fcebf0; --surface:#f2f3f5; --nav:rgba(255,255,255,.85); }
html { scroll-behavior:smooth; scroll-padding-top:130px; }
body { font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; }
body::before { content:""; position:absolute; inset:0 0 auto; height:760px; z-index:-1; background:radial-gradient(ellipse at 25% 18%,#ddd7f5 0,transparent 62%),radial-gradient(ellipse at 70% 14%,#f4e1e6 0,transparent 59%); pointer-events:none; }
.page { max-width:1200px; padding:0 28px; }
.site-header { position:fixed; top:24px; left:50%; transform:translateX(-50%); z-index:10; max-width:calc(100% - 24px); }
.site-header nav { display:flex; gap:5px; padding:8px 12px; border-radius:40px; background:var(--nav); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.2); box-shadow:0 2px 10px #11182703; }
.site-header a { color:var(--muted); text-decoration:none; font-size:14px; padding:7px 14px; border-radius:30px; white-space:nowrap; }
.site-header a:hover,.site-header a[aria-current] { color:var(--ink); background:var(--surface); }
main { padding-top:0; }
section { scroll-margin-top:0; }
.hero { max-width:800px; margin:auto; text-align:center; padding:145px 0 68px; }
.avatar { width:94px; height:94px; display:grid; place-items:center; position:relative; margin:0 auto 25px; border-radius:50%; border:5px solid var(--tile); background:linear-gradient(145deg,#c5bbec,#ecc7d4); color:#39364c; font-size:26px; font-weight:600; letter-spacing:-1px; box-shadow:0 2px 9px #11182720; }
.avatar span { position:absolute; right:-7px; bottom:-10px; font-size:33px; transform:rotate(-12deg); }
.hero h1 { font-size:36px; letter-spacing:-.65px; font-weight:400; line-height:1.52; margin:0; }
.hero h1 strong { font-weight:700; }
.hero h1 a { color:inherit; text-underline-offset:5px; text-decoration-thickness:2px; }
.hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:38px auto 0; }
.pill { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:11px 24px; border-radius:30px; color:var(--ink); background:var(--tile); border:1px solid var(--rule); text-decoration:none; font-size:17px; transition:transform .15s,background .15s; }
.pill:hover { transform:translateY(-2px); background:var(--surface); }
.pill.primary { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.pill.circle { width:52px; padding:14px; }
.pill svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; }
.section-divider { height:70px; width:4px; background:var(--rule); margin:0 auto 74px; border-radius:4px; }
section > h2 { font-size:30px; font-weight:600; text-align:center; letter-spacing:-.6px; margin:0 0 27px; line-height:1.3; }
.about-section { max-width:760px; margin:0 auto 110px; text-align:center; }
.about-section p { font-size:17px; line-height:1.9; margin:0 0 22px; }
.about-section strong { font-weight:600; }
.skills-section { max-width:1070px; margin:0 auto 110px; }
.favorites-row { display:flex; justify-content:center; margin-bottom:16px; }
.switch-label { font-size:16px; min-height:36px; }
.switch-label input { position:static; opacity:1; width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.favorite-total { font-family:inherit; font-size:13px; }
.controls { border:0; padding:0; }
.control-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.filters { justify-content:center; gap:8px; }
.filter { background:var(--surface); border:1px solid transparent; border-radius:24px; padding:9px 17px; min-height:42px; font-size:14px; color:var(--muted); }
.filter:hover { border-color:var(--rule); background:var(--rule); }
.filter[aria-pressed="true"] { background:var(--ink); color:var(--paper); }
.filter-count { display:none; }
.results-bar { justify-content:center; margin:19px 0 18px; min-height:20px; }
.results { font-family:inherit; font-size:13px; text-align:center; }
.skills-grid { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.skill { display:flex; align-items:center; gap:10px; min-height:58px; padding:13px 35px 13px 16px; width:auto; max-width:100%; border-radius:9px; border:1px solid var(--rule); box-shadow:0 1px 2px #11182705; background:var(--tile); }
.skill:hover { border-color:#c9ccd4; background:var(--tile); }
.skill-top { margin:0; height:28px; flex-shrink:0; }
.mark { height:27px; width:28px; font-size:12px; border-radius:4px; }
.mark.brand { border:0; }
.mark img { width:27px; height:27px; object-fit:contain; }
.skill-name { font-size:17px; line-height:1.4; margin:0; font-weight:400; overflow-wrap:normal; }
.skill-category { display:none; }
.heart { right:-6px; top:-10px; padding:8px; width:30px; height:30px; color:#a4a8b2; border-radius:50%; }
.heart:hover { background:var(--tint); }
.heart[aria-pressed="true"] { color:#d87486; }
.heart svg { height:19px; width:19px; }
.section-foot { border:0; justify-content:center; flex-wrap:wrap; margin:21px 0 0; padding:0; font-family:inherit; font-size:12px; }
.prototype-note { text-align:center; font-size:12px; margin:13px auto 0; max-width:680px; }
.empty { border-radius:12px; font-size:16px; }
.empty button { border-radius:30px; font-size:14px; }
.experience-section { max-width:1020px; margin:0 auto 110px; }
.timeline { position:relative; margin-top:48px; }
.timeline::before { content:""; position:absolute; width:4px; top:-20px; bottom:0; left:calc(50% - 2px); background:var(--rule); border-radius:3px; }
.timeline-entry { position:relative; display:grid; grid-template-columns:1fr 80px 1fr; gap:22px; align-items:start; margin:0 0 65px; }
.timeline-card { padding:25px 28px; border:1px solid var(--rule); border-radius:4px; background:var(--surface); }
.timeline-card h3 { font-size:20px; line-height:1.35; margin:0 0 4px; letter-spacing:-.4px; }
.company { font-size:14px; color:var(--muted); margin:0 0 18px; }
.timeline-card > p:not(.company) { font-size:16px; line-height:1.7; margin:0 0 10px; }
details { font-size:14px; }
summary { color:#496b9b; cursor:pointer; }
details ul { padding-left:20px; margin-bottom:0; }
details li { margin:10px 0; }
.timeline-icon { width:66px; height:66px; border-radius:50%; display:grid; place-items:center; font-size:22px; background:var(--tile); border:2px solid var(--rule); margin:auto; z-index:1; }
.timeline-date { font-size:16px; margin:19px 0; }
.timeline-date span { font-size:13px; color:var(--muted); }
.timeline-entry:nth-child(even) .timeline-card { grid-column:3; grid-row:1; }
.timeline-entry:nth-child(even) .timeline-icon { grid-column:2; grid-row:1; }
.timeline-entry:nth-child(even) .timeline-date { grid-column:1; grid-row:1; text-align:right; }
.projects-section { max-width:900px; margin:0 auto 110px; }
.project-card { display:grid; grid-template-columns:1fr 1fr; min-height:320px; margin:0 0 26px; border:1px solid var(--rule); background:var(--surface); border-radius:12px; overflow:hidden; }
.project-copy { padding:30px; }
.project-copy h3 { font-size:26px; font-weight:600; letter-spacing:-.6px; margin:8px 0 10px; }
.project-copy > p { font-size:16px; line-height:1.75; margin:0 0 20px; color:var(--muted); }
.project-status { font-size:12px; color:var(--muted); }
.tags { display:flex; gap:7px; flex-wrap:wrap; list-style:none; padding:0; margin:0; }
.tags li { border-radius:20px; background:var(--ink); color:var(--paper); padding:4px 11px; font-size:11px; letter-spacing:.03em; text-transform:uppercase; }
.project-media { position:relative; min-width:0; }
.board-media { background:#155346; }
.board-media img { width:100%; height:100%; display:block; object-fit:cover; }
.board-media > span { position:absolute; bottom:12px; left:12px; right:12px; font-size:12px; color:#fff; background:#143f38d9; border-radius:6px; padding:6px 10px; }
.code-media { background:#e8e0f5; display:flex; align-items:center; justify-content:center; padding:26px; }
.code-window { background:#fff; color:#27303f; border-radius:8px; width:100%; box-shadow:0 10px 25px #33234c15; overflow:hidden; }
.window-bar { background:#f5f5f7; padding:13px; display:flex; gap:5px; align-items:center; }
.window-bar > span { width:8px; height:8px; background:#d8d2e3; border-radius:50%; }
.window-bar small { margin-left:auto; font-size:10px; color:#626575; }
.code-window pre { padding:18px; margin:0; font-size:12px; line-height:2; overflow-wrap:anywhere; white-space:pre-wrap; }
.code-window code > span { color:#7d57b2; }
.code-window > p { padding:0 18px 18px; font-size:12px; margin:0; color:#626575; }
.pipeline-media { background:#e1eaf7; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:30px; color:#536b89; }
.sketch-label { font-size:12px; margin-bottom:12px; }
.pipeline-node { background:#fff; color:#344e70; border:1px solid #d1dceb; padding:9px 16px; font-size:13px; text-align:center; border-radius:8px; width:100%; max-width:220px; }
.project-card:nth-of-type(even) .project-copy { grid-column:2; grid-row:1; }
.project-card:nth-of-type(even) .project-media { grid-column:1; grid-row:1; }
.contact-section { text-align:center; margin:0 auto 100px; max-width:700px; }
.contact-section p { font-size:17px; margin:8px 0; }
.contact-section a { color:inherit; text-underline-offset:4px; }
.contact-section .contact-note { font-size:13px; color:var(--muted); margin-top:22px; }
.site-footer { font-size:12px; text-align:center; color:var(--muted); padding:0 0 35px; }
.site-footer p { margin:3px; }
.theme-button { position:fixed; bottom:20px; right:20px; width:48px; height:48px; border-radius:50%; border:1px solid var(--rule); background:var(--tile); color:var(--ink); font-size:27px; box-shadow:0 2px 12px #11182712; z-index:9; }
dialog { max-width:500px; width:calc(100% - 40px); border:1px solid var(--rule); border-radius:20px; padding:32px; background:var(--tile); color:var(--ink); }
dialog::backdrop { background:#11182750; backdrop-filter:blur(5px); }
dialog h2 { font-size:25px; margin:0 30px 15px 0; }
dialog p { font-size:16px; }
.guide-close { position:absolute; right:14px; top:12px; border:0; background:transparent; width:36px; height:36px; font-size:28px; }
.swatches { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:25px 0; }
.swatches span { border-radius:10px; padding:22px 4px; text-align:center; font-size:12px; border:1px solid #e5e7eb; }
dialog .guide-note { color:var(--muted); font-size:12px; }
[data-theme="dark"] { color-scheme:dark; --paper:#11131c; --tile:#20232e; --ink:#f0f1f5; --muted:#b2b5c1; --rule:#343746; --surface:#1b1e29; --nav:rgba(30,32,44,.9); --tint:#472837; }
[data-theme="dark"] body::before { background:radial-gradient(ellipse at 25% 18%,#312747 0,transparent 62%),radial-gradient(ellipse at 70% 14%,#3b2637 0,transparent 59%); }
[data-theme="dark"] .mark:not(.brand) { color:#c2bee1; }
[data-theme="dark"] summary { color:#98b9eb; }
@media(max-width:750px) { .hero h1 { font-size:29px; } .site-header a { padding:7px 10px; font-size:13px; } .hero { padding-top:137px; } .timeline-entry { grid-template-columns:54px 1fr; gap:14px; margin-bottom:32px; } .timeline::before { left:25px; } .timeline-icon,.timeline-entry:nth-child(even) .timeline-icon { grid-column:1; grid-row:1; width:50px; height:50px; } .timeline-card,.timeline-entry:nth-child(even) .timeline-card { grid-column:2; grid-row:1; padding:20px; } .timeline-date,.timeline-entry:nth-child(even) .timeline-date { grid-column:2; grid-row:2; text-align:left; margin:0; font-size:14px; } .project-card { grid-template-columns:1fr; } .project-copy,.project-card:nth-of-type(even) .project-copy { grid-column:1; grid-row:1; } .project-media,.project-card:nth-of-type(even) .project-media { grid-column:1; grid-row:2; min-height:250px; max-height:340px; } .section-foot > span:last-child { text-align:center; } }
@media(max-width:480px) { .page { padding:0 20px; } .site-header { top:14px; width:calc(100% - 20px); } .site-header nav { justify-content:space-between; padding:6px 7px; gap:0; } .site-header a { padding:6px 7px; font-size:11px; } .hero { padding-top:118px; padding-bottom:52px; } .hero h1 { font-size:25px; line-height:1.6; letter-spacing:-.4px; } .avatar { width:82px; height:82px; } .hero-actions { gap:10px; margin-top:28px; } .pill { font-size:14px; min-height:46px; padding:10px 17px; } .pill.circle { width:46px; padding:12px; } .section-divider { height:50px; margin-bottom:55px; } section > h2 { font-size:27px; } .about-section p { font-size:16px; line-height:1.8; } .about-section,.skills-section,.experience-section,.projects-section { margin-bottom:80px; } .filter { font-size:13px; padding:8px 13px; } .skills-grid { gap:12px 9px; } .skill { min-height:53px; padding:10px 27px 10px 12px; gap:7px; } .skill-name { font-size:14px; } .mark { width:24px; height:24px; } .mark img,.mark svg { width:24px; height:24px; } .heart { width:29px; height:29px; right:-4px; } .section-foot { flex-direction:column; gap:5px; align-items:center; } .project-copy { padding:24px; } .timeline-card h3 { font-size:18px; } .timeline-card > p:not(.company) { font-size:15px; } .theme-button { width:43px; height:43px; bottom:14px; right:14px; } .swatches { grid-template-columns:repeat(2,1fr); } }
@media(max-width:350px) { .site-header a { font-size:10px; padding:6px 5px; } .hero h1 { font-size:23px; } .timeline-entry { gap:10px; grid-template-columns:40px 1fr; } .timeline::before { left:19px; } .timeline-icon,.timeline-entry:nth-child(even) .timeline-icon { width:40px; height:40px; } .timeline-card,.timeline-entry:nth-child(even) .timeline-card { padding:16px; } }
@media(pointer:coarse) { .heart { width:38px; height:38px; padding:9px; top:-10px; right:-4px; } .skill { padding-right:33px; } .site-header a { min-height:36px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .pill:hover { transform:none; } }

/* Mike’s own direction: relaxed engineering work archive, not a reference clone. */
:root { --paper:#f7f9fc; --tile:#fff; --ink:#1c2c40; --muted:#596b7c; --rule:#dce4ed; --accent:#116d78; --tint:#e4f3f3; --surface:#edf2f7; --nav:rgba(255,255,255,.9); }
body::before { height:650px; background:radial-gradient(ellipse at 10% 20%,#d8eafa 0,transparent 59%),radial-gradient(ellipse at 88% 26%,#def1ed 0,transparent 52%); }
.page { max-width:1170px; }
.site-header { width:1114px; max-width:calc(100% - 56px); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.personal-brand { text-decoration:none; color:var(--ink); font-size:18px; font-weight:650; line-height:1.25; }
.personal-brand span { display:block; color:var(--muted); font-size:12px; font-weight:400; margin-top:5px; }
.site-header nav { padding:6px 8px; }
.site-header nav a { font-size:13px; padding:8px 13px; }
.hero { max-width:none; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:center; gap:70px; text-align:left; padding:160px 0 65px; }
.personal-kicker { font-size:13px; color:var(--accent); margin:0 0 13px; }
.hero h1 { font-size:62px; line-height:1.12; letter-spacing:-2.2px; font-weight:650; }
.personal-deck { font-size:23px; line-height:1.65; margin:22px 0 18px; letter-spacing:-.35px; }
.personal-detail { font-size:16px; color:var(--muted); line-height:1.8; margin:0; max-width:500px; }
.personal-detail strong { font-weight:600; color:var(--ink); }
.hero-actions { justify-content:flex-start; gap:9px; margin-top:28px; }
.pill { font-size:14px; min-height:46px; padding:10px 19px; }
.pill.guide-link { padding:9px 11px; border-color:transparent; background:transparent; color:var(--muted); }
.current-work { text-decoration:none; color:var(--ink); background:var(--tile); border:1px solid var(--rule); border-radius:18px; overflow:hidden; box-shadow:0 15px 45px #203b5810; transition:transform .2s; }
.current-work:hover { transform:translateY(-3px); }
.current-work-art { height:220px; position:relative; background:#155347; }
.current-work-art img { width:100%; height:100%; display:block; object-fit:cover; object-position:70% center; }
.art-caption { position:absolute; bottom:9px; right:10px; font-size:10px; color:#fff; background:#143f38c9; border-radius:4px; padding:3px 7px; }
.current-work-copy { padding:24px; }
.current-label { font-size:12px; color:var(--accent); }
.current-work h2 { font-size:28px; font-weight:600; margin:4px 0 8px; line-height:1.4; }
.current-work h2 span { float:right; font-weight:400; font-size:23px; }
.current-work p { font-size:15px; line-height:1.7; margin:0 0 13px; color:var(--muted); }
.current-meta { font-size:12px; color:var(--muted); }
.personal-domains { display:flex; justify-content:space-between; gap:16px; padding:22px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin-bottom:90px; }
.personal-domains span { font-size:13px; color:var(--muted); }
.personal-domains b { color:var(--accent); font:11px var(--mono); margin-right:8px; }
[data-theme="dark"] { --paper:#121e2a; --tile:#1c2b3a; --ink:#edf4fb; --muted:#b1c3d3; --rule:#314657; --surface:#1a2a39; --accent:#7dcad0; --tint:#274951; --nav:rgba(25,41,57,.94); }
[data-theme="dark"] body::before { background:radial-gradient(ellipse at 10% 20%,#1c3854 0,transparent 59%),radial-gradient(ellipse at 88% 26%,#20403f 0,transparent 52%); }
@media(max-width:900px) { .hero { gap:35px; } .hero h1 { font-size:52px; } .personal-deck { font-size:20px; } .site-header { max-width:calc(100% - 40px); } .site-header nav a { padding:8px 9px; } }
@media(max-width:700px) { .site-header { position:static; width:auto; max-width:none; transform:none; margin:23px 0 0; flex-wrap:wrap; gap:16px; } .personal-brand { width:100%; } .personal-brand span { display:inline; margin-left:12px; } .site-header nav { width:100%; justify-content:space-between; flex-wrap:wrap; } .site-header nav a { font-size:12px; padding:8px 11px; } .hero { grid-template-columns:1fr; padding:46px 0 38px; gap:35px; } .hero h1 { font-size:50px; } .personal-deck { font-size:21px; } .current-work { display:grid; grid-template-columns:.8fr 1fr; } .current-work-art { height:100%; min-height:215px; } .current-work-copy { padding:20px; } .current-work h2 { font-size:25px; } .personal-domains { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:65px; } }
@media(max-width:420px) { .site-header nav { padding:5px; } .site-header nav a { padding:8px 6px; font-size:11px; } .personal-brand span { display:block; margin-left:0; } .hero h1 { font-size:44px; letter-spacing:-1.5px; } .personal-deck { font-size:19px; } .current-work { grid-template-columns:1fr; } .current-work-art { height:190px; min-height:0; } .personal-domains span { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .current-work:hover { transform:none; } }

.skip-link { position:absolute; left:20px; top:-70px; z-index:30; padding:10px 15px; background:var(--tile); color:var(--ink); border-radius:8px; }
.skip-link:focus { top:10px; }
.personal-section-heading { margin-bottom:30px; }
.personal-section-heading > h2 { font-size:32px; line-height:1.35; letter-spacing:-.7px; font-weight:600; margin:0; text-align:left; }
.personal-section-heading .personal-kicker { margin-bottom:9px; }
.about-section { max-width:none; display:grid; grid-template-columns:1fr 1.6fr; gap:70px; text-align:left; margin-bottom:85px; }
.about-section p { font-size:16px; line-height:1.9; }
.about-personal-copy p:last-child { margin-bottom:0; }
.projects-section { max-width:none; margin-bottom:85px; }
.work-archive { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.work-archive .project-card { display:block; margin:0; min-height:0; border-radius:16px; background:var(--tile); }
.work-archive .featured-project { grid-column:1/-1; display:grid; grid-template-columns:1.35fr 1fr; }
.featured-project .project-copy { grid-column:1; grid-row:1; padding:32px; }
.featured-project .project-media { grid-column:2; grid-row:1; }
.work-archive .text-project .project-copy { padding:26px; }
.work-archive .project-copy h3 { font-size:23px; line-height:1.4; }
.work-archive .featured-project h3 { font-size:32px; }
.work-archive .project-copy > p { font-size:15px; line-height:1.8; }
.work-facts { margin:20px 0; border-top:1px solid var(--rule); }
.work-facts > div { padding-top:13px; }
.work-facts dt { font-size:12px; color:var(--accent); margin-bottom:3px; }
.work-facts dd { margin:0; font-size:14px; line-height:1.75; color:var(--muted); }
.tags li { background:var(--surface); color:var(--ink); font-size:11px; text-transform:none; padding:4px 10px; letter-spacing:0; }
.project-details { border-top:1px solid var(--rule); margin-top:20px; padding-top:14px; }
.project-details p { font-size:14px; color:var(--muted); line-height:1.8; }
summary,.project-source { color:var(--accent); }
.project-source { display:inline-block; margin-top:18px; font-size:13px; text-underline-offset:4px; }
.skills-section { max-width:none; }
.skills-section .personal-section-heading { display:flex; justify-content:space-between; gap:30px; align-items:start; }
.skills-section .personal-section-heading h2 { max-width:640px; }
.filters { justify-content:flex-start; }
.favorites-row { justify-content:flex-end; margin-top:-8px; }
.results-bar { justify-content:flex-start; }
.skills-grid { justify-content:flex-start; }
.skill { padding:12px 41px 12px 14px; min-height:55px; }
.heart { top:7px; right:4px; width:30px; height:30px; padding:7px; }
.heart[aria-pressed="true"] { color:var(--accent); }
.skill-name { font-size:15px; }
.section-foot { justify-content:space-between; }
.prototype-note { max-width:none; text-align:left; }
.experience-section { max-width:none; }
.timeline { margin-top:25px; }
.timeline::before { display:none; }
.timeline-entry,.timeline-entry:nth-child(even) { grid-template-columns:205px minmax(0,1fr); gap:30px; margin:0; padding:27px 0; border-top:1px solid var(--rule); }
.timeline-card,.timeline-entry:nth-child(even) .timeline-card { grid-column:2; grid-row:1; border:0; background:transparent; padding:0; }
.timeline-date,.timeline-entry:nth-child(even) .timeline-date { grid-column:1; grid-row:1; font-size:14px; margin:0; text-align:left; }
.timeline-icon { display:none!important; }
.timeline-card h3 { font-size:21px; font-weight:600; }
.timeline-card > p:not(.company) { font-size:16px; }
.contact-section { max-width:none; background:var(--surface); padding:36px; border:1px solid var(--rule); border-radius:18px; text-align:left; margin-bottom:40px; }
.contact-section > h2 { text-align:left; font-size:28px; margin-bottom:12px; }
.contact-section .pill { margin-top:14px; }
.site-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:15px; font-size:12px; padding:0 0 45px; text-align:left; }
@media(max-width:900px) { .about-section { gap:35px; grid-template-columns:1fr 1.4fr; } .work-archive { grid-template-columns:1fr 1fr; } .work-archive .text-project:last-child { grid-column:1/-1; } }
@media(max-width:700px) { .about-section { display:block; } .about-section .personal-section-heading { margin-bottom:22px; } .work-archive { grid-template-columns:1fr; } .work-archive .featured-project { grid-template-columns:1fr; } .featured-project .project-copy { grid-column:1; grid-row:1; padding:26px; } .featured-project .project-media { grid-column:1; grid-row:2; min-height:240px; } .work-archive .text-project:last-child { grid-column:auto; } .skills-section .personal-section-heading { display:block; } .favorites-row { justify-content:flex-start; margin:0 0 15px; } .timeline-entry,.timeline-entry:nth-child(even) { grid-template-columns:1fr; gap:14px; } .timeline-card,.timeline-entry:nth-child(even) .timeline-card { grid-column:1; grid-row:2; } .timeline-date,.timeline-entry:nth-child(even) .timeline-date { grid-column:1; grid-row:1; } .personal-section-heading > h2 { font-size:28px; } .section-foot { align-items:flex-start; justify-content:flex-start; } .section-foot > span:last-child { text-align:left; } }
@media(max-width:420px) { .personal-section-heading > h2 { font-size:25px; } .contact-section { padding:26px; } .skill-name { font-size:14px; } .site-footer { flex-direction:column; gap:5px; padding-bottom:65px; } }
@media(pointer:coarse) { .heart { width:44px; height:44px; padding:12px; top:4px; right:0; } .skill { padding-right:50px; } }

/* Ambient gradient studies. Only clipped background layers move. */
body { position:relative; isolation:isolate; }
body::before { display:none; }
.site-header { width:auto; justify-content:center; }
.site-header nav { flex-wrap:wrap; justify-content:center; }
.ambient-track { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:clip; }
.page { position:relative; z-index:1; }
.ambient-background { position:absolute; top:-150px; left:0; width:100%; height:calc(100vh + 300px); min-height:880px; pointer-events:none; overflow:hidden; background:var(--paper); transform:translate3d(0,var(--gradient-follow-y,0px),0); will-change:transform; mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 75%,transparent 100%); --ambient-1:#9bcfe9; --ambient-2:#aee2d4; --ambient-3:#d3c4ed; }
.ambient-scroll-field { position:absolute; inset:-8%; transform:translate3d(var(--gradient-pan-x,0px),var(--gradient-pan-y,0px),0) rotate(var(--gradient-turn,0deg)); will-change:transform; }
.ambient-layer { position:absolute; width:85%; height:85%; background:radial-gradient(ellipse,var(--field-color) 0%,transparent 67%); opacity:.6; transform-origin:center; }
.ambient-a { --field-color:var(--ambient-1); top:-25%; left:-20%; animation:ambient-drift-a 48s ease-in-out infinite alternate; }
.ambient-b { --field-color:var(--ambient-2); top:-20%; right:-25%; animation:ambient-drift-b 64s ease-in-out -18s infinite alternate; }
.ambient-c { --field-color:var(--ambient-3); width:65%; height:70%; top:15%; left:28%; opacity:.3; animation:ambient-drift-c 40s ease-in-out -12s infinite alternate; }
[data-ambient-velocity="js"] .ambient-a,[data-ambient-velocity="js"] .ambient-b,[data-ambient-velocity="js"] .ambient-c { animation:none; transform:translate3d(calc(var(--ambient-drift-x,-4) * 1%),calc(var(--ambient-drift-y,-2) * 1%),0) scale(var(--ambient-drift-scale,1)) rotate(calc(var(--ambient-drift-rotation,0) * 1deg)); }
.ambient-ribbon { display:none; position:absolute; inset:-30%; background:conic-gradient(from 100deg at 50% 50%,transparent 0deg,var(--ambient-1) 45deg,transparent 80deg,var(--ambient-2) 140deg,transparent 190deg,var(--ambient-3) 260deg,transparent 310deg); filter:blur(65px); opacity:.35; animation:ambient-silk 64s ease-in-out -15s infinite alternate; }
[data-ambient="prism"] .ambient-background { --ambient-1:#c5a4ef; --ambient-2:#efb8a8; --ambient-3:#9ddedb; }
[data-ambient="prism"] .ambient-a { width:100%; opacity:.65; left:-35%; }
[data-ambient="prism"] .ambient-c { left:40%; top:-10%; opacity:.55; }
[data-ambient="sunlit"] .ambient-background { --ambient-1:#ecc678; --ambient-2:#e6b3bb; --ambient-3:#c0c1e6; }
[data-ambient="sunlit"] .ambient-a { width:110%; left:-40%; top:-35%; opacity:.55; }
[data-ambient="sunlit"] .ambient-b { right:-45%; opacity:.35; }
[data-ambient="silk"] .ambient-background { --ambient-1:#a8bceb; --ambient-2:#c1a4df; --ambient-3:#b0ded7; }
[data-ambient="silk"] .ambient-layer { opacity:.13; }
[data-ambient="silk"] .ambient-ribbon { display:block; }
[data-ambient="aurora"] .ambient-background { --ambient-1:#9acbb4; --ambient-2:#aeb5ef; --ambient-3:#9fdadd; }
[data-ambient="aurora"] .ambient-a { width:120%; height:55%; top:-20%; left:-10%; opacity:.55; }
[data-ambient="aurora"] .ambient-b { width:65%; height:100%; right:-10%; top:-25%; opacity:.45; }
[data-theme="dark"] .ambient-background { --ambient-1:#245b7c; --ambient-2:#235c51; --ambient-3:#493767; }
[data-theme="dark"][data-ambient="prism"] .ambient-background { --ambient-1:#543279; --ambient-2:#78453f; --ambient-3:#286761; }
[data-theme="dark"][data-ambient="sunlit"] .ambient-background { --ambient-1:#755121; --ambient-2:#724054; --ambient-3:#403c6a; }
[data-theme="dark"][data-ambient="silk"] .ambient-background { --ambient-1:#35507e; --ambient-2:#59367c; --ambient-3:#276860; }
[data-theme="dark"][data-ambient="aurora"] .ambient-background { --ambient-1:#216147; --ambient-2:#443784; --ambient-3:#256976; }
@keyframes ambient-drift-a { from { transform:translate3d(-4%,-2%,0) scale(.92) rotate(-8deg); } to { transform:translate3d(18%,13%,0) scale(1.18) rotate(9deg); } }
@keyframes ambient-drift-b { from { transform:translate3d(8%,-8%,0) scale(1.08) rotate(7deg); } to { transform:translate3d(-20%,12%,0) scale(.94) rotate(-10deg); } }
@keyframes ambient-drift-c { from { transform:translate3d(-12%,4%,0) scale(1.05); } to { transform:translate3d(13%,-14%,0) scale(1.25); } }
@keyframes ambient-silk { from { transform:translate3d(-4%,-5%,0) rotate(-16deg) scale(1.06); } to { transform:translate3d(5%,5%,0) rotate(20deg) scale(1.15); } }
[data-motion="paused"] .ambient-layer,[data-motion="paused"] .ambient-ribbon,[data-background-visibility="hidden"] .ambient-layer,[data-background-visibility="hidden"] .ambient-ribbon { animation-play-state:paused; }
.background-controls { position:fixed; bottom:20px; left:20px; z-index:11; font-size:13px; color:var(--ink); }
.background-controls > summary { color:var(--ink); list-style:none; cursor:pointer; display:flex; gap:12px; align-items:center; padding:11px 16px; background:var(--tile); border:1px solid var(--rule); border-radius:24px; box-shadow:0 2px 12px #1118270a; }
.background-controls > summary::-webkit-details-marker { display:none; }
.background-controls[open] > summary { border-color:var(--accent); }
.background-panel { position:absolute; left:0; bottom:56px; width:290px; max-width:calc(100vw - 40px); background:var(--tile); border:1px solid var(--rule); border-radius:14px; box-shadow:0 8px 30px #11182718; padding:18px; }
.background-panel > label { display:block; font-size:13px; margin-bottom:10px; }
.background-panel select { width:100%; background:var(--surface); color:var(--ink); border:1px solid var(--rule); border-radius:8px; padding:10px; font-size:14px; }
.background-motion { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:15px; }
.background-motion > span { font-size:11px; color:var(--muted); }
.background-motion button { font-size:12px; padding:8px 11px; background:var(--surface); color:var(--ink); border:1px solid var(--rule); border-radius:20px; }
.background-motion button:disabled { opacity:.55; cursor:default; }
.math-toggle { display:flex!important; align-items:center; gap:9px; margin:16px 0 5px!important; cursor:pointer; }
.math-toggle input { width:16px; height:16px; accent-color:var(--accent); margin:0; }
.math-note { margin:0; color:var(--muted); font:10px/1.5 var(--mono); }
.gradient-math-overlay { display:none; position:fixed; inset:0; z-index:0; pointer-events:none; }
[data-math-overlay="visible"] .gradient-math-overlay { display:block; }
.gradient-math-overlay canvas { display:block; width:100%; height:100%; contain:strict; transform:translateZ(0); will-change:transform; }
[data-math-gpu="unavailable"] .gradient-math-overlay { display:none!important; }
.math-toggle input:disabled { opacity:.5; cursor:not-allowed; }
.gradient-math-readout { display:none; position:fixed; top:92px; right:20px; z-index:12; width:245px; padding:14px 16px; background:color-mix(in srgb,var(--tile) 91%,transparent); border:1px solid var(--accent); border-radius:12px; box-shadow:0 8px 30px #11182718; color:var(--ink); pointer-events:none; }
[data-math-overlay="visible"] .gradient-math-readout { display:block; }
.math-readout-title { margin:0 0 11px; color:var(--accent); font:10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.gradient-math-readout dl { margin:0; display:grid; gap:5px; }
.gradient-math-readout dl > div { display:flex; justify-content:space-between; gap:16px; font:11px var(--mono); }
.gradient-math-readout dt { color:var(--muted); }
.gradient-math-readout dd { margin:0; color:var(--ink); text-align:right; }
.math-vector { margin:12px 0 0; padding-top:10px; border-top:1px solid var(--rule); color:var(--accent); font:11px var(--mono); }
.math-readout-note { margin:10px 0 0; color:var(--muted); font-size:10px; line-height:1.45; }
@media(max-width:700px) { .site-header { width:100%; } .site-header nav { justify-content:space-between; } .background-panel select { font-size:16px; } }
@media(max-width:620px) { .gradient-math-readout { top:76px; right:14px; width:220px; } }
@media(max-width:420px) { .background-controls { left:14px; bottom:14px; } .site-header { margin-top:20px; } .gradient-math-readout { top:70px; right:14px; width:calc(100vw - 28px); } }
@media(prefers-reduced-motion:reduce) { .ambient-layer,.ambient-ribbon { animation:none!important; } .ambient-background,.ambient-scroll-field { will-change:auto; } }