:root{--viewport:100vw;--cream-bg:#f5ecd9;--red-line:#c35634;--orange-line:#d98a32;--yellow-line:#c9a54b;--teal-line:#4f8f8c;--olive-line:#7b8a3a;--charcoal-text:#2f2b28;--paper-shadow:#0000002e;--paper-soft-shadow:#0000001f;--radius-lg:18px;--radius-sm:12px;--content-max:1100px;--page-pad:18px}@supports (width:100svw){:root{--viewport:100svw}}*{box-sizing:border-box}body{color:var(--charcoal-text);background:var(--cream-bg);-webkit-font-smoothing:antialiased;background-image:radial-gradient(#00000005 1px,#0000 0);background-size:24px 24px;width:100%;margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6;overflow-x:hidden}html{overflow-x:hidden}a{color:var(--charcoal-text);text-decoration:none}h1,h2,h3,h4{color:var(--charcoal-text);margin:0}.app{min-height:100vh}.paper-elevated{box-shadow:0 6px 16px var(--paper-shadow)}.paper-subtle{box-shadow:0 3px 10px var(--paper-soft-shadow)}.paper-soft{box-shadow:0 2px 8px var(--paper-soft-shadow)}.nav-container{z-index:50;position:sticky;top:0}.stripe-bar{flex-direction:column;display:flex;position:relative}.stripe{height:14px;box-shadow:0 2px 6px var(--paper-shadow)}.stripe.red{background:var(--red-line)}.stripe.orange{background:var(--orange-line)}.stripe.yellow{background:var(--yellow-line)}.stripe.teal{background:var(--teal-line)}.nav-bar{padding:14px var(--page-pad);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#f5ecd9f0;justify-content:space-between;align-items:center;width:100%;max-width:100%;margin:0 auto;display:flex}.nav-brand-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.nav-brand{letter-spacing:.02em;text-transform:uppercase;font-size:.95rem;font-weight:700}.nav-links{gap:16px;margin:0;padding:0;list-style:none;display:flex}.nav-toggle{cursor:pointer;box-shadow:0 2px 8px var(--paper-soft-shadow);background:#f5ecd9eb;border:1px solid #2f2b2833;border-radius:12px;flex-direction:column;gap:5px;padding:10px;transition:transform .2s,box-shadow .2s;display:none}.nav-toggle:hover,.nav-toggle:focus-visible{box-shadow:0 3px 10px var(--paper-soft-shadow);transform:translateY(-1px)}.nav-toggle span{background:var(--charcoal-text);border-radius:2px;width:22px;height:2px;transition:transform .2s,opacity .2s;display:block}.nav-toggle.open span:first-child{transform:translateY(7px)rotate(45deg)}.nav-toggle.open span:nth-child(2){opacity:0}.nav-toggle.open span:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.nav-link{font:inherit;color:var(--charcoal-text);cursor:pointer;background:0 0;border:none;border-radius:10px;padding:8px 10px;transition:background .2s,transform .2s}.nav-link:hover,.nav-link:focus-visible{transform:translateY(-1px)}.nav-link.tone-red:hover,.nav-link.tone-red:focus-visible{background:#c3563429}.nav-link.tone-orange:hover,.nav-link.tone-orange:focus-visible{background:#d98a3229}.nav-link.tone-yellow:hover,.nav-link.tone-yellow:focus-visible{background:#c9a54b2e}.nav-link.tone-teal:hover,.nav-link.tone-teal:focus-visible{background:#4f8f8c29}.hero-wrapper{padding:100px var(--page-pad) 48px;align-items:flex-start;min-height:100vh;display:flex}.hero{max-width:min(var(--content-max), calc(var(--viewport) - 2 * var(--page-pad)));grid-template-columns:1.2fr .8fr;align-items:center;gap:32px;width:100%;margin:0 auto;display:grid}.hero-text{width:100%;max-width:800px;padding:18px;position:relative}.hero h1{text-shadow:0 3px 8px var(--paper-shadow);font-size:3.6rem;font-weight:700;line-height:1.05}.hero h2{text-transform:uppercase;letter-spacing:.22em;margin-top:10px;font-size:1.2rem}.eyebrow{text-transform:uppercase;letter-spacing:.1em;color:#2f2b28cc;margin:0 0 10px;font-size:.8rem}.hero-description{max-width:680px;margin-top:18px;margin-bottom:28px;font-size:1.05rem}.hero-actions{flex-direction:column;gap:16px;display:flex}.hero-graphic{border-radius:var(--radius-lg);min-height:340px;max-width:min(440px, calc(var(--viewport) - 2 * var(--page-pad) - 8px));width:100%;box-shadow:0 10px 20px var(--paper-shadow), 0 0 0 6px #1f1b1980;background:#1f1b19;flex-direction:column;gap:12px;margin-left:auto;padding:20px;display:flex}.sign-top{color:#f8f0df;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(90deg,#c356342e,#4f8f8c2e);border-radius:10px;padding:8px 12px;font-size:.85rem;font-weight:700}.sign-body{background:#2b2725;border:1px solid #ffffff14;border-radius:14px;gap:12px;padding:18px 14px;display:grid;box-shadow:inset 0 0 0 2px #0000002e,0 6px 12px #0000003d}.train-row{background:#ffffff05;border-radius:10px;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 12px;display:grid}.train-line-dot{width:14px;height:14px;box-shadow:0 3px 8px var(--paper-soft-shadow);border-radius:4px;display:inline-block}.train-line-dot.red{background:var(--red-line)}.train-line-dot.teal{background:var(--teal-line)}.train-line-dot.yellow{background:var(--yellow-line)}.train-line-dot.orange{background:var(--orange-line)}.train-destination{color:#f8f0df;letter-spacing:.04em;font-weight:700}.train-status{color:#f2e3a2;letter-spacing:.1em;text-align:right;text-shadow:0 0 8px #f2e3a266;min-width:64px;font-weight:700}.train-status.status-brd,.train-status.status-arr,.train-status.status-soon{color:#f2e3a2}.sign{isolation:isolate;position:relative}.sign:after{content:"";pointer-events:none;z-index:0;border:1px dashed #ffffff0a;border-radius:14px;position:absolute;inset:8px}.skill-swap{min-width:200px;animation:.8s flipText;display:inline-block}.hero-stripe-stack{gap:6px;margin:12px 0 10px;display:inline-flex}.hero-stripe{width:82px;height:8px;box-shadow:0 3px 8px var(--paper-soft-shadow);border-radius:999px}.hero-stripe.red{background:var(--red-line)}.hero-stripe.yellow{background:var(--yellow-line)}.hero-stripe.teal{background:var(--teal-line)}.social-row{gap:14px;display:flex}.social{color:#fff;width:46px;height:46px;box-shadow:0 4px 10px var(--paper-shadow), 0 0 0 5px #f8f0dfe6;border-radius:50%;justify-content:center;align-items:center;transition:transform .2s,box-shadow .2s;display:inline-flex}.social.linkedin{background:var(--red-line)}.social.github{background:var(--teal-line)}.social:hover,.social:focus-visible{box-shadow:0 6px 14px var(--paper-shadow), 0 0 0 7px #f8f0df;transform:scale(1.05)}.social svg{width:22px;height:22px}.scroll-btn{color:var(--charcoal-text);text-transform:uppercase;letter-spacing:.12em;cursor:pointer;box-shadow:0 4px 10px var(--paper-shadow), 0 0 0 6px #fff4ddcc;background:#fff4dd;border:1px solid #2f2b282e;border-radius:999px;padding:14px 16px;font-weight:600;transition:transform .2s,box-shadow .2s,border-color .2s}.scroll-btn:hover,.scroll-btn:focus-visible{box-shadow:0 6px 14px var(--paper-shadow), 0 0 0 8px #fff4ddf2;border-color:#2f2b2847;transform:translateY(-2px)}main{max-width:min(var(--content-max), calc(var(--viewport) - 2 * var(--page-pad)));width:100%;padding:24px var(--page-pad) 64px;margin:0 auto}.section{max-width:min(var(--content-max), calc(var(--viewport) - 2 * var(--page-pad)));width:100%;margin:0 auto 56px;scroll-margin-top:120px}.section-header{align-items:center;gap:12px;margin-bottom:14px;display:flex}.section-line{align-items:center;gap:8px;display:inline-flex}.mini-line{width:52px;height:8px;box-shadow:0 2px 6px var(--paper-soft-shadow);border-radius:6px;display:inline-block}.mini-line.red{background:var(--red-line)}.mini-line.orange{background:var(--orange-line)}.mini-line.yellow{background:var(--yellow-line)}.mini-line.teal{background:var(--teal-line)}.station-dot{border:3px solid var(--charcoal-text);background:var(--cream-bg);width:14px;height:14px;box-shadow:0 2px 6px var(--paper-soft-shadow);border-radius:50%}.section h3{letter-spacing:.04em;font-size:1.3rem}.body-text{color:#2f2b28e6;margin:0}.about-copy{gap:14px;display:grid}.projects-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;display:grid}.project-card{border-radius:var(--radius-sm);background:#fdf6e8;padding:18px;position:relative;overflow:hidden}.project-accent{background:linear-gradient(90deg, var(--red-line), var(--orange-line), var(--teal-line));height:8px;position:absolute;top:0;left:0;right:0}.project-card h4{margin-top:10px;margin-bottom:8px}.tags{flex-wrap:wrap;gap:8px;margin:12px 0;display:flex}.tag{background:#0000000d;border-radius:20px;padding:6px 10px;font-size:.85rem}.text-link{font-weight:600;position:relative}.text-link:after{content:"";background:var(--charcoal-text);opacity:.4;width:100%;height:2px;transition:opacity .2s;position:absolute;bottom:-2px;left:0}.text-link:hover:after,.text-link:focus-visible:after{opacity:.8}.timeline{padding-left:32px;position:relative}.timeline-line{background:linear-gradient(180deg, var(--teal-line), var(--red-line), var(--yellow-line));width:4px;box-shadow:0 2px 8px var(--paper-soft-shadow);border-radius:4px;position:absolute;top:0;bottom:0;left:15px}.timeline-row{grid-template-columns:20px 1fr;gap:14px;margin-bottom:22px;display:grid}.timeline-marker{background:var(--cream-bg);border:4px solid var(--charcoal-text);width:16px;height:16px;box-shadow:0 3px 8px var(--paper-soft-shadow);border-radius:50%;margin-top:6px}.timeline-marker.small{width:14px;height:14px}.timeline-card{border-radius:var(--radius-sm);background:#fdf6e8;padding:14px 16px}.card-header{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.card-header h4{margin:0}.card-meta{color:#2f2b28b3;font-size:.9rem}.card-subtitle{margin:6px 0 10px;font-weight:600}.card-list{color:#2f2b28e6;margin:0;padding-left:18px}.card-list li+li{margin-top:6px}.education-timeline .timeline-card{padding-bottom:10px}.footer{padding:28px var(--page-pad) 36px;box-shadow:0 -4px 12px var(--paper-soft-shadow);background:#f8f0df}.footer-line{max-width:min(var(--content-max), calc(var(--viewport) - 2 * var(--page-pad)));gap:8px;width:100%;margin:0 auto 12px;display:flex}.footer-content{max-width:min(var(--content-max), calc(var(--viewport) - 2 * var(--page-pad)));justify-content:space-between;align-items:center;gap:16px;width:100%;margin:0 auto;display:flex}.footer-title{letter-spacing:.02em;margin:0 0 4px;font-weight:700}.footer-inspired{color:#888;margin:6px 0 0;font-size:.75rem;font-style:italic}.footer-links{gap:14px;display:flex}.footer-links a{font-weight:600;position:relative}.footer-links a:after{content:"";background:var(--charcoal-text);opacity:.2;width:100%;height:2px;transition:opacity .2s;position:absolute;bottom:-2px;left:0}.footer-links a:hover:after,.footer-links a:focus-visible:after{opacity:.7}@media (width<=900px){.nav-bar{padding:12px var(--page-pad);flex-direction:column;align-items:flex-start;gap:10px}.stripe{height:10px}.hero{text-align:center;grid-template-columns:1fr}.hero-graphic{margin:0 auto}.hero h1{font-size:2.6rem}}@media (width<=640px){:root{--page-pad:12px}.nav-container{top:-1px}.nav-bar{padding:10px var(--page-pad);gap:8px}.nav-brand-row{align-items:center;width:100%}.nav-toggle{display:inline-flex}.nav-brand{word-break:break-word;max-width:100%;font-size:.85rem}.nav-links{flex-direction:column;align-items:flex-start;gap:6px;width:100%;display:none}.nav-links.open{display:flex}.nav-link{text-align:left;width:100%;padding:10px 12px;font-size:.95rem;display:block}.hero-wrapper{padding:24px var(--page-pad) 16px;min-height:auto}.hero{gap:24px}.hero h1{font-size:2.2rem}.hero-description{margin-bottom:20px;font-size:1rem}main{padding:16px var(--page-pad) 48px}.section{margin-bottom:42px;scroll-margin-top:140px}.card-header,.footer-content{flex-direction:column;align-items:flex-start}}@media (width<=480px){.hero{gap:18px}.hero-text{padding:12px}.hero h1{font-size:1.9rem;line-height:1.1}.hero h2{letter-spacing:.16em;font-size:1rem}.hero-description{font-size:.98rem}.hero-actions{align-items:stretch}.social-row{gap:10px}.scroll-btn{text-align:center;width:100%}.hero-graphic{max-width:100%;box-shadow:0 8px 16px var(--paper-shadow), 0 0 0 4px #1f1b1980;padding:8px}.projects-grid{grid-template-columns:1fr;gap:14px}.timeline{padding-left:0}.timeline-row{grid-template-columns:1fr;gap:8px;padding-left:28px;position:relative}.timeline-card{padding:12px 14px}.timeline-line{width:3px;left:8px}.timeline-marker{border-width:3px;width:12px;height:12px;margin-top:0;position:absolute;top:16px;left:0}.footer-links{flex-wrap:wrap;row-gap:8px}}@keyframes flipText{0%{opacity:0;transform:rotateX(-90deg)}20%{opacity:1;transform:rotateX(0)}70%{opacity:1;transform:rotateX(0)}90%{opacity:0;transform:rotateX(90deg)}to{opacity:0;transform:rotateX(90deg)}}.metro-map{max-width:100%;height:auto;margin:0 auto;display:block}.metro-map svg{width:100%;height:auto;display:block}
