*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #ffffff;--fg: #1a1a1a;--muted: #666;--accent: #2563eb;--accent-light: #eff4ff;--border: #e5e5e5;--font-heading: "Helvetica Neue", system-ui, sans-serif;--font-body: system-ui, -apple-system, sans-serif;--radius: 12px}html{background:var(--bg);color:var(--fg);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}body{min-height:100vh;overflow-x:hidden}a{color:inherit;text-decoration:none}.panel--hero{align-items:center;text-align:center;position:relative}.hero__name{font-family:var(--font-heading);font-size:clamp(3rem,10vw,8rem);font-weight:700;line-height:1;letter-spacing:-.03em}.hero__tagline{margin-top:1.5rem;font-size:clamp(1rem,2vw,1.4rem);font-weight:400;color:var(--muted);line-height:1.5;max-width:36ch}.hero__scroll-hint{position:absolute;right:clamp(2rem,6vw,8rem);bottom:50%;font-size:1.5rem;color:var(--muted);animation:nudge 1.5s ease-in-out infinite}@keyframes nudge{0%,to{transform:translate(0)}50%{transform:translate(8px)}}#horizontal{position:relative;overflow:hidden}.horizontal__track{display:flex;width:max-content}.panel{flex:0 0 100vw;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,6vw,8rem)}.panel--project{flex-direction:row;align-items:center;gap:clamp(2rem,4vw,6rem)}.panel--reversed{flex-direction:row-reverse}.panel__content{flex:1;min-width:0}.panel__media{flex:1;min-width:0;display:flex;align-items:center;justify-content:center}.panel__placeholder{width:100%;aspect-ratio:16 / 10;max-height:60vh;background:var(--accent-light);border:2px dashed var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:clamp(.9rem,1.2vw,1rem);color:var(--muted)}.panel__number{font-family:var(--font-body);font-size:clamp(.8rem,1.5vw,1rem);color:var(--muted);letter-spacing:.1em;margin-bottom:1.5rem}.panel__title{font-family:var(--font-heading);font-size:clamp(2.5rem,5vw,4.5rem);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin-bottom:1.25rem}.panel__desc{max-width:36ch;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.7;color:var(--muted)}.panel__link{display:inline-block;margin-top:.75rem;color:var(--accent);font-weight:500;transition:opacity .2s ease}.panel__link:hover{opacity:.7}.panel--wip{align-items:center;text-align:center}.panel--explore{background:var(--bg);color:var(--fg);align-items:center;text-align:center;border-right:none}.panel__emoji{font-size:clamp(3rem,6vw,5rem);margin-bottom:1rem}.panel--explore .panel__title{font-size:clamp(2.5rem,8vw,6rem);margin-bottom:1.5rem}.panel__arrow{font-size:2.5rem;animation:bounce 1.5s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(10px)}}.grid-section{padding:clamp(3rem,8vw,8rem) clamp(1.5rem,4vw,4rem)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.grid__card{background:var(--bg);padding:clamp(1.5rem,3vw,2rem);display:flex;flex-direction:column;gap:1rem;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius);transition:transform .2s ease}.grid__card:hover{transform:translateY(-4px)}.grid__card-title{font-family:var(--font-heading);font-size:clamp(1.3rem,2.5vw,1.75rem);font-weight:700;letter-spacing:-.01em}.grid__card-img{height:100px;width:auto;object-fit:contain;align-self:flex-start}.contact{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:clamp(3rem,8vw,8rem) 2rem;gap:1.5rem}.contact__heading{font-family:var(--font-heading);font-size:clamp(3rem,8vw,7rem);font-weight:700;line-height:1;letter-spacing:-.03em}.contact__email{font-size:clamp(1rem,2.5vw,1.5rem);color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:.15em;transition:opacity .2s ease}.contact__email:hover{opacity:.7}.contact__link{font-size:clamp(.9rem,1.5vw,1.1rem);color:var(--muted);transition:color .2s ease}.contact__link:hover{color:var(--fg)}@media(max-width:768px){.horizontal__track{flex-direction:column;width:100%}.panel{flex:none;height:auto;min-height:80vh;border-right:none}.panel--project,.panel--reversed{flex-direction:column;gap:2rem}.panel__placeholder{aspect-ratio:16 / 10;max-height:none}.panel--explore{min-height:60vh}.grid{grid-template-columns:1fr}}
