:root{--blue:#086be6;--ink:#123b60;--pale:#e7f3fd;--white:#f5faff;--line:rgba(18,59,96,.2);--glass:rgba(245,250,255,.66);--max:1200px;--unit:8px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--pale);color:var(--ink);font:400 16px/1.5 Bahnschrift,"Segoe UI","Microsoft YaHei",sans-serif;letter-spacing:.01em}body[data-page=home]{background:var(--blue);color:var(--white)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;min-width:44px;min-height:44px}.skip-link{position:fixed;top:12px;left:12px;z-index:20;padding:10px 14px;background:var(--white);color:var(--ink);transform:translateY(-150%);transition:transform .2s}.skip-link:focus{transform:translateY(0)}:focus-visible{outline:2px solid currentColor;outline-offset:4px}.site-header{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;max-width:var(--max);margin:auto;padding:24px clamp(20px,4vw,56px)}.wordmark{font-size:14px;letter-spacing:.18em;font-weight:700}.site-header nav{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid rgba(245,250,255,.4);background:var(--glass);backdrop-filter:blur(16px);border-radius:999px;color:var(--ink)}.site-header nav a{padding:9px 16px;border-radius:999px;font-size:13px}.site-header nav a[aria-current=page]{background:var(--blue);color:var(--white)}.menu-toggle{display:none}.hero{position:relative;isolation:isolate;min-height:calc(100svh - 88px);display:flex;flex-direction:column;justify-content:center;padding:8vh clamp(20px,8vw,120px) 12vh;overflow:hidden}.hero-orb{position:absolute;z-index:-1;right:-8vw;bottom:-23vw;width:64vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(231,243,253,.5),rgba(231,243,253,.1) 38%,transparent 68%);filter:blur(2px);opacity:.8}.eyebrow{margin:0 0 16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.72}.portfolio-title{display:flex;flex-wrap:wrap;gap:clamp(2px,.8vw,12px);margin:0 0 32px;max-width:1100px;font-size:clamp(68px,14.5vw,200px);line-height:.83;letter-spacing:-.08em;font-weight:500}.portfolio-title>span{display:grid;place-items:center;width:.57em;height:.76em;border:1px solid rgba(245,250,255,.45);border-radius:44% 56% 49% 51%;background:linear-gradient(140deg,rgba(245,250,255,.21),rgba(245,250,255,.03));text-shadow:0 0 20px rgba(245,250,255,.15)}.portfolio-title>span:nth-child(2n){transform:translateY(.14em);border-radius:52% 48% 41% 59%}.portfolio-title>span:nth-child(3n){border-radius:38% 62% 54% 46%}.letter-text{transform:translateY(-.02em)}.hero-name{margin:0 0 28px;font-size:14px;letter-spacing:.22em}.hero-actions{display:flex;flex-wrap:wrap;gap:10px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;font-size:13px}.button--solid{background:var(--white);color:var(--blue)}.button--ghost{border:1px solid rgba(245,250,255,.56)}.section-shell,.page-main{max-width:var(--max);margin:auto;padding:clamp(72px,10vw,144px) clamp(20px,4vw,56px)}.home-preview{color:var(--ink);background:var(--pale)}.section-heading{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:end;margin-bottom:40px}.section-heading .eyebrow{grid-column:1/-1}.section-heading h2{margin:0;font-size:clamp(28px,4vw,48px);font-weight:500;letter-spacing:-.04em}.text-link{padding:8px 0;font-size:13px;border-bottom:1px solid var(--ink)}.preview-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(2,minmax(180px,260px));gap:12px}.image-slot{position:relative;display:grid;place-items:center;min-height:220px;border:1px solid var(--line);background:linear-gradient(140deg,rgba(8,107,230,.1),rgba(245,250,255,.78));overflow:hidden}.image-slot::after{content:"";position:absolute;inset:18%;border:1px solid rgba(8,107,230,.18);border-radius:50%;transform:rotate(-18deg)}.image-slot span{position:relative;z-index:1;font-size:11px;letter-spacing:.16em;opacity:.7}.image-slot--large{grid-row:1/3;min-height:100%}.page-intro{padding-bottom:clamp(56px,9vw,112px);border-bottom:1px solid var(--line)}.page-intro h1{margin:0;color:var(--blue);font-size:clamp(52px,10vw,140px);font-weight:500;letter-spacing:-.07em;line-height:.9}.page-intro h1 span{font-size:.32em;letter-spacing:.02em;vertical-align:middle}.experience-list{display:grid;gap:clamp(96px,15vw,220px);padding-top:clamp(64px,10vw,132px)}.experience{display:grid;grid-template-columns:1fr 2fr;gap:clamp(28px,6vw,88px);align-items:center}.experience--reverse .experience-copy{order:2}.experience--reverse .experience-media{order:1}.experience-copy{min-height:240px;padding-top:8px}.index-number{margin:0 0 28px;color:var(--blue);font-size:13px;letter-spacing:.12em}.experience-copy h2{height:34px;margin:0 0 18px;border-bottom:1px solid var(--line)}.placeholder-line{height:1px;width:92%;margin:14px 0;background:var(--line)}.placeholder-line--short{width:64%}.experience-media{min-height:clamp(300px,40vw,520px)}.projects-main{padding-bottom:80px}.project-browser{padding-top:clamp(36px,6vw,76px)}.project-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.project-view-switch,.project-selectors{display:flex;gap:4px}.project-view-switch button,.project-selectors button{padding:8px 12px;border:1px solid var(--line);font-size:12px;border-radius:999px}.project-view-switch button[aria-pressed=true],.project-selectors button[aria-pressed=true]{background:var(--blue);color:var(--white);border-color:var(--blue)}.project-stage{position:relative;min-height:min(62vw,660px);overflow:hidden;border:1px solid var(--line);background:rgba(245,250,255,.36)}.project-tile{position:absolute;top:11%;left:50%;width:min(38vw,420px);height:min(44vw,500px);min-height:280px;transform:translateX(-50%);transition:opacity .3s,transform .3s}.project-tile:nth-child(1){transform:translateX(-50%) translateX(-27%);opacity:.55}.project-tile:nth-child(2){z-index:2}.project-tile:nth-child(3){transform:translateX(-50%) translateX(27%);opacity:.55}.project-tile:nth-child(n+4){opacity:.14}.project-tile__surface{height:100%;border:1px solid rgba(8,107,230,.36);border-radius:48% 52% 44% 56%;background:linear-gradient(145deg,rgba(245,250,255,.85),rgba(8,107,230,.1));box-shadow:0 24px 60px rgba(18,59,96,.08)}.project-tile__number{position:absolute;left:22px;bottom:20px;color:var(--blue);font-size:13px;letter-spacing:.14em}.project-controls{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:18px;color:var(--blue)}.project-controls button{border:1px solid var(--line);border-radius:50%}.project-controls [data-project-current]{font-size:12px;letter-spacing:.14em}.about-portrait{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,8vw,120px);align-items:center;padding:clamp(64px,10vw,140px) 0}.portrait-slot{aspect-ratio:4/5;min-height:360px}.about-copy{max-width:360px}.about-copy h2{height:38px;border-bottom:1px solid var(--line);margin:0 0 20px}.about-lines{display:grid;gap:0}.about-lines div{height:1px;background:var(--line)}.about-lines div+div{margin-top:72px}.sticker-band{position:relative;min-height:220px;margin-top:clamp(80px,12vw,180px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}.site-footer{display:flex;justify-content:space-between;align-items:center;max-width:var(--max);margin:auto;padding:24px clamp(20px,4vw,56px);font-size:10px;letter-spacing:.14em}.motion-toggle{font-size:11px;letter-spacing:.03em;padding:8px 0;border-bottom:1px solid currentColor}@media(max-width:700px){.site-header{padding:18px 20px}.menu-toggle{display:flex;align-items:center;gap:8px;font-size:12px}.menu-toggle i{display:block;width:18px;height:1px;background:currentColor;box-shadow:0 6px currentColor}.site-header nav{display:none;position:absolute;top:70px;left:20px;right:20px;flex-direction:column;align-items:stretch;border-radius:18px;padding:8px}.site-header nav a{text-align:center}.has-js .site-header nav.is-open{display:flex}.hero{min-height:calc(100svh - 70px);padding:12vh 20px 10vh}.hero-orb{width:110vw;right:-36vw;bottom:-15vw}.portfolio-title{font-size:clamp(54px,17vw,110px);gap:3px;margin-bottom:26px}.portfolio-title>span{width:.59em;height:.82em}.section-shell,.page-main{padding:72px 20px}.section-heading{display:block}.section-heading h2{margin-bottom:20px}.preview-grid{grid-template-columns:1fr 1fr;grid-template-rows:220px 160px}.image-slot--large{grid-row:1/2;grid-column:1/-1;min-height:220px}.preview-grid .image-slot:not(.image-slot--large){min-height:160px}.page-intro h1{font-size:clamp(48px,15vw,88px)}.experience{display:flex;flex-direction:column;align-items:stretch;gap:28px}.experience--reverse .experience-copy,.experience--reverse .experience-media{order:initial}.experience-copy{min-height:180px}.experience-media{min-height:300px}.project-toolbar{align-items:flex-start;flex-direction:column}.project-stage{min-height:520px}.project-tile{width:70vw;height:400px}.project-tile:nth-child(1){transform:translateX(-50%) translateX(-20%)}.project-tile:nth-child(3){transform:translateX(-50%) translateX(20%)}.about-portrait{grid-template-columns:1fr;padding-top:64px}.portrait-slot{min-height:320px}.site-footer{padding:22px 20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
