:root{--paper:#f8f7f5;--ink:#202020;--pink:#e9a0b7;--muted:#767172;--line:#dcd9d7;--gutter:clamp(22px,3.9vw,80px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--ink);outline-offset:7px}::selection{background:var(--pink);color:var(--ink)}p,h1,h2,h3{margin:0}.skip-link{position:fixed;z-index:10;top:12px;left:12px;padding:12px;background:var(--ink);color:var(--paper);transform:translateY(-180%)}.skip-link:focus{transform:none}
.header{margin:0 var(--gutter);height:113px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink)}.logo{font-size:41px;letter-spacing:-5px;font-weight:800;line-height:1;padding-right:5px}.header nav a{font-size:14px;font-weight:700;letter-spacing:2.5px;display:flex;align-items:center;gap:24px}.header nav a span{font-size:21px;font-weight:400;transition:transform .2s}.header nav a:hover span{transform:translate(3px,-3px)}
.hero{position:relative;padding:56px var(--gutter) 64px;min-height:calc(100svh - 181px);display:flex;flex-direction:column;justify-content:space-between;gap:50px}.hero-meta{display:flex;justify-content:space-between;align-items:flex-start}.eyebrow{font-size:clamp(10px,1.05vw,15px);font-weight:700;letter-spacing:3px;line-height:1.55}.meta-right{text-align:right;position:relative;min-height:116px}.asterisk{position:absolute;right:0;top:78px;width:46px;height:46px}.asterisk i{display:block;position:absolute;width:100%;height:2px;background:var(--pink);top:50%;left:0}.asterisk i:nth-child(2){transform:rotate(45deg)}.asterisk i:nth-child(3){transform:rotate(90deg)}.asterisk i:nth-child(4){transform:rotate(135deg)}.year{display:block;padding-right:57px;margin-top:29px}.identity h1{font-size:clamp(100px,16.9vw,260px);line-height:.82;letter-spacing:-.09em;font-weight:800;margin-left:-.025em}.identity h1 span{display:block}.role{font-size:clamp(30px,3.65vw,54px);letter-spacing:-.065em;line-height:1.13;font-weight:400;margin-top:54px}.pink{color:var(--pink)}.intro{font-size:clamp(15px,1.55vw,23px);line-height:1.65;letter-spacing:.15px;margin-top:36px;max-width:650px}.scroll{position:absolute;bottom:65px;right:var(--gutter);display:flex;flex-direction:column;align-items:center;gap:20px}.scroll>span:first-child{font-size:10px;letter-spacing:2px;font-weight:700}.scroll-arrow{font-size:40px;font-weight:400;line-height:1;transition:transform .2s}.scroll:hover .scroll-arrow{transform:translateY(5px)}
.discipline-strip{min-height:68px;display:flex;justify-content:space-between;align-items:center;gap:26px;padding:18px var(--gutter);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden;white-space:nowrap}.discipline-strip span{font-size:clamp(10px,1.12vw,17px);letter-spacing:3px;font-weight:700}.discipline-strip b{color:#cb819b;font-size:20px;font-weight:400}
.projects{padding:76px var(--gutter) 100px}.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:65px}.section-heading h2{font-size:clamp(54px,7.8vw,120px);letter-spacing:-.075em;line-height:.95;font-weight:800}.section-heading p{color:#716b6d;white-space:nowrap}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.25vw,44px)}.cover{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#eae8e5;border:1px solid var(--line)}.cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s cubic-bezier(.2,.65,.25,1)}.project:first-child .cover img{object-position:53% 50%}.project:nth-child(2) .cover img{object-position:50% 43%}.project:hover .cover img{transform:scale(1.025)}.project-number{position:absolute;top:25px;left:24px;display:flex;align-items:center;gap:12px;font-size:clamp(10px,1.1vw,16px);font-weight:700;letter-spacing:2.4px;line-height:1.4}.cover:has(img) .project-number{color:white;text-shadow:0 1px 8px #0008}.project-number i{display:inline-block;width:13px;height:13px;border:1px solid currentColor;border-radius:50%;flex-shrink:0}.empty-cover{background:#eee9ea}.project h3{font-size:clamp(23px,2.9vw,48px);font-weight:800;line-height:1.08;letter-spacing:-.065em;margin-top:25px;white-space:nowrap}.project-type{font-size:clamp(10px,1.07vw,16px);font-weight:700;letter-spacing:2px;margin-top:13px}.project-soon h3{color:#787375}footer{border-top:1px solid var(--line);margin:0 var(--gutter);padding:27px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}.footer-name{font-size:24px;letter-spacing:-3px;font-weight:800}.back-top{font-size:28px}footer .eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted)}
@media(min-width:1600px){.hero{padding-top:65px;gap:65px}.identity h1{font-size:252px}.hero{min-height:950px}.role{margin-top:60px}}
@media(max-width:900px){.header{height:88px}.hero{min-height:calc(100svh - 150px);padding-top:36px;gap:65px;padding-bottom:50px}.identity h1{font-size:18.5vw}.role{margin-top:38px}.intro{margin-top:28px}.scroll{bottom:51px}.discipline-strip{min-height:62px;gap:20px}.discipline-strip span{letter-spacing:1.5px}.projects{padding-top:55px;padding-bottom:65px}.section-heading{margin-bottom:40px}.project-number{top:16px;left:14px;gap:7px;letter-spacing:1.5px}.project-number i{width:10px;height:10px}.project h3{margin-top:19px}.project-type{letter-spacing:1px}}
@media(max-width:600px){:root{--gutter:22px}.header{height:79px}.logo{font-size:34px;letter-spacing:-4px}.header nav a{font-size:11px;letter-spacing:2px;gap:13px}.hero{min-height:730px;min-height:calc(100svh - 132px);gap:70px;padding-top:30px;padding-bottom:45px}.hero-meta .eyebrow{font-size:9px;letter-spacing:1.7px;line-height:1.6}.hero-meta>p{max-width:220px}.meta-right{min-width:95px;min-height:100px}.asterisk{width:34px;height:34px;top:60px}.year{padding-right:43px;margin-top:20px}.identity h1{font-size:20.3vw;letter-spacing:-.088em;line-height:.86}.role{font-size:34px;margin-top:35px}.intro{font-size:14px;line-height:1.7;max-width:310px;margin-top:28px}.desktop-break{display:none}.scroll{right:22px;bottom:45px}.scroll>span:first-child{display:none}.scroll-arrow{font-size:29px}.discipline-strip{min-height:53px;justify-content:flex-start;gap:23px}.discipline-strip span{font-size:10px;letter-spacing:1.8px}.discipline-strip b{font-size:16px}.projects{padding-top:47px;padding-bottom:55px}.section-heading{align-items:center;margin-bottom:33px;gap:12px}.section-heading h2{font-size:53px}.section-heading p{font-size:9px;letter-spacing:1.5px}.project-grid{grid-template-columns:1fr;gap:40px}.cover{aspect-ratio:4/5}.project-number{top:23px;left:21px;font-size:12px;letter-spacing:2px;gap:11px}.project-number i{width:12px;height:12px}.project h3{font-size:36px;margin-top:20px}.project-type{font-size:12px;letter-spacing:1.8px;margin-top:9px}.empty-cover{aspect-ratio:4/3}.project-soon h3{margin-bottom:4px}footer{padding:23px 0}footer .eyebrow{font-size:8px;letter-spacing:1.4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Portfolio contact links and the single-line professional title. */
.header nav{display:flex;align-items:center;gap:clamp(20px,3vw,48px)}
.role{white-space:nowrap;font-size:clamp(22px,3.65vw,54px)}
.contacts{margin:0 var(--gutter);padding:42px 0 62px;border-top:1px solid var(--ink);display:grid;grid-template-columns:1fr 2fr;gap:35px}
.contact-links{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.contact-links a{display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.contact-platform{font-size:10px;letter-spacing:2px;color:var(--muted)}
.contact-handle{font-size:clamp(22px,2.5vw,38px);letter-spacing:-.055em;white-space:nowrap}
.contact-handle .pink{display:inline-block;margin-left:9px;transition:transform .2s}
.contact-links a:hover .pink{transform:translate(3px,-3px)}
@media(max-width:600px){.header nav{gap:19px}.header nav a{font-size:9px;letter-spacing:1.3px;gap:7px}.header nav a span{font-size:15px}.role{font-size:clamp(13px,4.3vw,25px)}.contacts{grid-template-columns:1fr;padding:30px 0 38px;gap:27px}.contact-links{gap:20px}.contact-handle{font-size:clamp(20px,5.1vw,28px)}.contact-handle .pink{margin-left:3px}.intro{max-width:310px}}

/* A continuous, seamless ribbon of video formats. */
.discipline-strip{position:relative;display:block;padding:18px 0;gap:0}
.marquee-track{display:flex;width:max-content;animation:formats-scroll 38s linear infinite;will-change:transform}
.marquee-group{display:flex;flex-shrink:0;align-items:center;gap:42px;padding-right:42px;min-width:100vw;justify-content:space-around}
.marquee-group span{text-transform:uppercase;flex-shrink:0;font-weight:700}
.marquee-group b{flex-shrink:0}
.discipline-strip:hover .marquee-track,.discipline-strip.is-paused .marquee-track{animation-play-state:paused}
.marquee-toggle{position:absolute;right:0;top:0;bottom:0;display:grid;place-items:center;width:42px;padding:0;border:0;border-left:1px solid var(--line);background:var(--paper);color:var(--muted);cursor:pointer}
.marquee-toggle:hover{color:var(--ink)}
.marquee-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:-5px}
.play-icon,.is-paused .pause-icon{display:none}
.is-paused .play-icon{display:block}
@keyframes formats-scroll{to{transform:translateX(-50%)}}
@media(max-width:600px){.discipline-strip{padding:16px 0}.marquee-group{gap:26px;padding-right:26px}.marquee-group span{font-size:11px;letter-spacing:1.6px}.marquee-toggle{width:32px}.intro{max-width:calc(100% - 30px)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;will-change:auto;width:100%}.marquee-group{min-width:0;width:100%;flex-wrap:wrap;white-space:normal;justify-content:center;padding:0 var(--gutter);gap:16px 24px}.marquee-group[aria-hidden="true"],.marquee-toggle{display:none}.discipline-strip{overflow:visible}.marquee-group span{font-size:12px;letter-spacing:1.5px}}

/* Simplified hero metadata. */
.year-mark{display:flex;align-items:center;justify-content:flex-end;gap:18px}
.year-mark .year{margin:0;padding:0}
.year-mark .asterisk{position:relative;top:auto;right:auto;flex-shrink:0}

/* A smaller role line, visually grouped with the name. */
.identity .role{font-size:clamp(20px,2.5vw,36px);margin-top:22px}
@media(max-width:600px){.identity .role{font-size:clamp(12px,3.8vw,20px);margin-top:16px}}
.project-link{display:block}.project-link:focus-visible{outline-offset:8px}

/* Let the introduction and ribbon fill the first viewport; projects follow below. */
@media(min-width:601px){
 .home-page{--intro-screen:max(700px,100svh)}
 .home-page .header{height:80px}
 .home-page .hero{height:calc(var(--intro-screen) - 140px);min-height:0;padding:20px var(--gutter) 28px;justify-content:flex-start;gap:20px}
 .home-page .hero-meta{min-height:36px;align-items:center}
 .home-page .meta-right{min-height:0}
 .home-page .asterisk{width:36px;height:36px}
 .home-page .identity h1{font-size:clamp(90px,min(12.4vw,20svh),160px)}
 .home-page .identity .role{font-size:clamp(20px,2.1vw,28px);margin-top:16px}
 .home-page .intro{font-size:17px;line-height:1.5;margin-top:22px;max-width:min(720px,calc(100% - 90px))}
 .home-page .scroll{bottom:28px}
 .home-page .discipline-strip{height:60px;min-height:60px}
 .home-page .projects{padding-top:32px}
}
@media(min-width:601px) and (prefers-reduced-motion:reduce){.home-page .discipline-strip{height:auto}}

/* Vector icons retain their shape and CSS color on every platform. */
.icon{display:inline-block;width:1em;height:1em;flex-shrink:0;fill:none;stroke:currentColor;vertical-align:-.125em;pointer-events:none}
.header nav a>span{display:inline-flex;align-items:center;line-height:1}
.discipline-strip b{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.contact-handle .pink{line-height:1}

/* Author introduction follows the selected projects. */
.about{margin:0 var(--gutter);padding:42px 0 70px;border-top:1px solid var(--ink)}
.about-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:40px}
.about-heading h2{font-size:clamp(44px,5.3vw,80px);line-height:.95;letter-spacing:-.065em;font-weight:800}
.about-star{position:relative;width:36px;height:36px;flex-shrink:0}
.about-star i{position:absolute;display:block;left:0;top:calc(50% - 1px);width:100%;height:2px;background:var(--pink)}
.about-star i:nth-child(2){transform:rotate(45deg)}.about-star i:nth-child(3){transform:rotate(90deg)}.about-star i:nth-child(4){transform:rotate(135deg)}
.about-layout{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(32px,5vw,80px);align-items:start;max-width:1200px}
.about-portrait{margin:0;max-width:480px}
.about-portrait img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.about-portrait figcaption{margin-top:12px;font-size:12px;line-height:1.5;letter-spacing:.3px;color:var(--muted)}
.about-lead{font-size:clamp(22px,2.2vw,32px);line-height:1.3;letter-spacing:-.035em}
.about-description{margin-top:24px;font-size:clamp(16px,1.3vw,20px);line-height:1.6}
.about-tools{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.about-tools h3{font-size:11px;letter-spacing:2px;margin-bottom:14px}
.about-tools p{font-size:clamp(13px,1.1vw,16px);line-height:1.9}
.about-tools span{white-space:nowrap}.about-tools b{color:#bd728d;font-weight:400;padding:0 5px}
@media(max-width:600px){
 .header nav{gap:clamp(10px,3vw,18px)}.header nav a{font-size:9px;letter-spacing:1px;gap:5px}.header nav a span{font-size:14px}
 .about{padding:30px 0 42px}.about-heading{margin-bottom:28px}.about-heading h2{font-size:44px}
 .about-layout{grid-template-columns:1fr;gap:28px}.about-portrait{max-width:420px;width:100%}.about-lead{font-size:23px}.about-description{font-size:16px;margin-top:22px}
}