:root{color-scheme:dark;--accent:#ed51a8;--ink:#fff;--surface:#1e1e1e}*{box-sizing:border-box;border:0 solid currentColor}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:#000;color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5}p,h1,h2{margin:0;font-size:inherit}a{color:inherit;text-decoration:none}button{color:inherit;font:inherit;background:none;padding:0;cursor:pointer}img{vertical-align:middle}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:8px}a:hover{color:var(--accent)}.header{height:140px;max-width:818px;margin:auto;display:flex;align-items:flex-start;justify-content:space-between;padding-top:34px}.header>a{display:block;width:186px;height:73px}.menu-open{width:40px;height:40px;display:grid;place-items:center;margin:17px 0 0}.menu-open:hover{background:#1e1e1e;border-radius:50%}.home-intro{font-size:36px;font-weight:600;line-height:1.5;letter-spacing:-.396px;text-align:center;max-width:584px;margin:33px auto 96px}.project-list{width:min(854px,calc(100% - 40px));margin:auto;display:flex;flex-direction:column;gap:72px}.cover-shell{position:relative;width:100%;overflow:clip;border-radius:24px;transition:box-shadow .2s}.cover-shell:hover{box-shadow:none}.cover-art{position:absolute!important;left:0!important;top:0!important;width:854px!important;transform-origin:top left}.all-projects{display:flex;align-items:center;justify-content:center;border:2px solid #f10187;border-radius:27px;width:114px;height:42px;font-size:13px;letter-spacing:1.3px;margin:48px auto 0}.all-projects:hover{border-color:#2658F5;color:#fff}.footer{width:min(649px,calc(100% - 48px));margin:164px auto 0;display:grid;grid-template-columns:1fr 108px 64px;gap:96px;font-size:16px;padding-bottom:148px}.footer h2{font-size:16px;font-weight:600;margin:5px 0 32px}.footer a,.footer span{display:block;margin-bottom:12px}.footer-brand>a{margin:0 0 32px}.footer-brand p+p{margin-top:12px}.stage-shell{width:min(1440px,100%);margin:auto;overflow:clip}.design-stage{position:relative;width:1440px;transform-origin:top left}.design-stage>a:hover{color:var(--accent)}body:not([data-page="32:8"]) .footer{margin-top:0}dialog{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;padding:0;background:rgba(0,0,0,.5);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);color:white;margin:0;opacity:0;transition:opacity .35s ease-out}dialog[open]{display:grid;place-items:center}dialog.visible{opacity:1}dialog::backdrop{background:transparent}dialog nav{display:flex;flex-direction:column;gap:24px;width:294px}dialog nav a{display:flex;align-items:center;justify-content:center;width:294px;height:106px;border-radius:100px;background:white;color:black;font-size:40px;font-weight:600;transition:background .2s}dialog nav a:hover{background:#ed51a8}.menu-close{position:absolute;top:clamp(60px,19.8vh,203px);left:calc(50% + 272px);width:40px;height:40px;display:grid;place-items:center}.skip-link{position:fixed;left:16px;top:-80px;z-index:20;background:#fff;color:#000;padding:12px}.skip-link:focus{top:16px}.mobile-gallery{position:relative;margin:32px 0;overflow:clip}.gallery-art{position:absolute;transform-origin:top left}.mobile-text{margin:36px 24px!important;font-size:17px;line-height:1.84}.mobile-text [style]{position:static!important;width:auto!important;min-width:0!important;height:auto!important;transform:none!important;white-space:normal!important}.mobile-text p[style*="font-size:24px"]{font-size:22px!important}.mobile-text p[style*="font-size:20px"]{font-size:17px!important}.mobile-text[style]{position:static!important;width:auto!important;height:auto!important;transform:none!important;left:auto!important;top:auto!important}.mobile-text[style*="background"]{padding:24px!important;border-radius:20px!important}.mobile-text[style*="font-size:40px"]{font-size:32px!important;font-weight:600}.mobile-flow{padding-bottom:72px}.mobile-flow .next-project{display:block!important;width:auto!important;margin:64px 24px 0!important}
@media(min-width:1441px){.stage-shell{max-width:1440px}}@media(max-width:900px){.header{margin:0 36px}.footer{gap:40px;grid-template-columns:1fr 80px 64px}}@media(max-width:700px){.header{height:118px;padding-top:24px;margin:0 24px;align-items:flex-start}.header>a{width:150px;height:auto}.header>a img{width:150px;height:auto}.menu-open{margin-top:13px}.home-intro{font-size:27px;line-height:1.6;margin:28px 28px 60px;max-width:none}.project-list{gap:32px}.cover-shell{border-radius:14px}.footer{margin-top:100px;gap:32px 20px;grid-template-columns:1fr 68px 64px;padding-bottom:64px;font-size:13px}.footer h2{font-size:13px;margin-bottom:24px}.footer-brand p{white-space:nowrap;font-size:12px}.footer-brand>a{margin-bottom:26px}dialog nav,dialog nav a{width:240px}dialog nav a{height:84px;font-size:32px}.menu-close{left:auto;right:24px;top:36px}.all-projects{margin-top:36px}.mobile-flow{overflow:clip}.mobile-gallery{margin:24px 12px}.mobile-text{margin:36px 24px!important}.mobile-text p{font-size:17px}.mobile-text [style*="gap:48px"]{gap:24px!important}.mobile-text[style*="display:flex"]{gap:24px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

.cover-art [data-node-id="32:39"]{display:block!important;width:408px!important;height:376px!important}.cover-art [data-node-id="32:41"]{position:absolute!important;left:-199px;top:-131px;margin:0!important}

.mobile-text > p{width:100%!important}.mobile-text h1{font-size:32px!important}

.mobile-text > p[style]{width:100%!important;text-align:left!important}

/* Figma navigation: trigger 40x40, icon 24x24; pills 296x106, hover 392x80. */
#navigation{opacity:0;background:rgba(0,0,0,0);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);transition:background .3s ease-out,backdrop-filter .3s ease-out,-webkit-backdrop-filter .3s ease-out,opacity .18s ease-out}
#navigation.visible{opacity:1;background:rgba(0,0,0,.5);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}
#navigation.closing{transition-duration:.16s;pointer-events:none}
#navigation nav{width:392px;max-width:calc(100vw - 48px);display:flex;flex-direction:column;align-items:center;gap:24px;overflow:visible}
#navigation nav a{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:296px;max-width:100%;height:106px;padding:0;border:0;border-radius:100px;background:#fff;color:#000;font-size:40px;font-weight:600;line-height:1.5;user-select:none;-webkit-user-select:none;outline:none;box-shadow:none;transition:width .18s cubic-bezier(.2,.8,.2,1),height .18s cubic-bezier(.2,.8,.2,1)}
#navigation nav a::before,#navigation nav a::after{content:none}
#navigation nav a:hover,#navigation nav a:active,#navigation nav a:focus-visible{width:392px;height:80px;background:#fff;color:#000;outline:none;box-shadow:none;transform:none}
.header .menu-open{position:fixed;top:51px;left:calc(50% + 355px);right:auto;width:40px;height:40px;margin:0;padding:0;z-index:30;display:grid;place-items:center;border:0;border-radius:0;background:#000;outline:none;box-shadow:none}
.header .menu-open img{width:24px;height:24px;opacity:1;transform:none;transition:none}
.header .menu-open::before,.header .menu-open::after{content:none}
.header .menu-open:hover,.header .menu-open:active,.header .menu-open:focus,.header .menu-open:focus-visible{background:#000;border-radius:0;outline:none;box-shadow:none}
.header .menu-open:hover img,.header .menu-open:active img,.header .menu-open:focus-visible img{opacity:1;transform:none}
#navigation .menu-close,#navigation .menu-close:hover,#navigation .menu-close:active,#navigation .menu-close:focus-visible{outline:none;box-shadow:none}
@media(max-width:900px){.header .menu-open{left:auto;right:36px}}
@media(max-width:700px){.header .menu-open{top:37px;right:24px}#navigation nav{width:392px}#navigation nav a{width:296px;height:106px;font-size:40px}#navigation nav a:hover,#navigation nav a:active,#navigation nav a:focus-visible{width:392px;height:80px}}
@media(prefers-reduced-motion:reduce){#navigation,#navigation nav a{transition:none!important}}

/* Exact Figma hover asset (41:737): 24px Icon_Closed rotated 45 degrees. */
.header .menu-open::before,.header .menu-open::after{content:none}
.header .menu-open .menu-bars{width:24px;height:24px;opacity:1;transform:none;transition:opacity .16s ease}
.header .menu-open .menu-plus{position:absolute;left:50%;top:50%;width:24px;height:24px;opacity:0;transform:translate(-50%,-50%) rotate(45deg);transition:opacity .16s ease;pointer-events:none}
.header .menu-open:active .menu-bars,.header .menu-open:focus-visible .menu-bars{opacity:0;transform:none}
.header .menu-open:active .menu-plus,.header .menu-open:focus-visible .menu-plus{opacity:1;transform:translate(-50%,-50%) rotate(45deg)}
@media(hover:hover) and (pointer:fine){.header .menu-open:hover .menu-bars{opacity:0;transform:none}.header .menu-open:hover .menu-plus{opacity:1;transform:translate(-50%,-50%) rotate(45deg)}}

/* Rotate both original Figma assets through the same turn instead of popping in. */
.header .menu-open .menu-bars{opacity:1;transform:rotate(0deg);transform-origin:center;transition:transform .32s cubic-bezier(.22,.8,.25,1),opacity .22s ease}
.header .menu-open .menu-plus{opacity:0;transform:translate(-50%,-50%) rotate(-45deg);transform-origin:center;transition:transform .32s cubic-bezier(.22,.8,.25,1),opacity .22s ease}
.header .menu-open:active .menu-bars,.header .menu-open:focus-visible .menu-bars{opacity:0;transform:rotate(90deg)}
.header .menu-open:active .menu-plus,.header .menu-open:focus-visible .menu-plus{opacity:1;transform:translate(-50%,-50%) rotate(45deg)}
@media(hover:hover) and (pointer:fine){.header .menu-open:hover .menu-bars{opacity:0;transform:rotate(90deg)}.header .menu-open:hover .menu-plus{opacity:1;transform:translate(-50%,-50%) rotate(45deg)}}

/* The dialog's close control occupies precisely the trigger's viewport rectangle. */
#navigation .menu-close{position:fixed;margin:0;padding:0;width:40px;height:40px;border:0;background:#000;display:grid;place-items:center;outline:none;box-shadow:none}
#navigation .menu-close img{width:24px;height:24px;transform:rotate(45deg);transform-origin:center;transition:transform .32s cubic-bezier(.22,.8,.25,1)}
#navigation.visible .menu-close img{transform:rotate(0deg)}
#navigation.closing .menu-close img{transform:rotate(45deg);transition-duration:.16s}
.header .menu-open[aria-expanded="true"]{visibility:hidden}

.project-list .cover-shell,.project-list .cover-shell:hover,.project-list .cover-shell:active,.project-list .cover-shell:focus-within,.project-list a,.project-list a:hover,.project-list a:active,.project-list a:focus,.project-list a:focus-visible{outline:none;box-shadow:none}

/* First project cover: underline the title on hover, without outlining the card. */
.project-list [data-node-id="32:36"]:hover [data-node-id="32:43"],
.project-list [data-node-id="32:36"]:active [data-node-id="32:43"],
.project-list [data-node-id="32:36"]:focus-visible [data-node-id="32:43"]{text-decoration-line:underline;text-decoration-color:#ed51a8;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-skip-ink:none}

/* Reference recording: underline moves 2px down; typography and layout stay still. */
.next-project > div:first-child{position:relative;border-bottom-width:0!important;overflow:visible}
.next-project > div:first-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:#ed51a8;transform:translateY(0);transition:transform .2s ease}
.next-project:hover > div:first-child::after,.next-project:active > div:first-child::after,.next-project:focus-visible > div:first-child::after{transform:translateY(2px)}
.next-project,.next-project:hover,.next-project:active,.next-project:focus-visible{outline:none;box-shadow:none;color:#fff}
.mobile-flow .next-project > div:first-child{position:relative!important;width:max-content!important}

/* Non-home signatures use a real pink SVG image, also available in file previews. */
.header > a{position:relative;outline:none}
.header > a::after{content:none}
body:not([data-page="32:8"]) .header > a > .logo-white{display:block;width:100%;height:auto;opacity:1}
body:not([data-page="32:8"]) .header > a > .logo-pink{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;transition:opacity .18s ease}
body:not([data-page="32:8"]) .header > a:hover > .logo-pink,
body:not([data-page="32:8"]) .header > a:active > .logo-pink,
body:not([data-page="32:8"]) .header > a:focus-visible > .logo-pink,
body:not([data-page="32:8"]) .header > a.logo-navigate-active > .logo-pink{opacity:1}

/* Home has a distinct interactive signature; other pages use the static pink mask above. */
.signature-drawing{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none;overflow:visible}
.header>a.is-writing .signature-drawing{display:block}
.header>a.is-writing>img{opacity:0!important}
.header>a.is-writing::after{opacity:0!important}
.intro-line{display:block;white-space:nowrap}
.intro-line>span{display:inline-block;will-change:transform,opacity,filter}
@media(prefers-reduced-motion:reduce){.intro-line>span{will-change:auto}}
.header>a.signature-ready .signature-drawing{display:block;transition:filter .18s ease}
.header>a.signature-ready>img{opacity:0!important}
.header>a.signature-ready::after{opacity:0!important}
.header>a.signature-ready:hover:not(.is-writing):not(.signature-replay-hover) .signature-drawing{filter:brightness(0) saturate(100%) invert(53%) sepia(65%) saturate(1816%) hue-rotate(292deg) brightness(98%) contrast(89%)}

/* Temporarily hide the project shortcuts for the first public release. */


/* All projects: Figma card panels fade in and title rules draw from left to right. */
.project-hover-panel{position:absolute;z-index:0;border-radius:24px;background:rgba(30,30,30,.5);opacity:0;pointer-events:none;transition:opacity .28s cubic-bezier(.2,.7,.2,1)}
.project-hover-panel.is-visible{opacity:1}
.project-hit{position:absolute!important;z-index:5;display:block;background:transparent;cursor:pointer;outline:0!important}
.project-title{position:relative!important;width:fit-content!important;max-width:100%;min-width:0!important;border:0!important}
.project-title::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:2px;background:var(--project-rule,#ed51a8);transform:scaleX(0);transform-origin:left center;transition:transform .32s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.project-title.is-active::after{transform:scaleX(1)}
.project-mobile-list{display:none}
@media(max-width:700px){.project-mobile-card:hover{color:inherit}.project-mobile-list{display:flex;flex-direction:column;gap:20px;padding:22px 20px 48px}.project-mobile-heading{font-size:28px;font-weight:600;text-align:center;margin:34px auto 26px}.project-mobile-card{display:grid;grid-template-columns:1fr;overflow:hidden;background:#1e1e1e;border-radius:18px;transition:background .25s ease}.project-mobile-card:active{background:#292929}.project-mobile-card img{display:block;width:100%;aspect-ratio:1.6;object-fit:cover}.project-mobile-copy{display:flex;flex-direction:column;gap:12px;padding:20px}.project-mobile-copy strong{position:relative;width:fit-content;font-size:20px;line-height:1.5}.project-mobile-copy strong::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:2px;background:var(--project-rule,#ed51a8);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}.project-mobile-card:active strong::after,.project-mobile-card:focus-visible strong::after{transform:scaleX(1)}.project-mobile-copy span{font-size:15px;line-height:1.8;color:#eee}.project-mobile-copy em{font-style:normal;font-size:15px;width:fit-content;border-bottom:2px solid var(--project-rule,#ed51a8);padding-bottom:2px}}
/* Local file previews must not depend on SVG mask-composite support for this cover. */
.cover-art [data-node-id="32:39"]{overflow:hidden!important;border-radius:16px!important}
.cover-art [data-node-id="32:41"]{-webkit-mask:none!important;mask:none!important}

/* Keep the first project's masked artwork inside its intended Figma crop. */
body[data-page="73:232"] [data-node-id="73:238"]{display:block!important;width:408px!important;height:376px!important;flex:0 0 408px!important;overflow:hidden!important}

/* Match each project title rule to that card's existing “View project” rule. */
.project-title[data-card-title="1"],.project-mobile-card:nth-of-type(1){--project-rule:#ed51a8}
.project-title[data-card-title="2"],.project-mobile-card:nth-of-type(2){--project-rule:#437ef6}
.project-title[data-card-title="3"],.project-mobile-card:nth-of-type(3){--project-rule:#8177fa}
.project-title[data-card-title="4"],.project-mobile-card:nth-of-type(4){--project-rule:#e2ebff}
.project-title[data-card-title="5"],.project-mobile-card:nth-of-type(5){--project-rule:#2658f5}
.project-title[data-card-title="6"],.project-mobile-card:nth-of-type(6){--project-rule:#ed51a8}
.project-title[data-card-title="7"],.project-mobile-card:nth-of-type(7){--project-rule:#f8a551}
.project-title[data-card-title="8"],.project-mobile-card:nth-of-type(8){--project-rule:#cbd3d6}
/* The Figma export also carried a permanent bottom border around the first two titles. */
body[data-page="73:232"] [data-node-id="73:468"],body[data-page="73:232"] [data-node-id="73:471"]{border-bottom-width:0!important}
/* Underline every wrapped title line, revealing the rule only on card hover/focus. */
.project-title,.project-mobile-copy strong{ text-decoration-line:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:4px; transition:text-decoration-color .32s cubic-bezier(.2,.7,.2,1) }
.project-title::after,.project-mobile-copy strong::after{content:none!important}
.project-title.is-active{ text-decoration-color:var(--project-rule,#ed51a8) }
@media(max-width:700px){.project-mobile-card:hover .project-mobile-copy strong,.project-mobile-card:active .project-mobile-copy strong,.project-mobile-card:focus-visible .project-mobile-copy strong{ text-decoration-color:var(--project-rule,#ed51a8) }}
/* Align the SU campus text block to the right edge with the same 44px inset as the left. */
body[data-page="73:232"] [data-node-id="73:289"]{width:256px!important}