:root{--color-bg: #F5F0EB;--color-text: #2C2C2C;--color-accent: #C4956A;--color-secondary: #8B7355;--color-subtle: #E8E0D8;--color-muted: #9A8F85;--font-heading: "Satoshi", system-ui, -apple-system, sans-serif;--font-body: "Inter", system-ui, -apple-system, sans-serif;--space-xs: .5rem;--space-sm: 1rem;--space-md: 2rem;--space-lg: 4rem;--space-xl: 8rem;--space-2xl: 12rem;--max-width: 720px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;font-size:18px}@media(max-width:768px){html{font-size:16px}}body{font-family:var(--font-body);color:var(--color-text);background-color:var(--color-bg);line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;background:url(/grain-texture.svg) repeat;background-size:200px 200px}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:500;line-height:1.2;letter-spacing:-.02em}a{color:var(--color-accent);text-decoration:none;transition:color .3s ease}a:hover{color:var(--color-secondary)}::selection{background-color:var(--color-accent);color:var(--color-bg)}img{max-width:100%;display:block}.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-md)}.section-label{display:block;font-family:var(--font-heading);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--color-muted);margin-bottom:var(--space-lg)}[data-animate],[data-hero=name],[data-hero=tagline],[data-hero=intro]{opacity:0;transform:translateY(24px)}[data-hero=rule]{opacity:0;transform:scaleX(0);transform-origin:left}.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0%;background-color:var(--color-accent);z-index:10000}@media(prefers-reduced-motion:reduce){[data-animate],[data-hero]{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}}.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:var(--space-xl) var(--space-md)}.hero-content{max-width:var(--max-width);width:100%}.hero-name{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-bottom:var(--space-md)}.hero-rule{width:48px;height:2px;background-color:var(--color-accent);border:none;margin-bottom:var(--space-md)}.hero-tagline{font-family:var(--font-heading);font-size:clamp(1.1rem,2.2vw,1.35rem);color:var(--color-secondary);font-weight:500;margin-bottom:var(--space-md);line-height:1.5}.hero-intro{font-size:1rem;max-width:540px;opacity:.85}.scroll-indicator{position:absolute;bottom:var(--space-lg);left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);opacity:0;animation:indicator-fade-in 1s ease 1.2s forwards}.scroll-text{font-family:var(--font-heading);font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:var(--color-muted)}.scroll-line{width:1px;height:32px;background-color:var(--color-accent);transform-origin:top;animation:scroll-breathe 2.5s ease-in-out infinite}@keyframes indicator-fade-in{to{opacity:1}}@keyframes scroll-breathe{0%,to{transform:scaleY(.4);opacity:.3}50%{transform:scaleY(1);opacity:1}}.philosophy{padding:var(--space-xl) 0}.philosophy-text{font-size:1.05rem;line-height:1.8;opacity:.88;max-width:580px}.work{padding:var(--space-xl) 0;border-top:1px solid var(--color-subtle)}.role-header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-md);margin-bottom:var(--space-sm)}.role-title{font-size:clamp(1.1rem,2.5vw,1.3rem);font-weight:700;letter-spacing:-.01em}.role-company{font-family:var(--font-heading);font-size:.78rem;color:var(--color-muted);letter-spacing:.02em}.role-period{font-family:var(--font-heading);font-size:.72rem;font-weight:500;color:var(--color-muted);letter-spacing:.03em;white-space:nowrap;flex-shrink:0}.role-highlights{list-style:none;display:flex;flex-direction:column;gap:.6rem;max-width:560px}.role-highlights li{font-size:.92rem;opacity:.82;padding-left:1rem;position:relative}.role-highlights li:before{content:"–";position:absolute;left:0;color:var(--color-accent)}.education{margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--color-subtle)}.education .section-label{margin-bottom:var(--space-md)}.education-detail{font-family:var(--font-heading);font-size:.8rem;color:var(--color-muted);letter-spacing:.02em}@media(max-width:600px){.role-header{flex-direction:column;gap:.25rem}}.experience{padding:var(--space-xl) 0;border-top:1px solid var(--color-subtle)}.projects{display:flex;flex-direction:column}.project{border-bottom:1px solid var(--color-subtle)}.project:last-child{border-bottom:none}.project-toggle{display:flex;justify-content:space-between;align-items:flex-start;width:100%;padding:var(--space-md) 0;background:none;border:none;cursor:pointer;text-align:left;font:inherit;color:inherit;gap:var(--space-md)}.project-toggle:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px;border-radius:2px}.project-header{display:flex;flex-direction:column;gap:.25rem}.project-title{font-size:clamp(1.1rem,2.5vw,1.3rem);font-weight:700;letter-spacing:-.01em;transition:color .3s ease}.project-toggle:hover .project-title{color:var(--color-accent)}.project-context{font-family:var(--font-heading);font-size:.72rem;color:var(--color-muted);letter-spacing:.03em}.project-icon{font-family:var(--font-heading);font-size:1.2rem;font-weight:300;color:var(--color-muted);transition:transform .3s ease,color .3s ease;flex-shrink:0;line-height:1;margin-top:.4rem}.project-toggle:hover .project-icon{color:var(--color-accent)}.project.is-open .project-icon{transform:rotate(45deg);color:var(--color-accent)}.project-details{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}.project-details-inner{overflow:hidden;opacity:0;transition:opacity .3s ease}.project.is-open .project-details{grid-template-rows:1fr}.project.is-open .project-details-inner{opacity:1;transition-delay:.1s}.project-description{font-size:.95rem;opacity:.85;max-width:540px;padding-bottom:var(--space-sm);line-height:1.7}.project-tech{display:flex;flex-wrap:wrap;gap:.4rem;padding-bottom:var(--space-md)}.tech-tag{font-family:var(--font-heading);font-size:.65rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--color-secondary);padding:.2rem .55rem;border:1px solid var(--color-subtle);border-radius:3px}.skills{padding:var(--space-xl) 0;border-top:1px solid var(--color-subtle)}.skill-categories{display:flex;flex-direction:column;gap:var(--space-md)}.skill-category{display:flex;align-items:baseline;gap:var(--space-md)}.skill-category-label{font-family:var(--font-heading);font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--color-muted);min-width:130px;flex-shrink:0}.skill-items{display:flex;flex-wrap:wrap;gap:.45rem}.skill-item{font-family:var(--font-heading);font-size:.82rem;font-weight:500;color:var(--color-text);padding:.25rem .7rem;border:1px solid var(--color-subtle);border-radius:4px;transition:border-color .3s ease,color .3s ease}.skill-item:hover{border-color:var(--color-accent);color:var(--color-accent)}@media(max-width:600px){.skill-category{flex-direction:column;gap:var(--space-xs)}.skill-category-label{min-width:auto}}.now{padding:var(--space-xl) 0;border-top:1px solid var(--color-subtle)}.now-text{font-size:1rem;opacity:.85;max-width:540px}.now-updated{font-size:.7rem;color:var(--color-muted);margin-top:var(--space-md);font-family:var(--font-heading);letter-spacing:.05em}.connect{padding:var(--space-xl) 0;padding-bottom:var(--space-2xl)}.connect-cta{font-family:var(--font-heading);font-size:clamp(1.25rem,3vw,1.5rem);font-weight:500;margin-bottom:var(--space-md);letter-spacing:-.01em}.connect-links{display:flex;gap:var(--space-md);flex-wrap:wrap}.connect-links a{font-family:var(--font-heading);font-size:.85rem;font-weight:500;color:var(--color-muted);letter-spacing:.02em;transition:color .3s ease;position:relative}.connect-links a:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:1px;background-color:var(--color-accent);transition:width .3s ease}.connect-links a:hover{color:var(--color-accent)}.connect-links a:hover:after{width:100%}